:root {
--sab: min(34px, env(safe-area-inset-bottom, 0px));
--sab-tg: 0px;
--sat-tg: 0px;
--tg-sa-top: 0px;
--tg-csa-top: 0px;
--sat: calc(max(env(safe-area-inset-top, 0px), var(--sat-tg)) / var(--app-zoom, 1));
--bg-color: #000000;
--card-bg: #1c1c1e;
--text-color: #ffffff;
--secondary-text: #8e8e93;
--border-color: #2c2c2e;
--divider-color: var(--bg-color);
--green: #28a745;
--red: #ff453a;
--blue: #0a84ff;
--yellow: #ffd60a;
--dark-yellow: #b58900;
--gray: #8e8e93;
--gold: #ffd700;
--orange: #ff9f0a;
--silver: #c0c0c0;
--bronze: #cd7f32;
--dark-blue: #0a84ff;
--dark-red: #c62828;
--sheet-handle: rgba(255, 255, 255, 0.35);
--accent: var(--blue);
--destructive: var(--red);
--check-green: #32d74b;
--separator-color: var(--border-color);
--text-secondary: var(--secondary-text);
--subtitle-text-color: var(--secondary-text);
--bg3: rgba(127, 127, 127, 0.14);
--bounty-gold: #f0a500;
--spacing-xxs: 2px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-xxl: 24px;
--player-height: 56px;
--player-height-sm: 52px;
--player-height-xs: 48px;
--photo-size-lg: 270px;
--photo-size-md: 225px;
--photo-size-sm: 180px;
--border-radius: 12px;
--position-size: 36px;
}
.player-header-row {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
.player-role-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
margin-right: 4px;
}
.player-role-badge.dealer {
background-color: var(--blue);
color: #fff;
}
.player-role-badge.admin {
background-color: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
.player-rating-badge {
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--secondary-text);
font-size: 13px;
font-weight: 500;
color: var(--secondary-text);
}
.zodiac-glyph {
font-weight: 700;
}
#selectedPlayerName {
font-size: 17px;
}
* {
box-sizing: border-box;
font-variant-numeric: tabular-nums;
}
html {
background-color: var(--bg-color);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 0 16px;
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
color: var(--text-color);
overflow-y: auto;
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
overscroll-behavior: none;
}
html:has(#botChatViewScreen:not(.hidden)),
html:has(#botChatViewScreen:not(.hidden)) body {
height: 100%;
height: calc(100lvh * var(--lvh-fix, 1));
min-height: 0;
max-height: calc(100lvh * var(--lvh-fix, 1));
overflow: hidden;
}
.screen {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--spacing-xl) 0;
padding-bottom: calc(var(--spacing-xl) + max(var(--sab), var(--sab-tg)));
min-height: min-content;
}
.header-content {
flex-shrink: 0;
margin-bottom: var(--spacing-xxl);
padding: 0 var(--spacing-lg);
}
.players-list-container {
display: flex;
flex-direction: column;
flex: 1;
min-height: min-content;
padding: var(--spacing-sm) 0;
}
.players-list {
display: flex;
flex-direction: column;
gap: 1px;
background-color: var(--divider-color);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-lg);
}
#tablesTournamentTitle .title-text {
transition: opacity 160ms ease;
}
#tablesTournamentTitle.flash .title-text {
opacity: 0.5;
}
#messengerScreen .header-content,
#botChatScreen .header-content {
display: none;
}
#messengerScreen .players-list-container,
#botChatScreen .players-list-container {
padding: 0;
}
#messengerPlayersList.month-overlay-list,
#botPlayersList.month-overlay-list {
background: transparent;
border-radius: 0;
gap: 0;
margin-bottom: 0;
}
#messengerPlayersList.month-overlay-list .month-overlay-list-group {
flex: 1 1 auto;
}
#messengerPlayersList .month-overlay-item:disabled {
cursor: not-allowed;
}
#messengerPlayersList .month-overlay-item {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-md);
}
#messengerPlayersList .month-overlay-item + .month-overlay-item::before {
left: var(--spacing-lg);
right: var(--spacing-md);
}
#messengerPlayersList .month-overlay-item-icon {
width: 44px;
height: 44px;
}
#signaturesList.month-overlay-list {
background: transparent;
border-radius: 0;
gap: 0;
margin-bottom: 0;
}
#signaturesList .month-overlay-item {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-md);
cursor: default;
}
#signaturesList .month-overlay-item-icon {
width: 44px;
height: 44px;
}
#botPlayersList .month-overlay-item-icon {
width: 44px;
height: 44px;
}
#botChatViewScreen:not(.hidden) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#botChatViewScreen .header-content {
flex-shrink: 0;
min-height: 0;
padding: 4px 16px 0;
margin-bottom: 0;
}
#botChatMessages {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 2px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--bg-color, #fff);
}
.bot-tool-response-json {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--text-color);
}
.bot-tool-json-line {
display: block;
white-space: pre;
}
.bot-tool-json-key {
color: #0550ae;
}
.bot-tool-json-string {
color: #0a7f2e;
}
.bot-tool-json-number {
color: #953800;
}
.bot-tool-json-boolean {
color: #8250df;
font-weight: 600;
}
.bot-tool-json-null {
color: #6e7781;
font-style: italic;
}
#botChatInput {
flex: 1;
background: transparent;
color: var(--text-color);
border: none;
padding: 6px 8px 6px 0;
font-size: 16px;
outline: none;
font-family: inherit;
resize: none;
max-height: 100px;
line-height: 1.3;
}
#botChatSendBtn {
width: 34px;
height: 34px;
border-radius: 50%;
background: #8e44ad;
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
overflow: hidden;
transition: opacity 0.15s;
}
#botChatSendBtn:disabled {
opacity: 0.4;
}
#tablesList.players-list {
margin-bottom: var(--spacing-xs);
}
.action-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
min-height: 0;
padding: var(--spacing-xl) 0;
}
.info-boxes-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
}
.info-box {
min-width: 0;
max-width: none;
background-color: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-sm);
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.info-box-icon {
font-size: 26px;
margin-bottom: 5px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 26px;
flex-shrink: 0;
}
.info-box-value {
font-size: 17px;
font-weight: 600;
color: var(--text-color);
line-height: 1.15;
flex-shrink: 0;
}
.info-box-label {
font-size: 12px;
line-height: 1.2;
color: var(--secondary-text);
margin-top: 3px;
min-height: 2.4em;
flex-shrink: 0;
}
.info-box-warning {
color: var(--red);
}
.info-box-success {
color: var(--green, #34c759);
}
.profile-consents-box {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 14px 16px;
box-sizing: border-box;
}
.profile-consents-title {
display: flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
font-size: 14px;
font-weight: 700;
color: var(--text-color);
}
.profile-consents-items {
min-width: 0;
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.profile-consent-item {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 9px;
border-radius: 999px;
background: var(--secondary-bg, rgba(127,127,127,0.12));
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
}
.profile-consent-item.is-signed { color: var(--green, #34c759); }
.profile-consent-item.is-unsigned { color: var(--red, #ff3b30); }
.profile-consent-item.is-outdated { color: var(--yellow, #f0a933); }
.info-box-clickable {
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.info-box-clickable:active {
transform: scale(0.96);
}
.review-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 14px;
margin: 0 var(--spacing-md) var(--spacing-md);
}
.review-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.review-card-avatar {
width: 44px;
height: 44px;
border-radius: 999px;
object-fit: cover;
flex: 0 0 auto;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
font-size: 18px;
}
.review-card-meta { flex: 1; min-width: 0; }
.review-card-name {
font-size: 16px;
font-weight: 700;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.review-card-sub {
font-size: 13px;
color: var(--secondary-text);
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.review-card-platform { font-weight: 700; }
.review-card-stars { color: #f5b400; letter-spacing: 1px; }
.review-card-text {
font-size: 15px;
line-height: 1.45;
color: var(--text-color);
white-space: pre-wrap;
word-break: break-word;
}
.review-card-empty {
color: var(--secondary-text);
font-style: italic;
}
.review-card-likes {
font-size: 13px;
font-weight: 600;
color: var(--secondary-text);
}
.review-card-answer {
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
background: var(--secondary-bg, rgba(127,127,127,0.12));
}
.review-card-answer-head {
font-size: 12px;
font-weight: 700;
color: var(--secondary-text);
margin-bottom: 4px;
}
.review-card-answer-text {
font-size: 14px;
line-height: 1.4;
color: var(--text-color);
white-space: pre-wrap;
word-break: break-word;
}
.pe-gender-btn {
flex: 1;
height: 44px;
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--secondary-text);
border-radius: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.pe-gender-btn.active {
background: var(--blue);
border-color: var(--blue);
color: #fff;
}
.pgh-wrap { display:flex; flex-direction:column; padding-bottom:12px; }
.pgh-title {
font-size: 16px; font-weight: 700; color: var(--text-color);
margin: 22px 2px 10px;
}
.pgh-title:first-child { margin-top: 4px; }
.pgh-title--current { display:flex; align-items:center; gap:8px; }
.pgh-title--current::after {
content:""; width:9px; height:9px; border-radius:50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(40,167,69,.5);
animation: pghPulse 1.6s ease-in-out infinite;
}
@keyframes pghPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.pgh-list { display:flex; flex-direction:column; gap:6px; }
.pgh-row {
display:grid; grid-template-columns:minmax(0,1fr) 30px 26px 72px; align-items:center;
padding:11px 12px; border-radius:12px; background:var(--card-bg);
font-size:14px; gap:0 6px;
}
.pgh-row__main { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-color); }
.pgh-row__main b { font-weight:700; }
.pgh-row__main b.is-weekend { color:#e2564d; }
.pgh-row__place { font-weight:700; text-align:right; font-size:12.5px; }
.pgh-row__rebuy { min-width:26px; text-align:right; font-size:12.5px; color:var(--secondary-text); }
.pgh-row__rating { min-width:72px; text-align:right; font-size:12.5px; font-weight:700; color:var(--gold); white-space:nowrap; overflow:hidden; }
.pgh-row__status { grid-column:2/-1; text-align:right; font-weight:700; font-size:13px; white-space:nowrap; }
.pgh-row__rating .rating-mult { font-size:.8em; line-height:1; white-space:nowrap; }
.pgh-row[data-mult-info] { cursor:pointer; }
.pgh-row__main.is-mult-info { color:var(--text-color); font-weight:700; }
.pgh-row--weekly  { background:linear-gradient(90deg, rgba(59,130,246,.16), rgba(59,130,246,.04) 70%, var(--card-bg)); }
.pgh-row--special { background:linear-gradient(90deg, rgba(168,85,247,.16), rgba(168,85,247,.04) 70%, var(--card-bg)); }
.pgh-row--closed  { background:linear-gradient(90deg, rgba(212,168,67,.16), rgba(212,168,67,.04) 70%, var(--card-bg)); }
.pgh-row--online  { background:linear-gradient(90deg, rgba(20,184,166,.16), rgba(20,184,166,.04) 70%, var(--card-bg)); }
.pgh-row--school  { background:var(--card-bg); opacity:.6; }
.pgh-empty { padding:14px 16px; border-radius:12px; background:var(--card-bg); color:var(--secondary-text); text-align:center; }
.tournament-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 2px;
line-height: 1.1;
}
.player-title {
font-size: 26px;
font-weight: 700;
margin-bottom: var(--spacing-sm);
line-height: 1.3;
text-align: left;
}
.club-logo {
display: block;
height: var(--position-size);
width: auto;
max-width: calc(var(--position-size) * 2);
flex-shrink: 0;
border-radius: 8px;
border: 0;
outline: 0;
object-fit: contain !important;
object-position: center;
margin-right: var(--spacing-sm);
}
.club-logo[data-tournament-logo="1"] {
width: var(--position-size);
height: var(--position-size);
max-width: none;
object-fit: contain !important;
transform: translateX(var(--spacing-md)) scale(2.4);
transform-origin: right center;
position: relative;
z-index: 0;
pointer-events: none;
}
#tablesScreen .tournament-header-text {
position: relative;
z-index: 1;
}
#playerSelectionScreen #tableIndicator {
width: var(--position-size);
height: var(--position-size);
font-size: 16px;
margin-right: var(--spacing-sm);
}
.header-icon {
width: var(--position-size);
height: var(--position-size);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
margin-right: var(--spacing-sm);
line-height: 1;
transform: translateY(-1px);
}
.header-icon[data-ww-icon] {
display: contents;
}
.header-icon.indicator-ring {
position: relative;
}
#botChatViewIcon {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
}
#botChatViewIcon::after {
display: none;
}
.tournament-header-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.tournament-header-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
min-height: var(--position-size);
}
.tournament-header-text .tournament-title {
margin-bottom: 0;
font-size: 22px;
line-height: 1.2;
display: flex;
align-items: baseline;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.tournament-title .title-text {
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.tournament-title .title-time {
flex-shrink: 0;
margin-left: 6px;
}
.tournament-header-text .tournament-date {
margin-bottom: 0;
font-size: 14px;
line-height: 1.2;
}
#playerSelectionScreen #gameTime {
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.table-info {
font-size: 17px;
font-weight: 400;
text-align: left;
margin-bottom: var(--spacing-xs);
line-height: 1.3;
}
.table-info.out-info-compact {
font-size: 17px;
line-height: 1.1;
}
.out-info-line {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
#actionScreen .out-info-line {
display: block;
}
.knock-out-names {
color: #2d8a4e;
}
.knock-by-name {
color: #c0392b;
}
.player-subtitle,
.game-time,
.tournament-date {
font-size: 15px;
text-align: center;
margin-bottom: var(--spacing-lg);
line-height: 1.1;
color: var(--secondary-text);
}
.header-content .player-subtitle,
.header-content .tournament-date {
text-align: left;
}
.player-card-header {
display: grid;
grid-template-columns: clamp(120px, 32vw, 225px) minmax(0, 1fr);
gap: var(--spacing-md);
align-items: start;
margin-bottom: var(--spacing-lg);
}
.player-card-header .player-photo {
position: relative;
width: clamp(120px, 32vw, 225px);
max-width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
margin: 0;
font-size: 50px;
border: 0;
outline: 1px solid var(--indicator-border, currentColor);
box-shadow: none;
box-sizing: border-box;
overflow: hidden;
background-color: transparent;
justify-self: start;
}
.photo-crown {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
line-height: 1;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.player-card-header .header-content {
grid-column: auto;
min-width: 0;
padding: 0;
margin-bottom: 0;
}
#actionScreen .player-title,
#actionScreen .player-subtitle,
#actionScreen .table-info {
text-align: left;
}
#actionScreen .player-title {
margin-top: 0;
margin-bottom: 0;
}
#actionScreen .table-info.out-info-compact .table-label {
font-size: inherit;
}
.player-button,
.action-button,
.back-button,
.admin-button,
.register-game-button {
border: none;
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
min-height: var(--player-height);
font-size: 17px;
transition: background-color 0.2s;
background-color: var(--card-bg);
}
.player-button {
padding: 0 var(--spacing-md) 0 var(--spacing-lg);
justify-content: flex-start;
color: var(--text-color);
position: relative;
border-radius: 0;
gap: var(--spacing-sm);
}
.player-button:active, .action-button:active, .back-button:active {
background-color: var(--border-color);
}
.player-button.is-dropped { opacity: .55; }
.player-button.is-dropped .player-nickname { text-decoration: line-through; }
#telegramTableScreen .player-button:active {
background-color: var(--card-bg);
}
.player-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.player-button.out .player-info,
.player-button.out .player-out-info,
.player-button.out .player-rebuys,
.player-button.out .chevron {
opacity: 0.55;
}
.player-button.out .position-indicator {
opacity: 0.75;
}
.player-button.gold { background-color: rgba(255, 215, 0, 0.25) !important; }
.player-button.silver { background-color: rgba(192, 192, 192, 0.35) !important; }
.player-button.bronze { background-color: rgba(205, 127, 50, 0.25) !important; }
.player-button.empty {
cursor: not-allowed;
background-color: var(--bg-color);
}
.player-button.empty .player-info,
.player-button.empty .player-rebuys,
.player-button.empty .chevron {
opacity: 0.4;
}
.player-button.empty .position-indicator {
opacity: 0.6;
}
.player-button.tt-weekly { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04) 70%, transparent) !important; }
.player-button.tt-special { background: linear-gradient(90deg, rgba(139,92,246,.18), rgba(139,92,246,.04) 70%, transparent) !important; }
.player-button.tt-closed { background: linear-gradient(90deg, rgba(212,168,67,.18), rgba(212,168,67,.04) 70%, transparent) !important; }
.player-button.tt-online { background: linear-gradient(90deg, rgba(20,184,166,.18), rgba(20,184,166,.04) 70%, transparent) !important; }
.player-button.tt-cancelled { background: linear-gradient(90deg, rgba(142,142,147,.18), rgba(142,142,147,.04) 70%, transparent) !important; }
.players-list .player-button:first-of-type {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.players-list .player-button:last-of-type {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.players-list .player-button.section-first {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.players-list .player-button.section-last {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.players-list-section-title {
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
color: var(--secondary-text);
text-align: left;
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xs);
}
.players-list > .players-list-section-title {
padding-top: calc(var(--spacing-lg) * 2);
}
.players-list > .players-list-section-title:first-child {
padding-top: 0;
}
.players-list .players-list-section-title + .player-button {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.players-list .player-button:has(+ .players-list-section-title) {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.action-button {
flex-direction: column;
justify-content: center;
padding: var(--spacing-lg);
font-weight: 400;
position: relative;
color: var(--blue);
}
.action-button.destructive { color: var(--red); }
.action-button.destructive:not(:disabled) {
background-color: #dc3545 !important;
color: #fff;
}
.action-button.destructive:not(:disabled):active {
background-color: #bd2130 !important;
}
.action-button.rebuy { color: var(--blue); }
.action-button.addon { color: #d4a843; }
.action-button.addon:not(:disabled) .action-role-letter { color: #d4a843; }
.action-button.addon:not(:disabled):active { background-color: rgba(212, 168, 67, 0.18); }
.action-button.addon:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.action-button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.action-button.destructive:disabled {
background-color: rgba(220, 53, 69, 0.25) !important;
color: rgba(255, 255, 255, 0.6);
opacity: 0.6;
cursor: not-allowed;
}
.action-button.rebuy:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.dealer-badge-icon {
position: absolute;
right: var(--spacing-lg);
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
pointer-events: none;
background-color: var(--blue);
color: #fff;
}
.dealer-badge-icon.inactive {
background-color: var(--secondary-text);
opacity: 0.4;
}
.dealer-badge-icon.nonplaying {
background-color: var(--gold);
color: #000;
}
.dealer-badge-icon.dropped {
background-color: var(--red);
color: #fff;
}
.action-role-letter {
position: absolute;
left: var(--spacing-lg);
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
opacity: 0.15;
font-weight: 700;
font-size: 14px;
pointer-events: none;
}
.action-button.destructive:not(:disabled) .action-role-letter {
color: #fff;
}
.action-button .player-rebuys {
position: absolute;
right: var(--spacing-lg);
top: 50%;
transform: translateY(-50%);
}
.action-buttons-row {
display: flex;
gap: var(--spacing-md);
}
.action-buttons-row .action-button,
.action-buttons-row .admin-button {
flex: 1;
min-width: 0;
margin-top: 0;
}
.dealer-role-split {
position: relative;
flex: 1 1 0;
min-width: 0;
}
.dealer-role-split .action-button {
width: 100%;
height: 100%;
}
#adminButtonsRow {
display: grid;
grid-template-columns: 1fr;
}
#adminButtonsRow.has-move-button {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#adminButtonsRow > .action-button,
#adminButtonsRow > .dealer-role-split {
width: 100%;
min-width: 0;
}
.action-buttons-row > .action-button,
.action-buttons-row > .admin-button {
flex: 1 1 0;
}
.dealer-role-menu {
position: absolute;
left: 0;
right: auto;
top: calc(100% + 6px);
z-index: 20;
display: none;
flex-direction: column;
width: max-content;
min-width: 100%;
max-width: calc(100vw - 32px);
box-sizing: border-box;
gap: 4px;
padding: 8px;
overflow: hidden;
border-radius: var(--border-radius);
background-color: var(--card-bg);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.dealer-role-split.open .dealer-role-menu {
display: flex;
}
.dealer-role-option {
min-height: 48px;
border: none;
background: var(--card-bg);
border-radius: calc(var(--border-radius) - 6px);
color: var(--text-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 0 16px;
font-size: 15px;
text-align: left;
white-space: nowrap;
}
.dealer-role-option:active {
background-color: var(--border-color);
}
.dealer-role-option.is-current {
font-weight: 700;
}
.dealer-role-option-check {
width: 18px;
min-width: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--green);
font-size: 16px;
font-weight: 900;
line-height: 1;
}
.dealer-role-option:disabled {
opacity: 0.45;
}
.dealer-role-option-badge {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--blue);
color: #fff;
font-size: 11px;
font-weight: 800;
}
.dealer-role-option-badge.player {
background: var(--secondary-text);
}
.dealer-role-option-badge.nonplaying {
background: var(--gold);
color: #000;
}
.dealer-role-option-badge.dropped {
background: var(--red);
color: #fff;
}
.admin-button {
justify-content: center;
padding: var(--spacing-lg);
font-weight: 400;
background-color: var(--dark-yellow);
color: white;
margin-top: var(--spacing-sm);
}
.admin-button:active {
background-color: #8b6900;
}
.admin-button:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: rgba(181, 137, 0, 0.35);
color: var(--text-color);
}
.register-game-button {
justify-content: center;
padding: var(--spacing-lg);
font-weight: 400;
background-color: #1a5c32;
color: white;
}
.register-game-button:active {
background-color: #134425;
}
.position-indicator {
width: var(--position-size);
height: var(--position-size);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
position: relative;
margin-right: var(--spacing-sm);
background-color: var(--border-color);
}
.position-indicator.loading {
border-radius: 999px;
flex: 0 0 var(--position-size);
width: var(--position-size);
height: var(--position-size);
min-width: var(--position-size);
min-height: var(--position-size);
max-width: var(--position-size);
max-height: var(--position-size);
padding: 0;
overflow: visible;
}
.position-indicator.loading .loading-spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: spinner-rotate 0.75s linear infinite;
}
@keyframes spinner-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.position-indicator.photo-indicator {
background-color: transparent;
color: var(--text-color);
padding: 0;
}
.position-indicator.photo-indicator img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(--position-size) / 2);
display: block;
background: var(--border-color) url('https://wwpoker.ru/img/avatar.png') center / cover no-repeat;
}
.position-indicator.playing {
background-color: var(--green);
color: white;
border-color: var(--green);
}
body.dealer-main-mode #playerSelectionScreen .position-indicator.playing {
background-color: var(--green);
color: white;
border-color: var(--green);
}
.position-indicator.dealer {
background-color: var(--blue);
color: white;
border-color: var(--blue);
}
.position-indicator.non-playing-dealer {
background-color: var(--gold);
color: #000;
border-color: var(--gold);
}
.position-indicator.cancelled {
background-color: #f85149;
color: white;
border-color: #f85149;
opacity: .5;
}
.position-indicator.dealer-out {
background-color: rgba(10, 132, 255, 0.22);
color: var(--blue);
border-color: var(--blue);
}
.position-indicator.out {
background-color: var(--border-color);
color: var(--secondary-text);
border-color: var(--border-color);
}
.position-indicator.empty {
color: var(--secondary-text);
border-color: var(--border-color);
}
.position-indicator.gold {
background-color: var(--gold);
color: black;
border-color: var(--gold);
}
.position-indicator.silver {
background-color: var(--silver);
color: black;
border-color: var(--silver);
}
.position-indicator.bronze {
background-color: var(--bronze);
color: white;
border-color: var(--bronze);
}
.table-indicator {
width: var(--position-size);
height: var(--position-size);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
margin-right: var(--spacing-sm);
position: relative;
background-color: var(--green);
color: #fff;
border: none;
}
.table-indicator.emoji {
font-size: calc(var(--position-size) * 0.82);
font-weight: 400;
line-height: 1;
}
.table-indicator > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: #fff;
}
.table-indicator > svg .s {
fill: none;
stroke: #fff;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.table-indicator.warning {
background-color: var(--red);
}
#allPlayersPreviewList .table-indicator,
#dbPlayersPreviewList .table-indicator,
#tournamentsPreviewList .table-indicator {
background-color: var(--card-bg);
color: var(--text-color);
}
.player-button.admin-call-active {
background-color: rgba(181, 137, 0, 0.35) !important;
}
.tables-active-title,
.tables-progress-title,
.tables-actions-title {
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
color: var(--secondary-text);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-xs);
text-align: left;
}
.tables-aggregates-text {
font-size: 14px;
color: var(--secondary-text);
margin-bottom: 0;
}
#tablesScreen > .header-content,
#tablesScreen > .tables-section-block {
margin-bottom: 0;
}
#tablesScreen > .players-list-container {
padding: 0;
}
#tablesScreen .players-list,
#tablesScreen .tables-balance-hint {
margin-bottom: 0;
}
#tablesScreen .tables-active-title,
#tablesScreen .tables-actions-title,
#tablesScreen .tables-progress-title,
#tablesScreen > .tables-section-untitled {
margin-top: calc(var(--spacing-lg) * 2);
}
#tablesScreen[data-home-tab="evening"] [data-home-pane]:not([data-home-pane="evening"]),
#tablesScreen[data-home-tab="players"] [data-home-pane]:not([data-home-pane="players"]),
#tablesScreen[data-home-tab="tourneys"] [data-home-pane]:not([data-home-pane="tourneys"]),
#tablesScreen[data-home-tab="finance"] [data-home-pane]:not([data-home-pane="finance"]),
#tablesScreen[data-home-tab="more"] [data-home-pane]:not([data-home-pane="more"]) {
display: none !important;
}
#tablesScreen {
padding-bottom: calc(var(--spacing-xl) + (52px + max(var(--sab), var(--sab-tg))) / var(--app-zoom, 1));
}
.home-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding-bottom: max(var(--sab), var(--sab-tg));
background: rgba(17, 20, 24, 0.96);
border-top: 1px solid #2f3842;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
--home-tab-muted: #8b95a2;
--home-tab-on: #d4af37;
}
html[data-color-scheme="light"] .home-tabbar {
background: rgba(255, 255, 255, 0.96);
border-top-color: var(--border-color);
--home-tab-muted: var(--secondary-text);
--home-tab-on: #a8841a;
}
.home-tabbar-in {
display: flex;
max-width: 460px;
margin: 0 auto;
}
.home-tabbar button {
flex: 1 1 0;
min-width: 0;
min-height: 52px;
margin: 0;
padding: 7px 2px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: 0;
border-radius: 0;
color: var(--home-tab-muted);
font: inherit;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s ease, opacity 0.12s ease, color 0.15s;
transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.home-tabbar button[hidden] {
display: none;
}
.home-tabbar button svg {
width: 25px;
height: 25px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-tabbar button.on {
color: var(--home-tab-on);
}
.home-tabbar button.on svg {
stroke-width: 1.9;
}
.home-tabbar button:active {
opacity: 0.6;
transform: scale(0.95);
filter: brightness(0.8);
transition-duration: 0.06s;
}
.home-tabbar button:focus-visible {
outline: 2px solid var(--home-tab-on);
outline-offset: -4px;
border-radius: 10px;
}
#meHomeScreen.player-home[data-player-tab="evening"] [data-player-pane]:not([data-player-pane="evening"]),
#meHomeScreen.player-home[data-player-tab="schedule"] [data-player-pane]:not([data-player-pane="schedule"]),
#meHomeScreen.player-home[data-player-tab="bar"] [data-player-pane]:not([data-player-pane="bar"]),
#meHomeScreen.player-home[data-player-tab="rating"] [data-player-pane]:not([data-player-pane="rating"]),
#meHomeScreen.player-home[data-player-tab="prizes"] [data-player-pane]:not([data-player-pane="prizes"]),
#meHomeScreen.player-home[data-player-tab="profile"] [data-player-pane]:not([data-player-pane="profile"]),
#actionScreen:not(.player-home) .player-home-only {
display: none !important;
}
#meHomeScreen.player-home {
padding-top: var(--spacing-lg);
padding-bottom: calc(var(--spacing-xl) + (52px + max(var(--sab), var(--sab-tg))) / var(--app-zoom, 1));
}
.player-tab-title {
display: flex;
align-items: center;
gap: 0.3em;
font-size: clamp(20px, calc((100vw - 40px) / 17), 28px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 var(--spacing-lg);
padding: 0 var(--spacing-xs);
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-tab-title {
display: none;
}
@font-face {
font-family: 'WW Corvetta';
src: url('https://wwpoker.ru/fonts/corvetta-ww.woff2') format('woff2');
font-display: swap;
}
.me-brand {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 var(--spacing-md);
padding: 0 var(--spacing-xs);
}
.me-brand .me-club-logo {
width: 40px;
height: 40px;
max-width: none;
margin: 0;
border-radius: 0;
}
.me-brand-name {
font-family: 'WW Corvetta', Georgia, serif;
font-size: 26px;
line-height: 1;
padding: 0.62em 0.22em 0.58em 0.1em;
margin: -0.62em -0.22em -0.58em -0.1em;
background: linear-gradient(135deg, #e8c96a, #d4a843, #b8922e);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
html[data-color-scheme="light"] .me-brand-name {
background-image: linear-gradient(135deg, #c9a237, #a8841a, #84661a);
}
html.tg-fs .screen {
padding-top: calc(var(--spacing-sm) + var(--sat));
}
html.tg-fs #meHomeScreen.player-home {
padding-top: calc(var(--spacing-xs) + var(--sat));
}
html.tg-fs #botChatViewScreen:not(.hidden),
html.tg-fs #registrationCalendarScreen,
html.tg-fs #birthdaysCalendarScreen,
html.tg-fs #tournamentsCalendarScreen,
html.tg-fs .month-overlay-content {
padding-top: var(--sat);
}
html.tg-fs .out-by-overlay-card:not(.is-tall) {
max-height: min(90dvh, calc(100dvh - var(--sat) - 8px));
}
html.tg-fs #meHomeScreen .me-brand,
html.tg-fs #meHomeScreen .me-club-tagline {
display: none;
}
#tgTopBar {
display: none;
}
html.tg-fs #tgTopBar {
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
height: var(--sat-tg);
z-index: 20;
background: var(--bg-color);
pointer-events: none;
}
#tgTopBar .tg-top-slot {
position: absolute;
top: var(--tg-sa-top);
height: var(--tg-csa-top);
left: 92px;
right: 92px;
display: flex;
align-items: center;
justify-content: center;
container-type: inline-size;
}
#tgTopBar .tg-top-brand {
gap: 5px;
margin: 0;
padding: 0;
}
#tgTopBar .me-club-logo {
display: none;
width: 24px;
height: 24px;
flex: 0 0 24px;
}
#tgTopBar .me-brand-name {
font-size: 17px;
}
@container (max-width: 179px) {
#tgTopBar .me-brand-name {
display: none;
}
#tgTopBar .me-club-logo {
display: block;
}
}
.me-foot {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: var(--spacing-xl) 0 var(--spacing-sm);
font-size: 12px;
color: var(--secondary-text);
}
.me-foot .ph-logo {
font-size: 17px;
}
.me-foot-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 2px 8px;
}
.me-foot-ver {
font-variant-numeric: tabular-nums;
}
.me-foot .me-foot-club {
display: none;
width: 40px;
height: 40px;
max-width: none;
margin: 0;
border-radius: 0;
}
#tablesScreen[data-home-tab="more"] #homeFoot .me-foot-club {
display: block;
}
#meHomeScreen.player-home:not([data-player-tab="evening"]):not([data-player-tab="profile"]) .me-foot {
display: none;
}
#tablesScreen:not([data-home-tab="evening"]):not([data-home-tab="more"]) #homeFoot {
display: none;
}
#meEveningCard .me-evening-card {
background: none;
padding: 0;
border-radius: 0;
margin-bottom: 0;
}
#meEveningCard .me-evening-card + .me-evening-card {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 0.5px solid var(--separator-color);
}
.me-club-tagline {
margin: 0 0 14px;
padding: 0 var(--spacing-xs);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--secondary-text);
}
.me-evening-card {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.me-evening-title {
font-size: 21px;
font-weight: 700;
line-height: 1.2;
}
.me-evening-meta {
margin-top: 4px;
font-size: 15px;
color: var(--secondary-text);
}
.me-evening-facts {
margin-top: var(--spacing-md);
display: flex;
flex-direction: column;
gap: 6px;
font-size: 15px;
}
.me-evening-facts b {
font-weight: 600;
}
.me-ok { color: var(--green); }
.me-warn { color: var(--orange); }
.me-muted { color: var(--secondary-text); }
.me-gold { color: #d4a843; font-weight: 600; }
.me-action {
width: 100%;
margin-top: var(--spacing-lg);
min-height: var(--player-height);
border: none;
border-radius: var(--border-radius);
font: inherit;
font-size: 17px;
font-weight: 600;
color: #fff;
background: var(--green);
cursor: pointer;
}
.me-action.is-secondary {
color: var(--text-color);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45);
}
.me-action:disabled {
opacity: 0.5;
cursor: default;
}
.me-day-title {
margin: var(--spacing-xl) var(--spacing-xs) var(--spacing-sm);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: var(--secondary-text);
}
.me-day-title:first-child {
margin-top: 0;
}
.me-game-row .player-info {
flex: 1 1 auto;
min-width: 0;
}
.me-game-row .player-nickname {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.me-game-row .player-info > * {
max-width: 100%;
min-width: 0;
}
.me-game-row .player-name {
overflow: hidden;
text-overflow: ellipsis;
}
.me-game-act {
flex: 0 0 auto;
min-width: 88px;
max-width: 50%;
white-space: nowrap;
text-align: center;
margin-left: var(--spacing-sm);
padding: 7px 10px;
border: none;
border-radius: 8px;
font: inherit;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green);
cursor: pointer;
}
.me-game-act.is-on {
color: var(--text-color);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45);
}
.me-game-act:disabled {
opacity: 0.5;
}
.home-tabbar .lt-av-wrap {
position: relative;
width: 25px;
height: 25px;
}
.home-tabbar .lt-av {
position: absolute;
inset: 1px;
width: 23px;
height: 23px;
border-radius: 50%;
object-fit: cover;
background: var(--card-bg);
}
.home-tabbar button.on .lt-av {
box-shadow: 0 0 0 2px var(--home-tab-on);
}
.me-t-head {
display: flex;
gap: 12px;
align-items: flex-start;
}
.me-t-head-text {
flex: 1;
min-width: 0;
}
.me-t-head-text > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.me-t-head .me-evening-title {
line-height: 24px;
}
.me-t-head .me-evening-meta {
line-height: 20px;
}
.me-t-thumb {
flex: none;
width: 128px;
height: 72px;
}
html[data-color-scheme="dark"] .me-t-thumb img,
html[data-color-scheme="dark"] .me-game-thumb img {
filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
.me-t-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.me-t-tiles {
margin-top: var(--spacing-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
.me-t-tile {
min-width: 0;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg3);
}
.me-t-tile-k {
font-size: 12px;
color: var(--secondary-text);
}
.me-t-tile-v {
margin-top: 2px;
font-size: 16px;
font-weight: 600;
overflow-wrap: anywhere;
}
.me-t-tile-s {
margin-top: 2px;
font-size: 12px;
color: var(--secondary-text);
}
.fill-bar {
height: 16px;
margin-top: var(--spacing-md);
padding: 2px;
display: flex;
gap: 2px;
align-items: stretch;
border: 2px solid #888;
border-radius: 4px;
background: #3a3a48;
}
html[data-color-scheme="light"] .fill-bar {
background: #fff;
}
.fill-bar__seg {
flex: 1 1 0;
min-width: 2px;
border-radius: 1px;
background: transparent;
}
.fill-bar__seg--filled {
background: rgb(var(--tt-color, 39, 174, 96));
}
.fill-bar__seg--out {
background: #565663;
}
html[data-color-scheme="light"] .fill-bar__seg--out {
background: #c2c2cc;
}
.fill-bar__seg--dealer {
background-color: rgb(var(--tt-color, 39, 174, 96));
-webkit-mask-image: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 2px);
mask-image: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 2px);
}
.me-t-block {
margin-top: var(--spacing-lg);
}
.me-t-block-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: var(--secondary-text);
margin-bottom: 6px;
}
.me-t-prize {
display: flex;
gap: 10px;
padding: 4px 0;
font-size: 15px;
}
.me-t-prize-place {
flex: 0 0 auto;
min-width: 76px;
color: var(--secondary-text);
}
.me-t-roster {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
font-size: 14px;
}
.me-t-who {
display: inline-flex;
align-items: center;
gap: 6px;
}
.me-t-who img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: var(--bg3);
}
.me-t-who.is-me {
margin: -3px -6px;
padding: 3px 6px;
border-radius: 6px;
background: rgba(212, 168, 67, 0.18);
color: #d4a843;
font-weight: 700;
}
.me-t-you {
font-weight: 500;
opacity: 0.8;
}
.me-t-table + .me-t-table {
margin-top: var(--spacing-md);
}
.me-t-table-title {
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
color: var(--secondary-text);
}
.me-t-box {
min-width: 14px;
font-size: 12px;
font-weight: 600;
text-align: right;
color: var(--secondary-text);
font-variant-numeric: tabular-nums;
}
.me-t-who.is-me .me-t-box {
color: inherit;
}
.me-t-struct summary {
display: flex;
flex-direction: column;
cursor: pointer;
list-style: none;
}
.me-t-struct summary::-webkit-details-marker {
display: none;
}
.me-t-struct summary .me-t-block-title::after {
content: ' ▾';
}
.me-t-struct[open] summary .me-t-block-title::after {
content: ' ▴';
}
.me-t-struct table {
width: 100%;
margin-top: var(--spacing-sm);
border-collapse: collapse;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.me-t-struct th,
.me-t-struct td {
padding: 5px 4px;
text-align: left;
border-bottom: 0.5px solid var(--border-color);
}
.me-t-struct th {
font-weight: 600;
color: var(--secondary-text);
}
.me-t-break td {
color: var(--orange);
}
.me-t-late td:first-child {
color: var(--blue);
}
.me-t-struct tr.me-t-now td {
background: rgba(212, 168, 67, 0.18);
color: #d4a843;
font-weight: 700;
}
.me-t-now-text {
color: #d4a843;
font-weight: 600;
}
.me-game-row {
cursor: pointer;
}
.me-game-thumb {
flex: 0 0 auto;
width: var(--position-size);
height: var(--position-size);
margin-right: var(--spacing-sm);
border-radius: 8px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.me-game-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
#meGameBody .me-evening-card {
background: none;
padding: 0;
border-radius: 0;
text-align: left;
}
.me-t-desc {
margin-top: var(--spacing-md);
font-size: 15px;
line-height: 1.45;
color: var(--text-color);
white-space: pre-line;
}
#meGameBody .me-t-head-text > div {
white-space: normal;
}
.me-back {
display: block;
text-align: left;
margin: 0 0 var(--spacing-md);
padding: 4px 0;
border: none;
background: none;
font: inherit;
font-size: 17px;
color: var(--blue);
cursor: pointer;
}
.me-back[hidden] {
display: none;
}
.me-bar-note {
padding: 0 var(--spacing-xs) var(--spacing-md);
text-align: left;
}
.player-tab-empty {
padding: 40px 20px;
text-align: center;
font-size: 15px;
line-height: 1.45;
color: var(--secondary-text);
}
.tables-action-button {
border: none;
border-radius: var(--border-radius);
cursor: pointer;
padding: var(--spacing-md) var(--spacing-lg);
min-height: var(--player-height);
font-size: 15px;
background-color: var(--card-bg);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.tables-action-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#levelPrevBtn,
#levelPauseBtn,
#levelNextBtn {
color: var(--text-color);
}
.cash-pult {
margin-bottom: var(--spacing-lg);
}
.cash-pult-btns {
display: flex;
gap: 8px;
}
.cash-pult-btns .tables-action-button {
flex: 1 1 0;
min-width: 0;
padding: 10px 8px;
font-size: 31px;
line-height: 1;
height: var(--player-height);
box-sizing: border-box;
color: var(--text-color);
}
.cash-pult-btns .cash-pult-skip {
letter-spacing: -0.22em;
}
#levelPrevBtn,
#levelPauseBtn,
#levelNextBtn {
font-size: 31px;
line-height: 1;
height: var(--player-height);
box-sizing: border-box;
}
#levelPrevBtn,
#levelNextBtn {
letter-spacing: -0.22em;
}
.pause-bars {
display: inline-flex;
gap: 5px;
align-items: center;
justify-content: center;
}
.pause-bars i {
display: block;
width: 9px;
height: 24px;
background: currentColor;
border-radius: 2px;
font-style: normal;
}
.stop-square {
display: inline-block;
width: 23px;
height: 23px;
background: currentColor;
border-radius: 3px;
}
#levelPauseBtn {
position: relative;
overflow: hidden;
}
#levelPauseBtn .level-btn-progress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: rgba(255, 255, 255, 0.2);
pointer-events: none;
z-index: 0;
}
#levelPauseBtn .level-btn-layout {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
line-height: 1;
position: relative;
z-index: 1;
}
#levelPauseBtn .level-btn-mm,
#levelPauseBtn .level-btn-ss {
font-size: 26px;
font-weight: 700;
color: inherit;
line-height: 1;
font-variant-numeric: tabular-nums;
text-align: center;
}
#levelPauseBtn .level-btn-mm {
justify-self: center;
}
#levelPauseBtn .level-btn-ss {
justify-self: center;
}
#levelPauseBtn .level-btn-glyph {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
.play-glyph {
font-size: 38px;
line-height: 1;
}
#levelPauseBtn.is-danger .level-btn-glyph {
transform: none;
}
#levelPauseBtn:disabled .level-btn-glyph {
transform: none;
}
.blinds-timer-bar {
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
background-color: var(--card-bg);
padding: 10px 16px;
min-height: var(--player-height);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
--bar-progress: 0%;
}
.blinds-timer-bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(40, 167, 69, 0.18) 0%,
rgba(40, 167, 69, 0.18) var(--bar-progress),
rgba(255, 69, 58, 0.18) var(--bar-progress),
rgba(255, 69, 58, 0.18) 100%
);
pointer-events: none;
}
.blinds-timer-bar > * {
position: relative;
}
.blinds-timer-bar-text {
font-size: 26px;
font-weight: 700;
color: var(--text-color);
line-height: 1;
}
.blinds-timer-bar-time {
font-size: 26px;
font-weight: 700;
color: var(--text-color);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.blinds-timer-bar.is-paused .blinds-timer-bar-time {
color: var(--red);
}
.blinds-timer-bar.is-break .blinds-timer-bar-text,
.blinds-timer-bar.is-break .blinds-timer-bar-time {
color: #dc3545;
}
.blinds-timer-bar.is-scheduled .blinds-timer-bar-text,
.blinds-timer-bar.is-scheduled .blinds-timer-bar-time {
color: #1e90ff;
}
.blinds-timer-bar .blind-sep {
display: inline-block;
line-height: 1;
vertical-align: baseline;
margin: 0 0.08em;
}
#playerSelectionScreen .blinds-timer-bar {
margin-bottom: var(--spacing-lg);
}
#playerSelectionScreen .players-list-container {
padding: 0;
gap: var(--spacing-lg);
}
#playerSelectionScreen .players-list {
margin-bottom: 0;
}
#playerSelectionScreen .admin-button {
margin-top: 0;
}
.shot-clock-row {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.shot-clock-btn {
flex: 1 1 0;
min-width: 0;
min-height: var(--player-height);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0;
border: 0;
border-radius: var(--border-radius);
background-color: var(--card-bg);
color: var(--text-color);
font-family: inherit;
font-size: 26px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.shot-clock-btn span {
font-size: 13px;
font-weight: 400;
line-height: 1;
color: var(--secondary-text);
}
.shot-clock-btn:active {
background-color: var(--border-color);
}
.shot-clock-overlay {
position: fixed;
inset: 0;
z-index: 10002;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-xl);
background: rgba(0, 0, 0, 0.94);
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
--clock-color: #d4a843;
--clock-progress: 100;
}
.shot-clock-dial {
position: relative;
width: min(78vw, 46vh);
aspect-ratio: 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(
var(--clock-color) calc(var(--clock-progress) * 1%),
rgba(255, 255, 255, 0.09) 0
);
}
.shot-clock-dial::before {
content: '';
position: absolute;
inset: 14px;
border-radius: 50%;
background: #000;
}
.shot-clock-digits {
position: relative;
font-size: min(34vw, 20vh);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--clock-color);
}
.shot-clock-caption {
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--secondary-text);
}
.shot-clock-hint {
font-size: 14px;
color: var(--secondary-text);
}
.shot-clock-overlay.is-over {
background: var(--red);
}
.shot-clock-overlay.is-over .shot-clock-dial::before {
background: var(--red);
}
.shot-clock-overlay.is-over .shot-clock-digits,
.shot-clock-overlay.is-over .shot-clock-caption,
.shot-clock-overlay.is-over .shot-clock-hint {
color: rgba(0, 0, 0, 0.82);
}
.shot-clock-overlay.is-over .shot-clock-mute {
background: rgba(0, 0, 0, 0.14);
color: rgba(0, 0, 0, 0.82);
}
.shot-clock-mute {
position: absolute;
top: calc(var(--sat) + 12px);
right: 16px;
width: 44px;
height: 44px;
border: 0;
border-radius: 22px;
background: rgba(255, 255, 255, 0.08);
color: var(--text-color);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.tables-action-button.is-attention {
background-color: var(--dark-yellow);
color: white;
}
.tables-action-button.is-attention:active {
background-color: #8b6900;
}
.tables-action-button.is-primary {
background-color: #28a745;
color: white;
}
.tables-action-button.is-primary:active {
background-color: #1e7e34;
}
.tables-action-button.is-danger {
background-color: #dc3545;
color: white;
}
.tables-action-button.is-danger:active {
background-color: #bd2130;
}
.ww-seg {
position: relative;
display: flex;
flex-direction: row;
gap: 2px;
padding: 3px;
box-sizing: border-box;
min-height: var(--player-height);
border-radius: var(--border-radius);
background: var(--card-bg);
--seg-i: 0;
--seg-n: 1;
}
.ww-seg-thumb {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
width: calc((100% - 6px - (var(--seg-n) - 1) * 2px) / var(--seg-n));
border-radius: calc(var(--border-radius) - 3px);
background: var(--blue);
transform: translateX(calc((100% + 2px) * var(--seg-i)));
transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
background-color 0.2s ease;
pointer-events: none;
}
.ww-seg-item {
position: relative;
z-index: 1;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border: none;
border-radius: calc(var(--border-radius) - 3px);
background: transparent;
color: var(--secondary-text);
font-size: 16px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color 0.2s ease;
}
.ww-seg-item.is-selected {
color: #fff;
font-weight: 700;
}
.ww-seg-item:not(.is-selected):active {
color: var(--text-color);
}
@media (prefers-reduced-motion: reduce) {
.ww-seg-thumb,
.ww-seg-item {
transition: none;
}
}
.tables-action-button:active {
background-color: var(--border-color);
}
#registrationCalendarList {
padding: 0 0 var(--spacing-lg) 0;
}
#birthdaysCalendarList,
#tournamentsCalendarList {
padding: 0 0 var(--spacing-lg) 0;
}
#registrationCalendarScreen {
padding: 0;
}
#birthdaysCalendarScreen,
#tournamentsCalendarScreen {
padding: 0;
}
.registration-year {
scroll-snap-align: start;
min-height: 0;
padding-top: var(--spacing-sm);
padding-bottom: var(--spacing-md);
}
.registration-year-title {
font-size: 32px;
font-weight: 700;
color: var(--text-color);
margin: 0 0 var(--spacing-md) 0;
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.registration-year.current-year .registration-year-title {
color: var(--red);
}
.registration-months-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
align-content: start;
}
.registration-month {
min-width: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.month-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.month-overlay.visible {
display: block;
}
.month-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
}
.month-overlay-card {
position: absolute;
inset: 0;
background: var(--bg-color);
border-radius: 0;
overflow: hidden;
transform-origin: top left;
opacity: 0;
}
.month-overlay-content {
height: 100%;
display: flex;
flex-direction: column;
}
.month-overlay-calendar {
flex: 0 0 auto;
padding: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-lg);
position: relative;
z-index: 1;
background: var(--bg-color);
}
.month-overlay-title {
font-size: 32px;
font-weight: 700;
color: var(--text-color);
margin: 0 0 var(--spacing-md) 0;
display: inline-flex;
align-items: center;
gap: 0.35em;
text-transform: none;
}
.month-overlay.suspended {
display: none;
visibility: hidden;
pointer-events: none;
}
.month-overlay-title.current-month {
color: var(--red);
}
.month-overlay-calendar .registration-month-grid {
gap: 6px;
row-gap: 0;
position: relative;
padding: 0;
}
.month-overlay-week-separator {
grid-column: 1 / -1;
height: 12px;
position: relative;
}
.month-overlay-week-separator::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 1px;
background-color: var(--border-color);
opacity: 0.33;
pointer-events: none;
}
.month-overlay-calendar .registration-day {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
position: relative;
flex-shrink: 0;
}
.month-overlay-calendar .registration-day[data-day-key] {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.month-overlay-calendar .registration-day[data-day-key]:active {
background: var(--border-color);
}
.month-overlay-calendar .registration-day.selected-day {
background: transparent;
color: var(--blue);
}
.month-overlay-calendar .registration-day {
-webkit-tap-highlight-color: transparent;
}
.month-overlay-calendar .registration-day .dot::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 999px;
border: 2px solid transparent;
pointer-events: none;
}
.month-overlay-calendar .registration-day.selected-day .dot::before {
border-color: rgba(10, 132, 255, 0.55);
}
.month-overlay-list {
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 0 0 var(--spacing-lg) 0;
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.month-overlay-list.bounce-only::after {
content: '';
display: block;
height: 1px;
}
.month-overlay-list-group {
display: flex;
flex-direction: column;
gap: 0;
background: transparent;
border-radius: 0;
overflow: visible;
border: none;
flex: 1 1 auto;
}
.month-overlay-list.bounce-only .month-overlay-list-group {
min-height: calc(100% + 2px);
}
.month-overlay-list.bounce-only .month-overlay-empty {
min-height: calc(100% + 2px);
}
.month-overlay-item {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
min-height: var(--player-height);
font-size: 17px;
transition: background-color 0.2s;
border-radius: 0;
background: transparent;
border: none;
margin-bottom: 0;
position: relative;
width: 100%;
text-align: left;
appearance: none;
-webkit-appearance: none;
font: inherit;
}
.month-overlay-item + .month-overlay-item::before {
content: '';
position: absolute;
left: var(--spacing-lg);
right: var(--spacing-md);
top: 0;
height: 1px;
background: var(--border-color);
opacity: 0.25;
pointer-events: none;
}
.month-overlay-item:active {
background: var(--border-color);
}
.month-overlay-item-icon {
width: 44px;
height: 44px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex: 0 0 auto;
background: var(--border-color);
color: var(--text-color);
position: relative;
}
.month-overlay-item-icon.playing {
background-color: var(--green);
color: #fff;
}
.month-overlay-item-icon.dealer {
background-color: var(--blue);
color: #fff;
}
.month-overlay-item-icon.cancelled {
background-color: #f85149;
color: #fff;
opacity: .5;
}
.month-overlay-item-icon.out {
background-color: var(--border-color);
color: var(--secondary-text);
}
.month-overlay-item-icon img {
width: 100%;
height: 100%;
border-radius: 999px;
background: var(--border-color) url('https://wwpoker.ru/img/avatar.png') center / cover no-repeat;
object-fit: cover;
display: block;
}
.month-overlay-item-icon::after {
display: none;
}
.month-overlay-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.month-overlay-item-title {
font-size: 17px;
line-height: 1.2;
font-weight: 700;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.month-overlay-item-subtitle {
font-size: 15px;
line-height: 1.2;
color: var(--secondary-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.month-overlay-item-right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.month-overlay-item-badge {
font-size: 15px;
color: var(--secondary-text);
}
.month-overlay-item-meta {
font-size: 12px;
color: var(--secondary-text);
}
.month-overlay-item.today-item .month-overlay-item-icon::after {
content: '';
display: block;
position: absolute;
inset: 0;
border-radius: 999px;
box-shadow: inset 0 0 0 2px var(--red);
pointer-events: none;
}
.month-overlay-item.tt-weekly { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04) 70%, transparent); }
.month-overlay-item.tt-special { background: linear-gradient(90deg, rgba(139,92,246,.18), rgba(139,92,246,.04) 70%, transparent); }
.month-overlay-item.tt-closed { background: linear-gradient(90deg, rgba(212,168,67,.18), rgba(212,168,67,.04) 70%, transparent); }
.month-overlay-item.tt-online { background: linear-gradient(90deg, rgba(20,184,166,.18), rgba(20,184,166,.04) 70%, transparent); }
.month-overlay-item.tt-cancelled { background: linear-gradient(90deg, rgba(142,142,147,.18), rgba(142,142,147,.04) 70%, transparent); }
.month-overlay-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
font-size: 17px;
font-weight: 700;
}
.month-overlay-anim-clone {
position: fixed;
left: 0;
top: 0;
transform-origin: top left;
will-change: transform;
z-index: 10000;
overflow: hidden;
border-radius: 18px;
background: var(--bg-color);
}
.month-overlay-placeholder {
visibility: hidden;
pointer-events: none;
}
.registration-month-title {
font-size: clamp(14px, 4.2vw, 18px);
font-weight: 600;
color: var(--text-color);
margin: 0 0 6px 0;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.registration-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 1.35em;
height: 1.35em;
padding: 0 0.35em;
border-radius: 999px;
background-color: var(--border-color);
color: var(--secondary-text);
font-size: 0.8em;
font-weight: 700;
line-height: 1;
flex: 0 0 auto;
}
.registration-month.current-month .registration-month-title {
color: var(--red);
}
.registration-month.muted-month {
opacity: 0.45;
}
.registration-month.muted-month.current-month {
opacity: 0.7;
}
.registration-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.registration-day {
width: 100%;
aspect-ratio: 1 / 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
color: var(--text-color);
opacity: 0.85;
}
.registration-day.weekend,
.registration-day.holiday {
color: var(--red);
}
.month-overlay-calendar .registration-day.selected-day,
.month-overlay-calendar .registration-day.today-cell {
font-weight: 700;
}
.month-overlay-calendar .registration-day.selected-day:not(.today-cell) {
font-weight: 400;
}
.registration-day.blank {
opacity: 0;
}
.registration-day .dot {
width: 100%;
height: 100%;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
font-size: 1em;
color: #fff;
}
.registration-day .dot.empty {
background-color: transparent;
color: inherit;
}
.registration-day .dot.today {
background-color: transparent;
color: var(--red);
box-shadow: inset 0 0 0 1px var(--red);
}
.registration-day.today-cell .dot:not(.today)::after {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--red);
pointer-events: none;
}
.month-overlay-calendar .registration-day .dot.today {
box-shadow: inset 0 0 0 2px var(--red);
}
.month-overlay-calendar .registration-day.today-cell .dot:not(.today)::after {
box-shadow: inset 0 0 0 2px var(--red);
}
.registration-day .dot.has-registrations {
background-color: var(--green);
}
.registration-day .dot.birthday-photo {
background-color: var(--border-color);
overflow: hidden;
padding: 0;
}
.registration-day .dot.birthday-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--border-color) url('https://wwpoker.ru/img/avatar.png') center / cover no-repeat;
}
.registration-day .dot.tournament-finished {
background-color: var(--border-color);
color: var(--secondary-text);
}
.registration-day .dot.tournament-active {
background-color: var(--green);
color: #fff;
}
.registration-day .dot.tournament-scheduled {
background-color: var(--blue);
color: #fff;
}
.registration-day .dot.tournament-cancelled {
background-color: #f85149;
color: #fff;
opacity: .5;
}
.registration-day .dot.playing {
background-color: var(--green);
color: #fff;
}
.registration-day .dot.dealer {
background-color: var(--blue);
color: #fff;
}
.registration-day .dot.cancelled {
background-color: #f85149;
color: #fff;
opacity: .5;
}
.registration-day .dot.out {
background-color: var(--border-color);
color: var(--secondary-text);
}
.player-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
}
.player-name {
font-size: 15px;
font-weight: 400;
text-align: left;
line-height: 1.2;
margin-bottom: var(--spacing-xxs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: var(--secondary-text);
}
#chargesList .player-nickname {
max-width: 100%;
}
.player-nickname {
font-size: 17px;
color: var(--text-color);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-nickname:has(.zodiac-badge),
.player-nickname:has(.player-bandit-badge),
.player-nickname:has(.regular-badge),
.player-nickname:has(.player-sitout-badge),
.player-nickname:has(.player-dealer-badge) {
display: flex;
align-items: center;
}
.player-king-badge {
margin-left: 6px;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.player-sitout-badge {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: #ff3b30;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.regular-badge {
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-left: 5px;
color: var(--gold);
vertical-align: -0.12em;
flex: 0 0 auto;
}
.player-dealer-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
margin-left: 6px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.player-dealer-badge.playing {
background-color: var(--blue);
}
.player-dealer-badge.non-playing {
background-color: var(--gold);
color: #000;
}
.player-bandit-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ff3b30;
margin-left: 6px;
flex-shrink: 0;
}
.player-bandit-badge svg {
width: 100%;
height: 100%;
display: block;
}
.player-bandit-bounty {
color: #ff3b30;
font-size: 13px;
font-weight: 700;
margin-left: 6px;
white-space: nowrap;
}
.player-early-bird {
display: inline-flex;
align-items: center;
font-size: 14px;
margin-right: 4px;
line-height: 1;
}
.player-nickname .player-early-bird {
margin: 0 0 0 6px;
flex-shrink: 0;
}
.zodiac-badge {
width: 20px;
height: 20px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 12px;
line-height: 1;
margin: 0 6px 0 4px;
flex-shrink: 0;
}
.zodiac-badge.zodiac-fire {
background-color: #ff9f0a;
}
.zodiac-badge.zodiac-earth {
background-color: #34c759;
}
.zodiac-badge.zodiac-air {
background-color: #c7c7cc;
}
.zodiac-badge.zodiac-water {
background-color: #0a84ff;
}
.player-rebuys {
display: flex;
gap: var(--spacing-xs);
}
.player-rebuys.registration-date {
font-size: 12px;
color: var(--secondary-text);
gap: 0;
}
.player-out-info.registration-date .player-position {
font-size: 12px;
font-weight: 400;
color: var(--secondary-text);
}
.rebuy-dot {
width: 10px;
height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
color: var(--red);
background: transparent;
border-radius: 0;
position: relative;
top: 1px;
}
.rebuy-dot::before {
content: '\2665';
}
.rebuy-dot.used {
color: var(--gray);
background: transparent;
}
.player-out-info {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
text-align: right;
flex-shrink: 0;
}
.player-out-info + .chevron {
margin-left: calc(-1 * var(--spacing-sm));
}
.player-position {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
display: flex;
align-items: center;
line-height: 1;
}
.player-position-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--badge-bg);
color: var(--badge-color);
font-size: 12px;
font-weight: 700;
margin-right: 3px;
}
.player-stat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
margin-right: 6px;
line-height: 1;
}
.player-stat-badge.outs {
background-color: var(--green);
color: #fff;
}
.player-stat-badge.rebuys {
background-color: var(--red);
color: #fff;
}
.player-position-badge.gold {
background-color: var(--gold);
color: #000;
}
.player-position-badge.silver {
background-color: var(--silver);
color: #000;
}
.player-position-badge.bronze {
background-color: var(--bronze);
color: #fff;
}
.player-position-badge.top-half {
background-color: #1a6b5a;
color: #eafff8;
}
.out-time {
font-size: 14px;
color: var(--secondary-text);
margin-top: 0;
}
.cash-play-time {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-top: 0;
}
.cash-play-time.short { color: #ff3b30; }
.cash-play-time.long { color: #34c759; }
.out-by-time {
font-size: 14px;
color: var(--secondary-text);
margin-top: 0;
display: flex;
align-items: baseline;
justify-content: flex-end;
max-width: min(200px, 52vw);
white-space: nowrap;
}
.out-by-time .out-by-nick {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.out-by-time .out-by-rest {
flex-shrink: 0;
}
.player-button.has-out-by .player-info {
flex: 0 0 auto;
max-width: 60%;
}
.player-button.has-out-by .player-out-info {
flex: 1 1 auto;
min-width: 0;
}
.player-button.has-out-by .out-by-time {
max-width: 100%;
}
.out-by-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: transparent;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
}
.out-by-overlay-card {
width: 100%;
background: color-mix(in srgb, var(--card-bg) 50%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -4px 24px rgba(255, 255, 255, 0.06);
border-radius: 18px 18px 0 0;
position: relative;
color: var(--text-color);
box-sizing: content-box;
height: 90dvh;
max-height: 90dvh;
transform: translate3d(0, 100vh, 0);
will-change: transform;
margin-bottom: calc(-100vh - env(safe-area-inset-bottom, 0px));
padding-bottom: calc(100vh + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
}
.out-by-overlay-card.is-tall {
height: calc(100dvh - var(--sat) - 8px);
max-height: calc(100dvh - var(--sat) - 8px);
}
#journalScreen .header-icon { display: none; }
#journalScreen .tournament-header-row { position: relative; }
#journalScreen .tournament-header-text { flex: 1 1 auto; min-width: 0; }
#journalControls:empty { display: none; }
#dealersScreen .header-icon { display: none; }
#dealersScreen .tournament-header-row { position: relative; }
#dealersScreen .tournament-header-text { flex: 1 1 auto; min-width: 0; }
#checklistScreen .header-icon { display: none; }
#checklistScreen .tournament-header-text { flex: 1 1 auto; min-width: 0; }
#dealerChecklistHost { margin-top: calc(var(--spacing-lg) * 2); }
#shopOrderHost { margin-top: var(--spacing-lg); }
.shop-status { flex: none; margin-left: var(--spacing-sm); font-size: 14px; font-weight: 600; white-space: nowrap; text-align: right; }
.shop-row.is-cancelled .player-nickname { text-decoration: line-through; color: var(--secondary-text); }
.player-button.shop-out { opacity: .5; }
.players-list-section-title.settle-gh { display: flex; justify-content: space-between; align-items: baseline; padding-right: var(--spacing-md); }
.settle-gh-sum { text-transform: none; font-variant-numeric: tabular-nums; }
@keyframes settleFlash { from { background-color: color-mix(in srgb, var(--green) 28%, var(--card-bg)); } to { background-color: var(--card-bg); } }
@keyframes settleGone { 0% { background-color: color-mix(in srgb, var(--red) 30%, var(--card-bg)); } 100% { background-color: color-mix(in srgb, var(--red) 12%, var(--card-bg)); opacity: .55; } }
.out-by-overlay-card.is-tall .out-by-overlay-list { padding-bottom: 0; }
.pay-sheet .out-by-overlay-title-main { color: var(--text-color); }
.pay-sheet .out-by-overlay-title-photo { margin-left: auto; }
.out-by-overlay-handle {
width: 44px;
height: 5px;
border-radius: 999px;
background: var(--sheet-handle, rgba(255, 255, 255, 0.35));
margin: 10px auto 6px;
flex: 0 0 auto;
}
html[data-demo="1"] .pd-money,
html[data-demo="1"] .pd-name,
html[data-demo="1"] .pd-phone,
html[data-demo="1"] .pd-birthday,
html[data-demo="1"] .pd-text,
html[data-demo="1"] .phonebook-num,
html[data-demo="1"] .phonebook-meta,
html[data-demo="1"] #birthdayValue,
html[data-demo="1"] .bot-bubble-content,
html[data-demo="1"] .player-edit-form input[data-pef="first_name"],
html[data-demo="1"] .player-edit-form input[data-pef="patronymic"],
html[data-demo="1"] .player-edit-form input[data-pef="last_name"],
html[data-demo="1"] .player-edit-form input[data-pef="phone"],
html[data-demo="1"] .player-edit-form input[data-pef="birthday"] {
filter: blur(0.28em);
user-select: none;
-webkit-user-select: none;
}
html[data-demo="1"] .pd-photo,
html[data-demo="1"] .pd-photo img,
html[data-demo="1"] img[data-player-id],
html[data-demo="1"] #playerPhotoImage,
html[data-demo="1"] .avatar-history-cell img,
html[data-demo="1"] .month-overlay-item-icon img,
html[data-demo="1"] .out-by-choice-photo img,
html[data-demo="1"] .out-by-overlay-title-photo img,
html[data-demo="1"] .seating-circle img,
html[data-demo="1"] .seating-confirm-avatar img,
html[data-demo="1"] .move-player-box img {
filter: blur(8px);
transform: scale(1.2);
clip-path: circle(50%);
}
html[data-demo="1"] .avatar-history-cell img {
clip-path: inset(0 round 12px);
}
html[data-demo="1"] .month-overlay-item-icon {
overflow: hidden;
}
html[data-demo="1"] .position-indicator.photo-indicator {
overflow: hidden;
border-radius: 999px;
}
html[data-demo="1"] #financePreviewList .player-name:not(.charges-line),
html[data-demo="1"] #chargesList .player-name:not(.charges-line) {
padding-top: 10px;
padding-bottom: 10px;
margin-top: -10px;
margin-bottom: calc(var(--spacing-xxs) - 10px);
}
html[data-demo="1"] .month-overlay-item-subtitle {
padding-top: 10px;
padding-bottom: 10px;
margin-top: -10px;
margin-bottom: -10px;
}
#demoBadge {
position: fixed;
left: calc(8px + env(safe-area-inset-left));
bottom: calc(8px + env(safe-area-inset-bottom));
z-index: 9999;
padding: 2px 7px;
border: 1px solid var(--orange, #ff9500);
border-radius: 6px;
color: var(--orange, #ff9500);
background: var(--bg-color);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
opacity: 0.55;
pointer-events: none;
display: none;
}
html[data-demo="1"] #demoBadge { display: block; }
.out-by-overlay-title {
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
font-size: 22px;
font-weight: 700;
flex: 0 0 auto;
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.out-by-overlay-title-photo {
width: 44px;
height: 44px;
border-radius: 999px;
overflow: hidden;
background: var(--border-color);
flex: 0 0 auto;
}
.out-by-overlay-title-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.out-by-overlay-title-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.out-by-overlay-title-main {
font-size: 17px;
font-weight: 700;
color: #dc3545;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.out-by-overlay-title-sub {
font-size: 15px;
font-weight: 600;
color: var(--secondary-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.out-by-overlay-title-burst {
margin-left: auto;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--red);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
flex: 0 0 auto;
}
.out-by-overlay-title::after {
content: '';
position: absolute;
left: var(--spacing-lg);
right: var(--spacing-lg);
bottom: 0;
height: 1px;
background-color: var(--border-color);
opacity: 0.33;
pointer-events: none;
}
.out-by-overlay-list {
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
padding-bottom: 38px;
}
.out-by-choice {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
min-height: var(--player-height);
border: none;
background: transparent;
color: var(--text-color);
text-align: left;
cursor: pointer;
position: relative;
}
.out-by-choice + .out-by-choice::before {
content: '';
position: absolute;
left: var(--spacing-lg);
right: var(--spacing-lg);
top: 0;
height: 1px;
background: var(--border-color);
opacity: 0.25;
pointer-events: none;
}
.out-by-choice-right {
margin-left: auto;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.out-by-choice-box-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
background-color: var(--green);
color: #fff;
font-size: 18px;
flex: 0 0 auto;
line-height: 1;
}
.out-by-choice-crown {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
background-color: var(--yellow);
color: #000;
font-size: 18px;
flex: 0 0 auto;
line-height: 1;
}
.bbnt-overlay {
position: fixed;
inset: 0;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.62);
opacity: 0;
transition: opacity 0.22s ease;
}
.bbnt-overlay.bbnt-active { opacity: 1; }
.bbnt-card {
width: 100%;
max-width: 380px;
background: color-mix(in srgb, var(--card-bg) 88%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid color-mix(in srgb, var(--bounty-gold) 45%, transparent);
border-radius: 22px;
padding: 22px 20px 18px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
transform: scale(0.85);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 0.28s ease;
}
.bbnt-overlay.bbnt-active .bbnt-card { transform: scale(1); opacity: 1; }
.bbnt-icon { font-size: 40px; line-height: 1; }
.bbnt-title {
font-size: 20px;
font-weight: 800;
text-align: center;
color: var(--text-color);
}
.bbnt-avatars {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 4px;
}
.bbnt-av {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 120px;
}
.bbnt-av-photo {
width: 70px;
height: 70px;
border-radius: 999px;
overflow: hidden;
background: var(--secondary-bg-color, #2c2c2e);
flex: 0 0 auto;
border: 3px solid transparent;
}
.bbnt-av-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbnt-av--killer .bbnt-av-photo { border-color: var(--bounty-gold); }
.bbnt-av--victim .bbnt-av-photo { border-color: var(--red, #dc3545); opacity: 0.85; }
.bbnt-av-nick {
font-size: 13px;
font-weight: 700;
color: var(--text-color);
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.bbnt-av--killer .bbnt-av-nick { color: var(--bounty-gold); }
.bbnt-vs {
font-size: 12px;
font-weight: 700;
color: var(--secondary-text-color, #98989e);
text-transform: uppercase;
letter-spacing: 0.5px;
flex: 0 0 auto;
}
.bbnt-amount {
font-size: 30px;
font-weight: 900;
color: var(--bounty-gold);
margin-top: 4px;
line-height: 1.1;
}
.bbnt-note {
font-size: 14px;
font-weight: 500;
text-align: center;
color: var(--secondary-text-color, #98989e);
line-height: 1.35;
}
.bbnt-note b { color: var(--text-color); font-weight: 700; }
.bbnt-done {
margin-top: 8px;
width: 100%;
padding: 13px;
border: none;
border-radius: 14px;
background: var(--bounty-gold);
color: #1a1a1a;
font-size: 16px;
font-weight: 800;
cursor: pointer;
}
.bbnt-done:active { filter: brightness(0.92); }
.move-player-overlay-list {
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
padding-bottom: 38px;
}
.move-player-table {
padding: var(--spacing-sm) var(--spacing-md) calc(var(--spacing-sm) * 2) var(--spacing-lg);
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.move-player-table + .move-player-table::before {
content: '';
position: absolute;
left: var(--spacing-lg);
right: var(--spacing-lg);
top: 0;
height: 1px;
background: var(--border-color);
opacity: 0.25;
transform: translateY(-6px);
pointer-events: none;
}
.move-player-table-title {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
}
.move-player-table-count {
font-size: 12px;
font-weight: 600;
color: var(--green, #34c759);
justify-self: end;
}
.move-player-table-current {
font-size: 12px;
font-weight: 700;
color: var(--secondary-text);
justify-self: center;
}
.move-player-table-current.is-empty {
opacity: 0;
}
.move-player-boxes {
display: flex;
gap: 2px;
flex-wrap: nowrap;
justify-content: space-between;
--move-box-gap: 2px;
--move-box-count: 9;
--move-box-size: calc((100% - (8 * var(--move-box-gap))) / var(--move-box-count));
align-items: center;
}
.move-player-box {
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
border-radius: 50%;
width: var(--move-box-size);
max-width: 44px;
min-width: 26px;
aspect-ratio: 1 / 1;
font-size: clamp(12px, 3.5vw, 18px);
font-weight: 700;
padding: 0;
flex: 0 0 auto;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.move-player-box.has-photo {
padding: 0;
}
.move-player-box.has-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
background: var(--border-color) url('https://wwpoker.ru/img/avatar.png') center / cover no-repeat;
}
.move-player-box.is-free {
background: var(--green, #34c759);
color: #fff;
border-color: transparent;
}
.move-player-box.is-free-out {
background: #1a5c32;
color: #fff;
border-color: transparent;
}
.move-player-box.is-current {
background: transparent;
color: var(--text-color);
border: 2px solid var(--blue, #2f80ff);
box-shadow: none;
}
.move-player-box.is-occupied {
background: var(--border-color);
color: var(--secondary-text);
cursor: not-allowed;
opacity: 0.65;
}
.move-player-box.is-occupied.has-photo {
background: transparent;
opacity: 1;
}
.move-player-box.is-current.has-photo {
border: 2px solid var(--blue, #2f80ff);
box-shadow: none;
}
.move-player-box:disabled {
cursor: not-allowed;
}
#seatingScreen > .header-content {
margin-bottom: var(--spacing-xxl);
}
.seating-actions {
display: flex;
gap: var(--spacing-md);
padding: 0 0 var(--spacing-xxl);
}
.seating-actions .tables-action-button {
flex: 1 1 0;
min-width: 0;
padding: var(--spacing-md) var(--spacing-xs);
font-size: 13px;
}
.tables-action-button.is-add {
background-color: var(--green);
color: #fff;
}
.tables-action-button.is-add:active {
background-color: color-mix(in srgb, var(--green) 80%, #000);
}
#allPlayersActions {
padding: 0 0 var(--spacing-lg);
}
#allPlayersActions .tables-action-button {
padding: var(--spacing-md) var(--spacing-lg);
font-size: 17px;
}
.seating-confirm-overlay {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(0,0,0,0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
touch-action: none;
overscroll-behavior: contain;
}
.seating-confirm-card {
width: 100%;
max-width: 340px;
background: color-mix(in srgb, var(--card-bg) 75%, transparent);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
border-radius: 18px;
padding: 24px 20px 18px;
text-align: center;
color: var(--text-color);
box-shadow: 0 12px 48px rgba(0,0,0,0.4);
}
.seating-confirm-avatars {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
}
.seating-confirm-avatar {
width: 56px;
height: 56px;
border-radius: 999px;
overflow: hidden;
background: var(--border-color);
flex: 0 0 auto;
}
.seating-confirm-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.seating-confirm-arrow {
font-size: 22px;
color: var(--secondary-text);
}
.seating-confirm-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.seating-confirm-desc {
font-size: 13px;
color: var(--secondary-text);
margin-bottom: 18px;
line-height: 1.35;
white-space: pre-line;
}
.seating-confirm-buttons {
display: flex;
gap: 10px;
}
.seating-confirm-buttons.is-stacked {
flex-direction: column;
}
.seating-confirm-btn {
flex: 1;
border: none;
border-radius: 12px;
padding: 12px 0;
font-size: 15px;
font-weight: 700;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.seating-confirm-btn.confirm {
background: var(--green, #34c759);
color: #fff;
}
.seating-confirm-btn.blue {
background: var(--blue, #2f80ff);
color: #fff;
}
.seating-confirm-btn.cancel {
background: var(--border-color);
color: var(--text-color);
}
.suit-picker-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin: 12px 0 16px;
}
.suit-picker-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 2px;
border: 2px solid var(--border-color);
border-radius: 12px;
background: color-mix(in srgb, var(--card-bg) 60%, transparent);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
appearance: none;
transition: border-color .15s, transform .1s;
}
.suit-picker-btn:active { transform: scale(0.96); }
.suit-picker-btn.is-current { border-color: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); }
.suit-picker-symbol { font-size: 28px; line-height: 1; }
.suit-picker-name { font-size: 12px; font-weight: 600; color: var(--text-color); }
.out-by-choice:active {
background-color: var(--border-color);
}
.out-by-choice-photo {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background: var(--border-color);
flex-shrink: 0;
}
.out-by-choice-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.out-by-choice-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.out-by-choice-nick {
font-size: 17px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.out-by-choice-name {
font-size: 15px;
color: var(--secondary-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.out-by-choice.is-selected .out-by-choice-nick {
color: var(--check-green);
}
.out-by-choice-note {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chevron {
width: 24px;
height: 24px;
flex-shrink: 0;
opacity: 0.3;
display: flex;
align-items: center;
justify-content: center;
}
.chevron::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}
.table-label {
color: var(--secondary-text);
font-weight: 400;
}
.player-photo {
width: var(--photo-size-lg);
height: var(--photo-size-lg);
border-radius: calc(var(--photo-size-lg) / 2);
margin: 0 auto var(--spacing-lg);
background-color: var(--border-color);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: none;
color: var(--text-color);
box-shadow:
0 0 0 2px var(--bg-color),
0 0 0 3px var(--indicator-border, currentColor);
font-size: 80px;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
flex-direction: column;
gap: var(--spacing-lg);
font-size: 17px;
color: var(--secondary-text);
}
.loading-logo {
width: 60vw;
height: auto;
display: block;
max-width: 280px;
object-fit: contain;
}
.loading-logo,
.club-logo {
opacity: 0;
}
html[data-theme-ready="1"] .loading-logo,
html[data-theme-ready="1"] .club-logo {
opacity: 1;
}
.loading-text {
text-align: center;
}
.loading-club-name {
font-size: 17px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--secondary-text);
text-align: center;
opacity: 0;
transition: opacity 0.25s ease;
}
html[data-theme-ready="1"] .loading-club-name { opacity: 1; }
.loading-footer {
position: fixed;
left: 0; right: 0;
bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
text-align: center;
font-size: 13px;
color: var(--secondary-text, rgba(255,255,255,0.55));
letter-spacing: 0.02em;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 5;
}
html[data-theme-ready="1"] .loading-footer { opacity: 1; }
.ph-logo {
display: inline-flex;
align-items: baseline;
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
font-style: normal;
vertical-align: baseline;
}
.ph-logo-poker {
color: var(--text-color);
padding-right: 0.10em;
}
.ph-logo-hub {
background: #f59e0b;
color: #000;
border-radius: 0.18em;
padding: 0.02em 0.18em 0.05em;
}
.error-message {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
padding: var(--spacing-xl);
}
#fatalErrorOverlay {
position: fixed;
left: 12px;
right: 12px;
top: calc(12px + var(--sat));
z-index: 99999;
background: rgba(10, 12, 16, 0.95);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 12px 14px;
color: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
line-height: 1.35;
max-height: 45vh;
overflow: auto;
white-space: pre-wrap;
pointer-events: auto;
user-select: text;
cursor: pointer;
}
.error-title {
font-size: 20px;
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--red);
}
.error-text {
font-size: 16px;
color: var(--secondary-text);
margin-bottom: var(--spacing-lg);
}
.retry-button {
background-color: var(--blue);
color: white;
border: none;
border-radius: var(--border-radius);
padding: var(--spacing-md) var(--spacing-xxl);
font-size: 17px;
cursor: pointer;
}
.ww-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: var(--spacing-xl, 20px);
box-sizing: border-box;
text-align: center;
}
.ww-login-logo { width: 40vw; max-width: 170px; height: auto; margin-bottom: 14px; }
.ww-login-title {
font-size: 22px; font-weight: 700; color: var(--text-color);
letter-spacing: 0.5px; margin-bottom: 4px;
}
.ww-login-sub { font-size: 14px; color: var(--secondary-text); margin-bottom: 22px; }
.ww-login .ww-seg { width: 100%; max-width: 320px; margin-bottom: 16px; }
.ww-login-input {
width: 100%; max-width: 320px; box-sizing: border-box;
padding: 13px 14px; font-size: 17px; margin-bottom: 10px;
border-radius: 12px; border: 1px solid var(--border-color, var(--secondary-text));
background: var(--card-bg); color: var(--text-color);
}
.ww-login-code { text-align: center; letter-spacing: 8px; font-size: 24px; font-weight: 700; }
.ww-login-btn {
width: 100%; max-width: 320px; box-sizing: border-box;
padding: 13px 14px; font-size: 17px; font-weight: 600;
border: none; border-radius: 12px; cursor: pointer;
background-color: var(--blue); color: #fff;
}
.ww-login-btn[disabled] { opacity: 0.5; cursor: default; }
.ww-login-back {
width: 100%; max-width: 320px; margin-top: 10px; padding: 10px;
background: none; border: none; cursor: pointer;
font-size: 14px; color: var(--secondary-text);
}
.ww-login-sent { font-size: 14px; color: var(--secondary-text); margin-bottom: 12px; max-width: 320px; }
.ww-login-error { font-size: 14px; color: #ff453a; margin-top: 12px; max-width: 320px; line-height: 19px; }
.ww-login-hint { font-size: 13px; color: var(--secondary-text); margin-top: 18px; max-width: 320px; line-height: 18px; }
.hidden {
display: none !important;
}
@media (max-width: 768px) {
body {
background-color: var(--bg-color) !important;
}
.player-button,
.action-button,
.back-button {
background-color: var(--card-bg) !important;
}
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .screen {
padding: var(--spacing-lg) 0;
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .player-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .action-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .back-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .admin-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .register-game-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .ww-search-field {
min-height: var(--player-height-sm);
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .action-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .admin-button,
:where(html[data-vh="sm"], html[data-vh="xs"]) .register-game-button {
padding: 14px;
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .player-photo {
width: var(--photo-size-md);
height: var(--photo-size-md);
border-radius: calc(var(--photo-size-md) / 2);
font-size: 90px;
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .player-card-header .player-photo {
width: clamp(110px, 30vw, 180px);
font-size: 45px;
}
:where(html[data-vh="sm"], html[data-vh="xs"]) .tournament-title,
:where(html[data-vh="sm"], html[data-vh="xs"]) .player-title {
font-size: 24px;
}
:where(html[data-vh="xs"]) .screen {
padding: var(--spacing-md) 0;
}
:where(html[data-vh="xs"]) .tournament-title,
:where(html[data-vh="xs"]) .player-title {
font-size: 22px;
}
:where(html[data-vh="xs"]) .player-subtitle,
:where(html[data-vh="xs"]) .table-info {
font-size: 16px;
}
:where(html[data-vh="xs"]) .game-time,
:where(html[data-vh="xs"]) .tournament-date {
font-size: 14px;
}
:where(html[data-vh="xs"]) .player-button,
:where(html[data-vh="xs"]) .action-button,
:where(html[data-vh="xs"]) .back-button,
:where(html[data-vh="xs"]) .admin-button,
:where(html[data-vh="xs"]) .register-game-button,
:where(html[data-vh="xs"]) .ww-search-field {
min-height: var(--player-height-xs);
font-size: 16px;
}
:where(html[data-vh="xs"]) .action-button,
:where(html[data-vh="xs"]) .admin-button,
:where(html[data-vh="xs"]) .register-game-button {
padding: var(--spacing-md);
}
:where(html[data-vh="xs"]) .player-name {
font-size: 14px;
}
:where(html[data-vh="xs"]) .player-nickname {
font-size: 16px;
}
:where(html[data-vh="xs"]) .player-photo {
width: var(--photo-size-sm);
height: var(--photo-size-sm);
border-radius: calc(var(--photo-size-sm) / 2);
font-size: 80px;
}
:where(html[data-vh="xs"]) .player-card-header .player-photo {
width: clamp(104px, 30vw, 160px);
font-size: 40px;
}
.action-button,
.admin-button,
.register-game-button {
min-height: var(--player-height);
font-size: 16px;
padding: var(--spacing-md);
}
#playerCardBlindsBar {
min-height: var(--player-height);
}
.player-card-header .player-photo.avatar-history-clickable { cursor: pointer; }
.avatar-history-body {
width: 100%;
margin-top: var(--spacing-md);
}
.avatar-history-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
width: 100%;
max-height: 58vh;
overflow-y: auto;
}
.avatar-history-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.avatar-history-cell img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
background-color: var(--card-bg);
display: block;
}
.avatar-history-cell.current img {
outline: 2px solid var(--blue);
outline-offset: -2px;
}
.avatar-history-date {
font-size: 12px;
color: var(--secondary-text);
text-align: center;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.avatar-history-badge {
font-size: 12px;
font-weight: 700;
color: var(--blue);
}
.avatar-history-empty {
color: var(--secondary-text);
text-align: center;
padding: var(--spacing-lg);
}
.avatar-history-actions {
display: flex;
justify-content: center;
margin-top: var(--spacing-md);
}
.avatar-history-upload-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
border: none;
border-radius: 12px;
background-color: var(--blue);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.avatar-history-upload-btn:disabled {
opacity: 0.6;
cursor: default;
}
.avatar-history-note {
font-size: 12px;
color: var(--secondary-text);
text-align: center;
margin-top: 8px;
min-height: 14px;
}
.avatar-history-note.is-error { color: var(--red, #e5484d); }
.tables-section-padding {
padding: 0 var(--spacing-sm);
}
.level-timer-titles {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
padding-left: 0;
padding-right: 0;
margin-bottom: 8px;
}
.level-timer-title {
font-size: 13px;
font-weight: 400;
color: var(--secondary-text);
text-align: center;
text-transform: uppercase;
}
.level-timer-title.is-danger {
color: #dc3545;
}
#meHomeScreen.player-home #ratingBox,
#meHomeScreen.player-home #gamesBox,
#meHomeScreen.player-home #achievementsBox,
#meHomeScreen.player-home #ticketsBox {
display: none !important;
}
.me-rt-card {
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius);
background: var(--card-bg);
margin-bottom: var(--spacing-sm);
}
.me-rt-label {
font-size: 13px;
color: var(--secondary-text);
}
.me-rt-main {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-md);
margin-top: 2px;
}
.me-rt-points {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.me-rt-points span {
margin-left: 6px;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
color: var(--secondary-text);
}
.me-rt-rank {
font-size: 28px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.me-rt-league {
font-size: 15px;
font-weight: 600;
margin-top: 2px;
}
.me-rt-sub {
font-size: 13px;
color: var(--secondary-text);
margin-top: 4px;
}
.me-rt-chart {
display: block;
width: 100%;
padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--border-radius);
background: var(--card-bg);
color: var(--text-color);
font: inherit;
text-align: left;
cursor: pointer;
margin-bottom: var(--spacing-lg);
}
.me-rt-chart:active {
background-color: var(--border-color);
}
.me-rt-chart-head {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 15px;
font-weight: 600;
}
.me-rt-chart-delta {
margin-left: auto;
font-size: 13px;
font-weight: 500;
color: var(--secondary-text);
}
.me-rt-spark {
display: block;
width: 100%;
height: 56px;
margin-top: var(--spacing-sm);
}
.me-row-value {
margin-left: auto;
padding-left: var(--spacing-sm);
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.me-row-value.is-plus {
color: #d4a843;
}
.me-rt-row.is-me .player-nickname {
color: #d4a843;
font-weight: 700;
}
.me-rt-row,
.me-rt-game {
cursor: default;
}
.me-rt-row:active,
.me-rt-game:active {
background-color: transparent;
}
.me-rt-game .player-info,
.me-rt-row .player-info,
.me-wl-ticket .player-info {
flex: 1 1 auto;
min-width: 0;
}
.me-rt-game .player-nickname,
.me-rt-row .player-nickname,
.me-wl-ticket .player-nickname {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#meRatingScreen .me-back {
margin-bottom: var(--spacing-sm);
}
.me-wl-emoji {
background: transparent !important;
}
.me-tk-ico {
width: 100%;
height: 100%;
display: block;
}
.me-wl-dp {
margin-bottom: var(--spacing-sm);
}
.me-wl-all {
margin-top: var(--spacing-sm);
}
.me-aw-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-sm);
width: 100%;
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
border: none;
border-radius: var(--border-radius);
background: var(--card-bg);
color: var(--text-color);
font: inherit;
cursor: pointer;
}
.me-aw-strip:active {
background-color: var(--border-color);
}
.me-aw-tile {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.me-aw-pic {
width: 100%;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: rgba(127, 127, 127, 0.16);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
line-height: 1;
}
.me-aw-pic img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
.me-aw-pic img.is-sample {
opacity: 0.6;
}
.me-aw-name {
width: 100%;
font-size: 11px;
line-height: 1.25;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ww-switch {
position: relative;
flex: 0 0 51px;
width: 51px;
height: 31px;
margin-left: auto;
border-radius: 999px;
background: rgba(120, 120, 128, 0.32);
transition: background 0.18s ease;
}
.ww-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
transition: transform 0.18s ease;
}
[aria-checked="true"] > .ww-switch {
background: var(--green, #34c759);
}
[aria-checked="true"] > .ww-switch::after {
transform: translateX(20px);
}
.app-opt.is-demo[aria-checked="true"] > .ww-switch {
background: var(--orange, #ff9500);
}
.app-opts > .app-opt.is-last {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.app-opt {
min-height: var(--player-height);
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
}
.app-opt .player-info {
flex: 1 1 auto;
min-width: 0;
}
.app-opt .player-name {
white-space: normal;
}
.app-opt.is-done {
cursor: default;
}
.app-opt.is-done .chevron {
visibility: hidden;
}
.me-tt-card {
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius);
background: var(--card-bg);
margin-bottom: var(--spacing-sm);
}
.me-tt-head {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.me-tt-ico {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: block;
}
.me-tt-name {
font-size: 17px;
font-weight: 600;
}
.me-tt-hl {
margin-top: 6px;
font-size: 14px;
font-weight: 600;
color: #d4a843;
}
.me-tt-desc {
margin-top: 6px;
font-size: 15px;
line-height: 1.4;
}
.me-tt-terms {
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--secondary-text);
white-space: pre-line;
}
#meTicketTypesScreen .me-back {
margin-bottom: var(--spacing-sm);
}
.me-t-prize-tk {
display: inline-flex;
align-items: center;
gap: 6px;
}
.me-t-prize-ico {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: block;
}
.me-note {
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-lg);
border-radius: var(--border-radius);
background: linear-gradient(0deg, rgba(52, 199, 89, 0.12), rgba(52, 199, 89, 0.12)), var(--card-bg);
font-size: 15px;
line-height: 1.45;
color: var(--text-color);
}
.ptt-ico {
display: block;
width: 1em;
height: 1em;
color: #d4af37;
flex: 0 0 auto;
}
#meHomeScreen.player-home[data-player-tab="profile"] #playerInfoBoxes {
display: none !important;
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-card-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0 var(--spacing-xl);
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-card-header .player-photo {
width: 132px;
justify-self: auto;
outline: 2px solid rgba(212, 168, 67, 0.6);
outline-offset: 3px;
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-card-header .header-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-title,
#meHomeScreen.player-home[data-player-tab="profile"] .player-subtitle,
#meHomeScreen.player-home[data-player-tab="profile"] .table-info {
text-align: center;
}
#meHomeScreen.player-home[data-player-tab="profile"] .player-title {
margin-bottom: 4px;
font-size: 28px;
letter-spacing: -0.02em;
}
#meHomeScreen.player-home[data-player-tab="profile"] #selectedPlayerRating,
#meHomeScreen.player-home[data-player-tab="profile"] #selectedPlayerRoleBadge,
#meHomeScreen.player-home[data-player-tab="profile"] #selectedPlayerTableInfo,
#meHomeScreen.player-home[data-player-tab="profile"] #selectedPlayerDates {
display: none !important;
}
.me-catchphrase {
max-width: 34ch;
margin-top: var(--spacing-sm);
font-size: 15px;
font-style: italic;
line-height: 1.4;
color: var(--secondary-text);
text-align: center;
}
.me-catchphrase[hidden] {
display: none !important;
}
.me-pf-row .me-pf-val {
flex: 0 0 auto;
max-width: 50%;
margin-left: var(--spacing-sm);
font-size: 16px;
color: var(--secondary-text);
text-align: right;
font-variant-numeric: tabular-nums;
}
.me-pf-row .me-pf-val.is-debt {
color: var(--red);
font-weight: 700;
}
div.me-pf-row {
cursor: default;
}
#playerTabbar {
display: none;
}
body.ww-tabbar-on #playerTabbar {
display: block;
}
body.ww-tabbar-on .screen:not(#meHomeScreen) {
padding-bottom: calc(var(--spacing-xl) + (52px + max(var(--sab), var(--sab-tg))) / var(--app-zoom, 1));
}
#meSubScreen .me-back {
margin-bottom: var(--spacing-sm);
}
.me-tk-row .me-tk-more {
display: none;
margin-top: 6px;
font-size: 14px;
line-height: 1.4;
color: var(--secondary-text);
white-space: normal;
}
.me-tk-row.is-open .me-tk-more {
display: block;
}
.me-tk-row .chevron {
transition: transform 0.2s;
}
.me-tk-row.is-open .chevron {
transform: rotate(90deg);
}
.me-tk-row.is-spent .player-nickname,
.me-tk-row.is-spent .me-wl-emoji {
opacity: 0.55;
}
.me-tk-row .player-name,
.me-aw-row .player-name {
white-space: normal;
}
.me-tk-row,
.me-aw-row {
text-align: left;
}
.me-aw-row,
.me-tk-row.is-open {
padding-top: 10px;
padding-bottom: 10px;
}
.me-aw-thumb {
flex: 0 0 48px;
width: 48px;
height: 48px;
margin-right: var(--spacing-md);
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: rgba(127, 127, 127, 0.15);
color: #d4a843;
}
.me-aw-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.me-aw-thumb.is-sample img {
opacity: 0.6;
}
.me-aw-thumb svg {
width: 26px;
height: 26px;
fill: currentColor;
}
.me-aw-cite {
margin-top: 4px;
font-size: 14px;
font-style: italic;
color: var(--secondary-text);
}
.me-gm-place {
flex: 0 0 32px;
width: 32px;
height: 32px;
margin-right: var(--spacing-md);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.me-gm-place.is-none {
background: rgba(127, 127, 127, 0.18);
color: var(--secondary-text);
}
.me-pf-row .me-pf-val.is-plus {
color: var(--green, #34c759);
font-weight: 600;
}