/* ミニゲームの見た目。
   色は本体の CSS 変数（--panel / --line / --accent …）をそのまま使うので、
   明るさや色を変えてもゲーム側だけ取り残されない。

   いちばん大事なのは **曲を止めないこと**。
   そのためにプレイヤーの要素は動かさず、列の幅だけを入れ替える。 */

/* 遊んでいる間の配置。左に曲のパネル、右の3/4がゲーム */
body.gaming .layout {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
  max-width: none;
}
body.gaming .col-library,
body.gaming .col-config,
body.gaming #sideExtras { display: none; }   /* よくある質問・ひとこと送るは遊ぶ間だけ畳む */

/* 曲のパネルは、画面を下げてもついてくる */
body.gaming .col-player { position: sticky; top: 64px; }

/* ── 左の余りに置く箱 ──
   盤のほうが背が高いので、プレイヤーの下が大きく空く。そこに
   「次に流れる曲」と「連続再生の設定」を移す（Hub.js の sideIn）。
   設定の列は遊ぶ間畳んでいるので、どちらも手が届かなくなっていた。 */
.col-side { display: flex; flex-direction: column; gap: 4px; }
.col-side[hidden] { display: none; }
.col-side #upnextBox,
.col-side #repeatBox { margin: 0; }
.col-side h2.mt { margin-top: 14px; }
/* 遊んでいる間に出すのは、よく動かす2本（2回・3回の確率）だけにする。
   細かい調整（クールダウン・再当選の防ぎ）と「リセット」は、箱が
   プレイヤーの下の空きに収まらなくなるので、設定の列に残す（閉じれば出る） */
.col-side #cooldownField,
.col-side #memoryField,
.col-side #resetBtn { display: none; }

@media (max-width: 1180px) {
  body.gaming .layout { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); }
}
@media (max-width: 820px) {
  /* 縦に並ぶ。曲のパネルは小さくして上に残す */
  body.gaming .layout { grid-template-columns: 1fr; }
  body.gaming .col-player { position: static; }

  /* 「次に流れる曲」と「連続再生の設定」は**盤の下**に出す。
     上に積むと、せっかく先に出した盤がまた下へ押し出されるため。
     col-stack を display: contents にして中の箱を直接並べ、order で最後に回す。 */
  body.gaming .col-stack { display: contents; }
  body.gaming #gameSide { order: 1; }
}

.col-game { display: flex; flex-direction: column; gap: 14px; min-height: 60vh; }

.game-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-head h2 { margin: 0; flex: 1; color: var(--text); font-size: 15px; }
.game-head .sub { margin: 0; width: 100%; }

