/* player.css — phone controller. Mobile-first, thumb-reachable. */
:root {
--bg: #10061f; --card: #241246; --ink: #f5f0ff; --muted: #b9a8e0;
--accent: #ff5ea8; --accent2: #6de3ff; --radius: 16px;
}
/* Pixel avatar sprites. Sized 1em so an ![]()
drops into whatever slot used to
hold an emoji glyph (the container's font-size decides the size), and never
blurs when scaled. */
img.av { width: 1em; height: 1em; image-rendering: pixelated; display: inline-block; vertical-align: middle; }
/* CRITICAL: class rules like .screen{display:flex} override the HTML `hidden`
attribute (the UA rule [hidden]{display:none} loses on specificity), which
silently renders every "hidden" screen. This must stay. */
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* Rounded, friendly letterforms with ZERO network cost. `ui-rounded` resolves
to SF Pro Rounded on iOS/macOS — which is where most party guests will see
this — and every other platform falls through to its own friendly face.
Deliberately not a web font: an external font would need CSP changes and
would risk a flash of unstyled text on a phone at a party. */
body {
font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
"Varela Round", "Segoe UI Variable Display", system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
color: var(--ink); background: radial-gradient(120% 90% at 50% 0%, #1c0b38, var(--bg));
min-height: 100dvh;
}
.phone { max-width: 480px; margin: 0 auto; padding: 22px 18px 40px; }
.screen { display: flex; flex-direction: column; gap: 18px; }
/* --- Wordmark ------------------------------------------------------------
Rounded, heavy and warm so it reads as a toy rather than a utility. */
.logo {
font-weight: 900; font-size: 32px; letter-spacing: -.02em; line-height: 1.05;
text-align: center; margin: 12px 0 8px;
background: linear-gradient(100deg, var(--accent) 10%, #ffb347 45%, var(--accent2) 90%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 14px #ff5ea855);
}
.logo-hero { font-size: 46px; margin-top: 26px; }
/* Couch wordmark (landing hero): the letters sit on two caramel couches at
varied heights, like people of different sizes sitting together. */
.logo-couch { display: block; max-width: 460px; margin: 22px auto 6px; }
.logo-couch svg { width: 100%; height: auto; display: block;
filter: drop-shadow(0 8px 26px #ff5ea83a); }
.tagline {
text-align: center; margin: 2px 0 0;
font-size: 17px; font-weight: 700; color: var(--muted);
letter-spacing: .01em;
}
.field { display: flex; flex-direction: column; gap: 8px; font-weight: 600; color: var(--muted); }
.field > span { font-size: 14px; }
input { font: inherit; font-size: 18px; padding: 14px 16px; border-radius: var(--radius);
border: 2px solid #ffffff22; background: #0004; color: var(--ink); width: 100%; }
input:focus { outline: none; border-color: var(--accent); }
.code-input { text-transform: uppercase; letter-spacing: .35em; font-weight: 800; text-align: center; font-size: 26px; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-opt { aspect-ratio: 1; font-size: 26px; background: #0004; border: 2px solid transparent;
border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.avatar-opt.sel { border-color: var(--accent); background: #ff5ea822; transform: scale(1.05); }
.btn { font: inherit; font-weight: 800; border: none; border-radius: 999px; padding: 16px;
font-size: 18px; cursor: pointer; width: 100%; }
.btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #16002a; }
.btn.primary:disabled { filter: grayscale(.7) brightness(.7); }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--muted); }
.error { color: #ff9a9a; font-weight: 600; margin: 0; }
.muted { color: var(--muted); text-align: center; }
.you { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
.you-avatar { font-size: 72px; }
.you-name { font-size: 26px; font-weight: 800; }
/* --- In-game (Trivia Rush) phone controller ------------------------- */
.game-player { display: flex; flex-direction: column; gap: 14px; }
.pg-round { text-align: center; color: var(--muted); font-weight: 700; }
.pg-answers { display: grid; gap: 12px; }
.pg-answer { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border: none; border-radius: 16px; font: inherit; font-weight: 700; font-size: 18px; color: #16002a; cursor: pointer; text-align: left; }
.pg-answer.c0 { background: #ff5ea8; } .pg-answer.c1 { background: #6de3ff; }
.pg-answer.c2 { background: #57e08a; } .pg-answer.c3 { background: #ffd16e; }
/* Neutral answer button — used when the answers are colour words, so the
button colour can't contradict the label (e.g. a green button saying
"Brown"). The A/B/C/D letters keep the options distinct. */
.pg-answer.neutral { background: #cfc6e6; }
.pg-answer.neutral .pg-letter { background: #ffffffcc; }
.pg-answer:disabled { opacity: .45; } .pg-answer.chosen { outline: 4px solid #fff; opacity: 1; }
.pg-letter { width: 1.8em; height: 1.8em; flex: none; display: flex; align-items: center; justify-content: center; background: #ffffff55; border-radius: 10px; font-weight: 800; }
.pg-locked { text-align: center; font-size: 24px; font-weight: 800; color: var(--accent2); margin-top: 20px; }
.pg-msg { text-align: center; color: var(--muted); }
.pg-result { border-radius: 20px; padding: 30px 20px; text-align: center; margin-top: 20px; }
.pg-result.good { background: #57e08a26; } .pg-result.bad { background: #ff5c5c26; }
.pg-verdict { font-size: 30px; font-weight: 800; }
.pg-gain { font-size: 40px; font-weight: 800; color: var(--good); margin: 6px 0; }
.pg-standing { color: var(--muted); font-weight: 600; margin-top: 8px; }
/* --- Open-ended phone controls -------------------------------------- */
.pg-question { font-size: 20px; font-weight: 700; text-align: center; margin: 6px 0 4px; }
.pg-openform { display: flex; flex-direction: column; gap: 12px; }
.pg-input { font: inherit; font-size: 20px; padding: 16px; border-radius: 16px; border: 2px solid #ffffff22; background: #0004; color: var(--ink); text-align: center; }
.pg-input:focus { outline: none; border-color: var(--accent); }
.pg-submit { justify-content: center; }
.pg-answerhint { margin-top: 10px; font-weight: 700; color: var(--ink); }
/* open/round sub-header on phone */
.pg-subround { text-align: center; color: var(--muted); font-size: 13px; margin-top: -6px; }
/* --- Landing divider --- */
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; margin: 6px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ffffff22; }
/* --- Lobby --- */
.lobby-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.code-block { display: flex; flex-direction: column; align-items: center; }
.code-cap { color: var(--muted); font-size: 12px; letter-spacing: .3em; }
.big-code { font-size: 46px; font-weight: 800; letter-spacing: .14em; line-height: 1; }
.qr-box-sm { background: #fff; border-radius: 12px; padding: 10px; width: 160px; height: 160px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.qr-box-sm svg { width: 100%; height: 100%; display: block; }
.join-hint { color: var(--muted); font-size: 13px; }
.roster-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; margin: 10px 2px 8px; }
.roster-head .count { color: var(--muted); font-size: .8em; font-weight: 600; }
.roster-list-p { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-item { display: flex; align-items: center; gap: 12px; background: #0004; border-radius: 12px; padding: 10px 14px; }
.rp-item.offline { opacity: .45; }
.rp-av { font-size: 26px; }
.rp-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-crown { font-size: 18px; }
.rp-you { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #16002a; background: var(--accent2); border-radius: 999px; padding: 2px 8px; font-weight: 800; }
/* --- Admin panel --- */
.admin-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; background: #ffffff0a; border: 1px solid #ffffff1a; border-radius: 16px; padding: 16px; }
.admin-cap { font-weight: 800; color: var(--accent2); }
.wait-panel { margin-top: 20px; }
.setup-game { font-weight: 800; font-size: 18px; }
.setup-row-p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-label { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; min-width: 64px; }
.seg { display: inline-flex; background: #0005; border-radius: 999px; padding: 4px; gap: 4px; }
.seg-btn { border: none; background: transparent; color: var(--ink); font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.seg-btn.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #16002a; }
.setup-select { font: inherit; font-weight: 700; padding: 10px 12px; border-radius: 12px; border: 2px solid #ffffff22; background: var(--card); color: var(--ink); flex: 1; }
.setup-num { font: inherit; font-weight: 700; padding: 10px 12px; border-radius: 12px; border: 2px solid #ffffff22; background: var(--card); color: var(--ink); flex: 1; width: 100%; }
.lobby-status { color: var(--muted); font-weight: 600; font-size: 14px; margin: 2px; min-height: 1.3em; }
.lobby-status.err { color: #ff9a9a; }
/* --- In-game standings board --- */
.pg-board { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pg-brow { display: flex; align-items: center; gap: 10px; background: #0004; border-radius: 10px; padding: 8px 12px; }
.pg-brank { font-weight: 800; color: var(--muted); min-width: 2em; }
.pg-bav { font-size: 22px; } .pg-bname { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-bscore { font-weight: 800; }
.pg-timer { font-weight: 800; color: var(--accent2); }
.pg-final-title { text-align: center; font-weight: 800; margin-top: 14px; color: var(--muted); }
.landing-cap { text-align: center; color: var(--muted); font-weight: 700; margin: -6px 0 6px; letter-spacing: .05em; }
/* ============================================================
MOTION & HIERARCHY PASS (game-ui-motion-designer)
Principles applied:
- Motion is pacing, not decoration. Routine transitions 150-400ms
ease-out; anticipation/celebration beats get 500ms+.
- The question is the dominant element; the timer must be glanceable.
- Waiting states must read "alive", never blank.
============================================================ */
/* Routine entrances: fast start, slow finish (ease-out reads natural). */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity:0; transform: scale(.86);} 60% { transform: scale(1.04);} 100% { opacity:1; transform: scale(1);} }
@keyframes pulseSoft { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes urgentPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.screen:not([hidden]) { animation: riseIn 240ms cubic-bezier(.2,.8,.2,1) both; }
.pg-answers .pg-answer { animation: riseIn 260ms cubic-bezier(.2,.8,.2,1) both; }
.pg-answers .pg-answer:nth-child(1){animation-delay:30ms}
.pg-answers .pg-answer:nth-child(2){animation-delay:70ms}
.pg-answers .pg-answer:nth-child(3){animation-delay:110ms}
.pg-answers .pg-answer:nth-child(4){animation-delay:150ms}
.pg-answer { transition: transform 120ms ease-out, opacity 150ms ease-out; }
.pg-answer:active { transform: scale(.97); } /* instant tap feedback */
.pg-answer.chosen { animation: popIn 220ms cubic-bezier(.2,.8,.2,1) both; }
/* --- Question: the dominant element on the screen --- */
.pg-question { font-size: 25px; line-height: 1.25; font-weight: 800; margin: 10px 0 16px; }
/* --- Countdown: glanceable, with urgency escalation --- */
.pg-timerwrap { display: flex; justify-content: center; margin: 2px 0 6px; }
.pg-timer-big { font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent2);
font-variant-numeric: tabular-nums; transition: color 200ms ease-out; }
.pg-timer-big.warn { color: #ffd16e; }
.pg-timer-big.urgent { color: #ff6b6b; animation: urgentPulse 700ms ease-in-out infinite; }
/* --- Waiting states: alive, with real progress --- */
.pg-waiting { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.pg-waitdots { display: flex; gap: 6px; }
.pg-waitdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2);
animation: pulseSoft 1.1s ease-in-out infinite; }
.pg-waitdots i:nth-child(2){animation-delay:.18s} .pg-waitdots i:nth-child(3){animation-delay:.36s}
.pg-progress { font-weight: 800; color: var(--ink); }
.pg-progbar { width: 100%; max-width: 260px; height: 8px; border-radius: 999px; background: #ffffff1a; overflow: hidden; }
.pg-progbar > i { display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 300ms cubic-bezier(.2,.8,.2,1); }
/* --- Reveal: anticipation beat, then payoff --- */
.pg-anticipate { text-align: center; padding: 40px 0; }
.pg-anticipate .pg-dots { font-size: 40px; letter-spacing: .2em; color: var(--muted);
background: linear-gradient(90deg, var(--muted) 25%, #fff 50%, var(--muted) 75%);
background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
animation: shimmer 900ms linear infinite; }
.pg-result { animation: popIn 320ms cubic-bezier(.2,.8,.2,1) both; }
.pg-result.good { box-shadow: 0 0 0 2px #57e08a55, 0 12px 40px #57e08a22; }
.pg-gain { animation: popIn 380ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 120ms; }
.pg-brow { animation: riseIn 240ms ease-out both; }
.pg-brow.me { outline: 2px solid var(--accent2); }
/* --- Final: the biggest beat of the session earns more --- */
.pg-final-hero { text-align: center; padding: 26px 16px; border-radius: 20px;
background: linear-gradient(135deg, #ff5ea833, #6de3ff33); animation: popIn 520ms cubic-bezier(.2,.8,.2,1) both; }
.pg-final-hero .pg-trophy { font-size: 64px; display: block; animation: popIn 640ms cubic-bezier(.2,.8,.2,1) both; }
/* --- Connection state --- */
.pg-reconnect { position: fixed; left: 0; right: 0; top: 0; z-index: 50; text-align: center;
background: #ffd16e; color: #16002a; font-weight: 800; padding: 10px; animation: riseIn 200ms ease-out both; }
/* --- Roster joins should be noticeable (a live social moment) --- */
.rp-item { animation: riseIn 260ms cubic-bezier(.2,.8,.2,1) both; }
/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; }
}
/* ============================================================
THUMB-REACH LAYOUT (phones) + SOUND TOGGLE
"Design for one-handed use — controls clustered toward the lower
half of the screen work better than a layout requiring the far top
corner." Desktop/tablet layout is intentionally left unchanged.
============================================================ */
/* Sound toggle: small, out of the way, always reachable. */
.sound-toggle { position: fixed; top: 10px; right: 10px; z-index: 40;
width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff22;
background: #0006; color: var(--ink); font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.sound-toggle.off { opacity: .55; }
@media (max-width: 640px) {
/* Fill the visual viewport (dvh accounts for mobile browser chrome). */
.phone { min-height: 100dvh; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.screen { min-height: calc(100dvh - 62px); }
/* In-game: question reads at the top, controls sit in the thumb zone. */
.game-player { min-height: calc(100dvh - 62px); display: flex; flex-direction: column; }
.game-player .pg-answers,
.game-player .pg-openform { margin-top: auto; } /* push to the bottom */
.game-player .pg-result,
.game-player .pg-final-hero { margin-top: auto; }
.game-player .pg-board { margin-bottom: auto; }
/* Bigger tap targets on the thumb-zone controls. */
.pg-answer { padding: 20px 16px; font-size: 19px; min-height: 60px; }
.pg-input { font-size: 19px; padding: 18px; }
#landing .avatar-grid { grid-template-columns: repeat(6, 1fr); }
/* The host panel used to be `position: sticky; bottom: 0`, meant to keep
Start within thumb reach. Because the panel has its own background, the
room code, QR and player list scrolled UNDERNEATH it and disappeared —
which read as the page having two competing scroll areas. Thumb reach is
not worth hiding the room code, so the lobby is now one plain scroll with
nothing pinned over anything else. */
.admin-panel { position: static; }
#adminRoomCtl { position: static; }
/* Keep the focused text input visible above the on-screen keyboard. */
.pg-openform { scroll-margin-bottom: 220px; }
}
/* Very short viewports (landscape phones): reclaim vertical space. */
@media (max-height: 520px) {
.pg-question { font-size: 20px; margin: 6px 0 10px; }
.pg-timer-big { font-size: 30px; }
.avatar-grid { grid-template-columns: repeat(10, 1fr); }
}
/* --- Host moderation + in-game admin controls --- */
.rp-kick { width: 30px; height: 30px; flex: none; border: none; border-radius: 50%;
background: #ff5c5c33; color: #ff8f8f; font-weight: 800; cursor: pointer; }
.rp-kick:active { transform: scale(.92); }
.game-admin { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
@media (max-width: 640px) { .game-admin { margin-top: auto; padding-bottom: env(safe-area-inset-bottom, 0px); } }
/* --- Round-change beat: the difficulty jump should register --- */
.pg-roundbanner { text-align: center; padding: 26px 16px; border-radius: 18px; margin: 8px 0 4px;
background: linear-gradient(135deg, #ff5ea833, #6de3ff33); animation: popIn 420ms cubic-bezier(.2,.8,.2,1) both; }
.pg-roundbanner .rb-name { font-size: 30px; font-weight: 800; }
.pg-roundbanner .rb-sub { color: var(--muted); font-weight: 700; margin-top: 4px; }
/* --- Feedback pulse: stands in for haptics where vibrate is unavailable
(all iOS browsers). Brief, edge-lit, never blocks interaction. --- */
.fb-pulse { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0;
transition: opacity 120ms ease-out; }
.fb-pulse.on { opacity: 1; animation: fbFade 260ms ease-out both; }
.fb-pulse.fb-good { box-shadow: inset 0 0 0 4px #57e08a, inset 0 0 60px #57e08a55; }
.fb-pulse.fb-bad { box-shadow: inset 0 0 0 4px #ff6b6b, inset 0 0 60px #ff6b6b55; }
@keyframes fbFade { from { opacity: .95; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fb-pulse { display: none; } }
/* --- Paused state -------------------------------------------------------
Shown on EVERY device, not just the admin's. A phone that simply freezes
reads as a broken app; an explicit paused state reads as a deliberate
moment. Fades in fast (200ms) so it feels like a switch, not a stall. --- */
.paused-overlay { position: fixed; inset: 0; z-index: 70; display: flex;
align-items: center; justify-content: center; padding: 24px;
background: rgba(16, 6, 31, .82); backdrop-filter: blur(6px);
animation: pausedIn 200ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes pausedIn { from { opacity: 0; } to { opacity: 1; } }
.paused-card { text-align: center; display: flex; flex-direction: column; align-items: center;
gap: 10px; max-width: 340px; width: 100%; }
.paused-icon { font-size: 56px; line-height: 1; animation: pausedPulse 2.4s ease-in-out infinite; }
@keyframes pausedPulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.paused-title { font-size: 34px; font-weight: 800; letter-spacing: .02em; }
.paused-sub { color: var(--muted); font-weight: 600; }
.paused-time { color: var(--accent2); font-weight: 800; font-variant-numeric: tabular-nums; }
.paused-card .btn { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .paused-icon { animation: none; } }
.cast-hint { color: var(--muted); font-size: 13px; margin: -4px 0 2px; line-height: 1.4; }
.cast-hint strong { color: var(--accent2); }
/* --- Accessibility ------------------------------------------------------
Visible keyboard focus (there was none) and a screen-reader-only channel
for announcing phase changes. --- */
.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; }
:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; border-radius: 8px; }
.btn:focus-visible, .pg-answer:focus-visible, .avatar-opt:focus-visible,
.seg-btn:focus-visible, .setup-select:focus-visible, .rp-kick:focus-visible,
.sound-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
input:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
/* The countdown updates every 200ms — never expose that to assistive tech. */
.pg-timer-big, .pg-timer { speak: none; }
/* --- Post-game suggestions ---------------------------------------------
Shown to every player on the final screen. Collapsed by default so it
never competes with the winner moment. --- */
.feedback-box { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.feedback-form { display: flex; flex-direction: column; gap: 10px;
background: #ffffff0a; border: 1px solid #ffffff1a; border-radius: 16px; padding: 14px;
animation: riseIn 240ms cubic-bezier(.2,.8,.2,1) both; }
.fb-title { font-weight: 800; }
.fb-stars { display: flex; gap: 6px; }
.fb-star { font-size: 26px; background: none; border: none; cursor: pointer; padding: 2px 4px;
filter: grayscale(1) opacity(.45); transition: filter 120ms ease-out, transform 120ms ease-out; }
.fb-star.on { filter: none; transform: scale(1.1); }
.fb-text { font: inherit; font-size: 16px; padding: 12px; border-radius: 12px;
border: 2px solid #ffffff22; background: #0004; color: var(--ink); resize: vertical; }
.fb-text:focus { outline: none; border-color: var(--accent); }
.fb-thanks { color: var(--good); font-weight: 700; text-align: center; margin: 0; }
/* ===================================================================== *
* Crowd Control — phone controller
* The NUMBER is the content; the track is the instrument. Nudges exist
* because ~3.5px per percentage point is not a thumb-sized target and the
* scoring bands are tight. Dragging never submits.
* ===================================================================== */
.cg-youare { text-align: center; font-weight: 700; color: var(--muted); font-size: 15px; }
.cg-dial { display: flex; flex-direction: column; gap: 14px; }
.cg-readout { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.cg-num { font-size: 68px; font-weight: 900; line-height: 1;
font-variant-numeric: tabular-nums;
background: linear-gradient(90deg, var(--accent2), var(--accent));
-webkit-background-clip: text; background-clip: text; color: transparent; }
.cg-pct { font-size: 28px; font-weight: 800; color: var(--muted); }
.cg-track { position: relative; height: 14px; border-radius: 999px;
background: #ffffff1a; border: 1px solid #ffffff22; }
.cg-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
background: linear-gradient(90deg, var(--accent2), var(--accent));
transition: width .12s ease-out; }
.cg-knob { position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%;
transform: translate(-50%, -50%); background: #fff; box-shadow: 0 2px 10px #0008;
transition: left .12s ease-out; }
/* The real sits on top, invisible but fully interactive —
so we get native drag + keyboard + screen-reader behaviour for free. */
/* --- Circular rotary dial ----------------------------------------------
0% at 12 o'clock, sweeping counter-clockwise to 100%. The centred number is
the source of truth; the neon fill arc (empty ring = 0, full = 100) removes
the ambiguity of the lever resting at the top for both 0 and 100. */
/* CRITICAL: the ring MUST have an absolute width AND height. The phone shell is
shrink-to-fit (a centred flex column), so it has no definite width to resolve
a relative size against — `aspect-ratio`, `%`, or `vw` widths create a
circular dependency and collapse the whole dial to 0x0 (it was invisible).
Fixed px both dimensions breaks the cycle. A media query (viewport-based, not
parent-based) handles the smallest phones without reintroducing the cycle. */
/* The WRAPPER is the interactive surface: a plain div hit-tests its whole box on
every browser, unlike an