* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d0d1a; font-family: 'Georgia', serif; overflow: hidden; }
canvas {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  image-rendering: pixelated;
}
#gameScreen { width: 100vw; height: 100vh; overflow: hidden; position: relative; }

/* ── GRAIN OVERLAY ───────────────────────────────────────
   Sits over everything, pointer-events off so it never blocks clicks.
   SVG turbulence noise via data URI — no external asset needed.       */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── VIGNETTE ────────────────────────────────────────────
   Radial gradient from transparent centre to dark edges.
   Applied to both screens so it's always present.         */
#mainScreen::after,
#gameScreen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(ellipse at center,
    transparent 38%,
    rgba(5, 3, 18, 0.55) 75%,
    rgba(5, 3, 18, 0.85) 100%
  );
}

/* ── WARM / DARK PALETTE SHIFT ───────────────────────────
   JS adds .candles-lit to body as candles are lit.
   CSS transitions the vignette and background warmth.     */
body.candles-lit #gameScreen::after {
  background: radial-gradient(ellipse at center,
    transparent 42%,
    rgba(30, 12, 4, 0.45) 75%,
    rgba(18, 6, 2, 0.80) 100%
  );
  transition: background 2s ease;
}

/* MAIN SCREEN */
#mainScreen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #0d0d1a;
}
#mainScreen h1 {
  color: #f5c842; font-size: 52px; letter-spacing: 6px;
  text-transform: uppercase; margin-bottom: 8px;
  text-shadow: 0 0 30px #f5c84299;
}
p.tagline {
  color: #8888aa; font-size: 26px; margin-bottom: 28px;
  letter-spacing: 2px;
}
p.flavour {
  color: #6a6888; font-size: 18px; line-height: 1.9;
  letter-spacing: 0.5px; text-align: center;
  max-width: 480px; margin-bottom: 48px;
}
p.flavour em { color: #9888aa; font-style: italic; }

#startBtn {
  padding: 14px 40px; font-size: 18px; letter-spacing: 3px;
  background: transparent; border: 2px solid #f5c842;
  color: #f5c842; cursor: pointer; text-transform: uppercase;
  font-family: 'Georgia', serif; transition: all 0.3s ease;
  margin-bottom: 12px;
}
#startBtn:hover { background: #f5c84222; box-shadow: 0 0 20px #f5c84255; }

#creditsBtn {
  padding: 7px 22px; font-size: 12px; letter-spacing: 2px;
  background: transparent; border: 1px solid #44446688;
  color: #8888aa66; cursor: pointer; text-transform: uppercase;
  font-family: 'Georgia', serif; transition: all 0.3s ease;
  border-radius: 3px;
}
#creditsBtn:hover { color: #f5c84288; border-color: #f5c84244; }

.candle-deco {
  position: absolute; bottom: 60px;
  font-size: 32px; opacity: 0.5;
}
.candle-left  { left: 80px; }
.candle-right { right: 80px; }

/* mute — shared style, used in both screens */
#muteBtn, #gameMuteBtn {
  position: absolute; bottom: 20px; right: 24px;
  background: transparent; border: 1px solid #44446688;
  color: #8888aa; cursor: pointer; font-size: 18px;
  padding: 6px 10px; border-radius: 4px;
  transition: color 0.2s, border-color 0.2s;
  z-index: 20;
}
#muteBtn:hover, #gameMuteBtn:hover { color: #f5c842; border-color: #f5c84266; }

#footerCredits {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; color: #33334455;
  font-size: 11px; letter-spacing: 2px;
}

/* CREDITS OVERLAY */
#creditsOverlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(4,3,14,0.88);
  align-items: center; justify-content: center;
  z-index: 50;
}
#creditsPanel {
  background: #12102a;
  border: 1px solid #f5c84233;
  border-radius: 8px;
  padding: 40px 52px;
  text-align: center;
  max-width: 420px; width: 90%;
}
.credits-title {
  font-size: 13px; letter-spacing: 5px;
  color: #f5c842; margin-bottom: 28px;
}
.credits-row {
  display: flex; justify-content: space-between;
  margin-bottom: 12px; font-size: 13px;
  border-bottom: 1px solid #ffffff08; padding-bottom: 10px;
}
.credits-role { color: #8888aa; letter-spacing: 1px; }
.credits-name { color: #c8b880; }
.credits-note {
  margin-top: 22px; font-size: 14px; color: #6a6888;
  line-height: 1.8; font-style: italic;
}
.credits-close {
  margin-top: 28px;
  padding: 8px 28px; font-size: 12px; letter-spacing: 2px;
  background: transparent; border: 1px solid #44446688;
  color: #8888aa; cursor: pointer; text-transform: uppercase;
  font-family: 'Georgia', serif; border-radius: 3px;
  transition: all 0.2s;
}
.credits-close:hover { color: #f5c842; border-color: #f5c84266; }

/* GAME SCREEN */
#gameScreen { display: none; position: relative; }

/* DIALOGUE BOX */
#dialogue {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 600px; background: #1a1a2e;
  border: 2px solid #f5c842; border-radius: 8px;
  padding: 14px 20px; color: #f5e6a3;
  font-size: 15px; line-height: 1.5;
  display: none; text-align: center;
  pointer-events: none;
}
#dialogue span { color: #f5c842; font-weight: bold; }