:root {
  --ink: #2e2718;
  --paper: #f2ede0;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.night {
  --ink: #ece7da;
  --paper: #10142a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #f6d9a8; transition: background 1.4s ease; }
body.night { background: #0a0f24; }
body {
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}
#island { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* veil intro */
#veil {
  position: fixed; inset: 0; z-index: 30;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.6s ease, background 1.4s ease;
}
#veil.gone { opacity: 0; pointer-events: none; }
.wordmark {
  font-weight: 500; font-size: clamp(2.6rem, 12vw, 5.5rem);
  letter-spacing: 0.12em; color: var(--ink);
  opacity: 0; transform: translateY(14px);
  animation: rise 2.2s var(--ease-spring) 0.3s forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* chrome */
.chrome { transition: opacity 0.9s ease; }
.chrome.idle { opacity: 0; pointer-events: none; }

#masthead {
  position: fixed; top: max(1.1rem, env(safe-area-inset-top)); left: 1.4rem; z-index: 20;
}
.wordmark-small {
  font-size: 1.25rem; letter-spacing: 0.22em; font-weight: 500;
  color: var(--ink); opacity: 0.75;
  transition: color 1.2s ease;
}

#caption {
  position: fixed; left: 0; right: 0; bottom: 15.5vh; z-index: 20;
  text-align: center; font-style: italic;
  font-size: clamp(1.3rem, 5.4vw, 1.9rem); color: var(--ink);
  padding: 0.2rem 2rem; pointer-events: none;
  opacity: 0; transform: translateY(10px);
  background: radial-gradient(ellipse 70% 160% at 50% 50%, rgba(242, 237, 224, 0.45), rgba(242, 237, 224, 0));
  transition: opacity 1.1s ease, transform 1.1s var(--ease-spring), color 1.2s ease;
  text-shadow: 0 1px 14px rgba(242, 237, 224, 0.75);
}
body.night #caption { text-shadow: 0 1px 14px rgba(8, 10, 20, 0.7); background: radial-gradient(ellipse 70% 160% at 50% 50%, rgba(16, 20, 42, 0.4), rgba(16, 20, 42, 0)); }
#caption.show { opacity: 1; transform: none; }

#whisper {
  position: fixed; left: 0; right: 0; bottom: 11vh; z-index: 20;
  text-align: center; font-size: clamp(0.95rem, 3.8vw, 1.1rem);
  color: var(--ink); opacity: 0; padding: 0.35rem 3rem; pointer-events: none;
  transition: opacity 1.4s ease, color 1.2s ease;
  text-shadow: 0 1px 10px rgba(242, 237, 224, 0.55);
  background: radial-gradient(ellipse 75% 170% at 50% 50%, rgba(242, 237, 224, 0.6), rgba(242, 237, 224, 0));
}
#whisper.show { opacity: 1; }
body.night #whisper {
  text-shadow: 0 1px 10px rgba(8, 10, 20, 0.65);
  background: radial-gradient(ellipse 75% 170% at 50% 50%, rgba(16, 20, 42, 0.5), rgba(16, 20, 42, 0));
}

/* dock */
#dock {
  position: fixed; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 20;
  display: flex; gap: 0.4rem;
  padding: 0.5rem 0.7rem; border-radius: 999px;
  background: rgba(242, 237, 224, 0.42);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(46, 39, 24, 0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: opacity 0.9s ease, background 1.2s ease;
}
body.night #dock {
  background: rgba(16, 20, 42, 0.45);
  box-shadow: 0 6px 24px rgba(4, 6, 14, 0.45), inset 0 1px 0 rgba(255,255,255,0.12);
}
.dot {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px 4px; border-radius: 14px;
  transition: transform 0.5s var(--ease-spring), background 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.dot i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); opacity: 0.35; display: block;
  transition: transform 0.5s var(--ease-spring), opacity 0.3s ease, background 1.2s ease;
}
.dot span {
  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink); opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s var(--ease-spring), color 1.2s ease;
}
.dot:hover { transform: translateY(-2px); }
.dot:active { transform: scale(0.9); }
.dot.active { background: rgba(242, 237, 224, 0.55); }
body.night .dot.active { background: rgba(236, 231, 218, 0.14); }
.dot.active i { opacity: 0.95; transform: scale(1.5); }
.dot.active span { opacity: 0.7; max-height: 1.2em; }

.dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* the masthead sits over the sky; on a bright-sky night-ink chapter (the
   black-sand shore) it keeps dark ink even though the caption needs light */
