/* AIクリフ囲碁（試作品）の画面。クリフ囲碁の画面デザイン（紙色のパネル・下に厚みのある「つまみ」・
   得点板と下の操作パネル）に準じ、碁盤の見た目（go-look）の黒と白を使う。 */
:root {
  --ink: #1d2430; --ink-2: #485263; --muted: #687080;
  --paper: #ffffff; --paper-2: #f4f1ea; --paper-3: #ebe6db; --line: #e2dccf; --lip: #d3ccbd;
  --p1: #e2513a; --p1-d: #b33822; --p2: #2e7be0; --p2-d: #1d5bb0;
  --sun: #ffc93c; --sun-d: #d99b0c;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(24, 34, 52, 0.16), 0 2px 6px rgba(24, 34, 52, 0.08);
  --font: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-pop: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", var(--font);
}
html.go-look { --p1: #2e2a26; --p1-d: #14110e; --p2: #8a8474; --p2-d: #6d6759; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #cfe3ee; color: var(--ink); font-family: var(--font); font-weight: 700;
  overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; touch-action: pan-x pan-y;
}
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; touch-action: none; }
.hidden { display: none !important; }
h1, h2, .result-title, button.big, .pscore b, #moveNo { font-family: var(--font-pop); }

/* ---------- ボタン ---------- */
button {
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 18px; cursor: pointer;
  box-shadow: 0 3px 0 var(--lip); transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
button:hover { background: #fffaf0; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip); }
button:disabled { opacity: 0.38; cursor: default; transform: none; }
button:focus-visible { outline: 3px solid rgba(46, 123, 224, 0.45); outline-offset: 2px; }
button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button.big { background: var(--sun); border-color: var(--sun-d); box-shadow: 0 4px 0 var(--sun-d); font-size: 18px; padding: 14px 24px; border-radius: 14px; }
button.big:hover { background: #ffd35e; }
button.big:active { box-shadow: 0 1px 0 var(--sun-d); }
button.ghost { background: var(--paper-2); border-color: transparent; box-shadow: none; color: var(--ink-2); }
button.ghost:hover { background: var(--paper-3); }

/* ---------- 画面（ホーム・結果） ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 16px; z-index: 20; overflow-y: auto; }
.panel, .menu-card { background: var(--paper); border-radius: 22px; box-shadow: var(--shadow); padding: 24px 26px; max-width: 560px; width: 100%; }
#menu { align-items: flex-start; padding-left: max(16px, 6vw); background: linear-gradient(90deg, rgba(29, 36, 48, 0.28), rgba(29, 36, 48, 0) 46%); }
.menu-card { max-width: 460px; padding: 26px 28px 24px; }
.title-block { margin-bottom: 16px; }
h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: 0.02em; }
h1 small { font-size: 13px; color: var(--sun-d); margin-left: 4px; }
h1::after { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, #2e2a26 50%, #d8d2c2 50%); }
.engine { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.engine.ok { color: #2f9e5b; }
.engine.err { color: var(--p1-d); }
.row { margin-bottom: 12px; }
.row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.04em; }
.seg { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 12px; }
.seg button { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; padding: 9px 4px; border-radius: 9px; background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); white-space: nowrap; }
.seg button:hover { background: rgba(255, 255, 255, 0.6); }
.seg button:active { transform: none; box-shadow: none; }
.seg-rules button small, .seg-sub button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.3; }
.seg-level button { padding: 9px 0; font-variant-numeric: tabular-nums; }
.level-note { margin: 6px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.level-note b { color: var(--ink-2); }
.row label .help-q { margin-left: 6px; vertical-align: 1px; }
.help-q { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; box-shadow: none; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1; display: inline-grid; place-items: center; }
.help-q:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-2); }
.help-q:active { transform: none; box-shadow: none; }
.help-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px 16px; border: 0; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.help-dlg::backdrop { background: rgba(29, 36, 48, 0.42); }
.help-lead { margin: 8px 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.help-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.help-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--paper-3); }
.help-table th small { display: block; font-weight: 500; font-size: 10.5px; }
.help-table td { padding: 6px 8px; border-bottom: 1px solid var(--paper-2); }
.help-table td:first-child { white-space: nowrap; font-weight: 700; }
.help-table tr.on td { background: #fff4cf; }
.help-notes { margin: 12px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.help-notes li + li { margin-top: 4px; }
.help-notes b { color: var(--ink-2); }
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(24, 34, 52, 0.16), 0 2px 0 var(--lip); }
.setup .big { width: 100%; margin-top: 6px; }
#menu:not(.mode-watch) .watch-row, #menu.mode-watch .play-row, #menu:not(.rules-2027) .tie-row { display: none; }

.tally { font-size: 14px; line-height: 1.8; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tally b { color: var(--ink); font-size: 16px; }

/* ---------- 対局中：上の得点板（クリフ囲碁の札に準じる） ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.scoreboard {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(660px, calc(100vw - 24px)); display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; pointer-events: none;
}
.player {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "emb name score" "emb role score" "emb stats stats"; column-gap: 12px; align-items: center; align-content: center;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 9px 14px 15px; min-width: 0; min-height: 70px;
  box-shadow: var(--shadow); outline: 3px solid transparent; transition: outline-color 0.25s, transform 0.25s, opacity 0.25s, filter 0.25s;
}
.player.p2 { grid-template-columns: auto minmax(0, 1fr) 40px; grid-template-areas: "score name emb" "score role emb" "stats stats emb"; text-align: right; }
.player.active { transform: translateY(2px); }
.player.active.p1 { background-color: #f1ece2; outline-color: var(--p1); }
.player.active.p2 { background-color: #f7f4ec; outline-color: var(--p2); }
.scoreboard:has(.player.active) .player:not(.active) { opacity: 0.6; filter: saturate(0.6); }
.emblem { grid-area: emb; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1; color: #fff; }
.p1 .emblem { background: radial-gradient(circle at 35% 30%, #5a534c, #1a1714 70%); box-shadow: inset 0 -3px 0 #0d0b09; }
.p2 .emblem { background: radial-gradient(circle at 35% 30%, #ffffff, #e4ddcb 75%); color: #2e2a26; box-shadow: inset 0 -3px 0 #cfc8b4, 0 0 0 1px #b5ad98; }
.pname { grid-area: name; font-weight: 800; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prole { grid-area: role; font-size: 12px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstats { grid-area: stats; font-size: 11px; color: var(--muted); display: flex; gap: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.pstats span { display: inline-flex; align-items: baseline; gap: 3px; }
.pstats i { font-style: normal; }
#hud.rules-chinese .capstat { display: none; } /* 中国ルールは盤上の石と地で数えるので、アゲハマは出さない */
.player.p2 .pstats { justify-content: flex-end; }
.pstats b { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.pscore { grid-area: score; display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; line-height: 1; min-width: 3.2em; }
.p2 .pscore { justify-content: flex-start; }
.pscore b { font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.pscore small { font-size: 12px; color: var(--muted); }
.turn-tag, .pass-tag {
  position: absolute; bottom: -11px; font-size: 12px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s;
}
.turn-tag { background: #2e2a26; }
.p2 .turn-tag { background: #8a8474; }
.pass-tag { background: #5b6470; }
.p1 .turn-tag, .p1 .pass-tag { left: 14px; }
.p2 .turn-tag, .p2 .pass-tag { right: 14px; }
.player.active .turn-tag { opacity: 1; transform: none; }
/* 終局後：勝った側の札に金のふちと「勝ち」の札。負けた側は手番でない側と同じく淡く */
.win-tag {
  position: absolute; bottom: -12px; font-family: var(--font-pop); font-size: 13px; font-weight: 800; color: #3b2c1f; padding: 3px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd96a, #f4b940); box-shadow: 0 2px 0 var(--sun-d), 0 4px 10px rgba(217, 155, 12, 0.35);
  opacity: 0; transform: translateY(-4px) scale(0.8); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); pointer-events: none;
}
.p1 .win-tag { left: 14px; }
.p2 .win-tag { right: 14px; }
.player.winner { outline-color: var(--sun) !important; background-color: #fffaeb !important; box-shadow: var(--shadow), 0 0 22px rgba(255, 201, 60, 0.45); }
.player.winner .win-tag { opacity: 1; transform: none; }
.player.winner .turn-tag, .player.winner .pass-tag { opacity: 0; }
.scoreboard:has(.player.winner) .player:not(.winner) { opacity: 0.6; filter: saturate(0.6); }
#hud.finished:not(.replaying) .turn-info { width: auto; min-width: 76px; }
#hud.finished:not(.replaying) #moveNo { padding: 6px 12px; color: var(--ink); }
.player.passed .pass-tag { opacity: 1; transform: none; }
.player.passed .turn-tag { opacity: 0; }
.turn-info { align-self: start; margin-top: 21px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; white-space: nowrap; }
#moveNo, #thinking { width: 100%; text-align: center; font-weight: 700; border-radius: 999px; padding: 6px 0; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
#moveNo { font-size: 13px; color: var(--ink-2); background: var(--paper); }
#thinking { font-size: 12px; padding: 4px 0; color: #8a5a00; background: #fff3cf; }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "・"; } 50% { content: "・・"; } 75% { content: "・・・"; } }

/* 形勢の棒：得点板のすぐ下。将棋中継の評価値のように、左が黒・右が白。黒の勝つ見込みの分だけ黒が伸びる */
.evalbar {
  position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 92px); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 48px)); padding: 6px 10px 5px; background: rgba(255, 255, 255, 0.92); border-radius: 12px; box-shadow: var(--shadow); pointer-events: none;
}
.evbar { position: relative; height: 24px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #fffefa, #e9e3d4); border: 1px solid #b5ad98; }
/* 勝つ見込みの数字は棒の両端に（左端が黒、右端が白） */
.evbar-pct { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; z-index: 1; }
.evbar-pct b { font-family: var(--font-pop); font-size: 16px; margin-right: 1px; }
.evbar-pct.b { left: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.evbar-pct.w { right: 8px; color: #2e2a26; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
/* 片方がほぼ0%で、数字が相手の色の上に乗るときは字の色を入れ替える */
.evbar-pct.b.flip { color: #2e2a26; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.evbar-pct.w.flip { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.evbar-b { height: 100%; width: 50%; background: linear-gradient(180deg, #4a4540, #1f1c19); transition: width 0.6s ease; }
.evbar-mid { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--sun-d); }
.evbar-lead { margin-top: 3px; text-align: center; font-size: 12px; color: var(--ink-2); }

/* ---------- 下の操作パネル（クリフ囲碁に準じる） ---------- */
#message {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 12px); left: 50%; transform: translateX(-50%);
  background: rgba(29, 36, 48, 0.86); color: #fff; border-radius: 999px; padding: 9px 20px; font-size: 15px;
  white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: bottom 0.3s;
}
#message:empty { display: none; }
.dock {
  position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; background: var(--paper); border-radius: 20px; padding: 6px; box-shadow: var(--shadow);
  max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}
.dock .sep { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line); flex: none; }
.dock button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 7px 8px 6px; font-size: 12px; font-weight: 700;
  border: 0; border-radius: 14px; background: transparent; box-shadow: none; color: var(--ink-2); white-space: nowrap;
}
@media (hover: hover) { .dock button:where(:not(.hover-off)):hover:not(:disabled) { background: var(--paper-2); color: var(--ink); } }
.dock button:active { transform: scale(0.95); box-shadow: none; }
.dock button.on:not(.toggle) { background: #fff3cf; color: #8a5a00; }
.dock button.toggle { position: relative; }
.dock button.toggle::after { content: 'OFF'; position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 6px; font-size: 9px; line-height: 14px; background: var(--paper-2); color: var(--ink-2); opacity: 0.85; }
.dock button.toggle.on::after { content: 'ON'; background: #2f9e5b; color: #fff; opacity: 1; }
.dock button.toggle:not(.on) svg { opacity: 0.4; }
.dock .hide-btn { min-width: 52px; }
#hud:not(.mode-play) .play-only, #hud:not(.mode-watch) .watch-only, #hud:not(.finished) .after-only { display: none; }
#hud.replaying .play-only, #hud.replaying .watch-only { display: none; }
#hud.finished .play-only, #hud.finished .watch-only { display: none; }
#hud.dock-hidden .dock { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
#dockTab {
  position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, calc(100% + 20px));
  display: flex; align-items: center; gap: 4px; padding: 5px 16px 5px 10px; font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: rgba(253, 248, 236, 0.92); border: 0; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.2s;
}
#dockTab svg { width: 18px; height: 18px; stroke-width: 2.4; }
#hud.dock-hidden #dockTab { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* ---------- 振り返り（クリフ囲碁の再生バーに準じる） ---------- */
.replay-only { display: none !important; }
#hud.replaying .replay-only { display: flex !important; }
#hud.replaying .after-only, #hud.replaying #countPanel { display: none !important; }
#hud.replaying .turn-info::before { content: '振り返り'; font-family: var(--font-pop); font-size: 12px; padding: 2px 10px; border-radius: 999px; background: #fff1cf; color: #8a5a00; box-shadow: var(--shadow); }
#hud.replaying .turn-info { margin-top: 8px; }
.replay-bar {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 6px); left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 16px)); flex-direction: column; gap: 2px; padding: 8px 14px 6px;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow);
}
#hud.replaying #message { bottom: calc(var(--dock-top, 84px) + 150px); }
/* 手数の帯：上に形勢の折れ線（将棋中継の評価値グラフのように、上が黒・下が白）、その上に見どころの印 */
.rp-seek { position: relative; display: grid; grid-template-areas: "marks" "graph" "seek"; align-items: center; }
.rp-graph { grid-area: graph; display: block; width: calc(100% - 18px); height: 46px; margin: 0 9px; border-radius: 6px; background: linear-gradient(180deg, #ece7dc 0 50%, #fbf9f4 50% 100%); overflow: visible; }
.rp-graph .mid { stroke: var(--sun-d); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-graph .line { fill: none; stroke: #2e2a26; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rp-graph .area { fill: rgba(46, 42, 38, 0.16); }
.rp-graph .cur { stroke: var(--p2-d); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-marks { grid-area: marks; position: relative; height: 16px; margin: 0 9px; }
.rp-marks button {
  position: absolute; bottom: 0; left: var(--p); width: 14px; height: 14px; margin-left: -7px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; transform-origin: 50% 100%;
}
.rp-marks svg { display: block; width: 100%; height: 100%; stroke: none; }
.rp-marks .c1 svg { fill: #2e2a26; }
.rp-marks .c2 svg { fill: #fffdf6; stroke: #6d6759; stroke-width: 1.5; }
.rp-marks button:hover { background: none; transform: scale(1.3); z-index: 1; }
.rp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.rp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-2) var(--fill, 0%), var(--paper-3) var(--fill, 0%)); }
.rp-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-2) var(--fill, 0%), var(--paper-3) var(--fill, 0%)); }
.rp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2); box-shadow: 0 1px 3px rgba(70, 48, 24, 0.35); }
.rp-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2); }
#rpSeek { grid-area: seek; }
.rp-row { display: flex; justify-content: center; }
.rp-transport { display: flex; align-items: center; gap: 2px; }
.rp-transport button { display: grid; place-items: center; width: 42px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink-2); }
.rp-transport button:hover { background: var(--paper-2); color: var(--ink); }
.rp-transport button:active { transform: scale(0.94); box-shadow: none; }
.rp-playgroup { display: flex; margin: 0 6px; border-radius: 12px; }
.rp-transport .rp-playgroup button { width: auto; display: flex; gap: 6px; }
.rp-playgroup:not(:has(.playing)) { box-shadow: 0 3px 0 var(--sun-d); }
.rp-transport .rp-playgroup:not(:has(.playing)) button { background-color: #f4b940; color: #3b2c1f; }
.rp-playgroup:has(.playing) { box-shadow: 0 3px 0 var(--lip); }
.rp-transport .rp-playgroup:has(.playing) button { background-color: #fbf1d6; color: var(--ink-2); }
.rp-transport button.rp-play { width: 50px; justify-content: center; padding: 0; border-radius: 12px 0 0 12px; }
.rp-play svg { fill: currentColor; }
.rp-transport button.rp-rate { min-width: 52px; padding: 0 10px; border-radius: 0 12px 12px 0; border-left: 1.5px solid rgba(140, 95, 20, 0.35); font-family: var(--font-pop); font-size: 14px; font-variant-numeric: tabular-nums; }
.rp-play .i-pause, .rp-play.playing .i-play { display: none; }
.rp-play.playing .i-pause { display: block; }
.rp-note { justify-content: center; font-size: 12px; color: var(--muted); min-height: 1.2em; }
@media (max-width: 640px) {
  .replay-bar { padding: 6px 10px 4px; }
  .rp-hi { display: none !important; }
  .rp-transport button { width: 40px; height: 38px; }
}

/* 終局の死に石の確認：操作パネルの上に浮かべ、盤は覆わない */
.count-panel {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 12px); left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px)); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 18px;
}
/* 結果のカード：盤を覆わない。既定（スマホ）は操作パネルの上の低いカード */
.result-card {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 10px); left: 50%; transform: translateX(-50%);
  width: calc(100vw - 32px); max-height: 46dvh; display: flex; flex-direction: column; gap: 6px;
  background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px 12px; overflow: hidden;
  animation: cardIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.rc-head { display: flex; align-items: flex-start; gap: 8px; }
.rc-main { flex: 1; min-width: 0; }
.result-title { font-size: 21px; font-weight: 800; line-height: 1.25; }
.result-sub { margin-top: 2px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.rc-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: var(--paper-2); box-shadow: none; color: var(--ink-2); }
.rc-close:hover { background: var(--paper-3); }
.rc-close svg { width: 18px; height: 18px; }
.rc-more { align-self: flex-start; display: flex; align-items: center; gap: 2px; padding: 3px 8px 3px 10px; font-size: 12px; color: var(--ink-2); background: transparent; border: 0; box-shadow: none; border-radius: 999px; }
.rc-more:hover { background: var(--paper-2); }
.rc-more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.result-card.open .rc-more svg { transform: rotate(180deg); }
.rc-detail { display: none; min-height: 0; overflow-y: auto; padding: 2px 2px 4px; border-top: 1px solid var(--line); }
.result-card.open .rc-detail { display: block; }
.rc-note { margin-top: 8px; font-size: 12px; line-height: 1.6; text-align: left; }
.rc-note:empty { display: none; }
.result-buttons { display: flex; gap: 6px; margin-top: 2px; }
.result-buttons button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; font-size: 13px; white-space: nowrap; }
.result-buttons button.big { font-size: 14px; padding: 9px 6px; border-radius: 12px; }
.result-buttons svg { width: 18px; height: 18px; }
/* 結果のカードが出ている間は、操作パネルの「もう一度」「振り返る」「結果を見る」はカードに任せる */
#hud.result-open #btnAgainDock, #hud.result-open #btnReplayDock, #hud.result-open #btnResultDock { display: none; }
/* iPad 縦向きなど：下寄せのまま、幅を抑えて中央に */
@media (min-width: 600px) {
  .result-card { width: min(560px, calc(100vw - 48px)); padding: 14px 18px; }
  .result-title { font-size: 24px; }
  .result-sub { font-size: 13px; }
}
/* モニタ・iPad 横向き：右側の縦長の札。内訳は最初から開いておく */
.result-card.side {
  left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; width: 300px; max-height: none;
  top: calc(max(12px, env(safe-area-inset-top)) + 104px); bottom: calc(var(--dock-top, 84px) + 12px); padding: 18px 18px 16px; gap: 10px;
  animation-name: sideIn;
}
@keyframes sideIn { from { opacity: 0; transform: translateX(24px); } }
.result-card.side .rc-more { display: none; }
.result-card.side .rc-detail { display: block; flex: 1; border-top: 1px solid var(--line); padding-top: 4px; }
.result-card.side .result-table { margin-top: 10px; }
.result-card.side .result-buttons { flex-wrap: wrap; }
.result-card.side .result-buttons .big { order: -1; flex-basis: 100%; font-size: 16px; padding: 12px; }
@media (min-width: 1200px) { .result-card.side { width: 340px; } .result-card.side .result-title { font-size: 26px; } }

