/* ============================================================
   七並べ ― ブラゲ工房 2本目
   ------------------------------------------------------------
   ・外部ファイルは いっさい読みこまない（外部依存ゼロが うちの方針）。
     もとは Google Fonts（Kiwi Maru / Luckiest Guy）を @import していたが、
     読みこみ失敗で 見た目が くずれる・外に通信が出る ので やめて、
     OSに入っている 丸ゴシック系フォントで 出すようにした（--font-main / --font-title）。
   ・カードは 社長支給のトランプ画像（../cards/）。比率 419:635 を くずさない。
   ============================================================ */

:root {
  color-scheme: light;          /* 暗転させない（読めなくなる事故を ふせぐ） */

  --ink:#463c52; --mint:#8cdbc1; --cream:#fff9ea; --wood:#80552e;

  /* ピンク（押す色）は 1本目（ブラックジャック）と おなじ 4色にそろえた。
     ＝ 2本ならべたとき「同じ会社の ゲーム」に 見せるための いちばん太い線。 */
  --pink:      #FF8CB8;
  --pink-deep: #E94F8A;
  --pink-dark: #C43A73;
  --pink-soft: #FFE3EF;
  --white:     #ffffff;

  /* 丸ゴシック系を 上から順に さがす。無ければ ふつうのゴシックに落ちる。
     ならびは 1本目と 1つも 変えていない（＝2本の 字面が そろう）。 */
  --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;
  --font-title:"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;

  /* カードの大きさ。よこ幅だけ決めて、たては 画像の比率（419:635）から 計算する */
  --card-w:58px;
  --card-h:calc(var(--card-w) * 635 / 419);
}
* { box-sizing:border-box; }
/* line-break:strict ＝ 日本語の 禁則処理を きびしく する。
   「ー」（のばす音）や 小さい「ゃゅょっ」が 行の あたまに 落ちるのを ふせぐ。
   ブラウザの 初期値（auto）は これを ゆるす ことが あるので、明示して そろえる
   （まとめサイトと 同じ 対応。「ロボット／カード／パス」など ー を ふくむ 言葉が 多いため）。 */
body { margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main); background:linear-gradient(180deg,#bcebf0 0 158px,#fff7e8 158px); min-height:100vh; line-break:strict; }
button,select { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1180px; margin:auto; min-height:100vh; padding:15px 20px 28px; overflow:hidden; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-family:var(--font-title); font-weight:800; font-size:30px; letter-spacing:1px; color:#59435e; text-shadow:0 2px #fff; display:flex; align-items:center; gap:6px; }
.brand-cat { font-size:34px; transform:rotate(-9deg); }.brand small { font-family:var(--font-main); font-weight:400; font-size:11px; color:#8d6d72; align-self:flex-end; margin:0 0 9px 3px; letter-spacing:0; }
/* まとめサイトへ もどる リンク（構造だけ。仕上げは アト） */
.topbar { gap:8px; }
.back { flex:0 0 auto; text-decoration:none; background:#fff; color:#765c72; border:3px solid #fff4f7; border-radius:15px; padding:8px 13px; box-shadow:0 3px 0 #ddbdc8; font-weight:700; font-size:14px; white-space:nowrap; }
.back:hover { transform:translateY(-1px); }
.brand { flex:1 1 auto; min-width:0; }
.howto,.restart-mini { background:#fff; color:#765c72; border:3px solid #fff4f7; border-radius:15px; padding:8px 13px; box-shadow:0 3px 0 #ddbdc8; font-weight:700; }.howto:hover,.restart-mini:hover { transform:translateY(-1px); }
.start-screen { min-height:calc(100vh - 103px); display:grid; place-items:center; position:relative; }.start-card { width:min(580px,94vw); text-align:center; position:relative; border:6px solid #5b4854; border-radius:32px; padding:35px 40px 28px; background:rgba(255,255,255,.92); box-shadow:0 11px 0 rgba(103,74,68,.22); z-index:1; }
.eyebrow { color:#ff759d; font-weight:700; margin:0; font-size:15px; }.start-card h1 { font-family:var(--font-title); font-weight:800; font-size:72px; color:#5a9d72; letter-spacing:3px; margin:0; text-shadow:0 4px #285e46, 0 7px #e3ffd7; }.start-card h1 span { color:#ff769b; font-size:51px; vertical-align:9px; }.intro { margin:3px 0 20px; font-size:17px; font-weight:700; }
.settings { width:min(440px,100%); margin:auto; display:grid; gap:11px; }.settings label { display:grid; grid-template-columns:165px 1fr; align-items:center; gap:12px; color:#f75682; font-size:18px; font-weight:700; }.settings select { border:2px solid #756474; border-radius:10px; background:#fffefb; padding:9px 12px; color:#403947; font-weight:700; font-size:17px; min-height:44px; }
.start-button { margin-top:25px; background:var(--pink); border:0; border-bottom:6px solid #ba3f69; color:white; border-radius:50px; padding:14px 31px 11px; font-weight:700; font-size:21px; box-shadow:0 4px 0 #ffc1d2; }.start-button:hover { background:#ff5e8f; transform:translateY(-2px); }.start-button:active { transform:translateY(4px); border-bottom-width:2px; }.tip { margin:16px 0 0; font-size:13px; color:#896c71; }.paw { position:absolute; color:#ffb3c9; font-size:22px; line-height:15px; transform:rotate(-20deg); }.paw.left { left:-35px; top:50px; }.paw.right { right:-35px; bottom:57px; transform:rotate(25deg); }.mascot { position:absolute; font-size:81px; right:9%; bottom:8%; transform:rotate(-8deg); }.mascot span { position:absolute; white-space:nowrap; font-size:14px; font-weight:700; color:#ff6395; top:-6px; right:-28px; transform:rotate(11deg); }.cloud { position:absolute; color:#fff; font-size:75px; opacity:.8; }.cloud-one { top:7%; left:10%; }.cloud-two { bottom:17%; right:10%; font-size:55px; }
.hidden { display:none !important; }.game-screen { max-width:1100px; margin:auto; }.status-line { display:flex; min-height:51px; align-items:center; justify-content:space-between; gap:12px; }.turn-badge { background:#fff; border:3px solid #ffcada; color:#f34e82; padding:7px 15px; font-weight:700; border-radius:99px; white-space:nowrap; }.status-line p { margin:0; text-align:center; font-weight:700; color:#6d5a65; }
.players { display:flex; justify-content:space-around; gap:12px; min-height:96px; padding:7px 3% 0; }.cpu { text-align:center; min-width:145px; position:relative; }.cpu-name { font-size:14px; font-weight:700; }.cpu-name small { display:block; color:#ef5c86; font-size:12px; }.cpu-cards { display:flex; justify-content:center; gap:2px; padding-top:4px; }.cpu-card { width:13px; height:39px; border-radius:4px; border:1.5px solid #372e36; background:#7d1220; box-shadow:1px 1px 0 #fff; }.cpu.eliminated { opacity:.42; filter:grayscale(1); }.cpu.eliminated:after { content:'おしまい'; position:absolute; background:#6c6670; color:#fff; border-radius:9px; font-size:12px; padding:3px 8px; left:50%; top:31px; transform:translateX(-50%) rotate(-8deg); }
.table-wrap { padding:11px 13px 13px; background:linear-gradient(135deg,#6b3d1e,#bf7a34 17%,#6d3f1f 33%,#c08139 50%,#66391b 73%,#b86e2a); border:5px solid #412817; border-radius:23px; box-shadow:0 7px 0 rgba(86,53,38,.28); position:relative; }.table-ribbon { position:absolute; z-index:3; top:-16px; left:50%; transform:translateX(-50%); padding:4px 20px; background:#ffe681; border:3px solid #996d40; border-radius:30px; color:#75513c; font-weight:700; font-size:13px; white-space:nowrap; }.table { min-height:420px; padding:12px; display:grid; grid-template-rows:repeat(4,1fr); background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 8px), #82ce84; border:3px solid #3f863f; border-radius:12px; box-shadow:inset 0 0 20px #4c9d51; }.board-row { display:grid; grid-template-columns:repeat(13,1fr); }.board-cell { min-width:0; border-right:1px solid rgba(42,110,52,.31); border-bottom:1px solid rgba(42,110,52,.31); display:grid; place-items:center; position:relative; }.board-row:last-child .board-cell { border-bottom:0; }.board-cell:last-child { border-right:0; }.board-cell .card { position:absolute; z-index:1; }
/* ★盤の 黄色い 点線わく（.board-cell.playable::after）は 消しました（設計図 §5.5）。
   1手番に 7.0個 出て、そのうち 自分が 持っている 札の ばしょは 1.7個だけ ＝ 73%は
   自分では うめられない ばしょ でした。しかも ロボットの 番の あいだも 出っぱなし。
   「どこが 空いているか」は 遊ぶ人が 自分で 見つける しごと なので、盤は だまっている。
   ★手札の 光り（.can-play）は のこす ―― こちらは「どの札が 出せるか」を 言う しるし。 */
.table-corner { position:absolute; font-size:21px; color:#ffe0a0; }.c1 { left:7px; top:7px; }.c2 { right:7px; bottom:7px; transform:rotate(130deg); }
.hand-area { margin-top:14px; padding:7px 13px 9px; background:#fffdf5; border:3px solid #f4dfbd; border-radius:20px; box-shadow:0 5px 0 rgba(193,153,112,.22); }.hand-heading { display:flex; align-items:center; justify-content:space-between; color:#755a5c; font-weight:700; }.hand-heading small { color:#ec5a86; }.hand { min-height:94px; padding:5px 3px 2px; display:flex; align-items:flex-start; justify-content:center; gap:5px; overflow-x:auto; }.card { flex:0 0 auto; padding:0; width:var(--card-w); height:var(--card-h); aspect-ratio:419 / 635; border-radius:7px; border:2px solid #423d43; background:#fffefb; box-shadow:1px 2px 1px rgba(49,41,42,.35); position:relative; overflow:hidden; font-family:Georgia,serif; font-weight:bold; }.card.red { color:#e8434f; }.card.black { color:#25252c; }.hand .card { margin:0; transition:transform .16s, filter .16s; }.hand .card:hover:not(:disabled) { transform:translateY(-7px) rotate(-2deg); z-index:10; }.hand .card.can-play { border-color:#f1a426; box-shadow:0 0 0 3px #ffe690,1px 3px 2px rgba(49,41,42,.35); }.hand .card:disabled { cursor:not-allowed; filter:brightness(.9); }
.actions { display:flex; align-items:center; justify-content:center; gap:16px; }.pass-button { background:#75cdb2; border:0; border-bottom:5px solid #398b78; color:#fff; padding:10px 24px 7px; border-radius:15px; font-weight:700; font-size:19px; }.pass-button:hover:not(:disabled) { background:#5ebd9f; }.pass-button:disabled { opacity:.52; cursor:not-allowed; }.pass-button small { display:block; font-size:11px; }.pass-bubbles { display:flex; gap:5px; }.pass-dot { width:15px; height:15px; border-radius:50%; background:#d6ddd5; border:2px solid #afbab0; }.pass-dot.used { background:#ff8ca8; border-color:#ef6088; }
dialog { border:0; border-radius:22px; max-width:440px; color:#554856; padding:27px 31px 24px; text-align:center; font-family:var(--font-main); box-shadow:0 15px 50px rgba(48,34,44,.35); }.close-dialog { position:absolute; top:7px; right:11px; border:0; background:transparent; color:#a88d9b; font-size:27px; }.dialog-ok { border:0; border-bottom:4px solid #bb4770; background:#ff78a1; color:#fff; padding:10px 22px 7px; border-radius:30px; font-weight:700; font-size:17px; }.dialog-ok:hover { background:#f96591; }dialog::backdrop { background:rgba(56,42,60,.4); }dialog h2 { color:#f05482; margin:0 0 13px; }dialog ol { text-align:left; padding-left:22px; line-height:1.8; font-size:14px; margin-bottom:22px; }#resultContent p { margin:4px 0 18px; }#resultContent .winner { font-size:29px; color:#ef5380; font-weight:700; }
dialog { border:0; border-radius:22px; max-width:440px; color:#554856; padding:27px 31px 24px; text-align:center; font-family:var(--font-main); box-shadow:0 15px 50px rgba(48,34,44,.35); }.close-dialog { position:absolute; top:7px; right:11px; border:0; background:transparent; color:#a88d9b; font-size:27px; }.dialog-ok { border:0; border-bottom:4px solid #bb4770; background:#ff78a1; color:#fff; padding:10px 22px 7px; border-radius:30px; font-weight:700; font-size:17px; }.dialog-ok:hover { background:#f96591; }dialog::backdrop { background:rgba(56,42,60,.4); }dialog h2 { color:#f05482; margin:0 0 13px; }dialog ol { text-align:left; padding-left:22px; line-height:1.8; font-size:14px; margin-bottom:22px; }#resultContent p { margin:4px 0 18px; }#resultContent .winner { font-size:24px; color:#ef5380; font-weight:700; }.ranking { list-style:none; padding:0; margin:0 0 19px; display:grid; gap:6px; }.ranking li { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px; padding:7px 9px; border-radius:10px; text-align:left; background:#fff5d8; font-size:14px; font-weight:700; }.ranking li:nth-child(1) { background:#fff0a8; }.ranking li.is-human { box-shadow:inset 0 0 0 2px #ff8eb0; }.ranking .place { color:#ee4e7d; }.ranking small { color:#987a78; font-size:10px; }
@media (max-width:650px) { :root { --card-w:38px; } body { background:linear-gradient(180deg,#bcebf0 0 105px,#fff7e8 105px); }.app-shell { padding:9px 8px 18px; }.topbar { height:48px; }.brand { font-size:23px; }.brand-cat{font-size:25px}.brand small { display:none; }.howto,.back { font-size:11px; padding:7px 8px; border-width:2px; }.start-screen { min-height:calc(100vh - 75px); }.start-card { border-width:4px; padding:25px 19px 21px; border-radius:24px; }.start-card h1 { font-size:59px; }.settings label { grid-template-columns:1fr; gap:4px; text-align:left; font-size:15px; }.settings select { font-size:15px; }.paw,.mascot,.cloud { display:none; }.players { min-height:74px; gap:2px; padding:4px 0 0; }.cpu { min-width:0; flex:1; }.cpu-name { font-size:11px; }.cpu-name small { font-size:10px; }.cpu-card { width:13px; height:39px; }.table-wrap { padding:8px; border-width:4px; border-radius:14px; }.table { min-height:295px; padding:4px; }.table-ribbon { font-size:10px; top:-13px; padding:3px 12px; }.card { border-width:1.5px; border-radius:5px; }.card .corner { font-size:9px; }.card .corner i { font-size:8px; }.card .pip { font-size:18px; }.hand-area { margin-top:10px; padding:7px; }.hand { min-height:68px; padding-top:5px; justify-content:flex-start; gap:4px; }.hand .card { margin:0; }.status-line { min-height:41px; }.turn-badge { padding:5px 8px; font-size:11px; }.status-line p { font-size:12px; }.restart-mini { padding:5px 7px; font-size:10px; }.pass-button { font-size:16px; }.c1,.c2 { display:none; }
  /* せまい画面では ダイアログの よこ余白を つめて、1行に 入る 字数を ふやす。
     つめないと「〜並べる／よ。」のように 最後の 1〜2字だけが 次の行に 落ちて 読みにくい。 */
  dialog { padding:24px 16px 20px; }dialog ol { padding-left:19px; } }

/* Forced cards stay translucent until a complete path from 7 reaches them. */
.board-cell .card.ghost { opacity:.42; filter:saturate(.72); }
.board-cell .card.forced { box-shadow:0 0 0 2px rgba(255,255,255,.36),1px 2px 1px rgba(49,41,42,.35); }
.cpu-cards { gap:0; padding-top:5px; }
.cpu-card { width:24px; height:64px; margin-left:-10px; }
.cpu-card:first-child { margin-left:0; }
@media (max-width:650px) { .cpu-card { width:18px; height:50px; margin-left:-9px; } .cpu-card:first-child { margin-left:0; } }

/* CPUの伏せ札。裏面も 社長支給の画像（トランプ裏赤.png）を使う。
   細い たんざく状に かさねて 見せるので、左はしを たての高さに合わせて出す。
   ファイル名が日本語なので URLエンコードずみ（= トランプ裏赤.png）。 */
.cpu-card {
  background:#7d1220 url('../cards/%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97%E8%A3%8F%E8%B5%A4.png') left center/auto 100% no-repeat;
}

/* 場の ますは カードと おなじ大きさ（--card-w / --card-h）。
   となりの カードと ぴったり つながって 見えるように、かどは まるめない。 */
.table { grid-template-rows:repeat(4,var(--card-h)); align-content:center; }
.board-row { grid-template-columns:repeat(13,var(--card-w)); justify-content:center; }
.board-cell { border:0; }
.board-cell .card { width:var(--card-w); height:var(--card-h); border-width:1px; border-radius:0; }
@media (max-width:650px) { .table { grid-template-rows:repeat(4,var(--card-h)); overflow-x:auto; align-content:center; }.board-row { grid-template-columns:repeat(13,var(--card-w)); justify-content:start; min-width:calc(var(--card-w) * 13); } }

/* ── カードの絵札（社長支給のトランプ画像・設計図§9） ──────────
   もとは CSS と記号で カードを 描いていたが、うちの きまりで
   かならず ../cards/ の画像を つかう。比率 419:635 は 絶対に くずさない。 */
.card .face-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;          /* たて・よこを つぶさない・のばさない */
  background:#fff;
  display:block;
  user-select:none; -webkit-user-drag:none;
}

/* 画像が とどくまで／読めなかったときの したじき（記号だけの かんたんカード）。
   画像が のると 上に かぶさり、読めたら .img-ok で 消える。 */
.card .fallback { position:absolute; inset:0; display:block; }
.card.img-ok .fallback { display:none; }
.card .corner { position:absolute; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:13px; font-weight:900; line-height:1; }
.card .corner i { font-style:normal; font-size:11px; }
.card .corner.tl { top:4px; left:5px; }
.card .corner.br { bottom:4px; right:5px; transform:rotate(180deg); }
.card .pip { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; }

/* Empty board positions retain the green mesh and grid lines. Cards cover the lines when played. */
.board-cell { border-right:1px solid rgba(42,110,52,.48); border-bottom:1px solid rgba(42,110,52,.48); background-color:#86d184; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(55,133,66,.12) 0 1px,transparent 1px 5px); }
.board-row:last-child .board-cell { border-bottom:0; }.board-cell:last-child { border-right:0; }


/* ============================================================
   ここから下：1本目（ブラックジャック／まとめサイト）と
   世界観を そろえるための 追記。― アト（T22）
   ・見た目だけの 追記です。ゲームの 中身には さわっていません。
   ・作りを 大きく 変えず、色・かど・かげ・ボタンの 手ざわり だけ
     1本目と 親せきに 見えるように しています。
   ============================================================ */

/* ── 上の帯：もどるボタン・あそびかた・さいしょから ──
   3つとも 1本目の「◀ ゲームを えらぶ」と 同じ 白い丸ピル。
   さわれるものは まるく、高さ42px（指で 押せる 大きさ）に そろえる。 */
.back,
.howto,
.restart-mini {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 15px;
  font-family:inherit; font-size:13.5px; font-weight:900;
  color:var(--pink-dark); text-decoration:none; white-space:nowrap;
  background:var(--white);
  border:3px solid var(--pink-soft); border-radius:999px;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.back:hover, .howto:hover, .restart-mini:hover {
  transform:translateY(-2px); box-shadow:0 5px 0 rgba(196,155,110,.2);
}
.back:active, .howto:active, .restart-mini:active {
  transform:translateY(2px); box-shadow:0 1px 0 rgba(196,155,110,.18);
}
.back:focus-visible, .howto:focus-visible, .restart-mini:focus-visible {
  outline:4px solid var(--pink-deep); outline-offset:3px;
}

/* 帯の しるしも ハッピー（絵文字の ねこは やめた。
   ちがう ねこが 2ひき 出ると「同じ子」に 見えなくなるため）。 */
.brand-cat { width:38px; height:29px; flex:0 0 auto; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ── 大きいボタン：大きい字 ＋ 小さい説明 の 2段（1本目と同じ形） ── */
.start-button {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:64px; padding:10px 34px;
  border:4px solid #fff; border-radius:999px;
  color:#fff; font-size:21px; font-weight:900; line-height:1.2;
  background:linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
  box-shadow:0 7px 0 var(--pink-dark), 0 12px 18px rgba(196,58,115,.26);
  transition:transform .1s ease, box-shadow .1s ease;
}
.start-button:hover { background:linear-gradient(180deg,#FF9DC3 0%,#EE5C93 100%); transform:translateY(-2px); }
.start-button:active { transform:translateY(4px); box-shadow:0 2px 0 var(--pink-dark); }
.start-button:focus-visible { outline:4px solid var(--pink-deep); outline-offset:4px; }
.start-button small { display:block; font-size:12px; font-weight:800; opacity:.82; letter-spacing:.5px; }
.pass-button small { font-weight:800; opacity:.85; }

/* ============================================================
   看板ねこ「ハッピー」
   まとめサイト（portal.css）・ブラックジャックと 同じ 見た目・同じ動き。
   ここでは 描きなおさず、そのまま 持ちこんでいる。
   ============================================================ */
.cat { width:100%; height:auto; overflow:visible;
  animation:bob 3s ease-in-out infinite;
  filter:drop-shadow(0 5px 5px rgba(150,110,70,.22)); }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-1.5deg)} }

.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(0)} 50%{transform:rotate(-9deg)} }

/* かおは ふだん「ふつう」。ゴールした ときだけ「うれしい」に かわる。 */
.face-happy { display:none; }
.talk[data-mood="win"] .face-normal { display:none; }
.talk[data-mood="win"] .face-happy  { display:block; }
.talk[data-mood="win"] .cat { animation:hop .5s ease-in-out 2; }
@keyframes hop { 0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-12px) rotate(6deg)} 60%{transform:translateY(0) rotate(-4deg)} }

.cat-spark { position:absolute; font-size:15px; opacity:0; pointer-events:none; }
.cat-spark.s1 { top:-2px; left:-6px; }
.cat-spark.s2 { top:14px; right:-8px; }
.talk[data-mood="win"] .cat-spark { animation:pop 1.1s ease-out 2; }
.talk[data-mood="win"] .cat-spark.s2 { animation-delay:.25s; }
@keyframes pop { 0%{opacity:0;transform:scale(.4)} 40%{opacity:1;transform:scale(1.2)} 100%{opacity:0;transform:scale(.8) translateY(-10px)} }

/* 名ふだ「ハッピー」＝ 1本目・まとめサイトと 同じ 白い丸ピル。
   足もとに うかせて 置くので、まわりの ばしょを 1pxも 取らない。 */
.cat-name {
  position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  z-index:2; margin:0; padding:0 7px;
  font-size:10.5px; font-weight:900; line-height:1.7; letter-spacing:-.02em;
  color:var(--pink-dark); background:var(--white);
  border:2px solid var(--pink); border-radius:999px;
  white-space:nowrap; box-shadow:0 2px 0 rgba(196,155,110,.18);
  pointer-events:none;
}

/* ── スタート画面の ハッピー（絵文字の ねこと 差しかえ） ── */
.mascot {
  position:absolute; right:3%; bottom:5%; z-index:2;
  width:clamp(104px,25vw,150px);
  display:flex; flex-direction:column; align-items:center;
  font-size:inherit; transform:none;
}
.mascot .bubble {
  /* ふきだしは ねこの はばに しばられず、ことばの ぶんだけ ひろがる
     （「ならべ／よう！」の ような 変な ところで 折れないように） */
  position:relative; align-self:center; width:max-content; max-width:min(200px,46vw);
  margin:0 0 10px; padding:7px 12px;
  font-size:14px; font-weight:900; line-height:1.3; text-align:center;
  color:var(--pink-dark); background:var(--white);
  border:3px solid var(--pink); border-radius:18px;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
}
/* ふきだしの しっぽ（ねこの ほうを 向く） */
.mascot .bubble::before, .mascot .bubble::after { content:""; position:absolute; left:50%; width:0; height:0; border-style:solid; }
.mascot .bubble::before { bottom:-14px; margin-left:-6px; border-width:14px 11px 0 0; border-color:var(--pink) transparent transparent transparent; }
.mascot .bubble::after  { bottom:-9px;  margin-left:-4px; border-width:10px 8px 0 0;  border-color:#fff transparent transparent transparent; }

/* ============================================================
   ゲーム中の おしらせ ＝ ハッピーの ふきだし
   ------------------------------------------------------------
   「いま 何が おきたか」は この1か所だけを 見れば わかる、に する。
   上＝ハッピーの ひとこと（大きい）／下＝ゲームの おしらせ。
   ============================================================ */
.talk { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; }
.cat-wrap { position:relative; flex:0 0 auto; width:clamp(52px,9vw,74px); }

.talk .banner {
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:7px 13px; text-align:center;
  background:var(--white); border:3px solid var(--pink); border-radius:18px;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
}
/* ふきだしの しっぽ（ねこの ほうを 向く） */
.talk .banner::before, .talk .banner::after { content:""; position:absolute; width:0; height:0; border-style:solid; }
.talk .banner::before { left:-17px; top:18px; border-width:9px 17px 9px 0; border-color:transparent var(--pink) transparent transparent; }
.talk .banner::after  { left:-11px; top:21px; border-width:6px 12px 6px 0; border-color:transparent #fff transparent transparent; }

.cat-line { font-size:16px; font-weight:900; line-height:1.25; color:var(--pink-dark); }
.status-line .banner p#message { flex:0 0 auto; font-size:13px; font-weight:800; line-height:1.45; color:#7C6754; }

/* ゴールした しゅんかんだけ、ふきだしも あかるい みどりに */
.talk[data-mood="win"] .banner { border-color:#3FB562; background:#E4F8E9; }
.talk[data-mood="win"] .banner::before { border-right-color:#3FB562; }
.talk[data-mood="win"] .banner::after  { border-right-color:#E4F8E9; }
.talk[data-mood="win"] .cat-line { color:#1F7A45; }

/* ============================================================
   ロボットの 伏せ札（社長ご指摘・T22）
   ------------------------------------------------------------
   まえは「はばを 24pxに 切った札」を ならべていたので、
   いちばん 右の 1まいまで 右がわが 切れて、折れて 見えていた。
   直し方：札は ぜんぶ カード1まいぶんの 大きさ（419:635）にして、
   左マージンを マイナスに して かさねる。かさなるのは 左がわ どうしなので、
   いちばん 右の 1まいは かならず まるごと 見える（白いふちも 上下左右そろう）。
   のこり1まいの ときも、かさなりが 無いので そのまま まるごと 見える。
   ============================================================ */
.cpu-cards { display:flex; justify-content:center; align-items:flex-end; min-width:0; padding-top:5px; gap:0; }
.cpu-card {
  --back-h:64px;                         /* 札の たかさ */
  --back-step:8px;                       /* となりの札から どれだけ ずらすか */
  flex:0 0 auto;
  width:calc(var(--back-h) * 419 / 635); /* 比率2:3は ぜったいに くずさない */
  height:var(--back-h);
  margin-left:calc(var(--back-step) - (var(--back-h) * 419 / 635));
  border:0; border-radius:3px;
  background:transparent url('../cards/%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97%E8%A3%8F%E8%B5%A4.png') center/contain no-repeat;
  box-shadow:none;
}
.cpu-card:first-child { margin-left:0; }

.cpu.eliminated:after { content:'おしまい'; }

/* ── ダイアログの 追記 ── */
.dialog-lead {
  margin:0 0 12px; padding:8px 10px;
  font-size:15px; font-weight:900; color:var(--pink-dark);
  background:var(--pink-soft); border-radius:14px;
}
#resultDialog .cheer { margin:0 0 16px; font-size:15px; font-weight:900; color:#7C6754; }
.dialog-ok { font-family:inherit; }
/* .nb ＝ ここで 切らない ひとかたまり。
   せまい画面で「〜場に並ぶ／よ。」のように 文の 最後の 1字だけが
   次の行に 落ちるのを ふせぐ。ことばは 1字も 変えずに、折れる 場所だけ そろえる
   （文の きれめ「。」で 改行させる）。 */
.nb { display:inline-block; }

/* ── ちいさい画面（スマホ） ──
   よこスクロールは ぜったいに 出さない。ハッピーは 消さずに 小さくする。 */
@media (max-width:650px) {
  .back, .howto, .restart-mini { min-height:36px; padding:0 10px; font-size:11.5px; border-width:2px; }
  .brand-cat { width:30px; height:23px; }

  /* おしらせ（ハッピーの ふきだし）は はば いっぱいの 2だんめに おろす。
     ＝ 文が 3行4行に ならず、1〜2行で 読める。 */
  .status-line { flex-wrap:wrap; gap:8px; min-height:0; padding-bottom:2px; }
  .turn-badge { order:1; }
  .restart-mini { order:2; margin-left:auto; }
  .talk { order:3; flex:1 0 100%; }
  .cat-wrap { width:54px; }
  .talk .banner { padding:6px 10px; }
  .cat-line { font-size:14px; }
  .status-line .banner p#message { font-size:12px; }

  .start-button { min-height:58px; padding:9px 24px; font-size:19px; }
  /* スマホでは ハッピーを カードの 上に かぶせない（大事な 注意書きが かくれるため）。
     カードの 下に おろして、右がわに 立たせる。 */
  .start-screen { align-content:center; }
  /* position:relative の ままに する（名ふだ「ハッピー」は 足もとに
     うかせて 置いてあるので、ここを static にすると 名ふだだけ 迷子になる） */
  .mascot { display:flex; position:relative; inset:auto; justify-self:end; margin:2px 14px 0 0; width:100px; }
  .mascot .bubble { font-size:12px; padding:5px 10px; border-width:2px; max-width:min(180px,50vw); }

  .cpu-card { --back-h:50px; --back-step:4px; }
  /* ロボットが 4人 ならんでも、名前と まいすうが となりと くっつかない大きさ */
  .cpu-name { font-size:10.5px; }
  .cpu-name small { font-size:9.5px; letter-spacing:-.02em; }
  .dialog-lead { font-size:13.5px; }
}

/* 動きが にがてな人には 動かさない（OSの せっていに したがう） */
@media (prefers-reduced-motion: reduce) {
  .cat, .cat-eyes, .cat-tail, .cat-spark { animation:none !important; }
}

/* ============================================================
   T109 ―「パスする」が 画面の 外に あった（375×667 で 50px 外）
   ------------------------------------------------------------
   設計図 追記③：★触る所が 画面の外に 出たら、それは 見切れでは なく 故障。
   ポーカー（T105・T106）と 同じ やり方で 直す ――
   ★ちぢめない。けずる。カードも 字も 1つも 小さく していない。
   消したのは「からっぽの ばしょ」と「同じ ことを 2回 言っている もの」だけ。

   直す前（375×667・遊んでいる 最中）：ページ 745px／はみ出し 78px。
   いちばん 悪い 場面（ロボットが 4回パスで おしまいに なった とき）は 756px／89px。
   ============================================================ */

/* ① ★盤の 中の からっぽの みどり ―― 56.7px
   .table は 4行ぶんの 札（57.6px × 4 ＝ 230.3px）＋ 余白8px ＝ 238.3px しか
   中身が ないのに、min-height で 295px の 場所を 取っていた。
   ＝ みどりの 上と 下に 28pxずつ、なにも 無い みどりが あった。
   ★札は 1mmも 小さく していない。からっぽの ばしょを 消しただけ。 */
.table { min-height:0; }
@media (max-width:650px) { .table { min-height:0; } }

/* ② ★ハッピーの ひとこと（#catLine）―― おしらせ（#message）と 同じ ことを 言っていた
   「ないね。パス しよう！」／「光ってるカードを選んでね。なければ パス！」
   「だれが出すかな…」  ／「ロボット1は考え中…」
   「つながって きたね！」／「ロボット1は ♠8を出したよ！」
   ―― 上が ハッピー、下が おしらせ。中身が 同じなので、くわしい ほう（下）を のこす。
   ★ハッピーは 消えていない。ふきだしも そのまま ―― ふきだしの 中の
     ダブった 1行だけを 消した（ゴールした ときの みどりの ふきだし・
     うれしい かおも これまで どおり 出る）。

   ★そして ふきだしの 高さを 60px に 固定する。
   社長が 大富豪（T100）で 名ざしで 言った もの と 同じ 故障だった：
   「場の みどりが 出したときと 出さないときで たての 長さが 変わるので 目がチカチカする」。
   ここも おしらせの 文が 長い ときだけ 1行 ふえて、画面の 高さが 745⇔756 で 動いていた。
   ハッピーの 絵が 59.6px なので、60px に しても 何も せまく ならない。 */
.talk .cat-line { display:none; }
.talk { height:80px; }                                  /* 大きい画面：ハッピーの絵が 78.9px */
@media (max-width:650px) { .talk { height:60px; } }      /* スマホ：ハッピーの絵が 59.6px */
.talk .banner { max-height:100%; }
/* ゴールした しゅんかんは、みどりの ふきだしの 字も みどりに
   （ハッピーの ひとことが 受けもっていた「うれしさ」を おしらせの 字に わたす。
     字は 1つも ふやしていない・大きさも 変えていない） */
.talk[data-mood="win"] .banner p#message { color:#1F7A45; }

/* ③ 見出し「あなたの手札」の 行 ―― 16px
   すぐ 下に 表むきの 札が ならんでいる。表むきの 手札は 画面に これ1つ だけ
   （ロボットの 札は ぜんぶ 裏むき）。ポーカー T105-⑦ と 同じ 考え方。
   ★枚数の「◯枚」は 消さずに、パスの 行（.actions）に うつした（index.html）。
     行が 1つ 減っただけで、画面の 字は 1つも 減っていない。 */
.hand-heading { display:none; }
.actions .hand-count { flex:0 0 auto; color:#ec5a86; font-size:12px; font-weight:700; white-space:nowrap; }

/* ④〜⑧ ちいさい画面（スマホ）の からっぽの ばしょ ―― あわせて 31px
   どれも「中身より 大きく 取ってあった 場所」を 中身に あわせただけ。 */
@media (max-width:650px) {
  /* ④ 上の帯 48px ―― 中の ボタンは 36px。12px あまっていた */
  .topbar { height:40px; }
  /* ⑤ 画面いちばん下の 余白 18px ―― 手札の 箱に 自分の わくと かげが ある */
  .app-shell { padding-bottom:8px; }
  /* ⑥ 手札の 箱の 上の すきま 10px → 6px（箱の わくで 区切りは つく） */
  .hand-area { margin-top:6px; }
  /* ⑦ 手番の 行の すきま */
  .status-line { gap:6px; padding-bottom:0; }
  /* ⑧ 木のわくの 内がわ 8px → 5px（わくの ふとさ 4px は そのまま） */
  .table-wrap { padding:5px; }
  /* ⑨ 手札の 行 68px ―― 札 57.6＋余白7 ＝ 64.6 しか いらない */
  .hand { min-height:65px; }
}

/* ============================================================
   T110 ― 320×568 でも「パスする」を 画面の 中に（社長の 決め：①だけ）
   ------------------------------------------------------------
   T109 の あと、320×568 では まだ 57px 外に 出ていた。
   社長の 決め：**「手番のふだ」を 消す。ロボットの 伏せ札の 絵には さわらない。**
   ★ちぢめない。けずる。札は 38×57.6px・比率1.515 の まま。字も 1つも 小さく していない。
   ============================================================ */

/* ① ★手番の ふだ「あなたの番！」―― すぐ となりの おしらせが 同じ ことを 言っていた

   | 手番の ふだ | すぐ となりの おしらせ（のこす） |
   |---|---|
   | あなたの番！   | 光ってるカードを選んでね。なければ パス！（＋手札が 光る ＋ パスが おせる）|
   | ロボット1の番  | ロボット1は**考え中**…                                       |
   | ゲーム終わり！ | 順位発表の まどが 開く                                        |

   設計図 §5.5「1つの 画面に 光る・色が変わる等の 強調は 1種類まで」。
   ★ふだが 消えると ハッピーの ふきだしが 1行目に 上がれる ので、
     手番の 行が **102px → 60px（−42px・実測）**に なる。
   ★ふだは HTML に のこしてある（`#turnBadge` の 中身を 見て ハッピーの かおを
     きめる しくみが あるため）。見た目だけ 消している。 */
.turn-badge { display:none; }

/* ★ふきだしを 1行目に 上げる（＝ここで −42px が 出る）のは **≦360px だけ**。
   ------------------------------------------------------------
   375px では 余りが 84px も あるので 上げる 必要が ない。
   そして 上げると ふきだしが せまく なり、
   「光ってるカードを選んでね。なけれ／ば パス！」と **変な ところで 折れた**
   （実際に 375×667 で 起きた。社長が もう 見ている 画面なので もどした）。
   ＝ 375px 以上は **T109 で 公開した 見た目の まま**（ふだが 消えただけ）。
   ★flex-basis を 0 に しないと、ふきだしの「文の 自然な よこはば」で
     行が あふれて 2行目に 落ちる ―― 消すだけでは 縮まらない（一度 つまずいた所）。 */
@media (max-width:360px) {
  .talk { order:1; flex:1 1 0; }
  .restart-mini { order:2; margin-left:0; }
}

/* ② ★ちいさいスマホ（≦360px）だけ、すきまを 中身ぴったりに する ―― あと 15px
   ①だけでは 320×568 で まだ 15px 足りなかった。
   ★消したのは「空白」だけ。札も 字も 1つも 小さく していない。
   ★375px 以上には かからない ―― 社長が もう 見ている 375の 見た目を 1pxも 動かさないため。 */
@media (max-width:360px) {
  .topbar { height:36px; }                                  /* 中の ボタンが 36px。4px あまり */
  .app-shell { padding-top:5px; padding-bottom:4px; }        /* 画面の ふち */
  .players { padding-top:0; }                                /* ★伏せ札の 絵と 下じきには さわっていない */
  .table-wrap { padding:3px; }                               /* 木のわく（ふとさ 4px は そのまま） */
  .table { padding:2px; }                                    /* みどりの 内がわ */
  .hand-area { padding-top:4px; padding-bottom:4px; margin-top:3px; }
}

/* ============================================================
   T115 ― 手札が よこに 見切れて「出せる札が 1枚も 見えない」を なおす
   ------------------------------------------------------------
   起きていたこと（実測・320×568・ロボット2人・1手目）：
     手札の 箱 284px ／ 中身 716px ＝ **432px が 右に かくれていた**。
     見えているのは 17枚中 6枚。しかも かくれていることを 知らせる ものが
     何も 無い（矢印も 影も 無い）。出せる札が 全部 その中に いると、
     画面の 上では「光ってる札が 1枚も ない」ように 見える。
     → 出せるのに パス → 4回で 脱落。**負けに 直結する 故障。**

   なおし方：**札を かさねて 詰める（＝いつも 全部の 札が 箱に 入る）。**
   設計図 追記③ の「受け流す順番：①静かに詰める（気づかれない）
   → それでも 無理なら 見切れる」の、①を ここで 使う。

   ★札は 38×57.58px の まま。1pxも 小さく していない（社長の「けずる」方針）。
     かさねるのは **すきまと 札の 右がわ** だけ。トランプを 手に 持った形と 同じ。
     左はしの 角（数字と マークが 書いてある所）は どの札も かならず 出る。
   ★字も 飾りも 1つも ふやしていない（グラデも 矢印も 入れていない）。
   ★どれだけ かさねるかは JS が その場で 計算する（game.js の fitHand）。
     入りきる ときは かさねない ＝ 大きい画面と 終盤は 今までと **まったく 同じ**。
   ============================================================ */

/* ① 詰める本体。--fan は game.js が 入れる（既定 0px ＝ 今までどおり）。
      flex の gap に この マイナスの すきまが 足されて、札の 間かくが せまく なる。 */
.hand .card + .card { margin-left: calc(-1 * var(--fan, 0px)); }

/* ② よこスクロールは 保険として のこす（万一 入りきらない ときの 逃げ道）。
      ふだんは 中身が 箱に おさまるので、スクロールバーは 出ない。

   ★試して やめたこと：「出せる札を いちばん上に かさねる（.can-play{z-index:5}）」
     光る札が 38px まるごと 出るので 良さそうに 見えたが、実測で 逆に わるかった：
       ・320×568：**80枚／2993枚（2.7%）の 札が まるごと 見えなく なった**
         （光る札の 右どなりが、左右から はさまれて 消える）
       ・光る札の 見える はばは ほとんど 変わらなかった
         （まん中の 値は どちらも 36px。下から1割の 所で 25px と 19px の 差だけ）
       ・光る札だけ 太く なるので 手札の ならびが ガタガタに なり、
         しかも 手番ごとに その形が 変わる（＝ 手札が 毎回 動いて 見える）
     → **入れない。** ならびが いつも 同じ ほうが 読みやすい。 */

/* ============================================================
   ★★★ T277 ―「↻ やめる」（★アトの 型・T273 §2 ／ 設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … ★上の帯の いちばん 右。★遊んで いる あいだ だけ 出ます。
   ★ 字     … ★もとは「↻ 最初から」。★社長のお決め①で「↻ やめる」に そろえました。
                ★★働きは 1つも 変わって いません（★はじめの 画面に 戻る）。
   ★ 大きさ … ★指の的 44×44。★もとの「↻ 最初から」は 高さ 36px でした【実測】。
   ★ 色     … ★うすみどり（★20本の 上の帯で 空いて いた 唯一の 色）。
   ⚠️★ position:relative; z-index:2 が 無いと、★はみ出した ぶんを
        ★あとから 来る 兄弟が 上書きし、★指の的が 36〜42px に 減ります。
   ------------------------------------------------------------
   ★★ はみ出しの ゆくえ ―― ★この本は 帯の 高さが **60／40／36px**【実測】
     ★ ①はば 651px 以上（帯 60px）… ★44px は まるごと 入る。★はみ出し 0。
     ★ ②はば 361〜650px（帯 40px）… ★★**上に 4px 返す**（align-self:flex-end）。
        ★★上には 空が 9px あります【実測 tb.y=9】。★★★下には 1pxも 出しません。
        ★★★なぜ 下に 出さないか：★下は ハッピーの ふきだし。★よこに 空けると
           ★ふきだしが せまく なり、★★T110 が 直した「★光ってるカードを選んでね。なけれ／ば パス！」
           ★★★という **変な ところの 折れ**が 戻って しまいます（★その 記録は 上に あります）。
     ★ ③はば 360px 以下（帯 36px）… ★上の 空は 5px しか ないので、
        ★★上に 4px・下に 4px（align-self:center）。★下の 4px は よこに 空けます。
        ★★★ここは もとから ふきだしが「↻ 最初から」と 横ならび でした ので、
           ★引っこした ぶん（★66px）の ほうが 空ける ぶん（★56px）より 大きく、
           ★★ふきだしは ★**前より 10px ひろく なります**【★実測】。
   ============================================================ */
.quit-btn {
  position:relative; z-index:2;
  order:99; flex:0 0 auto; align-self:center;
  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-family:inherit; font-size:11.5px; font-weight:900; line-height:1;
  white-space:nowrap; cursor:pointer;
}
.quit-btn .quit-icon { margin-right:4px; }
/* ★★ T281 ― ★↻ を 字では なく **絵（インラインSVG）**で 描く（★アトの 型・T279）★★
   ★ わけ：★`↻` の 形を 決めて いるのは ★その端末の フォントで、★私たちには 直せません。
     ★★実測：★字の ときは **9.77×11.5px**で、★★やじりが **1画素も 出て いません**でした。
   ★ ★外部フォント 0・画像ファイル 0・通信 0（★SVG は HTML の 中）。
   ★ ★`display:none` の 決まりは そのまま 効きます（★下の @media は 1行も 触って いません）。 */
.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; }
.quit-btn:hover  { transform:translateY(-2px); }
.quit-btn:active { transform:translateY(2px); }
.quit-btn:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; }

/* ★ はば 374px 以下は 字を 1段 下げ、★↻ を 落とします（★型の とおり）。 */
@media (max-width:374px) {
  .quit-btn { font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon { display:none; }
}

/* ★★ はば 520px 以下は「◀ ゲームを選ぶ」を「◀」だけに します（★社長のお決め②）★★
   ★ 代金：★せまい 画面では「ゲームを選ぶ」の 字が 見えなく なります。
     ★★代わりに 題「七並べ」が たてに 折れなく なります【★T273 実測】。 */
@media (max-width:520px) {
  .back .back-word { display:none; }
  .back { min-width:44px; justify-content:center; padding:0 10px; }
}

/* ★ ②はば 361〜650px ―― ★はみ出しを **上**に 返す（★ふきだしを 1pxも せまく しない）*/
@media (max-width:650px) { .quit-btn { align-self:flex-end; } }

/* ★ ③はば 360px 以下 ―― ★下に 4px 出る ぶんだけ、★ふきだしの 右を 空ける */
@media (max-width:360px) {
  .quit-btn { align-self:center; }
  .status-line .talk .banner { margin-right:56px; }
}


/* ============================================================
   ★★★ T285 ―― ★上の帯を 画面に くっつける（★💻コーダ・2026-09-13）★★★
   ★ ★社長の お決め「★2. いま直す」。★アトが ブラックジャックで 通した 型（★T279）を 写します。
   ★★ この かたまりは **七並べ 1本だけ**。★ほかの 19本は 1バイトも 触って いません。
   ------------------------------------------------------------
   ★ ★直す 前の 事実【★実測・コーダ T285・★追記⑥の 12画面】：
     ★ ★遊んで いる あいだ、★**12画面中 9画面**で「↻ やめる」も「◀」も 画面の 外に 出て いました
       ★ ★（★いちばん ひどいのは 568×272 の 上 **−324px**）。★★8画面では まん中が 押せません。
     ★ ★★トライの T283 の 数字と 1つも ちがわず 出ました（★私の ものさしが 正しい ことの 裏）。

   ★★★ ここが ブラックジャックと ちがった ところ（★そのまま 写せなかった 1行）★★★
     ★ ★七並べの `.app-shell` には **`overflow:hidden`** が ありました。
     ★ ★★これは「★すべる 入れ物」を 作るので、★★★その 中の `sticky` は **1pxも 効きません**。
     ★ ★実測【★T285-02・812×375・いちばん 下まで すべった とき】：
       ★ ★ ①`sticky` だけ 足す … 帯の 上 **−498px**（★＝ 効いて いない）
       ★ ★ ②器を `overflow:clip` に … 帯の 上 **0px**（★効いた）
     ★ ★→ ★`hidden` を `clip` に します。★★`clip` は **同じように 切る のに、すべる 入れ物を 作らない**。
       ★ ★★`hidden` を 先に 書いて 残して あるので、★`clip` を 知らない 古い ブラウザでは
       ★ ★★★**いまと まったく 同じ 見え方**に 落ちます（★帯が くっつかない だけ）。

   ★★★ 器の 切る 係を **外しかけて、写真に 止められました** ★★★
     ★ ★はじめ「切る 係を body へ わたす」形（★器を `overflow:visible` に して、
       ★ ★よこは body で 切る）を 入れました。★★8画面では 何も 変わらず 通りました。
     ★ ★★ところが ★**667×375 と 736×414 の 2画面だけ**、★★★画面が ひとりでに
       ★ ★**808×454／807×454 に 広がりました**（★Chrome が 中身に 合わせて 縮めた ため）。
     ★ ★調べると ―― ★**盤は もともと 807px あり、★667px の 画面から 140px はみ出して いました**
       ★ ★（★13ます × 58px）。★★これは 足す前から そうで、★器の `overflow:hidden` が
       ★ ★★だまって 切って いました【★T285-13 実測】。
     ★ ★★★＝ ★器の `overflow:hidden` は **飾りでは なく、仕事を して いました**。
       ★ ★外すと 盤の はみ出した ぶんだけ 画面が 広がる。★★だから `clip` の まま に します。
     ★ ★代金：★はば1180px を こえた 画面では ふたが 器の 外へ 出られません。
       ★ ★→ ★下の ④に 数字を 書いて あります（★社長に お聞きする 代金）。

   ★★★ かぶった 先に 何が いるか（★お題の 4つ目）★★★
     ★ ★帯の うしろに **空と まったく 同じ もの**を 敷きます（★`.topbar::before`）。
     ★ ★★ふたの 上の はしは、★すべって いない とき ちょうど **文書の 0px**に 来ます
       ★ ★（★ふたの 上 ＝ 帯の 上 − 器の 内よはく ＝ 0）。★だから **同じ グラデーションを
       ★ ★★同じ 起点で** 敷けば、★★★色の ゆらし（ディザ）まで ふくめて 1画素も 変わりません。
     ★ ★★★べた塗り 1色で 塗ったら **5481〜9767画素が 1ずつ ちがいました**【実測・T285-05】
       ★ ★ ―― ★Chrome の グラデーションは わずかに ゆらして 塗って いて、
       ★ ★★べた塗りは その ゆらしを 消して しまう から。★**写真が 教えました。**

   ★★★ すそ（帯の 下に たらす ぶん）は **0** に しました ★★★
     ★ ★はじめ ブラックジャックに ならって 4〜8px の すそを 付けたら、
       ★ ★★すべって いない ときに **中身を 8px 隠して いました**（★320px・912画素・
       ★ ★★★いちばん 大きい 色の さ **155**）【実測・T285-06】。
     ★ ★→ ★すそは 0。★「やめる」が 帯の 下に 4px 出る のは **いまと 同じ 見え方**なので、
       ★ ★そのまま 中身の 上に 出します（★足す前から そう 見えて います）。
   ============================================================ */

/* ★ `.app-shell{padding}` と `.topbar{height}` の 写し。★★ずれたら 見張りが 鳴きます。
   ★ ★--bar-over ＝ ★帯の **上**に はみ出す ぶん。★ここが この本 いちばんの つまずきでした：
     ★ ★「やめる」は 44px の 的を 取る ため、★36〜40px の 帯から **上に 4px** 出て います
       ★ ★（★追記⑩ アトの型「はみ出しは margin で そっくり返す」）。
     ★ ★★だから 帯を `top:0` で 止めると、★★★ボタンの 上 **4px が 画面の 外**に 出ます
       ★ ★（★実測・5画面で 上 −4px）。★→ ★止める 位置を その 4px ぶん 下げます。
     ★ ★代金は 4px ですが、★**帯の 中の あきを 使うだけ**なので 盤も 手札も 動きません。 */
:root { --bar-pad-x:20px; --bar-pad-top:15px; --bar-h:60px; --bar-over:0px; --bar-sky:158px; }
@media (max-width:650px) { :root { --bar-pad-x:8px; --bar-pad-top:9px; --bar-h:40px; --bar-over:4px; --bar-sky:105px; } }
@media (max-width:360px) { :root { --bar-pad-top:5px; --bar-h:36px; } }

/* ★ ①器の 切りかたは そのままに、「すべる 入れ物」を やめさせる */
.app-shell { overflow:hidden; overflow:clip; }

/* ★ ②帯を 画面に くっつける。
   ★ ★z-index は **20**。★この本には「指を のせた 手札」の `z-index:10` が いるので、
     ★ ★5 では 札が 帯の 上に 出て しまいます【★実測・style.css 64行】。 */
.topbar { position:sticky; top:var(--bar-over); z-index:20; }

/* ★ ③空と まったく 同じ ふた。★指は 取らず（pointer-events:none）、★帯の 中身より うしろ（z-index:-1）。
   ★ ★下の はしは 帯の 下（すそ 0）。★中身を 1pxも 隠しません。 */
.topbar::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:calc(-1 * var(--bar-pad-top)); bottom:0;
  left:calc(-1 * var(--bar-pad-x)); right:calc(-1 * var(--bar-pad-x));
  background:linear-gradient(180deg,#bcebf0 0 var(--bar-sky),#fff7e8 var(--bar-sky));
}

/* ★ ④器の **外がわ**は ふさいで いません（★社長に お聞きする 代金）。
   ★ ★はば1180px を こえた 画面では 器の 左右に あきが 出て、
     ★ ★すべった とき そこだけ クリーム色に なります（★1440×700・1280×620 で 実測）。
   ★ ★ふさぐには body に 画面へ 貼りついた 1枚（`position:fixed`）が 要ります。
     ★ ★★試した ところ ―― ★**ページ中の 字が ぜんぶ 書き直されました**
     ★ ★★（★貼りついた 1枚が あると Chrome は 画面ごと 別あつかいに して、
     ★ ★★★字の ふちの ぼかし方が 変わる）。★320×568 で **5685画素・いちばん 大きい さ 84**。
   ★ ★★★＝ ★**パソコンの すみの 色 1つの ために、★字を 20万画素 書き直す**ことに なる。
     ★ ★だから 入れませんでした。★社長の お決めが あれば 入れます。 */
/* ★ ⑤ブラウザが 自分で 送る すべり（★focus や scrollIntoView）に「★帯の ぶん 空けろ」と 言う。
   ★ ★部品は 0個 増えません（★アト T279 と 同じ 手）。 */
html { scroll-padding-top:calc(var(--bar-over) + var(--bar-h) + 4px); }


/* ============================================================
   ★★★ T287 ―― ★①「◀ ゲームを選ぶ」を 44px に ／ ★③器の 外の クリーム色
   ★★★（★💻コーダ・2026-09-14・★社長のお決め「★3つとも 1（いま）」）★★★
   ★★ この かたまりも **七並べ 1本だけ**。★ほかの 19本は 1バイトも 触って いません。
   ============================================================ */

/* ------------------------------------------------------------
   ★★ ① ―― ★「◀ ゲームを選ぶ」が **足す前から 44px に 届いて いなかった**
   ------------------------------------------------------------
   ★ ★直す前【★実測・T287-01・★12画面・★遊んで いる とき】：
     ★ ★ ・★はば≥651px（★帯 60px）… ★**121.86 × 42.0px** ―― ★たてが **2px 足りない**
     ★ ★ ・★はば521〜650px（★帯 40px）… ★**97.14 × 36.0px** ―― ★たてが **8px 足りない**
     ★ ★ ・★はば≤520px（★帯 36/40px）… ★**44.0 × 36.0px** ―― ★たてが **8px 足りない**
     ★ ★★★12画面 ぜんぶ ✕。★T285 で 作った きずでは なく、★**その前から**でした。
   ★ ★★私たちは T277 で「やめる」を 44px で 作りました。★★となりの この ボタンだけが
     ★ ★★★決まり（★追記⑩「指の的 44×44」）を 割った まま 残って いました。

   ★★★ 帯も 盤も 1pxも 動かさない ための 手（★追記⑩ アトの型 ― ★T106/T107 の 形）★★★
   ★ ★`.topbar` の たては **固定**（60／40／36px）。★だから 中の ボタンが 44px に なっても
     ★ ★**帯は のびません**。★はみ出しを どっちに 返すかだけを 決めます。
   ★ ★ ・★はば≥651px（★帯 60px）… ★44px は まるごと 入る。★はみ出し **0**。
   ★ ★ ・★はば361〜650px（★帯 40px）… ★はみ出し 4px を ★**上に ぜんぶ 返す**（align-self:flex-end）。
   ★ ★★ 上には 空が 9px あります（★`.app-shell{padding-top:9px}`）。★★**下には 1pxも 出しません。**
   ★ ★★★ ＝ ★下に いる ハッピーの ふきだしに 1pxも さわらない（★T110 が 直した 折れを 戻さない）。
   ★ ★ ・★はば≤360px（★帯 36px）… ★はみ出し 8px。★上の 空は 5px しか ない ので
     ★ ★**上4px・下4px**（★`align-items:center` の まま ＝ ★`.quit-btn` と まったく 同じ ふるまい）。
     ★ ★★上の 4px は 5px の 空に 入る ので **切れません**。★★★`--bar-over` も **4px の まま**で よい
     ★ ★★（★すべった とき 帯が かくす px は **1pxも 増えません**）。

   ★ ⚠️★**`.howto`（？ 遊び方）と `.restart-mini` には さわって いません。**
     ★ ★この2つも 42/36px ですが、★社長の お指しは「◀ ゲームを選ぶ」1つ。
     ★ ★★3つ まとめて 太らせると 帯の 中の あきが 変わり、★★★題が 折れます（★T274 の しくじり）。
     ★ ★★★別の 仕事として お伝えします。
   ------------------------------------------------------------ */
.topbar .back { min-height:44px; }
/* ★ はば361〜650px ―― ★はみ出し 4px を 上へ（★下の ふきだしを 1pxも 動かさない） */
@media (max-width:650px) { .topbar .back { align-self:flex-end; } }
/* ★ はば≤360px ―― ★上の 空が 5px しか ない ので 上4/下4（★`.quit-btn` と 同じ） */
@media (max-width:360px) { .topbar .back { align-self:center; } }

/* ------------------------------------------------------------
   ★★ ③ ―― ★はば1180px を こえた 画面で、★すべると **器の 外だけ クリーム色**
   ------------------------------------------------------------
   ★ ★直す前【★実測・T287-01】：★1440×700 と 1280×620 と 1200×700 で
     ★ ★器の 外 **255,247,232（クリーム）**／★帯 **188,235,240（空）** ―― ★★ちがう。
     ★ ★（★1366×768 と 1920×900 は すべれる量が 少ないので もとから そろって いました）
   ★ ★わけ：★T285 の ふた（`.topbar::before`）は 器（`.app-shell`）の 中に いて、
     ★ ★★器は `overflow:clip` で 切って いる ので **器の 外へ 出られない**。
     ★ ★★★器は max-width:1180px。★それより 広い 画面では 左右に あきが 出ます。

   ★★★ T285 で 見つけた 代金（★字が 書き直される）は **払わずに 済みました** ★★★
     ★ ★T285 では「★body に **画面へ 貼りついた 1枚**（`position:fixed`）」を 試し、
       ★ ★★**ページ中の 字が ぜんぶ 書き直され**ました（★320×568 で 5685画素・さ84）。
     ★ ★→ ★今回は `fixed` では なく ★**`sticky`（★`body::before`）**に しました。
       ★ ★★`sticky` は **文書の 中に いる まま**なので、★Chrome は 画面ごと 別あつかいに しません。
       ★ ★★★この本は T285 から すでに `.topbar{position:sticky}` を 持って いて、
       ★ ★★それで **帯より 下が 1画素も 変わって いない**ことが 分かって います。
     ★ ★★実測は 下の 表（★作業メモ T287・6-③）。

   ★★★ 部品は 0個 増えて いません（★§5.5）★★★
     ★ ★HTML は 1バイトも 触って いません。★`body::before` は もとから ある body の かげ。

   ★★★ 中身は 1pxも 動きません ★★★
     ★ ★たて **0**に して います（★`height` と 同じだけ `margin-bottom` を マイナスに 返す）。
     ★ ★＝ ★ページの 高さも 盤の 位置も 変わりません【★実測・12画面＋広い5画面で 差 0】。

   ★★★ 色は「べた塗り」に しない ★★★
     ★ ★T285-05 の 記録：★べた塗り 1色は Chrome の **色の ゆらし（ディザ）を 消す**ので
       ★ ★5481〜9767画素が 1ずつ ちがいました。
     ★ ★→ ★ふたと **まったく 同じ 書き方**の グラデーションを、★**同じ 起点（文書の 0px）**から。
       ★ ★★`body{margin:0}` なので `body::before` の 上は ちょうど 文書の 0px です【実測】。

   ★★★ たかさは 「帯が 止まる 所 ＋ 帯の たかさ」 ★★★
     ★ ★＝ ★`calc(var(--bar-over) + var(--bar-h))`。★中の ふたの 下はしと **1pxも ずれません**。
     ★ ★はば1180px 以下では 左右の あきが 0 なので、★★**中の ふたに 完全に 隠れます**
       ★ ★（★＝ ★追記⑥の 12画面は 1画素も 変わらない。★実測で 裏を 取って います）。
   ------------------------------------------------------------ */
body::before {
  content:""; display:block; pointer-events:none;
  position:sticky; top:0; z-index:-1;
  height:calc(var(--bar-over) + var(--bar-h));
  margin-bottom:calc(-1 * (var(--bar-over) + var(--bar-h)));
  background:linear-gradient(180deg,#bcebf0 0 var(--bar-sky),#fff7e8 var(--bar-sky));
}


/* ============================================================
   ★★★ T290 ―― ★A案：★盤が 切れて いて、★しかも 見に 行けない 2画面を 直す
   ★★★（★💻コーダ・2026-09-14・★社長のお決め「★1. A案で 直す」）★★★
   ★★ この かたまりも **七並べ 1本だけ**。★ほかの 19本は 1バイトも 触って いません。
   ★★ 札は **1pxも 小さく して いません**（★追記③・★B案は 社長が 取りませんでした）。
   ============================================================ */

/* ------------------------------------------------------------
   ★★ ① ―― ★はば 651〜806px で、★盤を よこに すべらせる
   ------------------------------------------------------------
   ★ ★T287 で 数えた もの【★実測】：
     ★ ★ ・★盤は **13ます × 58px ＝ 754px**。★器の 左から **53px** の 所から 始まるので、
     ★ ★★盤の 右はしは いつも **文書の 807px**（★はば 651〜1180px の あいだ、★1pxも 動きません）。
     ★ ★ ・★だから ★**見えない px ＝ 807 − 画面の はば**。★★はば 807px 以上なら **0**。
     ★ ★ ・★はば ≤650px には **すべる しかけ**（`overflow-x:auto`）が もとから ありました。
     ★ ★★★＝ ★**はば 651〜806px だけが、★すべれない のに 切られて いた**（★38日間）。

   ★★★ 線は 811px では なく **806px** に しました（★私の T287 の 見立ての 直し）★★★
     ★ ★T287 で 私は「★811px まで 広げる」と 書きました。★★これは **大きすぎました**。
     ★ ★【★実測・T290-02・はば 645〜870px を 1pxずつ】：
       ★ ★ ・★はば **806px** … ★見えない **1px**（★まだ 切れて いる）
       ★ ★ ・★はば **807px** … ★見えない **0px**（★もう 切れて いない）
     ★ ★→ ★807〜811px まで すべる ように すると、★★**いま ぜんぶ 見えて いる 画面を
       ★ ★★「指で すべらせないと K が 見えない」画面に 変えて しまいます**（★＝ 改悪）。
     ★ ★★★社長の「★ほかの 10画面を 壊さない」に したがい、★**切れて いる はばだけ**に しました。

   ★ ⚠️★**はば 807〜839px では、★盤が 木のわくの 右へ 最大 20px はみ出します**【★実測・T290-02】。
     ★ ★（★812×375 は **15px**。★844×390 は **0px**）★★これは **見えない px では ありません**
     ★ ★ ―― ★画面には ぜんぶ 出て いて、★木のわくの 右の ふちだけが 札に かくれます。
     ★ ★★**今回は 直して いません。**★直すには この はばも すべらせる ことに なり、
     ★ ★★★いま 見えて いる K を「すべらないと 見えない」に して しまう から です。
     ★ ★★（★社長に お伝えする 別の しごとです）

   ★ ⚠️★**≤650px の かたまりは 1バイトも 触って いません。**★すでに すべれる 5画面
     ★ ★（★320×568／320×480／320×454／375×812／390×844）の 動きは **そのまま**です。
   ------------------------------------------------------------ */
@media (min-width:651px) and (max-width:806px) {
  /* ★ ≤650px と まったく 同じ 作法（★94行）。★部品は 0個 増えません。 */
  .table { overflow-x:auto; }
  .board-row { justify-content:start; min-width:calc(var(--card-w) * 13); }
}

/* ------------------------------------------------------------
   ★★ ② ―― ★T115 の しるし「★まだ こっちに つづくよ」
   ------------------------------------------------------------
   ★ ★T115（★七並べ・手札の 見切れ）で 私が 学んだ こと：
     ★ ★**「見切れて いる ことを 知らせる ものが 何も 無いと、遊ぶ人は 気づかない」**。
     ★ ★★T115 の ときは「詰めれば ぜんぶ 入る」ので しるしは 要りませんでした。
     ★ ★★★今回は ちがいます ―― ★**すべらないと 見えない**ので、★しるしが 無ければ
     ★ ★★**直した ことに なりません**（★社長の お言葉）。

   ★ ★【★実測・T290-01】★**しるしは いままで 1つも ありません でした** ―― ★すでに すべれる
     ★ ★5画面（★320×3・375×812・390×844）でも、★`.table-wrap` の ::before/::after は
     ★ ★★どちらも `content:none`。★★★＝ ★38日間、★**5画面も だまって 切って いました**。

   ★★★ どこに 置くか ―― ★**木のわくの 上に のせる**（★緑の 盤に かかるのを できるだけ 小さく）★★★
     ★ ★⚠️ ★ここで 私は **2回 まちがえました**。★★写真の 画素が 教えました【★T290-14】。
     ★ ★ ★まちがい：★「わくは 18px（ふとさ5＋内よはく13）。★しるしを 17px に すれば 0px」。
     ★ ★ ★本当：★**`right` は わくの "内がわの 箱"（padding box）から 数えます** ―― ★ふとさ 5px の
     ★ ★ ★★**外がわ**では ありません。★だから `right:-5px` は わくの 右はしと ぴったりで、
     ★ ★ ★★★緑に **7px** かかって いました（★＋ 緑の わく 3px を ふくむ）。
     ★ ★→ ★**5px ぶん 外へ ずらしました**（★`-5px` → `-10px`／★せまい画面は `-6px` → `-11px`）。
     ★ ★★数は 下の 表の とおり（★ぜんぶ 写真の 画素で 裏を 取って います）。

     ★ ★かくれるのは ★**もともと 切れて いる いちばん はしの 札**で、★しかも
     ★ ★★**そこまで すべれば しるしは 消えます**（★見たい ときには 邪魔を しません）。

   ★★★ 指は 取りません（`pointer-events:none`）★★★
     ★ ★この本の 盤の ますは 押す ところでは ありません（★手札を 押すと 自動で 置かれる）。
     ★ ★それでも、★しるしが 上に いる せいで 下が 押せなく なる ことが 無い ように します。

   ★★★ 中身は 1pxも 動きません ★★★
     ★ ★`position:absolute` なので 流れの 外。★ページの たかさも 盤の 場所も 変わりません
     ★ ★【★実測・12画面＋広い5画面で 差 0 ―― ★作業メモの 表】。

   ★★★ 字は 1つも 増えて いません（★§9.6）★★★
     ★ ★「よこに うごかせるよ」のような **注意書きは 1文字も 出しません**（★追記③
     ★ ★「★説明しない」）。★出すのは **やじるし 1つ**だけ。

   ★★★ やじるしは 字では なく **絵**で 描きます ★★★
     ★ ★「▶」の ような 字は、★入って いる フォントに よって **色つきの 絵文字**に
     ★ ★★化ける ことが あります。★→ ★中に 書いた SVG（data:）で 描きます。
     ★ ★★**外への 通信は 0件**（★data: は ページの 中の もの。★実測で 裏を 取ります）。
   ------------------------------------------------------------ */
.table-wrap::before,
.table-wrap::after {
  content:""; position:absolute; z-index:2; pointer-events:none;
  top:50%; margin-top:-23px;
  width:22px; height:46px;
  border:3px solid #996d40; border-radius:11px;
  background:#ffe681 center/13px 13px no-repeat;
  box-shadow:0 2px 0 rgba(86,53,38,.28);
  opacity:0; transition:opacity .18s;
}
/* ★ やじるし（★ピンク ＝ この本の「うごかす 色」。★--pink-deep と 同じ #E94F8A） */
.table-wrap::after {
  right:-10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='%23E94F8A' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.table-wrap::before {
  left:-10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' fill='none' stroke='%23E94F8A' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ★ 出るのは「その むきに まだ 続きが ある」ときだけ。★はしまで すべったら 消えます。 */
.table-wrap.more-right::after { opacity:1; animation:seven-yure-migi 1.15s ease-in-out infinite; }
.table-wrap.more-left::before { opacity:1; animation:seven-yure-hidari 1.15s ease-in-out infinite; }
@keyframes seven-yure-migi  { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
@keyframes seven-yure-hidari{ 0%,100% { transform:translateX(0); } 50% { transform:translateX(-3px); } }
/* ★ せまい画面：★木のわくが 9px しか ないので 小さくする（★18×38px）。
   ★ ★どこまで 外へ 出せるかは **画面の はしまで**。★-11px に したら 3px 出て、★見張りが 鳴きました。 */
@media (max-width:650px) {
  .table-wrap::before, .table-wrap::after { width:18px; height:38px; margin-top:-19px; border-width:2px; border-radius:9px; background-size:11px 11px; }
  .table-wrap::after { right:-8px; }
  .table-wrap::before { left:-8px; }
}
/* ★ 動きが にがてな人には ゆらしません（★344行と 同じ 決まり。★しるしは 消えません） */
@media (prefers-reduced-motion: reduce) {
  .table-wrap.more-right::after, .table-wrap.more-left::before { animation:none !important; }
}


/* ============================================================
   ★★★ T292 ―― ★① しるしが 札を かくすのを やめる ／ ★② 盤を 木のわくの 中に 収める
   ★★★（★🎨アト・2026-09-14・★社長のお決め ★①「1. アトに渡す」★②「1. いま直す」）★★★
   ★★ この かたまりも **七並べ 1本だけ**。★ほかの 19本は 1バイトも 触って いません。
   ★★ ★T290（コーダ）の しかけは **1つも 戻して いません**：
     ★ ★・★`overflow-x:auto` の **806px** の 線 …… ★1文字も 触って いません
     ★ ★・★T115 の しるし ……………………………… ★**消して いません**（★場所と 太さだけ 直す）
     ★ ★・★`suberu` の 見きわめ（★`overflow-x` を 先に 見る）… ★1文字も 触って いません
     ★ ★・★見張り `SEVEN.boardCheck()` ………………… ★目を **2つ 足した**だけ
   ★★ 札は **1pxも 小さく して いません**（★追記③）。★`--card-w` は 58px／≤650px で 38px の まま。
   ============================================================ */

/* ------------------------------------------------------------
   ★★ ① ―― ★しるしが「札の 面」に かぶらない ところまで 下がる
   ------------------------------------------------------------
   ★★★ まず、★T290 で 2回 まちがえた ところの **本当の からくり**を 書きます ★★★
     ★ ★`* { box-sizing:border-box }`（★33行）は ★**`::before`／`::after` には かかりません。**
     ★ ★★`*` は 擬似要素に 当たらないから です。★→ ★しるしだけ **content-box** で 描かれ、
     ★ ★★★`width:18px` ＋ `border:2px` は ★**本当は 22px**。★`width:22px`＋`border:3px` は **28px**。
     ★ ★【★写真の 画素で 裏取り・T292-01／02】★320×568 で しるしは **x294〜315 ＝ 22px**
     ★ ★（★CSS の 字は 18px）。★★4px の ずれが、★そのまま「札を かくす px」に なって いました。
     ★ ★→ ★**`box-sizing:border-box` を しるしにも かけました。**★これで CSS の 字と 本当の 大きさが 合います。
     ★ ★★（★T290 で コーダが 2回 まちがえたのも、★私が いま 直すのも、★もとは この 1行の 抜けです）

   ★★★ 数【★ぜんぶ 実測・T292-01・遊んで いる とき・盤は いちばん 左】★★★

   | ★画面 | ★札の 面の 右はし | ★しるしの 左はし（前） | ★かくす px（前） |
   |---|---|---|---|
   | ★320×568／480／454 | ★302 | ★294 | ★**8px** |
   | ★375×812 | ★355 | ★349 | ★**6px** |
   | ★390×844 | ★370 | ★364 | ★**6px** |
   | ★667×375 | ★626 | ★624 | ★**2px** |
   | ★736×414 | ★695 | ★693 | ★**2px** |

   ★★★ どこまで 下げられるか ―― ★**あきは これだけ しか ありません** ★★★
     ★ ★札の 面の 右はし から 画面の はし までの あき【★実測】：
     ★ ★ ・★はば ≤360px …… ★**18px**（★みどりのわく3 ＋ 木のわく 3+4 ＝ 7 ＋ 器の あき 8）
     ★ ★ ・★はば 361〜650px … ★**20px**（★みどりのわく3 ＋ 木のわく 5+4 ＝ 9 ＋ 器の あき 8）
     ★ ★ ・★はば 651〜806px … ★**41px**（★みどりのわく3 ＋ 木のわく 13+5 ＝ 18 ＋ 器の あき 20）
     ★ ★★＝ ★せまい画面では ★**しるしは 18px より 太く できません。**★いまは 22px。
     ★ ★★★→ ★**≤650px だけ 22px → 16px に します**（★>650px は **28px の まま**）。

   ★★★ ⚠️ ★**やじるしの 絵は 1pxも 小さく して いません** ★★★
     ★ ★`background-size` は ★**11px（≤650）／13px（>650）の まま**。
     ★ ★細く なったのは ★**まわりの 器（ふちと あき）だけ**です。★読む ところは 変わりません。

   ★★★ ゆれは ≤650px だけ 3px → 2px。★★数は **1か所（--sign-yure）だけ**に 書く ★★★
     ★ ★しるしの 右はしは 画面の はしから **2px**。★3px ゆれると **1px はみ出す**ので 2px に。
     ★ ★（★>650px は 12px あるので **3px の まま**）
     ★ ★⚠️★はじめ 私は ゆれの 数を ★**CSS と 見張りの 2か所**に 書き、★★見張りが
     ★ ★★**12画面中 10画面で 鳴きました**（★CSS 2px ／ 見張り 3px の 食いちがい）。
     ★ ★★★→ ★`--sign-yure` 1か所に して、★見張りは **それを 読みます**（★ずれようが ない）。
   ------------------------------------------------------------ */
:root { --sign-yure:3px; }
@media (max-width:650px) { :root { --sign-yure:2px; } }
@keyframes seven-yure-migi   { 0%,100% { transform:translateX(0); } 50% { transform:translateX(var(--sign-yure)); } }
@keyframes seven-yure-hidari { 0%,100% { transform:translateX(0); } 50% { transform:translateX(calc(-1 * var(--sign-yure))); } }
.table-wrap::before,
.table-wrap::after {
  box-sizing:border-box;                 /* ★ `*` は 擬似要素に 当たらない ―― ここで 明示する */
  width:28px; height:52px; margin-top:-26px;   /* ★ >650px：★前と **同じ 大きさ**（22+3+3／46+3+3） */
}
.table-wrap::after  { right:-13px; }     /* ★ 前 -10px。★3px 外へ。★札の 面から 1px はなれる */
.table-wrap::before { left:-13px; }
@media (max-width:650px) {
  .table-wrap::before, .table-wrap::after {
    width:16px; height:42px; margin-top:-21px; border-radius:8px;   /* ★ 前 22×42。★よこだけ 6px 細く */
    /* ★ background-size は T290 の 11px の まま ―― ★やじるしは 1pxも 小さく しない */
  }
  .table-wrap::after  { right:-10px; }   /* ★ 前 -8px。★札の 面の 右はしに ぴたりと 付く（★かぶり 0px） */
  .table-wrap::before { left:-10px; }
}

/* ------------------------------------------------------------
   ★★ ② ―― ★はば 807〜860px で、★盤を 木のわく（と みどりの 盤）の 中に 収める
   ------------------------------------------------------------
   ★★★ 何が 起きて いたか【★ぜんぶ 実測・T292-03・はば 640〜880px を 1pxずつ】★★★
     ★ ★盤は **13ます × 58px ＝ 754px**。★はば 861px までは 左はしが いつも **文書の 53px**
     ★ ★（★器20 ＋ 木のわく 5+13 ＋ みどり 3+12 ＝ **53px**）なので、★右はしは いつも **807px**。

   | ★はば | ★木のわくから 右へ 出る | ★みどりの 盤から 右へ 出る |
   |---|---|---|
   | ★**807** | ★**20px**（★いちばん 大きい） | ★**41px** |
   | ★**812**（★追記⑥の 検査画面） | ★**15px** | ★**36px** |
   | ★826 | ★1px | ★22px |
   | ★**827** | ★**0px** ←★ここで 木のわくには 収まる | ★21px |
   | ★**844**（★追記⑥の 検査画面） | ★0px | ★**4px** |
   | ★**848** | ★0px | ★**0px** ←★ここで みどりにも 収まる |

     ★ ★⚠️★T290 の 書きおきは「★807〜839px」と なって いますが、★★私が 1pxずつ 測ると
     ★ ★★**木のわくから 出るのは 807〜826px**（★827px で 0）でした。★★★数字は 上の 表が 正です。
     ★ ★★そして ★**本当の 傷は もう 20px 広い** ―― ★はば **807〜847px** では
     ★ ★★★みどりの 盤からも 札が はみ出して、★**木のわくの 上に 札が 乗って いました**
     ★ ★（★はば 651〜806px では `overflow-x:auto` が 切るので 乗りません。★807px から 切る ものが
     ★ ★★無くなり、★そのまま 木に 乗ります）。

   ★★★ なぜ「すべらせる」で 直さないか ★★★
     ★ ★はば 807〜847px の「見えない px」は ★**いま 0**【★実測】。★すべらせると 木のわくが
     ★ ★★切る ように なり、★**0 だった 見えない px が 20〜41px に 増えます** ＝ ★改悪。
     ★ ★★★社長の お決め「★見えない px を 増やさない」に 反します。★→ ★**器のほうを ゆずる**。

   ★★★ どれだけ ゆずれば 入るか（★計算 ―― ★上の 実測から）★★★
     ★ ★盤 754px が みどりの 中に 入る 条件 ＝ ★**(はば − 札の まわりの 器 × 2) ≧ 754**。
     ★ ★いちばん きびしいのは ★**はば 807px**：★器は 片がわ **26.5px** までしか 使えません。
     ★ ★★いまは **53px**（★器20 ＋ 木5+13 ＋ みどり3+12）。★→ ★**25px に します**：
     ★ ★★★器 **8** ＋ 木のわく **4+5** … ではなく ★**木のわくの ふとさ 5 は そのまま**、
     ★ ★★内よはくだけ 13→**5**、★みどりの 内よはく 12→**4**、★器 20→**8**
     ★ ★★★＝ ★8 + 5 + 5 + 3 + 4 ＝ ★**25px**（★はば 804px から 入る）。
     ★ ★★**ぜんぶ「あき」だけ**を けずって います ―― ★札も 字も わくの ふとさも 1pxも 小さく しません。
     ★ ★★★8／5／4 は ★**≤650px（スマホ）で もう 使って いる 数**です（★新しい 作法を 増やしません）。

   ★★★ 上の はしを **860px** に した わけ ★★★
     ★ ★861px から 盤は まん中に 並び はじめます【★実測】。★860px で 器を 25px に すると、
     ★ ★★盤の 左はしは ★**53px ―― 861px の ときと 1pxも 同じ**に なります。
     ★ ★★★＝ ★この 境目で ★**札は 1pxも 動きません。**★動くのは 木のわくの 外がわの ふちだけ
     ★ ★（★860px で 8px・861px で 20px ＝ **12px の 段**）。★**代金は これ 1つ**で、
     ★ ★★下に 正直に 書きます（★§10）。★★はば 860〜861px の 窓は 追記⑥の 12画面に ありません。

   ★ ⚠️★**`--bar-pad-x` は `.app-shell{padding}` の 写しです**（★626行・T285）。
     ★ ★ずれると ★**T285 の 見張りが 鳴きます**（★ふたが 画面の よこ いっぱいに ならない）。
     ★ ★→ ★ここでも **かならず 同じ 数**を 入れます。★（★私は これを 先に 読んで 助かりました）
   ------------------------------------------------------------ */
@media (min-width:807px) and (max-width:860px) {
  :root { --bar-pad-x:8px; }                                  /* ★ 下の .app-shell の 写し（★T285） */
  .app-shell { padding-left:8px; padding-right:8px; }         /* ★ 20px → 8px（★たては 触らない） */
  .table-wrap { padding-left:5px; padding-right:5px; }        /* ★ 13px → 5px（★ふとさ 5px は そのまま） */
  .table { padding-left:4px; padding-right:4px; }             /* ★ 12px → 4px（★ふとさ 3px は そのまま） */
}


/* ============================================================
   ★★★ T294 ―― ★七並べに のこって いた **44px割れ 4個**を 消す
   ★★★（★🎨アト・2026-09-14・★社長のお決め「★1. やる」）★★★
   ★★ この かたまりも **七並べ 1本だけ**。★ほかの 19本は 1バイトも 触って いません。
   ★★ ★見た目は **1pxも 太らせて いません**。★だから ★★帯の 中の あきは 1pxも 変わらず、
      ★★★題（.brand）は **1行も 増えません**（★これが コーダ T287 の 心配でした）。
   ------------------------------------------------------------
   ★ ★数え直した 結果【★実測・T294-01・★12画面 × 4場面】：
     ★ ★ ・★`？ 遊び方`（`.howto`）      … ★**73.84×36**（≤650px）／★**94.52×42**（≥651px）… ★24とおり ✕
     ★ ★ ・★`×`（`.close-dialog`）       … ★**34.69×29** … ★12とおり ✕
     ★ ★ ・★`分かった！`（`.dialog-ok`）  … ★**127.31×38** … ★12とおり ✕
     ★ ★ ・★`もう一度遊ぶ`（`#resultRestart`・★同じ `.dialog-ok`）… ★**144.31×38** … ★12とおり ✕
     ★ ★★＝ ★**4個・のべ 60とおり。**（★「3個」では ありませんでした ―― ★§1 に 正直に 書きました）
     ★ ★ ※ ★`パスする`（320×480・320×454）と ★`ゲームを始める`（568×320）も 44px を 割りますが、
     ★ ★  ★★**すべらせれば 44px に 戻ります**【★実測・T294-02】。★T288 が 67個から 外した 23個と 同じ たぐい。

   ★★★ 直しかた ―― ★**T118 の「見えない 押し代」**（★フリーセルが 20本の 中で 先に 持って いた 型）
     ★ ★`::after` は **ならびに 入りません**。★だから ★★帯も 箱も 盤も **1pxも 伸びません**。
     ★ ★★コーダの 心配（★T287：「★3つ まとめて 太らせると 帯の 中の あきが 変わり、★★題が 折れる」）は、
     ★ ★★★**見た目を 太らせない**ことで 根から 消えます。★数字でも 見張ります（★game.js の `t294Check`）。

   ★ ⚠️★**`z-index:0` を かならず 添えます**（★アトの T289 §3-②）。
     ★ ★`position:relative` だけを 足すと、★**200px 下の 丸かどが 色 1つぶん ずれる**ことが あります。
     ★ ★（★ホールデムで 27画素。★`z-index:0` で 0画素に 戻りました）

   ★ ⚠️★★**`<dialog>` の 既定 `overflow:auto` は `showModal()` の ときだけ**【★コーダ T291 §0 の 実測】。
     ★ ★うちの 遊び方の 箱も 結果の 箱も `showModal()` です。★★＝ ★**箱の 外に 出た 押し代は 切られます。**
     ★ ★だから `×` だけ **まん中ぞろえに して いません**（★下に わけを 書きます）。
   ============================================================ */

/* ★ ① `？ 遊び方` ―― ★よこは もう 足りて いる（73.84／94.52px）ので **たてだけ** 44px に。
   ★ ★はみ出す 先：★上は 帯の 中の あき（★`.app-shell{padding-top}` 5〜15px）、
   ★ ★           ★下は 帯の すぐ 下の あき。★★どちらにも **押せる ものは いません**【★実測・T294-04】。
   ★ ⚠️★`.restart-mini` には さわって いません（★この本の HTML に もう 出て きません。
   ★ ★  ★遊びの 中の「やめる」は `.quit-btn`＝`#restartBtn` で、★T277 で すでに 44px です）。 */
.topbar .howto { position:relative; z-index:0; }
.topbar .howto::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ ② `×`（遊び方を 閉じる）―― ★見た目 34.69×29 の まま、★的だけ 44×44。
   ★ ★★まん中ぞろえに **しない** わけ（★あとから 読む 人へ）：
   ★ ★ この `×` は `top:7px`・たて **29px**。★まん中ぞろえだと 押し代の 上が
   ★ ★ ★7 + 14.5 − 22 ＝ **−0.5px** ―― ★★箱の **外**に 出て、★`overflow:auto` に 切られます。
   ★ ★ （★大富豪も まったく 同じ ところで つまずきました ―― ★T289 §3-①）
   ★ ★→ ★**上を 箱の 内がわに 置く**（`top:-2px` ＝ 箱の 上から 5px）。★下へ 44px 取ります。
   ★ ★  ★★見た目の `×` は **1pxも 動いて いません**（★`::after` は 絵を 持ちません）。
   ★ ⚠️★親は すでに `position:absolute` なので `position:relative` は 要りません。 */
.close-dialog::after {
  content:''; position:absolute; left:50%; top:-2px;
  width:44px; height:44px; transform:translateX(-50%);
}

/* ★ ③ `分かった！` と `もう一度遊ぶ` ―― ★どちらも `.dialog-ok`。★見た目 38px の まま、たてだけ 44px。
   ★ ★上の あき：★遊び方の 箱は `dialog ol{margin-bottom:22px}`、★結果の 箱は `.cheer{margin-bottom:16px}`。
   ★ ★下の あき：★どちらも `dialog{padding-bottom:24px}`。★★上下 3px ずつでは **どちらにも 当たりません**。
   ★ ★よこは 127.31／144.31px で もう 足りて います。

   ★★★ ここだけ `top:50%` を 使いません ―― ★**わなが ありました**（★T294 で 見つけた・★記録）★★★
   ★ ★絶対位置の 子の もとは ★**ふちの 内がわ（padding box）**です（★T289 §3-③ の 続き）。
   ★ ★この ボタンは `border-bottom:4px`（★下だけ ふちが ある）ので、
   ★ ★ ★**ふちの 内がわの まん中は、見た目の まん中より 2px 上**に なります。
   ★ ★→ ★`top:50%` ＋ `translateY(-50%)` だと 押し代は ★**上 5px・下 1px**の いびつな 形に なり、
   ★ ★ ★★箱の 外に いる `はじめる` や `ロボットの数` の ふちに **2px かぶりました**
   ★ ★ ★（★320×454 と 926×428 で ★私の 見張りが 鳴きました。★★どちらも 箱が 開いて いる あいだは
   ★ ★ ★★押せない ものですが、★**鳴った ものを 鳴らない ことに しません**）。
   ★ ★→ ★**`top:-3px` ＋ `height:44px`** に しました。★見た目 38px の 上下に **3px ずつ** ＝ ★ちょうど 44px。
   ★ ★ ★ふちの 太さに 左右されません。★★見張り（`t294Check` の ｄ）が 見た目 38px を 数えて いるので、
   ★ ★ ★★ボタンの たかさを 変えた 人が いれば **そこで 鳴きます**。 */
.dialog-ok { position:relative; z-index:0; }
.dialog-ok::after {
  content:''; position:absolute; left:0; right:0;
  top:-3px; height:44px;
}