/* ============================================================= RETRO-VISION ARCADE · shared CRT chrome & typography ============================================================= */ *, *::before, *::after { box-sizing: border-box; } :root { --phos-rgb: 77, 255, 155; --screen-bg: #050a07; --ink: #dcffec; --danger: #ff5470; --font: "Courier New", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; --bezel-1: #2a2f35; --bezel-2: #101317; } /* per-machine phosphor colours ------------------------------- */ body.theme-amber { --phos-rgb: 255, 186, 74; --screen-bg: #0b0703; --ink: #fff2da; } body.theme-cyan { --phos-rgb: 94, 226, 255; --screen-bg: #03090c; --ink: #ddf8ff; } body.theme-magenta { --phos-rgb: 255, 106, 213; --screen-bg: #0a040a; --ink: #ffe0f7; } html { height: 100%; } body { /* Derived on , not :root — a custom property is substituted where it is declared, so deriving these at :root would freeze them to the default phosphor and the .theme-* overrides below would never take effect. */ --phosphor: rgb(var(--phos-rgb)); --phos-soft: rgba(var(--phos-rgb), .55); --phos-faint: rgba(var(--phos-rgb), .14); min-height: 100%; margin: 0; padding: clamp(10px, 2vw, 26px); display: flex; align-items: center; justify-content: center; font-family: var(--font); color: var(--phosphor); background: radial-gradient(ellipse 130% 90% at 50% 40%, #0d1621 0%, #05080e 55%, #000 100%); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* film grain over the whole room ----------------------------- */ body::after { content: ""; position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .7s steps(3) infinite; } @keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } } /* ----------------------------- the cabinet ------------------ */ .crt { position: relative; width: min(1100px, 100%); padding: clamp(14px, 2.2vw, 26px); padding-bottom: clamp(30px, 4vw, 46px); border-radius: 26px; background: linear-gradient(155deg, var(--bezel-1) 0%, var(--bezel-2) 45%, #1a1e23 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 6px rgba(0, 0, 0, .8), 0 26px 70px rgba(0, 0, 0, .85), 0 0 100px rgba(var(--phos-rgb), .10); } .screen { position: relative; isolation: isolate; border-radius: 20px / 15px; padding: clamp(16px, 2.6vw, 32px); background: radial-gradient(ellipse 90% 70% at 50% 42%, rgba(var(--phos-rgb), .09), transparent 65%), var(--screen-bg); box-shadow: inset 0 0 70px rgba(0, 0, 0, .95), inset 0 0 22px rgba(var(--phos-rgb), .10), 0 0 0 2px #000, 0 0 0 3px rgba(255, 255, 255, .05); overflow: hidden; } /* screen overlays -------------------------------------------- */ .scanlines, .roll, .vignette { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 6; } .scanlines { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .32) 3px, rgba(0, 0, 0, .32) 4px); mix-blend-mode: multiply; } .roll { background: linear-gradient( to bottom, transparent 0%, rgba(var(--phos-rgb), .05) 45%, rgba(255, 255, 255, .06) 50%, rgba(var(--phos-rgb), .05) 55%, transparent 100%); height: 22%; inset: auto 0 0 0; animation: roll 7s linear infinite; } @keyframes roll { 0% { transform: translateY(-460%); } 100% { transform: translateY(120%); } } .vignette { background: radial-gradient(ellipse 62% 52% at 50% 8%, rgba(255, 255, 255, .07), transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, .55) 88%, rgba(0, 0, 0, .85) 100%); animation: flicker 5.5s infinite steps(1); } @keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .88; } 98% { opacity: 1; } 99% { opacity: .93; } } .content { position: relative; z-index: 2; } /* bezel furniture -------------------------------------------- */ .bezel-label { position: absolute; left: 0; right: 0; bottom: clamp(8px, 1.2vw, 14px); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: clamp(8px, 1vw, 10px); letter-spacing: .34em; color: #6b7580; text-transform: uppercase; user-select: none; } .led { width: 7px; height: 7px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor), 0 0 14px rgba(var(--phos-rgb), .8); animation: led-pulse 3.2s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* ----------------------------- type ------------------------- */ .glow { text-shadow: 0 0 5px rgba(var(--phos-rgb), .9), 0 0 16px rgba(var(--phos-rgb), .45); } .glow-hard { text-shadow: 1px 0 0 rgba(255, 0, 90, .45), -1px 0 0 rgba(0, 190, 255, .45), 0 0 8px rgba(var(--phos-rgb), .95), 0 0 26px rgba(var(--phos-rgb), .55); } .blink { animation: blink 1.05s steps(1) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } } /* ----------------------------- controls --------------------- */ .btn { font: inherit; font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .18em; text-transform: uppercase; color: var(--phosphor); background: rgba(var(--phos-rgb), .06); border: 1px solid rgba(var(--phos-rgb), .45); border-radius: 4px; padding: 8px 14px; cursor: pointer; transition: background .12s linear, color .12s linear, box-shadow .12s linear; text-shadow: 0 0 6px rgba(var(--phos-rgb), .7); } .btn:hover, .btn:focus-visible { background: rgba(var(--phos-rgb), .2); box-shadow: 0 0 14px rgba(var(--phos-rgb), .35), inset 0 0 10px rgba(var(--phos-rgb), .2); outline: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: rgba(var(--phos-rgb), .16); border-color: var(--phosphor); } /* virtual gamepad (touch devices) ---------------------------- */ .touchpad { display: none; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .touchpad button { font: inherit; min-width: 62px; padding: 14px 16px; font-size: 15px; color: var(--phosphor); background: rgba(var(--phos-rgb), .08); border: 1px solid rgba(var(--phos-rgb), .4); border-radius: 8px; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .touchpad button.held { background: rgba(var(--phos-rgb), .3); } @media (pointer: coarse) { .touchpad { display: flex; } } /* accessibility ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body::after, .roll, .vignette, .led, .blink { animation: none !important; } .roll { opacity: 0; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }