/* ============================================================ VETO TRIVIA — DESIGN SYSTEM ------------------------------------------------------------ One token layer, two themes. Nothing below this block knows which theme it is painting in: js/theme.js stamps data-theme on before first paint and every surface, line and status colour below re-resolves from these values. The identity: warm neutrals (paper and charcoal, never cold blue-grey), one jade primary that carries every interactive affordance, one periwinkle secondary for the game's flourish, and the seven discipline colours from js/config.js left alone so that colour keeps meaning "which discipline", not "which button". ============================================================ */ :root{ /* ---- brand ------------------------------------------------ */ --accent: #23d3a5; /* jade — the one interactive colour */ --accent-rgb: 35,211,165; --accent-soft: #7bf0d0; --accent-2: #8e7bff; /* periwinkle — game flourish only */ --accent-2-rgb:142,123,255; --on-accent: #05201a; /* ink that sits on a jade fill */ /* ---- neutrals: warm charcoal, not blue-grey ---------------- */ --bg: #0e1211; --bg-2: #141a18; --panel: rgba(255,255,255,.045); --panel-2: rgba(255,255,255,.078); --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.185); --text: #f1f2ee; --text-dim: #a4aba6; --text-dimmer:#767e79; --solid: #1a201e; /* ---- depth ------------------------------------------------- */ --sunken: rgba(0,0,0,.26); --sunken-2: rgba(0,0,0,.40); --raise: rgba(255,255,255,.065); --raise-2: rgba(255,255,255,.125); --scrim: rgba(16,20,19,.86); --backdrop: rgba(4,8,7,.72); /* ---- status ------------------------------------------------ */ --ok-text: #8affbc; --ok-strong: #37d67a; --ok-rgb: 55,214,122; --bad-text: #ff9aa4; --bad-strong:#ff4d5e; --bad-rgb: 255,77,94; --warn-text: #ffd23f; --warn-rgb: 255,210,63; --amber-text:#ff9330; --amber-rgb: 255,147,48; --teal-text: #5cf2ea; --teal-rgb: 0,217,208; --violet-text:#cbb8ff; --info-text: #4d8dff; /* ---- type -------------------------------------------------- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* A scale, not a grab-bag. Sizes below --fs-sm are for labels and metadata only — never for anything a person has to read a sentence of. */ --fs-display: clamp(2.2rem, 1.5rem + 2.6vw, 3.45rem); --fs-h1: clamp(1.65rem, 1.3rem + 1.5vw, 2.3rem); --fs-h2: clamp(1.25rem, 1.08rem + .75vw, 1.6rem); --fs-h3: 1.0625rem; --fs-body: 0.9375rem; --fs-sm: 0.8125rem; --fs-xs: 0.75rem; --fs-label: 0.6875rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.6; /* ---- space: a 4px base, used everywhere ------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px; /* ---- radii ------------------------------------------------- */ --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; --radius: var(--r-lg); --radius-sm: var(--r-sm); /* ---- elevation --------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22); --shadow: 0 8px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.28); --shadow-lg: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); --die-shadow:0 12px 30px rgba(0,0,0,.42); /* ---- motion ------------------------------------------------ */ --dur-1: 120ms; /* press / hover */ --dur-2: 200ms; /* state change */ --dur-3: 320ms; /* entrance */ --ease: cubic-bezier(.2,.8,.3,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-back: cubic-bezier(.34,1.4,.64,1); /* ---- composed surfaces ------------------------------------- */ --modal-grad: linear-gradient(170deg,#1b2220,#121716); --modal-grad-2:linear-gradient(168deg,#1d2523,#101514 70%); --die-grad: linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.028)); --die-grad-locked: linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); --card-grad: linear-gradient(170deg,rgba(255,255,255,.085),rgba(255,255,255,.02)); --glow: radial-gradient(900px 620px at 8% -8%, rgba(var(--accent-2-rgb),.16), transparent 62%), radial-gradient(820px 620px at 92% 106%, rgba(var(--accent-rgb),.14), transparent 62%), radial-gradient(680px 480px at 72% 4%, rgba(255,147,48,.06), transparent 60%); /* A faint dot grid, so a big empty page still has a surface. */ --grid-dot: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); } /* ============================================================ LIGHT THEME — warm paper, not white ============================================================ */ :root[data-theme="light"]{ --accent: #00876b; --accent-rgb: 0,135,107; --accent-soft: #0aa886; --accent-2: #5a45c8; --accent-2-rgb:90,69,200; --on-accent: #ffffff; --bg: #f8f6f2; --bg-2: #efece5; --panel: rgba(24,26,22,.032); --panel-2: rgba(24,26,22,.062); --line: rgba(24,26,22,.12); --line-2: rgba(24,26,22,.22); --text: #161a18; --text-dim: #575e58; --text-dimmer:#7d857e; --solid: #ffffff; --sunken: rgba(24,26,22,.045); --sunken-2: rgba(24,26,22,.082); --raise: rgba(24,26,22,.05); --raise-2: rgba(24,26,22,.10); --scrim: rgba(250,249,246,.88); --backdrop: rgba(24,26,22,.36); --ok-text: #0a7a3c; --ok-strong: #12924c; --bad-text: #c0233a; --bad-strong:#e0364c; --warn-text: #8a5a00; --amber-text:#a1560d; --teal-text: #06786f; --violet-text:#5b3fd0; --info-text: #2b5fd0; --shadow-sm: 0 1px 2px rgba(24,26,22,.06), 0 2px 6px rgba(24,26,22,.05); --shadow: 0 6px 18px rgba(24,26,22,.09), 0 2px 4px rgba(24,26,22,.05); --shadow-lg: 0 24px 60px rgba(24,26,22,.16); --die-shadow:0 10px 26px rgba(24,26,22,.10); --modal-grad: linear-gradient(170deg,#ffffff,#f6f4ef); --modal-grad-2:linear-gradient(168deg,#ffffff,#f4f1eb 70%); --die-grad: linear-gradient(160deg,#ffffff,#f1eee7); --die-grad-locked: linear-gradient(160deg,#fbfaf7,#f2efe9); --card-grad: linear-gradient(170deg,#ffffff,#f5f2ec); --glow: radial-gradient(900px 620px at 8% -8%, rgba(var(--accent-2-rgb),.10), transparent 62%), radial-gradient(820px 620px at 92% 106%, rgba(var(--accent-rgb),.09), transparent 62%), radial-gradient(680px 480px at 72% 4%, rgba(255,147,48,.05), transparent 60%); --grid-dot: radial-gradient(rgba(24,26,22,.07) 1px, transparent 1px); } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; } html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body); background:var(--bg); color:var(--text); overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'cv05' 1,'ss01' 1; position:relative; } /* Headings are display type: tighter, and set in the display face where one is available. Interface text is never set in it. */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:var(--lh-snug); } h1{ letter-spacing:-.03em; } b,strong{ font-weight:650; } a{ color:var(--accent); } /* ---------------- one focus ring, everywhere ---------------- Keyboard only: mouse users never see it, and anyone arrowing through the setup screen always does, on every control, in the same shape. It is an outline rather than a box-shadow deliberately. Half the controls here carry a shadow of their own — a selected segment, an elevated card — and a shadow-based ring loses the cascade to any of them, silently, on exactly the controls a keyboard user spends the most time on. An outline cannot be overridden that way, and it follows border-radius in every browser this ships to. */ :focus{ outline:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; position:relative; z-index:2; } /* On a dark surface the jade ring can sit against a jade fill; the halo keeps it separated from whatever is underneath. */ .btn-primary:focus-visible, .attend-row.on:focus-visible, .challenge-card.selected:focus-visible{ outline-color:var(--text); } .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; } /* ambient background: a soft light wash plus a barely-there dot grid, so the large empty areas of the landing and setup screens read as a surface rather than as a void. */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--glow); } body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--grid-dot); background-size:26px 26px; mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%); -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%); opacity:.7; } #confetti{ position:fixed; inset:0; z-index:9999; pointer-events:none; } /* ---------------- screens ---------------- */ .screen{ display:none; position:relative; z-index:1; height:100vh; height:100dvh; } .screen.active{ display:block; animation:screenIn var(--dur-3) var(--ease-out) both; } #screen-game.active{ display:grid; grid-template-rows:auto 1fr auto; } @keyframes screenIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } /* ================================================================ BUTTONS Four weights and nothing else: primary (one per view), secondary (the reversible alternative), ghost (tertiary), and icon. ================================================================ */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); font-family:inherit; font-size:var(--fs-body); font-weight:600; letter-spacing:-.005em; color:var(--text); border:1px solid var(--line-2); background:var(--panel-2); padding:11px 18px; border-radius:var(--r-sm); cursor:pointer; min-height:42px; white-space:nowrap; transition:transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); } .btn:hover:not(:disabled){ background:var(--raise-2); border-color:var(--line-2); transform:translateY(-1px); } .btn:active:not(:disabled){ transform:translateY(0) scale(.98); transition-duration:60ms; } .btn:disabled{ opacity:.42; cursor:not-allowed; } .btn-primary{ background:linear-gradient(140deg,var(--accent-soft),var(--accent) 62%); color:var(--on-accent); border:1px solid transparent; font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 20px rgba(var(--accent-rgb),.28); } .btn-primary:hover:not(:disabled){ box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 10px 30px rgba(var(--accent-rgb),.40); filter:brightness(1.04); } .btn-primary:disabled{ box-shadow:none; filter:saturate(.35); } /* The reversible alternative to a primary: visible, but plainly second. */ .btn-secondary{ background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.38); color:var(--accent); } .btn-secondary:hover:not(:disabled){ background:rgba(var(--accent-rgb),.18); border-color:rgba(var(--accent-rgb),.6); } .btn-ghost{ background:transparent; } .btn-ghost:hover:not(:disabled){ background:var(--raise); } .btn-ghost.subtle{ border-color:var(--line); color:var(--text-dim); font-weight:500; } .btn-ghost.subtle:hover:not(:disabled){ color:var(--text); border-color:var(--line-2); } .btn-start{ padding:15px 30px; font-size:1rem; border-radius:var(--r-md); flex:none; min-height:52px; } .btn-lg{ padding:14px 26px; font-size:1rem; min-height:50px; border-radius:var(--r-md); } .btn.tiny{ padding:5px 12px; font-size:var(--fs-xs); min-height:30px; } .btn-good{ border-color:rgba(var(--ok-rgb),.5); background:rgba(var(--ok-rgb),.14); color:var(--ok-text); } .btn-good:hover:not(:disabled){ background:rgba(var(--ok-rgb),.26); border-color:rgba(var(--ok-rgb),.8); } .btn-bad{ border-color:rgba(var(--bad-rgb),.45); background:rgba(var(--bad-rgb),.12); color:var(--bad-text); } .btn-bad:hover:not(:disabled){ background:rgba(var(--bad-rgb),.24); border-color:rgba(var(--bad-rgb),.75); } /* A button that is waiting on the network keeps its width and says so. */ .btn[data-busy]{ color:transparent !important; pointer-events:none; } .btn[data-busy]::after{ content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; color:var(--text); opacity:.7; animation:spin .6s linear infinite; } .btn-primary[data-busy]::after{ color:var(--on-accent); opacity:1; } @keyframes spin{ to{ transform:rotate(360deg) } } .icon-btn{ width:40px; height:40px; flex:none; display:grid; place-items:center; font-size:15px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); cursor:pointer; transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .icon-btn:hover{ background:var(--panel-2); border-color:var(--line-2); } .icon-btn:active{ transform:scale(.94); } .icon-btn.off{ opacity:.4; } /* ---------------- language switch ---------------- */ .lang-switch{ display:flex; gap:var(--s1); background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; } .lang-btn{ width:32px; height:32px; display:grid; place-items:center; font-size:15px; line-height:1; background:transparent; border:none; border-radius:7px; cursor:pointer; opacity:.5; filter:grayscale(.7); transition:opacity var(--dur-2), filter var(--dur-2), background var(--dur-2); } .lang-btn:hover{ opacity:.9; filter:grayscale(.15); background:var(--raise); } .lang-btn.active{ opacity:1; filter:none; background:var(--panel-2); box-shadow:var(--shadow-sm); } .lang-switch.small{ padding:2px; } .lang-switch.small .lang-btn{ width:29px; height:29px; font-size:14px; } /* ================================================================ BOOTING The page cannot know which screen it opens on until the server has said whether anyone is signed in. Rather than guess and correct itself in front of the visitor, it shows nothing for that moment. ================================================================ */ body.booting .screen{ display:none !important; } .boot-splash{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; flex-direction:column; gap:var(--s5); } body.booting .boot-splash{ display:flex; } .boot-splash span{ width:64px; height:64px; display:grid; place-items:center; font-size:30px; border-radius:20px; background:var(--panel-2); border:1px solid var(--line); animation:boot-pulse 1.5s var(--ease) infinite; } @keyframes boot-pulse{ 0%,100%{ opacity:.35; transform:scale(.95); } 50% { opacity:1; transform:scale(1); } } /* ================================================================ REDUCED MOTION Feedback stays; movement goes. Anything whose only job is to draw the eye is switched off outright rather than merely shortened. ================================================================ */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .boot-splash span{ animation:none; opacity:.6; } } /* ================================================================ LANDING SCREEN A marketing page inside a single-page app: it owns the scroll, and nothing in it leaks into the game. ================================================================ */ #screen-landing{ overflow:hidden; } .landing-scroll{ height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; } /* --- the bar --- */ .landing-top{ position:sticky; top:0; z-index:20; background:var(--bg); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line); transition:border-color var(--dur-2) var(--ease); } .landing-top-inner{ max-width:1140px; margin:0 auto; padding:var(--s3) var(--s6); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); } .landing-top-actions{ display:flex; align-items:center; gap:var(--s2); } .landing-brand{ display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--font-display); font-size:1.0625rem; font-weight:500; color:var(--text-dim); letter-spacing:-.02em; white-space:nowrap; } .landing-brand b{ color:var(--text); font-weight:800; } .brand-glyph{ width:28px; height:28px; display:grid; place-items:center; font-size:15px; border-radius:9px; background:linear-gradient(145deg,var(--accent-soft),var(--accent) 60%,var(--accent-2)); box-shadow:0 2px 10px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.4); } .landing-wrap{ max-width:1140px; margin:0 auto; padding:0 var(--s6) var(--s10); display:flex; flex-direction:column; gap:clamp(72px,10vh,124px); } /* ---------------- hero ---------------- */ .landing-hero{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,64px); align-items:center; padding-top:clamp(48px,9vh,96px); } .hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s5); } .landing-kicker{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--fs-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.26); padding:6px 12px 6px 10px; border-radius:var(--r-pill); } .kicker-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); animation:kickerPulse 2.4s var(--ease) infinite; } @keyframes kickerPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18) } 50%{ box-shadow:0 0 0 6px rgba(var(--accent-rgb),.06) } } .landing-hero h1{ font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:800; letter-spacing:-.035em; max-width:13em; color:var(--text); text-wrap:balance; } .landing-lead{ font-size:clamp(1rem,.94rem + .3vw,1.125rem); line-height:1.65; color:var(--text-dim); max-width:34em; } .landing-lead b{ color:var(--text); font-weight:650; } .landing-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); } /* The arrow is decoration, and it lives in CSS so that translating the button's label cannot wipe it out — data-i18n replaces textContent. */ #landing-demo::after, #landing-demo-2::after{ content:'\2192'; display:inline-block; margin-left:2px; transition:transform var(--dur-2) var(--ease); } #landing-demo:hover::after, #landing-demo-2:hover::after{ transform:translateX(3px); } .landing-cta-note{ font-size:var(--fs-sm); line-height:1.6; color:var(--text-dimmer); max-width:34em; } /* ---------------- hero visual ---------------- Three real pieces of the game, stacked the way they sit on the board: the dice above, the card they dealt, the disciplines they land on. */ .hero-visual{ position:relative; display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5); border-radius:var(--r-xl); background:linear-gradient(165deg,var(--panel-2),transparent 70%); border:1px solid var(--line); box-shadow:var(--shadow-lg); animation:heroIn .7s var(--ease-out) both .1s; } @keyframes heroIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } } .hv-dice{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); } .hv-die{ display:flex; flex-direction:column; align-items:center; gap:var(--s1); padding:var(--s4) var(--s2); border-radius:var(--r-lg); text-align:center; background:var(--die-grad); border:1px solid var(--line-2); box-shadow:var(--shadow-sm); } .hv-die-label{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .hv-die-face{ font-size:30px; line-height:1.2; } .hv-die-value{ font-size:var(--fs-xs); font-weight:700; letter-spacing:-.01em; } .hv-die-cat{ border-color:rgba(var(--ok-rgb),.4); } .hv-die-cat .hv-die-value{ color:var(--ok-strong); } .hv-die-diff{ border-color:rgba(var(--amber-rgb),.4); } .hv-die-diff .hv-die-value{ color:var(--amber-text); } .hv-die-cat .hv-die-face{ animation:hvHop 5s var(--ease) infinite; } .hv-die-diff .hv-die-face{ animation:hvHop 5s var(--ease) infinite .35s; } @keyframes hvHop{ 0%,86%,100%{ transform:none } 90%{ transform:translateY(-7px) rotate(-8deg) } 94%{ transform:translateY(0) rotate(3deg) } } .hv-card{ background:var(--card-grad); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow); } .hv-card-top{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); flex-wrap:wrap; } .hv-tag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); border:1px solid; } .hv-tag-neuro{ color:var(--ok-strong); border-color:rgba(var(--ok-rgb),.45); background:rgba(var(--ok-rgb),.10); } .hv-tag-hard{ color:var(--amber-text); border-color:rgba(var(--amber-rgb),.45); background:rgba(var(--amber-rgb),.10); } .hv-timer{ margin-left:auto; font-size:var(--fs-sm); font-weight:800; color:var(--text-dim); font-variant-numeric:tabular-nums; } .hv-q{ font-size:1rem; font-weight:600; line-height:1.45; letter-spacing:-.015em; margin-bottom:var(--s3); } .hv-choices{ display:grid; gap:var(--s2); } .hv-choice{ display:flex; align-items:center; gap:var(--s3); padding:10px 12px; border-radius:var(--r-sm); background:var(--sunken); border:1px solid var(--line); font-size:var(--fs-sm); } .hv-choice i{ width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:6px; background:var(--panel-2); font-style:normal; font-size:10.5px; font-weight:800; } .hv-choice.is-right{ border-color:rgba(var(--ok-rgb),.55); background:rgba(var(--ok-rgb),.12); color:var(--ok-text); } .hv-choice.is-right i{ background:var(--ok-strong); color:var(--on-accent); } .hv-rail{ display:flex; gap:var(--s2); justify-content:space-between; } .hv-cat{ flex:1; min-width:0; aspect-ratio:1; max-height:40px; display:grid; place-items:center; font-size:15px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 38%, transparent); } /* ---------------- the three steps ---------------- */ .landing-steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); counter-reset:step; } .landing-steps li{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--s3); row-gap:2px; align-items:center; padding:var(--s5); border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .landing-steps li:hover{ border-color:var(--line-2); transform:translateY(-2px); } .ls-no{ grid-row:1 / span 2; width:34px; height:34px; display:grid; place-items:center; font-family:var(--font-display); font-size:15px; font-weight:800; border-radius:var(--r-sm); color:var(--accent); background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.3); } .landing-steps b{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.015em; } .landing-steps em{ font-style:normal; font-size:var(--fs-sm); line-height:1.55; color:var(--text-dim); } /* ---------------- the product story ---------------- */ .story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:center; } .story-flip .story-copy{ order:2; } .story-copy{ display:flex; flex-direction:column; gap:var(--s3); } .story-eyebrow{ font-size:var(--fs-label); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-2); } .story h2{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:800; letter-spacing:-.03em; text-wrap:balance; } .story p{ font-size:1rem; line-height:1.65; color:var(--text-dim); max-width:34em; } .story-list{ list-style:none; display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s2); } .story-list li{ position:relative; padding-left:26px; font-size:var(--fs-sm); line-height:1.55; color:var(--text-dim); } .story-list li::before{ content:'✓'; position:absolute; left:0; top:0; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; font-size:10px; font-weight:800; color:var(--accent); background:rgba(var(--accent-rgb),.14); } .story-visual{ border-radius:var(--r-xl); padding:var(--s6); background:linear-gradient(160deg,var(--panel-2),transparent 75%); border:1px solid var(--line); box-shadow:var(--shadow); } /* house rules, as they actually look */ .sv-rules{ display:flex; flex-direction:column; gap:var(--s2); } .sv-rule{ display:flex; align-items:center; gap:var(--s3); padding:12px 14px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line); font-size:var(--fs-sm); font-weight:650; } .sv-ico{ width:30px; height:30px; flex:none; display:grid; place-items:center; font-size:15px; border-radius:9px; background:var(--panel-2); } .sv-val{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:800; padding:3px 11px; border-radius:var(--r-pill); background:var(--sunken); border:1px solid var(--line); } .sv-on{ color:var(--accent); background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.35); } /* the record, as it actually prints */ .sv-record{ background:var(--solid); border:1px solid var(--line-2); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--shadow); font-size:var(--fs-sm); } .svr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding-bottom:10px; border-bottom:2px solid var(--line-2); margin-bottom:var(--s3); } .svr-head b{ font-family:var(--font-display); font-size:1rem; font-weight:500; letter-spacing:-.02em; } .svr-head b span{ font-weight:800; } .svr-id{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-dim); } .svr-rows{ display:flex; flex-direction:column; gap:7px; } .svr-rows > div{ display:flex; justify-content:space-between; gap:var(--s3); padding-bottom:7px; border-bottom:1px solid var(--line); } .svr-rows span{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .svr-ok{ color:var(--ok-strong); } .svr-reflect{ margin-top:var(--s4); } .svr-reflect span{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .svr-reflect p{ margin-top:6px; padding-left:12px; border-left:2px solid var(--line-2); font-size:var(--fs-sm); line-height:1.6; color:var(--text-dim); } .sv-lock{ display:grid; place-items:center; padding:var(--s6) 0; } .sv-lock span{ width:96px; height:96px; display:grid; place-items:center; font-size:40px; border-radius:28px; background:linear-gradient(150deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-2-rgb),.16)); border:1px solid var(--line-2); box-shadow:var(--shadow); } /* ---------------- closing ---------------- */ .landing-close{ display:flex; flex-direction:column; align-items:center; gap:var(--s5); text-align:center; padding:clamp(40px,6vw,72px) var(--s6); border-radius:var(--r-xl); background:linear-gradient(150deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-2-rgb),.09)); border:1px solid var(--line-2); } .landing-close h2{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:800; letter-spacing:-.03em; max-width:16em; text-wrap:balance; } .landing-close .landing-cta{ justify-content:center; } .landing-foot{ border-top:1px solid var(--line); padding-top:var(--s6); } .landing-smallprint{ font-size:var(--fs-xs); line-height:1.7; color:var(--text-dimmer); max-width:72em; margin:0 auto; } /* ================================================================ DEMO MODE ================================================================ */ .demo-strip{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; background:rgba(var(--accent-2-rgb),.10); border:1px solid rgba(var(--accent-2-rgb),.32); border-radius:var(--r-lg); padding:var(--s3) var(--s5); margin-bottom:var(--s5); } .demo-strip[hidden]{ display:none; } .demo-strip p{ flex:1; min-width:220px; font-size:14px; line-height:1.55; color:var(--text-dim); } .demo-strip p b{ color:var(--text); font-weight:700; } .demo-strip-actions{ display:flex; gap:10px; flex-wrap:wrap; } .demo-strip .btn{ padding:10px 16px; font-size:14px; } .demo-tag,.demo-pill{ font-size:var(--fs-label); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-text); background:rgba(var(--accent-2-rgb),.20); border:1px solid rgba(var(--accent-2-rgb),.42); padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; } .demo-pill[hidden]{ display:none; } .demo-outro{ background:rgba(var(--accent-2-rgb),.10); border:1px solid rgba(var(--accent-2-rgb),.35); border-radius:var(--radius); padding:22px; margin:22px auto 0; max-width:34em; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .demo-outro[hidden]{ display:none; } .demo-outro h2{ font-size:var(--fs-h2); font-weight:800; } .demo-outro p{ font-size:14.5px; line-height:1.6; color:var(--text-dim); } /* ---------------- landing + demo on narrow screens ---------------- */ @media (max-width:960px){ .landing-hero{ grid-template-columns:1fr; gap:var(--s7); padding-top:var(--s7); } .hero-copy{ align-items:flex-start; } .landing-hero h1{ max-width:none; } .story, .story-flip{ grid-template-columns:1fr; gap:var(--s6); } .story-flip .story-copy{ order:0; } .landing-steps{ grid-template-columns:1fr; } .landing-wrap{ gap:64px; } } @media (max-width:680px){ .landing-top-inner{ padding:var(--s2) var(--s3); gap:var(--s2); } .landing-brand{ font-size:.9375rem; gap:6px; } .landing-top-actions{ gap:6px; min-width:0; } /* Everything on the bar shrinks together rather than one control pushing the last one off the right edge of a 375px phone. */ .landing-top .lang-switch.small .lang-btn{ width:25px; height:25px; font-size:12px; } .landing-top .icon-btn{ width:33px; height:33px; font-size:13px; } .landing-top .btn{ padding:8px 12px; font-size:var(--fs-sm); min-height:33px; } .brand-glyph{ width:24px; height:24px; font-size:13px; border-radius:8px; } .landing-wrap{ padding:0 var(--s4) var(--s9); gap:56px; } .landing-cta{ width:100%; } .landing-cta .btn{ flex:1 1 100%; } .hero-visual{ padding:var(--s3); } .story-visual{ padding:var(--s4); } .landing-steps li{ padding:var(--s4); } .demo-strip{ flex-direction:column; align-items:stretch; } .demo-strip-actions .btn{ flex:1; } } /* ================================================================ SETUP SCREEN Three questions in a fixed order — who is playing, how it plays, what they are playing for — with the start dock reading the answers back at the foot of the screen. ================================================================ */ #screen-setup{ overflow:hidden; } .setup-scroll{ height:100%; overflow-y:auto; display:flex; flex-direction:column; } .setup-wrap{ width:100%; max-width:1220px; margin:0 auto; padding:var(--s6) var(--s6) var(--s7); flex:1; } /* ---------------- the app bar ---------------- */ .appbar{ position:sticky; top:0; z-index:20; background:var(--bg); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line); } .appbar-inner{ max-width:1220px; margin:0 auto; padding:var(--s3) var(--s6); display:flex; align-items:center; gap:var(--s4); } .brand{ display:flex; align-items:center; gap:var(--s3); min-width:0; } .brand-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; justify-content:flex-end; } /* The paw glyph is a dark emoji on every platform that has one, so the tile it sits on has to be light for it to read at all. */ .brand-mark{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:linear-gradient(145deg,var(--accent-soft) 0%,var(--accent) 55%,var(--accent-2) 100%); border-radius:13px; position:relative; box-shadow:0 6px 18px rgba(var(--accent-rgb),.30), inset 0 1px 0 rgba(255,255,255,.4); } .brand-mark span{ font-size:22px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .brand-text{ min-width:0; } .brand h1{ font-family:var(--font-display); font-size:1.375rem; font-weight:500; letter-spacing:-.03em; line-height:1.1; } .brand h1 span{ font-weight:800; color:var(--accent); } .tagline{ color:var(--text-dim); font-size:var(--fs-xs); margin-top:2px; line-height:1.4; } /* ---------------- the two setup columns ---------------- Left is the table — who is playing and how. Right is the game — what they are playing for, and the bank it comes out of. */ .setup-grid{ display:grid; grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr); gap:var(--s4); align-items:start; } .setup-col{ min-width:0; display:flex; flex-direction:column; gap:var(--s4); } @media (max-width:1000px){ .setup-grid{ grid-template-columns:minmax(0,1fr); } } .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); backdrop-filter:blur(12px); } .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap; } .panel-head h2{ font-family:var(--font); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); } .field-block{ margin-bottom:var(--s5); } .field-block:last-child{ margin-bottom:0; } .field-label{ font-size:var(--fs-xs); font-weight:650; color:var(--text-dim); margin-bottom:var(--s2); letter-spacing:.01em; } .subtle-note{ color:var(--text-dimmer); font-size:var(--fs-xs); font-weight:500; } /* ---------------- a panel that folds away ---------------- */ .panel-fold{ padding:0; } .fold-head{ margin:0; padding:var(--s4) var(--s5); cursor:pointer; list-style:none; flex-wrap:nowrap; user-select:none; border-radius:var(--r-lg); transition:background var(--dur-2) var(--ease); } .fold-head::-webkit-details-marker{ display:none; } .fold-head:hover{ background:var(--raise); } .fold-head .counter{ margin-left:auto; } .fold-chev{ width:8px; height:8px; flex:none; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .fold-head:hover .fold-chev{ border-color:var(--text); } .panel-fold[open] .fold-head{ border-radius:var(--r-lg) var(--r-lg) 0 0; } .panel-fold[open] .fold-chev{ transform:rotate(-135deg) translate(-2px,-2px); } .fold-body{ padding:var(--s4) var(--s5) var(--s5); border-top:1px solid var(--line); } /* ---------------- the start dock ---------------- Sticky to the bottom of the setup scroller, so it is on screen from the first paint no matter how tall the panels above it grow. */ .start-bar{ position:sticky; bottom:0; z-index:15; margin-top:auto; /* Opaque, not merely blurred: a panel scrolling under a translucent dock printed its text through the recap line underneath it. */ background:var(--bg); background:color-mix(in srgb, var(--bg) 96%, var(--text)); backdrop-filter:blur(18px) saturate(1.3); border-top:1px solid var(--line-2); padding-bottom:env(safe-area-inset-bottom); } .start-bar-inner{ max-width:1220px; margin:0 auto; padding:var(--s3) var(--s6); display:flex; align-items:center; gap:var(--s5); } .start-recap{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; } .start-recap b{ color:var(--text); font-weight:650; } .start-recap .sep{ opacity:.35; margin:0 4px; } /* The reason the button is off, said where the button is. */ .start-recap .warn{ display:inline-flex; align-items:center; gap:7px; color:var(--warn-text); font-weight:600; } .start-recap .warn::before{ content:'!'; flex:none; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; font-size:10px; font-weight:900; background:rgba(var(--warn-rgb),.18); } /* The primary action gets visibly stronger the moment the setup is valid. */ .btn-start:not(:disabled){ animation:startReady var(--dur-3) var(--ease-back) both; } @keyframes startReady{ from{ transform:scale(.97) } to{ transform:none } } .counter{ font-size:var(--fs-xs); color:var(--text-dim); font-variant-numeric:tabular-nums; } .counter b{ color:var(--text); font-weight:700; } .hint{ font-size:var(--fs-xs); color:var(--text-dim); line-height:1.6; margin-top:var(--s3); } .hint code{ background:var(--raise); padding:1px 6px; border-radius:5px; font-size:11px; } /* ---------------- players ---------------- */ .add-row{ display:flex; gap:var(--s2); margin-bottom:var(--s3); } .add-row input{ /* min-width:0, or the input refuses to shrink past the intrinsic width of a text field and pushes the + button out of the panel on a small phone. */ flex:1; min-width:0; font-family:inherit; font-size:var(--fs-body); color:var(--text); background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 15px; outline:none; min-height:46px; transition:border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2); } .add-row input:hover:not(:disabled){ border-color:var(--line-2); } .add-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16); } .add-row input:disabled{ opacity:.5; cursor:not-allowed; } .add-row input::placeholder{ color:var(--text-dimmer); } .btn-add{ width:46px; min-height:46px; padding:0; font-size:21px; font-weight:400; line-height:1; flex:none; } .player-list{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); min-height:46px; align-content:flex-start; } .player-list:empty{ border:1px dashed var(--line-2); border-radius:var(--r-md); min-height:52px; } /* An empty roster says what goes here rather than showing a blank box. */ .player-list:empty::after{ content:attr(data-empty); display:grid; place-items:center; width:100%; min-height:52px; font-size:var(--fs-xs); color:var(--text-dimmer); } .player-chip{ display:flex; align-items:center; gap:var(--s2); padding:5px 6px 5px 5px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:650; min-height:38px; transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); animation:pop var(--dur-3) var(--ease-back); } .player-chip:hover{ border-color:var(--line-2); background:var(--raise-2); } /* An initial in the player's own colour: the same colour that will mark them on the rail all game, so the identity starts here. */ .player-chip .dot{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--on-accent); } .player-chip .pc-name{ padding-right:2px; } .player-chip button{ width:24px; height:24px; border:none; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; background:transparent; color:var(--text-dimmer); display:grid; place-items:center; transition:background var(--dur-1), color var(--dur-1); } .player-chip button:hover{ background:rgba(var(--bad-rgb),.85); color:#fff; } @keyframes pop{ from{ transform:scale(.8); opacity:0 } to{ transform:scale(1); opacity:1 } } /* ---------------- segmented controls ---------------- */ .seg{ display:inline-flex; gap:2px; background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; max-width:100%; } .seg.seg-block{ display:flex; width:100%; } .seg.seg-block .seg-btn{ flex:1 1 0; } .seg.wide{ display:flex; width:100%; } .seg.wide .seg-btn{ flex:1; flex-direction:column; gap:2px; padding:10px 6px; } .seg.small .seg-btn{ padding:7px 12px; font-size:var(--fs-xs); } .seg-btn{ font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); background:transparent; border:none; padding:9px 14px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; white-space:nowrap; min-width:0; min-height:34px; transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .seg-btn em{ font-style:normal; font-size:10px; opacity:.62; font-weight:500; } .seg-btn:hover{ color:var(--text); background:var(--raise); } .seg-btn.active{ background:var(--solid); color:var(--text); box-shadow:var(--shadow-sm); } .seg-btn.active em{ opacity:.7; } .seg.off{ opacity:.35; pointer-events:none; } /* ---------------- challenge cards ---------------- */ .challenge-cards{ display:flex; flex-direction:column; gap:var(--s2); } .challenge-card{ text-align:left; width:100%; cursor:pointer; padding:var(--s4) var(--s5); background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-md); font-family:inherit; color:inherit; position:relative; overflow:hidden; transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .challenge-card:hover{ border-color:var(--line-2); background:var(--sunken-2); transform:translateY(-1px); } .challenge-card.selected{ border-color:var(--accent); background:rgba(var(--accent-rgb),.07); box-shadow:inset 3px 0 0 var(--accent), 0 6px 20px rgba(var(--accent-rgb),.10); } /* A tick, so "selected" is not carried by colour alone. */ .challenge-card.selected::after{ content:'✓'; position:absolute; top:var(--s4); right:var(--s4); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:900; color:var(--on-accent); background:var(--accent); } .challenge-card.selected .cc-head{ padding-right:28px; } .cc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:2px; } .cc-est{ font-size:var(--fs-xs); color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; } .challenge-card h3{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; } .challenge-card p{ font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:var(--s3); line-height:1.5; } .goal-row{ display:flex; flex-wrap:wrap; gap:5px; } .goal-pip{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:700; padding:4px 9px; border-radius:var(--r-pill); border:1px solid; } .goal-pip small{ font-size:9px; font-weight:600; opacity:.7; margin-left:-3px; } .cc-legend{ margin-top:var(--s2); font-size:10.5px; color:var(--text-dimmer); letter-spacing:.01em; } /* the one-each card is shown, not chosen */ .challenge-card.static{ cursor:default; } .challenge-card.static:hover{ transform:none; border-color:var(--accent); background:rgba(var(--accent-rgb),.07); } .challenge-card.static::after{ content:none; } /* ---------------- one discipline: which one ---------------- */ .solo-cat-lead{ font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:var(--s2); } .cat-chips{ display:flex; flex-wrap:wrap; gap:6px; } .cat-chip{ display:flex; align-items:center; gap:6px; padding:8px 12px; cursor:pointer; min-height:38px; font-family:inherit; font-size:var(--fs-xs); font-weight:650; color:var(--text-dim); background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-xs); transition:color var(--dur-2), border-color var(--dur-2), background var(--dur-2); } .cat-chip:hover{ color:var(--text); border-color:var(--line-2); background:var(--sunken-2); } .cat-chip.active{ color:var(--text); border-color:var(--accent); background:rgba(var(--accent-rgb),.10); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35); } /* the count of cards behind that discipline — the reason to pick or avoid it */ .cat-chip em{ font-style:normal; font-size:10.5px; font-weight:600; opacity:.6; font-variant-numeric:tabular-nums; } .cat-chip.empty{ opacity:.4; } /* ---------------- house rules, as cards ---------------- Each one carries its icon, its name, what it does and its control on a single tile, so the whole configuration is legible at a glance instead of as a column of form rows. */ .rule-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:var(--s2); } .rule-card{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--sunken); border:1px solid var(--line); transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .rule-card:hover{ border-color:var(--line-2); background:var(--sunken-2); } .rule-card-wide{ grid-column:1 / -1; } .rule-text{ flex:1 1 0; min-width:96px; } .rule-text b{ display:block; font-size:var(--fs-sm); font-weight:650; } .rule-text em{ display:block; font-style:normal; font-size:var(--fs-xs); color:var(--text-dim); margin-top:1px; line-height:1.4; } .help-icon{ width:36px; height:36px; flex:none; display:grid; place-items:center; font-size:17px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); } .rule-card .stepper, .rule-card .seg{ margin-left:auto; flex:none; } .stepper{ display:flex; align-items:center; gap:2px; background:var(--solid); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; } .stepper button{ width:32px; height:30px; border:none; background:transparent; color:var(--text-dim); font-size:17px; cursor:pointer; border-radius:6px; font-family:inherit; transition:background var(--dur-1), color var(--dur-1), transform var(--dur-1); } .stepper button:hover{ background:var(--panel-2); color:var(--text); } .stepper button:active{ transform:scale(.9); } .stepper span{ min-width:26px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; } /* the language row a voice game opens up */ .rule-sub{ flex:1 1 100%; padding-top:var(--s3); margin-top:var(--s1); border-top:1px solid var(--line); } .rule-sub[hidden]{ display:none; } .rule-sub .hint{ margin-top:var(--s2); } .voice-langs{ display:flex; flex-wrap:wrap; gap:6px; } .voice-lang{ display:flex; align-items:center; gap:6px; padding:7px 12px; cursor:pointer; min-height:36px; font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); background:var(--solid); border:1px solid var(--line); border-radius:var(--r-xs); transition:color var(--dur-2), border-color var(--dur-2), background var(--dur-2); } .voice-lang:hover{ color:var(--text); border-color:var(--line-2); } .voice-lang.active{ color:var(--text); border-color:var(--accent); background:rgba(var(--accent-rgb),.10); } /* ---------------- bank ---------------- */ .bank-status{ font-size:var(--fs-sm); color:var(--text-dim); margin-bottom:var(--s4); line-height:1.65; } .bank-status b{ color:var(--text); } .bank-status .ok{ color:var(--ok-strong); } .bank-status .warn{ color:var(--warn-text); } .bank-status .err{ color:var(--bad-text); } .bank-grid{ display:grid; grid-template-columns:auto repeat(4,1fr); gap:3px; font-size:11px; } .bank-grid .bg-h{ color:var(--text-dim); font-size:10px; text-transform:uppercase; letter-spacing:.06em; text-align:center; padding-bottom:3px; } .bank-grid .bg-cat{ display:flex; align-items:center; gap:5px; color:var(--text-dim); font-weight:600; padding-right:var(--s2); font-size:11.5px; } .bank-grid .bg-cell{ text-align:center; padding:6px 2px; border-radius:5px; font-variant-numeric:tabular-nums; font-weight:600; background:var(--raise); color:var(--text-dim); } .bank-grid .bg-cell.has{ background:rgba(var(--accent-rgb),.13); color:var(--accent); } .bank-grid .bg-cell.empty{ background:rgba(var(--bad-rgb),.10); color:var(--bad-text); } /* ================================================================ GAME SCREEN ================================================================ */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:10px var(--s5); border-bottom:1px solid var(--line); background:var(--scrim); backdrop-filter:blur(16px) saturate(1.3); } .topbar-left{ display:flex; align-items:center; gap:var(--s3); min-width:0; } .topbar-right{ display:flex; gap:var(--s2); } .mini-brand{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:var(--fs-body); font-weight:500; color:var(--text-dim); letter-spacing:-.02em; } .mini-brand b{ color:var(--text); font-weight:800; } .round-pill{ font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); padding:6px 13px; border-radius:var(--r-pill); white-space:nowrap; } .round-pill b{ color:var(--text); font-variant-numeric:tabular-nums; } .game-layout{ display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:var(--s5); padding:var(--s5); overflow:hidden; min-height:0; } .stage-col{ min-height:0; min-width:0; display:flex; } .stage{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center; /* never clip the top when content overflows */ background: radial-gradient(120% 100% at 50% 0%, var(--panel-2), transparent 65%), var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s7); overflow-y:auto; position:relative; min-height:0; } /* --- turn intro --- */ .turn-intro{ text-align:center; animation:fadeUp .4s ease both; } .turn-kicker{ font-size:11.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; } .turn-name{ font-family:var(--font-display); font-size:clamp(38px,6vw,60px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:10px; } .turn-sub{ color:var(--text-dim); font-size:15px; margin-bottom:28px; } .turn-sub b{ color:var(--text); } @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } } .bonus-banner{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; background:rgba(var(--warn-rgb),.14); border:1px solid rgba(var(--warn-rgb),.45); color:var(--warn-text); padding:8px 16px; border-radius:22px; margin-bottom:18px; animation:glowPulse 2s ease-in-out infinite; } @keyframes glowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--warn-rgb),.28) } 50%{ box-shadow:0 0 24px 3px rgba(var(--warn-rgb),.22) } } .streak-banner{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; background:rgba(var(--amber-rgb),.14); border:1px solid rgba(var(--amber-rgb),.45); color:var(--amber-text); padding:8px 16px; border-radius:22px; margin-bottom:18px; animation:streakPulse 2s ease-in-out infinite; } @keyframes streakPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--amber-rgb),.28) } 50%{ box-shadow:0 0 24px 3px rgba(var(--amber-rgb),.22) } } /* --- dice --- */ .dice-row{ display:flex; gap:var(--s6); justify-content:center; align-items:stretch; margin-bottom:var(--s7); flex-wrap:wrap; } .die{ display:flex; flex-direction:column; justify-content:center; } .die{ width:168px; padding:var(--s5) var(--s4); border-radius:var(--r-xl); text-align:center; background:var(--die-grad); border:1px solid var(--line-2); box-shadow:var(--shadow); position:relative; transition:border-color .3s, box-shadow .3s; } .die.rolling{ animation:shake .32s linear infinite; } @keyframes shake{ 0%{ transform:translate(0,0) rotate(0) } 25%{ transform:translate(-3px,2px) rotate(-2deg) } 50%{ transform:translate(2px,-3px) rotate(1.5deg) } 75%{ transform:translate(3px,1px) rotate(2deg) } 100%{ transform:translate(0,0) rotate(0) } } .die-label{ font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; } .die-face{ font-size:44px; line-height:1; margin-bottom:10px; min-height:48px; display:grid; place-items:center; } .die-value{ font-size:16px; font-weight:750; letter-spacing:-.3px; min-height:22px; } .die-value small{ display:block; font-size:11px; font-weight:500; color:var(--text-dim); margin-top:3px; letter-spacing:.3px; } .die.settled{ animation:landed .5s cubic-bezier(.34,1.56,.64,1); } @keyframes landed{ 0%{ transform:scale(1) } 40%{ transform:scale(1.09) } 100%{ transform:scale(1) } } .die.choose-face{ border-color:rgba(var(--warn-rgb),.55); box-shadow:0 0 30px rgba(var(--warn-rgb),.2); } /* not a die at all: the discipline a one-discipline game is locked into */ .die.locked{ background:var(--die-grad-locked); } .die.locked .die-face{ opacity:.9; } /* --- picker grids (choose category / difficulty / helper) --- */ .picker-title{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; text-align:center; margin-bottom:6px; letter-spacing:-.025em; } .picker-sub{ font-size:14px; color:var(--text-dim); text-align:center; margin-bottom:24px; } .picker-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; max-width:660px; width:100%; } .pick{ cursor:pointer; padding:var(--s4) var(--s3); border-radius:var(--r-md); text-align:center; font-family:inherit; background:var(--sunken); border:1.5px solid var(--line); color:var(--text); min-height:96px; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .pick:hover{ transform:translateY(-3px); background:var(--sunken-2); border-color:var(--line-2); box-shadow:var(--shadow); } .pick:active{ transform:translateY(-1px) scale(.99); transition-duration:60ms; } .pick .pick-icon{ font-size:28px; display:block; margin-bottom:8px; } .pick .pick-name{ display:block; font-size:14.5px; font-weight:700; } .pick .pick-pts{ display:block; font-size:12.5px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; } .pick .pick-meta{ display:block; font-size:11px; color:var(--text-dim); margin-top:4px; } .pick.disabled{ opacity:.3; pointer-events:none; } /* --- question card --- */ /* The card never grows past the stage: header and action bar stay put, only the question body scrolls. */ .qcard{ width:100%; max-width:860px; max-height:100%; border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; background:var(--card-grad); border:1px solid var(--line-2); box-shadow:var(--shadow); animation:dealIn .5s cubic-bezier(.2,.9,.3,1.2) both; } @keyframes dealIn{ from{ opacity:0; transform:translateY(28px) scale(.94) rotate(-1.5deg) } to{ opacity:1; transform:none } } .qcard-top{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s6); border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--sunken); } .qcard-tags{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .tag{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; padding:6px 12px; border-radius:var(--r-pill); border:1px solid; letter-spacing:.01em; line-height:1; } .qcard-timer{ font-family:var(--font-display); font-size:1.375rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-dim); letter-spacing:-.02em; } .qcard-timer:empty{ display:none; } .qcard-timer.low{ color:var(--bad-strong); animation:tick 1s steps(2) infinite; } @keyframes tick{ 50%{ opacity:.35 } } .qcard-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:30px; } .qtext{ font-size:clamp(19px,2.2vw,26px); font-weight:600; line-height:1.45; letter-spacing:-.02em; text-wrap:pretty; } /* ECGs, ultrasounds, postures — the picture IS the question, so give it room. */ .qimage{ margin-top:20px; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); background:#fff; } .qimage img{ display:block; width:100%; height:auto; max-height:42vh; object-fit:contain; } /* The options as buttons — a true/false, or the choices this bank writes inside its own question text. Tapping one IS the answer, so they are sized to be hit from across a table, not read like a list. */ .qchoices{ display:grid; gap:9px; margin-top:24px; } .qchoices.verdict{ grid-template-columns:1fr 1fr; gap:14px; } .qchoice{ display:flex; align-items:center; gap:13px; text-align:left; padding:14px 17px; border-radius:var(--r-md); min-height:54px; background:var(--sunken); border:1.5px solid var(--line); color:var(--text); font-family:inherit; font-size:1rem; line-height:1.4; cursor:pointer; transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .qchoice:hover:not([disabled]){ border-color:var(--line-2); background:var(--sunken-2); transform:translateY(-1px); } .qchoice:active:not([disabled]){ transform:scale(.99); transition-duration:60ms; } .qchoice[disabled]{ cursor:default; opacity:.55; } .qchoice .letter{ width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--panel-2); font-size:12.5px; font-weight:800; } .qchoices.verdict .qchoice{ justify-content:center; padding:20px 17px; font-size:19px; font-weight:750; } .qchoices.verdict .qchoice .letter{ width:30px; height:30px; font-size:15px; } .qchoice.picked{ border-color:var(--accent); background:rgba(var(--accent-rgb),.10); } .qchoice.picked .letter{ background:var(--accent); color:var(--on-accent); } .qchoice.right{ border-color:var(--ok-strong); background:rgba(var(--ok-rgb),.14); opacity:1; animation:rightFlash .45s var(--ease-back) both; } @keyframes rightFlash{ 0%{ transform:scale(1) } 45%{ transform:scale(1.015) } 100%{ transform:scale(1) } } .qchoice.right .letter{ background:var(--ok-strong); color:var(--on-accent); } .qchoice.wrong{ border-color:var(--bad-strong); background:rgba(var(--bad-rgb),.12); opacity:1; animation:wrongShake .34s ease-in-out both; } @keyframes wrongShake{ 0%,100%{ transform:none } 25%{ transform:translateX(-4px) } 60%{ transform:translateX(3px) } } .qchoice.wrong .letter{ background:var(--bad-strong); color:#fff; } /* What the tap did, when the microphone panel is not on screen to say it. */ .pick-verdict{ margin-top:14px; font-size:15px; animation:fadeUp .25s ease both; } .pick-verdict b{ font-weight:800; } .pick-verdict span{ color:var(--text-dim); } .pick-verdict.pass b{ color:var(--ok-text); } .pick-verdict.wrong b{ color:var(--bad-text); } .answer-block{ margin-top:26px; padding:22px 24px; border-radius:16px; background:rgba(var(--ok-rgb),.08); border:1px solid rgba(var(--ok-rgb),.3); animation:fadeUp .35s ease both; } .answer-label{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ok-strong); font-weight:800; margin-bottom:9px; } .answer-text{ font-size:17.5px; line-height:1.55; font-weight:550; } .answer-expl{ font-size:14px; line-height:1.6; color:var(--text-dim); margin-top:13px; padding-top:13px; border-top:1px solid var(--line); } .monkey-banner{ display:flex; align-items:center; gap:11px; margin-top:20px; padding:13px 17px; border-radius:12px; background:rgba(var(--amber-rgb),.10); border:1px solid rgba(var(--amber-rgb),.35); font-size:14px; } .monkey-banner .big{ font-size:22px; } .monkey-banner b{ color:var(--amber-text); } /* --- steal --- */ .monkey-banner.steal{ background:rgba(var(--teal-rgb),.10); border-color:rgba(var(--teal-rgb),.4); } .monkey-banner.steal b{ color:var(--teal-text); } .qcard.stealing{ border-color:rgba(var(--teal-rgb),.45); box-shadow:var(--shadow),0 0 40px rgba(var(--teal-rgb),.14); } .tag.steal-tag{ color:var(--teal-text); border-color:rgba(var(--teal-rgb),.55); background:rgba(var(--teal-rgb),.12); animation:stealPulse 1.4s ease-in-out infinite; } @keyframes stealPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--teal-rgb),.35) } 50%{ box-shadow:0 0 16px 2px rgba(var(--teal-rgb),.3) } } .picker-title.steal-title{ color:var(--teal-text); text-shadow:0 0 30px rgba(var(--teal-rgb),.35); } .steal-pick-btn{ background:rgba(var(--teal-rgb),.05); } .verdict.wide{ width:100%; max-width:720px; } .verdict.wide p{ margin-left:auto; margin-right:auto; } .verdict-answer{ text-align:left; margin:0 auto 26px; max-width:640px; } .verdict-answer .answer-block{ margin-top:0; } .qcard-actions{ flex:none; display:flex; gap:var(--s2); padding:var(--s4) var(--s6); border-top:1px solid var(--line); flex-wrap:wrap; justify-content:center; background:var(--sunken); } .help-btn{ display:inline-flex; align-items:center; gap:8px; } .help-btn .count{ font-size:11.5px; opacity:.65; font-weight:700; } /* --- verdict --- */ .verdict{ text-align:center; animation:fadeUp .4s ease both; } .verdict-emoji{ font-size:74px; line-height:1; margin-bottom:14px; animation:landed .55s cubic-bezier(.34,1.56,.64,1); } .verdict h2{ font-family:var(--font-display); font-size:clamp(26px,4vw,34px); font-weight:800; letter-spacing:-.03em; margin-bottom:10px; } .verdict p{ color:var(--text-dim); font-size:15.5px; margin-bottom:26px; max-width:460px; } .card-won{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:18px 26px; border-radius:16px; border:1.5px solid; margin-bottom:26px; animation:cardFly .6s cubic-bezier(.34,1.56,.64,1) both; } @keyframes cardFly{ from{ opacity:0; transform:translateY(40px) rotate(-8deg) scale(.8) } to{ opacity:1; transform:none } } .card-won .cw-icon{ font-size:32px; } .card-won .cw-name{ font-size:15px; font-weight:800; } .card-won .cw-diff{ font-size:11.5px; opacity:.75; } .card-won .cw-pts{ font-size:22px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; } .center-actions{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; } /* ================================================================ SIDEBAR ================================================================ */ .side-col{ display:flex; flex-direction:column; gap:14px; min-height:0; min-width:0; } .side-player{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); border-left:3px solid var(--accent); } .sp-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; } .sp-avatar{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:16px; font-weight:800; color:var(--on-accent); flex:none; } .sp-name{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; } .sp-role{ font-size:11.5px; color:var(--text-dim); } .sp-helps{ display:flex; gap:8px; } .sp-help{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; background:var(--sunken); border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:700; } .sp-help.spent{ opacity:.32; } .side-challenge{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; } .sc-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; } .sc-title{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-dim); } .sc-frac{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; } .sc-name{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; margin-bottom:var(--s4); letter-spacing:-.02em; } .goal-line{ margin-bottom:13px; } .goal-line:last-child{ margin-bottom:0; } .gl-top{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; margin-bottom:6px; } .gl-name{ display:flex; align-items:center; gap:6px; font-weight:650; } .gl-count{ font-variant-numeric:tabular-nums; color:var(--text-dim); font-weight:700; } .gl-count.done{ color:var(--ok-strong); } .gl-pips{ display:flex; gap:4px; } .gl-pips.many{ gap:2px; } /* deep goals run to 11 pips — keep them on one line */ /* past 16 points there are too many pips to read — one bar instead */ .gl-bar{ height:8px; border-radius:4px; background:var(--raise); overflow:hidden; } .gl-fill{ height:100%; border-radius:4px; transition:width .45s cubic-bezier(.34,1.56,.64,1); } .pip{ flex:1; height:8px; border-radius:4px; background:var(--raise); transition:background .4s, box-shadow .4s; } .pip.filled{ animation:pipFill .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes pipFill{ from{ transform:scaleY(.2); opacity:0 } to{ transform:none; opacity:1 } } .side-log-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; } .side-log-wrap h3{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; } .side-log{ list-style:none; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; } .side-log li{ font-size:12.5px; line-height:1.5; color:var(--text-dim); padding-left:11px; border-left:2px solid var(--line); animation:fadeUp .3s ease both; } .side-log li b{ color:var(--text); font-weight:650; } .side-log li.win-card{ border-left-color:var(--ok-strong); } .side-log li.miss{ border-left-color:var(--bad-strong); } .side-log li.monkey{ border-left-color:var(--amber-text); } .side-log li.escape{ border-left-color:var(--info-text); } .side-log li.steal{ border-left-color:var(--teal-text); } .side-log li.streak{ border-left-color:var(--amber-text); } .side-log li.victory{ border-left-color:var(--warn-text); color:var(--warn-text); } /* ================================================================ PLAYER RAIL ================================================================ */ .player-rail{ display:flex; gap:var(--s2); padding:var(--s3) var(--s5); border-top:1px solid var(--line); background:var(--scrim); backdrop-filter:blur(14px); overflow-x:auto; } .rail-card{ flex:0 0 auto; min-width:118px; padding:9px 12px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line); position:relative; transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .rail-card.active{ background:var(--panel-2); border-color:currentColor; transform:translateY(-4px); box-shadow:var(--shadow); } .rail-card.active::before{ content:''; position:absolute; inset:-1px; border-radius:var(--r-md); border:1.5px solid currentColor; opacity:.9; pointer-events:none; } .rc-top{ display:flex; align-items:center; gap:7px; margin-bottom:7px; } .rc-dot{ width:9px; height:9px; border-radius:50%; flex:none; } .rc-name{ font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-bar{ height:5px; border-radius:3px; background:var(--raise); overflow:hidden; margin-bottom:6px; } .rc-fill{ height:100%; border-radius:3px; transition:width .6s var(--ease); } .rc-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; } .rc-helps{ display:flex; gap:3px; font-size:9.5px; } /* ================================================================ VICTORY ================================================================ */ #screen-victory.active{ display:grid; place-items:center; overflow-y:auto; } .victory-wrap{ text-align:center; padding:var(--s8) var(--s6); max-width:660px; } .trophy{ width:112px; height:112px; margin:0 auto; display:grid; place-items:center; font-size:56px; border-radius:32px; background:linear-gradient(150deg,rgba(var(--warn-rgb),.20),rgba(var(--amber-rgb),.12)); border:1px solid rgba(var(--warn-rgb),.35); box-shadow:0 18px 50px rgba(var(--warn-rgb),.14); animation:trophyIn .8s var(--ease-back) both; } @keyframes trophyIn{ from{ transform:scale(0) rotate(-40deg); opacity:0 } to{ transform:none; opacity:1 } } .victory-kicker{ display:inline-block; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:var(--s5) 0 var(--s2); font-weight:700; } #victory-name{ font-family:var(--font-display); font-size:clamp(38px,7vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:12px; } .victory-challenge{ color:var(--text-dim); font-size:16px; margin-bottom:28px; } .victory-cards{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:30px; } .vc-card{ position:relative; width:34px; height:46px; border-radius:7px; border:1.5px solid; display:grid; place-items:center; font-size:15px; animation:cardFly .5s cubic-bezier(.34,1.56,.64,1) both; } .vc-card .vc-pts{ position:absolute; bottom:3px; right:5px; font-size:10px; font-weight:800; opacity:.85; } .victory-scores{ width:100%; border-collapse:collapse; margin-bottom:var(--s7); font-size:var(--fs-sm); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .victory-scores th{ font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); font-weight:700; text-align:left; padding:12px var(--s4); background:var(--sunken); } .victory-scores th:not(:first-child), .victory-scores td:not(:first-child){ text-align:right; } .victory-scores td{ padding:12px var(--s4); border-top:1px solid var(--line); font-variant-numeric:tabular-nums; } .victory-scores tr.winner td{ color:var(--accent); font-weight:750; } .victory-scores .vs-name{ display:flex; align-items:center; gap:9px; font-weight:650; } /* One decision first, the two ways back second. The rule between them is what stops "Play again" reading as the equal of making the records. */ .victory-actions{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; align-items:center; padding-top:var(--s6); border-top:1px solid var(--line); } .victory-actions #make-records{ flex:1 1 100%; max-width:340px; padding:15px 26px; font-size:1rem; min-height:52px; } .victory-actions #make-records[hidden]{ display:none; } /* ================================================================ FIXING A CARD The ✎ button on a revealed answer, and the editor it opens. ================================================================ */ .answer-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; } .answer-head .answer-label{ margin-bottom:0; } .fix-btn{ display:inline-flex; align-items:center; gap:7px; flex:none; font-family:inherit; font-size:11.5px; font-weight:650; letter-spacing:.2px; color:var(--text-dimmer); background:transparent; border:1px solid transparent; padding:4px 10px; border-radius:20px; cursor:pointer; transition:.16s; } .fix-btn:hover{ color:var(--text); background:var(--raise); border-color:var(--line-2); } .fix-flag{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; font-weight:800; color:var(--warn-text); background:rgba(var(--warn-rgb),.14); border-radius:20px; padding:2px 7px; } /* --- the editor --- */ body.editing{ overflow:hidden; } /* safe centring + a scroll of its own: with the keyboard up, a phone has about 400px of height left, which is less than the sign-up card is tall. Centred-and-clipped put the submit button out of reach — `safe` drops the card to the top of the box the moment it stops fitting, and the backdrop scrolls to the rest of it. */ .editor-backdrop{ position:fixed; inset:0; z-index:1000; display:grid; padding:24px; align-items:safe center; justify-items:center; overflow-y:auto; background:var(--backdrop); backdrop-filter:blur(6px); animation:fadeIn .18s ease both; } @keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } } .editor{ width:100%; max-width:640px; max-height:100%; display:flex; flex-direction:column; background:var(--modal-grad); border:1px solid var(--line-2); border-radius:20px; box-shadow:var(--shadow); animation:fadeUp .24s cubic-bezier(.2,.9,.3,1.1) both; } .editor-head{ flex:none; display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); } .editor-head h2{ font-size:15px; font-weight:750; letter-spacing:-.2px; } .editor-id{ flex:1; font-size:11px; color:var(--text-dimmer); font-variant-numeric:tabular-nums; } .editor-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; } .field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .field > span{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .field > span em{ font-style:normal; letter-spacing:.2px; text-transform:none; font-size:11px; font-weight:500; color:var(--text-dimmer); margin-left:6px; } .field textarea, .field select{ font-family:inherit; font-size:15px; line-height:1.5; color:var(--text); background:var(--sunken); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; outline:none; width:100%; transition:border-color .18s, box-shadow .18s; } .field textarea{ resize:vertical; min-height:52px; } .field select{ cursor:pointer; appearance:none; } .field textarea:focus, .field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14); } .field-row{ display:flex; gap:12px; } .editor-note{ font-size:12px; line-height:1.6; color:var(--text-dimmer); } .editor-note code{ background:var(--raise); padding:1px 6px; border-radius:5px; font-size:11px; } .editor-error{ font-size:13px; color:var(--bad-text); font-weight:600; } .editor-error:empty{ display:none; } .editor-flag{ font-size:12.5px; line-height:1.6; color:var(--warn-text); padding:10px 13px; border-radius:10px; background:rgba(var(--warn-rgb),.10); border:1px solid rgba(var(--warn-rgb),.35); } .editor-foot{ flex:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--line); background:var(--sunken); } .editor-foot .btn{ font-size:13.5px; padding:10px 16px; } .editor-spacer{ flex:1; } /* ================================================================ THE SIGN-IN PANEL Its own card rather than the .editor chrome. The editor is a form for a long document with a header, a scrolling body and a row of footer buttons; a sign-in is four fields and one decision, and pouring it into that shape gave it a title bar it did not need and inputs that .field never styled — .field dresses textarea and select only, so the email box was a raw browser control. ================================================================ */ .auth-card{ position:relative; width:100%; max-width:412px; overflow:hidden; background:var(--modal-grad-2); border:1px solid var(--line-2); border-radius:22px; box-shadow:var(--shadow-lg); animation:authIn .3s cubic-bezier(.2,.9,.3,1.05) both; } @keyframes authIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } } /* A lit top edge. Cheap, and it stops the card reading as a grey box. */ .auth-card::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); opacity:.85; } .auth-card::after{ content:''; position:absolute; z-index:0; pointer-events:none; top:-120px; left:50%; width:340px; height:240px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),transparent); } .auth-close{ position:absolute; top:14px; right:14px; z-index:2; width:30px; height:30px; border-radius:9px; cursor:pointer; display:grid; place-items:center; font-size:14px; line-height:1; color:var(--text-dimmer); background:transparent; border:1px solid transparent; transition:.16s; } .auth-close:hover{ color:var(--text); background:var(--panel-2); border-color:var(--line); } .auth-top{ position:relative; z-index:1; padding:34px 30px 0; text-align:center; } /* The paw is a dark emoji everywhere it exists, so the tile under it has to be light — the same brand tile the setup header wears. */ .auth-mark{ width:46px; height:46px; margin:0 auto var(--s4); border-radius:14px; display:grid; place-items:center; font-size:22px; background:linear-gradient(145deg,var(--accent-soft) 0%,var(--accent) 55%,var(--accent-2) 100%); box-shadow:0 8px 24px rgba(var(--accent-rgb),.28), inset 0 1px 0 rgba(255,255,255,.4); } .auth-top h2{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:800; letter-spacing:-.025em; } .auth-top p{ margin-top:7px; font-size:13px; line-height:1.6; color:var(--text-dim); } .auth-body{ position:relative; z-index:1; padding:22px 30px 30px; display:flex; flex-direction:column; gap:14px; } .auth-body .seg{ margin:8px 0 4px; } .auth-field{ display:flex; flex-direction:column; gap:7px; } /* The label and its hint share a line and drop apart rather than wrapping into each other when the hint is long — which it is in Spanish, on a phone. */ .auth-field > span{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:2px 8px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .auth-field > span em{ font-style:normal; letter-spacing:.2px; text-transform:none; font-size:11px; font-weight:500; color:var(--text-dimmer); } .auth-field input{ font-family:inherit; font-size:15px; color:var(--text); width:100%; background:var(--sunken-2); border:1px solid var(--line); border-radius:12px; padding:13px 14px; outline:none; transition:border-color .18s, box-shadow .18s, background .18s; } .auth-field input::placeholder{ color:var(--text-dimmer); } .auth-field input:hover:not(:disabled){ border-color:var(--line-2); } .auth-field input:focus{ border-color:var(--accent); background:var(--sunken-2); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15); } .auth-field input:disabled{ opacity:.5; } /* The password box and its reveal toggle share one border. */ .auth-secret{ position:relative; display:flex; } .auth-secret input{ padding-right:64px; } .auth-peek{ position:absolute; right:5px; top:5px; bottom:5px; padding:0 11px; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dimmer); background:transparent; border:none; border-radius:9px; cursor:pointer; transition:.16s; } .auth-peek:hover:not(:disabled){ color:var(--accent); background:var(--raise); } .auth-go{ width:100%; justify-content:center; margin-top:4px; padding:14px 20px; font-size:15px; border-radius:12px; } .auth-go[data-busy]{ position:relative; color:transparent; } .auth-go[data-busy]::after{ content:''; position:absolute; inset:0; margin:auto; width:17px; height:17px; border:2px solid rgba(4,18,26,.35); border-top-color:var(--on-accent); border-radius:50%; animation:authSpin .6s linear infinite; } @keyframes authSpin{ to{ transform:rotate(360deg) } } .auth-error{ font-size:13px; line-height:1.55; font-weight:600; color:var(--bad-text); background:rgba(var(--bad-rgb),.10); border:1px solid rgba(var(--bad-rgb),.3); border-radius:11px; padding:10px 13px; } .auth-error:empty{ display:none; } .auth-note{ font-size:11.5px; line-height:1.6; color:var(--text-dimmer); text-align:center; } .auth-note.warn{ color:var(--warn-text); } /* --- the locked CPD panel, for a browser with no practice signed in --- */ .auth-gate{ max-width:520px; text-align:center; } .auth-gate .auth-body{ gap:16px; } .auth-gate .auth-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .auth-gate .auth-actions .btn{ flex:1; min-width:150px; justify-content:center; } .auth-held{ font-size:12.5px; line-height:1.6; color:var(--warn-text); text-align:left; background:rgba(var(--warn-rgb),.09); border:1px solid rgba(var(--warn-rgb),.3); border-radius:12px; padding:11px 14px; } /* ================================================================ THE PROFILE MENU What the account button opens once a practice is signed in: who you are, which practice, and the way out. Fixed rather than absolute — it is anchored to the button's rectangle by js/auth.js, so it cannot widen the header row it hangs off. ================================================================ */ .profile-menu{ position:fixed; z-index:1050; width:min(304px,calc(100vw - 24px)); background:var(--modal-grad-2); border:1px solid var(--line-2); border-radius:16px; outline:none; box-shadow:var(--shadow-lg); animation:fadeUp .16s cubic-bezier(.2,.9,.3,1.1) both; overflow:hidden; } .profile-who{ display:flex; align-items:center; gap:12px; padding:16px 16px 14px; } .profile-avatar{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:13.5px; font-weight:800; letter-spacing:.5px; color:var(--on-accent); background:linear-gradient(140deg,var(--accent),var(--accent-2)); } .profile-names{ display:flex; flex-direction:column; gap:2px; min-width:0; } .profile-names b{ font-size:14.5px; font-weight:750; letter-spacing:-.2px; } /* An email is one long unbreakable word; without this it decides how wide the menu is. */ .profile-names em{ font-style:normal; font-size:11.5px; color:var(--text-dimmer); overflow-wrap:anywhere; } .profile-practice{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0 12px; padding:11px 13px; border-radius:12px; background:var(--raise); border:1px solid var(--line); } .profile-label{ width:100%; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .profile-practice b{ font-size:13.5px; font-weight:700; overflow-wrap:anywhere; } .profile-role{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; font-weight:800; color:var(--accent); background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); border-radius:20px; padding:2px 8px; } .profile-note{ padding:12px 16px 0; font-size:11.5px; line-height:1.55; color:var(--text-dimmer); } .profile-acts{ padding:12px; } .profile-item{ width:100%; display:flex; align-items:center; gap:9px; font-family:inherit; font-size:13.5px; font-weight:600; text-align:left; color:var(--text); background:transparent; border:1px solid var(--line); border-radius:11px; padding:11px 13px; cursor:pointer; transition:.16s; } .profile-item:hover{ background:var(--panel-2); border-color:var(--line-2); } .profile-item.danger{ color:var(--bad-text); border-color:rgba(var(--bad-rgb),.3); } .profile-item.danger:hover{ background:rgba(var(--bad-rgb),.14); border-color:rgba(var(--bad-rgb),.6); } /* --- the sign-out confirmation --- */ .auth-confirm{ max-width:452px; } .auth-confirm .auth-body{ padding-top:18px; } /* --- save confirmation --- */ .fix-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:1100; max-width:min(560px,92vw); padding:13px 20px; border-radius:12px; font-size:13.5px; line-height:1.5; background:var(--solid); border:1px solid var(--line-2); box-shadow:var(--shadow); animation:fadeUp .28s cubic-bezier(.2,.9,.3,1.1) both; } .fix-toast.good{ border-color:rgba(var(--ok-rgb),.5); color:var(--ok-text); } .fix-toast.warn{ border-color:rgba(var(--warn-rgb),.45); color:var(--warn-text); } .fix-toast.out{ opacity:0; transform:translate(-50%,10px); transition:opacity .35s, transform .35s; } /* ================================================================ SAYING IT OUT LOUD The house rule in setup, and the microphone panel on a question. ================================================================ */ /* The setup half of this rule lives in the SETUP SCREEN section above. */ /* --- the panel on a question --- */ .voice-panel{ margin-top:20px; padding:16px 18px; border-radius:14px; background:var(--sunken); border:1px solid var(--line); transition:border-color .25s, background .25s; } .voice-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; font-size:12.5px; color:var(--text-dim); margin-bottom:14px; } .voice-who{ font-weight:700; } .voice-need{ margin-right:auto; } .voice-tries{ font-weight:650; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:20px; background:var(--panel-2); border:1px solid var(--line); } .voice-actions{ display:flex; justify-content:center; gap:10px; } .type-row{ display:flex; align-items:center; gap:10px; margin-top:12px; } .type-or{ font-size:12px; color:var(--text-dimmer); flex:none; } .type-input{ flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--text); background:var(--sunken); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; outline:none; transition:border-color .18s, box-shadow .18s; } .type-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14); } .type-row .btn{ flex:none; } .voice-tip, .voice-heard, .voice-after{ font-size:12.5px; color:var(--text-dim); line-height:1.6; } .voice-tip{ text-align:center; margin-top:12px; } .voice-heard{ margin-top:12px; font-style:italic; } .voice-after{ margin-top:10px; font-weight:600; color:var(--text); } .voice-error{ font-size:13px; color:var(--bad-text); text-align:center; margin-bottom:12px; } .voice-panel.blocked{ border-style:dashed; } .voice-blocked{ font-size:13px; color:var(--text-dim); line-height:1.7; text-align:center; } .voice-blocked .subtle{ color:var(--text-dimmer); } /* --- listening --- */ .voice-panel.listening{ border-color:rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.07); } .voice-live{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .voice-transcript{ font-size:16px; line-height:1.55; flex:1; } .voice-transcript em{ color:var(--text-dimmer); font-style:normal; } .mic-wave{ display:flex; align-items:center; gap:3px; height:30px; flex:none; } .mic-wave i{ width:3px; height:8px; border-radius:2px; background:var(--accent); animation:mic-bounce 1s infinite ease-in-out; } .mic-wave i:nth-child(2){ animation-delay:.12s; } .mic-wave i:nth-child(3){ animation-delay:.24s; } .mic-wave i:nth-child(4){ animation-delay:.36s; } .mic-wave i:nth-child(5){ animation-delay:.48s; } @keyframes mic-bounce{ 0%,100%{ height:7px; opacity:.55; } 50%{ height:26px; opacity:1; } } /* --- scored --- */ .voice-score{ margin-bottom:4px; } .vs-track{ position:relative; height:10px; border-radius:6px; overflow:hidden; background:var(--raise); margin-bottom:12px; } .vs-fill{ height:100%; border-radius:6px; transition:width .5s cubic-bezier(.2,.8,.2,1); } .vs-need{ position:absolute; top:-3px; width:2px; height:16px; background:var(--text); opacity:.85; border-radius:2px; transform:translateX(-1px); } .vs-msg{ font-size:16.5px; font-weight:650; line-height:1.5; } .voice-panel.pass{ border-color:rgba(var(--ok-rgb),.55); background:rgba(var(--ok-rgb),.09); } .voice-panel.pass .vs-fill{ background:var(--ok-strong); } .voice-panel.pass .vs-msg{ color:var(--ok-text); } .voice-panel.near{ border-color:rgba(var(--warn-rgb),.55); background:rgba(var(--warn-rgb),.08); } .voice-panel.near .vs-fill{ background:var(--warn-text); } .voice-panel.near .vs-msg{ color:var(--warn-text); } .voice-panel.wrong{ border-color:rgba(var(--bad-rgb),.5); background:rgba(var(--bad-rgb),.07); } .voice-panel.wrong .vs-fill{ background:var(--bad-strong); } .voice-panel.wrong .vs-msg{ color:var(--bad-text); } /* --- the recap on the turn verdict --- */ .voice-recap{ max-width:640px; margin:0 auto 22px; text-align:left; display:grid; gap:8px; } .vr-run{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; } .vr-who{ font-weight:700; flex:none; } .vr-try{ padding:4px 10px; border-radius:20px; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); } .vr-try b{ font-variant-numeric:tabular-nums; } .vr-try.pass{ color:var(--ok-text); border-color:rgba(var(--ok-rgb),.4); background:rgba(var(--ok-rgb),.10); } .vr-try.near{ color:var(--warn-text); border-color:rgba(var(--warn-rgb),.4); background:rgba(var(--warn-rgb),.09); } .vr-try.wrong{ color:var(--bad-text); border-color:rgba(var(--bad-rgb),.35); background:rgba(var(--bad-rgb),.08); } /* ================================================================ NARROW SCREENS Must stay at the end of the file: these override the base rules above. ================================================================ */ @media (max-width:1000px){ /* `1fr` alone is `minmax(auto,1fr)`, and that automatic minimum is the min-content width of what is inside. The pickers are `repeat(auto-fit,minmax(118px,1fr))`: asked for their min-content they lay out one 118px track per option, so seven disciplines came to 874px and four difficulties to 496px. That became the column's minimum, the whole board grew wider than the phone, and since the layout clips on the x axis the options past the right edge could not be reached or scrolled to at all. Capping the track at the container fixes every screen at once: with a real width to measure against, `auto-fit` settles on the two columns that actually fit. */ .game-layout{ grid-template-columns:minmax(0,1fr); overflow-y:auto; } /* Stacked, the stage no longer has a column to fill, so it sizes to what is on it — a pair of dice do not need 900px of board under them. The min-height keeps a question card from jumping the page around as it is dealt. */ .stage-col{ min-height:auto; } .stage{ flex:0 1 auto; min-height:min(52dvh,440px); } .side-log-wrap{ display:none; } /* least useful when space is tight */ .side-col{ min-height:auto; } } @media (max-width:680px){ /* ---------------- setup: the header ---------------- The wordmark, the tagline and the account controls cannot share one line on a phone. They were being asked to: the text column got squeezed to zero width and its letters printed straight across the buttons, and the flags ran off the right edge. The controls take a row of their own instead. */ .appbar-inner{ padding:var(--s3) var(--s4); flex-wrap:wrap; gap:var(--s3); } .setup-wrap{ padding:var(--s4) var(--s4) var(--s3); } .brand-mark{ width:38px; height:38px; border-radius:11px; } .brand-mark span{ font-size:19px; } .brand h1{ font-size:1.1875rem; } .tagline{ display:none; } /* the strapline is on the landing page */ /* Two rows, not three: the wordmark, then everything else sharing one line. The buttons shrink and wrap their own labels rather than pushing the language flags onto a line of their own. */ .brand-actions{ width:100%; margin-left:0; gap:6px; justify-content:flex-start; flex-wrap:nowrap; } .brand-actions .btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:normal; font-size:var(--fs-xs); padding:8px 10px; line-height:1.25; } .brand-actions .lang-switch{ flex:none; padding:2px; } .brand-actions .lang-btn{ width:26px; height:26px; font-size:13px; } .brand-actions .icon-btn{ width:34px; height:34px; flex:none; font-size:13px; } /* ---------------- setup: the panels ---------------- */ .panel{ padding:var(--s4); } .panel-head{ gap:var(--s2) var(--s3); } .seg.seg-block .seg-btn{ padding:9px 5px; font-size:var(--fs-xs); white-space:normal; line-height:1.25; text-align:center; } /* One rule per row, its control on the right where a thumb reaches it. */ .rule-grid{ grid-template-columns:1fr; } .rule-card{ padding:var(--s3); gap:var(--s3); } .rule-text{ flex:1 1 0; min-width:88px; } /* Four options is one too many beside a label. */ #timer-picker{ flex:1 1 100%; margin-left:0; } #timer-picker .seg-btn{ flex:1 1 0; } #voice-picker{ flex:none; } .start-bar-inner{ flex-direction:column; align-items:stretch; gap:var(--s2); padding:var(--s3) var(--s4); } .start-recap{ text-align:center; font-size:var(--fs-xs); } .start-recap .warn{ justify-content:center; } .btn-start{ width:100%; } /* ---------------- game: the top bar ---------------- A wordmark, a round counter, three flags and two icon buttons do not fit across a phone — the brand was wrapping under its own paw. The wordmark is the one thing on that bar with nothing to do, so during a game it stands down. */ .topbar{ padding:9px 12px; gap:8px; } .mini-brand{ display:none; } .topbar-left{ gap:9px; min-width:0; } .round-pill{ white-space:nowrap; } .topbar-right{ gap:6px; flex:none; } /* ---------------- game: the board ---------------- Less nesting: the stage and the card were each paying for their own padding, and between them they took a fifth of the screen. */ .game-layout{ padding:10px; gap:10px; } .stage{ padding:14px 11px; border-radius:16px; } .dice-row{ gap:10px; margin-bottom:22px; } .die{ width:calc(50% - 5px); min-width:0; padding:14px 8px; } .die-face{ font-size:34px; min-height:38px; } .die-value{ font-size:14px; } .turn-name{ font-size:clamp(30px,11vw,46px); } .turn-sub{ font-size:14px; margin-bottom:22px; } /* ---------------- game: the question card ---------------- */ .qcard-top{ padding:11px 13px; gap:8px; } .qcard-body{ padding:18px 14px; } .qtext{ font-size:18px; } .qchoice{ padding:13px 14px; font-size:15px; } .qchoices.verdict{ gap:10px; } .qchoices.verdict .qchoice{ padding:17px 10px; font-size:17px; } /* Two by two, rather than four buttons of four different widths. */ .qcard-actions{ padding:12px 11px; gap:8px; } .qcard-actions .btn{ flex:1 1 calc(50% - 4px); min-width:0; justify-content:center; } .answer-block{ padding:18px 16px; } /* ---------------- game: the player rail ---------------- */ .player-rail{ gap:7px; padding:9px 12px; padding-bottom:calc(9px + env(safe-area-inset-bottom)); } .rail-card{ min-width:104px; padding:7px 10px; } /* ---------------- pickers, verdicts, buttons ---------------- */ .btn{ font-size:14px; padding:11px 15px; } .btn-lg{ padding:13px 18px; font-size:15px; } .picker-grid{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; } .pick{ padding:13px 8px; } .pick .pick-icon{ font-size:23px; } .picker-title{ font-size:19px; } .picker-sub{ font-size:13px; margin-bottom:18px; } .verdict-emoji{ font-size:56px; } .verdict h2{ font-size:26px; } .center-actions .btn{ flex:1 1 auto; justify-content:center; } /* ---------------- victory ---------------- */ .victory-wrap{ padding:32px 16px; } .trophy{ font-size:70px; } .victory-actions .btn{ flex:1 1 auto; justify-content:center; } /* ---------------- saying it out loud ---------------- */ .voice-panel{ padding:14px; } .voice-head{ font-size:11.5px; gap:8px 12px; } .voice-transcript{ font-size:15px; } .type-row{ flex-wrap:wrap; } .type-input{ order:1; flex-basis:100%; } .type-or{ order:0; } .type-row .btn{ order:2; flex:1; } .vs-msg{ font-size:15px; } /* ---------------- editors, and the sign-in card ---------------- */ .editor-backdrop{ padding:12px; } .editor-body{ padding:14px; gap:12px; } .field-row{ flex-direction:column; } .editor-foot{ padding:12px 14px; } .editor-foot .btn{ flex:1; } .editor-spacer{ display:none; } .auth-top{ padding:28px 20px 0; } .auth-body{ padding:18px 20px 24px; } /* 16px, or iOS zooms the whole page in the moment a field takes focus — and never quite zooms back out. Every control, not just the one. */ .auth-field input, .add-row input, .type-input, .field textarea, .field select, .reflection-box{ font-size:16px; } /* ---------------- targets big enough for a thumb ---------------- */ .player-chip{ padding:9px 11px 9px 13px; } .player-chip button{ width:22px; height:22px; } .stepper button{ width:34px; height:32px; } } /* scrollbars */ ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--raise-2); border-radius:5px; } ::-webkit-scrollbar-thumb:hover{ background:var(--raise-2); } /* ================================================================ CPD — ATTENDANCE, RECORDS, DASHBOARD Three document screens sharing one shell. They are deliberately quieter than the game: the game is for a room, these are for one person reading closely, and one of them gets printed. ================================================================ */ #screen-attend, #screen-records, #screen-dashboard{ overflow-y:auto; } .doc-wrap{ max-width:960px; margin:0 auto; padding:var(--s8) var(--s6) var(--s10); } .doc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; } .doc-kicker{ font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:var(--s2); } .doc-head h1{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:800; letter-spacing:-.03em; line-height:1.08; } .doc-sub{ color:var(--text-dim); font-size:14px; margin-top:9px; } .doc-sub b, .doc-sub code{ color:var(--text); font-weight:650; } .doc-tools{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; } .doc-actions{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--line); } .brand-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; align-self:flex-start; } /* --- attendance --- */ .attend-list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:6px 0; } .attend-row{ width:100%; display:flex; align-items:center; gap:var(--s4); text-align:left; font-family:inherit; font-size:var(--fs-body); color:var(--text); cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4) var(--s5); min-height:64px; transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .attend-row:hover{ background:var(--panel-2); border-color:var(--line-2); } .attend-row:active{ transform:scale(.995); } .attend-row.on{ border-color:var(--accent); background:rgba(var(--accent-rgb),.09); box-shadow:inset 3px 0 0 var(--accent); } .attend-row.on .attend-tick{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .attend-tick{ flex:none; width:32px; height:32px; border-radius:var(--r-sm); border:2px solid var(--line-2); display:grid; place-items:center; font-size:16px; font-weight:800; color:transparent; background:var(--sunken); transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .attend-who{ display:flex; flex-direction:column; gap:3px; } .attend-who b{ font-size:17px; font-weight:750; } .attend-who em{ font-style:normal; font-size:12px; color:var(--text-dim); } .attend-state{ margin-left:auto; font-size:12.5px; color:var(--text-dim); text-align:right; } .attend-row.on .attend-state{ color:var(--accent); font-weight:650; } /* --- the record document --- */ .record-stack{ display:flex; flex-direction:column; gap:26px; margin-top:20px; } .record{ background:var(--solid); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s7); font-size:var(--fs-sm); line-height:1.7; box-shadow:var(--shadow-sm); } .record-head{ display:flex; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:2px solid var(--line-2); } .record-brand{ font-size:16px; font-weight:750; letter-spacing:-.3px; } .record-brand b{ font-weight:850; } .record-stamp{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:2px; } .record-stamp-label{ font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-dimmer); font-weight:700; } .record-id{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; letter-spacing:.4px; } .record-stamp em{ font-style:normal; font-size:11px; color:var(--text-dim); } .record-title{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:-.025em; margin:var(--s5) 0 var(--s5); } .record-facts{ width:100%; border-collapse:collapse; margin-bottom:6px; } .record-facts th{ text-align:left; vertical-align:top; width:34%; padding:8px 14px 8px 0; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .record-facts td{ padding:8px 0; border-bottom:1px solid var(--line); vertical-align:top; } .record-facts tr:last-child td{ border-bottom:none; } .record-facts em{ font-style:normal; color:var(--text-dim); font-size:12.5px; } .record-facts .ok{ color:var(--ok-text); } .record-facts .warn{ color:var(--warn-text); } .record-facts code{ font-size:12.5px; background:var(--raise); padding:1px 6px; border-radius:5px; } .record-section{ margin-top:26px; } .record-section h3{ font-size:11px; letter-spacing:1.7px; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin-bottom:12px; padding-bottom:7px; border-bottom:1px solid var(--line); } .record-note{ font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-top:10px; } .record-grid{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13px; } .record-grid th{ font-size:11px; font-weight:700; color:var(--text-dim); text-align:right; padding:7px 9px; white-space:nowrap; } .record-grid thead th, .record-grid tbody th{ text-align:left; } .record-grid thead th:not(:first-child){ text-align:right; } .record-grid td{ text-align:right; padding:7px 9px; border-top:1px solid var(--line); } .record-grid tbody th{ font-weight:650; color:var(--text); } .record-grid .nil{ color:var(--text-dimmer); } .record-grid .tot{ font-weight:750; } .record-grid tfoot th, .record-grid tfoot td{ border-top:2px solid var(--line-2); font-weight:750; } .record-outcomes{ list-style:none; display:flex; flex-direction:column; gap:13px; } .record-outcomes li{ display:flex; flex-direction:column; gap:5px; padding-left:14px; border-left:2px solid var(--line-2); } .ro-tag{ font-size:10.5px; font-weight:750; letter-spacing:.4px; text-transform:uppercase; } .ro-text{ font-size:13.5px; line-height:1.6; } .record-misses{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:15px; } .record-misses li{ padding-left:4px; } .rm-q{ font-weight:600; } .rm-a{ font-size:13px; color:var(--text-dim); margin-top:3px; } .rm-a b{ color:var(--text); font-weight:650; } .rm-tag{ font-size:11px; color:var(--text-dimmer); margin-top:4px; } .reflection-box{ width:100%; font-family:inherit; font-size:var(--fs-sm); line-height:1.75; color:var(--text); background:var(--sunken); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:var(--s4); resize:vertical; min-height:96px; transition:border-color var(--dur-2), box-shadow var(--dur-2); } .reflection-box:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14); } .reflection-print{ display:none; } .record-foot{ margin-top:28px; padding-top:16px; border-top:1px solid var(--line); } .record-foot p{ font-size:11.5px; line-height:1.65; color:var(--text-dimmer); margin-bottom:8px; } /* --- dashboard --- */ .tiles{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; } .tile{ flex:1 1 160px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); gap:var(--s2); /* Grid rather than a reversed column: the label takes the first row whatever height it wraps to, and every tile's figure lands on the same line as its neighbours' instead of floating up with a short label and down with a long one. */ display:grid; grid-template-rows:auto 1fr; align-items:end; transition:border-color var(--dur-2) var(--ease); } .tile:hover{ border-color:var(--line-2); } .tile b{ grid-row:2; font-family:var(--font-display); font-size:1.95rem; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.05; } .tile span{ grid-row:1; font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); font-weight:700; } .year-picker{ margin-bottom:20px; } #screen-dashboard .panel{ margin-bottom:18px; } /* An empty section says what would be here and how to get it, rather than showing a bordered box with nothing in it. */ .empty-panel p{ color:var(--text-dim); font-size:var(--fs-sm); text-align:center; padding:var(--s7) var(--s5); line-height:1.7; } .empty-panel{ border-style:dashed; } /* --- wide tables --- A record's coverage grid and the dashboard tables carry more columns than a phone is wide. They scroll inside this box; the page itself does not. */ .table-scroll{ overflow-x:auto; overflow-y:hidden; max-width:100%; overscroll-behavior-x:contain; } /* width:max-content sizes the table to its columns; min-width:100% keeps it filling the box on a screen wide enough to hold it. The other way round — min-width:max-content against the table's own width:100% — feeds back on itself and blows the columns up to many times their size. */ .table-scroll > table{ width:max-content; min-width:100%; } .data-table{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; } .data-table th{ font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-dim); font-weight:700; text-align:right; padding:0 10px 11px; white-space:nowrap; } .data-table th:first-child, .data-table td:first-child{ text-align:left; } .data-table td{ padding:12px 10px; border-top:1px solid var(--line); text-align:right; vertical-align:middle; } .data-table tbody tr{ transition:background var(--dur-2) var(--ease); } .data-table tbody tr:hover{ background:var(--raise); } .data-table code{ font-size:11.5px; color:var(--text-dim); } .data-table .row-act{ width:1%; white-space:nowrap; } .btn.tiny{ padding:5px 12px; font-size:12px; } .flag-warn{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:rgba(var(--warn-rgb),.18); color:var(--warn-text); font-size:11px; font-weight:800; cursor:help; } .outcomes-panel summary{ cursor:pointer; list-style:none; } .outcomes-panel summary::-webkit-details-marker{ display:none; } .panel-head-inline{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .panel-head-inline h2{ font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-dim); } .outcomes-panel summary::after{ content:'▾'; float:right; color:var(--text-dim); margin-left:10px; } .outcomes-panel[open] summary::after{ content:'▴'; } .outcome-block{ margin-top:20px; } .outcome-block h4{ font-size:14px; font-weight:750; margin-bottom:9px; } .outcome-block ul{ list-style:none; display:flex; flex-direction:column; gap:9px; } .outcome-block li{ font-size:13px; line-height:1.6; color:var(--text-dim); padding-left:13px; border-left:2px solid var(--line); } .outcome-block li b{ color:var(--text); font-weight:700; } .quit-dialog .editor-body p{ font-size:14.5px; line-height:1.65; } @media (max-width:760px){ .doc-wrap{ padding:24px 16px 60px; } .doc-head{ gap:14px; margin-bottom:18px; } .doc-tools{ width:100%; } .doc-tools .btn, .doc-actions .btn{ flex:1 1 auto; justify-content:center; } .record{ padding:20px 18px; } /* The brand, the record number and the print button stop competing for one line. The number is the part that has to stay readable, so it takes the room and the print button drops below. */ .record-head{ flex-wrap:wrap; align-items:center; gap:8px 12px; } .record-brand{ flex:none; } .record-stamp{ flex:1 1 auto; min-width:0; } .record-head .fix-btn{ order:3; margin-left:auto; } .record-title{ font-size:17px; margin:16px 0 14px; } .record-facts th{ width:auto; display:block; padding-bottom:2px; } .record-facts td{ display:block; padding-top:0; } .data-table{ font-size:12.5px; } .data-table th, .data-table td{ padding:8px 6px; } .tiles{ gap:10px; } .tile{ padding:15px 16px; } .tile b{ font-size:26px; } .attend-row{ padding:14px; gap:12px; } .attend-who b{ font-size:16px; } } /* ================================================================ PRINT — the record as a document Everything that belongs to a screen goes away: the game chrome, the dark background, the buttons. One participant per page. ================================================================ */ @media print{ @page{ size:A4 portrait; margin:16mm 14mm; } html, body{ height:auto; overflow:visible; background:#fff; color:#111; } body::before, body::after, #confetti{ display:none !important; } .screen{ display:none !important; height:auto; } .screen.active{ display:block !important; overflow:visible; } .no-print, .fix-toast, .lang-switch, .doc-head, .hint, .year-picker, .row-act, .appbar, .landing-top, .start-bar, .topbar, .player-rail{ display:none !important; } .doc-wrap{ max-width:none; padding:0; margin:0; } .record-stack{ gap:0; } /* On paper there is no scrolling: the box stands down and the table goes back to filling the page width it is given. */ .table-scroll{ overflow:visible; } .table-scroll > table{ width:100%; min-width:0; } .record{ background:#fff; border:none; border-radius:0; padding:0; margin:0; color:#111; font-size:10.5pt; line-height:1.5; page-break-after:always; break-after:page; } .record:last-child{ page-break-after:auto; break-after:auto; } /* "🖨 this one" isolates a single record without leaving blank pages. */ body.printing-one .record{ display:none !important; } body.printing-one .record.print-only{ display:block !important; page-break-after:auto; } .record-head{ border-bottom:1.5pt solid #111; } .record-brand, .record-title, .record-facts td, .record-facts b, .record-grid tbody th, .record-grid .tot, .ro-text, .rm-q, .rm-a b, .tile b{ color:#111; } .record-stamp-label, .record-stamp em, .record-facts th, .record-facts em, .record-section h3, .record-note, .rm-a, .rm-tag, .record-grid th, .record-grid .nil{ color:#555; } .record-facts .ok{ color:#0a6b34; } .record-facts .warn{ color:#8a5a00; } .record-facts td, .record-grid td, .record-grid th{ border-color:#ccc; } .record-section h3{ border-bottom-color:#ccc; } .record-grid tfoot th, .record-grid tfoot td{ border-top-color:#111; } .record-outcomes li, .outcome-block li{ border-left-color:#bbb; } .record-facts code, .record-grid code{ background:none; } /* A textarea prints as a fixed box with its overflow cut off, so the screen copy stands down and the mirrored 
 prints instead — every
     line of it, however long the reflection ran. */
  .reflection-box{ display:none !important; }
  .reflection-print{
    display:block; white-space:pre-wrap; word-wrap:break-word;
    font-family:inherit; font-size:10.5pt; line-height:1.55; color:#111;
    border-left:2pt solid #bbb; padding-left:12pt; margin:0;
  }
  .record-foot{ border-top:1pt solid #ccc; }
  .record-foot p{ color:#555; font-size:8pt; }

  .record-section, .record-outcomes li, .record-misses li{ page-break-inside:avoid; break-inside:avoid; }
  .record-head, .record-facts{ page-break-inside:avoid; break-inside:avoid; }
}