/* =========================================================
 * Spades — スタイルシート
 *
 * 見た目のテーマ: 古い賭場のカードルーム。
 *   深緑のフェルト / くるみ材の縁 / 真鍮の金具 / 象牙色のカード。
 *
 * 3D卓の数値(perspective 1250 / origin 50% 26% / rotateX 55°)と
 * レイヤーの z 順は LOGOS 66 の実測値をそのまま踏襲する。
 * 変えると SPEC §5-1 の落とし穴（面への沈み込み・遠近ズレ）が再発する。
 * ======================================================= */

:root {
  /* 卓 */
  --felt: #1f6b4a;
  --felt-2: #14503a;
  --felt-3: #0d3a29;
  --wood: #6b4526;
  --wood-2: #402a17;
  --brass: #d8b06a;
  --brass-2: #a8823f;

  /* カード */
  --ivory: #fbf7ee;
  --ink: #22262e;
  --pip-red: #c8102e;
  --pip-black: #1b1f27;

  /* チーム色（相対チーム: 0=自分たち / 1=相手） */
  --team-us: #f0b429;
  --team-us-2: #a87708;
  --team-them: #6aa9e0;
  --team-them-2: #2f6795;

  --danger: #e0405c;
  --ok: #4bbd7a;

  --card-radius: 9px;

  --font-title: "Playfair Display", Georgia, "Times New Roman", "Yu Mincho",
                "Hiragino Mincho ProN", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", Meiryo, sans-serif;
  /* カード面の数字は等幅寄りの書体のほうが札らしく見える */
  --font-card: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  color: #eae3d2;
  /* モバイルの連続タップ拡大を抑止（操作はゲーム内で完結する。SPEC §5-1-14） */
  touch-action: manipulation;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.07), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #17402f 0%, #0c2a1e 60%, #071a12 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
table { border-collapse: collapse; }

.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* =============== 共通ボタン =============== */

.btn {
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 26px;
  color: #2a1c07;
  background: linear-gradient(180deg, #f2d493, var(--brass));
  box-shadow: 0 3px 0 var(--brass-2), 0 8px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brass-2); }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.5); }
.btn:disabled:active { transform: none; }

