/* SATOSHI DUNGEON — retro vault shell */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; background:#0c0a08; overflow:hidden; }
body {
  display:flex; align-items:center; justify-content:center;
  font-family:"Courier New", ui-monospace, monospace;
  image-rendering:pixelated;
}
#frame { position:relative; }
#screen-wrap {
  position:relative; width:960px; height:576px;
  box-shadow:0 0 60px rgba(242,169,0,.18), 0 0 8px rgba(0,0,0,.9);
  border:4px solid #2a2218; border-radius:6px; overflow:hidden;
  background:#000;
}
#game { display:block; width:960px; height:576px; image-rendering:pixelated; background:#000; }
#scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px);
  mix-blend-mode:multiply;
}
.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; color:#f0e6d4; }
#hud-left { position:absolute; top:10px; left:12px; }
.bar-wrap { position:relative; width:260px; height:18px; background:#14100c; border:2px solid #000; box-shadow:0 0 0 2px #4a3a28; margin-bottom:5px; }
.bar-wrap.small { height:10px; width:200px; }
.bar-wrap.boss { height:14px; width:480px; }
.bar { height:100%; width:100%; transition:width .12s steps(6); }
.bar.hp { background:linear-gradient(#ff5a4d,#c2271c); }
.bar.xp { background:linear-gradient(#f2a900,#c47a08); }
.bar.bossbar { background:linear-gradient(#f7931a,#a85a08); }
.bar-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:bold; color:#fff; text-shadow:1px 1px 0 #000; letter-spacing:1px; }
#equip-line { font-size:12px; text-shadow:1px 1px 0 #000; margin-top:2px; color:#d4c4a8; }
#hud-right { position:absolute; top:10px; right:12px; text-align:right; font-size:13px; text-shadow:1px 1px 0 #000; line-height:1.5; }
#floor-line { color:#f2c45a; font-weight:bold; letter-spacing:1px; }
#gold-line { color:#f2a900; font-weight:bold; }
#item-line { color:#9fd8a8; font-size:12px; }
#boss-bar-wrap { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); text-align:center; }
#boss-name { font-size:13px; letter-spacing:3px; color:#ffd27a; text-shadow:1px 1px 0 #000; margin-bottom:4px; font-weight:bold; }
#msg-line {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:14px; font-weight:bold; color:#ffe9b0; text-shadow:2px 2px 0 #000;
  letter-spacing:1px; white-space:nowrap;
}
#minimap { position:absolute; bottom:12px; right:12px; border:2px solid #4a3a28; background:#0a0806; opacity:.92; }

/* ---------- Overlay menus ---------- */
#overlay {
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,2,.8); backdrop-filter:blur(2px);
}
#fade { position:absolute; inset:0; z-index:15; background:#000; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.panel {
  background:#1a140e; border:3px solid #6a4a22; box-shadow:0 0 0 3px #000, 0 0 40px rgba(242,169,0,.2);
  padding:26px 34px; color:#f0e6d4; text-align:center; max-width:720px; max-height:540px; overflow-y:auto;
}
.panel h1 { font-size:34px; letter-spacing:4px; color:#f2a900; text-shadow:3px 3px 0 #5a3208; margin-bottom:6px; }
.panel h2 { font-size:20px; letter-spacing:3px; color:#ffd27a; margin-bottom:14px; text-shadow:2px 2px 0 #000; }
.panel h3 { font-size:15px; letter-spacing:2px; color:#f2a900; margin:12px 0 6px; }
.panel p, .panel li { font-size:13px; line-height:1.65; color:#d4c4a8; }
.panel .sub { font-size:12px; color:#8f8377; margin-top:8px; }
.panel .big { font-size:15px; color:#ffe9b0; }
.btn-row { display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
button.rbtn {
  pointer-events:auto; cursor:pointer; font-family:inherit; font-size:14px; font-weight:bold; letter-spacing:2px;
  background:#2a2014; color:#f2a900; border:2px solid #8a6a28; box-shadow:0 0 0 2px #000;
  padding:10px 22px; text-transform:uppercase;
}
button.rbtn:hover { background:#4a3820; color:#fff; }
button.rbtn:disabled { opacity:.4; cursor:default; }
button.rbtn.danger { color:#ff7a6d; border-color:#8a4a4a; }
.cards { display:flex; gap:14px; justify-content:center; margin-top:16px; }
.card {
  pointer-events:auto; cursor:pointer; width:180px; background:#201810; border:2px solid #6a4a22; padding:14px 10px;
  transition:transform .08s;
}
.card:hover { transform:translateY(-4px); border-color:#f2a900; background:#2a2014; }
.card .ico { font-size:26px; margin-bottom:8px; }
.card .nm { font-size:13px; font-weight:bold; color:#f2a900; letter-spacing:1px; margin-bottom:6px; }
.card .ds { font-size:11px; color:#d4c4a8; line-height:1.5; }
.shop-list { text-align:left; margin-top:10px; }
.shop-row {
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:7px 10px; border:1px solid #4a3a28; margin-bottom:6px; background:#18120c; font-size:13px;
}
.shop-row .nm { color:#f0e6d4; font-weight:bold; }
.shop-row .ds { color:#8f8377; font-size:11px; }
.shop-row .pr { color:#f2a900; font-weight:bold; white-space:nowrap; }
.shop-row button.rbtn { padding:4px 12px; font-size:11px; }
.shop-row.owned { opacity:.45; }
.key-hint { display:inline-block; background:#2a2014; border:1px solid #8a6a28; padding:1px 7px; margin:0 2px; color:#f2a900; font-weight:bold; }
.stat-grid { display:grid; grid-template-columns:auto auto; gap:4px 22px; justify-content:center; margin:12px 0; font-size:13px; text-align:left; }
.stat-grid .k { color:#8f8377; } .stat-grid .v { color:#ffe9b0; font-weight:bold; }
.title-art { font-size:11px; line-height:1.15; color:#f2a900; white-space:pre; text-shadow:0 0 8px rgba(242,169,0,.45); margin-bottom:10px; }