.game-wrapper.gx {
    --gx-ink: #0b1a33;
    --gx-ink-2: #33507a;
    --gx-muted: #7e94b3;
    --gx-line: #e3ecf9;
    --gx-line-2: #eff4fd;
    --gx-bg: #ffffff;
    --gx-bg-2: #f7faff;
    --gx-bg-3: #edf3ff;
    --gx-blue: #2563eb;
    --gx-blue-d: #1d4ed8;
    --gx-blue-l: #60a5fa;
    --gx-sky: #38bdf8;
    --gx-win: #0ea472;
    --gx-win-bg: #e9fbf4;
    --gx-lose: #e23b52;
    --gx-lose-bg: #fef0f2;

    --gx-gloss: rgba(255, 255, 255, .9);

    --gx-gloss-soft: rgba(255, 255, 255, .45);

    --gx-pool: rgba(255, 255, 255, .85);
    --gx-drop: rgba(11, 26, 51, .22);
    --gx-edge: #dbe6f8;
    --gx-edge-ok: #93e3c9;
    --gx-edge-lose: #f7b5bf;

    --gx-coin-a: #c2d7fa;
    --gx-coin-b: #a3c1f4;
    --gx-coin-c: #8db3f0;

    --gx-mark-pad: 0;
    --gx-mark-plate: transparent;
    --gx-mark-shadow: none;

    --gx-shadow: 0 8px 26px rgba(37, 99, 235, .07);
    --gx-shadow-lg: 0 18px 44px rgba(37, 99, 235, .16);
    --gx-r: 20px;
    --gx-r-sm: 12px;
    --gx-ease: cubic-bezier(.34, 1.4, .64, 1);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    overflow: visible;

    container-type: inline-size;
    container-name: gx;
    color: var(--gx-ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .game-wrapper.gx {
        --gx-ink:     var(--text);
        --gx-ink-2:   var(--text-2);
        --gx-muted:   var(--text-dim);
        --gx-line:    var(--border);
        --gx-line-2:  var(--border-soft);
        --gx-bg:      var(--surface);
        --gx-bg-2:    var(--surface-2);
        --gx-bg-3:    var(--surface-3);
        --gx-blue:    var(--accent);
        --gx-blue-d:  var(--accent-hover);
        --gx-blue-l:  #7cb4ff;
        --gx-sky:     #5fccff;
        --gx-win:     var(--ok);
        --gx-win-bg:  var(--ok-soft);
        --gx-lose:    var(--danger);
        --gx-lose-bg: var(--danger-soft);

        --gx-gloss:    rgba(255, 255, 255, .05);
        --gx-gloss-soft: rgba(255, 255, 255, .05);

        --gx-pool:     rgba(255, 255, 255, .06);
        --gx-drop:     rgba(0, 0, 0, .55);
        --gx-edge:     #0a0f16;
        --gx-edge-ok:  #14513c;
        --gx-edge-lose:#5a2028;
        --gx-coin-a:   #5a76a6;
        --gx-coin-b:   #46608a;
        --gx-coin-c:   #374d70;

        --gx-mark-pad:    4px;
        --gx-mark-plate:  linear-gradient(180deg, #ffffff 0%, #e9eff8 100%);
        --gx-mark-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] .game-wrapper.gx {
    --gx-ink:     var(--text);
    --gx-ink-2:   var(--text-2);
    --gx-muted:   var(--text-dim);
    --gx-line:    var(--border);
    --gx-line-2:  var(--border-soft);
    --gx-bg:      var(--surface);
    --gx-bg-2:    var(--surface-2);
    --gx-bg-3:    var(--surface-3);
    --gx-blue:    var(--accent);
    --gx-blue-d:  var(--accent-hover);
    --gx-blue-l:  #7cb4ff;
    --gx-sky:     #5fccff;
    --gx-win:     var(--ok);
    --gx-win-bg:  var(--ok-soft);
    --gx-lose:    var(--danger);
    --gx-lose-bg: var(--danger-soft);

    --gx-gloss:    rgba(255, 255, 255, .05);
    --gx-gloss-soft: rgba(255, 255, 255, .05);
    --gx-pool:     rgba(255, 255, 255, .06);
    --gx-drop:     rgba(0, 0, 0, .55);
    --gx-edge:     #0a0f16;
    --gx-edge-ok:  #14513c;
    --gx-edge-lose:#5a2028;
    --gx-coin-a:   #5a76a6;
    --gx-coin-b:   #46608a;
    --gx-coin-c:   #374d70;

    --gx-mark-pad:    4px;
    --gx-mark-plate:  linear-gradient(180deg, #ffffff 0%, #e9eff8 100%);
    --gx-mark-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.game-wrapper.gx::before { display: none; }

.gx *,
.gx *::before,
.gx *::after { box-sizing: border-box; }

.gx button { font-family: 'Inter', sans-serif; }

.gx .gx-num-font {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.gx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
}

.gx-head::after { display: none; }

.gx-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 999px;

    border: 1px solid transparent;
    background: transparent;
    color: var(--gx-muted, #64748b);

    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.gx-check svg { width: 14px; height: 14px; flex: none; }

.gx-check.is-idle {
    visibility: hidden;
    pointer-events: none;
}

.gx-check:hover {
    color: var(--gx-blue);
    border-color: color-mix(in srgb, var(--gx-blue) 28%, transparent);
    background: color-mix(in srgb, var(--gx-blue) 10%, transparent);
}

.gx-check:active { transform: translateY(1px); }

.gx-check:focus-visible {
    outline: 2px solid var(--gx-blue);
    outline-offset: 2px;
}

.gx-check svg { opacity: .75; }
.gx-check:hover svg { opacity: 1; }

.gx[data-game="dice"] .gx-check {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 10px 20px;
    gap: 9px;

    border-color: color-mix(in srgb, var(--gx-blue) 22%, transparent);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--gx-blue) 11%, transparent) 0%,
            color-mix(in srgb, var(--gx-blue) 3%, transparent) 100%),
        var(--surface);
    color: var(--gx-blue-d);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;

    box-shadow: 0 6px 16px rgba(37, 99, 235, .13);
    transition: transform .18s ease, box-shadow .18s ease,
                border-color .18s ease, background .18s ease;
}

.gx[data-game="dice"] .gx-check svg {
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gx-blue) 14%, transparent);
    color: var(--gx-blue);
    opacity: 1;
}

.gx[data-game="dice"] .gx-check:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--gx-blue) 45%, transparent);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--gx-blue) 16%, transparent) 0%,
            color-mix(in srgb, var(--gx-blue) 6%, transparent) 100%),
        var(--surface);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .2);
}

.gx[data-game="dice"] .gx-check:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .16);
}

.gx[data-game="dice"] .gx-check::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, .55) 50%,
        transparent 70%);
    pointer-events: none;
}

.gx[data-game="dice"] .gx-check:hover::after {
    animation: gx-check-shine .7s ease-out;
}

@keyframes gx-check-shine {
    to { transform: translateX(120%); }
}

.gx[data-game="dice"] .gx-result-card.is-win .gx-check {
    border-color: color-mix(in srgb, var(--gx-win, #0ea472) 32%, transparent);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--gx-win, #0ea472) 12%, transparent) 0%,
            color-mix(in srgb, var(--gx-win, #0ea472) 3%, transparent) 100%),
        var(--surface);
    color: var(--gx-win, #0ea472);
    box-shadow: 0 6px 16px rgba(14, 164, 114, .16);
}

.gx[data-game="dice"] .gx-result-card.is-lose .gx-check {
    border-color: var(--gx-line, var(--border));
    background: var(--gx-bg-2, var(--surface-2));
    color: var(--gx-muted, #94a3b8);
    box-shadow: none;
}

.gx[data-game="dice"] .gx-result-card.is-lose .gx-check svg {
    background: color-mix(in srgb, var(--gx-muted, #94a3b8) 16%, transparent);
    color: var(--gx-muted, #94a3b8);
}

.gx[data-game="dice"] .gx-result-card.is-lose .gx-check:hover {
    border-color: color-mix(in srgb, var(--gx-blue) 40%, transparent);
    color: var(--gx-blue-d);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .14);
}

.gx[data-game="dice"] .gx-result-card.is-lose .gx-check:hover svg {
    background: color-mix(in srgb, var(--gx-blue) 14%, transparent);
    color: var(--gx-blue);
}

.gx-check-wait {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 18px;
    color: var(--gx-muted, #94a3b8);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1px;
    user-select: none;
}

.gx-check-wait__dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    animation: gxWaitPulse 1.4s ease-in-out infinite;
}

@keyframes gxWaitPulse {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: .9;  transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gx-check-wait__dot { animation: none; opacity: .6; }
}

.gx[data-game="dice"] .gx-result-card.is-win .gx-check svg {
    background: color-mix(in srgb, var(--gx-win, #0ea472) 16%, transparent);
    color: var(--gx-win, #0ea472);
}

@media (prefers-reduced-motion: reduce) {
    .gx[data-game="dice"] .gx-check,
    .gx[data-game="dice"] .gx-check:hover {
        transform: none;
    }
    .gx[data-game="dice"] .gx-check:hover::after { animation: none; }
}

.gx-result .gx-check--float {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(50% + 44px);
    pointer-events: auto;
    color: var(--gx-muted, #64748b);
    border-color: var(--gx-line, var(--border));
    background: var(--surface);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(11, 26, 51, .14);
}

.gx-result .gx-check--float:active {
    transform: translateX(-50%) translateY(1px);
}

.gx-result .gx-check--float:hover {
    background: var(--surface);
    border-color: var(--gx-blue);
}

.gx-result[hidden] .gx-check--float { display: none; }

.gx-fair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg-2, var(--surface-2));
    color: var(--gx-muted, #64748b);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.gx-fair svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.gx-fair:hover {
    color: var(--gx-blue);
    border-color: var(--gx-blue);
    background: var(--surface);
}

.gx-fair:focus-visible {
    outline: 2px solid var(--gx-blue);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .gx-fair span { display: none; }

    .gx-fair {
        padding: 8px;
        border-radius: 50%;
    }
}

.gx-id {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 16px;
    padding: 6px 12px 6px 6px;
    transition: background .2s ease;
    min-width: 0;
}

.gx-id:hover { background: var(--gx-bg-3); }

.gx-id__back {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--gx-line);
    color: var(--gx-blue);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 2px;
    transition: transform .2s var(--gx-ease), border-color .2s ease;
}

.gx-id:hover .gx-id__back {
    transform: translateX(-3px);
    border-color: var(--gx-blue-l);
}

.gx-id__icon {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(150deg, var(--surface) 0%, var(--gx-bg-3) 100%);
    border: 1px solid var(--gx-line);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .08);
    overflow: hidden;
}

.gx-id__icon svg {
    width: 22px;
    height: 22px;
    color: var(--gx-blue);
}

.gx-id__txt { min-width: 0; }

.gx-id__txt h1 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--gx-ink);
    line-height: 1.15;
    margin: 0;
}

.gx-id__txt p {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--gx-muted);
}

.gx-head__side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--gx-bg-3);
    border: 1px solid var(--border);
    color: var(--gx-blue-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gx-tag__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
    animation: gxPulse 2s ease-in-out infinite;
}

@keyframes gxPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.gx-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--gx-line);
    box-shadow: var(--gx-shadow);
    white-space: nowrap;
}

.gx-balance__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.gx-balance .game-balance-num {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--gx-ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.gx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@container gx (min-width: 520px) and (max-width: 639.98px) {
    .gx-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }

    .gx-panel > .gx-payout,
    .gx-panel > .gx-action,
    .gx-panel > .gx-hint {
        grid-column: 1 / -1;
    }
}

@container gx (min-width: 640px) {
    .gx-layout {
        grid-template-columns: minmax(268px, 310px) minmax(0, 1fr);
        gap: 18px;
        align-items: stretch;
    }

    .gx[data-game="bubbles"] .gx-layout { grid-template-columns: minmax(0, 1fr); }

    .gx[data-game="bubbles"] .gx-layout > .gx-stage { order: -1; }
    .gx[data-game="bubbles"] .gx-layout > .gx-panel { order: 0; }

    .gx[data-game="bubbles"] .gx-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: stretch;
    }

    .gx[data-game="bubbles"] .gx-panel > .gx-tiles { grid-column: 1 / -1; }

    .gx[data-game="bubbles"] .gx-panel > .gx-switch {
        grid-column: 1 / -1;

        justify-content: space-between;

        margin-top: 0;
    }

    .gx[data-game="bubbles"] .gx-panel > .gx-switch .gx-switch__text { order: 1; }
    .gx[data-game="bubbles"] .gx-panel > .gx-switch .gx-switch__track { order: 2; }
}

.gx-ctl:empty { display: none; }

.gx-card {
    background: var(--gx-bg);
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-r);
    box-shadow: var(--gx-shadow);
}

.gx-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.gx-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
}

