:root{
  --ground:#0b0e14;--panel:#12161f;--panel2:#171c28;--line:#232a3a;
  --orange:#f7931a;--ember:#ff5a1f;--gold:#ffd24a;
  --ink:#ece7da;--muted:#8f97a8;--green:#6fd18a;--ice:#7fd0ff;--red:#ff5a5a;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;}
button{font-family:var(--mono);cursor:pointer;}
a{color:var(--orange);}

/* dvh where supported (mobile URL bar), vh fallback; touch-action:none kills
   pinch-zoom/scroll during play — overlays re-enable pan-y for themselves */
#stage{position:relative;width:100vw;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;touch-action:none;}
canvas#game{width:min(100vw,177.78vh);width:min(100vw,177.78dvh);height:min(100vh,56.25vw);height:min(100dvh,56.25vw);background:#07060c;display:block;}

/* desktop-only notice — visible only on touch-primary devices */
#touchnote{display:none;margin-top:10px;font-size:12px;color:var(--ember);letter-spacing:.12em;}
@media (pointer: coarse){ #touchnote{display:block;} }
/* what-is-this landing strip (task 18) */
#whatis{list-style:none;margin:10px auto 2px;padding:0;max-width:560px;text-align:left;}
#whatis li{font-size:12px;color:var(--muted);line-height:1.55;padding:3px 0 3px 18px;position:relative;}
#whatis li::before{content:'▸';position:absolute;left:2px;color:var(--orange);}
#whatis b{color:var(--gold);font-weight:700;}
#verstamp{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;}

.hidden{display:none !important;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px 18px;
  padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));}
