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

html, body {
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at top, #24385c 0%, #10182d 34%, #070b16 68%, #03050a 100%);
    overflow: hidden;
    font-family: 'Courier New', monospace;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    position: relative;
    color: #edf4ff;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: 0;
    background:
        radial-gradient(circle at 50% 14%, rgba(114, 164, 255, 0.22), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(255, 118, 54, 0.16), transparent 24%),
        radial-gradient(circle at 85% 78%, rgba(255, 194, 78, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 24%, rgba(0,0,0,0.22) 100%);
}

body::after {
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 80px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 120px);
    opacity: 0.4;
    mix-blend-mode: screen;
}

#gameContainer {
    width: 100%; height: 100%;
    position: fixed;
    top: 0; left: 0;
}
#gameContainer canvas {
    display: block;
    width: 100%; height: 100%;
}

/* Overlay (Start / Game Over) */
#overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(circle at 50% 22%, rgba(120, 165, 255, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(4, 8, 18, 0.48) 0%, rgba(3, 6, 14, 0.74) 45%, rgba(2, 4, 10, 0.92) 100%);
    z-index: 10;
    transition: opacity 0.3s;
    overflow: hidden;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
#overlay::before,
#overlay::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
#overlay::before {
    inset: 0;
    background:
        radial-gradient(circle at 50% 76%, rgba(255, 166, 69, 0.15), transparent 32%),
        linear-gradient(180deg, transparent 0%, rgba(10, 18, 40, 0.18) 55%, rgba(14, 10, 8, 0.45) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 110px);
    opacity: 0.9;
}
/* Central glass card removed — elements now float directly on the atmospheric
   background for a more open, cinematic feel. The ::before atmospheric layer
   above is preserved. */
#overlay > * {
    position: relative;
    z-index: 1;
}
#overlay h1 {
    font-size: min(72px, 12vw);
    color: #ffd36b;
    text-shadow:
        0 3px 0 rgba(92, 52, 12, 0.95),
        0 0 32px rgba(255, 196, 95, 0.34),
        0 0 80px rgba(124, 169, 255, 0.12);
    margin-bottom: 10px;
    letter-spacing: min(9px, 1.2vw);
    text-align: center;
    padding: 0 10px;
    line-height: 0.95;
}
#overlay h2 {
    font-size: min(20px, 4vw);
    color: rgba(219, 230, 255, 0.74);
    margin-bottom: min(34px, 5vh);
    font-weight: normal;
    letter-spacing: min(8px, 1vw);
    text-transform: uppercase;
}
#overlay .btn {
    padding: min(16px, 3.5vw) min(28px, 6vw);
    font-size: min(22px, 4.5vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: linear-gradient(180deg, #ffdc84, #e59e38);
    color: #231003;
    border: 2px solid rgba(255, 223, 140, 0.9);
    cursor: pointer;
    letter-spacing: 2px;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, filter 0.15s;
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.4);
}
#overlay .btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 16px 34px rgba(0,0,0,0.42),
        0 0 18px rgba(255, 198, 96, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.45);
}
#overlay .btn:active { transform: scale(0.95); }
/* Primary start button — large and prominent, with crosshair icon */
#overlay .btn-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: min(22px, 4.5vw) min(60px, 13vw);
    font-size: min(30px, 6vw);
    letter-spacing: 4px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #ffe59b, #ffbf4e 48%, #e08f22 100%);
    box-shadow:
        0 18px 36px rgba(0,0,0,0.38),
        0 0 24px rgba(255, 188, 63, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.45);
}
#overlay .btn-start-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}
#overlay .btn-start:hover .btn-start-icon {
    transform: rotate(45deg) scale(1.08);
}
#overlay .btn-start-label {
    line-height: 1;
}
#scoreDisplay { color: #f0c040; font-size: min(28px, 5vw); margin: 16px 0 8px; }
#finalScore { color: #fff; font-size: min(56px, 10vw); margin: 8px 0 20px; font-weight: bold; text-shadow: 0 0 15px rgba(255,255,255,0.3); }

/* Language toggle button */
#langToggleBtn {
    position: fixed;
    bottom: 10px; left: 10px;
    z-index: 6000;
    width: 40px; height: 26px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.75);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
#langToggleBtn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
#langToggleBtn:active { transform: scale(0.93); }

/* Pause button — top-right, touch-friendly */
#pauseBtn {
    position: fixed;
    top: 8px; right: 8px;
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: none; /* shown by JS on touch devices */
}
#pauseBtn:active { background: rgba(255,255,255,0.2); }

/* Skill activation button — bottom-right, touch-friendly */
#skillBtn {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 5;
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255,200,0,0.6);
    background: rgba(0,0,0,0.5);
    color: #ffd700;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: none; /* shown by JS when skill weapon equipped */
    box-shadow: 0 0 15px rgba(255,200,0,0.2);
}
#skillBtn:active { background: rgba(255,200,0,0.3); transform: scale(0.92); }

/* ============================================================
   COIN DISPLAY (on overlay)
   ============================================================ */
/* Currency badges — small pill below nav tiles */
#coinDisplay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #ffd700;
    background: rgba(12, 14, 28, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 999px;
    text-shadow: 0 0 6px rgba(255,215,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.coin-icon, .gem-icon {
    display: inline-flex;
    align-items: center;
}
.coin-sep {
    color: rgba(255,255,255,0.25);
    margin: 0 2px;
}

/* Main menu button group — vertical stack */
#menuButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(16px, 3vh);
    margin-top: min(24px, 4vh);
}
/* Decorative divider between START button and nav tiles */
.menu-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(340px, 60vw);
    margin: 4px 0 2px;
    opacity: 0.8;
    pointer-events: none;
}
.menu-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 210, 120, 0.45) 30%,
        rgba(255, 210, 120, 0.45) 70%,
        transparent 100%);
}
.menu-divider-dot {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: rgba(255, 210, 120, 0.8);
    box-shadow: 0 0 8px rgba(255, 200, 90, 0.45);
}

