/* La Familia: "Noir Deco" design system. One source of truth in tokens; CSS/SVG only. */
@font-face { font-family: 'Limelight'; font-style: normal; font-weight: 400; font-display: swap; src: url('/juego/fonts/limelight-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/juego/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/juego/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/juego/fonts/inter-700.woff2') format('woff2'); }

:root {
  --ink: #07080F; --night: #0B0F2A; --indigo: #1B1446; --violet: #5B4BFF; --amber: #FF9A3C; --brass: #C9A24B; --gold: #E8C476;
  --crimson: #A3162E; --ivory: #F2EDE4; --smoke: #8A90B5;
  --felt-1: #0F3B2E; --felt-2: #0A2A20; --mahogany-1: #4A1F12; --mahogany-2: #2B110A;
  --glass: rgba(11, 15, 42, .72); --glass-2: rgba(7, 8, 15, .78); --line: rgba(201, 162, 75, .45); --line-soft: rgba(201, 162, 75, .22);
  --display: 'Limelight', 'Georgia', serif; --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tap: 44px; --r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1); --t-ui: 220ms; /* block J3.7: one rhythm for every entrance */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { min-height: 100dvh; font-family: var(--text); font-size: 16px; line-height: 1.45; color: var(--ivory); background: var(--ink); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
a { color: var(--gold); }
.num, .results td, .stack, .pot-amount, .bet-amount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); }
.label.section { display: block; margin: 18px 0 8px; }
.h2 { font-family: var(--text); font-weight: 700; font-size: 1.15rem; margin: 0 0 12px; color: var(--ivory); }
.h2.display { font-family: var(--display); font-weight: 400; font-size: 1.55rem; letter-spacing: .04em; color: var(--gold); margin: 2px 0 10px; }
.muted { color: var(--smoke); margin: 0 0 12px; }
.hint { color: var(--smoke); font-size: .82rem; margin: 8px 0 0; }
.error { color: #ff8b9a; font-weight: 600; font-size: .92rem; margin: 8px 0 0; }
.notice { background: rgba(255, 154, 60, .08); border: 1px solid rgba(255, 154, 60, .35); color: #ffd7ad; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; }

/* ---- backgrounds & ambient ---- */
.bg { position: fixed; inset: 0; z-index: -2; background-color: var(--ink); background-size: cover; background-position: center top; background-repeat: no-repeat; }
.bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 15, .25) 0%, rgba(7, 8, 15, .05) 22%, rgba(7, 8, 15, .35) 55%, rgba(7, 8, 15, .92) 100%); }
.bg-entrance:not([hidden]) { background-image: url('/juego/bg/entrance-720.webp'); }
.bg-table:not([hidden]) { background-image: url('/juego/bg/table-room-720.webp'); }
.bg-table::after { background: linear-gradient(180deg, rgba(7, 8, 15, .12) 0%, rgba(7, 8, 15, .35) 45%, rgba(7, 8, 15, .85) 100%); }
.bg-finished:not([hidden]) { background-image: url('/juego/bg/finished-720.webp'); }
@media (min-width: 720px), (min-resolution: 2dppx) and (min-width: 480px) {
  .bg-entrance:not([hidden]) { background-image: url('/juego/bg/entrance-1080.webp'); }
  .bg-table:not([hidden]) { background-image: url('/juego/bg/table-room-1080.webp'); }
  .bg-finished:not([hidden]) { background-image: url('/juego/bg/finished-1080.webp'); }
}
.rain { position: fixed; left: 0; right: 0; top: 0; height: 46%; z-index: -1; pointer-events: none; opacity: .06;
  background: repeating-linear-gradient(112deg, transparent 0 9px, var(--ivory) 9px 10px); background-size: 220px 220px; animation: rain 1.1s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
@keyframes rain { to { background-position: -60px 220px; } }
.smoke { position: absolute; left: 20%; top: 30%; width: 60%; height: 40%; pointer-events: none; opacity: .07; filter: blur(22px);
  background: radial-gradient(ellipse at 40% 50%, var(--ivory) 0%, transparent 60%); animation: smoke 18s ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate(-8%, 4%) scale(1); } to { transform: translate(10%, -6%) scale(1.15); } }
body.still .rain, body.still .smoke { animation: none; display: none; }

/* ---- top bar ---- */
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 56px; padding: 6px 6px; padding-top: calc(6px + env(safe-area-inset-top)); background: linear-gradient(180deg, rgba(7, 8, 15, .92), rgba(7, 8, 15, .6) 80%, transparent); }
.topbar-title { grid-column: 2; text-align: center; min-width: 0; }
#menu-admin { grid-column: 1; } #menu-panel { grid-column: 3; }
.topbar-name { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-round { display: block; margin-top: 1px; }
.icon-btn { width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:active { background: rgba(232, 196, 118, .1); }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- layout ---- */
main { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); }
body:has(#topbar[hidden]) main { padding-top: calc(12px + env(safe-area-inset-top)); } /* J3.16: installed app with a translucent status bar; 0 in the browser */
.entrance { padding-top: 6px; }
.wordmark { position: relative; text-align: center; padding: 22px 0 18px; overflow-x: clip; } /* J3.12.2: the glow (::before, inset -30px) stuck 30 px past the right edge on the home and entry screens (404 px wide at 390) */
.wordmark::before { content: ''; position: absolute; inset: -10px -30px; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(7, 8, 15, .78) 0%, rgba(7, 8, 15, .45) 55%, transparent 80%); }
.wordmark.small { padding: 8px 0 14px; }
.brand { font-family: var(--display); font-weight: 400; font-size: 2.35rem; letter-spacing: .14em; margin: 0; line-height: 1.05; text-transform: uppercase;
  background: linear-gradient(180deg, #f6dfa4 0%, var(--gold) 45%, var(--brass) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .7)); }
.wordmark.small .brand { font-size: 1.5rem; }
.divider { display: block; width: 200px; height: 12px; margin: 8px auto 6px; fill: var(--gold); stroke: var(--brass); stroke-width: 1; }
.divider path:first-child { fill: none; }

/* glass panels with stepped deco corners */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r); }
.deco { position: relative; padding: 18px 16px; margin: 0 0 14px; }
.deco::before, .deco::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(var(--brass), var(--brass)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--brass), var(--brass)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--brass), var(--brass)) 4px 4px / 6px 1px no-repeat, linear-gradient(var(--brass), var(--brass)) 4px 4px / 1px 6px no-repeat; }
.deco::before { left: 6px; top: 6px; } .deco::after { right: 6px; bottom: 6px; transform: rotate(180deg); }

/* forms */
label { display: block; margin: 10px 0 0; }
label .label { display: block; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number] { display: block; width: 100%; min-height: var(--tap); padding: 8px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ivory); font-size: 1.05rem; }
input::placeholder { color: rgba(138, 144, 181, .7); }
input:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; } .grid2 .span2 { grid-column: 1 / -1; }
details { margin: 12px 0 0; } details > summary { list-style: none; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-top: 1px solid var(--line-soft); }
details > summary::-webkit-details-marker { display: none; }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--brass); stroke-width: 1.5; transition: transform 200ms; } details[open] .chev { transform: rotate(180deg); }
.btn { display: block; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; letter-spacing: .02em; transition: transform 120ms, filter 120ms; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; filter: grayscale(.4); }
.btn.gold { background: linear-gradient(180deg, var(--amber) 0%, var(--gold) 100%); color: var(--ink); box-shadow: 0 8px 22px rgba(255, 154, 60, .18); }
.btn.brass { background: transparent; border-color: var(--brass); color: var(--gold); }
.btn.crimson { background: transparent; border-color: var(--crimson); color: #ff8b9a; }
.btn.big { min-height: 56px; font-size: 1.15rem; }
.btn.as-link { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .row2.tight { margin-top: 6px; }
.link-btn { border: 0; background: transparent; color: var(--smoke); min-height: var(--tap); padding: 6px 4px; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.kv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; } .kv b { color: var(--gold); font-weight: 600; }

/* ---- portraits ---- */
.portrait { position: relative; display: inline-flex; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--indigo); box-shadow: 0 0 0 2px var(--brass), 0 4px 14px rgba(0, 0, 0, .55); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait.lg { width: 72px; height: 72px; } .portrait.xl { width: 88px; height: 88px; } .portrait.sm { width: 32px; height: 32px; box-shadow: 0 0 0 1.5px var(--brass); }
.portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; } .portrait-grid.small { grid-template-columns: repeat(4, 1fr); }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.pcard .pname { font-size: .82rem; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .sub { font-size: .75rem; color: var(--smoke); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; } .pcard.you .portrait { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(232, 196, 118, .35); }
.pcard button.rm { min-height: 44px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--crimson); background: transparent; color: #ff8b9a; font-size: .75rem; font-weight: 600; }

/* picker */
.picker-panel { padding-bottom: 26px; }
.picker-panel .row2 { margin-top: 4px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin: 8px 0 12px; max-height: 52dvh; overflow-y: auto; padding: 6px 2px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: transparent; border-radius: 12px; min-height: 96px; }
.tile .portrait { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--line); transition: transform 150ms, box-shadow 150ms; }
.tile .tname { font-size: .75rem; line-height: 1.15; color: var(--ivory); max-width: 100%; }
.tile.taken .portrait img { filter: grayscale(1) brightness(.55); } .tile.taken .tname { color: var(--smoke); }
.tile .taken-tag { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.tile.selected .portrait { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(232, 196, 118, .55); transform: scale(1.06); }
.tile.selected .tname { color: var(--gold); font-weight: 700; }

/* ---- table (block J3.4 proportions: the painted table is the hero, ~94 % wide, 22..88 % of the height; small croupier at its far edge) ---- */
:root { --table-w: min(94vw, 470px); --table-top: 22dvh; --table-h: min(calc(var(--table-w) * 1.52), 66dvh); --croupier-w: calc(var(--table-w) * 0.31);
  --card-w: 56px; --card-h: 84px; --ring: 68px; --ring-you: 72px; --plate-w: 96px; --controls-h: 112px; --hand-h: 100px; --strip-h: 32px; }
@media (max-height: 760px) { :root { --card-w: 44px; --card-h: 66px; --ring: 50px; --ring-you: 56px; --plate-w: 86px; --controls-h: 106px; --hand-h: 82px; --strip-h: 28px; --table-top: 21dvh; } .seat .name { font-size: .75rem; } .seat .stack { font-size: .8rem; } }
.table-screen { padding: 0; }
body:has(.table-screen:not([hidden])) { overflow: hidden; height: 100dvh; }
body:has(.table-screen:not([hidden])) .topbar { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, rgba(7, 8, 15, .55), rgba(7, 8, 15, .12) 70%, transparent); }
body:has(.table-screen:not([hidden])) .topbar-title { text-align: left; padding-left: 4px; }
.topbar-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-name { display: block; min-width: 0; }
.topbar-tag { flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 1px 7px; border-radius: 999px; }
main:has(.table-screen:not([hidden])) { max-width: 100%; padding: 0; }
.scene { position: relative; width: 100%; height: calc(var(--table-top) + var(--table-h)); overflow-x: clip; overflow-y: visible; } /* J3.12.2: the turn halo and the seat card backs of a right-side seat stuck out past the screen and, on Android Chrome, widened the layout viewport (every fixed element moved). clip, not hidden: no scroll container, so nothing else changes */
.table-area { position: absolute; left: 50%; top: var(--table-top); width: var(--table-w); height: var(--table-h); transform: translateX(-50%); }
.table-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 2; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)); }
.croupier { position: absolute; left: 50%; top: calc(var(--table-top) - var(--croupier-w) * 1.34 * 0.86); width: var(--croupier-w); aspect-ratio: 600 / 804; transform: translateX(-50%); z-index: 1; pointer-events: none; transform-origin: 50% 90%; }
.croupier.breathing { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.006); } }
.croupier .pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 80ms linear; }
.croupier .pose.on { opacity: 1; }
.smoke { position: absolute; left: 20%; top: 20%; width: 60%; height: 40%; z-index: 2; pointer-events: none; opacity: .07; filter: blur(22px); background: radial-gradient(ellipse at 40% 50%, var(--ivory) 0%, transparent 60%); animation: smoke 18s ease-in-out infinite alternate; }