#xpbar{height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
#xpfill{height:100%;width:0%;background:var(--orange);transition:width .15s linear;}
#hud-row{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);}
.hud-label{font-size:10px;letter-spacing:.18em;color:var(--muted);}
.hud-big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
.hud-gold{color:var(--gold);font-size:11px;}
.hud-dim{color:var(--muted);font-size:11px;}
.hud-green{color:var(--green);font-size:10px;letter-spacing:.2em;text-align:center;}
.hud-clock{font-size:30px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #000;}
.hud-right{text-align:right;}
.hud-mid{text-align:center;}
#eventbanner{margin-top:6px;font-size:13px;font-weight:700;color:var(--ember);letter-spacing:.2em;text-shadow:0 0 12px rgba(255,90,31,.7);min-height:18px;}
.chip{font-size:9px;background:var(--panel2);border:1px solid var(--orange);color:var(--gold);border-radius:3px;padding:1px 5px;letter-spacing:.1em;vertical-align:2px;}

#hud-bottom{display:flex;justify-content:space-between;align-items:flex-end;}
#weaponslots{display:flex;gap:6px;}
.wslot{width:44px;height:44px;border-radius:6px;background:rgba(23,28,40,.85);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px;position:relative;}
.wslot .lv{position:absolute;bottom:1px;right:4px;font-family:var(--mono);font-size:9px;color:var(--gold);}
.wslot.passive{border-style:dashed;}
/* the dash is the only weapon with a key behind it — lit means pressable */
.wslot.dash{border-color:var(--gold);box-shadow:0 0 10px rgba(255,210,74,.35);}
.wslot.dash .hot{position:absolute;top:1px;left:4px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--gold);}
.wslot.dash.cooling{border-color:var(--line);box-shadow:none;opacity:.45;}
.wslot.dash.cooling .hot{color:var(--dim,#8f97a8);}
#summons{display:flex;gap:8px;pointer-events:auto;}
.summon{background:rgba(23,28,40,.9);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:18px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.summon span{font-size:10px;color:var(--gold);}
.summon:not(:disabled):hover{border-color:var(--orange);}
.summon:disabled{opacity:.35;cursor:default;}

/* ---------- Overlays ---------- */
/* margin:auto on the panel (not align/justify center) so tall content scrolls on
   short screens instead of clipping its top edge */
.overlay{position:absolute;inset:0;background:rgba(5,5,10,.82);display:flex;z-index:20;overflow:auto;padding:20px;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:34px 40px;max-width:640px;width:100%;text-align:center;margin:auto;}
.panel.wide{max-width:720px;}
.title-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ember);}
h1.game-title{font-size:clamp(40px,8vw,72px);font-weight:900;letter-spacing:.06em;margin:8px 0 4px;
  background:linear-gradient(180deg,#ff9a62,#ff5a1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 0 rgba(0,0,0,.55);}
.tagline{color:var(--muted);font-size:15px;line-height:1.6;margin:6px 0 24px;}
.tagline b{color:var(--ink);}
h2{font-size:24px;font-weight:800;margin:0 0 16px;letter-spacing:.02em;}

.menu-btns{display:flex;flex-direction:column;gap:10px;margin:0 auto 16px;max-width:420px;}
.big-btn{background:var(--orange);color:#0b0e14;border:none;border-radius:8px;padding:14px 22px;font-size:16px;font-weight:700;letter-spacing:.08em;}
.big-btn:hover{background:var(--gold);}
.big-btn.alt{background:var(--panel);color:var(--ink);border:1px solid var(--line);}
.big-btn.alt:hover{border-color:var(--orange);}
.big-btn:disabled{opacity:.4;cursor:default;}
.btn-sub{display:block;font-size:10px;font-weight:400;letter-spacing:.06em;opacity:.75;margin-top:3px;}
.menu-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.small-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:9px 16px;font-size:12px;letter-spacing:.08em;}
.small-btn:hover{border-color:var(--orange);}
.tiny-btn{background:var(--panel);border:1px solid var(--line);color:var(--gold);border-radius:4px;padding:4px 10px;font-size:10px;letter-spacing:.06em;}
.tiny-btn:hover{border-color:var(--orange);}
.menu-count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);margin:-8px 0 4px;font-variant-numeric:tabular-nums;}
.seedref{font-family:var(--mono);font-size:10px;color:#5a6376;margin-bottom:12px;}
.seedref a{color:var(--orange);text-decoration:none;}
.seedref a:hover{text-decoration:underline;}
.menu-stats{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.8;margin-bottom:6px;}
.menu-stats b{color:var(--gold);}
.fineprint{font-size:10.5px;color:#5a6376;line-height:1.6;max-width:54ch;margin:10px auto 0;}

.help-list{text-align:left;margin:0 0 22px;padding-left:20px;color:#c9cdd8;font-size:14px;line-height:1.6;}
.help-list li{margin-bottom:10px;}
.help-list b{color:var(--ink);}

/* level up */
.lvl-wrap{text-align:center;width:100%;max-width:860px;margin:auto;}
.lvl-title{font-size:36px;font-weight:900;color:var(--gold);letter-spacing:.2em;margin:0;text-shadow:0 0 24px rgba(255,210,74,.4);}
.lvl-sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.24em;margin:6px 0 22px;}
#cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.card{background:linear-gradient(180deg,#1c2230,#141924);border:2px solid var(--line);border-radius:12px;width:230px;padding:22px 18px;cursor:pointer;transition:transform .08s,border-color .08s;}
.card:hover{transform:translateY(-4px);border-color:var(--orange);}
.card .ic{font-size:40px;margin-bottom:10px;}
.card .nm{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.08em;margin-bottom:8px;}
.card .ds{font-size:12.5px;color:#c9cdd8;line-height:1.5;min-height:38px;}
.card .kind{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.2em;margin-top:12px;}
.card.new .kind{color:var(--orange);}

/* death / sunrise */
.death-title{color:var(--ember);font-size:30px;letter-spacing:.08em;text-shadow:0 0 20px rgba(255,90,31,.5);}
.death-stats{font-family:var(--mono);font-size:13px;color:var(--muted);line-height:2;margin-bottom:18px;}
.death-stats b{color:var(--ink);}
.insert-box{border:2px solid var(--orange);border-radius:10px;padding:18px;margin:0 auto 12px;max-width:420px;background:rgba(23,28,40,.6);}
.insert-head{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--gold);letter-spacing:.3em;margin-bottom:8px;}
.insert-line{font-family:var(--mono);font-size:13px;margin-bottom:4px;}
.insert-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:12px;}
.ashes-line{font-family:var(--mono);font-size:11px;color:#5a6376;letter-spacing:.3em;margin:10px 0;}
.share-row{margin-top:18px;margin-bottom:0;}
.sunrise-panel{border-color:#4a3403;background:linear-gradient(180deg,#241a20 0%,#12161f 60%);
  animation:sunrise-rise .6s cubic-bezier(.2,.8,.2,1);} /* the stats card slides into the dawn (task 15) */
@keyframes sunrise-rise{from{transform:translateY(42px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media (prefers-reduced-motion: reduce){.sunrise-panel{animation:none;}}
.sunrise-title{color:var(--gold);font-size:26px;letter-spacing:.1em;text-shadow:0 0 24px rgba(255,210,74,.35);}

/* sacrifice */
.sac-copy{font-size:13.5px;color:#c9cdd8;text-align:left;line-height:1.6;}
.tagbox{font-family:var(--mono);background:#0e1118;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.tagbox code{color:var(--gold);font-size:13px;word-break:break-all;}
.fieldlabel{display:block;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);margin:12px 0 4px;}
#sacrifice input{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:13px;padding:10px 12px;outline:none;}
#sacrifice input:focus{border-color:var(--orange);}
#btn-verify{margin-top:14px;width:100%;}
.verify-msg{font-family:var(--mono);font-size:12px;min-height:20px;margin-top:10px;line-height:1.5;}
.verify-msg.ok{color:var(--green);}
.verify-msg.err{color:var(--red);}
.sac-footer{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;}
.sac-footer b{color:var(--gold);}
.close-sac{margin-top:16px;}

/* ---------- proof-of-flame rank flair (task 07) ---------- */
.rank-pleb{color:var(--muted);}
.rank-ember{color:#ff9a62;}
.rank-blaze{color:var(--ember);}
.rank-inferno{color:var(--gold);}
.rank-eternal{color:#ff2020;text-shadow:0 0 10px rgba(255,32,32,.55);}
.skins-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:2px 0 12px;}
.skin-tier{display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--mono);
  border:1px solid var(--line);border-radius:6px;padding:5px 9px;min-width:76px;opacity:.38;}
.skin-tier.unlocked{opacity:1;border-color:#31394e;background:rgba(23,28,40,.6);}
.skin-name{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);}
.skin-req{font-size:9px;color:#5a6376;}
.skin-tier.unlocked .skin-req{color:var(--green);}

/* ---------- RECORDS screen (task 09) ---------- */
.rec-bests{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.rec-best{background:#0e1118;border:1px solid var(--line);border-radius:8px;padding:10px 8px;}
.rb-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--muted);}
.rb-val{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--gold);margin:4px 0 2px;font-variant-numeric:tabular-nums;}
.rb-sub{font-family:var(--mono);font-size:9px;color:#5a6376;}
.rec-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-align:left;margin:14px 0 6px;}
.rec-head .receipts-sub{letter-spacing:.06em;}
#rec-bestnight{color:var(--gold);letter-spacing:.06em;}
.rec-build{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;min-height:10px;}
.rec-list{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:#0e1118;padding:4px 8px;}
.rec-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;padding:5px 2px;border-bottom:1px dashed #1a2030;white-space:nowrap;}
.rec-row:last-child{border-bottom:none;}
.rr-mode{color:var(--ember);letter-spacing:.08em;min-width:64px;text-align:left;}
.rr-date{color:var(--muted);}
.rr-t{color:var(--ink);font-variant-numeric:tabular-nums;}
.rr-kills{color:var(--gold);}
.rr-score b{color:var(--gold);}
.rr-end{color:var(--muted);overflow:hidden;text-overflow:ellipsis;flex:1;text-align:right;}
.rr-iron{color:var(--green);min-width:52px;text-align:right;}
.close-records{margin-top:16px;}
@media (max-width:700px){
  .rec-bests{grid-template-columns:repeat(2,1fr);}
  .rec-row{font-size:9.5px;gap:5px;}
  .rr-mode{min-width:48px;}
}

/* ---------- 18+ gate, ceremony, receipts, save I/O (task 06) ---------- */
.gate-copy{font-size:13.5px;color:#c9cdd8;text-align:left;line-height:1.65;}
.gate-copy b{color:var(--ink);}
#gate input{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:6px;color:var(--ember);
  font-family:var(--mono);font-size:18px;letter-spacing:.4em;text-align:center;padding:10px 12px;outline:none;text-transform:uppercase;}
#gate input:focus{border-color:var(--ember);}
#gate-enter{margin:14px 0 10px;width:100%;}

.sac-today{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:left;margin-top:12px;}
.sac-today b{color:var(--gold);}
#binge-note{color:var(--ice);}
.receipts-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-align:left;margin:14px 0 6px;}
.receipts-sub{letter-spacing:.06em;color:#5a6376;}
.receipts{max-height:130px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:#0e1118;padding:4px 8px;}
.receipt{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;padding:5px 2px;border-bottom:1px dashed #1a2030;}
.receipt:last-child{border-bottom:none;}
.receipt code{color:var(--orange);font-size:11px;}
.receipt .r-sats{color:var(--gold);white-space:nowrap;}
.receipt .r-date{color:var(--muted);white-space:nowrap;}
.receipt-empty{font-family:var(--mono);font-size:11px;color:#5a6376;padding:8px 2px;}
.save-row{display:flex;gap:8px;justify-content:flex-start;margin-top:12px;}
#save-io{width:100%;margin-top:8px;background:#0e1118;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:10.5px;padding:8px 10px;outline:none;resize:vertical;}
#save-io:focus{border-color:var(--orange);}

#ceremony{background:rgba(5,5,10,.9);}
#cere-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.emberp{position:absolute;bottom:-30px;animation:ember-rise linear forwards;filter:drop-shadow(0 0 6px rgba(255,90,31,.8));}
@keyframes ember-rise{
  from{transform:translateY(0) scale(1);opacity:1;}
  to{transform:translateY(-105vh) scale(.35) rotate(24deg);opacity:0;}
}
.cere-wrap{text-align:center;margin:auto;max-width:560px;width:100%;}
.cere-title{font-family:var(--mono);font-size:clamp(22px,4.6vw,34px);font-weight:800;color:var(--ember);letter-spacing:.08em;text-shadow:0 0 26px rgba(255,90,31,.65);}
.cere-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin:10px 0 26px;}
.rankbar{height:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
#rankfill{height:100%;width:0%;background:linear-gradient(90deg,var(--ember),var(--gold));}
.cere-rankline{font-family:var(--mono);font-size:12px;color:var(--gold);margin:10px 0 26px;letter-spacing:.06em;}
.cere-epitaph{text-align:left;margin:0 0 22px;}
.cere-epitaph input{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:13px;padding:10px 12px;outline:none;}
.cere-epitaph input:focus{border-color:var(--ember);}
.cere-epitaph .tagbox{margin-bottom:6px;}
#epitaph-bytes{display:block;font-family:var(--mono);font-size:10px;text-align:right;}
#epitaph-bytes.full{color:var(--ember);}
.rankup-panel{border-color:var(--gold);box-shadow:0 0 60px rgba(255,210,74,.18);}
.rankup-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted);}
.rankup-name{font-size:clamp(38px,7vw,60px);font-weight:900;letter-spacing:.12em;margin:10px 0 6px;
  background:linear-gradient(180deg,var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;}
.rankup-flair{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em;margin-bottom:22px;}
@media (prefers-reduced-motion: reduce){
  .emberp{animation:none;display:none;}
  #rankfill{transition:none !important;}
}

/* ---------- small screens (task 03) ---------- */
@media (max-width:700px),(max-height:480px){
  .panel{padding:24px 18px;}
  #cards{gap:10px;}
  .card{width:46%;min-width:150px;}
  #hud{padding:8px 10px;
    padding:calc(8px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));}
  .hud-big{font-size:16px;}
  .hud-clock{font-size:22px;}
  .hud-gold,.hud-dim{font-size:10px;}
  #eventbanner{font-size:11px;}
  .wslot{width:34px;height:34px;font-size:13px;}
  .wslot .lv{font-size:8px;}
  /* summons: ≥44px thumb targets, bottom corner = one-handed reach */
  .summon{padding:12px 16px;font-size:20px;border-radius:10px;}
  .summon span{font-size:11px;}
  .help-list{font-size:13px;}
  h2{font-size:20px;}
  .death-title{font-size:22px;}
  .lvl-title{font-size:26px;}
}
@media (prefers-reduced-motion: reduce){
  .card{transition:none;}
}

/* ---------- volume sliders (task 16) ---------- */
.vol-row{gap:22px;margin-top:8px;}
.vol{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--muted);cursor:pointer;}
.vol input[type="range"]{width:120px;accent-color:var(--orange);cursor:pointer;}