@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans:wght@400;500;600&display=swap"); /* Foundever brand palette, pulled from the official theme.json color presets published on foundever.com (--wp--preset--color--brandpurple etc.), not a guess. Dark is the default "wallboard" look (built for a projector in a lit room), light is the alternative for players/hosts who'd rather not stare at a dark screen - see js/theme.js and the fixed toggle button near the end of in every page. Tile/accent colors (--a1..--a4) don't need to change between themes: they're independent bright backgrounds with dark text on top, not dependent on the page's own ink/chalk. */ :root{ --disp:"Space Grotesk","Trebuchet MS",sans-serif; --body:"Noto Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --pad:clamp(16px,3vw,34px); } :root,[data-theme="dark"]{ --ink:#09092d; --ink-2:#16144a; --ink-3:#241f66; --line:#3a3480; --chalk:#f3f3f7; --muted:#b0b0cd; --live:#8bf0bb; --live-rgb:139,240,187; --a1:#f9ef77; --a2:#8bf0bb; --a3:#ff8d96; --a4:#4a4af9; /* Coral (--a3) is light text on a dark page, plenty of contrast - but the same coral as text on the light theme's near-white page would read at roughly 2:1, well under WCAG AA. --danger is the theme-aware version for text/border contexts (error text, danger buttons, "wrong" verdict); --a3 itself stays put for tile backgrounds, which don't have this problem since they always carry dark text regardless of theme. */ --danger:#ff8d96; } [data-theme="light"]{ --ink:#f3f3f7; --ink-2:#ffffff; --ink-3:#e9e9f2; --line:#c4c4d8; --chalk:#09092d; --muted:#5b5b78; --live:#00813e; --live-rgb:0,129,62; --a1:#f9ef77; --a2:#8bf0bb; --a3:#ff8d96; --a4:#4a4af9; --danger:#b3324a; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--ink);color:var(--chalk);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--live);outline-offset:3px} a{color:var(--chalk)} /* wallboard strip */ .strip{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);padding:12px var(--pad); border-bottom:1px solid var(--line);background:var(--ink-2);font-family:var(--mono); font-size:clamp(11px,1.15vw,14px);letter-spacing:.09em;text-transform:uppercase; flex-wrap:wrap;position:sticky;top:0;z-index:20} .strip .cell{display:flex;align-items:baseline;gap:8px;white-space:nowrap} .strip .k{color:var(--muted)} .strip .v{font-weight:600;font-variant-numeric:tabular-nums} .strip .spacer{flex:1} .dot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:none; box-shadow:0 0 0 0 rgba(var(--live-rgb),.6);animation:ping 2s ease-out infinite} @keyframes ping{70%{box-shadow:0 0 0 9px rgba(var(--live-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--live-rgb),0)}} .dot.idle{background:var(--muted);animation:none} .dot.down{background:var(--a3);animation:none} /* layout */ .screen{display:none;min-height:100vh;min-height:100dvh;flex-direction:column} .screen.on{display:flex} .stage{flex:1;padding:var(--pad);display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px);max-width:1180px;width:100%;margin:0 auto} .stage.center{justify-content:center;align-items:center;text-align:center} h1{font-family:var(--disp);font-weight:700;font-size:clamp(28px,5vw,54px);line-height:1.04;letter-spacing:-.02em} h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.01em} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .sub{color:var(--muted);max-width:56ch;line-height:1.55} .note{font-size:13px;color:var(--muted);line-height:1.55} .err{color:var(--danger);font-size:13.5px;min-height:1.3em} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px; border-radius:16px;background:var(--chalk);color:var(--ink);font-weight:600; transition:transform .12s ease,opacity .12s ease} .btn:hover{transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--chalk);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--muted)} .btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)} .btn.big{padding:18px 34px;font-size:clamp(16px,1.5vw,19px);border-radius:20px} .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .between{justify-content:space-between} /* fields */ .field{display:flex;flex-direction:column;gap:7px;text-align:left} .field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .inp{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;width:100%} .inp:focus{border-color:var(--muted);outline:none} .inp.pin{font-family:var(--mono);font-size:clamp(28px,7vw,44px);letter-spacing:.34em;text-align:center;font-weight:600;padding:18px 10px} .panel{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);padding:clamp(16px,2.4vw,24px);display:flex;flex-direction:column;gap:16px} .divider{height:1px;background:var(--line);border:none} .card{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);padding:26px 24px;text-align:left;transition:border-color .15s ease,background .15s ease} .card:hover{border-color:var(--muted);background:var(--ink-3)} .card h3{font-family:var(--disp);font-size:22px;font-weight:700;margin-bottom:6px} .card p{color:var(--muted);font-size:14px;line-height:1.5} .picker{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));width:100%;max-width:720px} /* lobby */ .lobbygrid{display:grid;gap:clamp(18px,3vw,42px);grid-template-columns:auto auto;align-items:center;justify-content:center} .pinbox{border:1px solid var(--line);border-radius:22px;background:var(--ink-2);padding:clamp(20px,3.5vw,34px) clamp(24px,5vw,56px);text-align:center} .pinbox .pin{font-family:var(--mono);font-weight:600;font-size:clamp(52px,11vw,108px);letter-spacing:.12em;line-height:1;font-variant-numeric:tabular-nums} .pinbox .url{font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);color:var(--muted);margin-top:10px;word-break:break-all} .qr{border-radius:14px;width:clamp(150px,17vw,230px);height:auto;display:block;background:var(--chalk);padding:8px} .roster{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:1000px} .chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--ink-2);font-size:14px;font-weight:500;animation:pop .28s cubic-bezier(.2,.9,.3,1.3)} .chip.off{opacity:.42} @keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} /* question images */ .qimg{max-width:min(560px,90%);max-height:34vh;width:auto;height:auto;border-radius:12px; margin:0 auto;display:block;object-fit:contain;background:var(--ink-2)} .qimg.small{max-height:160px;max-width:280px;margin:0} /* question */ .qtext{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.9vw,46px);line-height:1.16;letter-spacing:-.02em;text-align:center;max-width:24ch;margin:0 auto} .timerwrap{display:flex;align-items:center;gap:16px;width:100%;max-width:820px;margin:0 auto} .track{flex:1;height:12px;border-radius:99px;background:var(--ink-3);overflow:hidden} .track.sm{height:8px} .fill{height:100%;width:100%;background:var(--live);border-radius:99px} .fill.warn{background:var(--a1)} .fill.crit{background:var(--a3)} .clock{font-family:var(--mono);font-weight:600;font-size:clamp(22px,3vw,34px);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right;display:inline-block} .clock.crit{color:var(--danger);animation:clockpulse .5s ease-in-out infinite} @keyframes clockpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} .answers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,16px);width:100%;max-width:960px;margin:0 auto} .ans{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:clamp(16px,2.4vw,26px); border-radius:18px;color:#09092d;font-weight:600;text-align:left;font-size:clamp(15px,1.85vw,23px); line-height:1.25;min-height:clamp(72px,11vh,124px);transition:opacity .25s ease,filter .25s ease} /* One shape per position (triangle/diamond/circle/square), the same position-to-shape pairing the whole live-quiz genre uses (Kahoot etc) so an option is identifiable by shape and color together, not just a letter. */ .ans .tag{background:rgba(9,9,45,.16); border-radius:8px;width:1.9em;height:1.9em;display:grid;place-items:center;flex:none} .ans .tag svg{width:58%;height:58%;fill:currentColor} .ans .txt{flex:1;position:relative} .ans .bar{position:absolute;inset:0 auto 0 0;width:0;background:rgba(9,9,45,.17);transition:width .6s cubic-bezier(.2,.8,.2,1)} .ans .n{font-family:var(--mono);font-weight:600;font-size:.85em;position:relative;font-variant-numeric:tabular-nums} .ans.c1{background:var(--a1)} .ans.c2{background:var(--a2)} .ans.c3{background:var(--a3)} .ans.c4{background:var(--a4)} .ans.dim{opacity:.26;filter:saturate(.4)} .ans.hit{box-shadow:0 0 0 3px var(--chalk);animation:tilepop .5s ease} @keyframes tilepop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}} .counter{font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums} /* leaderboard */ .board{width:100%;max-width:660px;margin:0 auto;display:flex;flex-direction:column;gap:8px} .lrow{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;gap:14px;padding:14px 18px; border-radius:14px;background:var(--ink-2);border:1px solid var(--line); animation:slidein .35s cubic-bezier(.2,.9,.3,1) backwards} @keyframes slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} .lrow .rank{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums} .lrow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lrow .pts{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums} .lrow.p1{background:linear-gradient(90deg,rgba(249,239,119,.2),var(--ink-2))} .lrow.detail{grid-template-columns:2.4em 1fr auto auto} .lrow.detail .acc{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;justify-self:end} .lrow.head{background:transparent;border:none;padding:4px 18px;animation:none} .lrow.head span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* text/numeric question and reveal (no tile grid to show) */ .resplist{display:flex;flex-direction:column;gap:10px;width:100%;max-width:760px;margin:0 auto} .respitem{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);padding:14px 18px; display:flex;gap:14px;align-items:baseline;animation:slidein .3s cubic-bezier(.2,.9,.3,1) backwards} .respitem .who{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;min-width:8ch} .respitem .what{flex:1;font-size:16px;line-height:1.4} .respitem .dist{font-family:var(--mono);font-size:12.5px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums} .respitem.hit{border-color:var(--live)} .placeholder{color:var(--muted);text-align:center;font-size:15px;padding:30px 0} /* dashboard */ .stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));width:100%} .stat{border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:16px 18px;text-align:left} .stat .n{font-family:var(--mono);font-weight:600;font-size:clamp(20px,2.6vw,28px);font-variant-numeric:tabular-nums;display:block} .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block} .qitem.click{cursor:pointer;transition:border-color .15s ease,background .15s ease} .qitem.click:hover{border-color:var(--muted);background:var(--ink-3)} /* per-question accuracy */ .qbars{display:flex;flex-direction:column;gap:8px;width:100%} .qbar{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2)} .qbar .qb-head{display:flex;justify-content:space-between;gap:14px;font-size:13.5px} .qbar .qb-head .qtxt{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qbar .qb-head .qpct{font-family:var(--mono);color:var(--muted);flex:none;font-variant-numeric:tabular-nums} .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;width:100%;max-width:660px;margin:0 auto} .pod{border:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--ink-2);padding:18px 12px; text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:flex-end} .pod .pn{font-weight:600;font-size:clamp(14px,1.6vw,18px);overflow:hidden;text-overflow:ellipsis} .pod .ps{font-family:var(--mono);color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums} .pod .medal{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4vw,40px)} .pod.r1{min-height:190px;border-color:var(--a1)} .pod.r1 .medal{color:var(--a1)} .pod.r2{min-height:150px} .pod.r2 .medal{color:var(--muted)} .pod.r3{min-height:126px} .pod.r3 .medal{color:var(--a1);opacity:.62} /* editor */ .qlist{display:flex;flex-direction:column;gap:10px;width:100%} .qitem{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);padding:14px 16px;display:flex;gap:14px;align-items:flex-start} .qitem .idx{font-family:var(--mono);color:var(--muted);font-size:13px;padding-top:2px;flex:none} .qitem .body{flex:1;min-width:0} .qitem .qt{font-weight:600;margin-bottom:6px;line-height:1.35} .qitem .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.05em;display:flex;gap:14px;flex-wrap:wrap} .qitem .acts{display:flex;gap:6px;flex:none} .iconbtn{border:1px solid var(--line);border-radius:9px;width:32px;height:32px;display:grid;place-items:center;color:var(--muted);font-size:15px} .iconbtn:hover{color:var(--chalk);border-color:var(--muted)} .editgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .optrow{display:flex;gap:10px;align-items:center} .optrow .swatch{width:12px;height:32px;border-radius:4px;flex:none} .optrow .correct{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);cursor:pointer;flex:none;white-space:nowrap} .optrow input[type=radio],.optrow input[type=checkbox]{accent-color:var(--live);width:17px;height:17px;cursor:pointer} /* player */ .verdict{font-family:var(--disp);font-weight:700;font-size:clamp(34px,8vw,64px);letter-spacing:-.03em;line-height:1} .verdict.good{color:var(--live)} .verdict.bad{color:var(--danger)} .bigpts{font-family:var(--mono);font-weight:600;font-size:clamp(30px,7vw,50px);font-variant-numeric:tabular-nums} .pulse{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--live);animation:spin 1s linear infinite;margin:0 auto} @keyframes spin{to{transform:rotate(360deg)}} .pad{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:52vh} .pad .ans{min-height:0;justify-content:center;text-align:center;font-size:clamp(15px,4.2vw,22px)} .pad .ans .txt{flex:0 1 auto;text-align:center} .pad .ans.picked{box-shadow:inset 0 0 0 4px var(--chalk)} .pad .ans.faded{opacity:.3} .pad.multi .btn{grid-column:1 / -1} .pad.stack{display:flex;flex-direction:column;gap:14px;justify-content:center} .pad.stack textarea.inp{min-height:110px;resize:vertical} /* offline banner */ .offline{position:fixed;left:0;right:0;bottom:0;background:var(--a3);color:#fff;padding:10px var(--pad); font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center; transform:translateY(110%);transition:transform .25s ease;z-index:60} .offline.on{transform:none} /* theme toggle: one fixed button, present once per page regardless of which .screen is on, so it's always reachable. Bottom-right is the one corner no screen already puts content in. */ .themetoggle{position:fixed;right:16px;bottom:16px;z-index:55;width:38px;height:38px;border-radius:50%; border:1px solid var(--line);background:var(--ink-2);color:var(--chalk);display:grid;place-items:center; cursor:pointer;transition:border-color .15s ease} .themetoggle:hover{border-color:var(--muted)} .themetoggle svg{width:18px;height:18px} /* admin dashboard tabs */ .tab{opacity:.7} .tab.active{opacity:1;color:var(--chalk)} .tabpage{display:none} .tabpage.on{display:flex} /* confetti burst: JS spawns a handful of these on a game/attempt finishing, then removes them once the fall animation ends. */ .confetti-piece{position:fixed;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.95; pointer-events:none;z-index:70;animation:confettifall linear forwards} @keyframes confettifall{to{transform:translateY(105vh) rotate(600deg);opacity:.3}} /* streak badge: shown on a player's own result when they're a few correct answers into a row, surfacing the streak bonus that already exists in scoring but otherwise never shows up anywhere in the UI. */ .streakbadge{display:inline-flex;align-items:center;gap:6px;background:var(--a1);color:#09092d; font-weight:700;padding:7px 16px;border-radius:999px;font-family:var(--mono);font-size:14px; margin-top:4px;animation:pop .3s cubic-bezier(.2,.9,.3,1.3)} .streakbadge svg{width:15px;height:15px;fill:currentColor} @media (max-width:760px){ .lobbygrid{grid-template-columns:1fr} } @media (max-width:620px){ .answers{grid-template-columns:1fr} .podium{gap:8px} .qitem{flex-wrap:wrap} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }