@charset "UTF-8";
/* なみのま — 波とくらす（選んで進む読み物）— ゲーム画面
   正本= tasks/mf-cfs-media-site/72-story-game.md ／ 読み込むのはこのページだけ。

   ★このページは、サイトの「題の領域＋本文 43em」の型を使わない（okada 2026-09-16）。
     ヘッダーとフッターは共通。そのあいだは**画面幅いっぱいのゲーム画面**（.vn）が1枚。
   守っている線（26 設計の憲法）:
     第3条 線は 1px（枠は 1px・区切りは破線）。影・太線を使わない
     第4条 色を使わない。背景の線画・アイコン・体力の目盛り、すべて currentColor
     第5条 5つの配色すべてで成立させる（生の #hex を書かない）
     第6条 transition / animation を1つも書かない。文章はクリックで差し替わるだけ
     第8条 押せるものは 44px 以上。文の箱そのものが「次へ」のボタン
     第13条 押せるものは丸く（選択肢 --r）、囲いは角ばったまま（画面の枠）
     第15条 詰まらない余白 */

.vn-page { padding-block: 1.2rem 2.5rem; }
.vn-page .wrap-wide { max-width: min(var(--wide), 100%); }
.vn-page__lede { max-width: var(--measure); margin: 0 auto 1.2rem; font-size: .92rem; line-height: 1.9; color: var(--fg-sub); }
.vn-page__about { max-width: var(--measure); margin: 2.5rem auto 0; }

.st__note { font-size: .82rem; line-height: 1.9; color: var(--fg-sub); margin-block: .8rem; }
.vn__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 画面の枠 ---------- */
.vn { position: relative; border: 1px solid var(--ink); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; height: min(84vh, 820px); min-height: 560px; }
.vn__body:has(.vn__end) { overflow: hidden; justify-content: flex-start; }
.vn__bg { position: absolute; inset: 0; z-index: 0; color: var(--fg); opacity: .22; pointer-events: none; }
.vn__bg svg { width: 100%; height: 100%; display: block; }
/* 生成→ベクター化した線画を mask にした背景。線の色＝currentColor（第4条）。地は透明＝紙の色（41）。 */
.vn__bg--mask { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; }
:root[data-theme="dark"] .vn__bg, :root[data-paper="dark"] .vn__bg, :root[data-paper="black"] .vn__bg { opacity: .28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-paper]) .vn__bg { opacity: .28; } }

.vn__ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }

/* 人物の影絵 — 話している人だけ。右寄りに立ち、文の箱の後ろに下半身が隠れる（ゲーム画面の立ち絵の置き方）。
   ★塗りは currentColor 一色。顔は描かない。動かない。 */
/* ★全身（頭から足元まで）。足元は画面の下端に着ける＝浮いて見えない（okada 2026-09-17）。
   上の帯のすぐ下から下端まで。下半身は文の箱と下の帯の後ろに隠れる（ゲームの立ち絵の置き方）。 */
.vn__cast { position: absolute; z-index: 0; right: clamp(1.5rem, 8vw, 8rem); top: 3.3rem; bottom: 0; height: auto; width: auto; aspect-ratio: 9 / 16; color: var(--fg); opacity: .82; pointer-events: none; }
.vn__cast svg { width: 100%; height: 100%; display: block; }
.vn__cast[hidden] { display: none; }
@media (max-width: 47.99em) { .vn__cast { right: .6rem; height: 58%; opacity: .7; } }

/* ---------- 上の帯（日付・場所・天気・体力・メモ・約束） ---------- */
.vn__hud { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--ink); background: var(--bg); font-size: .82rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.vn__hud-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; color: var(--fg-sub); }
.vn__hud-item b { color: var(--fg); font-weight: 700; }
.vn__hud-item--main { color: var(--fg); font-weight: 700; }
.vn__wd { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border: 1px solid var(--ink); border-radius: 50%; font-size: .78em; font-weight: 700; }
.vn__hud-item--hp { margin-inline-start: auto; }
.vn__ticks { display: inline-flex; gap: 2px; margin-inline-start: .3rem; }
.vn__ticks i { display: block; width: 7px; height: 11px; border: 1px solid var(--ink); background: transparent; }
.vn__ticks i.is-on { background: var(--ink); }
.vn__ticks i.is-half { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 3px); }

/* ---------- 本文の領域 ---------- */
.vn__body { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem clamp(1rem, 3vw, 2.5rem) 1rem; }
.vn__head { margin-bottom: auto; padding-bottom: 1.2rem; }
.vn__title { margin: 0; display: inline-block; padding: .35rem .9rem; border: 1px solid var(--ink); background: var(--bg); font: 700 1rem/1.6 var(--font-ja); letter-spacing: .1em; }
.vn__title:focus, .vn__title-big:focus { outline: none; }
.vn__picked { margin: .6rem 0 0; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px dashed var(--ink); background: var(--bg); font-size: .85rem; font-weight: 700; letter-spacing: .04em; }

/* 文の箱 ＝ ゲームのメッセージウィンドウ。★箱そのものを押すと次の行へ（44px はゆうに超える） */
.vn__box { position: relative; border: 1px solid var(--ink); background: var(--bg); padding: 1.1rem clamp(1rem, 3vw, 1.8rem) .9rem; max-width: 60rem; margin-inline: auto; width: 100%; }
.vn__box--more { cursor: pointer; }
.vn__box--more:hover { background: var(--tint); }
.vn__box--more:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.vn__box-in { max-height: min(60vh, 36rem); overflow-y: auto; }
.vn__line { margin: 0 0 .9em; font-size: 1.05rem; line-height: var(--lh-content); letter-spacing: var(--ls-content); }
.vn__line:last-child { margin-bottom: 0; }
.vn__say { margin: 0 0 .9em; }
.vn__who { display: inline-block; margin-bottom: .3rem; padding: .1rem .6rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.vn__line--say { padding-inline-start: .8rem; border-inline-start: 1px solid var(--soft); }
.vn__count { margin: .6rem 0 0; font-size: .74rem; color: var(--fg-sub); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.vn__hint { position: absolute; right: 1rem; bottom: .6rem; margin: 0; display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--fg-sub); letter-spacing: .06em; }
.vn__hint .vn__ico { width: 1.3em; height: 1.3em; }

/* ---------- 選択肢 ---------- */
.vn__choices { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--soft); }
.vn__ask { margin: 0 0 .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--fg-sub); }
.vn__choice {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: var(--tap);
  padding: .7rem 1.1rem; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--bg); color: var(--fg); text-align: start; cursor: pointer;
  font: 600 .95rem/1.7 var(--font-ja); letter-spacing: .03em;
}
.vn__choice:hover { background: var(--tint); }
.vn__choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.vn__choice--main { justify-content: center; font-weight: 700; background: var(--ink); color: var(--bg); }
.vn__choice--main:hover { background: var(--ink); opacity: .92; }
.vn__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border: 1px solid var(--ink); border-radius: 50%; font: 700 .8rem/1 var(--font-en); }
.vn__choice-text { flex: 1 1 auto; }

/* 結果のあと（体力の増減・約束・メモ） */
.vn__after { margin-top: .6rem; }
.vn__fx { list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px dashed var(--soft); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .86rem; color: var(--fg-sub); font-variant-numeric: tabular-nums; }
.vn__fx li { display: inline-flex; align-items: center; gap: .35rem; }
.vn__insight { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--ink); }
.vn__insight-label { margin: 0 0 .2rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; letter-spacing: .12em; color: var(--fg-sub); }
.vn__insight-text { margin: 0; font-weight: 700; line-height: 1.8; }

/* ---------- 下の帯 ---------- */
.vn__bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .45rem 1rem; border-top: 1px solid var(--soft); background: var(--bg); font-size: .78rem; color: var(--fg-sub); }
.vn__bar-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); padding: 0 .9rem; border: 1px solid var(--soft); border-radius: 999px; background: var(--bg); color: var(--fg); font: 600 .78rem/1 var(--font-ja); letter-spacing: .04em; cursor: pointer; text-decoration: none; }
.vn__bar-btn:hover { border-color: var(--ink); }
.vn__bar-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.vn__bar-note { display: inline-flex; align-items: center; gap: .35rem; margin-inline-start: auto; }

