:root {
  --pink: #ff2f92;
  --bg: #17181b;
  --panel-bg: #1e2024;
  --border: #313337;
  --text: #eef0f5;
  --text-dim: #9297a8;
  --blue: #1E88E5;
  --yellow: #F1C40F;
  --red: #E53935;
  --green: #2E7D32;
  --purple: #8E24AA;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  /* 鍛冶パネル等がリアルタイム再描画で内容の高さを頻繁に変えるため、ブラウザの
     scroll anchoring(画面上部のレイアウトが変わった時に自動でスクロール位置を
     補正する機能)が働くとページ全体が勝手に動いてしまう。無効化して防ぐ。 */
  overflow-anchor: none;
}

.hidden { display: none !important; }

button {
  font-family: inherit;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--pink);
  display: inline-block;
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Cascading selector + preset buttons */
.cascade {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cascade-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.cascade-field select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}

.toolbar-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.toolbar-btn:hover {
  border-color: var(--text-dim);
}

.toolbar-btn.danger {
  color: #ff8a8a;
  border-color: #5a3030;
}

.toolbar-btn.danger:hover {
  background: #3a1c1c;
}

/* Source picker */
.source-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.source-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.source-btn:hover {
  border-color: var(--text-dim);
}

.source-btn.active {
  background: #2a2d33;
  border-color: var(--text-dim);
}

.device-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  max-width: 200px;
}

.source-status {
  font-size: 11px;
  color: var(--text-dim);
}

.source-status.connected {
  color: #35d18a;
}

.source-status.error {
  color: #ff5c6c;
}

.engine-ready-badge {
  font-size: 11px;
  color: var(--text-dim);
}

.engine-ready-badge.ok {
  color: #35d18a;
}

.disconnect-btn {
  background: transparent;
  border: 1px solid #ff5c6c66;
  color: #ff5c6c;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}

/* Rotation bar */
.rotation-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  padding-right: 16px;
}

.rotation-bar {
  flex: 1;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text);
}

.crit-x2-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--red);
  color: white;
}

.rotation-bar span {
  font-weight: bold;
}

/* Engine bar */
.engine-bar {
  padding: 4px 16px;
  font-size: 11px;
  color: var(--text-dim);
  background: #101114;
  border-bottom: 1px solid var(--border);
}


.debug-boxes-toggle {
  margin-left: 10px;
  color: var(--text-dim);
  cursor: pointer;
}

/* テンプレート採取パネル(誤読した桁をその場でラベル付けしてPNG保存する、2026-10-09) */
.harvest-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 340px;
  height: 420px;
  min-width: 240px;
  min-height: 160px;
  /* 右下のつまみでサイズ変更できる(位置はヘッダーのドラッグで移動) */
  resize: both;
  overflow: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.harvest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 6px;
  cursor: move;
  user-select: none;
}

.harvest-pause {
  font-size: 11px;
  font-weight: normal;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}

.harvest-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}

.harvest-resolve {
  margin-bottom: 8px;
}

.harvest-resolve-title {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.harvest-resolve-row {
  font-size: 11px;
  color: var(--text);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.harvest-from {
  color: #35d18a;
}

.harvest-from.warn {
  color: #f5a623;
}

.harvest-dim {
  color: var(--text-dim);
}

.harvest-segs {
  font-size: 10px;
  color: #f5a623;
  line-height: 1.5;
  word-break: break-all;
}

.harvest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.harvest-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  background: #101114;
}

.harvest-item.selected {
  border-color: #4dd9ec;
}

.harvest-thumb {
  display: block;
  image-rendering: pixelated;
  background: #000;
}

.harvest-meta {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.harvest-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 5px;
}

.harvest-picker button {
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text);
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
}

.harvest-picker button:hover {
  border-color: #4dd9ec;
  color: #4dd9ec;
}

/* 職人道具/★/職人Lv(会心率の元になる、裁縫・鍛冶共通の設定行。ネイティブ版のcrit_barと同じく
   craftを問わず常時表示する) */
.crit-config-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}

.crit-config-row select,
.crit-config-row input[type="number"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  width: 70px;
}

/* Main layout: video+recommend row, table+memo row, both centered/fixed-ish */
.main-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.video-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
  width: 100%;
  /* preview-frame(650px基準)+green-line-panel(640px固定)+gapが収まるよう
     1280px→1320pxへ拡張(そうしないと動画側が650pxを下回って余計に縮んでしまう)。 */
  max-width: 1320px;
}

.preview-frame {
  position: relative;
  /* キャプチャ画面左側の黒い余白幅が常に一定かどうか確認が取れなかったため、
     映像そのものをクロップ/ズームする(認識精度に影響しうる)のは避け、代わりに
     動画エリアの割り当て幅を縮めてマス側(.green-line-panel)に回す(ユーザー指定)。 */
  flex: 1 1 650px;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#previewCanvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.panel h2 {
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.recommend-panel {
  flex: 0 0 380px;
  overflow-y: auto;
}

.recommend-cards {
  display: grid;
  gap: 8px;
}

.recommend-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  min-width: 0;
  /* 内容の行数がマスごとに変わる(達成済み=2行、フォールバックの技おすすめ最大6行、等)ため、
     何も固定しないとCSS gridの行サイズがフレームごとにガタつく。想定される最大ケース
     (見出し2行+おすすめ技最大4行=6行)を基準に高さを固定する(2026-08-18、ユーザー指摘)。 */
  min-height: 130px;
}

.recommend-card .cell-label {
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 4px;
}

.recommend-card .cell-values {
  color: var(--text);
  font-size: 11px;
  margin-bottom: 6px;
}

.recommend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.recommend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.recommend-dot.blue { background: var(--blue); }
.recommend-dot.yellow { background: var(--yellow); }
.recommend-dot.red { background: var(--red); }

.recommend-empty {
  color: var(--text-dim);
  font-size: 11px;
}

/* ネイティブ版skill_table_dialog.pyのマス目ジャスト判定カードと同じ内容(現在値/基準値・
   残・候補技/おすすめ技・全体誤差)を表示する行。1マス1カードにつき複数行を積む。 */
.recommend-line {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}

.recommend-card-highlight {
  border: 3px solid var(--yellow);
  padding: 6px 8px;
}

.recommend-card-overshoot {
  border: 3px solid #ff4d4d;
  padding: 6px 8px;
}

.recommend-summary {
  margin: 10px 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* Table + memo row */
.table-memo-row {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
}

.skill-panel {
  /* 表の実際の幅(内容依存)に合わせてコンパクトにし、余った分はMemo欄に譲る
     (2026-08-18、ユーザー指摘: 技名の右側に無駄な空白があった)。 */
  flex: 0 1 auto;
  min-width: 0;
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.panel-header-row h2 { margin: 0; }

.power-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
}

/* 特技一覧は7行(ヘッダー+7データ行=実測26px×8=208px)まで表示し、それ以上は
   縦スクロールで対応する(ユーザー指定)。鍛冶側の.kaji-skill-table-wrapと同じ値。 */
.skill-table-wrap {
  max-height: 208px;
  overflow-y: auto;
}

.skill-table-wrap table {
  width: auto;
}

.skill-table-wrap th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}

.skill-table {
  width: auto;
  border-collapse: collapse;
  font-size: 11px;
}

.skill-table th,
.skill-table td {
  border: 1px solid var(--border);
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
}

.skill-table th { color: var(--text-dim); font-weight: 500; }
.skill-table .skill-name { text-align: left; color: var(--text); white-space: normal; }

.skill-table .current-power-cell {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  color: var(--red);
  font-weight: 600;
}

.memo-panel {
  /* 特技一覧をコンパクトにした分の余白を吸収して広がるようにする(2026-08-18)。
     table-memo-rowはalign-items未指定(デフォルトstretch)なので、特技一覧側を
     7行+スクロールの高さに固定すると、このパネルも自動的に同じ高さになる
     (ユーザー指定: メモ欄の高さを特技一覧に合わせる)。 */
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.memo-display {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
  flex: 1 1 auto;
  min-height: 60px;
  /* メモが長文の場合、ここで頭打ちにしないとこの要素の自然な高さ(=stretch計算に
     使われる仮の高さ)が特技一覧側より大きくなり、パネル全体・行全体が
     引きずられて伸びてしまう(特技一覧側は.skill-table-wrapの208pxで頭打ちだが、
     こちらは何もしないと頭打ちにならないため)。特技一覧の表示分と同じ208pxで揃える。 */
  max-height: 208px;
  overflow-y: auto;
}

/* プリセットパネル(モーダル起動用の非表示要素はcascadeへ統合済み) */
.preset-select { display: none; } /* cascade側のselectを使うため旧IDは非表示化のみ残置 */

/* プリセット登録/編集モーダル */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal h3 { margin: 0 0 14px; font-size: 15px; }

/* 「400℃ごとの本会心レンジ」パネル: モーダルではなく、ドラッグで移動できる非モーダルの
   浮動パネル(常に最前面、背景をブロックしないので裏の現在値入力欄も操作できる)。 */
.floating-panel {
  position: fixed;
  top: 90px;
  right: 24px;
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.floating-panel-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
  flex: 0 0 auto;
}

.floating-panel-titlebar h3 { margin: 0; font-size: 14px; }

.floating-panel-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 4px;
}

.floating-panel-close:hover { color: var(--text); background: var(--border); }

.floating-panel-body {
  padding: 14px;
  overflow-y: auto;
}

.true-crit-note {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.5;
}

