/* Slimage site. Layout: night inside the vault; one column of bands, each lit by an element colour;
   the game's own UI art (buttons, panels, bars) as border-images at whole-pixel scale. One look, dark on purpose. */
:root{
  --stone:#17121f; --stone2:#1f1829; --panel:#2a2238; --panel2:#352b47; --rule:#46395c;
  --ink:#f4ecff; --soft:#b9abcf; --gold:#f77622; --gold2:#ffd24a;
  --fire:#f77622; --ice:#4fb3ff; --wind:#63c74d; --shadow:#b388ff; --el:var(--gold);
  --page:#ecd9ae; --page-ink:#4a2f22; --page-rule:#c9a877;
  --display:"Fredoka","Trebuchet MS",Verdana,sans-serif;
  --body:"Nunito","Segoe UI",Helvetica,Arial,sans-serif;
  --pixel:"Pixelify Sans","Courier New",monospace;
  --spring:cubic-bezier(.3,1.7,.5,1);
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0;background:var(--stone);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden;
  background-image:radial-gradient(1200px 500px at 50% -80px,#2c2140 0,transparent 70%)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--stone)}
img,canvas{max-width:100%}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
a{color:var(--gold2)}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem)} h3{font-size:1.15rem}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{padding-block:56px}
.band.alt{background:var(--stone2);border-block:2px solid #120d19}
.stack{display:flex;flex-direction:column;gap:14px}
.lede{font-size:1.14rem;color:var(--soft);max-width:60ch}
.eyebrow{font:500 .82rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--el)}
.small{font-size:.9rem;color:var(--soft)}

/* lettering drawn from the game's bitmap faces */
.pxh{display:flex;flex-wrap:wrap;gap:0 calc(var(--s,2) * 5px);align-items:flex-end;line-height:0}
.pxw{width:calc(var(--w) * var(--s,2) * 1px);height:calc(var(--h) * var(--s,2) * 1px);flex:none}
h1.pxh{--s:1} h2.pxh{--s:1}
@media (min-width:1500px){h1.pxh{--s:2}}

/* buttons: the game's button art */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1 var(--display);color:#2b1608;text-decoration:none;cursor:pointer;
  border:solid transparent;border-width:15px 15px 18px;border-image:url(g/btn_gold.webp) 5 5 6 5 fill/15px 15px 18px;image-rendering:pixelated;
  background:none;padding:2px 12px;min-height:54px;transition:transform .18s var(--spring);-webkit-tap-highlight-color:transparent}
