/* Chaffwane — the dial. A slate-blue ground (the isometric family's own blue, brought forward as the field) with
   dark isometric blocks sitting on it and one amber accent for the grain. Figures in the mono so a 1 is a 1.
   Phone first: a left spine, a big number, the dial, then the loft; the floor recomposes to two columns at 1040. */
:root{
  --ground:#4A5A6E; --ground2:#3E4C5E; --ground3:#334050;
  --block:#1E242D; --block2:#2A323D; --edge:#161B22;
  --ink:#EEF1F5; --dim:rgba(238,241,245,.62); --faint:rgba(238,241,245,.4);
  --rule:rgba(238,241,245,.14); --rule2:rgba(238,241,245,.26);
  --amber:#F1A33A; --amberdim:rgba(241,163,58,.18); --amberrule:rgba(241,163,58,.5);
  --chaff:#E7DCC3; --chaffdim:rgba(231,220,195,.22);
  --spine:44px; --gutter:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 "Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:18px var(--gutter) 40px calc(var(--spine) + 14px);
}
.num,.mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3,.poster{font-family:"Turret Road",Impact,sans-serif;font-weight:800;letter-spacing:.01em}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}

/* ---------- the spine: fixed at every width ---------- */
#spine{
  position:fixed; left:6px; top:50%; transform:translateY(-50%); z-index:40;
  width:var(--spine); max-height:calc(100vh - 40px); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:8px 0; background:var(--block); border:1px solid var(--edge); border-radius:6px;
  box-shadow:6px 6px 0 var(--ground3);
}
.sp-mark{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.sp-mark img{width:30px;height:30px;border-radius:5px;display:block}
.sp-mark b{display:none}
.sp-tag{writing-mode:vertical-rl;font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--amber)}
.sp-addr{writing-mode:vertical-rl;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;line-height:1;letter-spacing:.02em;color:var(--dim);user-select:all;word-break:break-all}
#spine[data-live="1"] .sp-addr{color:var(--ink)}
.sp-copy{width:34px;height:34px;border:1px solid var(--amberrule);border-radius:4px;background:var(--amberdim);color:var(--amber);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.sp-copy:disabled{opacity:.4;border-color:var(--rule2);color:var(--dim);background:none}
.sp-copy[data-done="1"]{background:var(--amber);color:#1A1207}
.sp-gm{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-decoration:none;writing-mode:vertical-rl}
.sp-ways{display:none}

/* ---------- the readout: one figure, huge ---------- */
.tick{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.heapnum{margin:0 0 16px;display:flex;flex-direction:column;gap:2px;line-height:1}
.heapnum .num{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:54px;letter-spacing:-.02em;color:var(--ink)}
.heapnum small{font-family:"Work Sans",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

#floor{width:100%;max-width:560px;margin:0;display:block}

/* ---------- the gauge: the dial on its plinth, and the scoop ---------- */
.gauge{margin:0 0 22px}
.plinth{position:relative;padding:14px 12px 16px;background:var(--block);border:1px solid var(--edge);border-radius:8px;box-shadow:10px 10px 0 var(--ground3),10px 10px 0 1px var(--edge)}
.plinth::before{content:"";position:absolute;left:14px;right:14px;top:-7px;height:7px;background:var(--block2);border:1px solid var(--edge);border-bottom:0;border-radius:6px 6px 0 0;transform:skewX(-38deg);transform-origin:bottom left;opacity:.9}
.dialface{display:block;width:100%;height:auto}
.needleg{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.dialline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dialline b{color:var(--chaff);font-weight:500}
.dialline i{font-style:normal;color:var(--amber)}
.vitals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:12px 0 0}
.vital{background:var(--block2);padding:9px 10px}
.vital dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
.vital dd{margin:0;font-size:17px;font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.scoopbtn{
  display:flex;width:100%;min-height:58px;margin:14px 0 0;padding:0 16px;align-items:center;justify-content:space-between;gap:10px;
  background:var(--amber);color:#1A1207;border-radius:6px;font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:17px;letter-spacing:.03em;
  box-shadow:0 5px 0 #8A5A17;
}
.scoopbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #8A5A17}
.scoopbtn small{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:13px;letter-spacing:0;opacity:.85}
.scoopbtn[data-off="1"]{background:var(--block2);color:var(--dim);box-shadow:none;border:1px solid var(--rule2)}
.scoopbtn[data-off="1"]:active{transform:none}
.scoopnote{margin:9px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
.sub{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--dim)}
.sub b{color:var(--ink);font-weight:600}

/* ---------- the loft ---------- */
.loft{display:block}
.bin{background:var(--block);border:1px solid var(--edge);border-radius:8px;margin:0 0 14px;box-shadow:6px 6px 0 var(--ground3)}
.binhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rule)}
.binhead h3{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.binhead span{font-size:10.5px;color:var(--faint);letter-spacing:.08em}
.binbody{padding:10px 12px 12px}
.passrow{display:grid;grid-template-columns:34px 1fr 1fr auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--rule);font-size:12px}
.passrow:last-child{border-bottom:0}
.passrow b{font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:15px;color:var(--faint)}
.passrow em{font-style:normal;font-family:"DM Mono",ui-monospace,monospace;color:var(--dim)}
.passrow u{text-decoration:none;font-family:"DM Mono",ui-monospace,monospace;color:var(--dim)}
.passrow s{text-decoration:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.passrow[data-s="on"] b,.passrow[data-s="on"] s{color:var(--amber)}
.passrow[data-s="on"] em,.passrow[data-s="on"] u{color:var(--ink)}
.passrow[data-s="gone"]{opacity:.55}
.tapeln{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--rule);font-size:11.5px;font-family:"DM Mono",ui-monospace,monospace}
.tapeln:last-child{border-bottom:0}
.tapeln i{font-style:normal;color:var(--amber);font-weight:500}
.tapeln em{font-style:normal;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapeln u{text-decoration:none;color:var(--faint)}
.tapeln[data-k="shuttered"] i{color:var(--chaff)}
.hush{color:var(--faint);font-size:12px;line-height:1.6;margin:0}
.howlist{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--dim)}
.howlist li{margin:0 0 6px}
.howlist b{color:var(--ink);font-weight:600}
.harvrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--rule);font-size:11.5px;font-family:"DM Mono",ui-monospace,monospace}
.harvrow:last-child{border-bottom:0}
.harvrow b{font-weight:500;color:var(--ink)}
.harvrow em{font-style:normal;color:var(--dim)}
.harvrow u{text-decoration:none;color:var(--amber)}
.harvrow[data-dry="1"] u{color:var(--chaff)}

/* ---------- the eaves ---------- */
.eaves{margin:10px 0 0;padding:14px 0 0;border-top:1px solid var(--rule2);font-size:11.5px;color:var(--faint);line-height:1.8}
.eaves code{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;word-break:break-all;color:var(--dim)}
.eaves a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule2)}
.eavesrow{display:block}
.eavesrow a+a{margin-left:10px}

