/* Layout: full-bleed 3D shop; HUD floats inside the safe gutter. Status strip on top, hands + prompt + Use along the bottom; sheets slide in from the right (from the bottom on phones). */
/* elements toggled with the hidden attribute must stay hidden even when a rule below gives them a display value */
[hidden]{display:none!important}
:root{
  --ink:#1b1410;
  --ink-2:#271d17;
  --panel:rgba(27,20,16,.86);
  --line:rgba(247,239,226,.14);
  --paper:#f7efe2;
  --muted:#bdae99;
  --butter:#f2c14e;
  --mint:#86d6b5;
  --tomato:#ef6b4d;
  --teal:#2b6c66;
  --card:#fffaf0;
  --card-ink:#2a1f19;
  --f-display:'Shrikhand', Georgia, 'Times New Roman', serif;
  --f-ui:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-num:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: dark;
}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-ui);font-size:14px;line-height:1.4;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
button{font:inherit}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px))}
#hud button,#hud .hold{pointer-events:auto}
.top{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-size:22px;color:var(--butter);text-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap;margin-right:4px}
.stats{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:flex;align-items:baseline;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.chip .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}
.chip b{font-weight:600;font-size:15px}
.chip .star{color:var(--butter)}
.chip.neg b{color:var(--tomato)}
.chip.closing b{color:var(--butter)}
.ctrls{margin-left:auto;display:flex;gap:6px}
.tb{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--paper);display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tb svg{width:17px;height:17px;flex:none}
.tb:hover{border-color:rgba(242,193,78,.55)}
.tb[aria-pressed="true"]{background:var(--butter);color:var(--ink);border-color:var(--butter)}
.tb.sq{width:38px;padding:0;justify-content:center}
button:focus-visible{outline:2px solid var(--butter);outline-offset:2px}

.bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px}
.hold{justify-self:start;display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 14px 8px 8px;max-width:360px;min-width:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hold .txt{min-width:0}
.hold .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}
.hold .nm{font-weight:800;font-size:15px}
.hold .hint{color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:1px}
.ic{display:inline-block;width:28px;height:28px;background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:middle;flex:none}
.ic.sm{width:22px;height:22px}
.ic.big{width:54px;height:54px;border-radius:13px;background-color:rgba(247,239,226,.07)}
.ic.big.empty{background-image:none;border:2px dashed rgba(247,239,226,.22);box-sizing:border-box}
.prompt{justify-self:center;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;font-weight:700;font-size:14px;max-width:min(520px,92vw);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .15s}
.prompt[data-empty="true"]{opacity:0}
.prompt kbd{font-family:var(--f-num);font-size:12px;background:var(--butter);color:var(--ink);border-radius:7px;padding:3px 8px;font-weight:500}
.prompt.fail kbd{background:rgba(247,239,226,.18);color:var(--paper)}
.prompt.fail span{color:var(--muted);font-weight:600}
.use{justify-self:end;appearance:none;border:0;width:76px;height:76px;border-radius:50%;background:var(--butter);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 0 #b98d2c,0 10px 24px rgba(0,0,0,.35);transition:transform .08s}
.use:active{transform:translateY(4px);box-shadow:0 2px 0 #b98d2c,0 6px 14px rgba(0,0,0,.35)}
.use small{display:block;font-family:var(--f-num);font-size:10px;font-weight:500;opacity:.7}
#toasts{position:fixed;left:50%;bottom:calc(118px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(560px,calc(100% - 32px))}
.toast{background:var(--card);color:var(--card-ink);font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.3);animation:tin .2s ease-out;text-align:center;transition:opacity .35s,transform .35s}
.toast.out{opacity:0;transform:translateY(6px)}
.toast.good{background:var(--mint)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#pausedBanner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:34px;color:var(--butter);text-shadow:0 3px 0 rgba(0,0,0,.45);pointer-events:none}

@media (max-width:700px){
  .brand{display:none}
  .tb .t{display:none}
  .tb{width:38px;padding:0;justify-content:center}
  .chip{padding:6px 10px}
  .chip .k{display:none}
  .bottom{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"prompt prompt" "hold use"}
  .prompt{grid-area:prompt;justify-self:center;font-size:13px}
  .hold{grid-area:hold}
  .hold .hint{display:none}
  .use{grid-area:use;width:68px;height:68px}
  #toasts{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* ---------- world labels ---------- */
.wl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:4px;will-change:transform;white-space:nowrap}
.wl .nm{font-size:11.5px;font-weight:800;background:var(--butter);color:var(--ink);padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.wl .nm.dim{background:rgba(27,20,16,.78);color:var(--paper);font-weight:700}
.wl .row{display:flex;gap:4px;align-items:center}
.pill{font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(27,20,16,.82);color:var(--paper);border:1px solid var(--line)}
.pill.ok{background:var(--mint);color:#13302a;border-color:transparent}
.pill.warn{background:var(--butter);color:var(--ink);border-color:transparent}
.pill.bad{background:var(--tomato);color:#fff;border-color:transparent}
.pulse{animation:pulse .6s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.ring{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--butter) calc(var(--p)*1%), rgba(27,20,16,.75) 0);-webkit-mask:radial-gradient(circle,transparent 6px,#000 7px);mask:radial-gradient(circle,transparent 6px,#000 7px);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.tray{display:flex;gap:2px;background:rgba(27,20,16,.8);border:1px solid var(--line);border-radius:10px;padding:3px 5px}
.stk{display:flex;align-items:center;gap:1px;font-family:var(--f-num);font-size:12px;color:var(--paper)}
.stk b{font-weight:500;min-width:.8em}
.bub{background:var(--card);border-radius:14px;padding:5px 7px 6px;box-shadow:0 6px 16px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:4px;position:relative}
.bub::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--card);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bub .needs{display:flex;gap:3px}
.bub .ic{width:30px;height:30px}
.bub .ic.done{opacity:.28;filter:grayscale(1)}
.bub.inline{transform:scale(.82);transform-origin:50% 100%;opacity:.92}
.bar{height:5px;border-radius:5px;background:#e8dccb;overflow:hidden;position:relative;z-index:1}
.bar b{display:block;height:100%;border-radius:5px;transition:width .3s linear}
.bar b.hi{background:#3fae84}.bar b.mid{background:#e2a92b}.bar b.lo{background:#e2553f}
.say{font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--card);color:var(--card-ink);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.say.ok{background:var(--mint);color:#13302a}
.say.bad{background:var(--tomato);color:#fff}
.wt{display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(27,20,16,.72);border-radius:9px;padding:2px 8px 3px;font-size:11px}
.wt b{color:var(--butter);font-weight:800}
.wt em{font-style:normal;color:var(--paper);opacity:.85}
.floaty{position:absolute;left:0;top:0;font-family:var(--f-num);font-weight:500;font-size:16px;color:var(--butter);text-shadow:0 2px 0 rgba(0,0,0,.55);animation:floaty 1.2s ease-out forwards;pointer-events:none}
@keyframes floaty{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -46px}}

/* ---------- sheets & modals ---------- */
.sheet{position:fixed;z-index:20;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));right:max(16px, env(safe-area-inset-right,0px));width:min(450px,calc(100% - 32px));background:var(--ink-2);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:sin .22s ease-out;-webkit-user-select:text;user-select:text}
@keyframes sin{from{opacity:0;transform:translateX(24px)}}
.sheet header.hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:26px;margin:0;color:var(--butter)}
.sheet .body{overflow:auto;padding:14px 18px 20px;display:flex;flex-direction:column;gap:12px;touch-action:pan-y;overscroll-behavior:contain}
@media (max-width:700px){
  .sheet{top:auto;left:max(16px, env(safe-area-inset-left,0px));right:max(16px, env(safe-area-inset-right,0px));width:auto;max-height:78%;animation-name:sup}
  @keyframes sup{from{opacity:0;transform:translateY(24px)}}
}
.x{appearance:none;border:1px solid var(--line);background:transparent;color:var(--paper);border-radius:999px;height:34px;padding:0 14px;font-weight:700;cursor:pointer}
.rec{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:9px;background:rgba(247,239,226,.03)}
.rec header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rec h3{margin:0;font-size:16px;font-weight:800}
.rec .price{color:var(--butter);font-size:14px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chain .grp{display:flex;gap:2px;background:var(--card);border-radius:10px;padding:3px}
.chain .grp .ic{width:30px;height:30px}
.chain .via{font-size:12px;font-weight:700;color:var(--mint);background:rgba(134,214,181,.1);border:1px solid rgba(134,214,181,.28);padding:3px 8px;border-radius:999px}
.chain .arr{color:var(--muted);font-weight:800}
.rec .note{margin:0;color:var(--muted);font-size:12.5px;max-width:60ch}
.rec.locked{opacity:.45}
.rec .lock{margin:0;font-size:12px;font-weight:700;color:var(--butter)}
.sec{margin:6px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:800}
.tips{margin:0;padding-left:18px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:4px}
.cashline{margin:0;display:flex;justify-content:space-between;align-items:baseline;background:rgba(242,193,78,.1);border:1px solid rgba(242,193,78,.3);border-radius:14px;padding:10px 14px;font-weight:700}
.cashline b{color:var(--butter);font-size:18px}
.role{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.role header{display:flex;justify-content:space-between;align-items:baseline}
.role h3{margin:0;font-size:16px;font-weight:800}
.role .meta{color:var(--muted);font-size:12.5px}
.role p{margin:0;color:var(--muted);font-size:13px}
.emp{display:flex;justify-content:space-between;align-items:center;background:rgba(247,239,226,.05);border-radius:10px;padding:5px 6px 5px 10px;font-weight:700}
.up{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0 2px}
.up h4{margin:0;font-size:14px;font-weight:800}
.up p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.up.own h4{color:var(--mint)}
.fine{margin:4px 0 0;color:var(--muted);font-size:12px}
.btn{appearance:none;border:0;background:var(--butter);color:var(--ink);font-weight:800;border-radius:999px;height:44px;padding:0 20px;cursor:pointer;font-size:14.5px;white-space:nowrap}
.btn.sm{height:34px;padding:0 14px;font-size:13px}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn:not([disabled]):hover{filter:brightness(1.06)}
.modal{position:fixed;inset:0;z-index:15;display:grid;place-items:center;background:rgba(16,11,8,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-bottom,0px))}
.card{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--ink-2);border:1px solid var(--line);border-radius:24px;padding:26px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:14px;touch-action:pan-y}
.eyebrow{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--mint);font-weight:800}
.logo-xl{margin:-4px 0 0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,9vw,60px);line-height:1.02;color:var(--butter);text-shadow:0 4px 0 #6b4a1c;text-wrap:balance}
.logo-md{margin:-2px 0 0;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,7vw,40px);line-height:1.05;color:var(--butter);text-wrap:balance}
.lede{margin:0;font-size:15.5px;color:var(--paper);max-width:52ch;line-height:1.5}
.keys{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.keys div{background:rgba(247,239,226,.05);border:1px solid var(--line);border-radius:12px;padding:8px 11px}
.keys dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800}
.keys dd{margin:2px 0 0;font-weight:600;font-size:13px}
@media (max-width:480px){.keys{grid-template-columns:minmax(0,1fr)}}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ledger{width:100%;border-collapse:collapse;font-size:14.5px}
.ledger td{padding:7px 0;border-bottom:1px solid var(--line)}
.ledger td:last-child{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.ledger tr.neg td:last-child{color:var(--tomato)}
.ledger tr.tot td{font-weight:800;border-bottom:0;font-size:16px}
.ledger tr.tot td:last-child{color:var(--butter)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpis div{background:rgba(247,239,226,.05);border-radius:12px;padding:8px 10px}
.kpis span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800}
.kpis b{font-family:var(--f-num);font-size:20px;font-weight:500}
.next{margin:0;color:var(--mint);font-weight:700}
.err{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .toast,.sheet,.floaty,.pulse{animation:none}
  .floaty{display:none}
}

/* first-person crosshair */
#cross{position:fixed;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1.5px rgba(0,0,0,.45);pointer-events:none;z-index:4}
#cross::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff}
/* guided tour card, under the top bar */
#coach{position:fixed;z-index:6;left:max(16px, env(safe-area-inset-left,0px));top:calc(64px + env(safe-area-inset-top,0px));width:min(380px,calc(100% - 32px));background:var(--panel);border:1.5px solid var(--butter);border-radius:16px;padding:12px 16px 14px;box-shadow:0 8px 28px rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#coach .ch{display:flex;justify-content:space-between;align-items:center;gap:10px}
#coach .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--butter);font-weight:800}
#coach .x{appearance:none;background:none;border:0;color:var(--paper);opacity:.75;font-weight:700;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#coach p{margin:6px 0 0;font-size:15px;line-height:1.45;font-weight:600}
#coach .btn{margin-top:10px}
.wl .nm.guide{background:var(--butter);color:var(--ink);font-size:13px;animation:guideBob .9s ease-in-out infinite alternate}
@keyframes guideBob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.guide-note{color:var(--butter)}
.help h3{margin:4px 0 6px;font-size:15px;color:var(--butter)}
.help ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.help .cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:700px){#coach{left:12px;right:12px;width:auto;top:calc(104px + env(safe-area-inset-top,0px))}#coach p{font-size:15px}}
@media (prefers-reduced-motion:reduce){.wl .nm.guide{animation:none}}