:root {
    --bg: #050505;
    --surface: #0d0d0f;
    --surface-2: #111214;
    --line: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.05);
    --text: #f4f6fb;
    --muted: #989da8;
    --blue: #1fb2ff;
    --pink: #ff4d9c;
    --orange: #ff951f;
    --amber: #ffbe2f;
    --green: #1dbb63;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top center, rgba(28, 124, 255, 0.16), transparent 26%),
        radial-gradient(circle at 20% 100%, rgba(255, 107, 161, 0.10), transparent 20%),
        linear-gradient(180deg, #090909 0%, #050505 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.app-shell,
.site-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.app-frame,
.mobile-app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.98), rgba(5, 5, 5, 1));
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    padding-bottom: 110px;
}

.topbar,
.app-topbar,
.profile-strip,
.content-area,
.bottom-nav,
.floating-actions {
    position: relative;
    z-index: 1;
}

.topbar,
.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 18px 8px;
}

.brand-title,
.brand-mark {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-actions {
    display: flex;
    gap: 10px;
}

.icon-button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.72);
    position: relative;
}

.icon-button span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin: 1px auto;
}

.close-button span {
    position: absolute;
    width: 13px;
    height: 1.6px;
    border-radius: 999px;
    margin: 0;
}

.close-button span:first-child { transform: rotate(45deg); }
.close-button span:last-child { transform: rotate(-45deg); }
.close-button span:nth-child(2) { display: none; }

.profile-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px 18px;
}

.profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .95rem;
    font-weight: 700;
    color: var(--blue);
    background: radial-gradient(circle at 30% 30%, rgba(35,196,255,.18), rgba(4,33,44,.95));
    border: 1px solid rgba(55,193,255,.12);
    overflow: hidden;
}

.avatar-circle.avatar-has-image {
    background: rgba(8, 18, 26, 0.98);
    color: transparent;
}

.avatar-circle__image,
.profile-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    display: inline-block;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-meta {
    display: flex;
    gap: 6px;
    margin-bottom: 3px;
}

.badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .68rem;
    font-weight: 700;
}

.profile-xp {
    color: var(--muted);
    font-size: .9rem;
}

.balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--blue);
    background: linear-gradient(180deg, rgba(9,48,72,.55), rgba(6,26,44,.92));
    border: 1px solid rgba(43,183,255,.28);
    font-weight: 800;
}

.page-content {
    padding: 8px 18px 0;
}

.content-area {
    padding: 0 18px;
}

.promo-panel {
    margin-top: 8px;
}

.promo-card {
    position: relative;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
}

.promo-card--blue {
    background: linear-gradient(135deg, #236cc4 0%, #235bcf 46%, #278cff 100%);
}

.promo-icon {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #56d4ff, #2e98f8);
    color: white;
    font-size: 2rem;
}

.promo-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.promo-row h2 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.02;
}

.promo-row span {
    font-size: .78rem;
    color: rgba(255,255,255,.84);
    white-space: nowrap;
    padding-top: 4px;
}

.promo-copy p {
    margin: 0 0 14px;
    color: rgba(255,255,255,.86);
    line-height: 1.35;
}

.promo-button {
    border: none;
    border-radius: 15px;
    padding: 11px 18px;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #40d4ff, #118bff);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 4px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
}

.dot.active {
    width: 24px;
    background: rgba(255,255,255,.9);
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.quick-action {
    height: 52px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(17,18,20,.98), rgba(11,12,14,.98));
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

.games-section,
.feed-panel {
    margin-top: 20px;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.section-title-row h3 {
    margin: 0;
    font-size: 1.7rem;
}

.games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.catalog-card {
    position: relative;
    min-height: 176px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    color: white;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .2s ease, filter .18s ease;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.catalog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 42%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.catalog-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(22px - 1px);
    border: 1px solid rgba(255, 255, 255, .18);
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.06)),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    padding: 1px;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: .95;
    pointer-events: none;
}

.catalog-card:hover {
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.04);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, .26),
        0 0 24px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -1px 0 rgba(255,255,255,.08);
}

.catalog-card:hover::after {
    opacity: 1;
}

.catalog-card:hover::before {
    border-color: rgba(255, 255, 255, .28);
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.1)),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 35%);
}

.catalog-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.catalog-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.catalog-card-art-wrap {
    flex: 1;
    min-width: 0;
}

.catalog-card-art-wrap--hero,
.catalog-card-art-wrap--mines {
    display: flex;
    align-items: flex-start;
}

.catalog-card-art-wrap--mines {
    justify-content: flex-start;
    align-items: center;
    min-height: 100%;
}

.catalog-card-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    font-size: 2rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.catalog-card-art {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.catalog-card-mines-logo {
    display: block;
    width: min(122px, 100%);
    max-width: 122px;
    height: auto;
    margin-top: 0;
    margin-left: 0;
    object-fit: contain;
    object-position: left center;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

.catalog-card--mines-compact {
    min-height: 176px;
    padding: 16px;
    gap: 14px;
}

.catalog-card-mines-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    padding: 0;
    row-gap: 8px;
    position: relative;
}

.catalog-card-head--mines {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.catalog-online--mines {
    margin-top: 0;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 10px;
    font-size: .72rem;
}

.catalog-card-copy-wrap--mines {
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
    width: 100%;
}

.catalog-card-copy--mines {
    margin-top: 0;
    line-height: 1.3;
    max-width: none;
    font-size: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.catalog-card-footer--mines {
    margin-top: auto;
    padding-top: 0;
    font-size: .82rem;
}

.catalog-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.96);
    font-size: .76rem;
    font-weight: 700;
}

.catalog-online::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8df3b1;
    box-shadow: 0 0 10px rgba(141, 243, 177, .65);
}

.catalog-card--wide {
    grid-column: 1 / -1;
    min-height: 154px;
}

.catalog-card--violet { background: linear-gradient(135deg, #2c54f3 0%, #4a46d8 100%); }
.catalog-card--cyan { background: linear-gradient(135deg, #18bfe7 0%, #4e8dff 100%); }
.catalog-card--pink { background: linear-gradient(135deg, #ff935c 0%, #f45195 52%, #e1406d 100%); }
.catalog-card--emerald { background: linear-gradient(135deg, #17a55a 0%, #187641 100%); }
.catalog-card--orange { background: linear-gradient(135deg, #ef8f20 0%, #e27216 100%); }
.catalog-card--amber { background: linear-gradient(135deg, #f6cf4a 0%, #ff9500 100%); }
.catalog-card--gold { background: linear-gradient(135deg, #e3b54c 0%, #ad7e1f 100%); }
.catalog-card--steel { background: linear-gradient(135deg, #718096 0%, #3a4658 100%); }

.feature-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.96);
    font-size: .78rem;
    font-weight: 700;
}

.catalog-card h3 {
    margin: 10px 0 8px;
    font-size: 1.45rem;
}

.catalog-card p {
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.3;
}

.catalog-card-copy--mines {
    margin-top: 2px;
}

.catalog-card--mines-compact .catalog-card-copy--mines {
    margin-top: 0;
    line-height: 1.3;
    max-width: none;
    font-size: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.catalog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    color: rgba(255,255,255,.82);
    font-size: 0.82rem;
}

.text-link {
    color: #fff5dc;
    font-weight: 700;
}

.bonuses-section {
    margin-top: 8px;
}

.bonuses-heading {
    align-items: flex-start;
    margin-bottom: 16px;
}

.bonuses-heading h2 {
    margin: 6px 0 8px;
    font-size: 2rem;
    line-height: 1.02;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-copy {
    margin: 0;
    max-width: 320px;
    color: var(--muted);
    line-height: 1.45;
    font-size: .95rem;
}

.bonuses-grid {
    align-items: stretch;
}

.bonuses-grid .catalog-card {
    min-height: 188px;
}

.bonus-promo-card {
    margin-top: 14px;
    margin-bottom: 10px;
    background:
        radial-gradient(circle at top right, rgba(36, 191, 255, .16), transparent 32%),
        linear-gradient(180deg, rgba(15,16,18,.98), rgba(10,11,13,.98));
}

.bonus-promo-head {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.bonus-promo-icon {
    background: linear-gradient(135deg, #24bfff, #3484ff);
    color: #fff;
}

.bonus-promo-copy h3 {
    margin: 6px 0 8px;
    font-size: 1.18rem;
}

.bonus-promo-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.bonus-promo-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
}

.bonus-promo-input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    padding: 0 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bonus-promo-input::placeholder {
    color: rgba(255,255,255,.34);
}

.bonus-promo-input:focus {
    border-color: rgba(52, 132, 255, .48);
    box-shadow: 0 0 0 3px rgba(52, 132, 255, .12);
    background: rgba(255,255,255,.045);
}

.bonus-promo-button {
    min-height: 48px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #24bfff 0%, #3484ff 100%);
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    box-shadow: 0 14px 28px rgba(32, 118, 255, .24);
}

.bonus-promo-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 18px 32px rgba(32, 118, 255, .3);
}

.missions-shell {
    margin-top: 8px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at top center, rgba(70, 116, 255, .12), transparent 28%),
        linear-gradient(180deg, rgba(17,18,24,.98), rgba(11,12,16,.98));
    box-shadow:
        0 18px 40px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.missions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.missions-head h2 {
    margin: 8px 0 0;
    font-size: 1.72rem;
}

.missions-timer {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
    font-weight: 700;
    letter-spacing: .02em;
}

.missions-list {
    display: grid;
    gap: 12px;
}

.mission-card {
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(180deg, rgba(39,40,48,.92), rgba(30,31,39,.94));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 24px rgba(0,0,0,.18);
}

.mission-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mission-top h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.mission-progress {
    flex-shrink: 0;
    color: #ffcf3f;
    font-weight: 800;
    font-size: .92rem;
}

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

.mission-reward {
    color: rgba(255,255,255,.94);
    font-weight: 800;
    font-size: 1.1rem;
}

.mission-action {
    min-width: 108px;
    min-height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #8932ff 0%, #5f27d7 100%);
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    box-shadow: 0 12px 24px rgba(111, 47, 209, .24);
}

.mission-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.profile-card--menu {
    background:
        radial-gradient(circle at top left, rgba(36, 191, 255, .10), transparent 28%),
        linear-gradient(180deg, rgba(15,16,18,.98), rgba(10,11,13,.98));
}

.profile-menu-grid {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.profile-menu-card {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(15,16,18,.98), rgba(10,11,13,.98));
    box-shadow:
        0 14px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.profile-menu-card h3 {
    margin: 10px 0 8px;
    font-size: 1.16rem;
}

.profile-menu-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.profile-promo-card {
    margin-top: 18px;
}

.feed-list {
    display: grid;
    gap: 10px;
}

.feed-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.feed-item:last-child {
    border-bottom: none;
}

.feed-main {
    display: grid;
    gap: 4px;
}

.feed-title {
    font-weight: 700;
}

.feed-meta {
    color: var(--muted);
    font-size: 0.84rem;
}

.feed-amount {
    color: var(--success);
    font-weight: 800;
}

.support-card,
.feed-panel,
.profile-card,
.wallet-hero,
.panel-card,
.game-panel,
.game-hero {
    margin-top: 22px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(15,16,18,.98), rgba(10,11,13,.98));
}

.support-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: center;
}

.support-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #52d2ff, #2c96f7);
    font-size: 1.8rem;
}

.support-copy h3,
.game-panel h2,
.panel-card h2,
.profile-card h1 {
    margin: 0 0 6px;
    font-size: 1.18rem;
}

.support-copy p,
.panel-card p,
.profile-card p,
.wallet-hero p,
.game-hero-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

.game-hero {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 16px;
    align-items: center;
}

.game-hero-icon,
.profile-avatar--large {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #56d4ff, #2e98f8);
    color: #fff;
    font-size: 2rem;
    overflow: hidden;
}

.profile-avatar--large.avatar-has-image {
    background: rgba(8, 18, 26, 0.98);
    color: transparent;
}

.profile-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
}

.stats-strip,
.dual-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.stat-box {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line-soft);
}

.stat-box span {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
    font-size: .82rem;
}

.stat-box strong,
.wallet-hero h1 {
    font-size: 1.3rem;
}

.mode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mode-chip {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
}

.mode-chip.active {
    background: linear-gradient(135deg, var(--accent), #ca6320);
    border-color: transparent;
}

.bet-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field label {
    color: var(--muted);
    font-size: 0.9rem;
}

.form-field input {
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    padding: 0 14px;
}

.bet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.button-primary,
.button-secondary,
.ghost-chip {
    appearance: none;
    border: none;
    border-radius: 16px;
    min-height: 48px;
    padding: 12px 16px;
    color: #f7fbff;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.button-primary {
    background: linear-gradient(135deg, #ffd16e 0%, #ff8b38 48%, #e45167 100%);
    box-shadow:
        0 16px 30px rgba(228, 81, 103, .22),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.button-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.ghost-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #eef5ff;
    font-size: .82rem;
    font-weight: 700;
}

.button-primary:hover,
.button-secondary:hover,
.ghost-chip:hover,
.mode-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.payout-list {
    display: grid;
    gap: 10px;
}

.payout-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.payout-row:last-child {
    border-bottom: none;
}

.payout-label {
    color: var(--muted);
}

.payout-value {
    font-weight: 800;
    color: var(--accent-2);
}

.result-card {
    border-radius: 18px;
    padding: 16px;
    line-height: 1.5;
}

.result-card--idle {
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
}

.result-card--win {
    background: rgba(105, 217, 139, 0.10);
    color: #d8ffe4;
    border: 1px solid rgba(105, 217, 139, 0.18);
}

.result-card--lose {
    background: rgba(255, 109, 109, 0.10);
    color: #ffe0e0;
    border: 1px solid rgba(255, 109, 109, 0.18);
}

.result-card--draw {
    background: rgba(240, 191, 105, 0.10);
    color: #fff1d8;
    border: 1px solid rgba(240, 191, 105, 0.18);
}

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

.game-stage-panel {
    overflow: hidden;
}

.game-stage {
    position: relative;
    min-height: 240px;
    margin-top: 8px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at top left, rgba(45, 170, 255, 0.24), transparent 35%),
        radial-gradient(circle at top right, rgba(244, 154, 46, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(15,16,20,.96), rgba(8,9,12,.96));
    overflow: hidden;
}

.stage-caption {
    color: var(--muted);
    font-size: 0.88rem;
    text-align: center;
}

.slots-stage,
.dice-stage,
.roulette-stage,
.duel-stage,
.throw-stage,
.crash-stage {
    min-height: 240px;
    display: grid;
    place-items: center;
    padding: 18px;
}

.slots-stage {
    width: 100%;
    gap: 16px;
}

.slots-topline {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 10px;
}

.slots-heading {
    display: grid;
    gap: 4px;
    text-align: center;
}

.slots-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8fcaff;
}

.slots-title {
    color: #f7fbff;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(114, 201, 255, 0.18);
}

.slots-machine {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.slots-machine__halo {
    position: absolute;
    inset: 12px 24px 10px 0;
    border-radius: 32px;
    background:
        radial-gradient(circle at top, rgba(109, 213, 255, 0.24), transparent 46%),
        radial-gradient(circle at bottom, rgba(255, 181, 76, 0.16), transparent 42%);
    filter: blur(18px);
    pointer-events: none;
}

.slots-machine__cabinet {
    position: relative;
    padding: 12px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(56, 27, 40, 0.96), rgba(18, 11, 22, 0.98)),
        linear-gradient(135deg, rgba(83, 213, 255, 0.14), rgba(255, 170, 84, 0.12));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -18px 26px rgba(0,0,0,.24),
        0 24px 44px rgba(0,0,0,.34);
}

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

.slots-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(126, 225, 255, 0.24), rgba(87, 122, 255, 0.08));
    border: 1px solid rgba(126, 225, 255, 0.24);
    color: #ebfbff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.slots-lamps {
    display: flex;
    gap: 8px;
}

.slots-lamps span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7d5, #ffba52 72%);
    box-shadow: 0 0 12px rgba(255, 187, 82, 0.55);
}

.slots-display {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(18, 24, 35, 0.98)),
        radial-gradient(circle at top, rgba(86, 205, 255, 0.12), transparent 44%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -16px 24px rgba(0,0,0,.28);
}

.slots-display__glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 24%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 60%);
    opacity: .7;
}

.slots-display__top,
.slots-display__bottom {
    position: relative;
    z-index: 1;
}

.slots-display__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #8fa4bf;
    font-size: 0.72rem;
    flex-wrap: wrap;
}

.slots-display__top strong {
    color: #f3f8ff;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slots-reels-shell {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(7, 12, 19, .72);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -20px 20px rgba(0,0,0,.28);
}

.slots-payline {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0), rgba(117, 228, 255, 0.9) 18%, rgba(255,255,255,.95) 50%, rgba(117, 228, 255, 0.9) 82%, rgba(0,0,0,0));
    box-shadow:
        0 0 22px rgba(117, 228, 255, 0.48),
        0 0 44px rgba(117, 228, 255, 0.18);
    opacity: .95;
    pointer-events: none;
}

.slot-window {
    position: relative;
    height: 104px;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.96), rgba(15, 18, 25, 0.98));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 18px rgba(0,0,0,.2);
}

.slot-window::before,
.slot-window::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    z-index: 3;
    pointer-events: none;
}

.slot-window::before {
    top: 0;
    background: linear-gradient(180deg, rgba(3,5,8,.92), rgba(3,5,8,0));
}

.slot-window::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(3,5,8,.94), rgba(3,5,8,0));
}

.slot-window.is-spinning .slot-reel {
    filter: blur(1.2px) saturate(1.05);
}

.slot-window.is-settled .slot-card.is-highlighted {
    animation: slot-card-pulse .6s ease-out;
}

.slot-window.is-spinning::before,
.slot-window.is-spinning::after {
    opacity: .98;
}

.slot-reel {
    display: grid;
    gap: 0;
    will-change: transform;
}

.slot-symbol {
    height: 104px;
    display: grid;
    place-items: center;
    padding: 6px;
}

.slot-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 14px rgba(0,0,0,.16);
}

.slot-card__shine {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,.05) 55%, rgba(255,255,255,0) 75%);
    pointer-events: none;
}

.slot-card__icon,
.slot-card__payout {
    position: relative;
    z-index: 1;
}

.slot-card__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 3.4rem;
    line-height: 1;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    overflow: visible;
}

.slot-card__payout {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(6, 10, 18, .22);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255, 252, 245, .92);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.slot-card--cherry {
    background: linear-gradient(180deg, rgba(255, 136, 165, 0.98), rgba(165, 38, 73, 0.96));
}

.slot-card--citrus {
    background: linear-gradient(180deg, rgba(255, 217, 110, 0.96), rgba(168, 112, 24, 0.94));
}

.slot-card--berry {
    background: linear-gradient(180deg, rgba(192, 116, 255, 0.96), rgba(93, 42, 156, 0.94));
}

.slot-card--melon {
    background: linear-gradient(180deg, rgba(124, 244, 195, 0.98), rgba(21, 132, 109, 0.95));
}

.slot-card--clover {
    background: linear-gradient(180deg, rgba(121, 236, 130, 0.98), rgba(35, 122, 53, 0.95));
}

.slot-card--star {
    background: linear-gradient(180deg, rgba(255, 226, 122, 0.98), rgba(201, 132, 34, 0.95));
}

.slot-card--bell {
    background: linear-gradient(180deg, rgba(255, 189, 112, 0.98), rgba(184, 92, 24, 0.95));
}

.slot-card--crystal {
    background: linear-gradient(180deg, rgba(124, 241, 255, 0.96), rgba(30, 123, 156, 0.94));
}

.slot-card--seven {
    background: linear-gradient(180deg, rgba(255, 120, 120, 0.98), rgba(135, 24, 36, 0.96));
}

.slot-card.is-highlighted {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 10px 20px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 24px rgba(255, 213, 112, .34);
}

.slots-payline::after {
    content: "";
    position: absolute;
    inset: -8px 18%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.65), rgba(255,255,255,0) 72%);
    filter: blur(8px);
    animation: slot-payline-glow 1.8s ease-in-out infinite;
}

