:root{
  --ink:#15110d;
  --ink2:#241d17;
  --paper:#f7edd6;
  --paper2:#e2d3b2;
  --sun:#efb42a;
  --rust:#c94528;
  --pine:#1e4034;
  --teal:#7fb2a8;
  --display:'Alfa Slab One',Impact,'Arial Black',sans-serif;
  --stencil:'Bungee',Impact,'Arial Black',sans-serif;
  --ui:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--ink);color:var(--paper);font-family:var(--ui);
  overflow:hidden;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#stage{position:fixed;inset:0;overflow:hidden;background:#8fb8ae}
#stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#printfx{position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;opacity:.07;
  background-image:radial-gradient(circle at 1px 1px, #15110d 1px, transparent 0);
  background-size:3px 3px}
#vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%, rgba(21,17,13,0) 38%, rgba(21,17,13,.5) 100%)}
#boot{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:#15110d;color:#efb42a;font-family:var(--display);font-size:clamp(20px,4vw,40px);
  letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:20px}

/* ───────── shared bits ───────── */
.screen{
  position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  padding:max(18px,3vh) max(18px,3vw);
  overflow:auto;
}
.screen-title{
  font-family:var(--display);font-size:clamp(28px,4.4vw,54px);margin:0 0 18px;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--paper);text-shadow:4px 4px 0 var(--rust),8px 8px 0 rgba(21,17,13,.55);
}
.v2tag{position:absolute;right:max(14px,2vw);top:max(14px,2vh);font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--sun);border:2px solid var(--sun);padding:3px 7px;transform:rotate(3deg);z-index:11}
.foot{
  margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(247,237,214,.78);
}

/* ───────── main menu ───────── */
.menu{background:linear-gradient(90deg,rgba(21,17,13,.92) 0%,rgba(21,17,13,.75) 34%,rgba(21,17,13,0) 62%)}
.brand{margin-bottom:auto}
.brand h1{
  font-family:var(--display);margin:0;line-height:.82;
  font-size:clamp(44px,8.2vw,104px);letter-spacing:-.01em;
  color:var(--sun);
  text-shadow:
    3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),
    5px 6px 0 var(--ink),9px 12px 0 rgba(201,69,40,.85);
  transform:rotate(-1.4deg);
}
.brand h1 span{display:inline-block;margin-left:.12em;color:var(--paper)}
.brand .tag{
  margin:.55em 0 0;font-family:var(--mono);font-size:clamp(9px,1.15vw,12px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--bone,#f4e6c0);
  background:var(--ink);display:inline-block;padding:.42em .8em .3em;
  border:2px solid var(--paper2);transform:rotate(-.6deg);
}
.cards{display:flex;flex-direction:column;gap:10px;width:min(430px,86vw);margin:22px 0 0}
.row{display:flex;gap:10px}
.row .card{flex:1}
.card{
  position:relative;text-align:left;font:inherit;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-radius:2px;
  box-shadow:6px 6px 0 var(--ink),inset 0 0 0 2px rgba(21,17,13,.12);
  padding:11px 14px 13px;transition:transform .09s,box-shadow .09s,background .09s;
}
.card:hover,.card:focus-visible{
  transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--rust),inset 0 0 0 2px rgba(21,17,13,.18);
  background:#fdf6e6;outline:none;
}
.card:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.card h2{font-family:var(--stencil);font-size:22px;margin:0 0 2px;letter-spacing:.02em}
.card p{margin:0;font-size:14px;line-height:1.25;color:#4a4136;letter-spacing:.01em}
.card.dim{opacity:.5;cursor:not-allowed}
.card.small h2{font-size:15px}
.mini-prog{height:5px;margin-top:8px;background:rgba(21,17,13,.14);border:1.5px solid var(--ink)}
.mini-prog i{display:block;height:100%;width:0;background:var(--rust)}
.course-dots{display:flex;gap:4px;margin-top:7px}
.course-dots b{
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;padding:2px 5px;
  border:1.5px solid var(--ink);color:var(--ink);background:rgba(21,17,13,.06);
}
.course-dots b.done{background:var(--pine);color:var(--paper);border-color:var(--ink)}
.course-dots b.now{background:var(--sun)}
.badge{
  position:absolute;right:8px;top:7px;font-family:var(--mono);font-size:9px;
  background:var(--rust);color:#fff;padding:2px 5px;transform:rotate(6deg);
  border:1.5px solid var(--ink);letter-spacing:.08em;
}

/* ───────── course select ───────── */
#screen-course{background:rgba(21,17,13,.94)}
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;max-width:960px}
.ccard{
  text-align:left;font:inherit;cursor:pointer;padding:18px 16px 16px;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);position:relative;transition:transform .09s,box-shadow .09s;
}
.ccard:hover,.ccard:focus-visible{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--rust);outline:none}
.ccard h3{font-family:var(--display);font-size:26px;margin:0 0 6px;line-height:.95}
.ccard p{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5a5145}
.ccard .best{font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--sun);display:inline-block;padding:3px 7px}
.ccard .best.none{background:rgba(21,17,13,.1);color:#6b6153}
.ccard .num{
  position:absolute;right:12px;top:10px;font-family:var(--display);font-size:34px;
  color:rgba(21,17,13,.13);
}

/* ───────── how to ───────── */
#screen-how{background:rgba(21,17,13,.95)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:980px}
.how-card{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:12px 14px}
.how-card h3{font-family:var(--stencil);font-size:16px;margin:0 0 5px;color:var(--rust)}
.how-card p{margin:0;font-size:14px;line-height:1.3;color:#443c31}

/* ───────── pause / result ───────── */
#screen-pause,#screen-result{background:rgba(21,17,13,.9);align-items:center;justify-content:center}
.pause-btns,.result-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.btn{
  font-family:var(--stencil);font-size:16px;cursor:pointer;padding:12px 20px;
  background:var(--sun);color:var(--ink);border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rust)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--paper);font-size:13px;padding:10px 16px}
