/* Покер — вид по макета (docs/poker/mockup-table.webp): фон като бар с кожа и лъва, овална маса с хромиран ръб,
   зелено сукно с лъва воден знак, местата по ръба на елипсата (аватар, плочка, карти до нея), моето място долу на
   ръба с големи карти, чипове в средата, таймер със секунди, панел с действията долу. Геометрията на масата и
   местата се смята в app.js (елипса), тук са само видът и размерите през --ch (височина на карта) и --fw/--fh.
   Теми: body[data-felt=green|blue|bordo|wood], body[data-back=lion|blue|red|gold]. */

:root {
  --bg: #07090b; --panel: rgba(10, 13, 16, .82); --ink: #f2f4f7; --muted: #9aa3ad; --dim: #5f6873;
  --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.22);
  --green: #35e08a; --green-d: #1f9c5e; --red: #e5484d; --red-d: #9b2c30; --gold: #f3a522; --gold-2: #d8b25a; --blue: #4aa8ff;
  --felt: #157a45; --felt-d: #0b4328; --felt-l: #22a55f;
  --rim: linear-gradient(160deg, #f4f6f8 0%, #9aa2ab 22%, #e9ecef 38%, #6b737b 55%, #d5d9de 72%, #7d858d 100%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #e6e9ee 35%, #9aa0aa 55%, #f0f2f5 75%, #b7bcc5 100%);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ch: 60px;    /* височина на карта на борда; app.js я нагласява по масата */
}
body[data-felt="blue"] { --felt: #1d4f8a; --felt-d: #0f2c50; --felt-l: #2f74c6; }
body[data-felt="bordo"] { --felt: #7a1f2e; --felt-d: #47101a; --felt-l: #a33344; }
body[data-felt="wood"] { --felt: #6b4a2a; --felt-d: #3d2916; --felt-l: #8f6a3f; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: Inter, "Segoe UI", -apple-system, Roboto, system-ui, sans-serif; overflow-x: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; }
.display { font-family: "Russo One", Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .04em; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 8px rgba(0,0,0,.7)); }
.screen[hidden] { display: none !important; }
.hint { color: var(--muted); font-size: .82rem; }
.gold { color: var(--gold); }

/* ── фон на лобито ── */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(90% 60% at 50% -10%, #182028, var(--bg) 60%); }
.fx i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .25; }
.fx .g1 { width: 60vmax; height: 40vmax; left: -20vmax; top: 25vh; background: #0e5a3a; }
.fx .g2 { width: 50vmax; height: 36vmax; right: -18vmax; top: 30vh; background: #123e6e; }
.fx .wm { position: absolute; right: -8vmax; top: 6vh; width: clamp(200px, 40vw, 520px); opacity: .18; filter: grayscale(1) brightness(.7); }

/* ── лоби ── */
#lobby { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top)) 14px calc(90px + var(--safe-b)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 8px; }
.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.top .brand img { width: 40px; height: 40px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.top .brand b { font-size: 1.15rem; }
.me { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.me .av { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); overflow: hidden; display: grid; place-items: center; background: #141a20; box-shadow: 0 0 0 2px rgba(53,224,138,.35); }
.me .av img, .me .av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.me .av .emo { font-size: 1.4rem; }
.me b { display: block; font-size: .95rem; line-height: 1.1; }
.me small { color: var(--gold); font-size: .78rem; }
.ib { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: none; border: 0; color: #d9dde3; }
.ib svg { width: 22px; height: 22px; }
.hero { text-align: center; padding: 10px 0 14px; }
.hero h1 { margin: 0; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; }
.hero p { margin: 6px 0 0; color: #d9dde3; letter-spacing: .06em; font-size: .9rem; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.quick .solo { grid-column: 1 / -1; }
.act { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; border-radius: 999px; font-size: 1.05rem; font-weight: 600; color: var(--ink); background: rgba(8,10,13,.75); border: 1.5px solid var(--line-2); box-shadow: 0 0 22px rgba(0,0,0,.3); transition: transform .12s; }
.act:active { transform: scale(.98); }
.act.solo { border-color: rgba(243,165,34,.7); box-shadow: 0 0 26px rgba(243,165,34,.22); font-size: 1.2rem; padding: 16px; }
.act.create { border-color: rgba(53,224,138,.6); box-shadow: 0 0 22px rgba(53,224,138,.18); }
.act.join { border-color: rgba(74,168,255,.6); box-shadow: 0 0 22px rgba(74,168,255,.18); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 14px; }
.box h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.box h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.tlist { display: flex; flex-direction: column; gap: 8px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.trow:active { background: rgba(255,255,255,.08); }
.trow .t { flex: 1; min-width: 0; }
.trow .t b { display: block; font-size: 1rem; }
.trow .t small { color: var(--muted); font-size: .78rem; }
.trow .n { font-size: .82rem; color: var(--green); white-space: nowrap; }
.trow .n.turn { color: var(--gold); font-weight: 700; animation: pulse 1.2s infinite; }
.trow .faces { display: flex; }
.trow .faces .av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1.5px solid #0b0d10; margin-left: -8px; background: #1a2027; display: grid; place-items: center; font-size: .8rem; }
.trow .faces .av img, .trow .faces .av svg { width: 100%; height: 100%; object-fit: cover; }
@keyframes pulse { 50% { opacity: .55; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.form label.wide { grid-column: 1 / -1; }
.form input, .form select { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: #0d1114; color: var(--ink); font-size: 1rem; }
.form .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.form .seg button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: .9rem; }
.form .seg button.on { background: var(--green); color: #0b1a12; border-color: var(--green); font-weight: 700; }
.form .chk { flex-direction: row; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink); }
.btn { padding: 12px 18px; border-radius: 999px; border: 0; font-weight: 700; font-size: 1.05rem; background: var(--green); color: #0b1a12; }
.btn.gold { background: var(--gold); color: #1a1408; }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.red.rec { background: #ff3b40; animation: pulse 1s infinite; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.joinbox { display: flex; gap: 8px; margin-bottom: 14px; }
.joinbox input { flex: 1; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #0d1114; color: var(--ink); font-size: 1.15rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + var(--safe-b)); background: rgba(7,9,11,.92); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.nav a, .nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: .68rem; text-decoration: none; background: none; border: 0; padding: 4px 8px; }
.nav .on { color: var(--green); }
.nav svg { width: 22px; height: 22px; }

/* ══ МАСАТА ══ */
#table { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #0a0d10 url("/poker/bg-table.webp") center / cover no-repeat; }
#table::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,11,.55), rgba(7,9,11,.35) 40%, rgba(7,9,11,.85)); pointer-events: none; }
#table > * { position: relative; }
#table .top { padding: calc(6px + env(safe-area-inset-top)) 10px 0; flex: none; align-items: flex-start; }
#table .title { text-align: center; flex: 1; min-width: 0; }
#table .title .word { width: 118px; height: auto; display: block; margin: 2px auto 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)); }
#table .title b { display: block; font-size: 1.05rem; margin-top: 2px; text-shadow: 0 2px 6px #000; }
#table .title small { color: #cfd5dc; font-size: .72rem; display: block; text-shadow: 0 1px 3px #000; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .74rem; letter-spacing: .08em; color: #e6eaee; background: rgba(0,0,0,.45); border: 1px solid var(--line-2); backdrop-filter: blur(4px); }
#tBlinds { margin: 4px auto 0; }
#table .ib { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 50%; }

/* сукното: елипса с хромиран ръб; размерите (--fw/--fh) ги дава app.js по свободното място */
.felt-wrap { position: relative; flex: 1; min-height: 0; }
.felt { position: absolute; left: 50%; top: 50%; width: var(--fw, 320px); height: var(--fh, 420px); transform: translate(-50%, -50%); border-radius: 50%; background: var(--rim); padding: 7px; box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 80px rgba(53,224,138,.10), inset 0 0 0 1px rgba(255,255,255,.35); }
.felt .cloth { position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, var(--felt-l) 0%, var(--felt) 42%, var(--felt-d) 100%); box-shadow: inset 0 0 50px rgba(0,0,0,.6), inset 0 -14px 40px rgba(0,0,0,.4), inset 0 0 0 4px rgba(0,0,0,.35); overflow: hidden; }
.felt .cloth::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16), transparent 50%); pointer-events: none; }
.felt .lion { position: absolute; left: 50%; top: 50%; width: 38%; max-width: 190px; transform: translate(-50%, -58%); opacity: .13; filter: grayscale(1) brightness(1.8); pointer-events: none; }
body[data-felt="wood"] .felt .cloth { background: radial-gradient(ellipse at 50% 30%, #7b5535 0%, #5a3d22 42%, #2e1e10 100%); }
#seats, #bets, #fx { position: absolute; inset: 0; pointer-events: none; }
#seats { z-index: 3; } #bets { z-index: 2; } #fx { z-index: 9; }

.center { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90%; pointer-events: none; z-index: 1; }
.potline { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pot { padding: 4px 14px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.22); font-size: .84rem; color: #fff; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.pot b { color: var(--gold); font-size: 1rem; }
.pot.side { font-size: .72rem; opacity: .9; }
.stacks { display: flex; gap: 6px; align-items: flex-end; height: 26px; margin-top: -2px; }
.stack { position: relative; width: 22px; height: 26px; }
.stack i { position: absolute; left: 0; width: 22px; height: 8px; border-radius: 50%; background: var(--c, #1b1e22); border: 1.5px solid rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(0,0,0,.7); background-image: repeating-conic-gradient(rgba(255,255,255,.85) 0 12deg, transparent 12deg 45deg); }
.board { display: flex; gap: calc(var(--ch) * .07); min-height: var(--ch); }
.msg { font-size: .8rem; color: #fff; text-shadow: 0 1px 3px #000; text-align: center; min-height: 1.2em; opacity: .95; }
.msg.big { font-family: "Russo One", Impact, sans-serif; font-size: 1.15rem; color: var(--gold); letter-spacing: .04em; }

/* карти — като на макета: ранг горе вляво с малка боя, голямата боя долу вдясно */
.card { position: relative; width: calc(var(--ch) * .7); height: var(--ch); border-radius: calc(var(--ch) * .1); background: linear-gradient(160deg, #fffdf7, #f1eee4); color: #15181c; box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.06); display: block; user-select: none; flex: none; font-weight: 800; line-height: 1; overflow: hidden; }
.card .r { position: absolute; left: 8%; top: 7%; font-size: calc(var(--ch) * .34); }
.card .r small { display: block; font-size: calc(var(--ch) * .2); font-weight: 700; margin-top: 1px; }
.card .s { position: absolute; right: 7%; bottom: 4%; font-size: calc(var(--ch) * .5); }
.card.red { color: #c8202a; }
.card.back { background: #111417; background-image: radial-gradient(circle at 50% 45%, #2a2f36, #0f1215 72%); border: 1px solid #3a3f45; }
.card.back::after { content: ""; position: absolute; inset: 9%; border-radius: inherit; border: 1px solid rgba(216,178,90,.35); background: url("/brand/rafas-mark.webp") center / 62% no-repeat; opacity: .6; filter: grayscale(1) brightness(1.6); }
body[data-back="blue"] .card.back { background: #1d3f7a; background-image: radial-gradient(circle, #2d5ca8, #142c55 70%); }
body[data-back="red"] .card.back { background: #7a1d24; background-image: radial-gradient(circle, #a82d38, #55141a 70%); }
body[data-back="gold"] .card.back { background: #6b5320; background-image: radial-gradient(circle, #9a7a2f, #4a3812 70%); }
.card.in { animation: cardin .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardin { from { transform: translateY(-22px) rotateY(85deg); opacity: 0; } to { transform: none; opacity: 1; } }
.card.win { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(243,165,34,.8); transform: translateY(-4px); }
.card.dim { opacity: .45; }

/* места по ръба на елипсата (позицията в px от app.js) */
.seat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 110px; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.seat .av { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.75); background: #141a20; overflow: visible; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.35); z-index: 2; }
.seat .av .im { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.seat .av img, .seat .av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.seat .av .emo { font-size: 1.7rem; }
.seat.me .av { width: 68px; height: 68px; border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,224,138,.25), 0 10px 24px rgba(0,0,0,.8); }
.seat .ring { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; z-index: 3; }
.seat .ring circle { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 4px rgba(53,224,138,.8)); }
.seat .ring.warn circle { stroke: var(--red); filter: drop-shadow(0 0 4px rgba(229,72,77,.8)); }
.seat .tsec { position: absolute; right: -14px; bottom: -8px; min-width: 34px; padding: 3px 4px; border-radius: 50%; background: #0b1a12; border: 2px solid var(--green); color: #fff; font-size: .7rem; font-weight: 800; text-align: center; line-height: 1; z-index: 4; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.seat .tsec small { display: block; font-size: .5rem; font-weight: 600; color: #bfe9d3; }
.seat .tsec.warn { border-color: var(--red); }
.seat.think .av::after { content: "…"; position: absolute; right: -6px; bottom: -6px; background: #fff; color: #111; border-radius: 10px; padding: 0 6px; font-size: .8rem; font-weight: 800; z-index: 4; }
.seat .plate { display: flex; flex-direction: column; align-items: center; padding: 3px 12px 4px; border-radius: 12px; background: linear-gradient(180deg, rgba(20,24,28,.95), rgba(8,10,13,.95)); border: 1px solid rgba(255,255,255,.2); min-width: 84px; max-width: 120px; z-index: 2; margin-top: -9px; box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.seat .plate b { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 108px; }
.seat .plate .chips { font-size: .86rem; color: #fff; font-weight: 800; letter-spacing: .01em; }
.seat.me .plate .chips { color: var(--gold); }
/* картите на другите: до плочката, към средата на масата */
.seat .cards { position: absolute; display: flex; gap: 2px; z-index: 3; --sc: calc(var(--ch) * .58); }
.seat .cards .card { width: calc(var(--sc) * .7); height: var(--sc); border-radius: 4px; }
.seat .cards .card .r { font-size: calc(var(--sc) * .36); } .seat .cards .card .r small { display: none; } .seat .cards .card .s { font-size: calc(var(--sc) * .42); }
.seat .cards .card:nth-child(1) { transform: rotate(-7deg); } .seat .cards .card:nth-child(2) { transform: rotate(5deg) translateX(-2px); }
.seat .cards .card:nth-child(3) { transform: rotate(12deg) translateX(-4px); } .seat .cards .card:nth-child(4) { transform: rotate(18deg) translateX(-6px); }
.seat.top .cards { top: 100%; left: 50%; transform: translate(-50%, -8px); }
.seat.left .cards { left: 78%; top: 18%; }
.seat.right .cards { right: 78%; top: 18%; }
.seat.bottom .cards { bottom: 100%; left: 50%; transform: translate(-50%, 8px); }
/* моите карти — големи, ветрило над аватара */
.myhand { position: absolute; left: 50%; bottom: calc(100% - 16px); transform: translateX(-50%); display: flex; z-index: 4; --mc: calc(var(--ch) * 1.15); }
.myhand .card { width: calc(var(--mc) * .7); height: var(--mc); margin: 0 -6px; box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.myhand .card .r { font-size: calc(var(--mc) * .34); } .myhand .card .s { font-size: calc(var(--mc) * .5); }
.myhand .card:nth-child(1) { transform: rotate(-9deg) translateY(4px); } .myhand .card:nth-child(2) { transform: rotate(5deg); }
.myhand .card:nth-child(3) { transform: rotate(14deg) translateY(4px); } .myhand .card:nth-child(4) { transform: rotate(22deg) translateY(12px); }
.myhand .card.win { transform: translateY(-6px) rotate(0); }
.myinfo { position: absolute; left: 50%; bottom: calc(100% + var(--ch) * 1.18 - 4px); transform: translateX(-50%); white-space: nowrap; font-size: .72rem; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; z-index: 4; border: 1px solid var(--line); }
/* залозите (отделен слой, между мястото и средата) */
.betchip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(0,0,0,.62); border: 1px solid rgba(243,165,34,.55); color: var(--gold); font-size: .76rem; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.chip { width: 16px; height: 16px; border-radius: 50%; background: var(--c, #e5484d); background-image: repeating-conic-gradient(rgba(255,255,255,.9) 0 14deg, transparent 14deg 60deg); box-shadow: inset 0 0 0 3px var(--c, #e5484d), inset 0 0 0 4px rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.6); flex: none; }
.seat .dealer { position: absolute; right: -2px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #111; font-size: .72rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.7); z-index: 5; }
.seat.me .dealer { right: auto; left: -10px; top: 34%; }
.seat .st { position: absolute; top: -14px; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.75); border: 1px solid var(--line-2); color: #fff; font-size: .66rem; z-index: 5; white-space: nowrap; }
.seat .st.allin { background: var(--red); border-color: #ff8a8f; font-weight: 800; }
.seat .st.act { background: #fff; color: #111; font-weight: 800; }
.seat.me .st { top: 38%; left: calc(50% + 40px); }
.seat.folded .av, .seat.folded .cards, .seat.away .av { opacity: .45; filter: grayscale(.7); }
.seat.actor .av { box-shadow: 0 0 0 3px rgba(53,224,138,.35), 0 0 24px rgba(53,224,138,.7); }
.seat.winner .av { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(243,165,34,.45), 0 0 28px rgba(243,165,34,.85); }
.seat .hn { position: absolute; top: 100%; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: #1a1408; font-size: .7rem; font-weight: 800; white-space: nowrap; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.seat.left .hn, .seat.left .bubble { left: 0; transform: none; } .seat.right .hn, .seat.right .bubble { left: auto; right: 0; transform: none; }
.seat .eq { position: absolute; top: -6px; left: -8px; padding: 2px 7px; border-radius: 999px; background: #fff; color: #111; font-size: .7rem; font-weight: 800; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.seat .delta { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1.05rem; color: var(--gold); text-shadow: 0 1px 3px #000; animation: floatup 2.2s ease-out both; z-index: 6; pointer-events: none; }
.seat .delta.neg { color: #ff8a8f; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.seat.empty .av { border: 2px dashed rgba(255,255,255,.4); background: rgba(0,0,0,.28); font-size: .66rem; color: #e6eaee; text-align: center; box-shadow: none; }
.seat.empty .plate { visibility: hidden; }
.seat .bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); max-width: 160px; padding: 6px 10px; border-radius: 12px; background: #fff; color: #111; font-size: .76rem; z-index: 7; box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: bubblein .2s ease-out; }
.seat.me .bubble { bottom: calc(100% + var(--ch) * 1.2); }
.bubble.bot { background: #f3e9c9; }
@keyframes bubblein { from { opacity: 0; transform: translate(-50%, 6px); } }
.seat .giftbadge { position: absolute; top: -10px; left: -8px; font-size: 1.4rem; z-index: 6; animation: bubblein .3s; }
.seat .mic { position: absolute; right: -4px; bottom: -2px; font-size: .7rem; background: #0c1428; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--green); z-index: 4; }
.seat.speaking .av { box-shadow: 0 0 0 4px rgba(53,224,138,.35), 0 0 22px rgba(53,224,138,.9) !important; border-color: #46b86f !important; }
.seat .hud { font-size: .6rem; color: #d9dde3; background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 999px; white-space: nowrap; z-index: 2; margin-top: 3px; }
.chipfx { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--c, #f3a522); background-image: repeating-conic-gradient(rgba(255,255,255,.9) 0 14deg, transparent 14deg 60deg); box-shadow: inset 0 0 0 3px var(--c, #f3a522), inset 0 0 0 4px rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.6); z-index: 9; pointer-events: none; transition: left .55s cubic-bezier(.3,.7,.3,1), top .55s cubic-bezier(.3,.7,.3,1), opacity .3s; }

/* ── панелът с действията ── */
#actions { flex: none; position: relative; margin: 6px 8px calc(8px + var(--safe-b)); padding: 10px 12px 10px; min-height: 222px; border-radius: 22px; background: linear-gradient(180deg, rgba(14,18,22,.92), rgba(8,10,13,.96)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 -10px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px); }
#status { text-align: center; font-size: .9rem; min-height: 1.3em; color: #d9dde3; }
#status b { display: block; font-size: 1.1rem; color: #fff; }
#status .call { color: var(--gold); font-weight: 600; }
.abtn { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 8px; margin-top: 8px; }
.abtn button { padding: 15px 6px; border-radius: 16px; font-size: 1.1rem; font-weight: 700; border: 1.5px solid; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15); }
.abtn button:active { transform: translateY(1px); }
.abtn .fold { background: linear-gradient(180deg, #c23d44, #7a1f24); border-color: #ff5a60; }
.abtn .mid { background: linear-gradient(180deg, #27c479, #12703f); border-color: #35e08a; }
.abtn .raise { background: linear-gradient(180deg, #2c343c, #12171d); border-color: #4c565f; }
.abtn button.armed { box-shadow: 0 0 0 2px var(--gold); }
body[data-big="1"] .abtn button { padding: 20px 6px; font-size: 1.25rem; }
.rrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rrow .pm { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); font-size: 1.3rem; display: grid; place-items: center; }
.rrow input[type=range] { flex: 1; accent-color: var(--green); height: 32px; }
.rrow input[type=number] { width: 84px; padding: 9px; border-radius: 12px; border: 1px solid var(--line-2); background: #0d1114; color: var(--ink); text-align: center; font-size: 1rem; }
.presets { display: flex; gap: 6px; margin-top: 8px; }
.presets button { flex: 1; padding: 9px 2px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font-size: .82rem; }
.presets button.on { background: var(--gold); color: #1a1408; border-color: var(--gold); font-weight: 700; }
.preacts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.preacts label { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: .86rem; }
.preacts label.on { border-color: var(--green); background: rgba(53,224,138,.15); }
.preacts input { accent-color: var(--green); }
.sitrow { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
#btnChat { position: absolute; left: 10px; top: -24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: #0e1216; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,0,0,.6); z-index: 3; }
#btnChat svg { width: 22px; height: 22px; }
#btnChat .dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: none; }
#btnChat .dot.on { display: block; }
@media (min-width: 700px) { #actions { max-width: 720px; margin-left: auto; margin-right: auto; width: calc(100% - 16px); } .seat { width: 124px; } .seat .av { width: 58px; height: 58px; } .seat.me .av { width: 76px; height: 76px; } .seat .plate b { font-size: .8rem; } .seat .plate .chips { font-size: .95rem; } }

/* ── тостове, модали, менюта ── */
#toasts { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 9px 14px; border-radius: 999px; background: rgba(14,18,22,.95); border: 1px solid var(--line-2); font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: bubblein .2s; max-width: 92vw; }
.toast.err { border-color: var(--red); }
.toast.gold { border-color: var(--gold); color: var(--gold); }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; backdrop-filter: blur(3px); }
#modal { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 560px); max-height: 88vh; overflow: auto; z-index: 41; background: #0e1216; border: 1px solid var(--line-2); border-radius: 22px 22px 0 0; padding: 14px 16px calc(16px + var(--safe-b)); box-shadow: 0 -20px 60px rgba(0,0,0,.7); animation: slideup .22s ease-out; }
@keyframes slideup { from { transform: translate(-50%, 30px); opacity: 0; } }
#modal h2 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between; }
#modal h2 button { background: none; border: 0; font-size: 1.4rem; color: var(--muted); }
#modal .card { --ch: 36px; display: block; }
#modal .board { --ch: 44px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button { flex: 1; padding: 8px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: .85rem; }
.tabs button.on { background: var(--green); color: #0b1a12; border-color: var(--green); font-weight: 700; }
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th, .tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--muted); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.menu { display: flex; flex-direction: column; gap: 6px; }
.menu button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); text-align: left; font-size: .98rem; }
.menu button.danger { border-color: rgba(229,72,77,.5); color: #ff9a9e; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 58px; height: 42px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.sw.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(243,165,34,.6); }
.rules h4 { margin: 12px 0 4px; color: var(--gold); }
.rules p, .rules li { font-size: .9rem; line-height: 1.45; }
.rules .hands { display: flex; flex-direction: column; gap: 6px; }
.rules .hand { display: flex; align-items: center; gap: 8px; }
.rules .hand .cards { display: flex; gap: 2px; }
.rules .hand b { min-width: 96px; font-size: .86rem; }
.hist { display: flex; flex-direction: column; gap: 6px; }
.hist .h { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .86rem; }
.hist .h .d { font-weight: 700; }
.hist .h .d.neg { color: #ff8a8f; } .hist .h .d.pos { color: var(--green); }
.replay .step { padding: 6px 8px; border-radius: 8px; font-size: .84rem; border-left: 3px solid var(--line-2); margin-bottom: 4px; }
.replay .step.on { border-color: var(--gold); background: rgba(243,165,34,.08); }
.replay .board { min-height: 44px; margin: 8px 0; }
.emorow { display: flex; gap: 6px; flex-wrap: wrap; }
.emorow button { font-size: 1.5rem; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.quips { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.quips button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: .95rem; }
.phrase { display: flex; gap: 6px; } .phrase button:first-child { flex: 1; } .phrase .del { width: 40px; color: var(--muted); }
.fly { position: fixed; z-index: 60; font-size: 2rem; pointer-events: none; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s; }
.badge-toast { display: flex; align-items: center; gap: 10px; }
.badge-toast i { font-size: 1.5rem; }
body.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .card.in, .seat .delta, .bubble, .chipfx, .fly { animation: none !important; transition: none !important; } }