/* ============================================================
   FIRST LIGHT — Styles (v2 — Everlasting Summer inspired)
   ============================================================ */

:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --text-primary: #eee8d5;
  --text-secondary: #b8a9c9;
  --accent: #f4845f;
  --accent-soft: #f7b267;
  --accent-pink: #e8a0bf;

  --morning: linear-gradient(180deg, #87CEEB 0%, #f7e7ce 100%);
  --afternoon: linear-gradient(180deg, #5b86e5 0%, #f7b267 100%);
  --sunset: linear-gradient(180deg, #2d1b69 0%, #f4845f 50%, #f7b267 100%);
  --evening: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --night: linear-gradient(180deg, #0a0a1a 0%, #1a1a2e 100%);
  --rain: linear-gradient(180deg, #4a4a5a 0%, #7a7a8a 30%, #9a9aa0 100%);
  --festival: linear-gradient(180deg, #f7b267 0%, #f4845f 40%, #e8a0bf 100%);

  --dialogue-bg: rgba(10, 10, 26, 0.92);
  --dialogue-border: rgba(244, 132, 95, 0.3);
  --choice-bg: rgba(20, 15, 40, 0.92);
  --choice-hover: rgba(244, 132, 95, 0.2);
  --choice-border: rgba(244, 132, 95, 0.5);

  --font-heading: 'M PLUS Rounded 1c', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;

  --transition-bg: 600ms;
  --transition-char: 500ms;
  --transition-expr: 350ms;

  --speaker-sora: #7eb8da;
  --speaker-haruki: #c9b87a;
  --speaker-teacher: #9ab897;
  --speaker-classmate: #d4a0c0;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ========== SCREENS ========== */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms ease;
  z-index: 1;
}
.screen.active { opacity: 1; pointer-events: auto; z-index: 10; }

.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(6px);
  animation: overlayIn 200ms ease;
}
@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== MAIN MENU ========== */
.menu-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,5,51,0.55) 0%, rgba(45,27,105,0.4) 30%, rgba(244,132,95,0.35) 70%, rgba(247,178,103,0.4) 100%),
    url('assets/bg/rooftop_sunset.webp') center / cover no-repeat;
  overflow: hidden;
}

.menu-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.menu-content {
  position: relative; z-index: 2;
  text-align: center; padding: 2rem;
}

.game-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 30px rgba(247, 178, 103, 0.7),
    0 0 60px rgba(244, 132, 95, 0.4),
    0 0 100px rgba(244, 132, 95, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.5rem;
  letter-spacing: 0.06em;
}

.game-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin-bottom: 3rem;
  max-width: 420px;
  margin-left: auto; margin-right: auto;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.menu-buttons {
  display: flex; flex-direction: column;
  gap: 0.9rem; align-items: center;
}

.menu-btn {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  padding: 0.75rem 2.8rem;
  min-width: 220px;
  background: rgba(20, 15, 40, 0.7);
  color: var(--text-primary);
  border: 2px solid var(--choice-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.menu-btn:hover, .menu-btn:focus-visible {
  background: var(--choice-hover);
  transform: scale(1.04);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(244, 132, 95, 0.2);
  outline: none;
}
.menu-btn:active { transform: scale(0.97); }
.menu-btn.small { font-size: 0.95rem; padding: 0.5rem 1.5rem; min-width: 130px; }

/* ========== SAKURA ========== */
.sakura-container {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.sakura {
  position: absolute;
  background: radial-gradient(ellipse at 30% 30%, #ffcbd5 0%, #ff8fab 50%, transparent 70%);
  border-radius: 50% 0 50% 50%;
  opacity: 0.5;
  animation: sakuraFall linear infinite;
}
@keyframes sakuraFall {
  0%  { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 0.6; }
  25% { transform: translateY(25vh) rotate(90deg) translateX(40px); }
  50% { transform: translateY(50vh) rotate(180deg) translateX(-30px); }
  75% { transform: translateY(75vh) rotate(270deg) translateX(35px); }
  100%{ transform: translateY(105vh) rotate(360deg) translateX(-15px); opacity: 0; }
}

/* ========== DAY TRANSITION ========== */
#day-transition { background: #000; flex-direction: column; }
.day-transition-content {
  text-align: center;
  opacity: 0;
  animation: dayFadeIn 1.2s ease 0.3s forwards;
}
@keyframes dayFadeIn {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}
.day-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.day-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--accent-soft);
  text-shadow: 0 0 30px rgba(247, 178, 103, 0.5);
  margin-bottom: 0.5rem;
}
.day-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--text-secondary);
  font-style: italic;
}

/* ========== GAME SCREEN ========== */
#game-screen { background: #000; }
.game-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity var(--transition-bg) ease;
}
.game-bg-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: opacity var(--transition-bg) ease;
}

