:root {
  --ink: #f4ecff;
  --panel: rgba(22, 12, 48, 0.72);
  --edge: rgba(190, 150, 255, 0.35);
  --accent: #ffd6f3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #140c2e;
  color: var(--ink);
  font-family: Georgia, "Palatino Linotype", serif;
}

canvas { display: block; }

.hidden { opacity: 0 !important; pointer-events: none !important; }

/* Title / pause screen */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(40, 20, 80, 0.35), rgba(10, 5, 30, 0.85));
  transition: opacity 0.6s;
}
#overlay h1 {
  margin: 0;
  font-weight: normal;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 24px #b58cff, 0 0 60px #ff7ad9;
}
#overlay .hook { margin: 0.4rem 0 0.6rem; max-width: 34rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.55; opacity: 0.92; text-shadow: 0 0 12px rgba(20, 5, 40, 0.9); }
.start { margin: 0.5rem 0 0; font-size: 1.3rem; animation: breathe 2.4s ease-in-out infinite; }
.controls { margin: 0; font-size: 0.95rem; opacity: 0.7; }
@keyframes breathe { 50% { opacity: 0.45; } }

/* Frame-time readout (?stats=1) */
#stats {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  font: 12px/1.4 ui-monospace, Consolas, monospace;
  color: #cfe;
  pointer-events: none;
}

/* Photo mode (?view=...): nothing on screen but the glade */
body.photo #overlay, body.photo #ghost, body.photo #tabs, body.photo #menu-button { display: none; }

/* The lawyer's letter, opened full-screen: an old typed page on the dusk */
#letter {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 16px;
  background: rgba(10, 4, 24, 0.72);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: opacity 0.6s ease;
}
#letter .paper {
  width: min(620px, 100%);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: clamp(1.4rem, 5vw, 2.8rem) clamp(1.3rem, 5vw, 3.2rem);
  background: linear-gradient(175deg, #f4ecd8, #e8dcc0);
  color: #2e2636;
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(90, 70, 50, 0.25) inset;
  font: clamp(0.98rem, 2.2vw, 1.12rem) / 1.6 Georgia, "Palatino Linotype", serif;
  letter-spacing: 0.02em;
  transform: rotate(-0.6deg);
  transition: transform 0.6s ease;
}
#letter.hidden .paper { transform: rotate(-0.6deg) translateY(14px) scale(0.98); }
#letter .head { font-weight: bold; font-size: 1.25em; letter-spacing: 0.18em; }
#letter .subhead { font-style: italic; opacity: 0.75; padding-bottom: 0.7rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(46, 38, 54, 0.4); }
#letter .body p { margin: 0 0 0.7rem; }
#letter .body p:first-child { font-weight: bold; }
#letter .signature {
  margin-top: 0.4rem;
  font: italic 1.9em "Brush Script MT", "Segoe Script", cursive;
  color: #2a2466;
  transform: rotate(-3deg);
  transform-origin: left;
}
#letter .close-hint { margin: 0; color: var(--ink); opacity: 0.7; font-size: 0.95rem; }

/* Cutscenes */
#cine {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 120, 150, 0.25), rgba(4, 18, 40, 0.85));
  transition: opacity 1.5s;
}
#caption {
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 32px));
  text-align: center;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(120, 200, 255, 0.3);
  pointer-events: none;
  transition: opacity 1.2s;
}
#fade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 1.5s;
}
#endcard {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: opacity 2s;
}
#endcard h1 {
  margin: 0;
  font-weight: normal;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 24px #b58cff, 0 0 60px #ff7ad9;
}
#endcard p { margin: 0; opacity: 0.7; }
/* Stacking: fade covers the scene and UI, captions and the end card sit above it */
#fade { z-index: 10; }
#caption { z-index: 11; }
#endcard { z-index: 12; }

/* Captions stay readable over bright light (the porch door) */
#caption { text-shadow: 0 0 6px rgba(20, 10, 30, 0.9), 0 0 24px rgba(20, 10, 30, 0.8), 0 0 50px rgba(20, 10, 30, 0.6); }

/* Hover label: the name of whatever the hand is over */
#hover-label {
  position: fixed;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.9rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* The conversation with the gate: a panel on the right, so the gate stays in view */
#talk {
  position: fixed;
  top: 4vh;
  right: 16px;
  bottom: 4vh;
  width: min(430px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: rgba(20, 10, 40, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 120, 210, 0.12);
  transition: opacity 0.4s;
  z-index: 5;
}
#talk .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem 0.6rem 1.2rem;
  border-bottom: 1px solid rgba(190, 150, 255, 0.2);
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
#talk .close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
#talk .close:hover { background: rgba(255, 255, 255, 0.1); }
#talk .log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: default;
}
#talk .bubble {
  max-width: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 1.02rem;
  white-space: pre-wrap;
}
#talk .bubble.gate { align-self: flex-start; background: rgba(255, 140, 210, 0.14); border: 1px solid rgba(255, 150, 220, 0.25); border-bottom-left-radius: 4px; }
#talk .bubble.player { align-self: flex-end; background: rgba(140, 200, 255, 0.14); border: 1px solid rgba(150, 200, 255, 0.25); border-bottom-right-radius: 4px; }
#talk .bubble.thinking { opacity: 0.7; animation: breathe 1.2s ease-in-out infinite; }
#talk form { display: flex; gap: 0.6rem; padding: 0.8rem; border-top: 1px solid rgba(190, 150, 255, 0.2); }
#talk textarea {
  flex: 1;
  resize: none;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: 1rem/1.4 Georgia, "Palatino Linotype", serif;
  outline: none;
}
#talk textarea:focus { border-color: var(--accent); }
#talk button[type=submit] {
  padding: 0 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(255, 150, 220, 0.15);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