/* Secondary nav row: 3 icon tiles below start button */
#menuNav {
    display: flex;
    gap: min(14px, 2.5vw);
    justify-content: center;
    align-items: stretch;
}
.btn-tile {
    --tile-color: #888;
    --tile-glow: rgba(120,120,120,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(118px, 24vw);
    padding: 14px 10px 12px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: min(11px, 2.4vw);
    letter-spacing: 1.5px;
    color: #ffffff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tile-color) 22%, rgba(12, 14, 28, 0.75)) 0%,
        color-mix(in srgb, var(--tile-color) 10%, rgba(6, 8, 18, 0.85)) 100%);
    border: 1.5px solid color-mix(in srgb, var(--tile-color) 55%, rgba(255,255,255,0.15));
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s ease,
                border-color 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.btn-tile:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tile-color) 90%, white);
    box-shadow:
        0 16px 32px rgba(0,0,0,0.46),
        0 0 22px var(--tile-glow),
        inset 0 1px 0 rgba(255,255,255,0.14);
}
.btn-tile:active {
    transform: translateY(-1px) scale(0.97);
}
.btn-tile:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tile-color) 95%, white);
    outline-offset: 3px;
}
.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transition: transform 0.2s ease;
}
.btn-tile:hover .tile-icon {
    transform: scale(1.12) translateY(-1px);
}
.tile-label {
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Per-tile accent colors — drive the --tile-color custom prop */
.btn-shop        { --tile-color: #8a72ff; --tile-glow: rgba(138, 114, 255, 0.38); }
.btn-achievements{ --tile-color: #f0bc43; --tile-glow: rgba(240, 188, 67,  0.42); color: #fff3c5; }
.btn-leaderboard { --tile-color: #4a93d4; --tile-glow: rgba(90, 167, 238,  0.42); color: #d8f0ff; }

.btn-achievements.has-unclaimed {
    animation: tile-pulse 2.1s ease-in-out infinite;
}
@keyframes tile-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 0 10px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
    50%      { box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 0 22px rgba(255, 215, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.14); }
}

/* ============================================================
   ACHIEVEMENT OVERLAY — mirrors shop style
   ============================================================ */
#achOverlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.92); z-index: 9999;
    font-family: 'Courier New', monospace;
}
#achPanel {
    width: min(600px, 90vw); overflow: hidden;
    display: flex; flex-direction: column;
    padding: min(30px, 5vw);
    background: linear-gradient(180deg, #1a1a30, #0a0a1a);
    border: 2px solid #c89020; border-radius: 16px;
    box-shadow: 0 0 40px rgba(200,144,32,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
#achHeader {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: min(18px, 2.5vh); padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
#achHeader h2 {
    font-size: min(24px, 5vw); color: #ffd700; letter-spacing: 2px; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.ach-header-right { display: flex; align-items: center; gap: 14px; }
.ach-count { font-size: min(14px, 3vw); color: #888; }
#achTabs {
    display: flex; gap: 4px; margin-bottom: min(14px, 2vh);
}
.ach-tab {
    flex: 1; padding: min(8px, 1.8vw) 0;
    font-size: min(11px, 2.4vw); font-family: 'Courier New', monospace; font-weight: bold;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #888; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ach-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ach-tab.active { background: rgba(200,144,32,0.25); border-color: #c89020; color: #ffd700; }
#achScrollArea {
    overflow-y: auto; scrollbar-width: none;
    max-height: min(420px, 55vh);
}
#achScrollArea::-webkit-scrollbar { display: none; }
.ach-item {
    display: flex; align-items: center; gap: min(12px, 2.5vw);
    padding: min(14px, 2.8vw); margin-bottom: min(10px, 2vw);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; transition: background 0.15s, border-color 0.15s;
}
.ach-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.ach-item.unlocked { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.06); }
.ach-item.claimed { opacity: 0.45; border-color: rgba(100,200,100,0.25); }
.ach-item-icon {
    width: min(44px, 9vw); height: min(44px, 9vw);
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; flex-shrink: 0;
}
.ach-item-icon svg { width: 22px; height: 22px; }
.ach-item-info { flex: 1; min-width: 0; }
.ach-item-name { font-size: min(15px, 3.2vw); font-weight: bold; color: #eee; margin-bottom: 2px; }
.ach-item-desc { font-size: min(11px, 2.5vw); color: #888; margin-bottom: 5px; }
.ach-item-bar-row { display: flex; align-items: center; gap: 8px; }
.ach-item-bar { flex: 1; height: 5px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
.ach-item-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.ach-item-progress { font-size: 10px; color: #666; min-width: 45px; text-align: right; }
.ach-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ach-item-reward { font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 4px; }
.ach-claim-btn {
    padding: 6px 16px; font-size: 13px; font-weight: bold;
    font-family: 'Courier New', monospace; letter-spacing: 1px;
    background: linear-gradient(180deg, #ffd700, #c0a000);
    color: #1a0a00; border: 2px solid #ffe040; border-radius: 6px;
    cursor: pointer; transition: transform 0.1s;
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
    animation: ach-pulse 1.5s ease-in-out infinite;
}
.ach-claim-btn:hover { transform: scale(1.08); }
.ach-claim-btn:active { transform: scale(0.95); }
@keyframes ach-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 18px rgba(255,215,0,0.6); }
}
.ach-claimed-label { font-size: 11px; color: #4a4a4a; letter-spacing: 1px; }

/* ============================================================
   SHOP OVERLAY
   ============================================================ */
#shopOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.92);
    z-index: 20;
    transition: opacity 0.3s;
}
#shopOverlay.hidden { opacity: 0; pointer-events: none; }
#shopScrollArea::-webkit-scrollbar { display: none; }

#shopPanel {
    width: min(600px, 90vw);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: min(30px, 5vw);
    background: linear-gradient(180deg, #1a1a30, #0a0a1a);
    border: 2px solid #4030a0;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(80,50,200,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

#shopScrollArea {
    overflow-y: auto;
    scrollbar-width: none;
    /* 3.5 items visible: 3×94px + 2×16px + 47px(half) = 375px */
    height: 375px;
    min-height: 80px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: min(16px, 2.5vh);
}

#shopHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: min(24px, 3vh);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
#shopHeader h2 {
    font-size: min(28px, 5.5vw);
    color: #c0a0ff;
    letter-spacing: 3px;
    margin: 0;
}
#shopCurrencies {
    display: flex;
    gap: min(16px, 3vw);
    align-items: center;
}
#shopCoins {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: min(20px, 4vw);
    color: #ffd700;
    font-weight: bold;
}
#shopGems {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: min(20px, 4vw);
    color: #cc44ff;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(180,50,255,0.5);
}

/* Shop tabs */
#shopTabs {
    display: flex;
    gap: 5px;
    margin-bottom: min(18px, 2.5vh);
}
.shop-tab {
    flex: 1;
    padding: min(10px, 2vw) 0;
    font-size: min(13px, 2.8vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.shop-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.shop-tab.active {
    background: rgba(100,60,220,0.35);
    border-color: #6040e0;
    color: #c0a0ff;
}

/* Shop items grid */
#shopItems,
#shopSpecialItems {
    display: flex;
    flex-direction: column;
    gap: min(16px, 2.5vw);
    margin-bottom: min(20px, 3vh);
}

.shop-section-header {
    font-size: 13px;
    font-weight: bold;
    color: rgba(255,255,255,0.55);
    letter-spacing: 1px;
    padding: 8px 4px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-top: 6px;
    margin-bottom: 4px;
}
.shop-section-hint {
    font-size: 10px;
    font-weight: normal;
    color: rgba(255,255,255,0.3);
    margin-left: 8px;
    letter-spacing: 0;
}
.shop-item {
    display: flex;
    align-items: center;
    gap: min(16px, 3vw);
    padding: min(16px, 3vw);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.shop-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.shop-item.owned {
    border-color: rgba(100,200,100,0.3);
}
.shop-item.equipped {
    border-color: rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.06);
}

.shop-item-icon {
    font-size: min(40px, 8vw);
    width: min(56px, 11vw);
    height: min(56px, 11vw);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}
.shop-item-icon svg {
    width: min(40px, 8vw);
    height: min(40px, 8vw);
}

.shop-item-info {
    flex: 1;
    min-width: 0;
}
.shop-item-name {
    font-size: min(18px, 3.8vw);
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}
.shop-item-desc {
    font-size: min(13px, 2.8vw);
    color: #999;
    margin-bottom: 6px;
}
.shop-item-duration {
    font-size: min(12px, 2.5vw);
    color: #888;
}

.shop-item-action {
    flex-shrink: 0;
}

.btn-buy, .btn-equip, .btn-equipped {
    padding: min(10px, 2vw) min(20px, 4vw);
    font-size: min(14px, 3vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    border: 2px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.btn-buy {
    background: linear-gradient(180deg, #ffd700, #c0a000);
    color: #1a0a00;
    border-color: #ffe040;
}
.btn-buy:hover { transform: scale(1.05); }
.btn-buy:active { transform: scale(0.95); }
.btn-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-equip {
    background: linear-gradient(180deg, #4080ff, #2060d0);
    color: #fff;
    border-color: #5090ff;
}
.btn-equip:hover { transform: scale(1.05); }

.btn-equipped {
    background: rgba(255,215,0,0.15);
    color: #ffd700;
    border-color: #ffd700;
    cursor: default;
}

.btn-back {
    display: block;
    margin: 0 auto 0;
    flex-shrink: 0;
    background: linear-gradient(180deg, #555, #333) !important;
    border-color: #777 !important;
    color: #ddd !important;
    padding: min(14px, 3vw) min(40px, 8vw) !important;
    font-size: min(20px, 4vw) !important;
}

#equippedInfo {
    text-align: center;
    margin-bottom: min(16px, 2.5vh);
    font-size: min(14px, 3vw);
    color: #aaa;
    min-height: 20px;
}

/* ============================================================
   TALENT SYSTEM
   ============================================================ */
.talent-hint {
    text-align: center;
    font-size: min(14px, 3vw);
    color: #aaa;
    min-height: 20px;
    margin-bottom: min(14px, 2vh);
}

#defenseInfo {
    text-align: center;
    font-size: min(14px, 3vw);
    color: #aaa;
    min-height: 20px;
    margin-bottom: min(16px, 2.5vh);
}

#talentItems {
    display: flex;
    flex-direction: column;
    gap: min(14px, 2.2vw);
    margin-bottom: min(16px, 2.5vh);
}

.talent-item {
    border-color: rgba(150,50,200,0.2) !important;
}
.talent-item:hover {
    border-color: rgba(180,80,255,0.4) !important;
    background: rgba(150,50,200,0.06) !important;
}
.talent-maxed {
    border-color: rgba(200,100,255,0.5) !important;
    background: rgba(150,50,200,0.1) !important;
}

.talent-icon {
    font-size: min(32px, 6.5vw) !important;
}

.talent-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.talent-pips {
    display: flex;
    gap: 4px;
}
.talent-pip {
    width: min(12px, 2.5vw);
    height: min(12px, 2.5vw);
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}
.talent-pip.filled {
    background: #cc44ff;
    border-color: #ee88ff;
    box-shadow: 0 0 5px rgba(200,80,255,0.7);
}
.talent-effect {
    font-size: min(12px, 2.6vw);
    font-weight: bold;
}

.btn-talent-buy {
    padding: min(8px, 1.8vw) min(14px, 3vw);
    font-size: min(14px, 3vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: linear-gradient(180deg, #9933ff, #6600cc);
    color: #fff;
    border: 2px solid #bb55ff;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    min-width: min(64px, 14vw);
}
.btn-talent-buy:hover { transform: scale(1.05); }
.btn-talent-buy:active { transform: scale(0.95); }
.btn-talent-buy:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    background: linear-gradient(180deg, #553388, #331166);
}
.talent-btn-sub {
    font-size: min(10px, 2.2vw);
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.talent-maxed-btn {
    background: rgba(200,100,255,0.2) !important;
    color: #cc88ff !important;
    border-color: #9944cc !important;
    cursor: default !important;
}

/* ============================================================
   DEFENSE / ARMOR SYSTEM
   ============================================================ */
#defenseItems {
    display: flex;
    flex-direction: column;
    gap: min(14px, 2.2vw);
    margin-bottom: min(16px, 2.5vh);
}

.armor-item {
    border-color: rgba(50, 100, 220, 0.2) !important;
}
.armor-item:hover {
    border-color: rgba(80, 150, 255, 0.4) !important;
    background: rgba(50, 100, 200, 0.06) !important;
}
.armor-item.owned {
    border-color: rgba(100, 180, 255, 0.5) !important;
    background: rgba(50, 100, 200, 0.08) !important;
}

/* 充能数量徽章 */
.skill-charge-badge {
    font-size: min(20px, 4.2vw);
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px currentColor;
}

/* ============================================================
   WEAPON SLOTS (top-left, horizontal row, shown during gameplay)
   ============================================================ */
#weaponSlots {
    position: fixed;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 5;
    pointer-events: auto;
    padding: 7px;
    background: rgba(8,8,20,0.72);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.wslot {
    position: relative;
    width: min(72px, 15vw);
    height: min(72px, 15vw);
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.2s;
    overflow: hidden;
}
.wslot:active { transform: scale(0.96); }

/* Key badge */
.wslot-key {
    font-family: 'Courier New', monospace;
    font-size: min(10px, 2vw);
    font-weight: bold;
    color: rgba(255,255,255,0.3);
    line-height: 1;
    text-align: center;
}

.wslot-icon {
    font-size: min(26px, 5.5vw);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wslot-icon svg {
    width: min(24px, 5vw);
    height: min(24px, 5vw);
}

.wslot-count {
    font-family: 'Courier New', monospace;
    font-size: min(12px, 2.5vw);
    font-weight: bold;
    line-height: 1;
    text-align: center;
    transition: color 0.2s;
}

/* Cooldown / active overlay */
.wslot-cd {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 7px;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: min(18px, 4vw);
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Duration progress bar at bottom edge */
.wslot-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.08);
    display: none;
}
.wslot-bar-fill {
    height: 100%;
    border-radius: 0 0 7px 7px;
    transition: width 0.1s linear;
}

/* Pulse animation for ready state */
@keyframes wslot-glow {
    0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--wcolor) 40%, transparent); }
    50%       { box-shadow: 0 0 14px color-mix(in srgb, var(--wcolor) 70%, transparent); }
}

/* State classes */
.wslot-active {
    background: rgba(255,215,0,0.08);
    box-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.wslot-empty {
    opacity: 0.22;
}
.wslot-ready {
    animation: wslot-glow 2s ease-in-out infinite;
}
.wslot-dim {
    opacity: 0.4;
}

/* ============================================================
   MID-GAME SHOP (after mega boss)
   ============================================================ */
#midShopOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.82);
    z-index: 15;
    transition: opacity 0.3s;
}
#midShopOverlay.hidden { opacity: 0; pointer-events: none; }

#midShopPanel {
    width: min(420px, 88vw);
    padding: min(28px, 5vw);
    background: linear-gradient(180deg, #1a1020, #0a0a18);
    border: 2px solid #ff6600;
    border-radius: 16px;
    box-shadow: 0 0 50px rgba(255,100,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    text-align: center;
}

#midShopTitle {
    font-size: min(32px, 6vw);
    font-weight: bold;
    color: #ff8833;
    letter-spacing: 3px;
    margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(255,120,0,0.5);
}

#midShopSubtitle {
    font-size: min(14px, 3vw);
    color: #aaa;
    margin-bottom: min(18px, 3vh);
}

#midShopStats {
    display: flex;
    justify-content: center;
    gap: min(30px, 6vw);
    margin-bottom: min(18px, 3vh);
    font-size: min(16px, 3.5vw);
    font-weight: bold;
}

#midShopItems {
    display: flex;
    flex-direction: column;
    gap: min(10px, 2vw);
    margin-bottom: min(20px, 3vh);
}