.btn-primary { }
.btn-ghost {
  background: rgba(255,255,255,.07);
  color: #e9e2d0;
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.45);
}
.btn-ghost:active { box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.45); }
.btn-small { font-size: 12.5px; padding: 7px 14px; }
.btn-nil {
  background: linear-gradient(180deg, #4c4f63, #2c2f40);
  color: #f0e6cf;
  box-shadow: 0 3px 0 #1a1c28, 0 8px 18px rgba(0,0,0,.35);
}
.btn-nil.sel { background: linear-gradient(180deg, #e0405c, #9d1830); color: #fff; }

.corner-bar {
  position: absolute;
  top: 10px; right: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}
.lang-select {
  background: rgba(0,0,0,.35);
  color: #e9e2d0;
  border: 1.5px solid rgba(216,176,106,.45);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
}

/* =============== タイトル画面 =============== */
/* ⚠️ flex の justify-content:center はコンテンツが溢れると上端が画面外に
   出てスクロールでも届かない。中央寄せは内側ラッパの margin:auto で行う。 */
#screen-title {
  align-items: center;
  padding: 0 16px;
  text-align: center;
  overflow-y: auto;
}
.title-inner {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 0;
  max-width: 100%;
}
.title-mark {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.title-mark svg { width: clamp(22px, 4.4vw, 34px); height: auto; display: block; }
.title-mark .m-red { color: var(--pip-red); }
.title-mark .m-black { color: #efe6d2; }
.title-logo {
  font-family: var(--font-title);
  color: var(--brass);
  font-size: clamp(44px, 9vw, 78px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.5);
}
.title-sub {
  color: rgba(234,227,210,.7);
  font-weight: 600;
  font-size: clamp(12px, 2.8vw, 15px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* 席パネルは卓に敷いたフェルト。木枠を付けて盤面らしく見せる */
.setup-box {
  background:
    radial-gradient(ellipse at 30% 16%, rgba(255,255,255,.08), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, var(--felt) 0%, var(--felt-2) 100%);
  border: 7px solid var(--wood);
  box-shadow: 0 6px 0 var(--wood-2), 0 18px 34px rgba(0,0,0,.45),
              inset 0 0 46px rgba(0,0,0,.28);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(560px, 100%);
}
.team-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
}
.team-legend .tl {
  display: inline-flex; align-items: center; gap: 6px;
}
.team-legend .dot {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.team-legend .dot.us { background: var(--team-us); }
.team-legend .dot.them { background: var(--team-them); }

#panel-seats { display: flex; flex-direction: column; gap: 8px; }

.seat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.26);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.07);
}
.seat-row .seat-pos {
  width: 30px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
}
.seat-row .seat-team {
  width: 10px; height: 26px; border-radius: 4px; flex: 0 0 10px;
}
.seat-row .seat-team.us { background: var(--team-us); }
.seat-row .seat-team.them { background: var(--team-them); }
.seat-row .seat-who {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: #f3ecd9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-row .seat-who .tag {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
}
.seat-row .seat-who .tag.host { background: rgba(216,176,106,.85); color: #2a1c07; }
.seat-row .seat-who .tag.ready { background: rgba(75,189,122,.85); color: #06240f; }
.seat-row select, .panel-opts select, .panel-opts input {
  background: rgba(0,0,0,.4);
  color: #ede5d1;
  border: 1.5px solid rgba(216,176,106,.4);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: inherit;
}
.seat-row .btn-small { padding: 5px 11px; }

.panel-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.panel-opts label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.panel-hint {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,.66);
  min-height: 18px;
  line-height: 1.5;
}
.panel-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* hidden 属性は display を持つクラス（.btn-small 等）より強くする */
[hidden] { display: none !important; }

/* =============== 到着即マッチング（タイトル＝卓） =============== */
/* 席の 3 ボタン [AI][フレンド][誰でも]。押せないもの(.off)は薄く出して理由をヒントで言う */
.seg {
  display: inline-flex;
  flex: 0 0 auto;
  background: rgba(0,0,0,.36);
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.3);
}
.seg-btn {
  border: none;
  background: transparent;
  color: rgba(234,227,210,.72);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.seg-btn.sel {
  background: linear-gradient(180deg, #f2d493, var(--brass));
  color: #2a1c07;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.seg-btn.off { opacity: .4; }
.seg-btn:disabled { opacity: .4; cursor: default; }
.seat-row .seat-rule {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.link-btn {
  border: none;
  background: transparent;
  color: var(--brass);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: underline;
  padding: 2px 6px;
}
.slot-tools { text-align: center; margin-top: -4px; }
.slot-tools:empty { display: none; }
.table-head {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.lobby-status {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  min-height: 18px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lobby-status:empty { display: none; }
.lobby-status.dim { color: rgba(255,255,255,.5); }
.lobby-status.warn { color: #ffd2a8; }
.lobby-status .friends { font-size: 11.5px; color: rgba(255,255,255,.62); }
.lobby-status .why { font-size: 11.5px; color: #ffd2a8; }
/* 卓のカウントダウン。最後の 10 秒は赤い帯 */
.start-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.3);
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.3);
}
.start-box .start-text { font-weight: 800; font-size: 14px; color: #f3ecd9; }
.start-box.final {
  background: linear-gradient(180deg, #e0405c, #9d1830);
  box-shadow: 0 0 14px rgba(224,64,92,.5);
  animation: timer-pulse .6s infinite alternate;
}
.start-box.final .start-text { color: #fff; }
/* 乱入オファーの帯（画面の上・固定） */
.offer-bar {
  position: fixed;
  left: 50%; top: 10px;
  transform: translateX(-50%);
  z-index: 6000;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 20px);
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(16,18,26,.94);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(216,176,106,.5);
}
.offer-bar .offer-count {
  min-width: 26px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 12px;
}
/* モーダルではない短い知らせ（画面の下・固定） */
.toast {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 6000;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(16,18,26,.92);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  pointer-events: none;
  max-width: calc(100% - 24px);
  text-align: center;
}

/* =============== ゲーム画面のヘッダ =============== */

.game-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.24));
  border-bottom: 2px solid rgba(216,176,106,.28);
  flex: 0 0 auto;
}
.game-header .brand {
  font-family: var(--font-title);
  font-size: 17px;
  letter-spacing: .16em;
  color: var(--brass);
  font-weight: 700;
}
#hud-info {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(240,233,216,.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-header .menu { display: flex; gap: 6px; flex: 0 0 auto; }
/* ヘッダーのボタンは「残り 60」と同じ大きさの丸い小札（PC も。オーナー要望 2026-09-06） */
.game-header .menu .btn-small { font-size: 12px; font-weight: 800; padding: 3px 10px; line-height: 1.5; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }

/* 手番の残り時間。⚠️ 卓の駒にも数字は出しているが、カードを選んでいる間は
   視線が手札にあって気づけないので、ヘッダにも常設する */
.hud-timer {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.3);
  color: rgba(240,233,216,.8);
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.3);
  white-space: nowrap;
}
.hud-timer.mine { color: #2a1c07; background: linear-gradient(180deg, #f2d493, var(--brass)); }
.hud-timer.urgent {
  color: #fff;
  background: linear-gradient(180deg, #e0405c, #9d1830);
  box-shadow: 0 0 14px rgba(224,64,92,.6);
  animation: timer-pulse .6s infinite alternate;
}
@keyframes timer-pulse { from { filter: brightness(1); } to { filter: brightness(1.2); } }

/* チームのスコア帯（卓の外・平面。stage の遠近スタックの外に置く） */
#scorebar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 5px 10px 6px;
  flex: 0 0 auto;
  background: rgba(0,0,0,.26);
}
.sb-team {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 10px;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.09);
}
.sb-team.us { background: linear-gradient(180deg, rgba(240,180,41,.22), rgba(240,180,41,.07)); }
.sb-team.them { background: linear-gradient(180deg, rgba(106,169,224,.22), rgba(106,169,224,.07)); }
.sb-team .sb-name {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: rgba(255,255,255,.72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-team .sb-line { display: flex; align-items: baseline; gap: 8px; }
.sb-team .sb-score { font-size: 20px; font-weight: 800; line-height: 1.1; }
.sb-team.us .sb-score { color: var(--team-us); }
.sb-team.them .sb-score { color: var(--team-them); }
.sb-team .sb-unit { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.45); margin-left: -4px; }
.sb-team .sb-sub { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.72); }
.sb-team .sb-sub .made { color: var(--ok); }
.sb-team .sb-sub .short { color: var(--danger); }
.sb-team .sb-bags { font-size: 10.5px; color: rgba(255,255,255,.5); }
.sb-team .sb-bags.warn { color: var(--danger); font-weight: 800; }
/* 個人戦は枠が4つになる。1行に収めるため全体を詰める */
#scorebar.solo { gap: 3px; }
#scorebar.solo .sb-team { padding: 4px 6px; }
.sb-team.narrow .sb-name { font-size: 9.5px; }
.sb-team.narrow .sb-score { font-size: 15px; }
.sb-team.narrow .sb-unit { display: none; }
.sb-team.narrow .sb-sub { font-size: 10px; }
.sb-team.narrow .sb-bags { font-size: 9.5px; }
#scorebar.solo .sb-mid { padding: 0 2px; font-size: 9.5px; }
#scorebar.solo .sb-mid .sb-deal { font-size: 11.5px; }

.sb-mid {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-align: center;
  line-height: 1.3;
}
.sb-mid .sb-deal { font-size: 13px; color: var(--brass); }

#message-bar {
  flex: 0 0 auto;
  padding: 6px 12px 9px;
  text-align: center;
  color: rgba(240,233,216,.9);
  font-weight: 700;
  font-size: 13.5px;
  min-height: 22px;
}
#message-bar .warn { color: var(--danger); }

/* =============== 3Dステージ =============== */

#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.stage3d {
  perspective: 1250px;
  perspective-origin: 50% 26%;
}
.layer-table, .layer-hand, .layer-fx {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* レイヤー自体はクリックを奪わない（個々の操作要素だけ pointer-events:auto） */
.layer-fx { pointer-events: none; z-index: 300; }
.layer-hand { pointer-events: none; z-index: 200; }
.layer-table { pointer-events: none; z-index: 100; }
/* ⚠️ ビルボード層。3Dレイヤーに入れると傾いた卓面と交差して下半分が沈む。
   スクリーン座標の平面に分離するのが正解（SPEC §5 冒頭・実測） */
.layer-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 240;
  transform-style: flat;
}
.layer-token {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 250;
  transform-style: preserve-3d;
}

/* 卓の面 */
.table-felt {
  position: absolute;
  left: 0; top: 0;
  border-radius: 46%;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255,255,255,.09), rgba(0,0,0,0) 58%),
    radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  box-shadow: 0 0 0 11px var(--wood), 0 0 0 14px var(--wood-2),
              0 26px 46px rgba(0,0,0,.45), inset 0 0 70px rgba(0,0,0,.3);
  pointer-events: none;
}
/* トリック置き場の目印（卓面に焼き付けた真鍮の輪） */
.trick-ring {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  border: 2px dashed rgba(216,176,106,.3);
  pointer-events: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* ドラッグ中に「ここへ落ちる」と見せている状態。SPEC §5-1-10 のとおり、
   離した時の判定はこの表示と必ず一致させること */
.trick-ring.hot {
  border-color: rgba(216,176,106,.95);
  box-shadow: 0 0 30px rgba(216,176,106,.5), inset 0 0 30px rgba(216,176,106,.22);
}

/* 席ごとのカード置き場（相手の裏向きファンの入れ物） */
.zone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

/* 3Dカード（フリップ対応の入れ物） */
.card3d {
  position: absolute;
  left: 0; top: 0;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.3,.9,.35,1);
  pointer-events: none;
}
.card3d-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .3s ease;
}
.card3d-flip.facedown { transform: rotateY(180deg); }
.c3face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  box-shadow: 0 5px 14px rgba(0,0,0,.55);
}
.c3face.backface { transform: rotateY(180deg); }
.c3face .card { width: 100%; height: 100%; box-shadow: none; }

