*, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; } /* THEME VARS */ :root { --bg: #0b0f0c; --fg: #18ff6d; /* primary text */ --fg-dim: #0aff53; /* glow dim */ --ui: 24, 255, 109; /* accent RGB for borders/shadows */ --scanline: rgba(0, 0, 0, 0.17); --vignette: rgba(0, 0, 0, 0.75); --glow: 0.6; --vh: 100vh; /* mobile toolbar fix */ --padCountdown: 0.98; /* kept for compatibility; not used by JS anymore */ /* fixed font sizing (no JS scaling) */ --fontDesktop: 8vmin; --fontPortrait: 6.5vmin; } /* Flip whole theme to red at the end (on to ensure top-scope) */ html.theme-red { --fg: #ff1832; --fg-dim: #ff0a29; --ui: 255, 24, 50; } body { min-height: var(--vh); background: radial-gradient(120% 120% at 50% 50%, #0e1511 0%, #0a0e0c 60%, #000 100%), linear-gradient(180deg, #0b0f0c 0%, #000 100%); color: var(--fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0.02em; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .layer-scan { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, var(--scanline) 3px, transparent 4px); mix-blend-mode: multiply; opacity: 0.35; animation: flicker 2.6s infinite steps(60, end); } .layer-vignette { position: fixed; inset: -10vmin; pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, transparent 40%, var(--vignette) 100%); mix-blend-mode: multiply; } @keyframes flicker { 0%, 100% { opacity: 0.35 } 1% { opacity: 0.42 } 3% { opacity: 0.30 } 7% { opacity: 0.38 } 10% { opacity: 0.33 } 12% { opacity: 0.40 } 20% { opacity: 0.34 } 25% { opacity: 0.36 } 32% { opacity: 0.31 } 48% { opacity: 0.37 } 62% { opacity: 0.33 } 80% { opacity: 0.39 } } .wrap { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 3vmin; } #counter { line-height: 0.95; margin: 0; font-size: var(--fontDesktop); /* fixed size */ color: var(--fg); text-shadow: 0 0 calc(6px * var(--glow)) var(--fg), 0 0 calc(12px * var(--glow)) var(--fg-dim); /* REMOVED transform scaling entirely */ white-space: nowrap; /* single line during countdown */ user-select: none; letter-spacing: 0.03em; transition: color 160ms linear, text-shadow 180ms linear, filter 180ms linear; position: relative; } /* smaller static font on portrait to avoid edge-to-edge feel */ @media (orientation: portrait) { #counter { font-size: var(--fontPortrait); } } /* At finale we allow wrapping so “Bye Bye!” can split if needed (no scaling) */ html.theme-red #counter { white-space: normal; } /* caret (disabled at finale) */ #counter::after { content: "_"; display: inline-block; margin-left: 0.1em; opacity: 1; animation: caret 0.9s steps(1, end) infinite; } #counter.no-caret::after { content: none; } @keyframes caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } } /* glitch ghosts */ #counter.glitch::before, #counter.glitch::after { content: attr(data-text); position: absolute; inset: 0; white-space: nowrap; pointer-events: none; mix-blend-mode: screen; text-shadow: none; } #counter.glitch::before { color: #00f6ff; transform: translate(1px, -1px); clip-path: inset(0 0 45% 0); opacity: 0.6; } #counter.glitch::after { color: #ff005d; transform: translate(-1px, 1px); clip-path: inset(55% 0 0 0); opacity: 0.6; } .hud { position: fixed; inset: 2vmin; pointer-events: none; border: 1px solid rgba(var(--ui), 0.18); border-radius: 10px; box-shadow: 0 0 0 1px rgba(var(--ui), 0.06) inset; } .hud::before, .hud::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(var(--ui), 0.18); border-radius: 10px; transform: scale(0.995); } .mode-badge { position: fixed; top: 1.2rem; left: 1.4rem; font-size: 0.9rem; color: var(--fg); letter-spacing: 0.12em; opacity: 0.85; user-select: none; pointer-events: none; text-shadow: 0 0 4px rgba(var(--ui), 0.5); } .mode-btn { position: fixed; right: 1.2rem; bottom: 1.2rem; padding: .6rem .9rem; font: inherit; color: var(--fg); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(var(--ui), 0.35); border-radius: 10px; text-transform: uppercase; letter-spacing: .12em; backdrop-filter: blur(2px); box-shadow: 0 0 0 1px rgba(var(--ui), 0.08) inset, 0 0 10px rgba(var(--ui), 0.08); cursor: pointer; transition: transform .06s ease, border-color .15s linear, box-shadow .15s linear; } .mode-btn:hover { transform: translateY(-1px); border-color: rgba(var(--ui), 0.55); } .mode-btn:active { transform: translateY(0); } .mode-btn:focus-visible { outline: 2px solid rgba(var(--ui), 0.8); outline-offset: 2px; } /* intro fades */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } body.intro #counter { opacity: 0; animation: fadeIn 420ms ease-out 100ms both; } body.intro .mode-badge { opacity: 0; animation: fadeInUp 360ms ease-out 200ms both; } /* finale flash (keep if you like) */ .finale { animation: flash 800ms ease-out 1; } @keyframes flash { 0% { background-color: #eafff3; } 100% { background-color: transparent; } } /* motion a11y */ @media (prefers-reduced-motion: reduce) { .layer-scan { animation: none !important; } #counter::after { animation: none !important; } body.intro #counter, body.intro .mode-badge { animation: none !important; opacity: 1 !important; } .finale { animation: none !important; } .mode-btn { transition: none !important; } }