.gx-stage::before {
    content: '';
    position: absolute;
    inset: 0;

    background:
        radial-gradient(120% 70% at 50% -10%, rgba(96, 165, 250, .16) 0%, transparent 62%),
        linear-gradient(180deg, var(--gx-bg-2) 0%, var(--gx-bg) 55%);
    pointer-events: none;
}

.gx-stage > * { position: relative; }

.gx-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gx-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.gx-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.gx-label__val {
    font-size: 13px;
    font-weight: 800;
    color: var(--gx-blue-d);
    font-variant-numeric: tabular-nums;
}

.gx-stepper {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    height: 50px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gx-stepper:focus-within,
.gx-stepper:hover {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .07);
}

.gx-stepper__btn {
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--gx-blue);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.gx-stepper__btn:hover { background: rgba(37, 99, 235, .09); }
.gx-stepper__btn:active { transform: scale(.9); }

.gx-stepper__val {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    user-select: none;
}

.gx-stepper__val--input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    text-align: center;
    font-family: 'Inter', sans-serif;
    -moz-appearance: textfield;
}

.gx-stepper__val--input::-webkit-inner-spin-button,
.gx-stepper__val--input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gx-stepper__field {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    min-width: 0;
    cursor: text;
}

.gx-stepper__field .gx-stepper__val--input {
    flex: 0 1 auto;
    width: 5ch;
    min-width: 0;
    height: 100%;
    text-align: right;
}

.gx-stepper__field .gx-stepper__val--input::selection {
    background: rgba(37, 99, 235, .18);
}

.gx-stepper__suffix {
    flex: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--gx-muted);
    user-select: none;
}

.gx-chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
}

.gx-chip {
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--gx-line);
    background: var(--surface);
    color: var(--gx-ink-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .16s ease;
    font-variant-numeric: tabular-nums;
}

.gx-chip:hover {
    border-color: var(--gx-blue-l);
    color: var(--gx-blue-d);
    background: var(--gx-bg-3);
}

.gx-chip:active { transform: scale(.95); }

.gx-chip.is-active {
    background: linear-gradient(140deg, var(--gx-blue) 0%, var(--gx-blue-d) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .28);
}

.gx-chips--scroll {
    grid-auto-columns: 44px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

.gx-chips--scroll .gx-chip { scroll-snap-align: center; }

.gx-scroll::-webkit-scrollbar { height: 5px; }
.gx-scroll::-webkit-scrollbar-track { background: transparent; }
.gx-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
}
.gx-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.gx-scroll {
    scrollbar-width: thin;
    scrollbar-color: #dbe6f7 transparent;
}

.gx-hidden { display: none !important; }

.gx-payout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--surface-accent) 0%, var(--surface-accent) 100%);
    border: 1px solid var(--accent-border);
}

.gx-payout__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gx-payout__val {
    display: block;
    margin-top: 3px;
    font-size: 22px;
    font-weight: 800;
    color: var(--gx-blue-d);
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.gx-payout__mult {
    flex: none;
    padding: 5px 11px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--gx-blue) 0%, var(--gx-blue-d) 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .3);
    font-variant-numeric: tabular-nums;
}

.gx-action {
    width: 100%;
    min-height: 56px;
    padding: 9px 20px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(140deg, #3b82f6 0%, var(--gx-blue-d) 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
    transition: transform .16s var(--gx-ease), box-shadow .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden;
}

.gx-action::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: gxSheen 3.6s ease-in-out infinite;
}

@keyframes gxSheen {
    0%, 62% { left: -60%; }
    100% { left: 130%; }
}

.gx-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--gx-shadow-lg);
    filter: saturate(1.08);
}

.gx-action:active { transform: translateY(0) scale(.985); }

.gx-action:disabled {
    cursor: not-allowed;
    background: var(--gx-bg-3);
    color: var(--gx-ink-2);

    box-shadow: inset 0 0 0 1px var(--gx-line);
}

.gx-action:disabled::after { animation: none; }

.gx-action:disabled:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px var(--gx-line);
    filter: none;
}

.gx-action__main {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gx-action__sub {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .82;
    font-variant-numeric: tabular-nums;
}

.gx-action--cash {
    background: linear-gradient(140deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 24px rgba(5, 150, 105, .3);
}

.gx-action--cash:hover { box-shadow: 0 18px 44px rgba(5, 150, 105, .28); }

.gx-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.gx-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gx-tile {
    padding: 11px 8px;
    border-radius: 13px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line-2);
    text-align: center;
}

.gx-tile__label {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gx-muted);
    line-height: 1.25;
}

.gx-tile__val {
    display: block;
    margin-top: 5px;
    font-size: 17px;
    font-weight: 800;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.gx-tile__val.highlight {
    background: linear-gradient(135deg, var(--gx-blue) 0%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gx-hint {
    font-size: 11px;
    color: var(--gx-muted);
    text-align: center;
    line-height: 1.45;
    font-weight: 500;
}

.gx-board-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.gx .game-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(7px, 2cqw, 13px);
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding: clamp(8px, 1.6cqw, 14px);
    border-radius: 22px;
    background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-accent) 100%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 var(--gx-gloss), 0 10px 30px rgba(37, 99, 235, .08);
}

.gx .cell {
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-accent) 100%);
    border: 1px solid var(--border);
    box-shadow: 0 2px 0 var(--gx-edge), inset 0 1px 0 var(--gx-gloss);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: clamp(20px, 5cqw, 30px);
    line-height: 1;
    user-select: none;
    position: relative;
    transition: transform .18s var(--gx-ease), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.gx .cell::before {
    content: '';
    width: clamp(9px, 2.4cqw, 18px);
    height: clamp(9px, 2.4cqw, 18px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        var(--gx-coin-a) 0%, var(--gx-coin-b) 60%, var(--gx-coin-c) 100%);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .22);
    opacity: 1;
    transition: opacity .2s ease, transform .2s var(--gx-ease);
}

.gx .cell:hover:not(.revealed-bomb):not(.revealed-safe) {
    transform: translateY(-3px);
    border-color: var(--gx-blue-l);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18), inset 0 1px 0 var(--gx-gloss);
}

.gx .cell:hover:not(.revealed-bomb):not(.revealed-safe)::before {
    transform: scale(1.25);
    opacity: 1;
}

.gx .cell:active:not(.revealed-bomb):not(.revealed-safe) {
    transform: translateY(-1px) scale(.96);
}

.gx .cell.revealed-safe {
    background: linear-gradient(160deg, var(--ok-soft) 0%, var(--ok-soft) 100%);
    border-color: var(--ok-border);
    box-shadow: 0 2px 0 var(--gx-edge-ok), 0 0 0 3px rgba(14, 164, 114, .1), inset 0 1px 0 var(--gx-gloss);
    cursor: default;
    animation: gxReveal .42s var(--gx-ease) both;
}

.gx .cell.revealed-safe::before { display: none; }

.gx .mines-board,
.gx .cell {
    --mines-gem: url('/images/mines/gem.svg');
    --mines-bomb: url('/images/mines/bomb.svg');
}

.gx .cell.revealed-safe::after,
.gx .cell.revealed-bomb::after,
.gx .cell.revealed-mine::after {
    content: '';
    width: clamp(22px, 5.6cqw, 34px);
    height: clamp(22px, 5.6cqw, 34px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.gx .cell.revealed-safe::after {
    background-image: var(--mines-gem);
    filter: drop-shadow(0 3px 5px rgba(5, 122, 85, .3));
    animation: gxPop .38s var(--gx-ease) both;
}

.gx .cell.revealed-bomb::after {
    background-image: var(--mines-bomb);
    filter: drop-shadow(0 3px 6px rgba(226, 59, 82, .38));
    animation: gxPop .34s var(--gx-ease) both;
}

.gx .cell.revealed-bomb {
    background: linear-gradient(160deg, var(--danger-soft) 0%, var(--danger-soft) 100%);
    border-color: var(--danger-border);
    box-shadow: 0 2px 0 var(--gx-edge-lose), 0 0 0 3px rgba(226, 59, 82, .12);
    cursor: default;
    animation: gxShake .45s ease-in-out both;
}

.gx .cell.revealed-bomb::before { display: none; }

@keyframes gxReveal {
    0% { transform: rotateY(-82deg) scale(.9); opacity: .35; }
    100% { transform: rotateY(0) scale(1); opacity: 1; }
}

@keyframes gxPop {
    0% { transform: scale(0) rotate(-25deg); opacity: 0; }
    65% { transform: scale(1.22) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

@keyframes gxShake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-5px) rotate(-2deg); }
    38% { transform: translateX(5px) rotate(2deg); }
    58% { transform: translateX(-3px); }
    78% { transform: translateX(3px); }
}

.gx-coeffs {
    width: 100%;
    max-width: 560px;
}

.gx-coeffs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gx .mines-coefficients-table {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
}

.gx .mines-coefficient-item {
    flex: 0 0 auto;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--gx-line);
    color: var(--gx-muted);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform .45s var(--gx-ease), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gx .mines-coefficient-item:hover {
    border-color: var(--gx-blue-l);
    box-shadow: 0 5px 14px rgba(37, 99, 235, .12);
}

.gx .mines-coefficient-item .coeff-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
}

.gx .mines-coefficient-item.active {
    background: linear-gradient(140deg, var(--gx-blue) 0%, var(--gx-blue-d) 100%);
    border-color: transparent;
    color: rgba(255, 255, 255, .78);
    box-shadow: 0 7px 16px rgba(37, 99, 235, .28);
}

.gx .mines-coefficient-item.active .coeff-val { color: #fff; }

.gx .mines-coefficient-item.rotated { transform: rotate(360deg); }

.gx-dice-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.gx-roll {
    width: 100%;
    max-width: 520px;
    text-align: center;
    padding: 26px 20px 22px;
    border-radius: 22px;
    background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface-accent) 100%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 var(--gx-gloss);
    position: relative;
    overflow: hidden;
}

.gx-roll__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gx .dice-number-value {
    display: block;
    margin-top: 8px;
    font-size: clamp(40px, 13cqw, 66px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}

.gx .dice-number-value.rolling {
    color: var(--gx-blue);
    animation: gxRoll .09s infinite alternate;
}

.gx .dice-number-value.settled { animation: gxSettle .4s var(--gx-ease); }

.gx .dice-number-value.win {
    color: var(--gx-win);
    text-shadow: 0 6px 30px rgba(14, 164, 114, .35);
}

.gx .dice-number-value.lose {
    color: var(--gx-lose);
    text-shadow: 0 6px 30px rgba(226, 59, 82, .28);
}

@keyframes gxRoll {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-3px); opacity: .68; }
}

@keyframes gxSettle {
    0% { transform: scale(1.2); opacity: .3; }
    60% { transform: scale(.96); opacity: 1; }
    100% { transform: scale(1); }
}

.gx-scale { width: 100%; margin-top: 20px; }