/* ---------- 表紙・終わり ---------- */
.vn__cover, .vn__end { position: relative; max-width: 46rem; margin: auto; padding: 1.4rem clamp(1rem, 3vw, 2rem); border: 1px solid var(--ink); background: var(--bg); }
.vn__cover { margin: auto; }
.vn__end { margin: 0 auto; max-width: 56rem; width: 100%; display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding-block: 1rem .8rem; }
.vn__end .st__h3 { margin: 1.2rem 0 .5rem; }
.vn__end .st__table { margin: .5rem 0 .6rem; }
.vn__end .st__fig { margin-top: .4rem; }
.vn__end .vn__line { font-size: 1rem; margin-bottom: .7em; }
.vn__end .st__label { margin-top: .4rem; }
/* 感想の欄は横幅があるときは2列（ニックネーム｜ひとこと）にして高さを抑える */
.vn__fb { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 0 1.2rem; align-items: start; }
.vn__fb .st__input--ta { min-height: 4.6rem; }
@media (max-width: 47.99em) { .vn__fb { grid-template-columns: 1fr; } }
.vn__end-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.vn__end-body:focus { outline: none; }
.st__h3--first { margin-top: 0; padding-top: 0; border-top: 0; }
/* 結果のページ送り（5ページ）。★動かない。押すと差し替わるだけ。 */
.vn__end-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--soft); }
.vn__end-nav .vn__bar-btn[disabled] { opacity: .35; cursor: default; }
.vn__bar-btn--main { margin-inline-start: auto; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.vn__end-dots { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.vn__end-dot { min-height: var(--tap); padding: 0 .7rem; border: 1px solid var(--soft); border-radius: 999px; background: var(--bg); color: var(--fg-sub); font: 600 .74rem/1 var(--font-ja); letter-spacing: .06em; cursor: pointer; }
.vn__end-dots .is-on .vn__end-dot { border-color: var(--ink); color: var(--fg); font-weight: 700; }
.vn__eyebrow { margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .14em; color: var(--fg-sub); }
.vn__title-big { margin: 0 0 .3rem; font: 700 1.7rem/1.4 var(--font-ja); letter-spacing: .1em; }
.vn__sub { margin: 0 0 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ink); font-size: .85rem; letter-spacing: .08em; color: var(--fg-sub); }
.vn__intro .vn__line { font-size: 1rem; }
.vn__how { margin: 1rem 0 1.2rem; padding: .9rem 0 0 1.4em; border-top: 1px dashed var(--soft); font-size: .88rem; line-height: 1.9; color: var(--fg-sub); }
.vn__cover .vn__choices { border-top: 0; padding-top: 0; }
.vn__lede { margin: 0 0 1rem; }
.vn__more { margin-top: 1.2rem; border-top: 1px dashed var(--soft); }
.vn__more-sum { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--fg-sub); }
.vn__more .vn__intro { margin-top: .4rem; }
.vn__more .vn__how { margin: .8rem 0 .6rem; border-top: 0; padding-top: 0; }

.vn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 52em) { .vn__grid { grid-template-columns: 1fr; } }

