/* Trang poker */
.poker { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding: 20px 24px 28px; max-width: 1480px; width: 100%; margin: 0 auto; }
.table-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.stage {
  position: relative; aspect-ratio: 16 / 10; min-height: 360px; max-height: calc(100vh - var(--top) - 190px); width: 100%;
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #041810; box-shadow: var(--shadow);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud-l { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 3; }
.hud-l #streetM { display: none; }
.hud-l .badge { background: rgba(6,28,19,.7); backdrop-filter: blur(8px); border: 1px solid var(--line); height: 26px; }
.streets { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(6,28,19,.7); border: 1px solid var(--line); backdrop-filter: blur(8px); z-index: 3; }
.streets i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--mute); padding: 4px 11px; border-radius: 999px; transition: .3s; white-space: nowrap; }
.streets i.done { color: var(--dim); }
.streets i.on { background: var(--acc); color: var(--on-acc); }
.streets.idle i { opacity: .5; }

.pot { position: absolute; transform: translate(0, -50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(6,28,19,.78); border: 1px solid rgba(240,56,74,.35); backdrop-filter: blur(8px); pointer-events: none; z-index: 2; transition: opacity .3s; }
.pot small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--on-acc); background: var(--gold); border-radius: 999px; padding: 2px 7px; }
.pot b { font-size: 14px; color: var(--gold); }
.pot.hide { opacity: 0; }

.result {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 4; max-width: min(90%, 560px); text-align: center;
  padding: 10px 18px; border-radius: 16px; font-weight: 700; background: rgba(6,28,19,.82); border: 1px solid rgba(240,56,74,.45);
  box-shadow: 0 0 0 4px rgba(240,56,74,.07), 0 10px 40px rgba(0,0,0,.5); backdrop-filter: blur(10px); animation: rin .4s cubic-bezier(.2,.9,.3,1.3);
}
.result.mine { border-color: var(--acc); background: linear-gradient(135deg, rgba(240,56,74,.2), rgba(6,28,19,.85)); }
.result .tr { display: block; font: 800 11px var(--display); letter-spacing: .1em; color: var(--acc); margin-bottom: 2px; }
@keyframes rin { from { opacity: 0; transform: translate(-50%, -10px) scale(.92); } }

/* ghế */
.seat {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; min-width: 128px; max-width: 170px;
  border-radius: 999px; background: rgba(6,30,20,.88); border: 1.5px solid var(--line2); backdrop-filter: blur(10px); pointer-events: none; z-index: 2;
  transition: border-color .2s, box-shadow .2s, opacity .3s, transform .3s; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.seat .av { position: relative; width: 38px; height: 38px; font-size: 12.5px; }
.seat .av::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--tc, var(--acc)) var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 21px, #000 21.5px); mask: radial-gradient(circle, transparent 21px, #000 21.5px); }
.seat .inf { min-width: 0; line-height: 1.2; }
.seat .nm { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.seat .nm span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seat .nm em.ai { background: rgba(18,183,106,.28); color: var(--sec2); }
.room-c .names i, .ait { font-style: normal; font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 4px; background: rgba(18,183,106,.28); color: var(--sec2); }
.seat .nm em { flex: none; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: var(--s4); color: var(--dim); }
.seat .nm .off { color: var(--lose); }
.seat .ch { font: 700 12.5px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.seat .ch .ai { font-family: var(--body); font-size: 10px; color: var(--hot); margin-left: 4px; }
.seat .act { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 5px); padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--s4); color: var(--text); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.seat .act.fold { background: #23302a; color: var(--mute); }
.seat .act.check { background: #1d3a2e; color: #a8ecc6; }
.seat .act.call { background: rgba(126,224,173,.18); color: var(--info); }
.seat .act.raise { background: var(--acc); color: var(--on-acc); }
.seat .act.blind { background: rgba(18,183,106,.25); color: var(--sec2); }
.seat .act.allin { background: var(--hot); color: #fff; }
.seat .dbtn { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #111; font: 800 10px var(--display); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.seat.turn { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(240,56,74,.14), 0 0 30px rgba(240,56,74,.25); transform: translate(-50%, -50%) scale(1.06); }
.seat.me { background: rgba(16,52,36,.94); border-color: rgba(31,204,124,.6); }
.seat.me.turn { border-color: var(--acc); }
.seat.fold { opacity: .42; }
.seat.won { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240,56,74,.18), 0 0 34px rgba(240,56,74,.4); opacity: 1; }

/* thanh điều khiển */
.dock { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; overflow: hidden; }
.tbar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.tbar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .25s linear, background .3s; }
.tbar i.low { background: var(--hot); }
.wait { height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--dim); font-weight: 600; }
.wait b { color: var(--text); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sec2); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.acts { display: flex; flex-direction: column; gap: 12px; }
.raise-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 118px; gap: 12px; align-items: center; }
.raise-row .chips button { flex: none; padding: 0 12px; }
.raise-row .inp { height: 40px; }
.raise-row .inp input { font-size: 15px; text-align: right; padding-right: 12px; }
.main-acts { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: 10px; }
.main-acts .btn { height: 54px; font-size: 15px; border-radius: 16px; flex-direction: column; gap: 0; line-height: 1.15; }
.main-acts .btn small { font-size: 11px; font-weight: 600; opacity: .7; }
.timer-txt { font: 700 12px var(--display); color: var(--dim); }

/* cột phải */
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.side .card { overflow: hidden; display: flex; flex-direction: column; }
.side-tabs { margin: 12px; }
.side-tabs button { height: 34px; font-size: 12.5px; }
.pane { padding: 0 14px 14px; }
#log { height: 360px; overflow: auto; font-size: 12.5px; color: var(--dim); display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
#log div { padding: 5px 8px; border-radius: 8px; }
#log div:hover { background: var(--s2); }
#log .sep { margin-top: 6px; color: var(--mute); font: 700 10.5px var(--display); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
#log .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#log .win { color: var(--acc); background: rgba(240,56,74,.06); font-weight: 600; }
.ranks { margin: 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 4px; }
.ranks li { counter-increment: r; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 7px 8px; border-radius: 10px; background: var(--s2); }
.ranks li::before { content: counter(r); grid-row: span 2; align-self: center; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--s4); font: 700 11px var(--display); color: var(--dim); }
.ranks li:first-child::before { background: var(--acc); color: var(--on-acc); }
.ranks b { font-size: 13px; } .ranks span { font-size: 11.5px; color: var(--mute); }
.how p { margin: 0 0 10px; color: var(--dim); font-size: 13px; } .how b { color: var(--text); }
.promo {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); text-decoration: none;
  background: linear-gradient(135deg, rgba(255,107,87,.2), rgba(240,56,74,.14)); border: 1px solid rgba(255,107,87,.3); transition: transform .2s;
}
.promo:hover { transform: translateY(-2px); }
.promo .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--warm); color: #ffffff; flex: none; }
.promo b { display: block; font-family: var(--display); font-size: 14px; } .promo small { color: var(--dim); font-size: 12px; }
.promo .go { margin-left: auto; font-size: 20px; color: var(--warm); }

/* màn hình vào bàn */
#modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4,24,16,.72); backdrop-filter: blur(10px); }
.join-card { position: relative; width: 100%; max-width: 420px; padding: 30px 26px 22px; border-radius: var(--r-xl); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.join-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(240,56,74,.22), transparent 65%); pointer-events: none; }
.join-card h2 { margin: 14px 0 8px; font-size: 26px; line-height: 1.15; }
.join-card > .hint { margin: 0 0 20px; font-size: 13px; color: var(--dim); }
.join-art { position: absolute; right: 26px; top: 26px; width: 90px; height: 80px; }
.join-art .c { position: absolute; width: 50px; height: 70px; border-radius: 8px; background: #fbfbfd; color: #14161c; font: 800 17px var(--display); padding: 5px 7px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.join-art .c i { display: block; font-style: normal; font-size: 22px; line-height: 1; margin-top: 4px; }
.join-art .c1 { left: 0; top: 6px; transform: rotate(-12deg); }
.join-art .c2 { left: 34px; top: 0; transform: rotate(9deg); color: #e0233d; }
.join-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.join-row .avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 16px; transition: background .3s; }
.join-err { min-height: 20px; margin-top: 8px; color: var(--lose); font-size: 12.5px; font-weight: 600; text-align: center; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.facts div { text-align: center; } .facts b { display: block; font-size: 14px; } .facts span { font-size: 10.5px; color: var(--mute); }

@media (max-width: 1180px) {
  .poker { grid-template-columns: minmax(0, 1fr); }
  .side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  #log { height: 220px; }
}
@media (max-width: 900px) {
  .poker { padding: 10px 10px 18px; gap: 10px; }
  .stage { aspect-ratio: auto; height: calc(100svh - 58px - var(--tabbar) - 214px - env(safe-area-inset-bottom)); min-height: 380px; max-height: none; border-radius: 20px; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .dock { position: sticky; bottom: calc(var(--tabbar) + 8px + env(safe-area-inset-bottom)); z-index: 20; padding: 10px; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
  .raise-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
  .raise-row .chips { grid-column: 1 / -1; }
  .raise-row .chips button { flex: 1; }
  .main-acts .btn { height: 50px; font-size: 14px; }
  .seat { min-width: 0; max-width: 128px; padding: 3px 9px 3px 3px; gap: 6px; }
  .seat .av { width: 30px; height: 30px; font-size: 10.5px; }
  .seat .av::before { inset: -3px; -webkit-mask: radial-gradient(circle, transparent 16px, #000 16.5px); mask: radial-gradient(circle, transparent 16px, #000 16.5px); }
  .seat .nm { font-size: 11px; } .seat .ch { font-size: 11px; }
  .seat .act { font-size: 10px; padding: 1px 8px; }
  .hud-l .badge:nth-child(2) { display: none; }
  .hud-l #streetM { display: inline-flex; background: rgba(240,56,74,.14); border-color: rgba(240,56,74,.3); }
  .streets { display: none; }
  .hud-l { left: 10px; top: 10px; }
  .result { top: 48px; font-size: 13px; }
}
@media (max-width: 420px) { .facts b { font-size: 12px; } .join-card h2 { font-size: 22px; } .join-art { transform: scale(.8); transform-origin: top right; } }
.turnline { display: flex; align-items: center; gap: 10px; margin-top: -2px; }
.turnline .hint { margin-left: auto; }
.turnline .timer-txt { font-size: 13px; }
.pc { display: inline-block; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: #f6f1e6; color: #15151f; font: 700 11px var(--display); line-height: 17px; }
.pc.r { color: #e5213d; }

/* hộp thoại mua vào / kết quả */
.mh { display: flex; gap: 6px; flex-wrap: wrap; }
.join-card .field { margin: 4px 0 6px; }
.wline { margin: 6px 0 14px; font-size: 13px; color: var(--dim); } .wline b { color: var(--text); }
.trophy { width: 84px; height: 84px; margin: 0 auto 6px; border-radius: 26px; display: grid; place-items: center; font-size: 44px; background: var(--s3); }
.trophy.gold { background: linear-gradient(135deg, rgba(240,56,74,.35), rgba(255,107,87,.2)); box-shadow: 0 0 50px rgba(240,56,74,.35); }
.trophy.paid { background: rgba(240,56,74,.14); }
.top .rt .btn.sm { height: 36px; }
@media (max-width: 900px) { .top .back { display: none; } .top .rt { gap: 6px; } .top .wallet .lbl { display: none; } }

/* giải đấu */
.tcard .card-h { font-family: var(--display); font-size: 13.5px; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.tgrid div { background: var(--s2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.tgrid small { display: block; font-size: 10.5px; color: var(--mute); font-weight: 600; }
.tgrid b { font-size: 14px; white-space: nowrap; } .tgrid span { display: block; font-size: 10.5px; color: var(--dim); }
.pay { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(240,56,74,.06); border: 1px solid rgba(240,56,74,.16); display: flex; flex-direction: column; gap: 3px; }
.pay.lead { background: var(--s2); border-color: var(--line); }
.pay small { font-size: 11px; color: var(--dim); font-weight: 600; margin-bottom: 2px; } .pay small b { color: var(--gold); font-family: var(--display); }
.pay div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--dim); } .pay div b { color: var(--text); font-family: var(--display); font-size: 12px; }
.champ { margin: 0 12px 12px; padding: 10px; border-radius: 12px; text-align: center; font-weight: 800; background: linear-gradient(135deg, rgba(240,56,74,.25), rgba(255,107,87,.12)); color: var(--gold); }
.lvl { position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--dim); background: rgba(6,28,19,.72); border: 1px solid rgba(240,56,74,.3); backdrop-filter: blur(8px); }
.lvl b { color: var(--gold); font-family: var(--display); }
.room { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,24,16,.62); backdrop-filter: blur(6px); }
.room-c { width: 100%; max-width: 440px; text-align: center; padding: 22px; border-radius: var(--r-xl); background: var(--s1); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.room-c h3 { margin: 10px 0 4px; font-size: 20px; }
.room-c .bar { height: 8px; border-radius: 4px; background: var(--s4); overflow: hidden; margin: 14px 0 8px; }
.room-c .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sec), var(--acc)); transition: width .4s; }
.room-c .cd { font: 700 13px var(--display); color: var(--acc); margin: 0 0 12px; min-height: 18px; }
.room-c .names { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 16px; max-height: 120px; overflow: auto; }
.room-c .names span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(240,56,74,.12); color: var(--acc); }
.room-c .names span.bot { background: var(--s3); color: var(--dim); }
.fixed-note { padding: 2px 2px 0; }
.wait .badge { margin-left: 4px; }
.wait { flex-wrap: wrap; text-align: center; }
@media (max-width: 900px) { .lvl { bottom: 10px; right: 10px; top: auto; left: auto; } .turnline .badge.info { display: none; } }
@media (max-width: 520px) {
  .top .rt .btn.sm { padding: 0 10px; font-size: 12px; }
}
/* điện thoại hẹp: thanh đầu bàn chơi chỉ giữ logo, nút bàn chơi, số dư và tài khoản */
@media (max-width: 520px) { .hud-l { top: auto; bottom: 10px; left: 10px; flex-direction: column; align-items: flex-start; gap: 4px; } .hud-l .badge { height: 22px; font-size: 11px; } } /* khỏi che ghế trên cùng */
@media (max-width: 420px) { .top .mbrand .bt { display: none; } .top #snd { display: none; } .top .rt { gap: 5px; } .top .rt .btn.sm { padding: 0 8px; } }
/* sảnh (không có nút Rời bàn) dùng chung file này: bỏ chữ logo thì hiện biểu tượng logo thay vào */
@media (max-width: 420px) { .top:not(:has(#leaveBtn)) .mbrand .mk { display: block; width: 36px; height: 36px; } }