.gx-scale__track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: var(--border);
    box-shadow: inset 0 1px 3px rgba(15, 40, 80, .1);
    overflow: visible;
}

.gx-scale__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--p, 50) * 1%);
    transition: width .25s ease;
}

.gx-scale__zone--less {
    left: 0;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, #7dd3fc 0%, #38bdf8 100%);
}

.gx-scale__zone--more {
    right: 0;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--gx-blue) 0%, var(--gx-blue-d) 100%);
}

.gx-scale__zone--both {
    left: calc((100 - var(--p, 50)) * 1%);
    right: auto;
    width: max(0%, calc((2 * var(--p, 50) - 100) * 1%));
    background: repeating-linear-gradient(
        135deg,
        #7dd3fc 0 6px,
        var(--gx-blue-d) 6px 12px);
    transition: left .25s ease, width .25s ease;
}

.gx-scale__note {
    display: none;
    margin: 8px 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--gx-muted);
    text-align: left;
}

.gx-scale.is-overlap .gx-scale__note { display: block; }

.gx-scale__marker {
    position: absolute;
    top: 50%;
    left: var(--m, 50%);
    width: 4px;
    height: 26px;
    margin-left: -2px;
    border-radius: 3px;
    background: var(--gx-ink);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    opacity: 0;
    transition: left .45s var(--gx-ease), opacity .2s ease, transform .3s var(--gx-ease), background .2s ease;
    box-shadow: 0 3px 10px rgba(11, 26, 51, .3);
}

.gx-scale__marker.is-on {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.gx-scale__marker.win { background: var(--gx-win); }
.gx-scale__marker.lose { background: var(--gx-lose); }

.gx-scale__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gx-muted);
    font-variant-numeric: tabular-nums;
}

.gx-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.gx-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--gx-blue) 0%,
        var(--gx-blue) calc(var(--p, 50) * 1%),
        var(--gx-line) calc(var(--p, 50) * 1%),
        var(--gx-line) 100%);
}

.gx-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--gx-blue) 0%,
        var(--gx-blue) calc(var(--p, 50) * 1%),
        var(--gx-line) calc(var(--p, 50) * 1%),
        var(--gx-line) 100%);
}

.gx-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--gx-blue);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .32);
    transition: transform .15s var(--gx-ease);
}

.gx-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--gx-blue);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .32);
}

.gx-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.gx-range:active::-webkit-slider-thumb { transform: scale(.95); }

.gx-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, .16);
}

.gx .dice-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 0;
}

.gx .dice-choice-btn {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 15px 12px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s var(--gx-ease), box-shadow .2s ease, filter .2s ease;
}

.gx .dice-choice-btn::before { content: none; }

.gx .dice-less-btn {
    background: linear-gradient(140deg, #7dd3fc 0%, #0ea5e9 100%);
    box-shadow: 0 10px 22px rgba(14, 165, 233, .28);
}

.gx .dice-more-btn {
    background: linear-gradient(140deg, #3b82f6 0%, var(--gx-blue-d) 100%);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .3);
}

.gx .dice-choice-btn:hover:not(.dice-choice-disabled) {
    transform: translateY(-3px);
    filter: saturate(1.1);
}

.gx .dice-less-btn:hover:not(.dice-choice-disabled) { box-shadow: 0 16px 34px rgba(14, 165, 233, .32); }
.gx .dice-more-btn:hover:not(.dice-choice-disabled) { box-shadow: 0 16px 34px rgba(37, 99, 235, .34); }

.gx .dice-choice-btn:active:not(.dice-choice-disabled) { transform: translateY(0) scale(.97); }

.gx .dice-choice-btn.dice-choice-disabled {
    opacity: .45;
    filter: grayscale(.35);
    pointer-events: none;
}

.gx .dice-choice-btn.dice-choice-pressed { transform: scale(.94); }

.gx-choice__top {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15.5px;
    font-weight: 800;
}

.gx-choice__arrow {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 13px;
    line-height: 1;
}

.gx .dice-interval {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

.gx .gx-result-card {

    width: 100%;
    max-width: 520px;

    display: grid;
    gap: 2px;
    align-content: center;
    min-height: 88px;

    padding: 12px 16px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid transparent;
    background: transparent;

    margin-inline: auto;
}

.gx .gx-result-card.is-shown > * {
    animation: diceResultIn .22s ease-out both;
}

@keyframes diceResultIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gx .gx-result-card__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

.gx .gx-result-card__sum {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.gx .gx-result-card__note {
    font-size: 12px;
    font-weight: 600;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.gx .gx-result-card.is-idle,
.gx .gx-result-card.is-rolling {
    background: var(--gx-bg-2, var(--surface-2));
    border-color: var(--gx-line, var(--border));
    color: var(--gx-muted, #94a3b8);
}

.gx .gx-result-card.is-idle .gx-result-card__sum,
.gx .gx-result-card.is-rolling .gx-result-card__sum {
    font-size: 18px;
    font-weight: 700;
}

.gx .gx-result-card.is-win {
    background: linear-gradient(135deg, var(--ok-soft), var(--ok-soft));
    border-color: var(--ok-border);
    color: var(--ok-strong);
}

.gx .gx-result-card--bare,
.gx .gx-result-card--bare.is-idle,
.gx .gx-result-card--bare.is-rolling,
.gx .gx-result-card--bare.is-win,
.gx .gx-result-card--bare.is-lose {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.gx .gx-result-card--bare {

    min-height: 48px;
    padding: 4px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gx .gx-result-card--bare .gx-check,
.gx .gx-result-card--bare .gx-check-wait { margin-top: 0; }

.gx .gx-result-card.is-lose {
    background: linear-gradient(135deg, var(--danger-soft), var(--danger-soft));
    border-color: var(--danger-border);
    color: var(--danger);
}

.gx .gx-result-card--bare.is-win,
.gx .gx-result-card--bare.is-lose {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.gx .bubbles.game-field {
    width: 100%;
    max-width: 620px;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 26px 26px;
    border-radius: 22px;

    background:
        radial-gradient(90% 70% at 50% 0%, rgba(56, 189, 248, .14) 0%, transparent 65%),
        linear-gradient(165deg, var(--gx-bg-2) 0%, var(--gx-bg-3) 100%);
    border: 1px solid var(--border);

    box-shadow: inset 0 1px 0 var(--gx-bg);
    position: relative;
    overflow: hidden;
}

.bx {
    width: 100%;
    position: relative;
    z-index: 1;
}

.bx__head {
    text-align: center;
    margin-bottom: 30px;
}

.bx__cap {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.bx__live {
    margin-top: 6px;
    font-size: clamp(38px, 11cqw, 60px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}

.bx.is-reached .bx__live {
    color: var(--gx-win);
    text-shadow: 0 6px 28px rgba(14, 164, 114, .3);
}

.bx.is-lost .bx__live {
    color: var(--gx-lose);
    text-shadow: 0 6px 28px rgba(226, 59, 82, .26);
    animation: gxShake .45s ease-in-out;
}

.bx__track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: var(--border);
    box-shadow: inset 0 1px 3px rgba(15, 40, 80, .12);
}

.bx__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fill, 0%);
    min-width: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc 0%, var(--gx-blue) 100%);
    box-shadow: 0 2px 10px rgba(37, 99, 235, .3);
}

.bx.is-reached .bx__fill {
    background: linear-gradient(90deg, #6ee7c0 0%, var(--gx-win) 100%);
    box-shadow: 0 2px 10px rgba(14, 164, 114, .3);
}

.bx.is-lost .bx__fill {
    background: linear-gradient(90deg, #fca5b5 0%, var(--gx-lose) 100%);
    box-shadow: 0 2px 10px rgba(226, 59, 82, .28);
}

.bx.is-live .bx__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: gxFlow 1s linear infinite;
}

@keyframes gxFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.bx__flag {
    position: absolute;
    left: var(--target, 11%);
    top: 50%;
    width: 3px;
    height: 30px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: var(--gx-ink);
    transform: translateY(-50%);
    transition: left .25s ease, background .25s ease;
    z-index: 3;
}

.bx.is-reached .bx__flag { background: var(--gx-win); }

.bx__flag-cap {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--gx-ink);

    color: var(--gx-bg);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background .25s ease, color .25s ease;
}

.bx__flag-cap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: var(--gx-ink);
    transition: border-top-color .25s ease;
}

.bx.is-reached .bx__flag-cap { background: var(--gx-win); }
.bx.is-reached .bx__flag-cap::after { border-top-color: var(--gx-win); }

.bx__flag.is-right .bx__flag-cap,
.bx__pin.is-right .bx__pin-cap {
    left: auto;
    right: 0;
    transform: none;
}

.bx__flag.is-left .bx__flag-cap,
.bx__pin.is-left .bx__pin-cap {
    left: 0;
    transform: none;
}

.bx__flag.is-right .bx__flag-cap::after { left: auto; right: 5px; margin-left: 0; }
.bx__flag.is-left .bx__flag-cap::after { left: 5px; margin-left: 0; }

.bx__pin {
    position: absolute;
    left: var(--crash, 0%);
    top: 50%;
    width: 3px;
    height: 26px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: var(--gx-lose);
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
    transition: opacity .2s ease, transform .3s var(--gx-ease);
    z-index: 4;
}

.bx.is-reached .bx__pin { background: var(--text-dim); }

.bx__pin.is-on {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.bx__pin.is-on::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid currentColor;
    color: var(--gx-lose);
    animation: gxBurst .5s ease-out both;
}

.bx.is-reached .bx__pin.is-on::before { color: var(--text-dim); }

.bx__pin-cap {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 7px;
    background: var(--gx-bg);
    border: 1px solid var(--gx-line);
    box-shadow: 0 3px 8px rgba(15, 40, 80, .08);
    font-size: 11px;
    font-weight: 800;
    color: var(--gx-lose);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bx.is-reached .bx__pin-cap { color: var(--text-dim); }

.bx__ticks {
    position: relative;
    height: 14px;
    margin-top: 38px;
}

.bx__ticks span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gx-muted);
    font-variant-numeric: tabular-nums;
}

.bx__ticks span:first-child { transform: none; }
.bx__ticks span:last-child { transform: translateX(-100%); }

.bx__status {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gx-muted);
    min-height: 18px;
    transition: color .25s ease;
}

.bx.is-reached .bx__status { color: var(--gx-win); }
.bx.is-lost .bx__status { color: var(--gx-lose); }

.gx .bubbles-result {
    position: static;
    height: auto;

    min-height: 76px;
    align-content: center;
    margin-top: 12px;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 6px;
    pointer-events: none;
}

.gx .bubbles-result .gx-check {

    pointer-events: auto;
    margin-top: 0;
}

.gx .bubbles-result_wrap {
    position: relative;
    width: auto;
    height: auto;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: 19px;
    font-weight: 800;
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 34px rgba(11, 26, 51, .14);
    opacity: 0;
    transform: scale(.8);
}

.gx .bubbles-result_wrap:after { content: none; }

.gx .bubbles-result_wrap.show { animation: gxBadgePop .52s var(--gx-ease) both; }

@keyframes gxBadgePop {
    0% { opacity: 0; transform: scale(.55) translateY(10px); }
    55% { opacity: 1; transform: scale(1.12) translateY(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes gxBurst {
    0% { transform: scale(.35); opacity: .6; }
    100% { transform: scale(2.2); opacity: 0; }
}

.gx .bubbles-result_wrap p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.gx .bubbles-result_wrap.win {

    background: color-mix(in srgb, var(--gx-win-bg) 94%, transparent);
    border: 1px solid var(--ok-border);
    color: var(--gx-win);
}

.gx .bubbles-result_wrap.lost {
    background: color-mix(in srgb, var(--gx-lose-bg) 94%, transparent);
    border: 1px solid var(--danger-border);
    color: var(--gx-lose);
}

@media (max-width: 560px) {
    .gx-head { gap: 10px; }

    .gx-id__icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .gx-id__txt h1 { font-size: 18px; }

    .gx-panel,
    .gx-stage { padding: 14px; }

    .gx-payout__val { font-size: 20px; }

    .gx-action { min-height: 52px; }

    .gx-tile__val { font-size: 15px; }
}

@media (max-width: 380px) {
    .gx-chip { min-width: 44px; font-size: 11.5px; }
    .gx .dice-choices { gap: 8px; }
    .gx-choice__top { font-size: 14px; }
}

.gx .cell.revealed-mine {
    background: linear-gradient(160deg, var(--danger-soft) 0%, var(--danger-soft) 100%);
    border-color: var(--danger-border);
    box-shadow: 0 2px 0 var(--gx-edge-lose), inset 0 1px 0 var(--gx-gloss);
    cursor: default;

    animation: gxRevealSoft .4s var(--gx-ease) both;
    animation-delay: var(--gx-delay, 0s);
}

.gx .cell.revealed-mine::before { display: none; }

.gx .cell.revealed-mine::after {
    background-image: var(--mines-bomb);
    opacity: .5;
    filter: saturate(.6);
}

.gx .cell.is-dimmed {
    opacity: .4;
    filter: saturate(.45);
    cursor: default;
    transition: opacity .35s ease, filter .35s ease;
}

.gx .cell.is-dimmed:hover {
    transform: none;
    box-shadow: 0 2px 0 var(--gx-edge), inset 0 1px 0 var(--gx-gloss);
    border-color: var(--border);
}

@keyframes gxRevealSoft {
    0%   { transform: scale(.82); opacity: 0; }
    70%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.gx-board-holder {
    position: relative;
    width: 100%;
    max-width: 460px;
    display: flex;
    justify-content: center;
}

.gx-result {

    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;

    pointer-events: none;
    animation: gxScrimIn .3s ease both;
}

.gx-result[hidden] { display: none; }

.gx-result__card {

    --gx-res-accent: var(--gx-win);
    --gx-res-halo: rgba(14, 164, 114, .18);

    pointer-events: auto;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    max-width: calc(100% - 16px);
    padding: 10px 18px;
    border: 0;
    border-radius: 24px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(168deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow:
        0 0 0 3px var(--gx-res-accent),
        0 0 0 9px var(--gx-res-halo),
        0 22px 44px rgba(11, 26, 51, .16);
    animation: gxResultIn .45s var(--gx-ease) both;
    transition: transform .2s var(--gx-ease);
}

.gx-result__card:hover  { transform: translateY(-2px); }
.gx-result__card:active { transform: translateY(0) scale(.98); }

.gx-result__card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.gx-result__mult {
    font-size: clamp(34px, 9cqw, 54px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--gx-res-accent);
    font-variant-numeric: tabular-nums;
}

.gx-result__rule {
    width: 74px;
    height: 3px;
    border-radius: 999px;
    background: var(--gx-line);
}

.gx-result__sum {
    font-size: clamp(19px, 4.4cqw, 27px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--gx-res-accent);
    font-variant-numeric: tabular-nums;
}

.gx-result__note {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gx-muted);
}

.gx-result--lose .gx-result__card {
    --gx-res-accent: var(--gx-lose);
    --gx-res-halo: rgba(226, 59, 82, .16);
}

#minesResult {
    background: rgba(240, 246, 255, .14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#minesResult .gx-result__card {
    min-width: 0;
    padding: 10px 18px 11px;

    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;

    align-items: baseline;

    column-gap: 8px;
    row-gap: 3px;

    box-shadow:
        0 0 0 2px var(--gx-res-accent),
        0 0 0 6px var(--gx-res-halo),
        0 10px 26px rgba(11, 26, 51, .28);
}

#minesResult .gx-result__mult,
#minesResult .gx-result__sum {
    grid-row: 1;
    font-weight: 900;
    letter-spacing: -.5px;
}

#minesResult .gx-result__mult { grid-column: 1; font-size: 21px; }
#minesResult .gx-result__sum  { grid-column: 2; font-size: 19px; }

#minesResult .gx-result__rule { display: none; }

#minesResult .gx-result__note {
    grid-column: 1 / -1;
    font-size: 10.5px;
}

#minesResult .gx-result__card::after {
    content: 'нажмите, чтобы убрать';
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--gx-muted);
    opacity: .75;
}

@keyframes gxScrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gxResultIn {
    0%   { transform: scale(.72) translateY(14px); opacity: 0; }
    62%  { transform: scale(1.05) translateY(0);   opacity: 1; }
    100% { transform: scale(1) translateY(0);      opacity: 1; }
}

@media (max-width: 480px) {
    .gx-result__card {
        min-width: min(82%, 220px);
        padding: 18px 24px 20px;
        border-radius: 20px;
    }

    .gx-result__rule { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .gx *,
    .gx *::before,
    .gx *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.gx-switch {

    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gx-line);
    border-radius: var(--gx-r);
    background: var(--gx-bg-2);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease;
}

.gx-switch:hover { border-color: var(--gx-line-2); }

.gx-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gx-switch__track {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background .2s ease;
}

.gx-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.gx-switch input:checked + .gx-switch__track {
    background: var(--gx-blue);
}

.gx-switch input:checked + .gx-switch__track .gx-switch__knob {
    transform: translateX(18px);
}

.gx-switch input:focus-visible + .gx-switch__track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .28);
}

.gx-switch__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gx-switch__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gx-ink);
    line-height: 1.2;
}

.gx-switch__sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gx-muted);
    line-height: 1.2;
}

