/* ===================================================================== CURATED DISPLAY THEMES (Phase 2). A theme overrides the palette variables from styles.css, swaps the display font, and restyles the fixed .grid backdrop element. The active theme rides in on /api/state (venue.theme) and app.js stamps it on . Everything stays dark-background so the base layout's light-on-dark text contrast holds across themes. Registry + portal metadata: src/themes.js. Keep the two in sync. ===================================================================== */ /* ---------- GAME NIGHT (generic board-game energy — not any specific trademarked game's trade dress). Deliberately NOT retro: no scanlines, no vignette, no glow — flat primary colors on deep navy. ---------- */ :root[data-theme="boardgame"] { --neon-cyan: #1e88ff; /* primary blue */ --neon-pink: #ff9f1c; /* primary orange */ --neon-yellow: #ffd400; /* primary yellow */ --neon-green: #2fbf4f; /* primary green */ --neon-purple: #7048c8; /* primary purple */ --neon-red: #e63946; /* primary red */ --bg-0: #101d3c; --bg-1: #1a2c56; --font: 'Bungee', 'Press Start 2P', sans-serif; } /* Game-pieces backdrop: a checkerboard ribbon along the bottom with checker pieces resting on it, a chinese-checkers peg triangle top-left, and big faint card suits watermarked on the sides (on the pseudo-elements). */ :root[data-theme="boardgame"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: /* chinese-checkers pegs — triangle of 6, top-left */ radial-gradient(circle at calc(7% + 0.0vh) 16%, rgba(230,57,70,0.4) 0 0.8vh, transparent 0.9vh), radial-gradient(circle at calc(7% - 1.6vh) 20%, rgba(30,136,255,0.4) 0 0.8vh, transparent 0.9vh), radial-gradient(circle at calc(7% + 1.6vh) 20%, rgba(255,212,0,0.4) 0 0.8vh, transparent 0.9vh), radial-gradient(circle at calc(7% - 3.2vh) 24%, rgba(47,191,79,0.4) 0 0.8vh, transparent 0.9vh), radial-gradient(circle at calc(7% + 0.0vh) 24%, rgba(112,72,200,0.4) 0 0.8vh, transparent 0.9vh), radial-gradient(circle at calc(7% + 3.2vh) 24%, rgba(255,159,28,0.4) 0 0.8vh, transparent 0.9vh), /* checker pieces sitting above the ribbon — a stacked red king + one navy */ radial-gradient(circle at 15% calc(100% - 8.2vh), rgba(230,57,70,0.55) 0 2.1vh, transparent 2.2vh), radial-gradient(circle at 15% calc(100% - 9.6vh), rgba(230,57,70,0.75) 0 2.1vh, transparent 2.2vh), radial-gradient(circle at 85% calc(100% - 8.2vh), rgba(238,246,255,0.35) 0 2.1vh, transparent 2.2vh), /* two-row checkerboard ribbon along the bottom edge */ repeating-conic-gradient(rgba(238,246,255,0.14) 0% 25%, rgba(16,29,60,0.0) 0% 50%) left bottom / 7vh 7vh repeat-x; } :root[data-theme="boardgame"] .grid::before, :root[data-theme="boardgame"] .grid::after { position: absolute; font-size: 15vh; line-height: 1.3; letter-spacing: 0.4em; font-family: system-ui, sans-serif; writing-mode: vertical-rl; } :root[data-theme="boardgame"] .grid::before { content: "\2660\00a0\2663"; /* spades + clubs */ right: 1vw; top: 8vh; color: rgba(238, 246, 255, 0.07); } :root[data-theme="boardgame"] .grid::after { content: "\2665\00a0\2666"; /* hearts + diamonds */ left: 1vw; bottom: 18vh; color: rgba(230, 57, 70, 0.10); } /* ---------- WAITING ROOM (medical office: calm, soft, zero urgency) ---------- */ :root[data-theme="clinic"] { --neon-cyan: #8ecae6; /* soft sky */ --neon-pink: #7fd8c9; /* mint */ --neon-yellow: #ffca70; /* warm amber */ --neon-green: #a3d9a5; /* sage */ --neon-purple: #4a6670; /* slate borders */ --neon-red: #ef8b7a; /* soft coral */ --bg-0: #16262b; --bg-1: #1e343a; --font: 'Quicksand', 'Press Start 2P', sans-serif; } /* Soft blurred circles drifting in the corners + a faint medical cross. */ :root[data-theme="clinic"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: radial-gradient(circle at 12% 20%, rgba(127,216,201,0.10) 0 18vh, transparent 19vh), radial-gradient(circle at 88% 75%, rgba(142,202,230,0.09) 0 22vh, transparent 23vh), radial-gradient(circle at 75% 12%, rgba(255,202,112,0.06) 0 12vh, transparent 13vh); } :root[data-theme="clinic"] .grid::before { content: "\002b"; /* + */ position: absolute; right: 4vw; bottom: 2vh; font-family: system-ui, sans-serif; font-weight: 700; font-size: 34vh; line-height: 1; color: rgba(127, 216, 201, 0.07); } /* ---------- DMV (take-a-number energy: gov gray + LED amber) ---------- */ :root[data-theme="dmv"] { --neon-cyan: #e8e6da; /* fluorescent off-white */ --neon-pink: #ffb000; /* LED amber */ --neon-yellow: #ffb000; --neon-green: #8adf7c; --neon-purple: #4a4e57; /* filing-cabinet gray borders */ --neon-red: #ff4f42; --bg-0: #1c1e22; --bg-1: #26292f; --font: 'VT323', 'Press Start 2P', monospace; } /* NOW SERVING board top-right + a caution-stripe band along the bottom. */ :root[data-theme="dmv"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: repeating-linear-gradient(-45deg, rgba(255,176,0,0.10) 0 4vh, rgba(28,30,34,0.0) 4vh 8vh) left bottom / 100% 5vh no-repeat; } :root[data-theme="dmv"] .grid::before { content: "NOW SERVING B 0 4 7"; position: absolute; right: 2vw; bottom: 8vh; font-family: 'VT323', monospace; letter-spacing: 0.3em; font-size: 6vh; color: rgba(255, 176, 0, 0.14); } :root[data-theme="dmv"] .grid::after { content: "PLEASE WAIT UNTIL YOUR NUMBER IS CALLED"; position: absolute; left: 2vw; top: 30vh; font-family: 'VT323', monospace; letter-spacing: 0.25em; writing-mode: vertical-rl; font-size: 3.2vh; color: rgba(232, 230, 218, 0.07); } /* ---------- INSTITUTION (collegiate: navy, crimson, old gold) ---------- */ :root[data-theme="institution"] { --neon-cyan: #f2e9d8; /* parchment cream */ --neon-pink: #a51c30; /* crimson */ --neon-yellow: #c9a227; /* old gold */ --neon-green: #4fae7d; /* quad green */ --neon-purple: #5a6b8c; /* slate-blue borders */ --neon-red: #c0392b; --bg-0: #0e1a33; --bg-1: #16264a; --font: 'Alfa Slab One', 'Press Start 2P', serif; } /* Regimental rep-tie stripes sweeping the lower-right + a laurel-ish crest. */ :root[data-theme="institution"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: repeating-linear-gradient(-55deg, rgba(165,28,48,0.12) 0 3vh, transparent 3vh 9vh, rgba(201,162,39,0.10) 9vh 12vh, transparent 12vh 18vh) right bottom / 60vw 40vh no-repeat; } :root[data-theme="institution"] .grid::before { content: "\2726"; /* four-pointed star crest mark */ position: absolute; left: 3vw; top: 12vh; font-family: system-ui, sans-serif; font-size: 22vh; line-height: 1; color: rgba(201, 162, 39, 0.08); } /* ---------- BEACH DAY (sunset surf: ocean teal, sand, coral) ---------- */ :root[data-theme="beach"] { --neon-cyan: #4fd1c5; /* aqua */ --neon-pink: #ff7f6b; /* coral */ --neon-yellow: #ffd166; /* sun */ --neon-green: #7ddf82; /* palm */ --neon-purple: #2e6b7a; /* deep-sea borders */ --neon-red: #ff6b5b; --bg-0: #0b2e3a; --bg-1: #14455a; --font: 'Lilita One', 'Press Start 2P', sans-serif; } /* Sun up top-right, two rows of scalloped waves rolling along the bottom. */ :root[data-theme="beach"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: radial-gradient(circle at 85% 14%, rgba(255,209,102,0.30) 0 6vh, rgba(255,209,102,0.10) 6vh 9vh, transparent 9.5vh), radial-gradient(circle at 50% 0%, rgba(79,209,197,0.16) 0 4vh, transparent 4.2vh) left calc(100% - 2.5vh) / 10vh 5vh repeat-x, radial-gradient(circle at 50% 0%, rgba(232,244,248,0.10) 0 4vh, transparent 4.2vh) 5vh 100% / 10vh 5vh repeat-x; } /* ---------- SPOOKY (Halloween: pumpkin, toxic green, full moon) ---------- */ :root[data-theme="spooky"] { --neon-cyan: #e8e3f5; /* ghost white */ --neon-pink: #ff7518; /* pumpkin */ --neon-yellow: #ffb347; --neon-green: #9bff57; /* toxic slime */ --neon-purple: #5d3b8c; /* midnight borders */ --neon-red: #c1121f; --bg-0: #120d1d; --bg-1: #1e1430; --font: 'Creepster', 'Press Start 2P', cursive; } /* Full moon + ground fog; a spider web hangs in the top-left corner. */ :root[data-theme="spooky"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: radial-gradient(circle at 86% 16%, rgba(232,227,245,0.22) 0 7vh, rgba(232,227,245,0.05) 7vh 9vh, transparent 9.5vh), radial-gradient(ellipse 60% 8% at 30% 98%, rgba(93,59,140,0.25), transparent), radial-gradient(ellipse 50% 6% at 75% 100%, rgba(93,59,140,0.20), transparent); } :root[data-theme="spooky"] .grid::before { content: ""; position: absolute; left: -17vh; top: -17vh; width: 34vh; height: 34vh; border-radius: 50%; background: repeating-conic-gradient(rgba(232,227,245,0.16) 0deg 1deg, transparent 1deg 30deg), repeating-radial-gradient(circle, transparent 0 4.5vh, rgba(232,227,245,0.14) 4.5vh calc(4.5vh + 1px)); mask-image: radial-gradient(circle, #000 40%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); } /* ---------- CHRISTMAS (pine green, red, gold, falling snow) ---------- */ :root[data-theme="christmas"] { --neon-cyan: #f4f9ff; /* snow */ --neon-pink: #d42426; /* santa red */ --neon-yellow: #f8b229; /* gold */ --neon-green: #4caf50; /* bright pine */ --neon-purple: #1d5c38; /* wreath borders */ --neon-red: #d42426; --bg-0: #0d2418; --bg-1: #143521; --font: 'Mountains of Christmas', 'Press Start 2P', cursive; } /* String lights along the top, snow falling, drifted snow at the bottom. */ :root[data-theme="christmas"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: linear-gradient(rgba(244,249,255,0.10) 1px, transparent 1px) left 1.6vh / 100% 100% no-repeat, radial-gradient(circle at 25% 50%, rgba(212,36,38,0.55) 0 0.7vh, transparent 0.8vh) left 1.2vh / 12vh 3vh repeat-x, radial-gradient(circle at 75% 70%, rgba(248,178,41,0.55) 0 0.7vh, transparent 0.8vh) left 1.4vh / 12vh 3vh repeat-x, radial-gradient(circle at 20% 30%, rgba(244,249,255,0.30) 0 0.35vh, transparent 0.45vh) 0 0 / 17vh 23vh repeat, radial-gradient(circle at 70% 65%, rgba(244,249,255,0.22) 0 0.28vh, transparent 0.38vh) 4vh 8vh / 23vh 29vh repeat, radial-gradient(ellipse 70% 9% at 50% 102%, rgba(244,249,255,0.14), transparent); } /* ---------- PIRATE (aged wood, parchment, doubloon gold) ---------- */ :root[data-theme="pirate"] { --neon-cyan: #e8d5a3; /* parchment */ --neon-pink: #d4a017; /* doubloon gold */ --neon-yellow: #d4a017; --neon-green: #6da34d; --neon-purple: #6b4a2f; /* ship-timber borders */ --neon-red: #b03a2e; --bg-0: #150f0a; --bg-1: #241a10; --font: 'Pirata One', 'Press Start 2P', cursive; } /* Jolly Roger watermark + a dotted trail to X-marks-the-spot. */ :root[data-theme="pirate"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: radial-gradient(ellipse 55% 10% at 50% 102%, rgba(212,160,23,0.08), transparent); } :root[data-theme="pirate"] .grid::before { content: "\2620"; /* skull and crossbones */ position: absolute; right: 3vw; top: 10vh; font-family: system-ui, sans-serif; font-size: 24vh; line-height: 1; color: rgba(232, 213, 163, 0.08); } :root[data-theme="pirate"] .grid::after { content: "\2022 \00a0 \2022 \00a0 \2022 \00a0 \2022 \00a0 \2715"; position: absolute; left: 3vw; bottom: 10vh; font-family: system-ui, sans-serif; font-size: 4.5vh; letter-spacing: 0.5em; color: rgba(176, 58, 46, 0.35); transform: rotate(-14deg); } /* ---------- MUSIC VENUE (stage lights, magenta + electric blue) ---------- */ :root[data-theme="music"] { --neon-cyan: #4dc3ff; /* electric blue */ --neon-pink: #ff3d81; /* stage magenta */ --neon-yellow: #f0c33c; /* marquee gold */ --neon-green: #58e07a; /* laser green */ --neon-purple: #7b2fbf; /* stage-wash borders */ --neon-red: #ff4757; --bg-0: #0d0a14; --bg-1: #181024; --font: 'Anton', 'Press Start 2P', sans-serif; } /* Crossing spotlight beams from the top corners + haze over the stage edge. */ :root[data-theme="music"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; inset: 0; border-radius: 0; opacity: 1; background: conic-gradient(from 128deg at 0% 0%, transparent 0deg, rgba(255,61,129,0.14) 6deg, transparent 13deg, transparent 22deg, rgba(255,61,129,0.10) 28deg, transparent 35deg), conic-gradient(from 195deg at 100% 0%, transparent 0deg, rgba(77,195,255,0.14) 6deg, transparent 13deg, transparent 22deg, rgba(77,195,255,0.10) 28deg, transparent 35deg), radial-gradient(ellipse 75% 12% at 50% 103%, rgba(123,47,191,0.30), transparent); } /* Seasonal / pirate / music themes keep the glow but lose the CRT scanlines. */ :root[data-theme="spooky"] .scanlines, :root[data-theme="christmas"] .scanlines, :root[data-theme="pirate"] .scanlines, :root[data-theme="music"] .scanlines { display: none; } /* ===================================================================== FLAT THEMES — everything but arcade + the sports pair drops the CRT artifacts entirely: no scanlines, no vignette, no glow, no pulse. Flat offset "sticker" shadows replace neon. ===================================================================== */ :root[data-theme="boardgame"] .scanlines, :root[data-theme="boardgame"] .vignette, :root[data-theme="clinic"] .scanlines, :root[data-theme="clinic"] .vignette, :root[data-theme="dmv"] .scanlines, :root[data-theme="dmv"] .vignette, :root[data-theme="institution"] .scanlines, :root[data-theme="beach"] .scanlines, :root[data-theme="institution"] .vignette, :root[data-theme="beach"] .vignette { display: none; } :root[data-theme="boardgame"] *, :root[data-theme="boardgame"] *::after, :root[data-theme="clinic"] *, :root[data-theme="clinic"] *::after, :root[data-theme="dmv"] *, :root[data-theme="institution"] *, :root[data-theme="beach"] * { text-shadow: none !important; } :root[data-theme="boardgame"] .title, :root[data-theme="clinic"] .title, :root[data-theme="dmv"] .title, :root[data-theme="institution"] .title, :root[data-theme="beach"] .title { animation: none; } :root[data-theme="boardgame"] .title, :root[data-theme="boardgame"] .ov-title.win, :root[data-theme="clinic"] .title, :root[data-theme="clinic"] .ov-title.win, :root[data-theme="dmv"] .title, :root[data-theme="dmv"] .ov-title.win, :root[data-theme="institution"] .title, :root[data-theme="beach"] .title, :root[data-theme="institution"] .ov-title.win, :root[data-theme="beach"] .ov-title.win { text-shadow: 0.06em 0.06em 0 rgba(0,0,0,0.45) !important; } :root[data-theme="boardgame"] .question, :root[data-theme="boardgame"] .panel, :root[data-theme="clinic"] .question, :root[data-theme="clinic"] .panel, :root[data-theme="dmv"] .question, :root[data-theme="dmv"] .panel, :root[data-theme="institution"] .question, :root[data-theme="beach"] .question, :root[data-theme="institution"] .panel, :root[data-theme="beach"] .panel { box-shadow: none; background: rgba(0, 0, 0, 0.22); } :root[data-theme="boardgame"] .timerfill, :root[data-theme="boardgame"] .answer.live:hover, :root[data-theme="boardgame"] .answer.picked, :root[data-theme="boardgame"] .answer.correct, :root[data-theme="boardgame"] .answer.wrongpick, :root[data-theme="boardgame"] .chips li.lead, :root[data-theme="clinic"] .timerfill, :root[data-theme="clinic"] .answer.live:hover, :root[data-theme="clinic"] .answer.picked, :root[data-theme="clinic"] .answer.correct, :root[data-theme="clinic"] .answer.wrongpick, :root[data-theme="clinic"] .chips li.lead, :root[data-theme="dmv"] .timerfill, :root[data-theme="dmv"] .answer.live:hover, :root[data-theme="dmv"] .answer.picked, :root[data-theme="dmv"] .answer.correct, :root[data-theme="dmv"] .answer.wrongpick, :root[data-theme="dmv"] .chips li.lead, :root[data-theme="institution"] .timerfill, :root[data-theme="beach"] .timerfill, :root[data-theme="institution"] .answer.live:hover, :root[data-theme="beach"] .answer.live:hover, :root[data-theme="institution"] .answer.picked, :root[data-theme="beach"] .answer.picked, :root[data-theme="institution"] .answer.correct, :root[data-theme="beach"] .answer.correct, :root[data-theme="institution"] .answer.wrongpick, :root[data-theme="beach"] .answer.wrongpick, :root[data-theme="institution"] .chips li.lead, :root[data-theme="beach"] .chips li.lead { box-shadow: none; } :root[data-theme="boardgame"] .category, :root[data-theme="boardgame"] .qrimg, :root[data-theme="clinic"] .category, :root[data-theme="clinic"] .qrimg, :root[data-theme="dmv"] .category, :root[data-theme="dmv"] .qrimg, :root[data-theme="institution"] .category, :root[data-theme="beach"] .category, :root[data-theme="institution"] .qrimg, :root[data-theme="beach"] .qrimg { box-shadow: 0.25em 0.25em 0 rgba(0,0,0,0.35); border-color: #fff; } /* ---------- FOOTBALL FIELD ---------- */ :root[data-theme="football"] { --neon-cyan: #eef6ff; /* chalk white */ --neon-pink: #ffd23f; /* gold accents */ --neon-yellow: #ffd23f; --neon-green: #7cfc00; /* turf-bright */ --neon-purple: #2f7a3d; /* dark turf borders */ --neon-red: #ff5470; --bg-0: #05240d; --bg-1: #0d3a17; --font: 'Graduate', 'Press Start 2P', serif; } /* Yard lines receding toward the horizon (reuses the perspective scroll). */ :root[data-theme="football"] .grid { background-image: linear-gradient(rgba(238, 246, 255, 0.35) 2px, transparent 2px), linear-gradient(rgba(238, 246, 255, 0.08) 44px, transparent 44px); background-size: 88px 88px, 88px 88px; } /* ---------- BASEBALL DIAMOND ---------- */ :root[data-theme="baseball"] { --neon-cyan: #f5f1e3; /* pennant cream */ --neon-pink: #c8102e; /* stitching red */ --neon-yellow: #ffcc00; --neon-green: #9be564; --neon-purple: #8a5a2b; /* infield-dirt brown borders */ --neon-red: #c8102e; --bg-0: #0c2b1a; --bg-1: #164a2c; --font: 'Luckiest Guy', 'Press Start 2P', sans-serif; } /* Infield: dirt arc low on the screen with a chalk diamond on top. */ :root[data-theme="baseball"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; opacity: 0.3; background: radial-gradient(ellipse at 50% 118%, #b0793f 0%, #b0793f 30%, transparent 31%); } :root[data-theme="baseball"] .grid::after { content: ""; position: absolute; left: 50%; bottom: -16vh; width: 44vh; height: 44vh; transform: translateX(-50%) rotate(45deg); border: 3px solid rgba(245, 241, 227, 0.5); } :root[data-theme="baseball"] .scanlines { display: none; } /* ---------- PUB CHALKBOARD ---------- */ :root[data-theme="chalkboard"] { --neon-cyan: #e8e6df; /* chalk */ --neon-pink: #f2a0a0; /* pastel chalk red */ --neon-yellow: #f5e6a3; --neon-green: #b8e6b8; --neon-purple: #9aa7b0; /* slate gray borders */ --neon-red: #f28b82; --bg-0: #202421; --bg-1: #2a302c; --font: 'Cabin Sketch', 'Press Start 2P', cursive; } /* No grid — just faint chalk smudges. */ :root[data-theme="chalkboard"] .grid { transform: none; mask-image: none; -webkit-mask-image: none; animation: none; opacity: 0.35; background: radial-gradient(ellipse 40% 12% at 25% 30%, rgba(232, 230, 223, 0.05), transparent), radial-gradient(ellipse 30% 10% at 70% 60%, rgba(232, 230, 223, 0.04), transparent), radial-gradient(ellipse 45% 14% at 50% 85%, rgba(232, 230, 223, 0.05), transparent); } :root[data-theme="chalkboard"] .scanlines { display: none; } /* ---------- shared non-arcade adjustments ---------- Fonts other than Press Start 2P render larger per em and don't want the pixelated smoothing, blink, or CRT vignette punch. */ :root[data-theme="boardgame"] body, :root[data-theme="football"] body, :root[data-theme="baseball"] body, :root[data-theme="chalkboard"] body, :root[data-theme="clinic"] body, :root[data-theme="dmv"] body, :root[data-theme="institution"] body, :root[data-theme="beach"] body, :root[data-theme="beach"] body, :root[data-theme="spooky"] body, :root[data-theme="christmas"] body, :root[data-theme="pirate"] body, :root[data-theme="music"] body { -webkit-font-smoothing: auto; } :root[data-theme="boardgame"] .subtitle, :root[data-theme="football"] .subtitle, :root[data-theme="baseball"] .subtitle, :root[data-theme="chalkboard"] .subtitle, :root[data-theme="clinic"] .subtitle, :root[data-theme="institution"] .subtitle, :root[data-theme="beach"] .subtitle, :root[data-theme="beach"] .subtitle { animation: none; } /* ---------- venue identity under the title (all themes) ---------- */ .venueline { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin-top: 0.8vh; font-size: clamp(0.5rem, 1.6vh, 0.9rem); color: var(--neon-cyan); letter-spacing: 2px; } .venueline:empty { display: none; } .venueline img { height: clamp(20px, 3.4vh, 44px); width: auto; image-rendering: auto; }