*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#120d16;overflow:hidden;touch-action:none;font-family:"Courier New",ui-monospace,monospace;color:#fbefd5}
#root{position:absolute;left:0;top:0;width:430px;height:932px;transform-origin:0 0;overflow:hidden}
canvas{position:absolute;left:0;top:0;width:430px;height:932px;image-rendering:pixelated}
#hud{position:absolute;z-index:50;left:8px;right:8px;top:calc(6px + var(--sat,0px));background:#2a1e2bcc;border:3px solid #5c3d2e;border-radius:6px;padding:6px 8px;box-shadow:0 3px 0 #0008}
#hud .row{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:17px}
#gear{background:#5c3d2e;color:#fbefd5;border:2px solid #8a5a3c;border-radius:4px;font-size:18px;padding:2px 8px}
.ebar{position:relative;margin-top:6px;height:16px;background:#1a1218;border:2px solid #5c3d2e;border-radius:3px;overflow:hidden}
#energy{height:100%;background:linear-gradient(#7fe07a,#3a9a3a);width:100%;transition:width .2s}
#etext{position:absolute;left:0;right:0;top:-1px;text-align:center;font-size:12px;font-weight:bold;text-shadow:1px 1px #000}
#hint{position:absolute;left:12px;right:12px;bottom:118px;text-align:center;font-size:14px;color:#ffe8a8;text-shadow:1px 1px 0 #000,0 0 6px #000;pointer-events:none}
#bar{position:absolute;left:6px;right:6px;bottom:14px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
button{font-family:inherit}
.btn{background:linear-gradient(#a8693f,#7a4526);color:#fff4dc;border:3px solid #3b2216;border-radius:6px;padding:12px 12px;font-size:16px;font-weight:bold;box-shadow:0 4px 0 #2a160d;text-shadow:1px 1px #000;min-width:64px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2a160d}
.btn.g{background:linear-gradient(#5fb05a,#2f7a2f)} .btn.b{background:linear-gradient(#5a8fd0,#2f5a9a)} .btn.gold{background:linear-gradient(#f2c94c,#b8862a);color:#2a1a08;text-shadow:none}
.btn:disabled{filter:grayscale(1) brightness(.6)}
.btn.sm{padding:7px 9px;font-size:14px;min-width:0}
#toast{position:absolute;z-index:60;left:0;right:0;top:calc(92px + var(--sat,0px));text-align:center;pointer-events:none}
#toast div{display:inline-block;background:#000c;border:2px solid #f2c94c;border-radius:6px;padding:6px 12px;margin:2px;font-size:15px;animation:fade 2.4s forwards}
@keyframes fade{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#modal{position:absolute;z-index:40;inset:0;background:#0009;display:flex;align-items:flex-end;justify-content:center}
#modal.hide{display:none}
#mbox{width:100%;max-height:78%;overflow-y:auto;background:#3a2a24;border-top:4px solid #8a5a3c;border-radius:14px 14px 0 0;padding:16px 14px 28px;box-shadow:0 -6px 0 #0006}
#mbox h2{margin:0 0 8px;font-size:22px;color:#ffd77a;text-shadow:2px 2px #000}
#mbox p{margin:6px 0;font-size:15px;line-height:1.35}
.list .it{display:flex;align-items:center;gap:8px;background:#2a1e1a;border:2px solid #5c3d2e;border-radius:6px;padding:7px;margin:6px 0}
.it canvas{position:static;width:32px;height:32px;flex:none}
.it .tx{flex:1;font-size:14px}.it .tx b{font-size:15px}
.tabs{display:flex;gap:6px;margin-bottom:6px}.tabs .btn{flex:1}
.q0{color:#ddd}.q1{color:#7cd0ff}.q2{color:#ffcf4a}
.muted{color:#b9a58c;font-size:13px}
.row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.row2 .btn{flex:1}

#gold{display:inline-flex;align-items:center;gap:6px;font-size:20px;color:#ffd34d;text-shadow:1px 1px #000;min-width:96px}
.coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3a0,#ffd34d 45%,#b8862a);border:2px solid #7a5a18;box-shadow:inset -2px -2px 0 #0003}
#gold.tick .coin{animation:spin .5s}#gold.tick #goldn{animation:pop .5s}#gold.down #goldn{animation:drop .5s}
@keyframes spin{0%{transform:scaleX(1)}50%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.35);color:#fff6b0}100%{transform:scale(1)}}
@keyframes drop{0%{transform:none}30%{transform:translateY(3px);color:#ff8a7a}100%{transform:none}}
#hud .row{font-size:15px}

.dlg{display:flex;gap:10px;align-items:center;margin-bottom:6px}.dlg canvas.portrait,.jr canvas.portrait{position:static;width:72px;height:72px;image-rendering:pixelated;flex:none;border-radius:4px}
.jr canvas.portrait{width:52px;height:52px;align-self:flex-start}.hearts{color:#ff5a7a;font-size:13px;letter-spacing:-1px}
.say{background:#f4e4c4;color:#2a1a10;border:3px solid #5c3d2e;border-radius:6px;padding:10px;min-height:64px;font-size:15px}.say .muted{color:#7a5a3a}
#bar .btn{padding:9px 8px;font-size:14px;min-width:0}
.xprow{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;font-weight:bold}
#lv{color:#7cd0ff;min-width:44px}.xbar{flex:1;height:8px;background:#1a1218;border:2px solid #5c3d2e;border-radius:3px;overflow:hidden}#xpf{height:100%;background:linear-gradient(#9ad0ff,#3a7ad0);width:0}
.lvlup{text-align:center;padding:10px 0}.lvlup .big{font-size:38px;font-weight:bold;color:#ffd34d;text-shadow:3px 3px #000;animation:pop .6s}.lvlup .lvn{font-size:26px;color:#7cd0ff}
.ebar{cursor:pointer}