@font-face{font-family:'Fraunces';src:url('/static/fonts/Fraunces-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('/static/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('/static/fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('/static/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('/static/fonts/Archivo-Variable.ttf') format('truetype-variations');font-weight:100 900;font-display:swap}

:root{
  --orange:#4EA8DE;--deep:#3F86B5;--light:#6FBEEA;--ink:#17141F;--ink2:#221C2E;
  --cream:#FBF3E7;--muted:#9a8f7d;--line:rgba(255,255,255,.08);
  /* themeable surface tokens — [data-theme="light"] below swaps these */
  --bg:#17141F;--fg:#FBF3E7;
  --surface:rgba(255,255,255,.04);--surface-soft:rgba(255,255,255,.03);
  --surface-strong:rgba(255,255,255,.08);--field:rgba(255,255,255,.05);
  --field-focus:rgba(255,255,255,.07);--track:rgba(255,255,255,.10);
  --artbg:#2a2436;--glow:rgba(78,168,222,.20);--fade:rgba(23,20,31,.85);
  --grad:linear-gradient(135deg,#6FBEEA 0%,#3F86B5 100%);
  /* Type: the app matches the board — Archivo everywhere (was Fraunces + Poppins). */
  --serif:'Archivo',system-ui,-apple-system,sans-serif;--sans:'Archivo',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(900px 500px at 80% -8%,var(--glow),transparent 60%),var(--bg)}
a{color:inherit;text-decoration:none}
.wrap{max-width:640px;margin:0 auto;padding:20px 18px 120px;min-height:100%}
.serif{font-family:var(--serif)}
.mut{color:var(--muted)}
.center{text-align:center}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 18px}
/* Brand lockup, shared by every page (guest, admin, platform, landing) so they
   all read as one brand and match the board (host.html .venue): the foxtail-R
   mark is the "R", with "eynard" + a "TRIVIA" kicker beside it — half the mark's
   height, bottom-aligned, tucked under the flame (mark paints on top). Any page
   tagline ("— admin") sits after it, same font, quieter. */
.logo{display:flex;align-items:flex-end;gap:0;min-width:0}
.logo .lm{height:42px;width:auto;display:block}
.logo .m{height:40px;position:relative;z-index:1;flex-shrink:0}
.logo .m img,.logo .m svg{height:100%;width:auto;display:block}
.logo .lw{display:flex;flex-direction:column;justify-content:flex-end;line-height:1;margin-left:8px}
.logo .t{font-family:'Archivo',var(--sans);font-weight:800;letter-spacing:-.01em;font-size:19px;line-height:1;color:var(--fg)}
.logo .tk{font-family:'Archivo',var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.22em;
  font-size:8px;line-height:1;color:var(--fg);margin-top:2px;margin-left:1px}
.logo .tag{font-family:'Archivo',var(--sans);font-weight:700;font-size:12px;color:var(--muted);line-height:1;
  align-self:flex-end;margin-left:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:340px){ .logo .tag{display:none} }
@media (max-width:430px){ #console .logo .tag{display:none} }
.pill{font-size:12px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;background:var(--surface-soft)}

/* buttons */
.btn{font-family:var(--sans);font-weight:600;font-size:16px;border:0;border-radius:14px;
  padding:15px 20px;cursor:pointer;color:#fff;background:var(--grad);width:100%;
  box-shadow:0 12px 26px -12px rgba(63,134,181,.7);transition:transform .06s ease,filter .15s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn.sm{width:auto;font-size:14px;padding:11px 16px;border-radius:11px}
.btn:disabled{filter:grayscale(.4) opacity(.5);cursor:default}

input.field,textarea.field{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:16px;color:var(--fg);
  background:var(--field);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;outline:none}
input.field:focus,textarea.field:focus{border-color:rgba(78,168,222,.6);background:var(--field-focus)}
input.code{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-weight:700;font-size:26px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.stack{display:flex;flex-direction:column;gap:12px}
/* the hidden attribute must beat any display: rule, or a hidden .stack or
   .row still lays itself out */
[hidden]{display:none !important}
.row{display:flex;align-items:center;gap:12px}
.spread{justify-content:space-between}

/* landing hero */
.hero{text-align:center;padding:34px 0 12px}
.hero .mark{width:96px;height:96px;color:var(--orange);margin:0 auto 22px}
.hero .mark svg{width:100%;height:100%}
.hero h1{font-family:var(--serif);font-weight:600;font-size:52px;line-height:1;letter-spacing:-.01em}
.hero p{color:var(--muted);margin-top:10px;font-size:16px;letter-spacing:.02em}
.sep{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;margin:6px 0}
.sep::before,.sep::after{content:"";height:1px;background:var(--line);flex:1}

/* now playing */
.np{display:flex;gap:16px;align-items:center}
.np .art{width:76px;height:76px;border-radius:14px;flex-shrink:0;overflow:hidden;
  background:var(--artbg);display:flex;align-items:center;justify-content:center}
.np .art img{width:100%;height:100%;object-fit:cover}
.np .meta{min-width:0;flex:1}
.np .meta .ti{font-weight:600;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .meta .ar{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .badge{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:6px}
.progress{height:5px;border-radius:3px;background:var(--track);margin-top:14px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;background:var(--grad);border-radius:3px;transition:width .4s linear}
.times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}

.controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:16px}
.ctl{width:52px;height:52px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctl.big{width:66px;height:66px;background:var(--grad);border:0;box-shadow:0 12px 26px -12px rgba(63,134,181,.7)}
.ctl svg{width:22px;height:22px;fill:currentColor}
.ctl.big svg{width:26px;height:26px;fill:#fff}

/* section headers */
.h{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 12px}
.h .ttl{font-family:var(--serif);font-size:20px;font-weight:600}
.h .n{color:var(--muted);font-size:13px}

/* track rows */
.list{display:flex;flex-direction:column;gap:8px}
.trk{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;
  background:var(--surface-soft);border:1px solid var(--line)}
.trk .art{width:46px;height:46px;border-radius:9px;flex-shrink:0;overflow:hidden;background:var(--artbg);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}
.trk .art img{width:100%;height:100%;object-fit:cover}
.trk .m{flex:1;min-width:0}
.trk .m .ti{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .m .ar{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank{width:22px;text-align:center;color:var(--muted);font-weight:700;font-size:14px;flex-shrink:0}

/* vote control */
.vote{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vbtn.on{background:var(--grad);border:0;color:#fff}
.vbtn svg{width:15px;height:15px;fill:currentColor}
.vcount{min-width:26px;text-align:center;font-weight:700;font-size:15px}
.addbtn{width:36px;height:36px;border-radius:10px;border:0;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.addbtn.added{background:var(--surface-strong);color:var(--muted)}
.addbtn svg{width:18px;height:18px;fill:currentColor}

.empty{text-align:center;color:var(--muted);padding:34px 10px;font-size:14px}
.empty .m{width:52px;height:52px;color:rgba(78,168,222,.5);margin:0 auto 12px}

/* code + qr share */
.share{text-align:center}
.codebig{font-family:var(--serif);font-weight:600;font-size:56px;letter-spacing:.14em;line-height:1;margin:4px 0 2px}
.qr{width:172px;height:172px;background:#fff;border-radius:16px;padding:12px;margin:16px auto 6px}
.qr img,.qr canvas{width:100%;height:100%;display:block}
.joinurl{font-size:13px;color:var(--muted);word-break:break-all}

/* sticky search bar on join */
.searchbar{position:sticky;top:0;z-index:5;padding:10px 0 12px;background:linear-gradient(var(--bg),var(--fade));backdrop-filter:blur(6px)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}

/* host moderation buttons on queue rows */
.hostops{display:flex;gap:4px;flex-shrink:0;margin-left:2px}
.hostops .vbtn{width:28px;height:28px;border-radius:8px;color:var(--muted)}
.hostops .vbtn:hover{color:var(--fg);border-color:rgba(78,168,222,.6)}
.hostops .vbtn svg{width:13px;height:13px}

/* guest genre chips */
.genrechips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.genrechips::-webkit-scrollbar{display:none}
.gchip{font-family:var(--sans);font-size:13px;color:var(--fg);background:var(--surface);
  user-select:none;-webkit-user-select:none;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.gchip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}

/* shared tab bar + sub-tab bar (uppercase, letter-spaced, orange underline) */
.tabs{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--line);
  justify-content:safe center;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;
  margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab.on{color:var(--orange);border-bottom-color:var(--orange)}
.subtabs{display:flex;gap:20px;margin:4px 0 16px;border-bottom:1px solid var(--line);
  justify-content:safe center;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:9px 2px;
  margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.subtab.on{color:var(--orange);border-bottom-color:var(--orange)}
/* sub-tabs fade/rise in, staggered, whenever their (hidden-toggled) panel appears */
@keyframes reynardTabRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: no-preference){
  .subtabs .subtab{animation:reynardTabRise .3s ease both}
  .subtabs .subtab:nth-child(1){animation-delay:.02s}
  .subtabs .subtab:nth-child(2){animation-delay:.10s}
  .subtabs .subtab:nth-child(3){animation-delay:.18s}
  .subtabs .subtab:nth-child(4){animation-delay:.26s}
  .subtabs .subtab:nth-child(n+5){animation-delay:.32s}
}

/* Sign-in sheet: rises from the bottom on a phone, which is where a thumb
   already is, and centres on anything wider. */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
/* --bg, not --surface: the surface token is a translucent glass fill, which
   reads fine on a card but leaves a modal you can see the queue through. */
.sheetbox{position:relative;width:100%;max-width:460px;background:var(--bg);
  border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;box-shadow:0 -18px 50px rgba(0,0,0,.4)}
.sheettitle{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:6px;padding-right:34px}
.sheetx{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer}
.sheetx:hover{color:var(--fg)}
@media (min-width:560px){
  .sheet{align-items:center;padding:20px}
  .sheetbox{border-radius:20px;border-bottom:1px solid var(--line)}
}
.hintok{color:#4ea87a}
.hintbad{color:var(--orange)}
.tab:hover{color:var(--fg)}

/* ---- light theme ---- */
[data-theme="light"]{
  --bg:#FBF7F0;--fg:#1E1A24;--muted:#6B6357;--line:rgba(30,26,36,.14);
  --surface:rgba(30,26,36,.04);--surface-soft:rgba(30,26,36,.03);
  --surface-strong:rgba(30,26,36,.08);--field:#fff;--field-focus:#fff;
  --track:rgba(30,26,36,.14);--artbg:#E7DFD2;--glow:rgba(78,168,222,.14);
  --fade:rgba(251,247,240,.85);
}
[data-theme="light"] .btn{color:#fff}
/* …but ghost buttons are transparent, so white text would vanish on cream */
[data-theme="light"] .btn.ghost{color:var(--fg)}

/* theme toggle */
.themebtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0}
.themebtn svg{width:17px;height:17px;fill:currentColor}
.themebtn .i-sun{display:none}
[data-theme="light"] .themebtn .i-sun{display:block}
[data-theme="light"] .themebtn .i-moon{display:none}

/* powered-by lockup: one artwork per theme */
.pb-light{display:none}
[data-theme="light"] .pb-dark{display:none}
[data-theme="light"] .pb-light{display:inline-block}

/* A–Z row on the guest page. Letters with nothing behind them are not drawn at
   all rather than drawn disabled: a short row of live letters is easier to aim
   at on a phone than a full alphabet that is mostly dead. */
/* Twenty-seven buttons over exactly two centred rows. The width is derived
   from PER_ROW rather than left to wrap, so the row count doesn't change with
   the screen — and justify-content centres the shorter second line. */
.alpha{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:0 2px 10px}
.alpha button{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--fg);
  user-select:none;-webkit-user-select:none;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  flex:0 0 calc((100% - 13 * 4px) / 14);
  height:34px;padding:0;cursor:pointer}
.alpha button.on{background:var(--grad);border-color:transparent;color:#fff}
.gchip .n{opacity:.55;font-weight:400;margin-left:5px}
.gchip.on .n{opacity:.8}

/* Reusable on/off toggle switch (shared by the platform + venue consoles). */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;border-radius:999px;cursor:pointer;
  background:var(--track);border:1px solid var(--line);transition:background .15s,border-color .15s}
.switch .sl::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.switch input:checked + .sl{background:var(--orange);border-color:var(--orange)}
.switch input:checked + .sl::before{transform:translateX(18px)}
.switch input:focus-visible + .sl{outline:2px solid var(--orange);outline-offset:2px}