/*
 * 古代戦艦アルカ スタイル（docs/ui/stage1-ui.md 2〜4章・7〜8章・10章、docs/ui/stage2-ui.md）
 * - すべて .rbs-root の内側に限定（るり色タクシーへの組み込みのため）。
 * - ページ全体への指定・position: fixed・vw/vh/dvh は使わない（表示領域いっぱいにするのは index.html 側）。
 * - ホバー時の見た目変化は付けない。:active のみ。
 *
 * レイアウトのクラス（.rbs-root に main.js が付ける。UI文書 10.4）
 *   .rbs-wide           B  横長
 *   .rbs-wide-short     C  横長・低背（.rbs-tight: 幅700px未満で弾の状態表示を短く）
 *   .rbs-narrow         A  縦長
 *   .rbs-narrow.rbs-narrow-compact  A' 縦長・詰め
 *   .rbs-scaled         縮小表示（基準サイズでレイアウトして transform で縮める）
 *   .rbs-standalone     index.html 単体時
 */
.rbs-root {
  /* 2026-10-08 デザイン 案A「艦橋の計器風」: 白黒に金のふち */
  --rbs-bg: #FFFFFF;
  --rbs-surface: #F2F2F2;
  --rbs-sea: #E6E6E6;
  --rbs-gold: #D9A400;
  --rbs-gold-dark: #B88A00;
  --rbs-line: #222222;
  --rbs-ink: #111111;
  --rbs-sub: #666666;
  --rbs-weak: #8A8A8A;
  --rbs-enemy-hull: #444444;
  --rbs-good: #1E6FD9;
  --rbs-hurt: #D93025;
  --rbs-warn: #F2B600;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--rbs-bg);
  color: var(--rbs-ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  /* 組み込み時: ゲーム上の指でページを縦スクロールできるよう manipulation（UI文書 10.3） */
  touch-action: manipulation;
  /* 組み込み時: 縦スワイプ・ホイールを親ページへ伝えるため auto（内訳 .rbs-scroll は contain のまま） */
  overscroll-behavior: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  outline: none;
}
/* 単体時: ダブルタップ拡大・ピンチ拡大・引っ張りによるページの動きを止める */
.rbs-root.rbs-standalone { touch-action: none; overscroll-behavior: none; }

.rbs-root *, .rbs-root *::before, .rbs-root *::after { box-sizing: border-box; }
.rbs-root [hidden] { display: none !important; }
.rbs-root h1, .rbs-root h2, .rbs-root p, .rbs-root ol, .rbs-root dl, .rbs-root dd { margin: 0; padding: 0; }

.rbs-root .rbs-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.rbs-root .rbs-nowrap { white-space: nowrap; }

/* 内部スクロール領域（結果の内訳・将来の強化ツリー）。端まで行ってもページへ伝えない */
.rbs-root .rbs-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ===== 画面切替: 表示中の1画面が枠ちょうどを占める（中身は最大幅960pxで中央） ===== */
.rbs-root .rbs-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 960px;
  margin: 0 auto;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.rbs-root .rbs-screen.is-active { display: flex; }

/* 縮小表示: 基準サイズでレイアウトし、枠の中央で縮める（UI文書 10.1） */
.rbs-root.rbs-scaled .rbs-screen {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--rbs-base-w);
  height: var(--rbs-base-h);
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--rbs-scale, 1));
}
/* 正方形に近い枠のホーム（2026-10-11）: 下に寄せて、海が枠の下まで続くようにする */
.rbs-root.rbs-scaled.rbs-anchor-bottom .rbs-screen { top: auto; bottom: 0; transform-origin: 50% 100%; transform: translate(-50%, 0) scale(var(--rbs-scale, 1)); }

/* ===== 共通ボタン ===== */
.rbs-root button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.rbs-root .rbs-btn--main {
  display: block;
  flex: none;
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  margin: 12px auto 4px;
  border: 2px solid var(--rbs-line);
  border-radius: 10px;
  background: var(--rbs-ink);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
}
.rbs-root .rbs-btn--main:active:not(:disabled) { transform: translateY(2px); }
/* 副ボタン（白地・黒枠）。大きさは主ボタンと同じ */
.rbs-root .rbs-btn--sub {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  margin: 12px auto 4px;
  border: 2px solid var(--rbs-line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--rbs-ink);
  font-size: 20px;
  font-weight: bold;
}
.rbs-root .rbs-btn--sub:active:not(:disabled) { transform: translateY(2px); }
.rbs-root button:disabled { opacity: 0.4; cursor: default; }

/* ===== スタート画面（A/B: 縦1列、C: 2カラム） ===== */
.rbs-root .rbs-screen--start { padding: 12px; text-align: center; }
.rbs-root .rbs-start-main,
.rbs-root .rbs-start-side { display: contents; }
.rbs-root .rbs-title { order: 1; margin-top: auto; font-size: 32px; font-weight: bold; letter-spacing: 0.05em; line-height: 1.3; }
.rbs-root .rbs-start-ships { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; min-height: 0; }
.rbs-root .rbs-howto { order: 3; margin-bottom: auto; }
.rbs-root .rbs-start-save,
.rbs-root .rbs-start-notice { order: 4; }
.rbs-root .rbs-start-actions { order: 5; flex: none; display: flex; flex-direction: column; width: 100%; }
.rbs-root .rbs-preview { display: block; max-width: 40%; height: auto; }
.rbs-root .rbs-vs { font-weight: bold; color: var(--rbs-sub); }
.rbs-root .rbs-howto {
  list-style: none;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  text-align: left;
  counter-reset: rbs-step;
}
.rbs-root .rbs-howto li {
  position: relative;
  padding: 8px 8px 8px 40px;
  border-bottom: 1px solid #DDDDDD;
  counter-increment: rbs-step;
}
.rbs-root .rbs-howto li::before {
  content: counter(rbs-step);
  position: absolute;
  left: 6px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rbs-ink);
  color: #FFFFFF;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
}
.rbs-root .rbs-howto span { margin-left: 2px; }
/* はみ出すとき（JS が is-tight を付ける）: 説明14px・艦の絵なし */
.rbs-root .rbs-screen--start.is-tight .rbs-howto { font-size: 14px; }
.rbs-root .rbs-screen--start.is-tight .rbs-howto li { padding-top: 5px; padding-bottom: 5px; }
.rbs-root .rbs-screen--start.is-tight .rbs-howto li::before { top: 4px; }
.rbs-root .rbs-screen--start.is-tight .rbs-start-ships { display: none; }

/* ===== 第2段階: スタート画面のつづき表示・お知らせ・「強化する」（UI文書 stage2 6章） ===== */
.rbs-root .rbs-start-save {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: var(--rbs-ink);
}
.rbs-root .rbs-start-save-label,
.rbs-root .rbs-start-save-item { display: inline-block; white-space: nowrap; }
.rbs-root .rbs-start-save-label { color: var(--rbs-sub); font-size: 14px; }
.rbs-root .rbs-start-notice {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--rbs-surface);
  color: var(--rbs-ink);
  font-size: 14px;
  line-height: 20px; /* 「!」の丸（20px）と同じ高さにして、丸と文字の中央をそろえる */
  text-align: left;
}
.rbs-root .rbs-start-notice-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--rbs-warn);
  color: #111111;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}
/* ボタン列: 「強化する」を出すとき（is-pair）だけ横並び。結果画面のボタン列と同じ規則 */
.rbs-root .rbs-start-actions.is-pair { flex-direction: row; gap: 12px; max-width: 400px; margin: 12px auto 4px; }
.rbs-root .rbs-start-actions.is-pair > .rbs-btn { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; padding: 0 8px; white-space: nowrap; }
/* 段階2（JS が is-tight と併せて付ける）: つづき表示・お知らせを消す */
.rbs-root .rbs-screen--start.is-tighter .rbs-start-save,
.rbs-root .rbs-screen--start.is-tighter .rbs-start-notice { display: none; }

/* ===== 戦闘画面 ===== */
.rbs-root .rbs-screen--battle > * { flex: none; }

/* HUD */
.rbs-root .rbs-hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: var(--rbs-surface);
  border-bottom: 1.5px solid var(--rbs-line);
}
.rbs-root .rbs-unit { min-width: 0; }
.rbs-root .rbs-unit-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.rbs-root .rbs-unit--enemy .rbs-unit-head { flex-direction: row-reverse; }
.rbs-root .rbs-unit-name { font-weight: bold; font-size: 16px; white-space: nowrap; }
.rbs-root .rbs-hp-row,
.rbs-root .rbs-reload-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.rbs-root .rbs-unit--enemy .rbs-hp-row { flex-direction: row-reverse; }
.rbs-root .rbs-hp-label, .rbs-root .rbs-reload-label { font-size: 14px; color: var(--rbs-sub); flex: none; white-space: nowrap; }
.rbs-root .rbs-reload-label { min-width: 4.5em; }

.rbs-root .rbs-hp-num { font-weight: bold; font-variant-numeric: tabular-nums; flex: none; font-size: 15px; white-space: nowrap; }
.rbs-root .rbs-danger { color: var(--rbs-hurt); font-weight: bold; font-size: 14px; flex: none; white-space: nowrap; }

.rbs-root .rbs-bar {
  position: relative;
  flex: 1;
  min-width: 40px;
  border: 1.5px solid var(--rbs-line);
  background: #FFFFFF;
  overflow: hidden;
}
.rbs-root .rbs-bar-fill, .rbs-root .rbs-bar-ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
.rbs-root .rbs-unit--enemy .rbs-bar-fill,
.rbs-root .rbs-unit--enemy .rbs-bar-ghost { left: auto; right: 0; } /* 敵は右から減る／右から満ちる */
.rbs-root .rbs-hp-bar { height: 16px; }
.rbs-root .rbs-hp-bar .rbs-bar-fill { background: var(--rbs-ink); }
.rbs-root .rbs-hp-bar .rbs-bar-ghost { background: #BBBBBB; transition: width 0.3s ease-out 0.5s; }
.rbs-root .rbs-hp-bar.is-danger .rbs-bar-fill {
  background: repeating-linear-gradient(45deg, var(--rbs-hurt) 0 4px, #FFFFFF 4px 7px);
}
.rbs-root .rbs-reload-bar { height: 8px; }
.rbs-root .rbs-reload-bar .rbs-bar-fill { background: var(--rbs-sub); }

/* 戦場: 残りの高さをすべて使う。Canvas は戦場いっぱい（論理領域の縮尺・中央寄せは field.js） */
.rbs-root .rbs-screen--battle > .rbs-field { position: relative; flex: 1 1 auto; min-height: 0; background: var(--rbs-bg); overflow: hidden; }
.rbs-root .rbs-canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.rbs-root .rbs-intro {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  border: 2px solid var(--rbs-line);
  background: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
  white-space: nowrap;
}

/* 予告バナー（敵側の上端から4px・戦場幅の50%以下）。B・A は2行 */

/* 弾の状態表示 */

/* 弾種ボタン */

/* ===== 結果画面（A/A'/B: 縦1列・最大幅480px、C: 2カラム） ===== */
.rbs-root .rbs-screen--result {
  display: none;
  max-width: 480px;
  padding: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "body" "retry";
}
.rbs-root .rbs-screen--result.is-active { display: grid; }
.rbs-root .rbs-result-head { grid-area: head; min-width: 0; }
.rbs-root .rbs-result-body { grid-area: body; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.rbs-root .rbs-result-actions { grid-area: retry; display: flex; gap: 12px; width: 100%; max-width: 400px; margin: 12px auto 4px; }
.rbs-root .rbs-result-heading { font-size: 40px; font-weight: bold; text-align: center; line-height: 1.2; }
.rbs-root .rbs-result-reason { text-align: center; margin-top: 2px; color: var(--rbs-sub); }
.rbs-root .rbs-hint {
  margin-top: 10px;
  padding: 6px 12px 6px 16px;
  border: 2px solid var(--rbs-line);
  border-left-width: 8px;
}
.rbs-root .rbs-hint-title { font-size: 14px; font-weight: bold; color: var(--rbs-sub); }
.rbs-root .rbs-hint-text { font-size: 18px; font-weight: bold; }
.rbs-root .rbs-result-main { flex: none; margin-top: 10px; }
.rbs-root .rbs-result-near { font-size: 18px; margin-bottom: 4px; }
.rbs-root .rbs-result-near b { font-size: 24px; }

.rbs-root .rbs-result-key,
.rbs-root .rbs-result-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 0;
}
.rbs-root .rbs-result-key { font-size: 18px; margin-top: 4px; }
.rbs-root .rbs-result-key dd, .rbs-root .rbs-result-detail dd { text-align: right; font-variant-numeric: tabular-nums; }
.rbs-root .rbs-strong { font-weight: bold; }

/* くわしい内訳: 残りの高さで内部スクロール */
.rbs-root .rbs-detail { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.rbs-root .rbs-detail-head { flex: none; display: flex; align-items: center; justify-content: center; }
.rbs-root .rbs-result-detail-title { font-size: 14px; color: var(--rbs-sub); }
.rbs-root .rbs-detail-body { flex: 1 1 auto; min-height: 0; }
.rbs-root .rbs-result-detail { font-size: 15px; line-height: 1.35; }
.rbs-root .rbs-detail.is-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF);
  pointer-events: none;
}
.rbs-root .rbs-detail-close,
.rbs-root .rbs-detail-open {
  display: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--rbs-line);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
}
/* 折りたたみ（内訳の領域が3行分未満）: ボタンだけ出し、押すと結果画面の上に重ねて開く */
.rbs-root .rbs-screen--result.is-collapsed .rbs-detail { display: none; }
.rbs-root .rbs-screen--result.is-collapsed .rbs-detail-open { display: block; flex: none; margin: 8px auto 0; }
.rbs-root .rbs-screen--result.is-collapsed.is-detail-open .rbs-detail {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 12px 12px;
  background: #FFFFFF;
}
.rbs-root .rbs-screen--result.is-detail-open .rbs-detail-head { justify-content: space-between; margin-bottom: 6px; }
.rbs-root .rbs-screen--result.is-detail-open .rbs-detail-close { display: block; }

