/* Layout: full-bleed cel-shaded 3D canvas; HUD pinned to the corners like seals on a scroll; action bar along the bottom edge; menus hang as one scroll on the left; shop, levels and settings are ledgers. Single look by choice. */
:root{
  color-scheme:dark;
  --sumi:#14121a; --washi:#f3e9d6; --beni:#c8402f; --kin:#e2b25a; --ai:#2c4a78;
  --mist:rgba(20,18,26,.74); --panel:rgba(20,18,26,.94); --line:rgba(243,233,214,.22); --dim:rgba(243,233,214,.6); --tint:rgba(200,64,47,.16);
  --display:"Shippori Mincho","Yu Mincho",Georgia,serif;
  --body:"Zen Kaku Gothic New","Segoe UI",system-ui,sans-serif;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--sumi);color:var(--washi);font-family:var(--body);overflow:hidden;user-select:none;-webkit-user-select:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.fx{position:fixed;inset:0;pointer-events:none}
#cine{background:radial-gradient(ellipse at center,transparent 58%,var(--sumi) 150%);opacity:.75}
#vig{opacity:0;background:radial-gradient(ellipse at center,transparent 45%,var(--beni) 130%)}
#flash{opacity:0;background:var(--washi)}
#speed{opacity:0;transition:opacity .12s;background:repeating-conic-gradient(from 0deg,transparent 0 2.1deg,var(--washi) 2.3deg 2.6deg,transparent 2.8deg 5.5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 36%,#000 85%);mask-image:radial-gradient(circle,transparent 36%,#000 85%)}
#speed.on{opacity:.5}
.hud{position:fixed;pointer-events:none;text-shadow:0 1px 3px var(--sumi)}
#tl{top:calc(16px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));width:min(17rem,44vw);display:flex;flex-direction:column;gap:5px}
#tl .name{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.04em}
#tl .name span{color:var(--kin);margin-right:.4em}
.bar{height:13px;background:var(--mist);border:1px solid var(--line);transform:skewX(-14deg)}
.bar i{display:block;height:100%;width:100%;background:var(--beni);transition:width .15s}
.bar.st{height:5px;width:60%}
.bar.st i{background:var(--kin);transition:none}
#wname{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
#tr{top:calc(16px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));text-align:right;display:flex;flex-direction:column;gap:2px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
#tr b{font-family:var(--display);font-size:1.4rem;color:var(--kin);margin-right:.3em;font-variant-numeric:tabular-nums;letter-spacing:0}
#tr .mon b{font-size:1.9rem;color:var(--washi)}
#obj{top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(30rem,calc(100vw - 2*min(18rem,46vw) - 24px));min-width:11rem;background:var(--mist);border-top:3px solid var(--kin);padding:7px 14px 9px;text-align:center}
#obj small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--kin)}
#objt{font-size:.9rem;line-height:1.35;text-wrap:balance}
#nav{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--kin)}
#arrow{display:inline-block;font-size:1rem;line-height:1}
#combo{top:30%;right:max(20px,env(safe-area-inset-right,0px));font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.2em;text-align:right;color:var(--kin);opacity:0;transform:skewX(-10deg);transition:opacity .3s}
#combo b{display:block;font-size:3.4rem;line-height:1;color:var(--washi);letter-spacing:0}
#combo.on{opacity:1}
#combo.hit b{animation:pop .18s}
@keyframes pop{from{transform:scale(1.5)}to{transform:scale(1)}}
#banner{top:24%;left:0;right:0;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(2rem,7vw,4.2rem);letter-spacing:.2em;opacity:0;transition:opacity .5s}
#banner.on{opacity:1}
#intro{top:50%;left:50%;transform:translate(-50%,-50%);width:min(30rem,calc(100vw - 32px));background:var(--panel);border-left:4px solid var(--beni);padding:18px 22px;opacity:0;transition:opacity .6s}
#intro.on{opacity:1}
#intro small{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--kin)}
#intro h2{font-family:var(--display);font-weight:800;font-size:2rem;margin:.1em 0 .4em}
#intro ol{margin:0;padding-left:1.3em;font-size:.92rem;line-height:1.5;display:flex;flex-direction:column;gap:3px}
#tech{bottom:28%;left:0;padding:.3em 2.2em .3em max(24px,env(safe-area-inset-left,0px));background:linear-gradient(90deg,var(--beni),transparent);font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,4vw,2.2rem);letter-spacing:.14em;transform:translateX(-110%) skewX(-12deg)}
#tech span{color:var(--kin);margin-right:.5em;font-size:1.3em}
#tech.on{animation:tech 1.1s cubic-bezier(.2,.9,.2,1)}
@keyframes tech{0%{transform:translateX(-110%) skewX(-12deg)}18%,75%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(-110%) skewX(-12deg)}}
#bar{bottom:calc(12px + env(safe-area-inset-bottom,0px));left:0;right:0;display:flex;justify-content:center;gap:5px;padding:0 8px}
#bar::before{content:"";position:absolute;inset:-6px auto -6px 50%;width:min(31rem,100%);transform:translateX(-50%);background:var(--mist);border-top:2px solid var(--kin);z-index:-1}
.slot{position:relative;width:52px;height:52px;flex:0 1 52px;min-width:34px;background:var(--sumi);border:2px solid var(--line);display:grid;place-items:center;overflow:hidden}
.slot .ic{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
.slot .ky{position:absolute;top:1px;right:3px;font-size:.62rem;font-weight:700;color:var(--kin)}
.slot .nm{position:absolute;bottom:1px;left:0;right:0;font-size:.48rem;text-align:center;letter-spacing:.02em;white-space:nowrap;overflow:hidden;opacity:.85}
.slot .cdv{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--sumi);opacity:.84}
.slot.empty{opacity:.45}
#prompt{bottom:calc(96px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-weight:700;letter-spacing:.06em}
#prompt span{background:var(--mist);border:1px solid var(--kin);padding:.45em 1.1em}
#prompt kbd{font-family:var(--body);color:var(--kin)}
#pops{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;left:0;top:0;font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--kin);text-shadow:0 2px 0 var(--sumi),0 0 6px var(--sumi);white-space:nowrap;will-change:transform}
.pop.say{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--sumi);background:var(--washi);padding:.3em .8em;border-radius:1em;text-shadow:none;white-space:normal;max-width:17rem;text-align:center;line-height:1.3}
.pop.alert{color:var(--beni);font-size:2.2rem}
#menu{position:fixed;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,var(--mist),transparent 78%);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow:auto}
.scroll{margin-left:clamp(0px,6vw,90px);max-width:26rem;display:flex;flex-direction:column;gap:12px;padding-block:20px;border-left:3px solid var(--beni);padding-left:22px}
.kanji{font-family:var(--display);font-size:1.3rem;letter-spacing:.5em;color:var(--kin);margin:0}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,8vw,4rem);line-height:1;margin:0;text-wrap:balance;letter-spacing:.02em}
.sub{margin:0;line-height:1.55;font-size:.98rem;max-width:36ch}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding-left:6px}
.btn{font:800 1.05rem var(--display);letter-spacing:.12em;color:var(--washi);background:var(--beni);border:0;padding:.6em 1.6em;cursor:pointer;transform:skewX(-10deg)}
.btn.alt{background:transparent;border:1px solid var(--line);font-size:.92rem}
.btn:hover{background:var(--kin);color:var(--sumi)}
.btn:focus-visible,.item:focus-visible,.ctl:focus-visible{outline:3px solid var(--washi);outline-offset:3px}
.note{font-size:.76rem;opacity:.7;margin:0}
.sheet{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--mist);overflow:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px}
.ledger{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--beni);width:min(66rem,100%);max-height:100%;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.ledger header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.ledger h2{font-family:var(--display);font-weight:800;font-size:1.8rem;margin:0;flex:1;min-width:12rem}
.ledger h2 span{color:var(--kin);margin-right:.4em}
.purse{font-family:var(--display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.purse small{font-family:var(--body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kin);margin-left:.4em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:18px}
.cols section{display:flex;flex-direction:column;gap:8px;min-width:0}
.cols h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--kin);margin:0;font-weight:700}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:3.3rem 1fr auto;gap:2px 10px;align-items:center;text-align:left;background:transparent;border:1px solid var(--line);color:var(--washi);font:inherit;padding:9px 10px;cursor:pointer;min-width:0}
.item .jp{grid-row:span 2;font-family:var(--display);font-size:1.4rem;color:var(--kin);text-align:center;white-space:nowrap}
.item .nm{font-weight:700}
.item .ds{grid-column:2;font-size:.76rem;color:var(--dim);line-height:1.35}
.item .pr{grid-row:1/span 2;grid-column:3;font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.item:hover:not(:disabled){border-color:var(--kin)}
.item.eq{border-color:var(--beni);background:var(--tint)}
.item.own .pr{color:var(--kin);font-family:var(--body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.item:disabled{opacity:.42;cursor:default}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:.9rem;min-height:2.2rem}
.row.three{grid-template-columns:3.4rem 1fr auto}
.ctl{font:inherit;color:var(--washi);background:var(--sumi);border:1px solid var(--line);padding:.35em .7em;min-width:5.5rem;text-align:center;cursor:pointer}
.ctl.wait{border-color:var(--kin);color:var(--kin)}
select.ctl{text-align:left;min-width:0;width:100%}
input[type=range]{accent-color:var(--beni);width:9rem}
input[type=checkbox]{accent-color:var(--beni);width:1.2rem;height:1.2rem}
@media (max-width:640px){#obj{display:none}.slot .nm{display:none}}