/* ============================================================
   月夜綺譚 ─ 純和風スタイル
   墨(sumi) / 和紙(washi) / 朱(shu) / 藍(ai) / 金(kin)
   ============================================================ */

:root {
  --sumi:        #17120f;
  --sumi-soft:   #423630;
  --sumi-thin:   #6d6058;
  --washi:       #efe4cd;
  --washi-lit:   #f7efe0;
  --washi-dim:   #ddcdae;
  --washi-line:  #c9b48f;
  --shu:         #b03a2e;
  --shu-deep:    #7d2820;
  --ai:          #22405f;
  --ai-deep:     #101b2b;
  --yoru:        #0b1119;
  --kin:         #c39a4e;
  --moss:        #55673f;

  --font-brush: 'Yuji Syuku', 'Hiragino Mincho ProN', serif;
  --font-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ── リセット & iOS 鉄則 ───────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

::selection { background: transparent; color: inherit; }

html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--yoru);
}

body {
  font-family: var(--font-mincho);
  color: var(--washi);
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.is-hidden { display: none !important; }

.scroll-area {
  touch-action: pan-y;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 夜の背景 ─────────────────────────── */
#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 78% 8%, #24384f 0%, transparent 55%),
    linear-gradient(180deg, #0f1a28 0%, #0b1119 45%, #14110f 100%);
}

.moon {
  position: fixed;
  top: calc(var(--safe-t) + 76px);
  right: 9vw;
  width: clamp(64px, 17vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(circle at 38% 34%, #fdf7e4 0%, #ecdfbb 58%, #d8c69b 88%, #c3ae7f 100%);
  box-shadow: 0 0 40px rgba(247, 236, 205, .38), 0 0 120px rgba(203, 176, 116, .22);
  opacity: .85;
}

.kasumi {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 18%, rgba(226, 216, 196, .07) 21%, transparent 25%),
    linear-gradient(180deg, transparent 40%, rgba(226, 216, 196, .06) 44%, transparent 49%),
    linear-gradient(180deg, transparent 64%, rgba(226, 216, 196, .05) 68%, transparent 73%);
  animation: kasumiDrift 26s ease-in-out infinite alternate;
}

@keyframes kasumiDrift {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}

/* 障子の格子 */
.shoji {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(90deg, rgba(226, 216, 196, .55) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226, 216, 196, .35) 1px, transparent 1px);
  background-size: 26vw 26vw;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 62%);
}

/* ── 表紙 ─────────────────────────────── */
.start {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px);
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(28, 44, 64, .55) 0%, transparent 70%),
    rgba(8, 12, 18, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.start__inner { text-align: center; max-width: 460px; }

.start__kicker {
  font-size: clamp(.68rem, 3vw, .82rem);
  letter-spacing: .42em;
  color: var(--kin);
  margin-bottom: 1.1em;
  text-indent: .42em;
}

.start__title {
  font-family: var(--font-brush);
  font-size: clamp(3rem, 17vw, 5.4rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--washi-lit);
  letter-spacing: .1em;
  text-indent: .1em;
  text-shadow: 0 0 26px rgba(240, 226, 190, .28), 0 4px 10px rgba(0, 0, 0, .6);
}

.start__ruby {
  font-size: clamp(.6rem, 2.6vw, .74rem);
  letter-spacing: .3em;
  color: var(--washi-dim);
  opacity: .72;
  margin-top: .9em;
}

.start__rule {
  width: 42px;
  height: 2px;
  margin: 1.6em auto;
  background: linear-gradient(90deg, transparent, var(--shu), transparent);
}

.start__lead {
  font-family: var(--font-brush);
  font-size: clamp(.94rem, 4.2vw, 1.14rem);
  line-height: 2.1;
  color: var(--washi);
  opacity: .9;
}

.start__btn {
  margin-top: 2.2em;
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .85em 1.9em .85em 1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--washi-lit), var(--washi-dim));
  color: var(--sumi);
  font-family: var(--font-brush);
  font-size: clamp(.98rem, 4.4vw, 1.12rem);
  letter-spacing: .16em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .08s ease, box-shadow .08s ease;
  animation: breathe 3.4s ease-in-out infinite;
}

