:root{
  --ink:#15110d; --ink2:#241d17; --paper:#f7edd6; --paper2:#e2d3b2;
  --sun:#efb42a; --rust:#c94528; --pine:#1e4034; --teal:#7fb2a8;
  --disp:'Alfa Slab One', Impact, 'Arial Black', sans-serif;
  --ui:'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--paper);
  font-family:var(--ui);-webkit-font-smoothing:antialiased}
canvas#stage-canvas{position:fixed;inset:0;width:100%;height:100%;display:block}

/* trama de impresión: puntos + viñeta */
#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:4;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(21,17,13,.55) 100%)}

/* ---------------------------------------------------------------- boot ---- */
#boot{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;background:var(--ink);letter-spacing:.08em}
#boot b{font-family:var(--disp);font-size:clamp(28px,7vw,64px);color:var(--sun);
  text-shadow:4px 4px 0 var(--rust)}
#boot span{font-size:14px;text-transform:uppercase;opacity:.75}

/* ---------------------------------------------------------------- HUD ----- */
#hud{position:fixed;inset:0;z-index:6;pointer-events:none;font-family:var(--ui)}
#hud .hud-lbl{font-size:11px;letter-spacing:.18em;opacity:.85}
.hud-tl{position:absolute;top:max(12px,2vh);left:max(14px,2vw);width:min(30vw,320px);
  background:rgba(21,17,13,.5);padding:8px 11px;border:1.5px solid rgba(247,237,214,.2)}
.hud-bar{height:9px;margin:5px 0 4px;background:rgba(247,237,214,.22);
  border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(21,17,13,.6)}
.hud-bar i{display:block;height:100%;width:0;background:var(--sun)}
.hud-val{font-size:12.5px;letter-spacing:.06em;opacity:.9}

.hud-tr{position:absolute;top:max(12px,2vh);right:max(14px,2vw);text-align:right;
  display:flex;align-items:flex-start;gap:16px;background:rgba(21,17,13,.5);padding:8px 12px;
  border:1.5px solid rgba(247,237,214,.2)}
.hud-score span{font-family:var(--disp);font-size:clamp(20px,3.6vw,34px);color:var(--paper);
  text-shadow:2px 2px 0 var(--ink)}
.hud-score em,.hud-pos em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.16em;opacity:.8;margin-top:2px}
.hud-combo{font-family:var(--disp);font-size:clamp(16px,2.6vw,26px);color:var(--sun);
  transform:rotate(-6deg);opacity:0;transition:opacity .15s}
.hud-combo.on{opacity:1}
.hud-pos span{font-family:var(--disp);font-size:clamp(18px,3vw,30px);color:var(--teal)}

.hud-bl{position:absolute;left:max(14px,2vw);bottom:max(12px,2vh);
  background:rgba(21,17,13,.5);padding:6px 12px;border:1.5px solid rgba(247,237,214,.2)}
.hud-spd{display:flex;align-items:baseline;gap:6px}
.hud-spd span{font-family:var(--disp);font-size:clamp(38px,7vw,72px);line-height:.85;
  color:var(--paper);text-shadow:4px 4px 0 var(--ink)}
.hud-spd em{font-style:normal;font-size:12px;letter-spacing:.16em;opacity:.7}
.hud-pipsrow{display:flex;align-items:center;gap:7px;margin-top:9px}
.hud-piplbl{font-size:10px;letter-spacing:.16em;opacity:.85}
.hud-pips{display:flex;gap:5px}
.hud-pips i{width:17px;height:8px;background:#efe6cf;border:1.5px solid var(--ink);box-shadow:1px 1px 0 rgba(21,17,13,.5)}
.hud-pips i.out{background:transparent;opacity:.28}

.hud-br{position:absolute;right:max(14px,2vw);bottom:max(12px,2vh);text-align:right;
  background:rgba(21,17,13,.5);padding:6px 12px;border:1.5px solid rgba(247,237,214,.2)}
.hud-time span{font-family:var(--disp);font-size:clamp(16px,2.6vw,26px)}
.hud-course{font-size:11.5px;letter-spacing:.18em;opacity:.85;margin-top:2px}

.hud-draft{position:absolute;left:50%;bottom:max(16px,3vh);transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .18s}
.hud-draft.on{opacity:1}
.hud-draft b{font-size:11px;letter-spacing:.18em;color:var(--teal)}
.hud-draft i{display:block;width:120px;height:6px;background:rgba(247,237,214,.2);
  border:1.5px solid var(--ink)}
.hud-draft s{display:block;height:100%;width:0;background:var(--teal);text-decoration:none}

.hint{position:absolute;left:50%;bottom:max(46px,7vh);transform:translateX(-50%);
  font-size:11px;letter-spacing:.12em;padding:5px 10px;background:rgba(21,17,13,.62);
  border:1.5px solid rgba(247,237,214,.25);opacity:0;transition:opacity .25s;white-space:nowrap}
.hint.on{opacity:1}

.callout{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%) rotate(-3deg);
  font-family:var(--disp);font-size:clamp(18px,3.4vw,34px);color:var(--sun);
  text-shadow:3px 3px 0 var(--ink);opacity:0;transition:opacity .12s,transform .12s;
  white-space:nowrap;pointer-events:none}
