/* BITCOIN BLOCK RUNNER - original 16-bit industrial theme */
:root{
  --bg:#0b0f16; --panel:#141b26; --panel2:#0e141d; --edge:#2a3644; --edge2:#1a232f;
  --btc:#f7931a; --btcLite:#ffb347; --cyan:#28e0c8; --gold:#ffcf4d; --red:#e0413a; --green:#7fdf6a;
  --ink:#d7e0e8; --dim:#6b7a88;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
/* the HTML `hidden` attribute must always win over our display:flex overlays,
   otherwise hidden full-screen panels (#endscreen/#pause) intercept clicks */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);overflow:hidden;font-size:14px}
button{font-family:var(--mono);background:var(--panel);color:var(--btc);border:1px solid var(--edge);border-top-color:#3a4a5a;padding:7px 12px;cursor:pointer;font-size:13px;letter-spacing:.03em}
button:hover{background:#1b2532}
button.on,button[aria-pressed="true"]{background:var(--btc);color:#111;border-color:var(--btc);font-weight:700}
button:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
h1,h2{text-wrap:balance}
canvas{display:block;image-rendering:pixelated}

/* ── menu ── */
#menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;
  background:radial-gradient(circle at 50% 20%, #1a2233, #0b0f16 70%);padding:20px}
.menu-card{width:min(680px,96vw);background:var(--panel);border:2px solid var(--edge);padding:22px 26px;box-shadow:0 12px 60px #000a}
.menu-card h1{font-size:clamp(26px,5vw,42px);margin:0 0 4px;letter-spacing:.04em;color:var(--ink)}
.menu-card h1 span{color:var(--btc);display:block}
.tag{color:var(--dim);margin:0 0 18px;line-height:1.5}
.opt-group{margin:14px 0}
.opt-group>label{display:block;font-size:11px;letter-spacing:.16em;color:var(--dim);margin-bottom:6px}
.opt-group>label small{letter-spacing:0;text-transform:none}
.btns{display:flex;gap:8px}.btns.wrap{flex-wrap:wrap}
#mode-hint{display:block;color:var(--dim);margin-top:6px;font-size:12px}
#txid-input,#stage{width:100%}
#txid-input{background:#000;border:1px solid var(--edge);color:var(--cyan);font-family:var(--mono);padding:9px;font-size:12px}
.start{width:100%;margin-top:18px;background:var(--btc);color:#111;font-weight:700;font-size:16px;padding:12px;border:none}
.start:hover{background:var(--btcLite)}
#menu-msg{min-height:20px;margin-top:10px;color:var(--gold);font-size:13px}
.foot{color:var(--dim);font-size:11px;line-height:1.6;margin-top:16px;border-top:1px solid var(--edge2);padding-top:12px}
.foot b{color:var(--ink)}

/* ── game ── */
#game-wrap{position:fixed;inset:0}
#stage{position:absolute;inset:0;width:100%;height:100%;background:#0d1524}

#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:8px 14px;
  background:linear-gradient(#0b0f16ee,#0b0f1699);border-bottom:1px solid var(--edge2);pointer-events:none}
.hud-left,.hud-right{display:flex;align-items:center;gap:14px}
.hud-mid{flex:1;min-width:80px}
.hud-right{margin-left:auto;flex-direction:column;align-items:flex-end;gap:3px}
.health{display:flex;gap:4px}
.hp{width:14px;height:14px;background:var(--btc);border:1px solid #111;box-shadow:0 0 6px #f7931a88}
.hp.off{background:#2a3340;box-shadow:none}
.hud-stat{display:flex;flex-direction:column;line-height:1.1}
.hud-stat span{font-size:9px;color:var(--dim);letter-spacing:.1em}
.hud-stat b{font-size:15px;font-variant-numeric:tabular-nums}
.weight-bar{position:relative;height:18px;background:#0e141d;border:1px solid var(--edge);overflow:hidden}
#weight-fill{height:100%;width:0;background:linear-gradient(90deg,var(--btc),var(--btcLite));transition:width .2s}
.weight-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.timer{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.timer.low{color:var(--red)}
.hud-meta{font-size:10px;color:var(--dim);letter-spacing:.05em}
.net.main{color:#111;background:var(--btc);padding:0 5px}
.net.alt{color:#111;background:var(--gold);padding:0 5px}
#minimap{background:#0b0f16;border:1px solid var(--edge)}

#stale{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:#3a0d08;border:1px solid var(--red);color:#ffb0a6;padding:4px 12px;font-size:12px}
#edutip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#0b0f16dd;border:1px solid var(--cyan);color:var(--ink);padding:8px 14px;font-size:12px;max-width:70vw;text-align:center}
#blocktoast{position:absolute;top:70px;right:14px;background:#0b0f16ee;border:1px solid var(--btc);color:var(--ink);padding:10px 14px;font-size:12px;max-width:300px;line-height:1.5}
#blocktoast b{color:var(--btc)} #blocktoast button{margin-top:4px;pointer-events:auto;padding:3px 6px;font-size:11px}
#blocktoast small{color:var(--dim)}

/* inspector */
#inspector{position:absolute;top:70px;right:14px;width:340px;max-width:calc(100vw - 28px);background:var(--panel2);border:2px solid var(--btc);z-index:10;box-shadow:0 8px 40px #000c}
#insp-head{display:flex;justify-content:space-between;align-items:center;background:var(--btc);color:#111;font-weight:700;font-size:12px;padding:4px 8px;letter-spacing:.08em}
#insp-head button{background:none;border:none;color:#111;font-weight:700}
#insp-body{padding:10px 12px;font-size:12px;max-height:70vh;overflow:auto}
.i-type{display:inline-block;background:var(--cyan);color:#111;font-weight:700;padding:1px 7px;font-size:11px;margin-bottom:8px}
.i-type.aggregate{background:var(--btc)} .i-type.package{background:var(--cyan)} .i-type.individual{background:var(--gold)}
.i-txid{color:var(--cyan);font-size:11px;word-break:break-all;margin-bottom:8px}
.i-txid button{padding:0 5px;font-size:10px;margin-left:4px}
.irow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--edge2);padding:3px 0}
.irow b{color:var(--dim);font-weight:400;font-size:11px}
.irow span{text-align:right;font-variant-numeric:tabular-nums}
.i-edu{color:var(--dim);font-size:11px;line-height:1.6;margin:10px 0 0;border-top:1px solid var(--edge2);padding-top:8px}
.i-txids{margin-top:8px;font-size:11px} .i-txids summary{cursor:pointer;color:var(--btc)}
.i-txlist{max-height:120px;overflow:auto;margin-top:6px} .i-txlist code{display:block;font-size:9px;color:var(--dim);word-break:break-all}

/* pause + end */
#pause,#endscreen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#060a10cc;z-index:20;padding:20px;overflow:auto}
.panel{background:var(--panel);border:2px solid var(--edge);padding:22px 28px;text-align:center;max-width:440px}
.panel.wide{max-width:520px}
.panel h2{margin:0 0 14px;letter-spacing:.06em}
.panel button{margin:6px 4px}
.panel p{color:var(--dim);font-size:12px;line-height:1.5}
#end-title.win{color:var(--btc)} #end-title.lose{color:var(--red)}
#end-anim{width:100%;max-width:360px;border:1px solid var(--edge);margin:0 auto 14px;background:#0b0f16}
#end-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;text-align:left;margin:0 0 14px}
#end-stats div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--edge2);padding:3px 0}
#end-stats dt{color:var(--dim);font-size:11px;margin:0} #end-stats dd{margin:0;font-variant-numeric:tabular-nums}
.note{font-size:11px;color:var(--dim);border-top:1px solid var(--edge2);padding-top:10px}

@media (prefers-reduced-motion: reduce){ #weight-fill{transition:none} }
@media (max-width:720px){ #hud{flex-wrap:wrap;gap:8px} .hud-right{margin-left:0} #minimap{width:150px;height:24px} }

/* ── narrow phones (portrait ~390px): compact one-row HUD.
   Keep health + TX collected/total + weight bar + timer; drop the rest. ── */
@media (max-width:520px){
  #hud{flex-wrap:wrap;gap:4px 10px;padding:6px 8px}
  .hud-left{gap:10px}
  .st-left,.st-fees,.st-score,.hud-meta,#minimap{display:none}
  .hud-stat span{font-size:8px}
  .hud-stat b{font-size:14px}
  .hp{width:12px;height:12px}
  .hud-right{flex-direction:row;align-items:center;gap:8px;margin-left:auto}
  .timer{font-size:17px}
  .hud-mid{order:5;flex-basis:100%;min-width:0}
  .weight-bar{height:13px}
  .weight-bar span{font-size:9px}
  #inspector{top:56px;right:8px;left:8px;width:auto}
  #edutip{max-width:92vw;font-size:11px}
  #blocktoast{left:8px;right:8px;max-width:none}
}

/* ── touch controls: hidden by default; shown when body.touch ── */
#touch,#t-pause,#rotate-hint{display:none}
#stage{touch-action:none}
body.touch{touch-action:manipulation}
body.touch #touch{display:flex;justify-content:space-between;align-items:flex-end;position:fixed;inset:auto 0 0 0;
  padding:14px max(14px, env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));pointer-events:none;z-index:15}
body.touch #t-pause{display:block;position:fixed;top:6px;right:8px;z-index:16;width:44px;height:44px;font-size:19px;background:#0b0f16cc;border:1px solid var(--edge);color:var(--btc);border-radius:10px}
body.touch.playing #rotate-hint{position:fixed;top:52px;left:50%;transform:translateX(-50%);background:#0b0f16dd;border:1px solid var(--btc);color:var(--btcLite);padding:6px 12px;font-size:12px;z-index:16;border-radius:6px;animation:hintfade 6s forwards}
@keyframes hintfade{0%,75%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){ body.touch.playing #rotate-hint{animation:none;opacity:.9} }
.tpad,.tact{display:flex;gap:18px;align-items:flex-end;pointer-events:auto}
.tbtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#141b26bb;border:2px solid var(--edge);color:var(--btc);
  width:74px;height:74px;font-size:26px;border-radius:16px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tbtn.small{width:58px;height:58px;font-size:18px}
.tbtn.round{border-radius:50%;width:92px;height:92px;font-size:15px;font-weight:700;letter-spacing:.04em}
.tbtn.jump{color:#0b0f16;background:#f7931add;border-color:var(--btcLite)}
.tbtn.dash{color:var(--cyan);border-color:var(--cyan);position:relative;overflow:hidden}
/* dash recharge: a dark overlay drains downward while cooling (dash is
   unlimited - this makes the auto-recharge visible instead of feeling "used up") */
.tbtn.dash::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--cd,0%);background:rgba(6,10,14,0.72);pointer-events:none;transition:height .1s linear}
.tbtn.dash.cooling{color:#4a6a6a;border-color:#2a4a4a}
.tbtn.press{filter:brightness(1.5);transform:scale(.94)}
/* short landscape phones: slightly smaller pads so they don't cover the action */
@media (orientation:landscape) and (max-height:450px){
  .tbtn{width:60px;height:60px;font-size:22px;border-radius:12px}
  .tbtn.small{width:48px;height:48px;font-size:15px}
  .tbtn.round{width:76px;height:76px;font-size:13px}
  body.touch #touch{padding-bottom:10px}
}
body.touch #edutip{bottom:130px} /* clear the touch buttons */
/* portrait phones: shrink pads so BOTH action buttons (esp. JUMP) fit on-screen.
   at 390px: tpad 54+10+54+10+44=172 + tact 72+10+72=154 + pad 20 = 346 < 390. */
@media (max-width:480px){
  .tpad,.tact{gap:10px}
  body.touch #touch{padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
  .tbtn{width:54px;height:54px;font-size:22px;border-radius:12px}
  .tbtn.small{width:44px;height:44px;font-size:15px}
  .tbtn.round{width:72px;height:72px;font-size:13px}
}
@media (max-width:360px){
  .tpad,.tact{gap:8px}
  .tbtn{width:48px;height:48px;font-size:19px}
  .tbtn.small{width:40px;height:40px;font-size:13px}
  .tbtn.round{width:64px;height:64px;font-size:12px}
}
@media (orientation:portrait){ body.touch.playing #rotate-hint{display:block} }
@media (orientation:landscape){ body.touch #rotate-hint{display:none!important} }

/* data-artifact inspector panel (OP_RETURN / inscription txs) */
.i-artifact{margin-top:10px;border:1px solid #6a3fb0;background:#160f24;border-radius:8px;padding:8px 10px}
.i-atitle{color:#c99cff;font-weight:700;letter-spacing:0.06em;font-size:12px;margin-bottom:6px}
.i-memo{margin:6px 0;padding:6px 8px;background:#0b0f16;border-left:3px solid #b06cf0;color:#d9c2ff;font-size:11px;line-height:1.5;word-break:break-word;white-space:pre-wrap;max-height:120px;overflow:auto}
.i-safe{margin-top:8px;color:#8a7ba8;font-size:10px;line-height:1.5}

/* ── instant-play menu: one obvious action, options collapsed ──
   (median session was ~60s and most players never reached a payoff, so the
   menu must not be a wall of text between the click and the game) */
.start-sub{color:var(--dim);font-size:11.5px;text-align:center;margin-top:6px;line-height:1.4}
.daily{width:100%;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 12px;background:#161f2b;border:1px solid #3a4a5a;color:var(--gold)}
.daily:hover{background:#1c2836;border-color:var(--gold)}
.daily .daily-main{font-weight:700;letter-spacing:.06em;font-size:14px}
.daily .daily-meta{color:var(--dim);font-size:11px;letter-spacing:.02em}
.daily.done{border-color:#2c5423;background:#12210f}
.daily.done .daily-main{color:var(--green)}
.opts-toggle{width:100%;margin-top:16px;background:transparent;border:1px dashed var(--edge);color:var(--dim);font-size:12px}
.opts-toggle:hover{color:var(--btc);border-color:var(--btc)}
#opts-panel{margin-top:6px;border-top:1px solid var(--edge2);padding-top:6px}

/* ── daily leaderboard (end screen) ── */
#lb-box{margin:0 0 14px;border:1px solid #3a4a5a;background:#0e141d;padding:10px 12px;text-align:left}
.lb-title{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.1em;margin-bottom:8px;text-align:center}
.lb-label{display:block;color:var(--dim);font-size:11px;margin-bottom:5px}
.lb-row{display:flex;gap:6px}
#lb-name{flex:1;min-width:0;background:#000;border:1px solid var(--edge);color:var(--cyan);font-family:var(--mono);padding:7px;font-size:12px}
#lb-send{flex:none;font-size:12px}
.lb-msg{min-height:16px;margin-top:5px;color:var(--gold);font-size:11px}
.lb-list{margin-top:8px;font-size:12px}
.lb-head{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;letter-spacing:.06em;border-bottom:1px solid var(--edge2);padding-bottom:3px;margin-bottom:3px}
.lb-e{display:flex;align-items:center;gap:8px;padding:2px 0;border-bottom:1px dotted var(--edge2)}
.lb-e.me{background:#1a2331;color:var(--gold)}
.lb-r{width:32px;color:var(--dim);font-size:11px}
.lb-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-s{font-variant-numeric:tabular-nums;font-weight:700}
.lb-t{width:46px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px}
.lb-empty{color:var(--dim);font-size:11px;text-align:center;padding:6px 0}
.lb-foot{margin-top:8px;color:var(--dim);font-size:10px;line-height:1.5;border-top:1px solid var(--edge2);padding-top:6px}