/* Ashfall — the page around the canvas. Dark only. No web fonts: the game
   runs offline from a .zip, so DOM text is the system monospace stack. The
   world (and any text inside it) is pixel art drawn by WebGL; the DOM is
   for menus, HUD panels and dialogue. */
:root{
  color-scheme:dark;
  --bg:#050609; --panel:rgba(8,9,13,.78); --bor:#23262e; --ink:#c9c4b8; --mut:#7d7a72;
  --lumen:#efc35a; --cyan:#7fe0e2; --cinder:#e2531f; --violet:#9450bf;
  --mono:ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
#app{position:fixed;inset:0;overflow:hidden;color:var(--ink);font:12px/1.35 var(--mono);
  -webkit-user-select:none;user-select:none;touch-action:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;cursor:crosshair}
#hud{position:absolute;inset:0;pointer-events:none}
.panel{position:absolute;background:var(--panel);border:1px solid var(--bor);border-radius:2px;padding:6px 9px;
  box-shadow:0 0 0 1px #000}
#where{left:10px;top:10px;max-width:calc(100% - 20px)}
#place{color:var(--lumen);letter-spacing:.14em;text-transform:uppercase;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clock{color:var(--mut);letter-spacing:.08em;font-size:11px;margin-top:2px}
#dbg{right:10px;top:10px;margin:0;font:11px/1.35 var(--mono);color:var(--cyan);white-space:pre;max-width:calc(100% - 20px);overflow:hidden}
#hint{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;color:var(--mut);font-size:11px;
  letter-spacing:.06em;text-shadow:0 1px 0 #000,0 0 6px #000}
#err{display:none;position:absolute;left:10px;right:10px;bottom:40px;max-height:40%;overflow:auto;white-space:pre-wrap;
  background:#1a0606;border:1px solid #6a1d12;color:#ffb36a;padding:8px;font:11px/1.4 var(--mono);z-index:9}
@media (max-width:640px){
  #app{font-size:11px}
  #hint{font-size:10px;letter-spacing:.02em}
  #dbg{left:10px;right:auto;top:auto;bottom:44px;font-size:10px}
}

/* ══ game UI (js/game/ui.js, title.js) ════════════════════════════════════
   Layout by construction (the tree's rule): the HUD is one grid with fixed
   tracks; forms are a subgrid of label / control / hint rows and every
   field emits all three; tiles have a fixed size; every track that holds
   text can shrink (minmax(0, …)) so a phone never scrolls sideways.      */
:root{ --hp:#a8302a; --st:#8a8064; --ae:#3aaeb6; --gold:#e0b84a; --tile:44px; --gap:8px; }
button{font:inherit;color:inherit}
.hud-grid{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:10px;
  padding-bottom:max(10px,env(safe-area-inset-bottom))}
.hud-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--gap)}
.hud-where{position:static;justify-self:start;max-width:min(100%,460px)}
.hud-where .quest{color:var(--ink);font-size:11px;margin-top:4px;padding-top:4px;border-top:1px solid var(--bor);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.hud-fps{color:var(--cyan);font-size:11px;text-shadow:0 1px 0 #000}
.hud-mid{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;justify-items:center;min-height:0}
.bossbar{width:min(520px,92%);text-align:center;display:none}
.bossbar .bb-name{color:#d8d2c2;letter-spacing:.18em;text-transform:uppercase;font-size:11px;text-shadow:0 1px 0 #000}
.bossbar .bb-track{height:8px;background:#120d0d;border:1px solid #3e2a28;margin-top:3px}
.bossbar .bb-track i{display:block;height:100%;background:linear-gradient(#c94a3a,#7a1f1a);width:100%}
.bossbar.gloria .bb-track i{background:linear-gradient(#fff7dc,#efc35a)}
.toasts{display:grid;gap:4px;justify-items:center;margin-top:6px;max-width:92%}
.toast{background:rgba(8,9,13,.82);border:1px solid var(--bor);padding:4px 10px;color:var(--ink);font-size:12px;transition:opacity .5s;text-align:center}
.toast.out{opacity:0}
.prompt{grid-row:4;align-self:end;background:rgba(8,9,13,.85);border:1px solid #5a5040;color:var(--lumen);padding:4px 12px;letter-spacing:.06em;visibility:hidden}
.hud-bottom{display:grid;grid-template-columns:minmax(0,300px) auto minmax(0,1fr);align-items:end;gap:var(--gap)}
.hud-res,.hud-side{position:static}
.hud-res{display:grid;grid-template-columns:8px minmax(0,1fr) 8px;gap:7px;align-items:stretch;padding:7px 8px}
.vial{position:relative;background:#0c0d12;border:1px solid #2c2f38;border-radius:4px;overflow:hidden;min-height:52px}
.vial i{position:absolute;left:0;right:0;bottom:0;height:0}
.vial-s i{background:linear-gradient(#fff7dc,#efc35a)}
.vial-k i{background:linear-gradient(#ff8a3c,#a82c16)}
.vial.warn{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 6px 1px #fff7dc}}
.bars{display:grid;grid-template-rows:14px 7px 10px auto;gap:3px;min-width:0}
.bar{position:relative;background:#0c0d12;border:1px solid #2c2f38;overflow:hidden}
.bar i{display:block;height:100%;width:100%}
.bar span{position:absolute;inset:0;font-size:10px;line-height:12px;text-align:center;color:#f0e8dc;text-shadow:0 1px 0 #000}
.bar-hp i{background:linear-gradient(#c94a3a,#7a1f1a)}
.bar-st i{background:linear-gradient(#b8ac88,#6c644c)}
.bar-ae i{background:linear-gradient(#7fe0e2,#1f6e78)}
.bar-ae span{line-height:9px;font-size:9px}
.bar .fray{position:absolute;right:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,#616161 0 1px,#2e2e2e 1px 2px,#9a9a9a 2px 3px)}
.hud-status{font-size:10px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hotbar{display:grid;grid-template-columns:repeat(6,var(--tile));gap:4px;pointer-events:auto}
.slot{position:relative;width:var(--tile);height:var(--tile);background:rgba(8,9,13,.85);border:1px solid #3a3d47;cursor:pointer;overflow:hidden}
.slot img{position:absolute;left:6px;top:6px;width:32px;height:32px;image-rendering:pixelated}
.slot em{position:absolute;left:2px;top:0;font-style:normal;font-size:9px;color:var(--mut);z-index:2}
.slot small{position:absolute;right:2px;bottom:0;font-size:10px;color:#f0e8dc;text-shadow:0 1px 0 #000;z-index:2}
.slot u{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6);z-index:1}
.slot.off img{filter:grayscale(1) brightness(.5)}
.hud-side{justify-self:end;display:grid;gap:4px;min-width:150px;max-width:100%}
.hud-side .lv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;color:var(--lumen)}
.xp{height:4px;background:#0c0d12;border:1px solid #2c2f38}.xp i{display:block;height:100%;width:0;background:#7f6aa8}
.hud-side .row2{display:grid;grid-template-columns:auto auto;gap:10px;justify-content:space-between;font-size:11px;color:var(--mut)}
#gold{color:var(--gold)}
.vig{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}
.vig-hurt{box-shadow:inset 0 0 140px 30px rgba(140,10,10,.9)}
.vig-fray{box-shadow:inset 0 0 90px 10px rgba(150,150,150,.6);background:repeating-radial-gradient(circle at 50% 50%,transparent 0 3px,rgba(120,120,120,.05) 3px 4px)}
.vig-dark{background:radial-gradient(circle at 50% 46%,transparent 0 90px,rgba(0,0,0,.92) 180px)}
.vig-water{background:linear-gradient(transparent 60%,rgba(40,120,140,.35))}

/* ── modal panels ── */
.modal{position:absolute;inset:0;display:none;background:rgba(3,4,6,.6);z-index:5;pointer-events:auto;padding:12px}
.modal.open{display:grid;place-items:center}
.mpanel{width:min(1000px,100%);max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);background:#0a0b10;border:1px solid #2c2f38;box-shadow:0 0 0 1px #000,0 10px 40px #000}
.mhead{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;border-bottom:1px solid var(--bor);padding:0 0 0 12px}
.mtitle{color:var(--lumen);letter-spacing:.14em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mclose{height:40px;background:none;border:0;border-left:1px solid var(--bor);font-size:20px;cursor:pointer;color:var(--mut)}
.mclose:hover{color:var(--ink)}
.mbody{overflow:auto;padding:12px;min-height:0}
.modal-menu .mpanel,.modal-load .mpanel,.modal-settings .mpanel,.modal-controls .mpanel,.modal-rest .mpanel{width:min(440px,100%)}
.btn{min-height:40px;padding:6px 12px;background:#14161d;border:1px solid #3a3d47;cursor:pointer;color:var(--ink);text-align:left}
.btn:hover:not(:disabled){border-color:#7a6a40;color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{border-color:#8a6a22;color:var(--lumen)}
.btn.mini{min-height:28px;min-width:28px;padding:2px 7px;text-align:center}
.btn.tab{min-height:36px}.btn.tab.on{border-color:var(--lumen);color:var(--lumen)}
.btn.wide{grid-column:1/-1}
.menu-acts{display:grid;gap:6px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.dim{color:var(--mut)}.good{color:#8fd18a}.bad{color:#e06a5a}.mod{color:#a9c4e8}
.h{color:var(--lumen);margin-bottom:6px;letter-spacing:.06em}
.srow{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:10px;padding:3px 0;border-bottom:1px solid #15171d}
.ico{width:16px;height:16px;image-rendering:pixelated;vertical-align:middle}
.ico.big{width:48px;height:48px;border:1px solid #474a55;background:#07080b;flex:none}
.r-fine.ico.big{border-color:#a3a5ad}.r-rare.ico.big{border-color:#7fb7d9}.r-relic.ico.big{border-color:#e0b84a}.r-unique.ico.big{border:2px solid #c0503a}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,var(--tile));gap:4px;align-content:start}
.tile{position:relative;width:var(--tile);height:var(--tile);background:#0f1016;border:1px solid #474a55;cursor:pointer}
.tile img{position:absolute;left:5px;top:5px;width:32px;height:32px;image-rendering:pixelated}
.tile em{position:absolute;right:2px;bottom:0;font-style:normal;font-size:10px;color:#f0e8dc;text-shadow:0 1px 0 #000}
.tile.r-fine{border-color:#a3a5ad}.tile.r-rare{border-color:#7fb7d9}.tile.r-relic{border-color:#e0b84a;box-shadow:inset 0 0 6px rgba(224,184,74,.4)}.tile.r-unique{border:2px solid #c0503a}
.tile.sel{outline:2px solid var(--lumen);outline-offset:1px}
.tile.bb{opacity:.75}
.inv{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,290px);gap:12px;align-items:start}
.inv-eq{display:grid;gap:4px}
.eqslot{display:grid;grid-template-columns:var(--tile) minmax(0,1fr);gap:8px;align-items:center;cursor:pointer}
.eqslot.empty{cursor:default}.eqslot.empty .tile{border-style:dashed;cursor:default}
.eqlab{font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.inv-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:var(--mut)}
.inv-detail{background:#07080b;border:1px solid #1c1e25;padding:10px;min-height:120px}
.icard{line-height:1.45}
.ihead{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.iname{font-weight:bold}
.cmp{margin-top:8px;padding-top:6px;border-top:1px solid #1c1e25}
.hbassign{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.pts{color:var(--lumen);margin:6px 0 10px}
.attrgrid{display:grid;grid-template-columns:90px 50px 34px minmax(0,1fr);gap:6px 8px;align-items:center}
.arow{display:contents}.an{color:var(--ink)}.av{color:#fff;font-weight:bold}.ah{font-size:11px}
.corr{margin-top:10px}
.chk{display:flex;gap:8px;align-items:center;margin-top:10px;cursor:pointer}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.trees{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.tree{background:#07080b;border:1px solid #1c1e25;padding:8px}
.node{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid #15171d}
.node .nb{color:var(--mut)}.node.known .nb,.node.known b{color:var(--lumen)}.node.can b{color:#fff}
.node .nr{display:grid;justify-items:end;gap:2px}.node .why{font-size:10px;max-width:120px;text-align:right}
.node .nt{font-size:11px;line-height:1.35}
.journal{display:grid;gap:8px}
.quest-entry{background:#07080b;border:1px solid #1c1e25;padding:8px;cursor:pointer}
.quest-entry.done{opacity:.6}.quest-entry.tracked{border-color:#7a6a40}
.shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,290px);gap:12px;align-items:start}
.rest-text{color:var(--ink);line-height:1.5}
.controls .key{color:var(--lumen)}

/* ── forms: one shared track; every field emits label, control, hint ── */
.form{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:center}
.field{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.field label{color:var(--ink)}
.field .ctl,.field select,.field input[type=text]{min-height:40px;background:#0f1016;border:1px solid #3a3d47;color:var(--ink);padding:4px 8px;font:inherit;width:100%;min-width:0}
.field input[type=range]{width:100%}
.field .hint{color:var(--mut);font-size:11px}
.stepper{display:grid;grid-template-columns:40px 64px 40px;align-items:center;justify-items:center;border:0!important;padding:0!important;background:none!important}
.stepper .btn.mini{width:40px;min-height:40px}
.stepper b{font-size:16px}

/* ── dialogue ── */
.dialogue{position:absolute;left:0;right:0;bottom:0;display:none;z-index:6;pointer-events:auto;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.dialogue.open{display:block}
.dl{width:min(860px,100%);margin:0 auto;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;background:rgba(8,9,13,.94);border:1px solid #3a3d47;padding:12px;box-shadow:0 0 30px #000}
.portrait{width:96px;height:96px;image-rendering:pixelated;border:1px solid #2c2f38;background:#0b0c12}
.dname{color:var(--lumen);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.dtext{line-height:1.5;color:#e2dccf;margin-bottom:8px}
.dchoices{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dchoice{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:baseline;padding:6px 8px;border:1px solid #23262e;cursor:pointer;min-height:36px}
.dchoice:hover{border-color:#7a6a40}
.dchoice .dk{color:var(--lumen)}
.dchoice.disabled{opacity:.45;cursor:default}
.dtag{color:#9fb3d0}

/* ── covers: death, the endings ── */
.cover{position:absolute;inset:0;display:none;z-index:8;pointer-events:auto}
.cover.open{display:grid;place-items:center}
.cover.death{background:radial-gradient(circle,rgba(0,0,0,.5),rgba(0,0,0,.95));animation:fadein 1s}
.cover.ending.asc{background:radial-gradient(circle,rgba(255,250,235,.9),rgba(239,195,90,.95))}
.cover.ending.chapter{background:radial-gradient(circle,rgba(5,6,9,.75),rgba(5,6,9,.96))}
.cover.ending.con{background:radial-gradient(circle,rgba(40,8,4,.9),rgba(5,2,1,.98))}
.cover .card{max-width:min(520px,90%);text-align:center}
.cover .ct{font-size:22px;letter-spacing:.12em;margin-bottom:10px;color:#e2dccf}
.cover.ending.asc .ct,.cover.ending.asc .cs{color:#2b2210}
.cover .cs{color:var(--mut);line-height:1.5}
.cover .acts{justify-content:center}
@keyframes fadein{from{opacity:0}}

/* ── title and creation ── */
.title{position:absolute;inset:0;display:none;z-index:7;pointer-events:auto;background:radial-gradient(ellipse at 50% 40%,rgba(5,6,9,.15),rgba(5,6,9,.85))}
.title.open{display:grid;place-items:center}
.ashfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tbox{position:relative;display:grid;justify-items:center;gap:14px;padding:16px;max-width:100%}
.logo{max-width:92vw;image-rendering:pixelated;filter:drop-shadow(0 0 18px rgba(226,83,31,.35))}
.tsub{color:var(--mut);letter-spacing:.3em;text-transform:uppercase;font-size:11px;text-align:center}
.tmenu{display:grid;gap:6px;width:min(260px,80vw)}
.tmenu .btn{text-align:center;letter-spacing:.12em}
.tfoot{color:#4c4b48;font-size:10px;text-align:center;max-width:420px}
.title.cc-on{place-items:stretch;background:rgba(5,6,9,.88);overflow:auto}
.cc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;width:min(1040px,100%);margin:0 auto;padding:16px;align-content:start}
.cc-main{display:grid;grid-template-rows:auto auto auto;gap:12px;min-width:0}
.cc-steps{display:flex;flex-wrap:wrap;gap:4px 14px;color:#4c4b48;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.cc-steps .on{color:var(--lumen)}.cc-steps .done{color:var(--mut)}
.cc-h{color:var(--ink);line-height:1.5;margin-bottom:10px}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:8px}
.choice{display:grid;grid-template-rows:auto 1fr;gap:4px;text-align:left;padding:10px;background:#0f1016;border:1px solid #2c2f38;cursor:pointer;min-height:84px}
.choice b{color:#e2dccf}.choice span{color:var(--mut);font-size:11px;line-height:1.4}
.choice.on{border-color:var(--lumen)}.choice.on b{color:var(--lumen)}
.derived{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:0 16px;margin-top:12px}
.cc-nav{display:flex;flex-wrap:wrap;gap:6px}
.cc-preview{display:grid;justify-items:center;align-content:start;gap:8px;position:sticky;top:0}
#cc-sprite{width:160px;height:176px;image-rendering:pixelated;background:#06070a;border:1px solid #1c1e25}
.cc-sum{text-align:center;font-size:11px;line-height:1.5}
.cc-sum .kit{display:flex;gap:4px;justify-content:center;margin-top:6px}
.cc-sum .kit .ico{width:24px;height:24px}
.cc-summary{margin-top:12px}

/* ── loading: the region is being built ── */
.loading{position:absolute;inset:0;display:none;z-index:65;place-items:center;background:rgba(5,6,9,.92);pointer-events:auto}
.loading.open{display:grid}
.loading .ld{color:var(--mut);letter-spacing:.3em;text-transform:uppercase;font-size:12px;animation:pulse2 1.6s infinite}
@keyframes pulse2{50%{color:var(--ink)}}

/* ── touch ── */
.touch{display:none}
@media (pointer:coarse){
  .touch{display:block;position:absolute;inset:auto 0 0 0;height:0;pointer-events:none;z-index:4}
  .stick{position:absolute;left:18px;bottom:150px;width:110px;height:110px;border-radius:50%;border:1px solid rgba(160,150,130,.35);background:rgba(10,11,16,.35);pointer-events:auto}
  .stick i{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:rgba(239,195,90,.35)}
  .tbtns{position:absolute;right:14px;bottom:150px;display:grid;grid-template-columns:repeat(2,52px);gap:8px;pointer-events:auto}
  .tbtns button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(160,150,130,.4);background:rgba(10,11,16,.5);font-size:18px}
}

/* ── narrow screens: the HUD restacks and shrinks ── */
@media (max-width:760px){
  :root{--tile:40px;--gap:6px}
  .hud-grid{padding:6px}
  .hud-bottom{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
  .hud-res{grid-column:1;grid-row:1}
  .hud-side{grid-column:2;grid-row:1;min-width:0;align-self:stretch}
  .hotbar{grid-column:1/-1;grid-row:2;justify-self:center}
  .slot img{left:4px;top:4px}
  .hud-where{font-size:11px}
  .inv,.shop{grid-template-columns:minmax(0,1fr)}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,96px) minmax(0,1fr)}
  .field .hint{grid-column:2}
  .cc{grid-template-columns:minmax(0,1fr);padding:10px}
  .cc-preview{position:static;order:-1;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center}
  #cc-sprite{width:96px;height:106px}
  .mbody{padding:8px}
  .dl{grid-template-columns:64px minmax(0,1fr);padding:8px}
  .portrait{width:64px;height:64px}
  .srow{grid-template-columns:minmax(0,110px) minmax(0,1fr)}
}
@media (max-width:420px){
  .hud-side{display:none}
  .attrgrid{grid-template-columns:76px 40px 34px}
  .attrgrid .ah{display:none}
}
.field{align-items:center}
.attrs-form{grid-template-columns:minmax(0,110px) max-content minmax(0,1fr)}
.derived .srow{grid-template-columns:minmax(0,1fr) auto}
.modal{z-index:20}.dialogue{z-index:21}.title{z-index:25}.cover{z-index:30}#err{z-index:40}
.modal{z-index:50}.dialogue{z-index:51}.title{z-index:55}.cover{z-index:60}#err{z-index:70}
@media (max-width:420px){
  .hud-bottom{grid-template-rows:auto auto auto}
  .hud-side{display:grid;grid-column:1/-1;grid-row:3;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:4px 8px}
  .hud-res{grid-column:1/-1}
}