.true-crit-temp-group {
  margin: 14px 0 4px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.true-crit-temp-group:first-child { margin-top: 0; }

.true-crit-temp-group-next {
  border-color: #ffa000;
  background: rgba(255, 160, 0, 0.08);
}

.true-crit-temp-header {
  font-weight: 600;
  font-size: 14px;
  margin: 6px 0 4px;
}

.true-crit-temp-group-next .true-crit-temp-header {
  color: #ffa000;
}

.true-crit-technique-header {
  font-size: 12px;
  color: var(--text-dim);
  margin: 6px 0 2px 8px;
}

.true-crit-grid {
  display: grid;
  gap: 2px 12px;
  margin-left: 16px;
}

.true-crit-cell {
  font-family: monospace;
  font-size: 12px;
}

.modal-field {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.modal-field input[type="text"],
.modal-field input[type="password"],
.modal-field select,
.modal-field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.rotation-builder-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.rotation-builder-row select {
  flex: 1 1 auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

.rotation-builder-row button {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.rotation-builder-row button:hover { background: var(--border); }

.rotation-builder-preview {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
}

.rotation-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
}

.rotation-chip-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.rotation-chip-remove:hover { color: var(--text); }

.preset-target-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.preset-target-cell { font-size: 11px; color: var(--text-dim); }

.preset-target-cell input {
  display: block;
  width: 100%;
  margin-top: 3px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.modal-actions button {
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

.login-error {
  color: var(--red);
  font-size: 12px;
  margin: -4px 0 12px;
}

.bug-report-status {
  font-size: 12px;
  margin-top: 6px;
  min-height: 14px;
}

.bug-report-status.error { color: var(--red); }
.bug-report-status.success { color: var(--green); }

.user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.user-name {
  font-size: 12px;
  color: var(--text-dim);
}

.modal-actions button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-weight: 600;
}

@media (max-width: 900px) {
  .video-row, .table-memo-row { flex-direction: column; }
  .recommend-panel, .memo-panel, .green-line-panel { flex: 1 1 auto; }
}

/* 鍛冶UI */
.green-line-panel {
  /* 「現在値」と倍半のA/M目標温度設定を同じ行(横並び)のまま重ならずに収めるため、
     380px→520pxへ拡幅(ユーザー指定)。さらに、動画側の黒い余白分をマス側に回したい
     (ユーザー指定)という要望に対応するため520px→640pxへ再拡幅。preview-frame側の
     flex-basisを縮めた分(800px→650px)を吸収する形。 */
  flex: 0 0 640px;
  overflow-y: auto;
}

.kaji-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.kaji-controls select,
.kaji-controls input[type="number"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  width: 70px;
}

/* 温度認識が一定回数連続で失敗した時、表示中の値が古い疑いがあることを示す */
.kaji-controls input[type="number"].stale {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* マス現在値がバー推定値(OCR未確定)の時、確定値と見分けられるようにする(ネイティブ版のKAJI_VALUE_ESTIMATED_STYLEと同じ) */
.green-line-card .green-line-row input[type="number"].estimated {
  color: #B8860B;
  font-style: italic;
}

.kaji-trait-desc {
  font-size: 11px;
  color: var(--yellow);
  margin-bottom: 10px;
  min-height: 14px;
}

.green-line-cards {
  display: grid;
  /* 1frは既定でminmax(auto,1fr)相当のため、「オーバー: 2倍/2.5倍/3倍」等の項目の
     有無で中身の最小幅が変わると、マスごとの見た目の幅が揃わなくなる。minmax(180px,1fr)で
     現在値+発光チェックボックスが折り返さない最低幅は確保しつつ、それ以上の中身量に
     関わらず等幅に固定する(はみ出しはカード側のmin-width:0+折り返しで吸収)。 */
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px;
}

.green-line-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  min-width: 0;
}

.green-line-card .cell-label {
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 4px;
  /* 会心率をマス名の右側の余白に表示する(ユーザー指定)。 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cell-label-crit {
  color: var(--text);
  white-space: nowrap;
}

.green-line-row {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}


.green-line-row > label:first-child {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 緑ゾーン下限・上限までの残り(現在値の右隣)。行はnowrapなので縮めて省略表示にする。 */
.remaining-range {
  margin-left: 6px;
  margin-right: 4px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.remaining-range.over {
  color: #E53935;
}
.remaining-range.estimated {
  color: #B8860B;
  font-style: italic;
}

.lit-override-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.lit-override-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* マスカードの幅を拡げた(2026-08-27)ことで、「目標温度」ラベル・A/Mボタン・
   温度セレクトを1行に横並びできるようになった(ユーザー指定: A/Mを温度数値の
   左側に置きたい)。以前は幅が足りずA/Mボタンを2段目に折り返していたが、
   その必要が無くなったので単純なinline-flexの1行に戻す。 */
.target-temp-override {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.target-temp-override label {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}

.target-temp-override input[type="radio"] {
  width: auto;
  margin: 0;
}

.target-temp-override select {
  font-size: 11px;
  padding: 0 2px;
}

.target-temp-label {
  white-space: nowrap;
}

.target-temp-radios {
  display: inline-flex;
  gap: 4px;
  grid-column: 2;
  grid-row: 1;
}

.target-temp-radios {
  display: inline-flex;
  justify-content: center;
  gap: 4px;
}

.target-temp-override select:disabled {
  opacity: 0.5;
}

/* 見た目調整で追加した汎用のinput[type="number"]ルール(padding: 4px 8px)と詳細度が
   同じため、後に書かれた汎用側が勝って48px幅の現在値が隠れてしまった(2026-10-19)。
   カード内は幅が厳しいので、.green-line-cardを足して詳細度で確実に勝たせ、
   さらにスピナー(上下矢印)を消して桁の表示領域を確保する。 */
.green-line-card .green-line-row input {
  width: 48px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 4px;
  font-size: 12px;
  flex-shrink: 0;
}

.green-line-card .green-line-row input[type="number"] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

.green-line-card .green-line-row input[type="number"]::-webkit-outer-spin-button,
.green-line-card .green-line-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.green-line-card .cell-values {
  color: var(--text);
  font-size: 11px;
  margin-bottom: 3px;
}

.technique-eval {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  /* 行数(ヘッダー+候補技+オーバー警告等)がマスの状態によって変わるため、
     min-heightを指定しないとカードの縦幅が伸び縮みして見づらい(ユーザー指摘)。
     実測した最大想定ケース(ヘッダー1+候補3+オーバー警告1=5行、約122px)に
     余裕を持たせて固定する。 */
  min-height: 128px;
}


.kaji-skill-panel {
  /* 裁縫のskill-panelと同じく、表の実際の幅に合わせてコンパクトにする(2026-08-18)。 */
  flex: 0 1 auto;
  min-width: 0;
}

/* 特技一覧(裁縫)と同じく7行表示+スクロール(ユーザー指定、.skill-table-wrapと同じ値)。 */
.kaji-skill-table-wrap {
  max-height: 208px;
  overflow-y: auto;
}

.kaji-skill-table-wrap table {
  width: auto;
}

.kaji-skill-table-wrap th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}

.kaji-bounds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.kaji-bounds-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.kaji-bounds-checkbox-label {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 34px;
  flex-shrink: 0;
}

.kaji-bounds-cell input[type="number"] {
  width: 100%;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 5px;
  font-size: 12px;
}

/* 基準値が未登録の商材(Ver8.1新防具の枠など)に出す案内。緑ゾーンのカードの代わりに表示する。 */
.green-line-pending {
  padding: 10px 12px;
  border: 1px dashed #b8860b;
  border-radius: 6px;
  background: rgba(184, 134, 11, 0.08);
  font-size: 12px;
  line-height: 1.6;
}
.green-line-pending small {
  opacity: 0.75;
}

/* ゲージバーから逆算した推定値であることの注記(確定値と区別するため)。 */
.green-line-estimated {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  padding: 3px 6px;
  border-left: 3px solid #b8860b;
  font-size: 11px;
  opacity: 0.85;
}

/* 裁縫の「残り集中力 / ターン数」表示(ローテ行の右に並べる)。 */
.sewing-status {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-left: 12px;
  font-size: 12px;
  opacity: 0.95;
}
.sewing-status > span {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  white-space: nowrap;
}
.sewing-status .stale {
  opacity: 0.5;
}

/* 映像の折りたたみ(8マス商材だと1画面に収まらないため、2026-10-18にユーザー要望で追加)。
   ⚠️ display:none にすると描画が止まり認識まで死ぬので、高さだけを潰して描画は続けさせる。
   canvas自体はレイアウト上存在したまま、はみ出しを隠す。 */
.video-row.video-collapsed .preview-frame {
  max-height: 0;
  overflow: hidden;
  border: none;
}
.video-row.video-collapsed {
  margin: 0;
}

/* 8マス商材でカードが4段積みになると縦に効くため、余白と行間を詰める。
   マスの配置(Aが左上…Hが右下)は崩さず、1枚あたりの高さだけを削る。 */
.recommend-card.compact,
.green-line-card.compact {
  padding: 4px 6px;
  font-size: 10px;
}
.recommend-card.compact {
  min-height: 92px;
}
.recommend-card.compact .cell-label,
.green-line-card.compact .cell-label {
  font-size: 10px;
  margin-bottom: 2px;
}
.recommend-card.compact div,
.green-line-card.compact div {
  line-height: 1.35;
}

/* ============================================================
   見た目の調整(2026-10-19、「殺風景なので整えたい」という要望)
   ⚠️ 認識結果まわり(マスの数値・おすすめ技カード)の文字サイズや色は視認性が最優先なので
   触らない。ここで扱うのは「枠・余白・区切り・操作部品の質感」だけ。
   ============================================================ */

:root {
  --panel-bg-2: #232529;      /* パネルより一段明るい面(入れ子の枠に使う) */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.35);
  --radius: 8px;
}

/* ヘッダー: 上端にアクセント線を入れて、操作列と映像の境目をはっきりさせる */
.topbar {
  background: linear-gradient(180deg, #1c1e22 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.brand-mark {
  box-shadow: 0 0 10px rgba(255, 47, 146, 0.45);
}
.brand-name {
  letter-spacing: 0.04em;
}

/* 設定バー(エンジン・デバッグ・道具条件)を一段沈めて、ヘッダーと区別する */
.engine-bar,
.crit-config-row,
.rotation-row {
  background: #1b1d21;
  border-bottom: 1px solid var(--border);
}

/* パネル類: 面と影を与えて「情報のかたまり」として見えるようにする */
.panel,
.green-line-panel,
.kaji-skill-panel,
.memo-panel,
.recommend-panel,
.skill-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

/* パネルの見出し行 */
.panel-header-row {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* 操作部品の質感をそろえる */
select,
input[type="text"],
input[type="number"],
input[type="password"] {
  background: var(--panel-bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:hover,
input[type="text"]:hover,
input[type="number"]:hover {
  border-color: #4a4d55;
}
select:focus,
input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(255, 47, 146, 0.22);
}

button {
  background: var(--panel-bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
button:hover { background: #2b2e34; border-color: #4a4d55; }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-weight: 600;
}
button.primary:hover { background: #ff4ba2; border-color: #ff4ba2; }
button.danger { color: var(--red); border-color: #5a2b2d; }
button.danger:hover { background: #3a2023; }

/* 映像枠: 未接続時の黒一色が広く見えるので、枠と角丸で締める */
.preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

/* チェックボックス行の間延びを抑える */
.debug-boxes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  transition: background 0.12s ease;
}
.debug-boxes-toggle:hover { background: #22242a; }

/* 映像をたたんだ時のレイアウト(2026-10-19、ユーザー要望
   「映像を畳むとそこに温度表とメモが入るようにしてください」)。
   縦に積んでいた main-area を横並びに切り替え、映像が消えて空いた左側へ
   特技一覧(温度表)とMemoを移す。右側には緑ライン判定が残る。 */
.main-area.collapsed-layout {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 0 auto;
}
.main-area.collapsed-layout .table-memo-row {
  order: -1;                 /* 映像があった左側へ */
  flex: 1 1 560px;
  min-width: 0;
  max-width: none;
  flex-direction: column;    /* 温度表の下にMemoを積む */
}
.main-area.collapsed-layout .video-row {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
}
/* たたんだ映像が場所を取らないようにする(描画は続くので認識には影響しない) */
.main-area.collapsed-layout .preview-frame {
  display: none;
}
/* 横並びになったぶん、表とMemoは高さを抑えて縦の伸びを防ぐ */
.main-area.collapsed-layout .kaji-skill-table-wrap,
.main-area.collapsed-layout .skill-table-wrap {
  max-height: 46vh;
  overflow: auto;
}
.main-area.collapsed-layout .memo-panel {
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  /* 横幅が足りない時は無理に横並びにしない */
  .main-area.collapsed-layout { flex-direction: column; align-items: center; }
  .main-area.collapsed-layout .table-memo-row { order: 0; }
}

/* 特技一覧(鍛冶)の見出し: 倍率を主、技名を従にして列幅を詰める(2026-10-19)。
   映像をたたんで横並びにすると表の幅が足りず横スクロールになっていたため。 */
#kajiSkillTable th {
  white-space: nowrap;
  line-height: 1.25;
}
#kajiSkillTable th .tech-alias {
  display: block;
  font-size: 9px;
  font-weight: 400;
  opacity: 0.65;
}
/* セルの余白も少しだけ詰める(数値の読みやすさは保つ) */
#kajiSkillTable th,
#kajiSkillTable td {
  padding: 3px 4px;
}

/* 特技一覧(鍛冶)のセル: 会心時の値を2行目に小さく出して列幅を詰める(2026-10-19)。 */
#kajiSkillTable td .crit-range {
  display: block;
  font-size: 9px;
  opacity: 0.6;
}
#kajiSkillTable td .crit-range::before { content: "("; }
#kajiSkillTable td .crit-range::after { content: ")"; }

/* 仕上げ: 会心値を2行にしてもなお27pxはみ出していたため、数値セルだけ1px小さくし
   左右の余白を1pxずつ詰める(2026-10-19、実測で調整)。見出しと温度列は据え置き。 */
#kajiSkillTable td {
  font-size: 10px;
  padding: 3px 3px;
}
#kajiSkillTable td:first-child {
  font-size: 11px;   /* 温度列は読み取り頻度が高いので小さくしない */
}

/* 表を余白いっぱいに広げる(2026-10-19、「空白が多いので可能な限り広げて」)。
   会心値を2行にしたことで幅が349pxまで縮み、604pxの枠に対して余白が目立っていた。
   ⚠️ 広げるのは映像をたたんで横並びにした時だけに限定する。通常レイアウトでは
   特技一覧とMemoが横に並んでおり、表を100%にすると表が全幅を取ってMemo欄が潰れる
   (2026-10-19、ユーザー指摘で判明)。通常時は従来どおり内容ぶんの幅に留める。 */
.main-area.collapsed-layout .kaji-skill-table-wrap table#kajiSkillTable {
  width: 100%;
  table-layout: fixed;
}
#kajiSkillTable td {
  font-size: 11px;
  padding: 4px 4px;
}
#kajiSkillTable td .crit-range {
  font-size: 10px;
}
#kajiSkillTable th .tech-alias {
  font-size: 10px;
}
/* 温度列だけは内容ぶんに留めて、残りを数値列へ回す(横並びの時のみ) */
.main-area.collapsed-layout #kajiSkillTable th:first-child,
.main-area.collapsed-layout #kajiSkillTable td:first-child {
  width: 56px;
}

/* ============================================================
   はちみつ配色(2026-10-31、design_demo.htmlで決定。淡い黄色寄りの明るい配色)
   黒背景から明るい暖色へ。黄色・水色の文字は明るい地で読めないので濃い色へ置き換え、
   暗い地に合わせて直書きしていた色(ボタンのhover、帯の背景、状態の色など)もここで上書きする。
   ============================================================ */
:root {
  --bg: #fbf4dd;
  --panel-bg: #fffdf3;
  --panel-bg-2: #fffaea;
  --border: #ecdcae;
  --text: #2c241c;
  --text-dim: #6e5f4f;
  --blue: #1565C0;
  --yellow: #9A6400;
  --red: #C62828;
  --green: #2E7D32;
  --purple: #7B1FA2;
  --c-orange: #C2410C;
  --chip-bg: #f6ebc9;
  --shadow-soft: 0 1px 3px rgba(120, 90, 20, 0.12);
  --shadow-panel: 0 2px 10px rgba(120, 90, 20, 0.10);
  /* 緑ライン判定のゲージ */
  --track: #f2e6c2;
  --track-tech: #f7efd6;
  --fill: #8f836a;
  --fill-inside: #43A047;
  --zone-line: #2E7D32;
  --zone-bg: rgba(46, 125, 50, 0.22);
  --zone-bg-tech: rgba(46, 125, 50, 0.12);
  --band-normal: #4A8FD6;
  --band-true: #2EAD4B;
  --band-fake: #E8890B;
  --band-target: #7B4FC4;
  --num-normal: #1565C0;
  --num-true: #2E7D32;
  --num-fake: #A84E00;
  --badge-true-bg: #d9f0d8;
  --badge-true-fg: #1e6b2c;
  --badge-fake-bg: #fbe2c4;
  --badge-fake-fg: #934400;
  --badge-over-bg: #fadcdc;
  --badge-over-fg: #a31b1b;
  --estimated: #8F5F00;
  /* 面・操作部品・状態の色(配色の切り替えで差し替える) */
  --card-bg: #fffaea;
  --input-strong: #fffdf9;
  --topbar-top: #fffaf0;
  --bar-bg: #f8edcc;
  --hover-bg: #f6ebc9;
  --hover-border: #cfb877;
  --danger-border: #e6b4b4;
  --danger-hover-bg: #fbe3e3;
  --ok: #2E7D32;
  --disconnect-border: rgba(198, 40, 40, 0.4);
  --warn-text: #B35C00;
  --accent-cyan: #00838F;
  --soft-border: rgba(60, 40, 10, 0.25);
  --next-accent: #C77700;
  --next-bg: rgba(255, 160, 0, 0.12);
  --backdrop: rgba(60, 45, 10, 0.35);
  --state-below: #C9A227;
  --lit: #B8860B;
}

.topbar { background: linear-gradient(180deg, var(--topbar-top) 0%, var(--bg) 100%); }
.engine-bar,
.crit-config-row,
.rotation-row { background: var(--bar-bg); }
button:hover { background: var(--hover-bg); border-color: var(--hover-border); }
select:hover,
input[type="text"]:hover,
input[type="number"]:hover { border-color: var(--hover-border); }
.toolbar-btn.danger,
button.danger { color: var(--red); border-color: var(--danger-border); }
.toolbar-btn.danger:hover,
button.danger:hover { background: var(--danger-hover-bg); }
.source-btn.active { background: var(--hover-bg); }
.source-status.connected,
.engine-ready-badge.ok,
.harvest-from { color: var(--ok); }
.source-status.error { color: var(--red); }
.disconnect-btn { border-color: var(--disconnect-border); color: var(--red); }
.harvest-from.warn,
.harvest-segs { color: var(--warn-text); }
.harvest-item { background: var(--panel-bg-2); }
.harvest-item.selected,
.harvest-picker button:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.debug-boxes-toggle:hover { background: var(--hover-bg); }
.sewing-status > span { border-color: var(--soft-border); }
.true-crit-temp-group-next { border-color: var(--next-accent); background: var(--next-bg); }
.true-crit-temp-group-next .true-crit-temp-header { color: var(--next-accent); }
.modal-backdrop { background: var(--backdrop); }

/* 上部バーを2段に(1段目=職人・部位・名称とプリセット操作、2段目=映像の接続とユーザー操作) */
.topbar-break { flex-basis: 100%; height: 0; }

/* 表示の切り替え(数値/バー) */
.kaji-view-mode { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-dim); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button { border: none; border-radius: 0; background: transparent; color: var(--text-dim); padding: 3px 10px; font-size: 12px; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: var(--chip-bg); color: var(--text); font-weight: 600; }

/* ============================================================
   緑ライン判定のカード(2026-10-31、design_demo.htmlのデザインを移植)
   ============================================================ */
.green-line-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 0;
  padding: 7px 10px 8px;
}
.green-line-card.below { border-left-color: var(--state-below); }
.green-line-card.inside { border-left-color: var(--green); }
.green-line-card.over { border-left-color: var(--red); }

.green-line-card .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.green-line-card .letter { font-size: 16px; font-weight: 700; }
.green-line-card.lit .letter { color: var(--lit); }
.green-line-card .zone { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.green-line-card .chips { margin-left: auto; display: flex; gap: 4px; }
.green-line-card .chip { font-size: 11px; background: var(--chip-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.green-line-card .chip.hot { color: var(--c-orange); font-weight: 600; }

.green-line-card .green-line-row { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.green-line-card .green-line-row input {
  width: 64px;
  font-size: 20px;
  font-weight: 600;
  padding: 1px 6px;
  background: var(--input-strong);
}
.green-line-card .green-line-row input[type="number"].estimated { color: var(--estimated); font-style: italic; }
.green-line-card .remain { font-size: 14px; font-weight: 600; white-space: nowrap; }
.green-line-card.below .remain { color: var(--yellow); }
.green-line-card.inside .remain { color: var(--green); }
.green-line-card.over .remain { color: var(--red); }
.green-line-card .remain.estimated { color: var(--estimated); font-style: italic; }
.green-line-card .card-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0; }
.green-line-card .card-controls .lit-override-label,
.green-line-card .card-controls .target-temp-override { margin-left: 0; }

/* バー表示: 技名はバーの左(54px)、確率はバーの右(60px)の共通余白に置き、全バーの縦の位置を揃える */
.green-line-card .gauge { margin-top: 6px; }
.green-line-card .gauge .g-bar,
.green-line-card .gauge .g-scale { margin-left: 54px; margin-right: 60px; }
.green-line-card .g-row { margin-top: 4px; }
.green-line-card .g-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 11px; line-height: 15px; }
.green-line-card .g-head .name { font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.green-line-card .g-head .nums { margin-left: auto; color: var(--text-dim); white-space: nowrap; }
.green-line-card .g-head .nums b { font-weight: 600; }
.green-line-card .g-head .nums .n { color: var(--num-normal); }
.green-line-card .g-head .nums .c.true_crit { color: var(--num-true); }
.green-line-card .g-head .nums .c.fake_crit { color: var(--num-fake); }
.green-line-card .badge { font-size: 10px; padding: 0 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.green-line-card .badge.true_crit { background: var(--badge-true-bg); color: var(--badge-true-fg); }
.green-line-card .badge.fake_crit { background: var(--badge-fake-bg); color: var(--badge-fake-fg); }
.green-line-card .badge.overshoot { background: var(--badge-over-bg); color: var(--badge-over-fg); }
.green-line-card .g-bar { position: relative; height: 14px; }
.green-line-card .g-track { position: absolute; inset: 0; background: var(--track); border-radius: 3px; overflow: hidden; }
.green-line-card .g-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fill); }
.green-line-card .g-fill.inside { background: var(--fill-inside); }
.green-line-card .g-fill.over { background: var(--red); }
.green-line-card .g-zone { position: absolute; top: -2px; bottom: -2px; background: var(--zone-bg);
  border-left: 2px solid var(--zone-line); border-right: 2px solid var(--zone-line); }
.green-line-card .g-tech .g-track { background: var(--track-tech); }
.green-line-card .g-tech .g-zone { background: var(--zone-bg-tech); }
.green-line-card .g-band { position: absolute; border-radius: 2px; }
.green-line-card .g-band.normal { top: 1px; height: 5px; background: var(--band-normal); }
.green-line-card .g-band.normal.over { background: var(--red); }
.green-line-card .g-band.crit { top: 7px; height: 6px; }
.green-line-card .g-band.crit.true_crit { background: var(--band-true); color: var(--band-true); }
.green-line-card .g-band.crit.fake_crit { background: var(--band-fake); color: var(--band-fake); }
.green-line-card .g-band.crit.clip::after { content: "▶"; position: absolute; right: -7px; top: -3px; font-size: 8px; line-height: 10px; }
.green-line-card .g-band.target { background: var(--band-target); opacity: 0.85; }
.green-line-card .g-pin { position: absolute; left: 3px; top: 0; font-size: 10px; line-height: 14px; color: var(--text-dim); }
.green-line-card .g-lane-label { position: absolute; left: -54px; width: 50px; text-align: right; font-size: 10px;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.green-line-card .g-lane-prob { position: absolute; left: calc(100% + 4px); width: 56px; font-size: 10px; font-weight: 600;
  color: var(--num-normal); white-space: nowrap; overflow: hidden; }
.green-line-card .g-band.target + .g-lane-label + .g-lane-prob { color: var(--num-true); }
.green-line-card .g-lane-prob .over { color: var(--red); }
.green-line-card .g-group-gap { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--border); }
.green-line-card .g-group-title { margin-left: 54px; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.green-line-card .g-adjust { margin-top: 8px; padding-top: 4px; border-top: 1px dashed var(--border); }
.green-line-card .g-adjust-title { margin-left: 54px; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--band-target); }
.green-line-card .g-now-line { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); z-index: 2; }
.green-line-card .g-notes { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 54px; font-size: 10px; }
.green-line-card .g-notes .muted { color: var(--text-dim); }
.green-line-card .g-scale { position: relative; height: 13px; margin-top: 2px; font-size: 10px; color: var(--text-dim); }
.green-line-card .g-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.green-line-card .gauge-note,
.green-line-card .text-status { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.6; }
.green-line-card .gauge-note .muted,
.green-line-card .text-status .muted { color: var(--text-dim); }
.green-line-card .text-status .ts-title { color: var(--band-target); font-weight: 600; }
.green-line-card .text-status .ts-sub { color: var(--text-dim); margin-right: 4px; }
/* 6マス以上の商材は従来どおり少し詰める */
.green-line-card.compact { padding: 5px 8px 6px; }
.green-line-card.compact .green-line-row input { font-size: 17px; width: 58px; }

/* 8マス商材まで1画面に収める(2026-10-31、ユーザー要望)。カード1枚あたりの縦を詰める */
.green-line-cards { gap: 6px; }
.green-line-card { padding: 4px 8px 6px; }
.green-line-card .card-head { gap: 2px 8px; }
.green-line-card .letter { font-size: 15px; line-height: 18px; }
.green-line-card .green-line-row { align-items: center; gap: 8px; margin: 2px 0 0; flex-wrap: wrap; }
.green-line-card .green-line-row input { font-size: 17px; width: 58px; padding: 0 5px; line-height: 22px; }
.green-line-card .remain { font-size: 13px; }
/* 発光・目標温度は現在値と同じ行の右端へ */
.green-line-card .green-line-row .card-controls { margin: 0 0 0 auto; gap: 2px 8px; }
.green-line-card .gauge { margin-top: 4px; }
.green-line-card .g-row { margin-top: 3px; }
.green-line-card .g-group-title,
.green-line-card .g-adjust-title { font-size: 10px; line-height: 13px; margin-bottom: 1px; }
.green-line-card .g-adjust { margin-top: 4px; padding-top: 2px; }
.green-line-card .g-notes { margin-top: 2px; }
.green-line-card .g-lane-prob .true_crit { color: var(--num-true); }
.green-line-card .g-lane-prob .fake_crit { color: var(--num-fake); }
.green-line-card .gauge-note,
.green-line-card .text-status { margin-top: 4px; padding-top: 3px; line-height: 1.5; }
/* まとまり(本会心/レンジ調整/収める技)の見出しはやめ、点線で区切る */
.green-line-card .gauge > .g-row { margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--border); }
.green-line-card .g-adjust { margin-top: 3px; padding-top: 3px; }
.green-line-card .g-lane-prob .t { color: var(--band-target); }
/* さらに詰める(8マス商材の集中変化でも1画面に収める) */
.green-line-card { padding: 3px 8px 4px; }
.green-line-card .letter { font-size: 14px; line-height: 16px; }
.green-line-card .chip { line-height: 15px; }
.green-line-card .gauge { margin-top: 3px; }
.green-line-card .gauge > .g-row,
.green-line-card .g-adjust { margin-top: 2px; padding-top: 2px; }
.green-line-card .g-bar { height: 12px; }
.green-line-card .g-lane-label,
.green-line-card .g-lane-prob { font-size: 9.5px; }
.green-line-card .target-temp-override { gap: 3px; }
.green-line-card .target-temp-override select { padding: 0 1px; }
.green-line-card .target-temp-label:empty { display: none; }
.green-line-card .card-controls select { width: 64px; font-size: 11px; padding: 0 2px; height: 18px; }
.green-line-card .card-controls { font-size: 11px; }
/* 現在値の入力欄の幅・文字の大きさは数値の欄だけ。ラジオボタン(A/M)・チェックボックス(発光)には
   かけない(58pxに広がって現在値の行が2行に折り返していた) */
.green-line-card .green-line-row input[type="radio"],
.green-line-card .green-line-row input[type="checkbox"] {
  width: auto;
  font-size: inherit;
  padding: 0;
  line-height: normal;
  background: none;
}
/* 残りが3桁(「残り 100〜112」)でも現在値の行が折り返さないよう、間隔と文字を少し詰める */
.green-line-card .green-line-row { gap: 6px; }
.green-line-card .remain { font-size: 12px; }
.green-line-card .target-temp-override { gap: 2px; }
.green-line-card .target-temp-radios { gap: 3px; }
/* カードの高さは段の数で決めた固定値(--kaji-card-h、kajiPanel.jsのKAJI_CARD_HEIGHT_BY_ROWS)。
   中身で伸び縮みさせない。はみ出す時だけカードの中をスクロールする */
.green-line-card {
  height: var(--kaji-card-h, auto);
  overflow-y: auto;
  scrollbar-width: thin;
}
.green-line-card .gauge > .g-row,
.green-line-card .g-adjust { margin-top: 1px; padding-top: 2px; }
.green-line-card { padding-bottom: 2px; }
.green-line-card { padding-bottom: 0; }
/* 6マス以上用の古い指定(.compact、下の余白6px)より優先させる */
.green-line-card.compact { padding: 3px 8px 0; }

/* ============================================================
   配色の切り替え(2026-11-02、上部バーの「配色」で選ぶ。既定ははちみつ=上の:root)
   ダーク系(現行・明るめグレー・紺・焦げ茶・グレージュ)は共通の文字・状態色を使い、面の色だけ変える。
   ライト系(ライト・生成り・アイボリー・ピーチ)ははちみつと同じ文字・状態色で、面の色だけ変える。
   ============================================================ */
:root[data-theme="dark"], :root[data-theme="slate"], :root[data-theme="navy"],
:root[data-theme="brown"], :root[data-theme="greige"] {
  --blue: #1E88E5; --yellow: #F1C40F; --red: #E53935; --green: #43A047; --purple: #AB47BC; --c-orange: #FF9A3C;
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.35);
  --fill: #c3c8d6; --fill-inside: #7fd483;
  --zone-line: #43A047; --zone-bg: rgba(67, 160, 71, 0.30); --zone-bg-tech: rgba(67, 160, 71, 0.14);
  --band-normal: #6FA8DC; --band-true: #4CC764; --band-fake: #FFB74D; --band-target: #B58CF2;
  --num-normal: #9cc5ec; --num-true: #7fdc8e; --num-fake: #ffc46b;
  --badge-true-bg: #1f4d2a; --badge-true-fg: #8be39a; --badge-fake-bg: #5a3c12; --badge-fake-fg: #ffc46b;
  --badge-over-bg: #5a1f1f; --badge-over-fg: #ff9c9c; --estimated: #D4A72C;
  --danger-border: #5a3030; --danger-hover-bg: #3a1c1c; --ok: #35d18a; --disconnect-border: #ff5c6c66;
  --warn-text: #f5a623; --accent-cyan: #4dd9ec; --soft-border: rgba(255, 255, 255, 0.25);
  --next-accent: #ffa000; --next-bg: rgba(255, 160, 0, 0.08); --backdrop: rgba(0, 0, 0, 0.55);
  --state-below: #F1C40F; --lit: #F1C40F;
}
:root[data-theme="dark"] {
  --bg: #17181b; --panel-bg: #1e2024; --panel-bg-2: #232529; --card-bg: #202227; --input-strong: #17181b;
  --border: #313337; --hover-bg: #2b2e34; --hover-border: #4a4d55; --text: #eef0f5; --text-dim: #9297a8;
  --chip-bg: #2a2c31; --track: #2a2c31; --track-tech: #25272c; --topbar-top: #1c1e22; --bar-bg: #1b1d21;
}
:root[data-theme="slate"] {
  --bg: #2a2e36; --panel-bg: #333842; --panel-bg-2: #3a3f4a; --card-bg: #3a3f4a; --input-strong: #2a2e36;
  --border: #4c5260; --hover-bg: #464c58; --hover-border: #687082; --text: #f3f5f9; --text-dim: #b4bac8;
  --chip-bg: #464c58; --track: #4a505d; --track-tech: #434955; --topbar-top: #30343d; --bar-bg: #2f333b;
}
:root[data-theme="navy"] {
  --bg: #1b2540; --panel-bg: #223051; --panel-bg-2: #283a63; --card-bg: #283a63; --input-strong: #1b2540;
  --border: #3c5288; --hover-bg: #33477a; --hover-border: #5670b0; --text: #f2f5ff; --text-dim: #aebbdc;
  --chip-bg: #33477a; --track: #344a7c; --track-tech: #2f4372; --topbar-top: #202c4a; --bar-bg: #1f2a47;
}
:root[data-theme="brown"] {
  --bg: #2a221c; --panel-bg: #342a22; --panel-bg-2: #3b3027; --card-bg: #3b3027; --input-strong: #2a221c;
  --border: #574737; --hover-bg: #4a3d31; --hover-border: #7a6550; --text: #f7efe5; --text-dim: #c4b39f;
  --chip-bg: #4a3d31; --track: #4a3d31; --track-tech: #43372c; --topbar-top: #30271f; --bar-bg: #2f261f;
  --yellow: #F5C842; --band-fake: #FFB347; --num-fake: #FFC266;
}
:root[data-theme="greige"] {
  --bg: #3b352f; --panel-bg: #463f38; --panel-bg-2: #4d453d; --card-bg: #4d453d; --input-strong: #3b352f;
  --border: #665b50; --hover-bg: #5a5047; --hover-border: #8a7c6d; --text: #faf5ef; --text-dim: #d0c5b8;
  --chip-bg: #5a5047; --track: #5a5047; --track-tech: #534a41; --topbar-top: #413a33; --bar-bg: #403933;
  --yellow: #F7CF4E; --band-fake: #FFB95C; --num-fake: #FFC877;
}
:root[data-theme="light"] {
  --bg: #eceff4; --panel-bg: #ffffff; --panel-bg-2: #f7f8fb; --card-bg: #f7f8fb; --input-strong: #ffffff;
  --border: #d3d8e1; --hover-bg: #e4e8ef; --hover-border: #a9b1c0; --text: #1d2129; --text-dim: #5b6373;
  --chip-bg: #e4e8ef; --track: #dfe3ea; --track-tech: #e8ebf0; --topbar-top: #f7f9fc; --bar-bg: #e4e8ef; --fill: #8792a8;
}
:root[data-theme="cream"] {
  --bg: #f1e9dc; --panel-bg: #fffaf2; --panel-bg-2: #fbf4e8; --card-bg: #fbf4e8; --input-strong: #fffdf9;
  --border: #dccdb6; --hover-bg: #ede2d1; --hover-border: #b9a587;
  --chip-bg: #ede2d1; --track: #e6dac6; --track-tech: #eee5d6; --topbar-top: #faf4ea; --bar-bg: #ebe0cd; --fill: #8f8270;
}
:root[data-theme="ivory"] {
  --bg: #faf6ee; --panel-bg: #ffffff; --panel-bg-2: #fffcf6; --card-bg: #fffcf6; --input-strong: #ffffff;
  --border: #e8dfd0; --hover-bg: #f3ece0; --hover-border: #c9baa2;
  --chip-bg: #f3ece0; --track: #efe7da; --track-tech: #f5efe5; --topbar-top: #fffdf8; --bar-bg: #f3ecdf;
}
:root[data-theme="peach"] {
  --bg: #fcefe8; --panel-bg: #fffaf7; --panel-bg-2: #fff5f0; --card-bg: #fff5f0; --input-strong: #fffdfb;
  --border: #f0d5c7; --hover-bg: #f8e3d8; --hover-border: #d9ac96;
  --chip-bg: #f8e3d8; --track: #f5e1d6; --track-tech: #f9ebe3; --topbar-top: #fff6f1; --bar-bg: #f8e3d8; --fill: #9a8276;
}
.theme-select { font-size: 12px; padding: 3px 6px; }

/* 最適な技の強調(2026-11-02、ユーザー指定)。段に薄い色を敷き、技名と確率を太字にする */
.green-line-card .g-best-lane { position: absolute; left: -54px; right: -60px; border-radius: 3px;
  background: color-mix(in srgb, var(--yellow) 22%, transparent); pointer-events: none; }
.green-line-card .g-lane-label.best { color: var(--text); font-weight: 700; }
.green-line-card .g-lane-prob .best { font-weight: 800; text-decoration: underline; text-underline-offset: 1px; }
.green-line-card .text-status .ts-best { font-weight: 700; background: color-mix(in srgb, var(--yellow) 22%, transparent);
  border-radius: 3px; padding: 0 2px; }

/* 段の文字は左の余白に「技名 確率」でまとめる(2026-11-02、ユーザー指定)。右の余白はやめ、
   その分を左へ回す。1段11pxで文字が重ならないようにする */
.green-line-card .gauge .g-bar,
.green-line-card .gauge .g-scale { margin-left: 92px; margin-right: 4px; }
.green-line-card .g-lane-label { left: -92px; width: 88px; font-size: 10px; color: var(--text-dim); }
.green-line-card .g-lane-label .n { color: var(--text); }
.green-line-card .g-lane-label .n.ok { color: var(--num-true); font-weight: 700; }
.green-line-card .g-lane-label .n.target { color: var(--band-target); }
.green-line-card .g-lane-label .p { font-weight: 600; color: var(--num-normal); }
.green-line-card .g-lane-label .true_crit { color: var(--num-true); }
.green-line-card .g-lane-label .fake_crit { color: var(--num-fake); }
.green-line-card .g-lane-label .t { color: var(--band-target); }
.green-line-card .g-lane-label .over { color: var(--red); }
.green-line-card .g-lane-label.best .n,
.green-line-card .g-lane-label.best .p { font-weight: 800; }
.green-line-card .g-best-lane { left: -92px; right: -4px; }
.green-line-card .g-notes,
.green-line-card .g-group-title,
.green-line-card .g-adjust-title { margin-left: 92px; }

/* 会心の判定(critJudge.js、2026-11-03): 本会心=緑、偽会心=橙、判定不可=灰 */
.green-line-card .crit-judge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 3px; white-space: nowrap; cursor: help; }
.green-line-card .crit-judge.true { color: var(--num-true); background: color-mix(in srgb, var(--num-true) 16%, transparent); }
.green-line-card .crit-judge.fake { color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 16%, transparent); }
.green-line-card .crit-judge.unknown { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); }
.green-line-card .crit-judge.weak { opacity: 0.75; font-weight: 600; }
.green-line-card .crit-judge.none { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); font-weight: 600; }


