/* --- Base & Desktop Styles --- */
        html, body { -webkit-text-size-adjust: 100%; }
        body { transition: background-color 0.5s, color 0.5s; text-align: center; font-family: 'Press Start 2P', sans-serif; font-size: 1em; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
        #game-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 30px; padding: 20px; position: relative; }
        /* Desktop-only GitHub link (top-right) */
        .github-link.desktop-only {
            position: fixed;
            top: 16px;
            right: 16px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #ffffff; /* fixed bg color */
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            color: #24292e; /* GitHub brand color for icon */
            opacity: 0.95;
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
            z-index: 50;
        }
        .github-link.desktop-only:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(0,0,0,0.28);
            opacity: 1;
        }
        #game-container { position: relative; }
        canvas { border: 4px solid; border-radius: 8px; transition: background-color 0.5s, border-color 0.5s; display: block; } /* Added display: block; */
        .info-panel { display: flex; flex-direction: column; align-items: stretch; width: 220px; font-size: 1.1rem; gap: 18px; }
        #right-panel { align-items: stretch; }
        .panel-block { background: rgba(0,0,0,0.55); border: 3px solid rgba(255,255,255,0.35); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
        body.theme-classic .panel-block { background: #9bbc0f; border-color: #0f380f; color: #0f380f; }
        .panel-heading { font-size: 1rem; letter-spacing: 0.15em; padding-bottom: 4px; text-align: left; text-transform: uppercase; }
        #panel-next .panel-heading { border-bottom: none; }
        #panel-stats .panel-heading { border-bottom: 2px dashed rgba(255,255,255,0.35); padding-bottom: 8px; }
        body.theme-classic #panel-stats .panel-heading { border-color: #0f380f; }
        .panel-body { display: flex; flex-direction: column; gap: 10px; align-items: center; }
        #panel-next .panel-body { gap: 12px; }
        #panel-next .panel-body canvas { border: none; border-radius: 4px; background: transparent; }
        body.theme-classic #panel-next .panel-body canvas { background: transparent; }
        #panel-stats .panel-body { background: transparent; }
        .stats-body { gap: 12px; width: 100%; align-items: stretch; }
        .stat-row { display: flex; justify-content: space-between; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
        .stat-row + .stat-row { border-top: 1px dashed rgba(255,255,255,0.25); padding-top: 8px; }
        body.theme-classic .stat-row + .stat-row { border-color: #0f380f; }
        .stat-label { opacity: 0.85; }
        .stat-value { font-size: 1rem; font-variant-numeric: tabular-nums; }
        button { background-color: #007bff; color: white; padding: 12px 20px; border: 2px solid; border-radius: 5px; font-size: 1rem; cursor: pointer; font-family: 'Press Start 2P', sans-serif; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s; }
        button:hover { opacity: 0.8 !important; }
        /* Overlay fills its container (covers full canvas incl. border on desktop) */
        #game-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2rem; border-radius: 8px; z-index: 10; box-sizing: border-box; }
        #game-overlay div { margin-bottom: 20px; }
        #game-overlay.showing-leaderboard > div { margin-bottom: 12px; }
        #game-overlay.showing-leaderboard #overlay-leaderboard { margin-bottom: 8px; }
        /* Leaderboard view tweaks: compact back button and order */
        #game-overlay.showing-leaderboard { justify-content: flex-start; padding-top: 24px; padding-bottom: 72px; min-height: 40vh; }
        #game-overlay.showing-leaderboard #overlay-leaderboard { order: 1; }
        #game-overlay.showing-leaderboard #overlay-name-form { order: 2; margin-top: 8px; }
        #game-overlay.showing-leaderboard #overlay-button { order: 3; font-size: 0.9rem; padding: 8px 12px; margin-top: 8px; position: static; left: auto; transform: none; z-index: auto; }
        /* Leaderboard list styles */
        .leaderboard-list { width: 80%; max-width: 420px; overflow: auto; }
        .leaderboard-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px dashed rgba(255,255,255,0.2); line-height: 1.2; }
        #overlay-leaderboard .leaderboard-item { margin-bottom: 0; }
        #overlay-leaderboard .leaderboard-item > div { margin-bottom: 0; }
        .leaderboard-item.highlight { background: rgba(255, 215, 0, 0.18); box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.35); border-radius: 6px; }
        .leaderboard-rank { min-width: 36px; padding-right: 6px; text-align: right; }
        .leaderboard-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .leaderboard-score { font-size: 1.1em; }
        .medal-gold { color: #FFD700; }
        .medal-silver { color: #C0C0C0; }
        .medal-bronze { color: #CD7F32; }
        .leaderboard-empty { width: 100%; text-align: center; opacity: 0.8; padding: 12px 0; }
        .top-controls { margin-bottom: 20px; padding: 10px; display: flex; align-items: center; gap: 12px; }
        /* Compact desktop buttons */
        .top-controls button { font-size: 0.8rem; padding: 8px 12px; }
        .pause-control { margin-left: auto; }
        /* removed pause-control styling as we now use shortcuts */
        .sfx-tester { display: none; }
        .sfx-tester select { font-size: 0.8rem; padding: 8px; }
        #overlay-controls { font-size: 0.8rem; text-align: left; margin-top: 20px; }
        #overlay-controls h3 { font-size: 1rem; margin-bottom: 10px; text-align: center; }
        #overlay-controls p { margin: 5px 0; }
        #overlay-controls span { font-weight: bold; display: inline-block; width: 80px; }

        /* --- Theme Button Styles --- */
        .theme-switcher button { opacity: 0.6; }
        .theme-switcher button.active { opacity: 1; }
        /* Further de-emphasize the inactive theme on desktop */
        body.theme-classic #theme-modern-btn { opacity: 0.4; color: rgba(255,255,255,0.6); border-color: #6c757d; }
        body.theme-modern #theme-classic-btn { opacity: 0.4; color: rgba(192,192,192,0.8); border-color: #6c757d; }
        #theme-modern-btn, #theme-modern-btn-mobile { background-color: #007bff; color: white; border: 2px solid #4a4a4a; } /* Combined theme buttons */
        #theme-classic-btn, #theme-classic-btn-mobile { background-color: #306230; color: #c0c0c0; border: 2px solid #0f380f; } /* Combined theme buttons */
        #theme-modern-btn.active, #theme-modern-btn-mobile.active { border-color: #00BFFF; box-shadow: 0 0 8px #00BFFF; }
        #theme-classic-btn.active, #theme-classic-btn-mobile.active { background-color: #9bbc0f; color: #0f380f; } /* Combined theme buttons */

        /* --- General Theme Overrides --- */
        body.theme-modern { background: #202028; color: #fff; }
        .theme-modern .info-panel { color: #fff; }
        .theme-modern canvas { border-color: #fff; }
        .theme-modern .info-panel button, .theme-modern #game-overlay button { background-color: #007bff; border-color: #fff; color: white; }
        /* Pause overlay buttons: differentiate primary and secondary */
        /* Only alter styles when overlay is used for pause */
        /* Use default primary blue for continue on modern theme */
        .theme-modern #game-overlay.paused #overlay-button { background-color: #007bff; border-color: #ffffff; }
        .theme-modern #game-overlay.paused #overlay-restart-btn { background-color: #6c757d; border-color: #ffffff; }
        .theme-modern #game-overlay { background: rgba(0, 0, 0, 0.85); color: white; }

        body.theme-classic { background: #c0c0c0; color: #0f380f; }
        .theme-classic .info-panel { color: #0f380f; }
        .theme-classic canvas { border-color: #0f380f; }
        .theme-classic .info-panel button, .theme-classic #game-overlay button { background-color: #306230; border-color: #0f380f; color: #c0c0c0; }
        /* Pause overlay buttons: differentiate primary and secondary */
        .theme-classic #game-overlay.paused #overlay-button { background-color: #9bbc0f; color: #0f380f; }
        .theme-classic #game-overlay.paused #overlay-restart-btn { background-color: #6c757d; color: #fff; border-color: #0f380f; }
        .theme-classic #game-overlay button { background-color: #9bbc0f; color: #0f380f; }
        .theme-classic #game-overlay { background: rgba(15, 56, 15, 0.85); color: #9bbc0f; }
        .theme-classic .leaderboard-item.highlight { background: rgba(155, 188, 15, 0.22); box-shadow: inset 0 0 0 2px rgba(15, 56, 15, 0.4); }

        /* Default display for mobile-only elements (hidden on PC) */
        .mobile-only {
            display: none;
        }
        /* Default display for desktop-only controls (shown on PC) */
        .desktop-controls {
            display: block;
        }
        /* Default display for mobile-only controls (hidden on PC) */
        .mobile-controls {
            display: none;
        }

        /* --- Mobile-Specific Styles --- */
        @media (max-width: 767px) {
            /* Hide GitHub icon on mobile due to limited space */
            .github-link.desktop-only { display: none; }
            body {
                /* Avoid desktop centering which causes cropping on mobile Safari */
                display: block;
                overflow: hidden; /* Prevent scrolling on mobile */
                min-height: 0;
                height: auto;
            }
            /* Remove desktop spacing on mobile to avoid offsets */
            #game-wrapper { padding: 0; gap: 0; }
            /* Mobile overlay: default modern transparent; game-over adds dim cover */
            .theme-modern #game-overlay { background: transparent; }
            .theme-modern #game-overlay.game-over { background: rgba(0, 0, 0, 0.6); }
            .theme-classic #game-overlay { background: rgba(15, 56, 15, 0.85); }
            /* Hide PC-specific elements */
            .info-panel, .top-controls {
                display: none;
            }
            /* Show mobile-specific HUD */
            #top-hud {
                display: flex;
                flex-direction: row; /* Changed to row for mobile HUD */
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                width: 100%;
                box-sizing: border-box;
            }
            #game-wrapper {
                flex-direction: column; /* Changed to column for mobile game area */
                width: 100vw;
                flex-grow: 1; /* Take remaining vertical space */
                min-height: 0; /* Fix flexbox overflow */
            }
            #game-container {
                width: 100%;
                flex-grow: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }
            canvas {
                border: 0; /* Remove border on mobile canvas */
            }
            #tetris {
                box-shadow: 0 0 20px rgba(0, 191, 255, 0.8); /* Example mobile shadow */
            }
            body.theme-classic #tetris {
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            }

            /* Mobile HUD specific styles */
            .hud-col {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 5px;
            }
            .hud-left {
                align-items: flex-start;
                font-size: 0.9rem;
            }
            .hud-center {
                align-items: center;
            }
            .hud-right {
                align-items: flex-end;
            }
            #next-piece-mobile { /* Specific ID for mobile next piece canvas */
                border: 2px solid rgba(255,255,255,0.5);
                border-radius: 4px;
            }
            /* HUD: score stacked, level inline like mobile.html */
            #hud-score {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #hud-level {
                display: flex;
                align-items: baseline;
                gap: 8px;
            }
            #hud-score span:first-child {
                font-size: 0.7rem;
                font-weight: normal;
                opacity: 0.7;
                margin-bottom: 4px; /* only score label stacks */
            }
            #hud-level span:first-child {
                font-size: 0.7rem;
                font-weight: normal;
                opacity: 0.7; /* dim label only */
                margin: 0;
            }
            /* Score value prominent; Level value normal size like mobile.html */
            #score-mobile {
                font-size: 1.4rem;
                font-weight: bold;
            }
            #level-mobile {
                font-size: 0.7rem; /* per requirement */
                font-weight: normal;
            }
            .theme-btn { /* Mobile theme buttons */
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 2px solid #fff;
                cursor: pointer;
                padding: 0;
                box-sizing: border-box;
            }
            #theme-modern-btn-mobile { background-color: #007bff; }
            #theme-classic-btn-mobile { background-color: #306230; }
            #theme-modern-btn-mobile.active { box-shadow: 0 0 8px #00BFFF; }
            #theme-classic-btn-mobile.active { box-shadow: 0 0 8px #9bbc0f; }
            body.theme-classic #theme-modern-btn-mobile,
            body.theme-modern #theme-classic-btn-mobile { opacity: 0.4; box-shadow: none; }

            /* Overlay controls for mobile (match mobile.html) */
            .desktop-controls { display: none; } /* Hide PC controls on mobile */
            .mobile-controls { display: block; } /* Show mobile controls on mobile */
            #overlay-controls { font-size: 0.8rem; text-align: left; margin-top: 2em; line-height: 1.5; }
            #overlay-controls h3 {
                font-size: 1rem;
                margin-bottom: 0.5em;
                text-align: center;
            }
            #overlay-controls p {
                margin: 0.3em 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 0.5em;
            }
            #overlay-controls span {
                font-weight: bold;
                display: inline-block;
                min-width: 4em; /* Adjust as needed for alignment */
                text-align: left; /* match mobile.html: left-aligned labels */
            }
            /* On mobile, overlay matches canvas size and is centered by default */
            #game-overlay { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
            /* In leaderboard mode on mobile, keep alignment with canvas; tighten paddings */
            #game-overlay.showing-leaderboard { padding-top: 12px; padding-bottom: 56px; }
            #game-overlay.showing-leaderboard #overlay-button { bottom: 12px; }
            /* Compact leaderboard spacing & font on mobile */
            .leaderboard-list { font-size: 0.85rem; }
            .leaderboard-item { gap: 6px; padding: 9px 8px; }
            .leaderboard-rank { min-width: 30px; padding-right: 4px; }
            .leaderboard-score { font-size: 1.0em; }
        }