@font-face {
            font-family: 'Cutive Mono';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/google/CutiveMono-Regular.ttf') format('truetype');
        }
        @font-face {
            font-family: 'Dancing Script';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('assets/fonts/google/DancingScript-Bold.ttf') format('truetype');
        }
        @font-face {
            font-family: 'DotGothic16';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/google/DotGothic16-Regular.ttf') format('truetype');
        }
        @font-face {
            font-family: 'Herr Von Muellerhoff';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/google/HerrVonMuellerhoff-Regular.ttf') format('truetype');
        }
        @font-face {
            font-family: 'Pixelated Elegance';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/PixelatedEleganceRegular-ovawB.ttf') format('truetype');
        }
        :root {
            --blood: #DC143C;
            --void: #050505;
            --bone: #b0b0b0;
            --secret-yellow: #FFFF00;
            --quest-cyan: #00ccff;
            --gold: #d4a574;
            --vice-orange: #ff6b35;
        }

        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--void);
            /* v0.91: Static bg.png removed - now using dynamic room backgrounds */
            color: var(--bone);
            font-family: 'Cutive Mono', monospace;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /* v0.98: Use 100% height for fullscreen, with vh fallback */
            height: 100%;
            min-height: 100vh;
            min-height: 100dvh; /* Dynamic viewport height for fullscreen */
            overflow: hidden;
            user-select: none;
        }

        #mobile-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            /* v0.98: Use fixed height for proper fullscreen centering */
            height: 100%; 
            justify-content: center;
            padding-bottom: env(safe-area-inset-bottom); 
            box-sizing: border-box;
            position: relative; /* v0.91: For z-index stacking */
            z-index: 10;        /* v0.91: Above room background layers */
        }

        /* THE CENTRAL BOX: Vertically Stacked */
        #game-layout {
            display: flex;
            flex-direction: column; 
            align-items: center;
            width: 640px;
            gap: 10px;
            filter: blur(5px);
            transition: filter 1s ease;
            background: #000;
            padding: 20px 15px;
            box-sizing: border-box;
            box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.8);
            position: relative;
        }
        
        /* Black backdrop that extends to match pinned docs height */
        #game-layout::before {
            content: '';
            position: absolute;
            top: 7px;
            left: 0;
            right: 0;
            bottom: 7px;
            background: #000;
            z-index: -1;
        }

        #noise-overlay {
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%; 
            height: 200%;
            pointer-events: none;
            z-index: 90;
            opacity: 0;
            background-repeat: repeat;
            /* v1.08: Optimized animation - reduced steps, added will-change */
            animation: grain 0.8s steps(3) infinite;
            will-change: transform;
        }

        @keyframes grain {
            0%, 100% { transform: translate(0, 0); }
            33% { transform: translate(-10%, -15%); }
            66% { transform: translate(10%, 10%); }
        }

        /* OVERLAY CONTAINER */
        #character-reveal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95);
            font-family: 'Cutive Mono', monospace; 
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in;
        }

        #character-reveal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .reveal-card {
            width: 450px;
            text-align: center;
            color: #ccc;
            border: 1px solid #333;
            background: #090909;
            padding: 20px;
            box-shadow: 0 0 30px rgba(0,0,0,0.8);
        }

        .image-wrapper {
            width: 100%;
            height: 410px; 
            overflow: hidden;
            border: 1px solid #222;
            margin-bottom: 20px;
            background: #000;
        }

        #reveal-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.1);
            filter: brightness(0.8) contrast(1.2);
        }

        .animate-zoom {
            animation: slowZoomOut 6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }

        @keyframes slowZoomOut {
            from { transform: scale(1.2); filter: brightness(1.3) contrast(1.3); }
            to { transform: scale(1.0); filter: brightness(1) contrast(1); }
        }

        #reveal-continue-btn {
            background: transparent;
            border: 1px solid #444;
            color: #888;
            padding: 10px 30px;
            font-family: 'Cutive Mono', monospace;
            font-size: 14px;
            margin-top: 20px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        #reveal-continue-btn:hover {
            border-color: #fff;
            color: #fff;
            background: #222;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
        }

        .reveal-description h2 { 
            margin: 0 0 15px 0; 
            color: #fff; 
            font-family: 'Courier New', monospace; 
            letter-spacing: 4px;
            text-transform: uppercase;
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
        }
        .reveal-description p { 
            font-family: 'Courier New', monospace; 
            font-size: 13px; 
            line-height: 1.5em;
            color: #888;
        }

        /* --- HUD (TOP) with Clock --- */
        #hud-section {
            width: 100%;
            border-bottom: none;  /* v1.06: Removed red stripe */
            padding-top: 10px;    /* v1.08: Shift HUD down */
            padding-bottom: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            background: #000;
        }
        
        #hud-top-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        
        #clock-row {
            display: flex;
            align-items: flex-end;
            gap: 12px;
        }
        
        #top-clock {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            position: relative;
            top: -8px;
        }
        
        #top-clock canvas {
            width: 60px;
            height: 60px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            background: #111;
            border: 2px solid #333;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(136, 0, 0, 0.3);
        }
        
        /* Clock urgency shake animation - triggers at 21:00 */
        @keyframes clock-shake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(-2px) rotate(-1deg); }
            20% { transform: translateX(2px) rotate(1deg); }
            30% { transform: translateX(-2px) rotate(0deg); }
            40% { transform: translateX(2px) rotate(1deg); }
            50% { transform: translateX(-1px) rotate(-1deg); }
            60% { transform: translateX(1px) rotate(0deg); }
            70% { transform: translateX(-1px) rotate(1deg); }
            80% { transform: translateX(1px) rotate(-1deg); }
            90% { transform: translateX(-1px) rotate(0deg); }
        }
        
        #top-clock.urgent canvas {
            animation: subtle-vibrate 0.08s linear infinite;
            border-color: var(--blood);
        }
        
        #top-clock.urgent #top-clock-label {
            color: var(--blood);
        }
        
        #top-clock-label {
            display: none;
        }
        
        /* v0.86 home, restored: condensed view puts portraits in the icon
           row — top-right above the map, filling right-to-left. The div
           lives OUTSIDE #hud-section (its full-mode transform would trap
           position:fixed), so we pin it to #game-layout instead. Full
           mode overrides to the bottom-left dock below; mobile overrides
           back to an in-flow row in the media query. */
        #npc-portraits {
            display: flex;
            position: absolute;
            top: 20px;
            right: 15px;
            flex-direction: row-reverse;
            align-items: flex-end;
            gap: 3px;
            z-index: 25;
        }
        
        .npc-portrait {
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            transform: translateX(10px);
            transition: transform 0.3s ease, opacity 0.3s ease;
            cursor: pointer;
        }
        
        .npc-portrait.visible {
            opacity: 0.8;
            transform: translateX(0);
        }
        
        .npc-portrait.visible:hover {
            opacity: 1;
            transform: scale(1.05);
        }
        
        .npc-portrait.exiting {
            opacity: 0;
            transform: translateX(10px);
        }
        
        .npc-portrait.visible.unobserved {
            animation: portrait-pulse 1s ease-in-out infinite, subtle-vibrate 0.08s linear infinite;
        }
        
        @keyframes portrait-pulse {
            0%, 100% { 
                opacity: 0.85;
                filter: drop-shadow(0 0 2px rgba(220, 20, 60, 0.3));
                transform: scale(1);
            }
            50% { 
                opacity: 1;
                filter: drop-shadow(0 0 12px rgba(220, 20, 60, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
                transform: scale(1.03);
            }
        }
        
        .npc-portrait-image {
            height: 70px;
            width: auto;
            object-fit: contain;
            background: transparent;
            image-rendering: pixelated;
            border: 1px solid #ffffff;
        }
        
        .npc-portrait-name {
            font-size: 8px;
            color: #fff;
            letter-spacing: 1px;
            margin-top: 2px;
            text-transform: uppercase;
            text-align: center;
            white-space: nowrap;
        }
        
        .npc-portrait-number {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 7px;
            color: #555;
            font-family: 'Cutive Mono', monospace;
            pointer-events: none;
        }
        
        .npc-portrait {
            position: relative;
        }
        
        /* Candelabra Container */
        #candelabra-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            cursor: pointer;
            top: -8px;
        }
        
        #candelabra-canvas {
            width: 60px;
            height: 70px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        
        #candelabra-label {
            display: none;
        }
        
        /* Journal Icon Container */
        #journal-icon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            cursor: pointer;
            margin-left: 2px;
        }
        
        #journal-icon-canvas {
            width: 60px;
            height: 75px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        
        /* Journal icon vibrate when new secrets available */
        #journal-icon-container.has-secrets #journal-icon-canvas {
            animation: journal-shake 0.4s ease-in-out infinite, journal-glow 1.5s ease-in-out infinite;
        }
        
        @keyframes journal-glow {
            0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15)); }
            50% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.25)); }
        }
        
        #guide-icon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            cursor: pointer;
        }
        
        #guide-icon-canvas {
            width: 60px;
            height: 75px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        
        #pamphlet-icon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            cursor: pointer;
            margin-left: -13px;
        }
        
        #pamphlet-icon-canvas {
            width: 60px;
            height: 75px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        
        #top-clock,
        #candelabra-container,
        #journal-icon-container,
        #guide-icon-container,
        #pamphlet-icon-container {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        #top-clock:hover,
        #candelabra-container:hover,
        #journal-icon-container:hover,
        #guide-icon-container:hover,
        #pamphlet-icon-container:hover {
            transform: rotate(-10deg);
        }
        
        #stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: space-between;
            width: 100%;
        }

        .stat-item { 
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .stat-label { color: #777; font-size: 10px; text-transform: uppercase; font-family: 'DotGothic16', monospace; letter-spacing: 2px; }
        .stat-value { color: #e6e6e6; font-weight: bold; font-size: 14px; font-family: 'DotGothic16', monospace; letter-spacing: 2px; }
        .stat-value.stat-vibrate { 
            display: inline-block;
            animation: suspect-vibrate 0.08s linear infinite; 
        }
        .crimson { color: var(--blood); }

        /* --- MAIN STAGE AREA --- */
        #stage-container {
            display: flex;
            /* DOM order is sidebar-then-map; row-reverse flips the visual
               order so the MAP sits on the LEFT and the minimap/pockets
               sidebar on the RIGHT. Mobile overrides to column and hides
               the sidebar, so the reverse never reaches a phone. */
            flex-direction: row-reverse;
            gap: 10px;
            width: 100%;
            align-items: stretch;
            background: #000;
        }
    /* --- THE MAP (LEFT) --- */
        #map-container {
            border: none;  /* v1.06: Removed outline border */
            padding: 10px;
            background-color: #080808;
            flex: 1; /* Takes up all remaining space */
            box-sizing: border-box; 
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;  /* v0.76: Clip peripheral rooms at edges */
        }
        
        #map-container::after {
            display: none;
        }
        
        /* v0.91: Room background layers for crossfade effect */
        /* v0.93: Added transform for parallax, slightly oversized to prevent edge showing */
        .room-bg-layer {
            position: fixed;
            top: -30px;
            left: -30px;
            width: calc(100vw + 60px);
            height: calc(100vh + 60px);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: opacity 0.8s ease-in-out;
            z-index: 1;
            pointer-events: none;
            will-change: transform;  /* Optimize for parallax animation */
        }
        
        /* v0.95: When pinned, constrain room background to game area only */
        body.pinned-mode .room-bg-layer {
            width: calc(100vw - 420px + 60px);  /* Subtract pinned panel width */
        }
        
        #room-bg-layer-a { opacity: 1; }
        #room-bg-layer-b { opacity: 0; }
        
        /* v1.04: Suspicion red overlay */
        #suspicion-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgb(60, 0, 0);
            opacity: 0;
            z-index: 2;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        /* v1.05: Throb animation when active - duration set via JS */
        #suspicion-overlay.active {
            animation: suspicion-throb var(--throb-speed, 1.25s) ease-in-out infinite;
        }
        
        @keyframes suspicion-throb {
            0%, 100% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.02); filter: brightness(1.3); }
        }
        
        /* Map overlay info - v1.10: Updated to DotGothic16 styling */
        .map-info-overlay {
            position: absolute;
            font-family: 'DotGothic16', monospace;
            font-size: 10px;
            color: #777;
            text-transform: uppercase;
            letter-spacing: 2px;
            z-index: 10;
            pointer-events: none;
        }
        #map-day-time { bottom: 8px; left: 10px; }
        #map-location { bottom: 8px; right: 10px; }

        #map-wrapper {
            position: relative;
            overflow: visible;
            width: 450px;   /* v0.76: Fixed size to prevent jumping */
            height: 250px;  /* v0.76: Fixed size to prevent jumping */
            will-change: transform;  /* v0.93: Optimize for parallax animation */
        }

        #map-texture {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            line-height: 1.1;
            white-space: pre;
            font-family: 'Courier New', 'DejaVu Sans Mono', 'Consolas', monospace;
            pointer-events: none;
            z-index: 1;
        }

        #map {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            line-height: 1.1;
            white-space: pre;
            font-weight: bold;
            cursor: default;
            color: #b0b0b0;
            font-family: 'Courier New', 'DejaVu Sans Mono', 'Consolas', monospace;
            z-index: 2;
        }

        /* v0.76: PERIPHERAL VISION - Ghost Map Styles */
        #periphery-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: visible;
        }
        
        .periphery-room {
            position: absolute;
            font-size: 18px;
            line-height: 1.1;
            white-space: pre;
            font-family: 'Courier New', 'DejaVu Sans Mono', 'Consolas', monospace;
            pointer-events: none;
            /* PROTO: smooth blur fade when hovered in aerial */
            transition: filter 0.4s ease;
        }
        .periphery-room.unblurred {
            filter: blur(0) !important;
        }
        
        /* Texture layer - floor pattern */
        .periphery-texture {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        
        /* Character layer - walls, furniture, NPCs */
        .periphery-chars {
            position: relative;
            pointer-events: none;
        }
        
        /* Ghost room character colors - all elements visible */
        .periphery-wall { color: #555555; }
        .periphery-furniture { color: #444444; }
        .periphery-npc { 
            color: #888888; 
            display: inline-block;
            animation: suspect-vibrate 0.08s linear infinite;
        }
        .periphery-floor { color: #3a3a3a; }
        .periphery-exit { color: #884444; }  /* Exits tinted red */
        .periphery-curio { color: #9932CC; }  /* v1.08: Purple curio marker */
        .periphery-quest { color: #4488ff; }  /* v1.08: Blue quest items */
        .periphery-evidence { color: #ff8844; }  /* v1.08: Orange evidence/vices */
        .periphery-assassination { color: #ffcc00; }  /* v1.08: Gold assassination items */
        
        /* PROTO: hover-reveal name label for periphery rooms */
        .periphery-room-name {
            position: absolute;
            color: #888;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-family: 'Cutive Mono', monospace;
            text-align: center;
            white-space: pre-line;          /* honour \n for two-line names */
            line-height: 1.25;
            text-shadow: 0 0 6px #000, 0 0 3px rgba(0,0,0,0.95);
            opacity: 0;
            margin-top: 0;
            transition: opacity 0.45s ease, color 0.3s ease, margin-top 0.3s ease;
            pointer-events: none;
            z-index: 5;
        }
        .periphery-room-name.visible {
            opacity: 0.85;
        }
        /* PROTO: hovering a room brightens its label and lifts it a few px. */
        .periphery-room-name.hover-lift {
            color: #ddd;
            opacity: 1;
            margin-top: -4px;
        }
        /* PROTO: aerial zoom-to-fit view shows every room name without hover. */
        body.aerial-view-active .periphery-room-name {
            opacity: 0.85;
        }
        /* PROTO: aerial mode — grab cursor anywhere on the page; UI surfaces
           that aren't draggable opt back to their normal cursors. Periphery
           layer still takes pointer events so it can catch drag mousedowns
           in empty manor space. */
        body.aerial-view-active { cursor: grab; }
        body.aerial-view-active #periphery-layer { pointer-events: auto; }
        /* Keep the standard cursors on UI surfaces that aren't part of the manor view */
        body.aerial-view-active #bottom-section,
        body.aerial-view-active #sidebar-column,
        body.aerial-view-active #hud-section,
        body.aerial-view-active #log-container,
        body.aerial-view-active #npc-portraits,
        body.aerial-view-active #journal-overlay,
        body.aerial-view-active #guide-overlay,
        body.aerial-view-active #faith-overlay,
        body.aerial-view-active #settings-overlay,
        body.aerial-view-active button,
        body.aerial-view-active input,
        body.aerial-view-active select {
            cursor: default;
        }
        body.aerial-view-active #minimap-container,
        body.aerial-view-active #mobile-minimap {
            cursor: pointer;
        }
        /* While a drag is in flight, force the grabbing cursor everywhere
           — including over UI elements the cursor happens to cross. */
        body.aerial-view-active.aerial-dragging,
        body.aerial-view-active.aerial-dragging * {
            cursor: grabbing !important;
        }

        /* v0.79: PERIPHERAL CORRIDORS - Connective tissue between rooms */
        .periphery-corridor {
            position: absolute;
            font-size: 18px;
            line-height: 1.1;
            white-space: pre;
            font-family: 'Courier New', 'DejaVu Sans Mono', 'Consolas', monospace;
            pointer-events: none;
            color: #444444;
        }
        
        /* v0.76: VIGNETTE OVERLAY - Fades peripheral rooms at edges */
        #map-vignette {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 4;
            display: none;  /* Disabled - using container approach instead */
        }

        /* ============================================================================
           v1.08: FULL MODE - Estate-wide view
           ============================================================================ */
        
        /* Toggle button in top-right of map */
        /* v1.10: Full mode toggle as text label */
        #full-mode-toggle {
            position: absolute;
            top: 8px;
            right: 10px;
            background: none;
            border: none;
            color: #777;
            font-family: 'DotGothic16', monospace;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            z-index: 50;
            padding: 2px 0;
            transition: color 0.15s ease;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        #full-mode-toggle:focus {
            outline: none;
        }
        
        #full-mode-toggle:hover {
            color: var(--blood);
        }
        
        #full-mode-toggle.active {
            color: #777;
        }
        
        #full-mode-toggle.active:hover {
            color: var(--blood);
        }
        
        /* Hide on mobile */
        @media (max-width: 768px) {
            #full-mode-toggle { display: none; }
        }
        
        /* Smooth transitions for full mode */
        #map-wrapper {
            transition: width 0.5s ease, height 0.5s ease, transform 0.5s ease;
        }
        
        #map-container {
            transition: all 0.5s ease;
        }
        
        #stage-container {
            transition: all 0.5s ease;
        }
        
        /* Full mode sidebar - hidden by default, to RIGHT of buttons */
        /* v1.08: REMOVED - using mobile overlay approach instead */
        #fullmode-sidebar {
            display: none;
        }
        
        /* Full mode active state */
        body.full-mode-body {
            background-color: #080808;  /* v1.08: Match map container background */
        }
        
        body.full-mode-body #game-layout {
            background: #080808;  /* v1.08: Match map container background */
            box-shadow: none;     /* v1.08: Remove dark edge */
        }
        
        body.full-mode-body #game-layout::before {
            background: #080808;  /* v1.08: Match map container background */
        }
        
        body.full-mode-body #stage-container {
            justify-content: center;
            background: #080808;  /* v1.08: Match map container background */
        }
        
        body.full-mode-body #map-container {
            flex: none;
            width: calc(100vw - 40px);
            height: calc(100vh - 40px);
            position: relative;
        }
        
        body.full-mode-body #map-wrapper {
            width: 450px;
            height: 250px;
            transform: scale(3.04);
            transform-origin: center center;
        }
        
        body.full-mode-body #sidebar-column {
            display: none;
        }
        
        /* v1.08: Move bottom-section inside map-container visually */
        body.full-mode-body #bottom-section {
            position: absolute !important;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 600px;
            z-index: 20;
            background: transparent;
        }
        
        /* v1.08: Make log container transparent in full mode */
        body.full-mode-body #log-container {
            background: transparent !important;
            height: 125px; /* 20% taller than base 104px (104 * 1.2 = 124.8, rounded to 125) */
        }
        
        body.full-mode-body #bottom-content {
            background: transparent !important;
        }
        
        /* v1.08: Move HUD inside map-container visually */
        body.full-mode-body #hud-section {
            position: absolute !important;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            background: transparent;
        }
        
        /* Show mobile minimap/pockets overlay in full mode (like mobile) */
        body.full-mode-body #mobile-minimap {
            display: block !important;
            position: absolute !important;
            top: 10px;
            left: 10px;
            bottom: auto;
            right: auto;
            width: 120px;
            height: 120px;
            padding: 8px;
            z-index: 20 !important;
            border: 1px solid #333 !important;
            background: rgba(10, 10, 10, 0.95) !important;
        }
        
        body.full-mode-body #mobile-minimap-grid {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            grid-template-rows: repeat(5, 1fr) !important;
            gap: 2px !important;
            width: 100% !important;
            height: 100% !important;
            aspect-ratio: 1 !important;
            position: relative !important;
        }
        
        /* v1.10: Corridor styling for full mode minimap */
        body.full-mode-body #mobile-minimap-corridors {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        body.full-mode-body #mobile-minimap-corridors .minimap-corridor {
            stroke: #666;
            stroke-width: 2;
            stroke-linecap: round;
        }
        
        body.full-mode-body #mobile-minimap-corridors .minimap-corridor.discovered {
            stroke: #888;
        }
        
        body.full-mode-body #mobile-pockets {
            display: flex !important;
            position: absolute !important;
            bottom: 10px;
            right: 10px;
            top: auto;
            left: auto;
            padding: 8px;
            z-index: 20 !important;
            border: 1px solid #333 !important;
            background: rgba(10, 10, 10, 0.95) !important;
            /* position context for pockets-label */
        }
        
        /* v1.10: Pockets label - only visible in full mode, centered above the box */
        #pockets-label {
            display: none;
        }
        
        body.full-mode-body #pockets-label {
            display: block;
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            text-align: center;
            color: #777;
            font-size: 10px;
            text-transform: uppercase;
            font-family: 'DotGothic16', monospace;
            letter-spacing: 2px;
            padding-bottom: 4px;
        }
        
        body.full-mode-body #mobile-pocket-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 32px) !important;
            grid-template-rows: repeat(2, 32px) !important;
            gap: 4px !important;
        }
        
        body.full-mode-body #mobile-pocket-grid .pocket-slot {
            width: 32px !important;
            height: 32px !important;
            font-size: 16px !important;
        }
        
        /* Stack labels in bottom left like mobile */
        body.full-mode-body #map-day-time,
        body.full-mode-body #map-location {
            font-size: 10px;
            right: auto;
            bottom: auto;
            left: 10px;
        }
        
        body.full-mode-body #map-location {
            top: 155px;
        }
        
        body.full-mode-body #map-day-time {
            top: 170px;
        }
        
        /* v1.08: ASCII zoom slider for full mode */
        #fullmode-zoom-slider {
            display: none;
            position: absolute;
            bottom: 15px;
            left: 10px;
            font-family: 'Courier New', monospace;
            font-size: 18px;
            color: #666;
            z-index: 25;
            user-select: none;
            letter-spacing: 1px;
        }
        
        /* v1.18: Zoom slider hidden - scroll wheel zoom replaces it */
        body.full-mode-body #fullmode-zoom-slider {
            display: none;
        }
        
        #fullmode-zoom-slider .zoom-btn {
            color: #888;
            font-weight: bold;
            cursor: pointer;
            padding: 6px 10px;
            font-size: 20px;
            transition: color 0.15s;
        }
        
        #fullmode-zoom-slider .zoom-btn:hover {
            color: #fff;
        }
        
        #fullmode-zoom-slider .zoom-btn:active {
            color: #8B0000;
        }
        
        #fullmode-zoom-slider .zoom-track {
            position: relative;
            width: 100px;
            height: 10px;
            background: #1a1a1a;
            border: 1px solid #333;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        #fullmode-zoom-slider .zoom-track-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #8B0000;
            pointer-events: none;
            width: 50%;
        }
        
        #fullmode-zoom-slider .zoom-handle {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background: #8B0000;
            width: 15px;
            height: 24px;
            cursor: grab;
            border-radius: 2px;
            box-shadow: 0 0 6px rgba(139, 0, 0, 0.6);
            transition: background 0.1s, box-shadow 0.1s;
        }
        
        #fullmode-zoom-slider .zoom-handle:hover {
            background: #aa2222;
            box-shadow: 0 0 10px rgba(170, 34, 34, 0.8);
        }
        
        #fullmode-zoom-slider .zoom-handle.dragging {
            cursor: grabbing;
            background: #cc3333;
            box-shadow: 0 0 12px rgba(204, 51, 51, 0.9);
        }
        
        /* Reduce vignette in full mode so it doesn't obscure UI */
        body.full-mode-body #map-container {
            box-shadow: inset 0 0 60px 30px #080808;
        }
        
        body.full-mode-body #map-vignette-overlay {
            z-index: 4 !important;
        }
        
        /* v1.08: Make minigames 1.6x bigger in full mode */
        body.full-mode-body #minigame-frame {
            transform: scale(1.6);
            transform-origin: center center;
        }
        
        /* v1.08: Hide room backgrounds in full mode */
        body.full-mode-body .room-bg-layer {
            display: none !important;
        }
        
        /* v1.18: Discovery tray follows player position in full mode */
        body.full-mode-body #discovery-tray {
            transform: scale(1.25);
            transform-origin: bottom left;
        }

        body.full-mode-body #discovery-tray.active {
            transform: scale(1.25);
        }
        
        /* v1.08: Hide PIN buttons in full mode */
        body.full-mode-body .modal-pin-btn {
            display: none !important;
        }
        
        /* v1.10: Constrain modal heights in full mode to prevent stretching */
        body.full-mode-body #journal-modal,
        body.full-mode-body #guide-modal,
        body.full-mode-body #faith-modal {
            max-height: 660px;
            height: 660px;
        }

      /* --- NEW: SIDEBAR WRAPPER (RIGHT) --- */
        #sidebar-column {
            width: 120px; /* Fixed width for the sidebar */
            display: flex;
            flex-direction: column;
            gap: 10px; /* Space between minimap and pockets */
            flex-shrink: 0; /* Prevents sidebar from getting squashed */
            background: #000;
        }

        /* --- MINI-MAP (RIGHT) --- */
        #minimap-container {
            width: 100%;
            border: none;  /* v1.06: Removed outline border */
            background: #020202;
            padding: 8px 2px; /* Ensure this matches your thin margin preference */
            display: flex;
            flex-direction: column;
            gap: 6px;
            box-sizing: border-box;
            /* PROTO: click to open aerial view — give it a clear affordance. */
            cursor: pointer;
            transition: background 0.2s ease;
        }
        #minimap-container:hover { background: #0a0a0a; }
        #mobile-minimap { cursor: pointer; }

        #minimap-title {
            font-family: 'DotGothic16', monospace;
            color: var(--blood);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
            border-bottom: 1px solid #1a1a1a;
            padding-bottom: 4px;
        }

        #minimap-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: repeat(7, 1fr);
            gap: 3px;
            aspect-ratio: 1;
            position: relative;
        }
        
        #minimap-corridors {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .minimap-corridor {
            stroke: #444;
            stroke-width: 2;
            stroke-linecap: round;
        }
        
        .minimap-corridor.discovered {
            stroke: #555;
        }

        .minimap-cell {
            background: #0a0a0a;
            border: 1px solid #111;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            aspect-ratio: 1;
        }

        .minimap-cell.discovered {
            background: #1a1a1a;
            border-color: #aa4444;
        }
        
        .minimap-cell.home {
            color: #fff;
            font-size: 10px;
            text-shadow: 0 0 4px #ffdd44;
        }

        .minimap-cell.current {
            border-color: #fff;
            box-shadow: 0 0 8px rgba(255,255,255,0.8);
            animation: pulse 1.5s infinite;
        }
        
        .minimap-cell.current.home {
            color: #fff;
            text-shadow: 0 0 4px #ffdd44;
        }

        .minimap-cell.has-elder {
            background: #440000;
            border-color: #660000;
        }

        .minimap-cell.has-npc {
            background: #222;
            border-color: #444;
        }

        /* Tier background tints only - no border changes */
        .minimap-cell.tier-sanctum.discovered {
            background: #1a0a0a;
        }

        .minimap-cell.tier-grounds.discovered {
            background: #0a1a0a;
        }
        
        /* Override tier colors for special rooms */
        .minimap-cell.elder-sanctum.discovered {
            background: #2a0505 !important;
            border-color: #aa2222 !important;
        }
        .minimap-cell.anastasia-quarters.discovered {
            background: #051530 !important;
            border-color: #5588bb !important;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,0.6); }
            50% { box-shadow: 0 0 12px rgba(255,255,255,1); }
        }

        #minimap-prompt {
            font-family: 'DotGothic16', monospace;
            font-size: 10px;
            color: #777;
            text-align: center;
            margin-top: 5px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: color 0.2s;
        }
        #minimap-prompt:hover {
            color: var(--blood);
        }

        #room-label {
            font-family: 'DotGothic16', monospace;
            font-size: 10px;
            color: #777;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 3px;
            background: #0a0505;
            border: 1px solid #1a0505;
        }

        /* --- THE LOG (BOTTOM) --- */
        #log-container {
            width: 100%; /* v1.10: Full width now that settings button is hidden */
            height: 156px; /* v1.18: 50% taller for breathing room (was 104px) */
            border-top: none;
            background: #0A0A0A;
            padding: 10px 10px 0 10px;
            font-size: 13px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #444 transparent;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        
        #log-container::before {
            content: '';
            flex: 1 1 auto;
        }
        
        #log-container::-webkit-scrollbar {
            width: 6px;
        }
        #log-container::-webkit-scrollbar-track {
            background: transparent;
        }
        #log-container::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 3px;
        }
        #log-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .log-entry { 
            margin-bottom: 3px; 
            padding-left: 10px; 
            border-left: 2px solid #222; 
            opacity: 0.7; 
            animation: slideUp 0.3s ease-out forwards;
            flex-shrink: 0;
        }
        
        .log-entry.new { border-left: 2px solid var(--blood); opacity: 1; color: #fff; }
        .log-entry.loc-change { border-left: 2px solid #fff; color: #aaa; margin-top: 5px; margin-bottom: 5px; font-style: italic; }
        .log-entry.whisper { color: #ff6666; }
        .log-entry.danger { color: var(--blood); font-weight: bold; text-shadow: 0 0 2px #500; }
        .log-entry.quest { border-left: 2px solid var(--quest-cyan); color: var(--quest-cyan); text-shadow: 0 0 5px rgba(0, 204, 255, 0.5); font-weight: bold; }
        .log-entry.secret { border-left: 2px solid var(--secret-yellow) !important; color: var(--secret-yellow) !important; text-shadow: 0 0 8px rgba(255, 255, 0, 0.6); opacity: 1; font-weight: bold; }
        .log-entry.mystery { border-left: 2px solid #ffd700; color: #ffd700; }
        .log-entry.vice { border-left: 2px solid #ff6b35; color: #ff6b35; text-shadow: 0 0 5px rgba(255, 107, 53, 0.6); font-weight: bold; }
        .log-entry.system { color: #666; font-style: italic; }
        .log-entry.note { color: #aaa; border-left: 2px solid #666; font-style: italic; }
        .log-entry.warning { color: #cc8800; border-left: 2px solid #cc8800; }
        /* Example: Bright white text with a blue bar */
        .log-entry.dialogue { 
            color: #ffffff;             /* Text Color */
            border-left: 2px solid #ffffff; /* The vertical line on the left */
        }
        .log-entry.dialogue-elder { color: #a80202; border-left: 2px solid #a80202; }
        .log-entry.dialogue-ambient { color: #888888; border-left: 2px solid #555555; }
        .log-entry.curio { border-left: 2px solid #9932CC; color: #9932CC; text-shadow: 0 0 5px rgba(153, 50, 204, 0.5); font-weight: bold; }
        .log-entry.upgrade { border-left: 2px solid #d4af37; color: #d4af37; text-shadow: 0 0 5px rgba(212, 175, 55, 0.4); font-weight: bold; font-style: italic; }
        .log-entry.inherited { border-left: 2px solid #c5a059; color: #c5a059; text-shadow: 0 0 5px rgba(197, 160, 89, 0.5); font-weight: bold; font-style: italic; }
        .log-entry.tip { color: #777; font-style: italic; border-left: none; opacity: 0.8; }
        .log-entry.tutorial { 
            color: #00ff00; 
            border-left: 2px solid #00ff00; 
            opacity: 1; 
        }
        .log-entry.plain { color: #ccc; border-left: none; }

        /* --- OVERLAYS --- */
        .overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(5, 5, 5, 0.98);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            transition: opacity 0.5s;
        }

        .menu-box {
            border: 2px solid var(--blood);
            padding: 40px;
            max-width: 650px;
            background: #0a0a0a;
            box-shadow: 0 0 30px rgba(220, 20, 60, 0.2);
            text-align: center;
        }

        .menu-box h2 { color: var(--blood); border-bottom: 1px solid #444; padding-bottom: 10px; margin-top: 0; text-transform: uppercase; }
        .menu-box p { font-size: 14px; line-height: 1.5; color: #ccc; text-align: left; }
        
        /* DIALOGUE */
        #dialogue-screen { align-items: center; justify-content: center; background-color: rgba(0,0,0,0.95); }
        
        /* v1.14: Tutorial Prompt Screen */
        #tutorial-prompt {
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.98);
            z-index: 101;
        }
        .tutorial-prompt-inner {
            text-align: center;
            max-width: 400px;
        }
        .tutorial-prompt-question {
            font-family: 'Cutive Mono', monospace;
            font-size: 22px;
            color: var(--bone);
            letter-spacing: 6px;
            margin-bottom: 16px;
        }
        .tutorial-prompt-desc {
            font-family: 'Cutive Mono', monospace;
            font-size: 12px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 32px;
        }
        .tutorial-prompt-choices {
            font-family: 'Cutive Mono', monospace;
            font-size: 18px;
            letter-spacing: 4px;
            display: block;
            text-align: center;
        }
        .tutorial-prompt-choice {
            color: #888;
            cursor: pointer;
            transition: color 0.2s, text-shadow 0.2s;
            padding: 8px 16px;
        }
        .tutorial-prompt-choice:hover {
            color: var(--blood);
            text-shadow: 0 0 12px rgba(220, 20, 60, 0.4);
        }
        .tutorial-prompt-sep {
            color: #333;
            margin: 0 12px;
        }
        .tutorial-prompt-choice-small {
            font-size: 11px;
            letter-spacing: 2px;
            color: #555;
        }
        .tutorial-prompt-choice-small:hover {
            color: #999;
            text-shadow: none;
        }
        #debrief-screen { align-items: center; justify-content: center; background-color: rgba(0,0,0,0.98); }
        
        /* v1.13: PERFORMANCE REVIEW SCREEN */
        #performance-review-screen {
            align-items: center;
            justify-content: center;
            background-color: rgba(0,0,0,0.98);
        }
        .performance-review-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            font-family: 'DotGothic16', monospace;
            letter-spacing: 2px;
            color: var(--bone);
            max-width: 400px;
            text-align: center;
        }
        .performance-candelabra {
            margin-bottom: 0.25rem;
        }
        #review-candelabra-canvas {
            image-rendering: pixelated;
        }
        .performance-day-label {
            font-size: 1.1rem;
            letter-spacing: 0.2em;
            color: var(--bone);
            margin-bottom: 0.5rem;
        }
        .performance-header {
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            color: #888;
            margin-bottom: 1rem;
        }
        .performance-metrics {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            width: 100%;
            font-size: 0.85rem;
        }
        .performance-metric-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.15rem 0;
        }
        .metric-name {
            color: #888;
            text-align: left;
        }
        .metric-value {
            color: var(--bone);
            min-width: 80px;
            text-align: right;
        }
        .metric-grade {
            min-width: 30px;
            text-align: right;
            font-weight: bold;
        }
        .metric-grade.grade-a { color: #4a4; }
        .metric-grade.grade-b { color: #8a8; }
        .metric-grade.grade-c { color: #aa8; }
        .metric-grade.grade-d { color: #a86; }
        .metric-grade.grade-f { color: var(--blood); }
        .performance-curfew {
            color: var(--blood);
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            margin: 0.5rem 0;
            animation: curfew-pulse 1s ease-in-out infinite;
        }
        @keyframes curfew-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        .performance-divider {
            color: #444;
            margin: 0.5rem 0;
        }
        .performance-rating-row {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin: 0.25rem 0;
        }
        .performance-rating-label {
            color: #888;
            font-size: 0.9rem;
        }
        .performance-rating-value {
            font-size: 1.2rem;
            font-weight: bold;
        }
        .performance-rating-value.grade-a { color: #4a4; }
        .performance-rating-value.grade-b { color: #8a8; }
        .performance-rating-value.grade-c { color: #aa8; }
        .performance-rating-value.grade-d { color: #a86; }
        .performance-rating-value.grade-f { color: var(--blood); }
        .performance-comment {
            color: #666;
            font-family: 'Cutive Mono', monospace;
            font-size: 0.8rem;
            font-style: italic;
            letter-spacing: normal;
            margin: 0.75rem 0;
            max-width: 300px;
            line-height: 1.4;
        }
        .performance-continue-btn {
            background: transparent;
            border: 1px solid #444;
            color: var(--bone);
            padding: 0.5rem 1.5rem;
            font-family: 'Cutive Mono', monospace;
            font-size: 0.85rem;
            text-transform: uppercase;
            cursor: pointer;
            margin-top: 0.5rem;
            transition: all 0.2s ease;
        }
        .performance-continue-btn:hover {
            border-color: var(--bone);
            background: rgba(255,255,255,0.05);
        }
        
        /* ============================================================================
           SPLASH SCREEN v0.70 - New Layout with Animated Orb & Spine
           ============================================================================ */
        #splash-screen {
            background-color: #710e18;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        /* v0.93: Splash background layer for parallax effect */
        /* v1.14: Backgrounds temporarily disabled */
        #splash-bg-layer {
            position: fixed;
            top: -30px;
            left: -30px;
            width: calc(100vw + 60px);
            height: calc(100vh + 60px);
            background-color: #710e18;  /* Solid fallback */
            /* background-image: url('assets/backgrounds/bg_splash.png'); */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 99;  /* Just below overlay (100) */
            pointer-events: none;
            /* v1.04: Removed will-change for better performance on high-res */
        }
        
        /* v1.18: Title screen - first screen after loading */
        #title-screen {
            background-color: #710e18;
            z-index: 100;
            flex-direction: column;
        }

        .title-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0;
        }

        .title-subtitle {
            font-family: 'Cutive Mono', monospace;
            font-weight: 400;
            font-size: 1rem;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: #000;
            margin: 0 0 0.5rem 0;
        }

        .title-logo {
            max-width: 420px;
            height: auto;
        }

        .title-monologue {
            font-family: 'Cutive Mono', monospace;
            font-size: 0.7rem;
            letter-spacing: 2px;
            color: #000;
            text-align: center;
            margin-top: 0.8rem;
            min-height: 1.2em;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .title-enter {
            font-family: 'Cutive Mono', monospace;
            font-size: 1rem;
            letter-spacing: 4px;
            color: #000;
            cursor: pointer;
            transition: color 0.2s ease;
            margin-top: 1.5rem;
        }
        .title-enter:hover {
            color: #ccc;
        }

        /* v1.0 ship: feedback links hidden (playtest-era Google Form) */
        .title-feedback, .feedback-link { display: none !important; }

        .title-feedback {
            font-family: 'Cutive Mono', monospace;
            font-size: 0.8rem;
            color: #ccc;
            letter-spacing: 0.15em;
            cursor: pointer;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-block;
            animation: feedbackPulse 2.5s ease-in-out infinite;
            position: absolute;
            bottom: 3rem;
        }
        .title-feedback:hover {
            color: var(--blood);
            animation: none;
        }
        .title-monologue.visible {
            opacity: 1;
        }

        /* v1.18: Main menu (formerly splash) - single centered column */
        .splash-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            height: 100%;
        }

        /* --- The Orb (Top Center) --- */
        .orb-container {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 1rem;
            user-select: none;
            position: relative;
            z-index: 2;
            height: 140px;
            transform: translateY(90px);  /* v1.03: Match stem offset */
        }

        #ascii-orb {
            font-family: 'Cutive Mono', monospace;
            font-size: 7px;
            line-height: 5.5px;
            letter-spacing: 0.5px;
            white-space: pre;
            text-align: center;
            color: var(--bone);
            transform: translateY(38px);
            height: auto;
            overflow: visible;
            /* v1.04: Simplified shadow for performance on high-res screens */
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
        }

        /* --- The ASCII Spine --- */
        .spine-col {
            grid-column: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            padding-top: 0;
            transform: translateY(90px);  /* v1.03: Counteract wrapper offset */
        }

        #ascii-spine {
            color: var(--blood);
            font-family: 'Cutive Mono', monospace;
            font-size: 12px;
            line-height: 12px;
            white-space: pre;
            text-align: center;
            opacity: 0.9;
            mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        }

        /* v1.12: Orb monologue display */
        .orb-monologue {
            position: absolute;
            left: calc(50% + 170px);
            top: calc(50% + 20px);
            transform: translateY(-50%);
            font-family: 'Cutive Mono', monospace;
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            max-width: 240px;
            min-height: 20px;
            color: #777;
            pointer-events: none;
        }
        .orb-monologue.phase-2, .orb-monologue.phase-3 {
            color: #888;
        }
        .orb-monologue.phase-4, .orb-monologue.phase-5 {
            color: var(--blood);
        }
        .orb-monologue.phase-6 {
            color: #B51531;
        }
        .orb-monologue.phase-7 {
            display: none;
        }
        
        /* v1.12: Orbit characters (red) */
        .orbit-char {
            color: var(--blood);
        }
        
        /* v1.12: Phase 6 eye characters (deeper red, animated) */
        .phase6-char {
            color: #B51531;
        }
        
        /* v1.12: Phase 7 eye characters (deeper red, static) */
        .phase7-char {
            color: #B51531;
        }
        
        /* v1.12: Orb phase test buttons (dev only - hidden) */
        #orb-phase-test {
            display: none;
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 99999;
            gap: 5px;
        }
        #orb-phase-test button {
            padding: 5px 10px;
            font-family: 'Cutive Mono', monospace;
            font-size: 10px;
            background: #222;
            color: var(--bone);
            border: 1px solid #444;
            cursor: pointer;
        }
        #orb-phase-test button:hover {
            background: #333;
            border-color: var(--blood);
        }

        /* --- Left Column (Title) - hidden, content moved to title screen --- */
        .splash-left-col {
            display: none;
        }

        .splash-left-col h2 {
            font-weight: 400;
            font-size: 1rem;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: #000;
            margin: 0;
        }

        .splash-left-col h1 {
            font-family: 'Times New Roman', Times, serif;
            font-weight: 400;
            font-size: 1.8rem;
            letter-spacing: 0.25em;
            margin-top: 0.5rem;
            line-height: 1.2;
            color: #000;
        }
        
        .splash-logo {
            max-width: 420px;
            height: auto;
            margin-top: 0.5rem;
        }
        
        /* v0.99: Version link under title */
        .version-link {
            font-size: 0.65rem;
            color: #000;
            letter-spacing: 0.15em;
            margin-top: 0.1rem;
            cursor: pointer;
            transition: color 0.2s;
            text-transform: uppercase;
        }
        .version-link:hover {
            color: #ccc;
        }
        
        /* v1.0: Feedback link */
        .feedback-link {
            font-size: 0.8rem;
            color: #ccc;
            letter-spacing: 0.15em;
            margin-top: 1.2rem;
            cursor: pointer;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-block;
            animation: feedbackPulse 2.5s ease-in-out infinite;
        }
        .feedback-link:hover {
            color: var(--blood);
            animation: none;
        }
        @keyframes feedbackPulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        
        /* v0.99: VERSION HISTORY MODAL - Crimson/Black scheme */
        #version-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2700;
        }
        #version-overlay.active { display: flex; }
        
        #version-modal {
            background: #8b1a1a;
            border: 1px solid #4a1010;
            box-shadow: 0 4px 30px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.3);
            width: min(420px, 90vw);
            height: min(660px, 85vh);
            display: flex;
            flex-direction: column;
            position: relative;
            font-family: 'Cutive Mono', monospace;

            transform-origin: center center;
        }
        
        #version-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 20px 10px;
            border-bottom: 1px solid #4a1010;
            background: #6b1414;
        }
        
        .version-title {
            color: #0a0a08;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .version-close {
            color: #0a0a08;
            cursor: pointer;
            font-size: 11px;
            opacity: 0.7;
        }
        .version-close:hover { opacity: 1; }
        
        #version-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px 20px;
            color: #0a0a08;
            font-size: 11px;
            line-height: 1;
        }
        
        #version-content h3 {
            color: #0a0a08;
            font-size: 14px;
            letter-spacing: 1px;
            margin: 15px 0 8px 0;
            border-bottom: 1px solid #4a1010;
            padding-bottom: 4px;
        }
        #version-content h3:first-child {
            margin-top: 0;
        }
        
        #version-content ul {
            list-style: none;
            padding: 0;
            margin: 0 0 12px 0;
        }
        
        #version-content li {
            padding-left: 16px;
            margin-bottom: 4px;
            position: relative;
        }
        #version-content li::before {
            content: "—";
            position: absolute;
            left: 0;
        }

        /* --- Right Column (Menu + Lore) --- */
        .splash-right-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 0.5;
            width: 300px;
        }

        /* Menu Styles */
        .splash-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .splash-nav li {
            font-family: 'Cutive Mono', monospace;
            font-size: 1rem;
            letter-spacing: 4px;
            margin-bottom: 0.6rem;
            cursor: pointer;
            transition: color 0.2s ease;
            color: #000;
        }
        
        /* v1.0: ENTER button matches title size on desktop */
        .splash-nav li[data-menu="start"] {
            font-size: 1rem;
        }

        .splash-nav li[data-menu="quickstart"] {
            font-size: 1rem;
        }

        .splash-nav li:hover {
            color: #fff;
        }

        .splash-nav li.active {
            color: #000;
        }
        
        .splash-nav li.active::after {
            content: ' <';
            color: #555;
        }
        
        /* v1.18: Splash monologue whisper above ENTER */
        .splash-monologue {
            font-size: 0.65rem;
            color: #000;
            letter-spacing: 2px;
            font-style: italic;
            min-height: 1.4em;
            margin-top: 1rem;
            text-align: right;
            cursor: default;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .splash-monologue.visible {
            opacity: 1;
        }

        /* v0.89: Settings toggles */
        .splash-nav li.setting-toggle {
            font-size: 0.7rem;
            color: #999;
            letter-spacing: 4px;
        }
        .splash-nav li.setting-toggle:hover {
            color: #ccc;
        }
        .splash-nav li.setting-toggle.enabled {
            color: #bbb;
        }
        .splash-nav li.setting-toggle.disabled {
            color: #000;
        }
        
        /* v1.18: Gap between main menu items and settings toggles */
        .splash-nav li.settings-group-start {
            margin-top: 3em;
        }

        /* v1.18: Electron-only elements hidden in browser */
        .electron-only { display: none !important; }

        /* v1.07: Export/Import row - matches setting-toggle */
        .splash-nav li.splash-export-row {
            font-size: 0.7rem;
            color: #444;
            letter-spacing: 4px;
        }
        .splash-nav li.splash-export-row:hover {
            color: #444;
        }
        .splash-progress-label {
            margin-right: 0.4em;
        }
        .splash-export-btn, .splash-import-btn {
            cursor: pointer;
            color: #444;
        }
        .splash-export-btn:hover, .splash-import-btn:hover {
            color: #888;
        }
        .splash-export-sep {
            margin: 0 0.3em;
            color: #333;
        }
        
        /* v1.07: Import Modal */
        .import-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100002;
        }
        .import-modal-overlay.open {
            display: flex;
        }
        .import-modal {
            background: #0a0a0a;
            border: 1px solid #333;
            padding: 20px 25px;
            min-width: 280px;
            font-family: 'Cutive Mono', monospace;
        }
        .import-modal-title {
            color: #666;
            font-size: 10px;
            letter-spacing: 2px;
            margin-bottom: 15px;
            text-align: center;
        }
        .import-modal-input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #333;
            color: #888;
            font-family: inherit;
            font-size: 11px;
            padding: 6px 0;
            outline: none;
            box-sizing: border-box;
        }
        .import-modal-input:focus {
            border-color: #555;
            color: #aaa;
        }
        .import-modal-input::placeholder {
            color: #444;
        }
        .import-modal-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 18px;
        }
        .import-modal-btn {
            color: #555;
            font-size: 10px;
            letter-spacing: 1px;
            cursor: pointer;
        }
        .import-modal-btn:hover {
            color: #999;
        }
        .import-modal-status {
            text-align: center;
            font-size: 9px;
            margin-top: 12px;
            color: #555;
            min-height: 12px;
        }

        /* Enter Button Strobe */
        @keyframes hard-strobe {
            0%   { opacity: 1; }
            5%   { opacity: 0.1; }
            10%  { opacity: 1; }
            15%  { opacity: 0.4; }
            20%  { opacity: 1; }
            25%  { opacity: 1; }
            30%  { opacity: 0.1; }
            35%  { opacity: 1; }
            40%  { opacity: 1; }
            45%  { opacity: 0.1; }
            50%  { opacity: 1; }
            55%  { opacity: 0; }
            60%  { opacity: 1; }
            100% { opacity: 1; }
        }

        .strobe-text {
            animation: hard-strobe 0.15s steps(1) infinite;
        }

        /* Lore Block */
        .lore-block {
            max-width: 420px;
            font-size: 0.85rem;
            color: #666;
            display: flex;
            flex-direction: column;
            gap: .8rem; 
        }

        .lore-paragraph {
            text-align: justify;
            line-height: 1; 
            letter-spacing: -0.01em;
            margin: 0;
        }
        
        .lore-block .stat-line {
            color: #555;
            font-size: 0.8rem;
        }
        
        .lore-block .locked {
            color: #333;
            text-decoration: line-through;
        }

        /* --- Circle Transition Overlay --- */
        #circle-transition {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #710e18;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        /* v1.0: Loading tip below circle */
        #transition-tip {
            max-width: 500px;
            margin-top: 2rem;
            padding: 0 30px;
            font-size: 0.8rem;
            line-height: 1.6;
            letter-spacing: 0.05em;
            color: #000;
            font-family: 'Cutive Mono', monospace;
            text-align: center;
            font-style: italic;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        #transition-tip.visible {
            opacity: 1;
        }
        
        #loading-percent {
            font-family: 'Cutive Mono', monospace;
            font-size: 1rem;
            letter-spacing: 4px;
            color: #000;
        }
        
        /* v0.89: Tip under circle transition */
        #transition-tip {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            max-width: 500px;
            text-align: center;
            font-size: 0.9rem;
            color: #000;
            font-style: italic;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        /* v1.0: Use desktop splash on all screen sizes - removed 768px breakpoint */
        
        /* WORK CONTRACT - Start screen redesign */
        #start-screen {
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: rgba(0,0,0,0.95);
            z-index: 3500;  /* v0.86: Ensure shows above ending screen */
        }

        /* v1.18: Anchor contract at vertical centre; return button floats below */
        #start-screen #contract-return-btn {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 6vh;
            margin-top: 0;
            text-align: center;
        }
        
        .work-contract {
            background: #f5f0e6;
            color: #222;
            padding: 25px 30px;
            /* v1.03: 15% smaller than guide */
            width: min(357px, 85vw);
            height: min(561px, 80vh);
            box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.05);
            position: relative;
            font-family: 'Cutive Mono', monospace;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        /* v1.18: kill default italic on drop-cap <i> tags inside contract */
        .work-contract i,
        .work-contract em {
            font-style: normal;
        }
        .contract-header {
            text-align: right;
            font-size: 7px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
            border-bottom: 1px solid #ddd;
            padding-bottom: 12px;
        }
        .contract-title {
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
            color: #111;
        }
        .contract-body {
            font-size: 10px;
            line-height: 1.6;
            color: #333;
            flex: 1;
            overflow-y: auto;
        }
        .contract-body p {
            margin: 0 0 10px 0;
            text-align: left;
        }
        .contract-body .section-title {
            font-weight: bold;
            color: #111;
        }
        .contract-body .warning-text {
            color: #660000;
            font-weight: bold;
        }
        .contract-signature {
            border-top: 1px solid #ccc;
            padding-top: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-shrink: 0;
        }
        .signature-line {
            flex: 1;
            border-bottom: 1px solid #999;
            margin-right: 15px;
            height: 60px; 
            position: relative;
            overflow: visible; 
        }
        
        /* Fountain pen cursor SVG - tilted 45 degrees, crimson nib */
        .pen-cursor, .pen-cursor * {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(-135 16 16)"><path fill="%23222" d="M16 2 L18 8 L16 28 L14 8 Z"/><path fill="%238B0000" d="M15 26 L16 32 L17 26 Z"/><path fill="%23C5A059" d="M14 8 L16 4 L18 8 L16 10 Z"/><ellipse fill="%23333" cx="16" cy="8" rx="3" ry="1.5"/></g></svg>') 2 30, crosshair;
        }
        
        /* Signature Canvas - The Blood Contract */
        #signature-canvas {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            touch-action: none; /* Critical for mobile - prevents scroll while signing */
            background: transparent;
        }
        
        /* Apply pen cursor to entire contract wrapper */
        #contract-wrapper.signing-mode {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(-135 16 16)"><path fill="%23222" d="M16 2 L18 8 L16 28 L14 8 Z"/><path fill="%238B0000" d="M15 26 L16 32 L17 26 Z"/><path fill="%23C5A059" d="M14 8 L16 4 L18 8 L16 10 Z"/><ellipse fill="%23333" cx="16" cy="8" rx="3" ry="1.5"/></g></svg>') 2 30, crosshair;
        }
        
        /* Sign button always has pointer cursor */
        .sign-btn {
            cursor: pointer !important;
        }
        
        /* Reset signature button */
        .signature-reset {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: rgba(139, 0, 0, 0.15);
            border: 1px solid #8B0000;
            border-radius: 3px;
            color: #8B0000;
            font-size: 14px;
            cursor: pointer !important;
            opacity: 0;
            transition: opacity 0.3s, background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: monospace;
            z-index: 10;
        }
        .signature-reset.visible {
            opacity: 1;
        }
        .signature-reset:hover {
            background: rgba(139, 0, 0, 0.3);
        }
        
        /* Ink blot feedback for touch */
        .ink-blot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #8B0000;
            border-radius: 50%;
            pointer-events: none;
            animation: blotFade 0.3s ease-out forwards;
        }
        @keyframes blotFade {
            0% { transform: scale(0); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.7; }
            100% { transform: scale(1); opacity: 0; }
        }
        
        .signature-text {
            position: absolute;
            
            /* CHANGED: Moves the text down to sit firmly on the line */
            bottom: -18px; 
            
            left: 30px;
            font-family: 'Herr Von Muellerhoff', cursive; 
            
            /* CHANGED: Bigger size */
            font-size: 45px; 
            
            color: #8B0000;
            white-space: nowrap;
            opacity: 0;
            
            /* CHANGED: Add padding so the clip-path box includes the tall loops */
            padding-top: 40px; 
            
            /* KEEP THIS: The animation reveals this box */
            clip-path: inset(0 100% 0 0);
            pointer-events: none; /* Don't block canvas */
        }
        .signature-text.writing {
            opacity: 1;
            animation: writeSignature 0.3s ease-out forwards;
        }
        @keyframes writeSignature {
            0% { clip-path: inset(0 100% 0 0); }
            100% { clip-path: inset(0 0% 0 0); }
        }
        .sign-btn {
            background: #8B0000;
            color: #f5f0e6;
            border: none;
            padding: 10px 25px;
            font-family: 'Cutive Mono', monospace;
            font-size: 12px;
            font-style: italic;
            cursor: pointer;
            transition: all 0.3s;
            letter-spacing: 1px;
            animation: subtle-vibrate 0.08s linear infinite;
        }
        .sign-btn:hover {
            background: #660000;
            transform: scale(1.02);
        }
        
        /* Contract burn/ash animation */
        .work-contract.burning {
            /* v1.03: Balatro-style dissolve handled by canvas overlay */
            pointer-events: none;
        }
        
        /* v1.03: Dissolve shader canvas overlay */
        .dissolve-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100;
        }
        
        @keyframes contractBurn {
            0% { 
                filter: brightness(1) sepia(0);
                transform: scale(1);
            }
            30% { 
                filter: brightness(1.1) sepia(0.3);
                transform: scale(1);
            }
            60% { 
                filter: brightness(0.8) sepia(0.6) saturate(1.5);
                transform: scale(0.98);
            }
            100% { 
                filter: brightness(0) sepia(1);
                transform: scale(0.9);
                opacity: 0;
            }
        }
        
        /* Ash particles overlay */
        .ash-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        .ash-particle {
            position: absolute;
            background: #222;
            border-radius: 50%;
            opacity: 0;
        }
        .ash-particle.falling {
            animation: ashFall 2s ease-out forwards;
        }
        @keyframes ashFall {
            0% { 
                opacity: 0;
                transform: translateY(0) rotate(0deg) scale(1);
            }
            20% { 
                opacity: 0.8;
            }
            100% { 
                opacity: 0;
                transform: translateY(100px) rotate(180deg) scale(0.3);
            }
        }
        
        /* Edge burn effect */
        .work-contract.burning::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at top left, rgba(0,0,0,0.9) 0%, transparent 50%),
                radial-gradient(ellipse at top right, rgba(0,0,0,0.9) 0%, transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(0,0,0,0.9) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(0,0,0,0.9) 0%, transparent 50%);
            animation: edgeBurn 0.8s ease-in forwards;
            pointer-events: none;
        }
        @keyframes edgeBurn {
            0% { opacity: 0; }
            30% { opacity: 0.3; }
            100% { opacity: 1; }
        }
        
        @media (max-width: 600px) {
            .work-contract {
                width: min(340px, 90vw);
                padding: 20px 18px;
            }
            /* v1.0: Keep contract text readable - BIGGER signature */
            .signature-text { 
                font-size: 42px;
                bottom: -14px !important; /* Adjusted for larger font */
            }
            .sign-btn { padding: 8px 18px; font-size: 12px; }
            .signature-line { height: 70px; } /* Taller for finger input */
            #signature-canvas { height: 70px; }
            .signature-reset { 
                width: 28px; 
                height: 28px; 
                font-size: 16px;
            }
        }
        @media (max-height: 700px) {
            .work-contract {
                aspect-ratio: unset;
                height: min(90vh, 550px);
            }
        }
        
       /* PIXEL CLOCK - now at top center, old container styles removed */

        /* ============================================
           POCKET CURIOS SYSTEM
           ============================================ */
        
        #pocket-container {
            width: 100%;
            flex: 1;
            border: none;  /* v1.06: Removed outline border */
            background: #0a0a0a;
            padding: 10px 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            box-sizing: border-box;
        }
        #pocket-title {
            font-family: 'DotGothic16', monospace;
            font-size: 10px;
            color: #777;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        #pocket-grid {
            /* Existing grid styles */
            display: grid;
            grid-template-columns: repeat(3, 28px);
            grid-template-rows: repeat(2, 28px);
            gap: 2px;
            padding: 3px;
            transition: all 0.3s ease;
            border: none;  /* v1.06: Removed outline border */
        }
        #pocket-grid.receiving {
            border-color: #ffffff;  /* CHANGED: Was #9932CC */
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); /* CHANGED: White glow */
        }
        .pocket-slot {
            background: #111;
            border: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #ffffff;
            transition: all 0.2s;
            position: relative;
            cursor: pointer;
            width: 100%;
            height: 100%;
            min-width: 26px;
            min-height: 26px;
            box-sizing: border-box;
        }

        /* v1.18: game-icons.net SVG sprites for curios / quest items */
        .item-sprite {
            width: 72%;
            height: 72%;
            object-fit: contain;
            opacity: 0.92;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
            /* PROTO: nearest-neighbour upscaling preserves the chunky pixels
               from the pre-rasterised PNG made by js/systems/pixelate.js */
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .item-sprite-curio    { filter: brightness(0.95) sepia(0.15); }
        .item-sprite-evidence { filter: brightness(0.95) hue-rotate(170deg) saturate(0.6); }
        #discovery-icon .item-sprite { width: 30px; height: 30px; }
        #drag-icon .item-sprite      { width: 26px; height: 26px; }
        
        /* Locked pocket slots - darkened and unusable */
        .pocket-slot.locked {
            background: #050505;
            border-color: #151515;
            cursor: not-allowed;
            opacity: 0.4;
        }
        .pocket-slot.locked::after {
            content: '×';
            color: #222;
            font-size: 10px;
        }
        .pocket-slot.locked:hover {
            border-color: #222;
        }
        .pocket-slot:hover {
            border-color: #444;
        }
        .pocket-slot.occupied {
            background: #1a0a2a;
            border-color: #9932CC;
        }
        .pocket-slot.highlight {
            background: #2a1a3a;
            border-color: #9932CC;
            box-shadow: inset 0 0 8px rgba(153, 50, 204, 0.6);
        }
        /* Evidence Drop Highlight (Cyan instead of Purple) */
        .pocket-slot.highlight.evidence-drag {
            background: #05151a; /* Very dark cyan background */
            border-color: var(--quest-cyan);
            box-shadow: inset 0 0 8px rgba(0, 204, 255, 0.6);
        }
        .pocket-slot.invalid {
            background: #2a0a0a;
            border-color: #660000;
        }
        /* Pocket slot styles continued... */

        /* --- PASTE YOUR NEW TOOLTIP CSS HERE --- */
        
        /* Tooltip Box */
        #curio-tooltip {
            display: none;
            position: absolute;
            background: #0a0510;
            border: 1px solid #9932CC;
            padding: 10px;
            z-index: 2000;
            width: 150px;
            pointer-events: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.8);
        }
        #curio-tooltip .name { color: #9932CC; font-weight: bold; font-size: 11px; margin-bottom: 4px; }
        #curio-tooltip .desc { color: #ccc; font-size: 10px; line-height: 1.3; }
        #curio-tooltip .flavor { color: #555; font-size: 9px; margin-top: 6px; font-style: italic; }

        /* ... next section ... */
        
        /* Active effects display */
        #active-effects {
            display: none !important;
            font-size: 7px;
            color: #9932CC;
            text-align: center;
            max-width: 96px;
            line-height: 1.3;
            min-height: 12px;
            opacity: 0.8;
        }
        
        /* Curio Discovery Popup */
        /* ================================================================
           UNIFIED ITEM DISCOVERY TRAY - Disco Elysium Inspired
           Anchored to top-left of map container
           ================================================================ */
        
        #discovery-tray {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
            pointer-events: none;
            opacity: 0;
        }
        
        #discovery-tray.active {
            pointer-events: auto;
            opacity: 1;
        }
        
        .discovery-card {
            background: linear-gradient(135deg, #0d0d0d 0%, #0a0a0a 100%);
            border: 1px solid #333;
            border-left: 3px solid #9932CC;
            overflow: hidden;
            box-shadow: 
                2px 2px 5px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            min-width: 180px;
            max-width: 240px;
        }
        
        #discovery-tray.evidence .discovery-card {
            border-left-color: var(--quest-cyan);
        }
        
        /* Main horizontal layout: item info on left, TAKE button on right */
        .discovery-main {
            display: flex;
            align-items: stretch;
        }
        
        /* TAKE >> Button - Right side, compact */
        .discovery-take-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 10px;
            background: linear-gradient(180deg, #1a0a2a 0%, #0d0515 100%);
            border: none;
            border-left: 1px solid #333;
            cursor: pointer;
            min-width: 50px;
        }
        
        .discovery-take-btn:hover {
            background: linear-gradient(180deg, #2a1040 0%, #1a0a2a 100%);
        }
        
        .discovery-take-btn:active {
            transform: scale(0.97);
        }
        
        .take-text {
            font-family: 'Cutive Mono', monospace;
            font-size: 10px;
            font-weight: bold;
            color: #9932CC;
            letter-spacing: 1px;
            margin-bottom: 1px;
        }
        
        .take-arrows {
            font-family: inherit;
            font-size: 12px;
            color: #9932CC;
            opacity: 0.8;
        }
        
        #discovery-tray.evidence .take-text,
        #discovery-tray.evidence .take-arrows {
            color: var(--quest-cyan);
        }
        
        #discovery-tray.evidence .discovery-take-btn {
            background: linear-gradient(180deg, #0a1520 0%, #051015 100%);
        }
        
        #discovery-tray.evidence .discovery-take-btn:hover {
            background: linear-gradient(180deg, #102030 0%, #0a1520 100%);
        }
        
        /* Item Preview - Left side, clickable to expand */
        .discovery-preview {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            cursor: pointer;
        }
        
        .discovery-preview:hover {
            background: rgba(255, 255, 255, 0.03);
        }
        
        .discovery-icon {
            width: 38px;
            height: 38px;
            background: #1a0a2a;
            border: 1px solid #9932CC;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #9932CC;
            flex-shrink: 0;
            box-shadow: 0 0 8px rgba(153, 50, 204, 0.3);
        }
        
        #discovery-tray.evidence .discovery-icon {
            background: #0a1520;
            border-color: var(--quest-cyan);
            color: var(--quest-cyan);
            box-shadow: 0 0 8px rgba(0, 204, 255, 0.3);
        }
        
        .discovery-info {
            flex: 1;
            min-width: 0;
        }
        
        .discovery-name {
            font-size: 13px;
            color: #ddd;
            font-weight: bold;
            margin-bottom: 2px;
            line-height: 1.2;
        }
        
        .discovery-hint {
            font-size: 10px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .discovery-hint-arrow {
            font-size: 10px;
            transition: transform 0.2s ease;
        }
        
        #discovery-tray.expanded .discovery-hint-arrow {
            transform: rotate(90deg);
        }
        
        /* Expanded Details Panel - Hidden by default */
        .discovery-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: rgba(0, 0, 0, 0.4);
            border-top: 1px solid transparent;
        }
        
        #discovery-tray.expanded .discovery-details {
            max-height: 200px;
            border-top-color: #222;
        }
        
        .discovery-details-inner {
            padding: 10px 12px;
        }
        
        .discovery-desc {
            font-size: 11px;
            color: #777;
            line-height: 1.5;
            margin-bottom: 8px;
        }
        
        .discovery-target {
            font-size: 8px;
            color: #555;
            margin-bottom: 8px;
        }
        
        .discovery-target span {
            color: var(--quest-cyan);
            font-weight: bold;
        }
        
        .discovery-trait-category {
            font-size: 8px;
            color: #888;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .discovery-trait-category span {
            color: var(--gold);
            font-weight: bold;
        }
        
        /* Shape Preview - Inline */
        .discovery-shape-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .discovery-shape-label {
            font-size: 7px;
            color: #444;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .discovery-shape-grid {
            display: grid;
            grid-template-columns: repeat(3, 10px);
            grid-template-rows: repeat(2, 10px);
            gap: 1px;
        }
        
        .discovery-shape-cell {
            background: #1a1a1a;
            border: 1px solid #333;
        }
        
        .discovery-shape-cell.filled {
            background: #9932CC;
            border-color: #9932CC;
        }
        
        #discovery-tray.evidence .discovery-shape-cell.filled {
            background: var(--quest-cyan);
            border-color: var(--quest-cyan);
        }
        
        /* Leave button - bottom of expanded panel */
        .discovery-leave-btn {
            width: 100%;
            padding: 8px;
            background: transparent;
            border: 1px solid #333;
            color: #555;
            font-family: inherit;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .discovery-leave-btn:hover {
            border-color: #660000;
            color: #aa4444;
            background: rgba(100, 0, 0, 0.1);
        }
        
        /* Mobile responsiveness */
        @media (max-width: 600px) {
            #discovery-tray {
                /* v1.03: Position to right of minimap at TOP */
                top: 8px;
                bottom: auto;
                left: 98px; /* 8px margin + 70px minimap + 12px padding + 8px gap */
                right: auto;
                max-width: 340px;
            }
            
            .discovery-card {
                max-width: 340px;
                min-width: 170px;
            }
            
            .discovery-take-btn {
                min-width: 52px;
                padding: 10px 10px;
            }
            
            .take-text {
                font-size: 11px;
            }
            
            .take-arrows {
                font-size: 12px;
            }
            
            .discovery-icon {
                font-size: 20px;
                width: 34px;
                height: 34px;
            }
            
            .discovery-name {
                font-size: 12px;
            }
            
            .discovery-hint {
                font-size: 10px;
            }
        }
        
        /* Update this existing block or add it if missing */
        .pocket-slot.evidence {
            background: #0a1a20;
            border-color: var(--quest-cyan);
            color: #fff;
            text-shadow: 0 0 5px rgba(0, 51, 204, 0.5);
        }
        /* Mobile pocket evidence styling now handled in mobile breakpoint */
        
        /* ================================================================
           FINAL ACCUSATION DESK - COMPACT (v0.56)
           ================================================================ */

        /* ============================================================================
           FINALE ACCUSATION v0.87 - Journal-Only with Deduction Submit
           ============================================================================ */
        /* ================================================================
           DEDUCTION TOOL - Persistent Suspect Tracker
           ================================================================ */
        .deduction-tool {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 15px 0;
            margin-top: auto;
        }
        
        .deduction-header {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #d4c8b8;
            letter-spacing: 3px;
            margin-bottom: 12px;
        }
        
        .deduction-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 16px;
            width: 100%
        }
        
        .deduction-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .deduction-label {
            font-size: 10px;
            letter-spacing: 2px;
            color: #888;
            text-align: center;
        }
        
        .deduction-arrow {
            background: transparent;
            border: none;
            color: #666;
            width: 24px;
            height: 24px;
            font-size: 14px;
            font-family: 'Cutive Mono', monospace;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
            padding: 0;
        }
        
        .deduction-arrow:hover {
            color: #c44;
        }
        
        .deduction-value {
            width: 100px;
            text-align: center;
            font-size: 10px;
            letter-spacing: 1px;
            color: #c0b8a8;
            background: rgba(0,0,0,0.5);
            padding: 4px 8px;
            border: 1px solid #3a3530;
        }
        
        /* v1.06: Finale accuse button - hidden by default */
        .finale-accuse-btn {
            display: none;
            width: 100%;
            padding: 12px 20px;
            margin-top: 16px;
            background: #8b0000;
            border: 1px solid #c44;
            color: #fff;
            font-family: 'Cutive Mono', monospace;
            font-size: 12px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .finale-accuse-btn:hover {
            background: #a00;
            border-color: #f44;
        }
        
        /* Show accuse button when in finale mode */
        body.finale-mode .finale-accuse-btn {
            display: block;
        }
        
        /* ================================================================
           v0.88: JOURNAL PAGINATION
           ================================================================ */
        .journal-spread-active {
            display: flex;
        }
        
        .journal-spread-hidden {
            display: none;
        }
        
        #journal-spread-2 {
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        
        /* v0.90: Journal Spread 3 - Grigori's Ledger (inverted dark theme) */
        #journal-spread-3 {
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        
        #journal-ledger {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            background: #1a1a1a;
            color: #c9c9c9;
            font-size: 10px;
            line-height: 1.8;
        }
        
        .ledger-header {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #8b0000;
            letter-spacing: 3px;
            margin-bottom: 14px;
            border-bottom: 1px solid #333;
            padding-bottom: 8px;
        }
        
        .ledger-subheader {
            text-align: center;
            font-size: 8px;
            color: #666;
            font-style: italic;
            margin-bottom: 12px;
        }
        
        .ledger-entry {
            margin-bottom: 4px;
            padding-left: 10px;
            border-left: 2px solid #333;
            color: #888;
        }
        
        .ledger-entry.current {
            border-left-color: #8b0000;
            color: #fff;
        }
        
        .ledger-entry.note {
            border-left-color: #c5a059;
            color: #c5a059;
            font-style: italic;
            margin-top: 15px;
        }
        
        #journal-ledger-notes {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            background: #1a1a1a;
            color: #999;
            font-size: 10px;
        }
        
        .ledger-notes-header {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #8b0000;
            letter-spacing: 3px;
            margin-bottom: 14px;
            border-bottom: 1px solid #333;
            padding-bottom: 8px;
        }
        
        .ledger-observation {
            margin-bottom: 10px;
            padding: 8px;
            background: #0d0d0d;
            border-left: 2px solid #444;
        }
        
        /* v0.90: Inherited journal entries (from past runs) */
        .journal-inherited {
            color: #8b7355 !important;
            font-style: italic;
            opacity: 0.85;
        }
        
        .journal-inherited::before {
            content: '◈ ';
            color: #6b5344;
        }
        
        /* v0.90: Locked ledger state (before finding item) */
        .ledger-locked {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #444;
            text-align: center;
        }
        
        .ledger-locked-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.3;
        }
        
        .ledger-locked-text {
            font-size: 11px;
            font-style: italic;
        }
        
        .journal-page-btn {
            position: absolute;
            bottom: 10px;
            background: #1a1a1a;
            border: 1px solid #444;
            color: #888;
            padding: 6px 14px;
            font-family: 'Cutive Mono', monospace;
            font-size: 10px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .journal-page-btn:hover {
            background: #2a1a1a;
            border-color: #8b0000;
            color: #c44;
        }
        
        .journal-next-btn {
            right: 10px;
        }
        
        .journal-prev-btn {
            left: 10px;
        }
        
        /* v0.90: Dark theme page buttons for ledger spread - same as all pages now */
        #journal-spread-3 .journal-page-btn {
            background: #1a1a1a;
            border-color: #444;
            color: #888;
        }
        
        #journal-spread-3 .journal-page-btn:hover {
            background: #2a1a1a;
            border-color: #8b0000;
            color: #c44;
        }
        
        /* v0.89: Journal tip under modal */
        #journal-tip {
            margin-top: 20px;
            max-width: 500px;
            text-align: center;
            font-size: 0.9rem;
            color: #555;
            font-style: italic;
        }
        
        /* v0.90: Contract Addendum styling */
        .contract-addendum {
            margin-top: 25px;
            padding: 15px;
            border-top: 1px dashed #8b7355;
            background: linear-gradient(to bottom, rgba(139, 115, 85, 0.05), rgba(139, 115, 85, 0.1));
        }
        
        .addendum-header {
            text-align: center;
            font-size: 10px;
            letter-spacing: 2px;
            color: #8b7355;
            margin-bottom: 10px;
        }
        
        .addendum-note {
            font-size: 8px;
            color: #999;
            font-style: italic;
            text-align: center;
            margin-bottom: 12px;
        }
        
        .contract-addendum p {
            font-size: 9px;
            line-height: 1.6;
            margin-bottom: 8px;
            color: #555;
        }
        
        .addendum-signature {
            margin-top: 15px;
            text-align: right;
            font-size: 9px;
        }
        
        .signature-present {
            font-style: italic;
            color: #8b0000;
        }
        
        /* v0.88: Evidence Log Page */
        #journal-evidence {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            background: #0a0a08;
            position: relative;
            color: #c0b8a8;
            font-size: 11px;
        }
        
        .observations-header {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #d4c8b8;
            letter-spacing: 3px;
            margin-bottom: 14px;
        }
        
        #evidence-log-content {
            font-size: 10px;
            line-height: 1.8;
        }
        
        .evidence-entry {
            margin-bottom: 12px;
            padding-left: 10px;
            border-left: 2px solid #c5a059;
        }
        
        .evidence-name {
            font-weight: bold;
            color: #c44;
        }
        
        .evidence-location {
            color: #888;
            font-style: italic;
        }
        
        .evidence-trait {
            color: #5a5;
        }
        
        .evidence-empty {
            color: #666;
            font-style: italic;
            text-align: center;
            margin-top: 40px;
        }
        
        /* v0.89: Observation entries */
        .observation-entry {
            margin-bottom: 10px;
        }
        
        .observation-name {
            font-weight: bold;
            color: #c0b8a8;
            font-size: 11px;
            letter-spacing: 1px;
            margin-bottom: 1px;
        }
        
        .observation-text {
            color: #909090;
            font-style: italic;
            font-size: 10px;
            padding-left: 10px;
            line-height: 1.3;
        }
        
        .observation-empty {
            color: #666;
            font-style: italic;
            font-size: 10px;
            padding-left: 10px;
        }
        
        /* v0.88: Schedules Page */
        #journal-schedules {
            flex: 1;
            padding: 10px 10px;
            overflow-y: auto;
            background: #0a0a08;
            position: relative;
            color: #c0b8a8;
            font-size: 11px;
        }
        
        /* Custom scrollbar for schedules */
        #schedules-content {
            padding-right: 5px;
        }
        
        #journal-schedules::-webkit-scrollbar {
            width: 6px;
        }
        
        #journal-schedules::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.05);
        }
        
        #journal-schedules::-webkit-scrollbar-thumb {
            background: rgba(139, 0, 0, 0.5);
            border-radius: 3px;
        }
        
        .schedules-header {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #d4c8b8;
            letter-spacing: 3px;
            margin-bottom: 10px;
            position: sticky;
            top: 0;
            background: #0a0a08;
            padding: 5px 0;
            z-index: 1;
        }
        
        .schedule-day-header {
            font-weight: bold;
            color: #a09080;
            margin-top: 8px;
            margin-bottom: 4px;
            font-size: 10px;
            letter-spacing: 1px;
            text-align: center;
        }
        
        .schedule-day-header:first-of-type {
            margin-top: 0;
        }
        
        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 8px;
            margin-bottom: 6px;
        }
        
        .schedule-table th {
            text-align: center;
            padding: 4px 2px;
            font-weight: bold;
            color: #888;
            border-bottom: 1px solid #333;
            font-size: 7px;
        }
        
        .schedule-table td {
            text-align: center;
            padding: 4px 2px;
            color: #888;
            font-size: 7px;
        }
        
        .schedule-table td.schedule-npc {
            text-align: left;
            font-weight: bold;
            color: #c0b8a8;
            width: 55px;
            font-size: 7px;
        }
        
        .schedule-table td.schedule-unknown {
            color: #444;
        }
        
        .schedule-table td.schedule-hotspot {
            background: rgba(139, 0, 0, 0.25);
            color: #c44;
            font-weight: bold;
        }
        
        .schedule-legend {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid #333;
            font-size: 7px;
            color: #666;
            text-align: center;
        }

        /* ================================================================
           ENDING SCREEN
           ================================================================ */
        #ending-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 3000;
        }
        #ending-screen.active {
            display: flex;
        }
        #ending-container {
            text-align: center;
            max-width: 600px;
            padding: 40px;
            transform-origin: center center;
        }
        #ending-tier {
            font-size: 10px;
            letter-spacing: 4px;
            color: #444;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        #ending-title {
            font-size: 36px;
            letter-spacing: 8px;
            margin: 0 0 40px 0;
            text-transform: uppercase;
            animation: glowPulse 3s infinite;
        }
        @keyframes glowPulse {
            0%, 100% { text-shadow: 0 0 10px currentColor; }
            50% { text-shadow: 0 0 30px currentColor, 0 0 50px currentColor; }
        }
        #ending-text {
            font-size: 18px;
            line-height: 2.2;
            color: #aaa;
            margin-bottom: 40px;
            min-height: 150px;
        }
        #ending-text p {
            margin: 0;
        }
        #ending-epitaph {
            font-style: italic;
            color: #666;
            font-size: 14px;
            margin-bottom: 50px;
            padding-top: 20px;
            border-top: 1px solid #222;
        }
        #ending-stats {
            font-size: 11px;
            color: #444;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }
        #ending-restart {
            background: transparent;
            border: 1px solid #333;
            color: #666;
            padding: 15px 40px;
            font-family: inherit;
            font-size: 12px;
            letter-spacing: 3px;
            cursor: pointer;
            transition: all 0.3s;
        }
        #ending-restart:hover {
            border-color: var(--blood);
            color: var(--blood);
            box-shadow: 0 0 20px rgba(220, 20, 60, 0.3);
        }
        
        /* v0.90: "One More Run" hint choice UI */
        #hint-choice {
            display: none;
            margin-top: 15px;
            padding: 12px 15px;
            border: 1px solid #333;
            background: rgba(0, 0, 0, 0.5);
        }
        #hint-choice.active {
            display: block;
        }
        #hint-choice-header {
            font-size: 10px;
            letter-spacing: 2px;
            color: #666;
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        #hint-choice-question {
            font-size: 11px;
            color: #999;
            margin-bottom: 12px;
            font-style: italic;
        }
        .hint-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .hint-btn {
            background: transparent;
            border: 1px solid #444;
            color: #888;
            padding: 8px 18px;
            font-family: inherit;
            font-size: 10px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .hint-btn:hover {
            border-color: #c5a059;
            color: #c5a059;
            box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
        }
        .hint-btn.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }
        #hint-confirmation {
            display: none;
            margin-top: 15px;
            font-size: 11px;
            color: #c5a059;
            font-style: italic;
        }
        #hint-confirmation.active {
            display: block;
        }
        
        /* Ending color themes */
        #ending-screen.victory #ending-title { color: #ffd700; }
        #ending-screen.partial #ending-title { color: #c0c0c0; }
        #ending-screen.failure #ending-title { color: #8b0000; }
        
        /* Zone A: The Line-Up (Left Panel) */
        /* ================================================================
           DRAGGING CURIO ELEMENT
           ================================================================ */
        /* Dragging curio element - must be hidden until active */
        #curio-drag {
            position: fixed;
            pointer-events: none;
            z-index: 1001;
            display: none !important;
            transform: translate(-50%, -50%);
            left: -9999px;
            top: -9999px;
        }
        #curio-drag.active {
            display: block !important;
        }
        .curio-drag-icon {
            width: 28px;
            height: 28px;
            background: #1a0a2a;
            border: 1px solid #9932CC;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #9932CC;
            box-shadow: 0 0 10px rgba(153, 50, 204, 0.6);
        }
        /* Evidence drag styling (cyan) */
        .curio-drag-icon.evidence {
            background: #051015;
            border-color: #00ccff;
            color: #00ccff;
            box-shadow: 0 0 10px rgba(0, 204, 255, 0.6);
        }
        
        /* Curio marker in game map (§ symbol in filth) */
        .curio-tile {
            color: #9932CC !important;
            text-shadow: 0 0 5px rgba(153, 50, 204, 0.8);
        }
        
        /* Tooltip for pocket slots */
        .pocket-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #0a0510;
            border: 1px solid #9932CC;
            padding: 8px 12px;
            font-size: 9px;
            color: #9932CC;
            white-space: nowrap;
            z-index: 100;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            margin-bottom: 5px;
        }
        .pocket-slot:hover .pocket-tooltip {
            opacity: 1;
        }
        
        /* Minimal dialogue design - centered text-only */
        .dialogue-container { 
            width: 600px; 
            max-width: 90vw; 
            display: flex; 
            flex-direction: column; 
            gap: 0; 
            padding: 40px 20px;
            text-align: left;

            transform-origin: center center;
        }
        .dialogue-speaker-name { 
            color: #888; 
            font-size: 14px; 
            font-weight: normal; 
            letter-spacing: 4px; 
            margin-bottom: 20px; 
            text-transform: uppercase;
            font-family: 'Courier New', monospace;
        }
        .dialogue-body-text { 
            color: #999; 
            font-size: 16px; 
            line-height: 1.6; 
            margin-bottom: 40px;
            font-family: 'Courier New', monospace;
            opacity: 1;
            transition: opacity 0.15s ease-out;
        }
        .dialogue-body-text.fading { opacity: 0; }
        .response-list { 
            display: flex; 
            flex-direction: column; 
            gap: 0;
            opacity: 1;
            transition: opacity 0.15s ease-out;
        }
        .response-list.fading { opacity: 0; }
        .response-option { 
            background: transparent; 
            border: none; 
            color: #666; 
            padding: 2px 0; 
            text-align: left; 
            cursor: pointer; 
            transition: color 0.15s ease; 
            font-family: 'Courier New', monospace; 
            font-size: 16px;
            line-height: 1.4;
        }
        .response-option:hover,
        .response-option.selected { 
            color: var(--blood);
        }
        /* Hide old speaker box elements */
        .speaker-box { display: none; }
        .speaker-portrait { display: none; }
        .speaker-content { display: none; }
        .speaker-name { display: none; }
        .speaker-text { display: none; }
        
        /* Debrief specific */
        .debrief-stats { 
            font-size: 12px; 
            color: #555; 
            margin-top: 20px;
            margin-bottom: 20px; 
            padding: 0; 
            background: transparent; 
            border: none;
            display: flex;
            gap: 30px;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
        }
        .debrief-stats span { color: #555; }
        .debrief-stats .secrets { color: var(--secret-yellow); }
        .debrief-stats .suspicion { color: var(--blood); }
        
        /* Skip Dialogue Button */
        .skip-dialogue-btn {
            margin-top: 20px;
            padding: 8px 16px;
            font-size: 11px;
            letter-spacing: 2px;
            color: #999;
            cursor: pointer;
            text-align: left;
            transition: color 0.15s;
            font-family: 'Courier New', monospace;
        }
        .skip-dialogue-btn:hover {
            color: var(--blood);
        }
        
        .debrief-result { 
            padding: 15px 0; 
            margin: 20px 0; 
            border: none;
            border-top: 1px solid #333;
            background: transparent;
            animation: fadeIn 0.3s ease-out;
            font-family: 'Courier New', monospace;
        }
        .debrief-result.success { border-color: #446644; }
        .debrief-result.failure { border-color: #664444; }
        .debrief-result.crit-success { border-color: var(--secret-yellow); }
        .debrief-result.crit-fail { border-color: var(--blood); }
        .debrief-result .outcome-label { 
            font-size: 11px; 
            letter-spacing: 3px; 
            color: #555; 
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        .debrief-result.success .outcome-label { color: #4a4; }
        .debrief-result.crit-success .outcome-label { color: var(--secret-yellow); }
        .debrief-result.failure .outcome-label { color: #a44; }
        .debrief-result.crit-fail .outcome-label { color: var(--blood); }
        .debrief-result .outcome { font-weight: normal; margin-bottom: 10px; color: #888; }
        .debrief-result .effect { color: #555; font-size: 12px; }

        /* UPGRADE SCREEN - The White Room */
        /* Ensure the overlay flex container centers everything vertically and horizontally */
        #upgrade-screen {
            display: flex;           /* Required for flex properties to work */
            flex-direction: column;
            align-items: center;     /* Centers items horizontally */
            justify-content: center; /* Centers items vertically */
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;  /* Ensures padding doesn't affect width */
        }
        .upgrade-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .secrets-count {
            font-size: 72px;
            color: #ffcc00;
            text-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
            line-height: 1;
            font-weight: bold;
        }
        
        .secrets-label {
            font-size: 14px;
            color: #666;
            letter-spacing: 4px;
            margin-top: 5px;
        }
        
        .upgrade-flavor {
            font-size: 12px;
            color: #555;
            font-style: italic;
            margin-top: 15px;
        }

        /* Ensure the card container centers its children */
        .card-container { 
            display: flex; 
            gap: 25px; 
            justify-content: center; /* Centers cards horizontally within the container */
            align-items: center;     /* Centers cards vertically relative to each other */
            flex-wrap: wrap;
            width: 100%;             /* Allow container to fill available width */
            max-width: 1000px;       /* Constrain width so they don't spread too far */
            margin: 20px 0;          /* Add spacing above/below the cards */
        }
        .card { 
            width: 200px;
            min-height: 280px;
            background: #ffffff; /* Stark white paper */
            border: none;
            padding: 20px 18px;
            cursor: pointer; 
            transition: all 0.3s; 
            text-align: center; 
            position: relative;
            box-shadow: 2px 4px 20px rgba(0,0,0,0.6);
            /* Rough/torn edge effect using clip-path */
            clip-path: polygon(
                0% 2%, 3% 0%, 8% 1%, 15% 0%, 22% 2%, 30% 0%, 38% 1%, 45% 0%, 52% 2%, 60% 0%, 68% 1%, 75% 0%, 82% 2%, 90% 0%, 95% 1%, 100% 0%,
                100% 98%, 97% 100%, 92% 99%, 85% 100%, 78% 98%, 70% 100%, 62% 99%, 55% 100%, 48% 98%, 40% 100%, 32% 99%, 25% 100%, 18% 98%, 10% 100%, 5% 99%, 0% 100%
            );
        }
        .card::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border: 2px solid #8b0000;
            pointer-events: none;
        }
        .card:hover { 
            transform: translateY(-8px) rotate(-1deg); 
            box-shadow: 4px 12px 30px rgba(0,0,0,0.7);
        }
        .card.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            filter: grayscale(0.7);
        }
        .card.disabled:hover {
            transform: none;
            box-shadow: 2px 4px 20px rgba(0,0,0,0.6);
        }
        .card h3 { 
            color: #1a1a1a; 
            margin: 0 0 12px 0; 
            font-size: 14px; 
            letter-spacing: 2px;
            text-transform: uppercase;
            border-bottom: 1px solid #8b0000; 
            padding-bottom: 8px; 
        }
        .card .desc { 
            color: #333; 
            font-size: 14px; 
            line-height: 1.5; 
            min-height: 50px;
            margin-bottom: 12px;
            font-style: italic;
        }
        .card .bonus { 
            color: #1a1a1a; 
            font-size: 10px; 
            margin: 8px 0; 
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .card .bonus::before {
            content: '✦ ';
            color: #8b0000;
        }
        .card .drawback { 
            color: #8b0000; 
            font-size: 10px; 
            margin: 8px 0; 
            font-style: italic;
        }
        .card .drawback::before {
            content: '✧ ';
        }
        .card .cost {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: #1a1a1a;
            color: #ffffff;
            padding: 4px 12px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .card .cost.cannot-afford {
            background: #555;
            color: #999;
        }
        
        /* v1.07: Earned/unlocked upgrade cards - crimson background */
        .card.earned {
            background: #8b0000;
        }
        .card.earned::before {
            border-color: #000000;
        }
        .card.earned h3 {
            color: #ffffff;
            border-bottom-color: #000000;
        }
        .card.earned .desc {
            color: #ffffff;
        }
        .card.earned .bonus {
            color: #ffffff;
        }
        .card.earned .bonus::before {
            color: #ffffff;
        }
        .card.earned .drawback {
            color: #cccccc;
        }
        .card.earned .cost {
            background: #000000;
            color: #ffffff;
        }
        .card.earned .cost.cannot-afford {
            background: #333333;
            color: #999999;
        }
        .card.earned .key-hint {
            color: #ffffff;
        }
        
        /* Skip button - prominent action */
        .skip-btn {
            display: block;
            padding: 15px 50px;
            background: #1a1a1a;
            border: 2px solid #444;
            color: #ccc;
            font-family: inherit;
            font-size: 14px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 3px;
            transition: all 0.3s, transform 0.1s;
            position: relative;
        }
        .skip-btn:hover {
            background: #2a2a2a;
            border-color: #666;
            color: #fff;
            box-shadow: 0 0 20px rgba(255,255,255,0.1);
        }
        .skip-btn:active {
            transform: scale(0.95);
        }
        
        /* Upgrade controls container */
        .upgrade-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }
        
        /* Pocket upgrade button - inverted style */
        .pocket-upgrade-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 30px;
            background: #ccc;
            border: 2px solid #999;
            color: #1a1a1a;
            font-family: inherit;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.3s, transform 0.1s;
            position: relative;
        }
        .pocket-upgrade-btn:hover:not(:disabled) {
            background: #fff;
            border-color: #666;
            color: #000;
            box-shadow: 0 0 15px rgba(255,255,255,0.3);
        }
        .pocket-upgrade-btn:active:not(:disabled) {
            transform: scale(0.95);
        }
        .pocket-upgrade-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            background: #888;
        }
        .pocket-upgrade-line1 {
            font-size: 14px;
            font-weight: bold;
        }
        .pocket-upgrade-line2 {
            font-size: 11px;
            color: #444;
            margin-top: 2px;
        }
        
        /* v1.06: Shuffle cards button */
        .shuffle-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 20px;
            background: #2a2a2a;
            border: 2px solid #555;
            color: #aaa;
            font-family: inherit;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.3s;
            position: relative;
        }
        .shuffle-btn:hover:not(:disabled) {
            background: #3a3a3a;
            border-color: #c5a059;
            color: #c5a059;
            box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
        }
        .shuffle-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .shuffle-btn-line1 {
            font-size: 14px;
            font-weight: bold;
        }
        .shuffle-btn-line2 {
            font-size: 11px;
            color: #666;
            margin-top: 2px;
        }
        
        /* Keyboard shortcut labels */
        .key-hint {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #888;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 2px;
            letter-spacing: 1px;
        }
        .card .key-hint {
            top: 12px;
            right: 12px;
            left: auto;
            transform: none;
            background: #8b0000;
            color: #fff;
            font-size: 11px;
            padding: 3px 7px;
            z-index: 5;
        }

        /* FULL MAP OVERLAY */
        #fullmap-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(5, 5, 5, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2500;  /* Above pinned documents */
            cursor: pointer;
        }
        #fullmap-overlay.active { display: flex; }
        
        /* JOURNAL MODAL (v0.5) - Cleaner's Notepad */
        #journal-btn {
            display: none;
            position: absolute;
            right: 0;
            bottom: 126px;
            background: var(--bone);
            border: 1px solid #8a8580;
            color: #0a0a0a;
            padding: 4px 10px;
            font-size: 22px;
            font-family: inherit;
            cursor: pointer;
            z-index: 100;
            width: 42px;
            height: 38px;
            box-sizing: border-box;
        }
        #journal-btn:hover {
            background: #d0ccc5;
            border-color: #6a6560;
        }
        /* Journal Button Glow Animation - v1.03: Updated for inverted style */
        @keyframes darkPulseDesktop {
            0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bone); }
            50% { box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); background: #ffffff; }
            100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bone); }
        }

        #journal-btn.glowing {
            animation: darkPulseDesktop 2s infinite ease-in-out, subtle-vibrate 0.08s linear infinite;
        }
        
        /* v0.93: GUIDE BUTTON */
        #guide-btn {
            display: none;
            position: absolute;
            right: 0;
            bottom: 84px;
            background: var(--bone);
            border: 1px solid #8a8580;
            color: #0a0a0a;
            padding: 4px 10px;
            font-size: 20px;
            font-family: inherit;
            cursor: pointer;
            z-index: 100;
            width: 42px;
            height: 38px;
            box-sizing: border-box;
        }
        #guide-btn:hover {
            background: #d0ccc5;
            border-color: #6a6560;
        }
        
        /* v0.99: FAITH BUTTON */
        #faith-btn {
            display: none;
            position: absolute;
            right: 0;
            bottom: 42px;
            background: var(--bone);
            border: 1px solid #8a8580;
            color: #0a0a0a;
            padding: 4px 10px;
            font-size: 22px;
            font-family: inherit;
            cursor: pointer;
            z-index: 100;
            width: 42px;
            height: 38px;
            box-sizing: border-box;
        }
        #faith-btn:hover {
            background: #d0ccc5;
            border-color: #6a6560;
        }
        
        /* v0.98: Button shortcut labels - v1.03: darker for inverted buttons */
        .btn-shortcut {
            position: absolute;
            bottom: 2px;
            right: 2px;
            font-size: 7px;
            color: #666;
            font-family: 'Cutive Mono', monospace;
            pointer-events: none;
        }
        
        /* v0.93: GUIDE MODAL - Inverted color scheme */
        #guide-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2600;
        }
        #guide-overlay.active { display: flex; }
        
        #guide-modal {
            background: #343A44;
            border: 1px solid #4a5560;
            box-shadow: 0 4px 30px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.3);
            width: min(378px, 90vw);
            height: min(660px, 85vh);
            display: flex;
            flex-direction: column;
            position: relative;
            font-family: 'Cutive Mono', monospace;

            transform-origin: center center;
        }
        
        #guide-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 20px 10px;
            border-bottom: 1px solid #4a5560;
            background: #2A3038;
        }
        
        .guide-title {
            color: #7a8a9a;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .guide-close {
            color: #667;
            cursor: pointer;
            font-size: 11px;
        }
        .guide-close:hover { color: #9ab; }
        
        #guide-content {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            color: #000;
            font-size: 11px;
            line-height: 1;
        }
        
        #guide-content::-webkit-scrollbar { width: 6px; }
        #guide-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
        #guide-content::-webkit-scrollbar-thumb { background: rgba(139, 0, 0, 0.5); border-radius: 3px; }
        #guide-content::-webkit-scrollbar-thumb:hover { background: rgba(139, 0, 0, 0.7); }
        
        #guide-content h1 {
            color: #000;
            font-size: 14px;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin: 0 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #4a5560;
            text-align: center;
        }
        
        #guide-content h2 {
            color: #000;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin: 30px 0 15px 0;
            padding-bottom: 5px;
            border-bottom: 1px dotted #4a5560;
        }
        
        #guide-content h3 {
            color: #000;
            font-size: 11px;
            letter-spacing: 1px;
            margin: 20px 0 10px 0;
        }
        
        #guide-content p {
            margin: 0 0 12px 0;
            text-align: justify;
        }
        
        #guide-content .guide-toc {
            margin: 0 0 25px 0;
            padding: 10px 15px;
            background: #2A3038;
            border: 1px solid #4a5560;
        }
        
        #guide-content .guide-toc-title {
            color: #5a6a7a;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        
        #guide-content .guide-toc a {
            display: block;
            color: #e31717;
            text-decoration: none;
            padding: 4px 0;
            font-size: 14px;
            line-height: 1;

        }
        #guide-content .guide-toc a:hover {
            color: #dc143c;
            text-decoration: underline;
        }
        
        #guide-content .guide-note {
            font-style: italic;
            color: #e31717;
            padding: 8px 12px;
            border-left: 2px solid #8b0000;
            margin: 15px 0;
            background: rgba(30, 10, 10, 0.4);
        }
        
        /* v0.95: PINNED PANEL SYSTEM - repositions actual modals */
        /* Journal pinned: game shifts left, journal docks to right with tight gap */
        body.journal-pinned #game-layout {
            transform: translateX(-390px);
        }
        
        body.journal-pinned #journal-overlay {
            display: block !important;
            background: transparent;
            pointer-events: none;
            z-index: 100;  /* Lower when pinned so it doesn't cover tooltips or map */
        }
        
        body.journal-pinned #journal-modal {
            pointer-events: auto;
            position: fixed;
            top: 50%;
            left: calc(50% - 62px);
            transform: translateY(-50%);
            transform-origin: left center;
            height: min(634px, 85vh);
            z-index: 110;
        }
        
        /* Hide tip when journal is pinned */
        body.journal-pinned #journal-tip {
            display: none !important;
        }
        
        /* v1.0: Hide mobile nav bar when pinned on desktop */
        body.journal-pinned #journal-mobile-nav {
            display: none !important;
        }
        
        /* Guide pinned: smaller shift since guide is narrower */
        body.guide-pinned #game-layout {
            transform: translateX(-230px);
        }
        
        body.guide-pinned #guide-overlay {
            display: block !important;
            background: transparent;
            pointer-events: none;
            z-index: 100;  /* Lower when pinned so it doesn't cover tooltips or map */
        }
        
        body.guide-pinned #guide-modal {
            pointer-events: auto;
            position: fixed;
            top: 50%;
            left: calc(50% + 100px);
            transform: translateY(-50%);
            transform-origin: left center;
            height: min(634px, 85vh);
            z-index: 110;
        }
        
        /* v0.99: Faith pinned - wider document, shift more */
        body.faith-pinned #game-layout {
            transform: translateX(-200px);
        }
        
        body.faith-pinned #faith-overlay {
            display: block !important;
            background: transparent;
            pointer-events: none;
            z-index: 100;
        }
        
        body.faith-pinned #faith-modal {
            pointer-events: auto;
            position: fixed;
            top: 50%;
            left: calc(50% + 120px);
            transform: translateY(-50%);
            transform-origin: left center;
            height: min(634px, 85vh);
            z-index: 110;
        }
        
        /* PIN button in modal headers */
        .modal-pin-btn {
            color: #888;
            cursor: pointer;
            font-size: 11px;
            margin-right: 10px;
        }
        .modal-pin-btn:hover { color: #aaa; }
        
        /* v1.06: Journal theme toggle button */
        .journal-theme-btn {
            color: #888;
            cursor: pointer;
            font-size: 11px;
            margin-right: 10px;
        }
        .journal-theme-btn:hover { color: #aaa; }
        
        /* v1.06: Journal light mode - warm beige */
        #journal-modal.light-mode {
            background: #f5f1e8;
            border-color: #a09080;
        }
        #journal-modal.light-mode #journal-header {
            background: #e8e2d6;
            border-bottom-color: #c8c0b0;
        }
        #journal-modal.light-mode .journal-title {
            color: #5a5040;
        }
        #journal-modal.light-mode .journal-close,
        #journal-modal.light-mode .modal-pin-btn,
        #journal-modal.light-mode .journal-theme-btn {
            color: #7a6a50;
        }
        #journal-modal.light-mode .journal-close:hover,
        #journal-modal.light-mode .modal-pin-btn:hover,
        #journal-modal.light-mode .journal-theme-btn:hover {
            color: #4a4030;
        }
        #journal-modal.light-mode #journal-content {
            background: #f5f1e8;
            color: #3a3428;
        }
        #journal-modal.light-mode #journal-traits {
            background: #f5f1e8;
            color: #3a3428;
        }
        /* Headers - consistent styling */
        #journal-modal.light-mode .traits-header,
        #journal-modal.light-mode .deduction-header,
        #journal-modal.light-mode .observations-header,
        #journal-modal.light-mode .schedules-header {
            color: #5a5040;
            border-bottom-color: #c8c0b0;
            background: #f5f1e8;
        }
        #journal-modal.light-mode .traits-table th {
            color: #6a6050;
        }
        #journal-modal.light-mode .traits-table td {
            color: #4a4438;
            border-color: #d8d0c0;
        }
        /* v1.06: Keep colored traits in light mode */
        #journal-modal.light-mode .traits-table td.trait-cell.trait-yes {
            color: #2a7a2a;
            font-weight: bold;
        }
        #journal-modal.light-mode .traits-table td.trait-cell.trait-no {
            color: #a53030;
            font-weight: bold;
        }
        /* v1.12: Light mode name cell styling */
        #journal-modal.light-mode .traits-table td.name-cell:hover {
            background-color: rgba(0, 0, 0, 0.06);
        }
        #journal-modal.light-mode .traits-table td.name-cell.name-suspect {
            color: #b85a10;
            font-weight: bold;
        }
        #journal-modal.light-mode .traits-table td.name-cell.name-cleared {
            text-decoration: line-through;
            color: #999;
        }
        #journal-modal.light-mode .journal-entry {
            border-bottom-color: #d8d0c0;
            color: #3a3428;
        }
        #journal-modal.light-mode .entry-time {
            color: #8a8070;
        }
        #journal-modal.light-mode #journal-tabs button {
            color: #6a6050;
            border-color: #c8c0b0;
            background: #e8e2d6;
        }
        #journal-modal.light-mode #journal-tabs button.active {
            color: #4a4030;
            background: #f5f1e8;
            border-bottom-color: #f5f1e8;
        }
        #journal-modal.light-mode #journal-footer {
            background: #e8e2d6;
            border-top-color: #c8c0b0;
        }
        #journal-modal.light-mode .deduction-tool {
            background: #f5f1e8;
            border-color: #c8c0b0;
        }
        #journal-modal.light-mode .deduction-label {
            color: #5a5040;
        }
        #journal-modal.light-mode .deduction-value {
            color: #4a4438;
            border-color: #c8c0b0;
            background: #ebe5d8;
        }
        #journal-modal.light-mode .deduction-arrow {
            color: #7a7060;
        }
        #journal-modal.light-mode .deduction-arrow:hover {
            color: #4a4030;
        }
        /* Nav buttons */
        #journal-modal.light-mode .journal-nav-btn,
        #journal-modal.light-mode .journal-page-btn {
            color: #6a6050;
            border-color: #c8c0b0;
            background: #e8e2d6;
        }
        #journal-modal.light-mode .journal-nav-btn:hover,
        #journal-modal.light-mode .journal-page-btn:hover {
            background: #d8d2c6;
            color: #4a4030;
        }
        /* Page 3-4: Observations and Schedules */
        #journal-modal.light-mode #journal-evidence,
        #journal-modal.light-mode #journal-schedules {
            background: #f5f1e8;
            color: #3a3428;
        }
        #journal-modal.light-mode #evidence-log-content,
        #journal-modal.light-mode #schedules-content {
            color: #3a3428;
        }
        #journal-modal.light-mode .evidence-entry,
        #journal-modal.light-mode .observation-entry,
        #journal-modal.light-mode .schedule-entry {
            border-bottom-color: #d8d0c0;
            color: #3a3428;
        }
        /* Schedule table */
        #journal-modal.light-mode .schedule-day-header {
            color: #5a5040;
            border-bottom-color: #c8c0b0;
        }
        #journal-modal.light-mode .schedule-table {
            border-color: #c8c0b0;
        }
        #journal-modal.light-mode .schedule-table th {
            color: #6a6050;
            border-color: #d8d0c0;
            background: #e8e2d6;
        }
        #journal-modal.light-mode .schedule-table td {
            color: #4a4438;
            border-color: #d8d0c0;
        }
        #journal-modal.light-mode .schedule-table td.schedule-npc {
            color: #5a5040;
            background: #ebe5d8;
        }
        #journal-modal.light-mode .schedule-table td.schedule-unknown {
            color: #a09080;
        }
        #journal-modal.light-mode .schedule-table td.schedule-hotspot {
            background: rgba(139, 0, 0, 0.1);
        }
        /* Finale accuse button in light mode */
        #journal-modal.light-mode .finale-accuse-btn {
            background: #8b0000;
            color: #f5f1e8;
            border-color: #6a0000;
        }
        #journal-modal.light-mode .finale-accuse-btn:hover {
            background: #a00000;
        }
        /* Page 5-6: Ledger (keep dark for contrast - it's Grigori's private notes) */
        #journal-modal.light-mode #journal-ledger,
        #journal-modal.light-mode #journal-ledger-notes {
            background: #1a1a1a;
            color: #c8c8c8;
        }
        #journal-modal.light-mode #journal-ledger .ledger-notes-header {
            color: #888;
            border-bottom-color: #333;
        }
        
        /* Hide theme button on mobile */
        @media (max-width: 700px) {
            .journal-theme-btn { display: none !important; }
        }
        
        /* Hide PIN buttons on smaller screens */
        @media (max-width: 1400px) {
            .modal-pin-btn { display: none !important; }
        }
        
        /* v0.99: FAITH PAMPHLET - Cold/Ethereal color scheme */
        #faith-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2600;
        }
        #faith-overlay.active { display: flex; }
        
        #faith-modal {
            background: #483D50;
            border: 1px solid #5a4a62;
            box-shadow: 0 4px 30px rgba(0,0,0,0.8), inset 0 0 60px rgba(30,20,40,0.5);
            width: min(333px, 95vw);
            height: min(660px, 85vh);
            display: flex;
            flex-direction: column;
            position: relative;
            font-family: 'Cutive Mono', monospace;

            transform-origin: center center;
        }
        
        #faith-header {
            padding: 10px 15px 8px;
            border-bottom: 1px solid #5a4a62;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            background: #3a3040;
        }
        #faith-header h2 {
            color: #1a1420;
            font-size: 10px;
            letter-spacing: 2px;
            margin: 0;
            font-weight: normal;
        }
        #faith-close {
            color: #28202E;
            cursor: pointer;
            font-size: 11px;
        }
        #faith-close:hover { color: #000; }
        
        #faith-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        #faith-content {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            color: #0a0810;
            font-size: 11px;
            line-height: 1;
            letter-spacing: -0.01em;
        }
        
        #faith-content h1 {
            color: #000;
            font-size: 14px;
            letter-spacing: 4px;
            text-align: center;
            margin: 0 0 12px 0;
            font-weight: normal;
            border-bottom: 1px solid #5a4a62;
            padding-bottom: 10px;
        }
        
        #faith-content h3 {
            color: #000;
            font-size: 10px;
            letter-spacing: 3px;
            margin: 12px 0 6px 0;
            font-weight: normal;
        }
        
        #faith-content p {
            margin: 0 0 8px 0;
            text-align: justify;
        }
        
        #faith-content .faith-verse {
            color: #0a0810;
            font-style: italic;
            text-align: center;
            margin: 10px 0;
            padding: 8px;
            border-left: 2px solid #3a3040;
            background: rgba(40, 32, 46, 0.3);
        }
        
        #faith-content .faith-prayer {
            color: #000;
            text-align: center;
            margin: 8px 0;
            font-size: 10px;
            letter-spacing: 1px;
        }
        
        #faith-content .faith-symbol {
            text-align: center;
            color: #1a1420;
            font-size: 20px;
            margin: 10px 0;
        }
        
        #faith-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 15px;
            border-top: 1px solid #5a4a62;
            background: #3a3040;
            flex-shrink: 0;
        }
        
        #faith-nav-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        #faith-page-num {
            color: #1a1420;
            font-size: 10px;
            letter-spacing: 1px;
        }
        
        .faith-nav-btn {
            background: transparent;
            border: 1px solid #5a4a62;
            color: #0a0810;
            padding: 5px 15px;
            font-family: inherit;
            font-size: 11px;
            cursor: pointer;
            letter-spacing: 1px;
        }
        .faith-nav-btn:hover:not(:disabled) {
            border-color: #6a5a72;
            color: #000;
            background: rgba(255,255,255,0.1);
        }
        .faith-nav-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }
        
        /* v0.93: SETTINGS BUTTON & PANEL */
        #settings-btn {
            display: none; /* v1.10: Hidden - settings accessed via ESC key modal */
            position: absolute;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            border: 1px solid #4a4540;
            color: var(--bone);
            padding: 6px 10px;
            font-size: 18px;
            font-family: inherit;
            cursor: pointer;
            z-index: 100;
            width: 42px;
            height: 38px;
            box-sizing: border-box;
        }
        #settings-btn:hover {
            background: #1a1815;
            border-color: #6a6560;
        }
        #settings-btn.active {
            background: #1a1815;
            border-color: var(--bone);
        }
        
        /* v1.0: Settings Overlay (hidden until open) */
        #settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 99999;
            pointer-events: none;
            background: rgba(0, 0, 0, 0.85); /* v1.10: Dark overlay for modal */
        }
        
        #settings-overlay.open {
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: auto;
        }
        
        /* v1.18: Stripped-down settings modal — no borders, no dividers, bracketed text buttons */
        #settings-panel {
            position: relative;
            background: rgba(8, 8, 8, 0.95);
            border: none;
            padding: 14px 22px;
            min-width: 240px;
            z-index: 100000;
            font-family: 'Cutive Mono', monospace;
            font-size: 13px;            /* v2: larger ESC-modal text */
            pointer-events: auto;
            display: none;
        }
        #settings-panel.open {
            display: block;
        }
        .settings-title {
            color: var(--bone);
            font-size: 13px;
            letter-spacing: 2px;
            border-bottom: none;
            padding-bottom: 10px;
            margin-bottom: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .settings-close {
            cursor: pointer;
            color: #888;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .settings-close::before { content: '[ '; }
        .settings-close::after { content: ' ]'; }
        .settings-close:hover { color: var(--bone); }
        .settings-hint {
            color: #444;
            font-size: 8px;
            margin-left: 6px;
            flex: 1;
        }
        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 0;
            color: #888;
            font-size: 9px;
        }
        .settings-row:hover { color: var(--bone); }
        .settings-label {
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .settings-control {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* All settings buttons render as [ TEXT ] — no borders, no fill */
        #settings-panel button {
            cursor: pointer;
            border: none;
            background: transparent;
            padding: 0;
            margin: 0 0 0 3px;
            color: inherit;
            font-family: inherit;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        #settings-panel button::before { content: '[ '; }
        #settings-panel button::after  { content: ' ]'; }
        #settings-panel button:hover { color: var(--bone); }
        .settings-toggle.on  { color: #8f8; }
        .settings-toggle.off { color: #888; }

        .settings-value {
            min-width: 30px;
            text-align: center;
            color: var(--bone);
            font-size: 12px;
        }

        /* Divider rules removed visually — preserve space rhythm only */
        .settings-divider {
            border-top: none;
            margin: 4px 0;
        }

        #menu-btn-normal {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        #menu-btn-row { justify-content: center !important; }
        .settings-menu-btn { font-size: 13px; }
        .settings-menu-btn:hover { color: var(--blood); }
        #menu-btn-confirm {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }
        .menu-confirm-text {
            color: #aaa;
            font-size: 13px;
            letter-spacing: 1px;
        }
        .menu-confirm-yes { color: var(--blood); }
        .menu-confirm-yes:hover { color: #fff; }
        .menu-confirm-no:hover  { color: var(--bone); }

        /* PROTO: Blue Prince-style room draft modal */
        #draft-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(5, 5, 5, 0.92);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 99998;
            pointer-events: none;
        }
        #draft-overlay.open {
            display: flex;
            pointer-events: auto;
        }
        #draft-modal {
            background: transparent;
            padding: 20px 40px;
            text-align: center;
            font-family: 'Cutive Mono', monospace;
            color: #bbb;
            max-width: 90vw;
        }
        .draft-title {
            font-size: 16px;
            letter-spacing: 4px;
            color: var(--bone);
            margin-bottom: 8px;
        }
        .draft-subtitle {
            font-size: 11px;
            letter-spacing: 2px;
            color: #666;
            margin-bottom: 24px;
        }
        .draft-cards {
            display: flex;
            gap: 24px;
            justify-content: center;
            margin-bottom: 18px;
        }
        /* PROTO: torn-paper white cards matching the upgrade screen
           ("The White Room"). Same clip-path edge, same red inset border,
           same lift-on-hover. */
        .draft-card {
            width: 200px;
            min-height: 340px;
            background: #ffffff;
            border: none;
            padding: 20px 18px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
            position: relative;
            box-shadow: 2px 4px 20px rgba(0,0,0,0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            clip-path: polygon(
                0% 2%, 3% 0%, 8% 1%, 15% 0%, 22% 2%, 30% 0%, 38% 1%, 45% 0%, 52% 2%, 60% 0%, 68% 1%, 75% 0%, 82% 2%, 90% 0%, 95% 1%, 100% 0%,
                100% 98%, 97% 100%, 92% 99%, 85% 100%, 78% 98%, 70% 100%, 62% 99%, 55% 100%, 48% 98%, 40% 100%, 32% 99%, 25% 100%, 18% 98%, 10% 100%, 5% 99%, 0% 100%
            );
        }
        .draft-card::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 14px;
            right: 14px;
            bottom: 14px;
            border: 2px solid #8b0000;
            pointer-events: none;
        }
        .draft-card:hover {
            transform: translateY(-8px) rotate(-1deg);
            box-shadow: 4px 12px 30px rgba(0,0,0,0.7);
        }
        .draft-card-icon {
            width: 56px;
            height: 56px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .draft-card-icon .item-sprite {
            width: 48px;
            height: 48px;
            opacity: 0.95;
            /* Source icons are white-on-transparent. The previous chain
               landed at #B60000; reduced final brightness to land on the
               literal #8B0000 instead (ratio 139/182 ≈ 0.76, so 70% × 0.76
               ≈ 54%). */
            filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7000%) hue-rotate(-5deg) brightness(54%) contrast(120%);
        }
        .draft-card-name {
            color: #1a1a1a;
            margin: 0 0 12px 0;
            font-family: 'DotGothic16', monospace;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            border-bottom: 1px solid #8b0000;
            padding-bottom: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        .draft-card-type {
            color: #8b0000;
            font-size: 9px;
            letter-spacing: 2px;
            margin-bottom: 12px;
            text-transform: uppercase;
        }
        .draft-card-fact {
            color: #1a1a1a;
            font-size: 11px;
            font-weight: bold;
            margin: 8px 0 12px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.4;
            min-height: 30px;
        }
        .draft-card-fact::before {
            content: '✦ ';
            color: #8b0000;
        }
        .draft-card-desc {
            color: #8b0000;
            font-size: 12px;
            line-height: 1.5;
            font-style: italic;
            margin-bottom: 12px;
            min-height: 36px;
        }
        /* Top-right shortcut hint, mirroring upgrade-screen .key-hint. */
        .draft-card-hint {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #8b0000;
            color: #ffffff !important;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 7px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border-radius: 2px;
            z-index: 5;
        }
        /* Per-card secret cost pill at the bottom centre, mirroring the
           upgrade-screen .card .cost. Uses the HUD stat-label font for
           consistency with the in-game stats display. Subtle-vibrate
           matches the SIGN button — but the standard keyframes would
           overwrite our translateX(-50%) centering, so we use a centred
           variant below. */
        .draft-card-cost {
            position: absolute;
            bottom: 15px;
            left: 50%;
            background: #1a1a1a;
            color: #ffffff;
            padding: 4px 12px;
            font-family: 'DotGothic16', monospace;
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            animation: subtle-vibrate-centered 0.08s linear infinite;
            transform-origin: center center;
        }
        @keyframes subtle-vibrate-centered {
            0%, 100% { transform: translate(-50%, 0); }
            20%      { transform: translate(calc(-50% - 1px), 0); }
            40%      { transform: translate(calc(-50% + 1px), 0); }
            60%      { transform: translate(-50%, -1px); }
            80%      { transform: translate(-50%, 1px); }
        }
        .draft-card-cost.cannot-afford {
            background: #555;
            color: #999;
        }
        .draft-cost {
            color: var(--secret-yellow);
            letter-spacing: 1px;
        }
        .draft-cost-bad {
            color: var(--blood);
            letter-spacing: 1px;
        }
        .draft-card-locked {
            opacity: 0.4;
            cursor: not-allowed;
            filter: grayscale(0.7);
        }
        .draft-card-locked:hover {
            transform: none;
            box-shadow: 2px 4px 20px rgba(0,0,0,0.6);
        }
        .draft-card-hint {
            font-size: 9px;
            letter-spacing: 2px;
            color: #555;
            margin-top: auto;
        }
        .draft-card:hover .draft-card-hint { color: var(--bone); }
        .draft-esc-hint {
            font-size: 9px;
            letter-spacing: 2px;
            color: #444;
            margin-top: 8px;
            cursor: pointer;
        }
        .draft-esc-hint:hover { color: #888; }

        /* v1.18: [ESC] hint anchored below the menu */
        .settings-esc-hint {
            text-align: center;
            color: #444;
            font-size: 9px;
            letter-spacing: 2px;
            margin-top: 12px;
            cursor: pointer;
        }
        .settings-esc-hint:hover { color: var(--bone); }
        
        /* v1.07: THE LEDGER - Macabre Stats Modal */
        #ledger-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            z-index: 100001;
            justify-content: center;
            align-items: center;
        }
        #ledger-overlay.open {
            display: flex;
        }
        #ledger-modal {
            background: #0a0808;
            border: 2px solid #8b0000;
            padding: 20px 30px;
            max-width: 400px;
            font-family: 'Cutive Mono', monospace;
            box-shadow: 0 0 30px rgba(139, 0, 0, 0.3);
        }
        .ledger-title {
            color: #8b0000;
            font-size: 12px;
            letter-spacing: 3px;
            text-align: center;
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .ledger-close {
            float: right;
            cursor: pointer;
            color: #666;
        }
        .ledger-close:hover {
            color: #fff;
        }
        #ledger-content {
            color: #888;
            font-size: 11px;
            line-height: 1.8;
        }
        .ledger-stat {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dotted #222;
            padding: 3px 0;
        }
        .ledger-stat-label {
            color: #666;
            letter-spacing: 1px;
        }
        .ledger-stat-value {
            color: #ccc;
            font-weight: bold;
        }
        .ledger-section {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid #333;
        }
        .ledger-section-title {
            color: #8b0000;
            font-size: 10px;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }
        .ledger-killers, .ledger-methods {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 5px;
        }
        .ledger-killer, .ledger-method {
            padding: 2px 6px;
            border: 1px solid #333;
            font-size: 10px;
        }
        .ledger-killer.caught, .ledger-method.seen {
            border-color: #8b0000;
            color: #8b0000;
        }
        .ledger-killer.missed, .ledger-method.unseen {
            color: #333;
            border-color: #222;
        }
        
        #import-prompt {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #333;
        }
        #import-code-input {
            width: 100%;
            padding: 4px 6px;
            background: #111;
            border: 1px solid #444;
            color: var(--bone);
            font-family: inherit;
            font-size: 9px;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }
        #import-code-input:focus {
            outline: none;
            border-color: #666;
        }
        .import-buttons {
            display: flex;
            gap: 6px;
        }
        #import-status {
            font-size: 8px;
            margin-top: 6px;
            min-height: 12px;
        }
        #import-status.success { color: #8f8; }
        #import-status.error { color: var(--blood); }
        
        /* Hide main journal button when finale accusation is active */
        #finale-accusation.active ~ #game-container #journal-btn,
        body:has(#finale-accusation.active) #journal-btn {
            display: none;
        }
        
        #journal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2600;
        }
        #journal-overlay.active { display: flex; }
        
        #journal-modal {
            background: #0a0a08;
            border: 1px solid #3a3530;
            box-shadow: 0 4px 30px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.3);
            width: min(760px, 90vw);
            height: min(660px, 85vh);
            display: flex;
            flex-direction: column;
            position: relative;
            font-family: 'Cutive Mono', monospace;

            transform-origin: center center;
        }
        
        #journal-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 20px 10px;
            border-bottom: 1px solid #2a2520;
            background: #0f0e0c;
        }
        
        .journal-title {
            color: #a09080;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .journal-close {
            color: #666;
            cursor: pointer;
            font-size: 11px;
        }
        .journal-close:hover { color: #aaa; }
        
        #journal-tabs { display: none; }
        
        /* TWO-PAGE SPREAD LAYOUT */
        #journal-spread {
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        
        /* v0.87: Journal drawing canvas removed */
        
        #journal-content {
            flex: 1;
            padding: 15px 20px;
            overflow-y: auto;
            color: #c0b8a8;
            font-size: 11px;
            line-height: 1.7;
            /* Lined paper effect removed */
            background: transparent; 
        }
        
        /* PAGE 2: TRAITS TABLE - Simple text */
        #journal-traits {
            flex: 1;
            padding: 15px 15px;
            overflow-y: auto;
            background: #0a0a08;
            position: relative;
            color: #c0b8a8;
            font-size: 11px;
            display: flex;
            flex-direction: column;
        }
        
        /* Worn paper texture overlay - disabled for dark theme */
        #journal-traits::before {
            display: none;
        }
        
        .traits-header {
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #d4c8b8;
            letter-spacing: 3px;
            margin-bottom: 14px;
            position: relative;
        }
        
       .traits-table {
           width: 100%;
           max-width: 100%;
           table-layout: fixed;
           border-collapse: collapse;
           font-size: 9px;
           position: relative;
           margin: 0 auto;
           border: none;
       }

       .traits-table th {
           text-align: center;
           padding: 8px 0; 
           font-weight: bold;
           color: #a09080;
           background: transparent;
           border: none; /* v0.87: borders removed */
       }

       .traits-table tr {
           height: 14px;
       }

       .traits-table td {
           text-align: center;
           padding: 4px 1px;
           color: #908880;
           border: none; /* v0.87: borders removed */
           word-wrap: break-word;
           height: 14px;
           overflow: hidden;
       }

