/* ══════════════════════════════════════════════════════════════
   DAWG HOUSE DUEL — brand + stage styles
   Palette pulled straight off the dawghouse wordmark.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Sampled straight out of assets/brand/logo-source.png */
  --indigo-950:#0e0e2d;
  --indigo-900:#17174c;
  --indigo-800:#21216e;
  --indigo:#32328d;          /* logo background */
  --indigo-600:#3b3bc4;
  --indigo-400:#6e6ed3;
  --lime:#deff66;            /* logo lettering */
  --lime-hot:#e9ff99;
  --lime-deep:#a4c72e;
  --red:#ff4d5e;
  --p1:#8ea2ff;          /* second player's accent — indigo side of the brand */

  /* One set of page margins, so a screen doesn't invent its own. Every
     full-page screen except the duel uses these; the duel is deliberately
     tighter because the board wants the room. */
  --pad-y:clamp(14px,2.4vh,28px);
  --pad-x:clamp(16px,3.2vw,40px);
  --pad-bottom:clamp(22px,4vh,48px);
  --page-max:1120px;
  --bar-min:44px;
  --amber:#ffc247;
  --paper:#ffffff;

  /* Drop a real brand face at assets/brand/brand.woff2 and it takes over
     everywhere; otherwise Luckiest Guy carries the hand-lettered weight. */
  --ff-display:'DawgHouse Brand','Luckiest Guy','Archivo Black','Arial Black',Impact,sans-serif;
  --ff-cond:'Barlow Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
  --ff-ui:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pod-w:clamp(190px,17vw,300px);
  --ease:cubic-bezier(.2,.9,.25,1);
}

/* The real brand face, when there is one. Commented out because a missing
   font file is three 404s on every page load for every visitor — drop
   brand.woff2 (or .otf/.ttf) into assets/brand/ and uncomment. Until then
   --ff-display falls through to Luckiest Guy, which is the closer match. */
/*
@font-face{
  font-family:'DawgHouse Brand';
  src:url('../assets/brand/brand.woff2') format('woff2'),
      url('../assets/brand/brand.otf')   format('opentype'),
      url('../assets/brand/brand.ttf')   format('truetype');
  font-weight:400 900;font-display:swap;
}
*/

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* beats the display:flex/grid set below */
html,body{height:100%}
body{
  margin:0;
  background:var(--indigo);
  color:var(--paper);
  font-family:var(--ff-ui);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* ── stage + house lighting ───────────────────────────────── */
.stage{
  position:fixed;inset:0;
  background:
    radial-gradient(120% 85% at 50% -10%, var(--indigo-600) 0%, rgba(59,59,196,0) 62%),
    radial-gradient(90% 70% at 50% 118%, rgba(222,255,102,.16) 0%, rgba(222,255,102,0) 60%),
    linear-gradient(180deg,var(--indigo) 0%,var(--indigo-900) 58%,var(--indigo-950) 100%);
}
.stage::after{ /* fine grid so flat indigo doesn't read dead on camera */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%);
}
.screen{position:absolute;inset:0;display:none;flex-direction:column;z-index:1}
html[data-screen="welcome"] .screen--welcome,
html[data-screen="setup"] .screen--setup,
html[data-screen="duel"]  .screen--duel,
html[data-screen="media"] .screen--media,
html[data-screen="builder"] .screen--builder{display:flex}

/* ── brandmark ────────────────────────────────────────────── */
.brandmark{display:flex;align-items:center;gap:.5em;line-height:1;user-select:none}
.brandmark--stack{flex-direction:column;gap:.15em}
.brandmark.has-logo .brandmark__text{display:none}
.brandmark__img{height:clamp(74px,10vw,168px);width:auto;object-fit:contain}
.brandmark--stack .brandmark__img{padding-top:1.5rem;box-sizing:content-box}
.brandmark--inline .brandmark__img{height:clamp(26px,3vw,48px);flex:none}
.brandmark--inline{min-width:0;flex-wrap:nowrap}
.brandmark__text{
  font-family:var(--ff-display);
  color:var(--lime);
  font-size:clamp(38px,6.2vw,104px);
  letter-spacing:-.02em;
  transform:rotate(-2.2deg) skewX(-4deg);
  text-shadow:0 .045em 0 rgba(14,14,45,.55);
}
.brandmark__text em{font-style:normal;display:block;font-size:.56em;letter-spacing:.01em;margin-top:-.12em;transform:translateX(.18em) rotate(1.4deg)}
.brandmark--inline .brandmark__text{font-size:clamp(20px,2.2vw,34px);display:flex;gap:.28em;align-items:baseline}
.brandmark--inline .brandmark__text em{display:inline;font-size:.72em;margin:0;transform:none}
.brandmark__duel{
  font-family:var(--ff-cond);font-weight:900;
  background:var(--lime);color:var(--indigo);
  padding:.1em .5em .16em;border-radius:.14em;
  letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(14px,1.9vw,30px);
  transform:rotate(-1.4deg);
  box-shadow:0 .1em 0 rgba(14,14,45,.5);
}
.brandmark--stack .brandmark__duel{margin-top:.35em}
.brandmark--inline .brandmark__duel{font-size:clamp(10px,1.05vw,15px)}

/* ══════════════════ SETUP ══════════════════ */
.screen--setup{overflow-y:auto;align-items:center;justify-content:flex-start;padding:4vh 5vw}
.setup__inner{width:min(1040px,100%);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,30px)}
.setup__tag{margin:0;font-size:clamp(15px,1.5vw,22px);letter-spacing:.06em;color:rgba(255,255,255,.72);text-transform:uppercase;font-weight:600}
.setup__tag b{color:var(--lime)}
.setup__foot{margin:0;font-size:clamp(12px,1.05vw,15px);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.setup__foot b{color:var(--lime);font-weight:800}

.panel{
  width:100%;
  background:linear-gradient(180deg,rgba(14,14,45,.72),rgba(14,14,45,.5));
  border:2px solid rgba(222,255,102,.28);
  border-radius:20px;
  padding:clamp(16px,2.4vw,32px);
  display:flex;flex-direction:column;gap:clamp(12px,1.8vh,22px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(4px);
}
.row{display:grid;gap:clamp(10px,1.5vw,20px)}
.row--players{grid-template-columns:1fr auto 1fr;align-items:end}
.row--3{grid-template-columns:repeat(3,1fr)}
.row--4{grid-template-columns:repeat(4,1fr)}
.row--4{grid-template-columns:repeat(4,1fr)}
.row--toggles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding-top:2px}
.row--go{grid-template-columns:2fr repeat(4,1fr);align-items:stretch;padding-top:4px}
.vs{font-family:var(--ff-display);color:var(--lime);font-size:clamp(20px,2.6vw,40px);padding-bottom:.28em;transform:rotate(-4deg)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font-size:clamp(11px,1vw,14px);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--lime)}
.field__label i{font-style:normal;color:rgba(255,255,255,.4);letter-spacing:.08em}
.input{
  width:100%;background:rgba(14,14,45,.85);
  border:2px solid var(--indigo-600);border-radius:11px;
  padding:.6em .75em;font-weight:700;font-size:clamp(15px,1.45vw,21px);
  letter-spacing:.04em;outline:none;transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.2em}
select.input option{background:var(--indigo-900);color:#fff}
.input:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(222,255,102,.18)}
.input--name{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(18px,2vw,30px);letter-spacing:.02em;text-align:center}
.field--p1 .input--name{color:var(--lime)}
.field--p2 .input--name{color:var(--lime)}

.toggle{display:flex;align-items:center;gap:.55em;cursor:pointer;font-size:clamp(13px,1.15vw,17px);font-weight:600;color:rgba(255,255,255,.82);user-select:none}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{width:2.6em;height:1.4em;border-radius:1em;background:var(--indigo-800);border:2px solid var(--indigo-600);position:relative;flex:none;transition:.18s}
.toggle span::after{content:"";position:absolute;top:50%;left:3px;width:.95em;height:.95em;border-radius:50%;background:rgba(255,255,255,.55);transform:translateY(-50%);transition:.18s var(--ease)}
.toggle input:checked + span{background:var(--lime);border-color:var(--lime)}
.toggle input:checked + span::after{background:var(--indigo);left:calc(100% - 1.2em)}
.toggle input:focus-visible + span{box-shadow:0 0 0 4px rgba(222,255,102,.25)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  border:2px solid var(--lime);border-radius:12px;cursor:pointer;
  font-family:var(--ff-cond);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  padding:.7em 1em;background:transparent;color:var(--lime);
  transition:transform .12s var(--ease),background .15s,color .15s,box-shadow .15s;
  font-size:clamp(14px,1.3vw,19px);min-height:52px;
}
.btn i{font-style:normal;opacity:.6;font-size:.82em}
.btn b{font-weight:900;opacity:.65;font-size:.85em;margin-left:.4em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--go{background:var(--lime);color:var(--indigo);box-shadow:0 8px 0 var(--lime-deep),0 20px 40px -14px rgba(222,255,102,.6)}
.btn--go:hover{background:var(--lime-hot);box-shadow:0 10px 0 var(--lime-deep),0 26px 48px -14px rgba(222,255,102,.7)}
.btn--go:active{box-shadow:0 3px 0 var(--lime-deep);transform:translateY(5px)}
.btn--ghost{border-color:var(--indigo-400);color:rgba(255,255,255,.86)}
.btn--quiet{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6);font-size:clamp(12px,1.15vw,16px)}
.btn--quiet:hover{border-color:var(--lime);color:var(--lime)}
.btn--host{border-color:var(--lime);color:var(--lime)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--sm{padding:.45em .8em;font-size:clamp(12px,1.05vw,15px);border-radius:9px;min-height:40px}
.btn--danger:hover{border-color:var(--red);color:var(--red)}

/* ── pair-your-phone panel ── */
.pair{
  width:100%;display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  border:2px dashed rgba(222,255,102,.36);border-radius:16px;
  padding:clamp(10px,1.6vh,18px) clamp(14px,2vw,26px);
  background:rgba(14,14,45,.4);
}
.pair__left{flex:1;min-width:230px;display:flex;flex-direction:column;gap:.2em}
.pair__eyebrow{font-size:clamp(10px,1vw,14px);letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--lime)}
.pair__how{margin:0;font-size:clamp(13px,1.25vw,18px);color:rgba(255,255,255,.72);font-weight:600}
.pair__how b{color:#fff;font-weight:800}
.pair__state{font-size:clamp(10px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.4)}
.pair__state.is-on{color:var(--lime)}
.pair__state.is-wait{color:var(--amber)}
.pair__state.is-off{color:var(--red)}
.pair__right{display:flex;flex-direction:column;align-items:center;gap:.25em}
.pair__code{
  font-family:var(--ff-display);color:var(--indigo);background:var(--lime);
  font-size:clamp(28px,4.4vw,58px);letter-spacing:.14em;text-indent:.14em;line-height:1;
  /* The display face carries its ink 0.158em above the line box's centre, so
     the top padding has to run twice that heavier than the bottom to sit the
     code in the middle. Even padding prints it high. */
  padding:.417em .34em .123em;border-radius:12px;box-shadow:0 5px 0 var(--lime-deep);
}
.pair__new{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.42);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:2px}
.pair__new:hover{color:var(--lime)}

