/* 戦争。ボタン・枠・見出しは /ui.css、カード・卓・席・一言の帯・手札の並びは cards.js（C.layout）。ここは場の中の並びと場面の色だけ */
/* 色の組（2026-10-23 明るく落ち着いたトランプ・カジノのシリーズ共通）: 地 #E9E8E3・字 #1E2B27・薄い字 #5C6660・えんじ #8E3B2E（ボタンの字 #FFFFFF）。部屋でも同じ色になるよう .wr にも持たせる。卓と札の裏は cards.js のまま */
.shell-stage { --ui-shade:rgba(233,232,227,.97); --ui-paper:#E9E8E3; --ui-soft:#C9C7BF; --ui-chip:rgba(142,59,46,.10); background:#E9E8E3; }
.wr { --paper:#E9E8E3; --ink:#1E2B27; --red:#8E3B2E; --gold:#C9A24B; --ui-red:#8E3B2E; --ui-red-ink:#FFFFFF; --ui-ink:#1E2B27; --ui-sub:#5C6660; --ui-card:#E9E8E3; position:relative; width:100%; height:100%; background:var(--paper); color:var(--ink); overflow:hidden; }
/* 地の上のボタン: 主はえんじに白い字、ほか（sub・チップ）は透明の地に墨色の細い線と字 */
.shell-stage .ui-btn:not(.sub), .wr .ui-btn:not(.sub) { background:#8E3B2E; color:#FFFFFF; border-color:#8E3B2E; box-shadow:none; background-image:none; }
.shell-stage .ui-btn.sub, .wr .ui-btn.sub, .shell-stage .ui-chip, .wr .ui-chip { background:transparent; color:#1E2B27; border:1px solid #1E2B27; box-shadow:none; background-image:none; }
.shell-stage .ui-btn.sub:hover, .wr .ui-btn.sub:hover, .shell-stage .ui-chip:hover { background:#DEDCD5; color:#1E2B27; }
.shell-stage .sh-tabs button[aria-selected="true"] { background:#8E3B2E; color:#FFFFFF; border-color:#8E3B2E; }
.shell-stage .ui-input, .wr .ui-input { background:transparent; color:#1E2B27; border:1px solid #1E2B27; }
.shell-stage .ui-panel, .wr .ui-panel { background:#E9E8E3; color:#1E2B27; border:1px solid #C9C7BF; box-shadow:none; }
.shell-stage .sh-box { background:#E9E8E3; color:#1E2B27; box-shadow:0 0 0 1px #C9C7BF; }
/* 遊んでいる最中の帯: 地と同じ組に、下に細い線 */
.shell-stage .sh-bar { background:#E9E8E3; color:#1E2B27; border-bottom:1px solid #C9C7BF; box-shadow:none; }
.shell-stage .sh-bar .sh-info2 { color:#5C6660; }
/* 卓は cards.js の緑のまま */
.wr-logo { display:block; height:76px; width:auto; max-width:100%; }
.wr * { box-sizing:border-box; }
.wr [hidden] { display:none !important; }

/* ---------- ホーム（共通の shell.home。ここは絵＝CPU 同士のデモと、設定の中だけ） ---------- */
.wr.wr-demo { position:absolute; left:0; top:0; width:1080px; height:720px; transform-origin:0 0; pointer-events:none; user-select:none; }
.wr-more { font-size:20px; }
.wr-opt { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.wr-opt > span { min-width:3.5em; }
.shell-stage .wr-opt .ui-chip[aria-pressed="true"] { background:#8E3B2E; color:#FFFFFF; border-color:#8E3B2E; }

/* ---------- 卓（cards.js の C.layout）。場（L.field）の中に 1 人ずつめくった札を並べる ---------- */
/* cards.js の CSS はあとから入るので、同じ強さだと負ける。[hidden] は 1 段強くする */
.cd-layout.cd-table[hidden], .wr-pbar[hidden], .wr-acts[hidden] { display:none; }
.wr-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:16px; max-width:100%; }
.wr-fs { --cd-w:96px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 12px; border:2px solid transparent; border-radius:6px; min-width:0; max-width:100%; transition:border-color .2s; }
.wr-fs.me { --cd-w:112px; border-color:rgba(255,255,255,.22); }
.wr-fs.win { border-color:var(--gold, #C9A24B); border-width:4px; padding:6px 10px; }
.wr-fs.war { border-color:#fff; border-style:dashed; }
.wr-fn { font-size:20px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-variant-numeric:tabular-nums; }
.wr-fc { display:flex; align-items:center; gap:10px; min-width:0; }
.wr-prev { display:flex; align-items:center; --cd-w:46px; }
.wr-prev > * + * { margin-left:-24px; }
.wr-prev > .cd { filter:grayscale(.3) brightness(.92); }
.wr-down { position:relative; display:inline-flex; }
.wr-down b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.wr-ph { width:var(--cd-w); height:calc(var(--cd-w) * 1.4); border:2px dashed rgba(255,255,255,.3); border-radius:calc(var(--cd-w) * .12); flex:none; }
.wr-flip { animation:wr-flip .22s ease-out; }
@keyframes wr-flip { from { transform:rotateY(90deg) translateY(-10px); } to { transform:none; } }
/* 縦の枠: 場は 2 人ずつ 2 段 */
.wr-lay.wr-port .wr-row { max-width:560px; }
.wr-lay.wr-port .wr-fs { --cd-w:104px; }
.wr-lay.wr-port .wr-fs.me { --cd-w:116px; }

/* 右下の操作のボタン（shell.bar の acts。部屋では同じ位置に置く .wr-acts） */
.sh-acts .ui-btn[aria-pressed="true"], .wr-acts .ui-btn[aria-pressed="true"] { outline:3px solid #1E2B27; outline-offset:2px; }
.wr-acts { position:absolute; right:20px; bottom:20px; display:flex; gap:12px; z-index:20; }
.wr-pbar { position:absolute; left:0; right:0; top:0; height:64px; display:flex; align-items:center; padding:0 20px; font-size:22px; font-weight:700; color:#1E2B27; background:#E9E8E3; border-bottom:1px solid #C9C7BF; z-index:20; font-variant-numeric:tabular-nums; }

/* ---------- 結果・待つ画面 ---------- */
.wr-over { position:absolute; inset:0; background:rgba(233,232,227,.97); display:flex; align-items:center; justify-content:center; padding:24px; z-index:30; }
.wr-over .ui-panel { width:min(560px, 100%); display:flex; flex-direction:column; gap:14px; }
.wr-over .ui-title { margin:0; }
.wr-big { font-size:24px; margin:0; }
.wr-rank { list-style:none; margin:0; padding:0; font-size:22px; }
.wr-rank li { display:flex; gap:14px; padding:8px 4px; border-bottom:1px solid rgba(30,43,39,.18); }
.wr-rank li.me { font-weight:700; color:var(--red); }
.wr-rank .pl { width:3.2em; font-variant-numeric:tabular-nums; }
.wr-rank .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wr-rank .ct { font-variant-numeric:tabular-nums; }
.wr-note { font-size:16px; color:#5C6660; margin:0; }
.wr-over .ui-panel { max-height:100%; overflow:auto; }
.wr-rank.sm { font-size:18px; }
.wr-rank.sm li { padding:4px; }
.wr-name { width:10em; }
.wr-best { font-size:20px; font-weight:700; color:#8E3B2E; margin:0 0 6px; }
.wr-recs { font-size:20px; }
.wr-rec { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 16px; }
.wr-rec li { display:flex; flex-direction:column; gap:2px; padding:8px 0; border-bottom:1px solid rgba(30,43,39,.18); }
.wr-rec li span { font-size:16px; color:#5C6660; white-space:nowrap; }
.wr-rec li b { font-size:24px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wr-pb { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 8px; padding:4px 14px; border-left:4px solid #8E3B2E; }
.wr-pb span { font-size:18px; }
.wr-pb b { font-size:40px; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wr-resx { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:420px; }
/* 結果: ランキングを足すと高くなるので、はみ出すときは上から並べてスクロール（ボタンが枠の外に出ない） */
.sh-result.wr-res { justify-content:safe center; overflow-y:auto; padding:20px 0; gap:12px; background:#E9E8E3; color:#1E2B27; }
.sh-result.wr-res h2 { font-family:"Shippori Mincho B1", var(--ui-display); color:#1E2B27; }

.wr-wait { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:40px; text-align:center; }
.wr-wait .ui-title { margin:0; letter-spacing:.12em; font-family:"Shippori Mincho B1", var(--ui-display); color:#1E2B27; }
.wr-wait .ui-panel { width:min(560px, 100%); text-align:left; display:flex; flex-direction:column; gap:12px; }
.wr-names { list-style:none; margin:0; padding:0; font-size:22px; }
.wr-names li { padding:6px 0; border-bottom:1px solid rgba(30,43,39,.18); }
.wr-names li.watch { color:#5C6660; }

@media (prefers-reduced-motion: reduce) { .wr-flip { animation:none; } }

/* ---------- 遊び方の図（guide.js）。本番と同じ C.layout を 540×333 の枠で描き、渡された箱（ホーム 260×160・部屋の説明画面 200×124 など）に合わせて guide.js が縮める ---------- */
.wr-g { --gold:#C9A24B; position:absolute; left:0; top:0; width:540px; height:333px; max-width:none; max-height:none;
  transform-origin:0 0; background:#E9E8E3; color:#1E2B27; overflow:hidden; pointer-events:none; }
.wr-g .cd-layout.cd-table { left:6px; right:6px; top:6px; bottom:6px; padding:8px 10px; gap:8px; --cd-w:36px; }
.wr-g .wr-fs { --cd-w:44px; padding:4px 8px; gap:4px; }
.wr-g .wr-fs.me { --cd-w:48px; }
.wr-g .wr-fn { font-size:18px; }
.wr-g .wr-prev { --cd-w:30px; }
.wr-g.sm .cd-layout.cd-table { --cd-w:28px; }
.wr-g.sm .wr-fs { --cd-w:30px; padding:2px 8px; }
.wr-g.sm .wr-fs.me { --cd-w:32px; }
.wr-g.sm .wr-fn { font-size:16px; }
.wr-g .wr-prev > * + * { margin-left:-18px; }
.wr-g .wr-row { gap:10px; flex-wrap:nowrap; }
.wr-g .wr-cards { display:flex; justify-content:center; align-items:center; gap:10px; }
.wr-g .wr-rank { color:#1E2B27; font-size:20px; width:380px; }
.wr-g .wr-rank li { padding:3px 8px; border-bottom-color:rgba(30,43,39,.18); }
.wr-g .wr-rank li.me { color:#8E3B2E; }
.wr-gbtn { position:absolute; padding:10px 18px; border-radius:6px; background:#8E3B2E; color:#FFFFFF; font-size:22px; font-weight:700; white-space:nowrap; }
.wr-gbtn.sub { background:transparent; color:#1E2B27; border:1px solid #1E2B27; font-weight:400; }
.wr-gbar { background:#E9E8E3; color:#1E2B27; border-bottom:1px solid #C9C7BF; }
.wr-gbar { position:absolute; left:0; right:0; top:0; height:56px; display:flex; align-items:center; gap:14px; padding:0 14px; font-size:20px; }
.wr-gbar b { font-size:24px; }
.wr-gkey { position:absolute; height:48px; display:flex; align-items:center; justify-content:center; padding:0 16px; border-radius:6px; background:transparent; color:#1E2B27; font-size:22px; font-weight:700; border:1px solid #1E2B27; border-bottom-width:4px; }
.wr-gring { position:absolute; border:5px solid #8E3B2E; border-radius:50%; pointer-events:none; z-index:3; }
.wr-garrow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.wr-garrow line { stroke:#8E3B2E; stroke-width:5; stroke-linecap:round; }
.wr-garrow polygon { fill:#8E3B2E; }
/* 設定の図（卓ではない画面） */
.wr-gset { position:absolute; inset:0; padding:40px 30px; font-size:24px; }

/* ---------- ホームの背景（shell.home の backdrop）。ぶつかる札・3 枚伏せて 1 枚を #DEDCD5 だけで散らした模様 ---------- */
.wr-bd { position:absolute; inset:0; width:100%; height:100%; }