/* Layout: full-bleed map. A top bar and a bottom card float over it; a sheet rises for a tile. Dark is the default look; the lamp button switches to light. */
:root{
  --ground:#0a0c10; --panel:#0d1016; --ink:#f4f2ec; --muted:#c6ccd5; --line:#3a424f; --accent:#ffd93b; --num:#ffd93b;
  --cta-bg:#ffd93b; --cta-fg:#0a0c10; --tab-bg:#0f7a43; --tab-fg:#ffffff; --done:#5fd38d; --open:#ef7d5f; --frontier:#ffd93b; --on-accent:#0a0c10;
  --hl:#ffd93b; --orb:#ffe777; --orbg:rgba(255,217,59,.65); --scrim:10,12,16; --field:#0a0c10; --shadow:0 18px 40px rgba(0,0,0,.55); color-scheme:dark;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --ui:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --story:var(--ui);
}
:root[data-mj="light"]{
  --ground:#eef2f6; --panel:#fbfcfd; --ink:#0f1c2e; --muted:#2b3a4d; --line:#0f1c2e; --accent:#1553a6; --num:#1553a6;
  --cta-bg:#1553a6; --cta-fg:#ffffff; --tab-bg:#f28c28; --tab-fg:#0f1c2e; --done:#1b6e3d; --open:#1553a6; --frontier:#1553a6; --on-accent:#ffffff;
  --hl:#1553a6; --orb:#f28c28; --orbg:rgba(242,140,40,.6); --scrim:238,242,246; --field:#ffffff; --shadow:6px 6px 0 rgba(15,28,46,.9); color-scheme:light;
}
html,body{height:100%}
body{margin:0;position:relative;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--ui)}
#mapwrap{position:absolute;inset:0}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:grab}
header{position:absolute;left:0;right:0;top:0;z-index:3;padding:14px 16px 34px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;background:linear-gradient(180deg,rgba(var(--scrim),.96) 0%,rgba(var(--scrim),.7) 55%,rgba(var(--scrim),0) 100%)}
header>*{pointer-events:auto}
.brand{display:grid;gap:6px;min-width:0}
h1{font-family:var(--display);font-weight:900;font-size:2.3rem;line-height:.86;letter-spacing:.02em;text-transform:uppercase;margin:0;position:relative;justify-self:start;padding:3px 5px;margin:-3px -5px}
.hb{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px var(--orbg))}
.hb path{fill:none;stroke:var(--orb);stroke-linecap:round;stroke-linejoin:round;animation:orb 11s linear infinite}
.hb .d{stroke-width:6;stroke-dasharray:.01 99.99}
.hb .t{stroke-width:3;stroke-dasharray:3 97;opacity:.7;animation-name:orb1}
.hb .t2{stroke-width:2;stroke-dasharray:7 93;opacity:.4;animation-name:orb2}
.hb .t3{stroke-width:1.2;stroke-dasharray:13 87;opacity:.22;animation-name:orb3}
@keyframes orb{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes orb1{from{stroke-dashoffset:3}to{stroke-dashoffset:-97}}
@keyframes orb2{from{stroke-dashoffset:7}to{stroke-dashoffset:-93}}
@keyframes orb3{from{stroke-dashoffset:13}to{stroke-dashoffset:-87}}
#segs i.cur{animation:segp 2s ease-in-out infinite}
@keyframes segp{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9)}}
@media (prefers-reduced-motion:reduce){.hb{display:none}#segs i.cur{animation:none}}
.slogan{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.acts{display:flex;gap:8px}
button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px 10px;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acts button{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
#theme{color:#ffd93b;background:#0d1016;border-color:var(--line)}
.tools{position:absolute;right:12px;top:98px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tools button{min-width:44px;min-height:40px;font-family:var(--mono);font-size:.8rem;font-weight:600}
.demo{position:absolute;left:0;top:124px;z-index:2;background:var(--panel);border:1px solid var(--line);border-left:none;padding:6px 12px 6px 16px;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:62%}
footer{position:absolute;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100% - 24px));box-sizing:border-box;z-index:3;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:14px 14px 12px;display:grid;gap:10px;box-shadow:var(--shadow)}
.stat{display:flex;align-items:flex-end;gap:12px}
.stat b{font-family:var(--display);font-weight:900;font-size:3.3rem;line-height:.8;color:var(--num);font-variant-numeric:tabular-nums}
.stat div{display:grid;gap:3px;padding-bottom:2px;font-family:var(--mono)}
.stat .of{font-size:.95rem;font-weight:500}
.lab{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#segs{display:flex;gap:2px;height:8px}
#segs i{flex:1 1 0;height:8px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;display:block}
#segs i b{display:block;height:8px;background:var(--num)}
.row2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;letter-spacing:.05em}
.row2 span{white-space:nowrap}
.char{color:var(--done)} .char b{font-weight:600}
.buy{display:flex;align-items:stretch;justify-content:space-between;width:100%;height:60px;padding:0;border:none;border-radius:2px;overflow:hidden;background:var(--cta-bg);color:var(--cta-fg);font-family:var(--display);font-weight:900;text-transform:uppercase}
.buy>span{display:flex;align-items:center;padding-left:16px;font-size:1.3rem;letter-spacing:.03em;white-space:nowrap}
.buy>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden}
.buy>.tab{flex:none;justify-content:center;padding:0 14px;min-width:78px;box-sizing:border-box;background:var(--tab-bg);color:var(--tab-fg);font-size:1.7rem;border:2px solid var(--cta-bg)}
.buy:disabled{opacity:.45;cursor:not-allowed}
.sim{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sim input{flex:1;min-width:120px;accent-color:var(--accent)}
details summary{cursor:pointer}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);padding-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--panel);border-top:3px solid var(--accent);padding:16px 20px 20px;max-height:82%;overflow:auto;box-shadow:0 -18px 40px rgba(0,0,0,.45)}
#sheet .in{max-width:520px;margin:0 auto;display:grid;gap:12px}
.sh-top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.sh-top h2{font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:.95;letter-spacing:.02em;text-transform:uppercase;margin:0}
.sh-top button{min-width:44px;min-height:44px}
.sub{color:var(--muted);font-size:.8rem}
.hl{color:var(--hl);font-weight:600}
.story{font-size:1.25rem;font-weight:500;line-height:1.4;border-left:3px solid var(--accent);padding:4px 0 4px 12px;margin:0}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field label[for=words]{color:var(--num)}
:root[data-mj="light"] .field label[for=words]{color:var(--open)}
input[type=text]{font:inherit;font-size:1rem;padding:11px 12px;border:1px solid var(--line);border-radius:2px;background:var(--field);color:var(--ink);width:100%;box-sizing:border-box}
#words{font-size:1.05rem}
#words::placeholder{font-size:.82rem}
.err{color:var(--open);font-size:.82rem}.err:empty{display:none}
.link{background:none;border:none;padding:0;color:var(--done);text-decoration:underline;font-size:.85rem;text-align:left}
#fin{position:absolute;left:50%;top:158px;transform:translateX(-50%);z-index:4;background:rgba(13,16,22,.94);color:#f4f2ec;border:1px solid #3a424f;padding:10px 16px;border-radius:2px;display:grid;gap:4px;justify-items:center;text-align:center;max-width:82%;box-shadow:0 6px 20px rgba(0,0,0,.4)}
#fin[hidden]{display:none}
#fin b{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase;color:#ffd93b}
#fin span{font-size:.85rem}
#fin button{margin-top:4px;padding:8px 12px;font-size:.85rem;background:#0d1016;color:#f4f2ec;border-color:#3a424f}
#toast{position:absolute;left:50%;top:104px;transform:translateX(-50%);z-index:6;background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:2px;font-size:.9rem;pointer-events:none;max-width:80%}
.chips button{min-width:40px;min-height:44px;padding:6px 10px;font-family:var(--mono);font-size:.85rem}
button[aria-pressed="true"]{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qty{display:flex;gap:6px;align-items:center}
.qty button{min-width:44px;min-height:44px;font-family:var(--mono);font-size:1.1rem}
.qty input{font-family:var(--display);font-weight:900;font-size:1.7rem;width:62px;height:44px;padding:0;text-align:center;font-variant-numeric:tabular-nums;border:2px solid var(--num);color:var(--num)}
.sum{font-family:var(--mono);font-size:.76rem;font-variant-numeric:tabular-nums}
.sealed{border-left:3px solid var(--muted);padding:4px 0 4px 12px;margin:0;color:var(--muted);font-size:.95rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.so footer,body.so .tools,body.so .demo{display:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{border:1px solid var(--line);border-radius:2px;padding:8px 7px;display:grid;gap:2px;min-width:0}
.stats b{font-family:var(--display);font-weight:900;font-size:1.5rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats span{font-size:.66rem;overflow-wrap:anywhere;color:var(--muted)}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dots i{width:12px;height:12px;border:1.5px solid var(--line);box-sizing:border-box}
.dots i.on{background:var(--num);border-color:var(--num)}
.row{display:grid;gap:2px;text-align:left;width:100%}
.row span{font-size:.8rem;color:var(--muted)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.35;cursor:pointer;color:var(--muted)}
.chk b{color:var(--ink)}
.chk input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--accent)}
@media (max-width:640px){
  h1{font-size:2.1rem}
  #sheet{padding:14px 16px 0;max-height:88%}
  #sheet .in{gap:10px}
  #buy{position:sticky;bottom:0;margin:2px -16px 0;width:calc(100% + 32px);border-radius:0;box-shadow:0 -6px 14px rgba(0,0,0,.3);z-index:1}
  #f>.sub{padding-bottom:4px}
  .stat b{font-size:3rem}
  .chips{gap:5px;flex-wrap:nowrap}.chips button{min-width:36px;padding:6px 4px}.qty{gap:5px}.qty button{min-width:40px}.qty input{width:52px}
  #sheet.peek{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .demo{top:150px}.tools{top:150px}.buy>span{font-size:1.15rem;padding-left:14px}.buy>.tab{font-size:1.5rem;min-width:64px}
}

/* Preview: the stage slider is hidden unless the address has ?saadin=1 */
.sim{display:none}body.saadin .sim{display:flex}
.src{font-size:.7rem;color:var(--muted);padding-top:8px}
/* Purchase sheet: charity share in the sum line. Light theme blue (Baddy 9 Oct 2026); dark theme keeps the charity green. */
.sum .chs{color:var(--done);font-weight:600;white-space:nowrap}
:root[data-mj="light"] .sum .chs{color:var(--hl)}
/* Light theme: validation errors in brick red so they stand out from the blue labels (Baddy 9 Oct 2026). */
:root[data-mj="light"] .err{color:#b8432a;font-weight:500}
/* Menu sheet */
.menu{display:grid}
.menu a{display:grid;gap:1px;padding:13px 2px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);color:var(--ink);text-decoration:none}
.menu a b{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.menu a span{font-size:.8rem;color:var(--muted)}
.menu a:hover b,.menu a:focus-visible b{color:var(--hl)}
@media (max-width:640px){.acts{gap:6px}#sheet .menu{padding-bottom:10px}}