:root{
  --bg:#14100c; --panel:#1e1812; --line:#4a3a28; --amber:#e8a33d; --amber-dim:#8a6526;
  --bone:#e6dcc6; --rust:#d0563a; --heal:#9fbf5a; --row:#2a2016;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#14100c; --panel:#1e1812; } }
:root[data-theme="dark"]{ --bg:#14100c; --panel:#1e1812; }
*,*::before,*::after{ box-sizing:inherit; }
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
body{ height:100%; margin:0; background:var(--bg); color:var(--bone); overflow:hidden;
  font-family:"VT323", ui-monospace, "Courier New", monospace; -webkit-user-select:none; user-select:none; }
#app{ height:100%; display:flex; flex-direction:column; }
#stage{ position:relative; flex:1; min-height:0; }
#cv{ width:100%; height:100%; display:block; touch-action:none; }
#mode{ position:absolute; top:10px; left:12px; font-size:22px; color:var(--amber); text-shadow:0 0 6px rgba(232,163,61,.45); pointer-events:none; }
#fps{ position:absolute; top:54px; left:12px; font-size:17px; color:var(--heal); pointer-events:none; }
#clock{ position:absolute; top:32px; left:12px; font-size:19px; color:var(--amber-dim); pointer-events:none; }
#hud{ background:var(--panel); border-top:2px solid var(--line); padding:5px 10px 7px; display:grid; gap:4px; }
.row{ display:flex; align-items:center; gap:12px; }
.stat{ display:flex; align-items:center; gap:8px; font-size:22px; color:var(--amber); }
.bar{ width:100px; height:12px; border:1px solid var(--amber-dim); background:#0f0c09; }
.bar i{ display:block; height:100%; background:var(--amber); transition:width .25s; }
.bar.low i{ background:var(--rust); }
.pips{ display:flex; gap:3px; }
.pips b{ width:8px; height:14px; border:1px solid var(--amber-dim); background:#0f0c09; }
.pips b.on{ background:var(--amber); border-color:var(--amber); }
#ammo{ flex:none; min-width:0; font-size:20px; color:var(--amber); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ammo b{ font-weight:400; color:var(--bone); }
#ammo b.low{ color:var(--rust); }
#ammo.tap{ cursor:pointer; text-decoration:underline dotted var(--amber-dim); text-underline-offset:4px; }
#ammo i{ font-style:normal; font-size:15px; color:var(--bone); opacity:.75; margin-left:4px; }
#wpn{ flex:1; min-width:0; font-size:20px; color:var(--amber-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud{ overflow:hidden; grid-template-columns:minmax(0,1fr); }
#hud .row{ min-width:0; }
#hud .row .stat:first-child{ flex:1; min-width:0; }
#hud .bar{ flex:1; min-width:40px; max-width:100px; width:auto; }
#hud .pips{ gap:2px; }
#hud .pips b{ width:7px; }
#log{ font-size:19px; line-height:1.15; height:2.3em; overflow:hidden; }
#hud .stat{ font-size:20px; }
#hud .row > button.sq{ flex:none; width:40px; height:32px; padding:0; font-size:22px; line-height:1; }
#log div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#log div:first-child{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
#log div:not(:first-child){ opacity:.55; }
#hud .row:last-child{ gap:6px; }
#hud .row > button{ min-width:0; padding:6px 1px; font-size:18px; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#throwb.on{ background:var(--amber); color:#140f0b; }
#ctx{ position:absolute; display:none; z-index:6; min-width:180px; max-width:260px; background:var(--panel); border:1px solid var(--amber-dim); border-radius:4px; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
#ctx.show{ display:block; }
#ctx .ctx-h{ font-size:19px; color:var(--amber-dim); padding:2px 6px 4px; border-bottom:1px solid var(--line); margin-bottom:4px; }
#ctx button{ display:block; width:100%; text-align:left; margin-top:4px; font-size:20px; padding:7px 8px; }
button{ font:inherit; font-size:21px; color:var(--amber); background:#140f0b; border:1px solid var(--amber-dim);
  padding:8px 8px; border-radius:3px; flex:1; touch-action:manipulation; }
button:active:not(:disabled){ background:var(--amber); color:#140f0b; }
button:disabled{ opacity:.35; }
button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
#lightb{ position:absolute; top:60px; right:10px; flex:none; height:40px; padding:0 10px; font-size:20px; background:rgba(20,15,11,.85); color:var(--amber-dim); }
#lightb.on{ color:#1a140e; background:var(--amber); }
#menub{ position:absolute; top:8px; right:62px; flex:none; width:44px; height:44px; padding:0; font-size:24px; line-height:1; background:rgba(20,15,11,.85); }
#menu{ position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 40%, rgba(40,28,16,.92), rgba(10,8,6,.97)); }
#menu.show{ display:flex; }
.mbox{ width:min(92vw,360px); text-align:center; }
.mbox h1{ margin:0; font-weight:400; font-size:64px; letter-spacing:4px; color:var(--amber); text-shadow:0 0 18px rgba(232,163,61,.45); }
.msub{ font-size:20px; color:var(--amber-dim); margin:0 0 22px; }
#mbody button{ display:block; width:100%; margin:8px 0; font-size:24px; padding:10px; text-align:center; }
#mbody button small{ display:block; font-size:17px; color:var(--amber-dim); }
#mmsg{ min-height:1.3em; font-size:19px; color:var(--bone); opacity:.8; margin-top:6px; }
#center{ position:absolute; top:8px; right:10px; flex:none; width:44px; height:44px; padding:0; font-size:26px; line-height:1; background:rgba(20,15,11,.85); }
#joy{ position:absolute; left:16px; bottom:16px; width:94px; height:94px; border-radius:50%; z-index:4; touch-action:none; background:radial-gradient(circle, rgba(232,163,61,.10), rgba(20,15,11,.35) 70%); border:2px solid rgba(232,163,61,.45); display:flex; align-items:center; justify-content:center; }
#joy.on{ border-color:rgba(232,163,61,.85); }
#joy.right{ left:auto; right:16px; }
#mmode{ position:absolute; left:16px; bottom:118px; z-index:4; display:flex; gap:4px; }
#mmode.right{ left:auto; right:16px; }
#mmode button{ flex:none; width:34px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; background:rgba(20,15,11,.8); color:var(--amber-dim); }
#mmode svg{ pointer-events:none; width:19px; height:19px; }
#mmode button.on{ background:var(--amber); color:#140f0b; }
#joyk{ width:40px; height:40px; border-radius:50%; background:rgba(232,163,61,.55); border:2px solid rgba(255,220,160,.7); box-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none; }
#cfx{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; box-shadow:inset 0 0 70px 26px rgba(214,40,26,.85); }
#cfx.go{ animation:cfx 1.1s ease-out; }
@keyframes cfx{ 0%{ opacity:0; } 12%{ opacity:1; } 30%{ opacity:.55; } 45%{ opacity:.9; } 100%{ opacity:0; } }
#ctxt{ position:absolute; left:0; right:0; top:34%; text-align:center; pointer-events:none; z-index:3; font-size:72px; letter-spacing:8px; color:#ff4a32; text-shadow:0 0 18px rgba(255,60,30,.8), 3px 3px 0 #000; opacity:0; }
#ctxt.go{ animation:ctxt 1.3s ease-out; }
@keyframes ctxt{ 0%{ opacity:0; transform:scale(2.2); } 15%{ opacity:1; transform:scale(1); } 75%{ opacity:1; transform:scale(1.04); } 100%{ opacity:0; transform:scale(1.1); } }
#fade{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .3s; }
#fade.on{ opacity:1; }
#banner{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(10,8,6,.7); }
#banner.show{ display:flex; }
#banner .box{ background:var(--panel); border:2px solid var(--amber-dim); padding:22px 24px; max-width:300px; text-align:center; }
#banner h2{ margin:0 0 6px; font-weight:400; font-size:40px; color:var(--amber); }
#banner p{ margin:0 0 16px; font-size:21px; }
#sheet{ position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; background:rgba(10,8,6,.55); z-index:5; }
#sheet.show{ display:flex; }
.ipop{ position:absolute; left:10px; right:10px; bottom:72px; z-index:8; box-shadow:0 8px 24px rgba(0,0,0,.75); }
.ipop .detail{ margin:0; background:#261c12; border:1px solid var(--amber-dim); padding:10px 46px 10px 10px; max-height:46vh; overflow:auto; }
.ipx{ position:absolute; top:6px; right:6px; width:36px; height:36px; padding:0; flex:none; }
.sbox{ position:relative; width:100%; max-width:520px; max-height:82%; display:flex; flex-direction:column; background:var(--panel);
  border-top:2px solid var(--amber-dim); padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
.shead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shead h3{ margin:0; font-weight:400; font-size:30px; color:var(--amber); }
.shead .x{ flex:none; width:44px; padding:6px 0; }
#sh-msg{ font-size:19px; min-height:1.25em; opacity:.8; }
#sh-body{ overflow:auto; flex:1; min-height:0; }
.sbox.tall #sh-body{ display:flex; flex-direction:column; overflow:hidden; }
.invtop{ flex:none; }
.invscroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.stats{ font-size:20px; color:var(--amber); display:flex; gap:16px; flex-wrap:wrap; }
.sec{ font-size:19px; color:var(--amber-dim); margin:12px 0 2px; border-bottom:1px solid var(--line); }
.it{ display:flex; align-items:center; gap:10px; padding:8px 6px; font-size:21px; border-bottom:1px solid #2a2219; }
.it.on{ background:var(--row); }
.it .lbl{ width:64px; flex:none; color:var(--amber-dim); }
.it .nm{ flex:1; }
.it .tag{ font-size:17px; color:var(--amber-dim); }
.it .none{ opacity:.4; }
.det{ padding:4px 6px 10px; font-size:19px; background:var(--row); }
.acts{ display:flex; gap:8px; margin-top:8px; }
.mini{ flex:none; font-size:19px; padding:5px 10px; }
.empty{ font-size:20px; opacity:.6; padding:10px 6px; }
#sh-foot{ display:flex; gap:8px; margin-top:10px; }
.sbox.tall{ max-height:none; height:100%; max-width:none; border-top:none; padding-top:calc(10px + env(safe-area-inset-top,0px)); }
#sheet:has(.sbox.tall){ background:var(--panel); }
.acts{ flex-wrap:wrap; }
.paper{ display:grid; grid-template-columns:1fr 112px 1fr; gap:8px; margin-top:4px; }
.slots{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.slot{ position:relative; display:flex; align-items:center; gap:5px; padding:3px; min-height:42px; border:1px solid var(--line); background:#15100c; border-radius:3px; min-width:0; }
.slot.on{ border-color:var(--amber); background:var(--row); }
.slot.fit{ border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); }
.slot img{ width:32px; height:32px; flex:none; pointer-events:none; }
.cell img{ width:40px; height:40px; flex:none; pointer-events:none; }
.slot, .cell{ -webkit-touch-callout:none; touch-action:pan-y; }
.cb{ position:absolute; left:3px; bottom:2px; height:3px; border-radius:2px; max-width:calc(100% - 6px); }
.slot.drop{ border-color:var(--heal); box-shadow:inset 0 0 0 2px var(--heal); }
.invscroll.drop{ outline:2px dashed var(--amber-dim); outline-offset:-2px; }
#ghost{ position:fixed; width:56px; height:56px; z-index:30; pointer-events:none; display:none; opacity:.9; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.slot .em{ width:32px; height:32px; flex:none; border:1px dashed var(--line); }
.slot .st{ display:block; flex:1; min-width:0; }
.slot .sl{ display:block; font-size:15px; line-height:1; color:var(--amber-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot .sn{ display:block; font-size:16px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#fig{ width:112px; height:170px; display:block; background:radial-gradient(ellipse at 50% 85%, #2e2318, #15100c 70%); border:1px solid var(--line); border-radius:3px; }
.swap{ flex:none; font-size:22px; padding:5px 4px; }
.wslots{ display:grid; grid-template-columns:1fr 1fr 46px; gap:6px; margin-top:6px; }
.wslots .swap{ grid-row:span 2; }
.wbar{ position:relative; height:22px; margin-top:6px; border:1px solid var(--amber-dim); background:#0f0c09; border-radius:3px; overflow:hidden; }
.wbar i{ position:absolute; left:0; top:0; bottom:0; background:rgba(232,163,61,.35); }
.wbar.over{ border-color:var(--rust); } .wbar.over i{ background:rgba(208,86,58,.45); }
.wbar span{ position:relative; display:block; padding:0 6px; font-size:16px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it .nm small{ color:var(--amber-dim); font-size:.8em; }
.lootkg{ margin-top:8px; font-size:17px; color:var(--amber); } .lootkg.over{ color:var(--rust); }
.statline{ display:flex; flex-wrap:wrap; gap:2px 14px; font-size:19px; color:var(--amber); margin-top:8px; }
.tabs{ display:flex; gap:4px; overflow-x:auto; margin:6px 0 2px; }
.tab{ flex:none; width:42px; height:38px; padding:2px; font-size:16px; display:flex; align-items:center; justify-content:center; }
.tab img{ width:30px; height:30px; pointer-events:none; }
.tab.on{ background:var(--row); border-color:var(--amber); }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; margin-top:6px; }
.cell{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#15100c; border-radius:3px; }
.cell.on{ border-color:var(--amber); background:var(--row); }
.cell .n{ position:absolute; right:3px; bottom:0; font-size:16px; }
.detail{ margin-top:8px; padding:8px; min-height:58px; background:var(--row); border:1px solid var(--line); font-size:19px; }
.detail b{ display:block; font-weight:400; font-size:21px; color:var(--amber); }