.page--slots {
    background:
        radial-gradient(circle at top center, rgba(255, 173, 70, 0.18), transparent 22%),
        radial-gradient(circle at 12% 24%, rgba(104, 198, 255, 0.16), transparent 18%),
        linear-gradient(180deg, #120d13 0%, #070709 100%);
}

.page--slots .mobile-app--slots {
    background:
        radial-gradient(circle at top, rgba(255, 174, 77, 0.12), transparent 18%),
        radial-gradient(circle at 20% 20%, rgba(91, 199, 255, 0.10), transparent 22%),
        linear-gradient(180deg, rgba(22, 15, 22, 0.98), rgba(8, 8, 10, 1));
}

.page--slots .app-topbar {
    padding-top: 24px;
}

.page--slots .page-content--game {
    position: relative;
    display: grid;
    gap: 14px;
    padding-top: 4px;
    padding-bottom: 24px;
    align-content: start;
}

.page--slots .page-content--game::before {
    content: "";
    position: absolute;
    inset: 0 18px auto;
    height: 220px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255, 186, 99, 0.16), transparent 48%),
        radial-gradient(circle at bottom, rgba(88, 199, 255, 0.12), transparent 54%);
    filter: blur(12px);
    pointer-events: none;
}

.page--slots .game-panel {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(25, 18, 27, 0.96), rgba(11, 10, 14, 0.98)),
        radial-gradient(circle at top, rgba(255,255,255,.04), transparent 52%);
    box-shadow:
        0 18px 40px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.page--slots .game-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%);
    opacity: .8;
    pointer-events: none;
}

.page--slots .section-header,
.page--slots .bet-form,
.page--slots .payout-list,
.page--slots #game-result,
.page--slots .mode-grid,
.page--slots .game-stage {
    position: relative;
    z-index: 1;
}

.page--slots .section-kicker {
    color: #ffca7a;
}

.page--slots .section-header h2 {
    color: #fff6ea;
}

.page--slots .mode-chip {
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.page--slots .mode-chip.active {
    background: linear-gradient(135deg, #ffcf75 0%, #ff9742 50%, #ec5a62 100%);
    color: #fffaf2;
    box-shadow:
        0 12px 24px rgba(236, 90, 98, .22),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.page--slots .form-field label,
.page--slots .payout-label,
.page--slots .result-card--idle,
.page--slots .stage-caption {
    color: #beaeb8;
}

.page--slots .form-field input {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.page--slots .game-stage {
    min-height: 0;
    margin-top: 0;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at top center, rgba(29, 194, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(11, 12, 16, 0.98), rgba(6, 7, 10, 0.98));
}

.page--slots .slots-stage {
    width: 100%;
    padding: 12px;
    display: block;
}

.page--slots .slots-app {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, #090b0f 0%, #050608 100%);
    box-shadow: 0 24px 50px rgba(0,0,0,.34);
}

.page--slots .slots-app__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #f5f7fb;
    font-weight: 800;
}

.page--slots .slots-app__brand {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

.page--slots .slots-app__actions {
    color: rgba(255,255,255,.58);
    letter-spacing: 0.24em;
}

.page--slots .slots-app__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.page--slots .slots-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page--slots .slots-profile__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #0fc2ff, #08202f);
}

.page--slots .slots-profile__meta {
    display: grid;
    gap: 2px;
}

.page--slots .slots-profile__meta strong {
    font-size: 0.75rem;
    color: #eef6ff;
}

.page--slots .slots-profile__meta span {
    font-size: 0.72rem;
    color: #8d96a3;
}

.page--slots .slots-balance {
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(22, 190, 255, 0.28);
    background: rgba(9, 31, 42, 0.72);
    color: #22c0ff;
    font-weight: 800;
}

.page--slots .slots-machine {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(11, 13, 17, 0.98), rgba(7, 8, 12, 0.98));
}

.page--slots .slots-machine__controls {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

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

.page--slots .slots-mult {
    min-height: 68px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(34, 52, 68, 0.9), rgba(24, 32, 42, 0.96));
    color: #d7efff;
    display: grid;
    place-items: center;
    gap: 2px;
    cursor: pointer;
}

.page--slots .slots-mult span {
    font-size: 1rem;
}

.page--slots .slots-mult strong {
    font-size: 0.95rem;
}

.page--slots .slots-mult small {
    font-size: 0.72rem;
    color: #8ed2ff;
}

.page--slots .slots-mult.is-active {
    background: linear-gradient(180deg, #34c8ff 0%, #3178ff 100%);
    box-shadow: 0 10px 24px rgba(49, 120, 255, .22);
}

.page--slots .slots-stake-box {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    gap: 8px;
    align-content: start;
}

.page--slots .slots-step,
.page--slots .slots-stake-quick button {
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(18, 20, 26, 0.98);
    color: #f5f7fb;
    cursor: pointer;
}

.page--slots .slots-step {
    min-height: 42px;
    font-size: 1.3rem;
}

.page--slots .slots-step--minus {
    color: #ff6a66;
}

.page--slots .slots-step--plus {
    color: #35d470;
}

.page--slots .slots-stake-value {
    min-height: 42px;
    border-radius: 12px;
    background: rgba(18, 20, 26, 0.98);
    border: 1px solid rgba(255,255,255,.06);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 800;
}

.page--slots .slots-stake-quick {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.page--slots .slots-stake-quick button {
    min-height: 22px;
    font-size: 0.66rem;
    color: #b9c1cb;
}

.page--slots .slots-machine__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: #080a0d;
}

.page--slots .slot-window {
    aspect-ratio: 1 / 1;
    height: auto;
    min-width: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #0d1015, #06080b);
}

.page--slots .slot-reel {
    width: 100%;
}

.page--slots .slot-symbol {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    padding: 5px;
}

.page--slots .slot-card {
    border-radius: 14px;
}

.page--slots .slot-card__icon {
    font-size: 3.55rem;
}

.page--slots .slots-spin {
    width: 100%;
    margin-top: 12px;
    min-height: 48px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #31d27e 0%, #1d9f5c 100%);
    color: #f3fff8;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 18px 28px rgba(29, 159, 92, .24);
}

.page--slots .slots-spin small {
    opacity: .8;
}

.page--slots .slots-rules {
    display: block;
    margin: 12px auto 0;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: #d7dde6;
}

.page--slots .slots-history {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(10, 12, 16, 0.94);
}

.page--slots .slots-history__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.page--slots .slots-history__head strong {
    font-size: 1rem;
}

.page--slots .slots-history__head span {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 116, 170, 0.24);
    color: #2cc1ff;
    font-size: 0.72rem;
}

.page--slots .slots-history__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.page--slots .slots-history__card {
    min-height: 92px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(23, 25, 31, 0.96), rgba(15, 16, 21, 0.98));
    display: grid;
    place-items: center;
    color: #b7c0ca;
}

@media (max-width: 390px) {
    .bet-actions {
        grid-template-columns: 1fr;
    }

    .page--slots .slots-machine__controls {
        grid-template-columns: 1fr;
    }

    .page--slots .slot-window {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .page--slots .slot-symbol {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .page--slots .slot-card__icon {
        font-size: 3rem;
    }

    .page--slots .slots-spin {
        grid-template-columns: 16px 1fr auto;
        padding: 0 12px;
    }
}

.page--slots .slots-app {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.04), transparent 24%),
        linear-gradient(180deg, #0a0c10 0%, #050608 100%);
}

.page--slots .slots-ambience,
.page--slots .slots-banner,
.page--slots .slots-payout-strip,
.page--slots .slots-history,
.page--slots .slots-machine__rail,
.page--slots .slots-rules {
    display: none;
}

.page--slots .slots-app__header,
.page--slots .slots-machine,
.page--slots .slots-footer {
    position: relative;
    z-index: 1;
}

.page--slots .slots-app__brand {
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page--slots .slots-app__mode {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #dfe7f2;
    font-size: 0.76rem;
    font-weight: 800;
}

.page--slots .slots-machine {
    background:
        linear-gradient(180deg, rgba(12, 14, 18, 0.98), rgba(7, 8, 11, 0.98)),
        radial-gradient(circle at top, rgba(255,255,255,0.03), transparent 50%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 18px 32px rgba(0,0,0,.32);
}

.page--slots .slots-machine__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #9ca5b0;
    font-size: 0.78rem;
}

.page--slots .slots-machine__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8f98a5;
    box-shadow: 0 0 10px rgba(143, 152, 165, 0.28);
}

.page--slots .slots-machine__board {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 9, 12, 1), rgba(5, 6, 8, 1)),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.page--slots .slot-window {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 18px rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.06);
}

.page--slots .slots-machine.is-busy .slots-payline {
    animation: slots-payline-busy .5s linear infinite;
}

.page--slots .slots-machine.is-busy .slots-machine__status-dot {
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255,255,255,.52);
}

.page--slots .slots-mult {
    min-height: 58px;
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.96), rgba(14, 16, 20, 0.98));
    color: #d8dfe8;
}

.page--slots .slots-mult span {
    display: none;
}

.page--slots .slots-mult small {
    color: #7e8794;
}

.page--slots .slots-mult.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.page--slots .slots-step,
.page--slots .slots-stake-value,
.page--slots .slots-stake-quick button {
    background: rgba(13, 15, 19, 0.98);
    border-color: rgba(255,255,255,.05);
}

.page--slots .slots-step--minus,
.page--slots .slots-step--plus {
    color: #e4e8ef;
}

.page--slots .slots-spin {
    background: linear-gradient(180deg, #1d2229 0%, #101318 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 16px 28px rgba(0,0,0,.3);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.page--slots .slots-spin:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.page--slots .slots-footer {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.page--slots .slots-footer::-webkit-scrollbar {
    display: none;
}

.page--slots .slots-footer__pill {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(12, 14, 18, 0.88);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page--slots .slots-footer__pill span {
    font-size: 1.15rem;
}

.page--slots .slots-footer__pill strong {
    color: #dbe4ee;
    font-size: 0.72rem;
}

@keyframes slots-payline-busy {
    0% {
        opacity: .55;
        filter: brightness(.95);
    }
    50% {
        opacity: 1;
        filter: brightness(1.12);
    }
    100% {
        opacity: .55;
        filter: brightness(.95);
    }
}

@media (max-width: 390px) {
    .page--slots .slots-machine__controls {
        grid-template-columns: 1fr;
    }
}

.page--slots .game-stage {
    min-height: 620px;
    background: linear-gradient(180deg, #090a0d 0%, #050608 100%);
}

.page--slots .slots-app {
    max-width: 100%;
    padding: 18px 10px 10px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.page--slots .slots-app__header {
    margin-bottom: 18px;
    padding: 0 6px;
}

.page--slots .slots-app__brand {
    font-size: 1rem;
    color: #eceff4;
}

.page--slots .slots-app__mode {
    background: transparent;
    border-color: rgba(255,255,255,.1);
    color: #cfd5de;
}

.page--slots .slots-machine {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.page--slots .slots-machine__controls {
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 6px;
}

.page--slots .slots-mults {
    gap: 6px;
}

.page--slots .slots-mult,
.page--slots .slots-step,
.page--slots .slots-stake-value,
.page--slots .slots-stake-quick button,
.page--slots .slots-spin {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.page--slots .slots-mult {
    min-height: 52px;
    border-radius: 12px;
}

.page--slots .slots-mult.is-active {
    background: rgba(255,255,255,.08);
    box-shadow: none;
}

.page--slots .slots-stake-box {
    grid-template-columns: 40px 1fr 40px;
}

.page--slots .slots-step,
.page--slots .slots-stake-value {
    min-height: 40px;
}

.page--slots .slots-machine__status {
    margin: 0 0 14px;
    padding: 0 6px;
}

.page--slots .slots-machine__board {
    gap: 12px;
    padding: 0 6px;
    border: none;
    border-radius: 0;
    background: transparent;
}

.page--slots .slots-payline {
    left: 6px;
    right: 6px;
    height: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24) 25%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.24) 75%, rgba(255,255,255,0));
    box-shadow: none;
}

.page--slots .slots-payline::after {
    display: none;
}

.page--slots .slot-window {
    height: 210px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.page--slots .slot-window::before,
.page--slots .slot-window::after {
    display: none;
}

.page--slots .slot-symbol {
    height: 210px;
    padding: 0;
}

.page--slots .slot-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page--slots .slot-card__icon {
    font-size: clamp(4rem, 8vw, 5.2rem);
    line-height: 1;
    filter: none;
}

.page--slots .slot-card__payout,
.page--slots .slot-card__shine,
.page--slots .slots-footer {
    display: none;
}

.page--slots .slot-window.is-jackpot {
    border-color: #ff4d5d;
    box-shadow:
        0 0 0 1px rgba(255, 77, 93, 0.18),
        0 0 22px rgba(255, 77, 93, 0.34),
        inset 0 0 20px rgba(255, 77, 93, 0.08);
    animation: slots-jackpot-glow 1s ease-in-out infinite;
}

.page--slots .slots-machine.has-jackpot .slots-payline {
    background: linear-gradient(90deg, rgba(255,77,93,0), rgba(255,77,93,.55) 25%, rgba(255,110,125,.95) 50%, rgba(255,77,93,.55) 75%, rgba(255,77,93,0));
}

.page--slots .slots-spin {
    width: calc(100% - 12px);
    margin: 16px 6px 0;
    min-height: 50px;
    border-radius: 14px;
    box-shadow: none;
}

.page--slots .slots-spin span {
    display: none;
}

@keyframes slots-jackpot-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 77, 93, 0.18),
            0 0 18px rgba(255, 77, 93, 0.28),
            inset 0 0 16px rgba(255, 77, 93, 0.06);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 77, 93, 0.26),
            0 0 34px rgba(255, 77, 93, 0.5),
            inset 0 0 24px rgba(255, 77, 93, 0.12);
    }
}

@media (max-width: 390px) {
    .page--slots .slot-window,
    .page--slots .slot-symbol {
        height: 168px;
    }

    .page--slots .slot-card__icon {
        font-size: 3.4rem;
    }
}

/* Final slots reel geometry override */
.page--slots .slots-machine__board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    padding: 0 6px;
    border: none;
    border-radius: 0;
    background: transparent;
}

.page--slots .slot-window {
    position: relative;
    height: 210px;
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    box-shadow: none;
}

.page--slots .slot-window::before,
.page--slots .slot-window::after {
    display: none;
}

.page--slots .slot-reel {
    display: block;
    width: 100%;
    will-change: transform;
}

.page--slots .slot-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    min-height: 210px;
    padding: 0;
}

.page--slots .slot-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.page--slots .slot-card__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    filter: none;
}

.page--slots .slot-card__icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4rem, 8vw, 5.2rem);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.page--slots .slot-card__payout,
.page--slots .slot-card__shine {
    display: none;
}

.page--slots .slot-window.is-jackpot {
    border-color: #ff4d5d;
    box-shadow:
        0 0 0 1px rgba(255, 77, 93, 0.18),
        0 0 22px rgba(255, 77, 93, 0.34),
        inset 0 0 20px rgba(255, 77, 93, 0.08);
    animation: slots-jackpot-glow 1s ease-in-out infinite;
}

.page--slots .slots-machine.has-jackpot .slots-payline {
    background: linear-gradient(90deg, rgba(255,77,93,0), rgba(255,77,93,.55) 25%, rgba(255,110,125,.95) 50%, rgba(255,77,93,.55) 75%, rgba(255,77,93,0));
}

@media (max-width: 390px) {
    .page--slots .slot-window {
        height: 168px;
    }

    .page--slots .slot-symbol {
        height: 168px;
        min-height: 168px;
    }

    .page--slots .slot-card__icon-inner {
        font-size: 3.4rem;
    }
}

.dice-shell {
    perspective: 900px;
    display: grid;
    place-items: center;
    min-height: 170px;
}

/* Clean slot rebuild */
.page--slots .game-stage {
    min-height: 560px;
    background: linear-gradient(180deg, #0a0b0e 0%, #050608 100%);
}

.page--slots .slots-stage {
    width: 100%;
    padding: 18px 12px;
}

.page--slots .slots-redo {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.page--slots .slots-redo__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.page--slots .slots-redo__title {
    color: #f2f4f8;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page--slots .slots-redo__mode {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    color: #d8dee7;
    font-size: 0.76rem;
    font-weight: 800;
}

.page--slots .slots-redo__controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 12px;
}

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

.page--slots .slots-mult {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #e7ebf1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.page--slots .slots-mult strong {
    font-size: 0.95rem;
}

.page--slots .slots-mult small {
    color: #8f98a5;
    font-size: 0.72rem;
}

.page--slots .slots-mult.is-active {
    background: rgba(255,255,255,.09);
}

.page--slots .slots-redo__stake {
    display: grid;
    grid-template-columns: 42px 86px 42px;
    gap: 8px;
}

.page--slots .slots-step,
.page--slots .slots-stake-value {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #edf1f6;
}

.page--slots .slots-step {
    font-size: 1.3rem;
}

.page--slots .slots-stake-value {
    display: grid;
    place-items: center;
    font-weight: 800;
}

.page--slots .slots-redo__status {
    margin-bottom: 14px;
    color: #9099a6;
    font-size: 0.82rem;
}

.page--slots .slots-redo__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.page--slots .slots-redo__payline {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18) 25%, rgba(255,255,255,.36) 50%, rgba(255,255,255,.18) 75%, rgba(255,255,255,0));
    pointer-events: none;
}

.page--slots .slots-reel-window {
    position: relative;
    height: 196px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
}

.page--slots .slots-reel-track {
    width: 100%;
    will-change: transform;
}

.page--slots .slots-reel-item {
    height: 196px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page--slots .slots-reel-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page--slots .slots-reel-card__emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    display: inline-block;
    font-size: clamp(4rem, 8vw, 5.1rem);
    line-height: 1;
    text-align: center;
}

.page--slots .slots-reel-window.is-jackpot {
    border-color: #ff4d5d;
    box-shadow:
        0 0 0 1px rgba(255, 77, 93, 0.18),
        0 0 22px rgba(255, 77, 93, 0.34),
        inset 0 0 20px rgba(255, 77, 93, 0.08);
    animation: slots-reel-jackpot-glow 1s ease-in-out infinite;
}

.page--slots .slots-redo.has-jackpot .slots-redo__payline {
    background: linear-gradient(90deg, rgba(255,77,93,0), rgba(255,77,93,.55) 25%, rgba(255,110,125,.95) 50%, rgba(255,77,93,.55) 75%, rgba(255,77,93,0));
}

.page--slots .slots-spin {
    width: 100%;
    margin-top: 16px;
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #eef2f7;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 16px;
    font-weight: 900;
}

.page--slots .slots-spin small {
    color: #8f98a5;
}

@keyframes slots-reel-jackpot-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 77, 93, 0.18),
            0 0 18px rgba(255, 77, 93, 0.28),
            inset 0 0 16px rgba(255, 77, 93, 0.06);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 77, 93, 0.26),
            0 0 34px rgba(255, 77, 93, 0.5),
            inset 0 0 24px rgba(255, 77, 93, 0.12);
    }
}

@media (max-width: 390px) {
    .page--slots .slots-redo__controls {
        grid-template-columns: 1fr;
    }

    .page--slots .slots-redo__stake {
        grid-template-columns: 40px 1fr 40px;
    }

    .page--slots .slots-reel-window,
    .page--slots .slots-reel-item {
        height: 160px;
    }

    .page--slots .slots-reel-card__emoji {
        font-size: 3.6rem;
    }
}

/* Final slot rebuild */
.page--slots .game-stage {
    min-height: 540px;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.72), rgba(3, 4, 6, 0.92)),
        url("/static/slot_assets/slot/background.jpg") center/cover no-repeat;
}

.page--slots .slots-stage {
    width: 100%;
    padding: 8px 8px 14px;
}

.page--slots .slots-clean {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(116, 255, 182, 0.14);
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(49, 255, 165, 0.22), transparent 36%),
        radial-gradient(circle at 0% 100%, rgba(39, 194, 255, 0.14), transparent 34%),
        radial-gradient(circle at 100% 24%, rgba(69, 255, 228, 0.11), transparent 28%),
        linear-gradient(180deg, rgba(8, 10, 12, 0.99), rgba(2, 4, 6, 0.995));
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.4),
        0 0 42px rgba(43, 255, 167, 0.12),
        0 0 68px rgba(43, 255, 167, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -24px 56px rgba(0, 0, 0, 0.18),
        inset 0 0 36px rgba(43, 255, 167, 0.08);
    overflow: hidden;
}

