/* ゆめのゆうしゃ(試作)。色はゆめのとしょかんの夜のトークンにそろえる。外部フォントは使わない。 */
:root {
  --night-0: #12162a; --night-1: #1c2236; --night-2: #262d45;
  --wood: #6b4a33; --wood-dark: #3f2a1c; --wood-light: #8a6446;
  --paper: #d8c9ad; --paper-card: #e9dcc2; --ink: #2a211c;
  --text-night: #e6d9bf; --text-dim: #a79c86;
  --gold: #f2d27a; --rose: #c98a8a; --sky: #8aa6c9; --leaf: #8fae8a; --lav: #a99bc4;
  --ui: ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night-1); color: var(--text-night); font-family: var(--ui); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#screen { position: fixed; inset: 0; overflow: hidden; }
#screen > section { position: absolute; inset: 0; }
canvas { display: block; image-rendering: pixelated; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.btn {
  min-width: 64px; min-height: 52px; padding: 10px 20px; border-radius: 16px;
  border: 2px solid var(--text-dim); background: var(--night-2); color: var(--text-night);
  box-shadow: 0 3px 0 var(--night-0); font-size: 18px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.btn.big { min-height: 64px; font-size: 24px; padding: 12px 36px; background: var(--wood); border-color: var(--gold); }
.btn.small { min-height: 48px; font-size: 15px; padding: 8px 14px; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn:active > *, .btn.down > * { transform: scale(.94); }
.btn[aria-pressed="true"] { border-color: var(--gold); background: #4a3b2c; }

/* ---------- タイトル・おしまい */
.title-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-box {
  position: absolute; left: 50%; top: max(76px, 9%); transform: translateX(-50%); width: min(92vw, 420px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 18px;
  background: color-mix(in srgb, var(--night-0) 78%, transparent); border: 2px solid var(--wood-light); border-radius: 20px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .title-box { background: rgba(18, 22, 42, .78); } }
.title-box h1 { margin: 0; font-size: clamp(30px, 9vw, 44px); color: var(--gold); letter-spacing: .04em; text-shadow: 0 3px 0 var(--wood-dark); text-align: center; }
.title-hint { margin: 0; color: var(--text-night); font-size: 16px; text-align: center; }
/* 押せない 本を 押したときの 一言(金色に するだけ。明るさを 振らない) */
.title-hint.say { color: var(--gold); font-weight: 800; }
/* 本棚: 話の本を表紙を見せて並べる(押せる本 = 色の地・縁・影)。「つづく」は影だけ(押せない・縁と影を持たない) */
.title .title-box { width: min(94vw, 560px); }
.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 10px 6px 14px; border-bottom: 10px solid var(--wood); border-radius: 0 0 6px 6px; }
.book {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 132px; padding: 8px 6px 8px 12px;
  border-radius: 6px 12px 12px 6px; border: 2px solid var(--text-dim); background: color-mix(in srgb, var(--tint, var(--rose)) 72%, var(--night-1));
  box-shadow: inset 7px 0 0 var(--wood-dark), 0 4px 0 var(--wood-dark); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book { background: linear-gradient(rgba(28, 34, 54, .28), rgba(28, 34, 54, .28)) var(--tint, var(--rose)); } }
.book:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.book:active > * { transform: scale(.95); }
.book .cover { width: 100px; height: 80px; image-rendering: pixelated; }
.book .bt { font-size: 16px; line-height: 1.25; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.book .no { position: absolute; left: 12px; top: 4px; font-size: 13px; font-weight: 900; color: color-mix(in srgb, var(--ink) 70%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book .no { color: rgba(42, 33, 28, .7); } }
.book .drop { position: absolute; right: -8px; top: -12px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.book .drop small { font-size: 10px; font-weight: 800; color: var(--text-night); background: var(--night-0); border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.dropsvg { width: 28px; height: 35px; display: block; }
.slot { display: flex; min-width: 0; }
.slot > .book { flex: 1; min-width: 0; }
.book.soon { cursor: pointer; border-color: transparent; box-shadow: none; background: color-mix(in srgb, var(--night-0) 92%, transparent); color: var(--text-dim); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book.soon { background: rgba(18, 22, 42, .92); } }
.book.soon.wiggle, .book.locked.wiggle, .book.next.wiggle { animation: wiggle .4s ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .book.soon.wiggle, .book.locked.wiggle, .book.next.wiggle { animation: wiggle-still .4s steps(1, end); } @keyframes wiggle-still { from, to { transform: rotate(-2deg); } } }
.book.soon .shade { width: 56px; height: 64px; border-radius: 50% 50% 8px 8px; background: color-mix(in srgb, var(--text-dim) 22%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book.soon .shade { background: rgba(167, 156, 134, .22); } }
.book.soon .no { color: var(--text-dim); }
/* まだ 開いていない 本(前の話を おわらせると ひらく): 棚には ならぶが うすく、右上に 金色の 鍵。
   こわくない 見た目に して、押しても 責めない(やわらかい音 + ゆれ + 上の 一言)。寸法は 押せる 本と 同じ */
.book.locked { background: color-mix(in srgb, var(--tint, var(--rose)) 30%, var(--night-1)); border-color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book.locked { background: linear-gradient(rgba(28, 34, 54, .7), rgba(28, 34, 54, .7)) var(--tint, var(--rose)); border-color: rgba(167, 156, 134, .6); } }
.book.locked .cover { opacity: .45; }
.book.locked .bt, .book.locked .no { opacity: .6; }
.book.locked .lock { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; }
.book.locked .lock svg { width: 100%; height: 100%; display: block; }
/* 次に 遊ぶ 本: いつも 金の 縁(明滅しない・光らせない)。押せる 本の 中で ここが 次と 分かる */
.book.next { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; }
/* 第 9 話を よみおえると、さいごの「いろの ない ほん」の 影に うすい むらさきの ひかりが ともる(とびらが ひらいた しるし。うごかない・明るさを 振らない) */
.book.soon.ajar .shade { background: color-mix(in srgb, #b9a8e6 40%, transparent); box-shadow: 0 0 14px 2px rgba(190, 170, 240, .45); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .book.soon.ajar .shade { background: rgba(185, 168, 230, .4); } }
/* 7 さつ(第 6 話 + つづく)の 縦: 3 れつに して 画面に おさめる(2 れつだと 4 だんで 下へ はみ出す) */
@media (orientation: portrait) { .books[style*="--cols:7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .books[style*="--cols:7"] .book { min-height: 118px; padding-left: 9px; padding-right: 4px; } .books[style*="--cols:7"] .cover { width: 84px; height: 67px; } .books[style*="--cols:7"] .bt { font-size: 12px; overflow-wrap: normal; } }
/* 10 さつ(第 9 話 + つづく)の 縦: 「つづく」が 1 さつだけ 4 だんめに のこる ときは、横いっぱいの 低い 帯に する
   (ふつうの 本の 高さの まま だと 375×667 の en で 下へ 35px はみ出した。押せる 高さは 44px 以上 のこす) */
@media (orientation: portrait) { .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book.soon { flex-direction: row; justify-content: center; gap: 10px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book.soon .shade { width: 28px; height: 32px; }
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book.soon.ajar .shade { box-shadow: 0 0 18px 4px rgba(190, 170, 240, .55); }
  /* 10 さつ目(さいごの ほん)が 1 さつだけ 下の 段に のこる → 横いっぱいの 低い 帯(表紙は 左・題は 右。押せる 高さ 64px)← story-cast.md「縦の 本棚の のこり 1 さつ」 */
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book[data-ep] { flex-direction: row; justify-content: center; gap: 12px; min-height: 64px; padding-top: 4px; padding-bottom: 4px; }
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book[data-ep] .cover { width: 70px; height: 56px; }
  .books[style*="--cols:7"] > .slot:nth-child(3n+1):last-child > .book[data-ep] .bt { font-size: 14px; } }
/* 低い 縦(360×640 など): 見出しと 本を 少し 小さく して 7 さつを 画面に おさめる */
@media (orientation: portrait) and (max-height: 700px) { .title .title-box:has(.books[style*="--cols:7"]) { top: 66px; gap: 6px; padding-top: 10px; padding-bottom: 10px; } .title .title-box:has(.books[style*="--cols:7"]) h1 { font-size: 26px; }
  .books[style*="--cols:7"] .book { min-height: 88px; padding-top: 4px; padding-bottom: 4px; } .books[style*="--cols:7"] .cover { width: 60px; height: 48px; }
  /* 長い 題(id「Pahlawan Negeri Dongeng」)が 2 行・鍵の ひとことも 2 行・本の 題が 4 行(fr「Des chapeaux pour les amis de pierre」)に なると、
     10 さつ目が 360×640・390×664 の 下へ 出た。箱の 横の 余白を 詰めて 本を 広げ、表紙と 行間を 小さく する(題は 切らない = 4 行でも 全部 出す)。
     見張りは boot.feature「低い 縦の 本棚」(LANGS の 全部 × 2 画面 × 鍵の ひとこと あり/なし) */
  .title .title-box:has(.books[style*="--cols:7"]) { padding-left: 10px; padding-right: 10px; } .books[style*="--cols:7"] { gap: 6px; padding: 8px 4px 10px; }
  .books[style*="--cols:7"] .bt { line-height: 1.15; }
  .title .title-box:has(.books[style*="--cols:7"]) h1 { line-height: 1.1; } .title .title-box:has(.books[style*="--cols:7"]) .title-hint { font-size: 14px; line-height: 1.25; } }
.got { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--text-night); text-align: center; }
/* さいごの ほん(第 10 話)の おしまい: すべての 話の しずくを 1 れつに ならべて、その 下に 字 */
.end.finale .got { flex-direction: column; gap: 4px; }
.end.finale .got .drops { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.end.finale .got .dropsvg { width: 20px; height: 25px; }
.end .credit { margin: 0; font-size: 12px; color: var(--text-dim); text-align: center; overflow-wrap: anywhere; } /* 曲の クレジット(さいごの ほん の おしまい だけ。字だけ) */
.corner-l { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); }
.corner-r { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); }
#site-home { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; text-decoration: none; } /* 入口ページへ戻る口(本棚の 右上。site-home.md) */
#site-home > svg { display: block; }
/* ことば と おと の口(#1757。design/oto.md): 本棚の 左上に 1 つの 列で 並べる(ことば の 幅は 言語で 64〜104px なので 座標を 決め打ちしない)。
   あそぶ 画面では おと だけを 右上の 角に(吹き出し・字幕は main.js の soundBox を よける。帯 .hud より 上の 層) */
.title-tools { display: flex; align-items: flex-start; gap: 8px; }
.btn.sound-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 15px; }
.sound-btn > svg { display: block; }
#sound[aria-pressed="true"] .snd-on, #sound[aria-pressed="false"] .snd-off { display: none; }
.play > .play-sound { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); z-index: 7; }
@media (orientation: landscape) { .end .title-box { top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); }
  .title-box { top: 50%; transform: translate(-50%, -50%); width: min(60vw, 420px); } .title-box h1 { font-size: 34px; }
  .title .title-box { width: min(86vw, 640px); gap: 8px; padding: 14px 16px; } .title .title-box h1 { font-size: 30px; }
  .books { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } /* 横は 1 段に 並べる(本の数 = --cols。7 冊まで) */
  .books.many { gap: 10px; } .books.many .book { padding-left: 10px; } .books.many .bt { font-size: 13px; overflow-wrap: normal; }
  .title .title-box:has(.books[style*="--cols:6"]) { width: min(94vw, 760px); } .books[style*="--cols:6"] { gap: 8px; } .books[style*="--cols:6"] .book { padding-left: 6px; padding-right: 6px; }
  /* 7 さつ(第 6 話 + つづく)も 1 段: 箱を 横いっぱいに 近づけ、表紙を 少し 小さく */
  .title .title-box:has(.books[style*="--cols:7"]) { width: min(97vw, 880px); } .books[style*="--cols:7"] { gap: 6px; } .books[style*="--cols:7"] .book { padding-left: 5px; padding-right: 5px; } .books[style*="--cols:7"] .cover { width: 84px; height: 67px; } .books[style*="--cols:7"] .bt { font-size: clamp(11px, 1.6vw, 13px); } }
@media (orientation: landscape) and (max-height: 420px) { .title .title-box { top: auto; bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding-top: 8px; padding-bottom: 8px; } .title .title-box h1 { font-size: 26px; } /* 低い 横は 本棚の 箱を 下へ 寄せて、左上の「ことば」に かぶせない */
  .book { min-height: 118px; } .book .cover { width: 84px; height: 67px; } .end .got { font-size: 16px; } }
/* 低い 横で 8 さつ(第 7 話 + つづく = 2 段目が できる): 見出しと 表紙を 小さく して、英語の 4 行の 題でも 箱の 上が 画面から 出ないように */
@media (orientation: landscape) and (max-height: 420px) { .title .title-box:has(.books[style*="--cols:7"]) { gap: 4px; padding-top: 6px; padding-bottom: 6px; } .title .title-box:has(.books[style*="--cols:7"]) h1 { font-size: 22px; line-height: 1.1; }
  .title .title-box:has(.books[style*="--cols:7"]) > p { font-size: 12px; margin: 0; }
  .books[style*="--cols:7"] .book { min-height: 96px; padding-top: 4px; padding-bottom: 4px; } .books[style*="--cols:7"] .cover { width: 68px; height: 54px; } .books[style*="--cols:7"] .bt { font-size: 11px; line-height: 1.15; } }
/* もっと 低い 横(568×320 など)で 10 さつ: 本を 5 れつ × 2 だんに し(題が 4〜5 行に ならない)、箱を 画面の 上下いっぱいに 固定する。
   見出しは 左上の ことば・おと と 右上の 家の あいだ(まんなか 180px)、ひとことと 本は その 帯(上から 58px)の 8px 下から。
   前は 4〜5 行の 題(en・id・fr)で 箱が 画面の 上へ 出て(上端 −30 / −43)、ことば が 1 さつ目に 重なった(#1757 の 前に 直した) */
@media (orientation: landscape) and (max-height: 340px) {
  .title .title-box:has(.books[style*="--cols:7"]) { top: max(6px, env(safe-area-inset-top)); bottom: max(6px, env(safe-area-inset-bottom)); gap: 0; padding-top: 4px; padding-bottom: 4px; }
  .title .title-box:has(.books[style*="--cols:7"]) h1 { flex: 0 0 auto; box-sizing: border-box; height: 46px; max-width: 180px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1.1; margin-bottom: 8px; }
  .title .title-box:has(.books[style*="--cols:7"]) > p { flex: 0 0 auto; }
  .books[style*="--cols:7"] { margin-top: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px 4px 8px; }
  .books[style*="--cols:7"] .book { min-height: 0; } .books[style*="--cols:7"] .cover { width: 50px; height: 40px; }
  .books[style*="--cols:7"] .bt { font-size: 11px; line-height: 1.15; overflow-wrap: normal; } }

.modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10, 12, 24, .72); padding: 16px; }
.modal-box {
  width: min(94vw, 460px); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 20px 16px; border-radius: 18px; background: var(--night-2); border: 2px solid var(--wood-light); text-align: center;
}
.modal-box h2 { margin: 0 0 4px; font-size: 26px; color: var(--gold); }
.choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* ことばの 一覧(14 言語 + とじる)。縦は 2 列・横は 5 列の 格子で、低い 画面でも スクロールさせない。札は .btn と 同じ 高さ 52px */
.modal-box.lang-box { gap: 10px; }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lang-grid .btn { min-width: 0; min-height: 52px; padding: 6px 8px; font-size: 17px; line-height: 1.15; overflow-wrap: break-word; }
/* とじる は ことばの 札と 見分ける(木の 地・× の 印。縦は 下の 段を 横いっぱい、横は 3 段目の 空いた 1 ます) */
.lang-grid .btn.close { background: var(--wood); border-color: var(--wood-light); }
.lang-grid .btn.close::before { content: '× '; }
@media (orientation: portrait) { .lang-grid .btn.close { grid-column: 1 / -1; } }
@media (orientation: landscape) { .modal-box.lang-box { width: min(94vw, 760px); } .lang-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (orientation: portrait) and (max-height: 600px) { .modal:has(.lang-box) { padding: 8px; } .modal-box.lang-box { max-height: 96vh; padding: 10px 12px; gap: 6px; } .modal-box.lang-box h2 { font-size: 22px; margin: 0; } .lang-grid { gap: 6px; } }
@media (orientation: landscape) and (max-width: 640px) { .modal:has(.lang-box) { padding: 8px; } .lang-grid { gap: 6px; } .lang-grid .btn { font-size: 14px; padding: 4px; } }
@media (orientation: landscape) and (max-height: 420px) { .modal-box.lang-box { padding: 12px 14px; gap: 8px; } .modal-box.lang-box h2 { font-size: 22px; margin: 0; } }

/* ---------- あそぶ(上に舞台、下に帯) */
.play { display: flex; flex-direction: column; background: var(--night-0); }
.play .view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.play .stage { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
/* 字幕と吹き出しは指に透明(下の canvas で仲間を掴めるように) */
.caption.rest { visibility: hidden; }
.caption {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: max-content; max-width: min(92%, 760px); margin: 0;
  padding: 6px 16px; border-radius: 12px; background: rgba(18, 22, 42, .78); color: var(--text-night);
  font-size: clamp(16px, 2.3vw, 22px); font-weight: 700; line-height: 1.45; text-align: center; pointer-events: none; word-break: keep-all;
}
.bubble {
  position: absolute; left: 0; top: 0; max-width: min(46%, 380px); padding: 6px 14px 8px; border-radius: 14px;
  background: var(--paper-card); color: var(--ink); border: 3px solid var(--wood); pointer-events: none; z-index: 5;
  font-size: clamp(16px, 2.2vw, 21px); font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; box-shadow: 0 3px 0 rgba(10, 12, 24, .5);
}
.bubble::after { content: ''; position: absolute; left: calc(var(--tail, 30px) - 9px); bottom: -12px; border: 9px solid transparent; border-top-color: var(--wood); border-bottom: 0; }
.bubble.below::after { display: none; }
/* ことばの切れ目のある言語は 語の中で折らない(anywhere は最小幅まで縮めて「, Cinderella!」のように句読点から始まる行を作った) */
html:not(:lang(ja)) .bubble { overflow-wrap: break-word; }
.bubble.side { max-width: min(36%, 320px); }
.bubble.side::after { left: -12px; bottom: auto; top: calc(var(--tail, 30px) - 9px); border: 9px solid transparent; border-right-color: var(--wood); border-left: 0; }
.bubble .who { display: block; font-size: .78em; color: var(--wood); }
/* 仲間と敵の言い合い(夜4)。お話の吹き出し(紙の色・木の枠・角の丸い四角)と見分けがつくように、
   仲間は 夜の色の まるい吹き出し。枠・しっぽ・名前は 話す子の色(リナ ももいろ・ポチ だいだい・ミケ きいろ)。
   敵は 角の小さい四角で、インクの濃い紫(底に しみの影)。形と色の両方で 仲間と分ける */
.bubble.chat {
  --hc: var(--sky); max-width: 360px; padding: 4px 16px 6px; border-radius: 22px; border-color: var(--hc);
  background: var(--night-1); color: var(--text-night); font-size: clamp(15px, 2vw, 19px); box-shadow: 0 3px 0 rgba(10, 12, 24, .6);
}
.bubble.chat[data-who="rina"] { --hc: #f4a9c6; }
.bubble.chat[data-who="pochi"] { --hc: #f2b35e; }
.bubble.chat[data-who="mike"] { --hc: #f2d27a; }
.bubble.chat[data-side="foe"] { --hc: #c9a8ec; background: #4b2a63; border-radius: 6px; box-shadow: 0 3px 0 rgba(10, 12, 24, .6), inset 0 -5px 0 rgba(20, 10, 30, .35); }
.bubble.chat .who { color: var(--hc); }
.bubble.chat::after { border-top-color: var(--hc); }
.bubble.chat[data-mode="below"]::after { display: none; }
.bubble.chat[data-mode="side"]::after { left: -12px; bottom: auto; top: calc(var(--tail, 30px) - 9px); border: 9px solid transparent; border-right-color: var(--hc); border-left: 0; }
.bubble.chat[data-mode="off"]::after { left: auto; right: -12px; bottom: auto; top: calc(var(--tail, 30px) - 9px); border: 9px solid transparent; border-left-color: var(--hc); border-right: 0; }
/* 声だけの おかしら(グローミーヌ。第 5 話から)。姿は 出さないので しっぽ なし。深い 夜の色に、しずかな すみれ色の 光(動かさない) */
.bubble.chat[data-mode="voice"]::after { display: none; }
.bubble.chat[data-who="gloamine"] { --hc: #b9a6ee; background: #1e1733; border-radius: 14px; font-style: normal; box-shadow: 0 0 0 2px rgba(185, 166, 238, .25), 0 0 18px rgba(150, 120, 230, .45); }

.hud {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: stretch; padding: 6px 10px;
  padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: var(--night-1); border-top: 3px solid var(--wood-dark); pointer-events: none;
  position: relative; z-index: 6; /* 札の知らせ(.note)は舞台の下のふちへ少し重ねて出す */
}
.cards { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.card { position: relative; display: flex; align-items: center; gap: 12px; padding: 4px 10px 4px 4px; border-radius: 12px; background: var(--night-2); border: 2px solid var(--night-2); min-width: 0; }
/* 顔の列 = レベルの列(顔の右下の角に Lv の数字、顔の下に経験のバー) */
.card .lvcol { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.card .facebox { position: relative; display: block; }
.card .face { width: 52px; height: 52px; border-radius: 10px; background: var(--night-0); }
.lvbadge {
  position: absolute; right: -16px; bottom: -10px; display: flex; align-items: baseline; gap: 1px; padding: 0 4px 1px; border-radius: 8px;
  background: var(--night-0); border: 2px solid var(--sky); color: var(--text-night); line-height: 1; transform-origin: 100% 100%; /* 顔の外の角を起点にふくらむ(顔を隠さない) */
}
.lvbadge small { font-size: 10px; font-weight: 800; color: var(--sky); }
.lvbadge b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lvbadge.pop { animation: lv-pop .7s ease-out; }
@keyframes lv-pop { 0% { transform: scale(1); } 25% { transform: scale(1.4); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }
.exp { position: relative; display: block; width: 100%; height: 7px; border-radius: 4px; background: #3a3350; overflow: hidden; }
.exp i { position: absolute; inset: 0; background: var(--sky); transform-origin: left; transform: scaleX(0); }
.card .meta { display: flex; flex-direction: column; gap: 4px; min-width: 70px; }
.card .nm { font-size: 17px; line-height: 1.1; white-space: nowrap; }
.gauge { position: relative; display: block; width: 88px; height: 12px; border-radius: 6px; background: #3a3350; overflow: hidden; }
.gauge i { position: absolute; inset: 0; background: var(--rose); transform-origin: left; transform: scaleX(0); }
.card .tag { display: none; position: absolute; right: 6px; top: -10px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.card .tag.ready { background: var(--gold); color: var(--ink); }
.card .tag.rest { background: var(--lav); color: var(--ink); }
.card.ready { border-color: var(--gold); } .card.ready .gauge i { background: var(--gold); } .card.ready .tag.ready { display: block; }
.card.rest { border-color: var(--lav); } .card.rest .face { opacity: .55; } .card.rest .tag.rest { display: block; } .card.rest .tag.ready { display: none; }
.card.away .face { opacity: .7; }
/* 札の知らせ: ひっさつ の名前(金)・覚えた ひっさつ(空色の ふち + 「おぼえた!」)。札の上のふちに少しだけ出す */
.card .note {
  position: absolute; left: 50%; bottom: calc(100% - 8px); translate: -50% 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
  width: max-content; max-width: calc(100% + 6px); padding: 2px 10px 3px; border-radius: 10px; background: var(--night-0); border: 2px solid var(--gold);
  text-align: center; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; pointer-events: none;
  scale: 0; transform-origin: 50% 100%;
}
/* 札の幅に収める(となりの札の知らせと重ならない。長い名前は ことばの切れ目で折り返す) */
.card .note .ntext { font-size: 15px; color: var(--gold); }
.card .note .nlabel { display: none; font-size: 11px; font-weight: 800; color: var(--sky); }
.card .note[data-kind="learn"] { border-color: var(--sky); }
.card .note[data-kind="learn"] .nlabel { display: block; }
.card .note.go { animation: note-in 1.8s ease-out forwards; }
.card .note[data-kind="learn"].go { animation-duration: 2.4s; }
@keyframes note-in { 0% { scale: .5; } 10% { scale: 1.06; } 18% { scale: 1; } 88% { scale: 1; } 100% { scale: 0; } }
/* 個別の translate / scale を 持たない 古い 端末(Safari 14.0・Chrome 103 まで)だけ transform で 同じ 動き(新しい 端末で 二重に 掛けない #1621) */
@supports not (translate: 0) {
  .card .note { transform: translateX(-50%) scale(0); }
  .card .note.go { animation-name: note-in-t; }
  @keyframes note-in-t { 0% { transform: translateX(-50%) scale(.5); } 10% { transform: translateX(-50%) scale(1.06); } 18%, 88% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(0); } }
}
.sub { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: center; }
.pips { display: flex; gap: 4px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: #3a3350; border: 2px solid var(--wood-light); }
.pips i.on { background: var(--gold); border-color: var(--gold); }
/* スコア(塗った面積)。レベルは仲間ごとに札が持つ */
.score { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--night-2); border: 2px solid var(--wood-light); }
.score small { font-size: 12px; color: var(--text-dim); font-weight: 800; }
.score .num { font-size: 20px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }
.road { position: relative; flex: 1 1 auto; min-width: 90px; display: flex; align-items: center; padding: 0 12px; }
.road .track { position: relative; flex: 1; display: flex; align-items: center; }
.road ol { position: relative; flex: 1; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.road ol::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--wood); }
.road li { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--night-0); border: 3px solid var(--wood-light); }
.road li.done { background: var(--gold); border-color: var(--gold); }
.road li.now { background: var(--rose); border-color: var(--gold); }
.road .me { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 4px; background: var(--rose); border: 3px solid var(--paper); transform: rotate(45deg); }
@media (orientation: portrait) {
  .hud { flex-direction: column; gap: 8px; }
  .cards { justify-content: space-between; }
  .card { flex: 1 1 0; } .card .meta { flex: 1 1 auto; min-width: 0; } .gauge { width: 100%; }
  .card .face { width: 46px; height: 46px; }
  .card { gap: 8px; padding-right: 6px; } .card .nm { font-size: 14px; } /* 3 枚が 横に 並ぶ 幅で「Pochi」「Minou」が 札から はみ出した(en でも) */
  .road { min-height: 24px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .hud { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .card .face { width: 44px; height: 44px; } .card .nm { font-size: 16px; }
  .card .meta { gap: 3px; } .gauge { height: 10px; }
}

/* ---------- 演出(すべて transform だけで動かす。明るさ・画面ぜんたいは動かさない。指に透明) */
.pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pop {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; white-space: nowrap; pointer-events: none;
  -webkit-text-stroke: 4px var(--night-0); paint-order: stroke fill; animation: pop-up .9s ease-out forwards;
}
.pop.k-hit { color: #fff6e0; font-size: clamp(13px, 1.8vw, 17px); -webkit-text-stroke-width: 3px; }
.pop.k-defeat { color: var(--rose); font-size: clamp(15px, 2.2vw, 21px); animation-duration: 1s; }
.pop.k-back { color: var(--gold); font-size: clamp(14px, 2vw, 19px); }
.pop.k-pshh { color: #bfe9f4; font-size: clamp(16px, 2.4vw, 22px); }
.pop.k-laugh { color: #e6d9bf; font-size: clamp(13px, 1.8vw, 17px); }
.pop.k-found { color: var(--gold); font-size: clamp(16px, 2.4vw, 23px); } /* 合図の語(当てどき)。金で 少し大きく */
.pop.k-kurun { color: #e6d9bf; font-size: clamp(13px, 1.8vw, 17px); } /* k-laugh と同じ型 */
.pop.k-sneeze { color: #bfe9f4; font-size: clamp(16px, 2.4vw, 22px); } /* k-pshh と同じ型 */
.pop.k-basa { color: #fff6e0; font-size: clamp(13px, 1.8vw, 17px); -webkit-text-stroke-width: 3px; }
.pop.k-yawn, .pop.k-both, .pop.k-unmix { color: var(--gold); font-size: clamp(16px, 2.4vw, 23px); } /* 第 6 話: あくび = 当てどきの 合図 / ふたつとも・わけた = ふたごの ひねりが きまった(k-found と 同じ 金) */
.pop.k-mixed, .pop.k-poyon { color: #e6d9bf; font-size: clamp(13px, 1.8vw, 17px); } /* まざった〜 / ぽよん(k-kurun と同じ型。こわくしない) */
.pop.k-dig, .pop.k-saved, .pop.k-pick, .pop.k-atta { color: var(--gold); font-size: clamp(16px, 2.4vw, 23px); } /* 第 7 話: みっけ・とりかえした = 見つけた / どーれだ? = 当てどきの 合図 / あった = あたり(k-found と 同じ 金) */
.pop.k-kaketa, .pop.k-guard, .pop.k-stopped, .pop.k-tomotta, .pop.k-fuwa { color: var(--gold); font-size: clamp(16px, 2.4vw, 23px); } /* 第 8 話: かけた = 点を ぜんぶ つないだ / まもった = こする 前に ぽわん / とまった = 時計を 止めた。第 9 話: ともった = あかりが ともった / ふわっ = ひめの そでが もどった(k-found と 同じ 金) */
.pop.k-hid, .pop.k-empty { color: #e6d9bf; font-size: clamp(13px, 1.8vw, 17px); } /* かくした〜 / からっぽ〜(k-kurun と同じ型。はずれも こわくしない) */
.pop.k-voice0, .pop.k-voice1, .pop.k-voice2, .pop.k-voice3 { color: var(--gold); font-size: clamp(19px, 2.8vw, 27px); animation-duration: 1.4s; } /* 音符が もどった 動物の 声(金で 少し 大きく。進みは 色の もどった 絵で 見せる) */
.pop.k-allline { color: var(--gold); font-size: clamp(21px, 3.1vw, 30px); } /* ならびにじみを 1 れつ ぜんぶ ぽわんした 合図(k-found の 金を 1.3 倍。列の まんなかの 上に 0.25 秒 おくれて) */
@keyframes pop-up {
  0% { transform: translate(-50%, -30%) scale(.6); }
  18% { transform: translate(-50%, -60%) scale(1.15); }
  30% { transform: translate(-50%, -70%) scale(1); }
  100% { transform: translate(-50%, -170%) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pop { animation-duration: 1.2s; animation-name: pop-still; }
  /* 札の知らせは動かさず、その場に出して消すだけ。Lv の数字は大きくなった姿で少し止まる */
  .card .note.go { animation-name: note-still; animation-timing-function: linear; }
  .lvbadge.pop { animation: lv-still .7s steps(1, end); }
  @keyframes note-still { from, 96% { scale: 1; } to { scale: 0; } }
  @supports not (translate: 0) { .card .note.go { animation-name: note-still-t; } @keyframes note-still-t { from, 96% { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(0); } } }
  @keyframes lv-still { from, to { transform: scale(1.2); } }
  @keyframes pop-still { from { transform: translate(-50%, -60%); } to { transform: translate(-50%, -60%); opacity: 0; } }
}
/* おしまいの スコア */
.final { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; font-weight: 800; }
.final .fl { color: var(--text-dim); font-size: 18px; }
.final .fscore { color: var(--gold); font-size: clamp(34px, 9vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 var(--wood-dark); }
.final .flv { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; color: var(--sky); font-size: 18px; }
.end #toTitle { color: var(--gold); }
.endbtns { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* 低い 横(844×390 など)の おしまい: 2 つの ボタンを 横に 並べ、見出しと スコアを 詰める
   (さいごの ほん で クレジットと「もういちど」が 画面の 下へ 出ていた。ja でも pl でも) */
@media (orientation: landscape) and (max-height: 420px) {
  .end .title-box { gap: 6px; padding: 10px 16px; } .end .title-box h1 { font-size: 26px; line-height: 1.1; }
  .end .final .fscore { font-size: 34px; } .end .final .fl, .end .final .flv { font-size: 16px; }
  .endbtns { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; } /* 12px = 家の 口(site-home)と もう いちど の 空きの 下限(boot.feature) */
  .endbtns .btn.big { min-height: 56px; font-size: 21px; padding: 8px 22px; }
}

/* ---------- 読み込み(話を 始める 前に 素材を 読む 間。main.js の buildLoading)
   明るさを 振らない。動くのは 3 つの 点の ゆっくりした 上下だけ(transform。1 周 1.4 秒) */
.loadwait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--night-1); padding: 16px; text-align: center; }
.loadwait .lbook { position: relative; width: 84px; height: 104px; border-radius: 6px 12px 12px 6px; background: var(--tint, var(--sky)); border: 3px solid var(--wood-dark); border-left-width: 10px; box-shadow: 0 4px 0 var(--night-0); }
.loadwait .lbook .no { position: absolute; left: 8px; top: 6px; font-size: 18px; font-weight: 900; color: color-mix(in srgb, var(--ink) 70%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .loadwait .lbook .no { color: rgba(42, 33, 28, .7); } }
.loadwait .lt { font-size: 22px; color: var(--gold); word-break: keep-all; overflow-wrap: anywhere; }
.loadwait .lw { margin: 0; font-size: 17px; color: var(--text-night); }
.loadwait .lshelf { display: flex; gap: 6px; align-items: flex-end; padding-bottom: 4px; border-bottom: 6px solid var(--wood); }
.loadwait .lshelf .lbook { width: 44px; height: 64px; border-left-width: 6px; }
.loadwait .lshelf .lbook:nth-child(2) { height: 72px; }
.loadwait .dots { display: flex; gap: 10px; height: 24px; align-items: flex-end; color: var(--gold); }
.loadwait .dots i { width: 12px; height: 12px; border-radius: 50%; background: currentColor; animation: load-bob 1.4s ease-in-out infinite; }
/* 押したときの 応答(点の 列が 1 回 はねる。列の 箱に 掛けるので 点の ゆれ と ぶつからない) */
.loadwait .dots.poke { animation: load-poke .35s ease-out; }
@keyframes load-poke { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
.loadwait .dots i:nth-child(2) { animation-delay: .2s; }
.loadwait .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes load-bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .loadwait .dots i { animation: none; }
  /* 動かさず、点の 色が 少し 変わって 戻るだけ(明るさは ほぼ 同じ) */
  .loadwait .dots.poke { animation: load-poke-still .35s linear; }
  @keyframes load-poke-still { 0%, 100% { color: var(--gold); } 30%, 70% { color: var(--rose); } }
}