.start__btn:active {
  transform: scale(.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  animation: none;
}

.start__collection {
  width: min(78vw, 310px);
  margin: 1.15em auto 0;
  padding: .62em .9em;
  display: flex;
  align-items: center;
  gap: .8em;
  border: 1px solid rgba(195, 154, 78, .28);
  border-radius: 3px;
  color: var(--washi-dim);
  background: rgba(8, 12, 18, .34);
  text-align: left;
  opacity: .42;
  filter: grayscale(1);
  transition: opacity .2s ease, border-color .2s ease, transform .08s ease, filter .2s ease;
}

.start__collection.is-unlocked {
  opacity: 1;
  filter: none;
  border-color: rgba(195, 154, 78, .68);
  background: linear-gradient(90deg, rgba(195,154,78,.13), rgba(8,12,18,.42));
}

.start__collection.is-unlocked:active { transform: scale(.97); }

.start__collection-mark {
  width: 2.25em;
  height: 2.25em;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--font-brush);
  color: var(--kin);
}

.start__collection-copy { display: grid; gap: .12em; }
.start__collection-copy strong {
  font-family: var(--font-brush);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .2em;
}
.start__collection-copy small {
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--sumi-thin);
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 0 0 rgba(240,226,190,.22), inset 0 1px 0 rgba(255,255,255,.7); }
  50%      { box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 0 12px rgba(240,226,190,0), inset 0 1px 0 rgba(255,255,255,.7); }
}

.start__seal {
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--shu);
  color: var(--washi-lit);
  font-size: .9em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.start__note {
  margin-top: 1.25em;
  font-size: clamp(.62rem, 2.8vw, .74rem);
  line-height: 1.9;
  letter-spacing: .16em;
  color: var(--sumi-thin);
}

/* ── 全体レイアウト ───────────────────── */
.app {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* ── 暖簾（ヘッダー） ─────────────────── */
.noren {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(16, 27, 43, .96), rgba(16, 27, 43, .82));
  border-bottom: 1px solid rgba(195, 154, 78, .34);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

.noren__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.noren__seal {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--shu);
  color: var(--washi-lit);
  font-family: var(--font-brush);
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 6px rgba(0, 0, 0, .45);
}

.noren__titles { display: flex; flex-direction: column; min-width: 0; }

.noren__title {
  font-family: var(--font-brush);
  font-size: 1.02rem;
  letter-spacing: .12em;
  color: var(--washi-lit);
  white-space: nowrap;
}

.noren__sub {
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--kin);
  opacity: .8;
  white-space: nowrap;
}

.noren__nav { display: flex; gap: 6px; flex: 0 0 auto; }

/* 木札ボタン */
.fuda {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 5px 7px;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #efe4cd, #d9c6a4);
  color: var(--sumi);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .08s ease, filter .08s ease;
}

.fuda::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(23, 18, 15, .22);
}

.fuda:active { transform: scale(.9); filter: brightness(.94); }

.fuda__glyph {
  font-family: var(--font-brush);
  font-size: .98rem;
  line-height: 1.1;
  margin-top: 4px;
}

.fuda__label {
  font-size: .5rem;
  letter-spacing: .08em;
  color: var(--sumi-soft);
}

.fuda[aria-pressed="false"] { filter: grayscale(.45) brightness(.86); }

.fuda__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--shu);
  box-shadow: 0 0 0 2px rgba(16, 27, 43, .9);
}

