/* ===================================================================
   Popotamita's Cosmic Quest — style.css  (REDESIGN v2)
   Drop-in replacement: same selectors as the original, plus a 3-theme
   token system, polished frame/title/dialogue, speaker portrait, a
   themeable HUD bar, and optional CRT scanline/vignette treatment.

   Switch directions at runtime:  document.body.dataset.theme = 'dusk' | 'crt'
   (unset = Neon Bloom, the default).   Add class "crt-fx" to #game-container
   for scanlines + heavier vignette regardless of palette.
   =================================================================== */

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

/* ----------------------------- TOKENS ----------------------------- */
:root {                                   /* A · Neon Bloom (default) */
  --bg-deep:#0a0420; --bg-mid:#1a0a3e; --bg-light:#2d1b69;
  --star:#fff6d5; --pink:#ff6ec7; --pink-soft:#ffb3e0; --cyan:#5ee7f7;
  --yellow:#ffd23f; --orange:#ff8c42; --green:#7fd97f; --red:#ff5577;
  --lavender:#cda9ff; --text:#fff6d5; --shadow:rgba(0,0,0,0.5);
  --glow:0.6;                             /* bloom strength, read by polish.js */
  --frame-radius:6px;
  --scanline:0.05;                        /* 0..1 scanline opacity */
  --vignette:0.5;
}
body[data-theme="dusk"] {                 /* B · Aurora Dusk */
  --bg-deep:#140a2e; --bg-mid:#37164f; --bg-light:#5a2550;
  --star:#ffeede; --pink:#ff84cf; --pink-soft:#ffc2e6; --cyan:#79e0d6;
  --yellow:#ffcf6b; --orange:#ffb38a; --green:#9be0a0; --red:#ff7088;
  --lavender:#c9a8ff; --text:#ffeede;
  --glow:0.85; --frame-radius:16px; --scanline:0; --vignette:0.6;
}
body[data-theme="crt"] {                  /* C · Arcade CRT */
  --bg-deep:#07031a; --bg-mid:#160a36; --bg-light:#241152;
  --star:#ffffff; --pink:#ff4fc3; --pink-soft:#ff9fe0; --cyan:#3df0ff;
  --yellow:#ffe11f; --orange:#ff9a3d; --green:#5cff8f; --red:#ff3d6e;
  --lavender:#cda9ff; --text:#ffffff;
  --glow:1.0; --frame-radius:6px; --scanline:0.18; --vignette:0.78;
}

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'VT323', monospace;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
body { display: flex; align-items: center; justify-content: center; padding: 12px; }

/* --------------------------- CONTAINER ---------------------------- */
#game-container {
  position: relative;
  width: min(100vw - 24px, 800px);
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  border: 4px solid var(--pink);
  box-shadow: 0 0 0 4px #000, 0 0 30px var(--pink), 0 0 60px rgba(255,110,199,0.3);
  border-radius: var(--frame-radius);
  overflow: hidden;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
/* Dusk softens the frame; CRT turns it into a cabinet bezel. */
body[data-theme="dusk"] #game-container {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(201,168,255,0.5), 0 0 50px rgba(255,132,207,0.35), inset 0 0 60px rgba(255,132,207,0.12);
}
body[data-theme="crt"] #game-container {
  border: 16px solid #14111b; border-radius: 26px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 60px rgba(0,0,0,0.9), 0 0 0 3px #2a2630, 0 14px 40px rgba(0,0,0,0.6);
}

#game-canvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: crosshair;
}

/* Scanline + vignette overlays (pseudo-elements so no extra DOM).
   Vignette is always subtle; scanlines kick in for crt theme / .crt-fx. */
#game-container::before,
#game-container::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#game-container::before {
  background: radial-gradient(ellipse 76% 76% at 50% 48%, transparent 55%, rgba(0,0,0,calc(var(--vignette) * 1)) 100%);
}
#game-container::after {
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 1px, transparent 1px, transparent 3px);
  opacity: var(--scanline); mix-blend-mode: multiply;
}
#game-container.crt-fx { /* force the full CRT treatment on any palette */ }
#game-container.crt-fx::after { opacity: 0.18; }

/* ------------------------------ HUD ------------------------------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; pointer-events: none;
}
#scene-label {
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: var(--pink-soft); text-shadow: 2px 2px 0 #000; letter-spacing: 1px;
}
body[data-theme="crt"] #scene-label { color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 2px 2px 0 #000; }

#sound-toggle {
  pointer-events: auto; background: rgba(0,0,0,0.6); border: 2px solid var(--pink);
  color: var(--text); font-size: 16px; padding: 4px 8px; cursor: pointer; border-radius: 4px;
}
#sound-toggle:hover { background: var(--pink); }

/* Themeable progress bar — add <div id="hud-bar"><i></i></div> and set
   width on the <i>. Recolor per scene by overriding --bar-a/--bar-b. */
#hud-bar {
  position: absolute; top: 40px; left: 14px; width: 150px; height: 14px; z-index: 7;
  border: 2px solid var(--pink); background: rgba(0,0,0,0.5); border-radius: 7px; overflow: hidden;
}
#hud-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--bar-a, var(--pink)), var(--bar-b, var(--yellow)));
}

