/* ============================================================================
   Bad Crawler — badcrawler.com

   DESIGN DIRECTION: BROADCAST. Chosen 24 Sep 2026 from three options.

   The thing people forget about the dungeon is that it is a televised
   entertainment product with sponsors and a viewing public. The System is the
   broadcaster's automated graphics package, and this page is its scoreboard:
   lower-third bars, an on-air rail, rank numerals set large, contestant rows.

   What that rules OUT, deliberately, because the previous design did all four
   and they are the commonest marks of a generated page:
     · no monospace face for data labels — Archivo's tabular figures instead
     · no meta strings joined with middle dots
     · no soft uniform card kit; radius varies by role and earns its place
     · no fade-and-slide on every card forever — ONE staggered arrival, once

   Capitals survive, but as broadcast furniture (badges, group heads, buttons),
   because that is genuinely what on-air graphics look like. They are the
   subject's vernacular here, not a default reached for.
   ========================================================================== */

/* ---------- the faces, served from this origin ----------
   Self-hosted rather than fetched from Google: the footer promises nothing is sent anywhere,
   and a third-party font request sends the reader's IP to a third party. SIL OFL, /fonts/OFL.txt.
   `swap` so the page is readable before they arrive; the fallback stack is a heavy grotesque so
   the shift when they land is a shift in character, not in layout. */
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* must equal the bc-build stamp in index.html (check 29); the page reloads the sheet if not */
  --bc-build:"2026-09-25.12";
  color-scheme: dark;

  /* the studio */
  --ground:#150a2c;
  --panel:#221247;
  --panel-lift:#2d1860;
  --line:#3d2273;
  --line-soft:#31195c;

  /* the graphics package */
  --on-air:#ffd400;        /* the System's own colour: recommendations, rails */
  --on-air-deep:#8f7400;
  --live:#ff5277;          /* negatives, the wordmark stop */
  --go:#22e6a0;            /* the action that advances you */

  --ink:#f6f1ff;
  --ink-dim:#c3b2e4;
  --ink-faint:#9483bd;

  --display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw:56rem;
  --rail:.5rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.6 var(--ui);
  padding:0 16px 5rem;
}
.wrap{max-width:var(--maxw);margin:0 auto}
a{color:var(--on-air)}
:focus-visible{outline:3px solid var(--on-air);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}

