/* ============================================================
   オリジナルラビット・ナボコフ ― 見た目（T307・コーダ／★T308 アト／★T310 コーダ：題 2行・かけ金 5つ・暗い 札・マイナス）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 20本と そろえて ある（設計図 §9.5）。★仕上げは 🎨アト。
   ・トランプは ★社長 支給の 絵（../cards/）だけ（§9）。★札の 大きさは JS（fit）が 決める。
   ・★★ 光らせる ものは 1種類だけ ―― ★持ち上げた 札 1枚（§5.5 上限・追記②）。
     ★差が 2 の 札・親の ときの「安全な 札」は ★1枚も 光らせない。★:hover でも 光らせない。

   ★★ 並べ方は 2つだけ ★★
     ・たて置き … 上から 帯／ロボット／場／ハッピー／あなた／手札／ボタン
     ・横置き　 … 左に ロボット・場、右に あなた・手札・ボタン、下に ハッピー
     ★ 分ける 線は **よこ÷たて ≧ 5/4 ★かつ★ たけ ≦ 500px**。★名前は JS の `WIDE_MQ`（WIDE_H）と ここ（--wide）で、
       ★見張り（verify ⑭・㉕）が 同じか 数える（★追記⑥ 決まり2）。
       ★ 12画面の 比：たて 0.38〜0.71 ／ 横 1.78〜2.16 ―― ★1.25 は どれも またがない【計算】。
     ★★ T317 アト（★社長：「★大画面でも たて並びに」）：★横置きは ★たけが 低い 画面 だけ。
       ★ ★前は 比だけ ＝ ★パソコン（1280×800・1918×948 など）も 横置きに なり、★右の 上が 空き・★場が たてに 間延び していた。
       ★ ★500px の 線が またぐ 画面：★横向きの スマホの たけは 272・320・375・375・390・414・428 ＝ ★全部 500 以下（★横置きの まま）。
         ★ ★たて向き 5つ（454〜844）は ★比で もともと たて置き。★★12画面＋底は 1つも 線を またがない。
         ★ ★またぐのは ★比 5/4 以上で たけ 501px 以上の 画面 だけ（★パソコン・タブレットの 横 ＝ ★たて置きに なる）。
         ★ ★いちばん 近い 428（★926×428）とは 72px 離して いる。
       ★ ★たて置きの 器は ★たけ 912px まで（★社長の 画像2 ＝ 1109×912 くらい）・★上下 まん中（.app の max-height）。
         ★ ★912 より 高い 画面は ★12画面に 無い（★いちばん 高い 844）。
     ★★ たての 線は ★この 2本 ＋ ★568×272 の SHORT_MQ（300px）だけ。
   ============================================================ */

