/* The Friday Night Elsewhere — web app styles.
   Mirrors the Roblox client's look: rainy Seattle night title, black
   audiobook backdrop, gold accents, per-speaker caption colors. */

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

:root {
  --gold: #f0d278;
  --panel: #12121a;
  --panel-stroke: #5a5578;
  --text: #dedce6;
  --dim-text: #a09eaa;
}

html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--text); }

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ---------- Title screen ---------- */

#sky {
  position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #080818 0%, #161234 50%, #34224e 85%, #46305c 100%);
}

#moon {
  position: absolute; left: 76%; top: 24%; width: 110px; height: 110px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #e6e8f5;
  box-shadow: 0 0 40px 14px rgba(200, 210, 255, 0.45);
  animation: moonpulse 5.6s ease-in-out infinite;
}
@keyframes moonpulse {
  0%, 100% { box-shadow: 0 0 40px 14px rgba(200, 210, 255, 0.35); }
  50%      { box-shadow: 0 0 55px 20px rgba(200, 210, 255, 0.6); }
}

#skyline { position: absolute; inset: 0; }
.tower {
  position: absolute; bottom: 0; transform: translateX(-50%);
  background: #100e1e; display: grid; padding: 12px 6px; gap: 4px;
}
.tower .win { border-radius: 1px; }

.needle-mast {
  position: absolute; bottom: 0; width: 8px; height: 300px;
  transform: translateX(-50%); background: #100e1e;
}
.needle-saucer {
  position: absolute; bottom: 270px; width: 76px; height: 26px;
  transform: translateX(-50%); background: #100e1e; border-radius: 50%;
}
.needle-ring {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 4px;
  transform: translate(-50%, -50%); background: rgba(250, 220, 140, 0.7);
  border-radius: 2px;
}

#rain { position: absolute; inset: 0; pointer-events: none; }
.drop {
  position: absolute; top: -30px; width: 2px; height: 18px;
  background: rgba(150, 180, 220, 0.45); transform: rotate(8deg);
  animation: fall linear infinite;
}
@keyframes fall {
  to { transform: translate(-2vw, 110vh) rotate(8deg); opacity: 0.2; }
}

#duck-roost { position: absolute; pointer-events: none; }
.duck-body { width: 22px; height: 14px; border-radius: 50%; background: rgba(240, 200, 90, 0.75); }
.duck-head {
  position: absolute; right: 0; top: -9px; width: 11px; height: 11px;
  border-radius: 50%; background: rgba(240, 200, 90, 0.75);
}
.duck-beak {
  position: absolute; right: -6px; top: 4px; width: 6px; height: 4px;
  border-radius: 2px; background: rgba(235, 140, 80, 0.75);
}

.title-block { position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; }
#kicker {
  font-weight: 600; letter-spacing: 0.35em; color: #c8cde6;
  font-size: clamp(14px, 2.2vw, 22px); opacity: 0; animation: fadein 1s 0.2s forwards;
}
#big-title {
  font-family: "Luckiest Guy", cursive; font-size: clamp(56px, 12vw, 150px);
  line-height: 1.1; margin-top: 6px;
  background: linear-gradient(180deg, #b4f0fa 0%, #82bef5 50%, #aa78e6 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px #140c28;
  opacity: 0; animation: fadein 1.4s 0.6s forwards, shimmer 4s 2s ease-in-out infinite;
}
@keyframes shimmer { 50% { background-position: 0 100%; } }
#subtitle {
  font-family: "Merriweather", serif; color: #d7cdeb;
  font-size: clamp(16px, 2.4vw, 26px);
  opacity: 0; animation: fadein 1.2s 1.3s forwards;
}
@keyframes fadein { to { opacity: 1; } }

#begin-prompt {
  position: absolute; bottom: 60px; left: 0; right: 0; text-align: center;
  color: #e6ebfa; font-size: 20px; animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }

/* ---------- Story screen ---------- */

#story { background: #000; }

/* Storyboard art: two stacked layers crossfade as the scene progresses, with
   a scrim so captions/choices stay legible over any artwork. */
#scene-art { position: absolute; inset: 0; overflow: hidden; background: #000; }
#scene-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
#scene-art img.visible { opacity: 1; }
#scene-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 22%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.75) 100%);
}

#chapter {
  position: absolute; top: 36px; left: 0; right: 0; text-align: center;
  color: #d8d5e2; font-size: 15px; letter-spacing: 0.08em;
  transition: opacity 0.8s; opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  z-index: 2;
}

#pause-btn {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
  background: #1c1c26; color: var(--text); border: 1.5px solid var(--panel-stroke);
  border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer;
  z-index: 2;
}
#pause-btn:hover { border-color: var(--gold); }

#caption {
  position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%);
  width: min(75vw, 900px); text-align: center;
  z-index: 2;
}
#speaker {
  font-weight: 700; font-size: 19px; margin-bottom: 16px;
  opacity: 0; transition: opacity 0.4s;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
#line-text {
  font-family: "Merriweather", serif; font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.55; color: var(--text);
  opacity: 0; transition: opacity 0.4s;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
#line-text.narrator { font-style: italic; }
#caption.visible #speaker, #caption.visible #line-text { opacity: 1; }

#choices {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: min(55vw, 640px); display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
  z-index: 2;
}
#choice-prompt {
  font-family: "Merriweather", serif; font-weight: 700; text-align: center;
  color: var(--gold); font-size: 18px; margin-bottom: 4px;
}

button.story-btn {
  background: #1c1c26; color: #e6e4eb; border: 1.5px solid var(--panel-stroke);
  border-radius: 10px; padding: 14px 16px; font-size: 17px; font-family: inherit;
  cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s;
}
button.story-btn:hover { border-color: var(--gold); background: #232331; }
button.story-btn.accent { border-color: var(--gold); }
button.story-btn.danger { border-color: #c8786e; }
button.story-btn.muted { border-color: #78787f; color: #b8b6bf; }
button.story-btn.left { text-align: left; }

/* ---------- Modals (pause / chapters / endings / slots) ---------- */

#modal-root, #slots {
  background: rgba(0, 0, 0, 0.55); z-index: 40;
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
}
.modal-panel {
  background: var(--panel); border: 1.5px solid var(--panel-stroke);
  border-radius: 14px; padding: 26px 28px; width: min(92vw, 480px);
  display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.modal-panel h2 { font-family: "Merriweather", serif; font-size: 24px; font-weight: 400; }
.modal-panel .sub { color: var(--dim-text); font-size: 14px; }
.modal-panel .ending-title { font-family: "Merriweather", serif; font-weight: 700; font-size: 21px; }
.modal-panel .epilogue { font-family: "Merriweather", serif; color: #b4b0be; font-size: 16px; line-height: 1.5; }

.slot-row { display: flex; gap: 8px; }
.slot-row .story-btn { flex: 1; }
.slot-row .reset { flex: 0 0 auto; }

/* ---------- Version badge (bottom-right, every screen) ---------- */

#version-badge {
  position: fixed; right: 12px; bottom: 8px;
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(222, 220, 230, 0.4);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  z-index: 5; pointer-events: none;
}