/* ============================================================
   UI Tuner 連携メモ:
   このファイルには :root ブロックが2つある。
     1) 直下(先頭) … デザイントークン(teal/base/font/dims/effects 等)
     2) L3986 付近 … team-roster バー専用トークン(--team-*)
   tools/ui-tuner.html と dev server の /api/ui-tuner/save-root が
   読み書き・ハイライト対象にするのは「先頭ブロックのみ」。2つ目は別管理で不変。
   ※ 保存(save-root)は先頭ブロックを丸ごと置換するため、トークン以外の
     コメントを先頭ブロック内に書くと保存時に消える。メモはブロックの外側に置くこと。
   ============================================================ */
:root {
  /* teal / 決定色 */
  --teal: #3bd6c6;
  --teal-bright: #5fd0ff;
  --teal-soft: #5fd0ff;
  --teal-dim: #7fb8b2;
  --teal-text: #cfeeea;
  --teal-line: #2a4a48;
  --teal-rgb: 59, 214, 198;
  /* base/text */
  --bg: #071019;
  --panel: #101d2f;
  --panel-2: #15263c;
  --panel-line: #3a516d;
  --text: #e6f3ff;
  --muted: #96abc2;
  --border-strong: #334a64;
  --border-soft: #425c79;
  /* state */
  --ok: #7df7a4;
  --earth: #f57b7b;
  --earth-deep: #c44a4a;
  /* font */
  --font-ui: var(--cjk-font), "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ui-title: 32px;
  --ui-heading-lg: 24px;
  --ui-heading-md: 34px;
  --ui-heading-sm: 24px;
  --ui-body: 18px;
  --ui-body-sm: 18px;
  --ui-number-lg: 30px;
  --ui-button-lg: 24px;
  --ui-button-md: 17px;
  --weight-bold: 700;
  --tracking-wide: 0.05em;
  /* dims */
  --radius-btn: 4px;
  --radius-panel: 8px;
  --border-w: 2px;
  --btn-pad-y: 8px;
  --btn-pad-x: 16px;
  --btn-min-w: 0px;
  --tab-pad-y: 11px;
  --tab-pad-x: 18px;
  --card-w: 160px;
  --card-h: 220px;
  --scene-pad-y: 24px;
  --scene-pad-x: 14px;
  --qg-header-h: 76px;
  --qg-header-tab-gap: 18px;
  --settings-tab-gap: 32px;
  --back-top: 0px;
  --back-right: 16px;
  --start-cursor-h: 17px;
  /* solo stage card */
  --solo-stage-code-font: 22px;
  --solo-stage-title-font: 24px;
  --solo-stage-title-line-height: 1.3;
  --solo-stage-title-line-count: 2;
  --solo-stage-reward-font: 18px;
  --solo-stage-objective-font: 18px;
  --solo-stage-star-font: 18px;
  --solo-stage-title-text-width: 100%;
  --solo-stage-title-width-solo-01-basic-training: 95%;
  --solo-stage-title-width-solo-02-assault-pressure: 114%;
  --solo-stage-title-width-solo-03-midrange-crossfire: 101%;
  --solo-stage-title-width-solo-04-sniper-line: 95%;
  --solo-stage-title-width-solo-05-lockdown: 100%;
  --solo-stage-title-width-solo-06-training-advanced: 100%;
  --solo-stage-title-width-solo-07-training-exam: 100%;
  --solo-stage-title-width-solo-08-training-final: 100%;
  --solo-stage-title-width-solo-06-space-entry: 100%;
  --solo-stage-title-width-solo-07-space-patrol: 100%;
  --solo-stage-title-width-solo-08-space-intercept: 100%;
  --solo-stage-title-width-solo-09-space-breakthrough: 100%;
  --solo-stage-title-width-solo-10-space-final: 100%;
  --solo-stage-title-width-solo-14-space-pursuit: 100%;
  --solo-stage-title-width-solo-15-space-defense: 100%;
  --solo-stage-title-width-solo-16-space-final: 100%;
  --solo-stage-card-gap: 16px;
  --solo-stage-card-pad-y: 15px;
  --solo-stage-card-pad-x: 13px;
  --solo-stage-code-row-h: 14px;
  --solo-stage-title-row-h: 62px;
  --solo-stage-reward-row-h: 25px;
  --solo-stage-objectives-row-h: 72px;
  --solo-stage-card-min-height: 218px;
  --solo-stage-code-offset-y: 0px;
  --solo-stage-title-offset-y: 0px;
  --solo-stage-reward-offset-y: 0px;
  --solo-stage-objectives-offset-y: 0px;
  /* profile gear table */
  --profile-gear-col-thumb: 52px;
  --profile-gear-col-name: 124px;
  --profile-gear-col-faction: 56px;
  --profile-gear-col-type: 56px;
  --profile-gear-col-hp: 54px;
  --profile-gear-col-speed: 58px;
  --profile-gear-col-boost: 244px;
  --profile-gear-col-respawn: 58px;
  --profile-gear-col-weapons: 82px;
  --profile-gear-cols: var(--profile-gear-col-thumb) var(--profile-gear-col-name) var(--profile-gear-col-faction) var(--profile-gear-col-type) var(--profile-gear-col-hp) var(--profile-gear-col-speed) var(--profile-gear-col-boost) var(--profile-gear-col-respawn) var(--profile-gear-col-weapons);
  --profile-gear-head-font: 14px;
  --profile-gear-cell-font: 14px;
  --profile-gear-row-pad-y: 4px;
  --profile-gear-row-pad-x: 8px;
  --profile-gear-cell-pad-x: 8px;
  --profile-gear-divider-width: 2px;
  --profile-gear-divider-alpha: 50%;
  --profile-gear-head-letter-spacing: 0.02em;
  --profile-gear-divider-color: #92aacb;
  --profile-gear-head-justify: center;
  --profile-gear-weapon-card-width: 322px;
  --profile-gear-weapon-card-height: 278px;
  --profile-gear-weapon-card-gap: 8px;
  --profile-gear-weapon-asset-h: 92px;
  --profile-gear-weapon-preview-h: 74px;
  /* effects */
  --glow-tab: 0px;
  --glow-card: 0px;
  --scanline-alpha: 0.04;
  --transition: 0.2s;
}

/* i18n Step 5: 言語別 CJK 字形。共有漢字を各言語の正書字形で表示する。
   script.js の applyDocumentLanguage() が documentElement.lang を設定し、
   SC/TC/KR フォントは ensureLanguageFont() が動的ロードする。
   html[lang=...] は :root より詳細度が高いので --cjk-font を上書きできる。 */
