/* テトリス 対戦（/games/versus/）だけの見た目。数値の出所は docs/versus-design.md（設計稿 1a・1d〜1f・2a・2b・攻撃アニメ）。
   ⚠ 共用の game.css は書き換えない。ここは body.game-versus の中だけに効かせる */

/* ---------- 机の上（PC）：左柱 300｜自分の機｜相手の機 276（設計稿 1a）---------- */
[data-skin="plain"] body.game-versus .lcd {
  --board-w: 320px;           /* 1 マス 32px */
  /* 高さは段数から出す：CPU 戦は頁の段数（PC 20）、友達の部屋は手機とそろえて 18（versus.js の setRows が --board-rows を書く）。
     盤・お邪魔メーター・盤の上の面は、どれもこの値を読む */
  --board-h: calc(var(--board-w) * var(--board-rows, 20) / 10);
  grid-template-columns: 300px auto 276px;
}
[data-skin="plain"] body.game-versus .vs-set { grid-area: stats; align-self: start; margin-top: var(--perch); }
/* TIME は小さな札（設計稿 1a）。ほかの遊技頁は左下いっぱいに広げているが、対戦の主役は盤の横の数字 */
[data-skin="plain"] body.game-versus .info-time { align-self: start; }
/* 右柱は 相手の機 → 札 を 26px あけて積む（設計稿 1a）。layout.css の柱の既定は 16px。
   ⚠ 右柱そのものが --perch ぶん下がっているので、相手の機に margin-top を足さないこと。
     二重に下がると札が版面（--box-h 778）の底を割り、首屏の下で切れる（站長報告 2026-09-16）*/
[data-skin="plain"] body.game-versus .play-col.is-right { gap: 26px; }

/* 自分の機の中：HOLD｜メーター｜盤｜NEXT、その下に送った／受けた。
   遮罩・演出の文字は grid-area: board の絶対配置で盤の上だけに重ねる（格子の区画が包含ブロックになる）。
   ⚠ 高さは盤の高さで止める。inset:0 のままだと、盤より背の高いメーター柱（札＋器＋数字）に
     行が合わせて伸び、遮罩が盤の下へはみ出す */
