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

:root {
  --bg0: #050505;
  --bg1: #0e0e0e;
  --bg2: #1a1a1a;
  --bg3: #242424;
  --g1:  #333333;
  --g2:  #555555;
  --g3:  #888888;
  --g4:  #bbbbbb;
  --white: #eeeeee;
  --pure: #ffffff;
  --h-accent: #4488cc;
  --d-accent: #cc2200;
  --e-accent: #228833;
  --a-accent: #bbaa00;
  --border: #2a2a2a;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  background:var(--bg0);
  color:var(--white);
  font-family:'Press Start 2P', monospace;
  overflow:hidden;
  image-rendering:pixelated;
}

/* ===== SCANLINE OVERLAY ===== */
body::after {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events:none;
  z-index:999;
}

/* ===== SCREENS ===== */
.screen {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}

/* ===== MENU ===== */
#menu-screen { background:var(--bg0); }

.stars-bg {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.star-dot {
  position:absolute; background:var(--white);
  animation:twinkle var(--d,3s) var(--del,0s) infinite alternate ease-in-out;
}
@keyframes twinkle { from{opacity:.05} to{opacity:.9} }

.logo-box { text-align:center; margin-bottom:48px; }
.logo-main {
  font-size:clamp(16px,3.5vw,32px);
  color:var(--white);
  text-shadow:0 0 30px rgba(255,255,255,0.3), 2px 2px 0 #000;
  letter-spacing:3px;
  animation:logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.logo-sub {
  font-size:clamp(6px,1.2vw,9px);
  color:var(--g3);
  margin-top:10px;
  letter-spacing:4px;
}

.menu-nav { display:flex; flex-direction:column; gap:10px; width:240px; }

.mbtn {
  font-family:'Press Start 2P', monospace;
  font-size:clamp(8px,1.4vw,11px);
  padding:13px 0;
  width:100%;
  cursor:pointer;
  border:2px solid var(--g1);
  background:var(--bg1);
  color:var(--g4);
  letter-spacing:1px;
  transition:all 0.12s;
  position:relative;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.mbtn:hover {
  border-color:var(--white);
  color:var(--pure);
  background:var(--bg2);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.06), 0 0 20px rgba(255,255,255,0.08);
  transform:translateX(3px);
}
.mbtn:active { transform:translateX(1px); }
.mbtn.primary {
  border-color:var(--white);
  color:var(--pure);
  box-shadow:0 0 18px rgba(255,255,255,0.1);
}

/* ===== MODE SELECT ===== */
#mode-screen { background:var(--bg0); display:none; }

.section-title {
  font-size:clamp(9px,1.8vw,14px);
  color:var(--white);
  text-shadow:2px 2px 0 #000;
  margin-bottom:36px;
  letter-spacing:2px;
  text-align:center;
}

.mode-grid { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; max-width:700px; }

.mode-card {
  width:280px;
  border:2px solid var(--g1);
  background:var(--bg1);
  padding:28px 22px;
  cursor:pointer;
  transition:all 0.18s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  text-align:center;
}
.mode-card:hover {
  border-color:var(--white);
  background:var(--bg2);
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(255,255,255,0.08);
}
.mode-card h3 {
  font-size:clamp(9px,1.6vw,12px);
  color:var(--white);
  margin-bottom:12px;
  letter-spacing:1px;
}
.mode-card p {
  font-family:'Rajdhani',sans-serif;
  font-size:14px;
  color:var(--g3);
  line-height:1.7;
  font-weight:600;
}
.mode-icon {
  width:60px; height:60px; margin:0 auto 16px;
}
.mode-icon canvas { width:60px; height:60px; image-rendering:pixelated; }

/* ===== RACE SELECT ===== */
#race-screen { background:var(--bg0); display:none; padding:20px; }

.race-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:740px; width:100%; }

.race-card {
  border:2px solid var(--g1);
  background:var(--bg1);
  padding:18px;
  cursor:pointer;
  transition:all 0.18s;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  --rc: var(--white);
}
.race-card:hover { border-color:var(--rc); background:var(--bg2); transform:translateY(-3px); box-shadow:0 0 20px color-mix(in srgb,var(--rc) 20%,transparent); }
.race-card.selected { border-color:var(--rc); box-shadow:0 0 28px color-mix(in srgb,var(--rc) 30%,transparent); }
.race-card.human  { --rc:var(--h-accent); }
.race-card.devil  { --rc:var(--d-accent); }
.race-card.elf    { --rc:var(--e-accent); }
.race-card.angel  { --rc:var(--a-accent); }

.race-preview { width:72px; height:72px; margin:0 auto 10px; }
.race-preview canvas { width:72px; height:72px; image-rendering:pixelated; }
.race-title { font-size:clamp(7px,1.3vw,10px); color:var(--rc); text-align:center; margin-bottom:8px; text-shadow:0 0 8px var(--rc); }
.race-desc  { font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--g3); text-align:center; line-height:1.6; font-weight:600; }