.midshop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(12px, 2.5vw) min(16px, 3vw);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}
.midshop-item:hover {
    background: rgba(255,136,0,0.08);
    border-color: rgba(255,136,0,0.3);
}

.midshop-item-info {
    text-align: left;
}
.midshop-item-name {
    font-size: min(16px, 3.5vw);
    font-weight: bold;
    color: #ffaa44;
}
.midshop-item-desc {
    font-size: min(12px, 2.6vw);
    color: #999;
    margin-top: 2px;
}

.btn-midshop-buy {
    padding: min(8px, 1.8vw) min(16px, 3.5vw);
    font-size: min(14px, 3vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: linear-gradient(180deg, #ff9933, #cc6600);
    color: #1a0a00;
    border: 2px solid #ffaa44;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.btn-midshop-buy:hover { transform: scale(1.05); }
.btn-midshop-buy:active { transform: scale(0.95); }
.btn-midshop-buy:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.midshop-bought {
    opacity: 0.45;
    border-color: rgba(100,200,100,0.3) !important;
}
.midshop-sold {
    font-size: min(14px, 3vw);
    font-weight: bold;
    color: #66cc66;
    letter-spacing: 1px;
}

.btn-midshop-go {
    background: linear-gradient(180deg, #44cc44, #228822) !important;
    border-color: #55dd55 !important;
    color: #fff !important;
    padding: min(16px, 3.5vw) min(50px, 10vw) !important;
    font-size: min(22px, 4.5vw) !important;
    letter-spacing: 2px;
}

/* ============================================================
   PAUSE MENU OVERLAY
   ============================================================ */
#pauseMenuOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.80);
    z-index: 15;
    transition: opacity 0.2s;
}
#pauseMenuOverlay.hidden { opacity: 0; pointer-events: none; }

#pauseMenuPanel {
    width: min(340px, 86vw);
    padding: min(32px, 6vw) min(28px, 5vw);
    background: linear-gradient(180deg, #141428, #0a0a1a);
    border: 2px solid #f0c040;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(240,192,64,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
    text-align: center;
}
#pauseMenuTitle {
    font-size: min(48px, 11vw);
    font-weight: bold;
    color: #f0c040;
    letter-spacing: 6px;
    text-shadow: 4px 4px 0 #804000, 0 0 20px rgba(240,192,64,0.5);
    margin-bottom: 6px;
}
#pauseMenuSub {
    font-size: min(15px, 3.5vw);
    color: #888;
    margin-bottom: min(28px, 5vh);
}
#pauseMenuBtns {
    display: flex;
    flex-direction: column;
    gap: min(12px, 2.5vh);
    margin-bottom: min(18px, 3.5vh);
}
#pauseResumeBtn, #pauseRestartBtn, #pauseToMenuBtn {
    width: 100%;
    padding: min(14px, 3.5vw) 0;
    font-size: min(18px, 4.5vw);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 2px;
    border: 2px solid;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
