/* 軍儀 友人向けクライアント。落ち着いた木と墨の配色。 */
:root {
  --cell: 60px;
  --disc: 40px;
  --bg: #1d1a16;
  --bg2: #2a251f;
  --ink: #f3ece0;
  --muted: #b8ad9a;
  --accent: #d9a441;
  --board: #deb875;
  --board2: #cfa55e;
  --line: #6e4f26;
  --quiet: rgba(98, 196, 98, 0.55);
  --tsuke: rgba(90, 160, 240, 0.6);
  --capture: rgba(235, 90, 90, 0.6);
  --select: #ffd54a;
  --last: rgba(255, 152, 0, 0.8);
  --danger: #b3413a;
  /* 日本語の字形を先に並べる。総称の serif / sans-serif に落ちると、環境によって中国語の字形になる */
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "BIZ UDPMincho", "MS PMincho", serif;
  --font-sans: "Yu Gothic UI", "Yu Gothic", "Meiryo", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at top, #332c23 0%, var(--bg) 70%);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
}
.hidden { display: none !important; }
kbd { font-family: inherit; font-size: 0.85em; border: 1px solid var(--muted); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
a { color: var(--accent); }

/* ---------- ボタン ---------- */
button { font: inherit; }
.btn, .menu-btn, .seg button, .level, .piece-pick {
  cursor: pointer; color: var(--ink); background: var(--bg2);
  border: 1px solid #4a4135; border-radius: 8px; padding: 8px 16px;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.btn:hover:not(:disabled), .menu-btn:hover:not(:disabled), .seg button:hover, .level:hover, .piece-pick:hover { border-color: var(--accent); }
.btn:active:not(:disabled), .menu-btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .menu-btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary, .menu-btn.primary { background: var(--accent); color: #221a0c; border-color: var(--accent); font-weight: bold; }
.btn.danger { background: transparent; border-color: var(--danger); color: #f0a39c; }
.btn.small { padding: 4px 10px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- タイトル ---------- */
#screen-title { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.title-wrap { display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); }
.logo {
  font-family: var(--font-serif);
  font-size: clamp(64px, 14vw, 112px); letter-spacing: 0.2em; margin: 0; padding-left: 0.2em;
  color: var(--ink); text-shadow: 0 4px 24px rgba(217, 164, 65, 0.35);
}
.logo-sub { margin: 0 0 36px; letter-spacing: 0.6em; color: var(--muted); font-size: 13px; padding-left: 0.6em; }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(300px, 100%); }
.menu-btn { font-size: 18px; padding: 12px 20px; }
.menu-btn small { font-size: 11px; color: var(--muted); margin-left: 6px; }
.foot { margin-top: 40px; color: var(--muted); font-size: 12px; }

.setup { width: 100%; background: rgba(42, 37, 31, 0.9); border: 1px solid #4a4135; border-radius: 12px; padding: 18px 20px; }
.setup h2 { margin: 0 0 14px; font-size: 18px; }
.setup-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.setup-label { color: var(--muted); font-size: 13px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { padding: 6px 14px; }
.seg button.on, .level.on, .piece-pick.on { border-color: var(--accent); background: #3d3322; box-shadow: inset 0 0 0 1px var(--accent); }
.levels { display: flex; flex-direction: column; gap: 6px; }
.level { display: grid; grid-template-columns: 90px 90px 1fr; align-items: center; text-align: left; padding: 8px 12px; }
.level-n { color: var(--accent); letter-spacing: 1px; }
.level-t { font-weight: bold; }
.level-d { color: var(--muted); font-size: 12px; }
.setup-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------- 対局 ---------- */
.g-status-bar { display: none; }
.game-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid #3a3228; }
.g-info { color: var(--muted); font-size: 13px; }
.spacer { flex: 1; }
.game-layout { display: flex; gap: 24px; justify-content: center; align-items: flex-start; padding: 16px; flex-wrap: wrap; }
.board-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.side-col { width: 260px; display: flex; flex-direction: column; gap: 12px; }
.side-col h3 { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-weight: normal; }
.side-actions { display: flex; gap: 8px; }
.side-actions .btn { flex: 1; }
.g-status { min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 17px; font-weight: bold;
  background: var(--bg2); border: 1px solid #4a4135; border-radius: 8px; padding: 8px; }
.g-status.thinking { color: var(--muted); font-weight: normal; }
.g-status.check { color: #ff8a80; border-color: #a33; }
.g-status.err { color: #ff8a80; font-weight: normal; font-size: 14px; }
.moves { margin: 0; padding: 6px 6px 6px 36px; height: 360px; overflow-y: auto; background: var(--bg2); border: 1px solid #4a4135; border-radius: 8px; font-size: 13px; }
.moves li { padding: 1px 0; }
.moves li.black { color: var(--muted); }

/* ---------- 盤 ---------- */
.board {
  display: grid; grid-template-columns: repeat(9, var(--cell)); grid-template-rows: repeat(9, var(--cell));
  background: linear-gradient(135deg, var(--board) 0%, var(--board2) 100%);
  border: 6px solid #5a3d1a; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(110, 70, 20, 0.25);
  user-select: none;
}
.board:focus { outline: none; }
.board:focus-visible { box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(0, 0, 0, 0.5); }
.cell { position: relative; border: 1px solid rgba(110, 79, 38, 0.55); cursor: pointer; }
.cell.movable:hover { background: rgba(255, 255, 255, 0.12); }
.cell.hl-quiet { background: var(--quiet); }
.cell.hl-tsuke { background: var(--tsuke); }
.cell.hl-capture { background: var(--capture); }
.cell.hl-both { background: repeating-linear-gradient(45deg, var(--capture) 0 8px, var(--tsuke) 8px 16px); }
.cell.selected { box-shadow: inset 0 0 0 3px var(--select); }
.cell.last-to { box-shadow: inset 0 0 0 3px var(--last); }
.cell.last-from { box-shadow: inset 0 0 0 2px rgba(255, 152, 0, 0.4); }
.cell.selected.last-to { box-shadow: inset 0 0 0 3px var(--select); }
.cell.cursor::after { content: ""; position: absolute; inset: 2px; border: 3px dashed #1565c0; border-radius: 4px; pointer-events: none; z-index: 6; }

.stack { position: absolute; inset: 0; }
.disc {
  position: absolute; width: var(--disc); height: var(--disc); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: bold; font-size: 20px;
  border: 2px solid #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}
.disc.w { background: radial-gradient(circle at 35% 30%, #fffef8, #efe6d2); color: #111; }
.disc.b { background: radial-gradient(circle at 35% 30%, #3a3a3a, #111); color: #fff; border-color: #000; transform: rotate(180deg); }
/* 手前の側の駒を正立させる (盤と手駒の両方) */
body.flipped .disc.w { transform: rotate(180deg); }
body.flipped .disc.b { transform: none; }
.disc:not(.top) { filter: brightness(0.8); }
.stack.h1 .tier1 { left: 10px; top: 10px; }
.stack.h2 .tier1 { left: 3px; top: 16px; z-index: 1; }
.stack.h2 .tier2 { left: 16px; top: 3px; z-index: 2; }
.tier-badge { position: absolute; right: 1px; bottom: 1px; font-size: 10px; background: #6a1b9a; color: #fff; border-radius: 3px; padding: 0 3px; z-index: 5; }

/* ---------- 手駒 ---------- */
.hand-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; flex-wrap: wrap; }
.hand-label { color: var(--muted); font-size: 12px; min-width: 96px; }
.hand-none { color: var(--muted); font-size: 12px; }
.hand-piece { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px 4px; border-radius: 8px; border: 1px solid transparent; }
.hand-piece .disc.mini, .piece-pick .disc.mini { position: static; width: 34px; height: 34px; font-size: 17px; }
.hand-piece .count { font-size: 12px; color: var(--muted); }
.hand-piece.selectable { cursor: pointer; }
.hand-piece.selectable:hover { border-color: var(--accent); }
.hand-piece.selected { border-color: var(--select); background: rgba(255, 213, 74, 0.2); }
.hand-piece.cursor { outline: 3px dashed #64b5f6; outline-offset: 1px; }

/* ---------- 取る / ツケ の選択 ---------- */
.popup { position: absolute; z-index: 50; display: flex; gap: 6px; padding: 6px; background: var(--bg2); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.popup .btn.capture { background: #8f2f2f; border-color: #c55; }
.popup .btn.tsuke { background: #2f5a8f; border-color: #5a8fd0; }

/* ---------- 結果 ---------- */
.result { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.result-box { background: var(--bg2); border: 1px solid var(--accent); border-radius: 14px; padding: 28px 36px; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); }
.result-title { font-family: var(--font-serif); font-size: 40px; font-weight: bold; letter-spacing: 0.1em; }
.result-title.win { color: var(--accent); }
.result-title.lose { color: #c9b8b0; }
.result-reason { color: var(--muted); margin: 8px 0 22px; }
.result-kifu { color: var(--muted); font-size: 12px; margin: -12px 0 18px; max-width: 520px; word-break: break-all; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- 解説モード (docs/19 §9) ----------
 * 収録 (1920×1080、YouTube) を考えた配置: 盤は左、右の欄は 3 分の 1。字は 1080p で読める大きさ。
 * 画面の下 1 割は YouTube の再生バーが重なるので、要るものを置かない。右下の角は終了画面の部品が重なる。 */
#screen-view { --vcell: clamp(36px, calc((100vh - 170px) / 9), 104px); min-height: 100vh; display: flex; flex-direction: column; }
#screen-view .board { --cell: var(--vcell); --disc: calc(var(--vcell) * 0.68); }
#screen-view .disc { font-size: calc(var(--vcell) * 0.34); }
#screen-view .stack.h1 .tier1 { left: calc(var(--vcell) * 0.16); top: calc(var(--vcell) * 0.16); }
#screen-view .stack.h2 .tier1 { left: calc(var(--vcell) * 0.05); top: calc(var(--vcell) * 0.27); }
#screen-view .stack.h2 .tier2 { left: calc(var(--vcell) * 0.27); top: calc(var(--vcell) * 0.05); }
#screen-view .tier-badge { font-size: calc(var(--vcell) * 0.17); }
/* 駒台 (将棋の置き方): 奥の側は左上、手前の側は右下に縦に並べる */
.komadai-layout { flex-direction: row; align-items: stretch; gap: 10px; }
.komadai { width: calc(var(--vcell) * 1.05); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: rgba(0, 0, 0, 0.22); border-radius: 8px; }
.komadai.far { align-self: flex-start; margin-top: 22px; }
.komadai.near { align-self: flex-end; }
.komadai .hand-label { font-size: calc(var(--vcell) * 0.19); min-width: 0; text-align: center; padding-bottom: 4px; border-bottom: 1px solid #4a4135; width: 100%; }
.komadai .hand-none { font-size: calc(var(--vcell) * 0.18); }
/* 駒は 1 列にまっすぐ並べ、枚数は駒の右下の小さな札にする (枚数の有無で駒の位置がずれないように) */
.komadai .hand-piece { position: relative; width: calc(var(--vcell) * 0.6); padding: 2px 0; gap: 0; justify-content: center; }
.komadai .hand-piece .disc.mini { width: calc(var(--vcell) * 0.6); height: calc(var(--vcell) * 0.6); font-size: calc(var(--vcell) * 0.3); }
.komadai .hand-piece .count { position: absolute; right: calc(var(--vcell) * -0.12); bottom: 0; font-size: calc(var(--vcell) * 0.17); font-weight: bold;
  color: #221a0c; background: var(--accent); border-radius: 999px; padding: 0 5px; line-height: 1.4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.komadai .hand-piece.selectable { cursor: pointer; }
.komadai .hand-piece.selected .disc { box-shadow: 0 0 0 3px var(--select); }
.view-layout { display: flex; gap: 28px; justify-content: center; align-items: flex-start; padding: 12px 36px 48px; flex: 1; }
.board-wrap { position: relative; width: max-content; padding: 22px 26px 0 0; }
/* 盤の座標 (公式表記の 横-縦)。上に横 (白から見て右が 1)、右に縦 (黒側が 1) */
.coords-x { position: absolute; top: 0; left: 6px; width: calc(100% - 26px - 12px); height: 22px; display: grid; grid-template-columns: repeat(9, 1fr); }
.coords-y { position: absolute; top: 28px; right: 0; width: 26px; height: calc(100% - 22px - 12px); display: grid; grid-template-rows: repeat(9, 1fr); }
.coords-x span, .coords-y span { display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-sans); font-size: calc(var(--vcell) * 0.2); }
/* 右の欄: 起点のリンクと、そこから指した手順 */
.view-col { width: min(32vw, 600px); min-height: calc(var(--vcell) * 9 + 34px); display: flex; flex-direction: column; gap: 14px; font-family: var(--font-serif); }
.v-title { font-size: clamp(16px, 1.5vw, 26px); font-weight: bold; letter-spacing: 0.02em; border-bottom: 2px solid var(--accent); padding-bottom: 6px; min-height: 1.3em; }
.v-starts { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.v-start { text-align: left; font: inherit; font-size: clamp(14px, 1.15vw, 20px); color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.v-start:hover { border-color: var(--accent); }
.v-start.on { background: #3d3322; border-color: var(--accent); }
.v-start .move { color: var(--accent); font-weight: bold; }
.v-moves-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-family: var(--font-sans); font-size: clamp(12px, 1vw, 16px); border-bottom: 1px solid #4a4135; padding-bottom: 2px; }
.v-status { color: #ff8a80; font-weight: bold; }
.v-moves { margin: 0; padding: 4px 4px 4px 2.2em; font-size: clamp(16px, 1.4vw, 24px); line-height: 1.5; min-height: 4.5em; max-height: 30vh; overflow-y: auto; }
.v-moves li.black { color: var(--muted); }
.v-nav { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); }
.v-hint { color: var(--muted); font-size: 12px; margin-left: 8px; }
.v-set { font: inherit; background: var(--bg2); color: var(--ink); border: 1px solid #4a4135; border-radius: 6px; padding: 3px 6px; }
/* 収録用: バーとボタンを隠し、盤と欄だけにする */
body.recording .view-bar, body.recording .v-nav { display: none !important; }
body.recording .view-layout { padding-top: 24px; }
body.recording #screen-view { --vcell: clamp(36px, calc((100vh - 140px) / 9), 104px); }

/* ---------- 遊び方 ---------- */
.howto { display: flex; gap: 32px; padding: 20px 16px; justify-content: center; flex-wrap: wrap; }
.howto-text { max-width: 520px; line-height: 1.8; }
.howto-text h2, .howto-pieces h2 { font-size: 17px; margin: 18px 0 4px; color: var(--accent); }
.howto-text ul { padding-left: 1.2em; margin: 4px 0; }
.howto-pieces { width: min(460px, 100%); }
.piece-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.piece-pick { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; font-size: 13px; }
.board.mini { --cell: 40px; --disc: 30px; width: max-content; }
.board.mini .disc { font-size: 15px; }
.board.mini .stack.h1 .tier1 { left: 4px; top: 4px; }
.board.mini .stack.h2 .tier1 { left: 1px; top: 8px; }
.board.mini .stack.h2 .tier2 { left: 8px; top: 1px; }
.board.mini .cell { cursor: default; }
.caption { color: var(--muted); font-size: 13px; }
.fatal { color: #ff8a80; text-align: center; }

/* ---------- キー設定 (keymap.js の共通ダイアログ) ---------- */
.km-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.km-backdrop.hidden { display: none; }
.km-dialog { background: var(--bg2); color: var(--ink); border: 1px solid #4a4135; border-radius: 12px; padding: 16px 20px; width: min(560px, 100%); }
.km-dialog h2 { margin: 0 0 6px; }
.km-dialog button { cursor: pointer; color: var(--ink); background: #3a3228; border: 1px solid #5a4f40; border-radius: 6px; padding: 3px 10px; }
.km-dialog button.primary { background: var(--accent); color: #221a0c; border-color: var(--accent); }
.km-dialog button:disabled { opacity: 0.4; cursor: default; }
.km-hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.km-note { font-size: 13px; background: #4a3d1c; padding: 4px 8px; border-radius: 4px; margin: 0 0 8px; }
.km-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.km-table th { text-align: left; padding: 8px 4px 2px; color: var(--muted); font-weight: normal; border-bottom: 1px solid #4a4135; }
.km-table td { padding: 3px 4px; }
.km-keys kbd { margin-right: 4px; }
.km-keys.capturing { color: var(--accent); font-weight: bold; }
.km-ops { white-space: nowrap; text-align: right; }
.km-ops button { margin-left: 4px; }
.btn-row.km-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 760px) {
  :root { --cell: 38px; --disc: 28px; }
  .disc { font-size: 14px; }
  .stack.h1 .tier1 { left: 4px; top: 4px; }
  .stack.h2 .tier1 { left: 1px; top: 8px; }
  .stack.h2 .tier2 { left: 8px; top: 1px; }
  .side-col { width: 100%; }
  .moves { height: 160px; }
  .level { grid-template-columns: 70px 80px 1fr; }
}

/* ---------- 通信対戦 (docs/19 §10) ---------- */
.mine { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mine .mine-label { color: var(--muted); font-size: 13px; }
.mine button { text-align: left; font: inherit; display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.mine button .mine-turn { color: var(--accent); font-weight: bold; }
.mine button .mine-sub { color: var(--muted); font-size: 12px; }
.join-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid #4a4036; }
.join { display: flex; gap: 8px; }
.join input {
  flex: 1; min-width: 0; font: inherit; font-size: 20px; letter-spacing: 0.25em; text-transform: uppercase; text-align: center;
  background: var(--bg); color: var(--ink); border: 1px solid #6a5a44; border-radius: 8px; padding: 8px 10px;
}
.join input:focus { outline: none; border-color: var(--accent); }
.g-room { background: var(--bg2); border: 1px solid #4a4036; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.g-room-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 13px; }
.room-code { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 26px; letter-spacing: 0.2em; color: var(--accent); user-select: all; }
.g-room-note { margin: 0; font-size: 13px; color: var(--muted); }
.g-room-actions { display: flex; gap: 8px; }
.g-room-actions .btn { flex: 1; }
.g-status.waiting { color: var(--muted); font-weight: normal; }
.pass { max-width: 360px; }
.pass-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.6; }
.pass input { width: 100%; font: inherit; font-size: 18px; background: var(--bg); color: var(--ink); border: 1px solid #6a5a44; border-radius: 8px; padding: 10px 12px; }
.pass input:focus { outline: none; border-color: var(--accent); }
.pass-err { color: #ff8a80; font-size: 13px; min-height: 1.2em; margin: 6px 0 0; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- 小さい画面 (スマホ。縦画面で盤を幅いっぱいに) ---------- */
@media (max-width: 760px) {
  :root { --cell: calc((100vw - 36px) / 9); --disc: calc(var(--cell) * 0.68); }
  #screen-game .disc { font-size: calc(var(--cell) * 0.36); border-width: 1px; }
  #screen-game .stack.h1 .tier1 { left: calc(var(--cell) * 0.16); top: calc(var(--cell) * 0.16); }
  #screen-game .stack.h2 .tier1 { left: calc(var(--cell) * 0.05); top: calc(var(--cell) * 0.27); }
  #screen-game .stack.h2 .tier2 { left: calc(var(--cell) * 0.27); top: calc(var(--cell) * 0.05); }
  #screen-game .tier-badge { font-size: 9px; }
  /* 上の帯: メニュー・手番の文・反転だけ (「キー」と説明の行は出さない。手番は盤の上に見えるように帯へ) */
  .game-bar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  #screen-game .g-info, #screen-game #g-keys, #screen-game #g-status, #screen-game .game-bar .spacer { display: none; }
  .g-status-bar { display: block; flex: 1; min-width: 0; text-align: center; font-weight: bold; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-status-bar.thinking, .g-status-bar.waiting { color: var(--muted); font-weight: normal; }
  .g-status-bar.check { color: #ff8a80; }
  .g-status-bar.err { color: #ff8a80; font-weight: normal; font-size: 13px; }
  /* 強さの表: 星と名前を 1 行、説明をその下に */
  .level { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; }
  .level-d { grid-column: 1 / -1; }
  /* 部屋の欄: 相手が入ったらコードとコピーだけの 1 行に */
  .g-room.joined { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .g-room.joined .g-room-note { display: none; }
  .g-room.joined .g-room-actions { flex: 0 0 auto; }
  .g-room.joined .g-room-head { flex: 1; gap: 10px; justify-content: flex-start; }
  .room-code { font-size: 22px; }
  .game-layout { flex-direction: column; align-items: center; gap: 10px; padding: 0 8px 16px; }
  .board-col { gap: 6px; }
  .side-col { width: 100%; max-width: 520px; }
  .moves { height: 140px; }
  .hand-row { min-height: 44px; flex-wrap: wrap; }
  .hand-label { min-width: 0; }
  .hand-piece .disc.mini { width: 30px; height: 30px; font-size: 15px; }
  .result-box { padding: 22px 18px; }
  .result-title { font-size: 32px; }
  .setup { padding: 14px; }
}