/* P200-style table layer (shopさん 2026-11-01 13:32): bet badges (P200 bets-v32), pot→winner chips (P200 split-fx v87),
   phase banner (P200 phase-prompt v81b), turn highlight, my cards glow only on my turn. */
#chipLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.p32bet { position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; display: flex; align-items: center; height: 24px; padding: 0 8px 0 4px; border-radius: 12px;
  background: #1b1410e6; border: 1px solid #d9a84599; color: #fff3d6; font: 700 13px/1 system-ui, sans-serif; box-shadow: 0 2px 6px #0007; white-space: nowrap; }
.p32bet[hidden] { display: none; }
.p32bet i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #e7c27a 0 35%, #b8832f 36% 55%, #f3e2b5 56% 70%, #b8832f 71%); border: 1px solid #5a3a16; margin-right: -7px; }
.p32bet i.c3 { margin-right: 4px; } .p32bet b { font-weight: 800; letter-spacing: .2px; }
.p32bet.pop { animation: p32pop .28s ease-out; } @keyframes p32pop { 0% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(1); } }
.p32fly { position: fixed; z-index: 60; transition: transform .55s cubic-bezier(.5, 0, .6, 1), opacity .55s ease-in; }
#dmFly { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; }
.p2sf-chip { position: fixed; z-index: 61; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, #ffe58a 0 35%, #c9952b 36% 60%, #fff3c4 61% 70%, #a8741c 71%);
  box-shadow: 0 1px 3px #0009; transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .2s .55s; }
.p2sf-lab { position: fixed; z-index: 62; transform: translate(-50%, -100%); padding: 2px 8px; border-radius: 999px; background: #1b1712e8; border: 1px solid #d8b25a; color: #ffe9a8;
  font: 700 12px/1.4 system-ui, sans-serif; white-space: nowrap; opacity: 0; transition: opacity .25s, top .7s cubic-bezier(.2, .8, .3, 1); }
.p2sf-lab.low { border-color: #6fc3ff; color: #cfeaff; }
.p2sf-ban { position: fixed; z-index: 62; transform: translate(-50%, -50%) scale(.6); padding: 4px 14px; border-radius: 8px; background: #2a1d3ee8; border: 1px solid #c79cff; color: #f2e6ff;
  font: 800 16px/1.3 system-ui, sans-serif; letter-spacing: .1em; opacity: 0; transition: transform .3s, opacity .3s; white-space: nowrap; }
#dmPhase { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -6px); z-index: 50; padding: 4px 14px; border-radius: 999px; background: rgba(20, 16, 10, .92); border: 1px solid #e0b050;
  color: #ffe9b0; font: 800 15px/1.3 system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; white-space: nowrap; }
#dmPhase.on { opacity: 1; transform: translate(-50%, 0); } #dmPhase.draw { border-color: #6fc3ff; color: #d6efff; }
/* phase label in the center */
#street { display: inline-block; margin-top: 3px; padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
#street.ph-bet { background: #3a2a0ccc; border: 1px solid #e0b05099; color: #ffe2a0; }
#street.ph-draw { background: #0c2a3acc; border: 1px solid #6fc3ff99; color: #d6efff; }
#street.ph-other { color: #cfe; }
#pot { display: flex; flex-direction: column; align-items: center; }
#pot .potTot { font: 600 10px/1.1 system-ui; color: #e9dcc0b0; letter-spacing: .3px; }
#turnBar { margin-top: 3px; font-size: 12px; font-weight: 700; color: #ffd84a; white-space: nowrap; }
#turnBar.mine { color: #111; background: #ffd84a; border-radius: 999px; padding: 1px 10px; display: inline-block; animation: dmpulse 1.2s ease-in-out infinite; }
/* seats: whose turn + what they did */
.seat.turn .plate { border-color: #ffd84a; box-shadow: 0 0 0 2px #ffd84a55, 0 0 14px #ffd84a; animation: dmpulse 1.2s ease-in-out infinite; }
.turnTag { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); z-index: 2; background: #ffd84a; color: #111; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.seat .st { font-weight: 800; color: #bff5dd; } .seat .st small { font-weight: 400; font-size: 9px; color: #9ab; }
.seat .bet { min-height: 15px; } .seat .bet .act { font-size: 10px; color: #ffe2a0; background: #0009; border-radius: 6px; padding: 0 5px; } .seat .bet .won { color: var(--gold); font-weight: 800; }
@keyframes dmpulse { 50% { box-shadow: 0 0 0 5px #ffd84a33, 0 0 18px #ffd84a; } }
/* my cards glow ONLY on my turn */
#myCards .card { transition: transform .12s, box-shadow .2s; }
#me.myturn #myCards .card { box-shadow: 0 0 0 2px #ffd84a, 0 0 14px 3px #ffd84aaa; animation: dmglow 1.2s ease-in-out infinite; }
@keyframes dmglow { 50% { box-shadow: 0 0 0 2px #ffe98a, 0 0 22px 6px #ffd84acc; } }
#myInfo .mystack { color: #bff5dd; font-size: 15px; } #myInfo .mybet { color: #ffe2a0; }
.muteBtn.off { opacity: .6; }
@media (min-width: 900px) { .p32bet { height: 30px; font-size: 16px; border-radius: 15px; } .p32bet i { width: 18px; height: 18px; margin-right: -9px; } }
@media (orientation: landscape) and (max-height: 520px) { .p32bet { height: 20px; font-size: 11px; } .p32bet i { width: 11px; height: 11px; margin-right: -5px; } #turnBar, #street { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .seat.turn .plate, #me.myturn #myCards .card, #turnBar.mine { animation: none; } }
/* 退出 / 途中参加 (shopさん 2026-11-01 13:43) */
.exitBtn { background: #5a2328; border: 1px solid #ff6b6b88; } .exitBtn.reserved { background: #b8232e; animation: dmpulse 1.4s ease-in-out infinite; }
#exitSheet { position: fixed; inset: 0; z-index: 30; background: #000b; display: flex; align-items: center; justify-content: center; padding: 16px; }
#exitBody { width: min(360px, 100%); background: #1c1e21; border: 1px solid #ff4d4d66; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
#exitBody h3 { margin: 0; font-size: 16px; } #exitBody .sub { margin: 0 0 4px; line-height: 1.5; }
.lvTag { color: #fff; background: #b8232e; border-radius: 6px; padding: 0 6px; font-weight: 700; }
.bbTag { color: #111; background: #6fc3ff; border-radius: 6px; padding: 0 6px; font-weight: 700; }
.seat .sitBtn { margin-top: 3px; padding: 3px 8px; font-size: 11px; background: #2f8f5b; }
/* オープン卓 / 仲間卓 (LOCKED shopさん 2026-11-01 13:44). Lobby blocks are independent <section>s so their order/flow can be changed later. */
.openList { display: flex; flex-direction: column; gap: 8px; }
.otab { background: #20262d; border: 1px solid #ff4d4d55; border-radius: 12px; padding: 10px; }
.otab.full { opacity: .6; border-color: #555; }
.otop { display: flex; align-items: baseline; gap: 8px; } .ocnt { font-size: 17px; color: #fff; } .ofree { color: #7fe0a8; font-weight: 700; font-size: 13px; }
.otab.full .ofree { color: #f88; } .ocode { margin-left: auto; font: 600 11px/1 ui-monospace, monospace; color: #9ab; }
.ogame { font-size: 13px; color: #ffd6d6; margin: 4px 0; line-height: 1.4; } .ogame small { color: #9ab; }
.ometa { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: #bcd; }
.box .ojoin { margin-top: 8px; }
.vispick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.vchk { margin: 0; position: relative; } .vchk input { position: absolute; opacity: 0; pointer-events: none; }
.vchk span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #1b2530; border: 2px solid #34404d; cursor: pointer; }
.vchk span small { color: #9ab; font-size: 12px; } .vchk input:checked + span { border-color: #ff6b6b; background: linear-gradient(135deg, #b8232e55, #6e0f1855); }
#openCount { font-weight: 400; margin-left: 6px; }

/* 席まわり (13:55 / 13:51): 離席カウントダウン・戻り方・Post BB・待機リスト・招待 */
.awayBtn.reserved { background: #ffb02e22; border-color: #ffb02e; color: #ffd27a; }
.seatPanel { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; text-align: center; }
.spHead { font-weight: 700; font-size: 15px; } .spSub { font-size: 12px; opacity: .8; }
.spBtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.spBtns button { flex: 1 1 150px; max-width: 260px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.spBtns button small { font-size: 11px; font-weight: 400; opacity: .85; }
.seatPanel .cd, #exitBody .cd { font-variant-numeric: tabular-nums; color: #ffd27a; } .cd.low { color: #ff6b6b; }
.bbWait { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ff4d4d; color: #fff; font-size: 12px; margin-right: 4px; }
.wlPos { font-size: 44px; font-weight: 800; text-align: center; color: #ff6b6b; } .wlPos small { font-size: 14px; margin-left: 2px; color: #ddd; }
.shareCode { font-size: 30px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.shareUrl { font-size: 11px; opacity: .75; word-break: break-all; text-align: center; margin-bottom: 4px; }
.orow .ocells { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.orow .og { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .obl, .orow .opl, .orow .owait { white-space: nowrap; font-variant-numeric: tabular-nums; }
.orow .owait { opacity: .55; } .orow .owait.on { opacity: 1; color: #ffd27a; }
.orow .ojoin { flex: 0 0 auto; width: auto; padding: 6px 12px; margin: 0; }
.orow .ometa { font-size: 11px; opacity: .7; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.hr { flex-shrink: 0; } .hr .chip { white-space: nowrap; }
@media (max-width: 480px) { .hr { gap: 4px; } .hr .chip { padding: 5px 7px; font-size: 12px; } #handInfo { display: none; } }
.spBtns button { font-size: 14px; padding-left: 8px; padding-right: 8px; } .spBtns button small { white-space: nowrap; }
@media (max-height: 500px) { .spHead { font-size: 14px; } .spSub { font-size: 11px; } .spBtns button { font-size: 13px; } }