.count-lead { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.count-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.count-buttons .big { font-size: 15px; padding: 10px 18px; }

/* スマホ：得点板は2枚だけを並べ、手数は札の下に */
@media (max-width: 640px) {
  .scoreboard { grid-template-columns: 1fr 1fr; gap: 8px; width: calc(100vw - 16px); top: max(8px, env(safe-area-inset-top)); }
  .turn-info { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); margin: 0; }
  .player { padding: 8px 10px 14px; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 8px; }
  .player.p2 { grid-template-columns: auto minmax(0, 1fr) 32px; }
  .emblem { width: 32px; height: 32px; font-size: 15px; }
  .pscore b { font-size: 24px; }
  .evalbar { top: calc(max(8px, env(safe-area-inset-top)) + 120px); }
  /* 操作パネルは横にはみ出させず、6個ずつ2段に折り返す（横に滑らせないと届かないボタンを作らない） */
  .dock { width: max-content; flex-wrap: wrap; justify-content: center; row-gap: 2px; overflow: visible; padding: 4px; }
  .dock .sep { display: none; }
  .dock button { flex: 0 0 56px; min-width: 0; padding: 5px 2px 4px; font-size: 10.5px; gap: 2px; }
  .dock button svg { width: 20px; height: 20px; }
  .dock .hide-btn { min-width: 0; }
  .time-pop { max-height: calc(100dvh - var(--dock-top, 84px) - 24px); overflow-y: auto; }
  #menu { align-items: center; padding-left: 16px; }
  .menu-card { padding: 20px 18px; }
  h1 { font-size: 26px; }
}

