/* =========================================================================
   色・形（格闘ゲーム風。ライト・ダーク共通で暗い「アリーナ」の見た目にする：U-12）
   ========================================================================= */
:root {
  color-scheme: dark;

  --bg: #07080d;
  --surface: #151a2a; /* パネルの中身 */
  --surface-2: #1f2538;
  --surface-3: #2a3150;
  --text: #f2f4fb;
  --text-muted: #9ba4c0;
  --border: #39415f;

  /* 金の縁（見出し・枠・強調） */
  --gold: #e9b93c;
  --gold-hi: #fff0b0;
  --gold-lo: #8a5f12;
  --steel-hi: #5c6688;
  --steel-lo: #1c2134;

  /* 強調色：選んだもの・数値は金、主ボタンは赤 */
  --accent: #f2c14e;
  --accent-soft: #3a2f12;
  --on-accent: #1a1203;
  --primary-top: #ff5a5a;
  --primary-mid: #c4161f;
  --primary-bottom: #6a0910;
  --on-primary: #ffffff;

  --mode-bot: #c4161f; /* ホームの対戦ボタン */
  --mode-bot-dark: #4a0408;
  --mode-online: #1d5fd8;
  --mode-online-dark: #071b4a;
  --mode-tag: #7a3fd1;
  --mode-tag-dark: #24104a;
  --mode-dojo: #1e8a4a;
  --mode-dojo-dark: #06341a;
  --mode-test-range: #0e8aa8;
  --mode-test-range-dark: #04303d;
  --on-mode: #ffffff;

  /* タッグ戦のターン結果：自分のチーム（青）と相手チーム（赤）の行の色 */
  --team-own: #4d9bff;
  --team-own-dark: #0f2a5c;
  --team-opponent: #ff5a5a;
  --team-opponent-dark: #5c0f14;

  --danger: #ff6464;
  --danger-soft: #3d1216;
  --challenge: #ff8a3d;
  --challenge-soft: #3d2312;
  --even: #b4bcd4;
  --even-soft: #262c40;
  --safe: #5ee07d;
  --safe-soft: #13321d;
  --hp: #2fb04c;
  --hp-mid: #e8890c;
  --hp-low: #e03131;
  --system: #ffae3d;
  --system-bg: #2e1f0a;

  --shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.65);
  --radius: 4px;
  --radius-sm: 3px;
  --gutter: 16px;

  /* 角の切り落とし（パネル・ボタンの八角形の角） */
  --cut: 10px;
  --heavy: 900;
}

/* =========================================================================
   土台
   ========================================================================= */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
}

/* 地の色は html に塗り、body は透明にする（body::before の背景を body の背景で隠さないため） */
body {
  position: relative;
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* 背景：上は赤、下は青の光と、斜めの集中線。スクロールしても動かない */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(214, 30, 40, 0.38), transparent 70%),
    radial-gradient(ellipse 90% 45% at 50% 108%, rgba(29, 95, 216, 0.32), transparent 70%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%),
    var(--bg);
  pointer-events: none;
}

p,
h1,
h2,
h3,
ul,
dl,
dd,
fieldset {
  margin: 0;
}

b,
strong {
  font-weight: var(--heavy);
}

#app {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
}

/* 画面切り替え：.is-active の画面だけ表示する。中身の間隔は gap でそろえる */
.screen {
  display: none;
}

.screen.is-active {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

/* バトル画面だけ、アリーナの背景の上にステージの絵を敷く（IMAGES.md A-2）。
   iPhone は background-attachment: fixed が効かないので、固定した疑似要素に描く。
   上の体力欄の暗い帯とつながるよう、上ほど暗くする。読み込めなければ今の背景色のまま */
#screen-battle.is-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0.85), rgba(7, 8, 13, 0.55) 35%, rgba(7, 8, 13, 0.5) 65%, rgba(7, 8, 13, 0.7)),
    url(assets/images/battle-stage.webp) center top / cover no-repeat,
    var(--bg);
  pointer-events: none;
}

/* =========================================================================
   枠の共通部品：金属の縁＋暗い中身の、角を切り落とした板
   要素の背景＝縁（--frame）、疑似要素＝中身（--fill）。中身は縁の内側に --frame-w だけ小さく重ねる。
   clip-path で角を切るので、フォーカスの輪は縁の色を変えて見せる
   ========================================================================= */
.card,
.panel,
.choice-group,
.question-text,
.home-hero,
.home-daily,
.result-banner,
.list-button,
.review-item,
.ranking-row,
.loadout-row,
.slot-tray li,
.result-hp li,
.result-player,
.opponent-card-stats div,
.button,
.choice,
.slot-button,
.step-button,
.icon-button,
.character-choice,
.mode-button {
  --frame: linear-gradient(160deg, var(--steel-hi), var(--steel-lo) 55%, var(--steel-hi));
  --fill: linear-gradient(180deg, #1a2034, #0e111c);
  --frame-w: 1.5px;

  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: var(--frame);
  box-shadow: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* 中身。ボタン類は ::after（.answer-choice の ::before は A〜D の札に使う）、板は ::before */
.card::before,
.panel::before,
.choice-group::before,
.question-text::before,
.home-hero::before,
.home-daily::before,
.result-banner::before,
.list-button::before,
.review-item::before,
.ranking-row::before,
.loadout-row::before,
.slot-tray li::before,
.result-hp li::before,
.result-player::before,
.opponent-card-stats div::before,
.mode-button::before,
.button::after,
.choice::after,
.slot-button::after,
.step-button::after,
.icon-button::after,
.character-choice::after {
  content: "";
  position: absolute;
  inset: var(--frame-w);
  z-index: -1;
  background: var(--fill);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  pointer-events: none;
}

/* 主役のパネル：縁を金に */
.card,
.panel,
.choice-group,
.question-text {
  --frame: linear-gradient(150deg, var(--gold-hi), var(--gold) 18%, var(--gold-lo) 45%, var(--steel-lo) 70%, var(--steel-hi));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(180deg, #181d30, #0d1019);
}

.button:focus-visible,
.choice:focus-visible,
.slot-button:focus-visible,
.step-button:focus-visible,
.icon-button:focus-visible,
.character-choice:focus-visible,
.list-button:focus-visible,
.home-hero:focus-visible,
.home-daily:focus-visible,
.review-item:focus-visible,
.mode-button:focus-visible {
  --frame: #ffffff;
  --frame-w: 3px;
  outline: none;
}

/* 上の帯：左に戻る・ホーム、右にミュート・設定 */
.app-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

.app-bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--primary-mid) 50%, var(--gold) 80%, transparent);
  opacity: 0.6;
}

/* スタート・メニューでは帯の下線を出さない */
#app:has(#screen-start.is-active) .app-bar::after,
#app:has(#screen-title.is-active) .app-bar::after {
  display: none;
}

.icon-button {
  --cut: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--gold);
  cursor: pointer;
}

.app-bar-buttons {
  display: flex;
  gap: 8px;
}

.app-bar-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 対戦中メニュー（BOT 戦の左上）。バトル画面以外では出さない */
.battle-menu-wrap {
  position: relative;
}

.battle-menu-wrap[hidden],
#app:not(:has(#screen-battle.is-active)) .battle-menu-wrap {
  display: none;
}

/* メニューの中身：ボタンの真下に重ねる（設定画面より下） */
.battle-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 15;
  min-width: 200px;
  padding: 12px;
}

.battle-menu[hidden] {
  display: none;
}

/* リアクション（RC-1）：部屋コードの部屋のオンライン対戦中だけ、ターン表示の帯の右に並べる絵文字のボタン */
.reaction-emojis {
  flex: none;
  display: flex;
  gap: 3px;
}

.reaction-emojis[hidden] {
  display: none;
}

.reaction-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.reaction-emoji:active:not(:disabled) {
  transform: scale(0.9);
}

.reaction-emoji:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 結果画面の文言のボタン */
.reaction-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.reaction-button {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.reaction-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 届いたリアクション：上の帯の下に重ねて少しの間だけ出す（押せない。下の操作のじゃまをしない） */
.reaction-toasts {
  position: fixed;
  top: 64px;
  left: 50%;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.reaction-toast {
  margin: 0;
  padding: 8px 16px;
  border: 2px solid var(--team-opponent);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: reaction-pop 0.25s ease-out;
}

.reaction-toast.is-own {
  border-color: var(--team-own);
}

/* 消えるとき：薄くしてから外す（main.js の REACTION_TOAST_LEAVE_MS と同じ長さ） */
.reaction-toast.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

@keyframes reaction-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reaction-toast,
  .reaction-toast.is-leaving {
    animation: none;
    transition: none;
  }
}

/* ホームへ戻るアイコン（左上）。押しても何も壊さない画面でだけ出す。
   出さない画面：スタート・ホーム・対戦・道場の出題・復習の解答中・チュートリアル・編成・名前・得意と苦手（入力の途中や起動時の流れがある）、オンラインの部屋の中 */
.app-home {
  display: var(--app-home-display, none);
}

#app:has(#screen-result.is-active, #screen-review.is-active, #screen-report.is-active,
  #screen-bot-setup.is-active, #screen-ranking.is-active, #screen-me.is-active, #screen-titles.is-active,
  #screen-rules.is-active, #screen-terms.is-active, #screen-privacy.is-active, #screen-school-guide.is-active,
  #screen-dojo.is-active, #screen-dojo-map.is-active, #screen-dojo-map-result.is-active, #screen-keypoints.is-active,
  #screen-online.is-active #online-waiting[hidden]) .app-bar-start {
  --app-home-display: inline-flex;
}

/* 1つ前の画面へ戻るアイコン（ホームアイコンの右）。サブページ（data-app-back の付いた画面）と、
   data-app-back の付いた「戻る」ボタン・部分が出ている画面でだけ出す（オンラインは部屋に入る前だけ） */
.app-back {
  display: none;
}

#app:has(.screen.is-active[data-app-back], .screen.is-active [data-app-back]:not([hidden])) .app-back {
  display: inline-flex;
}

/* 左上の戻るアイコンからだけ押す「戻る」ボタン（チュートリアル）。画面には出さない */
.app-back-target {
  display: none;
}

.settings-icon,
.account-icon,
.speaker-icon,
.menu-icon,
.home-icon,
.back-icon,
.memo-icon {
  width: 22px;
  height: 22px;
}

/* 右上のボタン：ふだんは歯車、スタート画面とチュートリアルを終えるまではスピーカー（音量だけの設定。main.js の updateSettingsButton） */
#settings-open .speaker-icon,
#settings-open.is-volume-only .settings-icon {
  display: none;
}

#settings-open.is-volume-only .speaker-icon {
  display: block;
}

/* アカウント（AC-3）：ゲストは線だけ、ログイン中は塗りつぶして光らせる（main.js の updateAccountButton） */
.account-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.app-account.is-logged-in .account-icon {
  fill: currentColor;
  filter: drop-shadow(0 0 4px var(--gold));
}

/* 先生だけ：所属の申請中の数の印（OR-3） */
.app-account {
  position: relative;
}

.account-org-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d9483b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.account-org-badge[hidden] {
  display: none;
}

/* 手書きメモ（MM-1。memoPad.js）：開いている間はアイコンを金に光らせる */
.app-memo.is-selected {
  --fill: linear-gradient(180deg, #ffd866, var(--gold) 55%, #a8740f);

  color: var(--on-accent);
}

/* 場所を教える吹き出し（MM-2。memoPad.js）：初めてアイコンが出たときだけ、アイコンの真下に出す（対戦中メニューより下）。
   left はアイコンの中心（memoPad.js が入れる）。押すと消える */
.memo-hint {
  position: absolute;
  top: calc(100% - 2px);
  z-index: 14;
  width: max-content;
  max-width: min(240px, calc(100vw - 2 * var(--gutter)));
  padding: 8px 12px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  transform: translateX(-22px);
  cursor: pointer;
  animation: memo-hint-in 0.25s ease-out;
}

.memo-hint[hidden] {
  display: none;
}

/* 上向きの三角（アイコンを指す） */
.memo-hint::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 15px;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--gold);
  border-left: 7px solid transparent;
}

@keyframes memo-hint-in {
  from {
    opacity: 0;
    transform: translate(-22px, -4px);
  }
}

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

/* メモのシート：画面の下に重ねる（対戦中メニューより上、全面で開く設定より下） */
.memo-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  height: var(--memo-sheet-height, 50vh);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(8px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--gold);
  background: var(--surface);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 開いている間は、ページの下にシートの分の余白を足して問題文を上まで送れるようにする */
body.is-memo-open #app {
  padding-bottom: calc(var(--memo-sheet-height, 50vh) + 16px);
}

/* 上の縁：引っぱって高さを変える */
.memo-handle {
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
  cursor: ns-resize;
  touch-action: none;
}

.memo-handle-bar {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: var(--text-muted);
}

.memo-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.memo-tool {
  min-height: 36px;
  padding: 4px;
  font-size: 0.85rem;
}

/* 写した選択肢：2列で小さく */
.memo-choices {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.memo-choices .answer-choice {
  gap: 6px;
  min-height: 40px;
  padding: 4px 8px 4px 4px;
  font-size: 0.85rem;
  line-height: 1.3;
}

.memo-choices .answer-choice::before {
  width: 22px;
  height: 20px;
  font-size: 0.75rem;
}

/* 書くところ：残りの高さいっぱい。指で書いてもスクロール・拡大しない。線の色は color */
.memo-canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  touch-action: none;
}

/* 設定：今の画面の上に全面で重ねる（対戦中に開いても試合の画面はそのまま残す） */
.settings-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  background: var(--bg);
}

.settings-screen[hidden] {
  display: none;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  min-height: 100%;
  margin: 0 auto;
  padding: env(safe-area-inset-top) var(--gutter) 0;
}

/* 重ねた画面の上の帯（左上に戻るアイコンだけ）。gap の分だけ見出しとの間を詰めて、ふつうの画面と高さをそろえる */
.overlay-bar {
  margin-bottom: -4px;
}

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

/* ルール・チュートリアル（ホームで開いたときだけ出す） */
.settings-help {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-help[hidden] {
  display: none;
}

.settings-help .list-button {
  text-decoration: none;
}

/* アカウント（AC-2）：知らせがないときは行を詰める */
#settings-account-status:empty {
  display: none;
}

/* 学校・塾の申請・先生の画面・管理（OR-2）：アカウントの欄の代わりに重ねる */
.org-screen .error:empty,
.org-status:empty,
.org-account-id:empty {
  display: none;
}

.org-account-id {
  word-break: break-all;
}

.org-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-fields[hidden] {
  display: none;
}

.choices.org-choices {
  grid-template-columns: repeat(2, 1fr);
}

.choices.org-choices .choice {
  min-width: 0;
  padding: 0 6px;
}

/* 作成者の申請（CA-1）は学校・塾の2つの下に1行で */
.choices.org-choices .choice[data-org-kind="creator"] {
  grid-column: 1 / -1;
}

.org-code-input {
  width: 100%;
  text-transform: uppercase;
}

.org-code {
  margin: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-align: center;
}

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

.org-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.org-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.org-item-title {
  margin: 0;
  font-weight: bold;
}

/* 保護者のコードを使う前の確認の文（HM-4。account.js の linkCodeConfirmText は改行で区切る） */
.link-code-confirm-text {
  white-space: pre-line;
}

.org-item .hint {
  margin: 0;
  word-break: break-all;
}

.org-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.org-details dt {
  color: var(--text-muted);
}

.org-details dd {
  margin: 0;
  word-break: break-all;
}

.org-actions,
.org-teacher-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.org-actions .button {
  flex: 1;
}

.org-teacher-row span {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

/* 作成者の問題の投稿（UQ-2）：編集の欄と、対戦の出題画面と同じ見た目の見本 */
.posted-textarea {
  resize: vertical;
  line-height: 1.5;
}

.posted-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.posted-choice-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.posted-choice-row .check-option {
  flex: none;
}

.posted-rules {
  margin: 0;
  padding-left: 1.2em;
}

.posted-preview .question-text {
  white-space: pre-line;
}

#posted-list-view,
#posted-edit-view,
#posted-review-list-view,
#posted-review-detail-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#posted-list-view[hidden],
#posted-edit-view[hidden],
#posted-review-list-view[hidden],
#posted-review-detail-view[hidden] {
  display: none;
}

/* 授業の学校版（LS-2）：一覧・編集は問題の投稿と同じ並べ方。見本は授業の画面の部品（.lesson-stage・.lesson-window）をそのまま使う */
#school-lesson-list-view,
#school-lesson-edit-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.school-lesson-guide summary {
  cursor: pointer;
}

.school-lesson-preview-credit {
  margin: 0;
  color: var(--gold);
  font-weight: bold;
}

/* 授業の画面の学校版の行（LS-3）。読み込めなかった知らせは目立たせない */
.lesson-school {
  margin: 0;
  color: var(--gold);
  font-weight: bold;
}

.lesson-school.is-failed {
  color: inherit;
  font-weight: normal;
}

/* 管理者の画面で読む学校版の中身（LS-4。postedReviewScreen.js） */
.school-lesson-review-body summary {
  cursor: pointer;
}

.school-lesson-review-steps {
  margin: 4px 0 8px;
  padding-left: 1.5em;
  font-size: 0.875rem;
}

/* 学校版の行と「この授業を報告」（LS-4）を1行に並べる（狭ければ折り返す） */
.lesson-school-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
}

#school-lesson-edit-view .lesson-window {
  cursor: default;
}

/* 問題の確認（UQ-3）：解説は改行を残す */
.posted-review-explanation {
  margin: 0;
  white-space: pre-line;
  word-break: break-all;
}

/* 保護者・先生の設定（LS-7）：ホームの上に重ねる */
.lesson-lock-screen {
  z-index: 21;
}

.lesson-lock-screen .error:empty {
  display: none;
}

/* type="password" を置くと、ブラウザがページ全体をログインフォームとみなし、
   名前や解答の欄までパスワード入力の扱いになる。text のまま見た目だけ伏せる */
.lesson-lock-pin {
  flex: none;
  width: 100%;
  -webkit-text-security: disc;
}

.lesson-lock-units {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson-lock-unit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-lock-unit-name {
  margin: 0;
  font-weight: bold;
}

.lesson-lock-unit-levels {
  grid-template-columns: repeat(4, 1fr);
}

.lesson-lock-unit-levels .choice {
  min-width: 0;
  padding: 0 4px;
}

.volume-row {
  display: grid;
  grid-template-columns: 4.5em 1fr 3em;
  align-items: center;
  gap: 12px;
}

.volume-label {
  font-weight: var(--heavy);
}

.volume-slider {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--gold);
}

.volume-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

/* 見出し：太い斜体に、左の赤い斜めの印 */
.screen-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 90, 90, 0.25);
}

.screen-title::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--primary-top), var(--primary-mid));
  box-shadow: 4px 0 0 var(--gold);
  transform: skewX(-18deg);
}

.screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hint {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.error {
  color: var(--danger);
  font-weight: bold;
}

.error:empty {
  display: none;
}

/* =========================================================================
   ボタン
   ========================================================================= */
.button {
  --cut: 10px;
  --frame: linear-gradient(180deg, var(--gold-hi), var(--gold) 35%, var(--gold-lo));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 45%, transparent 46%),
    linear-gradient(180deg, var(--primary-top), var(--primary-mid) 55%, var(--primary-bottom));
  --frame-w: 2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 8px 22px;
  color: var(--on-primary);
  font: inherit;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.button:hover:not(:disabled),
.choice:hover:not(:disabled),
.slot-button:hover:not(:disabled),
.mode-button:hover,
.list-button:hover,
.home-hero:hover,
.home-daily:hover:not(:disabled),
.review-item:hover {
  filter: brightness(1.12);
}

.button:active:not(:disabled),
.mode-button:active,
.slot-button:active:not(:disabled),
.choice:active:not(:disabled),
.list-button:active,
.review-item:active {
  transform: scale(0.97);
  filter: brightness(1.3);
}

/* 自分の欄は大きいので、押したときの縮みを控えめに */
.home-hero:active,
.home-daily:active:not(:disabled) {
  transform: scale(0.985);
  filter: brightness(1.3);
}

/* 控えめなボタン：鋼の縁、暗い中身 */
.button-secondary {
  --frame: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 45%, transparent 46%),
    linear-gradient(180deg, #252c45, #121626);
  --frame-w: 1.5px;

  color: var(--text);
  text-shadow: 0 1px 0 #000;
}

.button-small {
  --cut: 7px;

  min-height: 36px;
  padding: 4px 14px;
  font-size: 0.875rem;
}

.button-large {
  min-height: 60px;
  font-size: 1.2rem;
}

.button-block {
  width: 100%;
}

.button-grow {
  flex: 1;
}

.button:disabled {
  filter: grayscale(0.8) brightness(0.6);
  cursor: not-allowed;
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 画面の一番下に固定する操作の帯（決定・戻る など） */
/* 中のボタンが全部隠れているときは帯ごと出さない（オンラインのロビーで部屋に入る前など） */
.action-bar:not(:has(> :not([hidden]))) {
  display: none;
}

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding: 18px 0 calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, rgba(7, 8, 13, 0.92) 18px);
}

/* 確認ダイアログなどのボタンの並び */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* a 要素をボタンの見た目にする（LINE の共有画面へのリンク） */
.button-line {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 45%, transparent 46%),
    linear-gradient(180deg, #19b35a, #06893f 55%, #034a22);
}

.button-discord {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 45%, transparent 46%),
    linear-gradient(180deg, #7983f5, #5865f2 55%, #2f3699);
}

/* =========================================================================
   カード
   ========================================================================= */
.card,
.panel {
  padding: 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}

/* カードの見出し：金の小さな斜体の札 */
.card-title {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
}

.card-note {
  margin: 2px 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.loadout-card .card-title + .slot-tray {
  margin-top: 12px;
}

/* オンライン対戦の「この編成で戦う」：余白を詰め、枠は縦長にせずアイコンと科目名を横に並べた低い札にする */
.loadout-card-compact {
  padding: 10px 12px;
}

.loadout-card-compact .card-head {
  margin-bottom: 8px;
}

.loadout-card-compact .slot-tray li {
  flex-direction: row;
  gap: 4px;
  aspect-ratio: auto;
  min-height: 36px;
}

.loadout-card-compact .slot-tray .subject-icon {
  width: 20px;
  height: 20px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-lo));
}

.divider::after {
  background: linear-gradient(90deg, var(--gold-lo), transparent);
}

/* 件数のバッジ：赤いひし形寄りの札 */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(180deg, var(--primary-top), var(--primary-mid));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  font-style: italic;
}

.count-badge.is-zero {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* 科目アイコン（多色の画像。48×48 で書き出してあるので、それより大きくしない） */
.subject-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* 小さなラベル（得意・苦手・相性）：斜めに切った札 */
.tag {
  display: inline-block;
  padding: 0 10px;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-size: 0.75rem;
  font-weight: var(--heavy);
  font-style: italic;
  line-height: 1.7;
  white-space: nowrap;
}

.tag-strong {
  background: var(--gold);
  color: var(--on-accent);
}

.tag-weak {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* 編成の枠の並び（ホーム・編成・オンライン・結果）。列の数は CONSTANTS.TOTAL_SLOTS。空きの枠は暗く沈める */
.slot-tray {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0;
  list-style: none;
}

.slot-tray li {
  --cut: 6px;
  --fill: radial-gradient(circle at 50% 35%, #2f3758, #10131f 75%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  aspect-ratio: 5 / 6;
  font-size: 0.7rem;
  font-weight: var(--heavy);
}

.slot-tray li.is-empty {
  --frame: var(--surface-3);
  --fill: rgba(5, 6, 10, 0.85);
}

.slot-tray .subject-icon {
  width: 28px;
  height: 28px;
}

.slot-tray-large li {
  --frame: linear-gradient(160deg, var(--gold-hi), var(--gold-lo) 50%, var(--steel-hi));
  font-size: 0.75rem;
}

.slot-tray-large li.is-empty {
  --frame: var(--surface-3);
}

.slot-tray-large .subject-icon {
  width: 32px;
  height: 32px;
}

/* =========================================================================
   スタート画面：ロゴとスタートボタンだけを画面の中央に
   ========================================================================= */
.start-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 24px 0;
}

.start-logo {
  display: block;
  width: min(340px, 100%);
  height: auto;
  aspect-ratio: 300 / 120;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

/* ボタンは clip-path で切り抜いているので、後光は外側の箱に付ける（ボタン自身に付けると切れる） */
.start-cta {
  animation:
    start-float 2.4s ease-in-out infinite,
    start-glow 2.4s ease-in-out infinite;
}

@keyframes start-float {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes start-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(233, 185, 60, 0.35));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(233, 185, 60, 0.9)) drop-shadow(0 0 28px rgba(255, 90, 90, 0.45));
  }
}

.start-button {
  min-width: 220px;
  min-height: 60px;
  font-size: 1.3rem;
  overflow: hidden;
  animation: start-pulse 1.6s ease-in-out infinite;
}

@keyframes start-pulse {
  50% {
    filter: brightness(1.2);
  }
}

/* 斜めの光の帯がときどき左から右へ走る */
.start-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 176, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: start-shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes start-shine {
  0%,
  55% {
    transform: translateX(-120%);
  }

  85%,
  100% {
    transform: translateX(120%);
  }
}

/* =========================================================================
   ホーム
   ========================================================================= */
/* タイトルロゴ（多色の PNG を 2倍の WebP にしたもの）。幅が足りない画面では縦横比を保って縮む */
.home-logo {
  display: block;
  width: min(300px, 100%);
  height: auto;
  aspect-ratio: 300 / 120;
  margin: 0 auto;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.home-logo[hidden] {
  display: none;
}

.home-hero {
  --cut: 14px;
  --frame: linear-gradient(135deg, var(--gold-hi), var(--gold) 20%, var(--gold-lo) 50%, var(--primary-mid));
  --fill:
    radial-gradient(circle at 15% 60%, rgba(233, 185, 60, 0.3), transparent 45%),
    linear-gradient(135deg, #3a0a10, #12152a 60%, #0a0c16);
  --frame-w: 2px;

  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

/* 自分の欄の右下の「編集 ›」（欄全体を押すとプロフィールの画面へ） */
.home-hero-edit {
  align-self: flex-end;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--gold);
  white-space: nowrap;
}

/* 人の絵と、その下の称号 */
.home-hero-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 140px;
}

.home-hero-figure .home-badge {
  align-self: center;
  font-size: 0.75rem;
  padding: 2px 10px;
  text-align: center;
}

.home-character {
  flex-shrink: 0;
  width: 104px;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(233, 185, 60, 0.45)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.6));
}

.home-hero-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 表示名。未登録なら「名前を決める」 */
.home-name {
  max-width: 100%;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: var(--heavy);
  font-style: italic;
  line-height: 1.4;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 90, 90, 0.35);
  overflow-wrap: anywhere;
}

.home-name.is-unset {
  color: var(--gold);
}

.home-stats,
.home-profile {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.home-stats {
  font-weight: bold;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* 得意・苦手。未設定なら「得意・苦手を決める」 */
.home-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  max-width: 100%;
}

.home-profile.is-unset {
  color: var(--gold);
}

.home-profile span,
.me-profile span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 道場の教科ごとの免許状の絵と数（名前の下）。押しても欄と同じくプロフィールへ */
.home-medal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  align-self: flex-start;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.home-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 高さをそろえる（メダルは正方形、免許状は横長） */
.home-reward-icon {
  width: auto;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.home-reward-icon[hidden] {
  display: none;
}

/* まだ1つもない教科の免許状は薄く */
.home-reward.is-zero {
  opacity: 0.4;
}

/* 付けている称号：名前の下の金の札。称号なしなら控えめに「称号なし」 */
.home-badge {
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 12px;
  border: 1px solid var(--gold-lo);
  background: var(--accent-soft);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.home-badge.is-unset {
  border-color: var(--border);
  background: none;
  color: var(--text-muted);
  font-weight: normal;
}

/* 新しく取った称号のお知らせ（自分の欄の下）。称号の札と同じ金 */
.home-new-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--gold-lo);
  background: var(--accent-soft);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: bold;
  list-style: none;
  overflow-wrap: anywhere;
}

.home-new-titles[hidden] {
  display: none;
}

/* 学年を決めていない人への案内（自分の欄の下）。称号のお知らせと同じ見た目で、押せる */
.home-grade-notice {
  padding: 8px 12px;
  border: 1px solid var(--gold-lo);
  background: var(--accent-soft);
  color: var(--gold);
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.home-grade-notice[hidden] {
  display: none;
}

/* 今日の問題（dojoDailyScreen.js）：自分の欄と対戦ボタンの間のデイリーの欄。
   上に名前・連続日数、真ん中に最近7日の印（済ませた日は金の ✓、今日は輪）、下に案内 */
.home-daily {
  --cut: 12px;
  --frame: linear-gradient(135deg, var(--gold-hi), var(--challenge) 30%, var(--gold-lo) 60%, var(--steel-hi));
  --fill:
    radial-gradient(circle at 88% 0%, rgba(255, 138, 61, 0.32), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #2a1a10, #10121e 70%);
  --frame-w: 2px;

  display: grid;
  gap: 10px;
  width: 100%;
  padding: 12px 16px 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.home-daily-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-daily-title {
  font-size: 1.2rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 138, 61, 0.45);
  white-space: nowrap;
}

/* 札：まだなら赤の「未」、済ませたら緑の「クリア」 */
/* 連続日数：右上の大きな数字 */
.home-daily-streak {
  margin-left: auto;
  color: var(--challenge);
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
}

.home-daily-streak strong {
  margin-right: 2px;
  color: var(--gold-hi);
  font-size: 1.5rem;
  font-weight: var(--heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 138, 61, 0.8);
}

.home-daily-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.home-daily-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.home-daily-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--border);
  background: var(--steel-lo);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: var(--heavy);
}

.home-daily-day.is-done .home-daily-dot {
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
}

/* 済ませた日の印の絵（daily-small.webp）：八角の枠は外して、絵だけを少し大きめに */
.home-daily-day.is-done .home-daily-dot.has-badge {
  overflow: visible;
  border: 0;
  background: none;
  clip-path: none;
}

.home-daily-badge {
  flex: none;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.home-daily-day.is-today:not(.is-done) .home-daily-dot {
  border-color: var(--challenge);
  background: var(--challenge-soft);
  animation: home-daily-pulse 1.6s ease-in-out infinite;
}

.home-daily-weekday {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: bold;
}

.home-daily-day.is-today .home-daily-weekday {
  color: var(--gold);
}

@keyframes home-daily-pulse {
  50% {
    filter: brightness(1.6);
  }
}

.home-daily-foot {
  display: flex;
  justify-content: flex-end;
}

.home-daily-go {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: var(--heavy);
  font-style: italic;
  white-space: nowrap;
}

/* 今日の分を済ませた日：欄は残して押せなくする。案内は緑の「クリア」 */
.home-daily:disabled {
  cursor: default;
}

.home-daily:disabled .home-daily-go {
  color: var(--safe);
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .home-daily-day.is-today:not(.is-done) .home-daily-dot {
    animation: none;
  }
}

/* =========================================================================
   プロフィール（名前・称号・メダル・得意と苦手の画面への入口）
   ========================================================================= */
.me-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.me-value {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.me-value.is-unset {
  color: var(--gold);
}

/* 得意科目と苦手科目の間は大きくあける。後ろの .list-button-note の display: block に負けないよう2つ重ねる */
.list-button-note.me-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
}

/* 勉強道場の行：免許状の絵＋数 */
#me-medal {
  display: flex;
  align-items: center;
  gap: 6px;
}

.me-medal-icon {
  width: auto;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.me-medal-icon[hidden] {
  display: none;
}

.me-chevron {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--gold);
}

/* =========================================================================
   称号（選ぶ・称号図鑑）
   ========================================================================= */
/* 付けている称号：大きめの金の名前と「外す」 */
.title-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

/* 図鑑の付けている札と同じ金の札 */
.title-current-name {
  padding: 6px 14px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #4a3c16, var(--accent-soft));
  box-shadow: inset 0 0 0 2px var(--accent-soft), inset 0 0 0 3px var(--gold-lo), 0 0 12px rgba(233, 185, 60, 0.35);
  font-size: 1.2rem;
  font-weight: var(--heavy);
  color: var(--gold-hi);
  overflow-wrap: anywhere;
}

.title-current-name.is-unset {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-muted);
}

.title-book-count {
  font-weight: bold;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.title-book {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1行＝称号の札：左に印（チェック・鍵・はてな）、名前と条件、付けている札だけ右に「付けている」。
   内側の細い線で札らしい二重の縁にする */
.title-book-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 2px var(--surface-2), inset 0 0 0 3px var(--steel-lo);
  color: inherit;
  font: inherit;
  text-align: left;
}

.title-book-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.title-book-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--steel-hi);
}

.title-book-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 持っている称号はボタン（押すと付ける） */
button.title-book-entry {
  cursor: pointer;
}

button.title-book-entry:active {
  transform: translateY(1px);
}

button.title-book-entry:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.title-book-name {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.title-book-condition {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 持っている称号：名前は明るく、左の印は金のチェック（枠は付けている称号だけ金にする） */
.title-book-entry.is-owned .title-book-icon {
  color: var(--on-accent);
  border-color: var(--gold);
  background: var(--gold);
}

/* 付けている称号：金の札（金の縁・内側の金の線・光）と右の「付けている」 */
.title-book-entry.is-equipped {
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #4a3c16, var(--accent-soft));
  box-shadow: inset 0 0 0 2px var(--accent-soft), inset 0 0 0 3px var(--gold-lo), 0 0 12px rgba(233, 185, 60, 0.35);
}

.title-book-entry.is-equipped .title-book-name {
  color: var(--gold-hi);
}

.title-book-entry.is-equipped .title-book-icon {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
}

.title-book-equipped {
  flex: none;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--on-accent);
  background: var(--gold);
}

/* 未取得：名前と条件は見えるが暗く、左は鍵 */
.title-book-entry.is-locked {
  background: var(--surface-2);
}

.title-book-entry.is-locked .title-book-name {
  color: var(--text-muted);
}

/* 隠し称号：「？？？」を点線の枠で、左ははてな */
.title-book-entry.is-secret {
  border-style: dashed;
  background: none;
  box-shadow: none;
}

.title-book-entry.is-secret .title-book-icon {
  border-style: dashed;
}

.title-book-entry.is-secret .title-book-name,
.title-book-entry.is-secret .title-book-condition {
  color: var(--steel-hi);
}

.home-profile .subject-icon,
.me-profile .subject-icon {
  width: 18px;
  height: 18px;
}

/* 編成のバッジ（ホームの自分の欄・プロフィール）：枠の科目アイコンだけを1列に。未設定なら「編成を決める」 */
.loadout-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.loadout-badges .subject-icon {
  width: 22px;
  height: 22px;
}

.loadout-badges.is-unset {
  font-size: 0.85rem;
  color: var(--gold);
}

/* 科目別の正答率のレーダーチャート：0〜100% の五角形。頂点に科目のバッジ、点は科目の色（中抜きは解いた数が少ない参考値） */
.subject-radar {
  max-width: 270px; /* スマホは小さめ（まとめ → レーダー → 科目の行の縦1列。RS-4） */
  margin: 8px auto 0;
}

.subject-radar-label,
.subject-radar-dot {
  cursor: pointer; /* タップでその科目の行を開く */
}

.subject-radar-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.subject-radar-grid {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.subject-radar-grid.is-outer {
  fill: color-mix(in srgb, var(--surface-3) 45%, transparent);
  stroke: var(--steel-hi);
  stroke-dasharray: none;
}

.subject-radar-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.subject-radar-shape {
  fill: color-mix(in srgb, var(--gold) 28%, transparent);
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* 最近の形（RS-5）：通算の形に点線で重ねる */
.subject-radar-shape.is-recent {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.subject-radar-recent-dot {
  fill: var(--text);
  pointer-events: none;
}

.subject-radar-dot {
  fill: var(--subject);
  stroke: var(--bg);
  stroke-width: 1.5;
}

.subject-radar-dot.is-tentative {
  fill: var(--surface);
  stroke: var(--subject);
  stroke-width: 2.5;
}

.subject-radar-label text {
  font-size: 12px;
  font-weight: bold;
}

.subject-radar-name {
  fill: var(--text);
}

.subject-radar-value {
  fill: var(--subject);
  font-variant-numeric: tabular-nums;
}

.subject-radar-label.is-empty image {
  opacity: 0.35;
}

.subject-radar-label.is-empty .subject-radar-name,
.subject-radar-label.is-empty .subject-radar-value {
  fill: var(--text-muted);
}

.subject-radar.is-empty .subject-radar-svg {
  opacity: 0.7;
}

.subject-radar-note {
  margin: 4px 0 0;
  text-align: center;
}

/* 成績表の 全部 / 対戦 / 道場 の切り替え（RS-8） */
.report-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.report-sources .choice {
  min-height: 44px;
}

/* 成績表のいちばん上「次にやること」（UL-2b）：枠なしで、すすめる単元の師範の顔（結果の画面の師範と同じ枠）とメッセージ・「稽古する」だけ。
   下の切り替え・科目別の正答率とは間をあける */
.report-next {
  align-items: flex-start;
  margin-bottom: 16px;
}

.report-next-face {
  width: 72px;
  height: 72px;
}

.report-next-message {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.report-next-name {
  margin: 0;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--gold);
}

.report-next-line {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ボタンはメッセージ欄の右端に寄せる */
.report-next-practice {
  align-self: flex-end;
  min-height: 40px;
  margin-top: 8px;
  padding: 4px 16px;
  font-size: 0.85rem;
}

/* 単元一覧（UL-2）：上に 全部 / 伸びしろだけ・教科・並び、おすすめ、すべての単元 */
.report-unit-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* 「絞り込み：」「並び：」の行（UL-2c）。見出しの幅をそろえて選ぶものの位置を縦にそろえる */
.report-unit-option-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

/* legend は fieldset の flex に入らないので、1行に並べるために浮かせる */
.report-unit-control-label {
  float: left;
  width: 5.5em;
  padding: 0;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--text-muted);
}

.report-unit-control-label::after {
  content: "：";
}

/* チェックボックスとラジオボタン：標準の見た目を消し、鋼の縁に金の印 */
.check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 0.9rem;
  cursor: pointer;
}

.check-option input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, var(--steel-hi), var(--steel-lo) 55%, var(--steel-hi)) border-box;
  cursor: pointer;
}

.check-option input[type="checkbox"] {
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.check-option input[type="checkbox"]:checked {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23151a2a' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) padding-box,
    linear-gradient(160deg, var(--gold-hi), var(--gold-lo)) border-box;
}

.check-option input[type="radio"] {
  border-radius: 50%;
}

.check-option input[type="radio"]:checked {
  background:
    radial-gradient(circle, var(--gold) 0 4.5px, transparent 5px) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, var(--gold-hi), var(--gold-lo)) border-box;
}

.check-option:has(input:checked) {
  color: var(--gold-hi);
}

/* 角を切ったものは輪が切れるので、項目全体に輪を出す */
.check-option:has(input:focus-visible) {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

/* 単元一覧の行：左に 1段目＝名前、2段目＝バー・数値・ラベル（成績表の単元の行と同じ列）、右に「稽古する」 */
.report-unit-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.report-unit-list:empty {
  display: none;
}

.report-list-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.report-list-unit-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 7.5em 3.5em;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  font-size: 0.8rem;
}

.report-list-unit-name {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.report-list-unit-name .subject-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: -4px;
}

/* 「稽古する」は1行に収まるように小さめ */
.report-list-unit-practice {
  flex: none;
  min-height: 40px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

.report-list-unit-medal {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 参考値・まだ解いていない単元は薄く（「稽古する」は押せるので薄くしない） */
.report-list-unit.is-tentative .report-list-unit-body {
  opacity: 0.5;
}

.report-unit-empty {
  margin: 12px 0 0;
}

/* 科目別の正答率：科目名・バー・数値・ラベルの4列。科目の行を開くとセクション、セクションを開くと単元（RS-4） */
.subject-stats {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.subject-stat {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) 8.5em 4em;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
}

.subject-stat::-webkit-details-marker {
  display: none;
}

.subject-stat-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  white-space: nowrap;
}

/* 開く・閉じるの印 */
.subject-stat-name::before {
  content: '▸';
  flex: none;
  color: var(--text-muted);
  transition: transform 0.15s;
}

details[open] > .subject-stat .subject-stat-name::before {
  transform: rotate(90deg);
}

.subject-stat-name .subject-icon {
  width: 18px;
  height: 18px;
}

.subject-stat-bar {
  height: 8px;
  background: var(--surface-3);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  overflow: hidden;
}

.subject-stat-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold) 60%, var(--gold-hi));
}

.subject-stat-value {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 解いた数が少ない行（参考の値）は薄く */
.subject-stat.is-tentative > :not(.subject-stat-name),
.subject-stat.is-tentative .subject-icon,
.report-unit.is-tentative {
  opacity: 0.5;
}

/* 最近の伸び（RS-5）：次の段に「最近10問 80% ↑」。下がっても否定的な色にしない */
.report-trend {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 科目の行の「みんなより」（LR-7）。集計が取れるまでは空なので詰める */
.report-crowd {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.report-crowd:empty {
  display: none;
}

.report-crowd.is-above {
  color: var(--safe);
}

.report-crowd.is-below {
  color: var(--challenge);
}

.report-trend.is-up {
  color: var(--gold);
  font-weight: bold;
}

/* 得意 / ふつう / 伸びしろ（否定的な色にしない） */
.report-rating {
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.report-rating.is-strong {
  color: var(--gold);
}

.report-rating.is-normal {
  color: var(--even);
}

.report-rating.is-growth {
  color: var(--team-own);
}

/* 正答率×速さ（RS-6）：あやふや・うっかり。否定的な色にしない */
.report-rating.is-shaky,
.report-rating.is-careless {
  color: var(--text);
}

/* セクション・単元の行の下のひとことの対策（RS-6） */
.report-advice {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.report-sections,
.report-units {
  display: grid;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 0 0 0 12px;
  list-style: none;
  border-left: 2px solid var(--border);
}

/* セクション：名前が長めなので単元と同じく2段（1行目に名前、2行目にバー・数値・ラベル） */
.report-section-row {
  grid-template-columns: minmax(0, 1fr) 8.5em 4em;
  gap: 2px 8px;
}

.report-section-row .subject-stat-name {
  grid-column: 1 / -1;
  white-space: normal;
}

/* 単元：名前は長いので1行目に、2行目にバー・数値・ラベル */
.report-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5em 4em;
  align-items: center;
  gap: 2px 8px;
  font-size: 0.8rem;
}

.report-unit-name {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.report-units-empty {
  margin: 0;
}

/* 学年別の正答率（RS-7）：開閉しないので印と指のカーソルはなし */
.mode-buttons {
  display: grid;
  gap: 12px;
}

/* BOT 対戦の準備：上に種類（通常・タッグバトル）、下に BOT ごとの強さ。
   オンライン対戦の「部屋を作る」の種類（1対1・タッグ）も同じ見た目 */
.bot-setup-modes,
.online-create-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bot-setup-modes .choice,
.online-create-modes .choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
}

.bot-setup-mode-name,
.online-create-mode-name {
  font-size: 1.05rem;
  font-weight: bold;
}

.bot-setup-mode-note,
.online-create-mode-note {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.bot-setup-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bot-setup-row {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bot-setup-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: bold;
}

.bot-level-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* 隠しの強さが出現すると4つに増える */
  gap: 6px;
}

.bot-level-options .choice {
  min-height: 40px;
  padding: 0 4px;
}

/* 相手の得意・苦手：おまかせ＋5科目を3列×2段 */
.bot-subject-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.bot-subject-options .choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 4px;
}

/* 対戦モードの大きなボタン：平行四辺形の看板。赤（BOT）・青（オンライン）・緑（道場） */
.mode-button {
  --frame: linear-gradient(180deg, var(--gold-hi), var(--gold) 35%, var(--gold-lo));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
    linear-gradient(100deg, var(--primary-top), var(--mode-bot) 45%, var(--mode-bot-dark));
  --frame-w: 2.5px;
  --slant: 18px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 88px;
  padding: 14px 52px 14px 30px;
  color: var(--on-mode);
  font: inherit;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.mode-button::before {
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

/* 右の大きな矢印 */
.mode-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 34px;
  width: 14px;
  height: 14px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.mode-online {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
    linear-gradient(100deg, #4d8bff, var(--mode-online) 45%, var(--mode-online-dark));
}

.mode-tag {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
    linear-gradient(100deg, #b07cff, var(--mode-tag) 45%, var(--mode-tag-dark));
}

.mode-dojo {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
    linear-gradient(100deg, #4fd07f, var(--mode-dojo) 45%, var(--mode-dojo-dark));
}

.mode-test-range {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
    linear-gradient(100deg, #4fd3f0, var(--mode-test-range) 45%, var(--mode-test-range-dark));
}

.mode-name {
  font-size: 1.55rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35);
}

.mode-note {
  font-size: 0.85rem;
  font-weight: bold;
  opacity: 0.92;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* 一覧の1行のようなボタン（復習） */
.list-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.list-button-label {
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.04em;
}

.list-button-note {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* =========================================================================
   選択肢（得意・苦手の科目など）
   ========================================================================= */
.choice-group {
  padding: 14px 16px 16px;
}

.choice-group legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.choices {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.choice {
  --cut: 8px;
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 45%, transparent 46%),
    linear-gradient(180deg, #222941, #10131f);

  min-height: 48px;
  color: var(--text);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

/* 選んだもの：金に光らせる */
.choice.is-selected {
  --frame: linear-gradient(180deg, #ffffff, var(--gold-hi));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 45%, transparent 46%),
    linear-gradient(180deg, #ffd866, var(--gold) 55%, #a8740f);
  --frame-w: 2px;

  color: var(--on-accent);
  font-weight: var(--heavy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.choice:disabled {
  filter: grayscale(0.6) brightness(0.55);
  cursor: not-allowed;
}

/* 得意・苦手の科目ボタン：アイコン＋科目名 */
.choice-subject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* =========================================================================
   チュートリアル
   ========================================================================= */
.tutorial-step {
  align-self: flex-start;
  padding: 2px 14px;
  background: linear-gradient(180deg, var(--primary-top), var(--primary-mid));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
}

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

/* キャラクターのタイプ（男の子 / 女の子 / その他）を3枚のカードで選ぶ：格闘ゲームのキャラ選択 */
.character-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.character-choice {
  --fill: radial-gradient(circle at 50% 40%, #2f3758, #0d1019 75%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  color: var(--text);
  font: inherit;
  font-weight: var(--heavy);
  font-style: italic;
  cursor: pointer;
}

.character-choice.is-selected {
  --frame: linear-gradient(180deg, #ffffff, var(--gold) 40%, var(--gold-lo));
  --fill:
    radial-gradient(circle at 50% 40%, rgba(233, 185, 60, 0.45), transparent 65%),
    linear-gradient(180deg, #3a0a10, #0d1019);
  --frame-w: 3px;

  color: var(--gold);
}

/* 画像は 200×240 で書き出し、半分の大きさで出す。読み込めなくても枠の大きさは変えない */
.character-choice img {
  width: 100%;
  max-width: 100px;
  height: auto;
  aspect-ratio: 5 / 6;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.6));
}

/* =========================================================================
   編成
   ========================================================================= */
.loadout-total {
  font-size: 1.3rem;
  font-weight: var(--heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 2px 0 #000;
}

.loadout-total.is-incomplete {
  color: var(--text-muted);
}

.loadout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.loadout-row {
  --cut: 8px;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
}

.loadout-row.is-used {
  --frame: linear-gradient(160deg, var(--gold-hi), var(--gold) 40%, var(--gold-lo));
  --fill:
    linear-gradient(90deg, rgba(233, 185, 60, 0.16), transparent 60%),
    linear-gradient(180deg, #1a2034, #0e111c);
  --frame-w: 2px;
}

.loadout-subject {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  font-weight: var(--heavy);
}

.loadout-subject .subject-icon {
  width: 32px;
  height: 32px;
}

/* 枠数はひし形の印で見せる（読み上げは aria-label） */
.pips {
  display: inline-flex;
  gap: 7px;
  min-width: 40px;
  justify-content: center;
}

.pip {
  width: 11px;
  height: 11px;
  border: 2px solid var(--steel-hi);
  transform: rotate(45deg);
}

.pip.is-on {
  border-color: var(--gold-hi);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233, 185, 60, 0.7);
}

/* 免許状がまだなくて入れられない枠（LO-1）。点を薄く沈める */
.pip.is-locked {
  border-color: var(--surface-3);
  opacity: 0.45;
}

.step-button {
  --cut: 7px;
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 45%, transparent 46%),
    linear-gradient(180deg, #2a3150, #131726);

  width: 44px;
  height: 44px;
  color: var(--gold);
  font: inherit;
  font-size: 1.3rem;
  font-weight: var(--heavy);
  line-height: 1;
  cursor: pointer;
}

.step-button:disabled {
  filter: grayscale(1) brightness(0.5);
  cursor: not-allowed;
}

/* =========================================================================
   名前（表示名）
   ========================================================================= */
.name-form {
  display: flex;
  gap: 8px;
}

.name-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid var(--steel-hi);
  border-radius: 0;
  background: #05060a;
  color: var(--text);
  font: inherit;
  font-size: 1.1rem; /* 16px 以上にして iOS の自動拡大を避ける */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.name-input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 10px rgba(233, 185, 60, 0.45);
}

.name-input:disabled {
  opacity: 0.5;
}

.name-save {
  margin-top: 10px;
}

/* =========================================================================
   オンライン対戦の部屋
   ========================================================================= */
.online-code-label {
  cursor: pointer;
}

.online-create-modes {
  margin-bottom: 12px;
}

/* 選んだ種類は金色の地になるので、補足の灰色の文字が読めない。地の文字色に合わせる */
.online-create-modes .is-selected .online-create-mode-note {
  color: inherit;
  opacity: 0.8;
}

.online-join {
  display: flex;
  gap: 8px;
}

/* 出題範囲（〜1年・〜2年・〜3年）は横幅を3等分して1行に並べる */
.online-create-ranges {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
}

/* 部屋コードで入る前の確認（部屋の種類と出題範囲） */
.online-join-confirm {
  margin-top: 12px;
}

.online-join-confirm-text {
  font-weight: bold;
}

.online-join-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.online-code-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border: 2px solid var(--steel-hi);
  border-radius: 0;
  background: #05060a;
  color: var(--gold);
  font: inherit;
  font-size: 1.6rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.4em;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.online-code-input::placeholder {
  color: var(--surface-3);
}

.online-code-input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 10px rgba(233, 185, 60, 0.45);
}

.online-room {
  text-align: center;
}

.online-room .card-note {
  margin: 0;
}

/* 部屋コード：大きな金の数字 */
.online-code {
  font-size: 3.2rem;
  font-weight: var(--heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  line-height: 1.3;
  color: var(--gold);
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(233, 185, 60, 0.5);
}

.online-status {
  font-weight: bold;
}

/* ランダム対戦で相手を探している間の印（3つの点が順に光る） */
.online-searching {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 18px 0 6px;
}

.online-searching[hidden] {
  display: none;
}

.online-searching span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(233, 185, 60, 0.6);
  animation: online-searching 1.2s ease-in-out infinite;
}

.online-searching span:nth-child(2) {
  animation-delay: 0.2s;
}

.online-searching span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes online-searching {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(0.75);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* タッグの4人部屋：チームごとの席 */
.online-tag-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 0;
}

.online-tag-teams[hidden] {
  display: none;
}

.online-tag-team-name {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: bold;
}

.online-tag-seats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.online-tag-seat {
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}

.online-tag-seat.is-self {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: bold;
}

.online-tag-seat.is-empty {
  border-style: dashed;
  opacity: 0.6;
}

/* 人のいる席：名前と準備完了の印（T-15） */
.online-tag-seat-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-tag-ready-mark {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--text-muted);
}

.online-tag-seat.is-ready {
  border-color: var(--accent);
}

.online-tag-seat.is-ready .online-tag-ready-mark {
  font-weight: bold;
  color: var(--accent);
}

.online-tag-teams .button {
  grid-column: 1 / -1;
  justify-self: center;
}

/* 部屋を作った人に見せる、空いた席のボットの強さ */
.online-tag-seat.is-bot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-style: dashed;
  color: var(--text-muted);
}

.online-tag-bot-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.online-tag-bot-levels .choice {
  min-height: 34px;
  padding: 0 2px;
  font-size: 0.8rem;
}

.online-tag-bot-note {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

.online-tag-bot-note:empty {
  display: none;
}

/* 招待：相手を待っている間だけ出す */
.online-invite {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  text-align: left;
}

.online-invite-url {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #05060a;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
}

.online-invite .hint:empty {
  display: none;
}

/* =========================================================================
   バトル：両者の体力とターン表示
   ========================================================================= */
/* 格闘ゲーム風の HUD。ライト・ダークどちらでも暗い帯にする（体力バーの色が一番映える地）。
   左があなた（青）、右が相手（オレンジ）。体力バーは外側を起点に、中央へ向かって減る */
.fighters {
  --hud-bg-top: #1f2640;
  --hud-bg-bottom: #0a0d17;
  --hud-text: #ffffff;
  --hud-text-muted: rgba(255, 255, 255, 0.55);
  --hud-frame: #d4af37; /* バーの金の縁 */
  --hud-p1: #3b5bdb;
  --hud-p2: #d9480f;
  --hud-bar-empty-top: #3a0b12;
  --hud-bar-empty-bottom: #1c0509;
  --hud-lag: #fff1f1; /* 減った分の残像（本体が赤くなっても見分けられるよう白） */
  --hud-lag-heal: #8ce99a; /* 回復で伸びる先 */
  --hud-damage: #ff6b6b;
  --hud-heal: #69db7c;

  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  padding: 10px 10px 12px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(59, 91, 219, 0.4), transparent 38%, transparent 62%, rgba(217, 72, 15, 0.4)),
    linear-gradient(180deg, var(--hud-bg-top), var(--hud-bg-bottom));
  background-color: var(--hud-bg-bottom);
  box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
  color: var(--hud-text);
}

.fighter {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

/* 相手側は顔を外側（右）に */
.fighter-opponent {
  flex-direction: row-reverse;
}

/* 顔：外側に四角い枠で。相手側は左右反転して向かい合わせる。読み込めなければ hidden で詰める */
.fighter-portrait {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid #05070d;
  background: var(--hud-bg-bottom);
  box-shadow: 0 0 0 1px var(--hud-frame);
  object-fit: cover;
}

.fighter-opponent .fighter-portrait {
  scale: -1 1;
}

/* タイプが分からない相手は得意科目のアイコンで代用（反転しない） */
.fighter-portrait.is-icon {
  padding: 4px;
  object-fit: contain;
  scale: none;
}

.fighter-portrait[hidden] {
  display: none;
}

/* 名前と数字・体力バーの2行 */
.fighter-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fighter-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}

/* 相手側は左右反転（名前が外側＝右、数字が中央寄り） */
.fighter-opponent .fighter-head {
  flex-direction: row-reverse;
}

/* 名前は斜めに切った札 */
.fighter-name {
  padding: 2px 12px 2px 8px;
  background: var(--hud-p1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.fighter-opponent .fighter-name {
  padding: 2px 8px 2px 12px;
  background: var(--hud-p2);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

.fighter-hp {
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 212, 59, 0.35);
}

.fighter-hp-max {
  margin-left: 2px;
  font-size: 0.65rem;
  font-weight: bold;
  color: var(--hud-text-muted);
  text-shadow: none;
}

/* タッグ戦：体力が3桁になり左右の数字が重なるので、上限（/150）は出さない（体力バーで分かる） */
.fighter.is-tag .fighter-hp-max {
  display: none;
}

/* 残りが少ないとき：数字を赤く脈打たせる */
.fighter.is-low .fighter-hp {
  color: var(--hud-damage);
  animation: hp-danger-pulse 0.8s ease-in-out infinite alternate;
}

/* 体力バー：金の縁・黒の枠の平行四辺形。空の部分は暗い赤 */
.hp-bar {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 2px solid #05070d;
  background: linear-gradient(180deg, var(--hud-bar-empty-top), var(--hud-bar-empty-bottom));
  box-shadow: 0 0 0 1px var(--hud-frame), inset 0 2px 4px rgba(0, 0, 0, 0.7);
  transform: skewX(-20deg);
  container-type: inline-size; /* 本体のグラデーションをバー全体の幅に合わせるため（100cqw） */
}

.fighter-opponent .hp-bar {
  transform: skewX(20deg);
}

/* つや（上1/3の白）。中身より手前に重ねる */
.hp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0 28%, rgba(255, 255, 255, 0) 28%);
  pointer-events: none;
}

.hp-fill,
.hp-lag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.fighter-opponent .hp-fill,
.fighter-opponent .hp-lag {
  right: 0;
  left: auto;
}

/* 本体：区切らずに、空の側の赤から満タンの側の金色へのグラデーション。
   色はバー全体の幅に固定し（::before）、本体の幅で切り取るので、減るほど先端が赤に寄る。1/4 を切ったら点滅 */
.hp-fill {
  overflow: hidden;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.hp-fill::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(90deg, #e03131 0%, #f76707 30%, #fcc419 65%, #ffe066 100%);
}

.fighter-opponent .hp-fill::before {
  right: 0;
  left: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(270deg, #e03131 0%, #f76707 30%, #fcc419 65%, #ffe066 100%);
}

.hp-fill.is-low {
  animation: hp-low-flash 0.7s ease-in-out infinite alternate;
}

/* 本体はすばやく減り、残像は一拍おいてから追いかける */
.hp-fill.is-changing {
  transition: width 0.25s ease-out;
}

.hp-lag {
  background: var(--hud-lag);
}

.hp-lag.is-heal {
  background: var(--hud-lag-heal);
}

.hp-lag.is-changing {
  transition: width 0.6s ease-in 0.55s;
}

/* 回復は本体のほうをゆっくり伸ばす（残像は最初から伸び先にいる） */
.hp-lag.is-heal + .hp-fill.is-changing {
  transition: width 0.6s ease-out 0.5s;
}

/* 被弾：体力欄を揺らし、バーを一瞬白く光らせる（main.js の FIGHTER_HIT_MS と合わせる） */
.fighter.is-hit {
  animation: fighter-hit 0.4s ease-out;
}

.fighter.is-hit .hp-bar,
.fighter.is-hit .fighter-portrait {
  animation: hp-bar-flash 0.4s ease-out;
}

@keyframes fighter-hit {
  0%,
  100% {
    translate: 0 0;
  }
  15% {
    translate: -5px 1px;
  }
  30% {
    translate: 5px -1px;
  }
  45% {
    translate: -3px 0;
  }
  65% {
    translate: 2px 0;
  }
}

@keyframes hp-bar-flash {
  0% {
    filter: brightness(2.2);
  }
  100% {
    filter: none;
  }
}

@keyframes hp-low-flash {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.45);
  }
}

@keyframes hp-danger-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.55;
  }
}

/* 体力の増減：ダメージは赤の −、回復は緑の ＋。バーの下の中央寄りに出す。回復はダメージの後 */
.hp-deltas {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 1;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.fighter-opponent .hp-deltas {
  right: auto;
  left: 0;
}

/* カウンター（能力のチャージ）：体力バーの下に菱形を並べる。相手側は外側（右）寄せ。満タンで光る */
.charge-pips {
  display: flex;
  gap: 4px;
}

/* カウンターと連続正解の行（相手側は右寄せで、外側からカウンター → 連続正解） */
.fighter-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.1em;
}

.fighter-opponent .fighter-meta {
  flex-direction: row-reverse;
}

.fighter-streak {
  font-size: 0.7rem;
  font-weight: var(--heavy);
  color: var(--gold);
  white-space: nowrap;
}

.charge-pip {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--hud-frame);
  rotate: 45deg;
  background: transparent;
}

.charge-pip.is-on {
  background: var(--hud-frame);
}

.charge-pips.is-full .charge-pip {
  background: var(--gold-hi);
  box-shadow: 0 0 6px var(--gold);
  animation: charge-full-glow 1.2s ease-in-out infinite alternate;
}

@keyframes charge-full-glow {
  from {
    box-shadow: 0 0 2px var(--gold);
  }

  to {
    box-shadow: 0 0 8px var(--gold-hi);
  }
}

.hp-delta {
  font-size: 1.4rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 2px #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -1px 0 #000;
  opacity: 0;
  animation: hp-delta-float 2.4s ease-out both;
}

.hp-delta.is-damage {
  color: var(--hud-damage);
}

.hp-delta.is-heal {
  color: var(--hud-heal);
  animation-delay: 0.5s;
}

@keyframes hp-delta-float {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(1.3);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes hp-delta-fade {
  0%,
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ターン表示の帯と、同じ行の右端のリアクションの絵文字。帯はどの対戦（BOT 戦・オンライン）でも左寄せ。
   絵文字は次の行へ回さず、横が足りないときは帯の中の文言を区切りで改行する */
.battle-turn-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.battle-turn-row > .battle-turn {
  min-width: 0;
  margin-right: auto;
}

/* 絵文字が並ぶ間は帯を詰める（立場は帯の色で分かるので、ペン・盾のアイコンは外す） */
.battle-turn-row:has(.reaction-emojis:not([hidden])) > .battle-turn {
  padding-inline: 16px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.battle-turn-row:has(.reaction-emojis:not([hidden])) .battle-turn-icon {
  display: none;
}

/* ターン表示：誰の番かを色で見せる斜めの帯 */
.battle-turn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 4px 26px;
  background: linear-gradient(180deg, #2a3150, #10131f);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-size: 0.95rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

/* 文言の区切り（ターン数・だれの狙い撃ちか・正解で防御）。横が足りないときは区切りで改行する */
.battle-turn-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.8em;
  min-width: 0;
  line-height: 1.25;
  text-align: center;
}

/* 帯の高さを変えないよう、上下を少しだけはみ出させる（帯の padding の内側に収まる） */
.battle-turn-icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -3px 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

.battle-turn[data-kind="self"] {
  background: linear-gradient(180deg, #4d74ff, #2443b8 60%, #13246b);
  color: #fff;
}

.battle-turn[data-kind="opponent"] {
  background: linear-gradient(180deg, #ff7a3d, #c2410c 60%, #6b1f05);
  color: #fff;
}

.battle-turn[data-kind="system"] {
  background: linear-gradient(180deg, #ffd27a, var(--system) 55%, #8a4a00);
  color: #1a0f00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* =========================================================================
   バトル：攻撃の選択
   ========================================================================= */
#online-entry,
#battle-select,
#battle-step-section,
.answer-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.step-title {
  font-size: 1.15rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #000;
}

/* 狙い撃ちの選択画面の上に出す説明（与えるダメージの倍率と休止） */
.special-guide {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.special-guide-lead {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 残り時間：金の縁の細い平行四辺形 */
.timer {
  height: 10px;
  overflow: hidden;
  border: 1.5px solid #05070d;
  background: #1c0509;
  box-shadow: 0 0 0 1px var(--gold-lo), inset 0 2px 3px rgba(0, 0, 0, 0.7);
  transform: skewX(-20deg);
}

.timer-bar {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 30%, transparent 31%),
    linear-gradient(90deg, #e67700, #fcc419);
}

.timer-bar.is-warning {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 30%, transparent 31%),
    linear-gradient(90deg, #a51111, #ff6b6b);
}

.timer-text {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: var(--heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 2px 0 #000;
}

/* 1段目：科目スロット（縁の色が相性） */
.slot-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.slot-button {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 45%, transparent 46%),
    linear-gradient(180deg, #222941, #0e111c);
  --frame-w: 2px;

  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.slot-button .subject-icon {
  width: 36px;
  height: 36px;
}

.slot-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* 休み中の枠 */
.slot-button:disabled {
  --frame: var(--surface-3);
  --fill: rgba(5, 6, 10, 0.9);

  filter: grayscale(1);
  opacity: 0.55;
  cursor: not-allowed;
}

.slot-subject {
  font-weight: var(--heavy);
  font-style: italic;
  line-height: 1.3;
}

.slot-note {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-muted);
}

.slot-note:empty {
  display: none;
}

/* 2段目：技（セクション） */
.section-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.section-button {
  --frame-w: 2px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px;
  font-weight: var(--heavy);
  font-style: italic;
}

/* 技が奇数のときは最後の1つを横いっぱいに */
.section-button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 技ボタンの縁（AT-4 まで互角の色だったものをそのまま使う） */
.choice.section-button {
  --frame: linear-gradient(160deg, #e3e7f5, var(--even) 40%, #4a526c);
}

.section-detail {
  font-size: 0.75rem;
  font-weight: normal;
  font-style: normal;
  color: var(--text-muted);
}

/* 攻撃の説明（カウントダウン・出題・待機） */
.chosen-text {
  font-weight: bold;
  white-space: pre-line;
}

/* =========================================================================
   バトル：カウントダウン・待機・相手のカード
   ========================================================================= */
.countdown,
.battle-wait {
  text-align: center;
}

.battle-wait {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 立場の絵（ペン / 盾）と数字を横に並べる。絵がないときは数字だけ真ん中に出る */
.countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.countdown-icon {
  flex: none;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 14px rgba(255, 255, 255, 0.35));
}

.countdown-icon.is-pop {
  animation: countdown-icon-in 0.4s ease-out;
}

@keyframes countdown-icon-in {
  0% {
    opacity: 0;
    transform: translateX(-24px) scale(1.4) rotate(-12deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.95);
  }
  100% {
    transform: none;
  }
}

/* 3・2・1：金の巨大な斜体。斜体ははみ出した右端に background-clip の塗りが届かず切れるので、左右に余白を取って塗る範囲を広げる。
   数字ごとに字幅が違うと中央寄せの行で絵が左右に動くので、幅を固定して中で中央に置く */
.countdown-number {
  flex: none;
  width: calc(1ch + 0.4em);
  min-height: 1.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding: 0 0.2em;
  font-size: 6rem;
  font-weight: var(--heavy);
  font-style: italic;
  line-height: 1.2;
  background: linear-gradient(180deg, #ffffff 5%, var(--gold-hi) 25%, var(--gold) 55%, #a8640a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 16px rgba(255, 90, 40, 0.55));
}

.countdown-number.is-pop {
  animation: countdown-pop 0.5s ease-out;
}

/* 数字の後、問題文が届くまでの「スタート！」（U-53）。数字1文字の幅では収まらないので幅を広げて小さめに。
   行の高さは数字と同じ（6rem × 1.2）にして、枠の高さを変えない */
.countdown-number.is-start {
  width: auto;
  font-size: 3rem;
  line-height: 2.4;
}

@keyframes countdown-pop {
  0% {
    opacity: 0;
    transform: scale(2.2);
  }
  60% {
    opacity: 1;
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

/* 次の問題の形式（早押し4択・ぜんぶ見つけろ など）。色の帯に白文字の見出しで、一言はその下に出す。
   4択以外はときどきしか出ないので赤い帯で目立たせる */
.countdown-format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 12px;
  max-width: 100%;
}

/* 左上と右下を斜めに切った帯 */
.countdown-format-name {
  display: block;
  padding: 6px 28px;
  font-size: 1.6rem;
  font-weight: var(--heavy);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--on-mode);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.countdown-format-tagline {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-muted);
}

.countdown-format:not([data-format="plain"]) .countdown-format-name {
  background: linear-gradient(180deg, var(--primary-top), var(--primary-mid) 55%, var(--primary-bottom));
  border-top-color: var(--gold-hi);
}

.countdown-format:not([data-format="plain"]) .countdown-format-tagline {
  color: var(--gold-hi);
}

/* タッグ BOT 戦の開始前の紹介：あなたのチーム（あなた・相方）VS 相手チーム（2人） */
.tag-intro {
  --frame: linear-gradient(160deg, #e2d0ff, var(--mode-tag) 30%, var(--mode-tag-dark) 60%, var(--gold));
  --fill:
    linear-gradient(180deg, #1c0f33, #0d1019 70%);
  --frame-w: 2.5px;

  text-align: center;
  animation: opponent-card-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tag-intro-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.tag-intro-team-name {
  margin-bottom: 4px;
  color: var(--gold);
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
}

.tag-intro-members {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-intro-member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-intro-image {
  flex: none;
  width: 48px;
  height: 58px;
  object-fit: contain;
}

.tag-intro-image.is-icon {
  padding: 10px;
}

.tag-intro-name {
  font-weight: var(--heavy);
}

.tag-intro-title {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid var(--gold-lo);
  background: var(--accent-soft);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: bold;
  vertical-align: middle;
}

.tag-intro-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tag-intro-profile .subject-icon {
  width: 18px;
  height: 18px;
}

.tag-intro-vs {
  align-self: center;
  color: var(--challenge);
  font-size: 1.3rem;
  font-weight: var(--heavy);
  font-style: italic;
  text-shadow: 0 2px 0 #000;
}

/* 対戦前の相手のプロフィールカード（数秒だけ出す）。絵の枠は固定して、読み込み前後で大きさを変えない */
.opponent-card {
  --frame: linear-gradient(160deg, #ffd0a8, var(--challenge) 30%, #7a1c05 60%, var(--gold));
  --fill:
    radial-gradient(circle at 50% 28%, rgba(255, 110, 40, 0.45), transparent 50%),
    linear-gradient(180deg, #2a0c06, #0d1019 70%);
  --frame-w: 2.5px;

  text-align: center;
  animation: opponent-card-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* 「対戦相手」：VS の札 */
.opponent-card-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 16px;
  background: linear-gradient(180deg, #ff7a3d, #c2410c);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.12em;
}

.opponent-card-image {
  display: block;
  width: 120px;
  height: 144px;
  margin: 0 auto 8px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 110, 40, 0.55)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6));
}

/* キャラクターのタイプが分からないときは科目アイコンを小さめに出す */
.opponent-card-image.is-icon {
  padding: 24px;
}

.opponent-card-name {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 110, 40, 0.5);
}

.opponent-card-title {
  display: inline-block;
  max-width: 100%;
  margin: -6px 0 12px;
  padding: 2px 12px;
  border: 1px solid var(--gold-lo);
  background: var(--accent-soft);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.opponent-card-title[hidden] {
  display: none;
}

/* ランダム対戦で範囲の違う人と組んだときの案内（G-7） */
.opponent-card-range {
  margin: -4px 0 12px;
  color: var(--gold);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.opponent-card-range[hidden] {
  display: none;
}

/* ランダム対戦の「同じ学年の相手だけを探す」（G-7） */
.online-random-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.opponent-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.opponent-card-stats div {
  --cut: 6px;
  --fill: rgba(8, 10, 18, 0.85);

  padding: 8px 4px;
}

.opponent-card-stats dt {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.opponent-card-stats dd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  margin: 4px 0 0;
  font-weight: var(--heavy);
  font-style: italic;
  color: var(--gold);
}

/* 得意科目・苦手科目：横いっぱいの帯。科目アイコン自体に色があるので、縁と文字は他の欄と同じ色のままにする */
.opponent-card-stats .opponent-card-subject {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 8px;
}

.opponent-card-subject dt {
  font-size: 0.9rem;
}

.opponent-card-subject dd {
  margin: 0;
  gap: 8px;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 2px 0 #000;
}

.opponent-card-subject .subject-icon {
  width: 32px;
  height: 32px;
}

/* 道場の師範のカード（DR-6）：対戦前のひとことと、得意な技（1枠を横いっぱいに） */
.opponent-card-line {
  margin: -4px 0 12px;
  font-size: 0.95rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.opponent-card-line::before {
  content: '「';
}

.opponent-card-line::after {
  content: '」';
}

.opponent-card-line[hidden],
.opponent-card-stats[hidden] {
  display: none;
}

.opponent-card-master {
  grid-template-columns: 1fr;
}

@keyframes opponent-card-in {
  0% {
    opacity: 0;
    transform: translateX(40px) skewX(-8deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   バトル：出題と解答
   ========================================================================= */
.answer-panel .chosen-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 相性・倍率の説明：問題を先に読めるよう選択肢の下に置く */
.answer-note {
  margin: 4px 0 0;
}

.answer-note:empty {
  display: none;
}

/* 出題中の科目の色：パネルを科目の色で染め、問題の枠とバッジも同じ色にする */
#battle-answer[data-subject],
.tag-question[data-subject] {
  padding: 12px;
  border: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--subject), var(--subject-soft)) 4;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--subject) 30%, transparent), transparent 65%),
    var(--subject-bg);
}

#battle-answer[data-subject="english"],
.tag-question[data-subject="english"],
.subject-radar [data-subject="english"] {
  --subject: #f5c518;
  --subject-soft: #6b5410;
  --subject-bg: #241c05;
}

#battle-answer[data-subject="math"],
.tag-question[data-subject="math"],
.subject-radar [data-subject="math"] {
  --subject: #3d8bff;
  --subject-soft: #163a73;
  --subject-bg: #0a1730;
}

#battle-answer[data-subject="japanese"],
.tag-question[data-subject="japanese"],
.subject-radar [data-subject="japanese"] {
  --subject: #ff4d6a;
  --subject-soft: #6b1a28;
  --subject-bg: #2a0c12;
}

#battle-answer[data-subject="science"],
.tag-question[data-subject="science"],
.subject-radar [data-subject="science"] {
  --subject: #a66bff;
  --subject-soft: #3b2366;
  --subject-bg: #170f29;
}

#battle-answer[data-subject="social"],
.tag-question[data-subject="social"],
.subject-radar [data-subject="social"] {
  --subject: #2fd28a;
  --subject-soft: #12573a;
  --subject-bg: #0a2219;
}

#battle-answer[data-subject] .question-text,
.tag-question[data-subject] .question-text {
  --frame: linear-gradient(150deg, var(--subject), var(--subject-soft) 55%, var(--steel-lo));
  --fill:
    linear-gradient(180deg, color-mix(in srgb, var(--subject) 14%, transparent), transparent 50%),
    linear-gradient(180deg, #181d30, #0d1019);
}

/* 科目バッジ：科目の色の斜めの札にアイコンと「科目・技」 */
.subject-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 3px 16px 3px 10px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--subject, var(--surface-3)), var(--subject-soft, var(--surface-2)));
  color: #fff;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 科目バッジと説明文（相性・倍率）を1行に並べる。狭いときは折り返す */
.answer-subject-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.subject-badge:empty {
  display: none;
}

/* タッグ戦：問題は1問ずつ見せ、上のタブで切り替える。各問題の枠は科目の色（上の .tag-question[data-subject]） */
.tag-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tag-tabs[hidden] {
  display: none;
}

.tag-tab {
  --subject: var(--surface-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px;
  border: 2px solid color-mix(in srgb, var(--subject) 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--subject) 12%, var(--surface-2));
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tag-tab[data-subject="english"] { --subject: #f5c518; }
.tag-tab[data-subject="math"] { --subject: #3d8bff; }
.tag-tab[data-subject="japanese"] { --subject: #ff4d6a; }
.tag-tab[data-subject="science"] { --subject: #a66bff; }
.tag-tab[data-subject="social"] { --subject: #2fd28a; }

.tag-tab-name {
  font-weight: var(--heavy);
  color: var(--text);
}

.tag-tab-state {
  font-size: 0.8rem;
}

/* 見ている問題のタブ：科目の色で塗る */
.tag-tab.is-active {
  border-color: var(--subject);
  background: color-mix(in srgb, var(--subject) 30%, var(--surface-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--subject) 45%, transparent);
}

.tag-tab.is-warning .tag-tab-state {
  color: var(--danger);
  font-weight: var(--heavy);
}

.tag-tab.is-settled:not(.is-active) {
  opacity: 0.65;
}

.tag-tab.is-partner .tag-tab-state {
  color: color-mix(in srgb, var(--mode-tag) 55%, #fff);
  font-weight: var(--heavy);
}

.tag-question[hidden] {
  display: none;
}

.tag-questions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tag-question {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 担当の札（科目バッジの右）。自分の問題は控えめ、相方の問題は紫で目立たせる */
.tag-role {
  margin: 0 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-3);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: var(--heavy);
}

.tag-question.is-partner-question .tag-role {
  border-color: transparent;
  background: linear-gradient(90deg, var(--mode-tag), var(--mode-tag-dark));
  color: #fff;
  box-shadow: 0 0 10px rgba(122, 63, 209, 0.55);
}

/* 自分の問題から相方の問題へ自動で移ったときの合図。問題の枠に一瞬重ねて消える（押す操作は通す） */
.tag-switch-cue {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: radial-gradient(ellipse at center, rgba(36, 16, 74, 0.92), rgba(36, 16, 74, 0.55) 70%, transparent);
  pointer-events: none;
  animation: tag-switch-cue 1.3s ease-out forwards;
}

.tag-switch-cue p {
  margin: 0;
  color: #fff;
  font-weight: var(--heavy);
  font-style: italic;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.tag-switch-cue-title {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

.tag-switch-cue-sub {
  font-size: 1.05rem;
  color: #e2d0ff;
}

@keyframes tag-switch-cue {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 狙い撃ちが当たったときの合図。狙い撃ちした人の絵を画面の中ほどに一瞬重ねて消える（押す操作は通す）。
   あなた＝左から金、相手＝右から赤 */
.special-cut-in {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, transparent 22%, rgba(58, 47, 18, 0.88) 38%, rgba(58, 47, 18, 0.88) 62%, transparent 78%);
  pointer-events: none;
  animation: special-cut-in 1.4s ease-out forwards;
}

.special-cut-in[hidden] {
  display: none;
}

.special-cut-in.is-opponent {
  background: linear-gradient(180deg, transparent 22%, rgba(61, 18, 22, 0.88) 38%, rgba(61, 18, 22, 0.88) 62%, transparent 78%);
}

.special-cut-in-image {
  width: min(192px, 48vw);
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
  animation: special-cut-in-slide 1.4s ease-out forwards;
}

.special-cut-in.is-opponent .special-cut-in-image {
  animation-name: special-cut-in-slide-opponent;
}

.special-cut-in-text {
  margin: 0;
  color: var(--gold-hi);
  font-size: 1.6rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.special-cut-in.is-opponent .special-cut-in-text {
  color: #ffd0d0;
}

@keyframes special-cut-in {
  0% {
    opacity: 0;
  }
  12%,
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes special-cut-in-slide {
  0% {
    transform: translateX(-40vw) scale(0.9);
  }
  18% {
    transform: translateX(0) scale(1.06);
  }
  28%,
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes special-cut-in-slide-opponent {
  0% {
    transform: translateX(40vw) scale(0.9);
  }
  18% {
    transform: translateX(0) scale(1.06);
  }
  28%,
  100% {
    transform: translateX(0) scale(1);
  }
}

.tag-question .question-text {
  min-height: 0;
}

/* 相方が解答して確定した問題：問題文の上に紫の帯を出し、枠も紫に光らせる */
.partner-answered {
  margin: 0;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--mode-tag), var(--mode-tag-dark));
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  color: #fff;
  font-weight: var(--heavy);
  font-style: italic;
  overflow-wrap: anywhere;
  animation: partner-answered-in 0.25s ease-out;
}

.partner-answered::before {
  content: "✔ ";
}

.tag-question.is-partner-answered {
  box-shadow: 0 0 0 2px var(--mode-tag), 0 0 16px rgba(122, 63, 209, 0.55);
}

@keyframes partner-answered-in {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 相方が解答して確定した選択肢：印を相方の色（紫）にする */
.answer-choice.is-partner::before {
  background: linear-gradient(180deg, #d9c2ff, var(--mode-tag) 50%, var(--mode-tag-dark));
  color: #fff;
}

/* 相手の解答状況。空のときも高さを確保して選択肢がずれないようにする */
.opponent-banner {
  min-height: 1.5em;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  font-style: italic;
  color: var(--challenge);
}

.question-text {
  --cut: 12px;
  --frame-w: 2px;

  min-height: 96px;
  padding: 18px 16px;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* 選択肢には A〜D の印（金の斜めの札）を付ける */
.answer-choices {
  display: grid;
  gap: 8px;
  counter-reset: choice;
}

.answer-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px 10px 10px;
  text-align: left;
  overflow-wrap: anywhere;
}

.answer-choice::before {
  content: counter(choice, upper-alpha);
  counter-increment: choice;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: var(--heavy);
  font-style: italic;
}

.answer-choice.is-selected::before {
  background: #1a1203;
  color: var(--gold-hi);
}

.answer-choice:disabled:not(.is-selected) {
  filter: grayscale(0.7) brightness(0.5);
}

.answer-choice.is-selected:disabled {
  filter: none;
  cursor: default;
}

/* 能力で消した選択肢：線で消して薄く */
.answer-choice.is-eliminated,
.answer-choice.is-eliminated:disabled {
  filter: grayscale(1) brightness(0.35);
  text-decoration: line-through;
}

/* 能力：カウンター満タンのときのボタン2つと、相手が使ったときのお知らせ */
.ability-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ability-note {
  min-height: 1.3em;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  color: var(--gold);
}

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

.ability-buttons[hidden] {
  display: none;
}

/* 能力のボタンの下の「使わなければ温存」（2列のボタンの下に1行） */
.ability-keep {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.ability-button {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.ability-button:disabled {
  filter: grayscale(0.8) brightness(0.55);
}

/* 解き直し：解答後は正解の選択肢を緑の縁で示す */
.answer-choice.is-answer,
.answer-choice.is-answer:disabled {
  --frame: linear-gradient(160deg, #c8ffd4, var(--safe) 40%, #145c27);
  --frame-w: 3px;

  filter: none;
}

/* 解き直し：間違えて選んだ選択肢は赤の縁で示す */
.answer-choice.is-wrong,
.answer-choice.is-wrong:disabled {
  --frame: linear-gradient(160deg, #ffc8c8, var(--danger) 40%, #6b1414);
  --frame-w: 3px;

  filter: none;
}

/* =========================================================================
   バトル：ターン結果
   ========================================================================= */
.turn-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-headline {
  font-size: 1.45rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 3px 0 #000;
}

.result-tone-good {
  color: var(--gold);
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(233, 185, 60, 0.55);
}

.result-tone-bad {
  color: var(--danger);
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(255, 60, 60, 0.5);
}

.result-tone-neutral {
  color: var(--text);
}

.result-players,
.result-effects {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.result-player {
  --cut: 7px;
  --fill: rgba(8, 10, 18, 0.9);

  padding: 8px 12px;
}

/* タッグ戦：問題ごとの枠。見出し＋正解の行の下に 自チーム｜相手 の2列。
   色は正誤（正解＝緑・不正解＝赤の ○ / ×）だけに絞り、チームは列の位置と小さな名前の色で見分ける */
.result-players.is-grouped {
  gap: 10px;
}

.result-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--steel-lo);
  background: rgba(255, 255, 255, 0.03);
}

.result-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.result-group-title {
  margin: 0;
  font-weight: var(--heavy);
  font-style: italic;
}

.result-group-correct {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--heavy);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* 左が自チーム・右が相手（tagResult.js の並び）。自分の解答に目が行くよう相手の列は狭く・控えめにする */
.result-cells {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--steel-lo);
  border-radius: 6px;
  background: rgba(8, 10, 18, 0.9);
}

.result-cell[data-status="correct"] {
  border-color: var(--safe);
  background: linear-gradient(180deg, var(--safe-soft), rgba(8, 10, 18, 0.9));
}

.result-cell-name {
  margin: 0;
  font-size: 0.8rem;
  font-weight: var(--heavy);
  overflow-wrap: anywhere;
}

.result-cell[data-side="own"] .result-cell-name {
  color: var(--team-own);
}

.result-cell[data-side="opponent"] .result-cell-name {
  color: var(--team-opponent);
}

.result-cell-verdict {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-weight: var(--heavy);
}

.result-cell-mark {
  font-size: 1.8rem;
  line-height: 1;
}

.result-cell-word {
  font-size: 0.95rem;
}

.result-cell[data-status="correct"] .result-cell-verdict {
  color: var(--safe);
}

.result-cell[data-status="wrong"] .result-cell-verdict,
.result-cell[data-status="timeout"] .result-cell-verdict {
  color: var(--danger);
}

.result-cell-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-height: 1.2em;
  margin: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.result-cell-choice {
  margin: 2px 0 0;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.result-cell:not([data-status="correct"]) .result-cell-choice {
  color: var(--text-muted);
}

.result-cell[data-side="opponent"] {
  padding: 6px 8px;
  opacity: 0.8;
}

.result-cell[data-side="opponent"] .result-cell-name,
.result-cell[data-side="opponent"] .result-cell-meta {
  font-size: 0.7rem;
}

.result-cell[data-side="opponent"] .result-cell-mark {
  font-size: 1.2rem;
}

.result-cell[data-side="opponent"] .result-cell-word {
  font-size: 0.8rem;
}

.result-cell[data-side="opponent"] .result-cell-choice {
  font-size: 0.75rem;
}

.result-player-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.result-name {
  font-weight: var(--heavy);
  font-style: italic;
}

.result-chip {
  padding: 0 10px;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-size: 0.8rem;
  font-weight: var(--heavy);
  font-style: italic;
  color: #fff;
}

.result-chip-correct {
  background: linear-gradient(180deg, #51cf66, #1f7a33);
}

.result-chip-wrong,
.result-chip-timeout {
  background: linear-gradient(180deg, #ff6b6b, #a51111);
}

.result-time {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* 速度ボーナス */
.speed-badge {
  padding: 0 10px;
  background: linear-gradient(180deg, #ffd27a, var(--challenge));
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-size: 0.75rem;
  font-weight: var(--heavy);
  font-style: italic;
  color: #1a0a00;
}

.result-choice {
  margin: 2px 0 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.result-correct {
  padding: 8px 12px;
  border-left: 4px solid var(--safe);
  background: linear-gradient(90deg, var(--safe-soft), transparent);
  color: var(--safe);
  font-weight: var(--heavy);
  overflow-wrap: anywhere;
}

/* 投稿された問題の作成者（UQ-7）。問題文・正解の下に小さく */
.question-credit {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
  overflow-wrap: anywhere;
}

/* 提携の問題（PT-3）の「提携」の印。色だけで分からないよう文字で。問題文の上・結果の正解の下・試合後の一覧の問題文の上 */
.partner-mark {
  align-self: flex-start;
  width: fit-content;
  margin: 4px 0;
  padding: 1px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: var(--heavy);
  letter-spacing: 0.1em;
}

.partner-mark[hidden] {
  display: none;
}

/* みんなの正答率（QS-5）。正解の下に控えめに。タッグは問題ごとの枠の見出しの下の行 */
.result-crowd {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.result-group-head .result-crowd {
  flex-basis: 100%;
  margin: 0;
}

.result-effects li {
  padding-left: 1em;
  text-indent: -1em;
  overflow-wrap: anywhere;
}

.result-effects li::before {
  content: "▶";
  margin-right: 0.3em;
  color: var(--gold);
  font-size: 0.7em;
}

.turn-result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* =========================================================================
   試合の結果
   ========================================================================= */
.result-banner {
  --cut: 16px;
  --frame: linear-gradient(150deg, var(--steel-hi), var(--steel-lo) 50%, var(--steel-hi));
  --fill:
    linear-gradient(180deg, #1f2538, #0b0d16);
  --frame-w: 2.5px;

  padding: 30px 16px;
  text-align: center;
}

/* 勝ち：金の光 */
.result-banner.is-good {
  --frame: linear-gradient(150deg, #ffffff, var(--gold-hi) 15%, var(--gold) 40%, var(--gold-lo) 75%, var(--gold));
  --fill:
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 220, 120, 0.13) 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 50% 45%, rgba(233, 185, 60, 0.5), transparent 60%),
    linear-gradient(180deg, #3a2a08, #0d0a04);
}

/* 負け：暗い赤 */
.result-banner.is-bad {
  --frame: linear-gradient(150deg, #ff8a8a, #8a0d14 40%, #2a0306);
  --fill:
    radial-gradient(circle at 50% 45%, rgba(200, 20, 30, 0.35), transparent 60%),
    linear-gradient(180deg, #2a0609, #080203);
}

/* 顔の並び：自分（左）と BOT 戦の相手（右）。どちらも出ないときは場所を取らない */
.result-faces {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: -14px 0 8px;
}

.result-faces:not(:has(.result-face:not([hidden]))) {
  display: none;
}

/* 自分の顔：勝ちは金・負けは赤の縁 */
.result-face {
  display: block;
  width: 96px;
  height: 96px;
  border: 2px solid var(--steel-hi);
  object-fit: cover;
  animation: result-slam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.result-face[hidden] {
  display: none;
}

.result-banner.is-good .result-face {
  border-color: var(--gold);
}

.result-banner.is-bad .result-face {
  border-color: #c92a2a;
}

/* 相手の顔：縁は勝敗で変えず、体力欄と同じく左右反転して自分と向き合わせる */
.result-banner .result-face.is-opponent {
  border-color: var(--steel-hi);
  scale: -1 1;
}

.battle-result-headline {
  font-size: 2.8rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-shadow: 0 4px 0 #000;
  animation: result-slam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.battle-result-headline.result-tone-good {
  background: linear-gradient(180deg, #ffffff 5%, var(--gold-hi) 30%, var(--gold) 60%, #a8640a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px rgba(233, 185, 60, 0.6));
}

.battle-result-headline.result-tone-bad {
  background: linear-gradient(180deg, #ffd6d6 5%, #ff6b6b 35%, #a51111 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 0 #000);
}

@keyframes result-slam {
  0% {
    opacity: 0;
    transform: scale(2.4);
  }
  60% {
    opacity: 1;
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

.result-reason {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--text-muted);
}

.result-unlock {
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--gold-hi);
}

/* 「できるようになった！」の金の札（GU-3）。決着の画面・道場の結果・復習のまとめで共通 */
.growth-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.growth-note {
  padding: 4px 12px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--gold-hi);
  font-size: 0.9rem;
  font-weight: var(--heavy);
}

.growth-note-rest {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.result-hp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.result-hp li {
  --cut: 7px;

  padding: 8px;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  font-style: italic;
  text-align: center;
}

/* タッグ戦のチーム内の順位（T-14） */
.result-tag-ranking {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.result-tag-ranking li {
  display: grid;
  grid-template-columns: 3em 1fr auto;
  align-items: baseline;
  gap: 8px;
}

.result-tag-rank {
  font-weight: var(--heavy);
  color: var(--text-muted);
}

.result-tag-ranking li.is-top .result-tag-rank {
  color: var(--accent);
}

.result-tag-name {
  overflow: hidden;
  font-weight: var(--heavy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-tag-rate {
  font-size: 0.9rem;
}

.result-stats {
  margin: 4px 0 0;
  font-size: 1.1rem;
  font-weight: var(--heavy);
  font-style: italic;
  font-variant-numeric: tabular-nums;
}

.result-streak {
  margin: 4px 0 0;
  font-weight: var(--heavy);
  font-variant-numeric: tabular-nums;
}

.result-online-status {
  text-align: center;
  font-weight: bold;
}

/* 相手（タッグはほかの人）が再戦を希望していて、自分はまだ選んでいない：見落とさないよう大きく光らせる */
.result-online-status.is-requested {
  padding: 12px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--gold);
  font-size: 1.15rem;
  animation: rematch-requested-pulse 1.2s ease-in-out infinite;
}

@keyframes rematch-requested-pulse {
  50% {
    box-shadow: 0 0 14px var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-online-status.is-requested {
    animation: none;
  }
}

/* =========================================================================
   復習
   ========================================================================= */
.review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-filter {
  --cut: 6px;

  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.9rem;
}

.review-filter .subject-icon {
  width: 20px;
  height: 20px;
}

/* おまかせ復習（RV-5）：復習の画面の一番上。学長の顔とメッセージ（成績表の .report-next と同じ形） */
.review-random {
  margin-bottom: 12px; /* 下のタブ（誤答リスト / お気に入り）と離す */
}

/* 続けて解く（○問解く / すべて解く）。対戦の赤と分け、2つも別の色にする */
.review-session-start {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-session-start .button {
  flex: 1 1 auto;
}

.review-session-start .button:first-child {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 45%, transparent 46%),
    linear-gradient(180deg, #4d8dff, var(--mode-online) 55%, var(--mode-online-dark));
}

.review-session-start .button:last-child {
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 45%, transparent 46%),
    linear-gradient(180deg, #3fc276, var(--mode-dojo) 55%, var(--mode-dojo-dark));
}

/* 続けて解いているときの「3 / 7」 */
.review-session-progress {
  margin: 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text);
}

/* 復習のタブ（誤答リスト / お気に入り。FV-1） */
.review-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.review-tab {
  min-height: 44px;
  font-size: 0.95rem;
}

#review-panel-wrong,
#review-panel-favorite {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#review-panel-wrong[hidden],
#review-panel-favorite[hidden] {
  display: none;
}

/* お気に入りの ☆ / ★（解答後の画面・お気に入りの一覧の行） */
.favorite-toggle,
.review-add-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: flex-start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--steel-hi);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.favorite-toggle.is-on {
  border-color: var(--gold);
  background: var(--accent-soft);
  color: var(--gold-hi);
}

.favorite-toggle[hidden],
.review-add-toggle[hidden] {
  display: none;
}

.favorite-toggle:focus-visible,
.review-add-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* お気に入りの一覧の行：問題（押すと解き直し）と右の ★ */
.favorite-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-item .review-item {
  flex: 1;
  min-width: 0;
}

.favorite-item-toggle {
  align-self: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.2rem;
}

/* 科目の見出し（科目順で「すべて」のとき）・日の見出し（日付順） */
.review-group-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--steel-hi);
  font-size: 1rem;
  font-weight: var(--heavy);
  color: var(--gold-hi);
}

.review-group-heading:first-child {
  margin-top: 0;
}

/* 日付順の行のまとまり（単元の折りたたみの外に直接並ぶ） */
.review-units > .review-list {
  margin: 0;
}

.review-group-heading .subject-icon {
  width: 22px;
  height: 22px;
}

/* 単元ごとの見出し（折りたたみ） */
.review-units {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-unit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--steel-hi);
  background: linear-gradient(180deg, #1a2034, #0e111c);
  cursor: pointer;
  list-style: none;
}

.review-unit-head::-webkit-details-marker {
  display: none;
}

.review-unit-head::before {
  content: "▶";
  font-size: 0.7rem;
  color: var(--gold);
  transition: transform 0.15s ease-out;
}

.review-unit[open] > .review-unit-head::before {
  transform: rotate(90deg);
}

.review-unit-head:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.review-unit-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--heavy);
  overflow-wrap: anywhere;
}

.review-unit-stars {
  flex: none;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.review-unit-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px 12px;
}

.review-unit-practice {
  align-self: flex-start;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.review-item {
  --cut: 8px;

  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.review-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--gold);
}

/* 出どころ（対戦・道場）の小さなタグ */
.review-tag {
  padding: 0 6px;
  border: 1px solid var(--steel-hi);
  font-size: 0.7rem;
  color: var(--text);
}

/* 右：間違えた回数「×2」と最後に間違えた日「3日前」 */
.review-item-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.review-item-count {
  font-size: 1rem;
  font-weight: var(--heavy);
  color: var(--gold);
}

.review-item-date {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* 問題文は2行まで */
.review-item-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.review-empty {
  text-align: center;
}

.review-empty:empty {
  display: none;
}

.review-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.review-result .result-headline {
  text-align: left;
}

/* 「続けて解く」のまとめの学長の顔 */
.review-summary-face {
  align-self: center;
}

/* 道場の解答後：見出しと右端の「次の問題へ」 */
.dojo-feedback-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.dojo-feedback-head .button {
  flex: none;
}

.review-explanation {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* =========================================================================
   ランキング（対戦の勝率 / 道場の★）
   ========================================================================= */
.ranking-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ranking-tab {
  min-height: 44px;
  font-size: 0.95rem;
}

.ranking-me {
  text-align: left;
}

.ranking-me-headline {
  margin: 8px 0 0;
  font-size: 1.3rem;
  font-weight: var(--heavy);
  font-style: italic;
  color: var(--accent);
}

.ranking-me .button {
  margin-top: 4px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-list:empty {
  display: none;
}

.ranking-row {
  --cut: 8px;

  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
}

/* 自分の行は金の縁 */
.ranking-row.is-me {
  --frame: linear-gradient(150deg, var(--gold-hi), var(--gold) 30%, var(--gold-lo));
  --fill: linear-gradient(180deg, var(--accent-soft), #0e111c);
}

.ranking-rank {
  flex: 0 0 3.2em;
  font-weight: var(--heavy);
  font-style: italic;
  color: var(--gold);
}

/* 顔（得意科目 × タイプ）。見た目のない人は空の枠 */
.ranking-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid #05070d;
  background: #0a0d17;
  box-shadow: 0 0 0 1px var(--gold);
}

.ranking-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイプが分からない人は得意科目のアイコンで代用 */
.ranking-icon img.is-icon {
  padding: 4px;
  object-fit: contain;
}

.ranking-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ranking-name {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.ranking-record {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ranking-rate {
  font-size: 1.1rem;
  font-weight: var(--heavy);
  font-style: italic;
  color: var(--accent);
}

/* =========================================================================
   ルール説明・利用規約・プライバシーポリシー・学校で使う方へ（#screen-rules・#screen-terms・#screen-privacy・#screen-school-guide）とチュートリアル
   ========================================================================= */
.rules .panel {
  text-align: left;
}

.rules-section h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 2px 0 #000;
}

.rules-section h3 {
  margin: 16px 0 8px;
  font-size: 1rem;
}

.rules-section p,
.rules-section ul,
.rules-section ol {
  margin: 0 0 8px;
}

.rules-section > :last-child {
  margin-bottom: 0;
}

.rules-section ul,
.rules-section ol {
  padding-left: 1.2em;
}

.rules-section li::marker {
  color: var(--gold);
}

.rules-section .hint {
  margin: 8px 0 0;
}

.rules-formula {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: center;
  font-weight: bold;
}

.rules-damage td {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.rules-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.rules-toc a {
  color: var(--gold);
}

/* =========================================================================
   PC で見たとき：スマホ幅の画面を真ん中に置き、外側を別の背景にして差をつける
   ========================================================================= */
.pc-backdrop {
  display: none;
}

@media (min-width: 768px) {
  .subject-radar {
    max-width: 340px;
  }

  :root {
    --column: 480px;
    --pc-red: #c4161f;
    --pc-blue: #1d5fd8;
  }

  /* 外側：左が青（あなた）、右が赤（相手）の「対戦」の地に網点。体力欄の色分け（左＝青）に合わせる */
  html {
    background:
      radial-gradient(circle, rgba(0, 0, 0, 0.18) 1.2px, transparent 1.6px) 0 0 / 12px 12px,
      linear-gradient(105deg, var(--pc-blue) 0 50%, var(--pc-red) 50% 100%);
    background-attachment: fixed;
  }

  /* 画面の背景（アリーナ）はスマホ幅の帯だけに敷き、金の縁と影で浮かせる */
  body::before {
    left: calc(50% - var(--column) / 2);
    right: auto;
    width: var(--column);
    border-left: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    box-shadow: 0 0 0 6px rgba(7, 8, 13, 0.85), 0 0 60px rgba(0, 0, 0, 0.6);
  }

  /* バトル画面のステージの絵も帯の中（金の縁の内側）だけに */
  #screen-battle.is-active::before {
    left: calc(50% - var(--column) / 2 + 3px);
    right: auto;
    width: calc(var(--column) - 6px);
  }

  /* 設定画面も全面ではなく帯の中に重ねる */
  .settings-screen {
    left: calc(50% - var(--column) / 2);
    right: auto;
    width: var(--column);
  }

  .pc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
  }

  .pc-side {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - var(--column) / 2 - 12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
  }

  .pc-side-left {
    left: 0;
  }

  .pc-side-right {
    right: 0;
  }

  /* 立ち絵は横幅 1024px 以上だけ（下）。それより狭いと余白が細く、絵が細切れになる */
  .pc-stand {
    display: none;
  }
}

/* 横幅 1024px 以上：外側の地の下にステージの絵を敷き、左右の余白にキャラクターを向かい合わせて立たせる（IMAGES.md A-3）。
   画像はこの中でだけ指定するので、狭い画面では読み込まれない。読み込めなくても上の地がそのまま残る */
@media (min-width: 1024px) {
  :root {
    --pc-blue-tint: rgba(29, 95, 216, 0.5);
    --pc-red-tint: rgba(196, 22, 31, 0.5);
    --pc-stand-height: min(78vh, 720px, (50vw - var(--column) / 2 - 12px) * 2);
  }

  /* 2色の地は半透明にして絵を染める役に。ゲーム画面の帯のすぐ外側は暗くして、金の縁を浮かせる */
  html {
    background:
      radial-gradient(circle, rgba(0, 0, 0, 0.18) 1.2px, transparent 1.6px) 0 0 / 12px 12px,
      linear-gradient(90deg,
        transparent calc(50% - var(--column) / 2 - 140px),
        rgba(7, 8, 13, 0.6) calc(50% - var(--column) / 2),
        rgba(7, 8, 13, 0.6) calc(50% + var(--column) / 2),
        transparent calc(50% + var(--column) / 2 + 140px)),
      linear-gradient(105deg, var(--pc-blue-tint) 0 50%, var(--pc-red-tint) 50% 100%),
      url("assets/images/pc-stage.webp") center / cover no-repeat,
      linear-gradient(105deg, var(--pc-blue) 0 50%, var(--pc-red) 50% 100%);
    background-attachment: fixed;
  }

  .pc-side {
    padding: 0;
  }

  /* 足元を余白の下端にそろえ、ゲーム画面の側（内側）に寄せる。余白より絵が広いときは外側が切れる。
     右は左右反転して内側を向かせる（反転後も「右下寄せ」が見た目では内側になる） */
  .pc-stand {
    --stand-image: none;
    --stand-glow: transparent;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pc-stand-height);
    background:
      var(--stand-image) right bottom / auto 100% no-repeat,
      radial-gradient(ellipse 55% 45% at 65% 55%, color-mix(in srgb, var(--stand-glow) 55%, transparent), transparent 70%);
  }

  .pc-side-right .pc-stand {
    scale: -1 1;
  }

  /* 下端に向けて暗くし、足が画面の端で切れても不自然に見えないようにする */
  .pc-stand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgba(7, 8, 13, 0.75));
  }

  /* 絵の後ろの光：キャラクターの科目の色 */
  .pc-stand[data-subject="english"] { --stand-glow: #f5c518; }
  .pc-stand[data-subject="math"] { --stand-glow: #3d8bff; }
  .pc-stand[data-subject="japanese"] { --stand-glow: #ff4d6a; }
  .pc-stand[data-subject="science"] { --stand-glow: #a66bff; }
  .pc-stand[data-subject="social"] { --stand-glow: #2fd28a; }
}

/* =========================================================================
   動きを減らす設定
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .start-cta,
  .start-button,
  .start-button::before,
  .online-searching span {
    animation: none;
  }

  .review-unit-head::before,
  .hp-fill.is-changing,
  .hp-lag.is-changing,
  .hp-lag.is-heal + .hp-fill.is-changing {
    transition: none;
  }

  .hp-fill.is-low,
  .charge-pips.is-full .charge-pip,
  .fighter.is-low .fighter-hp,
  .fighter.is-hit,
  .fighter.is-hit .hp-bar,
  .fighter.is-hit .fighter-portrait {
    animation: none;
  }

  .hp-delta {
    animation-name: hp-delta-fade;
  }

  .countdown-number.is-pop,
  .countdown-icon.is-pop,
  .opponent-card,
  .partner-answered,
  .battle-result-headline,
  .result-face {
    animation: none;
  }

  /* 合図は動かさずに出して消す（animationend で取り除くため、アニメーションは残す） */
  .tag-switch-cue,
  .special-cut-in {
    animation-name: hp-delta-fade;
  }

  .special-cut-in-image {
    animation: none;
  }

  .button,
  .mode-button,
  .slot-button,
  .choice,
  .list-button,
  .home-hero,
  .home-daily,
  .review-item {
    transition: none;
  }
}

/* =========================================================================
   道場（教科・道場・段の一覧、段の出題と結果。dojoScreen.js）
   ========================================================================= */
.dojo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dojo-item-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 一問一答の範囲を選ぶ画面（testRangeScreen.js） */
#screen-test-range .choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 単元は名前が長いので1列・左寄せ */
.choices.test-range-units {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

#screen-test-range .test-range-units .choice {
  justify-content: flex-start;
  padding: 8px 14px;
  text-align: left;
}

/* 範囲を共有するリンク（先生向け。TT-3）。ふだんは閉じておく */
.test-range-share {
  margin-top: 20px;
}

.test-range-share > summary {
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

/* 下に固定した「練習する」の帯（TT-23）。押せない理由をボタンの上に小さく出す */
.test-range-bar {
  flex-direction: column;
  gap: 4px;
}

.test-range-bar-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* リンクで届いた範囲の案内 */
.test-range-from-link {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 4px solid var(--gold);
}

/* 一問一答（TT-18）：問題のカードを縦に並べる。長押ししている間だけ裏返る（.is-flipped）。
   表と裏は同じマスに重ね、カードの高さは長いほうに合わせる */
.flash-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.flash-card {
  perspective: 1200px;
  cursor: pointer;
  touch-action: pan-y; /* 縦のスクロールはそのまま。スクロールになったら pointercancel で表に戻す */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.flash-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.flash-card-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.flash-card.is-flipped .flash-card-inner {
  transform: rotateY(180deg);
}

.flash-card-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow-wrap: anywhere;
}

.flash-card-back {
  border-color: var(--safe);
  background: var(--safe-soft);
  transform: rotateY(180deg);
}

.flash-card-face p {
  margin: 0;
}

.flash-card-number {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: var(--heavy);
}

.flash-card-question {
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.6;
  white-space: pre-line;
}

.flash-card-choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  list-style: none;
}

.flash-card-choices li::before {
  content: attr(data-label);
  margin-right: 8px;
  color: var(--gold);
  font-weight: var(--heavy);
}

.flash-card-answer {
  color: var(--safe);
  font-size: 1.1rem;
  font-weight: var(--heavy);
}

.flash-card-explanation {
  line-height: 1.6;
  white-space: pre-line;
}

/* カードの下の「＋ 復習に入れる」・☆・報告（カードの外に置く） */
.flash-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* 「✓ 復習に入れた」（TT-22）。☆ の金色と見分けるため、誤答リスト側の色（挑戦の橙）にする */
.review-add-toggle.is-on {
  border-color: var(--challenge);
  background: var(--challenge-soft);
  color: var(--challenge);
}

@media (prefers-reduced-motion: reduce) {
  .flash-card-inner {
    transition: none;
  }
}

/* 解説の下の「この問題を報告」（QR-5。復習・道場） */
.report-slot {
  margin: 4px 0 0;
}


/* 準備中・未開放の行 */
.dojo-item:disabled {
  filter: grayscale(0.6) brightness(0.55);
  cursor: not-allowed;
}

.dojo-badge {
  flex-shrink: 0;
  padding: 2px 10px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
  color: var(--text-muted);
}

.dojo-badge-cleared {
  border-color: var(--safe);
  color: var(--safe);
}

.dojo-badge-master {
  border-color: var(--gold);
  color: var(--gold);
}

/* 修行の地図のメダルの札：取った枚数で替えた絵1枚（枠線なし）。まだ取っていなければ暗い灰色の絵（dojoMapScreen.js の dojoMapStarsBadge） */
.dojo-badge-nodes {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
}

.dojo-medal-icon {
  display: block;
  width: 32px;
  height: 32px;
}

/* 地図の上の行の免許状の絵（3:2。メダルの札と高さをそろえる） */
.dojo-license-icon {
  display: block;
  width: 48px;
  height: 32px;
}

.dojo-medal-icon.is-empty,
.dojo-license-icon.is-empty {
  filter: grayscale(1) brightness(0.45);
  opacity: 0.7;
}

.dojo-medal-icon[hidden],
.dojo-license-icon[hidden] {
  display: none;
}

/* 道場の獲得画面（メダル・免許状）：結果の画面を暗くぼかし、その上にカードを浮かび上がらせる（dojoMapScreen.js の openDojoAward） */
.dojo-award {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: dojo-award-fade 0.25s ease-out both;
}

.dojo-award[hidden],
.dojo-award-medals[hidden],
.dojo-award-certificate[hidden],
.dojo-award-medal[hidden],
.dojo-award-upgrade img[hidden],
.dojo-award-certificate-image[hidden] {
  display: none;
}

.dojo-award-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  margin: auto; /* 背が高いときは上から並べてスクロールできるように（justify-content: center だと上が切れる） */
  padding: 24px 20px 20px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 3px #05070d, 0 0 32px rgba(233, 185, 60, 0.35), 0 18px 40px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation: dojo-award-rise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.dojo-award-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: var(--heavy);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(233, 185, 60, 0.55);
}

.dojo-award-medals {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dojo-award-medal {
  width: 192px;
  height: 192px;
  animation: dojo-award-pop 0.5s ease-out 0.15s both; /* カードが浮かび上がってから弾ける */
}

/* 合格メダル → 満点メダル（dojoMapScreen.js の makeDojoAwardUpgrade）：
   合格メダルが弾けて出る → 星が回りながら上から降りて真ん中に取り付く → 光って満点メダルの絵に変わる */
.dojo-award-upgrade {
  position: relative;
  width: 192px;
  height: 192px;
  animation: dojo-award-pop 0.5s ease-out 0.15s both;
}

.dojo-award-upgrade-base,
.dojo-award-upgrade-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 満点メダルの絵の星の位置と大きさ（星の絵は透過の余白込みで メダルの幅の 46%、中心は 横50%・縦47%） */
.dojo-award-upgrade-star {
  position: absolute;
  top: 24%;
  left: 27%;
  width: 46%;
  height: 46%;
  animation: dojo-award-star-drop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) 0.8s both;
}

.dojo-award-upgrade-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 110, 0.7) 30%, rgba(255, 200, 60, 0) 65%);
  pointer-events: none;
  animation: dojo-award-star-flash 0.7s ease-out 1.45s both;
}

.dojo-award-upgrade-final {
  animation: dojo-award-star-reveal 0.5s ease-out 1.5s both;
}

@keyframes dojo-award-star-drop {
  from {
    transform: translateY(-160px) scale(2.4) rotate(-220deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateY(0) scale(0.9) rotate(0deg);
  }
  85% {
    transform: scale(1.12);
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes dojo-award-star-flash {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes dojo-award-star-reveal {
  from {
    transform: scale(1);
    filter: brightness(2);
    opacity: 0;
  }
  40% {
    transform: scale(1.08);
    opacity: 1;
  }
  to {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

/* 免許状：絵（3:2）の巻物の白い所に教科・学年と「免許状」を重ねる。絵がなくても枠と文字は出る */
.dojo-award-certificate {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--gold);
  background-color: var(--surface);
  animation: dojo-award-pop 0.5s ease-out 0.15s both;
}

.dojo-award-certificate:has(.dojo-award-certificate-image:not([hidden])) {
  border-color: transparent;
  background-color: transparent;
}

.dojo-award-certificate-image {
  display: block;
  width: 100%;
  height: 100%;
}

/* 巻物の白い所（絵の 横22〜78%・縦36〜70% あたり）の真ん中 */
.dojo-award-certificate-text {
  position: absolute;
  top: 38%;
  left: 24%;
  right: 24%;
  bottom: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  color: var(--text);
}

.dojo-award-certificate:has(.dojo-award-certificate-image:not([hidden])) .dojo-award-certificate-text {
  color: #3a2a0c;
}

.dojo-award-certificate-subject {
  font-size: 1rem;
  font-weight: bold;
}

.dojo-award-certificate-name {
  font-size: 1.5rem;
  font-weight: var(--heavy);
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* 字間のぶん右にずれるのを戻す */
}

.dojo-award-caption {
  margin: 0;
  font-weight: bold;
}

@keyframes dojo-award-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.06);
    opacity: 1;
  }
  to {
    transform: scale(1);
  }
}

@keyframes dojo-award-fade {
  from {
    opacity: 0;
  }
}

/* 下から少し浮き上がって出てくる */
@keyframes dojo-award-rise {
  from {
    transform: translateY(40px) scale(0.92);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dojo-award,
  .dojo-award-body,
  .dojo-award-medal,
  .dojo-award-upgrade,
  .dojo-award-upgrade-star,
  .dojo-award-upgrade-final,
  .dojo-award-certificate {
    animation: none;
  }

  .dojo-award-upgrade-flash {
    display: none;
  }
}

/* 修行の地図（dojoMapScreen.js）：学年の師範の行・範囲外の単元 */
.dojo-map-master {
  border-left: 4px solid var(--gold);
}

.dojo-map-master .list-button-label {
  flex: 1;
}

/* 師範の顔（40×40）。挑めない師範は灰色 */
/* 挑めてまだ勝っていない師範：金の縁と暖色の中身・金地の「挑む」札 */
.dojo-map-master.is-ready:not(:focus-visible) {
  --frame: linear-gradient(160deg, var(--gold-hi), var(--gold) 40%, var(--gold-lo));
  --fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%),
    linear-gradient(180deg, #3a2f12, #161206);
  --frame-w: 2px;
}

.dojo-badge-ready {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-accent);
}

/* 免許状を取った師範：押せない行（道場破りで取って、まだ正規に挑めない）でも暗くせず、金の縁で「取得済み」を見せる */
.dojo-map-master.is-licensed:disabled {
  filter: none;
  cursor: default;
}

.dojo-map-master.is-licensed:not(:focus-visible) {
  --frame: linear-gradient(160deg, var(--gold-hi), var(--gold) 40%, var(--gold-lo));
  --frame-w: 2px;
}

/* 免許状の札：絵の下に「取得済み」 */
.dojo-badge-license {
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--gold);
}

.dojo-map-master-face {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid #05070d;
  box-shadow: 0 0 0 1px var(--gold);
  object-fit: cover;
}

.dojo-map-master-face.is-locked {
  filter: grayscale(1);
}

.dojo-map-master-face[hidden] {
  display: none;
}

.dojo-item.is-out-of-range .list-button-label {
  opacity: 0.7;
}

/* 地図の上の行：その教科の合格メダル・満点メダル・免許状の数（.dojo-rewards） */
.dojo-map-summary {
  margin: 0 0 8px;
}

/* 地図の学年のタブ（DR-15）：「1年」と「合格 n/m」の2段。免許状を取った学年は名前の横に小さな免許状の絵 */
.dojo-map-grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dojo-map-grade-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
}

.dojo-map-grade-tab-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: bold;
}

.dojo-map-grade-tab .dojo-license-icon {
  width: 24px;
  height: 16px;
}

.dojo-map-grade-tab-progress {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dojo-map-grade-tab.is-selected .dojo-map-grade-tab-progress {
  color: inherit;
}

/* 教科の一覧の行（DM-1）：上の段に教科の名前と「34単元」、下の段に合格メダル・満点メダル・免許状の3列 */
.dojo-subject-item {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.dojo-subject-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dojo-subject-units {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-muted);
}

/* 合格メダル・満点メダル・免許状の3列（教科の一覧の行・地図の上の行） */
.dojo-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dojo-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dojo-reward .dojo-medal-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.dojo-reward .dojo-license-icon {
  flex-shrink: 0;
  width: 42px;
  height: 28px;
}

/* 絵の下に名前 */
.dojo-reward-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  line-height: 1.2;
}

.dojo-reward-name {
  font-size: 0.7rem;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--text-muted);
}

.dojo-reward-count {
  min-width: 0;
  font-size: 1.3rem;
  font-weight: bold;
  font-style: normal;
  white-space: nowrap;
}

/* 授業のある単元（LS-3）：行（授業を受ける）と横の「テスト」の枠。挑める前の師範（LS-6）：行と横の「道場破り」 */
.dojo-map-lesson-unit,
.dojo-map-break {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem; /* 横の枠の幅をそろえる */
  gap: 6px;
}

.dojo-map-lesson-unit {
  grid-template-columns: minmax(0, 1fr) 10.5rem; /* テストの枠（3列）の幅。授業のない単元（標準だけ）も同じ幅 */
}

/* テストの枠：上に「テスト」、中に「基礎」「標準」「発展」を横に並べ、それぞれの上にメダル */
.dojo-map-tests {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border);
}

/* 地図の一番上の見出し「授業」「テスト」（単元の行と同じ2列） */
.dojo-map-columns > span {
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  color: var(--text-muted);
}

/* 枠の上の「テスト」は狭い画面だけ（広い画面は見出しで分かる） */
.dojo-map-tests-title {
  display: none;
  font-size: 0.7rem;
  font-weight: bold;
  text-align: center;
  color: var(--text-muted);
}

.dojo-map-tests-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
}

.dojo-map-test-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dojo-map-test-cell .dojo-medal-icon {
  width: 28px;
  height: 28px;
}

.dojo-map-test-button {
  width: 100%;
  padding-inline: 0;
  white-space: nowrap;
}

/* 狭い画面では行の下にテストの枠を回す */
@media (max-width: 359px) {
  .dojo-map-lesson-unit {
    grid-template-columns: minmax(0, 1fr);
  }

  .dojo-map-columns {
    display: none;
  }

  .dojo-map-tests-title {
    display: block;
  }
}

.dojo-map-break-button {
  align-self: stretch;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   要点カード（KP-3。keypointScreen.js）：道場の入口・図鑑・地図の行の下のボタン・結果の知らせ・札
--------------------------------------------------------------------------- */

.dojo-keypoints-open {
  margin-top: 12px;
}

/* 地図の授業のある単元の行の下（授業とテストの2列にまたがる） */
.dojo-map-keypoint-button {
  grid-column: 1 / -1;
}

/* 持っていない札は伏せる（暗くして条件だけ読ませる） */
.keypoint-row-hidden .list-button-label {
  color: var(--text-muted);
}

#keypoint-book-units {
  margin-top: 12px;
}

.keypoint-card {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 16px;
  color: var(--text);
}

.keypoint-card::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.keypoint-card-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 上の行：左に教科・学年と単元名、右の隅に師範の顔と名前 */
.keypoint-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold-lo);
}

.keypoint-card-heading {
  min-width: 0;
}

.keypoint-card-title {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.keypoint-card-master {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  max-width: 5.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.keypoint-card-master-face {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.keypoint-card-master-face[hidden] {
  display: none;
}

.keypoint-card-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.25em;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.keypoint-card-lines li::marker {
  color: var(--gold);
}

.keypoint-card-example {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.keypoint-card-example[hidden] {
  display: none;
}

.keypoint-card-example-label {
  flex-shrink: 0;
  padding: 0 6px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: bold;
}

.keypoint-card-example-text {
  margin: 0;
  overflow-wrap: anywhere;
}

.keypoint-card-figure {
  align-self: center;
}

/* =========================================================================
   師範の授業（lessonScreen.js・LS-3）：レベルの切り替え・師範の立ち絵・メッセージウィンドウ
   ========================================================================= */
.lesson-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.lesson-level {
  padding: 8px 4px;
  font-size: 0.9rem;
}

.lesson-level.is-locked {
  opacity: 0.55;
}

.lesson-level-note {
  margin: 6px 0 0;
  font-size: 0.8rem;
}

.lesson-levels-wrap {
  position: relative;
}

/* 鍵の段の開く条件（押したときだけ数秒。立ち絵の上に重ねて、下の並びを動かさない） */
.lesson-level-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20, 24, 36, 0.92);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.lesson-stage {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.lesson-master {
  width: 120px;
  height: 144px;
  object-fit: contain;
}

.lesson-master[hidden],
.lesson-face[hidden] {
  display: none;
}

/* 授業の図（FG-1）：図のある1枚のあいだは立ち絵の代わりに出す。色は SVG の class で付ける（lessonFigure.js） */
.lesson-stage.has-figure .lesson-master {
  display: none;
}

.lesson-figure {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.lesson-figure[hidden] {
  display: none;
}

.lesson-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

.lesson-figure .fig-line,
.lesson-figure .fig-muted,
.lesson-figure .fig-accent {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-figure .fig-line {
  stroke: var(--text);
}

.lesson-figure .fig-muted {
  stroke: var(--text-muted);
  stroke-width: 1.5;
}

.lesson-figure .fig-accent {
  stroke: var(--gold);
  stroke-width: 2.5;
}

.lesson-figure .fig-fill {
  fill: var(--accent-soft);
  stroke: none;
}

.lesson-figure .fig-point {
  fill: var(--gold);
}

.lesson-figure text {
  font-family: inherit;
  font-size: 13px;
  text-anchor: middle;
}

.lesson-figure .fig-text {
  fill: var(--text);
  font-weight: bold;
}

.lesson-figure .fig-text-muted {
  fill: var(--text-muted);
}

.lesson-figure .fig-text-accent {
  fill: var(--gold);
  font-size: 15px;
  font-weight: bold;
}

/* ゲームのメッセージウィンドウ。どこをタップしても進む */
.lesson-window {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  padding: 14px 16px 12px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 3px #05070d, 0 6px 18px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.lesson-window.is-waiting {
  cursor: default;
}

.lesson-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gold);
  font-weight: var(--heavy);
}

.lesson-face {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold);
  object-fit: cover;
}

.lesson-text {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.lesson-text.is-quiz-result {
  color: var(--challenge);
}

.lesson-text.is-quiz-result.is-correct {
  color: var(--safe);
}

.lesson-next {
  align-self: flex-end;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  animation: lesson-next-bob 1s ease-in-out infinite;
}

.lesson-next[hidden] {
  display: none;
}

@keyframes lesson-next-bob {
  50% { transform: translateY(3px); }
}

.lesson-progress {
  margin: 8px 0;
  text-align: center;
}

/* 道場ランキングの行の右：満点メダル・合格メダルの絵と数（main.js の makeRankingMedals） */
.ranking-medals {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ranking-medals[hidden] {
  display: none;
}

.ranking-medal-icon {
  display: block;
  width: 22px;
  height: 22px;
}

/* 満点メダルの数と合格メダルの絵の間をあける */
.ranking-medals > span + .ranking-medal-icon {
  margin-left: 6px;
}

/* 画面には出さず、読み上げだけに使う */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.dojo-progress {
  margin: 0;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.dojo-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.dojo-result-score {
  margin: 0;
  font-weight: bold;
}

/* 師範戦の結果：師範の顔（勝ち負けで表情が替わる）とひとこと */
.dojo-result-master {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.dojo-result-master[hidden],
.dojo-result-master-face[hidden] {
  display: none;
}

.dojo-result-master-face {
  flex: none;
  width: 96px;
  height: 96px;
  border: 2px solid var(--gold);
  object-fit: cover;
}

.dojo-result-master-line {
  margin: 0;
  font-weight: var(--heavy);
  color: var(--gold);
}

.dojo-result-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--heavy);
  color: var(--gold);
}

/* 今日の問題の結果：正解数を大きく・枠ごとの内わけ（名前・説明・数・棒）・小さめの補足 */
.dojo-result-big,
.dojo-result-hints {
  margin: 0;
}

.dojo-result-big[hidden],
.dojo-result-breakdown[hidden],
.dojo-result-hints[hidden] {
  display: none;
}

.dojo-result-big {
  font-weight: var(--heavy);
  line-height: 1.1;
}

.dojo-result-big-number {
  font-size: 3rem;
  color: var(--gold-hi);
  text-shadow: 0 3px 0 #000;
}

.dojo-result-big-total {
  font-size: 1.6rem;
  color: var(--text);
}

.dojo-result-big-unit {
  margin-left: 6px;
  font-size: 1rem;
  color: var(--text-muted);
}

.dojo-result-breakdown {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: left;
}

.dojo-result-breakdown-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: var(--heavy);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.dojo-result-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dojo-result-breakdown-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dojo-result-breakdown-label {
  font-size: 1.05rem;
  font-weight: var(--heavy);
}

.dojo-result-breakdown-value {
  flex: none;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.dojo-result-breakdown-value strong {
  font-size: 1.4rem;
  color: var(--text);
}

.dojo-result-breakdown-row.is-perfect .dojo-result-breakdown-value strong {
  color: var(--safe);
}

.dojo-result-breakdown-note {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dojo-result-breakdown-bar {
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}

.dojo-result-breakdown-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
}

.dojo-result-breakdown-row.is-perfect .dojo-result-breakdown-fill {
  background: var(--safe);
}

.dojo-result-hints {
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: left;
  color: var(--text-muted);
}

/* 師範戦で負けたときの単元の案内（LS-6） */
.dojo-result-guide {
  margin-top: 12px;
}

.dojo-result-guide-title {
  margin: 0 0 6px;
  font-weight: var(--heavy);
}

.dojo-result-guide-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 学習時間（LR-3・LR-7）：日ごと・週ごとの棒（値・棒・見出し・補足の縦並び）、今日の問題の連続日数 */
.learning-week-totals {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--gold-hi);
}

.learning-bars {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.learning-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.learning-bar-value {
  min-height: 1.2em;
  white-space: nowrap;
  font-size: 0.65rem;
  color: var(--text);
}

.learning-bar-track {
  display: flex;
  align-items: flex-end;
  width: 70%;
  height: 80px;
  background: var(--surface-2);
}

.learning-bar-fill {
  width: 100%;
  background: var(--mode-dojo);
}

.learning-bar.is-current .learning-bar-fill {
  background: var(--gold);
}

.learning-bar.is-current .learning-bar-label {
  font-weight: bold;
  color: var(--text);
}

.learning-bar-label,
.learning-bar-note {
  white-space: nowrap;
}

.learning-dojo {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.learning-dojo li {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--surface-2);
}

.learning-since {
  text-align: center;
}

/* 保護者のホーム（HM-7。parentHomeScreen.js）：子どもの切り替え・科目ごとの正答率の行・苦手な単元。棒・まとめの行は学習時間と同じ */
.parent-home-children {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.parent-home-child {
  padding: 6px 12px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.parent-home-child[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold-hi);
  font-weight: bold;
}

.parent-home-name {
  margin: 12px 0 0;
  font-size: 1.05rem;
  font-weight: bold;
}

.parent-home-subjects,
.parent-home-units {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.parent-home-subject {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) 8.5em;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

/* 開かない行なので、成績表の開く・閉じるの印は出さない */
.parent-home-subject .subject-stat-name::before {
  content: none;
}

.parent-home-units li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: var(--surface-2);
}

.parent-home-units li > span:last-child {
  flex: none;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 問題の報告（QR-3。questionReportDialog.js）：解説の近くに置く小さなボタンと、理由を選ぶ画面 */
.report-open-button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.report-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 16px;
  color: var(--text);
}

.report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* 確かめる小さな画面（confirmDialog.js。window.confirm の代わり） */
.confirm-dialog {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 16px;
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

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

.confirm-body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: pre-line;
}

/* 画面の説明（infoDialog.js）：見出しの右上の ⓘ と、押すと出る小さな画面 */
.info-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: bold;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
}

.info-button:active {
  transform: scale(0.94);
}

.info-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 16px;
  color: var(--text);
}

.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.info-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.info-body h4 {
  margin: 4px 0 0;
  color: var(--gold);
  font-size: 0.9375rem;
}

.info-body p {
  margin: 0;
  white-space: pre-line;
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-question {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.875rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.report-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
}

.report-reason:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.report-reason:has(input:disabled) {
  opacity: 0.6;
  cursor: default;
}

.report-reason-done {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.report-status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.875rem;
}

/* 結果画面の「間違えた問題を解き直す」（MR-1）：ボタンの下に短い注記 */
.match-retry .hint {
  margin: 8px 0 0;
}

/* 結果画面の「この試合の問題」（QR-4）：ふだんは閉じておく。問題ごとに問題文・正解・解説・報告ボタン */
.match-questions > summary {
  cursor: pointer;
}

.match-question-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.match-question {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.match-question p {
  margin: 0;
  overflow-wrap: anywhere;
}

.match-question-text {
  white-space: pre-line;
}

.match-question-answer {
  font-weight: bold;
}

.match-question .review-explanation {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* 今日の問題の結果の「解いた問題」：問題ごとの ○× */
.match-question .dojo-result-question-mark {
  font-size: 0.875rem;
  font-weight: bold;
}

.dojo-result-question-mark.is-correct {
  color: var(--safe);
}

.dojo-result-question-mark.is-wrong {
  color: var(--danger);
}

/* =========================================================================
   新しい形式（A・C・D・E）の解答欄（NF-10。formatAnswerView.js）
   ========================================================================= */
.format-answer {
  gap: 10px;
}

.format-howto {
  margin: 0;
}

/* 札には A〜D の代わりに印（A は ✓・C は押した順の番号・D は結んだ組の番号）。印がなければ空の札 */
.answer-choice.format-choice::before {
  content: attr(data-mark);
  font-style: normal;
}

/* A：多くの選択肢を2列に詰める（スマホで押しやすい高さは保つ） */
.format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.format-grid .answer-choice {
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px 8px 8px;
  font-size: 0.95rem;
}

.format-grid .answer-choice::before {
  width: 24px;
}

.format-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

/* D：左と右を2列に並べる */
.format-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.format-pair .answer-choice {
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px 8px 8px;
}

.format-pair-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* D で左を押して右を待っている間 */
.answer-choice.is-pending {
  outline: 2px dashed var(--gold);
  outline-offset: -4px;
}

/* 能力で固定した項目・組（押せないが、薄くはしない） */
.answer-choice.is-fixed:disabled {
  filter: none;
  cursor: default;
}

/* E：数の入力と単位 */
.format-near {
  display: flex;
  align-items: center;
  gap: 8px;
}

.format-near-unit {
  font-weight: bold;
}

.format-near-hint {
  color: var(--gold-hi);
}

.format-answer .hint {
  margin: 0;
}

/* =========================================================================
   B 交互に選べ の盤（NF-11。formatAnswerView.js の renderTurnBoard）
   ========================================================================= */
.turn-board-status {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--heavy);
  text-align: center;
}

/* 相手の番の間は押せないが、札は読めるよう薄くしすぎない */
.turn-board .answer-choice:disabled:not(.is-eliminated, .is-answer, .is-wrong) {
  filter: grayscale(0.3) brightness(0.8);
}

/* 相手が選んだ札の印は色を変える（自分の札は金） */
.turn-board .answer-choice.is-opponent-pick::before {
  background: linear-gradient(180deg, #d8d8e8, #9a9ab0 50%, #5c5c70);
}

/* タッグで相方が選んだ札の印は相方の色（紫。NF-15） */
.turn-board .answer-choice.is-partner-pick::before {
  background: linear-gradient(180deg, #d9c2ff, var(--mode-tag) 50%, var(--mode-tag-dark));
  color: #fff;
}

/* ハズレが選ばれた：赤の縁で揺らす */
.turn-board .answer-choice.is-miss {
  animation: fighter-hit 0.5s ease-out 2;
}

.turn-board .answer-choice.is-miss::before {
  background: linear-gradient(180deg, #ffc8c8, var(--danger) 50%, #6b1414);
  color: #fff;
}