.ice [data-kind="white"]   { --ice-tint: #7f9dbe; --ice-bg: #ffffff; --ice-fg: #12304e; --ice-line: #c3d5e6; }
.ice [data-kind="grey"]    { --ice-tint: #4d6b8c; --ice-bg: #9fb6cc; --ice-fg: #10283f; --ice-line: #8199b1; }
.ice [data-kind="blues"]   { --ice-tint: #2b7fd4; --ice-bg: #2b7fd4; --ice-fg: #ffffff; --ice-line: #1c62aa; }
.ice [data-kind="oranges"] { --ice-tint: #e08a1e; --ice-bg: #e2870f; --ice-fg: #ffffff; --ice-line: #b96c07; }
.ice [data-kind="reds"]    { --ice-tint: #d4413c; --ice-bg: #d83b34; --ice-fg: #ffffff; --ice-line: #ad2a24; }

.ice-phase {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 14px;
    border-radius: var(--gx-r-sm);
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
}

.ice-phase__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ice-phase__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.ice-phase__time {
    font-size: 19px;
    font-weight: 900;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
}

.ice-phase__track {
    height: 6px;
    border-radius: 999px;
    background: var(--gx-line);
    overflow: hidden;
}

.ice-phase__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gx-blue) 0%, var(--gx-sky) 100%);
    transition: width .95s linear;
}

.ice-phase.is-betting {
    --ice-ph: var(--gx-blue);
    --ice-ph-soft: rgba(43, 127, 212, .10);
}

.ice-phase.is-spinning {
    --ice-ph: var(--warn);
    --ice-ph-soft: rgba(226, 135, 15, .12);
}

.ice-phase.is-settled {
    --ice-ph: var(--gx-win);
    --ice-ph-soft: rgba(14, 164, 114, .12);
}

.ice-phase {
    border-color: color-mix(in srgb, var(--ice-ph, var(--gx-line)) 38%, transparent);
    background: var(--ice-ph-soft, var(--gx-bg-2));
    transition: background .3s ease, border-color .3s ease;
}

.ice-phase.is-betting .ice-phase__label,
.ice-phase.is-spinning .ice-phase__label,
.ice-phase.is-settled .ice-phase__label { color: var(--ice-ph); }

.ice-phase.is-betting .ice-phase__time,
.ice-phase.is-spinning .ice-phase__time,
.ice-phase.is-settled .ice-phase__time { color: var(--ice-ph); }

.ice-phase.is-spinning .ice-phase__track i {
    background: linear-gradient(90deg, var(--warn) 0%, var(--danger) 100%);
}

.ice-phase.is-settled .ice-phase__track i {
    background: linear-gradient(90deg, var(--gx-win) 0%, var(--gx-sky) 100%);
}

.ice-phase.is-hurry {
    animation: icePhasePulse 1s ease-in-out infinite;
}

@keyframes icePhasePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(226, 59, 82, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(226, 59, 82, .16); }
}

.ice-wheel-box {
    container-type: inline-size;
    container-name: icew;
    margin-top: 12px;
}

.ice-wheel {
    position: relative;
    height: clamp(150px, 62.4cqw, 300px);
    overflow: hidden;
    border-radius: var(--gx-r-sm);
    background: radial-gradient(80% 120% at 50% 112%, #1b3a5e 0%, #0c1b2c 100%);
    border: 1px solid rgba(148, 180, 220, .1);
}

.ice-wheel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(48% 62% at 50% -12%, rgba(190, 224, 255, .14) 0%, rgba(190, 224, 255, 0) 70%),
        linear-gradient(180deg, rgba(6, 16, 28, 0) 68%, rgba(6, 16, 28, .38) 100%);
}

.ice-wheel__disc {
    position: absolute;
    left: 50%;
    top: 0;
    width: 240%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    transform-origin: 50% 50%;
    will-change: transform;
}

.ice-wheel.is-spinning .ice-wheel__disc {
    transition: transform 6s cubic-bezier(.12, .72, .06, 1);
}

.ice-wheel {
    --ice-spin: 6s;
}

.ice-wheel.is-spinning .ice-wheel__disc {
    animation: iceSpinBlur var(--ice-spin) cubic-bezier(.12, .72, .06, 1) both;
}

@keyframes iceSpinBlur {
    0%   { filter: blur(1.6px) saturate(1.2) brightness(1.06); }
    35%  { filter: blur(.9px) saturate(1.14) brightness(1.04); }
    80%  { filter: blur(.2px) saturate(1.05) brightness(1.01); }
    100% { filter: blur(0) saturate(1) brightness(1); }
}

.ice-wheel__rush {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(90deg,
            rgba(190, 224, 255, .22) 0%, rgba(190, 224, 255, 0) 22%),
        linear-gradient(270deg,
            rgba(190, 224, 255, .22) 0%, rgba(190, 224, 255, 0) 22%);
}

.ice-wheel.is-spinning .ice-wheel__rush {
    animation: iceRush var(--ice-spin) cubic-bezier(.12, .72, .06, 1) both;
}

@keyframes iceRush {
    0%   { opacity: 1; }
    45%  { opacity: .55; }
    100% { opacity: 0; }
}

.ice-wheel__flash {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(38% 46% at 50% 6%,
            rgba(255, 255, 255, .85) 0%,
            rgba(190, 224, 255, .35) 38%,
            rgba(190, 224, 255, 0) 72%);
}

.ice-wheel.is-landed .ice-wheel__flash {
    animation: iceFlash 1.2s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes iceFlash {
    0%   { opacity: 0; transform: scale(.94); }
    12%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.06); }
}

