/* Fonts are linked from index.php's , not @import-ed here: an @import can only start downloading after this stylesheet has itself parsed, serializing the font fetch behind it. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Theme channel triplets: "R G B" (space-separated, no commas, no hex) so Tailwind's rgb(var(--x) / ) opacity syntax can consume them directly. These are the CURRENT dark palette values, unchanged from before theming existed. */ --c-fg: 255 255 255; --c-bg: 7 9 19; --c-card: 15 23 42; --c-deep: 2 6 23; --c-muted: 203 213 225; --c-inv: 0 0 0; --c-neon-pink: 255 0 127; --c-neon-cyan: 0 240 255; --c-neon-violet: 139 92 246; --c-neon-amber: 245 158 11; --c-neon-green: 16 185 129; /* Legacy hex-style vars, kept for rules below that reference them directly (e.g. border-color: var(--neon-cyan)). Wired to the channel vars above so they re-theme automatically too. */ --neon-pink: rgb(var(--c-neon-pink)); --neon-cyan: rgb(var(--c-neon-cyan)); --neon-violet: rgb(var(--c-neon-violet)); --neon-amber: rgb(var(--c-neon-amber)); --neon-green: rgb(var(--c-neon-green)); } /* Light palette. Neons are darkened/saturated variants (not the raw hex above) since the raw neon hues are illegible on a light background; each still clears WCAG AA (>=4.5:1) against both --c-bg and --c-card here. */ html.light { --c-fg: 15 18 32; --c-bg: 246 247 251; --c-card: 255 255 255; /* Slate surfaces are applied at low alpha (bg-slate-950/45), so this stays a light tint rather than inverting to a dark one -- otherwise those panels read as dark smudges. */ --c-deep: 226 231 241; --c-muted: 71 85 105; --c-inv: 255 255 255; --c-neon-pink: 190 24 93; --c-neon-cyan: 14 116 144; --c-neon-violet: 124 58 237; --c-neon-amber: 180 83 9; --c-neon-green: 4 120 87; } body { font-family: 'Outfit', sans-serif; background-color: rgb(var(--c-bg)); overflow: hidden; cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJz48cGF0aCBkPSdNNC41IDNWMTdMOSAxMi41TDE0IDIwTDE3IDE4TDEyIDExTDE4LjUgMTFMNC41IDNaJyBmaWxsPScjZmYwMDdmJyBzdHJva2U9JyMwMGYwZmYnIHN0cm9rZS13aWR0aD0nMS41Jy8+PC9zdmc+") 4 3, auto; transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); transform: scale(0.98); will-change: transform; /* Bypasses Blink/WebKit runtime layout recalculations during zoom transitions to prevent mouseleave jitter */ } body.zoom-active { transform: scale(1.015); } /* Freeze all competing transform layers during zoom to stabilize hit-test coordinates */ body.zoom-active #lobby-card { animation-play-state: paused !important; } body.zoom-active #camera-viewport { transform: none !important; } /* Hover Zoom Cinematic Vignette */ #hover-vignette { position: fixed; inset: 0; z-index: 5; /* Behind console card (z-10) to prevent hit-test invalidation during scale transitions */ pointer-events: none; /* Was a hardcoded black vignette; routed through --c-bg so light mode gets a soft neutral fade instead of a black one */ background: radial-gradient(circle, transparent 35%, rgb(var(--c-bg) / 0.88) 115%); opacity: 0; transition: opacity 0.45s ease-out; } body.zoom-active #hover-vignette { opacity: 1; } h1, h2, h3, .font-heading { font-family: 'Space Grotesk', sans-serif; } /* Custom Grid Background */ .neon-grid { background-image: linear-gradient(rgb(var(--c-neon-violet) / 0.12) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-neon-violet) / 0.12) 1px, transparent 1px); background-size: 50px 50px; background-position: center center; position: absolute; inset: -30px; pointer-events: none; z-index: 0; animation: grid-scroll 20s linear infinite; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } @keyframes grid-scroll { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* Radial Glow Background */ .radial-glow { background: radial-gradient(circle at 50% 50%, rgb(var(--c-neon-violet) / 0.15) 0%, rgb(var(--c-bg) / 0) 70%); position: absolute; inset: -50px; pointer-events: none; z-index: 0; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Neon shadows and glow effects */ .neon-text-pink { text-shadow: 0 0 10px rgba(255, 0, 127, 0.6), 0 0 20px rgba(255, 0, 127, 0.3); } .neon-text-cyan { text-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.3); } .neon-text-green { text-shadow: 0 0 10px rgba(16, 185, 129, 0.6), 0 0 20px rgba(16, 185, 129, 0.3); } /* Glow reads as "lit" on a dark page but as blur/haze on a light one, so light mode trades the wide bloom for a tight shadow that keeps the text crisp. Same reason drop-shadow-* halos (baked into the generated tw.css with literal rgba) are dropped on light backgrounds. */ html.light .neon-text-pink, html.light .neon-text-cyan, html.light .neon-text-green { text-shadow: 0 1px 2px rgb(var(--c-fg) / 0.18); } html.light [class*="drop-shadow-["] { filter: none; } .neon-border-pink { box-shadow: 0 0 15px rgba(255, 0, 127, 0.25), inset 0 0 10px rgba(255, 0, 127, 0.15); border-color: rgba(255, 0, 127, 0.5); } .neon-border-cyan { box-shadow: 0 0 15px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.15); border-color: rgba(0, 240, 255, 0.5); } .neon-border-violet { box-shadow: 0 0 15px rgba(139, 92, 246, 0.25), inset 0 0 10px rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.5); } /* Custom transitions and interactive feedback (Tactile Juice) */ .btn-juice { transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Ensure no animated letters or children inside buttons can intercept mouse events */ .btn-juice * { pointer-events: none !important; } .btn-juice:hover { transform: scale(1.05); filter: brightness(1.15); } .btn-juice:active { transform: scale(0.95); } /* Glassmorphism Panels */ .glass-panel { background: rgb(var(--c-card) / 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgb(var(--c-fg) / 0.08); } .glass-panel-heavy { background: rgb(var(--c-card) / 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgb(var(--c-fg) / 0.12); } /* In dark, the card separates from the page by being lighter than it. In light, card (255) and bg (246 247 251) are nearly the same value, so the panel would vanish -- it needs a real border and a drop shadow to read as a surface instead. */ html.light .glass-panel { background: rgb(var(--c-card) / 0.92); border-color: rgb(var(--c-fg) / 0.14); box-shadow: 0 2px 12px rgb(var(--c-fg) / 0.08); } html.light .glass-panel-heavy { background: rgb(var(--c-card) / 0.97); border-color: rgb(var(--c-fg) / 0.16); box-shadow: 0 6px 28px rgb(var(--c-fg) / 0.12); } /* Dynamic Beat Pulse Animation */ @keyframes beat-pulse { 0%, 50%, 100% { transform: scale(1) translate(0, 0); } 25% { transform: scale(1.01) translate(0, 0); } 75% { transform: scale(1.01) translate(0, 0); } 94% { transform: scale(1) translate(0, 0); } 95% { transform: scale(1) translate(-1.5px, 0.5px); } 96% { transform: scale(1) translate(1px, -1px); } 97% { transform: scale(1) translate(-0.5px, 1.5px); } 98% { transform: scale(1) translate(1.5px, -0.5px); } 99% { transform: scale(1) translate(-1px, 1px); } } .beat-active { animation: beat-pulse 2.4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite; } /* Higher & Lower button custom colors */ .btn-higher { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); } .btn-higher:hover { box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5); } .btn-lower { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3); } .btn-lower:hover { box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5); } /* Timer progress bar styling */ .timer-bar { transition: width 1s linear; } /* Confetti particles container */ #particle-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 10; } /* Flashing Alerts */ .flash-alert { animation: flash 1s infinite alternate; } @keyframes flash { 0% { opacity: 0.3; } 100% { opacity: 1; } } /* Float Up Score Effect */ @keyframes float-up-fade { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 20% { transform: translateY(-20px) scale(1.1); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } } .float-score { animation: float-up-fade 2s ease-out forwards; } /* Autoplay / Ultra Focus Cinematic Layout Overrides */ .autoplay-active .host-control-dock { opacity: 0.05; transition: opacity 0.3s ease-in-out; } .autoplay-active .host-control-dock:hover { opacity: 1; } .autoplay-active .floating-sidebar { display: none !important; } .autoplay-active .main-gameplay-arena { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } .autoplay-active #host-arena-game { max-w-4xl: none !important; width: 100% !important; max-width: 56rem !important; } /* Custom Scrollbar for modern aesthetics */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgb(var(--c-card) / 0.3); } ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.5); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.8); } /* Camera Viewport 3D Perspective */ #camera-viewport { transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); transform-style: preserve-3d; perspective: 1000px; height: 100%; width: 100%; } /* Smooth View & Element Transitions */ .view-transition { transition: opacity 0.35s ease-out; opacity: 0; } .view-transition.show-view { opacity: 1; } /* Custom SVG Cursors for Arcade Vibe */ a, button, input, select, textarea, [role="button"], .btn-juice, .btn-higher, .btn-lower, .cursor-pointer, [id^="btn-"], #btn-toggle-autoplay, #btn-toggle-double-points { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTAgMmEyIDIgMCAwIDAtMiAydjEwLjVsLTIuMjUtMS41YTIuMjUgMi4yNSAwIDAgMC0zLjE4LjMgMi4yNSAyLjI1IDAgMCAwIC4zIDMuMThsNi4xOSA1LjI1QTYgNiAwIDAgMCAxMy4wNiAyNEgyMWEzIDMgMCAwIDAgMy0zdi00LjVhMiAyIDAgMCAwLTItMmgtMSBhMiAyIDAgMCAwLTItMmgtMS41YTIgMiAwIDAgMC0yLTJIMTRhMiAyIDAgMCAwLTIgMlYyWiIgZmlsbD0iIzAwZjBmZiIgc3Ryb2tlPSIjZmYwMDdmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+") 10 2, pointer; } /* Victory Overlay Cinematic Reveal CSS */ #player-gameover-overlay { /* Was a hardcoded #000; the hero/leaderboard content is white-on-dark text, which itself re-themes with --c-fg, so this surface must follow --c-bg to stay legible in light mode */ background-color: rgb(var(--c-bg)) !important; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; } #player-gameover-overlay.show-overlay { opacity: 1; pointer-events: auto; } #gameover-hero-container { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), margin 0.7s ease, scale 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; transform: scale(0.8) translateY(20px); opacity: 0; } #player-gameover-overlay.show-overlay #gameover-hero-container { transform: scale(1) translateY(0); opacity: 1; } #gameover-leaderboard-container { max-height: 0; opacity: 0; transform: translateY(50px); transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } #player-gameover-overlay.show-overlay.show-all-ranks #gameover-hero-container { transform: scale(0.9) translateY(-10px); margin-top: 1rem; margin-bottom: 0.5rem; opacity: 1; } #player-gameover-overlay.show-overlay.show-all-ranks #gameover-leaderboard-container { max-height: 250px; opacity: 1; transform: translateY(0); } /* Custom scrollbar styling for leaderboard list */ #gameover-leaderboard-list::-webkit-scrollbar { width: 6px; } #gameover-leaderboard-list::-webkit-scrollbar-track { background: rgb(var(--c-fg) / 0.02); border-radius: 99px; } /* Alpha is raised in light mode: a foreground-tinted thumb at 0.15 is near-invisible on the light surface, where the fg/track contrast is far lower than in dark. */ #gameover-leaderboard-list::-webkit-scrollbar-thumb { background: rgb(var(--c-fg) / 0.15); border-radius: 99px; } #gameover-leaderboard-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-fg) / 0.3); } html.light #gameover-leaderboard-list::-webkit-scrollbar-thumb { background: rgb(var(--c-fg) / 0.35); } html.light #gameover-leaderboard-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-fg) / 0.55); } /* Smooth slow vertical floating animation */ @keyframes hover-float { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } .animate-float { animation: hover-float 3s ease-in-out infinite; } /* Disable spin-button arrows for number input boxes */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Host Challenge Card Blur State before round starts */ .host-blurred { filter: blur(12px) opacity(0.3); transform: scale(0.97); pointer-events: none; transition: filter 0.5s ease-out, opacity 0.5s ease-out, transform 0.5s ease-out; } /* Host Victory Staggered Cinematic Reveal */ #host-arena-over .victory-crown { opacity: 0; transform: translateY(-30px); transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); } #host-arena-over .victory-title { opacity: 0; transform: scale(0.7); transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } #host-arena-over .victory-card { opacity: 0; transform: translateY(50px) rotateX(25deg); transition: opacity 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); } #host-arena-over .victory-actions { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } /* Active Stagger states triggers */ #host-arena-over.reveal-active .victory-crown { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } #host-arena-over.reveal-active .victory-title { opacity: 1; transform: scale(1); transition-delay: 0.3s; } #host-arena-over.reveal-active .victory-card { opacity: 1; transform: translateY(0) rotateX(0); transition-delay: 0.6s; } #host-arena-over.reveal-active .victory-actions { opacity: 1; transform: translateY(0); transition-delay: 1.1s; } /* Styled Cyberpunk Dropdown */ #inject-unit, #sug-input-unit { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; padding-right: 26px !important; background-color: rgb(var(--c-card) / 0.8) !important; /* slate-900/80 */ border: 1px solid rgb(var(--c-fg) / 0.15); border-radius: 8px; color: rgb(var(--c-fg)); font-weight: 700; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); } #inject-unit:hover, #sug-input-unit:hover { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0, 240, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.6); } #inject-unit:focus, #sug-input-unit:focus { border-color: var(--neon-violet); box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.6); outline: none; } #inject-unit option, #sug-input-unit option { background-color: rgb(var(--c-deep)); color: rgb(var(--c-fg)); font-weight: 600; } /* The chevron is a data URI, so its stroke can't read a CSS var -- light mode swaps in the darkened cyan (#0e7490) that matches --c-neon-cyan there. Keep both in sync by hand. */ html.light #inject-unit, html.light #sug-input-unit { background-image: url("data:image/svg+xml;utf8,"); } /* Inset shadows are pure black; on light surfaces that reads as grime rather than depth. The hover/focus outer glows are restated so softening the inset doesn't drop them. */ html.light #inject-unit, html.light #sug-input-unit { box-shadow: inset 0 2px 4px rgb(var(--c-fg) / 0.12); } html.light #inject-unit:hover, html.light #sug-input-unit:hover { box-shadow: 0 0 8px rgb(var(--c-neon-cyan) / 0.35), inset 0 2px 4px rgb(var(--c-fg) / 0.12); } html.light #inject-unit:focus, html.light #sug-input-unit:focus { box-shadow: 0 0 8px rgb(var(--c-neon-violet) / 0.4), inset 0 2px 4px rgb(var(--c-fg) / 0.12); } /* Decorative background words (app.js). Must stay a barely-there texture in both themes: the value has to sit just off the page background, which means near-white on dark and a faint grey on light -- not the fg colour, which would render them as readable text. */ .word-wave-ghost { color: rgb(var(--c-fg) / 0.015); } html.light .word-wave-ghost { color: rgb(var(--c-fg) / 0.02); } /* Word Wave Character Hover Animations */ .wave-char { display: inline-block; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease; } .btn-juice:hover .wave-char { transform: translateY(-4px); } /* Custom Retro Arcade Focus Highlights (Not AI) */ .input-arcade-red { transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } .input-arcade-red:focus { outline: none; border-color: #ef4444 !important; transform: translate(-3px, -3px); box-shadow: 4px 4px 0px 0px #ef4444 !important; } .input-arcade-green { transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } .input-arcade-green:focus { outline: none; border-color: #10b981 !important; transform: translate(-3px, -3px); box-shadow: 4px 4px 0px 0px #10b981 !important; } /* Retro Arcade Failure/Exit Shakes */ @keyframes arcade-shake { 0%, 100% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-4px, 1px); } 20%, 40%, 60%, 80% { transform: translate(4px, -1px); } } .arcade-shake-active { animation: arcade-shake 0.3s ease-in-out; }