/* ---------- the wordmark ---------- */
header{padding:3.25rem 0 1.5rem}
h1{
  margin:0 0 .6rem;
  font:800 clamp(2.8rem,11vw,5.5rem)/.88 var(--display);
  letter-spacing:-.045em;text-wrap:balance;
}
h1 a{color:inherit;text-decoration:none;display:inline-block}
h1 a:hover{color:#fff}
h1 .dot{color:var(--live)}
h1 a:hover .dot{color:var(--on-air)}
.tagline{
  margin:0 0 1.1rem;color:var(--ink-dim);
  font-size:1.15rem;max-width:36ch;text-wrap:pretty;
}

/* pills, as separate objects — never one string joined by middle dots */
.count{margin:0 0 1rem;font-size:1.02rem;color:var(--ink-dim);max-width:44ch;text-wrap:pretty}
.count strong{color:var(--on-air);font:800 1.5rem/1.1 var(--display);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.15rem}
.count span{display:block;color:var(--ink-faint);font-size:.9rem;margin-top:.15rem}

.badge-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.badge{
  font:700 .68rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;
  color:var(--ink-faint);background:var(--panel);
}
.badge.warn{background:var(--live);border-color:var(--live);color:#2a0009}

/* ---------- the three questions ---------- */
/* The H1 is the brand lockup — a logo and a wordmark, carrying no descriptor at all. This is
   therefore the first heading on the page that says what the thing DOES, which matters to a
   reader landing cold and to a search result alike. It takes over the rule and the spacing the
   form used to own, so it reads as a section marker in the same uppercase micro-label family as
   the legends below it, not as a second title competing with the lockup. */
.form-head{
  margin:2rem 0 1.5rem;border-top:1px solid var(--line);padding-top:1.75rem;
  font:700 .74rem/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
form{margin:0}

/* ---------- the interview: one question per screen ---------- */
.iv-head{display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem}
.iv-count{margin:0;flex:0 0 auto;
  font:700 .68rem/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.iv-bar{flex:1 1 auto;height:3px;background:var(--line);border-radius:999px;overflow:hidden}
.iv-fill{height:100%;width:0;background:var(--on-air);
  transition:width .35s cubic-bezier(.2,.7,.3,1)}

/* The System's note on the PREVIOUS answer. Deliberately not a speech bubble and deliberately
   not first-person: this is a file being written, not a character talking. */
.iv-file{
  margin:0 0 1.5rem;padding:.8rem 1rem;max-width:60ch;
  border-left:2px solid var(--on-air);background:var(--panel);
  font-size:.92rem;color:var(--ink-dim);text-wrap:pretty;
}
.iv-sub{margin:.5rem 0 1.15rem;max-width:56ch;color:var(--ink-dim);text-wrap:pretty}
legend .iv-prompt{color:var(--ink)}

.iv-options{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.iv-opt{
  display:flex;align-items:flex-start;gap:.85rem;width:100%;text-align:left;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:.95rem 1.05rem;font:500 1.02rem/1.4 var(--ui);cursor:pointer;
  transition:background .12s,border-color .12s,transform .12s;
}
.iv-opt:hover{background:var(--panel-lift);border-color:var(--ink-faint)}
.iv-opt:active{transform:translateY(1px)}
.iv-opt:focus-visible{outline:2px solid var(--on-air);outline-offset:2px}
.iv-opt.on{border-color:var(--on-air)}
.iv-key{flex:0 0 auto;color:var(--on-air);font-weight:700;font-variant-numeric:tabular-nums}
.iv-text{flex:1 1 auto;text-wrap:pretty}

fieldset{border:0;padding:0;margin:0 0 1.35rem}
legend{
  font:700 .72rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);padding:0;margin-bottom:.5rem;
}
legend .n{color:var(--on-air);margin-right:.55rem;font-variant-numeric:tabular-nums}
input[type=text],select{
  width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.85rem .85rem;
  font:500 1.05rem/1.3 var(--ui);
}
input[type=text]::placeholder{color:var(--ink-faint)}
select{
  appearance:none;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.hint{margin:.45rem 0 0;font-size:.88rem;color:var(--ink-faint)}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.5rem 0 0}

/* ---------- buttons: the one that advances you is filled, the rest are not --- */
.btn{
  display:inline-block;cursor:pointer;
  background:var(--on-air);color:#251c00;border:1px solid var(--on-air);
  border-radius:999px;padding:.85rem 1.5rem;
  font:800 .82rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
}
.btn:hover{background:#ffe04d;border-color:#ffe04d}
.btn.ghost{background:transparent;color:var(--ink-dim);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel);color:var(--ink);border-color:var(--ink-faint)}
.btn.small{padding:.55rem 1rem;font-size:.7rem}
.btn.take{background:var(--go);border-color:var(--go);color:#032a1d}
.btn.take:hover{background:#4df0b6;border-color:#4df0b6}
.linkish{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--on-air);font:600 .85rem/1 var(--ui);text-decoration:underline;
}

/* ---------- the lower third: who is on screen ---------- */
#out{margin-top:2.5rem}
.sysbar{
  border-left:var(--rail) solid var(--on-air);
  background:var(--panel);border-radius:0 5px 5px 0;
  padding:1.1rem 1.2rem;margin-bottom:1.5rem;
}
.sysbar h2{
  margin:0 0 .75rem;color:var(--on-air);
  font:800 .8rem/1.2 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
.sysbar dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.95rem}
.sysbar dt{
  color:var(--ink-faint);font:700 .68rem/1.7 var(--ui);
  letter-spacing:.09em;text-transform:uppercase;
}
.sysbar dd{margin:0;color:var(--ink)}
.sysbar .note{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-dim)}
.reassigned{color:var(--live);font-size:.82rem;font-weight:600}

/* ---------- a contestant row ---------- */
.offers{display:flex;flex-direction:column;gap:.85rem}
.offer{
  margin:0;background:var(--panel);
  border:0;border-left:var(--rail) solid var(--line);
  border-radius:0 5px 5px 0;
  padding:.95rem 1.15rem 1.05rem;
}
.offer.rec{border-left-color:var(--on-air);background:var(--panel-lift)}

.offer>summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  position:relative;padding-right:2.2rem;
}
.offer>summary::-webkit-details-marker{display:none}
.offer>summary::after{
  content:"";position:absolute;right:.2rem;top:1.05rem;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--ink-faint);border-bottom:2.5px solid var(--ink-faint);
  transform:rotate(45deg);
}
.offer[open]>summary::after{transform:rotate(-135deg);top:1.35rem}
.offer>summary:hover::after{border-color:var(--on-air)}
.offer[open]>summary{margin-bottom:.9rem}
.sum-head{flex:1 1 auto;min-width:0}
.offer>summary .btn.take{flex:0 0 auto;margin-top:.2rem;white-space:nowrap}

.rec-flag{
  display:inline-block;margin:0 0 .5rem;
  background:var(--on-air);color:#251c00;border-radius:3px;padding:.32rem .55rem;
  font:800 .64rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
.offer h3{
  margin:0;display:flex;align-items:baseline;gap:.55rem;
  font:800 clamp(1.2rem,3.9vw,1.75rem)/1.08 var(--display);
  letter-spacing:-.032em;color:var(--ink);text-wrap:balance;
}
/* the rank is the one big typographic moment in each row */
.offer h3 .num{
  font:800 1.85rem/1 var(--display);color:var(--ink-faint);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.offer.rec h3 .num{color:var(--on-air-deep)}

.prose{margin:0 0 .4rem;color:var(--ink-dim);font-size:.96rem;max-width:64ch}
.prose:last-of-type{margin-bottom:.9rem}

/* ---------- the sheet ---------- */
.group{margin:0 0 .8rem}
.group+.group,.prose+.group{margin-top:.95rem}
.group-head{
  margin:0 0 .35rem;color:var(--ink-faint);
  font:700 .66rem/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
}
.lines{list-style:none;margin:0;padding:0;font-size:.93rem}
.lines li{position:relative;padding:.14rem 0 .14rem 1.75rem}
/* :not(.desc) — a glossed flavour line has no sign, so its gloss is the first span and must
   stay in the flow rather than become the sign column. */
.lines li>span:first-child:not(.desc){
  position:absolute;left:0;width:1.5rem;text-align:right;
  font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem;
}
.lines .up{color:var(--go)}
.lines .down{color:var(--live)}
.lines li.trait.neg{color:#e5a3b4}
.lines .joke{color:var(--ink-dim);font-size:.95em}
.lines .desc{color:var(--ink-faint)}

.combined{
  margin:0;display:flex;flex-wrap:wrap;gap:1rem;
  padding:.55rem .75rem;border-radius:4px;background:var(--ground);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem;
}

/* the System's remark, set as an on-air caption */
.barb{
  margin:1rem 0 .9rem;padding:.75rem .95rem;
  border-left:3px solid var(--on-air);border-radius:0 4px 4px 0;
  background:rgba(255,212,0,.08);color:var(--ink);font-size:.98rem;
}
.offer-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin:.9rem 0 0}

/* ---------- the finished crawler ---------- */
.crawler-card{
  background:var(--panel-lift);border:0;border-left:var(--rail) solid var(--go);
  border-radius:0 6px 6px 0;padding:1.3rem 1.35rem 1.2rem;
}
.crawler-card h3{
  display:block;margin:0 0 .8rem;
  font:800 clamp(1.5rem,5.2vw,2.35rem)/1.03 var(--display);letter-spacing:-.038em;
}
.card-preview{margin:1rem 0 0;padding:0}
.card-preview img{display:block;width:100%;height:auto;border-radius:5px;border:1px solid var(--line)}
.card-preview figcaption{margin:.45rem 0 0;font-size:.8rem;color:var(--ink-faint)}

/* ---------- the rest of the list ---------- */
.more-wrap{margin:2rem 0 1.5rem;text-align:center}
.more-wrap .btn{min-width:14rem}
.exhausted{
  margin:0;padding:1rem 1.1rem;border:1px dashed var(--line);border-radius:5px;
  color:var(--ink-faint);font-size:.92rem;
}
.closer{
  margin:1.75rem 0 0;padding:1rem 1.15rem;
  border:1px solid var(--line);border-radius:5px;
  color:var(--ink-dim);font-size:.97rem;
}

/* ---------- the small print ---------- */
footer{margin-top:4.5rem;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-faint)}
footer h2{
  margin:0 0 .85rem;color:var(--ink-dim);
  font:700 .7rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
footer p{margin:0 0 .8rem;max-width:64ch}
/* ---------- credits ---------- */
.credits{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem;max-width:62ch}
.credits li{display:flex;flex-wrap:wrap;gap:.15rem .9rem;align-items:baseline}
.credits .c-what{flex:0 0 26ch;color:var(--ink-faint)}
.credits a{flex:0 1 auto}

/* Outbound links live in the closing prose and in the credits list above. They are the only links off the
   site: the author, the wiki the names were taken from, and the readers. Every comparable fan
   tool credits the author with a link; not doing so was the one thing this page got wrong. */
footer a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}
footer a:hover,footer a:focus-visible{color:var(--on-air);text-decoration-color:var(--on-air)}
footer strong{color:var(--ink-dim)}
.build{margin:1.4rem 0 0;font-size:.74rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.build code{color:var(--ink-dim);font-family:inherit}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#shot{display:none}

/* ---------- ONE orchestrated moment ----------
   The offering arrives the way results come in on air: rows land in sequence,
   once, over about 400ms. Nothing else on the page animates by itself. */
@media (prefers-reduced-motion:no-preference){
  .offers .offer{animation:land .34s cubic-bezier(.22,.9,.3,1) both}
  .offers .offer:nth-child(1){animation-delay:0ms}
  .offers .offer:nth-child(2){animation-delay:60ms}
  .offers .offer:nth-child(3){animation-delay:120ms}
  .offers .offer:nth-child(4){animation-delay:180ms}
  .offers .offer:nth-child(5){animation-delay:240ms}
  @keyframes land{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .offer>summary::after{transition:transform .18s ease,border-color .18s ease}
  .btn{transition:background .15s ease,border-color .15s ease}
}

/* ---------- phone ---------- */
@media (max-width:34rem){
  .offer>summary{flex-wrap:wrap}
  .offer>summary .btn.take{width:100%;margin-top:.65rem}
  .offer h3 .num{font-size:1.45rem}
  .sysbar dl{grid-template-columns:1fr;gap:.05rem .5rem}
  .sysbar dt{margin-top:.5rem}
  .combined{gap:.65rem;font-size:.86rem}
}

/* The mark sits in the wordmark lockup, sized off the heading so it tracks the clamp.
   The words live in their own span: as bare text nodes they became flex children and the
   full stop drifted a whole gap away from "Crawler". */
h1 a{display:inline-flex;align-items:center;gap:.34em}
h1 .wm{display:block}
h1 .mark{
  width:.92em;height:.92em;flex:0 0 auto;display:block;
  margin-top:-.06em;   /* optical: the skull's mass sits low in its box */
}
@media (max-width:34rem){ h1 a{gap:.32em} }
/* On a phone a fixed label column would leave the link squeezed into a few characters, so the
   credits stack instead: label, then link underneath. */
@media (max-width:34rem){
  .credits .c-what{flex:1 1 100100%;font-size:.86rem}
  .credits li{gap:.05rem .6rem}
}

/* ============================================================================
   FLOW B, "BROADCAST ROUNDS" — chosen 25 Sep 2026.
   welcome → interview → generating → round 2 race → round 3 class → crawler.
   One screen at a time. From the first question on, the header is replaced by a
   chyron one strip tall, so the question is the first thing on screen.
   ========================================================================== */
body:not([data-screen=welcome]):not([data-screen=error]) header{display:none}
body[data-screen=gen]{background:var(--on-air)}
body[data-screen=gen] footer{display:none}

/* ---------- the chyron ---------- */
.chyron{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:.75rem;
  margin:0 -16px;padding:.7rem 16px;background:var(--on-air);color:#150a2c;
}
.chyron[data-tone=race]{background:var(--live)}
.chyron[data-tone=class]{background:var(--go)}
.chyron .home-link{display:block;flex:0 0 auto;line-height:0}
.chyron .home-link img{width:28px;height:28px}
.chy-label{flex:1 1 auto;margin:0;font:800 .78rem/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.chy-round{opacity:.72;margin-right:.35rem}
.chy-count{margin:0;font:800 1.05rem/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.screen{margin:0}

/* ---------- welcome ---------- */
#welcome .form-head{margin:1rem 0 1rem;padding-top:1.1rem}
.welcome-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.15rem 1.1rem}
.now{display:inline-block;margin:0;background:var(--on-air);color:#150a2c;padding:.45rem .65rem;
  font:800 .72rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.welcome-title{margin:.75rem 0 .6rem;font:800 clamp(2.2rem,10vw,3.4rem)/.95 var(--display);letter-spacing:-.035em;text-wrap:balance}
.welcome-title span{color:var(--on-air)}
.welcome-sys{margin:0;color:var(--ink-dim);max-width:52ch;font-size:.95rem;line-height:1.5;text-wrap:pretty}
.welcome-sys b{color:var(--live);font:800 .72rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;margin-right:.35rem}
.rounds{list-style:none;margin:.9rem 0 1.1rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.rounds li{border:1px solid var(--line);border-radius:10px;padding:.55rem .55rem;font-weight:700;font-size:.86rem;line-height:1.2}
.rounds li:first-child{border-color:var(--on-air)}
.rounds b{display:block;margin-bottom:.2rem;font:800 .6rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--on-air)}
.rounds li:nth-child(2) b{color:var(--live)}
.rounds li:nth-child(3) b{color:var(--go)}
.rounds li:nth-child(4) b{color:var(--ink-dim)}
.field-label{display:block;margin:0 0 .5rem;font:800 .7rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--on-air)}
#name{height:3.75rem;border-radius:14px;border-width:2px;font:800 1.35rem/1 var(--display);padding:0 1.1rem}
.btn.big{display:block;width:100%;margin-top:1rem;padding:1.15rem;border-radius:14px;font-size:.92rem;text-align:center}

/* ---------- round 1: the interview ---------- */
#q{padding-top:1rem}
.pips{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:5px;margin:0 0 1.5rem}
.pips span{height:6px;border-radius:3px;background:var(--line)}
.pips span.on{background:var(--on-air)}
.iv-q legend{margin-bottom:.6rem}
.iv-q legend .n{display:block;margin:0 0 .6rem}
.iv-q legend .iv-prompt{display:block;font:800 clamp(1.7rem,7.6vw,2.3rem)/1.04 var(--display);
  letter-spacing:-.03em;text-transform:none;color:var(--ink);text-wrap:balance}
.iv-q .iv-sub{font-size:1.02rem}
.iv-opt{align-items:center;border-radius:14px;padding:.6rem .9rem .6rem .6rem;border-color:transparent}
.iv-key{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:10px;
  background:var(--on-air);color:#150a2c;font:800 1.2rem/1 var(--display)}
.iv-opt.on{border-color:var(--on-air)}
.controls .back{font-size:.9rem;color:var(--ink-dim);text-decoration:none}
.ticker{display:flex;align-items:stretch;margin:1.5rem -16px 0;background:var(--panel);border-top:1px solid var(--line)}
.ticker b{flex:0 0 auto;display:flex;align-items:center;padding:0 .75rem;background:var(--live);color:#150a2c;
  font:800 .66rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.ticker span{padding:.9rem 1rem;font-size:.9rem;font-style:italic;color:var(--ink-dim);text-wrap:pretty}

/* ---------- the generating beat ---------- */
.gen{min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:2rem 0;color:#150a2c;text-align:center}
.gen-spin{position:relative;width:13.5rem;height:13.5rem}
.gen-spin svg{position:absolute;inset:0}
.gen-spin img{position:absolute;left:25%;top:25%;width:50%;height:50%}
.gen-spin .spin{transform-origin:66px 66px}
@media (prefers-reduced-motion:no-preference){
  .gen-spin .spin{animation:bcspin 1.1s linear infinite}
  @keyframes bcspin{to{transform:rotate(360deg)}}
}
.gen-kicker{margin:.5rem 0 0;font:800 .78rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.gen-title{margin:0;max-width:16ch;font:800 clamp(1.8rem,8vw,2.3rem)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
.gen-log{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.4rem;font-weight:600;text-align:left}
.gen-log li{opacity:.45}
.gen-log li::before{content:"\00b7";display:inline-block;width:1.2rem}
.gen-log li.is-now{opacity:1;font-weight:800}
.gen-log li.is-now::before{content:"\2192"}
.gen-log li.is-done{opacity:1}
.gen-log li.is-done::before{content:"\2713"}
.gen .linkish{margin-top:1rem;color:#150a2c;font-weight:800}

/* ---------- rounds 2 and 3 ---------- */
#out.room{margin-top:0}
.room-head{padding-top:1rem}
.room-head h2{margin:0 0 .35rem;font:800 clamp(2rem,9.5vw,2.7rem)/1 var(--display);letter-spacing:-.03em}
.room-explain{margin:0 0 .35rem;color:var(--ink-dim);font-size:.95rem;text-wrap:pretty}
.room-explain b.race,.traits.race .group-head,.src.race{color:var(--live)}
.room-explain b.cls,.traits.class .group-head,.src.cls{color:var(--go)}
.onfile{margin:.35rem 0;font-size:.86rem;color:var(--ink-dim);font-style:italic}
.onfile b{font:800 .64rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--ink-faint)}
.room-head .note{margin:.2rem 0 .9rem;font-size:.85rem;color:var(--ink-faint)}
.race-lock{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;font-size:.9rem;font-weight:700}
.race-lock .tag{border:1px solid var(--live);color:var(--live);border-radius:6px;padding:.28rem .45rem;
  font:800 .6rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.race-lock .nm{flex:1 1 auto;min-width:0}

.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin:0 -16px;padding:0 16px;scroll-padding:0 16px;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 min(86%,27rem);height:var(--card-h,62svh);scroll-snap-align:start;
  background:var(--panel);border:2px solid var(--line);border-radius:18px;overflow:hidden}
.room-race .card.current{border-color:var(--live)}
.room-class .card.current{border-color:var(--go)}
.card-scroll{height:100%;overflow-y:auto;overscroll-behavior-y:contain;padding:1rem 1rem 4.5rem;
  display:flex;flex-direction:column;gap:.7rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.card-scroll:focus-visible{outline:none}
.card:has(.card-scroll:focus-visible){outline:3px solid var(--on-air);outline-offset:2px}
.card-fade{position:absolute;left:0;right:0;bottom:0;height:4.75rem;pointer-events:none;
  background:linear-gradient(to bottom,rgba(34,18,71,0),var(--panel) 72%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.65rem;transition:opacity .2s}
.card-fade span{padding:.3rem .7rem;border-radius:999px;background:var(--panel-lift);border:1px solid var(--line);
  font-size:.74rem;font-weight:700;color:var(--ink-dim)}
.card.at-end .card-fade{opacity:0}
.card-top{display:flex;justify-content:space-between;align-items:center;min-height:1.4rem}
.card .rec-flag{margin:0}
.card .kind{font:800 .64rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.room-race .card .kind{color:var(--live)}
.room-class .card .kind{color:var(--go)}
.card h3{margin:0;font:800 1.75rem/1.02 var(--display);letter-spacing:-.025em;text-wrap:balance}
.card .prose,.card .prose:last-of-type{margin:0;font-size:.88rem}
.card .group-head,.crawler-screen .group-head{margin:.2rem 0 .1rem}
.statgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;text-align:center}
.statgrid>div{background:var(--panel-lift);border-radius:8px;padding:.4rem 0 .35rem}
.statgrid b{display:block;font:800 1.05rem/1.2 var(--ui);font-variant-numeric:tabular-nums}
.statgrid small{display:block;font:700 .6rem/1.3 var(--ui);letter-spacing:.06em;color:var(--ink-dim)}
.statgrid i{display:block;font-style:normal;font-size:.7rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.statgrid .up b{color:var(--go)}
.statgrid .down b{color:var(--live)}
.statgrid .zero b,.statgrid .zero small{color:var(--ink-faint)}
.joke{margin:0;font-size:.84rem;font-style:italic;color:var(--ink-faint)}
.skills{display:flex;flex-direction:column;gap:.4rem}
.sk{display:flex;gap:.55rem;align-items:flex-start;margin:0;font-size:.86rem;line-height:1.4}
.sk .lv{flex:0 0 2rem;margin-top:.05rem;border-radius:6px;background:var(--on-air);color:#150a2c;
  font:800 .74rem/1.6 var(--ui);text-align:center;font-variant-numeric:tabular-nums}
.sk .t{flex:1 1 auto;min-width:0}
.sk .d{color:var(--ink-dim)}
.sk .src{flex:0 0 auto;padding-top:.2rem;font:800 .6rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.src.both{color:var(--on-air)}
.traits{display:flex;flex-direction:column;gap:.3rem}
.tr{display:flex;gap:.5rem;margin:0;font-size:.86rem;line-height:1.4}
.tr b{flex:0 0 .8rem}
.tr b.up{color:var(--go)}
.tr b.down{color:var(--live)}
.tr.neg{color:#ff8ba3}
.card .barb{margin:.2rem 0 0;font-size:.86rem;font-style:italic}

.car-nav{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.75rem 0 0}
.dots{display:flex;gap:6px;align-items:center}
.cdot{width:7px;height:7px;border-radius:4px;background:var(--line);transition:width .15s}
.cdot.on{width:22px;background:var(--on-air)}
.room-race .cdot.on{background:var(--live)}
.room-class .cdot.on{background:var(--go)}
.car-count{font-size:.8rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.car-arrow{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink-dim);font:700 1.05rem/1 var(--ui);cursor:pointer}
.car-arrow:hover{background:var(--panel);color:var(--ink)}

.cta-bar{position:sticky;bottom:0;z-index:5;margin:.8rem -16px 0;
  padding:.75rem 16px calc(.8rem + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cta-bar .btn{width:100%;padding:1.05rem 1rem;border-radius:14px;text-align:center;line-height:1.25}
.room-class .cta-bar .btn{background:var(--go);border-color:var(--go);color:#032a1d}
.cta-bar .more-wrap{margin:0}
.cta-bar .linkish{color:var(--ink-dim);font-size:.86rem;text-decoration:none}
.cta-bar .exhausted{display:block;border:0;padding:0;text-align:center;font-size:.82rem}
.room .closer{margin-top:1.25rem}

/* ---------- final: the crawler ---------- */
.crawler-screen{padding-top:1.2rem}
.kicker{margin:0 0 .4rem;font:800 .7rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.cr-name{margin:0 0 .8rem;font:800 clamp(3rem,15vw,4.6rem)/.9 var(--display);letter-spacing:-.045em;overflow-wrap:anywhere}
.cr-row{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .3rem}
.cr-row small{flex:0 0 3.4rem;font:800 .62rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.cr-row small.race{color:var(--live)}
.cr-row small.cls{color:var(--go)}
.cr-row span{font:800 1.3rem/1.2 var(--ui)}
.crawler-screen>.prose{margin:.6rem 0 0;font-size:.92rem}
.cr-block{margin-top:1.25rem}
.crawler-screen .statgrid b{font-size:1.3rem}
.crawler-screen .sk{font-size:.92rem}
.traits.box{margin-top:1rem;padding:.9rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.traits.box .tr{font-size:.92rem}
.cr-barb{margin:1.4rem 0 0;font:800 1.15rem/1.4 var(--display);letter-spacing:-.01em;color:var(--on-air);text-wrap:pretty}
.share{margin-top:1.75rem;padding:1rem;background:var(--panel-lift);border-radius:18px}
.share h3{margin:0 0 .75rem;font:800 .7rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.share .card-preview{margin:0 auto .9rem;max-width:22rem}
.share .card-preview img{min-height:4rem;background:var(--ground)}
.share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.share-grid .btn{text-align:center;text-decoration:none;border-radius:12px;padding:.95rem .5rem}
.share-grid .btn:first-child{grid-column:1/-1}
.share-note{margin:.75rem 0 0;font-size:.8rem;color:var(--ink-faint);text-wrap:pretty}
.cr-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin:1.25rem 0 0}
.cr-actions .linkish{color:var(--ink-dim);font-size:.92rem}

/* welcome: the lockup and the fan-work badges stay on top; the count moved under the button */
body[data-screen=welcome] header{padding:1.75rem 0 .5rem}
#welcome .badge-row{margin-top:.9rem}
body[data-screen=welcome] header{padding-bottom:1.1rem}
#welcome .count{margin:1.1rem 0 0}
.cr-bar{margin-top:1.5rem}
.card:not(.current){cursor:pointer}
.carousel:focus-visible{outline:3px solid var(--on-air);outline-offset:4px}
/* On a phone: no carousel nav, and no room heading or explainer — the chyron already says
   "Round 2 Pick your race", and every pixel goes to the card (Lenny, 25 Sep 2026).
   🔴 Width is in the query as well as pointer type ON PURPOSE. The pointer-only version shipped
   in build .7 and the nav still showed on Lenny's phone: some Android browsers report
   hover:hover / pointer:fine. Width is the check a phone cannot get wrong. A narrow desktop
   window loses the arrows too, but keeps arrow keys and click-the-peeking-card. */
@media (hover:none),(pointer:coarse),(max-width:40rem){
  .car-nav{display:none}
  .car-nav+.cta-bar{margin-top:1rem}
  .room-head h2{display:none}
  .room-head{padding-top:.9rem}
  .room-head .race-lock{margin-bottom:.9rem}
}
/* One line, always. A long name wrapping to two lines made the bar taller on some cards and not
   others, which moved the button and changed the card fit as the reader swiped. */
.cta-bar .take-big{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- skill levels: the info button and its modal ---------- */
.info{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin:0 .1rem 0 .35rem;padding:0;
  vertical-align:.08rem;border:1.5px solid var(--on-air);border-radius:50%;background:transparent;color:var(--on-air);
  font:800 .7rem/1 var(--ui);font-style:normal;cursor:pointer}
.info:hover,.info:focus-visible{background:var(--on-air);color:var(--ground)}
.info:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.spells-head{margin-top:.5rem}
.src.mp{color:var(--ink-faint)}
.lvdlg{width:min(46rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.55)}
.lvdlg::backdrop{background:rgba(10,4,24,.72)}
.lvbox{display:flex;flex-direction:column;max-height:calc(100dvh - 2rem)}
.lvhead{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem .6rem;border-bottom:1px solid var(--line-soft)}
.lvhead h2{flex:1 1 auto;margin:0;font:800 1.3rem/1.15 var(--display);color:var(--on-air)}
.lvclose{flex:0 0 auto;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:8px;background:var(--panel-lift);
  color:var(--ink);font:700 1.3rem/1 var(--ui);cursor:pointer}
.lvbody{overflow-y:auto;padding:.7rem 1rem 1rem}
.lvbody p{margin:.25rem 0}
.lvchips{display:flex;flex-wrap:wrap;gap:.35rem}
.lvchips span{padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-lift);
  font:700 .7rem/1.3 var(--ui);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.lvchips span:first-child{border-color:var(--on-air-deep);color:var(--on-air)}
.lvgloss{font-style:italic;color:var(--ink-dim)}
.lvrule{font-size:.9rem}
.lvnow{font-size:.86rem;color:var(--go)}
.lvwait{color:var(--ink-faint)}
.lvscroll{margin:.6rem 0;overflow-x:auto}
.lvtable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.84rem;line-height:1.4}
.lvtable th.n{width:2.6rem}.lvtable th.v{width:11rem}.lvtable th.c{width:5.5rem}
.lvtable th{position:sticky;top:0;padding:.35rem .4rem;background:var(--panel-lift);text-align:left;
  font:800 .62rem/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim)}
.lvtable td{padding:.35rem .4rem;border-top:1px solid var(--line-soft);vertical-align:top}
.lvtable td.n{width:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.lvtable td.v,.lvtable td.c{font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.lvtable tr.unl td.n{color:var(--on-air)}
.lvtable td.u b{color:var(--ink)}
.lvtable tr.lvcur td{background:rgba(255,212,0,.12)}
.lvtable tr.lvcur td.n{color:var(--on-air)}
.lvnote{font-size:.78rem;color:var(--ink-faint)}
/* phones: each level becomes a two-line block, number and figures on top, the unlock underneath */
@media (max-width:560px){
  .lvhead h2{font-size:1.1rem}
  .lvtable,.lvtable tbody{display:block}
  .lvtable thead{display:none}
  .lvtable tr{display:grid;grid-template-columns:2rem 1fr auto;column-gap:.5rem;padding:.35rem .2rem;border-top:1px solid var(--line-soft)}
  .lvtable td{padding:0;border:0}
  .lvtable td.c::before{content:"cooldown ";color:var(--ink-faint)}
  .lvtable td.u{grid-column:2/-1}
  .lvtable td.u:empty{display:none}
  .lvtable tr.lvcur{background:rgba(255,212,0,.12)}
  .lvtable tr.lvcur td{background:transparent}
}