.ice-wheel.is-landed .ice-wheel__pointer {
    animation: icePointerHit .5s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes icePointerHit {
    0%   { transform: translateX(-50%) translateY(-6px) scale(1.1); }
    55%  { transform: translateX(-50%) translateY(2px) scale(1.04); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.ice-wheel.is-landed {
    animation: iceRimHit 1.2s ease-out both;
}

@keyframes iceRimHit {
    0%   { box-shadow: inset 0 0 0 2px rgba(190, 224, 255, .55), 0 0 26px rgba(120, 190, 255, .35); }
    100% { box-shadow: inset 0 0 0 2px rgba(190, 224, 255, 0), 0 0 0 rgba(120, 190, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ice-wheel.is-spinning .ice-wheel__disc,
    .ice-wheel.is-spinning .ice-wheel__rush,
    .ice-wheel.is-landed,
    .ice-wheel.is-landed .ice-wheel__flash,
    .ice-wheel.is-landed .ice-wheel__pointer {
        animation: none;
    }
}

.ice-w__img,
.ice-w__over {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ice-w__img {
    user-select: none;
    -webkit-user-drag: none;
}

.ice-w__over { pointer-events: none; }

.ice-w__mx-mark {
    fill: #f5197f;
    stroke: #ffffff;
    stroke-width: 2;
}

.ice-w__mx-glow {
    fill: #f5197f;
    opacity: .22;
}

.ice-w__mx-txt {
    fill: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    text-anchor: middle;
    dominant-baseline: central;
}

.ice-w__mx-sign {
    font-size: .68em;
    fill-opacity: .72;
}

.ice-mults {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
}

.ice-mults[hidden] { display: none; }

.ice-mults__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.ice-mults__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ice-mx {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--gx-bg);
    border: 1px solid var(--gx-line);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gx-ink);
}

.ice-mx__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ice-bg);
    border: 1px solid var(--ice-line);
}

.ice-mx__name {
    font-weight: 600;
    color: var(--gx-muted);
}

.ice-mx__val {
    font-size: 14px;
    font-weight: 900;
    color: #f5197f;
    font-variant-numeric: tabular-nums;
}

.ice-wheel__pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: clamp(30px, 11.8cqw, 56px);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .5));
}

.ice-wheel__pointer img {
    display: block;
    width: 100%;
    height: auto;
}

.ice-wheel__brand {
    position: absolute;
    left: 50%;

    bottom: clamp(6px, 1.4cqw, 14px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(7px, 1.3cqw, 12px);
    pointer-events: none;

    padding: clamp(5px, .85cqw, 9px) clamp(11px, 1.9cqw, 20px);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #eaf0f8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(19, 42, 74, .06),
        0 1px 1px rgba(9, 24, 48, .10),
        0 6px 16px rgba(9, 24, 48, .18);
}

.ice-wheel__brand img {
    display: block;
    width: clamp(20px, 3.8cqw, 34px);
    height: auto;
}

.ice-wheel__brand .logo-name {
    font-size: clamp(15px, 2.9cqw, 25px);
    line-height: 1;
    color: #14243f;
    white-space: nowrap;
}

.ice-result {
    z-index: 7;
    border-radius: inherit;
    background: rgba(7, 18, 32, .66);
}

.ice-result__name {
    font-size: clamp(12px, 3cqw, 15px);
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ice-tint, var(--gx-muted));
}

.ice-result--idle .gx-result__card {
    --gx-res-accent: var(--gx-muted);
    --gx-res-halo: rgba(126, 148, 179, .16);
}

.ice-result--idle .gx-result__sum { display: none; }

.ice-result .gx-result__card {
    gap: clamp(4px, 1.2cqw, 10px);
    padding: clamp(12px, 3cqw, 22px) clamp(18px, 5cqw, 32px);
    border-radius: 20px;
}

.ice-result .gx-result__mult { font-size: clamp(28px, 7.4cqw, 46px); }
.ice-result .gx-result__sum  { font-size: clamp(16px, 3.6cqw, 24px); }
.ice-result .gx-result__rule { width: clamp(46px, 12cqw, 74px); height: 2px; }

.ice-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.ice-spot { grid-column: span 3; }
.ice-spot:nth-child(5) { grid-column: span 6; }

.ice-spot {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--ice-bg);
    color: var(--ice-fg);
    border: 1px solid var(--ice-line);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 0 rgba(9, 24, 44, .06);
    transition: transform .16s var(--gx-ease), box-shadow .16s ease, filter .16s ease;
}

.ice-spot:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 18px rgba(9, 24, 44, .18);
}

.ice-spot:active { transform: translateY(0); }

.ice-spot__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    opacity: .88;
}

.ice-spot__mult {
    font-size: 21px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ice-spot__head {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ice-spot__live {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.ice-spot__players { opacity: .58; }

.ice-spot__pot {
    opacity: .9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ice-spot__mine:empty { display: none; }

.ice-spot__mine {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #10283f;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(9, 24, 44, .25);
}

.ice-spot__mine i {
    font-style: normal;
    opacity: .38;
}

.ice-spot__mine span {
    opacity: .72;
    white-space: nowrap;
}

.ice-spot__mine b { font-weight: 800; }

.ice-spot__mine::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #ffffff 0 54%,
            rgba(9, 24, 44, .24) 54% 60%,
            transparent 60%),
        repeating-conic-gradient(from -9deg,
            #ffffff 0 18deg,
            #2b4a6b 18deg 45deg);
    box-shadow:
        inset 0 0 0 1px rgba(9, 24, 44, .28),
        0 1px 2px rgba(9, 24, 44, .25);
}

.ice-spot.is-mine {
    box-shadow: 0 0 0 3px var(--gx-bg), 0 0 0 5px var(--ice-tint);
}

.ice-spot:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
    filter: none;
}

.ice-history {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    min-width: 0;
}

.ice-history__label {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.ice-history__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.ice-history__list::-webkit-scrollbar { display: none; }

.ice-history__list li {
    flex: none;
    min-width: 34px;
    padding: 5px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ice-fg);
    background: var(--ice-bg);
    border: 1px solid var(--ice-line);
    font-variant-numeric: tabular-nums;
}

.ice-history__list li.is-fish {
    font-size: 12.5px;
    padding: 5px 9px;
    box-shadow: 0 0 0 2px var(--gx-bg), 0 0 0 3.5px var(--ice-tint);
}

.ice-history__list li:first-child {
    outline: 2px solid var(--gx-ink);
    outline-offset: -2px;
}

.ice .gx-layout {
    grid-template-columns: minmax(0, 1fr);
}

@container gx (min-width: 560px) {
    .ice-spot { grid-column: span 2; }
    .ice-spot:nth-child(4),
    .ice-spot:nth-child(5) { grid-column: span 3; }
}

@container gx (min-width: 900px) {
    .ice-board { grid-template-columns: repeat(5, 1fr); }
    .ice-spot,
    .ice-spot:nth-child(4),
    .ice-spot:nth-child(5) { grid-column: auto; }
}

.ice-demo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--gx-bg-2);
    border: 1px dashed var(--warn);
    color: var(--gx-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.ice-demo span {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ice-allbet {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--gx-bg-2);
    border: 1px dashed var(--gx-line);
    color: var(--gx-ink);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .16s ease, background .16s ease, transform .12s var(--gx-ease);
}

.ice-allbet:hover {
    background: var(--gx-bg-3);
    border-color: var(--gx-blue);
    transform: translateY(-1px);
}

.ice-allbet:active { transform: translateY(0); }

.ice-allbet__dots {
    flex: none;
    display: flex;
}

.ice-allbet__dots i {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ice-bg);
    box-shadow: 0 0 0 2px var(--gx-bg-2);
}

.ice-allbet__dots i + i { margin-left: -6px; }

.ice-allbet__txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ice-allbet__txt b { font-size: 13.5px; font-weight: 800; }
.ice-allbet__txt span { font-size: 11.5px; color: var(--gx-muted); }

.ice-allbet__sum {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gx-bg);
    border: 1px solid var(--gx-line);
    font-size: 12px;
    font-weight: 800;
    color: var(--gx-blue-d);
    font-variant-numeric: tabular-nums;
}

.ice-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 12px;
    padding: 14px;
    border-radius: var(--gx-r-sm);
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
}

@container gx (min-width: 760px) {
    .ice-bar {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 22px;
        align-items: end;
    }
}

.ice-bar__cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ice-rack__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ice-rack__hint {
    font-size: 11.5px;
    color: var(--gx-muted);
}

.ice-rack {
    display: flex;
    align-items: center;
    gap: 9px;

    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;

    padding: 13px 14px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gx-bg-3) 0%, var(--gx-bg-2) 100%);
    box-shadow:
        inset 0 0 0 1px var(--gx-line),
        inset 0 3px 6px rgba(9, 24, 44, .10);
}

.ice-rack::-webkit-scrollbar { display: none; }

.ice-acts .gx-chip {
    height: 38px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .2px;

    color: var(--gx-ink);
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);

    box-shadow:
        inset 0 1px 0 var(--gx-gloss),
        0 1px 2px rgba(9, 24, 44, .07);
}

.ice-acts .gx-chip:hover:not(:disabled) {
    background: var(--gx-bg-2);
    border-color: var(--gx-edge);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 var(--gx-gloss),
        0 4px 10px rgba(9, 24, 44, .12);
}

.ice-acts .gx-chip:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(9, 24, 44, .12);
}

.ice-acts .gx-chip:disabled {
    opacity: .45;
    cursor: default;
}

.ice-acts .gx-chip--danger {
    color: var(--gx-lose);
    background: transparent;
    border-color: color-mix(in srgb, var(--gx-lose) 55%, transparent);
    box-shadow: none;
}

.ice-acts .gx-chip--danger:hover:not(:disabled) {
    color: #fff;
    background: var(--gx-lose);
    border-color: var(--gx-lose);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--gx-lose) 35%, transparent);
}

.ice-chip:not(.is-active):not(:disabled) {
    filter: saturate(.72) brightness(.97);
    opacity: .82;
}

.ice-chip:not(.is-active):not(:disabled):hover {
    filter: none;
    opacity: 1;
}

.ice-chip {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    background:
        radial-gradient(circle at 50% 28%,
            rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 64%),
        repeating-conic-gradient(from -9deg,
            var(--chip-ins) 0 18deg,
            var(--chip) 18deg 45deg);
    box-shadow:
        0 3px 8px rgba(9, 24, 44, .34),
        inset 0 0 0 1.5px rgba(9, 24, 44, .3),
        inset 0 2px 3px rgba(255, 255, 255, .4),
        inset 0 -4px 6px rgba(9, 24, 44, .22);
    transition: transform .14s var(--gx-ease), box-shadow .14s ease;
}

.ice-chip::before {
    content: '';
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--chip-face) 0 74%, transparent 74%),
        repeating-conic-gradient(from 11deg,
            rgba(9, 24, 44, .16) 0 4deg,
            transparent 4deg 22.5deg),
        var(--chip-face);
    box-shadow:
        0 0 0 1.5px rgba(9, 24, 44, .22),
        inset 0 2px 3px rgba(255, 255, 255, .75),
        inset 0 -2px 4px rgba(9, 24, 44, .14);
}

.ice-chip span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--chip-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.ice-chip:hover { transform: translateY(-3px); }

.ice-chip.is-active {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 3px var(--gx-bg-2),
        0 0 0 5px var(--gx-blue),
        0 8px 16px rgba(9, 24, 44, .34),
        inset 0 0 0 1.5px rgba(9, 24, 44, .3),
        inset 0 2px 3px rgba(255, 255, 255, .4),
        inset 0 -4px 6px rgba(9, 24, 44, .22);
}

