/* ============================================
   霓虹扫雷 - 样式表 (排行榜无滚动条)
   ============================================ */

:root {
    --bg-deep: #06060f;
    --bg-panel: #0d0d1f;
    --cell-size: 34px;
    --cell-gap: 3px;
    --brick-top: #2a2d4a;
    --brick-mid: #1c1f38;
    --brick-bottom: #14172b;
    --brick-highlight: #3d4270;
    --brick-glow: rgba(90, 140, 255, 0.35);
    --brick-glow-strong: rgba(100, 160, 255, 0.7);
    --revealed-bg: #0a0d1a;
    --revealed-border: #1a1d35;
    --neon-blue: #4da8ff;
    --neon-cyan: #00e5ff;
    --neon-green: #39ff8c;
    --neon-red: #ff3d5c;
    --neon-orange: #ff8a50;
    --neon-yellow: #ffe040;
    --neon-purple: #b388ff;
    --neon-pink: #ff6ec7;
    --text-primary: #e0e0f0;
    --text-secondary: #8890b8;
    --panel-border: rgba(70, 100, 200, 0.4);
    --panel-glow: rgba(60, 100, 220, 0.25);
    --font-mono: 'Courier New', 'Source Code Pro', 'Consolas', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%; overflow-x: hidden;
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg-deep); color: var(--text-primary);
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent; cursor: default;
}

body {
    display: flex; justify-content: center; align-items: flex-start;
    min-height: 100vh; padding: 10px; position: relative;
}

/* 星空 */
#starfieldCanvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events: none; }

/* 浮动粒子 */
.floating-particles { position: fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events: none; overflow: hidden; }
.floating-particle { position: absolute; border-radius: 50%; pointer-events: none; animation: floatUp linear forwards; box-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
@keyframes floatUp {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
    30% { opacity: 0.9; }
    100% { transform: translateY(-120vh) translateX(40px) scale(0.1); opacity: 0; }
}

/* 主布局：游戏 + 排行榜 */
.main-layout {
    position: relative; z-index: 10;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: 20px; max-width: 1300px; width: 100%;
}

.game-wrapper {
    flex: 0 1 auto;
    background: var(--bg-panel); border: 2px solid var(--panel-border);
    border-radius: 20px; padding: 20px 24px 24px;
    box-shadow: 0 0 40px var(--panel-glow), 0 0 80px rgba(30,50,120,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: containerEntry 0.6s cubic-bezier(0.22,0.61,0.36,1) forwards;
    position: relative;
}
@keyframes containerEntry {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.game-header { text-align: center; position: relative; width: 100%; }
.game-title { font-size: 2rem; font-weight: 900; letter-spacing: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 2px; }
.title-text {
    background: linear-gradient(135deg, #4da8ff, #00e5ff, #b388ff, #4da8ff);
    background-size: 300% 300%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: titleShimmer 4s ease-in-out infinite;
}
@keyframes titleShimmer {
    0%,100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}
.title-neon { font-size: 1.6rem; animation: neonPulse 1.8s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(0,229,255,0.7)); }
@keyframes neonPulse {
    0%,100% { filter: drop-shadow(0 0 8px rgba(0,229,255,0.7)); }
    50% { filter: drop-shadow(0 0 20px rgba(0,229,255,1)); }
}
.subtitle { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 6px; color: var(--text-secondary); text-transform: uppercase; }

.home-btn {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: rgba(20,30,55,0.8); border: 1.5px solid rgba(80,110,180,0.5);
    border-radius: 10px; padding: 6px 14px; color: #c0d0f0; text-decoration: none;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 1px;
    transition: all 0.3s; display: flex; align-items: center; gap: 4px;
}
.home-btn:hover { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0,200,240,0.4); transform: translateY(-3px) translateY(-50%); color: #fff; }

/* 版权标签 */
.copyright {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-top: 5px;
    border-top: 1px solid rgba(70,100,200,0.3);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
}
.copyright a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 600;
}
.copyright a:hover {
    text-shadow: 0 0 10px rgba(0,229,255,0.7);
    color: #fff;
}

.difficulty-selector { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.diff-btn {
    background: rgba(20,25,50,0.8); border: 1.5px solid rgba(60,80,150,0.4);
    border-radius: 12px; padding: 10px 16px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: all 0.3s; color: var(--text-secondary); font-family: inherit;
    min-width: 90px; position: relative; overflow: hidden;
}
.diff-btn::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.3s;
}
.diff-btn:hover::before { opacity: 1; }
.diff-btn:hover { border-color: rgba(100,150,220,0.7); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(40,70,160,0.35); color: #d0d8f0; }
.diff-btn.active { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0,200,240,0.4), 0 4px 16px rgba(0,150,200,0.3); color: #fff; background: rgba(15,30,60,0.9); }
.diff-btn.active .diff-icon { animation: bounceIcon 0.5s ease-out; }
@keyframes bounceIcon { 0%,100%{transform:scale(1)} 40%{transform:scale(1.3)} 70%{transform:scale(0.9)} }
.diff-icon { font-size: 1.5rem; transition: transform 0.3s; }
.diff-label { font-weight: 700; font-size: 0.9rem; letter-spacing: 2px; }
.diff-info { font-size: 0.65rem; font-family: var(--font-mono); opacity: 0.7; letter-spacing: 1px; }

.info-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.info-item { display: flex; align-items: center; gap: 8px; background: rgba(15,20,40,0.7); border: 1px solid rgba(60,80,150,0.35); border-radius: 10px; padding: 8px 16px; }
.info-icon { font-size: 1.2rem; }
.info-value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--neon-cyan); min-width: 40px; text-align: center; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,229,255,0.5); }