/* ---------- 終局の演出（クリフ囲碁に準じる） ---------- */
#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
#labelLayer { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
/* 帯：画面を横切るリボン */
.banner { --c: #ffc93c; position: absolute; left: 0; right: 0; top: 34%; display: flex; justify-content: center; animation: bannerLife 4s forwards; }
.banner .band {
  background: color-mix(in srgb, var(--c) 82%, transparent); color: #fff; padding: 14px 48px 16px; text-align: center;
  box-shadow: 0 12px 30px rgba(24, 34, 52, 0.28); border-radius: 6px; animation: bandIn 4s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; max-width: calc(100vw - 24px);
}
.banner.light .band { color: #2e2a26; }
.banner b { display: block; font-family: var(--font-pop); font-size: clamp(28px, 5.4vw, 52px); letter-spacing: 0.06em; line-height: 1.15; white-space: nowrap; }
.banner small { display: block; font-size: clamp(14px, 1.8vw, 17px); font-weight: 700; margin-top: 4px; opacity: 0.95; }
@keyframes bannerLife { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bandIn { 0% { transform: scaleX(0.2) scaleY(0.6); opacity: 0; } 7% { transform: scaleX(1.03) scaleY(1); opacity: 1; } 11%, 90% { transform: none; } 100% { transform: translateY(-16px); } }
.flash { position: absolute; inset: 0; animation: flash 0.45s ease-out forwards; }
@keyframes flash { from { opacity: 0.6; } to { opacity: 0; } }
/* 数えの番号：その色の札（黒は黒、白は白地に濃い字） */
.count-label {
  position: absolute; transform: translate(-50%, -100%); min-width: 28px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font-family: var(--font-pop); font-weight: 800; font-size: 13px; line-height: 1.35; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(24, 34, 52, 0.3);
  animation: labelIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); pointer-events: none;
}
.count-label.c1 { background: #2e2a26; color: #fff; }
.count-label.c2 { background: #fffdf6; color: #2e2a26; border-color: #8a8474; }
.count-label small { display: block; font-size: 10px; }
@keyframes labelIn { from { transform: translate(-50%, -60%) scale(0.2); opacity: 0; } }
/* 日本ルールの地の番号：地面の点に札の真ん中を重ねる */
.count-label.ground { transform: translate(-50%, -50%); animation-name: labelInGround; }
@keyframes labelInGround { from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } }
/* 札の目数：数えの間と終局後だけ出す。増えるたびに弾む */
.pscore { display: none; }
#hud.ending .pscore, #hud.finished .pscore { display: flex; }
.pscore small { margin-left: 1px; }
.pscore b.bump { display: inline-block; animation: scoreBump 0.22s ease-out; }
@keyframes scoreBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pstats b.bump { display: inline-block; animation: scoreBump 0.22s ease-out; }
/* 数えの間：操作パネルは「スキップ」「ホーム」だけ。形勢の棒は隠す */
.ending-only { display: none !important; }
#hud.ending .ending-only { display: flex !important; }
#hud.ending .dock > button:not(.ending-only):not(#btnMenu), #hud.ending .dock .sep, #hud.ending #evalBar { display: none !important; }
/* 結果の内訳の表 */
.result-table { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 14px; margin: 8px auto 0; max-width: 320px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.result-table .h { color: var(--muted); font-size: 12px; text-align: right; }
.result-table .k { text-align: left; color: var(--ink-2); }
.result-table .total { border-top: 1.5px solid var(--line); padding-top: 4px; font-size: 16px; }
.result-title.p1 { color: #2e2a26; }
.result-title.p2 { color: #6d6759; }
#hud.no-score .pscore { display: none !important; }

/* ---------- 「設定」の吹き出し（クリフ囲碁の操作パネルの吹き出しに準じる） ---------- */
.time-pop { position: fixed; z-index: 13; display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: calc(100vw - 16px); padding: 8px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); pointer-events: auto; }
.time-pop .seg { flex-wrap: nowrap; }
/* 上に時間帯と石の取られ方、下に切り替えのボタンを3つずつ並べる。操作パネルの上に収まらないときは中だけスクロール */
.display-pop { width: 340px; max-height: calc(100vh - var(--dock-top, 84px) - 24px); max-height: calc(100dvh - var(--dock-top, 84px) - 24px); overflow-y: auto; }
.display-pop .pop-head { position: relative; display: flex; justify-content: flex-end; margin: -2px -2px -3px 0; }
.display-pop .pop-grip { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
@media (pointer: coarse) { .display-pop .pop-grip { display: block; } }
.display-pop .pop-time { display: flex; align-items: center; gap: 6px; }
.display-pop .pop-time-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.display-pop .pop-time-row { display: flex; align-items: center; gap: 6px; }
.display-pop .pop-time-row .seg { flex: 1 1 auto; min-width: 0; }
.display-pop .pop-close { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--line); border-radius: 6px; background: transparent; box-shadow: none; transform: none; color: var(--muted); cursor: pointer; }
.display-pop .pop-close:hover { background: rgba(0, 0, 0, 0.08); }
.display-pop .pop-close::after { content: ''; position: absolute; inset: -6px; }
.display-pop .pop-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.display-pop .seg button { flex: 1 1 0; min-width: 0; padding: 8px 4px; }
.display-pop .seg-words button { font-size: 12px; padding: 8px 2px; }
.display-pop .pop-label { flex: none; display: grid; place-items: center; width: 30px; color: var(--muted); }
.display-pop .pop-label svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.display-pop .seg-icons button { display: grid; place-items: center; padding: 7px 4px; }
.display-pop .seg-icons button svg { width: 22px; height: 22px; }
.display-pop #displaySpeed .seg { padding: 3px; }
.display-pop #displaySpeed .seg button { padding: 3px 4px; }
.display-pop #displaySpeed .seg button svg { width: 15px; height: 15px; stroke-width: 2.2; }
.display-pop #displaySpeed.hidden { display: none; }
/* 未来予想の見せ方：切り替えボタンの下に、時間帯の段と同じ作りで1段。速さ（3つ）と繰り返し（2つ）を並べる */
.display-pop .future-opts { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.display-pop .future-opts .pop-time-row .seg:last-child { flex: 0 0 auto; width: 38%; }
.display-pop .future-opts.hidden { display: none; }
/* 時間帯と速さのアイコンの名前を出す小さな吹き出し（マウスを載せる・指で押すと出る） */
.icon-tip { position: fixed; z-index: 14; left: 0; top: 0; padding: 3px 8px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s, transform 0.12s; }
.icon-tip.on { opacity: 0.94; transform: none; }
.display-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.display-grid button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 9px 4px 7px;
  font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal; border: 0; border-radius: 14px; background: transparent; box-shadow: none; color: var(--ink-2);
}
@media (hover: hover) { .display-grid button:hover { background: var(--paper-2); color: var(--ink); } }
.display-grid button:active { transform: scale(0.95); box-shadow: none; }
.display-grid button.toggle::after { content: 'OFF'; position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 6px; font-size: 9px; line-height: 14px; background: var(--paper-2); color: var(--ink-2); opacity: 0.85; }
.display-grid button.toggle.on::after { content: 'ON'; background: #2f9e5b; color: #fff; opacity: 1; }
.display-grid button.toggle:not(.on) svg { opacity: 0.4; }
/* 直前手のボタンの絵：工場の表示は区画の枠の中の工場、碁盤の表示は碁石の上の丸印 */
.mark-icon-go, html.go-look .mark-icon-city { display: none; }
html.go-look .mark-icon-go { display: block; }
/* アクションカメラ：終局後・振り返り・観戦のときだけ出す */
.done-only { display: none !important; }
#hud.finished .done-only, #hud.replaying .done-only, #hud.mode-watch .done-only { display: flex !important; }
/* 拡大縮小ボタン（画面の右端） */
#zoomCtl { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
#zoomCtl button { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink-2); display: grid; place-items: center; }
#zoomCtl button + button { border-top: 1px solid var(--line); }
#zoomCtl button:hover { background: var(--paper-2); color: var(--ink); }
#zoomCtl button:active { transform: none; background: var(--paper-2); }
#zoomCtl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (hover: none) { #zoomCtl { display: none; } } /* 指で触る端末はピンチで足りる */
#btnDisplay[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
/* 振り返り：札の目数は「数え」の段だけ出す */
#hud.replaying:not(.rp-count) .pscore { display: none; }

/* 工場の街（操作パネルの「碁盤」をオフ）：黒・白の札や印を、クリフ囲碁と同じ赤・青にする */
.pop-note { margin-left: 4px; font-size: 11px; opacity: 0.8; }
html:not(.go-look) .p1 .emblem { background: radial-gradient(circle at 35% 30%, #f07a63, #b33822 70%); box-shadow: inset 0 -3px 0 #8a2a18; color: #fff; }
html:not(.go-look) .p2 .emblem { background: radial-gradient(circle at 35% 30%, #6aa6f2, #1d5bb0 75%); box-shadow: inset 0 -3px 0 #164a8f; color: #fff; }
html:not(.go-look) .p1 .turn-tag { background: var(--p1-d); }
html:not(.go-look) .p2 .turn-tag { background: var(--p2-d); }
html:not(.go-look) .evbar { background: linear-gradient(180deg, #4f93ea, #1d5bb0); }
html:not(.go-look) .evbar-b { background: linear-gradient(180deg, #ec6a52, #b33822); }
html:not(.go-look) .evbar-pct.w, html:not(.go-look) .evbar-pct.b.flip { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
html:not(.go-look) .rp-graph { background: linear-gradient(180deg, #f6dcd5 0 50%, #d9e6f8 50% 100%); }
html:not(.go-look) .rp-marks .c1 svg { fill: var(--p1); }
html:not(.go-look) .rp-marks .c2 svg { fill: var(--p2); stroke: var(--p2-d); }
html:not(.go-look) .count-label.c1 { background: var(--p1); color: #fff; }
html:not(.go-look) .count-label.c2 { background: var(--p2); color: #fff; border-color: var(--p2-d); }
html:not(.go-look) .result-title.p1 { color: var(--p1-d); }
html:not(.go-look) .result-title.p2 { color: var(--p2-d); }

/* 仮置き（2回で打つ・未来予想）：仮置きのあいだだけ「ここに打つ」「やめる」を出す */
#hud:not(.tentative) .tent-only { display: none; }
.dock button.tent-only { animation: tentIn 0.22s ease-out; }
/* 「ここに打つ」は、操作パネルの選択中のボタンと同じ生成りと琥珀の色で目立たせる（盤と森の世界の色から外れない） */
.dock button.primary { background: #fff3cf; color: #8a5a00; box-shadow: inset 0 0 0 1.5px #f0d48a; }
@media (hover: hover) { .dock button.primary:hover:not(:disabled) { background: #ffeab4; color: #6e4800; } }
@keyframes tentIn { from { transform: translateY(6px) scale(0.92); opacity: 0; } }
/* 未来予想で取られる工場の印（工場の街だけ。番号は石に彫って描く） */
.future-num {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--font-pop); font-weight: 800; line-height: 1; transition: opacity 0.2s linear; animation: futureIn 0.24s ease-out;
}
.future-num.gone { color: #e2513a; font-size: 18px; text-shadow: 0 0 3px #fff; }
.future-num.behind { opacity: 0.25 !important; }
@keyframes futureIn { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } }

/* ---------- ヒントの理由のカード（ほかの札と同じ紙の札。印は盤の灯りと囲碁の図の記号にそろえる） ---------- */
.why-card {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 12px); left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow);
  padding: 10px 14px 10px; font-size: 14px; line-height: 1.7; color: var(--ink); animation: cardIn 0.35s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.why-card.hidden { display: none; }
.why-top { display: flex; align-items: center; gap: 8px; }
.why-top b { flex: 1; font-family: var(--font-pop); font-size: 15px; }
.why-close { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-2); box-shadow: none; display: grid; place-items: center; }
.why-close svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; }
.why-list { margin: 6px 0 2px; padding-left: 0; list-style: none; }
.why-list li { position: relative; padding-left: 14px; margin: 2px 0; }
.why-list li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--sun-d, #c99a3a); }
.why-threat { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.why-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.why-legend { flex: 1; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.why-foot button { flex: none; padding: 6px 14px; font-size: 13px; }
/* 文中の記号：盤に置く記号と同じ形。灯りは、ヒントの印と同じ金色のにじんだ光 */
.why-sym { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 0.12em; vertical-align: -0.16em; }
.why-sym svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.why-sym.s-glow { width: 0.95em; height: 0.95em; border-radius: 50%; background: radial-gradient(circle, #ffe29a 0 22%, rgba(255, 194, 61, 0.75) 45%, rgba(255, 194, 61, 0) 72%); }
#hud:not(.mode-play) .why-card, #hud.finished .why-card, #hud.replaying .why-card { display: none; }
#hud:has(.why-card:not(.hidden)) #message { bottom: calc(var(--dock-top, 84px) + 190px); }
/* 盤の上の記号（囲碁の図の △□○×）：黒石の上は白、白石と空き点の上は墨色。にじむ縁取りで、どの時間帯の盤でも読める */
.insight-mark { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; animation: futureIn 0.3s ease-out; }
.insight-mark svg { width: 100%; height: 100%; fill: none; stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.insight-mark.on-1 svg { stroke: #fbf7ee; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7)); }
.insight-mark.on-0 svg, .insight-mark.on-2 svg { stroke: #2b2622; filter: drop-shadow(0 0 2px rgba(255, 250, 235, 0.95)); }
/* ヒントの「候補手と目数」の札：交点に小さな輪、そこから糸を立てて、上に目数の札。一番良い手は金色、ほかは白い札 */
.cand-tag { position: absolute; width: 0; height: 0; pointer-events: none; animation: candIn 0.3s ease-out; }
.cand-pin { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fbf7ee; box-shadow: 0 0 0 1px rgba(43, 38, 34, 0.55), 0 0 6px rgba(255, 240, 200, 0.9); }
.cand-stem { position: absolute; left: -0.75px; bottom: 6px; width: 1.5px; height: 14px; background: rgba(251, 247, 238, 0.9); box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.6); }
.cand-text { position: absolute; left: 0; bottom: 20px; transform: translateX(-50%); padding: 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; color: #2b2622; background: rgba(251, 247, 238, 0.94); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
@keyframes candIn { from { transform: translateY(6px) scale(0.6); opacity: 0; } }
.cand-tag.best .cand-text { background: #ffd36b; color: #3a2a08; }
.cand-tag.best .cand-pin { border-color: #ffd36b; box-shadow: 0 0 0 1px rgba(58, 42, 8, 0.6), 0 0 8px rgba(255, 210, 90, 0.95); }
.cand-tag.best .cand-stem { background: #ffd36b; }
/* 未来予想の強さの段：右端に「手順の矢印」の入れ切り（アイコン1つの小さな枠。ON のときは選択中の色） */
.display-pop .future-opts .pop-time-row .seg.seg-one { flex: 0 0 auto; width: 46px; }
.display-pop .future-opts .seg-words button { font-size: 12px; padding: 8px 1px; letter-spacing: -0.02em; }
.display-pop .future-opts .pop-time-row .seg-words { flex: 1 1 auto; }
/* 未来予想：区切りで止まっているあいだ、形勢の棒はその先の局面の形勢までグイっと伸び縮みする（行きすぎて戻るばねの動き）。
   棒の境目には灯りと同じ琥珀色の光が差し、今の形勢の位置には生成りの細い印が残る。下の一言も琥珀色になる */
@keyframes ghostIn { from { opacity: 0; transform: scaleY(0.4); } }

/* ---------- アドバイスのカード（ヒントの理由と同じ紙の札。モニタ・iPad 横向きは右側の縦長の札、それ以外は下寄せで中を縦にスクロール） ---------- */
.advice-card {
  position: absolute; bottom: calc(var(--dock-top, 84px) + 12px); left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px)); max-height: 46vh; max-height: 46dvh; display: flex; flex-direction: column;
  background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 14px; font-size: 13.5px; line-height: 1.7;
  color: var(--ink); animation: cardIn 0.35s cubic-bezier(0.2, 1.2, 0.4, 1); user-select: text; -webkit-user-select: text; pointer-events: auto;
}
.advice-card.side {
  left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; width: 340px; max-height: none;
  top: calc(max(12px, env(safe-area-inset-top)) + 104px); bottom: calc(var(--dock-top, 84px) + 12px); animation-name: sideIn;
}
.adv-top { display: flex; align-items: center; gap: 8px; flex: none; }
.adv-top b { font-family: var(--font-pop); font-size: 15px; }
.adv-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 4px -6px 0 0; padding-right: 6px; font-weight: 400; }
.adv-body h4 { margin: 10px 0 2px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.adv-body h4::before { content: ''; width: 4px; height: 13px; border-radius: 2px; background: var(--sun-d); }
.adv-body h4:first-child { margin-top: 2px; }
.adv-body p { margin: 0 0 4px; }
.adv-move { position: relative; margin: 6px 0; padding: 7px 10px 8px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--paper); }
.adv-move:hover { background: #fffaf0; }
.adv-move.focus { border-color: var(--sun-d); box-shadow: 0 0 0 2px rgba(217, 155, 12, 0.18); }
.adv-move.best { border-color: #e6c873; }
.adv-move.rec .adv-mt { color: #8a5a00; }
.adv-move.trap { border-color: #e7b7ad; background: #fff7f5; }
.adv-mt { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.adv-move ul { margin: 2px 0 0; padding: 0; list-style: none; }
.adv-move li { position: relative; padding-left: 16px; margin: 1px 0; font-size: 12.5px; }
.adv-move li::before { position: absolute; left: 1px; top: 0; font-weight: 800; }
.adv-move li.plus::before { content: '＋'; color: #2f9e5b; }
.adv-move li.minus::before { content: '－'; color: #c4472f; }
.adv-future { position: absolute; top: 5px; right: 6px; padding: 3px 10px; font-size: 11.5px; }
.adv-move:not(.trap) .adv-mt { padding-right: 78px; }
.adv-lesson { padding: 6px 10px; border-radius: 10px; background: #fff3cf; font-weight: 700; }
.adv-foot { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.adv-note { flex: 1; font-size: 11px; color: var(--muted); font-weight: 400; }
.adv-foot button { flex: none; padding: 6px 14px; font-size: 13px; }
#hud:not(.mode-play) .advice-card, #hud.finished .advice-card, #hud.replaying .advice-card { display: none; }
/* 下寄せのときは、ヒントの理由のカードを先に見せる（重なるので） */
#hud:has(.why-card:not(.hidden)) .advice-card:not(.side) { display: none; }
#hud:has(.advice-card:not(.hidden):not(.side)) #message { bottom: calc(var(--dock-top, 84px) + 46vh + 20px); }
/* 設定の吹き出しのアドバイスの欄 */
.display-pop .adv-opts { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.display-pop .adv-label { flex: none; font-size: 12px; color: var(--ink-2); }
.display-pop .adv-select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 5px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.display-pop .adv-keys input { flex: 1 1 0; min-width: 0; font: inherit; font-size: 12px; font-weight: 400; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); user-select: text; -webkit-user-select: text; }
.display-pop .adv-keys input#adviceKey { flex-grow: 1.4; }
.display-pop .adv-keynote { margin: 0; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.adv-body p { white-space: pre-line; }
/* 右側の札が出ている間は、拡大縮小のボタンを札の左へよける */
#hud:has(.advice-card.side:not(.hidden)) #zoomCtl { right: calc(max(16px, env(safe-area-inset-right)) + 352px); }
.advice-card.side.shell { top: auto; }
.advice-card.shell .adv-body { display: none; }

/* ---------- 形勢の棒：呼び名と一言、未来予想の「ここに打つと」の2本目、打った手の採点、見方の説明 ---------- */
.evalbar { padding: 6px 10px 6px; }
/* 棒の両端の呼び名（あなた・AI。観戦では黒・白） */
.evbar-pct i { font-style: normal; font-size: 11px; font-weight: 700; margin-right: 5px; }
.evbar-pct.w i { margin: 0 0 0 5px; }
/* 目盛り：15・35・45・55・65・85%（勝ちが近い／有利／少し有利／互角 の境目） */
.evbar-ticks { position: absolute; inset: 0; pointer-events: none; --tick: rgba(150, 140, 120, 0.75);
  background:
    linear-gradient(var(--tick), var(--tick)) 15% 100% / 1px 6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 35% 100% / 1px 6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 45% 100% / 1px 6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 55% 100% / 1px 6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 65% 100% / 1px 6px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 85% 100% / 1px 6px no-repeat; }
/* 棒の下の一言：「あなたが少し有利（3目半ほどリード）」。右端に見方の [?] */
.ev-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; margin-top: 3px; padding: 0 24px; }
.ev-line .evbar-lead { margin-top: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.ev-deep { display: none; font-size: 11px; color: var(--muted); }
.evalbar.deepening .ev-deep { display: inline; }
.ev-deep::after { content: ""; animation: dots 1.2s steps(4) infinite; }
.ev-line .help-q { position: absolute; right: 0; top: 50%; margin-top: -9px; pointer-events: auto; cursor: pointer; }
/* 未来予想を見ているあいだ：「いま」と「この先」の2本を上下にぴったり並べ、下に一言（良くなる・悪くなる）。
   盤の上の端を隠さないよう背を低くする（いまの形勢の一言は、そのあいだしまう） */
.ev-rowtag { display: none; flex: none; width: 3.4em; font-size: 11px; font-weight: 700; line-height: 1; text-align: center; color: var(--ink-2); }
.with-future .ev-rowtag { display: block; }
.with-future .ev-now, .ev-frow { display: flex; align-items: center; gap: 4px; }
.with-future .ev-now { padding: 0 7px; }
.with-future .ev-now .evbar, .ev-frow .evbar { flex: 1 1 auto; min-width: 0; }
.evalbar.with-future .ev-line { display: none; }
.ev-future { margin-top: 4px; padding: 3px 5px 2px; border: 2px dashed #e0a12a; border-radius: 10px; background: #fff8e6; }
.ev-future.hidden { display: none; }
.ev-future .ev-rowtag { color: #8a5a00; }
.ev-future .evbar-b { transition: width 0.8s cubic-bezier(0.25, 1.6, 0.4, 1); }
.ev-future.pending .ev-frow { opacity: 0.25; }
.ev-future.pending .evbar-pct { visibility: hidden; }
.ev-fline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin-top: 2px; font-size: 12px; line-height: 1.5; }
.ev-fline b { color: #8a5a00; font-weight: 700; }
.ev-verdict { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ev-verdict.up { color: #24804e; }
.ev-verdict.down { color: #c2452d; }
.ev-future.pending .ev-verdict::after { content: ""; animation: dots 1.2s steps(4) infinite; }
/* 採点の札：「いまの手：少し損（一番の手より 1目半ほど損）」 */
.grade-toast { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 7px auto 1px; padding: 5px 14px 5px 10px; border: 0; border-radius: 999px; background: #2e2a26; color: #fff; font-size: 13px; line-height: 1.4; box-shadow: none; pointer-events: auto; cursor: pointer; }
.grade-toast.hidden { display: none; }
.grade-toast.pop { animation: tentIn 0.25s ease-out; }
.grade-toast b { white-space: nowrap; }
.grade-toast small { font-size: 12px; opacity: 0.82; }
.grade-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--g, #8a9a3a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g, #8a9a3a) 40%, transparent); }
/* 未来予想を見ているあいだの一言：「まだ打っていません」の帯 */
#message.future { background: #fff3cf; color: #5c3d00; border: 2px solid #e0a12a; border-radius: 14px; padding: 7px 16px; font-size: 14px; line-height: 1.5; white-space: normal; text-align: center; width: max-content; max-width: min(820px, calc(100vw - 32px)); }
/* 設定の「未来予想の見せ方」：1行に1つずつ、名前つき */
.display-pop .future-opts .pop-time-row .seg:last-child, .display-pop .future-opts .pop-time-row .seg.seg-one { flex: 1 1 auto; width: auto; }
.display-pop .future-opts .adv-label { width: 6em; }
/* 見方の説明 */
.help-h { margin: 16px 0 0; font-size: 14px; color: var(--ink); }
.help-h:first-of-type { margin-top: 10px; }
.help-dlg .help-lead { margin: 4px 0 8px; }
.help-fig { margin: 8px 0; padding: 10px; border-radius: 12px; background: #fff; }
.help-zones { display: grid; grid-template-columns: 15fr 20fr 10fr 10fr 10fr 20fr 15fr; margin-top: 3px; font-size: 10px; line-height: 1.25; text-align: center; color: var(--ink-2); }
.help-zones span { padding: 0 1px; border-left: 1px solid var(--line); }
.help-zones span:first-child { border-left: 0; }
.help-zones.num { margin-top: 1px; color: var(--muted); font-variant-numeric: tabular-nums; }
.help-grades { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.grade-chip { padding: 3px 12px 4px; border-radius: 12px; background: var(--g); color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
.grade-chip small { display: block; font-size: 10px; font-weight: 500; opacity: 0.9; }
/* 片方がごく短いとき、呼び名と数字は色の境目の外側（相手の色の上）に置く */
.evbar-pct.b.flip { left: calc(var(--b, 0%) + 8px); }
.evbar-pct.w.flip { right: calc(100% - var(--b, 100%) + 8px); }
/* ここまでの形勢の流れ（形勢の棒の下の小さな折れ線。上が黒・下が白）と、損をした手の色の点 */
.ev-spark { position: relative; height: 26px; margin-top: 4px; pointer-events: auto; }
.ev-spark svg { display: block; width: 100%; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #ece7dc 0 50%, #fbf9f4 50% 100%); overflow: visible; }
.ev-spark .mid { stroke: var(--sun-d); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ev-spark .line { fill: none; stroke: #2e2a26; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ev-spark .area { fill: rgba(46, 42, 38, 0.14); }
.ev-dots i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 1.5px #fff; }
.evalbar.with-future .ev-spark { display: none; }
html:not(.go-look) .ev-spark svg { background: linear-gradient(180deg, #f6dcd5 0 50%, #d9e6f8 50% 100%); }
/* 盤の上の札：採点の色の点（打った石の上）、未来予想の先の％（予想の最後の石のそば） */
.grade-mark { position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--g); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.5); pointer-events: none; animation: futureIn 0.24s ease-out; }
.future-pct { position: absolute; transform: translate(-50%, -100%); padding: 1px 9px 2px; border-radius: 999px; background: #fff3cf; border: 1.5px solid #e0a12a; color: #5c3d00; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
/* 振り返りの見どころ：採点で損だった手は、印を採点の色にする */
.rp-marks button.graded svg, html:not(.go-look) .rp-marks button.graded svg { fill: var(--g); stroke: #fff; stroke-width: 1.5; }
/* 予想を自分で送るボタン（「この先」の棒の下） */
.ev-step { display: inline-flex; gap: 3px; pointer-events: auto; }
.ev-step.hidden { display: none; }
.ev-step button { min-width: 26px; height: 22px; padding: 0 6px; border: 1px solid #e0a12a; border-radius: 6px; background: #fff; color: #8a5a00; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; }
.ev-step button:disabled { opacity: 0.35; cursor: default; }
.ev-step button.hidden { display: none; }
@media (hover: hover) { .ev-step button:hover:not(:disabled) { background: #fff3cf; } }
/* 試した点の札：今の形勢との差（▲9%・▼13%） */
.tried-tag { position: absolute; transform: translate(-50%, -50%); padding: 0 6px; border-radius: 999px; background: rgba(255, 253, 247, 0.94); border: 1.5px solid #b5ad98; color: #485263; font-size: 11.5px; font-weight: 800; line-height: 1.6; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.tried-tag.up { border-color: #24804e; color: #1c6a40; }
.tried-tag.down { border-color: #c2452d; color: #a83a25; }
/* 「AI ならここ」のボタンと、AI の手の札 */
.ev-step #evAiBtn { margin-left: 4px; }
.tried-tag.ai { background: #fff3cf; }
/* 予想の最後の形（左下の小さな図） */
.future-mini { position: absolute; left: 16px; bottom: calc(var(--dock-top, 84px) + 12px); width: 196px; padding: 7px 8px 8px; background: rgba(255, 255, 255, 0.95); border: 2px dashed #e0a12a; border-radius: 14px; box-shadow: var(--shadow); }
.future-mini.hidden { display: none; }
.fm-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.fm-top b { font-size: 11.5px; line-height: 1.3; color: #8a5a00; }
.fm-svg { display: block; width: 100%; height: auto; }
.fm-svg .bd { fill: #e2b470; }
.fm-svg .ln { fill: none; stroke: #6d5326; stroke-width: 0.04; }
.fm-svg .s1 { fill: #1f1c19; }
.fm-svg .s2 { fill: #fdfbf4; stroke: #6d6759; stroke-width: 0.05; }
.fm-svg .fut { opacity: 0.88; }
.fm-svg .first { stroke: #e0a12a; stroke-width: 0.14; opacity: 1; }
.fm-svg text { text-anchor: middle; font-family: var(--font-pop); font-weight: 800; }
.fm-svg .t1 { fill: #fff; }
.fm-svg .t2 { fill: #1f1c19; }
.fm-svg .gone { fill: none; stroke: #c2452d; stroke-width: 0.12; stroke-linecap: round; }
html:not(.go-look) .fm-svg .bd { fill: #cdbb98; }
html:not(.go-look) .fm-svg .s1 { fill: #e2513a; }
html:not(.go-look) .fm-svg .s2 { fill: #2e7be0; stroke: none; }
html:not(.go-look) .fm-svg .t2 { fill: #fff; }
@media (max-width: 900px), (max-height: 560px) { .future-mini { display: none; } }
/* 予想の最後の石の札：1行目に勝つ見込み、2行目に今とくらべた目数の得・損 */
.future-pct { white-space: pre-line; text-align: center; line-height: 1.3; padding: 2px 9px 3px; }
.future-pct.loss::first-line, .future-pct.gain::first-line { color: #5c3d00; }
.future-pct.loss { color: #a83a25; }
.future-pct.gain { color: #1c6a40; }
/* 形勢の棒を目数で見せるとき：勝つ見込みは、棒の上の小さな ▼ で目安だけ示す */
.evbar-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.evbar-wr { position: absolute; top: -8px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e0a12a; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); z-index: 3; transition: left 0.6s ease; }
.evbar-wr.hidden { display: none; }
.evalbar.by-lead { padding-top: 24px; }
.evalbar.by-lead .evbar-ticks { display: none; }
.evalbar.by-lead .ev-future { padding-top: 22px; }
.evalbar.by-lead.with-future .ev-future { margin-top: 2px; }
/* 未来予想の吹き出し */
.future-pop { width: 330px; }
.future-pop .pop-head { align-items: center; justify-content: space-between; }
.future-pop .fp-title { font-size: 14px; color: #8a5a00; padding-left: 4px; }
.future-pop .fp-note { margin: 0 4px 4px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.future-pop .pop-time-row .seg { flex: 1 1 auto; }
.future-pop .adv-label { width: 6.2em; flex: none; font-size: 12px; color: var(--ink-2); }
.future-pop .seg-words button { font-size: 12px; padding: 8px 2px; }
/* ▼ の上の勝つ見込み（%） */
.evbar-wr::before { content: attr(data-p); position: absolute; left: 0; top: -24px; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; background: #fff3cf; border: 1px solid #e0a12a; color: #5c3d00; font-size: 11px; font-weight: 700; line-height: 15px; white-space: nowrap; }
/* 候補手を検討している AI の強さの目安（形勢の棒の下） */
.ev-cand-ai { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.ev-cand-ai.hidden { display: none; }
.ev-line { flex-wrap: wrap; }
/* 答え合わせ：打った石の上に、一番良い手より何目損だったか */
.review-tag { position: absolute; transform: translate(-50%, -100%); padding: 1px 9px 2px; border-radius: 999px; background: var(--g); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.35); animation: futureIn 0.24s ease-out; }

/* 候補手を何目損まで出すかの入力欄 */
.display-pop .cand-max { width: 64px; font: inherit; font-size: 13px; padding: 5px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: right; }
.display-pop .deep-max { width: 104px; }
/* 未来予想の分岐：自分で決めた手の札と、選んでいるあいだのボタン */
.branch-tag { position: absolute; transform: translate(-50%, -50%); padding: 0 6px; border-radius: 999px; background: #2f3a4d; border: 1.5px solid #fffdf7; color: #fffdf7; font-size: 11px; font-weight: 800; line-height: 1.6; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.ev-step #evBranchBtn { margin-left: 4px; }
.ev-step #evBranchBtn.on { background: #2f3a4d; color: #fffdf7; }
/* 予想を見比べる欄（盤の左下。小さな図を横に並べる） */
.future-cmp { position: absolute; left: 16px; bottom: calc(var(--dock-top, 84px) + 12px); max-width: calc(100vw - 32px); padding: 7px 8px 8px; background: rgba(255, 255, 255, 0.95); border: 2px dashed #e0a12a; border-radius: 14px; box-shadow: var(--shadow); }
.future-cmp.with-mini { bottom: calc(var(--dock-top, 84px) + 262px); }
.future-cmp.hidden { display: none; }
.fc-list { display: flex; gap: 8px; overflow-x: auto; }
.fc-card { flex: 0 0 132px; display: flex; flex-direction: column; gap: 2px; padding: 5px 6px 6px; border: 1.5px solid #e6dcc4; border-radius: 10px; background: #fffdf7; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.fc-card:hover { border-color: #e0a12a; }
.fc-card.on { border-color: #e0a12a; background: #fff3cf; }
.fc-head { font-size: 12px; font-weight: 800; color: #8a5a00; }
.fc-what { font-size: 10.5px; line-height: 1.3; color: #6d6759; }
.fc-val { font-size: 13px; font-weight: 800; }
.fc-val.gain { color: #1c6a40; }
.fc-val.loss { color: #a83a25; }
@media (max-width: 900px), (max-height: 560px) { .future-cmp { display: none; } }
/* AI の強さを変える：札の AI の名前を押せる印と、強さを選ぶ吹き出し */
.player.level-pick { cursor: pointer; }
.player.level-pick .pname { text-decoration: underline dotted 1.5px; text-underline-offset: 3px; }
.player.level-pick:hover { border-color: #e0a12a; }
.level-pop { width: 320px; }
.level-pop .pop-head { justify-content: space-between; align-items: center; margin: 0; }
.level-pop .fp-title { font-size: 13px; }
.level-pop .seg-level { display: flex; }
.level-pop .seg-level button { flex: 1 1 0; }
.level-pop .fp-note { margin: 0; font-size: 12px; line-height: 1.5; color: #6d6759; }
/* AI の候補手の設定欄（設定の吹き出しとは別。開いたまま対局でき、見出しをつかんで動かせる） */
.cand-panel { width: 360px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 12; }
.cand-panel .cp-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px 6px; cursor: grab; user-select: none; touch-action: none; border-bottom: 1px solid var(--line); }
.cand-panel.dragging .cp-head { cursor: grabbing; }
.cand-panel .cp-head b { font-size: 13.5px; }
.cand-panel .cp-grip { margin-left: auto; color: #9a927f; font-size: 15px; }
.cand-panel section { padding: 6px 2px 2px; }
.cand-panel section + section { border-top: 1px dashed var(--line); }
.cand-panel h4 { margin: 0 0 5px; font-size: 11.5px; color: #8a5a00; font-weight: 800; }
.cand-panel .cp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.cand-panel .seg { flex: 1 1 auto; }
.cand-panel .adv-select { flex: 1 1 90px; min-width: 0; font: inherit; font-size: 13px; padding: 5px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.cand-panel .cand-max { width: 64px; font: inherit; font-size: 13px; padding: 5px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: right; }
.cand-panel .deep-max { width: 96px; }
.cand-panel #deepMaxNote { flex: 1 1 100%; font-size: 11.5px; color: #6d6759; }
.cand-panel .cp-row .seg + .seg { margin-top: 0; }
.display-pop .cand-open { font: inherit; font-size: 13px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; }
.display-pop .cand-open:hover { border-color: #e0a12a; }
@media (max-width: 600px) { .cand-panel { width: calc(100vw - 16px); max-height: min(50dvh, calc(100dvh - var(--dock-top, 84px) - 24px)); } } /* スマホ：操作パネルの上に収め、中だけスクロール */

/* ---------- スマホの横向き：札と形勢の棒は左の列、操作パネルは右の縦の列。盤はそのあいだのまん中（app.js の LAND_MQ と同じ条件） ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .scoreboard { left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); transform: none; width: 230px; grid-template-columns: 1fr; gap: 6px; }
  .player { min-height: 0; padding: 6px 10px 12px; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; }
  .player.p2 { grid-template-columns: auto minmax(0, 1fr) 28px; }
  .emblem { width: 28px; height: 28px; font-size: 13px; }
  .pname { font-size: 13px; }
  .prole { font-size: 11px; }
  .pscore b { font-size: 22px; }
  .turn-info { flex-direction: row; justify-content: center; width: auto; margin: 4px 0 0; }
  #moveNo, #thinking { width: auto; padding: 4px 12px; }
  #hud.replaying .turn-info { margin-top: 4px; }
  .evalbar { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); transform: none; width: 230px; padding: 5px 8px; }
  .dock {
    left: auto; right: max(8px, env(safe-area-inset-right)); bottom: auto; top: 50%; transform: translateY(-50%);
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 2px; padding: 4px; max-width: none; max-height: calc(100dvh - 16px); overflow: visible;
  }
  .dock .sep { display: none; }
  .dock button { min-width: 56px; padding: 5px 2px 4px; font-size: 10.5px; gap: 2px; }
  .dock button svg { width: 20px; height: 20px; }
  .dock .hide-btn { min-width: 56px; }
  #hud.dock-hidden .dock { transform: translate(calc(100% + 24px), -50%); }
  #dockTab { left: auto; right: max(8px, env(safe-area-inset-right)); transform: translateX(calc(100% + 20px)); }
  #hud.dock-hidden #dockTab { transform: none; }
  /* 盤の下の端に重なるものは、左右の列のあいだの幅に収める */
  #message { bottom: 10px; max-width: calc(100vw - 480px); font-size: 13px; padding: 7px 14px; }
  #hud.replaying #message { bottom: 150px; }
  .replay-bar { width: min(560px, calc(100vw - 480px)); }
  .why-card, .advice-card, .result-card, .count-panel { width: min(440px, calc(100vw - 480px)); max-height: calc(100dvh - 16px); }
  .cand-panel { width: min(360px, calc(100vw - 100px)); }
  /* 左の列は狭いので、形勢の棒の下の補足（読んでいる途中・候補手を検討している AI の強さ）は出さない */
  .ev-cand-ai, .ev-deep { display: none !important; }
}