:root {
  --ink:#463c52;
  --ink-soft:#6f6280;
  --pink:#FF8CB8; --pink-deep:#E94F8A; --pink-dark:#C43A73; --pink-soft:#FFE3EF;
  --white:#ffffff; --cream:#fff9ea;
  --gold:#F1A426; --gold-soft:#FFE690;
  --sky-1:#BDE9F7; --sky-2:#E6F7FC; --ground:#FFF6E4;
  --felt:#D8F2E2; --felt-edge:#9ED8B4;
  --font-main:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","M PLUS Rounded 1c","Rounded Mplus 1c","BIZ UDPGothic","Yu Gothic UI","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;

  /* ★ 札の 大きさ（★JS の fit() が 入れる。★ここは 最初の 1こまの 仮の 値） */
  --hw:56px;   /* 手札 1枚の はば */
  --tw:60px;   /* 場の 札 1枚の はば */
  --pw:30px;   /* 山・捨て札の はば */
  --rw:22px;   /* ロボットの 手札（裏）の はば */
  --hgap:5px;
  --wide:0;
}
@media (min-aspect-ratio: 5/4) and (max-height: 500px) { :root { --wide:1; } }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main);
  background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 42%,var(--ground) 42%) fixed;
  overflow-x:hidden;                     /* ★ viewport へ 伝わる 決まり ―― body 自身は visible のまま（sticky は 効く） */
  overscroll-behavior-y:none;
  -webkit-touch-callout:none;
}
button, select { font-family:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* 空の 雲（★うしろがわ・さわれない） */
.sky { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.cloud { position:absolute; background:#fff; border-radius:999px; opacity:.75; }
.cloud::before, .cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.c1 { width:90px; height:26px; top:70px; left:6%; }
.c1::before { width:40px; height:40px; top:-20px; left:14px; }
.c1::after  { width:30px; height:30px; top:-13px; left:46px; }
.c2 { width:70px; height:22px; top:130px; right:8%; }
.c2::before { width:32px; height:32px; top:-16px; left:12px; }
.c2::after  { width:24px; height:24px; top:-10px; left:36px; }
.c3 { width:60px; height:18px; top:30px; right:34%; opacity:.55; }
.c3::before { width:26px; height:26px; top:-13px; left:10px; }

/* ============================================================
   ★ 器（格子）。★高さは 画面 ぴったり。★足りない 画面では ★ページが のびて 帯が くっつく（sticky）
   ⚠️★★ ここにも 親にも overflow を 書かない こと（★七並べ T285 の わな・verify ⑩）。
   ============================================================ */
.app {
  display:grid; gap:6px;
  width:100%; max-width:560px; margin:0 auto;
  height:100vh; height:100svh; min-height:0;
  padding:4px 6px 6px;
  grid-template-columns:minmax(0,1fr);
  /* ★★ T317 アト ―― ★大きな 画面で 場が 間延び しない（★社長の 画像2 くらいで 止める）・★上下も まん中 ★★
     ★ 912px より 高い 画面 だけに 効く（★12画面＋底は ★いちばん 高い 844 ＝ ★0px 変わらない）。
     ★ 見張り verify ㉕ が「★この 高さ・★まん中・★JS の APP_HMAX と 同じ 数」を 数える。 */
  max-height:912px;
  margin-top:max(0px, calc((100vh - 912px) / 2)); margin-top:max(0px, calc((100svh - 912px) / 2));
}
.app.is-title {
  grid-template-areas:"top" "title" "happy";
  grid-template-rows:auto minmax(0,1fr) auto;
}
.app.is-play {
  grid-template-areas:"top" "robot" "table" "happy" "me" "hand" "action";
  grid-template-rows:auto auto minmax(0,var(--tf,1fr)) auto auto minmax(0,var(--hf,1fr)) auto;
}
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .app { max-width:1000px; padding:4px 10px 6px; column-gap:12px; }
  .app.is-title {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "title" "happy";
  }
  .app.is-play {
    grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
    /* ★ ハッピーは 左の 下（★右は 手札と ボタン）。★右の たけを 手札に 回す ため（★568×272 で 手札 32px → 54px） */
    grid-template-areas:
      "top    top"
      "robot  me"
      "table  hand"
      "happy  action";
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
}
.play-screen { display:contents; }
.topbar       { grid-area:top; }
.title-screen { grid-area:title; }
.robot-row    { grid-area:robot; }
.table-area   { grid-area:table; }
.log-row      { grid-area:happy; }
.me-row       { grid-area:me; }
.hand-area    { grid-area:hand; }
.action-row   { grid-area:action; }

/* ── 上の帯 ─────────────────────────────────────
   ★ sticky（★20本と 同じ）。★うしろに 空と 同じ 色の ふたを 敷く（★ブラックジャック T279 の 型）。 */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:6px; min-height:44px;
}
.topbar::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:-4px; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 42vh,var(--ground) 42vh) fixed;
}
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 12px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:999px;
  color:var(--pink-dark); font-weight:900; font-size:13px; text-decoration:none; white-space:nowrap;
}
.back:hover { border-color:var(--pink); }
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; }
.brand-cat { width:30px; height:23px; flex:0 0 auto; }
.brand span { font-weight:900; font-size:16px; color:#3f5a70; white-space:nowrap; letter-spacing:.01em; }
.topbar-pad { flex:0 0 auto; width:96px; }
/* ★★ T310 ―― ★題「オリジナルラビット・ナボコフ」（★14文字）★★
   ★ ふだんは 1行。★帯に 入らない ときだけ JS（fitBrand）が .is-2line を 付ける ＝ ★上に 小さく「オリジナル」。
   ★ それでも 入らない ときは .is-small（★字を 小さく）。★点々（…）には しない。★仕上げは アト。 */
.brand.is-2line #brandName { display:inline-flex; flex-direction:column; align-items:center; line-height:1.08; }
.brand.is-2line .bn-sub { font-size:10.5px; letter-spacing:.14em; color:var(--pink-dark); }
.brand.is-2line .bn-main { line-height:1.12; }
.brand.is-small .bn-main { font-size:13px; }

/* ★★ 追記⑩ の 型 ―「↻ やめる」（★うすみどり・44×44・SVG 16px・position:relative＋z-index:2）★★ */
.quit-btn {
  position:relative; z-index:2;
  flex:0 0 auto; margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  background:#B7EDC9; border:3px solid #2F7D4C; border-radius:999px;
  color:#22633F; font-size:11.5px; font-weight:900; line-height:1;
  white-space:nowrap;
}
.quit-btn .quit-icon { margin-right:4px; }
.quit-btn svg.quit-icon { width:16px; height:16px; flex:0 0 auto; pointer-events:none; }
.quit-btn .qi-arc { fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; }
.quit-btn .qi-tip { fill:currentColor; stroke:none; }
@media (max-width:374px) {
  .quit-btn { font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon { display:none; }
}
@media (max-width:520px) {
  .back span { display:none; }
  .back { padding:0 11px; }
  .brand span { font-size:15px; }
  .topbar-pad { width:44px; }
}
@media (max-width:360px) {
  .brand-cat { width:24px; height:18px; }
  .brand span { font-size:14px; }
}

/* ── はじめの 画面 ─────────────────────────────── */
.title-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:0; padding:16px 14px 12px;
  background:var(--white); border:5px solid var(--pink-soft); border-radius:26px;
  text-align:center; box-shadow:0 7px 0 rgba(196,58,115,.10);
}
.title-lead { margin:0; font-size:clamp(15px,4.2vw,21px); font-weight:900; color:#5a4a63; line-height:1.6; word-break:keep-all; }
/* ★★ T308 アト ―― ★たて置きの はじめの 画面は ★まん中に 寄せる（★20本の「はじめの 画面」と 同じ 形）★★
   ★ 前は 非公式の 文の margin-top:auto だけ ＝ ★上に 全部 寄って ★まん中が 大きな 空き（390×844 で 約390px）。
   ★ 上にも auto を 1つ ＝ ★空きを 上と 下で 半分こ（★非公式の 文は 一番 下の まま・★1文字も 変えない）。 */
.title-screen > .title-lead { margin-top:auto; }
.title-lead b { color:var(--pink-dark); }
.level-pick {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  max-width:100%; margin:0; padding:6px 10px;
  background:var(--cream); border:3px solid var(--gold-soft); border-radius:20px;
}
.level-pick-name { font-size:13px; font-weight:900; color:#7a5205; white-space:nowrap; }
.level-select {
  max-width:100%; min-height:44px; padding:5px 10px;
  background:var(--white); border:3px solid var(--gold); border-radius:999px;
  color:var(--ink); font-size:15px; font-weight:900; cursor:pointer;
}
.level-select:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }
.start-button {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:230px; min-height:56px; padding:10px 24px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 6px 0 var(--pink-dark);
  font-size:20px; font-weight:900;
}
.start-button small { font-size:12px; font-weight:700; opacity:.92; }
.start-button:active { transform:translateY(3px); box-shadow:0 3px 0 var(--pink-dark); }
/* ★★ 非公式の 文（★小さく・でも 読める 11px ＝ 会社の 床）★★ */
.unofficial {
  margin:0; font-size:11px; font-weight:700; line-height:1.55; color:#6f6280;
  /* ★ T308 アト：★「原作 / 者」の ように 言葉の まん中で 折れない（★ハーツ・ページワンと 同じ 書き方）。
     ★ 効かない ブラウザでは 前と 同じ 折れ方に 戻るだけ（★字は 1文字も 変えない） */
  word-break:auto-phrase;
}
.title-screen .unofficial { margin-top:auto; padding-top:4px; max-width:34em; }
/* ★ 横置きの はじめの 画面は ★2列（★たてを 食わせない） */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .title-screen {
    display:grid; grid-template-columns:auto auto; align-content:center; justify-content:center;
    column-gap:26px; row-gap:6px; padding:6px 14px; border-width:3px;
  }
  .title-lead { grid-column:1; grid-row:1; font-size:15px; line-height:1.45; text-align:left; }
  .title-lead .nw { white-space:nowrap; }   /* ★「勝ち！」だけ 次の 行に 落ちるのを 止める（★568×272 の 写真で 見つけた） */
  .start-button { min-width:0; padding:10px 22px; }
  .level-pick { grid-column:1; grid-row:2; justify-self:start; padding:2px 8px; }
  .start-button { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .title-screen .unofficial { grid-column:1 / span 2; grid-row:3; margin:0 auto; max-width:none; justify-self:center; width:max-content; max-width:calc(100vw - 60px); }
}

/* ── ロボット・あなた の 行 ─────────────────────── */
.who-row {
  display:flex; align-items:center; gap:8px; min-height:26px;
  padding:0 10px; background:rgba(255,255,255,.82); border:3px solid var(--pink-soft); border-radius:16px;
}
.who-name { font-size:13px; font-weight:900; color:#5a4a63; white-space:nowrap; }
.coins { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; font-weight:900; color:#7a5205; }
.coins b { font-size:16px; }
.coins small { font-size:11px; }
.coin-ico { width:18px; height:18px; flex:0 0 auto; }
.coins.is-bump b { animation:numPop .45s ease-out; }
@keyframes numPop { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
.coins b { display:inline-block; }
.coins.is-minus b { color:var(--pink-dark); }   /* ★ T310：0枚より 少ない ときの 字の 色（★「−35」の 形だけ・★借金の 字は 出さない） */
.robot-hand { display:flex; align-items:center; margin-left:auto; padding:2px 0; }
.robot-hand img {
  width:var(--rw); aspect-ratio:280/424; height:auto; border-radius:3px; display:block;
  box-shadow:0 1px 2px rgba(60,40,60,.25);
}
.robot-hand img + img { margin-left:calc(var(--rw) * -0.45); }

/* ── 場（親の 札・子の 札・山・捨て札）──────────────── */
.table-area {
  position:relative;                     /* ★ T313 アト：コインの 山（.bet-pot）の 置き場の 基準 */
  min-height:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center;
  column-gap:8px; padding:6px 8px;
  background:var(--felt); border:3px solid var(--felt-edge); border-radius:20px;
}
.slot { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.slot-chip {
  display:inline-flex; align-items:center; justify-content:center; min-width:2.6em; height:20px; padding:0 8px;
  border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap;
  background:var(--white); color:#3f5a70; border:2px solid #cfe3ea;
}
.slot-chip.is-parent { background:#FFF1C9; color:#7a5205; border-color:#F1C95A; }
.slot-card {
  width:var(--tw); aspect-ratio:280/424; border-radius:calc(var(--tw) * .07);
  border:2px dashed rgba(63,90,112,.28);
}
.slot-card.has-card { border:none; }
.slot-card img { width:100%; height:100%; display:block; border-radius:inherit; box-shadow:0 3px 6px rgba(40,60,50,.25); }
@keyframes flipIn { 0% { transform:scaleX(1); } 50% { transform:scaleX(0); } 100% { transform:scaleX(1); } }
.slot-card.is-flip img { animation:flipIn .3s ease-in-out; }
@keyframes dropIn { 0% { transform:translateY(-14px) scale(.9); opacity:.2; } 100% { transform:none; opacity:1; } }
.slot-card.is-drop img { animation:dropIn .22s ease-out; }

.mid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; }
.mid-result {
  margin:0; min-height:2.6em; min-width:4.4em; text-align:center;
  font-size:14px; font-weight:900; line-height:1.3; color:#3f5a70; white-space:nowrap;
}
.mid-result .mr-big { display:block; font-size:18px; }
.mid-result .mr-plus { color:#2F7D4C; }
.mid-result .mr-minus { color:var(--pink-dark); }
.mid-result .is-long { font-size:12px; letter-spacing:-.02em; }   /* ★ T310：4けた 以上（★+10,000枚 まで）は 小さく ―― ★場の まん中を 太らせない */
/* ★★ T308 アト ―― ★あなたが もらえた ときの「ぽん！」★★
   ★ 出した **あと** だけ（★追記②：出す 前には 何も 光らない ―― ★is-win は 結果の 描きでしか 付かない）。
   ★ 札には 1pxも 触れない（★手札の 強調は「持ち上げ」1種類の まま）。★字も 変えない（★色と 形と 動きだけ）。
   ★★ はば：★字の 大きさ・字は 前と 同じ。★ピンクの 丸は ★うしろの 飾り（::before）なので
      ★★場の まん中の はばを 1pxも 広げない（★1回目は 横の すき間を padding で 付けて、★場の 札が 押し出された【実測 13画面】）。
      ★ 丸が 字の 外へ 出るのは 左右 5px だけ ＝ ★場の 列の すき間（8px）の 中。
      ★（★追記③：まれな 大当たりの ために ふだんの 札を 小さく しない） */
.mid-result.is-win .mr-big {
  position:relative; z-index:0; width:max-content; margin:0 auto; color:#fff;
  animation:winPop .5s cubic-bezier(.2,1.5,.45,1) both;
}
.mid-result.is-win .mr-big::before {
  content:''; position:absolute; z-index:-1; top:0; bottom:0; left:-5px; right:-5px;
  border-radius:999px; background:var(--pink-deep); box-shadow:0 2px 0 var(--pink-dark);
}
.mid-result.is-big .mr-big { color:#7a3e00; letter-spacing:-.03em; }   /* ★「100倍！」は 字の まが 少し つまる（★金の 丸が 札に 2px かかった 4画面【実測】） */
.mid-result.is-big .mr-big::before { background:linear-gradient(180deg,#FFE27A 0,#F6B532 100%); box-shadow:0 2px 0 #C98414; left:-4px; right:-4px; }   /* ★ T308-2：金の 丸だけ 左右 4px（★100枚×100倍 の 568×272 で「子・100枚」の 札に 0.7px かかった【実測】） */
@keyframes winPop { 0% { transform:scale(.4); opacity:0; } 55% { transform:scale(1.22); opacity:1; } 100% { transform:scale(1); } }
/* ★ 大当たり（★10倍 以上を あなたが もらえた とき）だけ ★場の ふちが 金色に ぱっ と 光る。
   ★ ふちの 色と 外の 光だけ ＝ ★場の 中の 物は 1pxも 動かない・★札には 何も 乗らない。
   ★（★キラキラの 飾りも 試したが ★8画面で 場の 札・「親」「子」の 札に かかった【実測】→ ★やめた。★色を 1つ 減らした ほうが 締まる） */
.table-area.is-big { border-color:#F6B532; box-shadow:0 0 0 3px rgba(246,181,50,.30); animation:feltGlow 1.1s ease-out both; }
@keyframes feltGlow {
  0% { border-color:#FFD766; box-shadow:0 0 0 0 rgba(246,181,50,0); }
  25% { border-color:#F6B532; box-shadow:0 0 0 8px rgba(246,181,50,.45); }
  100% { border-color:#F6B532; box-shadow:0 0 0 3px rgba(246,181,50,.30); }
}
/* ★★ T313 アト ―― かけ金の コインの 山（★社長の 絵：金の コインが たてに 積まれた 山 ＋ 白い 太字の 数字）★★
   ★ ポーカーの 場の コイン（T56・.chips）と 同じ 家族：★よこから 見た 金の だ円・★山を よこに 並べる・
     ★数字は いつも 本当の 枚数・★ふえた 分だけ 上から ぽとっと 落ちる。
   ★ ちがう ところ（★社長の 絵と お決めを 優先）：★絵の コインは ★かけ金 ÷ 10 の 切り上げ（★最大 10枚）・★左が 高い 階段 [4・3・2・1]・
     ★数字は 山の となりの 白い 太字（★こげ茶の ふち）。★コインは ポーカーより 少し 厚く（★1枚ずつ 見える ように）。
   ★ 置き場所（★社長：手前に 私・奥に ロボット）：★ロボットの かけ金は ★山札・捨て札の 上（★まん中の 字の 箱）・★あなたの かけ金は ★山札・捨て札の 下。
     ★ どちらも ★2枚の 札の あいだ ＝ ★場の 札を 1pxも 小さく しない（★追記③）。★下に 入らない 320×454 は 上に 置く（★568×272 は 山札を 上へ 寄せて 下に 置く）。
   ★ 大きさ・場所・山の 間かくは JS（placePot）が ★いまの 実寸で 入れる（★たての 線は 引かない ―― 追記⑥ 決まり2）。
   ★ 光らない・点滅しない（★強調は「持ち上げた 札」1種類の まま ―― §5.5）。★さわれない（pointer-events:none）。 */
.bet-pot {
  position:absolute; z-index:1; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center;
  --pc-w:16px; --pc-pitch:14px;
  --pc-h:calc(var(--pc-w) * .44);        /* よこから 見た コイン ＝ ひらたい だ円（★ポーカーと 同じ 比） */
  --pc-step:calc(var(--pc-w) * .28);     /* 1枚 重ねる ごとに 上へ（★ポーカーの .2 より 厚く ―― ★山が 4枚までと 低い ので） */
}
.pot-pile {
  position:relative; flex:0 0 auto; display:flex; align-items:flex-end;
  height:calc(var(--pc-step) * 3 + var(--pc-h));        /* ★いつも 4枚ぶんの 高さ（★いちばん 高い 山）＝ 数字の 場所が 動かない */
}
/* ★ 山の 下の うすい かげ（★フェルトに 置いた 感じ。★山の 箱の 中だけ） */
.pot-pile::before {
  content:''; position:absolute; z-index:-1; left:6%; right:6%; bottom:calc(var(--pc-h) * -.12); height:calc(var(--pc-h) * .8);
  border-radius:50%; background:rgba(40,90,60,.22); filter:blur(1px);
}
.pot-col {
  position:relative; flex:0 0 auto; width:var(--pc-w); height:100%;
  margin-left:calc(var(--pc-pitch) - var(--pc-w));    /* ★せまい ときは 左の 山に 少し 重ねる（★ポーカーと 同じ 手） */
}
.pot-col:first-child { margin-left:0; }
.pc {
  position:absolute; left:0; right:0; height:var(--pc-h); border-radius:50%;
  background:radial-gradient(ellipse at 50% 32%, #FFF3B0 0, #FFD766 34%, #F1A426 72%, #C9840F 100%);
  /* ★ ふち：下に こい 線・左に うすい 線 ＝ ★重なっても「1枚ずつ」が 見わけられる（★ポーカーと 同じ 考え） */
  box-shadow:0 1px 0 #A86B0A, -1px 0 0 rgba(150,98,12,.45), inset 0 0 0 1px rgba(255,255,255,.45);
}
/* ★ 数字（★社長の 絵：白い 太字・★山の となり）。★うすい 緑の 上でも 読める ように ★こげ茶の ふち ＋ 下に かげ */
.pot-n {
  position:relative; z-index:1; flex:0 0 auto;
  font-size:15px; font-weight:900; line-height:1; color:#fff; letter-spacing:-.02em; white-space:nowrap;
  text-shadow:
    1.5px 0 0 #7a4a05, -1.5px 0 0 #7a4a05, 0 1.5px 0 #7a4a05, 0 -1.5px 0 #7a4a05,
    1px 1px 0 #7a4a05, -1px 1px 0 #7a4a05, 1px -1px 0 #7a4a05, -1px -1px 0 #7a4a05,
    0 3px 0 rgba(90,55,5,.55);
}
/* ★ 山が 置けない ほど せまい とき（★13画面では 出ない【実測】）は ★数字だけ（★数字は 必ず 出す） */
.bet-pot.is-numonly .pot-pile { display:none; }
/* ★ ふえた 分だけ 上から ぽとっ（★「ぽん！」と 同じ はねる 曲線） */
@keyframes potDrop { 0% { opacity:0; transform:translateY(calc(var(--pc-w) * -.7)); } 100% { opacity:1; transform:none; } }
.pc.is-new { animation:potDrop .24s cubic-bezier(.2,1.5,.45,1) both; }
/* ★ 結果 ―― ★もらう 人の 方へ すべって 消える（★社長：手前に 私・奥に ロボット ＝ ★下 ＝ あなた・★上 ＝ ロボット）。
   ★ 止まった 姿は ★見えない（visibility:hidden）＝ ★写真（animation:none）でも ★まん中の 字に かからない。 */
.bet-pot.is-go-me, .bet-pot.is-go-robot { visibility:hidden; animation:potGo .46s cubic-bezier(.25,.8,.35,1); }
@keyframes potGo {
  0%   { visibility:visible; opacity:1; transform:none; }
  70%  { visibility:visible; opacity:.9; transform:translateY(calc(var(--go, 0px) * .85)) scale(.8); }
  100% { visibility:visible; opacity:0; transform:translateY(var(--go, 0px)) scale(.6); }
}
/* ★ まん中の 字は ★コインが 出て 行く のを 待って（★0.14秒）出る ＝ ★すべる 山が 字に 重ならない
   ★（★1回目は 字と 同時で ★「差 1」の 上を 山が 通った【写真 390×844・0.12秒】）。★字は 1文字も 変えない（★T312 の midTop は そのまま） */
@keyframes midIn { 0% { opacity:0; } 100% { opacity:1; } }
.mid-result > span { animation:midIn .16s ease-out .14s both; }
.mid-result.is-win .mr-big { animation-delay:.14s; }
@media (prefers-reduced-motion:reduce) { .pc.is-new, .bet-pot.is-go-me, .bet-pot.is-go-robot { animation:none; } }

/* ★★ T313 アト ―― ★568×272（★横・いちばん 低い 画面）だけ ★山札・捨て札を 上へ 寄せて ★その 下に「あなたの かけ金」の 置き場を 作る ★★
   ★ 社長：「横に した とき 568×272、山札と 捨て札を もう少し 上に して、下に スペース 作って 置ける ように して ほしい」
   ★ やる こと：★まん中の 列を 上へ 寄せる（align-self:start）・★場の 内側の 上ばり 6px の うち 2px を 使う・★まん中の 字の 箱と 山札の すき間 6 → 3px。
     ★ 山札・捨て札が ★11.3px 上がり ★下の 空きが 12.0 → 23.3px【実測】。★場の 札・手札・かけ金ボタンは 1px も 変えない（★寄せる だけ）。
   ★★ 新しい たての 線（★追記⑥ 決まり2）：★max-height:300px（★横置き かつ）。
     ★ 11画面＋底の たて：568・480・454・812・844・320・375・414・375・390・428・272（＋パソコン 800）。
     ★ ★300 より 下は ★272 だけ ＝ ★568×272 1画面だけに 効く。★いちばん 近い 320（568×320）とは 20px 離れて いる。
     ★ ★JS にも 同じ 字（★SHORT_MQ）。★verify ㉔ が CSS と JS が そろって いるか 数える。 */
@media (min-aspect-ratio: 5/4) and (max-height: 300px) {
  .mid { align-self:start; margin-top:-2px; row-gap:3px; }
}
.piles { display:flex; gap:6px; align-items:flex-start; }
.pile { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; }
.pile-img { width:var(--pw); aspect-ratio:280/424; height:auto; display:block; border-radius:3px; box-shadow:0 1px 2px rgba(40,60,50,.25); }
.pile-img.is-empty { visibility:hidden; }
.pile-n {
  position:absolute; top:calc(var(--pw) * 1.514 / 2 - 9px); left:50%; transform:translateX(-50%);
  min-width:22px; padding:0 4px; border-radius:999px; background:rgba(255,255,255,.92);
  font-size:11px; font-weight:900; color:#3f5a70; text-align:center; line-height:18px;
}
.pile-name { font-size:11px; font-weight:900; color:#4f6f60; white-space:nowrap; }

/* ── 手札 ────────────────────────────────────
   ★ 札は ボタン。★押すと 持ち上がる（★1枚だけ）。★もう一度 押すと 下りる。
   ★★ 持ち上げ ＝ この 画面で ただ1つの 強調。★それ 以外の 札の 見た目は 1つも 変えない。 */
.hand-area { min-height:0; display:flex; align-items:flex-end; justify-content:center; }
.hand {
  display:flex; align-items:flex-end; justify-content:center; gap:var(--hgap);
  padding-top:calc(var(--hw) * 0.2);
}
.hcard {
  position:relative; flex:0 0 auto; padding:0; margin:0; border:0; background:none;
  width:var(--hw); aspect-ratio:280/424; border-radius:calc(var(--hw) * .07);
  transition:transform .12s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.hcard img { width:100%; height:100%; display:block; border-radius:inherit; box-shadow:0 3px 6px rgba(60,40,60,.28); pointer-events:none; }
.hcard:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }
.hcard.is-lift { transform:translateY(calc(var(--hw) * -0.18)); }
.hcard.is-lift img { box-shadow:0 0 0 3px var(--pink-deep), 0 8px 12px rgba(60,40,60,.30); }
.hcard:disabled { cursor:default; }
@keyframes drawIn { 0% { transform:translateY(12px); opacity:0; } 100% { transform:none; opacity:1; } }
.hcard.is-new img { animation:drawIn .22s ease-out; }
/* ★★ T310 ―― ★K の 決まりで 出せない 札を 暗くする（★ハーツの 型 ＝ 引き算。★光らせない）★★
   ★ 付くのは ★あなたが 子で ★親が K で ★手札に J・Q・K・A が ある ときの ★それ 以外の 札 だけ（★verify ㉑）。
   ★ 押すと ★ぷるっと ゆれて（is-no）★ハッピーが わけを 1行。 */
.hcard.is-dim img { filter:brightness(.62) saturate(.55); }
@keyframes cardNo { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
.hcard.is-no { animation:cardNo .28s ease-in-out; }

/* ── ボタンの 行（★子の ときの かける／親の ふせる／子の 勝負）── */
.action-row { min-height:48px; display:flex; align-items:center; justify-content:center; }
.bet-row { display:flex; gap:8px; width:100%; max-width:420px; }
.bet-btn, .act-btn {
  flex:1 1 0; min-height:48px; min-width:44px; padding:4px 8px; border:none; border-radius:999px;
  font-size:17px; font-weight:900; line-height:1.1; white-space:nowrap;
}
.bet-btn { background:#FFD766; color:#6b4a05; box-shadow:0 5px 0 #D8A52C; }
.bet-btn small { font-size:12px; margin-left:1px; }
.bet-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #D8A52C; }
.bet-btn:disabled { background:#f0ead8; color:#b3a88c; box-shadow:0 5px 0 #ddd3b8; cursor:default; }
.act-btn { flex:0 1 auto; min-width:220px; background:var(--pink-deep); color:#fff; box-shadow:0 5px 0 var(--pink-dark); }
.act-btn:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }
.act-btn:disabled { background:#f3d3e0; color:#fff; box-shadow:0 5px 0 #e7b7ca; cursor:default; }
/* ★★ T310 ―― かけ金の 5つ [−10][−1][かけ金：10枚][+1][+10]（★社長の 形）★★
   ★ ±の 4つは 44px 四方 以上・★まん中（決定）が のこりの はば。★押せない ±は 灰色。
   ★ 1行に 入らない ときだけ JS（fitBet）が .is-2row ＝ ★まん中が 上の 段・±4つが 下の 段。★仕上げは アト。 */
.bet-row { gap:5px; max-width:440px; justify-content:center; }
.bet-step {
  flex:0 0 auto; min-width:44px; padding:0 5px; font-size:15px;
  background:var(--white); color:#6b4a05; border:3px solid #F1C95A; box-shadow:0 4px 0 #E3C27A;
}
.bet-step:active { box-shadow:0 1px 0 #E3C27A; }
.bet-step:disabled { background:#f0ead8; color:#b3a88c; border-color:#e6dcc0; box-shadow:0 4px 0 #ddd3b8; }
.bet-go { flex:1 1 auto; min-width:0; padding:4px 6px; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.bet-go .bg-n { white-space:nowrap; }
.bet-go b { font-size:19px; margin:0 1px; }
.bet-row.is-tight .bet-go { flex-direction:column; line-height:1.02; padding:2px 4px; }
.bet-row.is-tight .bet-go .bg-l { font-size:11px; }
.bet-row.is-tight .bet-go b { font-size:18px; }
.bet-row.is-2row { flex-wrap:wrap; row-gap:8px; }
.bet-row.is-2row .bet-go { order:-1; flex:1 1 100%; }

/* ── ハッピー ＋ ふきだし ＋ 遊び方 ─────────────────── */
.log-row {
  position:relative; z-index:5;
  display:flex; align-items:center; gap:8px; min-height:52px;
  padding:3px 8px; background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
}
.happy-wrap { position:relative; flex:0 0 auto; width:44px; text-align:center; }
.happy-cat { width:44px; height:47px; display:block; overflow:visible; }
.happy-name {
  position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); margin:0;
  padding:0 5px; border-radius:999px; background:var(--white); border:2px solid var(--pink);
  font-size:9px; font-weight:900; color:var(--pink-dark); line-height:1.5; white-space:nowrap;
}
.cat-eyes { transform-box:fill-box; transform-origin:center; animation:blink 5s infinite; }
@keyframes blink { 0%, 92%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
.cat-tail { transform-box:fill-box; transform-origin:10% 90%; animation:wag 2.4s ease-in-out infinite; }
@keyframes wag { 0%, 100% { transform:rotate(0deg); } 50% { transform:rotate(-9deg); } }
.face-happy, .face-sad { display:none; }
.happy-wrap[data-mood="win"] .face-normal, .happy-wrap[data-mood="sad"] .face-normal { display:none; }
.happy-wrap[data-mood="win"] .face-happy { display:block; }
.happy-wrap[data-mood="sad"] .face-sad { display:block; }
@keyframes happyJump { 0%,100% { transform:translateY(0) rotate(0); } 30% { transform:translateY(-7px) rotate(-6deg); } 60% { transform:translateY(0) rotate(4deg); } }
.happy-wrap[data-mood="win"] .happy-cat { animation:happyJump .5s ease-in-out 2; }
.happy-bubble {
  flex:1 1 auto; margin:0; min-width:0;
  font-size:13.5px; font-weight:900; color:#5a4a63; line-height:1.4;
  word-break:keep-all; overflow-wrap:anywhere;   /* ★ T308 アト：★「勝 / ち！」を 止める（★神経衰弱・五目並べ・フリーセルと 同じ） */
}
/* ★ T308 アト：★横置きは ふきだしが せまく、keep-all だと「2 だ！ ジョーカーだけ…」が ★3行に なった（568×320・568×272【実測】）。
   ★ → ★横置きは 前の 折り方の まま（★コーダが 13画面で 2行までを 確かめた 形） */
/* ★★ T308-2 アト（★T310 の あと）：★横置きも keep-all に 戻し、★せまい 横置き（はば 740 以下）だけ 12.5px。
   ★ 前の 形（横は word-break:normal）は ★T310 の 言葉で「ボタ / ンで」「10 / 倍」と ★言葉の まん中で 折れた
     （★568×320・568×272 で 10か所・667×375 で 9か所【実測 t308_05】）。
   ★ keep-all だけだと flip2 が 568 で 3行 → ★12.5px で ★13画面とも 2行まで・★まん中 折れ 0【実測】。
   ★ 740 の 線：★736 までを 小さい 側に 入れる（★812 以上は 13.5px の まま 2行を 測った）。★たての 線では ない（追記⑥ 決まり2 の 外） */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) and (max-width: 740px) { .happy-bubble { font-size:12.5px; } }
.howto {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 12px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink-soft);
  color:var(--pink-dark); font-size:12.5px; font-weight:900; white-space:nowrap;
}
.howto:hover { border-color:var(--pink); }
/* ★ 帯の「？ 遊び方」は 横置きだけ／ハッピーの 行の「？」は たて置きだけ（★同時に 2つ 見せない） */
.howto-top { display:none; }
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .howto-top { display:inline-flex; }
  .log-row .howto { display:none; }
}
@media (max-width:374px) {
  .howto span { display:none; }
  .howto { padding:0; font-size:17px; }
  .happy-bubble { font-size:12.5px; }
}

/* ── 試合の おわり ─────────────────────────────── */
.result-wrap {
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:8px; background:rgba(70,60,82,.42);
}
.result-box {
  width:min(360px,100%); max-height:100%; overflow-y:auto; padding:12px 14px; text-align:center;
  background:var(--white); border:4px solid var(--pink-soft); border-radius:22px;
  box-shadow:0 6px 0 rgba(196,58,115,.16);
}
@keyframes resultIn { 0% { transform:scale(.86); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.result-wrap:not(.hidden) .result-box { animation:resultIn .22s ease-out; }
.result-title { margin:0 0 4px; font-size:22px; font-weight:900; color:var(--pink-dark); line-height:1.2; }
.result-title.is-quiet { color:#7f8fa0; }
.result-coins { margin:0 0 10px; display:flex; justify-content:center; gap:14px; font-size:14px; font-weight:900; color:#5a4a63; flex-wrap:wrap; }
.result-coins b { font-size:18px; color:#7a5205; }
.result-coins b.is-minus { color:var(--pink-dark); }   /* ★ T308-2 アト：遊ぶ 画面の .coins.is-minus と 同じ 色 */
.result-row { display:flex; gap:8px; }
.dialog-ok {
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto; min-height:48px; padding:6px 12px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 5px 0 var(--pink-dark);
  font-size:17px; font-weight:900; text-decoration:none; text-align:center; white-space:nowrap;
}
.dialog-ok:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }
.dialog-ok.alt {
  flex:0 0 auto; background:var(--white); color:var(--pink-dark);
  border:3px solid var(--pink-soft); box-shadow:0 4px 0 rgba(196,58,115,.10);
  font-size:13px; padding:6px 12px;
}
.result-level { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; }
.result-level span { font-size:12px; font-weight:900; color:#7a5205; white-space:nowrap; }
.result-level .level-select { font-size:14px; }
.result-box.is-locked .result-row, .result-box.is-locked .result-level { pointer-events:none; opacity:.4; }
@media (max-width:374px) {
  .dialog-ok { font-size:15px; }
  .dialog-ok.alt { font-size:12px; padding:6px 8px; }
}

/* ── 遊び方 ─────────────────────────────────────
   ★ × は position:sticky（★セブンブリッジ T267 の 型 ―― ★下へ 送っても 消えない）。
   ⚠️★ `top` は 0（★16px と 書くと 器の 上ばりと 足されて 32px 下がる・T267 の わな）。
   ★ `overflow:auto` が 効くのは showModal() の ときだけ（★T291）―― ★JS は 必ず showModal()。 */
dialog {
  width:min(440px,94vw); max-height:92vh; max-height:92svh; overflow:auto;
  padding:16px 18px 18px; border:none; border-radius:24px;
  background:var(--white); color:var(--ink); font-family:var(--font-main);
  box-shadow:0 12px 0 rgba(196,58,115,.16);
}
dialog::backdrop { background:rgba(70,60,82,.42); }
.close-dialog {
  position:sticky; top:0; z-index:2;   /* ★T366：あとから 塗られる 題の 帯（z-index:1）より 上に（★外すと ×が 帯の 下に もぐる・見張りの 丁）*/
  display:block; width:44px; height:44px; margin:0 0 -44px auto;
  transform:translate(8px,-8px);
  border:0; border-radius:50%;
  background:#f1f5f4; color:#7d8c99; font-size:18px; font-weight:900; cursor:pointer;
}
dialog h2 { margin:0 0 8px; font-size:20px; font-weight:900; color:var(--pink-dark); text-align:center; }

/* ★T366（2026-10-04・🎨アト）―― 題（h2）を「×の 帯」に しました
   ★ T267 の 型（× だけ sticky）は、★送ると ×の 丸が 右はしの 字に かかりました
     ★（★麻雀17歩 320px の 点の 表で「12,000」「親」・T364 F5／T365）。★5本 同じ 型で 同じ ことが 起きます。
   ★ 直し方：★題を sticky の 白い 帯に して ×の 下に 敷く。★中身は 帯の 下に もぐる ので、★×は 字に かからない。
     ★ 帯の たけ 52px ＝ 上 8px ＋ × 44px（★×の 場所・大きさは T267 の まま 1pxも 変えて いない）。
     ★ top は -16px（★器の 上ばり 16px ぶん。★sticky は 上ばりの 内がわが 基準 ―― T267 の わな）。
     ★ margin-top は -60px（★× の margin-bottom -44px と 重なって 1つに なる ―― ★-60 ＝ -(× 44 ＋ 上ばり 16)。
       ★ -16px と 書くと -44 に のまれて 帯が 16px 下から 始まり、★送り0 だけ 題と × が ずれる【★実測】）。
     ★ z-index：帯 1・× 2（★帯は あとから 塗られる ので、× に 2 が 無いと 帯の 下に もぐる）。
   ★ 代金：★送って いる あいだ、箱の 上 52px は 題で ふさがる（★568×272 で 読める たけ 約250→198px）。
     ★ 中身の はじまりは 前より 数px 下がる。★いちばん 上でも いちばん 下でも ★帯の 下に 残る 字は 0。
   ★ 見張り：verify の「あそびかたの × が 字に かからない（T366）」。 */
.close-dialog + h2 {
  position:sticky; top:-16px; z-index:1;
  box-sizing:border-box; min-height:52px; margin:-60px -18px 8px; padding:8px 60px 0 60px;
  line-height:44px; background:var(--white);
  box-shadow:0 3px 0 rgba(196,58,115,.10);
}
#helpDialog { scroll-padding-top:60px; }
.help-sec { margin:0 0 10px; }
.help-sec h3 { margin:0 0 4px; font-size:14px; font-weight:900; color:#3f5a70; }
.help-about { padding:8px 10px; border-radius:14px; background:#f4f1fa; }
.help-about .unofficial { font-size:12px; color:#5a4a63; }
.help-list { margin:0 0 10px; padding-left:1.3em; }
.help-list li { margin-bottom:6px; font-size:14px; font-weight:700; line-height:1.6; }
.help-list b, .help-special b { color:var(--pink-dark); }
.help-special { margin:0; padding-left:1.2em; }
.help-special li { margin-bottom:4px; font-size:13.5px; font-weight:700; line-height:1.55; }
.help-special .orig-tag { font-size:12px; font-weight:900; color:var(--pink-dark); white-space:nowrap; }   /* ★ T310：「（オリジナルルール）」の 注釈 */
.help-note {
  margin:0 0 12px; padding:8px 12px; border-radius:14px;
  background:var(--cream); border:3px solid var(--gold-soft);
  font-size:12.5px; font-weight:700; line-height:1.65; color:#6b5522;
}
#helpDialog .dialog-ok { width:100%; }

/* ── 横置き（★よこ÷たて ≧ 5/4）の こまかい ところ ── */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .log-row { min-height:44px; padding:0 8px; }
  .happy-wrap { width:38px; }
  .happy-cat { width:38px; height:40px; }
  .happy-name { display:none; }
  .action-row { min-height:44px; }
  .bet-btn, .act-btn { min-height:44px; }
  .who-row { min-height:28px; }
}

/* ── ★測る ときは 動きを 止める（★T300：paused では 止まらなかった ―― animation:none）── */
body.measuring *, body.measuring *::before, body.measuring *::after {
  transition:none !important; animation:none !important;
}