:root {
            --bg: #0f1117;
            --bg-grad-1: rgba(0,180,255,0.10);
            --bg-grad-2: rgba(0,229,176,0.10);
            --panel: #171a22;
            --panel-2: #1f2430;
            --border: #2d3342;
            --text: #f3f5f7;
            --muted: #96a0b8;
            --accent: #00e5b0;
            --accent-2: #00b4ff;
            --warn: #ffcc00;
            --danger: #ff667a;
            --shadow: 0 18px 50px rgba(0,0,0,0.42);
            --board-bg: #05070c;
            --app-vh: 1dvh;
            --mobile-controls-space: 104px;
            --board-fill-width: 300px;
            --board-fit-height: 544px;
            --controls-portrait-lift: 88px;
            --board-shell-mobile-pad: 4px;
            --mobile-side-width: 56px;
            --mobile-side-offset: 8px;
            --controls-left-shift-y: 0px;
            --controls-right-shift-y: 0px;
            --controls-scale: 1;
        }

        body.theme-neon {
            --bg: #0b0f1f;
            --bg-grad-1: rgba(157, 78, 221, 0.20);
            --bg-grad-2: rgba(0, 255, 204, 0.18);
            --panel: #12162a;
            --panel-2: #1b2140;
            --border: #39427b;
            --accent: #00ffcc;
            --accent-2: #7a9cff;
            --warn: #ffe066;
            --board-bg: #030613;
        }

        body.theme-sunset {
            --bg: #1a1110;
            --bg-grad-1: rgba(255, 126, 95, 0.18);
            --bg-grad-2: rgba(254, 180, 123, 0.18);
            --panel: #2a1c1a;
            --panel-2: #3a2622;
            --border: #6c4a43;
            --accent: #ff9f68;
            --accent-2: #ffd166;
            --warn: #ffe082;
            --board-bg: #110908;
        }

        body.theme-forest {
            --bg: #0d1511;
            --bg-grad-1: rgba(48, 191, 120, 0.18);
            --bg-grad-2: rgba(115, 200, 169, 0.18);
            --panel: #15221b;
            --panel-2: #1d3127;
            --border: #325344;
            --accent: #5be49b;
            --accent-2: #9fe7c7;
            --warn: #f6d365;
            --board-bg: #08100c;
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        html, body {
            margin: 0;
            min-height: 100%;
            background:
                radial-gradient(circle at top, var(--bg-grad-1), transparent 30%),
                radial-gradient(circle at bottom, var(--bg-grad-2), transparent 30%),
                var(--bg);
            color: var(--text);
            font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: calc(var(--app-vh) * 100);
            padding: max(12px, env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px) + 24px);
            touch-action: manipulation;
            overscroll-behavior-y: auto;
            position: relative;
        }
        body.game-refresh-guard {
            overflow-y: hidden;
            overscroll-behavior-y: none;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 40;
            background:
                radial-gradient(circle at center, rgba(255,255,255,0.72), rgba(255,244,194,0.34) 18%, rgba(130,240,255,0.12) 42%, rgba(255,255,255,0) 72%),
                linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,225,120,0.12) 36%, rgba(120,225,255,0.10) 68%, rgba(255,255,255,0));
            mix-blend-mode: screen;
            transform: scale(0.96);
        }
        body.perfect-flash::before {
            animation: perfectClearFlash 0.68s ease-out both;
        }
        .board-shell.b2b-ring,
        .board-shell.perfect-rainbow {
            border-color: transparent;
        }
        .board-shell.b2b-ring {
            background:
                linear-gradient(color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)) padding-box,
                conic-gradient(from 0deg, rgba(0,229,176,0.96), rgba(0,180,255,0.96), rgba(122,156,255,0.94), rgba(255,120,214,0.96), rgba(255,214,94,0.98), rgba(0,229,176,0.96)) border-box;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 26px rgba(0,229,176,0.24), 0 0 62px rgba(0,180,255,0.22), 0 0 118px rgba(122,156,255,0.18), var(--shadow);
            filter: saturate(1.08);
            animation: b2bRingRotate 1.18s linear infinite;
        }
        .board-shell.fever-mode.b2b-ring {
            box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 30px rgba(0,229,176,0.30), 0 0 74px rgba(0,180,255,0.28), 0 0 132px rgba(122,156,255,0.20), var(--shadow);
            animation: feverShellPulse 0.52s ease-in-out infinite alternate, b2bRingRotate 1.18s linear infinite;
        }
        .board-shell.perfect-rainbow {
            background:
                linear-gradient(color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)) padding-box,
                conic-gradient(from 90deg, rgba(255,92,164,0.98), rgba(255,174,77,0.98), rgba(255,236,96,0.98), rgba(63,255,186,0.98), rgba(72,221,255,0.98), rgba(119,126,255,0.98), rgba(226,118,255,0.98), rgba(255,92,164,0.98)) border-box;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 28px rgba(255,146,214,0.24), 0 0 80px rgba(72,221,255,0.28), 0 0 130px rgba(255,214,87,0.20), var(--shadow);
            filter: saturate(1.12);
            animation: perfectRainbowRotate 1.05s linear infinite;
        }
        .board-shell.fever-mode.perfect-rainbow {
            animation: feverShellPulse 0.52s ease-in-out infinite alternate, perfectRainbowRotate 1.05s linear infinite;
        }
        .board-shell.b2b-ring #tetris {
            border-color: rgba(221,255,249,0.86);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 18px 28px rgba(255,255,255,0.04), 0 0 20px rgba(0,229,176,0.24), 0 0 52px rgba(0,180,255,0.22), 0 18px 42px rgba(0,0,0,0.34);
        }
        .board-shell.perfect-rainbow #tetris {
            border-color: rgba(255,248,255,0.92);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 18px 28px rgba(255,255,255,0.05), 0 0 22px rgba(255,122,208,0.22), 0 0 64px rgba(72,221,255,0.24), 0 18px 42px rgba(0,0,0,0.34);
        }

        .app {
            width: min(100%, 560px);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .topbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(255,255,255,0.06);
            background: color-mix(in srgb, var(--panel) 94%, transparent);
            border-radius: 18px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
            position: sticky;
            top: calc(env(safe-area-inset-top, 0px) + 4px);
            z-index: 12;
        }

        .title-wrap { min-width: 0; }
        .compact-topbar { padding: 10px 12px; }
        .compact-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .brand-mark {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-size: 16px;
            font-weight: 900;
            color: #041410;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow: 0 10px 22px rgba(0,0,0,0.24);
            flex: 0 0 auto;
        }
        .compact-title .eyebrow {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.16em;
            margin-bottom: 2px;
        }
        .compact-title p {
            margin: 2px 0 0;
            color: var(--muted);
            font-size: 11px;
        }
        .compact-actions { align-items: center; }
        .nav-btn { text-decoration: none; }
        .title-wrap h1 { margin: 0; font-size: 18px; line-height: 1.05; }
        .title-wrap p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

        .action-row { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }

        .mini-btn, .chip-btn {
            border: 1px solid var(--border);
            background: var(--panel-2);
            color: var(--text);
            border-radius: 12px;
            padding: 10px 12px;
            min-height: 42px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            white-space: nowrap;
        }
        .icon-btn {
            width: 42px;
            min-width: 42px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            line-height: 1;
        }

        .mini-btn:active, .chip-btn:active { transform: translateY(1px); }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }

        .topbar,
        .status-grid {
            transform-origin: top center;
            transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, margin 0.28s ease, padding 0.28s ease, border-width 0.28s ease;
        }

        .focus-toggle {
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 8px);
            right: 10px;
            z-index: 20;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(255,255,255,0.08);
            background: color-mix(in srgb, var(--panel) 92%, transparent);
            color: var(--text);
            border-radius: 999px;
            padding: 0;
            font-size: 16px;
            font-weight: 900;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 24px rgba(0,0,0,0.22);
            backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            transform: translateY(-8px) scale(0.96);
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
        }
        .focus-toggle:active {
            transform: translateY(0) scale(0.94);
        }

        body.game-focus .focus-toggle {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        body.game-focus:not(.top-peek) .topbar {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateY(-16px) scaleY(0.92);
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-width: 0;
            pointer-events: none;
            box-shadow: none;
        }

        body.game-focus:not(.top-peek) .status-grid {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateY(-10px) scaleY(0.92);
            margin: -4px 0 0;
            pointer-events: none;
        }

        body.game-focus.top-peek .topbar,
        body.game-focus.top-peek .status-grid {
            max-height: 220px;
            opacity: 1;
            pointer-events: auto;
        }

        .stat {
            background: color-mix(in srgb, var(--panel) 92%, transparent);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 14px;
            padding: 8px 6px;
            text-align: center;
            box-shadow: 0 12px 30px rgba(0,0,0,0.22);
        }

        .stat .label {
            color: var(--muted);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .assist-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 18px;
            padding: 0 7px;
            border-radius: 999px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, white 8%), color-mix(in srgb, var(--accent-2) 76%, white 10%));
            color: #041410;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 0.16em;
            box-shadow: 0 6px 14px rgba(0,0,0,0.18), 0 0 14px rgba(0,229,176,0.16);
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
        }
        .assist-pill[hidden] {
            display: none !important;
        }
        body.beginner-assist .assist-pill {
            box-shadow: 0 8px 18px rgba(0,0,0,0.22), 0 0 18px rgba(0,229,176,0.24);
            transform: translateY(-1px);
        }
        .stat .value {
            margin-top: 4px;
            font-size: 16px;
            font-weight: 900;
            color: var(--accent);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }
        /* SCORE(첫 번째 stat)를 약간 크게 강조 */
        .stat:first-child .value {
            font-size: 18px;
            letter-spacing: -0.02em;
        }

        .board-shell {
            position: relative;
            display: grid;
            grid-template-columns: 68px minmax(0, 1fr) 68px;
            gap: 8px;
            padding: 10px;
            align-items: center;
            background: color-mix(in srgb, var(--panel) 92%, transparent);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 22px;
            box-shadow: var(--shadow);
            overflow: hidden;
            isolation: isolate;
        }
        .board-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 1;
            background: linear-gradient(180deg, rgba(255,70,90,0.28), transparent 24%);
            transition: opacity 0.22s ease;
        }
        .board-shell.danger-zone::before {
            opacity: 1;
            animation: dangerPulse 0.75s ease-in-out infinite alternate;
        }
        .board-shell.landing-guide-near {
            box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px rgba(0,229,176,0.14), 0 0 36px rgba(0,180,255,0.12), var(--shadow);
        }
        .board-shell.landing-guide-near:not(.fever-mode)::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 34%;
            pointer-events: none;
            z-index: 2;
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.04) 32%, rgba(0,229,176,0.14) 76%, rgba(0,180,255,0.16) 100%);
            mix-blend-mode: screen;
            opacity: 0.88;
        }
        .board-shell.landing-guide-near #tetris {
            filter: saturate(1.08) contrast(1.08) brightness(1.03);
        }
        .board-shell.fever-mode {
            box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 28px rgba(0,229,176,0.26), 0 0 64px rgba(0,180,255,0.24), 0 0 110px rgba(122,156,255,0.16), var(--shadow);
            animation: feverShellPulse 0.52s ease-in-out infinite alternate;
        }
        .board-shell.fever-mode::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            opacity: 0.9;
            background:
                radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 30%),
                radial-gradient(circle at 50% 42%, rgba(0,229,176,0.16), transparent 44%),
                linear-gradient(135deg, rgba(0,229,176,0.14), rgba(0,180,255,0.10) 46%, rgba(122,156,255,0.12));
            mix-blend-mode: screen;
            animation: feverAuraPulse 0.58s ease-in-out infinite alternate;
        }

        .side-column { display: flex; flex-direction: column; gap: 8px; }

        .panel {
            background: var(--panel-2);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 8px 6px;
            min-height: 74px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .panel .label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 5px; }
        .panel .panel-value { font-size: 14px; font-weight: 900; color: var(--accent-2); }
        #mode-display,
        #goal-display {
            font-size: 12px;
            letter-spacing: 0.06em;
        }
        #goal-display {
            color: #f6fbff;
        }

        canvas#tetris {
            width: min(100%, var(--board-fill-width, 272px));
            max-width: var(--board-fill-width, 272px);
            height: var(--board-fit-height, 544px);
            max-height: var(--board-fit-height, 544px);
            aspect-ratio: 1 / 2;
            background-image:
                radial-gradient(circle at 22% 16%, rgba(255,255,255,0.08), transparent 18%),
                linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 28%, rgba(0,0,0,0.12) 100%),
                url('https://www.genspark.ai/api/files/s/THgGSAn4'),
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(180deg, color-mix(in srgb, var(--board-bg) 72%, #111827), color-mix(in srgb, var(--board-bg) 94%, #02040a));
            background-size: auto, auto, 56% auto, 24px 24px, 24px 24px, auto;
            background-position: center center, center center, center 58%, center center, center center, center center;
            background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
            border: 2px solid var(--border);
            border-radius: 14px;
            display: block;
            margin: 0 auto;
            touch-action: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 18px 28px rgba(255,255,255,0.03), 0 18px 42px rgba(0,0,0,0.34);
        }

        .mini-canvas { width: 52px; height: 52px; border-radius: 10px; background: #0b0e14; margin: 0 auto; }

        .fx-banner {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.88);
            min-width: min(82vw, 280px);
            max-width: calc(100% - 20px);
            padding: 12px 18px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(8,18,28,0.86), rgba(8,18,28,0.58));
            border: 1px solid rgba(255,255,255,0.12);
            color: #f8fdff;
            text-align: center;
            font-weight: 900;
            letter-spacing: 0.05em;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 12px 36px rgba(0,0,0,0.28);
            backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            z-index: 4;
            overflow: hidden;
            isolation: isolate;
        }
        .fx-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 48%);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: -1;
        }
        .fx-banner.show {
            animation: fxBannerPop 1.1s ease both;
        }
        .fx-banner .fx-kicker {
            display: block;
            margin-bottom: 5px;
            font-size: 10px;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.84);
        }
        .fx-banner .fx-main {
            display: block;
            font-size: 24px;
            line-height: 1;
            letter-spacing: 0.06em;
        }
        .fx-banner small,
        .fx-banner .fx-sub {
            display: block;
            margin-top: 5px;
            font-size: 11px;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.78);
        }
        .fx-banner.brand-tetris {
            min-width: min(88vw, 332px);
            padding: 16px 22px 14px;
            border-radius: 24px;
            background:
                linear-gradient(135deg, rgba(7,16,28,0.96), rgba(12,34,52,0.88) 46%, rgba(13,24,40,0.92)),
                linear-gradient(135deg, rgba(0,229,176,0.18), rgba(0,180,255,0.12));
            border: 1px solid rgba(170,255,241,0.34);
        }
        .fx-banner.brand-tetris::before {
            opacity: 1;
            background:
                linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
                url('https://www.genspark.ai/api/files/s/THgGSAn4');
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 38% auto;
            background-position: center center, right 14px center;
            filter: saturate(1.08);
            opacity: 0.18;
        }
        .fx-banner.brand-tetris .fx-kicker {
            color: rgba(195,255,246,0.96);
            text-shadow: 0 0 16px rgba(0,229,176,0.26);
        }
        .fx-banner.brand-tetris .fx-main {
            font-size: 28px;
            text-shadow: 0 0 18px rgba(255,255,255,0.18), 0 0 28px rgba(0,229,176,0.20), 0 0 38px rgba(0,180,255,0.16);
        }
        .fx-banner.brand-tetris .fx-sub {
            color: rgba(228,247,255,0.92);
        }

        .mini-hud-toast {
            position: absolute;
            left: 50%;
            bottom: clamp(84px, 16vh, 132px);
            transform: translateX(-50%) translateY(8px) scale(0.96);
            min-width: min(58vw, 168px);
            max-width: calc(100% - 24px);
            padding: 8px 12px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(8,18,28,0.82), rgba(10,24,36,0.54));
            border: 1px solid rgba(255,255,255,0.10);
            color: #eefcff;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 24px rgba(0,0,0,0.22);
            opacity: 0;
            pointer-events: none;
            z-index: 4;
            transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
        }
        .mini-hud-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        .mini-hud-toast .mini-main {
            display: block;
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.08em;
        }
        .mini-hud-toast .mini-sub {
            display: block;
            margin-top: 3px;
            font-size: 10px;
            letter-spacing: 0.10em;
            color: rgba(236,248,255,0.72);
        }
        .mini-hud-toast.tone-accent {
            border-color: rgba(170,255,241,0.20);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px rgba(0,229,176,0.12), 0 10px 24px rgba(0,0,0,0.22);
        }
        .mini-hud-toast.tone-warn {
            border-color: rgba(255,224,102,0.26);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 16px rgba(255,204,0,0.12), 0 10px 24px rgba(0,0,0,0.22);
        }
        .mini-hud-toast.tone-danger {
            border-color: rgba(255,102,122,0.24);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px rgba(255,102,122,0.14), 0 10px 24px rgba(0,0,0,0.22);
        }

        body.visual-high-contrast .panel,
        body.visual-high-contrast .stat,
        body.visual-high-contrast .meta-chip,
        body.visual-high-contrast .overlay-card,
        body.visual-high-contrast .meta-drawer,
        body.visual-high-contrast .controls .btn {
            border-color: rgba(240, 250, 255, 0.34);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 14px 34px rgba(0,0,0,0.30);
        }
        body.visual-high-contrast canvas#tetris {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 0 1px rgba(255,255,255,0.10), 0 16px 34px rgba(0,0,0,0.36);
        }
        body.visual-colorblind .panel,
        body.visual-colorblind .stat,
        body.visual-colorblind .meta-chip,
        body.visual-colorblind .overlay-card {
            border-color: rgba(160, 196, 255, 0.26);
        }
        body.danger-ui .topbar,
        body.danger-ui .status-grid {
            border-color: rgba(255,120,138,0.24);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 24px rgba(255,102,122,0.16), var(--shadow);
        }
        body.danger-ui .brand-mark {
            background: linear-gradient(135deg, #ff7187, #ffd166);
            color: #20070a;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 24px rgba(255,102,122,0.24);
        }
        body.danger-ui .side-column .panel,
        body.danger-ui .meta-chip,
        body.danger-ui .controls .btn {
            border-color: rgba(255,116,140,0.24);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24), 0 0 20px rgba(255,102,122,0.12);
        }
        /* 위험 구역: SCORE 값 색상을 위험 색으로 전환해 시각적 경고 강화 */
        body.danger-ui .stat:first-child .value {
            color: var(--danger);
            text-shadow: 0 0 12px rgba(255,102,122,0.28);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        .intro-anim {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            opacity: 0;
            pointer-events: none;
            z-index: 4;
            overflow: hidden;
        }
        .intro-anim::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at center, rgba(255,255,255,0.14), transparent 28%),
                linear-gradient(135deg, rgba(0,229,176,0.16), rgba(0,180,255,0.10) 44%, rgba(122,156,255,0.14)),
                url('https://www.genspark.ai/api/files/s/THgGSAn4');
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: auto, auto, 34% auto;
            background-position: center center, center center, center center;
            mix-blend-mode: screen;
            opacity: 0;
        }
        .intro-anim::after {
            content: '';
            position: absolute;
            top: -18%;
            bottom: -18%;
            left: -30%;
            width: 26%;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.30), rgba(255,255,255,0));
            transform: rotate(12deg) translateX(-140%);
            opacity: 0;
        }
        .intro-anim.active {
            opacity: 1;
            animation: introFadeWrap 1.18s ease both;
        }
        .intro-anim.active::before {
            animation: introBackdropPulse 1.18s ease both;
        }
        .intro-anim.active::after {
            opacity: 1;
            animation: introShineSweep 1.04s ease both;
        }
        .intro-card {
            position: relative;
            min-width: min(84vw, 310px);
            max-width: calc(100% - 28px);
            padding: 18px 20px 16px;
            border-radius: 26px;
            text-align: center;
            color: #f7fcff;
            border: 1px solid rgba(191,255,244,0.34);
            background: linear-gradient(135deg, rgba(6,16,26,0.95), rgba(10,34,54,0.88) 48%, rgba(10,18,34,0.92));
            box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 28px rgba(0,229,176,0.26), 0 0 60px rgba(0,180,255,0.18), 0 18px 42px rgba(0,0,0,0.34);
            backdrop-filter: blur(12px);
            transform: scale(0.84) translateY(8px);
        }
        .intro-anim.active .intro-card {
            animation: introCardPop 1.12s cubic-bezier(.2,.9,.24,1) both;
        }
        .intro-card.go-phase {
            border-color: rgba(255,240,170,0.42);
            background: linear-gradient(135deg, rgba(18,18,10,0.96), rgba(58,38,10,0.88) 48%, rgba(18,24,34,0.92));
            box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 24px rgba(255,214,102,0.26), 0 0 56px rgba(255,138,0,0.18), 0 18px 42px rgba(0,0,0,0.34);
        }
        .intro-card.go-phase .intro-kicker {
            color: rgba(255,236,184,0.96);
            text-shadow: 0 0 16px rgba(255,184,0,0.24);
        }
        .intro-card.go-phase .intro-main {
            color: #fff5d8;
            text-shadow: 0 0 16px rgba(255,255,255,0.18), 0 0 26px rgba(255,214,102,0.22), 0 0 40px rgba(255,138,0,0.18);
        }
        .intro-card.go-phase .intro-sub {
            color: rgba(255,241,212,0.92);
        }
        .intro-kicker {
            display: block;
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.28em;
            color: rgba(194,255,245,0.94);
            text-transform: uppercase;
            text-shadow: 0 0 16px rgba(0,229,176,0.22);
        }
        .intro-main {
            display: block;
            font-size: 30px;
            font-weight: 1000;
            line-height: 0.96;
            letter-spacing: 0.05em;
            text-shadow: 0 0 16px rgba(255,255,255,0.18), 0 0 28px rgba(0,229,176,0.20), 0 0 42px rgba(0,180,255,0.18);
        }
        .intro-sub {
            display: block;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            color: rgba(228,247,255,0.9);
        }

        .panel-secondary { transition: opacity 0.2s ease; }

        .meta-drawer {
            display: none;
            background: color-mix(in srgb, var(--panel) 92%, transparent);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 18px;
            box-shadow: 0 14px 28px rgba(0,0,0,0.24);
            overflow: hidden;
            transition: width 0.22s ease, transform 0.22s ease, opacity 0.22s ease, border-radius 0.22s ease;
        }
        .meta-drawer-toggle {
            width: 100%;
            border: 0;
            outline: 0;
            appearance: none;
            list-style: none;
            cursor: pointer;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--text);
            font-size: 13px;
            font-weight: 800;
            background: transparent;
            text-align: left;
        }
        .meta-drawer-toggle::-webkit-details-marker { display: none; }
        .meta-summary-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }
        .meta-summary-icon {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: inline-grid;
            place-items: center;
            flex: 0 0 auto;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, transparent), color-mix(in srgb, var(--accent-2) 70%, transparent));
            color: #041410;
            box-shadow: 0 8px 16px rgba(0,0,0,0.18);
            font-size: 15px;
            position: relative;
            overflow: hidden;
        }
        .meta-summary-icon.t-block-icon::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 2px;
            background: linear-gradient(180deg, rgba(244,248,255,0.98), rgba(150,214,255,0.92));
            box-shadow:
                -7px 0 0 rgba(210,241,255,0.94),
                7px 0 0 rgba(210,241,255,0.94),
                0 7px 0 rgba(210,241,255,0.94),
                0 0 10px rgba(122,156,255,0.26),
                -7px 0 10px rgba(122,156,255,0.18),
                7px 0 10px rgba(122,156,255,0.18),
                0 7px 10px rgba(122,156,255,0.18);
            transform: translateY(-1px);
        }
        .meta-summary-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .meta-summary-copy strong {
            font-size: 13px;
            line-height: 1.1;
        }
        .meta-summary-copy span { color: var(--muted); font-size: 11px; font-weight: 700; }
        .meta-drawer-toggle::after {
            content: '⌄';
            color: var(--accent);
            font-size: 16px;
            line-height: 1;
            transition: transform 0.2s ease;
        }
        .meta-drawer.open .meta-drawer-toggle::after { transform: rotate(180deg); }
        .meta-drawer-body {
            padding: 0 12px 12px;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        .meta-chip {
            border-radius: 14px;
            background: var(--panel-2);
            border: 1px solid var(--border);
            padding: 10px 10px;
            min-height: 58px;
        }
        .meta-chip .label {
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.12em;
        }
        .meta-chip .value {
            margin-top: 6px;
            color: var(--accent-2);
            font-size: 14px;
            font-weight: 900;
        }
        .control-option-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        .control-option-row.secondary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .option-btn {
            min-height: 42px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.08);
            background: color-mix(in srgb, var(--panel-2) 82%, transparent);
            color: var(--text);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.02em;
            box-shadow: 0 8px 18px rgba(0,0,0,0.16);
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .option-btn.active {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent-2) 34%, transparent));
            border-color: rgba(170,255,241,0.28);
            color: #f8ffff;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 18px rgba(0,194,255,0.18), 0 10px 20px rgba(0,0,0,0.18);
        }
        .option-btn:active {
            transform: translateY(1px) scale(0.98);
        }
        .control-option-stack {
            margin-top: 10px;
        }
        .controls-scale-card {
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.08);
            background: color-mix(in srgb, var(--panel-2) 78%, transparent);
            box-shadow: 0 10px 20px rgba(0,0,0,0.14);
            padding: 10px;
        }
        .controls-scale-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 900;
        }
        .controls-scale-head span {
            color: var(--text);
        }
        .controls-scale-head strong {
            color: var(--accent-2);
            font-size: 13px;
            letter-spacing: 0.04em;
        }
        .controls-scale-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
            margin-top: 8px;
        }
        .controls-scale-btn {
            min-height: 40px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(10,18,30,0.56);
            color: var(--text);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.02em;
            box-shadow: 0 8px 16px rgba(0,0,0,0.14);
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .controls-scale-btn.active {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent-2) 34%, transparent));
            border-color: rgba(170,255,241,0.28);
            color: #f8ffff;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 18px rgba(0,194,255,0.16), 0 10px 18px rgba(0,0,0,0.16);
        }
        .controls-scale-btn:active {
            transform: translateY(1px) scale(0.98);
        }
        body.beginner-assist .board-shell {
            box-shadow: 0 0 0 1px rgba(170,255,241,0.10), 0 0 22px rgba(0,229,176,0.10), var(--shadow);
        }
        body.beginner-assist .panel,
        body.beginner-assist .next-panel {
            border-color: rgba(170,255,241,0.18);
            box-shadow: 0 10px 22px rgba(0,0,0,0.18), 0 0 18px rgba(0,194,255,0.08);
        }
        body.beginner-assist .hint {
            color: rgba(195,255,246,0.92);
        }

        .overlay, .modal {
            position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
            background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(4px); z-index: 32;
            padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .modal { display: none; z-index: 34; }
        body.ui-popup-active .controls,
        body.ui-popup-active .focus-toggle,
        body.ui-popup-active .board-shell > .side-column,
        body.ui-popup-active .meta-drawer,
        body.ui-popup-active .fx-banner,
        body.ui-popup-active .mini-hud-toast,
        body.meta-popup-open .controls,
        body.meta-popup-open .focus-toggle,
        body.meta-popup-open .board-shell > .side-column,
        body.meta-popup-open .fx-banner,
        body.meta-popup-open .mini-hud-toast {
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(6px) scale(0.96);
        }
        body.ui-popup-active .controls,
        body.meta-popup-open .controls {
            display: grid;
        }

        /* ── 오버레이 활성 시 조작패드 강제 숨김 (JS 의존 없이 CSS만으로도 동작) ── */
        body.overlay-active .controls,
        body.overlay-active .meta-drawer,
        body.overlay-active .focus-toggle {
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(6px) scale(0.96);
        }

        /* ── 블록 축소 시 보드 전체화면 ─────────────────────────────────────── */
        body.block-fullscreen .board-shell {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100dvh !important;
            height: 100vh !important; /* dvh 미지원 폴백 */
            z-index: 20 !important;
            border-radius: 0 !important;
            border: none !important;
            max-width: none !important;
            max-height: none !important;
            padding: 0 !important;
            margin: 0 !important;
            grid-template-columns: 1fr !important;
            gap: 0 !important;
            background: var(--board-bg, #05070c) !important;
        }
        /* 보드 캔버스가 전체를 채우도록 */
        body.block-fullscreen #tetris {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
        }
        /* HOLD·NEXT 사이드 패널 숨김 (캔버스만 표시) */
        body.block-fullscreen .board-shell > .side-column {
            display: none !important;
        }
        /* 컨트롤·오버레이·모달은 보드 위에 유지 */
        body.block-fullscreen .controls      { z-index: 25 !important; }
        body.block-fullscreen #overlay       { z-index: 32 !important; }
        body.block-fullscreen #gameover-modal{ z-index: 34 !important; }

        /* ── 게임 오버 후 팝업 없는 유휴 상태 ─────────────────────────────── */
        body.gameover-idle .controls {
            opacity: 0.08 !important;
            pointer-events: none !important;
            filter: blur(1px);
            transition: opacity 0.4s ease, filter 0.4s ease;
        }
        body.gameover-idle .meta-drawer {
            opacity: 0.3;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        body.gameover-idle .focus-toggle {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        /* 보드 위 "탭하여 계속" 힌트 오버레이 */
        body.gameover-idle .board-shell canvas#tetris {
            opacity: 0.55;
            transition: opacity 0.4s ease;
        }
        body.gameover-idle .board-shell::after {
            content: '탭하여 계속';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 6;
            padding: 10px 22px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(8, 16, 28, 0.88), rgba(12, 28, 48, 0.76));
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: rgba(240, 250, 255, 0.92);
            font-size: 15px;
            font-weight: 900;
            letter-spacing: 0.12em;
            backdrop-filter: blur(8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255,255,255,0.06);
            pointer-events: none;
            animation: gameoverIdlePulse 2.2s ease-in-out infinite;
        }
        @keyframes gameoverIdlePulse {
            0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
            50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
        }

        .overlay-card {
            --popup-max-width: 420px;
            --popup-max-height: 420px;

            width: min(100%, 420px);
            max-width: var(--popup-max-width);
            max-height: var(--popup-max-height);
            min-height: 0;
            margin: auto 0;
            background: color-mix(in srgb, var(--panel) 96%, transparent);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 20px;
            padding: 22px;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            overflow: auto;
            isolation: isolate;
            overscroll-behavior: contain;
        }
        .overlay-card::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.22s ease;
            z-index: -1;
        }
        .overlay-card.brand-start,
        .overlay-card.brand-gameover {
            width: min(100%, 440px);
            max-width: var(--popup-max-width);
            border-color: rgba(170,255,241,0.22);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 28px rgba(0,229,176,0.14), 0 0 62px rgba(0,180,255,0.12), var(--shadow);
        }

        /* ── 브랜드 시작 오버레이 버튼 스타일 개선 ─────────────────────────────── */
        .overlay-card.brand-start .overlay-actions {
            flex-direction: column;
            gap: 9px;
        }
        .overlay-card.brand-start .overlay-btn {
            width: 100%;
            border-radius: 14px;
            font-size: 15px;
            padding: 13px 18px;
            letter-spacing: 0.02em;
            transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.15s ease;
        }
        .overlay-card.brand-start .overlay-btn:active {
            transform: scale(0.97);
        }
        .overlay-card.brand-start .overlay-btn.primary {
            font-size: 18px;
            padding: 16px 18px;
            font-weight: 900;
            letter-spacing: 0.06em;
            box-shadow: 0 0 24px rgba(0,229,176,0.28);
        }
        .overlay-card.brand-start .overlay-btn.secondary {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
            color: rgba(220,240,255,0.86);
        }
        .overlay-card.brand-start .overlay-btn.secondary:active {
            background: rgba(255,255,255,0.10);
        }
        .overlay-card.brand-start::before,
        .overlay-card.brand-gameover::before {
            opacity: 1;
            background:
                radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 42%),
                linear-gradient(135deg, rgba(7,16,28,0.92), rgba(12,34,52,0.82) 46%, rgba(13,24,40,0.9)),
                url('https://www.genspark.ai/api/files/s/THgGSAn4');
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: auto, auto, 44% auto;
            background-position: center top, center center, right 16px bottom 14px;
        }
        .overlay-card.brand-gameover::before {
            background:
                radial-gradient(circle at top, rgba(255,255,255,0.10), transparent 42%),
                linear-gradient(135deg, rgba(18,10,18,0.94), rgba(40,14,32,0.88) 46%, rgba(15,22,42,0.92)),
                url('https://www.genspark.ai/api/files/s/THgGSAn4');
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: auto, auto, 40% auto;
            background-position: center top, center center, right 16px bottom 12px;
        }
        .overlay-kicker {
            display: none;
            margin: 0 0 8px;
            font-size: 10px;
            letter-spacing: 0.24em;
            font-weight: 900;
            text-transform: uppercase;
            color: rgba(220,248,255,0.82);
        }
        .overlay-card.brand-start .overlay-kicker,
        .overlay-card.brand-gameover .overlay-kicker {
            display: block;
        }
        .overlay-card.brand-start .overlay-kicker {
            color: rgba(195,255,246,0.96);
            text-shadow: 0 0 16px rgba(0,229,176,0.22);
        }
        .overlay-card.brand-gameover .overlay-kicker {
            color: rgba(255,212,224,0.9);
            text-shadow: 0 0 16px rgba(255,102,122,0.16);
        }

        .overlay-card h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; word-break: keep-all; }
        .overlay-card.brand-start h2,
        .overlay-card.brand-gameover h2 {
            font-size: 28px;
            letter-spacing: 0.02em;
        }
        .overlay-card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.45; }
        .overlay-card.brand-start p,
        .overlay-card.brand-gameover p {
            color: rgba(233,243,255,0.9);
        }
        .overlay-stats {
            display: none;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin: 0 0 12px;
            text-align: left;
        }
        .overlay-analysis {
            display: none;
            margin: 0 0 16px;
            padding: 13px 14px 12px;
            border-radius: 16px;
            text-align: left;
            background: linear-gradient(135deg, rgba(10, 24, 40, 0.88), rgba(18, 34, 54, 0.80));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: 0 12px 28px rgba(0,0,0,0.24);
        }
        .overlay-analysis .analysis-kicker {
            color: rgba(198, 232, 255, 0.74);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.18em;
        }
        .overlay-analysis .analysis-main {
            margin-top: 6px;
            color: #f6fbff;
            font-size: 18px;
            font-weight: 900;
            letter-spacing: -0.01em;
        }
        .overlay-analysis .analysis-copy {
            margin-top: 6px;
            color: rgba(233,243,255,0.86);
            font-size: 13px;
            line-height: 1.48;
        }
        .overlay-analysis .analysis-mission {
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(255,255,255,0.10);
            color: rgba(195,255,246,0.92);
            font-size: 12px;
            font-weight: 800;
            line-height: 1.4;
        }
        .overlay-analysis .analysis-copy.compact {
            margin-top: 10px;
            font-size: 12px;
            color: rgba(233,243,255,0.78);
        }
        .overlay-analysis .analysis-scoreboard {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .overlay-analysis .analysis-score {
            padding: 10px 11px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--panel-2) 76%, transparent);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .overlay-analysis .analysis-score span {
            display: block;
            color: rgba(233,243,255,0.66);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.12em;
        }
        .overlay-analysis .analysis-score strong {
            display: block;
            margin-top: 6px;
            color: #f6fbff;
            font-size: 18px;
            font-weight: 900;
        }
        .overlay-analysis .analysis-badges {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .overlay-analysis .analysis-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 7px 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(86,160,255,0.16), rgba(0,229,176,0.16));
            border: 1px solid rgba(255,255,255,0.10);
            color: #f7fbff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.01em;
        }
        .overlay-analysis .analysis-revenge {
            position: relative;
            overflow: hidden;
            margin-top: 12px;
            padding: 13px 13px 12px;
            border-radius: 16px;
            background: linear-gradient(145deg, rgba(17, 18, 34, 0.96), rgba(17, 34, 54, 0.90));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 28px rgba(0,0,0,0.20);
        }
        .overlay-analysis .analysis-revenge::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 122, 89, 0.18), transparent 34%),
                radial-gradient(circle at left bottom, rgba(0, 229, 176, 0.12), transparent 32%);
            pointer-events: none;
        }
        .overlay-analysis .analysis-revenge.revenge-tone-newbest::before {
            background:
                radial-gradient(circle at top right, rgba(255, 224, 122, 0.20), transparent 34%),
                radial-gradient(circle at left bottom, rgba(0, 229, 176, 0.16), transparent 34%);
        }
        .overlay-analysis .analysis-revenge.revenge-tone-close::before {
            background:
                radial-gradient(circle at top right, rgba(255, 112, 148, 0.18), transparent 34%),
                radial-gradient(circle at left bottom, rgba(86, 160, 255, 0.14), transparent 32%);
        }
        .overlay-analysis .analysis-revenge > * {
            position: relative;
            z-index: 1;
        }
        .overlay-analysis .analysis-revenge .revenge-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .overlay-analysis .analysis-revenge .revenge-kicker {
            color: rgba(255, 228, 210, 0.78);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.16em;
        }
        .overlay-analysis .analysis-revenge .revenge-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 7px 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 124, 100, 0.18), rgba(255, 77, 125, 0.14));
            border: 1px solid rgba(255,255,255,0.10);
            color: #fff7f2;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.03em;
        }
        .overlay-analysis .analysis-revenge.revenge-tone-newbest .revenge-badge {
            background: linear-gradient(135deg, rgba(255, 224, 122, 0.18), rgba(0, 229, 176, 0.16));
            color: #fffdea;
        }
        .overlay-analysis .analysis-revenge .revenge-main {
            margin-top: 8px;
            color: #ffffff;
            font-size: 17px;
            font-weight: 900;
            line-height: 1.34;
        }
        .overlay-analysis .analysis-revenge .revenge-copy {
            margin-top: 6px;
            color: rgba(233,243,255,0.86);
            font-size: 12px;
            line-height: 1.5;
        }
        .overlay-analysis .analysis-revenge .revenge-grid {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .overlay-analysis .analysis-revenge .revenge-goal-card {
            min-height: 98px;
            padding: 11px 11px 10px;
            border-radius: 14px;
            background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .overlay-analysis .analysis-revenge .revenge-goal-card.accent {
            background: linear-gradient(155deg, rgba(0,229,176,0.10), rgba(86,160,255,0.10));
        }
        .overlay-analysis .analysis-revenge .revenge-goal-card span {
            color: rgba(227,234,246,0.66);
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.14em;
        }
        .overlay-analysis .analysis-revenge .revenge-goal-card strong {
            color: #ffffff;
            font-size: 17px;
            font-weight: 900;
            line-height: 1.22;
        }
        .overlay-analysis .analysis-revenge .revenge-goal-card em {
            color: rgba(255, 228, 206, 0.82);
            font-size: 11px;
            font-style: normal;
            line-height: 1.42;
        }
        .overlay-analysis .analysis-revenge .revenge-footer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255,255,255,0.10);
            color: rgba(195,255,246,0.92);
            font-size: 11px;
            font-weight: 800;
            line-height: 1.45;
        }
        .overlay-card.brand-gameover.revenge-tone-ready #start-btn,
        .overlay-card.brand-gameover.revenge-tone-close #start-btn,
        .overlay-card.brand-gameover.revenge-tone-newbest #start-btn {
            color: #fffefc;
            background: linear-gradient(135deg, #ff7b66, #ff4d7d 55%, #7d7bff);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 18px 36px rgba(255, 77, 125, 0.24), 0 0 32px rgba(125, 123, 255, 0.18);
            animation: revengeCtaPulse 1.8s ease-in-out infinite;
        }
        .overlay-card.brand-gameover.revenge-tone-newbest #start-btn {
            background: linear-gradient(135deg, #00e5b0, #56a0ff 58%, #ffe072);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 18px 36px rgba(0, 194, 255, 0.24), 0 0 32px rgba(0, 229, 176, 0.18);
        }
        .overlay-quick-hint {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 999px;
            text-align: center;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #f9fcff;
            background: linear-gradient(135deg, rgba(86, 160, 255, 0.22), rgba(0, 229, 176, 0.22));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: 0 10px 22px rgba(0,0,0,0.22);
        }
        .overlay-card.quick-restart .overlay-quick-hint {
            display: block;
        }
        .overlay-card.show-stats .overlay-stats {
            display: grid;
        }
        .overlay-card.show-stats .overlay-analysis {
            display: block;
        }
        .overlay-stat {
            border-radius: 12px;
            padding: 10px 10px;
            background: color-mix(in srgb, var(--panel-2) 72%, transparent);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .overlay-stat .label {
            color: rgba(233,243,255,0.62);
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.14em;
        }
        .overlay-stat .value {
            margin-top: 6px;
            color: #f6fbff;
            font-size: 15px;
            font-weight: 900;
        }

        .overlay-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

        /* ── ① 레벨 선택기 ──────────────────────────────────────────────────── */
        .level-selector {
            margin: 0 0 14px;
        }
        .level-selector-head {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.14em;
            color: var(--muted);
            margin-bottom: 8px;
            text-align: left;
        }
        .level-selector-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
        }
        .level-btn {
            aspect-ratio: 1;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--panel-2);
            color: var(--muted);
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
            padding: 0;
        }
        .level-btn:active  { transform: scale(0.90); }
        .level-btn.active  {
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent) 56%, transparent),
                color-mix(in srgb, var(--accent-2) 44%, transparent));
            border-color: rgba(170,255,241,0.40);
            color: #f0fffc;
            box-shadow: 0 0 10px rgba(0,229,176,0.18);
        }
        /* 레벨 5 이상: 경고 색조 */
        .level-btn[data-level="6"].active,
        .level-btn[data-level="7"].active,
        .level-btn[data-level="8"].active { border-color: rgba(255,204,0,0.40); color: var(--warn); background: color-mix(in srgb, var(--warn) 20%, transparent); }
        .level-btn[data-level="9"].active,
        .level-btn[data-level="10"].active { border-color: rgba(255,102,122,0.40); color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, transparent); }

        /* ── ② 볼륨 슬라이더 ────────────────────────────────────────────────── */
        .volume-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
        }
        .volume-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--muted);
            min-width: 32px;
            letter-spacing: 0.06em;
        }
        .volume-value {
            font-size: 11px;
            font-weight: 900;
            color: var(--accent-2);
            min-width: 36px;
            text-align: right;
        }
        input[type=range].volume-slider {
            flex: 1;
            height: 4px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255,255,255,0.12);
            border-radius: 999px;
            outline: none;
            cursor: pointer;
        }
        input[type=range].volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 8px rgba(0,229,176,0.30);
            cursor: pointer;
        }
        input[type=range].volume-slider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent);
            border: none;
            cursor: pointer;
        }
        .volume-card {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.08);
            background: color-mix(in srgb, var(--panel-2) 78%, transparent);
            box-shadow: 0 10px 20px rgba(0,0,0,0.14);
        }
        .volume-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 900;
            margin-bottom: 4px;
        }

        .overlay-btn {
            border: none; cursor: pointer; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 800;
        }

        .overlay-btn.primary { background: var(--accent); color: #03150f; }
        .overlay-btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

        .menu-list { display: grid; gap: 8px; margin-bottom: 16px; }
        .menu-item {
            background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; text-align: left;
        }
        .menu-item strong { display: block; margin-bottom: 2px; }
        .menu-item span { color: var(--muted); font-size: 12px; }

        .overlay-retry-btn,
        .overlay-share-btn,
        .overlay-card-save-btn {
            display: none;
        }
        .overlay-card.brand-gameover .overlay-retry-btn,
        .overlay-card.can-share .overlay-share-btn,
        .overlay-card.can-share .overlay-card-save-btn,
        .gameover-card .overlay-retry-btn,
        .gameover-card.can-share .overlay-share-btn,
        .gameover-card.can-share .overlay-card-save-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 168px;
            min-height: 48px;
            backdrop-filter: blur(10px);
        }
        .overlay-card.brand-gameover #overlay-restart-btn {
            display: none;
        }
        .overlay-card.can-share .overlay-actions,
        .gameover-card.can-share .overlay-actions {
            gap: 10px;
        }
        .overlay-retry-btn {
            color: #fffefc;
            background: linear-gradient(135deg, #ff8e63, #ff4d7d 58%, #7a7cff);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 14px 28px rgba(255, 77, 125, 0.24), 0 0 24px rgba(122, 124, 255, 0.16);
        }
        .overlay-share-btn {
            background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.18);
        }
        .overlay-card-save-btn {
            background: linear-gradient(135deg, rgba(86, 160, 255, 0.26), rgba(0, 229, 176, 0.22));
            border: 1px solid rgba(170,255,241,0.22);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(0, 194, 255, 0.14);
        }
        .gameover-choice-card,
        .gameover-card {
            width: min(100%, 420px);
            max-width: var(--popup-max-width);
            max-height: var(--popup-max-height);
        }
        .gameover-choice-card {
            display: none;
            text-align: left;
            border-color: rgba(255, 196, 139, 0.22);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 22px rgba(255, 124, 100, 0.12), var(--shadow);
        }
        .gameover-choice-card::before {
            opacity: 1;
            background:
                radial-gradient(circle at top right, rgba(255,124,100,0.18), transparent 34%),
                radial-gradient(circle at left bottom, rgba(125,123,255,0.14), transparent 30%),
                linear-gradient(150deg, rgba(18, 20, 37, 0.96), rgba(27, 17, 36, 0.92));
        }
        .gameover-choice-kicker {
            display: block;
            color: rgba(255, 224, 198, 0.9);
            text-shadow: 0 0 16px rgba(255, 124, 100, 0.18);
        }
        .gameover-choice-summary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 14px 0 16px;
        }
        .gameover-choice-chip {
            min-height: 78px;
            padding: 12px 12px 10px;
            border-radius: 16px;
            background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 6px;
        }
        .gameover-choice-chip span {
            color: rgba(227, 234, 246, 0.68);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.14em;
        }
        .gameover-choice-chip strong {
            color: #ffffff;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.12;
        }
        .gameover-choice-actions {
            display: grid;
            gap: 10px;
            margin-top: 2px;
        }
        .gameover-choice-primary,
        .gameover-choice-secondary {
            min-height: 52px;
            justify-content: center;
        }
        .gameover-choice-secondary {
            border-color: rgba(170,255,241,0.16);
            background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(86,160,255,0.10));
        }
        .gameover-choice-hint {
            display: block;
            margin-top: 12px;
        }
        .gameover-card {
            display: none;
        }
        .gameover-floating-menu {
            position: fixed;
            top: 50%;
            right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
            transform: translateY(-50%);
            z-index: 36;
            width: min(108px, calc(100vw - 18px));
            display: none;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }
        .gameover-floating-menu.show {
            display: flex;
        }
        .gameover-floating-menu > * {
            pointer-events: auto;
        }
        .gameover-floating-shell,
        .gameover-floating-retry {
            border: none;
            cursor: pointer;
            border-radius: 18px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .gameover-floating-shell {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            width: 100%;
            padding: 11px 10px 12px;
            text-align: left;
            color: #f9fcff;
            background: linear-gradient(160deg, rgba(20, 22, 40, 0.92), rgba(25, 31, 56, 0.88));
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 0 22px rgba(125, 123, 255, 0.12);
        }
        .gameover-floating-menu.revenge-tone-newbest .gameover-floating-shell {
            background: linear-gradient(160deg, rgba(11, 34, 41, 0.94), rgba(19, 31, 55, 0.90));
            box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 0 24px rgba(0, 229, 176, 0.14);
        }
        .gameover-floating-menu.revenge-tone-close .gameover-floating-shell {
            background: linear-gradient(160deg, rgba(33, 18, 36, 0.94), rgba(24, 28, 56, 0.90));
        }
        .gameover-floating-badge {
            display: inline-flex;
            align-items: center;
            padding: 5px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 124, 100, 0.24), rgba(255, 77, 125, 0.18));
            border: 1px solid rgba(255,255,255,0.10);
            color: #fff8f4;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .gameover-floating-menu.revenge-tone-newbest .gameover-floating-badge {
            background: linear-gradient(135deg, rgba(255, 224, 122, 0.24), rgba(0, 229, 176, 0.18));
            color: #fffdea;
        }
        .gameover-floating-title {
            color: #ffffff;
            font-size: 13px;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
        .gameover-floating-goal {
            color: rgba(255,255,255,0.92);
            font-size: 15px;
            font-weight: 900;
            line-height: 1.15;
        }
        .gameover-floating-copy {
            color: rgba(223, 233, 247, 0.82);
            font-size: 10px;
            line-height: 1.35;
        }
        .gameover-floating-retry {
            width: 100%;
            min-height: 44px;
            padding: 10px 12px;
            color: #fffefc;
            font-size: 13px;
            font-weight: 900;
            background: linear-gradient(135deg, #ff8e63, #ff4d7d 58%, #7a7cff);
            box-shadow: 0 14px 28px rgba(255, 77, 125, 0.24), 0 0 24px rgba(122, 124, 255, 0.16);
        }
        .gameover-floating-shell:active,
        .gameover-floating-retry:active {
            transform: scale(0.98);
        }
        body.compact-popup-ui .gameover-floating-menu {
            right: max(8px, calc(env(safe-area-inset-right, 0px) + 6px));
            width: min(102px, calc(100vw - 14px));
        }
        @media (max-width: 420px) {
            .gameover-floating-menu {
                top: 54%;
                width: 96px;
            }
            .gameover-floating-shell {
                padding: 10px 9px 11px;
                gap: 5px;
                border-radius: 16px;
            }
            .gameover-floating-title {
                font-size: 12px;
            }
            .gameover-floating-goal {
                font-size: 14px;
            }
            .gameover-floating-copy {
                font-size: 9px;
            }
            .gameover-floating-retry {
                min-height: 42px;
                padding: 9px 10px;
                border-radius: 16px;
                font-size: 12px;
            }
        }
        .tutorial-card {
            width: min(100%, 360px);
            max-width: var(--popup-max-width);
            max-height: var(--popup-max-height);
            border-color: rgba(170,255,241,0.20);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(0,229,176,0.10), var(--shadow);
        }
        .tutorial-card .overlay-kicker,
        .tutorial-card .tutorial-kicker {
            display: block;
            color: rgba(195,255,246,0.96);
            text-shadow: 0 0 16px rgba(0,229,176,0.18);
        }
        .tutorial-step-indicator {
            margin: 0 0 14px;
            color: rgba(233,243,255,0.78);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
        }
        .tutorial-subactions {
            margin-top: 10px;
        }
        .exit-card {
            width: min(100%, 392px);
            max-width: var(--popup-max-width);
            border-color: rgba(255, 188, 124, 0.28);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 26px rgba(255, 132, 85, 0.12), 0 14px 34px rgba(0,0,0,0.30);
            text-align: left;
        }
        .exit-card::before {
            opacity: 1;
            background:
                radial-gradient(circle at top left, rgba(255,190,120,0.22), transparent 38%),
                radial-gradient(circle at right bottom, rgba(0,194,255,0.16), transparent 34%),
                linear-gradient(145deg, rgba(17,22,36,0.96), rgba(24,15,25,0.92) 56%, rgba(11,24,36,0.94));
        }
        .exit-kicker {
            display: block;
            color: rgba(255, 226, 196, 0.92);
            text-shadow: 0 0 16px rgba(255, 145, 77, 0.20);
        }
        .exit-destination-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 2px 0 12px;
            padding: 7px 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 140, 74, 0.22), rgba(255, 82, 82, 0.18));
            border: 1px solid rgba(255,255,255,0.12);
            color: #fff6ef;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
        }
        .exit-card h2 {
            margin-bottom: 8px;
        }
        .exit-card p {
            margin-bottom: 14px;
            color: rgba(244, 247, 255, 0.84);
        }
        .exit-summary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }
        .exit-summary-item {
            min-height: 74px;
            padding: 12px 12px 11px;
            border-radius: 16px;
            background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 6px;
        }
        .exit-summary-item span {
            color: rgba(227, 234, 246, 0.68);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.14em;
        }
        .exit-summary-item strong {
            color: #ffffff;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.1;
        }
        .exit-summary-item em {
            color: rgba(255, 220, 190, 0.82);
            font-size: 11px;
            font-style: normal;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .exit-actions {
            justify-content: stretch;
        }
        .exit-actions .overlay-btn {
            flex: 1 1 150px;
            min-height: 48px;
        }
        .overlay-btn.exit-leave-btn {
            color: #fff7f6;
            background: linear-gradient(135deg, #ff7c64, #ff4d7d);
            box-shadow: 0 12px 24px rgba(255, 77, 125, 0.22);
        }

        @media (max-width: 640px) {
            .overlay, .modal {
                position: fixed;
                inset: 0;
                padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
            }
        }

        body.compact-popup-ui .overlay,
        body.compact-popup-ui .modal {
            padding: calc(env(safe-area-inset-top, 0px) + 6px) 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
        }
        body.compact-popup-ui .overlay-card,
        body.compact-popup-ui .overlay-card.brand-start,
        body.compact-popup-ui .overlay-card.brand-gameover,
        body.compact-popup-ui .tutorial-card {
            width: 100%;
            padding: 14px 13px 12px;
            border-radius: 16px;
        }
        body.compact-popup-ui .overlay-card h2,
        body.compact-popup-ui .overlay-card.brand-start h2,
        body.compact-popup-ui .overlay-card.brand-gameover h2 {
            font-size: 20px;
            margin-bottom: 6px;
        }
        body.compact-popup-ui .overlay-card p,
        body.compact-popup-ui .overlay-card.brand-start p,
        body.compact-popup-ui .overlay-card.brand-gameover p {
            font-size: 12px;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        body.compact-popup-ui .exit-summary {
            gap: 8px;
            margin-bottom: 12px;
        }
        body.compact-popup-ui .exit-summary-item {
            min-height: 64px;
            border-radius: 14px;
            padding: 10px;
        }
        body.compact-popup-ui .exit-summary-item strong {
            font-size: 16px;
        }
        body.compact-popup-ui .overlay-stats,
        body.compact-popup-ui .overlay-card.show-stats .overlay-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            margin-bottom: 8px;
        }
        body.compact-popup-ui .overlay-stat {
            padding: 8px 8px;
        }
        body.compact-popup-ui .overlay-stat .value {
            font-size: 14px;
        }
        body.compact-popup-ui .overlay-analysis {
            padding: 10px 11px;
            margin-bottom: 10px;
            border-radius: 13px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-main {
            font-size: 15px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-copy,
        body.compact-popup-ui .overlay-analysis .analysis-mission,
        body.compact-popup-ui .overlay-analysis .analysis-copy.compact {
            font-size: 11px;
            line-height: 1.42;
        }
        body.compact-popup-ui .overlay-analysis .analysis-scoreboard {
            gap: 6px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-score {
            padding: 8px 9px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-score strong {
            font-size: 15px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-badges {
            gap: 5px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-badge {
            width: 100%;
            justify-content: center;
            font-size: 10px;
            padding: 6px 8px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge {
            margin-top: 9px;
            padding: 10px 10px 9px;
            border-radius: 13px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-main {
            font-size: 14px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-copy,
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-goal-card em,
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-footer {
            font-size: 10px;
            line-height: 1.4;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-grid {
            grid-template-columns: 1fr;
            gap: 6px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-goal-card {
            min-height: 0;
            padding: 9px;
        }
        body.compact-popup-ui .overlay-analysis .analysis-revenge .revenge-goal-card strong {
            font-size: 14px;
        }
        body.compact-popup-ui .menu-list {
            gap: 6px;
            margin-bottom: 10px;
        }
        body.compact-popup-ui .menu-item {
            padding: 9px 10px;
        }
        body.compact-popup-ui .menu-item span,
        body.compact-popup-ui .tutorial-step-indicator {
            font-size: 11px;
        }
        body.compact-popup-ui .overlay-actions {
            gap: 8px;
        }
        body.compact-popup-ui .overlay-btn {
            min-height: 42px;
            padding: 10px 12px;
            font-size: 13px;
        }
        body.compact-popup-ui .overlay-quick-hint {
            margin-top: 8px;
            padding: 8px 10px;
            font-size: 11px;
        }

        @media (max-width: 480px) {
            .overlay, .modal {
                padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
            }
            .overlay-card,
            .overlay-card.brand-start,
            .overlay-card.brand-gameover,
            .tutorial-card {
                width: 100%;
                max-width: var(--popup-max-width);
                max-height: var(--popup-max-height);
                padding: 18px 16px;
                border-radius: 18px;
            }
            .overlay-card h2,
            .overlay-card.brand-start h2,
            .overlay-card.brand-gameover h2 {
                font-size: 22px;
                margin-bottom: 6px;
            }
            .overlay-card p {
                font-size: 13px;
                line-height: 1.45;
                margin-bottom: 12px;
            }
            .overlay-stats,
            .overlay-card.show-stats .overlay-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                margin-bottom: 10px;
            }
            .overlay-analysis {
                padding: 11px 12px;
                margin-bottom: 12px;
                border-radius: 14px;
            }
            .overlay-analysis .analysis-main {
                font-size: 16px;
            }
            .overlay-analysis .analysis-copy,
            .overlay-analysis .analysis-mission {
                font-size: 12px;
            }
            .overlay-analysis .analysis-scoreboard {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }
            .overlay-analysis .analysis-score {
                padding: 9px 10px;
            }
            .overlay-analysis .analysis-score strong {
                font-size: 16px;
            }
            .overlay-analysis .analysis-badge {
                width: 100%;
                justify-content: center;
            }
            .overlay-analysis .analysis-revenge {
                padding: 10px 10px 9px;
                margin-top: 9px;
            }
            .overlay-analysis .analysis-revenge .revenge-main {
                font-size: 15px;
            }
            .overlay-analysis .analysis-revenge .revenge-copy,
            .overlay-analysis .analysis-revenge .revenge-goal-card em,
            .overlay-analysis .analysis-revenge .revenge-footer {
                font-size: 11px;
            }
            .overlay-analysis .analysis-revenge .revenge-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            .overlay-analysis .analysis-revenge .revenge-goal-card {
                min-height: 0;
                padding: 9px 10px;
            }
            .overlay-analysis .analysis-revenge .revenge-goal-card strong {
                font-size: 15px;
            }
            .overlay-stat {
                padding: 9px 8px;
            }
            .overlay-actions {
                flex-direction: column;
                gap: 10px;
            }
            .overlay-btn {
                width: 100%;
            }
            .menu-list {
                gap: 6px;
                margin-bottom: 12px;
            }
            .menu-item {
                padding: 10px;
            }
            .overlay-quick-hint {
                border-radius: 14px;
                padding: 10px;
                font-size: 11px;
            }
            .mission-slot {
                padding: 9px;
            }
            .mission-slot-head {
                flex-direction: column;
            }
            .mission-slot-head > span {
                white-space: normal;
            }
        }
        .mission-card {
            margin-top: 10px;
            padding: 12px 12px 11px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(0,229,176,0.10), rgba(86,160,255,0.12));
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 10px 22px rgba(0,0,0,0.16);
        }
        .mission-card.done {
            background: linear-gradient(135deg, rgba(0,229,176,0.18), rgba(255,224,102,0.16));
            border-color: rgba(195,255,246,0.28);
        }
        .mission-card.active {
            border-color: rgba(170,255,241,0.18);
            box-shadow: 0 10px 22px rgba(0,0,0,0.16), 0 0 26px rgba(0,229,176,0.10);
        }
        .mission-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
        }
        .mission-head strong {
            font-size: 13px;
            color: #f6fbff;
        }
        .mission-head span {
            color: rgba(233,243,255,0.78);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.06em;
        }
        .mission-bar {
            margin-top: 10px;
            height: 8px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
        }
        .mission-bar span {
            display: block;
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            box-shadow: 0 0 16px rgba(0,229,176,0.22);
            transition: width 0.22s ease;
        }
        .mission-copy {
            margin-top: 9px;
            color: rgba(233,243,255,0.84);
            font-size: 12px;
            line-height: 1.45;
        }
        .mission-list {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }
        .mission-slot {
            padding: 10px 10px 9px;
            border-radius: 14px;
            background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .mission-slot.done {
            background: linear-gradient(155deg, rgba(0,229,176,0.14), rgba(255,224,102,0.12));
            border-color: rgba(195,255,246,0.20);
        }
        .mission-slot-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .mission-slot-head strong {
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: #f6fbff;
            font-size: 12px;
            line-height: 1.35;
        }
        .mission-slot-head > span {
            color: rgba(233,243,255,0.78);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }
        .mission-slot-badge {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 4px 7px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(86,160,255,0.18), rgba(0,229,176,0.16));
            border: 1px solid rgba(255,255,255,0.10);
            color: rgba(247,251,255,0.96);
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.08em;
        }
        .mission-slot-bar {
            margin-top: 8px;
            height: 6px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
        }
        .mission-slot-bar span {
            display: block;
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            box-shadow: 0 0 14px rgba(0,229,176,0.18);
        }
        .mission-slot-copy {
            margin-top: 8px;
            color: rgba(233,243,255,0.74);
            font-size: 11px;
            line-height: 1.42;
        }


        .rank-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
        .rank-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
        .rank-num { color: var(--warn); font-weight: 800; }
        .rank-date { color: var(--muted); font-size: 12px; }
        .rank-score { color: var(--accent); font-weight: 800; }

        /* ── 랭킹 모드 탭 ────────────────────────────────────────────────── */
        .rank-mode-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .rank-tab {
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--panel-2);
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .rank-tab.active {
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent) 40%, transparent),
                color-mix(in srgb, var(--accent-2) 32%, transparent));
            border-color: rgba(170,255,241,0.30);
            color: var(--text);
        }
        .rank-tab:active { transform: scale(0.96); }

        /* ── 닉네임 입력 ─────────────────────────────────────────────────── */
        .nickname-input {
            flex: 1;
            min-width: 0;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--panel-2);
            color: var(--text);
            font-size: 14px;
            font-weight: 700;
            outline: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .nickname-input::placeholder { color: var(--muted); font-weight: 400; }
        .nickname-input:focus {
            border-color: rgba(170,255,241,0.36);
            box-shadow: 0 0 0 3px rgba(0,229,176,0.10);
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }

        .btn {
            border: none; background: var(--panel-2); color: var(--text); border-radius: 14px; padding: 16px 10px; font-size: 17px;
            font-weight: 800; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,0.25); user-select: none; touch-action: manipulation;
            transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
        }

        .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
        .btn-main { grid-column: span 2; background: var(--accent); color: #03150f; }
        .btn-hold { background: var(--warn); color: #1f1a00; }

        .hint { color: var(--muted); font-size: 12px; text-align: center; line-height: 1.55; padding: 0 8px; }
        .danger { color: var(--danger) !important; }

        @keyframes fxBannerPop {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
            18% { opacity: 1; transform: translate(-50%, -54%) scale(1.03); }
            70% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -66%) scale(0.98); }
        }
        @keyframes revengeCtaPulse {
            0%, 100% { transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 18px 36px rgba(255, 77, 125, 0.24), 0 0 28px rgba(125, 123, 255, 0.16); }
            50% { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 22px 40px rgba(255, 77, 125, 0.30), 0 0 42px rgba(125, 123, 255, 0.22); }
        }
        @keyframes dangerPulse {
            0% { opacity: 0.18; }
            100% { opacity: 0.56; }
        }
        @keyframes feverShellPulse {
            0% { transform: translateZ(0) scale(1); }
            100% { transform: translateZ(0) scale(1.006); }
        }
        @keyframes feverAuraPulse {
            0% { opacity: 0.46; }
            100% { opacity: 0.96; }
        }
        @keyframes introFadeWrap {
            0% { opacity: 0; }
            12% { opacity: 1; }
            78% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes introBackdropPulse {
            0% { opacity: 0; transform: scale(0.94); }
            24% { opacity: 0.88; transform: scale(1.02); }
            100% { opacity: 0; transform: scale(1.06); }
        }
        @keyframes introShineSweep {
            0% { transform: rotate(12deg) translateX(-160%); }
            100% { transform: rotate(12deg) translateX(520%); }
        }
        @keyframes introCardPop {
            0% { opacity: 0; transform: scale(0.82) translateY(16px); filter: blur(6px); }
            20% { opacity: 1; transform: scale(1.04) translateY(-2px); filter: blur(0); }
            72% { opacity: 1; transform: scale(1) translateY(-6px); }
            100% { opacity: 0; transform: scale(0.98) translateY(-18px); }
        }
        @keyframes metaPopupIn {
            0% { opacity: 0; transform: translateY(-8px) scale(0.96); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes perfectClearFlash {
            0% { opacity: 0; transform: scale(0.96); }
            16% { opacity: 0.95; transform: scale(1); }
            42% { opacity: 0.42; transform: scale(1.03); }
            100% { opacity: 0; transform: scale(1.06); }
        }
        @keyframes b2bRingRotate {
            0% { filter: hue-rotate(0deg) saturate(1.02); }
            100% { filter: hue-rotate(360deg) saturate(1.18); }
        }
        @keyframes perfectRainbowRotate {
            0% { filter: hue-rotate(0deg) saturate(1.08) brightness(1); }
            100% { filter: hue-rotate(360deg) saturate(1.28) brightness(1.04); }
        }

        @media (max-width: 640px) {
            body {
                padding: max(4px, env(safe-area-inset-top, 0px)) 0 calc(8px + env(safe-area-inset-bottom, 0px));
            }
            .app {
                width: 100%;
                max-width: 100%;
                gap: 8px;
                padding-bottom: calc(var(--mobile-controls-space) + 10px + env(safe-area-inset-bottom, 0px));
            }
            body.game-focus {
                padding-top: env(safe-area-inset-top, 0px);
            }
            body.game-focus .app {
                gap: 0;
                padding-top: 0;
                padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
            }
            .topbar {
                padding: 8px 10px;
                border-radius: 16px;
            }
            .compact-title p {
                display: none;
            }
            .mini-btn {
                width: auto;
                min-height: 38px;
                font-size: 12px;
            }
            .icon-btn {
                width: 38px;
                min-width: 38px;
                font-size: 16px;
            }
            .status-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 5px;
            }
            .stat {
                padding: 7px 4px;
                border-radius: 12px;
            }
            .stat .label {
                font-size: 9px;
            }
            .stat .value {
                font-size: 16px;
                letter-spacing: -0.02em;
            }
            .board-shell {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
                width: 100%;
                padding: var(--board-shell-mobile-pad, 2px);
                align-items: stretch;
                border-radius: 18px;
            }
            body.game-focus .board-shell {
                width: 100vw;
                max-width: 100vw;
                min-height: calc(var(--app-vh) * 100);
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
                padding: 0;
                border-radius: 0;
                background:
                    radial-gradient(circle at 22% 16%, rgba(255,255,255,0.08), transparent 18%),
                    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 28%, rgba(0,0,0,0.12) 100%),
                    url('https://www.genspark.ai/api/files/s/THgGSAn4'),
                    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(180deg, color-mix(in srgb, var(--board-bg) 72%, #111827), color-mix(in srgb, var(--board-bg) 94%, #02040a));
                background-size: auto, auto, 56% auto, 24px 24px, 24px 24px, auto;
                background-position: center center, center center, center 58%, center center, center center, center center;
                background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
                box-shadow: none;
            }
            body.game-focus .board-shell > .side-column:first-child,
            body.game-focus .board-shell > .side-column:last-child {
                top: calc(env(safe-area-inset-top, 0px) + 6px);
                width: var(--mobile-side-width, 30px);
                z-index: 7;
                opacity: 0.92;
                filter: drop-shadow(0 8px 18px rgba(0,0,0,0.26));
                transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
            }
            body.game-focus.hold-next-hidden .board-shell > .side-column:first-child,
            body.game-focus.hold-next-hidden .board-shell > .side-column:last-child {
                opacity: 0;
                transform: translateY(-4px) scale(0.9);
            }
            body.game-focus.hold-next-peek .board-shell > .side-column:first-child,
            body.game-focus.hold-next-peek .board-shell > .side-column:last-child {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: drop-shadow(0 10px 22px rgba(0,0,0,0.30));
            }
            body.game-focus .board-shell > .side-column:first-child {
                left: calc(50% - (var(--board-fill-width, 100vw) / 2) + 2px);
            }
            body.game-focus .board-shell > .side-column:last-child {
                right: calc(50% - (var(--board-fill-width, 100vw) / 2) + 2px);
            }
            body.game-focus .board-shell .panel {
                min-height: 44px;
                padding: 5px 3px;
                border-radius: 16px;
                background: linear-gradient(180deg, rgba(8,16,28,0.90), rgba(10,20,36,0.78));
                border: 1px solid rgba(185, 233, 255, 0.18);
                backdrop-filter: blur(10px);
                box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
            }
            body.game-focus .board-shell .panel .label {
                display: block;
                margin-bottom: 3px;
                font-size: 7px;
                line-height: 1;
                color: rgba(236, 247, 255, 0.88);
                text-shadow: 0 1px 4px rgba(0,0,0,0.35);
            }
            body.game-focus .board-shell .next-panel,
            #next-panel.free-position {
                pointer-events: auto;
                touch-action: none;
                user-select: none;
                -webkit-user-select: none;
            }
            body.game-focus .board-shell .next-panel .label,
            #next-panel.free-position .label {
                cursor: grab;
                touch-action: none;
                user-select: none;
                -webkit-user-select: none;
            }
            body.game-focus .board-shell .next-panel.dragging,
            #next-panel.free-position.dragging {
                cursor: grabbing;
                transform: scale(1.03);
            }
            body.game-focus .board-shell .next-panel.free-position,
            #next-panel.free-position {
                position: fixed;
                left: var(--next-panel-x, auto);
                top: var(--next-panel-y, auto);
                right: auto;
                z-index: 19;
                min-width: 64px;
            }
            body.game-focus .board-shell .mini-canvas {
                width: 24px;
                height: 24px;
            }
            .board-shell > .side-column:first-child {
                position: absolute;
                top: 5px;
                left: var(--mobile-side-offset, 4px);
                width: var(--mobile-side-width, 40px);
                z-index: 3;
            }
            .board-shell > .side-column:last-child {
                position: absolute;
                top: 5px;
                right: var(--mobile-side-offset, 4px);
                width: var(--mobile-side-width, 40px);
                z-index: 3;
            }
            .board-shell > #tetris {
                grid-column: 1;
                grid-row: 1;
                width: min(100%, var(--board-fill-width, 100vw));
                max-width: min(100%, var(--board-fill-width, 100vw));
                justify-self: center;
            }
            body.game-focus .board-shell > #tetris {
                width: min(100vw, var(--board-fill-width, 100vw));
                max-width: min(100vw, var(--board-fill-width, 100vw));
                height: var(--board-fit-height, calc(var(--app-vh) * 100));
                max-height: var(--board-fit-height, calc(var(--app-vh) * 100));
                justify-self: center;
                align-self: start;
                border-width: 0;
                border-radius: 0;
                box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
                background-size: auto, auto, 56% auto, 10% 5%, 10% 5%, auto;
            }
            body.game-focus.meta-compact .board-shell {
                padding: 0;
                gap: 0;
            }
            body.game-focus.meta-compact .board-shell > #tetris {
                width: min(100vw, var(--board-fill-width, 100vw));
                max-width: min(100vw, var(--board-fill-width, 100vw));
                height: var(--board-fit-height, calc(var(--app-vh) * 100));
                max-height: var(--board-fit-height, calc(var(--app-vh) * 100));
            }
            .side-column {
                display: grid;
                grid-template-columns: 1fr;
                gap: 4px;
                pointer-events: none;
                transition: opacity 220ms ease, transform 220ms ease;
            }
            .panel {
                min-height: 40px;
                padding: 4px 2px;
                border-radius: 11px;
                background: color-mix(in srgb, var(--panel-2) 68%, transparent);
                backdrop-filter: blur(6px);
                box-shadow: 0 6px 14px rgba(0,0,0,0.14);
            }
            body.game-focus.meta-compact .panel {
                min-height: 38px;
                padding: 3px 2px;
            }
            .panel .label {
                margin-bottom: 1px;
                font-size: 7px;
                letter-spacing: 0.08em;
            }
            .panel .panel-value {
                font-size: 10px;
                line-height: 1.05;
            }
            .panel-secondary {
                display: none;
            }
            .mini-canvas {
                width: 28px;
                height: 28px;
            }
            body.game-focus.meta-compact .mini-canvas {
                width: 24px;
                height: 24px;
            }
            .meta-drawer {
                display: block;
            }
            body.game-focus.meta-compact .meta-drawer {
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 62px);
                right: 12px;
                width: 52px;
                min-width: 52px;
                z-index: 19;
                border-radius: 999px;
                background: transparent;
                border: none;
                box-shadow: none;
                overflow: visible;
                animation: floatingDockBob 3.8s ease-in-out infinite;
            }
            body.game-focus .focus-toggle {
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                right: 12px;
                width: 40px;
                height: 40px;
                border: none;
                background: linear-gradient(180deg, rgba(10,18,30,0.86), rgba(11,22,38,0.72));
                box-shadow: 0 12px 26px rgba(0,0,0,0.24), 0 0 18px rgba(122,156,255,0.18);
                backdrop-filter: blur(14px);
                animation: floatingDockBob 3.2s ease-in-out infinite;
            }
            body.game-focus.top-peek .focus-toggle {
                top: calc(env(safe-area-inset-top, 0px) + 56px);
                right: 12px;
            }
            body.game-focus.top-peek.meta-compact .meta-drawer {
                top: calc(env(safe-area-inset-top, 0px) + 118px);
            }
            body.game-focus.meta-compact .meta-drawer-toggle {
                width: 52px;
                min-width: 52px;
                height: 52px;
                padding: 8px;
                justify-content: center;
                border-radius: 999px;
                background: linear-gradient(180deg, rgba(10,18,30,0.86), rgba(11,22,38,0.72));
                border: none;
                box-shadow: 0 12px 26px rgba(0,0,0,0.24), 0 0 18px rgba(0,194,255,0.16);
                backdrop-filter: blur(14px);
            }
            body.game-focus.meta-compact .meta-summary-copy,
            body.game-focus.meta-compact .meta-drawer-toggle::after {
                display: none;
            }
            body.game-focus.meta-compact .meta-summary-icon {
                width: 32px;
                height: 32px;
                font-size: 18px;
                box-shadow: 0 8px 18px rgba(0,0,0,0.14);
            }
            body.game-focus.meta-compact .meta-summary-icon.t-block-icon::before {
                width: 7px;
                height: 7px;
                box-shadow:
                    -8px 0 0 rgba(210,241,255,0.94),
                    8px 0 0 rgba(210,241,255,0.94),
                    0 8px 0 rgba(210,241,255,0.94),
                    0 0 12px rgba(122,156,255,0.26),
                    -8px 0 12px rgba(122,156,255,0.18),
                    8px 0 12px rgba(122,156,255,0.18),
                    0 8px 12px rgba(122,156,255,0.18);
            }
            body.game-focus.meta-compact .meta-drawer .meta-drawer-body {
                display: none;
            }
            body.game-focus.meta-compact .meta-drawer.open .meta-drawer-body {
                display: block;
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 108px);
                right: 8px;
                width: min(280px, calc(100vw - 16px));
                max-height: min(70vh, 520px);
                overflow: auto;
                padding: 12px;
                border-radius: 18px;
                border: 1px solid rgba(255,255,255,0.10);
                background: linear-gradient(180deg, rgba(10,18,30,0.98), rgba(11,22,38,0.94));
                box-shadow: 0 18px 42px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.05);
                backdrop-filter: blur(16px);
                animation: metaPopupIn 180ms ease-out;
                z-index: 21;
            }
            body.game-focus.top-peek.meta-compact .meta-drawer.open .meta-drawer-body {
                top: calc(env(safe-area-inset-top, 0px) + 168px);
            }
            body.meta-popup-open::after {
                content: '';
                position: fixed;
                inset: 0;
                background: rgba(4,8,16,0.16);
                z-index: 18;
                pointer-events: none;
            }
            .controls {
                position: fixed;
                left: 50%;
                right: auto;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
                transform: translateX(-50%);
                width: max-content;
                max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px);
                z-index: 18;
                padding: 0;
                grid-template-columns: repeat(3, minmax(calc(54px * var(--controls-scale, 1)), calc(64px * var(--controls-scale, 1))));
                grid-template-rows: repeat(2, auto);
                justify-content: center;
                align-items: center;
                gap: calc(8px * var(--controls-scale, 1));
                background: none;
                border: none;
                box-shadow: none;
                backdrop-filter: none;
                pointer-events: none;
                overflow: visible;
                transition: transform 220ms cubic-bezier(.22,.9,.25,1.16), filter 220ms ease;
                will-change: transform, filter;
                isolation: isolate;
            }
            /* 조작패드 아래 어두운 그라디언트 — 보드 위 버튼 가독성 향상 */
            .controls::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: calc(-16px * var(--controls-scale, 1));
                transform: translateX(-50%);
                width: calc(100% + 48px);
                height: calc(100% + 56px);
                border-radius: 28px;
                background: radial-gradient(ellipse at 50% 80%,
                    rgba(4, 8, 18, 0.54) 0%,
                    rgba(4, 8, 18, 0.28) 48%,
                    rgba(4, 8, 18, 0) 100%);
                pointer-events: none;
                z-index: -1;
            }
            .controls.controls-minimized::before { display: none; }
            .controls.free-position {
                left: var(--controls-panel-x, 50%);
                top: var(--controls-panel-y, auto);
                bottom: auto;
                transform: none;
                max-width: none;
            }
            .controls.dragging {
                filter: drop-shadow(0 18px 32px rgba(0,0,0,0.28));
                transform: scale(1.02);
            }
            .controls.dock-near {
                filter: drop-shadow(0 20px 34px rgba(0,0,0,0.28)) drop-shadow(0 0 18px rgba(122,156,255,0.18));
            }
            .controls.docked {
                filter: drop-shadow(0 14px 28px rgba(0,0,0,0.24));
            }
            .controls-drag-handle {
                position: absolute;
                left: 50%;
                top: calc(-24px * var(--controls-scale, 1));
                transform: translateX(-50%);
                width: calc(44px * var(--controls-scale, 1));
                height: calc(18px * var(--controls-scale, 1));
                border: none;
                border-radius: 999px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, rgba(10,18,30,0.86), rgba(11,22,38,0.72));
                color: rgba(230,242,255,0.82);
                font-size: calc(11px * var(--controls-scale, 1));
                line-height: 1;
                letter-spacing: 0.18em;
                box-shadow: 0 10px 18px rgba(0,0,0,0.22), 0 0 12px rgba(0,194,255,0.12);
                backdrop-filter: blur(12px);
                pointer-events: auto;
                cursor: grab;
                touch-action: none;
            }
            .controls.dragging .controls-drag-handle {
                cursor: grabbing;
                transform: translateX(-50%) scale(1.04);
            }
            .controls.dock-near .controls-drag-handle,
            .controls.docked .controls-drag-handle {
                box-shadow: 0 12px 22px rgba(0,0,0,0.24), 0 0 18px rgba(0,194,255,0.22), 0 0 28px rgba(122,156,255,0.18);
            }
            .controls-mini-toggle {
                position: absolute;
                top: calc(-10px * var(--controls-scale, 1));
                right: calc(-6px * var(--controls-scale, 1));
                width: calc(30px * var(--controls-scale, 1));
                height: calc(30px * var(--controls-scale, 1));
                border: 0;
                border-radius: 999px;
                display: inline-grid;
                place-items: center;
                padding: 0;
                font-size: calc(16px * var(--controls-scale, 1));
                font-weight: 900;
                color: #eefcff;
                background: linear-gradient(180deg, rgba(10,18,30,0.92), rgba(11,22,38,0.76));
                box-shadow: 0 10px 22px rgba(0,0,0,0.24), 0 0 14px rgba(122,156,255,0.14);
                backdrop-filter: blur(12px);
                pointer-events: auto;
                cursor: pointer;
                transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
                z-index: 1;
            }
            .controls-mini-toggle.active {
                box-shadow: 0 10px 24px rgba(0,0,0,0.24), 0 0 18px rgba(0,229,176,0.18);
            }
            .controls-mini-toggle:active {
                transform: scale(0.96);
            }
            .controls.controls-minimized {
                width: calc(42px * var(--controls-scale, 1));
                min-width: calc(42px * var(--controls-scale, 1));
                min-height: calc(42px * var(--controls-scale, 1));
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                gap: 0;
                padding: 0;
                align-items: start;
                justify-items: start;
            }
            .controls.controls-minimized .btn {
                display: none;
            }
            .controls.controls-minimized .controls-drag-handle {
                top: calc(-16px * var(--controls-scale, 1));
                width: calc(30px * var(--controls-scale, 1));
                height: calc(14px * var(--controls-scale, 1));
                font-size: calc(9px * var(--controls-scale, 1));
                opacity: 0.92;
            }
            .controls.controls-minimized .controls-mini-toggle {
                top: 0;
                right: 0;
                transform: none;
                width: calc(42px * var(--controls-scale, 1));
                height: calc(42px * var(--controls-scale, 1));
                border-radius: 999px;
                font-size: calc(17px * var(--controls-scale, 1));
                background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.24), transparent 38%), linear-gradient(180deg, rgba(11,22,38,0.96), rgba(6,12,22,0.92));
                border: 1px solid rgba(255,255,255,0.10);
                box-shadow: 0 14px 26px rgba(0,0,0,0.24), 0 0 18px rgba(0,194,255,0.16);
            }
            .controls.controls-minimized .controls-mini-toggle:active {
                transform: scale(0.95);
            }
            .controls.controls-minimized.dock-near .controls-mini-toggle,
            .controls.controls-minimized.docked .controls-mini-toggle {
                box-shadow: 0 16px 28px rgba(0,0,0,0.24), 0 0 18px rgba(0,194,255,0.22), 0 0 28px rgba(122,156,255,0.16);
            }
            .controls .btn {
                width: clamp(calc(54px * var(--controls-scale, 1)), calc(15vw * var(--controls-scale, 1)), calc(64px * var(--controls-scale, 1)));
                min-width: clamp(calc(54px * var(--controls-scale, 1)), calc(15vw * var(--controls-scale, 1)), calc(64px * var(--controls-scale, 1)));
                min-height: unset;
                aspect-ratio: 1 / 1;
                padding: 0;
                display: inline-grid;
                place-items: center;
                font-size: calc(20px * var(--controls-scale, 1));
                line-height: 1;
                border-radius: calc(16px * var(--controls-scale, 1));
                background: color-mix(in srgb, var(--panel-2) 56%, transparent);
                box-shadow: 0 10px 22px rgba(0,0,0,0.18);
                border: 1px solid rgba(255,255,255,0.10);
                backdrop-filter: blur(10px);
                pointer-events: auto;
                opacity: 1;
                position: relative;
                overflow: visible;
                transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
                animation: controlSquareFloat 3.2s ease-in-out infinite;
            }
            .controls .btn.press-pop {
                animation: controlPressPop 220ms ease-out;
            }
            .controls .btn::before {
                content: '';
                position: absolute;
                inset: -4px;
                border-radius: 18px;
                border: 1.5px solid rgba(255,255,255,0.10);
                box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px rgba(0,194,255,0.12);
                pointer-events: none;
                transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
            }
            .controls .btn.press-pop::before {
                animation: controlRingPulse 220ms ease-out;
            }
            .controls #m-left,
            .controls #m-rotate,
            .controls #m-right {
                place-self: center;
                font-size: calc(22px * var(--controls-scale, 1));
                border-radius: calc(16px * var(--controls-scale, 1));
                background: color-mix(in srgb, #39b8ff 56%, transparent);
                border-color: rgba(204,244,255,0.24);
                box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 18px rgba(0,194,255,0.20), 0 10px 22px rgba(0,0,0,0.18);
                color: #eefcff;
            }
            .controls #m-left::before,
            .controls #m-rotate::before,
            .controls #m-right::before {
                border-radius: 18px;
                border-color: rgba(120, 230, 255, 0.42);
                box-shadow: 0 0 0 1px rgba(180,245,255,0.08), 0 0 12px rgba(0,194,255,0.24), 0 0 24px rgba(86,160,255,0.18);
            }
            .controls #m-left { grid-column: 1; grid-row: 1; top: 0; }
            .controls #m-rotate { grid-column: 2; grid-row: 1; top: 0; }
            .controls #m-right { grid-column: 3; grid-row: 1; top: 0; }
            .controls .btn-main,
            .controls .btn-hold,
            .controls #m-down {
                grid-column: auto;
                grid-row: auto;
                font-size: calc(18px * var(--controls-scale, 1));
                color: #eefcff;
                top: 0;
            }
            .controls .btn-hold {
                grid-column: 1;
                grid-row: 2;
                background: color-mix(in srgb, var(--warn) 34%, transparent);
                color: #fff1b5;
            }
            .controls #m-drop {
                grid-column: 2;
                grid-row: 2;
                background: color-mix(in srgb, var(--accent) 32%, transparent);
                color: #dffbff;
            }
            .controls #m-down {
                grid-column: 3;
                grid-row: 2;
                background: color-mix(in srgb, #00c2ff 32%, transparent) !important;
                color: #d7f7ff !important;
            }
            body.controls-auto-dim .controls .btn {
                opacity: 0.34;
                box-shadow: 0 6px 14px rgba(0,0,0,0.12);
            }
            body.controls-auto-dim .controls #m-left,
            body.controls-auto-dim .controls #m-rotate,
            body.controls-auto-dim .controls #m-right {
                opacity: 0.46;
                box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 12px rgba(0,194,255,0.16), 0 6px 14px rgba(0,0,0,0.14);
            }
            body.controls-auto-dim .controls #m-left::before,
            body.controls-auto-dim .controls #m-rotate::before,
            body.controls-auto-dim .controls #m-right::before {
                border-color: rgba(120, 230, 255, 0.22);
                box-shadow: 0 0 0 1px rgba(180,245,255,0.04), 0 0 8px rgba(0,194,255,0.16), 0 0 16px rgba(86,160,255,0.12);
            }
            body.controls-auto-dim .controls .btn:active,
            body.controls-auto-dim .controls .btn:focus-visible {
                opacity: 0.95;
            }
            body.controls-auto-dim.controls-bottom-near .controls .btn {
                opacity: 0.18;
                box-shadow: 0 3px 8px rgba(0,0,0,0.10);
            }
            body.controls-auto-dim.controls-bottom-near .controls #m-left,
            body.controls-auto-dim.controls-bottom-near .controls #m-rotate,
            body.controls-auto-dim.controls-bottom-near .controls #m-right {
                opacity: 0.26;
                box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 0 8px rgba(0,194,255,0.12), 0 4px 10px rgba(0,0,0,0.10);
            }
            body.controls-enter .controls .btn {
                animation: controlsRiseIn 420ms cubic-bezier(.2,.8,.2,1);
            }
            .hint {
                display: none;
            }
            @keyframes controlSquareFloat {
                0%, 100% { transform: translateY(0); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
                50% { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.20); }
            }
            @keyframes controlPressPop {
                0%   { transform: scale(1) translateY(0); }
                30%  { transform: scale(0.91) translateY(3px); }
                70%  { transform: scale(1.03) translateY(-1px); }
                100% { transform: scale(1) translateY(0); }
            }
            @keyframes controlRingPulse {
                0%   { opacity: 0.9; transform: scale(1); }
                30%  { opacity: 1;   transform: scale(0.90); }
                70%  { opacity: 1;   transform: scale(1.10); }
                100% { opacity: 0.7; transform: scale(1.18); }
            }
            @keyframes controlsRiseIn {
                0%   { opacity: 0; transform: translateY(20px) scale(0.90); }
                60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
                100% { opacity: 1; transform: translateY(0) scale(1); }
            }
            @keyframes floatingDockBob {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-4px); }
            }
            @keyframes panelReleaseBounce {
                0% { transform: scale(1); }
                34% { transform: scale(1.06); }
                68% { transform: scale(0.985); }
                100% { transform: scale(1); }
            }
            @keyframes panelSnapGlow {
                0% { opacity: 0; transform: scale(0.9); }
                22% { opacity: 1; transform: scale(1.04); }
                100% { opacity: 0; transform: scale(1.18); }
            }
        }

        @media (max-width: 640px) and (orientation: portrait) {
            .controls,
            body.game-focus .controls,
            body.one-hand-mode .controls,
            body.one-hand-mode.game-focus .controls {
                left: 50%;
                right: auto;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
                width: max-content;
                max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px);
                transform: translateX(-50%);
                padding: 0;
                grid-template-columns: repeat(3, minmax(calc(60px * var(--controls-scale, 1)), calc(70px * var(--controls-scale, 1))));
                gap: calc(9px * var(--controls-scale, 1));
                align-items: center;
            }
            .controls.free-position,
            body.game-focus .controls.free-position,
            body.one-hand-mode .controls.free-position,
            body.one-hand-mode.game-focus .controls.free-position {
                left: var(--controls-panel-x, 50%);
                top: var(--controls-panel-y, auto);
                bottom: auto;
                transform: none;
                max-width: none;
            }
        }

        @media (max-width: 420px) {
            .topbar {
                gap: 8px;
            }
            .brand-mark {
                width: 30px;
                height: 30px;
                border-radius: 10px;
                font-size: 14px;
            }
            .title-wrap h1 {
                font-size: 16px;
            }
            .compact-title .eyebrow {
                font-size: 9px;
                letter-spacing: 0.12em;
            }
            .board-shell {
                padding: var(--board-shell-mobile-pad, 3px);
                gap: 0;
            }
            .board-shell > .side-column:first-child,
            .board-shell > .side-column:last-child {
                top: 4px;
                width: var(--mobile-side-width, 36px);
            }
            .side-column {
                gap: 3px;
            }
            .panel {
                min-height: 36px;
                padding: 3px 2px;
                border-radius: 10px;
                background: color-mix(in srgb, var(--panel-2) 62%, transparent);
                backdrop-filter: blur(4px);
            }
            .mini-canvas {
                width: 30px;
                height: 30px;
            }
            .board-shell > #tetris {
                width: min(calc(100% - 2px), var(--board-fill-width, 378px));
                max-width: min(calc(100% - 2px), var(--board-fill-width, 378px));
            }
            .meta-grid {
                gap: 6px;
            }
            .meta-chip {
                min-height: 54px;
                padding: 9px 8px;
            }
            .btn {
                padding: 13px 6px;
                font-size: 15px;
                min-height: 48px;
            }
            .controls {
                padding: 0;
                grid-template-columns: repeat(3, minmax(calc(52px * var(--controls-scale, 1)), calc(62px * var(--controls-scale, 1))));
                gap: calc(7px * var(--controls-scale, 1));
            }
            .controls-drag-handle {
                top: calc(-22px * var(--controls-scale, 1));
                width: calc(40px * var(--controls-scale, 1));
                height: calc(16px * var(--controls-scale, 1));
                font-size: calc(10px * var(--controls-scale, 1));
            }
            .controls .btn {
                width: clamp(calc(48px * var(--controls-scale, 1)), calc(14vw * var(--controls-scale, 1)), calc(56px * var(--controls-scale, 1)));
                min-width: clamp(calc(48px * var(--controls-scale, 1)), calc(14vw * var(--controls-scale, 1)), calc(56px * var(--controls-scale, 1)));
                font-size: calc(18px * var(--controls-scale, 1));
                border-radius: calc(14px * var(--controls-scale, 1));
            }
            .controls #m-left,
            .controls #m-rotate,
            .controls #m-right {
                font-size: calc(20px * var(--controls-scale, 1));
                border-radius: calc(14px * var(--controls-scale, 1));
            }
            .controls .btn-main,
            .controls .btn-hold,
            .controls #m-down {
                font-size: calc(16px * var(--controls-scale, 1));
            }
            .btn-main {
                grid-column: span 1;
            }
        }

        @media (max-width: 360px) {
            .app {
                gap: 7px;
                padding-bottom: calc(var(--mobile-controls-space) + 10px + env(safe-area-inset-bottom, 0px));
            }
            .topbar {
                gap: 6px;
            }
            .action-row {
                gap: 5px;
            }
            .mini-btn,
            .chip-btn {
                font-size: 11px;
                padding: 8px 8px;
            }
            .icon-btn {
                width: 36px;
                min-width: 36px;
            }
            .status-grid {
                gap: 4px;
            }
            .stat .label {
                font-size: 8px;
            }
            .stat .value {
                font-size: 14px;
                letter-spacing: -0.02em;
            }
            .board-shell {
                border-radius: 18px;
            }
            .panel .label {
                font-size: 7px;
            }
            .panel .panel-value {
                font-size: 11px;
            }
            canvas#tetris {
                width: min(calc(100% - 2px), var(--board-fill-width, 352px));
                max-width: min(calc(100% - 2px), var(--board-fill-width, 352px));
            }
            .meta-chip .label {
                font-size: 8px;
            }
            .meta-chip .value {
                font-size: 12px;
            }
            .hint {
                font-size: 10px;
            }
        }

        @media (max-width: 960px) and (orientation: landscape) {
            body {
                padding: max(4px, env(safe-area-inset-top, 0px)) 8px calc(6px + env(safe-area-inset-bottom, 0px));
            }
            .app {
                width: min(100%, 920px);
                gap: 6px;
                padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
            }
            .topbar {
                padding: 7px 10px;
            }
            .status-grid {
                gap: 5px;
            }
            .board-shell {
                grid-template-columns: 58px minmax(0, 1fr) 58px;
                gap: 8px;
                padding: 8px 10px;
                align-items: center;
            }
            .board-shell > .side-column:first-child {
                grid-column: 1;
                grid-row: 1;
            }
            .board-shell > .side-column:last-child {
                grid-column: 3;
                grid-row: 1;
            }
            .board-shell > #tetris {
                grid-column: 2;
                grid-row: 1;
                width: min(100%, var(--board-fill-width, 260px));
                max-width: var(--board-fill-width, 260px);
            }
            .side-column {
                gap: 6px;
            }
            .panel {
                min-height: 62px;
                padding: 6px 4px;
            }
            .mini-canvas {
                width: 34px;
                height: 34px;
            }
            .controls {
                left: auto;
                right: 8px;
                transform: none;
                width: min(340px, 46vw);
                bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
                padding: 6px;
                gap: 6px;
                border-radius: 14px;
            }
            .controls .btn {
                min-height: 40px;
                padding: 9px 6px;
                font-size: 12px;
            }
            .hint {
                display: none;
            }
        }

        /* ★ 320-340px 이하의 매우 작은 기기 전용 — iPhone 14(390px)는 해당 없음 */
        @media (max-width: 340px) {
            .app {
                padding-bottom: calc(var(--mobile-controls-space) + 10px + env(safe-area-inset-bottom, 0px));
            }
            .board-shell > .side-column:first-child,
            .board-shell > .side-column:last-child {
                width: 44px;
            }
            .controls {
                padding: 0;
                grid-template-columns: repeat(3, minmax(calc(44px * var(--controls-scale, 1)), calc(52px * var(--controls-scale, 1))));
                gap: calc(5px * var(--controls-scale, 1));
            }
            .controls .btn {
                min-height: 40px;
                padding: 8px 4px;
                font-size: calc(14px * var(--controls-scale, 1));
            }
            .controls #m-left,
            .controls #m-rotate,
            .controls #m-right {
                min-height: 42px;
                font-size: calc(18px * var(--controls-scale, 1));
                border-radius: calc(13px * var(--controls-scale, 1));
            }
            .controls .btn-main,
            .controls .btn-hold,
            .controls #m-down {
                min-height: 38px;
                font-size: calc(14px * var(--controls-scale, 1));
            }
            .panel {
                min-height: 40px;
            }
            .mini-canvas {
                width: 28px;
                height: 28px;
            }
        }

        .seo-section {
            margin-top: 18px;
            padding: 18px 16px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(10, 14, 26, 0.9), rgba(16, 24, 42, 0.78));
            border: 1px solid rgba(124, 92, 255, 0.18);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
        }
        .seo-section h2 {
            margin: 0 0 10px;
            font-size: 20px;
            color: #f8fbff;
        }
        .seo-section p {
            margin: 0;
            color: rgba(232, 240, 255, 0.82);
            line-height: 1.65;
        }
        .seo-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }
        .seo-grid article {
            padding: 14px 14px 13px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
        }
        .seo-grid h3 {
            margin: 0 0 8px;
            font-size: 15px;
            color: #ffffff;
        }
        .seo-grid p {
            font-size: 14px;
        }
        .seo-grid a {
            color: #79f7ff;
        }
        @media (max-width: 900px) {
            .seo-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 640px) {
            .seo-section {
                margin-top: 14px;
                padding: 15px 13px;
                border-radius: 16px;
            }
            .seo-section h2 {
                font-size: 18px;
            }
            .seo-grid article {
                padding: 12px;
                border-radius: 14px;
            }
            .seo-grid h3 {
                font-size: 14px;
            }
            .seo-grid p {
                font-size: 13px;
            }
        }

        #next-panel {
            --next-panel-shell-width: 92px;
            --next-panel-canvas-size: 72px;
            position: relative;
            transform-origin: center center;
            transition: transform 220ms cubic-bezier(.22,.9,.25,1.18), filter 220ms ease, width 220ms ease, opacity 180ms ease;
            will-change: transform, filter;
            isolation: isolate;
        }
        #next-panel::after,
        .controls::after {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 28px;
            pointer-events: none;
            opacity: 0;
            transform: scale(0.9);
            background: radial-gradient(circle at center, rgba(173, 244, 255, 0.32), rgba(122,156,255,0.14) 34%, rgba(0,229,176,0.10) 58%, rgba(0,0,0,0) 74%);
            transition: opacity 220ms ease, transform 240ms cubic-bezier(.22,.9,.25,1.12);
            z-index: -1;
        }
        #next-panel .label {
            font-size: 0.95em;
            transition: transform 180ms ease, opacity 180ms ease, padding 180ms ease, margin 180ms ease, font-size 180ms ease, box-shadow 180ms ease;
        }
        #next {
            width: 60px;
            height: 60px;
            transition: width 220ms cubic-bezier(.22,.9,.25,1.18), height 220ms cubic-bezier(.22,.9,.25,1.18), border-radius 220ms ease, box-shadow 220ms ease, transform 220ms ease;
        }
        #next-panel.next-mode-large {
            --next-panel-shell-width: 108px;
            --next-panel-canvas-size: 88px;
        }
        #next-panel.next-mode-mini {
            --next-panel-shell-width: 74px;
            --next-panel-canvas-size: 54px;
        }
        #next-panel.next-mode-mini .label {
            opacity: 0.88;
        }
        #next-panel.drag-armed,
        .controls.dragging {
            filter: saturate(1.04);
        }
        #next-panel.dock-near::after,
        .controls.dock-near::after,
        #next-panel.docked::after,
        .controls.docked::after {
            opacity: 0.92;
            transform: scale(1.02);
        }
        #next-panel.docked::after,
        .controls.docked::after {
            opacity: 0.48;
        }
        #next-panel.release-bounce,
        .controls.release-bounce {
            animation: panelReleaseBounce 360ms cubic-bezier(.2,1.1,.28,1) both;
        }
        #next-panel.snap-glow::after,
        .controls.snap-glow::after {
            animation: panelSnapGlow 620ms ease-out both;
        }
        @media (max-width: 640px) {
            #next-panel,
            body.game-focus #next-panel,
            #next-panel.free-position,
            body.game-focus #next-panel.free-position {
                position: fixed;
                left: var(--next-panel-x, auto);
                top: var(--next-panel-y, clamp(154px, 31vh, 286px));
                right: auto;
                width: var(--next-panel-shell-width, 92px);
                min-height: auto;
                padding: 0;
                border-radius: 0;
                z-index: 19;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
            }
            #next-panel .label,
            body.game-focus #next-panel .label {
                margin: 0 auto 8px;
                width: max-content;
                padding: 4px 10px;
                border-radius: 999px;
                font-size: 10px;
                letter-spacing: 0.14em;
                background: rgba(10,18,30,0.78);
                box-shadow: 0 8px 16px rgba(0,0,0,0.18);
            }
            #next-panel.next-mode-large .label,
            body.game-focus #next-panel.next-mode-large .label {
                margin-bottom: 10px;
                padding: 5px 12px;
                font-size: 10.5px;
                box-shadow: 0 10px 20px rgba(0,0,0,0.22), 0 0 18px rgba(122,156,255,0.10);
            }
            #next-panel.next-mode-mini .label,
            body.game-focus #next-panel.next-mode-mini .label {
                margin-bottom: 6px;
                padding: 3px 8px;
                font-size: 9px;
                letter-spacing: 0.12em;
                opacity: 0.9;
            }
            #next {
                display: block;
                width: var(--next-panel-canvas-size, 72px);
                height: var(--next-panel-canvas-size, 72px);
                margin: 0 auto;
                border-radius: 20px;
                background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.12), transparent 26%), linear-gradient(180deg, rgba(10,18,30,0.92), rgba(11,22,38,0.82));
                box-shadow: 0 14px 28px rgba(0,0,0,0.26), 0 0 20px rgba(122,156,255,0.16);
            }
            #next-panel.next-mode-large #next,
            body.game-focus #next-panel.next-mode-large #next {
                border-radius: 24px;
                box-shadow: 0 18px 34px rgba(0,0,0,0.28), 0 0 24px rgba(122,156,255,0.22), 0 0 40px rgba(0,229,176,0.10);
            }
            #next-panel.next-mode-mini #next,
            body.game-focus #next-panel.next-mode-mini #next {
                border-radius: 17px;
                box-shadow: 0 10px 18px rgba(0,0,0,0.24), 0 0 14px rgba(122,156,255,0.14);
            }
            #next-panel.dragging,
            body.game-focus #next-panel.dragging {
                transform: scale(1.035) rotate(-1deg);
                filter: drop-shadow(0 18px 32px rgba(0,0,0,0.28));
            }
            #next-panel.dock-near,
            body.game-focus #next-panel.dock-near {
                filter: drop-shadow(0 18px 34px rgba(0,0,0,0.28)) drop-shadow(0 0 18px rgba(122,156,255,0.18));
            }
            #next-panel.docked,
            body.game-focus #next-panel.docked {
                filter: drop-shadow(0 14px 28px rgba(0,0,0,0.24));
            }
            .board-shell > .side-column:last-child {
                width: 0;
            }
        }
        @media (max-width: 390px) {
            #next-panel.next-mode-large,
            body.game-focus #next-panel.next-mode-large {
                --next-panel-shell-width: 100px;
                --next-panel-canvas-size: 80px;
            }
            #next-panel.next-mode-mini,
            body.game-focus #next-panel.next-mode-mini {
                --next-panel-shell-width: 70px;
                --next-panel-canvas-size: 50px;
            }
            #next-panel:not(.next-mode-large):not(.next-mode-mini),
            body.game-focus #next-panel:not(.next-mode-large):not(.next-mode-mini),
            #next-panel.free-position:not(.next-mode-large):not(.next-mode-mini),
            body.game-focus #next-panel.free-position:not(.next-mode-large):not(.next-mode-mini) {
                --next-panel-shell-width: 86px;
                --next-panel-canvas-size: 68px;
            }
        }