body.night.bright-sky .wordmark-small { color: #2e2718; }

/* Idle is the final visibility state, even while chapter copy is .show. */
#caption.show.idle,
#whisper.show.idle { opacity: 0; }

/* ---- place-true controls: rope, driftwood tags, a buoy for the hint ---- */
@font-face { font-family: "Gaegu"; src: url("./fonts/gaegu-latin-400.woff2") format("woff2"); font-display: swap; }
:root {
  --wood: #d9c29a;
  --wood-dim: #c4aa7c;
  --sun: #f2a65a;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.night { --wood: #2a3050; --wood-dim: #20263f; --sun: #f2a65a; }
/* the story note stays; the chrome visits */
.chrome { transition: opacity 0.3s ease, visibility 0.3s; }
body:not(.chrome-on) .chrome { opacity: 0; visibility: hidden; pointer-events: none; }
#caption { bottom: max(14.5rem, calc(env(safe-area-inset-bottom) + 13.5rem)); }
#whisper { bottom: max(11rem, calc(env(safe-area-inset-bottom) + 10rem)); }
#masthead {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.2rem 0.3rem 0.2rem 0.9rem; left: 0.9rem;
  background: var(--wood); border: 2.5px solid var(--ink);
  border-radius: 10px 20px 12px 18px / 18px 10px 20px 12px;
  box-shadow: 3px 4px 0 var(--ink);
}
.wordmark-small { font-family: "Gaegu", "Cormorant Garamond", serif; font-size: 1.7rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; opacity: 1; }
body.night.bright-sky .wordmark-small { color: var(--ink); }
.rope-btn, .drift-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 46px; min-width: 46px; padding: 0.3rem 0.8rem;
  font: 1rem system-ui, sans-serif; color: var(--ink);
  background: var(--paper); border: 2.5px dashed var(--ink);
  border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px; box-shadow: 2px 3px 0 var(--ink);
  transition: transform 0.14s var(--bounce), box-shadow 0.14s ease; -webkit-tap-highlight-color: transparent;
}
.rope-btn[aria-pressed="true"] { background: var(--wood-dim); border-style: solid; }
.rope-btn svg, .drift-btn svg, .chrome-hint svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rope-btn svg { width: 22px; height: 22px; }
.drift-btn {
  min-height: 52px; padding: 0.55rem 1.5rem; font-size: 1.15rem; font-weight: 600;
  color: #2e2718; background: var(--sun); border-style: solid;
  border-radius: 20px 12px 22px 14px / 14px 22px 12px 20px; box-shadow: 3px 4px 0 var(--ink);
}
.drift-btn svg { width: 26px; height: 18px; }
.rope-btn:active, .drift-btn:active, .dot:active { transform: translate(2.5px, 3.5px); box-shadow: 0.5px 0.5px 0 var(--ink); }
#dock {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  bottom: max(1rem, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 1.6rem));
}
body.night #dock { background: none; box-shadow: none; }
#faces { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; padding-top: 14px; }
.rope { position: absolute; left: 0; top: 0; width: 100%; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-dasharray: 2 5; stroke-linecap: round; pointer-events: none; opacity: 0.8; }
.dot {
  position: relative; min-height: 54px; padding: 8px 2px 6px; gap: 2px; justify-content: center;
  background: var(--wood); border: 2.5px solid var(--ink);
  border-radius: 8px 14px 9px 13px / 13px 9px 14px 8px; box-shadow: 2px 3px 0 var(--ink);
}
.dot:nth-of-type(odd) { transform: rotate(-1.2deg); }
.dot:nth-of-type(even) { transform: rotate(1deg) translateY(2px); }
.dot:hover { transform: translateY(-2px); }
.dot i { width: 10px; height: 10px; border: 2px solid var(--ink); background: transparent; opacity: 1; border-radius: 50% 46% 52% 48%; }
.dot span { font-family: system-ui, sans-serif; font-size: 1rem; letter-spacing: 0; opacity: 1; max-height: 1.4em; color: var(--ink); }
.dot.active { background: var(--sun); }
body.night .dot.active { background: var(--sun); }
.dot.active span { color: #2e2718; opacity: 1; }
.dot.active i { background: #c8442f; transform: none; opacity: 1; border-color: #2e2718; }
.dot:focus-visible, .rope-btn:focus-visible, .drift-btn:focus-visible, .chrome-hint:focus-visible { outline: 3px solid #fff3c2; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.chrome-hint {
  position: fixed; z-index: 19; top: max(0.2rem, env(safe-area-inset-top)); left: 50%; width: 64px; height: 56px;
  display: grid; place-items: center; appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--ink); filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5));
  animation: hint-sway 3.2s ease-in-out infinite;
}
body.night .chrome-hint { color: #f2ede0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
body.night.bright-sky .chrome-hint { color: #2e2718; }
.chrome-hint svg { width: 30px; height: 38px; stroke-width: 2.8; }
body.chrome-on .chrome-hint { visibility: hidden; animation: none; }
@keyframes hint-sway { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } }
@media (min-width: 760px) { #dock { width: 460px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }