/* 393宇宙将棋 — スタイル（light / dark 両対応。見た目は錬成将棋・フレネミー将棋に合わせる） */
:root {
  --bg: #eef0f6;
  --bg-2: #e2e5f0;
  --surface: #ffffff;
  --border: #cfd4e3;
  --text: #1d2233;
  --text-2: #5d6479;
  --accent: #5b4bc4;
  --accent-soft: rgba(91, 75, 196, 0.12);
  --danger: #c0392b;
  --board: #e9c37a;
  --board-line: #8a6a33;
  --piece: #f8e7bf;
  --piece-edge: #b08a4a;
  --piece-text: #1f1a12;
  --piece-w: #cfe0f7;
  --piece-w-edge: #6f8fbf;
  --promoted: #c8261d;
  --sel: rgba(40, 120, 220, 0.42);
  --mv: rgba(40, 120, 220, 0.6);
  --cp: rgba(214, 38, 29, 0.75);
  --last: rgba(255, 196, 0, 0.45);
  --arrow: #1fae55; /* 振り返りの実際の手の緑の矢印 */
  --arrow-text: #17803f;
  --amber-text: #9a6a00;
  --check: #d6261d;
  --path: rgba(130, 60, 220, 0.85);
  --jump: rgba(0, 150, 105, 0.8);
  --try-star: rgba(120, 80, 230, 0.45);
  --wood-x1: #f3d898;
  --wood-x2: #e5c179;
  --wood-x3: #d3a95c;
  --atk-from: rgba(220, 30, 60, 0.4);
  --atk-line: rgba(214, 30, 60, 0.9);
  --atk-fill: rgba(255, 60, 80, 0.18);
  --p0: #b5562b;
  --p1: #3468aa;
  --shadow: 0 8px 24px rgba(30, 30, 70, 0.12);
  --radius: 14px;
  --font: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', system-ui, sans-serif;
  --font-piece: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1020;
    --bg-2: #141832;
    --surface: #1b2038;
    --border: #2e3556;
    --text: #e8e8f0;
    --text-2: #a3a8c0;
    --accent: #9d8cff;
    --accent-soft: rgba(157, 140, 255, 0.16);
    --danger: #ff6b5e;
    --board: #b98d4c;
    --board-line: #5a4220;
    --piece: #f3dfb2;
    --piece-edge: #8d6b35;
    --piece-w: #bcd3f2;
    --piece-w-edge: #5a7cb0;
    --sel: rgba(80, 160, 255, 0.5);
    --mv: rgba(90, 170, 255, 0.75);
    --last: rgba(255, 200, 40, 0.4);
    --arrow: #3ddc7a;
    --arrow-text: #5fe892;
    --amber-text: #f0b93a;
    --path: rgba(190, 140, 255, 0.95);
    --jump: rgba(70, 225, 165, 0.85);
    --try-star: rgba(205, 180, 255, 0.55);
    --wood-x1: #c9a464;
    --wood-x2: #b38d4d;
    --wood-x3: #997537;
    --atk-from: rgba(255, 70, 90, 0.45);
    --atk-line: rgba(255, 90, 110, 0.95);
    --atk-fill: rgba(255, 80, 100, 0.22);
    --p0: #f08a54;
    --p1: #6ea0eb;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.6;
}
[hidden] { display: none !important; }

button {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, transform 0.06s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); }
button.big { width: 100%; padding: 14px; font-size: 1.1rem; margin-top: 18px; }

