:root {
            --pixel-font: 'Press Start 2P', 'Courier New', 'Monaco', 'Menlo', monospace;
        }

        * {
            margin: 0; padding: 0; box-sizing: border-box;
            -webkit-font-smoothing: none;
            -moz-osx-font-smoothing: unset;
            text-rendering: optimizeSpeed;
            image-rendering: pixelated;
        }

        html, body {
            width: 100%; height: 100%;
            background: #0a0a1a;
            overflow: hidden;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            display: flex;
            flex-direction: column;
            font-family: var(--pixel-font);
            /* Prevent pull-to-refresh and overscroll on mobile */
            overscroll-behavior: none;
        }

        /* ====== SNES WINDOW CHROME ====== */
        .snes-panel {
            border: 3px solid #4444aa;
            outline: 2px solid #222266;
            outline-offset: -1px;
            box-shadow: inset 0 0 0 1px #6666cc;
            background: linear-gradient(180deg, #0a0a2e 0%, #0d0d1a 100%);
            border-radius: 2px;
        }

        /* ====== COMBAT BACKGROUND ====== */
        #combat-btn-container {
            background: linear-gradient(
                180deg,
                #0a0a1a 0%,
                #0f0f2a 30%,
                #141428 60%,
                #0a0a1a 100%
            ) !important;
            border-bottom: 2px solid rgba(80, 80, 160, 0.3);
        }

        /* Combat safe-area gap fix: ensure black fill covers viewport beyond canvas bottom */
        body.in-combat { background: #000 !important; }

        /* TASK-32: Combat status chips — DOM overlay anchored above the sprite
           anchors. Container is position:fixed with pointer-events:none so it
           never intercepts taps; z-index sits below combat-btn-container (500). */
        #combat-status-chips {
            position: fixed;
            pointer-events: none;
            z-index: 499;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        #combat-status-chips .chip-group {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .combat-chip {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            padding: 2px 4px;
            background: rgba(10, 10, 26, 0.85);
            border: 1px solid #888;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            color: #ffffff;
            line-height: 1;
            white-space: nowrap;
        }
        .combat-chip[data-status="webbed"]    { border-color: #cccccc; color: #cccccc; }
        .combat-chip[data-status="cursed"]    { border-color: #cc6600; color: #ffaa66; }
        .combat-chip[data-status="defending"] { border-color: #ffdd44; color: #ffdd44; }
        .combat-chip[data-status="windup"]    { border-color: #ff6644; color: #ff6644; }
        .combat-chip .chip-turns {
            opacity: 0.85;
            font-size: 7px;
        }

        /* ====== TASK-40: Combat Command Cursor ====== */
        /* Caret: shown before the selected command row via ::before pseudo-element */
        .combat-cmd-row.is-selected::before {
            content: '\25B6 ';
            color: #ffd344;
            animation: pmCaretBlink 1s steps(2,end) infinite;
        }
        @keyframes pmCaretBlink {
            from { opacity: 1; }
            50%  { opacity: 0.3; }
            to   { opacity: 1; }
        }
        /* Disabled state: enemy turn dims the entire command container */
        .combat-cmd-disabled { opacity: 0.58; filter: grayscale(0.35) brightness(0.85); pointer-events: none; transition: opacity 200ms ease-out, filter 200ms ease-out; }

        /* ====== TASK-39: Unified START Pause Menu ====== */
        .pause-menu-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            font-family: var(--pixel-font, 'Press Start 2P', monospace);
        }
        .pause-menu-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
        }
        .pause-menu-frame {
            position: relative;
            width: min(80vw, 280px);
            min-width: 240px;
            background: rgba(20, 20, 40, 0.94);
            color: #ffffff;
            border: 1px solid #888888;
            box-shadow: 0 0 0 2px #ffffaa, 0 6px 24px rgba(0,0,0,0.6);
            padding: 12px 16px;
        }
        .pause-menu-title {
            color: #ffffaa;
            font-size: 10px;
            margin-bottom: 8px;
            text-align: center;
        }
        .pause-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .pm-row {
            display: grid;
            grid-template-columns: 14px minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px;
            min-height: 24px;
            padding: 2px 4px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        .pm-row.is-selected {
            background: rgba(255,255,170,0.08);
        }
        .pm-caret {
            color: #ffd344;
            visibility: hidden;
            animation: pmCaretBlink 1s steps(2,end) infinite;
        }
        .pm-row.is-selected .pm-caret {
            visibility: visible;
        }
        .pm-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 9px;
            line-height: 1.4;
        }
        .pm-meta {
            color: #aaaacc;
            font-size: 7px;
            line-height: 1.2;
            text-align: right;
            max-width: 84px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pause-menu-hint {
            margin-top: 10px;
            color: #888888;
            font-size: 8px;
            text-align: center;
            line-height: 1.5;
        }
        @media (max-width: 480px) {
            .pause-menu-frame {
                min-width: 0;
                width: 80vw;
            }
        }

        /* Enforce hiding world DOM elements during combat — CSS !important prevents
           any JS code path from accidentally re-showing them (e.g. quest tracking,
           resize handlers, HUD updates). The inline display:none in enterCombat()
           remains as belt-and-suspenders. */
        body.in-combat #top-hud,
        body.in-combat #minimap-wrap,
        body.in-combat #biome-hud,
        body.in-combat #npc-quest-hud,
        body.in-combat #hud-quest-reminder,
        body.in-combat #dpad,
        body.in-combat #dpad-floating,
        body.in-combat #action-buttons,
        body.in-combat #action-buttons-wrap,
        body.in-combat #touch-action-cluster,
        body.in-combat #bottom-controls,
        body.in-combat #btn-ai-bot,
        body.in-combat #bug-report-btn,
        body.in-combat #toast,
        body.in-combat #save-indicator,
        body.in-combat #poi-title-card,
        body.in-combat #achievement-toast,
        body.in-combat #tutorial-hint {
            display: none !important;
        }

        /* ====== TOP HUD BAR ====== */
        #top-hud {
            flex-shrink: 0;
            background: linear-gradient(to bottom, #151528, #0d0d1e);
            border-bottom: 2px solid #4444aa;
            box-shadow: 0 3px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(100,100,200,0.15);
            display: flex;
            align-items: center;
            padding: 3px 4px;
            padding-top: calc(3px + env(safe-area-inset-top, 0px));
            gap: 3px;
            position: relative;
            z-index: 100;
        }

        /* Left section: HP + Hunger bars */
        #hud-bars {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex-shrink: 0;
        }

        .hud-bar-row {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .hud-icon {
            font-size: 12px;
            width: 14px;
            text-align: center;
            flex-shrink: 0;
            line-height: 1;
        }

        .bar-track {
            width: clamp(44px, 12vw, 70px);
            height: 9px;
            background: #0a0a18;
            border: 2px solid #444466;
            border-radius: 0;
            overflow: hidden;
            flex-shrink: 0;
        }

        .bar-fill {
            height: 100%;
            border-radius: 0;
            transition: none;
        }

        #hp-fill {
            background: #22cc44;
        }

        #hp-fill.flash {
            background: #ffffff;
        }

        #hunger-fill {
            background: #ff8822;
        }

        @keyframes hunger-pulse-critical {
            0%, 100% { filter: brightness(1); opacity: 1; }
            50% { filter: brightness(1.18); opacity: 0.82; }
        }

        @keyframes hunger-pulse-starving {
            0%, 100% { filter: brightness(1); opacity: 1; }
            50% { filter: brightness(1.38); opacity: 0.66; }
        }

        .hunger-pulse-critical {
            animation: hunger-pulse-critical 1.2s ease-in-out infinite;
        }

        .hunger-pulse-starving {
            animation: hunger-pulse-starving 0.7s ease-in-out infinite;
        }

        .bar-val {
            font-size: 8px;
            color: #ddddee;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
        }

        /* Center: Day + Info row */
        #hud-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            min-width: 0;
        }

        #hud-title {
            display: none;
        }

        #hud-day {
            font-size: 9px;
            color: #ffdd44;
            letter-spacing: 1px;
            white-space: nowrap;
        }

        #hud-quest-reminder {
            font-size: 9px;
            color: #aabbcc;
            letter-spacing: 0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
            font-family: var(--pixel-font);
        }

        #hud-info-row {
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        /* Right: Level + Gold + Gear */
        #hud-right {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        #hud-right-stats {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1px;
        }

        #hud-level {
            font-size: 11px;
            color: #44ff88;
            font-weight: bold;
            text-shadow: 0 0 6px #00ff4488;
        }

        #hud-xp {
            font-size: 8px;
            color: #9999dd;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        #hud-equip {
            font-size: 9px;
            color: #88ff88;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            max-width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Settings gear button + dropdown */
        #hud-gear-btn {
            background: transparent;
            border: 1px solid #444466;
            border-radius: 0;
            color: #aaaacc;
            font-size: 14px;
            width: 28px;
            height: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
            position: relative;
        }
        #hud-gear-btn:active { background: #1e1e38; border-color: #6666aa; }

        #hud-settings-dropdown {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(13,13,30,0.98);
            border-top: 2px solid #4444aa;
            border-radius: 0;
            padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
            z-index: 1000;
            min-width: 140px;
            box-shadow: 0 -4px 16px rgba(0,0,40,0.8);
            flex-direction: column;
            gap: 2px;
        }
        #hud-settings-dropdown.open { display: flex; }
        /* Desktop: revert to top-right dropdown */
        @media (pointer: fine) and (hover: hover) and (min-width: 800px) {
            #hud-settings-dropdown {
                position: absolute;
                bottom: auto;
                left: auto;
                top: 100%;
                right: 0;
                margin-top: 4px;
                border-top: none;
                border: 2px solid #4444aa;
                padding: 4px;
                z-index: 100;
                box-shadow: 0 4px 16px rgba(0,0,40,0.8);
            }
        }

        .settings-item {
            background: transparent;
            border: 1px solid #2a2a44;
            border-radius: 0;
            color: #ccccdd;
            font-family: 'Press Start 2P', 'Courier New', monospace;
            font-size: 7px;
            padding: 8px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        .settings-item:active { background: #1e1e38; border-color: #5555aa; }
        .settings-item-icon { font-size: 14px; width: 20px; text-align: center; }

        /* Changelog modal */
        #changelog-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.75); z-index: 10000; justify-content: center; align-items: center;
        }
        #changelog-overlay.open { display: flex; }
        #changelog-panel {
            background: #1a1a2e; border: 2px solid #5555aa; border-radius: 10px;
            max-width: 420px; width: 92vw; max-height: 80vh; display: flex; flex-direction: column;
            font-family: var(--pixel-font); color: #c8c8e0; box-shadow: 0 0 30px rgba(80,80,180,0.4);
        }
        #changelog-header {
            padding: 12px 16px; border-bottom: 1px solid #333366; display: flex;
            justify-content: space-between; align-items: center;
        }
        #changelog-header h2 { margin: 0; font-size: 16px; color: #aaaadd; }
        #changelog-close { background: none; border: none; color: #888; font-size: 22px; cursor: pointer; padding: 0 4px; }
        #changelog-close:hover { color: #fff; }
        #changelog-body { padding: 12px 16px; overflow-y: auto; flex: 1; }
        .cl-version { margin-bottom: 16px; }
        .cl-version-title { color: #8888cc; font-size: 14px; font-weight: bold; margin-bottom: 4px; }
        .cl-version-date { color: #666; font-size: 11px; margin-left: 8px; }
        .cl-changes { list-style: none; padding: 0; margin: 4px 0 0 0; }
        .cl-changes li { padding: 2px 0 2px 14px; position: relative; font-size: 12px; line-height: 1.5; color: #b0b0cc; }
        .cl-changes li::before { content: '•'; position: absolute; left: 2px; color: #5555aa; }

        /* ====== GAME CANVAS AREA ====== */
        #game-container {
            flex: 1;
            overflow: hidden;
            position: relative;
            background: #1a1a2e;
            border-left: 3px solid #2a2a55;
            border-right: 3px solid #2a2a55;
            /* Prevent flex item from growing beyond available space */
            min-height: 0;
        }

        #game-container canvas {
            display: block;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            touch-action: none;
            -webkit-tap-highlight-color: transparent;
            /* [Perf E5] GPU compositing hints - promotes canvas to its own layer on mobile */
            will-change: transform;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }

        /* Toast notification - HTML layer over canvas */
        #toast {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgba(0,0,0,0.92);
            color: #ffdd44;
            font-family: var(--pixel-font);
            font-size: 14px;
            font-weight: bold;
            padding: 10px 18px;
            border-radius: 4px;
            border: 2px solid #555588;
            pointer-events: none;
            opacity: 0;
            z-index: 10001;
            text-align: center;
            max-width: calc(100% - 32px);
            white-space: normal;
            word-break: break-word;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* POI Title Card - first-discovery location announcement */
        #poi-title-card {
            position: fixed;
            top: 18%;
            left: 50%;
            transform: translateX(-50%) translateY(-6px);
            text-align: center;
            pointer-events: none;
            opacity: 0;
            z-index: 10002;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        #poi-title-card.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        #poi-title-card-name {
            font-family: var(--pixel-font);
            font-size: 22px;
            color: #ffe87a;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 16px rgba(255,200,50,0.3);
            letter-spacing: 0.04em;
        }
        #poi-title-card-sub {
            font-family: var(--pixel-font);
            font-size: 12px;
            color: #b8c8d0;
            margin-top: 4px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.8);
        }

        /* ====== BOTTOM CONTROLS BAR ====== */
        #bottom-controls {
            flex-shrink: 0;
            background: linear-gradient(to top, #151528, #0d0d1e);
            border-top: 2px solid #4444aa;
            box-shadow: 0 -3px 12px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(100,100,200,0.15);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 8px;
            padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
            gap: 8px;
            position: relative;
            z-index: 10;
        }

        @media (hover: none), (pointer: coarse), (max-width: 768px) {
            body.mobile-closeable-panel-open #bottom-controls,
            body.mobile-closeable-panel-open #dpad,
            body.mobile-closeable-panel-open #dpad-floating,
            body.mobile-closeable-panel-open #action-buttons,
            body.mobile-closeable-panel-open #action-buttons-wrap,
            body.mobile-closeable-panel-open #touch-action-cluster,
            body.mobile-closeable-panel-open #btn-ai-bot,
            body.mobile-closeable-panel-open #bug-report-btn,
            body.mobile-closeable-panel-open #buff-hud {
                display: none !important;
            }
        }

        /* ---- D-PAD ---- */
        #dpad {
            display: grid;
            grid-template-columns: clamp(40px, 11vw, 52px) clamp(40px, 11vw, 52px) clamp(40px, 11vw, 52px);
            grid-template-rows: clamp(40px, 11vw, 52px) clamp(40px, 11vw, 52px) clamp(40px, 11vw, 52px);
            gap: 2px;
            flex-shrink: 0;
            touch-action: none;
        }

        .dpad-cell {
            /* empty cells in the grid corners */
        }

        .dpad-btn {
            background: #252548;
            border: 2px solid #555588;
            border-radius: 0;
            color: #ccccff;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .dpad-btn:active,
        .dpad-btn.pressed {
            background: linear-gradient(to bottom, #2563EB, #1a44bb);
            border-color: #6699ff;
            box-shadow: 0 1px 0 #0a0a22, inset 0 1px 0 rgba(150,200,255,0.2);
            transform: translateY(2px);
            color: #ffffff;
        }

        .dpad-center-pip {
            background: #111122;
            border: 2px solid #333355;
            border-radius: 0;
            width: 14px;
            height: 14px;
            margin: auto;
        }

        /* ---- FLOATING D-PAD OVERLAY (touch devices) ---- */
        #dpad-floating {
            display: none; /* shown by JS when body.touch-device is set */
            position: fixed;
            left: 12px;
            bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            z-index: 500;
            pointer-events: auto;
            touch-action: none;
            opacity: 0.75;
            /* same grid layout as #dpad */
            display: grid;
            grid-template-columns: clamp(44px, 12vw, 56px) clamp(44px, 12vw, 56px) clamp(44px, 12vw, 56px);
            grid-template-rows: clamp(44px, 12vw, 56px) clamp(44px, 12vw, 56px) clamp(44px, 12vw, 56px);
            gap: 2px;
        }
        /* Hidden by default; JS adds body.touch-device at runtime */
        body:not(.touch-device) #dpad-floating { display: none !important; }
        body.touch-device #dpad-floating { display: grid; }

        /* On touch devices: hide the bar D-pad and 5-button strip */
        body.touch-device #dpad { display: none !important; }
        body.touch-device #action-buttons-wrap { display: none !important; }

        /* ---- SNES-STYLE TOUCH ACTION CLUSTER ---- */
        #touch-action-cluster {
            display: none; /* shown on touch devices */
            position: fixed;
            right: 16px;
            bottom: max(env(safe-area-inset-bottom, 0px), 16px);
            z-index: 500;
            pointer-events: auto;
            grid-template-columns: repeat(2, 64px);
            grid-template-rows: repeat(2, 64px);
            gap: 8px;
        }
        body.touch-device #touch-action-cluster { display: grid; }

        /* Mobile buff dock: compact world-mode chips stay clear of thumb controls. */
        #buff-hud.buff-layout-world-touch {
            align-content: flex-start;
            gap: 4px !important;
        }
        #buff-hud.buff-layout-world-touch .buff-row {
            flex: 0 1 auto;
            min-width: 48px !important;
            max-width: 56px;
            padding: 3px 5px !important;
            gap: 3px !important;
            border-radius: 4px !important;
        }
        #buff-hud.buff-layout-world-touch .buff-icon {
            display: inline-flex !important;
            width: 12px;
            flex: 0 0 12px;
            align-items: center;
            justify-content: center;
            font-size: 12px !important;
        }
        #buff-hud.buff-layout-world-touch .buff-label {
            display: none;
        }
        #buff-hud.buff-layout-world-touch .buff-timer {
            font-size: 8px !important;
            margin-left: 0 !important;
            line-height: 1.1;
        }
        #buff-hud.buff-layout-world-touch .buff-bar-track {
            height: 2px !important;
            margin-top: 1px !important;
        }

        body.touch-device #npc-quest-hud {
            display: none !important;
        }

        .ctrl-btn {
            border: 1px solid rgba(255,255,255,0.45);
            color: #fff;
            font-family: var(--pixel-font, monospace);
            background: rgba(0,0,0,0.4);
            transition: transform 80ms ease-out, opacity 120ms ease-out;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            gap: 3px;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            box-shadow: 0 4px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .ctrl-btn.pressed,
        .ctrl-btn:active { transform: scale(0.92); opacity: 1 !important; }

        .ctrl-letter {
            font-size: 22px;
            line-height: 1;
            font-weight: bold;
        }
        .ctrl-label {
            font-size: 7px;
            line-height: 1;
            font-weight: bold;
        }

        /* SNES diamond: Y/X top row, B/A bottom row */
        .ctrl-y { background: rgba(44, 145, 82, 0.68); border-color: rgba(105, 220, 138, 0.82); }
        .ctrl-x { background: rgba(55, 93, 188, 0.72); border-color: rgba(116, 154, 255, 0.85); }
        .ctrl-b { background: rgba(166, 104, 43, 0.74); border-color: rgba(226, 164, 85, 0.9); }
        .ctrl-a { background: rgba(202, 76, 65, 0.76); border-color: rgba(255, 132, 118, 0.9); }
        .ctrl-ride {
            position: absolute;
            right: 0;
            top: -72px;
            display: none;
            background: rgba(126, 85, 32, 0.78);
            border-color: rgba(232, 174, 84, 0.92);
        }
        .ctrl-ride .ctrl-label {
            font-size: 6px;
        }
        .ctrl-ride.is-mounted {
            background: rgba(65, 145, 84, 0.78);
            border-color: rgba(118, 232, 138, 0.92);
        }
        .act-btn.is-mounted {
            filter: brightness(1.18);
            border-color: #76e88a !important;
        }

        .ctrl-y { grid-column: 1; grid-row: 1; }
        .ctrl-x { grid-column: 2; grid-row: 1; }
        .ctrl-b { grid-column: 1; grid-row: 2; }
        .ctrl-a { grid-column: 2; grid-row: 2; }

        #btn-start {
            display: none !important;
        }

        /* ---- KEYBOARD HINTS (desktop only) ---- */
        #keyboard-hints {
            flex: 1;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        @media (pointer: fine) and (hover: hover) and (min-width: 800px) {
            #keyboard-hints { display: flex; }
        }

        .hint-row {
            font-size: 10px;
            color: #555577;
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .hint-key {
            display: inline-block;
            background: #1e1e38;
            border: 1px solid #444466;
            border-radius: 3px;
            padding: 1px 5px;
            color: #7777aa;
            font-size: 9px;
            font-family: var(--pixel-font);
        }

        /* ---- ACTION BUTTONS ---- */
        #action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 5px;
            flex-shrink: 0;
        }

        .act-btn {
            width: clamp(62px, 16vw, 84px);
            height: clamp(50px, 12vw, 68px);
            border-radius: 0;
            border: 3px solid rgba(255,255,255,0.22);
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            gap: 2px;
            position: relative;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        .act-btn:active,
        .act-btn.pressed {
            transform: translateY(3px) scale(0.95);
            box-shadow: 0 1px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
            filter: brightness(1.3);
        }

        .btn-icon {
            font-size: 22px;
            line-height: 1;
            position: relative;
        }

        .btn-label {
            font-size: 9px;
            letter-spacing: 1px;
            font-weight: bold;
            font-family: var(--pixel-font);
            position: relative;
        }

        #btn-act   { background: #cc2222; border-color: #ff5555; }
        #btn-inv   { background: #2255cc; border-color: #5588ff; }
        #btn-craft { background: #228844; border-color: #44cc66; }
        #btn-build { background: #885522; border-color: #bb7733; }

        /* ====== FULLSCREEN PROMPT (mobile) ====== */
        #fs-prompt {
            position: fixed;
            inset: 0;
            background: #08081a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            color: #ffffff;
            font-family: var(--pixel-font);
            gap: 18px;
            cursor: pointer;
            touch-action: manipulation;
        }

        #fs-prompt .game-logo {
            font-size: 32px;
            color: #ffdd44;
            font-weight: bold;
            text-shadow: 0 0 20px #ffaa00;
            letter-spacing: 4px;
        }

        #fs-prompt .game-subtitle {
            font-size: 13px;
            color: #6666aa;
            letter-spacing: 2px;
        }

        #fs-prompt .tap-hint {
            font-size: 20px;
            color: #44ff88;
            font-weight: bold;
            text-shadow: 0 0 10px #00ff44;
            animation: blink 1.2s ease-in-out infinite, float-y 2s ease-in-out infinite;
            letter-spacing: 2px;
        }
        @keyframes float-y {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        #fs-prompt .landscape-hint {
            font-size: 11px;
            color: #444466;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        /* Pixel-art decorative border on game container */
        #game-frame {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        /* ====== BIOME HUD ====== */
        #biome-hud {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 55;
            display: flex;
            flex-direction: column;
            gap: 3px;
            pointer-events: none;
        }

        #biome-label {
            font-size: 10px;
            font-family: var(--pixel-font);
            font-weight: bold;
            color: #ffdd44;
            background: rgba(0,0,0,0.65);
            padding: 2px 6px;
            border-radius: 3px;
            letter-spacing: 1px;
            display: none;
            border: 1px solid rgba(255,220,0,0.3);
        }

        .biome-bar-row {
            display: none;
            align-items: center;
            gap: 4px;
            background: rgba(0,0,0,0.65);
            padding: 2px 6px;
            border-radius: 3px;
            max-width: min(34vw, 136px);
        }

        .biome-bar-icon {
            font-size: 11px;
            width: 14px;
            text-align: center;
            flex: 0 0 14px;
        }

        .biome-bar-track {
            width: 60px;
            height: 6px;
            background: #1a1a1a;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 0;
            overflow: hidden;
        }

        .biome-bar-fill {
            height: 100%;
            border-radius: 0;
            width: 0%;
            transition: none;
        }

        #biome-heat-fill   { background: #ff8800; }
        #biome-cold-fill   { background: #aaddff; }
        #biome-poison-fill { background: #66cc44; }

        #biome-danger-row {
            gap: 5px;
        }

        #biome-danger-text {
            font-size: 10px;
            font-family: var(--pixel-font);
            font-weight: bold;
            letter-spacing: 0.5px;
            white-space: nowrap;
            line-height: 1.1;
        }

        /* ====== SAVE INDICATOR ====== */
        #save-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0,40,0,0.88);
            color: #44ff88;
            font-family: var(--pixel-font);
            font-size: 11px;
            font-weight: bold;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid #44ff88;
            pointer-events: none;
            opacity: 0;
            z-index: 30;
            transition: opacity 0.4s ease, transform 0.4s ease;
            transform: translateY(-8px);
        }

        /* ====== TUTORIAL HINT ====== */
        #tutorial-hint {
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background: rgba(10,10,30,0.92);
            color: #ffdd44;
            font-family: var(--pixel-font);
            font-size: 13px;
            font-weight: bold;
            padding: 10px 18px;
            border-radius: 6px;
            border: 2px solid #ffdd44;
            box-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 20px rgba(255,220,0,0.15);
            pointer-events: none;
            opacity: 0;
            z-index: 60;
            text-align: center;
            max-width: 88vw;
            white-space: normal;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        #tutorial-hint.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Flat item icon - fills most of slot, no circular background */
        .item-icon {
            font-size: 38px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .has-pixel-icon {
            font-size: 0 !important;
        }
        .pixel-item-icon-img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            pointer-events: none;
        }
        .item-icon.has-pixel-icon,
        .item-dot.has-pixel-icon {
            width: 80%;
            height: 80%;
        }

        /* ====== DOM PANEL OVERLAYS ====== */
        .game-panel-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            display: flex;
            background: rgba(0,0,0,0);
            align-items: center;
            justify-content: center;
            /* Top padding: at least 56px to clear mobile browser address bar chrome,
               also respects safe-area-inset-top for notched devices (iPhone X+).
               Bottom padding keeps panels above the HUD button row. */
            padding: max(56px, calc(env(safe-area-inset-top, 0px) + 10px)) 10px
                     calc(env(safe-area-inset-bottom, 0px) + 140px) 10px;
            pointer-events: none;
            transition: background 0.25s ease;
            visibility: hidden;
        }
        .game-panel-overlay.open {
            background: rgba(0,0,0,0.55);
            pointer-events: auto;
            visibility: visible;
        }
        /* Allow vertical scrolling in all panel content on mobile */
        .game-panel-overlay .panel-body { touch-action: pan-y; -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: 60vh; }
        .game-panel-overlay .panel-body * { touch-action: pan-y; }

        /* ====== KEEPER'S JOURNAL ====== */
        .journal-section { margin-bottom: 14px; }
        .journal-section-title {
            color: #facc15;
            font-size: 9px;
            font-family: var(--pixel-font);
            text-transform: uppercase;
            margin-bottom: 6px;
            letter-spacing: 1px;
        }
        .journal-objective {
            color: #e0e0f0;
            font-family: var(--pixel-font);
            font-size: 12px;
            line-height: 1.5;
            padding: 8px;
            border-left: 3px solid #facc15;
            background: rgba(250,204,21,0.06);
        }
        .journal-component {
            font-family: var(--pixel-font);
            font-size: 11px;
            padding: 3px 0;
        }
        .journal-tip {
            color: #c0c0d0;
            font-family: var(--pixel-font);
            font-size: 10px;
            padding: 3px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .journal-prep-list { margin-top: 4px; }
        .journal-check {
            font-family: var(--pixel-font);
            font-size: 10px;
            color: #aaa;
            padding: 2px 0;
        }
        .journal-check.done { color: #4ade80; }

        .game-panel {
            background: linear-gradient(180deg, #0a0a2e 0%, #0d0d1a 100%);
            border: 3px solid #4444aa;
            outline: 2px solid #222266;
            outline-offset: -1px;
            box-shadow: inset 0 0 0 1px #6666cc;
            border-radius: 2px;
            font-family: var(--pixel-font);
            color: #ccccdd;
            width: min(92vw, 480px);
            /* Use svh (small viewport height) so panels fit within the visible
               area even when the mobile address bar is showing. Falls back to
               calc(100vh - 210px) on browsers without svh support. */
            max-height: min(78svh, calc(100vh - 210px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .game-panel-overlay.open .game-panel {
            opacity: 1;
        }
        .swipe-dismiss-handle {
            cursor: grab;
            touch-action: none;
        }
        .swipe-dismiss-dragging {
            cursor: grabbing;
            will-change: transform, opacity;
        }
        .panel-header {
            background: #0d0d1e;
            border-bottom: 2px solid #4444aa;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            gap: 8px;
            flex-shrink: 0;
        }
        .panel-title {
            font-size: 14px;
            font-weight: bold;
            color: #ffdd44;
            letter-spacing: 2px;
            text-shadow: 0 0 8px #ffaa0088;
            flex: 1;
        }
        .panel-subtitle {
            font-size: 10px;
            color: #8888cc;
        }
        .panel-close {
            background: #331111;
            border: 2px solid #ff4444;
            border-radius: 0;
            color: #ff4444;
            font-size: 14px;
            font-weight: bold;
            width: 34px;
            height: 34px;
            cursor: pointer;
            font-family: var(--pixel-font);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            touch-action: manipulation;
            line-height: 1;
            padding: 0;
        }
        .panel-close:hover { background: #441111; border-color: #ff5555; }
        .panel-close:active { background: #551111; border-color: #ff6666; transform: scale(0.9); }

        /* ---- Inventory Panel (Redesigned) ---- */
        /* Inventory panel must fit within the overlay's padded area:
           overlay top-padding ~56px + bottom-padding ~140px = ~196px consumed.
           Use same budget as other game panels so the top never clips. */
        .inv-panel-redesign { max-height: min(88svh, calc(100vh - 80px)) !important; }
        /* Inventory uses full height since bottom controls are hidden */
        #inventory-panel.game-panel-overlay {
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
        }
        .inv-body-redesign {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow-y: scroll;
            padding: 8px;
            padding-right: 22px;
            gap: 8px;
            min-height: 0;
            /* Hide native scrollbar - we use a custom one */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .inv-body-redesign::-webkit-scrollbar { display: none; }
        /* Custom always-visible scrollbar track (mobile only) */
        .inv-custom-scroll-track {
            position: absolute;
            top: 0;
            right: 0;
            width: 18px;
            height: 100%;
            background: #0a0a1a;
            border-left: 1px solid #2a2a44;
            z-index: 10;
            touch-action: none;
        }
        @media (pointer: fine) and (hover: hover) and (min-width: 800px) {
            .inv-custom-scroll-track { display: none !important; }
            .inv-body-redesign {
                scrollbar-width: thin;
                scrollbar-color: #4444aa #0a0a1a;
                padding-right: 8px;
            }
            .inv-body-redesign::-webkit-scrollbar { width: 6px; display: block; }
            .inv-body-redesign::-webkit-scrollbar-track { background: #0a0a1a; border-radius: 3px; }
            .inv-body-redesign::-webkit-scrollbar-thumb { background: #4444aa; border-radius: 3px; min-height: 40px; }
            .inv-body-redesign::-webkit-scrollbar-thumb:active { background: #6666cc; }
        }
        .inv-custom-scroll-thumb {
            position: absolute;
            right: 2px;
            width: 14px;
            min-height: 36px;
            background: #4444aa;
            border-radius: 7px;
            border: 1px solid #6666cc;
            cursor: pointer;
            touch-action: none;
        }
        .inv-custom-scroll-thumb:active,
        .inv-custom-scroll-thumb.dragging {
            background: #6666cc;
            border-color: #8888ee;
        }
        /* Character Section */
        .inv-char-section {
            border: 1px solid #2a2a44;
            border-radius: 6px;
            padding: 8px;
            background: linear-gradient(135deg, #0e0e20, #141430);
        }
        .inv-char-top { display: flex; gap: 10px; align-items: flex-start; }
        .inv-avatar {
            width: 52px; height: 52px;
            background: #1a1a35;
            border: 2px solid #4444aa;
            border-radius: 6px;
            display: block;
            flex-shrink: 0;
            /* Scale up the 32x32 pixel-art sprite crisply */
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .inv-char-stats { flex: 1; display: flex; flex-direction: column; gap: 3px; }
        .inv-level-row { margin-bottom: 2px; }
        .inv-stat-row { display: flex; align-items: center; gap: 4px; font-size: 11px; }
        .inv-stat-label { color: #8888cc; font-weight: bold; font-size: 10px; letter-spacing: 1px; }
        .inv-stat-val { color: #ffffff; font-weight: bold; }
        .inv-stat-icon { font-size: 11px; width: 16px; text-align: center; }

        .inv-bar-track {
            position: relative;
            flex: 1;
            height: 12px;
            background: rgba(20,20,40,0.8);
            border: 1px solid rgba(100,100,180,0.3);
            border-radius: 0;
            overflow: hidden;
        }
        .inv-bar-fill {
            height: 100%;
            border-radius: 0;
            transition: none;
        }
        .inv-hp-fill {
            background: #22cc44;
        }
        .inv-hunger-fill {
            background: #ff8822;
        }
        .inv-bar-val {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            pointer-events: none;
        }

        @keyframes inv-bar-heal {
            0%   { filter: brightness(2.5); box-shadow: 0 0 12px 4px rgba(68,255,136,0.8); }
            100% { filter: brightness(1.0); box-shadow: none; }
        }
        .inv-bar-fill.heal-flash {
            animation: inv-bar-heal 0.5s ease-out;
        }

        @keyframes inv-gain-float {
            0%   { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-18px); }
        }
        .inv-gain-popup {
            position: absolute;
            top: -4px;
            right: 4px;
            font-size: 11px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.9);
            pointer-events: none;
            animation: inv-gain-float 1.2s ease-out forwards;
            z-index: 5;
        }
        .inv-xp-bar-wrap {
            position: relative; height: 12px;
            background: #1a1a30; border: 1px solid #2a2a44;
            border-radius: 3px; overflow: hidden;
            margin-bottom: 3px;
        }
        .inv-xp-bar {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, #4466cc, #66aaff);
            border-radius: 2px;
            transition: width 0.3s;
        }
        .inv-xp-text {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 8px; color: #ccccff; font-weight: bold;
            text-shadow: 1px 1px 0 #000;
        }
        .inv-combat-stats {
            display: flex; gap: 12px; margin-top: 6px;
            padding-top: 6px; border-top: 1px solid #2a2a44;
        }
        .inv-combat-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ffffff; font-weight: bold; }
        .inv-combat-icon { font-size: 13px; }
        .inv-combat-detail { font-size: 9px; color: #888888; margin-left: 2px; }
        .inv-biome-effects { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
        .inv-biome-tag {
            font-size: 9px; padding: 2px 6px;
            border-radius: 3px; font-weight: bold;
        }
        .inv-biome-heat { background: #442200; color: #ff8844; border: 1px solid #663300; }
        .inv-biome-cold { background: #002244; color: #88ccff; border: 1px solid #003366; }
        .inv-biome-poison { background: #1a3300; color: #88ff44; border: 1px solid #2a4400; }
        /* Equipment Slots */
        .inv-equip-section { }
        .inv-equip-label, .inv-grid-label {
            color: #6666aa; font-size: 9px; font-weight: bold;
            letter-spacing: 2px; margin-bottom: 4px;
        }
        .inv-equip-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
        .inv-equip-slot {
            background: #141428; border: 2px solid #2a2a44;
            border-radius: 6px; padding: 6px 2px;
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            cursor: pointer; touch-action: manipulation;
            transition: border-color 0.15s, background 0.15s;
            -webkit-user-select: none; user-select: none;
            min-width: 0; overflow: hidden;
        }
        .inv-equip-slot:active { border-color: #6666cc; background: #1e1e38; }
        .inv-equip-slot.inv-eq-filled { border-color: #ffdd44; background: #1a1a30; }
        .inv-equip-slot.selected { border-color: #44ff88; background: #1a2a1e; box-shadow: 0 0 8px rgba(68,255,136,0.3); }
        .inv-equip-slot.inv-eq-locked { opacity: 0.35; cursor: default; pointer-events: none; }
        .inv-eq-icon { font-size: 20px; height: 24px; display: flex; align-items: center; justify-content: center; }
        .inv-eq-icon.has-pixel-icon { width: 28px; margin: 0 auto; }
        .inv-eq-name { font-size: 8px; color: #aaaacc; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
        .inv-eq-type { font-size: 7px; color: #555577; letter-spacing: 1px; }
        /* Inventory Grid */
        .inv-grid-section { }
        .inv-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2px;
            align-content: start;
        }
        .inv-slot {
            aspect-ratio: 1;
            min-height: 44px;
            background: rgba(10, 10, 30, 0.85);
            border: 2px solid rgba(80, 80, 120, 0.5);
            border-radius: 2px;
            display: flex;
            align-items: center; justify-content: center;
            cursor: pointer; position: relative;
            touch-action: manipulation;
            transition: border-color 0.1s, background 0.1s;
            -webkit-user-select: none; user-select: none;
            padding: 0;
            overflow: hidden;
        }
        .inv-slot:active { border-color: #6666cc; background: #1e1e38; }
        .inv-slot.selected { border-color: #ffd700; background: #1e1c2a; box-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
        .inv-slot.filled { border-color: #4444aa; }
        .inv-slot.selected.filled { border-color: #ffd700; }
        /* Type-colored borders with glows for instant recognition */
        /* Color coding: Gray=material, Green=consumable/food, Blue=equipment, Yellow=quest */
        .inv-slot.type-resource  { border-color: #888899; background: #141418; box-shadow: 0 0 5px rgba(136,136,153,0.3); }
        .inv-slot.type-structure { border-color: #888899; background: #141418; box-shadow: 0 0 5px rgba(136,136,153,0.3); }
        .inv-slot.type-seed      { border-color: #888899; background: #141418; box-shadow: 0 0 5px rgba(136,136,153,0.3); }
        .inv-slot.type-currency  { border-color: #888899; background: #141418; box-shadow: 0 0 5px rgba(136,136,153,0.3); }
        .inv-slot.type-food,
        .inv-slot.type-consumable{ border-color: #22cc55; background: #0e1a12; box-shadow: 0 0 8px rgba(34,204,85,0.45); }
        .inv-slot.type-weapon    { border-color: #2563EB; background: #0e1222; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
        .inv-slot.type-tool      { border-color: #2563EB; background: #0e1222; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
        .inv-slot.type-armor     { border-color: #2563EB; background: #0e1222; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
        .inv-slot.type-mount     { border-color: #2563EB; background: #0e1222; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
        .inv-slot.type-quest     { border-color: #facc15; background: #1a1800; box-shadow: 0 0 8px rgba(250,204,21,0.5); }
        .inv-slot.selected.type-weapon, .inv-slot.selected.type-tool,
        .inv-slot.selected.type-food, .inv-slot.selected.type-consumable,
        .inv-slot.selected.type-resource, .inv-slot.selected.type-structure,
        .inv-slot.selected.type-seed, .inv-slot.selected.type-armor,
        .inv-slot.selected.type-currency, .inv-slot.selected.type-mount,
        .inv-slot.selected.type-quest { border-color: #ffd700; background: #1e1c2a; box-shadow: 0 0 8px rgba(255,215,0,0.5); }
        /* .item-dot legacy alias - kept for any JS that still writes it */
        .item-dot, .item-icon {
            font-size: 38px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            pointer-events: none;
        }
        .item-dot.has-pixel-icon, .item-icon.has-pixel-icon {
            width: 80%;
            height: 80%;
        }
        .item-count {
            position: absolute;
            bottom: 0; right: 1px;
            pointer-events: none;
            font-size: 12px; color: #ffffff;
            font-weight: bold;
            background: rgba(0,0,0,0.85);
            border-radius: 4px;
            padding: 0 4px;
            min-width: 14px;
            text-align: center;
            line-height: 16px;
            height: 16px;
            z-index: 1;
        }
        .item-count:empty {
            display: none;
        }
        /* Selected Item Detail */
        .inv-detail-section {
            border: 1px solid #2a2a44;
            border-radius: 6px;
            padding: 8px;
            background: #0e0e20;
            display: block;
            z-index: 5;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.6);
            min-height: 60px;
            flex-shrink: 0;
        }
        .inv-detail-section.visible { display: block; }
        .inv-detail-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
        .inv-detail-icon { font-size: 24px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #1a1a35; border-radius: 4px; border: 1px solid #2a2a44; }
        .inv-detail-icon.has-pixel-icon { padding: 2px; }
        .inv-detail-title { flex: 1; }
        .inv-detail-meta { display: flex; gap: 6px; align-items: center; }
        .sel-name { font-size: 13px; color: #ffffff; font-weight: bold; }
        .sel-count { font-size: 11px; color: #bbbbdd; }
        .sel-type { font-size: 10px; color: #8899aa; padding: 1px 5px; background: #1a1a30; border-radius: 3px; }
        .sel-stats { font-size: 11px; color: #88ccff; line-height: 1.8; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
        .stat-line { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; font-size: 12px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.4); }
        .stat-atk    { color: #ff7766; border: 1px solid rgba(255,119,102,0.3); }
        .stat-def    { color: #6699ff; border: 1px solid rgba(102,153,255,0.3); }
        .stat-hp     { color: #44ee88; border: 1px solid rgba(68,238,136,0.3); }
        .stat-hunger { color: #ffaa44; border: 1px solid rgba(255,170,68,0.3); }
        .stat-resist { color: #88ddff; border: 1px solid rgba(136,221,255,0.3); }
        .stat-misc   { color: #bbbbcc; border: 1px solid rgba(187,187,204,0.3); }
        .inv-action-btns {
            display: flex;
            gap: 4px;
            margin-top: auto;
            padding-top: 6px;
        }
        .panel-btn {
            flex: 1;
            min-height: 44px;
            border-radius: 6px;
            border: 2px solid rgba(255,255,255,0.22);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 1px;
            box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
            transition: transform 0.08s, box-shadow 0.08s;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-user-select: none; user-select: none;
        }
        .panel-btn:active {
            transform: translateY(2px);
            box-shadow: 0 1px 0 rgba(0,0,0,0.4);
            filter: brightness(1.2);
        }
        .btn-use   { background: linear-gradient(to bottom, #228844, #155528); border-color: #44cc66; }
        .btn-equip { background: linear-gradient(to bottom, #2255cc, #1133aa); border-color: #5588ff; }
        .btn-drop  { background: linear-gradient(to bottom, #555566, #333344); border-color: #7777aa; }

        /* ---- Crafting Panel ---- */
        #crafting-panel .panel-body {
            display: flex;
            flex: 1;
            overflow: hidden;
            min-height: 0;
            position: relative;
        }
        /* Grid view */
        .craft-grid-view {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            -webkit-overflow-scrolling: touch;
        }
        .craft-grid-view.hidden { display: none; }
        .craft-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        @media (min-width: 420px) {
            .craft-grid { grid-template-columns: repeat(3, 1fr); }
        }
        /* Crafting Category Tabs */
        .craft-tabs {
            display: flex;
            gap: 4px;
            padding: 6px 8px 0;
            flex-wrap: wrap;
            border-bottom: 1px solid #2a2a44;
            /* negative margins so tabs span full container width (overcoming grid-view's 8px padding) */
            margin: -8px -8px 8px -8px;
        }
        .craft-tab {
            padding: 5px 8px;
            border-radius: 4px 4px 0 0;
            border: 1px solid #333355;
            border-bottom: none;
            background: #0e0e1e;
            color: #7777aa;
            cursor: pointer;
            font-size: 10px;
            font-weight: bold;
            font-family: var(--pixel-font);
            touch-action: manipulation;
            -webkit-user-select: none; user-select: none;
            white-space: nowrap;
            transition: background 0.12s, color 0.12s;
        }
        .craft-tab.active {
            background: #1a1a30;
            color: #ffdd44;
            border-color: #ffdd44;
        }
        .craft-tab:active { filter: brightness(1.2); }
        .craft-card {
            background: #12122a;
            border: 2px solid #2a2a44;
            border-radius: 6px;
            padding: 10px 6px 8px;
            cursor: pointer;
            touch-action: pan-y;
            -webkit-user-select: none; user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-height: 90px;
            transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
        }
        .craft-card:active { background: #1e1e38; }
        .craft-card.craftable {
            border-color: #44ff88;
            box-shadow: 0 0 8px rgba(68,255,136,0.25);
        }
        .craft-card.not-craftable {
            border-color: #333344;
            opacity: 0.55;
        }
        .craft-card-emoji { font-size: 28px; line-height: 1.2; }
        .craft-card-emoji.has-pixel-icon { width: 32px; height: 32px; margin: 0 auto; }
        .craft-card-name { font-size: 11px; font-weight: bold; color: #ffdd44; margin-top: 4px; line-height: 1.2; }
        .craft-card-qty { font-size: 10px; color: #aaaacc; margin-top: 1px; }
        .craft-card-sub { font-size: 9px; margin-top: 3px; }
        /* Detail view */
        .craft-detail-view {
            flex: 1;
            display: none;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }
        .craft-detail-view.active {
            display: flex;
        }
        .craft-detail-scroll {
            flex: 1;
            padding: 14px 14px 8px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            min-height: 0;
        }
        .craft-detail-footer {
            padding: 8px 14px 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-top: 1px solid #1a1a30;
            background: #0e0e1a;
            flex-shrink: 0;
        }
        .craft-back-btn {
            align-self: flex-start;
            background: none;
            border: 1px solid #555566;
            color: #aaaacc;
            font-family: var(--pixel-font);
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-user-select: none; user-select: none;
        }
        .craft-back-btn:active { background: #1e1e38; }
        .craft-detail-emoji { font-size: 48px; text-align: center; line-height: 1.2; margin-top: 4px; }
        .craft-detail-emoji.has-pixel-icon { width: 56px; height: 56px; margin: 4px auto 0; }
        .craft-detail-name { font-size: 16px; color: #ffdd44; font-weight: bold; text-align: center; min-height: 20px; }
        .craft-needs-label { font-size: 11px; color: #666688; }
        .craft-ingredient { font-size: 11px; padding: 1px 0; display: flex; align-items: center; gap: 5px; }
        .craft-ingredient-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; }
        .craft-ingredient.have { color: #44ff88; }
        .craft-ingredient.lack { color: #ff4444; }
        .craft-station-warn { font-size: 10px; color: #ffaa44; min-height: 14px; }
        .craft-level-warn   { font-size: 10px; color: #ff6644; min-height: 14px; }
        .craft-progress-track {
            height: 10px;
            background: #1a1a2a;
            border: 1px solid #333344;
            border-radius: 3px;
            overflow: hidden;
        }
        .craft-progress-fill {
            height: 100%;
            background: linear-gradient(to right, #1a6633, #44ff88);
            border-radius: 3px;
            width: 0%;
            transition: width 0.06s linear;
            position: relative;
        }
        .craft-progress-fill::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 12px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.4));
            border-radius: 0 3px 3px 0;
        }
        @keyframes craft-pulse {
            0%, 100% { box-shadow: 0 0 4px rgba(68,255,136,0.3); }
            50% { box-shadow: 0 0 10px rgba(68,255,136,0.6); }
        }
        .craft-progress-track.crafting {
            animation: craft-pulse 0.8s ease-in-out infinite;
        }
        .craft-btn {
            width: 100%;
            min-height: 44px;
            border-radius: 6px;
            border: 2px solid #44cc66;
            background: linear-gradient(to bottom, #228844, #155528);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 2px;
            box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
            transition: transform 0.08s, box-shadow 0.08s;
            margin-top: auto;
            -webkit-user-select: none; user-select: none;
        }
        .craft-btn:active {
            transform: translateY(2px);
            box-shadow: 0 1px 0 rgba(0,0,0,0.4);
        }
        .craft-btn.disabled {
            background: linear-gradient(to bottom, #333344, #222233) !important;
            border-color: #555566 !important;
            color: #666677 !important;
            cursor: default;
            opacity: 0.6;
        }
        .craft-btn.disabled:active { transform: none; box-shadow: 0 3px 0 rgba(0,0,0,0.4); }
        @keyframes craft-complete-flash {
            0% { background: linear-gradient(to bottom, #44ff88, #228844); border-color: #88ffbb; }
            100% { background: linear-gradient(to bottom, #228844, #155528); border-color: #44cc66; }
        }
        .craft-btn.craft-complete {
            animation: craft-complete-flash 0.5s ease-out;
        }

        /* ---- Batch Crafting Quantity Selector ---- */
        .craft-qty-row {
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: center;
            margin: 4px 0;
        }
        .craft-qty-btn {
            min-width: 34px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #555566;
            background: #1a1a30;
            color: #ccccee;
            font-family: var(--pixel-font);
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-user-select: none; user-select: none;
            transition: background 0.1s, border-color 0.1s;
        }
        .craft-qty-btn:active { background: #2a2a44; border-color: #8888aa; }
        .craft-qty-btn.active { background: #334455; border-color: #66aaff; color: #88ccff; }
        .craft-qty-display {
            min-width: 36px;
            text-align: center;
            font-family: var(--pixel-font);
            font-size: 14px;
            font-weight: bold;
            color: #ffdd44;
        }
        .craft-batch-label {
            font-size: 10px;
            color: #8888aa;
            text-align: center;
            min-height: 14px;
        }

        /* ---- Station Theme: Campfire ---- */
        #crafting-panel.station-campfire .panel-header {
            background: linear-gradient(to right, #2a1008, #1a0800);
            border-bottom-color: #cc6622;
        }
        #crafting-panel.station-campfire .panel-title { color: #ffaa44; text-shadow: 0 0 8px #ff660088; }
        #crafting-panel.station-campfire .craft-progress-fill {
            background: linear-gradient(to right, #883311, #ff6622);
        }
        #crafting-panel.station-campfire .craft-btn:not(.disabled) {
            background: linear-gradient(to bottom, #aa4411, #772200);
            border-color: #ff7733;
        }
        #crafting-panel.station-campfire .craft-btn:not(.disabled):active {
            background: linear-gradient(to bottom, #cc5522, #993300);
        }
        @keyframes craft-pulse-campfire {
            0%, 100% { box-shadow: 0 0 4px rgba(255,102,34,0.3); }
            50% { box-shadow: 0 0 10px rgba(255,102,34,0.6); }
        }
        #crafting-panel.station-campfire .craft-progress-track.crafting {
            animation: craft-pulse-campfire 0.8s ease-in-out infinite;
        }

        /* ---- Station Theme: Workbench ---- */
        #crafting-panel.station-workbench .panel-header {
            background: linear-gradient(to right, #1a1508, #120e04);
            border-bottom-color: #8b6914;
        }
        #crafting-panel.station-workbench .panel-title { color: #ddb844; text-shadow: 0 0 8px #aa880088; }
        #crafting-panel.station-workbench .craft-progress-fill {
            background: linear-gradient(to right, #5a3a10, #c8a050);
        }
        #crafting-panel.station-workbench .craft-btn:not(.disabled) {
            background: linear-gradient(to bottom, #6b4423, #3a2010);
            border-color: #a07030;
        }
        #crafting-panel.station-workbench .craft-btn:not(.disabled):active {
            background: linear-gradient(to bottom, #8b5e3c, #5a3a20);
        }
        @keyframes craft-pulse-workbench {
            0%, 100% { box-shadow: 0 0 4px rgba(200,160,80,0.3); }
            50% { box-shadow: 0 0 10px rgba(200,160,80,0.6); }
        }
        #crafting-panel.station-workbench .craft-progress-track.crafting {
            animation: craft-pulse-workbench 0.8s ease-in-out infinite;
        }

        /* ---- Building Panel ---- */
        #building-panel .panel-body {
            padding: 10px;
            overflow-y: auto;
        }
        .build-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
        }
        .build-item {
            background: #141428;
            border: 2px solid #2a2a44;
            border-radius: 6px;
            padding: 8px 4px 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            touch-action: manipulation;
            transition: border-color 0.1s, background 0.1s;
            -webkit-user-select: none; user-select: none;
        }
        .build-item.available { border-color: #4444aa; }
        .build-item.available:active { border-color: #6688ff; background: #1a1a38; }
        .build-item.unavailable { opacity: 0.45; cursor: default; }
        .build-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .build-item-name {
            font-size: 9px;
            color: #ccccdd;
            text-align: center;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        .build-item-count {
            font-size: 10px;
            color: #ffdd44;
            font-weight: bold;
        }

        /* ---- Chest Panel — Unified Split-View ---- */
        /* The panel itself stretches to use all available height */
        .chest-panel-split {
            max-height: min(90svh, calc(100vh - 160px)) !important;
            display: flex;
            flex-direction: column;
        }
        /* Body: two scrollable halves + slide-up detail overlay */
        .chest-split-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }
        /* Each half: chest or player inventory */
        .chest-half {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }
        .chest-half-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 10px;
            background: linear-gradient(to right, #0d0d22, #111128);
            border-bottom: 1px solid #2a2a44;
            flex-shrink: 0;
        }
        .chest-half-label {
            font-size: 10px;
            font-weight: bold;
            color: #cc8833;
            letter-spacing: 2px;
        }
        .chest-half-label.player-half-label { color: #44aa66; }
        .chest-half-count {
            font-size: 10px;
            color: #666688;
            font-family: var(--pixel-font);
        }
        .chest-half-grid-wrap {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 6px;
            /* Show scroll indicator on mobile */
            scrollbar-width: thin;
            scrollbar-color: #3a3a66 transparent;
        }
        .chest-half-grid-wrap::-webkit-scrollbar { display: none; }
        .chest-half-grid-wrap::-webkit-scrollbar-thumb { background: #3a3a66; border-radius: 2px; }
        .chest-half-grid-wrap { -ms-overflow-style: none; }
        /* Chest custom scroll track: positioned inside the grid wrapper container */
        .chest-scroll-track {
            /* inherits .inv-custom-scroll-track positioning (top:0, right:0, height:100%) */
        }
        /* On desktop, hide chest custom scroll tracks and show native scrollbar */
        @media (pointer: fine) and (hover: hover) and (min-width: 800px) {
            .chest-scroll-track { display: none !important; }
            .chest-half-grid-wrap {
                -ms-overflow-style: auto;
                scrollbar-width: thin;
                scrollbar-color: #4444aa #0a0a1a;
            }
            .chest-half-grid-wrap::-webkit-scrollbar { width: 6px; display: block; }
            .chest-half-grid-wrap::-webkit-scrollbar-track { background: #0a0a1a; border-radius: 3px; }
            .chest-half-grid-wrap::-webkit-scrollbar-thumb { background: #4444aa; border-radius: 3px; min-height: 40px; }
            .chest-half-grid-wrap::-webkit-scrollbar-thumb:active { background: #6666cc; }
        }
        /* Thin divider between the two halves */
        .chest-split-divider {
            height: 3px;
            background: linear-gradient(to right, transparent, #2a2a55, transparent);
            flex-shrink: 0;
        }
        /* Inline info bar — sits between chest and backpack halves */
        .inv-info-bar {
            flex-shrink: 0;
            background: rgba(8, 8, 20, 0.95);
            border-top: 1px solid #2a2a44;
            border-bottom: 1px solid #2a2a44;
            padding: 5px 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .info-bar-main {
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .info-icon {
            font-size: 22px;
            line-height: 1;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-shrink: 0;
        }
        .info-name {
            flex: 1;
            font-size: 12px;
            color: #ffffff;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info-name.placeholder { color: #444466; font-weight: normal; font-style: italic; }
        .info-close-btn {
            background: transparent;
            border: 1px solid #443322;
            border-radius: 3px;
            color: #aa6633;
            font-size: 11px;
            width: 22px;
            height: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            touch-action: manipulation;
            padding: 0;
        }
        .info-close-btn:active { background: #331111; }
        .info-bar-actions {
            display: flex;
            gap: 4px;
        }
        .inv-action {
            flex: 1;
            min-height: 36px;
            border-radius: 5px;
            border: 2px solid rgba(255,255,255,0.18);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 0.5px;
            background: linear-gradient(to bottom, #1a3a8a, #0f2460);
            transition: filter 0.08s;
            -webkit-user-select: none; user-select: none;
        }
        .inv-action:active { filter: brightness(1.3); transform: translateY(1px); }
        .inv-action.store { background: linear-gradient(to bottom, #155528, #0d3318); border-color: #33aa55; }
        /* Legacy: keep chest-detail-overlay reference working as hidden element */
        .chest-detail-overlay {
            display: none !important;
        }
        .chest-detail-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .chest-detail-icon {
            font-size: 26px;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a35;
            border-radius: 6px;
            border: 1px solid #2a2a55;
            flex-shrink: 0;
        }
        .chest-detail-info { flex: 1; min-width: 0; }
        .chest-detail-name {
            font-size: 14px;
            color: #ffffff;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .chest-detail-meta {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-top: 2px;
        }
        .chest-detail-count { font-size: 11px; color: #bbbbdd; }
        .chest-detail-type {
            font-size: 9px;
            color: #8899aa;
            padding: 1px 5px;
            background: #1a1a30;
            border-radius: 3px;
        }
        .chest-detail-close-btn {
            background: #331111;
            border: 2px solid #ff4444;
            border-radius: 4px;
            color: #ff4444;
            font-size: 14px;
            font-weight: bold;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            touch-action: manipulation;
        }
        .chest-detail-stats {
            font-size: 11px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 6px;
            min-height: 0;
        }
        /* Action buttons in detail overlay */
        .chest-action-btns {
            display: flex;
            gap: 5px;
        }
        /* Sub-quantity label inside action buttons */
        .btn-sub-qty {
            display: block;
            font-size: 8px;
            opacity: 0.75;
            font-weight: normal;
            letter-spacing: 0;
        }
        /* Take (chest -> player) button color */
        .btn-take { background: linear-gradient(to bottom, #1a44aa, #2255cc); border-color: #5588ff; }
        /* Store (player -> chest) button color */
        .btn-store { background: linear-gradient(to bottom, #155528, #228844); border-color: #44cc66; }
        /* Quantity picker input */
        .chest-qty-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0 0;
        }
        .chest-qty-label { font-size: 10px; color: #8888cc; }
        .chest-qty-input {
            flex: 1;
            background: #0a0a1a;
            border: 2px solid #3a3a66;
            border-radius: 4px;
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            padding: 4px 6px;
            min-height: 36px;
            touch-action: manipulation;
        }
        .chest-qty-input:focus { outline: none; border-color: #ffdd44; }
        .chest-qty-btn {
            min-width: 36px;
            min-height: 36px;
            background: #1a1a30;
            border: 2px solid #3a3a66;
            border-radius: 4px;
            color: #ccccdd;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chest-qty-btn:active { background: #2a2a44; }
        /* Chest action buttons — compact text to fit 4 buttons on mobile */
        .chest-action-btns .panel-btn {
            font-size: 9px;
            letter-spacing: 0;
            flex-direction: column;
            line-height: 1.2;
            gap: 0;
        }
        /* Qty buttons enlarged for touch */
        .chest-qty-btn {
            min-width: 44px;
            min-height: 44px;
        }
        /* Mobile: smaller grid on very small screens */
        @media (max-width: 380px) {
            .chest-detail-overlay { padding: 8px; gap: 6px; }
            .chest-detail-name { font-size: 12px; }
            .chest-action-btns { gap: 3px; }
            .chest-action-btns .panel-btn { font-size: 8px; }
        }

        /* ======== FISHING PANEL ======== */
        #fishing-panel .game-panel {
            max-width: 340px;
        }
        #fishing-panel .panel-body {
            padding: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            min-height: 280px;
        }

        .fish-phase-title {
            font-size: 16px;
            font-weight: bold;
            color: #ffdd44;
            text-shadow: 0 0 8px #ffaa0088;
            letter-spacing: 2px;
            text-align: center;
        }
        .fish-phase-title.fish-bite-alert { color: #ff4455; text-shadow: 0 0 10px #ff004488; animation: fish-pulse 0.5s ease-in-out infinite; }
        .fish-phase-title.fish-success     { color: #44ff88; text-shadow: 0 0 10px #00ff4488; }
        .fish-phase-title.fish-miss        { color: #ff7744; }

        @keyframes fish-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%       { opacity: 0.7; transform: scale(1.04); }
        }

        .fish-water-anim {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px 0;
        }
        .fish-water-anim.biting { animation: fish-shake 0.2s ease-in-out infinite; }
        @keyframes fish-shake {
            0%, 100% { transform: translateX(0); }
            25%       { transform: translateX(-3px); }
            75%       { transform: translateX(3px); }
        }
        .fish-bobber-icon {
            font-size: 32px;
            line-height: 1;
        }
        .fish-bobber-icon.bounce { animation: fish-bounce 0.3s ease-in-out infinite alternate; }
        @keyframes fish-bounce {
            from { transform: translateY(0); }
            to   { transform: translateY(-8px); }
        }
        .fish-ripple-row {
            font-size: 13px;
            color: #4488cc;
            letter-spacing: 3px;
            font-family: var(--pixel-font);
        }
        .fish-ripple-row.biting { color: #ff4455; font-weight: bold; letter-spacing: 4px; }

        .fish-tip {
            font-size: 11px;
            color: #6666aa;
            text-align: center;
            letter-spacing: 1px;
        }

        /* --- Minigame bar --- */
        .fish-minigame-wrap {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px 0;
        }
        .fish-bar-outer {
            position: relative;
            width: 60px;
            height: 200px;
            background: #1a1a2a;
            border: 3px solid #444466;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
        }
        .fish-catch-zone {
            position: absolute;
            left: 0;
            width: 100%;
            background: rgba(68,255,136,0.22);
            border-top: 2px solid #44ff88;
            border-bottom: 2px solid #44ff88;
            box-shadow: 0 0 12px rgba(68,255,136,0.3) inset;
            transition: top 0.05s, height 0.05s;
        }
        .fish-indicator {
            position: absolute;
            left: 4px;
            right: 4px;
            height: 12px;
            border-radius: 4px;
            background: #ff4455;
            box-shadow: 0 0 6px #ff4455;
            transform: translateY(-50%);
            transition: background 0.08s;
        }
        .fish-bar-label {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 8px;
            color: #444466;
            font-family: var(--pixel-font);
            pointer-events: none;
        }
        .fish-bar-label.top { top: 3px; }
        .fish-bar-label.bot { bottom: 3px; }

        /* --- Buttons --- */
        .fish-catch-btn {
            width: 100%;
            min-height: 52px;
            border-radius: 8px;
            border: 3px solid #44cc66;
            background: linear-gradient(to bottom, #228844, #155528);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 2px;
            box-shadow: 0 4px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
            transition: transform 0.08s, box-shadow 0.08s;
            -webkit-user-select: none; user-select: none;
        }
        .fish-catch-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.5); filter: brightness(1.25); }

        .fish-retry-btn {
            width: 100%;
            min-height: 44px;
            border-radius: 6px;
            border: 2px solid #5588ff;
            background: linear-gradient(to bottom, #2255cc, #1133aa);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 1px;
            box-shadow: 0 3px 0 rgba(0,0,0,0.4);
            -webkit-user-select: none; user-select: none;
        }
        .fish-retry-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }

        .fish-leave-btn {
            width: 100%;
            min-height: 36px;
            border-radius: 6px;
            border: 2px solid #555566;
            background: linear-gradient(to bottom, #333344, #222233);
            color: #aaaacc;
            font-family: var(--pixel-font);
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 1px;
            box-shadow: 0 2px 0 rgba(0,0,0,0.3);
            -webkit-user-select: none; user-select: none;
        }
        .fish-leave-btn:active { transform: translateY(1px); }

        /* --- Caught fish card --- */
        .fish-caught-card {
            width: 100%;
            background: rgba(20,15,35,0.97);
            border: 3px solid #8822cc;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            box-shadow: 0 0 20px rgba(120,0,200,0.3);
        }
        .fish-caught-emoji { font-size: 40px; line-height: 1; }
        .fish-caught-emoji.has-pixel-icon { width: 52px; height: 52px; }
        .fish-caught-name  { font-size: 16px; font-weight: bold; letter-spacing: 2px; }
        .fish-caught-rarity { font-size: 11px; font-weight: bold; letter-spacing: 3px; padding: 2px 8px; border-radius: 3px; }
        .fish-caught-stats { font-size: 11px; color: #88ccaa; }

        .rarity-common    { color: #aaaacc; background: rgba(100,100,150,0.2); }
        .rarity-uncommon  { color: #44cc88; background: rgba(50,150,100,0.2); }
        .rarity-rare      { color: #4488ff; background: rgba(50,100,200,0.2); }
        .rarity-epic      { color: #cc44ff; background: rgba(150,50,200,0.2); }
        .rarity-legendary { color: #ffdd22; background: rgba(200,150,0,0.25); animation: fish-pulse 1.5s ease-in-out infinite; }

        /* ---- Day/Night ambient glow on game container ---- */
        #game-container {
            transition: border-color 2s ease;
        }
        #game-container.night-mode {
            border-color: #1a1a44;
        }

        /* ---- Top HUD day/night transition ---- */
        #top-hud {
            transition: background 2s ease, border-color 2s ease;
        }
        #top-hud.night-mode {
            background: linear-gradient(to bottom, #0a0a20, #060618);
            border-bottom-color: #333388;
        }

        /* ---- Bottom bar day/night transition ---- */
        #bottom-controls {
            transition: background 2s ease, border-color 2s ease;
        }
        #bottom-controls.night-mode {
            background: linear-gradient(to top, #0a0a20, #060618);
            border-top-color: #333388;
        }

        /* ---- Item collect pulse on INV button ---- */
        @keyframes inv-pulse {
            0% { filter: brightness(1); }
            50% { filter: brightness(1.8); }
            100% { filter: brightness(1); }
        }
        .inv-pulse {
            animation: inv-pulse 0.4s ease-out;
        }

        /* ---- Level up glow on level text ---- */
        @keyframes level-glow {
            0% { text-shadow: 0 0 6px #00ff4488; color: #44ff88; }
            50% { text-shadow: 0 0 16px #ffdd44, 0 0 30px #ffaa00; color: #ffdd44; transform: scale(1.3); }
            100% { text-shadow: 0 0 6px #00ff4488; color: #44ff88; transform: scale(1); }
        }
        .level-up-glow {
            animation: level-glow 0.8s ease-out;
        }

        /* ---- XP gain pulse ---- */
        @keyframes xp-pulse {
            0% { color: #9999dd; }
            50% { color: #ddddff; text-shadow: 0 0 8px #8888cc; }
            100% { color: #9999dd; }
        }
        .xp-pulse {
            animation: xp-pulse 0.5s ease-out;
        }

        /* ---- Hover/active states for interactive elements ---- */
        @media (hover: hover) {
            .dpad-btn:hover { background: linear-gradient(to bottom, #2a2a50, #1e1e40); border-color: #6666aa; }
            .act-btn:hover { filter: brightness(1.12); }
            .inv-slot:hover { border-color: #5555aa; background: #1a1a30; }
            .inv-equip-slot:not(.inv-eq-locked):hover { border-color: #5555aa; background: #1a1a30; }
            .craft-recipe-item:hover { background: #151530; }
            .craft-card:hover { filter: brightness(1.1); }
            .craft-tab:hover { background: #14142a; color: #ccbbff; }
            .build-item.available:hover { border-color: #5577cc; background: #161630; }
            .panel-btn:hover { filter: brightness(1.15); }
            .craft-btn:not(.disabled):hover { filter: brightness(1.15); }
            .trade-action-btn:not(.disabled):hover { filter: brightness(1.15); }
            .quest-btn:not(.quest-btn-disabled):hover { filter: brightness(1.15); }
            .chest-slot.filled:hover { border-color: #ddaa44; background: #1e1a10; }
        }

        /* ---- Mobile tweaks ---- */
        @media (max-width: 500px) {
            .inv-equip-slots { grid-template-columns: repeat(4, 1fr); gap: 3px; }
            .craft-list { width: 140px; }
            .game-panel { max-height: min(70vh, calc(100vh - 180px)); }
            /* Inventory panel needs !important to override base rule on mobile too */
            .inv-panel-redesign { max-height: min(70svh, calc(100vh - 210px)) !important; }
            .build-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }

            /* Shrink minimap on small screens to preserve game viewport */
            #minimap-wrap { width: 64px; height: 64px; top: 6px; right: 6px; }
            #minimap { width: 64px; height: 64px; opacity: 0.4; }
            #minimap-wrap:active #minimap { opacity: 0.85; }

            /* Thinner side borders on mobile to maximize game area */
            #game-container { border-left-width: 1px; border-right-width: 1px; }

            /* Compact biome HUD */
            #biome-hud { gap: 2px; top: 4px; left: 4px; }
            .biome-bar-row { padding: 2px 5px; max-width: min(42vw, 140px); }
            #biome-label { font-size: 9px; padding: 2px 5px; }
            #biome-danger-text { font-size: 9px; }
        }

        /* ---- Portrait mobile specific (primary target) ---- */
        @media (max-width: 430px) and (max-height: 950px) {
            /* Tighter top HUD */
            #top-hud { padding: 2px 3px; padding-top: calc(2px + env(safe-area-inset-top, 0px)); gap: 2px; }
            .bar-track { width: clamp(40px, 11vw, 60px); height: 8px; }
            .bar-val { font-size: 7px; }
            .hud-icon { font-size: 11px; width: 13px; }
            #hud-day { font-size: 8px; }
            #hud-quest-reminder { font-size: 8px; max-width: 110px; }
            #hud-gold { font-size: 8px; }
            #hud-level { font-size: 10px; }
            #hud-xp { font-size: 7px; }
            #hud-gear-btn { width: 26px; height: 26px; font-size: 12px; }

            /* Slightly smaller minimap on very narrow phones */
            #minimap-wrap { width: 56px; height: 56px; top: 4px; right: 4px; }
            #minimap { width: 56px; height: 56px; opacity: 0.35; }
            #minimap-wrap:active #minimap { opacity: 0.85; }
        }

        /* ---- Very small phones (iPhone SE etc) ---- */
        @media (max-width: 380px) {
            #dpad {
                grid-template-columns: 38px 38px 38px;
                grid-template-rows: 38px 38px 38px;
            }
            .act-btn {
                width: clamp(56px, 14vw, 72px);
                height: clamp(46px, 11vw, 60px);
            }
            .btn-icon { font-size: 18px; }
            .btn-label { font-size: 8px; }
            #action-buttons { gap: 3px; }
            #bottom-controls { padding: 6px 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
        }

        /* ---- Tall phones (iPhone Pro Max, Samsung S series) ---- */
        @media (min-width: 390px) and (min-height: 800px) and (max-width: 500px) {
            #dpad {
                grid-template-columns: 44px 44px 44px;
                grid-template-rows: 44px 44px 44px;
            }
            .act-btn {
                width: clamp(66px, 17vw, 84px);
                height: clamp(54px, 13vw, 70px);
            }
            .btn-icon { font-size: 24px; }
            #bottom-controls { padding: 10px 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
        }

        /* ---- HUD Gold ---- */
        #hud-gold {
            font-size: 9px;
            color: #f8e020;
            font-weight: bold;
            text-shadow: 0 0 6px #cc880088;
            white-space: nowrap;
        }

        /* ====== TRADE PANEL ====== */
        #trade-panel .panel-body {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
            flex: 1;
        }
        .trade-gold-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 14px 6px;
            background: #0d0d1e;
            border-bottom: 1px solid #2a2a44;
            flex-shrink: 0;
        }
        .trade-gold-label {
            font-size: 12px;
            color: #aaaacc;
            font-family: var(--pixel-font);
        }
        .trade-gold-amount {
            font-size: 16px;
            color: #f8e020;
            font-weight: bold;
            font-family: var(--pixel-font);
            text-shadow: 0 0 8px #cc880066;
        }
        .trade-tabs {
            display: flex;
            border-bottom: 2px solid #2a2a44;
            flex-shrink: 0;
            background: #0a0a18;
        }
        .trade-tab-btn {
            flex: 1;
            padding: 10px 8px;
            background: transparent;
            border: none;
            color: #666688;
            font-family: var(--pixel-font);
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            letter-spacing: 1px;
            touch-action: manipulation;
            transition: background 0.1s, color 0.1s;
            border-bottom: 3px solid transparent;
            -webkit-user-select: none; user-select: none;
        }
        .trade-tab-btn:active { background: #1a1a30; }
        .trade-tab-btn.active {
            color: #ffdd44;
            border-bottom-color: #ffdd44;
            background: #111128;
            text-shadow: 0 0 6px rgba(255,220,68,0.4);
        }
        .trade-item-list {
            flex: 1;
            overflow-y: auto;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .trade-item-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: #0f0f22;
            border: 1px solid #2a2a44;
            border-radius: 6px;
            gap: 8px;
            min-height: 52px;
        }
        .trade-item-row.trade-cant-afford { opacity: 0.6; }
        /* Affordability price coloring */
        .trade-item-price.trade-price-affordable   { color: #f8e020; }
        .trade-item-price.trade-price-unaffordable { color: #cc4444; }
        /* Deficit hint — shown on hover/focus of unaffordable row */
        .trade-deficit-hint {
            display: none;
            font-size: 9px;
            color: #ff8888;
            font-family: var(--pixel-font);
            margin-top: 2px;
        }
        .trade-item-row.trade-cant-afford:hover .trade-deficit-hint,
        .trade-item-row.trade-cant-afford.trade-hint-visible .trade-deficit-hint {
            display: block;
        }
        .trade-item-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }
        .trade-item-name {
            font-size: 11px;
            color: #ccccdd;
            font-family: var(--pixel-font);
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .trade-item-price {
            font-size: 10px;
            color: #f8e020;
            font-family: var(--pixel-font);
        }
        .trade-sell-price { color: #44ff88; }
        .trade-action-btn {
            min-height: 36px;
            min-width: 44px;
            padding: 4px 10px;
            border-radius: 6px;
            border: 2px solid #44cc66;
            background: linear-gradient(to bottom, #228844, #155528);
            color: #ffffff;
            font-family: var(--pixel-font);
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 0 rgba(0,0,0,0.4);
            transition: transform 0.08s, box-shadow 0.08s;
            flex-shrink: 0;
            -webkit-user-select: none; user-select: none;
        }
        .trade-action-btn:active {
            transform: translateY(1px);
            box-shadow: 0 0px 0 rgba(0,0,0,0.4);
            filter: brightness(1.25);
        }
        .trade-action-btn.disabled {
            background: linear-gradient(to bottom, #333344, #222233);
            border-color: #555566;
            color: #888899;
            cursor: default;
        }
        .trade-action-btn.disabled:active { transform: none; }
        .trade-sell-btn {
            border-color: #cc4444;
            background: linear-gradient(to bottom, #882222, #551515);
        }
        .trade-sell-all-btn {
            border-color: #cc4444;
            background: linear-gradient(to bottom, #882222, #551515);
            font-size: 9px;
            white-space: nowrap;
        }
        .trade-btn-group {
            display: flex;
            flex-direction: row;
            gap: 5px;
            flex-shrink: 0;
            align-items: center;
        }
        .trade-empty {
            text-align: center;
            color: #555577;
            font-size: 12px;
            font-family: var(--pixel-font);
            padding: 24px 0;
            line-height: 1.8;
        }
        .trade-npc-greeting {
            padding: 8px 14px;
            font-size: 11px;
            color: #8888aa;
            font-style: italic;
            font-family: var(--pixel-font);
            border-bottom: 1px solid #1a1a30;
            flex-shrink: 0;
            background: #09091a;
        }
        @media (max-width: 500px) {
            .trade-item-name { font-size: 10px; }
            .trade-sell-all-btn { font-size: 8px; }
        }

        /* ====== QUEST PANEL ====== */
        #npc-quest-list,
        #npc-questlog-body {
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .quest-card {
            padding: 10px 12px;
            background: #0f0f22;
            border: 1px solid #2a2a44;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .quest-card-active {
            border-color: #2563EB;
            box-shadow: 0 0 6px rgba(37, 99, 235, 0.2);
        }
        .quest-card-title {
            font-family: var(--pixel-font);
            font-size: 9px;
            color: #ffdd44;
            font-weight: bold;
            line-height: 1.4;
            word-break: break-word;
        }
        .quest-card-desc {
            font-family: var(--pixel-font);
            font-size: 11px;
            color: #aaaacc;
            line-height: 1.5;
            word-break: break-word;
        }
        .quest-progress-text {
            font-family: var(--pixel-font);
            font-size: 10px;
            color: #44bbff;
            font-weight: bold;
        }
        .quest-card-reward {
            font-family: var(--pixel-font);
            font-size: 10px;
            color: #f8e020;
            line-height: 1.4;
            word-break: break-word;
        }
        .quest-empty-msg {
            text-align: center;
            color: #555577;
            font-size: 11px;
            font-family: var(--pixel-font);
            padding: 24px 0;
            line-height: 1.8;
        }
        .quest-btn {
            min-height: 36px;
            padding: 6px 12px;
            border-radius: 6px;
            border: 2px solid #4444aa;
            background: linear-gradient(to bottom, #1a1a4a, #111133);
            color: #ccccdd;
            font-family: var(--pixel-font);
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
            transition: transform 0.08s, box-shadow 0.08s;
            -webkit-user-select: none;
            user-select: none;
        }
        .quest-btn:active {
            transform: translateY(1px);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
            filter: brightness(1.25);
        }
        .quest-accept-btn {
            border-color: #44cc66;
            background: linear-gradient(to bottom, #228844, #155528);
            color: #ffffff;
        }
        .quest-board-label {
            font-family: var(--pixel-font);
            font-size: 9px;
            color: #8888cc;
            letter-spacing: 1px;
            padding: 8px 4px 4px;
            border-bottom: 1px solid #2a2a44;
            margin-bottom: 2px;
        }
        @media (max-width: 500px) {
            .quest-card-title { font-size: 8px; }
            .quest-card-desc { font-size: 10px; }
            .quest-progress-text { font-size: 9px; }
            .quest-card-reward { font-size: 9px; }
            .quest-board-label { font-size: 8px; }
        }

        /* ---- Farm Panel ---- */
        #farm-panel .panel-body {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
        }
        #farm-crop-title {
            font-size: 14px;
            color: #ffdd44;
            font-weight: bold;
            min-height: 20px;
        }
        #farm-status {
            font-size: 12px;
            color: #aaaacc;
            min-height: 16px;
        }
        .farm-progress-track {
            height: 12px;
            background: #1a1a2a;
            border: 1px solid #333355;
            border-radius: 4px;
            overflow: hidden;
        }
        .farm-progress-fill {
            height: 100%;
            background: linear-gradient(to right, #3d7a1e, #66dd33);
            border-radius: 4px;
            width: 0%;
            transition: width 0.5s ease;
        }
        #farm-crop-info {
            font-size: 11px;
            color: #88ccaa;
            min-height: 14px;
        }
        #farm-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .farm-seed-btn, .farm-water-btn, .farm-harvest-btn, .farm-uproot-btn {
            width: 100%;
            min-height: 44px;
            border-radius: 6px;
            border: 2px solid rgba(255,255,255,0.22);
            color: #fff;
            font-family: var(--pixel-font);
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            touch-action: manipulation;
            box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
            transition: transform 0.08s, box-shadow 0.08s;
            -webkit-user-select: none; user-select: none;
            background: linear-gradient(to bottom, #228844, #155528);
            border-color: #44cc66;
            padding: 8px 12px;
        }
        .farm-seed-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .farm-seed-icon {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .farm-seed-btn:active, .farm-water-btn:active,
        .farm-harvest-btn:active, .farm-uproot-btn:active {
            transform: translateY(2px);
            box-shadow: 0 1px 0 rgba(0,0,0,0.4);
            filter: brightness(1.2);
        }
        .farm-water-btn   { background: linear-gradient(to bottom, #1a6688, #104466); border-color: #44aacc; }
        .farm-harvest-btn { background: linear-gradient(to bottom, #885c11, #5a3c08); border-color: #ccaa44; }
        .farm-uproot-btn  { background: linear-gradient(to bottom, #554444, #332233); border-color: #775555; font-size: 11px; min-height: 36px; }
        .farm-seed-btn.disabled, .farm-water-btn.disabled,
        .farm-harvest-btn.disabled, .farm-uproot-btn.disabled {
            background: linear-gradient(to bottom, #333344, #222233);
            border-color: #555566;
            color: #888899;
            cursor: default;
        }
        .farm-seed-btn.disabled:active, .farm-water-btn.disabled:active,
        .farm-harvest-btn.disabled:active, .farm-uproot-btn.disabled:active {
            transform: none;
            box-shadow: 0 3px 0 rgba(0,0,0,0.4);
            filter: none;
        }

        /* ---- Offline Popup ---- */
        #offline-popup .game-panel {
            max-width: 380px;
        }
        #offline-popup .panel-body {
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            max-height: 50vh;
        }
        .offline-time {
            font-size: 13px;
            color: #ccccdd;
            padding-bottom: 6px;
            border-bottom: 1px solid #2a2a44;
            margin-bottom: 4px;
        }
        .offline-section {
            font-size: 12px;
            color: #ffdd44;
            font-weight: bold;
            margin-top: 4px;
        }
        .offline-row {
            font-size: 12px;
            color: #88ff88;
            padding-left: 8px;
        }
        #offline-popup-footer {
            padding: 10px 12px;
            border-top: 1px solid #2a2a44;
            flex-shrink: 0;
        }

        /* ====== LIGHTHOUSE PANEL COMPONENT SLOTS ====== */
        .lh-component-slot {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid #2a2a44;
            border-radius: 6px;
            padding: 8px 10px;
            font-family: var(--pixel-font);
        }
        .lh-component-slot.lh-found {
            border-color: #22cc44;
            background: rgba(34,204,68,0.08);
        }
        .lh-component-slot.lh-missing {
            border-color: #cc2244;
            background: rgba(204,34,68,0.06);
        }
        .lh-comp-icon {
            font-size: 24px;
            flex-shrink: 0;
            width: 32px;
            text-align: center;
        }
        .lh-comp-info {
            flex: 1;
            min-width: 0;
        }
        .lh-comp-name {
            font-size: 13px;
            font-weight: bold;
            color: #facc15;
            margin-bottom: 2px;
        }
        .lh-comp-lore {
            font-size: 10px;
            color: #8888aa;
            font-style: italic;
            margin-bottom: 2px;
        }
        .lh-comp-status {
            font-size: 11px;
            color: #c0c0d0;
        }
        .lh-component-slot.lh-found .lh-comp-status { color: #44ee66; }
        .lh-component-slot.lh-missing .lh-comp-status { color: #ff6688; }

        /* ====== ACHIEVEMENT TOAST (slides from top) ====== */
        #achievement-toast {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            background: linear-gradient(135deg, #1a0a30, #2a1040);
            border: 2px solid #cc44ff;
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 250;
            pointer-events: none;
            box-shadow: 0 4px 20px rgba(150, 0, 255, 0.4), inset 0 1px 0 rgba(200,100,255,0.15);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            min-width: 220px;
            max-width: 85vw;
            white-space: nowrap;
        }
        #achievement-toast.visible {
            transform: translateX(-50%) translateY(0);
        }
        .ach-toast-icon {
            font-size: 28px;
            line-height: 1;
            flex-shrink: 0;
            filter: drop-shadow(0 0 6px rgba(200,100,255,0.8));
        }
        .ach-toast-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .ach-toast-title {
            font-size: 9px;
            color: #cc44ff;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: var(--pixel-font);
        }
        .ach-toast-name {
            font-size: 14px;
            color: #ffffff;
            font-weight: bold;
            letter-spacing: 1px;
            font-family: var(--pixel-font);
            text-shadow: 0 0 8px rgba(200,100,255,0.6);
        }

        /* ====== ACHIEVEMENT PANEL ====== */
        /* ---- Bug Report Button + Panel ---- */
        #bug-report-btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(20, 20, 40, 0.6);
            border: 2px solid rgba(80, 80, 180, 0.55);
            color: #ccccdd;
            font-size: 18px;
            cursor: pointer;
            z-index: 160;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
            touch-action: manipulation;
            line-height: 1;
            padding: 0;
            font-family: sans-serif;
        }
        #bug-report-btn:hover {
            background: rgba(30, 30, 70, 0.85);
            border-color: rgba(120, 120, 220, 0.9);
            transform: scale(1.08);
        }
        #bug-report-btn:active { transform: scale(0.93); }

        #bugreport-panel .panel-body {
            padding: 12px 14px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
        }
        .br-field-label {
            font-size: 11px;
            color: #aaaacc;
            letter-spacing: 1px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 4px;
            font-family: var(--pixel-font);
        }
        #br-category {
            width: 100%;
            background: #0d0d22;
            border: 1px solid #4444aa;
            border-radius: 4px;
            color: #ccccdd;
            font-family: var(--pixel-font);
            font-size: 13px;
            padding: 6px 8px;
            box-sizing: border-box;
        }
        #br-description {
            width: 100%;
            background: #0d0d22;
            border: 1px solid #4444aa;
            border-radius: 4px;
            color: #ccccdd;
            font-family: var(--pixel-font);
            font-size: 12px;
            padding: 8px;
            box-sizing: border-box;
            resize: vertical;
            min-height: 70px;
            max-height: 140px;
        }
        #br-category:focus, #br-description:focus {
            outline: none;
            border-color: #7777ee;
        }
        #br-context-display {
            background: #08081a;
            border: 1px solid #2a2a55;
            border-radius: 4px;
            color: #8888bb;
            font-family: var(--pixel-font);
            font-size: 10px;
            padding: 7px 9px;
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.5;
            max-height: 100px;
            overflow-y: auto;
        }
        .br-screenshot-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #aaaacc;
            font-family: var(--pixel-font);
        }
        #br-screenshot { width: 16px; height: 16px; cursor: pointer; accent-color: #2563EB; }
        #br-submit-btn {
            background: #1a1a44;
            border: 2px solid #4444cc;
            border-radius: 5px;
            color: #ccccff;
            font-family: var(--pixel-font);
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 1px;
            padding: 10px 0;
            cursor: pointer;
            width: 100%;
            transition: background 0.15s, border-color 0.15s;
            touch-action: manipulation;
        }
        #br-submit-btn:hover { background: #22226a; border-color: #6666ee; }
        #br-submit-btn:active { background: #2a2a7a; }
        #br-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .br-status {
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 4px;
            text-align: center;
            font-family: var(--pixel-font);
            margin-bottom: 4px;
            background: rgba(40,40,80,0.8);
            color: #aaaadd;
            border: 1px solid #333355;
        }
        .br-status.success { color: #44ee88; border-color: #226644; background: rgba(10,40,20,0.8); }
        .br-status.error   { color: #ee6666; border-color: #662222; background: rgba(40,10,10,0.8); }

        /* Achievements panel (unchanged, just moved below) */
        #achievements-panel .panel-body {
            padding: 10px 12px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
            min-height: 0;
        }
        .ach-summary {
            font-size: 13px;
            color: #cc44ff;
            font-weight: bold;
            text-align: center;
            padding: 8px 0 12px;
            border-bottom: 1px solid #2a2a44;
            margin-bottom: 10px;
            font-family: var(--pixel-font);
            letter-spacing: 1px;
        }
        .ach-category-header {
            font-size: 11px;
            color: #ffdd44;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 10px 0 5px;
            border-bottom: 1px solid #2a2a33;
            margin-bottom: 6px;
            font-family: var(--pixel-font);
        }
        .ach-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 6px;
            border-radius: 6px;
            margin-bottom: 5px;
            background: #0f0f22;
            border: 1px solid #1e1e33;
            transition: border-color 0.2s;
        }
        .ach-row.ach-unlocked {
            background: linear-gradient(135deg, #120a28, #1a1035);
            border-color: #8833bb;
            box-shadow: 0 0 8px rgba(150, 50, 200, 0.2);
        }
        .ach-row.ach-locked {
            opacity: 0.7;
        }
        .ach-icon {
            font-size: 24px;
            line-height: 1;
            flex-shrink: 0;
            width: 32px;
            text-align: center;
            padding-top: 2px;
        }
        .ach-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .ach-name {
            font-size: 12px;
            color: #ffffff;
            font-weight: bold;
            font-family: var(--pixel-font);
            letter-spacing: 0.5px;
        }
        .ach-row.ach-unlocked .ach-name {
            color: #dd88ff;
        }
        .ach-desc {
            font-size: 10px;
            color: #8888aa;
            font-family: var(--pixel-font);
            line-height: 1.4;
        }
        .ach-date {
            font-size: 9px;
            color: #9944cc;
            font-family: var(--pixel-font);
            font-style: italic;
        }
        .ach-progress-track {
            height: 6px;
            background: #1a1a2a;
            border: 1px solid #2a2a44;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 3px;
        }
        .ach-progress-fill {
            height: 100%;
            background: linear-gradient(to right, #4422aa, #cc44ff);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .ach-progress-text {
            font-size: 9px;
            color: #7755aa;
            font-family: var(--pixel-font);
        }

        /* ====== MINIMAP ====== */
        #minimap-wrap {
            position: absolute;
            top: 60px;
            right: 8px;
            width: 128px;
            height: 128px;
            z-index: 55;
            cursor: pointer;
        }
        #minimap {
            display: block;
            width: 128px;
            height: 128px;
            border: 2px solid #444488;
            background: #000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.7), inset 0 0 2px rgba(80,80,200,0.2);
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            opacity: 0.88;
        }
        #minimap-wrap:active #minimap { opacity: 1; border-color: #6666cc; }

        /* ====== FULLSCREEN MAP ====== */
        #fullmap-panel {
            position: fixed;
            inset: 0;
            z-index: 250;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            background: rgba(0,0,0,0);
            pointer-events: none;
            transition: background 0.2s ease;
            visibility: hidden;
        }
        #fullmap-panel.open {
            background: rgba(0,0,20,1);
            pointer-events: auto;
            visibility: visible;
        }
        #fullmap-header {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            padding-top: max(8px, calc(env(safe-area-inset-top, 0px) + 4px));
            background: #0d0d1e;
            border-bottom: 2px solid #664422;
            flex-shrink: 0;
        }
        #fullmap-title {
            flex: 1;
            font-size: 14px;
            font-weight: bold;
            color: #ffdd44;
            letter-spacing: 2px;
            font-family: var(--pixel-font);
            text-shadow: 0 0 8px #ffaa0088;
        }
        #fullmap-close-btn {
            background: #331111;
            border: 2px solid #ff4444;
            border-radius: 4px;
            color: #ff4444;
            font-size: 14px;
            font-weight: bold;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--pixel-font);
        }
        #fullmap-close-btn:active { background: #551111; border-color: #ff6666; }
        #fullmap-hint {
            font-size: 10px;
            color: #666688;
            font-family: var(--pixel-font);
            padding: 0 12px 0 0;
        }
        #fullmap-canvas {
            display: block;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            flex: 1;
            touch-action: none;
            cursor: grab;
            width: 100%;
        }
        #fullmap-canvas:active { cursor: grabbing; }

        /* MAP action button */
        #btn-map { background: linear-gradient(to bottom, #664422, #442211); border-color: #997744; }

        /* ====== LOADING SCREEN ====== */
        #loading-screen {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: #0a0a1a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            font-family: var(--pixel-font);
            transition: opacity 0.6s ease;
        }
        /* CRT scanline overlay */
        #loading-screen::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0px,
                transparent 2px,
                rgba(0,0,0,0.15) 2px,
                rgba(0,0,0,0.15) 4px
            );
            pointer-events: none;
        }
        .loading-title {
            font-size: 28px;
            color: #ffdd44;
            text-shadow: 0 0 20px rgba(255,221,68,0.3);
            letter-spacing: 3px;
        }
        .loading-subtitle {
            font-size: 13px;
            color: #8888aa;
            letter-spacing: 1px;
        }
        .loading-bar-track {
            width: 220px;
            height: 12px;
            background: #0a0a18;
            border: 2px solid #4444aa;
            border-radius: 2px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 8px rgba(68,68,170,0.3), inset 0 1px 3px rgba(0,0,0,0.5);
        }
        .loading-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(to right, #44ff88, #22cc66);
            transition: width 0.3s ease;
            position: relative;
            animation: fake-progress 3s ease-out forwards;
        }
        .loading-bar-fill.real {
            animation: none;
        }
        @keyframes fake-progress {
            0%   { width: 0%; }
            15%  { width: 12%; }
            40%  { width: 35%; }
            65%  { width: 55%; }
            85%  { width: 72%; }
            100% { width: 85%; }
        }
        /* Shimmer effect on progress bar */
        .loading-bar-fill::after {
            content: '';
            position: absolute;
            top: 0; left: -50%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            animation: loading-shimmer 1.5s infinite;
        }
        @keyframes loading-shimmer {
            0% { left: -50%; }
            100% { left: 150%; }
        }
        @keyframes loading-icon-pulse {
            0%, 100% { filter: drop-shadow(0 0 8px rgba(250,204,21,0.3)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 20px rgba(250,204,21,0.6)); transform: scale(1.05); }
        }
        .loading-pct {
            font-size: 14px;
            color: #44ff88;
            font-weight: bold;
            text-shadow: 0 0 6px rgba(68,255,136,0.4);
            font-variant-numeric: tabular-nums;
        }
        .loading-text {
            font-size: 11px;
            color: #6666aa;
        }

        /* ====== TITLE SCREEN ====== */
        #title-screen {
            position: fixed;
            inset: 0;
            z-index: 99998;
            background: #08081a;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            font-family: var(--pixel-font);
            transition: opacity 0.6s ease;
            overflow: hidden;
        }
        /* CRT scanline overlay on title too */
        #title-screen::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0px,
                transparent 2px,
                rgba(0,0,0,0.12) 2px,
                rgba(0,0,0,0.12) 4px
            );
            pointer-events: none;
        }
        /* Pixel-art border frame */
        .title-frame {
            position: relative;
            border: 3px solid #ffdd44;
            border-radius: 2px;
            padding: 40px 48px 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            box-shadow: 0 0 30px rgba(255,221,68,0.08), inset 0 0 30px rgba(0,0,0,0.3);
            background: rgba(10,10,30,0.85);
        }
        /* Corner accents */
        .title-frame::before, .title-frame::after {
            content: '◆';
            position: absolute;
            color: #ffdd44;
            font-size: 10px;
            text-shadow: 0 0 6px rgba(255,221,68,0.5);
        }
        .title-frame::before { top: -7px; left: -7px; }
        .title-frame::after { top: -7px; right: -7px; }
        .title-corner-bl, .title-corner-br {
            position: absolute;
            color: #ffdd44;
            font-size: 10px;
            text-shadow: 0 0 6px rgba(255,221,68,0.5);
        }
        .title-corner-bl { bottom: -7px; left: -7px; }
        .title-corner-br { bottom: -7px; right: -7px; }
        .title-banner {
            width: 100%;
            max-width: 480px;
            height: auto;
            border-radius: 4px;
            margin-bottom: 8px;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            box-shadow: 0 0 30px rgba(255,170,0,0.2);
        }
        .title-logo {
            font-size: 36px;
            color: #ffdd44;
            font-weight: bold;
            text-shadow: 0 0 24px rgba(255,170,0,0.4), 0 2px 0 #aa8800;
            letter-spacing: 5px;
            animation: title-glow 3s ease-in-out infinite;
        }
        @keyframes title-glow {
            0%, 100% { text-shadow: 0 0 24px rgba(255,170,0,0.4), 0 2px 0 #aa8800; }
            50% { text-shadow: 0 0 36px rgba(255,170,0,0.6), 0 2px 0 #aa8800, 0 0 60px rgba(255,221,68,0.15); }
        }
        .title-subtitle {
            font-size: 12px;
            color: #6666aa;
            letter-spacing: 3px;
            margin-bottom: 20px;
        }
        .title-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            width: 100%;
        }
        .title-btn {
            width: 180px;
            padding: 10px 0;
            font-family: var(--pixel-font);
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 2px;
            border: 2px solid;
            border-radius: 2px;
            cursor: pointer;
            text-align: center;
            transition: all 0.15s ease;
            text-transform: uppercase;
            position: relative;
        }
        .title-btn:hover {
            transform: scale(1.04);
            filter: brightness(1.2);
        }
        .title-btn:active {
            transform: scale(0.97);
        }
        .title-btn-continue {
            background: linear-gradient(to bottom, #1a3320, #0d1a10);
            border-color: #44ff88;
            color: #44ff88;
            text-shadow: 0 0 8px rgba(68,255,136,0.4);
            box-shadow: 0 0 12px rgba(68,255,136,0.15);
        }
        .title-btn-new {
            background: linear-gradient(to bottom, #1a1a33, #0d0d1e);
            border-color: #6666cc;
            color: #8888dd;
            text-shadow: 0 0 8px rgba(100,100,200,0.3);
            box-shadow: 0 0 12px rgba(100,100,200,0.1);
        }
        .title-version {
            position: absolute;
            bottom: 12px;
            right: 16px;
            font-size: 10px;
            color: #333355;
            letter-spacing: 1px;
        }
        /* Stars background */
        .title-stars {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .title-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #ffffff;
            border-radius: 50%;
            animation: star-twinkle 3s ease-in-out infinite;
        }
        @keyframes star-twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.8; }
        }

        /* 5-button grid: 2 cols, 3 rows, BUILD spans both cols */
        #action-buttons {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }

        /* ====== DESKTOP OVERRIDES ====== */
        /* Scope: pointer: fine + hover + min-width 800px (keyboard/mouse users) */
        /* Mobile layout (d-pad etc.) is untouched. */
        @media (pointer: fine) and (hover: hover) and (min-width: 800px) {

            /* 1. Hide D-Pad - keyboard users use WASD */
            #dpad { display: none; }

            /* 2. Bigger HP / Hunger bars */
            .bar-track {
                width: clamp(120px, 20vw, 200px);
                height: 16px;
                border-radius: 4px;
            }
            .bar-val {
                font-size: 13px;
                font-weight: bold;
            }
            .hud-icon {
                font-size: 18px;
            }

            /* 3. Bigger HUD text */
            #hud-day      { font-size: 16px; }
            #hud-gold     { font-size: 14px; }
            #hud-level    { font-size: 16px; }
            #hud-xp       { font-size: 12px; }
            #hud-info-row { font-size: 14px; }
            #hud-equip    { font-size: 12px; max-width: none; }

            /* 4a. Semi-transparent minimap (opaque on hover) */
            #minimap {
                opacity: 0.5;
                background: transparent;
            }
            #minimap-wrap:hover #minimap {
                opacity: 0.9;
            }

            /* 5. Action buttons - single horizontal row on desktop */
            #action-buttons {
                display: flex;
                flex-direction: row;
                gap: 6px;
                align-items: stretch;
            }
            #btn-act {
                font-size: 14px;
            }
            .act-btn {
                width: auto;
                min-width: 64px;
                height: 48px;
            }
            .act-btn .btn-icon  { font-size: 20px; }
            .act-btn .btn-label { font-size: 9px; }

            /* 6. Bottom controls - hints left, buttons right */
            #bottom-controls {
                justify-content: space-between;
                padding: 4px 16px;
            }

            #keyboard-hints {
                align-items: flex-start;
            }

            /* 7. Bot toggle + status text */
            #bot-toggle-btn {
                width: 36px !important;
                height: 36px !important;
                font-size: 20px !important;
            }
            #bot-status-label {
                font-size: 13px !important;
            }

            /* 8. Desktop Inventory - 2 column layout */
            .game-panel.inv-panel-redesign {
                max-width: 680px !important;
                width: min(92vw, 680px) !important;
            }
            .inv-body-redesign {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto 1fr;
                gap: 8px;
                overflow-y: auto;
            }
            /* Character section spans left column */
            .inv-char-section {
                grid-column: 1;
                grid-row: 1;
            }
            /* Equipment spans left column under character */
            .inv-equip-section {
                grid-column: 1;
                grid-row: 2;
            }
            /* Detail section at bottom of left column */
            .inv-detail-section {
                grid-column: 1;
                grid-row: 3;
                position: static !important;
                align-self: end;
            }
            /* Inventory grid spans full right column */
            .inv-grid-section {
                grid-column: 2;
                grid-row: 1 / 4;
                overflow-y: auto;
                max-height: 100%;
            }
            /* Bigger avatar on desktop */
            canvas.inv-avatar {
                width: 80px !important;
                height: 80px !important;
            }
            /* Wider panel body for grid layout */
            .inv-body-redesign {
                padding: 12px !important;
            }
            /* Wider inventory grid on desktop */
            .inv-grid {
                grid-template-columns: repeat(5, 1fr) !important;
                gap: 3px;
            }
            .inv-slot {
                min-height: 52px;
            }
        }



        /* ====== FEATURE FLAGS / LABS PANEL (localhost only) ====== */
        #labs-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.75); z-index: 10000; justify-content: center; align-items: center;
        }
        #labs-overlay.open { display: flex; }
        #labs-panel {
            background: #1a1a2e; border: 2px solid #22aa55; border-radius: 10px;
            max-width: 400px; width: 92vw; max-height: 80vh; display: flex; flex-direction: column;
            font-family: var(--pixel-font); color: #c8c8e0;
            box-shadow: 0 0 30px rgba(30,180,80,0.3);
        }
        #labs-header {
            padding: 12px 16px; border-bottom: 1px solid #1e5533; display: flex;
            justify-content: space-between; align-items: center;
        }
        #labs-header h2 { font-size: 14px; color: #44dd88; letter-spacing: 1px; margin: 0; }
        #labs-close { background: none; border: 1px solid #444; border-radius: 4px; color: #aaa;
            font-size: 14px; width: 24px; height: 24px; cursor: pointer; display: flex;
            align-items: center; justify-content: center; padding: 0; }
        #labs-close:active { background: #1e1e38; }
        #labs-body { overflow-y: auto; padding: 8px 12px; flex: 1; }
        .labs-flag-row {
            display: flex; align-items: flex-start; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid #1e1e38; gap: 10px;
        }
        .labs-flag-info { flex: 1; }
        .labs-flag-name { font-size: 11px; font-weight: bold; color: #88ddaa; letter-spacing: 0.5px; }
        .labs-flag-desc { font-size: 10px; color: #888899; margin-top: 2px; }
        .labs-flag-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
        .labs-reload-note { font-size: 9px; color: #666677; white-space: nowrap; }
        .labs-toggle { position: relative; display: inline-block; width: 38px; height: 20px; }
        .labs-toggle input { opacity: 0; width: 0; height: 0; }
        .labs-toggle-slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background: #1e1e38; border: 1px solid #444466; border-radius: 20px; transition: background 0.2s;
        }
        .labs-toggle-slider:before {
            content: ''; position: absolute; height: 14px; width: 14px;
            left: 2px; bottom: 2px; background: #555577; border-radius: 50%;
            transition: transform 0.2s, background 0.2s;
        }
        .labs-toggle input:checked + .labs-toggle-slider { background: #1a4430; border-color: #22aa55; }
        .labs-toggle input:checked + .labs-toggle-slider:before { transform: translateX(18px); background: #44dd88; }
        .labs-teleport-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #1e5533; }
        .labs-teleport-section h3 { font-size: 12px; color: #44dd88; margin: 0 0 8px 0; letter-spacing: 0.5px; }
        .labs-teleport-grid { display: flex; flex-wrap: wrap; gap: 6px; }
        .labs-teleport-btn {
            background: #1e1e38; border: 1px solid #22aa55; border-radius: 4px;
            color: #88ddaa; font-size: 10px; padding: 6px 10px; cursor: pointer;
            font-family: var(--pixel-font);
        }
        .labs-teleport-btn:active { background: #1a4430; color: #fff; }
        #labs-footer {
            padding: 10px 12px; border-top: 1px solid #1e5533; display: flex;
            justify-content: space-between; align-items: center;
        }
        #labs-footer-note { font-size: 9px; color: #555577; }
        #labs-reload-btn {
            background: #1a4430; border: 1px solid #22aa55; border-radius: 4px;
            color: #44dd88; font-family: var(--pixel-font); font-size: 11px;
            padding: 6px 14px; cursor: pointer; letter-spacing: 0.5px;
        }
        #labs-reload-btn:active { background: #22aa55; color: #fff; }

        /* ====== DEBUG OVERLAY ====== */
        #debug-overlay {
            display: none;
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 48px);
            right: 6px;
            background: rgba(0,0,0,0.75);
            border: 1px solid #33aa55;
            border-radius: 4px;
            padding: 5px 8px;
            font-family: var(--pixel-font);
            font-size: 10px;
            color: #44dd88;
            z-index: 9000;
            line-height: 1.6;
            min-width: 120px;
            pointer-events: none;
        }
        #debug-overlay.active { display: block; }
        #debug-overlay .dbg-label { color: #666677; }

        /* ── Death Overlay ─────────────────────────────────────────────────── */
        #death-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0);
            z-index: 500;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: monospace;
            color: #ff4444;
            text-align: center;
            transition: background 0.8s ease;
        }
        #death-overlay.open {
            display: flex;
            background: rgba(0,0,0,0.85);
        }

        /* ── Respawn Fade (SNES-style wake-up) ───────────────────────────────── */
        #respawn-fade {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000;
            z-index: 501;
            opacity: 0;
            pointer-events: none;
            transition: none;
        }
        #respawn-fade.active {
            opacity: 1;
        }
        #respawn-fade.fading {
            opacity: 0;
        }

        /* ── Gender Select Overlay ─────────────────────────────────────────── */
        #gender-select {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: #08081a;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: var(--pixel-font);
            gap: 12px;
        }
        #gender-select.active { display: flex; }
        .gs-title {
            color: #ffdd44;
            font-size: clamp(18px, 5vw, 32px);
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 0 0 12px rgba(255,221,68,0.4);
        }
        .gs-subtitle {
            color: #8888aa;
            font-size: clamp(11px, 2.5vw, 15px);
            letter-spacing: 1px;
        }
        .gs-panels {
            display: flex;
            gap: clamp(16px, 5vw, 40px);
            margin-top: 8px;
        }
        .gs-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            background: rgba(16, 16, 40, 0.95);
            border-radius: 10px;
            padding: clamp(14px, 3vw, 28px) clamp(16px, 4vw, 36px);
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.12s ease;
            min-width: clamp(90px, 22vw, 150px);
        }
        .gs-panel:active { transform: scale(0.95); }
        .gs-boy {
            border: 2px solid #4488ff;
            box-shadow: 0 0 16px rgba(68,136,255,0.15);
        }
        .gs-girl {
            border: 2px solid #ff66aa;
            box-shadow: 0 0 16px rgba(255,102,170,0.15);
        }
        .gs-boy:hover {
            background: rgba(26, 42, 74, 0.98);
            box-shadow: 0 0 24px rgba(68,136,255,0.35);
        }
        .gs-girl:hover {
            background: rgba(58, 26, 42, 0.98);
            box-shadow: 0 0 24px rgba(255,102,170,0.35);
        }
        .gs-preview {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            width: clamp(64px, 14vw, 96px);
            height: clamp(64px, 14vw, 96px);
        }
        .gs-label {
            font-size: clamp(14px, 3.5vw, 22px);
            font-weight: bold;
            letter-spacing: 2px;
        }
        .gs-boy .gs-label { color: #88bbff; }
        .gs-girl .gs-label { color: #ff88cc; }