:root {
    /* --- 核心變量保持兼容 --- */
    --glass-surface: rgba(255, 255, 255, 0.85); 
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
    --glass-blur: blur(16px);
    
    /* --- [Art Revolution] 榧木与刻线系统 --- */
    --wood-base: #e6b36e;
    --wood-highlight: #f7d59c;
    --wood-shadow: #c49250;
    --wood-grain: rgba(90, 60, 30, 0.07);
    --wood-side: #b58040;
    --board-border-color: #3e2b20; 
    
    /* 线条系统 */
    --line-ink: rgba(30, 20, 15, 0.85); 
    --line-highlight: rgba(255, 255, 255, 0.35);
    
    /* --- 尺寸系統 --- */
    --board-size: 500px;
    --board-padding: 18px; 
    --board-outer: calc(var(--board-size) + var(--board-padding) * 2);
    --scroll-width: 190px;
    --scroll-gap: 18px;
    --board-center-offset: -6px;

    /* 其他功能色 */
    --board-wood: #e8c384; 
    --corrode-color: #2d3436;
    --maple-color: #d32f2f;
    --sun-color: #fbc02d;
    --win-glow: #00e676;
    --warn-glow: #ff5722;
    --chaos-glow: #673ab7;
    --zone-glow: #e17055; 
    --select-color: #FFD700;
    --ui-text-main: #2d3436;
    --ui-text-sub: #636e72;
}

body { 
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    height: 100vh; margin: 0; overflow: hidden; 
    user-select: none; -webkit-user-select: none; 
    touch-action: manipulation; 
    background: #000; 
}

#bgCanvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, #f0f2f5 0%, #dbe3e8 100%);
    opacity: 1; 
    mix-blend-mode: normal; 
}

.fx-canvas-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999;
}

/* --- UI Controls --- */
.top-right-controls {
    position: fixed; top: 20px; right: 20px;
    display: flex; gap: 12px; z-index: 1000;
}
.icon-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 1.2rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.2s, background 0.2s;
    color: #333; 
}
.icon-btn:hover { transform: scale(1.1); background: #fff; }
.icon-btn:active { transform: scale(0.95); }

.resource-download-btn {
    padding: 0;
    overflow: hidden;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.resource-download-btn .resource-download-svg {
    width: 44px;
    height: 44px;
    display: block;
    shape-rendering: geometricPrecision;
}

.resource-shell-circle {
    fill: #ffffff;
}

.resource-arrow-gray {
    fill: #9aa3ab;
    stroke: #7f8992;
    stroke-width: 0.7;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
}

.resource-arrow-green {
    fill: #2fbe59;
    stroke: #248d43;
    stroke-width: 0.7;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
}

.resource-progress-ring {
    fill: none;
    stroke: #2fbe59;
    stroke-width: 2.8;
    stroke-linecap: butt;
    stroke-dasharray: 0 999;
    transform: rotate(-90deg);
    transform-origin: 22px 22px;
    opacity: 0;
    transition: stroke-dasharray 0.25s ease, opacity 0.2s ease;
}

.resource-download-btn.is-downloading .resource-progress-ring,
.resource-download-btn.is-ready .resource-progress-ring {
    opacity: 1;
}

.resource-download-btn.is-ready .resource-arrow-gray {
    fill: #2fbe59;
}

.fps-counter {
    position: fixed; top: 20px; left: 20px;
    color: rgba(0, 255, 0, 0.5); font-family: 'Courier New', monospace;
    font-size: 11px; z-index: 10000; pointer-events: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.screen { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    display: none; flex-direction: column; justify-content: center; align-items: center; 
    background: transparent; z-index: 10; padding: 20px; box-sizing: border-box; 
}
.screen.active { display: flex; animation: fadeZoomIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.glass-panel {
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: var(--glass-shadow);
}

.menu-panel { padding: 40px 30px; width: 90%; max-width: 400px; text-align: center; }

h1 { font-size: 2.5rem; margin-bottom: 5px; color: var(--ui-text-main); text-shadow: 0 2px 10px rgba(255,255,255,0.8); font-weight: 800; letter-spacing: 2px; margin-top: 0; }
h2 { color: var(--ui-text-sub); margin-bottom: 25px; font-weight: 400; font-size: 1.1rem; }
.version-tag { font-size: 0.65rem; background: #2d3436; color: #fff; padding: 4px 8px; border-radius: 12px; margin-left: 8px; vertical-align: middle; }

.btn { 
    padding: 16px 0; width: 85%; max-width: 320px; margin: 12px auto; display: block;
    font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.6); border-radius: 50px; 
    cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); 
    background: rgba(255,255,255,0.9); color: #333; font-weight: 700; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.btn:active { transform: scale(0.96); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.btn.primary { background: #2d3436; color: white; border: none; box-shadow: 0 8px 20px rgba(45, 52, 54, 0.3); }
.btn.secondary { background: rgba(255,255,255,0.6); color: #555; }
.btn.bo3-btn { background: linear-gradient(135deg, #fbc02d, #ff9f43); color: white; border: none; box-shadow: 0 8px 20px rgba(251, 192, 45, 0.3); }

/* --- [Board Layout Area] --- */
.board-area {
    position: relative;
    width: var(--board-outer);
    margin: 0 auto;
    margin-left: calc(50% - (var(--board-outer) / 2) + var(--board-center-offset));
    display: block;
    perspective: 1000px; 
}

.board-area::before {
    content: ''; position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.6) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
    mix-blend-mode: soft-light;
    animation: breathLight 8s ease-in-out infinite;
}
@keyframes breathLight { 0%,100% { opacity: 0.6; } 50% { opacity: 0.9; } }

.board-area .skill-scroll {
    position: absolute; top: 14px; right: calc(100% + var(--scroll-gap)); width: var(--scroll-width); margin-top: 0;
}

/* --- [Ultimate Wrapper] --- */
.board-wrapper {
    grid-column: 2;
    padding: var(--board-padding);
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 8px; 
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    margin: 10px 0;
    position: relative;
    z-index: 1;
    box-sizing: content-box; 
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* --- [Ultimate Board] --- */
.board { 
    position: relative; 
    background-color: var(--wood-base);
    background-image: 
        radial-gradient(ellipse at 30% 20%, var(--wood-highlight) 0%, transparent 70%),
        repeating-linear-gradient(45deg, var(--wood-grain) 0px, var(--wood-grain) 1px, transparent 1px, transparent 4px),
        linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%);

    /* [CRITICAL] 严格保持 10px Padding */
    padding: 10px; 
    
    display: grid; 
    grid-template-columns: repeat(15, 1fr); 
    grid-template-rows: repeat(15, 1fr); 
    gap: 0; 
    border: 3px solid var(--board-border-color); 
    box-sizing: border-box; 
    border-radius: 4px; 
    
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.4),
        inset -1px -1px 0 rgba(0,0,0,0.1),
        1px 1px 0 var(--wood-side),
        2px 2px 0 var(--wood-side),
        3px 3px 0 var(--wood-side),
        4px 4px 0 var(--wood-side),
        5px 5px 0 var(--wood-side),
        6px 6px 0 var(--wood-side),
        7px 7px 5px rgba(0,0,0,0.3),
        15px 25px 40px rgba(0,0,0,0.25);
        
    touch-action: none; 
    width: var(--board-size); 
    height: var(--board-size); 
    background-blend-mode: overlay, normal, multiply;
    transition: box-shadow 0.3s ease;
    z-index: 1; 
}

/* --- [CLEANUP] 移除所有花纹 (Borderless Effect) --- */
.board::before {
    display: none; /* 彻底隐藏花纹层，回归纯净木纹 */
}

@media (max-width: 600px) { 
    .board { 
        padding: 4px; 
        box-shadow: 
            inset 1px 1px 0 rgba(255,255,255,0.3),
            1px 1px 0 var(--wood-side),
            2px 2px 0 var(--wood-side),
            3px 3px 0 var(--wood-side),
            5px 5px 15px rgba(0,0,0,0.25);
    } 
    /* 移动端保留简约 */
    .board::before { display: none; }
}

/* --- [Cells & Grid Lines] --- */
.cell { 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

/* 棋盘线层级：0 */
.cell::before { 
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; 
    background: var(--line-ink); 
    box-shadow: 0 1px 0 var(--line-highlight);
    z-index: 0; 
}
.cell::after { 
    content: ''; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; 
    background: var(--line-ink); 
    box-shadow: 1px 0 0 var(--line-highlight);
    z-index: 0; 
}

.cell:nth-child(15n+1)::before { left: 50%; width: 50%; }
.cell:nth-child(15n)::before { width: 50%; }
.cell:nth-child(-n+15)::after { top: 50%; height: 50%; }
.cell:nth-child(n+211)::after { height: 50%; }

/* --- [CRITICAL FIX] 星位层级修复 --- */
.cell[data-star="true"] .dot { 
    width: 22%; height: 22%; 
    background: radial-gradient(circle at 35% 35%, #4e342e 0%, #271c19 100%);
    border-radius: 50%; 
    position: absolute; 
    
    /* [层级逻辑] Lines(0) < Star(1) < Pieces(20) */
    z-index: 1; 
    
    box-shadow: 
        0 1px 1px rgba(255, 255, 255, 0.3), 
        inset 0 2px 5px rgba(0, 0, 0, 0.8), 
        0 2px 4px rgba(0,0,0,0.2);
}

/* --- [Pieces & Drop Animation] --- */
.piece { 
    width: 90%; height: 90%; 
    
    /* [CRITICAL FIX] 棋子层级提升至最高，确保覆盖星位 */
    z-index: 20; 
    
    pointer-events: none; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    /* [Alpha 0.7.9.3] 移除默认动画，完全由 JS 根据设置动态添加动画类 */
    /* animation: 由 JS 动态添加 drop-fast / drop-slow / drop-fast-bounce / drop-slow-bounce */
    will-change: transform, opacity, box-shadow;
}

/* [Alpha 0.7.9.3] 棋子样式已拆分至 css/pieces.css */

/* --- [Interactions] --- */
.cell.territory-zone { background-color: rgba(211, 47, 47, 0.15) !important; box-shadow: inset 0 0 15px rgba(211, 47, 47, 0.1); } 
.cell.territory-preview { background-color: rgba(211, 47, 47, 0.1); }
/* [Voodoo Skill] 腐蚀阶段样式已拆分至 css/skills/voodoo.css */
.cell.win-highlight { position: relative; z-index: 10; } 
.cell.win-highlight::before { content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; background: #00e676; opacity: 0.8; filter: blur(6px); z-index: -1; animation: flash 0.8s infinite alternate; }

/* [修复] 落子确认 - 使用子元素而非 ::after，避免覆盖竖线 */
.cell.selected-move {
    z-index: 5;
}
/* 落子确认指示器 - 由 JS 动态创建的子元素 */
.move-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--select-color);
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 4;
    animation: breathe 1.5s infinite;
    box-shadow: 0 0 10px var(--select-color);
    pointer-events: none;
}

/* [Alpha 0.7.9.0] 落子锁定标记 - 系统化 HUD 瞄准风格 */
.last-move-marker {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 8;
    animation: markerBreath 2s ease-in-out infinite, markerFadeOut 2s ease-in forwards;
}

/* 4个L形角落 */
.last-move-marker::before,
.last-move-marker::after {
    content: '';
    position: absolute;
    width: 25%;
    height: 25%;
    box-sizing: border-box;
}

/* 左上角 L */
.last-move-marker::before {
    top: 0;
    left: 0;
    border-top: 2px solid #00e676;
    border-left: 2px solid #00e676;
}

/* 右下角 L */
.last-move-marker::after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #00e676;
    border-right: 2px solid #00e676;
}

/* 右上角和左下角 */
.last-move-corner {
    position: absolute;
    width: 25%;
    height: 25%;
    box-sizing: border-box;
    pointer-events: none;
}

/* 右上角 L */
.last-move-corner.top-right {
    top: 0;
    right: 0;
    border-top: 2px solid #00e676;
    border-right: 2px solid #00e676;
}

/* 左下角 L */
.last-move-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #00e676;
    border-left: 2px solid #00e676;
}

/* 系统化呼吸动画 - 一开一合 */
@keyframes markerBreath {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(0.85);
    }
}

/* 2秒后淡出消失 */
@keyframes markerFadeOut {
    0%, 70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* --- [UI Elements] --- */
.top-bar { display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; margin-bottom: 10px; flex-wrap: wrap; position: relative; z-index: 50; }
.timer-pill { 
    background: rgba(255,255,255,0.9); padding: 6px 14px; border-radius: 20px; font-family: 'Monaco', monospace; 
    font-weight: bold; border: 2px solid transparent; transition: all 0.3s; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: #555; display: flex; align-items: center; 
    gap: 6px; min-width: 90px; justify-content: center; white-space: nowrap; 
}
.timer-pill.active { border-color: #333; transform: scale(1.05); background: #fff; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.timer-pill.timer-bomb { background: #ffebee !important; color: #d32f2f !important; border: 2px solid #ff1744 !important; animation: bombPulse 1s infinite alternate !important; }
.timer-pill.timer-critical { background: #b71c1c !important; color: #fff !important; border: 2px solid #fff !important; animation: criticalShake 0.2s infinite, criticalBlink 0.5s infinite !important; }
.timer-pill.timer-critical-normal { background: #fff3e0; color: #e65100; border: 2px solid #ff9800; animation: normalCriticalPulse 1s infinite; }
.bomb-attached-icon { width: 24px; height: 24px; margin-left: 5px; display: inline-flex; vertical-align: middle; }
.bomb-attached-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(255,0,0,0.3)); }
.bomb-status-normal { animation: bombIdle 1.5s infinite ease-in-out; }
.bomb-status-critical { animation: bombExplode 0.3s infinite alternate; }

.status-pill { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: rgba(255,255,255,0.9); border-radius: 20px; font-weight: bold; }
.status-pill .icon-wrapper { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.status-pill .icon-wrapper svg { width: 100%; height: 100%; }

.counter-badge { 
    padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: bold; color: white; 
    display: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 100; align-items: center; gap: 6px;
    position: absolute; bottom: -35px; animation: shake 0.5s; white-space: nowrap;
}
.counter-badge.chaos { background: var(--chaos-glow); right: 15%; }
.counter-badge.short-battle { background: var(--warn-glow); left: 15%; }
.counter-badge.zone { background: var(--zone-glow); left: 50%; transform: translateX(-50%); }
.inline-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; vertical-align: text-bottom; }
.inline-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }

/* 技能卷轴 */
.skill-scroll {
    --scroll-count: 0;
    width: 190px;
    max-height: 34px;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: stretch;
    transition: max-height 0.35s ease;
    margin-top: 12px; position: relative;
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(86,60,28,0.95), rgba(124,88,42,0.98));
    border: 1px solid rgba(90,60,30,0.85); border-radius: 16px;
    box-shadow: 0 14px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}
.skill-scroll::before, .skill-scroll::after {
    content: ''; position: absolute; left: 10px; right: 10px; height: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.2), rgba(255,255,255,0.15), rgba(0,0,0,0.2));
    border-radius: 8px; opacity: 0.6; z-index: 2;
}
.skill-scroll::before { top: 8px; }
.skill-scroll::after { bottom: 8px; }
.skill-scroll.open {
    max-height: calc(38px + var(--scroll-count) * 44px);
    animation: scrollOpen 0.45s ease, scrollSway 1.1s ease-in-out;
    transform-origin: 50% 0%;
}
.skill-scroll.scroll-shake { animation: scrollSway 0.45s ease-in-out; }

.scroll-cap {
    height: 18px;
    background: linear-gradient(180deg, rgba(205,170,120,0.95), rgba(140,98,48,0.95)), repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 8px);
    border: 1px solid rgba(110,74,36,0.85); border-bottom: none; border-radius: 12px 12px 4px 4px;
    position: relative; z-index: 4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(60,40,16,0.35);
}
.scroll-cap::before {
    content: ''; position: absolute; left: 50%; top: -12px; width: 28px; height: 28px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(0,0,0,0) 55%), radial-gradient(circle at 50% 50%, rgba(120,50,20,0.98), rgba(70,32,12,0.98));
    border-radius: 50%; transform: translateX(-50%);
    box-shadow: 0 6px 12px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.15); opacity: 0.9;
}
.scroll-cap::after {
    content: ''; position: absolute; left: 50%; top: 6px; width: 56px; height: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.2), rgba(255,255,255,0.15), rgba(0,0,0,0.2)), repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 3px, rgba(255,255,255,0) 3px, rgba(255,255,255,0) 7px);
    border-radius: 6px; transform: translateX(-50%); opacity: 0.4;
}
.scroll-body {
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.4), rgba(255,255,255,0) 45%), repeating-linear-gradient(12deg, rgba(180,140,90,0.08) 0px, rgba(180,140,90,0.08) 2px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 12px), linear-gradient(180deg, rgba(248,236,210,0.98), rgba(230,214,182,0.96));
    border: 1px solid rgba(140,110,70,0.75); border-top: none; border-radius: 0 0 18px 18px;
    overflow: hidden; max-height: 0; transition: max-height 0.4s ease, padding 0.35s ease;
    padding: 0 12px; position: relative;
}
.scroll-body .scroll-list { position: relative; z-index: 1; }
.skill-scroll.open .scroll-body { max-height: calc(var(--scroll-count) * 44px + 12px); padding: 8px 12px 22px 12px; }
.scroll-list { display: flex; flex-direction: column; gap: 8px; }
.scroll-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(240,230,205,0.75));
    border: 1px solid rgba(150,120,80,0.65); font-weight: 700; color: #3a3a3a;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12); white-space: nowrap;
}
.scroll-item.empty { opacity: 0.45; }
.scroll-item.slot-hidden { display: none; }
.scroll-item .scroll-left { display: inline-flex; align-items: center; gap: 6px; }
.scroll-item .scroll-icon { width: 18px; height: 18px; display: inline-flex; }
.scroll-item .scroll-icon svg { width: 100%; height: 100%; }
.scroll-item .scroll-count { background: rgba(0,0,0,0.08); border-radius: 999px; padding: 2px 8px; font-size: 0.85rem; }
.scroll-item .scroll-target { width: 18px; height: 18px; display: inline-flex; }
.scroll-item .scroll-target img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
    .board-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .board-area .skill-scroll { position: static; margin: 0 auto 6px; width: 75%; max-width: 240px; }
    .board-wrapper { grid-column: auto; }
    .setting-row { flex-direction: column; gap: 10px; }
}

