:root {
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-game: "Russo One", Rajdhani, "Marmelad", Arial, sans-serif;
    --font-number: "JetBrains Mono", Consolas, "Liberation Mono", monospace;

    --game-bg: #060810;
    --game-bg-soft: #080c16;
    --game-surface: #101727;
    --game-surface-2: #151d31;
    --game-panel: rgba(255, 255, 255, .035);
    --game-panel-strong: rgba(255, 255, 255, .06);
    --game-border: rgba(255, 255, 255, .08);
    --game-border-strong: rgba(255, 255, 255, .14);
    --game-border-gold: rgba(245, 158, 11, .26);
    --game-text: #fff;
    --game-muted: rgba(255, 255, 255, .58);
    --game-faint: rgba(255, 255, 255, .34);
    --game-gold: #f59e0b;
    --game-gold-soft: #fcd34d;
    --game-action: #d97706;
    --game-action-soft: rgba(217, 119, 6, .16);
    --game-interactive: #16d1c3;
    --game-interactive-soft: rgba(22, 209, 195, .14);
    --game-success: #34d399;
    --game-success-soft: rgba(52, 211, 153, .14);
    --game-error: #f43f5e;
    --game-error-soft: rgba(244, 63, 94, .16);
    --game-shadow: 0 22px 70px rgba(0, 0, 0, .38);

    --white-header-color: var(--game-text);
    --gold-header-color: var(--game-gold);
    --orange-header-color: var(--game-action);
    --black-color: var(--game-bg);
    --bg: var(--game-bg);
    --card: var(--game-surface);
    --text: var(--game-text);
    --muted: var(--game-muted);
    --accent: var(--game-action);
    --correct: var(--game-success);
    --wrong: var(--game-error);
    --shadow: var(--game-shadow);

    --ifq-white: var(--game-text);
    --ifq-gold: var(--game-gold);
    --ifq-orange: var(--game-action);
    --ifq-black: var(--game-bg);
    --ifq-bg: var(--game-bg);
    --ifq-card: var(--game-surface);
    --ifq-text: var(--game-text);
    --ifq-muted: var(--game-muted);
    --ifq-accent: var(--game-action);
    --ifq-success: var(--game-success);
    --ifq-wrong: var(--game-error);
    --ifq-cyan: var(--game-interactive);
    --ifq-font-body: var(--font-sans);
    --ifq-font-game: var(--font-game);
    --ifq-font-number: var(--font-number);

    --mdc-theme-primary: var(--game-text);
    --mdc-theme-secondary: var(--game-gold);
    --mdc-theme-logo: var(--game-action);
    --mdc-theme-background: var(--game-bg);
    --mdc-theme-scroll: #1b2434;
    --mdc-theme-surface: var(--game-surface);
    --mdc-theme-error: var(--game-error);
    --mdc-theme-text-primary-on-background: var(--game-text);
    --mdc-theme-text-secondary-on-background: var(--game-muted);
    --mdc-theme-text-hint-on-background: var(--game-faint);
    --font-family-primary: var(--font-sans);
    --font-family-secondary: var(--font-number);
    --mdc-protected-button-background-color: var(--game-gold);
    --mdc-protected-button-label-text-color: var(--game-bg);
}

html,
body {
    background-color: var(--game-bg) !important;
    color: var(--game-text);
    font-family: var(--font-sans) !important;
}

body {
    background-blend-mode: soft-light, normal;
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-sans) !important;
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

h1,
h2,
h3,
.quiz-header,
.go-hero-title,
.finance-page-title,
.profile-stat-page-title,
.ratio-promo-title {

    color: #f7f7f7 !important;
    font-family: var(--font-game) !important;
    letter-spacing: 0 !important;
}

p,
label,
.top-label,
.quiz_txtinfo,
.finance-mini-label,
.finance-filter-group span,
.profile-stat-card-label,
.profile-stat-empty-text,
.ratio-my-label {
    color: var(--game-muted);
}

.counter,
#points,
#place,
#timerValue,
.go-score-num,
.go-stat-val,
.finance-mini-value,
.finance-status-col strong,
.finance-sum,
.profile-stat-card-value,
.profile-stat-top-value strong,
.profile-stat-cell.pts,
.ratio-my-result strong,
.quiz-data-table td:nth-child(3),
.quiz-data-table td:nth-child(4) {
    font-family: var(--font-number) !important;
}