/* v0.87: Border rules removed - table is now borderless */
       .traits-table th:first-child,
       .traits-table td:first-child {
           text-align: left;
           padding-left: 5px;
           /* Force the first column to take 17% of the width (names need more room) */
           width: calc(17%);
           white-space: nowrap;
       }

       .traits-table td.cleared {
           text-decoration: line-through;
           color: #555;
       }
       
       /* v0.87: Clickable trait cells */
       .traits-table td.trait-cell {
           cursor: pointer;
           user-select: none;
           transition: background-color 0.1s;
       }
       
       .traits-table td.trait-cell:hover {
           background-color: rgba(255, 255, 255, 0.08);
       }
       
       .traits-table td.trait-cell.trait-yes {
           color: #5a5;
           font-weight: bold;
       }
       
       .traits-table td.trait-cell.trait-no {
           color: #a55;
           font-weight: bold;
       }
       
       /* v0.87: Clickable name cells */
       .traits-table td.name-cell {
           cursor: pointer;
           user-select: none;
           transition: all 0.1s;
       }
       
       .traits-table td.name-cell:hover {
           background-color: rgba(255, 255, 255, 0.08);
       }
       
       .traits-table td.name-cell.name-suspect {
           color: #c96;
           font-weight: bold;
       }
       
       .traits-table td.name-cell.name-cleared {
           text-decoration: line-through;
           color: #555;
       }
       
       .traits-tagline {
           text-align: center;
           font-size: 10px;
           color: #666;
           margin-top: 8px;
           margin-bottom: 8px;
       }
       
       .traits-export {
           text-align: center;
           font-size: 9px;
           color: #555;
           margin-bottom: 12px;
       }
       
       .traits-export .export-link {
           color: #666;
           cursor: pointer;
           text-decoration: none;
       }
       
       .traits-export .export-link:hover {
           color: #999;
           text-decoration: underline;
       }
       
       .traits-export .export-divider {
           margin: 0 8px;
           color: #444;
       }
        
        .journal-entry {
            margin-bottom: 12px;
            padding-left: 10px;
        }
        
        .journal-entry-day {
            color: #808080;
            font-size: 9px;
            margin-bottom: 2px;
        }
        
        .journal-entry-text {
            color: #c0b8a8;
        }
        
        .journal-entry-quote {
            color: #909090;
            font-style: italic;
        }
        
        .journal-entry-item {
            color: #7090b0;
        }
        
        .journal-entry-thought {
            color: #888;
            font-style: italic;
        }
        
        /* v0.6: Mystery journal styling - Gold text */
        .journal-entry-mystery {
            color: #c9a040;
            padding-left: 8px;
            margin-left: -8px;
        }
        .journal-entry-clue {
            color: #c9a040;
        }
        .journal-entry-alibi {
            color: #5a9a5a;
            font-style: italic;
        }
        
        .journal-divider {
            border: none;
            margin: 15px 0;
        }
        
        /* Legacy styles - keep for compatibility */
        .journal-suspect { display: none; }
        .journal-resonance { display: none; }
        
        .fullmap-container {
            background: #0a0a08;
            border: 1px solid #333;
            width: min(620px, 85vw);
            height: min(580px, 80vh);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .fullmap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px 10px;
            border-bottom: 1px solid #1a1a1a;
            background: #0f0e0c;
            flex-shrink: 0;
        }
        
        .fullmap-title {
            color: var(--blood);
            font-size: 11px;
            font-weight: normal;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .fullmap-close {
            color: #555;
            font-size: 10px;
            cursor: pointer;
            letter-spacing: 1px;
        }
        .fullmap-close:hover { color: #888; }
        
        #fullmap-viewport {
            flex: 1;
            overflow: hidden;
            position: relative;
            cursor: grab;
        }
        
        #fullmap-viewport:active {
            cursor: grabbing;
        }
        
        #fullmap-grid {
            position: absolute;
            display: grid;
            gap: 8px;
            background: #0a0a0a;
            padding: 20px;
            transition: transform 0.08s ease-out;
        }
        
        #fullmap-corridors {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 10;
        }
        
        .fullmap-corridor {
            stroke: #888;
            stroke-width: 4;
            stroke-linecap: square;
        }
        
        .fullmap-cell {
            background: #0a0a0a;
            border: 1px solid #1a1a1a;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: default;
            overflow: hidden;
        }
        
        .fullmap-cell-label {
            font-size: 9px;
            color: #444;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            text-align: center;
            line-height: 1.1;
            padding: 4px;
            pointer-events: none;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .fullmap-cell.discovered {
            background: #1a1a1a;
            border-color: #8b3a3a;
            cursor: pointer;
        }
        
        .fullmap-cell.discovered .fullmap-cell-label {
            color: #777;
        }
        
        .fullmap-cell.discovered:hover {
            border-color: #aa4444;
        }
        
        .fullmap-cell.home .fullmap-cell-label {
            color: #fff;
            font-size: 24px;
            text-shadow: 0 0 6px #ffdd44;
        }
        
        .fullmap-cell.current {
            border-color: #fff !important;
            box-shadow: 0 0 12px rgba(255,255,255,0.8);
        }
        
        .fullmap-cell.current .fullmap-cell-label {
            color: #ccc;
            text-shadow: none;
        }
        
        .fullmap-cell.current .fullmap-you-are-here {
            display: block;
        }
        
        .fullmap-you-are-here {
            display: none;
            font-size: 7px;
            color: #999;
            margin-top: 3px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }
        
        .fullmap-cell.tier-sanctum.discovered {
            background: #1a0a0a;
        }
        
        .fullmap-cell.tier-grounds.discovered {
            background: #0a1a0a;
        }
        
        .fullmap-cell.elder-sanctum.discovered {
            background: #2a0505 !important;
            border-color: #880000 !important;
        }
        
        .fullmap-cell.elder-sanctum.discovered:hover {
            border-color: #aa2222 !important;
        }
        
        .fullmap-cell.anastasia-quarters.discovered {
            background: #051530 !important;
            border-color: #4477aa !important;
        }
        
        .fullmap-cell.anastasia-quarters.discovered:hover {
            border-color: #6699cc !important;
        }
        
        #fullmap-description {
            padding: 8px 20px;
            min-height: 20px;
            font-size: 11px;
            color: #888;
            font-style: italic;
            text-align: center;
            border-top: 1px solid #1a1a1a;
            background: #0f0e0c;
            flex-shrink: 0;
        }
        
        #fullmap-description strong {
            color: #aaa;
            font-style: normal;
        }
        /* Card bonus/drawback/desc styles defined in UPGRADE CARDS section above */

        .highlight { color: #fff; font-weight: bold; }
        .warning { color: var(--blood); }

        .start-btn { background: var(--blood); color: #000; border: none; padding: 15px 30px; font-family: inherit; font-weight: bold; font-size: 16px; cursor: pointer; margin-top: 20px; width: 100%; transition: all 0.2s; }
        .start-btn:hover { background: #fff; }

        /* ENTITIES */
        .player { color: #fff; text-shadow: 0 0 4px #fff; background: transparent; position: relative; z-index: 2; }
        .wall { color: #9b9b9b; }
        .void { color: #050505; } /* Same as background - invisible */
        .floor { color: #0a0a0a; } /* Very dim so texture shows through */
        
        /* v0.66: Map tile hover effect - subtle cursor highlight */
        .map-cell {
            transition: background-color 0.6s ease;
        }
        .map-cell:hover {
            background-color: rgba(255, 255, 255, 0.2) !important;
            text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
        }
        .map-cell.wall:hover,
        .map-cell.player:hover {
            background-color: transparent !important;
        }
        
        /* v0.55: Ghost steps for point-and-click navigation */
        .ghost-step { 
            color: rgba(100, 180, 255, 0.6); 
            animation: ghost-pulse 0.5s ease-in-out infinite alternate;
        }
        @keyframes ghost-pulse {
            from { opacity: 0.4; }
            to { opacity: 0.8; }
        }
        .filth { color: #555; text-shadow: 0 0 2px #333; }
        .exit { color: var(--blood); animation: blink 2s infinite; }
        /* PROTO: draftable periphery doorways read as blue arrows. Resting
           state is a deep navy; the per-step flash pulses toward quest-cyan. */
        /* Continuous throb — always breathing, even when the player is still. */
        .exit-draft {
            color: #2a7ab8;
            animation: exitDraftThrob 1.8s ease-in-out infinite;
            text-shadow: 0 0 5px rgba(0, 153, 255, 0.5);
        }
        @keyframes exitDraftThrob {
            0%, 100% { color: #2a7ab8; text-shadow: 0 0 4px rgba(0, 153, 255, 0.4); }
            50%      { color: #09f;    text-shadow: 0 0 10px rgba(0, 153, 255, 0.8); }
        }
        .exit-flash {
            animation: exitPulse 0.2s ease-out !important;
        }
        .exit-draft.exit-flash {
            animation: exitDraftPulse 0.2s ease-out !important;
        }
        @keyframes exitDraftPulse {
            0%   { color: #66ccff; text-shadow: 0 0 14px rgba(0, 153, 255, 0.95); }
            100% { color: #2a7ab8; text-shadow: 0 0 4px rgba(0, 153, 255, 0.4); }
        }

        @keyframes exitPulse {
            0% { color: #ff6666; text-shadow: 0 0 10px #ff0000; }
            100% { color: var(--blood); text-shadow: none; }
        }
        @keyframes pulse-gold {
            0%, 100% { text-shadow: 0 0 8px #ffd700; }
            50% { text-shadow: 0 0 15px #ffd700, 0 0 25px #cc9900; }
        }
        @keyframes pulse-vice {
            0%, 100% { text-shadow: 0 0 10px var(--vice-orange); }
            50% { text-shadow: 0 0 18px var(--vice-orange), 0 0 30px #ff4400; }
        }
        @keyframes pulse-legacy {
            0%, 100% { text-shadow: 0 0 12px #5588cc, 0 0 20px #3366aa; opacity: 0.9; }
            50% { text-shadow: 0 0 20px #5588cc, 0 0 35px #3366aa, 0 0 50px #224488; opacity: 1; }
        }
        .npc-bright { 
            color: #ffffff; 
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); 
            font-weight: bold; 
            display: inline-block;
            animation: suspect-vibrate 0.08s linear infinite;
        }
        .npc-elder { 
            color: #880000; 
            text-shadow: 0 0 10px #ff0000; 
            display: inline-block;
            animation: suspect-vibrate 0.08s linear infinite;
        }
        .npc-client { color: #4488ff; text-shadow: 0 0 8px rgba(68, 136, 255, 0.8); font-weight: bold; } /* Lady Anastasia */
        .npc-ambient { color: #888888; text-shadow: 0 0 4px rgba(136, 136, 136, 0.5); }
        
        /* v1.07: Suspect NPC vibration - unsettling micro-tremor */
        @keyframes suspect-vibrate {
            0%, 100% { transform: translate(0, 0); }
            20% { transform: translate(-2px, 0); }
            40% { transform: translate(2px, 0); }
            60% { transform: translate(0, -2px); }
            80% { transform: translate(0, 2px); }
        }
        /* v1.07: Subtle vibrate for UI elements (1px) */
        @keyframes subtle-vibrate {
            0%, 100% { transform: translate(0, 0); }
            20% { transform: translate(-1px, 0); }
            40% { transform: translate(1px, 0); }
            60% { transform: translate(0, -1px); }
            80% { transform: translate(0, 1px); }
        }
        /* v1.10: More obvious journal shake */
        @keyframes journal-shake {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            10% { transform: translate(-2px, 0) rotate(-1deg); }
            20% { transform: translate(2px, 0) rotate(1deg); }
            30% { transform: translate(-2px, 0) rotate(0deg); }
            40% { transform: translate(2px, 0) rotate(1deg); }
            50% { transform: translate(-1px, 0) rotate(-1deg); }
            60% { transform: translate(1px, 0) rotate(0deg); }
            70% { transform: translate(-1px, 0) rotate(1deg); }
            80% { transform: translate(1px, 0) rotate(-1deg); }
            90% { transform: translate(-1px, 0) rotate(0deg); }
        }
        .item-quest { color: var(--quest-cyan); text-shadow: 0 0 5px var(--quest-cyan); font-weight: bold; animation: blink 3s infinite; }
        .item-mystery { color: #ffd700; text-shadow: 0 0 8px #ffd700; font-weight: bold; animation: pulse-gold 2s infinite; }
        .item-mystery-base { color: #8b7500; text-shadow: 0 0 4px #8b7500; font-weight: bold; } /* v1.04: Dimmer base items (no pulse) */
        .item-vice { color: var(--vice-orange); text-shadow: 0 0 10px var(--vice-orange); font-weight: bold; animation: pulse-vice 1.5s infinite; }
        .item-legacy { color: #5588cc; text-shadow: 0 0 12px #5588cc, 0 0 20px #3366aa; font-weight: bold; animation: pulse-legacy 2s infinite; }
        .item-bed { color: #886644; text-shadow: 0 0 5px #664422; font-weight: bold; }
        .furniture { color: #262626; }
        .sodium-mode .wall { color: #ffcc00; opacity: 0.5; }
        .sodium-mode .player { color: #000; background: #3b3b3b; }
        .sodium-mode { background-color: #1a1a00; }

        /* ============================================================================
           v0.80: TASK MINIGAME SYSTEM - Janitorial Horror Overlays
           ============================================================================ */
        
        /* Main Overlay Container - Inside map container, semi-transparent */
        #minigame-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);  /* v1.08: More opaque to hide room texture */
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
            overflow: hidden;
        }
        
        #minigame-overlay.active {
            display: flex;
        }
        
        #minigame-overlay.active #minigame-frame {
            animation: fadeIn 0.15s ease-out forwards;
        }
        
        #minigame-overlay.closing #minigame-frame {
            animation: fadeOut 0.1s ease-in forwards;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        
        /* Minigame Frame - Nearly map height, square content area */
        #minigame-frame {
            width: 220px;
            height: 240px;
            background: rgba(10, 10, 10, 0.92);
            border: 1px solid #444;
            position: relative;
            overflow: hidden;
        }
        
        /* Title Bar - Instruction text */
        #minigame-title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 18px;
            background: rgba(12, 8, 8, 0.95);
            border-bottom: 1px solid #2a2020;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cutive Mono', monospace;
            font-size: 9px;
            color: #777;
            letter-spacing: 0.5px;
            padding: 0 5px;
            animation: subtle-vibrate 0.08s linear infinite;
        }
        
        /* Progress Bar - Thin and subtle */
        #minigame-progress-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #111;
        }
        
        #minigame-progress-bar {
            height: 100%;
            width: 0%;
            background: #444;
            transition: width 0.05s linear;
        }
        
        #minigame-progress-bar.complete {
            background: #555;
        }
        
        /* Canvas Area - Square content zone */
        #minigame-canvas {
            position: absolute;
            top: 18px;
            left: 0;
            right: 0;
            bottom: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }
        
        #minigame-canvas canvas {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        
        /* Custom Cursor (Gloved Hand) */
        #minigame-cursor {
            display: none !important;
        }
        
        /* Completion - subtle */
        #minigame-frame.complete {
            border-color: #444;
        }
        
        /* Vignette - disabled */
        #minigame-vignette {
            display: none;
        }
        
        /* Interactive Elements Base Styles */
        .mg-stain, .mg-debris, .mg-puddle {
            position: absolute;
            transition: opacity 0.2s;
        }
        
        /* SIMPLIFIED FADE-BASED MINIGAMES */
        .mg-fade-area {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .mg-fade-overlay {
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.1s;
            z-index: 2;
        }
        
        .mg-fade-icon {
            font-size: 48px;
            opacity: 0.6;
        }
        
        .mg-fade-clean {
            font-size: 32px;
            color: #333;
            opacity: 0.3;
            z-index: 1;
        }
        
        .mg-hint {
            position: absolute;
            bottom: 12px;
            font-size: 9px;
            color: #444;
            letter-spacing: 1px;
        }
        
        /* THE MIRROR - Image-based reveal system */
        .mg-mirror-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-mirror-reveal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-mirror-fog-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 2;
            transition: opacity 0.1s;
        }
        
        /* Table scrub image layers */
        .mg-table-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-table-reveal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-table-stain-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 2;
            transition: opacity 0.1s;
        }
        
        /* Drain unclog image layers */
        .mg-drain-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-drain-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-drain-hair {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: auto;
            z-index: 2;
            transition: top 0.05s ease-out;
            image-rendering: pixelated;
            user-select: none;
            -webkit-user-drag: none;
            -moz-user-select: none;
            pointer-events: none;
        }
        
        .mg-drain-front {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 3;
            pointer-events: none;
        }
        
        .mg-drain-hint {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #888;
            z-index: 4;
            opacity: 0.8;
        }
        
        .mg-drain-container.grabbing .mg-drain-hair {
            filter: brightness(1.2);
        }
        
        /* Mop floor image layers */
        .mg-floor-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-floor-clean {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-floor-spill-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 2;
            transition: opacity 0.1s;
        }
        
        /* Sweep shelf image layers */
        .mg-shelf-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-shelf-clean {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-shelf-filth-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 2;
            transition: opacity 0.1s;
        }
        
        /* Sand cutlery image layers */
        .mg-cutlery-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-cutlery-clean {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .mg-cutlery-rusty-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 2;
            transition: opacity 0.1s;
        }
        
        /* Legacy styles (deprecated) */
        .mg-mirror-frame {
            width: 220px;
            height: 280px;
            border: 6px solid #6b5345;
            background: #111;
            position: relative;
        }
        
        .mg-mirror-fog {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(180, 180, 180, 0.9);
            transition: opacity 0.05s;
        }
        
        .mg-mirror-reflection {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            color: #333;
        }
        
        /* THE MOP - Fluid and mop */
        .mg-mop-area {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .mg-mop-puddle {
            position: absolute;
            border-radius: 50%;
        }
        
        .mg-mop-bucket {
            position: absolute;
            background: linear-gradient(180deg, #444 0%, #333 100%);
            border-radius: 0 0 8px 8px;
            border: 2px solid #555;
        }
        
        .mg-mop-head {
            position: absolute;
            background: #666;
            border-radius: 4px;
            cursor: grab;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* THE UNCLOG - Drain and obstruction */
        .mg-unclog-drain {
            border-radius: 50%;
            background: radial-gradient(circle, #1a1a1a 0%, #111 40%, #282828 60%, #333 80%, #444 100%);
            position: relative;
        }
        
        .mg-unclog-obstruction {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #2a2015;
            border-radius: 50%;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* THE SAND - Surface to polish */
        .mg-sand-surface {
            background: linear-gradient(180deg, #555 0%, #444 50%, #333 100%);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        
        .mg-sand-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(139, 90, 43, 0.8);
        }
        
        /* THE PICK - Debris pile with sprite support */
        .mg-pick-pile {
            width: 100%;
            height: 100%;
            position: relative;
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .mg-pick-item {
            position: absolute;
            cursor: pointer;
            transition: transform 0.1s, opacity 0.2s;
            user-select: none;
            image-rendering: pixelated;
            z-index: 2;
        }
        
        .mg-pick-item:hover {
            transform: scale(1.2) !important;
            filter: brightness(1.2);
        }
        
        .mg-pick-item.picked {
            opacity: 0 !important;
            pointer-events: none;
            transform: scale(0.3) !important;
            visibility: hidden;
        }
        
        /* Sprite-based item (uses background-image with positioning) */
        .mg-pick-sprite {
            background-repeat: no-repeat;
        }
        
        /* THE SWEEP - Layer to clear */
        .mg-sweep-area {
            position: relative;
            overflow: hidden;
            background: #1a1a1a;
        }
        
        .mg-sweep-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(100, 100, 100, 0.9);
        }
        
        /* THE LOCKBOX - Sequential latches */
        .mg-lockbox-area {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mg-lockbox {
            position: relative;
            width: 160px;
            height: 110px;
            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
            border: 1px solid #555;
            border-radius: 4px;
        }
        
        .mg-lockbox-lid {
            position: absolute;
            top: -6px;
            left: -1px;
            right: -1px;
            height: 32px;
            background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
            border: 1px solid #555;
            border-radius: 4px 4px 0 0;
        }
        
        .mg-lockbox-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 10px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .mg-latch {
            position: absolute;
            width: 32px;
            height: 24px;
            background: #666;
            border: 1px solid #888;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #333;
        }
        
        .mg-latch:hover {
            background: #777;
        }
        
        .mg-latch.hint {
            background: #997755;
            border-color: #aa8866;
        }
        
        .mg-latch.locked {
            background: #446644;
            border-color: #558855;
            cursor: default;
        }
        
        .mg-latch.locked::after {
            content: '✓';
            color: #88aa88;
        }
        
        .mg-latch.wrong {
            background: #664444;
            border-color: #885555;
        }
        
        /* v0.98: Align (Painting) Minigame */
        .mg-align-area {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .mg-align-wall {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
        }
        
        .mg-align-painting-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* Pivot from hook point - slightly above center of painting */
            transform-origin: center 15%;
        }
        
        .mg-align-painting {
            width: 100px;
            height: 100px;
            object-fit: contain;
            image-rendering: pixelated;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        }
        
        /* Minimal level indicator - just a line with tick */
        .mg-align-indicator {
            --tick-offset: 0px;
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 12px;
        }
        
        .mg-align-center {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 12px;
            background: #555;
        }
        
        .mg-align-tick {
            position: absolute;
            top: 2px;
            left: calc(50% + var(--tick-offset));
            transform: translateX(-50%);
            width: 3px;
            height: 8px;
            background: #888;
        }
        
        .mg-align-indicator.level .mg-align-tick {
            background: #aaa;
        }
        
        .mg-align-indicator.level .mg-align-center {
            background: #777;
        }
        
        /* Placeholder/centered content */
        .mg-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Cutive Mono', monospace;
            color: #555;
        }
        
        .mg-placeholder-icon {
            font-size: 72px;
            opacity: 0.6;
        }
        
        .mg-placeholder-label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }


        /* CONTROLS - D-PAD (mobile only) */
        #d-pad { 
            display: none; 
            flex-direction: column; 
            align-items: center; 
            gap: 5px;
        }
        .d-row { display: flex; gap: 5px; }
        .btn-ctrl { width: 44px; height: 44px; background: #080808; border: 1px solid #333; color: #666; font-family: inherit; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; border-radius: 4px; touch-action: manipulation; transition: all 0.1s; }
        .btn-ctrl:active { background: #1a0505; color: var(--blood); border-color: var(--blood); transform: translateY(2px); }
        
        /* v1.0: Mobile Controls Wrapper - Hidden on desktop */
        #mobile-controls-wrapper { display: none; }
        #mobile-controls-top { display: none; }
        #mobile-btn-row { display: none; }
        #journal-deduction { display: none; }  /* v1.03: Mobile-only deduction page */
        .mobile-ctrl-btn { display: none; }
        #zoom-controls { display: none; }
        
        /* v1.02: Mobile tab strip and d-pad setting - Hidden on desktop */
        #mobile-tab-strip { display: none; }
        .mobile-only-setting { display: none; }
        
        /* Bottom section: log + d-pad (mobile) */
        #bottom-section {
            display: flex;
            width: 100%;
            gap: 10px;
            position: relative;
            background: #000;
        }
        
        /* v1.0: Resize handle - hidden on desktop */
        #bottom-resize-handle {
            display: none;
        }
        
        /* v1.0: Bottom content wrapper - transparent on desktop */
        #bottom-content {
            display: contents; /* On desktop, acts as if wrapper doesn't exist */
        }

        /* DEV HUD - OVERHAULED v0.67 */
        #dev-hud { 
            position: fixed; 
            top: 10px; 
            right: 10px; 
            background: rgba(5, 5, 5, 0.97); 
            border: 1px solid #333; 
            padding: 0;
            font-size: 10px; 
            z-index: 9999; 
            display: none; 
            flex-direction: column; 
            color: #888; 
            max-width: 340px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
            scrollbar-width: thin;
            scrollbar-color: #333 #111;
        }
        #dev-hud::-webkit-scrollbar { width: 6px; }
        #dev-hud::-webkit-scrollbar-track { background: #111; }
        #dev-hud::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        #dev-hud.collapsed { max-height: none; overflow: visible; padding: 0; background: transparent; border: none; box-shadow: none; }
        #dev-hud.collapsed .dev-content { display: none; }
        #dev-hud.collapsed #dev-header { padding: 0; background: transparent; border: none; }
        #dev-hud.collapsed #dev-header-title { display: none; }
        #dev-hud.collapsed #dev-toggle { 
            background: rgba(0,0,0,0.7); 
            border: 1px solid #440000; 
            padding: 6px 10px;
            font-size: 12px;
        }
        
        /* Header bar */
        #dev-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            background: linear-gradient(90deg, #1a0000 0%, #111 100%);
            border-bottom: 1px solid #440000;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        #dev-header-title {
            color: var(--blood);
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 11px;
        }
        #dev-toggle { 
            background: transparent; 
            border: 1px solid #440000; 
            color: var(--blood); 
            cursor: pointer; 
            padding: 3px 8px; 
            font-family: inherit; 
            font-size: 10px;
        }
        #dev-toggle:hover { background: var(--blood); color: #fff; }
        
        /* State Inspector - Always visible compact info */
        #dev-state-inspector {
            padding: 8px 10px;
            background: #0a0a0a;
            border-bottom: 1px solid #222;
            font-family: 'Cutive Mono', monospace;
            font-size: 9px;
            line-height: 1.5;
        }
        .dev-state-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .dev-state-label { color: #555; }
        .dev-state-value { color: #ffd700; }
        .dev-state-value.blood { color: var(--blood); }
        .dev-state-value.cyan { color: var(--quest-cyan); }
        .dev-state-value.green { color: #44ff44; }
        
        /* Section containers */
        .dev-section {
            border-bottom: 1px solid #222;
        }
        .dev-section:last-child { border-bottom: none; }
        .dev-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            background: #111;
            cursor: pointer;
            user-select: none;
        }
        .dev-section-header:hover { background: #1a1a1a; }
        .dev-section-title {
            font-size: 9px;
            letter-spacing: 1px;
            font-weight: bold;
        }
        .dev-section-title.gold { color: #ffd700; }
        .dev-section-title.cyan { color: var(--quest-cyan); }
        .dev-section-title.blood { color: var(--blood); }
        .dev-section-title.green { color: #44ff44; }
        .dev-section-title.purple { color: #9932CC; }
        .dev-section-title.white { color: #ccc; }
        .dev-section-title.orange { color: #ff6b35; }
        .dev-section-toggle { color: #555; font-size: 10px; }
        .dev-section-content {
            padding: 8px 10px;
            display: none;
        }
        .dev-section.open .dev-section-content { display: block; }
        .dev-section.open .dev-section-toggle::before { content: '−'; }
        .dev-section .dev-section-toggle::before { content: '+'; }
        
        /* Button rows */
        .dev-row { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 4px; 
            margin-bottom: 6px;
        }
        .dev-row:last-child { margin-bottom: 0; }
        
        /* Buttons */
        .dev-btn { 
            background: #1a1a1a; 
            border: 1px solid #333; 
            color: #888; 
            cursor: pointer; 
            padding: 4px 8px; 
            font-family: inherit; 
            font-size: 9px; 
            white-space: nowrap;
            transition: all 0.15s;
        }
        .dev-btn:hover { background: #333; color: #fff; border-color: #555; }
        .dev-btn:active { background: var(--blood); }
        .dev-btn.gold { color: #ffd700; border-color: #665500; }
        .dev-btn.gold:hover { background: #332200; border-color: #ffd700; }
        .dev-btn.cyan { color: var(--quest-cyan); border-color: #006688; }
        .dev-btn.cyan:hover { background: #002233; border-color: var(--quest-cyan); }
        .dev-btn.blood { color: var(--blood); border-color: #440000; }
        .dev-btn.blood:hover { background: #220000; border-color: var(--blood); }
        .dev-btn.green { color: #44ff44; border-color: #224422; }
        .dev-btn.green:hover { background: #112211; border-color: #44ff44; }
        .dev-btn.purple { color: #9932CC; border-color: #442266; }
        .dev-btn.purple:hover { background: #221133; border-color: #9932CC; }
        .dev-btn.active { background: #333; color: #fff; box-shadow: inset 0 0 5px rgba(255,255,255,0.2); }
        
        /* Dropdowns */
        .dev-select {
            background: #111;
            border: 1px solid #333;
            color: #aaa;
            padding: 4px 6px;
            font-family: inherit;
            font-size: 9px;
            cursor: pointer;
            min-width: 100px;
        }
        .dev-select:hover { border-color: #555; }
        .dev-select:focus { outline: none; border-color: var(--blood); }
        .dev-select option { background: #111; color: #aaa; }
        
        /* Trait Matrix Grid */
        #dev-trait-matrix {
            display: grid;
            grid-template-columns: 70px repeat(6, 1fr);
            gap: 1px;
            font-size: 8px;
            background: #222;
            border: 1px solid #333;
            margin-top: 6px;
        }
        .dev-trait-cell {
            padding: 3px 2px;
            text-align: center;
            background: #111;
        }
        .dev-trait-cell.header { 
            background: #1a1a1a; 
            color: #666; 
            font-weight: bold;
        }
        .dev-trait-cell.suspect-name { 
            text-align: left; 
            padding-left: 4px;
            color: #888;
        }
        .dev-trait-cell.known-yes { color: #44ff44; }
        .dev-trait-cell.known-no { color: #ff4444; }
        .dev-trait-cell.unknown { color: #333; }
        .dev-trait-cell.has-trait { background: #0a1a0a; }
        .dev-trait-cell.no-trait { background: #1a0a0a; }
        
        /* Compact info displays */
        .dev-info-box {
            background: #0a0a0a;
            border: 1px solid #222;
            padding: 6px;
            margin-top: 6px;
            font-size: 8px;
            color: #555;
        }
        .dev-info-box code {
            color: #ffd700;
            background: #1a1a0a;
            padding: 1px 3px;
        }
        
        /* Label for control groups */
        .dev-label {
            font-size: 8px;
            color: #555;
            margin-bottom: 3px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Mobile minimap overlay - hidden by default, shown on mobile */
        #mobile-minimap {
            display: none;
            position: absolute;
            bottom: 8px;
            left: 8px;
            width: 70px;
            height: 70px;
            z-index: 5;
            opacity: 0.85;
            background: rgba(0,0,0,0.7);
            border: 1px solid #444;
            padding: 3px;
        }
        
        #mobile-minimap-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 2px;
            width: 100%;
            height: 100%;
            position: relative;
            aspect-ratio: 1;
        }
        
        /* Mobile Pockets - bottom right of map */
        #mobile-pockets {
            display: none;
            position: absolute;
            bottom: 8px;
            right: 8px;
            z-index: 5;
            opacity: 0.9;
            background: rgba(10, 10, 10, 0.9);
            border: 1px solid #333;
            padding: 4px;
        }
        
        #mobile-pocket-grid {
            display: grid;
            grid-template-columns: repeat(3, 24px);
            grid-template-rows: repeat(2, 24px);
            gap: 2px;
        }
        
        /* Mobile pocket slots inherit from .pocket-slot */
        #mobile-pocket-grid .pocket-slot {
            font-size: 12px;
        }

        /* --- LARGE SCREEN SCALING --- DISABLED FOR NOW
        
        @media (min-width: 2000px) {
            #game-layout {
                transform: scale(1.15);
            }
            #contract-wrapper {
                transform: scale(1.3);
            }
        }

        @media (min-width: 3000px) {
            #game-layout {
                transform: scale(1.35);
            }
            #contract-wrapper {
                transform: scale(1.6);
            }
        }
        
        --- END DISABLED */
        
        /* ============================================================================
           v1.01 TUTORIAL SYSTEM - Spotlight with Progressive Disclosure
           ============================================================================ */
        
        /* Hidden state - element not yet revealed */
        .tutorial-hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            max-height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }
        
        /* Sidebar hidden for full-width map initially */
        #sidebar-column.tutorial-hidden {
            width: 0 !important;
            min-width: 0 !important;
            flex: 0 !important;
        }
        
        /* Dark overlay covering everything */
        #tutorial-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.92);
            z-index: 99990;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        
        #tutorial-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        /* Spotlighted element - punches through overlay (for journal tour popups) */
        .tutorial-spotlight {
            position: relative !important;
            z-index: 99995 !important;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 
                        0 0 12px rgba(255, 255, 255, 0.4),
                        0 0 25px rgba(255, 255, 255, 0.2) !important;
            animation: tutorialPulse 1.5s ease-in-out infinite;
        }
        
        /* v1.01: Parent containers need high z-index too */
        .tutorial-spotlight-parent {
            z-index: 99994 !important;
        }
        
        /* Ensure children of spotlighted elements can receive clicks */
        .tutorial-spotlight * {
            pointer-events: auto !important;
        }
        
        @keyframes tutorialPulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.4); }
            50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.5); }
        }
        
        /* v1.03: Log-based tutorial highlight - border with breathing room, pulsing glow */
        .tutorial-highlight {
            position: relative;
            outline: 2px solid rgba(255, 255, 255, 0.9);
            outline-offset: 5px;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
                    drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) !important;
            animation: tutorialHighlightPulse 1s ease-in-out infinite;
        }
        
        @keyframes tutorialHighlightPulse {
            0%, 100% { 
                outline-color: rgba(255, 255, 255, 0.9);
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
                        drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
            }
            50% { 
                outline-color: rgba(255, 255, 255, 1);
                filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1))
                        drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
            }
        }
        
        /* Fade out animation for highlight removal */
        .tutorial-highlight-fadeout {
            animation: tutorialHighlightFadeout 0.3s ease-out forwards !important;
        }
        
        @keyframes tutorialHighlightFadeout {
            0% { 
                outline: 2px solid rgba(255, 255, 255, 0.9);
                outline-offset: 5px;
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
                        drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
            }
            100% { 
                outline: 2px solid rgba(255, 255, 255, 0);
                outline-offset: 5px;
                filter: none; 
            }
        }
        
        /* Reveal animation - element growing into view */
        .tutorial-reveal {
            animation: tutorialGrow 0.5s ease-out forwards;
        }
        
        @keyframes tutorialGrow {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Tutorial popup - small, positioned near target */
        #tutorial-popup {
            position: fixed;
            background: var(--bone);
            border: 1px solid #888;
            padding: 5px 8px;
            font-family: 'Courier New', monospace;
            color: #0a0908;
            text-align: center;
            text-transform: uppercase;
            max-width: 180px;
            min-width: 140px;
            z-index: 99999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
        }
        
        #tutorial-popup.tutorial-popup-visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        /* Arrow pointer on popup */
        #tutorial-popup::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 8px solid transparent;
        }
        
        #tutorial-popup.arrow-left::before {
            left: -16px;
            top: 50%;
            transform: translateY(-50%);
            border-right-color: #888;
        }
        
        #tutorial-popup.arrow-right::before {
            right: -16px;
            top: 50%;
            transform: translateY(-50%);
            border-left-color: #888;
        }
        
        #tutorial-popup.arrow-up::before {
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            border-bottom-color: #888;
        }
        
        #tutorial-popup.arrow-down::before {
            bottom: -16px;
            left: 50%;
            transform: translateX(-50%);
            border-top-color: #888;
        }
        
        .tutorial-popup-text {
            font-size: 10px;
            line-height: 1.4;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }
        
        .tutorial-popup-text span {
            display: block;
            font-size: 9px;
            opacity: 0.5;
            margin-top: 3px;
        }
        
        .tutorial-popup-buttons {
            display: flex;
            justify-content: center;
        }
        
        .tutorial-dismiss-btn {
            background: #0a0908;
            border: 1px solid #0a0908;
            color: var(--bone);
            padding: 4px 12px;
            font-family: 'Courier New', monospace;
            font-size: 8px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tutorial-dismiss-btn:hover {
            background: #333;
            border-color: #333;
        }
        
        /* Stat items need wrapper for tutorial hiding */
        .stat-item[data-tutorial] {
            transition: all 0.4s ease;
        }
        
        /* ============================================================================
           v1.0 MOBILE LAYOUT (max-width: 700px)
           Restructured: LOG left, CONTROLS right (buttons row + d-pad below)
           ============================================================================ */
        @media (max-width: 700px) {
            /* --- BASE LAYOUT --- */
            #game-layout { 
                width: 100%; 
                height: 100vh; 
                height: 100dvh;
                border: none; 
                transform: none;
                display: flex;
                flex-direction: column;
                gap: 0;
                padding: 0 12px;
                box-sizing: border-box;
            }
            
            /* Show mobile elements */
            #mobile-minimap { display: block !important; }
            #mobile-pockets { display: block !important; }
            /* v1.02: mobile-controls-wrapper visibility now controlled by body.dpad-enabled class */
            #zoom-controls { display: none !important; }
            
            /* Hide desktop sidebar (minimap + pockets) */
            #sidebar-column { display: none !important; }
            #minimap-container { display: none !important; }
            #pocket-container { display: none !important; }
            
            /* v1.0: Hide dev tools completely on mobile */
            #dev-hud { display: none !important; }
            
            /* Map container takes full remaining space */
            #map-container {
                flex: 1 1 auto !important;
                width: 100% !important;
                min-height: 0;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                position: relative !important;  /* v1.02: For tab strip positioning */
                touch-action: manipulation !important;  /* v1.03: Allow tap/pan, custom pinch handling */
            }
            
            /* v1.0: Map wrapper needs explicit dimensions since children are absolutely positioned */
            #map-wrapper {
                position: relative !important;
                width: 350px !important;
                height: 220px !important;
            }
            
            #stage-container {
                flex: 1 !important;
                flex-direction: column !important;
                min-height: 0;
            }
            
            /* --- BOTTOM SECTION: resizable on mobile --- */
            #bottom-section {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 0;
                flex: 0 0 136px; /* mobile-design: default resize height */
                min-height: 100px;
                max-height: 50vh;
                position: relative;
                overflow: hidden;
            }
            
            /* v1.0: Resize handle - larger touch target */
            #bottom-resize-handle {
                display: flex !important;
                justify-content: center;
                align-items: center;
                height: 18px;
                background: linear-gradient(to bottom, #1a1815 0%, #0d0c0a 100%);
                border-top: 1px solid #444;
                cursor: ns-resize;
                touch-action: none;
                flex-shrink: 0;
                -webkit-tap-highlight-color: transparent;
                z-index: 100;
                position: relative;
            }
            
            .resize-grip {
                color: #666;
                font-size: 10px;
                letter-spacing: 1px;
                user-select: none;
                pointer-events: none;
                transform: rotate(90deg);
            }
            
            #bottom-resize-handle:active {
                background: linear-gradient(to bottom, #2a2520 0%, #1a1815 100%);
            }
            
            #bottom-resize-handle:active .resize-grip {
                color: #888;
            }
            
            /* Bottom content wrapper */
            #bottom-content {
                display: flex;
                flex-direction: row;
                flex: 1;
                min-height: 0;
                padding: 6px 8px;
                gap: 8px;
                overflow: hidden;
            }
            
            /* Log takes left side - LARGER text */
            #log-container {
                flex: 1;
                min-width: 0;
                max-height: none;
                height: 100%;
                overflow-y: scroll !important;
                font-size: 14px;
                padding-right: 4px;
                border-right: 1px solid #2a2520;
                scrollbar-width: thin;
                scrollbar-color: rgba(139, 0, 0, 0.8) rgba(40, 35, 30, 0.5);
                -webkit-overflow-scrolling: auto; /* Disable momentum to show scrollbar */
                display: flex;
                flex-direction: column;
                margin-left: 0;  /* v1.10: Reset desktop margin */
                width: auto;  /* v1.10: Reset desktop width */
            }
            
            #log-container::before {
                content: '';
                flex: 1 1 auto;
            }
            
            /* v1.0: Always show scrollbar - use background track for visibility */
            #log-container::-webkit-scrollbar {
                width: 10px;
                display: block !important;
                -webkit-appearance: none;
            }
            
            #log-container::-webkit-scrollbar-track {
                background: rgba(40, 35, 30, 0.6);
                border-radius: 5px;
                border: 1px solid #333;
            }
            
            #log-container::-webkit-scrollbar-thumb {
                background: rgba(139, 0, 0, 0.8);
                border-radius: 5px;
                min-height: 50px;
                border: 1px solid #500;
            }
            
            #log-container::-webkit-scrollbar-thumb:hover {
                background: rgba(180, 0, 0, 0.9);
            }
            
            /* Visible track even without thumb */
            #log-container::-webkit-scrollbar-track-piece {
                background: rgba(30, 25, 20, 0.8);
            }
            
            /* Log entry styling */
            #log-container .log-entry {
                margin-bottom: 6px;
                line-height: 1.35;
            }
            
            /* --- v1.02: MOBILE CONTROLS OVERHAUL --- */
            /* Hide old button grid entirely */
            #mobile-controls-top,
            #mobile-btn-row {
                display: none !important;
            }
            
            /* Mobile controls wrapper - only contains d-pad now */
            #mobile-controls-wrapper {
                display: none !important;  /* Hidden by default - shown when d-pad enabled */
                flex-direction: column;
                align-items: center;
                gap: 4px;
                flex-shrink: 0;
            }
            
            /* Show d-pad wrapper only when enabled */
            body.dpad-enabled #mobile-controls-wrapper {
                display: flex !important;
            }
            
            /* Full width log when d-pad is off */
            #bottom-content {
                flex-direction: row;
            }
            
            body:not(.dpad-enabled) #bottom-content {
                flex-direction: column;
            }
            
            body:not(.dpad-enabled) #log-container {
                width: 100% !important;
                flex: 1 !important;
                border-right: none !important;
                margin-left: 0 !important;  /* v1.10: Reset desktop margin */
            }
            
            /* --- MOBILE TAB STRIP (top-right corner of map) --- */
            #mobile-tab-strip {
                display: flex !important;
                flex-direction: column;
                position: absolute;
                right: 0;
                top: 8px;
                z-index: 50;
                gap: 2px;
            }
            
            .mobile-tab {
                width: 36px;
                height: 44px;
                background: rgba(0, 0, 0, 0.85);
                border: 1px solid #3a3530;
                border-right: none;
                border-radius: 4px 0 0 4px;
                color: var(--bone);
                font-size: 18px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.15s, border-color 0.15s;
            }
            
            .mobile-tab:active {
                background: rgba(30, 25, 20, 0.95);
                border-color: #5a5550;
            }
            
            /* v1.03: Inverted colors for journal, guide, faith tabs */
            #mobile-tab-journal,
            #mobile-tab-guide,
            #mobile-tab-faith {
                background: var(--bone);
                color: #0a0a0a;
                border-color: #8a8580;
            }
            
            #mobile-tab-journal:active,
            #mobile-tab-guide:active,
            #mobile-tab-faith:active {
                background: #d0ccc5;
                border-color: #6a6560;
            }
            
            /* Inverted glow for mobile journal tab */
            @keyframes darkPulse {
                0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bone); }
                50% { box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); background: #ffffff; }
                100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bone); }
            }
            
            #mobile-tab-journal.glowing {
                animation: darkPulse 2s infinite ease-in-out, subtle-vibrate 0.08s linear infinite;
            }
            
            /* Hide desktop-positioned buttons on mobile */
            #journal-btn:not(.mobile-ctrl-btn),
            #guide-btn:not(.mobile-ctrl-btn),
            #faith-btn:not(.mobile-ctrl-btn),
            #settings-btn:not(.mobile-ctrl-btn) {
                display: none !important;
            }
            
            /* Hide separate zoom-controls div */
            #zoom-controls {
                display: none !important;
            }
            
            /* --- D-PAD (when enabled) --- */
            #d-pad {
                display: flex !important;
                flex-direction: column;
                align-items: center;
                gap: 0px;
                margin: 0;
                margin-top: 8px;
            }
            
            .d-row {
                gap: 0px;
            }
            
            /* v1.0: ASCII-style d-pad buttons - big touch targets */
            .btn-ctrl {
                width: 50px;
                height: 38px;
                font-size: 0;  /* Hide original arrow text */
                font-family: 'Cutive Mono', monospace;
                background: transparent !important;
                border: none !important;
                color: #8a8575;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            
            .btn-ctrl:active {
                color: var(--bone);
            }
            
            /* v1.0: ASCII bracket arrows - BIGGER to fill button */
            .btn-ctrl::after {
                font-size: 28px;
                letter-spacing: -3px;
                color: inherit;
            }
            .btn-ctrl[data-dx="-1"]::after { content: '[<]'; }
            .btn-ctrl[data-dx="1"]::after { content: '[>]'; }
            .btn-ctrl[data-dy="-1"]::after { content: '[^]'; }
            .btn-ctrl[data-dy="1"]::after { content: '[v]'; }
            
            /* --- D-PAD HOLD VISUAL FEEDBACK --- */
            .btn-ctrl::before {
                content: '';
                position: absolute;
                inset: 0;
                border: none;
                pointer-events: none;
            }
            
            /* Charging state - text turns red */
            .btn-ctrl.hold-charging {
                color: var(--blood) !important;
            }
            
            /* Active hold state - pulsing */
            .btn-ctrl.hold-active {
                color: var(--blood) !important;
                animation: dpad-pulse 400ms ease-in-out infinite;
                text-shadow: 0 0 8px var(--blood);
            }
            
            @keyframes dpad-pulse {
                0%, 100% { text-shadow: 0 0 4px var(--blood); }
                50% { text-shadow: 0 0 12px var(--blood), 0 0 20px var(--blood); }
            }
            
            /* --- STATS BAR MOBILE ENHANCEMENTS --- */
            #stats-bar {
                font-size: 14px;
                padding: 10px 16px;
                gap: 10px;
                margin: 0 4px;
            }
            
            .stat-box {
                min-width: 60px;
            }
            
            .stat-label {
                font-size: 9px;
                letter-spacing: 2px;
            }
            
            .stat-value {
                font-size: 18px;
                letter-spacing: 2px;
            }
            
            /* --- Z-INDEX FIXES FOR MOBILE OVERLAYS --- */
            /* Lower vignette z-index so minimap/pockets show above */
            #map-vignette-overlay {
                z-index: 3 !important;
            }
            
            /* --- HUD ADJUSTMENTS --- */
            #hud-section {
                padding: 8px 8px;
                gap: 8px;
                flex: 0 0 auto; /* Don't grow or shrink */
                border-bottom: none; /* v1.0: Remove red stripe on mobile */
            }
            
            /* Stats bar fixed */
            #stats-bar {
                flex: 0 0 auto;
            }
            
            #hud-top-row {
                padding: 0;
            }
            
            /* v1.0: Stats row full width */
            #stats-row {
                padding: 0 44px 0 0;
                width: 100%;
            }
            
            /* v1.0: Larger day/time and room label text */
            #time-display {
                font-size: 16px !important;
            }
            
            #room-label {
                font-size: 14px !important;
            }
            
            /* Portraits - BIGGER */
            .npc-portrait-image {
                height: 64px;
            }
            
            .npc-portrait-name {
                font-size: 11px;
            }
            
            /* Clock/candelabra - BIGGER */
            #top-clock canvas {
                width: 58px;
                height: 58px;
            }
            
            #candelabra-canvas {
                width: 58px;
                height: 64px;
            }
            
            #journal-icon-canvas {
                width: 50px;
                height: 63px;
            }
            
            #guide-icon-canvas {
                width: 50px;
                height: 63px;
            }
            
            #pamphlet-icon-canvas {
                width: 50px;
                height: 63px;
            }
            
            #top-clock-label,
            #candelabra-label {
                display: none !important;
            }
            
            /* v1.0: Map location overlays - STACKED IN BOTTOM LEFT */
            #map-day-time,
            #map-location {
                font-size: 13px;
                top: auto;
                right: auto;
                left: 8px;
            }
            
            /* Room name above day/time, both at bottom - reduced gap */
            #map-location { 
                bottom: 28px;
            }
            #map-day-time { 
                bottom: 10px;
            }
            
            /* --- MINIMAP & POCKETS POSITIONING --- */
            /* v1.0: Minimap moved to TOP left (swapped with day/time) */
            #mobile-minimap {
                top: 8px;
                bottom: auto;
                left: 8px;
                width: 70px;
                height: 70px;
                padding: 6px;
                z-index: 15 !important;
                border: 1px solid #333 !important;
                background: rgba(10, 10, 10, 0.95) !important;
            }
            
            /* v1.0: Minimap grid - 5x5 zoomed view with corridors */
            #mobile-minimap-grid {
                display: grid !important;
                grid-template-columns: repeat(5, 1fr) !important;
                grid-template-rows: repeat(5, 1fr) !important;
                gap: 1px !important;
                width: 100% !important;
                height: 100% !important;
                aspect-ratio: 1 !important;
                position: relative !important;
            }
            
            /* Corridors overlay for mobile minimap */
            #mobile-minimap-corridors {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }
            
            #mobile-minimap-corridors .minimap-corridor {
                stroke: #444;
                stroke-width: 1.5;
                stroke-linecap: round;
            }
            
            #mobile-minimap-corridors .minimap-corridor.discovered {
                stroke: #555;
            }
            
            /* Minimap cells inherit desktop styling */
            #mobile-minimap-grid .minimap-cell {
                font-size: 6px;
            }
            
            #mobile-pockets {
                bottom: 10px;
                right: 8px;
                padding: 5px;
                z-index: 15 !important;
                border: 1px solid #333 !important;
                background: rgba(10, 10, 10, 0.95) !important;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
            }
            
            #mobile-pocket-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 26px) !important;
                grid-template-rows: repeat(2, 26px) !important;
                gap: 2px !important;
                padding: 2px;
                border: 1px solid #222;
            }
            
            /* Mobile pocket slots - inherit desktop styling */
            #mobile-pocket-grid .pocket-slot {
                font-size: 14px;
                width: 100%;
                height: 100%;
            }
            
            #mobile-pocket-grid .pocket-slot.occupied {
                background: #1a0a2a;
                border-color: #9932CC;
            }
            
            #mobile-pocket-grid .pocket-slot.evidence {
                background: #051520;
                border-color: var(--quest-cyan);
            }
            
            #mobile-pocket-grid .pocket-slot.locked {
                background: #050505;
                border-color: #151515;
                cursor: not-allowed;
                opacity: 0.4;
            }
            
            /* --- SETTINGS OVERLAY & PANEL MOBILE --- */
            #settings-overlay {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                background: rgba(0, 0, 0, 0.95) !important;
                display: none;
                justify-content: center !important;
                align-items: center !important;
                z-index: 999999 !important;
                pointer-events: auto !important;
            }
            
            #settings-overlay.open {
                display: flex !important;
            }
            
            #settings-panel {
                background: #0a0a08 !important;
                border: 1px solid #3a3530 !important;
                width: 85vw !important;
                max-width: 300px !important;
                max-height: 75vh !important;
                overflow-y: auto !important;
                padding: 0 !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
                display: block !important;
                pointer-events: auto !important;
                z-index: 1000000 !important;
            }
            
            #settings-panel .settings-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px 10px;
                border-bottom: 1px solid #2a2520;
                background: #0f0e0c;
                font-size: 11px;
                letter-spacing: 2px;
                margin-bottom: 0;
            }
            
            #settings-panel .settings-row {
                padding: 10px 14px;
                font-size: 12px;
                border-bottom: 1px solid #1a1815;
            }
            
            #settings-panel .settings-label {
                font-size: 12px;
            }
            
            #settings-panel .settings-toggle {
                font-size: 12px;
                padding: 6px 12px;
                min-width: 50px;
            }
            
            #settings-panel .settings-inc,
            #settings-panel .settings-dec {
                font-size: 14px;
                padding: 6px 10px;
            }
            
            #settings-panel .settings-value {
                font-size: 12px;
                min-width: 45px;
            }
            
            #settings-panel .settings-action {
                font-size: 12px;
                padding: 6px 12px;
            }
            
            #settings-panel .settings-divider {
                margin: 0;
            }
            
            /* v1.02: Show mobile-only settings on mobile */
            .mobile-only-setting {
                display: flex !important;
            }
            
            /* Close button for settings modal */
            .settings-close {
                color: #666;
                cursor: pointer;
                font-size: 14px;
            }
            .settings-close:hover { color: #aaa; }
            
            /* --- v1.0: MINIGAME MOBILE TOUCH ENHANCEMENTS --- */
            #minigame-overlay {
                touch-action: none;
            }
            
            #minigame-canvas {
                touch-action: none;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
            }
            
            /* Hide cursor on touch devices */
            #minigame-cursor {
                display: none !important;
            }
            
            /* Larger touch targets for pick items */
            .mg-pick-item {
                min-width: 44px;
                min-height: 44px;
            }
            
            /* Larger touch targets for lockbox latches */
            .mg-latch {
                min-width: 44px;
                min-height: 44px;
            }
            
            /* Minigame hint text sizing */
            .mg-drain-hint {
                font-size: 14px !important;
            }
            
            /* --- v1.0: JOURNAL MOBILE PAGINATION --- */
            #journal-modal {
                width: 95vw;
                max-width: 380px;
                height: 80vh;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            
            /* v1.0: Ensure spread container fills available space */
            #journal-modal #journal-spread,
            #journal-modal #journal-spread-2,
            #journal-modal #journal-spread-3 {
                flex: 1 1 0;
                min-height: 0;
                height: 100%;
            }
            
            /* Hide nav by default */
            #journal-mobile-nav {
                display: none;
            }
            
            /* v1.0: Mobile journal - spreads are containers for pages */
            .mobile-journal-mode #journal-spread,
            .mobile-journal-mode #journal-spread-2,
            .mobile-journal-mode #journal-spread-3 {
                flex: 1 1 0 !important;
                min-height: 0 !important;
                overflow: hidden !important;
                position: relative !important;
                display: block !important;
            }
            
            /* v1.0: Only show active spread - very specific */
            .mobile-journal-mode #journal-spread.journal-spread-hidden,
            .mobile-journal-mode #journal-spread-2.journal-spread-hidden,
            .mobile-journal-mode #journal-spread-3.journal-spread-hidden {
                display: none !important;
            }
            
            .mobile-journal-mode #journal-spread.journal-spread-active,
            .mobile-journal-mode #journal-spread-2.journal-spread-active,
            .mobile-journal-mode #journal-spread-3.journal-spread-active {
                display: block !important;
            }
            
            /* v1.0: All pages hidden and fill container with fixed positioning */
            .mobile-journal-mode #journal-content,
            .mobile-journal-mode #journal-traits,
            .mobile-journal-mode #journal-deduction,
            .mobile-journal-mode #journal-evidence,
            .mobile-journal-mode #journal-schedules,
            .mobile-journal-mode #journal-ledger,
            .mobile-journal-mode #journal-ledger-notes {
                display: none !important;
                position: fixed !important;
                left: 2.5vw !important;
                right: 2.5vw !important;
                top: calc(10vh + 40px) !important;
                bottom: calc(10vh + 55px) !important;
                max-width: 380px !important;
                margin-left: auto !important;
                margin-right: auto !important;
                padding: 10px 12px !important;
                box-sizing: border-box !important;
                overflow-y: auto !important;
                background: #0a0a08 !important;
                z-index: 2601 !important;
            }
            
            /* v1.0: Active pages show and fill from top */
            .mobile-journal-mode #journal-content.mobile-page-active {
                display: block !important;
            }
            
            .mobile-journal-mode #journal-traits.mobile-page-active {
                display: flex !important;
                flex-direction: column !important;
                overflow-y: auto !important;
            }
            
            .mobile-journal-mode #journal-deduction.mobile-page-active {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            .mobile-journal-mode #journal-evidence.mobile-page-active {
                display: block !important;
            }
            
            .mobile-journal-mode #journal-schedules.mobile-page-active {
                display: block !important;
            }
            
            .mobile-journal-mode #journal-ledger.mobile-page-active {
                display: block !important;
            }
            
            .mobile-journal-mode #journal-ledger-notes.mobile-page-active {
                display: block !important;
            }
            
            /* Hide desktop prev/next buttons on mobile */
            .mobile-journal-mode .journal-page-btn {
                display: none !important;
            }
            
            /* Mobile journal text sizing */
            /* Mobile journal text sizing - v1.03: Smaller for notes page */
            .mobile-journal-mode #journal-content {
                font-size: 12px;
                line-height: 1.4;
            }
            
            .mobile-journal-mode .traits-table {
                font-size: 11px;
                flex: 1;
            }
            
            .mobile-journal-mode .traits-header {
                font-size: 18px;
                margin-bottom: 10px;
                text-align: left;
            }
            
            /* v1.0: iPhone 13 optimized text sizing for all journal pages */
            .mobile-journal-mode #journal-evidence {
                font-size: 15px;
                line-height: 1.5;
            }
            
            .mobile-journal-mode #journal-schedules {
                font-size: 14px;
                line-height: 1.4;
            }
            
            .mobile-journal-mode .schedule-table {
                font-size: 11px;
            }
            
            .mobile-journal-mode .schedule-table th {
                font-size: 10px;
                padding: 6px 4px;
            }
            
            .mobile-journal-mode .schedule-table td {
                padding: 5px 4px;
                font-size: 11px;
            }
            
            .mobile-journal-mode #journal-ledger,
            .mobile-journal-mode #journal-ledger-notes {
                font-size: 15px;
                line-height: 1.5;
            }
            
            .mobile-journal-mode .evidence-header,
            .mobile-journal-mode .ledger-header {
                font-size: 11px;
                padding: 8px 12px;
            }
            
            .mobile-journal-mode .evidence-grid {
                padding: 10px;
                gap: 8px;
            }
            
            .mobile-journal-mode .evidence-item {
                font-size: 10px;
            }
            
            /* v1.0: Mobile journal navigation bar (faith-style) */
            .mobile-journal-mode #journal-mobile-nav {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;
                background: #0a0a08;
                border-top: 1px solid #2a2520;
                flex-shrink: 0;
            }
            
            .journal-mobile-prev,
            .journal-mobile-next {
                background: transparent;
                border: 1px solid #3a3530;
                color: #6a6050;
                padding: 6px 14px;
                font-family: inherit;
                font-size: 11px;
                cursor: pointer;
                letter-spacing: 1px;
            }
            
            .journal-mobile-prev:hover:not(:disabled),
            .journal-mobile-next:hover:not(:disabled) {
                border-color: #5a5550;
                color: #9a9080;
            }
            
            .journal-mobile-prev:disabled,
            .journal-mobile-next:disabled {
                opacity: 0.3;
                cursor: default;
            }
            
            #journal-mobile-pagenum {
                color: #4a4540;
                font-size: 10px;
                letter-spacing: 1px;
            }
            
            #journal-header {
                padding: 10px 12px 6px;
                border-bottom: 1px solid #2a2520;
                margin-bottom: 0;
            }
            
            .journal-title {
                font-size: 14px;
                letter-spacing: 3px;
                line-height: 1;
            }
            
            .journal-close {
                font-size: 18px;
                padding: 2px 6px;
                line-height: 1;
            }
            
            /* v1.0: Journal tip matches modal width */
            #journal-tip {
                display: none !important;  /* v1.03: Hide on mobile */
            }
            
            /* v1.03: Contract padding on mobile */
            #start-screen.overlay {
                overflow: hidden !important;
                padding: 20px !important;
                box-sizing: border-box !important;
            }
            
            #contract-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .work-contract {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 18px !important;
                overflow: hidden !important;
                aspect-ratio: auto !important;
                height: auto !important;
                max-height: 75vh !important;
            }
            
            .contract-header {
                font-size: 7px !important;
                word-wrap: break-word !important;
                overflow-wrap: anywhere !important;
            }
            
            .contract-body {
                font-size: 10px !important;
                overflow-wrap: anywhere !important;
            }
            
            .contract-title {
                font-size: 14px !important;
            }
            
            .contract-signature {
                flex-wrap: wrap !important;
            }
            
            .signature-line {
                min-width: 55% !important;
                flex: 1 1 55% !important;
                height: 50px !important;
            }
            
            #signature-canvas {
                height: 50px !important;
            }
            
            .sign-btn {
                font-size: 12px !important;
                padding: 8px 14px !important;
            }
            
            /* v1.03: Notes text same size as observation names (15px) */
            #journal-ledger-notes {
                font-size: 15px !important;
            }
            
            .ledger-observation {
                font-size: 15px !important;
                padding: 8px !important;
                margin-bottom: 8px !important;
            }
            
            .ledger-notes-header {
                font-size: 18px !important;
                margin-bottom: 10px !important;
                text-align: left !important;
            }
            
            /* v1.03: Hide deduction from traits page on mobile (shown on separate page) */
            .mobile-journal-mode #journal-traits .deduction-tool {
                display: none !important;
            }
            
            /* v1.0: Larger headers and close buttons for all modals */
            #guide-header {
                padding: 10px 12px 6px;
            }
            
            .guide-title {
                font-size: 14px;
                letter-spacing: 3px;
                line-height: 1;
            }
            
            .guide-close {
                font-size: 18px;
                padding: 2px 6px;
                line-height: 1;
            }
            
            .fullmap-header {
                padding: 10px 12px 6px;
            }
            
            .fullmap-title {
                font-size: 14px;
                letter-spacing: 3px;
                line-height: 1;
            }
            
            .fullmap-close {
                font-size: 18px;
                padding: 2px 6px;
                line-height: 1;
            }
            
            #faith-header {
                padding: 10px 12px 6px;
            }
            
            #faith-header h2 {
                font-size: 14px;
                letter-spacing: 3px;
                margin: 0;
                line-height: 1;
            }
            
            #faith-close {
                font-size: 18px;
                padding: 2px 6px;
                line-height: 1;
            }
            
            /* Hide PIN button on mobile */
            #journal-pin-btn {
                display: none;
            }
            
            /* Deduction tool mobile - DOUBLED sizes */
            .deduction-tool {
                padding: 12px !important;
            }
            
            .deduction-header {
                font-size: 18px !important;
                margin-bottom: 10px !important;
            }
            
            .deduction-row {
                padding: 8px 0 !important;
            }
            
            .deduction-label {
                font-size: 14px !important;
            }
            
            .deduction-value {
                font-size: 16px !important;
                min-width: 100px !important;
            }
            
            .deduction-arrow {
                font-size: 20px !important;
                padding: 6px 12px !important;
            }
            
            /* Journal content areas - DOUBLED font size for mobile */
            #journal-content,
            #journal-evidence,
            #journal-ledger {
                font-size: 18px !important;
                padding: 12px 14px !important;
                line-height: 1.5 !important;
            }
            
            #journal-schedules {
                font-size: 16px !important;
                padding: 12px 14px !important;
                line-height: 1.4 !important;
            }
            
            #journal-traits {
                font-size: 16px !important;
            }
            
            /* Trait table - DOUBLED sizes */
            .traits-header {
                font-size: 24px !important;
                margin-bottom: 16px !important;
            }
            
            .traits-table {
                font-size: 14px !important;
            }
            
            .traits-table th {
                font-size: 9px !important;
                padding: 10px 2px !important;
            }
            
            .traits-table td {
                font-size: 14px !important;
                padding: 8px 2px !important;
                height: 28px !important;
            }
            
            /* Name column smaller */
            .traits-table td:first-child,
            .traits-table td.name-cell {
                font-size: 10px !important;
            }
            
            .traits-table tr {
                height: 28px !important;
            }
            
            #journal-ledger-notes {
                font-size: 16px !important;
                line-height: 1.5 !important;
            }
            
            /* Observations header */
            .observations-header,
            .schedules-header {
                font-size: 18px !important;
                text-align: left !important;
                width: 100% !important;
            }
            
            /* v1.0: Splash screen responsive for mobile */
            #splash-screen {
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }
            
            /* v1.03: Stack splash vertically on mobile */
            .splash-wrapper {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 20px 16px !important;
                box-sizing: border-box !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 100vh !important;
                min-height: 100vh !important;
                gap: 0 !important;
                transform: none !important;  /* v1.03: Reset desktop offset */
            }
            
            /* Orb at top */
            .orb-container {
                order: 1 !important;
                width: 100% !important;
                height: auto !important;
                padding-bottom: 0.5rem !important;
                transform: none !important;  /* v1.03: Reset desktop offset */
            }
            
            #ascii-orb {
                font-size: 5px !important;
                line-height: 4px !important;
                letter-spacing: 0.25px !important;
                transform: none !important;
            }
            
            /* v1.12: Hide monologue on mobile (too cramped) */
            .orb-monologue {
                display: none !important;
            }
            
            /* v1.12: Hide test buttons on mobile */
            #orb-phase-test {
                display: none !important;
            }
            
            /* Hide spine on mobile */
            .spine-col {
                display: none !important;
            }
            
            /* Title centered */
            .splash-left-col {
                order: 2 !important;
                padding-top: 0.5rem !important;
                margin-bottom: 3rem !important;
                text-align: center !important;
                align-items: center !important;
                width: 100% !important;
            }
            
            .splash-left-col h1 {
                font-size: 1.6rem !important;
                line-height: 1.0 !important;
                letter-spacing: 4px !important;
            }
            
            .splash-logo {
                max-width: 340px !important;
            }
            
            .splash-left-col h2 {
                font-size: 0.9rem !important;
                letter-spacing: 0.15em !important;
            }
            
            .version-link {
                font-size: 0.6rem !important;
                margin-top: 0.5rem !important;
            }
            
            .feedback-link {
                font-size: 0.6rem !important;
            }
            
            /* Menu below title */
            .splash-right-col {
                order: 3 !important;
                width: 100% !important;
                max-width: 100% !important;
                padding-top: 0 !important;
                padding-right: 0 !important;
                text-align: center !important;
                align-items: center !important;
            }
            
            .splash-nav {
                width: 100% !important;
            }
            
            .splash-nav ul {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                margin-bottom: 1.5rem !important;
            }
            
            .splash-nav li {
                font-size: 1rem !important;
                margin-bottom: 0.6rem !important;
            }
            
            /* v1.0: ENTER largest */
            .splash-nav li[data-menu="start"] {
                font-size: 1.1rem !important;
                margin-bottom: 0.4rem !important;
            }
            
            .splash-nav li[data-menu="quickstart"] {
                font-size: 1.1rem !important;
            }
            
            .splash-nav li.setting-toggle {
                font-size: 0.7rem !important;
            }
            
            /* v1.08: Smaller progress row on mobile */
            .splash-nav li.splash-export-row {
                font-size: 0.7rem !important;
            }
            
            /* Lore block */
            .splash-right-col p,
            .lore-block {
                font-size: 0.75rem !important;
                line-height: 1.3 !important;
                text-align: center !important;
                max-width: 90% !important;
                margin: 0 auto !important;
                padding: 8px !important;
            }
            
            #ascii-spine {
                display: none !important;
            }
            
            /* v1.0: Brighter return to menu button on mobile */
            .skip-dialogue-btn {
                color: #aaa !important;
            }
            
            /* Hide splash bg parallax on small screens (performance) */
            #splash-bg-layer {
                transform: none !important;
            }
            
            /* v1.03: Mobile transition tip - much wider */
            #transition-tip {
                bottom: 8% !important;
                max-width: 95% !important;
                width: 95% !important;
                padding: 12px 16px !important;
                font-size: 0.85rem !important;
                line-height: 1.5 !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
            }
            
            .ring-container {
                width: 240px !important;
                height: 240px !important;
            }
            
            /* v1.0: Mobile ending screen adjustments */
            #ending-container {
                padding: 20px 15px;
                max-width: 100%;
            }
            #ending-title {
                font-size: 24px;
                letter-spacing: 4px;
                margin-bottom: 25px;
            }
            #ending-text {
                font-size: 14px;
                line-height: 1.8;
                margin-bottom: 25px;
            }
            #ending-epitaph {
                font-size: 12px;
                margin-bottom: 30px;
            }
            #ending-stats {
                font-size: 10px;
                margin-bottom: 20px;
            }
            #ending-restart {
                padding: 12px 30px;
                font-size: 11px;
            }
            #hint-choice {
                padding: 15px;
                margin-top: 15px;
            }
            .hint-buttons {
                flex-direction: column;
                gap: 10px;
            }
            .hint-btn {
                padding: 10px 20px;
                width: 100%;
            }
            
            /* v1.0: Mobile upgrade screen - stack cards vertically */
            #upgrade-screen {
                padding: 15px 10px;
                overflow-y: auto;
            }
            .upgrade-header {
                margin-bottom: 20px;
            }
            .secrets-count {
                font-size: 48px;
            }
            .secrets-label {
                font-size: 12px;
                letter-spacing: 2px;
            }
            .upgrade-flavor {
                font-size: 11px;
            }
            .card-container {
                flex-direction: column;
                gap: 15px;
                max-width: 100%;
                margin: 15px 0;
            }
            .card {
                width: 85%;
                max-width: 420px;
                min-height: 200px;
                padding: 15px 12px;
            }
            .card h3 {
                font-size: 12px;
            }
            .card .desc {
                font-size: 12px;
                min-height: 40px;
            }
            .card .bonus {
                font-size: 9px;
            }
            .card .cost {
                font-size: 11px;
            }
            .upgrade-controls {
                margin-top: 15px;
            }
            .pocket-upgrade-btn {
                padding: 12px 20px;
            }
            
            /* v1.01: Mobile tutorial popup */
            #tutorial-popup {
                max-width: 150px;
                min-width: 110px;
                padding: 4px 6px;
            }
            
            .tutorial-popup-text {
                font-size: 9px;
                line-height: 1.3;
                margin-bottom: 6px;
            }
            
            .tutorial-popup-text span {
                font-size: 8px;
            }
            
            .tutorial-dismiss-btn {
                padding: 3px 8px;
                font-size: 8px;
            }
            
            /* Spotlight needs higher z-index on mobile */
            .tutorial-spotlight {
                z-index: 99995 !important;
            }
            
            /* v1.03: Mobile highlight */
            .tutorial-highlight {
                outline: 2px solid rgba(255, 255, 255, 0.9);
                outline-offset: 5px;
                filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
                        drop-shadow(0 0 25px rgba(255, 255, 255, 0.6)) !important;
            }
        }

        /* ============================================================================
           MOBILE-DESIGN BRANCH — layout fixes for mobile viewport
           Overrides body.full-mode-body rules which would otherwise force fixed
           widths/absolute positioning unsuitable for phone screens.
           ============================================================================ */
        @media (max-width: 700px) {
            /* Minimap — 25% smaller, pinned top-left of map-container,
               just under the HUM stat. */
            body #mobile-minimap,
            body.full-mode-body #mobile-minimap {
                display: block !important;
                position: absolute !important;
                top: 8px !important;
                left: 8px !important;
                right: auto !important;
                bottom: auto !important;
                width: 104px !important;
                height: 104px !important;
                padding: 6px !important;
                z-index: 20 !important;
                border: 1px solid #333 !important;
                background: rgba(10, 10, 10, 0.95) !important;
                box-sizing: border-box !important;
            }

            /* Hide the top-right mobile tab strip (journal/guide/faith/settings) */
            body #mobile-tab-strip,
            body.full-mode-body #mobile-tab-strip {
                display: none !important;
            }

            /* Extra edge padding */
            #game-layout {
                padding: 0 14px !important;
            }

            /* Constrain HUD to viewport (beats full-mode-body absolute positioning) */
            body.full-mode-body #hud-section,
            #hud-section {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Promote hud-top-row's children to be direct flex items of
               #hud-section so we can reorder portraits below stats-row. */
            #hud-top-row {
                display: contents !important;
            }

            #clock-row {
                order: 0;
                width: 100%;
                box-sizing: border-box;
                align-items: center;
            }

            /* Clock-row item vertical alignment — candelabra and clock have
               top:-8px on desktop which misaligns them on mobile. */
            #candelabra-container {
                top: -4px !important;
            }
            #top-clock {
                top: 0 !important;
            }

            #stats-row {
                order: 1;
                width: 100% !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                flex-wrap: wrap;
                gap: 8px 12px;
            }

            #npc-portraits {
                order: 2;
                position: static;   /* desktop pins portraits top-right; mobile stays in-flow */
                top: auto;
                right: auto;
                bottom: auto;
                z-index: auto;
                width: 100%;
                justify-content: flex-end;
                flex-direction: row-reverse;
                flex-wrap: wrap;
                margin-top: 6px;
                gap: 4px;
                box-sizing: border-box;
            }

            /* Hide portrait name labels on mobile */
            .npc-portrait-name {
                display: none !important;
            }

            /* Resize-handle — hidden entirely on mobile (no bar, no border,
               no grip), revealed by long-press via `.grip-visible`. Height is
               fixed so text doesn't shift when the handle appears. */
            #bottom-resize-handle {
                height: 18px !important;
                background: transparent !important;
                border-top: none !important;
                transition: background 0.2s ease, border-color 0.2s ease;
            }
            #bottom-resize-handle .resize-grip {
                opacity: 0;
                transition: opacity 0.2s ease;
            }
            #bottom-resize-handle.grip-visible {
                background: linear-gradient(to bottom, #1a1815 0%, #0d0c0a 100%) !important;
                border-top: 1px solid #444 !important;
            }
            #bottom-resize-handle.grip-visible .resize-grip {
                opacity: 1;
            }

            /* Softer vignette on mobile (desktop uses 60px 30px) */
            body.full-mode-body #map-container {
                box-shadow: inset 0 0 40px 12px #080808 !important;
            }

            /* Journal — mobile layout modelled on the Faith Pamphlet
               (compact header / single-page content / nav bar), but using
               the DESKTOP journal light-mode palette (parchment + dark ink)
               for colour consistency. */
            #journal-modal.mobile-journal-mode,
            #journal-modal.light-mode.mobile-journal-mode {
                background: #f5f1e8 !important;
                border: 1px solid #c8c0b0 !important;
                box-shadow: 0 4px 30px rgba(0,0,0,0.8) !important;
            }

            .mobile-journal-mode #journal-header {
                padding: 10px 12px 6px !important;
                background: #e8e2d6 !important;
                border-bottom: 1px solid #c8c0b0 !important;
            }

            .mobile-journal-mode .journal-title,
            .mobile-journal-mode #journal-header .journal-title {
                color: #5a5040 !important;
                font-size: 14px !important;
                letter-spacing: 3px !important;
                margin: 0 !important;
                line-height: 1 !important;
            }

            .mobile-journal-mode .journal-close,
            .mobile-journal-mode #journal-header .journal-close {
                color: #6a6050 !important;
                font-size: 18px !important;
                padding: 2px 6px !important;
                line-height: 1 !important;
            }

            /* Flow content inside the modal instead of fixed-positioned to
               viewport (which overflowed the modal on narrow screens) */
            #journal-modal.mobile-journal-mode #journal-content,
            #journal-modal.mobile-journal-mode #journal-traits,
            #journal-modal.mobile-journal-mode #journal-deduction,
            #journal-modal.mobile-journal-mode #journal-evidence,
            #journal-modal.mobile-journal-mode #journal-schedules,
            #journal-modal.mobile-journal-mode #journal-ledger,
            #journal-modal.mobile-journal-mode #journal-ledger-notes,
            #journal-modal.light-mode.mobile-journal-mode #journal-content,
            #journal-modal.light-mode.mobile-journal-mode #journal-traits,
            #journal-modal.light-mode.mobile-journal-mode #journal-deduction,
            #journal-modal.light-mode.mobile-journal-mode #journal-evidence,
            #journal-modal.light-mode.mobile-journal-mode #journal-schedules,
            #journal-modal.light-mode.mobile-journal-mode #journal-ledger,
            #journal-modal.light-mode.mobile-journal-mode #journal-ledger-notes {
                position: static !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                max-width: none !important;
                width: 100% !important;
                margin: 0 !important;
                box-sizing: border-box !important;
                background: #f5f1e8 !important;
                color: #3a3428 !important;
                padding: 15px 18px !important;
                font-size: 11px !important;
                line-height: 1.45 !important;
                letter-spacing: -0.01em !important;
                height: 100% !important;
                max-height: 100% !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            /* Section heads — light-mode palette, compact sizing */
            .mobile-journal-mode .traits-header,
            .mobile-journal-mode .observations-header,
            .mobile-journal-mode .deduction-header,
            .mobile-journal-mode .schedules-header,
            .mobile-journal-mode .evidence-header,
            .mobile-journal-mode .ledger-header {
                color: #5a5040 !important;
                background: #f5f1e8 !important;
                font-size: 12px !important;
                letter-spacing: 3px !important;
                border-bottom: 1px solid #c8c0b0 !important;
                padding: 0 0 8px 0 !important;
                margin-bottom: 10px !important;
            }

            /* Observations — explicit smaller text on parchment */
            .mobile-journal-mode .observation-entry {
                font-size: 11px !important;
                line-height: 1.4 !important;
                margin-bottom: 8px !important;
                color: #3a3428 !important;
            }
            .mobile-journal-mode .observation-name {
                font-size: 10px !important;
                letter-spacing: 1px !important;
                color: #5a5040 !important;
            }
            .mobile-journal-mode .observation-text {
                font-size: 11px !important;
                line-height: 1.4 !important;
                color: #3a3428 !important;
            }

            /* Nav bar — light-mode palette */
            .mobile-journal-mode #journal-mobile-nav {
                background: #e8e2d6 !important;
                border-top: 1px solid #c8c0b0 !important;
            }
            .mobile-journal-mode .journal-mobile-prev,
            .mobile-journal-mode .journal-mobile-next {
                color: #5a5040 !important;
                border: 1px solid #c8c0b0 !important;
                background: #f5f1e8 !important;
            }
            .mobile-journal-mode #journal-mobile-pagenum {
                color: #6a6050 !important;
            }

            /* Constrain bottom-section to viewport (beats full-mode-body width:600px) */
            body.full-mode-body #bottom-section,
            #bottom-section {
                position: relative !important;
                left: auto !important;
                bottom: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            #bottom-content {
                width: 100% !important;
                box-sizing: border-box !important;
                max-width: 100% !important;
                padding: 4px 2px !important;
            }

            #log-container {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 8px 2px 0 2px !important;
                overflow-wrap: break-word;
                word-break: break-word;
                line-height: 1.15 !important;
            }

            #log-container .log-entry {
                max-width: 100%;
                overflow-wrap: break-word;
                word-break: break-word;
                line-height: 1.15 !important;
                margin-bottom: 3px !important;
            }

            /* Pockets — vertical 1-column strip pinned to bottom-right of the
               stage. Empty slots are hidden; each new item reveals the next. */
            body #mobile-pockets,
            body.full-mode-body #mobile-pockets {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-end !important;
                position: absolute !important;
                left: auto !important;
                right: 10px !important;
                bottom: 8px !important;
                top: auto !important;
                width: auto !important;
                max-width: none !important;
                margin: 0 !important;
                z-index: 25;
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                box-sizing: border-box;
            }

            #mobile-pockets #pockets-label {
                display: none !important;
            }

            /* Vertical 1-column strip (beats body.full-mode-body
               repeat(3, 32px) rule at line 906). Empty slots hidden. */
            body #mobile-pockets #mobile-pocket-grid,
            body.full-mode-body #mobile-pocket-grid {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-end !important;
                grid-template-columns: none !important;
                grid-template-rows: none !important;
                gap: 4px !important;
                width: auto !important;
            }

            body #mobile-pockets #mobile-pocket-grid .pocket-slot,
            body.full-mode-body #mobile-pocket-grid .pocket-slot {
                width: 40px !important;
                height: 40px !important;
                min-width: 0 !important;
                font-size: 26px !important;
                line-height: 1 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* First 3 slots always visible; slots 4-6 only when filled */
            body #mobile-pockets #mobile-pocket-grid .pocket-slot[data-slot="3"]:empty,
            body #mobile-pockets #mobile-pocket-grid .pocket-slot[data-slot="4"]:empty,
            body #mobile-pockets #mobile-pocket-grid .pocket-slot[data-slot="5"]:empty,
            body.full-mode-body #mobile-pocket-grid .pocket-slot[data-slot="3"]:empty,
            body.full-mode-body #mobile-pocket-grid .pocket-slot[data-slot="4"]:empty,
            body.full-mode-body #mobile-pocket-grid .pocket-slot[data-slot="5"]:empty {
                display: none !important;
            }

            /* Map info overlays (room name + day/time) — pin to bottom-left,
               just above the log-box divider. */
            body.full-mode-body #map-location,
            #map-location {
                top: auto !important;
                bottom: 26px !important;
                left: 10px !important;
                right: auto !important;
            }

            body.full-mode-body #map-day-time,
            #map-day-time {
                top: auto !important;
                bottom: 8px !important;
                left: 10px !important;
                right: auto !important;
            }
        }

        /* MOBILE-DESIGN DEV PANEL — remove this whole block to clean up */
        .md-dev-panel {
            position: fixed;
            top: 8px;
            right: 8px;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 6px;
            background: rgba(20, 20, 20, 0.92);
            border: 1px solid #554;
            border-radius: 4px;
            font-family: 'Cutive Mono', monospace;
            pointer-events: auto;
        }
        .md-dev-title {
            font-size: 9px;
            letter-spacing: 2px;
            color: #776;
            text-align: center;
            border-bottom: 1px solid #333;
            padding-bottom: 3px;
            margin-bottom: 2px;
        }
        .md-dev-btn {
            background: #1a1a1a;
            color: #aa9;
            border: 1px solid #444;
            padding: 4px 8px;
            font-family: 'Cutive Mono', monospace;
            font-size: 10px;
            cursor: pointer;
            text-align: left;
        }
        .md-dev-btn:hover { background: #2a2a2a; color: #ddc; border-color: #665; }
        .md-dev-btn:active { background: #0a0a0a; }

        /* Large screens scaling - DISABLED FOR NOW
        
        @media (min-width: 1920px) {
            #game-layout {
                transform: scale(1.25);
                transform-origin: center center;
            }
        }
        
        @media (min-width: 2560px) {
            #game-layout {
                transform: scale(1.5);
                transform-origin: center center;
            }
        }
        
        @media (min-width: 3440px) {
            #game-layout {
                transform: scale(1.75);
                transform-origin: center center;
            }
        }
        
        --- END DISABLED */
        
        /* SLEEP OVERLAY - v0.58, v1.10: Fixed for full mode */
        #sleep-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0);
            backdrop-filter: blur(0px);
            pointer-events: none;
            z-index: 90;
            transition: background 1.5s ease-out, backdrop-filter 1.5s ease-out;
        }
        
        #stage-container {
            position: relative;
        }
        
        /* Drift to sleep - stays dark until new day */
        #sleep-overlay.sleeping {
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(12px);
        }
        
        /* Wake up animation */
        #sleep-overlay.waking {
            background: rgba(0, 0, 0, 0);
            backdrop-filter: blur(0px);
            transition: background 1s ease-in, backdrop-filter 1s ease-in;
        }

        /* =====================================================================
           PROTO LAYOUT V2 — treat the ENTIRE game UI as a single contained
           "game window" of 75vw × 100vh, pinned to the left of the viewport.
           The log lives in a separate fixed right-rail outside that container.
           Every internal element now sizes off the container (% / parent)
           rather than viewport units, so they stay inside the box.
           ===================================================================== */
        body.full-mode-body {
            justify-content: flex-start !important;
        }
        /* The container itself — the "game window" with hard bounds.
           position: fixed top-left so it escapes the parent flex centering
           (#mobile-wrapper is full-width and would otherwise re-centre us). */
        body.full-mode-body #game-layout {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 75vw !important;
            max-width: 75vw !important;
            height: 100vh !important;
            overflow: hidden;
            padding: 0 !important;
        }
        body.full-mode-body #stage-container {
            flex: 1 1 auto;
            width: 100%;
            min-height: 0;
        }
        /* Map area fills the container — was calc(100vw - 40px) which
           ignored the container. Now parent-relative so everything inside
           the game window respects the window's bounds. */
        body.full-mode-body #map-container {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        /* Log: fixed right-rail, OUTSIDE the game container. Because
           #game-layout has no transform, the fixed positioning anchors to
           the viewport rather than the container. */
        body.full-mode-body #bottom-section {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: auto !important;
            width: 25vw !important;
            height: 100vh !important;
            transform: none !important;
            background: #050505 !important;
            border-left: 1px solid #1a1a1a !important;
            z-index: 30;
            padding: 0 !important;
        }
        body.full-mode-body #bottom-content {
            display: block !important;
            height: 100%;
        }
        body.full-mode-body #log-container {
            height: 100% !important;
            min-height: 100%;
            background: transparent !important;
            padding: 18px 18px 24px 18px !important;
            box-sizing: border-box !important;
        }

        /* Right rail layout:
            TOP-RIGHT    pockets
            BOTTOM-RIGHT location → day/time → full-mode toggle → minimap
                         (reads top-down, minimap pinned to the bottom). */
        body.full-mode-body #mobile-pockets {
            top: 12px !important;
            right: 12px !important;
            bottom: auto !important;
            left: auto !important;
            transform: none !important;
        }
        /* Hide the "POCKETS" inner heading — the grid alone is enough. */
        body.full-mode-body #mobile-pockets #pockets-label {
            display: none !important;
        }
        body.full-mode-body #mobile-minimap {
            left: 12px !important;
            bottom: 12px !important;
            top: auto !important;
            right: auto !important;
        }
        /* Minimap top edge sits at bottom: 148px (12 + 136). Day/time
           sits a comfortable ~14px above it, then location, then
           toggle on top. Minimap lives bottom-LEFT, so labels align left. */
        body.full-mode-body #map-day-time {
            bottom: 162px !important;
            top: auto !important;
            left: 12px !important;
            right: auto !important;
            text-align: left !important;
        }
        body.full-mode-body #map-location {
            bottom: 178px !important;
            top: auto !important;
            left: 12px !important;
            right: auto !important;
            text-align: left !important;
        }
        body.full-mode-body #full-mode-toggle {
            display: none !important;
        }

        /* HUD content sized for 100vw — scale to ~85% so it fits inside
           the 75vw game container without clipping SECRETS off the right. */
        body.full-mode-body #hud-section {
            /* Anchored near the top-left of the game area with a small
               inset that matches the minimap/pockets breathing room
               (~12px) — flush enough to read as "corner UI", not so
               flush that the icons kiss the screen edge. */
            top: 12px !important;
            left: 12px !important;
            right: auto !important;
            transform: scale(0.85) !important;
            transform-origin: top left !important;
            width: calc(75vw - 24px) !important;
            padding-top: 0 !important;
            padding-left: 0 !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 24px !important;
        }
        /* Flatten the top row so clock-row, stats-row and npc-portraits
           are all siblings inside #hud-section's flex layout. */
        body.full-mode-body #hud-top-row {
            display: contents !important;
        }
        /* Icons on the LEFT, stats on the RIGHT. */
        body.full-mode-body #clock-row {
            flex: 0 0 auto;
            order: 0 !important;
        }
        body.full-mode-body #stats-row {
            flex: 1 1 auto !important;
            justify-content: space-around !important;
            align-items: center !important;
            order: 1 !important;
        }
        /* Stat-flash labels need a positioning anchor on stat-item. */
        .stat-item { position: relative; }
        .stat-flash {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
            margin-top: 2px;
            font-size: 11px;
            font-family: 'DotGothic16', monospace;
            letter-spacing: 1px;
            color: #DC143C;
            pointer-events: none;
            white-space: nowrap;
            opacity: 0;
            animation: stat-flash-fade 1.4s ease-out forwards;
        }
        .stat-flash.stat-flash-grey { color: #494949; }
        @keyframes stat-flash-fade {
            0%   { opacity: 0; transform: translate(-50%, 4px); }
            12%  { opacity: 1; transform: translate(-50%, 0); }
            70%  { opacity: 0.9; transform: translate(-50%, -2px); }
            100% { opacity: 0; transform: translate(-50%, -10px); }
        }
        /* Full-mode portraits dock bottom-RIGHT (minimap holds the left),
           so the dialogue bubble pops out to the LEFT of the frame. */
        body.full-mode-body .npc-portrait-bubble {
            left: auto;
            right: calc(100% + 10px);
            /* Dock is on the right edge, bubble opens leftward — align the
               text to the portrait side (right). */
            text-align: right;
        }
        body.full-mode-body .npc-portrait-bubble .bubble-text {
            text-align: right;
        }
        body.full-mode-body #npc-portraits {
            /* Bottom-right of the game area, but nudged clear of the log
               rail: #bottom-section is 25vw pinned to the right edge, so
               we inset by 25vw + a 12px gap. Column grows upward
               (column-reverse keeps the newest portrait at the bottom). */
            position: fixed !important;
            right: calc(25vw + 12px) !important;
            bottom: 12px !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            flex-direction: column-reverse !important;
            align-items: flex-end !important;
            gap: 6px !important;
            z-index: 25 !important;
            width: auto !important;
            margin: 0 !important;
        }


        /* PROTO portrait-dialogue bubbles — show the NPC's most recent
           spoken line floating next to their portrait. Same content as
           the log line, but anchored to the speaker so the player can
           see WHO is talking at a glance. Portraits are bottom-left in
           full mode, so the bubble pops out to the RIGHT of the frame. */
        .npc-portrait-bubble {
            position: absolute;
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            min-width: 160px;
            max-width: 280px;
            background: rgba(8, 8, 8, 0.92);
            color: #ddd;
            font-family: 'Cutive Mono', monospace;
            font-size: 11px;
            line-height: 1.4;
            padding: 8px 10px;
            white-space: normal;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease-out;
            z-index: 30;
        }
        .npc-portrait-bubble.visible {
            opacity: 1;
        }
        /* The text lives in an inner span so we can shake it without
           disturbing the bubble's vertical-centre transform. */
        .npc-portrait-bubble .bubble-text {
            display: inline-block;
        }
        .npc-portrait-bubble.shake .bubble-text {
            animation: suspect-vibrate 0.08s linear 5;
        }
        /* Bubble flavour variants — colours mirror the matching
           log-entry class so the same line in the chat rail and in
           the bubble reads with one identity. */
        .npc-portrait-bubble.bubble-dialogue        { color: #ffffff; }
        .npc-portrait-bubble.bubble-dialogue-elder  { color: #f0c8c8; }
        .npc-portrait-bubble.bubble-dialogue-ambient{ color: #888; }
        .npc-portrait-bubble.bubble-mystery         { color: #ffd700; }
        .npc-portrait-bubble.bubble-vice            { color: #ff6b35; text-shadow: 0 0 5px rgba(255, 107, 53, 0.4); }
        .npc-portrait-bubble.bubble-warning         { color: #cc8800; }
        .npc-portrait-bubble.bubble-whisper         { color: #ff6666; }
        .npc-portrait-bubble.bubble-danger          { color: #DC143C; font-weight: bold; }
        .npc-portrait-bubble.bubble-secret          { color: #ffff00; text-shadow: 0 0 6px rgba(255,255,0,0.5); }
        .npc-portrait-bubble.bubble-quest           { color: #00ccff; }
        .npc-portrait-bubble.bubble-system          { color: #666; font-style: italic; }
        .npc-portrait-bubble.bubble-plain           { color: #ccc; }
        .npc-portrait-bubble.bubble-flavor          { color: #bbb; font-style: italic; }