/* cards (block J3.8: simple, big, four-colour; rank top-left, small suit under it, big pip bottom-right; no illustrations) */
:root { --suit-S: #111111; --suit-H: #C21F35; --suit-D: #1558C7; --suit-C: #167A38; --card-face: #F2EDE4; }
.card { position: relative; width: 56px; height: 84px; border-radius: 7% / 5%; background: var(--card-face); color: var(--suit-S); border: 1px solid rgba(0, 0, 0, .16); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); overflow: hidden; container-type: size; font-family: var(--text); user-select: none; }
.card[data-suit=S] { color: var(--suit-S); } .card[data-suit=H] { color: var(--suit-H); } .card[data-suit=D] { color: var(--suit-D); } .card[data-suit=C] { color: var(--suit-C); }
.card .rank { position: absolute; top: 3cqh; left: 8cqw; font-size: 28cqh; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.card .rank.two { letter-spacing: -.09em; left: 5cqw; }
.card .suit-small { position: absolute; top: 38cqh; left: 9cqw; font-size: 16cqh; line-height: 1; }
.card .pip { position: absolute; right: 5cqw; bottom: 1cqh; font-size: 40cqh; line-height: 1; }
@supports not (font-size: 1cqh) { .card .rank { font-size: 24px; } .card .suit-small { font-size: 13px; top: 32px; } .card .pip { font-size: 34px; } }
.card.plaque { display: flex; align-items: center; justify-content: center; background: rgba(242, 237, 228, .92); }
.card.plaque .plaque-text { font-size: 16cqh; font-weight: 800; color: #111; text-align: center; line-height: 1.1; } .card.plaque .plaque-suit { display: block; font-size: 34cqh; }
.card.winner { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(232, 196, 118, .7); }
.mini-card { position: relative; width: 20px; height: 30px; border-radius: 3px; background: var(--card-face); color: var(--suit-S); line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); margin-left: -5px; overflow: hidden; }
.mini-card:first-child { margin-left: 0; }
.mini-card[data-suit=S] { color: var(--suit-S); } .mini-card[data-suit=H] { color: var(--suit-H); } .mini-card[data-suit=D] { color: var(--suit-D); } .mini-card[data-suit=C] { color: var(--suit-C); }
.mini-card b { position: absolute; top: 2px; left: 2px; font-size: 11px; font-weight: 800; letter-spacing: -.04em; } .mini-card span { position: absolute; right: 1px; bottom: 0; font-size: 12px; }
.suit-S { color: var(--suit-S); } .suit-H { color: var(--suit-H); } .suit-D { color: var(--suit-D); } .suit-C { color: var(--suit-C); }
.log .suit-S, .rules-body .suit-S, .study-line .suit-S, .duel-banner .suit-S, .strip .suit-S { color: #cfd3e8; } /* black suits on the dark panels read as light grey */
.card-back { background: url('/juego/cards/back.webp') center / 100% 100% no-repeat, transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.card-back::after { display: none; }
.card.winner { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(232, 196, 118, .7); }
.mini-card { width: 20px; height: 30px; border-radius: 3px; background: var(--ivory); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-size: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); margin-left: -5px; }
.mini-card:first-child { margin-left: 0; } .mini-card.red { color: var(--crimson); } .mini-card b { font-family: var(--display); font-weight: 400; }
.machine-spot { position: absolute; left: 50%; top: 9%; width: 56px; height: 84px; transform: translate(-50%, 0); perspective: 600px; z-index: 3; }
.center-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 3; pointer-events: none; text-align: center; }
.pot-pile { position: relative; height: 46px; min-width: 24px; display: flex; align-items: flex-end; justify-content: center; }
.pot-empty { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); background: rgba(7, 8, 15, .55); padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
.center-info .label { color: rgba(242, 237, 228, .8); margin-top: -2px; font-size: .75rem; }
.pot-amount { font-size: 1.5rem; font-weight: 700; color: var(--gold); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); padding: 0 12px; border-radius: 999px; background: rgba(7, 8, 15, .55); line-height: 1.3; }
.center-line { margin-top: 3px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: rgba(242, 237, 228, .82); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip.flipped { transform: rotateY(180deg); animation: flip-over 520ms var(--ease); } /* block J3.7: a subtle overshoot */
.flip.no-anim, .flip.no-anim.flipped { animation: none; }
@keyframes flip-over { 0% { transform: rotateY(0deg); } 78% { transform: rotateY(191deg); } 100% { transform: rotateY(180deg); } }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip .front { transform: rotateY(180deg); }

/* seats: ring + portrait, a compact plate (name / stack / tag) underneath, card backs tucked beside the portrait */
.seats-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.seat { position: absolute; width: var(--plate-w); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.seat .ring-wrap { position: relative; width: var(--ring); height: var(--ring); }
.seat .ring-wrap .portrait { position: absolute; inset: 5px; width: auto; height: auto; }
.seat.you .ring-wrap { width: var(--ring-you); height: var(--ring-you); }
.seat svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.seat svg.ring circle { fill: none; stroke-width: 4; stroke-linecap: round; } .seat.you svg.ring circle { stroke-width: 4.5; }
.seat svg.ring .track { stroke: rgba(242, 237, 228, .08); }
.seat svg.ring .bar { stroke: #2EE88A; transition: stroke 300ms; filter: drop-shadow(0 0 3px rgba(46, 232, 138, .8)); }
.seat svg.ring .bar.amber { stroke: var(--amber); filter: drop-shadow(0 0 3px rgba(255, 154, 60, .8)); } .seat svg.ring .bar.red { stroke: #FF3B5C; filter: drop-shadow(0 0 4px rgba(255, 59, 92, .9)); }
.seat .ring-wrap.pulse { animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.seat .plate { margin-top: -9px; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 3px 7px 4px; border-radius: 10px; background: rgba(7, 8, 15, .82); border: 1px solid var(--line-soft); line-height: 1.15; transition: box-shadow 300ms, border-color 300ms; }
.seat.active .plate { border-color: rgba(46, 232, 138, .7); box-shadow: 0 0 14px rgba(46, 232, 138, .45); }
.seat .name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: .8rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ivory); }
.seat .stack { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.seat .tag-line { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--smoke); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.seat .tag-line.pending { color: var(--amber); } .seat .tag-line.out { color: var(--smoke); letter-spacing: 0; } /* "Descansando" fits the plate at 1x */
/* dense plates: short phones with 8 players -> one line, BOT as a corner chip on the ring */
.seats-layer.dense .seat .plate { flex-direction: row; gap: 6px; padding: 3px 7px; }
.seats-layer.dense .seat .name { max-width: 46px; }
.seats-layer.dense .seat .bot-tag { display: none; }
.seats-layer.dense .seat.bot .ring-wrap::after { content: 'BOT'; position: absolute; top: -4px; right: -8px; font-size: .75rem; line-height: 1; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line); background: rgba(7, 8, 15, .85); color: var(--gold); font-weight: 700; letter-spacing: .06em; }
.seats-layer.dense .seat .tag-line { display: none; }
.seat .ask-btn { margin-top: 3px; min-height: 30px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--brass); background: rgba(232, 196, 118, .12); color: var(--gold); font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: auto; }
.bot-tag { flex: 0 0 auto; font-size: .75rem; line-height: 1; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line); color: var(--gold); letter-spacing: .06em; font-weight: 700; text-transform: uppercase; }
.seat.left .portrait img, .seat.out .portrait img { filter: grayscale(1) brightness(.55); } .seat.left .plate { opacity: .55; }
.seat .backs { position: absolute; left: calc(100% - 12px); bottom: 4px; display: flex; }
.seat .backs .card { width: 14px; height: 21px; border-radius: 2px; margin-left: -7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .seat .backs .card:first-child { margin-left: 0; }
.seat .revealed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; animation: flipin 260ms var(--ease); z-index: 2; } /* the all-in hand shows over the portrait */
@keyframes flipin { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.seat .allin-tag { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 800; letter-spacing: .1em; padding: 1px 8px; border-radius: 999px; background: var(--crimson); color: var(--ivory); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.seat .badge { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem; white-space: nowrap; background: var(--glass-2); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop 300ms ease-out; }
.seat .badge.win { color: var(--gold); border-color: var(--brass); } .seat .badge.lose { color: #ff8b9a; border-color: var(--crimson); }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.seat .badge { animation-duration: var(--t-ui); animation-timing-function: var(--ease); }
.seat .button-chip { position: absolute; left: -8px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory) url('/juego/art/dealer-button-32.webp') center / 100% 100% no-repeat; color: transparent; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .7); transition: opacity var(--t-ui); }
.seat .button-chip.pending { opacity: 0; } /* the button is in flight to this seat */
.overlay { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: rgba(7, 8, 15, .5); }
.chip-layer { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
/* block J3.7: piles drawn from the painted chips (top-down), flights, floats, sparkles */
.pile { position: relative; pointer-events: none; }
.pile .stack { position: absolute; bottom: 0; height: 100%; width: 22px; }
.pile .chip { position: absolute; left: 0; border-radius: 50%; background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65)); }
.pile .chip.ivory { background-image: url('/juego/art/chip-ivory-48.webp'); } .pile .chip.crimson { background-image: url('/juego/art/chip-crimson-48.webp'); } .pile .chip.navy { background-image: url('/juego/art/chip-navy-48.webp'); } .pile .chip.black { background-image: url('/juego/art/chip-black-48.webp'); }
.fly-pile { position: absolute; transform: translate(-50%, -50%); will-change: transform; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.button-fly { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory) url('/juego/art/dealer-button-32.webp') center / 100% 100% no-repeat; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; text-shadow: 0 0 10px rgba(7, 8, 15, .95), 0 2px 4px rgba(0, 0, 0, 1), 0 0 2px #000; pointer-events: none; white-space: nowrap; z-index: 2; }
.float.gain { color: #FFD873; } .float.loss { color: #FF7F8F; } .float.big { color: #FFE18A; font-size: 2rem; text-shadow: 0 0 18px rgba(255, 225, 138, .85), 0 2px 6px rgba(0, 0, 0, 1), 0 0 2px #000; }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff7d6, var(--gold) 60%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; }
/* bet spots: a small pile + the amount, on the felt side of the seat (the viewer's rests in front of the dock) */
.bet-spot { position: absolute; display: flex; align-items: center; gap: 3px; pointer-events: none; z-index: 2; opacity: 1; transition: opacity 160ms; }
.bet-spot.pending { opacity: 0; }
.bet-spot .bet-pile .pile .stack { width: 14px; } .bet-spot .bet-label { font-size: .75rem; font-weight: 700; color: var(--ivory); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.seat[data-side=left] .bet-spot { left: calc(100% + 3px); top: 50%; transform: translateY(-50%); }
.seat[data-side=right] .bet-spot { right: calc(100% + 3px); top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
.seat[data-side=top-left] .bet-spot { left: 62%; top: calc(100% + 32px); }
.seat[data-side=top-right] .bet-spot { right: 62%; top: calc(100% + 32px); flex-direction: row-reverse; }
.bet-spot.viewer { left: 50%; top: 79%; transform: translate(-50%, -50%); flex-direction: column; gap: 1px; }
.bet-spot.viewer .bet-pile .pile .stack { width: 18px; }
/* gold glow on a winning seat (1.2 s) */
.seat.glow .ring-wrap::after { content: ''; position: absolute; inset: -12%; border-radius: 50%; box-shadow: 0 0 24px 8px rgba(232, 196, 118, .7); animation: glow-fade 1.2s ease-out forwards; pointer-events: none; }
@keyframes glow-fade { from { opacity: 1; } to { opacity: 0; } }
/* block J3.8: showdown duel stage over the table (a top layer with a scrim; the pot block and the machine spot hide under it) */
.duel { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(7, 8, 15, .66); opacity: 0; transition: opacity 220ms var(--ease); pointer-events: none; }
.duel.on { opacity: 1; }
.duel .duel-cards { display: flex; align-items: center; gap: 12px; }
.duel .slot { position: relative; width: 90px; height: 130px; }
.duel .slot .card, .duel .slot .plaque { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 220ms var(--ease), transform 220ms var(--ease), box-shadow 300ms; }
.duel .slot .card.in { opacity: 1; }
.duel .slot .card.flip-in.in { animation: stage-flip 520ms var(--ease); transform-style: preserve-3d; }
@keyframes stage-flip { 0% { transform: rotateY(90deg); opacity: .4; } 70% { transform: rotateY(-12deg); opacity: 1; } 100% { transform: rotateY(0); opacity: 1; } }
.duel .slot .card.gold { box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(232, 196, 118, .9); transform: scale(1.04); }
.duel .slot .card.crimson { box-shadow: 0 0 0 3px var(--crimson), 0 0 26px rgba(163, 22, 46, .9); transform: scale(1.04); }
.duel .slot .card.dim { opacity: .5; filter: grayscale(.5); }
.duel .vs { font-family: var(--display); color: var(--smoke); font-size: 1rem; letter-spacing: .1em; }
.duel-banner { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; border-radius: 14px; background: rgba(7, 8, 15, .86); border: 1px solid var(--line); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); max-width: 92%; }
.duel-banner.in { opacity: 1; transform: none; }
.duel-banner .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; color: var(--ivory); }
.duel-banner .verdict { font-family: var(--display); font-size: 2rem; letter-spacing: .1em; line-height: 1.05; }
.duel-banner .verdict.win { color: var(--gold); text-shadow: 0 0 16px rgba(232, 196, 118, .6); } .duel-banner .verdict.lose { color: #ff8b9a; }
.duel-banner .line { font-size: 1.05rem; font-weight: 700; color: var(--ivory); }
.table-area.dueling .center-info, .table-area.dueling .machine-spot { visibility: hidden; }
@media (max-height: 760px) { .duel .slot { width: 70px; height: 102px; } .duel-banner .verdict { font-size: 1.6rem; } .duel-banner .line { font-size: .95rem; } }
/* thinking dots on the seat on turn */
.thinking { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; gap: 3px; height: 8px; align-items: center; padding: 1px 5px; border-radius: 999px; background: rgba(7, 8, 15, .7); z-index: 3; } .thinking i { width: 5px; height: 5px; border-radius: 50%; background: #2EE88A; opacity: .25; animation: think 1.1s ease-in-out infinite; } .thinking i:nth-child(2) { animation-delay: .18s; } .thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes think { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* camera-like emphasis on an all-in reveal */
.table-area.emphasis { animation: emphasis 600ms var(--ease); }
@keyframes emphasis { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.01); } 100% { transform: translateX(-50%) scale(1); } }
/* the viewer's cards lift on touch; buttons press */
.hand .card { --lift: 0px; }
.hand .card:nth-child(1) { transform: rotate(-7deg) translateY(calc(2px + var(--lift))); } .hand .card:nth-child(2) { transform: rotate(-2deg) translateY(var(--lift)); } .hand .card:nth-child(3) { transform: rotate(2deg) translateY(var(--lift)); } .hand .card:nth-child(4) { transform: rotate(7deg) translateY(calc(2px + var(--lift))); }
.hand .card.lift { --lift: -10px; }
.quick:active, .round-btn:active, .btn.submit:active, .icon-btn:active, .chat-fab:active { transform: scale(.96); }
.quick, .round-btn, .btn.submit { transition: transform 120ms var(--ease), background 120ms; }
.card-fly { position: absolute; width: 28px; height: 42px; background: url('/juego/cards/back-96.webp') center / 100% 100% no-repeat; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); transform: translate(-50%, -50%); will-change: transform; }

/* the dock: your seat + your cards + the status line always; the bet controls slide up (220 ms) on your turn only */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: 560px; margin: 0 auto; padding: 0 12px calc(8px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-bottom: 0; transform: translateY(calc(var(--controls-h) + 8px + env(safe-area-inset-bottom))); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.dock.mine { transform: translateY(0); }
.hand-row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: var(--hand-h); padding: 6px 0 4px; }
.you-spot { display: flex; align-items: flex-end; }
.you-spot .seat { position: relative; left: auto; top: auto; transform: none; }
.hand { display: flex; align-items: flex-end; height: var(--card-h); padding: 0 6px; }
.hand .card { width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) * -.28); transform-origin: 50% 120%; transition: transform 250ms; } .hand .card:first-child { margin-left: 0; }
.hand .card.winner:nth-child(n) { transform: translateY(-8px); }
.hand .hint { margin: 0 0 8px; font-size: .8rem; color: var(--smoke); }
.strip { height: var(--strip-h); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock.mine .strip, .strip.mine { color: var(--gold); }
.strip .num { color: var(--ivory); } .strip.red .num { color: #ff8b9a; }
.bet-controls { height: var(--controls-h); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bet-slider-row { display: flex; align-items: center; gap: 10px; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--brass); background: transparent; color: var(--gold); font-size: 1.4rem; font-weight: 600; flex: 0 0 auto; }
input[type=range] { flex: 1 1 auto; height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--brass), var(--line-soft)); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2c4, var(--gold) 60%, var(--brass)); box-shadow: 0 0 0 2px var(--ink), 0 2px 10px rgba(232, 196, 118, .45); }
input[type=range]::-moz-range-track { height: 3px; background: var(--brass); border-radius: 2px; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--gold); }
.bet-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr; gap: 8px; }
.quick { min-height: 48px; border-radius: 10px; border: 1px solid var(--brass); background: transparent; color: var(--ivory); font-weight: 600; font-size: .8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 4px 2px; }
.quick small { font-weight: 600; font-size: .75rem; color: var(--smoke); } .quick.active { background: rgba(232, 196, 118, .12); color: var(--gold); } .quick.active small { color: var(--gold); }
.btn.submit { margin: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.05; padding: 4px 6px; font-size: .9rem; }
.btn.submit b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; }