#pauseResumeBtn:hover, #pauseRestartBtn:hover, #pauseToMenuBtn:hover { transform: scale(1.03); }
#pauseResumeBtn:active, #pauseRestartBtn:active, #pauseToMenuBtn:active { transform: scale(0.97); }
#pauseResumeBtn {
    background: linear-gradient(180deg, #44cc44, #228822);
    color: #fff;
    border-color: #55ee55;
}
#pauseRestartBtn {
    background: linear-gradient(180deg, #f0c040, #c08020);
    color: #1a0a00;
    border-color: #f0d060;
}
#pauseToMenuBtn {
    background: linear-gradient(180deg, #555, #333);
    color: #ccc;
    border-color: #777;
}
#pauseHintText {
    font-size: min(12px, 2.8vw);
    color: rgba(255,255,255,0.22);
    letter-spacing: 2px;
}

/* ============================================================
   MOBILE PORTRAIT ADAPTATIONS (portrait phones)
   ============================================================ */
@media screen and (max-width: 480px) {
    /* 1. Weapon slots: move to bottom-center on mobile */
    #weaponSlots {
        top: auto;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        gap: 5px;
        padding: 5px 7px;
    }
    .wslot {
        width: min(62px, 20vw);
        height: min(62px, 20vw);
        padding: 4px 3px 3px;
    }
    .wslot-key { display: none; } /* keyboard hint not needed on mobile */
    #langToggleBtn { bottom: auto; top: 8px; left: 8px; }
    .wslot-icon { font-size: min(22px, 6vw); }
    .wslot-count { font-size: min(11px, 3vw); }

    /* 2. Shop: full-width starting from top */
    #shopOverlay {
        align-items: flex-start;
        padding-top: 0;
    }
    #shopPanel {
        width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 14px 12px;
    }
    #shopScrollArea {
        height: min(380px, calc(100svh - 215px));
    }
    .shop-item {
        padding: 10px;
        gap: 10px;
    }
    .shop-item-icon {
        font-size: min(32px, 7.5vw);
        width: min(44px, 11vw);
        height: min(44px, 11vw);
    }
    /* Shop tabs slightly compact */
    .shop-tab {
        padding: min(8px, 1.8vw) 0;
        font-size: min(13px, 3.5vw);
    }
}