.reset-btn {
    background: rgba(20,30,55,0.8); border: 1.5px solid rgba(80,110,180,0.5);
    border-radius: 50%; width: 48px; height: 48px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.3s; color: #c0d0f0; font-family: inherit; font-size: 0.6rem; gap: 1px;
}
.reset-btn:hover { border-color: var(--neon-cyan); box-shadow: 0 0 25px rgba(0,200,240,0.5); transform: rotate(180deg); background: rgba(25,40,70,0.9); }
.reset-btn:active { transform: rotate(180deg) scale(0.9); }
.reset-icon { font-size: 1.3rem; transition: transform 0.3s; }
.reset-text { font-size: 0.5rem; letter-spacing: 1px; }
.reset-btn.shake { animation: resetShake 0.5s ease-out; }
@keyframes resetShake {
    0%,100%{transform:rotate(0)} 20%{transform:rotate(-30deg)} 40%{transform:rotate(25deg)} 60%{transform:rotate(-15deg)} 80%{transform:rotate(8deg)}
}

.game-panel-container {
    border: 2px solid rgba(70,100,180,0.45); border-radius: 14px; padding: 8px;
    background: rgba(5,8,22,0.7); box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 30px rgba(30,60,140,0.2);
    overflow: auto; max-width: 95vw; max-height: 65vh;
    scrollbar-width: thin; scrollbar-color: rgba(60,90,160,0.5) transparent;
}
.game-panel-container::-webkit-scrollbar { width: 6px; height: 6px; }
.game-panel-container::-webkit-scrollbar-track { background: transparent; }
.game-panel-container::-webkit-scrollbar-thumb { background: rgba(60,90,160,0.5); border-radius: 3px; }

.game-panel { display: grid; gap: var(--cell-gap); }