/* ══════════════════ WELCOME ══════════════════ */
.screen--welcome{align-items:center;justify-content:flex-start;
  padding:var(--pad-y) var(--pad-x) var(--pad-bottom);overflow-y:auto}
/* Centred by auto margins, not justify-content — see the note above
   .ovl. On a short window the logo has to stay reachable. */
.welcome{margin-block:auto}
.welcome{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,34px);text-align:center;max-width:760px}
.welcome__pitch{margin:0;font-size:clamp(17px,2.1vw,28px);font-weight:600;line-height:1.45;color:rgba(255,255,255,.82)}
.welcome__pitch b{color:var(--lime);font-weight:800}
.welcome__acts{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,22px);align-items:center;width:min(440px,100%)}
/* One height down the stack. PLAY still leads — on the lime fill and a
   bigger type size — rather than by being a different shape to its
   neighbours. */
.welcome__acts .btn{width:100%;min-height:clamp(58px,7vh,72px);padding-block:.35em}
.welcome__acts .btn--huge{font-size:clamp(20px,2.2vw,30px)}
.btn--huge{font-size:clamp(22px,2.8vw,38px);padding:.62em 1.4em}
.welcome__how{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.6);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:clamp(12px,1.2vw,15px);
  border-bottom:2px solid rgba(255,255,255,.2);padding:.2em 0}
.welcome__how:hover{color:var(--lime);border-color:var(--lime)}
.welcome__stats{margin:0;font-size:clamp(12px,1.2vw,16px);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.42)}
.welcome__stats b{color:var(--lime)}

/* ── today's challenge ── */
.daily{
  width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:.15em;cursor:pointer;
  border:3px solid var(--lime);border-radius:18px;background:rgba(222,255,102,.1);
  padding:clamp(12px,2vh,20px) clamp(14px,2vw,24px);text-align:center;
  transition:transform .12s var(--ease),background .16s;
}
.daily:hover{transform:translateY(-2px);background:rgba(222,255,102,.16)}
.daily__label{font-family:var(--ff-cond);font-weight:900;letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(10px,1.05vw,14px);color:var(--lime-deep)}
.daily__cat{font-family:var(--ff-display);color:var(--lime);font-size:clamp(20px,2.6vw,34px);line-height:1.05}
.daily__meta{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(10px,1.05vw,14px);color:rgba(255,255,255,.6)}
.daily.is-done{border-color:var(--indigo-400);background:rgba(110,110,211,.14)}
.daily.is-done .daily__cat{color:#fff}

/* ── shareable marks ── */
.result__marks{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:.2em 0 .1em}
.result__marks[hidden]{display:none}
.result__marks i{width:clamp(16px,2.2vw,26px);height:clamp(16px,2.2vw,26px);border-radius:5px;display:block}
.result__marks i.hit{background:var(--lime)}
.result__marks i.miss{background:var(--indigo-600)}

/* ══════════════════════════════════════════════════════════════
   Make a deck
   ══════════════════════════════════════════════════════════════ */
.screen--builder{flex-direction:column;overflow:hidden;padding-top:var(--pad-y)}
.builder{flex:1;overflow-y:auto;padding:var(--pad-y) var(--pad-x) var(--pad-bottom);
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);width:100%;
  max-width:var(--page-max);margin-inline:auto}
.builder__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.builder__how{margin:0;font-size:clamp(12px,1.2vw,15px);line-height:1.45;color:rgba(255,255,255,.6);
  border-left:3px solid var(--indigo-600);padding-left:12px}
.builder__how b{color:#fff}
.builder__rows{display:flex;flex-direction:column;gap:10px}
.builder__acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.builder__count{margin-left:auto;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.45)}

.deckrow{display:grid;gap:10px;align-items:center;
  grid-template-columns:96px minmax(0,1.1fr) minmax(0,1.4fr) 44px;
  background:rgba(255,255,255,.04);border:2px solid var(--indigo-600);
  border-radius:14px;padding:10px}
.deckrow__pic{position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;
  background:var(--indigo-950);border:2px dashed rgba(255,255,255,.22);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.deckrow__pic img{width:100%;height:100%;object-fit:cover;display:block}
.deckrow__pic span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);text-align:center;padding:4px}
.deckrow__pic.has-pic{border-style:solid;border-color:var(--lime)}
.deckrow__pic:hover{border-color:var(--lime)}
.deckrow__kill{width:44px;height:44px;border-radius:10px;background:transparent;
  border:2px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.deckrow__kill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.deckrow__kill:hover{border-color:var(--red);color:var(--red)}

@media (max-width:720px), (pointer:coarse){
  .deckrow{grid-template-columns:96px minmax(0,1fr) 44px;grid-template-areas:'pic answer kill' 'pic prompt kill'}
  .deckrow__pic{grid-area:pic}
  .deckrow__kill{grid-area:kill}
  .deckrow .input--answer{grid-area:answer}
  .deckrow .input--prompt{grid-area:prompt}
}

/* ── the share / import cards ── */
.deckshare{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.8vh,18px);width:min(560px,100%);
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  border:3px solid var(--lime);border-radius:22px;
  padding:clamp(26px,4vh,44px) clamp(20px,3vw,40px)}
.deckshare .shot__close{position:absolute;top:10px;right:10px}
.deckshare__eyebrow{letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;font-weight:900;
  font-size:clamp(10px,1.1vw,14px);color:var(--lime)}
.deckshare__code{font-family:var(--ff-display);color:var(--indigo);background:var(--lime);
  font-size:clamp(38px,7vw,72px);letter-spacing:.16em;text-indent:.16em;line-height:1;
  padding:.417em .3em .123em;border-radius:14px;box-shadow:0 5px 0 var(--lime-deep)}
