/* ============================================================ BRAINBUZZ — game-show design system Fonts: Outfit (display) + Inter (body) — chosen for legibility at TV distance All colors flow through theme tokens so holiday themes and AI-generated themes restyle every surface at once. ============================================================ */ :root { --bg-a: #0a0f2e; --bg-b: #050818; --board-bg: #030616; --cell-a: #1c2fd6; --cell-b: #101fa8; --cell-border: #04061c; --value: #e8b34b; --ink: #f4f6ff; --accent: #e8b34b; --accent-ink: #1a1300; --clue-a: #1c2fd6; --clue-b: #0a1470; --gold: #ffd977; /* Legibility first. The old display face was ultra-condensed, which is the worst case for reading across a living room. Outfit has open counters and wide apertures, so money values and category names stay crisp on a TV; Inter is the most readable option for small UI text on a phone. */ --font-display: 'Outfit', 'Trebuchet MS', 'Helvetica Neue', sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --radius: 14px; --shadow: 0 10px 40px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Bulletproof dark canvas: a plain background-color on that NO `background` shorthand can reset. Guarantees the page is never white, even on TV browsers that choke on gradients / var() / color-mix(). */ /* Tells the engine this is a dark UI, so native scrollbars, form controls and the backdrop render dark instead of light. */ html { background-color: #050818; color-scheme: dark; } html, body { height: 100%; } /* Links: the browser default (#00EE) is unreadable on this dark background. Literal gold first so old TV browsers without var() still get contrast. */ a { color: #ffd977; color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; } /* Anchors styled as buttons: .btn/.btn-accent already win on color; just keep them from underlining and make them size like real buttons. */ a.btn, a.btn-accent { display: inline-flex; align-items: center; justify-content: center; } a.btn:hover, a.btn-accent:hover { text-decoration: none; } body { font-family: var(--font-body); color: #f4f6ff; /* plain fallback — readable on any browser */ color: var(--ink); /* Use background-COLOR + background-IMAGE (never the `background` shorthand), so the solid dark base can't be wiped by a later declaration. */ background-color: #050818; background-image: linear-gradient(160deg, #0a0f2e, #050818); /* literal gradient */ background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Themed gradient only where custom properties actually work */ @supports (background: linear-gradient(#000, var(--x, #000))) { body { background-image: linear-gradient(160deg, var(--bg-a), var(--bg-b)); } } /* Fancy mesh only where color-mix() actually works */ @supports (background: color-mix(in srgb, #000, #fff)) { body { background-image: radial-gradient(1200px 700px at 20% -10%, color-mix(in srgb, var(--cell-a) 24%, transparent), transparent 60%), radial-gradient(1000px 600px at 110% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), linear-gradient(160deg, var(--bg-a), var(--bg-b)); } } /* subtle scanline/grain atmosphere */ body::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* old-engine fallback for inset */ pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px); z-index: 1; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } button { font-family: var(--font-body); font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } button:active { transform: translateY(1px) scale(0.99); } button:disabled { opacity: 0.45; cursor: not-allowed; } .btn { padding: 0.7rem 1.3rem; font-size: 1rem; /* font-weight lives on the `button` ELEMENT above, not on this class, so the 22 places that put .btn on an or a with no href and a click handler, which is a button wearing the wrong element. */ .linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: #ffd977; color: var(--accent); text-decoration: underline; } /* Scrolling inside the clue editor must not chain to the page behind it. */ dialog { overscroll-behavior: contain; } /* Stops single-word widows on headings. Unknown to older engines, which simply ignore it — no fallback needed because the failure mode is today's wrapping. */ h1, h2, h3 { text-wrap: balance; } /* The games a host still has open — js/activegames.js, on the home page and on /account. Two screens, one description, so one set of rules. Every colour is declared literally first: these rules sit ABOVE the TV block but app.css is one file and a TV browser parses all of it, and a dropped var() here would leave the room code invisible on its own background. */ .active-games { margin: 0 auto 1.4rem; max-width: 760px; text-align: left; } .game-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; } /* Wraps on a phone, where the button drops under the text rather than squeezing the title into two characters. */ .game-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; background: rgba(255, 255, 255, 0.035); } /* The four letters are how a host recognises the room — the same string that is on the TV across the room — so they are set like a code, not like text. */ .game-code { font-weight: 800; letter-spacing: 0.14em; font-size: 1.1rem; padding: 0.25rem 0.55rem; border-radius: 8px; color: #ffd977; color: var(--accent); background: rgba(255, 217, 119, 0.12); } /* Takes the slack so the buttons stay hard right on a wide screen and the title truncates rather than pushing them off. */ .game-what { display: grid; gap: 0.15rem; flex: 1 1 12rem; min-width: 0; } /* Rejoin and End travel together and wrap together: split across two lines they read as belonging to different rows. */ .game-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .game-what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-what .muted { font-size: 0.82rem; } /* ------------------------------------------------------- quiz on the TV ---- */ /* Read from a sofa, not a desk. The phone carries no answer text, so anything unreadable here is unreadable full stop. Literal px/rem and no var(), color-mix() or clamp(): Tizen, webOS and Fire TV Silk parse this file too and silently drop rules they cannot understand — a var() here is a blank screen in a living room, with nothing in any log to say so. THIS BLOCK MUST STAY LAST. test/quizgame.mjs enforces the rule above by slicing this file from this heading to the end, so anything appended below is held to the TV's rules whether or not it ever reaches a TV — which is exactly how the account bar, appended here, failed a check about the quiz. New rules go ABOVE this heading. */ /* The quiz gathering screen: the title and who has joined on the left, how to join on the right. Literal px/vh and no var(), clamp() or color-mix() — the TV browsers parse this block too. */ .quiz-lobby { display: flex; align-items: center; justify-content: center; gap: 5vw; height: 100%; padding: 2vh 4vw; text-align: left; } /* Grouped in the middle rather than pinned to the two edges: on a 1920px TV, `flex: 1` on the left column pushed the QR into the far corner with a dead third of the screen between them. */ .quiz-lobby-head { flex: 0 1 auto; min-width: 0; max-width: 46vw; } .quiz-lobby-title { font-size: 3.2rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.2vh; color: #ffd977; } .quiz-joined { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2vh; } .quiz-joined span { font-size: 1.5rem; font-weight: 700; padding: 0.5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); } /* The corner strip, shown DURING a question. Absolute rather than in flow so the question and the tiles keep their position and size — pushing them down to make room is exactly what makes a question hard to read across a room. Top-LEFT: the question, progress line and countdown all run down the centre, and the fullscreen/sound chrome sits bottom-right, so this corner is the one thing on these screens that collides with nothing. Dimmed to 0.72 because it is reference material, not something anyone should read instead of the question. */ .join-corner { position: absolute; top: 2.5vh; left: 2.5vw; display: flex; align-items: center; gap: 0.9rem; opacity: 0.85; z-index: 5; } .join-corner-text { text-align: right; line-height: 1.3; } .join-corner-label { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .join-corner-url { font-size: 1.15rem; } .join-corner-code { display: inline-block; margin-top: 0.25rem; font-size: 1.4rem; letter-spacing: 0.24em; } /* A QR has to be SCANNED from a sofa, so it is sized for the room rather than shrunk to be polite: at 9vh it was ~97px on a 1080p screen, which a phone camera will not resolve from three metres. */ .join-corner-qr { width: 13vh; height: 13vh; background: #fff; padding: 6px; border-radius: 10px; display: block; } @media (max-height: 800px) { .join-corner-qr { width: 12vh; height: 12vh; } .join-corner-label { font-size: 0.72rem; } .join-corner-url { font-size: 0.95rem; } .join-corner-code { font-size: 1.1rem; } } .join-big { flex: 0 0 auto; text-align: center; } .join-big-label { font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1.2vh; } .join-big-qr { width: 30vh; height: 30vh; background: #fff; padding: 10px; border-radius: 14px; display: block; } .join-big-url { font-size: 1.4rem; margin-top: 1.4vh; } .join-big-code { display: inline-block; margin-top: 0.8vh; font-size: 2.4rem; letter-spacing: 0.3em; } /* A 720p TV is short: shrink the QR rather than let the row overflow. */ @media (max-height: 800px) { .quiz-lobby-title { font-size: 2.4rem; } .join-big-qr { width: 26vh; height: 26vh; } .join-big-code { font-size: 1.9rem; } .quiz-joined span { font-size: 1.2rem; } } .quiz-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; height: 100%; padding: 2vh 3vw; text-align: center; /* Anchors the corner join strip. Without it that strip would position against the viewport instead and drift as the page scrolls. */ position: relative; } .quiz-progress { font-size: 1.4rem; opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; } .quiz-question { font-size: 3.4rem; line-height: 1.15; font-weight: 800; max-width: 90%; } .quiz-sub { font-size: 1.8rem; opacity: 0.75; } .quiz-meta { display: flex; align-items: center; gap: 2.4rem; } /* The clock is the tension in this format, so it must not be the smallest thing on the screen. The shared .countdown style is sized for a clue card; on a TV quiz it needs to read from the back of the room. */ .quiz-meta .countdown { font-size: 3.2rem; font-weight: 800; line-height: 1; min-width: 3rem; } .quiz-meta .countdown.urgent { color: #ff6b6b; } .quiz-count { font-size: 1.5rem; opacity: 0.75; } .quiz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 92%; } .quiz-tile { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: 16px; color: #ffffff; font-size: 2.1rem; font-weight: 700; text-align: left; } .quiz-tile-shape { font-size: 2.4rem; flex: none; } .quiz-tile-text { line-height: 1.15; } /* Reveal: how the room split. Counts only — never who picked what. */ .quiz-answer-line { font-size: 2.6rem; } .quiz-answer-line strong { font-size: 3rem; } .quiz-note { font-size: 1.6rem; opacity: 0.8; max-width: 80%; } .quiz-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2rem; height: 34vh; width: 90%; } .quiz-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; gap: 0.4rem; } .quiz-bar { width: 100%; border-radius: 10px 10px 0 0; min-height: 6px; } .quiz-bar-n { font-size: 1.6rem; font-weight: 700; } .quiz-bar-label { font-size: 1.3rem; line-height: 1.2; } /* Scoreboard / podium */ .quiz-scores-title { font-size: 2.4rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .quiz-winner { font-size: 3.4rem; font-weight: 800; } .quiz-ranks { display: flex; flex-direction: column; gap: 0.7rem; width: 70%; } .quiz-rank { display: flex; align-items: center; gap: 1.2rem; background: rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 0.9rem 1.4rem; font-size: 2rem; } .quiz-place { font-size: 1.6rem; opacity: 0.6; width: 2rem; text-align: right; } .quiz-rank-name { flex: 1; text-align: left; font-weight: 700; } .quiz-streak { font-size: 1.4rem; opacity: 0.85; } .quiz-rank-score { font-weight: 800; } /* Movement since the question opened, and what it was worth. Literal colours: the TV browser has no var(), so a custom property here renders as nothing. */ .quiz-move { font-size: 1.3rem; font-weight: 700; width: 2.6rem; text-align: left; } .quiz-move.up { color: #5fd08a; } .quiz-move.down { color: #e2848a; } .quiz-move.flat { color: #8f97b5; } .quiz-gain { font-size: 1.4rem; font-weight: 700; color: #5fd08a; } /* A climb is worth a beat of attention on the big screen — one pulse, not a loop: a scoreboard that keeps moving is a scoreboard nobody can read. */ .quiz-rank.climbed { animation: quiz-climb 620ms ease-out 1; } @keyframes quiz-climb { 0% { transform: translateY(10px); background: rgba(95, 208, 138, 0.07); } 35% { background: rgba(95, 208, 138, 0.24); } 100% { transform: translateY(0); background: rgba(255, 255, 255, 0.07); } } /* Respect a viewer who has asked for less motion. * * Every @keyframes in the product is named here, and test/minigames.mjs * DISCOVERS them rather than trusting this list — one rule honoured the * preference for months while eight others ignored it, and the count was * misremembered as four when it was nine. * * Turning motion off must leave the RESTING state, never a blank screen. That * is free here: render() already paints the finished appearance and animation * only decorates it, so `animation: none` lands on a correct screen. */ @media (prefers-reduced-motion: reduce) { /* quiz-climb */ .quiz-rank.climbed { animation: none; } /* clue-in */ .clue-screen { animation: none; } /* dd-zoom */ .dd-splash { animation: none; } /* pulse-border */ .clue-screen.buzzing::after { animation: none; } /* pulse-tile */ .team-banner.timesup { animation: none; } /* rise */ .clue-screen .answer-text { animation: none; } /* fall */ .particle { animation: none; display: none; } /* mini-pop */ .mini-chip.pop { animation: none; } /* mini-casc */ .mini-result.casc { animation: none; opacity: 1; transform: none; } /* mini-warn */ .countdown.warn { animation: none; } /* spin is the exception: it is the loading spinner, and a frozen one reads as a hung app rather than as respect. Slowed, not stopped. */ .spinner { animation-duration: 2.4s; } } /* A 720p TV is the common case and everything above is sized for 1080p. */ @media (max-height: 800px) { .quiz-question { font-size: 2.6rem; } .quiz-tile { font-size: 1.6rem; padding: 1rem 1.2rem; } .quiz-rank { font-size: 1.5rem; padding: 0.6rem 1rem; } .quiz-bars { height: 28vh; } } /* ------------------------------------------------- quiz: host console ---- */ /* The host is standing up, reading questions aloud, glancing down between them — so the question and the correct answer have to be findable at a glance, not scanned for. */ /* The TV's paused banner. Literal colours and no var() — the TV browser has neither. Fixed so it is readable over whatever phase is frozen underneath. */ .quiz-paused-banner { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); font-size: 2.2rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.6rem 1.6rem; border-radius: 999px; background: rgba(10, 12, 26, 0.88); border: 2px solid #e2848a; color: #ffc9cd; z-index: 40; } /* Pacing controls, shown only before the first question. */ .quiz-pacing { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); } .quiz-pace-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .quiz-pace-row input[type="number"] { width: 4.5rem; } .quiz-pace-row > span:first-of-type { line-height: 1.35; } /* The handbrake. Sits ABOVE the phase card so it is in the same place all game — a control you reach for in an emergency must not move between phases. */ .quiz-transport { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .quiz-paused-flag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(226, 132, 138, 0.18); border: 1px solid rgba(226, 132, 138, 0.45); color: #ffc9cd; } .host-q { font-size: 1.25rem; font-weight: 700; line-height: 1.25; } .host-opts { display: flex; flex-direction: column; gap: 0.3rem; } .host-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.95rem; } /* The correct one is the single thing the host must not misread. */ .host-opt.is-right { background: rgba(74, 222, 128, 0.16); font-weight: 700; } .host-answer { font-size: 1.05rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(74, 222, 128, 0.14); } /* The AI format chooser: two mutually exclusive buttons rather than a select, because this is the decision that changes what the whole evening looks like (one screen and no phones, or a phone per player) and it should be visible without opening anything. */ /* Three buttons now, not two — wraps rather than squeezing them onto one line in a panel that is narrow on a laptop and narrower on a phone. */ .ai-format { display: flex; gap: 0.4rem; flex-wrap: wrap; } /* The game picker. Two columns so seven checkboxes are one glance rather than a scroll, and the "(uses AI)" note is de-emphasised because it is a caveat, not a label. */ .mini-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; } .mini-pick { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; cursor: pointer; } .mini-pick em { font-style: normal; opacity: 0.55; font-size: 0.78rem; } @media (max-width: 520px) { .mini-picker { grid-template-columns: 1fr; } } .fmt-btn { flex: 1; padding: 0.55rem 0.6rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; } .fmt-btn.is-on { background: rgba(255, 217, 119, 0.18); border-color: rgba(255, 217, 119, 0.55); font-weight: 700; } /* ---- the format badge on a public-board card ---- Which format a board is decides whether the evening needs a TV and teams or a phone each, so it is the first thing a browsing host has to see — hence a colour-coded badge rather than another grey tag. Here rather than in a page's own