.cell {
    width: var(--cell-size); height: var(--cell-size); border-radius: 7px;
    cursor: pointer; position: relative; transition: transform 0.08s, box-shadow 0.15s;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-family: var(--font-mono); font-size: calc(var(--cell-size) * 0.5);
}
.cell.unrevealed {
    background: linear-gradient(155deg, var(--brick-top) 0%, var(--brick-mid) 35%, var(--brick-bottom) 70%, var(--brick-mid) 100%);
    border: 1.5px solid rgba(80,100,170,0.5);
    box-shadow: 2px 3px 6px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1.5px 0 rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 8px var(--brick-glow);
    animation: brickBreathe 3.5s ease-in-out infinite;
}
@keyframes brickBreathe {
    0%,100% { box-shadow: 2px 3px 6px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1.5px 0 rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 8px var(--brick-glow); }
    35% { box-shadow: 2px 3px 6px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1.5px 0 rgba(255,255,255,0.12), inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 16px var(--brick-glow-strong); }
    70% { box-shadow: 2px 3px 6px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1.5px 0 rgba(255,255,255,0.05), inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 5px rgba(50,100,200,0.15); }
}
.cell.unrevealed::after {
    content: ''; position: absolute; width: 45%; height: 45%; top: 27%; left: 27%;
    background: radial-gradient(circle, rgba(130,180,255,0.18) 0%, rgba(80,140,240,0.06) 40%, transparent 70%);
    border-radius: 50%; pointer-events: none; animation: energyShift 4s ease-in-out infinite;
}
@keyframes energyShift {
    0%,100%{transform:translate(0,0) scale(1);opacity:0.7} 25%{transform:translate(2px,-1px) scale(1.1);opacity:1} 50%{transform:translate(-1px,2px) scale(0.9);opacity:0.5} 75%{transform:translate(-2px,-2px) scale(1.05);opacity:0.8}
}
.cell.unrevealed:hover {
    transform: translateY(-2px);
    box-shadow: 2px 5px 10px rgba(0,0,0,0.6), -1px -1px 2px rgba(255,255,255,0.05), inset 0 1.5px 0 rgba(255,255,255,0.14), inset 0 -2px 3px rgba(0,0,0,0.3), 0 0 22px var(--brick-glow-strong), 0 0 40px rgba(80,140,255,0.4) !important;
    border-color: rgba(130,170,240,0.8); z-index: 2;
}
.cell.unrevealed:active { transform: translateY(1px) scale(0.94); box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.03), 0 0 12px var(--brick-glow) !important; }

.cell.revealed { background: var(--revealed-bg); border: 1px solid var(--revealed-border); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); cursor: default; animation: revealPop 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.cell.revealed::after { display: none; }
@keyframes revealPop { 0%{transform:scale(0.85);opacity:0.5} 100%{transform:scale(1);opacity:1} }

.cell.num-1 { color: var(--neon-blue); text-shadow: 0 0 8px rgba(77,168,255,0.7); }
.cell.num-2 { color: var(--neon-green); text-shadow: 0 0 8px rgba(57,255,140,0.7); }
.cell.num-3 { color: var(--neon-red); text-shadow: 0 0 8px rgba(255,61,92,0.7); }
.cell.num-4 { color: var(--neon-purple); text-shadow: 0 0 8px rgba(179,136,255,0.7); }
.cell.num-5 { color: var(--neon-orange); text-shadow: 0 0 8px rgba(255,138,80,0.7); }
.cell.num-6 { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.cell.num-7 { color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255,224,64,0.7); }
.cell.num-8 { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255,110,199,0.7); }

