/* ==========================================================================
   91233 · THE ARCADE — stylesheet
   ==========================================================================
   The Mr Hart design system as used by the Atlas and the lesson decks: warm
   paper, cool ink, hairline rules, 2px corners, no shadows. Vermilion is the
   only accent; green appears once, for "correct", because right and wrong
   need classroom semantics a single accent cannot carry.

   PROJECTOR MODE. James plays these as lesson starters on a 65" screen, so
   `body.projector` scales the whole thing up rather than shipping a second
   layout. One stylesheet, two sizes.
   ========================================================================== */

:root{
  --paper:oklch(0.987 0.004 85);
  --paper-2:oklch(0.968 0.006 85);
  --paper-3:oklch(0.945 0.007 85);
  --ink:oklch(0.24 0.014 265);
  --ink-2:oklch(0.44 0.012 265);
  --ink-3:oklch(0.525 0.01 265);
  --rule:oklch(0.87 0.007 265);
  --rule-2:oklch(0.8 0.01 265);

  --signal:oklch(0.585 0.185 32);
  --signal-ink:oklch(0.545 0.185 32);
  --signal-soft:oklch(0.945 0.038 40);
  --pulse:oklch(0.585 0.135 250);
  --pulse-ink:oklch(0.53 0.135 250);
  --pulse-soft:oklch(0.945 0.032 250);
  --ok:oklch(0.56 0.12 155);
  --ok-soft:oklch(0.945 0.035 155);
  --on-accent:oklch(0.99 0 0);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:2px;

  /* one knob. Projector mode turns it up and everything follows. */
  --u:1rem;
}
body.projector{ --u:1.5rem; }

*{box-sizing:border-box}
p,h1,h2,h3,figure{margin:0}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:calc(var(--u) * 1);
  line-height:1.5;
}

/* ---- shell -------------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 calc(var(--u) * 1.5)}

.top{
  border-bottom:1px solid var(--rule);background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.top__in{
  max-width:1180px;margin:0 auto;padding:calc(var(--u)*.9) calc(var(--u)*1.5);
  display:flex;align-items:center;gap:calc(var(--u)*.8);
}
.top__brand{
  font-family:var(--sans);font-weight:600;font-size:calc(var(--u)*.95);
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;
}
.top__brand span{
  font-family:var(--mono);font-size:calc(var(--u)*.62);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-left:calc(var(--u)*.5);
}
.top__sp{flex:1 1 auto}
.top a.out,.top button.out{
  font-family:var(--mono);font-size:calc(var(--u)*.62);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:calc(var(--u)*.42) calc(var(--u)*.65);cursor:pointer;text-decoration:none;
  white-space:nowrap;
}
.top a.out:hover,.top button.out:hover{border-color:var(--signal);color:var(--signal-ink)}
.top button.out[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-accent)}

/* ---- hub ---------------------------------------------------------------- */
.hero{padding:calc(var(--u)*2.2) 0 calc(var(--u)*1.2)}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:calc(var(--u)*2.8);
  line-height:1.05;letter-spacing:-.02em;max-width:16ch;
}
.hero p{
  margin-top:calc(var(--u)*.7);color:var(--ink-2);
  font-size:calc(var(--u)*1.02);max-width:52ch;
}

.daily{
  display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*.2) calc(var(--u)*1);
  width:100%;text-align:left;cursor:pointer;font-family:var(--sans);
  background:var(--signal-soft);color:var(--ink);
  border:1px solid var(--signal);border-left:10px solid var(--signal);
  border-radius:var(--radius);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);
  margin-bottom:calc(var(--u)*1.4);
}
.daily:hover{filter:brightness(1.02)}
.daily.is-done{background:var(--paper-2);border-color:var(--rule-2);border-left-color:var(--rule-2)}
.daily__label{
  grid-column:1;font-family:var(--mono);font-size:calc(var(--u)*.62);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink);
}
.daily.is-done .daily__label{color:var(--ink-3)}
.daily__title{grid-column:1;font-family:var(--serif);font-size:calc(var(--u)*1.7);line-height:1.1}
.daily__sub{grid-column:1;color:var(--ink-2);font-size:calc(var(--u)*.92)}
.daily__streak{grid-column:2;grid-row:1/4;align-self:center;font-size:calc(var(--u)*1.5);white-space:nowrap}

.hubgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:calc(var(--u)*.8);padding-bottom:calc(var(--u)*3);
}
.tile{
  display:flex;flex-direction:column;gap:calc(var(--u)*.3);
  text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:calc(var(--u)*1) calc(var(--u)*1.1) calc(var(--u)*.9);
}
.tile:hover{border-color:var(--signal);background:var(--paper)}
.tile__icon{font-size:calc(var(--u)*1.4);line-height:1;color:var(--signal-ink)}
.tile__tag{
  font-family:var(--mono);font-size:calc(var(--u)*.58);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.tile__name{font-family:var(--serif);font-size:calc(var(--u)*1.32);line-height:1.15}
.tile__blurb{color:var(--ink-2);font-size:calc(var(--u)*.88);line-height:1.4;flex:1 1 auto}
.tile__foot{
  font-family:var(--mono);font-size:calc(var(--u)*.58);color:var(--ink-3);
  border-top:1px solid var(--rule);padding-top:calc(var(--u)*.5);margin-top:calc(var(--u)*.3);
}

/* ---- game bar ----------------------------------------------------------- */
.gamebar{
  border-bottom:1px solid var(--rule);background:var(--paper-2);
}
.gamebar__in{
  max-width:1180px;margin:0 auto;padding:calc(var(--u)*.7) calc(var(--u)*1.5);
  display:flex;align-items:baseline;gap:calc(var(--u)*.8);
}
#gtitle{font-family:var(--serif);font-size:calc(var(--u)*1.35);font-weight:500}
#gsub{font-family:var(--mono);font-size:calc(var(--u)*.62);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
#roundcount{font-family:var(--mono);font-size:calc(var(--u)*.68);color:var(--ink-2);margin-left:auto}

#progress{display:flex;gap:4px;padding:0 0 0 calc(var(--u)*.8)}
.pip{width:calc(var(--u)*.55);height:calc(var(--u)*.3);border-radius:1px;background:var(--rule-2);display:block}
.pip--hit{background:var(--ok)}
.pip--miss{background:var(--signal)}

/* ---- stage -------------------------------------------------------------- */
#stage{position:relative;padding:calc(var(--u)*1.6) 0 calc(var(--u)*3);min-height:50vh}
canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

.prompt{font-size:calc(var(--u)*1.15);margin-bottom:calc(var(--u)*1)}
.prompt--sub{font-size:calc(var(--u)*.92);color:var(--ink-2);margin-top:calc(var(--u)*1)}
.chip{
  font-family:var(--mono);font-size:calc(var(--u)*.55);letter-spacing:.12em;
  text-transform:uppercase;background:var(--signal-ink);color:var(--on-accent);
  padding:.25em .6em;border-radius:var(--radius);margin-left:.5em;white-space:nowrap;
}
.argline{
  font-family:var(--serif);font-size:calc(var(--u)*1.15);color:var(--ink-2);
  border-left:4px solid var(--rule-2);padding-left:calc(var(--u)*.8);
  margin-bottom:calc(var(--u)*1);
}
.bigq{
  font-family:var(--serif);font-size:calc(var(--u)*2.1);line-height:1.15;
  margin-bottom:calc(var(--u)*.6);
}

.grid{display:flex;flex-direction:column;gap:calc(var(--u)*.5)}
.grid--2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*.5)}

.card{
  display:flex;align-items:flex-start;gap:calc(var(--u)*.75);
  text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);
  font-size:calc(var(--u)*1.02);line-height:1.35;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:calc(var(--u)*.8) calc(var(--u)*1);width:100%;
}
.card:hover:not(:disabled):not(.is-locked){border-color:var(--pulse);background:var(--paper)}
.card:disabled{cursor:default}
.card__key,.card__n{
  flex:0 0 auto;width:1.7em;height:1.7em;display:grid;place-items:center;
  font-family:var(--mono);font-size:calc(var(--u)*.72);font-weight:600;
  color:var(--ink-2);border:1px solid var(--rule-2);border-radius:var(--radius);
  background:var(--paper);
}
.card__t{flex:1 1 auto}
.card__when{
  flex:0 0 auto;font-family:var(--mono);font-size:calc(var(--u)*.66);
  color:var(--signal-ink);visibility:hidden;
}
.card--chrono .card__n{border-radius:50%;background:var(--rule-2);color:var(--on-accent);border-color:transparent}

.card.is-right,.card.is-answer{border-color:var(--ok);background:var(--ok-soft)}
.card.is-right .card__key{background:var(--ok);border-color:var(--ok);color:var(--on-accent)}
.card.is-wrong{border-color:var(--signal);background:var(--signal-soft)}
.card.is-locked{border-color:var(--ok);background:var(--ok-soft);cursor:default}
.card.is-locked .card__n{background:var(--ok);color:var(--on-accent)}
.card.is-locked .card__when{visibility:visible}

.note{
  margin-top:calc(var(--u)*1);font-size:calc(var(--u)*.98);line-height:1.45;
  color:var(--ink-2);border-left:4px solid var(--signal);padding-left:calc(var(--u)*.8);
  min-height:calc(var(--u)*1.5);
}
.note:empty{border-color:transparent}

/* ---- the marker --------------------------------------------------------- */
.para{
  font-family:var(--serif);font-size:calc(var(--u)*1.16);line-height:1.5;
  background:var(--paper-2);border:1px solid var(--rule);border-left:6px solid var(--rule-2);
  border-radius:var(--radius);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);
  margin-bottom:calc(var(--u)*1.1);
}
.bandrow{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*.5)}
.bandrow--two{grid-template-columns:1fr 1fr}
.band{
  display:flex;flex-direction:column;gap:calc(var(--u)*.2);align-items:flex-start;
  text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:calc(var(--u)*.8) calc(var(--u)*.9);
}
.band:hover:not(:disabled){border-color:var(--pulse);background:var(--paper)}
.band:disabled{cursor:default}
.band__k{font-family:var(--mono);font-size:calc(var(--u)*1.3);font-weight:600;line-height:1}
.band__n{font-size:calc(var(--u)*.95);font-weight:500}
.band__h{font-size:calc(var(--u)*.76);color:var(--ink-3);line-height:1.3}
.band--wide{align-items:center;justify-content:center;font-family:var(--serif);
  font-size:calc(var(--u)*1.6);padding:calc(var(--u)*1.1)}
.band.is-right,.band.is-answer{border-color:var(--ok);background:var(--ok-soft)}
.band.is-wrong{border-color:var(--signal);background:var(--signal-soft)}

/* ---- chain -------------------------------------------------------------- */
.chainrail{
  display:flex;flex-direction:column;gap:calc(var(--u)*.4);
  margin-bottom:calc(var(--u)*.6);
}
.chainend{
  font-family:var(--mono);font-size:calc(var(--u)*.7);letter-spacing:.06em;
  background:var(--paper-3);border:1px dashed var(--rule-2);border-radius:var(--radius);
  padding:calc(var(--u)*.6) calc(var(--u)*.9);color:var(--ink-2);
}
.chainend--to{border-color:var(--signal);color:var(--signal-ink)}
.chainslots{display:flex;flex-direction:column;gap:calc(var(--u)*.3);padding-left:calc(var(--u)*1.2)}
.chainslot{
  font-size:calc(var(--u)*.95);background:var(--ok-soft);border-left:4px solid var(--ok);
  padding:calc(var(--u)*.45) calc(var(--u)*.8);border-radius:var(--radius);
}
.chainslot b{font-family:var(--mono);color:var(--ok);margin-right:.5em}

/* ---- end card ----------------------------------------------------------- */
.endcard{
  max-width:34rem;background:var(--paper-2);border:1px solid var(--rule-2);
  border-left:10px solid var(--signal);border-radius:var(--radius);
  padding:calc(var(--u)*1.6) calc(var(--u)*1.8);
  display:flex;flex-direction:column;gap:calc(var(--u)*.6);align-items:flex-start;
}
.endcard__label{
  font-family:var(--mono);font-size:calc(var(--u)*.62);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink);
}
.endcard__score{font-family:var(--serif);font-size:calc(var(--u)*3.4);line-height:1}
.endcard__score span{color:var(--ink-3);font-size:calc(var(--u)*1.6)}
.endcard__msg{font-size:calc(var(--u)*1.05);color:var(--ink-2)}
.endcard__streak{font-family:var(--mono);font-size:calc(var(--u)*.8);color:var(--ink-2)}
.sharegrid{
  font-family:var(--mono);font-size:calc(var(--u)*.9);line-height:1.5;margin:0;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:calc(var(--u)*.7) calc(var(--u)*.9);white-space:pre-wrap;user-select:all;
}
.btn{
  font-family:var(--mono);font-size:calc(var(--u)*.68);letter-spacing:.1em;
  text-transform:uppercase;background:var(--paper);color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:calc(var(--u)*.6) calc(var(--u)*1);cursor:pointer;
}
.btn:hover{border-color:var(--signal);color:var(--signal-ink)}
.btn--go{background:var(--signal);border-color:var(--signal);color:var(--on-accent)}
.btn--go:hover{color:var(--on-accent);filter:brightness(1.07)}

/* ---- motion ------------------------------------------------------------- */
@keyframes shake{25%{transform:translateX(-.3em)}75%{transform:translateX(.3em)}}
.shake{animation:shake .22s}
@media (prefers-reduced-motion:reduce){
  .shake{animation:none}
  .reveal__inner,.card,.band{transition:none}
}

/* ---- narrow ------------------------------------------------------------- */
@media (max-width:720px){
  .grid--2{grid-template-columns:1fr}
  .bandrow{grid-template-columns:1fr 1fr}
  .hero h1{font-size:calc(var(--u)*2.1)}
}