/* ============================================================
   HELLCAST — Retro Doom-style CSS v2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --doom-red:    #cc0000;
  --doom-orange: #ff6600;
  --doom-yellow: #ffcc00;
  --doom-dark:   #0a0000;
  --doom-brown:  #3a1c00;
  --doom-green:  #00aa00;
  --doom-gray:   #555555;
  --hud-bg:      #111111;
  --hud-border:  #333300;
  --text-bright: #ffee88;
  --text-dim:    #886644;
  --scan-gap:    3px;
}

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

html, body {
  width:100%; height:100%; overflow:hidden;
  background:#000;
  font-family:'Share Tech Mono', monospace;
  cursor:none;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading-screen {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:100; background:#000;
}

.load-bg {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(180,0,0,0.04) 2px,rgba(180,0,0,0.04) 4px),
    radial-gradient(ellipse at center,#1a0000 0%,#000 70%);
  animation:bgPulse 4s ease-in-out infinite;
}
@keyframes bgPulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }

.load-content {
  position:relative; text-align:center; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
}

.title-block { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }

.title-skull {
  font-size:3rem;
  animation:floatSkull 3s ease-in-out infinite;
  filter:drop-shadow(0 0 12px #ff0000aa);
}
@keyframes floatSkull { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

.game-title {
  font-family:'VT323', monospace;
  font-size:clamp(5rem,10vw,9rem);
  color:var(--doom-red);
  letter-spacing:0.15em; line-height:1;
  text-shadow:0 0 20px #ff000088,0 0 60px #ff000044,4px 4px 0 #550000,8px 8px 0 #330000;
  animation:titleFlicker 8s ease-in-out infinite;
}
@keyframes titleFlicker { 0%,96%,100%{opacity:1;} 97%{opacity:0.85;} 98%{opacity:1;} 99%{opacity:0.9;} }

.subtitle {
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.65rem,1.4vw,0.95rem);
  color:var(--text-dim); letter-spacing:0.3em; text-transform:uppercase;
}

.title-divider {
  width:300px; height:2px;
  background:linear-gradient(90deg,transparent,var(--doom-red),transparent);
  margin-top:0.5rem;
}

/* ── Menu Buttons ── */
.menu-options { display:flex; flex-direction:column; gap:0.65rem; width:290px; }

.menu-btn {
  font-family:'Share Tech Mono',monospace; font-size:1.05rem;
  letter-spacing:0.15em; color:var(--text-bright);
  background:transparent; border:1px solid var(--doom-red);
  padding:0.7rem 1.4rem; cursor:pointer; text-align:left;
  position:relative; transition:all 0.15s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.menu-btn:hover {
  background:rgba(200,0,0,0.2); border-color:var(--doom-orange);
  color:#fff; text-shadow:0 0 8px var(--doom-orange);
  box-shadow:0 0 16px rgba(255,100,0,0.3) inset;
}
.menu-btn:active { transform:scale(0.97); }

.btn-arrow { color:var(--doom-red); margin-right:0.5rem; display:inline-block; transition:transform 0.15s; }
.menu-btn:hover .btn-arrow { color:var(--doom-orange); transform:translateX(4px); }

.controls-hint { font-size:0.62rem; color:var(--doom-gray); letter-spacing:0.1em; max-width:600px; }
.credits { font-size:0.58rem; color:#333; letter-spacing:0.1em; }

/* ============================================================
   LEVEL SELECT OVERLAY
   ============================================================ */
#level-select-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:200;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(4px);
}

.ls-panel {
  background:#0a0000;
  border:1px solid var(--doom-red);
  box-shadow:0 0 40px rgba(200,0,0,0.3) inset, 0 0 60px rgba(200,0,0,0.15);
  padding:1.5rem 2rem 2rem;
  max-width:780px; width:90vw;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}

.ls-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.5rem; padding-bottom:0.7rem;
  border-bottom:1px solid #330000;
}

.ls-title {
  font-family:'VT323',monospace; font-size:2rem;
  color:var(--doom-red); letter-spacing:0.2em;
  text-shadow:0 0 12px #ff000066;
}

.ls-close {
  background:transparent; border:1px solid #440000;
  color:#886644; font-size:1.1rem; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
  font-family:'Share Tech Mono',monospace;
}
.ls-close:hover { background:rgba(200,0,0,0.2); color:#fff; border-color:var(--doom-red); }

.ls-hint {
  font-size:0.65rem; color:#553300; letter-spacing:0.1em;
  margin-bottom:1.2rem; text-align:center;
}

/* ── Level Card Grid ── */
.ls-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0.7rem;
}