.deckshare__how{margin:0;font-size:clamp(13px,1.3vw,17px);color:rgba(255,255,255,.7);line-height:1.4}
.deckshare__how b{color:#fff}
.deckshare__acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.deckshare__acts .btn{flex:1 1 0;min-width:0}
.deckshare__form{display:flex;gap:10px;width:100%}
.deckshare__input{flex:1;min-width:0;background:rgba(14,14,45,.9);border:3px solid var(--indigo-600);
  border-radius:14px;color:var(--lime);font-family:var(--ff-display);
  font-size:clamp(26px,7vw,42px);letter-spacing:.18em;text-align:center;text-transform:uppercase;
  padding:.24em .1em .3em;outline:none}
.deckshare__input:focus{border-color:var(--lime);box-shadow:0 0 0 5px rgba(222,255,102,.16)}
.deckshare__input::placeholder{color:rgba(255,255,255,.18)}
.deckshare__state{margin:0;min-height:1.2em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(10px,1.1vw,13px);color:rgba(255,255,255,.45)}
.deckshare__state.is-bad{color:var(--red)}
.deckshare__state.is-good{color:var(--lime)}

/* the "make your own" tile at the end of the gallery */
.catcard--new{border-style:dashed;border-color:rgba(222,255,102,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5em;min-height:100%;background:rgba(222,255,102,.05)}
.catcard--new:hover{border-color:var(--lime);background:rgba(222,255,102,.09)}
.catcard--new b{font-family:var(--ff-display);color:var(--lime);
  font-size:clamp(15px,1.5vw,20px);line-height:1.1;text-align:center}
.catcard--new span{font-size:clamp(11px,1.1vw,13px);color:rgba(255,255,255,.55);
  text-align:center;max-width:22ch;line-height:1.35}
.catcard--new .catcard__glyph{font-size:clamp(34px,4vw,54px)}
.catcard__badge{position:absolute;top:8px;left:8px;z-index:2;padding:2px 8px 3px;border-radius:99px;
  background:var(--lime);color:var(--indigo-950);font-size:10px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase}

/* ── tutorial ── */
.tut{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;text-align:center;
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  border:3px solid var(--lime);border-radius:22px;padding:clamp(20px,3.4vh,36px) clamp(18px,3vw,38px)}
.tut__skip{position:absolute;top:12px;right:16px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.55);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:6px}
.tut__skip:hover{color:var(--lime)}
.tut__dots{list-style:none;display:flex;gap:7px;justify-content:center;margin:0 0 clamp(14px,2.4vh,24px);padding:0}
.tut__dots li{width:26px;height:4px;border-radius:99px;background:var(--indigo-600)}
.tut__dots li.now{background:var(--lime)}
.tut__slide{display:none;flex-direction:column;align-items:center;gap:.5em}
.tut__slide.now{display:flex}
.tut h2{margin:0;font-family:var(--ff-display);color:var(--lime);font-size:clamp(20px,2.8vw,32px);line-height:1.1}
.tut p{margin:0;color:rgba(255,255,255,.78);font-size:clamp(14px,1.5vw,19px);line-height:1.45;max-width:38ch}
.tut p b{color:var(--lime)}
.tut__art{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  width:100%;height:clamp(90px,15vh,140px);margin-bottom:.3em;
  border:2px solid var(--indigo-600);border-radius:14px;background:rgba(14,14,45,.5)}
.tut__art--pic span{font-family:var(--ff-display);font-size:clamp(38px,7vw,64px);color:rgba(222,255,102,.35)}
.tut__art--clock{flex-direction:column;gap:2px}
.tut__art--clock b{font-family:var(--ff-cond);font-weight:900;font-size:clamp(34px,6vw,58px);color:var(--lime);line-height:1}
.tut__art--clock i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tut__cost{font-family:var(--ff-display);font-size:clamp(14px,1.8vw,22px);padding:.3em .8em;border-radius:10px}
.tut__cost--bad{background:var(--red);color:#2a0910}
.tut__cost--pass{background:var(--amber);color:#3a2600}
.tut__art--end b{font-family:var(--ff-cond);font-weight:900;font-size:clamp(38px,7vw,64px);color:var(--red);line-height:1}
.tut__acts{margin-top:clamp(14px,2.4vh,24px)}
.tut__rules{margin-top:clamp(10px,1.6vh,16px);background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(11px,1.1vw,13px);border-bottom:1px solid rgba(255,255,255,.2);padding:.3em 0}
.tut__rules:hover{color:var(--lime);border-color:var(--lime)}

/* ══════════════════ GUIDED SETUP ══════════════════ */
.screen--setup{overflow-y:auto;padding:0}
.flow{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,28px);padding:var(--pad-y) var(--pad-x) var(--pad-bottom)}

.flow__bar{width:min(var(--page-max),100%);display:flex;align-items:center;gap:16px;flex:none;min-height:var(--bar-min)}
.flow__back{background:none;border:2px solid var(--indigo-600);border-radius:10px;color:rgba(255,255,255,.75);
  cursor:pointer;font-size:20px;line-height:1;padding:.25em .6em;transition:.15s}
.flow__back:hover{border-color:var(--lime);color:var(--lime)}
.flow__back[disabled]{opacity:.25;pointer-events:none}
.flow__dots{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex:1;justify-content:center}
.flow__dots li{width:34px;height:5px;border-radius:99px;background:var(--indigo-600);transition:.2s}
.flow__dots li.done{background:var(--lime-deep)}
.flow__dots li.now{background:var(--lime);box-shadow:0 0 16px -2px rgba(222,255,102,.8)}
.flow__count{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(11px,1.1vw,14px);
  color:rgba(255,255,255,.5);white-space:nowrap}

.step{display:none;width:min(880px,100%);flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,20px);flex:1}
.step--wide{width:min(1180px,100%)}
.flow[data-step="mode"] .step[data-step="mode"],
.flow[data-step="answers"] .step[data-step="answers"],
.flow[data-step="category"] .step[data-step="category"],
.flow[data-step="details"] .step[data-step="details"],
.flow[data-step="ready"] .step[data-step="ready"]{display:flex}
.step__q{margin:0;font-family:var(--ff-display);color:var(--lime);text-align:center;line-height:1.05;
  font-size:clamp(26px,4vw,52px)}
.step__sub{margin:0;text-align:center;color:rgba(255,255,255,.68);font-weight:600;
  font-size:clamp(14px,1.45vw,20px);max-width:46ch;line-height:1.4}

/* big tappable choices */
.pickgrid{display:grid;gap:clamp(10px,1.6vw,18px);width:100%;margin-top:.4em}
.pickgrid--2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pickgrid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pickgrid--tight{gap:10px;margin-top:.2em}
.pick--sm .pick__body{padding:clamp(10px,1.6vh,16px) clamp(10px,1.4vw,18px);border-width:2px;border-radius:14px}
.pick--sm .pick__body b{font-size:clamp(15px,1.6vw,21px)}
.pick--sm .pick__body i{font-size:clamp(12px,1.15vw,15px)}
.pick--sm .pick__icon{width:clamp(26px,2.8vw,36px);height:clamp(26px,2.8vw,36px)}
.answermode{border:0;margin:0;padding:0;width:100%}
.answermode legend{padding:0;margin-bottom:.3em}
.pick{cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick__body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em;
  border:3px solid var(--indigo-600);border-radius:18px;padding:clamp(16px,2.6vh,30px) clamp(14px,2vw,26px);
  background:rgba(14,14,45,.45);transition:.16s var(--ease);height:100%}
.pick__icon{width:clamp(34px,4vw,52px);height:clamp(34px,4vw,52px);display:block;
  fill:none;stroke:rgba(255,255,255,.62);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .16s}
.pick input:checked + .pick__body .pick__icon{stroke:var(--lime)}
.pick__body b{font-family:var(--ff-display);color:#fff;font-size:clamp(19px,2.2vw,30px)}
.pick__body i{font-style:normal;color:rgba(255,255,255,.62);font-weight:600;line-height:1.35;
  font-size:clamp(13px,1.3vw,17px);max-width:30ch}
.pick input:checked + .pick__body{border-color:var(--lime);background:rgba(222,255,102,.1);
  box-shadow:0 0 40px -10px rgba(222,255,102,.7)}
.pick input:checked + .pick__body b{color:var(--lime)}
.pick:hover .pick__body{border-color:var(--indigo-400)}
.pick input:focus-visible + .pick__body{box-shadow:0 0 0 4px rgba(222,255,102,.3)}

/* category gallery */
.catgrid{display:grid;gap:clamp(10px,1.4vw,16px);width:100%;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:.3em}
.catcard{position:relative;border:3px solid var(--indigo-600);border-radius:16px;overflow:hidden;
  background:rgba(14,14,45,.6);cursor:pointer;text-align:left;padding:0;transition:.16s var(--ease);
  display:flex;flex-direction:column;color:inherit}
.catcard:hover{border-color:var(--indigo-400);transform:translateY(-3px)}
.catcard.is-on{border-color:var(--lime);box-shadow:0 0 40px -10px rgba(222,255,102,.75)}
/* Covers are shown whole. Cropping to fill a 16:10 box guillotined the
   portraits — half of Tom Hanks' head, the top of a poster — so the picture
   is contained and a blurred copy of itself fills the space behind it. */
/* Covers are shown whole. The picture is pinned to the frame rather than
   laid out in it: as a centred grid item it sized itself to its own natural
   height, the row grew to match, `height:100%` resolved to that, and the
   frame's overflow clipped the difference — which is why portraits still
   lost their heads. `position:absolute; inset:0` gives it a definite box. */
.catcard__art{position:relative;aspect-ratio:16/10;background:var(--indigo-950);
  overflow:hidden;isolation:isolate}
.catcard__art::before{content:'';position:absolute;inset:-12%;
  background-image:var(--cover);background-size:cover;background-position:50% 35%;
  filter:blur(16px) saturate(1.25) brightness(.62);z-index:0}
.catcard__art img{position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;
  padding:6px;filter:drop-shadow(0 6px 16px rgba(14,14,45,.6))}
.catcard__art img.fit{padding:10px}
.catcard__glyph{position:relative;z-index:1}
.catcard--text .catcard__art{display:flex;align-items:center;justify-content:center}
.catcard--text .catcard__art{background:linear-gradient(150deg,var(--indigo-800),var(--indigo-950))}
.catcard__glyph{font-family:var(--ff-display);font-size:clamp(40px,5vw,68px);
  color:rgba(222,255,102,.5);line-height:1}
.catcard__body{padding:.6em .8em .8em;display:flex;flex-direction:column;gap:.2em}
.catcard__name{font-family:var(--ff-display);color:#fff;font-size:clamp(15px,1.5vw,20px);line-height:1.1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.1em)}
.catcard.is-on .catcard__name{color:var(--lime)}
.catcard__blurb{font-size:clamp(11px,1.1vw,14px);color:rgba(255,255,255,.55);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.3em)}
.catcard__count{font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(10px,1vw,12px);color:var(--lime-deep);margin-top:.15em}
.catcard__history{min-height:1.35em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(10px,.95vw,12px);color:rgba(255,255,255,.45);margin-top:.1em}
.catcard__history b{color:var(--lime)}
.modenote{font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.06em;
  color:var(--lime-deep);margin-top:.3em;display:block}
.modenote:empty{display:none}

.fields{width:100%;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.row--2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.more{width:100%;border:2px solid var(--indigo-600);border-radius:14px;overflow:hidden}
.more summary{cursor:pointer;padding:.7em 1em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(12px,1.2vw,15px);color:rgba(255,255,255,.7);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:' ▾';color:var(--lime)}
.more[open] summary::after{content:' ▴'}
.more summary:hover{color:var(--lime)}
.more__body{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);padding:0 clamp(10px,1.4vw,18px) clamp(12px,1.8vh,20px)}

.summary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.summary span{border:2px solid var(--indigo-600);border-radius:99px;padding:.4em .9em;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(11px,1.2vw,15px);
  color:rgba(255,255,255,.8)}
.summary span b{color:var(--lime);font-weight:900}
.rules{margin:.2em 0 0;padding:0 0 0 1.3em;display:flex;flex-direction:column;gap:.4em;max-width:56ch;
  color:rgba(255,255,255,.75);font-size:clamp(13px,1.35vw,18px);line-height:1.4}
.rules b{color:var(--lime)}
.flow__foot{width:min(880px,100%);display:flex;justify-content:center;flex:none}
.flow__foot .btn{min-width:200px}
.flow[data-step="ready"] .flow__foot{display:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── online lobby ── */
.lobby{display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%;
  border:2px dashed rgba(222,255,102,.4);border-radius:16px;
  padding:clamp(12px,2vh,22px) clamp(14px,2vw,26px);background:rgba(14,14,45,.4)}
.lobby[hidden]{display:none}
.lobby__eyebrow{font-size:clamp(10px,1vw,14px);letter-spacing:.28em;text-transform:uppercase;
  font-weight:800;color:var(--lime)}
.lobby__code{font-family:var(--ff-display);color:var(--indigo);background:var(--lime);
  font-size:clamp(34px,6vw,68px);letter-spacing:.16em;text-indent:.16em;line-height:1;
  padding:.417em .3em .123em;border-radius:12px;box-shadow:0 5px 0 var(--lime-deep)}
.lobby__how{margin:0;font-size:clamp(13px,1.3vw,18px);color:rgba(255,255,255,.72);font-weight:600}
.lobby__how b{color:#fff}
.lobby__state{font-size:clamp(11px,1.1vw,15px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--amber)}
.lobby__state.is-on{color:var(--lime)}

/* ── mode picker ── */
.row--mode{grid-template-columns:1fr 1fr;gap:10px}
.modepick{cursor:pointer;display:block}
.modepick input{position:absolute;opacity:0;pointer-events:none}
.modepick span{
  display:flex;flex-direction:column;gap:.1em;text-align:center;
  border:2px solid var(--indigo-600);border-radius:12px;padding:.6em .8em;
  font-family:var(--ff-display);font-size:clamp(14px,1.5vw,21px);color:rgba(255,255,255,.75);
  transition:.15s;
}
.modepick span i{font-style:normal;font-family:var(--ff-ui);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:clamp(9px,.9vw,12px);opacity:.55}
.modepick input:checked + span{border-color:var(--lime);color:var(--lime);background:rgba(222,255,102,.1);
  box-shadow:0 0 26px -8px rgba(222,255,102,.6)}
.modepick input:focus-visible + span{box-shadow:0 0 0 4px rgba(222,255,102,.25)}

/* ── rally counter — the number that makes a clip find itself ── */
.rallyrow{flex:none;display:flex;justify-content:center;min-height:0}
.rally{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;
  background:var(--indigo-950);border:2px solid var(--lime);border-radius:14px;
  padding:clamp(4px,.7vh,9px) clamp(14px,2vw,26px) clamp(5px,.8vh,10px);
  text-align:center;line-height:1;
}
.rally[hidden]{display:none}
.rally i{font-style:normal;font-family:var(--ff-cond);font-weight:900;letter-spacing:.24em;text-indent:.24em;
  font-size:clamp(9px,.9vw,13px);color:var(--lime-deep);display:block}
.rally b{font-family:var(--ff-cond);font-weight:900;font-variant-numeric:tabular-nums;line-height:.95;
  font-size:clamp(22px,2.6vw,40px);color:var(--lime);display:block;margin-top:.06em}
.rally.is-hot{background:var(--lime);border-color:var(--lime-hot)}
.rally.is-hot b{color:var(--indigo)}
.rally.is-hot i{color:rgba(14,14,45,.7)}
.rally.is-bump b{animation:rallyBump .34s var(--ease)}
@keyframes rallyBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ── solo layout: one pod, no pass bar handoff ── */
body.is-solo .pod--right{display:none}
body.is-solo .arena{grid-template-columns:var(--pod-w) minmax(0,1fr)}
body.is-solo .pod__control{display:none}
body.is-solo .passbar__word::after{content:' / SKIP'}

.result__solo{display:flex;gap:clamp(20px,5vw,60px);justify-content:center;margin:.2em 0 .4em}
.result__solo[hidden]{display:none}
.result__score,.result__best{display:flex;flex-direction:column;align-items:center;line-height:1}
.result__solo b{font-family:var(--ff-cond);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(48px,9vw,120px);color:var(--lime)}
.result__solo i{font-style:normal;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  font-size:clamp(10px,1.1vw,15px);color:rgba(255,255,255,.5);margin-top:.3em}

/* ══════════════════ DUEL ══════════════════ */
.screen--duel{padding:clamp(8px,1.4vh,18px) clamp(10px,1.6vw,26px) 0;gap:clamp(6px,1vh,14px)}

.topbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,1.6vw,20px);flex:none;min-width:0}
.topbar > *{min-width:0}
.topbar > :first-child{justify-self:start}
.topbar__right{justify-self:end}
.topbar__cat{display:flex;flex-direction:column;align-items:center;line-height:1;gap:.28em;min-width:0;text-align:center}
.topbar__cat i{font-style:normal;font-size:clamp(9px,.85vw,13px);letter-spacing:.42em;text-indent:.42em;color:rgba(255,255,255,.45);font-weight:700}
.topbar__cat b{font-family:var(--ff-display);color:var(--lime);font-size:clamp(15px,2.3vw,38px);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topbar__right{display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);justify-self:end}
.topbar__pair{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1}
.topbar__pair i{font-style:normal;font-size:clamp(9px,.8vw,12px);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.topbar__pair b{font-family:var(--ff-display);color:var(--lime);font-size:clamp(12px,1.35vw,20px);letter-spacing:.1em}
.topbar__pair span{font-size:clamp(9px,.78vw,12px);letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.5)}
.topbar__pair span.is-on{color:var(--lime)}
.topbar__pair span.is-wait{color:var(--amber)}
.topbar__pair span.is-off{color:var(--red)}
.topbar__meta{display:flex;align-items:baseline;gap:.4em;font-weight:800;color:rgba(255,255,255,.5);font-size:clamp(12px,1.25vw,18px);letter-spacing:.1em}
.topbar__meta span{color:var(--lime)}
.topbar__meta i{font-style:normal;opacity:.55}

.arena{
  flex:1;min-height:0;display:grid;
  grid-template-columns:var(--pod-w) minmax(0,1fr) var(--pod-w);
  gap:clamp(10px,1.5vw,26px);align-items:stretch;
}

/* ── pods ── */
.pod{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(4px,.9vh,12px);
  padding:clamp(10px,1.5vh,20px) clamp(8px,.9vw,16px);
  border:3px solid var(--indigo-600);border-radius:18px;
  background:linear-gradient(180deg,rgba(14,14,45,.55),rgba(14,14,45,.28));
  transition:border-color .2s,box-shadow .25s,opacity .25s,background .25s;
  opacity:.42;
}
.pod.is-active{
  opacity:1;border-color:var(--lime);
  background:linear-gradient(180deg,rgba(222,255,102,.14),rgba(14,14,45,.4));
  box-shadow:0 0 0 6px rgba(222,255,102,.1),0 0 70px -8px rgba(222,255,102,.5),inset 0 0 60px -20px rgba(222,255,102,.5);
}
.pod.is-dead{
  opacity:1;border-color:var(--red);
  background:linear-gradient(180deg,rgba(255,77,94,.16),rgba(14,14,45,.4));
  box-shadow:0 0 0 6px rgba(255,77,94,.1),0 0 70px -8px rgba(255,77,94,.45);
}
.pod.is-dead .pod__name{color:var(--red)}
.pod.is-dead .pod__control{opacity:0;animation:none}
.pod.is-dead .pod__bar i{background:var(--red)}
.pod__name{
  font-family:var(--ff-display);text-transform:uppercase;text-align:center;
  font-size:clamp(15px,1.7vw,29px);letter-spacing:.02em;line-height:1.05;
  color:#fff;word-break:break-word;
}
.pod.is-active .pod__name{color:var(--lime)}
.pod__clock{display:flex;justify-content:center;width:100%}
.clock{
  font-family:var(--ff-cond);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(52px,8.2vw,150px);line-height:.86;letter-spacing:-.02em;
  color:rgba(255,255,255,.75);
  text-shadow:0 0 40px rgba(0,0,0,.5);
  transition:color .2s;
}
.pod.is-active .clock{color:var(--lime);text-shadow:0 0 34px rgba(222,255,102,.55)}
.pod.is-warn .clock{color:var(--amber);text-shadow:0 0 34px rgba(255,194,71,.5)}
.pod.is-danger .clock{color:var(--red);text-shadow:0 0 40px rgba(255,77,94,.65);animation:pulse .5s steps(2,end) infinite}
.pod.is-dead .clock{color:var(--red);animation:none}
.pod.is-hit .clock{animation:hit .38s ease-out}
@keyframes hit{0%{transform:scale(1)}30%{transform:scale(1.13);color:var(--red)}100%{transform:scale(1)}}
@keyframes pulse{50%{opacity:.3}}

.pod__bar{height:clamp(6px,.9vh,11px);width:100%;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.pod__bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--lime);transform-origin:left;transition:background .2s}
.pod.is-warn .pod__bar i{background:var(--amber)}
.pod.is-danger .pod__bar i{background:var(--red)}

.pod__stats{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
.chip{font-size:clamp(10px,.95vw,14px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.3em .65em;border-radius:99px;background:rgba(0,0,0,.42);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18)}
.chip b{color:#fff;font-size:1.15em}
.chip--right b{color:var(--lime)}

.pod__control{
  font-family:var(--ff-cond);font-weight:900;letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(10px,1.05vw,16px);
  background:var(--lime);color:var(--indigo);padding:.22em .7em .3em;border-radius:99px;
  opacity:0;transform:translateY(6px) scale(.9);transition:.2s var(--ease);
}
.pod.is-active .pod__control{opacity:1;transform:none;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 10px rgba(222,255,102,0)}0%,100%{box-shadow:0 0 0 0 rgba(222,255,102,.45)}}

/* ── board ── */
.board{display:flex;flex-direction:column;min-height:0;min-width:0;gap:clamp(4px,.8vh,8px)}
.arena{align-items:stretch}
.board__frame{
  position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;
  border:4px solid var(--lime);
  background:radial-gradient(70% 70% at 50% 40%,var(--indigo-800),var(--indigo-950));
  box-shadow:0 0 0 3px rgba(14,14,45,.9),0 34px 90px -34px rgba(0,0,0,.9),inset 0 0 120px -40px rgba(222,255,102,.35);
  display:grid;place-items:center;
}
.board__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(8px,1.2vw,22px);
  animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
/* ── the text deck ──────────────────────────────────────────
   Musicals has no pictures on purpose (see js/data/musicals.js), so the
   board shows the song instead. Same frame, same clocks, same everything
   else — only what sits inside the frame changes. */
.board__prompt{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);
  padding:clamp(18px,3.5vw,60px);text-align:center;animation:pop .28s var(--ease)}
.board__prompt[hidden]{display:none}
.board__promptkicker{letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;
  font-weight:900;font-size:clamp(10px,1.1vw,16px);color:rgba(222,255,102,.75)}
.board__prompttext{font-family:var(--ff-display);color:#fff;line-height:1.02;
  font-size:clamp(26px,5vw,86px);max-width:16ch;text-wrap:balance;
  overflow-wrap:anywhere;hyphens:auto;
  text-shadow:0 0 70px rgba(222,255,102,.25)}

.board__card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vh,22px);padding:clamp(16px,3vw,54px);text-align:center;animation:pop .28s var(--ease)}
.board__cardmark{font-family:var(--ff-display);font-size:clamp(60px,11vw,190px);line-height:.8;color:rgba(222,255,102,.22)}
.board__cardclue{margin:0;font-family:var(--ff-cond);font-weight:700;color:#fff;
  font-size:clamp(20px,3.1vw,54px);line-height:1.08;max-width:22ch;text-wrap:balance}
