/* Title page, journey map, chapter card, 仙境手帐. */

/* ── Title ─────────────────────────────────────────────── */
#page-title { cursor: pointer; }
.title-hero { position: absolute; right: 3vw; top: 50%; transform: translateY(-52%); width: min(46vw, 88vh); aspect-ratio: 1; }
.hero-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); animation: hover 9s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-1.2%) rotate(.6deg); } }
/* The words keep to the left 44vw and the floating island to the right 46vw at any width, so they never meet. */
.title-text { position: absolute; left: 8vw; top: 50%; transform: translateY(-55%); max-width: 40vw; z-index: 1; }
.title-kicker { letter-spacing: .5em; font-size: clamp(14px, 1.6vw, 26px); color: var(--cream); opacity: .9; }
.title-main { font-weight: 500; font-size: clamp(54px, 7vw, 150px); line-height: .95; margin: .08em 0 .05em; color: var(--cream); text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.title-sub { font-size: clamp(20px, 2.3vw, 38px); color: var(--cream); opacity: .9; }
.title-zh { letter-spacing: .24em; line-height: 1.6; font-size: clamp(16px, 1.45vw, 26px); color: var(--cream); text-shadow: 0 1px 2px rgba(5, 10, 30, .9), 0 0 16px rgba(5, 10, 30, .75); }
.lang-pick { position: absolute; top: 28px; right: 6vw; }
.lang-pick select, .slider select {
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--cream);
  background: transparent; border: 0; cursor: pointer; padding: 4px;
}
.lang-pick select option, .slider select option { color: #111; }
.begin { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); text-align: center; }
.begin-cta { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: .21em; color: var(--gold); font-size: clamp(10px, .88vw, 14px); animation: breathe 2.8s ease-in-out infinite; }
.begin-cta i { font-style: normal; }
.begin-note { display: block; margin-top: 12px; font-family: var(--sans); font-size: 12px; color: rgba(230, 198, 117, .6); letter-spacing: .05em; }
@keyframes breathe { 50% { opacity: .55; } }
.narration { position: absolute; left: 9vw; bottom: 14vh; font-style: italic; font-size: clamp(16px, 1.5vw, 24px); opacity: 0; margin: 0; transition: opacity 1.2s; }
#page-title.begun .narration { opacity: .9; }
#page-title.begun .begin { opacity: 0; transition: opacity .5s; }
.nowebgpu { position: absolute; left: 50%; bottom: 2vh; transform: translateX(-50%); font-family: var(--sans); font-size: 13px; color: #f0b0a8; }

/* ── Journey map ───────────────────────────────────────── */
.parchment {
  position: absolute; inset: 4vh 3vw; color: var(--ink);
  background: url('../art/parchment.webp') center / 100% 100% no-repeat;
}
.map-head { text-align: center; padding-top: 2.2vh; }
.map-kicker { letter-spacing: .5em; font-size: 13px; opacity: .5; }
.map-title { font-weight: 500; font-size: clamp(30px, 3.6vw, 56px); margin: .05em 0 0; }
.map-head .rule { width: 220px; margin: .3em auto; }
.map-sub { font-size: clamp(14px, 1.2vw, 18px); opacity: .7; }
.map-path { position: absolute; left: 4%; right: 4%; top: 17%; height: 56%; width: 92%; pointer-events: none; }
.map-path path { fill: none; stroke: rgba(29, 42, 82, .35); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-slots { list-style: none; margin: 0; padding: 0; position: absolute; left: 4%; right: 4%; top: 17%; height: 56%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; }
/* second row runs right-to-left so the path snakes */
.slot:nth-child(7) { grid-area: 2 / 6; } .slot:nth-child(8) { grid-area: 2 / 5; } .slot:nth-child(9) { grid-area: 2 / 4; }
.slot:nth-child(10) { grid-area: 2 / 3; } .slot:nth-child(11) { grid-area: 2 / 2; } .slot:nth-child(12) { grid-area: 2 / 1; }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.slot-btn { position: relative; width: min(11vw, 20vh); aspect-ratio: 1; border-radius: 50%; transition: transform .3s var(--ease); }
.slot-btn:hover { transform: scale(1.06); }
.slot-art { width: 100%; height: 100%; }
/* Not-yet-open planets: the same pale-blue line drawing, but printed onto the parchment (multiply drops the cold
   white ground) in a warmer, darker ink so it reads as a sketch rather than a grey ghost. */
.slot[data-state="far"] .slot-art, .slot[data-state="building"] .slot-art, .slot[data-state="supporter"] .slot-art { mix-blend-mode: multiply; }
.slot[data-state="far"] .slot-art { filter: grayscale(1) contrast(1.75) sepia(.7) saturate(1.5) hue-rotate(172deg) opacity(.72); }
.slot[data-state="building"] .slot-art, .slot[data-state="supporter"] .slot-art { filter: grayscale(1) contrast(1.7) sepia(.7) saturate(1.6) hue-rotate(170deg) opacity(.9); }
.slot[data-state="far"] .slot-btn:hover, .slot[data-state="building"] .slot-btn:hover, .slot[data-state="supporter"] .slot-btn:hover { transform: scale(1.03); }
.slot[data-state="open"] .slot-btn::after, .slot.selected .slot-btn::after {
  content: ''; position: absolute; inset: -5%; border-radius: 50%; border: 2px solid var(--gold-deep);
}
.slot[data-state="open"] .slot-btn::after { animation: ring 2.4s ease-in-out infinite; }
@keyframes ring { 50% { opacity: .4; transform: scale(1.04); } }
.slot.selected .slot-btn::after { border-width: 3px; box-shadow: 0 0 18px rgba(201, 162, 76, .5); }
.slot[data-state="visited"] .slot-btn::before { content: '✓'; position: absolute; top: 0; left: 4%; z-index: 1; color: var(--gold-deep); font-size: 20px; }
.slot-label { position: relative; font-size: 16px; margin-top: 6px; opacity: .82; min-height: 1.2em; }
.badge { position: absolute; top: -4%; right: 2%; color: var(--gold-deep); font-size: 20px; text-shadow: 0 0 6px #fff; }
.slot[data-badge="full"] .slot-btn { filter: drop-shadow(0 0 12px rgba(230, 180, 60, .7)); }
.slot[data-badge="lit"] .slot-btn { filter: drop-shadow(0 0 7px rgba(230, 198, 117, .6)); }
.map-info { position: absolute; left: 0; right: 0; bottom: 4.5vh; text-align: center; }
.map-info-ch { letter-spacing: .4em; font-size: 13px; font-family: var(--sans); opacity: .5; }
.map-info-name { font-size: clamp(18px, 1.6vw, 24px); margin-top: 4px; }
.map-info-line { font-size: clamp(17px, 1.5vw, 23px); opacity: .9; margin-top: 2px; }
.map-info-count { font-family: var(--sans); font-size: 13px; opacity: .6; margin-top: 4px; min-height: 1em; }
.map-go { margin-top: 8px; font-size: clamp(19px, 1.7vw, 26px); border-bottom: 1px solid rgba(29, 42, 82, .5); padding: 0 .3em 2px; }
.map-go-row { position: relative; display: inline-block; }
/* Read the original: a second button beside the main one, on the page and in the same ink, smaller and outlined, so the
   eye finds it right after "Step onto…" (the silk ribbon under the parchment's edge was missed by players). */
.map-go-row { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.map-original {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 14px 7px 12px;
  font: 500 clamp(15px, 1.25vw, 19px)/1 var(--serif); color: #1d2a52; letter-spacing: .02em;
  border: 1px solid rgba(29, 42, 82, .45); border-radius: 999px; background: rgba(255, 250, 235, .45);
  transition: background .25s, border-color .25s, translate .25s var(--ease);
}
.map-original:hover, .map-original:focus-visible { background: rgba(255, 250, 235, .85); border-color: rgba(29, 42, 82, .8); translate: 0 -2px; }
.map-original kbd { font: 600 11px/1 var(--sans); padding: 3px 5px; border: 1px solid rgba(29, 42, 82, .35); border-radius: 4px; opacity: .7; }
.map-original-book { width: 19px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; flex: none; }
/* One quiet tag for every not-yet-open state (建造中, 支持者内容): small ink caps under the name, no pill, always
   the same place, so the row reads as one line of notes rather than scattered stickers. */
.slot-coming { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 13px/1.4 var(--serif); letter-spacing: .06em; color: rgba(29, 42, 82, .72); }
.slot-coming::before, .slot-coming::after { content: '·'; margin: 0 .45em; color: var(--gold-deep); font-style: normal; }
.map-go i { font-style: normal; color: var(--gold-deep); }
.map-go:disabled { opacity: .45; cursor: default; }
/* Footer keys: one readable row, Settings and Prologue on the left, the word book on the right. */
.map-keys { position: absolute; left: 7.5vw; right: 7.5vw; bottom: 6vh; z-index: 3; display: flex; align-items: center; gap: 1.6em; pointer-events: none; }
.corner-key { pointer-events: auto; font-family: var(--sans); font-size: clamp(16px, 1.2vw, 20px); font-weight: 600; color: var(--ink); opacity: .85; transition: opacity .2s; }
.corner-key:hover { opacity: 1; }
.corner-key.right { margin-left: auto; }
.corner-key.map-prologue { font-weight: 500; }
.corner-key.map-prologue::before { content: '✦'; margin-right: .6em; font-size: .7em; vertical-align: .15em; color: var(--gold-deep); }
.corner-key kbd { margin-right: .25em; border-color: rgba(29, 42, 82, .65); background: rgba(255, 255, 255, .3); color: var(--ink); }

/* ── Chapter card ──────────────────────────────────────── */
.cc-text { position: absolute; left: 9vw; top: 24vh; max-width: 44vw; text-shadow: 0 1px 2px rgba(4, 8, 26, .95), 0 0 18px rgba(4, 8, 26, .8); }
/* a soft pool of night behind the words so the mottled sky never runs through them */
.cc-text::before { content: ''; position: absolute; inset: -14vh -8vw -12vh -9vw; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 11, 34, .8), rgba(6, 11, 34, .55) 55%, rgba(6, 11, 34, 0)); }
#page-chapter { isolation: isolate; }
.cc-num { font-family: var(--sans); font-weight: 700; letter-spacing: .3em; font-size: 15px; }
.cc-title { font-weight: 500; font-size: clamp(38px, 3.7vw, 62px); line-height: 1.1; margin: .25em 0 0; }
.cc-sub { font-size: clamp(19px, 1.5vw, 24px); color: var(--gold); }
.cc-intro { font-size: clamp(19px, 1.55vw, 26px); line-height: 1.7; margin-top: .8em; max-width: 40vw; color: #fffaf0; }
.cc-planet { position: absolute; right: 9vw; top: 14vh; width: min(24vw, 40vh); aspect-ratio: 1; }
.cc-planet-img { width: 100%; height: 100%; animation: hover 10s ease-in-out infinite; }
.cc-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cc-path path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 1 11; stroke-linecap: round; opacity: .75; vector-effect: non-scaling-stroke; }
.cc-rabbit { position: absolute; left: 0; top: 0; width: 56px; height: 56px; will-change: transform; }
.rabbit-img { width: 100%; height: 100%; animation: hop .42s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-9px) rotate(-4deg); } }
.cc-load { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); width: min(28vw, 440px); text-align: center; }
.cc-bar { position: relative; height: 2px; background: rgba(246, 239, 220, .3); }
.cc-fill { height: 100%; width: 0; background: var(--gold); }
.cc-star { position: absolute; top: 50%; transform: translate(-50%, -52%); color: var(--gold); font-style: normal; font-size: 15px; }
.cc-pct { margin-top: 14px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .14em; color: var(--cream); text-shadow: 0 1px 3px rgba(4, 8, 26, .9); }
.cc-error { margin-top: 12px; font-family: var(--sans); font-size: 14px; color: #f0b0a8; }

/* ── 仙境手帐 ──────────────────────────────────────────── */
#page-journal { overflow: auto; }
.journal-book {
  /* the same aged parchment as the journey map, same treatment; the torn margin is kept clear of the photos */
  position: relative; margin: 3vh auto; width: min(1240px, 94vw); min-height: 92vh; padding: 6vh 6vw 7vh; color: var(--ink);   /* the tray's height again at the foot (below), so the last captions scroll clear of it */
  background: url('../art/parchment.webp') center / 100% 100% no-repeat;
}
.jr-head { text-align: center; }
.jr-kicker { font-family: var(--sans); font-weight: 600; letter-spacing: .3em; font-size: 14px; color: #6b4a12; }
.jr-head h2 { font-weight: 500; font-size: clamp(30px, 3vw, 46px); margin: .1em 0; }
.jr-sub { font-size: clamp(18px, 1.4vw, 22px); font-style: italic; opacity: .85; }
.jr-sub-tr { font-family: var(--cjk), var(--serif); font-size: clamp(16px, 1.2vw, 19px); margin-top: 4px; color: #6b4a12; }
.jr-collage { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 34px; margin: 3vh 0; }
.jr-shot { margin: 0; width: 300px; padding: 12px 12px 14px; background: #fffdf6; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); transform: rotate(var(--tilt)); position: relative; }
.jr-shot::before { content: ''; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(230, 210, 150, .7); }
.jr-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.jr-caption { font-size: 22px; line-height: 1.75; margin: 10px 2px 0; }
.jr-tr { font-family: var(--cjk), var(--serif); font-size: 16px; opacity: .8; margin: 4px 2px 2px; }
.blank { display: inline-block; min-width: 4.5em; min-height: 1.5em; padding: 0 .2em; cursor: pointer; border-bottom: 2px dashed var(--gold-deep); text-align: center; color: var(--ink); font-weight: 600; transition: background .2s; }
.blank.filled { border-bottom-style: solid; color: #7a5310; background: rgba(230, 198, 117, .18); }
.blank.wrong { animation: shake .4s; border-bottom-color: #c0504d; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.jr-tray {
  /* the words to place stay in reach at the foot of the screen, in one row, on the page's own paper (Fable) */
  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 9px; min-height: 56px;
  margin: 1vh -3vw 0; padding: 30px 3vw 14px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(236, 222, 186, .97) 62%, rgba(236, 222, 186, 0) 100%);
}
.jr-tray:empty { display: none; }
/* Word chips: easy to grab with a mouse or a thumb (48px tall), small enough that a chapter's fit in one row. */
.chip, .chip.ghost { min-width: 72px; min-height: 48px; padding: .3em .85em; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 19px; line-height: 1.2; box-shadow: 0 5px 14px rgba(0, 0, 0, .28); touch-action: none; cursor: grab; transition: transform .15s var(--ease), box-shadow .15s; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.chip.selected { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); }
.chip.dragging { opacity: .35; }
.chip.ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg); }
.jr-seen { text-align: center; margin: 3vh 0 2vh; }
.jr-seen-title { font-family: var(--sans); font-size: 13px; letter-spacing: .2em; opacity: .55; margin-bottom: 8px; }
.seen-chip { margin: 3px; padding: .15em .7em; border: 1px solid rgba(29, 42, 82, .3); border-radius: 999px; font-size: 16px; }
.seen-chip[data-state="used"] { border-color: var(--gold-deep); color: #7a5310; }
/* The way back to the map closes the page (never over the words still to place); it lights up once every blank is filled. */
.jr-end { margin: 2vh 0 0; padding: 18px 0 22px; text-align: center; }
.jr-collage { padding-bottom: 12px; }
.jr-finished { display: none; margin: 0 0 10px; font-size: 22px; color: #7a5310; }
#jr-done { display: inline-block; color: var(--ink); border-color: var(--gold-deep); font-size: 20px; padding: .55em 1.6em; }
#jr-done i { font-style: normal; color: var(--gold-deep); }
.jr-support { display: inline-block; margin-left: 22px; color: var(--ink); font-size: 17px; }
#page-journal.complete .jr-finished { display: block; animation: rise .8s var(--ease); }
#page-journal.complete #jr-done { background: var(--ink); color: var(--cream); border-color: var(--ink); font-size: 22px; box-shadow: 0 0 0 4px rgba(201, 162, 76, .35), 0 8px 24px rgba(29, 42, 82, .35); animation: beckon 2.4s ease-in-out infinite; }
#page-journal.complete #jr-done i { color: var(--gold); }
@keyframes beckon { 50% { box-shadow: 0 0 0 9px rgba(201, 162, 76, .12), 0 8px 24px rgba(29, 42, 82, .35); } }
#page-journal.complete .jr-sub::after { content: ' ✦'; color: var(--gold-deep); }

/* Wide letter-spacing suits Chinese; Latin text gets small caps-style tracking instead. */
html:not([lang="zh-CN"]) .title-zh { letter-spacing: .04em; font-style: italic; font-size: clamp(18px, 1.6vw, 28px); }
html:not([lang="zh-CN"]) .map-info-ch, html:not([lang="zh-CN"]) .cc-num, html:not([lang="zh-CN"]) .jr-kicker { text-transform: uppercase; }

/* ── Prologue and the first map visit ───────────────────── */
/* The film is already an old book on a dark table: no frame of our own, it floats on the night sky with its
   edges melting into the dark and a little warm candlelight behind it. */
.prologue-book {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: min(90vh, 980px); aspect-ratio: 9 / 16; display: grid; place-items: center; isolation: isolate;
}
.prologue-book::before {
  content: ''; position: absolute; inset: -18% -60%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 40% 48% at 50% 52%, rgba(255, 196, 120, .22), rgba(255, 196, 120, .08) 50%, rgba(255, 196, 120, .02) 72%, transparent 85%);
}
#prologue-video {
  height: 100%; width: 100%; object-fit: cover; background: transparent;
  /* A wide, eased feather on every side (rounded off at the corners) so the old book melts into the night;
     the lower band stays clear for the film's own subtitles. */
  --feather-x: linear-gradient(90deg, transparent, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .36) 10%, rgba(0, 0, 0, .76) 15%, #000 20%, #000 80%, rgba(0, 0, 0, .76) 85%, rgba(0, 0, 0, .36) 90%, rgba(0, 0, 0, .08) 95%, transparent);
  --feather-y: linear-gradient(180deg, transparent, rgba(0, 0, 0, .1) 5%, rgba(0, 0, 0, .45) 11%, rgba(0, 0, 0, .85) 17%, #000 21%, #000 87%, rgba(0, 0, 0, .5) 92%, rgba(0, 0, 0, .12) 96%, transparent);
  --feather-r: radial-gradient(ellipse 71% 71% at 50% 50%, #000 58%, rgba(0, 0, 0, .6) 80%, transparent 100%);
  -webkit-mask-image: var(--feather-x), var(--feather-y), var(--feather-r);
  -webkit-mask-composite: source-in, source-in;
  mask-image: var(--feather-x), var(--feather-y), var(--feather-r);
  mask-composite: intersect;
}
#prologue-play { position: absolute; background: var(--panel); }
.prologue-skip { position: absolute; right: 7vw; bottom: 5vh; font-size: 15px; }
.prologue-skip kbd { margin-left: 8px; font-size: 11px; opacity: .65; }
.prologue-error { position: absolute; bottom: 4vh; left: 7vw; max-width: 60vw; font: 14px var(--sans); }
/* This book: written straight onto the map in ink. The planets fade back while it is up and a soft wash of the same
   paper (no edge, no box) clears a space for the words. */
.map-intro {
  position: absolute; z-index: 4; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(620px, 80vw); padding: 56px 80px 50px;
  color: var(--ink); text-align: center;
  background: radial-gradient(closest-side, rgba(244, 228, 196, .94) 0%, rgba(244, 228, 196, .82) 62%, rgba(244, 228, 196, 0) 100%);
  animation: ink-in .9s var(--ease);
}
.map-intro h3 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 500; margin: 0 0 6px; }
.map-intro h3::after { content: '✦'; display: block; font-size: 14px; color: var(--gold-deep); margin: 6px 0 4px; }
.map-intro p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.75; margin: 6px 0; }
.map-intro .link { color: var(--ink); margin-top: 16px; font-size: 18px; text-decoration-color: var(--gold-deep); }
#page-map:has(#map-intro:not([hidden])) :is(.map-slots, .map-path, .map-info) { opacity: .16; filter: blur(1.5px); transition: opacity .6s, filter .6s; }
.map-slots, .map-path, .map-info { transition: opacity .6s, filter .6s; }
@keyframes ink-in { from { opacity: 0; filter: blur(3px); } }

/* A phone held upright: six planets a row leave each name a thumb's width, and 绕圈赛跑 broke over two lines into
   its neighbour. The names step aside; tapping a planet still names it underneath (map-info). */
@media (max-width: 700px) {
  .slot-label { display: none; }
  .slot-btn { width: min(13vw, 20vh); }
  .map-path, .map-slots { top: 21%; height: 40%; }   /* the two rows sit closer, clear of the chapter text */
  .map-info { padding: 0 7vw; }
}