.stat-row { display:flex; align-items:center; gap:6px; margin-top:5px; }
.stat-lbl { font-size:5px; color:var(--g2); width:26px; flex-shrink:0; }
.stat-track { flex:1; height:5px; background:var(--bg3); }
.stat-fill  { height:100%; background:var(--rc); box-shadow:0 0 5px var(--rc); transition:width .4s; }

.skill-list { margin-top:10px; font-family:'Rajdhani',sans-serif; font-size:11px; color:var(--g2); line-height:1.8; }
.skill-list span { color:var(--rc); }

/* ===== GAME ===== */
#game-screen { display:none; }
#game-canvas { display:block; width:100%; height:100%; }

/* ===== HUD ===== */
#hud {
  position:fixed; top:0; left:0; right:0; height:58px;
  display:none; align-items:center; padding:0 18px; gap:18px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.9) 0%,transparent 100%);
  pointer-events:none; z-index:10;
}
.hbar-group { display:flex; flex-direction:column; gap:3px; }
.hbar-lbl { font-size:6px; color:var(--g2); letter-spacing:1px; }
.hbar-track { width:240px; height:20px; background:var(--bg2); border:1px solid var(--g1); clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px)); position:relative; }
.hbar-fill { height:100%; transition:width .25s; }
.hbar-fill.hp  { background:linear-gradient(to right,#661111,#cc2222); box-shadow:0 0 6px #cc222266; }
.hbar-fill.mp  { background:linear-gradient(to right,#113366,#2255aa); box-shadow:0 0 6px #2255aa66; }
.hbar-fill.xp  { background:linear-gradient(to right,#333300,#888800); box-shadow:0 0 6px #88880066; }
.hbar-val { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:9px; color:#fff; text-shadow:1px 1px 0 #000; }
.hud-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.hud-score { font-size:11px; color:var(--white); }

#top-center-hud {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; z-index:15;
}
#tc-time { font-size:16px; color:var(--g3); letter-spacing:2px; }
#tc-wave { font-size:26px; color:var(--white); text-shadow:0 0 15px rgba(255,255,255,0.4), 2px 2px 0 #000; }

/* ===== SKILL HUD ===== */
#skill-hud {
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  display:none; gap:10px; z-index:10; pointer-events:none;
}
.sk-slot {
  width: 58px;
  height: 68px;
  border: 2px solid var(--g1);
  background: rgba(0,0,0,0.82);
  position: relative;
  clip-path: polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 2px;
  --sc: var(--white);
}
.sk-slot.rdy {
  border-color: var(--sc);
  box-shadow: 0 0 10px color-mix(in srgb,var(--sc) 45%,transparent),
              inset 0 0 8px color-mix(in srgb,var(--sc) 10%,transparent);
}
.sk-key { position:absolute; top:3px; left:4px; font-size:5px; color:var(--g3); }
.sk-icon { width:28px; height:28px; flex-shrink:0; }
.sk-icon canvas { width:28px; height:28px; image-rendering:pixelated; display:block; }
.sk-cd { position:absolute; inset:0; background:rgba(0,0,0,0.78); display:flex; align-items:center; justify-content:center; font-size:7px; color:var(--white); }
.sk-name { font-size:4px; color:var(--g2); text-align:center; line-height:1.1; max-width:54px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:0; }

/* ===== ENEMY HUD ===== */
#enemy-hud { position:fixed; top:64px; right:18px; z-index:10; pointer-events:none; display:none; }
.en-name { font-size:7px; color:#cc2222; margin-bottom:3px; text-align:right; }
.en-track { width:200px; height:14px; background:var(--bg2); border:1px solid #661111; clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px)); }
.en-fill  { height:100%; background:linear-gradient(to right,#7f0000,#cc2222); box-shadow:0 0 6px #cc222266; transition:width .3s; }

/* ===== WAVE BANNER ===== */
#wave-banner {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(18px,4vw,36px); color:var(--white);
  text-shadow:3px 3px 0 #000, 0 0 30px rgba(255,255,255,0.2);
  z-index:25; display:none; text-align:center; pointer-events:none;
  animation:waveBannerAnim 2.5s ease-out forwards;
}
@keyframes waveBannerAnim {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.8); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-60%); }
}

/* ===== STORY SCREEN ===== */
#story-screen {
  position:fixed; inset:0; background:var(--bg0);
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:20;
}
.story-chapter { font-size:clamp(7px,1.4vw,11px); color:var(--g3); margin-bottom:12px; letter-spacing:2px; }
.story-title   { font-size:clamp(12px,2.5vw,22px); color:var(--white); margin-bottom:32px; text-shadow:2px 2px 0 #000; text-align:center; }
.story-dialogue-box {
  border:2px solid var(--g1);
  background:var(--bg1);
  padding:28px 32px;
  max-width:640px; width:90%;
  position:relative;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.story-speaker { font-size:8px; color:var(--white); margin-bottom:10px; }
.story-text { font-family:'Rajdhani',sans-serif; font-size:16px; color:var(--g4); line-height:1.9; font-weight:600; }
.story-prompt { font-size:7px; color:var(--g2); margin-top:20px; animation:blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* ===== NOTIF ===== */
.notif {
  position:fixed; top:68px; left:50%; transform:translateX(-50%);
  font-size:8px; color:var(--white);
  background:var(--bg2); border:1px solid var(--g2);
  padding:7px 16px; z-index:30;
  animation:notifAnim 2s ease-out forwards;
  white-space:nowrap;
}
@keyframes notifAnim {
  0%,70%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%  {opacity:0;transform:translateX(-50%) translateY(-12px)}
}

/* ===== GAME OVER ===== */
#game-over {
  position:fixed; inset:0; background:rgba(0,0,0,0.93);
  display:none; flex-direction:column;
  align-items:center; justify-content:center; z-index:50;
}
.go-title { font-size:clamp(18px,4.5vw,42px); color:var(--white); text-shadow:3px 3px 0 #000; margin-bottom:16px; animation:glitch 2s infinite; }
@keyframes glitch {
  0%,94%,100%{transform:translate(0);filter:none}
  95%{transform:translate(-3px,1px);filter:hue-rotate(90deg)}
  97%{transform:translate(3px,-1px);filter:hue-rotate(-90deg)}
}
.go-info { font-size:clamp(7px,1.5vw,10px); color:var(--g3); margin-bottom:32px; }

/* ===== CONTROLS PANEL ===== */
#ctrl-panel {
  display:none; margin-top:16px;
  border:1px solid var(--g1); background:var(--bg1);
  padding:16px 24px; max-width:420px; width:90%;
}
.ctrl-row { font-family:'Rajdhani',sans-serif; font-size:14px; color:var(--g3); padding:3px 0; font-weight:600; }
.ctrl-key  { color:var(--white); }

/* ===== BACK BTN ===== */
.back-btn {
  font-family:'Press Start 2P',monospace; font-size:7px;
  color:var(--g3); background:none; border:1px solid var(--g1);
  padding:7px 14px; cursor:pointer; margin-top:14px;
  transition:all .12s;
}
.back-btn:hover { color:var(--white); border-color:var(--white); }