.board__flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:var(--lime)}
.board__flash.is-yes{animation:flashYes .42s ease-out}
.board__flash.is-no{background:var(--red);animation:flashNo .42s ease-out}
.board__flash.is-pass{background:#fff;animation:flashNo .3s ease-out}
@keyframes flashYes{0%{opacity:.55}100%{opacity:0}}
@keyframes flashNo{0%{opacity:.5}100%{opacity:0}}
/* ── picture modes ──────────────────────────────────────────
   Each hides the picture at first and gives it back over the
   reveal window, so the tension is "who calls it first" rather
   than "who reads fastest". Silhouette needs artwork with a
   transparent background — on a photo it would just be a black
   rectangle — so the setup screen only offers it where the
   category declares `silhouette: true`.
   ───────────────────────────────────────────────────────── */
.board__img{--dhd-reveal:7s}

.mode-silhouette .board__img{
  filter:brightness(0) contrast(3);
  animation:pop .28s var(--ease), silhouetteOut .6s linear var(--dhd-reveal) forwards;
}
@keyframes silhouetteOut{to{filter:brightness(1) contrast(1)}}

.mode-zoom .board__img{
  animation:pop .28s var(--ease), zoomBack var(--dhd-reveal) cubic-bezier(.22,.85,.3,1) forwards;
  transform-origin:50% 42%;
}
@keyframes zoomBack{from{transform:scale(7)}to{transform:scale(1)}}

.mode-blur .board__img{
  animation:pop .28s var(--ease), blurOff var(--dhd-reveal) cubic-bezier(.4,0,.5,1) forwards;
}
@keyframes blurOff{from{filter:blur(34px)}to{filter:blur(0)}}

/* Freezing the clocks has to freeze the reveal too, or a pause
   would quietly hand the picture over for nothing. */
.is-frozen .board__img{animation-play-state:paused !important}

/* ...but the answer beat is the one moment the picture must be plain.
   Showing a black shape next to the words "IT WAS SNORLAX" tells nobody
   anything, so every mode drops for the length of the reveal. */
.is-revealing .board__img{
  animation:none !important;
  filter:none !important;
  transform:none !important;
  transition:filter .25s ease-out, transform .25s ease-out;
}

/* Answer nameplate — the reveal beat after a correct answer or a pass. */
.reveal{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  padding:clamp(8px,1.4vh,18px) clamp(14px,2vw,32px) clamp(10px,1.8vh,22px);
  background:linear-gradient(180deg,rgba(222,255,102,0),var(--lime) 26%);
  animation:revealUp .32s var(--ease);
}
.reveal__eyebrow{
  font-style:normal;font-family:var(--ff-cond);font-weight:900;
  letter-spacing:.42em;text-indent:.42em;font-size:clamp(10px,1.15vw,18px);
  color:var(--indigo);opacity:.88;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.reveal__name{
  font-family:var(--ff-display);color:var(--indigo);line-height:.98;text-align:center;
  font-size:clamp(24px,4.4vw,76px);text-transform:uppercase;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.reveal--pass{background:linear-gradient(180deg,rgba(255,194,71,0),var(--amber) 26%)}
.reveal--out{background:linear-gradient(180deg,rgba(255,77,94,0),var(--red) 26%)}
.reveal--out .reveal__name,.reveal--out .reveal__eyebrow{color:#2a0910}
@keyframes revealUp{from{opacity:0;transform:translateY(28%)}to{opacity:1;transform:none}}

/* Operator-only answer peek — deliberately small and off in the corner. */
.board__peek{
  position:absolute;top:8px;left:8px;
  background:rgba(14,14,45,.92);border:1px solid var(--lime);color:var(--lime);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(10px,1vw,14px);padding:.24em .6em .3em;border-radius:6px;opacity:.75}

/* Time penalty floater on a wrong answer. */
.penalty{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--ff-cond);font-weight:900;color:var(--red);
  font-size:clamp(40px,7vw,120px);font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(255,77,94,.7),0 4px 0 rgba(14,14,45,.6);
  pointer-events:none;animation:penaltyPop .75s var(--ease) forwards}
@keyframes penaltyPop{
  0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-95%) scale(1)}}
.board__clue{margin:0;text-align:center;color:rgba(255,255,255,.66);font-weight:600;
  font-size:clamp(13px,1.35vw,21px);letter-spacing:.03em;flex:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── typed answers ── */
.answerbar{
  flex:none;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(6px,1vw,12px);
  background:linear-gradient(180deg,var(--indigo-800),var(--indigo-900));
  border-top:3px solid var(--lime);border-radius:16px 16px 0 0;
  padding:clamp(7px,1.1vh,14px) clamp(10px,1.6vw,22px);
}
.answerbar[hidden]{display:none}
.answerbar__who{font-family:var(--ff-display);color:var(--lime);text-transform:uppercase;
  font-size:clamp(13px,1.5vw,23px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22vw}
.answerbar__input{
  width:100%;min-width:0;background:rgba(14,14,45,.9);border:3px solid var(--indigo-600);border-radius:12px;
  color:#fff;font-family:var(--ff-cond);font-weight:800;font-size:clamp(18px,2.6vw,36px);
  padding:.16em .5em .22em;outline:none;letter-spacing:.02em;
}
.answerbar__input:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(222,255,102,.2)}
.answerbar__input::placeholder{color:rgba(255,255,255,.3);font-weight:700}
.answerbar__go,.answerbar__skip{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  border:2px solid transparent;border-radius:12px;cursor:pointer;font-family:var(--ff-display);
  font-size:clamp(13px,1.5vw,22px);letter-spacing:.06em;white-space:nowrap;
  line-height:1;height:clamp(40px,5.4vh,58px);padding:0 clamp(12px,1.6vw,24px);
}
.answerbar__go{background:var(--lime);color:var(--indigo);border-color:var(--lime);box-shadow:0 4px 0 var(--lime-deep)}
.answerbar__go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lime-deep)}
.answerbar__skip{background:transparent;border-color:var(--amber);color:var(--amber)}
.answerbar__skip:hover{background:var(--amber);color:var(--indigo)}
.answerbar__input{height:clamp(40px,5.4vh,58px);padding:0 .55em}
.answerbar.is-wrong .answerbar__input{border-color:var(--red);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

body.is-typing .passbar{display:none}
body.is-typing .topbar__pair{display:none}

/* ── pass bar ── */
.passbar{
  flex:none;width:100%;cursor:pointer;border:0;border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,var(--lime),var(--lime-deep));
  color:var(--indigo);
  display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:1em;
  padding:clamp(6px,1vh,14px) clamp(14px,2vw,30px);
  box-shadow:0 -14px 44px -18px rgba(222,255,102,.75);
  transition:filter .12s,transform .08s;
  user-select:none;
}
.passbar:hover{filter:brightness(1.07)}
.passbar:active{transform:translateY(3px);filter:brightness(.94)}
.passbar__who{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(13px,1.5vw,24px);text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.72}
.passbar__word{font-family:var(--ff-display);font-size:clamp(20px,3vw,52px);letter-spacing:.22em;text-indent:.22em;line-height:1}
.passbar__cost{font-family:var(--ff-cond);font-weight:900;font-size:clamp(12px,1.5vw,24px);
  background:rgba(14,14,45,.82);color:var(--lime);padding:.12em .5em .18em;border-radius:99px;
  letter-spacing:.06em;margin-left:-.4em}
.passbar__cost[hidden]{display:none !important}
.passbar__hint{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(10px,1vw,15px);text-align:right;opacity:.78;line-height:1.2}
.passbar[disabled]{opacity:.28;pointer-events:none;filter:grayscale(.6)}

.hostbar{flex:none;display:flex;gap:clamp(10px,1.6vw,26px);justify-content:center;align-items:center;flex-wrap:wrap;
  padding:clamp(5px,.8vh,10px) 12px clamp(6px,.9vh,12px);background:var(--indigo-950)}
@media (max-width:720px), (pointer:coarse){ .hostbar{display:none} }

/* Fingers are not cursors. Anything tappable gets a 44px target on touch
   and on small screens, which is where the audit found buttons down at
   21px. Padding rather than height, so labels stay centred. */
@media (max-width:820px), (pointer:coarse){
  .btn, .btn--sm,
  .flow__back, .flow__foot .btn,
  .welcome__how, .pair__new, .lobby .btn,
  .help__close, .join__go, .mediabar .btn,
  .tut__rules, .result__recaptoggle, .builder__private,
  .input, select.input{
    min-height:44px;
  }
  /* The box is small but the label around it is the tap target. */
  .builder__private input{width:20px;height:20px}
  .tut__acts .btn i{display:none}
  .tut__skip{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
    top:6px;right:8px;padding:0}
  /* (R) and (N) mean nothing without a keyboard, and the space is better
     spent on the label. */
  .result__acts .btn i{display:none}
  .welcome__how{padding:.6em 1em}
  .help__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .flow__back{min-width:44px}
  .answerbar__go,.answerbar__skip{min-height:46px}
  .toggle{min-height:44px}
}
@media (max-width:640px){
  .topbar{grid-template-columns:auto 1fr auto}
  .topbar .brandmark--inline .brandmark__text,
  .topbar .brandmark--inline .brandmark__duel{display:none}
  .topbar__cat i{display:none}
  .topbar__cat b{font-size:clamp(15px,4.6vw,24px)}
}
.hostbar__k{font-size:clamp(11px,1.05vw,15px);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}
.hostbar__k b{color:var(--lime);font-weight:900;margin-right:.35em}

/* ══════════════════ OVERLAYS ══════════════════ */
/* `place-items:center` on a scrollable box hides the top of anything
   taller than the viewport — the overflow goes both ways and scrollTop is
   already 0, so it cannot be scrolled back to. Start it at the top and let
   the child's auto margins do the centring instead. */
.ovl{position:fixed;inset:0;z-index:50;display:grid;justify-items:center;align-content:start;
  padding:4vh 4vw;
  background:rgba(14,14,45,.9);backdrop-filter:blur(10px);animation:fade .22s ease-out;
  overflow-y:auto;overscroll-behavior:contain}
.ovl > *{margin-block:auto}
@keyframes fade{from{opacity:0}}
.ovl[hidden]{display:none}

.intro{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.2vh,28px);text-align:center}
.intro__cat{display:flex;flex-direction:column;gap:.3em;align-items:center}
.intro__cat i{font-style:normal;letter-spacing:.5em;text-indent:.5em;font-size:clamp(11px,1.1vw,17px);color:rgba(255,255,255,.5);font-weight:700}
.intro__cat b{font-family:var(--ff-display);color:var(--lime);font-size:clamp(34px,7vw,120px);line-height:.95;text-transform:uppercase;
  text-shadow:0 0 60px rgba(222,255,102,.45);animation:pop .4s var(--ease)}
.intro__vs{display:flex;align-items:center;gap:clamp(12px,2.5vw,44px);flex-wrap:wrap;justify-content:center}
.intro__p{font-family:var(--ff-display);font-size:clamp(20px,3.4vw,58px);text-transform:uppercase;color:#fff}
.intro__x{font-family:var(--ff-display);font-size:clamp(16px,2.4vw,40px);color:var(--lime);transform:rotate(-6deg)}
.intro__first{font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);font-size:clamp(11px,1.3vw,20px)}
.intro__count{font-family:var(--ff-cond);font-weight:900;font-size:clamp(80px,17vw,280px);line-height:.8;color:var(--lime);
  font-variant-numeric:tabular-nums;text-shadow:0 0 80px rgba(222,255,102,.55)}
.intro__count.go{font-family:var(--ff-display);font-size:clamp(56px,12vw,190px)}
.intro__count.tick{animation:countPop .5s var(--ease)}
@keyframes countPop{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}

.result{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,20px);text-align:center;max-width:min(900px,100%);margin:auto}
.result__logo{height:clamp(46px,6vw,104px);width:auto;object-fit:contain}
.result__eyebrow{letter-spacing:.5em;text-indent:.5em;font-size:clamp(11px,1.2vw,18px);font-weight:900;color:var(--lime);text-transform:uppercase;margin-top:-.2em}
.result__label{font-family:var(--ff-cond);font-weight:900;letter-spacing:.4em;text-indent:.4em;color:#fff;font-size:clamp(16px,2vw,32px)}
.result__name{font-family:var(--ff-display);color:var(--lime);font-size:clamp(44px,10vw,170px);line-height:.9;text-transform:uppercase;
  text-shadow:0 0 90px rgba(222,255,102,.5);animation:pop .45s var(--ease)}
.result__line{font-weight:700;color:rgba(255,255,255,.7);font-size:clamp(14px,1.5vw,23px);letter-spacing:.06em;text-transform:uppercase}
.result__tbl{border-collapse:collapse;margin-top:.4em;font-size:clamp(13px,1.3vw,20px)}
.result__tbl th,.result__tbl td{padding:.34em clamp(10px,1.8vw,30px);border-bottom:1px solid rgba(255,255,255,.12);text-align:center}
.result__tbl th{color:var(--lime);font-family:var(--ff-display);text-transform:uppercase;font-size:.92em}
.result__tbl td:first-child{color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.14em;font-weight:700;text-align:right}
.result__tbl td{font-weight:800;font-variant-numeric:tabular-nums}
/* One row, three identical buttons. `flex:1 1 0` with a shared basis makes
   them match regardless of label length — SHARE RESULT is twice the
   characters of NEW DUEL and they still come out the same width. */
/* Rows of buttons that sit together get equal boxes. An explicit width, not
   shrink-to-fit: these live inside centred cards that size to their content,
   so without it the row collapses to each button's minimum and the longest
   label wraps while its neighbours don't. */
/* min-width, not just width: these cards size to their content, and a solo
   card's content is narrow enough that 100% left the longest label with less
   room than it needs. The floor widens the card instead of clipping the text;
   88vw keeps it inside the overlay's padding on a phone. */
.result__acts,.tut__acts{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  width:min(620px,100%);min-width:min(430px,88vw);margin-inline:auto}
/* The row gap has to clear the 8px shadow under each button, or the two rows
   read as one solid block. */
.result__acts{gap:26px 16px}
.result__acts{margin-top:.6em}
.result__acts .btn,.tut__acts .btn{flex:1 1 0;min-width:0;padding:.7em .5em;
  letter-spacing:.09em;gap:.35em}
/* Four actions is one too many for a single row at this width — they wrap to
   a 2x2 rather than squeezing every label. */
.result__acts .btn{flex:1 1 calc(50% - 8px)}
/* --go carries a solid 8px shadow under it. Measured, the boxes already
   matched; what didn't was the ink under them, so the lime pair read as
   taller than the outlined one next to it. The ghost gets the same lift in
   its own colour. */
.result__acts .btn--ghost,.tut__acts .btn--ghost{box-shadow:0 8px 0 var(--indigo-800)}
.result__acts .btn--ghost:hover,.tut__acts .btn--ghost:hover{box-shadow:0 10px 0 var(--indigo-800)}
.result__acts .btn--ghost:active,.tut__acts .btn--ghost:active{box-shadow:0 3px 0 var(--indigo-800);transform:translateY(5px)}
.result__acts .btn i,.tut__acts .btn i{font-size:.8em}

/* ── was this deck any good? ──────────────────────────────────
   Only shown for a deck somebody published, since the built-in ones
   aren't up for a vote. */
.deckvote{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.05);
  border:2px solid var(--indigo-600)}
.deckvote[hidden]{display:none}
.deckvote__q{font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.55)}
.deckvote__acts{display:flex;gap:10px}
.deckvote__btn{display:flex;align-items:center;gap:7px;cursor:pointer;
  min-height:44px;padding:0 16px;border-radius:99px;
  background:transparent;border:2px solid var(--indigo-400);color:rgba(255,255,255,.8)}
.deckvote__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.deckvote__btn b{font-weight:900;font-size:clamp(13px,1.3vw,16px);min-width:1ch}
.deckvote__btn:hover{border-color:var(--lime);color:var(--lime)}
.deckvote__btn--down:hover{border-color:var(--red);color:var(--red)}
.deckvote__btn[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--indigo-950)}
.deckvote__btn--down[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.deckvote__plays{font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,12px);color:rgba(255,255,255,.4)}

/* the same numbers, small, on the gallery card */
.catcard__stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(9px,.9vw,11px);color:rgba(255,255,255,.45)}
.catcard__stats .up{color:var(--lime)}
.catcard__stats .down{color:var(--red)}

/* ── the last picture, so nobody has to ask what it was ── */
.lastup{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  background:rgba(255,255,255,.05);border:2px solid var(--indigo-600);
  border-radius:16px;padding:8px clamp(12px,1.4vw,18px) 8px 8px;max-width:100%}
.lastup[hidden]{display:none}
.lastup__img{width:clamp(52px,6vw,80px);height:clamp(52px,6vw,80px);border-radius:11px;
  object-fit:cover;background:var(--indigo-900);flex:0 0 auto}
.lastup__img[hidden]{display:none}
.lastup__txt{display:flex;flex-direction:column;align-items:flex-start;gap:.15em;text-align:left;min-width:0}
.lastup__eyebrow{letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  font-size:clamp(9px,.85vw,12px);color:rgba(255,255,255,.55)}
.lastup__name{font-family:var(--ff-cond);font-weight:900;text-transform:uppercase;
  color:var(--lime);font-size:clamp(17px,2.1vw,30px);line-height:1.05;
  overflow-wrap:anywhere}

/* ── every picture of the round ── */
.result__recaptoggle{background:none;border:0;cursor:pointer;padding:6px 10px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.2)}
.result__recaptoggle:hover{color:var(--lime);border-bottom-color:var(--lime)}
.result__recaptoggle[hidden]{display:none}

.recap__legend{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;align-items:center;
  width:100%;margin-top:2px}
