@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

        body {
            background-color: #fcfbf9; /* Rich, elegant newsprint off-white */
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #1c1917;
            transition: background-color 1.5s ease;
        }

        body.stage-panic {
            background-color: #fef2f2;
        }

        #game-viewport-container {
            width: 100vw;
            height: 100vh;
            position: relative;
            transform: translate3d(0, 0, 0);
        }

        .impact-shake {
            animation: sudden-quake 0.22s cubic-bezier(.36,.07,.19,.97) both;
        }

        .continuous-rumble {
            animation: constant-stress 0.12s infinite alternate linear;
        }

        @keyframes sudden-quake {
            10%, 90% { transform: translate3d(-3px, 3px, 0); }
            20%, 80% { transform: translate3d(4px, -3px, 0); }
            30%, 50%, 70% { transform: translate3d(-5px, 4px, 0); }
            40%, 60% { transform: translate3d(5px, -1px, 0); }
        }

        @keyframes constant-stress {
            0% { transform: translate3d(var(--rumble-x, 0.6px), var(--rumble-y, 0.6px), 0) rotate(var(--rumble-r, 0.03deg)); }
            100% { transform: translate3d(calc(-1 * var(--rumble-x, 0.6px)), calc(-1 * var(--rumble-y, 0.6px)), 0) rotate(calc(-1 * var(--rumble-r, 0.03deg))); }
        }

        #hud-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            background: #ffffff;
            border-bottom: 2px solid #1c1917;
            padding: 16px 40px;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgb(0 0 0 / 0.03);
        }

        .hud-stats-group {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .meter-title {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #78716c;
        }

        .accuracy-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 320px;
        }

        .meter-bg {
            flex-grow: 1;
            height: 8px;
            background: #e7e5e4;
            border-radius: 999px;
            overflow: hidden;
        }

        .meter-fill {
            height: 100%;
            width: 100%;
            background: #059669;
            border-radius: 999px;
            transition: width 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s ease;
        }

        #accuracy-text {
            font-size: 16px;
            font-weight: 800;
            width: 50px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .live-timer {
            font-size: 18px;
            font-weight: 700;
            font-family: monospace;
            background: #1c1917;
            color: #f5f5f4;
            padding: 6px 16px;
            border-radius: 6px;
            letter-spacing: 0.5px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
            transition: background-color 0.5s ease;
        }

        .live-timer.panic-timer {
            background-color: #dc2626;
        }

        .game-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(28, 25, 23, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #ffffff;
        }

        .menu-card {
            background: #ffffff;
            color: #1c1917;
            padding: 48px;
            border-radius: 24px;
            box-shadow: 0 30px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.05);
            max-width: 480px;
            width: 90%;
            text-align: center;
            border-top: 6px solid #1c1917;
        }

        .menu-card h2 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 38px;
            font-weight: 700;
            margin-bottom: 16px;
            letter-spacing: -0.5px;
        }

        .menu-card p {
            color: #57534e;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 32px;
        }

        .action-btn {
            background: #1c1917;
            color: #ffffff;
            border: none;
            padding: 16px 32px;
            font-size: 16px;
            font-weight: 700;
            border-radius: 12px;
            cursor: pointer;
            width: 100%;
            transition: all 0.2s ease;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .action-btn:hover { 
            background: #dc2626; 
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
        }
        .action-btn:active { transform: translateY(0); }

        .score-display {
            font-size: 28px;
            font-weight: 800;
            margin: 20px 0;
            color: #1c1917;
        }

        .record-badge {
            display: inline-block;
            background: #fef3c7;
            color: #d97706;
            padding: 6px 16px;
            border-radius: 9999px;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 24px;
            border: 1px solid #fde68a;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .physics-ui {
            position: absolute;
            background-color: #ffffff;
            border: 1px solid #e7e5e4;
            border-radius: 8px;
            padding: 20px;
            z-index: 10;
            transform-origin: center;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 10px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.02);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            cursor: grab;
        }

        .physics-ui.is-dragging {
            cursor: grabbing;
            box-shadow: 0 25px 35px -10px rgba(28, 25, 23, 0.15), 0 10px 20px -5px rgba(28, 25, 23, 0.1);
            border-color: #dc2626 !important;
        }

        .danger-flash {
            animation: flash-warning-ui 0.25s infinite alternate !important;
            border-color: #ef4444 !important;
            pointer-events: none !important; 
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.15) !important;
        }

        @keyframes flash-warning-ui {
            0% { background-color: #ffffff; }
            100% { background-color: #fef2f2; }
        }

        .scrollable-content { overflow-y: auto; height: 100%; pointer-events: auto; padding-right: 4px; }
        .scrollable-content::-webkit-scrollbar { width: 4px; }
        .scrollable-content::-webkit-scrollbar-thumb { background: #e7e5e4; border-radius: 2px; }

        h1.brand-logo { 
            font-family: 'Playfair Display', Georgia, serif; 
            font-size: 32px; 
            font-weight: 700; 
            color: #1c1917; 
            letter-spacing: -0.5px;
        }
        
        h2.card-title { 
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 19px; 
            font-weight: 700; 
            color: #1c1917; 
            margin-bottom: 10px;
            line-height: 1.3;
        }
        
        p.card-body { font-size: 13.5px; line-height: 1.6; color: #44403c; margin-bottom: 10px; }
        .image-placeholder {
            background-color: #f5f5f4; 
            border: 1px dashed #d6d3d1;
            border-radius: 6px; 
            width: 100%; 
            height: 100%;
            display: flex; 
            align-items: center; 
            justify-content: center;
            font-weight: 700; 
            color: #a8a29e; 
            font-size: 11px; 
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .header-btn-container { display: flex; gap: 8px; margin-left: auto; }
        .modern-btn { background: #1c1917; color: #ffffff; border: none; padding: 10px 20px; font-size: 12px; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
        .article-headline-btn { display: block; width: 100%; height: 100%; text-align: left; background: none; border: none; }
        .article-headline-btn .badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px; background: #fee2e2; color: #ef4444; border-radius: 4px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
        .article-headline-btn h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 15.5px; font-weight: 700; color: #1c1917; margin-bottom: 6px; line-height: 1.3; }
        .article-headline-btn p { font-size: 12px; color: #57534e; line-height: 1.5; }
        .static-ad-box { height: 100%; display: flex; flex-direction: column; }
        .ad-tag { font-size: 9px; font-weight: 800; color: #b45309; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 1px; }