/* 手札 */
.hand-card {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.hand-card.dragging { cursor: grabbing; transition: none; }
.hand-card.playable .c3face.front {
  box-shadow: 0 0 0 3px var(--brass), 0 8px 18px rgba(0,0,0,.45);
}
.hand-card.blocked .c3face.front { filter: grayscale(.62) brightness(.72); }
.hand-card.raised .c3face.front {
  box-shadow: 0 0 0 3px #fff2cf, 0 0 22px rgba(216,176,106,.8), 0 10px 22px rgba(0,0,0,.45);
}

/* トリックに出たカード */
.trick-card .c3face { box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.trick-card.winning .c3face.front {
  box-shadow: 0 0 0 3px var(--brass), 0 0 20px rgba(216,176,106,.75), 0 6px 16px rgba(0,0,0,.6);
}

/* 「出す」ボタン
   ⚠️ 3Dのカード層ではなく平面のUI層(layer-ui)に置く。3D層だと
   (a) カードの translateZ より奥で隠れる (b) 手前でも遠近投影で数十px
   下へずれる（どちらも実測。SPEC §5-1-7）。 */
.play-btn3d {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 260;
  background: linear-gradient(180deg, #f7e2ae, var(--brass));
  color: #2a1c07;
  border: 1.5px solid #fffdf6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 14px;
  box-shadow: 0 0 12px rgba(216,176,106,.8), 0 2px 5px rgba(0,0,0,.35);
  animation: pulse3d .9s infinite alternate;
}
@keyframes pulse3d {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.06); }
}

/* 名札（ビルボード。平面のUI層） */
.seat-plate {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 92px;
  max-width: 168px;
  padding: 4px 9px 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12,26,20,.94), rgba(6,16,12,.94));
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.09);
  text-align: center;
  pointer-events: none;
  line-height: 1.25;
}
.seat-plate.team-us { border-top: 3px solid var(--team-us); }
.seat-plate.team-them { border-top: 3px solid var(--team-them); }
.seat-plate.turn {
  box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(216,176,106,.6),
              0 3px 10px rgba(0,0,0,.5);
}
.seat-plate .seat-name {
  font-size: 12px;
  font-weight: 800;
  color: #f2ecda;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-plate .seat-name .me { color: var(--brass); }
.seat-plate .seat-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.seat-plate .seat-bid {
  font-size: 11px;
  font-weight: 800;
  color: #0f1a14;
  background: var(--brass);
  border-radius: 999px;
  padding: 0 7px;
}
.seat-plate .seat-bid.nil { background: var(--danger); color: #fff; }
.seat-plate .seat-bid.pending { background: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.seat-plate .seat-tricks {
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}
.seat-plate .seat-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
}
/* 離席中（切断中の人間）は薄く・手番の金枠はそのまま。AI の席に残った「○○ 離席中」も同じ色 */
.seat-plate.away { opacity: .62; }
.seat-plate .seat-tag.away { color: #ffd166; letter-spacing: 0; font-size: 10px; }
.seat-plate .seat-rtc-btn {
  pointer-events: auto;
  margin-top: 2px;
  font-size: 10px;
  border: none;
  border-radius: 999px;
  padding: 1px 8px;
  background: rgba(216,176,106,.85);
  color: #2a1c07;
  font-weight: 800;
}

/* 手番の駒（3D） */
.token3d {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.token3d .tk-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #c79a3f, #7d5a18);
}
.token3d .tk-top {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6dd, #edcd85 42%, var(--brass) 78%, #9a7529);
  border: 2.5px solid #fffdf3;
  box-shadow: 0 0 20px rgba(216,176,106,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* 天面の文字は卓の傾き(55°)で潰れるので縦に伸ばして打ち消す */
.token3d .tk-label {
  color: #3b2905;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  transform: scaleY(1.74);
}
.token3d.counting .tk-label { font-family: Georgia, serif; }
/* ⚠️ .tk-top に transform 系のアニメーションは使わない。
   JS が translateZ で厚みを付けているのを上書きして天面が土台に沈む。 */
.token3d.urgent .tk-top {
  background: radial-gradient(circle at 34% 28%, #ffd9d2, #e0405c 45%, #c8102e 80%, #7d0a1d);
  animation: token-pulse .5s infinite alternate;
}
@keyframes token-pulse {
  from { box-shadow: 0 0 18px rgba(224,64,92,.7); filter: brightness(1); }
  to   { box-shadow: 0 0 34px rgba(224,64,92,1); filter: brightness(1.18); }
}
.token3d.urgent .tk-label { color: #fff; }
.token3d.urgent .tk-layer { background: linear-gradient(135deg, #7d0a1d, #4a0611); }
.token3d.arrived .tk-top { animation: token-arrive .9s ease-out; }
@keyframes token-arrive {
  0%   { box-shadow: 0 0 0 0 rgba(216,176,106,.95), 0 0 20px rgba(216,176,106,.8); }
  100% { box-shadow: 0 0 0 30px rgba(216,176,106,0), 0 0 20px rgba(216,176,106,.8); }
}

/* 場の状況チップ（リードスート / スペードのブレイク） */
.state-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(8,20,15,.86);
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.4);
  font-size: 11px;
  font-weight: 800;
  color: #f0e8d4;
  white-space: nowrap;
  pointer-events: none;
}
.state-chip > span { display: inline-flex; align-items: center; }
.state-chip svg { width: 12px; height: 12px; display: block; }
.state-chip .red { color: var(--pip-red); }
.state-chip .black { color: #f0e8d4; }
.state-chip.broken { background: rgba(120,14,32,.9); box-shadow: inset 0 0 0 1.5px rgba(255,180,180,.5); }

/* 「スペードが切れた！」の一拍バナー */
.broken-banner {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d1213f, #7d0a1d);
  color: #fff;
  font-weight: 800;
  font-size: clamp(14px, 3.4vw, 20px);
  letter-spacing: .04em;
  box-shadow: 0 0 26px rgba(224,64,92,.7), 0 8px 20px rgba(0,0,0,.5);
  pointer-events: none;
  z-index: 275;
  animation: banner-pop .55s cubic-bezier(.2,1.4,.4,1);
}
@keyframes banner-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* トリック確定の合図 */
.trick-glow {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 268;
  animation: trick-glow .75s ease-out forwards;
}
@keyframes trick-glow {
  0%   { box-shadow: 0 0 0 0 rgba(216,176,106,.9); opacity: 1; }
  100% { box-shadow: 0 0 0 46px rgba(216,176,106,0); opacity: 0; }
}

/* =============== カード面 =============== */

.card {
  position: relative;
  aspect-ratio: 2 / 3;
  width: var(--card-w, 150px);
  border-radius: var(--card-radius);
  background: linear-gradient(160deg, #ffffff 0%, var(--ivory) 55%, #f2ecdd 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  overflow: hidden;
  border: none;
  padding: 0;
  color: var(--pip-black);
  font-family: var(--font-card);
  /* 中の文字・ピップをカード幅に追従させる */
  container-type: inline-size;
  user-select: none;
}
.card.red { color: var(--pip-red); }
.card.blank { background: rgba(255,255,255,.12); box-shadow: none; }
button.card:disabled { cursor: default; }

/* 切り札(スペード)は縁を金にして一目で分かるようにする */
.card.trump::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  box-shadow: inset 0 0 0 2.5px rgba(216,176,106,.85);
  pointer-events: none;
}

.pc-suit { display: block; color: inherit; }
.pc-suit svg { width: 100%; height: 100%; display: block; }

.pc-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .95;
  z-index: 2;
}
.pc-corner.tl { top: 4.5cqw; left: 5cqw; }
.pc-corner.br { bottom: 4.5cqw; right: 5cqw; transform: rotate(180deg); }
.pc-rank {
  font-size: 21cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
}
/* 「10」だけは2文字ぶん横に広い。実物のトランプと同じで少し詰めて、
   角の表示が内側のピップに食い込まないようにする（実測: 33px→24px / 幅150px） */
.pc-rank.two { font-size: 17cqw; letter-spacing: -0.08em; }
.pc-corner .pc-suit.sm { width: 14cqw; height: 14cqw; margin-top: 1.5cqw; }

.pc-body {
  position: absolute;
  inset: 21cqw 22cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ⚠️ ピップは角の数字/スートと重ねない。
   角は左上 5cqw から幅 14〜16cqw を占めるので、ピップの列は
   その外側（左端が 23cqw 付近）から始める。数字が読めなくなるのを防ぐ。
   検査: tests/cardface.check.js が52枚すべてで重なり0を実測する。 */
.pc-pips { position: absolute; inset: 2cqw 10cqw; }
.pc-pip {
  position: absolute;
  width: 17cqw;
  height: 17cqw;
  transform: translate(-50%, -50%);
}
.pc-pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.pc-ace { width: 54cqw; height: 54cqw; }

.pc-court { position: absolute; inset: 0; display: flex; }
.pc-court svg { width: 100%; height: 100%; display: block; }
.pc-court-suit {
  position: absolute;
  width: 15cqw; height: 15cqw;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: .92;
}

/* 裏面 */
.card.back { background: #16334c; }
.pc-back-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-back-badge {
  position: absolute;
  left: 50%; top: 50%;
  width: 30cqw; height: 30cqw;
  transform: translate(-50%, -50%);
  color: #e9d9a8;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.pc-back-badge .pc-suit { width: 100%; height: 100%; }

/* 隣の札に隠れる手札は、見えている幅(--rev)に文字を収める。
   これをしないと数字が隠れて何の札か読めない（SPEC §5-2） */
.hand-card.tight:not(.raised):not(.dragging) .card .pc-corner.br { display: none; }
.hand-card.squeeze:not(.raised):not(.dragging) .card .pc-body { opacity: .35; }

/* =============== スクリーンショットの一瞬だけ =============== */
/* ⚠️ ポータルのスクショSDKは、要素の**実測矩形に軸並行の箱**を描く方式で、
   transform を行列としては持たない（docs/game-screenshot-spec.md §1/§5）。
   3Dの卓をそのまま撮ると:
     ・裏面(rotateY 180°)が表面の上に描かれ、**全部のカードが裏地の青**になる
     ・多重グラデーションのフェルトは先頭色(ほぼ透明な白)で塗られて消える
   撮る一瞬だけ「平らな見え方」に寄せる。付け外しは ui.js の producer。 */
.stage3d.shooting .card3d-flip { transform: none; transition: none; }
.stage3d.shooting .card3d-flip:not(.facedown) .c3face.backface { display: none; }
.stage3d.shooting .card3d-flip.facedown .c3face.front { display: none; }
/* フェルトの縁の木枠は box-shadow なので写らない。実線の枠で置き換える
   （box-sizing:border-box なので卓の大きさは変わらない）。
   角丸の % は px として読まれるので、大きい値にして楕円に寄せる。 */
.stage3d.shooting .table-felt {
  background: var(--felt-2);
  border: 12px solid var(--wood);
  border-radius: 999px;
}
/* 札の地色はグラデーションの1色目（純白）で塗られるので、実際の紙の色にする。
   ⚠️ 縁は outline ではなく border。SDKが描くのは border だけ（outline は無視）。
   これが無いと、重なった札どうしの境目が消えて白い塊に見える。 */
/* ⚠️ 表面だけ。`.card` 全部に掛けると `.card.back` の紺色まで上書きされ、
   相手の伏せ札が白い塊になる（実測）。 */
.stage3d.shooting .c3face.front .card { background: var(--ivory); }
.stage3d.shooting .c3face { box-shadow: none; border: 1px solid rgba(0,0,0,.35); }

/* =============== モーダル =============== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,12,9,.78);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  margin: auto;
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #1a4a36 0%, #0e2f22 100%);
  border: 6px solid var(--wood);
  box-shadow: 0 6px 0 var(--wood-2), 0 22px 40px rgba(0,0,0,.55);
  border-radius: 16px;
  padding: 20px 22px;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.modal-wide { width: min(760px, 100%); text-align: left; }
.modal h2 { font-family: var(--font-title); color: var(--brass); font-size: 22px; }
.result-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 5vw, 28px);
  color: var(--brass);
  font-weight: 700;
}
.result-title.win { color: #ffe6a0; text-shadow: 0 0 22px rgba(255,214,102,.6); }
.result-title.lose { color: #ffc3c9; }
.result-detail, .deal-detail {
  font-size: 13.5px;
  color: rgba(240,233,216,.85);
  line-height: 1.6;
}
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.score-table { width: 100%; font-size: 13.5px; }
.score-table th {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  padding: 4px 6px;
  border-bottom: 1.5px solid rgba(216,176,106,.3);
}
.score-table td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #f0e9d8;
  font-weight: 700;
}
.score-table td:first-child { text-align: left; }
.score-table .row-us td:first-child { color: var(--team-us); }
.score-table .row-them td:first-child { color: var(--team-them); }
.score-table .plus { color: var(--ok); }
.score-table .minus { color: var(--danger); }
.score-table .sub { display: block; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.5); }

/* ビッド */
.modal-bid { width: min(460px, 100%); }
.bid-timer {
  align-self: center;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.3);
  color: rgba(240,233,216,.85);
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.35);
}
.bid-timer.urgent { background: linear-gradient(180deg, #e0405c, #9d1830); color: #fff; }
.bid-sub { font-size: 13px; color: rgba(240,233,216,.85); line-height: 1.55; }
/* ビッド中に見せる自分の手札。
   ⚠️ ここは「手札を見て宣言を決める」ための表示。縮小して全部を詰め込むと
      絵柄が読めず、決める材料にならない。1段のまま大きく出して、はみ出す分は
      横スワイプで送る（ネイティブのスクロールに任せる）。 */
.bid-hand-wrap {
  position: relative;
  margin: 0 -4px;
}
/* 両端のぼかし = 「まだ続きがある」の合図。13枚は必ずはみ出すので常時出す */
.bid-hand-wrap::before,
.bid-hand-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 22px;
  pointer-events: none;
  z-index: 2;
}
.bid-hand-wrap::before { left: 0;  background: linear-gradient(90deg, #143b2c, rgba(20,59,44,0)); }
.bid-hand-wrap::after  { right: 0; background: linear-gradient(270deg, #143b2c, rgba(20,59,44,0)); }

.bid-hand {
  display: flex;
  flex-wrap: nowrap;
  padding: 2px 18px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  /* body の touch-action:manipulation に負けないよう、横パンを明示する */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) rgba(0,0,0,.3);
}
.bid-hand::-webkit-scrollbar { height: 6px; }
.bid-hand::-webkit-scrollbar-track { background: rgba(0,0,0,.3); border-radius: 999px; }
.bid-hand::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 999px; }
.bid-hand .card {
  --card-w: clamp(56px, 13vw, 76px);
  flex: 0 0 auto;
  box-shadow: -3px 3px 9px rgba(0,0,0,.5);
}
/* ⚠️ 隙間なく並べると4枚しか入らずスワイプ回数が増える。左上の数字とスートさえ
   見えれば札は判別できるので、42%だけ重ねて一度に見える枚数を増やす。
   手札はスート順に並んでいるので、重なっていても目で追える。 */
.bid-hand .card + .card { margin-left: calc(var(--card-w) * -0.42); }
/* 重なりに潜り込む右下の数字は消す（左上と二重に読ませない） */
.bid-hand .card .pc-corner.br { display: none; }

.bid-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bid-cell {
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 800;
  color: #f0e8d4;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 0 1.5px rgba(216,176,106,.28);
}
.bid-cell.sel {
  background: linear-gradient(180deg, #f7e2ae, var(--brass));
  color: #2a1c07;
  box-shadow: 0 0 14px rgba(216,176,106,.7);
}
.bid-cell.suggest { box-shadow: inset 0 0 0 2px rgba(75,189,122,.75); }
.bid-nil-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bid-nil-note { font-size: 11.5px; color: rgba(255,255,255,.6); }
.bid-hint { font-size: 12px; color: rgba(255,255,255,.62); min-height: 16px; line-height: 1.5; }

/* ビッドのセルは「数字 + その宣言を達成したときの得点」の2行 */
.bid-cell .bc-n { display: block; font-size: 16px; line-height: 1.05; }
.bid-cell .bc-pt {
  display: block;
  font-size: 10px;
  font-weight: 700;
  opacity: .62;
  margin-top: 1px;
}
.bid-cell.sel .bc-pt { opacity: .85; }

.bid-payout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  min-height: 20px;
}
.bid-payout .bp-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bid-payout .bp-label { font-size: 11.5px; color: rgba(255,255,255,.6); }
.bid-payout .bp-made { font-size: 14px; font-weight: 800; color: var(--ok); }
.bid-payout .bp-set { font-size: 14px; font-weight: 800; color: var(--danger); }
.bid-payout .bp-note { font-size: 11.5px; color: rgba(255,255,255,.72); }

/* ルールの図。実際のカードを並べて、フォロー・切り札・ブレイクを目で見せる */
.rules-figs { display: flex; flex-direction: column; gap: 12px; }
.rules-figs h3 { color: var(--brass); font-size: 15px; margin: 4px 0 0; }
.rfig {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(0,0,0,.2);
  border-radius: 12px;
  padding: 10px 12px;
}
.rfig-cards {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-bottom: 8px;   /* カード下の印(▶ ○ × ★)の逃げ */
}
.rfig-arrow { color: rgba(255,255,255,.45); font-size: 15px; font-weight: 800; }
.rfig-card { position: relative; }
.rfig-card .card { --card-w: clamp(38px, 9vw, 54px); }
/* 何を意味する札かを、絵の上に重ねた印で示す */
.rfig-card.lead::after, .rfig-card.win::after,
.rfig-card.ok::after, .rfig-card.no::after {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.rfig-card.lead::after { content: "▶"; background: rgba(255,255,255,.85); color: #22262e; }
.rfig-card.win::after  { content: "★"; background: var(--brass); color: #2a1c07; }
.rfig-card.ok::after   { content: "○"; background: var(--ok); color: #06240f; }
.rfig-card.no::after   { content: "×"; background: var(--danger); color: #fff; }
.rfig-card.no .card { filter: grayscale(.55) brightness(.8); }
.rfig-card.win .card { box-shadow: 0 0 0 3px var(--brass), 0 6px 14px rgba(0,0,0,.5); }
.rfig-cap { flex: 1 1 190px; font-size: 12.5px; line-height: 1.6; color: #ece5d4; }
.rfig-modes { margin: 2px 0 0 18px; font-size: 13px; line-height: 1.7; color: #ece5d4; }
.rfig-modes .k { color: var(--brass); font-weight: 700; }

.rules-body { font-size: 13.5px; line-height: 1.75; color: #ece5d4; }
.rules-body h3 { color: var(--brass); font-size: 15px; margin: 14px 0 4px; }
.rules-body ul { margin: 4px 0 4px 20px; }
.rules-body li { margin: 3px 0; }
.rules-body .k { color: var(--brass); font-weight: 700; }

/* =============== モバイル =============== */

@media (max-width: 560px) {
  .setup-box { padding: 12px 12px; }
  .seat-row { padding: 6px 7px; gap: 6px; flex-wrap: wrap; }
  .seat-row .seat-who { font-size: 13px; }
  .seg-btn { font-size: 11px; padding: 4px 7px; }
  .offer-bar { font-size: 12px; padding: 6px 10px; }
  .game-header { padding: 6px 8px; gap: 8px; }
  .game-header .brand { font-size: 14px; letter-spacing: .1em; }
  #hud-info { font-size: 11px; }
  .btn-small { font-size: 11.5px; padding: 6px 10px; }
  /* ヘッダーのボタンは「残り 60」と同じ大きさの丸い小札に。⚠️ 3 つ目（通話に参加）が入ると幅が足りず、
     縦に 1 文字ずつ折り返して巨大に見えた（オーナー報告 2026-09-05）→ 折り返し禁止・縮まない */
  .game-header .menu { gap: 4px; flex: 0 0 auto; }
  .game-header .menu .btn-small { font-size: 11px; font-weight: 800; padding: 2px 8px; line-height: 1.5; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
  #scorebar { padding: 4px 6px 5px; gap: 4px; }
  .sb-team { padding: 4px 7px; }
  .sb-team .sb-score { font-size: 17px; }
  .modal { padding: 16px 14px; }
  .bid-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .bid-cell { padding: 7px 0; }
  .bid-cell .bc-n { font-size: 14px; }
  .bid-cell .bc-pt { font-size: 9px; }
  .hud-timer { font-size: 11px; padding: 2px 7px; }
  .rfig { gap: 10px; padding: 8px 9px; }
  .rfig-cap { font-size: 11.5px; flex-basis: 150px; }
}
/* ⚠️ 本番のゲームフレームは 760×570。ビッドの窓は「手札を見て決める」ために
   縦を使うので、そのままだと 25px はみ出して「この数で宣言」が隠れる（実測）。
   低い視口では札と余白を詰めて、必ず1画面に収める。 */
@media (max-height: 620px) {
  .modal-bid { padding: 13px 16px; gap: 9px; }
  .modal-bid .result-title { font-size: clamp(17px, 4vw, 22px); }
  .bid-timer { font-size: 11.5px; padding: 2px 10px; }
  .bid-sub { font-size: 12px; line-height: 1.4; }
  .bid-hand .card { --card-w: clamp(50px, 11vw, 66px); }
  .bid-hand { padding: 2px 16px 5px; }
  .bid-cell { padding: 6px 0; }
  .bid-cell .bc-n { font-size: 15px; }
  .bid-cell .bc-pt { font-size: 9.5px; }
  .bid-nil-row { gap: 8px; }
  .bid-hint { font-size: 11px; line-height: 1.45; }
  .bid-payout .bp-made, .bid-payout .bp-set { font-size: 13px; }
}

/* ⚠️ 本番のゲームフレームは 760×570（docs/game-page-spec.md の横型 4:3）。
   既定の余白のままだと「はじめる」ボタンがフレームの下に隠れ、スクロールできると
   気づかない人が最初の一歩で詰まる（実測）。低い視口では全体を詰める。 */
@media (max-height: 660px) {
  .title-inner { gap: 10px; padding: 8px 0; }
  .title-mark { margin-bottom: 0; }
  .title-mark svg { width: clamp(16px, 3vw, 24px); }
  .title-logo { font-size: clamp(26px, 5.6vw, 46px); }
  .title-sub { font-size: clamp(9px, 2vw, 11px); letter-spacing: .2em; }
  .lobby-status { font-size: 11.5px; min-height: 0; }
  .start-box { padding: 4px 8px; }
  .setup-box { padding: 9px 12px; gap: 7px; border-width: 5px; }
  .team-legend { font-size: 11px; gap: 10px; }
  .seat-row { padding: 4px 8px; }
  .seat-row .seat-team { height: 20px; }
  .seat-row .seat-who { font-size: 13px; }
  #panel-seats { gap: 5px; }
  .panel-opts { gap: 6px 14px; font-size: 12px; }
  .panel-hint { font-size: 11.5px; min-height: 0; }
  .btn { padding: 8px 22px; font-size: 14px; }
  .corner-bar { top: 6px; right: 8px; }
}

@media (max-height: 520px) {
  #scorebar { padding: 3px 8px; }
  .sb-team .sb-score { font-size: 16px; }
  #message-bar { padding: 3px 10px 5px; font-size: 12px; min-height: 18px; }
}