/* バカラ卓。卓・札・席・一言の帯・手元の置き場は共通の cards.js（C.layout / C.cardEl）のまま。
   ここは場（L.field）の中の物（プレイヤーとバンカーの手・置き場・山・出目）と、右下のチップ、ホーム・ウィンドウの中身だけ。
   札・卓の色は上書きしない。札の大きさは --cd-w だけ */
/* 見た目: トランプ・カジノのシリーズ共通（地 #E9E8E3・墨色の字・えんじのボタン・共通の緑の卓）。卓の上の字は卓の生成り（--bc-felt-ink）、場の印（プレイヤー・バンカー・タイ）は卓の上で見分ける淡い色 */
:root{ --bc-ink:#1E2B27; --bc-dim:#5C6660; --bc-acc:#8E3B2E; --bc-paper:#E9E8E3; --bc-line:#C9C7BF; --bc-pl:#CFE3F8; --bc-bk:#FDD5CB; --bc-tie:#C4ECCF; --bc-felt-ink:#f4f1ea; --bc-hi:rgba(255,255,255,.16) }

/* 出し入れは hidden（cards.js の display:flex に負けないように） */
.bc-lay.cd-layout[hidden], .bc-lay > .cd-hand[hidden]{display:none}

/* ---------- 場の中 ---------- */
.bc-f{flex:1; align-self:stretch; min-width:0; min-height:0; display:grid; grid-template-columns:1fr 262px; grid-template-rows:auto 1fr; grid-template-areas:"hands side" "spots side";
  gap:10px 18px; font-family:var(--ui-body); color:var(--bc-felt-ink); -webkit-user-select:none; user-select:none}
.bc-port .bc-f{--cd-w:84px; grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:"hands" "spots" "side"; align-content:center; gap:22px}
.bc-many:not(.bc-port) .bc-f{--cd-w:52px}
.bc-hands{grid-area:hands; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.bc-hand{border-top:4px solid; padding-top:4px; text-align:center; transition:opacity .3s}
.bc-hand.bc-P{border-color:var(--bc-pl)} .bc-hand.bc-B{border-color:var(--bc-bk)}
.bc-hand h2{margin:0; font-size:24px; line-height:1.2; letter-spacing:.16em; display:flex; justify-content:center; align-items:baseline; gap:14px}
.bc-P h2{color:var(--bc-pl)} .bc-B h2{color:var(--bc-bk)}
.bc-tot{font-family:var(--ui-display, var(--ui-body)); font-size:36px; min-width:1ch; color:var(--bc-felt-ink); line-height:1}
.bc-hand.win{background:var(--bc-hi)}
.bc-hand.win .bc-tot{color:var(--bc-felt-ink); text-decoration:underline; text-underline-offset:6px}
.bc-hand.lose{opacity:.45}
.bc-cards{display:flex; justify-content:center; align-items:center; gap:8px; height:calc(var(--cd-w, 64px) * 1.4 + 6px); margin-top:4px}

/* 置き場（押して点を置く） */
.bc-spots{grid-area:spots; display:grid; grid-template-columns:1fr .8fr 1fr; gap:10px; min-height:0}
.bc-spot{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:0; overflow:hidden;
  background:rgba(0,0,0,.14); border:3px solid; border-radius:6px; padding:6px 6px 4px; cursor:pointer; font:inherit; color:inherit; transition:background .15s, transform .08s}
.bc-sP{border-color:var(--bc-pl); color:var(--bc-pl)} .bc-sB{border-color:var(--bc-bk); color:var(--bc-bk)} .bc-sT{border-color:var(--bc-tie); color:var(--bc-tie)}
.bc-spot:hover:not(:disabled){background:rgba(255,255,255,.10)}
.bc-spot:active:not(:disabled){transform:scale(.98)}
.bc-spot:disabled{cursor:default; opacity:.5; background:rgba(0,0,0,.30)}
.bc-demo-wrap .bc-spot:disabled{opacity:1; background:rgba(0,0,0,.14)}
.bc-spot b{font-size:26px; line-height:1.2; letter-spacing:.12em}
.bc-spot small{font-size:16px; opacity:.85}
.bc-key{position:absolute; left:8px; top:4px; font-size:14px; opacity:.7}
.bc-amt{display:flex; align-items:flex-end; gap:8px; height:44px; color:var(--bc-felt-ink)}
.bc-amt b{font-size:26px; letter-spacing:0}
.bc-stack{position:relative; width:40px; height:42px}
.bc-stack i{position:absolute; left:0; width:40px; height:12px; border-radius:50%; background:var(--bc-felt-ink); border:2px solid #8E3B2E}
.bc-who{font-size:15px; line-height:1.25; color:var(--bc-felt-ink); opacity:.85; text-align:center; max-height:38px; overflow:hidden}
.bc-spot.win,.bc-spot.win:disabled{background:rgba(255,255,255,.22); opacity:1}
.bc-spot.lose,.bc-spot.lose:disabled{opacity:.5}
.bc-port .bc-spot{min-height:170px; padding-top:14px}
.bc-port .bc-spot b{font-size:28px}
.bc-many:not(.bc-port) .bc-amt{height:34px}
.bc-many:not(.bc-port) .bc-who{display:none}  /* 席が 2 段のときは、だれが置いたかは上の席の字で見せる */
.bc-many.bc-port .bc-f{--cd-w:72px}
.bc-many.bc-port .cd-seat b, .bc-many.bc-port .cd-seat span{max-width:110px}

/* 山と出目 */
.bc-side{grid-area:side; display:flex; flex-direction:column; gap:10px; align-items:flex-start; min-height:0}
.bc-port .bc-side{flex-direction:row; justify-content:center; align-items:center; gap:24px}
.bc-shoe{display:flex; align-items:center; gap:10px; font-size:18px}
.bc-shoe-c{display:flex; --cd-w:40px}
.bc-road{display:grid; grid-auto-flow:column; grid-template-rows:repeat(6, 22px); grid-template-columns:repeat(var(--road-cols, 10), 22px); gap:2px;
  border:1px solid rgba(255,255,255,.3); padding:3px; width:max-content; background:rgba(0,0,0,.15)}
.bc-road i{width:22px; height:22px; border-radius:50%; font:800 12px/22px var(--ui-body); font-style:normal; text-align:center; color:#fff}
.bc-road i.rP{background:#3C6EA8} .bc-road i.rB{background:#B8433C} .bc-road i.rT{background:#2F7A4E}

/* 手元の置き場（自分の手持ち）。札は持たないので小さく */
.bc-lay > .cd-hand{--cd-w:40px; align-items:center}
.bc-mine{display:flex; align-items:center; gap:16px; font-size:20px; white-space:nowrap}
.bc-mine .cd-chips{font-size:30px}
.bc-mybet{opacity:.85}

/* 相手の席: 人数が多いときは折り返し、字は「…」で収める */
.bc-lay .cd-seats{flex-wrap:wrap; justify-content:center}
.bc-lay .cd-seat > div{min-width:0}
.bc-lay .cd-seat span{overflow:hidden; text-overflow:ellipsis; max-width:170px}
.bc-lay .cd-seat[hidden]{display:none}

/* 1 回に置く点のチップ（右下の操作の置き場） */
.bc-chips{display:flex; gap:8px; align-items:center}
.bc-chip{width:58px; height:58px; border-radius:50%; cursor:pointer; color:#fff; font:800 20px var(--ui-display, var(--ui-body)); padding:0;
  border:4px dashed rgba(255,255,255,.85); outline:3px solid var(--c); background:var(--c); transition:transform .1s}
.bc-chip.c10{--c:#5A6474} .bc-chip.c50{--c:#24466B} .bc-chip.c100{--c:#7A1E2C} .bc-chip.c500{--c:#1F5A43}
.bc-chip[aria-pressed="true"]{transform:translateY(-6px); outline:4px solid var(--bc-ink)}
.bc-chip:disabled{opacity:.5; cursor:default}

/* 部屋の場面: 上の帯（回数）と右下の操作の置き場。ひとりの卓の shell.bar と同じ位置 */
.bc-rtop{position:absolute; left:0; right:0; top:0; height:64px; display:flex; align-items:center; gap:16px; padding:0 20px; box-sizing:border-box;
  font-family:var(--ui-body); color:var(--ui-ink); z-index:2}
.bc-rtop b{font-size:24px; font-weight:700}
.bc-rtop span{font-size:20px; color:var(--ui-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bc-racts{position:absolute; right:20px; bottom:20px; display:flex; gap:12px; align-items:center; z-index:2}
.bc-racts[hidden]{display:none}
.bc-rport .bc-racts{left:20px; justify-content:flex-end}
.bc-racts .ui-btn{font-size:26px; padding:14px 32px}

.bc-hand-ui .ui-btn, .bc-racts .ui-btn{min-height:48px; min-width:64px; box-sizing:border-box}
.bc-rgrp{display:flex; gap:12px; align-items:center}
.bc-racts [hidden]{display:none}

/* 部屋の場面・配信の手元も、ホームと同じ色の組（シリーズ共通） */
.bc-room, .bc-hand-ui{--ui-red:#8E3B2E; --ui-red-ink:#FFFFFF; --ui-card:#E9E8E3; --ui-ink:#1E2B27; --ui-sub:#5C6660}
/* 枠の中（遊ぶ画面・結果・ウィンドウ）の地も #E9E8E3。2 つ目以降のボタン（sub）は細い線（線と文字 #1E2B27、地は透明） */
.shell-game .shell-stage{background:#E9E8E3; --ui-shade:#E9E8E3; --ui-chip:rgba(142,59,46,.14); --ui-paper:#E9E8E3; --ui-soft:#C9C7BF}
.shell-stage .ui-btn.sub, .bc-hand-ui .ui-btn.sub{background:transparent; color:#1E2B27; border:1.5px solid #1E2B27; box-shadow:none}
.shell-stage .ui-btn.sub:hover, .bc-hand-ui .ui-btn.sub:hover{background:rgba(30,43,39,.08)}
.shell-stage .ui-btn:not(.sub), .bc-hand-ui .ui-btn:not(.sub){background:var(--ui-red); color:var(--ui-red-ink); border-color:var(--ui-red); box-shadow:none}
.shell-stage .sh-tabs button[aria-selected="true"]{background:var(--ui-red); color:var(--ui-red-ink); border-color:var(--ui-red)}
/* 一言の帯も地と同じ組（#E9E8E3 に墨色の字） */
.bc-lay .cd-say{background:#E9E8E3; color:#1E2B27}
/* 帯の下・ウィンドウは地より少し濃い細い線で区切る（影は付けない）。見出しはえんじの字 */
.shell-stage .sh-bar, .bc-rtop{border-bottom:1px solid var(--bc-line)}
.shell-stage .sh-box{box-shadow:none; border:1px solid var(--bc-line)}
.shell-stage .sh-box header{border-bottom:1px solid var(--bc-line); padding-bottom:10px}
.shell-stage .sh-box header b{color:var(--bc-acc)}

/* ---------- ホーム（shell.home）。色・題字・背景は game.js の theme / logo / backdrop ---------- */
.bc-homebg .sh-rec b{color:var(--bc-ink)}
/* ホームの絵: CPU 同士のデモ（本番と同じ C.layout の卓を縮めて流す。操作は受け付けない） */
.bc-homebg .sh-art{pointer-events:none; background:var(--bc-paper); outline:1px solid var(--bc-line)}
.bc-demo-wrap{position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none}
.bc-demo-wrap .cd-layout.bc-lay{top:16px; bottom:16px}

/* 小さなウィンドウ（shell.panel）の中身: 詳しく・設定・記録 */
.bc-pan{font-size:19px; line-height:1.6; color:var(--bc-ink); overflow-wrap:anywhere}
.bc-pan p{margin:0 0 8px}
.bc-pan .opt{display:flex; align-items:center; gap:8px; margin:10px 0; flex-wrap:wrap}
.bc-pan .opt > span{min-width:6em}
.bc-pan .ui-btn{font-size:20px; padding:10px 18px; min-height:48px; min-width:64px; box-sizing:border-box}
.bc-pan .ui-btn[aria-pressed="true"]{outline:3px solid var(--bc-acc); outline-offset:2px}
.bc-pan .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 6px}
.bc-pan .dim{color:var(--bc-dim); font-size:17px}
.bc-pan table{border-collapse:collapse; width:100%; margin:4px 0}
.bc-pan td{padding:3px 8px; border-bottom:1px solid var(--bc-line)}
.bc-pan .bc-rank td:last-child{text-align:right}
/* ランキングの自分の記録: 比べる数を大きく並べる（枠も線も付けず、字の大きさで分ける） */
.bc-tiles{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.bc-tile{padding:6px 10px 8px; min-width:0}
.bc-tile span{display:block; font-size:16px; color:var(--bc-dim)}
.bc-tile b{display:block; font:800 30px/1.2 var(--ui-display, var(--ui-body)); color:var(--bc-ink); white-space:nowrap}
.bc-tile b small{font-size:17px}
.bc-tile em{display:block; font-style:normal; font-size:15px; color:var(--bc-dim)}
.bc-tile.best{grid-column:1 / -1}
.bc-tile.best b{font-size:40px; color:var(--bc-acc)}
.bc-name{grid-column:1 / -1; margin:4px 0 0 !important; font-size:17px}
.bc-bars{display:flex; align-items:flex-end; gap:6px; height:80px; margin:6px 0}
.bc-bars i{flex:1; background:var(--bc-ink); min-height:2px}
.bc-bars i.up{background:var(--bc-acc)}

/* 遊び方の図（guide.js）。C.layout の卓（520×320）を半分に縮めて shell の図の枠（260×160）に入れる。場の物は L.field に置く。静止画なので動きは止める */
/* 縮める倍率は guide.js が渡された箱の大きさから決める */
.bc-gp, .sh-pic > .bc-gp{position:absolute; left:50%; top:50%; width:520px; height:320px; max-width:none; max-height:none; --cd-w:88px;
  transform:translate(-50%,-50%) scale(.5); pointer-events:none; font-family:var(--ui-body); color:var(--bc-felt-ink); font-size:24px}
.bc-gp .cd-layout.bc-lay{inset:0; padding:0; border-radius:0}
.bc-gp .cd-say, .bc-gp .cd-layout > .cd-hand{display:none}
.bc-gp *{animation:none !important; transition:none !important}
.bc-gp .bc-cards{height:132px}
.bc-gp .bc-spot{padding-top:8px}
.bc-gp .bc-amt{height:60px}
.bc-gp .bc-chips{gap:14px}
.bc-gp .bc-chip{width:68px; height:68px; font-size:22px}
.bc-gp-btn{font-size:34px !important; padding:10px 30px !important; white-space:nowrap}
.bc-gp-t{font-size:32px; font-weight:800; white-space:nowrap; color:var(--bc-felt-ink)}
.bc-gp-t.big{font-size:56px; line-height:1}
.bc-gp-t.gold{color:var(--bc-felt-ink); text-decoration:underline; text-underline-offset:8px}
.bc-gp-key{display:block; box-sizing:border-box; height:56px; border:3px solid #1E2B27; border-bottom-width:7px; border-radius:6px; background:var(--bc-felt-ink); color:#1E2B27;
  font:800 32px/46px var(--ui-body); text-align:center}
.bc-gp-seats{list-style:none; margin:0; padding:0; font-size:26px}
.bc-gp-seats li{display:flex; justify-content:space-between; padding:4px 10px; border-bottom:1px solid rgba(255,255,255,.3)}
.bc-gp-seats li.me{color:var(--bc-felt-ink); font-weight:800; background:var(--bc-hi)}
.bc-gp-mark{position:absolute; left:0; top:0; width:520px; height:320px; overflow:visible; fill:none; stroke:#cf5b47; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; z-index:2}

/* 結果（shell.result）に足す一行 */
.bc-res-note{margin:0; font-size:22px; color:var(--bc-dim)}

/* 配信の手元（視聴者の端末。shell の枠の外の普通のページ） */
.bc-hand-ui{font-family:var(--ui-body); color:var(--bc-ink); background:var(--bc-paper); padding:16px; min-height:100%; box-sizing:border-box}
.bc-hand-ui .st{font-size:20px; margin:0 0 8px}
.bc-hand-ui .big{font-size:34px; font-weight:800}
.bc-hand-ui .spots{display:grid; grid-template-columns:1fr; gap:10px; margin:12px 0}
.bc-hand-ui .bc-spot{min-height:84px; flex-direction:row; justify-content:space-between; padding:10px 18px; font-size:22px; background:transparent}
.bc-hand-ui .bc-sP{border-color:#3C6EA8; color:#24466B} .bc-hand-ui .bc-sB{border-color:#B8433C; color:#7A1E2C} .bc-hand-ui .bc-sT{border-color:#3A8A5C; color:#1F5A43}
.bc-hand-ui .bc-spot small{color:var(--bc-dim)}
.bc-hand-ui .bc-amt, .bc-hand-ui .bc-who, .bc-hand-ui .bc-mine{color:var(--bc-ink)}
.bc-hand-ui .bc-spot.on{background:rgba(142,59,46,.14)}
.bc-hand-ui .bc-chips{margin:10px 0; flex-wrap:wrap}