/* ============================================================
   中将棋 スタイル
   - 画面の向きで配置を切り替える: 縦長(スマホ・縦の窓)は上から順に積み、横長(PC)は左に盤・右にパネル
   - 盤の1マスの大きさ(--cs)は、画面に収まる最大の大きさに自動で合わせる
   - ボタンは、タップしやすい高さ(--btn-h)を確保する
   ============================================================ */
:root {
  --bg: #efe6d2;
  --surface: #f8f1e0;
  --surface-2: #efe3c6;
  --surface-3: #e6d6b0;
  --line-ui: #b9a98a;
  --text: #1c1a17;
  --muted: #5b5444;
  --accent: #a8321f;
  --accent-2: #bd3f2b;
  --gold: #c9a227;
  --danger: #a8321f;
  --wood: #e0b468;
  --line: #5b4220;
  --ink: #1c1a17;
  --red: #c62828;

  --pad: 12px;
  --rank: 22px;       /* 盤の右の段表示の幅 */
  --files-h: 20px;    /* 盤の上の筋表示の高さ */
  --panel-w: clamp(360px, 25vw, 480px);   /* 横長画面での右パネルの幅(大きい画面ほど広く) */
  --btn-h: 44px;      /* ボタンの高さ(タップしやすい大きさ) */
  --radius: 2px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 縦長画面: 盤は画面の幅いっぱいに。縦が足りないときだけ縮める */
  --cs: min(calc((100vw - 2 * var(--pad) - var(--rank)) / 12), calc((100vh - 345px) / 12), 64px);
}
@supports (height: 100dvh) {
  :root { --cs: min(calc((100vw - 2 * var(--pad) - var(--rank)) / 12), calc((100dvh - 345px) / 12), 64px); }
}
/* 横長画面: 盤は画面の高さいっぱいに(右にパネルの幅を残す) */
@media (min-aspect-ratio: 1/1) {
  :root { --cs: min(calc((100vh - 2 * var(--pad) - var(--files-h) - 8px) / 12), calc((100vw - var(--panel-w) - 3 * var(--pad) - var(--rank) - 8px) / 12), 80px); }
}
@media (min-aspect-ratio: 1/1) and (min-height: 1px) {
  @supports (height: 100dvh) {
    :root { --cs: min(calc((100dvh - 2 * var(--pad) - var(--files-h) - 8px) / 12), calc((100vw - var(--panel-w) - 3 * var(--pad) - var(--rank) - 8px) / 12), 80px); }
  }
}
@media (max-width: 520px) { :root { --pad: 8px; --rank: 18px; --files-h: 18px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
body { min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* ---------- ボタン ---------- */
button, select { font: inherit; }
button {
  min-height: var(--btn-h); padding: 8px 14px; border: 1px solid #b9a98a; background: #f8f1e0; color: #1c1a17;
  border-radius: 2px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background .12s, transform .06s;
}
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { button:hover:not(:disabled) { background: #fff8e6; } }
button.primary { background: var(--accent); color: #fff; border-color: #8c2a1e; font-weight: 700; }
@media (hover: hover) { button.primary:hover:not(:disabled) { background: var(--accent-2); } }

/* ---------- 設定画面 ---------- */
.card { max-width: 640px; margin: 0 auto; padding: 20px var(--pad) 28px; }
.hero { padding: 8px 4px 16px; }
.hero h1 { margin: 0 0 4px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 36px; letter-spacing: .3em; line-height: 1.2; }
.sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.hint-text { margin: -4px 0 10px; color: var(--muted); font-size: 13px; min-height: 1.2em; }
.grp { margin: 0 0 14px; padding: 14px 18px; background: var(--surface); border: 1px solid #cdbf9f; border-radius: 2px; box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px #dccfb0; }
.grp h2 { margin: 0 0 6px; font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 15px; letter-spacing: .08em; color: var(--accent); }
.grp h3 { margin: 16px 0 4px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.more-opts > summary, .rules > summary { cursor: pointer; font-weight: 700; padding: 8px 0; list-style-position: inside; }
.more-opts[open] > summary { margin-bottom: 4px; }
.card .opt { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 10px 0; }
.lbl { color: var(--text); font-size: 15px; }
.card select { width: 100%; min-height: var(--btn-h); padding: 6px 8px; border-radius: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.seg button { flex: 1 1 auto; min-width: 48px; min-height: 42px; padding: 6px 10px; font-size: 15px; background: var(--surface); color: var(--text); border: 1px solid var(--line-ui); border-radius: 2px; font-weight: 700; }
@media (hover: hover) { .seg button:hover { background: var(--surface-3); } }
.seg button.on { background: var(--accent); border-color: #8c2a1e; color: #fff; font-weight: 700; }
.card .opt-level { grid-template-columns: 1fr; gap: 4px; }
.opt-level .seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.opt-level .seg button { min-width: 0; padding: 6px 0; font-size: 14px; border-radius: 8px; }
.actions { display: grid; gap: 8px; margin: 18px 0 0; }
#btn-start { min-height: 54px; font-size: 19px; border-radius: 12px; letter-spacing: .15em; }
#btn-resume { min-height: 54px; order: -1; background: var(--gold); color: #1d1a14; border-color: #8f7416; font-size: 17px; }
@media (hover: hover) { #btn-resume:hover { background: #ffd54f; } }
.filebtn { display: block; text-align: center; margin: 10px 0 0; padding: 12px; border: 1px solid var(--line-ui); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 15px; min-height: var(--btn-h); touch-action: manipulation; }
@media (hover: hover) { .filebtn:hover { background: var(--surface-3); } }
#record { margin: 12px 0 0; font-size: 13px; }
.rules { margin-top: 14px; padding: 0 18px; background: var(--surface); border: 1px solid #cdbf9f; border-radius: 2px; font-size: 14px; color: var(--muted); }
.rules ul { margin: 0; padding: 0 0 12px 1.2em; }
.rules li { margin: 8px 0; }
@media (max-width: 560px) {
  .card .opt { grid-template-columns: 1fr; gap: 6px; margin: 14px 0; }
  .hero h1 { font-size: 30px; }
  /* 「対局開始」は、設定を選んだあとも、画面の下でいつでも押せるようにする */
  .actions { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--pad)); padding: 14px var(--pad) calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 78%, transparent); z-index: 10; }
}

/* ---------- 対局画面の配置 ---------- */
#game { display: grid; justify-content: center; gap: 8px; padding: var(--pad); padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
#panel { display: contents; font-size: clamp(16px, calc(0.6vw + 8px), 22px); }
/* 縦長: 上から CPUの時計 → 盤 → あなたの時計 → 状態 → ヒント → 実況 → 検討 → グラフ → 棋譜 → 操作 */
#clock-top { order: 1; } #board-wrap { order: 2; } #clock-bottom { order: 3; } #status { order: 4; } #tip { order: 5; } #live { order: 6; }
#review { order: 7; } #evgraph { order: 8; } #kifu { order: 9; } #controls { order: 10; }
#game { grid-template-columns: minmax(0, calc(var(--cs) * 12 + var(--rank))); }
/* 横長: 左に盤、右にパネル */
@media (min-aspect-ratio: 1/1) {
  #game { grid-template-columns: auto var(--panel-w); gap: var(--pad) calc(var(--pad) * 1.5); align-items: start; }
  #clock-top, #board-wrap, #clock-bottom, #status, #tip, #live, #review, #evgraph, #kifu, #controls { order: 0; }
  #board-wrap { grid-column: 1; grid-row: 1; align-self: center; }
  #panel { display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 1; align-self: start; height: calc(100vh - 2 * var(--pad)); height: calc(100dvh - 2 * var(--pad)); min-height: 0; contain: size; overflow-y: auto; overscroll-behavior: contain; } /* contain: size で、パネルの中身の長さが盤の高さに影響しない(足りなければパネルの中でスクロール) */
  #live, #tip { flex: 1 1 7.6em; min-height: 7.6em; height: auto; }
  #controls { margin-top: auto; }
  #game.reviewing #evgraph { height: 92px; flex: none; }
}

/* ---------- 盤 ---------- */
#board-area { display: inline-block; max-width: 100%; }
#files { display: grid; grid-template-columns: repeat(12, var(--cs)); width: calc(var(--cs) * 12); text-align: center; font-size: clamp(10px, calc(var(--cs) * .3), 14px); color: var(--muted); height: var(--files-h); line-height: var(--files-h); }
#board-row { display: flex; }
#ranks { display: grid; grid-template-rows: repeat(12, var(--cs)); font-size: clamp(10px, calc(var(--cs) * .3), 14px); color: var(--muted); width: var(--rank); padding-left: 4px; align-items: center; }
#board {
  display: grid; grid-template-columns: repeat(12, var(--cs)); grid-template-rows: repeat(12, var(--cs));
  background: repeating-linear-gradient(91deg, rgba(110,70,20,.07) 0 2px, transparent 2px 9px), repeating-linear-gradient(89deg, rgba(255,255,255,.07) 0 1px, transparent 1px 5px), linear-gradient(#e6bd74, #d9aa5c);
  border: 1px solid #5b4220; box-shadow: 0 0 0 3px #bd8c48, 0 0 0 4px #6b4a1f, 0 8px 16px rgba(60,40,15,.38); touch-action: manipulation;
}
.cell { position: relative; border: 0.5px solid #5b4220; display: flex; align-items: center; justify-content: center; cursor: default; }
#board.checker .cell.alt { background-image: linear-gradient(#7a4a0026, #7a4a0026); }
.cell.sel { background: #ffe082; }
.cell.last-from { background: #ffcc8099; box-shadow: inset 0 0 0 3px #ef6c00; }
.cell.last-via { background: #ffcc8066; box-shadow: inset 0 0 0 2px #ef6c0099; }
.cell.last-to { background: #ffa726; box-shadow: inset 0 0 0 4px #e65100; }
.cell.last-to .piece { filter: drop-shadow(0 0 4px #e65100) drop-shadow(0 1px 0 #0004); }
.cell.dest::after { content: ""; position: absolute; width: max(30%, 9px); height: max(30%, 9px); border-radius: 50%; background: #2e7d32aa; pointer-events: none; z-index: 3; }
.cell.dest.cap::after { width: 86%; height: 86%; background: none; border: 3px solid #d32f2faa; border-radius: 6px; }
.cell.via::after { content: ""; position: absolute; inset: 4%; border: 3px solid #1565c0; border-radius: 6px; z-index: 3; pointer-events: none; }
.cell.mine, .cell.can { cursor: pointer; }
.cell.hint-from { box-shadow: inset 0 0 0 3px #1565c0; background: #bbdefb99; }
.cell.hint-to { box-shadow: inset 0 0 0 4px #1565c0; background: #90caf9aa; }

.piece {
  width: 84%; height: 88%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(#a58545, #6f5126); color: var(--ink);
  clip-path: polygon(50% 0, 86% 12%, 100% 100%, 0 100%, 14% 12%);
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif; font-weight: 700;
  font-size: calc(var(--cs) * 0.40); line-height: 0.96; padding-top: 6%; padding-bottom: 7%; box-sizing: border-box; user-select: none; -webkit-user-select: none; position: relative;
}
.piece span { display: block; position: relative; z-index: 1; }
.piece.one { font-size: calc(var(--cs) * 0.60); padding-top: 14%; padding-bottom: 7%; }
.piece.white { transform: rotate(180deg); }
.piece.promoted { color: var(--red); }
/* 駒の面: 縁(.piece の背景)より少し内側に重ね、下側を厚くして立体感を出す */
.piece::before { content: ""; position: absolute; inset: 1.5px 1.5px 3px; clip-path: polygon(50% 0, 86% 12%, 100% 100%, 0 100%, 14% 12%); background: linear-gradient(#ffffff73, #fff0 45%), linear-gradient(#fbe9bb, #eccc86); }
/* 仲人の下(玉側)の線の交点の目印(囲碁の星のような黒い点) */
#board { position: relative; }
#board .star { position: absolute; width: max(6px, calc(var(--cs) * .16)); height: max(6px, calc(var(--cs) * .16)); transform: translate(-50%, -50%); border-radius: 50%; background: #000; z-index: 4; pointer-events: none; }
/* 検討中、好手・悪手の印(! ?! ? ??)を、指した駒の右上に出す */
.cell .mkbadge { position: absolute; right: 1%; top: 1%; z-index: 6; min-width: 1.5em; padding: 0 .3em; border-radius: 999px; font: 700 clamp(9px, calc(var(--cs) * 0.27), 16px)/1.35 sans-serif; color: #fff; text-align: center; pointer-events: none; box-shadow: 0 0 0 1px #0007; }
.mkbadge.mk1 { background: #b8941f; } .mkbadge.mk2 { background: #ef6c00; } .mkbadge.mk3 { background: #d32f2f; } .mkbadge.mkg { background: #2e9d4f; }

/* ---------- パネル ---------- */
.clock { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid #cdbf9f; border-left: 5px solid #b9a98a; }
.clock.active { border-left-color: var(--accent); background: var(--surface-2); }
.clock .who { font-size: 1em; font-weight: 700; }
.clock .time { font-size: 1.5em; font-variant-numeric: tabular-nums; }
.clock.low .time { color: #c62828; }
#status.thinking { animation: pulse 1.3s ease-in-out infinite; }
#status.over { background: var(--surface-2); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 8px 12px; font-size: 1.15em; }
#status.check { color: #fff; background: #b3261e; border-radius: var(--radius); padding: 6px 12px; }
.cell.check { background: #ff8a80; box-shadow: inset 0 0 0 3px #d32f2f, 0 0 12px 2px #d32f2faa; }
@keyframes pulse { 50% { opacity: .45; } }
#status { min-height: 1.7em; font-weight: 700; color: var(--accent); font-size: 1em; padding: 0 2px; }
#tip, #live { background: var(--surface); border-radius: var(--radius); padding: 10px 14px; font-size: 1em; line-height: 1.65; overflow-wrap: anywhere; }
#tip { border-left: 4px solid #c9a227; }
/* ヒントは、実況と同じ場所に入れ替えて出す(画面の配置がずれないように) */
#tip, #live { height: var(--live-h, 7.6em); overflow-y: auto; }
#live { color: var(--text); }
#tip:not(.hidden) ~ #live { display: none; }
#live p { margin: 0 0 4px; font-size: .82em; opacity: .65; }
#live p:last-child { font-size: 1.08em; font-weight: 700; color: var(--text); opacity: 1; }
#game:not(.reviewing) #evgraph { display: none; }
#evgraph { position: relative; height: 72px; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
#evgraph svg { width: 100%; height: 100%; display: block; }
#evgraph.clickable { cursor: pointer; outline: 1px solid rgba(168,50,31,.45); }
#evgraph span { position: absolute; left: 8px; font-size: .72em; color: var(--muted); pointer-events: none; }
#evgraph .up { top: 3px; } #evgraph .dn { bottom: 3px; }
#evgraph .gm { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #000a; pointer-events: none; }
#evgraph .gm.mk1 { background: #e0b72a; } #evgraph .gm.mk2 { background: #ef6c00; } #evgraph .gm.mk3 { background: #d32f2f; } #evgraph .gm.mkg { background: #43a047; }

/* 棋譜の一覧は、検討中だけ出す */
#kifu { display: none; margin: 0; padding: 8px 8px 8px 38px; background: var(--surface); border-radius: var(--radius); height: 9em; overflow-y: auto; font-size: .9em; }
#kifu.review { display: block; }
#kifu li { padding: 2px 0; }
#kifu li.cur { background: rgba(168,50,31,.12); border-radius: 4px; }
#kifu li.mk1 { color: #7a5c12; } #kifu li.mk2 { color: #a8431f; } #kifu li.mk3 { color: #b3261e; font-weight: 700; } #kifu li.mkg { color: #2e7d32; font-weight: 700; }
#kifu.review li { cursor: pointer; }

/* ---------- 検討 ---------- */
#review { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 10px; }
#rv-info { font-size: .96em; line-height: 1.55; height: 13em; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; } /* セリフの長さで、戻る・進むボタンの位置がずれないように高さを固定 */
#rv-info .ev { color: #7a5c12; }
#rv-info .bad { color: #b3261e; font-weight: 700; }
#rv-info .good { color: #2e7d32; font-weight: 700; }
#rv-info .cmt { display: block; margin-top: 3px; color: var(--text); }
#rv-info .why { display: block; margin-top: 3px; color: #a8431f; }
.rv-nav { display: grid; grid-template-columns: repeat(4, 1fr) 1.7fr; gap: 8px; }
.rv-nav button { min-height: 48px; padding: 6px 0; font-size: 1.15em; border-radius: 10px; }
.rv-nav #rv-play { font-size: .95em; }
.rv-act { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.rv-act #rv-more { display: none; }
.rv-act button { min-height: 46px; font-size: .95em; border-radius: 10px; }

/* ---------- 操作ボタン ---------- */
#controls { display: flex; flex-direction: column; gap: 8px; }
#controls-review { order: 1; } #controls-main { order: 2; } #controls-more { order: 3; }
#controls-main { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#controls-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#controls button { min-height: 46px; padding: 8px 4px; font-size: .95em; border-radius: 10px; white-space: nowrap; }
#controls-main button { font-weight: 700; }
#controls .rv-nav button { min-height: 48px; font-size: 1.15em; padding: 6px 0; }
#controls .rv-nav #rv-play { font-size: .95em; }
#controls .rv-act button { min-height: 46px; font-size: .95em; }
#controls #btn-hint { background: #c9a227; border-color: #8f7416; color: #1d1a14; }
@media (hover: hover) { #controls #btn-hint:hover:not(:disabled) { background: #dcb534; } }
#controls .danger { background: #fff; border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { #controls .danger:hover:not(:disabled) { background: #fbeae6; } }
#controls-more button, #btn-more { background: var(--surface-2); color: var(--text); border-color: var(--line-ui); font-weight: 400; }
@media (hover: hover) { #controls-more button:hover:not(:disabled), #btn-more:hover { background: var(--surface-3); } }
#btn-more { display: none; }
/* 検討中: 待った・進める・ヒント・投了は出さない */
#controls-review { display: none; flex-direction: column; gap: 8px; }
#controls.review #controls-main { display: none; }
#controls.review #controls-review { display: flex; }
#controls.review #controls-more { display: grid; }

/* 縦長: 操作ボタンは画面の下に固定(親指で押せる)。あまり使わない操作は「その他」にまとめる */
@media (max-aspect-ratio: 1/1) {
  #controls { position: sticky; bottom: 0; z-index: 20; flex-direction: column; margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad) calc(10px + var(--safe-b)); background: #e6dbc1; border-top: 1px solid #cdbf9f; }
  #controls-main { grid-template-columns: repeat(5, 1fr); }
  #btn-more { display: block; }
  /* 「その他」は、ボタンの上に浮かぶメニューにする(画面の配置を押し下げない) */
  #controls-more { display: none; position: absolute; left: var(--pad); right: var(--pad); bottom: calc(100% + 6px); padding: 10px; background: var(--surface); border: 1px solid var(--line-ui); border-radius: 14px; box-shadow: 0 -8px 24px rgba(60,40,15,.35); }
  #controls.open #controls-more { display: grid; }
  #controls.review #controls-more { display: none; }
  #controls.review.open #controls-more { display: grid; }
  .rv-act { grid-template-columns: 1fr 1.7fr .9fr; }
  .rv-act #rv-more { display: block; background: var(--surface-2); color: var(--text); border-color: var(--line-ui); }
  #clock-top, #clock-bottom { min-height: 40px; padding: 3px 12px; }
  #clock-top .time, #clock-bottom .time { font-size: 1.25em; }
  #game { --live-h: clamp(5.8em, calc(100vh - 12 * var(--cs) - 300px), 12em); } /* 盤の大きさに合わせ、残った高さを実況に使う */
  #live { padding: 8px 12px; }
  #live p:last-child { font-size: 1em; }
  #tip { font-size: .95em; padding: 8px 12px; }
  #evgraph { height: 52px; }
  #rv-info { height: 10em; font-size: .9em; }
  #kifu { height: 7em; }
}
@media (max-width: 380px) {
  #controls button { font-size: .82em; padding: 8px 0; }
}
/* 高さが低い縦長の画面(小さいスマホ): 盤・時計・実況・操作が1画面に収まるよう、余白を詰める */
@media (max-aspect-ratio: 1/1) and (max-height: 620px) {
  #game { gap: 5px; padding-top: 6px; --live-h: 3.7em; }
  #clock-top, #clock-bottom { min-height: 32px; padding: 1px 12px; }
  #status { min-height: 1.3em; font-size: .9em; }
  #live, #tip { padding: 5px 10px; font-size: .9em; }
  #live p:last-child { font-size: 1em; }
  #game:not(.reviewing) #evgraph { display: none; }
  #controls { padding-top: 6px; }
  #controls button { min-height: 42px; }
}

/* ---------- ダイアログ ---------- */
#dialog { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--pad); }
.dlg-box { background: #f8f1e0; color: #1c1a17; padding: 22px 24px; border: 1px solid #cdbf9f; border-radius: 2px; text-align: center; width: min(100%, 420px); box-shadow: 0 10px 40px #000a; }
.dlg-box p { margin: 0 0 18px; font-size: 18px; font-weight: 700; white-space: pre-line; line-height: 1.5; }
.dlg-btns { display: flex; gap: 10px; justify-content: center; }
.dlg-btns button { flex: 1; min-height: 50px; font-size: 16px; }
@media (max-width: 420px) { .dlg-btns { flex-direction: column; } }

/* ---------- 横向きのスマホ(高さが低い) ---------- */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  :root { --pad: 6px; --files-h: 16px; --panel-w: 300px; }
  #live, #tip { min-height: 3.8em; flex-basis: 3.8em; padding: 6px 12px; font-size: .9em; }
  #live p:last-child { font-size: 1em; }
  #game:not(.reviewing) #evgraph { display: none; }
  #evgraph { height: 44px; }
  #controls button { min-height: 40px; }
  #status { font-size: .9em; min-height: 1.4em; }
  .clock { min-height: 40px; padding: 2px 12px; }
  .clock .time { font-size: 1.25em; }
}

@media (prefers-reduced-motion: reduce) { button { transition: none; } #status.thinking { animation: none; } }

/* ---------- 検討中の配置 ---------- */
/* 検討中は時計を隠し、評価値のグラフを盤のすぐ下に出す */
#game.reviewing #clock-top, #game.reviewing #clock-bottom { display: none; }
@media (max-aspect-ratio: 1/1) {
  #game.reviewing #evgraph { order: 3; height: 64px; }
  #game.reviewing #status { order: 4; }
  #game.reviewing #review { order: 5; }
}

/* ---------- セリフはCPUの時計のすぐ下、広告はその分上(操作ボタンの上) ---------- */
#tip, #live { height: auto; min-height: 3.6em; max-height: 6em; flex: none; }
#clock-top { order: 1; } #tip, #live { order: 1; } #ad { order: 0; }
@media (min-aspect-ratio: 1/1) {
  #clock-top { order: -3; } #tip, #live { order: -2; flex: none; min-height: 3.6em; } #ad { order: -4; }
}
#ad { align-self: stretch; margin: 0; min-height: 50px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-ui); border-radius: 2px; background: rgba(248,241,224,.5); color: var(--muted); font-size: 12px; letter-spacing: .3em; flex: none; }
#ad { margin: 0 0 12px; overflow: hidden; } /* 画面の一番上(いつも見える所)。操作ボタンからは離す(Googleの規約: ボタンの近くに置かない) */
#ad.live { border: 0; min-height: 50px; max-height: 120px; }

/* 横向きのスマホ: 補助ボタンは「その他」で開く(広告・時計・実況・操作が、すべて画面に収まるように) */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #btn-more { display: block; }
  #controls-more, #controls.review #controls-more { display: none; }
  #controls.open #controls-more, #controls.review.open #controls-more { display: grid; }
  #ad { min-height: 44px; margin-bottom: 6px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .rv-act #rv-more { display: block; background: var(--surface-2); color: var(--text); border-color: var(--line-ui); }
  .rv-act { grid-template-columns: 1fr 1.7fr .9fr; }
}
/* 高さの低い縦長のスマホ: セリフと広告の枠を小さくして、盤・時計・操作が1画面に収まるように */
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  #tip, #live { min-height: 2.8em; max-height: 4.4em; padding: 5px 10px; font-size: .9em; }
  #ad { min-height: 44px; }
}

/* セリフ・ヒントは、CPUの時計の枠の中に出す(ほかの場所には出さない) */
#clock-top { flex-wrap: wrap; align-items: flex-start; }
#clock-top .who, #clock-top .time { align-self: center; }
#clock-top .who { flex: 1 1 auto; }
#clock-top #tip, #clock-top #live { order: 0; flex: 0 0 100%; background: none; border: 0; border-top: 1px solid rgba(0,0,0,.12); border-radius: 0; margin-top: 4px; padding: 6px 0 2px; height: auto; min-height: 3.2em; max-height: 5em; font-size: .9em; line-height: 1.55; }
#clock-top #tip { border-left: 0; color: #7a5c12; }
#game.reviewing #clock-top { display: none; }
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  #clock-top #tip, #clock-top #live { min-height: 2.9em; max-height: 4.4em; padding-top: 4px; }
}
/* セリフは、CPUの時計と同じ1行(もとの高さ)の中に出す: [CPU Lv3（後手）] [セリフ] [時間] */
#clock-top { flex-wrap: nowrap; align-items: center; gap: 10px; }
#clock-top .who { flex: 0 0 auto; order: 0; }
#clock-top #tip, #clock-top #live { order: 1; flex: 1 1 0; min-width: 0; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; font-size: .82em; line-height: 1.3; overflow: hidden; }
#clock-top #live p, #clock-top #tip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; }
#clock-top #live p { font-size: 1em; font-weight: 700; opacity: 1; }
#clock-top #tip:not(.hidden) { display: -webkit-box; }
#clock-top .time { order: 2; flex: 0 0 auto; }
@media (max-aspect-ratio: 1/1) and (max-height: 700px) { #clock-top #tip, #clock-top #live { min-height: 0; padding: 0; } }
/* 選択ボタンの形は、すべて同じ角丸の四角にそろえる */
.seg button, .opt-level .seg button { border-radius: 2px; }

/* ============================================================
   和風テーマ(和紙・墨・朱)
   - 配色は :root の変数。ここでは、変数だけでは足りない見た目をまとめる
   - フォント(Shippori Mincho / Zen Kaku Gothic New)は index.html で読み込む。読めないときは端末の明朝・ゴシックに戻る
   ============================================================ */
body {
  background-image: repeating-linear-gradient(0deg, rgba(120,95,50,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,95,50,.03) 0 1px, transparent 1px 4px);
  background-color: var(--bg);
}
/* 設定画面 */
.hero h1 { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 40px; letter-spacing: .2em; }
.hero::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; background: var(--accent); }
.lbl { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 700; }
.card select { border: 1px solid var(--line-ui); background: var(--surface); color: var(--text); border-radius: 2px; }
.seg button.on { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px #ffffff59; border-color: #8c2a1e; }
button.primary { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px #ffffff59; }
#btn-start { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 22px; letter-spacing: .4em; text-indent: .4em; border-radius: 2px; box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px #ffffff73, 0 3px 0 #6f1f12; }
#btn-resume { background: #c9a227; color: #1c1a17; border-radius: 2px; }
.filebtn { background: var(--surface); color: var(--text); border: 1px solid #1c1a17; border-radius: 2px; font-weight: 700; }
/* 対局画面 */
.clock .who { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; }
.clock .time { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 700; color: var(--muted); }
.clock.active .time { color: var(--accent); }
.clock.low .time { color: #c62828; }
#status { display: flex; align-items: center; gap: 10px; }
#status:not(.over):not(.check)::before { content: "手"; flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 2px; font: 700 15px/1 "Shippori Mincho", "Yu Mincho", serif; }
#controls-main button, #controls-more button, #btn-more { border-radius: 2px; }
/* 操作ボタンのアイコン(文字はそのまま。アイコンは飾りなので、読み上げには出ない) */
#controls-main button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; font-size: .85em; }
#controls-main button::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#controls-main #btn-undo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
#controls-main #btn-redo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H10a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); }
#controls-main #btn-hint { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
#controls-main #btn-resign { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2 4 2 4H5'/%3E%3C/svg%3E"); }
#controls-main #btn-more { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); }
/* 「その他」は、もとの規則どおり、縦長の画面と低い横向きの画面でだけ出す */
#controls-main #btn-more { display: none; }
@media (max-aspect-ratio: 1/1), (min-aspect-ratio: 1/1) and (max-height: 520px) { #controls-main #btn-more { display: flex; } }
/* 画面が低いときは、アイコンを省いて1画面に収める */
@media (max-height: 620px), (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #controls-main button::before { display: none; }
  #controls-main button { min-height: 42px; }
}
/* 盤の額縁(外側4px)が、筋の数字に触れないように */
#files { margin-bottom: 4px; }
#ad.live { background: none; }

.card .legal { margin: 20px 0 0; font-size: 12px; text-align: center; color: var(--muted, #6b5f48); }
.card .legal a { color: inherit; }

/* ---------- 横長の画面: 時計・状態・操作を上に詰め、広告は右下の、残りの広い場所に大きく出す ---------- */
@media (min-aspect-ratio: 1/1) {
  #controls { margin-top: 0; }
  #ad { order: 20; flex: 1 1 auto; min-height: 250px; max-height: none; margin: 12px 0 0; }
  #ad.live { max-height: none; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #ad { min-height: 44px; margin-top: 6px; }
}