/* 対戦頁の手機・なぞる版（最初の既定の遊び方）。設計稿 3b「焦茶 5px・器を内へ寄せる」（design/3b手机对战模式布局优化、站長 2026-09-17 指定）。
   レトロ機（片手・両手）は相手を液晶の柱に入れて足りているが、なぞる版は状態板の中段に相手の小盤があり、
   状態板が 146px に伸びて盤を押し縮めていた —— そこで：
     ・状態板は 1 段（戦績・お邪魔／REN ｜ NEXT・HOLD・Ⅱ）。相手の小盤は外す
     ・盤の器は焦茶 5px の中に米白 6px。器の左右は状態板とそろえる（設計稿は内へ 24px 寄せていたが、盤が幅で頭打ちになり
       下に 77px 空いたので、站長 2026-09-17「拉高游戏区域」で寄せをやめ、柱を 64→58 に細くした。390×664 で盤 222×399 → 249×449）
     ・盤の右に相手の柱：あいて・名前と強さ・小盤・お邪魔・送った／受けた・直近の攻撃・TIME（PC の「相手の機」と同じ持ち物）
     ・それでも縦に余ったぶんは手勢の行の上へ（手勢の行は下端へ貼りつける）
   ⚠ PC（plain）とレトロ機には効かせない —— セレクタは全部 html[data-skin="console"][data-pad-mode="swipe"] body.game-versus。
   ⚠ 設計稿の px は 390 幅での値。幅は視口の比に直してある（CLAUDE.md「自适应是项目铁律」）。字の大きさと線の太さは設計稿のまま */
.vs-side { display: none; }

html[data-skin="console"][data-pad-mode="swipe"] body.game-versus {
  --vs-side-w: clamp(50px, 14.9vw, 64px);   /* 柱の中身の幅＝相手の小盤の外寸（設計稿 64 / 390 を、盤を高くするため 58 / 390 に。站長 2026-09-17）*/
}

