* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0b0e14;
  font-family:"Trebuchet MS",Verdana,sans-serif; color:#e8dfc8;
  -webkit-user-select:none; user-select:none; }
#wrap { position:fixed; inset:0; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:url("../assets/ui/cursor.png") 6 6, crosshair; image-rendering:pixelated; }
#vignette { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(5,2,10,.55) 100%); }
#hurtflash { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(180,10,10,.5) 100%);
  transition:opacity .35s; }
.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; }
#orbs { position:absolute; left:14px; bottom:12px; display:flex; align-items:flex-end; gap:10px; }
.orb { position:relative; width:92px; height:92px; border-radius:50%;
  border:3px solid #3a2f22; background:#160f0d; overflow:hidden;
  box-shadow:0 0 12px #000, inset 0 0 14px #000; }
.orb-fill { position:absolute; left:0; bottom:0; width:100%; height:100%;
  background:linear-gradient(to top,#a31212,#e03030); transition:height .15s; }
.orb.mana .orb-fill { background:linear-gradient(to top,#2a8a3d,#7dff8a); }
#xpbar { display:none; }
.orb span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:19px; color:#fff; text-shadow:1px 1px 2px #000; }
#midbar { width:230px; padding-bottom:6px; }
#xpbar { height:10px; background:#111; border:1px solid #6b5a3e; border-radius:5px; overflow:hidden; }
#xpfill { height:100%; width:0%; background:linear-gradient(90deg,#7a5cff,#c9b8ff); transition:width .2s; }
#lvlLine { display:flex; justify-content:space-between; font-size:13px; margin:3px 1px;
  color:#ffe9a8; text-shadow:1px 1px 1px #000; }
#energybar { height:8px; background:#111; border:1px solid #3e5a6b; border-radius:4px; overflow:hidden; }
#energyfill { height:100%; width:100%; background:linear-gradient(90deg,#1c8fa8,#7df0ff); }
#belt { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px; }
.slot { position:relative; width:56px; height:56px; background:rgba(20,14,10,.85);
  border:2px solid #6b5a3e; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:26px; }
.slot .key { position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:9px; background:#000; color:#ffd97a; padding:1px 5px; border-radius:4px;
  border:1px solid #6b5a3e; white-space:nowrap; }
.slot .count { position:absolute; bottom:-7px; right:-7px; font-size:13px; font-weight:bold;
  background:#40200f; border:1px solid #a8763e; border-radius:8px; padding:0 6px; color:#ffd97a; }
.slot .cost { position:absolute; bottom:-7px; right:-7px; font-size:11px; font-weight:bold;
  background:#0f2440; border:1px solid #3e6b9a; border-radius:8px; padding:0 5px; color:#7adcff; }
.slot .cd { position:absolute; left:0; bottom:0; width:100%; height:0%; background:rgba(0,0,0,.65);
  border-radius:0 0 6px 6px; pointer-events:none; }
.slot.nomana .ico { opacity:.35; filter:grayscale(1); }
#keysHint { position:absolute; right:14px; bottom:12px; font-size:12px; color:#b8a888;
  background:rgba(10,6,4,.7); border:1px solid #3a2f22; border-radius:8px; padding:5px 12px; }
#topbar { position:absolute; top:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:18px; align-items:center; background:rgba(10,6,4,.7);
  border:1px solid #6b5a3e; border-radius:10px; padding:6px 18px; font-size:15px; }
#waveText { color:#ffb347; font-weight:bold; letter-spacing:2px; }
#zoneText { color:#9adcff; font-weight:bold; letter-spacing:3px; }
#zone { position:absolute; top:64px; width:100%; text-align:center; font-size:26px; letter-spacing:8px;
  color:#e8dfc8; text-shadow:0 0 14px #000, 2px 2px 0 #000; animation:bannerIn 2.6s ease forwards; }
#killText { color:#e8dfc8; }
#muteBtn { pointer-events:auto; cursor:pointer; }
#minimap { position:absolute; top:10px; right:10px; border:2px solid #6b5a3e; border-radius:8px;
  background:rgba(8,12,8,.85); }
#quest { position:absolute; top:168px; right:10px; width:148px; background:rgba(10,6,4,.78);
  border:1px solid #6b5a3e; border-radius:8px; padding:7px 9px; font-size:12px; }
#questTitle { color:#7adcff; font-weight:bold; margin-bottom:2px; }
#questTitle span { color:#ffd94d; }
#questSub { color:#b8a888; font-size:11px; margin-bottom:4px; }
#gearLine { color:#b8a888; font-size:11px; border-top:1px solid #3a2f22; padding-top:4px; }
#toast { position:absolute; bottom:190px; left:50%; transform:translateX(-50%);
  background:rgba(10,6,4,.9); border:2px solid #ffe9a8; border-radius:10px;
  padding:8px 22px; font-size:17px; font-weight:bold; color:#ffe9a8;
  text-shadow:1px 1px 1px #000; white-space:nowrap; z-index:5;
  animation:toastIn .25s ease; }
@keyframes toastIn { from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }
button.big.ghost { background:linear-gradient(#2a2a35,#17171d); border-color:#6b5a3e; font-size:15px; padding:10px 24px; }
#banner { position:absolute; top:22%; width:100%; text-align:center; font-size:46px; font-weight:bold;
  letter-spacing:6px; color:#ffd97a; text-shadow:0 0 18px #a33, 2px 2px 0 #000;
  animation:bannerIn 2.6s ease forwards; }
@keyframes bannerIn { 0%{opacity:0; transform:scale(1.4);} 15%{opacity:1; transform:scale(1);}
  80%{opacity:1;} 100%{opacity:0;} }
#bossbar { position:absolute; top:64px; left:50%; transform:translateX(-50%); width:min(560px,70vw);
  text-align:center; }
#bossName { font-size:14px; letter-spacing:4px; color:#ff6b6b; text-shadow:1px 1px 1px #000; }
#bossTrack { height:12px; background:#1a0505; border:1px solid #a33; border-radius:6px; overflow:hidden; margin-top:3px; }
#bossFill { height:100%; width:100%; background:linear-gradient(90deg,#7a1010,#ff4040); transition:width .15s; }
#interactTip { position:absolute; bottom:120px; left:50%; transform:translateX(-50%);
  background:rgba(10,6,4,.85); border:1px solid #ffd97a; padding:6px 16px; border-radius:8px;
  color:#ffe9a8; font-size:15px; animation:bob 1s ease-in-out infinite alternate; }
@keyframes bob { from{transform:translate(-50%,0);} to{transform:translate(-50%,-6px);} }

/* ---------- Panels & overlays ---------- */
.panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(16,11,7,.96); border:2px solid #a8763e; border-radius:12px;
  padding:22px 26px; min-width:340px; box-shadow:0 0 40px #000; z-index:10; }
.panel h2 { color:#ffd97a; margin-bottom:4px; }
.shop-head { display:flex; gap:12px; align-items:center; margin-bottom:2px; }
.shop-head img { width:64px; height:64px; image-rendering:pixelated;
  border:2px solid #a8763e; border-radius:10px; background:#241811; }
.title-hero { width:96px; height:96px; image-rendering:pixelated; margin-bottom:6px;
  border:3px solid #a8763e; border-radius:14px; background:#160f0d; }
.panel .sub { color:#b8a888; font-size:13px; margin:8px 0; }
.panel .dim { opacity:.7; }
.shop-row button { width:100%; text-align:left; margin:5px 0; padding:9px 12px; font-size:14px;
  background:#241811; color:#e8dfc8; border:1px solid #6b5a3e; border-radius:8px; cursor:pointer; }
.shop-row button:hover { background:#3a2817; border-color:#ffd97a; }
#attrRows button { width:100%; text-align:left; margin:4px 0; padding:8px 12px; font-size:13px;
  background:#14231a; color:#e8dfc8; border:1px solid #3e6b4a; border-radius:8px; cursor:pointer; }
#attrRows button:hover { background:#1d3a26; border-color:#7dff8a; }
#attrRows .dim { color:#b8a888; }
.shop-row .price { color:#ffd97a; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:rgba(5,3,8,.82); z-index:20; text-align:center; padding:20px; }
.overlay h1 { font-size:min(72px,11vw); letter-spacing:10px; color:#ffd97a;
  text-shadow:0 0 30px #a33, 3px 3px 0 #000; }
.overlay h1.red { color:#ff4b4b; }
.overlay .tag { font-size:18px; color:#e8dfc8; margin:10px 0 16px; }
.overlay .sub { color:#b8a888; font-size:14px; margin-top:12px; max-width:560px; }
.overlay .controls { background:rgba(20,14,10,.8); border:1px solid #6b5a3e; border-radius:10px;
  padding:12px 22px; font-size:14px; line-height:1.7; margin-bottom:18px; }
.overlay .controls b { color:#ffd97a; }
button.big { font-size:20px; padding:14px 34px; background:linear-gradient(#7a1f1f,#4a1010);
  color:#ffe9a8; border:2px solid #ffb347; border-radius:12px; cursor:pointer; letter-spacing:2px; }
button.big:hover { background:linear-gradient(#a32a2a,#5f1414); box-shadow:0 0 18px #a33; }
#loadTrack { width:min(420px,70vw); height:14px; background:#111; border:1px solid #6b5a3e;
  border-radius:7px; overflow:hidden; margin-top:14px; }
#loadFill { height:100%; width:0%; background:linear-gradient(90deg,#a33,#ffb347); }

/* ---------- Touch ---------- */
#touchUI { position:absolute; right:14px; bottom:170px; display:flex; flex-direction:column; gap:10px; }
#touchUI button { width:60px; height:60px; font-size:28px; border-radius:50%;
  background:rgba(20,14,10,.8); border:2px solid #6b5a3e; }
@media (pointer:coarse) { #belt{display:none;} }