.st__h3 { margin: 2rem 0 .8rem; display: flex; align-items: center; gap: .4rem; font: 700 1.02rem/1.6 var(--font-ja); letter-spacing: .06em; padding-top: .9rem; border-top: 1px solid var(--soft); }
.st__fig { margin: 1.4rem 0 0; }
.st__wave-wrap { border: 1px solid var(--soft); padding: .6rem .6rem .2rem; }
.st__wave { display: block; width: auto; max-width: 100%; height: auto; max-height: 30vh; margin: 0 auto; color: var(--fg); }
.st__fig figcaption { margin-top: .5rem; font-size: .8rem; line-height: 1.8; color: var(--fg-sub); }
.st__table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.2rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.st__table caption { text-align: start; font-size: .76rem; letter-spacing: .1em; color: var(--fg-sub); padding-bottom: .4rem; }
.st__table th, .st__table td { padding: .5rem .4rem; border-bottom: 1px solid var(--soft); text-align: start; vertical-align: top; line-height: 1.7; }
.st__table th { font-weight: 700; white-space: nowrap; width: 8em; }
.st__tnote { color: var(--fg-sub); font-size: .8rem; }
@media (max-width: 40em) { .st__table th { width: auto; white-space: normal; } .st__tnote { display: block; } }
.st__prev { margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border: 1px dashed var(--soft); font-size: .86rem; }
.st__insights { list-style: none; margin: 0; padding: 0; }
@media (min-width: 52em) { .st__insights { columns: 2; column-gap: 2rem; } .st__ins { break-inside: avoid; } }
.st__ins { padding: .45rem 0; border-bottom: 1px dashed var(--soft); line-height: 1.8; }
.st__ins:not(.st__ins--got) { color: var(--fg-sub); }
.st__label { display: block; margin: .9rem 0 .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.st__input { width: 100%; min-height: var(--tap); padding: .5rem .8rem; border: 1px solid var(--ink); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; line-height: 1.7; }
.st__input--ta { resize: vertical; }
.vn__end .pill { margin-top: .9rem; }

/* ---------- 感想（承認制コメント）---------- */
.vn__cm-thanks { margin: 0 0 .8rem; padding: .6rem .9rem; border: 1px solid var(--ink); font-size: .9rem; font-weight: 700; }
.vn__cm-form .pill { margin-top: .7rem; }
.vn__cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vn__cm-h { margin: 1.2rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--soft); font: 700 .95rem/1.6 var(--font-ja); letter-spacing: .06em; }
.vn__cm-list { list-style: none; margin: 0; padding: 0; }
.vn__cm { padding: .55rem 0; border-bottom: 1px dashed var(--soft); }
.vn__cm-who { margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.vn__cm-date { margin-inline-start: .7em; font-weight: 400; color: var(--fg-sub); font-variant-numeric: tabular-nums; }
.vn__cm-text { margin: 0; font-size: .95rem; line-height: 1.8; }

/* ---------- 道具（これまでの選択・約束・保存・合言葉） ---------- */
.st__tools { max-width: var(--measure); margin: 1.4rem auto 0; border-top: 1px dashed var(--soft); border-bottom: 1px dashed var(--soft); }
.st__tools-sum { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: .88rem; letter-spacing: .04em; }
.st__tools-body { padding-block: .2rem 1.2rem; }
.st__tools-h { margin: 1rem 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--fg-sub); }
.st__log, .st__promises { margin: 0; padding-inline-start: 1.4em; font-size: .88rem; line-height: 1.9; }
.st__code { width: 100%; padding: .5rem .7rem; border: 1px solid var(--soft); border-radius: 6px; background: var(--bg); color: var(--fg); font: .78rem/1.6 ui-monospace, Menlo, monospace; word-break: break-all; }
.st__row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

/* ---------- 狭い画面 ---------- */
/* ★スマホは、画面の幅と高さいっぱいの1枚に**固定**する（okada 2026-09-17「伸びたり縮んだりしないように」）。
   場面が替わっても枠の高さは変わらない。文が長いときは、文の箱の中だけがスクロールする。
   svh＝ブラウザの帯を差し引いた「いちばん狭いときの高さ」。dvh だと帯の出入りで枠が伸び縮みする。 */
