/* 落として四つ並べ: 夏の夕方の縁台の世界（藍染めの空色の地・青竹の緑の主なボタン・木の盤・朱と墨のコマ。ホームの theme と同じ組）。座標は枠の中の px（1080×720 / 720×1080）
   ボタン・入力欄・枠・見出し・共有は /ui.css（ui-btn / ui-input / ui-panel / ui-title / ui-pill）。ここでは並べ方と盤と色の割り当てだけを決める
   2026-10-23 手直し: 地は「藍の空色」hsl(208,42%,74%)、窓と帯は hsl(208,46%,83%)。強い色（朱・木・墨）は盤・コマ・ボタン・題字。一番後ろ（枠の外）の色は共通のまま触らない
   コントラスト: 文字 #1f2733 / 地 7.9・窓 9.6、薄い文字 #2c3a4a / 地 6.1、青竹のボタン #2e6a45 と字 #f7f4ee 5.9（色相 143° で地の 208° と離す。朱はコマだけ） */
:root{--bg:#a1bfd9;--card:#c0d5e8;--ink:#1f2733;--sub:#2c3a4a;--line:#7496b4;--ai:#2d5276;--btn:#2e6a45;--aiInk:#f7f4ee;--shu:#b5452f;--sumi:#2b2118;--wood:#a8743f;--woodD:#7a4f26;--gold:#e0a92a;
  --linen:#c0d5e8;--hover:#adc8e1}
html,body{margin:0;height:100%}
body{color:var(--ink);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}
.shell-stage{background:var(--bg)}

/* ホーム・帯・小さなウィンドウ・結果: 空色の地に墨の字。主なボタンは青竹の緑に白い字、ほかは墨の線のボタン */
.shell-stage .sh-home .ui-btn.sub,.shell-stage .sh-bar .ui-btn.sub,.shell-stage .sh-box .ui-btn.sub,.shell-stage .sh-result .ui-btn.sub,.shell-stage .sh-acts .ui-btn.sub{background:var(--card);color:var(--ink);border:2px solid var(--sumi);box-shadow:none}
.shell-stage .sh-home .ui-btn.sub:hover,.shell-stage .sh-bar .ui-btn.sub:hover,.shell-stage .sh-box .ui-btn.sub:hover,.shell-stage .sh-acts .ui-btn.sub:hover{background:var(--hover)}
.shell-stage .sh-home .ui-btn:not(.sub),.shell-stage .sh-acts .ui-btn:not(.sub),.shell-stage .sh-box .ui-btn:not(.sub),.shell-stage .sh-result .ui-btn:not(.sub){background:var(--btn);color:var(--aiInk);border-color:var(--btn);box-shadow:none}
.shell-stage .sh-home .ui-count,.shell-stage .sh-home .shell-wait{color:var(--sub)}
.shell-stage .sh-home .ui-count b{color:var(--ink)}
.shell-stage .sh-home .ui-count:empty{display:none}
.shell-stage .sh-tabs button[aria-selected="true"]{background:var(--btn);color:var(--aiInk);border-color:var(--btn)}
/* 小さなウィンドウ: 縁は木の色の細い線（共通の縁取りの色だけ替える。大きさは変えない） */
.shell-stage .sh-box{box-shadow:0 0 0 2px var(--woodD)}
.shell-stage .sh-art{background:var(--linen)}
/* 遊んでいる最中の帯: 明るい空色の帯に墨の字、下に木の縁 */
.shell-stage .sh-bar{background:var(--linen);color:var(--ink);border-bottom:3px solid var(--woodD)}
.shell-stage .sh-bar .sh-info2{color:var(--sub)}
/* 結果の画面も空色の地 */
.shell-stage .sh-result{--ui-shade:rgba(161,191,217,.97);color:var(--ink)}
.shell-stage .sh-result li.me{background:rgba(192,213,232,.9)}
.sh-box .k4-rtab th,.sh-box .k4-rtab td{border-bottom-color:var(--line)}

/* 盤の画面（部屋の party.js も）: 同じ空色の地、主なボタンは青竹の緑 */
.k4-view{--ui-red:#2e6a45;--ui-red-ink:#f7f4ee;--ui-card:#c0d5e8;--ui-ink:#1f2733;--ui-sub:#2c3a4a}
.k4-view{position:absolute;left:0;top:0;color:var(--ink);background:var(--bg);overflow:hidden;user-select:none;-webkit-user-select:none}
.k4-view .ui-panel{background:var(--card);color:var(--ink);box-shadow:none}
.k4-view .ui-btn:not(.sub){background:var(--btn);color:var(--aiInk);border-color:var(--btn);box-shadow:none}
.k4-view .ui-btn.sub{background:var(--card);color:var(--ink);border:2px solid var(--sumi);box-shadow:none}
.k4-view *{box-sizing:border-box}
.k4-head,.k4-foot{position:absolute;display:flex;flex-direction:column;gap:12px}
.k4-head{margin:0}
.k4-dot{display:inline-block;flex:none;width:.9em;height:.9em;border-radius:50%;vertical-align:-.08em;margin-right:.35em}
.k4-d1{background:var(--shu)}
.k4-d2{background:var(--sumi)}

/* 上の欄（白いカード） */
.k4-title{margin:0;font-size:30px;line-height:1.1}
.k4-vs{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:700;flex-wrap:wrap}
.k4-vs em{font-style:normal;font-size:20px;opacity:.6}
.k4-turn{display:flex;align-items:center;font-size:40px;font-weight:900;line-height:1.15;padding:10px 0;border-top:2px solid var(--ai);border-bottom:2px solid var(--ai)}
.k4-turn b{font-weight:900}
.k4-think .k4-dot{animation:k4blink .8s ease-in-out infinite alternate}
@keyframes k4blink{to{opacity:.25}}
.k4-tip{margin:0;font-size:23px;line-height:1.5;min-height:2.6em;word-break:keep-all;overflow-wrap:anywhere}
.k4-tip b{font-weight:900;font-size:1.12em}
.k4-res{font-size:52px;font-weight:900;line-height:1.15;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.k4-r1{color:var(--shu)}
/* 帯のゲーム名もホームの題字と同じ書体に */
.sh-bar > b{font-family:'Mochiy Pop One',sans-serif;font-weight:400}
.k4-sharebox{margin-top:auto}

/* 下の欄のボタン（大きさと並びだけ） */
.k4-foot{font-size:28px;font-weight:700}
.k4-act{min-height:60px;font-size:inherit;line-height:1.15}
.k4-act small{font-size:.66em}
.k4-stars{display:block;letter-spacing:.08em;line-height:1.1}
.k4-stars i{font-style:normal;opacity:.22}
.k4-st1{color:#d9a597}.k4-st2{color:#c8735f}.k4-st3{color:var(--shu)}
.ui-btn:not(.sub) .k4-stars{color:var(--aiInk)}
.k4-land .k4-foot .k4-act{flex:1}
.k4-port .k4-foot{flex-direction:row;align-items:stretch;padding-bottom:8px;font-size:28px}
.k4-port .k4-foot .k4-act{flex:1;min-height:96px}

/* 縦の上の欄 */
.k4-port .k4-head{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:8px;align-content:start}
.k4-port .k4-title{font-size:26px}
.k4-port .k4-vs{grid-column:1/3;font-size:22px}
.k4-port .k4-turn{grid-column:1/3;font-size:34px;padding:6px 0}
.k4-port .k4-tip{grid-column:1/3;font-size:21px;line-height:1.4;min-height:0}
.k4-port .k4-res{grid-column:1/3;font-size:40px;padding:4px 0}
.k4-port .k4-sharebox{grid-column:1/3;margin:0}
.k4-port .k4-score{grid-column:1/3}

/* 盤 */
.k4-board{position:absolute}
.k4-back{position:absolute;left:0;width:100%;background:#bfd2e3}
.k4-layer{position:absolute;inset:0;overflow:hidden}
.k4-frame{position:absolute;left:0;display:block;pointer-events:none}
.k4-wood{fill:var(--wood)}
.k4-rim{fill:none;stroke:var(--woodD);stroke-width:3}
.k4-edge{fill:none;stroke:var(--woodD);stroke-width:4}
.k4-p{position:absolute;width:78px;height:78px;box-sizing:border-box;border-radius:50%;border:8px solid rgba(0,0,0,.14)}
.k4-p1{background:var(--shu)}
.k4-p2{background:var(--sumi);border-color:rgba(255,255,255,.1)}
.k4-ghost{opacity:.45}
.k4-col{position:absolute;background:rgba(255,255,255,.3);pointer-events:none}
.k4-bob{animation:k4bob .9s ease-in-out infinite alternate}
@keyframes k4bob{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.k4-hit{position:absolute;top:0;height:100%;cursor:default}
.k4-on .k4-hit{cursor:pointer}
.k4-on .k4-hit.k4-cur{background:rgba(255,255,255,.18)}
/* 押せないとき（CPU・相手の番・観戦中）: 盤の木を薄くし、押すと列の上に理由が出る（ux U6） */
.k4-off:not(.k4-done) .k4-frame{opacity:.6}
.k4-off:not(.k4-done) .k4-hit{cursor:not-allowed}
/* ヒントの印は盤の上の地（--bg）に出る。◎ は濃い藍（地と 10:1）、× は濃い朱（地と 5.2:1）。縁取りなしで読める色にする */
.k4-mark{position:absolute;display:flex;align-items:center;justify-content:center;font-size:62px;font-weight:900;line-height:1;pointer-events:none;color:#16304a}
.k4-mark.k4-bad{color:#7a2412}
/* 満杯の列を押したとき: 列の上に「いっぱい」を出して横に揺らす */
.k4-full{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;line-height:1;white-space:nowrap;pointer-events:none;color:#7a2412}
.k4-win{animation:k4win .55s ease-in-out infinite alternate;outline:6px solid var(--gold);outline-offset:3px}
@keyframes k4win{from{transform:scale(1)}to{transform:scale(.84)}}
.k4-done .k4-p:not(.k4-win):not(.k4-ghost){filter:saturate(.55) brightness(1.08)}

/* 決着の判子 */
.k4-stamp{position:absolute;z-index:15;pointer-events:none;font-size:150px;font-weight:900;line-height:1;padding:22px 30px;border:12px solid currentColor;border-radius:6px;background:rgba(192,213,232,.96);white-space:nowrap;transform:translate(-50%,-50%) rotate(-8deg);animation:k4stamp 1.9s cubic-bezier(.2,.9,.3,1) forwards}
.k4-s1{color:var(--shu)}
.k4-s2{color:var(--sumi)}
@keyframes k4stamp{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.3)}
  16%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  21%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.06)}
  27%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.96)}}

.k4-row{display:flex;gap:12px;align-items:stretch}
.k4-row .k4-act{flex:1}
.k4-note{margin:0;font-size:18px;line-height:1.6;opacity:.8}

/* ひとりのページ: 共通の帯（上 64px）・右下の操作の置き場を空けた並び */
.k4-foot[hidden],.k4-view[hidden]{display:none}
.k4-solo .k4-head{gap:16px}
.k4-solo .k4-tip{font-size:24px}
.k4-land.k4-solo .k4-turn{font-size:34px}
.k4-port.k4-solo .k4-head{grid-template-rows:auto auto auto;gap:10px}
.k4-act:disabled{opacity:.45}
.k4-rsub{margin:-6px 0 0;font-size:24px}
/* ホーム: 左の絵は CPU 同士のデモ（押しても何も起きない） */
.k4-art{position:absolute;transform-origin:0 0;pointer-events:none}
/* 遊び方の図（guide.js）: 260×160 の静止画。縦の枠では真ん中に置く */
.k4-gp{position:absolute;left:50%;top:50%;width:260px;height:160px;transform:translate(-50%,-50%);font-family:inherit}
.k4-gp *{animation:none!important}
.k4-gsvg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
/* 小さなウィンドウ（shell.panel）の中身: 詳しく・設定・遊び方 */
.k4-det{display:flex;flex-direction:column;gap:12px;font-size:20px;line-height:1.6;overflow-wrap:anywhere}
.k4-det p{margin:0}
.k4-dsec{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.k4-dsec b{min-width:6em}
.k4-dsec .k4-row{flex:1}
.k4-det .k4-act{min-height:48px;font-size:20px;padding:6px 14px}
.k4-rtab{border-collapse:collapse;font-size:18px;width:100%}
.k4-rtab th,.k4-rtab td{border-bottom:1px solid var(--line);padding:6px;text-align:center}
.k4-rtab tbody th{text-align:left;white-space:nowrap}
.k4-rtab thead th{font-size:15px;font-weight:700;white-space:nowrap}
.k4-rtab td{white-space:nowrap}
.k4-rtab .k4-rw{font-size:26px;font-weight:900}
.k4-rtab .k4-rsm{font-size:15px}
.k4-rtot{font-size:20px}
.k4-rtot b{font-size:40px;font-weight:900;margin:0 4px}

/* 部屋で: 勝ち数 */
.k4-score{font-size:22px;font-weight:700}
/* 部屋で: 相手待ちの合言葉 */
.k4-code{font-size:20px;font-weight:700}
.k4-code b{display:block;font-size:44px;letter-spacing:.08em;user-select:text;-webkit-user-select:text}
.k4-port .k4-foot:has(.k4-code){flex-wrap:wrap;align-items:center}
.k4-foot .k4-sharebox{margin-top:0}