/* 必殺の自動検出の表示と、鍛冶ログの結果ボタン(2026-11-03) */
.hissatsu-status { color: var(--yellow); font-weight: 600; }
.hissatsu-status.active { color: #ff7043; }
.craft-result { display: inline-flex; align-items: center; gap: 4px; }
.craft-result .toolbar-btn { padding: 2px 8px; font-size: 11px; }
.craft-result .toolbar-btn.done { border-color: var(--green); color: var(--green); }

/* 鍛冶ログの出どころ欄(2026-11-04) */
.craft-log-source input { width: 110px; padding: 2px 6px; font-size: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }

/* 映像の倍率(配信の拡大された映像を、ふだんの位置に戻して読む。2026-11-04) */
.capture-zoom input { width: 64px; padding: 2px 6px; font-size: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.capture-zoom .toolbar-btn { padding: 2px 8px; font-size: 11px; }
.capture-zoom-auto { display: inline-flex; align-items: center; gap: 3px; }

/* ネットに公開した版では検証・データ集め用のUIを隠す(index.html の先頭で html に public-build を付ける。2026-11-04) */
.public-build .dev-only { display: none !important; }

/* 次の一手の案内(kajiNextMove.js、2026-11-07) */
.next-move { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--next-accent); border-left: 4px solid var(--next-accent); border-radius: 8px; background: var(--next-bg); font-size: 12px; line-height: 1.45; }
.next-move .nm-head { font-weight: 700; color: var(--text); }
.next-move .nm-head b { color: var(--next-accent); font-size: 15px; margin-left: 4px; }
.next-move .nm-tag { margin-left: 8px; font-size: 11px; color: var(--next-accent); font-weight: 600; }
.next-move .nm-tag.hot { color: var(--c-orange); }
.next-move .nm-why { color: var(--text); margin-top: 2px; }
.next-move .nm-foot { color: var(--text-dim); font-size: 10px; margin-top: 2px; }
.next-move .nm-note { color: var(--warn-text); }
.green-line-card.next-tg { box-shadow: 0 0 0 2px var(--next-accent), 0 0 10px var(--next-bg); }

/* 打った記録の一覧と手直し(kajiRecordPanel.js、2026-11-07) */
.record-panel { width: 100%; max-width: 1320px; padding: 10px 12px; }
.record-panel .rp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; margin-bottom: 6px; }
.record-panel .rp-head b { font-size: 14px; }
.record-panel .rp-meta { color: var(--text-dim); }
.record-panel .rp-sp { flex: 1; }
.record-panel .rp-live { color: var(--c-orange); font-weight: 700; margin-left: 4px; }
.record-panel .rp-res, .record-panel .rp-tag { margin-left: 6px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border); font-size: 11px; color: var(--text); }
.record-panel .rp-res.ok { border-color: var(--green); color: var(--num-true); background: var(--badge-true-bg); }
.record-panel .rp-res.ng { border-color: var(--red); color: var(--badge-over-fg); background: var(--badge-over-bg); }
.record-panel .rp-send { font-size: 11px; color: var(--text-dim); }
.record-panel .rp-send.ok { color: var(--ok); font-weight: 600; }
.record-panel .rp-send.ng { color: var(--warn-text); font-weight: 600; }
.record-panel .rp-btn { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.record-panel .rp-btn:disabled { opacity: 0.35; cursor: default; }
.record-panel .rp-btn.primary { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.record-panel .rp-btn.danger { border-color: var(--danger-border); color: var(--red); }
.record-panel .rp-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.record-panel .rp-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.record-panel .rp-table th { position: sticky; top: 0; background: var(--panel-bg); color: var(--text-dim); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.record-panel .rp-table th small { display: block; font-weight: 400; font-size: 9px; }
.record-panel .rp-table td { padding: 2px 6px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.record-panel .rp-table td:nth-child(3) { text-align: left; }
.record-panel .rp-v.below { color: var(--text-dim); }
.record-panel .rp-v.in { color: var(--num-true); font-weight: 700; }
.record-panel .rp-v.over { color: var(--red); font-weight: 700; }
.record-panel .rp-d { margin-left: 3px; font-size: 9px; color: var(--text-dim); font-weight: 400; }
.record-panel tr.rp-hs td { background: var(--badge-fake-bg); }
.record-panel tr.rp-edited td:first-child::after { content: "✎"; margin-left: 2px; font-size: 9px; color: var(--next-accent); }
.record-panel tr.rp-edit td { background: var(--hover-bg); vertical-align: top; }
.record-panel tr.rp-edit input[type="number"] { width: 56px; font-size: 12px; }
.record-panel tr.rp-edit select { font-size: 11px; max-width: 130px; }
.record-panel .rp-chk { display: block; font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.record-panel .rp-ops { display: flex; flex-direction: column; gap: 3px; }
.record-panel .rp-legend { margin-top: 4px; font-size: 10px; color: var(--text-dim); }
.record-panel .rp-legend .in { color: var(--num-true); font-weight: 700; } .record-panel .rp-legend .over { color: var(--red); font-weight: 700; }
.record-panel .rp-dim { color: var(--text-dim); }

/* ============================================================
   上部のタブ(2026-11-07): 🌡 温度表 / 💰 原価と利益 / 📝 Memo
   押すと中身がほかの欄の上に重なって開く(ゲーム画面の位置は動かさない)。📌 で最前面の小窓へ
   ============================================================ */
.top-tabs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 6px 12px 4px; position: relative; z-index: 40; }
.top-tabs [hidden] { display: none !important; }
.tab-slot { display: flex; flex-direction: column; gap: 4px; }
.tab-holder { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; position: relative; }
.tab-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 16px; border: 2px solid var(--next-accent); border-radius: 8px; background: var(--panel-bg); color: var(--next-accent); cursor: pointer; }
.tab-btn:hover { background: var(--next-bg); border-color: var(--next-accent); }
.tab-btn.open { background: var(--next-accent); color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tab-panel { position: absolute; top: 100%; left: 0; z-index: 50; margin-top: -2px; background: var(--panel-bg); border: 2px solid var(--next-accent); border-radius: 0 10px 10px 10px; padding: 8px 10px; box-shadow: var(--shadow-panel); }
.tab-panel.cp { width: min(660px, calc(100vw - 32px)); }
.tab-panel.sk-body { width: max-content; max-width: calc(100vw - 32px); }
.tab-panel.sk-body .kaji-skill-table-wrap { max-height: 360px; position: relative; }
.tab-panel.sk-body #kajiSkillTable th { position: sticky; top: 0; z-index: 2; background: var(--panel-bg); }
.tab-panel.memo-body { width: min(480px, calc(100vw - 32px)); }
.tab-away { border: 2px dashed var(--next-accent); border-radius: 10px; padding: 4px 10px; font-size: 12px; color: var(--next-accent); display: flex; align-items: center; gap: 10px; }
.sk-tools { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.sk-tools b { color: var(--text); }
.sk-tools .pin { margin-left: auto; }
/* 鍛冶の時は2段目(特技一覧・Memo の段)を出さない。裁縫の時は特技一覧だけ残る */
body.kaji-mode .table-memo-row { display: none; }
/* 最前面の小窓の中 */
body.pip-body { margin: 0; padding: 6px; background: var(--bg); overflow-y: auto; }
body.pip-body > * + * { margin-top: 8px; }
.pip-body .tab-holder .tab-panel { position: static; width: auto; }

/* 小さなボタン・入力(原価と利益・温度表で共通) */
.top-tabs .mini, .pip-body .mini { font-size: 11px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
.top-tabs .pin, .pip-body .pin { font-size: 11px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--next-accent); background: var(--panel-bg); color: var(--next-accent); cursor: pointer; font-weight: 700; }
.top-tabs .pin:hover, .pip-body .pin:hover { background: var(--next-accent); color: #fff; }
.cp .num-in { width: 88px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--input-strong); color: var(--text); }
.cp .num-in.short { width: 48px; }
.cp .num-in.edited { border-color: var(--next-accent); background: var(--next-bg); }
.cp .seg3 { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cp .seg3 button { font-size: 11px; padding: 1px 6px; border: 0; border-radius: 0; background: var(--chip-bg); color: var(--text); cursor: pointer; }
.cp .seg3 button + button { border-left: 1px solid var(--border); }
.cp .seg3 button.on { background: var(--next-accent); color: #fff; font-weight: 700; }
.cp .seg3 button:disabled { opacity: .35; cursor: default; }

/* 原価と利益の中身 */
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.cp-head h2 { font-size: 14px; margin: 0; color: var(--text); }
.cp-head .src { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.cp .kuu-link { font-weight: 700; color: var(--next-accent); border-color: var(--next-accent); }
.cp .kuu-link:hover { background: var(--next-accent); color: #fff; }
.cp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cp-sum > div { background: var(--panel-bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.cp-sum .k { font-size: 11px; color: var(--text-dim); }
.cp-sum .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-sum .s { font-size: 11px; color: var(--text-dim); }
.cp .plus { color: var(--ok); } .cp .minus { color: var(--red); } .cp .dim { color: var(--text-dim); }
.cp h3 { font-size: 12px; color: var(--text-dim); margin: 10px 0 4px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.cp th { text-align: left; font-weight: 600; color: var(--text-dim); font-size: 11px; padding: 2px 4px; border-bottom: 1px solid var(--border); }
.cp td { padding: 3px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cp td.r, .cp th.r { text-align: right; }
.cp td.name { white-space: normal; }
.cp .thin { font-size: 10px; color: var(--warn-text); margin-left: 4px; }
.cp .mat-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.cp .mat-link:hover { color: var(--next-accent); }
.cp tr.total td { font-weight: 700; border-bottom: 0; }
.cp .hammer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.cp .rate-src { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.cp .be-line { font-size: 12px; margin-top: 8px; line-height: 1.7; }
.cp .be { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cp .be-link { font-weight: 700; color: var(--next-accent); border-color: var(--next-accent); }
.cp-note { font-size: 11px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.6; }
.cp .howto { margin-top: 6px; background: var(--panel-bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 11px; line-height: 1.7; }
.cp .howto ul { margin: 0; padding-left: 16px; }
.fetch-box { margin: 0 0 8px; padding: 6px 10px; border: 1px dashed var(--next-accent); border-radius: 8px; background: var(--next-bg); font-size: 12px; line-height: 1.7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fetch-box > button { margin-left: auto; }
.fetch-box .bm-row { flex-basis: 100%; font-size: 11px; color: var(--text-dim); }
.fetch-box .bm { display: inline-block; padding: 2px 10px; border-radius: 6px; background: var(--next-accent); color: #fff; font-weight: 700; text-decoration: none; cursor: grab; }
.memo-body .memo-display { font-size: 13px; line-height: 1.7; white-space: pre-wrap; }

/* ============================================================
   配色「さくらミルク」(2026-11-07、既定。鍛冶チャレンジの見た目に合わせる)
   ピンク〜ラベンダーの淡い背景・白い丸い角のカード・丸ゴシック・ピンクのボタン。
   ⚠️マスの数値・おすすめ技・ゲージの色は見やすさ優先なので、はちみつと同じ値のまま(ここでは変えない)
   ============================================================ */
:root[data-theme="challenge"] {
  --bg: #fff8f2; --panel-bg: #ffffff; --panel-bg-2: #fff7fa; --card-bg: #fffafc; --input-strong: #ffffff;
  --border: #f7dbe5; --text: #5b4a53; --text-dim: #a08d97;
  --chip-bg: #fff0f5; --hover-bg: #ffeef4; --hover-border: #ffc0d4;
  --topbar-top: #ffffff; --bar-bg: rgba(255, 255, 255, 0.7);
  --track: #f6e6ec; --track-tech: #fbf0f4;
  --next-accent: #ff6f9f; --next-bg: rgba(255, 111, 159, 0.10);
  --shadow-soft: 0 2px 0 #f6dfe7; --shadow-panel: 0 4px 14px rgba(240, 160, 190, 0.20);
  --backdrop: rgba(120, 70, 95, 0.30); --soft-border: rgba(160, 110, 130, 0.25);
}
:root[data-theme="challenge"] body {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; font-weight: 500;
  background: radial-gradient(circle at 15% 10%, #ffe3ee 0, transparent 40%), radial-gradient(circle at 90% 30%, #efe7ff 0, transparent 38%),
    radial-gradient(circle at 20% 90%, #e2f7ef 0, transparent 40%), #fff8f2;
  background-attachment: fixed;
}
:root[data-theme="challenge"] button, :root[data-theme="challenge"] select, :root[data-theme="challenge"] input, :root[data-theme="challenge"] textarea { font-family: inherit; }
:root[data-theme="challenge"] .topbar { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
:root[data-theme="challenge"] .brand-name { color: #ff6f9f; font-weight: 900; letter-spacing: .05em; }
:root[data-theme="challenge"] .panel { border-radius: 18px; border-color: transparent; box-shadow: var(--shadow-panel); }
:root[data-theme="challenge"] .panel h2 { color: #c4708f; }
:root[data-theme="challenge"] .toolbar-btn,
:root[data-theme="challenge"] .top-tabs .tab-btn { border-radius: 999px; box-shadow: 0 2px 0 #f6dfe7; }
:root[data-theme="challenge"] .toolbar-btn { border-color: var(--border); background: #fff; }
:root[data-theme="challenge"] select, :root[data-theme="challenge"] input[type="text"], :root[data-theme="challenge"] input[type="number"] { border-radius: 10px; border-color: var(--border); }
:root[data-theme="challenge"] .tab-btn { border-color: #ffb3cb; background: #fff; color: #e2578a; }
:root[data-theme="challenge"] .tab-btn.open { background: linear-gradient(180deg, #ffa7c4, #ff6f9f); border-color: #ff7fab; color: #fff; border-radius: 16px 16px 0 0; box-shadow: none; }
:root[data-theme="challenge"] .tab-panel { border-color: #ffb3cb; border-radius: 0 18px 18px 18px; }
:root[data-theme="challenge"] .cp-sum > div { border-radius: 14px; border-color: transparent; background: linear-gradient(135deg, #fff, #fff1f6); }
:root[data-theme="challenge"] .cp .seg3 button.on, :root[data-theme="challenge"] .fetch-box .bm { background: linear-gradient(180deg, #ffa7c4, #ff6f9f); }
:root[data-theme="challenge"] .green-line-card { border-radius: 14px; }
:root[data-theme="challenge"] .modal { border-radius: 20px; }

/* ============================================================
   映像の列(2026-11-07): 映像の枠は実際の画面の縦横比だけにして黒い余白を出さず、その下に「打った記録」を出す。
   ⚠️canvas は display:none にしない(描画が止まると認識も止まる)
   ============================================================ */
.crit-config-row[hidden] { display: none !important; }
.video-col { flex: 1 1 650px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.video-col .preview-frame { flex: none; width: 100%; aspect-ratio: auto; display: block; }
.video-col #previewCanvas { width: 100%; height: auto; max-width: 100%; max-height: none; }
/* 打った記録は手数が増えても伸ばさない(左の列の高さ=右の緑ライン判定の高さのまま)。増えた分は欄の中でスクロール */
.video-col .record-panel { width: 100%; max-width: none; flex: 1 1 0; height: 0; min-height: 140px; overflow: auto; }
.record-panel .rp-approve { border-color: var(--next-accent); color: var(--next-accent); font-weight: 700; }
.record-panel .rp-approve:hover { background: var(--next-accent); color: #fff; }

/* ============================================================
   映像のテレビ枠(2026-11-07 ユーザー指定「可愛いテレビの枠」)。飾りだけ(canvas は今まで通り描かれる)。
   色は配色に合わせる(さくらミルクはピンク、ほかの配色は欄の色)
   ============================================================ */
.tv {
  --tv-body: var(--panel-bg-2); --tv-body-2: var(--panel-bg); --tv-edge: var(--border); --tv-dot: var(--text-dim); --tv-lamp: var(--ok);
  position: relative; margin-top: 18px; padding: 12px 12px 0; border-radius: 26px;
  background: linear-gradient(180deg, var(--tv-body-2), var(--tv-body));
  border: 3px solid var(--tv-edge); box-shadow: var(--shadow-panel), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.tv .preview-frame { border-radius: 16px; border: 3px solid var(--tv-edge); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
/* アンテナ(2本) */
.tv-antenna { position: absolute; left: 50%; top: -18px; width: 0; height: 0; }
.tv-antenna::before, .tv-antenna::after {
  content: ""; position: absolute; bottom: 0; width: 4px; height: 26px; border-radius: 4px; background: var(--tv-edge); transform-origin: bottom center;
}
.tv-antenna::before { left: -14px; transform: rotate(-28deg); box-shadow: 0 -2px 0 0 var(--tv-edge); }
.tv-antenna::after { left: 10px; transform: rotate(28deg); }
.tv::before { /* アンテナの根元の丸 */
  content: ""; position: absolute; left: 50%; top: -9px; width: 26px; height: 12px; margin-left: -13px; border-radius: 13px 13px 4px 4px; background: var(--tv-edge);
}
/* 下の段: スピーカーの穴・ランプ・つまみ */
.tv-bottom { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 6px; }
.tv-speaker { flex: 1; height: 10px; background: radial-gradient(circle, var(--tv-dot) 1.6px, transparent 2px) 0 50% / 9px 10px repeat-x; opacity: .45; }
.tv-lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-lamp); box-shadow: 0 0 6px var(--tv-lamp); }
.tv-knob { width: 16px; height: 16px; border-radius: 50%; background: var(--tv-body-2); border: 3px solid var(--tv-edge); }
/* 映像をたたんだ時は枠ごと潰す(描画は続く) */
.video-row.video-collapsed .tv { max-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; box-shadow: none; }
.video-row.video-collapsed .tv::before, .video-row.video-collapsed .tv-antenna { display: none; }
:root[data-theme="challenge"] .tv { --tv-body: #ffd6e4; --tv-body-2: #ffeef4; --tv-edge: #ff9fbf; --tv-dot: #e2578a; --tv-lamp: #7fd6bd; }
:root[data-theme="challenge"] .tv-knob { background: #fff; }
:root[data-theme="dark"] .tv, :root[data-theme="navy"] .tv, :root[data-theme="brown"] .tv { box-shadow: var(--shadow-panel); }

/* 画面から外した欄(2026-11-07 ユーザー指定: 必殺あり・残り集中力・結果・400℃ごとの本会心レンジ)。
   自動の検出や読み取りが値を使うので、要素は消さずに隠すだけ */
.ui-hidden, #btnTrueCritDialog { display: none !important; }

/* マスの中でスクロールしない(2026-11-07 ユーザー指定)。入りきらない時は kajiPanel.js の fitGreenCards がカード全体を縮小して収める */
.green-line-card { overflow: hidden !important; }

/* 窓が狭い時はページ全体を縮小する(kajiTopTabs.js の applyFitScale)。縮小中は幅で縦積みに切り替える指定を効かせない */
html.fit-scale .video-row { flex-direction: row !important; }
html.fit-scale .green-line-panel { flex: 0 0 640px !important; }
html.fit-scale body { overflow-x: hidden; }
/* シミュの★3率(原価と利益の欄) */
.cp .sim-row { margin: 0 0 6px; }
.cp .sim-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); font-size: 12px; }
.cp .sim-chip b { font-size: 16px; color: var(--next-accent); }
/* 成功率ランキングのタブ */
.tab-panel.rank-body { width: min(760px, calc(100vw - 32px)); }
.rank-body .rk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; margin-bottom: 6px; }
.rank-body .dim { color: var(--text-dim); font-size: 11px; }
.rank-body .rk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.rank-body .seg3 { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.rank-body .seg3 button { font-size: 11px; padding: 2px 10px; border: 0; border-radius: 0; background: var(--chip-bg); color: var(--text); cursor: pointer; }
.rank-body .seg3 button + button { border-left: 1px solid var(--border); }
.rank-body .seg3 button.on { background: var(--next-accent); color: #fff; font-weight: 700; }
.rank-body .rk-q { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-strong); color: var(--text); width: 180px; }
.rank-body .rk-wrap { max-height: 420px; overflow-y: auto; }
.rank-body table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.rank-body th { position: sticky; top: 0; background: var(--panel-bg); text-align: left; font-weight: 600; color: var(--text-dim); font-size: 11px; padding: 3px 6px; border-bottom: 1px solid var(--border); z-index: 1; }
.rank-body td { padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rank-body .r { text-align: right; }
.rank-body td.name { font-weight: 700; white-space: normal; }
.rank-body tr.rk-cur td { background: var(--next-bg); }
.rank-body .rk-bar { display: inline-block; width: 60px; height: 6px; margin-right: 6px; vertical-align: middle; border-radius: 3px; background: linear-gradient(90deg, var(--next-accent) var(--w), var(--track) var(--w)); }

/* ============================================================
   映像を入る範囲で大きく(2026-11-08 ユーザー「画面は入る範囲で大きくできますか？」)。
   以前は映像の列+右の欄の合計を1320pxまでにしていたので、広い画面でも映像が小さかった。上限を外し、右の欄(640px)以外の幅を映像に回す。
   映像の高さが画面の縦に収まらない時は、縦に収まる幅まで抑える(16:9、上下の欄の分 260px を引く)
   ============================================================ */
.video-row { max-width: none; }
.video-col { flex: 1 1 650px; max-width: calc((100vh - 260px) * 16 / 9 + 30px); }
/* テレビの枠のアンテナを外し、その分上に詰める(2026-11-08 ユーザー「この上の部分を無くしてその分上にあげよう」) */
.tv { margin-top: 0; }
.tv-antenna, .tv::before { display: none; }

/* ============================================================
   鍛冶の2列の配置(2026-11-08 ユーザー「上の帯は高さを取りすぎ。左半分に納めて、マスのところで縦をフルに使えないか」)。
   画面が広い時(1000px以上)だけ、ページ全体を左右2列にする:
     左の列 = 上の帯(職人・名称・キャプチャ・設定)→ タブ → 映像 → 打った記録(残りの高さで中だけスクロール)
     右の列 = 次の一手と緑ライン判定を、画面の上から下までいっぱいに(カードは残りの高さを段の数で均等に分ける)
   main と映像の段は display: contents にして、中の欄を直接ページの格子に並べる(要素の id・JS はそのまま)
   ============================================================ */
@media (min-width: 0px) {
  body.kaji-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 44vw);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    height: 100vh; overflow: hidden; column-gap: 12px;
  }
  body.kaji-mode > .topbar { grid-column: 1; grid-row: 1; }
  body.kaji-mode > .rotation-row { grid-column: 1; grid-row: 2; }
  body.kaji-mode > .engine-bar { grid-column: 1; grid-row: 3; }
  body.kaji-mode > .crit-config-row { grid-column: 1; grid-row: 3; }
  body.kaji-mode > .top-tabs { grid-column: 1; grid-row: 4; }
  body.kaji-mode > .main-area, body.kaji-mode .video-row { display: contents; }
  body.kaji-mode #videoCol { grid-column: 1; grid-row: 5; min-height: 0; padding: 4px 12px 12px; overflow: hidden; }
  /* 映像は左の列の幅いっぱい。ただし打った記録の欄(最低140px)が残る高さまで */
  body.kaji-mode #videoCol .tv { flex: none; }
  body.kaji-mode #videoCol #previewCanvas { max-height: calc(100vh - 360px); object-fit: contain; }
  body.kaji-mode #recommendPanel { display: none; }
  body.kaji-mode #greenLinePanel {
    grid-column: 2; grid-row: 1 / -1; height: 100vh; box-sizing: border-box; margin: 0;
    display: flex; flex-direction: column; overflow-y: auto; flex: none; border-radius: 0;
  }
  body.kaji-mode #greenLinePanel .green-line-cards { flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr; align-content: stretch; }
}
/* 2列の時は左上の帯を詰める(段の区切り・右寄せの余白をやめて、入るだけ1行に並べる) */
@media (min-width: 0px) {
  body.kaji-mode .topbar { gap: 6px 10px; padding: 6px 12px; }
  body.kaji-mode .topbar-break { display: none; }
  body.kaji-mode .topbar .source-picker, body.kaji-mode .topbar .user-area { margin-left: 0; }
  body.kaji-mode .cascade { gap: 6px; }
  body.kaji-mode .engine-bar { padding: 3px 12px; gap: 4px 12px; }
  body.kaji-mode .top-tabs { padding: 4px 12px 2px; }
}
/* 打った記録の欄は表示しない(2026-11-08 ユーザー「打った記録は表示しなくてもいい」)。記録の保存・送信は今まで通り(kajiCraftLog.js)。
   空いた高さは映像に回す(2列の時は、上の帯・タブの分だけ引いた高さまで映像を大きく) */
body.kaji-mode #kajiRecordSection { display: none !important; }
@media (min-width: 0px) {
  body.kaji-mode #videoCol #previewCanvas { max-height: calc(100vh - 300px); }
}
/* カードの1行目に「記号・緑の範囲・値の欄・残り・発光」を並べる(2026-11-08 ユーザー「2行になっているのを1行に納めて」)。
   頭・値の行・操作の行を横に並べ、それ以外(数値表示・バー表示)は次の行から横幅いっぱい */
body.kaji-mode #greenLineCards .green-line-card { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; align-content: flex-start; }
body.kaji-mode #greenLineCards .green-line-card > * { flex: 1 1 100%; min-width: 0; }
body.kaji-mode #greenLineCards .green-line-card > .card-head,
body.kaji-mode #greenLineCards .green-line-card > .green-line-row,
body.kaji-mode #greenLineCards .green-line-card > .card-controls { flex: 0 1 auto; margin: 0; }
body.kaji-mode #greenLineCards .green-line-card > .green-line-row { display: inline-flex; align-items: center; gap: 6px; }
body.kaji-mode #greenLineCards .green-line-card > .card-controls { margin-left: auto; }
/* 会心率のまとめ表示(必殺技発動中の右) */
.crit-rates { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.crit-rates b { color: var(--text); font-weight: 700; }
.crit-rates .cr-k { font-weight: 700; color: var(--text); }
.crit-rates .cr-hot { color: var(--lit, #e8a400); font-weight: 700; margin-left: 6px; }
/* マスの欄(右の列)を20%広く(2026-11-08 ユーザー「マスの幅を20%程度大きく」): 44vw・最低520px → 53vw・最低620px */
@media (min-width: 0px) {
  body.kaji-mode { grid-template-columns: minmax(0, 1fr) minmax(620px, 53vw); }
  /* カードの高さは kajiPanel.js の fitGreenCards が決める(段の数で均等+中身の倍率) */
  body.kaji-mode #greenLinePanel .green-line-cards { flex: 0 0 auto; grid-auto-rows: auto; }
}
/* 窓が狭くてページ全体を縮めている時(kajiTopTabs.js applyFitScale、--page-zoom)も、2列の配置が画面の高さいっぱいになるよう割り戻す */
@media (min-width: 0px) {
  body.kaji-mode { height: calc(100vh / var(--page-zoom, 1)); }
  body.kaji-mode #greenLinePanel { height: calc(100vh / var(--page-zoom, 1)); }
  body.kaji-mode #videoCol #previewCanvas { max-height: calc(100vh / var(--page-zoom, 1) - 300px); }
}
/* バー表示の段の見分け(2026-11-08 ユーザー「ぱっと見で会心レンジなのか、レンジ調整なのか、収めなのかわからない」)。
   段の左に色の帯、右上に小さな見出し(高さは増やさない): 本会心=緑、レンジ調整=紫、収める=青 */
.green-line-card .gauge > .g-row[data-sec] { position: relative; border-left: 4px solid var(--sec-c); padding-left: 4px; margin-left: -8px; background: var(--sec-bg); border-radius: 0 4px 4px 0; }
.green-line-card .gauge > .g-row[data-sec]::after {
  content: attr(data-sec); position: absolute; right: 2px; top: 1px; font-size: 9px; line-height: 12px; font-weight: 700;
  padding: 0 5px; border-radius: 6px; color: #fff; background: var(--sec-c); pointer-events: none; opacity: .92;
}
.green-line-card .gauge > .g-crit-group { --sec-c: #2e9e5b; --sec-bg: rgba(46, 158, 91, .07); }
.green-line-card .gauge > .g-adjust { --sec-c: #8a5cd6; --sec-bg: rgba(138, 92, 214, .08); }
.green-line-card .gauge > .g-settle { --sec-c: #3a7bd5; --sec-bg: rgba(58, 123, 213, .08); }
/* 左の列は映像の幅ちょうどにして、余りは全部マスの欄へ(2026-11-08 ユーザー「この辺りまでマスを広げられますか」)。
   映像の高さ = 画面の高さ − 上の帯・タブの分(300px)、幅 = その16:9 + 枠の分 */
@media (min-width: 0px) {
  body.kaji-mode { grid-template-columns: minmax(400px, calc((100vh / var(--page-zoom, 1) - 300px) * 16 / 9 + 30px)) minmax(620px, 1fr); }
}
/* マスの欄を広く(2026-11-08 ユーザー「マスを広げて欲しい」): 映像を小さくしてでも、右の欄を画面の幅の約60%に */
@media (min-width: 0px) {
  body.kaji-mode { grid-template-columns: minmax(360px, 1fr) minmax(620px, 60vw); }
}
/* 段の見出しは左端の列へ(2026-11-08 ユーザー「本会心、レンジ調整、収めるは左側に」)。
   全部の行のバーを28px右へずらして(緑の範囲の縦線はそろったまま)、空いた左端に見出しを置く */
.green-line-card .gauge .g-bar, .green-line-card .gauge .g-scale { margin-left: 120px; }
.green-line-card .gauge > .g-row[data-sec] { margin-left: 0; padding-left: 0; border-left-width: 0; background: var(--sec-bg); border-radius: 4px; }
.green-line-card .gauge > .g-row[data-sec]::after {
  left: 1px; right: auto; top: 50%; transform: translateY(-50%); width: 26px; text-align: center;
  font-size: 9px; line-height: 10px; padding: 2px 0; border-radius: 4px; white-space: pre; opacity: 1;
}
/* 段の文字(技名・確率)は左寄せ(2026-11-08 ユーザー「一番左の文字の位置で左寄せで表示」)。見出しの列(28px)のすぐ右から始める */
.green-line-card .g-lane-label { text-align: left; }
.green-line-card .g-lane-label { left: -88px; width: 84px; }
/* レンジ調整: 目標(紫)の名前はバーの上(紫の帯の左端)に重ねる。寄せる技の文字は3文字分右へ */
.green-line-card .g-target-label { position: absolute; z-index: 3; font-size: 10px; font-weight: 700; color: var(--band-target); white-space: nowrap;
  padding: 0 3px; background: rgba(255, 255, 255, .85); border-radius: 3px; transform: translateX(2px); pointer-events: none; }
.green-line-card .g-lane-label.indent { padding-left: 3em; box-sizing: border-box; }
.green-line-card .g-target-label { transform: translateX(-50%); }
/* 目標の名前は帯の真上の行に(重ねないので下地は不要) */
.green-line-card .g-target-label { background: none; padding: 0; transform: translateX(-50%); }
/* 目標の名前の札(紫の帯に重ねる): 紫の下地・白い太字・白い縁で帯の上でも読める */
.green-line-card .g-target-label.pill { background: var(--band-target); color: #fff; font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 6px;
  box-shadow: 0 0 0 1.5px #fff; transform: translateX(-50%); z-index: 4; }
.green-line-card .g-target-label.pill.side-right { transform: translateX(5px); }
.green-line-card .g-target-label.pill.side-left { transform: translateX(calc(-100% - 5px)); }
/* 目標の札は小さめに(2026-11-08 ユーザー「2〜3倍、等倍は文字サイズ小さくしてもOK」) */
.green-line-card .g-target-label.pill { font-size: 8px; padding: 0 4px; border-radius: 5px; }
/* 窓が狭くて2列の配置がはみ出す時は、横に動かせるスクロールバーを出す(2026-11-08 ユーザー「横移動できるようにスクローラーをつける」)。
   縦はこれまで通り画面の高さに収める */
@media (min-width: 0px) {
  body.kaji-mode { overflow-x: auto; overflow-y: hidden; }
}
.engine-bar label[hidden] { display: none !important; }
html.fit-scale body.kaji-mode { overflow-x: auto; }
/* 鍛冶の時は窓の幅に関係なく2列(2026-11-08 ユーザー「マスは一番重要。画面を縮小した時に見えづらくなって欲しくない」):
   右のマスの欄は最低620pxを保ち、左の列(映像・上の帯)は最低300pxまで縮む。入らない時は横のスクロールバー */
body.kaji-mode { grid-template-columns: minmax(300px, 1fr) minmax(620px, 60vw); }
/* カードの1行目は必ず1行(2026-11-08 ユーザー「1行目が1行になったり2行になったりする」)。記号・基準値と発光は縮めず、
   値の行(値の欄・残り・会心の判定)だけ縮めて、入らない文字は … で省略する */
body.kaji-mode #greenLineCards .green-line-card > .card-head { flex: 0 0 auto; white-space: nowrap; }
body.kaji-mode #greenLineCards .green-line-card > .card-controls { flex: 0 0 auto; white-space: nowrap; }
body.kaji-mode #greenLineCards .green-line-card > .green-line-row { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; }
body.kaji-mode #greenLineCards .green-line-card > .green-line-row > input { flex: 0 0 auto; }
body.kaji-mode #greenLineCards .green-line-card > .green-line-row > .remain,
body.kaji-mode #greenLineCards .green-line-card > .green-line-row > .crit-judge { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
/* 値の行の中も折り返さない(値の欄・残り・発光を横一列。発光は右端へ) */
body.kaji-mode #greenLineCards .green-line-card .green-line-row { flex-wrap: nowrap !important; }
body.kaji-mode #greenLineCards .green-line-card .green-line-row > * { flex-shrink: 1; min-width: 0; white-space: nowrap; }
body.kaji-mode #greenLineCards .green-line-card .green-line-row > input[type="number"] { flex-shrink: 0; }
body.kaji-mode #greenLineCards .green-line-card .green-line-row .card-controls,
body.kaji-mode #greenLineCards .green-line-card .green-line-row .lit-override-label { margin-left: auto; flex-shrink: 0; }
/* 1行目を詰めて「残り」の文字が見えるように(値の欄を細く、間の余白を小さく) */
body.kaji-mode #greenLineCards .green-line-card .green-line-row { gap: 6px; }
body.kaji-mode #greenLineCards .green-line-card .green-line-row input[type="number"] { width: 50px; font-size: 18px; padding-left: 4px; padding-right: 4px; }
body.kaji-mode #greenLineCards .green-line-card { column-gap: 6px; }
body.kaji-mode #greenLineCards .green-line-card .card-head { gap: 4px 6px; }
/* 発光のチェックは詰めて右端に。基準値の文字は少し小さく(残りの文字を優先して見せる) */
body.kaji-mode #greenLineCards .green-line-card .card-controls { display: inline-flex; align-items: center; gap: 2px; width: auto; flex: 0 0 auto; margin-left: auto; padding: 0; }
body.kaji-mode #greenLineCards .green-line-card .lit-override-label { display: inline-flex; align-items: center; gap: 2px; width: auto; margin: 0; padding: 0; font-size: 11px; white-space: nowrap; }
body.kaji-mode #greenLineCards .green-line-card .lit-override-label input { margin: 0; }
body.kaji-mode #greenLineCards .green-line-card .card-head .zone { font-size: 10px; }
body.kaji-mode #greenLineCards .green-line-card .green-line-row > .remain { flex: 1 1 auto; }

body.kaji-mode #greenLineCards .green-line-card .lit-override-label input[type="checkbox"] { width: auto; height: auto; flex: 0 0 auto; }
/* マスの欄は画面の60%を基本に、狭くなっても画面の半分までしか縮めない(2026-11-08 ユーザー「マス側の縮小は画面の半分までに」)。
   残りは左の列(映像・上の帯) */
body.kaji-mode { grid-template-columns: minmax(0, 1fr) minmax(50vw, 60vw); }
/* 「残り」の欄はカードの空きいっぱいに伸ばさない(伸ばすと中身の幅の測り方が狂い、倍率を下げ続けていた) */
body.kaji-mode #greenLineCards .green-line-card .green-line-row > .remain { flex: 0 1 auto; }
/* カードは最低の幅を持ち(1行目とバー表示が入る幅)、マスの欄より広い時はマスの欄を横にスクロール
   (2026-11-08 ユーザー「文字が小さくなっている。横スクロールが出ていない」) */
body.kaji-mode #greenLineCards { grid-template-columns: repeat(2, minmax(300px, 1fr)) !important; }
body.kaji-mode #greenLinePanel { overflow-x: auto; }
body.kaji-mode #greenLineCards .green-line-card { overflow: visible; }

/* 横のスクロールはページ全体で(2026-11-08 ユーザー「横にスクロールしたらマスが消える。左側の映像は見えなくてもOK、マスは見えるように」)。
   マスの欄は中で横スクロールさせず、カード2枚(最低300pxずつ)が必ず入る幅(660px)以上を保つ。窓が狭い時は左の列(最低360px)がページごと
   左へはみ出し、開いた時・窓の大きさを変えた時は右端(マスの欄)に寄せる(kajiTopTabs.js の applyFitScale) */
body.kaji-mode { grid-template-columns: minmax(360px, 1fr) minmax(max(50vw, 660px), 60vw); }
body.kaji-mode #greenLinePanel { overflow-x: hidden; }