/* ペアめくり対戦: 場面の置き方だけ。カード・卓・席・一言の帯・手札・考え中の見た目は cards.js（C.layout）、ボタン・枠・見出し・書体は /ui.css、ホーム・帯・結果は shell.js のまま使う */
/* 色の組（2026-10-23 持ち主の指示）: トランプ・カジノ共通の「明るく落ち着いた」シリーズ。地 #E9E8E3・墨色の字 #1E2B27・薄い字 #5C6660・えんじのボタン #8E3B2E（字は白）。ホーム（main.js の theme）と同じ値 */
/* 卓（共通の緑）と札の裏（共通）は cards.js のまま。角丸 6px まで・影なし・グラデーションなし */
:root{--ink:#1E2B27;--pm-accent:#8E3B2E;--pm-accent-ink:#FFFFFF;--pm-paper:#E9E8E3;--pm-sub:#5C6660;--pm-line:rgba(30,43,39,.22)}
body{margin:0;-webkit-tap-highlight-color:transparent}
/* 遊んでいる最中（ひとり・部屋）も同じ色の組: 地・帯・右下のボタン・一言の帯・題字の書体 */
.shell-stage,.pm-view,.pm-acts,.pm-wait{--ui-red:var(--pm-accent);--ui-red-ink:var(--pm-accent-ink);--ui-card:var(--pm-paper);--ui-ink:var(--ink);--ui-sub:var(--pm-sub);--ui-chip:rgba(142,59,46,.12);--ui-display:"Shippori Mincho B1",serif;--ui-shade:rgba(233,232,227,.97)}
.shell-game .shell-stage{background:var(--pm-paper)}
.shell-stage .sh-bar{background:var(--pm-paper);border-bottom:1px solid var(--pm-line)}
.shell-stage .sh-box{box-shadow:none;border:1px solid var(--pm-line)}
.shell-stage .sh-box header{border-bottom:1px solid var(--pm-line);padding-bottom:10px}
.pm-view .cd-say.me{background:var(--pm-accent);color:var(--pm-accent-ink)}
/* 主なボタンはえんじ。2 つ目以降（友だちと遊ぶ・下の段など）は細い線のボタン（線と字は墨色・地は透明） */
.shell-stage .ui-btn:not(.sub){background:var(--pm-accent);color:var(--pm-accent-ink);border-color:var(--pm-accent);box-shadow:none;border-radius:6px}
.shell-stage .ui-btn.sub{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none;border-radius:6px}
.shell-stage .ui-btn.sub:hover:not(:disabled){background:rgba(30,43,39,.08);color:var(--ink)}
.shell-stage .sh-tabs button[aria-selected="true"]{background:var(--pm-accent);color:var(--pm-accent-ink);border-color:var(--pm-accent)}
.shell-stage .ui-input{background:#F4F3EF;color:var(--ink);border:1px solid var(--pm-sub);box-shadow:none}
.shell-stage .sh-result li.me{background:rgba(142,59,46,.12)}
/* 表彰の［もう一回］はえんじの塗り、ホームへは薄墨の線で差を付ける（大きさは共通の shell.js のまま） */
.shell-stage .sh-result .sh-rb .ui-btn.sub{color:var(--pm-sub);border-color:var(--pm-sub)}

/* 卓（cards.js の C.layout）。ここで足すのは出し入れ・席の色のしるし・場の盤の並べ方だけ */
.cd-layout.pm-view[hidden]{display:none}
.pm-view{user-select:none;-webkit-user-select:none}
.pm-view .cd-seat b::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fff;box-sizing:content-box;margin-right:8px;vertical-align:1px}
.pm-board{position:relative;flex:none}
.pm-card{position:absolute;padding:0;border:0;background:none;cursor:pointer;perspective:600px;font:inherit;color:inherit}
.pm-card:focus-visible{outline:3px solid #f2c14e;outline-offset:2px}
.pm-card .in{position:absolute;inset:0;transition:transform .24s ease-out;transform-style:preserve-3d;display:block}
.pm-card.up .in{transform:rotateY(180deg)}
.pm-card .sd{position:absolute;inset:0;width:auto;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}
.pm-card .fc{transform:rotateY(180deg)}
.pm-card.first .fc{box-shadow:0 0 0 3px #f2c14e}
.pm-card.first{cursor:default}
.pm-card.got .fc{box-shadow:0 0 0 4px var(--got)}
.pm-card.gone{visibility:hidden;pointer-events:none}
/* [U4] 押した瞬間の反応: 押している間は少し沈み、押したあと返事が来るまでは持ち上げて縁を付ける（部屋でも待たずに出る） */
.pm-card:not(:disabled):not(.up):active .in{transform:scale(.94);transition-duration:.06s}
.pm-card.pressed .in{transform:translateY(-6px)}
.pm-card.pressed .bk{outline:3px solid #f2c14e;outline-offset:1px}
.pm-next.pressed{opacity:.6}
/* 押せる範囲は札の外へ隙間の半分ずつ広げる（小さい札でも押しやすく） */
.pm-card::after{content:"";position:absolute;inset:-3px}
/* 自分の番でないとき: 伏せた札を暗く沈め、押せない（disabled）。表の札は覚えられるよう明るいまま */
.pm-card:disabled{cursor:default}
.pm-view.waiting .pm-card .bk{filter:brightness(.6) saturate(.6);transition:filter .2s}
.pm-demo .pm-view.waiting .pm-card .bk{filter:none}
/* 札は 44px より小さくしない。入りきらないときは場の中で送れる */
.pm-view .cd-field{overflow:auto;justify-content:safe center;align-items:safe center}
.pm-fly{position:absolute;inset:0;pointer-events:none}
.pm-fly > .pm-flying,.pm-hold{position:absolute}
.pm-next{white-space:nowrap}
.pm-next[hidden]{display:none}
/* 部屋（party.js）の右下の操作の場所。shell.bar の acts と同じ位置・大きさ */
.pm-acts{position:absolute;right:20px;bottom:20px;display:flex;gap:12px;z-index:20}
.pm-acts.pt{left:20px;justify-content:flex-end}
.pm-acts .ui-btn{font-size:26px;padding:14px 32px}

.pm-hl{margin:0;font-size:18px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:4px 14px;display:flex;gap:12px;align-items:baseline}
.pm-hl b{background:var(--ink);color:var(--pm-paper);font-size:14px;padding:1px 8px;letter-spacing:.1em}

.pm-how{padding-left:1.2em;margin:.4em 0;line-height:1.7;font-size:17px}
/* 帯の一言は長いと折り返して全部見せる（帯の 64px に 2 行まで収まる大きさ） */
.sh-bar .sh-info2{flex:1 1 auto;min-width:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.sh-port .sh-bar .sh-info2{font-size:15px}
.sh-port .sh-bar > b{font-size:19px;white-space:nowrap}
.sh-bar .sh-r{flex:none}
/* ホームの下の段（遊び方・設定・記録・詳しく）は入りきらなければ次の行へ */
.sh-foot{flex-wrap:wrap}

/* 遊び方の図（guide.js）。本番と同じ C.layout の並び（上に相手の席・場・一言の帯・下に取った札）を 260×160 で組み、赤い丸・矢印で指す。
   --k は渡された箱に合わせる倍率（guide.js が箱の大きさから決める。ホームは 260×160、部屋の説明画面は 200×124） */
.pm-gp{position:absolute;left:50%;top:50%;width:260px;height:160px;transform:translate(-50%,-50%) scale(var(--k,1));background:var(--pm-paper);color:var(--ink);font-family:var(--ui-body);max-width:none!important;max-height:none!important}
.pm-gp .pm-gp-tbl{position:absolute;left:4px;top:4px;width:252px;height:132px;padding:0;border-radius:6px;box-sizing:border-box}
.pm-gp-seat{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.18);color:#f4f1ea;font-size:11px;font-weight:700;white-space:nowrap}
.pm-gp-seat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);border:1.5px solid #fff;flex:none;order:2}
.pm-gp-seat span{order:3}
.pm-gp-seat.turn{background:rgba(242,193,78,.28);outline:2px solid #f2c14e}
.pm-gp-say{position:absolute;box-sizing:border-box;border-radius:4px;background:rgba(0,0,0,.25);color:#f4f1ea;font-size:11px;font-weight:700;line-height:14px;text-align:center;white-space:nowrap;overflow:hidden}
.pm-gp-say.me{background:rgba(242,193,78,.35)}
.pm-gp-mine{position:absolute;left:4px;width:252px;display:flex;justify-content:center}
.pm-gp-mine .cd + .cd{margin-left:-4px}
.pm-gp-ring{position:absolute;box-sizing:border-box;border:3px solid #e3261b;border-radius:50%;box-shadow:0 0 0 2px #fff;pointer-events:none}
.pm-gp-focus{position:absolute;box-sizing:border-box;border:3px solid #f2c14e;border-radius:6px}
.pm-gp-svg{position:absolute;left:0;top:0;width:260px;height:160px;overflow:visible;pointer-events:none}
.pm-gp-tag{position:absolute;font-size:12px;line-height:1.25;font-weight:700;white-space:pre;background:#fff;color:#1E2B27;padding:1px 5px;border-radius:4px;outline:1.5px solid rgba(27,34,51,.3)}
.pm-gp-tag.big{font-size:15px;background:none;outline:0;color:#f4f1ea}
.pm-gp-tag.win{color:#fff;background:#e3261b;outline:0}
.pm-gp-tag.num{width:16px;height:16px;padding:0;border-radius:50%;background:#e3261b;color:#fff;text-align:center;line-height:16px;font-size:11px;outline:2px solid #fff}
.pm-gp-tag.key{font-size:14px;padding:2px 7px;font-family:ui-monospace,monospace;outline:0;border:1.5px solid rgba(27,34,51,.45);border-bottom-width:3px}
.pm-gp-tag.btn{width:98px;height:18px;box-sizing:border-box;padding:0;text-align:center;line-height:18px;font-size:12px;background:var(--pm-accent);color:var(--pm-accent-ink);border-radius:5px;outline:0}
.pm-gp-tag.tap{width:20px;height:20px;padding:0;border-radius:50%;background:rgba(227,38,27,.55);outline:3px solid #fff}

/* ホームの絵（shell.home の h.art）: CPU 同士のデモ。本番と同じ C.layout の卓を縮めて流すだけで、押しても何も起きない */
.pm-demo{position:absolute;transform-origin:0 0;pointer-events:none;background:var(--pm-paper)}

/* ホームの「設定」「詳しく」の中身（shell.panel の中で送る） */
.pm-det{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.pm-det-lead{margin:0;font-size:16px;font-weight:700}
.pm-opts{display:flex;flex-direction:column;gap:8px}
.pm-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-lb{width:64px;font-size:16px;font-weight:700;flex:none}
.pm-seg{display:flex;gap:6px;flex-wrap:wrap}
.pm-seg .ui-btn{font-size:16px;padding:6px 14px}
.pm-opt-note{flex-basis:100%;padding-left:72px;font-size:14px;margin:-2px 0 0;display:flex;align-items:center;gap:8px}
.pm-mv{display:inline-flex;gap:4px;flex:none}
.pm-det-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pm-clear-hint{font-size:14px}
.pm-clear-hint[hidden]{display:none}
.pm-my{display:flex;flex-direction:column;gap:8px}
.pm-my .pm-opt-note{margin:0;padding:0}
.pm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.pm-tile{border-top:2px solid var(--pm-line);padding:6px 10px 6px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-tile span{font-size:14px;line-height:1.3}
.pm-tile b{font-size:34px;line-height:1.1}
.pm-tile b small{font-size:15px;font-weight:400;margin-left:2px}
.pm-sr-hd{margin:0;font-size:14px;font-weight:700}
.pm-rec{width:100%;border-collapse:collapse;font-size:15px;margin:4px 0}
.pm-rec td{border-bottom:1px solid var(--pm-line);padding:4px;text-align:left}
.pm-rec td:last-child{text-align:right}
.pm-rec tr.me td{font-weight:700}
.pm-rec[hidden]{display:none}
.pm-det > .pm-opt-note{padding-left:0;margin:0}
/* 設定の最初は「相手」「強さ」の 2 段だけ。枚数・ルール・はずれは［ほかの設定］で開く */
.pm-more{display:flex;flex-direction:column;gap:8px}
.pm-more[hidden]{display:none}
.pm-more-btn{align-self:flex-start;font-size:15px;padding:4px 12px}

/* 結果（shell.result）に足す一言 */
.pm-res-sub{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);max-width:90%}
.pm-res-sub .pm-hl{flex-wrap:wrap;justify-content:center;text-align:center}
.pm-res-note{margin:0;font-size:16px;text-align:center}

/* 部屋の待つ画面 */
.pm-wait{position:absolute;inset:0;z-index:25;background:var(--pm-paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;box-sizing:border-box}
.pm-wait[hidden]{display:none}
.pm-wait h2{margin:0}
.pm-wait-n{margin:0;font-size:22px}
.pm-wait-who{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:280px}
.pm-wait-who li{font-size:22px;display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--pm-line);padding:6px 4px}
.pm-wait-who i{width:14px;height:14px;border-radius:50%;background:var(--c);display:inline-block}
.pm-wait-go{font-size:24px;padding:12px 48px}
.pm-wait-go[hidden]{display:none}
.pm-wait-msg{margin:0;font-size:16px;min-height:1.3em}