/* Delulu — graph-paper notebook arcade.
   Layout: one narrow column per game; home is a sticker-board grid of game tiles. */
:root{
  --paper:#f4f6f8; --grid:#dde4ec; --ink:#16233a; --muted:#5a6a7f; --card:#ffffff;
  --pen:#2350d8; --red:#d93a2e; --ok:#14855a; --sun:#f2b705; --grape:#7b3fd6; --mint:#0f9e8e;
  --on-accent:#ffffff; --night:#1c1426; --tang:#e8641a; --sky:#1f8fd1; --rose:#d6336c;
  --display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0e1623; --grid:#1a2536; --ink:#e9eef6; --muted:#97a6ba; --card:#152032;
  --pen:#7ea3ff; --red:#ff6f62; --ok:#4fd197; --sun:#ffd04d; --grape:#b48bff; --mint:#45d6c3; --on-accent:#0e1623; --tang:#ff9a4d; --sky:#5cc6f2; --rose:#ff7aa8;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0e1623; --grid:#1a2536; --ink:#e9eef6; --muted:#97a6ba; --card:#152032;
  --pen:#7ea3ff; --red:#ff6f62; --ok:#4fd197; --sun:#ffd04d; --grape:#b48bff; --mint:#45d6c3; --on-accent:#0e1623; --tang:#ff9a4d; --sky:#5cc6f2; --rose:#ff7aa8;
  color-scheme:dark }

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  background-color:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none!important}
a{color:var(--pen)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pen);outline-offset:2px}

/* top bar */
.topbar{max-width:480px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-block:14px 0;gap:12px}
.back{font-weight:700;text-decoration:none;color:var(--ink)}
.sitename{font-family:var(--display);font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:15px;color:var(--muted)}

/* column */
.wrap{max-width:480px;margin:0 auto;padding-block:16px 40px;display:flex;flex-direction:column;gap:18px}
.wrap>section{display:flex;flex-direction:column;gap:18px}

.title{font-family:var(--display);font-weight:900;font-size:clamp(44px,12vw,62px);line-height:.88;text-transform:uppercase;margin:0;text-wrap:balance}
.title em{font-style:normal;color:var(--accent,var(--red))}
.lede{margin:0;color:var(--muted);max-width:60ch}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

.panel{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:4px 4px 0 var(--ink)}
.panel.hot{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.panel ul{margin:0;padding-left:20px}
.bignum{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;background:var(--accent,var(--pen));color:var(--btn-on,var(--on-accent));border:2px solid var(--ink);border-radius:6px;padding:15px 16px;font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:.04em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.small{font-size:19px;padding:11px 14px}
.ghost{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:12px;font-weight:700;color:var(--ink);text-decoration:none;text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.note{text-align:center;color:var(--muted);font-size:14px;margin:0;min-height:21px}

.codein{display:flex;gap:8px;align-items:center}
.codein input{flex:1;min-width:0;font:inherit;padding:10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink)}

/* scoreboard used by games */
.board{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-variant-numeric:tabular-nums}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--display);font-size:40px;font-weight:900;line-height:1}
.stat b.low{color:var(--red)}
.vs{font-family:var(--display);font-weight:800;font-size:20px;text-align:center;color:var(--red)}
.bar{height:10px;background:var(--grid);border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--accent,var(--pen))}

/* end screen */
.final{font-family:var(--display);font-weight:900;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;font-size:clamp(80px,26vw,110px);line-height:.85;color:var(--accent,var(--pen));font-variant-numeric:tabular-nums}
.verdict{font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;margin:0;line-height:1}
.sharebox{font-size:14px;background:var(--paper);border:2px dashed var(--muted);border-radius:6px;padding:12px;word-break:break-word;user-select:all}
.toast{font-size:14px;color:var(--ok);font-weight:700;min-height:21px}
.more{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.more a{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:10px 12px;font-weight:700;font-size:14px}
.more a span{display:block;font-family:var(--display);font-size:22px;font-weight:900;text-transform:uppercase;line-height:1;color:var(--tile)}

@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* progress strip on the end screen */
.xp{border:2px solid var(--ink);border-radius:6px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.xprow{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--muted)}
.xprow b{font-family:var(--display);font-size:26px;color:var(--ok);line-height:1}
.xprow.small{font-weight:700;color:var(--ink)}
.xprow.small b.lvup{font-size:18px;color:var(--red);animation:pop .5s}
.xpbar{height:12px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--grid)}
.xpbar i{display:block;height:100%;background:var(--ok);transition:width .9s ease-out}
.near{margin:0;font-weight:800;color:var(--red)}
/* home: player chip */
.mechip{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-weight:700;font-size:14px}
.mechip .lv{font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase}
.mechip .mini{width:120px;height:10px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--grid)}
.mechip .mini i{display:block;height:100%;background:var(--ok)}
.mechip .flame{color:var(--red)}
.tile .new{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.06em;padding:2px 8px;border-radius:4px;border:2px solid var(--ink);transform:rotate(6deg)}

/* ===== The Gauntlet ===== */
.gaunt{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:14px 18px;align-items:center;background:#16101f;color:#fff3e0;border:2px solid var(--ink);border-radius:6px;padding:20px;box-shadow:6px 6px 0 var(--tang)}
.gaunt .label{color:#ffb36b}
.gaunt h2{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(36px,9vw,56px);line-height:.9;text-transform:uppercase;background:linear-gradient(180deg,#ffe66b,#ff7a2f 60%,#e0242b);-webkit-background-clip:text;background-clip:text;color:transparent}
.gaunt p{margin:6px 0 0;color:#e9dccb}
.gaunt .gbest{font-size:14px;color:#ffd23a}
.gaunt .gfire{position:absolute;right:-18px;top:-26px;font-size:120px;opacity:.16;transform:rotate(12deg);pointer-events:none}
.gaunt .gbtns{display:flex;flex-direction:column;gap:10px}
.gaunt .btn{--accent:#ff7a2f;--btn-on:#16101f}
.gaunt .ghost{color:#fff3e0;border-color:#fff3e0;text-align:center}
@media (max-width:560px){.gaunt{grid-template-columns:1fr}}
.runhead{display:flex;flex-direction:column;gap:10px}
.rundots{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.rundots i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-weight:800;font-size:clamp(10px,2.8vw,13px);background:var(--card);color:var(--muted)}
.rundots i.done{background:var(--tile);color:#fff;border-color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.rundots i.now{border-width:3px;border-color:var(--tang);color:var(--ink);animation:runpulse 1s ease-in-out infinite}
@keyframes runpulse{50%{transform:scale(1.15)}}
.runbtn{font-size:clamp(22px,6vw,30px);padding-block:20px;display:flex;justify-content:center;gap:12px;align-items:center}
.runbtn span{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;border-radius:50%;background:rgba(0,0,0,.2)}
.runpts{color:var(--tang)}
.runtotal{display:flex;align-items:baseline;gap:8px;border:2px solid var(--ink);border-radius:6px;padding:10px 14px;background:var(--card);font-weight:700}
.runtotal b{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;margin-left:auto}
.gauntlet-cta{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff3e0;background:#16101f;border:2px solid var(--ink);border-radius:6px;padding:14px 16px;box-shadow:4px 4px 0 var(--tang)}
.gauntlet-cta b{font-family:var(--display);font-size:24px;text-transform:uppercase;color:#ffb36b}
.gauntlet-cta span{font-size:14px;color:#e9dccb}
@media (prefers-reduced-motion:reduce){.rundots i.now{animation:none}}
body.inrun #start > :not(.rk){display:none !important}