/* ============================================================
   DEBUG OVERLAY (triple-i)
   ============================================================ */
#debugOverlay {
    position: fixed;
    top: 60px;
    right: 16px;
    width: 300px;
    max-height: calc(100vh - 80px);
    background: rgba(0, 8, 4, 0.88);
    border: 1px solid rgba(0, 255, 136, 0.35);
    border-radius: 8px;
    color: #88ffcc;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 12px 10px;
    overflow-y: auto;
    z-index: 9999;
    pointer-events: none;
}
#debugOverlay h3 {
    color: #00ff88;
    margin: 0 0 4px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.25);
    padding-bottom: 3px;
}
#debugOverlay .debug-section {
    margin-top: 8px;
}
#debugOverlay .debug-row {
    display: flex;
    justify-content: space-between;
    margin: 1px 0;
}
#debugOverlay .debug-label {
    color: #77aaaa;
    flex-shrink: 0;
    margin-right: 8px;
}
#debugOverlay .debug-val {
    color: #ffffff;
    text-align: right;
}
#debugOverlay .debug-enemy {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 1px 0;
    color: #ffcc88;
}

/* ============================================================
   MOBILE BLOCK OVERLAY
   ============================================================ */
#mobileBlock {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #07091a;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
/* 检测到移动端时显示 */
.is-mobile #mobileBlock {
    display: flex;
}
/* 同时隐藏游戏内容，避免 PixiJS 在后台初始化 */
.is-mobile body > *:not(#mobileBlock) {
    visibility: hidden;
}
#mobileBlockInner {
    text-align: center;
    padding: 40px 32px;
    max-width: 340px;
}
#mobileBlockIcon {
    margin-bottom: 28px;
    filter: drop-shadow(0 0 18px rgba(240,184,40,0.4));
}
#mobileBlockTitle {
    font-size: 22px;
    font-weight: 700;
    color: #f0b828;
    letter-spacing: 2px;
    margin-bottom: 14px;
    text-shadow: 0 0 12px rgba(240,184,40,0.5);
}
#mobileBlockMsg {
    font-size: 15px;
    color: #a0b0cc;
    line-height: 1.8;
    margin-bottom: 28px;
}
#mobileBlockUrl {
    display: inline-block;
    font-size: 13px;
    color: #4a6080;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    padding: 8px 16px;
    letter-spacing: 1px;
}

/* ============================================================
   LEADERBOARD OVERLAY
   ============================================================ */
#leaderboardOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.92);
    z-index: 25;
    transition: opacity 0.25s;
}
#leaderboardOverlay.hidden { opacity: 0; pointer-events: none; }