/* ---------------------------- DIALOGUE ---------------------------- */
#dialogue-box {
  position: absolute; bottom: 16px; left: 16px; right: 16px; min-height: 90px;
  padding: 14px 18px; z-index: 10;
  background: rgba(10,4,32,0.95);
  border: 3px solid var(--pink); border-radius: var(--frame-radius);
  box-shadow: 0 0 0 2px #000, 0 0 20px rgba(255,110,199,0.4);
  font-family: 'VT323', monospace; font-size: 22px; line-height: 1.2; cursor: pointer;
}
body[data-theme="dusk"] #dialogue-box {
  background: linear-gradient(180deg, rgba(40,20,60,0.94), rgba(26,14,46,0.96));
  box-shadow: 0 0 0 2px rgba(201,168,255,0.4), 0 8px 30px rgba(0,0,0,0.4);
}
body[data-theme="crt"] #dialogue-box {
  box-shadow: 0 0 0 2px #000, 0 0 16px var(--pink), inset 0 0 20px rgba(255,79,195,0.15);
}
#dialogue-box.hidden { display: none; }

/* Optional 44×44 speaker portrait. Add <canvas id="dialogue-portrait"> inside
   #dialogue-box and draw the speaker's sprite head into it (see polish.js
   FX.portrait). When present, indent the speaker line. */
#dialogue-portrait {
  position: absolute; top: -22px; left: 14px; width: 44px; height: 44px;
  border: 3px solid var(--pink); border-radius: var(--frame-radius);
  background: rgba(10,4,32,0.95); image-rendering: pixelated; z-index: 11;
}
#dialogue-box.has-portrait #dialogue-speaker { margin-left: 52px; }

#dialogue-speaker {
  font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--yellow);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;
}
#dialogue-text { color: var(--text); min-height: 50px; }
#dialogue-next {
  position: absolute; bottom: 6px; right: 12px; color: var(--pink); font-size: 16px;
  animation: bounce 0.8s ease-in-out infinite;
}
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ------------------------- TITLE SCREEN --------------------------- */
#title-screen {
  position: absolute; inset: 0; z-index: 20; overflow: hidden;
  background: radial-gradient(ellipse at center, var(--bg-light) 0%, var(--bg-deep) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#title-screen.hidden { opacity: 0; pointer-events: none; transition: opacity 0.8s; }

.title-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 70%, #fff, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent),
    radial-gradient(1px 1px at 90% 40%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #fff, transparent),
    radial-gradient(2px 2px at 70% 90%, var(--yellow), transparent),
    radial-gradient(2px 2px at 40% 10%, var(--pink), transparent);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.8; } 50% { opacity: 0.3; } }

.game-title {
  font-family: 'Press Start 2P', monospace; font-size: clamp(16px, 4.2vw, 34px);
  text-align: center; display: flex; flex-direction: column; gap: 8px; letter-spacing: 1px;
  position: relative; z-index: 1; animation: float 3s ease-in-out infinite;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--pink);
}
.title-accent { color: var(--pink); text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--cyan); }
body[data-theme="dusk"] .game-title { text-shadow: 0 0 14px var(--pink), 3px 3px 0 rgba(26,14,46,0.9); }
body[data-theme="dusk"] .title-accent { color: var(--lavender); text-shadow: 0 0 16px var(--lavender), 3px 3px 0 rgba(26,14,46,0.9); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.title-sub { margin-top: 20px; font-size: 24px; color: var(--pink-soft); position: relative; z-index: 1; }

#start-btn {
  margin-top: 30px; font-family: 'Press Start 2P', monospace; font-size: 14px;
  padding: 16px 32px; background: var(--pink); color: #1a0420; border: 4px solid #000;
  box-shadow: 0 0 0 4px var(--pink), 0 0 20px var(--pink); cursor: pointer;
  position: relative; z-index: 1; animation: pulse 1.2s ease-in-out infinite; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
}
/* Play triangle drawn in CSS (consistent across browsers; the ▶ emoji rendered
   wide+colored on Safari and threw the label off-center). Sits as a flex item
   so [triangle · PRESS START] is centered as one balanced unit. */
#start-btn::before {
  content: ''; flex: 0 0 auto;
  width: 0; height: 0; border-left: 13px solid currentColor;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  /* nudge up a hair to sit on the text's optical centre */
  position: relative; top: 1px;
}
#start-btn:hover { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow), 0 0 30px var(--yellow); }
body[data-theme="dusk"] #start-btn { border-radius: 10px; border-color: rgba(0,0,0,0.4); box-shadow: 0 0 28px var(--pink), 0 6px 0 rgba(0,0,0,0.25); }
body[data-theme="crt"] #start-btn { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow), 0 0 30px var(--yellow); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.title-credit { position: absolute; bottom: 16px; font-size: 16px; color: rgba(255,246,213,0.4); z-index: 1; }

/* ------------------- SCENE PICKER (DEV — remove for final) -------- */
#scene-picker {
  position: absolute; bottom: -36px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center; align-items: center;
  font-family: 'VT323', monospace; font-size: 14px; color: #888;
}
#scene-picker button {
  background: var(--bg-mid); color: var(--pink-soft); border: 1px solid var(--pink);
  padding: 4px 8px; font-family: 'VT323', monospace; font-size: 14px; cursor: pointer; border-radius: 3px;
}
#scene-picker button:hover { background: var(--pink); color: #000; }

/* ------------------------------ MOBILE ---------------------------- */
@media (max-width: 600px) {
  #dialogue-box { font-size: 18px; padding: 10px 14px; min-height: 70px; }
  #dialogue-speaker { font-size: 8px; }
  body[data-theme="crt"] #game-container { border-width: 10px; border-radius: 18px; }
}