/* ── 本編ステージ ─────────────────────── */
.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 9px 18px;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.yohaku {
  position: absolute;
  z-index: 0;
  right: max(7px, calc((100vw - 760px) / 2 - 30px));
  top: 50%;
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(.58rem, 1.8vw, .72rem);
  letter-spacing: .18em;
  color: rgba(195, 154, 78, .52);
  transform: translateY(-50%);
  text-shadow: 0 0 12px rgba(195,154,78,.18);
  pointer-events: none;
}

/* ── 巻（和紙カード） ─────────────────── */
.maki {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: 2em 1fr;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .5) 0%, transparent 42%),
    repeating-linear-gradient(90deg, rgba(23, 18, 15, .035) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, var(--washi-lit) 0%, var(--washi) 52%, var(--washi-dim) 100%);
  border: 1px solid var(--washi-line);
  border-radius: 3px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .55),
    inset 0 0 60px rgba(180, 152, 108, .22);
}

.maki--turning { animation: maki-turn .52s cubic-bezier(.2,.7,.2,1); }

@keyframes maki-turn {
  0% { opacity: .35; transform: translateX(12px) rotateY(-2deg); filter: sepia(.35); }
  100% { opacity: 1; transform: none; filter: none; }
}

.app[data-mood="creepy"] .maki__glyph { text-shadow: 0 0 14px rgba(176,58,46,.38); }
.app[data-mood="chime"] .maki__glyph { box-shadow: 0 0 20px rgba(195,154,78,.18); }

/* 巻物の上下の軸 */
.maki::before,
.maki::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  height: 7px;
  background: linear-gradient(180deg, #3f3128, #241a14);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.maki::before { top: -7px; }
.maki::after  { bottom: -7px; }

/* 縦書き章題 */
.maki__strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 0 14px;
  border-right: 1px solid rgba(176, 58, 46, .3);
  background: linear-gradient(180deg, rgba(176, 58, 46, .1), rgba(176, 58, 46, .02));
}

.maki__chapter {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(.72rem, 3.1vw, .88rem);
  letter-spacing: .18em;
  color: var(--shu-deep);
  white-space: nowrap;
  max-height: 100%;
  overflow: hidden;
}

.maki__body { padding: 14px 11px 16px; min-width: 0; }

.maki__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(23, 18, 15, .2);
}

.maki__glyph {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--shu);
  border-radius: 3px;
  color: var(--shu);
  font-family: var(--font-brush);
  font-size: 1.1rem;
  background: rgba(176, 58, 46, .06);
}

.maki__step {
  flex: 1 1 auto;
  font-size: .64rem;
  letter-spacing: .24em;
  color: var(--sumi-thin);
}

.translate-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ai);
  border-radius: 3px;
  color: var(--ai);
  font-family: var(--font-brush);
  font-size: .96rem;
  background: rgba(34, 64, 95, .06);
  transition: transform .08s ease, background .15s ease, color .15s ease;
}

.translate-btn:active { transform: scale(.9); }

.translate-btn[aria-pressed="true"] {
  background: var(--ai);
  color: var(--washi-lit);
}

/* ── 本文（必ず三行） ─────────────────── */
.honbun {
  padding: 16px 0 14px;
  min-height: 8.4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55em;
}

/* 一行＝一行のまま折り返さない。実寸は script.js が --honbun-size で決める */
.honbun__line {
  font-family: var(--font-brush);
  font-size: var(--honbun-size, 15px);
  line-height: 1.9;
  color: var(--sumi);
  letter-spacing: 0;
  min-height: 1.9em;
  text-align: left;
  white-space: nowrap;
}

/* 冒頭のみ一字下げ（和文組版の作法） */
.honbun__line[data-line="0"]::before {
  content: "";
  display: inline-block;
  width: .5em;
}

/* 文字幅を測るための隠し要素 */
.probe {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-brush);
  letter-spacing: 0;
  left: -9999px;
  top: 0;
}

/* 古語の強調 */
.kogo {
  position: relative;
  color: var(--shu-deep);
  border-bottom: 1px solid rgba(176, 58, 46, .55);
  padding: 0 .06em;
  cursor: pointer;
}