#leaderboardPanel {
    width: min(480px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: min(28px, 5vw);
    background: linear-gradient(180deg, #0f1a10, #070d0a);
    border: 2px solid #f0c040;
    border-radius: 16px;
    box-shadow: 0 0 50px rgba(240,192,64,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

#leaderboardTitle {
    font-size: min(30px, 6vw);
    font-weight: bold;
    color: #f0c040;
    letter-spacing: 4px;
    text-align: center;
    text-shadow: 0 0 20px rgba(240,192,64,0.5);
    margin-bottom: min(18px, 3vh);
}

/* Column headers */
.lb-header {
    display: grid;
    grid-template-columns: 48px 1fr 52px 90px 52px;
    padding: 0 10px 8px;
    border-bottom: 1px solid rgba(240,192,64,0.25);
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* Scrollable list */
#leaderboardList {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(240,192,64,0.3) transparent;
    margin-bottom: min(16px, 2.5vh);
}
#leaderboardList::-webkit-scrollbar { width: 4px; }
#leaderboardList::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.3); border-radius: 2px; }

.lb-row {
    display: grid;
    grid-template-columns: 48px 1fr 52px 90px 52px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.1s;
}
.lb-row:hover { background: rgba(255,255,255,0.04); }
.lb-top3 { background: rgba(240,192,64,0.06); }
.lb-top3:hover { background: rgba(240,192,64,0.1); }

.lb-rank {
    font-size: min(18px, 3.8vw);
    text-align: center;
    flex-shrink: 0;
}
.lb-row:not(.lb-top3) .lb-rank { color: #f0c040; font-weight: bold; }
.lb-name {
    font-size: min(15px, 3.2vw);
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.lb-level {
    font-size: min(13px, 2.8vw);
    color: #cc44ff;
    text-align: right;
    padding-right: 4px;
}
.lb-score {
    font-size: min(16px, 3.4vw);
    font-weight: bold;
    color: #f0c040;
    text-align: right;
    padding-right: 8px;
}
.lb-wave {
    font-size: min(13px, 2.8vw);
    color: #88aaff;
    text-align: right;
}

.lb-status {
    text-align: center;
    padding: 30px 0;
    font-size: min(15px, 3.2vw);
    color: #888;
}
.lb-error { color: #ff6666; }
.lb-empty { color: #aaa; }

/* Leaderboard close button */
.lb-btn-close {
    display: block;
    margin: 0 auto;
    background: linear-gradient(180deg, #555, #333) !important;
    border-color: #777 !important;
    color: #ddd !important;
    padding: min(12px, 2.5vw) min(36px, 7vw) !important;
    font-size: min(18px, 4vw) !important;
}

/* ── My row highlight ── */
.lb-mine {
    background: rgba(240,192,64,0.18) !important;
    border-left: 3px solid rgba(240,192,64,0.8);
}
.lb-me-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: bold;
    background: rgba(240,192,64,0.2);
    border: 1px solid rgba(240,192,64,0.4);
    border-radius: 4px;
    color: #f0c040;
    vertical-align: middle;
    line-height: 1.4;
}

/* ── My rank separator ── */
.lb-my-rank-sep {
    text-align: center;
    padding: 8px 0 5px;
    color: rgba(240,192,64,0.45);
    font-size: 15px;
    letter-spacing: 6px;
    border-top: 1px dashed rgba(240,192,64,0.25);
    margin-top: 4px;
}

/* ── Join form (inside leaderboard panel) ── */
.lb-join-desc {
    text-align: center;
    font-size: min(15px, 3.2vw);
    color: #aaa;
    line-height: 1.7;
    margin-bottom: min(22px, 3.5vh);
}
.lb-join-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.lb-join-input {
    padding: 10px 16px;
    font-size: min(17px, 3.6vw);
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(240,192,64,0.4);
    border-radius: 10px;
    color: #fff;
    outline: none;
    width: min(280px, 70vw);
    text-align: center;
    -webkit-user-select: text;
    user-select: text;
    transition: border-color 0.15s, background 0.15s;
}
.lb-join-input:focus {
    border-color: #f0c040;
    background: rgba(255,255,255,0.1);
}
.lb-join-input::placeholder { color: rgba(255,255,255,0.28); font-size: min(14px, 3vw); }
.lb-join-status {
    text-align: center;
    font-size: min(13px, 2.8vw);
    color: #ff6666;
    min-height: 18px;
    margin-bottom: 4px;
}
.lb-join-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: min(16px, 2.5vh);
}
.lb-btn-join {
    background: linear-gradient(180deg, #f0c040, #c08020) !important;
    border-color: #f0d060 !important;
    color: #1a0a00 !important;
    padding: min(12px, 2.5vw) min(32px, 7vw) !important;
    font-size: min(18px, 4vw) !important;
}
.lb-btn-join:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.lb-btn-skip {
    background: linear-gradient(180deg, #444, #282828) !important;
    border-color: #666 !important;
    color: #aaa !important;
    padding: min(12px, 2.5vw) min(24px, 5vw) !important;
    font-size: min(18px, 4vw) !important;
}

/* ── Footer row (close + toggle) ── */
.lb-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: min(14px, 2.5vh);
    flex-wrap: wrap;
}

/* Toggle visibility button */
.lb-btn-toggle {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.55) !important;
    padding: min(10px, 2vw) min(20px, 4vw) !important;
    font-size: min(13px, 2.8vw) !important;
    letter-spacing: 0 !important;
    transition: background 0.15s, color 0.15s !important;
}
.lb-btn-toggle:hover {
    background: rgba(255,80,80,0.12) !important;
    border-color: rgba(255,80,80,0.35) !important;
    color: #ff8888 !important;
}
.lb-btn-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* Hidden notice */
.lb-hidden-notice {
    text-align: center;
    font-size: min(13px, 2.8vw);
    color: #ff9966;
    background: rgba(255,100,50,0.08);
    border: 1px solid rgba(255,100,50,0.2);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: min(10px, 2vh);
}

/* Leaderboard button in main menu */
.btn-leaderboard {
    background: linear-gradient(180deg, #2a618e, #17314f) !important;
    border-color: rgba(121, 188, 255, 0.9) !important;
    color: #d8f0ff !important;
}

/* Weapon unlock toast notification */
#weaponUnlockToast {
    position: fixed;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10, 14, 26, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 10px 20px 10px 14px;
    box-shadow: 0 0 24px rgba(0,0,0,0.7);
    pointer-events: none;
    white-space: nowrap;
    animation: weaponUnlockFadeIn 0.25s ease;
}
#weaponUnlockToast.hidden {
    display: none;
}
@keyframes weaponUnlockFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
#weaponUnlockIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
#weaponUnlockIcon svg {
    width: 36px;
    height: 36px;
}
#weaponUnlockText {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    color: #ccddee;
}
#weaponUnlockText .unlock-label {
    font-size: 11px;
    color: rgba(180, 200, 220, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}
#weaponUnlockText .unlock-name {
    font-size: 16px;
    font-weight: bold;
}

/* ============================================================
   LEVEL SELECT OVERLAY
   ============================================================ */
#levelSelectOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(circle at top, rgba(109, 156, 255, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(4, 8, 18, 0.72), rgba(3, 6, 12, 0.94));
    z-index: 10;
    transition: opacity 0.3s;
    overflow: hidden;
}
#levelSelectOverlay.hidden { opacity: 0; pointer-events: none; }

#levelSelectPanel {
    position: relative;
    width: min(720px, 94vw);
    padding: min(30px, 5vw) min(28px, 4.5vw);
    background:
        linear-gradient(180deg, rgba(20, 28, 54, 0.96), rgba(9, 12, 24, 0.94)),
        radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 58%);
    border: 1px solid rgba(255, 212, 116, 0.6);
    border-radius: 26px;
    box-shadow:
        0 30px 90px rgba(0,0,0,0.48),
        0 0 48px rgba(255, 188, 77, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: center;
    overflow: hidden;
}

#levelSelectPanel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 186, 82, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(91, 132, 255, 0.12), transparent 26%);
}

#levelSelectTitle {
    font-size: min(30px, 6.5vw);
    font-weight: bold;
    color: #ffd36b;
    letter-spacing: 4px;
    text-shadow: 0 0 24px rgba(255, 194, 79, 0.4);
    margin-bottom: min(20px, 3.5vh);
    position: relative;
}

/* ============================================================
   LEVEL 0 TUTORIAL BANNER — prominent entry on level select
   ============================================================ */
