inside .gc-body — compact mode hides it */ .game-card .gc-body p, /* Card-bottom stats line — keep just the Play button */ .game-card .card-bottom .micro { display: none !important; } .game-card .gc-body { padding: 6px 8px !important; } .game-card .gc-body h3 { font-size: 10px !important; line-height: 1.2 !important; margin: 0 !important; } .game-card .card-bottom { padding: 4px 8px !important; justify-content: center !important; } .game-card .card-bottom .play { font-size: 9px !important; padding: 3px 8px !important; } .game-card .gc-cta, .game-card button { font-size: 9px !important; padding: 4px 8px !important; } } /* The launch-row "Practice Exams" + "Jeopardy Boards" action cards used to anchor to those big bands; the bands are now hidden, so redirect them to the library (the actual catalog). They keep their visual position in the launch row. */ #launch-paths a.action[href="#practice"], #launch-paths a.action[href="#jeopardy"] { /* Visual unchanged — only the click target changes via JS below. If JS doesn't update them, the user-perceptible result is they still navigate but go to library instead. */ } /* =========================================================================== SHARDS NOTIFICATION — make it ambient, not in-your-face (May 10 2026) User: "shards notifications are too intrusive and lack the retro arcade feel. should be way less in my face as a player/student. more of a background process." Default toast was 220px-min, centered top on mobile, 2.8s lifetime, serif italic title, glow + actions. Now: tiny pixel pill in the corner, one-liner, no actions, faster auto-fade — 8-bit "+25 SHARDS" beep. */ .arcade-toast[data-tone="shards"] { min-width: 0 !important; max-width: 220px !important; padding: 5px 10px !important; border-radius: 999px !important; border-width: 1px !important; border-left-width: 1px !important; background: rgba(8, 11, 20, 0.92) !important; border-color: rgba(122, 240, 255, 0.45) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 8px rgba(122, 240, 255, 0.18) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; transform: translateX(180%) !important; transition: transform .25s ease, opacity .25s ease !important; } .arcade-toast[data-tone="shards"].is-in { transform: translateX(0) !important; } .arcade-toast[data-tone="shards"].is-out { transform: translateX(180%) !important; } .arcade-toast[data-tone="shards"] .at-icon { width: 18px !important; height: 18px !important; border-radius: 999px !important; background: transparent !important; color: #7af0ff !important; flex-shrink: 0; } .arcade-toast[data-tone="shards"] .at-icon .ic, .arcade-toast[data-tone="shards"] .at-icon svg { width: 12px !important; height: 12px !important; } .arcade-toast[data-tone="shards"] .at-text { flex: 0 1 auto !important; } .arcade-toast[data-tone="shards"] .at-title { font-family: "Press Start 2P", "VT323", monospace !important; font-style: normal !important; font-weight: 400 !important; font-size: 9px !important; letter-spacing: 0 !important; color: #7af0ff !important; text-shadow: 0 0 6px rgba(122, 240, 255, 0.5); white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; } .arcade-toast[data-tone="shards"] .at-count { background: transparent !important; padding: 0 !important; } /* Ambient mode: no description, no close, no action button */ .arcade-toast[data-tone="shards"] .at-sub, .arcade-toast[data-tone="shards"] .at-close, .arcade-toast[data-tone="shards"] .at-actions, .arcade-toast[data-tone="shards"] .at-action { display: none !important; } /* On mobile, the toast container sits center-top by default which is exactly where shards toasts blocked gameplay. Push it to the corner so it's truly ambient. */ @media (max-width: 600px) { .arcade-toast-container { left: auto !important; right: 12px !important; top: max(72px, env(safe-area-inset-top, 72px)) !important; transform: none !important; align-items: flex-end !important; max-width: 220px !important; } } /* ----- 1. Hide design-rationale copy across the hub ----- The user explicitly called out: "remove explanations about flagships and design etc etc". We hide the longer paragraph descriptions on the hub bands but keep their titles + actionable links. */ .band-sub, .setup-sub, .welcome-sub, .welcome-disclaimer, .tagline, .hero-tagline, .smart-body p, .smart-body .smart-desc, .smart-card p, .smart-card .smart-desc, .mb-sub, .mode-button p, .mode-button .mb-sub, .focus-card p, .focus-card .focus-sub, .quick-card p, .quick-card .quick-sub, .game-card p, .game-card .game-sub, .kicker + p, .band-eyebrow + h2 + p { display: none !important; } /* But keep short functional helper text in setup cards (the kbd rows showing keyboard controls) — they're usability info, not rationale. */ .key-hints, .setup-card .key-hints { display: block !important; } /* ----- 2. Pixel typography overrides ----- */ :root { --font-pixel: "Press Start 2P", "Bungee", Impact, ui-monospace, monospace; --font-crt: "VT323", ui-monospace, "JetBrains Mono", monospace; } /* All major headlines → pixel. We keep them at modest sizes since Press Start 2P is wide and chunky. */ h1, h2, h3, .brand-title, .brand strong, .title-prefix, .title-suffix, .hero-title, .band-title, .setup-card h1, .setup-card h2, .setup-kicker, .kicker, .band-eyebrow, .hero-eyebrow, .wave-kicker, .stat-label, .hud-eyebrow { font-family: var(--font-pixel) !important; letter-spacing: 0 !important; font-style: normal !important; } /* Pixel fonts wrap badly — let them break and keep them at sane sizes */ .brand-title { font-size: 12px !important; line-height: 1.2 !important; } .band-title { font-size: 18px !important; line-height: 1.3 !important; } h1, .hero-title, .setup-card h1 { font-size: clamp(20px, 5.2vw, 32px) !important; line-height: 1.25 !important; } h2, .setup-card h2 { font-size: clamp(14px, 4vw, 22px) !important; line-height: 1.3 !important; } .setup-kicker, .band-eyebrow, .kicker { font-size: 9px !important; line-height: 1.3 !important; } .stat-label, .hud-eyebrow, .wave-kicker { font-size: 7px !important; line-height: 1.3 !important; letter-spacing: 0.04em !important; } /* ═══════════════════════════════════════════════════════════════════════ READABLE QUESTION PROMPTS — Jon: "in snake pit questions not legible. make sure all arcade questions can be read and answered." The pixel-font h1/h2/h3 rule above destroys long question text. These selectors restore readability: clean sans-serif at a real reading size, high-contrast white, normal letter-spacing, no uppercase. Applies to every arcade game's review-question prompt and to the choice/answer text so longer answers (Jeopardy clues, full sentences) remain legible. ═══════════════════════════════════════════════════════════════════════ */ #questionPrompt, .question-prompt, .question-card h2, #promptText, .quiz-prompt, .review-prompt, .scholar-prompt, .gate-prompt, .clue-prompt, .question-card .prompt, .question-card p { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important; font-style: normal !important; letter-spacing: 0 !important; text-transform: none !important; font-size: clamp(20px, 3.4vw, 28px) !important; line-height: 1.36 !important; font-weight: 600 !important; color: #f0f5ff !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; } /* The answer-choice TEXT (not the letter prefix) also needs readability. The letter prefix (A/B/C/D) stays pixel; the choice text uses Inter. */ .choice-btn, .choice, button.choice, .answer-btn { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: clamp(16px, 2.6vw, 19px) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; line-height: 1.42 !important; color: #f0f5ff !important; } .choice-btn .choice-letter, .choice .choice-letter, .choice-letter { font-family: var(--font-pixel) !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; color: #f5c451 !important; margin-right: 10px !important; } /* All stat numbers + counters → CRT mono (much more readable than P-S-2P) */ .stat-value, .hud-val, .hud-val.hud-mono, .mono, .score-value, .timer-val, .end-cell-value, [data-counter] { font-family: var(--font-crt) !important; letter-spacing: 0 !important; } .stat-value { font-size: 20px !important; line-height: 1 !important; } .hud-val { font-size: 22px !important; line-height: 1 !important; } .end-cell-value { font-size: 28px !important; line-height: 1 !important; } /* Body text + long paragraphs stay legible (system / Rajdhani) but loose pixel-arcade letter spacing for theme consistency */ body, p, li, .resume-card-meta, .pause-progress-meta { font-family: "Rajdhani", "Inter", system-ui, sans-serif; } /* Buttons get a chunky pixel-arcade treatment */ .btn, button.btn, .action, .hud-btn, .tc-btn, .round-btn, .touch-btn, .choice, .choice-btn { font-family: var(--font-pixel) !important; letter-spacing: 0 !important; text-transform: uppercase; font-size: 10px !important; line-height: 1.3 !important; } /* Larger primary buttons get a slight bump */ .btn.primary, button.btn.primary, .action.primary { font-size: 11px !important; } /* Question readability lock. Keep this after the global pixel-button rules: those rules are good for arcade chrome, but answer choices need real reading-size text. */ body[data-game-page] :is( #questionPrompt, .question-prompt, .question-card h2, #promptText, .quiz-prompt, .review-prompt, .scholar-prompt, .gate-prompt, .clue-prompt, .question-card .prompt, .question-text ) { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important; font-style: normal !important; letter-spacing: 0 !important; text-transform: none !important; font-size: clamp(20px, 3.4vw, 28px) !important; line-height: 1.36 !important; font-weight: 700 !important; color: #f8fbff !important; text-shadow: 0 2px 12px rgba(0,0,0,.32) !important; -webkit-text-stroke: 0 !important; } body[data-game-page] :is( .question-card, .question-panel, #questionCard, [class*="question-card"], [class*="question-panel"] ) { max-width: min(760px, calc(100vw - 28px)) !important; box-shadow: inset 0 0 0 999px rgba(2,5,13,.16), 0 18px 42px rgba(0,0,0,.48), 0 0 24px rgba(115, 243, 255, .12) !important; } body[data-game-page] :is( .question-screen .choice-btn, .question-screen .choice, .question-card .choice-btn, .question-card .choice, .question-panel .choice, .question-panel .answer-btn, .choice-grid .choice-btn, .choices .choice ) { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important; font-size: clamp(16px, 2.6vw, 19px) !important; line-height: 1.42 !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 650 !important; color: #f8fbff !important; text-shadow: 0 2px 4px rgba(0,0,0,.82), 0 0 14px rgba(0,0,0,.62) !important; box-shadow: inset 0 0 0 999px rgba(2,5,13,.26) !important; } /* Inputs / selects: keep them readable */ input, select, textarea { font-family: var(--font-crt) !important; font-size: 16px !important; } /* ----- 3. Hard-edged pixel rendering for SVG icons ----- */ .brand-mark, .stat-cell, .hud-cell { image-rendering: pixelated; } /* ----- 4. CRT scanline overlay platform-wide ----- Subtle 1px-stripe overlay simulating CRT phosphor lines. Rendered as a fixed pseudo-element so it's always on top of the page but doesn't interfere with input. Disabled under prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: 0.5; } } /* ----- 5. Arcade neon-glow on key interactive surfaces ----- */ .btn.primary:hover, .action.primary:hover { text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; } /* ----- 6. Arcade marquee chip border style (used on cards) ----- */ .game-card, .mode-button, .smart-card, .quick-card, .focus-card, .character-card, .racer-card { /* Sharp pixel-style corners + chunkier border */ border-width: 2px; border-style: solid; border-radius: 4px !important; } /* ----- 7. Topbar brand-mark crispness ----- */ .brand-mark { font-family: var(--font-pixel) !important; font-size: 10px !important; letter-spacing: 0 !important; } /* ----- 8. Footer + small text legibility cap (keep readable) ----- */ .footer, .footer p, .footer span { font-family: "Rajdhani", system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════ 9. CRT POWER-ON BOOT SEQUENCE Full-screen overlay that fades in vertical scan, then brand text, then blinking INSERT COIN. ~2.4s total, once per session, skippable. ═══════════════════════════════════════════════════════════════════════ */ .crt-boot { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: #000; pointer-events: auto; cursor: pointer; } .crt-boot.is-fading { opacity: 0; pointer-events: none; transition: opacity 600ms ease-out; } .crt-boot-screen { position: relative; width: min(900px, 92vw); height: min(560px, 80vh); background: radial-gradient(ellipse at center, #0c1428 0%, #04060c 70%, #000 100%); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 6px #0a0a0a, 0 0 0 8px #1a1a1a, 0 0 0 12px #0a0a0a, 0 0 60px rgba(93, 224, 240, 0.10), inset 0 0 80px rgba(0, 0, 0, 0.55); } /* Vertical line of light that expands to full screen — simulates CRT turning on with the classic vertical sweep. */ .crt-boot-scan { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%) scaleY(0.02); background: linear-gradient(to bottom, transparent 0%, rgba(180, 240, 255, 0.95) 50%, transparent 100%); box-shadow: 0 0 24px rgba(120, 220, 255, 0.85), 0 0 48px rgba(120, 220, 255, 0.45); opacity: 0; } .crt-boot.phase-scan .crt-boot-scan { animation: crtBootScan 380ms cubic-bezier(.2, 1.4, .4, 1) forwards; } @keyframes crtBootScan { 0% { opacity: 0; transform: translateX(-50%) scaleY(0.02); width: 2px; } 10% { opacity: 1; transform: translateX(-50%) scaleY(0.02); width: 2px; } 60% { opacity: 1; transform: translateX(-50%) scaleY(1); width: 2px; } 100% { opacity: 0.25; transform: translateX(-50%) scaleY(1); width: 100vw; } } .crt-boot-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px; text-align: center; font-family: "Press Start 2P", monospace; color: #5de0f0; opacity: 0; } .crt-boot.phase-brand .crt-boot-content { animation: crtBootFadeIn 600ms ease-out forwards; } @keyframes crtBootFadeIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .crt-boot-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; } .crt-boot-mark { font-size: 28px; color: #ffd060; text-shadow: 0 0 14px rgba(255, 208, 96, 0.85); margin-bottom: 6px; } .crt-boot-line-1 { font-size: clamp(16px, 3vw, 22px); letter-spacing: 0.12em; color: #f0f5ff; text-shadow: 0 0 10px rgba(240, 245, 255, 0.5); } .crt-boot-line-2 { font-size: clamp(20px, 4.5vw, 36px); letter-spacing: 0.06em; color: #ffd060; text-shadow: 0 0 18px rgba(255, 208, 96, 0.7); } .crt-boot-line-2 em { font-style: normal; color: #5de0f0; text-shadow: 0 0 18px rgba(93, 224, 240, 0.75); } .crt-boot-line-3 { font-size: clamp(8px, 1.4vw, 10px); letter-spacing: 0.18em; color: rgba(216, 220, 235, 0.55); margin-top: 4px; } .crt-boot-coin { font-size: clamp(11px, 2vw, 14px); letter-spacing: 0.20em; color: #ffd060; opacity: 0; text-shadow: 0 0 12px rgba(255, 208, 96, 0.7); } .crt-boot.phase-coin .crt-boot-coin { animation: crtCoinBlink 0.6s steps(1) 4; } @keyframes crtCoinBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .crt-boot-hint { font-size: 9px; letter-spacing: 0.12em; color: rgba(216, 220, 235, 0.32); font-family: "VT323", monospace; margin-top: 8px; opacity: 0; } .crt-boot.phase-coin .crt-boot-hint { animation: crtBootFadeIn 800ms 200ms ease-out forwards; } /* ═══════════════════════════════════════════════════════════════════════ 10. CRT VIGNETTE — soft corner darkening simulates curved bezel ═══════════════════════════════════════════════════════════════════════ */ .crt-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(ellipse 110% 80% at center, transparent 50%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0.55) 100%); mix-blend-mode: multiply; } @media (prefers-reduced-motion: reduce) { .crt-vignette { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 11. STRONGER SCANLINES + PHOSPHOR FLICKER (override section 4 above) ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { body::after { background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 3px ) !important; opacity: 0.75 !important; animation: phosphorFlicker 4.2s linear infinite; } } @keyframes phosphorFlicker { 0%, 100% { opacity: 0.75; } 97% { opacity: 0.75; } 97.5% { opacity: 0.55; } 98% { opacity: 0.85; } 98.5% { opacity: 0.60; } 99% { opacity: 0.78; } } /* ═══════════════════════════════════════════════════════════════════════ 12. INSERT COIN ATTRACT TEXT IN HERO ═══════════════════════════════════════════════════════════════════════ */ .attract-text { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-family: "Press Start 2P", monospace !important; font-size: 11px !important; letter-spacing: 0.22em; color: #ffd060; text-shadow: 0 0 12px rgba(255, 208, 96, 0.55), 0 0 24px rgba(255, 208, 96, 0.25); text-transform: uppercase; animation: attractBlink 1.6s steps(1) infinite; } .attract-text .attract-coin { font-size: 8px; color: #5de0f0; text-shadow: 0 0 10px rgba(93, 224, 240, 0.7); } @keyframes attractBlink { 0%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0.42; } } @media (prefers-reduced-motion: reduce) { .attract-text { animation: none; opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════ 13. CHUNKY ARCADE BUTTONS — every primary button gets the 1989 treatment ═══════════════════════════════════════════════════════════════════════ */ .btn.primary, .action.primary, button.primary, .brass-btn, .action.compact { font-family: "Press Start 2P", monospace !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 14px 24px !important; border-radius: 4px !important; background: linear-gradient(180deg, #ffd060 0%, #f5a020 100%) !important; color: #2a1808 !important; border: 3px solid #2a1808 !important; /* Hard arcade drop shadow — looks like a physical button on a cabinet */ box-shadow: 0 4px 0 #7a4818, 0 5px 0 #2a1808, 0 8px 16px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.4) !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.35); transform: translateY(0); transition: transform 80ms ease-out, box-shadow 80ms ease-out; cursor: pointer; } .btn.primary:hover, .action.primary:hover, button.primary:hover, .brass-btn:hover, .action.compact:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #7a4818, 0 6px 0 #2a1808, 0 10px 22px rgba(0,0,0,0.7), inset 0 2px 0 rgba(255,255,255,0.5) !important; } .btn.primary:active, .action.primary:active, button.primary:active, .brass-btn:active, .action.compact:active { transform: translateY(4px) !important; box-shadow: 0 0 0 #7a4818, 0 1px 0 #2a1808, 0 2px 8px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.2) !important; } /* Secondary / glass-pill buttons — chunkier border + pixel font */ .btn, .action, .btn.glass-pill { font-family: "Press Start 2P", monospace !important; font-size: 10px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; border-width: 2px !important; border-radius: 4px !important; padding: 10px 16px !important; } /* ═══════════════════════════════════════════════════════════════════════ 14. CARTRIDGE-LABEL GAME CARDS — like ROM cartridges in a Genesis library Each card gets a 2-tone pixel border, a "marquee" strip at top, and a scanning beam on hover. ═══════════════════════════════════════════════════════════════════════ */ .game-card, .mode-button, .smart-card, .quick-card, .focus-card, .continue-card { position: relative !important; background: linear-gradient(180deg, #1a1f30 0%, #0a0e1c 100%) !important; border: 3px solid var(--accent, #5de0f0) !important; border-radius: 4px !important; box-shadow: 0 0 0 1px #000 inset, 0 4px 0 rgba(0,0,0,0.55), 0 0 18px color-mix(in srgb, var(--accent, #5de0f0) 22%, transparent) !important; overflow: hidden; transition: transform 140ms cubic-bezier(.34, 1.4, .64, 1), box-shadow 140ms; } /* Cartridge "marquee" strip at top of each card */ .game-card::before, .mode-button::before, .smart-card::before, .quick-card::before, .focus-card::before { content: ""; position: absolute !important; top: 0; left: 0; right: 0; height: 4px !important; width: auto !important; background: repeating-linear-gradient( 90deg, var(--accent, #5de0f0) 0, var(--accent, #5de0f0) 8px, rgba(0,0,0,0.6) 8px, rgba(0,0,0,0.6) 12px ) !important; border-bottom: 1px solid rgba(0,0,0,0.7) !important; z-index: 4; pointer-events: none; } /* Scanning beam — a horizontal cyan line that sweeps top→bottom on hover */ .game-card:hover::after, .mode-button:hover::after, .smart-card:hover::after, .continue-card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(120, 240, 255, 0.18) 49%, rgba(180, 250, 255, 0.42) 50%, rgba(120, 240, 255, 0.18) 51%, transparent 60%, transparent 100%); animation: cartridgeScan 1.2s linear infinite; z-index: 3; mix-blend-mode: screen; } @keyframes cartridgeScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .game-card:hover::after, .mode-button:hover::after, .smart-card:hover::after, .continue-card:hover::after { animation: none; opacity: 0; } } .game-card:hover, .mode-button:hover, .smart-card:hover, .quick-card:hover, .focus-card:hover, .continue-card:hover { transform: translateY(-3px) !important; box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px color-mix(in srgb, var(--accent, #5de0f0) 45%, transparent) !important; } .game-card:active, .mode-button:active, .smart-card:active, .continue-card:active { transform: translateY(2px) !important; } /* Card titles + meta — pixel font */ .game-card h3, .mode-button .mb-title, .smart-card h3, .quick-card h3, .focus-card h3 { font-family: "Press Start 2P", monospace !important; font-size: 12px !important; letter-spacing: 0.02em !important; line-height: 1.4 !important; color: var(--accent, #5de0f0) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--accent, #5de0f0) 60%, transparent); } .game-card p, .mode-button .mb-sub, .smart-card p { font-family: "VT323", monospace !important; font-size: 16px !important; line-height: 1.25 !important; letter-spacing: 0.04em !important; } .game-card .micro, .continue-card .cc-meta { font-family: "VT323", monospace !important; font-size: 14px !important; } /* ═══════════════════════════════════════════════════════════════════════ 15. 7-SEGMENT LCD HUD NUMERICS Score, lives, time displays inside every game's top-HUD get a real LCD-style font with sharp digit edges, a faint "off-segment" ghost, and a black inset background. ═══════════════════════════════════════════════════════════════════════ */ .stat-cell .stat-value, .hud-cell .hud-val, .hud b, .hud strong[id], #hudScore, #hudLives, #hudLength, #hudKills, #hudBest, #hudRound, #hudWords, #hudTimer, #hudMult, #hudLevel, #hudCombo, #hudHyper, #hudWave, #score, #lives, #wave, #insight, #killCount, #goldCount { font-family: "VT323", "DSEG7", ui-monospace, monospace !important; font-size: 28px !important; font-weight: 700 !important; color: #5de0f0 !important; text-shadow: 0 0 8px rgba(93,224,240,0.55), 0 0 16px rgba(93,224,240,0.28) !important; letter-spacing: 0.04em !important; font-variant-numeric: tabular-nums; padding: 2px 8px !important; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%), repeating-linear-gradient(0deg, rgba(93,224,240,0.04) 0, rgba(93,224,240,0.04) 1px, transparent 1px, transparent 2px) !important; border: 1px solid rgba(93,224,240,0.30) !important; border-radius: 2px !important; display: inline-block; min-width: 1.5em; text-align: center; } .stat-cell .stat-label, .hud-cell .hud-eyebrow, .hud-cell .hud-label { font-family: "Press Start 2P", monospace !important; font-size: 8px !important; letter-spacing: 0.16em !important; color: rgba(216, 220, 235, 0.65) !important; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════════ 16. PER-GAME CRT BEZEL FRAME Every game canvas gets a faux-cabinet bezel via box-shadow. This makes each game feel like it's running inside a dedicated arcade screen. Subtle, doesn't impact gameplay. ═══════════════════════════════════════════════════════════════════════ */ canvas[id$="Canvas"], #snakeCanvas, #brickCanvas, #stellarCanvas, #bridgeCanvas, #solitaireCanvas, #boggleCanvas, #pongCanvas, #pongdrCanvas, #tronCanvas, #towerCanvas, #plinkoCanvas, #cubeCanvas, #defenderCanvas, #reflexCanvas, #knightCanvas, #echoCanvas, #galaxyCanvas, #atlasCanvas, #centiCanvas, #cascadeCanvas, #chronoCanvas, #chronoblocksCanvas, #chronohopCanvas, #citadelCanvas, #mahjongCanvas, #stepCanvas, #sokobanCanvas, #sudokuCanvas, #bombCanvas, #chessCanvas, #archiveCanvas, #archivetyCanvas, #rumorCanvas, #timeCanvas, #memCanvas, #anagramCanvas, #chronopinballCanvas, #reviewmazeCanvas, #pinballCanvas, #crosswordCanvas, #empireCanvas, #arena, #raceCanvas, #world, #screen { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.85), inset 0 0 0 5px rgba(93, 224, 240, 0.18), inset 0 0 80px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(120, 200, 220, 0.16), 0 0 18px rgba(0, 0, 0, 0.55) !important; border-radius: 6px !important; } /* ═══════════════════════════════════════════════════════════════════════ 17. ATTRACT-CYCLE — featured tile cycles its accent every 4s like a 1989 arcade cabinet's attract-mode screen flipping through ROMs. ═══════════════════════════════════════════════════════════════════════ */ @keyframes attractCycle { 0% { box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px rgba(93,224,240,0.6) !important; border-color: #5de0f0 !important; } 25% { box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px rgba(255,208,96,0.6) !important; border-color: #ffd060 !important; } 50% { box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px rgba(169,145,255,0.6) !important; border-color: #a991ff !important; } 75% { box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px rgba(240,123,184,0.6) !important; border-color: #f07bb8 !important; } 100% { box-shadow: 0 0 0 1px #000 inset, 0 6px 0 rgba(0,0,0,0.6), 0 0 28px rgba(93,224,240,0.6) !important; border-color: #5de0f0 !important; } } .featured-band .mode-button:first-child, .bento .mode-button:first-child { animation: attractCycle 4.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .featured-band .mode-button:first-child, .bento .mode-button:first-child { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ 18. TOPBAR / HUD — pixel font + sharper contrast on hub topbar ═══════════════════════════════════════════════════════════════════════ */ .topbar .brand strong, .brand-title { font-family: "Press Start 2P", monospace !important; font-size: 12px !important; letter-spacing: 0.04em !important; } .topnav a, .profile-pill .pp-name { font-family: "Press Start 2P", monospace !important; font-size: 9px !important; letter-spacing: 0.10em !important; } /* ═══════════════════════════════════════════════════════════════════════ 19. ARCADE CURSOR HINTS — visual feedback on focus / hover ═══════════════════════════════════════════════════════════════════════ */ .game-card:focus-visible, .mode-button:focus-visible, .smart-card:focus-visible, .btn:focus-visible, .action:focus-visible { outline: 3px solid #ffd060 !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px rgba(255, 208, 96, 0.18), 0 0 28px rgba(255, 208, 96, 0.45) !important; } /* ═══════════════════════════════════════════════════════════════════════ 20. SOUND-TOGGLE PILL in hub topbar — let users mute the SFX ═══════════════════════════════════════════════════════════════════════ */ .sfx-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(8, 12, 24, 0.85); border: 1px solid rgba(245, 196, 81, 0.32); border-radius: 4px; font-family: "Press Start 2P", monospace; font-size: 8px !important; letter-spacing: 0.10em; color: rgba(216, 220, 235, 0.85); cursor: pointer; transition: background 120ms, border-color 120ms; -webkit-tap-highlight-color: transparent; } .sfx-toggle:hover { background: rgba(245, 196, 81, 0.10); border-color: #f5c451; color: #ffd060; } .sfx-toggle .sfx-icon { font-size: 11px; line-height: 1; } .sfx-toggle[data-state="off"] { color: rgba(216,220,235,0.42); } .sfx-toggle[data-state="off"] .sfx-icon::before { content: "🔇"; } .sfx-toggle[data-state="on"] .sfx-icon::before { content: "🔊"; } /* ═══════════════════════════════════════════════════════════════════════ 21. ARCADE MARQUEE HEADER — the bright lit strip at the top of a real cabinet that displays the cabinet's name. Sticks above the topbar like a header banner with chasing border lights and pulsing brand neon. ═══════════════════════════════════════════════════════════════════════ */ .arcade-marquee { position: relative; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 24px 8px; background: linear-gradient(180deg, #1c1f30 0%, #0a0c18 100%), radial-gradient(ellipse 50% 100% at center top, rgba(255,208,96,0.10), transparent 70%); border-bottom: 3px solid #000; box-shadow: inset 0 -1px 0 rgba(255, 208, 96, 0.35), 0 6px 18px rgba(0,0,0,0.55); text-align: center; font-family: "Press Start 2P", monospace; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: 0.18em; text-transform: uppercase; color: #ffd060; text-shadow: 0 0 6px rgba(255, 208, 96, 0.75), 0 0 14px rgba(255, 208, 96, 0.45), 0 0 28px rgba(255, 130, 40, 0.30); overflow: hidden; } /* Chasing-light border at the top of the marquee — strip of small dots that chase from left to right like a 1989 cabinet marquee. */ .arcade-marquee::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background-image: repeating-linear-gradient( 90deg, #ffd060 0, #ffd060 6px, #2a1808 6px, #2a1808 16px ); background-size: 22px 100%; animation: marqueeChase 1.8s linear infinite; } @keyframes marqueeChase { 0% { background-position: 0 0; } 100% { background-position: 22px 0; } } .arcade-marquee::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background-image: repeating-linear-gradient( 90deg, #5de0f0 0, #5de0f0 6px, #0a1424 6px, #0a1424 16px ); background-size: 22px 100%; animation: marqueeChase 2.4s linear infinite reverse; } .arcade-marquee .mm-title { display: inline-flex; align-items: baseline; gap: 10px; } .arcade-marquee .mm-title .mm-arc { color: #5de0f0; text-shadow: 0 0 6px rgba(93, 224, 240, 0.85), 0 0 14px rgba(93, 224, 240, 0.55); font-style: italic; } .arcade-marquee .mm-coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff5b0 0%, #ffd060 40%, #a86a18 100%); box-shadow: 0 0 8px rgba(255, 208, 96, 0.85), 0 0 18px rgba(255, 130, 40, 0.55); animation: coinPulse 1.2s ease-in-out infinite alternate; } @keyframes coinPulse { 0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 208, 96, 0.85), 0 0 18px rgba(255, 130, 40, 0.55); } 100% { transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 208, 96, 1), 0 0 28px rgba(255, 130, 40, 0.85); } } @media (prefers-reduced-motion: reduce) { .arcade-marquee::before, .arcade-marquee::after { animation: none; } .arcade-marquee .mm-coin { animation: none; } } @media (max-width: 540px) { .arcade-marquee { padding: 8px 14px 6px; gap: 10px; } .arcade-marquee .mm-coin { width: 9px; height: 9px; } } /* ═══════════════════════════════════════════════════════════════════════ 22. GAME-PAGE TITLE MARQUEE — same idea inside each game's top edge ═══════════════════════════════════════════════════════════════════════ */ body[data-game-page] { /* Padding to make room for the marquee */ padding-top: 0 !important; } .game-marquee { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 14px 5px; background: linear-gradient(180deg, #14182a 0%, #060810 100%); border-bottom: 2px solid rgba(255, 208, 96, 0.45); font-family: "Press Start 2P", monospace; font-size: clamp(9px, 1.2vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: #ffd060; text-shadow: 0 0 6px rgba(255, 208, 96, 0.7); box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .game-marquee::before, .game-marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background-image: repeating-linear-gradient(90deg, rgba(255,208,96,0.85) 0, rgba(255,208,96,0.85) 5px, rgba(0,0,0,0.55) 5px, rgba(0,0,0,0.55) 12px); background-size: 17px 100%; animation: marqueeChase 2.0s linear infinite; } .game-marquee::before { top: 0; } .game-marquee::after { bottom: 0; animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .game-marquee::before, .game-marquee::after { animation: none; } } @media (max-width: 540px) { /* Slimmer per-game marquee on mobile portrait — was 41px (two-line wrap), now single-line ~16px. Frees the canvas real estate that was being squeezed AND eliminates the awkward wrap. */ .game-marquee { padding: 3px 8px 2px; font-size: 6px; gap: 5px; letter-spacing: 0.10em; white-space: nowrap; overflow: hidden; } .game-marquee > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-marquee::before, .game-marquee::after { height: 1px; background-size: 14px 100%; } } /* ═══════════════════════════════════════════════════════════════════════ 23. CABINET SIDE-BEZEL on the entire page body Inset shadow along the sides simulates the wood/plastic side of an arcade cabinet next to the CRT. Subtle but ties everything together. ═══════════════════════════════════════════════════════════════════════ */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9996; box-shadow: inset 8px 0 24px rgba(0, 0, 0, 0.55), inset -8px 0 24px rgba(0, 0, 0, 0.55), inset 0 -6px 18px rgba(0, 0, 0, 0.4); } @media (prefers-reduced-motion: reduce) { body::before { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 24. CONTROL-HINT CHIPS — joystick + button icons in the topbar ═══════════════════════════════════════════════════════════════════════ */ .ctrl-hint { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin-left: 6px; background: rgba(8, 12, 24, 0.85); border: 1px solid rgba(93, 224, 240, 0.32); border-radius: 3px; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 0.10em; color: rgba(216, 220, 235, 0.72); } .ctrl-hint .ctrl-icon { font-size: 12px; line-height: 1; color: #5de0f0; text-shadow: 0 0 6px rgba(93, 224, 240, 0.7); } /* ═══════════════════════════════════════════════════════════════════════ 25. PLAYER 1 READY banner — flashes briefly when entering a game ═══════════════════════════════════════════════════════════════════════ */ .p1-ready { /* Shorter, smaller, less intrusive — solo-first play UX. Was: 18px Press Start 2P at top 12%, 2.4s dwell, 4 blinks. Now: 12px at top 6px, 1.1s dwell, single blink. Pointer-events:none guaranteed at the JS level too. */ position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 6px 14px; background: rgba(4, 8, 18, 0.85); border: 1px solid rgba(255, 208, 96, 0.65); border-radius: 3px; font-family: "Press Start 2P", monospace; font-size: 11px; letter-spacing: 0.16em; color: #ffd060; text-shadow: 0 0 6px rgba(255, 208, 96, 0.75); box-shadow: 0 0 14px rgba(255, 208, 96, 0.35); animation: p1Out 300ms 800ms ease-out forwards; pointer-events: none; } @keyframes p1Out { to { opacity: 0; transform: translateX(-50%) translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .p1-ready { animation: p1Out 200ms 500ms ease-out forwards; } } /* ═══════════════════════════════════════════════════════════════════════ 26. HIGH SCORE pulse — applied by arcade-cabinet-fx.js when a score element's numeric value increases. 350 ms quick flash. ═══════════════════════════════════════════════════════════════════════ */ .score-pulse { animation: scorePulse 350ms ease-out; text-shadow: 0 0 12px rgba(255, 208, 96, 0.95), 0 0 4px #fff !important; color: #ffd060 !important; } @keyframes scorePulse { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: scale(1); filter: brightness(1); } } @media (prefers-reduced-motion: reduce) { .score-pulse { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ 27. SCORE POPS — "+10" arcade coin labels that float up from the score element whenever it ticks. Spawned by arcade-cabinet-fx.js. ═══════════════════════════════════════════════════════════════════════ */ .score-pop { position: fixed; transform: translate(-50%, 0); z-index: 9997; font-family: "Press Start 2P", monospace; font-size: 14px; letter-spacing: 0.10em; color: #ffd060; text-shadow: 0 0 8px rgba(255, 208, 96, 0.95), 0 2px 0 #000; pointer-events: none; animation: scorePop 1.05s ease-out forwards; } @keyframes scorePop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.18); } 40% { opacity: 1; transform: translate(-50%, -22px) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -58px) scale(0.92); } } @media (prefers-reduced-motion: reduce) { .score-pop { animation: none; display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 28. GAME OVER STINGER — full-screen overlay with arcade GAME OVER text + 9 → 0 CONTINUE countdown. Spawned by arcade-cabinet-fx.js when any of the configured end-screen selectors becomes visible. ═══════════════════════════════════════════════════════════════════════ */ .cabinet-gameover-stinger { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.86) 75%); cursor: pointer; pointer-events: auto; animation: cgoIn 0.35s ease-out; text-align: center; padding: 24px; } .cabinet-gameover-stinger .cgo-line { font-family: "Press Start 2P", monospace; letter-spacing: 0.18em; } .cabinet-gameover-stinger .cgo-headline { font-size: clamp(34px, 10vw, 88px); color: #ff3858; text-shadow: 0 0 12px rgba(255, 56, 88, 0.85), 0 0 32px rgba(255, 56, 88, 0.45), 0 4px 0 #000; animation: cgoBlink 0.6s steps(2, end) 6; } .cabinet-gameover-stinger .cgo-sub { font-size: clamp(14px, 3vw, 22px); color: #ffd060; text-shadow: 0 0 8px rgba(255, 208, 96, 0.85), 0 2px 0 #000; } .cabinet-gameover-stinger .cgo-count { display: inline-block; min-width: 1.4em; padding: 2px 10px; background: #11151f; border: 2px solid #ffd060; border-radius: 4px; color: #ff3858; text-shadow: 0 0 8px rgba(255, 56, 88, 0.9); } .cabinet-gameover-stinger.cgo-out { animation: cgoOut 0.32s ease-out forwards; } @keyframes cgoIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1.00); } } @keyframes cgoOut { from { opacity: 1; } to { opacity: 0; transform: scale(1.02); } } @keyframes cgoBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .cabinet-gameover-stinger { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 29. CABINET STATUS RIBBON — bottom-edge strip with POWER · CREDITS · 1P · v6.7. Mounted by arcade-cabinet-fx.js on every game page. ═══════════════════════════════════════════════════════════════════════ */ .cabinet-status-ribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 38px); padding: 5px 14px 6px; background: linear-gradient(180deg, #060810 0%, #11151f 100%); border-top: 2px solid rgba(93, 224, 240, 0.45); box-shadow: 0 -4px 14px rgba(0,0,0,0.55); font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(216, 220, 235, 0.78); pointer-events: none; } .cabinet-status-ribbon .csr-cell { display: inline-flex; align-items: center; gap: 6px; } .cabinet-status-ribbon .csr-power { color: #34ff7f; } .cabinet-status-ribbon .csr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34ff7f; box-shadow: 0 0 6px rgba(52, 255, 127, 0.9), 0 0 12px rgba(52, 255, 127, 0.55); animation: csrPower 1.6s ease-in-out infinite; } .cabinet-status-ribbon .csr-val { color: #ffd060; } .cabinet-status-ribbon .csr-player { color: #5de0f0; text-shadow: 0 0 6px rgba(93, 224, 240, 0.7); animation: csrPlayer 0.9s ease-in-out infinite alternate; } .cabinet-status-ribbon .csr-version { margin-left: auto; color: rgba(216, 220, 235, 0.45); letter-spacing: 0.14em; } @keyframes csrPower { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.85); } } @keyframes csrPlayer { from { opacity: 0.7; } to { opacity: 1; text-shadow: 0 0 10px rgba(93, 224, 240, 0.95); } } @media (prefers-reduced-motion: reduce) { .cabinet-status-ribbon .csr-dot, .cabinet-status-ribbon .csr-player { animation: none; } } @media (max-width: 520px) { /* Hide the cabinet status ribbon on mobile portrait — it was overlapping the bottom of the canvas AND the touch-control row by 30-60 px, making it impossible to see the player/D-pad. Desktop still shows the full decorative ribbon. */ .cabinet-status-ribbon { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 30. ATTRACT-MODE CAROUSEL — hub-only featured-game showcase strip that auto-cycles. Sits above the hero. Built dynamically by the hub's inline carousel script (added in index.html). ═══════════════════════════════════════════════════════════════════════ */ .attract-carousel { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px auto 0; max-width: 980px; padding: 10px 18px; background: linear-gradient(180deg, rgba(8,12,24,0.92) 0%, rgba(4,8,18,0.96) 100%); border: 2px solid rgba(255, 208, 96, 0.50); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 0 18px rgba(255, 208, 96, 0.10); font-family: "Press Start 2P", monospace; overflow: hidden; } .attract-carousel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px); mix-blend-mode: overlay; } .attract-carousel .ac-label { font-size: 9px; letter-spacing: 0.22em; color: #ffd060; text-shadow: 0 0 6px rgba(255, 208, 96, 0.7); white-space: nowrap; flex: 0 0 auto; } .attract-carousel .ac-arrow { display: inline-block; font-family: "Press Start 2P", monospace; font-size: 14px; color: #5de0f0; text-shadow: 0 0 6px rgba(93, 224, 240, 0.85); animation: acArrow 0.7s ease-in-out infinite alternate; } .attract-carousel .ac-title { flex: 1 1 auto; font-size: clamp(11px, 1.6vw, 16px); letter-spacing: 0.12em; color: #ffffff; text-transform: uppercase; text-shadow: 0 0 6px rgba(255,255,255,0.4), 0 2px 0 #000; text-align: center; transition: opacity 220ms ease-out, transform 220ms ease-out; } .attract-carousel .ac-title.ac-fade { opacity: 0; transform: translateY(6px); } .attract-carousel .ac-credits { font-size: 8px; letter-spacing: 0.18em; color: rgba(255, 208, 96, 0.78); white-space: nowrap; flex: 0 0 auto; } @keyframes acArrow { from { transform: translateX(-2px); } to { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .attract-carousel .ac-arrow { animation: none; } .attract-carousel .ac-title { transition: none; } } @media (max-width: 600px) { .attract-carousel { gap: 10px; padding: 8px 12px; margin: 8px 12px 0; } .attract-carousel .ac-label, .attract-carousel .ac-credits { font-size: 7px; } .attract-carousel .ac-credits { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 31. COIN SHOWER — pixel coins drop from the top of the screen and bounce/spin as the CRT boot fades. Spawned by arcade-cabinet-fx.js. ═══════════════════════════════════════════════════════════════════════ */ .coin-shower { position: fixed; inset: 0; pointer-events: none; z-index: 9994; overflow: hidden; } .coin-shower .coin { position: absolute; top: -32px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe680 0%, #ffd060 35%, #c98a18 60%, #6b4a07 100%); box-shadow: 0 0 6px rgba(255, 208, 96, 0.85), inset -2px -3px 0 rgba(0,0,0,0.30), inset 2px 2px 0 rgba(255,255,255,0.50); animation: coinDrop 1.6s cubic-bezier(.35,.05,.45,1.0) forwards; } .coin-shower .coin::before { content: "$"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Press Start 2P", monospace; font-size: 10px; color: #5a3a05; text-shadow: 0 1px 0 rgba(255, 230, 128, 0.6); } @keyframes coinDrop { 0% { top: -32px; transform: rotateY(0deg) scale(0.7); opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; } 80% { top: 86vh; transform: rotateY(1080deg) scale(1.05); } 100% { top: 78vh; transform: rotateY(1440deg) scale(1.0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .coin-shower { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 32. JOYSTICK + BUTTONS chips — pixel-art control hint cluster mounted in the topbar on every game page by arcade-cabinet-fx.js. ═══════════════════════════════════════════════════════════════════════ */ .cabinet-controls-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px; margin-left: 6px; background: rgba(8, 12, 24, 0.86); border: 1px solid rgba(93, 224, 240, 0.32); border-radius: 4px; pointer-events: none; user-select: none; vertical-align: middle; } .cabinet-controls-chip .ccc-stick { position: relative; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6a8a 0%, #ff3858 60%, #8a1428 100%); box-shadow: 0 0 6px rgba(255, 56, 88, 0.6), inset -2px -3px 0 rgba(0,0,0,0.35); } .cabinet-controls-chip .ccc-stick::before { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 4px; height: 8px; background: #11151f; border-radius: 0 0 2px 2px; } .cabinet-controls-chip .ccc-btns { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; } .cabinet-controls-chip .ccc-btn { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.5), inset -1px -1px 0 rgba(0,0,0,0.30); } .cabinet-controls-chip .ccc-btn.cccb-a { background: #ff3858; } .cabinet-controls-chip .ccc-btn.cccb-b { background: #34ff7f; } .cabinet-controls-chip .ccc-btn.cccb-c { background: #5de0f0; } .cabinet-controls-chip .ccc-btn.cccb-d { background: #ffd060; } @media (max-width: 520px) { .cabinet-controls-chip { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 33. CRT SCANLINE DIAL — small range slider in the topnav lets users dial scanline intensity 0–100%. Sets --crt-scan-intensity via JS. Defaults to 100%. Persists to localStorage. ═══════════════════════════════════════════════════════════════════════ */ .crt-dial { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 9px; background: rgba(8, 12, 24, 0.85); border: 1px solid rgba(93, 224, 240, 0.30); border-radius: 4px; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 0.12em; color: rgba(216, 220, 235, 0.78); text-transform: uppercase; } .crt-dial label { color: rgba(255, 208, 96, 0.85); } .crt-dial input[type="range"] { appearance: none; -webkit-appearance: none; width: 64px; height: 4px; background: linear-gradient(90deg, #5de0f0 var(--crt-dial-pos, 100%), rgba(255,255,255,0.12) var(--crt-dial-pos, 100%)); border-radius: 2px; outline: none; } .crt-dial input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; background: #ffd060; border-radius: 50%; box-shadow: 0 0 6px rgba(255, 208, 96, 0.95); cursor: pointer; } .crt-dial input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: #ffd060; border-radius: 50%; border: none; box-shadow: 0 0 6px rgba(255, 208, 96, 0.95); cursor: pointer; } .crt-dial .crt-dial-val { color: #5de0f0; min-width: 28px; text-align: right; } @media (max-width: 720px) { .crt-dial { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ 34. Scanline intensity variable hook — multiplies the scanline overlay's opacity (defined in section 4 as 0.5) by var(--crt-scan- intensity) so the dial bites. Default 1.0 = full 0.5 opacity scanlines. ═══════════════════════════════════════════════════════════════════════ */ :root { --crt-scan-intensity: 1; } @media (prefers-reduced-motion: no-preference) { body::after { opacity: calc(0.5 * var(--crt-scan-intensity)); } } /* ═══════════════════════════════════════════════════════════════════════ 35. CABINET-MENU FOLDER TILES — Jon: "lean in to the 89 game cabinet UI, containers and folders neatly organized like an arcade menu." Four big folder-shaped tiles in the hero. Each has a tab on top (like a folder), a chunky pixel-bezel border, an emoji icon, a pixel-font label, and a small meta line. Hover glows the border; active shows the press-down state. ═══════════════════════════════════════════════════════════════════════ */ .cabinet-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); margin: clamp(24px, 4vh, 40px) 0 0; max-width: 720px; } @media (max-width: 700px) { .cabinet-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } } .cabinet-folder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 14px 14px; background: linear-gradient(180deg, #14182a 0%, #060810 100%); border: 2px solid rgba(245, 196, 81, 0.55); border-radius: 8px; cursor: pointer; min-height: 130px; color: #f0f5ff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -2px 0 rgba(0, 0, 0, 0.55); transition: transform 120ms ease-out, box-shadow 160ms, border-color 160ms; } .cabinet-folder:hover, .cabinet-folder:focus-visible { transform: translateY(-2px); border-color: #ffd060; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.50), 0 14px 32px rgba(245, 196, 81, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 208, 96, 0.30); outline: none; } .cabinet-folder:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.55); } /* Folder TAB — the little flap on top that says "this is a folder" */ .cabinet-folder .cf-tab { position: absolute; top: -12px; left: 14px; width: 50px; height: 14px; background: linear-gradient(180deg, #1c2138 0%, #0a0d18 100%); border: 2px solid rgba(245, 196, 81, 0.55); border-bottom: 0; border-radius: 4px 4px 0 0; transition: border-color 160ms; } .cabinet-folder:hover .cf-tab, .cabinet-folder:focus-visible .cf-tab { border-color: #ffd060; } .cabinet-folder .cf-icon { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .cabinet-folder .cf-label { font-family: var(--font-pixel) !important; font-size: 12px !important; letter-spacing: 0.06em !important; color: #ffd060 !important; text-shadow: 0 0 8px rgba(255, 208, 96, 0.45), 0 2px 0 #000 !important; text-transform: uppercase !important; font-style: normal !important; } .cabinet-folder .cf-meta { font-family: "JetBrains Mono", monospace !important; font-size: 9px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: rgba(216, 220, 235, 0.55) !important; font-weight: 600 !important; } .cabinet-folder.is-open { border-color: #5de0f0; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.50), 0 14px 28px rgba(93, 224, 240, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.55), 0 0 20px rgba(93, 224, 240, 0.35); } .cabinet-folder.is-open .cf-tab { border-color: #5de0f0; } .cabinet-folder.is-open .cf-label { color: #5de0f0 !important; text-shadow: 0 0 8px rgba(93, 224, 240, 0.5) !important; } /* ═══════════════════════════════════════════════════════════════════════ 36. HIDE ALL CONTENT BANDS BY DEFAULT — folder click reveals them. This is what makes the hub feel like an arcade menu instead of an endless scroll. JS adds `.section-open` to a band when its matching folder is clicked. Hero (and #launch-paths, the old "Choose your path" trio) stay always-visible. ═══════════════════════════════════════════════════════════════════════ */ main#main > #jeopardy, main#main > #practice, main#main > #featured, main#main > #library, main#main > #daily { display: none !important; } main#main > #jeopardy.section-open, main#main > #practice.section-open, main#main > #featured.section-open, main#main > #library.section-open, main#main > #daily.section-open { display: block !important; } /* Also force the previously hidden #launch-paths to stay hidden — the new cabinet menu replaces it as the primary navigation. */ main#main > #launch-paths { display: none !important; } /* Back-to-Menu link injected into each opened section */ .back-to-menu { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; background: rgba(93, 224, 240, 0.10); border: 1px solid rgba(93, 224, 240, 0.40); border-radius: 6px; color: #5de0f0; font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .back-to-menu:hover, .back-to-menu:focus-visible { background: rgba(93, 224, 240, 0.20); border-color: #5de0f0; outline: none; } /* The hero-console aside ("Now Playing" card + 4 fast-launch tiles) duplicates what the cabinet folder menu now opens. Hide it on the home page for the clean 1989-cabinet look. JS that populates it can keep running silently. */ .hero-console { display: none !important; } /* Center the hero copy now that the right-side console is gone */ .hero-inner { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; } .hero-copy { text-align: left; } @media (min-width: 880px) { .hero-copy { text-align: center; } .cabinet-menu { margin-left: auto; margin-right: auto; } } /* ═══════════════════════════════════════════════════════════════════════ 37. CABINET-MENU v2 — easier to navigate / more arcade-like - Hide attract-carousel from hub (competes with folders for attention) - Bigger folder tiles so they dominate the page - Keyboard cursor: arrow keys move the highlight; pulsing focus ring - Press-Start nudge: blinks below the folders inviting interaction - Hover/focus state more visible: gold edge gets a "running lights" animation matching the cabinet marquee aesthetic ═══════════════════════════════════════════════════════════════════════ */ /* Remove the attract carousel from the home hub — students are landing on a CABINET MENU, not a featured-game showcase. (#attractCarousel stays in the DOM for other future surfaces.) */ body:not([data-game-page]) #attractCarousel { display: none !important; } /* BIGGER folders — make them the unmistakable focal point. */ .cabinet-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); max-width: 880px; margin-top: clamp(20px, 3vh, 32px); } @media (max-width: 700px) { .cabinet-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .cabinet-folder { min-height: clamp(150px, 22vh, 200px); padding: clamp(28px, 4vw, 36px) 16px 18px; gap: 10px; } .cabinet-folder .cf-icon { font-size: clamp(36px, 5vw, 48px); } .cabinet-folder .cf-label { font-size: clamp(13px, 1.6vw, 16px) !important; } .cabinet-folder .cf-meta { font-size: clamp(9px, 1.05vw, 10px) !important; } .cabinet-folder .cf-tab { top: -14px; width: 60px; height: 16px; } /* RUNNING-LIGHTS edge on hover / focus — like the marquee */ .cabinet-folder::after { content: ""; position: absolute; inset: -2px; border-radius: 9px; pointer-events: none; background: linear-gradient(90deg, #ffd060 50%, transparent 50%) top / 14px 2px repeat-x, linear-gradient(90deg, #ffd060 50%, transparent 50%) bottom / 14px 2px repeat-x, linear-gradient(0deg, #ffd060 50%, transparent 50%) left / 2px 14px repeat-y, linear-gradient(0deg, #ffd060 50%, transparent 50%) right / 2px 14px repeat-y; background-color: transparent; opacity: 0; transition: opacity 200ms; } .cabinet-folder:hover::after, .cabinet-folder:focus-visible::after, .cabinet-folder.is-cursor::after { opacity: 0.85; animation: cabinetEdgeChase 1.6s linear infinite; } @keyframes cabinetEdgeChase { to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; } } @media (prefers-reduced-motion: reduce) { .cabinet-folder::after { animation: none !important; } } /* Keyboard cursor — the folder that has .is-cursor gets a cyan glow indicating it's the keyboard-highlighted choice. Press Enter to open. */ .cabinet-folder.is-cursor { border-color: #5de0f0; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.50), 0 14px 32px rgba(93, 224, 240, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(93, 224, 240, 0.35); } .cabinet-folder.is-cursor .cf-tab { border-color: #5de0f0; } /* PRESS START blinking nudge below the menu */ .cabinet-press-start { display: block; margin: clamp(16px, 2.5vh, 28px) auto 0; text-align: center; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.22em; color: rgba(255, 208, 96, 0.85); text-shadow: 0 0 8px rgba(255, 208, 96, 0.55); animation: cabinetBlink 1.4s steps(2, end) infinite; pointer-events: none; } @keyframes cabinetBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .cabinet-press-start { animation: none; opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════ 38. DRILL YOUR MISSES — surfaces only when wrong-answer queue has due cards. Sits below the cabinet menu folders, above the PRESS START hint. Distinctive red/orange treatment so it reads as "personal action" rather than generic navigation. ═══════════════════════════════════════════════════════════════════════ */ .drill-misses-card { display: flex; align-items: center; gap: 14px; max-width: 880px; margin: clamp(18px, 2.5vh, 28px) auto 0; padding: 14px 20px; background: linear-gradient(135deg, rgba(255, 56, 88, 0.10) 0%, rgba(255, 138, 56, 0.06) 100%); border: 2px solid rgba(255, 138, 56, 0.55); border-radius: 10px; color: #ffd884; text-decoration: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 20px rgba(255, 56, 88, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.10); position: relative; overflow: hidden; transition: transform 160ms, box-shadow 160ms, border-color 160ms; cursor: pointer; } .drill-misses-card[hidden] { display: none !important; } .drill-misses-card:hover, .drill-misses-card:focus-visible { transform: translateY(-2px); border-color: #ff8a38; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.50), 0 14px 32px rgba(255, 138, 56, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 22px rgba(255, 138, 56, 0.35); outline: none; } .drill-misses-card .dm-glow { position: absolute; inset: 0; background: radial-gradient(circle at 12% 50%, rgba(255, 138, 56, 0.18) 0%, transparent 60%); animation: dmGlow 2.4s ease-in-out infinite; pointer-events: none; } @keyframes dmGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } .drill-misses-card .dm-icon { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); flex: 0 0 auto; } .drill-misses-card .dm-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; } .drill-misses-card .dm-title { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.06em; color: #ff8a38; text-shadow: 0 0 8px rgba(255, 138, 56, 0.55), 0 2px 0 #000; } .drill-misses-card .dm-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 216, 132, 0.78); } .drill-misses-card .dm-sub #dmCount { color: #ffd060; font-weight: 800; } .drill-misses-card .dm-arrow { font-size: 18px; color: #ff8a38; flex: 0 0 auto; animation: dmArrow 1.2s ease-in-out infinite alternate; } @keyframes dmArrow { to { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .drill-misses-card .dm-glow, .drill-misses-card .dm-arrow { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ 39. STANDARDS CHIP — appears on every game card. Tells teachers at a glance which exam this game supports. ═══════════════════════════════════════════════════════════════════════ */ .std-chip { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 7px; background: rgba(93, 224, 240, 0.10); border: 1px solid rgba(93, 224, 240, 0.45); border-radius: 3px; font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 800; letter-spacing: 0.10em; color: #5de0f0; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); pointer-events: none; } /* Color-code by exam family */ .focus-card .std-chip, .path-card .std-chip, .game-card .std-chip { /* default cyan = covered above */ } .focus-card[data-id*="ap-"] .std-chip, .game-card[data-id*="ap-"] .std-chip { background: rgba(255, 138, 56, 0.10); border-color: rgba(255, 138, 56, 0.55); color: #ff8a38; } @media (max-width: 540px) { .std-chip { font-size: 7.5px; padding: 2px 5px; top: 8px; right: 8px; } } /* ═══════════════════════════════════════════════════════════════════════ 40. GAME-PAGE TOAST SUPPRESSION — May 11 2026 On hub pages, achievement/SR toasts at top-right are fine (no UI collision). On game pages they sit on top of the HUD (lives, score, era) at the top, on the powerup tray at the bottom, or on the canvas in the middle — there is literally no safe position during gameplay on a portrait phone. Jon flagged this on atlas-2048: "banner of items sort of on the board and in the way." Solution: hide the toast container entirely on game pages. The achievements still persist to the profile via window.MrMacsProfile, so players see them when they return to the hub. No data is lost, only the in-game blocking visual. We allow critical "error" tone toasts to still appear (e.g. if a game-level integration error fires) since those signal something the player must know about. ═══════════════════════════════════════════════════════════════════════ */ body[data-game-page] .arcade-toast-container { pointer-events: none !important; } body[data-game-page] .arcade-toast { display: none !important; } body[data-game-page] .arcade-toast[data-tone="error"], body[data-game-page] .arcade-toast[data-tone="warn"] { display: flex !important; /* Bottom-corner anchor so even error toasts don't block the HUD or board. */ position: fixed !important; bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important; right: 12px !important; left: auto !important; top: auto !important; transform: none !important; max-width: 260px !important; z-index: 9500 !important; } /* =========================================================================== 41. CANONICAL ARCADE TYPOGRAPHY — May 11 2026 (v21 visual overhaul) =========================================================================== Jon: "i also noticed a different font in some of the games. it breaks the arcade feel. should all be same arcade font." The audit found 55 per-game styles.css files declaring non-arcade fonts: Fraunces, Inter, JetBrains Mono, Rajdhani, Bungee, Cormorant. The arcade identity demands ONLY two faces: - "Press Start 2P" → titles, brand, marquee, headlines, h1/h2/h3 - "VT323" → HUD numerics, body, descriptive prose, mono This section enforces that palette by overriding every per-game declaration with !important. Loaded last (see order in each game/index.html), it wins specificity ties. The body[data-game-page] qualifier matches the root
on every game (hub is left untouched here since it has its own typography baseline earlier in this stylesheet). We also strip excessive visual layers on mobile (Jon: "visual layering looks amateur — too many fonts/effects fighting on mobile") by hiding scanlines, the CRT boot sequence inside games, and dimming the marquee chase-lights. =========================================================================== */ /* ---- 41a. Universal body/html font baseline inside games -------------- */ body[data-game-page], body[data-game-page] html, body[data-game-page] main, body[data-game-page] section, body[data-game-page] article, body[data-game-page] aside, body[data-game-page] header, body[data-game-page] footer, body[data-game-page] nav, body[data-game-page] div, body[data-game-page] p, body[data-game-page] span, body[data-game-page] li, body[data-game-page] dd, body[data-game-page] dt, body[data-game-page] td, body[data-game-page] th, body[data-game-page] label, body[data-game-page] button, body[data-game-page] input, body[data-game-page] select, body[data-game-page] textarea, body[data-game-page] a { font-family: 'VT323', 'Press Start 2P', ui-monospace, monospace !important; letter-spacing: 0 !important; } /* ---- 41b. Display/title surfaces → Press Start 2P --------------------- */ body[data-game-page] h1, body[data-game-page] h2, body[data-game-page] h3, body[data-game-page] h4, body[data-game-page] .brand-title, body[data-game-page] .brand-prefix, body[data-game-page] .brand-suffix, body[data-game-page] .brand-text strong, body[data-game-page] .marquee, body[data-game-page] .marquee-text, body[data-game-page] .game-marquee, body[data-game-page] .game-marquee span, body[data-game-page] .setup-card h1, body[data-game-page] .setup-card h2, body[data-game-page] .question-card h1, body[data-game-page] .question-card h2, body[data-game-page] .help-card h1, body[data-game-page] .help-card h2, body[data-game-page] .end-card h1, body[data-game-page] .end-card h2, body[data-game-page] .wave-name, body[data-game-page] .popup-text, body[data-game-page] .crt-boot-line-1, body[data-game-page] .crt-boot-brand, body[data-game-page] [class*="display"], body[data-game-page] [class*="-display"], body[data-game-page] [class*="headline"], body[data-game-page] [class*="-headline"], body[data-game-page] [class*="title"]:not(.brand-text):not(.subtitle), body[data-game-page] [class*="-title"] { font-family: 'Press Start 2P', ui-monospace, monospace !important; letter-spacing: 0.02em !important; } /* ---- 41c. Numerics / HUDs / mono / badges → VT323 --------------------- */ body[data-game-page] .hud-stats, body[data-game-page] .hud-stats *, body[data-game-page] .stat-value, body[data-game-page] .stat-label, body[data-game-page] .stat-cell, body[data-game-page] .stat-cell *, body[data-game-page] .hud-meta, body[data-game-page] .hud-meta *, body[data-game-page] .badge-value, body[data-game-page] .mono, body[data-game-page] kbd, body[data-game-page] code, body[data-game-page] pre, body[data-game-page] samp, body[data-game-page] tt, body[data-game-page] [class*="numeric"], body[data-game-page] [class*="-numeric"], body[data-game-page] [class*="counter"], body[data-game-page] [class*="-counter"], body[data-game-page] [class*="score"], body[data-game-page] [class*="-score"], body[data-game-page] [class*="timer"], body[data-game-page] [class*="-timer"], body[data-game-page] [class*="hud"], body[data-game-page] [class*="-hud"], body[data-game-page] [class*="meta"]:not([class*="meter"]), body[data-game-page] [class*="-meta"]:not([class*="-meter"]) { font-family: 'VT323', ui-monospace, monospace !important; letter-spacing: 0 !important; } /* ---- 41d. Body / explanatory prose → VT323 ---------------------------- */ body[data-game-page] .setup-sub, body[data-game-page] .setup-sub *, body[data-game-page] .key-hints, body[data-game-page] .key-hints *, body[data-game-page] .end-grid, body[data-game-page] .end-grid *, body[data-game-page] .end-cell, body[data-game-page] .end-cell *, body[data-game-page] .help-card p, body[data-game-page] .help-card h3, body[data-game-page] .help-card li, body[data-game-page] .question-text, body[data-game-page] .answer-text, body[data-game-page] .choice-text, body[data-game-page] .brand-sub, body[data-game-page] .wave-meta, body[data-game-page] .ribbon, body[data-game-page] .ribbon *, body[data-game-page] [class*="body"], body[data-game-page] [class*="-body"], body[data-game-page] [class*="copy"], body[data-game-page] [class*="-copy"], body[data-game-page] [class*="prose"], body[data-game-page] [class*="-prose"], body[data-game-page] [class*="text"]:not([class*="textarea"]):not([class*="text-area"]) { font-family: 'VT323', ui-monospace, monospace !important; } /* ---- 41e. Force-kill explicit non-arcade font declarations ------------ These selectors target the *literal* declarations the per-game styles.css files made. Most cascade is handled by 41a–41d, but a couple of games use exotic class names (`.game-headline`, `.score-flash`, etc.) that we pre-empt here. Combined with !important at the parent-attribute level, anything inside that tried to set Fraunces/Inter/ Rajdhani/Bungee/Cormorant will be neutralized. --------------------------------------------------------------------- */ body[data-game-page] :where(*) { /* Default fallback inside every descendant — Press Start 2P or VT323 only. `:where()` keeps specificity 0 so the more specific rules above still win. This catches anything we didn't enumerate. */ font-family: 'VT323', 'Press Start 2P', ui-monospace, monospace; } /* Belt-and-suspenders: any element whose inline or computed font ended up as one of the banned families gets a hard reset. We use attribute-style targeting via class name patterns the offending stylesheets commonly use. */ body[data-game-page] [style*="Fraunces"], body[data-game-page] [style*="Inter,"], body[data-game-page] [style*="Inter "], body[data-game-page] [style*="'Inter'"], body[data-game-page] [style*="Rajdhani"], body[data-game-page] [style*="Bungee"], body[data-game-page] [style*="Cormorant"], body[data-game-page] [style*="JetBrains"] { font-family: 'VT323', ui-monospace, monospace !important; } /* Buttons sometimes inherit Inter via per-game --font-ui custom property. Clobber the variable inside game pages so anything referencing it falls back into the arcade stack. */ body[data-game-page] { --font-ui: 'VT323', ui-monospace, monospace !important; --font-display: 'Press Start 2P', ui-monospace, monospace !important; --font-mono: 'VT323', ui-monospace, monospace !important; --font-serif: 'Press Start 2P', ui-monospace, monospace !important; --font-body: 'VT323', ui-monospace, monospace !important; } /* ---- 41f. Visual-layer strip on mobile ------------------------------- */ @media (max-width: 600px) { /* Scanlines kill contrast on phones — Jon flagged this. */ body[data-game-page] .scanline-overlay, body[data-game-page] [data-scanline-overlay], body[data-game-page] .crt-scanlines { display: none !important; } /* Marquee chase-lights — dim and slow on phones (kept visible since it's part of the arcade brand but the strobe was too aggressive). */ body[data-game-page] .game-marquee { animation-duration: 8s !important; opacity: 0.85 !important; filter: saturate(0.7) brightness(0.9) !important; } body[data-game-page] .game-marquee::before, body[data-game-page] .game-marquee::after { animation-duration: 6s !important; opacity: 0.6 !important; } /* Coin-shower / pixel-coin particle density reduction on mobile. */ body[data-game-page] .coin-shower .pixel-coin:nth-child(even), body .coin-shower .pixel-coin:nth-child(3n), body[data-game-page] [data-coin-pop]:nth-child(even) { display: none !important; } /* Cabinet "+NN" coin-pop labels — fade faster, smaller on phone. */ body[data-game-page] .coin-pop-label, body[data-game-page] [data-coin-pop] { font-size: 0.85em !important; animation-duration: 0.8s !important; } } /* ---- 41g. CRT boot stays on hub, gone inside games ------------------- */ /* The boot sequence is great as an attract sequence on the hub but inside a game it wastes 1–2s before the player can play. Hide it. */ body[data-game-page] .crt-boot, body[data-game-page] [data-crt-boot], body[data-game-page] .crt-boot-screen { display: none !important; } /* ---- 41h. Letter-spacing repair ------------------------------------- */ /* Press Start 2P at small sizes with wide letter-spacing (some games set 0.1em+) becomes unreadable. Tighten globally — VT323 also benefits from 0 letter-spacing (it's CRT-mono). */ body[data-game-page] .stat-value, body[data-game-page] .hud-stats *, body[data-game-page] .brand-title, body[data-game-page] .marquee, body[data-game-page] .game-marquee span { letter-spacing: 0.01em !important; } body[data-game-page] h1, body[data-game-page] h2 { letter-spacing: 0.02em !important; } /* End Section 41 — Canonical Arcade Typography */ /* ═══════════════════════════════════════════════════════════════════════ 42. HUB RESTRUCTURE — FEATURED 10 + MORE GAMES DRAWER — May 11 2026 ═══════════════════════════════════════════════════════════════════════ Jon: "the hub is too cluttered. surface the 10 best games up front, bury the rest." Featured 10 grid sits at the very top of #main with bigger-than-library cards. The library + cabinet menu folders move inside a closed