/* ===== B 横長（UI文書 2.2）: HUD 約90px・弾の状態32px・ボタン列72px ===== */

/* ===== A 縦長（UI文書 2.3）: HUD 約100px・弾の状態32px・ボタン列76px（ボタン64px） ===== */
.rbs-root.rbs-narrow .rbs-hud { gap: 8px; padding: 6px 8px; }
.rbs-root.rbs-narrow .rbs-hp-label { display: none; }
.rbs-root.rbs-narrow .rbs-reload-label { min-width: 0; }
.rbs-root.rbs-narrow .rbs-hp-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num danger" "bar bar";
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
}
.rbs-root.rbs-narrow .rbs-unit--enemy .rbs-hp-row { grid-template-columns: 1fr auto; grid-template-areas: "danger num" "bar bar"; }
.rbs-root.rbs-narrow .rbs-hp-num { grid-area: num; }
.rbs-root.rbs-narrow .rbs-danger { grid-area: danger; }
.rbs-root.rbs-narrow .rbs-unit--enemy .rbs-danger { justify-self: end; }
.rbs-root.rbs-narrow .rbs-hp-bar { grid-area: bar; }

.rbs-root.rbs-narrow .rbs-intro { font-size: 22px; }
/* 結果: 360px幅では内訳を詰めた1列（UI文書 7.1） */
.rbs-root.rbs-narrow .rbs-screen--result { padding: 8px 12px; }
.rbs-root.rbs-narrow .rbs-result-detail { font-size: 14px; line-height: 1.3; }

/* ===== A' 縦長・詰め（H < 600）: HUD 72px・弾の状態28px・ボタン列60px（ボタン48px） ===== */
.rbs-root.rbs-narrow-compact .rbs-hud { padding: 4px 8px; }
.rbs-root.rbs-narrow-compact .rbs-unit-head { min-height: 22px; }
.rbs-root.rbs-narrow-compact .rbs-unit-name { font-size: 15px; }

/* HP の行は「バー＋数値」の1行（数値を名前の行に置くと 320px 幅で敵側が収まらないため） */
.rbs-root.rbs-narrow-compact .rbs-hp-row { display: flex; margin-top: 3px; gap: 4px; }
.rbs-root.rbs-narrow-compact .rbs-hp-bar { height: 14px; }
.rbs-root.rbs-narrow-compact .rbs-hp-num { font-size: 14px; }
.rbs-root.rbs-narrow-compact .rbs-danger-word { display: none; }
.rbs-root.rbs-narrow-compact .rbs-reload-row { margin-top: 3px; gap: 4px; }
.rbs-root.rbs-narrow-compact .rbs-reload-label { font-size: 12px; line-height: 14px; }
.rbs-root.rbs-narrow-compact .rbs-reload-bar { height: 6px; }

.rbs-root.rbs-narrow-compact .rbs-btn--main { min-height: 48px; font-size: 18px; margin-top: 8px; }
/* スタート: タイトル26px・説明14px・艦の絵なし */
.rbs-root.rbs-narrow-compact .rbs-title { font-size: 26px; }
.rbs-root.rbs-narrow-compact .rbs-howto { font-size: 14px; margin-top: 8px; }
.rbs-root.rbs-narrow-compact .rbs-howto li { padding-top: 6px; padding-bottom: 6px; }
.rbs-root.rbs-narrow-compact .rbs-howto li::before { top: 4px; }
.rbs-root.rbs-narrow-compact .rbs-start-ships { display: none; }
.rbs-root.rbs-narrow-compact .rbs-start-save { font-size: 14px; margin-top: 6px; }
.rbs-root.rbs-narrow-compact .rbs-start-notice { margin-top: 6px; }
.rbs-root.rbs-narrow-compact .rbs-start-actions.is-pair { margin-top: 8px; }
.rbs-root.rbs-narrow-compact .rbs-start-actions.is-pair > .rbs-btn { min-height: 48px; font-size: 18px; }
/* 結果: 見出し32px・余白を詰める */
.rbs-root.rbs-narrow-compact .rbs-result-heading { font-size: 32px; }
.rbs-root.rbs-narrow-compact .rbs-hint { margin-top: 6px; padding: 4px 10px 4px 12px; }
.rbs-root.rbs-narrow-compact .rbs-hint-text { font-size: 16px; line-height: 1.35; }
.rbs-root.rbs-narrow-compact .rbs-result-main { margin-top: 6px; }
.rbs-root.rbs-narrow-compact .rbs-result-near { font-size: 16px; margin-bottom: 0; }
.rbs-root.rbs-narrow-compact .rbs-result-near b { font-size: 20px; }

.rbs-root.rbs-narrow-compact .rbs-result-key { font-size: 16px; margin-top: 2px; }
.rbs-root.rbs-narrow-compact .rbs-detail { margin-top: 4px; }

/* ===== 予告バナー1行（A'・C）: 「! まもなく [盾]軽装甲 3 → [弾]ばくはつ弾」 ===== */

/* 1行目の中身もバナーの直接の並びにして、幅が足りなければ語の切れ目で折り返す（文字を切らない） */

/* ===== C 横長・低背（横向きスマホ、H < 500）: HUD 44px、操作帯64pxを戦場の下端に重ねる ===== */
.rbs-root.rbs-wide-short .rbs-hud {
  height: 44px;
  column-gap: 120px;
  row-gap: 0;
  padding: 3px 8px;
  align-content: center;
}
.rbs-root.rbs-wide-short .rbs-unit { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.rbs-root.rbs-wide-short .rbs-unit--enemy { flex-direction: row-reverse; }
.rbs-root.rbs-wide-short .rbs-unit-head { min-height: 0; }
.rbs-root.rbs-wide-short .rbs-unit-name { font-size: 15px; line-height: 20px; }
.rbs-root.rbs-wide-short .rbs-hp-row { flex: 1 1 0; min-width: 0; margin-top: 0; gap: 4px; }
.rbs-root.rbs-wide-short .rbs-hp-label { display: none; }
.rbs-root.rbs-wide-short .rbs-hp-bar { height: 12px; }
.rbs-root.rbs-wide-short .rbs-hp-num { font-size: 14px; line-height: 20px; }
.rbs-root.rbs-wide-short .rbs-danger-word { display: none; }
.rbs-root.rbs-wide-short .rbs-reload-row { flex: 0 0 100%; margin-top: 1px; gap: 4px; }
.rbs-root.rbs-wide-short .rbs-reload-label { min-width: 0; font-size: 12px; line-height: 14px; }
.rbs-root.rbs-wide-short .rbs-reload-bar { height: 6px; }
/* 敵の装甲モードは HUD の中央 */

/* 戦場を画面の下端まで伸ばし、ボタンと弾の状態を下端64pxの帯に重ねる */

.rbs-root.rbs-wide-short .rbs-intro { font-size: 24px; }

.rbs-root.rbs-wide-short .rbs-btn--main { min-height: 48px; font-size: 18px; }

/* C スタート: 2カラム（左60%: タイトル24px・説明14px、右40%: 下寄せ、艦の絵は H≥400 のみ） */
.rbs-root.rbs-wide-short .rbs-screen--start { flex-direction: row; gap: 16px; padding: 10px 16px; text-align: left; }
.rbs-root.rbs-wide-short .rbs-start-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 60%;
  min-width: 0;
}
.rbs-root.rbs-wide-short .rbs-start-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
}
.rbs-root.rbs-wide-short .rbs-title { margin-top: 0; font-size: 24px; }
.rbs-root.rbs-wide-short .rbs-howto { margin: 6px 0 0; font-size: 14px; }
.rbs-root.rbs-wide-short .rbs-howto li { padding-top: 5px; padding-bottom: 5px; }
.rbs-root.rbs-wide-short .rbs-howto li::before { top: 4px; }
.rbs-root.rbs-wide-short .rbs-start-ships { margin: auto 0 8px; }
.rbs-root.rbs-wide-short.rbs-low .rbs-start-ships { display: none; }
.rbs-root.rbs-wide-short .rbs-start-btn { margin: 0 auto 4px; }
.rbs-root.rbs-wide-short .rbs-start-save { font-size: 14px; margin: 6px 0 8px; }
.rbs-root.rbs-wide-short .rbs-start-notice { margin: 6px 0 8px; }
/* C: 右カラムが狭いので縦並び（上「強化する」・下「出撃！」） */
.rbs-root.rbs-wide-short .rbs-start-actions.is-pair { flex-direction: column; gap: 8px; max-width: none; margin: 0; }
.rbs-root.rbs-wide-short .rbs-start-actions.is-pair > .rbs-btn { flex: none; width: 100%; max-width: 320px; min-height: 48px; margin: 0 auto; font-size: 18px; }
.rbs-root.rbs-wide-short .rbs-start-actions.is-pair > .rbs-start-btn { margin-bottom: 4px; }

/* C 結果: 2カラム（左: 見出し28px・理由・ヒント・再戦、右: 主要数値＋内訳） */
.rbs-root.rbs-wide-short .rbs-screen--result {
  max-width: 960px;
  padding: 10px 16px;
  column-gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "head body" "retry body";
}
.rbs-root.rbs-wide-short .rbs-result-head { align-self: center; }
.rbs-root.rbs-wide-short .rbs-result-heading { font-size: 28px; }
.rbs-root.rbs-wide-short .rbs-hint { margin-top: 6px; }
.rbs-root.rbs-wide-short .rbs-hint-text { font-size: 16px; line-height: 1.35; }
.rbs-root.rbs-wide-short .rbs-result-main { margin-top: 0; }
.rbs-root.rbs-wide-short .rbs-result-near { font-size: 16px; margin-bottom: 0; }
.rbs-root.rbs-wide-short .rbs-result-near b { font-size: 20px; }
.rbs-root.rbs-wide-short .rbs-result-key { font-size: 16px; }
.rbs-root.rbs-wide-short .rbs-result-detail { font-size: 14px; }
.rbs-root.rbs-wide-short .rbs-result-actions { margin: 8px auto 0; }
/* 2026-10-14 R1: パソコン（B）の結果もスマホ横持ちと同じ2カラム（真ん中に細い列だけで左右が空いていたため） */
.rbs-root.rbs-wide .rbs-screen--result {
  max-width: 900px;
  padding: 14px 24px;
  column-gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "head body" "retry body";
}
.rbs-root.rbs-wide .rbs-result-head { align-self: center; }
.rbs-root.rbs-wide .rbs-result-body { justify-content: center; }
.rbs-root.rbs-wide .rbs-result-actions { margin: 10px auto 0; }

/* ===== 第2段階: 結果画面のボタン列・資材の行（UI文書 stage2 2章） ===== */
.rbs-root .rbs-result-actions > .rbs-btn { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; padding: 0 8px; white-space: nowrap; }
.rbs-root.rbs-narrow-compact .rbs-result-actions > .rbs-btn,
.rbs-root.rbs-wide-short .rbs-result-actions > .rbs-btn { min-height: 48px; font-size: 18px; }
.rbs-root.rbs-narrow-compact .rbs-result-actions { margin-top: 8px; }
.rbs-root .rbs-upgrade-dot,
.rbs-root .rbs-start-up-dot {
  display: inline-block;
  margin-left: 4px;
  min-width: 22px;
  padding: 0 4px;
  border-radius: 11px;
  vertical-align: 0.1em;
  background: var(--rbs-good);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 22px;
}
.rbs-root .rbs-reward { font-size: 16px; margin-bottom: 2px; }
.rbs-root .rbs-reward b { font-size: 20px; font-variant-numeric: tabular-nums; }
.rbs-root .rbs-reward-total { margin-left: 4px; font-size: 14px; color: var(--rbs-sub); }

/* ===== 強化画面: ツリーの地図 ＋ 選んだノードの説明（docs/design/upgrade-tree-spec.md 5.3） =====
 * 縦長（A・A'）: 地図が上（残りの高さ）、説明が下。横長（B・C）: 地図が左、説明が右（幅300px）。
 * 地図と説明はそれぞれの枠の中だけ動かせる（ページは動かない）。 */
.rbs-root .rbs-screen--upgrade { padding: 10px 12px; gap: 8px; }
.rbs-root .rbs-up-head { flex: none; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rbs-root .rbs-up-title { font-size: 26px; font-weight: bold; line-height: 1.2; }
.rbs-root .rbs-up-final { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--rbs-sub); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbs-root .rbs-up-final[hidden] { display: block; visibility: hidden; }
.rbs-root .rbs-up-mat { flex: none; font-size: 18px; white-space: nowrap; }
.rbs-root .rbs-up-mat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.rbs-root .rbs-up-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: row; gap: 10px; }
.rbs-root.rbs-narrow .rbs-up-body { flex-direction: column; gap: 8px; }

