:root {
  --balloon-bg: rgba(10, 8, 20, 0.6);
  --balloon-border: #fff8d6;
  --accent: #ffd56f;
  --pixel-border: #1a1326;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'VT323', monospace;
  background: #0a0612;
  color: #fff;
}

.hidden {
  display: none !important;
}

/* CRT scanline overlay - retro RPG feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  mix-blend-mode: multiply;
}

/* ====================== TITLE SCREEN ====================== */

#title-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.title-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1c1430 0%, #2e1f4a 45%, #3a2150 75%, #532a4a 100%);
}

.title-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 10% 90%, rgba(255,255,255,0.3) 50%, transparent 51%);
  background-size: 100% 100%;
}

.title-decoration.moon {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 120px;
  height: 120px;
  background: #ffe7a0;
  box-shadow:
    0 0 0 8px #f3c66a,
    0 0 60px 20px rgba(255, 230, 160, 0.35);
  clip-path: polygon(
    20% 0%, 80% 0%, 100% 20%, 100% 80%,
    80% 100%, 20% 100%, 0% 80%, 0% 20%
  );
}

.title-content {
  position: relative;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
  animation: fadeInUp 1.2s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.game-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.4rem, 5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.6;
  text-shadow:
    3px 3px 0 #1a1326,
    0 0 24px rgba(0,0,0,0.5);
}

.game-title .highlight {
  color: var(--accent);
  position: relative;
}

.game-subtitle {
  margin-top: 22px;
  font-family: 'VT323', monospace;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: rgba(255,255,255,0.75);
  letter-spacing: 1px;
}

.vn-button {
  margin-top: 46px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 16px 36px;
  border: 4px solid var(--accent);
  border-radius: 0;
  background: var(--pixel-border);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 1px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

.vn-button:hover {
  background: var(--accent);
  color: var(--pixel-border);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}

.vn-button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* ====================== GAME SCREEN ====================== */

#game-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#background-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1f2a3a;
  transition: filter 0.6s ease, background-color 0.8s ease, background-image 0.4s ease;
  filter: blur(0px);
  transform: scale(1.02);
}

#background-layer.blurred {
  filter: blur(10px);
}

#background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ====================== CHARACTERS ====================== */

#characters-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.character {
  position: absolute;
  bottom: 14%;
  height: 72%;
  max-width: 46%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45));
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}

.character.left {
  left: 4%;
  transform: translateX(-40px) scale(0.98);
}

.character.right {
  right: 4%;
  transform: translateX(40px) scale(0.98);
}

.character.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.character.exiting-left {
  opacity: 0 !important;
  transform: translateX(-120px) scale(0.95) !important;
}

.character.exiting-right {
  opacity: 0 !important;
  transform: translateX(120px) scale(0.95) !important;
}

.character.speaking {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45)) brightness(1.05);
}

.character.not-speaking {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45)) brightness(0.55) saturate(0.7);
}

/* ====================== DIALOGUE BOX ====================== */

#dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: min(880px, 92%);
  min-height: 130px;
  padding: 20px 30px 28px;
  background: var(--balloon-bg);
  border: 4px solid var(--balloon-border);
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 4px var(--pixel-border),
    6px 6px 0 rgba(0,0,0,0.5);
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  image-rendering: auto;
}

#speaker-name {
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  font-size: 0.85rem;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  transition: color 0.3s ease;
}

#dialogue-text {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.95);
  min-height: 3.2em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

#next-indicator {
  position: absolute;
  right: 24px;
  bottom: 14px;
  font-size: 1.4rem;
  color: var(--accent);
  animation: bounce 0.8s infinite steps(2);
  font-family: 'VT323', monospace;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ====================== SHOCK / SHAKE EFFECT ====================== */

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
}

#game-screen.shake {
  animation: screen-shake 0.35s ease;
}

@keyframes char-jolt {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-10px) scale(1.02); }
  50% { transform: translateX(8px) scale(0.99); }
  75% { transform: translateX(-4px) scale(1.01); }
}

.character.jolt {
  animation: char-jolt 0.4s ease;
}

#flash-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

#flash-overlay.flash {
  animation: flash-pop 0.25s ease;
}

@keyframes flash-pop {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ====================== TRANSITION SCREEN ====================== */

#transition-screen {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#transition-screen.show {
  opacity: 1;
  pointer-events: all;
}

#transition-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: rgba(255,255,255,0.9);
  letter-spacing: 2px;
  text-align: center;
  padding: 0 24px;
}

/* ====================== UI BUTTONS ====================== */

#ui-buttons {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

#mute-btn {
  background: rgba(20, 15, 35, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.25s ease;
}

#mute-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 720px) {
  .character {
    max-width: 60%;
    height: 60%;
  }
  #dialogue-box {
    width: 94%;
    padding: 16px 20px 20px;
  }
  #dialogue-text {
    font-size: 0.95rem;
  }
  .title-decoration.moon {
    width: 90px;
    height: 90px;
  }
}