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

:root{
  --void:#0a0714;
  --panel:#160e24;
  --panel-2:#1f1433;
  --border:#3a2a52;
  --ember:#ff5a3c;
  --arcane:#4ecdc4;
  --gold:#ffd23f;
  --bone:#f4f0e6;
  --blood:#e63946;
}

*{box-sizing:border-box; -webkit-font-smoothing:none; image-rendering:pixelated; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--void);
  overflow:hidden;
  font-family:'VT323', monospace;
  color:var(--bone);
  user-select:none;
  touch-action:none;
}
.pixel-font{ font-family:'Press Start 2P', monospace; }
#app{ position:relative; width:100vw; height:100vh; }

#crt{
  position:absolute; inset:0; pointer-events:none; z-index:60;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.14) 3px, rgba(0,0,0,0) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.38) 100%);
  mix-blend-mode:multiply;
}
#flash{ position:absolute; inset:0; pointer-events:none; z-index:49; background:var(--blood); opacity:0; transition:opacity 0.08s ease-out; }
#statusTint{ position:absolute; inset:0; pointer-events:none; z-index:48; opacity:0; transition:opacity 0.4s ease; mix-blend-mode:screen; }

.pixel-panel{
  background:var(--panel); border:4px solid var(--border);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgba(255,255,255,0.03), 0 0 24px rgba(0,0,0,0.6);
  position:relative;
}
.pixel-panel::before{ content:""; position:absolute; inset:-4px; border:2px solid #000; pointer-events:none; }
.pixel-btn{
  font-family:'Press Start 2P', monospace; font-size:13px; background:var(--panel-2); color:var(--bone);
  border:3px solid var(--border); box-shadow: 0 4px 0 #000, 0 0 0 2px #000; padding:14px 18px;
  cursor:pointer; letter-spacing:1px; transition:transform 0.05s ease, background 0.15s;
}
.pixel-btn:hover{ background:#3a2015; }
.pixel-btn:active{ transform:translateY(4px); box-shadow:0 0 0 #000, 0 0 0 2px #000; }
.pixel-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.icon-btn{
  font-family:'Press Start 2P'; font-size:14px; width:44px; height:44px; border-radius:50%;
  background:var(--panel-2); color:var(--gold); border:3px solid var(--border);
  box-shadow:0 3px 0 #000, 0 0 0 2px #000; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ transform:translateY(3px); box-shadow:0 0 0 #000, 0 0 0 2px #000; }

/* ===== INTRO ===== */
#introScreen{
  position:absolute; inset:0; z-index:70; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; text-align:center; padding:30px 18px;
  background:#000; transition:opacity 1s ease, visibility 1s ease;
}
#introScreen.fade-out{ opacity:0; visibility:hidden; pointer-events:none; }
#introTitle{
  font-size:58px; color:var(--ember); letter-spacing:6px;
  text-shadow:0 0 10px var(--ember), 0 0 30px rgba(255,90,60,0.6), 4px 4px 0 #000;
  opacity:0; animation:introFadeIn 1.2s ease-out forwards;
}
#introCredit{
  font-family:'Press Start 2P'; font-size:13px; color:var(--gold); letter-spacing:1px;
  text-shadow:2px 2px #000; opacity:0; animation:introFadeIn 1.2s ease-out 0.8s forwards;
}
#introPrompt{
  font-family:'Press Start 2P'; font-size:11px; color:var(--bone); opacity:0; margin-top:10px;
  animation:introFadeIn 1.2s ease-out 1.6s forwards, introBlink 1.3s steps(2) 2.8s infinite;
}
@keyframes introFadeIn{ from{ opacity:0; transform:scale(0.9); } to{ opacity:1; transform:scale(1); } }
@keyframes introBlink{ 50%{ opacity:0.2; } }

/* ===== START SCREEN ===== */
#startScreen{
  position:absolute; inset:0; z-index:20; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(circle at 50% 20%, #24123a 0%, #0a0714 70%);
  overflow:auto; padding:25px 14px;
}
#gameTitle{ font-size:36px; color:var(--ember); text-shadow:0 0 6px var(--ember), 0 0 22px rgba(255,90,60,0.5), 4px 4px 0 #000; letter-spacing:4px; }
#gameSubtitle{ font-size:18px; color:var(--arcane); letter-spacing:2px; text-shadow:2px 2px 0 #000; }
#bestScoreLine{ font-size:15px; color:var(--gold); }
#charSelectRow{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:1100px;}
.char-card{ width:200px; padding:14px; cursor:pointer; text-align:center; transition:transform 0.12s ease, box-shadow 0.12s ease; }
.char-card:hover{ transform:translateY(-5px); }
.char-card.selected{ box-shadow:0 0 0 2px #000, 0 0 22px var(--sel-glow, var(--gold)); }
.char-card canvas{ display:block; margin:0 auto 6px; }
.char-name{ font-family:'Press Start 2P'; font-size:11px; margin-bottom:3px; letter-spacing:1px;}
.char-ability{ font-size:13px; color:var(--gold); margin-bottom:4px; }
.char-desc{ font-size:15px; line-height:1.25; color:#cfc7de; min-height:56px;}
.char-stats{ margin-top:6px; font-size:13px; text-align:left; color:#a89bc4; }
.char-stats div{ display:flex; justify-content:space-between; padding:1px 3px;}
.char-stats span:last-child{ color:var(--bone); }
#startBtnWrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;}
#tagline{ font-size:15px; color:#a89bc4; max-width:560px; text-align:center; line-height:1.4; }
#creditFooter{ font-family:'Press Start 2P'; font-size:9px; color:#6a5c86; letter-spacing:1px; margin-top:4px; }

/* ===== INFO OVERLAY ===== */
#infoOverlay .overlay-panel{ max-width:520px; text-align:left; }
#infoOverlay h3{ font-family:'Press Start 2P'; font-size:13px; color:var(--gold); margin:14px 0 8px; }
#infoOverlay h3:first-child{ margin-top:0; }
#infoOverlay p, #infoOverlay li{ font-size:16px; line-height:1.4; color:#cfc7de; }
#infoOverlay ul{ margin:0 0 6px 0; padding-left:22px; }
#infoOverlay .legend-row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
#infoOverlay .legend-dot{ width:16px; height:16px; border:2px solid #000; flex-shrink:0; }

/* ===== HUD ===== */
#gameContainer{ position:absolute; inset:0; z-index:10; display:none; }
canvas#gameCanvas{ position:absolute; inset:0; display:block; background:var(--void); }
#hud{
  position:absolute; top:0; left:0; right:0; z-index:15; display:flex; justify-content:space-between;
  align-items:flex-start; padding:10px 12px; pointer-events:none; font-family:'Press Start 2P', monospace;
}
.hud-block{ pointer-events:auto; }
.bar-label{ font-size:8px; margin-bottom:2px; letter-spacing:1px; text-shadow:2px 2px #000;}
.bar-outer{ width:170px; height:16px; background:#000; border:3px solid var(--border); box-shadow:0 0 0 2px #000; margin-bottom:6px; position:relative; overflow:hidden; }
.bar-inner{ height:100%; width:100%; transition:width 0.15s ease-out; }
#hpBarInner{ background:linear-gradient(180deg, #ff8a75, var(--blood)); }
#spellBarInner{ background:linear-gradient(180deg, #8be9e0, var(--arcane)); }
#xpBarInner{ background:linear-gradient(180deg, #ffe27a, var(--gold)); }
.bar-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'VT323'; font-size:11px; color:#fff; text-shadow:1px 1px 1px #000; }
#statusBadges{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px; min-height:18px; }
.status-badge{ font-family:'VT323'; font-size:12px; padding:2px 6px; border:2px solid #000; border-radius:2px; color:#000; font-weight:bold; }
#comboText{ font-family:'Press Start 2P'; font-size:11px; color:var(--gold); text-shadow:2px 2px #000; opacity:0; transition:opacity 0.2s ease; }
#comboText.show{ opacity:1; }
#topRight{ text-align:right; }
#levelText, #scoreText{ font-size:10px; margin-bottom:4px; text-shadow:2px 2px #000; }
#levelText span, #scoreText span{ color:var(--gold); }
#muteBtn, #pauseBtn{ font-family:'Press Start 2P'; font-size:9px; background:var(--panel-2); color:var(--bone); border:2px solid var(--border); padding:6px 8px; cursor:pointer; pointer-events:auto; }
#pauseBtn{ margin-left:6px; }
#biomeLabel{ font-family:'Press Start 2P'; font-size:9px; color:#cfc7de; text-shadow:2px 2px #000; margin-top:4px; opacity:0.85; letter-spacing:1px; }
#bossBar{ position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:16; width:min(70vw,420px); text-align:center; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
#bossBar.show{ opacity:1; }
#bossName{ font-family:'Press Start 2P'; font-size:11px; margin-bottom:3px; text-shadow:2px 2px #000; }
#bossHpOuter{ height:14px; background:#000; border:3px solid var(--border); box-shadow:0 0 0 2px #000; }
#bossHpInner{ height:100%; background:linear-gradient(180deg,#ff8a75,var(--blood)); width:100%; transition:width 0.15s ease-out; }
#toast{
  position:absolute; top:70px; left:50%; transform:translateX(-50%) scale(0.8); z-index:30; padding:12px 22px;
  text-align:center; font-family:'Press Start 2P'; font-size:15px; color:var(--gold); opacity:0;
  transition:opacity 0.25s ease, transform 0.25s ease; pointer-events:none; text-shadow:3px 3px #000;
  background:rgba(10,7,20,0.55); border:2px solid rgba(255,210,63,0.4); border-radius:4px;
}
#toast.show{ opacity:1; transform:translateX(-50%) scale(1); }

/* ===== OVERLAYS ===== */
.overlay{ position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; background:rgba(6,3,12,0.9); overflow:auto; }
.overlay.show{ display:flex; }
.overlay-panel{ padding:28px 36px; text-align:center; max-width:420px; }
.overlay-title{ font-family:'Press Start 2P'; font-size:22px; margin-bottom:4px; }
#gameOverTitle{ color:var(--blood); text-shadow:0 0 12px var(--blood), 3px 3px #000; }
#pauseTitle{ color:var(--arcane); text-shadow:0 0 10px var(--arcane), 3px 3px #000; }
.overlay-stats{ font-size:17px; margin:12px 0 18px; color:#cfc7de; line-height:1.5;}
.overlay-stats span{ color:var(--gold); }
.overlay-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== TOUCH CONTROLS ===== */
#touchControls{ position:absolute; inset:0; z-index:17; pointer-events:none; display:none; }
body.touch-device #touchControls{ display:block; }
body.touch-device #hint{ display:none; }
#joystickZone{ position:absolute; left:0; bottom:0; width:52vw; height:62vh; pointer-events:auto; touch-action:none; }
#joystickBase{
  position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:3px solid rgba(255,255,255,0.18);
  left:34px; bottom:calc(64px + env(safe-area-inset-bottom,0px));
  box-shadow:0 0 0 3px rgba(0,0,0,0.4); touch-action:none;
}
#joystickKnob{
  position:absolute; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,0.14); border:2px solid rgba(255,255,255,0.4);
  left:43px; top:43px; transition:none; box-shadow:0 0 8px rgba(255,255,255,0.15); touch-action:none;
}
.touch-btn{
  position:absolute; pointer-events:auto; border-radius:50%; touch-action:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P'; color:var(--bone); text-shadow:2px 2px #000;
  border:3px solid var(--border); user-select:none; font-weight:bold;
}
#attackBtn{
  width:120px; height:120px; right:26px; bottom:calc(78px + env(safe-area-inset-bottom,0px));
  background:rgba(255,90,60,0.32); font-size:11px; box-shadow:0 0 14px rgba(255,90,60,0.4);
}
#attackBtn:active{ background:rgba(255,90,60,0.6); box-shadow:0 0 22px rgba(255,90,60,0.75); }
#powerBtn{
  width:88px; height:88px; right:150px; bottom:calc(130px + env(safe-area-inset-bottom,0px));
  background:rgba(78,205,196,0.32); font-size:9px; box-shadow:0 0 14px rgba(78,205,196,0.4);
}
#powerBtn:active{ background:rgba(78,205,196,0.6); box-shadow:0 0 22px rgba(78,205,196,0.75); }
#hint{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:15; font-size:13px; color:#9a8cb8; text-shadow:2px 2px #000; pointer-events:none; text-align:center; }

@media (max-width:640px){
  #gameTitle{ font-size:26px; }
  .char-card{ width:140px; padding:10px; }
  .char-desc{ font-size:13px; min-height:70px; }
  .bar-outer{ width:120px; }
}