[data-skin="plain"] body.game-versus .screen {
  display: grid; align-items: start; column-gap: 10px;
  grid-template-columns: 64px auto auto 64px;
  grid-template-areas: "hold meter board next" "totals totals totals totals";
}
[data-skin="plain"] body.game-versus .vs-col.is-hold { grid-area: hold; }
[data-skin="plain"] body.game-versus .vs-meter-col { grid-area: meter; }
[data-skin="plain"] body.game-versus #board { grid-area: board; margin: 0; }
[data-skin="plain"] body.game-versus .vs-col.is-next { grid-area: next; }
[data-skin="plain"] body.game-versus .vs-totals { grid-area: totals; }
[data-skin="plain"] body.game-versus .screen > .game-overlay,
[data-skin="plain"] body.game-versus .screen > .fx-layer { grid-area: board; position: absolute; inset: 0 0 auto; height: var(--board-h); }
.vs-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.vs-col.is-next { padding-top: 0; }
.vs-col.is-hold { padding-top: 0; }
.vs-col-tag { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #8A755C; white-space: nowrap; }
.vs-col-tag.is-gap { margin-top: 14px; }
.vs-col-tag.is-hot { letter-spacing: 1px; color: #C23D2E; }
.vs-box {
  display: block; width: 64px; height: 52px; box-sizing: border-box;
  background: #FBF4E4; border: 2px solid var(--stroke); border-radius: 10px;
}
.vs-box.is-later { opacity: .6; }
.vs-box.is-last { opacity: .4; }
.vs-count-box {
  width: 64px; box-sizing: border-box; display: grid; place-items: center; padding: 6px 0;
  background: #FFFDF7; border: 2px solid var(--stroke); border-radius: 10px;
}
.vs-count-box b { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 24px; line-height: 1; color: var(--stroke); }
.vs-count-box.is-ren { background: #F6EEFB; border-color: #7C4FB0; }
.vs-count-box.is-ren b { color: #6A3E9C; }

/* お邪魔メーター。1 段＝盤の 1 マス（高さは JS が --vs-step で渡す）*/
.vs-meter-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vs-meter {
  position: relative; width: 16px; height: var(--board-h, 640px); box-sizing: border-box; overflow: hidden;
  background: #FFFDF7; border: 2px solid var(--stroke); border-radius: 999px;
}
.vs-meter i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: #E35A4B repeating-linear-gradient(180deg, transparent 0 calc(var(--vs-step, 32px) - 2px), var(--stroke) calc(var(--vs-step, 32px) - 2px) var(--vs-step, 32px));
  transition: height .32s cubic-bezier(.2, .9, .3, 1);
}
.vs-meter.is-filled i { border-top: 2px solid var(--stroke); transition: height .38s cubic-bezier(.2, .9, .3, 1.25); }
.vs-pend { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 18px; line-height: 1; color: #B99C6B; }
.vs-pend.is-hot { color: #C23D2E; }
.vs-meter-col.is-opp { gap: 5px; }
.vs-meter-col.is-opp .vs-meter { width: 12px; height: calc(220px * var(--board-rows, 20) / 10 + 4px); }
.vs-meter-col.is-opp .vs-pend { font-size: 14px; }

body.game-versus .screen > .game-overlay { border-radius: var(--radius, 10px); background: rgba(251, 244, 228, .95); line-height: 1.7; }
.vs-totals { display: flex; justify-content: center; gap: 12px; margin: 12px 0 0; font-size: 11px; font-weight: 800; color: #8A755C; }
.vs-totals b { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 14px; color: var(--stroke); }
.vs-totals i { font-style: normal; color: #EADFC8; }

/* ---------- SET（設計稿 1d〜1f）---------- */
.vs-set-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.vs-set-side { text-align: center; }
.vs-set-num { display: block; font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 54px; line-height: 1; color: #B99C6B; }
.vs-set-num.is-live { color: var(--stroke); }
.vs-set-num.is-win { color: #C05A2E; }
.vs-set-dash { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 28px; color: #B99C6B; }
.vs-name {
  display: inline-block; margin-top: 8px; padding: 2px 12px;
  background: #F6E7C6; border: 2px solid var(--stroke); border-radius: 999px; font-size: 12px; font-weight: 900; color: var(--stroke);
}
.vs-name.is-unknown { background: #FFFDF7; border-style: dashed; border-color: #C8B89A; color: #8A755C; }
.vs-name.is-unknown.is-known { border-style: solid; border-color: var(--stroke); }
.vs-name.is-win { background: #F4D488; color: var(--stroke); }
.vs-set-note { margin: 12px 0 0; text-align: center; font-size: 11.5px; font-weight: 800; color: #8A755C; }
.vs-set-note.is-strong { color: #C05A2E; }

/* ---------- 開始前の面（設計稿 1d）・CPU の強さの面 ---------- */
body.game-versus .screen > .game-overlay.vs-level { gap: 12px; }
.vs-start strong { font-size: 22px; color: var(--stroke); white-space: nowrap; }
.vs-start p { margin: -6px 0 4px; max-width: 250px; font-size: 13px; color: var(--stroke); }
.vs-menu { display: grid; gap: 10px; width: 250px; }
.vs-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px;
  background: #FFFDF7; color: var(--stroke); border: 2px solid var(--stroke); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 800; line-height: 1.5; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 0 var(--stroke);
}
.vs-btn.is-main { padding: 10px 14px; background: #F08C2E; color: #FFFDF7; font-size: 15px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 4px 0 var(--stroke); }
.vs-btn.is-small { padding: 7px 10px; font-size: 13px; }
.vs-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }
/* まだ作っていない入口（友達・オンライン）。押せないことが形で分かるよう、輪郭と影を薄め、「準備中」の札を添える */
.vs-btn:disabled,
.vs-btn:disabled:active { cursor: default; transform: none; color: #8A755C; background: #F6EEDC; border-color: #C8B89A; box-shadow: 0 3px 0 #C8B89A; }
.vs-soon { padding: 1px 7px; background: #EADFC8; color: #8A755C; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; line-height: 1.4; }
/* 字は折らない。幅が足りなければ札ごと次の行へ送る（360px 幅のなぞる版で「やさし／い」と折れていた）*/
.vs-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -2px 0 4px; }
.vs-levels button {
  padding: 3px 12px; background: #FFFDF7; color: #8A755C; border: 2px solid var(--stroke); border-radius: 999px;
  font: inherit; font-size: 11.5px; font-weight: 900; line-height: 1.5; white-space: nowrap; cursor: pointer;
}
[data-skin="console"] body.game-versus .vs-levels button { padding-inline: 9px; }
.vs-levels button[aria-pressed="true"] { background: var(--stroke); color: #FFF8E8; }

/* ---------- カウントダウン（設計稿 1e）---------- */
body.game-versus .screen > .game-overlay.vs-count { gap: 14px; background: rgba(251, 244, 228, .72); line-height: 1.4; }
.vs-count-ring {
  width: 160px; height: 160px; display: grid; place-items: center;
  background: #FFFDF7; border: 3px solid var(--stroke); border-radius: 999px; box-shadow: 0 6px 0 var(--stroke);
}
.vs-count-ring b { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 112px; line-height: 1; color: #E35A4B; }
.vs-count-ring b.is-tick { animation: vs-tick .35s ease-out; }
.vs-count-ring.is-small { width: 96px; height: 96px; box-shadow: 0 4px 0 var(--stroke); }
.vs-count-ring.is-small b { font-size: 64px; color: var(--stroke); }
.vs-count-label { padding: 4px 16px; background: var(--stroke); color: #FFF8E8; border-radius: 999px; font-size: 13px; font-weight: 900; letter-spacing: 1px; line-height: 1.4; }

/* ---------- 結果（設計稿 1f）---------- */
body.game-versus .screen > .game-overlay.vs-result { gap: 10px; line-height: 1.5; }
/* 1 本決まったときの面：決着の面（vs-result）と同じ文字の大きさで、次の局までの帯を添える */
body.game-versus .screen > .game-overlay.vs-round { gap: 10px; line-height: 1.5; }
.vs-round-no { padding: 2px 12px; background: #FFFDF7; border: 2px solid var(--stroke); border-radius: 999px; font-size: 12px; font-weight: 900; color: var(--stroke); }
.vs-round strong { font-size: 30px; line-height: 1.2; color: #C05A2E; }
.vs-round strong.is-lose { color: var(--stroke); }
.vs-round-status { margin: 0; font-size: 14px; font-weight: 900; color: var(--stroke); }
.vs-round-next { display: grid; justify-items: center; gap: 6px; margin-top: 6px; }
.vs-round-next small { font-size: 11.5px; font-weight: 800; color: #8A755C; }
.vs-round-bar { position: relative; display: block; width: 140px; height: 6px; overflow: hidden; background: #EADFC8; border: 1.5px solid var(--stroke); border-radius: 999px; }
.vs-round-bar::after { content: ''; position: absolute; inset: 0; background: #F08C2E; transform: scaleX(0); transform-origin: left; }
.vs-round-bar.is-run::after { animation: vs-break var(--vs-break, 3s) linear forwards; }
@keyframes vs-break { to { transform: scaleX(1); } }
.vs-result-mark { width: 52px; height: 52px; display: grid; place-items: center; background: #F4D488; border: 2px solid var(--stroke); border-radius: 999px; }
.vs-result strong { font-size: 30px; line-height: 1.2; color: #C05A2E; }
.vs-result strong.is-lose { color: var(--stroke); }
.vs-result-score { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 40px; line-height: 1; color: var(--stroke); }
.vs-result-stats { display: flex; flex-direction: column; width: 100%; max-width: 240px; margin-top: 4px; text-align: left; }
.vs-result-actions { display: grid; gap: 8px; width: 240px; margin-top: 8px; }
.vs-result-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- 友達の部屋（設計稿 1g：待つ・入る・やめる確認・知らせ）---------- */
body.game-versus .screen > .game-overlay.vs-room { gap: 12px; }
.vs-room p { max-width: 264px; }
.vs-wins { margin: 0; }
.vs-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 264px; max-width: 100%; }
.vs-link-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
  padding: 8px 10px; background: #FFFDF7; border: 2px solid var(--stroke); border-radius: 10px;
  font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.3; color: var(--stroke); text-align: left;
}
.vs-send { display: flex; gap: 8px; width: 264px; max-width: 100%; }
.vs-send .vs-btn { flex: 1; min-width: 0; padding: 7px 10px; font-size: 12.5px; text-decoration: none; }
.vs-line-mark { flex: none; width: 12px; height: 12px; box-sizing: border-box; background: #06C755; border: 2px solid var(--stroke); border-radius: 3px; }
.vs-x-mark { font-family: Anton, Impact, sans-serif; font-size: 13px; font-weight: 400; }
.vs-room-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 12.5px; color: #8A755C; }
.vs-room-status i { width: 8px; height: 8px; border-radius: 50%; background: #C05A2E; animation: vs-wait 1s ease-in-out infinite; }
.vs-code { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; letter-spacing: 1px; }
.vs-leave { font-size: 11px; font-weight: 700; color: #8A755C; text-decoration: underline; text-underline-offset: 3px; }
/* オンラインで対戦の列：待つあいだに選べる ほかの遊び方（押せば列を出る）*/
.vs-queue-offer { display: grid; justify-items: center; gap: 6px; }
.vs-queue-offer small { font-size: 11px; font-weight: 700; color: #8A755C; }
/* やめる確認のあいだも局は進むので、盤が透けて見える薄さにする */
body.game-versus .screen > .game-overlay.vs-quit { gap: 10px; background: rgba(251, 244, 228, .8); }
.vs-toast {
  position: absolute; left: 50%; top: 12px; z-index: 6; transform: translateX(-50%); margin: 0; pointer-events: none;
  padding: 4px 12px; background: var(--stroke); color: #FFF8E8; border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
[data-skin="plain"] body.game-versus .screen > .vs-toast { grid-area: board; }
.vs-result-note { margin: -2px 0 0; font-size: 12.5px; font-weight: 800; color: #C05A2E; white-space: pre-line; }
.vs-opp-cover.is-wait { flex-direction: column; gap: 14px; }
.vs-q {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #FFFDF7; border: 2px dashed #C8B89A; border-radius: 999px; font-size: 22px; font-weight: 900; color: #C8B89A;
}
@keyframes vs-wait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- 相手の機（設計稿 1a・約 70%）---------- */
.vs-opp {
  position: relative; padding: 30px 14px 14px;
  background: var(--console-face, #F6E7C6); border: 2px solid var(--stroke); border-radius: 20px; box-shadow: 0 5px 0 var(--stroke);
}
.vs-opp-tags { position: absolute; top: -14px; left: 16px; z-index: 1; display: flex; gap: 6px; }
body.game-versus .vs-opp-tag { position: static; background: #FFFDF7; color: #8A755C; border: 2px dashed #C8B89A; }
body.game-versus .vs-opp-tag.is-known { background: #F4D488; color: var(--stroke); border: 2px solid var(--stroke); }
body.game-versus .vs-opp-level { position: static; background: #FFFDF7; color: #8A755C; font-size: 12px; }
.vs-opp-row { display: flex; justify-content: center; align-items: flex-start; gap: 8px; }
/* 相手が決まるまでの機は「眠っている」：空の盤だけで、メーターと HOLD／NEXT は出さない（設計稿 1d）*/
.vs-opp:not(.is-known) .vs-meter-col,
.vs-opp:not(.is-known) .vs-opp-previews { display: none; }
.vs-opp-board { position: relative; line-height: 0; }
.vs-opp-canvas { display: block; width: 220px; height: calc(220px * var(--board-rows, 20) / 10); box-sizing: content-box; border: 2px solid var(--stroke); border-radius: 10px; }
.vs-opp-fx {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0;
  font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--stroke); text-shadow: 0 0 3px #FBF4E4, 0 0 3px #FBF4E4, 0 0 6px #FBF4E4;
}
.vs-opp-fx.is-pop { animation: vs-fx-pop 900ms ease-out forwards; }
.vs-opp-cover {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px;
  border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 800; line-height: 1.7; color: #8A755C;
}
.vs-opp-cover.is-count { background: rgba(251, 244, 228, .72); }
.vs-opp-cover.is-result { background: rgba(74, 56, 38, .28); }
.vs-opp-cover.is-result b { padding: 6px 18px; background: var(--stroke); color: #FFF8E8; border-radius: 999px; font-size: 16px; font-weight: 900; letter-spacing: 1px; line-height: 1.5; }
.vs-opp-previews { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #8A755C; }
.vs-opp-previews span { display: flex; align-items: center; gap: 5px; }
.vs-mini-box { display: block; width: 40px; height: 30px; box-sizing: border-box; background: #FBF4E4; border: 2px solid var(--stroke); border-radius: 8px; }
.vs-danger {
  position: absolute; left: 50%; top: -10px; z-index: 6; transform: translate(-50%, 0);
  padding: 2px 10px; background: #E35A4B; color: #FFFDF7; border: 2px solid var(--stroke); border-radius: 999px;
  font-size: 11px; font-weight: 900; line-height: 1.5; white-space: nowrap; animation: vs-warn .8s ease-in-out infinite;
}
.vs-card-rows { display: flex; flex-direction: column; }
.vs-row-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0;
  border-bottom: 2px dashed #EADFC8; font-size: 12.5px; font-weight: 800; line-height: 1.45; color: #5C4A38;
}
.vs-row-line:last-child { border-bottom: 0; }
/* 行高は設計稿（行高の指定なし = normal）に寄せる。頁の既定 1.7 のままだと 1 行 6px 伸び、
   4 行の「送れる段」で右柱が版面を割る */
.vs-row-line b { font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; font-size: 15px; line-height: 1.2; }
.vs-row-line.is-mine b { color: #C23D2E; }

/* ---------- 飛ぶ攻撃・揺れ（攻撃アニメ）---------- */
.vs-pill {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0;
  padding: 4px 12px; background: #E35A4B; color: #FFFDF7; border: 2px solid var(--stroke); border-radius: 999px;
  font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 17px; line-height: 1; white-space: nowrap; box-shadow: 0 3px 0 var(--stroke);
}
.vs-pill.is-big { padding: 6px 16px; font-size: 22px; }
.vs-pill.is-flying { opacity: 1; transition: transform .5s cubic-bezier(.25, .8, .3, 1), opacity .12s; }
.vs-pill.is-gone { opacity: 0; transition: transform .5s cubic-bezier(.25, .8, .3, 1), opacity .18s; }
.is-hit { animation: vs-shake .4s ease-out 1; }
.is-thud { animation: vs-thud .3s ease-out 1; }
@keyframes vs-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, -1px); } }
@keyframes vs-thud { 0% { transform: translateY(0); } 30% { transform: translateY(5px); } 100% { transform: translateY(0); } }
@keyframes vs-warn { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, 0) scale(1.12); } }
@keyframes vs-fx-pop { 0% { opacity: 0; transform: translateY(6px) scale(.86); } 14% { opacity: 1; transform: translateY(0) scale(1.06); } 26% { transform: translateY(0) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scale(1); } }
@keyframes vs-tick { 0% { opacity: .3; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .vs-pill, .vs-meter i { transition: none; }
  .is-hit, .is-thud, .vs-danger, .vs-opp-fx.is-pop, .vs-count-ring b.is-tick, .vs-room-status i { animation: none; }
  .vs-round-bar.is-run::after { animation: none; transform: scaleX(1); }
}

/* ---------- レトロ機（手機・設計稿 2a／2b）----------
   ⚠ 寸法は書き写さない（CLAUDE.md「自适应是项目铁律」）。設計稿の px は 390 幅の端末での比で、
     ここでは盤の高さ --board-h・柱の幅・視口の幅からの比に直して clamp で上下を止める */
/* 液晶には盤だけを残す（HOLD・NEXT・REN・SET は状態板が出す）。
   ⚠ PC の札（SET・TIME・下の札）も出さない。game.css は頁ごとの札の名前で隠しているので、
     対戦の札は液晶の格子に入り込み、盤と状態板を横へ押し出していた（2026-09-16 実測）*/
[data-skin="console"] body.game-versus .vs-set,
[data-skin="console"] body.game-versus .info-time,
[data-skin="console"] body.game-versus .vs-card { display: none; }
.vs-mini { display: none; }
[data-skin="console"] body.game-versus .vs-col,
[data-skin="console"] body.game-versus .vs-totals,
[data-skin="console"] body.game-versus .vs-meter-col .vs-col-tag,
[data-skin="console"] body.game-versus .vs-meter-col .vs-pend { display: none; }

/* お邪魔メーターは盤の左に「並べる」。重ねると盤の左端の列が隠れる。
   幅は盤の高さの比（2b：盤 450 に 12px）。盤の幅の勘定には data-beside-board で入っている */
[data-skin="console"] body.game-versus .screen { display: flex; align-items: stretch; }
[data-skin="console"] body.game-versus .vs-meter-col { flex: none; gap: 0; width: clamp(8px, calc(var(--board-h) * .027), 12px); }
[data-skin="console"] body.game-versus .vs-meter { flex: 1; width: 100%; height: auto; border: 0; border-radius: 0; background: #F6E7C6; }
/* 2a（なぞる版）のメーターは丸い筒で、盤との間をあける（盤 576 に 間 8）。間は padding で取る ——
   margin だと data-beside-board の幅に入らず、そのぶん盤が枠からはみ出す */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-meter-col { box-sizing: content-box; padding-right: clamp(4px, calc(var(--board-h) * .014), 8px); }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-meter { border-radius: 999px; background: #FBF4E4; }

/* 相手の小窓。2a（なぞる版）は状態板の中段：1 マスは 390 幅で 6px、視口の幅に比例 */
[data-skin="console"] body.game-versus .vs-mini { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; margin-left: auto; }
.vs-mini-tag { font-size: 8px; font-weight: 900; letter-spacing: 1px; line-height: 1.5; color: #8A755C; white-space: nowrap; }
.vs-mini-well { position: relative; display: block; line-height: 0; }
.vs-mini-board {
  --vs-cell: clamp(5px, 1.55vw, 7px);
  display: block; width: calc(var(--vs-cell) * 10); height: calc(var(--vs-cell) * var(--board-rows, 18));
  box-sizing: content-box; border: 2px solid var(--stroke); border-radius: 4px;
}
.vs-danger.is-mini { top: 8px; padding: 0 6px; border-width: 1.5px; font-size: 8px; }
.num-tag.is-hot { color: #C23D2E; }
.status-panel [data-vs-pend="self"] { color: #C23D2E; }
[data-skin="console"] body.game-versus .num-tag,
[data-skin="console"] body.game-versus .num-row .seg { white-space: nowrap; }
/* 2a の「戦績 0-0」は 1 行。板の数字の列が狭い端末では、札の下へ数字を送る（「0-」と「0」に割れないように）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .num-row:first-child { flex-wrap: wrap; column-gap: 6px; row-gap: 1px; }
/* 2a の数字は 3 段：SET／お邪魔／REN。お邪魔と REN を 1 行に並べると、狭い板で「お邪魔」が折り返す */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .num-row:last-child { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 3px 5px; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus [data-vs-pend="self"] { font-size: 15px; }

/* 2b（片手・両手）：柱の上から CPU 札 → 相手の小盤 → SET → お邪魔／REN → NEXT｜HOLD → Ⅱ。
   柱の高さは盤の高さそのものなので、小盤は縮められる。背の高い端末では柱の幅いっぱい（比 10:行数）で止め、
   余った高さは Ⅱ の上に残す。
   ⚠ NEXT と HOLD は横に並べる（設計稿 2b は縦積み）。2b の値のまま縦に積むと柱の中身は約 474px で、
     盤 450px の柱に入らない —— HOLD が Ⅱ の下に潜っていたのはこのため。並べ方は 2a の状態板と同じ */
html[data-pad-mode="one"] body.game-versus .lcd .vs-mini,
html[data-pad-mode="two"] body.game-versus .lcd .vs-mini { order: -1; flex: 0 1 auto; min-height: 0; margin: 0; align-items: flex-start; gap: 6px; }
html[data-pad-mode="one"] body.game-versus .lcd .vs-mini-tag,
html[data-pad-mode="two"] body.game-versus .lcd .vs-mini-tag {
  padding: 1px 9px; background: #FFFDF7; color: #8A755C;
  border: 2px dashed #C8B89A; border-radius: 999px; font-size: 9px; letter-spacing: 0;
}
html[data-pad-mode="one"] body.game-versus .lcd .vs-mini-tag.is-known,
html[data-pad-mode="two"] body.game-versus .lcd .vs-mini-tag.is-known { background: #F4D488; color: var(--stroke); border-style: solid; border-color: var(--stroke); }
/* 井（size コンテナ）は柱の幅いっぱい・比 10:行数 で、縦が足りなければ縮む。盤は井に収まる最大の大きさ。
   cq 単位を読めない古い端末は、上の 2a の大きさのまま出る */
html[data-pad-mode="one"] body.game-versus .lcd .vs-mini-well,
html[data-pad-mode="two"] body.game-versus .lcd .vs-mini-well {
  flex: 0 1 auto; min-height: 0; width: 100%; container-type: size; aspect-ratio: 10 / var(--board-rows, 18);
}
html[data-pad-mode="one"] body.game-versus .lcd .vs-mini-board,
html[data-pad-mode="two"] body.game-versus .lcd .vs-mini-board {
  width: min(calc(100cqw - 4px), calc((100cqh - 4px) * 10 / var(--board-rows, 18)));
  height: auto; aspect-ratio: 10 / var(--board-rows, 18);
  margin: 0 auto; border-radius: 6px;
}
html[data-pad-mode="one"] body.game-versus .lcd .vs-danger.is-mini,
html[data-pad-mode="two"] body.game-versus .lcd .vs-danger.is-mini { top: 10px; }
html[data-pad-mode="one"] body.game-versus .lcd .num-row:first-child,
html[data-pad-mode="two"] body.game-versus .lcd .num-row:first-child { padding-bottom: 6px; border-bottom: 2px dashed #DCCB9F; }
html[data-pad-mode="one"] body.game-versus .lcd .panel-previews,
html[data-pad-mode="two"] body.game-versus .lcd .panel-previews { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html[data-pad-mode="one"] body.game-versus .lcd .preview,
html[data-pad-mode="two"] body.game-versus .lcd .preview { min-width: 0; }
html[data-pad-mode="one"] body.game-versus .lcd .preview b,
html[data-pad-mode="two"] body.game-versus .lcd .preview b { max-width: 100%; padding: 1px 5px; overflow: hidden; font-size: 8.5px; letter-spacing: 0; }
html[data-pad-mode="one"] body.game-versus .lcd .preview-boxes,
html[data-pad-mode="two"] body.game-versus .lcd .preview-boxes { flex: none; }
/* NEXT は 1 手（設計稿 2b）。箱の比は 2a の 44×32 */
html[data-pad-mode="one"] body.game-versus .lcd .preview .mini-box,
html[data-pad-mode="two"] body.game-versus .lcd .preview .mini-box { flex: none; height: auto; min-height: 0; aspect-ratio: 44 / 32; }
html[data-pad-mode="one"] body.game-versus .lcd .mini-box.is-later,
html[data-pad-mode="two"] body.game-versus .lcd .mini-box.is-later { display: none; }

/* 膜の中身は盤＋柱の幅に収める（狭い端末で釦が切れないように）*/
[data-skin="console"] body.game-versus .vs-menu,
[data-skin="console"] body.game-versus .vs-result-actions { max-width: 100%; }
/* 結果の面（手機）：大きさを盤高 --board-h の比で詰め、成績 4 行は 2 列にする。
   360×640 の片手・両手（盤 約 370px）では CPU 戦でも下の釦が切れ、オンラインで対戦は一言・きまり・もう一度さがす の
   ぶん上の見出しまで切れていた（2026-09-17 実測）。それでも入らない端末では面の中だけ縦に送る（safe で上を切らない）*/
[data-skin="console"] body.game-versus .screen > .game-overlay.vs-result {
  justify-content: safe center; overflow-y: auto; overscroll-behavior: contain;
  gap: clamp(4px, calc(var(--board-h) * .016), 10px);
}
[data-skin="console"] body.game-versus .vs-result-mark { width: clamp(30px, calc(var(--board-h) * .1), 52px); height: clamp(30px, calc(var(--board-h) * .1), 52px); }
[data-skin="console"] body.game-versus .vs-result-mark svg { width: 58%; height: 58%; }
[data-skin="console"] body.game-versus .vs-result strong { font-size: clamp(22px, calc(var(--board-h) * .06), 30px); }
[data-skin="console"] body.game-versus .vs-result-score { font-size: clamp(28px, calc(var(--board-h) * .08), 40px); }
[data-skin="console"] body.game-versus .vs-round strong { font-size: clamp(22px, calc(var(--board-h) * .06), 30px); }
[data-skin="console"] body.game-versus .vs-round-status { font-size: clamp(12px, calc(var(--board-h) * .032), 14px); }
[data-skin="console"] body.game-versus .vs-result-note { font-size: clamp(11px, calc(var(--board-h) * .028), 12.5px); }
[data-skin="console"] body.game-versus .vs-result-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 0; }
[data-skin="console"] body.game-versus .vs-result-stats .vs-row-line { padding-block: clamp(2px, calc(var(--board-h) * .01), 5px); font-size: 11.5px; }
[data-skin="console"] body.game-versus .vs-result-stats .vs-row-line:nth-last-child(2) { border-bottom: 0; }
[data-skin="console"] body.game-versus .vs-result-actions { gap: clamp(5px, calc(var(--board-h) * .016), 8px); margin-top: clamp(2px, calc(var(--board-h) * .01), 8px); }
[data-skin="console"] body.game-versus .vs-result .vs-btn { padding-block: clamp(5px, calc(var(--board-h) * .016), 10px); }
/* カウントダウンの輪は盤の高さの比（PC の 160px は版面ごと縮むのでそのまま）*/
[data-skin="console"] body.game-versus .vs-count-ring { --vs-ring: clamp(72px, calc(var(--board-h) * .28), 120px); width: var(--vs-ring); height: var(--vs-ring); }
[data-skin="console"] body.game-versus .vs-count-ring b { font-size: calc(var(--vs-ring) * .66); }