.quiz-main-answer,
.panel,
.finance-root,
.profile-stat-root,
.go-root,
.finance-history-panel,
.ratio-my-result,
.top-panel,
.game-panel {
    background: linear-gradient(180deg, rgba(16, 23, 39, .96), rgba(8, 12, 22, .96)) !important;
    border-color: var(--game-border-gold) !important;
    color: var(--game-text) !important;
    box-shadow: var(--game-shadow) !important;
}

.panel,
.finance-root,
.profile-stat-root,
.go-root,
.finance-history-panel,
.ratio-my-result {
    border: 1px solid var(--game-border-gold) !important;
}

.top-panel,
.game-panel,
.finance-statusbar,
.finance-topnav,
.profile-stat-hdr,
.go-sbar {
    background: rgba(255, 255, 255, .035) !important;
    border-color: var(--game-border) !important;
}

.top-icon,
.finance-logo-box,
.profile-stat-avatar,
.profile-stat-medal,
.finance-medal,
.go-medal,
.go-divider-diamond {
    color: var(--game-gold) !important;
    border-color: var(--game-border-gold) !important;
    background: rgba(245, 158, 11, .12) !important;
}

.top-item strong,
.finance-logo-title,
.profile-stat-label span,
.go-sb-user strong,
.go-sb-mid strong,
.go-sb-right strong {
    color: var(--game-text) !important;
}

.quiz-sound-toggle,
.sound-btn,
.finance-tab,
.finance-profile-link,
.go-btn-ghost,
.finance-btn-reset {
    color: var(--game-interactive) !important;
    border-color: rgba(22, 209, 195, .34) !important;
    background: rgba(22, 209, 195, .08) !important;
}

.quiz-sound-toggle:hover,
.sound-btn:hover,
.finance-profile-link:hover,
.go-btn-ghost:hover,
.finance-btn-reset:hover {
    color: var(--game-text) !important;
    border-color: rgba(245, 158, 11, .42) !important;
    background: rgba(245, 158, 11, .12) !important;
}


.mdc-button
 {

    border-color: transparent !important;
    color: var(--game-bg) !important;
    font-family: var(--font-game) !important;
    font-weight: 500 !important;
}




.quiz-button,
.go-btn-primary,
.finance-btn-show,
.swal2-confirm,
.btn-primary {
    background: linear-gradient(135deg, var(--game-gold), var(--game-action)) !important;
    border-color: transparent !important;
    color: var(--game-bg) !important;
    font-family: var(--font-game) !important;
    font-weight: 800 !important;
}

.mdc-button:hover,
.quiz-button:hover,
.go-btn-primary:hover,
.finance-btn-show:hover,
.swal2-confirm:hover,
.play-btn:hover,
.btn-primary:hover {
    filter: brightness(1.06);
}

.question-loading-state,
.quiz_txtquest,
.answer-btn,
.finance-mini-stat,
.profile-stat-card,
.profile-stat-empty,
.finance-empty,
.finance-history-empty,
.go-main-card,
.go-stat-card,
.go-period-box {
    background: var(--game-panel) !important;
    border-color: var(--game-border) !important;
    color: var(--game-text) !important;
}

.answer-btn {
    color: var(--game-text) !important;
}

.answer-number,
.go-attempt-badge,
.profile-stat-prize-badge.p1,
.quiz-data-table tbody td:first-child .ratio-place,
.quiz-data-table tbody td:first-child span {
    background: linear-gradient(135deg, var(--game-gold), var(--game-gold-soft)) !important;
    color: var(--game-bg) !important;
}

.answer-arrow,
.hint span,
.progress-dot.is-active,
.finance-page-hd .material-symbols-outlined,
.profile-stat-page-hd .material-symbols-outlined,
.ratio-promo-text strong,
.ratio-promo-prize {
    color: var(--game-interactive) !important;
}

.answer-btn.is-correct,
.history-amount-plus,
.finance-mini-icon.green,
.finance-mini-value.green,
.finance-sum.deposit,
.profile-stat-cell.earn.pos {
    color: var(--game-success) !important;
    border-color: rgba(52, 211, 153, .38) !important;
}