/* ---------- leaves: rules, harvests, reaper ---------- */
.leaf{background:var(--block);border:1px solid var(--edge);border-radius:8px;padding:16px 14px 18px;box-shadow:10px 10px 0 var(--ground3)}
.leaf h2{margin:0 0 12px;font-size:22px;line-height:1.1}
.leaf p{margin:0 0 11px;font-size:13.5px;line-height:1.62;color:var(--dim)}
.leaf p b{color:var(--ink);font-weight:600}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.slate{width:100%;border-collapse:collapse;font-size:12px;font-family:"DM Mono",ui-monospace,monospace}
.slate th{text-align:left;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:6px 8px 6px 0;border-bottom:1px solid var(--rule2)}
.slate td{padding:7px 8px 7px 0;border-bottom:1px dashed var(--rule);color:var(--dim);white-space:nowrap}
.slate td.on{color:var(--amber)}
.reapbtn{min-height:32px;padding:0 12px;border-radius:4px;background:var(--amber);color:#1A1207;font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:12px}
.reapbtn:disabled{opacity:.5}

/* ---------- the hatch (modal) ---------- */
#hatch{position:fixed;inset:0;z-index:60;background:rgba(22,27,34,.7);display:flex;align-items:flex-end;justify-content:center;padding:0 0 env(safe-area-inset-bottom,0px)}
#hatch[hidden]{display:none}
.hatchbox{width:100%;max-width:520px;background:var(--block);border:1px solid var(--edge);border-radius:10px 10px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.hatchhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em}
.hatchshut{width:34px;height:34px;font-size:22px;line-height:1;color:var(--dim)}
.hatchbody{padding:14px 14px 18px;font-size:13.5px;line-height:1.6;color:var(--dim)}
.hatchbody p{margin:0 0 10px}
.hatchbody b{color:var(--ink);font-weight:600}
.fire{display:block;width:100%;min-height:50px;margin:12px 0 0;border-radius:6px;background:var(--amber);color:#1A1207;font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:15px;letter-spacing:.03em}
.fire:disabled{opacity:.45}
.wellpick{display:flex;flex-direction:column;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--rule2);border-radius:6px;background:var(--block2);text-align:left}
.wellpick img{width:26px;height:26px;border-radius:5px}
.sparknote{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--amber);color:#1A1207;padding:9px 14px;border-radius:6px;font-size:13px;font-weight:500;max-width:92vw;box-shadow:0 6px 24px rgba(0,0,0,.35)}

/* ---------- wider phone / tablet: same column, wider measure ---------- */
@media (min-width:640px){
  :root{--spine:52px;--gutter:22px}
  #spine{left:10px}
  .sp-addr{font-size:11.5px}
  .heapnum .num{font-size:74px}
  #floor{max-width:660px}
  .plinth{padding:18px 18px 20px}
  .vital dd{font-size:20px}
  .leaf h2{font-size:28px}
}

/* ---------- desktop: the spine widens into a column, the floor recomposes ---------- */
@media (min-width:1040px){
  :root{--spine:208px;--gutter:32px}
  body{padding:28px var(--gutter) 48px calc(var(--spine) + 44px)}
  #spine{
    left:14px; top:14px; bottom:14px; transform:none; max-height:none; height:auto;
    align-items:stretch; gap:12px; padding:18px 16px; overflow:visible;
  }
  .sp-mark{flex-direction:row;gap:10px}
  .sp-mark img{width:38px;height:38px}
  .sp-mark b{display:block;font-family:"Turret Road",Impact,sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em}
  .sp-tag{writing-mode:horizontal-tb;font-size:13px;margin-top:6px}
  .sp-addr{writing-mode:horizontal-tb;font-size:12px;line-height:1.5;word-break:break-all;background:var(--edge);padding:8px 9px;border-radius:4px}
  .sp-copy{width:100%;height:40px;font-size:12px}
  .sp-gm{writing-mode:horizontal-tb}
  .sp-ways{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .sp-ways a{color:var(--faint);text-decoration:none;padding:5px 0}
  .sp-ways a[aria-current]{color:var(--amber)}
  .tick{font-size:12px}
  .heapnum{flex-direction:row;align-items:baseline;gap:18px;max-width:1180px;margin-bottom:24px}
  .heapnum .num{font-size:104px;letter-spacing:-.03em}
  .heapnum small{font-size:13px}
  #floor{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);grid-template-areas:"gauge loft" "eaves eaves";gap:0 32px;align-items:start}
  .gauge{grid-area:gauge;margin:0}
  .loft{grid-area:loft}
  .eaves{grid-area:eaves;margin-top:28px}
  .plinth{padding:24px 26px 26px}
  .dialline{font-size:12px}
  .vital dd{font-size:24px}
  .scoopbtn{min-height:66px;font-size:20px}
  .sub{font-size:15px}
  .leaf{padding:26px 28px 30px}
  .leaf h2{font-size:34px}
  .leaf p{font-size:15px}
  .eavesrow{display:inline-block;margin-right:22px}
}
@media (min-width:1400px){
  .heapnum .num{font-size:124px}
}