:root {
  --felt: #0f5132;
  --felt-dark: #0a3a24;
  --wood: #3b2414;
  --gold: #f2c14e;
  --text: #f4f1ea;
  --muted: #b9c7bd;
  --card: #fffdf7;
  --red: #c62828;
  --black: #1b1b1b;
  --win: #43d17a;
  --lose: #ff6b6b;
  --panel: rgba(0, 0, 0, .28);
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
  background: var(--felt-dark);
  background-image: radial-gradient(ellipse at top, #146b43 0%, var(--felt) 45%, var(--felt-dark) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text);
}
button {
  font: inherit; cursor: pointer; border: 0; border-radius: 10px;
  padding: .6em 1.1em; background: #e9e4d8; color: #222; font-weight: 600;
  transition: transform .08s, filter .15s;
}
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--gold); color: #3a2a00; }
button.danger { background: #b83a3a; color: #fff; }
button.small { padding: .35em .75em; font-size: .85rem; }
button.link { background: none; color: var(--gold); text-decoration: underline; }
button.chip { border-radius: 999px; background: #fff; border: 3px dashed #c33; color: #222; min-width: 3.4em; }
button.sel { outline: 3px solid var(--gold); }
input {
  font: inherit; padding: .6em .8em; border-radius: 10px; border: 1px solid #0006;
  background: #fffdf7; color: #222; width: 100%;
}
.hidden { display: none !important; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ---------- home ---------- */
#home { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.home-card {
  width: min(420px, 100%); background: var(--panel); padding: 28px; border-radius: 20px;
  display: grid; gap: 14px; box-shadow: 0 20px 60px #0006; border: 1px solid #ffffff1a;
}
.home-card h1 { margin: 0; font-size: 2.6rem; color: var(--gold); text-align: center; letter-spacing: .02em; }
.home-card .sub { margin: 0; text-align: center; color: var(--muted); }
.home-card label { display: grid; gap: 6px; }
.or { text-align: center; color: var(--muted); font-size: .9rem; }
.code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; flex: 1; }

/* ---------- game ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--wood); box-shadow: 0 2px 10px #0005;
}
.room-info b { color: var(--gold); letter-spacing: .15em; font-size: 1.2rem; margin: 0 .3em; }
.phase { font-weight: 600; }
.top-actions { display: flex; gap: 6px; }
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; padding: 12px; } .side { position: static; max-height: 360px; } }

.table { display: grid; gap: 16px; align-content: start; }
.dealer-zone, .my-zone, .actions { background: var(--panel); border-radius: var(--radius); padding: 14px; }
.zone-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.zone-title h2 { margin: 0; font-size: 1.1rem; }
.badge { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #ffffff22; }
.badge.dealer { background: var(--gold); color: #3a2a00; }
.badge.host { background: #6aa9ff; color: #06244d; }
.badge.off { background: #666; }
.badge.ok { background: var(--win); color: #053; }

.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.seat { background: var(--panel); border-radius: var(--radius); padding: 10px 12px; border: 2px solid transparent; }
.seat.me { border-color: #ffffff55; }
.seat.dealer { border-color: var(--gold); }
.seat .name { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seat .chips { color: var(--gold); font-weight: 700; }
.seat .meta { color: var(--muted); font-size: .88rem; }
.seat .legs { display: grid; gap: 6px; margin-top: 6px; }

/* ---------- cards ---------- */
.hand { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card {
  width: 54px; height: 76px; border-radius: 8px; background: var(--card); color: var(--black);
  display: flex; flex-direction: column; justify-content: space-between; padding: 4px 6px;
  box-shadow: 0 3px 8px #0006; font-weight: 800; position: relative; user-select: none;
  transition: transform .15s, opacity .15s;
}
.card.red { color: var(--red); }
.card .r { font-size: 1.05rem; line-height: 1; }
.card .s { font-size: 1.5rem; align-self: flex-end; line-height: 1; }
.card.back { background: repeating-linear-gradient(45deg, #8d1c1c 0 6px, #a82a2a 6px 12px); border: 3px solid #fff; }
.card.mini { width: 36px; height: 50px; padding: 2px 4px; }
.card.mini .r { font-size: .8rem; } .card.mini .s { font-size: 1rem; }
.card.discard { opacity: .35; transform: translateY(8px) rotate(-4deg); }
.card.discard::after { content: 'ทิ้ง'; position: absolute; inset: auto 0 -1.4em 0; text-align: center; font-size: .7rem; color: var(--lose); }
.card.pick { cursor: pointer; }
.card.pick:hover { transform: translateY(-5px); }
.card.pick.discard:hover { transform: translateY(4px) rotate(-4deg); }

.leg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed #ffffff22; }
.leg:last-child { border-bottom: 0; }
.leg-label { min-width: 150px; }
.leg-label b { color: var(--gold); font-size: 1.1rem; }
.deng { color: #ffd76a; font-weight: 700; }
.outcome.win { color: var(--win); font-weight: 800; }
.outcome.lose { color: var(--lose); font-weight: 800; }
.outcome.tie { color: var(--muted); font-weight: 800; }
.leg-mini { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: .85rem; }
.leg-mini .hand { grid-row: span 2; flex-wrap: nowrap; gap: 4px; }
.card.mini.discard { transform: translateY(5px) rotate(-4deg); }
.card.mini.discard::after { content: none; }

/* ---------- actions ---------- */
.actions { display: grid; gap: 10px; }
.actions .hint { color: var(--muted); margin: 0; }
.bet-box { display: grid; gap: 10px; }
.bet-box .row input { width: 120px; }
.timer { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 800; }

/* ---------- side ---------- */
.side { background: var(--panel); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); position: sticky; top: 16px; }
.side h3 { margin: 0 0 8px; font-size: 1rem; }
.log { flex: 1; overflow-y: auto; font-size: .88rem; display: grid; gap: 4px; align-content: start; min-height: 200px; }
.log .chat { color: #fff; }
.log .info { color: var(--muted); }
.chat { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- dialogs ---------- */
dialog { border: 0; border-radius: 16px; padding: 22px; max-width: 560px; width: calc(100% - 32px); background: #fffdf7; color: #222; }
dialog::backdrop { background: #0008; }
dialog h2 { margin-top: 0; }
dialog li { margin-bottom: 6px; }
.deng-table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.deng-table td, .deng-table th { border-bottom: 1px solid #ddd; padding: 6px; text-align: left; }
.note { color: #777; font-size: .85rem; }
.settings-form { display: grid; gap: 10px; }
.settings-form label { display: grid; gap: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px);
  background: #222; color: #fff; padding: 10px 18px; border-radius: 10px; transition: transform .25s; z-index: 50;
  max-width: calc(100% - 32px); opacity: 0; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { background: #a52a2a; }

/* =====================================================================
   v2: สมาชิก, ภาพไพ่, สับ/ตัด/แจก, คลี่ไพ่, เปิดไพ่ช้า, ข้อความเสียง
   ===================================================================== */
select { font: inherit; padding: .5em; border-radius: 10px; }
.row.between { justify-content: space-between; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tab { background: #ffffff22; color: var(--text); }
.tab.sel { background: var(--gold); color: #3a2a00; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 6px; }
.me-box { background: #0003; border-radius: 12px; padding: 12px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.chips-big { font-size: 1.8rem; font-weight: 800; color: var(--gold); }
.lb-title { margin: 6px 0 0; font-size: 1rem; }
.leaderboard { margin: 0; padding-left: 1.6em; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.leaderboard li span { float: right; color: var(--gold); font-weight: 700; }
.leaderboard li.me { color: var(--gold); }
button.link.small { font-size: .8rem; padding: 0 .3em; }
.settings-form h4 { margin: 8px 0 0; }

/* ---------- การ์ด (ภาพ/ตัวอักษร) ---------- */
.card { width: 60px; height: 90px; padding: 4px 6px; }
.card.mini { width: 36px; height: 54px; }
.card.img { padding: 0; background-color: #fff; background-image: url(img/cards.webp); background-size: 1300% 400%;
  background-position: calc(var(--c) * 100% / 12) calc(var(--r) * 100% / 3); }
.card.img .r, .card.img .s { display: none; }
.card.back { background: repeating-linear-gradient(45deg, #8d1c1c 0 6px, #a82a2a 6px 12px); border: 3px solid #fff; padding: 0; }

/* การ์ดพลิกได้ (3D) */
.flip { width: 60px; height: 90px; perspective: 600px; position: relative; }
.flip.mini { width: 36px; height: 54px; }
.flip .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s; }
.flip .inner > * { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; margin: 0; }
.flip .inner > .front { transform: rotateY(180deg); }
.flip.up .inner { transform: rotateY(180deg); }
.flip.anim .inner { animation: flipUp .55s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes flipUp {
  0% { transform: rotateY(0) translateY(0); }
  45% { transform: rotateY(90deg) translateY(-10px) scale(1.08); }
  100% { transform: rotateY(180deg) translateY(0); }
}
.flip.discard { opacity: .38; transform: translateY(6px) rotate(-4deg); transition: transform .15s, opacity .15s; }
.later { opacity: 0; animation: fadeIn .4s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- เวทีกองไพ่ ---------- */
.deck-stage { background: var(--panel); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 18px; min-height: 150px; flex-wrap: wrap; }
.deck { position: relative; width: 220px; height: 120px; flex: none; }
.deck .dk { position: absolute; left: calc(50% - 30px); top: calc(50% - 45px); width: 60px; height: 90px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #8d1c1c 0 6px, #a82a2a 6px 12px); border: 3px solid #fff; box-shadow: 0 1px 2px #0007; will-change: transform; }
.deck-panel { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.deck-panel .big { font-size: 1.15rem; font-weight: 800; }
.cut-bar { position: relative; height: 46px; border-radius: 6px; cursor: pointer; touch-action: none;
  background: repeating-linear-gradient(90deg, #fff 0 2px, #ddd 2px 3px, #a82a2a 3px 4px); box-shadow: inset 0 0 0 2px #fff; }
.cut-bar .knife { position: absolute; top: -8px; bottom: -8px; width: 4px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 0 2px #3a2a00; transform: translateX(-2px); }
.cut-bar .knife::before { content: '✂'; position: absolute; top: -22px; left: -8px; font-size: 18px; }
button.cut-btn { font-size: 1.1rem; padding: .7em 1.4em; }

/* ---------- คลี่ไพ่ ---------- */
.my-zone .flip, .sq { width: 78px; height: 117px; }
@media (max-width: 520px) { .my-zone .flip, .sq { width: 64px; height: 96px; } }
.sq { position: relative; border-radius: 8px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sq > .front, .sq > .backL { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq > .backL { border-radius: 8px; background: repeating-linear-gradient(45deg, #8d1c1c 0 6px, #a82a2a 6px 12px); border: 3px solid #fff; box-shadow: 0 3px 8px #0006; }
.sq > .flap { position: absolute; left: 0; right: 0; height: 0; border-radius: 8px; pointer-events: none;
  background: linear-gradient(to bottom, #f1ece2, #d9d2c3); border: 3px solid #fff; box-shadow: 0 -4px 10px #0006; }
.sq .hint { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: .65rem; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.sq.dragging { cursor: grabbing; }
.my-zone .hand { gap: 10px; }
.my-zone .flip.pick { cursor: pointer; }
.my-zone .flip.pick:hover:not(.discard) { transform: translateY(-5px); transition: transform .15s; }
.leg .tag-discard { font-size: .75rem; color: var(--muted); }

/* ---------- ผู้เล่นกำลังพูด ---------- */
.badge.talk { background: #7c4dff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- ข้อความเสียง ---------- */
.chat .mic { padding: .4em .7em; font-size: 1.1rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.chat .mic.rec { background: #d32f2f; color: #fff; animation: pulse .8s infinite; }
.voice-list { display: grid; gap: 4px; margin-top: 8px; max-height: 120px; overflow-y: auto; }
.voice-list .vi { display: flex; gap: 6px; align-items: center; font-size: .85rem; }
.voice-list .vi button { padding: .15em .6em; font-size: .8rem; }
.voice-list .vi.playing { color: var(--gold); }
.voice-preview { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding: 8px; border-radius: 10px; background: #0004; flex-wrap: wrap; }
.mute { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mute input { width: auto; }
.rec-bubble { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #222e; color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 60; display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 20px #0008; }
.rec-bubble .dot { width: 12px; height: 12px; border-radius: 50%; background: #f44336; animation: pulse .8s infinite; }
@media (max-width: 900px) { .side { max-height: none; } .log { max-height: 220px; } }
.sq.settle > .backL { transition: clip-path .22s ease-out; }
.sq.settle > .flap { transition: top .22s ease-out, bottom .22s ease-out, left .22s ease-out, right .22s ease-out, width .22s ease-out, height .22s ease-out; }
.hand .slot { position: relative; }
.chips-inline { color: var(--gold); }
.predeal [data-deal] > * { opacity: 0; }
/* มือถือ: แถบแชท/ไมค์ติดล่างจอ กดพูดได้ตลอด */
@media (max-width: 900px) {
  #game { padding-bottom: 76px; }
  #game .chat { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--wood); z-index: 40; box-shadow: 0 -2px 10px #0006; }
  #game .voice-preview { position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 41; background: #222e; }
  .chat .mic { font-size: 1.3rem; padding: .35em .8em; }
}

/* =====================================================================
   v3: โต๊ะกลม, ขาฉ่าง, เดิมพันรายขา
   ===================================================================== */
.table-wrap { padding: 8px 0; }
.round-table { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 640px; margin: 0 auto; }
.round-table .felt {
  position: absolute; inset: 14% 12%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #1d8a57 0%, #13673f 55%, #0c4a2c 100%);
  border: 14px solid #5b3417; box-shadow: 0 0 0 3px #2b180a, inset 0 0 40px #0008, 0 18px 40px #0009;
}
.round-table .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; width: 46%; pointer-events: none; }
.round-table .center button { pointer-events: auto; }
.center-text { font-weight: 700; text-shadow: 0 1px 3px #000; font-size: .95rem; }
.center-text .sub { font-weight: 400; color: var(--muted); font-size: .82rem; }
.round-table .deck { width: 110px; height: 84px; transform: scale(.8); }
.round-table .deck .dk { left: calc(50% - 30px); top: calc(50% - 45px); }

.seat2 { position: absolute; transform: translate(-50%, -50%); width: 150px; display: grid; justify-items: center; gap: 2px; text-align: center; z-index: 2; }
.seat2 .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  background: #264d3a; border: 3px solid #ffffff55; box-shadow: 0 3px 8px #0008; position: relative; }
.seat2.me .av { border-color: #fff; }
.seat2.dealer .av { border-color: var(--gold); background: #5a4410; }
.seat2.off .av { filter: grayscale(1) brightness(.6); }
.seat2.talk .av { box-shadow: 0 0 0 4px #7c4dff, 0 0 18px #7c4dff; animation: pulse 1s infinite; }
.seat2 .av .tag { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: .62rem; padding: 0 .45em; border-radius: 999px; background: var(--gold); color: #3a2a00; white-space: nowrap; }
.seat2 .nm { font-weight: 700; font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.seat2 .ch { color: var(--gold); font-weight: 700; font-size: .8rem; }
.seat2 .st { font-size: .72rem; color: var(--muted); }
.seat2 .bets { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.chipv { font-size: .68rem; font-weight: 800; padding: .05em .45em; border-radius: 999px; background: #fff; color: #222; border: 2px dashed #c33; }
.seat2 .legs2 { display: grid; gap: 3px; }
.seat2 .lg { display: flex; align-items: center; gap: 4px; justify-content: center; }
.seat2 .lg .hand { gap: 2px; flex-wrap: nowrap; }
.seat2 .lg .res { font-size: .68rem; line-height: 1.1; text-align: left; min-width: 38px; }
.seat2 .net { font-weight: 800; font-size: .85rem; }

.card.micro, .flip.micro { width: 24px; height: 36px; border-radius: 4px; }
.flip.micro .card { border-radius: 4px; }
.card.micro.back, .flip.micro .card.back { border-width: 2px; }
.flip.micro.discard { transform: translateY(3px) rotate(-6deg); }

/* ขาฉ่าง */
.gap { position: absolute; transform: translate(-50%, -50%); z-index: 1; display: grid; justify-items: center; gap: 2px; }
.gap .add { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: #ffffff22; color: #fff; border: 2px dashed #ffffff88; font-size: 1rem; }
.gap .add:hover { background: #ffffff44; }
.gap .vleg { display: grid; justify-items: center; gap: 2px; padding: 4px 6px; border-radius: 10px; border: 2px dashed var(--gold); background: #0005; }
.gap .vleg .lbl { font-size: .66rem; color: var(--gold); font-weight: 700; }
.gap .vleg button { padding: 0 .4em; font-size: .65rem; background: #b83a3a; color: #fff; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; }

/* เดิมพันรายขา */
.bet-legs { display: grid; gap: 8px; }
.bet-leg { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bet-leg b { min-width: 3.2em; }
.bet-leg input { width: 100px; }
.bet-leg .x { background: #ffffff22; color: #fff; padding: .3em .6em; }

@media (max-width: 700px) {
  .round-table { aspect-ratio: 3 / 4; max-height: 78vh; }
  .round-table .felt { inset: 12% 14%; border-width: 10px; }
  .seat2 { width: 100px; }
  .seat2 .av { width: 36px; height: 36px; font-size: 1rem; }
  .card.micro, .flip.micro { width: 19px; height: 29px; }
  .seat2 .lg .res { min-width: 30px; font-size: .62rem; }
  .round-table .center { width: 56%; }
}
.table-wrap { padding-bottom: 28px; }
@media (max-width: 700px) {
  .seat2 { width: 86px; }
  .seat2 .av { width: 30px; height: 30px; font-size: .9rem; border-width: 2px; }
  .seat2 .nm { font-size: .75rem; }
  .seat2 .ch, .seat2 .st { font-size: .68rem; }
  .card.micro, .flip.micro { width: 15px; height: 23px; }
  .flip.micro .card.back { border-width: 1px; }
  .chipv { font-size: .6rem; padding: 0 .35em; }
  .gap .flip.micro { width: 12px; height: 18px; }
  .gap .vleg { padding: 2px 4px; }
  .gap .vleg .lbl { font-size: .58rem; }
  .gap .add { width: 24px; height: 24px; font-size: .85rem; }
  .round-table .deck { transform: scale(.6); }
}

/* มือถือ: ไพ่เจ้ามือใบใหญ่ตอนเปิดไพ่ */
.flip.big { width: 78px; height: 117px; }
.flip.mid { width: 52px; height: 78px; }
.dealer-show { background: var(--panel); border: 2px solid var(--gold); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; }
.dealer-show .ttl { font-weight: 700; color: var(--gold); }
.dealer-show .row { gap: 12px; flex-wrap: nowrap; }
.dealer-show .hand { gap: 5px; flex-wrap: nowrap; }
.dealer-spot { position: fixed; inset: 0; z-index: 70; background: #000b; display: grid; place-items: center; padding: 16px; animation: fadeIn .25s both; }
.dealer-spot .box { background: radial-gradient(ellipse at 50% 30%, #1d8a57, #0c4a2c); border: 3px solid var(--gold); border-radius: 18px; padding: 16px 12px; display: grid; gap: 12px; justify-items: center; text-align: center; box-shadow: 0 20px 60px #000; max-width: 100%; }
.dealer-spot .ttl { font-weight: 800; font-size: 1.1rem; color: var(--gold); }
.dealer-spot .hand { gap: 6px; flex-wrap: nowrap; }
.dealer-spot .lbl { font-size: 1.4rem; }
@media (max-width: 360px) { .flip.big { width: 66px; height: 99px; } }
@media (min-width: 701px) { .dealer-show, .dealer-spot { display: none !important; } }

/* =====================================================================
   v4: เลือกเกม, ป๊อกเด้ง, ดัมมี่
   ===================================================================== */
.gname { background: var(--gold); color: #3a2a00; font-weight: 800; font-size: .78rem; padding: .15em .6em; border-radius: 999px; margin-right: 4px; }
.gname:empty { display: none; }
.game-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.game-pick label { display: block; cursor: pointer; }
.game-pick input { position: absolute; opacity: 0; pointer-events: none; }
.game-pick span { display: grid; gap: 2px; padding: 10px; border-radius: 12px; border: 2px solid #ddd; background: #fff; height: 100%; }
.game-pick small { color: #777; font-size: .75rem; }
.game-pick input:checked + span { border-color: #c79a1c; background: #fff7dc; box-shadow: 0 0 0 2px #f2c14e88; }
@media (max-width: 480px) { .game-pick { grid-template-columns: 1fr; } }
.rules-tabs { margin-bottom: 8px; }
.rules-tabs .tab { background: #eee; color: #333; }
.leg .dec { margin-top: 6px; }

/* ดัมมี่ */
.dummy-zone { display: grid; gap: 12px; }
.dummy-zone .ttl { font-weight: 700; margin-bottom: 4px; }
.dcard { position: relative; flex: none; border-radius: 8px; transition: transform .12s; }
.dcard .card { width: 100%; height: 100%; }
.dcard.mid { width: 54px; height: 81px; }
.dcard.small { width: 36px; height: 54px; }
.dcard.small .card { border-radius: 5px; }
.dcard[data-hand], .dcard[data-pile] { cursor: pointer; }
.dcard.sel { transform: translateY(-10px); }
.dcard.sel .card { box-shadow: 0 0 0 3px var(--gold), 0 6px 14px #000a; }
.dcard.speto .card { box-shadow: 0 0 0 2px #7c4dff, 0 3px 8px #0006; }
.tagc { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-size: .58rem; font-weight: 800; padding: 0 .35em; border-radius: 999px; white-space: nowrap; z-index: 1; }
.tagc.head { background: var(--gold); color: #3a2a00; }
.tagc.sp { background: #7c4dff; color: #fff; }
.tagc.by { background: #fff; color: #222; bottom: auto; top: -6px; }
.pile { display: flex; gap: 4px; overflow-x: auto; padding: 12px 2px 10px; }
.melds-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed #ffffff22; }
.melds-row > b { min-width: 4em; font-size: .85rem; }
.meld { display: flex; gap: 2px; padding: 8px 6px; border-radius: 10px; background: #0003; border: 2px solid transparent; }
.meld[data-meld] { cursor: pointer; }
.meld.sel { border-color: var(--gold); background: #f2c14e22; }
.dhand { display: flex; gap: 5px; flex-wrap: wrap; padding: 12px 0 8px; }
.myhand .row .sel { outline: 2px solid var(--gold); }
.dcount { position: relative; gap: 1px; }
.dcount .cnt { margin-left: 4px; font-size: .75rem; font-weight: 800; }
.score-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.score-table th, .score-table td { padding: 6px 4px; border-bottom: 1px solid #ffffff22; text-align: left; vertical-align: top; }
.score-table tr.me td { background: #ffffff10; }
.score-table .win { color: var(--win); } .score-table .lose { color: var(--lose); }
.mini-hand { display: flex; gap: 1px; flex-wrap: wrap; margin-top: 2px; }
.mini-hand .card.micro { width: 18px; height: 27px; padding: 0; }
@media (max-width: 700px) {
  .dcard.mid { width: 44px; height: 66px; }
  .dcard.small { width: 28px; height: 42px; }
  .score-table { font-size: .75rem; }
}

/* =====================================================================
   v5: ดัมมี่ — โต๊ะสี่เหลี่ยม/สามเหลี่ยม, มือไพ่แบบพัดลากจัดเรียง
   ===================================================================== */
.round-table[data-shape="rect"] .felt { inset: 16% 15%; border-radius: 22px; }
.round-table[data-shape="tri"] .felt { inset: 6% 12% 14%; border: 0; border-radius: 0; box-shadow: none;
  background: #5b3417; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 18px 30px #0009); }
.round-table[data-shape="tri"] .felt::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 70%, #1d8a57 0%, #13673f 55%, #0c4a2c 100%);
  clip-path: polygon(50% 5.5%, 95.5% 96%, 4.5% 96%); }
.round-table[data-shape="tri"] .center { top: 64%; width: 40%; }
@media (max-width: 700px) {
  .round-table[data-shape="rect"] .felt { inset: 14% 20%; border-width: 10px; }
  .round-table[data-shape="tri"] .felt { inset: 10% 6% 14%; }
}

/* มือไพ่: ซ้อนแบบพัด เห็นแค่มุม (เลข + ดอก) ลากสลับตำแหน่งได้ */
.dcard.hand { width: 64px; height: 96px; }
.dhand.fan { position: relative; display: block; height: 124px; padding: 0; margin-top: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.dhand.fan .dcard { position: absolute; top: 18px; transition: left .15s ease, transform .12s ease; cursor: grab; }
.dhand.fan .dcard .card { box-shadow: -3px 2px 6px #0007; }
.dhand.fan .dcard .card { transition: transform .12s ease; }
.dhand.fan .dcard.sel .card { transform: translateY(-16px); }
.dhand.fan .dcard.drag { transition: none; cursor: grabbing; }
.dhand.fan .dcard.drag .card { box-shadow: 0 12px 24px #000b; }
.dhand.fan.dragging .dcard:not(.drag) { transition: left .12s ease; }
@media (hover: hover) { .dhand.fan:not(.dragging) .dcard:not(.sel):hover .card { transform: translateY(-6px); } }
@media (max-width: 700px) { .dcard.hand { width: 54px; height: 81px; } .dhand.fan { height: 108px; } }

/* กองทิ้ง / ชุดที่เกิด: ซ้อนกันเหมือนวางบนโต๊ะจริง */
.pile .dcard + .dcard { margin-left: -18px; }
.pile { gap: 0; padding-left: 4px; }
.pile .dcard { box-shadow: -2px 1px 4px #0006; border-radius: 5px; }
.pile .dcard.sel { transform: translateY(-8px); }
.meld { gap: 0; }
.meld .dcard + .dcard { margin-left: -20px; }
.meld .dcard { box-shadow: -2px 1px 4px #0006; border-radius: 5px; }
@media (max-width: 700px) { .pile .dcard + .dcard { margin-left: -14px; } .meld .dcard + .dcard { margin-left: -15px; } }
.dhand.fan .dcard.sel { transform: none; }
.pile .dcard[data-along] .card { outline: 2px dashed #f2c14e99; outline-offset: -2px; }
.warn { color: var(--lose); font-weight: 700; }

/* =====================================================================
   v6: ดัมมี่แบบมือถือเป็นหลัก — บอร์ดกะทัดรัด ไพ่ใหญ่ อ่านง่าย
   ===================================================================== */
.dummy-zone { gap: 10px; }
/* มุมไพ่ขนาดใหญ่ (เลข + ดอก) — อ่านง่ายแม้ไพ่ซ้อน */
.dcard .ix { position: absolute; top: 2px; left: 2px; display: grid; justify-items: center; line-height: 1; padding: 2px 1px 3px;
  min-width: 20px; background: #fffdf7; border-radius: 4px; color: #1b1b1b; font-weight: 800; pointer-events: none; }
.dcard .ix.red { color: #d32f2f; }
.dcard .ix b { font-size: 17px; letter-spacing: -1px; }
.dcard .ix i { font-style: normal; font-size: 15px; margin-top: 1px; }
.dcard.meldc .ix { min-width: 17px; } .dcard.meldc .ix b { font-size: 14px; } .dcard.meldc .ix i { font-size: 12px; }

/* ผู้เล่นคนอื่น */
.db-opps { display: flex; gap: 6px; overflow-x: auto; }
.opp { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: var(--panel); border: 2px solid transparent; }
.opp.turn { border-color: var(--gold); background: #f2c14e22; }
.opp.off { opacity: .55; }
.opp.talk .av { box-shadow: 0 0 0 3px #7c4dff; }
.opp .av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #264d3a; border: 2px solid #ffffff55; }
.opp .oi { display: grid; min-width: 0; line-height: 1.2; }
.opp .oi b { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp .oi small { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.opp .timer { margin-left: auto; font-size: .8rem; }

/* บอร์ดกลาง (พื้นผ้าเขียว) */
.db-felt { border-radius: 16px; padding: 10px; display: grid; gap: 10px;
  background: radial-gradient(ellipse at 50% 30%, #1d8a57 0%, #13673f 60%, #0c4a2c 100%); border: 6px solid #5b3417; box-shadow: inset 0 0 20px #0007; }
.db-msg { text-align: center; font-weight: 700; }
.db-row { display: flex; gap: 10px; align-items: flex-end; }
.db-felt .lbl { font-size: .78rem; color: #e7efe9; margin-bottom: 4px; }
.db-felt .hl, .meinfo .hl { color: var(--gold); font-weight: 700; }
.stock { position: relative; flex: none; width: 54px; height: 81px; }
.stock .card { width: 100%; height: 100%; }
.stock .cnt { position: absolute; right: -6px; top: -6px; background: var(--gold); color: #3a2a00; font-weight: 800; font-size: .8rem; border-radius: 999px; padding: 0 .45em; }
.stock .burn { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; background: #333; color: #fff; border-radius: 999px; padding: 0 .4em; }
.pile-wrap { flex: 1; min-width: 0; }
.db-felt .pile { display: flex; gap: 0; overflow-x: auto; padding: 12px 4px 10px; scrollbar-width: thin; }
.dcard.pc { width: 54px; height: 81px; }
.db-felt .pile .dcard + .dcard { margin-left: -28px; }
.db-melds { display: grid; gap: 6px; }
.mgrp { display: grid; gap: 2px; }
.mgrp .who { font-size: .75rem; font-weight: 700; color: #fff; }
.mrow { display: flex; flex-wrap: wrap; gap: 6px; }
.db-felt .meld { padding: 6px 6px 8px; background: #0003; }
.dcard.meldc { width: 42px; height: 63px; }
.db-felt .meld .dcard + .dcard { margin-left: -22px; }

/* มือไพ่ */
.dcard.hand { width: 72px; height: 108px; }
.dhand.fan { height: 132px; }
.myhand .zone-title h2 { font-size: 1rem; }
.meinfo { font-weight: 400; font-size: .78rem; color: var(--muted); }
.myhand .acts { margin-top: 2px; }
.myhand .acts button { flex: 1; min-width: 70px; padding: .7em .6em; font-size: 1rem; }
.myhand .acts:empty { display: none; }
.myhand > .hint { font-size: .82rem; margin-top: 6px; }

@media (max-width: 700px) {
  .dcard.hand { width: 64px; height: 96px; }
  .dhand.fan { height: 120px; }
  .dcard.pc, .stock { width: 48px; height: 72px; }
  .db-felt .pile .dcard + .dcard { margin-left: -24px; }
  .dcard.meldc { width: 38px; height: 57px; }
  .db-felt .meld .dcard + .dcard { margin-left: -20px; }
  .dcard .ix b { font-size: 16px; } .dcard .ix i { font-size: 14px; }
  .dcard.meldc .ix b { font-size: 13px; } .dcard.meldc .ix i { font-size: 11px; }
  /* มือไพ่ + ปุ่ม ติดขอบล่างจอ (เหนือแถบแชท) */
  #dummyZone .myhand { position: sticky; bottom: 70px; z-index: 30; background: #0b3a24; box-shadow: 0 -6px 16px #0008; border: 1px solid #ffffff22; padding: 8px 10px; }
  #dummyZone .myhand .zone-title { margin-bottom: 0; }
  #dummyZone .myhand .zone-title .row button { padding: .3em .55em; font-size: .75rem; }
  .db-felt { padding: 8px; border-width: 5px; }
}
.myhand .zone-title { flex-wrap: nowrap; align-items: center; }
.myhand .zone-title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.myhand .sorts { flex-wrap: nowrap; gap: 4px; }
/* มือถือ: แถบบนกะทัดรัด (ใช้กับทุกเกม) */
@media (max-width: 700px) {
  .topbar { padding: 6px 10px; gap: 4px 8px; }
  .room-info { font-size: .85rem; }
  .room-info b { font-size: 1rem; }
  .top-actions { gap: 4px; }
  .top-actions button.small, #btnCopy { padding: .3em .55em; font-size: .72rem; }
  .phase { order: 3; width: 100%; font-size: .88rem; }
  .dcard.hand { width: 62px; height: 93px; }
  .dhand.fan { height: 106px; margin-top: 2px; }
  .dhand.fan .dcard { top: 12px; }
  .myhand .zone-title h2 { font-size: .92rem; }
  .myhand > .hint { font-size: .74rem; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .myhand .acts button { padding: .55em .5em; font-size: .95rem; }
}
.myhand .sorts button { white-space: nowrap; }
@media (max-width: 700px) { .myhand .sorts button { font-size: .7rem; padding: .3em .45em; } .meinfo { font-size: .7rem; } }
.db-melds { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.db-felt .meld.can { border-color: #f2c14e88; box-shadow: 0 0 0 2px #f2c14e55; }
.dres .burned { margin: 10px 0 4px; } .dres .bcards { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bot-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.bot-chip { display: inline-flex; align-items: center; gap: 4px; background: #ffffff18; border-radius: 999px; padding: .15em .3em .15em .6em; font-size: .82rem; }
.bot-chip .x { padding: .1em .45em; background: #ffffff22; color: #fff; }
.fly-card { position: fixed; z-index: 90; width: 40px; height: 60px; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(45deg, #8d1c1c 0 5px, #a82a2a 5px 10px); border: 2px solid #fff; box-shadow: 0 4px 10px #0008; }
.dealer-tag { font-size: .62rem; background: var(--gold); color: #3a2a00; border-radius: 999px; padding: 0 .45em; margin-left: 2px; vertical-align: middle; }

/* ---------- ประวัติ ---------- */
.history-dlg { max-height: 88vh; flex-direction: column; }
.history-dlg:not([open]) { display: none; }
.history-dlg[open] { display: flex; }
.history-body { overflow: auto; flex: 1; min-height: 120px; margin: 8px 0 12px; }
.htabs { display: flex; gap: 6px; }
.htab { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid #ccc; background: #fff; }
.htab.sel { background: #1f6f43; color: #fff; border-color: #1f6f43; }
.htable { width: 100%; border-collapse: collapse; font-size: 14px; }
.htable th { text-align: left; font-weight: 600; color: #666; border-bottom: 1px solid #ddd; padding: 6px 4px; position: sticky; top: 0; background: #fffdf7; }
.htable td { border-bottom: 1px solid #eee; padding: 6px 4px; vertical-align: top; }
.htable td:last-child, .htable th:last-child { text-align: right; white-space: nowrap; }
.htable tr.clickable { cursor: pointer; }
.htable tr.clickable:hover { background: #f3efe2; }
.htable .pos, .hrow .pos { color: #18803c; } .htable .neg, .hrow .neg { color: #c0392b; }
.hrow { padding: 8px 0; border-bottom: 1px solid #eee; }
.hrow .disc { text-decoration: line-through; opacity: .5; }
.redtxt { color: #c0392b; }
.tagx { font-size: 11px; background: #eee; border-radius: 6px; padding: 1px 6px; color: #444; }
.history-dlg .link { color: #1f6f43; }
.byface { display: block; font-size: 10px; opacity: .8; }

/* =====================================================================
   v7: โต๊ะป๊อกซิ่ง/ป๊อกเด้ง — ไพ่บนโต๊ะใหญ่ขึ้น วางซ้อนให้เห็นมุมเลข + ดอกชัดๆ
   ===================================================================== */
.flip .ix { display: none; }
.flip.micro .ix, .flip.mid .ix, .flip.big .ix, .dealer-spot .flip .ix {
  position: absolute; top: 1px; left: 1px; display: grid; justify-items: center; line-height: 1;
  background: #fffdf7; border-radius: 3px; color: #1b1b1b; font-weight: 800; pointer-events: none; padding: 1px 1px 2px;
}
.flip .ix.red { color: #d32f2f; }
.flip .ix i { font-style: normal; }
.flip.micro .ix { min-width: 15px; } .flip.micro .ix b { font-size: 13px; letter-spacing: -1px; } .flip.micro .ix i { font-size: 12px; }
.flip.mid .ix, .flip.big .ix, .dealer-spot .flip .ix { min-width: 20px; padding: 2px 1px 3px; }
.flip.mid .ix b, .flip.big .ix b, .dealer-spot .flip .ix b { font-size: 18px; letter-spacing: -1px; }
.flip.mid .ix i, .flip.big .ix i, .dealer-spot .flip .ix i { font-size: 16px; }
/* ไพ่ข้อความ (ไม่ใช่ภาพ) ไม่ต้องมีมุมซ้ำ */
.flip .card:not(.img) .ix { display: none !important; }

/* ไพ่บนโต๊ะ: ใหญ่ขึ้น + ซ้อนกัน */
.card.micro, .flip.micro { width: 34px; height: 50px; border-radius: 4px; }
.seat2 .lg .hand, .gap .hand { gap: 0; flex-wrap: nowrap; }
.seat2 .lg .hand, .gap .hand { padding-left: 16px; }
.seat2 .lg .hand > .flip.micro, .gap .hand > .flip.micro { margin-left: -16px; }
/* ใบที่ทิ้ง: ย้ายไปท้ายสุด ซ้อนน้อยลง จางลง */
.seat2 .lg .hand > .flip.micro.discard { order: 9; margin-left: -8px; }
.flip.micro .card { box-shadow: -2px 1px 4px #0006; }
.flip.micro.discard { opacity: .45; transform: translateY(6px); }
.seat2 .lg { flex-direction: column; gap: 1px; }
.seat2 .lg .res { text-align: center; min-width: 0; white-space: normal; max-width: 100%; font-size: .7rem; margin-top: 4px; line-height: 1.15; }
.seat2 .lg .res .outcome, .seat2 .lg .res .byface { white-space: nowrap; }
.seat2 .lg .res br { display: none; }
.seat2 .lg .res .outcome { margin-left: 3px; }
.byface { display: inline; font-size: .6rem; margin-left: 3px; opacity: .85; }
@media (max-width: 700px) {
  .card.micro, .flip.micro { width: 30px; height: 44px; }
  .seat2 .lg .hand, .gap .hand { padding-left: 14px; }
  .seat2 .lg .hand > .flip.micro, .gap .hand > .flip.micro { margin-left: -14px; }
  .seat2 .lg .hand > .flip.micro.discard { margin-left: -6px; }
  .seat2 .lg .res { font-size: .64rem; }
  .gap .flip.micro { width: 22px; height: 32px; }
  .gap .hand { padding-left: 12px; } .gap .hand > .flip.micro { margin-left: -12px; }
  .gap .flip.micro .ix b { font-size: 10px; } .gap .flip.micro .ix i { font-size: 9px; } .gap .flip.micro .ix { min-width: 11px; }
  .flip.micro .card.back { border-width: 2px; }
}
/* ผู้เล่นหลายขา: ไพ่เล็กลงเล็กน้อยไม่ให้ทับคนข้างๆ */
.seat2.multi .flip.micro { width: 28px; height: 41px; }
.seat2.multi .lg .hand { padding-left: 13px; }
.seat2.multi .lg .hand > .flip.micro { margin-left: -13px; }
.seat2.multi .lg .hand > .flip.micro.discard { margin-left: -6px; }
.seat2.multi .legs2 { gap: 1px; }
.seat2.multi .lg .res { margin-top: 2px; }
@media (max-width: 700px) {
  .round-table { aspect-ratio: 3 / 4.4; max-height: 84vh; }
  .seat2.multi .flip.micro { width: 25px; height: 37px; }
  .seat2.multi .lg .hand { padding-left: 12px; }
  .seat2.multi .lg .hand > .flip.micro { margin-left: -12px; }
  .seat2.multi .flip.micro .ix b { font-size: 11px; } .seat2.multi .flip.micro .ix i { font-size: 10px; } .seat2.multi .flip.micro .ix { min-width: 12px; }
  .seat2.multi .av { width: 26px; height: 26px; }
  .seat2.multi .lg .res { font-size: .58rem; }
}
.flip .ix.ten b { letter-spacing: -2px; transform: scaleX(.82); }
.flip.micro .ix.ten { min-width: 16px; }
.seat2 .dlabel { font-size: .8rem; line-height: 1.2; }
@media (max-width: 700px) { .seat2 .dlabel { font-size: .7rem; } .seat2 .dlabel .net { font-size: .85rem; } }

/* ---------- ดัมมี่ v7: ไพ่ฝากอยู่ในพื้นที่คนฝาก + เส้นเชื่อม, โชว์สเปโต ---------- */
.db-melds { position: relative; }
.db-melds > :not(svg) { position: relative; z-index: 1; }
.db-melds svg.laylinks { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.db-melds svg.laylinks path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; opacity: .9; }
.db-melds svg.laylinks circle { fill: var(--gold); }
.db-felt .meld.lay { border: 2px dashed #f2c14e99; background: #f2c14e14; position: relative; padding-top: 14px; }
.meld.lay .laytag { position: absolute; top: 1px; left: 6px; font-size: 10px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.showbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: #7c4dff33; border: 1px solid #7c4dff; }
.showbar span { font-size: .8rem; }
.opp .shown { display: block; font-size: .68rem; font-weight: 700; color: #d7c4ff; }
.log .show { color: #d7c4ff; font-weight: 700; }