/* トランプ・カジノの「明るく落ち着いた」シリーズ（2026-10-23 持ち主）。地 #E9E8E3・墨色の文字・えんじのボタン。卓と札の裏は cards.js の共通のまま */
:root{--paper:#E9E8E3;--paper2:#C9C7BF;--ink:#1E2B27;--po-hot:#8E3B2E}
/* シリーズの色の組（app.js の THEME と同じ）。ホーム・遊んでいる最中の帯・結果・部屋の箱をそろえる。枠の外の色（--ui-gamebg）は共通のまま触らない */
.shell-stage,.po-tb{--ui-red:#8E3B2E;--ui-red-ink:#FFFFFF;--ui-card:#E9E8E3;--ui-ink:#1E2B27;--ui-sub:#5C6660;--ui-chip:#DEDCD5;--ui-shade:rgba(233,232,227,.97);--ui-paper:#E9E8E3;--ui-soft:#C9C7BF;--ui-display:"Shippori Mincho B1",serif}
/* 2 つ目以降のボタン（下の段・帯・パス）: 墨色の細い線、地は透明 */
.shell-stage :is(.sh-home,.sh-bar,.sh-acts,.sh-box header) .ui-btn.sub,.po-tb .ui-btn.sub{background:transparent;color:#1E2B27;border:1.5px solid #1E2B27;box-shadow:none}
.shell-stage :is(.sh-home,.sh-bar,.sh-acts) .ui-btn.sub:hover,.po-tb .ui-btn.sub:hover{background:#DEDCD5}
/* 主なボタン（ひとりで遊ぶ・だれかと遊ぶ・ページワン・はじめる・もう一回）はえんじに白い字 */
.shell-stage :is(.sh-solo,.sh-room,.sh-acts,.sh-rb) .ui-btn:not(.sub),.po-tb :is(.po-pacts,.po-wait,.po-endslot) .ui-btn:not(.sub){background:#8E3B2E;color:#FFFFFF;border:0;box-shadow:none}
.shell-stage .ui-chip,.po-tb .ui-chip{background:transparent;color:var(--ink);border:1.5px solid #5C6660;box-shadow:none}
.shell-stage .ui-chip[aria-pressed="true"],.po-tb .ui-chip[aria-pressed="true"]{background:#8E3B2E;border-color:#8E3B2E;color:#FFFFFF}
/* 題字: 76px・1 行 */
.shell-stage .sh-logo svg{height:76px;width:auto;max-width:100%}
/* 小さなウィンドウは細い線で区切る（影なし） */
.shell-stage .sh-box{border:1px solid #C9C7BF;box-shadow:none}
.shell-stage .sh-box header{border-bottom:1px solid #C9C7BF}
.shell-stage{background:var(--paper);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;user-select:none;-webkit-user-select:none}
.shell-stage *{box-sizing:border-box}
/* class 名はすべて po- を付ける（共通部品の .wait などとぶつけない。2026-10-21） */
/* 札・卓・席・手札・一言の帯は cards.js（C.layout / C.cardEl / C.renderHand）のまま。ここでは場の並べ方と席の幅だけ決める（2026-10-22） */

/* 部屋の箱（ctx.el の中の 1080×720 / 720×1080） */
.po-tb{position:absolute;overflow:hidden;background:var(--paper);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;user-select:none;-webkit-user-select:none}
.po-tb *{box-sizing:border-box}

/* 席: 名前と状態は切らずに小さくする（table.js の fitSeats）。横は 5 席が 1 行、縦は 3 席ずつ */
.po-L .cd-seats{flex-wrap:wrap;row-gap:8px;justify-content:center}
.po-L .cd-seat>div{min-width:0;flex:1}
.po-L .cd-seat span{overflow:hidden}
.po-L.po-ls .cd-seat{max-width:calc((100% - 40px) / 5)}
.po-L.po-pt .cd-seat{width:calc((100% - 20px) / 3)}
.po-L.po-pt .cd-seat b{max-width:none}

/* 場: 山（押すと引く）と場の札 */
.po-L .cd-field{gap:56px}
.po-deck{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:700 20px "Zen Kaku Gothic New",sans-serif;cursor:pointer}
.po-deck:disabled{cursor:default}
.po-deck.po-empty .cd{opacity:.3}
.po-deck.po-off{cursor:default}
.po-deck.po-off .cd,.po-deck.po-off .po-dk{opacity:.45}
.po-pile{position:relative;margin-bottom:30px}
.po-pile .cd{position:absolute;left:0;top:0}
.po-pile .po-u0{transform:rotate(-9deg) translate(-6px,2px)}
.po-pile .po-u1{transform:rotate(6deg) translate(4px,-1px)}
.po-L .po-fly{position:absolute;z-index:30;pointer-events:none}

/* 右下の操作（shell.bar の acts。部屋は同じ場所の .po-pacts）。卓の下の空き（横 100px・縦 108px）に 1 段で収める */
.po-pacts{position:absolute;right:20px;bottom:20px;display:flex;gap:12px;z-index:20}
.po-pt .po-pacts{left:20px;justify-content:flex-end}
.po-acts .ui-btn{font-size:26px;padding:14px 32px;white-space:nowrap}
.po-acts .po-onebtn small{font-size:13px;margin-left:8px;opacity:.6}
.po-acts .po-onebtn.po-ready{animation:po-k-ring .9s ease-in-out infinite}
@keyframes po-k-ring{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion: reduce){.po-acts .po-onebtn.po-ready{animation:none}}

/* 結果（部屋だけ）。出している間だけ画面いっぱいに広げる */
.po-endbox{position:absolute;inset:0;background:rgba(233,232,227,.97);display:flex;align-items:center;justify-content:center;z-index:40}
.po-endp{min-width:440px;max-width:92%;text-align:center}
.po-endl{list-style:none;padding:0;margin:12px 0 16px;font-size:20px}
.po-endl li{display:grid;grid-template-columns:70px 1fr 120px;gap:8px;padding:6px 4px;border-bottom:1px solid var(--paper2);text-align:left}
.po-endl li.po-me{font-weight:900}
.po-endslot{display:flex;flex-direction:column;gap:12px;align-items:center}

/* ホーム（shell.home の h.art の CPU 同士のデモ・設定の小さなウィンドウの中身） */
.sh-art:has(.po-demo){background:var(--paper);outline:1px solid #C9C7BF;outline-offset:-1px}
.po-demo{position:absolute;transform-origin:0 0;pointer-events:none}
.po-demo *{pointer-events:none!important}
.po-det{font-size:19px;color:var(--ink)}
.po-det .po-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.po-det .po-opt>span{min-width:120px}
.po-rec{margin:4px 0;color:var(--ink)}
.po-rbig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.po-rbig>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-top:3px solid var(--ui-red)}
.po-rbig span{font-size:16px;white-space:nowrap}
.po-rbig b{font:700 44px/1.1 "Roboto Slab",serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.po-rbig small{font:700 16px "Zen Kaku Gothic New",sans-serif;margin-left:4px}
.po-rsub{margin:12px 0 0;font-size:17px;text-align:center}

/* 帯の一言は 1 行に収める */
.shell-stage .sh-bar .sh-info2{white-space:nowrap}
/* 角丸は 6px まで（共通の結果の自分の行） */
.shell-stage .sh-result li{border-radius:4px}

/* 部屋の待つ画面 */
.po-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:40px;gap:16px}
.po-wait h2{font-size:44px;margin:0}
.po-wait .po-who{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px}
.po-wait .po-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.po-wait .po-note{font-size:18px;margin:0}
.po-wait .po-big{font-size:28px;padding:16px 48px}

/* 遊び方の図（shell.guide の .sh-pic の中。本番と同じ C.layout を 650×400 で組んで 0.4 倍。260×160） */
.po-gp{position:absolute;left:50%;top:50%;width:260px;height:160px;transform:translate(-50%,-50%);background:var(--paper);overflow:hidden;font-family:"Zen Kaku Gothic New",sans-serif;color:var(--ink)}
.po-gv{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;--cd-w:56px}
.po-gv .po-gL.cd-layout{left:8px;right:8px;top:8px;bottom:64px;padding:10px 14px 8px;gap:8px}
.po-gv .cd-field{gap:40px}
.po-gv .po-pile{margin-bottom:0}
.po-gv .po-dk{display:none}
.po-gacts{position:absolute;right:14px;bottom:8px;display:flex;gap:10px}
.po-gacts .ui-btn{font-size:22px;padding:8px 20px;white-space:nowrap}
.po-gring{position:absolute;z-index:5;border:2px solid var(--po-hot);border-radius:6px;pointer-events:none}
.po-garrow{position:absolute;left:0;top:0;width:260px;height:160px;z-index:6;pointer-events:none;overflow:visible}
.po-garrow line{stroke:var(--po-hot);stroke-width:3;stroke-linecap:round}
.po-garrow polygon{fill:var(--po-hot)}
.po-gtag{position:absolute;z-index:7;background:var(--ink);color:#FFFFFF;font-weight:700;font-size:12px;line-height:1.3;padding:2px 6px;white-space:nowrap;pointer-events:none}
.po-gtag.po-gred{background:var(--po-hot)}

/* 押した手は返事を待つ間も見た目ですぐ返す（部屋は host の返事が来てから盤面が変わる。U4） */
.po-L .cd.po-go{transform:translateY(-30%);opacity:.6}
.po-deck.po-go .cd{transform:translateY(-8%);opacity:.6}