.page--slots .slots-clean__toolbar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.page--slots .slots-clean__tool-button {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(88, 222, 255, 0.38);
    border-radius: 999px;
    background:
        radial-gradient(circle at top center, rgba(74, 214, 255, 0.22), transparent 72%),
        linear-gradient(180deg, rgba(13, 19, 23, 0.96), rgba(7, 11, 15, 0.98));
    color: #e2f8ff;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        0 0 22px rgba(74, 214, 255, 0.18),
        0 0 31px rgba(74, 214, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.page--slots .slots-clean__tool-button:hover {
    transform: translateY(-1px) scale(1.02);
    border-color: rgba(88, 222, 255, 0.5);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(74, 214, 255, 0.28),
        0 0 36px rgba(74, 214, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page--slots .slots-clean__tool-button--auto {
    border-color: rgba(59, 222, 129, 0.38);
    background:
        radial-gradient(circle at top center, rgba(59, 222, 129, 0.22), transparent 72%),
        linear-gradient(180deg, rgba(13, 23, 17, 0.96), rgba(8, 14, 11, 0.98));
    color: #e6fff0;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        0 0 22px rgba(59, 222, 129, 0.2),
        0 0 31px rgba(59, 222, 129, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.page--slots .slots-clean__tool-button--auto:hover {
    border-color: rgba(59, 222, 129, 0.52);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(59, 222, 129, 0.3),
        0 0 36px rgba(59, 222, 129, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page--slots .slots-clean__tool-button--auto.is-active {
    border-color: rgba(118, 255, 171, 0.68);
    background:
        radial-gradient(circle at top center, rgba(118, 255, 171, 0.3), transparent 72%),
        linear-gradient(180deg, rgba(14, 32, 21, 0.98), rgba(7, 18, 11, 0.99));
    box-shadow:
        0 0 0 1px rgba(118, 255, 171, 0.16),
        0 0 22px rgba(118, 255, 171, 0.32),
        0 0 42px rgba(118, 255, 171, 0.16),
        inset 0 1px 0 rgba(203, 255, 223, 0.12);
}

.page--slots .slots-clean__tool-button:active {
    transform: scale(0.98);
}

.page--slots .slots-clean__tool-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(74, 214, 255, 0.14);
}

.page--slots .slots-clean__controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
}

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

.page--slots .slots-clean__mode-button,
.page--slots .slots-clean__step,
.page--slots .slots-clean__stake-value,
.page--slots .slots-clean__spin {
    color: #edf7ef;
    border: 1px solid rgba(106, 132, 114, 0.24);
    background:
        radial-gradient(circle at top center, rgba(66, 245, 156, 0.08), transparent 72%),
        linear-gradient(180deg, rgba(13, 19, 17, 0.92), rgba(8, 13, 12, 0.98));
}

.page--slots .slots-clean__mode-button {
    min-height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    gap: 2px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.page--slots .slots-clean__mode-button:nth-child(1) {
    border-color: rgba(69, 226, 255, 0.3);
    background:
        radial-gradient(circle at top center, rgba(69, 226, 255, 0.18), transparent 72%),
        linear-gradient(180deg, rgba(10, 20, 24, 0.94), rgba(7, 12, 16, 0.98));
    box-shadow:
        0 0 18px rgba(69, 226, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__mode-button:nth-child(2) {
    border-color: rgba(182, 92, 255, 0.3);
    background:
        radial-gradient(circle at top center, rgba(182, 92, 255, 0.18), transparent 72%),
        linear-gradient(180deg, rgba(20, 13, 29, 0.94), rgba(10, 8, 18, 0.98));
    box-shadow:
        0 0 18px rgba(182, 92, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__mode-button:nth-child(3) {
    border-color: rgba(255, 120, 84, 0.3);
    background:
        radial-gradient(circle at top center, rgba(255, 120, 84, 0.18), transparent 72%),
        linear-gradient(180deg, rgba(30, 14, 12, 0.94), rgba(17, 9, 8, 0.98));
    box-shadow:
        0 0 18px rgba(255, 120, 84, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__mode-button strong {
    font-size: 1.04rem;
}

.page--slots .slots-clean__mode-button small {
    font-size: 0.69rem;
    color: rgba(176, 191, 181, 0.7);
}

.page--slots .slots-clean__mode-button.is-active {
    border-color: rgba(62, 237, 139, 0.42);
    background:
        radial-gradient(circle at top center, rgba(71, 244, 145, 0.26), transparent 72%),
        linear-gradient(180deg, rgba(22, 29, 26, 0.98), rgba(8, 18, 13, 0.98));
    box-shadow:
        0 0 0 1px rgba(62, 237, 139, 0.16),
        0 0 22px rgba(62, 237, 139, 0.12),
        0 10px 22px rgba(24, 118, 74, 0.14),
        inset 0 1px 0 rgba(162, 255, 208, 0.22);
}

.page--slots .slots-clean__mode-button:hover,
.page--slots .slots-clean__step:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.18),
        0 0 14px rgba(61, 227, 138, 0.12),
        0 0 26px rgba(61, 227, 138, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(111, 248, 177, 0.24);
}

.page--slots .slots-clean__mode-button:active,
.page--slots .slots-clean__step:active,
.page--slots .slots-clean__spin:active {
    transform: scale(0.985);
}

.page--slots .slots-clean__stake {
    display: grid;
    grid-template-columns: 46px 92px 46px;
    gap: 8px;
}

.page--slots .slots-clean__step,
.page--slots .slots-clean__stake-value {
    min-height: 54px;
    border-radius: 14px;
}

.page--slots .slots-clean__step {
    font-size: 1.5rem;
    font-weight: 700;
}

.page--slots .slots-clean__step[data-dir="-1"] {
    border-color: rgba(255, 88, 116, 0.34);
    background:
        radial-gradient(circle at top center, rgba(255, 88, 116, 0.18), transparent 72%),
        linear-gradient(180deg, rgba(27, 14, 18, 0.94), rgba(12, 8, 10, 0.98));
    box-shadow:
        0 0 16px rgba(255, 88, 116, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__step[data-dir="1"] {
    border-color: rgba(59, 222, 129, 0.38);
    background:
        radial-gradient(circle at top center, rgba(59, 222, 129, 0.2), transparent 72%),
        linear-gradient(180deg, rgba(13, 24, 18, 0.94), rgba(8, 13, 10, 0.98));
    box-shadow:
        0 0 16px rgba(59, 222, 129, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__stake-value {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.1rem;
    border-color: rgba(86, 205, 255, 0.3);
    background:
        radial-gradient(circle at top center, rgba(86, 205, 255, 0.16), transparent 72%),
        linear-gradient(180deg, rgba(8, 13, 16, 0.95), rgba(3, 8, 10, 0.98));
    box-shadow:
        0 0 18px rgba(86, 205, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__status {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(15, 23, 21, 0.82), rgba(9, 15, 13, 0.92));
    color: #a9c7bd;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 16px rgba(44, 233, 151, 0.05);
}

.page--slots .slots-clean__board-shell {
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(82, 248, 167, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(58, 255, 169, 0.18), transparent 46%),
        radial-gradient(circle at 50% 100%, rgba(40, 201, 255, 0.08), transparent 56%),
        linear-gradient(180deg, rgba(4, 5, 8, 0.82), rgba(12, 14, 18, 0.88));
    box-shadow:
        0 0 30px rgba(58, 255, 169, 0.14),
        0 0 62px rgba(58, 255, 169, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.page--slots .slots-clean__boards {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
}

.page--slots .slots-clean__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
}

.page--slots .slots-clean__payline {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(63, 232, 146, 0), rgba(111, 255, 193, 1) 50%, rgba(63, 232, 146, 0));
    box-shadow:
        0 0 18px rgba(63, 232, 146, 0.48),
        0 0 42px rgba(63, 232, 146, 0.28),
        0 0 68px rgba(63, 232, 146, 0.14),
        0 0 104px rgba(63, 232, 146, 0.08);
    pointer-events: none;
}

.page--slots .slots-clean__reel {
    position: relative;
    height: 168px;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid rgba(92, 245, 149, 0.32);
    background:
        radial-gradient(circle at 50% 0%, rgba(72, 255, 177, 0.16), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(58, 214, 255, 0.08), transparent 56%),
        linear-gradient(180deg, rgba(4, 14, 9, 0.98), rgba(3, 10, 7, 0.98)),
        linear-gradient(180deg, rgba(36, 175, 98, 0.1), transparent);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(11, 18, 16, 0.86),
        0 0 24px rgba(43, 255, 167, 0.14),
        0 0 45px rgba(43, 255, 167, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 28px rgba(45, 205, 113, 0.09);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.page--slots .slots-clean__reel::before,
.page--slots .slots-clean__reel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 2;
    pointer-events: none;
}

.page--slots .slots-clean__reel::before {
    top: 0;
    background: linear-gradient(180deg, rgba(5, 12, 10, 0.96), rgba(5, 12, 10, 0));
}

.page--slots .slots-clean__reel::after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(5, 12, 10, 0), rgba(5, 12, 10, 0.96));
}

.page--slots .slots-clean__track {
    width: 100%;
    will-change: transform;
}

.page--slots .slots-clean__cell {
    height: 168px;
    display: grid;
    place-items: center;
}

.page--slots .slots-clean__symbol {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 12px;
}

.page--slots .slots-clean__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
    transition: transform 220ms ease, filter 220ms ease;
}

.page--slots .slots-clean__reel.is-spinning .slots-clean__track {
    filter: blur(1.1px) saturate(0.92);
}

.page--slots .slots-clean__reel.is-match {
    border-color: rgba(79, 224, 135, 0.95);
    box-shadow:
        0 0 0 2px rgba(79, 224, 135, 0.2),
        0 0 26px rgba(79, 224, 135, 0.34),
        0 0 50px rgba(79, 224, 135, 0.18),
        0 0 92px rgba(79, 224, 135, 0.08),
        inset 0 0 28px rgba(79, 224, 135, 0.16);
    animation: slots-reel-match-glow 2.4s ease-in-out infinite;
}

.page--slots .slots-clean__reel.is-match .slots-clean__image {
    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 14px rgba(106, 255, 155, 0.42));
}

.page--slots .slots-clean__reel.is-jackpot {
    border-color: rgba(118, 255, 171, 0.96);
    box-shadow:
        0 0 0 2px rgba(118, 255, 171, 0.24),
        0 0 28px rgba(118, 255, 171, 0.42),
        0 0 53px rgba(118, 255, 171, 0.24),
        0 0 98px rgba(118, 255, 171, 0.12),
        inset 0 0 28px rgba(118, 255, 171, 0.18);
    animation: slots-reel-jackpot-glow 2s ease-in-out infinite;
}

.page--slots .slots-clean.has-jackpot .slots-clean__payline {
    box-shadow:
        0 0 26px rgba(118, 255, 171, 0.54),
        0 0 60px rgba(118, 255, 171, 0.2);
    background: linear-gradient(90deg, rgba(118, 255, 171, 0), rgba(118, 255, 171, 1) 50%, rgba(118, 255, 171, 0));
}

.page--slots .slots-clean.has-match .slots-clean__payline {
    box-shadow:
        0 0 22px rgba(79, 224, 135, 0.44),
        0 0 55px rgba(79, 224, 135, 0.16);
    background: linear-gradient(90deg, rgba(79, 224, 135, 0), rgba(79, 224, 135, 0.82) 50%, rgba(79, 224, 135, 0));
}

.page--slots .slots-clean__spin {
    width: 100%;
    min-height: 56px;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-color: rgba(59, 222, 129, 0.68);
    background:
        radial-gradient(circle at 50% 0%, rgba(160, 255, 208, 0.24), transparent 42%),
        linear-gradient(180deg, #19c86d, #129850);
    box-shadow:
        0 18px 30px rgba(10, 110, 55, 0.28),
        0 0 36px rgba(43, 255, 167, 0.24),
        0 0 68px rgba(43, 255, 167, 0.12),
        inset 0 1px 0 rgba(191, 255, 217, 0.32);
    font-weight: 900;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    position: relative;
    overflow: hidden;
}

.page--slots .slots-clean__spin:hover {
    transform: translateY(-1px);
    box-shadow:
        0 22px 36px rgba(10, 110, 55, 0.34),
        0 0 44px rgba(43, 255, 167, 0.26),
        0 0 76px rgba(43, 255, 167, 0.12),
        inset 0 1px 0 rgba(191, 255, 217, 0.32);
    filter: saturate(1.04);
}

.page--slots .slots-clean__spin-glow {
    position: absolute;
    inset: 0 auto 0 -22%;
    width: 42%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
    transform: skewX(-20deg);
    animation: slots-button-shine 3.4s linear infinite;
    pointer-events: none;
}

.page--slots .slots-clean__spin-main {
    color: #ffffff;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

.page--slots .slots-clean__spin small {
    color: rgba(232, 255, 240, 0.92);
    font-size: 0.7rem;
}

.page--slots .slots-clean__spin:disabled {
    opacity: 0.6;
    cursor: default;
}

.page--slots .slots-clean__flash {
    position: absolute;
    left: 50%;
    top: 186px;
    z-index: 4;
    min-width: 136px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(18, 22, 24, 0.96), rgba(8, 11, 13, 0.98));
    box-shadow:
        0 18px 34px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.05);
    text-align: center;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.page--slots .slots-clean__flash.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.page--slots .slots-clean__flash--win {
    border-color: rgba(91, 255, 155, 0.32);
    background:
        radial-gradient(circle at 50% 0%, rgba(152, 255, 203, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(16, 49, 31, 0.98), rgba(7, 23, 15, 0.99));
    box-shadow:
        0 0 24px rgba(91, 255, 155, 0.16),
        0 0 52px rgba(91, 255, 155, 0.08),
        0 18px 34px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(203,255,223,0.08);
}

.page--slots .slots-clean__flash--lose {
    border-color: rgba(255, 106, 106, 0.28);
    background: linear-gradient(180deg, rgba(50, 18, 20, 0.98), rgba(24, 9, 10, 0.99));
    box-shadow:
        0 0 24px rgba(255, 106, 106, 0.14),
        0 18px 34px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.page--slots .slots-clean__flash-label {
    margin-bottom: 4px;
    color: rgba(224, 233, 228, 0.8);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page--slots .slots-clean__flash-amount {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
}

.page--slots .slots-clean__help-card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 116px;
    z-index: 4;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(110, 255, 180, 0.18);
    background: linear-gradient(180deg, rgba(12, 17, 16, 0.98), rgba(5, 8, 8, 0.985));
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(61, 227, 138, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

.page--slots .slots-clean__help-card.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.page--slots .slots-clean__help-title {
    margin-bottom: 8px;
    color: #f2fbf6;
    font-size: 0.84rem;
    font-weight: 800;
}

.page--slots .slots-clean__help-copy {
    margin-bottom: 10px;
    color: rgba(207, 223, 214, 0.8);
    font-size: 0.74rem;
    line-height: 1.45;
}

.page--slots .slots-clean__help-close {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(111, 248, 177, 0.18);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    color: #edf7ef;
    font-size: 0.74rem;
    font-weight: 700;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.page--slots .slots-clean__help-close:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 248, 177, 0.34);
    background: rgba(111, 248, 177, 0.08);
}

.page--slots .slots-clean__footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
}

.page--slots .slots-clean__footer-pill {
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(208, 218, 212, 0.72);
    font-size: 0.74rem;
    font-weight: 700;
}

@keyframes slots-reel-match-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(79, 224, 135, 0.12),
            0 0 14px rgba(79, 224, 135, 0.14),
            0 0 38px rgba(79, 224, 135, 0.1),
            0 0 60px rgba(79, 224, 135, 0.05),
            0 0 102px rgba(79, 224, 135, 0.025),
            inset 0 0 16px rgba(79, 224, 135, 0.06);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(118, 255, 171, 0.94),
            0 0 26px rgba(118, 255, 171, 0.82),
            0 0 58px rgba(118, 255, 171, 0.52),
            0 0 81px rgba(118, 255, 171, 0.26),
            0 0 129px rgba(118, 255, 171, 0.12),
            inset 0 0 28px rgba(118, 255, 171, 0.2);
    }
    72% {
        box-shadow:
            0 0 0 2px rgba(98, 244, 154, 0.56),
            0 0 22px rgba(98, 244, 154, 0.44),
            0 0 48px rgba(98, 244, 154, 0.28),
            0 0 71px rgba(98, 244, 154, 0.14),
            0 0 113px rgba(98, 244, 154, 0.06),
            inset 0 0 22px rgba(98, 244, 154, 0.12);
    }
}

@keyframes slots-reel-jackpot-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(118, 255, 171, 0.14),
            0 0 16px rgba(118, 255, 171, 0.16),
            0 0 42px rgba(118, 255, 171, 0.12),
            0 0 66px rgba(118, 255, 171, 0.06),
            0 0 108px rgba(118, 255, 171, 0.03),
            inset 0 0 16px rgba(118, 255, 171, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(118, 255, 171, 0.98),
            0 0 28px rgba(118, 255, 171, 0.88),
            0 0 62px rgba(118, 255, 171, 0.58),
            0 0 85px rgba(118, 255, 171, 0.3),
            0 0 136px rgba(118, 255, 171, 0.14),
            inset 0 0 28px rgba(118, 255, 171, 0.22);
    }
    72% {
        box-shadow:
            0 0 0 2px rgba(118, 255, 171, 0.62),
            0 0 22px rgba(118, 255, 171, 0.5),
            0 0 52px rgba(118, 255, 171, 0.32),
            0 0 76px rgba(118, 255, 171, 0.16),
            0 0 118px rgba(118, 255, 171, 0.07),
            inset 0 0 22px rgba(118, 255, 171, 0.14);
    }
}

@keyframes slots-button-shine {
    0% { transform: translateX(-140%) skewX(-20deg); }
    100% { transform: translateX(380%) skewX(-20deg); }
}

@media (max-width: 390px) {
    .page--slots .slots-clean__stake {
        grid-template-columns: 42px 1fr 42px;
    }

    .page--slots .slots-clean__reel,
    .page--slots .slots-clean__cell {
        height: 136px;
    }

    .page--slots .slots-clean__symbol {
        padding: 10px;
    }

    .page--slots .slots-clean {
        padding: 12px;
    }

    .page--slots .slots-clean__help-card {
        bottom: 108px;
    }

    .page--slots .slots-clean__flash {
        top: 164px;
        min-width: 124px;
    }
}

.dice-cube {
    position: relative;
    width: 112px;
    height: 112px;
    transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.17,.9,.25,1);
}

.dice-cube.is-rolling {
    animation: dice-roll 1.2s linear infinite;
}

.dice-face {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #dfe9f3);
    box-shadow: inset 0 -4px 16px rgba(0,0,0,.16);
}

.face-1 { transform: translateZ(56px); }
.face-2 { transform: rotateY(90deg) translateZ(56px); }
.face-3 { transform: rotateX(90deg) translateZ(56px); }
.face-4 { transform: rotateX(-90deg) translateZ(56px); }
.face-5 { transform: rotateY(-90deg) translateZ(56px); }
.face-6 { transform: rotateY(180deg) translateZ(56px); }

.dice-cube[data-value="1"] { transform: rotateX(0deg) rotateY(0deg); }
.dice-cube[data-value="2"] { transform: rotateY(-90deg); }
.dice-cube[data-value="3"] { transform: rotateX(-90deg); }
.dice-cube[data-value="4"] { transform: rotateX(90deg); }
.dice-cube[data-value="5"] { transform: rotateY(90deg); }
.dice-cube[data-value="6"] { transform: rotateY(180deg); }

.pip {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0b1118;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.pip-top-left { top: 22px; left: 22px; }
.pip-top-right { top: 22px; right: 22px; }
.pip-middle-left { top: 48px; left: 22px; }
.pip-middle-right { top: 48px; right: 22px; }
.pip-bottom-left { bottom: 22px; left: 22px; }
.pip-bottom-right { bottom: 22px; right: 22px; }
.pip-center { top: 48px; left: 48px; }

.roulette-stage {
    gap: 16px;
    align-content: center;
}

.roulette-pointer {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 18px solid #59d0ff;
    filter: drop-shadow(0 0 10px rgba(89, 208, 255, 0.55));
}

.roulette-strip {
    display: flex;
    gap: 8px;
    width: max-content;
    will-change: transform;
}

.roulette-cell {
    flex: 0 0 64px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.06);
}

.roulette-cell--red {
    background: linear-gradient(180deg, #ff6b7d, #c9334f);
}

.roulette-cell--black {
    background: linear-gradient(180deg, #333b46, #14181f);
}

.roulette-cell--green {
    background: linear-gradient(180deg, #31cc76, #148449);
}

.roulette-cell.is-hit {
    box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 0 22px rgba(89, 208, 255, 0.45);
    transform: translateY(-4px);
}

.duel-stage {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
}

.duel-card {
    min-width: 116px;
    min-height: 132px;
    padding: 16px 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(26,29,37,.96), rgba(13,15,19,.96));
    display: grid;
    place-items: center;
    gap: 10px;
}

.duel-card.is-revealing {
    animation: float-pulse .5s ease-in-out infinite alternate;
}

.duel-label {
    color: var(--muted);
    font-size: 0.82rem;
}

.duel-emoji {
    font-size: 3rem;
    line-height: 1;
}

.duel-versus {
    align-self: center;
    color: #7cbfff;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.throw-stage {
    gap: 16px;
}

.throw-stage__icon {
    min-width: 180px;
    min-height: 108px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(52, 186, 255, 0.18), rgba(255, 160, 59, 0.16));
    border: 1px solid rgba(255,255,255,.06);
}

.throw-stage__icon.is-launching {
    animation: launch-arc 1.15s cubic-bezier(.19,.78,.25,1);
}

.throw-stage__meter {
    width: 100%;
    max-width: 260px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
}

.throw-stage__pulse {
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #45c3ff, #f5a83a);
    transform: translateX(-100%);
}

.throw-stage__pulse.is-running {
    animation: meter-run 1.15s ease-in-out;
}

.crash-stage {
    gap: 16px;
}

.crash-stage__grid {
    width: 100%;
    height: 120px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid rgba(255,255,255,.06);
}

.crash-stage__value {
    font-size: 2.8rem;
    font-weight: 900;
    color: #ecf7ff;
    text-shadow: 0 0 24px rgba(91, 209, 255, 0.28);
}

.crash-stage__value.is-running {
    animation: float-pulse .45s ease-in-out infinite alternate;
}

.mine-drop-layout {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.mine-drop-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(20,24,29,.98), rgba(12,15,19,.98));
    padding: 12px;
}

.mine-drop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mine-drop-row--spaced {
    margin-bottom: 8px;
}

.mine-drop-title {
    color: #f4f6fb;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mine-drop-pill {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    color: #d8deeb;
    font-size: .75rem;
    font-weight: 700;
}

.mine-drop-reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.mine-drop-reel-slot {
    position: relative;
    min-height: 316px;
    padding: 8px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(98,73,33,.95), rgba(63,44,21,.98)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 8px, rgba(0,0,0,.04) 8px 16px);
    border: 1px solid rgba(255,214,128,.18);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -18px 22px rgba(0,0,0,.2);
}

.mine-drop-reel-slot::before,
.mine-drop-reel-slot::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 36px;
    z-index: 2;
    pointer-events: none;
}

.mine-drop-reel-slot::before {
    top: 6px;
    background: linear-gradient(180deg, rgba(52,32,12,.92), rgba(52,32,12,0));
}

.mine-drop-reel-slot::after {
    bottom: 6px;
    background: linear-gradient(0deg, rgba(52,32,12,.96), rgba(52,32,12,0));
}

.mine-drop-reel-slot.is-spinning {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -18px 22px rgba(0,0,0,.2),
        0 0 0 1px rgba(255,214,128,.12),
        0 10px 26px rgba(0,0,0,.18);
}

.mine-drop-reel-slot.is-spinning::before,
.mine-drop-reel-slot.is-spinning::after,
.mine-drop-reel-slot.is-settling::before,
.mine-drop-reel-slot.is-settling::after {
    opacity: 1;
}

.mine-drop-reel-window {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(27,18,9,.4), rgba(27,18,9,.08));
}

.mine-drop-reel-window::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 58px;
    height: 60px;
    border-radius: 14px;
    border: 1px solid rgba(255, 233, 173, 0.22);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,214,128,.02));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(255,214,128,.06);
    pointer-events: none;
    z-index: 1;
}

.mine-drop-reel-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.mine-drop-reel-layer {
    position: relative;
    flex: 0 0 auto;
    transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

.mine-drop-reel-slot.is-spinning .mine-drop-reel-track {
    filter: blur(.9px) saturate(.96);
}

.mine-drop-reel-slot.is-settling .mine-drop-reel-track {
    filter: blur(.2px);
}

.mine-drop-reel-slot.is-settled .mine-drop-reel-track {
    filter: none;
}

.mine-drop-reel-layer .mine-drop-token {
    opacity: .6;
    transform: scale(.9);
    filter: saturate(.86);
}

.mine-drop-reel-slot.is-spinning .mine-drop-reel-layer .mine-drop-token {
    opacity: .72;
    transform: scale(.94);
}

.mine-drop-reel-layer.is-selected .mine-drop-token {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 18px rgba(0,0,0,.24),
        0 0 0 2px rgba(255,245,214,.28);
}

.mine-drop-reel-slot.is-settled .mine-drop-reel-layer.is-selected .mine-drop-token {
    animation: mine-drop-reel-pulse .34s ease-out;
}

.mine-drop-token {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px 6px 6px;
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.mine-drop-token__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.mine-drop-token__label {
    font-size: .72rem;
    letter-spacing: .02em;
}

.mine-drop-token--wood { background: linear-gradient(180deg, #6d4a21, #4c3116); }
.mine-drop-token--iron { background: linear-gradient(180deg, #7a8ea6, #536474); }
.mine-drop-token--diamond { background: linear-gradient(180deg, #4df0df, #1e9f98); }
.mine-drop-token--tnt { background: linear-gradient(180deg, #ff624a, #b02920); }
.mine-drop-token--ender { background: linear-gradient(180deg, #6a57ff, #3e2ca8); }

.mine-drop-status {
    margin-top: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: #c9d0dd;
    line-height: 1.35;
    font-size: .9rem;
}

.mine-drop-layout--minimal {
    gap: 14px;
}

.mine-drop-machine {
    background:
        linear-gradient(180deg, rgba(17,22,18,.98), rgba(10,12,10,.98)),
        linear-gradient(90deg, rgba(112,167,72,.08), rgba(0,0,0,0));
}

.mine-drop-subtitle {
    margin-top: 4px;
    color: #9eb48a;
    font-size: .82rem;
    line-height: 1.3;
}

.mine-drop-pill--accent {
    background: linear-gradient(180deg, #3d542d, #23321b);
    border: 1px solid rgba(178, 220, 122, 0.22);
    color: #f0ffdc;
}

.minecraft-panel {
    background:
        linear-gradient(180deg, rgba(31,35,29,.98), rgba(18,20,17,.98)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 10px, rgba(0,0,0,.02) 10px 20px);
}

.mine-drop-bet-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mine-drop-bet-button,
.mine-drop-spin-button {
    position: relative;
    border: 2px solid #11170f;
    border-radius: 8px;
    font-family: "Courier New", monospace;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #f7ffe9;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.18),
        inset 0 -4px 0 rgba(0,0,0,.22),
        0 4px 0 rgba(0,0,0,.24);
}

.mine-drop-bet-button {
    min-height: 54px;
    background:
        linear-gradient(180deg, #5b7f3b, #365121),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 6px, rgba(0,0,0,.03) 6px 12px);
}

.mine-drop-bet-button.is-active {
    background:
        linear-gradient(180deg, #9bd56b, #4f7e2a),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 6px, rgba(0,0,0,.03) 6px 12px);
    transform: translateY(1px);
}

.mine-drop-bet-button:not(.is-active):hover,
.mine-drop-spin-button:hover {
    filter: brightness(1.05);
}

.mine-drop-actions--single {
    grid-template-columns: 1fr;
    margin-top: 14px;
}

.mine-drop-stake-readout {
    min-height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #262d23, #171d15);
    border: 1px solid rgba(190, 233, 132, 0.14);
    color: #d9efbb;
    font-weight: 700;
}

.mine-drop-stake-readout strong {
    margin-left: 6px;
    color: #f7ffe9;
}

.mine-drop-spin-button {
    min-height: 60px;
    background:
        linear-gradient(180deg, #81dc5b, #3f8e31),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 8px, rgba(0,0,0,.02) 8px 16px);
}

.mine-drop-machine,
.minecraft-panel,
.mine-drop-board-card {
    border-color: rgba(120, 22, 44, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 16px 40px rgba(0,0,0,.32);
}

.mine-drop-machine {
    background:
        radial-gradient(circle at top, rgba(84, 16, 35, 0.22), transparent 40%),
        linear-gradient(180deg, rgba(16,10,14,.99), rgba(6,4,7,.99));
}

.minecraft-panel {
    background:
        radial-gradient(circle at top right, rgba(68, 12, 30, 0.2), transparent 38%),
        linear-gradient(180deg, rgba(20,16,18,.98), rgba(10,8,10,.98));
}

.mine-drop-reel-slot {
    background:
        linear-gradient(180deg, rgba(44,18,24,.96), rgba(15,8,12,.98)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 8px, rgba(0,0,0,.05) 8px 16px);
    border-color: rgba(165, 42, 42, 0.24);
}

.mine-drop-reel-slot::before {
    background: linear-gradient(180deg, rgba(22,10,13,.94), rgba(22,10,13,0));
}

.mine-drop-reel-slot::after {
    background: linear-gradient(0deg, rgba(22,10,13,.96), rgba(22,10,13,0));
}

.mine-drop-reel-window {
    background: linear-gradient(180deg, rgba(18,10,13,.56), rgba(18,10,13,.12));
}

.mine-drop-reel-window::after {
    border-color: rgba(222, 170, 89, 0.24);
    background: linear-gradient(180deg, rgba(125,25,52,.14), rgba(255,214,128,.03));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 20px rgba(109, 14, 39, 0.16);
}

.mine-drop-status {
    background: linear-gradient(180deg, rgba(21,10,14,.9), rgba(10,7,9,.92));
    border-color: rgba(133, 29, 49, 0.22);
    color: #d4c6cf;
}

.mine-drop-board-wrap {
    background:
        radial-gradient(circle at top, rgba(98, 18, 42, 0.22), transparent 44%),
        linear-gradient(180deg, rgba(18,10,14,.98), rgba(7,5,8,.98));
}

.mine-drop-bet-button {
    background:
        linear-gradient(180deg, #44464b, #23252a),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 6px, rgba(0,0,0,.03) 6px 12px);
    color: #efe9ee;
}

.mine-drop-bet-button.is-active {
    background:
        linear-gradient(180deg, #8b1832, #521021),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 6px, rgba(0,0,0,.03) 6px 12px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.1),
        inset 0 -4px 0 rgba(0,0,0,.26),
        0 0 18px rgba(139, 24, 50, 0.28);
}

.mine-drop-spin-button {
    background:
        linear-gradient(180deg, #8d1a34, #530d1f),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 8px, rgba(0,0,0,.03) 8px 16px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.12),
        inset 0 -4px 0 rgba(0,0,0,.28),
        0 8px 18px rgba(68, 9, 25, 0.28);
}

.mine-drop-spin-button:hover {
    filter: brightness(1.08);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.12),
        inset 0 -4px 0 rgba(0,0,0,.28),
        0 10px 22px rgba(98, 18, 42, 0.36);
}

.mine-drop-board-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(137,194,255,.95), rgba(223,220,158,.92)),
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
}

.mine-drop-board {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    min-height: 308px;
}

.mine-drop-fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.mine-drop-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(11, 13, 16, .92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.mine-drop-cell__inner,
.mine-drop-cell__void {
    position: absolute;
    inset: 0;
}

.mine-drop-cell__void {
    background:
        linear-gradient(180deg, rgba(0,0,0,.88), rgba(11,12,15,.98));
}

.mine-drop-cell__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
}

.mine-drop-cell__label,
.mine-drop-cell__reward {
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.mine-drop-cell__reward {
    align-self: flex-end;
}

.mine-drop-cell__inner--grass { background: linear-gradient(180deg, #6ec84a 0 22%, #bb915d 22%, #8a6744 100%); color: #12250e; }
.mine-drop-cell__inner--dirt { background: linear-gradient(180deg, #c89a62, #8a6744); color: #1f140c; }
.mine-drop-cell__inner--stone { background: linear-gradient(180deg, #cbced4, #8c9097); color: #20242b; }
.mine-drop-cell__inner--redstone { background: linear-gradient(180deg, #d6d7db, #a0a5ae); color: #1f2430; }
.mine-drop-cell__inner--gold { background: linear-gradient(180deg, #ffe65f, #d6ac24); color: #332500; }
.mine-drop-cell__inner--diamond { background: linear-gradient(180deg, #93f5ff, #54d7ec); color: #032a35; }
.mine-drop-cell__inner--chest { background: linear-gradient(180deg, #b17a38, #7e5321); color: #fff3d9; }

.mine-drop-cell--crack-1::after,
.mine-drop-cell--crack-2::after,
.mine-drop-cell--crack-3::after,
.mine-drop-cell.is-hit::after,
.mine-drop-cell.is-blasting::after,
.mine-drop-cell.is-endered::after,
.mine-drop-cell.is-destroyed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mine-drop-cell--crack-1::after {
    background: linear-gradient(115deg, transparent 0 43%, rgba(32,32,32,.55) 43% 47%, transparent 47% 100%);
}

.mine-drop-cell--crack-2::after {
    background:
        linear-gradient(115deg, transparent 0 43%, rgba(32,32,32,.55) 43% 47%, transparent 47% 100%),
        linear-gradient(45deg, transparent 0 54%, rgba(32,32,32,.48) 54% 58%, transparent 58% 100%);
}

.mine-drop-cell--crack-3::after {
    background:
        linear-gradient(115deg, transparent 0 43%, rgba(32,32,32,.6) 43% 47%, transparent 47% 100%),
        linear-gradient(45deg, transparent 0 54%, rgba(32,32,32,.54) 54% 58%, transparent 58% 100%),
        linear-gradient(78deg, transparent 0 64%, rgba(32,32,32,.5) 64% 67%, transparent 67% 100%);
}

.mine-drop-cell.is-hit {
    animation: mine-drop-hit .26s ease-out;
}

.mine-drop-cell.is-blasting {
    animation: mine-drop-blast .4s ease-out;
}

.mine-drop-cell.is-endered {
    animation: mine-drop-ender .38s ease-out;
}

.mine-drop-cell.is-destroyed {
    animation: mine-drop-destroy .34s ease-out;
}

.mine-drop-live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.mine-drop-bet-box {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 10px;
    align-items: center;
}

.mine-drop-live-box {
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #111317;
    border: 1px solid rgba(255,255,255,.06);
    display: grid;
    align-content: space-between;
}

.mine-drop-live-box span {
    color: #8c93a2;
    font-size: .75rem;
}

.mine-drop-live-box strong {
    color: #eef7ff;
    font-size: 1.18rem;
}

.mine-drop-actions {
    display: grid;
    grid-template-columns: 1fr 116px;
    gap: 10px;
    margin-top: 10px;
}

.mine-drop-start,
.mine-drop-cashout {
    height: 50px;
    border-radius: 14px;
    border: none;
    font-weight: 800;
}

.mine-drop-start {
    background: linear-gradient(180deg, #7de564, #45b13f);
    color: #fff;
}

.mine-drop-cashout {
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, #204466, #162f47);
    color: #dfefff;
}

.mine-drop-cashout:disabled,
.mine-drop-start:disabled {
    opacity: .45;
}

.mine-drop-token--fall {
    position: absolute;
    z-index: 5;
    width: 100%;
    max-width: 84px;
    min-height: 52px;
    animation: mine-drop-fall .62s cubic-bezier(.2,.8,.25,1) forwards;
}

.mine-drop-float {
    position: absolute;
    min-width: 48px;
    text-align: center;
    color: #ffe85b;
    font-size: 1.3rem;
    font-weight: 900;
    text-shadow: 0 0 14px rgba(255,204,61,.55), 0 2px 0 rgba(56,34,0,.55);
    animation: mine-drop-float-up .9s ease-out forwards;
}

@keyframes mine-drop-fall {
    0% {
        transform: translate3d(0, 0, 0) scale(.9) rotate(-8deg);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--drop-x), var(--drop-y), 0) scale(.98) rotate(0deg);
        opacity: 1;
    }
}

@keyframes mine-drop-reel-pulse {
    0% {
        transform: scale(.92);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 0 0 rgba(255,232,173,.42);
    }
    65% {
        transform: scale(1.04);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 0 0 8px rgba(255,232,173,0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes mine-drop-hit {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(.92); }
    70% { transform: scale(1.05); }
}

@keyframes mine-drop-blast {
    0% { box-shadow: 0 0 0 rgba(255,120,69,0); }
    45% { box-shadow: 0 0 0 6px rgba(255,160,72,.34), 0 0 28px rgba(255,79,42,.58); }
    100% { box-shadow: 0 0 0 rgba(255,120,69,0); }
}

@keyframes mine-drop-ender {
    0% { box-shadow: 0 0 0 rgba(125,92,255,0); }
    40% { box-shadow: 0 0 0 4px rgba(125,92,255,.34), 0 0 22px rgba(116,87,255,.58); }
    100% { box-shadow: 0 0 0 rgba(125,92,255,0); }
}

@keyframes mine-drop-destroy {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(.88); opacity: .4; }
}

@keyframes mine-drop-float-up {
    0% { transform: translateY(0); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translateY(-26px); opacity: 0; }
}

.mines-layout {
    display: grid;
    gap: 14px;
    padding: 10px;
    align-items: start;
}

.mines-board-card { order: 1; }
.mines-controls { order: 2; }
.mines-history-card { order: 3; }
.mines-info-card { order: 4; }

.mines-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(13,14,17,.98), rgba(10,11,14,.98));
    padding: 12px;
}

.mines-controls {
    display: grid;
    gap: 12px;
    background:
        radial-gradient(circle at top right, rgba(66, 174, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(13,14,17,.98), rgba(10,11,14,.98));
}

.mines-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mines-title,
.mines-history-title {
    font-weight: 700;
    color: #f3f5f9;
}

.mines-pill {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    color: #d5dae6;
    font-size: .76rem;
    font-weight: 700;
}

.mines-difficulty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.mine-difficulty-chip {
    min-height: 62px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.07);
    background: #141619;
    color: #fff;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    padding: 10px 12px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition:
        transform .16s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        filter .18s ease;
}

.mine-difficulty-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%);
    opacity: 0;
    transition: opacity .18s ease;
}

.mine-difficulty-chip:hover {
    transform: translateY(-1px) scale(1.015);
    filter: brightness(1.03);
}

.mine-difficulty-chip:hover::after {
    opacity: 1;
}

.mine-difficulty-chip.active {
    background: linear-gradient(180deg, rgba(22, 78, 62, 0.95), rgba(12, 45, 36, 0.98));
    border-color: rgba(37, 211, 153, .5);
    box-shadow: inset 0 0 0 1px rgba(37,211,153,.18);
}

.mine-difficulty-chip--tier-1 {
    border-color: rgba(55, 193, 114, .22);
    background: linear-gradient(180deg, rgba(18, 40, 28, .98), rgba(12, 22, 17, .98));
}

.mine-difficulty-chip--tier-1.active {
    background: linear-gradient(180deg, rgba(34, 112, 73, .96), rgba(15, 58, 38, .98));
    border-color: rgba(75, 231, 142, .56);
    box-shadow:
        inset 0 0 0 1px rgba(75, 231, 142, .18),
        0 0 22px rgba(45, 198, 110, .16);
}

.mine-difficulty-chip--tier-2 {
    border-color: rgba(213, 179, 64, .22);
    background: linear-gradient(180deg, rgba(43, 37, 19, .98), rgba(22, 19, 11, .98));
}

.mine-difficulty-chip--tier-2.active {
    background: linear-gradient(180deg, rgba(136, 111, 28, .96), rgba(76, 58, 14, .98));
    border-color: rgba(255, 223, 95, .56);
    box-shadow:
        inset 0 0 0 1px rgba(255, 223, 95, .16),
        0 0 22px rgba(226, 193, 72, .14);
}

.mine-difficulty-chip--tier-3 {
    border-color: rgba(218, 132, 51, .22);
    background: linear-gradient(180deg, rgba(46, 28, 15, .98), rgba(23, 14, 9, .98));
}

.mine-difficulty-chip--tier-3.active {
    background: linear-gradient(180deg, rgba(156, 85, 28, .96), rgba(84, 42, 12, .98));
    border-color: rgba(255, 168, 79, .56);
    box-shadow:
        inset 0 0 0 1px rgba(255, 168, 79, .16),
        0 0 22px rgba(228, 129, 44, .14);
}

.mine-difficulty-chip--tier-4 {
    border-color: rgba(186, 63, 71, .24);
    background: linear-gradient(180deg, rgba(45, 17, 21, .98), rgba(21, 9, 11, .98));
}

.mine-difficulty-chip--tier-4.active {
    background: linear-gradient(180deg, rgba(134, 33, 42, .96), rgba(72, 15, 21, .98));
    border-color: rgba(255, 105, 117, .54);
    box-shadow:
        inset 0 0 0 1px rgba(255, 105, 117, .16),
        0 0 24px rgba(190, 43, 56, .16);
}

.mine-difficulty-label {
    font-size: .86rem;
    font-weight: 700;
}

.mine-difficulty-meta {
    color: #97a0b0;
    font-size: .69rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mine-difficulty-chip.active .mine-difficulty-meta {
    color: #cff7e7;
}

.mines-bet-box {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 10px;
    align-items: center;
}

.stake-stepper {
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 1.3rem;
    transition: transform .16s ease, filter .16s ease, box-shadow .18s ease;
}

.stake-stepper--minus {
    background: linear-gradient(180deg, #41191d, #2f1114);
}

.stake-stepper--plus {
    background: linear-gradient(180deg, #184628, #0f331c);
}

.stake-value {
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #0f1114;
    border: 1px solid rgba(255,255,255,.05);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.stake-quickbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stake-chip {
    min-width: 46px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: #1c1d21;
    color: #d9dde4;
    font-size: .78rem;
    font-weight: 700;
    transition: transform .16s ease, filter .16s ease, box-shadow .18s ease;
}

.stake-chip--accent {
    background: #59461a;
    color: #ffd667;
}

.stake-chip--danger {
    background: #55232a;
    color: #ff8ea0;
}

.mines-live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mines-live-box {
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #111317;
    border: 1px solid rgba(255,255,255,.06);
    display: grid;
    align-content: space-between;
}

.mines-live-box span {
    color: #8c93a2;
    font-size: .75rem;
}

.mines-live-box strong {
    font-size: 1.22rem;
    color: #eaf3ff;
}

.mines-status {
    min-height: 54px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: #111317;
    color: #a9afbb;
    font-size: .9rem;
    line-height: 1.4;
}

.mines-status--win {
    color: #c7ffe4;
    background: rgba(26, 95, 61, 0.28);
}

.mines-status--lose {
    color: #ffd7d7;
    background: rgba(102, 36, 36, 0.28);
}

.mines-actions {
    display: grid;
    grid-template-columns: 1fr 116px;
    gap: 10px;
}

.mines-start {
    height: 50px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(180deg, #1fcf8f, #17b57b);
    color: #fff;
    font-weight: 800;
    font-size: 1.06rem;
    transition: transform .16s ease, filter .16s ease, box-shadow .18s ease;
    box-shadow: 0 10px 22px rgba(24, 181, 123, .18);
}

.mines-cashout {
    height: 50px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, #204466, #162f47);
    color: #dfefff;
    font-weight: 800;
    transition: transform .16s ease, filter .16s ease, box-shadow .18s ease;
}

.mines-cashout:disabled {
    opacity: .45;
}

.stake-stepper:hover,
.stake-chip:hover,
.mines-start:hover,
.mines-cashout:not(:disabled):hover,
.mines-info-button:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.05);
}

.stake-stepper:hover,
.stake-chip:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.mines-start:hover {
    box-shadow: 0 14px 28px rgba(24, 181, 123, .24);
}

.mines-cashout:not(:disabled):hover {
    box-shadow: 0 14px 28px rgba(39, 102, 163, .2);
}

.mines-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
}

.mines-board-card {
    padding: 14px;
    display: grid;
    gap: 12px;
    background:
        radial-gradient(circle at top left, rgba(35, 186, 255, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(14,16,19,.98), rgba(8,9,11,.98));
}

.mine-cell {
    aspect-ratio: 1 / 1;
    min-height: 58px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, #131518, #0d0e11);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    position: relative;
    overflow: hidden;
}

.mine-cell__asset {
    position: absolute;
    inset: 18%;
    border-radius: 10px;
    opacity: 0;
    transform: scale(.7);
    transition: transform .18s ease, opacity .18s ease;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}

.mine-cell::before,
.mine-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.mine-cell--diamond {
    background: radial-gradient(circle at 30% 30%, rgba(50, 225, 177, .35), rgba(14, 74, 58, .96));
}

.mine-cell--diamond .mine-cell__asset {
    opacity: 1;
    transform: scale(.9);
    background-image: url('/static/mines/mine-diamond.png');
    background-size: 78%;
    background-position: 50% 50%;
}

.mine-cell--tnt {
    background: radial-gradient(circle at 30% 30%, rgba(255, 117, 117, .35), rgba(88, 24, 24, .96));
}

.mine-cell--tnt .mine-cell__asset {
    opacity: 1;
    transform: scale(.9);
    background-image: url('/static/mines/mine-tnt.png');
    background-size: 80%;
    background-position: center;
}

.mine-cell--blast {
    animation: mine-cell-shake .38s ease-in-out;
}

.mine-cell--blast .mine-cell__asset {
    animation: mine-tnt-pop .42s ease-out;
}

.mine-cell--blast::before {
    inset: -18%;
    z-index: 1;
    background:
        radial-gradient(circle, rgba(255,236,154,.95) 0 18%, rgba(255,147,41,.88) 18% 42%, rgba(255,76,36,.7) 42% 63%, rgba(255,76,36,0) 64%);
    animation: mine-blast-ring .58s ease-out forwards;
}

.mine-cell--blast::after {
    inset: -30%;
    z-index: 3;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,245,214,.9) 0 8%, rgba(255,245,214,0) 9%),
        radial-gradient(circle at 18% 26%, rgba(255,178,76,.95) 0 4%, rgba(255,178,76,0) 5%),
        radial-gradient(circle at 81% 22%, rgba(255,123,67,.95) 0 4.5%, rgba(255,123,67,0) 5.5%),
        radial-gradient(circle at 24% 78%, rgba(255,204,105,.92) 0 4%, rgba(255,204,105,0) 5%),
        radial-gradient(circle at 74% 76%, rgba(255,150,90,.92) 0 4%, rgba(255,150,90,0) 5%);
    animation: mine-sparks-burst .62s ease-out forwards;
}

@keyframes mine-cell-shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(-2px, 1px, 0); }
    40% { transform: translate3d(3px, -2px, 0); }
    60% { transform: translate3d(-2px, 2px, 0); }
    80% { transform: translate3d(2px, -1px, 0); }
}

@keyframes mine-tnt-pop {
    0% { transform: scale(.72); }
    35% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes mine-blast-ring {
    0% {
        opacity: 0;
        transform: scale(.35);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@keyframes mine-sparks-burst {
    0% {
        opacity: 0;
        transform: scale(.4);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

.mines-info-button {
    width: 100%;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: #121417;
    color: #dfe3ea;
    font-weight: 700;
}

.mines-history-card {
    display: grid;
    gap: 12px;
    background:
        radial-gradient(circle at top right, rgba(255, 188, 65, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(13,14,17,.98), rgba(10,11,14,.98));
}

.mines-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mines-stat {
    min-height: 78px;
    padding: 12px;
    border-radius: 16px;
    background: #131519;
    border: 1px solid rgba(255,255,255,.06);
    display: grid;
    align-content: space-between;
}

.mines-stat span {
    color: #949aa8;
    font-size: .76rem;
}

.mines-stat strong {
    color: #ffd83d;
    font-size: 1.05rem;
}

.mines-empty {
    min-height: 140px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: #111317;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: #8c92a0;
}

.mines-empty-icon {
    font-size: 2.2rem;
}

@media (min-width: 760px) {
    .mines-layout {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
}

.mines-empty-title {
    color: #ccd1db;
    font-weight: 700;
}

.mines-empty-copy {
    font-size: .82rem;
}

.mines-history-list {
    display: grid;
    gap: 8px;
}

.mines-history-item {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: #111317;
    border: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #d7dbe4;
}

.mines-history-item .is-win {
    color: #3de7a0;
}

.mines-history-item .is-loss {
    color: #ff8c98;
}

@media (max-width: 390px) {
    .mines-difficulty {
        grid-template-columns: 1fr 1fr;
    }

    .mines-board {
        gap: 10px;
    }

    .mine-cell {
        min-height: 52px;
    }
}

@keyframes dice-roll {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(540deg); }
}

@keyframes float-pulse {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

@keyframes launch-arc {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-22px) scale(1.06) rotate(-6deg); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes meter-run {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(330%); }
}

.profile-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.panel-card,
.wallet-hero {
    padding: 18px;
}

.wallet-hero h1 {
    font-size: 2.2rem;
}

.floating-actions {
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 404px;
}

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 412px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 24px;
    background: rgba(25, 27, 29, 0.94);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.bottom-nav-item {
    min-height: 44px;
    display: grid;
    place-items: center;
    color: var(--muted);
    border-radius: 16px;
    font-size: 0.84rem;
}

.bottom-nav-item.active {
    color: var(--text);
    background: rgba(240, 140, 50, 0.16);
}

@media (max-width: 390px) {
    .games-grid,
    .dual-layout,
    .stats-strip,
    .quick-actions,
    .promo-card {
        grid-template-columns: 1fr;
    }

    .promo-card { gap: 12px; }
}

.cases-stage,
.coinflip-stage,
.cups-stage,
.fortune-stage,
.classic-stage {
    min-height: 240px;
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 18px;
}

.cases-machine {
    width: 100%;
    max-width: 320px;
    display: grid;
    gap: 16px;
}

.cases-track-window {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(11,13,17,.96), rgba(18,21,27,.92));
    padding: 12px;
}

.cases-track {
    display: flex;
    gap: 10px;
    will-change: transform;
}

.cases-item {
    flex: 0 0 84px;
    height: 74px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid rgba(255,255,255,.08);
}

.cases-item--common { background: linear-gradient(180deg, #525b69, #313843); }
.cases-item--rare { background: linear-gradient(180deg, #2f8fff, #2257d0); }
.cases-item--epic { background: linear-gradient(180deg, #8d4dff, #5c25ce); }
.cases-item--legend { background: linear-gradient(180deg, #ffb347, #d86b12); }

.cases-case {
    position: relative;
    width: 220px;
    height: 128px;
    margin: 0 auto;
}

.cases-case__lid,
.cases-case__body {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, #313847, #171c24);
    box-shadow: 0 16px 32px rgba(0,0,0,.24);
}

.cases-case__lid {
    top: 0;
    height: 54px;
    transform-origin: top center;
    transition: transform .5s ease;
    z-index: 2;
}

.cases-case__lid.is-open {
    transform: perspective(400px) rotateX(-72deg) translateY(-8px);
}

.cases-case__body {
    bottom: 0;
    height: 92px;
    overflow: hidden;
}

.cases-case__glow {
    position: absolute;
    inset: 16px;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(96,161,255,.28), transparent 66%);
}

.cases-case__reward {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f8fbff;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cases-case__reward--common { color: #dbe3ec; }
.cases-case__reward--rare { color: #90c7ff; }
.cases-case__reward--epic { color: #c3a2ff; }
.cases-case__reward--legend { color: #ffd08e; }

.coinflip-arena {
    position: relative;
    perspective: 1100px;
    display: grid;
    place-items: center;
    min-height: 190px;
    width: 100%;
    isolation: isolate;
}

.coinflip-flight {
    position: relative;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.coinflip-shadow {
    position: absolute;
    bottom: 18px;
    width: 78px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 8, 18, 0.24) 0%, rgba(2, 8, 18, 0.08) 58%, rgba(2, 8, 18, 0) 100%);
    filter: blur(3px);
    transform: translateZ(0);
    will-change: transform, opacity;
}

.coinflip-coin {
    position: relative;
    width: 104px;
    height: 104px;
    transform-style: preserve-3d;
    will-change: transform;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

.coinflip-edge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 104px;
    transform: translate(-50%, -50%) rotateY(90deg);
    transform-style: preserve-3d;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #8a5d18 0%, #e0b85d 18%, #f8df97 34%, #d2a247 52%, #f6d67e 70%, #8f621b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(98, 58, 0, .24),
        inset 2px 0 3px rgba(255,255,255,.2),
        inset -2px 0 3px rgba(66, 35, 0, .22);
    backface-visibility: hidden;
}

.coinflip-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f2cd71;
    background:
        radial-gradient(circle at 32% 28%, #fff6d2 0%, #f4d98d 26%, #d8a84a 62%, #8c5e15 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -6px 12px rgba(86, 48, 0, .28);
    display: grid;
    place-items: center;
    backface-visibility: hidden;
}

.coinflip-face--front {
    transform: translateZ(7px);
}

.coinflip-face--back {
    transform: rotateY(180deg) translateZ(7px);
}

.coinflip-face__ring {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 246, 205, .36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.coinflip-face__mark,
.coinflip-face__label {
    position: relative;
    z-index: 2;
    color: #583400;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.coinflip-face__mark {
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1;
    margin-top: -8px;
    letter-spacing: .01em;
}

.coinflip-face__label {
    margin-top: 46px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.coinflip-coin[data-side="tails"] {
    transform: rotateY(180deg);
}

.coinflip-flight.is-tossing {
    animation: coinflip-flight 1.35s cubic-bezier(.2,.78,.22,1) forwards;
}

.coinflip-coin.is-tossing {
    animation: coinflip-spin 1.35s cubic-bezier(.18,.82,.2,1) forwards;
}

.coinflip-shadow.is-tossing {
    animation: coinflip-shadow 1.35s cubic-bezier(.2,.78,.22,1) forwards;
}

.coinflip-result {
    min-width: 200px;
    text-align: center;
    color: #dce7f5;
    font-weight: 700;
    letter-spacing: .03em;
}

.cups-table {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding-top: 34px;
}

.cups-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: end;
}

.cup-shell {
    position: relative;
    height: 122px;
    transition: transform .28s ease;
}

.cup-shell.is-selected {
    transform: translateY(-3px);
}

.cup-lid,
.cup-body,
.cup-base {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ffe4a0, #b77926);
    border: 1px solid rgba(0,0,0,.16);
}

.cup-lid {
    top: 8px;
    width: 58px;
    height: 12px;
    border-radius: 999px;
}

.cup-body {
    top: 16px;
    width: 76px;
    height: 78px;
    border-radius: 18px 18px 24px 24px;
    clip-path: polygon(9% 0, 91% 0, 78% 100%, 22% 100%);
}

.cup-base {
    bottom: 10px;
    width: 44px;
    height: 12px;
    border-radius: 999px;
}

.cup-shell.is-lifting {
    transform: translateY(-28px);
}

.cups-row.is-shuffling .cup-shell:nth-child(1) {
    animation: cup-shuffle-left 1.4s ease-in-out;
}

.cups-row.is-shuffling .cup-shell:nth-child(2) {
    animation: cup-shuffle-mid 1.4s ease-in-out;
}

.cups-row.is-shuffling .cup-shell:nth-child(3) {
    animation: cup-shuffle-right 1.4s ease-in-out;
}

.cups-ball {
    position: absolute;
    top: 90px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ff5b5b 70%);
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    transition: transform .38s ease;
}

.cups-ball[data-under="left"] { transform: translateX(-84px); }
.cups-ball[data-under="center"] { transform: translateX(0); }
.cups-ball[data-under="right"] { transform: translateX(84px); }

.cup-shell.is-winning .cup-body { box-shadow: 0 0 22px rgba(255, 214, 98, .24); }
.cup-shell.is-losing .cup-body { box-shadow: 0 0 18px rgba(255, 92, 92, .22); }

.fortune-stage {
    position: relative;
}

.fortune-pointer {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid #ffe7a0;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
    margin-bottom: -12px;
    z-index: 2;
}

.fortune-wheel {
    position: relative;
    width: 248px;
    height: 248px;
    border-radius: 50%;
    background:
        conic-gradient(#a72f52 0 45deg, #d19a2b 45deg 90deg, #178b73 90deg 135deg, #3f335a 135deg 180deg, #a72f52 180deg 225deg, #d19a2b 225deg 270deg, #178b73 270deg 315deg, #3f335a 315deg 360deg);
    border: 8px solid #f1d2a0;
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
    transition: transform 2.4s cubic-bezier(.12,.88,.18,1);
}

.fortune-segment {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    transform-origin: 0 0;
    transform: rotate(calc(var(--segment-index) * 45deg - 67.5deg)) translateY(-98px);
    color: #fff8eb;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.classic-stage {
    width: 100%;
    max-width: 320px;
    align-content: center;
}

.classic-lanes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.classic-portal {
    position: relative;
    height: 116px;
    display: grid;
    place-items: center;
}

.classic-portal__ring {
    width: 76px;
    height: 96px;
    border-radius: 999px 999px 20px 20px;
    border: 4px solid rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}

.classic-portal__core {
    position: absolute;
    width: 54px;
    height: 74px;
    border-radius: 999px 999px 14px 14px;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.5), rgba(89, 153, 255, .58) 55%, rgba(34, 70, 138, .84));
}

.classic-portal.is-selected .classic-portal__ring {
    box-shadow: 0 0 18px rgba(130, 187, 255, .18);
}

.classic-portal.is-winning .classic-portal__core {
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), rgba(88, 255, 173, .62) 55%, rgba(28, 116, 76, .84));
}

.classic-portal.is-losing .classic-portal__core {
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.3), rgba(255, 108, 108, .56) 55%, rgba(128, 36, 36, .84));
}

.classic-runner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #78e6ff 72%);
    box-shadow: 0 10px 18px rgba(0,0,0,.2);
    transform: translateX(0);
}

.classic-runner.is-running[data-lane="left"] { animation: classic-run-left 1.2s cubic-bezier(.18,.82,.22,1) forwards; }
.classic-runner.is-running[data-lane="center"] { animation: classic-run-center 1.2s cubic-bezier(.18,.82,.22,1) forwards; }
.classic-runner.is-running[data-lane="right"] { animation: classic-run-right 1.2s cubic-bezier(.18,.82,.22,1) forwards; }

@keyframes coinflip-flight {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    22% { transform: translate3d(0, -34px, 0) scale(1.01); }
    52% { transform: translate3d(0, -102px, 0) scale(1.03); }
    78% { transform: translate3d(0, -38px, 0) scale(1.01); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes coinflip-spin {
    0% { transform: rotateX(0turn) rotateY(0turn) rotateZ(0deg); }
    18% { transform: rotateX(calc(var(--coin-spin-x) * .18)) rotateY(calc(var(--coin-spin-y) * .24)) rotateZ(-5deg); }
    42% { transform: rotateX(calc(var(--coin-spin-x) * .46)) rotateY(calc(var(--coin-spin-y) * .52)) rotateZ(4deg); }
    68% { transform: rotateX(calc(var(--coin-spin-x) * .76)) rotateY(calc(var(--coin-spin-y) * .82)) rotateZ(-3deg); }
    88% { transform: rotateX(calc(var(--coin-spin-x) * .96)) rotateY(calc(var(--coin-spin-y) * .98)) rotateZ(1deg); }
    100% { transform: rotateX(var(--coin-spin-x)) rotateY(var(--coin-spin-y)) rotateZ(0deg); }
}

@keyframes coinflip-shadow {
    0% { transform: scale(1); opacity: .24; }
    24% { transform: scale(.8); opacity: .16; }
    52% { transform: scale(.54); opacity: .08; }
    80% { transform: scale(.76); opacity: .15; }
    100% { transform: scale(1); opacity: .24; }
}

@keyframes slot-card-pulse {
    0% {
        transform: scale(.96);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 10px 20px rgba(0,0,0,.18),
            0 0 0 0 rgba(122, 230, 255, .42);
    }
    55% {
        transform: scale(1.03);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 14px 26px rgba(0,0,0,.24),
            0 0 0 12px rgba(122, 230, 255, 0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slot-payline-glow {
    0%, 100% {
        opacity: .45;
        transform: scaleX(.92);
    }
    50% {
        opacity: .95;
        transform: scaleX(1.04);
    }
}

@keyframes cup-shuffle-left {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(94px); }
    60% { transform: translateX(48px); }
}

@keyframes cup-shuffle-mid {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateY(-8px); }
    60% { transform: translateX(-46px); }
}

@keyframes cup-shuffle-right {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-94px); }
    60% { transform: translateX(-44px); }
}

@keyframes classic-run-left {
    0% { transform: translate(0, 0) scale(1); }
    55% { transform: translate(-92px, -18px) scale(1.08); }
    100% { transform: translate(-92px, -96px) scale(.92); }
}

@keyframes classic-run-center {
    0% { transform: translate(0, 0) scale(1); }
    55% { transform: translate(0, -18px) scale(1.08); }
    100% { transform: translate(0, -96px) scale(.92); }
}

@keyframes classic-run-right {
    0% { transform: translate(0, 0) scale(1); }
    55% { transform: translate(92px, -18px) scale(1.08); }
    100% { transform: translate(92px, -96px) scale(.92); }
}

@font-face {
    font-family: "MineDropPixel";
    src: url("/static/minedrop/public/assets/fonts/minecraft.ttf") format("truetype");
    font-display: swap;
}

body.page--mine-drop {
    background:
        radial-gradient(circle at top, rgba(122, 18, 46, 0.28), transparent 30%),
        radial-gradient(circle at 50% 120%, rgba(37, 52, 29, 0.3), transparent 26%),
        linear-gradient(180deg, #09070a 0%, #050406 100%);
}

.page--mine-drop .mobile-app--mine-drop {
    background:
        radial-gradient(circle at top, rgba(72, 14, 30, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(16, 10, 14, 0.99), rgba(6, 4, 8, 1));
}

.page--mine-drop .game-hero,
.page--mine-drop #game-bet-panel,
.page--mine-drop #game-payout-panel,
.page--mine-drop #game-result-panel {
    display: none !important;
}

.page--mine-drop .page-content--game {
    padding-top: 6px;
}

.page--mine-drop .game-stage-panel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.page--mine-drop .game-stage-panel .section-header {
    display: none;
}

.page--mine-drop .app-topbar {
    border-bottom: 1px solid rgba(146, 41, 69, 0.18);
    background: linear-gradient(180deg, rgba(16, 10, 13, 0.92), rgba(16, 10, 13, 0));
}

.page--mine-drop .brand-mark,
.page--mine-drop .eyebrow {
    color: #f1e8df;
}

.page--mine-drop .ghost-chip,
.page--mine-drop .balance-badge,
.page--mine-drop .bottom-nav {
    background: rgba(18, 12, 15, 0.9);
    border-color: rgba(146, 41, 69, 0.2);
}

.page--mine-drop .bottom-nav-item.active {
    background: rgba(127, 35, 61, 0.24);
}

.page--mine-drop .mine-drop-shell {
    display: grid;
    gap: 10px;
}

.page--mine-drop .mine-drop-card {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(126, 38, 63, 0.34);
    background:
        linear-gradient(180deg, rgba(20, 13, 17, 0.98), rgba(8, 7, 10, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 10px, rgba(0, 0, 0, 0.02) 10px 20px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 44px rgba(0, 0, 0, 0.3);
}

.page--mine-drop .mine-drop-machine__header,
.page--mine-drop .mine-drop-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.page--mine-drop .mine-drop-title,
.page--mine-drop .mine-drop-controls__label,
.page--mine-drop .mine-drop-token__name,
.page--mine-drop .mine-drop-stat,
.page--mine-drop .mine-drop-spin-button,
.page--mine-drop .mine-drop-bet-button {
    font-family: "MineDropPixel", "Courier New", monospace;
}

.page--mine-drop .mine-drop-title {
    font-size: 1.02rem;
    color: #fff2e3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page--mine-drop .mine-drop-subtitle {
    margin-top: 4px;
    color: #bba6ae;
    font-size: 0.72rem;
    line-height: 1.35;
}

.page--mine-drop .mine-drop-pill--accent,
.page--mine-drop .mine-drop-stat {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(180, 140, 89, 0.22);
    background: linear-gradient(180deg, rgba(48, 23, 30, 0.94), rgba(22, 12, 16, 0.98));
    color: #f4e6cf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page--mine-drop .mine-drop-reel-frame {
    position: relative;
    margin-top: 12px;
    padding: 12px 20px;
    max-width: 336px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    border: 1px solid rgba(177, 132, 81, 0.28);
    background:
        linear-gradient(180deg, rgba(46, 24, 18, 0.92), rgba(24, 14, 13, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 34px rgba(0,0,0,0.24);
}

.page--mine-drop .mine-drop-reel-arrow {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    filter: drop-shadow(0 0 10px rgba(226, 189, 88, 0.18));
}

.page--mine-drop .mine-drop-reel-arrow--left {
    left: 10px;
    border-right: 14px solid #c89335;
    transform: translateY(-50%);
}

.page--mine-drop .mine-drop-reel-arrow--right {
    right: 10px;
    border-left: 14px solid #c89335;
    transform: translateY(-50%);
}

.page--mine-drop .mine-drop-reels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
}

.page--mine-drop .mine-drop-reel-slot {
    min-height: 164px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(169, 127, 79, 0.2);
    background:
        linear-gradient(180deg, rgba(26, 14, 14, 0.98), rgba(10, 8, 10, 0.98)),
        linear-gradient(90deg, rgba(106, 42, 54, 0.2), rgba(0, 0, 0, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -16px 24px rgba(0, 0, 0, 0.28);
}

.page--mine-drop .mine-drop-reel-window {
    height: 146px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(12, 10, 12, 0.9), rgba(18, 12, 12, 0.38));
}

.page--mine-drop .mine-drop-reel-window::after {
    left: 4px;
    right: 4px;
    bottom: 5px;
    height: 44px;
    top: auto;
    width: auto;
    border-radius: 12px;
    border: 1px solid rgba(202, 166, 103, 0.28);
    background: linear-gradient(180deg, rgba(126, 38, 63, 0.14), rgba(203, 160, 86, 0.05));
    box-shadow: 0 0 18px rgba(122, 20, 49, 0.18);
}

.page--mine-drop .mine-drop-reel-track {
    flex-direction: column;
    gap: 4px;
    padding: 1px 0 0 0;
}

.page--mine-drop .mine-drop-reel-slot.is-spinning .mine-drop-reel-track {
    filter: blur(0.8px) saturate(0.92);
}

.page--mine-drop .mine-drop-reel-layer .mine-drop-token {
    opacity: 0.42;
    transform: scale(0.88);
}

.page--mine-drop .mine-drop-reel-layer.is-selected .mine-drop-token {
    opacity: 1;
    transform: scale(1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(214, 177, 109, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.22);
}

.page--mine-drop .mine-drop-token {
    min-height: 44px;
    min-width: 0;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background:
        linear-gradient(180deg, rgba(42, 27, 33, 0.96), rgba(18, 10, 14, 0.98));
    overflow: hidden;
}

.page--mine-drop .mine-drop-token__art {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.page--mine-drop .mine-drop-token__asset {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.page--mine-drop .mine-drop-token__asset--pickaxe-wood { filter: sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(0.82); }
.page--mine-drop .mine-drop-token__asset--pickaxe-iron { filter: grayscale(1) brightness(1.3) contrast(1.05); }
.page--mine-drop .mine-drop-token__asset--pickaxe-diamond { filter: sepia(0.4) saturate(4.2) hue-rotate(118deg) brightness(1.08); }
.page--mine-drop .mine-drop-token__asset--ender { filter: hue-rotate(68deg) saturate(1.25) brightness(1.04); }

.page--mine-drop .mine-drop-token__name {
    display: block;
    font-size: 0.44rem;
    color: #f0e1c6;
    letter-spacing: 0.04em;
}

.page--mine-drop .mine-drop-token--wood { background: linear-gradient(180deg, #4e2e1d, #231410); }
.page--mine-drop .mine-drop-token--iron { background: linear-gradient(180deg, #373d4a, #171b22); }
.page--mine-drop .mine-drop-token--diamond { background: linear-gradient(180deg, #153841, #0a171d); }
.page--mine-drop .mine-drop-token--tnt {
    justify-content: center;
    gap: 0;
    padding: 5px 3px;
    border-color: rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, #c54b3b 0 22%, #923126 22% 32%, #f1ede2 32% 68%, #923126 68% 78%, #c54b3b 78% 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -2px 0 rgba(0,0,0,0.24);
}
.page--mine-drop .mine-drop-token--ender { background: linear-gradient(180deg, #24361d, #10170d); }

.page--mine-drop .mine-drop-token--tnt .mine-drop-token__art {
    display: none;
}

.page--mine-drop .mine-drop-token--tnt .mine-drop-token__name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 15px;
    padding: 0 2px;
    border-top: 1px solid rgba(0,0,0,0.14);
    border-bottom: 1px solid rgba(0,0,0,0.14);
    color: #2f1a12;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow: none;
}

.page--mine-drop .mine-drop-status,
.page--mine-drop .mine-drop-stake-readout {
    margin-top: 10px;
    min-height: 42px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    border: 1px solid rgba(137, 50, 73, 0.18);
    background: linear-gradient(180deg, rgba(22, 12, 16, 0.92), rgba(10, 8, 10, 0.96));
    color: #c9b6bd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.82rem;
}

.page--mine-drop .mine-drop-status,
.page--mine-drop .mine-drop-board-head {
    display: none !important;
}

.page--mine-drop .mine-drop-board-wrap {
    padding: 10px;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 8px;
    border: 4px solid #463327;
    background:
        linear-gradient(180deg, rgba(18, 21, 24, 0.76), rgba(8, 10, 12, 0.92)),
        url("/static/minedrop/public/assets/img/bg-mine.png") center/cover no-repeat;
    box-shadow:
        inset 0 0 0 2px #241911,
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page--mine-drop .mine-drop-board {
    gap: 4px;
    min-height: 0;
}

.page--mine-drop .mine-drop-cell {
    border-radius: 2px;
    border: 1px solid rgba(26, 18, 12, 0.52);
    background: #171310;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03),
        inset 0 -2px 0 rgba(0,0,0,0.24);
}

.page--mine-drop .mine-drop-cell__inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset -1px -1px 0 rgba(0,0,0,0.18);
}

.page--mine-drop .mine-drop-cell__badge {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: 0.44rem;
    color: #fff1c7;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.36);
}

.page--mine-drop .mine-drop-cell__ore {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.page--mine-drop .mine-drop-cell__inner--grass {
    background:
        linear-gradient(180deg, #7ed856 0 19%, #65b545 19% 28%, #b7895b 28% 48%, #8a6544 48% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 3px, rgba(0,0,0,0.02) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--dirt {
    background:
        linear-gradient(180deg, #c89b68 0%, #9a7147 56%, #7e5a38 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--stone {
    background:
        linear-gradient(180deg, #c8cbd1 0%, #a8adb5 52%, #8b9098 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--redstone {
    background:
        linear-gradient(180deg, #cfd1d6 0%, #a5aab2 52%, #8f959e 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--gold {
    background:
        linear-gradient(180deg, #f5db5b 0%, #d8b32f 55%, #b88f1f 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--diamond {
    background:
        linear-gradient(180deg, #93f1ff 0%, #5ad9ef 55%, #39b1c3 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--chest {
    background:
        linear-gradient(180deg, #b68042 0%, #8a5b28 54%, #70461d 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 3px, rgba(0,0,0,0.03) 3px 6px);
}

.page--mine-drop .mine-drop-cell__ore--dirt,
.page--mine-drop .mine-drop-cell__ore--grass {
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(102,69,39,0.32) 12% 26%, transparent 26% 48%, rgba(120,83,45,0.28) 48% 62%, transparent 62% 100%),
        linear-gradient(180deg, transparent 0 54%, rgba(92,63,34,0.22) 54% 72%, transparent 72% 100%);
}

.page--mine-drop .mine-drop-cell__ore--stone {
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(118,122,130,0.35) 16% 30%, transparent 30% 54%, rgba(146,149,156,0.32) 54% 68%, transparent 68% 100%),
        linear-gradient(180deg, transparent 0 34%, rgba(123,127,134,0.2) 34% 48%, transparent 48% 100%);
}

.page--mine-drop .mine-drop-cell__ore--redstone {
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(177,28,32,0.94) 16% 28%, transparent 28% 56%, rgba(177,28,32,0.9) 56% 70%, transparent 70% 100%),
        linear-gradient(180deg, transparent 0 24%, rgba(223,57,57,0.82) 24% 34%, transparent 34% 66%, rgba(223,57,57,0.76) 66% 76%, transparent 76% 100%);
}

.page--mine-drop .mine-drop-cell__ore--gold {
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(255,228,102,0.96) 14% 30%, transparent 30% 58%, rgba(255,228,102,0.9) 58% 74%, transparent 74% 100%),
        linear-gradient(180deg, transparent 0 28%, rgba(255,247,166,0.58) 28% 38%, transparent 38% 100%);
}

.page--mine-drop .mine-drop-cell__ore--diamond {
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(213,255,255,0.96) 16% 28%, transparent 28% 54%, rgba(172,245,255,0.9) 54% 68%, transparent 68% 100%),
        linear-gradient(180deg, transparent 0 26%, rgba(225,255,255,0.5) 26% 36%, transparent 36% 64%, rgba(168,245,255,0.44) 64% 74%, transparent 74% 100%);
}

.page--mine-drop .mine-drop-cell__ore--chest {
    background:
        linear-gradient(180deg, transparent 0 34%, rgba(63, 37, 12, 0.78) 34% 42%, transparent 42% 100%),
        linear-gradient(90deg, transparent 0 42%, rgba(225, 204, 120, 0.92) 42% 58%, transparent 58% 100%);
}

.page--mine-drop .mine-drop-controls__label {
    color: #e7d7bf;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page--mine-drop .mine-drop-control-bar {
    display: grid;
    grid-template-columns: 1fr 124px;
    gap: 10px;
    align-items: stretch;
    margin-top: 10px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.page--mine-drop .mine-drop-bet-grid {
    margin-top: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.page--mine-drop .mine-drop-bet-button,
.page--mine-drop .mine-drop-spin-button {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid rgba(109, 75, 49, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -4px 0 rgba(0, 0, 0, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page--mine-drop .mine-drop-bet-button {
    background: linear-gradient(180deg, #36373b, #1a1b1f);
    color: #efe6d3;
}

.page--mine-drop .mine-drop-bet-button.is-active {
    background: linear-gradient(180deg, #7f213d, #42111e);
    color: #fff1dd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 0 rgba(0, 0, 0, 0.28),
        0 0 18px rgba(127, 33, 61, 0.24);
}

.page--mine-drop .mine-drop-spin-button {
    background: linear-gradient(180deg, #526b39, #24321b);
    color: #f1f6df;
}

.page--mine-drop .mine-drop-spin-button:hover,
.page--mine-drop .mine-drop-bet-button:hover {
    filter: brightness(1.06);
}

.page--mine-drop .mine-drop-token--fall {
    max-width: 54px;
    min-height: 48px;
    animation: mine-drop-fall-impact .74s cubic-bezier(.18,.82,.24,1) forwards;
}

.page--mine-drop .mine-drop-token--strike {
    position: absolute;
    z-index: 6;
    max-width: 52px;
    min-height: 46px;
    pointer-events: none;
    transform-origin: 50% 82%;
    animation: mine-drop-pickaxe-strike .42s cubic-bezier(.2,.78,.24,1) forwards;
}

.page--mine-drop .mine-drop-float {
    font-family: "MineDropPixel", "Courier New", monospace;
    font-size: 0.9rem;
    color: #f7d169;
}

.page--mine-drop .mine-drop-cell.is-impact {
    animation: mine-drop-impact .28s ease-out;
}

.page--mine-drop .mine-drop-cell.is-impact::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 5px;
    border: 2px solid rgba(255, 237, 183, 0.55);
    box-shadow: 0 0 18px rgba(255, 210, 105, 0.28);
    pointer-events: none;
}

@keyframes mine-drop-fall-impact {
    0% {
        transform: translate3d(0, 0, 0) scale(.88) rotate(var(--drop-rotate-start, 0deg));
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    46% {
        transform: translate3d(calc(var(--drop-x) * .52), calc(var(--drop-y) * .44), 0) scale(.98) rotate(var(--drop-rotate-mid, 0deg));
        opacity: 1;
    }
    74% {
        transform: translate3d(calc(var(--drop-x) * .92), calc(var(--drop-y) - 8px), 0) scale(1.01) rotate(var(--drop-rotate-end, 0deg));
        opacity: 1;
    }
    86% {
        transform: translate3d(var(--drop-x), calc(var(--drop-y) - 15px), 0) scale(.96) rotate(calc(var(--drop-rotate-end, 0deg) * -0.3));
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--drop-x), var(--drop-y), 0) scale(.9) rotate(0deg);
        opacity: 0;
    }
}

@keyframes mine-drop-impact {
    0% { transform: scale(1); }
    35% { transform: scale(.9); }
    70% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes mine-drop-pickaxe-strike {
    0% {
        transform: translate3d(0, -2px, 0) rotate(var(--strike-tilt-right, 18deg)) scale(.92);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    34% {
        transform: translate3d(7px, 15px, 0) rotate(var(--strike-tilt-left, -16deg)) scale(1);
        opacity: 1;
    }
    56% {
        transform: translate3d(-2px, var(--strike-bounce, -18px), 0) rotate(calc(var(--strike-tilt-right, 18deg) * .42)) scale(.98);
        opacity: 1;
    }
    78% {
        transform: translate3d(5px, 9px, 0) rotate(calc(var(--strike-tilt-left, -16deg) * .75)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 15px, 0) rotate(calc(var(--strike-tilt-right, 18deg) * .25)) scale(.92);
        opacity: 0;
    }
}

@media (max-width: 390px) {
    .page--mine-drop .mine-drop-reel-frame {
        padding-left: 24px;
        padding-right: 24px;
    }

    .page--mine-drop .mine-drop-control-bar {
        grid-template-columns: 1fr;
    }

    .page--mine-drop .mine-drop-bet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.games-grid .catalog-card {
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .28),
        0 6px 18px rgba(255, 255, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.games-grid .catalog-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 21px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -18px 28px rgba(255, 255, 255, .04),
        inset 14px 0 22px rgba(255, 255, 255, .03),
        inset -14px 0 22px rgba(255, 255, 255, .02);
    background:
        linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 9%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 34%),
        linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,0) 42%),
        linear-gradient(225deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 36%);
    opacity: 1;
}

.games-grid .catalog-card::after {
    opacity: 1;
    background:
        radial-gradient(120% 75% at 50% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,0) 56%),
        linear-gradient(135deg, rgba(255,255,255,.12), transparent 44%);
}

.games-grid .catalog-card {
    --card-glow: rgba(255, 255, 255, .08);
    --card-glow-strong: rgba(255, 255, 255, .14);
}

.games-grid .catalog-card.catalog-card--violet {
    --card-glow: rgba(101, 126, 255, .16);
    --card-glow-strong: rgba(126, 145, 255, .24);
}

.games-grid .catalog-card.catalog-card--cyan {
    --card-glow: rgba(87, 214, 255, .16);
    --card-glow-strong: rgba(116, 224, 255, .24);
}

.games-grid .catalog-card.catalog-card--pink {
    --card-glow: rgba(255, 129, 176, .16);
    --card-glow-strong: rgba(255, 153, 194, .24);
}

.games-grid .catalog-card.catalog-card--emerald {
    --card-glow: rgba(86, 227, 147, .15);
    --card-glow-strong: rgba(111, 239, 165, .24);
}

.games-grid .catalog-card.catalog-card--orange {
    --card-glow: rgba(255, 170, 80, .16);
    --card-glow-strong: rgba(255, 187, 108, .24);
}

.games-grid .catalog-card.catalog-card--amber {
    --card-glow: rgba(255, 203, 92, .16);
    --card-glow-strong: rgba(255, 216, 124, .24);
}

.games-grid .catalog-card.catalog-card--gold {
    --card-glow: rgba(233, 188, 91, .16);
    --card-glow-strong: rgba(242, 202, 115, .24);
}

.games-grid .catalog-card.catalog-card--steel {
    --card-glow: rgba(159, 179, 214, .14);
    --card-glow-strong: rgba(184, 201, 230, .22);
}

.games-grid .catalog-card::selection {
    background: transparent;
}

.games-grid .catalog-card {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .28),
        0 14px 34px var(--card-glow),
        0 6px 18px rgba(255, 255, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.games-grid .catalog-card:hover::before {
    border-color: rgba(255, 255, 255, .38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -18px 28px rgba(255,255,255,.06),
        inset 16px 0 26px rgba(255,255,255,.04),
        inset -16px 0 26px rgba(255,255,255,.03),
        0 0 24px rgba(255,255,255,.11);
}

.games-grid .catalog-card:hover::after {
    opacity: 1;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 58%),
        linear-gradient(135deg, rgba(255,255,255,.16), transparent 44%);
}

.games-grid .catalog-card:hover {
    box-shadow:
        0 22px 48px rgba(0, 0, 0, .3),
        0 18px 38px var(--card-glow-strong),
        0 8px 20px rgba(255, 255, 255, .08),
        inset 0 1px 0 rgba(255,255,255,.32),
        inset 0 -1px 0 rgba(255,255,255,.1);
}

.games-grid .catalog-card .catalog-card-overlay {
    border-radius: inherit;
}

.games-grid .catalog-card .catalog-card-footer,
.games-grid .catalog-card .catalog-card-mines-shell {
    position: relative;
    z-index: 2;
}

.page--mine-drop .mine-drop-cell__reward-tag {
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(12, 12, 12, .42);
    color: #fff1a8;
    font-size: 0.42rem;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.page--mine-drop .mine-drop-cell__void {
    background: transparent !important;
    box-shadow: none !important;
}

.page--mine-drop .mine-drop-cell__inner--grass {
    background:
        linear-gradient(180deg, #82d95c 0 16%, #5ea941 16% 26%, #a77b51 26% 58%, #7d5837 58% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 4px, rgba(0,0,0,.04) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--dirt {
    background:
        linear-gradient(180deg, #b98b5f 0%, #8d633f 58%, #704d31 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, rgba(0,0,0,.04) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-light {
    background:
        linear-gradient(180deg, #cfd1d5 0%, #aaadb3 54%, #888d95 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, rgba(0,0,0,.04) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-dark {
    background:
        linear-gradient(180deg, #7f868f 0%, #596069 55%, #3d4249 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.06) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-gold,
.page--mine-drop .mine-drop-cell__inner--ore-gold {
    background:
        linear-gradient(180deg, #878e96 0%, #616872 54%, #434a52 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.06) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-diamond,
.page--mine-drop .mine-drop-cell__inner--ore-diamond {
    background:
        linear-gradient(180deg, #8f98a1 0%, #636b75 54%, #424a54 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.06) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--ore-emerald {
    background:
        linear-gradient(180deg, #75816f 0%, #52614e 54%, #313e31 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.06) 4px 8px);
}

.page--mine-drop .mine-drop-cell__ore--grass,
.page--mine-drop .mine-drop-cell__ore--dirt {
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(85,58,37,.34) 12% 26%, transparent 26% 46%, rgba(118,80,46,.25) 46% 62%, transparent 62% 100%),
        linear-gradient(180deg, transparent 0 54%, rgba(79,53,31,.24) 54% 72%, transparent 72% 100%);
}

.page--mine-drop .mine-drop-cell__ore--stone-light,
.page--mine-drop .mine-drop-cell__ore--stone-dark {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(224,227,232,.12) 18% 26%, transparent 26% 46%, rgba(31,34,39,.18) 46% 58%, transparent 58% 100%),
        linear-gradient(180deg, transparent 0 28%, rgba(255,255,255,.08) 28% 34%, transparent 34% 100%);
}

.page--mine-drop .mine-drop-cell__ore--stone-gold,
.page--mine-drop .mine-drop-cell__ore--ore-gold {
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(255,225,102,.96) 10% 22%, transparent 22% 38%, rgba(255,240,164,.84) 38% 48%, transparent 48% 64%, rgba(232,185,52,.96) 64% 78%, transparent 78% 100%),
        linear-gradient(180deg, transparent 0 26%, rgba(255,248,186,.5) 26% 38%, transparent 38% 62%, rgba(204,148,31,.34) 62% 74%, transparent 74% 100%);
}

.page--mine-drop .mine-drop-cell__ore--stone-diamond,
.page--mine-drop .mine-drop-cell__ore--ore-diamond {
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(226,255,255,.98) 14% 24%, transparent 24% 42%, rgba(152,245,255,.92) 42% 54%, transparent 54% 70%, rgba(205,252,255,.96) 70% 82%, transparent 82% 100%),
        linear-gradient(180deg, transparent 0 24%, rgba(236,255,255,.44) 24% 34%, transparent 34% 60%, rgba(121,224,236,.38) 60% 72%, transparent 72% 100%);
}

.page--mine-drop .mine-drop-cell__ore--ore-emerald {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(126,255,176,.95) 18% 30%, transparent 30% 48%, rgba(74,216,132,.9) 48% 62%, transparent 62% 76%, rgba(161,255,198,.92) 76% 88%, transparent 88% 100%),
        linear-gradient(180deg, transparent 0 26%, rgba(211,255,223,.32) 26% 36%, transparent 36% 62%, rgba(47,165,94,.34) 62% 74%, transparent 74% 100%);
}

.page--mine-drop .mine-drop-token__art--tnt {
    display: grid;
    place-items: center;
    border-radius: 7px;
    background:
        linear-gradient(180deg, #f66b54 0 22%, #f2eee7 22% 72%, #b7392f 72% 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -2px 0 rgba(0,0,0,.18);
}

.page--mine-drop .mine-drop-token__tnt-word {
    color: #34120f;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.page--mine-drop .mine-drop-token__art--ender {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 35%, rgba(216,255,222,.55), rgba(55,101,62,.14) 58%, transparent 60%);
}

.page--mine-drop .mine-drop-token__ender-core,
.page--mine-drop .mine-drop-projectile__pearl-core {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 32%, #f3ffe8 0 18%, #89f0a8 28%, #35af61 62%, #165c32 100%);
    box-shadow:
        0 0 10px rgba(123,255,166,.28),
        inset -2px -2px 0 rgba(0,0,0,.18);
}

.page--mine-drop .mine-drop-token--projectile {
    width: 42px;
    height: 42px;
    min-height: 42px;
    max-width: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.page--mine-drop .mine-drop-token--projectile .mine-drop-token__name {
    display: none;
}

.page--mine-drop .mine-drop-projectile {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.22));
}

.page--mine-drop .mine-drop-projectile--pickaxe-wood { filter: sepia(1) saturate(2.6) hue-rotate(-8deg) brightness(.8) drop-shadow(0 8px 8px rgba(0,0,0,.22)); }
.page--mine-drop .mine-drop-projectile--pickaxe-iron { filter: grayscale(1) brightness(1.28) contrast(1.08) drop-shadow(0 8px 8px rgba(0,0,0,.22)); }
.page--mine-drop .mine-drop-projectile--pickaxe-diamond { filter: sepia(.35) saturate(4.2) hue-rotate(118deg) brightness(1.08) drop-shadow(0 8px 8px rgba(0,0,0,.22)); }

.page--mine-drop .mine-drop-projectile--tnt {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transform: translateY(-6px);
    transform-origin: 50% 100%;
}

.page--mine-drop .mine-drop-projectile--tnt,
.page--mine-drop .mine-drop-projectile--ender {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
}

.page--mine-drop .mine-drop-projectile--tnt {
    border-radius: 8px;
    background:
        linear-gradient(180deg, #f9624d 0 24%, #eee8e2 24% 74%, #b9362c 74% 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 10px 12px rgba(0,0,0,.16);
}

.page--mine-drop .mine-drop-projectile--tnt span {
    color: #34120f;
    font-family: "MineDropPixel", "Courier New", monospace;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
}

.page--mine-drop .mine-drop-projectile--ender {
    background: radial-gradient(circle at 34% 34%, rgba(218,255,230,.45), rgba(62,124,80,.16) 55%, transparent 58%);
}

.page--mine-drop .mine-drop-particle {
    position: absolute;
    width: var(--particle-size, 8px);
    height: var(--particle-size, 8px);
    border-radius: 2px;
    pointer-events: none;
    z-index: 7;
    animation: mine-drop-particle-burst .58s ease-out forwards;
    animation-delay: var(--particle-delay, 0ms);
    box-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.page--mine-drop .mine-drop-particle--grass,
.page--mine-drop .mine-drop-particle--dirt {
    background: linear-gradient(180deg, #c79a63, #7e5939);
}

.page--mine-drop .mine-drop-particle--stone-light,
.page--mine-drop .mine-drop-particle--stone-dark {
    background: linear-gradient(180deg, #b8bcc3, #575d66);
}

.page--mine-drop .mine-drop-particle--stone-gold,
.page--mine-drop .mine-drop-particle--ore-gold {
    background: linear-gradient(180deg, #f9e26d, #b98d1d);
}

.page--mine-drop .mine-drop-particle--stone-diamond,
.page--mine-drop .mine-drop-particle--ore-diamond {
    background: linear-gradient(180deg, #cbfeff, #4fc8dd);
}

.page--mine-drop .mine-drop-particle--ore-emerald {
    background: linear-gradient(180deg, #c9ffd9, #34ad66);
}

@keyframes mine-drop-fall-impact {
    0% {
        transform: translate3d(0, 0, 0) scale(.82) rotate(var(--drop-rotate-start, -80deg));
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    52% {
        transform: translate3d(calc(var(--drop-x) * .58), calc(var(--drop-y) * .52), 0) scale(1) rotate(var(--drop-rotate-mid, 240deg));
        opacity: 1;
    }
    82% {
        transform: translate3d(var(--drop-x), calc(var(--drop-y) - 12px), 0) scale(.98) rotate(var(--drop-rotate-end, 360deg));
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--drop-x), calc(var(--drop-y) + 2px), 0) scale(.92) rotate(calc(var(--drop-rotate-end, 360deg) + 40deg));
        opacity: 0;
    }
}

@keyframes mine-drop-pickaxe-strike {
    0% {
        transform: translate3d(0, -10px, 0) rotate(var(--strike-tilt-right, -120deg)) scale(.9);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    48% {
        transform: translate3d(6px, 18px, 0) rotate(var(--strike-tilt-left, 360deg)) scale(1);
        opacity: 1;
    }
    68% {
        transform: translate3d(-1px, var(--strike-bounce, -18px), 0) rotate(var(--strike-tilt-end, -240deg)) scale(.98);
        opacity: 1;
    }
    100% {
        transform: translate3d(2px, 12px, 0) rotate(calc(var(--strike-tilt-end, -240deg) - 90deg)) scale(.94);
        opacity: 0;
    }
}

@keyframes mine-drop-particle-burst {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(.85);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--particle-x), var(--particle-y), 0) rotate(var(--particle-rotate)) scale(.35);
        opacity: 0;
    }
}

.page--mine-drop .mine-drop-reel-frame {
    --mine-drop-reel-gap: 4px;
    --mine-drop-reel-layer-size: 48px;
    padding: 10px 8px 8px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(96, 103, 112, .26), rgba(47, 52, 60, .2));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 10px 18px rgba(0,0,0,.14);
}

.page--mine-drop .mine-drop-reels {
    gap: 4px;
    align-items: stretch;
}

.page--mine-drop .mine-drop-reel-slot {
    height: calc((var(--mine-drop-reel-layer-size) * 3) + (var(--mine-drop-reel-gap) * 2) + 12px);
    min-height: calc((var(--mine-drop-reel-layer-size) * 3) + (var(--mine-drop-reel-gap) * 2) + 12px);
    padding: 1px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(68, 73, 80, .48), rgba(38, 42, 48, .44));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    box-sizing: border-box;
}

.page--mine-drop .mine-drop-reel-slot::before,
.page--mine-drop .mine-drop-reel-slot::after {
    display: none;
}

.page--mine-drop .mine-drop-reel-window {
    height: calc((var(--mine-drop-reel-layer-size) * 3) + (var(--mine-drop-reel-gap) * 2));
    padding: 0;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.page--mine-drop .mine-drop-reel-window::after {
    inset: auto 1px 2px;
    height: var(--mine-drop-reel-layer-size);
    border-radius: 6px;
    border: 1px solid rgba(214, 221, 232, .34);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 10px rgba(185,196,214,.1);
}

.page--mine-drop .mine-drop-reel-track {
    display: flex;
    flex-direction: column;
    gap: var(--mine-drop-reel-gap);
    will-change: transform;
}

.page--mine-drop .mine-drop-reel-layer {
    min-height: var(--mine-drop-reel-layer-size);
    height: var(--mine-drop-reel-layer-size);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.04);
    background:
        linear-gradient(180deg, rgba(109, 116, 126, .82), rgba(63, 69, 77, .9)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 4px, rgba(0,0,0,.03) 4px 8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.page--mine-drop .mine-drop-reel-layer .mine-drop-token,
.page--mine-drop .mine-drop-reel-layer.is-selected .mine-drop-token {
    background: transparent;
    border: 0;
    box-shadow: none;
    width: 100%;
    min-height: 100%;
    padding: 2px 0 0;
    justify-content: center;
    overflow: hidden;
}

.page--mine-drop .mine-drop-reel-layer .mine-drop-token__art {
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.page--mine-drop .mine-drop-reel-layer .mine-drop-token__name {
    margin-top: 2px;
    max-width: 100%;
    padding: 0 2px;
    overflow: hidden;
    font-size: 0.4rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: clip;
    color: #eef2f7;
    opacity: .9;
}

.page--mine-drop .mine-drop-token--projectile {
    width: 50px;
    height: 50px;
    min-height: 50px;
    max-width: 50px;
    position: absolute;
    z-index: 7;
    pointer-events: none;
    animation: none !important;
}

.page--mine-drop .mine-drop-projectile--tool {
    position: relative;
    width: 50px;
    height: 50px;
}

.page--mine-drop .mine-drop-projectile--pickaxe {
    width: 50px;
    height: 50px;
}

.page--mine-drop .mine-drop-projectile__durability {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 6px;
    padding: 1px;
    border-radius: 999px;
    background: rgba(7, 8, 9, .75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.page--mine-drop .mine-drop-projectile__durability > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef5f50, #f7d15f 54%, #6be17f);
}

.page--mine-drop .mine-drop-token--fall {
    animation: none !important;
}

.page--mine-drop .mine-drop-token--strike {
    width: 50px;
    height: 50px;
    max-width: 50px;
    min-height: 50px;
    animation: none !important;
}

.page--mine-drop .mine-drop-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.page--mine-drop .mine-drop-cell__inner--chest {
    background:
        linear-gradient(180deg, #b98343 0 22%, #8c5b2b 22% 58%, #6d451f 58% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 4px, rgba(0,0,0,.03) 4px 8px);
}

.page--mine-drop .mine-drop-cell__ore--chest {
    background:
        linear-gradient(180deg, transparent 0 34%, rgba(55,33,15,.82) 34% 44%, transparent 44% 100%),
        linear-gradient(90deg, transparent 0 44%, rgba(228,206,114,.96) 44% 56%, transparent 56% 100%);
}

.page--mine-drop .mine-drop-cell__badge {
    bottom: 16px;
}

.page--mine-drop .mine-drop-cell__reward-tag {
    top: auto;
    bottom: 4px;
    right: 4px;
}

.page--mine-drop .mine-drop-token__asset,
.page--mine-drop .mine-drop-projectile--pickaxe,
.page--mine-drop .mine-drop-projectile img {
    image-rendering: pixelated;
    filter: none !important;
}

.page--mine-drop .mine-drop-token--goldpick,
.page--mine-drop .mine-drop-token--bonus {
    background: linear-gradient(180deg, rgba(33, 19, 18, 0.96), rgba(13, 8, 10, 0.98));
}

.page--mine-drop .mine-drop-board {
    position: relative;
    z-index: 2;
    gap: 0;
    align-items: stretch;
    justify-items: stretch;
    background: transparent;
}

.page--mine-drop .mine-drop-fx--under {
    z-index: 3;
}

.page--mine-drop .mine-drop-fx--over {
    z-index: 5;
}

.page--mine-drop .mine-drop-cell {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: 2;
    overflow: hidden;
}

.page--mine-drop .mine-drop-cell__inner,
.page--mine-drop .mine-drop-cell__void {
    display: block;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    z-index: 1;
}

.page--mine-drop .mine-drop-cell__block-image {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    image-rendering: pixelated;
    z-index: 1;
}

.page--mine-drop .mine-drop-cell__block-image--emerald {
    filter: hue-rotate(88deg) saturate(5.2) brightness(1.02) contrast(1.16) drop-shadow(0 0 5px rgba(92, 220, 138, .26));
}

.page--mine-drop .mine-drop-cell__crack-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: .92;
    pointer-events: none;
    z-index: 1;
}

.page--mine-drop .mine-drop-cell__badge {
    bottom: 12px;
    z-index: 2;
}

.page--mine-drop .mine-drop-cell__reward-tag {
    z-index: 2;
    background: rgba(12, 12, 12, .58);
}

.page--mine-drop .mine-drop-token--projectile,
.page--mine-drop .mine-drop-projectile--tool {
    width: 40px;
    height: 40px;
    min-height: 40px;
    max-width: 40px;
}

.page--mine-drop .mine-drop-token--projectile {
    will-change: left, top, transform;
    z-index: 1;
}

.page--mine-drop .mine-drop-projectile--pickaxe,
.page--mine-drop .mine-drop-projectile {
    width: 40px;
    height: 40px;
}

.page--mine-drop .mine-drop-projectile__durability {
    left: auto;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.page--mine-drop .mine-drop-projectile__durability img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.page--mine-drop .mine-drop-shell {
    position: relative;
    isolation: isolate;
    padding-top: 18px;
}

.page--mine-drop .mine-drop-shell::before,
.page--mine-drop .mine-drop-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page--mine-drop .mine-drop-shell::before {
    inset: -24px -24px 0;
    height: auto;
    background:
        linear-gradient(180deg, rgba(15, 10, 12, .18), rgba(15, 10, 12, .38)),
        url("/static/minedrop/cf54d19c-bccc-4514-aa90-795ac11743a9.png") center center / cover no-repeat,
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .18), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(255, 230, 165, .16), transparent 26%),
        linear-gradient(180deg, rgba(191, 228, 255, .34), rgba(191, 228, 255, .08) 48%, rgba(191, 228, 255, 0));
    opacity: .96;
}

.page--mine-drop .mine-drop-shell::after {
    inset: auto -18px -14px;
    height: 210px;
    display: none;
    background: transparent;
    opacity: 0;
}

.page--mine-drop .mine-drop-shell > * {
    position: relative;
    z-index: 2;
}

.page--mine-drop .mine-drop-card {
    position: relative;
    z-index: 2;
    backdrop-filter: blur(2px);
    border-color: rgba(82, 72, 49, .24);
    background:
        linear-gradient(180deg, rgba(22, 32, 30, .34), rgba(8, 11, 13, .22)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 10px, rgba(0,0,0,.015) 10px 20px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 32px rgba(0,0,0,.18);
}

.page--mine-drop .mine-drop-atmosphere {
    position: absolute;
    inset: -18px -12px auto;
    height: 360px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page--mine-drop .mine-drop-atmosphere::before,
.page--mine-drop .mine-drop-atmosphere::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    pointer-events: none;
    display: none;
}

.page--mine-drop .mine-drop-cloud {
    position: absolute;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
    opacity: .72;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.12));
    animation: mine-drop-cloud-drift linear infinite;
}

.page--mine-drop .mine-drop-cloud--1 {
    top: 16px;
    left: -12%;
    width: 122px;
    height: 52px;
    background-image: url('/static/minedrop_ref/cloud1.png');
    animation-duration: 34s;
}

.page--mine-drop .mine-drop-cloud--2 {
    top: 72px;
    left: 60%;
    width: 102px;
    height: 42px;
    background-image: url('/static/minedrop_ref/cloud2.png');
    animation-duration: 28s;
    animation-direction: reverse;
}

.page--mine-drop .mine-drop-cloud--3 {
    top: 124px;
    left: 4%;
    width: 146px;
    height: 60px;
    background-image: url('/static/minedrop_ref/cloud3.png');
    animation-duration: 40s;
}

.page--mine-drop .mine-drop-cloud--4 {
    top: 38px;
    left: 34%;
    width: 108px;
    height: 42px;
    background-image: url('/static/minedrop_ref/cloud4.png');
    animation-duration: 30s;
    animation-direction: reverse;
}

.page--mine-drop .mine-drop-cloud--5 {
    top: 154px;
    left: 68%;
    width: 128px;
    height: 54px;
    background-image: url('/static/minedrop_ref/cloud5.png');
    animation-duration: 44s;
}

.page--mine-drop .mine-drop-ghast {
    position: absolute;
    display: block;
    width: 54px;
    height: 54px;
    background: url('/static/minedrop_ref/ghost.png') center / contain no-repeat;
    image-rendering: pixelated;
    opacity: .72;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.14));
    animation: mine-drop-ghast-float ease-in-out infinite;
}

.page--mine-drop .mine-drop-ghast--1 {
    top: 86px;
    left: 18%;
    animation-duration: 7.2s;
}

.page--mine-drop .mine-drop-ghast--2 {
    top: 44px;
    left: 74%;
    width: 46px;
    height: 46px;
    opacity: .58;
    animation-duration: 9.4s;
    animation-delay: -1.8s;
}

.page--mine-drop .mine-drop-atmosphere,
.page--mine-drop .mine-drop-cloud,
.page--mine-drop .mine-drop-ghast {
    display: none !important;
}

.page--mine-drop .mine-drop-token--tnt .mine-drop-token__art {
    display: grid;
    width: 28px;
    height: 28px;
}

.page--mine-drop .mine-drop-token--tnt .mine-drop-token__name {
    min-height: auto;
    padding: 0;
    border: 0;
    color: #f9e2b7;
    letter-spacing: 0.08em;
    background: transparent;
}

.page--mine-drop .mine-drop-token__asset--tnt {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page--mine-drop .mine-drop-reel-slot.is-spinning .mine-drop-reel-track {
    filter: blur(.55px) saturate(.98);
}

.page--mine-drop .mine-drop-reel-layer {
    transition: transform .2s ease, filter .2s ease;
}

body.page--mine-drop {
    background:
        linear-gradient(180deg, rgba(210, 236, 255, .48), rgba(210, 236, 255, .18) 24%, rgba(210, 236, 255, .04) 40%, rgba(17, 30, 25, .08) 100%),
        linear-gradient(180deg, rgba(245, 252, 255, .18), rgba(245, 252, 255, 0) 32%),
        url('/static/minedrop_ref/bg.png') center top / cover no-repeat !important;
}

.page--mine-drop .mobile-app--mine-drop {
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 26%, rgba(0,0,0,.02)),
        transparent !important;
}

.page--mine-drop .page-content--game {
    position: relative;
    background: transparent;
    overflow: visible;
}

.page--mine-drop .page-content--game::before,
.page--mine-drop .page-content--game::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.page--mine-drop .page-content--game::before {
    display: none;
    background: transparent;
    opacity: 0;
}

.page--mine-drop .page-content--game::after {
    display: none;
    background: transparent;
    opacity: 0;
}

.page--mine-drop .mine-drop-board-wrap {
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
        rgba(255,255,255,.04);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.1),
        0 10px 18px rgba(0,0,0,.1);
    overflow: visible;
}

.page--mine-drop .mine-drop-cell__inner--ore-emerald {
    background:
        linear-gradient(180deg, #98f0ac 0%, #41bb69 52%, #1d7f49 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, rgba(0,0,0,.05) 4px 8px);
}

.page--mine-drop .mine-drop-cell__ore--ore-emerald {
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(232,255,238,.94) 10% 22%, transparent 22% 40%, rgba(118,255,163,.98) 40% 58%, transparent 58% 74%, rgba(42,196,96,.94) 74% 88%, transparent 88% 100%),
        linear-gradient(180deg, transparent 0 22%, rgba(232,255,238,.42) 22% 34%, transparent 34% 58%, rgba(28,150,77,.4) 58% 72%, transparent 72% 100%);
}

.page--mine-drop .mine-drop-cell--grass .mine-drop-cell__block-image {
    inset: -2px -5px -1px;
    width: calc(100% + 10px);
}

.page--mine-drop .mine-drop-board .mine-drop-cell.is-covered-from-top .mine-drop-cell__block-image {
    transform: translateY(-12px);
    height: calc(100% + 14px);
}

.page--mine-drop .mine-drop-board .mine-drop-cell.is-covered-from-top .mine-drop-cell__crack-image {
    transform: translateY(-12px);
    height: calc(100% + 14px);
}

.page--mine-drop .mine-drop-card {
    border-color: rgba(255,255,255,.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
        rgba(27, 46, 38, .08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 12px 24px rgba(0,0,0,.08);
}

.page--mine-drop .mine-drop-controls {
    display: block;
    position: relative;
    z-index: 5;
    visibility: visible;
    opacity: 1;
}

.page--mine-drop .mine-drop-control-bar {
    display: grid;
    grid-template-columns: 1fr 124px;
    gap: 10px;
    align-items: stretch;
    max-width: 320px;
    margin: 10px auto 0;
    position: relative;
    z-index: 5;
    visibility: visible;
    opacity: 1;
}

.page--mine-drop .mine-drop-bet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    visibility: visible;
    opacity: 1;
}

.page--mine-drop .mine-drop-controls__label,
.page--mine-drop .mine-drop-stake-readout,
.page--mine-drop .mine-drop-bet-button,
.page--mine-drop .mine-drop-spin-button {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
}

.page--mine-drop .mine-drop-controls__label,
.page--mine-drop .mine-drop-stake-readout {
    width: 100%;
}

.page--mine-drop .mine-drop-spin-button {
    position: relative;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: linear-gradient(180deg, #5f8f3d, #2f4d1f);
    color: #f8ffeb;
    border: 1px solid rgba(41, 70, 25, .7);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -3px 0 rgba(0,0,0,.22),
        0 6px 14px rgba(38, 74, 24, .18);
}

.page--mine-drop .game-stage-panel,
.page--mine-drop .game-stage,
.page--mine-drop #game-stage,
.page--mine-drop .mine-drop-shell,
.page--mine-drop .mine-drop-machine,
.page--mine-drop .mine-drop-board-card,
.page--mine-drop .mine-drop-controls {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.page--mine-drop .game-stage,
.page--mine-drop #game-stage {
    display: block !important;
}

.page--mine-drop .mine-drop-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-bottom: 18px !important;
}

.page--mine-drop .mine-drop-machine,
.page--mine-drop .mine-drop-board-card,
.page--mine-drop .mine-drop-controls {
    display: block !important;
    position: relative !important;
}

.page--mine-drop .mine-drop-controls {
    margin-top: 0 !important;
}

.page--mine-drop .mine-drop-cell__inner--grass {
    background:
        linear-gradient(180deg, #4e8e35 0 12%, #38692a 12% 24%, #6d5238 24% 56%, #4e3827 56% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 4px, rgba(0,0,0,.08) 4px 8px),
        repeating-linear-gradient(180deg, rgba(0,0,0,.02) 0 3px, rgba(255,255,255,.015) 3px 6px);
}

.page--mine-drop .mine-drop-cell__inner--dirt {
    background:
        linear-gradient(180deg, #846242 0%, #61462f 58%, #453221 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.08) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-light {
    background:
        linear-gradient(180deg, #9ea2a8 0%, #747980 54%, #565b63 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.08) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-dark {
    background:
        linear-gradient(180deg, #5b6169 0%, #42474f 55%, #2a2f35 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 4px, rgba(0,0,0,.1) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-gold,
.page--mine-drop .mine-drop-cell__inner--ore-gold {
    background:
        linear-gradient(180deg, #636971 0%, #484f57 52%, #31363d 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 4px, rgba(0,0,0,.1) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--stone-diamond,
.page--mine-drop .mine-drop-cell__inner--ore-diamond {
    background:
        linear-gradient(180deg, #646b74 0%, #464d55 52%, #2f353c 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 4px, rgba(0,0,0,.1) 4px 8px);
}

.page--mine-drop .mine-drop-cell__inner--ore-emerald {
    background:
        linear-gradient(180deg, #4ca964 0%, #2f7e49 52%, #1d5130 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, rgba(0,0,0,.08) 4px 8px);
}

.page--mine-drop .mine-drop-cell__void {
    background: transparent;
}

@keyframes mine-drop-cloud-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(14px, -6px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mine-drop-ghast-float {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(8px, -10px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 480px) {
    .page--mine-drop .mine-drop-shell {
        padding-top: 12px;
    }

    .page--mine-drop .mine-drop-atmosphere {
        inset: -10px -8px auto;
        height: 280px;
    }

    .page--mine-drop .mine-drop-cloud--1 {
        width: 92px;
        height: 38px;
    }

    .page--mine-drop .mine-drop-cloud--2 {
        width: 78px;
        height: 32px;
    }

    .page--mine-drop .mine-drop-cloud--3 {
        width: 108px;
        height: 44px;
    }

    .page--mine-drop .mine-drop-cloud--4 {
        width: 82px;
        height: 34px;
    }

    .page--mine-drop .mine-drop-cloud--5 {
        width: 94px;
        height: 40px;
    }
}

.page--mine-drop .mine-drop-shell::after,
.page--mine-drop .mine-drop-cell__void {
    background: transparent !important;
    box-shadow: none !important;
}

.page--mine-drop .mine-drop-shell::after {
    display: none !important;
    opacity: 0 !important;
}

.page--mine-drop .mine-drop-cell__block-image,
.page--mine-drop .mine-drop-cell__crack-image {
    filter: brightness(.82) saturate(.82);
}

.page--mine-drop .mine-drop-cell__reward-tag,
.page--mine-drop .mine-drop-cell__badge {
    opacity: .88;
}

.page--mine-drop .mine-drop-cell__block-image,
.page--mine-drop .mine-drop-cell__crack-image {
    inset: -2px -4px -1px !important;
    width: calc(100% + 8px) !important;
    max-width: none !important;
}

.page--mine-drop .mine-drop-cell__block-image--emerald {
    filter: hue-rotate(82deg) saturate(2.4) brightness(.78) contrast(1.04) drop-shadow(0 0 3px rgba(92, 220, 138, .14)) !important;
}

.page--mine-drop .mine-drop-projectile--tnt {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: translateY(-6px) !important;
}

/* Telegram WebApp mobile adaptation */
html.tg-webapp,
body.tg-webapp {
    width: 100%;
    overflow-x: hidden;
}

body.tg-webapp {
    min-height: 100dvh;
    background:
        radial-gradient(circle at top center, rgba(35, 120, 255, 0.18), transparent 30%),
        radial-gradient(circle at 50% 120%, rgba(255, 94, 164, 0.08), transparent 24%),
        linear-gradient(180deg, #0a0a0b 0%, #040404 100%);
}

body.tg-webapp .app-shell,
body.tg-webapp .site-shell {
    min-height: 100dvh;
    width: 100%;
    padding: 0;
}

body.tg-webapp .app-frame,
body.tg-webapp .mobile-app {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    border-radius: 0;
}

body.tg-webapp .topbar,
body.tg-webapp .app-topbar {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 10px;
    gap: 10px;
}

body.tg-webapp .brand-title,
body.tg-webapp .brand-mark {
    font-size: clamp(1.35rem, 5.6vw, 1.7rem);
}

body.tg-webapp .content-area,
body.tg-webapp .page-content {
    padding-left: 14px;
    padding-right: 14px;
}

body.tg-webapp .profile-strip {
    padding: 8px 14px 16px;
    gap: 10px;
    align-items: center;
}

body.tg-webapp .profile-main {
    min-width: 0;
    gap: 10px;
    flex: 1;
}

body.tg-webapp .avatar-circle {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

body.tg-webapp .profile-name,
body.tg-webapp #profile-link,
body.tg-webapp #profile-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.tg-webapp .balance-pill,
body.tg-webapp .balance-badge {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.9rem;
}

body.tg-webapp .promo-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
}

body.tg-webapp .promo-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 1.7rem;
}

body.tg-webapp .promo-row {
    align-items: flex-start;
    margin-bottom: 6px;
}

body.tg-webapp .promo-row h2 {
    font-size: 1.25rem;
    line-height: 1.08;
}

body.tg-webapp .promo-copy p {
    margin-bottom: 12px;
    font-size: 0.9rem;
}

body.tg-webapp .promo-button,
body.tg-webapp .button-primary,
body.tg-webapp .button-secondary,
body.tg-webapp .bonus-promo-button,
body.tg-webapp .mission-action {
    min-height: 46px;
    border-radius: 14px;
}

body.tg-webapp .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.tg-webapp .quick-action {
    min-width: 0;
    height: 48px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 0.9rem;
}

body.tg-webapp .section-title-row,
body.tg-webapp .section-header,
body.tg-webapp .missions-head {
    gap: 10px;
}

body.tg-webapp .section-title-row h3,
body.tg-webapp .missions-head h2,
body.tg-webapp .bonuses-heading h2 {
    font-size: clamp(1.2rem, 5.4vw, 1.55rem);
}

body.tg-webapp .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.tg-webapp .catalog-card {
    min-height: 168px;
    padding: 14px;
    border-radius: 18px;
}

body.tg-webapp .catalog-card--wide {
    grid-column: 1 / -1;
}

body.tg-webapp .catalog-card h3 {
    margin: 8px 0 6px;
    font-size: 1.05rem;
    line-height: 1.15;
}

body.tg-webapp .catalog-card p {
    font-size: 0.82rem;
    line-height: 1.26;
}

body.tg-webapp .catalog-card-art,
body.tg-webapp .catalog-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

body.tg-webapp .catalog-card-mines-logo {
    width: min(96px, 100%);
}

body.tg-webapp .catalog-online {
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.68rem;
}

body.tg-webapp .catalog-card-footer {
    gap: 8px;
    margin-top: 10px;
    font-size: 0.76rem;
}

body.tg-webapp .support-card,
body.tg-webapp .feed-panel,
body.tg-webapp .profile-card,
body.tg-webapp .wallet-hero,
body.tg-webapp .panel-card,
body.tg-webapp .game-panel,
body.tg-webapp .game-hero,
body.tg-webapp .missions-shell {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
}

body.tg-webapp .support-card,
body.tg-webapp .bonus-promo-head,
body.tg-webapp .profile-card,
body.tg-webapp .game-hero {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
}

body.tg-webapp .support-icon,
body.tg-webapp .bonus-promo-icon,
body.tg-webapp .game-hero-icon,
body.tg-webapp .profile-avatar--large {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.4rem;
}

body.tg-webapp .stats-strip,
body.tg-webapp .dual-layout,
body.tg-webapp .profile-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.tg-webapp .profile-menu-card,
body.tg-webapp .stat-box,
body.tg-webapp .mission-card {
    min-width: 0;
}

body.tg-webapp .bonus-promo-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

body.tg-webapp .bonus-promo-input {
    min-width: 0;
    min-height: 46px;
}

body.tg-webapp .missions-head {
    align-items: flex-start;
}

body.tg-webapp .missions-timer {
    padding: 7px 10px;
    font-size: 0.78rem;
}

body.tg-webapp .mission-top,
body.tg-webapp .mission-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

body.tg-webapp .bet-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.tg-webapp .mission-top h3,
body.tg-webapp .mission-reward {
    min-width: 0;
}

body.tg-webapp .mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.tg-webapp .mode-chip {
    min-width: 0;
    text-align: center;
}

body.tg-webapp .feed-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

body.tg-webapp .floating-actions {
    left: 14px;
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform: none;
}

body.tg-webapp .bottom-nav {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform: none;
    padding: 8px;
    gap: 6px;
    border-radius: 20px;
}

body.tg-webapp .bottom-nav-item {
    min-width: 0;
    min-height: 42px;
    padding: 0 4px;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.1;
}

@media (max-width: 390px) {
    body.tg-webapp .promo-card,
    body.tg-webapp .support-card,
    body.tg-webapp .bonus-promo-head,
    body.tg-webapp .profile-card,
    body.tg-webapp .game-hero {
        grid-template-columns: 1fr;
    }

    body.tg-webapp .promo-icon,
    body.tg-webapp .support-icon,
    body.tg-webapp .bonus-promo-icon,
    body.tg-webapp .profile-avatar--large,
    body.tg-webapp .game-hero-icon {
        width: 48px;
        height: 48px;
    }

    body.tg-webapp .promo-row {
        flex-direction: column;
        gap: 6px;
    }

    body.tg-webapp .games-grid,
    body.tg-webapp .stats-strip,
    body.tg-webapp .dual-layout,
    body.tg-webapp .profile-menu-grid {
        grid-template-columns: 1fr;
    }

    body.tg-webapp .bonus-promo-form,
    body.tg-webapp .mission-top,
    body.tg-webapp .mission-bottom,
    body.tg-webapp .bet-actions,
    body.tg-webapp .mode-grid {
        grid-template-columns: 1fr;
    }

    body.tg-webapp .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.tg-webapp .bottom-nav-item {
        font-size: 0.71rem;
    }
}

@media (max-width: 430px) {
    .app-frame,
    .mobile-app {
        max-width: 100%;
        min-height: 100dvh;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        box-shadow: none;
        border-radius: 0;
    }

    .topbar,
    .app-topbar {
        padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 10px;
        gap: 10px;
    }

    .content-area,
    .page-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .profile-strip {
        padding: 8px 14px 16px;
        gap: 10px;
    }

    .promo-card {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .promo-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    .promo-row h2,
    .section-title-row h3,
    .missions-head h2,
    .bonuses-heading h2 {
        font-size: clamp(1.18rem, 5.4vw, 1.5rem);
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quick-action {
        height: 48px;
        min-width: 0;
        font-size: 0.9rem;
    }

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .catalog-card {
        min-height: 164px;
        padding: 14px;
        border-radius: 18px;
    }

    .catalog-card--wide {
        grid-column: 1 / -1;
    }

    .catalog-card-art,
    .catalog-card-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .catalog-card h3 {
        margin: 8px 0 6px;
        font-size: 1.04rem;
        line-height: 1.14;
    }

    .catalog-card p {
        font-size: 0.82rem;
        line-height: 1.24;
    }

    .catalog-card-footer {
        margin-top: 10px;
        gap: 8px;
        font-size: 0.76rem;
    }

    .support-card,
    .profile-card,
    .bonus-promo-head,
    .game-hero {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    .support-card,
    .feed-panel,
    .profile-card,
    .wallet-hero,
    .panel-card,
    .game-panel,
    .game-hero,
    .missions-shell {
        margin-top: 16px;
        padding: 14px;
        border-radius: 18px;
    }

    .support-icon,
    .bonus-promo-icon,
    .game-hero-icon,
    .profile-avatar--large {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .stats-strip,
    .dual-layout,
    .profile-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .bonus-promo-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .mission-top,
    .mission-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
    }

    .mode-grid,
    .bet-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bottom-nav {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        transform: none;
        padding: 8px;
        gap: 6px;
        border-radius: 20px;
    }

    .bottom-nav-item {
        min-width: 0;
        min-height: 42px;
        padding: 0 4px;
        font-size: 0.75rem;
        text-align: center;
        line-height: 1.1;
    }
}

@media (max-width: 390px) {
    .promo-card,
    .support-card,
    .profile-card,
    .bonus-promo-head,
    .game-hero {
        grid-template-columns: 1fr;
    }

    .games-grid,
    .stats-strip,
    .dual-layout,
    .profile-menu-grid {
        grid-template-columns: 1fr !important;
    }

    .bonus-promo-form,
    .mission-top,
    .mission-bottom,
    .mode-grid,
    .bet-actions {
        grid-template-columns: 1fr;
    }

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .games-grid .catalog-card,
    .catalog-card--wide {
        grid-column: auto !important;
        min-height: 158px;
    }

    .games-grid .catalog-card {
        width: 100%;
        min-width: 0;
        padding: 12px;
    }

    .games-grid .catalog-card h3 {
        font-size: 0.98rem;
    }

    .games-grid .catalog-card p {
        font-size: 0.78rem;
    }
}

.app-screen {
    display: none;
}

.app-screen.app-screen--active {
    display: block;
}

.profile-name-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.wallet-topup-actions,
.wallet-topup-custom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.wallet-topup-custom {
    grid-template-columns: minmax(0, 1fr) auto;
}

.wallet-topup-button {
    min-width: 0;
}

.wallet-topup-status {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.wallet-topup-status.is-error {
    color: #ff7a7a;
}

.wallet-topup-status.is-success {
    color: #8ce7ae;
}

.game-embed-card {
    overflow: hidden;
}

.game-embed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.game-embed-shell {
    position: relative;
    min-height: 560px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(5, 8, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.game-embed-loader {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(180deg, rgba(8, 10, 16, 0.94), rgba(5, 6, 10, 0.98));
    z-index: 2;
}

.game-embed-loader.is-visible {
    display: grid;
}

.game-embed-frame {
    width: 100%;
    min-height: 560px;
    border: 0;
    display: block;
    opacity: 0;
    transition: opacity .2s ease;
    background: #050608;
}

.game-embed-frame.is-ready {
    opacity: 1;
}