.balance {
background: #1a2337;
border-radius: 10px;
padding: 7px 14px;
display: flex;
align-items: center;
gap: 10px;
}
.balance__label {
color: #7a8fa8;
font-weight: 600;
font-size: 14px;
}
.balance__value {
color: #ffffff;
font-weight: 700;
font-size: 16px;
}
@media (max-width: 1000px) and (orientation: portrait) {
.balance {
justify-content: center;
gap: 12px;
border-radius: 18px;
background: #2b374d;
padding: 0 7px;
}
.balance__label {
font-size: 13.333px;
font-weight: 500;
color: rgba(255, 255, 255, 0.66);
}
.balance__value {
font-size: 14.667px;
font-weight: 800;
color: #ffffff;
}
}
@media (max-width: 390px) and (orientation: portrait) {
.balance__label {
font-size: 11.333px;
}
.balance__value {
font-size: 13.333px;
}
}.sound-control {
position: relative;
}
.mute-button {
background: transparent;
border: none;
color: #ffffff;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.mute-button:focus-visible {
outline: 2px solid #f7e229;
outline-offset: 3px;
}
.sound-control__popover {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
z-index: 120;
width: 316px;
padding: 12px;
background: rgba(28, 42, 62, 0.96);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
color: #ffffff;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition:
opacity 140ms ease,
transform 140ms ease;
}
.sound-control--open .sound-control__popover {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.sound-control__popover::after {
content: '';
position: absolute;
right: 10px;
bottom: -6px;
width: 10px;
height: 10px;
background: rgba(28, 42, 62, 0.96);
border-right: 1px solid rgba(255, 255, 255, 0.16);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
transform: rotate(45deg);
}
.sound-control__slider-row {
display: grid;
grid-template-columns: 30px 2fr 38px;
align-items: center;
gap: 8px;
min-height: 32px;
font-size: 12px;
font-weight: 700;
}
.sound-control__slider-row + .sound-control__slider-row {
margin-top: 6px;
}
.sound-control__toggle-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.sound-control__checkbox {
width: 16px;
height: 16px;
margin: 0;
accent-color: #f7e229;
cursor: pointer;
}
.sound-control__value {
color: rgba(255, 255, 255, 0.72);
font-variant-numeric: tabular-nums;
text-align: right;
}
.sound-control__slider {
width: 100%;
accent-color: #f7e229;
cursor: pointer;
}
.sound-control__channel-button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
transition:
filter 140ms ease,
opacity 140ms ease;
}
.sound-control__channel-button:hover {
opacity: 0.86;
}
.sound-control__channel-button:focus-visible {
outline: 2px solid #f7e229;
outline-offset: 2px;
}
.sound-control__channel-button--muted {
filter: grayscale(1);
opacity: 0.72;
}
.sound-control__icon {
display: block;
overflow: visible;
}
.sound-control__icon-note-fill {
fill: #f7e229;
}
.sound-control__icon-music-stroke {
fill: none;
stroke: #f7e229;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.sound-control__icon-speaker-fill {
fill: #f7e229;
}
.sound-control__icon-fx-stroke {
fill: none;
stroke: #f7e229;
stroke-linecap: round;
stroke-width: 2.2;
}
.sound-control__icon-slash {
fill: none;
stroke: #ffffff;
stroke-linecap: round;
stroke-width: 3;
}.bottom-action-bar {
position: absolute;
left: 14px;
right: 14px;
bottom: 10px;
display: grid;
grid-template-columns: minmax(126px, 170px) minmax(0, 1fr) minmax(170px, 220px) 32px;
align-items: center;
gap: 16px;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.overlay--match-in-progress .bottom-action-bar {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.bottom-action-bar__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
justify-self: center;
width: fit-content;
max-width: 100%;
min-width: 0;
width: 100%;
}
.bottom-action-bar__button {
min-width: 0;
min-height: 52px;
padding: 10px 12px;
border: none;
border-radius: 999px;
background: #35425e;
color: rgba(255, 255, 255, 0.88);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: 800;
line-height: 1.15;
text-align: center;
text-transform: uppercase;
white-space: normal;
overflow-wrap: anywhere;
}
.bottom-action-bar__button:disabled {
cursor: default;
opacity: 0.62;
}
.bottom-action-bar__button:focus-visible {
outline: 2px solid #fff324;
outline-offset: 3px;
}
.bottom-action-bar__button--leave {
justify-self: start;
min-width: 156px;
min-height: 35px;
padding: 8px 28px;
font-size: 14px;
text-transform: none;
}
.bottom-action-bar__button--roll {
min-width: 205px;
background: #fff324;
color: #111827;
box-shadow: 0 6px 24px rgba(255, 243, 36, 0.22);
}
.bottom-action-bar__sound {
justify-self: end;
}
@media (max-width: 1100px) {
.bottom-action-bar {
gap: 10px;
grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(150px, 190px) 32px;
}
.bottom-action-bar__actions {
grid-template-columns: repeat(auto-fit, minmax(min(106px, 100%), 1fr));
gap: 10px;
}
.bottom-action-bar__button {
min-height: 40px;
padding: 8px 12px;
font-size: 15px;
}
.bottom-action-bar__button--leave {
min-width: 120px;
min-height: 34px;
font-size: 14px;
}
.bottom-action-bar__button--roll {
min-width: 170px;
}
}
@media (max-width: 1000px) and (orientation: portrait) {
.bottom-action-bar {
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 6px;
padding: 5px;
background: #1c2a3e;
}
.bottom-action-bar__actions {
order: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: 100%;
}
.bottom-action-bar__actions > .bottom-action-bar__button:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.bottom-action-bar__button {
width: 100%;
min-width: 0;
padding: 8px 10px;
font-size: 13px;
}
.bottom-action-bar__button--roll {
order: 2;
min-width: 0;
font-size: 16px;
}
.bottom-action-bar__button--leave {
order: 3;
min-width: 0;
font-size: 14px;
}
.bottom-action-bar__sound {
display: none;
}
}
@media (max-width: 1000px) {
.bottom-action-bar__button {
min-height: 40px;
padding: 8px 10px;
font-size: 12px;
}
}
@media (max-width: 1000px) and (max-height: 550px) {
.bottom-action-bar__button {
min-height: 20px;
padding: 4px 10px;
font-size: 12px;
}
}
@media (max-width: 820px) and (orientation: landscape) {
.bottom-action-bar__button--roll {
min-width: 0;
padding: 8px 10px;
font-size: 12px;
max-width: 120px;
}
.bottom-action-bar {
gap: 10px;
grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(150px, 144px) 0;
}
}.draw-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 200;
pointer-events: auto;
}
.draw-popup__card {
background: #1a2535;
border: 1px solid #2e4060;
border-radius: 16px;
padding: 40px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-width: 280px;
}
.draw-popup__title {
color: #c0c0c0;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.draw-popup__subtitle {
color: #8a9bb5;
font-size: 15px;
text-align: center;
}
.draw-popup__amount {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.draw-popup__amount-label {
color: #8a9bb5;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.draw-popup__amount-value {
color: #fff;
font-size: 24px;
font-weight: 700;
}
.draw-popup__btn {
background: #2e6fd4;
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 10px 32px;
border-radius: 8px;
letter-spacing: 0.02em;
}.error-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 300;
pointer-events: auto;
}
.error-popup__card {
background: #1a2535;
border: 1px solid #7b2020;
border-radius: 16px;
padding: 40px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-width: 280px;
max-width: 400px;
}
.error-popup__title {
color: #e05555;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.error-popup__message {
color: #8a9bb5;
font-size: 15px;
text-align: center;
line-height: 1.5;
}
.error-popup__buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.error-popup__btn {
background: #2e6fd4;
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 10px 32px;
border-radius: 8px;
letter-spacing: 0.02em;
}
.error-popup__btn--secondary {
background: #30435f;
}.helper-panel__border {
background: var(--border-bg);
padding: 1px;
border-radius: 30px;
pointer-events: none;
}
.helper-panel__inner {
border-radius: 29px;
padding: 16px 44px;
background: #1a2337;
color: #ffffff;
cursor: default;
font-size: 16px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 1000px) and (orientation: portrait) {
.helper-panel__inner {
max-width: calc(100vw - 32px);
box-sizing: border-box;
padding: 12px 24px;
font-size: 13px;
white-space: normal;
text-align: center;
}
}.leave-button {
background: #35425e;
border: none;
color: #ffffff;
border-radius: 999px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
padding: 8px 28px;
min-height: 35px;
letter-spacing: 0.02em;
}/* Lobby overlay */
.lobby {
position: fixed;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 48px 16px 16px;
overflow-y: auto;
z-index: 100;
pointer-events: none;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
}
.lobby__content {
width: min(760px, 100%);
display: flex;
flex-direction: column;
align-items: stretch;
pointer-events: auto;
margin-top: 5em;
}
.lobby__mode-switch {
display: inline-flex;
align-items: center;
align-self: flex-start;
width: min(100%, 420px);
gap: 4px;
margin-bottom: 18px;
padding: 5px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
#172334;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 18px 40px rgba(0, 0, 0, 0.24);
}
.lobby__mode-btn {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.74);
border-radius: 999px;
min-width: 0;
padding: 12px 18px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition:
background-color 140ms ease,
box-shadow 140ms ease,
color 140ms ease,
transform 140ms ease;
}
.lobby__mode-btn:hover {
color: #fff;
}
.lobby__mode-btn--active:hover {
color: #172334;
}
.lobby__mode-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(247, 226, 41, 0.28);
}
.lobby__mode-btn--active {
background: #f7e229;
color: #172334;
transform: translateY(-1px);
box-shadow:
0 10px 22px rgba(247, 226, 41, 0.2),
inset 0 -1px 0 rgba(23, 35, 52, 0.12);
}
.lobby__mode-btn--active:focus-visible {
box-shadow:
0 0 0 2px rgba(247, 226, 41, 0.28),
0 10px 22px rgba(247, 226, 41, 0.2),
inset 0 -1px 0 rgba(23, 35, 52, 0.12);
}
/* Create lobby section */
.lobby__create-row {
display: flex;
justify-content: stretch;
width: 100%;
margin-bottom: 20px;
}
.lobby__create-card {
background: #1c2a3e;
border-radius: 12px;
padding: 16px 20px;
width: 100%;
min-width: 0;
}
.lobby__create-title {
color: #fff;
font-size: 15px;
font-weight: 700;
margin-bottom: 12px;
}
.lobby__create-form {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.lobby__stake-container {
flex: 1;
min-width: 0;
position: relative;
}
.lobby__stake-input {
background: #243046;
border: none;
color: #fff;
border-radius: 8px;
padding: 11px 14px;
font-size: 14px;
outline: none;
width: 100%;
box-sizing: border-box;
appearance: textfield;
-moz-appearance: textfield;
}
.lobby__stake-input::-webkit-outer-spin-button,
.lobby__stake-input::-webkit-inner-spin-button {
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.lobby__stake-slider {
position: absolute;
top: calc(100% - 9px);
left: 6px;
width: calc(100% - 10px);
accent-color: #f7e229;
cursor: pointer;
margin: 0;
}
.lobby__create-btn {
background: #f7e229;
color: #1a2337;
border: none;
border-radius: 20px;
min-width: 140px;
padding: 11px 28px;
font-size: 14px;
font-weight: 900;
cursor: pointer;
letter-spacing: 0.06em;
flex-shrink: 0;
text-align: center;
white-space: nowrap;
}
.lobby__create-btn:disabled {
cursor: default;
opacity: 0.55;
}
.lobby__stake-info {
display: flex;
justify-content: space-between;
gap: 12px;
color: #fff;
font-size: 12px;
overflow-wrap: anywhere;
}
/* Column headers */
.lobby__headers {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(74px, auto);
column-gap: 16px;
align-items: center;
background: #1c2a3e;
border-radius: 8px;
padding: 12px 20px;
margin-bottom: 8px;
}
.lobby__header-cell {
color: #fff;
font-size: 13px;
font-weight: 500;
min-width: 0;
}
.lobby__header-spacer {
min-width: 74px;
}
/* Match list */
.lobby__match-list {
max-height: 60vh;
overflow-y: auto;
}
.lobby__empty {
color: #fff;
font-size: 14px;
text-align: center;
padding: 40px 0;
}
/* Lobby avatar (40×40) */
.lobby-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.lobby-avatar--img {
object-fit: cover;
}
.lobby-avatar--placeholder {
background: #2e3d55;
display: flex;
align-items: center;
justify-content: center;
color: #7a8fa8;
font-size: 14px;
font-weight: 700;
}
/* Match row */
.match-row {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(74px, auto);
column-gap: 16px;
align-items: center;
background: #1c2a3e;
border-radius: 10px;
padding: 12px 20px;
margin-bottom: 8px;
}
.match-row__player {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.match-row__player-name {
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
min-width: 0;
overflow-wrap: anywhere;
}
.match-row__game-info {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
min-width: 0;
}
.match-row__game-value {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.match-row__game-badge {
background: #243046;
color: #fff;
border-radius: 6px;
padding: 2px 9px;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
white-space: nowrap;
}
.match-row__game-type {
color: #fff;
font-size: 14px;
line-height: 1.2;
min-width: 0;
overflow-wrap: anywhere;
}
.match-row__stake {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.match-row__stake-value {
color: #3dd674;
font-weight: 700;
font-size: 14px;
line-height: 1.2;
overflow-wrap: anywhere;
}
.match-row--disabled {
opacity: 0.76;
}
.match-row__join {
display: flex;
justify-content: flex-end;
min-width: 0;
}
.match-row__join-btn {
border: 2px solid #f7e229;
background: transparent;
color: #f7e229;
border-radius: 20px;
padding: 7px 22px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.05em;
min-width: 74px;
max-width: 100%;
line-height: 1.15;
white-space: nowrap;
}
.match-row__join-btn:disabled {
border-color: rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.45);
cursor: not-allowed;
}
.single-player {
width: 100%;
}
.single-player .lobby__create-card {
border-radius: 12px;
}
@media (max-width: 1000px) and (orientation: portrait) {
.lobby {
align-items: flex-start;
padding: 66px 0 70px;
overflow-y: auto;
}
.lobby__content {
width: 100%;
}
.lobby__mode-switch {
width: calc(100% - 28px);
margin: 0 14px 12px;
}
.lobby__create-row {
justify-content: stretch;
padding: 0 14px;
margin-bottom: 12px;
box-sizing: border-box;
}
.lobby__create-card {
width: 100%;
padding: 14px;
border-radius: 0;
}
.lobby__create-form {
gap: 8px;
}
.lobby__create-btn {
min-width: 128px;
padding-inline: 18px;
}
.lobby__stake-info {
flex-wrap: wrap;
}
.lobby__headers {
display: none;
}
.lobby__match-list {
max-height: none;
overflow-y: visible;
}
.match-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
'player join'
'game game'
'stake stake';
gap: 10px 12px;
align-items: start;
padding: 12px;
border-radius: 8px;
}
.match-row__player {
grid-area: player;
align-self: center;
}
.match-row__stake {
display: flex;
gap: 6px;
align-items: center;
min-width: 0;
width: 100%;
}
.match-row__game-info {
grid-area: game;
display: flex;
gap: 6px;
align-items: start;
min-width: 0;
width: 100%;
}
.match-row__stake {
grid-area: stake;
justify-content: space-between;
}
.match-row__game-info::before,
.match-row__stake::before {
content: attr(data-label);
color: #7a8fa8;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
min-width: 58px;
overflow-wrap: anywhere;
}
.match-row__game-info::before,
.match-row__stake::before {
margin-right: auto;
}
.match-row__game-value {
gap: 6px;
justify-content: flex-end;
margin-left: auto;
max-width: calc(100% - 64px);
}
.match-row__game-badge {
margin-top: 1px;
}
.match-row__game-type {
min-width: 0;
text-align: right;
}
.match-row__stake-value {
text-align: right;
}
.match-row__join {
grid-area: join;
align-self: center;
}
.match-row__join-btn {
min-width: 68px;
padding: 7px 14px;
}
.single-player {
padding: 0 14px;
}
.single-player__hero,
.single-player__card {
border-radius: 14px;
}
.single-player__hero {
flex-direction: column;
padding: 18px;
}
.single-player__title {
font-size: 24px;
}
}
@media (max-width: 430px) and (orientation: portrait) {
.lobby__mode-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
}
.lobby__mode-btn {
padding-inline: 12px;
font-size: 12px;
}
.lobby__create-form {
align-items: stretch;
flex-direction: column;
}
.lobby__create-btn {
width: 100%;
}
.match-row {
grid-template-areas:
'player player'
'game game'
'stake stake'
'join join';
}
.match-row__join {
justify-content: stretch;
}
.match-row__join-btn {
width: 100%;
}
.single-player__stake-form {
flex-direction: column;
align-items: stretch;
}
.single-player__start-btn {
width: 100%;
}
}.lost-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 200;
pointer-events: auto;
}
.lost-popup__card {
background: #1a2535;
border: 1px solid #2e4060;
border-radius: 16px;
padding: 40px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-width: 280px;
}
.lost-popup__title {
color: #e05050;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.lost-popup__subtitle {
color: #8a9bb5;
font-size: 15px;
}
.lost-popup__btn {
background: #2e6fd4;
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 10px 32px;
border-radius: 8px;
letter-spacing: 0.02em;
}.offer-double-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 200;
pointer-events: auto;
}
.offer-double-popup__card {
background: #1a2535;
border: 1px solid #2e4060;
border-radius: 16px;
padding: 40px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-width: 280px;
}
.offer-double-popup__title {
color: #f0c040;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.offer-double-popup__subtitle {
color: #8a9bb5;
font-size: 15px;
text-align: center;
}
.offer-double-popup__cube {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.offer-double-popup__cube-label {
color: #8a9bb5;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.offer-double-popup__cube-value {
color: #fff;
font-size: 24px;
font-weight: 700;
}
.offer-double-popup__warning {
max-width: 320px;
color: #f3b26b;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
.offer-double-popup__buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.offer-double-popup__btn {
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 10px 32px;
border-radius: 8px;
letter-spacing: 0.02em;
}
.offer-double-popup__btn--accept {
background: #2e6fd4;
}
.offer-double-popup__btn--refuse {
background: #b03a3a;
}.player-bar {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: var(--player-bar-max-width, 372px);
margin: 0 auto;
}
.player-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.player-avatar--img {
object-fit: cover;
}
.player-avatar--placeholder {
background: #2e3d55;
display: flex;
align-items: center;
justify-content: center;
color: #7a8fa8;
font-size: 14px;
font-weight: 700;
}
.player-card-border {
background: var(--border-bg, transparent);
padding: 1px;
border-radius: 10px;
flex: 1 1 0;
min-width: 0;
}
.player-card {
background: #1a2337;
border-radius: 9px;
padding: 7px 14px;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
height: 50px;
overflow: hidden;
}
.player-card--left {
flex-direction: row;
}
.player-card--right {
flex-direction: row-reverse;
}
.player-card__name {
color: #ffffff;
font-weight: 600;
font-size: 14px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player-card__name--left {
text-align: left;
}
.player-card__name--right {
text-align: right;
}
.player-card__score {
color: #ffffff;
font-weight: 700;
font-size: 16px;
min-width: 18px;
text-align: center;
}
.waiting-card {
background: #1a2337;
border-radius: 10px;
padding: 7px 20px;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
height: 50px;
}
.waiting-card__label {
color: #7a8fa8;
font-weight: 600;
font-size: 14px;
}
.multiplier {
background: #1a2337;
border-radius: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 800;
font-size: 11px;
flex-shrink: 0;
}
.turn-indicator {
display: none;
}
@media (max-width: 390px) {
.player-bar {
gap: 6px;
}
.player-avatar {
width: 30px;
height: 30px;
}
.player-card {
height: 30px;
padding: 6px 9px;
gap: 7px;
}
.player-card__name,
.waiting-card__label {
font-size: 13px;
}
.player-card__score {
min-width: 16px;
font-size: 14px;
}
.waiting-card {
height: 46px;
padding: 6px 10px;
}
.multiplier {
width: 32px;
height: 32px;
}
}
@media (max-width: 1000px) and (orientation: portrait) {
.player-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(86px, 0.72fr) minmax(0, 1fr);
gap: 12px;
width: 100%;
max-width: none;
}
.player-card-border {
border-radius: 16px;
background: none !important;
}
.player-card {
height: 60px;
border-radius: 14px;
background: #2b374d;
padding: 4px 8px;
gap: 12px;
}
.player-card--left,
.player-card--right {
flex-direction: row;
}
.player-avatar {
width: 40px;
height: 40px;
}
.player-card__name,
.player-card__name--right {
text-align: left;
}
.player-card__name {
font-size: 11.333px;
font-weight: 700;
}
.player-card__score {
min-width: 22px;
font-size: 16px;
font-weight: 800;
}
.waiting-card {
height: 60px;
border-radius: 14px;
background: #2b374d;
padding: 3.5px 10px;
}
.waiting-card__label {
font-size: 10px;
}
.multiplier {
display: none;
}
.turn-indicator {
min-width: 0;
display: grid;
align-content: center;
justify-items: center;
gap: 6px;
}
.turn-indicator .multiplier {
display: flex;
width: auto;
min-width: 44px;
height: 20px;
padding: 0 8px;
border-radius: 999px;
font-size: 11px;
}
.turn-indicator__timer {
width: 100%;
min-width: 82px;
height: 36px;
border-radius: 999px;
background: #1a2333;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
}
@media (max-width: 430px) and (orientation: portrait) {
.player-bar {
grid-template-columns: minmax(0, 1fr) minmax(74px, 0.7fr) minmax(0, 1fr);
gap: 8px;
}
.player-card {
height: 30px;
padding: 4px 5px;
gap: 8px;
}
.player-avatar {
width: 34px;
height: 34px;
}
.player-card__name {
font-size: 10px;
}
.player-card__score {
min-width: 18px;
font-size: 14.667px;
}
.turn-indicator {
gap: 4px;
}
.turn-indicator .multiplier {
height: 12px;
min-width: 36px;
font-size: 8px;
}
.turn-indicator__timer {
min-width: 72px;
height: 16px;
font-size: 12px;
}
}.win-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 200;
pointer-events: auto;
}
.win-popup__card {
background: #1a2535;
border: 1px solid #2e4060;
border-radius: 16px;
padding: 40px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-width: 280px;
}
.win-popup__title {
color: #f0c040;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.win-popup__subtitle {
color: #8a9bb5;
font-size: 15px;
}
.win-popup__amount {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.win-popup__amount-label {
color: #8a9bb5;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.win-popup__amount-value {
color: #fff;
font-size: 24px;
font-weight: 700;
}
.win-popup__btn {
background: #2e6fd4;
border: none;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 10px 32px;
border-radius: 8px;
letter-spacing: 0.02em;
}.overlay {
--overlay-panel-bg: #1c2a3e;
position: fixed;
inset: 0;
pointer-events: none;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
}
.overlay__mobile-top-bar {
display: none;
}
.overlay__edge--top-right {
position: absolute;
top: 5px;
right: 16px;
pointer-events: auto;
}
.overlay__top-center {
--player-bar-max-width: 372px;
position: absolute;
top: 5px;
left: 50%;
width: min(var(--player-bar-max-width), calc(100vw - 32px));
transform: translateX(-50%);
pointer-events: auto;
}
.overlay__center {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.overlay__bottom-row {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
}
.overlay__bottom-left {
pointer-events: auto;
min-width: 60px;
}
.overlay__bottom-right {
pointer-events: auto;
min-width: 60px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 720px) and (orientation: portrait) {
.overlay__mobile-top-bar {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 4px;
background: var(--overlay-panel-bg);
border-radius: 0;
display: flex;
align-items: center;
gap: 14px;
pointer-events: auto;
}
.overlay__mobile-top-bar .balance {
flex: 1 1 auto;
min-width: 0;
height: 38px;
}
.overlay__mobile-top-bar .sound-control {
flex: 0 0 auto;
}
.overlay__mobile-top-bar .mute-button {
width: 38px;
height: 38px;
}
.overlay__mobile-top-bar .mute-button svg {
width: 34px;
height: 34px;
}
.overlay__mobile-top-bar .sound-control__popover {
top: calc(100% + 10px);
right: 0;
bottom: auto;
}
.overlay__mobile-top-bar .sound-control__popover::after {
top: -6px;
right: 24px;
bottom: auto;
border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.16);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.overlay__edge--top-right {
display: none;
}
.overlay__top-center {
--player-bar-max-width: none;
position: relative;
top: auto;
left: auto;
right: auto;
box-sizing: border-box;
width: 100%;
padding: 0 8px 4px;
transform: none;
background: var(--overlay-panel-bg);
border-radius: 0;
}
.overlay__bottom-right .sound-control {
display: none;
}
}
@media (max-height: 550px) {
.overlay__mobile-top-bar .balance {
height: 28px;
}
.overlay__mobile-top-bar .mute-button {
width: 28px;
height: 28px;
}
}.rotate-to-play-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100svh;
z-index: 9999;
background-color: #1c2a3e;
display: flex;
align-items: center;
justify-content: center;
}
.rotate-to-play-screen__icon {
max-width: 50%;
max-height: 50%;
fill: #ffffff;
animation: rotate-to-play-spin 3s ease-in-out 1s infinite alternate both;
}
@keyframes rotate-to-play-spin {
0% {
transform: rotate(120deg);
}
50% {
transform: rotate(210deg);
}
100% {
transform: rotate(120deg);
}
}*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}