/* ============================================================ 大富豪（だいふごう）― ブラゲ工房 ／ 第1段の 見た目 ------------------------------------------------------------ ・色・かたちは 七並べ／ブラックジャックと そろえてある （設計図 §9.5 ＝ パステル・丸ゴシック・白い角丸カード）。 ・第1段は「まず 遊べる」ところまで。仕上げは 🎨アトが やります。 あとから かざりやすい ように、部品ごとに 見出しを 入れてあります。 ============================================================ */ :root { --ink:#463c52; --pink: #FF8CB8; --pink-deep: #E94F8A; --pink-dark: #C43A73; --pink-soft: #FFE3EF; --white: #ffffff; --cream: #fff9ea; --gold: #F1A426; --gold-soft: #FFE690; --mint: #6FC98C; --mint-soft: #DCF6E4; --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; /* カードは 419×635（比率 2:3）。この ひりつは ぜったいに くずさない。 */ --card-w:62px; --card-h:calc(var(--card-w) * 635 / 419); } * { box-sizing:border-box; } 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; } button { font-family:inherit; cursor:pointer; } .hidden { display:none !important; } .sprite-defs { position:absolute; width:0; height:0; overflow:hidden; } .app-shell { max-width:1000px; margin:0 auto; padding:12px 14px 26px; } /* ── 上の帯 ───────────────────────────── */ .topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; height:56px; } .back, .howto { display:inline-flex; align-items:center; min-height:40px; padding:0 13px; font-size:12.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; } .back:hover, .howto:hover { border-color:var(--pink); } /* ★★ T277 ― 題は「まん中」に 置きつづける ★★ ★ 上の帯に 4つめ（↻ やめる）が 増えました。★space-between の ままだと ★★題と「？ 遊び方」が 左へ 122px も 寄ります【★アト実測・1280px】。 ★ 題に あまりを ぜんぶ もたせて、★中で まん中に そろえる かたちに しました。 ⚠️★ min-width:0 は 書きません ―― ★書くと 題が 中身より 小さく なれて、 ★★「大富豪」が たてに 折れます（★T273 で 見つけた 折れ）。 */ .brand { flex:1 1 auto; display:flex; align-items:flex-end; justify-content:center; gap:6px; font-weight:900; font-size:29px; color:#59435e; text-shadow:0 2px #fff; } .brand-cat { width:38px; height:29px; transform:rotate(-9deg); } .brand small { font-weight:400; font-size:11px; color:#8d6d72; margin:0 0 8px 2px; } /* ★★★ T277 ―「↻ やめる」（★アトの 型・T273 §2 ／ 設計図 追記⑩）★★★ ------------------------------------------------------------ ★ 置き場所 … ★上の帯の いちばん 右。★遊んで いる あいだ だけ 出ます。 ★ 大きさ … ★指の的 44×44 を **本当に** 取ります。 ★もとの ボタンは 66×31／76×34px ―― ★★44px に 1回も ★届いて いません でした【★T273・T277 実測】。 ★ はみ出し … ★この本の 上の帯は **height を 数字で 決めて** います （56／40／32／30px）。★44px の 子を 入れても ★★帯の 高さは 1pxも 動きません【★T277 実測 13画面】。 ★はみ出しは align-self:flex-start で ★**下だけ**に 出します （★上下に 半分ずつ 返すと、320×568 では 画面の 上に 2px 出て ★★指の的が 42px に 減ります）。 ★ 色 … ★うすみどり。★20本の 上の帯で ★空いて いた 唯一の 色【T273 §2 実測】 （★白は 20本ぜんぶの「もどる」、★黄は 6本で「？ 遊び方」に 使用中）。 ⚠️★ position:relative; z-index:2 は 飾りでは ありません。★これが 無いと ★はみ出した ぶんを あとから 来る 兄弟が 上書きし、★指の的が ★★36〜42px に 減ります【★T273 §4-1 実測】。 ------------------------------------------------------------ */ .quit-btn { position:relative; z-index:2; order:99; flex:0 0 auto; align-self:flex-start; 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; } /* ★ はば 374px 以下（★320級の 端末）は 字を 1段 下げ、★↻ を 落とします。 ★ こうしても 指の的は 47×44px です【★T277 実測・320×568】。 */ @media (max-width:374px) { .quit-btn { font-size:10.5px; padding:0 5px; } .quit-btn .quit-icon { display:none; } } /* ★★ はば 520px 以下は「◀ ゲームを選ぶ」を「◀」だけに します ★★ ★ 社長のお決め②「1. その手当てで いい」（★ババ抜き・リバーシと 同じ 形）。 ★ 代金：★せまい 画面では「ゲームを選ぶ」の 字が 見えなく なります。 ★★代わりに 題が たてに 折れなく なります【★T273 実測・4本とも】。 */ @media (max-width:520px) { .back .back-word { display:none; } .back { min-width:44px; justify-content:center; padding:0 10px; } } /* ── スタート画面 ─────────────────────── */ .start-screen { position:relative; display:grid; justify-items:center; padding:18px 0 40px; } .cloud { position:absolute; color:#fff; font-size:70px; opacity:.8; } .cloud-one { top:2%; left:4%; } .cloud-two { bottom:12%; right:5%; font-size:52px; } .start-card { position:relative; z-index:1; width:min(560px,100%); text-align:center; background:var(--white); border:5px solid var(--pink-soft); border-radius:30px; padding:26px 24px 24px; box-shadow:0 10px 0 rgba(196,58,115,.12); } .eyebrow { color:#ff759d; font-weight:900; margin:0; font-size:15px; } .start-card h1 { font-weight:900; font-size:60px; color:#5a9d72; letter-spacing:3px; margin:4px 0 0; text-shadow:0 4px #285e46, 0 7px #e3ffd7; } .start-card h1 span { color:#ff769b; font-size:42px; vertical-align:8px; } .intro { margin:4px 0 18px; font-size:17px; font-weight:700; } .preset-block { background:var(--cream); border:3px solid #F6E4C0; border-radius:20px; padding:12px; } .preset-title { margin:0 0 9px; font-weight:900; font-size:15px; color:#8a6a4e; } .presets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .preset { display:grid; gap:2px; padding:11px 6px; border-radius:16px; background:var(--white); border:3px solid var(--pink-soft); color:var(--pink-dark); } .preset b { font-size:16px; font-weight:900; } .preset small { font-size:10.5px; color:#957c86; font-weight:700; } .preset.on { background:var(--pink); border-color:var(--pink-dark); color:#fff; box-shadow:0 4px 0 var(--pink-dark); } .preset.on small { color:#ffe6f0; } /* ── ルールを じぶんで えらぶ（折りたたみ・器） ── */ .rule-fold { margin-top:14px; text-align:left; } .rule-fold > summary { list-style:none; cursor:pointer; padding:10px 13px; border-radius:14px; background:var(--pink-soft); color:var(--pink-dark); font-weight:900; font-size:14px; } .rule-fold > summary::-webkit-details-marker { display:none; } .rule-fold > summary b { font-weight:700; font-size:12px; color:#96788a; } .rule-list { margin-top:10px; display:grid; gap:10px; } .rule-group { border:3px solid #EFE6F2; border-radius:16px; padding:9px 11px; } .rule-group h4 { margin:0 0 6px; font-size:13.5px; color:#7a6a86; } .rule-group.warn { border-color:#F5D98B; background:#FFF8E2; } .group-note { margin:-2px 0 7px; font-size:11px; color:#a08b4d; } .rule-row { display:grid; grid-template-columns:22px 1fr; gap:2px 7px; align-items:center; padding:5px 2px; } .rule-row input { grid-row:span 2; width:20px; height:20px; accent-color:var(--pink-deep); } .rule-name { font-weight:900; font-size:13.5px; } .rule-desc { grid-column:2; font-size:11px; color:#8b7d92; line-height:1.4; } .rule-row.not-ready { opacity:.62; } .soon { display:inline-block; margin-left:5px; font-style:normal; font-size:9.5px; font-weight:700; color:#8a7a55; background:#F3E9CE; border-radius:999px; padding:1px 6px; vertical-align:1px; } .rule-buttons { display:flex; gap:8px; margin-top:10px; } .rule-buttons button { flex:1; min-height:38px; border:3px solid var(--pink-soft); background:var(--white); border-radius:999px; font-weight:900; font-size:12.5px; color:var(--pink-dark); } .rule-note { margin:8px 2px 0; font-size:11px; color:#9b8ba2; } .start-button { /* display:grid は ブロックの 箱なので、親の text-align:center では 中央に 来ない。 上の 2つの 箱（プリセット・ルール）と 同じ 幅いっぱいに そろえる（＝中央ぞろえも 不要になる）。 */ margin-top:20px; width:100%; display:grid; gap:1px; padding:12px 26px 10px; background:linear-gradient(180deg,var(--pink),var(--pink-deep)); border:0; border-radius:50px; color:#fff; font-weight:900; font-size:21px; box-shadow:0 7px 0 var(--pink-dark); } .start-button small { font-size:11.5px; font-weight:700; color:#ffe6f0; } .start-button:active { transform:translateY(4px); box-shadow:0 3px 0 var(--pink-dark); } .tip { margin:14px 0 0; font-size:12.5px; color:#896c71; } .mascot { position:relative; margin-top:16px; display:grid; justify-items:center; } .mascot .bubble { margin:0 0 6px; padding:7px 14px; font-size:14px; font-weight:900; color:var(--pink-dark); background:var(--white); border:3px solid var(--pink); border-radius:18px; } .cat-face { width:76px; height:58px; } .cat-name { margin:2px 0 0; font-size:11px; font-weight:900; color:var(--pink-dark); } /* ── ゲーム画面：上の おしらせ ───────────── */ .status-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:2px 0 8px; } .turn-badge { padding:7px 13px; border-radius:999px; background:var(--pink); color:#fff; font-weight:900; font-size:13.5px; } .score-chip { padding:7px 12px; border-radius:999px; background:var(--gold-soft); color:#7d6321; font-weight:900; font-size:12.5px; } .mini-btn { min-height:34px; padding:0 11px; border:3px solid var(--pink-soft); background:var(--white); border-radius:999px; font-size:11.5px; font-weight:900; color:var(--pink-dark); } .mini-btn:last-of-type { margin-left:auto; } .talk { flex:1 0 100%; display:flex; align-items:flex-start; gap:10px; } .cat-wrap { width:64px; flex:0 0 auto; text-align:center; } .cat-wrap .cat { width:100%; height:auto; } .talk .banner { position:relative; flex:1; min-width:0; padding:8px 13px; background:var(--white); border:3px solid var(--pink); border-radius:18px; } .talk .banner::before { content:''; position:absolute; left:-17px; top:18px; border-style:solid; border-width:9px 17px 9px 0; border-color:transparent var(--pink) transparent transparent; } .cat-line { display:block; font-size:15px; font-weight:900; color:var(--pink-dark); } .talk .banner p { margin:2px 0 0; font-size:13px; } .face-happy { display:none; } .talk[data-mood="win"] .face-normal { display:none; } .talk[data-mood="win"] .face-happy { display:block; } .talk[data-mood="win"] .banner { border-color:var(--mint); } .talk[data-mood="win"] .banner::before { border-right-color:var(--mint); } .talk[data-mood="win"] .cat-line { color:#1F7A45; } /* ── ★ つよさ・むき の 帯（第2段A）───────── かくめい／Jバックで つよさが ぎゃくに なったら、ここの ならびが その場で 入れ替わる。 飾りでは なく「いま どっちが つよいか」を 見せる 部品なので、けさない こと。 */ .flag-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 0 8px; } .flag { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:900; white-space:nowrap; background:var(--white); border:2px solid #EFE2C6; color:#7a6a86; } .flag small { font-size:10px; font-weight:700; opacity:.85; } .flag-order { font-family:Georgia,serif; letter-spacing:.4px; color:#6b5f74; } .flag-order.rev { background:#3C2D4E; border-color:#2A1E38; color:#FFE690; } .flag-rev { background:linear-gradient(180deg,#FFD86B,#F5A623); border-color:#C97C0C; color:#4a3208; } .flag-back { background:var(--mint-soft); border-color:var(--mint); color:#22694a; } .flag-dir { background:#EAF3FB; border-color:#B8D2E6; color:#3c6083; } .flag-dir.on { background:#4F86C6; border-color:#33608F; color:#fff; } /* ★T102：ここに あった `animation:flagPop` を けした。 renderFlags() は 1手ごとに #flagRow の innerHTML を まるごと 作り直す ので、 バッジ本体に アニメを つけると 毎手 さいせいされて「ぴこぴこ」に なる（T101・社長指摘）。 ⚠️ バッジが うごいて よいのは「出た しゅんかん・中身が かわった しゅんかん」だけ。 その 1回は `.flag.is-new`（①-1 の badgeIn）が うけもつ。ここには 二度と 書かない こと。 */ /* ★ しばり バッジ（第2段B・ルルの じょうけん） 「いま なにに しばられているか」を つねに 見せる。 ⚠️ これを 消すなら しばりの ルールも 消すこと（バッジが しばりの 半分）。 ★T102：`animation:flagPop` を けした（りゆうは 上の .flag-rev の コメント）。 */ .flag-lock { background:linear-gradient(180deg,#C9A7F0,#9B6BD8); border-color:#7A49B8; color:#fff; } .flag-lock small { color:#F2E6FF; } /* ★ みやこおち バッジ（じぶんが ねらわれている とき） ★T101：登場アニメは 付けない。renderFlags() が 1手ごとに innerHTML を 作り直す ため、 アニメが あると 毎回 再生されて「ぴこぴこ」に 見える（ロボット側で 社長指摘）。静止で 出しっぱなし。 */ .flag-crown { background:linear-gradient(180deg,#FFD86B,#F08A2E); border-color:#C4620B; color:#4a2c08; } .flag-crown small { color:#5c3a10; } /* ── ロボット3人 ───────────────────────── */ .players { display:flex; justify-content:space-around; gap:8px; padding:4px 0 8px; } .cpu { flex:1; min-width:0; text-align:center; position:relative; padding:6px 2px 4px; border-radius:16px; border:3px solid transparent; } .cpu.is-turn { border-color:var(--gold); background:#FFFBEA; } .cpu.is-rest { opacity:.5; filter:grayscale(.7); } .cpu.is-done { opacity:.85; background:var(--mint-soft); border-color:var(--mint); } /* ★ みやこおち：ねらわれている ロボットの 上に つねに 出す 印（§8-2） ★T101（社長指示）：文字入りの ふだ を やめ、王冠👑だけ。背景・わく も 無し。 */ .crown-warn { display:block; margin:0 auto 3px; width:fit-content; font-size:16px; line-height:1; } .cpu-name { font-size:13px; font-weight:900; } .cpu-name small { display:block; color:#ef5c86; font-size:11px; font-weight:700; } .cpu.is-done .cpu-name small { color:#2f7a4d; } /* ロボットの 伏せ札（T22 で 社長に ご指摘いただいた 形を そのまま） 札は ぜんぶ カード1まいぶんの 大きさ（419:635）にして、左マージンを マイナスで かさねる。 かさなるのは 左がわ どうしなので、いちばん 右の 1まいは かならず まるごと 見える。 */ .cpu-cards { display:flex; justify-content:center; align-items:flex-end; min-width:0; padding-top:4px; gap:0; } .cpu-card { --back-h:58px; --back-step:8px; flex:0 0 auto; width:calc(var(--back-h) * 419 / 635); 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; } .cpu-card:first-child { margin-left:0; } /* ── ばの カード ───────────────────────── */ .table-wrap { padding:14px 13px 10px; border-radius:23px; position:relative; background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 8px), #82ce84; border:5px solid #3f863f; box-shadow:0 7px 0 rgba(86,53,38,.2); } .table-ribbon { position:absolute; z-index:3; top:-15px; left:50%; transform:translateX(-50%); padding:4px 18px; background:#ffe681; border:3px solid #996d40; border-radius:30px; color:#75513c; font-weight:900; font-size:12px; white-space:nowrap; } .field { min-height:calc(var(--card-h) + 10px); display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; padding:6px 0; } .field-empty { margin:0; color:#215c2b; font-weight:900; font-size:14px; background:rgba(255,255,255,.75); border-radius:14px; padding:9px 15px; } .field-who { margin:0; text-align:center; min-height:17px; font-size:11.5px; font-weight:900; color:#eafbea; } /* ── てふだ ─────────────────────────── */ .hand-area { margin-top:14px; padding:8px 13px 11px; background:#fffdf5; border:3px solid #f4dfbd; border-radius:20px; box-shadow:0 5px 0 rgba(193,153,112,.2); } .hand-heading { display:flex; align-items:center; justify-content:space-between; color:#755a5c; font-weight:900; font-size:14px; } .hand-heading small { color:#ec5a86; } /* 13〜14まい。よこスクロールは 出さず、はいらない ぶんは 下の だんへ おりる。 */ .hand { min-height:calc(var(--card-h) + 14px); display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:6px 5px; padding:8px 2px 2px; } .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; } .card .face-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .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; } /* ★ ハイライト 3じょうたい（§7-1） だせる … 金の わく（この1まいから はじめられる） いっしょに だせる … みどりの わく（えらんでいる ものに 足せる） だせない … うすい グレー（押せない） */ .hand .card { transition:transform .14s, filter .14s, box-shadow .14s; } .hand .card.can-play { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft),1px 3px 2px rgba(49,41,42,.35); } .hand .card.can-join { border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-soft),1px 3px 2px rgba(49,41,42,.35); } .hand .card.selected { border-color:var(--pink-deep); box-shadow:0 0 0 4px var(--pink),0 6px 6px rgba(49,41,42,.3); transform:translateY(-12px); z-index:5; } .hand .card:hover:not(:disabled) { transform:translateY(-7px); z-index:6; } .hand .card.selected:hover { transform:translateY(-14px); } .hand .card:disabled { cursor:not-allowed; filter:brightness(.86) saturate(.65); } /* ★ あがりきんしで「とまる」ふだ（第2段B） 押せなくは しない ―― 押したら りゆうが 出る。 「なぜか だせない」を つくらない ための 見た目なので、けさない こと。 */ .hand .card.cant-finish { border-color:#E0575F; box-shadow:0 0 0 3px #FFD9DC,1px 3px 2px rgba(49,41,42,.35); filter:grayscale(.45) brightness(.94); } .hand .card.cant-finish::after { content:'🚫'; position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.35); } /* ジョーカーが なにに なっているか（→♠7）。えらんだ ときと ばに 出た ときに 見える。 */ .wild-tag { position:absolute; left:2px; right:2px; bottom:2px; z-index:4; font-style:normal; font-family:var(--font-main); font-size:9.5px; font-weight:900; line-height:1.5; text-align:center; color:#fff; background:var(--pink-deep); border-radius:4px; } /* ジョーカーの かいしゃくが 2つ いじょう ある ときだけ 出る きりかえ */ .alt-button { display:block; margin:8px auto 0; min-height:38px; padding:0 16px; border:3px solid var(--gold); background:var(--gold-soft); color:#7d6321; border-radius:999px; font-weight:900; font-size:12.5px; } .actions { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; } .play-button, .pass-button { display:grid; gap:1px; min-width:150px; min-height:52px; padding:8px 22px 6px; border:0; border-radius:999px; color:#fff; font-weight:900; font-size:18px; } .play-button small, .pass-button small { font-size:11px; font-weight:700; opacity:.92; } .play-button { background:linear-gradient(180deg,var(--pink),var(--pink-deep)); box-shadow:0 6px 0 var(--pink-dark); } .pass-button { background:linear-gradient(180deg,#9FB3C8,#7A90A8); box-shadow:0 6px 0 #5F7488; } .play-button:active:not(:disabled), .pass-button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.25); } .play-button:disabled, .pass-button:disabled { filter:grayscale(.75); opacity:.55; cursor:not-allowed; } /* ★ あがりきんし 2だんめ：だせるけど いちばん下に なる ときの きいろい けいこく（§3-6） */ .play-button.is-warn { background:linear-gradient(180deg,#FFD055,#F0A21E); box-shadow:0 6px 0 #B7740C; color:#4a3208; } .play-button.is-warn small { color:#6b4a10; } /* ── ルールが はつどうした ときの おしらせ ── */ .rule-flash { /* ★T100①（社長指示）：まえは 画面まん中（position:fixed・top:38%）に 出て いて、 場の 札に かぶって いた（実測 41%・T98 §6-2）。場（table-wrap）の 中に 引っこして、 「場の 上のふち」に くっつける。box の 下のはしが 場のわく 28px の ところ ＝ みどりの 布の 札には とどかない（★T100-2で 場が 1.5倍に なり、わく〜札まで 59px。 白い ふちかざり 6px を 見こんでも 25px あく）。 上へは ロボットの 伏せ札に かぶるが、あれは 裏むきの 札 ＝ 読む ものが ない ので かぶって よい。 */ position:absolute; left:50%; bottom:calc(100% - 28px); transform:translateX(-50%) scale(.8); z-index:60; display:grid; gap:4px; text-align:center; pointer-events:none; padding:16px 26px; border-radius:22px; background:var(--white); border:5px solid var(--gold); box-shadow:0 12px 30px rgba(60,40,20,.3); opacity:0; transition:opacity .18s, transform .18s; } .rule-flash b { font-size:24px; color:var(--pink-dark); } .rule-flash span { font-size:13px; color:#6d6076; max-width:280px; } /* いま なにが 起きたか の ぐたいてきな 1行（♠しばり！／みやこおち！ など） */ .rule-flash .flash-extra { font-size:14px; font-weight:900; color:#3f3348; } .rule-flash.show { opacity:1; transform:translateX(-50%) scale(1); } /* ★T99①：おしらせが 入れかわる ときは、いったん 完全に 消えてから 次を 出す。 消えないと「何回 起きたか」が かぞえられない（革命が 2回 起きても 1回に 見える）。 game.js の すきま 120ミリ秒に 間に あうよう、★消える ときだけ 早める。 ⚠️ これは 箱の 濃さ の 話で、光らせ ものを ふやして いない（設計図 §5.5）。 */ .rule-flash:not(.show) { transition:opacity .11s, transform .11s; } /* ── ダイアログ ───────────────────────── */ dialog { border:0; border-radius:22px; max-width:460px; width:calc(100% - 28px); color:#554856; padding:26px 26px 22px; text-align:center; font-family:var(--font-main); box-shadow:0 15px 50px rgba(48,34,44,.35); } dialog::backdrop { background:rgba(56,42,60,.4); } dialog h2 { color:#f05482; margin:0 0 12px; } .close-dialog { position:absolute; top:7px; right:11px; border:0; background:transparent; color:#a88d9b; font-size:26px; } /* ★★ T289 ― ★`×` の 見えない 押し代（★T118 の 型）★★ ★ わけ … ★T288 で 数えたら **34×34**。★10本 そろって 同じ 数で、★会社で いちばん 小さい ボタン。 ★★しかも「読み終わって 閉じる」は **遊ぶ 前の 最初の 1回**。 ★ここで 指を 外した子は、まだ 1回も 遊んで いません。 ★ 直しかた … ★**見た目 34×34 の まま。★的だけ 44×44。**★箱は 1pxも 伸びません。 ★ はみ出す 先 … ★34→44 で 上下左右に **5px ずつ**。★行き先は 箱の すみの 空きだけで、 ★★押せる ものは 1つも いません【★12画面で 数えた・T289】。 ⚠️★ 親は すでに `position:absolute` なので、★`position:relative` を 足す 必要は ありません。 ⚠️★★ この本だけ **まん中ぞろえに しません**。★わけは すぐ 下に 書きます。 */ .close-dialog::after { content:''; position:absolute; left:50%; top:-2px; width:44px; height:44px; transform:translateX(-50%); } /* ★★★ なぜ この本だけ `top:-2px` なのか（★あとから 読む人へ・★T289 で 見つけた）★★★ ★ `` は ブラウザの 既定（UAスタイル）で **`overflow:auto`** です【★実測：computed が auto】。 ★★＝ ★箱の 外に 出た ものは **切られます**。 ★ この本の `×` は `top:7px`・高さ **28px**（★ほかの 9本は `top:10px`・**34px**）。 ★★まん中ぞろえ（`top:50%` ＋ `translateY(-50%)`）に すると 押し代の 上が ★★★**箱の 外へ 1px 出て、そこだけ 切られ**、★的が **45×43** に なりました【★実測・12画面中 6画面】。 ★ → ★だから この本だけ、★押し代を **2px 下へ ずらして** 箱の 内がわに 収めます。 ★★**見た目の `×` は 1pxも 動いて いません**（★動かして いるのは 見えない 押し代だけ）。 ★ ほかの 9本は `top:10px`・34px なので、★まん中ぞろえでも 押し代の 上は ★★箱の 内がわに 5px 残ります ―― ★切られません【★実測】。 */ .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; } .basic-head { margin:0 0 4px; font-size:14px; color:#7a6a86; text-align:left; } dialog ol { text-align:left; padding-left:22px; line-height:1.75; font-size:13.5px; margin:0 0 14px; } .live-rules { text-align:left; margin-bottom:16px; } .live-head { margin:0 0 6px; font-size:13.5px; font-weight:900; color:#7a6a86; } .live-rule { display:grid; gap:1px; padding:7px 10px; margin-bottom:6px; border-radius:12px; background:var(--cream); } .live-rule b { font-size:13.5px; color:var(--pink-dark); } .live-rule span { font-size:11.5px; color:#8b7d92; line-height:1.45; } .live-rule.not-ready { opacity:.62; } /* 「きをつける ルール」だけ 色を かえる（§7-2 の 分類を 画面に 出す） */ .live-rule.is-care { background:#FFF8E2; box-shadow:inset 0 0 0 2px #F5D98B; } .live-rule.is-care b { color:#9a6b12; } .dialog-ok { display:grid; gap:1px; border:0; border-bottom:4px solid var(--pink-dark); background:var(--pink); color:#fff; padding:10px 18px 7px; border-radius:22px; font-weight:900; font-size:16px; text-decoration:none; } .dialog-ok small { font-size:10.5px; font-weight:700; color:#ffe6f0; } .dialog-sub { margin-top:12px; border:3px solid var(--pink-soft); background:var(--white); color:var(--pink-dark); border-radius:999px; padding:8px 18px; font-weight:900; font-size:13px; } /* ★★ T291 ―「指の的だけ たて44px」の 見えない 押し代（★T118／T289 の 型）★★ ★ わけ … ★T288 は この 2つを「ⓑ 箱の ならびを 変えないと 直らない」に 分けました。 ★★ところが アトが T289 の 最後に ★**「`::after` は ならびに 入らないので 箱は 伸びない」**と ★★自分の 見立ての まちがいを 見つけました。★数え直したら その とおりでした。 ★ 数えた もの【★実測・12画面・T291】 ★ `#helpDialog .dialog-ok`（分かった！）… 見た目 **たて37px**・的 38px（★出た 8画面 ぜんぶ 44px割れ）。 ★★箱の 上に **289px**・下に **10.5px** 空き。★要るのは **上下 3px ずつ**。 ★ `#settingBtn`（設定を変える）… 見た目 **たて31〜35px**・的 32〜36px（★12/12 で 44px割れ）。 ★★上の「次のゲームへ」までの すきま **7〜12px**・箱の 下の 空き **10〜18px**。 ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。 ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。 ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */ #helpDialog .dialog-ok { position:relative; z-index:0; } #helpDialog .dialog-ok::after { content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); } /* ★★★ `#settingBtn` だけ まん中ぞろえに しません（★あとから 読む人へ）★★★ ★ この ボタンは いちばん せまい 画面で **たて31px**。★まん中ぞろえに すると ★★上へ **6.5px** 出ます ―― ★ところが 上の「次のゲームへ」との すきまは **7px**。 ★★★のこり 0.5px では、★となりの 指を 取っていないと 言い切れません （★私の ものさしが 見つけられるのは 2px 以上の 取られ だけ・★T289 と 同じ）。 ★ → ★上へ **4px**・下へ のこり、に 分けます。★下は 箱の 中に 10px 以上 空いて います。 ★★上は 3px 以上・下は 3px 以上 空く ―― ★どちらも 取りません【★実測・12画面】。 ★ **見た目の ボタンは 1pxも 動いて いません**（★動かしたのは 見えない 押し代だけ）。 */ .dialog-sub { position:relative; z-index:0; } .dialog-sub::after { content:''; position:absolute; left:0; right:0; top:-4px; height:44px; } /* ⚠️「つぎの ゲームへ」だけを 大きくしない。やめどきが 見えるように 同じ 大きさで ならべる。 */ .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; } .result-actions .dialog-ok { align-content:center; } .result-actions .alt { background:#9FB3C8; border-bottom-color:#5F7488; } .result-actions .alt small { color:#eef4f9; } #resultContent .winner { margin:4px 0 14px; font-size:22px; color:#ef5380; font-weight:900; } .ranking { list-style:none; padding:0; margin:0 0 14px; display:grid; gap:6px; } .ranking li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:7px 9px; border-radius:10px; text-align:left; background:#fff5d8; font-size:13.5px; font-weight:900; } .ranking li:nth-child(1) { background:#fff0a8; } .ranking li.is-human { box-shadow:inset 0 0 0 2px #ff8eb0; } .ranking .place { color:#ee4e7d; font-size:12.5px; } .ranking small { color:#987a78; font-size:11px; } .total-head { margin:0 0 6px; font-size:13px; font-weight:900; color:#7a6a86; } .totals { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:4px; } .totals li { display:flex; justify-content:space-between; gap:8px; padding:5px 9px; border-radius:10px; background:#F6F1FA; font-size:12.5px; font-weight:900; text-align:left; } .totals li.is-human { background:var(--pink-soft); } .totals small { color:#7d6f86; font-weight:700; } /* ── ちいさい画面（スマホ）。よこスクロールは ぜったいに 出さない。 ── */ @media (max-width:650px) { :root { --card-w:46px; } body { background:linear-gradient(180deg,#bcebf0 0 105px,#fff7e8 105px); } .app-shell { padding:9px 8px 20px; } .topbar { height:48px; } .brand { font-size:22px; } .brand-cat { width:30px; height:23px; } .brand small { display:none; } .back, .howto { font-size:11px; padding:0 10px; min-height:36px; border-width:2px; } .cloud { display:none; } .start-card { border-width:4px; padding:22px 15px 20px; border-radius:24px; } .start-card h1 { font-size:46px; } .preset b { font-size:14px; } .preset small { font-size:9.5px; } .start-button { font-size:19px; min-height:58px; } .turn-badge { font-size:12px; padding:6px 10px; } .score-chip { font-size:11px; padding:6px 9px; } /* 4つが 1れつに ならぶ ように。auto マージンを やめて つめる。 */ .mini-btn { font-size:10.5px; padding:0 8px; min-height:31px; } .mini-btn:last-of-type { margin-left:0; } .status-line { gap:5px; } .cat-wrap { width:52px; } .cat-line { font-size:13.5px; } .talk .banner p { font-size:12px; } .cpu-name { font-size:10.5px; } .cpu-name small { font-size:9.5px; } .cpu-card { --back-h:44px; --back-step:5px; } .table-wrap { padding:12px 8px 8px; border-width:4px; border-radius:16px; } .table-ribbon { font-size:10px; top:-13px; padding:3px 11px; } .hand-area { padding:7px 8px 10px; } .hand { gap:5px 4px; } .card { border-width:1.5px; border-radius:5px; } .card .corner { font-size:9px; } .card .corner i { font-size:8px; } .card .pip { font-size:18px; } .flag { font-size:10px; padding:4px 8px; border-width:2px; } .flag small { font-size:9px; } .flag-row { gap:4px; padding-bottom:6px; } .wild-tag { font-size:8px; border-radius:3px; } .play-button, .pass-button { min-width:130px; font-size:16px; } .rule-flash b { font-size:19px; } .rule-flash span { font-size:12px; max-width:220px; } .result-actions { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .hand .card, .rule-flash { transition:none !important; } } /* ============================================================ ここから下：仕上げ ― 🎨アト（T36） ------------------------------------------------------------ ・見た目だけの 追記です。game.js には 1文字も さわっていません。 ・画面に 出る ことばも 1文字も 変えていません（余白と 折り返しだけ）。 ・ねらいは 4つ： ① ルールの バッジを「はなれて見ても わかる」形にする ② かくめいの ひっくり返る しゅんかんを 見せる（ルルの「部品」） ③ 1本目・2本目と 同じ 会社の 作品に 見せる（ハッピー・色・手ざわり） ④ 375px で よこスクロールを 出さない・行あたまに「ー」を 出さない ============================================================ */ :root { color-scheme: light; /* 暗転させない（読めなくなる 事故を ふせぐ） */ --wood: #80552e; --felt: #82ce84; --ink-soft: #7C6754; --plum: #3C2D4E; --shadow-1: 0 4px 0 rgba(196,155,110,.18), 0 10px 22px rgba(150,110,70,.14); } /* ── 土台 ──────────────────────────────── line-break:strict ＝ 日本語の 行あたま禁則を きびしく する。 これが 無いと「ロボット」「カード」「ジョーカー」が 折り返しで 「ー」から 始まって しまう（2本目で 見つけた 禁則違反）。 background-size で 空の 帯の 高さを 決めうちに して、 画面の 高さで 空の 位置が ずれるのを とめる。 */ body { background-color:#fff7e8; background-image:linear-gradient(180deg,#BCEBF0 0%,#D9F2F6 100%); background-repeat:no-repeat; background-size:100% 172px; overflow-x:hidden; /* よこスクロールは ぜったいに 出さない */ line-break:strict; word-break:normal; overflow-wrap:break-word; /* 長い ものだけ 折り返して はみ出しを ふせぐ */ } /* .nb ＝ ここで 切らない ひとかたまり（文の 最後の 1字だけが 次の行に 落ちるのを ふせぐ） */ .nb { display:inline-block; } /* ★ 日本語の 折り返しを「ことばの きれめ」で 行う（word-break:auto-phrase）。 これが 効くと「次の人に わ／たす」の ような、ことばの まん中での 折り返しが 出なくなる。対応していない ブラウザは この1行を 読みとばすだけ （line-break:strict の 禁則は そのまま 効く）ので、こわれない。 ⚠️ 対象は「game.js が 作る 文」＝ こちらで 折り返し位置を 直せない ところ。 */ .rule-desc, .live-rule span, .rule-flash span, .talk .banner p, .field-empty, .field-who, .cpu-name, dialog ol li, .ranking small, .play-button small, .pass-button small, .rule-fold > summary, #resultContent .winner, .total-head, .tip, .group-note, .dialog-lead { word-break:auto-phrase; } /* ── 上の帯：もどる・あそびかた（2本目と 同じ 白い丸ピル） ── */ .back, .howto { min-height:42px; padding:0 15px; font-size:13.5px; box-shadow:0 3px 0 rgba(196,155,110,.18); transition:transform .12s ease, box-shadow .12s ease; } .back:hover, .howto:hover { transform:translateY(-2px); box-shadow:0 5px 0 rgba(196,155,110,.2); border-color:var(--pink); } .back:active, .howto:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(196,155,110,.18); } .back:focus-visible, .howto:focus-visible, .mini-btn:focus-visible, .start-button:focus-visible, .play-button:focus-visible, .pass-button:focus-visible, .preset:focus-visible, .alt-button:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; } /* ============================================================ ★★ ①-2 つよさの ならび ―― かくめいを 成立させる 部品 ------------------------------------------------------------ ルル：「ハイライトは 装飾では なく、革命を 成立させる 部品です」。 だから ここは いちばん 大きく、いちばん わかりやすく する。 ・ふだんは 白い ものさし（1つ1つの かずが 四角い こまに 見える） ・かくめい／Jバックで こまが ひっくり返る（.is-flip は 1回だけ・下の script が つける） ・ぎゃくの あいだは 帯ごと 黒むらさき＋金 に なって、ひとめで わかる ============================================================ */ .flag-row { align-items:stretch; gap:6px 6px; } /* ものさしは いつも 1行 まるごと つかう（バッジの 下）。 ＝ 手札の すぐ 上に「いま どっちが つよいか」が 出る。 */ .flag-order { order:9; flex:1 0 100%; max-width:680px; margin-left:auto; margin-right:auto; display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 10px; border-radius:16px; font-family:var(--font-main); letter-spacing:0; background:linear-gradient(180deg,#FFFDF6,#FFF3DA); border:3px solid #F0DDB4; color:#6b5f74; box-shadow:0 3px 0 rgba(196,155,110,.16); transform-style:preserve-3d; } /* こまの 見た目（上の帯と あそびかた で 使いまわす） */ .ord-end { flex:0 0 auto; font-style:normal; font-size:11.5px; font-weight:900; color:#9b8a72; white-space:nowrap; /* 「強い」の「い」だけが 次の行に 落ちない ように */ } .ord-strip { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:2px; } .ord-chip { flex:0 1 auto; min-width:19px; padding:2px 3px 1px; font-style:normal; font-size:12.5px; font-weight:900; line-height:1.25; text-align:center; color:#4A3A2C; background:var(--white); border:2px solid #E7D6B4; border-radius:7px; } .ord-chip.is-joker { min-width:22px; background:var(--gold-soft); border-color:var(--gold); } /* あそびかたの 5行目。ゲーム中の 帯と 同じ こまに する。 ⚠️ li に display:flex を かけると 番号（5.）が 消えるので、かけない。 中の こまの ほうを inline-flex に する。 */ .order-line { padding:6px 9px; margin:5px 0; border-radius:14px; line-height:2; background:linear-gradient(180deg,#FFFDF6,#FFF3DA); border:2px solid #F0DDB4; } .order-line .ord-end { display:inline; vertical-align:middle; } .order-line .ord-strip { display:inline-flex; flex-wrap:wrap; vertical-align:middle; margin:0 4px; } .order-line .ord-chip { flex:0 0 auto; } /* ★ ぎゃくの あいだの 見た目（ずっと 出たまま ＝ 状態が 見える） 黒っぽい 背景は つかわない（設計図 §9.5）。あたたかい みかん色に して 「いま とくべつな ことが 起きている」を 出す。字は こげ茶で 読みやすいまま。 */ .flag-order.rev { background:linear-gradient(180deg,#FFC24D,#F08A20); border-color:#fff; color:#5A3406; box-shadow:0 3px 0 #C4620B, 0 0 0 3px rgba(240,138,32,.3); } .flag-order.rev .ord-end { color:#7A4506; } .flag-order.rev .ord-chip { color:#8A4A06; background:#FFFBF0; border-color:#fff; } .flag-order.rev .ord-chip.is-joker { color:#5A3406; background:#FFEDB6; border-color:#fff; } /* ★ ひっくり返る しゅんかん（1回だけ・.is-flip は script が つけて 外す） よこ軸で ぐるんと 返って、こまが 順に ぱっと 出る。 0.7秒で 終わる ＝ 何回 起きても うるさくない。 */ @keyframes ordFlip { 0% { transform:rotateX(-92deg) scale(1.05); } 55% { transform:rotateX(14deg) scale(1.02); } 78% { transform:rotateX(-6deg); } 100% { transform:rotateX(0) scale(1); } } @keyframes ordChipIn { 0% { opacity:0; transform:translateY(-7px) scale(.72); } 100% { opacity:1; transform:none; } } @keyframes ordGlow { 0% { box-shadow:0 3px 0 rgba(196,155,110,.16), 0 0 0 0 rgba(241,164,38,.55); } 40% { box-shadow:0 3px 0 rgba(196,155,110,.16), 0 0 0 10px rgba(241,164,38,0); } 100% { box-shadow:0 3px 0 rgba(196,155,110,.16), 0 0 0 0 rgba(241,164,38,0); } } .flag-order.is-flip { animation:ordFlip .66s cubic-bezier(.2,.85,.3,1), ordGlow .8s ease-out; } /* こまは 左から 順に めくれる。ぜんぶ 出そろうまで 0.7秒くらい。 これ以上 ゆっくりに すると、革命が 何度も 起きる ゲームでは じゃまに なる。 */ .flag-order.is-flip .ord-chip { animation:ordChipIn .38s ease-out backwards; animation-delay:calc(var(--i, 0) * 18ms + 110ms); } /* ============================================================ ★★ ①-1 バッジ ―― 「できない ことが ふえる ルール」を 見せる ------------------------------------------------------------ ルル：「できないことが ふえる ルールを だまって 入れると あそべない」。 バッジは 飾りでは なく ルールの 半分。だから： ・はなれて 見ても わかる 大きさ（1行目が 大きい・2行目が 説明） ・♦♥は 赤／♠♣は 黒（白い まるふだに のせる ＝ トランプと 同じ よみかた） ・出た しゅんかんだけ 1回 はねる（ずっと 動かすと つかれる） ============================================================ */ .flag { flex-wrap:wrap; padding:6px 12px; border-radius:16px; font-size:13px; line-height:1.3; box-shadow:0 3px 0 rgba(150,110,70,.14); animation:none; /* ⚠️ 毎回の えがき直しで はねるのを とめる */ } .flag small { flex:1 0 100%; font-size:10.5px; opacity:.9; } /* マークの ふだ（♠♥♦♣）。script が 文字を これで つつむ。 */ .mk { display:inline-grid; place-items:center; font-style:normal; min-width:1.35em; height:1.35em; padding:0 .12em; margin:0 1px; font-size:1.25em; line-height:1; border-radius:6px; background:var(--white); box-shadow:0 1px 0 rgba(0,0,0,.18); } .mk.is-red { color:#E23B48; } .mk.is-black { color:#2B2B36; } .flag small .mk { font-size:1.5em; margin:0 2px 0 0; vertical-align:-.15em; } /* 出た しゅんかんの ひとはね（1回だけ） */ @keyframes badgeIn { 0% { opacity:0; transform:scale(.55) translateY(-6px); } 60% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } } .flag.is-new { animation:badgeIn .42s cubic-bezier(.2,.9,.3,1.2); } /* 🔒 しばり ―― 何に しばられて いるかが 主役。マークを いちばん 大きく。 */ .flag-lock { background:linear-gradient(180deg,#B98CEA,#8B57CE); border-color:#6B3DAA; color:#fff; font-size:14px; box-shadow:0 3px 0 #5C3399; } .flag-lock .mk { font-size:1.5em; box-shadow:0 1px 0 rgba(0,0,0,.25); } .flag-lock small { color:#F3E8FF; } /* 👑 みやこおち ―― 「ねらわれてる」緊張は 出すが、こわくは しない。 赤ではなく あたたかい 金色。ふちを 白く して やわらかく 見せる。 */ .flag-crown { background:linear-gradient(180deg,#FFDE7B,#F5942F); border:3px solid #fff; color:#5A3406; box-shadow:0 3px 0 #C4620B, 0 0 0 3px rgba(245,148,47,.35); } .flag-crown small { color:#6B4210; } /* ⚠️ バッジが 出た人だけ 下に ずれる のを 直す（コーダの 申し送り）。 3人ぶん つねに 場所を 空けて おいて、印は その 中に 浮かせる。 ＝ 出ても 出なくても、ロボット3人の 高さが そろう。 */ .cpu { padding-top:20px; } /* ★T101（社長指示）：ロボットの 印は 王冠👑だけ・静止。 ⚠️ 登場アニメ（badgeIn）は 付けない こと。renderCpu() が 1手ごとに innerHTML を 作り直す ので、アニメが あると 毎回 濃さ0から 出直して「ぴこぴこ」に 見える（社長指摘の 原因）。 */ .crown-warn { position:absolute; left:50%; top:1px; transform:translateX(-50%); margin:0; font-size:17px; line-height:1; padding:0; border:0; background:none; box-shadow:none; filter:drop-shadow(0 2px 1px rgba(90,52,6,.28)); } /* ⚡ 強さが ぎゃく ―― ものさしの「見出し」。 ものさし本体（みかん色）と 色を 分けて、2つが 1つの かたまりに 見えないように する。 */ .flag-rev { background:linear-gradient(180deg,#FF9DC3,#E94F8A); border-color:#fff; color:#fff; box-shadow:0 3px 0 var(--pink-dark); } .flag-rev small { color:#FFE3EF; } .flag-back { background:var(--mint-soft); border-color:var(--mint); color:#22694a; } /* ↻ まわる むき（9リバース）―― 変わった ことに 気づける ように。 矢印だけ 1回 くるっと 回す。色も はっきり 変える。 */ .flag-dir { background:#EAF3FB; border-color:#B8D2E6; color:#3c6083; font-size:13px; } .flag-dir.on { background:linear-gradient(180deg,#6FA3DC,#3F72B4); border-color:#2B5A94; color:#fff; box-shadow:0 3px 0 #24487A; } .flag-dir .dir-arrow { display:inline-block; font-style:normal; font-size:1.45em; line-height:1; } @keyframes dirSpin { from { transform:rotate(0); } to { transform:rotate(-360deg); } } .flag-dir.is-flip { animation:badgeIn .42s cubic-bezier(.2,.9,.3,1.2); } .flag-dir.is-flip .dir-arrow { animation:dirSpin .7s cubic-bezier(.25,.9,.3,1); } /* ============================================================ ★ ①-3 上がり禁止の ふだ（🚫） ------------------------------------------------------------ コーダの 申し送り：「押せるのに 赤いので、押せる／でも いまは ダメ が わかる形に」。 ・カードの 絵は 見えるまま（うすい 白の すりガラスを かぶせるだけ） ・🚫は まん中では なく 右上の ふだに して、絵を つぶさない ・押せる ことが わかるよう、指を のせると すこし 浮く ・押したら ゆれる ＋ ハッピーの ふきだしが 黄色に なる（＝りゆうが ここに 出る） ============================================================ */ .hand .card.cant-finish { border-color:#E0575F; box-shadow:0 0 0 3px #FFD9DC, 1px 3px 2px rgba(49,41,42,.35); filter:none; /* 絵を つぶさない */ cursor:pointer; } .hand .card.cant-finish::before { content:''; position:absolute; inset:0; z-index:3; border-radius:5px; background:repeating-linear-gradient(-45deg, rgba(224,87,95,.13) 0 4px, rgba(255,255,255,.28) 4px 9px); } .hand .card.cant-finish::after { content:'🚫'; position:absolute; z-index:4; left:50%; top:8%; transform:translateX(-50%); font-size:17px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .hand .card.cant-finish:hover { transform:translateY(-5px) rotate(-1.5deg); } .hand .card.cant-finish:active { transform:translateY(1px) scale(.97); } @keyframes cardShake { 0%,100% { transform:translateX(0) rotate(0); } 20% { transform:translateX(-4px) rotate(-3deg); } 45% { transform:translateX(4px) rotate(3deg); } 70% { transform:translateX(-2px) rotate(-1.5deg); } } .hand .card.cant-finish.is-shake { animation:cardShake .42s ease-in-out; } /* 押した りゆうは ハッピーの ふきだしに 出る。そこを 黄色く して 「押したから これが 出た」を つなげる。 */ .talk.is-why .banner { border-color:#F0A21E; background:#FFF6DE; } .talk.is-why .banner::before { border-right-color:#F0A21E; } .talk.is-why .cat-line { color:#8A5A08; } /* えらんだ ふだは 12px 浮くので、その ぶん 上に 場所を 空けて おく。 ＝ 浮いた ふだが「あなたの手札」の 字に かぶらない。 */ .hand { padding-top:15px; } /* ── 手札：だせない ふだは はっきり しずめる ── もとの brightness(.86) では 「押せる／押せない」が ほとんど 見分けられなかった。 2本目（七並べ）と 同じ、白っぽく しずめる 見せ方に そろえる。 */ .hand .card:disabled { filter:grayscale(.85) brightness(1.04) contrast(.88); opacity:.62; } .hand .card.can-play { box-shadow:0 0 0 3px var(--gold-soft), 0 4px 0 rgba(198,140,30,.35), 1px 3px 2px rgba(49,41,42,.3); } .hand .card.can-join { box-shadow:0 0 0 3px var(--mint-soft), 0 4px 0 rgba(60,150,100,.3), 1px 3px 2px rgba(49,41,42,.3); } /* ★T99②：みどりの ふだが 出た しゅんかん、1回だけ ぴょこんと 上がる（6px・1回きり） ------------------------------------------------------------ トライの 実測（T98 §3-2）：えらんだ ふだは 14px 持ち上がるのに、みどりは 1pxも うごかなかった。★とくに 場が からっぽの ときは「1枚出す」で 押せて しまう ので、 気づかない 人は みどりを 見ないまま 1枚 だけ 出して しまう（自分の番の 18%）。 ★人の 目は「うごいた もの」に 勝手に 行く。だから 説明では なく うごきで 直す。 ⚠️ 色も 光りも ふやして いない（うごきだけ）。みどりは えらんだ あとにしか 出ない ので、 金色とは 同じ画面に 出ない ＝ 設計図 §5.5「強調は 1種類まで」は 破って いない。 */ @keyframes joinPop { 0% { transform:translateY(0); } 45% { transform:translateY(-6px); } 100% { transform:translateY(0); } } .hand .card.can-join.join-pop { animation:joinPop .34s ease-out 1; } /* ============================================================ ③ 世界観 ―― 1本目・2本目と そろえる ============================================================ */ /* ── 看板ねこ ハッピー（まとめサイト／2本目から そのまま 持ちこみ） ── */ .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); } } .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-wrap { position:relative; } .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; } /* ふきだしの しっぽは 2まい重ね（ピンクの ふち＋白い 中身）＝ 1本目・2本目と 同じ */ .talk .banner { box-shadow:0 3px 0 rgba(196,155,110,.18); } .talk .banner::after { content:''; position:absolute; left:-11px; top:21px; width:0; height:0; border-style:solid; border-width:6px 12px 6px 0; border-color:transparent #fff transparent transparent; } .talk[data-mood="win"] .banner::after { border-right-color:#E4F8E9; } .talk[data-mood="win"] .banner { background:#E4F8E9; } .talk.is-why .banner::after { border-right-color:#FFF6DE; } /* ── スタート画面：ハッピーは 全身で 右下に 立たせる（2本目と 同じ 置き方） ── */ .start-screen { min-height:calc(100vh - 96px); align-content:center; padding:18px 0 30px; } .start-card { box-shadow:var(--shadow-1); border-color:#FFD9E8; } .mascot { position:absolute; right:2%; bottom:4%; z-index:2; margin:0; width:clamp(112px,25vw,158px); display:flex; flex-direction:column; align-items:center; } .mascot .cat-wrap { width:100%; } .mascot .bubble { position:relative; align-self:center; width:max-content; max-width:min(210px,46vw); margin:0 0 12px; padding:7px 13px; line-height:1.3; text-align:center; 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; } .mascot .cat-name { bottom:2px; } /* 余白の 小さな かざり（花・キラキラ）。ことばの じゃまを しない ばしょだけ。 */ .start-screen::before, .start-screen::after { content:'✿'; position:absolute; z-index:0; color:#FFC2D8; font-size:34px; line-height:1; pointer-events:none; } .start-screen::before { left:9%; top:34%; transform:rotate(-14deg); } .start-screen::after { right:9%; top:26%; font-size:26px; color:#FFE08A; transform:rotate(12deg); } /* ── 大ボタン（1本目・2本目と 同じ 手ざわり） ── */ .start-button { border:4px solid #fff; box-shadow:0 7px 0 var(--pink-dark), 0 12px 18px rgba(196,58,115,.26); transition:transform .1s ease, box-shadow .1s ease, background .12s ease; } .start-button:hover { background:linear-gradient(180deg,#FF9DC3,#EE5C93); transform:translateY(-2px); } .start-button:active { transform:translateY(4px); box-shadow:0 2px 0 var(--pink-dark); } /* ── プリセット3つ（子どもが 最初に 見る いちばん 大事な 選択） ── */ .preset { position:relative; padding:13px 6px 11px; transition:transform .1s ease, box-shadow .1s ease; } .preset:hover { transform:translateY(-2px); border-color:var(--pink); } .preset.on { box-shadow:0 4px 0 var(--pink-dark), 0 0 0 3px #FFD3E5; } .preset.on::after { content:'✓'; position:absolute; top:-10px; right:-8px; width:23px; height:23px; display:grid; place-items:center; font-size:13px; font-weight:900; color:#fff; background:var(--pink-dark); border:3px solid #fff; border-radius:999px; box-shadow:0 2px 0 rgba(150,110,70,.2); } /* ── ルール15個の 一覧（えらびやすく する） ── */ .rule-fold > summary { padding:12px 14px; font-size:14.5px; box-shadow:0 3px 0 #F3C9DE; } .rule-fold > summary:hover { background:#FFD5E8; } .rule-group { border-radius:18px; padding:10px 12px; background:#FEFBFF; } .rule-group h4 { display:inline-block; margin:0 0 8px; padding:3px 11px; font-size:13px; color:#6E5C7C; background:#EFE6F2; border-radius:999px; } .rule-group.warn h4 { background:#F7E3AC; color:#7B5B12; } .rule-group.warn h4::before { content:'⚠ '; } .rule-row { border-radius:12px; padding:7px 8px; margin:1px 0; transition:background .12s ease; } .rule-row:hover { background:#FFF3F8; } .rule-row input { width:23px; height:23px; } .rule-name { font-size:14px; } .rule-desc { font-size:11.5px; } /* ONの ものだけ 背が つく ＝ いくつ ONか ひとめで わかる */ .rule-row:has(input:checked) { background:#FFF0F7; box-shadow:inset 0 0 0 2px #FFD3E5; } .rule-group.warn .rule-row:has(input:checked) { background:#FFF4D6; box-shadow:inset 0 0 0 2px #F0CE7C; } .rule-buttons button { min-height:42px; box-shadow:0 3px 0 rgba(196,155,110,.18); } .rule-buttons button:hover { border-color:var(--pink); } .rule-buttons button:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(196,155,110,.18); } /* ── 場（テーブル）：2本目と 同じ 木わく＋みどりの ラシャ ── */ .table-wrap { padding:11px; border:5px solid #412817; border-radius:23px; background:linear-gradient(135deg,#6b3d1e,#bf7a34 17%,#6d3f1f 33%,#c08139 50%,#66391b 73%,#b86e2a); box-shadow:0 7px 0 rgba(86,53,38,.28); } .table-wrap .field { border-radius:12px; border:3px solid #3f863f; background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 8px), var(--felt); box-shadow:inset 0 0 20px #4c9d51; padding:10px 6px; } .field-who { margin-top:6px; color:#FFE9C6; text-shadow:0 1px 1px rgba(0,0,0,.35); } /* 角の クローバー（かざり。ことばでは ないので 足してよい） */ .table-wrap::before, .table-wrap::after { content:'♣'; position:absolute; z-index:2; font-size:17px; color:#F6D69B; opacity:.75; } .table-wrap::before { left:9px; top:7px; } .table-wrap::after { right:9px; bottom:5px; transform:rotate(150deg); } /* ── 出す／パス ボタン ── */ .play-button, .pass-button { border:4px solid #fff; transition:transform .1s ease, box-shadow .1s ease; } .play-button { box-shadow:0 6px 0 var(--pink-dark), 0 10px 16px rgba(196,58,115,.2); } .pass-button { box-shadow:0 6px 0 #5F7488, 0 10px 16px rgba(95,116,136,.18); } .alt-button { box-shadow:0 3px 0 #C68A17; } .alt-button:active { transform:translateY(2px); box-shadow:0 1px 0 #C68A17; } /* ── ロボット3人 ── */ .cpu { transition:background .15s ease, border-color .15s ease; } .cpu.is-turn { box-shadow:0 0 0 3px #FFEDB8; } .cpu-name { color:#6b5a5c; } /* ============================================================ ② はつどうの おしらせ（まん中に 出る カード） ------------------------------------------------------------ まえは うすくて 下の 絵が すけて 読めなかった。 ・不透明に する ・すこし 下げて ロボットに かぶせない ・入ってくる ときだけ 動く（0.35秒）＝ 何回 起きても うるさくない ============================================================ */ .rule-flash { /* ★T100①：位置は 上の 基本ブロック（場の 上のふち）に まかせる。ここでは top を 出さない。 */ padding:18px 28px; border-radius:24px; border-width:5px; background:var(--white); box-shadow:0 14px 34px rgba(60,40,20,.34), 0 0 0 6px rgba(255,255,255,.7); transform:translateX(-50%) scale(.86) rotate(-2deg); transition:opacity .2s ease, transform .28s cubic-bezier(.2,.9,.3,1.3); } .rule-flash.show { transform:translateX(-50%) scale(1) rotate(0); } .rule-flash b { font-size:25px; letter-spacing:.5px; text-shadow:0 2px 0 #FFE3EF; } .rule-flash span { color:var(--ink-soft); font-weight:700; max-width:310px; } /* おしらせの 中の マークは 字の 色だけ（白い カードの 上なので まるふだは いらない） */ .rule-flash .mk { background:none; box-shadow:none; min-width:0; margin:0; font-size:1.2em; } /* ============================================================ ④ 結果画面 ―― 👑は 大きく、下位は 小さく（企画書 §9） ============================================================ */ #resultContent .winner { font-size:23px; text-shadow:0 2px 0 #FFE3EF; } .ranking li { padding:9px 11px; gap:10px; box-shadow:0 2px 0 rgba(196,155,110,.16); } .ranking li:nth-child(1) { background:linear-gradient(180deg,#FFF3B0,#FFE071); font-size:15px; padding:12px 11px; box-shadow:0 3px 0 rgba(196,155,110,.26); } .ranking li:nth-child(1) .place::before { content:'👑 '; font-size:17px; } .ranking li:nth-child(1) .place { color:#B25E0C; } .ranking li:nth-child(3) { font-size:13px; background:#FBF3E0; } .ranking li:nth-child(4) { font-size:12.5px; background:#F6F1EA; color:#8b7d72; } .ranking li:nth-child(4) .place { color:#a08672; } .ranking li.is-human { box-shadow:inset 0 0 0 3px #ff8eb0, 0 2px 0 rgba(196,155,110,.16); } .result-actions .dialog-ok { border-width:0 0 4px; box-shadow:0 4px 10px rgba(196,58,115,.18); } .result-actions .dialog-ok:active { transform:translateY(2px); } #resultDialog { padding-top:22px; } /* ============================================================ ⑤ ちいさい画面（375px） ------------------------------------------------------------ まもる こと：よこスクロール 0／手札14まいが 読める／ボタンが 指で 押せる ============================================================ */ @media (max-width:650px) { body { background-size:100% 118px; } /* ものさし：こまを つめて、14こが 1行に おさまる ように する */ .flag-order { gap:3px; padding:4px 7px; border-width:2px; border-radius:13px; } .ord-end { font-size:10px; } .ord-strip { gap:1px; } .ord-chip { min-width:15px; padding:1px 1px 0; font-size:10.5px; border-width:1.5px; border-radius:5px; } .ord-chip.is-joker { min-width:17px; } .order-line { padding:5px 6px; line-height:1.9; } .order-line .ord-strip { margin:0 3px; } /* せまい画面では ダイアログの よこ余白を つめて、1行に 入る 字数を ふやす （2本目と 同じ 手当て）。これで つよさの ならびが 1行に おさまる。 */ dialog { padding:22px 13px 18px; } dialog ol { padding-left:19px; } /* バッジが 4つ 5つ そろう ことも あるので、1つ1つを つめる。 つめないと、下の「出す／パスする」が 画面から 押し出される。 */ .flag { font-size:11.5px; padding:3px 8px; border-radius:12px; line-height:1.22; } .flag small { font-size:9.5px; line-height:1.25; } .cat-wrap { width:48px; } .talk .banner { padding:5px 10px; } .hand-area { margin-top:9px; } .hand { padding-top:13px; } .table-wrap { margin-top:2px; } .field-who { font-size:10.5px; min-height:14px; } .app-shell { padding-bottom:12px; } .flag-lock, .flag-dir { font-size:12px; } .flag-lock .mk { font-size:1.3em; } .mk { margin:0; } /* 手札：14まいが 2だんに おさまる 大きさ（7まい × 2だん）。 3だんに すると 上の おしらせと あわせて 画面から あふれる。 よこスクロールは ぜったいに 出さない。 */ :root { --card-w:45px; } .hand { gap:5px 3px; } .hand-area { padding:8px 6px 11px; } .hand .card.cant-finish::after { font-size:14px; } /* ボタンは 指で 押せる 大きさを まもる（1行に 2つ ならぶ） */ .actions { gap:8px; } .play-button, .pass-button { flex:1 1 0; min-width:0; min-height:56px; font-size:16px; padding:8px 10px 6px; border-width:3px; } .play-button small, .pass-button small { font-size:10px; } .table-wrap { padding:7px; border-width:4px; border-radius:16px; } .table-wrap::before, .table-wrap::after { font-size:13px; } .table-wrap .field { border-width:2px; padding:7px 3px; } .start-screen::before, .start-screen::after { display:none; } .mascot { position:relative; right:auto; bottom:auto; align-self:flex-end; margin:6px 6px 0 0; width:104px; } .mascot .bubble { font-size:12px; padding:5px 10px; border-width:2px; max-width:min(190px,52vw); } .cpu { padding-top:20px; } /* ★T101：ふだ→王冠👑だけに なったので、せまい画面も 絵文字の 大きさで（旧ふだ用の 9.5px＋padding は 廃止） */ .crown-warn { font-size:14px; padding:0; } .rule-group h4 { font-size:12px; } .rule-name { font-size:13px; } .rule-desc { font-size:11px; } /* ★T100①：せまい画面の くいこみは 24px（★T100-2で 場が 伸びて、わく〜札まで 42px（320px級は 35px）。 白い ふちかざり 6px を 見こんでも 5px 以上 あく） */ .rule-flash { bottom:calc(100% - 24px); padding:14px 18px; } .rule-flash b { font-size:20px; } .ranking li:nth-child(1) { font-size:14px; } } /* ============================================================ ★T100 ― 社長の 3指摘の 直し（🎨 アト・2026-08-24） ------------------------------------------------------------ ① おしらせ箱の 位置 → 上の .rule-flash（場の 上のふち に 固定） ② パスするの「押せる 色」→ ここ（はっきりした 水色〜青） ③ 場の みどりの 高さ 固定・「出した ◯枚」の 表示 とりやめ → ここ ゲームの 中身（SPEED・ルール判定・ロボット）には 1文字も さわって いない。 ============================================================ */ /* ── ② パスする：押せる ときだけ 青（社長指示「わかりやすい 青か 水色」）── ・押せない ときは いままで どおり（うすい グレー ＝ :disabled の filter が 効く） ・青は「押せる／押せない」の 状態表示。金色（出せる札）・みどり（一緒に出せる札）とは 役わりが ちがう ので、§5.5「強調は 1種類まで」には 数えない。 ・色みは 9リバースの バッジ（flag-dir.on）と 同じ 青の 家族 ＝ 画面の 色数を ふやさない。 ・白い 字との 濃さの 差（コントラスト比）：下の 色 #1B6FAE で 5.3:1、 まん中 あたりで 3.9:1（18px 太字の 基準 3:1 を こえる）。 */ .pass-button:not(:disabled) { background:linear-gradient(180deg,#3D9EDF,#1B6FAE); box-shadow:0 6px 0 #134F80, 0 10px 16px rgba(27,111,174,.22); } .pass-button:active:not(:disabled) { box-shadow:0 3px 0 #134F80; } /* ── ③-1 場の みどりの 高さを 固定（札が あっても なくても 1pxも 変えない）── ★T100-2（社長指示）：「詰まってる感が いなめない。縦を 1.5倍くらいに して ゆとりを。 茶色の わくは そのまま」→ 高さだけ 1.5倍に した（わく・内よはくは 1pxも 変えて いない）。 高さ ＝ 札93.97px × 1.5 ≒ 141px ＋ 内よはく20px ＋ わく6px ＝ 約180px（もとは 120px）。 札は align-items:center で まん中の まま ＝ 上下に 均等の ゆとりが つく。 ページの 下に 余って いた 余白（1000×900で 約200px）を 使う だけ なので、はみ出さない。 6枚をこえる 長い 階段で 横に あふれる ときは、しずかに 見切れる （設計図 §5.5 追記「まれな 最悪ケースに 画面を 合わせない」。場の 札は 触る ものではない）。 */ .table-wrap .field { height:calc(var(--card-h) + 86px); min-height:0; flex-wrap:nowrap; overflow:hidden; } /* ── ③-2 「◯◯が出した 2枚」の 行は 出さない（社長：言わなくても わかる）── game.js 側も 文字を 入れない ように した。行 そのものを たたむ ことで、 下の 茶色が 上の 茶色（11px）と 同じ あつさに なる（③-3）。 */ .field-who { display:none; } @media (max-width:650px) { /* せまい画面の 場：★T100-2 で 1.5倍（86px → 130px）。内よはく14px＋わく4px は そのまま。 375×812の 実測：ボタンの 下の 余白 144px（バッジが いちばん 多い ときでも 67px）＞ 伸ばし幅 44px。 */ .table-wrap .field { height:calc(var(--card-h) + 62px); } } @media (max-width:340px) { /* ★320px級 だけ 1.12倍（86px → 96px）に おさえる（＝1.5倍に しない。理由は 実測）： 320×812は 配りなおしの 直後（手札14枚 ＝ 3段）に 下の 余白が 11px しか ない。 ＋30px（1.35倍）でも 縦に 19px はみ出した。「はみ出しを 悪化させない」が 条件 なので、 余白 11px に 収まる ＋10px が 上限。375px からは ちゃんと 1.5倍に なる。 */ .table-wrap .field { height:calc(var(--card-h) + 28px); } /* 場が ひくい ぶん、おしらせ箱の くいこみも あさく（わく〜札 27px。ふちかざり6px を 見こむ） */ .rule-flash { bottom:calc(100% - 16px); } } /* 動きが にがてな人には 動かさない（OSの せっていに したがう） */ @media (prefers-reduced-motion: reduce) { .cat, .cat-eyes, .cat-tail, .flag-order.is-flip, .flag-order.is-flip .ord-chip, .flag.is-new, .crown-warn, .flag-dir.is-flip .dir-arrow, .hand .card.cant-finish.is-shake, .hand .card.can-join.join-pop { animation:none !important; } .rule-flash { transition:opacity .18s !important; } /* ★T99①：うごきは 止めても「消えて、また 出た」は 残す（濃さ だけ なので） */ .rule-flash:not(.show) { transition:opacity .11s !important; } .rule-flash, .rule-flash.show { transform:translateX(-50%) !important; } } /* ============================================================ ★T114 ―「出す」「パスする」が 画面の 外に あった（🎨アト・2026-08-25） ------------------------------------------------------------ 実測（375×667・ふつう）：窓667 に たいして ページ 738（ふだんの 場面）／ 786（革命が おきている 場面）。「出す」「パスする」の 下ばしは 712〜760 ＝ ずっと 45〜93px 画面の 外に あった。設計図 §5.5 追記③： 「触る所が 画面の外に 出たら、それは 見切れでは なく 故障」。 ⛔ ちぢめて いない ―― 直した px は ぜんぶ 「からっぽの 場所取り」か「同じ ことを 2回 言っている もの」から 取った。 さわって いない もの： ・場の みどり（.field 130px・T100-2 で 社長が わざわざ 1.5倍に させた 所） ・おしらせ箱（.rule-flash）の 位置と 出かた（T97〜T102） ・王冠👑（T101）・バッジの 合いことば（T102） ・トランプの 絵（札・伏せ札・大きさ・比率）／字の 大きさ／ボタンの 大きさ ・ハッピー（絵・ふきだし・かお・うごき） けずった もの（375×667・実測） ① ロボットの 上の からっぽの 場所取り 20px ―― 👑用。👑が 出て いない ときは 空 ② 見出し「あなたの手札」の 行 14px ―― すぐ 下に 表むきの 札 ③ 上の 行 まるごと 36px ―― 下の「③」参照（3つの ダブり） ④ おび「⭐前の人より強いカードを出そう⭐」 8px ―― 常設の 解説（§5.5） ⑤「⚡ 今 強さが ぎゃく！」の 見出し 48px ―― ものさしが ひっくり返って 同じ ことを 言う ⑥「↻ ふつうまわり」の ふだ 44px ―― 何も 起きて いない ことを 言う ふだ ⑦〜⑪ からっぽの 余白 27px ============================================================ */ /* ── ① ロボットの 上の からっぽの 場所取り ────────────── T101 の コメント：「3人ぶん つねに 場所を 空けて おいて、印は その 中に 浮かせる」。 ★ところが みやこおち（都落ち）は「ぜんぶ」でしか ONに ならない ルールなので、 初期の「ふつう」では この 20px に 👑が 一度も 入らない ＝ ずっと からっぽ。 👑が 実際に ある ときだけ 場所を 空ける ように した。 ＝ 👑の 見た目・位置・出る 条件は 1文字も 変えて いない（T101 は 無傷）。 */ .cpu { padding-top:0; } .players:has(.crown-warn) .cpu { padding-top:20px; } /* ── ② 見出し「あなたの手札」の 行 ──────────────────── 「◯枚」は 消さずに 手札の 箱の 右上の ふちに のせる。 札は えらぶと 12px 浮くが、浮いた 札の 上ばしは 箱の ふちより 9px 下なので かぶらない。 */ .hand-area { position:relative; } .hand-heading { display:none; } .hand-count { position:absolute; z-index:4; top:0; right:12px; transform:translateY(-52%); padding:1px 9px 2px; border:2px solid #F4C9AC; border-radius:999px; background:#fffdf5; color:#ec5a86; font-weight:900; font-size:11.5px; line-height:1.5; white-space:nowrap; box-shadow:0 2px 0 rgba(193,153,112,.18); pointer-events:none; } /* ── ③ 上の 行 まるごと（99.2px → 63.2px）────────────── 1行目に 4つ ならんで いた ものを 見なおしたら、3つが ダブりだった： | 消した もの | 同じ ことを 言って いる もの | |--------------------|----------------------------------------------------------------| | ふだ「あなたの番！」| ふきだし「光ってるカードを選んで「出す」！」＋ 手札が 金色に 光る | | | ＋「出す」「パスする」が おせるように なる | | ボタン「ルール ▾」 | 中身は「？ 遊び方」の そう3 そのもの（同じ 画面に 入口が 2つ） | | ハッピーの ひとこと | すぐ 下の おしらせ（下の 表）。★2本目（七並べ T109②）と 同じ | | 「1ゲーム目 ・ ⭐0」| 消して いない。場の 上のふち（④）へ 引っこしただけ | | ハッピーの ひとこと（消した） | すぐ 下の おしらせ（のこした） | |---|---| | どれ出す？ | 光ってるカードを選んで「出す」！ | | なに出すかな… | ロボット1は 考え中… | | 場が きれいに なったよ | 場が流れたよ！ | | やったね！ すごい！ | あなたがゴール！ | ★ハッピーは 消えて いない。絵も ふきだしも かお（うれしい／まってね）も そのまま。 ふきだしの 中の ダブった 1行だけを 消した ＝ ふきだしが 低く なり、 「↻ やめる」の となりに 上がれる ように なった（＝ 1行 まるごと 消える）。 ★ひとことが 受けもって いた「うれしさ／わけを 聞かれて いる」の 色は、 おしらせの 字に わたす（下の 2行）。 */ .turn-badge { display:none; } #rulesBtn { display:none; } .cat-line { display:none; } .talk { flex:1 1 0; min-width:0; } .mini-btn:last-of-type { margin-left:0; } .talk[data-mood="win"] .banner p { color:#1F7A45; } .talk.is-why .banner p { color:#8A5A08; } /* ── ④ おび「⭐ 前の人より強いカードを出そう ⭐」→「1ゲーム目 ・ ⭐0」 ── おびは 常設の 解説（設計図 §5.5「原則 作らない」）。同じ ことを 「？ 遊び方」の 1行目・「出す」ボタンの 中の 小さい字・光る 手札が 言って いた。 空いた 場所（＝ 場の 上のふち。ページの 高さを 1pxも 使わない）に ③で 行き場を なくした「1ゲーム目 ・ ⭐0」を のせる。 */ .table-wrap > .score-chip { position:absolute; z-index:3; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap; border:3px solid #C79A4E; box-shadow:0 2px 0 rgba(86,53,38,.2); } .players { padding-bottom:4px; } .table-wrap { margin-top:0; } /* ── ⑤ ふだ「⚡ 今 強さが ぎゃく！＜革命中＞」────────────── ★これが いちばん 大きかった（48px）。革命が おきると この ふだが 出て、 すぐ 下の ものさし（実測 367px ＝ 1行を 使いきる はば）と ならべず 2行に なり、 ページが 738 → 786 に のびて いた ＝ 革命の たびに「出す」「パスする」が さらに 48px 下へ 落ちる。 ★これは 社長が T100 で 名ざしで きらった 故障と 同じ 形： 「縦の 長さが 変わるので 目が チカチカします」。 ところが ふだが 出る のと 同じ しゅんかんに、すぐ 下の ものさしは ・中身が ひっくり返り（弱い 2 A K Q J … 3 🃏 強い） ・色が 変わり（みかん色 → こい むらさき＋金） ・こまが 順に めくれる（T36②の うごき） ＝「今 強さが ぎゃく」を、ふだより くわしく 言って いる。 なぜ ぎゃくなのか（革命／Jバック）は、おきた しゅんかんに おしらせ箱が 「革命！ 強さが ひっくり返った！」「Jバック 場が流れるまで ぎゃく！」と 名前で 言う。 ★おまけに 初期の「ふつう」では Jバックが OFF なので、 ふだの 中の「革命中」は 見わけの 役に 立って いなかった。 ⚠️「⚡＋Jバックで強さは もとどおり」（.flag-back）は 消して いない ―― ものさしが ふつうの ままなので、ふだが ないと 分からない じょうほう。 */ .flag-rev { display:none; } /* ── ⑥「↻ ふつうまわり」の ふだ ──────────────────── 9リバースが ONの あいだ ずっと 出て いる ふだ。「ふつうまわり」＝ 「何も 起きて いません」を 言うだけの ふだで、遊ぶ人の 判断には 使われない。 ★ぎゃくに なった とき（↺ ぎゃくまわり）は これまで どおり 出る。 矢印が くるっと 回る うごき（T36③）も そのまま。 */ .flag-dir:not(.on) { display:none; } /* ── ⑦〜⑪ からっぽの 余白 ──────────────────────── ⑦ 上の帯 48 → 40（中の ボタンは 36px。8px あまって いた） ⑧ 画面いちばん下の 余白 12 → 4（ボタンの 下。箱の わくと かげで 区切りは つく） ⑨ 手札の 箱の 上の すきま 9 → 4（箱に 3pxの わくと かげが ある） ⑩ ボタンの 上の すきま 10 → 6 ⑪ 手札の 下の すきま 2 → 0 */ @media (max-width:650px) { .topbar { height:40px; } .app-shell { padding-bottom:4px; } .hand-area { margin-top:4px; } .actions { margin-top:6px; } .hand { padding-bottom:0; } } /* ============================================================ ★T117 ― 320×568 で「出す」「パスする」が まだ 画面の 外だった（🎨アト・2026-08-25） ------------------------------------------------------------ T114 で 375/812/1280 は 0に なったが、320×568 だけ 残って いた。 直す前の 実測（320×568・ふつう・配った 直後の 14枚）： 窓 568／ページ 674／はみ出し ＋106 「出す」「パスする」の 下ばし ＝ 88.1px 画面の 外 手札の 3だん目の 4枚 ＝ 26.1px 画面の 外（札も 切れて いた） ★順番は「まず けずる。足りない ぶんだけ 縮める」（社長の 方針）。 ① 先に からっぽの 余白を ぜんぶ さらった …… −23px（下の A・実測） ② それでも 83px 足りない。83px は「手札の 3だん目」１つ ぶん （札 68.19 ＋ 行の すきま 5 ＝ 73.2）で しか 取れない ので、 ★320px の 手札の 札だけ 45px → 41px に した（下の B）＝ 7枚×2だん に なる。 ★縮めたのは「手札の 札」だけ。 場の 札・ロボットの 伏せ札・場の みどりの 高さ・字・ボタンは 1pxも 変えて いない （--card-w は さわらず、手札 専用の --hand-card-w を 新しく 作った）。 ============================================================ */ /* ── 手札の 札 だけの 大きさ（ばの 札・伏せ札・場の みどりとは 別にする）── ここまで .card は ぜんぶ --card-w を 見て いた。手札だけを 変えたいので、 手札の 札は --hand-card-w を 見る ように する。 ★既定値は --card-w そのもの なので、375px 以上の 画面は 1pxも 変わらない。 */ .hand .card { width:var(--hand-card-w, var(--card-w)); height:calc(var(--hand-card-w, var(--card-w)) * 635 / 419); } @media (max-width:340px) { /* ── A．からっぽの 余白（−23px・ぜんぶ 実測）────────────── ⑴ 画面いちばん上の 余白 9 → 6 （−3） ⑶ ものさしの 下の すきま 6 → 3 （−3） ⑷ ロボットの 下の すきま 4 → 0 （−4） ⑸ 手札の 箱の 上の すきま 4 → 2 （−2） ⑹ 手札の 箱の 中・札の 上 13 → 10 （−3）えらんだ 札は 12px 浮く。 箱の 内よはく 8 ＋ 10 ＝ 18 なので まだ 6px あまる ⑺ 手札の 箱の 下の 内よはく 11 → 7 （−4） ⑻ ボタンの 上の すきま 6 → 4 （−2） ⑼ 画面いちばん下の 余白 4 → 2 （−2） */ .app-shell { padding-top:6px; padding-bottom:2px; } .flag-row { padding-bottom:3px; } .players { padding-bottom:0; } .hand-area { margin-top:2px; } .hand { padding-top:10px; } .actions { margin-top:4px; } /* ── B．手札の 札 45px → 41px（★ここだけが「縮めた」ところ）── よこの けいさん（320px・実測で 合わせた）： 画面 320 − 画面の よこ余白 6×2 … 8→6（からっぽ） − 手札の 箱の わく 3×2 … そのまま − 箱の 内よはく 2×2 … 6→2（からっぽ） − 札の ならびの 内よはく 1×2 … 2→1（からっぽ） ＝ 札が ならべる はば 296px 7枚 × 41px ＋ すきま 1px × 6 ＝ 293px ≦ 296 ✅（3px あまる） ★45px の ままだと 7枚で 315px 必要で、よこ余白を 0に しても 入らない ＝ 6枚 3だん に なる（＝ 73px の はみ出し）。だから ここだけ 縮めた。 たて＝41 × 635 ÷ 419 ＝ 62.14px（比率 1.5489 のまま。★2:3は 崩して いない）。 */ :root { --hand-card-w:41px; } .app-shell { padding-left:6px; padding-right:6px; } .hand-area { padding:8px 2px 7px; } .hand { padding-left:1px; padding-right:1px; column-gap:1px; } /* ★「◯枚」の ふだを 3px 上へ ―― 上の A⑹で 札の 上の すきまを 13→10 に した ぶん、 いちばん 右の 札を えらんで 12px 浮かせた とき、ふだに 5.6px かぶって いた（実測）。 3px 上げて かぶりを 2.6px に もどす（＝ T114 と 同じ 2px 級）。ページの 高さは 1pxも 使わない。 */ .hand-count { transform:translateY(-65%); } } /* ── C．ものさしが ひっくり返る 0.66秒だけ、よこに 2px はみ出して いた ── 原因（実測）：革命／Jバックの めくり（@keyframes ordFlip）は `scale(1.05)` から 始まる。ものさしは 行を まるごと 使う ので、 1.05倍に なった しゅんかんだけ 左右に はみ出す。 320px：ものさし 308px → 1.05倍で 右ばしが 322px（★2px 外） 375px：ものさし 359px → 1.05倍で 右ばしが 375.9px（★0.9px 外・T114の 前から） ★320の 2px は T117 で 画面の よこ余白を 8→6 に した ぶん 出た もの （直す前は 319.6px で ぎりぎり 内がわ だった）＝ 自分で 出した ぶん。 うごきは 1pxも 変えず、行の 外に はみ出す ぶんだけ 切る。 （clip は hidden と ちがって スクロールの 箱を 作らない ＝ 中身は 動いたまま） */ @media (max-width:650px) { .flag-row { overflow-x:clip; } } /* ============================================================ ★T119 ― パソコンで 手札の 札が 小さい（🎨アト・2026-08-25） ------------------------------------------------------------ 社長：「大富豪を PCの モニターで やったとき 札が 小さく 感じた。 下に 余白も あるから PC版は まだ 大きく できると 思う。 小さいと 目が 悪い人は しんどいと 思う。」 直す前の 実測（1512×945・ふつう・配った 直後の 14枚）： 窓 945 ／ ページ 945（はみ出し 0）／ shell の 中身は 754.8 で 終わり ＝ ★下に 190.2px も 余って いた shell の はば 1000px（窓 1512 なので ★512px 余って いた） 手札の 札 62 × 93.95 ／ 場の 札 62 × 93.95 ／ ロボットの 伏せ札 38.27 × 58 14枚が 1だん（14×62 ＋ すきま5×13 ＝ 933px。使える はば 936px ＝ ★あまり 3px） ★つまり「1000px の 中では もう 1pxも 大きく できない」状態で、 余って いたのは 画面の ほう だった。だから 直しは 2つ： ① shell の はばを 窓に 合わせて 広げる（他ゲームも 940〜1180 と バラバラ。1000は 決まりでは ない） ② その ぶん 札を 大きく する（1だんの まま。だんは 増やさない） ★なぜ 2だんに しなかったか（測って 決めた）： 2だんに すると 手札が 7枚以下に 減った しゅんかんに 1だんへ 戻り、 ページの 高さが 約100px 跳ねる。これは 社長が T100 で 名ざしで きらった 「縦の 長さが 変わるので 目が チカチカ」と 同じ 形。 T114 で せっかく「革命が おきても ページが 1pxも 動かない」に した ばかり なので、 ★1だんの ままに して、高さが 動かない ことを 守った。 ★15〜16枚（カード交換・7渡し ＝「ぜんぶ」だけ）は どうするか： いま（62px）は 2だんに 落ちて ページが 約100px のびて いた。 T119 では 1だんを 固定し、★入らない ぶんだけ 札が すっと 細く なる ように した。 ＝ 設計図 §5.5 追記③「まれな 最悪ケースの ために いつもの 画面を 小さくしない。 受け流す 順番は ①しずかに 詰める → ②それでも 無理なら 見切れる」の ①そのもの。 比率（419:635）は flex の 縮みでも 崩れない（aspect-ratio が 効く）。 ⛔ スマホ（650px 以下）には 1バイトも 効かない ―― ここで 使う media は ぜんぶ min-width:1180px 以上。 375×667／375×812／320×568 の 札・高さは T117 の ままです（実測で 確認ずみ）。 ============================================================ */ /* ── ① 手札は「つねに 1だん」。入らない ぶんは しずかに 細くする ── ★1180px 以上だけ。ここより せまい 画面（スマホ・タブレット・小さい ノート）は 今までどおり 下の だんへ 折り返す ＝ ★1バイトも 変わらない。 height を 固定するので、手札が 14枚でも 3枚でも ★箱の 高さは 1pxも 動かない。 （padding-top 15px は そのまま ＝ えらんだ 札が 12px 浮く ぶんの 場所） ★細く なっても 62px（いままでの 大きさ）を 下回らない ことを 計算で 確かめた： 1180 の 窓・16枚 → (1116 − すきま75) ÷ 16 ＝ 65.1px（＞62） 1280 の 窓・16枚 → (1216 − 75) ÷ 16 ＝ 71.3px（＞62）実測 71.31 1300 以上・16枚 → (1236 − 75) ÷ 16 ＝ 72.6px（＞62）実測 72.56 ＝ ★どの 画面・どの 枚数でも、T119 の あとの ほうが かならず 大きい。 */ @media (min-width:1180px) { .hand { flex-wrap:nowrap; align-items:flex-end; align-content:flex-end; min-height:0; height:calc(var(--card-h) + 17px); padding:15px 2px 2px; } .hand .card { flex:0 1 auto; min-width:0; height:auto; } /* ロボットの 伏せ札も 手札と 同じ 割合で 大きく する （58 ÷ 62 ＝ 0.935 ＝ ★いまの 関係を そのまま 保つ 式。 --card-w が 62 の ままの 画面では 58px の まま ＝ 1pxも 変わらない） */ .cpu-card { --back-h:calc(var(--card-w) * 58 / 62); --back-step:calc(var(--card-w) * 8 / 62); } } /* ── ② はばを 窓に 合わせる ＋ 札を 大きく する ── 14枚が 1だんに 入る 最大を 実測で 出した（すきま 5px × 13 ＝ 65px）： 使える はば ＝ shell − 28（shellの内よはく）− 6（箱のわく）− 26（箱の内よはく）− 4（ならびの内よはく） ＝ shell − 64 1180px の 窓 → 使える 1116 ／ 14×74 ＋ 65 ＝ 1101（あまり 15） 1280px の 窓 → 使える 1216 ／ 14×80 ＋ 65 ＝ 1185（あまり 31） 1300px 以上 → shell 1300・使える 1236 ／ 14×83 ＋ 65 ＝ 1227（あまり 9） ★shell を 1300 で 止めた 理由（1400 まで 広げて 見くらべた 結果）： 1400 に すると 札は 88px に なるが、場の みどりが 1372px × 219px ＝ よこ 6.3倍の 細長い 帯に なり、まん中に 札が 1〜3枚 ぽつんと 浮く 見た目に なった。 1300 なら 札 83px（88 との 差は 6%）で、みどりの かたちは 今までと ほぼ 同じ。 ★「札を いちばん 大きく」より「読めて、画面が ちらからない」を 取った。 1512 の 窓では 左右に 106px ずつ の 余白が 残る。 ★★ たて（min-height）も かならず 見る ―― ここで 一度 失敗した ──────── はじめ はばだけで 決めて いた。社長に 言われた 2つ（1512×945・1280×910）は 0だった。 ところが ★たての 低い ノートを 測ったら、直す前より 悪く なって いた（実測）： 1400×768 ふつう … 前 はみ出し 0（ボタン 53.2px 内がわ）→ 後 ★はみ出し 70・ボタン 30.1px 外 1512×760 ふつう … 前 0（45.2px 内がわ） → 後 ★78・38.1px 外 1512×800 ふつう … 前 0 → 後 ★38 札を 1px 大きく すると、場の みどり・手札の 箱・ロボットの 札 の 3か所が いっしょに のびる ので、★ページは 1pxでは なく 約3.97px のびる（実測から）。 ＝ たての 余りが 無い 窓では、はばが 足りて いても 大きく しては いけない。 ★T105 で 自分に 言った「1枚の 画面で 見て OKは 当てに ならない」を、 画面の "大きさ" の ほうで また やった。言われた 2つだけ 測って いた。 → 大きさは「はば と たて の 両方が 足りて いる とき だけ」上げる ように した。 境目は 実測で 決めた（いちばん 重い 場面 ＝ ぜんぶON・革命・Jバック・しばり・ ぎゃくまわり・王冠・手札18枚 で はみ出し 0 に なる ところ）。 ⚠️ ①（1だん固定）は たてを 見ない ―― あれは ページを ★短く する だけ なので、 たての 低い 窓ほど 得を する（1180×800・18枚：前 はみ出し 86 → 後 33）。 */ @media (min-width:1180px) { .app-shell { max-width:1300px; } } @media (min-width:1180px) and (min-height:850px) { :root { --card-w:74px; } } @media (min-width:1280px) and (min-height:900px) { :root { --card-w:80px; } } @media (min-width:1300px) and (min-height:920px) { :root { --card-w:83px; } } /* ============================================================ ★T123 ― ①色が まだ「パス」を 指して いた ②札は 大きいのに 字が 小さい （🎨アト・2026-08-25） ------------------------------------------------------------ トライの 再検査（T122）で 2つ 残って いた： ① 「あと ◯枚選んでね」が 出て いる まさに その しゅんかんに、 画面で いちばん 光って いるのが「パスする」の 青。 実測（375×667）：青い パス 9,324px² ／ みどりの ヒント 約714px² ＝ ★13倍。 しかも「出す」は 灰色（opacity .55）で 沈んで いる。 ＝ T116 で 言葉は「もう1枚 えらんで」と 出口を 教えるように なったのに、 ★色は まだ「パスしろ」と 言って いた（言葉と 色が 別々の ことを 言う）。 ② T119 で 札は +34% 大きく したのに、字は 1pxも 大きく して いなかった。 実測（1512×945）：ロボットの 実況 13px／「あと 1枚選んでね」11px／ ロボットの 枚数 11px。★社長の 目的は「札」では なく 「小さいと 目が 悪い人は しんどい」だった。半分 取りこぼして いた。 ============================================================ */ /* ============================================================ ①-A 「あと ◯枚選んでね」の あいだ だけ、パスの 青を しずめる ------------------------------------------------------------ ⚠️ パスの ボタンは 消さない・押せなくもしない （コーダ T116：「①でも パスは 正しい 手（ペアを くずしたくない）」）。 ⚠️ ★「いつも 青を やめる」ことは しない ―― 青は 社長が T100 で 名ざしで 頼んだ 色（「押せる ときは もっと わかりやすい 青か 水色に して」）。 ここで 変えるのは「あと ◯枚選んでね」が 出て いる あいだ ★だけ。 「出せない ときは これ」の しゅんかんは 今までどおり こい青の まま。 ★どうやって「その あいだ」を CSS だけで 見わけて いるか（game.js は さわらない）： ・みどりの 札（.can-join）が 出て いる … handStates() の 'join' ・かつ「出す」が まだ 押せない（:disabled） この 2つが 同時に 成り立つのは、game.js の grow > 0 と ★完全に 同じ とき。 どちらも 同じ plays から 出て いる ので、文字（あと ◯枚選んでね）と ずれる ことが 原理的に ありません（T116 の コメントと 同じ しくみ）。 ★何を したか：色を「消す」のでは なく「一段 下げる」。 ・同じ 青の 家族の まま（水色）＝ 画面の 色数は 1つも ふえない ・立体の かげ・白い ふち・丸い かたちは そのまま ＝ 押せる 形に 見える ・字を こい青に して 読みやすさは 落とさない（コントラスト比は 下の 表） ・外に にじむ 光（0 10px 16px …）だけ 消す ＝「呼んで いる」感じを 止める ============================================================ */ /* ★色は 目で 選ばず、測って 決めた（下の 数字は ぜんぶ 計算）。 「ボタンに 見えるか」の 目安 ＝ 手札の 箱の 地（#fffdf5）との 色の へだたり ΔE が 15 以上。 「字が 読めるか」の 目安 ＝ コントラスト比 4.5:1 以上。 | 案 | 字との比 | 箱の地とのΔE | 判定 | |-----------------------|---------|-------------|-------------------------------| | T100 こい青（白字） | 3.89:1 | ★63.7 | ②では これ のまま（変えない） | | うすすぎる 水色 | 5.50:1 | 20.8 | 字は 読めるが ボタンに 見えにくい | | ★これ（#BEDDF2→#93BFDD）| ★5.50:1 | ★28.4 | ★字も 読めて ボタンにも 見える | | 白字の 中間 | 2.29:1 | 40.9 | 字が 読めない（4.5:1 未満）✕ | ★字は むしろ 読みやすく なった（3.89:1 → 5.50:1）。うすくしたのは 地の 色だけ。 ★彩度 19%〜 ＞ 沈んだ ボタンの 彩度 10.7%（計算）＝ 灰色（押せない）とは 見分けが つく。 */ .hand-area:has(.hand .card.can-join):has(.play-button:disabled) .pass-button:not(:disabled) { background:linear-gradient(180deg,#BEDDF2,#93BFDD); color:#0F4C74; box-shadow:0 6px 0 #6E9CBE; } .hand-area:has(.hand .card.can-join):has(.play-button:disabled) .pass-button:not(:disabled):active { box-shadow:0 3px 0 #6E9CBE; } /* ①-B その あいだ、みどりの ヒントを 太くする（★色は ふやして いない） ------------------------------------------------------------ みどりの わくを 3px → 4px＋外に 5px の ぼかし に する だけ。 ★新しい 色も 新しい 部品も 文字も 1つも 足して いない。 ＝ 設計図 §5.5「1つの 画面に 強調は 1種類まで」に 近づける 方向 （①の あいだ、遊ぶ人を さそって いるのは みどり だけに なる）。 ★box-shadow なので 場所を 取らない ＝ ページの 高さは 1pxも 動かない。 ★スマホでも 同じに する（色の 問題は どの 画面でも 同じ。px は 動かない）。 ★1回 作って 写真を 見て、やり直した ところ： はじめは「うすい みどり 6px の 外に こい みどり 8px」に して いた。 写真で 見ると ★こい みどりが 2pxの 細い 線に しか ならず、太く 見えなかった。 うすい みどり（#DCF6E4）は 手札の 箱の 地（#fffdf5）と 色が 近すぎて 消える。 → ★こい みどりを 札の すぐ そとに 4px、うすい みどりを その 外に まわした。 */ /* ①-C ★写真を 見て 気づいた 3つめ ―― 大きく しても 読めない 字が あった ------------------------------------------------------------ ボタンを 3倍に 拡大して 見たら、★「あと 1枚選んでね」が ほとんど 読めません でした。 「出す」は 押せない ので `filter:grayscale(.75)` ＋ `opacity:.55` が かかって いて、 白い 字も いっしょに 薄く なる。数字で 出すと： ぬり rgb(205,185,189) ／ 字 rgb(255,254,251) → ★コントラスト比 1.85:1（計算） （読める 目安は 4.5:1。18px 太字でも 3:1 は 要る） ★つまり ②の 仕事「字を 大きく する」を しても、この 1行だけは 大きく なった だけで 読めない ままでした。目が 悪い人には なおさら。 ―― T116 が「出口を 教える」ために 足した、まさに その 1行です。 直し方：①の あいだ だけ、「出す」を うすい 灰色に 塗って 字を こくする。 ★押せない ことは 色の あざやかさで 言う（彩度 6.4% ＜ 押せる ピンク 56.3%・計算）。 立体の かげも うんと 弱く して、押せる ボタンとは 見分けが つく ように した。 ⚠️ 文字は 1字も 変えて いない。読める ように しただけ。 */ /* ★T139（2026-08-26）で、この 1行の えらび方を ①だけ → ★押せない ときは いつも に 広げました。理由と 数字は ファイルの いちばん 下「★T139」に 書いて あります。 （中身の 5行は 1つも 変えて いません ＝ ①の 見た目は 1pxも 動きません） */ .play-button:disabled { filter:none; opacity:1; background:linear-gradient(180deg,#E6DAE0,#D2C2CB); color:#5E4A54; box-shadow:0 4px 0 #BCA9B3; } /* ★T139：小さい字に もう1枚 かかって いた うすめ（.play-button small の opacity:.92）を ★押せない ときだけ 外す。★色は 1つも 変えて いない ―― うすめる 幕を 1枚 はがす だけ。 これで ①も ②③④⑤も 同じだけ 上がる（★①は 上がる だけで 下がらない）。数字は 下の「★T139」に。 */ .play-button:disabled small { opacity:1; } .hand-area:has(.play-button:disabled) .hand .card.can-join { border-color:#2F9159; box-shadow:0 0 0 4px rgba(47,145,89,.92), 0 0 0 9px var(--mint-soft), 0 4px 0 rgba(60,150,100,.3), 1px 3px 2px rgba(49,41,42,.3); } /* ============================================================ ②パソコンで 字を 大きく する ------------------------------------------------------------ ★どこで 効かせるか ―― T119 で 札を 大きく したのと ★完全に 同じ 条件 （min-width:1180px かつ min-height:850px）に そろえた。理由： ・スマホ（375×667／375×812／320×568）は max-width:650px の 別世界なので この かたまりは 1文字も 届かない ＝ ★1pxも 変わらない ・★たての 低い ノート（1400×768・1512×760）は min-height:850px に 届かない ので ★ここも 1pxも 変わらない。この 2つは たての 余りが 13.2px／5.2px しか なく （実測）、字を 1px でも 大きく したら すぐ はみ出す。 T119 で「はばだけ 見て たての 低い ノートを こわした」失敗を くり返さない。 ・つまり「札が 大きく なった 画面 ＝ 字も 大きく なる 画面」で そろう。 ★どこから 高さを 出したか ―― 「まず けずる。足りない ぶんだけ 足す」（T114・T117 と同じ順） ⑴ 字を 大きく しても 高さが 1pxも 増えない 所を 先に 選んだ（下の A） ⑵ 高さが 増える 2か所（ロボットの 名前・ものさし）は、 その ぶんを 画面 いちばん下の からっぽ（26px）から 前払いした（下の C） ============================================================ */ @media (min-width:1180px) and (min-height:850px) { /* ── A．ここは 大きく しても ページの 高さが 1pxも 増えない ──────────── （増えない 理由を 1つずつ 書く。ぜんぶ 実測で たしかめた） */ /* A-1 ★ロボットの 実況 13px → 17px（いちばん 読む もの） ふきだしは 37px、となりの ねこの 列は 70.27px（実測）。 ★ふきだしは 33.27px 伸びても 行の 高さは 変わらない。 line-height を 数字で 決めて おく（normal のままだと フォントに よって 高さが 変わり、Mac と Windows で ちがう 結果に なる）。 17 × 1.35 ＝ 22.95px。★2行に 折れても 6+16+2+22.95×2 ＝ 69.9 ＜ 70.27 で まだ 無料。 */ .talk .banner p { font-size:17px; line-height:1.35; } /* A-2 ★ボタンの 中の 小さい字 11px → 14px（T116 の「あと ◯枚選んでね」がこれ） ボタンは min-height:52px。中身は 8＋18＋1＋11＋6 ＝ 44px（実測）なので 8px あまる。 14px に しても 47px で、★52px の 中に 収まる ＝ ボタンの 高さは 変わらない。 ⚠️ 文字そのものは 1字も 変えて いない（T116 の 言葉は そのまま）。 */ .play-button small, .pass-button small { font-size:14px; } /* A-3 手札の 枚数「14枚」11.5px → 15px T114 で 手札の 箱の 右上の ふちに のせた もの。position:absolute（実測） ＝ ★ページの 高さを 1pxも 使って いない。 */ .hand-count { font-size:15px; } /* A-4 ハッピーの 名札 10.5px → 13px ／ ゲーム数チップ 12.5px → 15px どちらも position:absolute（実測）＝ ★高さ 0。 */ .cat-name { font-size:13px; } .table-wrap > .score-chip { font-size:15px; } /* A-5 上の帯の 3つ（ゲームを選ぶ・遊び方 13.5px → 15.5px／ふりがな 11px → 13px） 上の帯は height:56px の 固定。中の ボタンは 42px（実測）なので 14px あまる。 */ .back, .howto { font-size:15.5px; } .brand small { font-size:13px; } /* A-6 「↻ やめる」11.5px → 14px ハッピーの 行（70.27px）の 中に 立って いる 34px の ボタン（実測）。 14px でも 34px のまま ＝ 行は 伸びない。 */ .mini-btn { font-size:14px; } /* A-7 「場が からっぽ」14px → 17px 場の みどりは height 固定＋overflow:hidden（T100③）＝ ★中の 字は 高さに 効かない。 ⚠️ 場の みどりの 高さは 1pxも さわって いない（社長が T100 で 固定させた 所）。 */ .field-empty { font-size:17px; } /* A-8 おしらせ箱の 説明 13px → 15px／ひとこと 14px → 16px おしらせ箱は 場の 上のふちに 浮いて いる（position:absolute・T100①）＝ 高さ 0。 ⚠️ 位置・出かた・見出しの 大きさは 1pxも 変えて いない（T97〜T102 は 無傷）。 */ .rule-flash span { font-size:15px; } .rule-flash .flash-extra{ font-size:16px; } /* ── B．ここは 大きく すると 高さが 増える（増える ぶんは C で 前払い）────── */ /* B-1 ロボットの 名前 13px → 15px ／ 枚数 11px → 14px トライが 名ざしで 出した 2つ。ロボットの 行が およそ 5px 高く なる（実測は 下）。 */ .cpu-name { font-size:15px; } .cpu-name small { font-size:14px; } /* B-2 ものさしの こま 12.5px → 14.5px ／「弱い・強い」11.5px → 14px こまの line-height は 1.25 なので、こま1つで およそ ＋2.5px。 */ .ord-chip { font-size:14.5px; } .ord-end { font-size:14px; } /* B-3 ★B-1 で 高く した ぶんを、その 同じ 行から 返す： ロボットの 名前と 伏せ札の あいだの すきま 4px → 1px（−3px）。 ★これを 入れなかった とき、1180×850 の いちばん 重い 場面で 「出す」「パスする」が ★1.5px 画面の 外に 出た（実測。直す前は 10px 内がわ）。 設計図 §5.5 追記③「触る所が 画面の外に 出たら、それは 見切れでは なく 故障」。 ★名前の 字が 大きく なった ぶん、行の 間の あきは もともと 増えて いる ので、 ここの 4px は そのまま だと 逆に 空きすぎる。 */ .cpu-cards { padding-top:1px; } /* ── C．前払い：画面 いちばん下の からっぽ 26px → 16px（−10px）────────── .app-shell の padding-bottom。手札の 箱の 下の、何も 置いて いない ところ。 T114 が スマホで 12→4 に した のと 同じ 場所で、パソコンだけ 26px のまま だった。 ★ここを 10px 返して、B の ぶん（実測 ＋7〜8px）を 払う。 ＝ ページの 高さは 直す前より ★短く なる（数字は 報告に 書いた）。 */ .app-shell { padding-bottom:16px; } } /* ★変えて いない もの（わざと・理由つき） ・「出す」「パスする」の 主の 字 18px … すでに 画面で 2番目に 大きい。 ・タイトル「大富豪」29px … すでに いちばん 大きい。 ・バッジ（🔒しばり・↺ぎゃくまわり）13px … ★これだけは わざと さわらなかった。 バッジは たてに 積み上がる ので、字を 大きく すると 「ぜんぶON・革命＋Jバック＋しばり＋ぎゃくまわり＋王冠＋18枚」の いちばん 重い 場面（1280×910 で たての 余りが 6.2px しか ない・実測）が すぐ はみ出す。★ふつうでは まず 出ない ふだの ために、 いちばん 重い 場面を こわすのは 割に 合わない と 判断した。 ・「？ 遊び方」「順位発表」の まどの 中 … 別の 画面なので 今回の 仕事に 入れて いない。 */ /* ============================================================ ★T139 ―「出す」の 字が うすくて 読めない（②③④⑤も 直した） （🎨アト・2026-08-26） ------------------------------------------------------------ ★これは T123 で 私自身が 見つけて、①だけ 直して 残した ものの 続きです。 ★下の 数字は ぜんぶ ★実測（画面に 出た 点を 写真から 1つずつ 読んだ もの）。 「計算」と 書いた ところ だけが 計算です。 ── ★うすいのは「字」では なかった ──────────────────────── `.play-button:disabled` には `opacity:.55` が かかって いた。 opacity は ★ボタンを 中身ごと 1枚の 絵に して から 55%だけ 出す ので、 のこり 45% は 下の クリーム色(255,253,245)が すける。 ＝ ★字を まっ黒に しても 越えられない 天井が ある。 ★字の 色だけ 入れかえて 実測した（③「待ってね」・1512×945）： #ffffff → 1.83:1 ／ #cccccc → 1.42 ／ #666666 → 1.26 ／ #3a2a30 → 1.84 ★#000000（まっ黒）→ ★2.61:1 ← ここが 天井 ★opacity:.55 を 外して まっ黒 → ★6.25:1 計算とも 合う：0.45 × 255 ＝ 114.75 より 暗く なれない（実測 rgb(115,114,110)）。 ★だから「字の 色を こくする」では 永久に 4.5:1 に 届かない。 ★opacity を やめて、押せない ことを 色そのもので 塗る しか ない。 ―― ★それは T123 が ①に した ことと まったく 同じ。 だから ★新しい 直し方は 1つも 足して いない。①の 直し方を 広げた だけ。 ── ★直した もの（7サイズ 実測。前 → 後）────────────────── 「出す」の 下の 小さい 1行（場面に よって 5とおりの ことを 言う）： | 場面 | 小さい字 | 前 | 後 | |----------------------------|------------------|-------------|---------------| | ① 枚数が たりない | あと ◯枚選んでね | 4.35〜4.56 | ★5.06〜5.30 | | ② 枚数は合うが 弱い/形ちがい | まだ出せないよ | 1.75〜1.77 | ★4.92〜5.30 | | ③ 自分の 番では ない | 待ってね | 1.75〜1.77 | ★4.91〜5.06 | | ④ まだ 何も えらんで いない | カードを選んでね | 1.75〜1.77 | ★5.06〜5.30 | | ⑤ 7わたし・10すて・こうかん | あと ◯枚選んでね | 1.75〜1.77 | ★4.92〜5.06 | | 大きい「出す」18px | 出す | 1.61〜1.62 | ★5.25 | ★①は 下がって いない（上がった）。★どの サイズでも 4.5:1 を こえた。 ★幅が ある のは、10〜14px の 細い 字の ふちの ぼけ ぶん（指定した 色は どこも 同じ）。 ★④と⑤は 社長の 表にも 私の T123 メモにも 無かった 場面。 とくに ★④は「自分の 番が 来た その しゅんかん」に かならず 出る 1行。 ②は 指では たどりつけない（コーダ T116）が、★③④が いつも 読めなかった。 ── ★何を したか（CSS は 2つ だけ）──────────────────────── 1つめ … T123 の えらび方を 広げた。★中身の 5行は 1文字も 変えて いない。 前： .hand-area:has(.hand .card.can-join) .play-button:disabled { … } 後： ★.play-button:disabled { … } ＝ ★見た目を 1つ 足したのでは なく、★2つ あった「押せない顔」を 1つに 減らした （①の ぬった うすもも色 ／ ②③④⑤の 55%の ゆうれい）。 2つめ … `.play-button small` の `opacity:.92`（もう1枚の うすめ）を ★押せない ときだけ 外す。★色は 1つも 変えて いない。幕を 1枚 はがす だけ。 これが 無いと 1400×768 で 4.22:1・スマホで 4.35:1 と ★4.5 に 届かなかった。 ── ★「押せる」と「押せない」の 見分けは つくか（実測・1512×945）──── | | 押せる（2枚出す） | 押せない（待ってね）| 前の 押せない | |--------------------|-------------------|--------------------|---------------| | ぬりの 色 | rgb(244,109,160) | rgb(220,206,213) | rgb(207,187,190) | | ★彩度（HSL の S） | ★86.0% | ★16.7% | 17.2% | | ★明るさ L* | 63.9 | ★84.1 | 77.6 | | ★手札の箱の地とのΔE| ★67.7 | ★17.6 | 23.4 | | 立体の かげ | 0 6px 0（ピンク） | ★0 4px 0（灰） | 0 6px 0 | | 外へ にじむ 光 | あり | ★なし | なし | ★あざやかさが 5.1倍ちがう ＋ かげが 浅い ＋ 光らない ＝ 押せるとは 見まちがえない。 ★そのうえ「どれだけ 目立つか」（地との ΔE）は 23.4 → ★17.6 と ★下がって いる。 ＝ ★読めるように したのに、前より 出しゃばらなく なった。 押せる ボタンとの 目立ちの 差は 2.9倍 → ★3.8倍に ひらいた。 ── ★わざと 直さなかった もの ─────────────────────────── ★「パスする」の 押せない ときの 小さい字は さわって いない（実測 1.59:1）。 ★パスの 1行は、いつも ほかの もっと 大きい ものが 同じ ことを 言って いる： ・「場が からっぽ。出そう！」 … 場に「場は からっぽ。好きなカードから出せるよ！」が 14〜17px・★6.87:1（実測）で 出て いる ・「出せない ときは これ」（自分の 番では ない とき）… その 場面では もう 用が ない 字 ・「今は使えないよ」（えらぶ モード）… 灰色 そのものが すでに 言って いる ★いっぽう「出す」の 1行は、そこでしか 言って いない ことを 言う。 ★これが 線引き：★ボタンの「名前」は うすくて よい。 ★ボタンの 中に 入って いる「言づて」は うすくて いけない。 決まり（WCAG 1.4.3）が 押せない 部品を 外して いるのは、その 字が ★「もう 知って いる 名前」だから。T116 は そこに ★ゲームの 声を 入れた。 ⚠️ 正直に：③では 出すと パスが 2つとも 押せない ので、 「出すは 読める・パスは 読めない」と 見た目が そろわない。 ★そろって いない ことより、用の ない 字を 読ませない ことを 選んだ。 ── ★さわって いない こと（ぜんぶ 実測で たしかめた）──────────── ・画面の 高さ … ★7サイズ × 6場面で 2,873か所を 前後 突き合わせ → ちがい ★0 ・画面の 字数 … ★同じ 突き合わせで ちがい ★0（1字も 増えて いない） ・T116 の 言葉 ／ パスの 青（①以外）／ 押せる ときの ボタン … 1つも 変えて いない ・index.html ／ game.js ／ ほかの ゲーム ／ office/state.js … 1バイトも さわって いない ・CSS の ルールの 数 531 → ★532（ふえた 1 ＝ 私が 足した 1つ ちょうど ＝ 1行も 壊して いない） ── もどしたく なったら ─────────────────────────────── ・②③④⑤だけ 前に 戻す … 上の `.play-button:disabled {` を `.hand-area:has(.hand .card.can-join) .play-button:disabled {` に 書きもどす ・小さい字の こさも 前に 戻す … `.play-button:disabled small { opacity:1; }` を 消す ============================================================ */ /* ============================================================ ★T185 ― ①よこ向き（812×375）で 手札に 1枚も さわれない ②せまい・ひくい 画面で「出す」が 画面の 外 （🎨アト・2026-08-31 ／ コーダの 見張り T184 が 見つけた 本物の 2件） ------------------------------------------------------------ ★直す前の 実測（本物の 試合・自分の番）： | 画面 | ページの高さ | はみ出し | 「出す」の 下ばし | 手札の まん中が 外 | |-------------|------------|---------|-----------------|------------------| | ★812×375 | ★855px | ★＋480 | ★y=815（画面375）| ★14 / 14枚 | | 320×480 ふつう| 564px | ＋84 | y=552（画面480） | 0 / 14枚 | | 320×568 ぜんぶ| 662px | ＋94 | y=650（画面568） | 0 / 14枚 | | 375×667 ぜんぶ| 731px | ＋64 | y=713（画面667） | 0 / 14枚 | ★設計図 §5.5 追記③：「★見切れて よいのは "使わない 側" だけ。 ★触る ところが 画面の 外に 出たら、それは 見切れでは なく ★故障」。 ★手札と「出す」「パスする」は 触る ところ ＝ ★故障 でした。 ── ★なぜ いままで 出なかったか（コーダ T184 §5-1 の 実測）──────────── ★T120 で 測ったのは 375×667・375×812・320×568・1280×910・1512×945 の 5サイズ。 ★★812×375（よこ向き）は 大富豪で ★一度も 測られて いません でした。 ★★この CSS には いままで「たての 短さ」を 見る ものさしが 1つも 無く、 ★分かれ道は ぜんぶ「よこはば」（max-width:650 ／ min-width:1180）だけ でした。 ★★812×375 は よこ 812px なので「パソコン」と 見なされ、 ★★たて 375px の 画面に パソコンの 高さ（855px）が 出て いた ―― これが 原因です。 ── ★何を したか（大きく 2つ）────────────────────────── ★A. よこ向き（たて 560px 以下・よこ 560px 以上）＝ ★2つの 柱に 組みかえる 左：ハッピー・ロボット・場　　右：手札・「出す」「パスする」 ★上の 1行（バッジ＋つよさの ものさし）だけ 左右に またがせる。 ★B. たての ひくい たて向き（よこ 650px以下・たて 700px以下） ＝ ★画面の 高さに 合わせて 1画面に たたむ。★あまった 高さは 場の みどりに あげ、 ★足りない ときは 場の みどりが 先に 縮む（＝ 触る ところは 動かない）。 ── ⛔ ちぢめて いない もの（ぜんぶ 実測で 確かめた）──────────── ・375×812・390×844・414×896・768×1024・1280×910・1512×945 … ★1バイトも 効きません （★この 2つの media は たて 560px以下／700px以下 でしか 開かない） ・手札の 札の 大きさ（375級 45px・320級 41px）… ★たて向きは 1pxも 変えて いない ・「出す」「パスする」の 高さ … ★52px 以上を 守った（44pxの 指の的） ・トランプの 比率 419:635 … ★どこも 崩して いない（width:auto ＋ aspect-ratio） ・game.js ／ index.html ／ office/state.js ／ ほかの 19本 … ★1バイトも さわって いない ── ★直した あとの 実測（★はみ出し／「出す」が 外に 出た px）────────── | 画面 | かんたん | ふつう | ★ぜんぶ | ★ぜんぶ＋バッジ全部＋手札18枚 | |----------|---------|-------|--------|---------------------------| | ★812×375 | ★0 | ★0 | ★0 | ★0（「出す」は 下ばしから 44px 内がわ）| | ★375×667 | ★0 | ★0 | ★0 | ★0（10px 内がわ） | | ★320×568 | ★0 | ★0 | ★0 | ★0（10px 内がわ） | | ★320×480 | ★0 | ★0 | ★0 | ★★手札16枚で 42px 外（→ 下）| ★★本物の 試合では（★見張り ②-2・346手番 × 10サイズ）： ★★10サイズ ぜんぶ ★手札 0 / 346回・ボタン 0 / 346回 ＝ ★NG 0。 ★★入らない ところ（正直に・設計図 追記⑤）─────────────────── ★★私が わざと 作った「手札16枚 以上 ＋ バッジ 4つ ぜんぶ」の 場面 だけ、 ★320×480 で「出す」が ★42px 画面の 外に 出ます。★足りないのは ★50px。 ★内わけ：手札が 3だん目に 入る ぶん ＝ 66px、★のこりの 空きは 16px（★どちらも 実測）。 ★埋める には ★①320級の 手札の 札を 41→36px（2だんで 16枚まで 入る）か ★②バッジの 2行目の 説明（「♠♥だけ出せるよ」等）を 消す ―― の どちらかが 要ります。 ★★どちらも 社長が 通した ものを 削るので、★私では 決めません。 ★★ただし ★本物の 試合（346手番）では 1回も 起きて いません ―― ★手札が 16枚に なるのは「ぜんぶ」ONの 7わたしの ときだけ で、 ★★T184 の 教え「自分で 作った まれな 場面は ものさしに ならない」に したがい、 ★★鳴らす ものさしは 本物の 試合の ほうを 正と しています。 ============================================================ */ /* ============================================================ ★A. よこ向き（landscape・たて 560px 以下）＝ 2つの 柱 ------------------------------------------------------------ ★なぜ 2つの 柱か（実測）：たて 375px に、いままでの たてならび （上の帯32 ＋ ハッピー53 ＋ バッジ80 ＋ ロボット81 ＋ 場119 ＋ 手札227）を 入れると ★855px。★どれだけ 詰めても 半分にも なりません。 ★でも よこは 812px も 余って いる ―― ★だから よこに 分けました。 ★何を どちらに 置いたか 左（38%）… ハッピー／ロボット3人／場の みどり ＝「★見る もの」 右（62%）… 手札／「出す」「パスする」 ＝「★さわる もの」 上の 1行 … バッジ ＋ つよさの ものさし（★左右に またがる） ★ものさしを 上に 通した 理由：左の 柱（297px）に 入れると こまが 13個 ならばず 3だんに 折れて、★左の 柱が 127px も 太る（実測）。 ★よこ 792px なら 1行に おさまる（実測）。 ★★上の 1行の 高さを 80pxで 予約して いる 理由（いちばん 大事）： バッジ（🔒しばり・↺ぎゃくまわり・👑都落ち）は「ぜんぶ」ONの あいだ ★1手ごとに 出たり 消えたり します。★予約しないと、その たびに ★右の 柱（手札と ボタン）が 50px 上下に 跳ねる ―― ★これは 社長が T100 で 名ざしで きらった「縦の 長さが 変わるので 目が チカチカ」と 同じ 形です。 ★予約した 結果、★「出す」の 位置は かんたんでも ぜんぶでも ★同じ y（実測 279）。 ★代金：バッジが 出ない かんたん／ふつうでは 上に 48px の 空きが 出ます。 ★ものさしを その まん中に 置いて（align-content:center）、帯として 見えるように しました。 ============================================================ */ @media (orientation:landscape) and (max-height:560px) and (min-width:560px) { /* 札は 44px（★手札が 9枚 × 2だんで 18枚まで 入る 最大。実測で 決めた） よこ：手札の 箱の 中 459px ／ 9×44 ＋ すきま4×8 ＝ 428 ≦ 455 ✅ ★45px 以上に すると 8枚/だん に なり、17枚で 3だんに 落ちて はみ出す。 */ :root { --card-w:44px; } .app-shell { max-width:100%; padding:4px 10px 3px; } /* ★画面の 高さに ぴったり 合わせる。★数字を 直に 書かず、上の帯の ぶんは flex に 計算させる（＝ 帯の 高さを あとで 変えても 狂わない）。 ★はじめの 画面の ときは かからない（★はじめの 画面は 縦に 長いので 巻けなく なる）。 */ .app-shell:has(#gameScreen:not(.hidden)) { height:100dvh; display:flex; flex-direction:column; } .topbar { height:32px; } .brand { font-size:20px; } .brand-cat { width:26px; height:20px; } .brand small { display:none; } .back, .howto { min-height:30px; font-size:11.5px; padding:0 10px; border-width:2px; } .game-screen { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr); /* 1行目＝バッジ＋ものさし（80px 予約）／2行目＝ハッピー（70px 予約）／ 3行目＝ロボット／4行目＝場（★あまりを ぜんぶ もらう＝ここが 伸び縮みの 受け皿） */ grid-template-rows:minmax(60px,auto) minmax(70px,auto) auto minmax(0,1fr); column-gap:10px; align-items:start; } .flag-row { grid-area:1/1/2/3; padding:0 0 4px; align-content:center; } .status-line { grid-area:2/1; padding:0 0 4px; } .players { grid-area:3/1; padding:0 0 4px; } .table-wrap { grid-area:4/1; margin-top:0; align-self:stretch; min-height:0; display:flex; flex-direction:column; } .hand-area { grid-area:2/2/5/3; margin-top:0; } .talk { flex:1 1 0; } .status-line .cat-wrap { width:44px; } .cat-name { font-size:9.5px; } .talk .banner { padding:5px 9px; } .talk .banner p { font-size:12px; } .cpu { padding:4px 2px 3px; border-width:2px; } .cpu-name { font-size:12px; } .cpu-name small { font-size:10.5px; } .cpu-cards { padding-top:2px; } .cpu-card { --back-h:38px; --back-step:6px; } /* ★場の みどり：たて 375px では T100-2 の「札＋86px」（＝180px）は ★画面の 48% を 食べて しまう（実測）。★よこ向き だけ、あまった 高さを もらう かたちに した（★実測 79〜105px）。★中の 札は 44×67px ＝ ★まるごと 見える。 ⚠️ たて向き（375×812 など）の 180px／130px には 1pxも さわって いません。 */ .table-wrap { padding:7px 9px 6px; border-width:4px; border-radius:18px; } .table-wrap .field { height:auto; flex:1 1 auto; min-height:var(--card-h); padding:2px 4px; } /* ★もし それでも 足りない ときは、★場の 札が しずかに 小さく なる（比率は 保つ）。 ＝ 設計図 §5.5 追記③「①しずかに 詰める → ②それでも 無理なら 見切れる」の ①。 */ .table-wrap .field .card { height:min(var(--card-h), 100%); width:auto; } .table-wrap > .score-chip { font-size:11px; top:-12px; } /* ★バッジの 2行目（説明）を 1行目の 横に つける ―― ★字は 1つも 消して いない。 ★T102 は「1行目が 大きい・2行目が 説明」と 決めた けれど、それは たての 長い 画面の 話。 ★たて 375px では この 折り返しが 1つ 23px を 食べ、★上の 帯を 80px も ふくらませて いた（実測 154px → ★78px）。★字の 大きさ・色・順番は 1pxも 変えて いない。 */ .flag { font-size:11.5px; padding:3px 7px; border-radius:12px; line-height:1.22; flex-wrap:nowrap; } .flag small { font-size:9.5px; flex:0 1 auto; } .flag-order { padding:4px 8px; border-width:2px; border-radius:13px; gap:3px; } .ord-chip { min-width:16px; padding:1px 2px 0; font-size:11px; border-width:1.5px; border-radius:5px; } .ord-chip.is-joker { min-width:18px; } .ord-end { font-size:10px; } .ord-strip { gap:1px; } .hand-area { padding:7px 10px 9px; } .hand { padding:9px 2px 0; gap:5px 4px; min-height:0; } .hand-count { font-size:10.5px; right:10px; } .actions { margin-top:6px; gap:8px; } /* ★指の的：実測 225×52px（44pxの 的を たても よこも こえて いる） */ .play-button, .pass-button { flex:1 1 0; min-width:0; min-height:52px; font-size:16px; padding:7px 8px 5px; } .play-button small, .pass-button small { font-size:10px; } } /* ============================================================ ★B. たての ひくい たて向き（よこ 650px 以下・たて 700px 以下） ＝ 320×480 ／ 320×568 ／ 375×667 ------------------------------------------------------------ ★ここでも「まず けずる。足りない ぶんだけ 縮める」（T114・T117 と 同じ 順）。 ★①いちばん 効いた のは「けずる」では なく ★"受け皿を 作った" こと： ゲームの 画面を ★画面の 高さ ちょうどに して、 ★あまった 高さは 場の みどりに あげ、★足りない ときは 場の みどりが 先に 縮む。 ★★これで「バッジが 出た」「手札が 3だんに なった」で ★手札と ボタンが 動きません。 ★実測：375×667 で「出す」の 下ばしは かんたんでも ぜんぶでも ★同じ（657）。 ★②縮む 順番も 決めた（★いたみの 小さい ほうから）： ★1番目 場の みどりの 余白（＝ ただの 空き。無料） ★2番目 ロボットの 伏せ札（★枚数の 数字は 上に あるので 消えない。flex-shrink:4） ★3番目 場の 札そのもの（★1枚ぶんの 高さは 必ず 残す＝min-height:var(--card-h)） ★★「出す」「パスする」と 手札は ★一度も 縮まない・動かない。 ★けずった もの（★ぜんぶ からっぽの 余白か、大きすぎた 飾り） ・上の帯 40 → 30px（中の ボタンは 30px。10px あまって いた） ・ハッピーの 絵 64 → 40px ／ 名札 10.5 → 9px ・ロボットの 伏せ札 58 → 34px（★枚数の 字は 1pxも 変えて いない） ・バッジの 内よはく 3 → 2px ／ 行間 1.22 → 1.18 ・手札の 箱の 上下 8/11 → 5/5px ／ 札の だんの すきま 5 → 4px ★★変えて いない もの：手札の 札の 大きさ（45px／320級 41px）・ 「出す」「パスする」の 高さ（52px）・字の 大きさ（ボタン・ロボットの 枚数）。 ============================================================ */ @media (orientation:portrait) and (max-width:650px) and (max-height:700px) { /* ★受け皿（①）。★はじめの 画面には かけない（縦に 長いので 巻けなく なる）。 */ .app-shell:has(#gameScreen:not(.hidden)) { height:100dvh; display:flex; flex-direction:column; padding-top:5px; padding-bottom:2px; } .app-shell:has(#gameScreen:not(.hidden)) .game-screen { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } .topbar { height:30px; } .back, .howto { min-height:30px; font-size:11.5px; padding:0 10px; border-width:2px; } .status-line { padding:0 0 3px; } .status-line .cat-wrap { width:40px; } .cat-name { font-size:9px; } .talk .banner { padding:4px 8px; } .talk .banner p { font-size:12px; } .flag-row { padding:0 0 3px; gap:4px; } /* ★バッジの 2行目（説明）を 1行目の 横に つける（★理由は よこ向きの ところと 同じ）。 ★実測（320×568・ぜんぶON）：上の 帯 154px → ★78px。 ★この 76px が、★ロボットの 伏せ札（切れて いた）と 場の みどり（68→102px）に 戻りました。 ★字は 1つも 消して いません ―― ★行を 折る のを やめただけ です。 */ .flag { padding:2px 8px; line-height:1.18; border-radius:13px; flex-wrap:nowrap; } .flag small { font-size:9.5px; line-height:1.2; flex:0 1 auto; } .flag .mk { min-width:1.15em; height:1.15em; margin:0; } /* ★縮む 順番 2番目。★min-height:38px は「ロボットの 名前と ◯枚」が ★かならず 読める 高さ（実測）。★伏せ札だけが 下から 静かに 切れる。 */ .players { padding:0 0 3px; flex:0 4 auto; min-height:38px; overflow:hidden; } .cpu { padding-bottom:2px; } .cpu-name { font-size:12px; } .cpu-name small { font-size:10.5px; } .cpu-cards { padding-top:2px; } .cpu-card { --back-h:34px; --back-step:5px; } /* ★場の みどり ＝ 伸び縮みの 受け皿。 ★上は T100-2 の「札＋62px」で 止める（★いままでと 同じ 見た目。それ以上 太らせない）。 ★下は「札 1枚ぶん」で 止める ―― ★場の 札は 読む もの なので、ここは 譲らない。 */ .table-wrap { margin-top:0; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:6px; } .table-wrap .field { height:auto; flex:1 1 auto; min-height:var(--card-h); max-height:calc(var(--card-h) + 62px); padding:3px 0; } .table-wrap .field .card { height:min(var(--card-h), 100%); width:auto; } /* ★手札は かならず 画面の いちばん 下（＝ 指が いちばん 届く ところ）に つく。 */ .hand-area { margin-top:auto; padding-top:5px; padding-bottom:5px; } .hand { padding-top:10px; padding-bottom:0; row-gap:4px; } .actions { margin-top:4px; } .play-button, .pass-button { min-height:52px; } } /* ── ★B-2. 320×480（いちばん せまくて ひくい 画面）だけ、あと 13px ────────── ★上の B を 入れた あとの 実測（★見張り ②-2・本物の 試合 346手番）： ★「出す」が 画面の 外に 出たのは ★2回だけ、★はみ出しは ★6px と 10px。 ★＝ もう ★10px の 空きが あれば 0に なる ところ まで 来て いた ので、 ★★からっぽの 余白だけを 13px 集めました（★札・字・ボタンの 大きさは 1pxも 変えて いない）： 画面いちばん上 5→4（−1）／いちばん下 2→0（−2） 手札の 箱の 中・札の 上 10→8（−2）／札の だんの すきま 4→2（−4・3だんの とき） 手札の 箱の 上下 5/5→3/3（−4）／ボタンの 上 4→3（−1） ふきだしの 内よはく 4→3（−1） ★直した あと：★0 / 346回（★NG 0）。 ⚠️ 320×568・375×667 には かかりません（★たて 520px 以下 だけ）。 */ @media (orientation:portrait) and (max-width:340px) and (max-height:520px) { .app-shell:has(#gameScreen:not(.hidden)) { padding-top:4px; padding-bottom:0; } .hand { padding-top:8px; row-gap:2px; } .hand-area { padding-top:3px; padding-bottom:3px; } .actions { margin-top:3px; } .talk .banner { padding:3px 8px; } } /* ── ★A-2. よこ向きの「はじめの 画面」―― ★「ゲームを始める」が 画面の 外だった ── ★実測（812×375・直す前）：ページ 546px（画面 375）。 ★「ゲームを始める」の まん中は ★y=426 ＝ ★51px 画面の 外。 ★見張り（⑥）は「スクロールすれば 届く」ので 鳴りません でした。★でも ★はじめて 開いた 人の 画面に「始める」が 1つも 写って いない ―― これは 直します。 ★どこから 高さを 出したか（★まず けずる。足りない ぶんだけ 縮める） ⑴ ★ハッピーを 右の 余白へ 逃がす（position:absolute） ★−221px（★いちばん 大きい） ―― ★絵・ふきだし・名札は 1pxも 変えて いない。★置き場所だけ 変えた。 ★よこ 812px では 白い 箱（560px）の 右に 126px あく ＝ ★ここは ずっと 空だった。 ⑵ 上下の からっぽの 余白（18/40 → 4/6） −48px ⑶ 白い 箱の 内よはく（26/24 → 12/12） −26px ⑷ タイトル「大富豪」60 → 34px −26px ⑸ 「まずは"ふつう"から…」の 1行を 出さない（★下の 3つが 同じ ことを 言って いる： 「どれで遊ぶ？」の ふつう★・ボタンの 中の「カードを配るよ」・ハッピーの ふきだし）−27px ⑹ 雲の かざり（画面の 外に 出て いた） −0（見えなく なるだけ） ★結果：ページ 546 → ★375px（★画面ぴったり。スクロール 0）。 ⚠️ たて向きには 1バイトも かかりません（landscape ＋ たて560px以下 だけ）。 */ @media (orientation:landscape) and (max-height:560px) and (min-width:560px) { .start-screen { padding:4px 0 6px; } .start-card { padding:12px 20px 12px; border-width:4px; border-radius:24px; } .eyebrow { font-size:12.5px; } .start-card h1 { font-size:34px; margin:0; text-shadow:0 3px #285e46,0 5px #e3ffd7; } .start-card h1 span { font-size:24px; vertical-align:4px; } .intro { font-size:13.5px; margin:2px 0 9px; } .preset-block { padding:8px; } .preset { padding:6px 5px; } .preset b { font-size:15px; } .rule-fold { margin-top:8px; } .rule-fold > summary { padding:6px 12px; } .start-button { margin-top:10px; padding:8px 20px 6px; font-size:19px; } .tip { display:none; } /* ★ハッピーは 消えて いない。白い 箱の 右の 空きに 立たせただけ。 ⚠️★ここで 1回 失敗しました：右へ 寄せた とき、ふきだし（154px）が ★ハッピーの 幅（112px）の まん中ぞろえの まま だったので、 ★右へ 5px はみ出し、★見張りが「横スクロールが 1場面で 出ました」と 鳴りました。 ★→ ふきだしの 右ばしを ハッピーの 右ばしに そろえ（左へ 伸びる）、0に 戻しました。 */ .mascot { position:absolute; right:6px; bottom:8px; width:112px; margin:0; } .mascot .bubble { align-self:flex-end; justify-self:end; } .cloud { display:none; } } /* ============================================================ ★T187 ― ★★結果の ふたで「あなたは ◯位だったよ！」が 最初に 見えない （🎨アト・2026-08-31 ／ トライの 検査 T186 🟡① が 見つけた 1件） ------------------------------------------------------------ ★★1試合 遊びきった、いちばん うれしい しゅんかんの 話です。 ── ★直す前の 実測（★本物の 試合を 最後まで 遊んだ ときだけ）────────── | 画面 | ★ふたの 中身 | ★ふたの 箱 | ★あふれ | ★開いた時の scrollTop | ★順位が 見えるか | |---|---|---|---|---|---| | ★★**812×375** | 579px | 337px | ★**242px** | ★★**242px** | ★★**✕**（★176px 上に かくれた）| | ★★**320×480** | 656px | 442px | ★**214px** | ★★**214px** | ★★**✕** | | 320×568 | 576px | 450px | 126px | 3px | ○（★でも ボタンと **同時には 見えない**）| | 375×667 | 477px | 450px | 27px | 0px | ○ | | 375×812 以上 | ― | ― | ★0px | 0px | ○ | ── ★原因【★トライの 実測を 私も 追認しました】──────────────── ``` showModal() → ★ブラウザが いちばん 上の 押せる もの＝#againBtn「次のゲームへ」に フォーカスする → ★★フォーカスした ものを 見せる ため、ふたを **下まで スクロールする** → ★★上に ある「🏆 順位発表！」「あなたは ◯◯（◯位）だったよ！」が 押し出される ``` ★私も 開いた しゅんかんの `document.activeElement` を 読みました ＝ `BUTTON#againBtn`（★6サイズ ぜんぶ）。 ── ★★どう 直したか ―― ★「スクロールを 止める」では なく「あふれを 消す」────── ★★フォーカスを 外す 直し方は **しません** でした。 ★理由：★フォーカスが 消えると **キーボードで 遊ぶ人**が「次のゲームへ」に すぐ 行けなく なる。 ★★そもそも ★**あふれが 0 なら、ブラウザは スクロールしません**。 ★→ ★★ふたの 中身を 1画面に 入れる ＝ フォーカスは そのまま で 順位が 見える。 ★A. ★よこ向き（812×375）… ★★ふたを **2つの 柱** にする 左＝🏆 と「あなたは ◯位だったよ！」と 順位表　右＝これまでの成績・ボタン ★B. ★たての ひくい たて向き（320×480・320×568・375×667）… ★★1画面に たたむ ・★ふたを たての ならびに して、★★上（🏆・順位）と 下（ボタン）は **絶対に 動かない** ・★「次のゲームへ」「◀ ゲームを選ぶ」を **よこ 2つ ならび** に 戻す（★320px では たて2つ ＝ 104px を 使って いた） ・★★足りなく なった ときに 動くのは **順位表の 中だけ**（★上下の 見出しと ボタンは 動かない） ── ★直した あとの 実測 ──────────────────────────── | 画面 | ★あふれ | ★開いた時の scrollTop | ★順位が 見える | ★★ボタンと 同時に 見える | ★フォーカス | |---|---|---|---|---|---| | ★★**812×375** | ★**0px** | ★**0** | ★**○** | ★**○** | ★`#againBtn`（★変わらず）| | ★★**320×480** | ★**0px** | ★**0** | ★**○** | ★**○** | ★`#againBtn` | | ★**320×568** | ★**0px** | ★**0** | ★**○** | ★**○**（★前は ✕）| ★`#againBtn` | | ★**375×667** | ★**0px** | ★**0** | ★**○** | ★**○** | ★`#againBtn` | | 375×812 以上 | ★0px | 0 | ○ | ○ | ★★**1バイトも 変えて いない** | ★「次のゲームへ」の 指の的：★**320×480 で 128×46px／375×667 で 156×46px／812×375 で 155×48px** ＝ ★★どこでも **44px を こえて います**（★verify ⑦ が 見張って います）。 ⚠️★1回 失敗しました：★はじめ ボタンの 内よはくを つめすぎて **128×42px** に なり、 ★★44pxを 割りました。★→ 上下の 内よはくを 2px ずつ 戻して 46px に しました。 ============================================================ */ /* ── ★A. よこ向き（812×375）＝ ふたを 2つの 柱に ──────────────── ★ゲーム画面（T185）と 同じ 分け方：★左＝「見る もの」／右＝「する こと」。 ★`display:contents` で #resultContent の 子を そのまま 柱に ならべます （★game.js が 作る HTML の 形は 1文字も 変えて いません）。 ★★順位表を 3〜5行目に またがせて いる 理由：★こうしないと 右の「これまでの成績」の 高さが 左の 行を 押し広げ、★「だったよ！」と 順位表の あいだに 大きな すきまが できます（実測）。 */ @media (orientation:landscape) and (max-height:560px) and (min-width:560px) { #resultDialog[open] { display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto auto auto 1fr; column-gap:18px; align-content:start; max-width:730px; padding:16px 20px 14px; max-height:calc(100dvh - 24px); } #resultContent { display:contents; } #resultContent h2 { grid-area:1/1; font-size:22px; margin:0 0 4px; } /* ★text-wrap:balance ―― ★2行に なる ときに 行の 長さを そろえる（★字は 1つも 変えて いない）*/ #resultContent .winner { grid-area:2/1; margin:0 0 8px; font-size:21px; text-wrap:balance; } .ranking { grid-area:3/1/6/2; gap:5px; margin:0; align-content:start; min-height:0; overflow-y:auto; } .ranking li { padding:5px 10px; } .total-head { grid-area:1/2; margin:0 0 4px; align-self:end; } .totals { grid-area:3/2; gap:3px; margin:0 0 10px; align-content:start; min-height:0; overflow:hidden; } .totals li { padding:3px 9px; } .result-actions { grid-area:4/2; align-self:start; gap:10px; } .dialog-sub { grid-area:5/2; align-self:start; margin-top:8px; } } /* ── ★B. たての ひくい たて向き（320×480・320×568・375×667）＝ 1画面に たたむ ── ★★いちばん 効いたのは「★次のゲームへ／ゲームを選ぶ を よこ 2つ ならびに 戻した」こと。 ★320px では `@media (max-width:650px)` が たて 2つ ならびに して いて、 ★★それだけで **104px**（★実測）を 使って いました ―― ★★これが あふれの 半分です。 ★のこりは からっぽの 内よはくと、★「これまでの成績」の 行の つめ直しから 出しました。 ★★字は 1つも 消して いません（★順位・名前・⭐・1位◯回 は ぜんぶ 出ます）。 ★★足りなく なった ときの 順番（★T185 と 同じ 考え方）： ★1番目 順位表の 中だけが 動く（`.ranking` の overflow-y:auto） ★★2番目 …… ありません。★★🏆・「あなたは ◯位だったよ！」・「次のゲームへ」は ★★**どんな ときも 画面の 中に 残ります**（★ふた 自身は もう スクロールしない）。 */ @media (orientation:portrait) and (max-width:650px) and (max-height:700px) { #resultDialog[open] { display:flex; flex-direction:column; padding:14px 14px 12px; max-height:calc(100dvh - 24px); } #resultContent { display:flex; flex-direction:column; min-height:0; } #resultContent h2 { font-size:19px; margin:0 0 4px; flex:0 0 auto; } #resultContent .winner { margin:0 0 8px; flex:0 0 auto; text-wrap:balance; } .ranking { gap:4px; margin:0 0 8px; flex:0 1 auto; min-height:0; overflow-y:auto; } .ranking li { padding:3px 9px; } .ranking li:nth-child(1) { padding:7px 9px; } .total-head { margin:0 0 4px; font-size:12px; flex:0 0 auto; } .totals { gap:2px; margin:0 0 8px; flex:0 1 auto; min-height:0; overflow:hidden; } .totals li { padding:2px 8px; font-size:11px; gap:6px; white-space:nowrap; } .totals small { font-size:10px; } /* ★よこ 2つ ならびに 戻す。★字は 小さく するが、★指の的は 46px を 守る（★上の ⚠️ 参照）*/ .result-actions { grid-template-columns:1fr 1fr; gap:8px; flex:0 0 auto; } .result-actions .dialog-ok { font-size:13.5px; padding:10px 6px 8px; } .result-actions .dialog-ok small { font-size:9.5px; } .dialog-sub { margin-top:7px; padding:6px 16px; flex:0 0 auto; } } /* ============================================================ ★★★ T277 ―「↻ やめる」の はみ出しの 下を 空ける（🎨アト・2026-09-13）★★★ ------------------------------------------------------------ ★ なにが おきるか【★実測・13画面】 ★この本の 上の帯は **30／32／40／56px**。★44px の ボタンを 入れると ★★下に **14／12／4／0px** はみ出します。 ★はみ出しは 帯も 盤も 1pxも 動かしません（★T277 実測 0/13）。 ★★でも ★はみ出した 先に **絵が ある** と、★それを 隠して しまいます。 ★★★私は 箱の 重なりでは なく ★**写真の 画素**で 数えました （★T273 で 箱だけ 見て、題の 折れを 2本 見のがした ため）。 ★ 隠して いた もの【実測】 ・★たて向き … ★ハッピーの ふきだし（★.talk .banner）の 右上 ・★よこ向き … ★つよさの ものさし（★.flag-order）の 右はし ★ どう 空けたか ―― ★**よこに 空けました**（★たてには 1pxも 動かしません） ★たてに 下げる やり方（margin-top）も 試しましたが、 ★★ふきだしが 2行に なる ときに ★status-line が のび、★場の みどりが 縮みます。 ★★★よこに 空ける やり方なら、★高さは どんな 字でも 動きません。 ★ ★★ふきだしは 前より **せまく なりません**【実測】 ★もとの「↻ やめる」は ふきだしの **左どなり**に いました。 ★それが 上の帯へ 引っこした ぶん、★ふきだしは 左に 66〜76px 広がります。 ★★320×568：★187.4px →（空けた あと）★202px ―― ★**＋14.6px** ★★375×812：★217px　 →（空けた あと）★219px ―― ★**＋2px** ============================================================ */ /* ★ たて向き（せまい）―― ★ふきだしの 右を 空ける */ @media (orientation:portrait) and (max-width:650px) { /* ★ はば 375〜650：★ボタン 73.9px ＋ 帯の すきま 8px ＝ 82px */ .status-line .talk .banner { margin-right:82px; } } @media (orientation:portrait) and (max-width:374px) { /* ★ はば 374 以下：★ボタンが 47.2px に 小さく なる（↻ を 落とす）ので 56px */ .status-line .talk .banner { margin-right:56px; } } /* ★ よこ向き（ひくい）―― ★つよさの ものさしの 右を 空ける ⚠️★ padding では なく ★**ものさしの max-width と margin**で 空けます。 ★ ①`.flag-row` に padding を かけると ★中身の はばが 減り、 ★★決まりの バッジが 1行 増えて 1行目が のび、★場の みどりが 縮みます。 ★ ②`margin-right` だけでは 動きません ―― ★ものさしは `flex:1 0 100%` ★★（＝ はばは いつも 100%・縮まない）なので、★margin は 外に あふれる ★★だけ でした【★T277 実測：★x10..558 の まま】。 ★ ③だから **max-width で はばを 先に 減らして**、★margin-right で 右に 寄せない。 ★`min(680px, …)` に するのは、★もとの 680px の 上限を 消さない ため ★★（★消すと 926×428 で ものさしが 680 → 824px に 太ります）。 ★ ★ものさしは いままで どおり **1行 まるごと**（`flex-basis:100%` は そのまま）。 ★★バッジの 折り返しは 1つも 変わりません【★実測・決まり 全部ON でも 同じ】。 */ @media (orientation:landscape) and (max-height:560px) and (min-width:560px) { .flag-row .flag-order { max-width:min(680px, calc(100% - 82px)); margin-right:82px; } } /* ============================================================ ⚠️★★★ T277 ― ★はみ出しを margin-bottom で 返す（★これが いちばん あぶなかった）★★★ ------------------------------------------------------------ ★ この本の 上の帯は height を 数字で 決めて いるので、★はじめは ★「返す margin は 要らない」と 思いました。★★まちがいでした。 ★ ★★よこ向きの 遊びの 画面は `.app-shell{height:100dvh; flex-direction:column}`。 ★上の帯も その 中の 1つ なので、★中身が 入りきらない 2画面（★568×320・568×272）では ★★帯が しずかに **32 → 30px に 縮んで** いました【★T277 実測】。 ★ ★44px の ボタンを 入れると、★帯の「これ以上 縮めない 高さ」が 30 → **44px** に 上がり、 ★帯が 縮めなく なって ★**帯 ＋2px・盤 ＋2px・手札 ＋2px・ページ ＋2px**。 ★ ★min-height:0 で 直そうと したら、★こんどは **25.6px まで 縮み**、★−4.4px に なりました。 ★ → ★正しい 直し方は 型の とおり ★**はみ出しを margin-bottom で 返す** こと。 ★★返す 量は「44px − ★その 画面の `.back` の 高さ」。★.back が 帯の 床だからです。 ★★★こうすると ボタンの 外まわりが .back と 同じ 高さに なり、 ★帯の 縮み方は ★**前と 1文字も 変わりません**【★実測 0/13】。 ★★★見つけたのは 数字の 見張りです ―― ★2px は 私の 目には 見えません。 ============================================================ */ @media (max-width:650px) { .quit-btn { margin-bottom:-8px; } } /* ★.back 36px */ @media (orientation:portrait) and (max-width:650px) and (max-height:700px) { .quit-btn { margin-bottom:-14px; } /* ★.back 30px */ } @media (orientation:landscape) and (max-height:560px) and (min-width:560px) { .quit-btn { margin-bottom:-14px; } /* ★.back 30px */ } /* ============================================================ ★T293 ― 見えない 押し代（指の的だけ 44px に する） ------------------------------------------------------------ ★ お手本：T118（フリーセルの `.tool::after`）／T289（アト・19個）／T291（コーダ・15個） ★ `::after` は **ならびに 入りません**。だから ★★見た目の 箱は 1pxも 伸びません（★実測で 確かめて います）。 ★ `z-index:0` は T289 §3-② の わな（★`position:relative` だけを 足すと ★遠くの 丸かどが 色1つぶん ずれる）を 起こさない ため。 ★★ `