html[lang="ja"] { --cjk-font: "Noto Sans JP"; }
html[lang="zh-Hans"] { --cjk-font: "Noto Sans SC"; }
html[lang="zh-Hant"] { --cjk-font: "Noto Sans TC"; }
html[lang="ko"] { --cjk-font: "Noto Sans KR"; }
/* ラテン系(en/de/fr/es)は Noto Sans(Latin)を優先。CJK フォント未ロードでも軽い。 */
html[lang="en"],
html[lang="de"],
html[lang="fr"],
html[lang="es"] { --cjk-font: "Noto Sans"; }

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.build-info-badge {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 80;
  padding: 3px 7px;
  border: 1px solid rgba(146, 170, 203, 0.28);
  border-radius: 4px;
  background: rgba(5, 10, 18, 0.68);
  color: rgba(199, 216, 242, 0.72);
  font: 10px/1.2 "Courier New", monospace;
  letter-spacing: 0.02em;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
.build-info-badge:hover {
  border-color: rgba(95, 208, 255, 0.45);
  color: rgba(230, 243, 255, 0.94);
  background: rgba(8, 18, 30, 0.82);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(var(--gold-rgb), 0.14), transparent 26%),
    linear-gradient(180deg, #06101a, #0e1a2a 56%, #09111b);
}

.game-shell {
  width: min(1080px, calc(100vw - 18px));
  margin: 0 auto;
  padding: 10px 0 16px;
}

.battlefield-frame,
.bottom-hud {
  border: 3px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(16, 29, 47, 0.98), rgba(9, 17, 27, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

.battlefield-frame {
  padding: 10px 10px 12px;
}

.launch-notice {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 2px solid var(--border-strong);
  background: rgba(9, 18, 29, 0.92);
  color: var(--muted);
  font-size: var(--ui-body-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}

.frame-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.debug-chip,
.system-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.system-chip {
  justify-content: flex-end;
}

.lang-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip-label,
.weapon-label,
.control-title,
.time-label {
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: var(--ui-body-sm);
}

.debug-chip,
.system-chip,
.status-panel,
.center-panel,
.time-panel {
  background: linear-gradient(180deg, var(--panel-2), #0d1726);
  border: 2px solid var(--panel-line);
}

.debug-chip,
.system-chip {
  padding: 8px 10px;
}

.time-panel {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 132px;
  padding: 6px 16px 4px;
  border-color: var(--gold-deep);
  box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb), 0.22);
}

.time-value {
  font-size: var(--ui-title);
  line-height: 1;
  font-weight: 700;
  color: var(--gold);
}

.result-text {
  min-width: 72px;
  color: var(--ok);
  text-align: right;
  font-weight: 700;
}

.restart-button {
  border: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, #f3d56d, #cf9f1f);
  color: #131b24;
  font: inherit;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.restart-button:hover {
  filter: brightness(1.08);
}

.nav-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.alt-button {
  border-color: var(--border-soft);
  background: linear-gradient(180deg, #20344d, #132033);
  color: var(--text);
}

.lang-select {
  font: inherit;
  border: 2px solid var(--border-soft);
  background: #0a1320;
  color: var(--text);
  padding: 4px 6px;
}

.canvas-shell {
  position: relative;
  border: 2px solid #748aa6;
  background: #04090f;
  padding: 4px;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600; /* 内部解像度と一致させ歪み防止 */
  max-height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox フォールバック */
  background: #1e8d27;
}

.overlay-panel {
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 7, 12, 0.54);
}

.overlay-panel.hidden {
  display: none;
}

.overlay-card {
  width: min(460px, 100%);
  border: 3px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(15, 27, 44, 0.96), rgba(9, 16, 26, 0.97));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  padding: 18px 18px 16px;
  text-align: center;
}

.overlay-card--wide {
  width: min(760px, 100%);
  text-align: left;
}

.overlay-label,
.overlay-subtitle {
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: var(--ui-body-sm);
}

.overlay-title {
  margin: 8px 0 10px;
  font-size: var(--ui-title);
}

.overlay-lead {
  margin: 0 0 14px;
  color: var(--muted);
}

.overlay-section {
  margin-bottom: 12px;
  padding: 10px;
  border: 2px solid var(--border-strong);
  background: rgba(7, 13, 21, 0.48);
}

.overlay-section p {
  margin: 5px 0 0;
  color: var(--text);
  font-size: var(--ui-body);
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.overlay-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hub-stack {
  gap: 16px;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.overlay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.overlay-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overlay-field label {
  color: var(--gold);
  font-size: var(--ui-body-sm);
}

.overlay-input,
.overlay-select {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--border-soft);
  background: #0a1320;
  color: var(--text);
  font: inherit;
}

.overlay-list {
  display: grid;
  gap: 10px;
}

.hub-grid {
  display: grid;
  gap: 14px;
}

.hub-grid--war {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hub-grid--garage {
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.overlay-item {
  padding: 10px 12px;
  border: 2px solid var(--border-strong);
  background: rgba(7, 13, 21, 0.62);
}

.overlay-item.is-selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}

.overlay-item__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.overlay-item__title {
  margin: 0;
  color: var(--text);
  font-size: var(--ui-heading-sm);
}

.garage-slot-card,
.shop-card {
  text-align: left;
}

.overlay-item__meta,
.overlay-note,
.overlay-empty,
.overlay-help {
  color: var(--muted);
  font-size: var(--ui-body);
  line-height: 1.5;
}

.overlay-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.overlay-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  background: #0c1726;
  color: var(--text);
  font-size: var(--ui-body-sm);
}

.overlay-badge.player {
  border-color: rgba(57, 184, 255, 0.48);
  color: #bfe7ff;
}

.overlay-badge.cpu {
  border-color: rgba(255, 123, 84, 0.48);
  color: #ffd0c3;
}

.overlay-badge.ok {
  border-color: rgba(125, 247, 164, 0.5);
  color: #caffda;
}

.overlay-badge.warn {
  border-color: rgba(var(--gold-rgb), 0.5);
  color: #ffe8a5;
}

.overlay-badge.locked {
  border-color: rgba(150, 171, 194, 0.36);
  color: var(--muted);
}

.overlay-actions--left {
  justify-content: flex-start;
}

.overlay-actions--sticky {
  position: sticky;
  bottom: -2px;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(16, 29, 47, 0), rgba(16, 29, 47, 0.96) 36%);
}

.overlay-inline-values {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.overlay-inline-values strong {
  color: var(--gold);
}

.overlay-section--compact {
  margin-bottom: 0;
}

.overlay-button {
  min-width: 142px;
  padding: 8px 14px;
  border: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, #f3d56d, #cf9f1f);
  color: #131b24;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.overlay-button.secondary-button {
  border-color: var(--border-soft);
  background: linear-gradient(180deg, #20344d, #132033);
  color: var(--text);
}

.overlay-button--cta {
  min-width: 220px;
  background: linear-gradient(180deg, #ffe082, #d9a11c);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.2);
}

.overlay-button:hover {
  filter: brightness(1.08);
}

.pilot-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pilot-avatar {
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, #102034, #08101b);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: var(--ui-number-lg);
  font-weight: 700;
  /* Phase 5d: allow <img> children without breaking legacy text fallback. */
  padding: 0;
  overflow: hidden;
}

/* Phase 5d: pilot portrait image inside .pilot-avatar (war / garage) */
.pilot-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.pilot-name {
  font-size: var(--ui-heading-md);
  font-weight: 700;
  color: var(--text);
}

.hub-list,
.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-list {
  display: grid;
  gap: 8px;
}

.hub-list li,
.ranking-row {
  display: grid;
  /* Phase 5d: add 32px avatar column between rank and name. */
  grid-template-columns: 110px 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(66, 92, 121, 0.28);
}

.hub-list li:last-child {
  border-bottom: 0;
}

.hub-list span {
  color: var(--muted);
  font-size: var(--ui-body-sm);
}

.hub-list strong {
  color: var(--text);
}

.war-meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.war-meter__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: var(--ui-body-sm);
}

.war-meter__bar {
  display: flex;
  height: 18px;
  border: 2px solid var(--border-strong);
  background: #09131f;
  overflow: hidden;
}

.war-meter__earth {
  background: linear-gradient(90deg, #0f7fe0, var(--player));
}

.war-meter__lunar {
  background: linear-gradient(90deg, var(--gold), #c68d00);
}

.ranking-list {
  display: grid;
  gap: 6px;
}

.ranking-row {
  /* Phase 5d: 32px avatar column between rank and name */
  grid-template-columns: 32px 32px 1fr auto;
  font-size: var(--ui-body-sm);
  color: var(--text);
}

.ranking-pos {
  color: var(--gold);
  font-weight: 700;
}

.start-screen .overlay-header,
.loading-screen .overlay-header {
  align-items: center;
}

.start-hero {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 14px;
  align-items: center;
}

.start-actions {
  justify-content: flex-end;
}

.hidden {
  display: none !important;
}

.bottom-hud {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.status-panel,
.center-panel {
  padding: 10px 12px;
  min-height: 152px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.unit-name {
  color: var(--gold);
  font-weight: 700;
}

.hp-track {
  width: 100%;
  height: 18px;
  border: 2px solid #26394f;
  background: #09131f;
  margin-bottom: 10px;
}

.hp-fill {
  height: 100%;
  width: 100%;
}

.hp-fill.player {
  background: linear-gradient(90deg, #0f7fe0, var(--player));
}

.hp-fill.cpu {
  background: linear-gradient(90deg, #cb4c2c, var(--cpu));
}

.weapon-readout {
  margin: 6px 0 0;
  min-height: 72px;
  color: var(--text);
  font: inherit;
  white-space: pre-wrap;
}

.center-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.16);
}

.center-panel p {
  margin: 4px 0;
  color: var(--muted);
  font-size: var(--ui-body);
}

.loop-panel-body {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--ui-body);
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
}

.loop-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
  text-align: left;
}

.preset-label {
  color: var(--gold);
  font-size: var(--ui-body-sm);
}

.preset-select,
.preset-button {
  font: inherit;
  border: 2px solid var(--border-soft);
  background: #0a1320;
  color: var(--text);
}

.preset-select {
  width: 126px;
  padding: 4px 6px;
}

.preset-button {
  margin-top: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.preset-button:hover {
  border-color: var(--gold);
}

.player-panel {
  box-shadow: inset 0 0 0 1px rgba(57, 184, 255, 0.2);
}

.cpu-panel {
  box-shadow: inset 0 0 0 1px rgba(255, 123, 84, 0.2);
}

.dev-screen {
  position: fixed;
  inset: 12px;
  z-index: 20;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: rgba(2, 6, 12, 0.82);
  backdrop-filter: blur(5px);
}

.dev-screen__frame {
  width: min(1180px, 100%);
  border: 3px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(11, 20, 32, 0.98), rgba(6, 11, 18, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  padding: 18px;
  overflow: auto;
}

.dev-screen__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dev-screen__top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dev-screen__title {
  margin: 6px 0 0;
  font-size: var(--ui-number-lg);
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dev-card {
  border: 2px solid var(--border-strong);
  background: rgba(8, 13, 21, 0.86);
  padding: 12px;
  min-height: 210px;
}

.dev-card--wide {
  grid-column: span 3;
  min-height: 190px;
}

.dev-readout {
  margin: 10px 0 0;
  color: var(--text);
  font: inherit;
  line-height: 1.58;
  white-space: pre-wrap;
}

.dev-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.dev-tab {
  border: 1px solid rgba(143, 176, 219, 0.25);
  background: rgba(10, 18, 30, 0.72);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}

.dev-tab.is-active {
  background: linear-gradient(180deg, rgba(244, 210, 87, 0.96), rgba(211, 151, 41, 0.96));
  color: #09111d;
  font-weight: 700;
}

.dev-panel {
  min-height: 0;
}

/* Phase 6b-dev-testability ext: GUI panel for dev testing toggles */
.dev-panel--testing {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 14px;
}

.dev-testing-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--ui-body);
  color: var(--text);
}

.dev-testing-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.dev-testing-field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold, #f2c14e);
}

.dev-testing-field__label {
  font-size: var(--ui-body-sm);
  color: rgba(255, 255, 255, 0.72);
}

.dev-testing-field .overlay-input {
  max-width: 180px;
  font-family: "Courier New", monospace;
}

.dev-testing-state .dev-readout {
  min-height: 120px;
  line-height: 1.6;
}

.overlay-input {
  width: 100%;
  border: 1px solid rgba(96, 127, 168, 0.45);
  border-radius: 10px;
  background: rgba(7, 13, 22, 0.92);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.overlay-input--color {
  min-height: 44px;
  padding: 4px;
}

.pixel-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 14px;
  margin-bottom: 14px;
}

.pixel-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
}

.pixel-admin-actions {
  margin-top: 14px;
}

.pixel-preview-stack {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.pixel-preview-card {
  margin: 0;
  border: 1px solid rgba(96, 127, 168, 0.35);
  border-radius: 14px;
  padding: 12px;
  background: rgba(5, 10, 18, 0.72);
}

.pixel-preview-card figcaption {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: var(--ui-body);
}

.pixel-preview-image,
.pixel-preview-strip {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  image-rendering: pixelated;
  background: linear-gradient(180deg, rgba(9, 16, 27, 0.94), rgba(4, 8, 14, 0.98));
  border-radius: 10px;
}

.pixel-assets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.pixel-asset-card {
  border: 1px solid rgba(96, 127, 168, 0.35);
  border-radius: 14px;
  padding: 12px;
  background: rgba(5, 10, 18, 0.72);
  display: grid;
  gap: 8px;
}

.pixel-asset-card img {
  width: 100%;
  border-radius: 8px;
  image-rendering: pixelated;
  background: linear-gradient(180deg, rgba(9, 16, 27, 0.94), rgba(4, 8, 14, 0.98));
}

.pixel-asset-meta {
  display: grid;
  gap: 4px;
  font-size: var(--ui-body);
  color: var(--muted);
}

/* =========================================================
   2026-04 reference layout refresh
   qutantagia_CLAUDE.html を基準に、16:9 frame / top chrome /
   hub 構造 / sortie bar / result panel を統一する
   ========================================================= */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 126, 255, 0.18), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(var(--gold-rgb), 0.16), transparent 20%),
    linear-gradient(180deg, #04070d, #08111b 48%, #060b12);
}

.game-shell.ui-frame {
  width: min(1880px, calc(100vw - 8px));
  height: calc(100vh - 8px);
  min-height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  aspect-ratio: auto;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(146, 170, 203, 0.18);
  border-radius: 0;  /* 角丸は通常・プレビュー両方で不要(全画面が角丸に見える原因だった)。 */
  background:
    linear-gradient(180deg, rgba(9, 16, 27, 0.96), rgba(8, 14, 23, 0.98)),
    radial-gradient(circle at top, rgba(115, 181, 255, 0.12), transparent 35%);
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.game-shell.ui-frame::before,
.game-shell.ui-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(99, 126, 162, 0.16);
  border-radius: 0;  /* 内側二重枠の角丸も不要(シャープな矩形枠に)。 */
  pointer-events: none;
}

/* fullscreen-fit Step 2: ハブ(旧 1900px 上限)を 16:9 短辺フィットに。
   ハブ系は全コンテンツが #hubSceneHost(.scene-host, 16:9)に内包されるため、
   frame を広げても中身は 16:9 のまま比例拡大し、間延び・崩れは起きない
   (= 二段構えは scene-host により実質内蔵)。 */
.app-shell--hub.game-shell.ui-frame {
  width: min(calc(100vw - 8px), calc((100vh - 8px) * 16 / 9));
  max-width: calc(100vw - 8px);
  height: calc(100vh - 8px);
  min-height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  padding: 16px 18px 18px;
}

/* fullscreen-fit Step 2: バトル(旧 1920px 上限)を 16:9 短辺フィットに。
   canvas は aspect-ratio:960/600 + max-height:100% で内部解像度のアスペクトを保持
   (= canvas 最大化)。roster-bar / meta は battle-stage と一緒に 16:9 で比例拡大。 */
.app-shell--battle.game-shell.ui-frame {
  width: min(calc(100vw - 6px), calc((100vh - 6px) * 16 / 9));
  max-width: calc(100vw - 6px);
  height: calc(100vh - 6px);
  min-height: calc(100vh - 6px);
  max-height: calc(100vh - 6px);
  padding: 8px 10px 10px;
}

/* ===== fullscreen-fit: 16:9 短辺フィット最大化(方式C)の設計メモ ===== */
/* width = min(ビューポート幅, 高さ基準の16:9幅) で「画面の短い辺いっぱい」に最大化。
   横長ウィンドウ → 高さ基準で16:9(左右に最小の黒帯)、縦長 → 幅基準(上下に帯)。
   黒帯は body の暗色グラデが透けるレターボックス。1900/1920px 上限は撤廃済み。
   Step 1 でタイトル、Step 2 でハブ/バトルへ展開し、全 ui-frame を短辺フィットに統一。
   詳細度: hub/battle 規則(0,3,0)が @media の .game-shell.ui-frame(0,2,0)を上書き。
   移植性: Unity の固定アスペクト+レターボックスと同思想(内部960×600を16:9へスケール)。 */

/* 全画面時(F / F11)は frame マージンを 0 にして画面の短辺へ完全フィット。
   :fullscreen と :-webkit-full-screen は別ルールに分ける(セレクタリストで併記すると
   片方を解さないブラウザが全体を無効化するため)。hub/battle は同一プレフィックス内で併記可。 */
html:fullscreen .app-shell--hub.game-shell.ui-frame,
html:fullscreen .app-shell--battle.game-shell.ui-frame {
  width: min(100vw, calc(100vh * 16 / 9));
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
}
html:-webkit-full-screen .app-shell--hub.game-shell.ui-frame,
html:-webkit-full-screen .app-shell--battle.game-shell.ui-frame {
  width: min(100vw, calc(100vh * 16 / 9));
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
}

.screen-root {
  min-height: 0;
}

.screen-root--hub {
  display: flex;
  /* scene-host が 16:9 で高さが auto 化されるので、上下中央寄せ。 */
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.scene-host {
  /* 実 UI 領域を 16:9 に制約し、game-shell 内中央に配置。
     親(.screen-root--hub)が align-items:center/justify-content:center で中央寄せ。
     height:auto + aspect-ratio で「横長親なら幅、縦長親なら高さ」基準で 16:9 を算出。
     ※ height:100% を明示すると aspect-ratio が上書きされて 16:9 にならないため
       敢えて auto。max-height:100% で親を超えないよう抑制。 */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
}

.screen-root--battle {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
}

.app-shell--hub .screen-root--hub {
  display: flex;
  /* settings-tabs-safearea fix: hubRoot を grid の 1fr 行(row2)に固定する。
     game-shell は grid-template-rows: auto minmax(0,1fr)(row1=launch-notice 想定 / row2=コンテンツ)。
     #balanceLaunchNotice が display:none のとき hubRoot が auto 行(row1)に落ち、内容高(scene-host の
     16:9 高)で上詰めになっていた。結果、全画面で実UIが上に寄り、game-shell 中央に置かれる
     .aspect-guide(16:9 セーフエリア)と大きくズレ、設定タブがガイド上端を突き抜けて見えた。
     row2(1fr)へ固定すると hubRoot が全高を占め、align-items:center で実UIが中央化しガイドと一致する。
     launch-notice 表示時は row1(auto)に入る挙動は維持される(全hub画面共通の中央化修正)。 */
  grid-row: 2;
}

.app-shell--hub .screen-root--battle {
  display: none;
}

.app-shell--battle .screen-root--hub {
  display: none;
}

.app-shell--battle .screen-root--battle {
  display: grid;
}

.dev-card {
  border: 1px solid rgba(106, 136, 172, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(17, 28, 43, 0.98), rgba(8, 13, 22, 0.98)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.battle-stage__label {
  color: var(--muted);
  font-size: var(--ui-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.battle-mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(87, 109, 143, 0.3);
  border-radius: 999px;
  background: rgba(6, 11, 20, 0.48);
  color: #c8d5eb;
  text-decoration: none;
  font-size: var(--ui-caption);
  letter-spacing: 0.08em;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.battle-mini-button:hover {
  border-color: rgba(var(--gold-rgb), 0.52);
  color: #fff;
  background: rgba(var(--gold-rgb), 0.1);
}

.battle-stage {
  position: relative;
  min-height: 0;
  padding: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at top, rgba(84, 111, 196, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(3, 7, 14, 0.98), rgba(2, 5, 10, 1));
  overflow: hidden;
}

.battle-stage__meta {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

/* Phase 6b-2-3 hotfix 2: hide entire meta area during battle.
   Upper roster bar (Phase 6b-2) already consolidates fighter /
   timer / state info; stageLabel + resultText + matchInfoText
   were overlapping the left-top player card. Shown again for
   non-battle contexts (stage select, result, no-profile). */
.battle-stage__meta[data-state="hidden"] {
  display: none;
}

.battle-stage__meta-group,
.battle-stage__utilities {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.battle-stage__utilities {
  justify-content: flex-end;
}

.battle-stage__label {
  font-size: var(--ui-caption);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  /* Phase 6b-2-3 hotfix: parent .battle-stage__meta-group has
     min-width: 0, which allows this flex child to shrink below its
     content width. Adding matchInfoText as a third sibling amplified
     the shrink pressure, causing "軌道デブリ帯" to be truncated to
     "り帯". Pin to natural width and prevent text wrap. */
  flex-shrink: 0;
  white-space: nowrap;
}

.battle-stage__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(87, 109, 143, 0.24);
  border-radius: 999px;
  background: rgba(6, 11, 20, 0.42);
  color: #8dd89d;
  font-size: var(--ui-caption);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  /* Phase 6b-2-3 hotfix: same flex-shrink protection as stageLabel. */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Phase 6b-2-3: match info (relocated from bottom center band) */
.battle-stage__match-info {
  font-size: var(--ui-body-sm);
  color: var(--muted);
  margin-left: 8px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  /* Phase 6b-2-3 hotfix: allow this element to shrink/ellipsis when
     buildWarSituationText() is long, so it never squeezes stageLabel
     or pushes .battle-stage__utilities off-screen. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-stage__match-info:empty {
  display: none;
}

.battle-stage__surface {
  position: relative;
  min-height: 100%;
  height: 100%;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600; /* 内部解像度と一致させ歪み防止 */
  max-height: 100%;
  border: 0;
  border-radius: 14px;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox フォールバック */
  background: #050914;
}

.scene {
  /* ガード: .qg-back / .settings-back(position:absolute; top:12px)の containing block を
     必ず scene 自身にする。個別 .scene--*(onboarding/solo/settings/qg)の position:relative に
     依存していたが、それが外れると back が #appShell(ui-frame)に落ち top:12px で
     セーフエリア上端より上へ飛ぶ。基底に集約し modifier 依存を絶つ(Safari 全画面事故の保険)。 */
  position: relative;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scene__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  flex: 0 0 auto;
}

.scene__header--with-tabs {
  flex-wrap: wrap;
  align-items: stretch;
}

.scene__header-main {
  display: grid;
  gap: 4px;
  flex: 1 1 720px;
  min-width: min(100%, 520px);
}

.scene-utility-nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  order: 2;
}

.scene-utility-button {
  min-width: 72px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: var(--ui-body-sm);
  letter-spacing: 0.04em;
  opacity: 0.86;
}

.scene-utility-button:disabled {
  opacity: 0.42;
}

.scene-mode-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 0 100%;
  order: 3;
  padding-top: 6px;
}

.scene-mode-tab {
  min-width: 170px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 16px;
  border: 1px solid rgba(97, 127, 161, 0.44);
  background: linear-gradient(180deg, rgba(22, 34, 52, 0.92), rgba(12, 20, 32, 0.96));
  color: #c7d4e5;
  font-size: var(--ui-heading-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.scene-mode-tab:hover {
  border-color: rgba(229, 189, 67, 0.56);
  transform: translateY(-1px);
}

.scene-mode-tab.is-active {
  border-color: rgba(229, 189, 67, 0.82);
  background:
    linear-gradient(180deg, rgba(78, 64, 16, 0.94), rgba(33, 26, 11, 0.98)),
    linear-gradient(90deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0));
  color: #fff3bf;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 126, 0.15);
}

.scene__body {
  display: grid;
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}

.scene__body--narrow {
  width: min(980px, 100%);
  margin: 0 auto;
}

.overlay-label {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.overlay-title {
  margin: 10px 0 10px;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.overlay-lead {
  max-width: 760px;
  color: #acc2d8;
  font-size: var(--ui-body);
  line-height: 1.7;
}

.overlay-header {
  margin-bottom: 10px;
}

.overlay-section,
.overlay-item {
  border-radius: 16px;
  border: 1px solid rgba(97, 127, 161, 0.44);
  background: linear-gradient(180deg, rgba(14, 24, 38, 0.88), rgba(8, 13, 22, 0.94));
  padding: 16px 18px;
}

.overlay-subtitle {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.overlay-actions {
  gap: 12px;
}

.overlay-button {
  border-radius: 14px;
  min-height: 48px;
  padding: 10px 18px;
  font-size: var(--ui-body);
  letter-spacing: 0.03em;
}

.overlay-button--cta {
  min-width: 260px;
}

.sortie-summary {
  display: grid;
  gap: 12px;
}

.sortie-summary__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sortie-summary__eyebrow,
.sortie-bar__label,
.hub-stat-card__eyebrow {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sortie-summary__name,
.hub-stat-card__name,
.result-highlight {
  color: #f4f8ff;
  font-size: var(--ui-heading-lg);
  font-weight: 700;
}

.sortie-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sortie-summary__card,
.result-stat-card,
.shop-summary span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(90, 121, 157, 0.4);
  background: rgba(8, 14, 23, 0.7);
}

.sortie-summary__label {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.12em;
}

.start-screen {
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.start-screen__hero {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 28px 0 8px;
  position: relative;
  z-index: 2;
}

.start-screen__eyebrow {
  letter-spacing: 0.4em;
  font-size: var(--ui-body-sm);
  color: var(--muted);
}

.start-screen__title {
  margin-top: 0;
  font-size: clamp(42px, 5vw, 62px);
  background: linear-gradient(180deg, #fff1b0 0%, var(--gold) 48%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(var(--gold-rgb), 0.2);
  letter-spacing: 0.04em;
}

.start-screen__tagline {
  font-family: var(--font-ui);
  color: var(--gold);
  letter-spacing: 0.32em;
  font-size: var(--ui-body-sm);
  opacity: 0.8;
}

.start-screen__lead {
  max-width: 620px;
}

.start-menu {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.start-menu__primary {
  min-height: 64px;
  font-size: var(--ui-heading-md);
}

.start-menu__primary[disabled] {
  opacity: 0.48;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

.start-menu__secondary {
  min-height: 54px;
}

.start-menu__minor {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.start-menu__mini {
  min-height: 36px;
  font-size: var(--ui-body-sm);
  letter-spacing: 0.16em;
  padding: 0 14px;
}

/* ===== P1_TITLE Nightreign 風リデザイン ===== */
/* .start-screen と二重指定で旧 .start-screen ルールを上書き。 */
.start-screen.start-screen--nr {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ロゴ＋メニューを scene-host の上下中央にまとまって配置。
     各子要素は自然な高さで縦に並び、要素間は gap で統一。 */
  justify-content: center;
  gap: 32px;
  height: 100%; /* .scene-host が 16:9 に制約済みなのでそのまま追従。 */
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.start-nr__logo {
  /* 固定割合(旧 flex:0 0 28%)を撤去し、画像の自然な高さで配置。
     キャッチコピー(.start-nr__catch)をロゴ画像の上に重ねるため縦並び。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* タイトルロゴ上の言語別サブタイトル(キャッチコピー)。ロゴが主役、添えとして控えめに。 */
.start-nr__catch {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}

.start-nr__logo-img {
  /* 画像 native は 256x64 (4:1)。width 指定がないと max-width だけでは
     引き伸ばされず native サイズで表示されてしまうため、scene-host 幅
     基準で 70% を占有させる。max で大画面の過大化を防ぐ。 */
  width: 49%;
  max-width: min(1050px, 63vw);
  height: auto;
  image-rendering: pixelated;
}

.start-nr__menu {
  /* flex:1/padding-top を撤去。親(.start-screen--nr)の justify-content:center +
     gap で全体を上下中央配置するため、メニュー自体は自然な高さに。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.start-nr__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* i18n Step 5: 旧 DotGothic16(ピクセル)から Noto 系へ統一(--font-game も Noto)。
     多言語の字形一貫性を優先。ロゴはドット調のまま、文字は全言語クリーンに表示。 */
  font-family: var(--font-game);
  font-size: var(--ui-button-lg); /* メニュー=ボタン用トークン。旧は --ui-heading-md を借用していたが、見出しと独立して調整できるよう --ui-button-lg に付け替え */
  font-weight: var(--weight-normal); /* 400 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  /* メニュー状態色は typography.md §5「メニュー項目の状態色 — タイトル/共通(teal基調)」に準拠。
     通常(選択可)= --text。生 rgba 直書きは廃止(§11)。全画面 teal 統一(§11 改訂)。 */
  color: var(--text);
  transition: color 0.12s ease;
}

/* 状態色: hover=--teal-soft(緑寄り)/ 選択中=--teal-bright(青寄りcyan)で色相区別。
   ui-format.md §7 のインタラクション仕様に準拠。白=非選択 / ロック=muted+opacity。
   おすすめ(primary)の特別色は廃止し、選択中 teal-bright は常にカーソル位置の 1 つだけ。 */
.start-nr__item:hover {
  color: var(--teal-soft);
}
.start-nr__item.is-selected {
  color: var(--teal-bright);
}

/* ロック(disabled): 初プレイ時の未解放項目(一人/対戦プレイ)。
   暗い muted + opacity で「押せない」を明示し、選択中(teal)・通常(--text 白)と三者を明確に区別。 */
.start-nr__item--disabled,
.start-nr__item--disabled:hover {
  color: var(--muted);
  opacity: 0.4;
  cursor: not-allowed;
}

/* ロック項目では選択カーソルを出さない(カーソルは disabled をスキップするが念のため)。 */
.start-nr__item--disabled .start-nr__cursor {
  opacity: 0;
}

/* 線画地球儀アイコン(共通)。タイトルの言語項目と設定の「言語」タブで共用(globeIconSvg)。
   stroke=currentColor で呼び出し側の状態色(通常=--text / hover=--teal-soft / 選択中=--teal-bright)に
   線色が連動する。文字とサイズ・ベースラインを揃えるため 1em + わずかに下げて視覚的に中央へ。 */
.qg-globe {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

/* カーソルは選択中のみ表示(レイアウトを崩さないよう不可視で確保)。
   ▶ グリフから yajirushi 画像(矢印ドット絵)へ差し替え(原寸12x7・整数倍 pixelated)。
   表示制御(opacity)は従来どおり span 側で行い、中の <img> に継承させる。 */
.start-nr__cursor {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-2px);
}

.start-nr__cursor img {
  height: var(--start-cursor-h);
  width: auto;
  display: block;
  image-rendering: pixelated;
}

.start-nr__item.is-selected .start-nr__cursor {
  opacity: 1;
}

/* 左下: ページラベル(#page-label, bottom:4px)の上に小さく DEV リンク。 */
.start-nr__dev {
  position: absolute;
  left: 6px;
  bottom: 24px;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--ui-caption);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.12s ease;
}

.start-nr__dev:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* 開発者向け: タイトル右下の「初プレイ状態に戻す」ショートカット。
   DEV ラベルと同じ控えめなトーンだが、見つけやすいよう僅かに teal を差す。
   (DEV は左下、こちらは右下に分離して誤クリックを避ける) */
.start-nr__dev--reset {
  left: auto;
  right: 6px;
  color: rgba(var(--teal-rgb), 0.55);
}

.start-nr__dev--reset:hover {
  color: rgba(var(--teal-rgb), 0.95);
}

/* ===== 開発用 16:9 セーフエリアガイド ===== */
/* .scene-host と同じ計算パターン(width:100% + aspect-ratio:16/9 + max:100% +
   中央寄せ)を game-shell 基準で適用することで、scene-host の境界に重なる。 */
.aspect-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 99999;
}

.aspect-guide.hidden {
  display: none;
}

.aspect-guide__label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--font-ui, monospace);
  font-size: var(--ui-caption);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.solo-mission-title-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 96px);
  box-sizing: border-box;
  background: #000;
  pointer-events: auto;
}

.solo-mission-title-overlay[data-state="hidden"] {
  display: none;
}

.solo-mission-title-overlay__text {
  max-width: min(88vw, 1200px);
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", "Noto Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: var(--solo-mission-title-opacity, 0);
  transform: skewX(-6deg);
}

/* P1_TITLE 背景キャンバス: 宇宙(星空)演出を最背面に敷く。
   描画は JS 側 drawTitleSpaceBackground() が担当。 */
.start-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* CLICK TO START ゲート(初回ジェスチャ捕捉用フルスクリーンオーバーレイ)。
   リロード直後のタイトル初回表示でのみ出る(JS: audioUnlocked が false の間)。
   クリック/タップ/キーで unlockAudio() が走り BGM 開始 + フェードアウト消去。
   初版は機能優先のシンプル実装。色/サイズ/アニメは後で詰める。 */
.start-gate {
  position: absolute;
  inset: 0;
  z-index: 10; /* canvas(0)・ロゴ/メニュー(2)より前面で全面を覆う。 */
  /* 音波アイコン(::before)用の SVG。スピーカー本体 + 2本の音波弧。
     mask で使うため fill 色は任意(形状のみ使用)。 */
  --start-gate-sound-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 9v6h3l5 4V5L7 9H4z"/><path fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" d="M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12"/></svg>');
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 10, 12, 0.85); /* クリック前は濃いめの暗幕。タイトルの気配だけ残す(初回ジェスチャ前提を強調)。 */
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.start-gate__cta {
  /* 音波アイコン(::before)を CTA テキストの上に縦並びで添える。 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--ui-h2, 1.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-wide, 0.08em);
  color: var(--teal-bright);
  text-shadow: 0 0 12px rgba(var(--teal-rgb), 0.55);
  animation: start-gate-blink 1.6s ease-in-out infinite;
}

/* 音が出ることを明示する teal 音波アイコン(スピーカー + 2本の音波弧)。
   絵文字は OS 依存でピクセル世界観から浮くため、インライン SVG を mask で
   描画して --teal-bright で着色。CTA の明滅(start-gate-blink)に同調する。 */
.start-gate__cta::before {
  content: "";
  width: 40px;
  height: 40px;
  background-color: var(--teal-bright);
  filter: drop-shadow(0 0 8px rgba(var(--teal-rgb), 0.55));
  -webkit-mask: var(--start-gate-sound-icon) center / contain no-repeat;
  mask: var(--start-gate-sound-icon) center / contain no-repeat;
}

/* ゆっくり明滅して「押せる」ことを示す。 */
@keyframes start-gate-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* フェードアウト中。pointer-events は維持したまま透明化し、解放クリックが
   下のメニューへ落ちないようにする(transitionend / setTimeout で DOM 除去)。 */
.start-gate--hiding {
  opacity: 0;
}

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

/* P1_TITLE スクリム: 案A で DOM オーバーレイ(z-index:1)を廃止し、JS 側
   drawTitleScrim() が canvas 内で「星空の上・戦闘レイヤの下」に描画する。
   これにより戦闘レイヤ(機体・弾・バーニア)は scrim に暗くされず本編同等の
   明るさを保ち、scrim は背景(星空)のみを落としてロゴ可読性を確保する。 */

.start-press-enter {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
  color: var(--muted);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  animation: start-press-blink 1.5s ease-in-out infinite;
  position: relative;
  z-index: 3;
}

@keyframes start-press-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  /* 背景の星瞬きは JS 側で matchMedia 検知して停止する。 */
  .start-press-enter {
    animation: none;
    opacity: 0.7;
  }
}

.hub-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  min-height: 0;
}

.hub-stage__top,
.hub-stage__bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-height: 0;
}

.hub-stage__top {
  align-items: start;
}

/* 上段に機体ビジュアル追加時のカラム比 */
.hub-stage__top--with-visual {
  grid-template-columns: 1fr 1.2fr 1fr;
}

/* 左カラム: プレイヤー情報 + 戦況バー の縦積み */
.hub-stage__left-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  min-height: 0;
}

/* 出撃機体カード内部レイアウト */
.loadout-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loadout-panel__gear {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
}
.loadout-panel__gear-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.loadout-panel__gear-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loadout-panel__gear-name {
  font-size: var(--ui-heading-md);
  font-weight: 700;
  color: var(--text);
}
.loadout-panel__gear-role {
  font-size: var(--ui-body-sm);
  color: var(--muted);
}
.loadout-panel__slot-label {
  font-size: var(--ui-body-sm);
  color: var(--muted);
}

/* 戦況バー(カード枠なし帯、左カラム内) */
.war-meter-standalone {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.15);
}

/* 機体ビジュアルパネル */
.gear-visual-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gear-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-height: 0;
}

/* 画像枠: 1:1 正方形 */
.gear-visual__frame {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.08), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 12px;
  overflow: hidden;
}

/* 画像本体: 32x32 を 5 倍 = 160px で拡大表示(整数倍でシャープ) */
.gear-visual__image {
  width: 160px;
  height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* スプライトシート切り出し表示(background-position で 1 フレーム抽出) */
.gear-visual__sprite {
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* PLACEHOLDER バッジ */
.gear-visual__placeholder-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: var(--ui-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.85);
  background: rgba(var(--gold-rgb), 0.85);
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}

.war-screen .hub-stage__bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 自分の順位カード */
.self-rank {
  display: grid;
  gap: 6px;
}
.self-rank__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--ui-body);
}
.self-rank__row strong {
  font-size: var(--ui-heading-sm);
  color: var(--gold);
}

/* フレンドカード空状態 */
.friend-panel--empty {
  display: grid;
  gap: 4px;
  opacity: 0.8;
}

/* ランキング画面 */
.scene--ranking .scene__body {
  gap: 12px;
}
.ranking-list--full {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-list--full .ranking-row {
  display: grid;
  /* Phase 5d: 32px avatar column between rank and name */
  grid-template-columns: 48px 32px 1fr auto;
  align-items: center;
  padding: 6px 14px;
  font-size: var(--ui-body);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.ranking-row--self {
  background: rgba(var(--gold-rgb), 0.12);
  border-left: 3px solid var(--gold);
}
.ranking-row__rank {
  font-weight: 700;
  color: var(--gold);
}
.ranking-row__name {
  color: var(--text);
}
.ranking-row__score {
  font-size: var(--ui-body-sm);
  color: var(--muted);
}

/* Phase 5d: ranking row pilot portrait (32x32, between rank and name) */
.ranking-row__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.ranking-row__avatar-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.ranking-divider {
  text-align: center;
  padding: 6px;
  color: var(--muted);
  list-style: none;
}

/* 陣営別集計 */
.faction-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 12px;
}
.faction-summary__cell {
  display: grid;
  gap: 4px;
}
.faction-summary__label {
  font-size: var(--ui-body-sm);
  color: var(--muted);
}
.faction-summary__value {
  font-size: var(--ui-heading-sm);
  font-weight: 700;
  color: var(--gold);
}

.hub-panel {
  min-height: 0;
}

.hub-stat-card {
  display: grid;
  gap: 6px;
}

.hub-message {
  font-size: var(--ui-heading-sm);
  line-height: 1.8;
}

.sortie-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(214, 169, 32, 0.4);
  background:
    linear-gradient(180deg, rgba(44, 31, 7, 0.92), rgba(17, 14, 9, 0.96)),
    linear-gradient(90deg, rgba(var(--gold-rgb), 0.12), transparent 40%);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2);
}

.sortie-bar__meta {
  display: grid;
  gap: 4px;
}

.sortie-bar__links {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
}

/* Phase 6b-0.6: battle mode selector inside the stage-select sortie-bar.
   Matches the amber/gold theme of .sortie-bar. */
.battle-mode-selector {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.battle-mode-selector__label {
  font-size: var(--ui-body-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--gold-rgb), 0.8);
}

.battle-mode-select {
  padding: 8px 10px;
  font-size: var(--ui-body);
  font-family: inherit;
  color: #f5e9c5;
  background: rgba(17, 14, 9, 0.9);
  border: 1px solid rgba(214, 169, 32, 0.5);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.battle-mode-select:hover,
.battle-mode-select:focus {
  border-color: rgba(var(--gold-rgb), 0.85);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.25);
}

.battle-mode-select option[disabled] {
  color: rgba(245, 233, 197, 0.35);
}

.garage-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1.3fr) 360px;
  gap: 18px;
}

.garage-panel {
  min-height: 100%;
}

.garage-editor {
  display: grid;
  gap: 12px;
}

.garage-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.garage-slot-card-wrap {
  position: relative;
  display: block;
}

.garage-slot-card-wrap.is-active .garage-slot-card {
  border-left: 3px solid var(--gold);
  padding-left: 9px;
  box-shadow:
    inset 0 0 0 1px rgba(var(--gold-rgb), 0.5),
    0 6px 18px rgba(var(--gold-rgb), 0.12);
}

.garage-slot-card__rename {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  background: rgba(12, 18, 30, 0.85);
  color: var(--gold);
  font-size: var(--ui-body);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}

.garage-slot-card__rename:hover {
  filter: brightness(1.15);
  border-color: var(--gold);
}

.garage-slot-card__weapons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.garage-slot-card__weapon-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid rgba(97, 127, 161, 0.3);
  background: rgba(6, 11, 20, 0.4);
  overflow: hidden;
}

.garage-slot-card__weapon-icon .pixel-thumb-grid {
  width: 20px;
  height: 20px;
}

.garage-slot-card__gear-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-left: auto;
}

.garage-slot-card__summary {
  margin-top: 6px;
}

.garage-weapon-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(140px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(97, 127, 161, 0.25);
  background: rgba(6, 11, 20, 0.38);
}

.garage-weapon-row__thumb {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  background: rgba(12, 18, 30, 0.7);
  overflow: hidden;
}

.garage-weapon-row__thumb .pixel-thumb-grid {
  width: 34px;
  height: 34px;
}

.garage-weapon-row__info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.garage-weapon-row__label {
  font-size: var(--ui-body-sm);
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.garage-weapon-row__name {
  font-size: var(--ui-body);
  font-weight: 700;
  color: var(--text);
}

.garage-weapon-row__stats {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.garage-weapon-row__select .overlay-select {
  width: 100%;
}

.shop-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.shop-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-tabs__tab--active {
  background: var(--gold);
  color: #2a1f00;
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.25);
}

.shop-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.shop-card__stats span {
  white-space: nowrap;
}

.shop-card--owned {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.shop-card--owned .shop-card__state-badge {
  background: var(--gold-deep);
  color: #fff6d4;
}

.shop-card--locked {
  border-color: rgba(255, 123, 84, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 123, 84, 0.22);
}

.shop-card--locked .overlay-button[disabled] {
  border-color: rgba(255, 123, 84, 0.55);
  color: rgba(255, 123, 84, 0.9);
}

.shop-summary--flash span strong {
  animation: shop-funds-flip 0.6s ease-out;
}

@keyframes shop-funds-flip {
  0%   { color: var(--gold); transform: scale(1); }
  30%  { color: var(--ok); transform: scale(1.08); text-shadow: 0 0 12px rgba(125, 247, 164, 0.55); }
  60%  { color: var(--ok); transform: scale(1); }
  100% { color: var(--gold); transform: scale(1); }
}

.shop-page-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
}

.shop-page-dots__dot {
  min-width: 24px;
  height: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(97, 127, 161, 0.4);
  background: rgba(6, 11, 20, 0.4);
  color: var(--muted);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.shop-page-dots__dot.is-active {
  background: var(--gold);
  color: #2a1f00;
  border-color: var(--gold);
  font-weight: 700;
}

.shop-page-dots__ellipsis {
  color: var(--muted);
  padding: 0 4px;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .shop-summary--flash span strong {
    animation: none;
    color: var(--ok);
    transition: color 0.3s ease;
  }
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.shop-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-page-indicator {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.08em;
}

.shop-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--muted);
  font-size: var(--ui-body);
}

.shop-card__top {
  align-items: flex-start;
  gap: 12px;
}

.shop-card__top-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.shop-card__thumb {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  background:
    radial-gradient(circle at center, rgba(108, 168, 255, 0.22), rgba(12, 18, 30, 0.92) 68%),
    linear-gradient(180deg, rgba(14, 24, 38, 0.88), rgba(8, 13, 22, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.pixel-thumb-grid {
  width: 78px;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
}

.pixel-thumb-grid__cell {
  display: block;
  width: 100%;
  height: 100%;
}

.shop-card__thumb-token {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: rgba(255, 245, 204, 0.84);
  font-size: var(--ui-body-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.shop-card__content {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.loading-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}

.loading-panel,
.loading-tip {
  min-height: 0;
}

.loading-bar {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: rgba(6, 11, 20, 0.65);
  border: 1px solid rgba(97, 127, 161, 0.3);
  overflow: hidden;
  margin-bottom: 14px;
}

.loading-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--player), var(--gold));
  animation: loading-fill 650ms linear forwards;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
}

@keyframes loading-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

.loading-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm);
  color: var(--muted);
  letter-spacing: 0.08em;
}

.loading-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(4px);
  animation: loading-step-reveal 200ms ease-out forwards;
}

.loading-step--1 { animation-delay: 0ms; }
.loading-step--2 { animation-delay: 220ms; }
.loading-step--3 { animation-delay: 440ms; }

.loading-step__mark {
  color: var(--ok);
  font-weight: 700;
}

.loading-step__mark--active {
  color: var(--gold);
  animation: loading-step-pulse 1s ease-in-out infinite;
}

@keyframes loading-step-reveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes loading-step-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.pilot-portrait {
  width: 180px;
  height: 180px;
  padding: 8px;
  border: 3px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(14, 24, 38, 0.8), rgba(8, 13, 22, 0.9));
  border-radius: 12px;
  flex: 0 0 180px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.pilot-portrait .pixel-thumb-grid {
  width: 100%;
  height: 100%;
}

.pilot-portrait--earth { border-color: var(--player); }
.pilot-portrait--lunar { border-color: var(--gold); }

.pilot-card--loading {
  align-items: flex-start;
  gap: 18px;
}

.pilot-card__meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pilot-avatar--inline {
  width: 40px;
  height: 40px;
  font-size: var(--ui-heading-sm);
  border-width: 1px;
}

.loading-tip__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.loading-tip__num {
  font-family: var(--font-ui);
  color: var(--gold);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .loading-bar__fill {
    animation: none;
    width: 100%;
    transition: width 200ms ease;
  }
  .loading-step {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .loading-step__mark--active {
    animation: none;
  }
}

.result-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.2fr);
  gap: 18px;
  min-height: 0;
}

.result-panel--wide {
  grid-column: span 2;
}

.result-highlight {
  margin-top: 8px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.result-stat-card span {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.12em;
}

.result-actions {
  margin-top: 4px;
}

/* Phase 7d result-screen: 勝敗タイトルのトーン分け。
   勝利=黄、敗北=赤、引分=既定色のまま。 */
.result-title--win {
  color: #ffd54f;
  text-shadow: 0 0 12px rgba(255, 213, 79, 0.45);
}
.result-title--lose {
  color: #ff5b5b;
  text-shadow: 0 0 12px rgba(255, 91, 91, 0.4);
}
.result-title--draw {
  color: #cfd8e6;
}

/* Phase 7d result-screen: 順位表(全機体 与ダメ降順)。 */
.result-ranking-table {
  /* Phase 7d result-fixes: table-layout fixed + 列幅指定で項目とのずれを防ぐ。 */
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-body);
  margin-top: 6px;
}
/* 列幅: # / 所属 / パイロット / 撃墜 / 撃沈 / 与ダメ / 命中率 */
.result-ranking-table th:nth-child(1),
.result-ranking-table td:nth-child(1) { width: 40px; }
.result-ranking-table th:nth-child(2),
.result-ranking-table td:nth-child(2) { width: 70px; }
.result-ranking-table th:nth-child(3),
.result-ranking-table td:nth-child(3) { width: auto; }
.result-ranking-table th:nth-child(4),
.result-ranking-table td:nth-child(4) { width: 80px; }
.result-ranking-table th:nth-child(5),
.result-ranking-table td:nth-child(5) { width: 80px; }
.result-ranking-table th:nth-child(6),
.result-ranking-table td:nth-child(6) { width: 100px; }
.result-ranking-table th:nth-child(7),
.result-ranking-table td:nth-child(7) { width: 90px; }
.result-ranking-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(92, 115, 146, 0.35);
}
/* 数値列(撃墜/撃沈/与ダメ/命中率)はヘッダ・セル共に右寄せ + 等幅数字。 */
.result-ranking-table th:nth-child(n+4),
.result-ranking-table td:nth-child(n+4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-ranking-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(92, 115, 146, 0.18);
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-ranking-table .result-rank {
  text-align: right;
  color: var(--muted);
}
.result-ranking-table .result-side {
  font-size: var(--ui-body-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
}
/* Phase 7d result-fixes: faction による行カラー(地球軍=赤系 / ルナー=青系)。 */
.result-ranking-table .result-row--earth .result-side {
  color: #ff6b6b;
}
.result-ranking-table .result-row--lunar .result-side {
  color: #5ac8ff;
}
.result-ranking-table .is-local-player {
  background: rgba(255, 213, 79, 0.10);
  outline: 1px solid rgba(255, 213, 79, 0.45);
}
.result-ranking-table .is-local-player .result-name {
  color: #ffd54f;
  font-weight: 700;
}
.result-self-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: var(--ui-caption);
  letter-spacing: 0.12em;
  background: rgba(255, 213, 79, 0.85);
  color: #1a1500;
  border-radius: 3px;
  vertical-align: middle;
}

/* Phase 7d result-screen: 個人成績グリッド(8 カード)。 */
.result-personal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.result-personal-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(20, 28, 44, 0.55);
  border: 1px solid rgba(92, 115, 146, 0.35);
  border-radius: 6px;
}
.result-personal-card span {
  color: var(--muted);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.1em;
}
.result-personal-card strong {
  font-size: var(--ui-heading-md);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .result-personal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phase 6b-2-3: .battle-hud-bar / .pilot-band* / battle-hp-track /
   battle-boost-track / boost-fill / weapon-readout--battle* rules removed
   with the bottom HUD. Info consolidated into team-roster-bar (Phase 6b-2)
   + per-fighter HP overlay (Phase 6b-3). */

.garage-form-block {
  display: grid;
  gap: 10px;
}

.garage-fixed-loadout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(92, 115, 146, 0.28);
}

.garage-fixed-loadout__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.garage-fixed-loadout__grid {
  display: grid;
  gap: 8px;
}

.garage-fixed-loadout__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(92, 115, 146, 0.22);
  background: rgba(10, 17, 28, 0.42);
}

.garage-fixed-loadout__label {
  color: var(--muted);
  font-size: var(--ui-body-sm);
}

/* Phase 6b-2-3: .battle-center-band / .battle-timer-box / .battle-state-stack
   rules removed with the bottom HUD. Timer now in team-roster-bar (Phase 6b-2);
   loopPanel relocated to .loop-panel-overlay (this file, later rules);
   matchInfoText relocated to .battle-stage__meta. */

@media (max-width: 1280px) {
  .game-shell.ui-frame {
    width: calc(100vw - 20px);
    aspect-ratio: auto;
    height: calc(100vh - 20px);
    min-height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .scene {
    padding: 18px;
  }

  .hub-stage__top,
  .hub-stage__bottom,
  .garage-layout,
  .shop-grid,
  .loading-layout,
  .result-layout,
  .shop-summary {
    grid-template-columns: 1fr;
  }

  .result-panel--wide {
    grid-column: span 1;
  }
}

@media (max-height: 920px) {
  .app-shell--hub.game-shell.ui-frame {
    padding: 12px 14px 14px;
  }

  .scene {
    padding: 8px 10px 10px;
  }

  .scene-mode-tab {
    min-width: 148px;
    min-height: 50px;
    font-size: var(--ui-body);
  }

  .overlay-title {
    margin: 6px 0 8px;
    font-size: clamp(30px, 3.1vw, 40px);
  }

  .overlay-lead {
    font-size: var(--ui-body);
    line-height: 1.55;
  }

  .overlay-section,
  .overlay-item {
    padding: 12px 14px;
  }

  .hub-stage,
  .hub-stage__top,
  .hub-stage__bottom,
  .garage-layout,
  .shop-grid,
  .loading-layout,
  .result-layout {
    gap: 12px;
  }

  .war-screen .overlay-lead {
    display: none;
  }

  .war-screen .hub-stage__top > .overlay-section {
    min-height: 134px;
  }

  .war-screen .hub-stage__bottom > .overlay-section {
    min-height: 134px;
  }

  .war-screen .hub-panel .overlay-item__title,
  .war-screen .sortie-summary__name,
  .war-screen .hub-stat-card__name {
    font-size: var(--ui-heading-md);
  }

  .sortie-bar {
    padding: 12px 14px;
  }

  .sortie-summary__name,
  .hub-stat-card__name,
  .result-highlight {
    font-size: var(--ui-heading-md);
  }

  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-height: 800px) {
  .overlay-label,
  .overlay-subtitle,
  .sortie-summary__eyebrow,
  .sortie-bar__label,
  .hub-stat-card__eyebrow {
    font-size: var(--ui-caption);
  }

  .overlay-title {
    font-size: clamp(26px, 2.8vw, 34px);
  }

  .overlay-lead {
    font-size: var(--ui-body-sm);
    line-height: 1.45;
  }

  .scene__header {
    margin-bottom: 8px;
  }

  .scene__body {
    gap: 10px;
  }

  .overlay-section,
  .overlay-item,
  .sortie-summary__card,
  .result-stat-card,
  .shop-summary span {
    padding: 10px 12px;
  }

  .sortie-summary__card,
  .result-stat-card,
  .shop-summary span {
    min-height: 60px;
  }

  .hub-message {
    font-size: var(--ui-body);
    line-height: 1.55;
  }

  .war-screen .hub-stage__top > .overlay-section,
  .war-screen .hub-stage__bottom > .overlay-section {
    min-height: 118px;
  }

  .war-screen .hub-stage__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .war-screen .hub-stage__bottom > .overlay-section:last-child {
    display: none;
  }

  .war-screen .ranking-list .ranking-row:nth-child(n + 3) {
    display: none;
  }

  .war-screen .overlay-button {
    min-height: 42px;
    padding: 8px 12px;
  }

  .war-screen .sortie-bar,
  .garage-screen .sortie-bar {
    padding: 10px 12px;
    gap: 10px;
  }

  .war-screen .sortie-bar__links,
  .garage-screen .sortie-bar__links {
    display: flex;
  }

  .war-screen .sortie-bar__links .overlay-button,
  .garage-screen .sortie-bar__links .overlay-button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--ui-body-sm);
  }

  .garage-layout {
    grid-template-columns: 290px minmax(0, 1fr) 320px;
  }

  .scene-mode-tabs {
    gap: 8px;
  }

  .scene-mode-tab {
    min-width: 0;
    flex: 1 1 0;
    padding: 0 14px;
    min-height: 48px;
    font-size: var(--ui-body);
  }

  .loading-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .battle-stage__meta {
    top: 6px;
    left: 8px;
    right: 8px;
  }

  .battle-stage__status,
  .battle-mini-button {
    min-height: 22px;
    padding: 3px 7px;
    font-size: var(--ui-caption);
  }

}