.cell.flagged { background: linear-gradient(155deg,#2a2840 0%,#1f1d35 35%,#16142a 70%,#1f1d35 100%); border: 1.5px solid rgba(255,200,50,0.6); box-shadow: 2px 3px 6px rgba(0,0,0,0.5), 0 0 14px rgba(255,180,30,0.45), inset 0 1px 0 rgba(255,255,200,0.08); animation: flagGlow 1.8s infinite; }
@keyframes flagGlow { 0%,100%{box-shadow: 2px 3px 6px rgba(0,0,0,0.5), 0 0 14px rgba(255,180,30,0.45)} 50%{box-shadow: 2px 3px 6px rgba(0,0,0,0.5), 0 0 26px rgba(255,200,50,0.75)} }
.cell.flagged::after { display: none; }
.flag-symbol { font-size: calc(var(--cell-size) * 0.55); pointer-events: none; animation: flagWave 0.3s ease-out; filter: drop-shadow(0 0 6px rgba(255,200,40,0.8)); }
@keyframes flagWave { 0%{transform:scale(0) rotate(-30deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }

.cell.mine-revealed { background: radial-gradient(circle,#4a1018 0%,#1a0508 80%); border: 1.5px solid rgba(255,50,70,0.7); box-shadow: 0 0 20px rgba(255,30,50,0.6), inset 0 0 15px rgba(255,0,30,0.3); animation: minePulse 0.7s infinite; }
@keyframes minePulse { 0%,100%{box-shadow:0 0 20px rgba(255,30,50,0.6), inset 0 0 15px rgba(255,0,30,0.3)} 50%{box-shadow:0 0 40px rgba(255,30,50,1), 0 0 60px rgba(255,60,80,0.7), inset 0 0 20px rgba(255,0,30,0.5)} }
.cell.mine-revealed::after { display: none; }
.mine-symbol { font-size: calc(var(--cell-size) * 0.5); pointer-events: none; animation: mineAppear 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes mineAppear { 0%{transform:scale(0) rotate(-60deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }

.cell.wrong-flag { background: rgba(40,10,15,0.9); border: 1.5px solid rgba(255,100,100,0.6); box-shadow: 0 0 12px rgba(255,60,60,0.4); }
.cell.correct-flag { border: 1.5px solid rgba(57,255,140,0.6); box-shadow: 0 0 14px rgba(57,255,140,0.35); }

.status-message {
    font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 3px;
    color: var(--text-secondary); min-height: 20px; text-align: center;
    transition: all 0.3s; padding: 6px 12px; border-radius: 8px;
}
.status-message.fail { color: #ff5e7e; background: rgba(255,30,50,0.15); border: 1px solid rgba(255,50,70,0.4); text-shadow: 0 0 10px rgba(255,50,70,0.6); animation: statusFlash 0.8s; }
.status-message.win { color: #ffe040; background: rgba(255,224,64,0.15); border: 1px solid rgba(255,224,64,0.4); text-shadow: 0 0 10px rgba(255,224,64,0.7); animation: statusFlash 0.8s; }
@keyframes statusFlash { 0%{opacity:0;transform:scale(0.9)} 50%{opacity:1;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }

/* 排行榜面板 - 无滚动条，动态计算显示数量 */
.leaderboard-panel {
    flex: 0 0 240px;
    background: var(--bg-panel); 
    border: 2px solid var(--panel-border);
    border-radius: 16px; 
    padding: 16px;
    box-shadow: 0 0 30px var(--panel-glow), 0 0 60px rgba(30,50,120,0.15);
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: stretch;
    max-height: 100%;
    overflow: hidden; /* 禁止滚动条 */
}
.leaderboard-header { 
    text-align: center; 
    margin-bottom: 8px; 
    flex-shrink: 0;
}
.leaderboard-title { 
    font-size: 1.2rem; 
    font-weight: 800; 
    letter-spacing: 3px; 
    color: var(--neon-cyan); 
    margin-bottom: 4px; 
}
.leaderboard-difficulty {
    font-family: var(--font-mono); 
    font-size: 0.75rem; 
    letter-spacing: 2px;
    color: var(--text-secondary); 
    background: rgba(15,20,40,0.7);
    padding: 4px 12px; 
    border-radius: 20px; 
    display: inline-block;
}
.leaderboard-list { 
    display: flex; 
    flex-direction: column; 
    gap: 4px;
    flex: 1;
    overflow: hidden; /* 禁止滚动条 */
    justify-content: flex-start;
}
.leaderboard-item {
    display: flex; 
    align-items: center; 
    gap: 6px;
    padding: 4px 8px; 
    border-radius: 6px;
    background: rgba(15,20,40,0.5); 
    border: 1px solid rgba(60,80,150,0.2);
    font-family: var(--font-mono); 
    font-size: 0.75rem;
    flex-shrink: 0;
    height: 30px; /* 固定每行高度 */
}
.leaderboard-rank {
    font-weight: 900; 
    font-size: 0.85rem; 
    min-width: 20px; 
    text-align: center;
    color: var(--neon-cyan); 
    text-shadow: 0 0 8px rgba(0,229,255,0.5);
}
.leaderboard-rank.gold { color: #ffd700; text-shadow: 0 0 10px gold; }
.leaderboard-rank.silver { color: #c0c0c0; text-shadow: 0 0 8px silver; }
.leaderboard-rank.bronze { color: #cd7f32; text-shadow: 0 0 8px #cd7f32; }
.leaderboard-name { 
    flex: 1; 
    color: var(--text-primary); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    font-size: 0.7rem;
}
.leaderboard-time { 
    color: var(--neon-green); 
    font-weight: 700; 
    flex-shrink: 0;
    font-size: 0.7rem;
}
.leaderboard-empty { 
    text-align: center; 
    color: var(--text-secondary); 
    font-size: 0.8rem; 
    padding: 20px 0; 
}

/* 音乐控制 */
.music-controls { position: fixed; bottom: 20px; right: 20px; z-index: 50; display: flex; gap: 10px; }
.music-toggle, .music-next {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(15,20,40,0.8); border: 1.5px solid rgba(70,100,170,0.5);
    cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.5); color: #c0d0f0;
}
.music-toggle:hover, .music-next:hover { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0,200,240,0.4); }
.music-toggle.muted #musicIcon { opacity: 0.5; }

.game-panel-container.shake { animation: panelShake 0.5s ease-out; }
@keyframes panelShake {
    0%,100%{transform:translateX(0)} 10%{transform:translateX(-8px)} 20%{transform:translateX(8px)} 30%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 50%{transform:translateX(-4px)} 60%{transform:translateX(4px)} 70%{transform:translateX(-2px)} 80%{transform:translateX(2px)}
}

/* 响应式 */
@media (max-width: 1000px) {
    .main-layout { flex-direction: column; align-items: center; }
    .leaderboard-panel { 
        flex: 0 0 auto; 
        width: 100%; 
        max-width: 500px; 
        max-height: 200px;
        align-self: auto;
    }
}
@media (max-width: 768px) {
    :root { --cell-size: 28px; --cell-gap: 2px; }
    .game-wrapper { padding: 12px 8px 16px; border-radius: 14px; gap: 10px; }
    .game-title { font-size: 1.3rem; letter-spacing: 3px; gap: 5px; }
    .title-neon { font-size: 1.1rem; }
    .subtitle { font-size: 0.6rem; letter-spacing: 3px; }
    .diff-btn { padding: 7px 10px; min-width: 65px; border-radius: 8px; }
    .diff-label { font-size: 0.7rem; } .diff-info { font-size: 0.55rem; } .diff-icon { font-size: 1.1rem; }
    .info-bar { gap: 10px; } .info-item { padding: 6px 10px; border-radius: 7px; }
    .info-value { font-size: 1rem; min-width: 30px; }
    .reset-btn { width: 38px; height: 38px; } .reset-icon { font-size: 1rem; }
    .game-panel-container { padding: 4px; border-radius: 8px; max-height: 50vh; }
    .cell { border-radius: 4px; } .cell.unrevealed { border-radius: 4px; }
    .home-btn { padding: 4px 10px; font-size: 0.7rem; }
    .leaderboard-panel { max-width: 100%; }
    .leaderboard-item { height: 26px; padding: 3px 6px; }
}
@media (max-width: 480px) {
    :root { --cell-size: 22px; --cell-gap: 2px; }
    .game-wrapper { padding: 8px 4px 10px; border-radius: 10px; gap: 6px; }
    .game-title { font-size: 1rem; letter-spacing: 2px; } .title-neon { font-size: 0.8rem; }
    .subtitle { font-size: 0.5rem; letter-spacing: 2px; }
    .difficulty-selector { gap: 4px; } .diff-btn { padding: 5px 7px; min-width: 50px; border-radius: 6px; }
    .diff-label { font-size: 0.6rem; } .diff-info { font-size: 0.48rem; } .diff-icon { font-size: 0.9rem; }
    .cell { border-radius: 3px; font-size: calc(var(--cell-size) * 0.45); }
    .mine-symbol { font-size: calc(var(--cell-size) * 0.42); }
    .flag-symbol { font-size: calc(var(--cell-size) * 0.45); }
    .music-controls { bottom: 10px; right: 10px; gap: 6px; }
    .music-toggle, .music-next { width: 34px; height: 34px; font-size: 1rem; }
    .leaderboard-item { height: 22px; padding: 2px 4px; font-size: 0.65rem; }
}