/* ---------- 状態板：1 段 ---------- */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .status-panel .vs-mini { display: none; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .panel-previews { margin-left: auto; }
/* お邪魔と REN は 1 行（小盤が抜けて幅が空いた。versus.css の 2 列の格子を戻す）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .num-row:last-child { display: flex; align-items: baseline; gap: 6px; }

/* ---------- 盤の器 ---------- */
/* 焦茶 5px（.bezel の余白）の中に米白 6px（.lcd-frame の余白）。
   --board-inset：器を左右へさらに寄せる量（SIDE_GAP を越えて足す片側の比）。設計稿 3b どおりなら .0308（390 幅で枠 342）だが、
   盤を高くするため 0（枠は状態板と同じ左右 12px）。戻すときはここだけ */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .bezel {
  --board-inset: 0;
  margin-top: 10px; padding: 5px; border-radius: 16px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .35);
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .lcd-frame { padding: 6px; background: var(--board-bg); border-radius: 11px; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus #board { border-radius: 6px; }
/* お邪魔メーター：米白の面の上なので、筒に焦茶の輪郭と淡い地を付ける（なぞる版の他の遊技頁は輪郭なし）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-meter { box-sizing: border-box; background: #F6E7C6; border: 2px solid var(--stroke); overflow: hidden; }

/* ---------- 相手の柱 ---------- */
/* 盤との間 8 ＋ 破線 2 ＋ 柱の内側 8 は padding で取る。margin にすると data-beside-board の幅に入らず、盤が枠からはみ出す */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side {
  position: relative; flex: none; box-sizing: content-box; width: var(--vs-side-w);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 0 6px 18px; overflow: hidden;
  line-height: 1.4;   /* 盤の器（.screen）は canvas のために行高 0。柱の字はそれを継ぐと上下が重なる */
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 2px dashed #DCCB9F;
}
/* あいて：相手が決まるまで破線、決まったら黄の札（レトロ機の柱の CPU 札と同じ）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-tag {
  padding: 1px 9px; background: #FFFDF7; color: #8A755C; border: 2px dashed #C8B89A; border-radius: 999px;
  font-size: 9px; font-weight: 900; line-height: 1.5; white-space: nowrap;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-tag.is-known { background: #F4D488; color: var(--stroke); border: 2px solid var(--stroke); }
/* 名前と強さ（「CPU ふつう」）。決まってから出す。柱に入らなければ 2 行まで折り返す（「CPU やさしい」は 1 行に入らない）。
   オンラインの名前は 10 字まであるので、2 行を越える分は切る */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-name {
  display: none; box-sizing: border-box; max-width: 100%; margin-top: -2px; padding: 0 5px;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; text-align: center;
  background: #FFFDF7; color: #8A755C; border: 2px solid #C8B89A; border-radius: 9px;
  font-size: 8px; font-weight: 900; line-height: 1.4;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-name.is-known { display: -webkit-box; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-well { position: relative; display: block; flex: none; line-height: 0; }
/* 小盤の外寸は柱の幅。1 マスは（幅 − 輪郭 4px）÷ 10、高さはその段数ぶん */
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-board {
  display: block; width: calc(var(--vs-side-w) - 4px); height: calc((var(--vs-side-w) - 4px) / 10 * var(--board-rows, 18));
  border: 2px solid var(--stroke); border-radius: 6px; background: #FFFDF7;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-pend {
  display: flex; align-items: baseline; justify-content: center; gap: 4px; width: 100%;
  padding-bottom: 6px; border-bottom: 2px dashed #DCCB9F;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-pend b:first-child { font-size: 8px; font-weight: 900; letter-spacing: .5px; color: #C23D2E; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-totals {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 4px; width: 100%;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-totals b:nth-child(odd) { font-size: 8px; font-weight: 900; letter-spacing: .5px; color: #8A755C; white-space: nowrap; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus :is(.vs-side-pend [data-vs-pend], .vs-side-totals b:nth-child(even), .vs-side-time [data-vs-time], .vs-log-chip) {
  font-family: 'Share Tech Mono', ui-monospace, monospace; font-weight: 400; line-height: 1;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-pend [data-vs-pend] { font-size: 13px; color: #C23D2E; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-totals b:nth-child(even) { font-size: 13px; color: var(--stroke); text-align: right; }
/* 直近の攻撃（ui/versus-hud.js の logAttack が 3 件まで書く）。背の低い端末では下から切れてよい（TIME は下端に残す）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-log {
  display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 0; overflow: hidden;
  margin-top: 4px; padding-top: 6px; border-top: 2px dashed #DCCB9F;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-log-chip {
  align-self: flex-start; padding: 1px 7px; font-size: 10px; line-height: 1.3; white-space: nowrap;
  background: #FFFDF7; color: var(--stroke); border: 1.5px solid var(--stroke); border-radius: 999px;
}
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-log-chip.is-mine { align-self: flex-end; background: #E35A4B; color: #FFFDF7; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-log-chip:nth-child(3) { opacity: .75; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-time { display: flex; flex: none; flex-direction: column; align-items: center; gap: 1px; margin-top: auto; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-time b:first-child { font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #8A755C; }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .vs-side-time [data-vs-time] { font-size: 14px; color: var(--stroke); }

/* ---------- 手勢の行は下端へ ---------- */
/* 盤は幅で決まるので、背の高い端末では縦が余る。余りは手勢の行の上へ置き、親指の届く下端に行を残す（設計稿 3b）。
   --pin-bottom：console-shell.js の盤合わせが、測るあいだだけ margin-top を止める印（余りを「盤以外の高さ」に数えないため）*/
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .console { min-height: calc(100svh - var(--stage-top, 74px)); }
html[data-skin="console"][data-pad-mode="swipe"] body.game-versus .pad-gesture { --pin-bottom: 1; margin-top: auto; }