/* 德州撲克 v2 — 經典橢圓桌 + 第一人稱手牌 + 狀態差異動畫 */
.tx-root {
  position: fixed; inset: 0; overflow: hidden;
  --felt: radial-gradient(70% 70% at 50% 42%, #1f9264, #136c49 60%, #073421);
  --rail: #2a190f; --rail-w: clamp(8px, 1.4vmin, 14px);
  --brass: #d8b15a; --brass-2: #f1d78c; --gold: #ffd76a;
  --ink: #f6f1e4; --muted: #b9c7bd; --accent: #e7c46e; --accent-ink: #2a1d05;
  --primary: linear-gradient(180deg, #f3d98f, #d8b15a);
  --panel: rgba(8,18,13,.9); --line: rgba(216,177,90,.32);
  --danger: linear-gradient(180deg, #e8463c, #b3322a);
  --glow: rgba(231,196,110,.6); --think: 1.6s;
  --o: 'Oswald', 'Noto Sans TC', system-ui, sans-serif;
  background: radial-gradient(120% 90% at 50% 0%, #17271f, #070d0a 70%); background-color: #070d0a;
  color: var(--ink); font-family: 'Noto Sans TC', system-ui, sans-serif;
}

/* ---- 骨架：頂列 / 牌桌 / 你的區 ---- */
.tx-app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.tx-app button { font: inherit; color: inherit; cursor: pointer; }
.tx-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px 140px; position: relative; z-index: 6; min-height: 68px; }
.tx-info { flex: 1; text-align: center; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.tx-info b { font-family: var(--o); color: var(--ink); font-weight: 600; }
.tx-ibtn { min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tx-ibtn[hidden] { display: none; }
.tx-ibtn:focus-visible, .tx-btn:focus-visible, .tx-presets button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 牌桌 */
.tx-wrap { container-type: size; display: grid; place-items: center; min-height: 0; padding: 50px 130px 6px; }
.tx-table { position: relative; width: min(100cqw, 210cqh); aspect-ratio: 2.1 / 1; container-type: inline-size; border-radius: 999px;
  background: var(--felt); border: var(--rail-w) solid var(--rail);
  box-shadow: 0 0 0 2px var(--brass) inset, 0 0 0 8px #1b1009, 0 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.45) inset; }
.tx-table::after { content: ''; position: absolute; inset: 12%; border-radius: 999px; border: 1px solid rgba(216,177,90,.14); pointer-events: none; }

/* 對手面板：沿橢圓排列，--c/--s 為座位角度的 cos/sin（texas.js 寫入；--c2 = c²、--sn = min(s,0)） */
.tx-seat { position: absolute; z-index: 3; transition: opacity .4s, filter .4s;
  left: calc(50% + 50% * var(--c)); top: calc(50% + 50% * var(--s) - 16% * var(--c2));
  transform: translate(calc(-50% + 46% * var(--c)), calc(-50% + 8% * var(--sn))); }
.tx-app.many .tx-pod { min-width: 124px; padding: 4px 12px 4px 4px; gap: 7px; }
.tx-app.many .tx-pod .tx-ava { width: 40px; }
.tx-pod { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.45); min-width: 150px; transition: border-color .3s, box-shadow .3s; }
.tx-nm { font-size: 13px; font-weight: 700; line-height: 1.15; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-pod .tx-st { font: 600 17px var(--o); color: var(--accent); }
.tx-ava { position: relative; width: 48px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #2b4a3b, #10221a); border: 2px solid var(--line); font-weight: 700; font-size: 17px; }
.tx-dbtn { position: absolute; right: -8px; top: -6px; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/24px var(--o);
  text-align: center; background: radial-gradient(circle at 35% 30%, #fff, #e8dcc0); color: #222; box-shadow: 0 2px 4px rgba(0,0,0,.5); z-index: 3; }
.tx-dbtn[hidden] { display: none; }
.tx-hole { position: absolute; left: 22px; top: -22px; display: flex; z-index: -1; }
.tx-mini { width: 26px; height: 36px; border-radius: 4px; background: var(--tx-back) center / 100% 100%; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.tx-mini:first-child { transform: rotate(-10deg); } .tx-mini + .tx-mini { margin-left: -12px; transform: rotate(8deg); }
.tx-hole.show { z-index: 2; top: -48px; gap: 4px; }
.tx-hole .tx-card.mini { --w: 38px; }
.tx-seat.folded, .tx-me.folded { opacity: .45; filter: grayscale(.8); }
.tx-seat.winner .tx-pod, .tx-me.winner { animation: txWinGlow 1.4s ease-in-out 2; }
@keyframes txWinGlow { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 46px rgba(241,215,140,.9); } }

/* 行動氣泡 */
.tx-bubble { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; white-space: nowrap; z-index: 4; pointer-events: none;
  font: 600 13px var(--o); letter-spacing: .04em; padding: 3px 12px; border-radius: 99px; background: #f6f1e4; color: #222; opacity: 0; }
.tx-bubble.k-bet { background: var(--primary); color: var(--accent-ink); }
.tx-bubble.k-fold { background: #3a3f3c; color: #c9cfcb; }
.tx-bubble.k-allin { background: var(--danger); color: #fff; }
.tx-bubble.pop { animation: txPop .35s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes txPop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.tx-seat.top .tx-bubble { left: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.tx-me .tx-bubble { top: auto; bottom: calc(100% + 6px); }

/* 輪到誰：對手倒數環（約等於電腦思考時間）；你沒有時限，改呼吸環 */
@property --tx-p { syntax: '<number>'; inherits: false; initial-value: 100; }
.tx-ava.turn { border-color: var(--accent); }
.tx-ava.turn::before { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--tx-p) * 1%), rgba(255,255,255,.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: txTick var(--think) linear forwards; }
@keyframes txTick { from { --tx-p: 100; } to { --tx-p: 0; } }
.tx-me .tx-ava.turn::before { --tx-p: 100; animation: txBreath 1.6s ease-in-out infinite; }
@keyframes txBreath { 50% { opacity: .35; } }
.tx-seat.turn .tx-pod, .tx-me.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 26px var(--glow); }

/* 下注籌碼（data-p：0 你 / 1 右 / 2 上 / 3 左） */
.tx-bet { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; font: 600 15px var(--o);
  padding: 2px 10px 2px 3px; border-radius: 99px; background: rgba(0,0,0,.35); opacity: 0; }
.tx-bet.on { animation: txAppear .01s var(--d, 0ms) both; }
.tx-bet { left: calc(50% + 34% * var(--c)); top: calc(50% + 32% * var(--s)); translate: -50% -50%; }
.tx-bet[data-p="0"] { left: 33%; top: 72%; translate: none; }
.tx-chip { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: radial-gradient(circle at 38% 32%, #e8463c, #b3322a); border: 2px dashed rgba(255,255,255,.85); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.tx-chip.gold { background: radial-gradient(circle at 38% 32%, #f3d98f, #c79a3c); }
@keyframes txAppear { from { opacity: 0; } to { opacity: 1; } }

/* 中央：階段 / 公共牌 / 底池 */
.tx-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqi; padding-bottom: 4%; }
.tx-phase { font: 500 13px var(--o); letter-spacing: .4em; text-indent: .4em; color: rgba(241,215,140,.85); min-height: 1.2em; }
.tx-board { display: flex; gap: clamp(5px, 1cqi, 10px); }
.tx-slot { --w: clamp(44px, 7.6cqi, 82px); width: var(--w); aspect-ratio: 5/7; border-radius: calc(var(--w) * .07); border: 1px dashed rgba(241,215,140,.2); background: rgba(255,255,255,.035); }
.tx-slot:has(.tx-card) { border-color: transparent; background: none; }
.tx-pot { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; border-radius: 99px; background: rgba(0,0,0,.38); }
.tx-pot .tx-chip { width: 26px; height: 26px; }
.tx-pot b { font: 700 26px var(--o); color: var(--accent); min-width: 2ch; }
.tx-pot small { font-size: 12px; color: var(--muted); }
.tx-deck { position: absolute; left: 50%; top: 40%; width: 1px; height: 1px; }

/* 牌：sprite sheet 以百分比定位，任何尺寸都清晰；風格由 --tx-sheet / --tx-back 決定 */
.tx-card { --w: 60px; position: relative; width: var(--w); aspect-ratio: 280 / 392; border-radius: calc(var(--w) * .07); flex-shrink: 0;
  background-image: var(--tx-sheet); background-size: 1300% 400%; background-repeat: no-repeat; box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: translate .3s, filter .3s, transform .25s; }
.tx-card.back, .tx-card .tx-back { background: var(--tx-back) center / 100% 100% no-repeat; }
.tx-card .tx-back { display: none; position: absolute; inset: 0; border-radius: inherit; }
.tx-slot .tx-card { --w: inherit; }
.tx-card.in { animation: txCardIn .45s var(--d, 0ms) cubic-bezier(.2,.8,.25,1) both; }
@keyframes txCardIn { from { transform: translateY(-18px) rotateY(90deg); opacity: 0; } to { opacity: 1; } }
/* 發到手上：先出現牌背，到齊後翻面 */
.tx-card.deal { animation: txAppear .01s var(--d, 0ms) both, txFlip .4s var(--t, 0ms) ease-in-out both; }
.tx-card.deal .tx-back { display: block; animation: txHide .01s calc(var(--t, 0ms) + 200ms) both; }
@keyframes txFlip { 0% { scale: 1 1; } 50% { scale: 0 1; } 100% { scale: 1 1; } }
@keyframes txHide { from { opacity: 1; } to { opacity: 0; } }
.tx-mini.deal { animation: txAppear .01s var(--d, 0ms) both; }
.tx-flycard { --w: 40px; }

/* 組成牌型的牌：粗金框 + 上浮 + 呼吸光；其餘公共牌變暗 */
.tx-card.hit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 3px var(--gold), 0 0 24px 6px rgba(255,205,90,.7); animation: txHitPulse 1.6s ease-in-out infinite; }
@keyframes txHitPulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 38px 12px rgba(255,205,90,.95); } }
.tx-slot .tx-card.hit { translate: 0 -10px; }
.tx-board.dim .tx-card:not(.hit) { filter: brightness(.5) saturate(.6); }

/* ---- 你的區：第一人稱手牌 ---- */
.tx-dock { --hw: clamp(84px, 8.4vw, 116px); position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 22px; padding: 0 20px calc(14px + env(safe-area-inset-bottom)); }
.tx-me { justify-self: end; position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, opacity .4s; }
.tx-me .tx-ava { width: 52px; }
.tx-me .tx-st { font: 700 24px var(--o); color: var(--accent); line-height: 1; }
.tx-me .tx-nm { font-size: 12px; color: var(--muted); }
.tx-str { display: inline-flex; gap: 6px; align-items: baseline; margin-top: 5px; padding: 4px 12px; border-radius: 8px; font-size: 20px; font-weight: 700;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); white-space: nowrap; min-height: 26px; }
.tx-str:empty { visibility: hidden; }
.tx-str em { font-style: normal; font-size: 16px; font-weight: 600; color: var(--muted); }
.tx-str.made { background: linear-gradient(180deg, #f3d98f, #d8b15a); color: var(--accent-ink); border-color: transparent; }
.tx-str.made em { color: #5a4310; }
.tx-str.up { animation: txUp .7s ease-out; }
@keyframes txUp { 30% { transform: scale(1.2); box-shadow: 0 0 20px rgba(255,205,90,.9); } }

.tx-held { display: flex; justify-content: center; min-width: calc(var(--hw) * 1.7); margin-top: calc(var(--hw) * -1.02); cursor: pointer; touch-action: none; }
.tx-held .tx-card { --w: var(--hw); transform-origin: 50% 130%; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.tx-held .tx-card:first-child { transform: rotate(-8deg); }
.tx-held .tx-card + .tx-card { margin-left: calc(var(--hw) * -.3); transform: rotate(8deg); }
.tx-held .tx-card.hit { translate: 0 -14px; }
.tx-held .tx-card.hit::after { box-shadow: 0 0 0 4px var(--gold), 0 0 30px 8px rgba(255,205,90,.75); }
.tx-held:hover .tx-card:first-child, .tx-held.peek .tx-card:first-child { transform: rotate(-12deg) translateY(-20px); }
.tx-held:hover .tx-card + .tx-card, .tx-held.peek .tx-card + .tx-card { transform: rotate(12deg) translateY(-20px); }
.tx-held.folded .tx-card { transform: translateY(55%) rotate(0); filter: grayscale(1) brightness(.6); }

.tx-ctrl { justify-self: start; position: relative; z-index: 6; width: min(440px, 100%); }
.tx-wait { min-height: 20px; margin-bottom: 6px; font: 500 14px var(--o); letter-spacing: .06em; color: var(--muted); }
.tx-app.myturn .tx-wait { color: var(--accent); }
.tx-acts { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; }
.tx-btn { min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,20,14,.88);
  font: 600 17px var(--o); letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  transition: transform .12s, opacity .2s, box-shadow .2s; }
.tx-btn small { font-size: 12px; font-weight: 500; opacity: .75; letter-spacing: 0; font-family: 'Noto Sans TC', sans-serif; }
.tx-btn.primary { background: var(--primary); color: var(--accent-ink); border: 0; font-size: 19px; }
.tx-btn.fold { color: var(--muted); }
.tx-btn:active:not(:disabled) { transform: scale(.95); }
.tx-btn:disabled { opacity: .35; cursor: default; }
.tx-app.myturn .tx-btn.primary:not(:disabled) { box-shadow: 0 6px 22px var(--glow); }
.tx-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* 加注面板：按「加注」才展開，按「確認」才送出 */
.tx-raise { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); gap: 10px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--line); background: #0b1610; box-shadow: 0 -10px 30px rgba(0,0,0,.5); }
.tx-raise.open { display: grid; grid-template-columns: minmax(0, 1fr); animation: txSheet .2s ease-out; }
@keyframes txSheet { from { opacity: 0; transform: translateY(10px); } }
.tx-rttl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.tx-rttl b { font: 700 24px var(--o); color: var(--accent); }
.tx-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tx-presets button { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font: 600 14px var(--o); color: var(--accent); line-height: 1.15; }
.tx-presets button small { display: block; font-size: 12px; color: var(--muted); }
.tx-presets button.sel { background: rgba(231,196,110,.22); border-color: var(--accent); }
.tx-presets button.allin { color: #ff8a80; }
.tx-srow { display: flex; align-items: center; gap: 8px; }
.tx-srow input { flex: 1; min-width: 0; accent-color: var(--accent); height: 44px; }
.tx-srow .tx-btn { min-height: 48px; padding: 0 14px; }
.tx-srow .tx-btn.ghost { min-width: 48px; font-size: 20px; }
.tx-srow .tx-btn.primary { min-width: 104px; }

/* 結果橫幅 */
.tx-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 8; pointer-events: none; opacity: 0;
  font: 700 clamp(26px, 5.4cqi, 54px) var(--o); letter-spacing: .1em; color: var(--accent); white-space: nowrap; text-align: center;
  text-shadow: 0 0 24px rgba(241,215,140,.8), 0 4px 0 #5a3d0c; padding: 8px 30px; border-radius: 16px; background: rgba(7,13,10,.8); }
.tx-banner small { display: block; font: 500 15px 'Noto Sans TC', sans-serif; letter-spacing: .08em; color: var(--ink); text-shadow: none; }
.tx-banner.show { animation: txBanner 3.4s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes txBanner { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 10%, 85% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }

/* 紀錄抽屜 */
.tx-log { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: rgba(8,18,13,.96); border-left: 1px solid var(--line);
  padding: 16px; transform: translateX(100%); transition: transform .25s; overflow: auto; }
.tx-log.open { transform: none; }
.tx-log h2 { font-size: 15px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.tx-log ul { margin: 0; padding: 0; }
.tx-log li { list-style: none; font-size: 14px; color: var(--muted); padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---- 直立（手機） ---- */
@media (orientation: portrait) {
  .tx-top { padding-left: 132px; }
  .tx-blinds, .tx-lbl { display: none; }
  .tx-wrap { padding: 70px 8px 4px; }
  .tx-table { width: min(100cqw, 74cqh); aspect-ratio: 3 / 4.2; border-radius: 46% / 34%; }
  .tx-pod { flex-direction: column; gap: 3px; padding: 6px 8px 7px; border-radius: 16px; min-width: 0; width: 92px; text-align: center; }
  .tx-pod .tx-ava { width: 42px; font-size: 15px; }
  .tx-nm { max-width: 76px; }
  .tx-hole { left: auto; right: -6px; top: 6px; }
  .tx-hole.show { top: 20px; right: -52px; }
  .tx-seat.right .tx-hole.show { right: auto; left: -52px; } /* 右側座位亮牌往桌內放，免得超出螢幕 */
  /* 直立：對手排上半圈（--pc/--ps），兩側貼螢幕邊 → 座位往桌內收（N=4 與舊版 19% 位置一致） */
  .tx-seat { left: calc(50% + 50% * var(--pc)); top: calc(50% + 50% * var(--ps) - 31% * var(--pc2));
    transform: translate(calc(-50% - 40% * var(--pc)), calc(-50% + 22% * var(--psn))); }
  .tx-bet { left: calc(50% + 30% * var(--pc)); top: calc(50% + 26% * var(--ps) - 12% * var(--pc2)); }
  .tx-app.many .tx-seat.top .tx-bubble, .tx-app.mid .tx-seat.top .tx-bubble { left: 50%; top: calc(100% + 4px); translate: -50% 0; } /* 窄螢幕上排擠：氣泡放座位下方 */
  .tx-app.many .tx-pod, .tx-app.mid .tx-pod { width: 78px; min-width: 0; padding: 4px 4px 6px; }
  .tx-app.many .tx-pod .tx-ava, .tx-app.mid .tx-pod .tx-ava { width: 34px; font-size: 13px; }
  .tx-app.many .tx-pod .tx-st, .tx-app.mid .tx-pod .tx-st { font-size: 15px; }
  .tx-bet[data-p="0"] { left: 8%; top: 74%; }
  .tx-center { padding: 30% 0 12%; gap: 3cqi; }
  .tx-slot { --w: clamp(42px, 16cqi, 70px); }
  .tx-dock { --hw: clamp(84px, 25vw, 110px); grid-template-columns: 1fr auto; grid-template-areas: "me held" "ctrl ctrl"; gap: 8px 12px; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
  .tx-me { grid-area: me; justify-self: start; padding: 6px 12px 6px 6px; gap: 8px; }
  .tx-me .tx-ava { width: 42px; }
  .tx-me .tx-st { font-size: 20px; }
  .tx-held { grid-area: held; min-width: 0; margin-top: calc(var(--hw) * -.9); padding-right: calc(var(--hw) * .22); } /* 右牌旋轉後不出界 */
  .tx-ctrl { grid-area: ctrl; width: 100%; }
  .tx-wait { text-align: center; }
}
/* 橫向但很矮（手機橫拿） */
@media (orientation: landscape) and (max-height: 520px) {
  .tx-top { padding-top: 8px; min-height: 60px; }
  .tx-wrap { padding: 44px 110px 4px; }
  .tx-dock { --hw: 72px; gap: 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .tx-me { padding: 5px 12px 5px 5px; }
  .tx-me .tx-ava { width: 40px; }
  .tx-me .tx-st { font-size: 19px; }
  .tx-btn { min-height: 46px; }
  .tx-pod { min-width: 130px; padding: 4px 12px 4px 4px; }
  .tx-pod .tx-ava { width: 40px; }
  .tx-wait { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-root *, .tx-root *::before, .tx-root *::after { animation-duration: .01ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tx-root .tx-banner.show { animation: none !important; opacity: 1; transform: translate(-50%, -50%); }
}