.ice-chip[data-tier="0"] { --chip: #7e97b1; --chip-ins: #ffffff; --chip-face: #f4f8fc; --chip-ink: #16324e; }
.ice-chip[data-tier="1"] { --chip: #cf2f26; --chip-ins: #ffffff; --chip-face: #fff4f3; --chip-ink: #7d1a14; }
.ice-chip[data-tier="2"] { --chip: #17924c; --chip-ins: #ffffff; --chip-face: #f0fbf5; --chip-ink: #0b5029; }
.ice-chip[data-tier="3"] { --chip: #2464c7; --chip-ins: #ffffff; --chip-face: #f0f5fd; --chip-ink: #123a6e; }
.ice-chip[data-tier="4"] { --chip: #6f3fe0; --chip-ins: #ece2ff; --chip-face: #f6f1ff; --chip-ink: #38197a; }
.ice-chip[data-tier="5"] { --chip: #1d2938; --chip-ins: #d8b45a; --chip-face: #edf1f6; --chip-ink: #16202b; }

.ice-chip:disabled {
    cursor: not-allowed;
    filter: grayscale(.85);
    opacity: .34;
    box-shadow: inset 0 0 0 1.5px rgba(9, 24, 44, .18);
}

.ice-chip:disabled:hover { filter: grayscale(.85); opacity: .34; transform: none; }

.ice-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.ice-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-right: auto;
}

.ice-total[hidden] { display: none; }

.ice-total__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.ice-total__sum {
    font-size: 19px;
    font-weight: 900;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
}

.gx-chip--danger {
    color: var(--gx-lose);
    border-color: color-mix(in srgb, var(--gx-lose) 32%, transparent);
}

.gx-chip--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--gx-lose) 10%, transparent);
    border-color: var(--gx-lose);
}

.gx-chip:disabled {
    opacity: .42;
    cursor: default;
    transform: none;
}

@container icew (min-width: 430px) {
    .ice-wheel { height: clamp(170px, 50.7cqw, 300px); }
    .ice-wheel__disc { width: 195%; }
    .ice-wheel__pointer { width: clamp(30px, 9.6cqw, 56px); }
}

@container icew (min-width: 560px) {
    .ice-wheel { height: clamp(180px, 41.6cqw, 300px); }
    .ice-wheel__disc { width: 160%; }
    .ice-wheel__pointer { width: clamp(30px, 7.8cqw, 56px); }
}

@container icew (min-width: 730px) {
    .ice-wheel { height: clamp(200px, 34.3cqw, 420px); }
    .ice-wheel__disc { width: 132%; }
    .ice-wheel__pointer { width: clamp(30px, 6.5cqw, 56px); }
}

@container icew (min-width: 1000px) {
    .ice-wheel { height: clamp(240px, 29.1cqw, 420px); }
    .ice-wheel__disc { width: 112%; }
    .ice-wheel__pointer { width: clamp(30px, 5.5cqw, 56px); }
}

@container gx (max-width: 560px) {
    .ice-board { grid-template-columns: repeat(2, 1fr); }

    .ice-spot { grid-column: auto; }
    .ice-spot:nth-child(5) { grid-column: span 2; }

    .ice-spot__mult { font-size: 15px; }

    .ice-chip { width: 46px; height: 46px; }
    .ice-chip span { font-size: 12px; }
    .ice-rack { gap: 7px; }
}

.keno-board {
    display: grid;
    gap: clamp(4px, 1.1cqw, 8px);
    margin-bottom: 14px;
}

.keno-board[data-total="40"] { grid-template-columns: repeat(8, 1fr); }
.keno-board[data-total="80"] { grid-template-columns: repeat(10, 1fr); }

@container gx (max-width: 460px) {
    .keno-board[data-total="80"] { grid-template-columns: repeat(8, 1fr); }
}

.keno-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(8px, 1.8cqw, 14px);
    border: 1px solid var(--gx-line);
    background: var(--gx-bg-2);
    color: var(--gx-ink);
    font-family: inherit;
    font-size: clamp(11px, 2.2cqw, 15px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform .14s var(--gx-ease), background .15s ease,
                border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.keno-cell:hover {
    border-color: var(--gx-blue);
    background: var(--gx-bg-3);
    transform: translateY(-2px);
}

.keno-cell:active { transform: translateY(0) scale(.94); }

.keno-cell.is-picked {
    background: linear-gradient(155deg, #3b82f6 0%, var(--gx-blue-d) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 4px 12px -5px rgba(29, 78, 216, .8);
    animation: kenoPick .26s var(--gx-ease) both;
}

.keno-cell.is-picked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: kenoPickRing .45s var(--gx-ease) both;
}

@keyframes kenoPick {
    0%   { transform: scale(.76); }
    55%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes kenoPickRing {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); }
    100% { box-shadow: 0 0 0 9px rgba(59, 130, 246, 0); }
}

.keno-cell.is-drawn {
    background: var(--gx-bg-3);

    border-color: var(--gx-ink-2);
    color: var(--gx-ink);

    box-shadow: inset 0 0 0 2px var(--gx-bg);
    animation: kenoDrop .3s var(--gx-ease) both;
}

@keyframes kenoDrop {
    0%   { transform: translateY(-30%) scale(.9); opacity: 0; }
    60%  { transform: translateY(0) scale(1.06); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.keno-cell.is-hit {
    background: linear-gradient(150deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px var(--gx-bg), 0 0 0 5px #10b981;
    animation: kenoHit .32s var(--gx-ease) both;
}

.keno-cell.is-hit::after { display: none; }

@keyframes kenoHit {
    0%   { transform: scale(.72); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.keno-formats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.keno-fmt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 6px;
    border-radius: 12px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg-2);
    color: var(--gx-ink);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.keno-fmt b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.keno-fmt span { font-size: 11px; font-weight: 600; color: var(--gx-muted); }

.keno-fmt:hover { border-color: var(--gx-muted); }

.keno-fmt.is-on {
    border-color: var(--gx-blue);
    background: color-mix(in srgb, var(--gx-blue) 10%, transparent);
}

.keno-fmt.is-on span { color: var(--gx-blue-d); }

.keno-risks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.keno-risks .keno-fmt {
    padding: 11px 6px;
}

.keno-risks .keno-fmt b { font-size: 13px; font-weight: 800; }

.keno-fmt--medium.is-on {
    border-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.keno-fmt--high.is-on {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.keno-fmt--medium.is-on span,
.keno-fmt--high.is-on span { color: inherit; }

@container gx (min-width: 640px) and (max-width: 779.98px) {
    .gx-layout {
        grid-template-columns: minmax(236px, 268px) minmax(0, 1fr);
        gap: 14px;
    }
}

@container gx (min-width: 640px) and (max-width: 779.98px) {
    .keno-board[data-total="80"] { grid-template-columns: repeat(8, 1fr); }
}

@container gx (max-width: 560px) {
    .keno-holder .gx-result__card {
        gap: 4px 8px;
        padding: 7px 13px;
        border-radius: 18px;

        box-shadow:
            0 0 0 2px var(--gx-res-accent),
            0 0 0 6px var(--gx-res-halo),
            0 14px 28px rgba(11, 26, 51, .16);
    }

    .keno-holder .gx-result__mult { font-size: clamp(24px, 7cqw, 34px); }
    .keno-holder .gx-result__sum  { font-size: clamp(15px, 3.6cqw, 19px); }
    .keno-holder .gx-result__note { font-size: 11px; }

    .keno-holder .gx-result__rule { display: none; }
}

.keno-pay {
    padding: 11px 13px;
    border-radius: var(--gx-r-sm);
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
}

.keno-pay__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.keno-pay__rows {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

.keno-pay__rows::-webkit-scrollbar { height: 4px; }

.keno-pay__rows::-webkit-scrollbar-thumb {
    background: var(--gx-line);
    border-radius: 4px;
}

.keno-pay__row {
    flex: 0 0 auto;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 9px;
    border-radius: 10px;
    background: var(--gx-bg);
    border: 1px solid var(--gx-line);
    scroll-snap-align: center;
}

.keno-pay__hit {
    font-size: 10px;
    font-weight: 700;
    color: var(--gx-muted);
    font-variant-numeric: tabular-nums;
}

.keno-pay__mult {
    font-size: 14px;
    font-weight: 900;
    color: var(--gx-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.keno-pay__row.is-top {
    border-color: var(--gx-blue);
    background: var(--gx-bg-3);
}

.keno-pay__row.is-top .keno-pay__mult { color: var(--gx-blue-d, var(--gx-blue)); }

.keno-pay__row.is-hit,
.keno-pay__row.is-top.is-hit {
    border-color: var(--gx-win, #16a34a);
    background: color-mix(in srgb, var(--gx-win, #16a34a) 12%, transparent);
    box-shadow: 0 0 0 1px var(--gx-win, #16a34a);
}

.keno-pay__row.is-hit .keno-pay__mult,
.keno-pay__row.is-hit .keno-pay__hit {
    color: var(--gx-win, #16a34a);
}

.keno-holder {
    position: relative;
}

@media (min-width: 851px) {
    .gx-stage > .keno-pay { order: 1; }
    .gx-stage > .keno-holder { order: 0; }
}

.slot-player {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    flex-direction: column;
    background: #05080d;
}

.slot-player[hidden] { display: none; }

.slot-player__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #0b1420;
    border-bottom: 1px solid rgba(148, 180, 220, .12);
}

.slot-player__name {
    font-size: 14px;
    font-weight: 800;
    color: #eaf2fd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-player__close {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #eaf2fd;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s ease;
}

.slot-player__close:hover { background: rgba(255, 255, 255, .16); }

.slot-player__frame {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.slot-player__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.slot-player__wait {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    color: #8ba6c4;
    font-size: 14px;
    font-weight: 600;
}

.slot-player__warn {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(520px, calc(100% - 32px));
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .92);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.slot-player__warn p { margin: 0; }

.mines-roul {

    width: 100%;
    max-width: 460px;

    margin-top: 12px;
    padding: 10px 12px 12px;
    border-radius: var(--gx-r-sm);
    background: var(--gx-bg-2);
    border: 1px solid var(--gx-line);
}

.mines-roul__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mines-roul__view {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 6px 0;
    background: var(--gx-bg-3);
    box-shadow: inset 0 1px 4px rgba(9, 24, 44, .12);
}

.mines-roul__view::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--gx-bg-3) 0%, rgba(0, 0, 0, 0) 14%,
        rgba(0, 0, 0, 0) 86%, var(--gx-bg-3) 100%);
}

.mines-roul__view::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    z-index: 3;
    pointer-events: none;
    background: var(--gx-blue);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 10px rgba(37, 99, 235, .55);
}

.mines-roul__strip {
    display: flex;
    gap: 6px;
    padding: 0 6px;
    width: max-content;
    will-change: transform;
}

.mines-roul__x {
    flex: none;
    width: 62px;
    padding: 9px 4px;
    border-radius: 9px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg-2);
    color: var(--gx-ink-2, var(--gx-muted));
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mines-roul__x.is-win {
    background: linear-gradient(160deg, var(--gx-win) 0%, #0b8a60 100%);
    border-color: transparent;
    color: #fff;
    box-shadow:
        0 0 0 2px var(--gx-bg-3),
        0 0 0 4px var(--gx-win),
        0 6px 16px rgba(14, 164, 114, .38);
    animation: minesRoulWin .38s var(--gx-ease) both;
}

@keyframes minesRoulWin {
    0%   { transform: scale(.9); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.mines-roul {
    animation: minesRoulIn .34s var(--gx-ease) both;
}

@keyframes minesRoulIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mines-roul__banner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 9px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, .28);
    background: linear-gradient(120deg,
        rgba(37, 99, 235, .14) 0%, rgba(56, 189, 248, .10) 100%);
}

.mines-bonus-flash {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--gx-r);

    pointer-events: auto;
    cursor: progress;

    background:
        radial-gradient(58% 58% at 50% 50%,
            rgba(37, 99, 235, .24) 0%, rgba(37, 99, 235, 0) 70%),
        color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: minesFlashIn .28s ease both;
}

.mines-bonus-flash.is-out {

    pointer-events: none;

    animation: minesFlashOut .34s ease both;
}

.mines-bonus-flash__rays {
    position: absolute;
    width: 150%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg,
        rgba(37, 99, 235, .14) 0deg 5deg,
        transparent 5deg 30deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 76%);
            mask-image: radial-gradient(closest-side, #000 22%, transparent 76%);
    animation: minesFlashSpin 16s linear infinite;
}

.mines-bonus-flash__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 30px 20px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(168deg, var(--surface) 0%, var(--surface-2) 100%);

    box-shadow:
        0 0 0 3px var(--gx-blue),
        0 0 0 9px rgba(37, 99, 235, .18),
        0 22px 44px rgba(11, 26, 51, .18);
    animation: gxResultIn .45s var(--gx-ease) both;
}

.mines-bonus-flash__spark {
    font-size: clamp(20px, 5cqw, 28px);
    line-height: 1;
    color: var(--gx-sky);
    animation: minesFlashSpark 1.2s ease-in-out infinite;
}

.mines-bonus-flash__title {
    font-size: clamp(19px, 5.2cqw, 28px);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--gx-blue);
}

.mines-bonus-flash__sub {
    font-size: clamp(11.5px, 2.6cqw, 13.5px);
    font-weight: 600;
    color: var(--gx-muted);
}

@keyframes minesFlashIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes minesFlashOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes minesFlashSpin { to { transform: rotate(360deg) } }
@keyframes minesFlashSpark {
    0%, 100% { transform: scale(1) }
    50%      { transform: scale(1.16) }
}

@media (prefers-reduced-motion: reduce) {
    .mines-bonus-flash__rays,
    .mines-bonus-flash__spark { animation: none; }
}

.mines-roul__spark {
    flex: none;
    font-size: 14px;
    line-height: 1;
    color: var(--gx-sky);
}

.mines-roul__title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.2px;
    color: var(--gx-blue);
}

.mines-roul__sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gx-muted);
}

.mines-roul.is-rolling .mines-roul__banner {
    animation: minesRoulPulse 1.1s ease-in-out infinite;
}

@keyframes minesRoulPulse {
    0%, 100% { border-color: rgba(37, 99, 235, .28); background-position: 0% 50%; }
    50%      { border-color: rgba(56, 189, 248, .65); background-position: 100% 50%; }
}

.mines-roul.is-rolling .mines-roul__spark {
    display: inline-block;
    animation: minesRoulSpin 1.1s linear infinite;
}

@keyframes minesRoulSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mines-roul.is-done .mines-roul__banner {
    border-color: rgba(14, 164, 114, .45);
    background: linear-gradient(120deg,
        rgba(14, 164, 114, .16) 0%, rgba(62, 207, 142, .10) 100%);
}

.mines-roul.is-done .mines-roul__title { color: var(--gx-win); }
.mines-roul.is-done .mines-roul__spark { color: var(--gx-win); }

@container gx (max-width: 560px) {
    .mines-roul__banner { margin-bottom: 8px; padding: 7px 9px; }
    .mines-roul__title { font-size: 13px; }
    .mines-roul__sub { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .mines-roul,
    .mines-roul.is-rolling .mines-roul__banner,
    .mines-roul.is-rolling .mines-roul__spark { animation: none; }
}

@container gx (max-width: 560px) {
    .mines-roul { margin-top: 8px; padding: 8px 10px 10px; }
    .mines-roul__x { width: 54px; padding: 8px 4px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .mines-roul__strip { transition: none !important; }
}

.upg-stage {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.upg-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: -8px;
    pointer-events: none;
    user-select: none;
}

.upg-brand img {
    display: block;
    box-sizing: content-box;
    width: 22px;
    height: auto;
    flex: 0 0 auto;
    padding: var(--gx-mark-pad);
    border-radius: 8px;
    background: var(--gx-mark-plate);
    box-shadow: var(--gx-mark-shadow);
}

.upg-brand .logo-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--gx-ink);
    white-space: nowrap;
}

.upg-brand .logo-x { color: var(--gx-blue); }

.upg-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
}

.upg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 18px;
    min-height: 168px;
    border-radius: 22px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg);
    background:
        radial-gradient(120% 80% at 50% 118%, color-mix(in srgb, var(--upg-c) 18%, transparent) 0%, transparent 72%),
        linear-gradient(180deg, var(--gx-bg) 0%, var(--gx-bg-2) 100%);
    box-shadow: var(--gx-shadow);
    overflow: hidden;
    isolation: isolate;

    --upg-c: var(--gx-muted);
}

.upg-card--to { --upg-c: var(--gx-blue); }

.upg-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--gx-gloss-soft) 0%, transparent 24%);
}

.upg-card::before {
    content: '';
    position: absolute;
    width: 132px;
    height: 132px;
    right: -34px;
    bottom: -34px;
    background: no-repeat center / contain url('/assets/diamond.webp');
    opacity: .1;
    transform: rotate(-12deg);
    pointer-events: none;
}

.upg-card--from::before {
    right: auto;
    left: -38px;
    bottom: -38px;
    transform: rotate(14deg);
    opacity: .07;
}

.upg-card__chip {
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gx-ink-2);
    background: var(--gx-bg-3);
    border: 1px solid var(--gx-line);
}