/* 地図 */
.rbs-root .rbs-up-map {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto;
  overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
  border: 2px solid var(--rbs-line); border-radius: 10px; background: var(--rbs-surface); cursor: grab;
}
.rbs-root .rbs-up-map-inner { position: relative; margin: 0 auto; }
.rbs-root .rbs-up-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.rbs-root .rbs-up-line { fill: none; stroke: var(--rbs-weak); stroke-width: 2; stroke-dasharray: 4 4; }
.rbs-root .rbs-up-line.is-on { stroke: var(--rbs-ink); stroke-width: 3; stroke-dasharray: none; }
.rbs-root .rbs-up-nodes { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.rbs-root .rbs-tn {
  position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 3px;
  border: 2px solid var(--rbs-ink); border-radius: 50%; background: #FFFFFF; color: var(--rbs-ink);
  font-size: 12px; font-weight: bold; line-height: 1.15; text-align: center; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rbs-root .rbs-tn-name { max-width: 100%; overflow-wrap: anywhere; }
.rbs-root .rbs-tn--root { background: var(--rbs-ink); color: #FFFFFF; font-size: 13px; }
.rbs-root .rbs-tn--hub { border-radius: 14px; font-size: 15px; }
.rbs-root .rbs-tn--final { border-radius: 16px; border-width: 3px; font-size: 12px; }
.rbs-root .rbs-tn.is-max { background: var(--rbs-ink); color: #FFFFFF; }
.rbs-root .rbs-tn--hub.is-max { background: #FFFFFF; color: var(--rbs-ink); border-width: 3px; }
.rbs-root .rbs-tn.is-part { border-width: 3px; }
.rbs-root .rbs-tn.is-locked { border-style: dashed; border-color: var(--rbs-weak); color: var(--rbs-sub); }
.rbs-root .rbs-tn.is-unknown { border-style: dashed; border-color: var(--rbs-weak); color: var(--rbs-weak); background: var(--rbs-surface); font-size: 18px; }
.rbs-root .rbs-tn[aria-pressed="true"] { outline: 3px solid var(--rbs-good); outline-offset: 3px; }
.rbs-root .rbs-tn-lv {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); padding: 0 3px;
  background: var(--rbs-surface); color: var(--rbs-ink); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rbs-root .rbs-tn-dot {
  position: absolute; right: -7px; bottom: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rbs-good); color: #FFFFFF; font-size: 13px; line-height: 20px;
}
.rbs-root .rbs-tn-star { position: absolute; right: -9px; top: -11px; color: var(--rbs-good); font-size: 18px; }

/* 説明（選んだノード） */
.rbs-root .rbs-up-panel { flex: 0 0 300px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.rbs-root.rbs-narrow .rbs-up-panel { flex: 0 1 auto; max-height: 58%; }
.rbs-root .rbs-up-card {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 10px 12px 12px; border: 2px solid var(--rbs-line); border-radius: 10px; background: #FFFFFF;
}
.rbs-root .rbs-up-card.is-flash { animation: rbs-flash 0.3s linear; }
.rbs-root .rbs-up-card-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rbs-root .rbs-up-name { font-size: 20px; font-weight: bold; }
.rbs-root .rbs-up-lv { font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rbs-root .rbs-up-card-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* 2026-10-14 U1: 札の下に続きがあるとき（ぼかしと ▼）。見出しの名前は途中で折らない */
.rbs-root .rbs-up-card { position: relative; }
.rbs-root .rbs-up-card.is-more .rbs-up-card-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.rbs-root .rbs-up-more { flex: none; height: 0; overflow: visible; text-align: center; font-size: 12px; line-height: 1; color: var(--rbs-gold); pointer-events: none; visibility: hidden; transform: translateY(-15px); }
.rbs-root .rbs-up-card.is-more .rbs-up-more { visibility: visible; }
.rbs-root .rbs-up-card-head { flex-wrap: wrap; row-gap: 0; }
.rbs-root .rbs-up-name { white-space: nowrap; }
.rbs-root.rbs-wide-short .rbs-up-name { font-size: 18px; }
.rbs-root.rbs-wide-short .rbs-up-lv { font-size: 14px; }
.rbs-root .rbs-up-ship { position: relative; height: 90px; margin-top: 4px; }
.rbs-root .rbs-up-ship[hidden] { display: none; }
.rbs-root .rbs-up-preview { display: block; margin: 0 auto; }
.rbs-root .rbs-up-stats { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; margin-top: 6px; font-size: 16px; }
.rbs-root .rbs-up-stats dt { color: var(--rbs-sub); white-space: nowrap; }
.rbs-root .rbs-up-stats dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rbs-root .rbs-up-stats dt.rbs-up-wrap-dt { align-self: start; }
.rbs-root .rbs-up-stats dd.rbs-up-wrap-dd { white-space: pre-line; text-align: left; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.rbs-root .rbs-up-arrow { color: var(--rbs-sub); }
.rbs-root .rbs-up-next { color: var(--rbs-good); }
.rbs-root .rbs-up-note { margin-top: 4px; font-size: 13px; color: var(--rbs-sub); }
.rbs-root .rbs-up-note[hidden] { display: none; }
.rbs-root .rbs-up-buy, .rbs-root .rbs-up-use {
  flex: none; display: block; width: 100%; min-height: 52px; margin-top: 8px; padding: 0 8px;
  border: 2px solid var(--rbs-line); border-radius: 10px; background: var(--rbs-ink); color: #FFFFFF; font-size: 17px; font-weight: bold;
}
.rbs-root .rbs-up-buy[hidden], .rbs-root .rbs-up-use[hidden], .rbs-root .rbs-up-reset[hidden] { display: none; }
.rbs-root .rbs-up-buy:active:not(:disabled) { transform: translateY(2px); }
/* 押せないとき: 半透明にせず、灰色地・点線枠・灰色の文字で理由を読めるようにする */
.rbs-root .rbs-up-buy:disabled { opacity: 1; background: var(--rbs-surface); color: var(--rbs-sub); border-style: dashed; }
.rbs-root .rbs-up-use[data-rbs-active="true"] { background: #FFFFFF; color: var(--rbs-ink); }
.rbs-root .rbs-up-reset {
  flex: none; display: block; width: 100%; min-height: 40px; margin-top: 6px; padding: 0 8px;
  border: 1.5px solid var(--rbs-weak); border-radius: 8px; background: #FFFFFF; color: var(--rbs-ink); font-size: 14px;
}
.rbs-root .rbs-up-reset[data-rbs-armed="true"] { border-color: var(--rbs-ink); border-width: 2px; font-weight: bold; }
.rbs-root .rbs-sortie-btn { flex: none; max-width: none; margin: 0; }

/* 小さい画面: 文字とボタンを少し小さく（is-tight は地図が低すぎるとき JS が付ける） */
.rbs-root.rbs-narrow-compact .rbs-up-title,
.rbs-root.rbs-wide-short .rbs-up-title { font-size: 22px; }
.rbs-root.rbs-narrow-compact .rbs-up-mat b,
.rbs-root.rbs-wide-short .rbs-up-mat b { font-size: 20px; }
.rbs-root.rbs-wide-short .rbs-screen--upgrade { padding: 6px 10px; gap: 6px; }
.rbs-root.rbs-wide-short .rbs-up-panel { flex-basis: 250px; gap: 6px; }
.rbs-root.rbs-narrow-compact .rbs-up-buy, .rbs-root.rbs-wide-short .rbs-up-buy,
.rbs-root.rbs-narrow-compact .rbs-up-use, .rbs-root.rbs-wide-short .rbs-up-use { min-height: 48px; margin-top: 6px; font-size: 16px; }   /* A'・C は48px（2026-10-09 44→48） */
.rbs-root.rbs-narrow-compact .rbs-sortie-btn, .rbs-root.rbs-wide-short .rbs-sortie-btn { min-height: 48px; }
.rbs-root.rbs-narrow-compact .rbs-up-card, .rbs-root.rbs-wide-short .rbs-up-card { padding: 8px 10px 10px; }
.rbs-root .rbs-screen--upgrade.is-tight .rbs-up-note { display: none; }

/* ===== ステージ選択（海域の中のステージを順番に並べる） ===== */
.rbs-root .rbs-screen--stages { max-width: 520px; padding: 12px; gap: 10px; }
.rbs-root .rbs-st-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rbs-root .rbs-st-title { flex: 1 1 auto; min-width: 0; font-size: 24px; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.rbs-root .rbs-st-sea {
  flex: none; width: 44px; height: 40px; margin: 0; padding: 0; border: 2px solid var(--rbs-line); border-radius: 8px;
  background: #FFFFFF; color: var(--rbs-ink); font-size: 16px;
}
.rbs-root .rbs-st-sea:disabled { border-style: dashed; border-color: var(--rbs-weak); color: var(--rbs-weak); }
.rbs-root.rbs-wide-short .rbs-st-sea { height: 34px; }
.rbs-root .rbs-st-count { font-size: 15px; color: var(--rbs-sub); white-space: nowrap; }
.rbs-root .rbs-st-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: auto; overscroll-behavior: contain; }
.rbs-root .rbs-st-btn {
  flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 6px 14px;
  border: 2px solid var(--rbs-line); border-radius: 10px; background: #FFFFFF; color: var(--rbs-ink); text-align: left;
}
.rbs-root .rbs-st-btn:active:not(:disabled) { transform: translateY(2px); }
.rbs-root .rbs-st-btn.is-locked { border-style: dashed; border-color: var(--rbs-weak); color: var(--rbs-weak); background: var(--rbs-surface); }
.rbs-root .rbs-st-num { flex: none; font-size: 15px; color: var(--rbs-sub); }
.rbs-root .rbs-st-btn.is-locked .rbs-st-num { color: var(--rbs-weak); }
.rbs-root .rbs-st-name { flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbs-root .rbs-st-mark { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: bold; }
.rbs-root .rbs-st-mark.is-clear { border: 1.5px solid var(--rbs-ink); }
.rbs-root .rbs-st-mark.is-next { background: var(--rbs-good); color: #FFFFFF; }
.rbs-root .rbs-st-actions { flex: none; display: flex; gap: 10px; }
.rbs-root .rbs-st-actions .rbs-btn { flex: 1 1 0; max-width: none; margin: 0; }
.rbs-root .rbs-st-up-dot { margin-left: 4px; color: var(--rbs-good); }
.rbs-root.rbs-narrow-compact .rbs-st-btn, .rbs-root.rbs-wide-short .rbs-st-btn { min-height: 44px; padding: 4px 12px; }
.rbs-root.rbs-wide-short .rbs-screen--stages { padding: 8px 12px; gap: 6px; }
.rbs-root.rbs-wide-short .rbs-st-title { font-size: 20px; }
.rbs-root.rbs-wide-short .rbs-st-list { gap: 4px; }

.rbs-root .rbs-st-note { flex: none; margin: 4px 0 0; font-size: 14px; color: var(--rbs-sub); text-align: center; }
/* 海域クリア（結果画面のいちばん上） */
.rbs-root .rbs-result-sea {
  margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--rbs-good); color: #FFFFFF;
  font-size: 18px; font-weight: bold; text-align: center; white-space: pre-line;   /* 海域クリアと新しい武器を2行で */
}
.rbs-root.rbs-wide-short .rbs-result-sea { margin-bottom: 4px; padding: 3px 8px; font-size: 15px; }

/* 戦闘開始の表示: ステージ名と一言の目標 */
.rbs-root .rbs-intro-stage, .rbs-root .rbs-intro-goal { display: block; text-align: center; font-size: 15px; font-weight: normal; white-space: nowrap; }
.rbs-root .rbs-intro-stage:empty, .rbs-root .rbs-intro-goal:empty { display: none; }
.rbs-root .rbs-intro-goal { margin-top: 2px; font-size: 14px; color: var(--rbs-sub); }

/* ===== 中断（一時停止）: 戦場の右上のボタンと、戦闘画面に重ねる表示 ===== */
.rbs-root .rbs-pause-btn {
  position: absolute; right: 8px; top: 8px; z-index: 2; min-width: 72px; min-height: 40px; margin: 0; padding: 0 10px;
  border: 2px solid var(--rbs-line); border-radius: 8px; background: #FFFFFF; color: var(--rbs-ink); font-size: 15px; font-weight: bold;
}
.rbs-root .rbs-pause-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rbs-root .rbs-pause-icon { width: 14px; height: 14px; vertical-align: 0; }
.rbs-root .rbs-pause-btn { position: absolute; padding-top: 10px; min-height: 44px; }
.rbs-root .rbs-pause-key { position: absolute; left: 6px; top: 2px; font-size: 10px; font-weight: normal; line-height: 1; color: var(--rbs-sub); }
.rbs-root .rbs-pause-btn:disabled { opacity: 0.4; }
.rbs-root .rbs-pause {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(255, 255, 255, 0.82);
}
.rbs-root .rbs-pause[hidden] { display: none; }
.rbs-root .rbs-pause-box {
  width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 2px solid var(--rbs-line); border-radius: 12px; background: #FFFFFF;
}
.rbs-root .rbs-pause-title { margin: 0; font-size: 24px; font-weight: bold; text-align: center; }
.rbs-root .rbs-pause-box .rbs-btn { max-width: none; margin: 0; }
.rbs-root .rbs-pause-note { margin: 0; font-size: 13px; color: var(--rbs-sub); text-align: center; }
.rbs-root .rbs-pause-audio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }   /* 効果音と BGM を横に並べる（低い横持ちでも収まる） */
.rbs-root .rbs-pause-audio .rbs-btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
.rbs-root.rbs-wide-short .rbs-pause-box { gap: 6px; padding: 10px 16px; }
.rbs-root.rbs-wide-short .rbs-pause-title { font-size: 20px; }

/* ===== 戦闘開始表示 ===== */
.rbs-root .rbs-intro-main { display: block; text-align: center; }


/* ===== 砲撃戦: HUD（docs/ui/artillery-ui.md 6章） =====
 * B・C: 左に自艦（1行目 名前・HP、2行目 装填）、中央に角度、右に敵（名前・HP）
 * A・A': 1行目 自艦｜敵、2行目 角度｜装填 */
.rbs-root .rbs-hud {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "p a e" "r a .";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}
.rbs-root .rbs-unit--player { grid-area: p; }
.rbs-root .rbs-unit--enemy { grid-area: e; }
.rbs-root .rbs-unit { display: flex; align-items: center; gap: 6px; }
.rbs-root .rbs-unit--enemy { flex-direction: row-reverse; }
.rbs-root .rbs-unit .rbs-hp-row { flex: 1 1 0; min-width: 0; margin-top: 0; }
.rbs-root .rbs-hud-angle { grid-area: a; display: flex; align-items: baseline; justify-content: center; gap: 4px; white-space: nowrap; }
.rbs-root .rbs-hud-angle-label { font-size: 14px; color: var(--rbs-sub); }
.rbs-root .rbs-hud-angle-num { display: inline-block; min-width: 2.2em; text-align: right; font-size: 28px; font-weight: bold; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rbs-root .rbs-hud-angle-limit { font-size: 14px; color: var(--rbs-sub); }
.rbs-root .rbs-reload-row { grid-area: r; margin-top: 0; gap: 6px; min-width: 0; }
.rbs-root .rbs-reload-name { flex: none; font-size: 14px; color: var(--rbs-sub); }
.rbs-root .rbs-reload-row .rbs-reload-bar { flex: 1 1 0; min-width: 40px; height: 8px; }
.rbs-root .rbs-reload-row .rbs-reload-label { min-width: 6em; font-size: 14px; color: var(--rbs-ink); }
.rbs-root .rbs-reload-label.is-ready { color: var(--rbs-good); font-weight: bold; }

/* A・A' */
.rbs-root.rbs-narrow .rbs-hud {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "p e" "a r";
  column-gap: 8px;
}
.rbs-root.rbs-narrow .rbs-unit { flex-wrap: wrap; row-gap: 2px; }
.rbs-root.rbs-narrow .rbs-unit .rbs-hp-row { flex: 1 1 100%; display: flex; gap: 4px; }
.rbs-root.rbs-narrow .rbs-hp-bar { height: 14px; }
.rbs-root.rbs-narrow .rbs-hp-num { font-size: 14px; }
.rbs-root.rbs-narrow .rbs-danger-word { display: none; }
.rbs-root.rbs-narrow .rbs-hud-angle { justify-content: flex-start; }
.rbs-root.rbs-narrow .rbs-reload-row .rbs-reload-label { min-width: 0; }
.rbs-root.rbs-narrow-compact .rbs-hud-angle-num { font-size: 24px; }
.rbs-root.rbs-narrow-compact .rbs-reload-name { display: none; }
.rbs-root.rbs-narrow-compact .rbs-reload-row .rbs-reload-bar { height: 6px; }

/* C: 44px の HUD */
.rbs-root.rbs-wide-short .rbs-hud { column-gap: 16px; row-gap: 1px; }
.rbs-root.rbs-wide-short .rbs-unit { flex-wrap: nowrap; }
.rbs-root.rbs-wide-short .rbs-hud-angle-num { font-size: 22px; }
.rbs-root.rbs-wide-short .rbs-reload-name { line-height: 16px; }
.rbs-root.rbs-wide-short .rbs-reload-row .rbs-reload-bar { height: 6px; }
.rbs-root.rbs-wide-short .rbs-reload-row .rbs-reload-label { font-size: 14px; line-height: 16px; }

/* ===== 砲撃戦: 操作パッド（artillery-ui.md 3章）。左手に ◀ ▶、右手に ▲ ▼ と発射 ===== */
.rbs-root .rbs-pad {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 8px;
  touch-action: none;           /* 指を動かしてもスクロール・拡大しない（pointercancel を防ぐ） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.rbs-root .rbs-pad-move,
.rbs-root .rbs-pad-aim,
.rbs-root .rbs-pad-angle { display: flex; gap: 8px; align-items: flex-end; }
.rbs-root .rbs-pad-angle { flex-direction: row-reverse; }   /* B・C: 左が ▼・右が ▲ */
.rbs-root .rbs-pad-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rbs-line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--rbs-ink);
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.rbs-root .rbs-pad-btn > *,
.rbs-root .rbs-pad-btn svg { pointer-events: none; }
.rbs-root .rbs-pad-btn .rbs-tri { width: 45%; height: 45%; vertical-align: 0; }
.rbs-root .rbs-pad-btn.is-pressed { background: var(--rbs-ink); color: #FFFFFF; transform: translateY(2px); }
.rbs-root .rbs-pad-btn[aria-disabled="true"] { background: var(--rbs-surface); border-style: dashed; color: var(--rbs-weak); transform: none; }
.rbs-root .rbs-fire-btn { width: 96px; background: var(--rbs-ink); color: #FFFFFF; font-size: 18px; font-weight: bold; }
.rbs-root .rbs-fire-btn.is-pressed { background: #FFFFFF; color: var(--rbs-ink); }
.rbs-root .rbs-fire-btn.is-loading {
  background: linear-gradient(to top, #C8C8C8 var(--rbs-fire-progress, 0%), var(--rbs-surface) 0);
  border-style: dashed;
  color: var(--rbs-sub);
}
.rbs-root .rbs-pad-key { position: absolute; top: 2px; left: 5px; font-size: 12px; font-weight: normal; line-height: 1.2; opacity: 0.6; }
/* A（縦長）: ◀ ▶ は下の段、▲ ▼ は縦積み、発射は2段ぶんの高さ */
.rbs-root.rbs-narrow .rbs-pad-angle { flex-direction: column; }
.rbs-root.rbs-narrow .rbs-pad-btn { width: 64px; height: 64px; }
.rbs-root.rbs-narrow .rbs-fire-btn { width: 96px; height: 136px; }
.rbs-root.rbs-narrow-compact .rbs-pad-btn { width: 56px; height: 56px; }
.rbs-root.rbs-narrow-compact .rbs-fire-btn { width: 88px; height: 120px; }
/* C（横長・低背）: 戦場の下端 64px に重ねる */
.rbs-root.rbs-wide-short .rbs-pad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  padding: 0 8px 8px;
  pointer-events: none;
}
.rbs-root.rbs-wide-short .rbs-pad-btn { pointer-events: auto; }

/* 操作ボタンの押せる範囲を、見た目より広げる（2026-10-11 ユーザー「スマホ版の操作のボタンが押しにくい」・同日「触るエリアの判定を大きく。ボタンの大きさは今と同じ」でさらに広げた）。
 * 見えない ::before をボタンの外まで広げる（ボタンの一部なので押せる・指がずれても離れにくい）。
 * 隣のボタンとはすき間（8px）の半分ずつ。画面の端・ボタンの組の間の空き・ボタンの上は大きく使う */
.rbs-root .rbs-pad-btn::before { content: ""; position: absolute; inset: -6px -4px; }
.rbs-root.rbs-wide-short .rbs-pad-btn::before { top: -40px; bottom: -12px; }
.rbs-root.rbs-wide-short .rbs-pad-left::before,
.rbs-root.rbs-narrow .rbs-pad-left::before { left: -24px; }
.rbs-root.rbs-wide-short .rbs-fire-btn::before,
.rbs-root.rbs-narrow .rbs-fire-btn::before { right: -24px; }
.rbs-root.rbs-wide-short .rbs-pad-right::before { right: -80px; }
.rbs-root.rbs-wide-short .rbs-pad-down::before { left: -80px; }
.rbs-root.rbs-narrow .rbs-pad-btn::before { top: -14px; }
.rbs-root.rbs-narrow .rbs-pad-right::before { right: -24px; }   /* 縦長は組の間がせまい画面もあるので広げすぎない */
.rbs-root.rbs-narrow .rbs-pad-up::before,
.rbs-root.rbs-narrow .rbs-pad-down::before { left: -24px; }
.rbs-root.rbs-narrow .rbs-pad-left::before,
.rbs-root.rbs-narrow .rbs-pad-right::before,
.rbs-root.rbs-narrow .rbs-pad-down::before,
.rbs-root.rbs-narrow .rbs-fire-btn::before { bottom: -14px; }
.rbs-root.rbs-narrow .rbs-pad-down::before { top: -4px; }   /* 縦積みの ▲ ▼ の間は半分ずつ */
.rbs-root.rbs-narrow .rbs-pad-up::before { bottom: -4px; }

/* ===== 砲撃戦: スタートの操作説明の札（artillery-ui.md 5章。パッドのクラスは付けない） ===== */
.rbs-root .rbs-howto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  margin: 0 2px 0 0;
  border: 1.5px solid var(--rbs-line);
  border-radius: 4px;
  background: #FFFFFF;
  vertical-align: -0.3em;
}
.rbs-root .rbs-howto-btn .rbs-tri { width: 0.75em; height: 0.75em; vertical-align: 0; }
.rbs-root .rbs-howto .rbs-howto-btn + .rbs-howto-btn { margin-left: 0; }
.rbs-root .rbs-howto-fire {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--rbs-ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
}

/* ===== 砲撃戦: 結果画面（artillery-ui.md 8章） ===== */
.rbs-root .rbs-acc { display: flex; align-items: center; gap: 8px; }
.rbs-root .rbs-acc-label { flex: none; }
.rbs-root .rbs-acc-bar { height: 14px; }
.rbs-root .rbs-acc-bar .rbs-bar-fill { background: var(--rbs-good); }
.rbs-root .rbs-acc-num { flex: none; font-weight: bold; font-size: 20px; font-variant-numeric: tabular-nums; }
.rbs-root .rbs-acc-sub { font-size: 16px; }
.rbs-root.rbs-narrow-compact .rbs-acc-num { font-size: 18px; }
.rbs-root.rbs-narrow-compact .rbs-acc-sub,
.rbs-root.rbs-wide-short .rbs-acc-sub { font-size: 14px; }
/* 段階1: 与えた／受けたダメージを1行に2つ並べる（「ダメージ」を省く）。よけた敵弾は3行目のまま */
.rbs-root .rbs-screen--result.is-tight .rbs-key-long { display: none; }
.rbs-root .rbs-screen--result.is-tight .rbs-result-key { grid-template-columns: auto 1fr auto 1fr; column-gap: 8px; }
.rbs-root .rbs-screen--result.is-tight .rbs-key-dodge-dt { grid-column: 1; }
.rbs-root .rbs-screen--result.is-tight .rbs-key-dodge-dd { grid-column: 2 / 5; }

@media (prefers-reduced-motion: reduce) {
  .rbs-root .rbs-hp-bar .rbs-bar-ghost { transition: none; }
  .rbs-root .rbs-btn--main:active, .rbs-root .rbs-btn--sub:active, .rbs-root .rbs-up-buy:active, .rbs-root .rbs-pad-btn.is-pressed { transform: none; }
  .rbs-root .rbs-up-card.is-flash { animation: none; }
}

/* レア素材（2026-10-07 追加）: 資材の右に少し小さく */
.rbs-root .rbs-up-rare { margin-left: 12px; font-size: 15px; }
.rbs-root .rbs-up-rare b { font-size: 20px; }
/* ステージの星（2026-10-08） */
.rbs-root .rbs-st-stars { color: #D9A400; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.rbs-root .rbs-stars { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 13px; }
.rbs-root .rbs-stars-big { color: #D9A400; font-size: 22px; letter-spacing: 2px; }
.rbs-root .rbs-star-cond { color: #888888; white-space: nowrap; }
.rbs-root .rbs-star-cond.is-ok { color: #111111; font-weight: bold; }
.rbs-root .rbs-star-bonus { color: #1E6FD9; font-weight: bold; white-space: nowrap; }
.rbs-root .rbs-up-pct { margin-left: 12px; font-size: 15px; }
.rbs-root .rbs-up-pct b { font-size: 20px; }
/* スマホ幅: 資材・レア素材・ツリー%が並んでも「強化」が折り返さないように */
.rbs-root .rbs-up-title { white-space: nowrap; flex: none; }
@media (max-width: 480px) {
  .rbs-root .rbs-up-rare, .rbs-root .rbs-up-pct { margin-left: 8px; font-size: 12px; }
  .rbs-root .rbs-up-rare b, .rbs-root .rbs-up-pct b { font-size: 16px; }
  .rbs-root .rbs-up-mat { font-size: 13px; }
  .rbs-root .rbs-up-mat b { font-size: 18px; }
}
/* 挑戦ステージ（2026-10-08）: ほかのステージと区別できるよう太い枠 */
.rbs-root .rbs-st-challenge { border-width: 3px; border-color: #D9A400; }
/* 開戦時に持っている最終強化（2026-10-08） */
.rbs-root .rbs-intro-finals { display: block; margin-top: 4px; color: #B88A00; font-weight: bold; font-size: 13px; white-space: normal; }
/* 結果画面: 負けたときはボタンが3つ（強化する・ステージへ・再戦）。スマホ幅では文字を少し小さく（2026-10-08） */
@media (max-width: 480px) {
  .rbs-root .rbs-result-actions { gap: 8px; }
  .rbs-root .rbs-result-actions > .rbs-btn { font-size: 16px; padding: 0 4px; }
}

/* ===== 2026-10-08 デザイン 案A「艦橋の計器風」: 白黒に金のふち・角の鋲・黒い見出しの帯 ===== */
/* 計器板: 黒い枠の内側に金の細い線、四隅に鋲 */
.rbs-root .rbs-pause-box, .rbs-root .rbs-up-card, .rbs-root .rbs-hint, .rbs-root .rbs-st-list {
  border: 2px solid var(--rbs-line); border-radius: 6px;
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4.5px var(--rbs-gold);
  background-color: #FFFFFF;
  background-image:
    radial-gradient(circle at 9px 9px, #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) 9px, #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at 9px calc(100% - 9px), #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #111111 1.6px, transparent 2.2px);
}
/* ボタン: 角を少し丸めた札。主ボタンは黒地に金のふち */
.rbs-root .rbs-btn--main, .rbs-root .rbs-btn--sub { border-radius: 6px; }
.rbs-root .rbs-btn--main { border-color: var(--rbs-gold); box-shadow: inset 0 0 0 2px var(--rbs-ink), inset 0 0 0 3px rgba(217, 164, 0, 0.45); }
.rbs-root .rbs-up-buy:not(:disabled) { border-color: var(--rbs-gold); border-radius: 6px; }
/* 見出し: タイトルとステージ名の下に金の線 */
.rbs-root .rbs-title { letter-spacing: 0.08em; }
.rbs-root .rbs-title::after, .rbs-root .rbs-result-heading::after {
  content: ""; display: block; width: 60%; max-width: 220px; height: 3px; margin: 6px auto 0; background: var(--rbs-gold);
}
/* ステージ選択: 黒い見出しの帯 */
.rbs-root .rbs-st-head { padding: 6px 8px; border-radius: 6px; background: var(--rbs-ink); color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root .rbs-st-head .rbs-st-count { color: #DDDDDD; }
.rbs-root .rbs-st-sea { border-color: #FFFFFF; background: var(--rbs-ink); color: #FFFFFF; }
.rbs-root .rbs-st-sea:disabled { border-color: #666666; color: #666666; }
.rbs-root .rbs-st-btn { border-radius: 6px; }
.rbs-root .rbs-st-btn.is-current { border: 3px solid var(--rbs-gold); background: #FFF8E1; }
.rbs-root .rbs-st-btn.is-boss:not(.is-locked) { border-width: 3px; }
.rbs-root .rbs-st-btn.is-boss .rbs-st-num { color: var(--rbs-ink); font-weight: bold; }
.rbs-root .rbs-st-mark.is-next { background: var(--rbs-gold); color: var(--rbs-ink); }
.rbs-root .rbs-st-challenge { border-radius: 6px; }
/* 一時停止・強化の札: 黒い見出しの帯 */
.rbs-root .rbs-pause-title { margin: -16px -16px 4px; padding: 8px; border-radius: 4px 4px 0 0; background: var(--rbs-ink); color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root.rbs-wide-short .rbs-pause-title { margin: -10px -16px 2px; padding: 4px; }
.rbs-root .rbs-hint { border-left-width: 8px; }
.rbs-root .rbs-up-card-head { margin: -10px -12px 6px; padding: 6px 12px; border-radius: 4px 4px 0 0; background: var(--rbs-ink); color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root .rbs-up-card-head .rbs-up-lv { color: #F5D76E; }
.rbs-root.rbs-narrow-compact .rbs-up-card-head, .rbs-root.rbs-wide-short .rbs-up-card-head { margin: -8px -10px 4px; padding: 4px 10px; }
/* 戦闘中の上の表示: 白い計器板。下に黒い線と金の線 */
.rbs-root .rbs-hud { background: #FFFFFF; border-bottom: 2px solid var(--rbs-line); box-shadow: inset 0 -4px 0 #FFFFFF, inset 0 -5.5px 0 var(--rbs-gold); }
.rbs-root .rbs-unit--enemy .rbs-hp-bar .rbs-bar-fill { background: var(--rbs-enemy-hull); }
.rbs-root .rbs-reload-bar .rbs-bar-fill, .rbs-root .rbs-reload-row .rbs-reload-bar .rbs-bar-fill { background: var(--rbs-gold); }
.rbs-root .rbs-hud-angle { align-items: center; }
.rbs-root .rbs-dial { flex: none; width: 38px; height: 38px; }
.rbs-root .rbs-dial-needle { transition: transform 0.08s linear; }
.rbs-root.rbs-narrow .rbs-dial { width: 32px; height: 32px; }
.rbs-root.rbs-narrow-compact .rbs-dial { width: 28px; height: 28px; }
.rbs-root.rbs-wide-short .rbs-dial { width: 30px; height: 30px; }
.rbs-root.rbs-wide-short .rbs-hud-angle-label { display: none; }
.rbs-root .rbs-pause-btn { border-radius: 6px; }
.rbs-root .rbs-fire-btn:not([aria-disabled="true"]) { border-color: var(--rbs-gold); }
/* ステージの札は計器板の中に並べる */
.rbs-root .rbs-st-list { margin: 8px 0; padding: 14px 16px; }
.rbs-root.rbs-wide-short .rbs-st-list, .rbs-root.rbs-narrow-compact .rbs-st-list { margin: 4px 0; padding: 8px 12px; }

/* 強化ツリー: 4つの系統の「進化」と「究極最終技」（次のアップデートで追加。2026-10-08） */
.rbs-root .rbs-up-line.is-soon { stroke: var(--rbs-gold); stroke-width: 2; stroke-dasharray: 3 5; }
.rbs-root .rbs-tn--soon { flex-direction: column; border: 2px dashed var(--rbs-gold); background: #FFF8E1; color: var(--rbs-gold-dark); }
.rbs-root .rbs-tn--soon .rbs-tn-name { font-size: 12px; line-height: 1.2; }
.rbs-root .rbs-tn--soon[data-rbs-node="soon:ultimate"] { border: 3px solid var(--rbs-gold); box-shadow: 0 0 0 3px #FFF8E1, 0 0 0 5px rgba(217, 164, 0, 0.45); }
.rbs-root .rbs-tn-soon {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 5px; border-radius: 999px;
  background: var(--rbs-gold); color: var(--rbs-ink); font-size: 10px; font-weight: bold; line-height: 16px; white-space: nowrap;
}
.rbs-root .rbs-up-buy[data-rbs-state="soon"] { border: 2px dashed var(--rbs-gold); background: #FFF8E1; color: var(--rbs-gold-dark); }

/* ===== ストーリー（2026-10-08）: タイトルのあらすじ・海域の話の札・海域クリアの話 ===== */
.rbs-root .rbs-start-story { order: 1; margin: 6px auto 0; max-width: 30em; font-size: 14px; color: var(--rbs-sub); text-align: center; }
.rbs-root .rbs-screen--start.is-tight .rbs-start-story { display: none; }
.rbs-root .rbs-story {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(255, 255, 255, 0.88);
}
.rbs-root .rbs-story[hidden] { display: none; }
.rbs-root .rbs-story-box {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 2px solid var(--rbs-line); border-radius: 6px;
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4.5px var(--rbs-gold);
  background-color: #FFFFFF;
  background-image:
    radial-gradient(circle at 9px 9px, #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) 9px, #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at 9px calc(100% - 9px), #111111 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #111111 1.6px, transparent 2.2px);
  animation: rbs-pop-in 0.35s ease-out both;
}
.rbs-root .rbs-story-title { margin: -16px -16px 4px; padding: 8px; border-radius: 4px 4px 0 0; background: var(--rbs-ink); color: #FFFFFF; font-size: 20px; text-align: center; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root .rbs-story-text { margin: 4px 4px 6px; font-size: 18px; line-height: 1.7; }
.rbs-root .rbs-story-box .rbs-btn { max-width: none; margin: 0; }
.rbs-root.rbs-wide-short .rbs-story-box { gap: 6px; padding: 10px 16px; }
.rbs-root.rbs-wide-short .rbs-story-title { margin: -10px -16px 2px; padding: 4px; font-size: 17px; }
.rbs-root.rbs-wide-short .rbs-story-text { font-size: 15px; line-height: 1.5; margin: 2px; }
.rbs-root.rbs-wide-short .rbs-story-box .rbs-btn { min-height: 48px; font-size: 17px; }
.rbs-root .rbs-result-story { margin: 0 0 6px; font-size: 15px; line-height: 1.5; text-align: center; color: var(--rbs-ink); }
.rbs-root.rbs-wide-short .rbs-result-story { font-size: 13px; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .rbs-root .rbs-story-box { animation: none; } }

/* ===== 2026-10-08 アニメーション（画面の切り替え・結果・強化の瞬間）。動きを減らす設定では止める ===== */
@keyframes rbs-screen-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rbs-pop-in { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rbs-node-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes rbs-ring { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes rbs-shine { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 0, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(217, 164, 0, 0); } }
.rbs-root .rbs-screen.is-active:not(.rbs-screen--battle) { animation: rbs-screen-in 0.18s ease-out; }
.rbs-root .rbs-result-heading { animation: rbs-pop-in 0.45s ease-out both; }
.rbs-root .rbs-stars-big { display: inline-block; animation: rbs-pop-in 0.5s ease-out 0.25s both; }
.rbs-root .rbs-result-sea { animation: rbs-shine 1s ease-out 0.3s 2; }
.rbs-root .rbs-tn.is-pop { animation: rbs-node-pop 0.4s ease-out; }
.rbs-root .rbs-tn.is-pop::after {
  content: ""; position: absolute; inset: -4px; border: 3px solid var(--rbs-gold); border-radius: inherit;
  animation: rbs-ring 0.6s ease-out forwards; pointer-events: none;
}
.rbs-root .rbs-intro-main { animation: rbs-pop-in 0.4s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .rbs-root .rbs-screen.is-active, .rbs-root .rbs-result-heading, .rbs-root .rbs-stars-big, .rbs-root .rbs-result-sea,
  .rbs-root .rbs-tn.is-pop, .rbs-root .rbs-tn.is-pop::after, .rbs-root .rbs-intro-main { animation: none; }
}

/* ===== 2026-10-09 収まりのテストで見つかった小さい画面の直し ===== */
/* ステージ一覧: 縦に入りきらないとき、上の札が切れて戻れなかった（中央寄せのあふれ）。上から並べ、余白は上下に均等 */
.rbs-root .rbs-st-list { justify-content: flex-start; touch-action: pan-y; }   /* 指で一覧の中だけ動かせる */
.rbs-root .rbs-st-list > :first-child { margin-top: auto; }
.rbs-root .rbs-st-list > :last-child { margin-bottom: auto; }
/* 負けたときの3つのボタン: 狭い画面では「ステージへ」が枠からはみ出していた */
.rbs-root.rbs-narrow-compact .rbs-result-actions > .rbs-btn,
.rbs-root.rbs-wide-short .rbs-result-actions > .rbs-btn { padding: 0 2px; font-size: 15px; letter-spacing: -0.02em; }
.rbs-root.rbs-narrow-compact .rbs-result-actions,
.rbs-root.rbs-wide-short .rbs-result-actions { gap: 6px; }

/* 2026-10-09 スマホ（指で操作する画面）では、パソコンのキーの表示（A・D・W・S・Space・Esc・P、遊び方の（A・D）など）を出さない */
@media (hover: none) and (pointer: coarse) {
  .rbs-root .rbs-pad-key, .rbs-root .rbs-pause-key, .rbs-root .rbs-keyhint { display: none; }
  .rbs-root .rbs-pause-btn { padding-top: 0; }   /* キーの表示を消した分、文字を真ん中に */
}

/* 2026-10-09 横長の低い画面（スマホ横持ち）のスタート: タイトルの金の線と、あらすじを左にそろえる。右側は艦の絵とボタンを縦の真ん中に */
.rbs-root.rbs-wide-short .rbs-title::after { margin-left: 0; }
.rbs-root.rbs-wide-short .rbs-start-story { margin: 4px 0 0; text-align: left; max-width: none; }
.rbs-root.rbs-wide-short .rbs-start-side { justify-content: center; }
.rbs-root.rbs-wide-short.rbs-low .rbs-start-ships { display: flex; margin: 0 0 12px; }
.rbs-root.rbs-wide-short.rbs-low .rbs-preview { max-width: 42%; max-height: 64px; width: auto; }

/* ふつう／ハードの切り替え（2026-10-09） */
.rbs-root .rbs-st-mode { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
.rbs-root .rbs-st-mode-btn { min-height: 40px; padding: 0 16px; border: 2px solid var(--rbs-line); border-radius: 20px; background: #FFFFFF; color: var(--rbs-ink); font: inherit; font-weight: bold; font-size: 16px; cursor: pointer; }
.rbs-root .rbs-st-mode-btn[aria-pressed="true"] { background: var(--rbs-ink); color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root .rbs-st-mode-hard[aria-pressed="true"] { background: #8B1A1A; border-color: #8B1A1A; box-shadow: inset 0 -3px 0 var(--rbs-gold); }
.rbs-root .rbs-st-mode-btn:disabled { border-style: dashed; color: var(--rbs-sub); background: #F2F2F2; cursor: default; }
.rbs-root .rbs-st-mode-note { font-size: 14px; color: var(--rbs-sub); }
.rbs-root .rbs-screen--stages.is-hard .rbs-st-head { background: #8B1A1A; }
.rbs-root .rbs-screen--stages.is-hard .rbs-st-mode-note { color: #8B1A1A; font-weight: bold; }
.rbs-root .rbs-st-mark.is-hard { background: #8B1A1A; color: #FFFFFF; border-color: #8B1A1A; }

/* 2026-10-09 スマホ横持ち（横長の低い画面）のステージ選択: 2列に並べて、スクロールしなくても全部見えるように */
.rbs-root.rbs-wide-short .rbs-st-list { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 6px 8px; }
.rbs-root.rbs-wide-short .rbs-st-list > :first-child, .rbs-root.rbs-wide-short .rbs-st-list > :last-child { margin-top: 0; margin-bottom: 0; }
.rbs-root.rbs-wide-short .rbs-st-list > .rbs-st-note { grid-column: 1 / -1; }
.rbs-root.rbs-wide-short .rbs-st-btn { min-height: 44px; }
.rbs-root.rbs-wide-short .rbs-st-mode { margin-top: 4px; }
.rbs-root.rbs-wide-short .rbs-st-mode-btn { min-height: 36px; }
.rbs-root.rbs-wide-short .rbs-screen--stages { max-width: 860px; }
.rbs-root.rbs-wide-short .rbs-st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rbs-root.rbs-wide-short .rbs-st-btn { padding: 4px 10px; gap: 6px; min-width: 0; }
.rbs-root.rbs-wide-short .rbs-st-name { font-size: 17px; }
.rbs-root.rbs-wide-short .rbs-st-num { font-size: 13px; }
.rbs-root.rbs-wide-short .rbs-st-stars { font-size: 12px; letter-spacing: 0; }
.rbs-root.rbs-wide-short .rbs-st-mark { font-size: 12px; padding: 2px 6px; }

/* ===== ホーム画面 案A「目覚め」（2026-10-11 てつさん決定。design/home/home-sekaikan-A.png） =====
 * C（スマホ横持ち）だけ: 背景に海と自艦・黒鉄艦隊（ui.js の drawStartScene）。左上にタイトルとあらすじ、説明3行は海の上。
 * 右カラムは上につづき表示、下に「いまの海域」の札・強化する・出撃！
 */
.rbs-root .rbs-start-scene,
.rbs-root .rbs-start-sea { display: none; }
.rbs-root.rbs-wide-short .rbs-start-scene { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rbs-root.rbs-wide-short .rbs-start-main,
.rbs-root.rbs-wide-short .rbs-start-side { position: relative; z-index: 1; }
.rbs-root.rbs-wide-short .rbs-start-main { flex-basis: 62%; justify-content: flex-start; }
.rbs-root.rbs-wide-short .rbs-title { font-size: 30px; line-height: 1.2; letter-spacing: 0.08em; }
.rbs-root.rbs-wide-short.rbs-tight .rbs-title { font-size: 26px; }
.rbs-root.rbs-wide-short .rbs-title::after { width: 240px; max-width: 70%; }
.rbs-root.rbs-wide-short .rbs-start-story { margin-top: 8px; line-height: 1.5; }
/* 説明3行は左カラムの下（海の上）。自艦の絵はあらすじと説明の間 */
.rbs-root.rbs-wide-short .rbs-howto { margin-top: auto; }
.rbs-root.rbs-wide-short .rbs-howto li { border-bottom-color: #CCCCCC; }
.rbs-root.rbs-wide-short .rbs-howto li:last-child { border-bottom: none; }
.rbs-root.rbs-wide-short .rbs-start-ships,
.rbs-root.rbs-wide-short.rbs-low .rbs-start-ships { display: none; }
/* 右カラム: つづき表示は上、残りは下に寄せる */
.rbs-root.rbs-wide-short .rbs-start-side { justify-content: flex-end; }
.rbs-root.rbs-wide-short .rbs-start-save {
  align-self: flex-end; justify-content: flex-end; margin: 0 0 auto; padding: 3px 12px;
  border: 1.5px solid var(--rbs-line); border-radius: 999px; background: #FFFFFF;
}
.rbs-root.rbs-wide-short .rbs-start-save-item b { color: var(--rbs-ink); }
.rbs-root.rbs-wide-short .rbs-start-notice { margin: 0 0 8px; }
/* いまの海域の札: 黒い枠・内側に金の線・四隅の鋲 */
.rbs-root.rbs-wide-short .rbs-start-sea:not([hidden]) {
  display: flex; flex-direction: column; flex: none; margin: 10px 0 10px; padding: 8px 14px 9px;
  border: 2px solid var(--rbs-line); border-radius: 6px; background-color: #FFFFFF;
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4.5px var(--rbs-gold);
  background-image: radial-gradient(circle, var(--rbs-ink) 2px, transparent 2.5px), radial-gradient(circle, var(--rbs-ink) 2px, transparent 2.5px),
    radial-gradient(circle, var(--rbs-ink) 2px, transparent 2.5px), radial-gradient(circle, var(--rbs-ink) 2px, transparent 2.5px);
  background-size: 10px 10px; background-repeat: no-repeat;
  background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px);
  line-height: 1.35; text-align: left;
}
.rbs-root .rbs-start-sea-label { color: var(--rbs-sub); font-size: 14px; }
.rbs-root .rbs-start-sea-name { font-size: 18px; }
.rbs-root .rbs-start-sea-next { font-size: 14px; }
.rbs-root.rbs-wide-short .rbs-start-actions > .rbs-start-btn { min-height: 56px; font-size: 22px; letter-spacing: 0.1em; }
.rbs-root.rbs-wide-short .rbs-start-actions.is-pair > .rbs-start-btn { min-height: 56px; font-size: 22px; }
.rbs-root .rbs-start-story > span { display: inline-block; }
.rbs-root.rbs-wide-short .rbs-start-save { order: 1; }
.rbs-root.rbs-wide-short .rbs-start-sea { order: 4; }
/* 見出し 案2「黒い帯」（2026-10-11 ユーザー「もっと見出し感が欲しい」→ 3案から決定）: 黒い札に白抜きの文字、下に金の線。ステージ選択の見出しの帯と同じ作り */
.rbs-root.rbs-wide-short .rbs-title {
  align-self: flex-start; font-size: 34px; font-weight: 900; letter-spacing: 0.12em; line-height: 1.2;
  padding: 4px 22px 8px; border-radius: 6px; background: var(--rbs-ink); color: #FFFFFF; z-index: 1;
  box-shadow: inset 0 -5px 0 var(--rbs-gold), inset 0 0 0 2px var(--rbs-ink), inset 0 0 0 3.5px rgba(217, 164, 0, 0.55);
}
.rbs-root.rbs-wide-short.rbs-tight .rbs-title { font-size: 30px; }
.rbs-root.rbs-wide-short .rbs-title::after { display: none; }
/* 見出しの帯に、ときどき金の光が走る（2026-10-11 ホームのアニメーション。「動きを減らす」設定では出さない） */
@media (prefers-reduced-motion: no-preference) {
  .rbs-root.rbs-wide-short .rbs-screen--start.is-active .rbs-title {
    background-image: linear-gradient(105deg, transparent 44%, rgba(255, 214, 102, 0.42) 50%, transparent 56%);
    background-size: 300% 100%; background-repeat: no-repeat; background-position: 150% 0;
    animation: rbs-title-shine 5s ease-in-out 1s infinite;
  }
  @keyframes rbs-title-shine { 0% { background-position: 150% 0; } 30%, 100% { background-position: -50% 0; } }
}
@media (min-height: 400px) {
  .rbs-root.rbs-wide-short:not(.rbs-scaled) .rbs-title { font-size: 36px; }
  .rbs-root.rbs-wide-short:not(.rbs-scaled) .rbs-start-story { font-size: 15px; }
}

/* ===== 最終強化を取った瞬間の演出（2026-10-11 案C。ui.js の showFinalGet） ===== */
.rbs-root .rbs-fin { position: absolute; inset: 0; z-index: 60; overflow: hidden; cursor: pointer; animation: rbs-screen-in 0.2s ease-out; }
.rbs-root .rbs-fin.is-out { opacity: 0; transition: opacity 0.25s ease-in; }
.rbs-root .rbs-fin-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.rbs-root .rbs-fin-band {
  position: absolute; left: 0; right: 0; top: 60%; padding: 10px 16px 12px; background: var(--rbs-ink); color: #FFFFFF; z-index: 1;
  border-bottom: 4px solid var(--rbs-gold); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  animation: rbs-fin-band 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.3s both;
}
.rbs-root .rbs-fin-kicker { color: var(--rbs-gold); font-size: 14px; font-weight: 700; letter-spacing: 0.3em; }
.rbs-root .rbs-fin-name { font-size: clamp(28px, 7vmin, 52px); font-weight: 900; letter-spacing: 0.12em; line-height: 1.15; animation: rbs-pop-in 0.45s ease-out 0.5s both; }
.rbs-root .rbs-fin-desc { font-size: 14px; color: #E6E6E6; animation: rbs-screen-in 0.4s ease-out 0.85s both; }
.rbs-root .rbs-fin-tap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; color: var(--rbs-sub); animation: rbs-screen-in 0.4s ease-out 1.2s both; }
@keyframes rbs-fin-band { from { transform: scaleX(0.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rbs-root .rbs-fin, .rbs-root .rbs-fin-band, .rbs-root .rbs-fin-name, .rbs-root .rbs-fin-desc, .rbs-root .rbs-fin-tap { animation: none; }
}

/* ===== ツリーの地図の拡大・縮小（2026-10-11。ui.js の setMapZoom） ===== */
.rbs-root .rbs-up-lines, .rbs-root .rbs-up-nodes { transform-origin: 0 0; }
.rbs-root .rbs-up-zoom { flex: none; display: inline-flex; gap: 6px; margin-left: auto; align-self: center; }
.rbs-root .rbs-up-zoom-btn {
  position: relative; width: 34px; height: 30px; margin: 0; padding: 0; font: inherit; font-size: 20px; font-weight: bold; line-height: 1;
  color: var(--rbs-ink); background: var(--rbs-bg); border: 2px solid var(--rbs-line); border-radius: 8px; cursor: pointer;
}
.rbs-root .rbs-up-zoom-btn::before { content: ""; position: absolute; inset: -8px -4px; }   /* 押せる範囲は見た目より広く */
.rbs-root .rbs-up-zoom-btn:disabled { color: var(--rbs-weak); border-color: var(--rbs-weak); border-style: dashed; cursor: default; }

/* ===== 言語の切り替え（2026-10-11 英語対応）: スタート画面の右の列のいちばん上に小さな札 ===== */
.rbs-root .rbs-lang-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; min-width: 72px; min-height: 36px; padding: 0 10px;
  border: 2px solid var(--rbs-line); border-radius: 6px; background: #FFFFFF; color: var(--rbs-ink);
  font-size: 14px; font-weight: bold; line-height: 1;
}
.rbs-root .rbs-lang-btn:active { transform: translateY(1px); }
/* 英語: ツリーの札は単語の途中で切らず、少し小さい文字に */
.rbs-root.rbs-lang-en .rbs-tn { font-size: 10px; line-height: 1.1; }
.rbs-root.rbs-lang-en .rbs-tn--root { font-size: 11px; }
.rbs-root.rbs-lang-en .rbs-tn--hub { font-size: 12px; }
.rbs-root.rbs-lang-en .rbs-tn--final, .rbs-root.rbs-lang-en .rbs-tn--soon { font-size: 10px; }
.rbs-root.rbs-lang-en .rbs-tn-name { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.rbs-root.rbs-lang-en .rbs-tn--soon .rbs-tn-name { font-size: 10px; line-height: 1.1; }
.rbs-root.rbs-lang-en .rbs-tn.is-unknown { font-size: 18px; }
/* 英語: ホームの見出し「Ancient Warship Arca」は長いので、字間を詰めて少し小さく（なるべく1行） */
.rbs-root.rbs-lang-en .rbs-title { letter-spacing: 0.03em; }
.rbs-root.rbs-lang-en.rbs-wide-short.rbs-wide-short .rbs-title { font-size: 26px; letter-spacing: 0.04em; padding-left: 16px; padding-right: 16px; }
/* 横長・低背（スマホ横持ち・パソコンのホーム）: 右の列のいちばん上に並べる（つづき表示と重ならないように） */
.rbs-root.rbs-wide-short .rbs-lang-btn { position: relative; top: auto; right: auto; flex: none; order: 0; align-self: flex-end; margin: 0 0 auto; }
/* 収まらないとき（JS が is-tight・is-tighter を付ける）: 札を小さく、それでも入らなければ隠す（ほかの画面サイズでは出る） */
.rbs-root.rbs-wide-short .rbs-screen--start.is-tight .rbs-lang-btn { min-height: 28px; min-width: 60px; font-size: 14px; padding-left: 6px; padding-right: 6px; }
.rbs-root.rbs-wide-short .rbs-screen--start.is-tighter .rbs-lang-btn { display: none; }

/* 初めての第1戦の操作ガイド（2026-10-12）: 押すボタンの真上の吹き出し。位置は ui.js setGuide が決める */
.rbs-root .rbs-guide {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--rbs-ink); color: #FFE07A; border: 2px solid var(--rbs-gold); border-radius: 10px;
  box-shadow: 0 3px 0 var(--rbs-gold); padding: 7px 14px; font-size: 17px; font-weight: bold; white-space: nowrap;
  animation: rbs-guide-bob 1.1s ease-in-out infinite;
}
.rbs-root .rbs-guide[hidden] { display: none; }
.rbs-root .rbs-guide-arrow {
  position: absolute; top: 100%; left: var(--rbs-guide-arrow-x, 50%); transform: translate(-50%, 2px);
  color: var(--rbs-gold); font-size: 22px; line-height: 1;
}
.rbs-root .rbs-pad-btn.is-guided { box-shadow: 0 0 0 4px #FFE07A, 0 0 16px 6px rgba(217, 164, 0, 0.7); }
@keyframes rbs-guide-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rbs-root .rbs-guide { animation: none; } }

/* 世界観の一言（2026-10-12）: 画面の上の方に1行。タップで消える。位置は画面の上から 22% */
.rbs-root .rbs-line {
  position: absolute; z-index: 40; left: 50%; top: 22%; transform: translateX(-50%);
  max-width: calc(100% - 32px); box-sizing: border-box; cursor: pointer;
  background: rgba(17, 17, 17, 0.88); color: #FFE07A; border-top: 2px solid var(--rbs-gold); border-bottom: 2px solid var(--rbs-gold);
  padding: 8px 18px; font-size: 16px; font-weight: bold; text-align: center; line-height: 1.4; letter-spacing: 0.04em;
}
.rbs-root .rbs-line[hidden] { display: none; }
.rbs-root .rbs-line.is-on { animation: rbs-line-in 0.5s ease-out both; }
@keyframes rbs-line-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rbs-root.rbs-narrow .rbs-line { font-size: 14px; padding: 6px 12px; }
.rbs-root.rbs-wide-short .rbs-line { top: 13%; font-size: 13px; padding: 4px 12px; line-height: 1.3; }   /* 低い横画面: 「戦闘開始！」の枠にかからないよう上へ */
@media (prefers-reduced-motion: reduce) { .rbs-root .rbs-line.is-on { animation: none; } }

/* ホームに戻るボタン（2026-10-12）: 結果・強化の画面の左上 */
.rbs-root .rbs-home-btn {
  position: absolute; z-index: 20; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px;
  background: #fff; color: var(--rbs-ink); border: 2px solid var(--rbs-ink); border-radius: 8px;
  font: inherit; font-size: 15px; font-weight: bold; cursor: pointer;
}
.rbs-root .rbs-home-btn[hidden] { display: none; }
.rbs-root .rbs-home-btn:disabled { color: var(--rbs-weak); border-color: var(--rbs-weak); cursor: default; }
.rbs-root .rbs-home-btn .rbs-icon { width: 20px; height: 20px; }
.rbs-root .rbs-home-btn::before { content: ""; position: absolute; inset: -6px; }   /* 押せる範囲は見た目より広く */
.rbs-root .rbs-up-head { padding-left: 104px; }   /* 強化の画面: 左上のホームボタンの分だけ見出しを右へ */
.rbs-root.rbs-wide-short .rbs-home-btn { top: 6px; left: 6px; min-height: 34px; }
/* 狭い・低い画面の強化画面: 見出しと ＋− が収まるよう、ホームは家の絵だけ（読み上げは「ホームにもどる」） */
.rbs-root.rbs-wide-short .rbs-screen--upgrade .rbs-home-btn,
.rbs-root.rbs-narrow .rbs-screen--upgrade .rbs-home-btn { min-width: 40px; min-height: 36px; padding: 0 8px; justify-content: center; }
.rbs-root.rbs-wide-short .rbs-screen--upgrade .rbs-home-text,
.rbs-root.rbs-narrow .rbs-screen--upgrade .rbs-home-text { display: none; }
.rbs-root.rbs-wide-short .rbs-up-head,
.rbs-root.rbs-narrow .rbs-up-head { padding-left: 52px; }

/* 最初から（2026-10-12）: ホームの左上に小さく（間違えて押さないよう控えめに）。押すと確認 */
/* 2026-10-14: その場所は「設定」に。縦持ちのホームでは左上、横長のホームでは右下（homeUx.css） */
.rbs-root .rbs-settings-btn {
  position: absolute; top: 8px; left: 8px; z-index: 3; margin: 0; min-height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--rbs-line); border-radius: 6px; background: #FFFFFF; color: var(--rbs-ink);
  font: inherit; font-size: 14px; font-weight: bold; line-height: 1; cursor: pointer;
}
.rbs-root .rbs-settings-btn .rbs-icon { width: 18px; height: 18px; flex: none; }
/* 設定の窓 */
.rbs-root .rbs-set-box { max-width: 420px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; text-align: left; border-radius: 0; box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px var(--rbs-gold); }
.rbs-root .rbs-set-box .rbs-confirm-title { margin: 0 0 2px; text-align: center; }
.rbs-root .rbs-set-row { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 8px; }
.rbs-root .rbs-set-label { font-size: 15px; font-weight: bold; }
.rbs-root .rbs-set-seg { display: flex; border: 1.5px solid var(--rbs-ink); }
.rbs-root .rbs-set-seg > button { flex: 1 1 0; min-width: 0; min-height: 40px; margin: 0; padding: 0 4px; border: 0; border-left: 1px solid var(--rbs-line); background: #FFFFFF; color: var(--rbs-ink); font: inherit; font-size: 15px; font-weight: bold; cursor: pointer; }
.rbs-root .rbs-set-seg > button:first-child { border-left: 0; }
.rbs-root .rbs-set-seg > button.is-on { background: var(--rbs-ink); color: #F2C744; }
.rbs-root .rbs-set-seg > button:focus-visible, .rbs-root .rbs-set-restart:focus-visible { outline: 2px solid #F2C744; outline-offset: 2px; position: relative; z-index: 1; }
.rbs-root .rbs-set-restart { align-self: flex-end; margin: 0; min-height: 34px; padding: 0 8px; border: 0; background: none; color: #B3261E; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rbs-root .rbs-set-close { margin: 0; min-height: 44px; font-size: 16px; }
.rbs-root.rbs-wide-short .rbs-set-box { padding: 12px 16px; gap: 8px; }
.rbs-root.rbs-wide-short .rbs-set-seg > button { min-height: 38px; }
.rbs-root .rbs-confirm { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); padding: 16px; }
.rbs-root .rbs-confirm-box { width: 100%; max-width: 400px; background: #FFFFFF; border: 2px solid var(--rbs-ink); border-radius: 10px; padding: 16px; text-align: center; }
.rbs-root .rbs-confirm-title { margin: 0 0 8px; font-size: 20px; font-weight: bold; }
.rbs-root .rbs-confirm-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--rbs-sub); text-align: left; }
.rbs-root .rbs-confirm-actions { display: flex; gap: 10px; }
.rbs-root .rbs-confirm-actions > .rbs-btn { flex: 1 1 0; min-width: 0; margin: 0; min-height: 46px; font-size: 16px; }
.rbs-root .rbs-confirm-yes { border-color: #B3261E; color: #B3261E; }
/* とても狭い画面（320px 前後）の強化画面: ホームの分だけ見出しの間隔を詰める */
.rbs-root.rbs-narrow-compact .rbs-up-head { gap: 6px; padding-left: 46px; }
.rbs-root.rbs-narrow-compact .rbs-screen--upgrade .rbs-home-btn { min-width: 36px; padding: 0 6px; }

/* 矢印キー・Tab で選んでいるボタン（2026-10-12）: 金の枠で分かりやすく */
.rbs-root button:focus-visible, .rbs-root [tabindex="0"]:focus-visible { outline: 3px solid var(--rbs-gold); outline-offset: 2px; }

/* ===== 型5「古代文字の帯」（2026-10-12 てつさん決定。design/style-kit/kit-5） ===== */
/* ===== 型5「古代文字の帯」（2026-10-12 てつさん決定）=====
 * style.css の最後にそのまま貼る。フォントは src/fonts/ に置く（design/style-kit/kit-5/fonts/ の woff2 と OFL-*.txt）。
 * 日本語フォントはゲームで使う文字だけに絞ってある（文字を足したら作り直す: README.md の手順）。
 */
/* 2026-10-12 組み込み: 字の上下の余白（1.45字分）を 1.08字分に詰める。今の行の高さ（1.1〜1.2）に収まり、fit テストのあふれが出ない */
@font-face{font-family:RbsKH;src:url(fonts/KaiseiDecol-Bold.subset.woff2) format('woff2');font-display:swap;ascent-override:88%;descent-override:20%}
@font-face{font-family:RbsKB;src:url(fonts/ZenKakuGothicNew-Medium.subset.woff2) format('woff2');font-display:swap;ascent-override:88%;descent-override:20%;font-weight:400 500}
@font-face{font-family:RbsKB;src:url(fonts/ZenKakuGothicNew-Bold.subset.woff2) format('woff2');font-display:swap;ascent-override:88%;descent-override:20%;font-weight:600 900}
.rbs-root.rbs-root.rbs-root{--g:#D9A400;--gd:#8A6A00;
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12'%3E%3Crect width='56' height='12' fill='%23111'/%3E%3Cg fill='none' stroke='%23D9A400' stroke-width='1.4'%3E%3Cpath d='M3 9.5 L7 2.5 L11 9.5Z'/%3E%3Ccircle cx='18' cy='6' r='3.4'/%3E%3Cpath d='M25 2.5 L33 2.5 L29 9.5Z'/%3E%3Cpath d='M38 2.5V9.5M41.5 2.5V9.5M45 2.5V9.5'/%3E%3C/g%3E%3Ccircle cx='51.5' cy='6' r='1.2' fill='%23D9A400'/%3E%3C/svg%3E");
  --studs: radial-gradient(circle, var(--g) 0 2.6px, transparent 3.2px) left 3px bottom 3px/8px 8px no-repeat, radial-gradient(circle, var(--g) 0 2.6px, transparent 3.2px) right 3px bottom 3px/8px 8px no-repeat;
  font-family: RbsKB, sans-serif; }
.rbs-root.rbs-root.rbs-root .rbs-title, .rbs-root.rbs-root.rbs-root .rbs-result-heading, .rbs-root.rbs-root.rbs-root .rbs-pause-title, .rbs-root.rbs-root.rbs-root .rbs-intro-main, .rbs-root.rbs-root.rbs-root .rbs-line,
.rbs-root.rbs-root.rbs-root .rbs-btn--main, .rbs-root.rbs-root.rbs-root .rbs-btn--sub, .rbs-root.rbs-root.rbs-root .rbs-fire-label, .rbs-root.rbs-root.rbs-root .rbs-unit-name, .rbs-root.rbs-root.rbs-root .rbs-start-sea-name,
.rbs-root.rbs-root.rbs-root .rbs-hint-title, .rbs-root.rbs-root.rbs-root .rbs-home-btn, .rbs-root.rbs-root.rbs-root .rbs-pause-btn, .rbs-root.rbs-root.rbs-root .rbs-lang-btn, .rbs-root.rbs-root.rbs-root .rbs-settings-btn { font-family: RbsKH, serif; font-weight: 700; }
.rbs-root.rbs-root.rbs-root .rbs-hp-num, .rbs-root.rbs-root.rbs-root .rbs-hud-angle-num, .rbs-root.rbs-root.rbs-root .rbs-result-main b, .rbs-root.rbs-root.rbs-root .rbs-start-save b, .rbs-root.rbs-root.rbs-root .rbs-howto li::before { font-family: RbsKB, serif; font-weight: 700; }
/* 見出し: 黒い板の下に古代文字の帯 */
.rbs-root.rbs-root.rbs-root .rbs-title { border-radius: 0; animation: none; background: var(--band) left bottom/56px 12px repeat-x, #111; color: #fff; box-shadow: none; padding: 6px 24px 18px; letter-spacing: 0.12em; }
.rbs-root.rbs-root.rbs-root .rbs-result-heading { letter-spacing: 0.08em; }   /* 文字の大きさは今のまま（狭い画面で小さくなる指定を残す。2026-10-12 組み込み） */
.rbs-root.rbs-root.rbs-root .rbs-result-heading::after { width: 224px; height: 12px; margin: 4px auto 0; background: var(--band) left center/56px 12px repeat-x; }
/* 札: 黒い枠、上の辺が古代文字の帯、下の角に金の鋲 */
.rbs-root.rbs-root.rbs-root .rbs-start-sea:not([hidden]), .rbs-root.rbs-root.rbs-root .rbs-hint, .rbs-root.rbs-root.rbs-root .rbs-pause-box {
  border: 2px solid #111; border-radius: 0; box-shadow: none; background: var(--band) left top/56px 12px repeat-x, var(--studs), #fff; padding-top: 16px; }
.rbs-root.rbs-root.rbs-root .rbs-hint { border-left-width: 2px; }
.rbs-root.rbs-root.rbs-root .rbs-hint-title, .rbs-root.rbs-root.rbs-root .rbs-start-sea-label { color: var(--gd); }
.rbs-root.rbs-root.rbs-root .rbs-start-save { border-radius: 0; border: 2px solid #111; background: var(--studs), #fff; }
/* ボタン: 主＝黒地の下に古代文字の帯、副＝白地に黒枠と金の鋲 */
.rbs-root.rbs-root.rbs-root .rbs-btn--main { border-radius: 0; border: 2px solid #111; background: var(--band) left bottom/56px 12px repeat-x, #111; box-shadow: none; padding-bottom: 10px; letter-spacing: 0.14em; }
.rbs-root.rbs-root.rbs-root .rbs-btn--sub { border-radius: 0; border: 2px solid #111; background: radial-gradient(circle, var(--g) 0 2.6px, transparent 3.2px) left 3px top 3px/8px 8px no-repeat, radial-gradient(circle, var(--g) 0 2.6px, transparent 3.2px) right 3px top 3px/8px 8px no-repeat, var(--studs), #fff; }
.rbs-root.rbs-root.rbs-root .rbs-lang-btn, .rbs-root.rbs-root.rbs-root .rbs-settings-btn, .rbs-root.rbs-root.rbs-root .rbs-home-btn, .rbs-root.rbs-root.rbs-root .rbs-detail-open, .rbs-root.rbs-root.rbs-root .rbs-pause-btn { border-radius: 0; }
.rbs-root.rbs-root.rbs-root .rbs-howto li::before { border-radius: 0; background: #111; color: var(--g); box-shadow: inset 0 -3px 0 var(--g); }
/* 戦闘: 上の計器の下の線を古代文字の帯に（空の真ん中には足さない） */
.rbs-root.rbs-root.rbs-root .rbs-hud { border-bottom: 10px solid transparent; box-shadow: none; background: var(--band) left bottom/46.67px 10px repeat-x border-box, padding-box #fff; }
.rbs-root.rbs-root.rbs-root .rbs-pad-btn { border-radius: 0; background: radial-gradient(circle, var(--g) 0 2.2px, transparent 2.8px) right 2px top 2px/7px 7px no-repeat, #fff; }
.rbs-root.rbs-root.rbs-root .rbs-pad-btn[aria-disabled="true"] { background: var(--rbs-surface); }   /* 押せないボタンは今どおり灰色（2026-10-12 組み込み）*/
.rbs-root.rbs-root.rbs-root .rbs-pad-btn.is-pressed:not([aria-disabled="true"]) { background: var(--rbs-ink); color: #FFFFFF; }   /* 押している間は今どおり黒地に白（2026-10-12 修正: 上の白地が勝って矢印が消えていた）*/
.rbs-root.rbs-root.rbs-root .rbs-fire-btn:not([aria-disabled="true"]) { background: var(--band) left bottom/56px 12px repeat-x, #111; border-color: #111; padding-bottom: 8px; }
.rbs-root.rbs-root.rbs-root .rbs-line { border-radius: 0; background: var(--band) left bottom/56px 12px repeat-x, #111; color: #fff; box-shadow: none; padding-bottom: 14px; }
/* ---- 残りの画面（ステージ選択・強化・一時停止・物語の札） ---- */
.rbs-root.rbs-root.rbs-root .rbs-st-list, .rbs-root.rbs-root.rbs-root .rbs-up-card, .rbs-root.rbs-root.rbs-root .rbs-story-box {
  border: 2px solid #111; border-radius: 0; box-shadow: none; background: var(--band) left top/56px 12px repeat-x, var(--studs), #fff; padding-top: 16px; }
.rbs-root.rbs-root.rbs-root .rbs-st-head, .rbs-root.rbs-root.rbs-root .rbs-pause-title, .rbs-root.rbs-root.rbs-root .rbs-up-card-head { border-radius: 0; box-shadow: none; background: var(--band) left bottom/46.67px 10px repeat-x, #111; padding-bottom: 14px; }
.rbs-root.rbs-root.rbs-root .rbs-up-card { padding-top: 10px; background: var(--studs), #fff; }
.rbs-root.rbs-root.rbs-root .rbs-st-title, .rbs-root.rbs-root.rbs-root .rbs-up-title, .rbs-root.rbs-root.rbs-root .rbs-story-title, .rbs-root.rbs-root.rbs-root .rbs-up-card-head, .rbs-root.rbs-root.rbs-root .rbs-st-mode-btn, .rbs-root.rbs-root.rbs-root .rbs-up-buy { font-family: RbsKH, serif; font-weight: 700; }
.rbs-root.rbs-root.rbs-root .rbs-st-btn, .rbs-root.rbs-root.rbs-root .rbs-st-sea, .rbs-root.rbs-root.rbs-root .rbs-st-challenge, .rbs-root.rbs-root.rbs-root .rbs-up-buy, .rbs-root.rbs-root.rbs-root .rbs-st-mode-btn { border-radius: 0; }
.rbs-root.rbs-root.rbs-root .rbs-st-btn.is-current { border: 3px solid #111; background: radial-gradient(circle, var(--g) 0 2.6px, transparent 3.2px) right 4px top 4px/8px 8px no-repeat, #FFF8E1; }
.rbs-root.rbs-root.rbs-root .rbs-up-buy:not(:disabled) { border-color: #111; background: var(--band) left bottom/46.67px 10px repeat-x, #111; color: #fff; padding-bottom: 8px; }
.rbs-root.rbs-root.rbs-root .rbs-pause-box { padding-top: 16px; }
.rbs-root.rbs-root.rbs-root .rbs-pause-box .rbs-pause-title { margin-top: -16px; }
/* タイトルの帯: ホームの「光が走る」指定（.rbs-screen--start.is-active .rbs-title）より強くする */
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-screen.rbs-screen--start .rbs-title { background: var(--band) left bottom/56px 12px repeat-x, #111; animation: none; }
/* 低い横画面（スマホ横持ち・パソコン）: 計器は高さ44pxで決まっているので、帯の分（8px）だけ高くする */
.rbs-root.rbs-root.rbs-root.rbs-wide-short .rbs-hud { height: 52px; border-bottom-width: 8px; background: var(--band) left bottom/37.33px 8px repeat-x border-box, padding-box #fff; }

/* ===== スキルツリーの見た目 案3「古代の輪」（2026-10-12 てつさん決定。design/skilltree-look） ===== */
/* 案3 古代の輪: 白い盤に大きな古代の輪。取った強化は黒地に金の輪のメダル、道は金の鎖 */
/* 系統の古代文字: 主砲△ 船体○ 機動▽ 特殊兵装Ⅲ 相棒◇ */
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node$=":gun"], .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node^="node:gun."] { --g: "△"; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node$=":hull"], .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node^="node:hull."] { --g: "○"; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node$=":move"], .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node^="node:move."] { --g: "▽"; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node$=":special"], .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node^="node:special."] { --g: "Ⅲ"; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node$=":buddy"], .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[data-rbs-node^="node:buddy."] { --g: "◇"; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn { font-family: RbsKB, sans-serif; z-index: 0; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn-lv { font-family: RbsKH, serif; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--hub .rbs-tn-name, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--root .rbs-tn-name, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final .rbs-tn-name { font-family: RbsKH, serif; }
/* 強化できる印: 青い丸 → 金の鋲に黒の＋ */
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn-dot { background: #D9A400; color: #111; border: 2px solid #111; width: 18px; height: 18px; line-height: 15px; font-weight: 900; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn-star { color: #D9A400; text-shadow: 0 0 2px #111, 0 0 1px #111; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn[aria-pressed="true"] { outline: 3px solid #D9A400; outline-offset: 4px; }

.rbs-root.rbs-root.rbs-root.rbs-root .rbs-up-map { border-radius: 0; border: 2px solid #111; background:
  repeating-radial-gradient(circle at 0% 50%, rgba(217,164,0,0) 0 118px, rgba(217,164,0,.16) 118px 120px, rgba(217,164,0,0) 120px 190px),
  #FFFFFF; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-up-line { stroke: #C8C8C8; stroke-width: 2; stroke-dasharray: 3 4; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-up-line.is-on { stroke: #D9A400; stroke-width: 4; stroke-dasharray: 9 3 2 3; stroke-linecap: butt; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn { background: #fff; border: 2px solid #111; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #111; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn::before { content: var(--g, ""); position: absolute; left: 50%; top: -1px; transform: translate(-50%, -50%); font-size: 10px; line-height: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #8A6A00; border: 1px solid #8A6A00; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-max { background: #111; color: #FFE07A; border-color: #111; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #D9A400; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-max::before { background: #D9A400; color: #111; border-color: #111; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-part { border-color: #111; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #D9A400; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-locked, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-unknown { background: #fff; border: 2px dashed #BDBDBD; box-shadow: none; color: #A8A8A8; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-unknown::before, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn.is-locked::before { display: none; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--root { background: #111; color: #FFE07A; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #D9A400, 0 0 0 8px #fff, 0 0 0 9px #111; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--hub { border-radius: 50%; border-width: 3px; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--hub::before { font-size: 13px; width: 20px; height: 20px; line-height: 20px; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--hub.is-max { background: #fff; color: #111; border-color: #111; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #D9A400, 0 0 0 7px #111; }
/* 最終強化: 紋章の盾 */
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-max, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-unknown { background: none; border: none; box-shadow: none; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final::after { content: ""; position: absolute; inset: -4px -2px -8px; z-index: -1; background: #111;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final { color: #fff; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-max { color: #111; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-max::after { background: linear-gradient(#FFE07A, #D9A400); }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-unknown { color: #A8A8A8; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final.is-unknown::after { background: #EFEFEF; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--final::before { display: none; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn-lv { background: transparent; }

/* ===== ドローンの進化「古代の鳥」の札（2026-10-12 第2版）: 丸い金の太陽のメダル ===== */
.rbs-root .rbs-tn--evolve { border-radius: 50%; border: 3px solid var(--rbs-gold); background: #FFF8E1; color: var(--rbs-gold-dark); font-size: 12px; }
.rbs-root .rbs-tn--evolve.is-unknown, .rbs-root .rbs-tn--evolve.is-locked { border-style: dashed; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--evolve { border-radius: 50%; border: 3px solid #D9A400; background: #FFF8E1; color: #8A6A00; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111; font-family: RbsKH, serif; }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--evolve.is-max { background: radial-gradient(circle, #FFE07A, #D9A400); color: #111; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #D9A400, 0 0 0 7px #111, 0 0 14px 6px rgba(217,164,0,.45); }
.rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--evolve.is-unknown, .rbs-root.rbs-root.rbs-root.rbs-root .rbs-tn--evolve.is-locked { border: 3px dashed #BDBDBD; background: #fff; color: #A8A8A8; box-shadow: none; }
.rbs-root.rbs-lang-en .rbs-tn--evolve { font-size: 10px; }

/* ===== 勝ち負けの絵（2026-10-13 てつさん決定。ui.js の drawResultScene） =====
 * 見出しのまわりに空と海・自艦と敵を敷く。文字の並びは変えない。見出しは黒い札に金の文字 */
.rbs-root .rbs-result-scene { display: none; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.rbs-root .rbs-screen--result.has-scene .rbs-result-head,
.rbs-root .rbs-screen--result.has-scene .rbs-result-body,
.rbs-root .rbs-screen--result.has-scene .rbs-result-actions { position: relative; z-index: 1; }
.rbs-root .rbs-screen--result.has-scene .rbs-result-heading { width: fit-content; margin-left: auto; margin-right: auto; padding: 0 22px; background: var(--rbs-ink); color: #F2C230; border-bottom: 4px solid #D9A400; }
.rbs-root .rbs-screen--result.has-scene .rbs-result-reason,
.rbs-root .rbs-screen--result.has-scene .rbs-result-sea,
.rbs-root .rbs-screen--result.has-scene .rbs-result-story { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0 8px; background: rgba(255, 255, 255, 0.82); color: var(--rbs-ink); }

/* ===== 2026-10-13 版画の見た目（てつさん「全部採用」）: 戦場に紙のざらつきと四隅の影、紙色の操作ボタンと上の帯 ===== */
.rbs-root .rbs-screen--battle > .rbs-field::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0.55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 62%, rgba(40,30,15,0.28) 100%);
  mix-blend-mode: multiply; opacity: .55; }
.rbs-root.rbs-root { --rbs-bg: #F4EEDF; }
.rbs-root.rbs-root .rbs-pad-btn:not(.rbs-pad-fire) { background: #F4EEDF; }
.rbs-root.rbs-root .rbs-screen--battle .rbs-hud { background: #F4EEDF; }

/* ===== 2026-10-14 長押しで発射・装填の残り時間（てつさん「球の補充の時間をわかりやすく」） =====
 * 装填中: 発射ボタンの下から金色が満ちていき、真ん中に「あと何秒」を大きく出す。終わった瞬間に金色に光る。
 * 押せるとき: 「発射」の下に小さく「長押しで連射」。 */
.rbs-root .rbs-fire-btn { flex-direction: column; gap: 0; line-height: 1.1; }
.rbs-root .rbs-fire-left { display: none; font-size: 22px; font-weight: bold; font-variant-numeric: tabular-nums; line-height: 1; }
.rbs-root .rbs-fire-hold { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; letter-spacing: 0; opacity: 0.85; white-space: nowrap; }
.rbs-root .rbs-fire-btn.is-loading .rbs-fire-left { display: block; }
.rbs-root .rbs-fire-btn.is-loading .rbs-fire-label { display: none; }
.rbs-root .rbs-fire-btn.is-loading .rbs-fire-hold { display: none; }
.rbs-root.rbs-root.rbs-root .rbs-fire-btn.is-loading[aria-disabled="true"] {
  background: linear-gradient(to top, #E9C75A var(--rbs-fire-progress, 0%), #F2F2F2 0);
  border: 2px dashed #111; color: #111;
}
.rbs-root .rbs-fire-btn.is-flash { animation: rbs-fire-flash 0.4s ease-out; }
@keyframes rbs-fire-flash {
  0% { box-shadow: 0 0 0 0 rgba(217, 164, 0, 0.95); }
  100% { box-shadow: 0 0 0 12px rgba(217, 164, 0, 0); }
}
.rbs-root.rbs-wide-short .rbs-fire-left { font-size: 20px; }
.rbs-root.rbs-wide-short .rbs-fire-hold { display: none; }   /* 低い横画面ではボタンが小さいので、補足の「長押しで連射」は出さない */
@media (prefers-reduced-motion: reduce) { .rbs-root .rbs-fire-btn.is-flash { animation: none; } }
/* 2026-10-15 最終チェック: パソコンで左上の「Space」と「発射／FIRE」が重なっていたので、文字を少し下げる（キーの表示がある画面だけ） */
.rbs-root .rbs-fire-btn:not(.is-loading) .rbs-fire-label { margin-top: 7px; line-height: 1; }
.rbs-root .rbs-fire-btn:not(.is-loading) .rbs-fire-hold { margin-top: 0; line-height: 1.1; }
.rbs-root .rbs-fire-btn .rbs-pad-key { font-size: 10px; top: 1px; left: 4px; }
@media (hover: none) and (pointer: coarse) { .rbs-root .rbs-fire-btn:not(.is-loading) .rbs-fire-label { margin-top: 0; } }