@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#08080d; --panel:#16151f; --line:#2e2c40;
  --ink:#e8e2d0; --muted:#8a86a0; --gold:#f2c14e;
  --blood:#c0392b; --green:#6abf4b; --mana:#4aa3df; --xp:#9b59b6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Press Start 2P', ui-monospace, monospace;
  display:flex; flex-direction:column; align-items:center;
  min-height:100%; padding:10px; overflow-x:hidden;
  image-rendering:pixelated;
}
a{color:var(--gold)}

.topbar{
  width:100%; max-width:640px; display:flex; justify-content:space-between;
  align-items:center; font-size:9px; margin-bottom:8px; color:var(--muted);
}
.topbar a{text-decoration:none}
.topbar span{color:var(--gold)}

/* ---- stage ---- */
.stage{
  position:relative; width:100%; max-width:640px;
  border:3px solid var(--line); box-shadow:0 0 0 3px #000, 0 8px 0 #000;
  background:#000; line-height:0;
}
#game{ width:100%; display:block; image-rendering:pixelated; background:#000; }

/* ---- boss bar ---- */
.bossbar{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:72%; display:none; text-align:center; line-height:1.4;
}
.bossbar.show{display:block}
.bossbar .bn{font-size:9px; color:var(--gold); text-shadow:1px 1px 0 #000; margin-bottom:4px; letter-spacing:1px}
.bossbar .bhp{height:12px; background:#2a0c0c; border:2px solid #000; position:relative; overflow:hidden; box-shadow:0 0 12px rgba(192,57,43,.6)}
.bossbar .bhp > i{position:absolute; inset:0 0 0 0; background:linear-gradient(var(--blood),#7a1f17)}

/* ---- HUD ---- */
.hud{
  width:100%; max-width:640px; margin-top:8px;
  background:linear-gradient(var(--panel), #0e0d15);
  border:3px solid var(--line); box-shadow:0 6px 0 #000;
  padding:10px 12px; font-size:9px;
}
.hud .row{display:flex; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; align-items:center}
.stat{display:flex; align-items:center; gap:6px; white-space:nowrap}
.stat b{color:var(--gold)}
.bar{ width:140px; height:14px; background:#2a0c0c; border:2px solid #000; position:relative; overflow:hidden; }
.bar > i{position:absolute; inset:0 100% 0 0; background:linear-gradient(var(--blood),#7a1f17); transition:right .15s}
.bar.xp{background:#1c1230} .bar.xp > i{background:linear-gradient(var(--xp),#5b2d7a)}
.bar span{position:absolute; inset:0; display:grid; place-items:center; font-size:8px; color:#fff; text-shadow:1px 1px 0 #000}
.bagopen{
  font-family:inherit; font-size:8px; color:var(--ink); cursor:pointer;
  background:var(--panel); border:2px solid var(--line); box-shadow:0 3px 0 #000; padding:6px 10px;
}
.bagopen:active{transform:translateY(2px); box-shadow:0 1px 0 #000}

/* ---- log ---- */
.log{
  width:100%; max-width:640px; margin-top:8px; height:74px; overflow:hidden;
  background:#0c0b12; border:3px solid var(--line); padding:8px 10px;
  font-size:8px; line-height:1.9; color:var(--muted);
  display:flex; flex-direction:column-reverse;
}
.log .ev{margin:1px 0}
.log .good{color:var(--green)} .log .bad{color:var(--blood)}
.log .gold{color:var(--gold)} .log .info{color:var(--mana)}

/* ---- touch ---- */
.touch{display:none; width:100%; max-width:640px; margin-top:10px; justify-content:space-between; align-items:center}
.dpad{display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,48px); gap:4px}
.dpad button, .act button{
  font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--panel); border:2px solid var(--line); box-shadow:0 4px 0 #000;
  cursor:pointer; -webkit-user-select:none; user-select:none;
}
.dpad button:active, .act button:active{transform:translateY(3px); box-shadow:0 1px 0 #000}
.dpad .sp{visibility:hidden}
.act button{width:72px; height:72px; font-size:10px; color:var(--gold)}
@media(hover:none) and (pointer:coarse){ .touch{display:flex} }

/* ---- backpack panel ---- */
.bagpanel{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(4,4,8,.85); align-items:center; justify-content:center; padding:20px;
}
.bagpanel.show{display:flex}
.bagwin{
  width:100%; max-width:420px; background:linear-gradient(var(--panel),#0e0d15);
  border:3px solid var(--gold); box-shadow:0 0 0 3px #000, 8px 8px 0 #000; padding:22px; text-align:center;
}
.bagwin h3{color:var(--gold); font-size:13px; margin-bottom:16px; letter-spacing:1px}
.equip{display:flex; justify-content:space-between; gap:12px; font-size:8px; color:var(--muted);
  background:#0c0b12; border:2px solid var(--line); padding:10px; margin-bottom:16px; flex-wrap:wrap}
.equip b{color:var(--ink)}
.baggrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; min-height:64px}
.slot{
  position:relative; aspect-ratio:1; background:#0c0b12; border:2px solid var(--line);
  cursor:pointer; display:grid; place-items:center; box-shadow:0 3px 0 #000;
}
.slot:hover{border-color:var(--gold)}
.slot:active{transform:translateY(2px); box-shadow:0 1px 0 #000}
.slot canvas{width:32px; height:32px; image-rendering:pixelated}
.slot .cnt{position:absolute; bottom:2px; right:3px; font-size:8px; color:var(--gold); text-shadow:1px 1px 0 #000}
.slot .tip{
  position:absolute; bottom:108%; left:50%; transform:translateX(-50%);
  background:#000; border:1px solid var(--gold); color:var(--ink); font-size:7px; padding:4px 6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .1s; z-index:2;
}
.slot:hover .tip{opacity:1}
.baggrid .empty{grid-column:1/-1; color:var(--muted); font-size:8px; align-self:center; padding:18px}
.baghint{font-size:7px; color:var(--muted); line-height:2; margin:16px 0}

/* ---- overlays ---- */
.overlay{
  position:fixed; inset:0; z-index:50; display:none;
  background:rgba(4,4,8,.93); backdrop-filter:blur(2px);
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;
}
.overlay.show{display:flex}
.overlay h1{color:var(--gold); font-size:clamp(18px,5vw,34px); text-shadow:3px 3px 0 #000; margin-bottom:14px}
.overlay h1.dead{color:var(--blood)}
.overlay p{font-size:9px; color:var(--muted); max-width:480px; line-height:2.3; margin-bottom:24px}
.overlay p b{color:var(--gold)}

.classpick{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-bottom:20px}
.pick{
  width:158px; background:linear-gradient(var(--panel),#0e0d15); border:3px solid var(--line);
  box-shadow:5px 5px 0 #000; padding:18px 12px; cursor:pointer; transition:transform .1s,border-color .1s;
}
.pick:hover{transform:translateY(-5px); border-color:var(--gold)}
.pick canvas{width:48px; height:60px; image-rendering:pixelated; background:#0a0911; border:2px solid var(--line); padding:4px}
.pick h3{color:var(--gold); font-size:11px; margin:12px 0 8px}
.pick small{display:block; font-size:7px; color:var(--muted); line-height:2; margin-top:4px}
.hiscore{font-size:8px; color:var(--gold); margin-bottom:16px}

.btn{
  font-family:inherit; font-size:12px; cursor:pointer; padding:16px 30px; color:#1a1206;
  background:linear-gradient(var(--gold),#b8860b); border:none;
  box-shadow:0 5px 0 #6e4e06, inset 0 2px 0 #ffe9a8; text-decoration:none;
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 #6e4e06}
.btn.small{font-size:9px; padding:12px 20px}

.help{font-size:8px; color:var(--muted); line-height:2.4; margin-top:10px; max-width:520px}
kbd{background:#222; border:1px solid #444; border-bottom-width:2px; padding:1px 5px; color:var(--ink); font-family:inherit}

/* ---- topbar right / mute ---- */
.topright{display:flex; gap:16px; align-items:center}
#muteBtn{text-decoration:none; font-size:12px}

/* ---- name input ---- */
.namerow{display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:20px}
.namerow label{font-size:8px; color:var(--muted)}
#nameInput{font-family:inherit; font-size:10px; color:var(--gold); background:#0c0b12;
  border:2px solid var(--panel-line); padding:10px 12px; width:200px; text-align:center; letter-spacing:1px}
#nameInput:focus{outline:none; border-color:var(--gold)}

/* ---- leaderboard ---- */
.board-wrap{width:100%; max-width:380px; margin:0 auto 22px}
.board-wrap h4{font-size:10px; color:var(--gold); margin-bottom:10px; letter-spacing:1px}
.board{background:#0c0b12; border:2px solid var(--panel-line); box-shadow:0 4px 0 #000}
.lbrow{display:grid; grid-template-columns:28px 1fr 64px 52px; gap:6px; font-size:8px;
  padding:7px 10px; color:var(--ink); border-bottom:1px solid #1c1a28; text-align:left}
.lbrow:last-child{border-bottom:none}
.lbrow span:nth-child(3),.lbrow span:nth-child(4){text-align:right; color:var(--gold)}
.lbhead{color:var(--muted); background:#15131f}
.lbhead span{color:var(--muted) !important}
.lboff{font-size:8px; color:var(--muted); padding:18px 12px; line-height:2; text-align:center}