.btn span,.btn{text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn:hover{transform:translateY(-2px) scale(1.04,.97);border-image-source:url(g/btn_gold_hover.webp)}
.btn:active{transform:translateY(2px) scale(.97,1.03);border-image-source:url(g/btn_gold_pressed.webp)}
.btn.blue{color:#eaf4ff;text-shadow:0 1px 0 rgba(0,0,0,.4);border-image-source:url(g/btn_blue.webp)}
.btn.blue:hover{border-image-source:url(g/btn_blue_hover.webp)}
.btn.sm{border-width:10px 10px 12px;border-image-width:10px 10px 12px;min-height:38px;font-size:.92rem;padding:1px 8px}
.btn.ghost{border-image:none;border:2px dashed var(--rule);color:var(--soft);min-height:54px;padding:2px 16px;text-shadow:none;cursor:default}
.btn.ghost:hover{transform:none}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* panels */
.panel{border:solid transparent;border-width:14px;border-image:url(g/panel.webp) 7 fill/14px;image-rendering:pixelated;padding:8px 10px;min-width:0}
.panel>*{image-rendering:auto}
.cardy{background:var(--panel);border:2px solid #120d19;border-radius:10px;box-shadow:0 4px 0 #120d19;padding:18px;min-width:0}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(23,18,31,.94);border-bottom:2px solid #120d19;backdrop-filter:blur(6px)}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
.brand{display:block;text-decoration:none;color:var(--ink);font:600 1.3rem var(--display)}
.brand .pxh{--s:1}
.nav{display:flex;gap:2px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.nav a{font:500 .98rem var(--display);color:var(--soft);text-decoration:none;padding:8px 10px;border-radius:8px;transition:transform .18s var(--spring)}
.nav a:hover{color:var(--ink);transform:translateY(-2px)}
.nav a[aria-current=page]{color:#1c1226;background:var(--gold2)}
.xp{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:500 .85rem var(--pixel);padding:4px 6px;border-radius:8px}
.xp-l b{color:var(--gold2);font-size:1.05rem}
.xp-bar{display:block;width:132px;height:21px;border:solid transparent;border-width:0 9px;border-image:url(g/bar_under.webp) 0 3 fill/0 9px;image-rendering:pixelated;position:relative;background:url(g/bar_under.webp) center/100% 100% content-box}
.xp-bar i{position:absolute;left:-6px;top:0;bottom:0;width:0;min-width:0;max-width:calc(100% + 12px);border:solid transparent;border-width:0 9px;border-image:url(g/bar_fill_xp.webp) 0 3 fill/0 9px;transition:width .5s cubic-bezier(.2,.8,.2,1);box-sizing:content-box;margin-right:-12px}
.xp-pts{background:var(--gold);color:#2b1608;font:600 .78rem var(--display);padding:3px 8px;border-radius:99px;animation:pulse 1.2s infinite}
.xp.bump{animation:bump .35s var(--spring)}
.snd{background:none;border:2px solid var(--rule);color:var(--soft);font:500 .78rem var(--pixel);border-radius:8px;padding:6px 8px;cursor:pointer}
.snd[aria-pressed=true]{color:var(--gold2);border-color:var(--gold2)}
@keyframes bump{50%{transform:scale(1.12,.9)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@media (max-width:760px){.toasts{left:12px;right:12px;max-width:none}.hero-top .btns{display:none}}

.xpfly{position:fixed;z-index:80;pointer-events:none;font:600 .95rem var(--pixel);color:var(--gold2);text-shadow:0 2px 0 #120d19,0 0 8px rgba(255,210,74,.6);transform:translate(-50%,-50%)}
.lvlburst{position:fixed;z-index:79;pointer-events:none;transform:translate(-50%,-70%)}
.toasts{position:fixed;z-index:70;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 24px))}
.toast{display:flex;gap:10px;align-items:center;background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:6px;box-shadow:0 4px 0 #120d19;padding:8px 12px;font:500 .95rem/1.35 var(--body);animation:toast .35s var(--spring)}
.toast.out{opacity:0;transform:translateY(8px);transition:.35s}
.toast-link{color:#a3360c;font-weight:700}
@keyframes toast{from{transform:translateY(20px) scale(.9);opacity:0}}

/* reveal: visible by default; only elements below the fold get .pre */
.rise.pre{opacity:0;transform:translateY(22px)}
.rise.in{opacity:1;transform:none;transition:opacity .5s,transform .6s var(--spring);transition-delay:var(--d,0s)}

/* the room */
.room{position:relative;border:4px solid #0d0912;border-radius:10px;overflow:hidden;background:#0d0912;box-shadow:0 0 0 2px var(--rule),0 18px 50px rgba(0,0,0,.5);line-height:0}
.room canvas{width:100%;height:auto;display:block;image-rendering:pixelated;cursor:crosshair;touch-action:none}
.room.scrolly canvas{touch-action:pan-y}
.room canvas:focus-visible{outline-offset:-4px}
.coach{position:absolute;pointer-events:none;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;font:600 .95rem/1 var(--display);color:#2b1608;z-index:2}
.coach b{background:var(--gold2);padding:7px 11px;border-radius:99px;box-shadow:0 3px 0 #120d19;white-space:nowrap;animation:bob 1s infinite var(--spring)}
.coach i{width:34px;height:34px;border:3px solid var(--gold2);border-radius:50%;animation:ring 1.1s infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes ring{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}}
.palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pal-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pal-label{font:500 .74rem var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);flex-basis:100%}
.tool{--tc:#888;display:inline-flex;align-items:center;gap:8px;background:var(--panel);color:var(--ink);border:2px solid #120d19;border-bottom-width:5px;border-radius:10px;padding:6px 12px 6px 8px;font:600 .95rem var(--display);cursor:pointer;transition:transform .16s var(--spring);min-height:48px}
.tool:hover{transform:translateY(-2px)}
.tool[aria-pressed=true]{background:var(--tc);color:#16101f;transform:translateY(2px);border-bottom-width:3px;box-shadow:0 0 0 2px var(--ink)}
.tool .dot{width:22px;height:22px;border-radius:50%;border:2px solid #120d19;display:block}
.tool-material{border-radius:22px 22px 12px 12px}

/* hero */
.hero{padding-block:22px 40px}
.hero-top{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.hero-top .stack{gap:8px;flex:1 1 520px;min-width:0}
.hero-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-top:12px}
.hero-score{font:500 .9rem var(--pixel);color:var(--soft)}
.hero-score b{color:var(--gold2)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{--el:var(--fire);display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--el) 16%,var(--panel)) 0,var(--panel) 46%);border:2px solid #120d19;border-top:5px solid var(--el);border-radius:12px;padding:18px;box-shadow:0 5px 0 #120d19;min-width:0;transition:transform .2s var(--spring)}
.pillar:hover{transform:translateY(-5px) rotate(-.4deg)}
.pillar .stage{height:124px;display:flex;align-items:flex-end;justify-content:center;gap:10px;background:#0d0912 url(g/floor_catacombs.webp) 0 0/128px;image-rendering:pixelated;border-radius:8px;overflow:hidden;padding-bottom:10px;position:relative}
.pillar a.more{font:600 1rem var(--display);color:var(--el);text-decoration:none;margin-top:auto}
.pillar a.more:hover{text-decoration:underline}
.recipe{display:flex;align-items:center;gap:8px;font:600 .95rem var(--display);color:var(--ink);background:rgba(13,9,18,.82);padding:8px 12px;border-radius:99px;image-rendering:auto;margin-bottom:26px}
.recipe canvas{flex:none}
.walkers{display:flex;gap:6px;align-items:flex-end;animation:walk 9s linear infinite}
@keyframes walk{from{transform:translateX(-150%)}to{transform:translateX(150%)}}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.count{background:var(--panel);border:2px solid #120d19;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px}
.count b{font:600 2rem/1 var(--display);color:var(--gold2);font-variant-numeric:tabular-nums}
.count span{font:600 1rem var(--display)} .count small{color:var(--soft);font-size:.86rem;line-height:1.35}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.howto li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:2px solid #120d19;border-radius:10px;padding:12px 14px}
.howto b{font-family:var(--display);color:var(--wind);white-space:nowrap}
.party{display:flex;justify-content:center;align-items:flex-end;gap:18px;flex-wrap:wrap;background:#0d0912 url(g/floor_catacombs.webp) 0 0/192px;image-rendering:pixelated;border-radius:12px;border:4px solid #0d0912;box-shadow:0 0 0 2px var(--rule);padding:38px 12px 22px}
.party figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .2s var(--spring)}
.party figure:hover{transform:translateY(-6px) scale(1.05)}
.party figcaption{font:600 .9rem var(--display);image-rendering:auto;background:rgba(13,9,18,.8);padding:3px 10px;border-radius:99px}
.party .duo{display:flex;align-items:flex-end;gap:2px}
.closer{text-align:center;align-items:center}
.closer .btns{justify-content:center}
.book-says{display:flex;gap:14px;align-items:center;justify-content:center;background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:8px;padding:12px 18px;font:500 1.05rem/1.4 var(--body);max-width:620px;box-shadow:0 5px 0 #120d19;text-align:left}
footer.foot{padding-block:26px 40px;color:var(--soft);font-size:.88rem;border-top:2px solid #120d19}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer a{color:var(--soft)}

/* the Lab */
.lab-head{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.lab-tools{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:flex-start;margin-block:12px}
.lab-side{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.chip{background:none;border:2px solid var(--rule);color:var(--soft);font:600 .86rem var(--display);padding:7px 12px;border-radius:99px;cursor:pointer;transition:transform .16s var(--spring)}
.chip:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.chip[aria-pressed=true]{background:var(--shadow);border-color:var(--shadow);color:#16101f}
.meter{font:500 .95rem var(--pixel);color:var(--soft)} .meter b{color:var(--gold2);font-size:1.3rem}
.book{background:var(--page);color:var(--page-ink);border:4px solid #5a3a2a;border-radius:8px;padding:20px;box-shadow:0 6px 0 #120d19;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(120,80,40,.14) 31px 32px)}
.book h2{color:var(--page-ink)}
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.rc{display:grid;grid-template-columns:36px 1fr;gap:4px 10px;align-items:center;background:rgba(255,250,235,.55);border:2px solid var(--page-rule);border-radius:8px;padding:8px 10px;min-width:0;transition:transform .2s var(--spring)}
.rc canvas{grid-row:span 2}
.rc strong{font:600 1rem/1.15 var(--display)}
.rc small{font-size:.8rem;line-height:1.3;color:#74523a}
.rc.unknown{background:rgba(120,80,40,.1);border-style:dashed}
.rc.unknown canvas{filter:grayscale(1) brightness(.5) opacity(.45)}
.rc.unknown strong{color:#8a6a4a}
.rc.just{animation:found .7s var(--spring)}
.rc p{grid-column:1/-1;font-size:.84rem;line-height:1.35;margin-top:2px}
@keyframes found{0%{transform:scale(.8) rotate(-3deg);background:#ffe14a}}

/* Level Up */
.you{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.you-lvl{font:600 3.4rem/1 var(--display);color:var(--gold2)}
.you-bar{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.bigbar{height:28px;border:solid transparent;border-width:0 12px;border-image:url(g/bar_under.webp) 0 3 fill/0 12px;image-rendering:pixelated;position:relative}
.bigbar i{position:absolute;left:-12px;top:0;bottom:0;width:0;border:solid transparent;border-width:0 12px;border-image:url(g/bar_fill_xp.webp) 0 3 fill/0 12px;transition:width .5s cubic-bezier(.2,.8,.2,1);box-sizing:content-box;max-width:100%}
.dummy{display:flex;flex-direction:column;align-items:center;gap:4px;background:#0d0912 url(g/floor_catacombs.webp) 0 0/128px;image-rendering:pixelated;border:3px solid #0d0912;box-shadow:0 0 0 2px var(--rule);border-radius:12px;padding:10px 22px 8px;cursor:pointer;color:var(--ink);font:600 .86rem var(--display);transition:transform .12s var(--spring);touch-action:manipulation;user-select:none}
.dummy:active{transform:scale(.92,1.06)}
.dummy span{image-rendering:auto;background:rgba(13,9,18,.8);padding:2px 9px;border-radius:99px}
.tree{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:900px){.tree{grid-template-columns:1fr}}
.tree-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tree-tab{display:inline-flex;align-items:center;gap:8px;background:var(--panel);color:var(--soft);border:2px solid #120d19;border-bottom-width:4px;border-radius:10px;padding:4px 12px 4px 6px;font:600 .95rem var(--display);cursor:pointer;transition:transform .16s var(--spring)}
.tree-tab:hover{transform:translateY(-2px);color:var(--ink)}
.tree-tab[aria-selected=true]{background:var(--page);color:var(--page-ink)}
.tree-book{background:#5a3a6e;border-radius:10px;padding:10px;box-shadow:0 6px 0 #120d19;max-width:680px;margin-inline:auto;width:100%}
.tree-page{position:relative;aspect-ratio:1;max-width:100%;background:var(--page);border-radius:4px;overflow:hidden;
  background-image:repeating-linear-gradient(180deg,transparent 0 5.8%,rgba(120,80,40,.16) 5.8% 6%)}
.tree-lines{position:absolute;inset:0;width:100%;height:100%}
.tree-lines .ring{fill:none;stroke:color-mix(in srgb,var(--el) 50%,var(--page-rule));stroke-width:.25;opacity:.7}
.tree-lines .ln{stroke:#a98a66;stroke-width:.7;stroke-linecap:round;stroke-dasharray:1.2 1.2}
.tree-lines .ln.lit{stroke:var(--el);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:0;animation:ink .45s ease-out}
@keyframes ink{from{stroke-dashoffset:1}}
.tree-seal{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px var(--el))}
.tree-seal canvas{width:100%!important;height:100%!important}
.arm-name{position:absolute;font:600 clamp(.56rem,1.6vw,.8rem) var(--pixel);color:#6b4a35;white-space:nowrap;pointer-events:none;letter-spacing:.04em}
.node{position:absolute;width:7.6%;aspect-ratio:1;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;border-radius:50%;transition:transform .18s var(--spring),filter .2s}
.node.tip{width:9.4%}
.node:hover,.node:focus-visible{transform:translate(-50%,-50%) scale(1.22);z-index:3}
.node.locked{filter:saturate(.6)}
.node.ok{animation:glow 1.3s infinite;border-radius:50%}
.node.got{filter:drop-shadow(0 0 5px var(--el))}
.node.sel{outline:2px solid #5a3a2a;outline-offset:2px}
.node.pop{animation:take .5s var(--spring)}
@keyframes glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--el) 60%,transparent),0 0 16px var(--el)}}
@keyframes take{0%{transform:translate(-50%,-50%) scale(1.9) rotate(-18deg)}}
.stamp{position:absolute;right:-12%;bottom:-12%;min-width:42%;aspect-ratio:1;background:#8a1c1c;color:#fff2d6;border-radius:50%;font:700 clamp(.5rem,1.3vw,.72rem)/1 var(--pixel);display:grid;place-items:center;font-style:normal;transform:rotate(-12deg);box-shadow:0 1px 0 #120d19}
.tree-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.tree-pts{font:600 1.05rem var(--display);background:var(--panel);border:2px solid #120d19;border-radius:10px;padding:10px 14px;text-align:center}
.tree-pts.has{background:var(--gold);color:#2b1608;animation:pulse 1.4s infinite}
.tree-card{background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:8px;padding:14px;min-height:170px;display:flex;flex-direction:column;gap:10px;box-shadow:0 5px 0 #120d19}
.card-top{display:flex;gap:10px;align-items:center}
.card-top strong{display:block;font:600 1.15rem var(--display)} .card-top span{font:500 .78rem var(--pixel);color:#74523a}
.card-act{margin-top:auto}.why{font-size:.88rem;color:#8a3a1c;font-weight:600}
.tree-hint{color:#74523a}
.tree-ctl{display:flex;flex-wrap:wrap;gap:8px}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rule{background:var(--panel);border:2px solid #120d19;border-left:5px solid var(--el);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:6px}
.rule b{font:600 1.7rem/1 var(--display);color:var(--el)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise.pre{opacity:1;transform:none}
  .walkers{transform:none}
}

.lvl-wrap{position:relative;display:flex;align-items:flex-end}
.lvl-wrap .actor{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);pointer-events:none}
.lab-tools{flex-wrap:wrap}
.lab-tools>.pal-group{flex:0 1 auto}
@media (min-width:900px){.lab-head{margin-bottom:4px}.lab-tools{margin-block:6px 10px}}
.toasts{pointer-events:none}.toast-link{pointer-events:auto}
@media (max-width:760px){.toast{font-size:.88rem;padding:6px 10px;opacity:.96}}

.lab-stage{display:flex;flex-direction:column}
@media (max-width:760px){
  .lab-stage .lab-tools{order:2;gap:6px;margin-block:10px 0}
  .lab-tools .pal-label{display:none}
  .lab-tools>.pal-group,.lab-tools .pal-group{gap:6px}
  .tool{min-height:42px;padding:4px 9px 4px 5px;font-size:.84rem;gap:5px}
  .tool canvas{width:24px!important;height:24px!important}
  .tool .dot{width:18px;height:18px}
  .lab-head .lede{font-size:1rem}
  .hero{padding-block:14px 30px}
}

/* mobile header: a real menu */
.menu-btn{display:none;background:var(--panel);border:2px solid var(--rule);color:var(--ink);font:600 .86rem var(--display);border-radius:8px;padding:8px 12px;cursor:pointer;min-height:40px}
.xp-pts b{font-weight:600}
@media (max-width:760px){
  .menu-btn{display:block;order:3}
  .top-in{flex-wrap:wrap}
  .brand{order:1}.xp{order:2;margin-left:auto;padding:4px 0}.xp-bar{width:64px}
  .top-cta{display:none;order:6;margin-left:0}
  .nav{display:none;order:4;flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;overflow:visible;margin-left:0;gap:4px;padding-block:6px 4px}
  .nav a{padding:12px 12px;font-size:1.05rem;background:var(--panel);border-radius:8px;white-space:normal}
  .snd{display:none;order:5;min-height:40px}
  .top.open .nav{display:flex}.top.open .snd,.top.open .top-cta{display:block}
  .top.open .top-in{padding-bottom:12px}
  .xp-pts{font-size:.78rem;padding:3px 7px;width:auto;height:auto}.xp-pts span{display:none}
}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer.foot .wrap{align-items:center}

/* Mages */
.roster{display:flex;flex-wrap:wrap;gap:8px}
.ros{display:inline-flex;align-items:center;gap:8px;background:var(--panel);color:var(--soft);border:2px solid #120d19;border-bottom-width:4px;border-radius:10px;padding:5px 12px 5px 6px;font:600 .95rem var(--display);cursor:pointer;transition:transform .16s var(--spring);min-height:44px}
.ros:hover{transform:translateY(-2px);color:var(--ink)}
.ros[aria-selected=true]{background:var(--el);color:#16101f;box-shadow:0 0 0 2px var(--ink)}
.ros.lock canvas{filter:brightness(0) opacity(.55)}
.mg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.mg{grid-template-columns:1fr}}
.mg-stage{position:relative;height:340px;border:4px solid #0d0912;border-radius:10px;overflow:hidden;background:#0d0912 url(g/floor_catacombs.webp) 0 0/256px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--rule),0 18px 50px rgba(0,0,0,.5);position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px)}
.mg-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 60%,color-mix(in srgb,var(--el) 22%,transparent),transparent 70%);pointer-events:none}
.mg-stage canvas{position:absolute;bottom:var(--b,70px);left:var(--x,50%);transform:translateX(-50%);max-width:none}
.mg-stage.lock .who{filter:brightness(0) opacity(.75)}
.mg-plaque{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:2;background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:6px;padding:8px 14px;font:600 .95rem/1.3 var(--body);image-rendering:auto;max-width:86%;text-align:center;box-shadow:0 4px 0 #120d19}
@media (max-width:900px){.mg-stage{height:250px;position:relative;top:0;background-size:192px}}
.mg-sheet{display:flex;flex-direction:column;gap:12px;min-width:0}
.mg-id{display:flex;gap:12px;align-items:center}
.mg-id h2{font-size:1.7rem}
.kit{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.kitb{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 12px;align-items:center;text-align:left;width:100%;background:var(--panel);color:var(--ink);border:2px solid #120d19;border-left:5px solid var(--el);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;transition:transform .16s var(--spring)}
button.kitb:hover{transform:translateX(4px)}
button.kitb:active{transform:scale(.98,1.03)}
.kitb canvas,.kitb .slot{grid-row:span 2}
.kitb .slot{width:48px;height:48px;border-radius:8px;background:var(--stone2);display:grid;place-items:center;font:600 .7rem var(--pixel);color:var(--el)}
.kitb strong{font:600 1.05rem/1.2 var(--display)}
.kitb strong small{font:500 .72rem var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--el);margin-left:8px}
.kitb span.tip{font-size:.9rem;line-height:1.4;color:var(--soft)}
div.kitb{cursor:default}
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pair{background:var(--panel);border:2px solid #120d19;border-top:5px solid var(--el);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 5px 0 #120d19;min-width:0}
.pair .duo{display:flex;align-items:flex-end;gap:4px;height:100px}
.pair .eq{display:flex;align-items:center;gap:8px;font:600 1.05rem var(--display)}
.plaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.plq{display:flex;gap:12px;align-items:center;background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:8px;padding:10px 12px;box-shadow:0 4px 0 #120d19;min-width:0}
.plq canvas{flex:none}
.plq.lock canvas{filter:brightness(0) opacity(.7)}
.plq strong{display:block;font:600 1rem var(--display)} .plq span{font-size:.88rem;line-height:1.35}

/* The Vault */
.runline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:st}
.runline li{counter-increment:st;display:flex;align-items:center;gap:8px;background:var(--panel);border:2px solid #120d19;border-radius:99px;padding:6px 14px 6px 6px;font:600 .92rem var(--display)}
.runline li::before{content:counter(st);width:26px;height:26px;border-radius:50%;background:var(--gold2);color:#1c1226;display:grid;place-items:center;font:600 .8rem var(--pixel)}
.vault{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 26px;max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);align-self:start;display:flex;flex-direction:column;gap:0;padding-block:20px}
.rail-line{position:absolute;left:9px;top:30px;bottom:30px;width:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.rail-line i{display:block;width:100%;height:0;background:var(--gold2)}
.rail a{position:relative;display:flex;align-items:center;gap:10px;padding-block:22px;text-decoration:none;color:var(--soft);font:600 .92rem var(--display)}
.rail a::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--stone);border:4px solid var(--rule);flex:none;z-index:1;transition:transform .2s var(--spring)}
.rail a.on{color:var(--ink)}.rail a.on::before{border-color:var(--el);background:var(--el);transform:scale(1.2)}
@media (max-width:1000px){.vault{grid-template-columns:minmax(0,1fr)}.rail{display:none}}
.floors{display:flex;flex-direction:column;gap:0;min-width:0}
.floor{display:flex;flex-direction:column;gap:18px;padding-block:34px}
.floor-room{position:relative;height:210px;border:4px solid #0d0912;border-radius:10px;overflow:hidden;background:#0d0912 var(--tile) 0 0/256px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--rule),0 14px 40px rgba(0,0,0,.45)}
.floor-room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,20,.5),transparent 40%),radial-gradient(50% 90% at 50% 100%,color-mix(in srgb,var(--el) 20%,transparent),transparent);pointer-events:none}
.floor-room h2{position:absolute;left:16px;top:14px;z-index:2;image-rendering:pixelated}
.floor-room .tag{position:absolute;right:14px;top:14px;z-index:2;font:500 .8rem var(--pixel);letter-spacing:.12em;text-transform:uppercase;background:rgba(13,9,18,.8);color:var(--el);padding:5px 10px;border-radius:99px;image-rendering:auto}
.foe{position:absolute;bottom:var(--b,18px);left:var(--x,50%);background:none;border:0;padding:0;cursor:pointer;z-index:1;animation:patrol var(--t,7s) linear infinite;animation-delay:var(--dl,0s);line-height:0}
.foe canvas{max-width:none;transition:transform .15s var(--spring)}
.foe:hover canvas,.foe:focus-visible canvas{transform:scale(1.15)}
@keyframes patrol{0%{transform:translateX(0) scaleX(1)}48%{transform:translateX(var(--d,70px)) scaleX(1)}50%{transform:translateX(var(--d,70px)) scaleX(-1)}98%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
.floor-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:800px){.floor-body{grid-template-columns:1fr}}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:var(--panel);border:2px solid #120d19;border-radius:8px;padding:6px 12px;font:600 .9rem var(--display)}
.facts b{color:var(--el)}
.shot{display:block;width:100%;height:auto;border-radius:8px;border:3px solid #0d0912;box-shadow:0 0 0 2px var(--rule);aspect-ratio:16/9;object-fit:cover;background:var(--stone2)}
.boss{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--el) 18%,var(--panel)),var(--panel) 60%);border:2px solid #120d19;border-left:6px solid var(--el);border-radius:12px;padding:16px;box-shadow:0 5px 0 #120d19}
.boss .lair{width:200px;height:200px;display:grid;place-items:center;background:#0d0912 var(--tile) 0 0/128px;image-rendering:pixelated;border-radius:10px;overflow:hidden}
.boss .lair canvas{max-width:none}
.boss .stack{image-rendering:auto;min-width:0}
@media (max-width:640px){.boss{grid-template-columns:1fr}.boss .lair{width:100%;height:170px}}
details.spoil{background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:8px;padding:0 12px}
details.spoil summary{cursor:pointer;font:600 .95rem var(--display);padding:10px 0;min-height:44px;display:flex;align-items:center;gap:8px}
details.spoil p{padding-bottom:12px;font-size:.95rem;display:flex;gap:10px;align-items:center}
.stairs{display:flex;align-items:center;gap:14px;color:var(--soft);font:500 .86rem var(--pixel);letter-spacing:.1em;text-transform:uppercase}
.stairs::before,.stairs::after{content:"";flex:1;height:0;border-top:4px dashed var(--rule)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.game{background:var(--panel);border:2px solid #120d19;border-radius:12px;overflow:hidden;box-shadow:0 5px 0 #120d19;display:flex;flex-direction:column;transition:transform .2s var(--spring);min-width:0}
.game:hover{transform:translateY(-5px) rotate(.5deg)}
.game:nth-child(even):hover{transform:translateY(-5px) rotate(-.5deg)}
.game img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone2)}
.game div{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.game .win{font:600 .86rem var(--display);color:var(--wind)}
.game .who{font:500 .74rem var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}

/* Play */
.build{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:2px solid #120d19;border-top:5px solid var(--gold);border-radius:12px;padding:20px;box-shadow:0 5px 0 #120d19}
.build .id{font:500 .86rem var(--pixel);color:var(--soft)}
.dl{display:flex;flex-wrap:wrap;gap:12px}
.dl .btn{flex-direction:column;gap:3px;min-height:64px;padding-inline:18px}
.dl .btn small{font:500 .72rem var(--pixel);opacity:.8}
.install{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.install details{background:var(--stone2);border:2px solid var(--rule);border-radius:10px;padding:0 14px}
.install summary,.faq summary{cursor:pointer;font:600 1rem var(--display);min-height:48px;display:flex;align-items:center}
.install ol{margin:0;padding:0 0 12px 20px;display:flex;flex-direction:column;gap:6px;font-size:.93rem;color:var(--soft)}
.install code{font:500 .86rem var(--pixel);background:#0d0912;padding:2px 6px;border-radius:4px;color:var(--ink);overflow-wrap:anywhere}
.notes{display:flex;flex-direction:column;gap:16px}
.note{background:var(--page);color:var(--page-ink);border:4px solid #5a3a2a;border-radius:8px;box-shadow:0 6px 0 #120d19;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px;align-items:start}
.note.old{grid-template-columns:1fr;padding:0 18px;box-shadow:0 4px 0 #120d19}
.note.old summary{cursor:pointer;min-height:52px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:600 1.05rem var(--display)}
.note.old summary small,.note .when{font:500 .76rem var(--pixel);color:#74523a;letter-spacing:.06em}
.note.old ul{padding-bottom:16px}
.note h3{font-size:1.3rem;color:var(--page-ink)}
.note ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.note li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;font-size:.95rem;line-height:1.4}
.note li i{font:600 .7rem/1 var(--pixel);font-style:normal;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:5px 4px;border-radius:4px;background:#5a3a2a;color:#fff2d6;align-self:start}
.note li i.New{background:#2f6b2a}.note li i.Changed{background:#8a5a16}.note li i.Fixed{background:#3d4f8a}
.note li em{display:block;font-style:normal;font-size:.88rem;color:#8a3a1c;margin-top:3px}
.note img{width:100%;height:auto;border-radius:6px;border:3px solid #5a3a2a;aspect-ratio:16/9;object-fit:cover}
@media (max-width:760px){.note{grid-template-columns:1fr}.note li{grid-template-columns:1fr;gap:4px}.note li i{justify-self:start;padding-inline:8px}}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.next{grid-template-columns:1fr}}
.next section{background:var(--panel);border:2px solid #120d19;border-top:5px solid var(--el);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.next h3{color:var(--el)}
.next ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.next li{font-size:.95rem;line-height:1.4}
.next li b{display:block;font:500 .72rem var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.faq{display:flex;flex-direction:column;gap:8px;max-width:760px}
.faq details{background:var(--page);color:var(--page-ink);border:3px solid #5a3a2a;border-radius:8px;padding:0 14px}
.faq p{padding-bottom:14px}

/* Press */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:start}
@media (max-width:860px){.sheet{grid-template-columns:1fr}}
.factsheet{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;background:var(--panel);border:2px solid #120d19;border-radius:10px;padding:18px}
.factsheet dt{font:500 .78rem var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding-top:3px}
.factsheet dd{margin:0;font-weight:600}
.copyblock{background:var(--stone2);border:2px solid var(--rule);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.copyblock p{max-width:65ch}
.pressgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pressgrid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.pressgrid a{display:block;line-height:0}
.pressgrid figcaption{font-size:.86rem;color:var(--soft)}
.sprites{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;background:#0d0912 url(g/floor_catacombs.webp) 0 0/192px;image-rendering:pixelated;border-radius:12px;border:4px solid #0d0912;box-shadow:0 0 0 2px var(--rule);padding:28px 18px 18px;justify-content:center}
.wordmark{background:var(--stone2);border:2px solid var(--rule);border-radius:10px;padding:26px;display:grid;place-items:center}
.wordmark .pxh{--s:3}
@media (max-width:520px){.wordmark .pxh{--s:2}}
@media (prefers-reduced-motion:reduce){.foe{animation:none!important}}

/* slimes wandering along the footer's top edge */
footer.foot{position:relative}
.ledge{position:absolute;left:0;right:0;bottom:100%;height:100px;overflow:hidden;pointer-events:none;z-index:2}
.ledge>canvas{position:absolute;left:0;bottom:0;max-width:none}
.wslime{position:absolute;left:0;bottom:0;background:none;border:0;padding:0;line-height:0;cursor:pointer;pointer-events:auto;will-change:transform;-webkit-tap-highlight-color:transparent}
.wslime canvas{max-width:none;display:block;transform-origin:50% 100%}
.wslime:hover canvas{transform:scale(1.1)}
.wslime canvas.hop{animation:hop .5s var(--spring)}
@keyframes hop{35%{transform:translateY(-18px) scale(.9,1.12)}70%{transform:translateY(0) scale(1.12,.88)}}