@media (max-width: 900px) {
  body {
    padding: 0;
  }

  .game-shell.ui-frame {
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
    padding: 10px;
  }

  .game-shell.ui-frame::before,
  .game-shell.ui-frame::after {
    display: none;
  }

  .screen-root--battle {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .frame-top__cluster {
    justify-content: center;
    flex-wrap: wrap;
  }

  .time-panel {
    justify-self: stretch;
  }

  .system-chip,
  .debug-chip {
    justify-content: center;
  }

  .dev-screen {
    inset: 0;
  }

  .dev-screen__frame {
    padding: 14px;
  }

  .dev-screen__top {
    flex-direction: column;
    align-items: stretch;
  }

  .overlay-grid {
    grid-template-columns: 1fr;
  }

  .sortie-summary__grid,
  .result-stats {
    grid-template-columns: 1fr;
  }

  .scene {
    padding: 14px;
    border-radius: 16px;
  }

  .sortie-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .dev-grid {
    grid-template-columns: 1fr;
  }

  .dev-card--wide {
    grid-column: span 1;
  }

  .pixel-admin-layout,
  .pixel-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Stage Select ===== */
.stage-select-screen {
  /* 既存 .scene が基本スタイルを提供、追加なし */
}

.stage-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 0;
}

.stage-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  background: transparent;
  border: 1px solid rgba(140, 200, 255, 0.25);
}

.stage-card:hover,
.stage-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(140, 200, 255, 0.6);
  outline: none;
}

.stage-card.is-selected {
  border-color: rgba(255, 220, 120, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.35) inset;
}

.stage-card__preview {
  aspect-ratio: 16 / 9;
  background: rgba(10, 20, 40, 0.65);
  border: 1px solid rgba(140, 200, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.stage-card__grid {
  display: grid;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.stage-card__cell {
  background: rgba(80, 140, 220, 0.2);
  border: 1px solid rgba(140, 200, 255, 0.3);
}

.stage-card__cell--center {
  background: rgba(255, 220, 120, 0.35);
  border-color: rgba(255, 220, 120, 0.7);
}

.stage-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-card__title {
  margin: 0;
  font-size: 1.05em;
}

.stage-card__desc {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.4;
}

.solo-stage-chapters {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  max-height: min(620px, calc(100vh - 300px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.solo-stage-chapters::-webkit-scrollbar {
  display: none;
}

.solo-stage-pager__button {
  flex: 0 0 auto;
}

.solo-stage-chapter {
  display: grid;
  grid-template-columns: minmax(200px, 1.15fr) minmax(0, 4fr);
  gap: 12px;
  align-items: stretch;
}

.solo-stage-chapter__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

.solo-stage-chapter__thumbnail {
  position: relative;
  min-height: 256px;
  overflow: hidden;
  border: 1px solid rgba(210, 230, 255, 0.58);
  background-color: #111820;
}

.solo-stage-chapter__thumbnail > span {
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 10px;
  padding: 4px 7px;
  border: 1px solid rgba(220, 235, 255, 0.45);
  background: rgba(3, 8, 15, 0.78);
  color: #f4f7fb;
  font: 700 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.solo-stage-chapter__thumbnail--chapter-1 {
  background-image: url("assets/KV/Chapter 1KV_W281H500.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.solo-stage-chapter__thumbnail--chapter-2 {
  background: #050816;
}

.solo-stage-chapter__thumbnail--chapter-2::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  left: 28px;
  top: 22px;
  background: #c8d7ef;
  box-shadow:
    38px 18px 0 #6f8ab8,
    82px -7px 0 #edf4ff,
    126px 34px 0 #8da7d1,
    154px 5px 0 #dce8fa,
    18px 66px 0 #7892bf,
    72px 78px 0 #d7e3f7,
    118px 58px 0 #6684b6,
    172px 82px 0 #edf4ff,
    24px 142px 0 #dce8fa,
    94px 174px 0 #7892bf,
    158px 132px 0 #edf4ff,
    188px 206px 0 #6684b6;
}

.solo-stage-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: var(--solo-stage-code-row-h) var(--solo-stage-title-row-h) var(--solo-stage-reward-row-h) var(--solo-stage-objectives-row-h);
  gap: var(--solo-stage-card-gap);
  min-height: var(--solo-stage-card-min-height);
  padding: var(--solo-stage-card-pad-y) var(--solo-stage-card-pad-x);
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(210, 230, 255, 0.72);
  background: rgba(4, 10, 20, 0.28);
  color: var(--text-main);
  box-shadow: none;
  transform: none;
}

.solo-stage-card__lock {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  padding: 3px 6px;
  border: 1px solid rgba(220, 235, 255, 0.45);
  background: rgba(3, 8, 15, 0.78);
  color: #f4f7fb;
  font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(230, 237, 248, 0.72);
}

.solo-stage-card:hover,
.solo-stage-card:focus-visible {
  transform: none;
  border-color: rgba(210, 230, 255, 0.92);
  outline: none;
}

.solo-stage-card.is-selected {
  border-color: rgba(255, 220, 120, 0.9);
}

.scene--solo .stage-card.is-selected,
.scene--solo .overlay-actions .overlay-button.is-selected {
  border-color: rgba(255, 220, 120, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.35) inset;
  outline: none;
}

.solo-stage-card__code {
  align-self: center;
  padding-top: var(--solo-stage-code-offset-y);
  color: var(--text-main);
  font-weight: 700;
  font-size: var(--solo-stage-code-font);
}

.solo-stage-card__title {
  display: -webkit-box;
  max-width: var(--solo-stage-title-text-width);
  padding-top: var(--solo-stage-title-offset-y);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--solo-stage-title-line-count);
  color: var(--text-main);
  font-size: var(--solo-stage-title-font);
  font-weight: 700;
  line-height: var(--solo-stage-title-line-height);
}

.solo-stage-card[data-stage-id="solo_01_basic_training"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-01-basic-training);
}
.solo-stage-card[data-stage-id="solo_02_assault_pressure"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-02-assault-pressure);
}
.solo-stage-card[data-stage-id="solo_03_midrange_crossfire"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-03-midrange-crossfire);
}
.solo-stage-card[data-stage-id="solo_04_sniper_line"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-04-sniper-line);
}
.solo-stage-card[data-stage-id="solo_05_lockdown"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-05-lockdown);
}
.solo-stage-card[data-stage-id="solo_06_training_advanced"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-06-training-advanced);
}
.solo-stage-card[data-stage-id="solo_07_training_exam"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-07-training-exam);
}
.solo-stage-card[data-stage-id="solo_08_training_final"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-08-training-final);
}
.solo-stage-card[data-stage-id="solo_06_space_entry"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-06-space-entry);
}
.solo-stage-card[data-stage-id="solo_07_space_patrol"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-07-space-patrol);
}
.solo-stage-card[data-stage-id="solo_08_space_intercept"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-08-space-intercept);
}
.solo-stage-card[data-stage-id="solo_09_space_breakthrough"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-09-space-breakthrough);
}
.solo-stage-card[data-stage-id="solo_10_space_final"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-10-space-final);
}
.solo-stage-card[data-stage-id="solo_14_space_pursuit"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-14-space-pursuit);
}
.solo-stage-card[data-stage-id="solo_15_space_defense"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-15-space-defense);
}
.solo-stage-card[data-stage-id="solo_16_space_final"] .solo-stage-card__title {
  max-width: var(--solo-stage-title-width-solo-16-space-final);
}

.solo-stage-card__reward {
  display: flex;
  align-items: center;
  padding-top: var(--solo-stage-reward-offset-y);
  color: rgba(230, 239, 252, 0.76);
  font-size: var(--solo-stage-reward-font);
  font-weight: 700;
}

.solo-stage-card__objectives {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding-top: var(--solo-stage-objectives-offset-y);
}

.solo-stage-card__objective {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-main);
  font-size: var(--solo-stage-objective-font);
  line-height: 1.2;
}

.solo-stage-card__objective strong {
  color: var(--gold);
  font-size: var(--solo-stage-star-font);
  line-height: 1;
}

.solo-funds-summary {
  padding-block: 10px;
}

.solo-funds-summary .overlay-lead {
  margin: 0;
  font-weight: 700;
}

.solo-stage-card:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* ============================================
 * Phase 3.1 — Admin screen
 * ============================================ */
.scene--admin {
  padding: 16px 20px;
}

.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 16px;
  align-items: start;
}

.admin-layout__list,
.admin-layout__form,
.admin-layout__json {
  background: rgba(10, 18, 32, 0.55);
  border: 1px solid rgba(120, 170, 220, 0.25);
  border-radius: 8px;
  padding: 12px;
}

.admin-gear-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-gear-list__item {
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(40, 60, 90, 0.5);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-gear-list__item:hover {
  background: rgba(60, 90, 130, 0.65);
}

.admin-gear-list__item.is-active {
  background: rgba(80, 130, 190, 0.75);
  border-color: rgba(150, 210, 255, 0.7);
}

.admin-gear-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-form__field label {
  font-size: 0.85em;
  color: rgba(200, 220, 240, 0.85);
}

.admin-form__field input {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(120, 170, 220, 0.4);
  background: rgba(15, 25, 40, 0.8);
  color: #e8f0ff;
  font-size: 0.95em;
}

.admin-form__field input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-form__field small {
  font-size: 0.75em;
  color: rgba(180, 200, 220, 0.6);
}

.admin-form__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.admin-form__sprite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(120, 170, 220, 0.35);
  border-radius: 6px;
}

.admin-sprite-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  padding: 6px;
}

.admin-sprite-preview img {
  image-rendering: pixelated;
  width: 128px;
  height: 96px;
  transform: scale(2);
  transform-origin: center;
}

.admin-sprite-preview span {
  color: rgba(180, 200, 220, 0.55);
  font-size: 0.9em;
}

.admin-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-json-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.admin-json-preview {
  width: 100%;
  min-height: 240px;
  background: rgba(5, 10, 20, 0.7);
  color: #c8e0ff;
  border: 1px solid rgba(120, 170, 220, 0.3);
  border-radius: 4px;
  padding: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8em;
  resize: vertical;
}

/* ============================================================
 * Phase 5e: Onboarding flow (3-step profile creation)
 * ============================================================ */
.onboarding {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.onboarding__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* コンソール見出し(SETTINGS の .overlay-subtitle と同作法。全画面 teal 統一)。 */
.onboarding__section-title {
  margin: 0;
  font-size: var(--ui-heading-sm);
  font-weight: var(--weight-bold);
  color: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding-left: 10px;
  letter-spacing: 0.14em;
}

.onboarding__faction-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 注: faction-card / pilot-card / custom-section は旧 onboarding の残骸(現マークアップは
   face-tile を使用)。全画面 teal 統一に合わせ配色のみ teal 化(描画はされない)。 */
.onboarding__faction-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--teal-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.onboarding__faction-card:hover {
  border-color: var(--teal-dim);
  background: rgba(var(--teal-rgb), 0.1);
}

.onboarding__faction-card.is-selected {
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.14);
}

.onboarding__faction-label {
  font-size: 1.2rem;
  font-weight: 700;
}

.onboarding__faction-desc {
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}

.onboarding__name-input {
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-btn);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  font-size: var(--ui-body);
}

.onboarding__name-input:focus {
  outline: none;
  border-color: var(--teal);
}

/* Phase 6b-2-5: Player name constraint validation feedback. */
.onboarding__name-error {
  margin: 6px 0 0 0;
  min-height: 1.2em;
  color: #ff7878;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.onboarding__name-error.is-visible {
  opacity: 1;
}

/* Phase 6b-2-5: disabled Next button state. */
.overlay-button.is-disabled,
.overlay-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.onboarding__actions {
  display: flex;
  /* 戻るは右上(.qg-back)に集約。下部は前進ボタン(次へ/作成する)のみなので右寄せ。 */
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.scene__step-indicator {
  color: rgba(var(--teal-rgb), 0.7);
  font-size: 0.85rem;
  margin: 0;
}

/* Phase 5e-2: Step 2 (Pilot Selection) — 旧 onboarding の残骸(現マークアップ未使用)。 */
.onboarding__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--teal-line);
  border-radius: 4px;
}

.onboarding__preview-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

.onboarding__preview-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.onboarding__pilot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.onboarding__pilot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--teal-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.onboarding__pilot-card:hover {
  border-color: var(--teal-dim);
  background: rgba(var(--teal-rgb), 0.1);
}

.onboarding__pilot-card.is-selected {
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.14);
}

.onboarding__pilot-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.onboarding__pilot-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.onboarding__custom-section {
  padding: 16px;
  border: 1px dashed var(--teal-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}

.onboarding__custom-section.is-active {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.05);
}

.onboarding__custom-hint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 12px 0;
}

.onboarding__custom-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.onboarding__custom-upload {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.onboarding__custom-status {
  margin-top: 12px;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.onboarding__custom-status--success {
  color: #4ade80;
}

.onboarding__custom-status--error {
  color: #ef4444;
}

/* 登録フロー再構成 S1: 顔(=所属軍)を軍別にグルーピングし、正方形タイルのグリッドで表示 */
.onboarding__face-hint {
  font-size: var(--ui-body-sm);
  color: var(--muted);
  margin: 0 0 12px 0;
}
.onboarding__face-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding__face-group-title {
  margin: 0 0 8px 0;
  font-size: var(--ui-body);  /* 小見出し(❚1本)= --ui-body に統一。❚の本数と文字サイズを一致させる(旧 --ui-body-sm 12px は不整合) */
  font-weight: var(--weight-bold);
  color: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding-left: 8px;
  letter-spacing: 0.12em;
}

/* 顔タイルの正方形グリッド: 顔が増えても auto-fill で折り返す。顔が主役・ラベル余白は排す。 */
.onboarding__face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.onboarding__face-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--teal-line);
  border-radius: var(--radius-btn);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
  cursor: pointer;
  transition: color var(--transition) ease, background var(--transition) ease,
              border-color var(--transition) ease, box-shadow var(--transition) ease;
}
.onboarding__face-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
/* ラベルは顔が主役のため常時非表示、ホバー/選択時のみ下部にオーバーレイ。 */
.onboarding__face-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 4px;
  font-size: var(--ui-caption);
  line-height: 1.2;
  color: var(--text);
  background: rgba(7, 16, 25, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--transition) ease;
}
.onboarding__face-tile:hover {
  border-color: var(--teal-dim);
  box-shadow: 0 0 var(--glow-card) rgba(var(--teal-rgb), 0.18);
}
.onboarding__face-tile:hover .onboarding__face-tile-name,
.onboarding__face-tile.is-selected .onboarding__face-tile-name {
  opacity: 1;
}
/* 選択中: §7 インタラクション状態(teal 基調)。teal 枠 + リング。グロー半径は --glow-card。 */
.onboarding__face-tile.is-selected {
  border-color: var(--teal);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)),
              rgba(var(--teal-rgb), 0.12);
  box-shadow: 0 0 0 1px var(--teal), 0 0 var(--glow-card) rgba(var(--teal-rgb), 0.3);
}

/* 登録フロー再構成 S2: 確認画面(顔大きめ + 陣営/名前) */
.onboarding__confirm-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-panel);
}
.onboarding__confirm-face {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  image-rendering: pixelated;
  background: var(--bg);
  border: 2px solid var(--teal);
  border-radius: var(--radius-btn);
}
.onboarding__confirm-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
.onboarding__confirm-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.onboarding__confirm-row dt {
  flex: 0 0 auto;
  font-size: var(--ui-body-sm);
  color: var(--muted);
  letter-spacing: 0.08em;
  min-width: 4em;
}
.onboarding__confirm-row dd {
  margin: 0;
  font-size: var(--ui-heading-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
}
.onboarding__confirm-q {
  margin: 18px 0 6px 0;
  font-size: var(--ui-heading-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}
.onboarding__confirm-note {
  margin: 0;
  font-size: var(--ui-body-sm);
  color: var(--muted);
  text-align: center;
}
/* 「作成する」= 不可逆な保存が確定する操作。CTA をリング + グロー(--glow-card)で強調。 */
.onboarding__confirm-commit {
  box-shadow: 0 0 0 1px rgba(var(--teal-rgb), 0.5), 0 0 var(--glow-card) rgba(var(--teal-rgb), 0.25);
}

/* ============================================================
   登録フロー(ONBOARDING)の画面様式を SETTINGS(#025 コンソール風)に合わせる。
   レイアウト/見出し/ボタンの作法を SETTINGS と統一。全画面 teal 統一(gold 廃止)。
   ============================================================ */
/* 余白/上端処理を SETTINGS(.scene)と揃える。.onboarding の独自 padding を上書き。 */
.scene.scene--onboarding {
  padding: var(--scene-pad-y) var(--scene-pad-x) var(--scene-pad-x);
  gap: 16px;
}
/* ヘッダ見出し: SETTINGS と同じくコンパクトに。巨大な base .overlay-title
   (clamp 34〜46px)がタイトル系の大見出しのままで SETTINGS のコンソール作法から
   浮いていたため、ステップ見出しをコンソール見出し(左 teal ボーダー + 字間 +
   中見出しサイズ)へ揃える。全画面 teal 統一。 */
/* ヘッダ下の共通全幅ライン(.scene--qg と同位置)。登録 S1/S2 はヘッダに見出し +
   ステップ表示を持つが、帯高を --qg-header-h に固定して下端にラインを引き、線の Y を全画面で
   揃える。本体との間隔は scene の gap:16px が担う(SETTINGS の下余白 16px と一致)。 */
/* 戻る(.qg-back)は右上 absolute。アンカーとして scene を positioned に
   (.scene--settings / .scene--qg と同作法)。戻るは全画面で右上 1 箇所に集約。 */
.scene--onboarding { position: relative; }
.scene--solo { position: relative; }  /* SOLO(仮画面)も .qg-back の右上アンカー */
.scene--onboarding .scene__header {
  /* +1px は .scene--qg と同じ理由(border-bottom の厚み分、線の上端を SETTINGS と揃える)。 */
  min-height: calc(var(--qg-header-h) + 1px);
  margin-bottom: 0;
  border-bottom: 1px solid var(--teal-line);
}
.scene--onboarding .overlay-label {
  color: var(--teal-dim);
}
.scene--onboarding .overlay-title {
  margin: 6px 0 0;
  font-size: var(--ui-heading-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding-left: 10px;
}
.scene--onboarding .scene__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
}
/* ボタン: SETTINGS の settings-back と同作法(パネル地 + 枠 + 控えめ角丸 + モノスペース)。
   大きな gold グラデ CTA を廃し teal コンソール調へ。共通 .qg-btn と同等。 */
.scene--onboarding .onboarding__btn.overlay-button {
  min-width: var(--btn-min-w);
  min-height: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-btn);
  font-family: ui-monospace, "SFMono-Regular", Menlo, var(--font-ui);
  font-size: var(--ui-button-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border-w) solid var(--teal-dim);
  color: var(--teal-soft);
  box-shadow: none;
  transition: color var(--transition) ease, background var(--transition) ease,
              border-color var(--transition) ease, box-shadow var(--transition) ease;
}
.scene--onboarding .onboarding__btn.overlay-button:hover {
  filter: none;
  color: var(--teal-soft);
  background: rgba(var(--teal-rgb), 0.1);
  border-color: var(--teal-dim);
}
/* primary(次へ / 作成する): teal 枠 + teal-bright 文字で主操作を一段強調。 */
.scene--onboarding .onboarding__btn--primary.overlay-button {
  border-color: var(--teal);
  color: var(--teal-bright);
}
.scene--onboarding .onboarding__btn--primary.overlay-button:hover {
  color: var(--teal-bright);
  background: rgba(var(--teal-rgb), 0.16);
  border-color: var(--teal);
}

/* ============================================================
   Phase 5e-3: Onboarding Step 3 (gear selection)
   ============================================================ */
.onboarding__gear-hint {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0 0 12px 0;
}

.onboarding__gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.onboarding__gear-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: rgba(20, 30, 48, 0.55);
  border: 2px solid rgba(120, 160, 200, 0.35);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  font: inherit;
  text-align: center;
}

.onboarding__gear-card:hover {
  border-color: rgba(120, 220, 255, 0.7);
  background: rgba(40, 70, 100, 0.6);
}

.onboarding__gear-card.is-selected {
  border-color: #63f3ff;
  background: rgba(60, 130, 180, 0.45);
  box-shadow: 0 0 12px rgba(99, 243, 255, 0.35);
}

.onboarding__gear-sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
}

.onboarding__gear-sprite--fallback {
  border: 1px dashed rgba(255, 255, 255, 0.25);
}

.onboarding__gear-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.onboarding__gear-role {
  font-size: 0.8rem;
  opacity: 0.75;
}

.onboarding__gear-stats {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.85;
}

/* ================================================================
   Phase 6b-2-1: Team roster bar (v4 mockup form 5)
   Upper overlay showing all team fighters' HP.
   ================================================================ */
/* 注: これは2つ目の :root ブロック(team-roster 専用)。UI Tuner は先頭ブロックのみ
   対象で、ここは読み書き・ハイライトの対象外(不変)。詳細はファイル先頭のメモ参照。 */
:root {
  --team-ally-bg: #1a3850;
  --team-ally-border: var(--player-mid);
  --team-ally-text: var(--player-soft);
  --team-enemy-bg: #502020;
  --team-enemy-border: var(--earth-deep);
  --team-enemy-text: var(--earth);
  --team-hp-low: #ffa030;
  --team-hp-critical: #ff3030;
  /* Phase 7d card-130: 味方/敵 UI カード関連を 130% に拡大(カード間隔 ×1.3)。 */
  --team-roster-gap: 10.4px;
  --team-roster-timer-color: var(--gold);
}

.team-roster-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: none; /* デフォルト非表示。data-state="visible" で開放 */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  z-index: 40;
  font-family: inherit;
}

.team-roster-bar[data-state="visible"] {
  display: flex;
}

/* Phase 7b Step 6.1: Faction-fixed roster placement (left=lunar, right=earth) */
body[data-player-faction="earth"] .team-roster-bar {
  flex-direction: row-reverse;
}

.team-roster-bar__group {
  display: flex;
  align-items: center;
  gap: var(--team-roster-gap);
  pointer-events: auto;
}

.team-roster-bar__group--enemy {
  flex-direction: row-reverse;
}

.team-roster-bar__timer {
  /* Phase 7d hud-150: HUD を 150% に拡大(padding/font/border-radius/letter-spacing 全て ×1.5)。 */
  flex: 0 0 auto;
  padding: 9px 21px;
  background: rgba(7, 13, 21, 0.72);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  color: var(--team-roster-timer-color);
  font-size: var(--ui-heading-lg);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
  pointer-events: auto;
}

/* Phase 7a Step 5: force gauge HUD (vertical stack inside the
   center column — timer above, both-side gauges below). */
.team-roster-bar__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}

.team-roster-bar__force {
  /* Phase 7d hud-150: HUD を 150% に拡大(width/gap ×1.5)。 */
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 300px;
}

.team-roster-bar__force-row {
  /* Phase 7d hud-150: HUD を 150% に拡大(gap/font ×1.5)。 */
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-game);
  font-size: var(--ui-heading-sm);
  font-weight: bold;
}

.team-roster-bar__force-row--player {
  flex-direction: row;
}

.team-roster-bar__force-row--enemy {
  flex-direction: row-reverse;
}

.team-roster-bar__force-num {
  /* Phase 7d hud-150: HUD を 150% に拡大(flex-basis/letter-spacing ×1.5)。 */
  flex: 0 0 36px;
  text-align: center;
  letter-spacing: 0.75px;
}

.team-roster-bar__force-row--player .team-roster-bar__force-num {
  color: var(--player-soft);
}

.team-roster-bar__force-row--enemy .team-roster-bar__force-num {
  color: var(--earth);
}

.team-roster-bar__force-bar {
  /* Phase 7d hud-150: HUD を 150% に拡大(height/border-radius ×1.5)。 */
  flex: 1;
  height: 12px;
  background: rgba(7, 13, 21, 0.8);
  border: 1px solid rgba(210, 222, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.team-roster-bar__force-fill {
  height: 100%;
  width: 100%;
  transition: width 0.3s ease;
}

.team-roster-bar__force-row--player .team-roster-bar__force-fill {
  background: linear-gradient(90deg, var(--player-mid), var(--player-soft));
}

.team-roster-bar__force-row--enemy .team-roster-bar__force-fill {
  background: linear-gradient(270deg, var(--earth-deep), var(--earth));
}

/* Phase 7a Step 6: mid-point capture status */
/* Phase 7d hud-150: HUD を 150% に拡大(gap/margin ×1.5)。 */
.team-roster-bar__capture {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  justify-content: center;
}

.team-roster-bar__capture-node {
  /* Phase 7d hud-150: HUD を 150% に拡大(gap/padding/border-radius/min-width/font ×1.5)。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  background: rgba(7, 13, 21, 0.8);
  border: 1px solid rgba(140, 140, 140, 0.5);
  border-radius: 6px;
  min-width: 54px;
  font-family: var(--font-game);
  font-size: var(--ui-heading-sm);
  font-weight: bold;
  color: rgba(220, 226, 236, 0.85);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.team-roster-bar__capture-node[data-owner="player"] {
  border-color: var(--player-soft);
  background: rgba(35, 74, 108, 0.6);
  color: var(--player-soft);
}

.team-roster-bar__capture-node[data-owner="enemy"] {
  border-color: var(--earth);
  background: rgba(108, 35, 35, 0.6);
  color: var(--earth);
}

/* Phase 7a Step 6 hotfix 6: 3-state presence model. Replaces the
   hotfix 4 data-progressing tint (which colored the HUD as soon as
   captureProgress moved off zero) with a presence-based state that
   matches Masafumi's playtest intuition:
     - empty (neither side in range): no animation, default style
     - player only: blue blink (1s)
     - enemy only: red blink (1s)
     - contested (both in range): yellow blink (0.6s, faster cadence)
     - fully captured: solid faction color via [data-owner] above */
.team-roster-bar__capture-node[data-presence="player"] {
  animation: capture-blink-player 1s ease-in-out infinite;
}

.team-roster-bar__capture-node[data-presence="enemy"] {
  animation: capture-blink-enemy 1s ease-in-out infinite;
}

.team-roster-bar__capture-node[data-presence="contested"] {
  animation: capture-blink-contested 0.6s ease-in-out infinite;
}

/* Phase 7b Step 6.3: keyframes refactored to read CSS variables so the
   body[data-player-faction="earth"] override can swap the blink colors.
   Without this, the hardcoded values would freeze the blink at the
   defaults regardless of player faction, defeating the override. */
@keyframes capture-blink-player {
  0%, 100% {
    border-color: var(--capture-blink-player-border-1, rgba(123, 196, 245, 0.3));
    background: var(--capture-blink-player-bg-1, rgba(35, 74, 108, 0.15));
  }
  50% {
    border-color: var(--capture-blink-player-border-2, rgba(123, 196, 245, 0.85));
    background: var(--capture-blink-player-bg-2, rgba(35, 74, 108, 0.5));
    color: var(--capture-blink-player-color, rgba(190, 220, 240, 1));
  }
}

@keyframes capture-blink-enemy {
  0%, 100% {
    border-color: var(--capture-blink-enemy-border-1, rgba(245, 123, 123, 0.3));
    background: var(--capture-blink-enemy-bg-1, rgba(108, 35, 35, 0.15));
  }
  50% {
    border-color: var(--capture-blink-enemy-border-2, rgba(245, 123, 123, 0.85));
    background: var(--capture-blink-enemy-bg-2, rgba(108, 35, 35, 0.5));
    color: var(--capture-blink-enemy-color, rgba(245, 200, 200, 1));
  }
}

@keyframes capture-blink-contested {
  0%, 100% {
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(50, 40, 15, 0.25);
  }
  50% {
    border-color: rgba(var(--gold-rgb), 1);
    background: rgba(74, 60, 22, 0.6);
    color: rgba(255, 240, 180, 1);
  }
}

/* Phase 7a Step 6 hotfix 5: respawn-point selection overlay. Anchored
   to .battle-stage__surface (position: relative) so it stays centered
   on the canvas viewport. pointer-events: none keeps the underlying
   game responsive while the overlay is up (selection cycles via Tab,
   not click). */
.respawn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
  width: min(420px, 80%);
  padding: 16px 20px;
  background: rgba(7, 13, 21, 0.85);
  border: 2px solid rgba(123, 196, 245, 0.6);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-ui);
  backdrop-filter: blur(2px);
}

.respawn-overlay[data-state="hidden"] {
  display: none;
}

.respawn-overlay__title {
  font-size: var(--ui-body);
  font-weight: 700;
  color: var(--player-soft);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.respawn-overlay__hint {
  font-size: var(--ui-body-sm);
  color: rgba(123, 196, 245, 0.7);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}

.respawn-overlay__buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.respawn-overlay__button {
  min-width: 64px;
  padding: 6px 12px;
  background: rgba(15, 25, 40, 0.6);
  border: 1px solid rgba(123, 196, 245, 0.3);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--ui-body);
  font-weight: 600;
  font-family: inherit;
  transition: all 0.2s ease;
}

.respawn-overlay__button.is-selected {
  background: rgba(35, 74, 108, 0.8);
  border-color: var(--player-soft);
  color: var(--player-soft);
  box-shadow: 0 0 8px rgba(123, 196, 245, 0.3);
}

.respawn-overlay__countdown {
  font-size: var(--ui-body-sm);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.team-roster-bar__capture-icon {
  /* Phase 7a Step 6 hotfix 2: 12 → 11 px and 1 → 0.5 letter-spacing
     to fit the two-character Japanese label '拠点A' within the
     existing HUD width without wrapping. */
  /* Phase 7d hud-150: HUD を 150% に拡大(font/letter-spacing ×1.5)。 */
  font-size: 16.5px;
  letter-spacing: 0.75px;
}

.team-roster-bar__capture-state {
  /* Phase 7d hud-150: HUD を 150% に拡大(font/letter-spacing ×1.5)。 */
  font-size: 13.5px;
  letter-spacing: 0.75px;
  opacity: 0.85;
}

/* Team card */
/* Phase 7d card-130: 味方/敵 UI カードのサイズ系プロパティを ×1.3。 */
.team-roster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.2px;
}

.team-roster-card__slot {
  width: 54.6px;
  height: 54.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--team-ally-bg);
  border: 1.5px solid var(--team-ally-border);
  border-radius: 5.2px;
  overflow: hidden;
  position: relative;
  transition: filter 200ms ease, opacity 200ms ease;
}

.team-roster-card__slot-label {
  color: var(--team-ally-text);
  font-size: 14.3px;
  font-weight: bold;
  letter-spacing: 1.3px;
}

.team-roster-card__slot-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-roster-card__slot-image--gear {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: none;
  object-position: left top;
  image-rendering: pixelated;
}

/* Phase 7b Step 2 hotfix: 機体タイプ 3 文字タグ(GEN/ASL/SCT/TNK/FLT)。
   slot 右下に絶対配置で重ね、半透明黒地+タイプ別ボーダー色で識別性を確保。 */
.team-roster-card__type-tag {
  /* Phase 7d card-130: ロールタグ(GEN/SNP/ASL/...) ×1.3。 */
  position: absolute;
  right: 1.3px;
  bottom: 1.3px;
  font-family: var(--font-game);
  font-size: 10.4px;
  font-weight: bold;
  letter-spacing: 0.65px;
  line-height: 1;
  padding: 1.3px 2.6px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border-radius: 2.6px;
  pointer-events: none;
  z-index: 2;
}
.team-roster-card__type-tag[data-type="general"] { color: #cfe9ff; }
.team-roster-card__type-tag[data-type="assault"] { color: #ffcf99; }
.team-roster-card__type-tag[data-type="scout"]   { color: #c8ffcf; }
.team-roster-card__type-tag[data-type="tank"]    { color: #ffd0d0; }
.team-roster-card__type-tag[data-type="flight"]  { color: #d8c8ff; }

/* Phase 6b-2-4 hotfix 2: name as independent row below icon (matches canvas label) */
/* Phase 7d card-130: 名前フォント/最大幅 ×1.3。 */
.team-roster-card__name {
  font-family: var(--font-game);
  font-size: 14.3px;
  font-weight: bold;
  color: var(--team-ally-text);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.1;
  max-width: 54.6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.team-roster-card--enemy .team-roster-card__name {
  color: var(--team-enemy-text);
}

.team-roster-card__hp {
  /* Phase 7d card-130: HP 数値 ×1.3。 */
  font-size: 15.6px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  min-width: 54.6px;
  text-align: center;
  color: var(--team-ally-text);
  transition: color 200ms ease;
}

/* Enemy variant */
.team-roster-card--enemy .team-roster-card__slot {
  background: var(--team-enemy-bg);
  border-color: var(--team-enemy-border);
}
.team-roster-card--enemy .team-roster-card__slot-label {
  color: var(--team-enemy-text);
}
.team-roster-card--enemy .team-roster-card__hp {
  color: var(--team-enemy-text);
}

/* HP threshold states (Phase 6b-7 で実装、現状は class 用意のみ) */
.team-roster-card__hp.low {
  color: var(--team-hp-low);
}
.team-roster-card__hp.critical {
  color: var(--team-hp-critical);
  animation: teamRosterHpBlink 600ms ease-in-out infinite;
}

/* Downed state (Phase 6b-6 で実装、現状は class 用意のみ) */
.team-roster-card.downed .team-roster-card__slot {
  opacity: 0.3;
  filter: grayscale(1);
}
.team-roster-card.downed .team-roster-card__slot::after {
  /* Phase 7d card-130: 撃破×マーク ×1.3。 */
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff5050;
  font-size: 36.4px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
.team-roster-card.downed .team-roster-card__hp {
  text-decoration: line-through;
  opacity: 0.5;
}

/* Phase 7d killcount-accuracy: 自軍カードの撃墜数表示。
   HP の下に小さく黄色で控えめに描画(視認しやすい monospace)。 */
.team-roster-card__kills {
  /* Phase 7d card-130: 撃墜数 ×1.3。 */
  font-size: 11.7px;
  font-family: var(--font-game);
  color: #ffcc00;
  text-align: center;
  margin-top: 1.3px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.team-roster-card.downed .team-roster-card__kills {
  opacity: 0.5;
}

/* Damage flash (Phase 6b-5 で発火、現状は class 用意のみ) */
.team-roster-card__slot.flash-damage {
  animation: teamRosterFlash 400ms ease-out;
}

/* Critical pulse — Phase 6b-7
   注意: この CSS animation は実質非機能。renderTeamRosterGroup が毎フレーム
   container.innerHTML = "" で slot 要素を破棄→再生成するため、CSS animation
   はフレーム 0 にリセットされ続けて見えない。
   実際の脈動は script.js renderTeamRosterGroup 側で performance.now() ベースに
   インラインスタイルとして計算・適用している。本定義は将来 incremental render
   (Phase 6c-render-perf 候補)に移行した際の予約として残す。 */
.team-roster-card__slot.critical-pulse {
  animation: teamRosterCritPulse 800ms ease-in-out infinite;
}

@keyframes teamRosterHpBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes teamRosterFlash {
  0% { filter: brightness(1) saturate(1); }
  20% { filter: brightness(2.5) saturate(0.3); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes teamRosterCritPulse {
  0%, 100% {
    box-shadow: 0 0 4px var(--team-hp-critical), inset 0 0 4px var(--team-hp-critical);
    border-color: var(--team-hp-critical);
  }
  50% {
    box-shadow: 0 0 10px var(--team-hp-critical), inset 0 0 8px var(--team-hp-critical);
    border-color: var(--team-hp-critical);
  }
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .team-roster-bar { gap: 10px; }
  /* Phase 7d card-130: レスポンシブ上書きも ×1.3。 */
  .team-roster-card__slot { width: 46.8px; height: 46.8px; }
  .team-roster-card__hp { font-size: 14.3px; min-width: 46.8px; }
  /* Phase 7d hud-150: HUD を 150% に拡大(レスポンシブ上書きも ×1.5)。 */
  .team-roster-bar__timer { font-size: var(--ui-heading-lg); padding: 7.5px 15px; }
  .team-roster-card__name { font-size: var(--ui-body); max-width: 46.8px; }
}

@media (max-width: 900px) {
  /* Phase 7d card-130: レスポンシブ上書きも ×1.3。 */
  .team-roster-card__slot { width: 41.6px; height: 41.6px; }
  .team-roster-card__slot-label { font-size: var(--ui-body); }
  .team-roster-card__hp { font-size: var(--ui-body); min-width: 41.6px; }
  .team-roster-card__name { font-size: 11.7px; max-width: 41.6px; }
}

/* ============================================
   Phase 6b-2-3: Loop panel centered overlay
   ============================================ */
.loop-panel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 13, 21, 0.65);
  backdrop-filter: blur(2px);
  z-index: 45;
  pointer-events: auto;
}

.loop-panel-overlay[data-state="hidden"] {
  display: none;
}

.loop-panel-overlay__inner {
  min-width: 320px;
  max-width: 520px;
  padding: 28px 32px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  text-align: center;
}

.loop-panel-overlay__title {
  font-size: var(--ui-heading-md);
  color: var(--gold);
  margin: 0 0 12px;
}

.loop-panel-overlay__body {
  font-size: var(--ui-body);
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 20px;
  white-space: pre-wrap;
}

.loop-panel-overlay__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.loop-panel-overlay__actions:empty {
  display: none;
}

.loop-panel-overlay__actions button {
  padding: 8px 20px;
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.loop-panel-overlay__actions button:hover {
  background: var(--gold-deep);
  color: var(--text);
}

/* ============================================
   Phase 6b-2-3 / Phase 7b Step 5 / Phase 7b Step 6.2:
   Cooldown gauges on player team-roster-card
   - 特 (special weapon, L key) — orange when ready
   - 早 (boost, Shift) — faction color when ready
   DORMANT (Step 6.2): roster card 上の cooldown ゲージは廃止し、
     描画を canvas 側 drawFighterCooldownBars() (機体直下 48×3px) に
     移行した。以下のルールはマッチしないが、再活性化に備えて保持。
   ============================================ */

/* ---- Boost (早) ---- */
.team-roster-card__boost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 42px;
  margin-top: 2px;
}

.team-roster-card__boost-text {
  font-size: var(--ui-caption);
  font-weight: bold;
  color: var(--team-ally-text);
  letter-spacing: 0;
  font-family: var(--font-game);
  line-height: 1;
}

.team-roster-card__boost-text[data-state="active"] {
  color: #ffffff;
}
.team-roster-card__boost-text[data-state="cooldown"] {
  color: rgba(150, 150, 150, 0.9);
}

.team-roster-card__boost-bar-track {
  width: 42px;
  height: 3px;
  background: rgba(7, 13, 21, 0.6);
  border-radius: 2px;
  overflow: hidden;
}

.team-roster-card__boost-bar-fill {
  height: 100%;
  background: rgba(150, 150, 150, 0.8); /* default: cooldown gray */
  width: 0%;
  transition: width 120ms linear, background 200ms ease, box-shadow 200ms ease;
}

/* Phase 7b Step 5: ready state defaults to lunar blue. Earth players
   get red via body[data-player-faction="earth"] override below. */
.team-roster-card__boost-bar-fill[data-state="ready"] {
  background: var(--player-mid);
  box-shadow: 0 0 4px rgba(74, 139, 196, 0.7);
}
.team-roster-card__boost-bar-fill[data-state="active"] {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
.team-roster-card__boost-bar-fill[data-state="cooldown"] {
  background: rgba(150, 150, 150, 0.8);
  box-shadow: none;
}

/* Faction color override for boost ready state */
body[data-player-faction="earth"] .team-roster-card__boost-bar-fill[data-state="ready"] {
  background: var(--earth-deep);
  box-shadow: 0 0 4px rgba(196, 74, 74, 0.7);
}
body[data-player-faction="earth"] .team-roster-card__boost-text[data-state="ready"] {
  color: var(--earth);
}
body[data-player-faction="lunar"] .team-roster-card__boost-text[data-state="ready"] {
  color: var(--player-soft);
}

/* ============================================================
   Phase 7b Step 6.3: Faction-coupled HUD colors (earth player)
   Step 6.1 fixed the LAYOUT (left=lunar, right=earth) but the
   COLORS were still tied to player/enemy semantics (ally=blue,
   enemy=red regardless of which faction the player chose).
   This block swaps all relevant colors when player is earth so
   that lunar always reads blue and earth always reads red,
   matching the visual identity established by Step 2 (thrusters)
   and Step 5 (boost gauge).
   Implementation: reuses the body[data-player-faction] override
   pattern from Step 5 — pure CSS, no JS class changes.
   ============================================================ */
body[data-player-faction="earth"] {
  /* Roster card variables (--team-ally-* / --team-enemy-* swap)
     The variable names retain "ally"/"enemy" semantics for code
     stability (104+ JS sites use playerTeam/enemyTeam); only the
     concrete color values are swapped to match faction identity. */
  --team-ally-bg: #502020;
  --team-ally-border: var(--earth-deep);
  --team-ally-text: var(--earth);
  --team-enemy-bg: #1a3850;
  --team-enemy-border: var(--player-mid);
  --team-enemy-text: var(--player-soft);

  /* Capture node presence-blink keyframes — swap so a "player"
     presence (ally in range) blinks red on earth side, and an
     "enemy" presence (lunar in range) blinks blue. */
  --capture-blink-player-border-1: rgba(245, 123, 123, 0.3);
  --capture-blink-player-bg-1: rgba(108, 35, 35, 0.15);
  --capture-blink-player-border-2: rgba(245, 123, 123, 0.85);
  --capture-blink-player-bg-2: rgba(108, 35, 35, 0.5);
  --capture-blink-player-color: rgba(245, 200, 200, 1);
  --capture-blink-enemy-border-1: rgba(123, 196, 245, 0.3);
  --capture-blink-enemy-bg-1: rgba(35, 74, 108, 0.15);
  --capture-blink-enemy-border-2: rgba(123, 196, 245, 0.85);
  --capture-blink-enemy-bg-2: rgba(35, 74, 108, 0.5);
  --capture-blink-enemy-color: rgba(190, 220, 240, 1);
}

/* Force gauge: bar gradient + number color override */
body[data-player-faction="earth"] .team-roster-bar__force-row--player .team-roster-bar__force-fill {
  background: linear-gradient(90deg, var(--earth-deep), var(--earth));
}
body[data-player-faction="earth"] .team-roster-bar__force-row--enemy .team-roster-bar__force-fill {
  background: linear-gradient(270deg, var(--player-mid), var(--player-soft));
}
body[data-player-faction="earth"] .team-roster-bar__force-row--player .team-roster-bar__force-num {
  color: var(--earth);
}
body[data-player-faction="earth"] .team-roster-bar__force-row--enemy .team-roster-bar__force-num {
  color: var(--player-soft);
}

/* Capture node solid-ownership color override (data-owner) */
body[data-player-faction="earth"] .team-roster-bar__capture-node[data-owner="player"] {
  border-color: var(--earth-deep);
  background: rgba(108, 35, 35, 0.6);
  color: var(--earth);
}
body[data-player-faction="earth"] .team-roster-bar__capture-node[data-owner="enemy"] {
  border-color: var(--player-mid);
  background: rgba(35, 74, 108, 0.6);
  color: var(--player-soft);
}

/* ---- Special (特) ---- */
.team-roster-card__special {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 42px;
  margin-top: 2px;
}

.team-roster-card__special-text {
  font-size: var(--ui-caption);
  font-weight: bold;
  color: rgba(255, 170, 85, 0.9); /* default: orange */
  letter-spacing: 0;
  font-family: var(--font-game);
  line-height: 1;
}
.team-roster-card__special-text[data-state="cooldown"] {
  color: rgba(150, 150, 150, 0.9);
}
.team-roster-card__special-text[data-state="ready"] {
  color: #ffaa55;
}

.team-roster-card__special-bar-track {
  width: 42px;
  height: 3px;
  background: rgba(7, 13, 21, 0.6);
  border-radius: 2px;
  overflow: hidden;
}

.team-roster-card__special-bar-fill {
  height: 100%;
  background: rgba(150, 150, 150, 0.8); /* default: cooldown gray */
  width: 0%;
  transition: width 120ms linear, background 200ms ease, box-shadow 200ms ease;
}
.team-roster-card__special-bar-fill[data-state="ready"] {
  background: #ffaa55;
  box-shadow: 0 0 4px rgba(255, 170, 85, 0.7);
}
.team-roster-card__special-bar-fill[data-state="cooldown"] {
  background: rgba(150, 150, 150, 0.8);
  box-shadow: none;
}

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .team-roster-card__boost,
  .team-roster-card__boost-bar-track,
  .team-roster-card__special,
  .team-roster-card__special-bar-track { width: 36px; }
}

@media (max-width: 900px) {
  .team-roster-card__boost,
  .team-roster-card__boost-bar-track,
  .team-roster-card__special,
  .team-roster-card__special-bar-track { width: 32px; }
}

/* Dev perf HUD (FPS counter + log download). Battle-only minimal style. */
.perf-hud {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ui-body-sm);
  line-height: 1;
  color: #e6f3ff;
  pointer-events: auto;
  z-index: 20;
  user-select: none;
}
.perf-hud[data-state="hidden"] { display: none; }
.perf-hud__fps { font-weight: 600; color: #7df7a4; }
.perf-hud__fps[data-tier="red"] { color: #ff5c5c; }
.perf-hud__fps[data-tier="yellow"] { color: var(--gold); }
.perf-hud__fps[data-tier="green"] { color: #7df7a4; }
.perf-hud__dl {
  font: inherit;
  color: #e6f3ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
}
.perf-hud__dl:hover { background: rgba(255, 255, 255, 0.18); }
.perf-hud__dl:active { background: rgba(255, 255, 255, 0.28); }

/* =========================================
   SETTINGS 再設計(タブ式)— P1_TITLE/SETTINGS
   フォートナイト風の上部横並びタブ + teal/cyan アクティブ表示。
   タブは配列駆動(SETTINGS_TABS)で生成、将来の項目追加に対応。
   ========================================= */
.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-back {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* ① 設定画面のみ「開始画面」パンくず + 「設定・操作」大見出しを非表示にする。
   他画面共通の scene__header / overlay-label / overlay-title の仕組みは壊さず、
   .scene--settings スコープでだけ display:none。戻る(✕)は右上へ絶対配置。 */
.scene--settings { position: relative; }
.scene--settings .overlay-label,
.scene--settings .overlay-title { display: none; }
/* 見出しを消したので header はスペーサとしてのみ残す(高さ 0)。 */
.scene--settings .scene__header {
  margin-bottom: 0;
  min-height: 0;
}
/* 戻る(↩)は右上固定。タブ列とは別レイヤなので縦に競合しない。 */
.scene--settings .settings-back {
  position: absolute;
  /* ③ 戻る位置を全画面共通トークンに(値は現値と同一 12px/16px、描画不変)。
     .qg-back と同じトークンを参照して全画面で右上を統一(箱の意匠=padding/角丸はタブ合わせで温存)。 */
  top: var(--back-top);
  right: var(--back-right);
  z-index: 5;
  /* ② タブと同系のコンソール風: --panel 系背景 + teal-line 枠 + teal 文字 + 控えめ角丸。
     overlay-button(secondary)の大きな角丸/ゴールド系を上書きしてタブバーと視覚統一。 */
  min-width: 0;
  min-height: 0;
  padding: var(--tab-pad-y) var(--tab-pad-x);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border-w) solid var(--teal-dim);
  border-radius: 4px;
  /* 通常=白(非選択)、hover/focus で teal(共通インタラクション §7)。白=非選択/teal=選択中。 */
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--ui-button-md);
  letter-spacing: 0.08em;
}
/* hover の色/背景は共通ルールで付与。overlay-button の brightness filter は無効化して
   タブと同じ「ティント色変化のみ」の演出に揃える。 */
.scene--settings .settings-back:hover { filter: none; }
/* scene__body の grid/stretch を解除して上揃え(下に余白が出る形)に。 */
.scene--settings .scene__body,
.scene--profile .scene__body {
  display: block;
  flex: 0 0 auto;
}
/* 見出しを消した分の上端余白(詰まりすぎ/空きすぎない 24〜32px 目安)。
   scene padding-top(10px)+ この margin で合計 ≈ 28px。
   ① 帯高を共通トークンに固定: margin(--qg-header-tab-gap)+ タブ最小高 = --qg-header-h。
   これでタブ下線(.settings-content border-top)の Y が他画面のヘッダ下線と厳密に一致する。
   min-height なので折返し時は伸びる(クリップしない)。 */
.scene--settings .settings-tabs,
.scene--profile .settings-tabs {
  margin-top: 8px;
  min-height: 0;
}
/* 近未来コンソール風タブ列(参考 noveblo #025 / 色は teal トークンへ置換)。
   端末パネル: --panel 系の暗面 + teal-line の枠、各タブを縦罫線で区切るセル状に。 */
.settings-tabs {
  display: flex;
  gap: 0;             /* セル状に密着 → 区切りは各タブの border-right(縦罫線)で表現 */
  flex-wrap: wrap;    /* 狭幅では折り返し(レスポンシブ維持) */
  /* ② タブバーは内容幅(最長タブに全タブを揃えた合計幅)。画面全幅に伸ばさない。
     各タブの等幅化は JS(equalizeSettingsTabs)が min-width を付与して実現。 */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border-w) solid var(--teal-dim);
  /* ① タブ群は「全幅の下線レール」(.settings-content の border-top)の上に載せる。
     自身の下辺は持たず、底を開けてレールに接続(コンソールが横罫線上に並ぶ意匠)。 */
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  position: relative;
  align-items: stretch;
  align-self: flex-start;
}
.settings-tab {
  position: relative;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--teal-line);  /* セル区切りの縦罫線 */
  /* 状態色統一(白=非選択 / teal=選択中): 非アクティブタブは白(--text)。アクティブ
     (teal-bright §7 + 上部ネオンライン)との「白 vs teal」で選択を表す。グレー(--muted)や
     teal-soft/dim の濃淡で選択を示す旧方式から変更。 */
  color: var(--text);
  /* 英字はモノスペースで端末感、和字ラベル(サウンド/言語等)は --font-ui へフォールバック。
     §11: サイズ/ウェイトはトークン参照(14px→--ui-button-md, 700→--weight-bold)。 */
  font-family: ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 14px;
  /* 行高を tight に固定: フォント既定の normal(字形依存で不定)だとタブ高が伸び、
     帯高(--qg-header-h)を超えてラインが下振れする。1.2 に固定して帯高を確定させる。 */
  line-height: var(--leading-tight);
  letter-spacing: 0.12em;
  padding: 6px 14px;
  text-align: center;  /* ② 等幅化で広がったセル内でラベルを中央寄せ */
  cursor: pointer;
}
.settings-tab:last-child { border-right: 0; }
/* hover / is-active の色・背景は「インタラクション状態の共通ルール」(後段)で一括定義。 */
/* 選択状態の飾り線(旧 ::before ネオンライン)は撤去。選択中タブは
   文字 teal-bright + 背景 rgba(teal) + 枠(共通インタラクション則 §7)だけで示す。
   関連トークン --glow-tab はこのグロー専用だったが他に var() 参照が無く、
   撤去後は dead token(即削除はせず温存。詳細は handoff のノート参照)。 */
/* コンテンツ領域: 極薄スキャンライン(走査線)を背面に重ねる。可読性最優先で α 0.04。 */
.settings-content {
  min-height: 0;
  position: relative;
  /* ① 全幅の下線レール: タブ群(fit-content)の幅に関係なく設定エリア左端〜右端まで
     teal-line を通す。タブバーは border-bottom:0 でこのレール上に接続する。 */
  border-top: 1px solid var(--teal-line);
  /* ② タブ群(下線レール)〜本文の余白。トークン化して UI で調整可能に
     (旧: 16px 固定 → var(--settings-tab-gap)。間隔を約倍へ)。 */
  padding-top: var(--settings-tab-gap);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(var(--teal-rgb), 0.04) 0px,
    rgba(var(--teal-rgb), 0.04) 1px,
    transparent 1px,
    transparent 4px
  );
}
/* タブ切替時のフェードイン(display none→'' で再生)。テキストは背面の縞より前面。 */
.settings-panel {
  position: relative;
  z-index: 1;
  animation: techFadeIn 0.3s ease both;
}
@keyframes techFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 言語: ドロップダウン置換。LANGUAGES 駆動の 4列×2行 タイルグリッド。 */
.settings-lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 480px;
}
.settings-lang-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(var(--teal-rgb), 0.04);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--ui-button-sm);
  line-height: var(--leading-tight);
  cursor: pointer;
  /* hover / is-current の色・背景・枠・transition は共通ルール(後段)で定義。 */
}
.settings-lang-tile__check {
  font-size: var(--ui-caption);
  color: var(--teal-bright);
}

/* サウンド: ラベル / スライダー / % を 3 列グリッドで縦に揃え、各行同じ高さに。 */
.settings-sound-grid {
  display: grid;
  grid-template-columns: 132px 1fr 52px;
  align-items: center;
  row-gap: 12px;
  column-gap: 12px;
  max-width: 480px;
}
.settings-sound-grid__label {
  /* ラベル(マスター音量/BGM/SE/ミュート)は選択項目ではないので白(白=非選択 §5)。
     スライダーの teal(accent-color)や % 値(--teal-text)はデータ表示なので据え置き。
     文字サイズは本文トークン --ui-body を参照(UI Tuner の FONTS=body で調整可能に。
     旧: font-size 未指定でブラウザ既定継承 → UI Tuner で動かせなかった)。 */
  color: var(--text);
  font-size: var(--ui-body);
  font-weight: 600;
}
.settings-sound-grid__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--ui-body);   /* % 値も本文トークンに揃える(ラベルと同サイズ・UI Tuner 連動)。 */
  color: var(--teal-text);
}
.settings-sound-grid input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
  cursor: pointer;
}

/* ③ ミュート: スイッチ型トグル。OFF(音あり)=グレー/ノブ左、
   ON(ミュート)=teal 点灯/ノブ右。状態は .is-on と aria-checked で双方向同期。 */
.settings-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.settings-toggle__track {
  position: relative;
  display: block;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  /* track の color/background/border/box-shadow transition は共通ルール(後段)で定義。 */
}
.settings-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.14s ease, background 0.14s ease;
}
.settings-toggle:focus-visible { outline: none; }
.settings-toggle:focus-visible .settings-toggle__track {
  border-color: var(--teal-bright);
  box-shadow: 0 0 0 2px rgba(var(--teal-rgb), 0.4);
}
/* ON = ミュート: teal で点灯 + ノブ右へ。 */
.settings-toggle.is-on .settings-toggle__track {
  background: rgba(var(--teal-rgb), 0.30);
  border-color: var(--teal);
  box-shadow: 0 0 8px rgba(var(--teal-rgb), 0.5);
}
.settings-toggle.is-on .settings-toggle__knob {
  transform: translateX(22px);
  background: var(--teal-bright);
}

/* =====================================================================
   ③(B) 設定画面 インタラクション状態の共通ルール(hover / active)
   タブ・言語タイル・戻るボタン・ミュートトグルが同じ teal 演出を共有する。
   将来この画面に新しいインタラクティブ要素を足す時も、対応するセレクタを
   このグループへ追記して演出を踏襲する(typography.md §7 に標準を明文化)。
     - transition: 0.14s ease(共通の duration / easing)
     - hover : 文字 --teal-soft + 背景 rgba(--teal-rgb, 0.1)
     - active/selected: 文字 --teal-bright + 背景 rgba(--teal-rgb, 0.14) + 枠/下線 --teal
   ===================================================================== */
.settings-tab,
.settings-lang-tile,
.scene--settings .settings-back,
.settings-pad-toggle__btn,
.settings-toggle__track {
  transition: color 0.14s ease, background 0.14s ease,
              border-color 0.14s ease, box-shadow 0.14s ease;
}
.settings-tab:hover,
.settings-lang-tile:hover,
.scene--settings .settings-back:hover,
.settings-pad-toggle__btn:hover {
  color: var(--teal-soft);
  background: rgba(var(--teal-rgb), 0.1);
}
/* 枠を持つ要素(タイル/トグル)は hover で teal-dim 枠も点灯。 */
.settings-lang-tile:hover { border-color: var(--teal-dim); }
.settings-toggle:hover .settings-toggle__track { border-color: var(--teal-dim); }
/* active / selected: 文字 teal-bright + 一段明るい teal 面。 */
.settings-tab.is-active,
.settings-lang-tile.is-current,
.settings-pad-toggle__btn.is-active {
  color: var(--teal-bright);
  background: rgba(var(--teal-rgb), 0.14);
}
/* 枠を持つ選択要素は枠も --teal で点灯(タブは ::before ネオンライン担当)。 */
.settings-lang-tile.is-current { border-color: var(--teal); }

/* フォートナイト式・直置き: タブパネルを囲うカード枠(border/background)を撤去。
   タブ切替で枠の高さがばらつく不揃いを解消。区切りはタブバー下線と行間の薄線で表現。 */
.scene--settings .overlay-section {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
.scene--settings .overlay-section .overlay-subtitle { margin-top: 0; }
/* コンソール見出し: 左 teal 縦線アクセント + 字間広め(日本語見出しは大文字化せず字間のみ)。 */
.scene--settings .overlay-subtitle {
  border-left: 3px solid var(--teal);
  padding-left: 10px;
  letter-spacing: 0.14em;
  color: var(--teal-soft);
}

/* =====================================================================
   共通UIフォーマット(.qg-*)— docs/game-spec/ui-format.md
   SETTINGS(#025 コンソール)を画面非依存の汎用クラスへ昇格し、全画面を
   teal 系コンソールに統一する土台。settings-* はこの様式の原型(リファレンス実装)で、
   見た目は据え置き。プロフィール系/登録フロー等の新規移行画面は .qg-* を使う。
   配色は全画面 teal(--teal*)。gold は UI から廃止(ロゴ画像/canvas は対象外)。
   ===================================================================== */
/* 画面コンテナ: 大見出し(画面名)非表示 + 戻る右上 + 背面スキャンライン(teal α0.04)。 */
.scene--qg { position: relative; }
.scene--qg .overlay-label,
.scene--qg .overlay-title { display: none; }
/* 大見出し(画面名)はヘッダ帯の中(罫線の上)に置くのを共通の型とする。
   登録フロー(.scene--onboarding)は overlay-title をヘッダ帯の大見出しに使い、
   プロフィール一覧もこれに揃える(他の .scene--qg 画面は本体に大見出しを持たないため
   overlay-title 非表示のまま)。display:none を解除し、登録 S1「キャラクター作成」と
   同じ overlay-title qg-heading--lg(❚❚❚ + 中サイズ・白文字)で表示する。
   ❚❚❚ マーカー / padding-left:27px / 白文字は qg-heading--lg 共通ルールが担う。
   ヘッダ帯高(--qg-header-h=58px)に収まる中サイズ見出しなので帯高・罫線位置は不変。 */
.scene--profile-list .overlay-title {
  display: block;
  margin: 6px 0 0;
  font-size: var(--ui-heading-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
}
/* ヘッダ下の共通全幅ライン: タブを持たない画面でも、SETTINGS のタブ下線と同じ Y に
   全幅(scene コンテンツ幅)の teal-line 1px を引く。ヘッダを固定高(--qg-header-h)の
   「ヘッダ帯」にし、その下端を border-bottom でラインにする。戻るボタン(右上固定)は
   この帯の中に収まる。帯の下に 16px の余白を空けて本体コンテンツを始める(SETTINGS の
   .settings-content padding-top:16 と同じ下余白)。 */
.scene--qg .scene__header {
  /* +1px: SETTINGS のラインは border-top(線の上端が --qg-header-h に来る)、こちらは
     border-bottom(線が帯の最終 1px に入る)。帯高を +1px して線の上端を SETTINGS と同じ Y に揃える。 */
  min-height: calc(var(--qg-header-h) + 1px);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--teal-line);
}
.scene--profile .scene__header {
  min-height: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.scene--qg .scene__body {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(var(--teal-rgb), var(--scanline-alpha)) 0px,
    rgba(var(--teal-rgb), var(--scanline-alpha)) 1px,
    transparent 1px,
    transparent 4px
  );
}
/* パネル面: teal 枠の暗面 + 控えめ角丸でコンソール質感に統一(青枠の汎用カードを teal 化)。 */
.scene--qg .overlay-section {
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

/* 戻るボタン: 右上固定 + パネル地 + teal 枠 + モノスペース + 角丸4px(settings-back を一般化)。 */
.qg-back {
  position: absolute;
  /* ③ 戻る位置を全画面共通トークンに(値は現値と同一 12px/16px、描画不変)。
     .settings-back と同じトークンを参照し、ドリフトを防いで全画面で右上を統一。 */
  top: var(--back-top);
  right: var(--back-right);
  z-index: 5;
  min-width: var(--btn-min-w);
  min-height: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border-w) solid var(--teal-dim);
  border-radius: var(--radius-btn);
  /* 通常=白(非選択)、hover で teal(.qg-back:hover)。全画面で戻るを「白→hover teal」に統一。 */
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--ui-button-md);
  letter-spacing: 0.08em;
}

/* コンソール見出し: 左 teal 縦線アクセント + 字間(settings の overlay-subtitle を一般化)。 */
.qg-heading {
  margin: 0 0 10px;
  border-left: 3px solid var(--teal);
  padding-left: 10px;
  letter-spacing: 0.14em;
  color: var(--teal-soft);
  font-size: var(--ui-heading-sm);
  font-weight: var(--weight-bold);
}

/* ボタン: パネル地 + teal 枠 + teal 文字 + モノスペース + 角丸4px。
   primary は teal-bright 文字 + teal 枠で主操作を一段強調。 */
.qg-btn.overlay-button,
.qg-btn {
  min-width: var(--btn-min-w);
  min-height: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-btn);
  font-family: ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--ui-button-md);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border-w) solid var(--teal-dim);
  color: var(--teal-soft);
  box-shadow: none;
}
.qg-btn--primary.overlay-button,
.qg-btn--primary {
  border-color: var(--teal);
  color: var(--teal-bright);
}

/* パネル面: teal 枠の暗面(直置きしたい場合は枠なしで上書き)。 */
.qg-panel {
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-panel);
  background: rgba(var(--teal-rgb), 0.04);
  padding: 14px 16px;
}

/* インタラクション(§7 を .qg-* へ展開): teal hover/active を共通適用。遷移は共通 --transition。
   overlay-button の brightness filter は打ち消し、teal ティント色変化のみに統一。 */
.qg-back,
.qg-btn,
.qg-tab {
  transition: color var(--transition) ease, background var(--transition) ease,
              border-color var(--transition) ease, box-shadow var(--transition) ease;
}
.qg-back:hover,
.qg-btn:hover,
.qg-tab:hover {
  filter: none;
  color: var(--teal-soft);
  background: rgba(var(--teal-rgb), 0.1);
  border-color: var(--teal-dim);
}
/* 戻るボタン(.settings-back / .qg-back)の hover・focus は「明確な teal(--teal)」で確実に。
   - .settings-back は overlay-button/secondary-button の color(--text)を併せ持つため、
     詳細度を一段上げて(.settings-back.overlay-button)上書きを確実に防ぐ。
   - 共通 hover(--teal-soft)より一段強い teal にして「白→teal」を視認しやすくする。
   - focus-visible も同様にし、キーボード操作でも teal になる(従来 focus は未対応だった)。
   通常時は白(--text)のまま。白=非選択 / teal=選択(hover/focus)の §7 を満たす。 */
.scene--settings .settings-back.overlay-button:hover,
.scene--settings .settings-back.overlay-button:focus-visible,
.qg-back:hover,
.qg-back:focus-visible {
  color: var(--teal);
  background: rgba(var(--teal-rgb), 0.12);
}
.qg-btn--primary:hover,
.qg-tab.is-active,
.qg-btn--primary.is-selected {
  filter: none;
  color: var(--teal-bright);
  background: rgba(var(--teal-rgb), 0.14);
  border-color: var(--teal);
}
/* danger(削除/初期化): teal コンソール土台のまま文字/枠を earth 赤にして破壊的操作を示す
   (teal 統一の例外。安全のため色で警告)。 */
.qg-btn.overlay-button--danger {
  color: var(--earth);
  border-color: rgba(var(--earth-rgb, 245, 123, 123), 0.5);
}
.qg-btn.overlay-button--danger:hover {
  color: var(--earth);
  border-color: var(--earth);
  background: rgba(var(--earth-rgb, 245, 123, 123), 0.12);
}

/* =====================================================================
   操作設定タブ: 入力グリフ図(SVG 駆動 / INPUT_ACTIONS から生成)。
   #025 コンソール風に馴染ませる。キーボード / コントローラーの 2 カラム、
   狭幅(≤900px)では縦積み(レスポンシブ)。
   ===================================================================== */
.settings-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  align-items: start;
}
.settings-input-col { min-width: 0; }
/* 列見出し: コンソール小見出し(teal-dim 大文字字間)。右にトグルを並べる。 */
.settings-input-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 列見出しはラベル(非選択)なので白に統一(白=非選択 §5)。teal-dim の濃淡で示さない。 */
  color: var(--text);
  font-size: var(--ui-body-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px;
  min-height: 28px;
}
.settings-input-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 行: [グリフ群] アクション名。グリフ列幅を揃えアクション名の開始位置を統一。 */
.settings-input-row {
  display: grid;
  /* グリフ約147%(44px)に合わせグリフ列を調整(WASD十字 = 44px×3 + gap が収まる幅)。 */
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--teal-line);
}
.settings-input-row__glyphs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.settings-input-row__label {
  color: var(--text);
  font-size: var(--ui-body);
}

/* グリフタイル: SVG を teal 枠の暗面タイルに収め、白系 Kenney 素材(CC0)を teal
   グローでコンソール世界観に馴染ませる。素材未配置(画像欠落)でも枠 + alt が残る。 */
.settings-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* 約147%(元30px / 一旦60pxは大きすぎたため中間に) */
  height: 44px;
  padding: 5px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--teal-line);
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
}
.settings-glyph__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* teal グローは滲みの原因のため最小化(2px/0.55 → 1px/0.3)。白アイコンの輪郭をくっきり保ち、
     コンソール感はタイル枠(--teal-line)で担保する。 */
  filter: drop-shadow(0 0 1px rgba(var(--teal-rgb), 0.3));
  font-size: var(--ui-caption);   /* 画像欠落時の alt テキストを小さく収める */
  color: var(--teal-soft);
}
/* WASD 十字配置: W を上段中央 / A S D を下段。 */
.settings-key-cross {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.settings-key-cross__row { display: inline-flex; gap: 4px; }

/* PS/Switch トグル: タブと同系のコンソール風セグメント(hover/active は共通ルール)。 */
.settings-pad-toggle {
  display: inline-flex;
  border: 1px solid var(--teal-line);
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}
.settings-pad-toggle__btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--teal-line);
  color: var(--teal-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--ui-button-sm);
  letter-spacing: 0.08em;
  padding: 5px 12px;
  cursor: pointer;
}
.settings-pad-toggle__btn:last-child { border-right: 0; }