.upg-card--to .upg-card__chip {
    color: var(--gx-blue-d);
    border-color: color-mix(in srgb, var(--gx-blue) 25%, var(--gx-line));
    background: var(--gx-bg-3);
}

.upg-card__cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.upg-card > * { position: relative; z-index: 1; }

.upg-card__sum {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--gx-ink);
}

.upg-card--to .upg-card__sum { color: var(--gx-blue-d); }

.upg-card__note {
    font-size: 12px;
    color: var(--gx-ink-2);
    opacity: .85;
}

.upg-dial {
    position: relative;
    width: 220px;
    height: 220px;
    flex: 0 0 auto;

    filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--gx-blue) 20%, transparent));
    transition: filter .3s ease;
}

.upg-dial.is-win  { filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--gx-win) 28%, transparent)); }
.upg-dial.is-lose { filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--gx-lose) 26%, transparent)); }

.upg-dial__svg {
    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.upg-dial__track {
    fill: none;
    stroke: var(--gx-line);
    stroke-width: 16;
}

.upg-dial__arc {
    fill: none;
    stroke: var(--gx-blue);
    stroke-width: 16;

    stroke-linecap: butt;
    transition: stroke-dashoffset .35s var(--gx-ease), stroke .25s ease;
}

.upg-dial.is-win .upg-dial__arc { stroke: var(--gx-win); }
.upg-dial.is-lose .upg-dial__arc { stroke: var(--gx-lose); }

.upg-dial__needle {
    position: absolute;
    inset: 0;

    transition: transform 2.2s cubic-bezier(.14, .62, .12, 1);
}

.upg-dial__needle > span {
    position: absolute;
    left: 50%;
    top: -1px;
    width: 16px;
    height: 24px;
    margin-left: -8px;
    background: var(--gx-ink);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 2px 4px rgba(11, 26, 51, .35));
}

.upg-dial__center {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--gx-bg);
    background:
        radial-gradient(70% 70% at 50% 26%, color-mix(in srgb, var(--gx-blue) 8%, transparent) 0%, transparent 70%),
        var(--gx-bg);
    border: 1px solid var(--gx-line-2);
    box-shadow: inset 0 2px 10px rgba(11, 26, 51, .05);
}

.upg-dial__pct {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--gx-blue);
    font-variant-numeric: tabular-nums;
}

.upg-dial.is-win .upg-dial__pct  { color: var(--gx-win); }
.upg-dial.is-lose .upg-dial__pct { color: var(--gx-lose); }

.upg-dial__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gx-muted);
}

.upg-dial.is-spinning .upg-dial__track {
    animation: upg-wait 1.1s ease-in-out infinite;
}

@keyframes upg-wait {
    50% { stroke: var(--gx-line-2); }
}

.upg-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 24px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    background: linear-gradient(180deg, var(--gx-blue-l) 0%, var(--gx-blue) 55%, var(--gx-blue-d) 100%);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--gx-blue) 32%, transparent);
    overflow: hidden;
    transition: transform .15s var(--gx-ease), opacity .2s ease, box-shadow .25s ease;
}

.upg-go:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--gx-blue) 40%, transparent);
}

.upg-go:disabled { opacity: .55; cursor: default; }

.upg-go::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: upg-shine 2.8s ease-in-out infinite;
}

.upg-go:disabled::after { animation: none; opacity: 0; }

@keyframes upg-shine {
    0%   { transform: translateX(-160%); }
    60%  { transform: translateX(360%); }
    100% { transform: translateX(360%); }
}

.upg-go__icon { font-size: 13px; }

@container gx (max-width: 560px) {

    .upg-brand { gap: 6px; margin-bottom: -6px; }
    .upg-brand img { width: 18px; border-radius: 7px; }
    .upg-brand .logo-name { font-size: 13px; }

    .upg-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'dial dial' 'from to';
        gap: 12px;
        align-items: stretch;
    }

    .upg-dial {
        grid-area: dial;
        justify-self: center;
        align-self: center;
        width: 180px;
        height: 180px;
    }

    .upg-dial__center { inset: 26px; }
    .upg-dial__pct { font-size: 24px; }
    .upg-card--from { grid-area: from; }
    .upg-card--to { grid-area: to; }

    .upg-card {
        min-height: 0;

        padding: 16px 10px;
        border-radius: 18px;
        min-width: 0;
    }

    .upg-card__sum {
        font-size: clamp(15px, 5.4cqw, 22px);
        white-space: nowrap;
    }

    .upg-card__note { font-size: 11px; }

    .upg-card__chip {
        padding: 4px 9px;
        font-size: 10.5px;
        line-height: 1.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .upg-dial__needle { transition: none; }
    .upg-dial.is-spinning .upg-dial__track { animation: none; }
    .upg-go::after { animation: none; opacity: 0; }
}

.amount-gem::after {
    content: '';
    display: inline-block;

    width: 1.5em;
    height: 1.5em;
    margin-left: .12em;
    vertical-align: -.42em;

    background: no-repeat center / contain url('/assets/diamond.webp');
}

.upg-card__sum.amount-gem::after {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -.34em;
}

.cs-stage {
    display: flex;
    flex-direction: column;
    gap: 20px;

    --cs-common: #8fa3bf;
    --cs-uncommon: #14b8a6;
    --cs-rare: #3b82f6;
    --cs-epic: #a855f7;
    --cs-legend: #f59e0b;

    --cs-rare-c: var(--cs-common);
}

[data-rare="common"]   { --cs-rare-c: var(--cs-common); }
[data-rare="uncommon"] { --cs-rare-c: var(--cs-uncommon); }
[data-rare="rare"]     { --cs-rare-c: var(--cs-rare); }
[data-rare="epic"]     { --cs-rare-c: var(--cs-epic); }
[data-rare="legend"]   { --cs-rare-c: var(--cs-legend); }

.cs-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.cs-case {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    padding: 0 14px 16px;
    border-radius: 22px;
    border: 1px solid var(--gx-line);

    background: var(--gx-bg-2);
    background:
        radial-gradient(120% 70% at 50% 118%, color-mix(in srgb, var(--cs-rare-c) 26%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, var(--gx-bg) 0%, var(--gx-bg-2) 100%);
    box-shadow: var(--gx-shadow);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transition: transform .22s var(--gx-ease), border-color .2s ease, box-shadow .25s ease;
}

.cs-case[data-tier="1"] { --cs-rare-c: var(--cs-rare); }
.cs-case[data-tier="2"] { --cs-rare-c: var(--cs-epic); }
.cs-case[data-tier="3"] { --cs-rare-c: var(--cs-legend); }

.cs-case:hover:not(:disabled) {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--cs-rare-c) 55%, var(--gx-line));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--cs-rare-c) 22%, transparent);
}

.cs-case::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(to bottom, var(--gx-pool) 0%, transparent 26%);
    opacity: .4;
}

.cs-case.is-active {
    border-color: var(--cs-rare-c);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--cs-rare-c) 38%, transparent),
        0 18px 44px color-mix(in srgb, var(--cs-rare-c) 20%, transparent);
}

.cs-case.is-locked { opacity: .45; cursor: default; }
.cs-case.is-locked:hover { transform: none; }

.cs-case__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--gx-ink);
    letter-spacing: -.01em;
}

.cs-case__price {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--cs-rare-c);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cs-rare-c) 82%, white) 0%,
        var(--cs-rare-c) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cs-rare-c) 30%, transparent);
}

