:root {
--felt: #0b5c3a;
--felt-dark: #073d27;
--gold: #e0b04c;
--panel: #1c1f26;
--panel2: #262a33;
--text: #f1f1f1;
--muted: #9aa0aa;
--danger: #d9534f;
--accent: #3d8bfd;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: radial-gradient(circle at 50% 0%, #22262f, #14161b 70%);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: auto;
/* No min-height: 100vh here — on Android 100vh is the toolbar-hidden height, taller than what's
visible, so the in-game page itself scrolled and the header (Отойти/Сдаться/Встать) slid away. */
background-attachment: fixed; /* the gradient used to end partway down a long lobby, leaving a seam */
}
html { background: #14161b; }
body.ingame { overflow: hidden; }
body.ingame .top { padding: .35em 1em; gap: .55em; }
body.ingame .top h1 { font-size: 1em; }
.table-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: .28em;
font-size: .82em;
color: var(--text);
}
.tm-chip {
display: inline-flex;
align-items: center;
gap: .2em;
padding: .16em .55em;
border-radius: 999px;
font: inherit;
font-weight: 700;
letter-spacing: .01em;
line-height: 1.25;
white-space: nowrap;
border: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .35);
}
button.tm-chip { cursor: pointer; }
button.tm-chip:hover { filter: brightness(1.14); }
.tm-bots { background: linear-gradient(180deg, #2ea072, #1a6d4d); color: #f3fff8; border-color: #5ee0a855; }
.tm-easy { background: linear-gradient(180deg, #3cb56a, #1f7a42); color: #f0fff4; border-color: #7dff9f44; }
.tm-hard { background: linear-gradient(180deg, #e06a22, #b13a0c); color: #fff4ea; border-color: #ffb07066; }
.tm-tourney { background: linear-gradient(180deg, #e0b04c, #a67c12); color: #1a1400; border-color: #ffe08a77; }
.tm-pko { background: linear-gradient(180deg, #c4454a, #8a1e2a); color: #ffe4e6; border-color: #ff8a9466; }
.tm-table { background: linear-gradient(180deg, #3a4150, #262b36); color: #f4f6fa; border-color: #6b7384aa; }
.tm-blinds { background: linear-gradient(180deg, #f0c14b, #c99212); color: #1a1400; border-color: #ffe9a888; }
.tm-units { background: linear-gradient(180deg, #3a4150, #262b36); color: #f4f6fa; border-color: #6b7384aa; }
.tm-units.on { background: linear-gradient(180deg, #3d8bfd, #1f5fc4); color: #f2f7ff; border-color: #9dc4ff88; }
.tm-ante { background: linear-gradient(180deg, #5a3a12, #3d260a); color: #ffd789; border-color: #e0b04c77; }
.tm-level { background: linear-gradient(180deg, #3d8bfd, #1f5fc4); color: #f2f7ff; border-color: #9dc4ff88; }
.tm-clock { background: #2a2f3a; color: #c5cad3; font-weight: 600; box-shadow: none; }
.tm-clock:empty { display: none; }
#app {
min-height: 100%;
display: flex;
flex-direction: column;
}
body.ingame #app {
height: 100%;
min-height: 0;
overflow: hidden;
background: transparent;
}
/* render() puts every screen inside #screenRoot (modals live in a sibling #modalRoot). As a plain
block it broke the height chain #app → .table-page: the table grid grew to its content instead of
the viewport, so on a short phone the action bar was clipped off the bottom with no scroll, and a
growing hand log could stretch the grid and drift the centred table lower and lower. */
#screenRoot { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.ingame .table-page,
body.ingame .table-stage { background: transparent; }
button {
font: inherit;
cursor: pointer;
border: none;
border-radius: 8px;
padding: .55em 1.1em;
background: var(--panel2);
color: var(--text);
}
button:disabled { opacity: .4; cursor: default; }
/* Hover: every live button brightens a little, so it reads as pressable. :where() keeps it at zero specificity —
any button with a hover of its own wins. Not on the table itself (seats, cards, the action bar have their own
looks, and a filter there would repaint the felt on every mouse move). */
@media (hover: hover) {
:where(button:not(:disabled), [role="button"], a[data-act]):where(:not(.table-stage *)):hover { filter: brightness(1.18); }
:where(button, [role="button"], a[data-act]) { transition: filter .12s, background-color .12s, border-color .12s, color .12s; }
}
[data-act]:not(:disabled) { cursor: pointer; }
button.primary { background: var(--accent); font-weight: 600; }
button.danger { background: var(--danger); color: #fff; }
button.gold { background: var(--gold); color: #221; font-weight: 700; }
input, select {
font: inherit;
background: var(--panel2);
border: 1px solid #3a3f4a;
color: var(--text);
border-radius: 8px;
padding: .5em .7em;
}
.top {
display: flex;
align-items: center;
gap: .8em;
padding: .7em 1.2em;
background: var(--panel);
border-bottom: 1px solid #000;
flex-shrink: 0;
}
.top h1 { font-size: 1.2em; margin: 0; }
/* Header buttons never shrink or wrap their label: Safari squeezed them until the emoji dropped onto
its own line ("🏆 / Итоги"), the header doubled in height and pushed the hero's seat off the bottom
of the screen. When space runs out, the table info line gives way (ellipsis) instead. */
.top > button, .top > a, .top > .hdr-profile { white-space: nowrap; flex-shrink: 0; }
.top > .table-meta {
min-width: 0; flex-shrink: 1; overflow: hidden;
/* Chips wrap onto a second line before anything is clipped. */
}
.top .grow { flex: 1; }
.top a { color: var(--muted); text-decoration: none; }
.volume-ctl { display: inline-flex; align-items: center; gap: 4px; }
/* A fully custom track/fill/thumb (see sound.js's volumeControlHtml doc comment for why this
replaced a styled native ) — all three positioned off the same percentage in
the same render, so the thumb can never visually disagree with the actual volume. */
.vol-track { position: relative; width: 70px; height: 4px; border-radius: 999px; background: var(--panel2); cursor: pointer; touch-action: none; }
.vol-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); pointer-events: none; }
.vol-thumb {
position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--panel); transform: translate(-50%, -50%);
pointer-events: none;
}
.vol-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The track is 4 px tall and the thumb (13 px) takes no clicks: grab-able area is the whole thumb and then some. */
.vol-track::before { content: ''; position: absolute; inset: -10px -8px; }
.center-screen {
min-height: calc(100vh - 60px);
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
}
.card-box {
background: var(--panel);
border-radius: 14px;
padding: 1.4em;
width: min(360px, 92vw);
box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.card-box h2 { margin-top: 0; }
/* align-items defaults to stretch, which let the bold nickname flex item's line box render
at a different vertical position than its plain-text siblings (the label, the "— hand (amount)"
trailing text) — "никнейм не отцентрирован". Explicit center keeps every item's text on the same
baseline-ish row regardless of which one happens to be a real element vs an anonymous text node. */
/* Label column fixed-width so both names start at the same x — space-between used to push each
name to wherever its own row's leftover space fell, so "Рука дня"/"Рука недели" never lined up. */
.highlight-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: baseline; gap: .6em; padding: .3em 0; font-size: .92em; }
.highlight-row > span:first-child { color: var(--muted); }
.highlight-row b { color: var(--gold); }
.card-box form, .card-box .row { display: flex; flex-direction: column; gap: .6em; }
.card-box .row-inline { display: flex; gap: .6em; }
.card-box .row-inline input { flex: 1; width: 0; }
.preset-row { display: flex; gap: .5em; margin-bottom: 1em; }
.preset-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15em;
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 10px;
padding: .55em .3em; cursor: pointer; color: var(--text, #eee);
}
.preset-btn:hover { border-color: var(--gold); }
.preset-btn.active { border-color: var(--gold); background: rgba(224,176,76,.12); box-shadow: 0 0 8px rgba(224,176,76,.25); }
.preset-name { font-weight: 700; font-size: .88em; }
.preset-sub { font-size: .7em; color: var(--muted); }
.create-form { display: flex; flex-direction: column; gap: .7em; }
.field-row { display: flex; gap: .6em; }
/* min-width: 0 guards the classic flex-item sizing bug (default min-width:auto lets a flex item's
own intrinsic content width — an input's number-spinner chrome differs slightly by value/browser
— win out over flex:1's "split evenly", most visible in Safari/WebKit): without it, two same-flex
siblings can render at visibly different widths depending on what's typed into each. */
.field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25em; }
.field-label { font-size: .72em; color: var(--muted); }
.field input, .field select { width: 100%; box-sizing: border-box; }
.hint { color: var(--muted); }
/* --- table --- */
.table-page {
display: grid;
/* Table takes whatever is left; journal/chat hug the right edge instead of sitting in a
centered 900+480 pair with empty window chrome on both sides. */
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
justify-content: stretch;
width: 100%;
gap: .6em;
padding: .25em .5em .25em .6em;
align-items: stretch;
flex: 1;
min-height: 0;
overflow: hidden;
}
.cam-phone-hint { display: none !important; }
.table-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: .45em;
min-width: 0; /* let the oval shrink instead of forcing the grid column wide */
min-height: 0;
height: 100%;
overflow: hidden;
}
.table-wrap > .table-tools,
.table-wrap > .action-bar,
.table-wrap > .action-slot,
.table-wrap > .spectator-banner { flex-shrink: 0; }
/* Reserves space for the tallest thing that ever lands here (the raise action-bar) so switching
between it, a one-line hint ("ждём игроков…"), or nothing at all doesn't resize .table-stage
above it — which otherwise visibly jumped the whole table on every turn/hand transition. */
.action-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .7em;
/* Tall enough for the raise action-bar's controls wrapping onto a second line (fold/call/slider/
number/raise/all-in buttons don't all fit on one row under ~700px) — a shorter reservation here
just moves the jank from "row appears" to "row grows a second line", same complaint either way. */
min-height: 146px; /* the raise bar's real height (it was 118 and the table shrank by the difference on every turn) */
width: 100%;
position: relative;
}
/* Seats hang off the felt rim; this box is the playground they must stay inside so they
cannot cover the header, blinds line, emoji bar or betting controls — and so the page
itself never grows a scrollbar. */
.table-stage {
flex: 1 1 auto;
min-height: 0;
width: 100%;
position: relative;
display: flex;
/* Extra top padding (and none at the bottom) shifts the flex-centered oval down the stage —
the table used to sit too high, so the opposite seat landed on the felt instead of the rail
and its bet chips overlapped the pot. The leftover top space is what the top seat hangs into. */
align-items: center;
justify-content: center;
padding-top: 1.8em;
padding-bottom: 0.6em;
overflow: hidden;
}
/* Narrow screens: log drops below the table instead of squeezing it into a sliver of a column. */
@media (max-width: 860px) {
.table-page {
grid-template-columns: 1fr;
/* Only reached with the journal *expanded* (collapsed has its own `auto` row below) — the player
asked to see it, so it gets real room; 26vh couldn't even fit records + log + the chat input. */
grid-template-rows: minmax(0, 1fr) minmax(180px, 45vh);
}
/* "журнал закрывает где кнопки фолд, колл ва-банк" — the log/chat row above always reserved at
least 120px (up to 26vh) whether or not a player actually wanted to see it, which is exactly
what was pushing the action buttons below the fold. Collapsed (the mobile default — see
S.logCollapsed), the row shrinks to just the toggle bar itself and that space goes straight
back to the table/actions above. */
.table-page:has(.log-sidebar.collapsed) { grid-template-rows: minmax(0, 1fr) auto; }
.log-toggle {
display: block; width: 100%; text-align: center; font-weight: 600;
padding: .5em; background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 8px;
color: var(--text); flex-shrink: 0;
}
.log-sidebar.collapsed { gap: 0; }
.log-sidebar.collapsed .log-panel,
.log-sidebar.collapsed .chat-panel,
.log-sidebar.collapsed .records-card,
.log-sidebar.collapsed .hist-guide { display: none; } /* records and the replay notes too: under the collapsed bar they pushed the action buttons off a phone screen */
}
@media (min-width: 861px) {
.log-toggle { display: none; } /* desktop always has its own column for this — nothing to toggle */
}
/* Deliberately not a stacking context (no isolation/z-index/transform, nor on its ancestors): the
webcam layer lives outside the re-rendered table (see #camLayer) yet must slot between the pot
and the bet chips/stickers inside it. */
.table-oval {
position: relative;
width: min(1200px, 96%);
aspect-ratio: 2.15 / 1;
height: auto;
max-height: 90%;
margin: 0;
flex: 0 0 auto;
--rim: 18px; /* the wooden rail's width */
border: var(--rim) solid transparent;
border-radius: 999px;
}
/* The felt, the rail and the table's shadow are their own GPU layer (will-change), drawn once: on a
phone every change on the table — a bet, a card — used to repaint its patch of felt, wood and
shadow along with it, at 2.75× pixels (frames of 50–100 ms with no script running, by ?fps=1).
A positioned ::before with z-index auto paints first, under the seats; the pot (z 10) stays above
and no stacking context is added, so the webcam layer's place in between is unchanged. */
.table-oval::before {
content: '';
position: absolute;
inset: calc(-1 * var(--rim));
border: var(--rim) solid transparent;
border-radius: inherit;
pointer-events: none;
will-change: transform;
/* Color only on the last layer — a mid-list #hex drops the whole shorthand in some browsers. */
background-color: #3d2618;
background-image:
var(--felt-img, url("/img/felt.jpg?v=4")),
linear-gradient(180deg, rgba(255, 214, 160, .14), rgba(28, 14, 6, .38)),
var(--wood-img, url("/img/wood.jpg?v=1"));
background-size: cover, auto, 360px auto;
background-position: center, center, center;
background-repeat: no-repeat, no-repeat, repeat;
background-origin: padding-box, border-box, border-box;
background-clip: padding-box, border-box, border-box;
box-shadow:
0 22px 48px rgba(0, 0, 0, .7),
0 0 0 2px #1a1008,
inset 0 0 48px rgba(0, 0, 0, .14);
}
.table-oval::after {
content: '';
position: absolute;
inset: 7.2% 5.4%;
border: 1.5px solid #c9a84a;
border-radius: inherit;
pointer-events: none;
z-index: 0; /* under the plaques (seats are z 1 and up), it ran across the viewer's own */
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.table-oval > .seat { z-index: 1; }
.pot-area {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, calc(-50% + var(--pot-shift, 0px)));
text-align: center;
/* Same z-index as .seat (1) used to mean DOM order broke the tie — seats render after the pot
area in the markup, so on a cramped mobile table where a seat's card genuinely overlaps the
center, it painted over the community cards instead of the other way round ("5 карт на столе
плохо видно, закрывается игроками"). The board is the one thing every seated player needs to
be able to read at a glance regardless of layout — it wins any overlap now. */
z-index: 3;
}
.pot-amount {
position: relative;
z-index: 2;
background: rgba(8, 14, 10, .78);
border: 1px solid rgba(224, 176, 76, .35);
border-radius: 22px;
padding: .35em 1.1em;
font-weight: 700;
color: var(--gold);
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.community { position: relative; display: flex; gap: .4em; margin-top: .65em; justify-content: center; }
/* Same width as the five board slots (left edge of first card → right edge of last). */
.table-logo {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
transform: translateY(-70%);
pointer-events: none;
z-index: 0;
transition: opacity .6s ease;
}
/* Between hands, with nothing in the pot, the logo is the felt's own: an empty "Банк: 0" doesn't sit
on it (its room is kept, so nothing moves when a hand starts). */
.pot-amount.pot-idle { visibility: hidden; }
/* With a pot or a board on the table the logo steps back, so "Банк" and the cards read over it. */
.community.board-busy .table-logo { opacity: .3; }
.community .playing-card,
.community .board-slot { position: relative; z-index: 1; }
.community .playing-card {
box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1.5px var(--gold);
}
.community .playing-card.back {
box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1.5px var(--gold);
}
.community .playing-card.board-slot {
background: rgba(6, 16, 12, .42);
box-shadow: inset 0 0 14px rgba(0, 0, 0, .3), 0 0 0 1.5px var(--gold), 0 0 10px rgba(224, 176, 76, .28);
color: transparent;
}
/* No transform and no z-index on .seat: it must not be a stacking context, so its plaque can sit
under the pot/board while its bet chip and sticker still paint over the webcam layer. The oval
stacks: plaque 1 (hero 5) < pot 3 < #camLayer 7 < result plaque 8 < badges/chips 9 < sticker 10.
--shw/--shh (half the seat's own size) are measured in applyTableLayout(). */
.seat {
position: absolute;
top: calc(50% + var(--sy) - var(--shh, 54px));
left: calc(50% + var(--sx) - var(--shw, 75px));
width: 150px;
text-align: center;
}
.seat > .seat-card { z-index: 1; }
.seat[data-is-me="1"] > .seat-card { z-index: 5; }
/* During a showdown, revealed opponents' cards sit just above the table's gold outline (z 0).
Keep them below the board/pot and camera layers. A winner's seat stays unstacked for its flying
chips, so lift only that winner's plaque instead. */
.table-oval:has(.result-overlay) > .seat:not([data-is-me="1"]):not(.over-drama):not(:has(.outs-row)):not(:has(> .seat-chip.win-chips, > .seat-chip.win-fly, > .seat-chip.collecting, > .seat-chip.to-rack)):has(> .seat-card > .hole > .playing-card:not(.back)) { z-index: 2; }
.table-oval:has(.result-overlay) > .seat:not([data-is-me="1"]):not(.over-drama):not(:has(.outs-row)):has(> .seat-chip.win-chips) > .seat-card:has(> .hole > .playing-card:not(.back)) { z-index: 2; }
/* Webcam sits on the felt-facing edge of the plaque — not inside the 28px avatar. Top seats
drop it below the card so it doesn't climb into the chip legend. */
.seat-cam {
position: absolute;
left: 50%;
width: 112px;
height: 112px;
padding: 0;
appearance: none;
-webkit-appearance: none;
transform: translateX(-50%);
bottom: calc(100% + 4px);
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(224, 176, 76, .7);
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
background: #111;
cursor: zoom-in;
z-index: 3;
}
.seat-top .seat-cam {
bottom: auto;
top: calc(100% + 4px);
}
.seat-cam video,
.seat-cam canvas {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #111;
}
.seat-cam video.local,
.seat-cam canvas.local { transform: scaleX(-1); }
.seat.has-cam .seat-avatar-wrap { display: none; }
/* «Вебки на месте карт» (Вид и настройки): another player's camera lies on the square where their card backs are. The seat keeps that
square (the width of the card pair) all the time, with or without a camera, so the plaques stand at one height; cam.js puts the camera on it.
Face-up cards show in the same square, so the camera steps aside while they do. */
html.cam-cards .seat:not([data-is-me="1"]) .hole { aspect-ratio: 1; align-items: center; }
/* the two cards fill the square side by side, apart, never one over the other (cam.js sets --hk, the size of a card against its usual 50×70, and --hs, the square's side) */
html.cam-cards .seat:not([data-is-me="1"]) .hole[style*="--hk"] { gap: 4px; }
html.cam-cards .seat:not([data-is-me="1"]) .hole[style*="--hk"] .playing-card { width: calc(50px * var(--hk)); height: calc(70px * var(--hk)); font-size: calc(1.15em * var(--hk)); border-radius: calc(6px * var(--hk)); flex: none; }
/* inside the seat: above its plaque (1), under its bet chips (9) */
/* with that setting on, your own camera and the enlarged one (the phone's tap) are squares too, not circles */
html.cam-cards #camLayer .seat-cam { border-radius: 10px; }
html.cam-cards .cam-lightbox video { border-radius: 14px; }
.seat > .seat-card > .seat-cam.in-cards { right: auto; bottom: auto; margin: 0; transform: none; z-index: 3; border-radius: 10px; border-width: 2px; }
/* The cards that lie open (shown at the showdown, the x-ray) are drawn over the camera, which stays where it is. Read the cards from
the DOM itself, not cam.js's cards-up mark: that one lags a frame, and an all-in reveal left the camera over a card for that long. */
.seat-card:has(> .seat-cam.in-cards) > .hole:has(> .playing-card:not(.back)) { position: relative; z-index: 4; }
/* No photo left on the plaque: the crown sits beside the name instead of on an empty circle. */
.seat.has-cam > .seat-card .seat-face { display: flex; align-items: center; width: auto; height: auto; }
.seat.has-cam > .seat-card .seat-face .champ-crown {
position: static; transform: none; margin: 0 .12em 0 0;
font-size: 1em; line-height: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .8));
}
/* Desktop keeps the same seat/card scale at 9–12 as at 6–8 — shrinking them with the crowd made
hole and board cards unreadably small on a wide screen. Phone widths still step down (see the
max-width: 480px crowd-9 / crowd-11 rules). */
.seat .seat-card {
position: relative;
background: linear-gradient(180deg, rgba(32, 26, 20, .9), rgba(12, 10, 8, .94));
border-radius: 14px;
padding: .5em .6em;
border: 1px solid rgba(212, 176, 106, .28);
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
transition: opacity .3s ease, border-color .2s ease, box-shadow .2s ease;
/* .seat centres itself with translate(-50%, -50%), which is relative to its OWN current box —
so if the card's content height changes at all (the hand-preview line, or a badge appearing,
or the bankroll chip-pile needing a different number of denomination piles for a new stack
total after a bet), that self-centering silently shifts by the same amount, reading as the
whole seat — or, since chip clearance measures off real rects, even the table — visibly
nudging every time someone bets. A fixed minimum height absorbs that instead of translating it
into a shift. 126px covers the two-line name (the name itself, then the badges under it) +
stack row + a folded hand-preview line + two mini hole cards; bump it in the mobile block too
if cards ever grow there. */
min-height: 126px;
box-sizing: border-box;
}
/* Before «Начать игру» nobody has cards, so a seat shows the player instead of an empty card square: a big photo, the name and
the stack under it, the plaque only as tall as that. A camera that lies on the card square («Вебки на месте карт») keeps it. */
.seat.pre-game .seat-card { min-height: 0 !important; padding: .6em .6em .5em; } /* !important: the crowded phone tables set their own floor later on */
.seat.pre-game .hole, .seat.pre-game .shown-note { display: none; }
html.cam-cards .seat.pre-game.has-cam:not([data-is-me="1"]) .hole { display: flex; }
.seat.pre-game .seat-who { flex-direction: column; gap: .3em; }
.seat.pre-game :is(.seat-face, .seat-avatar-wrap, .seat-avatar) { width: 64px; height: 64px; }
.seat.pre-game .seat-avatar { border: 2px solid rgba(224, 176, 76, .65); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.seat.pre-game .seat-avatar.placeholder { font-size: 1.6em; }
.seat.pre-game .seat-face .champ-crown { font-size: 22px; }
.seat.pre-game .stack-line { margin-top: .1em; }
@media (max-width: 480px), (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
.seat.pre-game :is(.seat-face, .seat-avatar-wrap, .seat-avatar) { width: 40px; height: 40px; }
.seat.pre-game .seat-avatar.placeholder { font-size: 1.1em; }
}
.seat.folded .seat-card { opacity: .45; }
/* «в огне» (3+ hands won in a row) / «дымится» (3+ played and lost): the whole plaque glows — red-hot with sparks rising, or
grey and smoking. No badge in a corner (it hid under the rebuy mark); the count is in the plaque's tooltip. */
.seat.streak-fire .seat-card { position: relative; border-color: #ffc060;
box-shadow: 0 0 0 2px #ff9a2a, 0 0 22px 7px rgba(255,100,20,.8), 0 0 50px 14px rgba(255,50,0,.35), inset 0 0 34px 8px rgba(255,70,0,.55), inset 0 0 8px 2px rgba(255,220,120,.6);
animation: fireGlow 1.4s ease-in-out infinite alternate; }
.seat.streak-fire .streak-fx { position: absolute; left: 6%; right: 6%; top: -44px; height: 46px; pointer-events: none; z-index: 7;
background-image: radial-gradient(circle 2px at 12% 90%, #ffe9a0 60%, transparent), radial-gradient(circle 1.5px at 30% 70%, #ffb040 60%, transparent), radial-gradient(circle 2px at 52% 95%, #fff0b0 60%, transparent), radial-gradient(circle 1.5px at 70% 60%, #ff9a30 60%, transparent), radial-gradient(circle 2px at 90% 85%, #ffe27a 60%, transparent);
animation: fireSparks 1.6s linear infinite; }
@keyframes fireGlow { to { box-shadow: 0 0 0 2px #ffb24a, 0 0 28px 9px rgba(255,120,30,.9), 0 0 60px 18px rgba(255,50,0,.45), inset 0 0 40px 10px rgba(255,90,10,.65), inset 0 0 10px 2px rgba(255,230,140,.7); } }
@keyframes fireSparks { from { transform: translateY(18px); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
.seat.streak-smoke .seat-card { position: relative; border-color: #98a2ad;
box-shadow: 0 0 0 1px #7c8793, 0 0 30px 12px rgba(135,145,160,.55), inset 0 0 32px 7px rgba(70,78,90,.7); } /* static: an animated blur/shadow made the plaque judder on phones */
.seat.streak-smoke .streak-fx { position: absolute; left: -26px; right: -26px; top: -40px; bottom: 30%; pointer-events: none; z-index: 7;
background: radial-gradient(ellipse 30px 26px at 8% 30%, rgba(200,205,212,.8), transparent 72%), radial-gradient(ellipse 34px 28px at 92% 24%, rgba(205,210,216,.8), transparent 72%), radial-gradient(ellipse 36px 24px at 50% 10%, rgba(210,214,220,.85), transparent 72%), radial-gradient(ellipse 26px 22px at 22% 70%, rgba(190,196,204,.6), transparent 72%), radial-gradient(ellipse 26px 22px at 78% 66%, rgba(190,196,204,.6), transparent 72%);
will-change: transform, opacity; backface-visibility: hidden; animation: smokeDrift 3.6s ease-in-out infinite alternate; }
@keyframes smokeDrift { from { transform: translate3d(0, 1px, 0); opacity: .65; } to { transform: translate3d(0, -5px, 0); opacity: 1; } }
html.lite .seat.streak-fire .seat-card, html.lite .seat.streak-smoke .seat-card, html.lite .seat .streak-fx { animation: none; }
@media (prefers-reduced-motion: reduce) { .seat.streak-fire .seat-card, .seat.streak-smoke .seat-card, .seat .streak-fx { animation: none; } }
/* a player who folded goes grey as well as dim, so the ones still in the hand stand out */
.seat :is(.seat-avatar, .seat-face) { transition: filter .45s ease-out; }
.seat.folded :is(.seat-avatar, .seat-face) { filter: grayscale(.9); }
/* a camera on the card backs lives inside the plaque, so the plaque's own fade would fade the camera too (the cards showed through it):
the fade is then done on the plaque's looks and its contents, the camera stays solid */
.seat.folded > .seat-card:has(> .seat-cam.in-cards) { opacity: 1; background: linear-gradient(180deg, rgba(32, 26, 20, .41), rgba(12, 10, 8, .42)); border-color: rgba(212, 176, 106, .13); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.seat.folded > .seat-card:has(> .seat-cam.in-cards) > :not(.seat-cam) { opacity: .45; }
/* a folded player who shows his cards: the open cards over the camera are not faded with the rest of the plaque */
.seat.folded > .seat-card:has(> .seat-cam.in-cards) > .hole:has(> .playing-card:not(.back)) { opacity: 1; }
/* A dead connection (tab closed, network dropped) used to look completely normal — no way to tell
it apart from someone just quietly still there. A red ring flags it at a glance; the
"· нет связи"/"· покидает стол" text (see main.js) says what's actually going on. */
.seat.offline .seat-card { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b, 0 0 10px rgba(192, 57, 43, .4); }
.seat-who {
display: flex;
align-items: center;
justify-content: center;
gap: .35em;
min-width: 0;
}
.seat-face {
position: relative;
display: block;
flex-shrink: 0;
width: 28px;
height: 28px;
}
.seat-face > .seat-avatar-wrap { display: block; width: 100%; height: 100%; }
.seat.has-cam .seat-face > .seat-avatar-wrap { display: none; }
/* The bottom of the crown sits on the top rim of the photo, up at the plaque's edge.
The box has to be a block: an inline span ignores width/height, and the crown then
drops into the badge row the moment that row grows (a skull after a knockout). */
.seat-face .champ-crown {
position: absolute;
z-index: 2;
left: 50%;
top: 0;
transform: translate(-50%, -100%);
margin: 0;
font-size: 15px;
line-height: 1;
pointer-events: none;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .75)) drop-shadow(0 0 2px rgba(255, 200, 80, .9));
}
.seat-avatar-wrap {
position: relative;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.seat-avatar {
width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
display: block; border: 1px solid #3a3f4a;
position: absolute; inset: 0;
}
.seat-avatar.placeholder {
display: grid; place-items: center;
background: var(--panel2); color: var(--gold);
font-weight: 700; font-size: .75em; border-color: #3a3f4a;
}
/* Both the real ![]()
and the letter placeholder are absolutely positioned on top of each other
(see avatarHtml()) — the placeholder paints later in DOM order, so with no rule to hide it, it
permanently covers a real photo the instant it finishes loading and un-hides itself. Once the
image is genuinely loaded (its own `hidden` attribute cleared — see the document-level load/error
listeners in main.js), hide its sibling placeholder instead. */
img.hdr-avatar:not([hidden]) ~ .placeholder,
img.seat-avatar:not([hidden]) ~ .placeholder,
img.profile-avatar:not([hidden]) ~ .placeholder,
img.lb-avatar:not([hidden]) ~ .placeholder,
img.lt-avatar:not([hidden]) ~ .placeholder,
img.lobby-me-avatar:not([hidden]) ~ .placeholder,
img.ltr-avatar:not([hidden]) ~ .placeholder,
img.ht-ava:not([hidden]) ~ .placeholder {
display: none;
}
.seat .name {
font-weight: 600; font-size: .9em; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04em;
line-height: 1.15;
}
/* The name takes the whole row. Badges, the skull and the kick button sit on the line under it —
in one row they flexed to nothing and a name collapsed to a letter. The marks line keeps its
height even when empty, so a kill mid-hand doesn't grow the plaque and nudge the seat. */
.seat .name > .name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.seat .name-marks {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: .12em; max-width: 100%; min-height: 1.15em; line-height: 1;
}
.seat .name-marks .name-badge { margin-right: 0; }
.seat .name img.ic { width: 1.05em; height: 1.05em; vertical-align: middle; }
.seat .kills { flex-shrink: 0; }
/* Top-right corner, opposite the D/SB/BB cluster on the top-left. */
.seat .rebuys {
position: absolute; top: calc(-6px + var(--by, 0px)); right: calc(-6px + var(--br, 0px)); z-index: 9;
height: 20px; min-width: 20px; box-sizing: border-box; padding: 0 .4em;
display: flex; align-items: center; justify-content: center;
font-size: .62em; font-weight: 700; border-radius: 10px;
background: var(--panel2); color: var(--muted); border: 1px solid rgba(255,255,255,.25);
}
/* A thin countdown bar hugging the bottom edge of the seat card, instead of a text badge that used
to get wedged into the name row — that badge was wide enough to push the player's own name out of
view on a crowded table. Sits just outside the card's own bottom border (not inside the padding)
so it never steals space from anything already there. */
.act-clock-bar {
position: absolute; left: 8%; right: 8%; bottom: -5px; height: 4px;
background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden; z-index: 1;
}
/* Drains by scaleX (set by the ticker), not width: a width transition re-laid out the page every frame. */
.act-clock-fill { height: 100%; width: 100%; background: #2ecc71; transform-origin: left center; transition: transform .25s linear, background-color .2s ease; }
.act-clock-fill.act-clock-bank { background: #3d8bfd; }
.act-clock-fill.act-clock-warn { background: #e74c3c; animation: actClockPulse .5s ease-in-out infinite; }
@keyframes actClockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.seat .name { position: relative; }
.seat .kick-btn {
position: absolute; right: -.1em; top: 100%; margin: 0; font-size: .75em; line-height: 1; padding: .05em .35em; /* out of the row: the marks stay centred */
border-radius: 50%; opacity: .6; vertical-align: middle; z-index: 1;
}
.seat .kick-btn:hover { opacity: 1; background: #c0392b; color: #fff; border-color: #c0392b; }
.records-card {
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 8px;
padding: .5em .6em; margin-bottom: .6em; font-size: .85em;
}
.records-card h3 { margin: 0 0 .3em; font-size: .95em; }
.records-row { padding: .1em 0; }
.records-row b { color: var(--gold); }
.log-highlight { color: var(--gold); font-weight: 600; }
.seat .stack { color: var(--gold); font-size: .82em; white-space: nowrap; } /* "100 BB" on two lines made the seat taller and pushed the hero's action clock off-screen */
.seat .hole { display: flex; gap: .25em; justify-content: center; margin-top: .4em; }
.seat .dealer-btn {
position: absolute;
top: calc(-6px + var(--by, 0px));
left: calc(-6px + var(--bx, 0px));
background: radial-gradient(circle at 35% 30%, #fff6d6, #e0b04c 55%, #8a6415);
color: #3a2410;
border-radius: 50%;
width: 22px;
height: 22px;
font-size: .7em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #6a4a18;
box-shadow: 0 2px 4px rgba(0,0,0,.45);
z-index: 9;
}
.seat .blind-btn {
position: absolute;
top: calc(-6px + var(--by, 0px));
left: calc(-6px + var(--bx, 0px));
background: var(--panel2);
border: 1px solid var(--muted);
color: var(--text);
border-radius: 50%;
width: 20px;
height: 20px;
font-size: .62em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
}
/* Heads-up the dealer also posts the SB: sit it just right of the D instead of under it. */
.seat:has(> .dealer-btn) > .blind-btn { left: calc(-6px + 22px + 3px + var(--bx, 0px)); }
.seat .blind-btn.sb { background: #3a5a8f; border-color: #3a5a8f; }
.seat .blind-btn.bb { background: #8f3a3a; border-color: #8f3a3a; }
.hand-preview {
display: inline-block;
margin-top: .3em;
font-size: .72em;
color: var(--gold);
background: rgba(0,0,0,.4);
border-radius: 8px;
padding: .1em .5em;
}
/* Your own «пара / старшая карта» line hangs under the plaque instead of adding to its height: the plaque (and with it the whole table's
fit) used to grow when it appeared on your turn, so the plaque moved up from where it was placed and the table jumped. */
.seat[data-is-me="1"] > .seat-card { position: relative; }
.seat[data-is-me="1"] .hand-preview { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); margin: 0; white-space: nowrap; z-index: 3; }
.reveal-row { display: flex; gap: .5em; justify-content: center; margin-top: .3em; }
.reveal-row button { font-size: .8em; padding: .3em .7em; }
.action-slot .reveal-row { margin: 0; }
.action-slot .reveal-row button { font-size: .95em; padding: .45em 1.1em; }
.spectator-banner {
background: rgba(255,255,255,.06);
border: 1px dashed var(--muted);
border-radius: 10px;
padding: .6em 1em;
width: min(720px, 94vw);
text-align: center;
color: var(--muted);
}
.seat-chip {
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
pointer-events: none;
}
/* Rack "in hand" — as tall as the plaque, flush with its side (applyTableLayout places it).
The box is centered on the point --bx/--by names. */
.seat-bankroll {
position: absolute;
top: 50%;
left: 50%;
/* Above the hero plaque (z 5) so its gold turn-glow cannot paint over the rack. */
z-index: 6;
width: auto;
height: auto;
pointer-events: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px)));
}
/* A short column of denomination piles. Discs of one denomination sit on each other; the next
colour starts above that pile. A bet stays a loose pile with the amount, further toward the pot. */
.chip-stack.bankroll.piles {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 2px;
box-sizing: border-box;
width: auto;
height: auto;
padding: 3px 2px;
border-radius: 6px;
background: linear-gradient(90deg, rgba(90, 58, 32, .55), rgba(28, 16, 8, .88));
border: 1px solid rgba(232, 196, 120, .7);
box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .18);
}
.chip-pile.tower-pile {
position: relative;
width: 13px;
height: calc(12px + (var(--tower-h, 1) - 1) * 2.8px);
flex: none;
}
.chip-pile.tower-pile .chip.mini {
width: 12px;
height: 12px;
left: 50%;
margin-left: -6px;
bottom: calc(var(--i, 0) * 2.8px);
}
.chip-pile.tower-pile .chip-count { right: -2px; bottom: -1px; font-size: .55em; }
.seat.fold-anim .seat-bankroll, .seat.folded .seat-bankroll { opacity: .35; transition: opacity .45s ease-out; } /* stays dim after the fold animation class is gone */
.seat-chip .chip-stack.table-bet {
padding: .12em .38em;
border-radius: 999px;
background: rgba(8, 12, 10, .72);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.seat-chip .ante-chip { display: flex; margin-top: .2em; opacity: .9; }
.seat-chip .ante-chip .chip-amt { font-size: .85em; }
@keyframes chipFlyToTable {
from {
transform: translate(calc(var(--cx, 0px) + var(--fly-fx, 0px)), calc(var(--cy, 0px) + var(--fly-fy, 0px))) scale(0.5);
opacity: .45;
}
to { transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(1); opacity: 1; }
}
.seat-chip.chip-fly-in:not(.collecting) { animation: chipFlyToTable .48s cubic-bezier(.22, .72, .24, 1) forwards; }
/* --- chips: real denomination colors (see DENOMS in main.js — white 1, red 5, green 25, black
100, purple 500, gold 1000), rendered as one stacked pile per denomination actually present in
the amount, so e.g. 340 chips reads as a black pile + a green pile + a red pile, not one
indistinct blob. Swap a .chip's background for an image later (real chip art) without touching
the breakdown logic. */
.chip-stack {
display: inline-flex;
align-items: center;
gap: .5em;
vertical-align: middle;
}
.chip-pile {
position: relative;
display: inline-block;
}
.chip-pile.mini { width: 15px; height: 20px; }
.chip-pile.pot { width: 32px; height: 42px; }
.chip {
position: absolute;
left: 0;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, transparent 55%, var(--chip-edge) 57%, var(--chip-edge) 62%, transparent 64%),
repeating-conic-gradient(var(--chip-color) 0deg 22deg, var(--chip-edge) 22deg 44deg);
border: 1px solid rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.6);
}
.chip.mini { width: 15px; height: 15px; bottom: calc(var(--i, 0) * 3px); }
.chip.pot { width: 32px; height: 32px; bottom: calc(var(--i, 0) * 6px); }
.chip-count {
position: absolute;
right: -4px;
bottom: -2px;
background: rgba(0,0,0,.75);
color: #fff;
font-size: .6em;
font-weight: 700;
border-radius: 6px;
padding: 0 .25em;
z-index: 2;
}
.chip-amt {
font-size: .78em;
font-weight: 700;
background: rgba(0,0,0,.6);
color: var(--gold);
border-radius: 8px;
padding: .1em .55em;
white-space: nowrap;
}
.chip-stack.pot-grow .chip-amt { animation: potWin .5s ease-in-out; }
.chip-stack.chip-in { animation: chipIn .3s ease-out; }
.chip-stack.bankroll { gap: .3em; }
.chip-legend {
position: absolute;
top: .4em;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .2em .55em;
font-size: .72em;
color: var(--muted);
opacity: .75;
pointer-events: none;
z-index: 2;
}
.legend-item { display: inline-flex; align-items: center; gap: .3em; }
.legend-item .chip { position: static; }
.seat .stack-line {
display: flex; align-items: center; justify-content: center; gap: .25em; margin-top: .1em;
max-width: 100%; min-width: 0;
}
.seat .stack { flex: 1 1 auto; text-align: center; min-width: 0; }
/* Once the pot pays out the stack text grows ("0 · вне игры", a bigger winner's number) and would
push the % past this row's overflow:hidden edge — the % must survive until the next deal. */
.equity-badge { flex-shrink: 0; position: relative; z-index: 3; } /* above the kick cross that sits on the same line */
.seat .stack-line:has(.equity-badge) .stack { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equity-badge {
font-size: .8em; font-weight: 800; padding: .05em .4em; border-radius: 6px;
background: rgba(0,0,0,.35);
}
.equity-badge.equity-good { color: #4fce72; }
.equity-badge.equity-bad { color: #e07a7a; }
.equity-badge.equity-mid { color: var(--gold); }
.outs-row { position: absolute; top: 0; z-index: 6; width: max-content; max-width: 190px; padding: 3px 5px; border-radius: 8px; background: rgba(0,0,0,.72); text-align: center; pointer-events: none; }
.seat.over-drama { z-index: 61; }
.outs-row.outs-right { left: 100%; margin-left: 4px; }
.outs-row.outs-left { right: 100%; margin-right: 4px; }
.outs-row:not([data-placed]) { visibility: hidden; } /* until placeOutsRows() has found its spot */
.outs-row.outs-low { top: auto; bottom: 0; } /* bottom-half seats grow upwards, not off the page */
/* The row sits inside its seat's card (a stacking context), so a later seat used to paint over it: lift the card above the other plaques while it carries outs.
Not above #camLayer (7) — the card would hide its own camera; placeOutsRows() keeps the rows off the camera circles instead. */
.table-oval .seat > .seat-card:has(.outs-row) { z-index: 6; }
/* …and the whole seat with it: every seat is its own layer (z 1), so a later seat's plaque, bet and stack used to paint over the outs. 20 is above the plaques, bets, stacks and
the pot, below chips flying to the winner (30), the result banner (31) and the drama seat (61). */
.table-oval > .seat:has(.outs-row) { z-index: 20; }
.outs-row.outs-many { max-width: 270px; }
.outs-row.outs-many .playing-card { width: 27px; height: 38px; font-size: .68em; }
.outs-row .log-cards { margin: 2px 0 0; justify-content: center; }
.outs-count { font-weight: 800; font-size: 11px; color: #e07a7a; }
.outs-who { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--gold); }
@keyframes chipCollect {
from { opacity: 1; transform: translate(var(--cx, 0), var(--cy, 0)) scale(1); }
to { opacity: 0; transform: translate(calc(-1 * var(--sx) * 1), calc(-1 * var(--sy) * 1)) scale(.5); }
}
.seat-chip.collecting { animation: chipCollect .55s ease-in forwards; }
.playing-card {
position: relative;
width: 50px;
height: 70px;
border-radius: 6px;
background: #fff;
color: #111;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.15em;
font-family: 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif;
flex-direction: column;
line-height: 1;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.08);
font-variant-numeric: tabular-nums;
}
.playing-card .pip.mid {
position: static;
font-size: 1.85em;
font-weight: 400;
line-height: 1;
}
.playing-card .pip.tl,
.playing-card .pip.br {
position: absolute;
z-index: 2;
width: 1.85em;
line-height: .95;
text-align: center;
letter-spacing: -.04em;
}
.playing-card .pip.tl small,
.playing-card .pip.br small { display: block; font-size: .85em; margin-top: 1px; font-weight: 400; }
.playing-card .pip.tl { top: 3px; left: 2px; font-size: .72em; }
.playing-card .pip.br { bottom: 3px; right: 2px; font-size: .72em; transform: rotate(180deg); }
.playing-card.red { color: #c41e3a; }
.playing-card.back {
background:
radial-gradient(circle at 50% 50%, rgba(255,220,180,.18) 0 14%, transparent 15%),
repeating-linear-gradient(45deg, #7a1824 0 3px, #4e0f18 3px 6px);
box-shadow: 0 3px 8px rgba(0,0,0,.4), 0 0 0 1px #3a1014;
color: transparent;
}
.playing-card.back .pip { display: none; }
.playing-card.big { width: 70px; height: 98px; font-size: 1.5em; }
.playing-card.big .pip.tl,
.playing-card.big .pip.br { font-size: .62em; }
.playing-card.big .pip.mid { font-size: 1.7em; }
.hist-cards .pip.mid,
.hist-cards .pip.br,
.hist-community .pip.mid,
.hist-community .pip.br,
.log-cards .pip.mid,
.log-cards .pip.br,
.rp-board .pip.mid,
.rp-board .pip.br,
.rp-hole .pip.mid,
.rp-hole .pip.br { display: none; }
.hist-cards .pip.tl,
.hist-community .pip.tl,
.log-cards .pip.tl,
.rp-board .pip.tl,
.rp-hole .pip.tl {
position: static;
width: auto;
font-size: 11px;
line-height: 1.05;
}
.hist-cards .pip.tl small,
.hist-community .pip.tl small,
.log-cards .pip.tl small,
.rp-board .pip.tl small,
.rp-hole .pip.tl small { font-size: 11px; margin: 0; }
@keyframes dealIn {
from { opacity: 0; transform: scale(.25) translateY(-40px) rotate(-8deg); }
to { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
.playing-card.deal-in { animation: dealIn .38s cubic-bezier(.22,.66,.16,1); }
html.dealer-nodealin .playing-card.deal-in { animation: none; } /* the dealer's cards fly in themselves; the slot must already sit where it lands */
@keyframes chipIn {
from { opacity: 0; transform: scale(.4); }
to { opacity: 1; transform: scale(1); }
}
@keyframes foldFade {
to { opacity: .4; transform: translateY(10px) rotate(-5deg); }
}
.seat.fold-anim .seat-card { animation: foldFade .45s ease-out forwards; }
/* The dealer's table only (the plain table stays as it was): a folded plaque stays dropped and tilted (also after its player shows
the cards and the fold animation is gone), and the action slot is tall enough for the bar with its quick-bet row (at 118 the table
grew by ~6% on every fold). */
@keyframes foldFadeD {
from { translate: 0 0; rotate: 0deg; }
}
.table-stage.has-frame .seat.fold-anim .seat-card { animation: foldFadeD .45s ease-out; }
.table-stage.has-frame .seat.folded .seat-card { translate: 0 10px; rotate: -5deg; }
/* SB / BB / D sit on the plaque's corner: when the plaque drops and tilts they go with it (about where the corner lands) */
.seat > :is(.dealer-btn, .blind-btn) { transition: translate .45s ease-out, rotate .45s ease-out; }
.table-stage.has-frame .seat.folded > :is(.dealer-btn, .blind-btn) { translate: -3px 16px; rotate: -5deg; }
.table-page:has(.table-stage.has-frame) .action-slot { min-height: 146px; }
@keyframes potWin {
0% { transform: scale(1); }
40% { transform: scale(1.18); box-shadow: 0 0 24px var(--gold); }
100% { transform: scale(1); }
}
.seat.won-anim .seat-card { animation: potWin .7s ease-in-out; }
.action-bar {
display: flex;
flex-direction: column;
gap: .45em;
align-items: stretch;
background: var(--panel);
border-radius: 12px;
padding: .5em .8em;
width: min(760px, 96%);
z-index: 6;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.raise-pct-row { display: flex; gap: .4em; width: 100%; justify-content: center; align-items: stretch; }
.pct-group {
display: flex; gap: 2px; padding: 2px; min-width: 0;
background: #15181f; border: 1px solid #3a3f4a; border-radius: 10px;
}
.pct-group.bb { flex: 2 1 0; border-color: rgba(224, 176, 76, .55); background: rgba(224, 176, 76, .08); }
.pct-group.pot { flex: 4 1 0; }
.action-bar .pct-btn {
flex: 1 1 0; min-width: 0; margin: 0;
padding: .28em .4em; font-size: .8em; font-weight: 700; line-height: 1.15;
font-variant-numeric: tabular-nums; white-space: nowrap;
background: transparent; color: var(--text); border-radius: 8px; box-shadow: none;
}
.pct-group.bb .pct-btn { color: var(--gold); }
.action-bar .pct-btn.on { background: rgba(224, 176, 76, .24); color: var(--gold); }
.pct-group.pot .pct-btn.on { background: #2c3342; color: var(--text); }
.action-bar .pct-btn:disabled { opacity: .35; }
.action-row {
display: flex;
flex-wrap: wrap; /* was nowrap + a scrollbar (Edge on Windows drew it under the buttons): when it does not fit, the raise button goes to a second line */
align-items: center;
justify-content: center;
gap: .5em;
width: 100%;
min-width: 0;
overflow-x: visible;
}
.allin-row { display: flex; justify-content: center; width: 100%; }
/* Buttons never squeeze: when the row ran out of room (a big call amount, a tall chip preview) they shrank,
the label wrapped onto a second line and the buttons grew taller. The slider and the preview give way instead. */
.action-row button { flex: 0 0 auto; white-space: nowrap; }
/* Fixed boxes for what changes while the bet is dragged — the chip preview (six piles at most: 6 x 15 px + gaps)
and the "Рейз до N" button — so the slider between them doesn't change width with every chip. The amount isn't
repeated in the preview: the number box has it. */
.action-row #raisePreview { flex: 0 0 132px; width: 132px; display: flex; align-items: center; justify-content: flex-start; overflow: visible; }
.action-row #raisePreview .chip-stack { gap: 2px; }
/* Four modern piles occupy 102px, leaving room for their shadows inside the 108px preview. */
.action-row #raisePreview .piles2.raise { --d: 24px; gap: 2px; }
@media (min-width: 861px) { .action-row #raiseBtn { min-width: 11.5em; } }
@media (min-width: 861px) and (max-width: 1100px) { .action-row { flex-wrap: wrap; overflow-x: visible; } } /* the journal narrows the bar here: wrap, never hide the raise button */
@media (max-width: 1100px) { .action-row #raisePreview { display: none; } } /* a narrow window has no room for it next to the slider */
/* A slider is its own track: the page-wide input padding/border made the draggable track ~35% shorter than
the drawn control, so the thumb and the blue fill ran ahead of the mouse. */
input[type=range] { padding: 0; border: 0; background: transparent; margin: 0; height: 24px; box-shadow: none; cursor: pointer; }
.action-bar input[type=range] { flex: 1 1 64px; min-width: 64px; }
.action-bar [data-act="allin"] { flex: 0 0 auto; }
.action-bar .amount {
width: 4.6em;
text-align: center;
color: var(--gold);
font-weight: 700;
background: var(--panel2);
border: 1px solid #3a3f4a;
border-radius: 6px;
padding: .3em .2em;
}
.hint-line { color: var(--muted); text-align: center; }
.table-tools {
display: flex;
flex-direction: column;
align-items: center;
gap: .2em;
width: min(780px, 96%);
margin: .2em auto 0;
padding-top: .45em;
flex-shrink: 0;
overflow: visible;
position: relative;
z-index: 8;
}
.preact-bar {
display: flex;
flex-wrap: wrap;
gap: .6em 1em;
justify-content: center;
width: 100%;
}
.preact-btn {
color: var(--muted);
font-size: .9em;
font-weight: 600;
cursor: pointer;
margin: 0;
background: var(--panel);
border: 1px solid #3a3f4a;
border-radius: 8px;
padding: .4em .8em;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.preact-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.log-panel {
width: 100%;
/* Belt-and-suspenders: a burst of log lines (e.g. an offline seat's action clock repeatedly
firing) should never be able to grow this past its flex share (see the flex:1 1 42% rule
below) — this is the actual hard ceiling that guarantees it, on top of that. */
max-height: 60vh;
overflow-y: auto;
background: var(--panel);
border-radius: 10px;
padding: .6em 1em;
font-size: .9em;
color: var(--muted);
box-sizing: border-box;
}
.log-panel div { padding: .1em 0; }
/* Shrunk-down copies of the same table cards (see logCardsHtml() in main.js) — the board first,
then each winner's hole cards grouped in their own little cluster. */
.log-cards { display: flex; flex-wrap: wrap; align-items: center; gap: .15em; margin: .25em 0 .5em; }
.log-cards .playing-card {
width: 34px;
height: 47px;
font-size: .78em;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.log-cards { flex-direction: column; align-items: flex-start; gap: 4px; }
.log-board { display: flex; flex-wrap: nowrap; gap: .15em; }
.log-hand { display: flex; align-items: center; gap: .5em; padding: 2px 0 2px .5em; border-left: 2px solid var(--gold); }
.log-hand-name { color: var(--text, #e8e8e8); font-weight: 600; font-size: .9em; min-width: 3.5em; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-hand-cards { display: inline-flex; gap: .1em; }
.log-panel .log-line.log-win { margin-top: .5em; padding-top: .45em; border-top: 1px solid #2c313b; }
.log-panel .log-line.log-win:first-of-type { border-top: 0; margin-top: 0; }
.outs-row .log-cards { flex-direction: row; }
/* Chat sits right under the log in the same sidebar column — same card look, its own scroll box
so a burst of messages doesn't push the log (or the input) out of view. */
.chat-panel {
width: 100%;
background: var(--panel);
border-radius: 10px;
padding: .6em 1em;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.chat-panel h3, .log-panel h3 { margin: 0 0 .4em; font-size: .9em; color: var(--text); }
.chat-log {
flex: 1;
min-height: 80px;
max-height: none;
overflow-y: auto;
font-size: .9em;
}
.chat-line { padding: .15em 0; overflow-wrap: anywhere; }
.chat-line b { color: var(--accent); font-weight: 600; }
.chat-input-row { display: flex; gap: .4em; margin-top: .5em; }
.chat-input-row input { flex: 1; min-width: 0; }
.chat-input-row button { padding: .5em .8em; }
/* The sidebar column (log + chat stacked) is its own flex column so both can share the available
height next to the table, instead of two independently-sized boxes fighting for space. */
.sidebar-col {
width: 100%;
height: 100%;
max-height: none;
min-height: 0;
display: flex;
flex-direction: column;
/* Visibly separates the log from the chat below it — they used to sit right on top of each
other with only a thin 1em gap, easy to misread as one continuous block. */
gap: 1.2em;
overflow: hidden;
}
/* Pushes the chat panel down to the bottom of the sidebar column instead of sitting right under
the log — .chat-panel's own flex:1 (see below) still lets it grow to fill whatever's left. */
.log-panel { flex: 1 1 42%; min-height: 0; }
@media (max-width: 860px) {
/* Scrolls as one column on a phone: with overflow hidden the chat panel got squeezed to ~30px and
its input landed below the clipped edge — the chat could be neither read nor typed into. */
.sidebar-col { max-height: none; height: 100%; overflow-y: auto; }
.log-panel { max-height: 120px; flex: none; }
.chat-panel { flex: none; }
.chat-log { max-height: 160px; }
}
/* --- emoji reactions --- */
.emoji-bar {
display: flex;
flex-wrap: nowrap;
gap: .15em;
justify-content: center;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
/* Belt-and-suspenders against a Chromium build (some Yandex Browser releases included) that
doesn't fully honor scrollbar-width/::-webkit-scrollbar's `display:none` and still reserves
the native scrollbar's track height: push it past the bottom edge with a negative margin, then
clip it off with the padding-matched wrapper's own overflow — the bar itself never grows. */
padding-bottom: 17px;
margin-bottom: -17px;
}
.emoji-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.emoji-btn {
background: var(--panel2);
border-radius: 8px;
padding: .1em .28em;
font-size: 1.15em;
line-height: 1;
flex-shrink: 0;
}
.emoji-btn:hover { background: var(--accent); }
.emoji-btn img { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: middle; }
/* --- sticker reactions (image/video, some with a voice line heard by everyone — see poker:sticker) --- */
.sticker-bar {
display: flex; flex-wrap: nowrap; gap: .3em; justify-content: center;
width: 100%; overflow-x: auto; margin-top: .3em;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 17px; /* see .emoji-bar's comment on this fallback */
margin-bottom: -17px;
}
.sticker-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sticker-btn {
background: var(--panel2); border-radius: 8px; padding: .2em; flex-shrink: 0;
width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden;
}
.sticker-btn:hover { background: var(--accent); }
.sticker-btn:disabled,
.sticker-btn.busy { opacity: .4; cursor: default; pointer-events: none; }
.sticker-btn img, .sticker-btn video { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; background: transparent; }
.sticker-thumb { position: relative; display: block; width: 100%; height: 100%; }
.sticker-btn.captioned { width: 62px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .25em .2em .3em; }
.sticker-btn.captioned .sticker-thumb { width: 40px; height: 40px; }
.sticker-caption { font-size: 9.5px; line-height: 1.1; color: var(--text); text-align: center; max-width: 100%;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sticker-sound { position: absolute; right: -4px; bottom: -3px; font-size: 10px; font-style: normal; line-height: 1;
background: rgba(0, 0, 0, .7); border-radius: 6px; padding: 1px 2px; pointer-events: none; }
/* --- reaction packs: one button per pack (emoji, or a themed sticker group), opening a panel of
its individual items below the row instead of always showing every item at once. --- */
.pack-picker { position: relative; width: 100%; display: flex; justify-content: center; }
.pack-row {
display: flex; flex-wrap: nowrap; gap: .3em; justify-content: center;
width: 100%; overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pack-row::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pack-btn {
background: var(--panel2); border-radius: 8px; padding: .2em; flex-shrink: 0;
width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden;
border: 2px solid transparent;
}
.pack-btn:hover { background: var(--accent); }
.pack-btn.active { border-color: var(--accent); }
.pack-btn img, .pack-btn video { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.pack-emoji-icon { font-size: 1.4em; line-height: 1; }
/* A Lottie animated emoji: the box is sized like the glyph it replaces (same em), the SVG fills it. */
.emoji-anim { display: inline-block; width: 1.2em; height: 1.2em; line-height: 1.2em; vertical-align: middle; text-align: center; }
.emoji-anim svg { display: block; width: 100% !important; height: 100% !important; }
.pack-panel {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
width: max-content;
max-width: min(420px, 94vw);
max-height: min(240px, 36vh);
display: flex;
flex-direction: column;
gap: .35em;
background: var(--panel);
border: 1px solid #3a3f4a;
border-radius: 12px;
padding: .55em .65em .65em;
box-sizing: border-box;
box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
z-index: 12;
}
.pack-panel::after {
content: '';
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: var(--panel);
}
.pack-panel-title {
font-size: .78em;
font-weight: 700;
color: var(--muted);
text-align: left;
padding: 0 .15em .1em;
}
.pack-panel-items {
display: flex;
flex-wrap: wrap;
gap: .3em;
justify-content: flex-start;
overflow-y: auto;
min-height: 0;
}
/* Voiced packs share one face — keep every sticker on a single row so the captions stay
* readable as a strip. Narrow screens scroll sideways instead of wrapping. Papich and
* Mellstroy wrap into two equal rows instead. */
.pack-panel.sticker-pack {
max-width: min(580px, 96vw);
}
.pack-panel.sticker-pack .pack-panel-items {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.pack-panel.sticker-pack .pack-panel-items::-webkit-scrollbar { display: none; }
.pack-panel.pack-papich {
max-width: min(360px, 96vw);
max-height: none;
}
.pack-panel.pack-papich .pack-panel-items {
flex-wrap: wrap;
overflow: visible;
justify-content: center;
}
.pack-panel.pack-mellstroy,
.pack-panel.pack-tinkoff {
max-width: min(420px, 96vw);
max-height: none;
}
.pack-panel.pack-mellstroy .pack-panel-items,
.pack-panel.pack-tinkoff .pack-panel-items {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
justify-content: center;
justify-items: center;
overflow: visible;
flex-wrap: unset;
}
/* A big reaction floating above the sender's seat, visible to the whole table — see
poker:emoji/S.reactions. Deliberately much larger than the hole cards so it reads at a glance. */
.seat-reaction {
position: absolute;
left: 0;
right: 0;
width: 100%;
display: flex;
justify-content: center;
bottom: 100%;
font-size: 2.6em;
line-height: 1;
z-index: 11;
pointer-events: none;
animation: reactionPop 2.4s ease-out forwards;
filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
transform-origin: 50% 100%;
}
/* height-based, not a fixed square: a wide source (e.g. a landscape GIF) was getting squeezed down
to a fraction of the intended size inside a 1em x 1em box via object-fit — letting width follow
the source's own aspect ratio keeps every reaction visually the same height regardless of shape. */
.seat-reaction img, .seat-reaction video { height: 1.3em; width: auto; max-width: 3em; }
/* Stickers (a picture/clip, not an emoji glyph) pop at twice the size so they're actually readable. */
.seat-reaction.sticker img, .seat-reaction.sticker video { height: 2.6em; max-width: 6em; background: transparent; }
/* A seat in the table's top half (see the .seat-top class, set from the seat's own computed y
offset) has little to no room above it before running off the visible table/viewport — floating
the reaction there the same way as every other seat made it "поплохо видно"/cut off at the top
edge. Flip it to float below the seat instead for exactly those seats. */
.seat-top .seat-reaction { bottom: auto; top: 100%; transform-origin: 50% 0; }
@keyframes reactionPop {
0% { opacity: 0; transform: scale(.3) translateY(10px); }
12% { opacity: 1; transform: scale(1.15) translateY(-6px); }
22% { transform: scale(1) translateY(0); }
85% { opacity: 1; }
100% { opacity: 0; transform: scale(.9) translateY(-14px); }
}
/* Sits just under the community cards (the overlay is a child of .pot-area, so top:100% is
the bottom of the board). Used to be flex-end on the whole oval, which parked the plaque on
the hero's hole cards. Absolute so it doesn't grow .pot-area and shift the board. */
.result-overlay {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 12.25em; /* the pot's width follows its content: at 9 players it is narrower and «Leoj — 1800» wrapped onto two lines */
margin-top: .35em;
z-index: 6;
pointer-events: none;
}
/* The overlay lives inside .pot-area (z-index 3). A hero seat is z-index 5, so on a desktop oval
the hole cards at the bottom of the table painted over the plaque — including "Показать свои
карты". Lifting the whole pot cluster above the hero while the plaque is up keeps the button
clickable without clipping. Above the D/SB/BB badges (9) too; sticker reactions (11) stay on top. */
.table-oval:has(.result-overlay) .pot-area { z-index: 10; }
.result-banner {
background: linear-gradient(180deg, rgba(20,22,26,.94), rgba(20,22,26,.88));
border: 2px solid var(--gold);
border-radius: 14px;
padding: .55em .8em;
width: 100%;
box-sizing: border-box;
text-align: center;
box-shadow: 0 0 30px rgba(0,0,0,.6), 0 0 22px rgba(224,176,76,.35);
animation: resultPulse .9s ease-out;
pointer-events: auto;
}
.result-banner .winner-line {
font-size: 1.5em;
font-weight: 800;
color: var(--gold);
text-shadow: 0 0 10px rgba(224,176,76,.6);
}
.result-banner .sub-line { font-size: .95em; color: var(--text); margin-top: .2em; }
@keyframes resultPulse {
0% { transform: scale(.85); box-shadow: 0 0 0 rgba(224,176,76,0); }
40% { transform: scale(1.04); }
100% { transform: scale(1); box-shadow: 0 0 22px rgba(224,176,76,.35); }
}
.toasts, #toasts {
position: fixed;
top: 1em;
right: 1em;
display: flex;
flex-direction: column;
gap: .5em;
z-index: 500; /* above every window, the Academy's too (80) */
pointer-events: none;
}
.toast {
background: var(--panel2);
border-radius: 8px;
padding: .6em 1em;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
max-width: min(22em, 90vw);
}
.toast.error { background: var(--danger); }
.toast.success { background: linear-gradient(135deg, #3a2f10, var(--panel2)); border: 1px solid var(--gold); }
.error-text { color: #ff8a80; }
/* Phone widths: seats at their desktop size (150px) crowd into each other around a narrow oval —
shrink the seat card, its text and the cards so a full ring of players actually fits on screen
without overlapping (their *positions* already rescale via applyTableLayout() in main.js; this
just keeps their on-screen footprint small enough to fit those tighter positions). Placed last
in the file on purpose — same specificity as the base `.seat` etc. rules above, so it must come
after them in source order to actually win the cascade. */
@media (max-width: 480px) {
.table-oval { width: min(1200px, 96%); max-height: 90%; margin: 0; }
/* Shrunk another ~15% from the previous defaults (84px seat / 30x42 card) per direct feedback
that both the seats and the hole cards read as too big on a phone, crowding the table and
leaving less room to actually see what's happening. */
.seat { width: 72px; }
/* The desktop 126px floor (two-line name + full-size cards) leaves a tall empty tail under the
smaller phone cards, and that tail is what the hero's own bet lands on. Hug the content;
9- and 12-handed tables keep their own shorter floors below. */
.seat .seat-card { padding: .25em .3em; border-width: 1px; min-height: 0; }
.seat-face, .seat-avatar-wrap, .seat-avatar { width: 19px; height: 19px; }
.seat-face .champ-crown { font-size: 11px; }
.seat-avatar.placeholder { font-size: .58em; }
.seat .name { font-size: .6em; }
.seat .stack { font-size: .56em; }
.seat .dealer-btn, .seat .blind-btn { width: 14px; height: 14px; font-size: .5em; }
.seat:has(> .dealer-btn) > .blind-btn { left: calc(-6px + 14px + 2px + var(--bx, 0px)); }
.seat .rebuys { height: 14px; min-width: 14px; padding: 0 .25em; font-size: .5em; }
.hand-preview { font-size: .52em; padding: .05em .3em; }
.playing-card { width: 26px; height: 36px; font-size: .65em; }
.playing-card.big { width: 34px; height: 48px; font-size: .82em; }
/* On a phone, more players needs to shrink further still. Desktop no longer shrinks 9–12. */
.table-oval.crowd-9 .seat { width: 58px; }
.table-oval.crowd-9 .seat .seat-card { padding: .2em .25em; }
.table-oval.crowd-9 .seat .name { font-size: .52em; }
.table-oval.crowd-9 .seat .stack { font-size: .48em; }
.table-oval.crowd-9 .seat-face, .table-oval.crowd-9 .seat-avatar-wrap, .table-oval.crowd-9 .seat-avatar { width: 15px; height: 15px; }
.table-oval.crowd-9 .seat-face .champ-crown { font-size: 10px; }
.table-oval.crowd-9 .playing-card { width: 20px; height: 28px; font-size: .58em; }
.table-oval.crowd-9 .playing-card.big { width: 25px; height: 35px; font-size: .67em; }
.table-oval.crowd-11 .seat { width: 50px; }
.table-oval.crowd-11 .seat .seat-card { padding: .15em .2em; }
.table-oval.crowd-11 .seat .name { font-size: .46em; }
.table-oval.crowd-11 .seat .stack { font-size: .43em; }
.table-oval.crowd-11 .seat-face, .table-oval.crowd-11 .seat-avatar-wrap, .table-oval.crowd-11 .seat-avatar { width: 13px; height: 13px; }
.table-oval.crowd-11 .seat-face .champ-crown { font-size: 9px; }
.table-oval.crowd-11 .playing-card { width: 17px; height: 24px; font-size: .5em; }
.table-oval.crowd-11 .playing-card.big { width: 21px; height: 30px; font-size: .56em; }
.table-oval.crowd-11 .seat .dealer-btn, .table-oval.crowd-11 .seat .blind-btn { width: 10px; height: 10px; font-size: .4em; }
.table-oval.crowd-11 .seat:has(> .dealer-btn) > .blind-btn { left: calc(-6px + 10px + 2px + var(--bx, 0px)); }
.table-oval.crowd-11 .seat .rebuys { height: 10px; min-width: 10px; font-size: .4em; }
/* The desktop 108px floor (see .seat .seat-card) is taller than a crowded phone table has room
for — 9-12 seats around a ~360px oval stacked into each other on the curved ends. */
.table-oval.crowd-9 .seat .seat-card { min-height: 72px; }
.table-oval.crowd-11 .seat .seat-card { min-height: 62px; }
.table-oval.crowd-9 .hand-preview, .table-oval.crowd-11 .hand-preview { font-size: .45em; }
.chip-pile.mini { width: 11px; height: 15px; }
.chip.mini { width: 11px; height: 11px; }
.chip-pile.tower-pile { width: 11px; height: calc(10px + (var(--tower-h, 1) - 1) * 2.4px); }
.chip-pile.tower-pile .chip.mini { width: 10px; height: 10px; margin-left: -5px; bottom: calc(var(--i, 0) * 2.4px); }
.chip-stack.bankroll.piles { gap: 1px; padding: 2px 1px; }
.emoji-btn { font-size: 1.15em; padding: .15em .3em; }
.seat-reaction { font-size: 1.9em; }
.seat-reaction.sticker img, .seat-reaction.sticker video { height: .65em; max-width: 1.5em; } /* on a phone stickers stay small: bigger ones covered the pot and your own cards */
.seat-cam { width: 36px; height: 36px; border-width: 2px; }
.seat-chip .chip-amt { font-size: .6em; padding: 0 .35em; } /* bet amounts next to the seats were oversized on a phone */
.result-banner { padding: .6em .8em; }
.result-banner .winner-line { font-size: 1.15em; }
.result-banner .sub-line { font-size: .8em; }
/* The header never wrapped or scrolled — on a narrow phone its items (title, table info, leave
button, the Monopoly link, volume, profile/username/logout) add up to way more than the
viewport width, and with nothing to shrink further or wrap onto, everything past a certain
point (the leave button included — see the "Встать" report) just renders past the right edge,
unreachable by any scroll. Force a two-line header instead of letting content run off. The
`.grow` spacer, given a full-width 0-height flex-basis here, is what forces the actual line
break: everything before it (title/table meta/leave) ends up on line 1, everything after
(Monopoly link onward) on line 2, each side then free to wrap further/shrink within its own line. */
.top { flex-wrap: wrap; row-gap: .35em; padding: .5em .6em; }
.top h1 { font-size: 1em; }
.table-meta { font-size: .74em; }
.hdr-name { max-width: 110px; }
/* Same root cause as the header above, on a smaller scale: no side padding meant the first/last
button in the horizontally-scrolled row sat flush against the viewport edge, so it read as
"half eaten by the screen" even though scrolling could technically reach it. */
.emoji-bar, .sticker-bar, .pack-row {
justify-content: flex-start;
justify-content: safe center;
padding-inline: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
scroll-padding-inline: 12px;
gap: .18em;
box-sizing: border-box;
}
.pack-btn { width: 32px; height: 32px; padding: .12em; }
.pack-emoji-icon { font-size: 1.15em; }
.sticker-btn { width: 32px; height: 32px; }
.sticker-btn.captioned { width: 48px; padding: .15em .12em .2em; }
.sticker-btn.captioned .sticker-thumb { width: 32px; height: 32px; }
.table-tools { width: 100%; padding-top: .25em; }
/* The pre-act row only shows while it's someone else's turn, when the action slot below holds
just a "Ход: …" line — so overlay the slot's empty top instead of reserving another ~31px
row, which was exactly what pushed "Ва-банк" off a short phone screen on your own turn. */
.preact-bar { position: absolute; top: 100%; left: 0; right: 0; }
.pack-panel { max-width: calc(100vw - 16px); }
.pack-panel.sticker-pack .pack-panel-items {
justify-content: flex-start;
padding-inline: 8px;
}
.pack-panel.pack-papich { max-width: min(360px, calc(100vw - 16px)); }
.pack-panel.pack-papich .pack-panel-items {
justify-content: center;
padding-inline: 0;
}
.pack-panel.pack-mellstroy,
.pack-panel.pack-tinkoff { max-width: min(420px, calc(100vw - 16px)); }
.pack-panel.pack-mellstroy .pack-panel-items,
.pack-panel.pack-tinkoff .pack-panel-items {
grid-template-columns: repeat(6, minmax(0, 1fr));
padding-inline: 0;
}
/* The header above only stops content running off-screen — it still wraps into 5 separate rows at
the table (title / table-meta+leave / "В Монополию"+volume+avatar / username+"Сменить имя"),
eating ~450px before the table even starts. On a phone the table itself is what actually needs
that space: with so little left, applyTableLayout()'s own shrink-to-fit logic has to squash the
oval down to near-zero height, and at that point two seats on opposite sides of the stadium (top
and bottom) land almost exactly on top of each other instead of at opposite ends — the "table
looks like a pile of overlapping cards" report. Collapse the in-game header to two tight rows
instead of four, and drop what a player mid-hand doesn't need at all (their own name — they
know who they are; "Сменить имя" — not a mid-game action). */
body.ingame .top { padding: .35em .5em; gap: .3em; row-gap: .25em; }
body.ingame .top h1 { font-size: .85em; }
body.ingame .table-meta { font-size: .68em; }
body.ingame .top > button,
body.ingame .top .hdr-menu-btn { font-size: .78em; padding: .3em .55em; }
body.ingame .top .hdr-name,
body.ingame .top .hdr-caret { display: none; } /* just the avatar — the player knows who they are */
body.ingame .volume-ctl .vol-track { width: 46px; }
body.ingame .hdr-profile { padding: .2em; }
/* Give the table itself a real floor: without this, every stacked sibling above/below it (header,
emoji/sticker bars, action bar, journal, chat) claims whatever height it wants first and the
oval — the only flexible element — gets whatever's left, which on a short viewport can be next
to nothing. 44svh guarantees the stadium (and therefore the seats) always has enough room to
lay out without collapsing into itself. */
.table-stage { min-height: 44svh; padding-top: 1.8em; padding-bottom: 1.6em; }
/* The chip-denomination key floats at the very top of .table-stage, which is exactly where a
top-seated player's card now sits once the stage actually has real height — it's purely
informational (every chip already shows its own value), so it's the one thing worth just
dropping on a phone rather than fighting the top seat for the same few pixels. */
.chip-legend { display: none; }
/* The raise row's chip-stack preview repeats the number already in the amount box next to it;
dropping it lets amount + "Рейз до" + "Ва-банк" share one row instead of wrapping to a fourth. */
.action-bar #raisePreview { display: none; }
.action-slot { min-height: 128px; } /* the raise bar's real height: a shorter reserve made the stage (and the table) shrink on your turn */
.action-bar {
width: 100%;
max-width: 100%;
box-sizing: border-box;
gap: .28em;
padding: .35em max(10px, env(safe-area-inset-right, 0px)) .35em max(10px, env(safe-area-inset-left, 0px));
border-radius: 10px;
}
.raise-pct-row { gap: .22em; width: 100%; }
.action-bar .pct-btn { padding: .34em .08em; font-size: .74em; }
.action-row {
gap: .28em;
justify-content: flex-start;
justify-content: safe center;
padding-inline: 2px;
}
.action-bar button { padding: .38em .55em; font-size: .84em; }
.action-bar .amount { width: 3.5em; padding: .22em .1em; font-size: .9em; }
.action-bar input[type=range] { flex: 1 1 56px; min-width: 48px; }
/* The pot was sized for desktop — on a phone its label and 32px chips took up most of the felt
between the seats and sat under/over the opposite seat's cards. */
.pot-amount { padding: .15em .6em; font-size: .72em; border-radius: 14px; }
.blinds-banner { font-size: .72em; padding: .28em .65em; }
.chip-pile.pot { width: 20px; height: 27px; }
.chip.pot { width: 20px; height: 20px; bottom: calc(var(--i, 0) * 4px); }
/* With the 44svh table floor above, a short phone (iPhone SE, or any phone with browser toolbars
showing) couldn't fit the whole raise bar: "Ва-банк" sat below the screen edge with no way to
scroll to it. Letting this column scroll is the safety net for those sizes only — on a normal
phone everything already fits and nothing scrolls. */
.table-wrap { overflow-y: auto; }
/* The desktop oval is very flat (2.15:1) because a wide screen has width to spare and seats ring
the whole rim; on a narrow phone that same flatness puts the top/bottom seats (where 2-4
players always land) right on top of the pot in the middle, since there's barely any vertical
radius between "edge of stage" and "center". A rounder oval trades some width for real vertical
clearance around the pot — applyTableLayout()'s own shrink-to-fit pass still runs on top of this
for anything it still doesn't fit. */
.table-oval { aspect-ratio: 1.3 / 1; }
/* 9-12 seats need even more rim: a near-round table and a taller stage give the chairs on the
curved ends room to stack instead of sitting on top of each other. */
.table-oval.crowd-9, .table-oval.crowd-11 { aspect-ratio: 1.05 / 1; }
.table-stage:has(.table-oval.crowd-9), .table-stage:has(.table-oval.crowd-11) { min-height: 47svh; }
/* Own hole cards sit on the bottom of a short portrait oval and used to paint over the board
(hero z-index 5 vs pot 3). The community cards have to win that overlap — you can still
read your hand around/under the board, but the flop/turn/river stay in front. Landscape
hangs the hole cards below the felt instead (see the orientation block below). */
.seat[data-is-me="1"] > .seat-card { z-index: 2; }
.pot-area { z-index: 6; }
/* Same for the D/SB/BB badges: over the plaques, under the board. */
.seat .dealer-btn, .seat .blind-btn, .seat .rebuys { z-index: 5; }
}
/* Phone landscape is its own layout, not a squeezed portrait or a half-desktop. Width is plentiful
and height is the scarce axis (~360–430px on a typical iPhone), so: keep a single column (the
journal stays a thin toggle under the actions — a side column here stole table width for a panel
nobody has open mid-hand), flatten the oval so seats spread along the long sides instead of
stacking on the caps, and spend the extra width on one action row. Portrait overlap of your own
hole cards is a z-index issue (see .seat[data-is-me="1"]) and is not solved by rotating. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
.table-page {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto;
gap: .2em;
padding: .12em .35em .12em;
}
.table-page:has(.log-sidebar.collapsed) { grid-template-rows: minmax(0, 1fr) auto; }
.table-wrap { position: relative; gap: .15em; overflow: hidden; }
.table-stage {
min-height: 0;
padding-top: .25em;
/* Empty strip under the felt: own hole cards hang here so they don't sit on the board.
A Xiaomi landscape viewport is short (~320–360px); without this the 2.6:1 oval hit
max-height and CSS shrank its width, which is the "стол очень узкий" on a Note 13. */
padding-bottom: 3.1em;
overflow: visible;
}
.table-oval {
width: min(1200px, 97%);
aspect-ratio: 3.35 / 1;
max-height: 100%;
margin: 0;
--rim: 8px;
}
.seat .seat-card { overflow: visible; }
/* Name/stack stay on the rail; the two hole cards and the hand name drop below the oval. */
.seat[data-is-me="1"] .hole {
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
margin-top: 3px;
z-index: 2;
}
/* Beside the cards, not under them: the strip under the felt is only as tall as the cards. */
.seat[data-is-me="1"] .hand-preview {
position: absolute;
left: calc(100% + 4px);
top: calc(100% + 14px);
white-space: nowrap;
z-index: 2;
}
.chip-legend { display: none; }
.unit-toggle { top: .15em; left: .25em; font-size: .62em; }
.seat { width: 68px; }
.seat-cam { width: 32px; height: 32px; border-width: 2px; }
.seat .seat-card {
padding: .18em .22em;
border-width: 1px;
border-radius: 10px;
min-height: 0;
}
.seat-face, .seat-avatar-wrap, .seat-avatar { width: 16px; height: 16px; }
.seat-face .champ-crown { font-size: 10px; }
.seat-avatar.placeholder { font-size: .5em; }
.seat .name { font-size: .55em; }
.seat .stack { font-size: .5em; }
.seat .hole { margin-top: .2em; gap: .15em; }
.seat .dealer-btn, .seat .blind-btn { width: 12px; height: 12px; font-size: .42em; }
.seat:has(> .dealer-btn) > .blind-btn { left: calc(-6px + 12px + 2px + var(--bx, 0px)); }
.seat .rebuys { height: 12px; min-width: 12px; padding: 0 .2em; font-size: .42em; }
.seat-no { font-size: .5em; right: 4px; bottom: 3px; }
.hand-preview { font-size: .48em; padding: .02em .25em; }
.playing-card { width: 20px; height: 28px; font-size: .54em; }
.playing-card.big { width: 28px; height: 39px; font-size: .72em; }
.table-oval.crowd-9 .seat { width: 58px; }
.table-oval.crowd-9 .seat .name { font-size: .5em; }
.table-oval.crowd-9 .seat .stack { font-size: .46em; }
.table-oval.crowd-9 .playing-card { width: 17px; height: 24px; font-size: .48em; }
.table-oval.crowd-9 .playing-card.big { width: 26px; height: 36px; font-size: .66em; }
.table-oval.crowd-11 .seat { width: 52px; }
.table-oval.crowd-11 .seat .name { font-size: .46em; }
.table-oval.crowd-11 .seat .stack { font-size: .42em; }
.table-oval.crowd-11 .playing-card { width: 15px; height: 21px; font-size: .44em; }
.table-oval.crowd-11 .playing-card.big { width: 24px; height: 34px; font-size: .6em; }
.empty-chair { width: 32px; height: 32px; font-size: .8em; }
.empty-chair span { display: none; }
.chip-pile.mini { width: 10px; height: 13px; }
.chip.mini { width: 10px; height: 10px; }
.pot-area { top: 38%; }
.pot-amount { padding: .1em .5em; font-size: .68em; border-radius: 12px; }
.blinds-banner { font-size: .68em; padding: .22em .55em; }
.chip-pile.pot { width: 16px; height: 22px; }
.chip.pot { width: 16px; height: 16px; bottom: calc(var(--i, 0) * 3px); }
.community { gap: .25em; margin-top: .35em; }
.seat-reaction { font-size: 1.5em; }
.seat-reaction.sticker img, .seat-reaction.sticker video { height: .55em; max-width: 1.3em; }
.seat-chip .chip-amt { font-size: .55em; padding: 0 .3em; }
/* One tight header row — height is the budget, not width. */
body.ingame .top { padding: .18em .4em; gap: .3em; flex-wrap: nowrap; }
body.ingame .top h1 { font-size: .78em; }
body.ingame .table-meta {
font-size: .62em;
flex-wrap: nowrap;
overflow: hidden;
}
body.ingame .tm-chip { padding: .1em .4em; }
body.ingame .top > button,
body.ingame .top .hdr-menu-btn { font-size: .72em; padding: .2em .45em; }
body.ingame .top .hdr-name,
body.ingame .top .hdr-caret { display: none; }
body.ingame .volume-ctl .vol-track { width: 40px; }
body.ingame .hdr-profile { padding: .1em; }
/* Stickers/preact used to sit in the page flow under the oval and ate the height the table
needed. Park them as a vertical strip on the left of the felt instead. */
.table-tools {
position: absolute;
left: 4px;
top: 52%;
transform: translateY(-50%);
width: auto;
max-height: 62%;
overflow-y: auto;
margin: 0;
padding: 0;
gap: .25em;
align-items: flex-start;
z-index: 8;
scrollbar-width: none;
}
.table-tools::-webkit-scrollbar { display: none; }
.pack-row { flex-direction: column; width: auto; gap: .18em; }
.pack-btn { width: 26px; height: 26px; }
.pack-emoji-icon { font-size: 1.05em; }
.pack-panel {
left: calc(100% + 8px);
bottom: auto;
top: 50%;
transform: translateY(-50%);
max-height: min(220px, 70vh);
}
.pack-panel::after {
left: 0;
top: 50%;
transform: translate(-100%, -50%);
border: 7px solid transparent;
border-right-color: var(--panel);
border-top-color: transparent;
}
.preact-bar { flex-direction: column; width: auto; gap: .15em; }
.preact-btn { padding: .15em .4em; font-size: .65em; }
/* Width lets fold/call/raise sit on the same line as the pot-% chips; all-in stays its own
centred row underneath. Desktop/portrait keep the stacked 3-row bar. */
.action-slot { min-height: 52px; }
.action-bar {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .2em .35em;
padding: .22em .45em;
width: min(980px, 98%);
}
.raise-pct-row { width: auto; flex: 0 0 auto; max-width: none; }
.action-row { width: auto; flex: 1 1 120px; min-width: 0; }
.allin-row { flex: 0 0 auto; }
.action-bar #raisePreview { display: none; }
.action-bar button { padding: .32em .65em; }
.action-bar .pct-btn { flex: 0 0 auto; min-width: max-content; padding: .2em .45em; font-size: .72em; }
.raise-pct-row kbd.hk { display: none; }
.action-bar .amount { width: 3.8em; padding: .2em .15em; }
.hint-line { font-size: .8em; }
.log-toggle { padding: .28em; font-size: .85em; }
.log-sidebar.collapsed .hist-guide { display: none; }
.sidebar-col .hist-lessons { max-height: 7em; }
.result-banner { padding: .35em .55em; }
.result-banner .winner-line { font-size: 1.05em; }
.result-banner .sub-line { font-size: .72em; }
}
.profile-overlay {
position: fixed; inset: 0; z-index: 40;
background: rgba(10, 12, 18, .55);
display: grid; place-items: center; padding: 16px;
/* Without this, a tall achievements grid (24-28 badges) could overflow past the top/bottom of the
viewport with no way to reach the rest of it — place-items: center has no built-in scrolling. */
overflow-y: auto;
grid-template-columns: minmax(0, 1fr); /* the column is the screen, never what the content wants (a wide table) */
overflow-x: hidden; /* a phone's finger must not slide the whole window sideways */
overscroll-behavior: contain;
}
.profile-card {
background: var(--panel); border: 1px solid #3a3f4a; border-radius: 12px;
padding: 1.4em 1.6em 1.2em; width: min(560px, 100%); max-width: 100%; position: relative;
box-shadow: 0 8px 28px rgba(0,0,0,.45); text-align: center;
}
.profile-close { position: absolute; top: .5em; right: .5em; }
.profile-close:hover:not(:disabled) { background: #3a404c; color: #fff; filter: none; }
.profile-head {
display: flex;
flex-direction: column;
align-items: center;
gap: .45em;
margin-bottom: 1em;
}
.profile-avatar-wrap {
display: block;
position: relative;
width: 88px; height: 88px; flex-shrink: 0;
}
.profile-avatar {
width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--gold); display: block;
position: absolute; inset: 0;
}
.profile-avatar.placeholder {
display: grid; place-items: center; font-size: 2.4em;
background: var(--panel2); border-color: #3a3f4a; color: var(--gold);
}
.profile-avatar-hit {
padding: 0; border: 0; background: none; line-height: 0;
cursor: zoom-in; border-radius: 50%; min-height: 0;
}
.profile-avatar-hit:hover .profile-avatar { box-shadow: 0 0 0 3px var(--gold); }
.avatar-lightbox {
position: fixed; inset: 0; z-index: 80;
background: rgba(0, 0, 0, .82);
display: grid; place-items: center;
cursor: zoom-out; padding: 24px;
}
.avatar-lightbox img {
max-width: min(92vw, 720px); max-height: 92vh;
border-radius: 12px; object-fit: contain;
box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}
.cam-lightbox video {
width: min(72vw, 72vh);
height: min(72vw, 72vh);
max-width: 560px;
max-height: 560px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(224, 176, 76, .75);
box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
background: #111;
}
.cam-lightbox video.local { transform: scaleX(-1); }
.hdr-profile { display: inline-flex; align-items: center; gap: .4em; }
.hdr-avatar-wrap { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.hdr-avatar {
width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
border: 1px solid #3a3f4a; display: block;
position: absolute; inset: 0;
}
.hdr-avatar.placeholder {
display: grid; place-items: center; font-size: .7em; font-weight: 700;
background: var(--panel2); color: var(--gold);
}
.profile-card h2 { margin: .2em 0 .6em; }
.avatar-upload {
display: inline-block; cursor: pointer; color: var(--accent);
font-size: .85em; margin-bottom: .8em; text-decoration: underline;
}
.default-avatars {
display: flex; flex-wrap: wrap; justify-content: center; gap: .4em;
margin-top: .5em;
}
.default-avatar {
width: 34px; height: 34px; border-radius: 50%; font-size: 1.1em;
border: 1px solid #3a3f4a; cursor: pointer; display: grid; place-items: center;
line-height: 1; padding: 0; transition: transform .1s ease, border-color .1s ease;
}
.default-avatar:hover { transform: scale(1.08); border-color: var(--gold); }
.fighter-picker { margin-top: .7em; }
.fighter-picker-label { font-size: .8em; color: var(--muted); margin-bottom: .35em; }
.fighter-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; }
.fighter-btn {
width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
border: 1px solid #3a3f4a; cursor: pointer; display: grid; place-items: center;
line-height: 1; padding: 0; background: var(--panel2); transition: transform .1s ease, border-color .1s ease;
}
.fighter-btn:hover { transform: scale(1.08); border-color: var(--gold); }
.fighter-btn.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224,176,76,.35); }
/* Shared by both the fighter picker (small, in a .fighter-btn) and the duel overlay (large, in
.duel-fighter) — see main.js's fighterIconHtml. The emoji fallback is what's actually visible by
default; the ![]()
only takes over once it's confirmed to have loaded (see the 'load' listener),
so a fighter with no .gif dropped into public/img/fighters/ never shows a broken-image icon. */
.fighter-icon-wrap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.fighter-icon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fighter-icon-emoji { font-size: 1.3em; line-height: 1; }
.fighter-icon-emoji.fighter-emoji-fallback-hidden { display: none; }
.profile-stats { display: grid; gap: .35em; text-align: left; margin: 0; }
.profile-stats > div { display: flex; justify-content: space-between; gap: 1em; font-size: .92em; }
.profile-stats dt { color: var(--muted); }
.profile-stats dd { margin: 0; font-weight: 600; color: var(--gold); }
.profile-stats b { color: var(--gold); }
/* Title ladder + achievement showcase under the name, and sectioned stats (same layout as Monopoly's). */
.profile-title { font-size: .9em; font-weight: 700; color: var(--gold); }
.title-progress { width: min(260px, 100%); display: grid; gap: .2em; text-align: center; }
.title-progress-bar { height: 6px; border-radius: 3px; background: var(--panel2); border: 1px solid #3a3f4a; overflow: hidden; }
.title-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2ecc71, var(--gold)); }
.title-progress small { font-size: .72em; color: var(--muted); }
.ach-showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; }
.ach-showcase.empty { font-size: .78em; color: var(--muted); }
.showcase-badge {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 6px;
background: var(--panel2); border: 2px solid currentColor; box-sizing: border-box;
}
.showcase-badge svg { width: 100%; height: 100%; }
.showcase-badge:has(.ui-art) { padding: 3px; }
.showcase-badge.tier-easy { color: #cd7f32; }
.showcase-badge.tier-medium { color: #c0c0c0; }
.showcase-badge.tier-hard { color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, .45); }
.showcase-badge.tier-impossible { color: #e879f9; box-shadow: 0 0 12px rgba(232, 121, 249, .6); }
.profile-section { text-align: left; margin-top: .9em; }
.profile-section h4 { margin: 0 0 .4em; font-size: .75em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.profile-hero {
display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em;
margin-bottom: 1em;
}
.hero-stat {
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 10px;
padding: .6em .3em; text-align: center;
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
min-width: 0;
}
.hero-val {
font-size: 1.35em; font-weight: 700; color: var(--gold); line-height: 1.15;
min-height: 2.5em; /* two lines, so a wrapped style name and a one-line number share one band */
display: flex; align-items: center; justify-content: center; width: 100%;
font-variant-numeric: tabular-nums; text-align: center;
}
.hero-val.long { font-size: .98em; line-height: 1.15; min-height: calc(2.5em * 1.35 / 0.98); overflow-wrap: break-word; }
.hero-label { font-size: .68em; color: var(--muted); margin-top: .2em; line-height: 1.25; }
.hero-meter { height: 14px; display: flex; align-items: center; margin: .28em .2em 0; }
.hero-rank, .hero-zero {
position: relative; height: 6px; width: 100%; border-radius: 99px; background: #3e4554; overflow: hidden;
}
.hero-rank > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2ecc71, var(--gold)); }
.hero-zero::after {
content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
background: rgba(255, 255, 255, .72); z-index: 1;
}
.hero-zero > span { position: absolute; top: 0; height: 100%; }
.hero-zero > span.pos { left: 50%; background: var(--gold); }
.hero-zero > span.neg { right: 50%; background: #ff9a8f; }
.profile-tabs { display: flex; gap: .4em; margin-bottom: .9em; border-bottom: 1px solid #3a3f4a; }
.profile-tab {
flex: 1; background: none; border: none; color: var(--muted); cursor: pointer;
padding: .5em .4em; font-size: .85em; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.profile-tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }
.profile-tab { border-radius: 8px 8px 0 0; } /* a straight underline (the button's round corners bent it) */
.profile-tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, .05); border-bottom-color: #5a6170; filter: none; }
.ach-progress { color: var(--muted); font-size: .8em; text-align: center; margin-bottom: .7em; }
.ach-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .6em;
max-height: 46vh; overflow-y: auto; padding: .1em;
}
.ach-badge {
display: flex; flex-direction: column; align-items: center; gap: .15em;
padding: .5em .3em .4em; border-radius: 10px; border: 1px solid #3a3f4a;
background: var(--panel2); cursor: default;
}
.ach-icon { width: 34px; height: 34px; }
.ach-icon svg { width: 100%; height: 100%; }
.ui-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ach-icon .ui-art, .showcase-badge .ui-art { width: 100%; height: 100%; }
.ach-badge.unlocked .ach-icon .ui-art { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ach-name { font-size: .65em; font-weight: 600; text-align: center; line-height: 1.15; }
.ach-tier { font-size: .55em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ach-badge.locked { opacity: .55; color: #6b7280; }
.ach-badge.locked .ach-icon { filter: grayscale(1) brightness(.7); }
.ach-badge.unlocked { color: var(--gold); border-color: currentColor; box-shadow: 0 0 10px rgba(224,176,76,.25); }
.ach-badge.unlocked.tier-easy { color: #cd7f32; }
.ach-badge.unlocked.tier-medium { color: #c0c0c0; }
.ach-badge.unlocked.tier-hard { color: #ffd700; }
.ach-badge.unlocked.tier-impossible { color: #e879f9; box-shadow: 0 0 14px rgba(232, 121, 249, .5); }
.ach-badge.tier-impossible .ach-tier { color: #e879f9; }
.ach-badge.unlocked .ach-name { color: #f2f2f2; }
.fav-hand {
display: flex; align-items: center; gap: .8em; margin-bottom: 1em;
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 10px; padding: .6em .8em;
}
.fav-hand-cards { display: flex; gap: .3em; flex-shrink: 0; }
.fav-hand-info { text-align: left; }
.fav-hand-title { font-size: .78em; font-weight: 600; }
.fav-hand-stats { font-size: .72em; color: var(--muted); margin-top: .15em; }
.nemesis-card {
display: flex; flex-direction: column; gap: .3em; margin-bottom: 1em;
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 10px; padding: .6em .8em;
text-align: left; font-size: .85em;
}
.nemesis-row b { color: var(--gold); }
.hist-filter:not(.seg) { display: flex; gap: .4em; margin-bottom: .5em; }
.hist-filter .mini.active { background: var(--gold, #d4a93a); color: #1a1a1a; }
.hist-fav { font-size: 1.1em; line-height: 1; padding: .2em .45em; color: var(--muted); }
.hist-fav.on { color: #f5c542; }
.hist-list { display: flex; flex-direction: column; gap: .5em; max-height: 46vh; overflow-y: auto; padding: .1em; }
.hist-row {
display: flex; align-items: center; gap: .6em; padding: .5em .6em;
background: var(--panel2); border-radius: 8px; border-left: 3px solid transparent;
}
.hist-row.won { border-left-color: #3fae5c; }
.hist-row.lost { border-left-color: #b94a4a; }
.hist-cards, .hist-community { display: flex; gap: .2em; flex-shrink: 0; }
.hist-info { flex: 1; text-align: left; min-width: 0; }
.hist-amount { font-weight: 800; font-size: 1.05em; }
.hist-row.won .hist-amount { color: #4fce72; }
.hist-row.lost .hist-amount { color: #e07a7a; }
.hist-meta { font-size: .78em; color: var(--muted); margin-top: .15em; white-space: nowrap; }
/* Wide enough for a history row to stay on one line — hole cards, "+1234", the longest meta line
("старшая карта · соперников: 11"), the board and the replay button. On a phone the row wraps
instead (see .hist-row's flex-wrap). */
.profile-card.profile-main { width: min(720px, 100%); }
/* ---------- the profile (A+, profileModalHtml / pf* in main.js): the player's card on the left, tabs on the right ---------- */
.profile-card.pf-a { width: min(1080px, 100%); padding: 0; text-align: left; --pf-line: #343944; }
.pf-a .profile-close { /* square, centred on the tab row (it used to hang over the line under it) */
z-index: 2; top: 8px; right: 10px; width: 32px; height: 32px; min-height: 0; padding: 0;
display: grid; place-items: center; line-height: 1;
}
.pf-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.pf-side { padding: 18px; border-right: 1px solid var(--pf-line); }
.pf-sticky { position: sticky; top: 0; } /* the card stays in view while the right column scrolls (the overlay is the scroller) */
.pf-main { min-width: 0; }
.pf-a .profile-tabs { margin: 0; padding: 6px 48px 0 14px; }
.pf-a .profile-tab { flex: none; padding: .7em .8em; white-space: nowrap; }
.pf-body { padding: 16px 18px 20px; display: grid; gap: 16px; align-content: start; }
.pf-body > .levels-panel { margin: 0; }
.pf-h { margin: 0 0 8px; font-size: .75em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pf-h small, .pf-h .link-btn { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.15em; }
.pf-a .pos { color: #4cc38a; }
.pf-a .neg { color: #e5616b; }
/* the card */
.pf-plate {
position: relative; border-radius: 16px; padding: 18px 16px 16px; text-align: center;
background: radial-gradient(circle at 50% 0%, rgba(255, 207, 90, .22), transparent 60%), linear-gradient(160deg, #2a2418, #1d1b17);
border: 2px solid var(--gold); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .4);
}
.pf-lvl { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; }
.pf-lvl .lvl-ico, .pf-lvl .lvl-emoji { width: 100%; height: 100%; font-size: 30px; line-height: 46px; }
.pf-elo { position: absolute; top: 10px; right: 10px; display: block; width: 40px; height: 40px; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; }
.pf-elo .lvl-ico, .pf-elo .pf-rank-ico, .pf-elo .lvl-emoji { width: 40px; height: 40px; }
.lvl-ico.dim, .lvl-emoji.dim { opacity: .45; }
.pf-avwrap { position: relative; width: 132px; height: 132px; margin: 6px auto 10px; }
.pf-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-ring circle { fill: none; stroke-width: 5; }
.pf-ring .track { stroke: rgba(255, 255, 255, .08); }
.pf-ring .fill { stroke: #ffcf5a; stroke-linecap: round; }
.pf-avwrap .profile-avatar-hit { position: absolute; inset: 9px; }
.pf-avwrap .profile-avatar-wrap { position: absolute; inset: 9px; width: auto; height: auto; }
.pf-avwrap .profile-avatar-hit .profile-avatar-wrap { inset: 0; }
.pf-avwrap .profile-avatar { width: 100%; height: 100%; border: 0; }
.pf-avwrap .profile-avatar.placeholder { font-size: 3em; }
.pf-name { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
.pf-a .champ-line { font-size: .75em; color: var(--gold); margin-top: 2px; }
.pf-title { color: #ffcf5a; font-weight: 700; margin-top: 2px; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; font-size: 1em; }
.pf-next { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pf-style { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); text-align: left; }
.pf-style .pf-style-img { width: 46px; height: 46px; flex: none; }
.pf-style > div { flex: 1; min-width: 0; }
.pf-style b { display: block; }
.pf-style > div > span { font-size: 12px; color: var(--muted); }
.pf-bars { display: grid; gap: 5px; margin-top: 8px; }
.pf-bars > div { display: grid; grid-template-columns: 52px 1fr 42px; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.pf-bars .tr { position: relative; height: 6px; background: #2d323c; border-radius: 3px; }
.pf-bars .tr em { position: absolute; top: 0; bottom: 0; background: rgba(76, 195, 138, .3); border-radius: 3px; }
.pf-bars .tr i { position: absolute; top: -3px; width: 4px; height: 12px; border-radius: 2px; background: #ffcf5a; transform: translateX(-50%); }
.pf-bars b { text-align: right; color: var(--text); font-weight: 600; }
/* the favourite hand: its own row, two real cards in the viewer's card look, fanned, with the win share */
.pf-fav { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px 10px 8px; border-radius: 12px; text-align: left;
background: radial-gradient(circle at 18% 50%, rgba(255, 207, 90, .22), transparent 55%), rgba(0, 0, 0, .25); border: 1px solid rgba(255, 207, 90, .35); }
.pf-fav-cards { position: relative; flex: none; width: 84px; height: 72px; }
.pf-fav-cards .playing-card { position: absolute; top: 2px; width: 48px; height: 67px; font-size: 1.05em; box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 207, 90, .35); }
.pf-fav-cards .playing-card:first-child { left: 2px; transform: rotate(-9deg); }
.pf-fav-cards .playing-card:last-child { left: 33px; transform: rotate(8deg) translateY(2px); }
.pf-fav-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pf-fav-txt small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pf-fav-txt b { font-size: 22px; color: #ffcf5a; letter-spacing: .02em; }
.pf-fav-txt span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pf-fav-pct { flex: none; text-align: center; line-height: 1.1; }
.pf-fav-pct b { display: block; font-size: 20px; color: #4cc38a; }
.pf-fav-pct small { font-size: 11px; color: var(--muted); }
.pf-sig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pf-sig > * { padding: 8px 4px; border-radius: 10px; background: rgba(0, 0, 0, .25); text-align: center; font-size: 11px; color: var(--muted); border: 0; min-height: 0; line-height: 1.3; min-width: 0; }
.pf-sig b { display: block; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sig-btn { cursor: pointer; font: inherit; font-size: 11px; }
.pf-sig-btn:hover { background: rgba(255, 255, 255, .06); }
.pf-show { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; }
.pf-show > span { aspect-ratio: 1; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid currentColor; display: grid; place-items: center; padding: 4px; }
.pf-show .ui-art { width: 100%; height: 100%; }
.pf-show .tier-easy { color: #cd7f32; } .pf-show .tier-medium { color: #c0c0c0; }
.pf-show .tier-hard { color: #ffd700; } .pf-show .tier-impossible { color: #e879f9; }
.pf-show.empty { display: block; font-size: .78em; color: var(--muted); }
.pf-btns { display: flex; gap: 6px; margin-top: 14px; }
.pf-btns:empty { display: none; }
.pf-btns .mini { flex: 1; padding: 8px; }
.pf-side .profile-edit { margin-top: 12px; }
.pf-more { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--pf-line); display: grid; gap: 12px; }
.pf-more h4 { margin: 0 0 6px; font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pf-elo-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.pf-elo-line b { font-size: 16px; color: var(--text); }
.pf-elo-line b.pos { color: #7dcea0; }
.pf-elo-line b.neg { color: #e77980; }
.pf-form-block.down .pf-spark polyline { stroke: #e77980; }
.pf-elo-line em { font-style: normal; font-weight: 700; }
.pf-spark { display: block; width: 100%; height: 40px; margin-top: 4px; }
.pf-spark polyline { fill: none; stroke: #ffcf5a; stroke-width: 1.6; }
.pf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.1em, 1fr)); gap: 3px; }
.pf-form span { padding: 4px 1px; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; background: #2d323c; color: var(--muted); }
.pf-form span.pos { background: rgba(76, 195, 138, .18); color: #7dcea0; }
.pf-form span.neg { background: rgba(229, 97, 107, .16); color: #e77980; }
.pf-acad { display: flex; gap: 10px; align-items: center; text-align: left; padding: 0; border: 0; background: none; min-height: 0; color: inherit; font: inherit; }
button.pf-acad { cursor: pointer; }
.pf-acad img { width: 40px; height: 40px; flex: none; }
.pf-acad b { display: block; font-size: 13px; }
.pf-acad small { color: var(--muted); font-size: 11px; }
/* «Обзор» */
.pf-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-line { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--pf-line); }
.pf-line .pf-line-img { width: 34px; height: 34px; flex: none; }
.pf-line > div > b { display: block; font-size: 14px; }
.pf-line > div > span { color: var(--muted); font-size: 12px; }
.pf-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pf-kpi > div { position: relative; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); min-width: 0; }
.pf-kpi > div > b { display: block; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pf-kpi small { color: var(--muted); font-size: 12px; }
.pf-kpi .pf-of { color: var(--muted); font-size: 14px; font-weight: 400; }
.pf-kpi .info-btn { position: absolute; top: 8px; right: 8px; }
.pf-kpi .ic { width: 1em; height: 1em; vertical-align: -.1em; }
.pf-rec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-rec > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); min-width: 0; }
.pf-rec .pf-rec-img { width: 40px; height: 40px; flex: none; }
.pf-rec b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.pf-rec small { color: var(--muted); font-size: 12px; }
.pf-combo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* three a row: six in one squeezed the cards to ~95 px */
/* the cards are drawn on ivory: green felt under them, like the table */
.pf-combo > div { padding: 10px 6px 8px; border-radius: 12px; text-align: center; color: #f3efe2; background: radial-gradient(120% 90% at 50% 30%, #23744c, #124430 75%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 0 18px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35); min-width: 0; }
.pf-combo > div.zero { filter: grayscale(1) brightness(.6); }
.pf-combo .pf-combo-img { display: block; width: 100%; max-width: 200px; height: 74px; margin: 0 auto 6px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.pf-combo b { display: block; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-combo small { font-size: 11px; color: rgba(243, 239, 226, .75); white-space: nowrap; }
/* «Игра и стиль» */
.pf-body .lvl-note { font-size: .78em; margin: 0; line-height: 1.4; }
.pf-panel { padding: 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); min-width: 0; }
.pf-panel.lvl-graph { margin: 0; padding: 10px 12px 6px; }
.pf-web-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pf-web-acts .style-help-btn { margin-left: 0; font-size: .82em; padding: .4em .8em; border: 1px solid #3a404c; }
.pf-box .pf-h .ic { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.pf-panel .play-tips, .pf-panel .style-help { margin-top: 12px; }
.pf-web { display: flex; gap: 18px; align-items: center; }
.pf-radar { flex: none; overflow: visible; }
.pf-radar .ring { fill: none; stroke: #3a404c; }
.pf-radar .zone { fill: rgba(76, 195, 138, .16); stroke: rgba(76, 195, 138, .55); stroke-dasharray: 3 3; }
.pf-radar .hole { fill: var(--panel2); }
.pf-radar .me { fill: rgba(255, 207, 90, .25); stroke: #ffcf5a; stroke-width: 2; }
.pf-radar circle { fill: #ffcf5a; }
.pf-radar text { fill: #aab; font-size: 10px; }
.pf-legend { display: grid; gap: 8px; flex: 1; min-width: 0; font-size: 13px; }
.pf-leg { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.pf-leg > span { color: var(--muted); }
.pf-leg > b { font-variant-numeric: tabular-nums; }
.pf-leg.good > b { color: #4cc38a; } .pf-leg.ok > b { color: #e6c27a; } .pf-leg.bad > b { color: #e5616b; }
.pf-leg p { grid-column: 1 / -1; margin: 1px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pf-leg p i { font-style: normal; opacity: .75; }
.pf-leg p i:not(:first-child)::before { content: ' · '; }
.pf-legend .hint { font-size: 11px; }
.pf-pos { display: grid; gap: 8px; }
.pf-pos > div { display: grid; grid-template-columns: 150px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.pf-pos small { display: block; color: var(--muted); font-size: 11px; }
.pf-pos .tr { position: relative; height: 10px; background: #2d323c; border-radius: 5px; }
.pf-pos .tr::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #556; }
.pf-pos .tr i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: #4cc38a; }
.pf-pos .tr i.neg { background: #e5616b; }
.pf-pos b { text-align: right; font-variant-numeric: tabular-nums; }
.pf-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-box { padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); display: flex; flex-direction: column; min-width: 0; }
.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1; }
.pf-tiles > div { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pf-tiles small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.pf-tiles b { font-size: 16px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-luck { display: grid; grid-template-rows: 1fr auto; gap: 6px; flex: 1; }
.pf-luck .hero { position: relative; border-radius: 10px; background: rgba(0, 0, 0, .22); display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.pf-luck .hero .info-btn { position: absolute; top: 6px; right: 6px; }
.pf-luck .pf-luck-img { width: 56px; height: 56px; flex: none; }
.pf-luck .hero b { display: block; font-size: 28px; line-height: 1; }
.pf-luck .hero small { color: var(--muted); font-size: 12px; }
/* the list that evens the two columns */
.pf-fill { display: grid; gap: 4px; }
.pf-fill[hidden], .pf-row[hidden] { display: none; }
.pf-side .pf-fill { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--pf-line); }
.pf-fill .pf-h { margin-bottom: 4px; }
.pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--pf-line); font: inherit; font-size: 13px; color: inherit; text-align: left; width: 100%; box-sizing: border-box; min-height: 0; }
button.pf-row { cursor: pointer; }
button.pf-row:hover { border-color: #4a5160; }
.pf-side .pf-row { background: rgba(255, 255, 255, .03); }
.pf-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-what small { color: var(--muted); margin-left: 6px; }
.pf-row > b { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-play { color: var(--muted); text-align: center; }
.pf-row.ach { grid-template-columns: 26px minmax(0, 1fr) auto; }
.pf-ach { width: 26px; height: 26px; }
.pf-date { color: var(--muted); font-size: 11px; }
.pf-a .hist-meta { overflow: hidden; text-overflow: ellipsis; } /* the right column is a little narrower than the old window */
/* «Достижения» */
.pf-ach-sum { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--pf-line); flex-wrap: wrap; }
.pf-ach-total { flex: 1 1 220px; min-width: 0; }
.pf-ach-total > b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-ach-total > b small { font-size: 16px; color: var(--muted); font-weight: 600; }
.pf-ach-total > span { margin-left: 8px; color: var(--muted); font-size: 13px; }
.pf-ach-bar { height: 8px; margin-top: 10px; border-radius: 4px; background: #2d323c; overflow: hidden; }
.pf-ach-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #cd7f32, #ffd700); }
.pf-ach-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-ach-chip { --t: #8a909c; display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--t) 45%, transparent); background: color-mix(in srgb, var(--t) 10%, transparent); font-size: 11px; color: var(--muted); }
.pf-ach-chip b { font-size: 15px; color: var(--t); font-variant-numeric: tabular-nums; }
.pf-ach-chip.full b::after { content: ' ✓'; }
.t-easy { --t: #cd7f32; } .t-medium { --t: #c9ced6; } .t-hard { --t: #ffd700; } .t-impossible { --t: #e879f9; } .t-academy { --t: #4cc38a; }
.pf-ach-h, .pf-hist-h { justify-content: flex-start; align-items: center; }
.pf-ach-h { color: var(--t); }
.pf-ach-h span, .pf-hist-h > span { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; }
.pf-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.pf-achc { --t: #8a909c; display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); min-width: 0; }
.pf-achc.on { border-color: color-mix(in srgb, var(--t) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--t) 13%, var(--panel2)), var(--panel2) 70%); }
.pf-ach-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, .25); }
.pf-achc.on .pf-ach-ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 50%, transparent), 0 0 12px color-mix(in srgb, var(--t) 25%, transparent); }
.pf-ach-ic .ui-art { width: 38px; height: 38px; }
.pf-achc.on .pf-ach-ic .ui-art { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.pf-achc:not(.on) .pf-ach-ic { filter: grayscale(1) brightness(.75); opacity: .7; }
.pf-ach-txt { min-width: 0; flex: 1; }
.pf-ach-txt b { display: block; font-size: 13px; line-height: 1.2; }
.pf-achc:not(.on) .pf-ach-txt b { color: #b6bbc5; }
.pf-ach-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.pf-ach-when { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--t); }
.pf-ach-when .ic { width: 11px; height: 11px; }
.pf-achc .ach-prog { margin-top: 6px; height: 10px; }
.pf-ach-grid.near .pf-achc { border-style: dashed; border-color: #565d6b; }
/* «История» */
.pf-tables { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--pf-line); color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 0; }
.pf-tables:hover { border-color: #4a5160; }
.pf-tables .ic { width: 26px; height: 26px; flex: none; }
.pf-tables span { flex: 1; min-width: 0; }
.pf-tables b { display: block; font-size: 14px; }
.pf-tables small { color: var(--muted); font-size: 12px; }
.pf-tables em { font-style: normal; font-size: 22px; color: var(--muted); }
.pf-hist-h { display: flex; align-items: center; gap: 8px; }
.pf-hist-h .ic { width: 1.1em; height: 1.1em; }
.pf-hist-h .mini { margin-left: auto; font-size: 12px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.pf-moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pf-moment { --k: #f5c542; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--k) 16%, transparent), transparent 60%), var(--panel2); min-width: 0; }
.pf-moment.k-royal, .pf-moment.k-sflush { --k: #e879f9; } .pf-moment.k-quads { --k: #6cc6ff; } .pf-moment.k-comeback { --k: #ff8a3d; }
.pf-moment.k-bluff { --k: #b18cff; } .pf-moment.k-ko2 { --k: #e5616b; } .pf-moment.k-record { --k: #ffd700; } .pf-moment.k-72o { --k: #9bd36a; }
.pf-moment-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pf-moment-cards { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pf-moment-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-moment-foot > b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pf-moment-foot > span { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-moment-foot .pos, .hist-amount.pos { color: #4fce72; } .pf-moment-foot .neg { color: #e07a7a; }
.pf-tag { --k: #f5c542; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); white-space: nowrap; }
.pf-tag.k-royal, .pf-tag.k-sflush { --k: #e879f9; } .pf-tag.k-quads { --k: #6cc6ff; } .pf-tag.k-comeback { --k: #ff8a3d; } .pf-tag.k-bluff { --k: #b18cff; }
.pf-tag.k-ko2, .pf-tag.k-badbeat { --k: #e5616b; } .pf-tag.k-record { --k: #ffd700; } .pf-tag.k-72o { --k: #9bd36a; }
.hist-info > .pf-tag { font-size: 11px; padding: 0 6px; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.pf-hist-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pf-a .hist-list { max-height: none; overflow: visible; }
/* one column: a phone, or a narrow window */
@media (max-width: 860px) {
.pf-grid { grid-template-columns: minmax(0, 1fr); }
.pf-side { border-right: 0; border-bottom: 1px solid var(--pf-line); padding: 44px 12px 12px; } /* room for ✕ above the card */
.pf-sticky { position: static; }
.pf-body { padding: 12px; }
.pf-a .profile-tabs { overflow-x: auto; scrollbar-width: none; padding-left: 8px; padding-right: 8px; }
.pf-lines, .pf-boxes { grid-template-columns: minmax(0, 1fr); }
.pf-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-rec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-combo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-web { flex-direction: column; }
.pf-pos > div { grid-template-columns: 110px 1fr 52px; }
}
@media (max-width: 480px) {
.profile-card.pf-a { border-radius: 0; }
.pf-rec > div { padding: 8px; gap: 8px; }
.pf-rec .pf-rec-img { width: 32px; height: 32px; }
.pf-combo .pf-combo-img { height: 54px; }
.pf-kpi > div > b { font-size: 19px; }
.pf-row .hist-community { display: none; } /* the board leaves no room for the hand's name */
}
.hist-community { opacity: .85; }
.hist-community .playing-card, .hist-cards .playing-card { width: 34px; height: 47px; font-size: .78em; }
/* At this size a corner-positioned index reads as a stray number in the corner of an otherwise
blank card — journal, history and replay lists keep rank+suit stacked in the centre. */
.hist-community .pip.tl,
.hist-cards .pip.tl,
.log-cards .pip.tl,
.rp-board .pip.tl,
.rp-hole .pip.tl {
position: static;
font-size: 1.05em;
line-height: 1.1;
}
.hist-community .pip.tl small,
.hist-cards .pip.tl small,
.log-cards .pip.tl small,
.rp-board .pip.tl small,
.rp-hole .pip.tl small { font-size: .95em; margin-top: 1px; }
/* Named-sprite fatality above the winner plaque — see main.js's showDuelAnimation. Appended to
(not the re-rendered table) and laid out over .table-oval, from its top edge down to the
result banner, so cards/chips/seats paint underneath. pointer-events none so "Показать карты"
stays clickable. */
.fatality-layer {
position: fixed;
z-index: 32;
pointer-events: none;
overflow: visible;
animation: fatalityIn .28s ease-out;
}
/* Not laid out yet (the table was mid-shake/zoom): a layer without its size would paint the
fighters at their natural size for a frame. See layoutFatalityLayer(). */
.fatality-layer.pending { visibility: hidden; }
.fatality-layer.editing {
pointer-events: auto;
z-index: 36;
user-select: none;
cursor: default;
}
/* Sized and placed by layoutFatalityLayer(): the editor's proportions, fitted in, on the bottom edge. */
.fatality-stage {
position: absolute;
bottom: 0;
}
.fatality-fighter.free {
left: auto;
right: auto;
width: auto;
justify-content: center;
cursor: grab;
/* Every frame snaps exactly to its editor placement. Easing the position while the sprite and
its size switch at once showed, mid-move, a figure nobody placed (a lying sprite at the
standing spot and angle). */
transition: none;
}
.fatality-fighter.free:active { cursor: grabbing; }
.fatality-layer.editing .fatality-fighter.free,
.fatality-fighter.free.no-anim {
transition: none !important;
}
/* Editor poses are the animation. Old lunge/bob/drop keyframes offset those coords. */
.fatality-fighter.free .fatality-sprite,
.fatality-fighter.free.idle .fatality-sprite,
.fatality-fighter.free.downed .fatality-sprite,
.fatality-fighter.free.winding .fatality-sprite,
.fatality-fighter.free.bracing .fatality-sprite,
.fatality-fighter.free.striking .fatality-sprite,
.fatality-fighter.free.recoiling .fatality-sprite {
animation: none !important;
}
.fatality-fighter.free .fatality-flip { height: 100%; }
/* Never shrink to fit — the sprite keeps its own aspect wherever the fighter stands (see applyFighterFree). */
.fatality-fighter.free .fatality-flip,
.fatality-fighter.free .fatality-sprite,
.fatality-fighter.free img { flex-shrink: 0; }
.fatality-fighter.free img {
object-position: center bottom;
pointer-events: none;
}
/* ---------- victory poses (see VICTORY_ART in main.js) ---------- */
.fatality-fighter.victory { z-index: 3; }
.victory-body {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
transform-origin: 50% 100%;
isolation: isolate;
will-change: transform;
}
.victory-body img { height: 100%; width: auto; }
.v-aura {
position: absolute;
left: 50%; top: 52%;
width: 150%; height: 105%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(255, 214, 102, .55), rgba(255, 190, 60, .18) 55%, transparent 75%);
z-index: -1;
pointer-events: none;
opacity: .65;
}
.v-live .v-aura { animation: vAura 2.6s ease-in-out infinite alternate; }
.v-champion .v-aura { background: radial-gradient(closest-side, rgba(255, 224, 120, .8), rgba(255, 190, 60, .3) 55%, transparent 78%); }
@keyframes vAura { from { opacity: .45; transform: translate(-50%, -50%) scale(.94); } to { opacity: .9; transform: translate(-50%, -50%) scale(1.05); } }
.v-crown {
position: absolute;
font-size: calc(var(--vpx, 300px) * .12);
line-height: 1;
/* --crown-rot tilts the crown per fighter (a sideways head, karatel's freeze): the studio's 👑⟲/⟳ */
transform: translate(-50%, -84%) rotate(calc(-6deg + var(--crown-rot, 0deg)));
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
pointer-events: none;
z-index: 2;
}
.v-live.v-champion .v-crown { animation: vCrown 2.2s ease-in-out .7s infinite alternate; }
@keyframes vCrown {
from { transform: translate(-50%, -84%) rotate(calc(-6deg + var(--crown-rot, 0deg))); }
to { transform: translate(-50%, -92%) rotate(calc(3deg + var(--crown-rot, 0deg))); }
}
.v-drip {
position: absolute;
width: calc(var(--vpx, 300px) * .011);
height: calc(var(--vpx, 300px) * .02);
border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
background: radial-gradient(circle at 40% 70%, #d01818, #7a0606);
pointer-events: none;
z-index: 2;
}
.v-smoke {
position: absolute;
width: calc(var(--vpx, 300px) * .06);
height: calc(var(--vpx, 300px) * .06);
border-radius: 50%;
background: radial-gradient(circle, rgba(190, 190, 190, .75), rgba(160, 160, 160, 0) 70%);
filter: blur(2px);
pointer-events: none;
z-index: 2;
}
.fx-fall {
position: absolute;
pointer-events: none;
z-index: 6;
backface-visibility: visible;
will-change: transform;
}
.fx-fall-card {
width: 24px; height: 34px;
box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
color: #111;
font: 700 11px/1 system-ui, sans-serif;
font-style: normal;
}
.fx-fall-card.red { color: #d22; }
.fx-fall-chip {
width: 22px; height: 22px;
transform-style: preserve-3d;
}
.fx-fall-chip img {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
}
/* Idle loops — on the body, so the crown, drops and smoke move with it. Everyone breathes. */
.v-live .victory-body { animation: vBreathe 1.7s ease-in-out .52s infinite alternate; }
@keyframes vBreathe { from { transform: none; } to { transform: scale(.995, 1.018); } }
.v-live.v-leoj .victory-body { animation: vPush 2.4s ease-in-out .52s infinite; }
@keyframes vPush { 0%, 100% { transform: none; } 50% { transform: scale(1.025) translateY(-.6%); } }
.v-live.v-maxgorox .victory-body { animation: vBreathe 2.2s ease-in-out .52s infinite alternate; }
.v-live.v-sukharik1337 .victory-body { animation: vHover .9s ease-in-out .52s infinite alternate; }
@keyframes vHover { from { transform: translateY(0); } to { transform: translateY(-5%); } }
.v-live.v-tvoevyma .victory-body { animation: vLaugh .34s ease-in-out .52s infinite alternate; }
@keyframes vLaugh { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg) translateY(-1%); } }
.v-live.v-svg .victory-body { animation: vPoint 1.6s ease-out .52s infinite; }
@keyframes vPoint { 0%, 55%, 100% { transform: none; } 66% { transform: scale(1.04) translateX(1%); } 78% { transform: scale(1.01); } }
.v-live.v-delovoikabanchik .victory-body,
.v-live.v-chupanyamanyanya .victory-body { animation: vSway 2.8s ease-in-out .52s infinite alternate; }
@keyframes vSway { from { transform: rotate(-1deg); } to { transform: rotate(1.1deg) scale(1.006, 1.012); } }
.v-live.v-getixer .victory-body,
.v-live.v-nyannyan .victory-body { animation: vBreathe 2.2s ease-in-out .52s infinite alternate; }
@media (prefers-reduced-motion: reduce) {
.v-aura, .v-live .victory-body, .v-live .v-crown { animation: none !important; }
}
@keyframes fatalityIn { from { opacity: 0; } to { opacity: 1; } }
.fatality-fighter {
position: absolute;
bottom: 0;
top: auto;
height: 60%;
display: flex;
align-items: flex-end;
}
.fatality-fighter.left { left: 0; width: 47%; justify-content: flex-end; }
.fatality-fighter.right { right: 0; width: 50%; justify-content: flex-start; }
.fatality-fighter.winner { z-index: 2; }
.fatality-fighter.loser { z-index: 1; }
.fatality-flip {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.fatality-fighter.right .fatality-flip { transform: scaleX(-1); }
.fatality-sprite {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
transform-origin: 80% 100%;
}
.fatality-fighter img {
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
object-position: right bottom;
filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
user-select: none;
}
.fatality-fighter.idle .fatality-sprite {
animation: fatalityBob 1.1s ease-in-out infinite alternate;
}
.fatality-fighter.winding .fatality-sprite {
animation: fatalityWindup .55s ease-out forwards;
}
.fatality-fighter.bracing .fatality-sprite {
animation: fatalityBrace .5s ease-out forwards;
}
.fatality-fighter.striking.atk-punch .fatality-sprite {
animation: fatalityLungePunch .48s cubic-bezier(.15, .85, .25, 1) forwards;
}
.fatality-fighter.striking.atk-kick .fatality-sprite {
animation: fatalityLungeKick .5s cubic-bezier(.2, .8, .2, 1) forwards;
transform-origin: 25% 100%;
}
.fatality-fighter.left.striking.atk-kick { width: 58%; }
.fatality-fighter.right.striking.atk-kick { width: 61%; }
.fatality-fighter.left.striking.atk-knee { width: 56%; }
.fatality-fighter.right.striking.atk-knee { width: 59%; }
.fatality-fighter.left.striking.atk-uppercut { width: 54%; }
.fatality-fighter.right.striking.atk-uppercut { width: 57%; }
.fatality-fighter.striking.atk-knee .fatality-sprite {
animation: fatalityLungeKnee .52s cubic-bezier(.18, .9, .22, 1) forwards;
}
.fatality-fighter.striking.atk-uppercut .fatality-sprite {
animation: fatalityLungeUpper .5s cubic-bezier(.15, .85, .2, 1) forwards;
}
.fatality-fighter.recoiling .fatality-sprite {
animation: fatalityRecoil .76s ease-out forwards;
}
.fatality-fighter.downed { z-index: 4; }
.fatality-fighter:not(.free).downed {
width: 30%;
top: auto;
height: 32%;
}
.fatality-fighter:not(.free).downed.left { left: 3%; }
.fatality-fighter:not(.free).downed.right { right: 3%; }
.fatality-fighter:not(.free).downed .fatality-sprite {
animation: fatalityDrop .68s cubic-bezier(.2, .9, .3, 1) both;
height: 100%;
width: auto;
max-width: 100%;
}
.fatality-fighter.downed img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: bottom;
filter: none;
}
@keyframes fatalityBob {
0% { transform: translateY(0) rotate(-0.6deg); }
100% { transform: translateY(-3.2%) rotate(0.8deg); }
}
@keyframes fatalityWindup {
0% { transform: translateX(0) scale(1); }
100% { transform: translateX(6%) scale(0.96, 1.04) rotate(-3deg); }
}
@keyframes fatalityBrace {
0% { transform: translateX(0); }
100% { transform: translateX(-4%) rotate(-2deg); }
}
@keyframes fatalityLungePunch {
0% { transform: translateX(6%) scale(0.96, 1.04); }
50% { transform: translateX(44%) scale(1.06, 0.94); }
100% { transform: translateX(40%) scale(1); }
}
@keyframes fatalityLungeKick {
0% { transform: translateX(8%) rotate(0); }
40% { transform: translateX(88%) translateY(-2%) rotate(-6deg); }
100% { transform: translateX(78%) rotate(-2deg); }
}
@keyframes fatalityLungeKnee {
0% { transform: translate(8%, 0) rotate(0); }
45% { transform: translate(62%, -16%) rotate(8deg); }
100% { transform: translate(54%, -10%) rotate(4deg); }
}
@keyframes fatalityLungeUpper {
0% { transform: translate(8%, 12%) rotate(8deg); }
45% { transform: translate(40%, -14%) rotate(-2deg); }
100% { transform: translate(34%, -8%) rotate(0); }
}
@keyframes fatalityRecoil {
0% { transform: translateX(16%); }
35% { transform: translateX(-4%) rotate(-4deg); }
100% { transform: translateX(12%) rotate(-1deg); }
}
@keyframes fatalityShake {
0% { transform: translate(0, 0); }
25% { transform: translate(-6px, 3px); }
55% { transform: translate(5px, -2px); }
100% { transform: translate(0, 0); }
}
@keyframes fatalityDrop {
0% { transform: translateY(-18%) scale(.92); opacity: .4; }
70% { transform: translateY(4%) scale(1.03); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
#fatalityPreviewTable {
position: fixed;
inset: 0;
z-index: 14;
display: flex;
flex-direction: column;
background: radial-gradient(circle at 50% 0%, #22262f, #14161b 70%);
padding-top: 48px;
}
#fatalityPreviewTable .table-page {
grid-template-columns: 1fr;
flex: 1;
min-height: 0;
}
/* ---------- hotkeys, BB units, blind structure ---------- */
.link-btn {
background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--gold); }
kbd.hk {
display: inline-block; margin-left: .4em; padding: 0 .3em; min-width: 1.2em;
border: 1px solid currentColor; border-radius: 3px; opacity: .65;
font: inherit; font-size: .68em; line-height: 1.35; text-align: center; vertical-align: middle;
}
@media (hover: none), (pointer: coarse) { kbd.hk { display: none; } }
.unit-toggle {
position: absolute; top: .35em; left: .5em; z-index: 12; font-size: .72em;
display: inline-flex; padding: 2px; gap: 2px; border-radius: 6px;
}
.unit-toggle > span { padding: .15em .55em; border-radius: 4px; color: var(--muted); }
.unit-toggle > span.on { background: var(--gold); color: #1c1f26; font-weight: 700; }
.unit-toggle .unit-short { display: none; }
/* Phones: "Фишки" covered the nearest seat plaque. Same breakpoints as isCompactTable in cam.js. */
@media (max-width: 480px), (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
.seat-bankroll { display: none; }
.unit-toggle .unit-long { display: none; }
.unit-toggle .unit-short { display: inline; }
.phone-cam-btn { display: none !important; }
/* Gold already says the camera is on; the extra word wrapped the header onto another row and
pushed "Ва-банк" below the screen edge. */
.cam-on-label { display: none; }
/* Every card on a phone (own hand, board, revealed hands): keep both corner ranks, hide only
the tiny corner suits — at this size they crowd into the big suit in the middle. Journal,
history and replay cards are the compact layout (rank + one suit stacked, the middle pip is
hidden), so there the suit is the only one and stays. */
.playing-card .pip.tl small,
.playing-card .pip.br small { display: none; }
.log-cards .pip.tl small,
.hist-cards .pip.tl small,
.hist-community .pip.tl small,
.rp-board .pip.tl small,
.rp-hole .pip.tl small { display: block; }
}
.seat .stack.stack-short { color: #f0c24b; font-weight: 700; }
.seat .stack.stack-critical { color: #ff6b5e; font-weight: 700; }
.blinds-card h2 { margin: 0 0 .3em; }
.blinds-table { width: 100%; border-collapse: collapse; margin: .6em 0; font-variant-numeric: tabular-nums; }
.blinds-table th, .blinds-table td { padding: .32em .5em; border-bottom: 1px solid #2f343e; }
.blinds-table th { color: var(--muted); font-weight: 600; font-size: .85em; }
.blinds-table tr.past td { color: var(--muted); opacity: .6; }
.blinds-table tr.current td { color: var(--gold); font-weight: 700; background: rgba(224,176,76,.1); }
.blinds-banner {
position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 50;
background: rgba(20, 22, 27, .92); border: 1px solid var(--gold); color: var(--gold);
border-radius: 10px; padding: .35em .9em; font-weight: 700; font-size: .88em; text-align: center;
box-shadow: 0 6px 24px rgba(0,0,0,.5); pointer-events: none;
animation: blindsBanner 4s ease forwards; max-width: calc(100vw - 32px); white-space: nowrap;
}
@keyframes blindsBanner {
0% { opacity: 0; transform: translate(-50%, -8px); }
10%, 80% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -4px); }
}
/* ---------- pause & time bank ---------- */
.pause-pill {
display: inline-block; margin-bottom: .4em;
background: rgba(20, 22, 27, .88); border: 1px solid var(--gold); color: var(--gold);
padding: .35em 1.1em; border-radius: 999px; font-weight: 800; letter-spacing: .12em; font-size: .9em;
}
/* Pinned to the action panel's corner instead of sitting in the button row, where it wrapped onto a
line of its own, made the panel taller and squeezed the table (hero's clock went off-screen). */
.action-bar { position: relative; }
/* Bottom-right of the panel, in its own strip: the top-right corner sat on the "банк" shortcut. */
.action-bar:has(.time-bank) { padding-bottom: 1.35em; }
.time-bank { position: absolute; top: auto; bottom: .28em; right: .7em; left: auto; font-size: .72em; color: var(--muted); white-space: nowrap; pointer-events: none; }
.time-bank.active { color: #6fa8ff; font-weight: 700; }
/* ---------- chairs ---------- */
.seat.empty-seat { z-index: 1; width: auto; }
.empty-chair {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
width: 58px; height: 58px; border-radius: 50%; padding: 0;
background: rgba(20, 22, 27, .55); border: 2px dashed rgba(224,176,76,.55); color: var(--gold);
font-size: 1.2em; line-height: 1;
}
.empty-chair span { font-size: .55em; margin-top: .15em; }
.empty-chair:hover { background: rgba(224,176,76,.18); border-style: solid; }
@media (max-width: 480px) {
.empty-chair { width: 38px; height: 38px; font-size: .9em; }
.empty-chair span { display: none; }
}
/* ---------- tournament results ---------- */
.results-card { width: min(620px, 100%); } /* the table's summary (graph, awards, key hands) lives here too */
.results-card > .profile-close { z-index: 2; }
@keyframes trophyPop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.results-card h2 { margin: .25em 0 .15em; color: var(--gold); }
.res-hero.res-draw { padding-bottom: 12px; }
.res-draw-symbol { display: block; font-size: 30px; line-height: 1.2; }
.res-draw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 360px; margin: 18px auto 12px; }
.res-draw-player { --medal: #cfd6e2; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.res-draw-player .pd-ava-wrap { width: 56px; height: 56px; }
.res-draw-player b { max-width: 100%; overflow-wrap: anywhere; font-size: .94em; line-height: 1.25; }
.res-draw-player > span { color: var(--muted); font-size: .8em; }
.res-draw-summary { font-size: .9em; line-height: 1.4; margin: 12px 0 8px; }
.res-draw-rules { font-size: .82em; color: var(--muted); margin-bottom: 12px; text-align: left; }
.res-draw-rules summary { cursor: pointer; text-align: center; }
.res-draw-rules p { line-height: 1.45; }
.draw-results .results-list:not(.casual-res) li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: .2em .6em; }
.draw-results .results-list:not(.casual-res) .res-place { grid-row: span 2; }
.draw-results .results-list:not(.casual-res) .res-name,
.draw-results .results-list:not(.casual-res) .res-notes { grid-column: 2; white-space: normal; overflow-wrap: anywhere; }
.results-list { list-style: none; margin: .8em 0; padding: 0; text-align: left; }
.results-list li {
display: flex; align-items: center; gap: .6em; padding: .4em .6em; border-radius: 8px;
border-bottom: 1px solid #2f343e;
}
.results-list.casual-res li {
display: grid;
grid-template-columns: 1.8em minmax(0, 1fr) 4.2em 3.4em 4.2em;
gap: .35em;
align-items: center;
}
.results-list li.podium { font-weight: 700; }
.results-list li.mine { background: rgba(224,176,76,.12); }
.results-list li.res-head {
font-size: .72em; font-weight: 600; color: var(--muted); padding: .2em .6em;
border-bottom: 1px solid #3a3f4a;
}
.res-place { width: 1.8em; text-align: center; font-size: 1.15em; flex-shrink: 0; }
.res-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.res-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-notes { color: var(--muted); font-size: .8em; font-weight: 400; white-space: nowrap; }
.res-num { text-align: right; font-variant-numeric: tabular-nums; font-size: .92em; font-weight: 600; }
.res-plus { color: #4fce72; }
.res-minus { color: #e07a7a; }
.res-total { color: var(--gold); }
.res-total.res-minus { color: #e07a7a; }
@media (max-width: 480px) {
.results-list.casual-res li {
grid-template-columns: 1.6em minmax(0, 1fr) 3.4em 2.6em 3.4em;
gap: .22em;
padding: .35em .4em;
}
.results-list li.res-head { font-size: .65em; }
.res-num { font-size: .82em; }
}
@media (max-width: 360px) {
.draw-results .results-list.casual-res li { grid-template-columns: 1.6em repeat(3, minmax(0, 1fr)); }
.draw-results .results-list.casual-res li:not(.res-head) .res-place { grid-column: 1; grid-row: span 2; }
.draw-results .results-list.casual-res .res-who { grid-column: 2 / -1; }
.draw-results .results-list.casual-res .res-name { white-space: normal; overflow-wrap: anywhere; }
.draw-results .results-list.casual-res .res-head > span:nth-child(2) { display: none; }
}
.results-facts { font-size: .88em; color: var(--muted); display: grid; gap: .3em; margin-bottom: 1em; }
.results-facts b { color: var(--text); }
/* ---------- leaderboard ---------- */
.leaderboard-card {
display: flex; align-items: center; gap: .8em; text-align: left;
font: inherit; color: var(--text); cursor: pointer; border: 1px solid transparent;
}
.leaderboard-card:hover { border-color: var(--gold); }
.lb-card-icon { font-size: 1.8em; }
.lb-card { width: min(620px, 100%); }
.lb-card h2 { margin: 0 0 .5em; }
.lb-tabs { display: flex; gap: .4em; justify-content: center; margin-bottom: .8em; }
.lb-tabs .mini.active { background: var(--gold); color: #1c1f26; font-weight: 700; }
.lb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92em; }
.lb-table th { color: var(--muted); font-weight: 600; font-size: .85em; padding: .3em .35em; }
.lb-table th.lb-tip { cursor: pointer; white-space: nowrap; }
.lb-table th.lb-tip:hover { color: var(--gold); }
.lb-tip-mark {
display: inline-block; margin-left: .15em; font-size: .68em; font-weight: 700;
width: 1.15em; line-height: 1.15em; text-align: center; vertical-align: .05em;
border: 1px solid currentColor; border-radius: 99px; opacity: .55;
}
.lb-help-overlay { z-index: 46; }
.lb-help-card { width: min(440px, 100%); text-align: left; }
.lb-help-card h2 { text-align: center; margin-bottom: .5em; }
.lb-help-lead { margin: 0 0 .9em; line-height: 1.45; }
.lb-help-ex {
background: var(--panel2); border: 1px solid #3a3f4a; border-radius: 10px;
padding: .9em 1em; margin: 0 0 .85em;
}
.lb-help-ex > p:first-of-type { margin-top: 0; }
.lb-help-ex > p:last-child { margin-bottom: 0; }
.lb-help-ex-h {
color: var(--gold); font-size: .75em; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; margin-bottom: .55em;
}
.lb-help-rows { display: grid; gap: .15em; }
.lb-help-row {
display: flex; justify-content: space-between; align-items: baseline; gap: .8em;
padding: .4em 0; border-bottom: 1px solid #2f343e; font-variant-numeric: tabular-nums;
}
.lb-help-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lb-help-formula {
text-align: center; font-variant-numeric: tabular-nums; font-size: 1.15em;
background: #1c1f26; border-radius: 8px; padding: .55em .7em; margin: .45em 0 .65em;
}
.lb-help-split { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: .65em; }
.lb-help-outcome {
border-radius: 8px; padding: .65em .6em; text-align: center;
background: rgba(255,255,255,.03); border: 1px solid #3a3f4a;
}
.lb-help-outcome.plus { background: rgba(63,174,92,.12); border-color: rgba(63,174,92,.4); }
.lb-help-outcome.minus { background: rgba(217,83,79,.12); border-color: rgba(217,83,79,.4); }
.lb-help-outcome-h { font-size: .85em; margin-bottom: .2em; }
.lb-help-outcome-v { font-size: 1.3em; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-help-card > .hint { margin: 0; }
.lb-help-ex .hint { margin: .7em 0 0; }
@media (max-width: 420px) {
.lb-help-split { grid-template-columns: 1fr; }
}
.lb-table td { padding: .4em .35em; border-bottom: 1px solid #2f343e; text-align: center; }
.lb-table tr.mine td { background: rgba(224,176,76,.1); }
.lb-table .lb-name-h, .lb-table .lb-name { text-align: left; }
.lb-rank { width: 2em; font-size: 1.1em; }
.lb-player { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; max-width: 100%; }
.lb-player span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-avatar-wrap { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.lb-avatar {
width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block;
position: absolute; inset: 0; border: 1px solid #3a3f4a;
}
.lb-avatar.placeholder {
display: grid; place-items: center; font-size: .7em; background: var(--panel2); color: var(--gold);
}
@media (max-width: 480px) {
.lb-table { font-size: .8em; }
.lb-table th, .lb-table td { padding: .35em .2em; }
}
/* ---------- hand replay ---------- */
.hist-replay { margin-left: auto; align-self: center; }
.replay-overlay { z-index: 45; }
.replay-card { width: min(540px, 100%); }
.replay-card h3 { margin: 0; }
.rp-board { display: flex; gap: .3em; justify-content: center; margin: .7em 0 .3em; }
.rp-board .playing-card { width: 38px; height: 53px; font-size: .85em; }
.rp-slot { background: rgba(255,255,255,.04); border: 1px dashed #3a3f4a; box-shadow: none; }
.rp-pot {
display: flex; align-items: center; justify-content: center; gap: .4em;
color: var(--gold); margin-bottom: .6em; font-weight: 700;
}
.rp-pot .chip-stack { gap: .25em; }
.rp-pot .chip-pile.mini { height: 18px; }
.rp-players { display: grid; gap: .3em; text-align: left; }
/* Fixed tracks (not `auto`): each row is its own grid, so auto columns sized to that row's bet
and shoved the hole cards / stack left on anyone with chips in front. */
.rp-row {
display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(64px, .8fr) 4.8em 5.6em; align-items: center; gap: .4em;
padding: .3em .5em; border-radius: 8px; background: var(--panel2); border: 1px solid transparent;
transition: background .2s ease, border-color .2s ease;
}
.rp-row.mine { border-color: #3a3f4a; }
.rp-row.active { border-color: var(--gold); background: rgba(224,176,76,.12); }
.rp-row.winner { border-color: #2ecc71; background: rgba(46,204,113,.12); }
.rp-row.folded { opacity: .45; }
.rp-who { display: flex; align-items: center; gap: .3em; min-width: 0; }
.rp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-badge { font-size: .62em; font-weight: 800; padding: .1em .35em; border-radius: 4px; background: #3a3f4a; color: var(--text); }
.rp-badge.d { background: var(--gold); color: #1c1f26; }
.rp-eq { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-eq-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .72em; }
.rp-eq-top i { font-style: normal; color: var(--muted); }
.rp-eq-top b.hi, .rp-eq-bar i.hi { color: #5fd08a; }
.rp-eq-top b.lo, .rp-eq-bar i.lo { color: #ef7a6e; }
.rp-eq-bar { height: 5px; border-radius: 3px; background: #2c303a; overflow: hidden; display: block; }
.rp-eq-bar i { display: block; height: 100%; background: currentColor; transition: width .35s ease; }
.rp-hole { display: flex; gap: .2em; width: 62px; justify-content: flex-end; }
.rp-hole .playing-card { width: 28px; height: 39px; font-size: .68em; }
.rp-stack {
text-align: right; color: var(--gold); font-variant-numeric: tabular-nums;
font-weight: 700;
}
.rp-bet {
display: flex; justify-content: flex-end; align-items: center;
min-height: 22px;
}
.rp-bet .chip-stack { gap: .25em; }
.rp-bet .chip-pile.mini { width: 14px; height: 16px; flex-shrink: 0; }
.rp-bet .chip.mini { width: 14px; height: 14px; }
.rp-bet .chip-amt { padding: .1em .4em; font-size: .75em; }
.rp-step { margin: .8em 0 .5em; font-weight: 700; min-height: 1.4em; }
.rp-step.final.won { color: #4fce72; }
.rp-step.final.lost { color: #e07a7a; }
.rp-controls { display: flex; gap: .35em; justify-content: center; align-items: center; flex-wrap: wrap; }
.rp-count { color: var(--muted); font-size: .8em; margin-left: .4em; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
.rp-row { grid-template-columns: minmax(0, 1fr) 56px minmax(48px, .8fr) 4.2em 5em; font-size: .85em; gap: .28em; }
.rp-hole { width: 56px; }
.rp-hole .playing-card { width: 25px; height: 35px; font-size: .62em; }
}
.hist-row { flex-wrap: wrap; }
/* ---------- table mode ---------- */
.mode-row { display: flex; gap: .5em; margin-bottom: .8em; }
.mode-btn {
flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .15em; text-align: left;
padding: .55em .7em; border: 1px solid #3a3f4a; background: var(--panel2);
}
.mode-btn.active { border-color: var(--gold); background: rgba(224,176,76,.12); box-shadow: 0 0 8px rgba(224,176,76,.25); }
.mode-name { font-weight: 700; font-size: .9em; }
.mode-sub { font-size: .7em; color: var(--muted); }
.lb-plus { color: #3fae5c; }
.elo-num { font-variant-numeric: tabular-nums; }
.elo-hot { color: #e0b04c; }
.elo-cold { color: var(--muted); }
.elo-title { color: var(--muted); font-size: .85em; font-weight: 400; }
.lb-muted { color: var(--muted); }
.lb-minus { color: #d9534f; }
@media (max-width: 480px) {
.action-bar:has(.time-bank) { padding-bottom: 1.15em; }
.time-bank { right: .45em; left: auto; top: auto; bottom: .15em; }
.time-bank .tb-word { display: none; }
}
/* ---------- super-admin ---------- */
.admin-btn { background: #3a2c0e; color: var(--gold); }
.admin-card { width: min(1080px, 96vw); text-align: left; border-color: rgba(224, 176, 76, .35); }
.admin-card h2 { text-align: center; margin: 0 0 .5em; }
.admin-card button.mini {
padding: .32em .7em; font-size: .82em; font-weight: 600;
border: 1px solid transparent;
}
.admin-card button.adm-ok { background: #1f6b45; color: #e8ffef; }
.admin-card button.adm-ok:hover { background: #258055; }
.admin-card button.adm-fix { background: #2c4f8a; color: #e4eeff; }
.admin-card button.adm-fix:hover { background: #3560a8; }
.admin-card button.adm-undo { background: #8a6414; color: #fff4cc; }
.admin-card button.adm-undo:hover { background: #a37618; }
.admin-card button.adm-warn { background: #8a4a16; color: #ffe8d2; }
.admin-card button.adm-warn:hover { background: #a3581a; }
.admin-card button.adm-eye { background: #4a3a78; color: #efe8ff; }
.admin-card button.adm-eye:hover { background: #5a4890; }
.adm-legend {
display: flex; flex-wrap: wrap; gap: .35em 1em; align-items: center;
font-size: .78em; color: var(--muted); margin: 0 0 .7em;
}
.adm-swatch {
display: inline-block; width: .75em; height: .75em; border-radius: 3px; margin-right: .35em;
vertical-align: -1px;
}
.adm-swatch.ok { background: #1f6b45; }
.adm-swatch.fix { background: #2c4f8a; }
.adm-swatch.undo { background: #8a6414; }
.adm-swatch.warn { background: #8a4a16; }
.adm-swatch.danger { background: var(--danger); }
.adm-badge {
display: inline-block; font-size: .72em; font-weight: 700; letter-spacing: .02em;
padding: .12em .5em; border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
.adm-badge.casual { background: rgba(31, 107, 69, .35); color: #9eecc0; }
.adm-badge.tourney { background: rgba(224, 176, 76, .28); color: var(--gold); }
.adm-badge.bots { background: rgba(90, 110, 140, .4); color: #c5d0e0; }
.adm-badge.wait { background: rgba(61, 139, 253, .25); color: #9cc4ff; }
.adm-badge.pause { background: rgba(138, 74, 22, .4); color: #ffc48a; }
.adm-badge.done { background: rgba(154, 160, 170, .25); color: var(--muted); }
.adm-announce, .adm-ban-form { display: flex; gap: .4em; flex-wrap: wrap; margin-bottom: .6em; }
.adm-announce input, .adm-ban-form input { flex: 1; min-width: 140px; }
.adm-body { max-height: 70vh; overflow-y: auto; }
.adm-table { background: var(--panel2); border-radius: 10px; padding: .6em .7em; margin-bottom: .6em; border-left: 4px solid #3a3f4a; }
.adm-table.is-casual { border-left-color: #1f6b45; }
.adm-table.is-tourney { border-left-color: var(--gold); }
.adm-table.is-bots { border-left-color: #6a7a94; }
.adm-table.is-paused { box-shadow: inset 0 0 0 1px rgba(138, 74, 22, .55); }
.adm-table.is-over { opacity: .85; }
.adm-table-head { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; margin-bottom: .4em; }
.adm-players { display: grid; gap: .25em; margin-bottom: .4em; }
.adm-player { display: flex; align-items: center; gap: .45em; }
.adm-player.is-busted .adm-stack { color: #e08080; }
.adm-player.is-out { opacity: .7; }
.adm-player.is-rail { opacity: .75; }
.adm-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-stack { color: var(--gold); font-variant-numeric: tabular-nums; }
.adm-dot { width: 8px; height: 8px; border-radius: 50%; background: #666; flex-shrink: 0; }
.adm-dot.on { background: #3fae5c; }
.adm-actions { display: flex; gap: .35em; flex-wrap: wrap; }
.adm-list { display: grid; gap: .3em; }
.adm-row { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; padding: .35em .5em; border-radius: 8px; background: var(--panel2); }
.adm-row > span:first-child { flex: 1; min-width: 0; }
.adm-row.muted { opacity: .55; }
.adm-game-row.is-rated { border-left: 4px solid var(--gold); }
.adm-game-row.is-casual { border-left: 4px solid #1f6b45; }
.announce-banner {
position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60;
display: flex; align-items: center; gap: .8em; max-width: calc(100vw - 32px);
background: #3a2c0e; color: #ffe7a8; border: 1px solid var(--gold); border-radius: 10px;
padding: .6em .9em; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: .95em;
}
/* A phone can't fit a history row on one line: your cards and the one-line meta text
("старшая карта · соперников: 11") on top, the board and the replay button underneath. */
@media (max-width: 560px) {
/* two lines: when + the cards, then the result with the star and «Повтор» */
.hist-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 10px; }
.hist-row .hand-cards { grid-column: 2 / -1; }
.hist-row .hist-info { grid-column: 1 / 3; }
.hist-row .hist-replay { margin-left: 0; padding: .3em .6em; font-size: .85em; }
.hist-filter.seg button { white-space: nowrap; font-size: 13px; padding-inline: 10px; }
}
/* ---------- bounty ---------- */
.head-badge { font-size: .8em; color: #ffcf5a; margin-left: .2em; white-space: nowrap; }
.bounty-toggle { display: flex; gap: .5em; align-items: flex-start; font-size: .8em; color: var(--muted); margin: -.2em 0 .8em; cursor: pointer; }
.bounty-toggle b { color: var(--text); }
.bounty-toggle input { margin-top: .2em; accent-color: var(--gold); }
.lb-sort { margin-top: -.3em; }
.lb-table td.lb-sorted { color: #ffcf5a; }
.rp-step.final { color: var(--gold); }
/* "Рука дня/недели": the name and the hand are clickable, but without the dotted underline. */
.highlight-card .link-btn { text-decoration: none; }
.highlight-card .link-btn:hover { color: var(--gold); }
/* Who watches with the x-ray: one small plaque (xrayStatusHtml) — «👁 Рентген: имя» or a count, «✦ Супер: …»; a click opens the
names and what they see. Its spot is the table editor's (`xray`). */
.table-xray-status {
position: absolute; top: .3em; right: .5em; z-index: 6;
display: flex; flex-direction: column; align-items: flex-end; gap: .3em; max-width: min(42%, 26em);
}
.table-xray-status:empty { pointer-events: none; }
.xr-chips {
all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; max-width: 100%;
padding: .2em .3em; border-radius: 999px; background: rgba(30, 22, 8, .82); border: 1px solid rgba(255, 207, 90, .55);
font-size: .72em; line-height: 1.2; color: #ffe7a8; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.xr-chips:hover { border-color: var(--gold); background: rgba(48, 36, 12, .92); }
.xr-chip { display: inline-flex; align-items: center; gap: .3em; min-width: 0; padding: 0 .35em; white-space: nowrap; }
.xr-chip + .xr-chip { border-left: 1px solid rgba(255, 207, 90, .35); }
.xr-chip .ic { width: 1.05em; height: 1.05em; flex: none; }
.xr-lbl { font-weight: 600; }
.xr-who { font-weight: 700; color: #fff3cf; min-width: 0; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.xr-n { min-width: 1.35em; padding: 0 .3em; border-radius: 999px; background: rgba(255, 207, 90, .22); color: #ffcf5a; text-align: center; font-size: .92em; }
.xr-n.xr-one { display: none; }
.xr-super { color: #ffd76e; }
.xr-star { font-size: 1.05em; color: #ffcf5a; }
.xr-pop {
box-sizing: border-box; max-width: 100%; padding: .45em .65em; border-radius: 10px;
background: rgba(30, 22, 8, .95); border: 1px solid var(--gold); color: #ffe7a8; font-size: .7em; line-height: 1.35;
box-shadow: 0 4px 14px rgba(0, 0, 0, .5); overflow-wrap: anywhere;
}
.xr-pop p { margin: 0; }
.xr-pop p + p { margin-top: .35em; }
.xr-pop .ic { width: 1em; height: 1em; vertical-align: -.12em; }
.super-xray-label-short { display: none; }
.community .super-xray-card { outline: 2px solid rgba(255, 207, 90, .72); outline-offset: 1px; }
.hand-preview.xray-hand { color: #ffcf5a; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); margin: 0; white-space: nowrap; z-index: 3; } /* hangs under the plaque like the viewer's own: a plaque that grew by this line stood higher than the one laid out in the editor */
.empty-chair .chair-count { font-size: .6em; margin-left: .05em; }
/* ---------- entry form: name, (password), button — one under another ---------- */
form[data-form="entry"] { display: flex; flex-direction: column; gap: .6em; }
form[data-form="entry"] h2, form[data-form="entry"] .hint { margin-bottom: .1em; }
form[data-form="entry"] input, form[data-form="entry"] button { width: 100%; }
form[data-form="entry"] .error-text { margin: 0; }
/* ---------- admin panel polish ---------- */
.adm-corner { position: absolute; top: .5em; right: .5em; display: flex; gap: .35em; }
.admin-card h2 { padding: 0 5.5em; } /* room for the ↻ ✕ corner so the title never runs under it */
@media (max-width: 480px) {
.admin-card h2 { padding: 0 0 0 0; margin-top: 1.9em; font-size: 1.2em; } /* on a phone the title drops below the corner buttons */
}
.adm-announce { align-items: stretch; margin-bottom: .8em; }
.adm-announce input { min-height: 2.5em; }
/* Tabs as one segmented bar across the whole panel, each the same width. */
.adm-tabs {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
background: var(--panel2); border-radius: 10px; padding: 3px; margin-bottom: .9em;
}
.adm-tabs button {
background: transparent; border-radius: 8px; padding: .5em .3em; font-size: .9em; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.adm-tabs button.active { background: var(--gold); color: #1c1f26; font-weight: 700; }
@media (max-width: 480px) {
.adm-tabs button { font-size: .75em; padding: .5em .15em; }
}
/* ---------- reigning champion: gold neon ---------- */
/* The halo is its own layer so the "your turn" gold border/glow on the card itself still shows. */
.seat.champion .seat-card::before {
content: ''; position: absolute; inset: -3px; border-radius: 16px; pointer-events: none; z-index: 0;
border: 1px solid rgba(255, 214, 110, .9);
/* A fixed glow that only fades in and out — animating box-shadow itself repainted every frame. */
box-shadow: 0 0 12px 3px rgba(255, 215, 110, .95), 0 0 34px 10px rgba(255, 190, 60, .45);
animation: championGlow 2.4s ease-in-out infinite;
will-change: opacity;
}
@keyframes championGlow {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
.seat.champion .name-text { color: #ffe08a; text-shadow: 0 0 6px rgba(255, 200, 80, .8); }
.champ-crown { margin-right: .15em; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .8)); }
.champ-line { color: #ffe08a; font-size: .85em; text-shadow: 0 0 6px rgba(255, 200, 80, .6); }
@media (prefers-reduced-motion: reduce) { .seat.champion .seat-card::before { animation: none; box-shadow: 0 0 12px 3px rgba(255, 215, 110, .8); } }
/* Header drop-downs (S.hdrMenu): "⋯" at the table, and the one under the avatar. */
.hdr-menu-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.hdr-menu-btn { white-space: nowrap; }
.hdr-menu-btn.open { background: #343a46; }
.hdr-dots { font-weight: 800; letter-spacing: .05em; padding: 0 .15em; }
.hdr-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-caret { font-size: .7em; color: var(--muted); margin-left: -.1em; }
.hdr-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px;
display: flex; flex-direction: column; padding: .35em;
background: var(--panel2); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.45);
font-size: 1rem; /* not the shrunk header button size */
}
.hdr-menu > button, .hdr-menu > a {
display: block; width: 100%; text-align: left; white-space: nowrap;
padding: .55em .8em; border-radius: 7px; background: transparent;
color: var(--text) !important; font: inherit; font-size: .92em; text-decoration: none;
}
.hdr-menu > button:hover, .hdr-menu > a:hover { background: rgba(255,255,255,.07); }
.hdr-menu > button.danger { color: #ff8f8a !important; background: transparent; }
.hdr-menu > button.danger:hover { background: rgba(217, 83, 79, .18); }
.hdr-menu > button.danger { margin-top: .3em; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 7px 7px; }
/* The "⋯" menu sits mid-header: it opens to the right of its button, never past the screen's edge. */
.hdr-menu-table .hdr-menu { right: auto; left: 0; }
.hdr-menu { max-width: calc(100vw - 16px); }
@media (max-width: 860px) { .admin-label { display: none; } }
/* A phone at the table: the spade alone, so the table info starts on the first line. */
@media (max-width: 480px) { body.ingame .top .hdr-title { display: none; } }
/* The admin's x-ray menu (hand it to a spectator) — drops down under the header button. */
.xray-wrap { position: relative; display: inline-flex; }
.xray-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 230px;
display: flex; flex-direction: column; gap: .4em; padding: .6em;
background: var(--panel2); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.45); text-align: left;
}
.xray-menu-title { font-size: .78em; color: var(--muted); margin-top: .2em; }
.xray-menu-note { font-size: .8em; color: var(--muted); }
.xray-menu-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.xray-menu-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sub { margin: 1em 0 .4em; font-size: .95em; }
/* Lobby: "Рейтинг" and "Создать стол" side by side; the new-table form opens as its own window. */
.lobby-actions { display: flex; flex-direction: column; gap: .8em; } /* "Рейтинг" on top, "Создать стол" under it */
.create-card { width: min(600px, 96vw); text-align: left; max-height: 92vh; overflow-y: auto; }
.create-card h2 { text-align: center; margin: 0 0 .7em; }
.create-card .create-form { display: flex; flex-direction: column; gap: .7em; }
.create-card .mode-row, .create-card .preset-row { margin: 0; }
.create-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em .8em; }
.bot-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em .8em; }
.bot-fields select { width: 100%; box-sizing: border-box; }
.create-fields input, .create-fields select { width: 100%; box-sizing: border-box; }
.create-card .stack-depth { font-size: .8em; margin: -.2em 0 0; }
.create-card .create-ladder { font-size: .8em; margin: -.5em 0 0; }
@media (max-width: 560px) {
.create-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Admin "Онлайн": name · where they are · the x-ray access button, with room to breathe. */
.adm-online-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5em 1em; padding: .5em .7em; }
.adm-online-row > .hint { text-align: right; }
.adm-sub { margin: 1.3em 0 .5em; }
.adm-xray-form { margin-top: .6em; }
.adm-online-row > .adm-btns { justify-self: end; }
.adm-online-row > .adm-btns > button { white-space: nowrap; }
@media (max-width: 560px) {
.adm-online-row { grid-template-columns: minmax(0, 1fr) auto; }
.adm-online-row > button { grid-column: 1 / -1; justify-self: stretch; }
.adm-online-row > .adm-btns { grid-column: 1 / -1; justify-self: stretch; }
.adm-online-row > .adm-btns > button { flex: 1; }
}
/* Admin repairs: the results editor, a player's corrections, the undo log. */
.adm-table > .hint, .adm-edit > .hint, .adm-player-card > .hint { margin: .5em 0 0; }
.adm-player { flex-wrap: wrap; }
.adm-btns { display: flex; gap: .3em; flex-wrap: wrap; }
.adm-edit, .adm-player-card { background: var(--panel2); border-radius: 10px; padding: .6em .7em; }
.adm-results-form { display: grid; gap: .3em; }
.adm-res-row {
display: grid; grid-template-columns: minmax(0, 1.6fr) 4em 4em minmax(0, 1.2fr) 4em minmax(0, 1fr) minmax(0, .9fr);
gap: .4em; align-items: center;
}
.adm-res-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-res-row input, .adm-res-row select { width: 100%; min-width: 0; padding: .25em .35em; }
.adm-res-head { font-size: .8em; opacity: .7; }
.adm-results-form .adm-actions { margin-top: .4em; }
.adm-adjust { display: grid; grid-template-columns: 8.5em 7em minmax(0, 1fr) auto; gap: .4em; align-items: center; margin-bottom: .35em; }
.adm-adjust input { min-width: 0; }
.adm-player-card .adm-actions { margin: .3em 0; }
.adm-ach-row { padding: .25em .5em; }
.adm-log-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 560px) {
.adm-res-row { grid-template-columns: minmax(0, 1fr) 3.2em 3.2em 5.5em 3.2em; }
.adm-res-row > span:nth-last-child(-n+2) { grid-column: 1 / -1; text-align: right; }
.adm-adjust { grid-template-columns: minmax(0, 1fr) 6em; }
.adm-adjust > input[name=reason] { grid-column: 1 / -1; }
.adm-log-row { grid-template-columns: minmax(0, 1fr) auto; }
.adm-log-row > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
/* Chair number on every seat and free spot — the table always draws you at the bottom and spreads
players evenly, so without it every chair you pick looks like the same one. */
.seat-no { position: absolute; right: 7px; bottom: 5px; font-size: .62em; color: var(--muted); opacity: .75; pointer-events: none; }
/* /poker?cam=1 — a phone that is only someone's table camera. */
.phone-cam-page {
max-width: 420px;
margin: 1.5em auto;
padding: 1em;
display: flex;
flex-direction: column;
align-items: center;
gap: .8em;
text-align: center;
}
.phone-cam-page h2 { margin: 0; font-size: 1.2em; }
.phone-cam-page p { margin: 0; }
.phone-cam-preview {
width: min(70vw, 280px);
height: min(70vw, 280px);
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(224, 176, 76, .7);
background: #111;
}
.phone-cam-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-cam-preview video.local { transform: scaleX(-1); }
.phone-cam-help { cursor: default; }
.phone-cam-card {
max-width: min(92vw, 460px);
padding: 1.2em 1.4em;
border-radius: 14px;
background: var(--panel);
border: 1px solid rgba(224, 176, 76, .35);
box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
text-align: left;
}
.phone-cam-card h3 { margin: 0 0 .6em; }
.phone-cam-card ol { margin: 0 0 .7em; padding-left: 1.3em; line-height: 1.5; }
.phone-cam-card b { word-break: break-all; }
.phone-cam-qr { width: 200px; height: 200px; margin: 1em auto .4em; background: #fff; border-radius: 8px; }
.phone-cam-qr svg { display: block; width: 100%; height: 100%; }
/* A direct child of , never re-parented: moving a playing