/* ふたりのゆうしゃ(試作)。形はゆめのゆうしゃ の style.css の写し。外部フォントは使わない。 */
: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;
  --key: #8a3210; --marker: rgba(242, 196, 64, .45);
  --gold: #f2d27a; --rose: #c98a8a; --sky: #8aa6c9; --leaf: #8fae8a; --lav: #a99bc4; --low: #d47a2e;
  --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:disabled { opacity: .45; }
.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; }
.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 なので 座標を 決め打ちしない) */
.title-tools { display: flex; align-items: flex-start; gap: 8px; }
.pause-sound { display: flex; justify-content: center; } /* 一時停止の おと(列の 中で 横に 伸ばさない) */
.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; }
@media (orientation: landscape) { .title-box { top: 50%; transform: translate(-50%, -50%); width: min(60vw, 420px); } .title-box h1 { font-size: 34px; } }
/* 低い 横: タイトルの 板の 上端を 上の 列(ことば・おと)の 下端 + 8 = 66px 以上へ(まん中が それより 下なら まん中のまま。#1757) */
@media (orientation: landscape) and (max-height: 420px) { .title > .title-box { transform: translate(-50%, max(-50%, calc(66px - 50vh))); } }

.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; }
.choices.col { flex-direction: column; }
.modal-text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-night); word-break: keep-all; overflow-wrap: anywhere; } /* 語の 途中で 折らない(「やってみよ / う。」← uiux #1680) */
/* ひと休みの 札の すわって 休む 勇者(品質 35 番)。縦は 字の 上・横は 字の 左の 列(低い 横 568x320 で 札の 高さを ふやさない) */
.rest-art { display: block; width: 100%; height: 100px; }
@media (orientation: landscape) {
  .modal-box.has-art { width: min(94vw, 600px); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 14px; } /* 字の 列が せまく ボタンが 2 行の ことば(de・pt)で 3 px スクロール した ← uiux #1680 */
  .modal-box.has-art > * { grid-column: 2; }
  .modal-box.has-art > .rest-art { grid-column: 1; grid-row: 1 / span 3; width: 112px; height: 150px; }
}
/* ことばの一覧(14 言語 + とじる)。札は格子で同じ大きさ。長い言語名は札の中で折り返す(格子ごと はみ出さない ← minmax(0, 1fr) と overflow-wrap を対で)。
   選んでいる札は 金の縁(色)と ✓(形)。下地(.modal-bg)を押しても閉じる */