.callout.on{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1.06)}
.callout.bad{color:var(--rust)}
.callout.good{color:var(--teal)}

/* -------------------------------------------------------------- screens --- */
.screen{position:fixed;inset:0;z-index:10;display:none;padding:max(20px,4vh) max(18px,4vw);
  background:linear-gradient(100deg, rgba(21,17,13,.94) 0%, rgba(21,17,13,.82) 42%, rgba(21,17,13,0) 66%)}
.screen.on{display:block}
.side{max-width:min(46vw,560px);display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center}
h1{font-family:var(--disp);font-size:clamp(34px,6.4vw,74px);line-height:.82;letter-spacing:-.02em;
  color:var(--sun);text-shadow:5px 5px 0 var(--rust),9px 9px 0 rgba(21,17,13,.55)}
h1 span{display:block;color:var(--paper);text-shadow:5px 5px 0 var(--ink)}
.tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;
  max-width:34ch;margin-bottom:6px;line-height:1.5}

.card{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  padding:10px 14px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);font-family:var(--ui);transition:transform .08s,box-shadow .08s}
.card:hover,.card:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);outline:none}
.card:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.card .k{font-family:var(--disp);font-size:clamp(15px,2vw,22px);letter-spacing:.01em}
.card .s{font-size:11.5px;letter-spacing:.06em;opacity:.72;text-transform:uppercase}
.card.big{background:var(--sun)}
.card.big .k{font-size:clamp(20px,2.8vw,32px)}
.card.dead{opacity:.45;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink)}
.card.dead:after{content:'PRONTO';position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(-8deg);
  font-family:var(--disp);font-size:10px;color:var(--paper);background:var(--rust);padding:2px 6px;border:1.5px solid var(--ink)}
.pbar{display:block;height:7px;margin-top:7px;background:rgba(21,17,13,.18);border:1.5px solid var(--ink)}
.pbar i{display:block;height:100%;width:0;background:var(--pine)}
.pcap{font-size:9.5px;letter-spacing:.18em;opacity:.6;margin-top:6px}
.dots{display:flex;gap:5px;margin-top:4px}
.dots i{width:100%;height:5px;background:rgba(21,17,13,.2);border:1px solid var(--ink)}
.dots i.done{background:var(--rust)}
.row{display:flex;gap:10px}
.row .card{flex:1}
.foot{font-size:10px;letter-spacing:.14em;opacity:.55;margin-top:4px}

.panel{margin:0 auto;max-width:min(76vw,780px);background:rgba(21,17,13,.92);
  border:3px solid var(--paper);box-shadow:9px 9px 0 rgba(0,0,0,.5);padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;max-height:88vh;overflow:auto}
.panel.wide{max-width:min(84vw,900px)}
.panel h2{font-family:var(--disp);font-size:clamp(20px,3vw,30px);color:var(--sun)}
.clist{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.clist .card .s{opacity:.8}
.how{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.45}
.how b{color:var(--sun)}
.kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;color:var(--sun)}
.res-course{font-size:12px;letter-spacing:.1em;opacity:.7;text-transform:uppercase}
.stats{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 2px}
.stats div{min-width:86px}
.stats b{display:block;font-family:var(--disp);font-size:clamp(18px,2.6vw,26px);color:var(--paper)}
.stats em{font-style:normal;font-size:10.5px;letter-spacing:.16em;opacity:.78}
.goals{list-style:none;display:flex;flex-direction:column;gap:5px;margin:2px 0 6px}
.goals li{display:flex;gap:8px;align-items:center;font-size:13px;letter-spacing:.04em;opacity:1}
.goals li i{width:16px;height:16px;border:2px solid var(--paper);display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:11px;flex:0 0 auto}
.goals li.ok{color:#b6e2a8}
.goals li.ok i{background:var(--pine);border-color:var(--pine)}

.toast{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:30;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);opacity:0;transition:opacity .2s}
.toast.on{opacity:1}

@media (max-width:760px){
  .side{max-width:88vw}
  .hud-tl{width:52vw}
  .hud-draft i{width:80px}
}