/* ── 牌桌页（竖屏）：直播画面 → 牌桌 → 操作台，自上而下就是现场的空间关系 ── */
.tv { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--night); }
.tv-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 6px; }
.tv-head .back { background: none; border: 0; padding: 10px 12px; font-size: 0; color: var(--ivory); }
.tv-head .back::before { content: ""; display: block; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tv-head .title { flex: 1; min-width: 0; line-height: 1.3; }
.tv-head .title b { display: block; font: 700 16px var(--serif); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-head .title span { color: var(--dim); font: 12px var(--num); letter-spacing: .04em; }
.tv-head .lat { width: 7px; height: 7px; border-radius: 50%; background: var(--lat, var(--dim)); font-size: 0; }
.tv-head .bal { font-size: 15px; }

.tv-video { position: relative; aspect-ratio: 16 / 9; background: #06080b; flex: none; overflow: hidden; transition: aspect-ratio .25s; }
.tv-video.mini { aspect-ratio: 16 / 2.6; }
.tv-video.mini .ph { place-items: center; font-size: 12px; background: linear-gradient(180deg, #0a0d12, #06080b); }
.tv-video .ph .dn { letter-spacing: .3em; }
.tv-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-video .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(236,230,218,.55); font: 600 13px var(--serif); letter-spacing: .3em;
  background: radial-gradient(ellipse 80% 60% at 50% 115%, rgba(28,66,102,.75), transparent 70%), #06080b; }
.tv-video .ph .lens { display: none; }
.tv-video .live { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--ui); letter-spacing: .08em; color: #fff; background: var(--seal); padding: 2px 7px 2px 6px; border-radius: 4px; }
.tv-video .live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: breathe 1.6s ease-in-out infinite; }
.tv-video .live.off { background: rgba(236,230,218,.12); color: var(--mute); }
.tv-video .live.off::before { animation: none; background: var(--dim); }
.tv-video .fold { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(6,8,11,.55); border: 0; font-size: 0; }
.tv-video .fold::before { content: ""; display: block; width: 8px; height: 8px; margin: 13px auto 0; border-left: 1.6px solid var(--ivory); border-top: 1.6px solid var(--ivory); transform: rotate(45deg); }
.tv-video.mini .fold::before { transform: rotate(225deg); margin-top: 8px; }

.tv-banner { margin: 8px 14px 0; padding: 9px 12px; border-radius: 10px; font-size: 12px; text-align: center; }
.tv-banner.warn { background: rgba(212,175,106,.1); color: var(--gold-hi); }
.tv-banner.err { background: rgba(196,64,47,.12); color: #f0c2b8; }

/* 牌桌：竖向跑道形，胡桃木边 + 金线 + 藏青台呢 */
.tv-table { position: relative; flex: 1; min-height: 250px; margin: 6px 10px 2px; container-type: size; }
.tv-felt { position: absolute; inset: 6% 8% 9%; border-radius: 48% / 30%;
  background: var(--weave), radial-gradient(ellipse 75% 55% at 50% 42%, #265684, var(--baize) 58%, var(--baize-deep));
  box-shadow: 0 0 0 1px rgba(212,175,106,.45), 0 0 0 10px var(--walnut), 0 0 0 11px var(--walnut-hi), 0 18px 40px rgba(0,0,0,.55), inset 0 10px 30px rgba(0,0,0,.35); }
/* 台呢上的印字：品牌 + 下注线 */
.tv-felt::before { content: ""; position: absolute; inset: 14% 12%; border-radius: 48% / 30%; box-shadow: 0 0 0 1px rgba(236,230,218,.07); }
.tv-felt::after { content: "真人德州"; position: absolute; left: 0; right: 0; top: 63%; text-align: center; font: 900 13px var(--serif); letter-spacing: .6em; text-indent: .6em; color: rgba(236,230,218,.08); }
.tv-center { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76%; }
.tv-center .board { display: flex; gap: 4px; min-height: 58px; justify-content: center; }
.tv-center .board .card { --w: min(46px, 12cqw); margin: 0; }
.tv-center .pot { background: rgba(6,10,16,.5); padding: 3px 12px 3px 8px; border-radius: 999px; }
.tv-center .pot .chip { font-size: 15px; }
.tv-center .side { color: rgba(236,230,218,.62); font: 11px var(--num); letter-spacing: .04em; }
.tv-center .status { color: rgba(236,230,218,.55); font-size: 12px; letter-spacing: .1em; text-align: center; min-height: 1.4em; }

/* 座位 */
.ps { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 78px; z-index: 2; cursor: pointer; }
.ps .cards { position: absolute; top: -8px; left: 50%; display: flex; transform: translateX(-2px); z-index: 0; }
.ps .cards .card { --w: 25px; margin: 0 -4px; }
.ps .cards .card:first-child { transform: rotate(-9deg); } .ps .cards .card:last-child { transform: rotate(9deg); }
.ps .av { position: relative; z-index: 1; width: 48px; height: 48px; font-size: 17px; }
.ps .ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.ps .ring circle { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.ps .plate { position: relative; z-index: 1; margin-top: -7px; background: rgba(9,12,17,.92); border-radius: 7px; padding: 3px 7px 2px; text-align: center; min-width: 70px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.ps .nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; color: rgba(236,230,218,.8); }
.ps .stk { font: 600 13px/1.25 var(--num); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ps .act { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 4px; white-space: nowrap; background: var(--ivory); color: #171b22; letter-spacing: .06em; }
.ps .act.fold { background: rgba(9,12,17,.85); color: var(--mute); box-shadow: inset 0 0 0 1px var(--hair-2); }
.ps .act.raise, .ps .act.allin, .ps .act.bet { background: var(--gold); color: #241a08; }
.ps .bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ivory); color: #171b22; font-size: 12px; padding: 5px 11px; border-radius: 12px 12px 12px 3px; white-space: nowrap; z-index: 6; animation: pop .25s ease-out; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.ps .win { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font: 700 17px var(--num); color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0,0,0,.9); white-space: nowrap; z-index: 6; animation: pop .4s ease-out; }
.ps .hl { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; background: var(--gold); color: #241a08; font-weight: 600; padding: 1px 8px; border-radius: 4px; white-space: nowrap; z-index: 3; }
@keyframes pop { from { transform: translate(-50%, 6px) scale(.85); opacity: 0; } }
.ps.acting .plate { box-shadow: inset 0 0 0 1px var(--gold); }
.ps.folded .av, .ps.away .av { filter: grayscale(.85) brightness(.55); }
.ps.folded .cards { opacity: .2; }
.ps.away .plate { opacity: .55; }
.ps.me .plate { box-shadow: inset 0 0 0 1px rgba(212,175,106,.6); }
.ps.winner .av { box-shadow: inset 0 0 0 2px var(--av), inset 0 0 0 3px rgba(241,233,218,.28), 0 0 0 3px var(--gold-hi), 0 0 22px rgba(236,211,158,.55); }
.ps.empty .av { background: rgba(9,12,17,.55); box-shadow: inset 0 0 0 1px rgba(236,230,218,.2); color: rgba(236,230,218,.55); font: 300 22px var(--ui); width: 40px; height: 40px; }
.ps.empty .plate { display: none; }
.ps.empty.locked .av { opacity: .4; color: transparent; }
.ps-bet { position: absolute; transform: translate(-50%, -50%); background: rgba(6,10,16,.5); padding: 1px 8px 1px 3px; border-radius: 999px; z-index: 2; }
.ps-bet .chip { font-size: 12px; }
.ps-btn { position: absolute; transform: translate(-50%, -50%); width: 19px; height: 19px; border-radius: 50%; background: var(--stock); color: #20180a; font: 700 10px var(--num); display: grid; place-items: center; z-index: 3; box-shadow: 0 0 0 1.5px var(--gold-lo), 0 2px 4px rgba(0,0,0,.5); transition: left .4s, top .4s; }

/* 操作台 */
.tv-dock { flex: none; position: relative; background: var(--deck); box-shadow: 0 -1px 0 var(--hair); padding: 10px 14px calc(6px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom))); border-radius: 20px 20px 0 0; }
.tv-dock .timer { position: absolute; left: 20px; right: auto; top: 0; height: 2px; width: 0; max-width: calc(100% - 40px); background: var(--gold); border-radius: 2px; }
.tv-dock .timer.low { background: var(--seal-hi); }
.tv-dock .top { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.tv-dock .hero { display: flex; gap: 5px; }
.tv-dock .hero .card { --w: 42px; margin: 0; }
.tv-dock .hero:empty { display: none; }
.tv-dock .hn { flex: 1; min-width: 0; font-size: 12px; color: var(--dim); }
.tv-dock .hn b { display: block; font: 700 17px/1.3 var(--serif); color: var(--ivory); letter-spacing: .06em; }
.tv-dock .hn .chip { font-size: 16px; }
.tv-dock .idlebox { display: flex; align-items: center; gap: 8px; }
.tv-dock .idlebox.bare { display: none; }
.tv-dock .idlebox .st { color: var(--mute); font-size: 13px; white-space: nowrap; }
.tv-dock .idlebox button { padding: 8px 14px; font-size: 13px; border-radius: 999px; }
.tv-dock .ctl.bare { display: none; }
.tv-dock .tools { display: flex; gap: 6px; }
.tv-dock .tools button { padding: 8px 12px; font-size: 12px; border-radius: 999px; background: transparent; }
.tv-dock .presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.tv-dock .presets button { padding: 8px 2px; font: 600 13px var(--num); border-radius: 8px; background: transparent; color: var(--mute); }
.tv-dock .sizer { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tv-dock .sizer input[type=range] { flex: 1; height: 28px; }
.tv-dock .sizer button.ghost { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--ivory); font-size: 18px; }
.tv-dock .sizer .amt { font: 600 18px var(--num); color: var(--gold-hi); min-width: 70px; text-align: right; }
.tv-dock .main { display: grid; grid-template-columns: 1fr 1.1fr 1.3fr; gap: 8px; margin-top: 8px; }
.tv-dock .main button { padding: 13px 4px; font-size: 16px; border-radius: 14px; letter-spacing: .06em; }
.tv-dock .main button.danger { border-color: var(--hair-2); color: var(--mute); }
.tv-dock .main button:not(.danger):not(.primary):not(.go) { background: var(--ivory); border-color: var(--ivory); color: #171b22; font-weight: 600; }
.tv-dock .pre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tv-dock .pre button { padding: 10px 4px; font-size: 13px; border-radius: 12px; background: transparent; color: var(--mute); }
.tv-dock .pre button[aria-pressed=true] { color: var(--gold-hi); }
.tv-dock .idle { color: var(--mute); font-size: 13px; margin-top: 6px; display: flex; gap: 10px; align-items: center; justify-content: space-between; min-height: 40px; }
.tv-dock .idle .btns { display: flex; gap: 8px; }
.rules dt { color: var(--dim); font-size: 13px; float: left; width: 96px; clear: left; padding: 9px 0; }
.rules dd { margin: 0 0 0 96px; padding: 9px 0; font-size: 14px; box-shadow: inset 0 -1px 0 var(--hair); }
.feedlog { max-height: 50vh; overflow: auto; font-size: 13px; line-height: 2; }
.feedlog time { color: var(--dim); font: 11px var(--num); margin-right: 8px; }
.profile-sheet { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.profile-sheet .avatar-c { width: 56px; height: 56px; font-size: 21px; }
.tv-head .chat svg { stroke-linejoin: round; stroke-width: 1.6; }
/* 没有底牌、没有状态、不需要操作时，操作台收成只剩系统安全区。
   由 JS 切换 class：iOS WebKit 里 :has(:empty) 在动态插入内容后不会重新计算，不能依赖。 */
.tv-dock .top.bare { display: none; }
.tv-dock.bare { padding-top: 0; box-shadow: none; background: transparent; }
.tv-dock .hn.bare { display: none; }
.tv-dock .top > .tools:first-child, .tv-dock .idlebox { margin-left: auto; }

/* 弃牌后，自己的底牌留在操作台上但变暗 */
.tv-dock.folded .hero { opacity: .4; filter: grayscale(.4); }
.tv-dock.folded .hn b { color: var(--dim); }

/* 机器人：头像右下角小标，明确告知不是真人 */
.ps.bot .av::after { content: "AI"; position: absolute; right: -4px; bottom: -2px; font: 700 9px/1 var(--num); letter-spacing: .04em; color: #171b22; background: var(--mute); padding: 2px 4px; border-radius: 4px; box-shadow: 0 0 0 2px var(--night); }
