/* ============================================================
   夜航书 · Chapters — content typeset onto the right-hand leaf
   ============================================================ */

/* ══ 序 · Frontispiece ══════════════════════ */
.front{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2% 1%;
}
.front__mark{
  width: clamp(40px, 4.4vh, 58px);
  margin: 0 auto 12px;
  color: var(--sakura-ink);
  opacity: .85;
  animation: sealTurn 34s linear infinite;
}
@keyframes sealTurn{ to{ transform: rotate(360deg); } }

.front__kicker{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: clamp(.78rem, .72rem + .3vw, .92rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.front__title{
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .06em;
  color: var(--ink);
}
.front__title em{
  display: block;
  font-family: var(--f-latin);
  font-size: .36em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--sakura-ink);
  margin-top: 8px;
}
.front__rules{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(12px, 2.2vh, 20px) auto;
  width: min(340px, 82%);
}
.front__rules span{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--edge), transparent); }
.front__rules b{ color: var(--sakura-ink); font-size: .8rem; }

.front__blurb{
  max-width: 44ch;
  margin: 0 auto;
  font-size: clamp(.88rem, .84rem + .2vw, 1rem);
  line-height: 1.8;
  color: var(--ink-soft);
}
.front__blurb strong{ color: var(--ink); font-weight: 700; }