/* ── ゲーム選び ── */
.game-pick { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.game-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: left; color: var(--text); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.game-card:hover { border-color: var(--accent-line); }
.game-card b { font-size: 14px; }
.game-card span { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ── 対戦の設定 ── */
.game-setup { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.game-setup .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.game-setup label { font-size: 12px; color: var(--muted); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12px; cursor: pointer;
}
.seg button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }

/* ── 埋め込みで遊ぶゲーム（リングタップ）── */
/* **画面の高さを超えないようにする**（2026-10-26）。
   4:3 のまま横幅いっぱいに広げると、1920px 幅では枠が 1011px になり、
   Chromebook（縦 768px）はもちろん手元の画面（951px）にも収まらず、
   遊ぶたびに縦に送ることになる。上の帯（64px）と見出し・余白のぶんを
   引いた高さで頭打ちにする。ゲームは枠の形に合わせて描き直すので、
   少し横長になっても崩れない（リングの大きさは短いほうの辺で決まる）。
   dvh はアドレス帯の出入りで高さが変わる端末のための書き方。
   読めないブラウザのために vh の行を先に置き、読めるほうが上書きする。 */
.game-frame {
  width: 100%; aspect-ratio: 4 / 3; min-height: 380px;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  border: 1px solid var(--line); border-radius: var(--radius); background: #000;
}
@media (max-width: 820px) { .game-frame { aspect-ratio: 3 / 4; min-height: 380px; } }

/* ── 超次元将棋 ──
   将棋サイトらしく見えるように、木の盤・罫線・星・五角形の駒・駒台を
   **CSS だけで描く**（画像を置かない。拡大しても滲まないし、配布物も重くならない）。

   駒の「やる気」は、升の下の帯の長さで出す（--mood が 0%〜100%）。 */

/* 盤のまわり一式。畳のような落ち着いた面に置く */
.shogi-table {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    ".      foeStand"
    "ranks  board"
    ".      myStand";
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.shogi-wrap { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.shogi-news { margin: 0; font-size: 12px; color: var(--muted); min-height: 1.6em; }

/* 盤。木目は重ねたグラデーションで作る */
.shogi-boardwrap { grid-area: board; }
.shogi-files {
  display: grid; grid-template-columns: repeat(9, 1fr);
  font-size: 10px; color: #d9e4d6; text-align: center; margin-bottom: 3px; opacity: .75;
}
.shogi-ranks {
  grid-area: ranks; align-self: stretch;
  display: grid; grid-template-rows: repeat(9, 1fr);
  font-size: 10px; color: #d9e4d6; text-align: right; padding-right: 4px; opacity: .75;
  height: 100%; align-items: center;
}
.shogi-board {
  display: grid; grid-template-columns: repeat(9, 1fr);
  width: min(470px, 86vw, 48vh); aspect-ratio: 1 / 1;
  gap: 1px;
  padding: 6px;
  border-radius: 3px;
  /* 四隅の星 → 木目 → 地の色 の順に重ねる */
  background:
    radial-gradient(circle 3px at 33.33% 33.33%, #4a3414 97%, #0000),
    radial-gradient(circle 3px at 66.66% 33.33%, #4a3414 97%, #0000),
    radial-gradient(circle 3px at 33.33% 66.66%, #4a3414 97%, #0000),
    radial-gradient(circle 3px at 66.66% 66.66%, #4a3414 97%, #0000),
    repeating-linear-gradient(90deg, #00000012 0 1px, #0000 1px 14px),
    repeating-linear-gradient(8deg, #ffffff10 0 2px, #0000 2px 9px),
    linear-gradient(160deg, #e8bd7a, #d9a85f 45%, #cf9a4e);
  box-shadow: 0 10px 26px #0007, inset 0 0 0 2px #00000026, inset 0 0 0 7px #e8bd7a;
  position: relative;
}
.shogi-cell {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: #00000008; border: 0; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 .5px #5a401c66;
  font: inherit; color: transparent;
}
.shogi-cell:disabled { cursor: default; }

/* 駒は五角形。文字は駒の上に乗せる */
.shogi-cell.p::after {
  content: attr(data-ch);
  position: absolute; inset: 7%;
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0%, 86% 16%, 100% 100%, 0% 100%, 14% 16%);
  background: linear-gradient(168deg, #f3dba8, #e3c182 55%, #d8b06a);
  color: #1d1308; font-weight: 800; font-size: clamp(10px, 1.7vw, 19px);
  text-shadow: 0 1px 0 #ffffff5c;
  padding-top: 6%;
}
.shogi-cell.p.pro::after { color: #9a1414; }          /* 成った駒は赤字 */
.shogi-cell.flip::after { transform: rotate(180deg); }
.shogi-cell.sel { box-shadow: inset 0 0 0 2px #2f6bff; }
.shogi-cell.last { box-shadow: inset 0 0 0 2px #ffffffaa; }
.shogi-cell.eager::after { box-shadow: 0 0 0 2px #e0a325, 0 0 12px #e0a32588; }
.shogi-cell.dest::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 26%; height: 26%; border-radius: 50%; background: #2f6bff66;
  z-index: 1;
}
/* やる気の帯。長いほど張り切っている */
.shogi-cell.p > i {
  position: absolute; left: 10%; bottom: 3%; height: 6%; z-index: 2;
  width: calc(var(--mood, 0%) * 0.8); border-radius: 2px;
  background: linear-gradient(90deg, #2f6bff, #e23b3b);
}
.shogi-cell:focus-visible { outline: 2px solid #2f6bff; outline-offset: -2px; }

/* 駒台（こまだい）。相手は左上、自分は右下に置く（将棋の並べ方に合わせる） */
.shogi-stand {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  min-height: 42px; padding: 7px 10px; border-radius: 4px;
  background: linear-gradient(160deg, #c99a58, #b8863f);
  box-shadow: 0 4px 12px #0006, inset 0 0 0 2px #00000022;
  font-size: 11px; color: #3a2a10;
}
.shogi-stand.foe { grid-area: foeStand; justify-self: start; }
.shogi-stand.mine { grid-area: myStand; justify-self: end; }
.shogi-stand-label { letter-spacing: .06em; opacity: .85; }
.shogi-piece-btn {
  position: relative; width: 26px; height: 28px; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(168deg, #f3dba8, #e3c182 55%, #d8b06a);
  clip-path: polygon(50% 0%, 86% 16%, 100% 100%, 0% 100%, 14% 16%);
  color: #1d1308; font: inherit; font-size: 13px; font-weight: 800; line-height: 32px;
}
.shogi-piece-btn:disabled { opacity: .6; cursor: default; }
.shogi-piece-btn.sel { outline: 2px solid #2f6bff; outline-offset: 2px; }
.shogi-piece-btn > b { position: absolute; right: -2px; bottom: -4px; font-size: 10px; color: #3a2a10; }
.shogi-stand-none { opacity: .7; }

.shogi-choice {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 8px 12px; font-size: 12px;
}
.btn-mini {
  border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 700;
  color: #0b0b0d; background: var(--accent); cursor: pointer;
}
.btn-mini.ghost { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }

/* 設定は1行にまとめて、盤を上に詰める（スクロールせずに盤が見えるように） */
#gameStage[data-game="shogi"] .game-setup,
#gameStage[data-game="cube"] .game-setup {
  flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; max-width: none;
}
#gameStage[data-game="shogi"] .game-status,
#gameStage[data-game="cube"] .game-status { margin: 0; }
#gameStage[data-game="shogi"] .shogi-news { margin: 0; }

/* ── ゲームごとの地の色 ──
   本体（曲のほう）の雰囲気に合わせない。ゲームはゲームの世界に見せたいので、
   遊んでいる間だけ、その game に合った面を敷く。 */
#gameStage[data-game="shogi"] {
  background:
    repeating-linear-gradient(90deg, #00000010 0 2px, #0000 2px 26px),
    linear-gradient(160deg, #46624a, #38503c);
  border-color: #2c3f30;
}
#gameStage[data-game="shogi"] .game-status,
#gameStage[data-game="shogi"] .shogi-news { color: #e7f0e4; }
#gameStage[data-game="shogi"] .game-setup label { color: #cddcc9; }
#gameStage[data-game="cube"] {
  background:
    radial-gradient(900px 500px at 70% 0%, #1b2a55, #0b1020 60%),
    #080b16;
  border-color: #223055;
}
#gameStage[data-game="cube"] .game-status { color: #dbe6ff; }
#gameStage[data-game="cube"] .game-setup label { color: #9fb2e0; }
#gameStage[data-game="ringtap"] { background: #06060c; border-color: #14141f; }

/* 合言葉での対戦のひとこと（相手待ち・つながらない等） */
.room-bar {
  align-self: stretch; margin: 2px 0 0; font-size: 11px; color: var(--muted);
  background: #00000040; border: 1px solid #ffffff1f; border-radius: 8px; padding: 7px 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* 帯の中の押し口（「もう一度」「同じ合言葉で募集し直す」）。
   帯は flex なので、出していないあいだも場所を取らないように消しておく */
.room-bar .btn-mini { flex: none; font-size: 11px; padding: 4px 12px; }
.room-bar .btn-mini[hidden] { display: none; }
.room-bar .btn-mini:disabled { opacity: .55; cursor: default; }

/* ── 超次元〇✕ ──
   xyz の3軸なので、**本当に立体で見せる**（CSS の3D変形。外の部品は使わない）。
   ドラッグで回せる。平面（4段を並べる）にも切り替えられる。 */
.cube-wrap { display: flex; flex-direction: column; gap: 12px; }
.cube-view { display: flex; justify-content: center; }

.cube3d {
  /* --step は段と段の間隔。盤を小さくしたときに間隔だけ残ると、
     薄い板が離れて浮いているように見えるので、盤の大きさと一緒に変える */
  --step: 104px;
  --inset: 18%;
  width: min(520px, 86%); aspect-ratio: 1 / 1;
  perspective: 1200px; touch-action: none; cursor: grab;
}
.cube3d:active { cursor: grabbing; }
.cube3d-stage {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -26deg)) rotateY(var(--ry, -38deg));
}
.c3-layer {
  position: absolute; inset: var(--inset);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 7px; border-radius: 10px;
  background: #16244a22; box-shadow: 0 0 0 1px #6ea0ff22;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * var(--step) - var(--step) * 1.5));
}
.c3-tag {
  position: absolute; left: -2.6em; top: -1.2em; font-size: 10px; color: #8fa6d8;
  pointer-events: none; letter-spacing: .06em;
}
/* **奥の段が押せなかった（2026-10-16 に直した）。**
   立体の中では、土台（.cube3d-stage）と板（.c3-layer）の「面」は z=0 にある。
   段は -156px〜+156px に並べているので、**手前の2段より奥の2段は、
   この面に当たりを横取りされていた**（手前の段を消しても変わらない）。
   本番で数えた（〇が押せた升の数）:
       直す前  1段 0/16  2段 0/16  3段 7/16  4段 16/16
       直した後 1段 7/16  2段 7/16  3段 7/16  4段 16/16
                （4段を隠せば3段が16/16、…1段だけなら1段が16/16）
   面は当たりを受け取らないことにして、受け取るのは升だけにする。
   盤を回すほうは .cube3d で受けているので、これでも回せる（実機で確認）。 */
.cube3d-stage, .c3-layer { pointer-events: none; }
.c3-cell { pointer-events: auto; }

.c3-cell {
  border: 1px solid #7fa8ff55; background: #0b1530aa; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #dce7ff; font: inherit; font-weight: 800; font-size: clamp(13px, 2vw, 20px);
  cursor: pointer; padding: 0;
}
/* 立体の升は disabled にしない（そこから盤を回せなくなるため。game-cube-ui.js の注を参照）。
   押せるかどうかは aria-disabled で示す */
.c3-cell:hover:not([aria-disabled="true"]) { background: #1a2f5f99; border-color: #8fb4ff99; }
.c3-cell[aria-disabled="true"] { cursor: default; }
.c3-cell { touch-action: none; }   /* 升の上から始めても、画面が動かずに盤が回る */
.c3-cell.o { color: #7fd1ff; background: #10335f99; border-color: #7fd1ff99; }
.c3-cell.x { color: #ffd166; background: #3a2a0f99; border-color: #ffd16699; }
.c3-cell.win { background: #1f9d6b99; border-color: #4fe0a5; }
.c3-cell.last { box-shadow: 0 0 0 2px #ffffff66; }
.c3-cell:focus-visible { outline: 2px solid #8fb4ff; outline-offset: 2px; }

/* 平面（4段を横に並べる）。細かく見たいときはこちら */
.cube-layers { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
@media (max-width: 1180px) { .cube-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cube-layer { display: flex; flex-direction: column; gap: 6px; }
.cube-layer > span { font-size: 11px; color: #8fa6d8; letter-spacing: .04em; }
.cube-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cube-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: #0d1a3a66; border: 1px solid #6ea0ff33; border-radius: 8px;
  color: #dce7ff; font: inherit; font-weight: 800; font-size: clamp(14px, 2.4vw, 26px);
  cursor: pointer; padding: 0; line-height: 1;
}
.cube-cell:disabled { cursor: default; }
.cube-cell:hover:not(:disabled) { background: #1a2f5f99; }
.cube-cell.o { color: #7fd1ff; }
.cube-cell.x { color: #ffd166; }
.cube-cell.last { border-color: #ffffff66; }
.cube-cell.win { background: #1f9d6b88; border-color: #4fe0a5; }
.cube-cell:focus-visible { outline: 2px solid #8fb4ff; outline-offset: 2px; }

/* ── 何が起きたかを知らせる ──
   文字の行だけだと見落とすので、**駒の上に吹き出し**を出し、
   同じことを下の履歴にも残す。手番が自分に回った瞬間は、見出しを光らせる。 */
.shogi-bubble {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 14px #0009;
  animation: bubbleUp 2s cubic-bezier(.2, .9, .2, 1) forwards;
}
.shogi-bubble.sabo  { background: #27416f; color: #d6e6ff; }
.shogi-bubble.eager { background: #8a4a12; color: #ffe3b0; }
.shogi-bubble.check { background: #8a1626; color: #ffd9de; }
@keyframes bubbleUp {
  0%   { opacity: 0; transform: translate(-50%, -70%) scale(.7); }
  14%  { opacity: 1; transform: translate(-50%, -115%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -125%); }
  100% { opacity: 0; transform: translate(-50%, -165%); }
}
@media (prefers-reduced-motion: reduce) {
  .shogi-bubble { animation: none; opacity: 1; transform: translate(-50%, -120%); }
}

.shogi-log {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.55; min-height: 2.3em; max-height: 4.8em; overflow: hidden;
}
.shogi-log li { color: #cddcc9; opacity: .6; }
.shogi-log li:first-child { opacity: 1; font-weight: 700; }
.shogi-log li::before { font-weight: 700; margin-right: 4px; }
.shogi-log li.me::before  { content: 'あなた'; color: #8fd0ff; }
.shogi-log li.foe::before { content: '相手';   color: #ffcf8f; }

/* 手番が自分に回ってきたとき */
.game-status.turn-flash { animation: turnFlash 1.1s ease-out 2; }
@keyframes turnFlash {
  0%, 100% { color: inherit; text-shadow: none; }
  30%      { color: #fff; text-shadow: 0 0 14px #8fd0ffcc; }
}
@media (prefers-reduced-motion: reduce) { .game-status.turn-flash { animation: none; } }

/* 段の表示・非表示。消している段は、押した跡が分かるように沈ませる */
.seg button.off { opacity: .45; text-decoration: line-through; }
#gameStage[data-game="cube"] .seg button[aria-pressed="true"] {
  border-color: #8fb4ff; background: #22407a; color: #eaf1ff;
}

/* ── スマホ（縦）で遊ぶとき ──
   **上に曲、下にゲーム**の並び。曲のほうは「鳴っていることが分かる」だけでよいので、
   映像を小さくして上に畳み、下へ少し送るとゲームが始まる形にする。
   映像を display:none にはしない（音が止まる端末があるため、小さくするだけ）。 */
@media (max-width: 820px) {
  body.gaming .layout { gap: 12px; padding: 12px 12px 48px; }
  body.gaming .col-player { position: static; }
  /* 流れている動画は枠いっぱいに出す。
     180px に縮めていたときは、パネルの幅（約350px）の半分しか使っておらず、
     左右が余って**枠のわりに小さく**見えていた（実機で指摘）。
     伸びたぶんの高さは、スリープの行をしまい、余白を詰めて取り返す
     （盤が下に押し出されないように）。 */
  body.gaming .col-player { padding: 10px; }
  body.gaming .col-player .stage { width: 100%; margin: 0; }
  body.gaming .col-player .sleep { display: none; }        /* 遊ぶ間は使わない */
  body.gaming .col-player .nowplaying { gap: 8px; margin-top: 8px; padding: 8px 10px; }
  body.gaming .col-player .np-title { font-size: 13px; }
  body.gaming .col-player .controls { margin-top: 8px; justify-content: center; }
  body.gaming .col-player .controls button.ghost { margin-left: 0; }
  body.gaming .col-player .resume-bar { display: none; }   /* 遊んでいる間は邪魔になる */

  /* ゲーム側は画面いっぱいに使う */
  body.gaming .col-game { min-height: 86vh; padding: 12px; }

  /* ── 盤を先に、設定をあとに ──
     スマホでは設定の行だけで画面の半分が埋まり、盤が下に押し出されていた。
     並べ替えて、開いた瞬間に盤が見えるようにする（設定は盤の下に残す）。
     見せる段・成りの確認は、盤のすぐ下でないと押しにくいので上に寄せる。 */
  .shogi-wrap > .shogi-table { order: 1; }
  .shogi-wrap > .shogi-choice { order: 2; }
  .shogi-wrap > .game-status { order: 3; }
  .shogi-wrap > .shogi-news { order: 4; }
  .shogi-wrap > .game-setup { order: 5; }
  .shogi-wrap > .shogi-log { order: 6; }
  .cube-wrap > .cube-view,
  .cube-wrap > .cube-layers { order: 1; }
  .cube-wrap > .cube-layerbar { order: 2; }                     /* 見せる段 */
  .cube-wrap > .game-status { order: 3; }
  .cube-wrap > .sub { order: 4; }
  .cube-wrap > .game-setup:not(.cube-layerbar) { order: 5; }    /* 相手の強さ・手番・見え方 */

  /* ── 設定は小さくまとめる ── */
  body.gaming .game-head h2 { font-size: 14px; }
  body.gaming .game-head .sub { font-size: 11px; line-height: 1.55; }
  body.gaming .game-setup { gap: 8px 12px; }
  body.gaming .game-setup .row { gap: 6px; }
  body.gaming .game-setup label { font-size: 11px; }
  body.gaming .seg { gap: 4px; }
  body.gaming .seg button { padding: 5px 11px; font-size: 11px; }
  body.gaming .game-setup .ghost,
  body.gaming .game-setup .btn-mini { padding: 5px 12px; font-size: 11px; }

  /* ── 盤は、残った幅をそのまま使う ──
     92vw だと左の段数（九〜一）の列と足して画面からはみ出し、
     盤の右端が切れていた。幅の計算をやめて「残り全部」にする。 */
  .shogi-table { gap: 5px; width: 100%; max-width: 470px; margin: 0 auto; grid-template-columns: auto minmax(0, 1fr); }
  .shogi-board { width: 100%; max-width: 440px; }
  .shogi-stand { width: auto; justify-self: stretch; min-height: 38px; padding: 6px 8px; }
  .shogi-files, .shogi-ranks { font-size: 9px; }

  /* 立体の盤。幅いっぱいに広げ、段の間隔も合わせて詰める（離れて浮かないように） */
  .cube3d { width: 100%; max-width: 440px; --step: 82px; --inset: 15%; }
  .c3-layer { gap: 5px; padding: 5px; }
}

/* ── テロップ（画面の中央に一瞬だけ出す知らせ）──
   盤の上の小さい文字は、動きが無いぶん見落とされる。
   勝ち負けと手番だけは、画面の真ん中に大きく出して必ず気づけるようにする。
   押せない（pointer-events: none）ので、出ている間も操作できる。 */
.game-telop {
  position: fixed; top: 0; bottom: 0; left: 0; width: 100%; z-index: 60; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  opacity: 0; font-weight: 900; letter-spacing: .08em; text-align: center;
  font-size: clamp(30px, 7vw, 62px); color: #fff;
  text-shadow: 0 6px 34px #000c, 0 0 22px #0009;
  padding: 0 16px;
}
.game-telop.on { animation-name: telopShow; animation-timing-function: cubic-bezier(.2, .9, .2, 1); animation-fill-mode: forwards; }
.game-telop.turn { color: #9ddcff; }
.game-telop.wait { color: #cfd8ee; font-size: clamp(22px, 5vw, 42px); }
.game-telop.win  { color: #7cf7c0; }
.game-telop.lose { color: #ffa0ae; }
.game-telop.draw { color: #ffd98a; }
@keyframes telopShow {
  0%   { opacity: 0; transform: scale(.72); }
  12%  { opacity: 1; transform: scale(1.06); }
  24%  { transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .game-telop.on { animation-name: telopPlain; }
  @keyframes telopPlain { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}