:root {
            --holy-void: #0c0603;
            --holy-purple: #1c0c06;
            --holy-rosegold: #fb923c;
            --holy-platinum: #fff7ed;
        }

        /* Custom Tailwind Color Mappings */
        .text-holy-rosegold { color: var(--holy-rosegold) !important; }
        .text-holy-rosegold\/30 { color: rgba(251,146,60, 0.3) !important; }
        .text-holy-rosegold\/50 { color: rgba(251,146,60, 0.5) !important; }
        .text-holy-rosegold\/60 { color: rgba(251,146,60, 0.6) !important; }
        .text-holy-rosegold\/70 { color: rgba(251,146,60, 0.7) !important; }
        .text-holy-rosegold\/80 { color: rgba(251,146,60, 0.8) !important; }
        .text-holy-platinum { color: var(--holy-platinum) !important; }
        .text-holy-platinum\/30 { color: rgba(238, 242, 255, 0.3) !important; }
        .text-holy-platinum\/40 { color: rgba(238, 242, 255, 0.4) !important; }
        .text-holy-void { color: var(--holy-void) !important; }

        .bg-holy-rosegold { background-color: var(--holy-rosegold) !important; }
        .bg-holy-rosegold\/10 { background-color: rgba(251,146,60, 0.1) !important; }
        .bg-holy-rosegold\/20 { background-color: rgba(251,146,60, 0.2) !important; }
        .bg-holy-void { background-color: var(--holy-void) !important; }

        .border-holy-rosegold\/10 { border-color: rgba(251,146,60, 0.1) !important; }
        .border-holy-rosegold\/20 { border-color: rgba(251,146,60, 0.2) !important; }
        
        .from-holy-rosegold { --tw-gradient-from: var(--holy-rosegold) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251,146,60, 0)) !important; }
        .via-holy-rosegold { --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--holy-rosegold) !important, var(--tw-gradient-to, transparent) !important; }

        /* Arbitrary utilities in index.html mapped locally to avoid build errors/CLS in static TW v2 */
        .text-\[120vw\] { font-size: 120vw !important; }
        .z-\[100\] { z-index: 100 !important; }
        .text-\[\#fdba74\] { color: #fdba74 !important; }
        .text-\[\#fbbf24\] { color: #fbbf24 !important; }
        .text-\[0\.55rem\] { font-size: 0.55rem !important; }
        .text-\[0\.65rem\] { font-size: 0.65rem !important; }
        .text-\[0\.6rem\] { font-size: 0.6rem !important; }
        .text-\[0\.75rem\] { font-size: 0.75rem !important; }
        .text-\[1\.1rem\] { font-size: 1.1rem !important; }
        .text-\[1\.3rem\] { font-size: 1.3rem !important; }
        .text-\[1\.4rem\] { font-size: 1.4rem !important; }
        .text-\[1\.8rem\] { font-size: 1.8rem !important; }
        .text-\[24px\] { font-size: 24px !important; }
        .text-\[10px\] { font-size: 10px !important; }
        .text-\[0\.45rem\] { font-size: 0.45rem !important; }
        .text-\[0\.5rem\] { font-size: 0.5rem !important; }
        .text-\[0\.4rem\] { font-size: 0.4rem !important; }
        .text-\[0\.8rem\] { font-size: 0.8rem !important; }
        .text-\[0\.9rem\] { font-size: 0.9rem !important; }
        .tracking-\[0\.15em\] { letter-spacing: 0.15em !important; }
        .tracking-\[0\.3em\] { letter-spacing: 0.3em !important; }
        .tracking-\[0\.4em\] { letter-spacing: 0.4em !important; }
        .tracking-\[0\.1em\] { letter-spacing: 0.1em !important; }
        .tracking-\[0\.2em\] { letter-spacing: 0.2em !important; }
        .max-w-\[95\%\] { max-width: 95% !important; }

        /* Custom Animations */
        .animate-spin-slow { animation: spin-slow 60s linear infinite !important; }
        .animate-soul-pulse { animation: soulPulse 3s ease-in-out infinite !important; }
        .animate-gate-glow { animation: gateGlow 4s ease-in-out infinite !important; }
        .animate-cinematic-reveal { animation: cinematicUnroll 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important; }

        @keyframes spin-slow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes cinematicUnroll { 
            0% { opacity: 0; transform: translateY(20px); filter: blur(10px); } 
            100% { opacity: 1; transform: translateY(0); filter: blur(0); } 
        }
        @keyframes soulPulse { 
            0%, 100% { transform: scale(1); opacity: 0.7; filter: blur(8px); } 
            50% { transform: scale(1.2); opacity: 1; filter: blur(12px); } 
        }
        @keyframes gateGlow { 
            0%, 100% { opacity: 0.3; } 
            50% { opacity: 0.7; } 
        }

        body { 
            font-family: 'Noto Serif TC', serif; 
            background-color: var(--holy-void); 
            background-image: radial-gradient(circle at 50% 0%, rgba(42, 16, 24, 0.6) 0%, transparent 75%); 
            color: #fff7ed; 
            overflow-x: hidden;
            overflow-y: auto;
            margin: 0; padding: 0; 
            /* manipulation keeps taps/clicks working; "none" blocks many mobile UIs */
            touch-action: manipulation;
            user-select: none; -webkit-user-select: none; 
            min-height: 100vh;
        }
        .font-official { font-family: 'Cinzel', serif; }
        .text-gradient-rosegold { 
            background: linear-gradient(135deg, #fb923c 0%, #ffedd5 50%, #fb923c 100%); 
            -webkit-background-clip: text; background-clip: text; color: transparent; 
        }
        .glass-sanctum { 
            background: linear-gradient(180deg, rgba(124,45,18,0.85) 0%, rgba(12,6,3,0.9) 100%); 
            backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); 
            border: 1px solid #fb923c; 
            border-radius: 10px; 
            box-shadow: 0 25px 50px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(232,240,255,0.25); 
        }
        /*
         * Four game doors — container-query + viewport breakpoints.
         * !important beats Tailwind utilities that may still force 4-col layouts.
         */
        .glass-sanctum {
            container-type: inline-size;
            container-name: game-sanctum;
        }
        .game-portal-grid {
            display: grid !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            gap: clamp(10px, 2.2vw, 18px) !important;
            grid-template-columns: 1fr !important;
            margin: 0 auto 0.5rem;
            position: relative;
            z-index: 50;
            pointer-events: auto !important;
        }
        /* Phone landscape / large phones: 2×2 */
        @media (min-width: 520px) {
            .game-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        /* Desktop: 3 across so six doors sit 3+3 without crushing Chinese titles */
        @media (min-width: 1180px) {
            .game-portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        }
        /* Prefer container size when supported (panel width, not whole window) */
        @supports (container-type: inline-size) {
            @container game-sanctum (max-width: 519px) {
                .game-portal-grid { grid-template-columns: 1fr !important; }
            }
            @container game-sanctum (min-width: 520px) and (max-width: 899px) {
                .game-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            }
            @container game-sanctum (min-width: 900px) {
                .game-portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
            }
        }
        .portal-btn { 
            background: linear-gradient(180deg, rgba(124,45,18,0.85) 0%, rgba(12,6,3,0.9) 100%); border: 1px solid #fb923c; 
            border-radius: 10px;
            padding: clamp(14px, 3vw, 28px) clamp(10px, 2vw, 18px);
            min-height: 44px;
            min-height: max(44px, clamp(112px, 26vw, 168px));
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25); 
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
            cursor: pointer; display: flex; flex-direction: column; 
            align-items: center; justify-content: center;
            height: auto; min-width: 0; width: 100%; max-width: 100%;
            position: relative; overflow: hidden;
            pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            z-index: 51;
        }
        .portal-btn:hover { 
            border-color: #fbbf24; background: linear-gradient(180deg, rgba(194,65,12,0.9) 0%, rgba(124,45,18,0.95) 100%); 
            transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25), 0 15px 30px rgba(251,146,60, 0.25); 
        }
        .portal-btn i {
            font-size: clamp(1.75rem, 5vw, 3.25rem);
            color: #fb923c;
            margin-bottom: clamp(8px, 2vw, 18px);
            filter: drop-shadow(0 0 10px rgba(251,146,60, 0.5));
            transition: 0.5s;
            pointer-events: none;
            line-height: 1;
        }
        .portal-btn h3 {
            font-size: clamp(0.85rem, 2.6vw, 1.15rem) !important;
            line-height: 1.35 !important;
            margin-bottom: 0.4rem !important;
            padding: 0 4px;
            word-break: keep-all;
            max-width: 100%;
        }
        .portal-btn p {
            font-size: clamp(0.5rem, 1.6vw, 0.62rem) !important;
            line-height: 1.45 !important;
            padding: 0 6px;
            max-width: 100%;
            word-break: keep-all;
            hyphens: auto;
        }
        .portal-btn:hover i { transform: scale(1.08) translateY(-4px); filter: drop-shadow(0 0 18px rgba(251,146,60, 0.75)); }
        .portal-btn { animation: bliss-motion-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .portal-btn:nth-child(1) { animation-delay: 0.05s; }
        .portal-btn:nth-child(2) { animation-delay: 0.1s; }
        .portal-btn:nth-child(3) { animation-delay: 0.15s; }
        .portal-btn:nth-child(4) { animation-delay: 0.2s; }
        .portal-btn:nth-child(5) { animation-delay: 0.25s; }
        .portal-btn:nth-child(6) { animation-delay: 0.3s; }
        @media (prefers-reduced-motion: reduce) {
          .portal-btn { animation: none !important; }
          .portal-btn:hover i { transform: none; }
        }
        @media (hover: none) {
          .portal-btn:hover { transform: none; }
          .portal-btn:active { transform: scale(0.98); border-color: #fbbf24; }
        }
        .domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .domain-btn { 
            background: rgba(255,255,255,0.03); border: 1px solid rgba(251,146,60, 0.15); 
            color: #fff7ed; padding: 10px 5px; border-radius: 12px; 
            transition: 0.4s; font-size: 0.85rem; display: flex; 
            flex-direction: column; align-items: center; cursor: pointer;
            pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        }
        .domain-btn span { display: block; font-size: 0.5rem; color: #fb923c; font-family: 'Cinzel'; margin-top: 4px; text-transform: uppercase; pointer-events: none; }
        .domain-btn.active { background: rgba(251,146,60, 0.2); border-color: #fb923c; box-shadow: 0 0 15px rgba(251,146,60, 0.3); }
        /* FF menu treatment: gold cursor + focus ring */
        .domain-btn { position: relative; }
        .domain-btn::before { content: "▶"; position: absolute; left: 6px; top: 8px; color: #fbbf24; font-size: 0.55em; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
        .domain-btn.active::before, .domain-btn:hover::before, .domain-btn:focus-visible::before { opacity: 1; }
        .domain-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(251,146,60,0.85), 0 0 12px rgba(251,146,60,0.45); }
        .portal-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(251,146,60,0.85), 0 0 12px rgba(251,146,60,0.45); }
        @media (prefers-reduced-motion: reduce) { .domain-btn::before { transition: none; } }
        .rpg-choice { 
            background: linear-gradient(180deg, rgba(124,45,18,0.9) 0%, rgba(12,6,3,0.95) 100%); border: 1px solid #fb923c; 
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.15); 
            padding: 18px 25px; border-radius: 8px; cursor: pointer; 
            transition: 0.25s; text-align: left; margin-bottom: 12px; 
            min-width: 280px; width: 100%; max-width: 36rem; display: flex; align-items: center; justify-content: center;
            pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
            position: relative; z-index: 5; user-select: none; color: inherit; font: inherit;
            appearance: none; -webkit-appearance: none;
        }
        .rpg-choice::before { content: "▶"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #fbbf24; font-size: 0.75em; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
        .rpg-choice:hover, .rpg-choice:focus-visible { border-color: #fbbf24; background: linear-gradient(180deg, rgba(194,65,12,0.95) 0%, rgba(124,45,18,0.98) 100%); box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25), 0 0 15px rgba(255,210,87,0.25); transform: scale(1.01); outline: none; }
        .rpg-choice:hover::before, .rpg-choice:focus-visible::before { opacity: 1; }
        .rpg-choice:active { transform: scale(0.99); }
        .rpg-choice.is-locked, .rpg-choice:disabled { opacity: 0.55; pointer-events: none !important; cursor: wait; }
        /* Screens: fixed stack; scroll from TOP (center + overflow clips content — not workable) */
        .screen { 
            position: fixed; inset: 0; display: flex; flex-direction: column; 
            justify-content: flex-start;
            align-items: center;
            transition: opacity 0.35s ease, visibility 0.35s ease;
            z-index: 10; opacity: 0; visibility: hidden;
            pointer-events: none !important;
            overflow-y: auto; overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding:
              calc(var(--bliss-nav-h, 72px) + env(safe-area-inset-top, 0px) + 12px)
              max(12px, env(safe-area-inset-right, 0px))
              calc(120px + env(safe-area-inset-bottom, 0px))
              max(12px, env(safe-area-inset-left, 0px));
            box-sizing: border-box;
            height: 100%;
            height: 100dvh;
            max-height: 100dvh;
        }
        .screen.active {
            opacity: 1; visibility: visible;
            pointer-events: auto !important;
            z-index: 40;
        }
        .screen .glass-sanctum {
            width: min(100%, 72rem);
            max-width: 100%;
            margin: 0 auto 1.25rem;
            flex: 0 0 auto;
            box-sizing: border-box;
        }
        .screen.active .glass-sanctum,
        .screen.active button,
        .screen.active .portal-btn,
        .screen.active .game-portal-grid,
        .screen.active .domain-btn,
        .screen.active .rpg-choice,
        .screen.active a,
        .screen.active textarea,
        .screen.active label,
        .screen.active input,
        .screen.active select {
            pointer-events: auto !important;
        }
        /* Start screen: doors first, board secondary */
        #startScreen .glass-sanctum {
            max-width: min(100%, 68rem);
        }
        #gameCanvas {
            position: fixed; inset: 0; z-index: 5;
            pointer-events: none !important;
            touch-action: none;
        }
        #gameCanvas.playing {
            z-index: 36;
            pointer-events: auto !important;
            cursor: crosshair;
        }
        .hud { 
            position: fixed; top: 0; left: 0; width: 100%; padding: 100px 30px 30px; 
            display: flex; justify-content: space-between; z-index: 45; opacity: 0; transition: 0.5s; pointer-events: none; 
        }
        .hud.active { opacity: 1; }
        .hud-box { 
            background: linear-gradient(180deg, #7c2d12 0%, #1c0c06 100%); border: 1px solid #fb923c; 
            padding: 8px 22px; border-radius: 8px; font-family: 'Press Start 2P', 'Noto Serif TC', monospace; 
            font-size: 0.95rem; font-weight: 400; color: #fbbf24; backdrop-filter: blur(15px); 
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25), 0 0 20px rgba(251,146,60, 0.15); 
        }
        .floating-text { 
            position: absolute; font-weight: 900; font-size: 1.8rem; pointer-events: none; 
            animation: floatUpAndFade 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1); 
            text-shadow: 0 0 15px rgba(0,0,0,0.9); z-index: 50; 
        }
        @keyframes floatUpAndFade { 0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translateY(-50px) scale(1.5); filter: blur(2px); } }
        
        .wisdom-card-wrapper { background: linear-gradient(145deg, #1c0c06 0%, #7c2d12 100%); position: relative; }
        #obsidian-dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        
        .vision-upload-box {
            border: 2px dashed rgba(251,146,60,0.5); border-radius: 10px; padding: 40px; cursor: pointer;
            transition: 0.4s; background: rgba(251,146,60,0.05); position: relative; overflow: hidden;
        }
        .vision-upload-box:hover { border-color: #fb923c; background: rgba(251,146,60,0.1); }
        #visionPreview { max-height: 200px; max-width: 100%; border-radius: 1rem; display: none; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

        /* 導航 (對齊大一統) */
        .nav-pill-container { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; padding: 4px; display: inline-flex; align-items: center; gap: 4px; }
        .nav-pill { padding: 8px 24px; border-radius: 50px; font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(251,146,60, 0.5); transition: 0.3s; text-decoration: none; display: flex; align-items: center; gap: 8px;}
        .nav-pill.active { background: rgba(251,146,60,0.15); color: #fb923c; box-shadow: inset 0 0 10px rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.3); }
        .nav-pill:hover:not(.active) { color: #fb923c; background: rgba(255,255,255,0.05); }

        /* 🔒 自定義彈窗與付費牆 */
        .custom-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); z-index: 200000; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; }
        .custom-confirm-overlay.show { opacity: 1; display: flex; }
        .custom-confirm-panel { background: linear-gradient(180deg, #7c2d12 0%, #1c0c06 100%); border: 1px solid #fb923c; border-radius: 10px; max-width: 450px; width: 100%; padding: 35px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(232,240,255,0.25); transform: scale(0.95); transition: transform 0.3s ease;}
        .custom-confirm-overlay.show .custom-confirm-panel { transform: scale(1); }

        #paywall-modal { position: fixed; inset: 0; background: rgba(5, 6, 8, 0.97); z-index: 101000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(30px); opacity: 0; transition: opacity 0.6s ease; }
        #paywall-modal.show { display: flex; opacity: 1; }
        .paywall-panel { background: linear-gradient(180deg, rgba(124,45,18,0.98) 0%, rgba(12,6,3,0.99) 100%); border: 2px solid #fb923c; box-shadow: 0 50px 120px rgba(0,0,0,1), 0 0 80px rgba(251,146,60, 0.15), inset 0 0 0 1px rgba(232,240,255,0.25); border-radius: 12px; padding: 45px; max-width: 600px; width: 95%; position: relative; text-align: center; transform: scale(0.9) translateY(20px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        #paywall-modal.show .paywall-panel { transform: scale(1) translateY(0); }

        #wisdomSignature { background: linear-gradient(90deg, transparent, rgba(251,146,60,0.1), transparent); border-top: 1px solid rgba(251,146,60,0.2); border-bottom: 1px solid rgba(251,146,60,0.2); padding: 8px 0; display: inline-block; width: 100%; text-shadow: 0 0 10px rgba(251,146,60,0.5); }
        
        .oracle-input-area { width: 100%; background: rgba(251,146,60, 0.05); border: 1px solid rgba(251,146,60, 0.3); border-radius: 8px; padding: 20px; color: #fff7ed; font-size: 1rem; outline: none; transition: all 0.4s ease; text-align: left; letter-spacing: 0.1em; resize: none; margin-bottom: 15px; }
        .oracle-input-area:focus { border-color: #fb923c; box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 30px rgba(251,146,60, 0.2); background: rgba(251,146,60, 0.08); }
        .oracle-input-area::placeholder { color: rgba(238, 242, 255, 0.3); }

        /* =========================================
           📱 遊戲所大一統響應式優化 Media Queries
           ========================================= */
        @media (max-width: 1024px) {
            .hud {
                padding: 85px 20px 20px !important;
            }
        }
        @media (max-width: 768px) {
            body {
                overflow-y: auto !important;
                touch-action: manipulation !important;
            }
            .screen {
                position: fixed !important;
                inset: 0 !important;
                min-height: 100dvh !important;
                height: 100dvh !important;
                max-height: 100dvh !important;
                padding-top: calc(var(--bliss-nav-h, 72px) + env(safe-area-inset-top, 0px) + 8px) !important;
                padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
                padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
                padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
                transform: none !important;
                display: none !important;
                visibility: visible !important;
                opacity: 1 !important;
                pointer-events: none !important;
                z-index: 10 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                justify-content: flex-start !important;
                align-items: stretch !important;
            }
            .screen.active {
                display: flex !important;
                pointer-events: auto !important;
                z-index: 40 !important;
            }
            .glass-sanctum {
                padding: 22px 14px !important;
                border-radius: 10px !important;
                max-width: 100% !important;
                width: 100% !important;
                margin: 0 auto 1rem !important;
                max-height: none !important;
                overflow-y: visible !important;
                overflow-x: hidden !important;
            }
            .portal-btn {
                padding: 18px 12px !important;
                border-radius: 10px !important;
                min-height: 120px !important;
            }
            .portal-btn i {
                font-size: 2rem !important;
                margin-bottom: 8px !important;
            }
            .game-portal-grid {
                gap: 10px !important;
                grid-template-columns: 1fr !important;
            }
            #startScreen .glass-sanctum {
                width: 100% !important;
                max-width: 100% !important;
            }
            .hud {
                position: fixed !important;
                padding: 15px !important;
                top: 70px !important;
            }
            .hud-box {
                font-size: 0.75rem !important;
                padding: 6px 14px !important;
            }
        }
        @media (max-width: 768px) and (min-width: 420px) {
            .game-portal-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 419px) {
            .game-portal-grid {
                grid-template-columns: 1fr !important;
            }
            .portal-btn {
                min-height: 108px !important;
                padding: 16px 12px !important;
            }
            .portal-btn h3 {
                font-size: 0.95rem !important;
            }
            .portal-btn p {
                font-size: 0.55rem !important;
            }
        }
        @media (max-width: 480px) {
            .glass-sanctum {
                padding: 24px 16px !important;
                border-radius: 8px !important;
            }
            .oracle-input-area {
                padding: 12px !important;
                font-size: 0.9rem !important;
            }
            .domain-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 6px !important;
            }
            .domain-btn {
                padding: 8px 4px !important;
                font-size: 0.75rem !important;
            }
            .paywall-panel {
                padding: 24px 16px !important;
                border-radius: 10px !important;
            }
            .rpg-choice {
                padding: 12px 16px !important;
                font-size: 0.85rem !important;
                min-width: 100% !important;
            }
            h1, .text-3xl, .text-5xl, .text-6xl {
                font-size: 1.75rem !important;
            }
            h2, .text-xl, .text-2xl {
                font-size: 1.1rem !important;
            }
        }

        /* AI-Native Werewolf Gothic Styling */
        .card-3d-wrap {
            perspective: 1000px;
            width: 180px;
            height: 260px;
            cursor: pointer;
        }
        .card-3d-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .card-3d-inner.flipped {
            transform: rotateY(180deg);
        }
        .card-3d-front, .card-3d-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 1.25rem;
            border: 1px solid rgba(251,146,60, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .card-3d-front {
            background: linear-gradient(135deg, #13071C 0%, #0c0603 100%);
            color: #fb923c;
        }
        .card-3d-back {
            background: linear-gradient(135deg, #2D0813 0%, #0D0205 100%);
            color: #FF2E2E;
            transform: rotateY(180deg);
            border-color: rgba(255, 46, 70, 0.4);
        }
        .roundtable-container {
            position: relative;
            width: 100%;
            max-width: 850px;
            height: 480px;
            margin: 0 auto;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* FF battle altar — blue window crystal core */
        .roundtable-altar {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(124,45,18, 0.95) 0%, rgba(12,6,3, 0.98) 100%);
            border: 2px solid #fb923c;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25), 0 0 28px rgba(251,146,60,0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 5;
            text-align: center;
            padding: 15px;
        }
        .roundtable-altar.night {
            border-color: #6366f1;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.2), 0 0 28px rgba(99,102,241,0.35);
        }
        .roundtable-altar.wolves {
            border-color: #ef4444;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.15), 0 0 28px rgba(239,68,68,0.4);
        }
        .roundtable-altar .ff-atb-host {
            width: 80%;
            margin-top: 6px;
        }
        .player-seat {
            position: absolute;
            width: 110px;
            transition: all 0.5s ease;
            z-index: 10;
        }
        .seat-card {
            background: linear-gradient(180deg, rgba(124,45,18, 0.92) 0%, rgba(12,6,3, 0.95) 100%);
            border: 1px solid #fb923c;
            border-radius: 6px;
            padding: 10px;
            text-align: center;
            position: relative;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.2);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .seat-card.active-speaker {
            border-color: #fbbf24;
            box-shadow: inset 0 0 0 1px rgba(255,210,87,0.35), 0 0 20px rgba(255,210,87,0.35);
            transform: scale(1.05);
        }
        .seat-card.active-speaker.wolf-speak {
            border-color: #ef4444;
            box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3), 0 0 20px rgba(239,68,68,0.35);
        }
        .seat-card.dead {
            opacity: 0.4;
            filter: grayscale(1) blur(0.5px);
            border-color: rgba(251,146,60,0.2);
        }
        .micro-meter-container {
            width: 100%;
            height: 6px;
            background: rgba(12,6,3,0.85);
            border: 1px solid #fb923c;
            border-radius: 2px;
            overflow: hidden;
            display: flex;
            margin-top: 3px;
        }
        .meter-trust {
            height: 100%;
            background: linear-gradient(180deg, #ffedd5 0%, #fbbf24 45%, #C9A227 100%);
            transition: width 0.5s ease;
        }
        .meter-suspicion {
            height: 100%;
            background: linear-gradient(180deg, #fecaca 0%, #ef4444 55%, #7f1d1d 100%);
            transition: width 0.5s ease;
        }
        .vote-line-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 8;
        }
        .dialogue-builder-select {
            background: linear-gradient(180deg, #7c2d12 0%, #1c0c06 100%);
            border: 1px solid #fb923c;
            border-radius: 4px;
            padding: 8px 12px;
            color: #fff7ed;
            font-size: 0.8rem;
            outline: none;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.2);
        }
        .dialogue-builder-select:focus {
            border-color: #fbbf24;
            box-shadow: 0 0 0 2px rgba(255,210,87,0.25);
        }
        /* FF command menu (battle selects) */
        .ff-cmd-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 200px;
            overflow-y: auto;
        }
        .ff-cmd-menu .ff-menu-item {
            width: 100%;
            text-align: left;
            font-size: 0.78rem;
            padding: 0.55rem 0.75rem 0.55rem 1.4rem;
        }
        .ff-cmd-menu .ff-menu-item.is-selected,
        .ff-cmd-menu .ff-menu-item.active {
            border-color: #fbbf24;
            color: #fbbf24;
        }
        .terminal-log {
            background: linear-gradient(180deg, rgba(12,6,3,0.95) 0%, rgba(12,6,3,0.98) 100%);
            border: 1px solid #fb923c;
            border-radius: 6px;
            padding: 15px;
            /* Log lines contain CJK — no Press Start 2P on this node */
            font-family: ui-monospace, monospace;
            font-size: 0.72rem;
            color: rgba(238, 242, 255, 0.85);
            height: 120px;
            overflow-y: auto;
            text-align: left;
            line-height: 1.7;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.15);
        }
        .terminal-log::-webkit-scrollbar {
            width: 4px;
        }
        .terminal-log::-webkit-scrollbar-thumb {
            background: rgba(251,146,60, 0.35);
            border-radius: 2px;
        }
        /* Mobile specific roundtable layout overrides */
        @media (max-width: 768px) {
            .roundtable-container {
                height: 380px;
                max-width: 100%;
            }
            .roundtable-altar {
                width: 130px;
                height: 130px;
                padding: 10px;
            }
            .player-seat {
                width: 80px;
            }
            .seat-card {
                padding: 6px;
                border-radius: 4px;
            }
            .seat-card img {
                width: 32px;
                height: 32px;
                margin: 0 auto;
            }
        }

        /* Werewolf Dedicated Ending Screen Overlay — victory fanfare */
        #werewolfEndingScreen {
            background: linear-gradient(180deg, rgba(12,6,3,0.98) 0%, rgba(12,6,3,0.99) 100%);
            backdrop-filter: blur(12px) saturate(160%);
            -webkit-backdrop-filter: blur(12px) saturate(160%);
            border: 2px solid #fb923c;
            box-shadow: inset 0 0 0 1px rgba(232,240,255,0.25), 0 0 50px rgba(0, 0, 0, 0.95);
            transition: opacity 0.5s ease-in-out;
        }

        /* === FF Resonance: gauges & pixel numerals === */
        .ff-gauge-track { background: rgba(12,6,3,0.85) !important; border: 1px solid #fb923c; border-radius: 3px !important; height: 10px !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }
        #rpgProgressBar { background: linear-gradient(180deg, #ffedd5 0%, #fbbf24 45%, #C9A227 100%) !important; box-shadow: 0 0 12px rgba(255,210,87,0.6) !important; border-radius: 2px; }
        #game-progress-strip { font-family: 'Press Start 2P', 'Noto Serif TC', monospace; border: 1px solid rgba(251,146,60,0.35); border-radius: 6px; background: rgba(12,6,3,0.7); }
        #game-lvl, #game-xp { color: #fbbf24; }
        /* 10s ATB timer track */
        #tensec-atb-host {
            position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
            width: min(420px, 88vw); z-index: 46; opacity: 0; pointer-events: none; transition: opacity 0.35s;
        }
        #tensec-atb-host.active { opacity: 1; }
        #tensec-atb-host .ff-loader-label {
            font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 0.12em;
            color: #fbbf24; text-align: center; display: block; margin-bottom: 6px;
        }
    
        /* Per-OS theme: Inferno Golden */
        :root {
            --rg-light: #ffedd5;
            --rg-base: #fb923c;
            --rg-dark: #c2410c;
            --rg-deep: #7c2d12;
            --rg-gold: #fbbf24;
            --bg-obsidian: #0c0603;
            --bg-panel: rgba(124,45,18,0.92);
            --bg-void: #0c0603;
            --text-light: #fff7ed;
            --text-muted: #fdba74;
            --border-rg: rgba(251,146,60,0.35);
            --glow-rg: rgba(251,146,60,0.45);
            --prg-light: #ffedd5;
            --prg-base: #fb923c;
            --prg-dark: #c2410c;
            --prg-deep: #7c2d12;
            --rosegold: #fb923c;
            --gold: #fbbf24;
            --realm-accent: #fb923c;
            --realm-gold: #fbbf24;
            --realm-void: #0c0603;
        }

    
        /* realm-chrome-game */
        body[data-realm="game"] .focus-card,
        body[data-realm="game"] .inquiry-box,
        body[data-realm="game"] .glass-panel,
        body[data-realm="game"] .ff-window,
        body[data-realm="game"] .intel-box {
          border-color: rgba(251,146,60,0.42) !important;
        }
        body[data-realm="game"] .nav-pill.active,
        body[data-realm="game"] .mod-btn.active {
          background: linear-gradient(135deg, #c2410c, #fb923c) !important;
          color: #0c0603 !important;
          box-shadow: 0 0 22px rgba(251,146,60,0.45) !important;
        }
        body[data-realm="game"] ::selection {
          background: rgba(251,146,60,0.45);
          color: #0c0603;
        }

    
    /* fleet-responsive-local */
    @media (max-width: 640px) {
      body { overscroll-behavior-y: contain; }
      .app-container, .main { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
    }