/* よあけの鐘 — 夜の読書のための画面。
   本文は明朝系(小説の読後感)、地は深い夜、灯りは琥珀。 */
:root {
  --bg: #0b1026;
  --bg-high: #131b42;
  --card: #121937;
  --ink: #f2e8d5;
  --dim: #9aa0c8;
  --accent: #ffb54d;
  --line: rgba(255, 214, 150, 0.28);
  --line-soft: rgba(154, 160, 200, 0.25);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: radial-gradient(120% 80% at 50% -10%, var(--bg-high), var(--bg) 70%);
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  min-height: 100dvh;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative; /* 表紙・紙めくり層の基準 */
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom));
  animation: pagein 0.3s ease;
}

@keyframes pagein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ヘッダ: もどる + 段落番号 */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}

.back-btn {
  min-width: 96px;
  min-height: 48px;
  padding: 4px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--dim);
  background: transparent;
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.back-btn[hidden] { visibility: hidden; display: inline-flex; }

.para-chip {
  min-height: 32px;
  padding: 2px 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* 場面(ループ動画 / 静止画) */
.scene {
  /* 48dvh → 36dvh(2026-08-11): 総ルビ+「スクロールなしで読める」の文字予算を
     たしかめたら、375x812 で本文に 190px しか残らなかった。動画をすこし譲る */
  width: min(100%, 36dvh);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #060a1a;
  border: 1px solid rgba(255, 214, 150, 0.16);
  box-shadow: 0 0 44px rgba(20, 30, 80, 0.55);
  flex: none;
}

.scene video, .scene img, .scene canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文 */
.text {
  /* 17px/1.95 → 16px/1.72(2026-08-11): 総ルビ+スクロールなしの文字予算のため。
     rt は 0.55em に上げて、ふりがな主体で読む子の読みやすさを保つ */
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: 0.02em;
}

.text p { margin: 0.55em 0; }

rt { font-size: 0.55em; color: var(--dim); letter-spacing: 0; }

/* 章扉・つづくページは中央寄せの大きめ */
.page--card .text { text-align: center; font-size: 19px; letter-spacing: 0.1em; }
.page--card .text p { margin: 1.1em 0; }

/* たびのきろく */
/* たびのきろく: 結末ページで本文・ボタンと同居するので、行の高さを詰める
   (2026-08-11 の「スクロールなしで読める」実測。ルビつきでも 1行に収める) */
.record {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
  text-align: left;
}

.record h2 { font-size: 11px; margin: 2px 0 4px; color: var(--ink); font-weight: normal; letter-spacing: 0.14em; }
.record ul { margin: 0; padding: 0; list-style: none; }
.record li { margin: 2px 0; }
.record rt { font-size: 0.5em; }
.record li::before { content: "・"; color: var(--accent); }

/* 選択肢・つぎへ */
.controls {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.controls button {
  min-height: 64px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: linear-gradient(180deg, #1b2452, #151d43);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.controls button .label { display: inline-block; transform-origin: left center; }

/* 押した手ごたえは中身だけ縮める(枠を縮めると当たり判定が縮む) */
.controls button:active .label { transform: scale(0.97); }

.controls button .go {
  flex: none;
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.controls .next { justify-content: center; }
.controls .restart { background: transparent; border-color: var(--line-soft); color: var(--dim); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 14px; }

/* 横持ち: 左に場面、右に本文 */
@media (orientation: landscape) and (min-width: 640px) {
  #app { max-width: 1080px; }
  .page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "scene body";
    column-gap: 20px;
    align-items: start;
  }
  .top { grid-area: top; }
  .scene { grid-area: scene; width: min(100%, 78dvh); margin: 0 auto; align-self: start; }
  .page .body { grid-area: body; min-height: 0; }
}

.body { display: flex; flex-direction: column; flex: 1; gap: 12px; }

/* 同じ場面で文章だけが進んだとき、新しい本文がふっと現れる */
.body.advance { animation: textin 0.28s ease; }

@keyframes textin {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 表紙(閉じた本) ---- */
.book-cover {
  position: absolute;
  inset: 0;
  /* **画面ちょうど1枚に固定する。** inset:0 だけだと #app(本文が長いと画面より伸びる)
     に合わせて表紙も伸び、下端に貼った ことばの列が画面の外へ落ちる ——
     320x568 / 360x640 では8個とも、375x667 と横持ちでは4個が押せなかった
     (2026-08-11 の対象者視点レビューが実測)。しかも表紙は約2秒で自動的にひらき、
     開いたあとに ことばを選ぶ口は画面に無いので、逃げ道が1つも無い形だった */
  height: 100dvh;
  z-index: 60;
  border: none;
  padding: 0;
  cursor: pointer;
  background:
    linear-gradient(120deg, rgba(255, 214, 150, 0.06), transparent 40%),
    linear-gradient(135deg, #1c224c, #10163a 55%, #0a0e28);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: right center; /* 右綴じ: 背は右。ひらくと右へ返る */
}

/* 背の影と金の枠 */
.book-cover::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 2px solid rgba(202, 162, 90, 0.55);
  border-radius: 14px;
  pointer-events: none;
}

.book-cover::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}

.cover-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: #e9d8ae;
  font-family: inherit;
}

.cover-inner img { width: 88px; height: 88px; }

.cover-title { font-size: 30px; letter-spacing: 0.32em; margin-left: 0.32em; }

.cover-sub { font-size: 13px; color: #9aa0c8; letter-spacing: 0.3em; margin-left: 0.3em; }

.book-cover.open {
  animation: cover-open 0.9s cubic-bezier(0.6, 0.05, 0.5, 1) forwards;
  pointer-events: none;
}

@keyframes cover-open {
  60% { opacity: 1; }
  to { transform: perspective(1400px) rotateY(130deg); opacity: 0; }
}

/* ---- 紙芝居の抜き(2026-08-10 v3) ----
   3Dのめくりは視認性が悪くやめた。いま見ていた実ページが真横へ抜け、
   下には次のページが最初から見えている。中間の紙は積まずに、1枚ずつ
   逆側から入って画面を横切って飛んでいく(途中の段落番号が刷ってある)。
   向きは右綴じ: 進む=右へ抜く / もどる=左へ抜く。 */
.flip-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
}

.slide-sheet {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: -18px 0 36px rgba(4, 6, 18, 0.45);
  will-change: transform; /* 挿入と同時に合成層へ(昇格の作り直しでカクつかせない) */
}

.flip-back .slide-sheet { box-shadow: 18px 0 36px rgba(4, 6, 18, 0.45); }

.slide-page { animation: slide-out-fwd 380ms cubic-bezier(0.5, 0.05, 0.7, 0.25) both; }
.flip-back .slide-page { animation-name: slide-out-back; }

.slide-mid { animation: slide-cross-fwd 300ms cubic-bezier(0.3, 0, 0.7, 1) both; }
.flip-back .slide-mid { animation-name: slide-cross-back; }

/* 複数枚のめくりの間だけ敷く無地の底(罫線なし)。最後の1枚の通過中に消える */
.under {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, #1b2350, #151d43 55%, #111838);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.under.gone { opacity: 0; transition: opacity 0.15s; }

.slide-page {
  background: radial-gradient(120% 80% at 50% -10%, var(--bg-high), var(--bg) 70%);
  display: flex;
  flex-direction: column;
}

.slide-page .page { flex: 1; animation: none; }


/* 中間の紙は画面と同じ夜の色の無地(明るい紙色は目に刺さる。罫線も引かない)。
   ふちの線と影で「紙が1枚横切った」ことだけが分かる */
.paper {
  background: linear-gradient(105deg, #1b2350, #151d43 55%, #111838);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

/* とじしろ側の影(紙のまるみ) */
.paper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, transparent 55%, rgba(2, 4, 15, 0.45));
}

.flip-back .paper::after {
  background: linear-gradient(to left, transparent 55%, rgba(2, 4, 15, 0.45));
}

@keyframes slide-out-fwd {
  from { transform: translateX(0) rotate(0deg); }
  to { transform: translateX(112%) rotate(1.4deg); }
}

@keyframes slide-out-back {
  from { transform: translateX(0) rotate(0deg); }
  to { transform: translateX(-112%) rotate(-1.4deg); }
}

/* 中間の紙: 逆側から入って画面を横切る */
@keyframes slide-cross-fwd {
  from { transform: translateX(-112%) rotate(-1deg); }
  to { transform: translateX(112%) rotate(1deg); }
}

@keyframes slide-cross-back {
  from { transform: translateX(112%) rotate(1deg); }
  to { transform: translateX(-112%) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  .controls button:active .label { transform: none; }
  .slide-sheet, .body.advance, .book-cover.open { animation: none; }
}

/* ---- 章の丸印(ヘッダの中。ページの縦の予算は増やさない)---- */
.ch-rail {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.ch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--line-soft);
  transition: background-color .5s ease, border-color .5s ease, transform .5s ease;
}
/* 通ってきた章は控えめに埋める。読み終えた道すじが見える */
.ch-dot.done { background: var(--line-soft); border-color: var(--line-soft); }
/* いまの章。灯りの色(このゲームのカンテラの色)で灯す */
.ch-dot.now {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.5);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* 章が変わった回だけ、1回きりの「ともる」。明滅ではない(0%→100% の片道) */
.ch-dot.lighting { animation: ch-light .85s ease-out; }
@keyframes ch-light {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  45%  { transform: scale(2.1); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--accent) 70%, transparent); }
  100% { transform: scale(1.5); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
}
/* 動きをへらす設定: 大きさは変えず、色だけで「いま」を示す(状態は必ず伝える) */
@media (prefers-reduced-motion: reduce) {
  .ch-dot { transition: none; }
  .ch-dot.now { transform: none; width: 9px; height: 9px; }
  .ch-dot.lighting { animation: none; }
}

/* ---- ことば(表紙の下)---- */
.lang-pick {
  position: absolute;
  left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  padding: 0 12px;
}
.lang-list {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 340px;
}
.lang-item {
  min-height: 48px;               /* このゲームの下限(もどると同じ)。40px は自分の線を割っていた */
  padding: 6px 12px;
  font: inherit; font-size: 13px;
  color: var(--dim);
  background: transparent;
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
}
.lang-item.on { color: var(--ink); border-color: var(--accent); }
.lang-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 押した手ごたえは中身だけ縮める(箱を縮めると当たり判定ごと縮む) */
.lang-item:active { color: var(--ink); border-color: var(--accent); }