#tutorialBanner {
    display: flex;
    align-items: center;
    gap: min(18px, 3vw);
    padding: min(14px, 2.4vw) min(20px, 3.2vw);
    margin: 0 auto min(20px, 3vh);
    /* Match the width of the two level cards below: 2 × 290 + 20 gap */
    width: min(600px, 91.5vw);
    box-sizing: border-box;
    background:
        linear-gradient(100deg, rgba(17, 94, 88, 0.92), rgba(14, 45, 82, 0.92)),
        radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 60%);
    border: 1px solid rgba(104,235,195,0.58);
    border-radius: 18px;
    box-shadow:
        0 16px 34px rgba(0,0,0,0.28),
        0 0 28px rgba(80,220,180,0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
#tutorialBanner:hover {
    border-color: rgba(110,255,210,0.85);
    box-shadow:
        0 22px 44px rgba(0,0,0,0.34),
        0 0 36px rgba(80,220,180,0.24),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-3px);
}
#tutorialBanner:active { transform: translateY(0) scale(0.99); }
#tutorialBannerLeft {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(76px, 14vw);
    height: min(76px, 14vw);
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(110,255,210,0.3);
    border-radius: 10px;
    overflow: hidden;
}
#tutorialBannerLeft canvas {
    image-rendering: pixelated;
    display: block;
}
#tutorialBannerMid {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
#tutorialBannerTag {
    font-size: min(11px, 2.3vw);
    letter-spacing: 3px;
    color: rgba(120,240,200,0.85);
    text-transform: uppercase;
    margin-bottom: 4px;
}
#tutorialBannerName {
    font-size: min(19px, 4vw);
    font-weight: bold;
    letter-spacing: 2px;
    color: #c6ffee;
    text-shadow: 0 0 12px rgba(80,220,180,0.5);
    margin-bottom: 3px;
}
#tutorialBannerDesc {
    font-size: min(12px, 2.5vw);
    color: rgba(200,230,230,0.65);
    letter-spacing: 0.5px;
}
#tutorialBannerRight { flex: 0 0 auto; }
#tutorialBannerBtn {
    padding: min(10px, 2vw) min(22px, 4.5vw);
    font-size: min(14px, 3vw);
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    background: linear-gradient(180deg, #2aa888, #145a44);
    border: 2px solid #55ddaa;
    border-radius: 8px;
    color: #eafff4;
    text-shadow: 0 0 8px rgba(80,220,180,0.6);
    cursor: pointer;
    white-space: nowrap;
}
#tutorialBanner:hover #tutorialBannerBtn {
    background: linear-gradient(180deg, #35c89c, #1a7a5c);
}

#levelSelectCards {
    display: flex;
    gap: min(20px, 3.5vw);
    justify-content: center;
    margin-bottom: min(20px, 3.5vh);
    flex-wrap: wrap;
}

.level-card {
    width: min(290px, 44vw);
    padding: min(16px, 2.8vw) min(16px, 2.5vw) min(18px, 3vw);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(7px, 1.3vh);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.14s;
    cursor: default;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}
.level-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 22%),
        radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 28%);
}
.level-card-1 {
    background: linear-gradient(170deg, rgba(18,32,68,0.96), rgba(7,12,28,0.96));
    border-color: rgba(114,167,255,0.42);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28), 0 0 24px rgba(80,140,255,0.08);
}
.level-card-1:hover {
    border-color: rgba(80,180,255,0.7);
    box-shadow: 0 22px 42px rgba(0,0,0,0.34), 0 0 32px rgba(80,180,255,0.18);
    transform: translateY(-4px);
}
.level-card-2 {
    background: linear-gradient(170deg, rgba(66,18,18,0.96), rgba(20,6,6,0.96));
    border-color: rgba(246,112,92,0.42);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28), 0 0 24px rgba(220,60,60,0.08);
}
.level-card-2:hover {
    border-color: rgba(255,80,80,0.7);
    box-shadow: 0 22px 42px rgba(0,0,0,0.34), 0 0 32px rgba(255,80,80,0.18);
    transform: translateY(-4px);
}
.level-card.locked {
    opacity: 0.7;
    filter: grayscale(0.5);
}
.level-card.locked:hover { box-shadow: none !important; border-color: rgba(120,120,160,0.35) !important; }

.level-card-num {
    font-size: min(11px, 2.3vw);
    letter-spacing: 4px;
    text-transform: uppercase;
}
.level-card-1 .level-card-num { color: rgba(100,170,255,0.65); }
.level-card-2 .level-card-num { color: rgba(255,110,90,0.65); }