.answer-btn.is-wrong,
.history-amount-minus,
.finance-mini-icon.red,
.finance-mini-value.red,
.finance-sum.spend,
.finance-sum.withdraw,
.auth_warning.auth_error {
    color: var(--game-error) !important;
    border-color: rgba(244, 63, 94, .38) !important;
}

.ratio-promo-banner {
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(22, 209, 195, .10)),
        linear-gradient(180deg, rgba(16, 23, 39, .98), rgba(8, 12, 22, .96)) !important;
    border-color: rgba(245, 158, 11, .34) !important;
    color: var(--game-text) !important;
}

.ratio-promo-gift {
    background: rgba(245, 158, 11, .14) !important;
    border-color: rgba(245, 158, 11, .32) !important;
}

.ratio-promo-text {
    color: var(--game-muted) !important;
}

.quiz-data-table,
.finance-history-table,
.finance-table-wrap,
.profile-stat-table-wrap {
    color: var(--game-text) !important;
}

.quiz-data-table thead tr th,
.finance-history-table th,
.finance-grid-head,
.profile-stat-grid-head {
    background: #161a29 !important;
    color: var(--game-interactive) !important;
    border-color: var(--game-border) !important;
    font-family: var(--font-game) !important;
    letter-spacing: 0 !important;
}

.quiz-data-table tbody tr,
.finance-history-table tr,
.finance-row,
.profile-stat-row {
    background: rgba(255, 255, 255, .035) !important;
    border-color: var(--game-border) !important;
}

.quiz-data-table tbody tr:hover,
.finance-row:hover,
.profile-stat-row:hover {
    background: rgba(245, 158, 11, .08) !important;
}

.quiz-data-table tbody td,
.finance-history-table td,
.finance-cell,
.profile-stat-cell {
    color: var(--game-text) !important;
    border-color: var(--game-border) !important;
}

.quiz-data-table tbody td:nth-child(3),
.finance-mini-value.gold,
.profile-stat-card-value,
.go-score-num,
.go-stat-val,
.ratio-my-result strong {
    color: var(--game-gold) !important;
}

.finance-input,
.finance-select,
.mdc-text-field,
.mdc-text-field__input,
.form-control,
.form-select {
    background: rgba(255, 255, 255, .04);
    border-color: var(--game-border) !important;
    color: var(--game-text) !important;
}

.finance-input:focus,
.finance-select:focus,
.form-control:focus,
.form-select:focus,
.mdc-text-field--focused {
    border-color: rgba(245, 158, 11, .44) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12) !important;
}

.mdc-dialog__surface,
.modal-content,
.swal2-popup {
    background: linear-gradient(180deg, var(--game-surface), var(--game-bg-soft)) !important;
    border: 1px solid var(--game-border-gold) !important;
    color: var(--game-text) !important;
    font-family: var(--font-sans) !important;
}

.mdc-dialog__title,
.modal-title,
.swal2-title {
    color: var(--game-gold) !important;
    font-family: var(--font-game) !important;
}

.mdc-dialog__content,
.modal-body,
.swal2-html-container {
    color: var(--game-muted) !important;
}

#toast-container > div,
.toast {
    background: var(--game-surface) !important;
    border: 1px solid var(--game-border-gold) !important;
    color: var(--game-text) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .38) !important;
}

#toast-container > .toast-success {
    border-color: rgba(52, 211, 153, .42) !important;
}

#toast-container > .toast-error {
    border-color: rgba(244, 63, 94, .42) !important;
}

.go-bg-nums,
.profile-stat-card-icon,
.finance-medal-line,
.profile-stat-medal-line,
.go-medal-line {
    color: rgba(245, 158, 11, .14) !important;
    border-color: rgba(245, 158, 11, .22) !important;
}

.sms-rating-mobile {
    display: none;
}

.ratio-rating-mobile {
    display: none;
}

.game_ratio .quiz-header::before,
.game_ratio_sms .quiz-header::before {
    display: none !important;
    content: "" !important;
}