#talk button[type=submit]:disabled { opacity: 0.45; cursor: default; }
body.photo #talk, body.photo #hover-label { display: none; }
/* Ghost text: words about the glade drift in over the scene, a sentence at a time */
/* Ghost text: big, across the middle of the screen, the game running underneath */
#ghost {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1500px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
#ghost .line {
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  line-height: 1.25;
  color: #fbf4ff;
  text-shadow: 0 0 18px rgba(40, 10, 70, 0.95), 0 0 48px rgba(190, 150, 255, 0.55), 0 0 3px rgba(0, 0, 0, 0.8);
  transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s ease;
}
#ghost .line.ghosting { opacity: 0; filter: blur(7px); transform: translateY(8px); }
#ghost .line.ghosting.in { opacity: 0.95; filter: blur(0); transform: none; }
#ghost.slow .line { transition-duration: 2.4s, 2.6s, 2.6s; } /* a reveal's words surface more slowly */
#ghost.fading .line { opacity: 0 !important; filter: blur(6px) !important; transform: translateY(-6px) !important; transition: opacity 1.5s ease, filter 1.5s ease, transform 1.5s ease; }

/* The objective, always at the top of the gate panel */
#talk .objective {
  padding: 0.55rem 1.2rem 0.65rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #ffe0f4;
  background: rgba(255, 140, 210, 0.08);
  border-bottom: 1px solid rgba(190, 150, 255, 0.2);
}

/* Progress tab (top centre), the chat tab just to its right, and the progress panel */
#tabs {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
#chat-tab {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.45rem;
  white-space: nowrap;
}
#progress-tab, #chat-tab {
  padding: 0.35rem 1.1rem 0.45rem;
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--panel);
  color: var(--ink);
  font: 1.05rem Georgia, "Palatino Linotype", serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 140, 210, 0.15);
  transition: opacity 0.3s;
}
#progress-tab .petal, #chat-tab .petal { color: #ff9ad8; }
#progress-tab:hover, #chat-tab:hover { background: rgba(40, 20, 70, 0.85); }
#progress-panel {
  position: fixed;
  top: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem 1.3rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(20, 10, 40, 0.9);
  backdrop-filter: blur(8px);
  z-index: 6;
  transition: opacity 0.3s;
}
#progress-panel h2 { margin: 0 0 0.4rem; font-weight: normal; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#progress-panel h3 { margin: 1rem 0 0.4rem; font-weight: normal; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 0.85; }
#progress-panel .question { margin: 0; font-size: 1.2rem; line-height: 1.4; }
#progress-panel .clue { margin: 0 0 0.7rem; }
#progress-panel .clue b { display: block; font-weight: normal; color: #ffe0f4; margin-bottom: 0.15rem; }
#progress-panel .clue p { margin: 0; font-style: italic; opacity: 0.9; line-height: 1.4; }

/* Pause menu */
#menu-button {
  position: fixed;
  top: 10px;
  left: 12px;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 6;
  transition: opacity 0.3s;
}
#pause {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(40, 20, 80, 0.55), rgba(10, 5, 30, 0.9));
  z-index: 9;
  transition: opacity 0.3s;
}
#pause h1 { margin: 0 0 0.5rem; font-weight: normal; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.08em; text-shadow: 0 0 24px #b58cff, 0 0 60px #ff7ad9; }
#pause .resume {
  padding: 0.55rem 2rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 150, 220, 0.15);
  color: var(--ink);
  font: 1.15rem Georgia, "Palatino Linotype", serif;
  cursor: pointer;
}
#pause .toggle { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; cursor: pointer; }
#pause .toggle input { width: 1.1rem; height: 1.1rem; accent-color: #ff9ad8; }
#pause .slider { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; }
#pause .slider input { width: 11rem; accent-color: #ff9ad8; cursor: pointer; }
#pause .slider output { min-width: 2.6rem; opacity: 0.8; }
#pause .controls { margin: 0.5rem 0 0; opacity: 0.7; text-align: center; }

/* Full-screen cutscene video (video/pond.mp4, video/ending.mp4) */
#cutscene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 13;
  cursor: pointer;
}
/* During the ending, nothing on screen but the scene */
body.ending #tabs, body.ending #progress-panel, body.ending #menu-button, body.ending #hover-label { display: none; }

/* A message sent while she's thinking waits, faded, until she's done */
#talk .bubble.pending { opacity: 0.5; font-style: italic; }
/* What the glade just showed, pinned in the conversation to reread while answering */
#talk .bubble.note {
  align-self: center;
  max-width: 94%;
  background: rgba(255, 244, 220, 0.08);
  border: 1px dashed rgba(255, 226, 170, 0.35);
  border-radius: 10px;
  font-style: italic;
  color: #fff1d8;
}
#talk .bubble.note b { display: block; font-style: normal; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.2rem; }
#talk .bubble.note p { margin: 0.15rem 0; }
#talk .bubble.fading { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }