/* ===== Base ===== */
:root {
  --bg: #0f1419;
  --bg-elevated: #1a222d;
  --bg-card: #1e2836;
  --border: #2d3a4d;
  --text: #e8eef6;
  --text-muted: #9aabbf;
  --accent: #5b9fd4;
  --accent-hover: #7bb3e0;
  --accent-soft: rgba(91, 159, 212, 0.15);
  --success: #6bcb8f;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --font: "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;
  --max-width: 960px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 20, 25, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.logo:hover {
  color: var(--text);
}

.logo-mark {
  color: var(--accent);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.nav-link {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
}

/* ===== Hero ===== */
.hero {
  padding: 4rem 0 3rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, var(--accent-soft), transparent),
    var(--bg);
}

.hero-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.3;
  font-weight: 700;
}

.hero-lead {
  margin: 0 0 1.75rem;
  max-width: 36em;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #0a1018;
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: #0a1018;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Sections ===== */
.section {
  padding: 3.5rem 0;
}

.section-alt {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.section-desc {
  margin: 0 0 2rem;
  color: var(--text-muted);
}

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.card p {
  margin: 0 0 1.25rem;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.card .btn {
  align-self: flex-start;
}

.card.is-coming-soon {
  opacity: 0.75;
}

.card.is-coming-soon:hover {
  border-color: var(--border);
  transform: none;
}

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.about-item h3 {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 1.05rem;
}

.about-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ===== Footer ===== */
.site-footer {
  padding: 2rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

.footer-note {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ===== Algorithm page (shared) ===== */
.algo-layout {
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0 3rem;
}

@media (min-width: 800px) {
  .algo-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

/* ===== Topic workspace: board + DS at a glance ===== */
.container-wide {
  width: min(100% - 1.5rem, 1280px);
}

/* ゲーム木デモ: コンテナを画面横幅ほぼ一杯まで広げる（木の視認性優先） */
main.container.container-wide.topic-main:has(.tree-viewport),
main.container.container-wide.topic-main:has(.mcts-tree-panel) {
  width: min(100% - 0.75rem, 100vw - 0.75rem);
  max-width: none;
}

.topic-body {
  min-height: 100vh;
}

.topic-main {
  padding-bottom: 2rem;
}

.page-header-compact {
  padding: 1rem 0 0.5rem;
}

.page-header-compact h1 {
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  margin: 0 0 0.35rem;
}

.page-header-lead {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.page-header-lead code {
  font-size: 0.88em;
}

.course-stage {
  margin: 1.5rem 0 2.25rem;
}

.course-stage-title {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
}

.course-stage-lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* 入門コースの確認問題（段ごとの4択。計画書 §10） */
.course-quiz {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.course-quiz-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}
.course-quiz-lead {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.course-quiz-item + .course-quiz-item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.course-quiz-q {
  margin: 0 0 0.5rem;
  font-weight: 600;
  line-height: 1.6;
}
.course-quiz-choices {
  display: grid;
  gap: 0.4rem;
}
.course-quiz-choice {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.course-quiz-choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.course-quiz-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.course-quiz-choice:disabled {
  cursor: default;
}
.course-quiz-choice[data-state="correct"] {
  border-color: var(--success);
  background: rgba(107, 203, 143, 0.15);
}
.course-quiz-choice[data-state="wrong"] {
  border-color: #e07a5f;
  background: rgba(224, 122, 95, 0.15);
}
.course-quiz-choice[data-state="other"] {
  opacity: 0.6;
}
.course-quiz-feedback {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--border);
  line-height: 1.6;
  font-size: 0.92rem;
}
.course-quiz-feedback[data-state="correct"] {
  border-left-color: var(--success);
}
.course-quiz-feedback[data-state="wrong"] {
  border-left-color: #e07a5f;
}
.course-quiz-retry {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.course-next {
  margin: 2rem 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.lesson-details {
  margin: 0.5rem 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.lesson-details > summary {
  cursor: pointer;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
}

.lesson-details > summary::-webkit-details-marker {
  display: none;
}

.lesson-details > summary::before {
  content: "▸ ";
  color: var(--accent);
}

.lesson-details[open] > summary::before {
  content: "▾ ";
}

.lesson-box-nested {
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.85rem 1.15rem 1rem;
}

.lesson-box-nested ul {
  margin: 0;
}

/* ===== コース内ナビ（入門コース P0-3） ===== */
.course-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.5rem;
  margin: 0.75rem 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  font-size: 0.85rem;
}

.course-nav-badge {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.course-nav-sep {
  color: var(--text-muted);
}

.course-nav-link {
  color: var(--text);
  text-decoration: none;
}

.course-nav-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.course-nav-link-disabled {
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .course-nav {
    font-size: 0.8rem;
  }
}

/* ===== 演習節（課題カード。入門コース P0-1） ===== */
.exercise-section .exercise-title {
  font-weight: 600;
  color: var(--text);
}

.exercise-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.exercise-line {
  margin: 0;
  font-size: 0.92rem;
}

.exercise-label {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.exercise-steps-intro {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}

.exercise-steps-single {
  margin: 0;
  font-size: 0.92rem;
}

.exercise-list {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.exercise-list li {
  line-height: 1.5;
}

.exercise-card code {
  font-size: 0.88em;
  color: var(--text);
}

.exercise-url {
  word-break: break-word;
}

.exercise-scope {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.exercise-details summary {
  font-size: 0.85rem;
}

/*
 * demo-workspace（アスペクト比レスポンシブ）
 *
 *  DOM:
 *    .demo-game-group  … 盤面 + 操作（ゲームグループ）
 *    .ds-section-workspace … データ構造
 *
 *  縦長:  [ゲームグループ] の下に [DS]
 *  横長:  [ゲームグループ] | [DS]   ← 操作はグループ内なので DS との間に挟まない
 */
.demo-workspace {
  --workspace-gap: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: var(--workspace-gap);
  margin: 0.5rem 0 1.5rem;
}

.demo-game-group {
  display: flex;
  flex-direction: column;
  gap: var(--workspace-gap);
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.demo-board,
.demo-controls,
.ds-section-workspace {
  min-width: 0;
}

/* グループ内の操作パネル: コンパクト・スクロールなし */
.demo-game-group .demo-controls {
  background: var(--bg-elevated);
  border-color: var(--border);
  padding: 0.55rem 0.65rem;
  overflow: visible;
  max-height: none;
}

.demo-game-group .demo-board .canvas-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.35rem;
}

.ds-section-workspace {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  max-height: none;
  overflow: visible;
  min-height: 0;
  /* 再生中に DS が増えてもページが追従スクロールしない */
  overflow-anchor: none;
}

.ds-section-workspace h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.section-lead-compact {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
}

/* 操作ツールバー: 1行目=操作/速度/式、2行目=コスト */
.controls-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.controls-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
  min-width: 0;
  overflow-x: visible;
}

.controls-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  flex: 0 1 auto;
  min-width: 0;
}

.controls-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 「操作」+ 再生ボタン群を1まとまりで横並び */
.controls-group .control-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.controls-group .control-row .btn,
.demo-controls .control-row .btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.controls-group-speed {
  flex: 1 1 auto;
  min-width: 5.5rem;
  max-width: 11rem;
}

.controls-group-speed input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 3.5rem;
  max-width: 9rem;
  margin: 0;
  vertical-align: middle;
}

.controls-group-info {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 12rem;
}

.controls-info {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}

/* 「コスト」行: ラベルとボタンを横並び（狭い幅では折り返し） */
.controls-group-paint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

.controls-group-paint .controls-label {
  flex: 0 0 auto;
}

.controls-group-paint .paint-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  grid-template-columns: none;
  width: auto;
  min-width: 0;
}

.controls-group-paint .paint-btn {
  flex: 0 0 auto;
  min-width: 1.85rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.demo-controls .status-log {
  margin-top: 0.45rem;
  min-height: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
}

.demo-controls .result-compare {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  max-height: 6.5rem;
  overflow: auto;
}

.demo-board .legend {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  gap: 0.35rem 0.65rem;
}

/* ========== 縦長 ========== */
@media (orientation: portrait) {
  .demo-workspace {
    flex-direction: column;
  }

  .demo-board .canvas-panel canvas {
    width: min(100%, 58vh);
    max-width: 100%;
    margin-inline: auto;
    display: block;
  }

  .ds-section-workspace .ds-panels {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .ds-section-workspace .ds-block {
    padding: 0.65rem 0.75rem;
  }
}

/* ========== 横長: ゲームグループ | データ構造 ========== */
@media (orientation: landscape) and (min-height: 400px) {
  .topic-main {
    padding-bottom: 1rem;
  }

  .page-header-compact {
    padding-top: 0.65rem;
  }

  .demo-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr);
    grid-template-rows: auto;
    align-items: start;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .demo-game-group {
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 3.25rem;
  }

  .demo-board {
    flex: 0 1 auto;
    min-height: 0;
  }

  .demo-controls {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  .ds-section-workspace {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .demo-board .canvas-panel canvas {
    width: auto;
    max-width: 100%;
    max-height: min(70vh, 32rem);
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
  }

  .ds-section-workspace .ds-panels {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .code-section {
    margin-top: 0.5rem;
  }
}

/* 横長 + 幅広め */
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 480px) {
  .demo-workspace {
    grid-template-columns: minmax(360px, 1.1fr) minmax(340px, 1fr);
    max-height: none;
  }

  .demo-board .canvas-panel canvas {
    max-height: min(75vh, 36rem);
  }

  .demo-controls {
    max-height: none;
    overflow: visible;
  }

  .ds-section-workspace {
    max-height: none;
    overflow: visible;
  }

  .ds-section-workspace .ds-panels {
    grid-template-columns: 1fr 1fr;
  }

  .ds-section-workspace .ds-panels > .ds-block:last-child {
    grid-column: 1 / -1;
  }
}

/* 横長・低高さ */
@media (orientation: landscape) and (max-height: 480px) {
  .demo-workspace {
    max-height: none;
    overflow: visible;
  }

  .demo-board .canvas-panel canvas {
    max-height: 50vh;
  }

  .demo-controls,
  .ds-section-workspace {
    max-height: none;
    overflow: visible;
  }
}

/* ほぼ正方形 */
@media (min-aspect-ratio: 5/6) and (max-aspect-ratio: 6/5) and (min-width: 720px) {
  .demo-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: none;
    overflow: visible;
  }

  .ds-section-workspace {
    max-height: none;
    overflow: visible;
  }
}

/* ===== Lesson / legend / paint (BFS etc.) ===== */
.lesson-box {
  margin: 1.25rem 0 0;
  padding: 1.15rem 1.25rem;
  background: var(--accent-soft);
  border: 1px solid rgba(91, 159, 212, 0.35);
  border-radius: var(--radius);
}

.lesson-box h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: var(--accent);
}

.lesson-box ul {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.lesson-box li {
  margin-bottom: 0.35rem;
}

.lesson-box code {
  font-size: 0.88em;
  color: var(--text);
}

.lesson-tip {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.swatch-start { background: #6bcb8f; }
.swatch-goal { background: #e07a5f; }
.swatch-frontier { background: #5b9fd4; }
.swatch-visited { background: #2a4a6b; }
.swatch-path { background: #f2cc8f; }
.swatch-wall { background: #3d4f66; }
.swatch-c2 { background: rgba(224, 122, 95, 0.55); }
.swatch-c0 { background: rgba(91, 159, 212, 0.4); }
.swatch-cm1 { background: rgba(107, 203, 143, 0.45); }

.field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.paint-tools {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}

.paint-tools-4 {
  grid-template-columns: repeat(4, 1fr);
}

.paint-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.paint-btn:hover {
  border-color: var(--accent);
}

.paint-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.paint-btn.paint-wall {
  font-family: var(--font);
  font-size: 0.85rem;
}

.paint-btn.paint-goal {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e07a5f;
}

.paint-btn.paint-goal.is-active {
  border-color: #e07a5f;
  background: rgba(224, 122, 95, 0.18);
  color: #e07a5f;
  box-shadow: inset 0 0 0 1px #e07a5f;
}

.hint-text {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hint-text code {
  font-size: 0.9em;
}

.btn-block {
  width: 100%;
}

.control-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.btn-warn {
  border-color: rgba(224, 122, 95, 0.55) !important;
  color: #e8a090 !important;
}

.btn-warn:hover {
  border-color: #e07a5f !important;
  color: #f0b8ac !important;
}

.h-info-warn {
  color: #e07a5f !important;
  font-weight: 600;
}

.result-compare {
  margin-top: 0.85rem;
  padding: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.result-compare h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
}

.result-compare ul {
  margin: 0 0 0.65rem;
  padding-left: 1.1rem;
}

.result-compare li {
  margin-bottom: 0.3rem;
}

.result-compare strong {
  color: var(--text);
}

.result-verdict {
  margin: 0 0 0.5rem;
  color: var(--text);
  line-height: 1.5;
}

.result-note {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.9;
}

.result-note code {
  font-size: 0.9em;
}

.canvas-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow: hidden;
}

.canvas-panel canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #0a0e14;
}

.controls-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.controls-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.control-row .btn {
  flex: 1;
  min-width: 5rem;
}

.control-field {
  margin-bottom: 1rem;
}

.control-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.control-field input[type="range"] {
  width: 100%;
}

.status-log {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 3rem;
}

.page-header {
  padding: 2rem 0 0;
}

.page-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}

.page-header p {
  margin: 0;
  color: var(--text-muted);
}

.breadcrumb {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* ===== Data structure panels + C# samples ===== */
.ds-section,
.code-section {
  margin: 0 0 2.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
}

.ds-section h2,
.code-section h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.section-lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.ds-panels {
  display: grid;
  gap: 1rem;
  overflow-anchor: none;
}

@media (min-width: 720px) {
  .ds-panels {
    grid-template-columns: 1fr 1fr;
  }
}

.ds-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}

.ds-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

details.ds-block > .ds-title {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.2rem;
  user-select: none;
}

details.ds-block > .ds-title:hover {
  color: var(--accent-hover);
}

details.ds-block > .ds-title::-webkit-details-marker {
  display: none;
}

details.ds-block > .ds-title::before {
  content: "▾";
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.4rem;
  font-size: 0.8em;
}

details.ds-block:not([open]) > .ds-title {
  margin-bottom: 0;
}

details.ds-block:not([open]) > .ds-title::before {
  content: "▸";
}

.ds-type {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.95;
}

.ds-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.ds-queue {
  align-items: stretch;
  overflow-x: hidden;
}

/* FIFO: 前（取り出し）は左。折り返さず横スクロールにして高さ増を抑える */
.ds-queue .ds-cells {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
}

/* コールスタック（DFS 再帰） — 上が現在（新しいフレーム） */
.call-stack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 0.25rem 0;
}

.call-stack-end {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.85;
}

.call-frame {
  display: grid;
  grid-template-columns: 1.8rem 1fr auto auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.call-frame.is-top {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.call-depth {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.call-title {
  color: var(--text);
  font-weight: 600;
}

.call-detail {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.call-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #0a1018;
  background: var(--accent);
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
}

.ds-end-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  writing-mode: horizontal-tb;
  align-self: center;
}

.ds-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2rem;
  align-items: center;
}

.ds-set {
  align-content: flex-start;
}

.ds-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text);
}

.ds-cell.is-front {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.ds-idx {
  position: absolute;
  top: -0.45rem;
  left: 0.15rem;
  font-size: 0.6rem;
  color: var(--text-muted);
}

.ds-set .ds-set-cell {
  border-radius: 999px;
}

.ds-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.ds-caption {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ds-caption code {
  font-size: 0.9em;
  color: var(--text);
}

.ds-tree {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
}

/* 親ポインタ: 固定タブ + ツリー（HTML に常駐） */
.ds-parent-block {
  margin-top: 0.85rem;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.ds-parent-block .ds-title {
  margin-bottom: 0.55rem;
}

.ds-tabs {
  display: flex;
  width: 100%;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0.25rem;
  border-radius: 10px;
  background: #0a0e14;
  border: 1px solid var(--border);
  box-sizing: border-box;
  align-items: center;
}

.ds-parent-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  width: 100%;
}

.ds-parent-toolbar .ds-tabs {
  flex: 1 1 auto;
  margin: 0;
  min-width: 10rem;
}

.tree-zoom-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.tree-zoom-label {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  min-width: 2.6rem;
  text-align: center;
}

.tree-zoom-btn {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.tree-zoom-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.tree-zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tree-zoom-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.ds-tab {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.2;
}

.ds-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.ds-tab.is-active {
  background: var(--accent);
  color: #0a1018;
  border-color: var(--accent);
}

.ds-tab-panel {
  min-height: 2.5rem;
  min-width: 0;
  max-width: 100%;
}

#ds-parent-tree.ds-tab-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.ds-tab-panel[hidden] {
  display: none !important;
}

.ds-parent-root:empty {
  display: none;
}

/* ===== 親ポインタ・ツリー（枝付き / 同深度で高さ揃え / 領域内スクロール） ===== */
.ds-node-tree {
  --tree-line: rgba(91, 159, 212, 0.75);
  --tree-gap-y: 1.1rem;
  --tree-gap-x: 0.35rem;
  --tree-chip-h: 1.65rem;
  --tree-line-w: 2px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  max-height: min(42vh, 22rem);
  height: auto;
  overflow: auto;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0a0e14;
  isolation: isolate;
}

/* スケール: --tree-zoom を JS が設定（1 / 0.7 / 0.5） */
.tree-scale-inner {
  --tree-zoom: 1;
  width: max-content;
  min-width: 100%;
  transform: scale(var(--tree-zoom));
  transform-origin: top left;
  /* transform 後のレイアウト占有を視覚サイズに近づける */
  margin-bottom: calc((var(--tree-zoom) - 1) * 100%);
}

/* 縮小時は変数でもさらに詰める */
.ds-node-tree.is-compact {
  --tree-gap-y: 0.55rem;
  --tree-gap-x: 0.12rem;
  --tree-chip-h: 1.05rem;
  --tree-line-w: 1.5px;
}

.ds-node-tree.is-compact .tree-node-chip {
  min-width: 1.55rem;
  font-size: 0.55rem;
  padding: 0 0.28rem;
}

/* zoom プロパティ対応ブラウザではレイアウトも縮小（スクロール領域が正確） */
@supports (zoom: 1) {
  .tree-scale-inner {
    transform: none;
    margin-bottom: 0;
    zoom: var(--tree-zoom);
  }
}

/* 実コンテンツ幅に合わせて横スクロール可能にする */
.tree-root {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0.25rem 0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.tree-branch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* 各ノード: 上に枝領域、中央にチップ、下に子 */
.tree-li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--tree-gap-x);
  flex: 0 0 auto;
  max-width: none;
}

.tree-node-box {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tree-chip-h);
  min-height: var(--tree-chip-h);
}

.tree-node-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: var(--tree-chip-h);
  padding: 0 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #121a24;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  box-sizing: border-box;
}

.tree-node-chip.is-root {
  border-color: rgba(107, 203, 143, 0.75);
  background: rgba(107, 203, 143, 0.2);
  color: #9be0b4;
  font-weight: 700;
}

.tree-node-chip.is-leaf {
  border-color: rgba(154, 171, 191, 0.45);
}

.tree-node-chip.is-cycle {
  border-color: rgba(224, 122, 95, 0.55);
  color: #e8a090;
}

/*
 * 枝は「実ノード（.tree-node-chip）がある li」にだけ付ける。
 * 親チップ直下の縦棒は描かない（2人以上の子のあいだに空中で終わるため）。
 * 親と水平レールは接する。子への縦枝は各子チップの中心へ。
 */
.tree-branch > .tree-li {
  padding-top: var(--tree-gap-y);
}

.tree-branch > .tree-li:has(.tree-node-chip)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--tree-line-w);
  height: var(--tree-gap-y);
  transform: translateX(-50%);
  background: var(--tree-line);
  z-index: 1;
}

.tree-branch > .tree-li:has(.tree-node-chip):not(:only-child)::after {
  content: "";
  position: absolute;
  top: 0;
  height: var(--tree-line-w);
  background: var(--tree-line);
  z-index: 0;
}

.tree-branch > .tree-li:has(.tree-node-chip):not(:first-child):not(:last-child)::after {
  left: 0;
  right: 0;
  width: 100%;
}

.tree-branch > .tree-li:has(.tree-node-chip):first-child:not(:only-child)::after {
  left: 50%;
  width: 50%;
}

.tree-branch > .tree-li:has(.tree-node-chip):last-child:not(:only-child)::after {
  left: 0;
  width: 50%;
}

.tree-branch > .tree-li:only-child::after {
  display: none;
}

.tree-li-omit .tree-node-chip {
  opacity: 0.7;
}

/* ツリーパネル内の注釈はスクロール外（下）に固定しないで枠内 */
#ds-parent-tree > .ds-caption {
  flex: 0 0 auto;
  margin-top: 0.45rem;
}

.ds-edge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ds-node {
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.ds-node.is-parent {
  border-color: rgba(107, 203, 143, 0.45);
  color: var(--success);
}

.ds-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.ds-priority {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
}

.ds-pri-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ds-pri-row.is-best {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ds-pri-rank {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.ds-pri-row.is-best .ds-pri-rank {
  color: var(--accent);
  font-weight: 700;
}

.ds-pri-f {
  color: var(--accent);
  font-weight: 700;
}

.ds-pri-gh {
  color: var(--text-muted);
}

.code-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.code-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.code-meta code {
  color: var(--text);
  font-size: 0.9em;
}

.code-block {
  margin: 0;
  padding: 1rem 1.1rem;
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  max-height: 28rem;
  overflow-y: auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #d6e0ec;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.code-block code {
  font-family: inherit;
  white-space: pre;
}

.code-note {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ===== AND-OR / ゲーム木 =====
 * 方針: Tree 表示は画面横幅を最大限使う。
 * 操作・DS は木の下（または木以外の行）に置き、木の横に並べない。
 */
.tree-panel {
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.tree-viewport {
  width: 100%;
  min-width: 0;
  min-height: min(42vh, 20rem);
  max-height: min(78vh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  background: #0a0e14;
  border-radius: 8px;
  padding: 0.35rem 0.4rem;
  box-sizing: border-box;
}

/* ゲーム木 SVG: 親の全幅を使い切る（横スクロールは出さない） */
.andor-svg,
.mm-svg,
.mcts-tree-svg,
.tree-svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  font-family: var(--font);
}

/* ゲーム木デモ: 常に縦積み。木 = 全幅、操作は下 */
.demo-workspace:has(.tree-viewport),
.demo-workspace:has(.mcts-tree-panel) {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  width: 100%;
  max-width: none;
}

.demo-workspace:has(.tree-viewport) .demo-game-group,
.demo-workspace:has(.mcts-tree-panel) .demo-game-group {
  position: static;
  width: 100%;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--workspace-gap);
  /* 木の横余白を削って描画幅を確保 */
  padding: 0.4rem 0.35rem;
}

.demo-workspace:has(.tree-viewport) .demo-board,
.demo-workspace:has(.tree-viewport) .demo-controls,
.demo-workspace:has(.mcts-tree-panel) .demo-controls {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.demo-workspace:has(.tree-viewport) .demo-board .canvas-panel,
.demo-workspace:has(.mcts-tree-panel) .demo-board .canvas-panel {
  max-width: none;
  width: 100%;
}

/* 汎用ゲーム木: 盤面領域 = 木のみ → 先頭に全幅配置 */
.demo-workspace:has(.tree-viewport) .demo-board {
  order: 0;
  flex: 0 0 auto;
}

.demo-workspace:has(.tree-viewport) .demo-controls {
  order: 1;
  flex: 0 0 auto;
}

.demo-workspace:has(.tree-viewport) .ds-section-workspace,
.demo-workspace:has(.mcts-tree-panel) .ds-section-workspace {
  order: 2;
  width: 100%;
}

/* MCTS: 1行目=盤+操作、2行目=探索木を全幅 */
.demo-workspace:has(.mcts-tree-panel) .demo-game-group {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  grid-template-areas:
    "board controls"
    "tree tree";
  align-items: start;
}

.demo-workspace:has(.mcts-tree-panel) .demo-board {
  display: contents;
}

.demo-workspace:has(.mcts-tree-panel) .ttt-panel {
  grid-area: board;
  max-width: 16rem;
  width: 100%;
}

.demo-workspace:has(.mcts-tree-panel) .mcts-tree-panel {
  grid-area: tree;
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.demo-workspace:has(.mcts-tree-panel) .demo-controls {
  grid-area: controls;
  width: 100%;
  min-width: 0;
}

@media (max-width: 720px) {
  .demo-workspace:has(.mcts-tree-panel) .demo-game-group {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "controls"
      "tree";
  }

  .demo-workspace:has(.mcts-tree-panel) .ttt-panel {
    max-width: 18rem;
    margin-inline: auto;
  }
}

.andor-edge {
  stroke: #3d4f66;
  stroke-width: 2;
  fill: none;
}

.andor-edge.is-proof {
  stroke: #f2cc8f;
  stroke-width: 2.5;
}

.andor-node rect {
  stroke: var(--border);
  stroke-width: 1.5;
  fill: #1a2433;
}

.andor-node.kind-or rect {
  fill: rgba(91, 159, 212, 0.18);
  stroke: #5b9fd4;
}

.andor-node.kind-and rect {
  fill: rgba(167, 139, 250, 0.16);
  stroke: #a78bfa;
}

.andor-node.leaf-true rect {
  fill: rgba(107, 203, 143, 0.2);
  stroke: #6bcb8f;
}

.andor-node.leaf-false rect {
  fill: rgba(224, 122, 95, 0.18);
  stroke: #e07a5f;
}

.andor-node.is-active rect {
  stroke: #f2cc8f;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(242, 204, 143, 0.35));
}

.andor-node.is-true rect {
  fill: rgba(242, 204, 143, 0.22);
  stroke: #f2cc8f;
}

.andor-node.is-false:not(.is-active) rect {
  fill: rgba(61, 79, 102, 0.85);
  stroke: #5a6d85;
  opacity: 0.92;
}

.andor-kind,
.andor-label {
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.andor-kind {
  font-size: 10px;
  font-weight: 700;
  fill: var(--text-muted);
}

.andor-label {
  font-size: 11px;
  font-weight: 600;
}

.swatch-or {
  background: #5b9fd4;
}

.swatch-and {
  background: #a78bfa;
}

.swatch-leaf-t {
  background: #6bcb8f;
}

.swatch-leaf-f {
  background: #e07a5f;
}

.andor-formula .formula-code {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.footer-muted {
  color: var(--text-muted);
}

/* Min-Max（AND-OR 木スタイルを拡張） */
.andor-node.kind-max rect {
  fill: rgba(91, 159, 212, 0.18);
  stroke: #5b9fd4;
}

.andor-node.kind-min rect {
  fill: rgba(167, 139, 250, 0.16);
  stroke: #a78bfa;
}

.andor-node.is-valued:not(.is-active) rect {
  stroke-width: 2;
}

.mm-score {
  fill: #f2cc8f;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.andor-node.kind-leaf .mm-score {
  fill: var(--text);
}

.andor-node.kind-leaf {
  cursor: pointer;
}

/* α-β 枝刈り */
.andor-node.is-cutoff rect {
  stroke-dasharray: 4 3;
  opacity: 0.88;
}

.andor-node.is-pruned rect {
  fill: rgba(61, 79, 102, 0.55) !important;
  stroke: #5a6d85 !important;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}

.andor-node.is-pruned .andor-label,
.andor-node.is-pruned .mm-score,
.andor-node.is-pruned .andor-kind {
  fill: #8a9bb0;
}

.andor-edge.is-pruned-edge {
  stroke: #5a6d85;
  stroke-dasharray: 5 4;
  opacity: 0.7;
}

.swatch-pruned {
  background: #5a6d85;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 4px
  );
}

/* モンテカルロ */
.andor-node.is-on-path rect {
  stroke: #f2cc8f;
  stroke-width: 2;
}

.andor-node.is-visited-mc:not(.is-active):not(.is-on-path) rect {
  stroke: rgba(91, 159, 212, 0.7);
}

.mc-params {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.mc-params .controls-label {
  margin: 0;
}

.mc-num {
  width: 4.2rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

/* 多腕バンディット */
.bandit-panel {
  overflow: auto;
}

.bandit-board {
  background: #0a0e14;
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  min-height: 280px;
}

.bandit-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.bandit-legend-row .swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.25rem;
  vertical-align: -0.1em;
}

.bandit-arms {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bandit-arm {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(30, 40, 54, 0.65);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bandit-arm.is-last {
  border-color: #f2cc8f;
  box-shadow: 0 0 0 1px rgba(242, 204, 143, 0.35);
}

.bandit-arm.is-optimal {
  border-color: rgba(107, 203, 143, 0.55);
}

.bandit-arm-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.bandit-arm-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.bandit-arm-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bandit-bars {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.bandit-bar-track {
  position: relative;
  height: 1.15rem;
  background: rgba(15, 20, 25, 0.9);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(45, 58, 77, 0.8);
}

.bandit-bar {
  height: 100%;
  border-radius: 3px;
  min-width: 0;
  transition: width 0.2s ease;
}

.bandit-bar-est {
  background: linear-gradient(90deg, #3d7aad, #5b9fd4);
}

.bandit-bar-true {
  background: linear-gradient(90deg, #c4a35a, #f2cc8f);
}

.bandit-bar-n {
  background: linear-gradient(90deg, #6b5b95, #a78bfa);
}

.bandit-bar-label {
  position: absolute;
  inset: 0 0.4rem 0 0.4rem;
  display: flex;
  align-items: center;
  font-size: 0.68rem;
  color: rgba(232, 238, 246, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.bandit-last-reward {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.bandit-last-reward strong {
  color: #f2cc8f;
}

.bandit-select {
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.bandit-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.bandit-params {
  row-gap: 0.45rem;
}

/* 共通フッター（topic-shell が生成） */
.site-footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.site-footer-links a {
  white-space: nowrap;
}

.site-footer .footer-muted {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ===== トップ: カテゴリ別トピック ===== */
.topic-category {
  margin-bottom: 1.75rem;
}

.topic-category-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.card-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.card-badge-row .card-badge {
  margin-bottom: 0;
}

.card-maturity {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.25;
  max-width: 100%;
}

.card-maturity-name {
  white-space: nowrap;
}

.card-maturity-detail {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
  letter-spacing: 0;
}

.card-maturity-lg {
  font-size: 0.78rem;
  padding: 0.28rem 0.6rem;
  border-radius: 12px;
}

.card-maturity-lg .card-maturity-detail {
  font-size: 0.7rem;
}

.card-maturity-oneshot {
  border-color: rgba(154, 171, 191, 0.55);
  color: #9aabbf;
  background: rgba(154, 171, 191, 0.1);
}

.card-maturity-revised {
  border-color: rgba(91, 159, 212, 0.65);
  color: #7bb3e0;
  background: rgba(91, 159, 212, 0.12);
}

.card-maturity-stable {
  border-color: rgba(107, 203, 143, 0.65);
  color: #6bcb8f;
  background: rgba(107, 203, 143, 0.12);
}

/* カード左縁で成熟度を補助表示 */
.card[data-maturity="oneshot"] {
  border-left: 3px solid rgba(154, 171, 191, 0.75);
}

.card[data-maturity="revised"] {
  border-left: 3px solid rgba(91, 159, 212, 0.85);
}

.card[data-maturity="stable"] {
  border-left: 3px solid rgba(107, 203, 143, 0.9);
}

/* トップ: 成熟度凡例 */
.maturity-legend {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.maturity-legend-title {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.maturity-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 720px) {
  .maturity-legend-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.maturity-legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  min-height: 100%;
}

.maturity-legend-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.maturity-legend-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.maturity-legend-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.maturity-legend-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.maturity-legend-note code {
  font-size: 0.9em;
}

/* ===== 学習項目（ロードマップ・見出しのみ） ===== */
.curriculum-outline {
  margin-top: 0.5rem;
}

.curriculum-summary {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.curriculum-category {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.curriculum-category-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.35rem;
}

.curriculum-category-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.curriculum-category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.curriculum-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.curriculum-badge-planned {
  border-color: rgba(212, 168, 75, 0.55);
  color: #d4a84b;
  background: rgba(212, 168, 75, 0.1);
}

.curriculum-badge-ready {
  border-color: rgba(107, 203, 143, 0.55);
  color: #6bcb8f;
  background: rgba(107, 203, 143, 0.12);
}

.curriculum-badge-phase {
  border-color: rgba(154, 171, 191, 0.45);
  color: var(--text-muted);
  background: rgba(154, 171, 191, 0.08);
}

.curriculum-category-blurb {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.curriculum-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.curriculum-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px dashed rgba(154, 171, 191, 0.45);
  background: var(--bg);
  max-width: 100%;
}

.curriculum-item-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.curriculum-item-mark {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.9;
  white-space: nowrap;
}

/* デモページ: タイトル直下の成熟度 */
.page-maturity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.55rem;
}

.page-maturity-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.page-maturity-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  flex: 1 1 12rem;
}

.topic-category-grid {
  /* .card-grid を継承利用 */
}

#topic-list:not(:has(.topic-category)) {
  /* 旧単一グリッド互換は不要（常にカテゴリ描画） */
}

/* ===== AABB 説明特化レイアウト（経路探索マップを使わない） ===== */
.aabb-lesson {
  margin-top: 0.5rem;
}

.aabb-story {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem;
  background: var(--accent-soft);
  border: 1px solid rgba(91, 159, 212, 0.35);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}

.aabb-layout {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .aabb-layout {
    grid-template-columns: 1fr;
  }
}

.aabb-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.aabb-stage-block,
.aabb-side {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 1rem;
}

.aabb-stage-wrap {
  background: #0a0e14;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

#aabb-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
}

#aabb-canvas:active {
  cursor: grabbing;
}

.aabb-hint {
  margin: 0;
  padding: 0.35rem 0.6rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.aabb-projections {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.aabb-proj-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.55rem;
}

.aabb-proj-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.aabb-proj-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.aabb-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(61, 79, 102, 0.6);
  color: var(--text-muted);
}

.aabb-badge[data-on="1"] {
  background: rgba(107, 203, 143, 0.2);
  color: #6bcb8f;
}

.aabb-badge[data-on="0"] {
  background: rgba(224, 122, 95, 0.15);
  color: #e07a5f;
}

.aabb-proj-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #0a0e14;
}

.aabb-proj-formula {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  word-break: break-all;
}

.aabb-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  border: 2px solid var(--border);
  background: var(--bg);
}

.aabb-verdict[data-state="yes"] {
  border-color: #6bcb8f;
  background: rgba(107, 203, 143, 0.12);
}

.aabb-verdict[data-state="no"] {
  border-color: #5a6d85;
}

.aabb-verdict-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aabb-verdict-value {
  font-size: 1.25rem;
  font-weight: 800;
}

.aabb-verdict[data-state="yes"] .aabb-verdict-value {
  color: #6bcb8f;
}

.aabb-checklist {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.aabb-check-item {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.8rem;
}

.aabb-check-item code {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  word-break: break-all;
}

.aabb-check-item.is-focus {
  border-color: #f2cc8f;
  box-shadow: 0 0 0 1px rgba(242, 204, 143, 0.35);
}

.aabb-check-item.is-pass:not(.is-focus) {
  border-color: rgba(107, 203, 143, 0.4);
}

.aabb-check-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  background: #2d3a4d;
  color: var(--text-muted);
}

.aabb-check-mark.ok {
  background: rgba(107, 203, 143, 0.25);
  color: #6bcb8f;
}

.aabb-check-mark.ng {
  background: rgba(224, 122, 95, 0.2);
  color: #e07a5f;
}

.aabb-check-mark.focus {
  outline: 2px solid #f2cc8f;
}

.aabb-numbers {
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

.aabb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.aabb-table th,
.aabb-table td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.35rem;
  text-align: center;
}

.aabb-table th {
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 600;
}

.aabb-table .row-a td:first-child {
  color: #5b9fd4;
  font-weight: 700;
}

.aabb-table .row-b td:first-child {
  color: #e07a5f;
  font-weight: 700;
}

.aabb-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.aabb-controls .control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.aabb-presets {
  margin-bottom: 0.65rem;
}

.aabb-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.aabb-preset {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.45rem !important;
}

.aabb-side .status-log {
  margin-top: 0.25rem;
}

.aabb-verdict-agree {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
  color: #6bcb8f;
}

.aabb-verdict-agree[data-ok="0"] {
  color: #e07a5f;
}

.aabb-mode-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.aabb-mode-tab {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.35rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.aabb-mode-tab.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.aabb-eq-live {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
}

.aabb-dual {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 1rem;
}

.aabb-dual-lead {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.aabb-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

@media (max-width: 800px) {
  .aabb-dual-grid {
    grid-template-columns: 1fr;
  }
}

.aabb-method {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--bg);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.aabb-method.is-dim {
  opacity: 0.42;
}

.aabb-method-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.aabb-method-head h3 {
  margin: 0;
  font-size: 0.92rem;
}

.aabb-method-result {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(61, 79, 102, 0.5);
  color: var(--text-muted);
}

.aabb-method-result[data-on="1"] {
  background: rgba(107, 203, 143, 0.2);
  color: #6bcb8f;
}

.aabb-method-result[data-on="0"] {
  background: rgba(224, 122, 95, 0.15);
  color: #e07a5f;
}

.aabb-method-desc {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.aabb-sep-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #f2cc8f;
}

.aabb-snippet {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #0a0e14;
  border: 1px solid var(--border);
  font-size: 0.7rem;
  line-height: 1.45;
  color: #d6e0ec;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}

.aabb-complexity {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 1rem;
}

.aabb-complexity-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.aabb-complexity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 36rem;
}

.aabb-complexity-table th,
.aabb-complexity-table td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
}

.aabb-complexity-table thead th {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  font-size: 0.75rem;
}

.aabb-complexity-table tbody th {
  background: var(--bg);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}

.aabb-complexity-notes {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.aabb-complexity-notes code {
  font-size: 0.85em;
}

/* ===== ステートマシン（説明特化・非マップ） ===== */
.fsm-lesson {
  margin-top: 0.5rem;
}

.fsm-story {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem;
  background: var(--accent-soft);
  border: 1px solid rgba(91, 159, 212, 0.35);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.fsm-layout {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 300px);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .fsm-layout {
    grid-template-columns: 1fr;
  }
}

.fsm-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.fsm-main-block,
.fsm-side,
.fsm-table-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 1rem;
}

.fsm-diagram-wrap {
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}

.fsm-svg {
  display: block;
  width: 100%;
  min-height: 240px;
}

.fsm-edge {
  stroke: #4a5d75;
  stroke-width: 1.75;
}

.fsm-edge.is-active {
  stroke: #f2cc8f;
  stroke-width: 2.5;
}

.fsm-edge-label {
  fill: #8a9bb0;
  font-size: 10px;
  font-family: ui-monospace, Menlo, monospace;
}

.fsm-edge-label.is-active {
  fill: #f2cc8f;
  font-weight: 700;
}

.fsm-node circle {
  stroke-width: 2.5;
  transition: filter 0.15s ease;
}

.fsm-node.is-current circle {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px rgba(242, 204, 143, 0.45));
}

.fsm-node.is-unreachable circle {
  fill: #2a3340 !important;
  stroke: #5a6d85 !important;
  opacity: 0.55;
}

.fsm-node.is-unreachable .fsm-node-label {
  fill: #8a9bb0;
}

.fsm-node-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.fsm-actor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.fsm-actor-figure {
  --actor-color: #5b9fd4;
  position: relative;
  width: 64px;
  height: 72px;
  flex-shrink: 0;
}

.fsm-actor-body {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 36px;
  height: 40px;
  border-radius: 10px 10px 8px 8px;
  background: var(--actor-color);
  opacity: 0.85;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fsm-actor-face {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8eef6;
  border: 3px solid var(--actor-color);
  transition: border-color 0.2s ease;
}

/* 状態ごとの簡易モーション */
.fsm-actor-figure[data-state="Walk"] .fsm-actor-body {
  animation: fsm-bob 0.35s ease-in-out infinite alternate;
}

.fsm-actor-figure[data-state="Jump"] .fsm-actor-body {
  transform: translateX(-50%) translateY(-12px);
}

.fsm-actor-figure[data-state="Attack"] .fsm-actor-body {
  transform: translateX(-50%) scaleX(1.15);
}

.fsm-actor-figure[data-state="Hurt"] .fsm-actor-body {
  opacity: 0.55;
  transform: translateX(-50%) rotate(-8deg);
}

.fsm-actor-figure[data-state="Dead"] .fsm-actor-body {
  transform: translateX(-50%) rotate(90deg) translateY(8px);
  opacity: 0.4;
}

.fsm-actor-figure[data-state="Dead"] .fsm-actor-face {
  opacity: 0.35;
}

@keyframes fsm-bob {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-4px);
  }
}

.fsm-actor-state {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--actor-color, var(--accent));
}

.fsm-actor-blurb {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.fsm-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.fsm-controls .control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fsm-events {
  margin-bottom: 0.65rem;
}

.fsm-event-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.fsm-event-btn {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.45rem !important;
}

.fsm-event-btn.is-valid {
  border-color: #6bcb8f !important;
  color: #6bcb8f !important;
}

.fsm-event-btn.is-invalid {
  opacity: 0.55;
}

.fsm-event-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.fsm-subhead {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.fsm-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  max-height: 6rem;
  overflow-y: auto;
}

.fsm-hist-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--c, var(--border));
  color: var(--c, var(--text));
  background: rgba(91, 159, 212, 0.15);
}

.fsm-hist-chip.is-current {
  box-shadow: 0 0 0 1px var(--c);
}

.fsm-hist-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.fsm-table-block {
  margin-top: 1rem;
}

.fsm-table-lead {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.fsm-table-scroll {
  overflow: auto;
  max-height: 22rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.fsm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fsm-table th,
.fsm-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
  text-align: center;
  white-space: nowrap;
}

.fsm-table thead th {
  background: var(--bg);
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.fsm-table tbody th {
  background: var(--bg);
  text-align: left;
  font-weight: 700;
}

.fsm-table tr.is-current-row th,
.fsm-table tr.is-current-row td {
  background: rgba(91, 159, 212, 0.08);
}

.fsm-table td.has-trans {
  color: #6bcb8f;
  font-weight: 600;
}

.fsm-table td.no-trans {
  color: #5a6d85;
}

.fsm-table td.is-active-cell {
  background: rgba(242, 204, 143, 0.2);
  color: #f2cc8f;
  font-weight: 800;
}

/* ===== 三目並べ ===== */
/* 盤ゲーム（tic-tac-toe / othello-4x4 / chopsticks / mcts / nim）のプリセット行: 選択肢の名前が長く、
   ボタンも並ぶので、狭い画面では折り返して選択欄を縮める
   （.controls-group .control-row は全ページ共通で nowrap のため、この行だけ上書き） */
.controls-group .control-row.preset-row {
  flex-wrap: wrap;
}
.control-row.preset-row select {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 100%;
}

.ttt-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.ttt-board-wrap {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  aspect-ratio: 1 / 1;
}

.ttt-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ttt-cell:hover {
  border-color: var(--accent);
}

.ttt-cell.is-win-line {
  border-color: #f2cc8f;
  box-shadow: 0 0 0 2px rgba(242, 204, 143, 0.5) inset;
}

.ttt-piece {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
}

.ttt-piece-X {
  color: #5b9fd4;
}

.ttt-piece-O {
  color: #e07a5f;
}

.ttt-piece-empty {
  color: transparent;
}

.ttt-eval {
  position: absolute;
  top: 0.25rem;
  left: 0.35rem;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: rgba(10, 14, 20, 0.7);
}

.ttt-cell.is-win .ttt-eval {
  color: #6bcb8f;
  border: 1px solid rgba(107, 203, 143, 0.6);
}

.ttt-cell.is-draw .ttt-eval {
  color: #f2cc8f;
  border: 1px solid rgba(242, 204, 143, 0.6);
}

.ttt-cell.is-loss .ttt-eval {
  color: #e07a5f;
  border: 1px solid rgba(224, 122, 95, 0.6);
}

.ttt-cell.is-best {
  border-color: #6bcb8f;
  box-shadow: 0 0 0 2px rgba(107, 203, 143, 0.45) inset;
}

.ttt-mc {
  position: absolute;
  bottom: 0.25rem;
  right: 0.35rem;
  font-size: 0.66rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  background: rgba(10, 14, 20, 0.7);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.ttt-reachable-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.ttt-legend {
  justify-content: center;
}

.ttt-edit-row {
  align-items: center;
  gap: 0.75rem;
}

.ttt-check,
.ttt-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.ttt-toggle-row {
  align-items: center;
}

.ttt-toggle-row .controls-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.ttt-range {
  flex: 1;
  min-width: 6rem;
}

.ttt-sym-details {
  margin: 0;
}

.ttt-sym-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.5rem;
}

.ttt-sym-item {
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
}

.ttt-sym-item.is-canonical {
  border-color: #6bcb8f;
  box-shadow: 0 0 0 1px rgba(107, 203, 143, 0.4);
}

.ttt-mini-board {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 3.3rem;
}

.ttt-mini-row {
  display: flex;
  gap: 1px;
}

.ttt-mini-cell {
  flex: 1;
  aspect-ratio: 1 / 1;
  background: #0a0e14;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text);
}

.ttt-sym-caption {
  margin-top: 0.25rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ds-table-scroll {
  overflow-x: auto;
}

.ttt-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ttt-compare-table th,
.ttt-compare-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.ttt-compare-table th:first-child,
.ttt-compare-table td:first-child {
  text-align: left;
}

.ttt-compare-table thead th {
  background: var(--bg);
  color: var(--text-muted);
}

/* ===== MCTS ===== */
.mcts-phase-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.mcts-phase-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-elevated, #2a2f38);
  color: var(--text);
  border: 1px solid var(--border, #444);
}

.mcts-phase-badge[data-phase="done"] {
  border-color: #3d8f6e;
  color: #8fdfb8;
}

.mcts-tree-panel {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  max-height: min(78vh, 48rem);
  padding: 0.5rem 0.4rem;
  box-sizing: border-box;
}

.mcts-tree-heading {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.mcts-tree-svg {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 140px;
  background: var(--bg, #1a1d24);
  border-radius: 8px;
}

.demo-workspace:has(.mcts-tree-panel) .ttt-board-wrap {
  max-width: 100%;
  margin-inline: 0;
}

.mcts-edge {
  stroke: #5a6270;
  stroke-width: 1.5;
}

.mcts-edge-path {
  stroke: #6db3f2;
  stroke-width: 2.5;
}

.mcts-node rect {
  fill: #2a303c;
  stroke: #5a6270;
  stroke-width: 1.2;
}

.mcts-node.is-path rect {
  fill: #243448;
  stroke: #6db3f2;
  stroke-width: 2;
}

.mcts-node-label,
.mcts-node-meta,
.mcts-tree-caption {
  fill: var(--text, #e8eaed);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.mcts-node-meta {
  fill: var(--text-muted, #9aa0a6);
  font-size: 10px;
}

.mcts-tree-caption {
  fill: var(--text-muted, #9aa0a6);
  font-size: 10px;
}

.mcts-compare-lead {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

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

/* ===== 割り箸 ===== */
.swatch-unreachable {
  background: #3a3f47;
}

.cs-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-panel-title {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cs-hands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem;
}

.cs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.cs-side-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-hand-row {
  display: flex;
  gap: 0.4rem;
}

.cs-hand-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(107, 203, 143, 0.18);
  border: 2px solid #6bcb8f;
  font-size: 1.1rem;
  font-weight: 800;
  color: #6bcb8f;
}

.cs-hand-chip.is-dead {
  background: rgba(224, 122, 95, 0.12);
  border-color: var(--border);
  color: var(--text-muted);
}

.cs-vs {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cs-turn-note {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cs-move-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 13rem;
  overflow-y: auto;
}

.cs-move-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cs-move-btn:hover {
  border-color: var(--accent);
}

.cs-move-btn.is-win {
  border-color: rgba(107, 203, 143, 0.6);
}

.cs-move-btn.is-loss {
  border-color: rgba(224, 122, 95, 0.6);
}

.cs-move-btn.is-draw {
  border-color: rgba(242, 204, 143, 0.6);
}

.cs-move-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}

.cs-move-btn.is-win .cs-move-tag {
  color: #6bcb8f;
  background: rgba(107, 203, 143, 0.15);
}

.cs-move-btn.is-loss .cs-move-tag {
  color: #e07a5f;
  background: rgba(224, 122, 95, 0.15);
}

.cs-move-btn.is-draw .cs-move-tag {
  color: #f2cc8f;
  background: rgba(242, 204, 143, 0.15);
}

.cs-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem;
}

.cs-matrix-wrap {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.cs-matrix {
  display: grid;
  grid-template-columns: repeat(var(--cs-matrix-cols, 16), minmax(1.05rem, 1fr));
  gap: 1px;
  min-width: 34rem;
  background: var(--border);
  border: 1px solid var(--border);
}

.cs-matrix-corner {
  background: var(--bg);
}

.cs-matrix-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.1rem;
  white-space: nowrap;
}

.cs-cell {
  aspect-ratio: 1 / 1;
  background: #0a0e14;
  border: 1px solid transparent;
}

.cs-cell.is-pending {
  background: #14181f;
}

.cs-cell.is-win {
  background: rgba(107, 203, 143, 0.75);
}

.cs-cell.is-loss {
  background: rgba(224, 122, 95, 0.75);
}

.cs-cell.is-draw {
  background: rgba(242, 204, 143, 0.75);
}

.cs-cell.is-unreachable {
  background: #3a3f47;
  opacity: 0.55;
}

.cs-cell.is-current {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px #ffffff inset;
}

.cs-wave-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.cs-legend {
  justify-content: center;
}

.cs-toggle-row {
  align-items: center;
  flex-wrap: wrap;
}

.cs-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cs-compare-table th,
.cs-compare-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.cs-compare-table th:first-child,
.cs-compare-table td:first-child,
.cs-compare-table th:nth-child(2),
.cs-compare-table td:nth-child(2),
.cs-compare-table th:nth-child(3),
.cs-compare-table td:nth-child(3) {
  text-align: left;
}

.cs-compare-table thead th {
  background: var(--bg);
  color: var(--text-muted);
}

/* ===== ニム ===== */
.nim-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nim-mode-view[hidden] {
  display: none;
}

.nim-pile-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0;
}

.nim-pile-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.nim-pile-stones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.nim-stone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(107, 203, 143, 0.18);
  color: #6bcb8f;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.nim-stone:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}

.nim-stone.is-locked {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: default;
}

.nim-stone.is-locked:hover {
  transform: none;
  border-color: var(--border);
}

.nim-band-wrap {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.nim-band,
.nim-mod-row {
  display: grid;
  grid-template-columns: repeat(var(--nim-band-cols, 22), minmax(1.3rem, 1fr));
  gap: 1px;
  min-width: 32rem;
}

.nim-band {
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}

.nim-band-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #14181f;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nim-band-cell.is-pending {
  background: #14181f;
}

.nim-band-cell.is-win {
  background: rgba(107, 203, 143, 0.75);
  color: #06210f;
}

.nim-band-cell.is-loss {
  background: rgba(224, 122, 95, 0.75);
  color: #2a0d05;
}

.nim-band-cell.is-current {
  box-shadow: 0 0 0 2px #ffffff inset;
}

.nim-mod-row {
  background: transparent;
}

.nim-mod-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nim-mod-cell.is-zero {
  color: #e07a5f;
  font-weight: 800;
}

.nim-binary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
}

.nim-binary-header,
.nim-binary-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nim-binary-label {
  flex: 0 0 auto;
  min-width: 6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.nim-binary-bits {
  display: flex;
  gap: 0.2rem;
}

.nim-bit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nim-bit-head {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.6rem;
  width: 1.6rem;
  height: auto;
}

.nim-binary-sum .nim-bit {
  font-weight: 800;
}

.nim-binary-sum.is-zero .nim-bit {
  border-color: rgba(224, 122, 95, 0.7);
  background: rgba(224, 122, 95, 0.15);
  color: #e07a5f;
}

.nim-binary-sum.is-nonzero .nim-bit {
  border-color: rgba(107, 203, 143, 0.7);
  background: rgba(107, 203, 143, 0.15);
  color: #6bcb8f;
}

/* ===== 4×4 オセロ ===== */
.oth-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.oth-board-wrap {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.oth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  aspect-ratio: 1 / 1;
}

.oth-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.oth-cell:hover {
  border-color: var(--accent);
}

.oth-cell.is-legal {
  border-color: rgba(91, 159, 212, 0.6);
  box-shadow: 0 0 0 1px rgba(91, 159, 212, 0.35) inset;
}

.oth-cell.is-flipped {
  border-color: #f2cc8f;
  box-shadow: 0 0 0 2px rgba(242, 204, 143, 0.5) inset;
}

.oth-piece {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.oth-piece-B {
  background: #1b2430;
  border: 1px solid #4a5a70;
}

.oth-piece-W {
  background: #e8ecf1;
  border: 1px solid #b8c2cf;
}

.oth-piece-empty {
  background: transparent;
  width: 0;
  height: 0;
}

.oth-eval {
  position: absolute;
  top: 0.2rem;
  left: 0.3rem;
  font-size: 0.62rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  padding: 0.05rem 0.28rem;
  border-radius: 4px;
  background: rgba(10, 14, 20, 0.75);
}

.oth-cell.is-win .oth-eval {
  color: #6bcb8f;
  border: 1px solid rgba(107, 203, 143, 0.6);
}

.oth-cell.is-draw .oth-eval {
  color: #f2cc8f;
  border: 1px solid rgba(242, 204, 143, 0.6);
}

.oth-cell.is-loss .oth-eval {
  color: #e07a5f;
  border: 1px solid rgba(224, 122, 95, 0.6);
}

.oth-cell.is-best {
  border-color: #6bcb8f;
  box-shadow: 0 0 0 2px rgba(107, 203, 143, 0.45) inset;
}

.oth-legend {
  justify-content: center;
}

.oth-status-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
}

.oth-pass-banner {
  width: 100%;
  text-align: center;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgba(242, 204, 143, 0.15);
  border: 1px solid rgba(242, 204, 143, 0.5);
  color: #f2cc8f;
  font-size: 0.82rem;
}

.oth-score-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.oth-score-row strong {
  color: var(--text);
}

.oth-toggle-row {
  align-items: center;
}

.oth-toggle-row .controls-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.oth-encode-view {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  word-break: break-all;
}

.oth-encode-view strong {
  color: var(--text);
}

.oth-progress {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.oth-sym-details {
  margin: 0;
}

.oth-sym-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.5rem;
}

.oth-sym-item {
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
}

.oth-sym-item.is-canonical {
  border-color: #6bcb8f;
  box-shadow: 0 0 0 1px rgba(107, 203, 143, 0.4);
}

.oth-mini-board {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 3.6rem;
}

.oth-mini-row {
  display: flex;
  gap: 1px;
}

.oth-mini-cell {
  flex: 1;
  aspect-ratio: 1 / 1;
  background: #0a0e14;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oth-mini-piece {
  width: 62%;
  height: 62%;
  border-radius: 50%;
}

.oth-mini-piece.is-B {
  background: #1b2430;
  border: 1px solid #4a5a70;
}

.oth-mini-piece.is-W {
  background: #e8ecf1;
  border: 1px solid #b8c2cf;
}

.oth-sym-caption {
  margin-top: 0.25rem;
  font-size: 0.64rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oth-stage-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
  width: 100%;
}

.oth-stage-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
}

.oth-stage-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.oth-stage-card .oth-stage-value {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oth-stage-card .oth-stage-note {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.oth-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oth-compare-table th,
.oth-compare-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.oth-compare-table th:first-child,
.oth-compare-table td:first-child {
  text-align: left;
}

.oth-compare-table thead th {
  background: var(--bg);
  color: var(--text-muted);
}

/* ===== ゲームループ / 基礎実行 ===== */
.gl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 0.85rem;
  margin: 0.5rem 0 1.25rem;
  align-items: start;
}

@media (max-width: 800px) {
  .gl-layout {
    grid-template-columns: 1fr;
  }
}

.gl-main,
.gl-side {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.gl-block-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.gl-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #0a0e14;
}

.gl-swatch-ref {
  width: 1.1rem;
  height: 0;
  border: none;
  border-top: 2px dashed rgba(220, 226, 235, 0.6);
  border-radius: 0;
  background: none;
  align-self: center;
}

.gl-legend {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
}

.gl-params {
  flex-wrap: wrap;
}

.gl-frame-log {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.gl-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gl-log-table th,
.gl-log-table td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.45rem;
  text-align: right;
}

.gl-log-table th:first-child,
.gl-log-table td:first-child,
.gl-log-table th:nth-child(2),
.gl-log-table td:nth-child(2) {
  text-align: left;
}

.gl-log-table tr.is-warn {
  background: rgba(224, 122, 95, 0.15);
}

.gl-log-empty,
.gl-log-sum {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.tm-clocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.tm-clock-card {
  flex: 1 1 6.5rem;
  min-width: 6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

.tm-clock-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.tm-clock-value {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.btn-sm {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.75rem !important;
}

/* 入力の基礎 */
.tm-focus-hint {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ib-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.ib-action-card {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

.ib-action-card.is-held {
  border-color: #5b9fd4;
}

.ib-action-card.is-down {
  box-shadow: 0 0 0 1px #6bcb8f;
}

.ib-action-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.ib-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.ib-flag {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #2a303c;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}

.ib-flag.on {
  background: #3d7ab8;
  color: #fff;
}

.ib-flag.on.edge {
  background: #6bcb8f;
  color: #0f1419;
}

.ib-hold-bar {
  height: 5px;
  background: #1a222d;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.ib-hold-bar i {
  display: block;
  height: 100%;
  background: #f2cc8f;
  width: 0;
}

.ib-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.ib-key-help {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.ib-key-help p {
  margin: 0.25rem 0;
}

.ib-key-help kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 0.78rem;
}

.ib-event-list {
  margin: 0;
  padding-left: 1.1rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}

.ib-event-list li {
  margin: 0.2rem 0;
}

/* 座標変換 */
.coord-readout {
  margin-top: 0.65rem;
  overflow-x: auto;
}

.coord-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.coord-table th,
.coord-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  text-align: right;
}

.coord-table th:first-child,
.coord-table td:first-child,
.coord-table th:nth-child(2),
.coord-table td:nth-child(2) {
  text-align: left;
}

.coord-table thead th {
  background: var(--bg);
  color: var(--text-muted);
}

.coord-side-note {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 乱数とシード */
.rng-list {
  margin-top: 0.65rem;
}

.rng-block {
  margin-bottom: 0.65rem;
}

.rng-block-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.rng-chips,
.rng-dice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rng-chip {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.rng-die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  background: #2a4a6b;
  font-weight: 700;
  font-size: 0.85rem;
}

.rng-lcg-panel {
  margin: 0.35rem 0;
  padding: 0.45rem 0 0.15rem;
  border-top: 1px dashed var(--border);
}

.rng-param {
  max-width: 11rem;
}

.rng-period-panel {
  margin-top: 0.65rem;
}

.rng-period-card {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.85rem;
}

.rng-period-card.quality-bad {
  border-color: #e07a5f;
  background: rgba(224, 122, 95, 0.12);
}

.rng-period-card.quality-ok {
  border-color: #f2cc8f;
  background: rgba(242, 204, 143, 0.1);
}

.rng-period-card.quality-good {
  border-color: #6bcb8f;
  background: rgba(107, 203, 143, 0.1);
}

.rng-period-num {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
}

.rng-period-card p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  line-height: 1.4;
}

.rng-period-eq code {
  font-size: 0.8rem;
}

.maze-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}

/* —— weighted-random —— */
.wr-weights {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.wr-weight-row {
  display: grid;
  grid-template-columns: 0.85rem 4.5rem 1fr;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
}
.wr-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  display: inline-block;
}
.wr-label {
  color: var(--text-muted);
}
.wr-weight-row .mc-num {
  width: 100%;
  min-width: 0;
}

/* —— event-system —— */
.es-listeners {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.es-listener {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 0.9rem;
}
.es-log-panel {
  max-height: 280px;
  overflow: auto;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #0a0e14;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
}
.es-log {
  padding: 0.15rem 0;
  color: var(--text-muted);
}
.es-log-emit {
  color: #f2cc8f;
  font-weight: 600;
}
.es-log-call {
  color: #6bcb8f;
}
.es-log-sub {
  color: #7eb8e8;
}
.es-log-off {
  color: #e07a7a;
}
.btn-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
}

/* —— component-vs-inheritance —— */
.cvi-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0;
}
@media (max-width: 800px) {
  .cvi-layout {
    grid-template-columns: 1fr;
  }
}
.cvi-col {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.cvi-tree-ul {
  list-style: none;
  margin: 0.35rem 0 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(90, 106, 128, 0.45);
}
.cvi-tree > .cvi-tree-ul {
  padding-left: 0;
  border-left: none;
}
.cvi-node {
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font: inherit;
}
.cvi-node:hover {
  border-color: rgba(107, 203, 143, 0.4);
}
.cvi-node.is-active {
  background: rgba(107, 203, 143, 0.15);
  border-color: #6bcb8f;
}
.cvi-checks {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.cvi-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cvi-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  display: inline-block;
}
.cvi-card {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #0a0e14;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.cvi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}
.cvi-chip {
  font-size: 0.8rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid;
  font-family: ui-monospace, monospace;
}
.cvi-blurb {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.nt-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}

/* —— behavior-tree —— */
.bt-panel {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #0a0e14;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 0.9rem;
}
.bt-ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  border-left: 1px solid rgba(90, 106, 128, 0.4);
}
.bt-panel > .bt-ul {
  padding-left: 0;
  border-left: none;
}
.bt-node {
  margin: 0.25rem 0;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
}
.bt-node.bt-ok {
  background: rgba(107, 203, 143, 0.12);
  border-color: rgba(107, 203, 143, 0.45);
}
.bt-node.bt-fail {
  background: rgba(224, 122, 95, 0.12);
  border-color: rgba(224, 122, 95, 0.4);
}
.bt-node.bt-run {
  background: rgba(242, 204, 143, 0.12);
  border-color: rgba(242, 204, 143, 0.45);
}
.bt-st {
  float: right;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* —— ecs-intro —— */
.ecs-layout {
  display: grid;
  /* minmax(0, …): 表やログの中身の幅で列が広がり、スマホ幅ではみ出すのを防ぐ */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.25rem;
  margin: 1rem 0;
}
@media (max-width: 900px) {
  .ecs-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ecs-arch-grid {
  display: grid;
  gap: 0.5rem;
}
.ecs-arch-card {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 0.9rem;
}
.ecs-table-wrap {
  overflow: auto;
  margin-bottom: 0.75rem;
}
.ecs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ecs-table th,
.ecs-table td {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  padding: 0.3rem 0.45rem;
  text-align: center;
}
.ecs-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
}
.ecs-yes {
  color: #6bcb8f;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}
.ecs-no {
  color: var(--text-muted);
  opacity: 0.5;
}

/* —— profiling-loop —— */
.pf-panel {
  margin: 0.75rem 0;
}
.pf-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 4.5rem;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0;
  font-size: 0.85rem;
}
.pf-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.pf-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.pf-ms {
  font-family: ui-monospace, monospace;
  text-align: right;
  color: var(--text-muted);
}

/* —— a11y / unit-test / voice —— */
.a11y-sub {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(242, 204, 143, 0.4);
  border-radius: 6px;
  color: #f2cc8f;
}
.a11y-large {
  font-size: 1.1em;
}
.ut-summary {
  margin: 0.75rem 0;
  font-size: 1.05rem;
}
.ut-summary.ut-ok {
  color: #6bcb8f;
}
.ut-summary.ut-fail {
  color: #e07a5f;
}
.ut-results {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
}
.ut-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 0.9rem;
}
.ut-pass {
  background: rgba(107, 203, 143, 0.08);
}
.ut-fail-row {
  background: rgba(224, 122, 95, 0.1);
}
.ut-badge {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.75rem;
}
.ut-pass .ut-badge {
  color: #6bcb8f;
}
.ut-fail-row .ut-badge {
  color: #e07a5f;
}
.voice-chip {
  display: inline-block;
  margin: 0.15rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(91, 159, 212, 0.2);
  border: 1px solid #5b9fd4;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}
.gpu-stage-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.gpu-stage-btn {
  text-align: left;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #3d4f66;
  background: rgba(26, 35, 50, 0.8);
  color: #e8eef7;
  font-size: 0.85rem;
  cursor: pointer;
}
.gpu-stage-btn:hover {
  border-color: #5b9fd4;
}
.gpu-stage-btn.is-active {
  border-color: #6bcb8f;
  background: rgba(107, 203, 143, 0.15);
  color: #e8eef7;
}

/* 疑似コード同期パネル */
.pseudo-panel {
  margin: 1rem 0 1.25rem;
  padding: 0.75rem 1rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #3d4f66;
  background: rgba(18, 24, 32, 0.9);
  max-height: 280px;
  overflow: auto;
}
.pseudo-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8eef7;
}
.pseudo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pseudo-line {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #9aabbf;
}
.pseudo-line.is-active {
  background: rgba(107, 203, 143, 0.14);
  border-left-color: #6bcb8f;
  color: #e8eef7;
}
.pseudo-num {
  flex: 0 0 1.4rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: #5a6a80;
  text-align: right;
}
.pseudo-line.is-active .pseudo-num {
  color: #6bcb8f;
  font-weight: 700;
}
.pseudo-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  background: none;
  color: inherit;
}
.pseudo-caption {
  margin: 0.45rem 0 0.15rem;
  font-size: 0.75rem;
}

/* URL 共有（授業課題リンク） */
.url-share-row {
  margin-top: 0.15rem;
  width: 100%;
}

.url-share-row .btn {
  width: 100%;
  max-width: 100%;
  min-width: 8rem;
  box-sizing: border-box;
  flex: 1 1 auto;
  white-space: normal;
  text-align: center;
}

.url-share-fallback {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.url-share-fallback[hidden] {
  display: none;
}

.mm-params {
  width: 100%;
  margin-top: 0.35rem;
}

.mm-leaves-input,
.mm-depth-select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.mm-leaves-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.fsm-params {
  width: 100%;
  margin-top: 0.4rem;
}

.fsm-param-select,
.fsm-param-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.fsm-param-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.fsm-table td.is-override-cell {
  outline: 2px solid #f2cc8f;
  outline-offset: -2px;
}

.fsm-table tr.is-unreachable-row th,
.fsm-table tr.is-unreachable-row td {
  opacity: 0.45;
}

.fsm-node.is-deadlock circle {
  stroke: #e07a5f !important;
  stroke-width: 4;
}

.ib-timeline {
  display: block;
  width: 100%;
  height: 140px;
  margin-top: 0.5rem;
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sfx-wave {
  display: block;
  width: 100%;
  height: 88px;
  margin-top: 0.45rem;
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.obs-readout {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
}

.gl-fps {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

/* ===== 用語注（js/platform/glossary.js） ===== */
.term {
  text-decoration: underline dotted;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  cursor: help;
  border-radius: 3px;
}

.term:hover,
.term:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.term-tip {
  position: absolute;
  z-index: 1000;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  pointer-events: none;
}

.term-tip-head {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--accent-hover);
}

/* ===== 提出票（js/platform/submission.js） ===== */
.submission-form {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.submission-url {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.submission-url-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.submission-input,
.submission-text {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.submission-text {
  /* 縦並びの枠の中なので、横並び用の flex-basis（14rem）が高さに効かないようにする */
  flex: none;
  width: 100%;
  resize: vertical;
  line-height: 1.6;
}

.submission-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.submission-warn,
.submission-count {
  margin: 0;
  min-height: 1em;
  color: #f2cc8f;
  font-size: 0.8rem;
}

.submission-count {
  color: var(--text-muted);
}

.submission-personal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin: 0.4rem 0;
}

.submission-personal .exercise-line {
  flex-basis: 100%;
  margin: 0;
}

/* 提出票のラベルは説明が長いので折り返す（.controls-label は全ページ共通で折り返さない） */
.submission-section .controls-label {
  white-space: normal;
}

/* ===== 入門コースの詳説ページ（courses/guide-*.html） ===== */
.guide-main {
  max-width: 820px;
}

.guide-main p,
.guide-main li {
  line-height: 1.85;
}

.guide-toc {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-size: 0.9rem;
}

.guide-toc ol {
  margin: 0.25rem 0 0;
  padding-left: 1.4rem;
}

.guide-section {
  margin: 2rem 0;
}

.guide-section h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  border-left: 4px solid var(--accent);
  padding-left: 0.55rem;
}

.guide-figure {
  margin: 1rem 0;
  padding: 0.75rem;
  /* 狭い画面では図の文字が小さくなりすぎないよう、図は 480px より縮めず、枠の中で横にスクロールする */
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0a0e14;
}

.guide-figure svg {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}

.guide-figure figcaption {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.guide-note {
  margin: 1rem 0;
  padding: 0.6rem 0.85rem;
  border-left: 4px solid #f2cc8f;
  border-radius: 0 8px 8px 0;
  background: rgba(242, 204, 143, 0.08);
}

.guide-note strong:first-child {
  color: #f2cc8f;
}

.guide-table-wrap {
  overflow-x: auto;
  margin: 0.8rem 0;
}

.guide-table {
  border-collapse: collapse;
  min-width: 18rem;
  font-size: 0.9rem;
}

.guide-table th,
.guide-table td {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  text-align: center;
}

.guide-table th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 600;
}

.guide-try {
  margin: 2rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}

.guide-try h2 {
  margin-top: 0;
  border: none;
  padding: 0;
}

.guide-check details {
  margin: 0.4rem 0;
}

.guide-check summary {
  cursor: pointer;
}

.guide-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0 0.5rem;
}

.guide-link {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}

.course-guides {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cs-guide-link {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}

/* C# 解説（courses/cs-*.html）: 抜き出したコードは高さ制限なし、C との比較は横並び（狭い画面は縦） */
.cs-main .code-block {
  max-height: none;
  margin: 0.75rem 0;
  font-size: 0.88rem;
}

.cs-main pre[data-sample] {
  max-height: 32rem;
}

.cs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.cs-pair > div {
  min-width: 0;
}

.cs-pair .code-block {
  margin: 0.25rem 0 0;
}

.cs-pair-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .cs-pair {
    grid-template-columns: 1fr;
  }
}

.cs-syntax {
  margin: 1.1rem 0;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 3px solid var(--accent, #5b9fd4);
}

.cs-syntax h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}

/* まとめの表: コードを折り返し、説明の列が細くなりすぎないようにする */
.cs-main .guide-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.cs-main .guide-table td:nth-child(2) {
  min-width: 8.5em;
}

.cs-known {
  font-size: 0.9rem;
  color: var(--text-muted);
}