/* 狭幅: キーボード図 / コントローラー図を縦積みに(2カラム破綻回避)。 */
@media (max-width: 900px) {
  .settings-controls { grid-template-columns: 1fr; }
}

/* ============================================================
   複数プロフィール(スロット)骨格 — P_PROFILE_LIST / P_PROFILE / P_STORE。
   docs/game-spec/play-flow.md「複数スロット対応」。gold 系トークンに準拠。
   ============================================================ */

/* --- P_PROFILE_LIST: スロット一覧 --- */
.profile-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* P12 プロフィール一覧: カードはヘッダ罫線直下から「上詰め」で並べ、内容なりの高さ(~80px)にする。
   .scene__body(display:grid)の align-content 既定=stretch が body 高さいっぱいに行を引き伸ばし、
   その中の profile-slot-grid・カードまで縦に間延びさせ、結果カードが下寄せに見えていた原因。
   body / grid を start 配置にして content 高さに収め、上から並べる(⑥上寄せ + ③コンパクト化)。 */
.scene--profile-list .scene__body { align-content: start; }
.scene--profile-list .profile-slot-grid { align-content: start; align-items: start; }

.profile-slot-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  /* 全カード共通の高さ。作成済み = 顔56 + 上下padding24 + border2 = 82px。新規作成カードは
     中身(＋ + ラベル)が小さく align-items:start で縮むため、同じ min-height で揃える(②)。 */
  min-height: 82px;
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition) ease, background var(--transition) ease,
              border-color var(--transition) ease, box-shadow var(--transition) ease;
}
.profile-slot-card:hover {
  border-color: var(--teal-dim);
  background: rgba(var(--teal-rgb), 0.1);
}
.profile-slot-card.is-active {
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.14);
}

.profile-slot-card__avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 2px solid var(--teal-line);
  border-radius: var(--radius-btn);
  overflow: hidden;
  background: linear-gradient(180deg, #102034, #08101b);
}
.profile-slot-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.profile-slot-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-slot-card__name { font-size: 1.05rem; font-weight: 700; }
.profile-slot-card__faction { font-size: 0.85rem; color: var(--muted); }
.profile-slot-card__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--teal-bright);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 1px 8px;
}

/* 「新規作成」カード(破線)。他カードと同じ横並び・コンパクト高さに揃える(＋アイコン + ラベル)。
   ＋はアイコン(.profile-slot-card__plus)のみ。ラベル側の ＋ は i18n から除去済み(二重解消)。 */
.profile-slot-card--new {
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--muted);
}
.profile-slot-card--new:hover { color: var(--teal-soft); }
.profile-slot-card__plus { font-size: 1.8rem; line-height: 1; }
.profile-slot-card__new-label { font-size: 0.9rem; font-weight: 700; }

/* 空一覧(スロット0)では「+ 新規作成」が主役。teal-bright primary で目立たせる。 */
.profile-slot-card--new-primary {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.1);
  color: var(--teal-bright);
  padding: 22px 14px;
}
.profile-slot-card--new-primary:hover {
  border-color: var(--teal);
  background: rgba(var(--teal-rgb), 0.16);
}
.profile-slot-card--new-primary .profile-slot-card__plus { font-size: 2.4rem; }
.profile-slot-card--new-primary .profile-slot-card__new-label { font-size: 1.05rem; }

/* --- P_PROFILE 詳細: 戦績グリッド / 所有機体 / 操作 --- */
.scene--profile .profile-content {
  min-height: 0;
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 6px 0;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.profile-stat__label { font-size: 0.75rem; color: var(--muted); }
.profile-stat__value { font-size: 1.3rem; font-weight: 700; color: var(--text); }

.profile-gear-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.profile-gear-chip {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
}
.profile-gear-chip--empty { border-style: dashed; }

.profile-gear-section {
  padding-top: 6px;
}
.profile-gear-table-head,
.profile-gear-card {
  grid-template-columns: var(--profile-gear-cols);
  gap: 0;
  align-items: stretch;
}
.profile-gear-table-head {
  display: grid;
  margin: 6px 0 4px;
  padding: var(--profile-gear-row-pad-y) var(--profile-gear-row-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--muted);
  font-size: var(--profile-gear-head-font);
  letter-spacing: var(--profile-gear-head-letter-spacing);
}
.profile-gear-pager__button {
  width: 100%;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal-line);
  border-radius: var(--radius-btn);
  background: rgba(var(--teal-rgb), 0.08);
  color: var(--teal-bright);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, var(--font-ui);
  cursor: pointer;
}
.profile-gear-pager__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
.profile-gear-pager__icon--down {
  transform: rotate(180deg);
}
.profile-gear-pager__button:hover,
.profile-gear-pager__button:focus-visible {
  background: rgba(var(--teal-rgb), 0.16);
  outline: none;
}
.profile-gear-list {
  display: grid;
  gap: 4px;
  max-height: none;
  margin: 6px 0;
  overflow-y: visible;
  overscroll-behavior: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.profile-gear-list--weapon-open {
  max-height: min(620px, calc(100vh - 260px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.profile-gear-list::-webkit-scrollbar {
  width: 6px;
}
.profile-gear-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
}
.profile-gear-list::-webkit-scrollbar-thumb {
  background: rgba(var(--teal-rgb), 0.38);
  border-radius: 999px;
}
.profile-gear-card {
  display: grid;
  padding: var(--profile-gear-row-pad-y) var(--profile-gear-row-pad-x);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: rgba(0, 0, 0, 0.18);
}
.profile-gear-card--locked {
  opacity: 0.72;
}
.profile-gear-card--selectable {
  cursor: pointer;
}
.profile-gear-card--selectable:hover,
.profile-gear-card--selectable:focus-visible,
.profile-gear-card--selectable.is-selected {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  outline: none;
}
.profile-gear-list--solo {
  max-height: min(620px, calc(100vh - 330px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.profile-gear-card--owned,
.profile-gear-card--owned .profile-gear-card__cell,
.profile-gear-card--owned .profile-gear-card__name {
  color: #fff;
}
.profile-gear-card--locked .profile-gear-card__sprite img {
  filter: brightness(0) opacity(0.72);
}
.profile-gear-card__sprite {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.22);
}
.profile-gear-card__sprite img {
  image-rendering: pixelated;
  object-fit: none;
  object-position: left top;
}
.profile-gear-card__cell {
  min-width: 0;
  color: var(--text);
  font-size: var(--profile-gear-cell-font);
}
.profile-gear-card__cell,
.profile-gear-table-head > span {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--profile-gear-cell-pad-x);
  white-space: nowrap;
  border-left: var(--profile-gear-divider-width) solid color-mix(in srgb, var(--profile-gear-divider-color) var(--profile-gear-divider-alpha), transparent);
}
.profile-gear-table-head > span {
  justify-content: var(--profile-gear-head-justify);
}
.profile-gear-card__cell:first-child,
.profile-gear-table-head > span:first-child {
  border-left: 0;
}
.profile-gear-card__cell--thumb {
  justify-content: center;
  padding-left: 0;
}
.profile-gear-card__cell--faction,
.profile-gear-card__cell--type,
.profile-gear-card__cell--hp,
.profile-gear-card__cell--speed,
.profile-gear-card__cell--boost,
.profile-gear-card__cell--respawn {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-gear-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.profile-gear-card__name {
  min-width: 0;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-gear-card__unlock {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-gear-card__source {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid rgba(var(--teal-rgb), 0.28);
  color: var(--teal-soft);
  font-size: 0.68rem;
}
.profile-gear-weapons-button {
  width: auto;
  min-width: 72px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(var(--teal-rgb), 0.36);
  border-radius: 6px;
  background: rgba(var(--teal-rgb), 0.08);
  color: var(--teal-bright);
  font: 700 0.76rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.profile-gear-weapons-button:hover,
.profile-gear-weapons-button:focus-visible {
  background: rgba(var(--teal-rgb), 0.16);
  outline: none;
}
.profile-gear-weapons-button:disabled,
.profile-gear-weapons-button[aria-disabled="true"] {
  border-color: rgba(97, 127, 161, 0.28);
  background: rgba(97, 127, 161, 0.08);
  color: rgba(234, 241, 255, 0.34);
  cursor: not-allowed;
}
.profile-gear-weapon-details {
  grid-column: 1 / -1;
  display: none;
  padding: 6px 0 2px;
}
.profile-gear-weapon-details.is-open {
  display: grid;
  grid-template-columns: repeat(3, var(--profile-gear-weapon-card-width));
  gap: var(--profile-gear-weapon-card-gap);
  justify-content: start;
}
.profile-gear-weapon-detail-card {
  width: var(--profile-gear-weapon-card-width);
  min-height: var(--profile-gear-weapon-card-height);
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(97, 127, 161, 0.28);
  border-radius: 7px;
  background: rgba(6, 11, 20, 0.5);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(12, 25, 42, 0.55);
}
.profile-gear-weapon-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 5px;
  margin-bottom: 7px;
  color: rgba(234, 241, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
}
.profile-gear-weapon-slot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  background: #5bc8ff;
  color: #07111f;
  font-size: 0.78rem;
  font-weight: 800;
}
.profile-gear-weapon-role {
  flex: 0 0 auto;
  color: rgba(234, 241, 255, 0.68);
}
.profile-gear-weapon-name {
  min-width: 0;
  color: rgba(234, 241, 255, 0.9);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-gear-weapon-description {
  flex: 0 0 100%;
  color: rgba(234, 241, 255, 0.64);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  margin-left: 0;
}
.profile-gear-weapon-stat-list {
  display: grid;
  gap: 3px;
  margin: 0 0 8px;
}
.profile-gear-weapon-stat-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  color: rgba(234, 241, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
}
.profile-gear-weapon-stat-pair {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 3px;
}
.profile-gear-weapon-stat-separator {
  color: rgba(234, 241, 255, 0.36);
}
.profile-gear-weapon-stat-label,
.profile-gear-weapon-stat-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-gear-weapon-stat-label {
  color: rgba(234, 241, 255, 0.58);
  font-weight: 700;
}
.profile-gear-weapon-stat-value {
  color: rgba(234, 241, 255, 0.9);
  font-weight: 800;
}
.profile-gear-weapon-asset {
  position: relative;
  min-width: 0;
  height: var(--profile-gear-weapon-asset-h);
  margin-bottom: 8px;
  border: 1px solid rgba(97, 127, 161, 0.28);
  background: rgba(3, 9, 16, 0.62);
}
.profile-gear-weapon-asset-preview {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(234, 241, 255, 0.56);
  font-size: 0.72rem;
  font-weight: 700;
}
.profile-gear-weapon-asset-preview img {
  width: auto;
  max-width: 30%;
  max-height: 36px;
  transform: scale(3);
  transform-origin: center;
  image-rendering: pixelated;
}
.profile-gear-weapon-asset-preview img.is-rotated-right {
  transform: rotate(90deg) scale(3);
}
.profile-gear-weapon-asset-preview img.is-rotated-left {
  transform: rotate(-90deg) scale(3);
}
.profile-gear-weapon-asset-preview img.is-rotated-half {
  transform: rotate(180deg) scale(3);
}
.profile-gear-weapon-asset-preview .pixel-thumb-grid {
  width: 40px;
  height: 40px;
  transform: scale(3);
  transform-origin: center;
}
.profile-gear-weapon-preview {
  position: relative;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(97, 127, 161, 0.24);
  background:
    linear-gradient(rgba(45, 89, 117, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 89, 117, 0.18) 1px, transparent 1px),
    rgba(3, 12, 18, 0.66);
  background-size: 22px 22px;
}
.profile-gear-weapon-preview--canvas {
  height: var(--profile-gear-weapon-preview-h);
  background: rgba(3, 12, 18, 0.66);
}
.profile-gear-weapon-preview__canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.profile-gear-weapon-preview__gear {
  position: absolute;
  left: 22px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: rgba(234, 241, 255, 0.58);
  background: rgba(4, 9, 16, 0.35);
}
.profile-gear-weapon-preview__gear img {
  image-rendering: pixelated;
}
.profile-gear-weapon-preview__effect {
  position: absolute;
  display: block;
}
.profile-gear-weapon-preview__effect--shot {
  left: 88px;
  top: 32px;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: #f7d9df;
  box-shadow: 0 0 10px rgba(255, 139, 166, 0.75);
}
.profile-gear-weapon-preview__effect--melee {
  left: 54px;
  bottom: 10px;
  width: 4px;
  height: 42px;
  border-radius: 999px;
  background: #f7d9df;
  box-shadow: 0 0 14px rgba(255, 139, 166, 0.72);
  transform: rotate(-10deg);
}
.profile-gear-weapon-preview__effect--special {
  left: 94px;
  top: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb1c6;
  box-shadow:
    24px 12px 0 #ffb1c6,
    58px 0 0 #ffb1c6,
    0 0 10px rgba(255, 139, 166, 0.72);
}

@media (max-width: 1480px) {
  .profile-gear-table-head,
  .profile-gear-card {
    gap: 0;
  }
  .profile-gear-card__source {
    display: none;
  }
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.overlay-button--danger {
  border-color: rgba(var(--earth-rgb, 245, 123, 123), 0.5);
  color: var(--earth, #f57b7b);
}
.overlay-button--danger:hover {
  border-color: var(--earth, #f57b7b);
  background: rgba(245, 123, 123, 0.08);
}

/* --- P_STORE: ハリボテ --- */
.store-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.store-placeholder-item {
  height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-size: 1.4rem;
}

/* --- 登録フロー: 編集時の陣営固定表示 --- */
.onboarding__faction-choices.is-locked .onboarding__faction-card:not(.is-selected) {
  opacity: 0.4;
}
.onboarding__faction-card[disabled] { cursor: default; }
.onboarding__faction-locked-note {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}


/* ============================================================
   見出しの階層飾り(❚の本数でレベルを示す)— 2026-06-05 改訂
   大=❚❚❚(3本) / 中=❚❚(2本) / 小=❚(1本)。

   旧実装(border-left + box-shadow 多重)は隙間が無く太帯に見え、本数で
   テキスト開始位置がずれていた。これを ::before 擬似要素 + 固定幅 +
   右詰めストライプに作り直す。

   方針:
     - 文字色は --text(白)。見出しは「選択項目ではない」ので白にし、選択中
       (--teal-bright)の顔タイル等と明確に区別する。飾り(縦棒)のみ --teal。
     - 飾り幅は常に3本ぶんで固定(下記 17px)。padding-left も全レベル共通に
       するため、テキストの頭(開始位置)が大中小で揃う。
     - 本数は「右詰め」で出し分け。テキストに近い右側から本数を詰め、少ない
       レベルは左側が透明になる。

   寸法(将来トークン化候補。隙間がはっきり見える値):
     棒 = 3px / 隙間 = 4px / 3本ぶん幅 = 3+4+3+4+3 = 17px
     棒と文字の間隔 = 10px → padding-left = 17 + 10 = 27px(全レベル共通)
     右詰めの透明オフセット: 中 = 左1本ぶん 7px / 小 = 左2本ぶん 14px
   ============================================================ */

/* 共通: 文字白・旧飾り撤去・飾りぶんの padding を確保(テキスト頭を全レベルで揃える)。 */
.qg-heading,
.qg-heading--lg,
.qg-heading--md,
.qg-heading--sm,
.scene--onboarding .overlay-title,        /* 登録フローの大見出し */
.onboarding__section-title,               /* 登録フローの中見出し */
.onboarding__face-group-title {           /* 登録フローの小見出し */
  position: relative;
  color: var(--text);                     /* 白。選択色(teal-bright)と区別 */
  border-left: none;                      /* 旧:border-left 飾りを撤去 */
  box-shadow: none;                       /* 旧:box-shadow 多重を撤去 */
  padding-left: 27px;                     /* 飾り17px + 文字間隔10px。全レベル共通 */
  margin-left: 0;                         /* 旧:box-shadow 用の負マージンを撤去 */
}

/* 飾り本体: 文字の左に幅 17px(3本ぶん)固定で配置。背景の縦棒は各レベルで指定。 */
.qg-heading::before,
.qg-heading--lg::before,
.qg-heading--md::before,
.qg-heading--sm::before,
.scene--onboarding .overlay-title::before,
.onboarding__section-title::before,
.onboarding__face-group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;                            /* 文字高に合わせて上下を少し詰める(調整可) */
  bottom: 0.15em;
  width: 17px;                            /* 3本ぶん固定(棒3 + 隙間4 を 3 回) */
}

/* 大(3本): 0-3 / 7-10 / 14-17 が teal、間は透明。 */
.qg-heading--lg::before,
.scene--onboarding .overlay-title::before {
  background: linear-gradient(to right,
    var(--teal) 0 3px, transparent 3px 7px,
    var(--teal) 7px 10px, transparent 10px 14px,
    var(--teal) 14px 17px);
}

/* 中(2本): 右2本だけ teal、左1本ぶん(0-7px)は透明 → 右詰めで2本。 */
.qg-heading--md::before,
.onboarding__section-title::before {
  background: linear-gradient(to right,
    transparent 0 7px,
    var(--teal) 7px 10px, transparent 10px 14px,
    var(--teal) 14px 17px);
}

/* 小(1本): 右1本だけ teal、左2本ぶん(0-14px)は透明 → 右詰めで1本。
   レベル未指定の .qg-heading(プロフィール等)も従来どおり小相当=1本。
   ※ qg-heading と qg-heading--lg/--md を併記した見出し(例 class="qg-heading qg-heading--lg")で、
     後方記述のこの小ルールが大/中ルールを後勝ちで上書きしてしまう不具合を防ぐため、:not() で
     レベル付き要素を除外する(レベル未指定のみ小1本)。 */
.qg-heading:not(.qg-heading--lg):not(.qg-heading--md):not(.qg-heading--sm)::before,
.qg-heading--sm::before,
.onboarding__face-group-title::before {
  background: linear-gradient(to right,
    transparent 0 14px,
    var(--teal) 14px 17px);
}