.level-card-name {
    font-size: min(18px, 3.8vw);
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 2px;
}
.level-card-1 .level-card-name { color: #88bbff; text-shadow: 0 0 12px rgba(100,170,255,0.4); }
.level-card-2 .level-card-name { color: #ff8866; text-shadow: 0 0 12px rgba(255,100,80,0.4); }

/* Sprite preview row */
.level-card-sprites {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: min(6px, 1.2vw);
    margin: min(2px, 0.5vh) 0;
    height: min(114px, 18.5vh);
}
.ls-sprite-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.ls-sprite-wrap canvas {
    display: block;
    image-rendering: pixelated;
}
.ls-sprite-main canvas {
    filter: drop-shadow(0 0 6px rgba(240,192,64,0.4));
}
.ls-sprite-label {
    font-size: min(10px, 2vw);
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

.level-card-info {
    font-size: min(11px, 2.4vw);
    color: #888;
    min-height: 16px;
    line-height: 1.5;
}
.level-card-multi {
    font-size: min(13px, 2.7vw);
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 1px;
}
.level-card.locked .level-start-btn {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
.level-start-btn {
    margin-top: min(4px, 0.8vh);
    padding: min(9px, 1.8vw) min(28px, 5.5vw) !important;
    font-size: min(15px, 3.2vw) !important;
    letter-spacing: 2px;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}
.level-card-1 .level-start-btn {
    background: linear-gradient(180deg, #2d62bf, #17365f) !important;
    border-color: rgba(112, 170, 255, 0.88) !important;
}
.level-card-1 .level-start-btn:hover {
    background: linear-gradient(180deg, #3572d8, #204887) !important;
}
.level-card-2 .level-start-btn {
    background: linear-gradient(180deg, #b6332a, #621612) !important;
    border-color: rgba(255, 129, 104, 0.88) !important;
}
.level-card-2 .level-start-btn:hover {
    background: linear-gradient(180deg, #d84436, #85211b) !important;
}
.btn-back-menu {
    background: linear-gradient(180deg, #4f5c77, #263146) !important;
    border-color: rgba(177, 198, 233, 0.4) !important;
    color: #dbe7fb !important;
    padding: min(10px, 2vw) min(28px, 6vw) !important;
    font-size: min(15px, 3.2vw) !important;
}

/* ============================================================
   MENU MONSTER DECORATIONS — animated sprite sheet creatures
   Pure CSS: background-image + steps() keyframe animation
   ============================================================ */
.menu-monster {
    /* !important required: `#overlay > *` (higher specificity) forces
       position:relative + z-index:1 on every direct child. Without
       overriding both, decorations collapse into the flex column at
       the top of the overlay. */
    position: absolute !important;
    pointer-events: none;
    z-index: 0 !important;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.6));
}

/* --- Small Dragon (left side) ---
   Sprite: 2688×128, 21 frames, each 128×128
   Display: 96×96, float up/down */
.monster-dragon-left {
    width: 96px;
    height: 96px;
    left: 4%;
    bottom: 14%;
    opacity: 0.58;
    background: url('assets/small_dragon.png') 0 0 / 2016px 96px no-repeat;
    animation:
        sprite-dragon 1.8s steps(21) infinite,
        float-y 3.2s ease-in-out infinite alternate;
}
@keyframes sprite-dragon {
    to { background-position: -2016px 0; }
}

/* --- Capybara (right side) ---
   Sprite: 2048×128, 16 frames, each 128×128
   Display: 88×88, float opposite phase */
.monster-capybara-right {
    width: 88px;
    height: 88px;
    right: 4%;
    bottom: 15%;
    transform: scaleX(-1);
    opacity: 0.45;
    background: url('assets/capybara.png') 0 0 / 1408px 88px no-repeat;
    animation:
        sprite-capybara 1.4s steps(16) infinite,
        float-y 2.8s ease-in-out infinite alternate-reverse;
}
@keyframes sprite-capybara {
    to { background-position: -1408px 0; }
}

/* --- Fire Dragon (top-left) ---
   Sprite: 2048×256, 8 frames, each 256×256
   Display: 120×120, red/orange glow pulse, mirrors boss on the right */
.monster-fire-top-left {
    width: 120px;
    height: 120px;
    left: 50%;
    top: 8%;
    transform: translateX(calc(-50% - 240px)) scaleX(-1);
    opacity: 0.32;
    background: url('assets/fire_enemy.png') 0 0 / 960px 120px no-repeat;
    animation:
        sprite-fire 0.9s steps(8) infinite,
        float-y 3.6s ease-in-out infinite alternate,
        pulse-glow-fire 2.6s ease-in-out infinite alternate;
}
@keyframes sprite-fire {
    to { background-position: -960px 0; }
}
@keyframes pulse-glow-fire {
    from { filter: drop-shadow(0 0 14px rgba(255, 90, 40, 0.35))
                   drop-shadow(0 0 36px rgba(200, 40, 20, 0.18)); }
    to   { filter: drop-shadow(0 0 22px rgba(255, 120, 50, 0.55))
                   drop-shadow(0 0 56px rgba(220, 60, 20, 0.28)); }
}

/* --- Elephant King (bottom-center, prominent mascot) ---
   Sprite: 3712×128, 29 frames, each 128×128
   Display: 160×160, centered between the two bottom monsters */
.monster-elephant-bg {
    width: 160px;
    height: 160px;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    opacity: 0.55;
    filter: drop-shadow(0 0 22px rgba(255, 140, 40, 0.25))
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
    background: url('assets/elephant.png') 0 0 / 4640px 160px no-repeat;
    animation:
        sprite-elephant 2.2s steps(29) infinite,
        float-y 4.5s ease-in-out infinite alternate;
}
@keyframes sprite-elephant {
    to { background-position: -4640px 0; }
}

/* --- Cow Cry (mid-right, accent creature) ---
   Sprite: 2560×128, 20 frames, each 128×128
   Display: 76×76, mirrored facing the center */
.monster-cow-mid-right {
    width: 76px;
    height: 76px;
    right: 14%;
    top: 42%;
    transform: scaleX(-1);
    opacity: 0.42;
    background: url('assets/cow_cry.png') 0 0 / 1520px 76px no-repeat;
    animation:
        sprite-cow 1.6s steps(20) infinite,
        float-y 2.4s ease-in-out infinite alternate;
}
@keyframes sprite-cow {
    to { background-position: -1520px 0; }
}

/* --- Boss Dragon (top, near title) ---
   Sprite: 256×64, 4 frames, each 64×64
   Display: 112×112 (scaled up), subtle pulse glow */
.monster-boss-top {
    width: 112px;
    height: 112px;
    left: 50%;
    top: 10%;
    transform: translateX(calc(-50% + 220px));
    opacity: 0.35;
    background: url('assets/boss_dragon.png') 0 0 / 448px 112px no-repeat;
    animation:
        sprite-boss 1.0s steps(4) infinite,
        float-y 4s ease-in-out infinite alternate,
        pulse-glow 3s ease-in-out infinite alternate;
}
@keyframes sprite-boss {
    to { background-position: -448px 0; }
}

/* Shared floating animation */
@keyframes float-y {
    from { margin-top: -10px; }
    to   { margin-top: 10px; }
}

/* Boss glow pulse */
@keyframes pulse-glow {
    from { filter: drop-shadow(0 0 16px rgba(255, 80, 40, 0.3))
                   drop-shadow(0 0 40px rgba(200, 60, 30, 0.15)); }
    to   { filter: drop-shadow(0 0 24px rgba(255, 100, 50, 0.5))
                   drop-shadow(0 0 60px rgba(200, 60, 30, 0.25)); }
}

/* Mobile: hide decorations to keep menu clean */
@media (max-width: 768px), (max-aspect-ratio: 1/1) {
    .menu-monster { display: none; }
}
/* Small desktop: shrink and fade further */
@media (max-width: 1100px) and (min-width: 769px) {
    .monster-dragon-left     { width: 64px; height: 64px; background-size: 1344px 64px; opacity: 0.35; }
    .monster-capybara-right  { width: 60px; height: 60px; background-size: 960px  60px; opacity: 0.32; }
    .monster-boss-top        { width: 80px; height: 80px; background-size: 320px  80px; opacity: 0.30;
                               transform: translateX(calc(-50% + 160px)); }
    .monster-fire-top-left   { width: 84px; height: 84px; background-size: 672px  84px; opacity: 0.28;
                               transform: translateX(calc(-50% - 170px)) scaleX(-1); }
    .monster-elephant-bg     { width: 110px; height: 110px; background-size: 3190px 110px; opacity: 0.50; }
    @keyframes sprite-elephant { to { background-position: -3190px 0; } }
    .monster-cow-mid-right   { width: 54px; height: 54px; background-size: 1080px 54px; opacity: 0.35; right: 10%; }
    @keyframes sprite-dragon   { to { background-position: -1344px 0; } }
    @keyframes sprite-capybara { to { background-position: -960px  0; } }
    @keyframes sprite-boss     { to { background-position: -320px  0; } }
    @keyframes sprite-fire     { to { background-position: -672px  0; } }
    @keyframes sprite-cow      { to { background-position: -1080px 0; } }
}