.cs-case__note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--gx-muted);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: var(--gx-bg-3);
    background:
        radial-gradient(80% 80% at 50% 30%, color-mix(in srgb, var(--cs-rare-c) 16%, transparent) 0%, transparent 72%),
        var(--gx-bg-3);
    overflow: hidden;
    flex: 0 0 auto;
}

.cs-art--case {
    width: 100%;
    height: 132px;
    border-radius: 0;
    background:
        radial-gradient(52% 44% at 50% 52%, var(--gx-pool) 0%, transparent 72%),
        radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--cs-rare-c) 26%, transparent) 0%, transparent 76%);
}

.cs-art--case img {
    padding: 4px;
    filter: drop-shadow(0 8px 14px var(--gx-drop));
    transition: transform .25s var(--gx-ease);
}

.cs-case:hover:not(:disabled) .cs-art--case img { transform: translateY(-3px) scale(1.03); }

.cs-art--case::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 58%;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, var(--gx-drop) 0%, transparent 72%);
    pointer-events: none;
}

.cs-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
}

.cs-art.has-img .cs-art__letter,
.cs-cell__pic.has-img .cs-cell__letter { display: none; }

.cs-art__letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    font-style: normal;
    color: var(--cs-rare-c);
    color: color-mix(in srgb, var(--cs-rare-c) 70%, var(--gx-muted));
    text-transform: uppercase;
}

.cs-art--case .cs-art__letter { font-size: 46px; }

.cs-opener {
    border-radius: 22px;
    border: 1px solid var(--gx-line);
    background: linear-gradient(180deg, var(--gx-bg) 0%, var(--gx-bg-2) 100%);
    box-shadow: var(--gx-shadow);
    padding: 16px;
}

.cs-opener__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cs-opener__head > div:first-child { min-width: 0; }

.cs-opener__cap {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.cs-opener__title {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--gx-ink);
    letter-spacing: -.01em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-opener__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
    pointer-events: none;
    user-select: none;
}

.cs-opener__brand img {
    display: block;
    width: 22px;
    height: auto;
    flex: 0 0 auto;
}

.cs-opener__brand .logo-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--gx-ink);
    white-space: nowrap;
}

.cs-opener__brand .logo-x { color: var(--gx-blue); }

.cs-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg);
    color: var(--gx-ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.cs-close:hover { background: var(--gx-bg-3); color: var(--gx-ink); }

.cs-reel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(60% 120% at 50% 50%, color-mix(in srgb, var(--gx-blue) 10%, transparent) 0%, transparent 70%),
        var(--gx-bg-3);

    box-shadow: inset 0 2px 12px color-mix(in srgb, var(--gx-drop) 32%, transparent);
    padding: 16px 0;

    -webkit-mask: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.cs-reel__strip {
    display: flex;
    gap: 10px;
    padding: 0 10px;
    will-change: transform;
    transition: transform 9s cubic-bezier(.05, .68, .02, 1);
}

.cs-reel__strip.is-settling {
    transition: transform .9s cubic-bezier(.22, .9, .3, 1);
}

.cs-cell {
    position: relative;
    flex: 0 0 auto;
    width: 124px;
    height: 152px;
    border-radius: 16px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg);

    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cs-rare-c) 6%, transparent) 0%,
            color-mix(in srgb, var(--cs-rare-c) 22%, transparent) 100%),
        var(--gx-bg);
    box-shadow: inset 0 -3px 0 0 color-mix(in srgb, var(--cs-rare-c) 65%, transparent);
    overflow: hidden;
    text-align: center;
    transition: transform .25s var(--gx-ease), box-shadow .25s ease;
}

.cs-cell__pic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(58% 46% at 50% 40%, var(--gx-pool) 0%, transparent 72%),
        radial-gradient(72% 62% at 50% 38%, color-mix(in srgb, var(--cs-rare-c) 22%, transparent) 0%, transparent 74%);
}

.cs-cell__pic img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px 10px 26px;
    filter: drop-shadow(0 6px 10px var(--gx-drop));
}

.cs-cell__letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
    color: var(--cs-rare-c);
    color: color-mix(in srgb, var(--cs-rare-c) 55%, var(--gx-muted));
}

.cs-cell__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 8px 8px;
    background: linear-gradient(180deg,
        rgba(8, 15, 30, 0) 0%,
        rgba(8, 15, 30, .62) 42%,
        rgba(8, 15, 30, .88) 100%);
}

.cs-cell__name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .75);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-cell__value {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    color: color-mix(in srgb, var(--cs-rare-c) 45%, #fff);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.cs-cell.is-win {
    transform: scale(1.08);
    border-color: var(--cs-rare-c);
    box-shadow:
        inset 0 -3px 0 0 var(--cs-rare-c),
        0 0 0 2px color-mix(in srgb, var(--cs-rare-c) 55%, transparent),
        0 14px 34px color-mix(in srgb, var(--cs-rare-c) 38%, transparent);

    z-index: 3;
}

.cs-reel__mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg,
        transparent 0%, var(--gx-blue) 14%, var(--gx-blue) 86%, transparent 100%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--gx-blue) 60%, transparent);
    pointer-events: none;
}

.cs-reel__mark::before,
.cs-reel__mark::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.cs-reel__mark::before {
    top: 0;
    border-top: 8px solid var(--gx-blue);
}

.cs-reel__mark::after {
    bottom: 0;
    border-bottom: 8px solid var(--gx-blue);
}

.cs-actions { margin-top: 14px; }

#casesResult.gx-result-card {
    margin-top: 14px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    gap: 2px;
}

#casesResult.gx-result-card .gx-result-card__sum {
    font-size: 18px;
    color: var(--gx-muted);
}

.cs-open-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 24px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    background: linear-gradient(180deg, var(--gx-blue-l) 0%, var(--gx-blue) 55%, var(--gx-blue-d) 100%);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--gx-blue) 32%, transparent);
    overflow: hidden;
    transition: transform .15s var(--gx-ease), opacity .2s ease, box-shadow .25s ease;
}

.cs-open-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--gx-blue) 40%, transparent);
}

.cs-open-btn:disabled { opacity: .55; cursor: default; }

.cs-open-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: cs-shine 2.8s ease-in-out infinite;
}

.cs-open-btn:disabled::after { animation: none; opacity: 0; }

@keyframes cs-shine {
    0%   { transform: translateX(-160%); }
    60%  { transform: translateX(360%); }
    100% { transform: translateX(360%); }
}

.cs-open-btn__price {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 14px;
}

.cs-inv {
    border-top: 1px solid var(--gx-line);
    padding-top: 16px;
}

.cs-inv__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cs-inv__cap {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gx-muted);
}

.cs-inv__sum {
    font-size: 22px;
    font-weight: 800;
    color: var(--gx-ink);
    letter-spacing: -.01em;
}

.cs-inv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
}

.cs-item {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--gx-line);
    background: var(--gx-bg);

    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cs-rare-c) 5%, transparent) 0%,
            color-mix(in srgb, var(--cs-rare-c) 16%, transparent) 100%),
        var(--gx-bg);
    box-shadow: inset 0 -3px 0 0 color-mix(in srgb, var(--cs-rare-c) 55%, transparent);
    overflow: hidden;
    text-align: center;
}

.cs-item__pic {
    position: relative;
    width: 100%;
    min-height: 120px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.cs-item__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 8px 8px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    background: linear-gradient(180deg, rgba(8, 15, 30, 0) 0%, rgba(8, 15, 30, .78) 48%, rgba(8, 15, 30, .9) 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-item__sell {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid var(--gx-line);
    border: 1px solid color-mix(in srgb, var(--cs-rare-c) 35%, var(--gx-line));
    background: var(--gx-bg-2);
    color: var(--cs-rare-c);
    color: color-mix(in srgb, var(--cs-rare-c) 70%, var(--gx-ink));
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .15s var(--gx-ease);
}

.cs-item__sell:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--gx-bg-3);
    border-color: var(--cs-rare-c);
}

.cs-item__sell:disabled { opacity: .6; cursor: default; }

.cs-empty {
    padding: 26px 12px;
    text-align: center;
    color: var(--gx-muted);
    font-size: 13px;
}

.cs-won {
    position: relative;
    display: none;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--gx-line);
    border: 1px solid color-mix(in srgb, var(--cs-rare-c) 45%, var(--gx-line));
    background: var(--gx-bg);
    background:
        radial-gradient(90% 140% at 12% 50%, color-mix(in srgb, var(--cs-rare-c) 14%, transparent) 0%, transparent 62%),
        var(--gx-bg);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--cs-rare-c) 18%, transparent);
    animation: cs-won-in .32s var(--gx-ease) both;
}

.cs-won.is-shown { display: flex; }

@keyframes cs-won-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.cs-won__art { flex: 0 0 auto; }

.cs-art--won {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-rare-c) 30%, transparent);
}

.cs-won__txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cs-won__cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cs-rare-c);
}

.cs-won__name {
    font-size: 22px;
    font-weight: 800;
    color: var(--gx-ink);
    letter-spacing: -.02em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-won__note { font-size: 12px; color: var(--gx-ink-2); }

.cs-won__acts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-won__sell {
    padding: 11px 18px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: var(--cs-rare-c);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cs-rare-c) 80%, white) 0%,
        var(--cs-rare-c) 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cs-rare-c) 32%, transparent);
    transition: transform .15s var(--gx-ease), opacity .2s ease;
}

.cs-won__sell:hover:not(:disabled) { transform: translateY(-1px); }
.cs-won__sell:disabled { opacity: .6; cursor: default; }

.cs-won__keep {
    padding: 8px 18px;
    border-radius: 14px;
    border: 1px solid var(--gx-line);
    background: transparent;
    color: var(--gx-ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cs-won__keep:hover { background: var(--gx-bg-2); }

@container gx (max-width: 560px) {
    .cs-shelf { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
    .cs-case { padding: 0 10px 12px; border-radius: 18px; }
    .cs-art--case { height: 104px; }
    .cs-art--case .cs-art__letter { font-size: 36px; }

    .cs-opener__brand { gap: 6px; margin-right: 8px; }
    .cs-opener__brand img { width: 18px; }
    .cs-opener__brand .logo-name { font-size: 13px; }
    .cs-cell { width: 106px; height: 132px; }
    .cs-cell__pic img { padding: 8px 8px 24px; }
    .cs-cell__letter { font-size: 32px; }
    .cs-art { width: 52px; height: 52px; }
    .cs-won { flex-wrap: wrap; gap: 12px; }
    .cs-won__acts { flex-direction: row; width: 100%; }
    .cs-won__sell { flex: 1 1 auto; }
    .cs-art--won { width: 64px; height: 64px; }
    .cs-won__name { font-size: 18px; }
}

@container gx (max-width: 400px) {
    .cs-opener__brand .logo-name { display: none; }
    .cs-opener__brand { margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-reel__strip { transition: none !important; }
    .cs-case:hover:not(:disabled) { transform: none; }
    .cs-open-btn::after { animation: none; opacity: 0; }
    .cs-won { animation: none; }
    .cs-cell.is-win { transform: none; }
}

@media (max-width: 900px) {
    .gx-board-wrap { flex-direction: column; }

    .gx-board-wrap > .gx-coeffs { order: -1; width: 100%; }
    .gx-board-wrap > .gx-board-holder { order: 0; }
    .gx-board-wrap > .mines-roul { order: 1; }
}

.gx .gx-payout {
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.gx .gx-payout.is-win {
    border-color: var(--gx-win, #0ea472);
    background: var(--gx-win-bg, #e9fbf4);
}

.gx .gx-payout.is-win .gx-payout__val,
.gx .gx-payout.is-win .gx-payout__mult {
    color: var(--gx-win, #0ea472);
}

.gx .gx-payout.is-lose {
    border-color: var(--gx-lose, #e23b52);
    background: var(--gx-lose-bg, #fef2f4);
}

.gx .gx-payout.is-lose .gx-payout__val,
.gx .gx-payout.is-lose .gx-payout__mult {
    color: var(--gx-lose, #e23b52);
}