.kogo::after {
  content: "・";
  position: absolute;
  top: -.86em;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7em;
  color: var(--shu);
  opacity: .7;
}

.kogo:active { background: rgba(176, 58, 46, .14); }

/* ── 半紙（現代語訳） ─────────────────── */
.hanshi {
  margin-bottom: 12px;
  padding: 11px 12px;
  border-left: 3px solid var(--ai);
  background: rgba(34, 64, 95, .07);
  border-radius: 0 3px 3px 0;
}

.hanshi__label {
  font-size: .58rem;
  letter-spacing: .26em;
  color: var(--ai);
  margin-bottom: .5em;
}

.hanshi__line {
  font-size: clamp(.72rem, 3.2vw, .84rem);
  line-height: 1.85;
  color: var(--sumi-soft);
}

/* ── 関連語の札 ───────────────────────── */
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 1.4em;
}

.tags__label {
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--sumi-thin);
}

.tag {
  padding: 3px 9px;
  border: 1px solid rgba(176, 58, 46, .4);
  border-radius: 2px;
  background: rgba(247, 239, 224, .8);
  color: var(--shu-deep);
  font-size: .68rem;
  letter-spacing: .06em;
  transition: transform .08s ease, background .12s ease;
}

.tag:active { transform: scale(.92); background: rgba(176, 58, 46, .14); }

/* ── 選択肢（短冊） ───────────────────── */
.choices { display: flex; flex-direction: column; gap: 8px; }

.tanzaku {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 11px 12px 11px 10px;
  text-align: left;
  border: 1px solid var(--washi-line);
  border-left: 4px solid var(--shu);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 252, 244, .96), rgba(232, 219, 196, .96));
  color: var(--sumi);
  box-shadow: 0 2px 6px rgba(60, 44, 30, .22), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}

.tanzaku::after {
  content: "いざ";
  margin-left: auto;
  font-family: var(--font-brush);
  font-size: .62rem;
  letter-spacing: .12em;
  color: rgba(176,58,46,.48);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .16s ease, transform .16s ease;
}

.tanzaku:active::after,
.tanzaku:hover::after { opacity: 1; transform: none; }
.tanzaku--ending-action::after { content: "開く"; }

.tanzaku:active {
  transform: scale(.975) translateY(1px);
  box-shadow: 0 1px 2px rgba(60, 44, 30, .3);
  background: linear-gradient(180deg, rgba(247, 236, 214, .98), rgba(222, 206, 178, .98));
}

.tanzaku__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--shu);
  color: var(--washi-lit);
  font-family: var(--font-brush);
  font-size: .78rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.tanzaku__text {
  font-family: var(--font-brush);
  font-size: clamp(.82rem, 3.7vw, .98rem);
  line-height: 1.6;
  letter-spacing: .03em;
}

.tanzaku--ending { border-left-color: var(--ai); }
.tanzaku--ending .tanzaku__num { background: var(--ai); }

/* ── 結末専用の一枚絵 ─────────────────── */
.maki--ending {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.72), transparent 42%),
    repeating-linear-gradient(0deg, rgba(23,18,15,.025) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #f7edda, #d8c39e);
}

.ending-vision {
  position: relative;
  margin: 12px 0 5px;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(74, 52, 33, .28);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.68), transparent 44%),
    linear-gradient(165deg, rgba(224,211,183,.92), rgba(176,157,122,.72));
  box-shadow: inset 0 0 30px rgba(72, 48, 29, .14);
  animation: endingReveal .9s cubic-bezier(.2,.8,.2,1) both;
}

.ending-vision::before,
.ending-vision::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ending-vision::before {
  opacity: .22;
  background-image: repeating-radial-gradient(ellipse at 20% 30%, transparent 0 3px, rgba(42,31,24,.15) 4px 5px);
  mix-blend-mode: multiply;
}