/* ========== STARS ========== */
.stars-container {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  transition: opacity 1.2s ease;
}
.stars-container.visible { opacity: 1; }
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0% { opacity: 0.2; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.4); }
}

/* ========== RAIN ========== */
.rain-container {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  transition: opacity 1s ease;
  overflow: hidden;
}
.rain-container.visible { opacity: 1; }
.raindrop {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.6));
  animation: rainFall linear infinite;
}
@keyframes rainFall {
  0% { transform: translateY(-20px); }
  100% { transform: translateY(105vh); }
}

/* ========== CHARACTER ========== */
.character-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 85vh;
  pointer-events: none;
  z-index: 5;
}

.character-sprite {
  position: relative;
  width: 100%; height: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--transition-char) ease,
    transform var(--transition-char) ease;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}
.character-sprite.visible {
  opacity: 1;
  transform: translateY(0);
}
.character-sprite img {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: opacity var(--transition-expr) ease;
}
.character-sprite img.expr-out {
  opacity: 0;
}

/* ========== GAME UI ========== */
.game-ui {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.game-ui > * { pointer-events: auto; }

.game-ui.hidden .quick-controls,
.game-ui.hidden .dialogue-box,
.game-ui.hidden .choices-container { opacity: 0; pointer-events: none; }

/* ========== QUICK CONTROLS BAR ========== */
.quick-controls {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px 10px;
  pointer-events: auto;
  z-index: 20;
}

.qc-btn {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  background: rgba(10, 10, 30, 0.5);
  color: rgba(238, 232, 213, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
  backdrop-filter: blur(4px);
}
.qc-btn:hover {
  background: rgba(244, 132, 95, 0.25);
  color: var(--text-primary);
  border-color: rgba(244, 132, 95, 0.4);
}
.qc-btn.active {
  background: rgba(244, 132, 95, 0.35);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(244, 132, 95, 0.3);
}

/* ========== DIALOGUE BOX ========== */
.dialogue-box {
  position: relative;
  background: var(--dialogue-bg);
  border-top: 2px solid var(--accent);
  border-radius: 16px 16px 0 0;
  min-height: 20vh;
  max-height: 26vh;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: opacity 300ms ease;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

.dialogue-box-inner {
  padding: 1.2rem 1.6rem 1rem;
  position: relative;
  height: 100%;
}

.speaker-name {
  position: absolute;
  top: -15px;
  left: 24px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 3px 18px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 200ms;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.speaker-name.visible { opacity: 1; }

.speaker-name.speaker-sora {
  background: linear-gradient(135deg, #4a7a9b, #6ba3c7);
  color: #fff;
}
.speaker-name.speaker-haruki {
  background: linear-gradient(135deg, #8a7a4a, #b8a860);
  color: #fff;
}
.speaker-name.speaker-teacher {
  background: linear-gradient(135deg, #5a8a5a, #7ab87a);
  color: #fff;
}
.speaker-name.speaker-classmate {
  background: linear-gradient(135deg, #8a5a7a, #b87aa0);
  color: #fff;
}
.speaker-name.speaker-default {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #fff;
}

.dialogue-text {
  font-size: clamp(0.95rem, 2.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--text-primary);
  min-height: 3.2em;
  padding-top: 0.6rem;
}
.dialogue-text .thought {
  font-style: italic;
  color: var(--text-secondary);
}

.continue-indicator {
  position: absolute;
  bottom: 12px; right: 18px;
  font-size: 0.85rem;
  color: var(--accent);
  opacity: 0;
  animation: bounce 1s ease-in-out infinite;
}
.continue-indicator.visible { opacity: 1; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ========== CHOICES ========== */
.choices-container {
  display: flex; flex-direction: column;
  gap: 0.8rem; align-items: center;
  padding: 1.2rem 2rem;
  margin-bottom: 0.5rem;
}
.choice-btn {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2.5vw, 1.08rem);
  padding: 0.9rem 2.2rem;
  width: 100%; max-width: 520px;
  background: var(--choice-bg);
  color: var(--text-primary);
  border: 2px solid var(--choice-border);
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 200ms ease;
  opacity: 0; transform: translateY(12px);
  animation: choiceAppear 400ms ease forwards;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}
.choice-btn:nth-child(2) { animation-delay: 120ms; }
.choice-btn:nth-child(3) { animation-delay: 240ms; }

@keyframes choiceAppear {
  to { opacity: 1; transform: translateY(0); }
}
.choice-btn:hover, .choice-btn:focus-visible {
  background: var(--choice-hover);
  border-color: var(--accent);
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(244, 132, 95, 0.2);
  outline: none;
}
.choice-btn:active { transform: scale(0.97); }

/* ========== TEXT HISTORY ========== */
.history-content {
  background: rgba(10, 10, 26, 0.95);
  border: 2px solid var(--dialogue-border);
  border-radius: 16px;
  width: 90vw; max-width: 700px;
  height: 70vh; max-height: 600px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.history-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.history-header h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--accent-soft);
}
.close-btn { font-size: 1rem; padding: 4px 10px; }
.history-lines {
  flex: 1; overflow-y: auto;
  padding: 1rem 1.5rem;
  scroll-behavior: smooth;
}
.history-lines::-webkit-scrollbar { width: 6px; }
.history-lines::-webkit-scrollbar-track { background: transparent; }
.history-lines::-webkit-scrollbar-thumb { background: rgba(244,132,95,0.3); border-radius: 3px; }

.history-entry { margin-bottom: 0.8rem; }
.history-speaker {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.history-speaker.hs-sora { color: var(--speaker-sora); }
.history-speaker.hs-haruki { color: var(--speaker-haruki); }
.history-speaker.hs-teacher { color: var(--speaker-teacher); }
.history-speaker.hs-narrator { color: rgba(238,232,213,0.5); }
.history-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.85;
}
.history-text.ht-thought {
  font-style: italic;
  color: var(--text-secondary);
}

/* ========== SAVE/LOAD MENU ========== */
.save-load-content {
  background: rgba(10, 10, 26, 0.95);
  border: 2px solid var(--dialogue-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  min-width: 320px; max-width: 90vw;
  text-align: center;
}
.save-load-content h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--accent-soft);
  margin-bottom: 1.2rem;
}
.save-slots {
  display: flex; flex-direction: column;
  gap: 0.6rem; margin-bottom: 1.2rem;
}
.save-slot {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.8rem 1.2rem;
  background: rgba(30, 25, 60, 0.8);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
}
.save-slot:hover {
  background: rgba(244, 132, 95, 0.15);
  border-color: rgba(244, 132, 95, 0.4);
}
.save-slot .slot-day {
  font-weight: 700;
  color: var(--accent-soft);
}
.save-slot .slot-date {
  font-size: 0.78rem;
  color: var(--text-secondary);
  float: right;
}

/* ========== PAUSE MENU ========== */
.pause-content {
  background: rgba(10, 10, 26, 0.95);
  border: 2px solid var(--dialogue-border);
  border-radius: 16px;
  padding: 2rem;
  min-width: 300px; max-width: 90vw;
  text-align: center;
}
.pause-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--accent-soft);
  margin-bottom: 1.5rem;
}
.pause-option {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.pause-option input[type="range"] {
  flex: 1; max-width: 160px;
  accent-color: var(--accent);
}
.pause-buttons {
  display: flex; flex-direction: column;
  gap: 0.7rem; margin-top: 1.5rem;
}

/* ========== EPILOGUE ========== */
#epilogue-screen { background: #000; }
.epilogue-content {
  text-align: center; padding: 2rem; max-width: 600px;
}
.epilogue-lines { min-height: 200px; }
.epilogue-line {
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.9;
  color: var(--text-primary);
  opacity: 0; margin-bottom: 1.2rem;
  animation: epilogueFade 1.5s ease forwards;
}
@keyframes epilogueFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.epilogue-title {
  margin-top: 2.5rem;
  opacity: 0;
  animation: epilogueFade 2s ease forwards;
}
.epilogue-thanks {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 1rem 0;
}
.epilogue-credit {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 1.5rem;
}

/* ========== BACKGROUND CLASSES (gradient fallbacks) ========== */
.bg-school_entrance .game-bg { background-color: #87CEEB; }
.bg-classroom .game-bg { background-color: #5b86e5; }
.bg-art_club .game-bg { background-color: #5b86e5; }
.bg-hallway .game-bg { background-color: #5b86e5; }
.bg-hallway_rain .game-bg { background-color: #7a7a8a; }
.bg-rooftop .game-bg { background-color: #f4845f; }
.bg-rooftop_sunset .game-bg { background-color: #f4845f; }
.bg-rooftop_night .game-bg { background-color: #1a1a2e; }
.bg-festival .game-bg { background-color: #f7b267; }
.bg-black .game-bg { background-color: #000; }

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  .character-container {
    width: 240px; height: 70vh;
  }
  .dialogue-box {
    min-height: 24vh; max-height: 30vh;
  }
  .dialogue-box-inner { padding: 1rem 1.1rem 0.8rem; }
  .speaker-name { font-size: 0.78rem; top: -12px; }
  .quick-controls { gap: 1px; padding: 6px 6px; }
  .qc-btn { font-size: 0.62rem; padding: 4px 8px; }
  .history-content { width: 95vw; height: 80vh; }
  .pause-content, .save-load-content { padding: 1.2rem; }
}

@media (min-width: 1200px) {
  .character-container { width: 480px; }
}

@media (min-width: 1600px) {
  .character-container { width: 540px; }
}

/* ========== UTILITIES ========== */
.fade-out { opacity: 0 !important; transition: opacity 500ms ease !important; }
.fade-in { opacity: 1 !important; transition: opacity 500ms ease !important; }