@media (max-width: 47.99em) {
  .vn-page { padding-block: .6rem 2rem; }
  .vn-page .wrap-wide { padding-inline: 0; }
  .vn-page .breadcrumb, .vn-page__lede { padding-inline: var(--gutter); }
  .vn-page__about { padding-inline: var(--gutter); }
  .vn { height: 100svh; min-height: 0; max-height: 100svh; border-inline: 0; }
  .vn__hud { flex-wrap: nowrap; height: 2.7rem; padding: 0 .7rem; gap: .2rem .7rem; font-size: .74rem; overflow: hidden; }
  .vn__hud-item--place, .vn__hud-item--w { display: none; }
  .vn__hud-item--hp { margin-inline-start: auto; }
  .vn__ticks i { width: 5px; height: 9px; }
  .vn__body { padding: .7rem .7rem .6rem; overflow: hidden; }
  .vn__head { padding-bottom: 0; }
  .vn__title { font-size: .9rem; padding: .25rem .7rem; }
  .vn__picked { font-size: .78rem; }
  .vn__box { flex: none; height: 56%; display: flex; flex-direction: column; padding: .8rem .8rem 1.5rem; }
  /* ★選択肢（や「つづける」）が出ている間だけ、箱を上へ伸ばして全部見えるようにする（okada 2026-09-17「3つ目を選ぶのにスクロールが要る」）。
     枠そのものの高さは変わらない＝箱が背景を多く覆うだけ。5つの選択肢でも 84% に収まる（実測）。 */
  .vn__box--tail { height: auto; min-height: 56%; max-height: 86%; padding-bottom: .8rem; }
  .vn__box--tail .vn__count { display: none; }
  .vn__box--tail .vn__choices { margin-top: .6rem; padding-top: .6rem; gap: .4rem; }
  .vn__box--tail .vn__choice { min-height: 2.6rem; padding: .45rem .7rem; font-size: .88rem; line-height: 1.45; gap: .6rem; }
  .vn__box--tail .vn__num { width: 1.6em; height: 1.6em; font-size: .72rem; }
  .vn__box-in { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .vn__line { font-size: 1rem; }
  .vn__hint { right: .7rem; bottom: .4rem; }
  .vn__hint span { display: none; }
  .vn__choices { margin-top: .8rem; padding-top: .8rem; gap: .45rem; }
  .vn__choice { padding: .55rem .8rem; font-size: .9rem; line-height: 1.55; }
  .vn__bar { height: 2.9rem; padding: 0 .6rem; gap: .3rem .6rem; flex-wrap: nowrap; overflow: hidden; }
  .vn__bar-btn { min-height: 2.2rem; padding: 0 .7rem; font-size: .72rem; }
  .vn__bar-note { display: none; }
  /* 表紙と終わりは、本文の領域そのものをスクロールさせる */
  .vn__body:has(.vn__cover) { overflow-y: auto; justify-content: flex-start; }
  .vn__body:has(.vn__end) { overflow: hidden; justify-content: flex-start; }
  .vn__cover, .vn__end { padding: .9rem .8rem; margin: 0; max-width: none; }
  .vn__end { height: 100%; }
  .vn__end-nav { gap: .4rem; margin-top: .6rem; padding-top: .6rem; }
  .vn__end-dot { padding: 0 .5rem; font-size: .7rem; min-height: 2.2rem; }
  .vn__end-nav .vn__bar-btn { min-height: 2.4rem; min-width: 2.4rem; padding: 0 .6rem; white-space: nowrap; justify-content: center; }
  .st__table { font-size: .84rem; } .st__table th, .st__table td { padding: .35rem .3rem; }
  .st__ins { padding: .3rem 0; font-size: .9rem; }
  .vn__end .vn__line { font-size: .93rem; line-height: 1.75; margin-bottom: .55em; }
  .vn__end .vn__title-big { font-size: 1.2rem; margin-bottom: .2rem; }
  .vn__end .vn__eyebrow { margin-bottom: .1rem; }
  .vn__title-big { font-size: 1.35rem; }
  .vn__lbl { display: none; }
  .vn__hud-item b { font-size: .9rem; }
  /* 影絵は文の箱の上（背景の領域）に見えるように、箱の高さ 56% の上に載せる */
  /* スマホ: 足元は下端・頭は上の帯の下。文の箱の上に頭と胴が出て、脚は箱の後ろ（立ち絵の置き方）。体の中心が右寄りに来るよう右へずらす */
  .vn__cast { right: -16vw; top: 2.9rem; bottom: 0; height: auto; opacity: .55; }
}