.recap__legend[hidden]{display:none}
.rlg{display:inline-flex;align-items:center;padding:2px 9px 3px;border-radius:99px;
  font-size:clamp(9px,.85vw,12px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid transparent;color:rgba(255,255,255,.7)}
.rlg--p0{background:var(--lime);color:var(--indigo-950)}
.rlg--p1{background:var(--p1);color:var(--indigo-950)}
.rlg--yes{border-color:var(--lime);color:var(--lime)}
.rlg--pass{border-color:#e8b53c;color:#e8b53c}
.rlg--timeout{border-color:#ff5470;color:#ff5470}
.rlg__gap{width:10px}

/* No scrollbar of its own — the overlay already scrolls, and a scroller
   inside a scroller is miserable to use on a phone. The grid grows, the
   overlay takes care of it, and opening it scrolls the actions into view. */
.recap{display:grid;gap:clamp(6px,.8vw,10px);width:100%;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  grid-auto-rows:max-content;align-content:start;padding:2px}
.recap[hidden]{display:none}
.recap__cell{position:relative;border-radius:12px;overflow:hidden;
  background:var(--indigo-900);border:2px solid var(--indigo-600);text-align:center}
.recap__cell--yes{border-color:var(--lime)}
.recap__cell--pass{border-color:#e8b53c}
.recap__cell--timeout{border-color:#ff5470}
.recap__img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--indigo-950)}
/* Text decks have a song where the artwork goes. */
.recap__prompt{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1;padding:8px;background:var(--indigo-950);
  font-family:var(--ff-display);color:#fff;line-height:1.05;
  font-size:clamp(10px,1.1vw,14px);overflow:hidden;
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.shot__prompt{font-family:var(--ff-display);color:#fff;text-align:center;line-height:1.05;
  font-size:clamp(30px,5.4vw,76px);max-width:14ch;text-wrap:balance;overflow-wrap:anywhere;
  padding:clamp(20px,4vw,60px);border-radius:18px;border:3px solid var(--indigo-600);
  background:var(--indigo-950);animation:pop .28s var(--ease)}
.shot__prompt[hidden]{display:none}
.shot__img[hidden]{display:none}

.recap__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;padding:4px 5px 5px;font-weight:800;line-height:1.15;
  min-height:calc(2 * 1.15em + 9px);
  font-size:clamp(9px,.85vw,12px);text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.recap__tag{position:absolute;top:5px;left:5px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;line-height:1;color:var(--indigo-950)}
.recap__cell--yes .recap__tag{background:var(--lime)}
.recap__cell--pass .recap__tag{background:#e8b53c}
.recap__cell--timeout .recap__tag{background:#ff5470;color:#fff}
/* Who had it. Two players, two fills — legible at a glance across the grid
   instead of small grey print. Outcome stays on the badge top-left, so the
   two things never fight for the same signal. */
.recap__who{position:absolute;top:5px;right:5px;padding:2px 7px 3px;border-radius:99px;
  font-size:clamp(9px,.8vw,11px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 2px 8px rgba(14,14,45,.55)}
.recap__cell--p0 .recap__who{background:var(--lime);color:var(--indigo-950)}
.recap__cell--p1 .recap__who{background:var(--p1);color:var(--indigo-950)}
/* A tint down the side of the tile so a player's run reads as a block. */
.recap__cell--p0{box-shadow:inset 4px 0 0 var(--lime)}
.recap__cell--p1{box-shadow:inset 4px 0 0 var(--p1)}

/* ── the picture viewer ──────────────────────────────────────
   Tap any tile in the recap to see it big. Same overlay pattern as
   everything else, plus arrows and the keyboard. */
.ovl--shot{padding:0;background:rgba(14,14,45,.96)}
.shot{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,20px);
  margin:0;max-width:min(900px,92vw);max-height:92vh}
.shot__img{max-width:100%;max-height:min(66vh,720px);width:auto;height:auto;
  border-radius:18px;border:3px solid var(--indigo-600);background:var(--indigo-950);
  object-fit:contain;animation:pop .28s var(--ease)}
.shot__cap{display:flex;flex-direction:column;align-items:center;gap:.3em;text-align:center}
.shot__badge{display:inline-flex;align-items:center;gap:.4em;padding:3px 12px 4px;border-radius:99px;
  font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(10px,1vw,13px)}
.shot__badge--yes{background:var(--lime);color:var(--indigo-950)}
.shot__badge--pass{background:#e8b53c;color:var(--indigo-950)}
.shot__badge--timeout{background:#ff5470;color:#fff}
.shot__name{font-family:var(--ff-display);color:var(--lime);line-height:1.05;
  font-size:clamp(26px,4.6vw,64px);text-transform:uppercase;overflow-wrap:anywhere}
.shot__meta{font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.65);font-size:clamp(11px,1.1vw,15px)}
.shot__count{font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.4);
  font-size:clamp(10px,1vw,13px)}
.shot__arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:2;
  width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(23,23,76,.9);border:2px solid var(--indigo-600);color:#fff;
  font-size:clamp(26px,3vw,38px);line-height:1;padding-bottom:.12em;
  transition:border-color .15s,color .15s,background .15s}
.shot__arrow:hover{border-color:var(--lime);color:var(--lime)}
.shot__arrow:disabled{opacity:.28;cursor:default;border-color:var(--indigo-600);color:#fff}
.shot__arrow--prev{left:clamp(8px,2vw,26px)}
.shot__arrow--next{right:clamp(8px,2vw,26px)}
/* An SVG, not a "\00d7" glyph — the character sits off-centre in the font's
   box and no amount of line-height fixes it reliably. */
.shot__close{position:fixed;top:clamp(10px,2vh,22px);right:clamp(10px,2vw,26px);z-index:2;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(23,23,76,.9);border:2px solid var(--indigo-600);color:#fff;
  padding:0;cursor:pointer;transition:border-color .15s,color .15s}
.shot__close svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shot__close:hover{border-color:var(--red);color:var(--red)}
.recap__cell{cursor:zoom-in}

/* ── mute, reachable from anywhere ── */
/* A quiet icon in the corner. It used to be a labelled pill sitting on
   every screen, which is a lot of furniture for a control most people
   touch once. The word only appears on hover, and the whole thing only
   appears where sound is actually in play. */
.mutebtn{position:fixed;left:clamp(8px,1.2vw,14px);bottom:clamp(8px,1.2vh,14px);z-index:60;
  display:flex;align-items:center;gap:0;width:38px;height:38px;padding:0;
  justify-content:center;border-radius:99px;cursor:pointer;overflow:hidden;
  background:rgba(23,23,76,.6);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.55);
  font-family:var(--ff-cond);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;backdrop-filter:blur(6px);
  transition:width .18s var(--ease),gap .18s var(--ease),border-color .15s,color .15s,background .15s}
.mutebtn svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mutebtn__label{white-space:nowrap;max-width:0;opacity:0;
  transition:max-width .18s var(--ease),opacity .15s}
.mutebtn:hover,.mutebtn:focus-visible{width:auto;gap:.5em;padding:0 14px 0 11px;
  border-color:var(--lime);color:var(--lime);background:rgba(23,23,76,.92)}
.mutebtn:hover .mutebtn__label,.mutebtn:focus-visible .mutebtn__label{max-width:12ch;opacity:1}
.mutebtn__off{display:none}
.mutebtn.is-muted{border-color:rgba(255,77,94,.55);color:var(--red)}
.mutebtn.is-muted .mutebtn__on{display:none}
.mutebtn.is-muted .mutebtn__off{display:block}

/* Only where sound happens: the menu, setting a game up, and the duel.
   Not the deck builder or the image library, which make no noise. */
.mutebtn{display:none}
html[data-screen="welcome"] .mutebtn,
html[data-screen="setup"] .mutebtn,
html[data-screen="duel"] .mutebtn{display:flex}
body.is-shot .mutebtn{display:none}

/* A phone has no hover, so the label would never show — keep it an icon
   and give it a real touch target. */
@media (pointer:coarse){
  .mutebtn{width:44px;height:44px}
  .mutebtn__label{display:none}
  .mutebtn:hover{width:44px;gap:0;padding:0}
}

.pausecard{display:flex;flex-direction:column;align-items:center;gap:.4em}
.pausecard b{font-family:var(--ff-display);color:var(--lime);font-size:clamp(40px,8vw,130px);letter-spacing:.1em}
.pausecard span{letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55);font-size:clamp(11px,1.1vw,16px)}

.help{position:relative;max-width:min(880px,100%);max-height:92vh;overflow:auto;
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  border:2px solid var(--lime);border-radius:20px;padding:clamp(20px,3vw,44px)}
.help h2{font-family:var(--ff-display);color:var(--lime);margin:0 0 .5em;font-size:clamp(22px,2.8vw,40px)}
.help h3{font-family:var(--ff-display);color:#fff;margin:1.4em 0 .5em;font-size:clamp(15px,1.6vw,23px);letter-spacing:.04em}
.help__rules{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.5em;font-size:clamp(14px,1.35vw,20px);line-height:1.35;color:rgba(255,255,255,.85)}
.help__rules b{color:var(--lime)}
.help__keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.45em .9em}
.help__keys div{display:flex;align-items:center;gap:.5em;font-size:clamp(13px,1.2vw,17px);color:rgba(255,255,255,.75)}
.help__keys span{flex:1}
.help__note{color:rgba(255,255,255,.72);font-size:clamp(13px,1.25vw,18px);line-height:1.4;margin:0}
kbd{font-family:var(--ff-cond);font-weight:900;background:var(--lime);color:var(--indigo);border-radius:6px;padding:.06em .48em .12em;
  font-size:.95em;letter-spacing:.05em;white-space:nowrap}
.help__close{position:absolute;top:10px;right:12px;background:none;border:0;color:rgba(255,255,255,.5);
  font-size:34px;line-height:1;cursor:pointer;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px}
.help__close:hover{color:var(--lime)}

/* ══════════════════ MEDIA LIBRARY ══════════════════ */
.screen--media{padding:var(--pad-y) var(--pad-x);gap:14px;overflow:hidden}
.mediabar{display:flex;align-items:center;gap:14px;flex:none;flex-wrap:wrap;
  min-height:var(--bar-min);width:100%;max-width:var(--page-max);margin-inline:auto;
  padding-inline:var(--pad-x)}
.mediabar__title{font-family:var(--ff-display);color:var(--lime);margin:0;font-size:clamp(18px,2.2vw,32px);flex:1}
.mediabar__title span{color:rgba(255,255,255,.45);font-size:.7em}
.mediabar__acts{display:flex;gap:8px;flex-wrap:wrap}
.dropall{flex:none;border:2px dashed var(--indigo-400);border-radius:14px;padding:clamp(10px,1.6vh,20px);
  display:flex;flex-direction:column;gap:.25em;text-align:center;transition:.15s}
.dropall.is-over{border-color:var(--lime);background:rgba(222,255,102,.12)}
.dropall b{color:var(--lime);font-size:clamp(14px,1.4vw,20px);letter-spacing:.06em;text-transform:uppercase}
.dropall span{color:rgba(255,255,255,.55);font-size:clamp(12px,1.15vw,16px)}
.dropall code{background:rgba(0,0,0,.35);padding:.1em .4em;border-radius:5px;color:var(--lime);font-size:.94em}
.mediagrid{flex:1;min-height:0;overflow-y:auto;display:grid;gap:12px;padding-bottom:20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;align-content:start}
.tile{position:relative;border:2px solid var(--indigo-600);border-radius:12px;overflow:hidden;background:rgba(14,14,45,.6);
  display:flex;flex-direction:column;cursor:pointer;transition:.15s}
.tile:hover{border-color:var(--lime);transform:translateY(-2px)}
.tile.is-over{border-color:var(--lime);background:rgba(222,255,102,.16)}
.tile.has-img{border-color:var(--lime-deep)}
.tile__thumb{width:100%;flex:none;height:clamp(92px,8.5vw,140px);background:var(--indigo-950);display:grid;place-items:center;overflow:hidden}
.tile__thumb img{width:100%;height:100%;object-fit:contain}
.tile__none{color:rgba(255,255,255,.28);font-family:var(--ff-display);font-size:11px;letter-spacing:.2em;text-align:center;padding:6px}
.tile__name{padding:.4em .6em;font-weight:800;font-size:13px;letter-spacing:.04em;color:#fff;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__file{padding:0 .6em .5em;font-size:12px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__src{position:absolute;top:6px;right:6px;font-size:9px;font-weight:900;letter-spacing:.1em;padding:.2em .45em;border-radius:99px;
  background:var(--lime);color:var(--indigo)}
.tile__src.folder{background:var(--indigo-400);color:#fff}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99;
  background:var(--lime);color:var(--indigo);font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:.6em 1.2em;border-radius:99px;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);font-size:14px;
  animation:pop .2s var(--ease)}
.toast[hidden]{display:none}

/* ── responsive: portrait / small ── */
@media (max-width:720px){
  .flow{padding:clamp(10px,2vh,18px) 14px 24px}
  .flow__count{display:none}
  .pickgrid--2,.pickgrid--3{grid-template-columns:1fr}
  .pick__body{flex-direction:row;align-items:center;text-align:left;gap:.8em;padding:14px 16px}
  .pick__body b{font-size:19px}
  .pick__body i{font-size:13px;max-width:none}
  .pick__icon{flex:none}
  .catgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .catcard__blurb{display:none}
  .step__q{font-size:clamp(22px,7vw,32px)}
  .welcome__acts{width:100%}
  .summary{gap:6px}
  .summary span{font-size:12px;padding:.35em .7em}
  .rules{font-size:14px;padding-left:1.1em}
  .answerbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "input input" "go skip";gap:8px}
  .answerbar__who{grid-area:who;max-width:none}
  .answerbar__input{grid-area:input}
  .answerbar__go{grid-area:go}
  .answerbar__skip{grid-area:skip}
  .lobby__code{font-size:clamp(30px,11vw,54px)}
}

/* Portrait and narrow. One block, so nothing here fights itself.
   The picture frame gets a real height rather than growing into a grid row
   sized from the image's natural dimensions — that is what used to leave a
   gap between the picture and the clocks. */
@media (max-aspect-ratio:1/1), (max-width:820px){
  :root{--pod-w:1fr}
  .arena{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"board board" "left right";
    align-content:start;
    gap:clamp(8px,1.4vh,16px);
  }
  .board{grid-area:board;justify-content:flex-start}
  .board__frame{flex:0 0 auto;height:min(54vh,100vw)}
  .pod--left{grid-area:left}
  .pod--right{grid-area:right}
  .pod{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px}
  .pod__clock{width:auto;flex:1}
  .pod__bar{order:9;width:100%}
  .clock{font-size:clamp(32px,10vw,58px)}
  .row--players,.row--3,.row--4,.row--go{grid-template-columns:1fr}
  .vs{text-align:center;padding:0}
}

@media (max-height:560px){
  .hostbar{display:none}
  .board__clue{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}


/* ── the builder's save state ──────────────────────────────
   It saves as you type, so it says so. */
.builder__saved{align-self:center;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,12px);color:rgba(255,255,255,.35);white-space:nowrap;
  transition:color .2s}
.builder__saved.is-wait{color:rgba(255,255,255,.55)}
.builder__saved.is-on{color:var(--lime)}
.builder__saved.is-off{color:var(--red)}

/* ── paste a list ──────────────────────────────────────────
   Was a window.prompt: one line, no wrapping, no preview. */
.paste{position:relative;width:min(620px,100%);max-height:92vh;overflow:auto;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  border:3px solid var(--lime);border-radius:22px;
  padding:clamp(20px,3.2vh,32px) clamp(18px,2.6vw,32px)}
.paste__close{position:absolute;top:10px;right:12px;width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:none;border:0;color:rgba(255,255,255,.5)}
.paste__close:hover{color:var(--lime)}
.paste__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.paste__title{margin:0;font-family:var(--ff-display);color:var(--lime);
  font-size:clamp(22px,3.4vw,34px);line-height:1}
.paste__lead{margin:0;color:rgba(255,255,255,.7);font-size:clamp(13px,1.4vw,16px);line-height:1.4}

.paste__modes{display:flex;gap:10px;flex-wrap:wrap}
.paste__mode{flex:1 1 200px;text-align:left;cursor:pointer;padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:2px solid var(--indigo-600);color:#fff;
  display:flex;flex-direction:column;gap:2px;transition:border-color .15s,background .15s}
.paste__mode:hover{border-color:var(--indigo-400)}
.paste__mode.is-on{border-color:var(--lime);background:rgba(222,255,102,.08)}
.paste__mode b{font-family:var(--ff-cond);font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;font-size:clamp(12px,1.2vw,15px)}
.paste__mode i{font-style:normal;font-size:clamp(11px,1.1vw,13px);color:rgba(255,255,255,.55);line-height:1.3}

.paste__box{width:100%;min-height:150px;resize:vertical;border-radius:12px;padding:12px 14px;
  background:var(--indigo-950);border:2px solid var(--indigo-600);color:#fff;
  font-family:var(--ff-cond);font-weight:600;font-size:clamp(14px,1.4vw,17px);line-height:1.5}
.paste__box:focus{outline:none;border-color:var(--lime)}

.paste__preview{display:flex;flex-direction:column;gap:4px;min-height:2em;
  font-size:clamp(12px,1.2vw,14px);color:rgba(255,255,255,.45)}
.paste__row{display:flex;gap:8px;align-items:baseline;
  padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.paste__rowprompt{color:rgba(255,255,255,.5);font-weight:700}
.paste__rowprompt::after{content:'\2192';margin-left:8px;color:rgba(255,255,255,.3)}
.paste__row b{color:var(--lime);font-weight:900}
.paste__more{padding:2px 10px;font-weight:700}

.paste__acts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.paste__acts .btn{min-width:150px}


/* ── unlisted toggle in the builder bar ── */
.builder__private{display:flex;align-items:center;gap:.45em;cursor:pointer;
  align-self:center;padding:0 6px;min-height:40px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,12px);color:rgba(255,255,255,.5)}
.builder__private:hover{color:var(--lime)}
.builder__private input{width:16px;height:16px;accent-color:var(--lime);cursor:pointer}

/* ── the edit key ───────────────────────────────────────────
   Shown once, because the server keeps only its hash and cannot hand
   it back. It is what makes a deck editable rather than permanent. */
.deckkey{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:2px dashed rgba(222,255,102,.4)}
.deckkey[hidden]{display:none}
.deckkey__eyebrow{font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,12px);color:var(--lime)}
.deckkey__value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(12px,1.5vw,17px);color:#fff;word-break:break-all;text-align:center;
  background:var(--indigo-950);border-radius:8px;padding:8px 12px;width:100%}