.bow-box { text-align: center; margin: -6px 0 -30px; }
.bow { width: 48%; max-width: 230px; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7)); }

/* practice switch, bot buttons, settings editors, panel log (block J3.3) */
.practice-box { margin: 12px 0 0; padding: 10px 0 2px; border-top: 1px solid var(--line-soft); }
.switch-row { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; margin: 0; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: rgba(138, 144, 181, .35); border: 1px solid var(--line-soft); transition: background 150ms; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); transition: transform 150ms; }
.switch-row input:checked + .switch { background: var(--brass); } .switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { box-shadow: 0 0 0 2px var(--gold); }
.switch-text { font-size: .95rem; color: var(--ivory); }
.bots-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.bots-row .label { margin: 0; }
select { min-height: var(--tap); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass-2); color: var(--ivory); font-size: 1rem; }
.btn.slim { min-height: 44px; margin-top: 10px; font-size: .9rem; }
.settings-form { margin-top: 8px; }
.log { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--smoke); }
.log > div:first-child { color: var(--ivory); }
.results .who .bot-tag { margin-left: 2px; }

/* left menu, rules screen, admin request toasts, settlement (block J3.4) */
.menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 340px); z-index: 31; border-radius: 0; border-top: 0; border-left: 0; border-bottom: 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); padding-top: calc(14px + env(safe-area-inset-top)); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; animation: slideleft 220ms ease-out; }
@keyframes slideleft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.menu { animation-duration: var(--t-ui); animation-timing-function: var(--ease); }
.menu > * { flex: 0 0 auto; }
.menu-you { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.menu-you .portrait { width: 40px; height: 40px; } .menu-you .stack { color: var(--gold); font-weight: 700; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--ivory); font-size: 1rem; text-align: left; }
.mi:active { background: rgba(232, 196, 118, .08); }
.mi .ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mi .mi-text { flex: 1 1 auto; } .mi.danger { color: #ff8b9a; } .mi.danger .ico { stroke: #ff8b9a; }
.mi .count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mi .count.zero { background: transparent; color: var(--smoke); border: 1px solid var(--line-soft); }
.menu .sub { padding: 4px 6px 10px 12px; }
.menu .chips-form { padding: 0 6px 12px 12px; }
.menu-admin { margin-top: 4px; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: .92rem; }
.arow .who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .arow .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .acts { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.arow button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--brass); background: transparent; color: var(--gold); font-weight: 600; font-size: .8rem; }
.arow button.deny { border-color: var(--crimson); color: #ff8b9a; }
.rules { position: fixed; inset: 0; z-index: 33; border-radius: 0; border: 0; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); padding-top: calc(14px + env(safe-area-inset-top)); overflow-y: auto; }
.rules-body h3 { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--gold); margin: 18px 0 6px; letter-spacing: .03em; }
.rules-body p { margin: 0 0 8px; font-size: .95rem; line-height: 1.5; color: var(--ivory); overflow-wrap: anywhere; } /* J3.16: the licence URLs in the credits no longer run past a 360 px screen */
.request-toasts { position: fixed; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(94vw, 420px); z-index: 34; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.request-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; animation: pop-in 220ms ease-out; }
.request-toast .txt { flex: 1 1 auto; font-weight: 600; font-size: .95rem; }
.request-toast button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--brass); background: transparent; color: var(--gold); font-weight: 700; font-size: .85rem; }
.request-toast button.deny { border-color: var(--crimson); color: #ff8b9a; }
@keyframes pop-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.request-toast { animation-duration: var(--t-ui); animation-timing-function: var(--ease); }
.settle .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.settle .row b { color: var(--gold); font-weight: 700; }
.settle .zero { color: var(--smoke); font-size: .85rem; margin: 8px 0 0; }
.results .rq { font-size: .78rem; color: var(--smoke); text-align: left; padding: 4px 6px 8px 14px; } .results .rq div { padding: 2px 0; }
.results .rq .ok { color: var(--gold); } .results .rq .no { color: #ff8b9a; } .results .rq .pend { color: var(--amber); }
.results button.exp { min-height: 32px; min-width: 32px; padding: 0 6px; border: 0; background: transparent; color: var(--gold); font-size: 1rem; }

/* results tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 12px; }
.results { width: 100%; border-collapse: collapse; font-size: .84rem; }
.results th, .results td { padding: 8px 4px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.panel .results { font-size: .82rem; } .panel .results th, .panel .results td { padding: 8px 4px; }
@media (max-width: 375px) { .panel .results { font-size: .78rem; } .panel .results th { letter-spacing: .04em; } .panel .results th, .panel .results td { padding: 7px 3px; } .panel .results .who { max-width: 84px; } } /* block J3.11 fix: the Ganancia column was cut at 360 px (found by the sideways-clipping rule) */
.results th:first-child, .results td:first-child { text-align: left; }
.results th { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); font-weight: 600; }
.results tr:last-child td { border-bottom: 0; }
.results td.pos { color: var(--gold); font-weight: 700; } .results td.neg { color: #ff8b9a; font-weight: 700; } .results td.zero { color: var(--smoke); }
.results .who { display: inline-flex; align-items: center; gap: 5px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .who > span:not(.portrait) { overflow: hidden; text-overflow: ellipsis; }
.panel .results .who { max-width: 104px; } @media (max-width: 430px) { .results .who .portrait { display: none; } .results .who { max-width: 96px; } }

/* side panel + admin menu + toast */
.backdrop { position: fixed; inset: 0; background: rgba(7, 8, 15, .55); z-index: 30; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(96vw, 380px); z-index: 31; border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; animation: slidein 250ms ease-out; }
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
.panel { animation-duration: var(--t-ui); animation-timing-function: var(--ease); }
.panel-head { display: flex; align-items: center; justify-content: space-between; } .panel-head .h2 { margin: 0; }
.panel > * { flex: 0 0 auto; } .panel .label.section { margin: 6px 0 0; }
.panel-more { flex: 1 1 auto; min-height: 120px; margin-top: 8px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; }
.admin-menu { position: fixed; top: 60px; left: 10px; z-index: 32; width: min(88vw, 300px); }
.admin-menu .btn { margin-top: 10px; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: .92rem; }
.arow button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--brass); background: transparent; color: var(--gold); font-weight: 600; font-size: .8rem; }
.tag { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-soft); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; padding: 12px 18px; color: var(--ivory); font-weight: 600; max-width: 92vw; text-align: center; animation: toast-in var(--t-ui) var(--ease); }
@keyframes toast-in { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast.bad { border-color: var(--crimson); color: #ffd0d6; }
/* block J3.10: on the table screen the toast takes the title's place in the top bar for 2.6 s (the cards, the dock and the seats stay clear); the title comes back with it */
.toast.top { bottom: auto; top: calc(4px + env(safe-area-inset-top)); width: calc(100vw - 2 * 94px); max-width: 260px; min-height: 48px; padding: 4px 10px; display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1.2; border-radius: 12px; z-index: 40; animation: none; }
body.toasting .topbar-title { visibility: hidden; }

/* ---- block J3.5: chat sheet, audio switches, music link, study mode ---- */
.chat-fab { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 26; width: 44px; height: 44px; /* J3.12: 15 % smaller (52 -> 44), still a 44 px target */ border-radius: 50%; border: 1px solid var(--brass); background: var(--glass-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); transition: opacity 180ms, transform 180ms; }
.chat-fab svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat-fab.unread { border-color: var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 14px rgba(232, 196, 118, .35); }
.chat-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: var(--ink); font-size: .75rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
body:has(.table-screen:not([hidden])) .chat-fab { bottom: calc(var(--hand-h) + var(--strip-h) + 66px + env(safe-area-inset-bottom)); } /* J3.12: the same band as the left pair, above the own seat's tallest state (broke with the request button) */
body:has(#duel:not([hidden])) .chat-fab { opacity: 0; pointer-events: none; } /* never over the duel stage */
body:has(.dock.mine) .chat-fab { opacity: 0; pointer-events: none; transform: translateY(8px); }
.chat-backdrop { position: fixed; inset: 0; z-index: 27; background: rgba(7, 8, 15, .35); }
.chat-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; max-width: 560px; margin: 0 auto; height: min(68dvh, 560px); display: flex; flex-direction: column; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 10px 10px calc(8px + env(safe-area-inset-bottom)); animation: sheetup 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetup { from { transform: translateY(24%); opacity: .5; } to { transform: none; opacity: 1; } }
.chat-sheet { animation-duration: var(--t-ui); animation-timing-function: var(--ease); }
.chat-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 4px 0 2px 6px; }
.chat-head .grip { position: absolute; left: 50%; top: -4px; width: 36px; height: 4px; border-radius: 2px; background: var(--line); transform: translateX(-50%); }
.chat-list { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.msg .portrait { flex: 0 0 auto; margin-bottom: 2px; }
.msg .admin-dot { display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--gold); background: var(--indigo); }
.msg .bubble { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 10px 5px; border-radius: 14px 14px 14px 4px; background: rgba(27, 20, 70, .85); border: 1px solid var(--line-soft); }
.msg .txt { font-size: .95rem; line-height: 1.35; color: var(--ivory); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .meta { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--smoke); } .msg .meta b { color: var(--gold); font-weight: 600; }
.msg .time { font-size: .75rem; color: var(--smoke); align-self: flex-end; }
.msg.own { align-self: flex-end; flex-direction: row-reverse; }
.msg.own .bubble { background: rgba(232, 196, 118, .16); border-color: rgba(232, 196, 118, .35); border-radius: 14px 14px 4px 14px; }
.msg.sys { align-self: center; max-width: 92%; } .msg.sys .bubble { background: transparent; border: 0; padding: 2px 8px; } .msg.sys .txt { font-size: .78rem; color: var(--smoke); text-align: center; }
.msg.cont { margin-top: -3px; } .msg.cont .portrait { visibility: hidden; }
.chat-new { position: absolute; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--brass); background: var(--glass-2); color: var(--gold); font-size: .8rem; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.chat-quick { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 2px 2px; }
.chat-quick button { flex: 0 0 auto; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ivory); font-size: .8rem; white-space: nowrap; } /* J3.12.1: nine phrases wrap to two or three rows; 44 px targets */
.chat-quick button:active { background: rgba(232, 196, 118, .12); }
.chat-form { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.chat-form input[type=text] { flex: 1 1 auto; display: block; width: auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(7, 8, 15, .55); color: var(--ivory); font-size: 1rem; }
.chat-form input[type=text]:focus { border-color: var(--gold); box-shadow: none; }
.chat-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(180deg, var(--amber), var(--gold)); display: inline-flex; align-items: center; justify-content: center; }
.chat-send svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-send:disabled { opacity: .5; }
.chat-error, .chat-readonly { flex: 0 0 auto; margin: 4px 6px 0; }
/* scrolling screens leave room under the last line so the floating chat icon never hides it for good */
body:has(#chat-fab:not([hidden])) main:has(#screen-lobby:not([hidden])), body:has(#chat-fab:not([hidden])) main:has(#screen-finished:not([hidden])) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
/* audio switches: lobby row and menu rows; the admin's music link */
.audio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.audio-row .vol { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; }
.audio-row .vol .label { margin: 0; flex: 0 0 auto; } .audio-row .vol input[type=range] { height: 40px; }
.music-link { display: block; margin: 10px 0 0; min-height: var(--tap); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--brass); background: rgba(232, 196, 118, .08); color: var(--gold); text-decoration: none; font-weight: 700; text-align: center; }
a.mi { text-decoration: none; color: var(--ivory); }
.mi-switch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; margin: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.mi-switch .ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mi-switch .switch-text { flex: 1 1 auto; font-size: 1rem; }
.mi-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mi-switch input:checked + .switch { background: var(--brass); } .mi-switch input:checked + .switch::after { transform: translateX(18px); }
.mi-switch input:focus-visible + .switch { box-shadow: 0 0 0 2px var(--gold); }
.menu .vol { display: flex; align-items: center; gap: 10px; padding: 0 8px 8px 42px; border-bottom: 1px solid var(--line-soft); }
.menu .vol .label { margin: 0; flex: 0 0 auto; } .menu .vol input[type=range] { height: 40px; }
/* study mode: top-bar badge and the expandable entries of "Últimas jugadas" */
.topbar-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 1px; }
.topbar-line2 .topbar-round { margin-top: 0; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; letter-spacing: .12em; } /* the badge never covers the round text: the text truncates first (block J3.6) */
.topbar-tag.study { background: transparent; color: var(--gold); border: 1px solid var(--brass); letter-spacing: .03em; padding: 0 5px; line-height: 1.35; }
.log-item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.log-item > span:first-child { flex: 1 1 auto; min-width: 0; }
.log-item .exp { min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--gold); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.study-box { flex: 0 0 100%; margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 8, 15, .45); display: flex; flex-direction: column; gap: 4px; }
.study-cards { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.study-cards .mini-card { width: 26px; height: 38px; margin-left: 0; } .study-cards .mini-card b { font-size: 13px; } .study-cards .mini-card span { font-size: 15px; }
.study-cards .vs { margin: 0 4px 0 8px; font-size: .75rem; color: var(--smoke); letter-spacing: .08em; text-transform: uppercase; }
.study-cards .res { margin-left: 8px; font-size: .8rem; font-weight: 700; } .study-cards .res.win { color: var(--gold); } .study-cards .res.lose { color: #ff8b9a; }
.study-line { font-size: .82rem; color: var(--ivory); } .study-line.reason { color: var(--gold); }

/* ---- block J3.6: the active player is obvious at a glance ---- */
.seat .ring-wrap { --seat-scale: 1; transform: scale(var(--seat-scale)); transform-origin: 50% 50%; transition: transform 220ms ease-out; }
.seat.active .backs { opacity: 0; } /* the enlarged portrait is the signal; the tucked backs would reach the neighbours */
.seats-layer.dense .seat .ring-wrap { width: 64px; height: 64px; } /* 8 players: a slightly smaller base so 1.3x still clears the 18 % rows */
@media (max-height: 760px) { .seats-layer.dense .seat .ring-wrap { width: 42px; height: 42px; } .you-spot .seat.active .ring-wrap { --seat-scale: 1.18; } .center-info { top: 48.5%; } } /* short phones: the dock sits close to the pot line, so the viewer's seat grows a little less there */
@media (max-width: 375px) { .topbar { grid-template-columns: 44px 1fr 44px; } .topbar .icon-btn { width: 44px; } .topbar-name { font-size: .98rem; } .topbar-tag { letter-spacing: .04em; padding: 1px 5px; } }
.seat.active { z-index: 2; }
.seat.active .ring-wrap { --seat-scale: 1.3; }
.seat.active.grow .ring-wrap { animation: seat-grow 220ms ease-out; }
.seat.shrink .ring-wrap { animation: seat-shrink 220ms ease-out; }
@keyframes seat-grow { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes seat-shrink { from { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes pulse { from { transform: scale(var(--seat-scale, 1)); } to { transform: scale(calc(var(--seat-scale, 1) * 1.05)); } }
.seat.active svg.ring circle { stroke-width: 8; } .seat.you.active svg.ring circle { stroke-width: 9; }
.seat.active svg.ring .track { stroke: rgba(46, 232, 138, .18); }
.seat.active svg.ring .bar { stroke: #4DFFA5; filter: drop-shadow(0 0 5px rgba(46, 232, 138, 1)); }
.seat.active .ring-wrap::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; box-shadow: 0 0 18px 6px rgba(46, 232, 138, .5); animation: glow-pulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 14px 4px rgba(46, 232, 138, .4); } 50% { box-shadow: 0 0 26px 10px rgba(46, 232, 138, .75); } }
.seat.active .plate { border-color: #2EE88A; box-shadow: 0 0 16px rgba(46, 232, 138, .5); }
.seat.active .name { color: #2EE88A; }
.seat.active::before { content: ''; position: absolute; left: 50%; top: 42%; width: 230%; height: 200%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(46, 232, 138, .30) 0%, rgba(46, 232, 138, .12) 35%, transparent 65%); z-index: -1; pointer-events: none; }
.seats-layer.turn .seat:not(.active), .dock.turn .seat:not(.active) { filter: brightness(.7); opacity: .72; transition: filter 300ms, opacity 300ms; }
/* top bar: compact badge so a 16-character table name still shows on 360 px */
.topbar-tag { letter-spacing: .06em; padding: 1px 6px; }
.topbar-name { flex: 1 1 auto; }
/* menu: disabled item + note, audio diagnostics */
.mi:disabled { opacity: .45; cursor: default; }
.mi-note { margin: -4px 8px 8px 42px; font-size: .78rem; color: var(--amber); }
.diag { margin: 6px 0; padding: 8px; border-radius: 8px; background: rgba(7, 8, 15, .6); border: 1px solid var(--line-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ivory); max-height: 40dvh; overflow: auto; }

@media (prefers-reduced-motion: reduce) {
  .seat .ring-wrap, .seats-layer.turn .seat:not(.active), .dock.turn .seat:not(.active) { transition: none !important; }
  .seat.active.grow .ring-wrap, .seat.shrink .ring-wrap, .seat.active .ring-wrap::before { animation: none !important; }
  .thinking i, .table-area.emphasis, .flip.flipped, .toast, .request-toast, .seat .revealed { animation: none !important; }
  .duel, .duel .slot .card, .duel-banner { transition-duration: 160ms !important; }
  .hand .card, .quick, .round-btn, .btn.submit, .bet-spot, .seat .button-chip { transition: none !important; }
  .flip, .hand .card, .dealer, .panel, .seat svg.ring .bar, .tile .portrait, .dock, .chat-sheet, .chat-fab { transition: none !important; animation: none !important; }
  .seat .badge, .seat .ring-wrap.pulse, .rain, .smoke, .croupier.breathing { animation: none !important; } .rain, .smoke { display: none; }
  .croupier .pose { transition: none !important; }
}
@media (min-width: 700px) { body { font-size: 17px; } .picker-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---- block J3.9: active seats only, pot-zero redeal, chat bubbles ---- */
.seat.inactive .portrait img { filter: grayscale(1) brightness(.55); } .seat.inactive .plate { opacity: .7; } .seat.inactive .name { color: var(--smoke); } /* resting / without chips: dimmed, no card backs */
.seat .tag-line.next { color: var(--gold); white-space: nowrap; letter-spacing: 0; text-align: center; font-size: .75rem; line-height: 1.1; } /* J3.10: "Siguiente reparto" on one line: a two-line plate at a lower seat reached the enlarged dock ring on the viewer's turn */ /* "Entra en el siguiente reparto" wraps to two short lines */
.hand .card.collect { transform: rotateY(90deg) translateY(-6px); opacity: 0; transition: transform 220ms var(--ease), opacity 220ms var(--ease); } /* the viewer's cards turn face down before flying back */
.duel-banner.redeal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(6px); z-index: 6; pointer-events: none; max-width: 56%; padding: 6px 12px; } /* narrow enough to clear the tucked card backs of the side seats on 360 px */
.duel-banner.redeal.in { transform: translate(-50%, -50%); }
.duel-banner.redeal .verdict { font-size: 1.5rem; color: var(--gold); text-shadow: 0 0 16px rgba(232, 196, 118, .6); } .duel-banner.redeal .line { font-size: .95rem; }
@media (max-height: 760px) { .duel-banner.redeal .verdict { font-size: 1.25rem; } .duel-banner.redeal .line { font-size: .85rem; } }
.table-area.redealing .center-info { visibility: hidden; } /* the banner says it (like the duel stage) */
/* chat bubbles over the portraits (a fixed layer under the dock, the menus and the chat sheet) */
.bubble-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.bubble-pop { --in: 180ms; --out: 300ms; --tail-x: 50%; position: absolute; max-width: 46vw; padding: 6px 10px; border-radius: 14px; background: rgba(7, 8, 15, .92); border: 1px solid var(--line); color: var(--ivory); font-size: .85rem; line-height: 1.25; box-shadow: 0 4px 14px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity var(--in) var(--ease), transform var(--in) var(--ease); }
.bubble-pop.in { opacity: 1; transform: none; }
.bubble-pop.gone { opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity var(--out) var(--ease), transform var(--out) var(--ease); }
.bubble-pop .bubble-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bubble-pop .tail { position: absolute; left: var(--tail-x); bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: rgba(7, 8, 15, .92); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bubble-pop.below .tail { bottom: auto; top: -6px; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.bubble-pop.own { background: rgba(232, 196, 118, .96); border-color: var(--gold); color: var(--ink); font-weight: 600; } .bubble-pop.own .tail { background: rgba(232, 196, 118, .96); border-color: var(--gold); }
.bubble-pop.kind-quick .bubble-text { font-size: 1rem; font-weight: 700; }
.bubble-pop.kind-emoji { padding: 4px 10px; } .bubble-pop.kind-emoji .bubble-text { font-size: 1.7rem; line-height: 1.15; }
.bubble-pop.kind-quick.tight { padding: 5px 7px; } .bubble-pop.kind-quick.tight .bubble-text { font-size: .85rem; } /* J3.12.1: a quick phrase drops to the normal size (and a slimmer pill) only where the big one would be cut or would cover the pot block */
@media (max-width: 375px) { .bubble-pop { font-size: .8rem; } .bubble-pop.kind-quick .bubble-text { font-size: .92rem; } .bubble-pop.kind-quick.tight .bubble-text { font-size: .75rem; } } /* 12 px: "Su puta madre / el crupier" fits the 110 px gap between a dense rail and the pot block */
.mi-sub { margin: -6px 8px 8px 42px; font-size: .78rem; color: var(--smoke); }
@media (prefers-reduced-motion: reduce) { .bubble-pop, .bubble-pop.gone, .hand .card.collect { transition: opacity 120ms !important; transform: none !important; } .duel-banner.redeal { transition-duration: 160ms !important; } }
.bubble-pop.beside .tail { display: none; }
@media (max-width: 375px) { .center-line { white-space: normal; max-width: 112px; line-height: 1.15; letter-spacing: .02em; } } /* narrow phones: the ante line wraps into two short lines (still 12 px) and stays clear of a three-line side plate ("Tiempo agotado") in compact rows */
.you-spot .seat .tag-line.next { display: none; } /* the dock strip already says "Entras en el siguiente reparto" */

/* ---- block J3.10: observers (the eye), the join choices, the invite banner ---- */
.topbar { grid-template-columns: 48px 1fr 40px 48px; }
#watch-btn { grid-column: 3; width: 40px; gap: 2px; padding: 0; } #menu-panel { grid-column: 4; }
.topbar:not(:has(#watch-btn[hidden])) .topbar-name { font-size: .9rem; letter-spacing: 0; } /* the eye takes 40 px: the title gives a little so 16+ characters of a 20-character name still show (measured 17 at 390 px, 17 at 360 px with both badges) */
.topbar:not(:has(#watch-btn[hidden])) .topbar-tag { letter-spacing: .02em; padding: 1px 5px; }
#watch-btn { position: relative; } #watch-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -2px; right: -2px; } /* 44 px tap target on a 40 px (36 px on small phones) visual */
#watch-btn[hidden] { display: none; }
.topbar:has(#watch-btn[hidden]) { grid-template-columns: 48px 1fr 48px; } /* no eye (lobby-less screens): the old 3-column bar */
.topbar:has(#watch-btn[hidden]) #menu-panel { grid-column: 3; }
.eye svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eye .eye-count { font-size: .8rem; font-weight: 700; color: var(--ivory); min-width: 10px; text-align: left; }
.eye.on svg { stroke: #2EE88A; }
@media (max-width: 375px) { .topbar { grid-template-columns: 44px 1fr 36px 44px; } #watch-btn { width: 36px; } #watch-btn::after { left: -4px; right: -4px; } .eye svg { width: 20px; height: 20px; } .topbar:not(:has(#watch-btn[hidden])) .topbar-name { font-size: .82rem; letter-spacing: 0; } .topbar:has(#watch-btn[hidden]) { grid-template-columns: 44px 1fr 44px; } }
.eye-line { margin: 2px 0 6px; }
.watch-sheet { height: auto; max-height: 60dvh; }
.watch-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; overflow: auto; }
.watch-list .wrow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-bottom: 1px solid var(--line-soft); }
.watch-list .wrow .wname { flex: 1 1 auto; font-weight: 600; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-list .wrow .wname.banca { color: var(--gold); }
.watch-list .wrow .wacts { display: flex; gap: 6px; } .watch-list .wrow .wacts button { min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--brass); background: rgba(232, 196, 118, .10); color: var(--gold); font-size: .8rem; font-weight: 700; }
.watch-list .wrow .wacts button.deny { border-color: var(--crimson); color: #ff8b9a; background: rgba(163, 22, 46, .12); }
.watch-hint { padding: 0 14px 12px; }
.invite-banner { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; color: var(--ivory); font-weight: 600; width: min(94vw, 380px); }
.invite-banner span { flex: 1 1 120px; min-width: 0; line-height: 1.25; } .invite-banner .btn { flex: 0 0 auto; width: auto; white-space: nowrap; } /* J3.10 fix: the shared .btn is full-width; here the text keeps its column */
.invite-banner .btn.slim { min-height: 36px; padding: 0 12px; }
.chat-list .msg.observer .meta b { color: var(--smoke); } .chat-list .msg.observer .bubble { border-color: var(--line-soft); }

/* ---- block J3.10 part 4: the end-of-game summary ---- */
body:has(#screen-finished:not([hidden])) .topbar { position: sticky; background: var(--ink); } /* Z's bug: the translucent bar let the card show through; opaque on the summary */
body:has(#screen-finished:not([hidden])) .topbar-name { font-size: .95rem; }
.fin-head { text-align: center; } .fin-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.sum-table { font-size: .8rem; }
.sum-table th { white-space: normal; line-height: 1.15; vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 600; padding: 6px 3px; } /* sentence case: four columns must fit a 360 px phone */
.sum-table td { padding: 8px 3px; white-space: nowrap; vertical-align: top; }
.sum-table td .sub { display: block; font-size: .75rem; font-weight: 500; color: var(--smoke); letter-spacing: 0; line-height: 1.2; margin-top: 2px; }
.sum-table td.sum-pos .sub { color: #5FD38D; } .sum-table td.sum-neg .sub { color: #ff8b9a; }
.sum-table td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 74px; text-align: left; }
.sum-table .who { max-width: none; white-space: normal; overflow: visible; align-items: flex-start; }
.sum-table .who .portrait { display: none; }
.sum-table .pname { font-weight: 600; color: var(--ivory); text-align: left; border: 0; background: transparent; padding: 0; font: inherit; line-height: 1.2; overflow-wrap: anywhere; }
.sum-table .pname .meta { display: block; font-size: .75rem; color: var(--smoke); font-weight: 500; }
.sum-table td.sum-pos { color: #5FD38D; font-weight: 700; } .sum-table td.sum-neg { color: #ff8b9a; font-weight: 700; } .sum-table td.sum-zero { color: var(--smoke); }
.sum-table tfoot td { font-weight: 800; border-top: 1px solid var(--line); border-bottom: 0; color: var(--gold); }
.sum-table tr.hist td { padding: 0 0 8px; white-space: normal; }
.hist-list { margin: 0; padding: 6px 8px 4px 10px; border-left: 2px solid var(--line-soft); list-style: none; text-align: left; font-size: .78rem; color: var(--smoke); }
.hist-list li { display: flex; gap: 8px; padding: 3px 0; align-items: baseline; }
.hist-list .t { flex: 0 0 auto; color: var(--smoke); } .hist-list .what { flex: 1 1 auto; color: var(--ivory); } .hist-list .amt { flex: 0 0 auto; font-weight: 700; color: var(--gold); }
.hist-list li.ok .amt { color: #5FD38D; } .hist-list li.no .what { color: #ff8b9a; } .hist-list li.wait .what { color: var(--amber); }
.cuadre { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: .9rem; }
.cuadre.ok { color: #5FD38D; border-color: rgba(95, 211, 141, .6); } .cuadre.bad { color: #ff8b9a; border-color: var(--crimson); }
.cuadre .detail { font-weight: 500; color: var(--smoke); font-size: .8rem; }
.settle .row .from-bank, .settle .row .to-bank { color: var(--smoke); }
.settle .row.receive b { color: #5FD38D; }
.tx-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.tx-filter button { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ivory); font-size: .78rem; }
.tx-filter button[aria-selected=true] { background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 700; }
.tx-list { display: flex; flex-direction: column; }
.tx-list .tx { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: .82rem; }
.tx-list .tx .t { flex: 0 0 44px; color: var(--smoke); } .tx-list .tx .who { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; max-width: none; line-height: 1.25; } .tx-list .tx .amt { flex: 0 0 auto; font-weight: 700; color: var(--gold); }
.tx-list .tx.share .amt { color: #5FD38D; } .tx-list .tx.left .amt { color: var(--smoke); }
.tx-list .empty { color: var(--smoke); font-size: .85rem; padding: 6px 0; }
.facts-box .kv { margin: 0; padding: 0; } .facts li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: .85rem; } .facts li:last-child { border-bottom: 0; } .facts li b { color: var(--gold); font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.results .reloads-tag { display: inline-block; margin-left: 4px; font-size: .75rem; color: var(--smoke); font-weight: 500; }
@media (max-width: 375px) { .sum-table { font-size: .76rem; } .sum-table th { font-size: .75rem; } .sum-table td { padding: 7px 2px; } .sum-table td:first-child { min-width: 66px; } } /* nothing under 12 px (the overlap checker's small-text rule) */

/* ---- block J3.11: voice chat ---- */
.voice-fab, .voice-people { position: fixed; z-index: 26; border-radius: 50%; border: 1px solid var(--brass); background: var(--glass-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 0; }
.voice-fab { left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } /* J3.12: bottom-LEFT corner, mirroring the chat icon's margins and size */
.voice-people { left: 66px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } /* right of the mic, same band (above the mic it met the lower rail seats) */
.voice-fab svg, .voice-people svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.voice-people svg { width: 20px; height: 20px; }
.voice-fab .ic-mic-off { display: none; }
.voice-fab.mic-off .ic-mic { display: none; } .voice-fab.mic-off .ic-mic-off { display: block; } .voice-fab.mic-off { border-color: var(--crimson); } .voice-fab.mic-off svg { stroke: #ff8b9a; } /* "mic-off", not "muted": .muted is the grey paragraph style (margin 12 px) and moved the button */
.voice-fab.connected:not(.mic-off) { border-color: #F3EBD6; box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 14px rgba(243, 235, 214, .35); } .voice-fab.connected:not(.mic-off) svg { stroke: #F3EBD6; }
.voice-fab.listen svg { stroke: var(--smoke); }
.voice-fab.busy svg, .voice-fab[data-state="reconnecting"] svg { animation: voice-pulse 1s ease-in-out infinite; }
.voice-fab.error { border-color: var(--crimson); }
.voice-fab .voice-waves { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(243, 235, 214, .9); opacity: 0; pointer-events: none; }
.voice-fab.talking .voice-waves { animation: voice-wave 1.1s ease-out infinite; }
.voice-people .chat-badge { top: -4px; right: -4px; background: #F3EBD6; }
@keyframes voice-wave { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* on the table the pair sits above the hand strip, left side; the chat icon stays on the right */
body:has(.table-screen:not([hidden])) .voice-fab, body:has(.table-screen:not([hidden])) .voice-people { bottom: calc(var(--hand-h) + var(--strip-h) + 66px + env(safe-area-inset-bottom)); } /* J3.12: one band for the three buttons: 44 px above the old one, clear of the own seat when it is tallest (broke: ring top ~665 px at 390x844) and of its bubble */
/* your turn: the bet controls take the bottom; the floating buttons hide like the chat icon and the mute toggle moves INTO the dock's turn strip (a raised FAB collided with the enlarged own seat and the lower rail seats) */
body:has(.dock.mine) .voice-fab, body:has(.dock.mine) .voice-people { opacity: 0; pointer-events: none; transform: translateY(8px); }
.strip { position: relative; }
.voice-strip-btn { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--brass); background: var(--glass-2); display: none; align-items: center; justify-content: center; padding: 0; }
.voice-strip-btn::after { content: ''; position: absolute; inset: -4px; } /* 44 px tap target */
.voice-strip-btn svg { width: 20px; height: 20px; fill: none; stroke: #F3EBD6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.voice-strip-btn .ic-mic-off { display: none; } .voice-strip-btn.mic-off .ic-mic { display: none; } .voice-strip-btn.mic-off .ic-mic-off { display: block; } .voice-strip-btn.mic-off { border-color: var(--crimson); } .voice-strip-btn.mic-off svg { stroke: #ff8b9a; }
.voice-strip-btn.talking { box-shadow: 0 0 0 3px rgba(243, 235, 214, .35); }
.dock.mine .voice-strip-btn.on { display: flex; }
body:has(#duel:not([hidden])) .voice-fab, body:has(#duel:not([hidden])) .voice-people { opacity: 0; pointer-events: none; } /* never over the duel stage */
/* the speaker: ivory sound waves around the portrait, on the rail and in the dock (distinct from the green turn ring) */
.seat.speaking .ring-wrap::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(243, 235, 214, .9); box-shadow: 0 0 12px rgba(243, 235, 214, .55); pointer-events: none; animation: voice-wave 1.1s ease-out infinite; }
.seat.speaking .ring-wrap::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(243, 235, 214, .95); pointer-events: none; }
/* banner (top, like the invite banner) */
.voice-banner { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; color: var(--ivory); font-weight: 600; width: min(94vw, 380px); }
.voice-banner span { flex: 1 1 120px; min-width: 0; line-height: 1.25; } .voice-banner .btn { flex: 0 0 auto; width: auto; white-space: nowrap; min-height: 36px; padding: 0 12px; margin-top: 0; }
.voice-banner.bad { border-color: var(--crimson); }
@media (max-height: 760px) { .voice-banner, .invite-banner { top: calc(58px + env(safe-area-inset-top)); padding: 5px 10px; font-size: .9rem; } } /* short phones: the compact top seats start at ~110 px */
/* sheet */
.voice-sheet { max-height: 70dvh; } .voice-body { padding: 8px 12px calc(6px + env(safe-area-inset-bottom)); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.voice-explain { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--ivory); }
.voice-error { margin: 0; font-size: .92rem; line-height: 1.4; color: #ffd0d6; }
.voice-body .btn { margin-top: 0; } .voice-actions { display: flex; gap: 10px; } .voice-actions .btn { flex: 1 1 0; } .voice-actions .btn.danger { border-color: var(--crimson); color: #ff8b9a; }
.voice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.voice-list .vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 4px 2px; border-bottom: 1px solid var(--line-soft); } /* the admin's buttons wrap to a second line on narrow phones */
.voice-list .vwave { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.voice-list .vrow.speaking .vwave { border-color: #F3EBD6; box-shadow: 0 0 10px rgba(243, 235, 214, .7); animation: voice-pulse 1s ease-in-out infinite; }
.voice-list .vname { flex: 1 1 140px; min-width: 0; font-weight: 600; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-list .vstate { flex: 0 0 auto; font-size: .78rem; color: var(--smoke); } .voice-list .vstate.off { color: #ff8b9a; }
.voice-list .vacts { display: flex; gap: 6px; margin-left: auto; } .voice-list .vacts button { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--brass); background: transparent; color: var(--gold); font-weight: 700; font-size: .78rem; } .voice-list .vacts button.deny { border-color: var(--crimson); color: #ff8b9a; }
#voice-audio { position: fixed; width: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .voice-fab.talking .voice-waves, .seat.speaking .ring-wrap::after, .voice-list .vrow.speaking .vwave, .voice-fab.busy svg { animation: none !important; } .voice-fab.talking .voice-waves { opacity: .9; } }
/* block J3.11.1: the reason line, the admin diagnose block */
.voice-reason { margin: 0; font-weight: 700; color: var(--ivory); font-size: .95rem; }
.voice-diag { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.voice-diag-out { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .78rem/1.35 ui-monospace, Menlo, Consolas, monospace; color: var(--smoke); background: rgba(7, 8, 15, .5); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }
.voice-actions { flex-wrap: wrap; } .voice-actions .btn { flex: 1 1 120px; }
/* ---- J3.12.1 addendum: the quick-phrase row shows 4.5 s after the sheet opens, then collapses (the list takes the space; the input does not move) ---- */
.chat-quick { max-height: 200px; opacity: 1; overflow: hidden; transition: max-height 250ms var(--ease), opacity 250ms var(--ease), padding 250ms var(--ease); }
.chat-quick.collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.chat-form input[type=text] { min-width: 0; } /* J3.12.1 addendum: the input shrinks beside the new button; without it the send button fell past the edge at 360 px */
.chat-quick-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.chat-quick-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.chat-quick-btn[aria-expanded="true"] { border-color: var(--gold); background: rgba(232, 196, 118, .12); }
@media (prefers-reduced-motion: reduce) { .chat-quick { transition: none; } }

/* ---- block J3.13: house tax ---- */
.tax-row { display: flex; flex-direction: column; gap: 6px; }
.tax-row .label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tax-row .tax-value { color: var(--gold); font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.tax-row input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--gold); touch-action: pan-y; }
.tax-badge-line { margin: -4px 0 6px; min-height: 0; }
.tax-badge-line:empty { display: none; }
.tax-badge { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--brass); border-radius: 999px; padding: 2px 9px; background: rgba(7, 8, 15, .35); }
.bet-tax { margin: 0; text-align: right; font-size: .76rem; font-weight: 600; color: var(--gold); letter-spacing: .03em; line-height: 1.1; white-space: nowrap; }
/* the tax line lives INSIDE the unchanged controls box (112 / 106 px): slider row 44 + actions 48 (44 compact) + the 14 px line + tighter gaps; the dock never grows, so the seats above it keep their clearance */
.dock.taxed .bet-controls { gap: 3px; justify-content: space-between; }
@media (max-height: 760px) { .dock.taxed .bet-controls { gap: 2px; } .dock.taxed .bet-actions .quick, .dock.taxed .bet-actions .submit { min-height: 44px; padding-top: 2px; padding-bottom: 2px; } } /* 44 + 2 + 44 + 2 + 14 = 106 */
.center-line .tax { display: block; white-space: nowrap; } /* "Impuesto 2 %" on its own line under the ante line, never a lone % */
.tax-badge, .tax-value { white-space: nowrap; }
.results tr.house-row td { background: rgba(232, 196, 118, .08); border-bottom: 1px solid var(--line); color: var(--gold); font-weight: 700; }
/* ---- block J3.15: compact Results panel. Three numeric columns sized to their content (nowrap, width 1 %), the name cell takes the rest and
   ellipsizes (max-width 0 + overflow hidden); a word is never broken; every size >= 12 px. The J3.13 "wrap anywhere" rules are gone. ---- */
.panel-caption { margin: 6px 0 0; font-size: .75rem; letter-spacing: .04em; }
.panel .results.compact { table-layout: auto; width: 100%; }
.panel .results.compact th, .panel .results.compact td { padding: 7px 4px; white-space: nowrap; }
.panel .results.compact th:not(:first-child), .panel .results.compact td.num { width: 1%; text-align: right; font-variant-numeric: tabular-nums; }
.panel .results.compact th:first-child, .panel .results.compact td:first-child { max-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; min-width: 72px; }
.panel .results.compact .who { display: flex; align-items: center; gap: 6px; max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; }
.panel .results.compact .who .portrait { display: inline-flex; width: 32px; height: 32px; flex: 0 0 auto; }
.panel .results.compact .who .pname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.panel .results.compact .reloads-badge { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--gold); border: 1px solid var(--brass); border-radius: 999px; padding: 0 5px; line-height: 1.4; }
.panel .results.compact .who .bot-tag { flex: 0 0 auto; }
.panel .results.compact tr.expandable { cursor: pointer; }
.panel .results.compact tr.expandable td:last-child { position: relative; padding-right: 14px; }
.panel .results.compact tr.expandable td:last-child::after { content: '▸'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--gold); }
.panel .results.compact tr.expandable.open td:last-child::after { content: '▾'; }
.panel .results.compact tr.expandable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.panel .results.compact td.zero { color: var(--smoke); }
.panel .results.compact .rq { white-space: normal; }
@media (max-width: 375px) { .panel .results.compact { font-size: .78rem; } .panel .results.compact th, .panel .results.compact td { padding: 6px 3px; } .panel .results.compact .who .portrait { width: 28px; height: 28px; } .panel .results.compact th:first-child, .panel .results.compact td:first-child { min-width: 64px; } }
@media (max-width: 340px) { .panel .results.compact .who .portrait { display: none; } }
.panel .settle .row > span:first-child { min-width: 0; white-space: normal; overflow-wrap: normal; word-break: keep-all; } /* J3.15: the 0 % liquidación wraps between words only */
.panel .log-item > span:first-child { overflow-wrap: normal; word-break: keep-all; } /* J3.15: "Últimas jugadas" too */
.settle .row.recibe b { color: #5FD38D; } .settle .row.paga b { color: #ff8b9a; } .settle .row.cuadrado b { color: var(--smoke); font-weight: 600; }
.settle .row .tag-you { font-size: .72rem; color: var(--smoke); margin-left: 4px; }
.house-box .row b { color: var(--gold); }
.house-box .hint { margin-top: 6px; }
.sum-table td .sub.tax { color: var(--smoke); white-space: normal; max-width: 72px; margin-left: auto; line-height: 1.15; } /* 12 px like every sub (never under the 12 px floor) */ /* "impuesto" / "1,32 €" on two short lines: the four columns keep fitting 360 px */
.hist-list li.tax .amt { color: var(--smoke); }
.cuadre.tax .detail { display: block; }


/* block J4: accounts + libreta */
#screen-home .wordmark .label { color: #d8d2c8; } /* the tagline sits on the chandelier glow: 3.2:1 as smoke, 4.7:1 as warm grey */
.acct-chip { position: absolute; right: 4px; top: 50%; transform: translateY(calc(-50% + 8px)); z-index: 2; display: inline-flex; align-items: center; min-height: 24px; line-height: 22px; max-width: calc(50vw - 116px); padding: 0 10px; border: 1px solid var(--brass); border-radius: 999px; color: var(--gold); text-decoration: none; font-size: .75rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* beside the divider, clear of the brand and the tagline */
.acct-chip::before { content: ''; position: absolute; inset: -10px -6px; } /* 44 px hit area */
.acct-chip.on { letter-spacing: 0; border-color: var(--gold); background: rgba(232, 196, 118, .1); }
.tax-badge.libreta-badge { background: transparent; color: var(--gold); border: 1px solid var(--brass); }
.libreta-line { margin: -2px 0 10px; line-height: 1.4; color: #d8d2c8; }
.libreta-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; text-decoration: none; }

/* block J4.1: hands in "Últimas jugadas" and in the summary; the player mini card */
.hand-box { flex: 0 0 100%; margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 8, 15, .45); display: flex; flex-direction: column; gap: 6px; }
.hand-cards { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hand-cards .mini-card { width: 30px; height: 44px; margin-left: 0; } .hand-cards .mini-card b { font-size: 14px; } .hand-cards .mini-card span { font-size: 17px; }
.hand-cards .mini-card.gold { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(232, 196, 118, .7); }
.hand-cards .mini-card.dim { opacity: .55; }
.hand-cards .mini-card.plaque { display: flex; align-items: center; justify-content: center; padding: 2px; text-align: center; font-size: 9px; font-weight: 800; line-height: 1.05; color: #111; background: rgba(242, 237, 228, .92); }
.hand-cards .vs { margin: 0 4px 0 8px; font-size: .75rem; color: #cfc9bf; letter-spacing: .08em; text-transform: uppercase; }
.hand-cards .res { margin-left: 8px; font-size: .8rem; font-weight: 700; } .hand-cards .res.win { color: var(--gold); } .hand-cards .res.lose { color: #ff8b9a; } .hand-cards .res.unplayed { color: var(--smoke); }
.hand-line { font-size: .78rem; color: #cfc9bf; }
.log-item .exp.hand { color: var(--gold); } .log-item .live { flex: 0 0 auto; font-size: .75rem; color: #cfc9bf; font-style: italic; padding: 0 4px; }
.deals { display: flex; flex-direction: column; }
.deals .deal { border-bottom: 1px solid var(--line-soft); } .deals .deal:last-child { border-bottom: 0; }
.deals .deal-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none; color: var(--ivory); font: inherit; font-size: .9rem; text-align: left; }
.deals .deal-btn > span:first-child { flex: 1 1 0; min-width: 0; } .deals .deal-btn > .deal-chev { flex: 0 0 auto; margin-left: auto; color: var(--gold); font-weight: 700; white-space: nowrap; } /* own class: .chev is the 20 px details icon */
.deals .deal-hands { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; }
.deals .deal-seat { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 8, 15, .45); }
.deals .deal-seat .who { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; } .deals .deal-seat .who b { color: var(--ivory); } .deals .deal-seat .who .num { color: #cfc9bf; }
.pc-sheet { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 33; width: min(92vw, 380px); margin: 0; padding: 18px 16px 16px; }
.pc-close { position: absolute; top: 4px; right: 4px; }
.pc-head { display: flex; gap: 12px; align-items: center; margin: 0 40px 10px 0; }
.pc-photo { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: rgba(7, 8, 15, .6); flex: 0 0 64px; } .pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-id { min-width: 0; } .pc-id .h2 { margin: 0 0 2px; word-break: break-all; font-size: 1.3rem; } .pc-bio { margin: 0; font-size: .875rem; line-height: 1.4; color: #d8d2c8; overflow-wrap: anywhere; }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.pc-stats div { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 8, 15, .45); }
.pc-stats dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #cfc9bf; } .pc-stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ivory); font-size: .95rem; }
.pc-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 4px; text-decoration: none; }
.seat .ring-wrap, .pcard .portrait { cursor: pointer; }

/* block J4.2: account photos, the account card on the join screen, the summary faces */
.portrait.photo img { object-fit: cover; }
.acct-card { margin: 10px 0 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7, 8, 15, .6); }
.acct-card-title { margin: 0 0 4px; font-weight: 700; color: var(--gold); font-size: 1rem; }
.acct-card .row2 .btn { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 10px; }
.sum-table .pname.with-face .portrait { width: 24px; height: 24px; } .sum-table .pname.with-face { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: center; } .sum-table .pname.with-face .meta { grid-column: 1 / -1; white-space: nowrap; }
.lobby-note { margin: 4px 0 8px; color: #d8d2c8; }
#you-line { color: #d8d2c8; } /* J4.2: "Juegas como <usuario>" over the lobby glow (3.7-4.1:1 as smoke) */
/* block J4.3: the table before the start, the 3-2-1, the in-game player card */
.seat.active::before, .seat .ring-wrap::before, .seat .ring-wrap::after, .seat.glow .ring-wrap::after { pointer-events: none; } /* glows never take a neighbour's tap */
.seat .ring-wrap { touch-action: manipulation; }
.prestart { position: absolute; left: 50%; top: 65%; transform: translate(-50%, -50%); z-index: 5; width: max-content; max-width: 80%; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.prestart-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; max-width: 180px; height: 44px; padding: 0 22px; border: 1px solid rgba(232, 196, 118, .85); border-radius: 999px; background: rgba(7, 8, 15, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #f3ebd6; font-family: var(--text); font-weight: 600; font-size: 15px; letter-spacing: .02em; cursor: pointer; transition: transform 120ms ease, background 120ms ease; } /* block J4.5: the minimal start pill */
.prestart-btn { pointer-events: auto; } /* block J4.5: only the pill takes taps; the seats beside it stay tappable */
.prestart-btn .play { width: 14px; height: 14px; fill: var(--gold); flex: 0 0 auto; }
.prestart-btn:active:not(:disabled) { transform: scale(.96); background: rgba(232, 196, 118, .16); }
.prestart-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(243, 235, 214, .28), transparent); transform: skewX(-18deg); animation: prestart-sweep 6s ease-in-out infinite; pointer-events: none; }
@keyframes prestart-sweep { 0%, 82% { left: -60%; } 100% { left: 130%; } }
.prestart-btn:disabled { opacity: .45; cursor: default; } .prestart-btn:disabled::after { display: none; }
.prestart-note, .prestart-count { margin: 0; color: #e6dfd2; font-size: 12.5px; font-weight: 400; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6); }
.prestart-wait { padding: 0; } .prestart-note, .prestart-wait { max-width: 180px; } /* block J4.5: never wider than the pill, so the caption stays between the side seats */
body.prestart-on #center-line, body.prestart-on #machine { visibility: hidden; }
.countdown { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.countdown-n { font-family: var(--display); font-size: 68px; font-weight: 400; line-height: 1; color: rgba(232, 196, 118, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); animation: countdown-pop 1s ease-out both; } /* block J4.5: smaller and lighter, fade only */
@keyframes countdown-pop { 0% { opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.pc-sheet { transition: none; }
.pc-sheet.sheet-top { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }
.pc-sheet.anchored { left: 0; right: auto; bottom: auto; transform: none; width: 300px; }
.pc-sheet.slide { animation: pc-in 180ms ease-out both; } @keyframes pc-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pc-sheet.anchored.slide { animation: pc-in-a 180ms ease-out both; } @keyframes pc-in-a { from { opacity: 0; } to { opacity: 1; } }
.pc-sub { margin: 0; font-size: .85rem; color: #d8d2c8; }
.pc-pnl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.pc-pnl div { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 8, 15, .45); min-width: 0; }
.pc-pnl dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #cfc9bf; } .pc-pnl dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ivory); font-size: .95rem; }
.pc-pnl dd.pos { color: #9fe3b1; } .pc-pnl dd.neg { color: #ffb0bc; } .pc-pnl dd.hidden-money { color: #d8d2c8; font-weight: 600; font-size: .85rem; }
.pc-last { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .8rem; color: #cfc9bf; }
.pc-last .chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: .8rem; color: var(--ink); }
.pc-last .chip.up { background: #9fe3b1; } .pc-last .chip.down { background: #ffb0bc; } .pc-last .chip.even { background: #d8d2c8; }
@media (prefers-reduced-motion: reduce) { .prestart-btn::after { animation: none; display: none; } .countdown-n { animation: none; } .pc-sheet.slide, .pc-sheet.anchored.slide { animation: none; } }
body:has(#countdown:not([hidden])) #center-info { visibility: hidden; } /* J4.3: the 3-2-1 alone in the centre */

/* block J4.4: the libreta / profile overlay over the table (z 25: above the topbar and table, below the voice buttons at 26, chat 28, menus 31, toasts 40) */
.app-overlay { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: var(--ink); }
.app-overlay[hidden] { display: none; }
.app-overlay-bar { flex: 0 0 auto; display: flex; align-items: center; min-height: 52px; padding: calc(4px + env(safe-area-inset-top)) 10px 4px; background: var(--night); border-bottom: 1px solid var(--line-soft); }
.app-overlay-back { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
.app-overlay-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.app-overlay-body { flex: 1 1 auto; min-height: 0; }
.app-overlay-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ink); }
/* block J4.4: with the overlay open the mic, people and chat buttons sit in the bottom corners above it (the dock and the hand are underneath) */
body:has(#app-overlay:not([hidden])) .voice-fab, body:has(#app-overlay:not([hidden])) .voice-people, body:has(#app-overlay:not([hidden])) .chat-fab { bottom: calc(16px + env(safe-area-inset-bottom)); opacity: 1; pointer-events: auto; transform: none; }
/* block J4.4: the lobby card is darker so its small labels keep 4.5:1 over the chandelier glow (the audit found 3.1-4.4 there) */
#screen-lobby > .glass { background: rgba(7, 8, 15, .88); }
/* block J4.5: the big-card deal reveal (above the dock and the bubbles, below the top bar, the menus, the voice buttons and the toasts) */
.big-reveal { position: fixed; inset: 0; z-index: 8; touch-action: manipulation; cursor: pointer; }
.big-reveal[hidden] { display: none; }
.big-reveal .br-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 1; transition: opacity 300ms ease; }
.big-reveal.out .br-scrim { opacity: 0; }
.big-reveal .br-stage { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 45%; pointer-events: none; }
.big-reveal .br-tilt { position: absolute; inset: 0; transform: rotateX(18deg); transform-style: preserve-3d; }
.big-reveal .br-card { position: absolute; transform: rotate(var(--rz)); transform-style: preserve-3d; }
.big-reveal .br-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.big-reveal .br-back, .big-reveal .br-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7% / 5%; }
.big-reveal .br-back { background: url('/juego/cards/back.webp') center / 100% 100% no-repeat; }
.big-reveal .br-back, .big-reveal .br-face.card { box-shadow: 0 16px 18px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .5); } /* the soft shadow on the felt */
.big-reveal .br-face { transform: rotateY(180deg); }
.big-reveal.rm .br-card { transition: opacity 200ms ease; } .big-reveal.rm.out .br-card { opacity: 0; }
.hand.reveal-pending .card { visibility: hidden; }
/* block J4.5: comic speech bubbles. Comic Neue Bold (SIL OFL 1.1, latin subset, public/juego/fonts/OFL-comic-neue.txt):
   drawn for comic dialogue lettering, legible in capitals at 14-16 px, with the Spanish accents in the latin subset. */
@font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 700; font-display: swap; src: url('/juego/fonts/comic-neue-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.bubble-pop.comic { --in: 160ms; --out: 250ms; isolation: isolate; padding: 7px 12px 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #0B0B0B; font-family: 'Comic Neue', var(--text); font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; opacity: 1; transform: scale(.7); transition: none; }
.bubble-pop.comic.in { transform: none; animation: bubble-comic-pop var(--in) ease-out both; }
@keyframes bubble-comic-pop { 0% { transform: scale(.7); } 62% { transform: scale(1.06); } 100% { transform: scale(1); } }
.bubble-pop.comic.gone { animation: none; transform: none; opacity: 0; transition: opacity var(--out) ease; }
.bubble-pop.comic .bubble-shape { position: absolute; left: -16px; top: -16px; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.bubble-pop.comic .bubble-shape path { fill: #F3EBD6; stroke: #0B0B0B; stroke-width: 2.5; stroke-linejoin: round; }
.bubble-pop.comic .bubble-text { position: relative; }
.bubble-pop.comic.own { background: transparent; border: 0; color: #0B0B0B; font-weight: 700; }
.bubble-pop.comic .tail { display: none; }
.bubble-pop.comic.kind-quick .bubble-text { font-size: 16px; font-weight: 700; }
.bubble-pop.comic.kind-quick.tight { padding: 6px 9px 5px; } .bubble-pop.comic.kind-quick.tight .bubble-text { font-size: 14px; }
.bubble-pop.comic.kind-emoji { padding: 4px 12px; } .bubble-pop.comic.kind-emoji .bubble-text { font-size: 30px; line-height: 1.1; text-transform: none; }
@media (max-width: 375px) { .bubble-pop.comic { font-size: 14px; } .bubble-pop.comic.kind-quick .bubble-text { font-size: 15px; } .bubble-pop.comic.kind-quick.tight .bubble-text { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .bubble-pop.comic, .bubble-pop.comic.in { animation: none !important; transform: none !important; } }
/* block J4.6.1: the wordmark and the header title are links to the homepage: no layout change (the link takes the
   h1's place: block, as wide as the word, centred), a >= 44 px invisible tap area around it, a subtle press */
.brand-link { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.brand-link::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 48px; transform: translateY(-50%); }
a.topbar-title { position: relative; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.topbar-title::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.brand-link:active, a.topbar-title:active { opacity: .8; }
.brand-link:focus-visible, a.topbar-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* block J4.7: the lobby list (/juego, PPPoker-style) in the same glass cards; the create form as a sheet; the way out of the summary */
.mesas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.mesas-head .h2 { margin: 0; }
.mesas-sec { margin: 0 0 18px; }
.mesas-sec > .label { display: block; margin: 0 0 8px; color: #d8d2c8; }
/* block J4.9: the lobby. "En juego" hero cards (gold border, EN DIRECTO), "En espera" medium cards, "Terminadas" greyed compact
   rows (muted colours and a faded background; the text itself keeps full opacity so it stays AA readable), admin "⋯" menus. */
.mesas-grid { display: grid; gap: 12px; }
.mesa-card { position: relative; border-radius: 16px; background: rgba(7, 8, 15, .88); border: 1px solid var(--line-soft); }
.mesa-link { display: grid; gap: 8px; padding: 14px 16px 16px; color: var(--ivory); text-decoration: none; border-radius: inherit; }
.mesa-link:active { transform: scale(.992); }
.mesa-link:focus-visible, .mesa-row:focus-visible, .mesa-menu-btn:focus-visible, .mesa-menu [role=menuitem]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mesa-card.live { border: 2px solid var(--gold); background: linear-gradient(180deg, rgba(27, 20, 70, .92), rgba(7, 8, 15, .94)); box-shadow: 0 10px 30px rgba(232, 196, 118, .14), inset 0 0 0 1px rgba(232, 196, 118, .12); }
.mesa-card.live.paused { border-color: rgba(255, 210, 138, .75); }
.mesa-card.live .mesa-link { padding: 16px 18px 18px; gap: 10px; }
.mesa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 40px; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: #ffb3bd; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b52; box-shadow: 0 0 0 0 rgba(255, 59, 82, .6); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 82, .6); } 70% { box-shadow: 0 0 0 9px rgba(255, 59, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 82, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.mesa-lap { font-size: .85rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mesa-name { font-weight: 700; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 40px; }
.mesa-name.big { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: var(--ivory); padding-right: 0; }
.mesa-by { display: block; margin-top: -2px; font-size: .85rem; color: #c9c3d8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 40px; } /* J9.3: whose table it is */
.mesa-pot { display: flex; align-items: baseline; gap: 10px; }
.mesa-pot .label { color: #d8d2c8; }
.mesa-pot b { font-size: 1.35rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.mesa-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--line); color: var(--gold); }
.mesa-chip.paused { color: #ffd28a; border-color: rgba(255, 210, 138, .5); }
.mesa-seats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.mesa-faces { display: flex; }
.mesa-faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(232, 196, 118, .4); background: var(--night); margin-left: -6px; }
.mesa-card.live .mesa-faces img { width: 34px; height: 34px; margin-left: -7px; border-color: rgba(232, 196, 118, .55); }
.mesa-faces img:first-child { margin-left: 0; }
.mesa-more, .mesa-count { font-size: .85rem; color: #d8d2c8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mesa-meta { font-size: .85rem; color: #d8d2c8; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mesa-go { margin-top: 4px; display: flex; align-items: center; justify-content: center; }
.mesa-card.wait .mesa-go { display: inline-flex; justify-self: start; width: auto; min-height: 44px; padding: 0 22px; margin-top: 2px; }
.mesas-live-empty { text-align: center; padding: 22px 18px; margin: 0 0 18px; }
.mesas-live-empty .empty-title { font-family: var(--display); font-size: 1.25rem; color: var(--ivory); margin: 0 0 6px; }
.mesas-live-empty .empty-hint { color: #d8d2c8; margin: 8px 0 0; }
.mesas-live-empty .btn { margin-top: 14px; }
/* the "⋯" admin menu (never rendered for non-admins) */
.mesa-menu-wrap { position: absolute; top: 6px; right: 6px; z-index: 2; }
.mesa-menu-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--gold); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mesa-menu-btn[aria-expanded="true"] { border-color: var(--line); background: rgba(7, 8, 15, .9); }
.mesa-menu { position: absolute; right: 0; top: 48px; min-width: 210px; padding: 6px; background: rgba(11, 15, 42, .98); z-index: 3; }
.mesa-menu [role=menuitem] { display: block; width: 100%; min-height: 44px; padding: 0 12px; text-align: left; border: 0; border-radius: 10px; background: transparent; color: var(--ivory); font: inherit; font-weight: 600; cursor: pointer; }
.mesa-menu [role=menuitem]:hover { background: rgba(232, 196, 118, .12); }
/* Terminadas: visibly past */
.done-group { margin: 0 0 8px; }
.done-day { display: inline-block; margin: 10px 0 6px; padding: 2px 10px; border-radius: 999px; background: rgba(7, 8, 15, .88); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d8d2c8; }
.mesa-row-wrap { position: relative; }
.mesa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 56px; padding: 8px 52px 8px 14px; margin: 0 0 6px; border-radius: 12px; background: rgba(7, 8, 15, .84); border: 1px solid rgba(201, 162, 75, .12); color: #cfc9bf; text-decoration: none; }
.mesa-row .mesa-row-name { font-weight: 600; color: #cfc9bf; text-decoration: line-through; text-decoration-color: rgba(201, 195, 184, .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-row .mesa-row-when { grid-column: 1; font-size: .8rem; color: #bfb9af; }
.mesa-row .mesa-row-win { grid-column: 2; grid-row: 1 / span 2; font-size: .9rem; font-weight: 700; color: #a9d8b6; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.mesa-row.open .mesa-row-name { text-decoration: none; color: var(--ivory); }
.mesa-row .mesa-row-win .who { font-weight: 600; color: #cfc9bf; }
.mesa-row .mesa-row-win.none { color: #bfb9af; font-weight: 600; }
.mesa-row-wrap .mesa-menu-wrap { top: 6px; right: 4px; }
.done-empty { display: table; color: #cfc9bf; font-size: .85rem; margin: 8px auto; padding: 4px 12px; border-radius: 999px; background: rgba(7, 8, 15, .88); }
.btn.mesas-more-btn { width: auto; min-height: 44px; margin: 8px auto 0; padding: 0 22px; background: rgba(7, 8, 15, .92); }
.mesas-admin { margin: 0 0 12px; padding: 4px 12px 8px; }
.mesas-admin > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--gold); }
@media (min-width: 1024px) {
  main:has(#screen-home:not([hidden])) { max-width: 960px; }
  .live-sec .mesas-grid, .mesas-sec .mesas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.create-back { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
.create-sheet { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); bottom: 8px; z-index: 31; width: min(96vw, 560px); transform: translateX(-50%); overflow-y: auto; overscroll-behavior: contain; margin: 0; background: rgba(11, 15, 42, .98); }
.create-sheet[hidden], .create-back[hidden] { display: none; }
.create-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.create-sheet-head .h2 { margin: 0; }
.code-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.code-box > summary::-webkit-details-marker { display: none; }
.code-box[open] > summary .chev { transform: rotate(180deg); }
.fin-exit { display: flex; width: 100%; margin: 10px 0 6px; justify-content: center; }
.mesas-head { justify-content: flex-end; } .mesas-head .h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* block J4.7: the app bar says "Mesas" */
.mesas-sec > .label { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(7, 8, 15, .85); color: #e6dfd2; } /* block J4.7: the section titles sit on the chandelier glow */
/* block J5.1: the end-of-game summary's small secondary texts stay AA-readable on the wide layout too */
#screen-finished .sub, #screen-finished .hint, #screen-finished .cuadre .detail { color: #b8bcd8; }
/* block J5.3: throwable reactions. One compact area at the top of the player card (4 + 3 grid, one row of 7 from 400 px),
   44 px targets, no labels (aria-label only), a pressed state only; the objects fly in a fixed layer under the bet dock. */
.pc-sheet { container-type: inline-size; }
.pc-sheet.has-react { width: min(92vw, 420px); }
.pc-sheet.has-react.anchored { width: 420px; }
.pc-react { display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; gap: 4px 8px; margin: 0 36px 12px 0; padding: 4px; border-radius: 14px; background: rgba(7, 8, 15, .5); border: 1px solid var(--line-soft); }
.pc-react[hidden] { display: none; }
@container (min-width: 368px) { .pc-react { grid-template-columns: repeat(7, 44px); gap: 4px; } } /* a card of 400 px or more (content = card - 32 px padding) */
.pc-react-btn { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; transition: transform 120ms, background 120ms; }
.pc-react-btn img { width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
.pc-react-btn:active { transform: scale(.92); background: rgba(232, 196, 118, .16); }
.pc-react-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pc-react.cool .pc-react-btn, .pc-react-btn:disabled { opacity: .45; cursor: default; }
.react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.react-fly { position: absolute; left: 0; top: 0; width: 48px; height: 48px; will-change: transform, opacity; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.react-ring { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(232, 196, 118, .85); pointer-events: none; }
/* block J5.4: "Cerrar mesa": the confirm sheet, the closed-table screen, the danger entries */
.confirm-sheet { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 34; width: min(92vw, 420px); margin: 0; padding: 18px 16px 16px; background: rgba(11, 15, 42, .98); }
.confirm-sheet[hidden], #confirm-back[hidden] { display: none; }
#confirm-back { z-index: 33; }
.confirm-sheet .h2 { margin: 0 0 8px; }
.confirm-sheet p { margin: 0 0 14px; color: #e6dfd2; line-height: 1.5; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-actions .btn { margin: 0; }
.btn.crimson-fill { background: #b3263f; color: #fff; border-color: #b3263f; }
.link-btn.danger-link { color: #ffb8c3; }
.mesa-menu [role=menuitem].danger { color: #ffb8c3; }
.closed-box { text-align: center; padding: 26px 18px; margin-top: 18px; }
.closed-box .h2 { margin: 0 0 10px; }
.closed-text { color: #e6dfd2; margin: 0 0 16px; line-height: 1.5; }
/* block J5.5: the finished summary: "Ver ranking" beside "Volver a las mesas" (both over the table's voice), tappable names */
.fin-exits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.fin-exits .fin-exit { margin: 0; display: flex; align-items: center; justify-content: center; }
.fin-voice-note { margin: 0 0 8px; color: #c9cde6; }
.sum-who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sum-plink { color: var(--ivory); text-decoration: none; min-height: 32px; }
.sum-plink .sum-name { text-decoration: underline; text-decoration-color: rgba(232, 196, 118, .55); text-underline-offset: 3px; }
.sum-plink:active { opacity: .8; }
.sum-plink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sum-guest { cursor: default; }
.sum-toggle { min-height: 32px; padding: 0 2px; border: 0; background: none; color: #c9cde6; font-size: .8rem; cursor: pointer; }

/* ---------- block J6: live table (reconnect banner, time bank, quick bets on top, pre-bet) ---------- */
.net-banner { position: fixed; top: calc(env(safe-area-inset-top) + 58px); left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--brass); background: rgba(8, 12, 28, .92); color: var(--ivory); font-size: .75rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.net-banner.ok { border-color: #6fcf97; color: #b8f0cf; }
.net-banner::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--gold); animation: net-pulse 1s ease-in-out infinite alternate; }
.net-banner.ok::before { background: #6fcf97; animation: none; }
@keyframes net-pulse { from { opacity: .35; } to { opacity: 1; } }
.bet-quick { grid-template-columns: 1fr 1fr 1fr; }
.bet-slider-row .btn.submit { flex: 0 0 31%; min-width: 96px; }
.bet-slider-row input[type=range] { min-width: 60px; }
.seat .plate { position: relative; } .seat .bank-bar { position: absolute; left: 10%; right: 10%; bottom: -6px; height: 3px; border-radius: 2px; background: rgba(232, 196, 118, .22); overflow: hidden; z-index: 2; }
.seat .bank-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; }
.prebet-btn { display: none; margin-left: 4px; padding: 0 10px; height: 24px; border-radius: 999px; border: 1px solid var(--brass); background: rgba(8, 12, 28, .94); color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prebet-btn:not([hidden]) { display: inline-flex; align-items: center; }
.prebet-chip { display: none; align-items: center; gap: 4px; margin-left: 4px; padding: 0 2px 0 10px; height: 24px; border-radius: 999px; background: rgba(8, 12, 28, .94); border: 1px solid var(--gold); color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.prebet-chip:not([hidden]) { display: inline-flex; }
.prebet-x { width: 28px; height: 24px; border: 0; background: transparent; color: var(--gold); font-size: .85rem; line-height: 1; }
.prebet-btn::after, .prebet-x::after { content: ''; position: absolute; inset: -10px -4px; } .prebet-btn, .prebet-x { position: relative; } /* 44 px hit area */
.dock.pre { transform: translateY(0); }
body:has(.dock.pre) .chat-fab, body:has(.dock.pre) .voice-fab, body:has(.dock.pre) .voice-people { opacity: 0; pointer-events: none; transform: translateY(8px); }
.prebet-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--prebet-bottom, 200px); z-index: 6; display: flex; }
.prebet-bar[hidden] { display: none; }
.dock.pre .bet-slider-row .btn.submit span { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .net-banner::before { animation: none; } }
.seat .tag-line.bank { color: var(--ivory); letter-spacing: 0; } /* block J6: "Extra 30 s" in my own plate */
.bet-slider-row .btn.submit { line-height: 1.15; }

/* ---------- block J7 Part 0: stages and reveals never block a seat tap (the seat finder looks through them too) ---------- */
.duel, .duel-banner, .countdown { pointer-events: none; }

/* ---------- block J7: the crupier, his bubbles and sheet, consumo visuals ---------- */
.croupier .crupier-new { position: absolute; left: 50%; bottom: 7%; width: 96%; height: auto; transform: translateX(-50%); pointer-events: none; }
.croupier.dealer-new { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.croupier.dealer-new .pose { display: none; }
.croupier.dealer-new:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.dealer-bubble { position: absolute; z-index: 20; pointer-events: none; padding: 8px 12px 7px; border-radius: 14px; background: #F6EBCF; border: 2px solid #C9A04E; color: #1B1206; font-family: 'Comic Neue', var(--text); font-weight: 700; font-size: 15px; line-height: 1.2; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); animation: db-in 180ms ease-out; }
.dealer-bubble::after { content: ''; position: absolute; left: var(--tail-x, 30px); top: -9px; width: 14px; height: 14px; background: #F6EBCF; border-left: 2px solid #C9A04E; border-top: 2px solid #C9A04E; transform: rotate(45deg); } /* the tail points UP to the crupier's mouth */
.dealer-bubble.out { opacity: 0; transition: opacity 240ms ease-in; }
.dealer-bubble.rm { animation: none; }
@keyframes db-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 375px) { .dealer-bubble { font-size: 14px; } }
.dealer-vote { position: absolute; z-index: 21; display: flex; gap: 8px; padding: 6px; border-radius: 99px; background: #F6EBCF; border: 2px solid #C9A04E; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } /* block J8: long-press vote on a Pichi line */
.dealer-vote[hidden] { display: none; }
.dealer-vote button { min-width: 48px; min-height: 44px; border-radius: 99px; border: 1px solid #C9A04E; background: #1B1206; color: #F6EBCF; font-size: 1.3rem; cursor: pointer; }
.dealer-vote button:focus-visible { outline: 2px solid #1B1206; outline-offset: 2px; }
.cs-sheet .cs-photo img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 0; }
.cs-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cs-h { margin: 2px 0 0; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { min-width: 48px; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--brass); background: rgba(8, 12, 28, .6); color: var(--gold); font-weight: 700; font-size: 1rem; }
.cs-chip.more { color: var(--ivory); font-size: .85rem; }
.cs-chip:disabled, .cs-item:disabled { opacity: .45; }
.cs-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--brass); background: rgba(8, 12, 28, .6); color: var(--ivory); font-weight: 600; text-align: left; font-size: .95rem; }
.cs-item img { width: auto; height: 40px; justify-self: center; }
.cs-item b { color: var(--gold); font-size: .85rem; }
.cs-note { margin: 0; font-size: .8rem; color: #D8CFBC; }
.cs-confirm { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(8, 12, 28, .88); }
.cs-confirm-title { color: var(--gold); font-size: 1rem; } .cs-confirm-text { margin: 0; color: var(--ivory); font-size: .88rem; }
.cs-row { display: flex; gap: 10px; justify-content: flex-end; } .cs-row .btn { min-height: 44px; margin: 0; }
.seat .ring-wrap { isolation: isolate; }
.seat-masajista { position: absolute; left: 50%; bottom: 40%; width: 72%; height: auto; transform: translateX(-50%); z-index: -1; pointer-events: none; transform-origin: 50% 100%; animation: knead 2s ease-in-out infinite; }
@keyframes knead { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); } 50% { transform: translateX(-50%) translateY(1.5px) rotate(-1deg); } }
.seat-cachimba { position: absolute; right: -14px; bottom: -2px; width: 12px; height: 30px; z-index: 3; pointer-events: none; }
.seat-cachimba img { display: block; width: 12px; height: 30px; }
.seat-cachimba .puff { position: absolute; left: 3px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: rgba(230, 230, 235, .55); opacity: 0; animation: puff 3s ease-out infinite; will-change: transform, opacity; }
.seat-cachimba .p2 { animation-delay: 1s; } .seat-cachimba .p3 { animation-delay: 2s; }
@keyframes puff { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .75; } 100% { opacity: 0; transform: translate(-6px, -26px) scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .seat-masajista, .seat-cachimba .puff { animation: none; } .seat-cachimba .p1 { opacity: .5; transform: translate(-2px, -8px); } }
.page-hidden .seat-cachimba .puff, .page-hidden .seat-masajista { animation-play-state: paused; } /* block J7 */
/* block J7: the masajista leans toward the outer side of the table (away from the neighbour above), never over another seat */
.seat[data-side="left"] .seat-masajista, .seat[data-side="top-left"] .seat-masajista { left: 22%; }
.seat[data-side="right"] .seat-masajista, .seat[data-side="top-right"] .seat-masajista { left: 78%; }
.seat:has(.seat-masajista) .plate { background: rgba(7, 8, 15, .94); } /* block J7: the plate stays fully readable in front of the masajista */

/* Block J8.5: the cachimba, bigger, with continuous smoke and the smoker's exhale (smoke.js). A persistent layer (scene +
   dock), pointer-events: none; transform / opacity animations only; soft radial gradients (no animated filter). */
.smoke-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
#dock > .smoke-layer { z-index: 6; }
.smoker { position: absolute; left: 0; top: 0; pointer-events: none; contain: layout style; }
.smoker[hidden] { display: none; }
.smoker .hookah { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.smoker .coal { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%; background: radial-gradient(circle, #ffd28a 0%, #ff7a2a 55%, rgba(255, 90, 30, 0) 100%); opacity: .75; box-shadow: 0 0 5px 1px rgba(255, 120, 40, .55); transition: opacity 200ms, transform 200ms; }
.smoker.calada .coal { opacity: 1; transform: scale(1.8); box-shadow: 0 0 10px 4px rgba(255, 140, 50, .85); }
.smoker .hose { position: absolute; overflow: visible; }
.smoker .hose path { fill: none; stroke: #1a1410; stroke-width: 2.5; stroke-linecap: round; }
.smoker .hose path.hi { stroke: rgba(212, 168, 87, .55); stroke-width: .8; transform: translate(-.6px, -.6px); }
.smoker .bowl-smoke, .smoker .exhale-at { position: absolute; width: 0; height: 0; }
.smoker .wisp, .smoker .exhale { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; background: radial-gradient(circle at 50% 55%, rgba(232, 230, 240, .95) 0%, rgba(205, 202, 218, .7) 38%, rgba(185, 182, 200, 0) 70%); }
.smoker .wisp { width: 20px; height: 20px; margin: -15px 0 0 -10px; animation: wisp 3s ease-out infinite; --sx: -6px; --ex: 4px; }
.smoker .w2 { animation-duration: 3.4s; animation-delay: .75s; --sx: 5px; --ex: -5px; }
.smoker .w3 { animation-duration: 2.8s; animation-delay: 1.5s; --sx: -3px; --ex: 7px; }
.smoker .w4 { animation-duration: 3.2s; animation-delay: 2.25s; --sx: 6px; --ex: -3px; }
.smoker[data-side="left"] .wisp { --out: -1; } .smoker[data-side="right"] .wisp { --out: 1; }
@keyframes wisp { /* --rise (px, set per smoker by smoke.js): the free space above the bowl, 10-28 px */
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  15% { opacity: .7; }
  45% { transform: translate(calc(var(--sx) * .6), calc(var(--rise, 28px) * -.43)) scale(1.3); opacity: .6; }
  75% { transform: translate(calc(var(--ex) * .6 + var(--sx) * .6), calc(var(--rise, 28px) * -.75)) scale(1.8); opacity: .3; }
  100% { opacity: 0; transform: translate(calc(var(--ex) * .6), calc(var(--rise, 28px) * -1)) scale(2.2); }
}
.smoker .exhale { width: 28px; height: 22px; margin: -11px 0 0 -14px; }
.smoker[data-side="left"] { --dir: -1; } .smoker[data-side="right"] { --dir: 1; }
.smoker.exhaling .e1 { animation: exhale 2.5s ease-out 1 forwards; }
.smoker.exhaling .e2 { animation: exhale 2.3s ease-out .22s 1 forwards; width: 20px; height: 16px; margin: -8px 0 0 -10px; }
@keyframes exhale { /* out and up: toward the screen edge, away from the table, the neighbours and the smoker's own plate */
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: .72; transform: translate(calc(var(--dir) * 6px), -3px) scale(1.2); }
  55% { opacity: .45; transform: translate(calc(var(--dir) * 20px), -11px) scale(2); }
  100% { opacity: 0; transform: translate(calc(var(--dir) * 32px), -18px) scale(2.5); }
}
.page-hidden .smoker .wisp, .page-hidden .smoker .exhale { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .smoker .wisp, .smoker .exhale { animation: none !important; } .smoker .w1 { opacity: .55; transform: translate(-2px, -14px) scale(1.6); } }
.smoker.still .wisp, .smoker.still .exhale { animation: none; } .smoker.still .w1 { opacity: .55; transform: translate(-2px, -14px) scale(1.6); }

.mesa-chip.test { margin-left: 8px; vertical-align: middle; font-size: .72rem; border: 1px solid #c9a04e; color: #f0d58c; padding: 1px 7px; border-radius: 99px; } /* block J8.7 */
/* block J9.8 "Modo Torneo": the winner and the final standings on the finished screen */
.fin-tournament { margin: 8px 0 4px; }
.fin-winner { margin: 0 0 6px; font-weight: 700; font-size: 1.15rem; color: var(--gold); }
.fin-standings { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.fin-standings li { color: var(--ivory); } .fin-standings b { display: inline-block; min-width: 2.2em; color: var(--gold); }
/* block J11: the tournament stake selector and the "Clasificación final" link in the lobby */
.stake-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; } .stake-row select { min-height: 44px; min-width: 88px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7, 8, 15, .6); color: var(--ivory); font: inherit; padding: 0 10px; }
.final-link-row { margin: 4px 0 10px; text-align: right; } .final-link-row a { color: var(--gold); font-size: .9rem; font-weight: 600; }