@media (max-width: 600px) {
    :root {
        --board-size: 90vw;
        --board-padding: 6px;
        --board-outer: calc(var(--board-size) + var(--board-padding) + var(--board-padding));
        --scroll-width: 180px;
        --scroll-gap: 12px;
    }
}

.score-board { display: none; background: #2d3436; color: white; padding: 5px 15px; border-radius: 12px; font-family: monospace; font-size: 1rem; position: relative; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.2); letter-spacing: 1px; }

.bottom-controls { margin-top: 15px; display: flex; gap: 12px; width: 95%; max-width: 500px; justify-content: center; }
.bottom-controls .btn { padding: 12px 0; font-size: 1rem; width: 30%; border-radius: 20px; }

.skill-btn { width: 35%; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: white; border: 2px solid #ffd700; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4); transition: transform 0.1s; position: relative; overflow: hidden; }
.skill-btn:active { transform: scale(0.95); }
.skill-btn:disabled { filter: grayscale(1); opacity: 0.6; box-shadow: none; }
.skill-btn .skill-icon-display { width: 28px; height: 28px; margin-bottom: 2px; }
.skill-btn .skill-icon-display svg { width: 100%; height: 100%; stroke: white; stroke-width: 2; fill: none; }

#toast { position: fixed; bottom: 15%; background: rgba(45, 52, 54, 0.9); color: white; padding: 12px 24px; border-radius: 30px; opacity: 0; pointer-events: none; z-index: 10000; transition: opacity 0.3s; backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-weight: 500; }
#explosionOverlay { position: fixed; top:0; left:0; width:100%; height:100%; background:white; opacity:0; pointer-events:none; z-index:9998; }
.explosion-anim { animation: flashWhite 1.5s forwards; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 9999; }
.modal-content { background: #fff; padding: 30px; border-radius: 28px; width: 85%; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
#winnerModal { background: rgba(0, 0, 0, 0.05); backdrop-filter: none; pointer-events: none; }
#winnerModal .modal-content { box-shadow: 0 20px 80px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.8); pointer-events: auto; background: rgba(255, 255, 255, 0.95); }

.settings-content h2 { margin-top: 0; font-weight: 700; color: #2d3436; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.setting-item { margin-bottom: 20px; text-align: left; }
.setting-item label { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; color: #555; margin-bottom: 8px; }
.setting-item label span:last-child { color: #888; font-weight: 400; font-family: monospace; }
input[type=range] { width: 100%; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 3px; background: #e0e0e0; outline: none; margin: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2d3436; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.1s; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.2); }
.setting-divider { height: 1px; background: #eee; margin: 25px 0; width: 100%; }
.setting-row { display: flex; gap: 16px; }
.setting-group { flex: 1; min-width: 0; }
.capsule-selector { display: flex; gap: 8px; background: #f5f6fa; padding: 5px; border-radius: 12px; flex-wrap: wrap; }
.capsule-opt { flex: 1; padding: 10px 0; font-size: 0.85rem; border: none; border-radius: 8px; background: transparent; color: #636e72; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; min-width: 60px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.fps-selector .capsule-opt { padding: 8px 0; font-size: 0.8rem; }
.status-scroll-selector .capsule-opt { padding: 8px 0; font-size: 0.8rem; }
.gold-coin-icon { width: 24px; height: 24px; object-fit: contain; animation: goldCoinSpin 3s linear infinite; }
.capsule-opt:hover { background: rgba(0,0,0,0.03); }
.capsule-opt.active { background: #fff; color: #2d3436; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: scale(1.02); }

#seasonSpring.active, #trackBgm1.active { color: #00b894; text-shadow: 0 0 12px rgba(0, 184, 148, 0.4); }
#seasonSummer.active, #trackBgm2.active { color: #fbc02d; text-shadow: 0 0 10px rgba(251, 192, 45, 0.6); }
#seasonAutumn.active, #trackBgm3.active { color: #d35400; text-shadow: 0 3px 4px rgba(211, 84, 0, 0.25); }
#seasonWinter.active, #trackBgm4.active { color: #0984e3; text-shadow: 0 0 6px rgba(130, 204, 221, 0.6); }

.skin-section-title { font-size: 0.9rem; color: #888; margin-bottom: 10px; text-align: left; width: 100%; font-weight: 600; }
#winLightning.active { color: #03a9f4; text-shadow: 0 0 8px rgba(3, 169, 244, 0.5); }
#winGold.active { color: #ffb300; text-shadow: 0 0 8px rgba(255, 179, 0, 0.5); }
#winFuture.active { color: #d500f9; text-shadow: 0 0 8px rgba(213, 0, 249, 0.5); }
#celFireworks.active { color: #ff5722; text-shadow: 0 0 8px rgba(255, 87, 34, 0.5); }
#celChromatic.active { background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#celChromatic.active::after { content:''; position:absolute; inset:0; border-radius:8px; border: 1px solid rgba(0,0,0,0.1); pointer-events:none; }
#celGolden.active { background: linear-gradient(135deg, #D4AF37 0%, #F4A460 25%, #DAA520 50%, #B8860B 75%, #CD853F 100%); background-size: 200% 200%; animation: goldenSandFlow 3s ease-in-out infinite; color: transparent; background-clip: text; -webkit-background-clip: text; text-shadow: none; position: relative; overflow: hidden; }
#celGolden.active::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 40%, rgba(255, 215, 0, 0.3) 50%, rgba(255, 215, 0, 0.1) 60%, transparent 70%); animation: goldenSandShimmer 2s linear infinite; pointer-events: none; border-radius: 8px; }
#celDJ.active { color: #00e676; text-shadow: 0 0 8px rgba(0, 230, 118, 0.6); }

.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 500px; max-height: 60vh; overflow-y: auto; padding: 5px; box-sizing: border-box; }
.skill-card { background: rgba(255,255,255,0.8); padding: 12px; border-radius: 16px; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.03); text-align: left; display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 70px; transition: transform 0.2s, box-shadow 0.2s; }
.skill-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); background: rgba(255,255,255,0.95); }
.skill-card.selected { background: #fff; border-color: #6c5ce7; box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2); }
.skill-card.selected .skill-icon svg { stroke: #6c5ce7; fill: rgba(108, 92, 231, 0.1); } 
.skill-icon { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.04); border-radius: 10px; flex-shrink: 0; }
.skill-icon svg { width: 20px; height: 20px; stroke: #444; stroke-width: 2; fill: none; transition: all 0.2s; }
.skill-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.skill-title { font-weight: 800; font-size: 0.9rem; color: #2d3436; margin-bottom: 2px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-desc { font-size: 0.7rem; color: #636e72; line-height: 1.2; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.skin-selector { display: flex; gap: 20px; justify-content: center; margin: 25px 0; }
.skin-option { border: 2px solid #f0f0f0; border-radius: 16px; padding: 15px; cursor: pointer; width: 100px; transition: all 0.2s; background: #fafafa; }
.skin-option.active { border-color: #2d3436; background: #fff; transform: scale(1.08); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.skin-preview { width: 48px; height: 48px; margin: 0 auto 8px; position: relative; display: flex; justify-content: center; align-items: center; }
.skin-preview svg { width: 100%; height: 100%; }
.skin-preview .classic-demo { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #666 0%, #111 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.skin-preview .nature-demo { width: 100%; height: 100%; }

/* [Alpha 0.7.9.0] 皮肤/棋盘选择器入口按钮 */
.skin-entry-row { display: flex; gap: 20px; justify-content: center; align-items: flex-start; margin: 25px 0; width: 100%; }
.skin-entry-group { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.skin-section-title { font-size: 0.95rem; font-weight: 600; color: #2d3436; text-align: center; }
.skin-entry-btn { width: 100px; height: 100px; border: 2px solid #e0e0e0; border-radius: 16px; background: #fafafa; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.skin-entry-btn:hover { border-color: #2d3436; background: #fff; transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.skin-entry-preview { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px; box-sizing: border-box; }
.board-entry-preview { padding: 8px; }

/* [Alpha 0.7.9.0] 棋子/棋盘选择器模态框 */
.selector-modal-content { max-width: 360px; }
.skin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
.skin-grid-item { border: 2px solid #e0e0e0; border-radius: 16px; padding: 12px; cursor: pointer; background: #fafafa; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skin-grid-item:hover:not(.disabled) { border-color: #2d3436; background: #fff; transform: scale(1.03); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.skin-grid-item.active { border-color: #6c5ce7; background: #fff; box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); }
.skin-grid-item.disabled { opacity: 0.5; cursor: not-allowed; }
.skin-grid-label { font-size: 0.85rem; font-weight: 600; color: #2d3436; }

/* 双棋子预览（黑白分隔） */
.piece-dual-preview { width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; gap: 0; position: relative; }
.piece-half { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.piece-divider { width: 1px; height: 36px; background: #333; margin: 0 8px; }
.piece-black-classic { background: radial-gradient(circle at 30% 30%, #555 0%, #111 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.3); }
.piece-white-classic { background: radial-gradient(circle at 30% 30%, #fff 0%, #ccc 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.2); border: 1px solid #ddd; }
.piece-maple { background: url('images/maple.png') center/contain no-repeat, radial-gradient(circle at 30% 30%, #8B4513 0%, #5D3A1A 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.3); }
.piece-sun { background: url('images/sun.png') center/contain no-repeat, radial-gradient(circle at 30% 30%, #FFD700 0%, #FFA500 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.2); }

/* [修复] 冰/火主题棋子预览 - 统一UI逻辑样式（与黑白、自然棋子一致），通过background-size放大到1.5倍 */
.piece-ice {
    background: transparent;
    box-shadow: none;
    background-image: url('images/ice.png');
    background-size: 150%;  /* 放大到1.5倍 */
    background-position: center;
    background-repeat: no-repeat;
}

.piece-fire {
    background: transparent;
    box-shadow: none;
    background-image: url('images/fire.png');
    background-size: 150%;  /* 放大到1.5倍 */
    background-position: center;
    background-repeat: no-repeat;
}

/* 迷你棋盘预览 */
.board-mini-preview { width: 100%; height: 60px; border-radius: 8px; position: relative; overflow: hidden; }

/* 经典木质预览 - 强调立体木边效果 */
.classic-wood-preview { 
    background: 
        linear-gradient(90deg, transparent 0%, rgba(139, 90, 43, 0.15) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(101, 67, 33, 0.1) 50%, transparent 100%),
        linear-gradient(135deg, #e6b36e 0%, #d4a05a 25%, #c49250 50%, #e6b36e 75%, #f0c070 100%);
    border: 3px solid #3e2b20;
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.4),
        inset -1px -1px 0 rgba(0,0,0,0.1),
        2px 2px 0 #b58040,
        3px 3px 0 #a07035,
        4px 4px 0 #906030,
        5px 5px 4px rgba(0,0,0,0.3);
}
.classic-wood-preview::before { 
    content: ''; position: absolute; inset: 6px; 
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(0,0,0,0.12) 6px, rgba(0,0,0,0.12) 7px),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(0,0,0,0.12) 6px, rgba(0,0,0,0.12) 7px);
}
.classic-wood-preview::after { 
    content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; 
    background: radial-gradient(circle, #3e2b20 0%, #2a1a10 100%); 
    border-radius: 50%; transform: translate(-50%, -50%); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* 现代简约预览 - 强调金线镶嵌和紫檀木框 */
.modern-preview { 
    background: 
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 60%),
        linear-gradient(135deg, #eecfa1 0%, #e8c595 25%, #e0bb88 50%, #eecfa1 75%, #f5d8a8 100%);
    border: 4px solid #5d4037;
    box-shadow: 
        0 0 0 1px #c5a059,
        0 0 0 3px #3e2723,
        inset 2px 2px 4px rgba(0,0,0,0.25),
        inset -1px -1px 2px rgba(255,255,255,0.3),
        0 4px 8px rgba(0,0,0,0.25);
    border-radius: 4px;
}
.modern-preview::before { 
    content: ''; position: absolute; inset: 5px; 
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(30,20,15,0.15) 5px, rgba(30,20,15,0.15) 6px),
        repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(30,20,15,0.15) 5px, rgba(30,20,15,0.15) 6px);
}
.modern-preview::after { 
    content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; 
    background: radial-gradient(circle, #4e342e 0%, #271c19 100%); 
    border-radius: 50%; transform: translate(-50%, -50%); 
    box-shadow: 
        0 1px 1px rgba(255,255,255,0.2),
        inset 0 1px 2px rgba(0,0,0,0.5);
}

/* 现代简约预览 - 四角金色装饰点 */
.modern-preview .corner-decor {
    position: absolute; width: 4px; height: 4px;
    background: linear-gradient(135deg, #d4af37 0%, #c5a059 100%);
    border-radius: 1px;
    box-shadow: 0 0 2px rgba(197, 160, 89, 0.6);
}
.modern-preview .corner-decor.tl { top: 3px; left: 3px; }
.modern-preview .corner-decor.tr { top: 3px; right: 3px; }
.modern-preview .corner-decor.bl { bottom: 3px; left: 3px; }
.modern-preview .corner-decor.br { bottom: 3px; right: 3px; }

/* [Alpha 0.7.9.5] 沙滩预览 - 树枝划痕棋线 */
.beach-preview {
    /* 海水背景 */
    background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 30%, #0ea5e9 70%, #0284c7 100%);
    border: 3px solid #0284c7;
    border-radius: 6px;
    box-shadow: 
        inset 0 0 8px rgba(255, 255, 255, 0.3),
        0 3px 6px rgba(0, 80, 120, 0.25);
}
/* 沙滩内盘 + 树枝划痕（粗线、大间距） */
.beach-preview::before {
    content: ''; position: absolute; inset: 6px;
    background: 
        /* 树枝划痕 - 横线（棕色、粗、稀疏） */
        repeating-linear-gradient(0deg, 
            transparent 0px, transparent 10px, 
            rgba(101, 67, 33, 0.4) 10px, rgba(101, 67, 33, 0.4) 12px),
        /* 树枝划痕 - 竖线 */
        repeating-linear-gradient(90deg, 
            transparent 0px, transparent 10px, 
            rgba(101, 67, 33, 0.4) 10px, rgba(101, 67, 33, 0.4) 12px),
        /* 沙滩高光 */
        radial-gradient(ellipse 50% 40% at 25% 30%, rgba(255, 240, 180, 0.4) 0%, transparent 60%),
        /* 沙滩主体 */
        linear-gradient(145deg, #f5d060 0%, #e8c040 30%, #d4a830 60%, #c09020 100%);
    border-radius: 3px;
    border: 2px solid #6a4a20;
}
/* 鹅卵石星位 */
.beach-preview::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px;
    background: radial-gradient(ellipse at 35% 30%, #d0d0d0 0%, #a0a0a0 60%, #808080 100%);
    border-radius: 45% 55% 50% 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 敬请期待样式 */
.coming-soon { background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%); justify-content: center; align-items: center; }
.coming-soon span { font-size: 1.5rem; color: #999; font-weight: bold; }
.board-mini-preview.coming-soon { display: flex; }

.turn-choice-container { display: flex; gap: 20px; justify-content: center; margin-top: 20px; }
.turn-card { background: rgba(255,255,255,0.9); padding: 20px; border-radius: 20px; border: 3px solid transparent; cursor: pointer; text-align: center; width: 120px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); transition: transform 0.2s; }
.turn-card:active { transform: scale(0.95); }
.turn-card.maple { border-color: transparent; color: #333; }
.turn-card.maple:hover { border-color: #333; background: #fff; }
.turn-card.sun { border-color: transparent; color: #666; }
.turn-card.sun:hover { border-color: #999; background: #fff; }
.turn-card h3 { font-size: 1.2rem; margin: 10px 0 0 0; font-weight: 700; }
.turn-card .icon { font-size: 0; width: 64px; height: 64px; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
.turn-card .icon svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }

@keyframes fadeZoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes drop { 
    0% { 
        transform: scale(1.3) translateY(-20px); 
        opacity: 0; 
        filter: blur(2px);
    } 
    50% { 
        transform: scale(0.92) translateY(3px); 
        opacity: 1; 
        filter: blur(0);
    }
    70% {
        transform: scale(1.05) translateY(-2px);
    }
    85% {
        transform: scale(0.98) translateY(1px);
    }
    100% { 
        transform: scale(1) translateY(0); 
    } 
}

/* [Alpha 0.7.9.3] 棋子波纹特效已拆分至 css/pieces.css */

/* [Alpha 0.7.9.3] 棋盘落子震动效果 */
@keyframes boardShake {
    0%, 100% { transform: translateY(-5px); }
    20% { transform: translateY(-5px) translate(2px, 1px); }
    40% { transform: translateY(-5px) translate(-2px, -1px); }
    60% { transform: translateY(-5px) translate(1px, 2px); }
    80% { transform: translateY(-5px) translate(-1px, -1px); }
}

.board-wrapper.shake {
    animation: boardShake 120ms ease-out;
}
@keyframes flashWhite { 0%{opacity:1;} 100%{opacity:0;} }
@keyframes shake { 0%{transform:translateX(0);} 25%{transform:translateX(-2px);} 75%{transform:translateX(2px);} }
@keyframes bombPulse { from { box-shadow: 0 0 5px rgba(211, 47, 47, 0.5); transform: scale(1); } to { box-shadow: 0 0 15px rgba(211, 47, 47, 0.8); transform: scale(1.05); } }
@keyframes criticalShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, -2px); } 100% { transform: translate(0, 0); } }
@keyframes criticalBlink { 0%, 100% { background: #b71c1c; border-color: white; } 50% { background: #000; border-color: #ff1744; } }
@keyframes normalCriticalPulse { 0% { box-shadow: 0 0 0 #ff9800; } 50% { box-shadow: 0 0 10px #ff9800; } 100% { box-shadow: 0 0 0 #ff9800; } }
@keyframes flash { from{opacity:0.6; transform:scale(0.9);} to{opacity:1; transform:scale(1.15);} }
@keyframes breathe { 0%{opacity:0.6; transform:scale(0.95);} 50%{opacity:1; transform:scale(1.05);} 100%{opacity:0.6; transform:scale(0.95);} }
@keyframes bombIdle { 0% { transform: scale(1); } 50% { transform: scale(1.15) rotate(5deg); filter: drop-shadow(0 0 5px #ff5722); } 100% { transform: scale(1); } }
@keyframes bombExplode { 0% { transform: scale(1.2) rotate(-10deg); filter: drop-shadow(0 0 10px red); } 100% { transform: scale(1.4) rotate(10deg); filter: drop-shadow(0 0 20px red); } }
@keyframes scrollOpen { 0% { transform: scaleY(0.92); opacity: 0.8; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes scrollSway { 0% { transform: rotate(0deg); } 35% { transform: rotate(-1deg); } 70% { transform: rotate(0.8deg); } 100% { transform: rotate(0deg); } }
@keyframes goldCoinSpin { 0% { transform: scaleY(1); } 25% { transform: scaleY(0.3); } 50% { transform: scaleY(-1); } 75% { transform: scaleY(-0.3); } 100% { transform: scaleY(1); } }
@keyframes goldenSandFlow { 0% { background-position: 0% 0%; } 25% { background-position: 100% 50%; } 50% { background-position: 50% 100%; } 75% { background-position: 0% 50%; } 100% { background-position: 0% 0%; } }
@keyframes goldenSandShimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } }


/* ========================================= */
/* [Alpha 0.7.9.1] 现代简约棋盘皮肤          */
/* Board Skin: Modern Minimalist             */
/* ========================================= */

.board.skin-modern { 
    /* 核心：内盘面（更浅的榧木色） */
    background-color: #eecfa1;
    background-image: 
        /* 细腻的木纹噪点 - 使用SVG Filter生成分形噪点 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
        /* 温暖的径向光照，模拟顶光 */
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.05) 100%);

    /* [CRITICAL] 调整 padding 以匹配当前棋盘尺寸 */
    padding: 10px; 
    
    /* 边框系统：模拟紫檀木外框 */
    border: 6px solid #5d4037;
    border-radius: 6px; 
    
    /* 光影与材质系统 */
    box-shadow: 
        /* 1. 金线镶嵌 (Gold Inlay) */
        0 0 0 1px #c5a059,
        /* 2. 外框立体感 - 模拟木材倒角 */
        0 0 0 4px #3e2723,
        0 0 0 5px rgba(255,255,255,0.1),
        /* 3. 内阴影 - 让棋盘中心看起来是下陷镶嵌进去的 */
        inset 2px 2px 6px rgba(0,0,0,0.4),
        inset -1px -1px 2px rgba(255,255,255,0.2),
        /* 4. 环境投影 */
        0 20px 50px rgba(0,0,0,0.4),
        0 5px 15px rgba(0,0,0,0.2);
        
    /* 混合模式确保纹理自然融合 */
    background-blend-mode: soft-light, normal;
}

/* 现代简约棋盘 - 四角回纹装饰 */
.board.skin-modern::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    pointer-events: none;
    z-index: 0;
    display: block !important; /* 覆盖默认的 display: none */
    
    /* 装饰纹样颜色 */
    --ornament-color: rgba(62, 39, 35, 0.12); 
    
    /* 四角对称回纹 */
    background-image: 
        linear-gradient(135deg, var(--ornament-color) 25%, transparent 25%),
        linear-gradient(225deg, var(--ornament-color) 25%, transparent 25%),
        linear-gradient(315deg, var(--ornament-color) 25%, transparent 25%),
        linear-gradient(45deg, var(--ornament-color) 25%, transparent 25%);
        
    /* 精确控制四个角的位置 */
    background-position: 
        6px 6px,
        calc(100% - 6px) 6px,
        calc(100% - 6px) calc(100% - 6px),
        6px calc(100% - 6px);
        
    background-size: 28px 28px;
    background-repeat: no-repeat;
    
    /* 微妙的整体光泽 */
    box-shadow: inset 0 0 80px rgba(255, 193, 7, 0.05);
}

/* 现代简约棋盘 - 移动端适配 */
@media (max-width: 600px) { 
    .board.skin-modern { 
        padding: 4px; 
        border-width: 3px;
        box-shadow: 
            0 0 0 1px #c5a059,
            0 0 0 2px #3e2723,
            inset 1px 1px 4px rgba(0,0,0,0.3),
            0 10px 30px rgba(0,0,0,0.3);
    } 
    .board.skin-modern::before { display: none !important; }
}


/* ========================================= */
/* [Alpha 0.7.9.4] 沙滩棋盘皮肤              */
/* Board Skin: Beach Paradise                */
/* 设计理念：午后热带沙滩，海水环绕，惬意松软  */
/* ========================================= */

/* === 海水环绕层 (Board Wrapper) === */
/* 只影响外围间隙，不覆盖棋盘内部 */
.board-wrapper.skin-beach {
    /* 海水基底色 - 清澈热带海水 */
    background: 
        linear-gradient(180deg, 
            #6dd5ed 0%,
            #4fc3dc 30%,
            #3bb5d0 60%,
            #2aa5c0 100%
        );
    
    /* 覆盖默认样式 */
    backdrop-filter: none;
    border-radius: 12px;
    /* [修复] 使用固定 padding 确保四边均匀，比其他皮肤更大以展示水流 */
    padding: 24px;
    position: relative;
    overflow: hidden;
    
    /* [修复] 确保内部棋盘居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 
        /* 海水深度感 */
        inset 0 0 20px rgba(0, 80, 120, 0.3),
        inset 0 0 40px rgba(0, 60, 100, 0.15),
        /* 外部投影 */
        0 15px 40px rgba(0, 80, 120, 0.25),
        0 6px 15px rgba(0, 60, 100, 0.15);
}

/* === 第一层：流动的海水波纹 === */
/* [Alpha 0.7.9.5] 性能优化：使用 transform 代替 background-position */
.board-wrapper.skin-beach::before {
    content: '';
    position: absolute;
    /* 扩展尺寸以实现无缝循环 */
    top: 0; left: -100%; 
    width: 200%; height: 100%;
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
    
    /* 波纹渐变 - 使用固定渐变，通过 transform 移动 */
    background: 
        repeating-linear-gradient(
            105deg,
            transparent 0px,
            rgba(255, 255, 255, 0.08) 15px,
            transparent 30px,
            transparent 60px,
            rgba(255, 255, 255, 0.05) 75px,
            transparent 90px
        ),
        repeating-linear-gradient(
            95deg,
            transparent 0px,
            rgba(200, 240, 255, 0.06) 20px,
            transparent 40px,
            transparent 80px
        );
    
    /* GPU 加速 */
    will-change: transform;
    
    /* 使用 transform 动画 - 更流畅，无跳跃 */
    animation: waterFlowTransform 20s linear infinite;
}

/* === 第二层：浪花泡沫（靠近棋盘边缘） === */
/* [Alpha 0.7.9.5] 简化为静态效果，移除动画 */
.board-wrapper.skin-beach::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
    
    /* 静态浪花效果 - 无动画 */
    box-shadow:
        /* 浪花白沫 - 内圈 */
        inset 0 0 10px 4px rgba(255, 255, 255, 0.3),
        inset 0 0 20px 8px rgba(200, 240, 255, 0.15),
        /* 水的光泽 */
        inset 0 -3px 10px rgba(255, 255, 255, 0.12),
        inset 0 3px 10px rgba(0, 60, 100, 0.08);
}

/* === 海水流动动画 === */
/* [Alpha 0.7.9.5] 优化版：使用 transform 实现无缝循环 */
@keyframes waterFlowTransform {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

/* === 沙滩主体 (Board) === */
.board.skin-beach {
    /* [重做] 真实沙滩色彩 - 金黄色调 */
    --sand-bright: #f5d060;     /* 阳光直射的亮沙 */
    --sand-main: #e8c040;       /* 主体沙色 - 明亮金黄 */
    --sand-mid: #d4a830;        /* 中间色 */
    --sand-dark: #c09020;       /* 阴影区 */
    --sand-wet: #a07818;        /* 湿沙 */
    
    /* 纯净的沙黄色基底 */
    background-color: #e0b838;
    
    /* 多层沙子纹理 */
    background-image: 
        /* 第6层：密集的沙粒点 - 模拟真实沙子颗粒 */
        radial-gradient(circle 0.8px at 5% 8%, #f8e080 0%, transparent 100%),
        radial-gradient(circle 0.6px at 12% 22%, #f0d060 0%, transparent 100%),
        radial-gradient(circle 0.9px at 18% 5%, #ffe090 0%, transparent 100%),
        radial-gradient(circle 0.7px at 25% 35%, #f5d870 0%, transparent 100%),
        radial-gradient(circle 0.8px at 32% 12%, #f8dc78 0%, transparent 100%),
        radial-gradient(circle 0.6px at 38% 28%, #f0c850 0%, transparent 100%),
        radial-gradient(circle 0.9px at 45% 8%, #ffe488 0%, transparent 100%),
        radial-gradient(circle 0.7px at 52% 42%, #f5d060 0%, transparent 100%),
        radial-gradient(circle 0.8px at 58% 18%, #f8e090 0%, transparent 100%),
        radial-gradient(circle 0.6px at 65% 32%, #f0d468 0%, transparent 100%),
        radial-gradient(circle 0.9px at 72% 6%, #ffe080 0%, transparent 100%),
        radial-gradient(circle 0.7px at 78% 25%, #f5dc70 0%, transparent 100%),
        radial-gradient(circle 0.8px at 85% 15%, #f8d878 0%, transparent 100%),
        radial-gradient(circle 0.6px at 92% 38%, #f0c848 0%, transparent 100%),
        radial-gradient(circle 0.7px at 8% 55%, #ffe488 0%, transparent 100%),
        radial-gradient(circle 0.8px at 15% 68%, #f5d060 0%, transparent 100%),
        radial-gradient(circle 0.6px at 22% 82%, #f8e090 0%, transparent 100%),
        radial-gradient(circle 0.9px at 28% 48%, #f0d468 0%, transparent 100%),
        radial-gradient(circle 0.7px at 35% 72%, #ffe080 0%, transparent 100%),
        radial-gradient(circle 0.8px at 42% 58%, #f5dc70 0%, transparent 100%),
        radial-gradient(circle 0.6px at 48% 88%, #f8d878 0%, transparent 100%),
        radial-gradient(circle 0.9px at 55% 65%, #f0c848 0%, transparent 100%),
        radial-gradient(circle 0.7px at 62% 78%, #ffe488 0%, transparent 100%),
        radial-gradient(circle 0.8px at 68% 52%, #f5d060 0%, transparent 100%),
        radial-gradient(circle 0.6px at 75% 92%, #f8e090 0%, transparent 100%),
        radial-gradient(circle 0.9px at 82% 62%, #f0d468 0%, transparent 100%),
        radial-gradient(circle 0.7px at 88% 85%, #ffe080 0%, transparent 100%),
        radial-gradient(circle 0.8px at 95% 48%, #f5dc70 0%, transparent 100%),
        
        /* 第5层：更多随机沙粒 */
        radial-gradient(circle 1px at 3% 45%, #d8b030 0%, transparent 100%),
        radial-gradient(circle 1.2px at 17% 62%, #c8a028 0%, transparent 100%),
        radial-gradient(circle 1px at 33% 38%, #d0a830 0%, transparent 100%),
        radial-gradient(circle 1.1px at 47% 75%, #c09020 0%, transparent 100%),
        radial-gradient(circle 1px at 63% 45%, #d8b038 0%, transparent 100%),
        radial-gradient(circle 1.2px at 77% 68%, #c8a020 0%, transparent 100%),
        radial-gradient(circle 1px at 93% 55%, #d0a828 0%, transparent 100%),
        
        /* 第4层：高密度噪点 - 沙子颗粒感 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"),
        
        /* 第3层：中等噪点 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.15'/%3E%3C/svg%3E"),
        
        /* 第2层：阳光照射区域 */
        radial-gradient(ellipse 80% 80% at 25% 20%, 
            rgba(255, 240, 150, 0.5) 0%, 
            transparent 60%),
        
        /* ===== 湿沙到干沙多层精细过渡（四边对称） ===== */
        /* 第1层-A：最湿的边缘（深棕色，紧贴水边） */
        linear-gradient(to bottom, rgba(120, 85, 25, 0.5) 0%, rgba(120, 85, 25, 0.3) 3%, transparent 6%),
        linear-gradient(to top, rgba(120, 85, 25, 0.5) 0%, rgba(120, 85, 25, 0.3) 3%, transparent 6%),
        linear-gradient(to right, rgba(120, 85, 25, 0.5) 0%, rgba(120, 85, 25, 0.3) 3%, transparent 6%),
        linear-gradient(to left, rgba(120, 85, 25, 0.5) 0%, rgba(120, 85, 25, 0.3) 3%, transparent 6%),
        
        /* 第1层-B：湿沙第二层（稍浅） */
        linear-gradient(to bottom, rgba(140, 100, 35, 0.35) 0%, rgba(140, 100, 35, 0.18) 6%, transparent 12%),
        linear-gradient(to top, rgba(140, 100, 35, 0.35) 0%, rgba(140, 100, 35, 0.18) 6%, transparent 12%),
        linear-gradient(to right, rgba(140, 100, 35, 0.35) 0%, rgba(140, 100, 35, 0.18) 6%, transparent 12%),
        linear-gradient(to left, rgba(140, 100, 35, 0.35) 0%, rgba(140, 100, 35, 0.18) 6%, transparent 12%),
        
        /* 第1层-C：湿沙第三层（过渡色） */
        linear-gradient(to bottom, rgba(160, 115, 45, 0.25) 0%, rgba(160, 115, 45, 0.1) 10%, transparent 18%),
        linear-gradient(to top, rgba(160, 115, 45, 0.25) 0%, rgba(160, 115, 45, 0.1) 10%, transparent 18%),
        linear-gradient(to right, rgba(160, 115, 45, 0.25) 0%, rgba(160, 115, 45, 0.1) 10%, transparent 18%),
        linear-gradient(to left, rgba(160, 115, 45, 0.25) 0%, rgba(160, 115, 45, 0.1) 10%, transparent 18%),
        
        /* 第1层-D：半干沙（微微深色） */
        linear-gradient(to bottom, rgba(180, 130, 55, 0.15) 0%, rgba(180, 130, 55, 0.05) 15%, transparent 25%),
        linear-gradient(to top, rgba(180, 130, 55, 0.15) 0%, rgba(180, 130, 55, 0.05) 15%, transparent 25%),
        linear-gradient(to right, rgba(180, 130, 55, 0.15) 0%, rgba(180, 130, 55, 0.05) 15%, transparent 25%),
        linear-gradient(to left, rgba(180, 130, 55, 0.15) 0%, rgba(180, 130, 55, 0.05) 15%, transparent 25%);
    
    /* 边框：深色木棍/漂流木 */
    border: 5px solid #6a4a20;
    border-radius: 6px;
    
    box-shadow: 
        /* 内部柔和光 */
        inset 2px 2px 6px rgba(255, 230, 150, 0.3),
        inset -2px -2px 6px rgba(100, 70, 20, 0.25),
        /* 外部阴影 */
        0 4px 10px rgba(100, 70, 20, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15);
    
    padding: 10px;
}

/* 沙滩棋盘 - 角落装饰（渐变版） */
.board.skin-beach::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 2;
    display: block !important; /* 覆盖全局的display:none */
    
    background-image:
        /* 右上角 - 海星PNG */
        url('images/starfish.png'),
        
        /* 左上角 - 扇贝壳 */
        radial-gradient(ellipse 18px 14px at 22px 22px, 
            #faf0e6 0%, #f5deb3 40%, #deb887 70%, transparent 71%),
        radial-gradient(ellipse 3px 10px at 18px 18px,
            rgba(139, 115, 85, 0.3) 0%, transparent 100%),
        radial-gradient(ellipse 3px 10px at 22px 16px,
            rgba(139, 115, 85, 0.25) 0%, transparent 100%),
        radial-gradient(ellipse 3px 10px at 26px 18px,
            rgba(139, 115, 85, 0.3) 0%, transparent 100%),
            
        /* 左下角 - 螺旋贝 */
        radial-gradient(ellipse 12px 16px at 20px calc(100% - 20px),
            #faf8f0 0%, #e8dcc8 50%, #c9b896 80%, transparent 81%),
        conic-gradient(from 180deg at 20px calc(100% - 20px),
            rgba(139, 115, 85, 0.2) 0deg, transparent 30deg, 
            rgba(139, 115, 85, 0.15) 60deg, transparent 90deg,
            rgba(139, 115, 85, 0.2) 120deg, transparent 150deg,
            rgba(139, 115, 85, 0.15) 180deg, transparent 210deg),
            
        /* 右下角 - 鹅卵石群 */
        radial-gradient(ellipse 8px 6px at calc(100% - 28px) calc(100% - 18px),
            #a0a0a0 0%, #808080 70%, transparent 71%),
        radial-gradient(ellipse 6px 5px at calc(100% - 18px) calc(100% - 22px),
            #b0b0b0 0%, #909090 70%, transparent 71%),
        radial-gradient(ellipse 5px 4px at calc(100% - 22px) calc(100% - 28px),
            #c0c0c0 0%, #a0a0a0 70%, transparent 71%);
    
    background-repeat: no-repeat;
    background-size: 40px 48px, auto, auto, auto, auto, auto, auto, auto, auto, auto;
    background-position: calc(100% + 5px) -5px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* 沙滩棋盘 - 额外装饰层（沙滩边缘细节） */
.board.skin-beach::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 4px;
    
    /* 湿沙光泽反射 */
    background: 
        /* 边缘湿沙的微光反射 - 金黄色调 */
        linear-gradient(to bottom, rgba(255, 220, 100, 0.25) 0%, transparent 12%),
        linear-gradient(to top, rgba(255, 215, 90, 0.2) 0%, transparent 12%),
        linear-gradient(to right, rgba(255, 218, 95, 0.22) 0%, transparent 12%),
        linear-gradient(to left, rgba(255, 218, 95, 0.22) 0%, transparent 12%);
}

/* 沙滩棋盘 - 沙上划痕线条 */
.board.skin-beach .cell::before {
    background: rgba(160, 120, 50, 0.6);
    box-shadow: 
        0 0.5px 0 rgba(255, 220, 120, 0.3);
    height: 1.2px;
}

.board.skin-beach .cell::after {
    background: rgba(160, 120, 50, 0.6);
    box-shadow: 
        0.5px 0 0 rgba(255, 220, 120, 0.3);
    width: 1.2px;
}

/* [修复] 沙滩棋盘落子确认 - 现在使用 JS 动态创建 .move-indicator 子元素，不再覆盖竖线 */

/* 沙滩棋盘 - 鹅卵石星位 */
.board.skin-beach .cell[data-star="true"] .dot {
    width: 26%;
    height: 26%;
    background: 
        /* 鹅卵石光泽 */
        radial-gradient(ellipse 60% 40% at 35% 30%, 
            rgba(255, 255, 255, 0.6) 0%, transparent 50%),
        /* 鹅卵石主体 */
        radial-gradient(circle at 45% 45%,
            #d0d0d0 0%,
            #b8b8b8 30%,
            #a0a0a0 60%,
            #888888 100%
        );
    border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
    box-shadow: 
        /* 石子立体感 */
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        /* 沙中嵌入感 */
        0 2px 3px rgba(0, 0, 0, 0.25),
        0 1px 1px rgba(139, 115, 85, 0.3);
    transform: rotate(-5deg);
}

/* 沙滩棋盘 - 移动端适配 */
@media (max-width: 600px) {
    .board-wrapper.skin-beach {
        /* [修复] 移动端也使用固定 padding */
        padding: 12px;
        animation: none; /* 移动端关闭动画节省性能 */
    }
    
    .board-wrapper.skin-beach::before {
        animation: none;
        opacity: 0.6;
    }
    
    .board.skin-beach {
        padding: 4px;
        border-width: 3px;
        box-shadow: 
            inset 1px 1px 3px rgba(255, 255, 255, 0.15),
            inset -1px -1px 3px rgba(0, 0, 0, 0.1),
            0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .board.skin-beach::before {
        /* 移动端简化装饰 */
        background-image:
            /* 只保留两个角的装饰 */
            radial-gradient(ellipse 14px 10px at 16px 16px, 
                #faf0e6 0%, #f5deb3 40%, #deb887 70%, transparent 71%),
            radial-gradient(circle 5px at calc(100% - 20px) 20px,
                #e07050 0%, #c85040 60%, transparent 61%);
    }
    
    .board.skin-beach .cell[data-star="true"] .dot {
        width: 24%;
        height: 24%;
    }
}


/* ========================================= */
/* [Alpha 0.7.9.3] LYSH 开发者区域样式       */
/* LYSH Developer Zone Styles                */
/* ========================================= */

.lysh-modal {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.95) 0%, rgba(20, 20, 30, 0.98) 100%);
}

.lysh-panel {
    width: 90%;
    max-width: 420px;
    background: linear-gradient(180deg, rgba(25, 25, 35, 0.98) 0%, rgba(15, 15, 22, 0.99) 100%);
    border: 1px solid rgba(100, 100, 150, 0.3);
    border-radius: 20px;
    box-shadow: 
        0 0 60px rgba(80, 80, 200, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.lysh-header {
    padding: 30px 24px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(60, 60, 100, 0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(100, 100, 150, 0.2);
}

.lysh-logo {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    background: linear-gradient(135deg, #a0a0ff 0%, #6060ff 50%, #a0a0ff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(100, 100, 255, 0.5);
    animation: lyshLogoShine 3s ease-in-out infinite;
}

@keyframes lyshLogoShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.lysh-subtitle {
    font-size: 0.75rem;
    color: rgba(150, 150, 200, 0.7);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 8px;
}

.lysh-content {
    padding: 20px 24px;
}

.lysh-section {
    margin-bottom: 20px;
}

.lysh-section:last-child {
    margin-bottom: 0;
}

.lysh-section-title {
    font-size: 0.7rem;
    color: rgba(150, 150, 200, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.lysh-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(40, 40, 60, 0.4);
    border: 1px solid rgba(80, 80, 120, 0.3);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.lysh-item:last-child {
    margin-bottom: 0;
}

.lysh-item:hover:not(.disabled) {
    background: rgba(50, 50, 80, 0.5);
    border-color: rgba(100, 100, 150, 0.4);
}

.lysh-item.disabled {
    opacity: 0.4;
}

.lysh-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lysh-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(220, 220, 255, 0.9);
}

.lysh-item-desc {
    font-size: 0.7rem;
    color: rgba(150, 150, 200, 0.6);
}

.lysh-toggle {
    display: flex;
    gap: 4px;
    background: rgba(20, 20, 30, 0.6);
    padding: 4px;
    border-radius: 8px;
}

.lysh-toggle-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(150, 150, 200, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lysh-toggle-btn:hover {
    color: rgba(200, 200, 255, 0.8);
}

.lysh-toggle-btn.active {
    background: linear-gradient(135deg, #5050aa 0%, #4040aa 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(80, 80, 170, 0.4);
}

.lysh-footer {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(100, 100, 150, 0.2);
    background: rgba(15, 15, 22, 0.5);
}

.lysh-back-btn {
    padding: 12px 32px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(100, 100, 150, 0.4);
    border-radius: 10px;
    background: rgba(40, 40, 60, 0.5);
    color: rgba(200, 200, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lysh-back-btn:hover {
    background: rgba(60, 60, 100, 0.6);
    border-color: rgba(120, 120, 180, 0.5);
    transform: translateY(-1px);
}

.lysh-back-btn:active {
    transform: translateY(0);
}

.lysh-version {
    font-size: 0.65rem;
    color: rgba(100, 100, 150, 0.4);
    letter-spacing: 1px;
}

/* 棋盘震动选择器样式 */
.shake-selector .capsule-opt {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* ========================================= */
/* [Alpha 0.7.9.3] 棋子特效调试二级界面       */
/* Piece Effect Debug Panel                  */
/* ========================================= */

/* 长按金色灌满动画 - 简单稳定版 */
.skin-grid-item.long-press-ready {
    position: relative;
    overflow: hidden;
}

.skin-grid-item.long-press-ready::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #ffd700;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.skin-grid-item.long-pressing::after {
    /* 前200ms静默等待，后500ms快速灌满 */
    animation: goldFillUp 500ms linear 200ms forwards;
}

@keyframes goldFillUp {
    0% { height: 0%; }
    100% { height: 100%; }
}

/* 长按完成闪烁效果 */
.skin-grid-item.long-press-complete::after {
    height: 100%;
    background: #fff;
    opacity: 0.9;
    animation: goldFlash 150ms ease-out;
}

@keyframes goldFlash {
    0% { background: #fff; opacity: 1; }
    100% { background: #ffd700; opacity: 0.6; }
}

/* 棋子特效调试面板样式 */
.piece-effect-panel {
    max-width: 380px;
}

.piece-effect-subtitle {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 20px 0;
    text-align: center;
}

.piece-effect-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.piece-effect-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.piece-effect-item:hover {
    background: #fff;
    border-color: #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.piece-effect-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.piece-effect-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3436;
}

.piece-effect-desc {
    font-size: 0.7rem;
    color: #888;
}

.piece-effect-toggle {
    display: flex;
    gap: 4px;
    background: #e9ecef;
    padding: 3px;
    border-radius: 8px;
}

.effect-toggle-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
}

.effect-toggle-btn:hover {
    color: #555;
}

.effect-toggle-btn.active {
    background: #fff;
    color: #2d3436;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* [Alpha 0.7.9.3] 落子动画和自然棋子特效已拆分至 css/pieces.css */


/* ============================================
   联网对战 UI 样式
   ============================================ */

/* 联网弹窗基础样式 */
.online-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.online-modal.show {
    display: flex;
}

.online-panel {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border-radius: 16px;
    padding: 24px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.online-panel.small {
    min-width: 280px;
    max-width: 320px;
    padding: 20px;
}

/* 头部 */
.online-header {
    text-align: center;
    margin-bottom: 24px;
}

.online-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.online-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* 内容区 */
.online-content {
    margin-bottom: 20px;
}

.online-content.center {
    text-align: center;
}

.online-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 16px 0;
}

/* 按钮 */
.online-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.online-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.online-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
}

.online-btn.primary:hover {
    background: linear-gradient(135deg, #7b8ff0, #8a5db8);
}

.online-btn.danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: transparent;
}

.online-btn.small {
    width: auto;
    padding: 10px 20px;
    margin-bottom: 0;
}

.btn-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

/* 底部 */
.online-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.online-back-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.online-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* 输入框 */
.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.room-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 8px;
    font-family: monospace;
}

.room-input:focus {
    outline: none;
    border-color: #667eea;
}

.room-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 8px;
}

/* 房间号显示 */
.room-id-display {
    margin: 20px 0;
}

.room-id-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.room-id-value {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    color: #667eea;
    letter-spacing: 8px;
    font-family: monospace;
}

.copy-btn {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.5);
    border-radius: 6px;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: rgba(102, 126, 234, 0.3);
}

.waiting-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-top: 16px;
}

/* 等待动画 */
.waiting-spinner {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 猜拳界面 */
.rps-countdown {
    font-size: 3rem;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 20px;
}

.rps-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.rps-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rps-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.rps-btn.selected {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
}

.rps-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rps-emoji {
    font-size: 1rem;
    color: #fff;
}

.rps-status {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.rps-status.chosen {
    color: #4ade80;
}

.rps-choices {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.rps-result {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 8px;
}

.rps-result.win {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.rps-result.lose {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.rps-result.tie {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* 选边界面 */
.side-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.side-btn {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.side-btn:hover {
    transform: translateY(-4px);
}

.side-btn.black {
    border-color: #333;
}

.side-btn.black:hover {
    background: rgba(0, 0, 0, 0.3);
}

.side-btn.white {
    border-color: #ddd;
}

.side-btn.white:hover {
    background: rgba(255, 255, 255, 0.2);
}

.side-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
}

.side-btn.black .side-icon {
    background: radial-gradient(circle at 30% 30%, #555, #111);
}

.side-btn.white .side-icon {
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
}

.side-text {
    color: #fff;
    font-size: 0.9rem;
}

/* 游戏结果 */
.game-result {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 16px;
}

.game-result.win {
    color: #4ade80;
}

.game-result.lose {
    color: #f87171;
}

/* 断线警告 */
.disconnect-warning {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(248, 113, 113, 0.9);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 3000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.disconnect-warning.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.warning-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* LYSH 开发者选单项目箭头 */
.lysh-item-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
}

.lysh-item:not(.disabled):hover .lysh-item-arrow {
    color: rgba(255, 255, 255, 0.6);
}


/* ========================================= */
/* [Alpha 0.7.9.5] 国际象棋棋盘皮肤          */
/* Board Skin: Chess Classic                 */
/* 设计理念：经典国际象棋风格，黑白格子交替    */
/* ========================================= */

/* === 国际象棋棋盘主体 === */
/* 设计理念：
   - 15x15 落子点，14x14 = 196 个格子（由金色棋线围成）
   - 196 个格子黑白交替填充
   - 边缘区域（棋盘线外、边框内）是古典深棕色木纹
   - 最外侧边框是黄金
   - 星位用圆形红宝石（更醒目绚丽）
*/
.board.skin-chess {
    /* 古典深棕色木纹底色填充边缘区域 */
    background: 
        /* 木纹纹理 */
        repeating-linear-gradient(
            90deg,
            rgba(60, 40, 20, 0.1) 0px,
            rgba(60, 40, 20, 0.1) 2px,
            transparent 2px,
            transparent 8px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(80, 50, 25, 0.08) 0px,
            rgba(80, 50, 25, 0.08) 1px,
            transparent 1px,
            transparent 6px
        ),
        /* 深棕色木质渐变 */
        linear-gradient(135deg, 
            #5d4037 0%, 
            #4e342e 15%,
            #3e2723 30%,
            #4e342e 50%,
            #5d4037 70%,
            #4e342e 85%,
            #3e2723 100%
        );
    
    /* 边框：黄金质感边框 */
    border: 6px solid #8b6914;
    border-radius: 4px;
    
    /* 光影系统 */
    box-shadow: 
        /* 黄金外框 */
        0 0 0 2px #d4af37,
        0 0 0 4px #8b6914,
        /* 木质立体感 */
        inset 2px 2px 8px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(255, 255, 255, 0.05),
        /* 外部投影 */
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 5px 15px rgba(0, 0, 0, 0.2);
    
    position: relative;
}

/* 14x14 黑白格子背景层 */
.board.skin-chess::before {
    content: '';
    position: absolute;
    
    /* 起始位置 = padding + 半个cell */
    top: calc(10px + (100% - 20px) / 30);
    left: calc(10px + (100% - 20px) / 30);
    
    /* 尺寸 = 14 × cell = (100% - 20px) × 14 / 15 */
    width: calc((100% - 20px) * 14 / 15);
    height: calc((100% - 20px) * 14 / 15);
    
    /* 14x14 黑白格子图案 */
    background: 
        repeating-conic-gradient(
            from 0deg,
            #f8f6f0 0deg 90deg,
            #3a3a42 90deg 180deg,
            #f8f6f0 180deg 270deg,
            #3a3a42 270deg 360deg
        );
    background-size: calc(100% / 7) calc(100% / 7);
    
    pointer-events: none;
    z-index: 0;
    display: block !important;
}

/* 清除 cell 的默认背景 */
.board.skin-chess .cell {
    background: transparent !important;
}

.board.skin-chess .cell.chess-white,
.board.skin-chess .cell.chess-black {
    background: transparent !important;
}

/* 国际象棋棋盘 - 金色棋线 */
.board.skin-chess .cell::before {
    background: linear-gradient(90deg, #8b6914 0%, #d4af37 50%, #8b6914 100%);
    box-shadow: 0 1px 0 rgba(255, 215, 0, 0.3);
    height: 2px;
    z-index: 2;
}

.board.skin-chess .cell::after {
    background: linear-gradient(180deg, #8b6914 0%, #d4af37 50%, #8b6914 100%);
    box-shadow: 1px 0 0 rgba(255, 215, 0, 0.3);
    width: 2px;
    z-index: 2;
}

/* 国际象棋棋盘 - 圆形红宝石星位（更醒目绚丽） */
.board.skin-chess .cell[data-star="true"] .dot {
    width: 26%;
    height: 26%;
    border-radius: 50%;
    
    background: 
        /* 顶部高光 - 宝石反射 */
        radial-gradient(ellipse 50% 30% at 35% 25%, 
            rgba(255, 255, 255, 0.95) 0%, 
            rgba(255, 255, 255, 0.5) 30%,
            transparent 60%
        ),
        /* 次级高光 */
        radial-gradient(ellipse 30% 20% at 65% 70%, 
            rgba(255, 200, 200, 0.5) 0%, 
            transparent 50%
        ),
        /* 红宝石主体 - 更鲜艳的玫红色 */
        radial-gradient(circle at 45% 45%, 
            #ff1744 0%, 
            #f50057 25%,
            #c51162 50%,
            #880e4f 75%,
            #560027 100%
        );
    
    box-shadow: 
        /* 强烈的红色外发光 - 三层递进 */
        0 0 10px 2px rgba(245, 0, 87, 0.8),
        0 0 20px 5px rgba(245, 0, 87, 0.5),
        0 0 35px 8px rgba(245, 0, 87, 0.3),
        /* 内部立体感 */
        inset 2px 2px 4px rgba(255, 255, 255, 0.3),
        inset -2px -2px 6px rgba(86, 0, 39, 0.6),
        /* 投影 */
        0 3px 8px rgba(0, 0, 0, 0.5);
    
    /* 闪烁动画 */
    animation: rubyGlow 2.5s ease-in-out infinite;
    z-index: 3;
}

/* 红宝石闪烁动画 - 更明显的脉动 */
@keyframes rubyGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px 2px rgba(245, 0, 87, 0.8),
            0 0 20px 5px rgba(245, 0, 87, 0.5),
            0 0 35px 8px rgba(245, 0, 87, 0.3),
            inset 2px 2px 4px rgba(255, 255, 255, 0.3),
            inset -2px -2px 6px rgba(86, 0, 39, 0.6),
            0 3px 8px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 15px 4px rgba(245, 0, 87, 1),
            0 0 30px 8px rgba(245, 0, 87, 0.6),
            0 0 50px 12px rgba(245, 0, 87, 0.4),
            inset 2px 2px 5px rgba(255, 255, 255, 0.5),
            inset -2px -2px 6px rgba(86, 0, 39, 0.5),
            0 3px 8px rgba(0, 0, 0, 0.5);
        transform: scale(1.05);
    }
}

/* === [Alpha 0.7.9.5] 国际象棋棋盘预览样式 === */
.chess-preview {
    /* 深棕色木纹边框 */
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 50%, #4e342e 100%);
    border: 4px solid #8b6914;
    border-radius: 4px;
    box-shadow: 
        0 0 0 1px #d4af37,
        inset 1px 1px 3px rgba(0, 0, 0, 0.3),
        0 3px 6px rgba(0, 0, 0, 0.25);
}
/* 黑白格子内盘 - 真正的棋盘格（6x3） */
.chess-preview::before {
    content: ''; position: absolute; inset: 5px;
    border-radius: 2px;
    /* 黑白交替格子 */
    background: 
        linear-gradient(90deg, 
            #f8f6f0 0%, #f8f6f0 16.66%, 
            #3a3a42 16.66%, #3a3a42 33.33%,
            #f8f6f0 33.33%, #f8f6f0 50%,
            #3a3a42 50%, #3a3a42 66.66%,
            #f8f6f0 66.66%, #f8f6f0 83.33%,
            #3a3a42 83.33%, #3a3a42 100%
        ),
        linear-gradient(0deg,
            #3a3a42 0%, #3a3a42 33.33%,
            #f8f6f0 33.33%, #f8f6f0 66.66%,
            #3a3a42 66.66%, #3a3a42 100%
        );
    background-blend-mode: difference;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5);
}
/* 红宝石星位 */
.chess-preview::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
    background: 
        radial-gradient(ellipse 50% 30% at 35% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 45% 45%, #ff1744 0%, #f50057 35%, #c51162 65%, #880e4f 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 6px 2px rgba(245, 0, 87, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.4);
}

/* === 国际象棋棋盘移动端适配 === */
@media (max-width: 600px) {
    .board.skin-chess {
        border-width: 4px;
        box-shadow: 
            0 0 0 1px #d4af37,
            0 0 0 2px #8b6914,
            inset 1px 1px 4px rgba(0, 0, 0, 0.3),
            0 8px 20px rgba(0, 0, 0, 0.25);
    }
    
    /* 移动端 padding = 4px */
    .board.skin-chess::before {
        top: calc(4px + (100% - 8px) / 30);
        left: calc(4px + (100% - 8px) / 30);
        width: calc((100% - 8px) * 14 / 15);
        height: calc((100% - 8px) * 14 / 15);
        background-size: calc(100% / 7) calc(100% / 7);
    }
    
    .board.skin-chess .cell[data-star="true"] .dot {
        width: 22%;
        height: 22%;
        animation: none;
        box-shadow: 
            0 0 8px 2px rgba(245, 0, 87, 0.6),
            inset 1px 1px 2px rgba(255, 255, 255, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.4);
    }
}

/* [Voodoo Skill] 激活阶段样式已拆分至 css/skills/voodoo.css */

/* ============================================
   公共大厅 UI 样式（亮色主题，白色玻璃面板+深色文字，参考 playok 简约美观设计）
   ============================================ */

/* 大厅面板 */
.lobby-panel {
    max-width: 520px;
    width: 92vw;
    padding: 24px 20px 20px;
    text-align: left;
}

.lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.lobby-header h1 {
    margin: 0;
    font-size: 1.5rem;
    text-align: left;
}

.lobby-create-btn {
    padding: 8px 18px;
    background: #2d3436;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(45, 52, 54, 0.25);
}

.lobby-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(45, 52, 54, 0.35);
}

/* 房间列表 */
.lobby-room-list {
    min-height: 180px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    padding: 6px;
}

.lobby-room-list::-webkit-scrollbar {
    width: 4px;
}

.lobby-room-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.lobby-empty {
    text-align: center;
    color: #999;
    padding: 50px 20px;
    font-size: 0.9rem;
}

/* 房间卡片 */
.lobby-room-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    margin-bottom: 5px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lobby-room-card:hover {
    border-color: rgba(45, 52, 54, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lobby-room-info {
    flex: 1;
    min-width: 0;
}

.lobby-room-name {
    color: #2d3436;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-room-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.lobby-tag {
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #eef1f5;
    color: #636e72;
}

.lobby-tag.skill {
    background: #e8f5e9;
    color: #2e7d32;
}

.lobby-tag.lock {
    background: #fff3e0;
    color: #e65100;
}

.lobby-room-players {
    color: #636e72;
    font-size: 0.8rem;
    white-space: nowrap;
    font-weight: 500;
    padding: 0 6px;
}

/* 加入按钮 */
.lobby-join-btn {
    padding: 5px 14px;
    background: #2d3436;
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lobby-join-btn:hover:not(:disabled) {
    background: #444;
}

.lobby-join-btn.full,
.lobby-join-btn:disabled {
    background: #ddd;
    color: #999;
    cursor: not-allowed;
}

/* 底部操作 */
.lobby-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.lobby-footer .btn {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 10px 28px;
    font-size: 0.95rem;
}

/* ============================================
   创建房间弹窗内的设置组（亮色主题，白色玻璃面板+深色文字，参考 playok 简约美观设计）
   ============================================ */
.lobby-setting-group {
    margin-bottom: 16px;
}

.lobby-setting-label {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* 胶囊选择器 */
.lobby-capsule-selector {
    display: flex;
    gap: 8px;
}

.lobby-capsule {
    flex: 1;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.lobby-capsule:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.lobby-capsule.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    color: #2d3436;
    font-weight: 700;
}

/* 技能选择网格 */
.lobby-skill-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}

.lobby-skill-btn {
    padding: 7px 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.lobby-skill-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lobby-skill-btn.active {
    background: rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.5);
    color: #a5d6a7;
    font-weight: 600;
}

.lobby-skill-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-top: 4px;
}

/* 密码设置 */
.lobby-password-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.lobby-password-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.lobby-password-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 10px;
    font-family: monospace;
    box-sizing: border-box;
}

.lobby-password-input:focus {
    outline: none;
    border-color: #667eea;
}

.lobby-password-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
    font-size: 0.85rem;
}

/* 开关样式 */
.lobby-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
}

.lobby-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lobby-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    transition: 0.3s;
}

.lobby-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.lobby-toggle input:checked + .lobby-toggle-slider {
    background: #4caf50;
}

.lobby-toggle input:checked + .lobby-toggle-slider::before {
    transform: translateX(20px);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .lobby-panel {
        padding: 16px 14px;
    }
    
    .lobby-skill-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }
    
    .lobby-skill-btn {
        padding: 5px 2px;
        font-size: 0.7rem;
    }
    
    .lobby-room-card {
        padding: 8px 10px;
    }
    
    .lobby-footer .btn {
        padding: 8px 20px;
        font-size: 0.85rem;
    }
}

/* ============================================
   虚拟小键盘组件（用于房间号/密码输入）
   ============================================ */

/* 小键盘专用面板宽度约束 */
.numpad-panel {
    min-width: 260px !important;
    max-width: 300px !important;
    padding: 20px 16px !important;
}

/* 可见文本输入框（键盘+小键盘双模式） */
.numpad-text-input {
    width: 100%;
    max-width: 240px;
    padding: 12px 16px;
    margin: 0 auto 16px;
    display: block;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: monospace;
    text-align: center;
    letter-spacing: 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.numpad-text-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.numpad-text-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

/* 小键盘网格 3x4 */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 240px;
    margin: 0 auto;
}

.numpad-key {
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.numpad-key:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.95);
}

/* 删除键 */
.numpad-del {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    font-size: 1.3rem;
}

.numpad-del:active {
    background: rgba(231, 76, 60, 0.4);
}

/* 确认键 */
.numpad-confirm {
    background: rgba(46, 204, 113, 0.2);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    font-size: 1.3rem;
}

.numpad-confirm:active {
    background: rgba(46, 204, 113, 0.4);
}

/* ============================================
   等待房间 - PlayOK 风格
   ============================================ */

.waiting-panel {
    min-width: 340px !important;
    max-width: 400px !important;
    padding: 0 !important;
    overflow: hidden;
}

.waiting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.waiting-header .online-title {
    font-size: 1.15rem;
}

.waiting-room-tag {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
    padding: 4px 10px;
    border-radius: 20px;
    font-family: monospace;
}

.waiting-room-tag span {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* 双方玩家槽位 */
.waiting-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 20px;
}

.player-slot {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
}

.player-host {
    border-color: rgba(100,140,255,0.3);
    background: rgba(100,140,255,0.06);
}

.player-slot-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
    color: #648cff;
}

.guest-icon {
    color: rgba(255,255,255,0.25);
    font-size: 1.5rem;
    font-weight: 700;
}

.player-slot-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
}

.player-guest .player-slot-name {
    color: rgba(255,255,255,0.4);
    font-weight: 400;
}

.player-slot-status {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}

.player-slot-status.ready {
    color: #4ade80;
}

.player-slot-status.joined {
    color: #648cff;
}

.waiting-vs {
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    letter-spacing: 2px;
}

/* 等待脉冲动画 */
.waiting-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    animation: waitPulse 1.5s ease-in-out infinite;
}

@keyframes waitPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); background: #648cff; }
}

/* 对手加入后的样式 */
.player-guest.joined {
    border-color: rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.06);
}

.player-guest.joined .guest-icon {
    color: #4ade80;
}

.player-guest.joined .player-slot-name {
    color: #fff;
    font-weight: 600;
}

/* 游戏信息 */
.waiting-info {
    padding: 0 20px 12px;
}

.waiting-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.info-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
}

.info-value {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}

/* 分享按钮 */
.waiting-share {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
}

.share-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.share-btn.primary {
    background: rgba(100,140,255,0.15);
    border-color: rgba(100,140,255,0.3);
    color: #648cff;
}

.share-btn.primary:hover {
    background: rgba(100,140,255,0.25);
}

/* 底部 */
.waiting-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.waiting-footer .online-back-btn {
    width: 100%;
}