/* colophon: letterpress data block */
.colophon{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 1px;
  margin: clamp(14px, 2.6vh, 24px) auto 0;
  width: min(520px, 100%);
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.colophon__cell{
  background: var(--vellum);
  padding: 10px 8px 9px;
}
.colophon__n{
  font-family: var(--f-mono);
  font-size: 1.24rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.colophon__k{
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* ══ 壹 · Works — a catalogue, not cards ═══ */
.works{ display: flex; flex-direction: column; }

.work{
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 15px 12px 15px 6px;
  border-bottom: 1px solid var(--vellum-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .28s var(--ease-soft), transform .28s var(--ease-soft), box-shadow .28s;
  text-align: left;
  width: 100%;
}
.work::before{
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--wc, #7c5aa8);
  opacity: 0;
  transition: opacity .28s;
}
.work:hover{
  background: color-mix(in srgb, var(--wc, #7c5aa8) 7%, transparent);
  transform: translateX(4px);
}
.work:hover::before{ opacity: 1; }

.work__glyph{
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: color-mix(in srgb, var(--wc, #7c5aa8) 13%, var(--vellum-2));
  border: 1px solid color-mix(in srgb, var(--wc, #7c5aa8) 24%, transparent);
  transition: transform .3s var(--ease-soft);
}
.work:hover .work__glyph{ transform: rotate(-7deg) scale(1.08); }

.work__name{
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.work__name .work__year{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: .8rem;
  color: var(--ink-faint);
}
.work__desc{
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 3px;
}
.work__tags{ display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.work__stack{
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}

/* Work detail panel */
.work-detail__hero{
  height: 120px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 3rem;
  margin-bottom: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wc, #7c5aa8) 28%, var(--vellum-2)),
    color-mix(in srgb, var(--wc, #7c5aa8) 8%, var(--vellum)));
  border: 1px solid color-mix(in srgb, var(--wc, #7c5aa8) 26%, transparent);
}
.work-detail__list{ margin: 14px 0 0; padding: 0; list-style: none; }
.work-detail__list li{
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--vellum-3);
  font-size: var(--t-small);
  line-height: 1.6;
}
.work-detail__list b{
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  color: var(--ink-faint);
  flex: 0 0 74px;
  padding-top: 2px;
}

/* ══ 贰 · Seek — 碎星寻踪 ═══════════════════ */
.seek{ display: flex; flex-direction: column; gap: 10px; }

.seek__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seek__meter{
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}
.seek__meter b{ font-size: 1.1rem; color: var(--ink); }

.seek__note{
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* status bar floats over the sky, where nothing is ever hidden */
.seek__hud{
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9,6,22,.62), transparent);
}
.seek__hud .btn{
  pointer-events: auto;
  background: rgba(9,6,22,.62);
  border: 1px solid rgba(255,217,160,.34);
  color: var(--lumen);
  backdrop-filter: blur(6px);
}
.seek__hud .btn:hover{ background: rgba(9,6,22,.85); border-color: var(--lumen); }
.seek__hud .btn:disabled{ opacity: .4; }

.seek__stage{
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #1a1440, #2f1f4e 62%, #4a2a52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 30px -14px rgba(0,0,0,.7);
  aspect-ratio: 16 / 10;
  cursor: crosshair;
  touch-action: manipulation;
}
.seek__stage svg{ width: 100%; height: 100%; display: block; }
.seek__stage.is-done{ cursor: default; }

/* hidden shards — they breathe just enough to be findable */
.shard{
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: filter .3s;
  animation: shardIdle 5.5s ease-in-out infinite;
}
@keyframes shardIdle{
  0%, 100%{ opacity: .5; }
  50%     { opacity: .95; }
}
.shard:hover, .shard:focus-visible{
  filter: drop-shadow(0 0 7px rgba(255,217,160,.9));
  animation-play-state: paused;
  opacity: 1;
}
.shard.is-found{ animation: shardFound .7s var(--ease-soft) forwards; pointer-events: none; }
@keyframes shardFound{
  0%  { opacity: 1; transform: scale(1) rotate(0); }
  35% { opacity: 1; transform: scale(2.1) rotate(60deg); }
  100%{ opacity: 0; transform: scale(.2) rotate(220deg); }
}
/* the hint ripple */
.seek__ripple{
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid var(--lumen);
  pointer-events: none;
  animation: ripple 1.5s ease-out 3;
}
@keyframes ripple{
  0%  { opacity: .95; transform: scale(.4); }
  100%{ opacity: 0;   transform: scale(9); }
}
/* miss feedback */
.seek__miss{
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,183,213,.7);
  pointer-events: none;
  animation: missPulse .55s ease-out forwards;
}
@keyframes missPulse{ to{ opacity: 0; transform: scale(2.2); } }

/* collected shard tray */
.tray{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tray__slot{
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--edge);
  background: var(--vellum-2);
  font-size: 1.05rem;
  color: var(--ink-faint);
  transition: all .4s var(--ease-soft);
}
.tray__slot.is-filled{
  border: 1px solid var(--lumen-ink);
  border-style: solid;
  background: linear-gradient(135deg, rgba(255,217,160,.42), rgba(255,183,213,.24));
  color: var(--ink);
  box-shadow: 0 0 16px -4px rgba(164,103,12,.5);
  animation: slotPop .5s var(--ease-soft);
}

/* the tray sits on the night sky once it's in the HUD */
.seek__hud .tray{ gap: 5px; }
.seek__hud .tray__slot{
  width: 26px; height: 26px;
  border-radius: 7px;
  font-size: .78rem;
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.26);
  color: rgba(255,255,255,.38);
}
.seek__hud .tray__slot.is-filled{
  background: linear-gradient(135deg, #ffd9a0, #ffb7d5);
  border: 1px solid #fff0d0;
  color: #3a2a10;
  box-shadow: 0 0 14px -2px rgba(255,217,160,.9);
}
@keyframes slotPop{
  0%  { transform: scale(.5) rotate(-24deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(6deg); }
  100%{ transform: none; opacity: 1; }
}

/* scene selector */
.scene-pick{ display: flex; gap: 7px; flex-wrap: wrap; }
.scene-pick button{
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink-soft);
  transition: all .22s;
}
.scene-pick button:hover{ border-color: var(--sakura-ink); color: var(--sakura-ink); }
.scene-pick button[aria-pressed="true"]{
  background: var(--ink); color: var(--vellum); border-color: var(--ink);
}
.scene-pick button.is-cleared::after{ content: ' ✦'; color: var(--lumen-ink); }
.scene-pick button.is-locked{ opacity: .45; }

/* ══ 叁 · Music room ════════════════════════ */
.music{ display: flex; flex-direction: column; gap: 16px; }

.riddle{
  position: relative;
  padding: 22px 22px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(255,183,213,.16), rgba(140,224,255,.1));
  border: 1px solid var(--vellum-3);
  overflow: hidden;
}
.riddle::before{
  content: '♪';
  position: absolute;
  right: 14px; top: -12px;
  font-size: 5rem;
  color: rgba(201,58,114,.09);
  pointer-events: none;
}
.riddle__no{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.riddle__line{
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
  margin: 8px 0 10px;
}
.riddle__meta{ display: flex; gap: 7px; flex-wrap: wrap; }
.riddle__verdict{
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 700;
  min-height: 1.5em;
  margin-top: 12px;
}
.riddle__verdict.is-right{ color: var(--jade-ink); }
.riddle__verdict.is-wrong{ color: var(--sakura-ink); }

.guess-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.guess-row .field{ flex: 1; min-width: 160px; }

/* personal chart — only what you have found exists */
.chart{ list-style: none; margin: 0; padding: 0; }
.chart li{
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--vellum-3);
  transition: background .25s;
}
.chart li:hover{ background: var(--vellum-2); }
.chart__rank{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sakura-ink);
  text-align: center;
}
.chart__name{ font-family: var(--f-display); font-size: .96rem; color: var(--ink); }
.chart__by{ font-size: var(--t-micro); color: var(--ink-faint); margin-top: 1px; }
.chart__plays{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); }

.chart li.is-sealed .chart__name{
  color: transparent;
  background: repeating-linear-gradient(92deg, var(--vellum-3) 0 9px, var(--edge) 9px 12px);
  border-radius: 3px;
  user-select: none;
}
.chart li.is-sealed .chart__by,
.chart li.is-sealed .chart__plays{ opacity: .4; }
.chart li.is-sealed .chart__rank{ color: var(--ink-faint); }
.chart li.just-found{ animation: chartReveal .8s var(--ease-soft); }
@keyframes chartReveal{
  0%  { background: rgba(255,217,160,.6); transform: scale(1.02); }
  100%{ background: transparent; transform: none; }
}

/* ══ 肆 · Hall of friends ═══════════════════ */
.hall{ display: flex; flex-direction: column; gap: 14px; }
.rank{ list-style: none; margin: 0; padding: 0; }
.rank li{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--vellum-3);
  transition: background .25s, transform .25s var(--ease-soft);
}
.rank li:hover{ background: var(--vellum-2); transform: translateX(3px); }
.rank li.is-you{
  background: linear-gradient(90deg, rgba(255,217,160,.34), transparent 78%);
  box-shadow: inset 2px 0 0 var(--lumen-ink);
}
.rank__medal{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1.2rem;
  text-align: center;
  color: var(--ink-faint);
}
.rank__medal.g1{ color: #b8860b; font-size: 1.35rem; }
.rank__medal.g2{ color: #8a8a97; font-size: 1.28rem; }
.rank__medal.g3{ color: #a2683c; font-size: 1.22rem; }
.rank__who{ font-family: var(--f-display); font-size: 1rem; color: var(--ink); }
.rank__break{
  display: flex; gap: 9px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin-top: 3px;
}
.rank__score{
  font-family: var(--f-mono);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.rank__score small{ display: block; font-family: var(--f-ui); font-size: var(--t-micro); font-weight: 400; color: var(--ink-faint); }

.sigil{
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  word-break: break-all;
  line-height: 1.6;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--vellum-2);
  border: 1px dashed var(--edge);
  color: var(--ink-soft);
  max-height: 110px;
  overflow-y: auto;
}

/* ══ 伍 · Arcade ════════════════════════════ */
.arcade{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cab{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--vellum-3);
  background: linear-gradient(155deg, var(--vellum) 0%, var(--vellum-2) 100%);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--ease-soft), box-shadow .3s, border-color .3s;
}
.cab::after{
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cc, #7c5aa8) 26%, transparent), transparent 70%);
  transition: transform .45s var(--ease-soft);
}
.cab:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cc, #7c5aa8) 42%, transparent);
  box-shadow: 0 16px 34px -18px rgba(43,32,57,.6);
}
.cab:hover::after{ transform: scale(1.35); }
.cab__glyph{ font-size: 1.8rem; }
.cab__name{ font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.cab__desc{ font-size: var(--t-micro); line-height: 1.65; color: var(--ink-soft); }
.cab__best{
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: color-mix(in srgb, var(--cc, #7c5aa8) 72%, #1a1024);
  margin-top: 2px;
}

/* slide puzzle */
.slide{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.slide__grid{
  display: grid;
  gap: 6px;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--vellum-2);
  border: 1px solid var(--vellum-3);
}
.tile{
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vellum);
  background: linear-gradient(140deg, #6a4b96, #3d2a63);
  box-shadow: 0 3px 8px -3px rgba(43,32,57,.6);
  cursor: pointer;
  user-select: none;
  transition: transform .16s var(--ease-soft), background .3s, box-shadow .2s;
}
.tile:hover{ transform: scale(1.05); }
.tile.is-home{ background: linear-gradient(140deg, #1a7a5e, #0d5a44); }
.tile.is-void{ background: transparent; box-shadow: none; cursor: default; }
.tile.is-void:hover{ transform: none; }

/* ══ 终 · Mystery ═══════════════════════════ */
.mystery{ display: flex; flex-direction: column; gap: 16px; }
.seal{
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 30px 20px;
  text-align: center;
}
.seal__ring{
  width: clamp(120px, 22vw, 170px);
  color: var(--ink-faint);
  animation: sealSpin 46s linear infinite;
}
.seal__ring.is-open{ color: var(--lumen-ink); animation-duration: 14s; }
@keyframes sealSpin{ to{ transform: rotate(-360deg); } }
.seal__note{ font-size: var(--t-small); color: var(--ink-soft); line-height: 1.9; max-width: 42ch; }

.relic{
  padding: 17px 19px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--lumen-ink);
  background: linear-gradient(100deg, rgba(255,217,160,.22), transparent 82%);
  animation: relicIn .6s var(--ease-soft) both;
}
@keyframes relicIn{ from{ opacity: 0; transform: translateX(-14px); } to{ opacity: 1; transform: none; } }
.relic__title{ font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.relic__body{ font-size: var(--t-small); line-height: 1.95; color: var(--ink-soft); white-space: pre-line; }
.relic__body code{
  font-family: var(--f-mono);
  font-size: .92em;
  background: var(--vellum-3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--sakura-ink);
}

/* shared section heading inside a leaf */
.sect{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 10px;
}
.sect h3{
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.sect span{ flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
.sect small{ font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); }

.empty-note{
  padding: 22px 18px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--edge);
  font-size: var(--t-small);
  line-height: 1.8;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 900px){
  .work{ grid-template-columns: 36px 1fr; }
  .work__stack{ display: none; }
  .work__glyph{ width: 36px; height: 36px; font-size: 1rem; }
  .colophon{ grid-template-columns: repeat(2, 1fr); }
  .rank li{ grid-template-columns: 32px 1fr auto; gap: 8px; }
}