@media (max-width:600px) {
  .ls-grid { grid-template-columns:repeat(2,1fr); }
}

.level-card {
  background:#0d0000;
  border:1px solid #330000;
  padding:0.8rem 0.6rem;
  cursor:pointer; text-align:center;
  transition:all 0.15s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  position:relative;
  min-height:130px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:0.3rem;
}

.level-card:hover:not(.locked) {
  background:rgba(180,0,0,0.18);
  border-color:var(--doom-orange);
  box-shadow:0 0 12px rgba(255,100,0,0.2);
  transform:scale(1.03);
}

.level-card.locked {
  opacity:0.45; cursor:not-allowed;
  filter:grayscale(0.6);
}

.level-card.completed {
  border-color:#006600;
  background:#020d02;
}
.level-card.completed:hover {
  border-color:#00aa00;
  box-shadow:0 0 12px rgba(0,180,0,0.2);
}

.lc-num {
  font-size:0.6rem; color:#553300;
  letter-spacing:0.2em; font-family:'Share Tech Mono',monospace;
}

.lc-icon { font-size:1.6rem; line-height:1; }

.lc-name {
  font-family:'VT323',monospace; font-size:1.1rem;
  color:var(--text-bright); letter-spacing:0.05em;
  line-height:1.1;
}

.lc-sub {
  font-size:0.52rem; color:#664422;
  letter-spacing:0.05em; line-height:1.3;
  max-width:100%;
}

.lc-diff {
  font-size:0.75rem; color:var(--doom-yellow);
  letter-spacing:0.05em;
}
.level-card.locked .lc-diff { color:#333; }

/* ============================================================
   GAME CONTAINER
   ============================================================ */
#game-container {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
#game-wrapper { position:relative; display:inline-block; }

#gameCanvas { display:block; image-rendering:pixelated; image-rendering:crisp-edges; }

#scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent calc(var(--scan-gap) - 1px),rgba(0,0,0,0.18) calc(var(--scan-gap) - 1px),rgba(0,0,0,0.18) var(--scan-gap));
}
#vignette {
  position:absolute; inset:0; pointer-events:none; z-index:9;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.6) 100%);
}
#crosshair {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  margin-top:-40px; color:rgba(255,255,255,0.7); font-size:1.2rem;
  font-family:monospace; pointer-events:none; z-index:15;
  text-shadow:0 0 4px rgba(255,0,0,0.5); line-height:1; user-select:none;
}
#dmg-flash {
  position:absolute; inset:0; pointer-events:none; z-index:20;
  background:rgba(255,0,0,0); transition:background 0.08s;
}
#dmg-flash.active { background:rgba(255,0,0,0.35); }

#pickup-msg {
  position:absolute; top:15%; left:50%; transform:translateX(-50%);
  font-family:'VT323',monospace; font-size:1.8rem;
  color:var(--doom-yellow); text-shadow:2px 2px 0 #000,0 0 10px var(--doom-orange);
  pointer-events:none; z-index:25; opacity:0; transition:opacity 0.3s;
  text-align:center; white-space:nowrap;
}
#pickup-msg.show { opacity:1; }

/* ============================================================
   OVERLAYS (Pause, Death, Win)
   ============================================================ */
.overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.9rem;
  z-index:50; background:rgba(0,0,0,0.78); backdrop-filter:blur(2px);
}
.overlay h2 { font-family:'VT323',monospace; font-size:clamp(3rem,8vw,5rem); }

.death-title {
  color:var(--doom-red); text-shadow:0 0 30px #ff0000,4px 4px 0 #550000;
  animation:titleFlicker 3s ease-in-out infinite;
}
.death-sub, .win-sub { font-size:0.85rem; color:var(--text-dim); letter-spacing:0.2em; margin-bottom:0.5rem; }
.win-title { color:var(--doom-yellow); text-shadow:0 0 30px var(--doom-orange),4px 4px 0 #553300; }
.win-level-name {
  font-family:'VT323',monospace; font-size:1.6rem;
  color:var(--doom-orange); letter-spacing:0.15em;
  text-shadow:0 0 8px #ff660044;
}
.win-next-name {
  font-size:0.75em; color:#886644;
  display:block; margin-top:2px; letter-spacing:0.1em;
}

.hidden { display:none !important; }