.ending-vision::after {
  box-shadow: inset 0 0 45px rgba(35, 24, 18, .3);
}

.ending-vision[data-art="flute"] { background: radial-gradient(circle at 76% 22%, #f5dda0, transparent 22%), linear-gradient(160deg, #b9c1bd, #52616c); }
.ending-vision[data-art="spring"] { background: radial-gradient(circle at 50% 86%, #b8d2c0, transparent 30%), linear-gradient(155deg, #e8ddbd, #71816a); }
.ending-vision[data-art="dewdrop"] { background: radial-gradient(circle at 50% 52%, #e8f4ed, transparent 28%), linear-gradient(150deg, #afbfc1, #566d7a); }
.ending-vision[data-art="letter"] { background: linear-gradient(140deg, #d9c99f, #796a5b 72%, #2d3542); }
.ending-vision[data-art="parting"] { background: radial-gradient(circle at 50% 20%, #dfc38d, transparent 24%), linear-gradient(160deg, #8a8291, #253044); }
.ending-vision[data-art="dawn"] { background: linear-gradient(180deg, #d9ad83, #eee0b8 52%, #7b8f8d); }
.ending-vision[data-art="dream"] { background: radial-gradient(circle at 60% 28%, #d8d8cc, transparent 24%), linear-gradient(145deg, #788092, #242c43); }
.ending-vision[data-art="treasure"] { background: radial-gradient(circle at 50% 62%, #d8b45f, transparent 24%), linear-gradient(150deg, #665c48, #202a31); }
.ending-vision[data-art="shadow"] { background: radial-gradient(circle at 50% 22%, #d8cba6, transparent 20%), linear-gradient(150deg, #686777, #171c29); }
.ending-vision[data-art="fox"] { background: radial-gradient(circle at 50% 50%, #a94b32, transparent 27%), linear-gradient(155deg, #43302d, #111820); }

.ending-vision__art {
  position: absolute;
  inset: 0;
  opacity: .78;
}

.ending-vision__art svg { width: 100%; height: 100%; }
.ending-ink { fill: none; stroke: #24201c; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ending-ink .gold { stroke: #9b702d; }
.ending-ink .fill-soft { fill: rgba(246, 233, 204, .42); }
.ending-ink .fill-gold { fill: rgba(174, 127, 52, .48); }
.ending-ink .wash { stroke-width: 2.5; opacity: .5; }
.ending-ink .mist { stroke-width: 2; opacity: .42; }
.ending-ink .fine { stroke-width: 2.4; }
.ending-ink .moon-disc { fill: rgba(246,233,204,.34); stroke: #9b702d; stroke-width: 3; }
.ending-ink .sun-disc { fill: rgba(204,151,63,.28); stroke-width: 3; }
.ending-ink .figure { stroke-width: 4; }
.ending-ink .spirit { stroke-width: 3; opacity: .68; stroke-dasharray: 6 5; }
.ending-ink .small-figures { stroke-width: 3; }
.ending-ink .water { stroke-width: 3; }
.ending-ink .shadow-shape { fill: rgba(28,25,24,.25); stroke-width: 2; }

.ending-vision__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  padding: 10px 12px 9px 48px;
  background: linear-gradient(90deg, rgba(15,24,35,.94), rgba(15,24,35,.76));
  color: var(--washi-lit);
  border-top: 1px solid rgba(195,154,78,.6);
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
}

.ending-vision__seal {
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  background: var(--shu);
  border: 1px solid rgba(255,255,255,.55);
  font-family: var(--font-brush);
  font-size: .92rem;
}

.ending-vision__eyebrow { font-size: .5rem; letter-spacing: .28em; color: var(--kin); }
.ending-vision__title { margin-top: 2px; font-family: var(--font-brush); font-size: 1.15rem; font-weight: 400; letter-spacing: .1em; }
.ending-vision__epilogue { margin-top: 3px; font-size: .61rem; line-height: 1.55; color: rgba(247,239,224,.76); }

.honbun--ending { min-height: 6.5em; padding: 9px 0 8px; }
.maki--ending .tags { margin-bottom: 8px; }

.tanzaku--ending-action {
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  border-left: 1px solid var(--washi-line);
  background: rgba(16, 27, 43, .9);
  color: var(--washi-lit);
}

.tanzaku--ending-action .tanzaku__text { font-family: var(--font-mincho); font-size: .74rem; letter-spacing: .12em; }

@keyframes endingReveal {
  from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-height: 760px) {
  .ending-vision { min-height: 160px; margin-top: 8px; }
  .ending-vision__caption { bottom: 8px; }
  .maki--ending .maki__head { padding-bottom: 6px; }
  .honbun--ending { min-height: 5.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .ending-vision { animation: none; }
}

.hint {
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--sumi-thin);
  text-align: center;
}

.footer {
  flex: 0 0 auto;
  padding: 8px 12px calc(8px + var(--safe-b));
  text-align: center;
  font-size: .55rem;
  letter-spacing: .16em;
  color: #4a4139;
  border-top: 1px solid rgba(195, 154, 78, .16);
}

/* ── 覆い（モーダル） ─────────────────── */
.veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 14px) 14px calc(var(--safe-b) + 14px);
  background: rgba(6, 9, 14, .82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 和綴じ本 */
.tojihon {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--washi-line);
  border-left: 12px solid var(--ai-deep);
  border-radius: 2px 6px 6px 2px;
  background: linear-gradient(160deg, var(--washi-lit), var(--washi-dim));
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
  overflow: hidden;
}

/* 綴じ糸 */
.tojihon::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 12%;
  bottom: 12%;
  width: 4px;
  background: repeating-linear-gradient(180deg, var(--kin) 0 8px, transparent 8px 18px);
  opacity: .75;
}

.tojihon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(23, 18, 15, .18);
}

.tojihon__title {
  font-family: var(--font-brush);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--sumi);
}

.close-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--shu);
  color: var(--washi-lit);
  font-family: var(--font-brush);
  font-size: .9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .08s ease;
}

.close-btn:active { transform: scale(.9); }

.close-btn--corner { position: absolute; top: 10px; right: 10px; }

.tojihon__meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--sumi-soft);
  background: rgba(23, 18, 15, .05);
}

.meter {
  width: 120px;
  height: 5px;
  border-radius: 3px;
  background: rgba(23, 18, 15, .16);
  overflow: hidden;
}

.meter > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--shu), var(--kin));
  transition: width .5s ease;
}

.tojihon__list {
  flex: 1 1 auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tojihon__foot {
  padding: 8px 14px;
  text-align: center;
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--sumi-thin);
  border-top: 1px solid rgba(23, 18, 15, .14);
}

/* 単語帳 / 結末帳の項目 */
.entry {
  padding: 10px 12px;
  border: 1px solid rgba(23, 18, 15, .16);
  border-left: 3px solid var(--shu);
  border-radius: 2px;
  background: rgba(255, 253, 246, .7);
}

.entry--locked {
  border-left-color: rgba(23, 18, 15, .2);
  background: rgba(23, 18, 15, .04);
  opacity: .68;
}

.entry__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.entry__word {
  font-family: var(--font-brush);
  font-size: 1rem;
  color: var(--sumi);
}

.entry__kanji { font-size: .62rem; color: var(--sumi-thin); }

.entry__type {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid rgba(34, 64, 95, .35);
  border-radius: 2px;
  font-size: .58rem;
  color: var(--ai);
  background: rgba(34, 64, 95, .06);
}

.entry__meaning { font-size: .78rem; color: var(--sumi); margin-bottom: 3px; }
.entry__explain { font-size: .68rem; line-height: 1.75; color: var(--sumi-soft); }

/* ── 結末画帖：六枚ずつ頁でめくる ─────── */
.tojihon--endings {
  height: min(690px, calc(100dvh - var(--safe-t) - var(--safe-b) - 28px));
  max-width: 480px;
  border-left-color: #34283e;
  background:
    repeating-linear-gradient(0deg, rgba(46,31,24,.025) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #f4ead5, #d8c4a1);
}

.tojihon--endings::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(53,38,30,.13) 12%, rgba(53,38,30,.13) 88%, transparent);
  box-shadow: 5px 0 12px rgba(57,39,26,.07), -5px 0 12px rgba(57,39,26,.07);
  pointer-events: none;
}

.ending-gallery {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 11px 8px 13px;
  overflow: hidden;
}

.ending-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(52,39,31,.24);
  border-radius: 2px;
  background: rgba(255,251,240,.58);
  box-shadow: 0 2px 5px rgba(58,39,24,.13);
  animation: galleryCardIn .38s ease both;
  animation-delay: calc(var(--card-order) * 45ms);
}

.ending-card--open { border-color: rgba(125,40,32,.48); }

.ending-card__art {
  position: relative;
  height: 60%;
  min-height: 58px;
  overflow: hidden;
  background: linear-gradient(150deg, #aaaba3, #4d5862);
  border-bottom: 1px solid rgba(52,39,31,.25);
}

.ending-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18px rgba(23,18,15,.28);
  pointer-events: none;
}

.ending-card__art svg { width: 100%; height: 100%; }
.ending-card__art .ending-ink { stroke-width: 5; }
.ending-card__art[data-art="flute"] { background: radial-gradient(circle at 76% 22%, #f5dda0, transparent 24%), linear-gradient(150deg,#aeb8b7,#53616a); }
.ending-card__art[data-art="spring"] { background: linear-gradient(150deg,#d8d9b9,#66806c); }
.ending-card__art[data-art="dewdrop"] { background: radial-gradient(circle,#e7f1e9,transparent 30%),linear-gradient(150deg,#a8bdc0,#536976); }
.ending-card__art[data-art="letter"] { background: linear-gradient(140deg,#d9c99f,#635c59); }
.ending-card__art[data-art="parting"] { background: radial-gradient(circle at 50% 20%,#dfc38d,transparent 26%),linear-gradient(160deg,#807d90,#293246); }
.ending-card__art[data-art="dawn"] { background: linear-gradient(180deg,#d9ad83,#eee0b8 55%,#788e8d); }
.ending-card__art[data-art="dream"] { background: radial-gradient(circle at 60% 28%,#ddd8c9,transparent 25%),linear-gradient(145deg,#70798e,#273047); }
.ending-card__art[data-art="treasure"] { background: radial-gradient(circle at 50% 62%,#d8b45f,transparent 25%),linear-gradient(150deg,#665c48,#202a31); }
.ending-card__art[data-art="shadow"] { background: radial-gradient(circle at 50% 22%,#d8cba6,transparent 22%),linear-gradient(150deg,#686777,#171c29); }
.ending-card__art[data-art="fox"] { background: radial-gradient(circle at 50% 50%,#a94b32,transparent 28%),linear-gradient(155deg,#43302d,#111820); }

.ending-card--locked {
  border-style: dashed;
  background: rgba(53,44,39,.055);
}

.ending-card--locked .ending-card__art {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(38,31,29,.06) 0 2px, transparent 2px 7px),
    #b9ad98;
  filter: grayscale(1);
}

.ending-card__lock {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(48,40,35,.38);
  border-radius: 50%;
  color: rgba(48,40,35,.52);
  font-family: var(--font-brush);
  font-size: 1rem;
}

.ending-card__number {
  display: block;
  margin: 5px 7px 0;
  font-size: .47rem;
  letter-spacing: .18em;
  color: var(--shu-deep);
}

.ending-card__title {
  margin: 1px 7px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-brush);
  font-size: clamp(.68rem, 3vw, .82rem);
  font-weight: 400;
  color: var(--sumi);
}

.ending-card__line {
  margin: 1px 7px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .45rem;
  color: var(--sumi-thin);
}

.page-turner {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid rgba(23,18,15,.14);
  background: rgba(74,56,42,.06);
}

.page-turner__button {
  min-height: 34px;
  border: 1px solid rgba(34,64,95,.45);
  background: linear-gradient(#f5ead4,#d6c19d);
  color: var(--ai);
  font-family: var(--font-brush);
  font-size: .7rem;
  letter-spacing: .12em;
  box-shadow: 0 2px 4px rgba(42,31,22,.14);
}

.page-turner__button:last-child { justify-self: stretch; }
.page-turner__button:active:not(:disabled) { transform: translateY(1px); }
.page-turner__button:disabled { opacity: .25; filter: grayscale(1); }
.page-turner__label { font-size: .58rem; letter-spacing: .12em; color: var(--sumi-soft); white-space: nowrap; }

@keyframes galleryCardIn {
  from { opacity: 0; transform: rotateY(-8deg) translateX(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-height: 650px) {
  .tojihon--endings .tojihon__head { padding-top: 7px; padding-bottom: 6px; }
  .tojihon--endings .tojihon__meter { padding-top: 5px; padding-bottom: 5px; }
  .ending-gallery { gap: 5px; padding-top: 6px; }
  .ending-card__line { display: none; }
  .page-turner { padding-top: 4px; padding-bottom: 4px; }
  .tojihon--endings .tojihon__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ending-card { animation: none; }
}

/* 語義の付箋 */
.fusen {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 18px 16px 16px;
  border: 1px solid var(--washi-line);
  border-top: 5px solid var(--shu);
  border-radius: 2px;
  background: linear-gradient(160deg, var(--washi-lit), var(--washi));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.fusen__word {
  font-family: var(--font-brush);
  font-size: 1.6rem;
  color: var(--sumi);
  letter-spacing: .06em;
}

.fusen__kanji { font-size: .68rem; color: var(--sumi-thin); margin-left: .5em; }

.fusen__type {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(34, 64, 95, .4);
  border-radius: 2px;
  font-size: .6rem;
  color: var(--ai);
  background: rgba(34, 64, 95, .07);
}

.fusen__row { margin-top: 12px; }

.fusen__label {
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--shu-deep);
  margin-bottom: 3px;
}

.fusen__meaning { font-size: 1rem; color: var(--sumi); font-family: var(--font-brush); }
.fusen__explain { font-size: .74rem; line-height: 1.85; color: var(--sumi-soft); }

.fusen__hint {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed rgba(176, 58, 46, .45);
  border-radius: 2px;
  background: rgba(176, 58, 46, .06);
  font-size: .72rem;
  color: var(--sumi);
}

/* ── 短冊型トースト ───────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 54px);
  transform: translate(-50%, 14px);
  z-index: 80;
  padding: 8px 16px;
  border: 1px solid var(--kin);
  border-radius: 2px;
  background: rgba(16, 27, 43, .95);
  color: var(--washi-lit);
  font-size: .68rem;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 表示調整 ─────────────────────────── */
@media (max-height: 700px) {
  .honbun { min-height: 7.4em; padding: 12px 2px 10px; }
  .stage { gap: 6px; padding: 10px 10px 12px; }
  .footer { display: none; }
}

/* 狭い端末では章題の帯を細くして本文の字送りを確保する */
@media (max-width: 359px) {
  .yohaku { display: none; }
  .stage { padding: 10px 6px 12px; }
  .maki { grid-template-columns: 1.5em 1fr; }
  .maki__body { padding: 12px 8px 14px; }
  .maki__chapter { font-size: .68rem; letter-spacing: .12em; }
}

@media (min-width: 620px) {
  .maki { grid-template-columns: 3em 1fr; }
  .maki__body { padding: 18px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .kasumi, .start__btn, .maki--turning { animation: none; }
}