.result-card{
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--rust),14px 14px 0 var(--ink);
  padding:22px 26px;max-width:min(560px,92vw);transform:rotate(-.5deg);
}
.result-card h2{font-family:var(--display);font-size:clamp(24px,4vw,40px);margin:0 0 2px}
.res-sub{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#6b6153}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;margin:0}
.res-stats div{border-top:2px solid rgba(21,17,13,.2);padding-top:5px}
.res-stats dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#6b6153}
.res-stats dd{margin:2px 0 0;font-family:var(--display);font-size:20px}
.res-stats dd.new{color:var(--rust)}

/* ───────── HUD ───────── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;font-family:var(--ui)}
.hud-speed,.hud-clock,.hud-marrow,.hud-score,.hud-prog,.hud-draft{
  position:absolute;background:var(--ink);color:var(--paper);
  border:3px solid var(--ink);outline:2px solid var(--paper);
  box-shadow:4px 4px 0 rgba(21,17,13,.45);padding:5px 10px;
}
.hud-speed{left:max(12px,2vw);bottom:max(12px,2vh);display:flex;align-items:baseline;gap:6px}
.hud-speed b{font-family:var(--display);font-size:clamp(26px,3.6vw,42px);line-height:.9;color:var(--sun);font-variant-numeric:tabular-nums}
.hud-speed i{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--paper2);font-style:normal}
.hud-clock{right:max(12px,2vw);bottom:max(12px,2vh);text-align:right}
.hud-clock b{display:block;font-family:var(--display);font-size:clamp(18px,2.4vw,28px);line-height:1;font-variant-numeric:tabular-nums}
.hud-clock i{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--paper2);font-style:normal}
.hud-marrow{right:max(12px,2vw);top:max(12px,2vh);display:flex;align-items:center;gap:5px}
.hud-marrow .ic{font-size:13px;filter:grayscale(1) contrast(1.6)}
.hud-marrow b{font-family:var(--display);font-size:18px;color:var(--sun)}
.hud-score{right:max(12px,2vw);top:calc(max(12px,2vh) + 44px);text-align:right}
.hud-score i{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--paper2);font-style:normal}
.hud-score b{font-family:var(--display);font-size:16px;font-variant-numeric:tabular-nums}
.hud-prog{left:max(12px,2vw);top:max(12px,2vh);width:min(230px,42vw);padding:6px 9px 7px}
.hud-prog .bar{height:8px;background:rgba(247,237,214,.16);border:2px solid var(--paper2);position:relative;overflow:hidden}
.hud-prog .bar i{display:block;height:100%;width:0;background:var(--rust);transition:width .12s linear}
.hud-prog span{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--paper2)}
.hud-draft{left:50%;transform:translateX(-50%);bottom:max(12px,2vh);display:flex;align-items:center;gap:7px;opacity:0;transition:opacity .18s}
.hud-draft.on{opacity:1}
.hud-draft i{font-family:var(--mono);font-size:9px;letter-spacing:.16em;font-style:normal;color:var(--teal)}
.hud-draft .dbar{width:90px;height:7px;background:rgba(247,237,214,.16);border:2px solid var(--teal)}
.hud-draft .dbar b{display:block;height:100%;width:0;background:var(--teal)}
.combo{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%) rotate(-3deg) scale(.6);
  font-family:var(--display);font-size:clamp(26px,5vw,58px);color:var(--sun);
  text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),6px 7px 0 var(--rust);
  opacity:0;transition:opacity .16s,transform .16s;white-space:nowrap;
}
.combo.show{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}
.hint{
  position:absolute;left:50%;bottom:calc(max(12px,2vh) + 58px);transform:translateX(-50%);
  background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 rgba(21,17,13,.5);padding:5px 11px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s;
}
.hint.show{opacity:1}
.toast{
  position:fixed;left:50%;top:16%;transform:translate(-50%,-8px) rotate(-2deg);z-index:20;
  font-family:var(--display);font-size:clamp(20px,3.4vw,34px);letter-spacing:.02em;
  color:var(--paper);background:var(--rust);border:3px solid var(--ink);
  box-shadow:6px 6px 0 rgba(21,17,13,.55);padding:6px 18px 8px;text-transform:uppercase;
}
@media (max-width:640px){
  .menu{background:linear-gradient(180deg,rgba(21,17,13,.9) 0%,rgba(21,17,13,.82) 60%,rgba(21,17,13,.55) 100%)}
  .res-stats{grid-template-columns:repeat(2,1fr)}
  .brand h1{font-size:clamp(38px,12vw,60px)}
  .hud-prog{width:44vw}
}