@media (max-width: 768px) {
    .quiz_container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .finance-statusbar,
    .profile-stat-hdr,
    .top-panel {
        background: rgba(8, 12, 22, .96) !important;
    }
}

@media (max-width: 640px) {
    .game_ratio_sms.quiz_container {
        width: 100%;
        max-width: 100%;
        padding: 0 6px 112px !important;
        overflow-x: hidden;
    }

    .game_ratio_sms .quiz-main-answer {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 30px 0 18px !important;
        overflow: visible;
    }

    .game_ratio_sms .quiz-header {
        margin: 0 2px 12px !important;
        padding: 0 !important;
        font-size: 24px !important;
        line-height: 1.1;
        text-align: left;
        text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
    }

    .game_ratio_sms h3 {
        margin: 0 2px 12px !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.35;
        white-space: normal;
    }

    .game_ratio_sms .ratio-promo-banner {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        width: 100%;
        margin: 0 0 14px !important;
        padding: 12px !important;
        border-radius: 12px;
        overflow: hidden;
    }

    .game_ratio_sms .ratio-promo-gift {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 23px;
    }

    .game_ratio_sms .ratio-promo-title {
        font-size: 15px !important;
        line-height: 1.2;
    }

    .game_ratio_sms .ratio-promo-text,
    .game_ratio_sms .ratio-promo-prize {
        font-size: 12px !important;
        line-height: 1.4;
    }

    .game_ratio_sms .panel {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .game_ratio_sms .panel::before {
        display: none !important;
    }

    .game_ratio_sms .sms-rating-desktop {
        display: none !important;
    }

    .game_ratio_sms .sms-rating-mobile {
        display: grid;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .game_ratio_sms .sms-rating-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 84px;
        grid-template-areas:
            "place player score"
            "place achievements achievements";
        align-items: center;
        gap: 6px 10px;
        min-height: 72px;
        padding: 12px;
        border: 1px solid rgba(22, 209, 195, .18);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(11, 33, 70, .94), rgba(4, 18, 41, .98));
        box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
        overflow: hidden;
    }

    .game_ratio_sms .sms-rating-card--rank-1 {
        border-color: rgba(255, 187, 0, .32);
        background: linear-gradient(90deg, rgba(255, 187, 0, .18), rgba(4, 18, 41, .98) 58%);
    }

    .game_ratio_sms .sms-rating-card--rank-2 {
        border-color: rgba(220, 231, 255, .24);
        background: linear-gradient(90deg, rgba(220, 231, 255, .14), rgba(4, 18, 41, .98) 58%);
    }

    .game_ratio_sms .sms-rating-card--rank-3 {
        border-color: rgba(255, 160, 70, .25);
        background: linear-gradient(90deg, rgba(255, 160, 70, .14), rgba(4, 18, 41, .98) 58%);
    }

    .game_ratio_sms .sms-rating-place {
        grid-area: place;
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #07101c;
        background: linear-gradient(180deg, #ffcf35, #ffad12);
        box-shadow: 0 8px 20px rgba(255, 187, 0, .28);
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .game_ratio_sms .sms-rating-player {
        grid-area: player;
        min-width: 0;
        overflow: hidden;
        color: #f4f7ff;
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 15px;
        font-weight: 900;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game_ratio_sms .sms-rating-score {
        grid-area: score;
        display: inline-flex;
        width: 84px;
        min-width: 84px;
        justify-self: end;
        align-items: center;
        justify-content: center;
        padding: 7px 8px;
        border: 1px solid rgba(255, 187, 0, .24);
        border-radius: 999px;
        color: #ffbb00;
        background: rgba(255, 187, 0, .1);
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    .game_ratio_sms .sms-rating-achievements {
        grid-area: achievements;
        min-width: 0;
        overflow: hidden;
        color: #ffbb00;
        font-size: 15px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game_ratio_sms .ratio-board,
    .game_ratio_sms .ratio-board tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .game_ratio_sms .ratio-board thead {
        display: none !important;
    }

    .game_ratio_sms .ratio-board tbody tr {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 76px;
        grid-template-areas:
            "place player score"
            "place achievement achievement";
        align-items: center;
        gap: 4px 9px;
        width: 100% !important;
        min-height: 70px;
        margin: 0 0 8px;
        padding: 11px 10px !important;
        border: 1px solid rgba(22, 209, 195, .16);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(11, 33, 70, .94), rgba(4, 18, 41, .98)) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
        overflow: hidden;
        transform: none !important;
    }

    .game_ratio_sms .ratio-board tbody tr > td:nth-child(1) {
        grid-area: place !important;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }

    .game_ratio_sms .ratio-board tbody tr > td:nth-child(2) {
        grid-area: player !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .game_ratio_sms .ratio-board tbody tr > td:nth-child(3) {
        grid-area: score !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .game_ratio_sms .ratio-board tbody tr > td:nth-child(4) {
        grid-area: achievement !important;
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        margin: 0 !important;
    }

    .game_ratio_sms .ratio-board tbody tr:hover {
        transform: none !important;
    }

    .game_ratio_sms .ratio-board tbody tr.ratio-rank-1 {
        background: linear-gradient(90deg, rgba(255, 187, 0, .18), rgba(4, 18, 41, .98) 58%) !important;
        border-color: rgba(255, 187, 0, .28);
    }

    .game_ratio_sms .ratio-board tbody tr.ratio-rank-2 {
        background: linear-gradient(90deg, rgba(220, 231, 255, .14), rgba(4, 18, 41, .98) 58%) !important;
        border-color: rgba(220, 231, 255, .2);
    }

    .game_ratio_sms .ratio-board tbody tr.ratio-rank-3 {
        background: linear-gradient(90deg, rgba(255, 160, 70, .14), rgba(4, 18, 41, .98) 58%) !important;
        border-color: rgba(255, 160, 70, .22);
    }

    .game_ratio_sms .ratio-board tbody td {
        display: flex !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        overflow: visible !important;
    }

    .game_ratio_sms .ratio-board tbody td::before,
    .game_ratio_sms .ratio-board .ratio-field-msisdn .ratio_item::before {
        display: none !important;
        content: none !important;
    }

    .game_ratio_sms .ratio-board .td-content-wrapper,
    .game_ratio_sms .ratio-board .td-content,
    .game_ratio_sms .ratio-board .ratio_item {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: inherit !important;
        overflow: visible !important;
        text-align: inherit !important;
    }

    .game_ratio_sms .ratio-board .ratio-place-cell {
        grid-area: place;
        align-self: stretch;
        align-items: center;
        justify-content: center !important;
    }

    .game_ratio_sms .ratio-board .ratio-field-msisdn {
        grid-area: player;
        justify-content: flex-start !important;
    }

    .game_ratio_sms .ratio-board .ratio-field-balls {
        grid-area: score;
        justify-content: flex-end !important;
    }

    .game_ratio_sms .ratio-board .ratio-achievement-cell {
        grid-area: achievement;
        justify-content: flex-start !important;
    }

    .game_ratio_sms .ratio-board .ratio-place {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        font-size: 18px !important;
        line-height: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .game_ratio_sms .ratio-board .ratio-field-msisdn .ratio_item {
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
        color: #f4f7ff !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .game_ratio_sms .ratio-board .ratio-field-msisdn .td-content-wrapper,
    .game_ratio_sms .ratio-board .ratio-field-msisdn .td-content,
    .game_ratio_sms .ratio-board .ratio-field-msisdn .ratio_item {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .game_ratio_sms .ratio-board .ratio-field-msisdn .ratio_item > div {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 15px !important;
        font-weight: 900;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game_ratio_sms .ratio-board .ratio-field-balls .ratio_item {
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        padding: 7px 6px !important;
        border-radius: 999px;
        color: #ffbb00 !important;
        background: rgba(255, 187, 0, .1) !important;
        border: 1px solid rgba(255, 187, 0, .24) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap;
    }

    .game_ratio_sms .ratio-board .ratio-achievement-cell .td-content-wrapper,
    .game_ratio_sms .ratio-board .ratio-achievement-cell .ratio_item,
    .game_ratio_sms .ratio-board .ratio-achievement-cell .ratio_item > div {
        justify-content: flex-start !important;
        gap: 3px;
        color: #ffbb00 !important;
        font-size: 14px !important;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .game_ratio:not(.game_ratio_sms).quiz_container {
        width: 100%;
        min-width: 0;
        padding: 0 6px 96px;
        overflow-x: hidden;
    }

    .game_ratio:not(.game_ratio_sms) .quiz-main-answer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 8px auto 0;
        padding: 0;
        overflow: visible;
    }

    .game_ratio:not(.game_ratio_sms) .quiz-header {
        padding: 14px 0 8px !important;
        margin: 0;
        font-size: 24px;
        line-height: 1.12;
        text-align: left;
    }

    .game_ratio:not(.game_ratio_sms) h3 {
        padding-top: 8px !important;
        margin: 0 0 10px;
        font-size: 11px;
        line-height: 1.25;
        text-align: left;
        white-space: normal;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-promo-banner {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        margin: 8px 0 12px;
        padding: 12px;
        border-radius: 12px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-promo-gift {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-promo-title {
        font-size: 15px;
        line-height: 1.2;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-promo-text,
    .game_ratio:not(.game_ratio_sms) .ratio-promo-prize {
        font-size: 12px;
        line-height: 1.35;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-my-result {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 0 0 10px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-my-result > div {
        padding: 9px 6px;
        border-radius: 12px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-my-label {
        font-size: 8px;
        letter-spacing: .05em;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-my-result strong {
        font-size: 18px;
        line-height: 1;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-desktop {
        display: none !important;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-mobile {
        display: grid;
        gap: 8px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-card {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 86px;
        grid-template-areas:
            "place player score"
            "place time achievements";
        align-items: center;
        gap: 5px 10px;
        min-height: 74px;
        padding: 11px 10px;
        border: 1px solid rgba(22, 209, 195, .16);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(11, 33, 70, .94), rgba(4, 18, 41, .98));
        box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
        overflow: hidden;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-card--rank-1 {
        background: linear-gradient(90deg, rgba(255, 187, 0, .2), rgba(4, 18, 41, .98) 58%);
        border-color: rgba(255, 187, 0, .28);
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-card--rank-2 {
        background: linear-gradient(90deg, rgba(220, 231, 255, .15), rgba(4, 18, 41, .98) 58%);
        border-color: rgba(220, 231, 255, .2);
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-card--rank-3 {
        background: linear-gradient(90deg, rgba(255, 160, 70, .15), rgba(4, 18, 41, .98) 58%);
        border-color: rgba(255, 160, 70, .22);
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-place {
        grid-area: place;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        color: #061220;
        background: linear-gradient(135deg, #ffe96a, #ffb000);
        box-shadow: 0 8px 20px rgba(255, 187, 0, .28);
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-player {
        grid-area: player;
        min-width: 0;
        overflow: hidden;
        color: #f4f7ff;
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 15px;
        font-weight: 900;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-score {
        grid-area: score;
        display: inline-flex;
        width: 86px;
        min-width: 86px;
        justify-self: end;
        align-items: center;
        justify-content: center;
        padding: 7px 8px;
        border: 1px solid rgba(255, 187, 0, .24);
        border-radius: 999px;
        color: #ffbb00;
        background: rgba(255, 187, 0, .1);
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-time {
        grid-area: time;
        display: inline-flex;
        width: max-content;
        max-width: 100%;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        border: 1px solid rgba(22, 209, 195, .24);
        border-radius: 999px;
        background: rgba(22, 209, 195, .09);
        min-width: 0;
        color: #16d1c3;
        font-family: var(--font-game, Inter, Arial, sans-serif);
        font-size: 12px;
        font-weight: 900;
        line-height: 1.2;
        white-space: nowrap;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-time::before {
        content: '⏱';
        font-size: 12px;
        line-height: 1;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-achievements {
        grid-area: achievements;
        justify-self: end;
        min-width: 0;
        overflow: hidden;
        color: #ffbb00;
        font-size: 15px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .game_ratio:not(.game_ratio_sms) .ratio-rating-card {
        grid-template-columns: 42px minmax(0, 1fr) 78px;
        gap: 5px 8px;
        padding: 10px 8px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-place {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-player {
        font-size: 14px;
    }

    .game_ratio:not(.game_ratio_sms) .ratio-rating-score {
        width: 78px;
        min-width: 78px;
        padding: 6px;
        font-size: 12px;
    }
}

body.is-game-play-page footer {
    display: none;
}

@media (max-width: 768px) {
    body.is-game-play-page .quiz_menu_small {
        display: none;
    }
}

/* Mobile play screen: keep the question inside one viewport. */
@media (max-width: 640px) {
    body.is-game-play-page .quiz_menu_bottom_small,
    body:has(.game_play) .quiz_menu_bottom_small {
        display: none !important;
    }

    .game_play.quiz_container {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 100svh;
        height: 100svh;
        padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .game_play .quiz-main-answer {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .game_play .top-panel {
        flex: 0 0 auto;
        position: relative;
        top: auto;
        grid-template-columns: minmax(0, 1.15fr) minmax(72px, .78fr) minmax(68px, .7fr);
        margin: 0 0 6px;
        border-radius: 15px;
    }

    .game_play .top-item {
        gap: 6px;
        min-height: 42px;
        padding: 7px 6px;
    }

    .game_play .top-icon {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        font-size: 15px;
    }

    .game_play .top-label {
        font-size: 7px;
        letter-spacing: .04em;
    }

    .game_play .top-item strong {
        margin-top: 1px;
        font-size: 14px;
        line-height: 1;
    }

    .game_play .top-item--admin strong {
        font-size: 10px;
    }

    .game_play .game-panel {
        flex: 0 0 auto;
        grid-template-columns: 54px minmax(0, 1fr) 44px;
        gap: 8px;
        min-height: 58px;
        margin: 0 0 6px;
        padding: 7px 8px;
        border-radius: 15px;
    }

    .game_play .timer-ring {
        width: 50px;
        height: 50px;
    }

    .game_play .timer-ring::before {
        inset: 5px;
    }

    .game_play .timer-ring span {
        font-size: 20px;
    }

    .game_play .question-progress p {
        margin-bottom: 7px;
        font-size: 14px;
        line-height: 1.05;
    }

    .game_play .progress-dots {
        gap: 6px;
    }

    .game_play .progress-dot {
        width: 24px;
        height: 5px;
    }

    .game_play .game-panel .quiz-sound-toggle {
        grid-column: auto;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0;
        border-radius: 14px;
    }

    .game_play .game-panel .quiz-sound-toggle .material-symbols-outlined {
        font-size: 22px;
    }

    .game_play .game-panel .quiz-sound-toggle-text {
        display: none;
    }

    .game_play #quiz-content {
        box-sizing: border-box;
        flex: 1 1 auto;
        display: flex;
        min-height: 0;
        margin-top: 0;
        padding: 10px 10px 12px;
        overflow: hidden;
    }

    .game_play #quiz-content .quiz-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        gap: 8px;
        overflow: hidden;
    }

    .game_play .quiz_txtquest {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        max-height: 17svh;
        margin: 0 auto;
        padding: 10px 12px;
        font-size: clamp(13px, 3.65vw, 17px);
        line-height: 1.14;
        letter-spacing: .02em;
        word-spacing: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .game_play .quiz-image {
        flex: 0 1 clamp(92px, 19svh, 160px);
        min-height: 0;
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
    }

    .game_play .quiz-media-quest {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .game_play .hint {
        flex: 0 0 auto;
        gap: 7px;
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    .game_play .hint span {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }

    .game_play .quiz_block_answer,
    .game_play .quiz_block_media_answer {
        flex: 1 1 auto;
        min-height: 0;
        display: grid !important;
        gap: 8px !important;
        align-content: stretch;
        overflow: hidden;
    }

    .game_play .quiz_block_answer {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(44px, 1fr);
    }

    .game_play .quiz_block_media_answer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(88px, 1fr);
    }

    .game_play .answer-btn {
        min-height: 0;
        height: 100%;
        grid-template-columns: 38px minmax(0, 1fr) 14px;
        gap: 8px;
        padding: 8px 9px;
        border-radius: 15px;
    }

    .game_play .answer-number {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        font-size: 16px;
    }

    .game_play .answer-text {
        font-size: clamp(14px, 3.8vw, 17px);
        line-height: 1.14;
        max-height: 100%;
        overflow: hidden;
    }

    .game_play .answer-arrow {
        font-size: 22px;
    }

    .game_play .answer-btn--media {
        min-height: 0;
        padding: 0;
    }

    .game_play .answer-btn--media .answer-number {
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 2;
    }

    .game_play .answer-text--media,
    .game_play .answer-text--media img {
        width: 100%;
        height: 100% !important;
        max-height: none !important;
    }

    .game_play .answer-text--media img {
        object-fit: cover;
        border-radius: 14px;
    }

    .game_play .question-loading-state {
        margin: auto;
    }
}

@media (max-width: 640px) and (max-height: 700px) {
    .game_play.quiz_container {
        padding-top: 4px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .game_play .top-panel {
        margin-bottom: 4px;
    }

    .game_play .top-item {
        min-height: 36px;
        padding: 5px;
    }

    .game_play .top-icon {
        flex-basis: 23px;
        width: 23px;
        height: 23px;
        font-size: 13px;
    }

    .game_play .top-label {
        display: none;
    }

    .game_play .game-panel {
        min-height: 50px;
        margin-bottom: 4px;
        padding: 5px 7px;
    }

    .game_play .timer-ring {
        width: 44px;
        height: 44px;
    }

    .game_play .timer-ring span {
        font-size: 18px;
    }

    .game_play .question-progress p {
        margin-bottom: 5px;
        font-size: 13px;
    }

    .game_play .progress-dot {
        width: 20px;
        height: 4px;
    }

    .game_play #quiz-content {
        padding: 8px;
    }

    .game_play #quiz-content .quiz-container {
        gap: 6px;
    }

    .game_play .quiz_txtquest {
        max-height: 15svh;
        padding: 8px 10px;
        font-size: clamp(12px, 3.45vw, 15px);
        line-height: 1.12;
        -webkit-line-clamp: 3;
    }

    .game_play .quiz-image {
        flex-basis: clamp(76px, 16svh, 118px);
    }

    .game_play .hint {
        display: none;
    }

    .game_play .quiz_block_answer,
    .game_play .quiz_block_media_answer {
        gap: 6px !important;
    }

    .game_play .answer-btn {
        grid-template-columns: 34px minmax(0, 1fr) 12px;
        padding: 6px 8px;
        border-radius: 13px;
    }

    .game_play .answer-number {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 14px;
    }
}

/* Game timer and sound toggle styles moved from global style.css. */
.mui-timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0;
    position: absolute;
    left: 25px;
    top: 25px;
}
.mui-timer-circle {
    width: 30px;
    overflow: hidden;
    text-align: center;
    line-height: 28px;
    margin-left: 1px;
}

.mui-timer-svg {
    position: absolute;
    left: -4px; top: -4px;
    width: 55px; height: 55px;
    transform: rotate(-90deg);
}
.mui-timer-val {
    position: relative;
    z-index: 2;
    font-size: 1.1em;
    color: rgb(42 255 0);
    font-weight: 500;
}
/* Animation: 10 seconds from 0% to 100%. */
.mui-timer-circle circle {
    stroke-dasharray: 157;   /* 2*pi*R, R=50 */
    stroke-dashoffset: 0;
    stroke: rgb(1 22 45 / 92%);
    stroke-width: 5;
    fill: none;
}
@keyframes timerAnim {
    from {stroke-dashoffset: 157;}
    to   {stroke-dashoffset: 0;}
}
.mui-timer-label {
    margin-top: 0px;
    color: #888;
    font-size: 0.8em;
    font-family: "Arial", sans-serif;
}

.quiz-sound-toggle {
    position: absolute;
    top: 23px;
    right: 18px;
    z-index: 3;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(22, 209, 195, .34);
    border-radius: 999px;
    background: rgba(4, 18, 41, .82);
    color: var(--game-interactive);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.quiz-sound-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 187, 0, .58);
    color: var(--game-prize);
}

.quiz-sound-toggle.is-muted {
    color: #fca5a5;
    border-color: rgba(244, 63, 94, .44);
    background: rgba(65, 18, 28, .72);
}

.quiz-sound-toggle .material-symbols-outlined {
    font-size: 20px;
}

.quiz-sound-toggle-text {
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}