/* ===== 設定画面 ===== */
.screen { max-width: 1100px; margin: 0 auto; padding: 12px 16px 32px; }
.setup { max-width: 640px; }
.setup-head { text-align: center; padding: 8px 0 4px; }
.topbar { display: flex; justify-content: flex-start; margin-bottom: 6px; }
.back-link { display: inline-block; color: var(--text-2); font-size: 0.8rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.setup-head h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: 0.04em; }
.subtitle { margin: 0; font-weight: 700; color: var(--accent); font-size: 0.95rem; letter-spacing: 0.08em; }
.lede { color: var(--text-2); margin: 4px 0 12px; font-size: 0.92rem; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.panel h2 { font-size: 0.85rem; color: var(--text-2); margin: 14px 0 6px; font-weight: 600; }
.panel h2:first-child { margin-top: 0; }
.hint { font-size: 0.8rem; color: var(--text-2); margin: 8px 0 0; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.seg button { padding: 8px 6px; font-size: 0.92rem; white-space: nowrap; }
/* 性格は 4 つ（2×2）、強さは 4 つ（1〜3 手読み・深読みを 1 列に 4 つ）。390px でもはみ出さない・折り返し可 */
#style-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#depth-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 560px) { #style-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#style-pick button, #depth-pick button { white-space: normal; line-height: 1.3; min-width: 0; }
/* 選択中だけを塗る（濃い地＋白い字）。ホバーは枠の色だけ薄く変え、キーボードのフォーカスは細い外枠。
   塗りのトランジションは切って、切り替えの途中で 2 つ選ばれて見えないようにする */
.seg button { transition: none; }
.seg button:hover:not(:disabled):not([aria-checked='true']) { border-color: var(--text-2); }
.seg button[aria-checked='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }
.seg button:focus { outline: none; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules summary { cursor: pointer; font-weight: 700; }
.rules-body { font-size: 0.88rem; color: var(--text-2); }
.rules-body ul { padding-left: 1.2em; margin: 8px 0 0; }
.rules-body b { color: var(--text); }
.trailer-player { margin-top: 8px; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.trailer-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.trailer-link { margin: 6px 0 0; font-size: 0.8rem; text-align: right; }
.trailer-link a { color: var(--text-2); }

/* ===== 対局画面 ===== */
.game-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.game-head .back-link { flex: 0 1 auto; }
.status { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.turn { font-weight: 700; }
.turn .mark-b { color: var(--p0); }
.turn .mark-w { color: var(--p1); }
.check { background: var(--check); color: #fff; font-weight: 700; padding: 1px 10px; border-radius: 999px; font-size: 0.85rem; }
.thinking { color: var(--accent); font-size: 0.85rem; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.view-pick { grid-template-columns: repeat(2, 72px); }

.game-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .game-body { grid-template-columns: minmax(0, 1fr); } }
.play-area { min-width: 0; }

/* 持ち駒 */
.hand {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 46px; padding: 6px 8px; margin: 6px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.hand-label { font-size: 0.8rem; color: var(--text-2); margin-right: 4px; white-space: nowrap; }
.hand-label .mark-b { color: var(--p0); font-weight: 700; }
.hand-label .mark-w { color: var(--p1); font-weight: 700; }
.hand-empty { font-size: 0.8rem; color: var(--text-2); }
.hand-piece {
  position: relative; padding: 2px 10px 2px 8px; min-width: 40px;
  font-family: var(--font-piece); font-size: 1.15rem; line-height: 1.5;
}
.hand-piece .cnt { font-family: var(--font); font-size: 0.75rem; margin-left: 2px; color: var(--text-2); }
.hand-piece.sel { border-color: var(--accent); background: var(--sel); }
.hand-piece:disabled { opacity: 1; cursor: default; }

/* 平面モード */
.plane-host { width: 100%; position: relative; }
.float-cell { position: absolute; left: 0; top: 0; container-type: size; pointer-events: none; z-index: 20; will-change: transform; }
.float-cell .piece { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.plane-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 2vw, 18px); max-width: 640px; margin: 0 auto; }
.plane-board { min-width: 0; }
.plane-title { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.plane-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--board); border: 2px solid var(--board-line); border-radius: 4px;
}
.cell {
  position: relative; aspect-ratio: 1; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--board-line) 55%, transparent);
  container-type: size; cursor: pointer; padding: 0; border-radius: 0;
  background: transparent;
}
.cell:hover:not(:disabled) { border-color: color-mix(in srgb, var(--board-line) 55%, transparent); }
/* x ごとの地の色（3 枚の盤とも同じ x は同じ色 = 同じ yz 平面）。同じ木の色の濃さ違い: x1 明るめ・x2 中・x3 濃いめ */
.cell.col-x1, .plane-coords .col-x1 { background-color: var(--wood-x1); }
.cell.col-x2, .plane-coords .col-x2 { background-color: var(--wood-x2); }
.cell.col-x3, .plane-coords .col-x3 { background-color: var(--wood-x3); }
.plane-coords span { border-radius: 0 0 4px 4px; color: var(--text); }
.cell.camp-b { background-image: linear-gradient(color-mix(in srgb, var(--p0) 14%, transparent), color-mix(in srgb, var(--p0) 14%, transparent)); }
.cell.camp-w { background-image: linear-gradient(color-mix(in srgb, var(--p1) 14%, transparent), color-mix(in srgb, var(--p1) 14%, transparent)); }
.cell.inspect::before { content: ''; position: absolute; inset: 0; background: var(--atk-from); }
.cell.attack::after {
  content: ''; position: absolute; inset: 3px; z-index: 2; pointer-events: none;
  border-radius: 3px; border: 3px solid var(--atk-line); background: var(--atk-fill);
}
.cell.last::before { content: ''; position: absolute; inset: 0; background: var(--last); }
.cell.sel::before { content: ''; position: absolute; inset: 0; background: var(--sel); }
.cell.target::after {
  content: ''; position: absolute; left: 34%; top: 34%; width: 32%; height: 32%;
  border-radius: 50%; background: var(--mv); pointer-events: none; z-index: 2;
}
.cell.target.capture::after { left: 6%; top: 6%; width: 88%; height: 88%; background: transparent; border: 3px solid var(--cp); }
.cell.target.self::after { left: 10%; top: 10%; width: 80%; height: 80%; background: transparent; border: 3px dashed var(--mv); }
.cell.check-king::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--check) 45%, transparent); }
.cell .step {
  position: absolute; right: 2px; bottom: 1px; z-index: 3; pointer-events: none;
  font-size: max(8px, 26cqh); line-height: 1; font-weight: 800; color: var(--path);
}
.cell.on-path { box-shadow: inset 0 0 0 2px var(--path); }
.piece {
  position: absolute; left: 10%; right: 10%; top: 6%; bottom: 6%; z-index: 1;
  display: grid; place-items: center;
  clip-path: polygon(50% 0%, 84% 14%, 100% 100%, 0% 100%, 16% 14%);
  background: linear-gradient(180deg, var(--piece), color-mix(in srgb, var(--piece) 82%, var(--piece-edge)));
  color: var(--piece-text);
  font-family: var(--font-piece); font-weight: 700; line-height: 1;
  font-size: 52cqh; padding-top: 12%;
  pointer-events: none;
}
.piece.side-w { background: linear-gradient(180deg, var(--piece-w), color-mix(in srgb, var(--piece-w) 80%, var(--piece-w-edge))); }
.piece.down { rotate: 180deg; }
.piece.promoted { color: var(--promoted); }
.plane-coords { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 0.68rem; color: var(--text-2); }
.plane-legend { text-align: center; font-size: 0.75rem; color: var(--text-2); margin: 6px 0 0; }

/* 立体モード */
.cube-host {
  position: relative; width: 100%; height: min(72vh, 640px); min-height: 320px;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 30%, #23284a, #0b0d1a);
  touch-action: none;
}
.cube-host canvas { display: block; width: 100%; height: 100%; }
.cube-msg { position: absolute; inset: 0; display: grid; place-items: center; color: #dfe3ff; padding: 16px; text-align: center; font-size: 0.9rem; }
.cube-help { position: absolute; left: 8px; bottom: 6px; color: #b6bce0; font-size: 0.72rem; pointer-events: none; }
/* 立体の「平面に並べる / 立体に組む」（ui/cube-morph.js）。盤の右上に小さく */
.cube-morph-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2; min-height: 36px; padding: 6px 12px; font-size: 0.82rem;
  color: #e6e9ff; background: rgba(20, 24, 52, 0.72); border: 1px solid rgba(170, 180, 255, 0.45); border-radius: 999px;
}
.cube-morph-btn[aria-pressed='true'] { border-color: #ffd27a; color: #ffe6b0; }
.cube-morph-btn:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
/* 終局の演出の大きな文字（ui/cube-finish.js）。立体は奥の星人の上、平面は盤の真ん中。勝ち = 明るい金色に光、負け = 落ち着いた色 */
.finish-text {
  position: absolute; z-index: 3; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; font-weight: 900;
  line-height: 1.1; letter-spacing: 0.04em; padding: 0 0.1em;
  -webkit-text-stroke: 0.04em rgba(70, 36, 0, 0.6); paint-order: stroke fill;
}
.finish-text.tone-win, .finish-text.tone-neutral {
  color: #fff3a6;
  text-shadow: 0 0 0.12em rgba(255, 220, 110, 0.95), 0 0 0.45em rgba(255, 170, 40, 0.75), 0 0 1em rgba(255, 120, 30, 0.45), 0 0.06em 0 #9a5a12;
}
.finish-text.tone-lose {
  color: #b8c0de; -webkit-text-stroke-color: rgba(20, 26, 50, 0.6);
  text-shadow: 0 0 0.3em rgba(120, 140, 210, 0.55), 0 0.05em 0 #2e3456;
}
.finish-text.pop { animation: finish-pop 650ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.finish-text.tone-lose.pop { animation: finish-sink 900ms ease-out both; }
@keyframes finish-pop {
  from { opacity: 0; transform: translate(-50%, -100%) scale(0.3); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes finish-sink {
  from { opacity: 0; transform: translate(-50%, -130%); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}
@media (prefers-reduced-motion: reduce) { .finish-text.pop, .finish-text.tone-lose.pop { animation: none; } }

.hint-line { min-height: 1.4em; font-size: 0.82rem; color: var(--text-2); margin: 4px 0; text-align: center; }
.controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* サイド */
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.side-panel h2 { font-size: 0.85rem; color: var(--text-2); margin: 0 0 6px; }
.players { font-size: 0.88rem; display: grid; gap: 2px; }
.players .mark-b { color: var(--p0); font-weight: 700; }
.players .mark-w { color: var(--p1); font-weight: 700; }
.kifu-list { position: relative; margin: 0; padding-left: 2.6em; max-height: 320px; overflow-y: auto; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.kifu-list li.latest { font-weight: 700; color: var(--accent); }
.kifu-empty { list-style: none; margin-left: -2.6em; color: var(--text-2); }

/* ダイアログ */
.dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 18px 20px; box-shadow: var(--shadow); max-width: min(92vw, 360px); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.dialog-title { font-weight: 700; margin: 0 0 12px; text-align: center; }
.dialog-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.overlay-card { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); text-align: center; max-width: 360px; width: 100%; }
.result-title { font-size: 1.5rem; font-weight: 800; margin: 0; }
.result-reason { color: var(--text-2); margin: 4px 0 16px; }

/* 「駒の動き」ボタン（ホーム・対局・振り返り） */
.guide-btn.wide { width: 100%; margin-top: 10px; }

/* ===== 振り返り ===== */
/* 局面の移動（盤のすぐ下。平面・立体とも） */
.review-nav { margin: 6px 0 0; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.rv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 52px)) minmax(0, 1fr) repeat(2, minmax(0, 52px)); gap: 6px; align-items: center; justify-content: center; }
.rv-steps button { padding: 6px 0; font-size: 1.05rem; min-width: 0; }
.rv-ply { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-auto-row { display: flex; gap: 6px; margin-top: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
#rv-auto { flex: 0 0 auto; min-width: 118px; }
#rv-auto[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); }
.rv-speed { grid-template-columns: repeat(3, minmax(0, 56px)); gap: 4px; }
.rv-speed button { padding: 5px 2px; font-size: 0.82rem; }
.rv-move { margin: 6px 0 0; text-align: center; font-size: 0.88rem; font-weight: 600; min-height: 1.4em; overflow-wrap: anywhere; }

/* 評価値（数字とバー） */
.review-panel { display: grid; gap: 8px; }
.review-panel h2, .review-panel h3 { margin: 0; }
.rv-eval { display: grid; gap: 4px; }
.rv-eval-text { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rv-eval-text.side-b { color: var(--p0); }
.rv-eval-text.side-w { color: var(--p1); }
.eval-bar { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: var(--p1); border: 1px solid var(--border); }
.eval-bar-b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--p0); transition: width 0.2s; }
.eval-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--surface); }
.eval-bar-legend { display: flex; justify-content: space-between; font-size: 0.72rem; }
.eval-bar-legend .mark-b { color: var(--p0); font-weight: 700; }
.eval-bar-legend .mark-w { color: var(--p1); font-weight: 700; }

/* 評価値グラフ */
.eval-graph { display: block; width: 100%; height: auto; cursor: pointer; background: var(--bg); border-radius: 8px; }
.eval-graph text { font-size: 11px; fill: var(--text-2); }
.eval-graph .eg-frame { fill: none; stroke: var(--border); }
.eval-graph .eg-grid { stroke: var(--border); stroke-dasharray: 2 3; }
.eval-graph .eg-zero { stroke: var(--text-2); stroke-width: 0.8; }
.eval-graph .eg-area-b { fill: color-mix(in srgb, var(--p0) 30%, transparent); }
.eval-graph .eg-area-w { fill: color-mix(in srgb, var(--p1) 30%, transparent); }
.eval-graph .eg-line { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.eval-graph .eg-cursor { stroke: var(--accent); stroke-width: 1.6; }
.eval-graph .eg-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1; }

/* 次の一手 */
.rv-hint { border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 6px; }
.rv-hint-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-hint-head h3 { font-size: 0.85rem; color: var(--text-2); }
.rv-hint-head button { padding: 4px 12px; font-size: 0.85rem; }
.rv-ai-label { font-size: 0.8rem; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.rv-ai-label select { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; }
.rv-hint-body p { margin: 0 0 4px; font-size: 0.85rem; overflow-wrap: anywhere; }
.rv-hint-note { color: var(--text-2); font-size: 0.8rem !important; }
.rv-hint-note.thinking { color: var(--accent); animation: blink 1.2s ease-in-out infinite; }
.rv-best-move { color: var(--accent); }
.rv-path { font-size: 0.78rem !important; color: var(--path); }
.rv-cmp { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; }
/* 次の一手の欄: 最善手・実際の手・前の手。見出しの印（□ → □）は盤と同じ色 */
.rv-sec { display: grid; gap: 1px; }
.rv-hint-body .rv-sec-head { margin: 2px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--text-2); }
.rv-sec-mark { font-weight: 400; }
.rv-mk { font-weight: 700; }
.rv-mk.best { color: var(--mv); }
.rv-mk.actual { color: var(--arrow); }
.rv-mk.prev { color: #d9a400; }
.rv-hint-body .rv-sec-prev { color: var(--text-2); font-size: 0.78rem; }
.rv-actual-move { font-weight: 700; }
.rv-cmp.best { background: color-mix(in srgb, var(--arrow) 22%, transparent); color: var(--arrow-text); }
.rv-cmp.different, .rv-cmp.pending { background: var(--border); color: var(--text-2); }
.rv-cmp.dubious { background: color-mix(in srgb, #e0a000 24%, transparent); color: var(--amber-text); }
.rv-cmp.bad { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
/* 平面の盤の上の緑の矢印（ui/plane-arrow.js。クリックは下のマスへ） */
.plane-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
.plane-arrow .pa-line { fill: none; stroke: var(--arrow); stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.plane-arrow .pa-head { fill: var(--arrow); }
.plane-arrow .pa-ring { fill: color-mix(in srgb, var(--arrow) 22%, transparent); stroke: var(--arrow); }
.plane-arrow .pa-text { fill: var(--arrow-text); font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* 振り返り中の棋譜（クリックでその局面へ） */
.kifu-list.reviewing li { padding: 0; }
.kifu-btn { display: block; width: 100%; text-align: left; padding: 1px 6px; border: none; border-radius: 6px; background: transparent; font-weight: 500; font-size: inherit; }
.kifu-btn:hover:not(:disabled) { background: var(--accent-soft); }
.kifu-list li.current .kifu-btn { background: var(--accent); color: #fff; font-weight: 700; }

/* 振り返りで触った駒の利き（持ち主の色: 先手 = 橙、後手 = 青。対局中の相手の駒は赤のまま） */
.cell.inspect.tone-b::before { background: rgba(255, 140, 30, 0.42); }
.cell.attack.tone-b::after { border-color: rgba(230, 110, 0, 0.95); background: rgba(255, 150, 40, 0.2); }
.cell.inspect.tone-w::before { background: rgba(30, 120, 255, 0.38); }
.cell.attack.tone-w::after { border-color: rgba(20, 100, 230, 0.95); background: rgba(40, 140, 255, 0.2); }

/* 棋譜の最後の終局の行 */
.kifu-ending { list-style: none; margin-left: -2.6em; margin-top: 4px; font-weight: 700; color: var(--text-2); }

/* 盤の真ん中 (2,5,2) = トライのマス */
.cell .try-star { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; font-size: 72cqh; line-height: 1; color: var(--try-star); }
/* トライのマスの虹色の枠（宇宙っぽいグラデーションがゆっくり回る。視差効果を減らす設定では止める）。
   直前の手（黄色の地）・選択（青）とはっきり見分けられるよう、枠だけを虹色にする */
@property --try-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cell .try-frame {
  position: absolute; inset: 1px; z-index: 3; pointer-events: none; border-radius: 3px; padding: 3px;
  background: conic-gradient(from var(--try-angle), #ff4d8d, #ffa64d, #f6f05a, #4dffa0, #4dd8ff, #6d6bff, #c44dff, #ff4d8d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 2px rgba(150, 110, 255, 0.7));
  animation: try-spin 6s linear infinite;
}
@keyframes try-spin { to { --try-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cell .try-frame { animation: none; } }

/* トライのルール（2 択） */
#try-rule-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#try-rule-pick button { white-space: normal; line-height: 1.3; min-width: 0; }
.try-rule-note { font-size: 0.75rem; color: var(--text-2); }

/* 間の駒を飛び越して行けるマス（桂・飛と竜の同じ y の平面）: ○ の代わりに緑の ◇。取る手は赤い ◇ の枠、利きは持ち主の色の ◇ の枠 */
.cell.target.jump::after { left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 2px; background: var(--jump); transform: rotate(45deg); }
.cell.target.capture.jump::after { left: 17%; top: 17%; width: 66%; height: 66%; border-radius: 2px; background: transparent; border: 3px solid var(--cp); box-shadow: 0 0 0 2px var(--jump); }
.cell.attack.jump::after { inset: auto; left: 17%; top: 17%; width: 66%; height: 66%; transform: rotate(45deg); border-style: dashed; }

/* 飛車の強さ（2 択。文字が長いので折り返す） */
#rook-rule-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#rook-rule-pick button { white-space: normal; line-height: 1.3; min-width: 0; }

/* 評価値の AI の計算の進み具合 */
.rv-eval-progress { margin: 0; font-size: 0.78rem; color: var(--accent); }

/* 星人のドット絵（32×32 を拡大。2 コマの切り替え＋ふわふわ。reduced-motion では止める） */
.alien-sprite { position: relative; flex: 0 0 auto; width: 64px; height: 64px; animation: alien-float 2.6s ease-in-out infinite; }
.alien-sprite.big { width: 112px; height: 112px; }
.alien-sprite.small { width: 46px; height: 46px; }
.alien-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.alien-sprite img.f0 { animation: alien-f0 0.9s steps(1) infinite; }
.alien-sprite img.f1 { animation: alien-f1 0.9s steps(1) infinite; }
@keyframes alien-f0 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes alien-f1 { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes alien-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .alien-sprite, .alien-sprite img.f0, .alien-sprite img.f1 { animation: none; }
  .alien-sprite img.f1 { opacity: 0; }
}
.setup-alien-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; min-height: 0; }
.setup-alien-name { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text-2); }
/* 対局画面: AI の持ち駒の欄の左に相手の星人 */
.ai-row { display: flex; align-items: center; gap: 6px; }
.ai-row .hand { flex: 1 1 auto; min-width: 0; }

/* 星人の動きを止める（<html data-alien-motion="off">）: ドット絵は f0 の静止画 */
[data-alien-motion='off'] .alien-sprite,
[data-alien-motion='off'] .alien-sprite img.f0,
[data-alien-motion='off'] .alien-sprite img.f1 { animation: none; }
[data-alien-motion='off'] .alien-sprite img.f1 { opacity: 0; }
.setup-alien-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.alien-motion-btn { padding: 3px 10px; font-size: 0.75rem; font-weight: 600; color: var(--text-2); border-radius: 999px; }
.alien-motion-btn[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }
.ai-alien-box { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.alien-motion-btn.mini { padding: 1px 6px; font-size: 0.62rem; white-space: nowrap; }
.ai-alien-box:has(#ai-alien[hidden]) { display: none; }