.deckkey__how{margin:0;font-size:clamp(11px,1.15vw,13px);line-height:1.45;
  color:rgba(255,255,255,.6);text-align:center}

.deckshare__pull{background:none;border:0;cursor:pointer;padding:8px;min-height:44px;
  color:rgba(255,255,255,.35);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px}
.deckshare__pull:hover{color:var(--red)}
.deckshare__pull[hidden]{display:none}


/* ── the deck gallery ───────────────────────────────────────
   Browsing beats being told a code. A private deck still has the code
   box at the bottom, because that is the only way into one. */
.gallery{position:relative;width:min(860px,100%);max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  border:3px solid var(--lime);border-radius:22px;
  padding:clamp(20px,3.2vh,32px) clamp(18px,2.6vw,32px)}
.gallery__head{display:flex;flex-direction:column;gap:12px}
.gallery__tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gallery__search{flex:1 1 220px;min-height:44px;border-radius:12px;padding:0 14px;
  background:var(--indigo-950);border:2px solid var(--indigo-600);color:#fff;
  font-family:var(--ff-cond);font-weight:700;font-size:clamp(14px,1.4vw,17px)}
.gallery__search:focus{outline:none;border-color:var(--lime)}
.gallery__sort{display:flex;gap:0;border:2px solid var(--indigo-600);border-radius:12px;overflow:hidden}
.gallery__sortbtn{min-height:44px;padding:0 16px;cursor:pointer;background:none;border:0;
  color:rgba(255,255,255,.6);font-family:var(--ff-cond);font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;font-size:clamp(11px,1.1vw,13px);
  transition:background .15s,color .15s}
.gallery__sortbtn:hover{color:#fff}
.gallery__sortbtn.is-on{background:var(--lime);color:var(--indigo-950)}

.gallery__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gallery__state{margin:0;text-align:center;color:rgba(255,255,255,.5);
  font-size:clamp(12px,1.2vw,15px);min-height:1.2em}

.gcard{display:flex;flex-direction:column;text-align:left;cursor:pointer;overflow:hidden;
  border-radius:14px;background:rgba(255,255,255,.04);border:2px solid var(--indigo-600);
  color:#fff;padding:0;transition:border-color .15s,transform .12s var(--ease)}
.gcard:hover{border-color:var(--lime);transform:translateY(-2px)}
.gcard__art{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  background:var(--indigo-950);display:flex;align-items:center;justify-content:center}
.gcard__art::before{content:'';position:absolute;inset:-12%;background-image:var(--cover);
  background-size:cover;background-position:50% 35%;
  filter:blur(16px) saturate(1.2) brightness(.6);z-index:0}
.gcard__art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:contain;padding:6px;filter:drop-shadow(0 6px 16px rgba(14,14,45,.6))}
.gcard__glyph{position:relative;z-index:1;font-family:var(--ff-display);
  font-size:clamp(28px,4vw,44px);color:rgba(222,255,102,.45)}
.gcard__body{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.gcard__name{font-family:var(--ff-display);font-size:clamp(14px,1.5vw,18px);line-height:1.1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;min-height:calc(2 * 1.1em)}
.gcard__blurb{font-size:clamp(11px,1.15vw,13px);color:rgba(255,255,255,.55);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.gcard__meta{margin-top:2px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,11px);color:var(--lime)}

.gallery__pager{display:flex;align-items:center;justify-content:center;gap:14px}
.gallery__pager[hidden]{display:none}
.gallery__page{font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(10px,1.05vw,13px);color:rgba(255,255,255,.5)}

.gallery__code{border-top:2px solid rgba(255,255,255,.1);padding-top:14px;
  display:flex;flex-direction:column;gap:10px;align-items:center}
.gallery__code p{margin:0;color:rgba(255,255,255,.5);font-size:clamp(12px,1.2vw,14px)}


/* ── deck cover picker ── */
.builder__cover{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);
  border:2px solid var(--indigo-600)}
.builder__coverpick{position:relative;flex:0 0 auto;width:132px;aspect-ratio:16/10;
  border-radius:10px;overflow:hidden;cursor:pointer;padding:0;
  background:var(--indigo-950);border:2px dashed rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.builder__coverpick:hover{border-color:var(--lime)}
.builder__coverpick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.builder__coverempty{font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:10px;color:rgba(255,255,255,.45);text-align:center;padding:0 8px}
.builder__covertext{flex:1 1 220px;display:flex;flex-direction:column;gap:3px}
.builder__covertext b{font-family:var(--ff-cond);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;font-size:clamp(12px,1.2vw,15px)}
.builder__covertext span{font-size:clamp(11px,1.15vw,13px);color:rgba(255,255,255,.55);line-height:1.4}
.builder__coverclear{align-self:flex-start;margin-top:4px;background:none;border:0;cursor:pointer;
  padding:4px 0;min-height:32px;color:rgba(255,255,255,.4);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.builder__coverclear:hover{color:var(--red)}

/* ── report control on a gallery card ── */
.gcard__wrap{position:relative;display:flex}
.gcard__wrap .gcard{flex:1}
.gcard__flag{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;padding:0;
  border-radius:50%;cursor:pointer;border:0;background:rgba(14,14,45,.72);
  color:rgba(255,255,255,.5);font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,color .15s,background .15s}
.gcard__wrap:hover .gcard__flag,.gcard__flag:focus-visible{opacity:1}
.gcard__flag:hover{color:var(--red);background:rgba(14,14,45,.92)}
.gcard__flag:disabled{opacity:.4;cursor:default}
@media (pointer:coarse){ .gcard__flag{opacity:1;width:38px;height:38px} }

/* ── your own decks ── */
.gallery__note{margin:0;color:rgba(255,255,255,.5);font-size:clamp(12px,1.2vw,14px);line-height:1.4}
.minedecks{display:flex;flex-direction:column;gap:10px}
.minedeck{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:2px solid var(--indigo-600)}
.minedeck__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.minedeck__head b{font-family:var(--ff-display);font-size:clamp(15px,1.6vw,20px);
  overflow-wrap:anywhere}
.minedeck__tag{padding:2px 9px 3px;border-radius:99px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;font-size:10px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.minedeck__tag.is-live{background:var(--lime);color:var(--indigo-950)}
.minedeck__meta{font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(9px,.95vw,11px);color:rgba(255,255,255,.45)}
.minedeck__codes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.minedeck__code{font-family:var(--ff-display);color:var(--indigo-950);background:var(--lime);
  border-radius:7px;padding:.34em .5em .1em;font-size:clamp(13px,1.4vw,17px);letter-spacing:.1em}
.minedeck__key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:rgba(255,255,255,.55);background:var(--indigo-950);border-radius:6px;padding:4px 8px;
  word-break:break-all}
.minedeck__warn{font-size:11px;color:var(--amber);font-weight:700}
.minedeck__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}

.welcome__links{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}


/* ── the menu on a short window ─────────────────────────────
   A laptop viewport is often 700-800px tall and the menu wants ~770,
   so it tipped into scrolling on exactly the machines most people use.
   Everything here just compresses it back under the fold; it stays
   scrollable if someone has a genuinely tiny window. */
@media (max-height:860px){
  .welcome{gap:clamp(8px,1.4vh,16px)}
  .brandmark--stack .brandmark__img{padding-top:.5rem}
  .welcome .brandmark__img{height:clamp(64px,13vh,132px)}
  .welcome__pitch{font-size:clamp(15px,1.8vw,22px);line-height:1.35}
  .welcome__acts{gap:clamp(8px,1.3vh,14px)}
  .welcome__acts .btn{min-height:clamp(48px,6.2vh,60px)}
  .welcome__acts .btn--huge{font-size:clamp(19px,2vw,26px)}
  .daily{padding-block:clamp(8px,1.3vh,14px)}
}

@media (max-height:660px){
  .welcome .brandmark__img{height:clamp(52px,11vh,96px)}
  .welcome__pitch{font-size:clamp(14px,1.6vw,18px)}
  .welcome__pitch b{display:inline}
  .welcome__acts .btn{min-height:clamp(44px,5.6vh,52px)}
  .welcome__stats{display:none}   /* the least load-bearing line on the screen */
}