.modal-bg { position: absolute; inset: 0; }
.modal-box { position: relative; }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.lang-grid .btn { min-width: 0; min-height: 48px; padding: 6px 8px; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.lang-grid .btn[aria-pressed="true"]::before { content: '✓ '; color: var(--gold); }
@media (min-width: 560px) { .lang-box { width: min(94vw, 640px); } .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 低い縦(320x568 など)は 14 言語 + とじる を スクロール無しで 収める */
@media (orientation: portrait) and (max-height: 700px) { .lang-box { padding: 12px; gap: 8px; } .lang-box h2 { font-size: 20px; line-height: 1.2; margin: 0; } .lang-grid { gap: 6px; } .lang-grid .btn { font-size: 15px; padding: 4px 6px; } }
@media (orientation: landscape) and (max-height: 500px) {
  .lang-box { width: min(96vw, 820px); padding: 12px; gap: 8px; } .lang-box h2 { font-size: 20px; margin: 0; }
  .lang-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lang-grid .btn { font-size: 15px; padding: 4px 6px; }
}

/* ---------- お話 */
.story { display: flex; flex-direction: column; }
.story .stage { flex: 1 1 auto; min-height: 0; width: 100%; }
.talk {
  position: relative; flex: 0 0 auto; min-height: 30%; margin: 0; padding: 14px 18px 30px;
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  background: var(--paper-card); color: var(--ink); border-top: 4px solid var(--wood);
}
.talk .who { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 8px; background: var(--wood); color: var(--paper); font-weight: 800; font-size: 17px; }
.talk .line { margin: 0; font-size: clamp(19px, 5.2vw, 24px); line-height: 1.6; font-weight: 500; }
.talk .next { position: absolute; right: 18px; bottom: max(10px, env(safe-area-inset-bottom)); color: var(--wood); font-size: 18px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.story .hit { position: absolute; inset: 0; z-index: 5; background: transparent; border: 0; cursor: pointer; }
/* 縦画面: お話の わくは 顔 + 名前 + 4 行が 入る 高さで 止め(わくの 中に 大きな 空きを 作らない)、のこりは 舞台(story-screen.md 3 節)。
   わくの 高さは 歩ごとに かえない(舞台が 上下しない) */
@media (orientation: portrait) {
  .story .stage { flex: 1 1 auto; }
  .story .talk { flex: 0 0 auto; min-height: 0; height: clamp(230px, 34vh, 290px); overflow: hidden; }
}
/* 早送りの あいだは ▼▼(明るさは 変えない。6 節) */
.talk.ff .next { animation: none; letter-spacing: -2px; }
@media (orientation: landscape) {
  .story .talk { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(92vw, 820px); min-height: 0; border-radius: 14px; border: 3px solid var(--wood); }
  .talk .line { font-size: clamp(17px, 2.6vw, 22px); }
}
/* 話す人の 顔(story-screen.md 4 節)。語りは 顔なし。大事な 語(**…**)は 太く 大きく(5 節) */
.talk.has-face { display: flex; align-items: flex-start; gap: 12px; }
.talk .face { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 14px; border: 3px solid var(--wood); background: #f6ecd6; image-rendering: pixelated; }
.talk .say { flex: 1 1 auto; min-width: 0; }
@media (orientation: landscape) { .talk .face { width: 56px; height: 56px; border-radius: 12px; } }
/* 縦画面: 顔は 大きく(92px)、名前の 札は 顔の 右、せりふは 顔の 下に わくの はば いっぱい(1 行の 字数を へらさない) */
@media (orientation: portrait) {
  .talk.has-face { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px 12px; align-content: start; }
  .talk.has-face .say { display: contents; }
  .talk.has-face .who { justify-self: start; margin-bottom: 4px; }
  .talk.has-face .line { grid-column: 1 / -1; }
}
.talk .line .key { font-weight: 800; font-size: 1.15em; color: var(--key); padding: 0 2px; background: linear-gradient(transparent 58%, var(--marker) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (orientation: landscape) and (max-height: 500px) {
  /* わくの 高さを 3 行ぶんで そろえる(行ごとに 舞台が 上下しない) */
  .story .talk { min-height: 112px; padding: 8px 14px 10px; }
  .talk .who { font-size: 14px; margin-bottom: 2px; padding: 1px 10px; }
  .talk .line { font-size: 16px; line-height: 1.45; }
  .talk .next { bottom: 6px; right: 12px; }
  .talk .face { width: 44px; height: 44px; border-width: 2px; border-radius: 10px; }
  .talk.has-face { gap: 10px; }
}

/* ---------- バトル(奥ゆきの ベルトスクロール。.claude/rules/futari-no-yuusha/design/depth-battle.md 4 節)
   舞台(canvas)は 操作の 帯(.pad)の 上だけ。操作は みな 下の 帯(舞台に 重ねない)。体力の 札・‖・地図は 舞台の 上に 重ねる(縦は 舞台の 上の あまりに 入る) */
.battle { --cb: 132px; display: flex; flex-direction: column; background: var(--night-0); position: relative; }
.battle .field { flex: 1 1 0; min-height: 0; width: 100%; height: auto; display: block; }
.battle .bar { width: auto; flex: 1; min-width: 92px; }
.battle .hp { flex: 1; }
.hud { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 8px; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); pointer-events: none; }
.party { display: flex; flex-direction: column; gap: 4px; }
.hp { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 10px; background: rgba(18, 22, 42, .7); }
.hp .face { width: 30px; height: 40px; border-radius: 8px; background: var(--night-2); }
.hp.down { opacity: .5; }
/* なかまの 体力(小さく。勇者の下に 横に ならべる) */
.mates { display: flex; gap: 4px; }
.hp.mate { padding-right: 6px; }
.hp.mate .face { width: 22px; height: 30px; border-radius: 6px; }
.battle .mate .bar { flex: 0 0 auto; min-width: 0; width: 52px; height: 8px; }
.bar { position: relative; display: block; width: 92px; height: 10px; border-radius: 5px; background: #3a3350; overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--leaf); transform-origin: left; transition: transform .2s, background-color .3s; }
.bar[data-low] i { background-color: var(--low); } /* 体力が 少ない(HP_LOW。一定の だいだい・点滅 しない。reduced-motion は 下の 行で 色も すぐ かわる) */
.pause { margin-left: auto; pointer-events: auto; flex-shrink: 0; }
.btn.round { min-width: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; position: relative; }
.pause.round { width: 52px; height: 52px; font-size: 20px; }
.banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0); padding: 6px 18px; border-radius: 12px; background: rgba(18, 22, 42, .8); color: var(--gold); font-size: 22px; font-weight: 800; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; z-index: 3; }
.banner.on { opacity: 1; }
/* 下の 帯: 左 = まるい 十字(外がわ = 8 方向・まん中の まる = つかんで 引く スティック)と スティックの 場所・右 = 技・ジャンプ・こうげき */
.pad { --pad: 120px; --tech: 60px; --star: 66px; --jump: 64px; --atk: 84px; --g: 8px;
  position: relative; flex: 0 0 auto; height: calc(var(--cb) + env(safe-area-inset-bottom)); box-sizing: border-box; background: var(--night-1); border-top: 3px solid var(--wood-dark); touch-action: none; }
.stickzone { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; touch-action: none; }
.stick { position: fixed; z-index: 4; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 3px solid #6f6a8a; background: rgba(43, 39, 64, .7); pointer-events: none; }
.stick[hidden] { display: none; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #e9e2cc; border: 3px solid #3a2f28; box-sizing: border-box; }
.movepad { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc((var(--cb) - 3px) / 2); width: var(--pad); height: var(--pad); margin-top: calc(var(--pad) / -2);
  border-radius: 50%; background: rgba(43, 39, 64, .7); border: 3px solid #6f6a8a; box-sizing: border-box; touch-action: none; }
.movepad .ar { position: absolute; width: 33%; height: 33%; display: grid; place-items: center; border-radius: 22%; background: var(--night-2); border: 3px solid #6f6a8a; box-sizing: border-box; }
.movepad .ar::before { content: ''; border: 9px solid transparent; }
.movepad .up { left: 33.5%; top: 1%; } .movepad .up::before { border-bottom: 13px solid #e9e2cc; border-top-width: 0; }
.movepad .dn { left: 33.5%; bottom: 1%; } .movepad .dn::before { border-top: 13px solid #e9e2cc; border-bottom-width: 0; }
.movepad .lf { top: 33.5%; left: 1%; } .movepad .lf::before { border-right: 13px solid #e9e2cc; border-left-width: 0; }
.movepad .rt { top: 33.5%; right: 1%; } .movepad .rt::before { border-left: 13px solid #e9e2cc; border-right-width: 0; }
.movepad .ar.on { background: #4a3a24; border-color: var(--gold); }
.movepad .pk { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: #e9e2cc; border: 3px solid #3a2f28; box-sizing: border-box; pointer-events: none; }
/* 右の かたまり(depth-battle.md 4 節の 表)。横 700 以上 = 1 列 [⇄] [♪][技1][技2][技3][★][ジャンプ][こうげき] */
.acts { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc((var(--cb) - 3px) / 2); transform: translateY(-50%);
  display: grid; gap: var(--g); align-items: center; justify-items: center;
  grid-template-columns: repeat(4, var(--tech)) var(--star) var(--jump) var(--atk); grid-template-areas: "song t0 t1 t2 t3 jump atk"; }
.battle.duo .acts { grid-template-columns: 64px repeat(4, var(--tech)) var(--star) var(--jump) var(--atk); grid-template-areas: "swap song t0 t1 t2 t3 jump atk"; }
.acts .song { grid-area: song; } .acts .tech[data-slot="0"] { grid-area: t0; } .acts .tech[data-slot="1"] { grid-area: t1; } .acts .tech[data-slot="2"] { grid-area: t2; } .acts .tech[data-slot="3"] { grid-area: t3; }
.acts .jump { grid-area: jump; } .acts .atk { grid-area: atk; } .acts .swap { grid-area: swap; }
.jump.round { width: var(--jump); height: var(--jump); font-size: 12px; line-height: 1.1; background: #24344a; border-color: var(--sky); }
.jump b { display: flex; flex-direction: column; align-items: center; }
.jump b i { font-style: normal; font-size: 20px; line-height: 1; }
.atk.round { width: var(--atk); height: var(--atk); background: var(--wood); border-color: var(--gold); font-size: 17px; }
.tech.round { width: var(--tech); height: var(--tech); font-size: 11.5px; line-height: 1.15; background: #2c3a33; border-color: var(--leaf); overflow: hidden; }
/* おおわざ(技4): 金の 縁+★★(待ちの あいだは 縁を 暗く)。待ちが あけた 瞬間に ぽんっ・覚えた 枠は 出る ときに 大きく なる(大きさだけ。明るさは 振らない) */
.tech.oowaza.round { width: var(--star); height: var(--star); border-color: var(--gold); background: #3a3324; }
.tech.oowaza.wait { border-color: var(--text-dim); }
@keyframes tech-ready { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes tech-fresh { 0% { scale: 0; } 70% { scale: 1.1; } 100% { scale: 1; } }
.tech.ready { animation: tech-ready .25s ease-out; }
.tech.fresh { animation: tech-fresh .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .tech.ready, .tech.fresh { animation: none; } }
/* 横 700 未満: 技は 2 だん [♪][技1][技2] / [⇄][技3][★] → ジャンプ・こうげき */
@media (orientation: landscape) and (max-width: 699.98px) {
  .pad { --pad: 112px; --tech: 56px; --star: 60px; --jump: 64px; --atk: 76px; --g: 6px; }
  .acts, .battle.duo .acts { grid-template-columns: var(--tech) var(--tech) var(--star) var(--jump) var(--atk); grid-template-rows: var(--tech) var(--star);
    grid-template-areas: "song t0 t1 jump atk" "swap t2 t3 jump atk"; }
  .acts .swap { width: var(--tech); height: var(--tech); min-width: 0; } /* .btn の min-width 64 が 勝つと 技3 との すきまが 2 px に なった */
}
/* 縦: 帯は 高い(234)。技は 3 だん [♪][⇄][ ] / [技1][技2][★] / [技3][ジャンプ][こうげき] */
@media (orientation: portrait) {
  .battle { --cb: 234px; }
  .pad { --pad: 132px; --tech: 58px; --star: 62px; --jump: 64px; --atk: 84px; --g: 6px; }
  .acts, .battle.duo .acts { grid-template-columns: 58px 64px 84px; grid-template-rows: var(--tech) var(--star) var(--atk);
    grid-template-areas: "song swap ." "t0 t1 t3" "t2 jump atk"; }
  .acts .swap { width: 64px; height: var(--tech); }
}
@media (orientation: portrait) and (max-width: 379.98px) {
  .battle { --cb: 208px; }
  .pad { --pad: 104px; --tech: 56px; --star: 58px; --jump: 64px; --atk: 76px; --g: 4px; }
  .acts, .battle.duo .acts { grid-template-columns: 56px 64px 76px; grid-template-rows: var(--tech) var(--star) var(--atk); }
  /* 左右 6(depth-battle.md 4 節)。12 の ままだと 320x568 で 十字(96)と 技の 列が 4 px 重なった */
  .movepad { left: max(6px, env(safe-area-inset-left)); } .acts { right: max(6px, env(safe-area-inset-right)); }
}
@media (orientation: portrait) and (max-width: 339.98px) { .pad { --pad: 96px; } }
.tech b, .atk b, .jump b { position: relative; z-index: 1; padding: 0 3px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.tech.round b { padding: 0; letter-spacing: -.03em; } /* 丸い 技の 札は 左右の すきを 小さく(en の「Calming」が 語の 途中で 折れない) */
.atk b { white-space: nowrap; }
/* こうげきの リズムの わ(縁の 内側に 細い 金の わが のびる。明るさは 振らない)と 段の しるし(小さな 丸 6 つ) */
.atk .ring { position: absolute; inset: 3px; border-radius: 50%; display: none; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--rk, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.atk.ring-on .ring { display: block; }
.atk .dots { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; gap: 3px; pointer-events: none; }
.atk .dots i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--paper); background: transparent; }
.atk .dots i.on { background: var(--gold); border-color: var(--gold); }
/* ヒット数(舞台の 右上・地図の 下。指を 遮らない) */
.hits { position: absolute; right: 12px; top: max(100px, calc(env(safe-area-inset-top) + 100px)); z-index: 3; pointer-events: none; color: var(--gold); font-weight: 800; font-size: 18px; text-shadow: 0 2px 0 var(--night-0), 0 0 4px var(--night-0); transition: opacity .3s; }
.hits[data-size="1"] { font-size: 21px; } .hits[data-size="2"] { font-size: 24px; } .hits[data-size="3"] { font-size: 28px; } .hits[data-size="4"] { font-size: 30px; }
/* 節目(10・20・30)に 着いた ときだけ ぽんと 1 回(transform だけ。色・明るさは 変えない = battle-moves.md 11 節)。reduced-motion では 大きさの 段だけ */
.hits span { display: inline-block; transform-origin: right center; } .hits span.pop { animation: hitpop .2s ease-out; }
@keyframes hitpop { from { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .hits span.pop { animation: none; } }
.hits.fade { opacity: 0; }
.hits.big { scale: 1.4; transform-origin: top right; } /* おおわざの ヒット数(battle-moves.md 19.3) */
.battle.cutin .coach, .battle.cutin .hits, .battle.cutin .banner { visibility: hidden; } /* カットインの 帯に 重ねない(battle-moves.md 16.4) */
.tech .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(10, 12, 24, .72) calc(var(--cd, 0) * 360deg), transparent 0); }
.tech.wait { border-color: var(--text-dim); }
.tech .ch { position: absolute; inset: 0; border-radius: 50%; display: none; background: conic-gradient(var(--gold) calc(var(--ch, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.atk .ch { position: absolute; inset: 0; border-radius: 50%; display: none; pointer-events: none; background: conic-gradient(var(--gold) calc(var(--ch, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.tech.chanting .ch { display: block; } /* 詠唱の 進みの 弧(待ちの 影 .cd と 同じ 円の 文法。明るさは 振らない) */
/* 自分の人がひとやすみの間: ボタンを休みの見た目にし、こうげきの上に起き上がるまでの輪を出す(明るさは振らない。一度変わるだけ) */
.atk .rring { position: absolute; inset: 0; border-radius: 50%; display: none; background: conic-gradient(rgba(10, 12, 24, .72) calc((1 - var(--rest, 0)) * 360deg), transparent 0); }
.pad.rest .atk .rring { display: block; }
.pad.rest .btn.round { border-color: var(--text-dim); }
.pad.rest .tech, .pad.rest .jump { background: var(--night-2); }
@media (orientation: landscape) { .battle .hp { flex: 0 1 auto; } .battle .bar { min-width: 120px; width: 120px; flex: 0 0 auto; } }

/* ---------- 勇者えらび */
.select { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 12px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--night-1); }
.select h2 { margin: 0; color: var(--gold); font-size: 26px; text-align: center; }
.heroes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 720px); }
.hero-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; text-align: left; cursor: pointer; touch-action: manipulation;
  border-radius: 16px; border: 3px solid var(--text-dim); background: var(--night-2); color: var(--text-night); min-width: 0;
}
.hero-card[aria-pressed="true"] { border-color: var(--gold); background: #3a3044; box-shadow: 0 0 0 3px var(--wood) inset; }
.hero-card .demo { width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; }
.hero-card .name { font-size: 20px; color: var(--gold); }
.hero-card .role { font-size: 15px; line-height: 1.45; }
.hero-card .stats { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; }
.hero-card .stats i { font-style: normal; color: var(--gold); letter-spacing: 1px; }
.hero-card .techs { font-size: 13px; color: var(--text-dim); }
.hero-card:active > * { transform: scale(.97); }
.hero-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.select .note { margin: 0; color: var(--text-night); font-size: 15px; text-align: center; }
.select .go { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 0 0 10px var(--night-1), 0 3px 0 var(--night-0); }
.select .go { white-space: nowrap; max-width: 100%; }
/* えらぶ前の半透明だと下の一言が透けて字が重なる(320 幅)。透かさず、地の色で沈める */
.select .go:disabled { opacity: 1; background: var(--night-2); border-color: var(--text-dim); color: var(--text-dim); }
@media (max-width: 440px) { .select .btn.go { font-size: 18px; padding: 10px 14px; } }
@media (orientation: landscape) and (max-height: 500px) {
  .select { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); }
  .select h2 { font-size: 20px; }
  .hero-card { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 2px; }
  .hero-card .demo { grid-row: 1 / span 4; align-self: center; }
  .hero-card .role { font-size: 13px; } .hero-card .techs { display: none; } .hero-card .name { font-size: 16px; }
  .select .note { display: none; }
  .select .btn.go { min-height: 48px; font-size: 18px; padding: 6px 24px; }
}

/* ---------- バトルの一言(操作を覚える) */
.coach {
  position: absolute; left: 50%; transform: translateX(-50%); top: max(100px, calc(env(safe-area-inset-top) + 100px)); width: max-content; margin: 0; z-index: 3;
  padding: 8px 16px; border-radius: 12px; background: var(--paper-card); color: var(--ink); border: 3px solid var(--wood);
  font-size: 18px; font-weight: 800; text-align: center; pointer-events: none; max-width: calc(100% - 24px);
}
.pad[data-hint="move"] .movepad, .pad[data-hint="lane"] .movepad, .pad[data-hint="attack"] .atk, .pad[data-hint="jump"] .jump, .pad[data-hint="bigjump"] .jump, .pad[data-hint="sky"] .jump, .pad[data-hint="tech"] .acts .tech:not(.song), .pad[data-hint="chant"] .tech.chanting, .pad[data-hint="newtech"] .tech.fresh { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 210, 122, .45), 0 3px 0 var(--night-0); }
@media (orientation: landscape) {
  /* 横: 一言の わくと しらせの 帯は 舞台の 列(grid の 2 列目)の 中だけで まん中に(左右の ボタンの 列に はみ出さない)。
     一言の わくは 体力の 札(上の 左)の 下。帯は、一言が 出ている あいだは その下に ずらす(重ならない) */
  .coach { top: max(98px, calc(env(safe-area-inset-top) + 90px)); max-width: calc(100% - 16px); white-space: normal; }
  .battle:has(.coach:not([hidden])) .banner { top: max(156px, calc(env(safe-area-inset-top) + 148px)); }
}
@media (orientation: landscape) and (max-height: 400px) {
  .coach { padding: 6px 12px; font-size: 16px; }
}
/* 低い 横(高さ 430 まで。main.js が data-coachtop と はばを 書く): 一言の わくは 上の 段(体力の 札と ‖ の あいだ = 地図の 段に かさねる)。
   ミニマップの 下(98)に 置くと 舞台が 低くて 勇者たちの 頭〜胴を ずっと かくした。帯は ふだんの 置き場(札の 下へ ずらさない) */
.battle[data-coachtop] .coach { top: var(--coach-t, max(8px, env(safe-area-inset-top))); left: var(--coach-l, 196px); right: var(--coach-r, 68px); width: auto; max-width: none; transform: none; margin: 0; white-space: normal; }
/* 低い 横の 帯(しらせ・しかけ 以外の 一言)も 同じ 段へ(main.js が data-bantop と --ban-t を 書く)。出て いる あいだ 一言の わくは かくす(同じ 場所) */
/* :has は 選択子リストに 混ぜない(古い 端末は リストごと 捨てる #1621) */
.battle[data-bantop] .banner { top: var(--ban-t, max(8px, env(safe-area-inset-top))); left: var(--coach-l, 196px); right: var(--coach-r, 68px); width: auto; max-width: none; transform: none; margin: 0; padding: 6px 12px; font-size: 16px; transition: none; }
.battle[data-bantop]:has(.coach:not([hidden])) .banner { top: var(--ban-t, max(8px, env(safe-area-inset-top))); left: var(--coach-l, 196px); right: var(--coach-r, 68px); width: auto; max-width: none; transform: none; margin: 0; padding: 6px 12px; font-size: 16px; transition: none; }
.battle[data-bantop]:has(.banner.on) .coach { visibility: hidden; }

/* ---------- 1 章 クリア・つづく */
.tsuzuku .title-box h1 { letter-spacing: .2em; }
.clear #toNext { word-break: keep-all; }
@media (max-width: 360px) { .clear #toNext { padding-inline: 20px; } } /* 細い 縦画面: よこの あきを へらして 1 行に おさめる(札が 低く なり みんなが 見える) */ /* 「しょうを えらぶ」を 語の 途中で 折らない(折るなら ことばの すきまで) */
/* 低い横(568x320)は 長い言語で 角の ボタンと 重ならない 幅に 絞る */
@media (orientation: landscape) and (max-height: 400px) { .title-box { width: min(54vw, 420px); gap: 10px; padding: 16px 14px; } .title-box h1 { font-size: 30px; } }
@media (orientation: landscape) { .clear .title-box, .tsuzuku .title-box { top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .talk .next { animation: none; } .bar i { transition: none; } }

/* ---------- 章の はじまりの 札(お話の 舞台の 上。指を 遮らない) */
.chap {
  position: absolute; left: 12px; right: 12px; top: max(14px, env(safe-area-inset-top)); z-index: 3; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto;
  padding: 8px 18px; border-radius: 12px; background: color-mix(in srgb, var(--night-0) 82%, transparent); border: 2px solid var(--gold);
  color: var(--gold); font-size: clamp(18px, 5vw, 24px); font-weight: 800; text-align: center; pointer-events: none;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .chap { background: rgba(18, 22, 42, .82); } }
/* 勝利の 帯(win-band.md)。舞台の 上・指を 遮らない・明るさを 振らない */
.win-band { position: absolute; left: 50%; top: 40%; z-index: 6; transform: translate(-50%, -50%); padding: 10px 30px; border-radius: 16px;
  background: color-mix(in srgb, var(--night-0) 86%, transparent); border: 3px solid var(--gold); color: var(--gold); font-size: clamp(22px, 8.4vw, 34px); font-weight: 800;
  width: max-content; max-width: 94vw; text-align: center; overflow-wrap: anywhere; pointer-events: none; text-shadow: 0 3px 0 var(--wood-dark); animation: winpop .18s ease-out; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .win-band { background: rgba(18, 22, 42, .86); } }
@keyframes winpop { from { transform: translate(-50%, -50%) scale(.85); } }
@media (orientation: landscape) and (max-height: 500px) { .win-band { font-size: 28px; padding: 8px 24px; } }
@media (prefers-reduced-motion: reduce) { .win-band { animation: none; } }
/* 帯の 下の なかまの 一言(win-band.md・品質 81 番)。帯の 箱の 外へ 置く(帯の 字は 動かない)・1 行・帯ごと 出て 消える */
.win-band .mate-line { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  width: max-content; max-width: 92vw; padding: 3px 12px 3px 4px; border-radius: 12px; background: color-mix(in srgb, var(--night-0) 86%, transparent);
  border: 2px solid var(--wood-light); color: var(--text-night); font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-shadow: none; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .win-band .mate-line { background: rgba(18, 22, 42, .86); } }
.win-band .mate-line .face { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--night-2); }
@media (orientation: landscape) and (max-height: 500px) { .win-band .mate-line { font-size: 14px; top: calc(100% + 4px); } .win-band .mate-line .face { width: 22px; height: 22px; } }
/* 帯の あいだ: 一言と 操作の 一言は かくし、パッドと ‖ は うすく(押せない ことが 見える。1 回 かわるだけで 振らない) */
.battle.won .coach, .battle.won .banner, .battle.won .hits { visibility: hidden; }
.battle.won .pad .btn, .battle.won .movepad, .battle.won .pause { opacity: .4; pointer-events: none; }
.battle.won .stickzone { pointer-events: none; }
/* 長い一言(ボスの ためを しらせる)は 折り返す */
.banner { left: 12px; right: 12px; transform: none; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; white-space: normal; text-align: center; }
/* 縦: 舞台の 上の 地図の すぐ 下(ボスの 頭と 体力の 棒は その 下に ある)。横: 一言の わくの 位置(上の 札の 下)。
   ボスの 頭・体力に かかる ときは main.js が data-dodge で ボスの いない 側へ よせる(はばを せまく して 折り返す) */
@media (orientation: portrait) { .battle .banner { top: max(48px, calc(env(safe-area-inset-top) + 48px)); } } /* 地図(〜34px)と ヒット数(〜44px)の 下 */
@media (orientation: landscape) and (max-height: 400px) { .battle .banner[data-dodge] { font-size: 18px; padding: 6px 12px; } }
.battle .banner[data-dodge="l"] { margin-left: 8px; margin-right: auto; }
.battle .banner[data-dodge="r"] { margin-left: auto; margin-right: 8px; }

/* ---------- 章えらび(つくってレース の コースの 札と 同じ 考え: 大きな札を 押すと すぐ その章へ) */
.chapters { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 12px; padding-top: max(70px, calc(env(safe-area-inset-top) + 60px)); padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--night-1); }
.chapters h2 { margin: 0; color: var(--gold); font-size: 26px; text-align: center; }
.chapter-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: min(100%, 520px); }
.chapter-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; cursor: pointer; touch-action: manipulation; min-width: 0;
  border-radius: 18px; border: 3px solid var(--wood-light); background: var(--night-2); color: var(--text-night); box-shadow: 0 4px 0 var(--night-0);
}
.chapter-card .thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
.chapter-card .label { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 4px; }
.chapter-card .num { font-size: 22px; color: var(--gold); }
.chapter-card .name { font-size: 20px; font-weight: 700; }
.chapter-card:active > * { transform: scale(.97); }
.chapter-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.chapter-card.locked { cursor: default; border-color: var(--night-0); box-shadow: none; } /* まだ 開いて いない 章: 人を 描かない・名前は ？？？(明るさは 振らない。暗い 絵の まま) */
.chapter-card.locked .num, .chapter-card.locked .name { color: var(--text-dim); }
.chapter-card.locked:active > * { transform: none; }
.chapters > .corner-l { position: fixed; z-index: 2; } /* 開いた 札へ 寄せても「もどる」は いつも 見える(札の 列は その 下を 流れる) */
.chapter-card.next { border-color: var(--gold); } /* いちばん 先の 開いた 章(次は ここ) */
.chapter-card.gaiden:not(.locked) .num { color: var(--rose); } /* 11 しょう がいでん(本編の あとの 外伝)は 番号の 字の 色だけ かえる(明るさは 振らない) */
.chapter-card.nudge { animation: pick-nudge .36s ease-in-out 2; } /* 鍵の 札を 押した ときの「こっち」(大きさで 応える) */
@media (prefers-reduced-motion: reduce) { .chapter-card.nudge { animation: none; } }
@media (orientation: landscape) {
  .chapters { justify-content: safe center; padding-top: max(12px, env(safe-area-inset-top)); } /* 札が 入りきらないときは 上を 切らずに 送る */
  .chapters h2 { padding: 0 110px; }
  .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 860px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .chapters { gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .chapters h2 { font-size: 20px; }
  .chapter-card { padding: 6px; gap: 4px; }
  .chapter-card .thumb { aspect-ratio: auto; height: min(150px, 46vh); }
  .chapter-card .num { font-size: 18px; } .chapter-card .name { font-size: 16px; }
}

/* ---------- しずめの うた(3 章から。♪ は 自分の 枠 = 技の 枠を 取らない ← battle-moves.md 19.2) */
.song.round { font-size: 11px; line-height: 1.15; background: #3a2c3c; border-color: #f6c6dc; }
.song b { display: flex; flex-direction: column; align-items: center; }
.song b i { font-style: normal; font-size: 18px; line-height: 1; }
.special b i { display: block; font-style: normal; font-size: 13px; line-height: 1; color: var(--gold); } /* 必殺技の ★(battle-pad.md 冒頭) */
.song.wait { border-color: var(--text-dim); } /* 待ちの あいだは 押せそうに 見せない(.song.round の 縁より 後ろに 書く) */
.pad[data-hint="song"] .song { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 210, 122, .45), 0 3px 0 var(--night-0); }

/* ---------- なかまえらび(4 章から。バトルの 前に 2 人 えらぶ。勇者えらびの 札と 同じ 形・同じ 金の 縁) */
.pick { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 16px 12px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--night-1); }
.pick h2 { margin: 0; color: var(--gold); font-size: 24px; text-align: center; }
.mates-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 720px); }
.mate-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; text-align: center; cursor: pointer; touch-action: manipulation; min-width: 0;
  border-radius: 16px; border: 3px solid var(--text-dim); background: var(--night-2); color: var(--text-night);
}
.mate-card[aria-pressed="true"] { border-color: var(--gold); background: #3a3044; box-shadow: 0 0 0 3px var(--wood) inset; }
.mate-card .mate-demo { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; }
.mate-card .name { font-size: 18px; color: var(--gold); }
.mate-card .role { font-size: 13px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
/* えらんだ しるし(右上の 金の まる。明滅しない) */
.mate-card .badge { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; display: none; place-items: center; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 18px; border: 2px solid var(--wood-dark); }
.mate-card[aria-pressed="true"] .badge { display: grid; }
/* 新しく 入った なかま(左上の 札。明滅しない ← nakama-pick.md 4 節) */
.mate-card .fresh { position: absolute; top: -9px; left: -6px; z-index: 1; padding: 1px 8px; border-radius: 10px; background: var(--rose); color: var(--ink); border: 2px solid var(--wood-dark); font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; pointer-events: none; }
/* 一時停止・ひと休みから 開いた ときは バトルの 上に 重ねる。「もどる」は 行く ボタンより 目立たせない */
.pick.over { z-index: 20; }
.pick .btn.back { min-height: 52px; }
.mate-card:active > * { transform: scale(.97); }
.mate-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pick .note { margin: 0; color: var(--text-night); font-size: 15px; text-align: center; }
.pick .go-row { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; background: var(--night-1); box-shadow: 0 0 0 10px var(--night-1); }
/* 説明文の 行が 無い(2 回目から)ときも 札の 下の 縁を 下の 行の 影(10px)に 食わせない */
.pick .mates-pick + .go-row { margin-top: 8px; }
/* 10 章: いつも 来る もう ひとりの 勇者(えらべない = 灰の 点線の 札。押せる 札と まちがえない) */
.pick .fixed-mate { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border: 2px dashed var(--text-dim); border-radius: 12px; background: var(--night-2); opacity: .8; pointer-events: none; }
.pick .fixed-mate .face { width: 36px; height: 48px; border-radius: 8px; background: var(--night-1); filter: grayscale(.5); }
.pick .fixed-mate span { display: flex; flex-direction: column; line-height: 1.2; }
.pick .fixed-mate b { color: var(--text-night); font-size: 14px; white-space: nowrap; }
.pick .fixed-mate i { color: var(--text-dim); font-size: 12px; font-style: normal; white-space: nowrap; }
.pick .count { display: inline-block; color: var(--gold); font-weight: 800; font-size: 20px; white-space: nowrap; }
.pick .go { white-space: nowrap; }
.pick .go[aria-disabled="true"] { opacity: .45; }
.pick .count.bump { animation: pick-bump .32s ease-out; }
.mate-card.bump > * { animation: pick-nudge .32s ease-out; }
.mate-card.drop > * { animation: pick-drop .3s ease-out; }
@keyframes pick-bump { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes pick-nudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.05); } }
@keyframes pick-drop { 0%, 100% { transform: scale(1); } 45% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .pick .count.bump, .mate-card.bump > *, .mate-card.drop > * { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .pick { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .pick h2 { font-size: 18px; }
  .mates-pick { width: min(100%, 640px); }
  .mate-card { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: auto 1fr; column-gap: 6px; text-align: left; align-items: center; }
  .mate-card .mate-demo { grid-row: 1 / span 2; aspect-ratio: auto; height: min(118px, 34vh); }
  .mate-card .name { font-size: 15px; align-self: end; } .mate-card .role { font-size: 12px; align-self: start; }
  .pick .note { font-size: 13px; margin: 2px 0 10px; } /* 札と 下の 行(sticky の 影 10px)に 重ならない */
  .pick .btn.go { min-height: 48px; font-size: 18px; padding: 6px 24px; }
}

/* ---------- 章 クリアの なかまの 家(4 章から) */
.house { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.house-art { width: min(100%, 240px); height: 120px; border-radius: 10px; border: 2px solid var(--wood-light); }
.house figcaption { font-size: 15px; color: var(--text-night); text-align: center; word-break: keep-all; } /* 家の 名前を 語の 途中で 折らない(ことばの すきまで 折る) */
.house figcaption b { color: var(--gold); }
.house .stage { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--wood); color: var(--paper); font-weight: 800; }
/* 低い 横画面: 家の 絵と「つぎへ」を 横に ならべて わくを 低く(下に 立つ みんなの 頭に かからない) */
@media (orientation: landscape) and (max-height: 500px) {
  .title-box.has-house { display: grid; grid-template-columns: minmax(0, auto) auto; justify-content: center; align-items: center; gap: 6px 18px; padding: 10px 16px; width: min(80vw, 540px); }
  .title-box.has-house h1, .title-box.has-house .title-hint { grid-column: 1 / span 2; }
  .title-box.has-house h1 { font-size: 26px; }
  .title-box.has-house .title-hint { font-size: 14px; }
  .house-art { width: 120px; height: 64px; }
  .house figcaption { font-size: 13px; }
  .title-box.has-house .btn.big { min-height: 52px; font-size: 20px; padding: 6px 28px; white-space: nowrap; } /* 「しょうを えらぶ」を 語の 途中で 2 行に 折らない(折れると 札が 高く なって 頭に かかる) */
}

/* ---------- なかまえらび 4 人(5 章から。フェアリー が 入る)。縦画面は 2 × 2・低い 横画面は 4 列 */
.mates-pick[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 460px); }
.mates-pick[data-n="4"] .mate-card .mate-demo { aspect-ratio: 5 / 4; }
@media (orientation: landscape) {
  .mates-pick[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 860px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mates-pick[data-n="4"] .mate-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px; text-align: center; }
  .mates-pick[data-n="4"] .mate-card .mate-demo { aspect-ratio: auto; height: min(100px, 30vh); }
  .mates-pick[data-n="4"] .mate-card .name, .mates-pick[data-n="4"] .mate-card .role { align-self: stretch; }
  .mates-pick[data-n="4"] .mate-card .role { font-size: 13px; line-height: 1.3; }
}
/* いちばん 低い 横(568×320 など)だけ 役わりの 字を 11px に(高い 横は 13px のまま ← デザイナーレビュー) */
@media (orientation: landscape) and (max-height: 360px) {
  .mates-pick[data-n="4"] .mate-card .role { font-size: 11px; }
}

/* ---------- なかまえらび 5 人(6 章から。こりゅう が 入る)。縦画面は 3 + 2(下の 段は まん中に)・横画面は 5 列 */
.mates-pick[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 560px); }
.mates-pick[data-n="5"] .mate-card { grid-column: span 2; }
.mates-pick[data-n="5"] .mate-card:nth-child(4) { grid-column: 2 / span 2; }
.mates-pick[data-n="5"] .mate-card .mate-demo { aspect-ratio: 1 / 1; }
.mates-pick[data-n="5"] .mate-card .name { font-size: 16px; }
@media (orientation: landscape) {
  .mates-pick[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 940px); }
  .mates-pick[data-n="5"] .mate-card, .mates-pick[data-n="5"] .mate-card:nth-child(4) { grid-column: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mates-pick[data-n="5"] .mate-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px; text-align: center; }
  .mates-pick[data-n="5"] .mate-card .mate-demo { aspect-ratio: auto; height: min(96px, 28vh); }
  .mates-pick[data-n="5"] .mate-card .name, .mates-pick[data-n="5"] .mate-card .role { align-self: stretch; }
  .mates-pick[data-n="5"] .mate-card .name { font-size: 15px; }
  .mates-pick[data-n="5"] .mate-card .role { font-size: 12px; line-height: 1.3; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .mates-pick[data-n="5"] .mate-card .role { font-size: 11px; }
}

/* ---------- なかまえらび 6 人(8 章から。もう ひとりの ゆうしゃ が 入る)。縦画面は 3 × 2・横画面は 6 列 */
.mates-pick[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 560px); }
.mates-pick[data-n="6"] .mate-card .mate-demo { aspect-ratio: 1 / 1; }
.mates-pick[data-n="6"] .mate-card .name { font-size: 16px; word-break: keep-all; }
@media (orientation: landscape) {
  .mates-pick[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 1000px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mates-pick[data-n="6"] .mate-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px; text-align: center; }
  .mates-pick[data-n="6"] .mate-card .mate-demo { aspect-ratio: auto; height: min(84px, 23vh); }
  .mates-pick[data-n="6"] .mate-card .fresh { left: -4px; padding: 0 5px; font-size: 11px; } /* 「あたらしい」が 右上の ✓ に かからない */
  .mates-pick[data-n="6"] .mate-card .name, .mates-pick[data-n="6"] .mate-card .role { align-self: stretch; }
  .mates-pick[data-n="6"] .mate-card .name { font-size: 14px; line-height: 1.2; }
  .mates-pick[data-n="6"] .mate-card .role { font-size: 12px; line-height: 1.3; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .mates-pick[data-n="6"] .mate-card .name { font-size: 13px; }
  .mates-pick[data-n="6"] .mate-card .role { font-size: 12px; line-height: 1.25; }
}

/* ---------- ことばの 途中で 折り返さない(8 章の デザイナーレビュー)。字の あいだの 空白でだけ 折る */
.mate-card .badge { z-index: 2; } /* えらんだ ✓ は「あたらしい」の 上 */
.banner, .coach, .talk .line { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 10 章: ⇄ こうたい(gimmicks-ch10.md 10.2)。◀ ▶ の かたまりの 上。縦は ◀ ▶ と 同じ はばの 横長の 札・横は 丸。
   ふちの 色は かわる 先の 勇者の 色(--to)。明るさは 振らない。押せない(もう ひとりが ひと休み中)ときは 灰の ふち */
.swap { min-height: 0; width: 64px; height: 64px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 28px; border-color: var(--to, var(--gold)); background: #2f2c4a; font-size: 18px; font-weight: 800; touch-action: none; }
.swap .face { width: 34px; height: 46px; border-radius: 8px; background: var(--night-2); flex: 0 0 auto; }
.swap b { white-space: nowrap; }
/* 一言の あいだの しるしは ふちの 外の 輪(ふちの 色 = かわる 先の 勇者の 色は かえない。けんの 色は 金と 同じ なので ふちで 光らせると 区別が つかない) */
.swap.hint, .swap.rest-hint, .pad[data-hint="skyDuo"] .swap { box-shadow: 0 0 0 3px var(--night-0), 0 0 0 7px rgba(242, 210, 122, .75), 0 3px 0 var(--night-0); }
/* 押せない ときは 灰の ふちが 勝つ(輪も 出さない) */
.swap[aria-disabled="true"], .swap[aria-disabled="true"].hint, .pad[data-hint="skyDuo"] .swap[aria-disabled="true"] { border-color: var(--text-dim); background: var(--night-2); box-shadow: 0 3px 0 var(--night-0); }
.swap[aria-disabled="true"] .face { opacity: .5; }
/* いま 動かして いる 勇者の 体力の 札(金の ふち) */
.hp.ctl { box-shadow: 0 0 0 2px var(--gold) inset; }
.swap { border-radius: 50%; flex-direction: column; gap: 0; font-size: 12px; line-height: 1.1; }
.swap .face { width: 24px; height: 32px; border-radius: 6px; }

/* ---------- エンディング(10 章 クリア)。1) なかまの ロール(下から 上へ。transform だけ)→ 2) さいごの 札 */
.ending .roll { position: absolute; inset: 0; overflow: hidden; cursor: pointer; touch-action: manipulation; }
.ending .roll-in { position: absolute; left: 50%; top: 0; width: min(88vw, 420px); margin-left: calc(min(88vw, 420px) / -2); padding: 16px; border-radius: 16px;
  background: rgba(18, 22, 42, .78); color: var(--text-night); text-align: center; will-change: transform; }
.ending .roll-in h1 { margin: 0 0 6px; color: var(--gold); font-size: 34px; text-shadow: 0 3px 0 var(--wood-dark); }
.ending .roll-head { margin: 6px 0 10px; color: var(--gold); font-size: 18px; font-weight: 800; }
.ending .credits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ending .credits li { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 800; }
.ending .credits .face { width: 48px; height: 48px; border-radius: 10px; background: var(--night-2); flex: 0 0 auto; }
.ending .roll-end { margin: 14px 0 0; color: var(--gold); font-size: 20px; font-weight: 800; }
.ending .roll-skip { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; padding: 6px 12px; border-radius: 10px;
  background: rgba(18, 22, 42, .78); color: var(--text-night); font-size: 15px; cursor: pointer; }
/* 動きを へらす 設定: 流さず、一覧を 止めて 出す(2 列。はみ出したら わくの 中で 送る) */
.ending .roll.still .roll-in { top: 50%; transform: translateY(-50%) !important; max-height: calc(100% - 32px); overflow-y: auto; }
.ending .roll.still .credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.ending .roll.still .credits li { justify-content: flex-start; font-size: 15px; gap: 6px; }
.ending .roll.still .credits .face { width: 32px; height: 32px; }
.end-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (orientation: landscape) { .ending .end-card { top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); } }
@media (orientation: landscape) and (max-height: 500px) {
  .ending .roll-in { width: min(70vw, 420px); margin-left: calc(min(70vw, 420px) / -2); padding: 10px; }
  .ending .roll.still .credits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ending .roll.still .roll-in { width: min(92vw, 640px); margin-left: calc(min(92vw, 640px) / -2); }
  .end-btns .btn.big { min-height: 52px; font-size: 20px; padding: 6px 24px; }
  .end-btns .btn { min-height: 44px; }
}
.ending [hidden] { display: none !important; }
.ending .end-btns .btn[aria-disabled="true"] { opacity: .45; }

/* ---------- 読み込み(章の 絵を 読む 間。main.js の buildLoading。design.md「読み込み」)
   明るさを 振らない。動くのは 3 つの 点の ゆっくりした 上下だけ(transform。1 周 1.4 秒)。動きを へらす 設定では 止まる */
.loadwait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--night-1); padding: 16px; text-align: center; }
.loadwait .lt { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 92vw; overflow-wrap: anywhere; }
.loadwait .lt b { font-size: 18px; color: var(--text-dim); }
.loadwait .lt span { font-size: 24px; color: var(--gold); }
.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; }
.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; } }

/* ---------- タブレットの 横(幅 960・高さ 640 以上。#1627)。スマホの 縦・横・低い 横には 当たらない
   勇者えらび: 720px の 枠の まま だと 中身が 上の 6 割・幅 6 割に 寄る → 枠を 1100px・字を 大きく・縦は まん中。
   バトルの 十字: 120 の 円では 1 方向の 扇が 外の はしで 46px(的の 下限 64 を 割る)→ 168(外の はし 64・矢印 55)。技の 字 11.5 → 14px。
   タイトルの 板: 画面の まん中だと 二人の 頭と 剣に かかる → 空の 段へ */
@media (orientation: landscape) and (min-width: 960px) and (min-height: 640px) {
  .title > .title-box { top: max(60px, 8%); transform: translateX(-50%); }
  .battle { --cb: 184px; }
  .pad { --pad: 168px; --tech: 72px; --star: 80px; --jump: 80px; --atk: 104px; --g: 10px; }
  .movepad .ar::before { border-width: 12px; }
  .movepad .up::before { border-bottom-width: 17px; } .movepad .dn::before { border-top-width: 17px; }
  .movepad .lf::before { border-right-width: 17px; } .movepad .rt::before { border-left-width: 17px; }
  .tech.round { font-size: 14px; }
  .jump.round { font-size: 15px; } .jump b i { font-size: 24px; }
  .atk.round { font-size: 21px; }
  .battle.duo .acts { grid-template-columns: 80px repeat(4, var(--tech)) var(--star) var(--jump) var(--atk); }
}
/* 勇者えらびは 高さ 700 から(960x640・1024x640 では 大きい 字の 札が 高さに 入らず、下の 一言が「はじめる」の 下に かくれた) */
@media (orientation: landscape) and (min-width: 960px) and (min-height: 700px) {
  .select { justify-content: safe center; gap: 16px; }
  .select h2 { font-size: 34px; }
  .heroes { width: min(100%, 1100px); gap: 16px; }
  .hero-card { gap: 8px; padding: 12px; }
  .hero-card .name { font-size: 28px; }
  .hero-card .role { font-size: 20px; }
  .hero-card .stats { font-size: 18px; }
  .hero-card .techs { font-size: 17px; }
  .select .note { font-size: 18px; }
}