/* Stable UI uniformisation loaded after app.css.
   Keep this file focused on layout rhythm; do not put route/auth/media logic here. */

:root {
    --ui-page-max: 680px;
    --ui-page-pad: 14px;
    --ui-gap: 14px;
    --ui-card-radius: 20px;
    --ui-card-bg: linear-gradient(180deg, rgba(24, 27, 37, 0.96), rgba(12, 14, 22, 0.98));
    --ui-card-border: rgba(255, 255, 255, 0.12);
    --ui-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
    --ui-bottom-space: calc(88px + env(safe-area-inset-bottom, 0px));
    --ui-page-bottom-bg: #070b16;
}

html,
body.theme-market {
    min-height: var(--app-viewport-height, 100dvh) !important;
    overflow-x: hidden !important;
    background: var(--ui-page-bottom-bg) !important;
}

body.theme-market .device-frame {
    width: 100% !important;
    min-height: var(--app-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    background:
        linear-gradient(180deg, rgba(7, 11, 22, 0.98) 0%, rgba(8, 12, 24, 0.98) 58%, var(--ui-page-bottom-bg) 100%) !important;
    position: relative !important;
}

body.theme-market .app-content {
    width: 100% !important;
    max-width: var(--ui-page-max) !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: var(--ui-page-pad) var(--ui-page-pad) 18px !important;
    box-sizing: border-box !important;
}

body.theme-market.has-bottom-nav .app-content {
    padding-bottom: 18px !important;
}

body.theme-market[data-current-page="access"] .app-content {
    max-width: 560px !important;
    flex: 1 1 auto !important;
    display: grid !important;
    align-items: center !important;
    padding: 16px !important;
}

body.theme-market[data-current-page="access"] .access-screen {
    min-height: auto !important;
    width: 100% !important;
}

body.theme-market .store-shell,
body.theme-market .content-page,
body.theme-market .profile-page,
body.theme-market .wheel-page {
    width: 100% !important;
    max-width: var(--ui-page-max) !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: var(--ui-gap) !important;
    align-content: start !important;
}

body.theme-market .content-page,
body.theme-market .profile-page,
body.theme-market .wheel-page {
    max-width: 560px !important;
}

body.theme-market .section-head {
    width: 100% !important;
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 2px 2px 0 !important;
    text-align: left !important;
}

body.theme-market .section-head h1,
body.theme-market .section-head h2 {
    margin: 0 !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
}

body.theme-market .section-head p {
    max-width: 54ch !important;
    margin: 0 !important;
    color: rgba(247, 244, 235, 0.72) !important;
    line-height: 1.45 !important;
    font-size: 13px !important;
}

body.theme-market .status-pill,
body.theme-market .live-dot,
body.theme-market .promo-badge,
body.theme-market .product-badge,
body.theme-market .tag-row span {
    min-height: 28px !important;
    max-width: 100% !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.06em !important;
}

body.theme-market .store-header-card,
body.theme-market .wheel-card,
body.theme-market .panel-card,
body.theme-market .page-card,
body.theme-market .page-showcase,
body.theme-market .profile-feature-card,
body.theme-market .profile-kpi-grid article,
body.theme-market .cart-helper-card,
body.theme-market .cart-summary-card,
body.theme-market .checkout-card,
body.theme-market .cart-line {
    border-radius: var(--ui-card-radius) !important;
    background: var(--ui-card-bg) !important;
    border: 1px solid var(--ui-card-border) !important;
    box-shadow: var(--ui-card-shadow) !important;
    color: #f7f4eb !important;
}

body.theme-market .store-header-card,
body.theme-market .wheel-card,
body.theme-market .panel-card,
body.theme-market .page-card,
body.theme-market .page-showcase,
body.theme-market .profile-feature-card {
    padding: 16px !important;
}

body.theme-market .store-header-card {
    gap: 14px !important;
}

body.theme-market .stats-row,
body.theme-market .profile-kpi-grid,
body.theme-market .cart-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

body.theme-market .stats-row > *,
body.theme-market .profile-kpi-grid article,
body.theme-market .cart-summary-card {
    min-width: 0 !important;
    padding: 12px !important;
    text-align: center !important;
}

body.theme-market .promo-grid,
body.theme-market .product-grid,
body.theme-market .auth-grid,
body.theme-market .profile-summary,
body.theme-market .cart-items,
body.theme-market .wheel-legend,
body.theme-market .promo-info-stack {
    display: grid !important;
    gap: 12px !important;
}

body.theme-market .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.theme-market .product-card {
    min-width: 0 !important;
    height: 100% !important;
}

body.theme-market .product-copy {
    min-width: 0 !important;
}

body.theme-market .product-copy h3 {
    overflow-wrap: anywhere !important;
}

body.theme-market .product-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

body.theme-market .product-price-chip {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.theme-market .page-showcase {
    width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
    isolation: isolate !important;
}

body.theme-market .page-showcase::before,
body.theme-market .page-showcase::after {
    opacity: 0.28 !important;
}

body.theme-market .page-showcase-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

body.theme-market .page-showcase-media img,
body.theme-market .page-showcase-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.theme-market .page-showcase-copy {
    padding: 14px !important;
    border-radius: 18px !important;
    gap: 10px !important;
}

body.theme-market .page-showcase-copy h2,
body.theme-market .panel-card h2,
body.theme-market .page-card h2,
body.theme-market .cart-head h3 {
    margin: 0 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body.theme-market .wysiwyg,
body.theme-market .modal-copy,
body.theme-market .panel-card p,
body.theme-market .page-card p,
body.theme-market .muted {
    color: rgba(247, 244, 235, 0.74) !important;
    line-height: 1.48 !important;
}

body.theme-market .profile-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.theme-market .profile-feature-grid span,
body.theme-market .profile-code-card,
body.theme-market .list-row,
body.theme-market .wheel-legend-item,
body.theme-market .order-progress,
body.theme-market .order-admin-note {
    min-width: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.theme-market .list-row,
body.theme-market .wheel-legend-item {
    padding: 11px 12px !important;
}

body.theme-market .profile-order-card {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    overflow: hidden !important;
}

body.theme-market .profile-order-card summary {
    min-width: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
}

body.theme-market .wheel-card {
    justify-items: center !important;
}

body.theme-market .wheel-stage {
    width: min(100%, 330px) !important;
    margin-inline: auto !important;
}

body.theme-market .wheel-legend {
    width: 100% !important;
}

body.theme-market .wheel-legend-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

body.theme-market .wheel-legend-item strong,
body.theme-market .wheel-legend-item small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.theme-market .cart-drawer {
    width: min(calc(100vw - 18px), 452px) !important;
    max-height: min(calc(var(--app-viewport-height, 100dvh) - 104px), 720px) !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(18, 21, 30, 0.985), rgba(8, 10, 16, 0.995)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

body.theme-market .cart-head {
    align-items: center !important;
    gap: 10px !important;
}

body.theme-market .cart-helper-card,
body.theme-market .checkout-card {
    padding: 13px !important;
    box-shadow: none !important;
}

body.theme-market .cart-line {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    box-shadow: none !important;
}

body.theme-market .cart-line-media {
    width: 58px !important;
    height: 58px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

body.theme-market .cart-line-media img,
body.theme-market .cart-line-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.theme-market .cart-line-copy {
    min-width: 0 !important;
}

body.theme-market .cart-line-copy strong,
body.theme-market .cart-line-desc,
body.theme-market .cart-line-price,
body.theme-market .cart-line-total {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.theme-market .cart-controls {
    display: grid !important;
    gap: 6px !important;
    justify-items: stretch !important;
}

body.theme-market .cart-controls input {
    width: 56px !important;
    min-width: 56px !important;
}

body.theme-market .checkout-card {
    display: grid !important;
    gap: 10px !important;
}

body.theme-market .checkout-card input,
body.theme-market .checkout-card select,
body.theme-market .checkout-card button,
body.theme-market .panel-card input,
body.theme-market .panel-card button,
body.theme-market .page-card input,
body.theme-market .page-card button,
body.theme-market .page-card textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

body.theme-market .footer-socials {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 24px max(14px, calc((100% - 430px) / 2)) calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    background:
        linear-gradient(180deg, rgba(7, 11, 22, 0) 0%, var(--ui-page-bottom-bg) 28%, var(--ui-page-bottom-bg) 100%) !important;
    box-sizing: border-box !important;
}

body.theme-market .footer-socials p {
    max-width: 360px !important;
    margin: 0 auto !important;
    color: rgba(247, 244, 235, 0.72) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body.theme-market .footer-social-links {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body.theme-market .footer-social-link {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f7f4eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.theme-market .footer-social-icon,
body.theme-market .footer-social-icon svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

body.theme-market .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) translateZ(0) !important;
    width: min(calc(100vw - 16px), 452px) !important;
    min-height: 62px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 6px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(20, 23, 35, 0.96), rgba(7, 11, 22, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48) !important;
    z-index: 80 !important;
    box-sizing: border-box !important;
}

body.theme-market .bottom-nav a,
body.theme-market .bottom-nav .nav-cart-btn {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 6px 1px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
}

body.theme-market .bottom-nav .nav-label {
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

body.theme-market .bottom-nav .nav-icon,
body.theme-market .bottom-nav .nav-icon-svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

body.theme-market.telegram-lite-mode .promo-card::before,
body.theme-market.telegram-lite-mode .promo-card::after,
body.theme-market.telegram-lite-mode .product-card::before,
body.theme-market.telegram-lite-mode .product-card::after,
body.theme-market.telegram-lite-mode .store-header-card::before,
body.theme-market.telegram-lite-mode .wheel-card::before {
    display: none !important;
}

@media (min-width: 720px) {
    body.theme-market .auth-grid,
    body.theme-market .profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    :root {
        --ui-page-pad: 12px;
        --ui-gap: 12px;
    }

    body.theme-market .product-grid {
        gap: 10px !important;
    }

    body.theme-market .store-header-card,
    body.theme-market .wheel-card,
    body.theme-market .panel-card,
    body.theme-market .page-card,
    body.theme-market .page-showcase,
    body.theme-market .profile-feature-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    body.theme-market .cart-line {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    body.theme-market .cart-controls {
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr auto !important;
    }

    body.theme-market .cart-controls input {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    body.theme-market .bottom-nav {
        width: calc(100vw - 12px) !important;
        padding: 5px !important;
    }

    body.theme-market .bottom-nav .nav-label {
        font-size: 8px !important;
    }
}

/* === Stable wheel/about premium polish START === */
/* CSS-only: no new media, no Telegram init changes, no render-heavy effects. */
body.theme-market[data-current-page="games"] .app-content {
    max-width: 540px !important;
}

body.theme-market[data-current-page="games"] .wheel-page {
    max-width: 540px !important;
    gap: 16px !important;
    padding-top: 4px !important;
}

body.theme-market[data-current-page="games"] .wheel-page > .section-head {
    text-align: center !important;
    justify-items: center !important;
    gap: 10px !important;
    padding: 8px 4px 0 !important;
}

body.theme-market[data-current-page="games"] .wheel-page > .section-head .status-pill {
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: rgba(247, 244, 235, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    letter-spacing: 0 !important;
}

body.theme-market[data-current-page="games"] .wheel-page > .section-head h1 {
    max-width: 100% !important;
    margin: 0 !important;
    color: #ffd75d !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 0 22px rgba(255, 206, 71, 0.22) !important;
}

body.theme-market[data-current-page="games"] .wheel-page > .section-head p {
    max-width: 24rem !important;
    margin: 0 auto !important;
    color: rgba(247, 244, 235, 0.62) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

body.theme-market[data-current-page="games"] .wheel-card {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 18px !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.theme-market[data-current-page="games"] .wheel-card::before {
    display: none !important;
}

body.theme-market[data-current-page="games"] .wheel-stage {
    width: min(100%, 408px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 6px auto 8px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate !important;
    filter: none !important;
    perspective: none !important;
}

body.theme-market[data-current-page="games"] .wheel-stage::before {
    content: "" !important;
    position: absolute !important;
    inset: -24px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 213, 84, 0.30) 0%, rgba(255, 213, 84, 0.12) 42%, rgba(255, 213, 84, 0) 72%) !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

body.theme-market[data-current-page="games"] .wheel-disc {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 12px solid #11151d !important;
    background: var(--wheel-surface, conic-gradient(#f4c95d 0deg 60deg, #57d68d 60deg 120deg, #5ca8ff 120deg 180deg, #ff7a59 180deg 240deg, #d7ddff 240deg 300deg, #f4c95d 300deg 360deg)) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), inset 0 22px 34px rgba(255, 255, 255, 0.16), inset 0 -26px 46px rgba(0, 0, 0, 0.36), 0 22px 46px rgba(0, 0, 0, 0.46) !important;
    transform: rotate(var(--wheel-rotation, 0deg)) !important;
    transform-style: flat !important;
    overflow: hidden !important;
}

body.theme-market[data-current-page="games"] .wheel-disc::before {
    inset: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.20) !important;
    background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 30%) !important;
    mix-blend-mode: normal !important;
}

body.theme-market[data-current-page="games"] .wheel-disc::after {
    inset: 0 !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 0 46%, rgba(0, 0, 0, 0.30) 47% 49%, rgba(255, 255, 255, 0) 51%) !important;
    filter: none !important;
}

body.theme-market[data-current-page="games"] .wheel-disc.is-spinning {
    transition: transform 6.2s cubic-bezier(0.08, 0.82, 0.12, 1) !important;
    filter: none !important;
}

body.theme-market[data-current-page="games"] .wheel-pointer {
    top: -13px !important;
    width: 52px !important;
    height: 54px !important;
    z-index: 6 !important;
    clip-path: none !important;
    background: transparent !important;
    filter: none !important;
}

body.theme-market[data-current-page="games"] .wheel-pointer span {
    position: relative !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border-left: 22px solid transparent !important;
    border-right: 22px solid transparent !important;
    border-bottom: 30px solid #ffd75d !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42)) !important;
}

body.theme-market[data-current-page="games"] .wheel-pointer span::after {
    content: "" !important;
    position: absolute !important;
    left: -8px !important;
    top: 28px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #c9aa35 !important;
    box-shadow: 0 0 18px rgba(255, 215, 93, 0.36) !important;
}

body.theme-market[data-current-page="games"] .wheel-sector-label {
    width: 112px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 14px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58) !important;
    letter-spacing: 0 !important;
}

body.theme-market[data-current-page="games"] .wheel-sector-label b {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(8, 10, 18, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    font-size: 14px !important;
}

body.theme-market[data-current-page="games"] .wheel-sector-label span {
    max-width: 104px !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.theme-market[data-current-page="games"] .wheel-center-badge {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: #151927 !important;
    color: #ffd75d !important;
    border: 6px solid #ffd75d !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

body.theme-market[data-current-page="games"] .wheel-center-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.theme-market[data-current-page="games"] .wheel-legend {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 8px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

body.theme-market[data-current-page="games"] .wheel-legend::-webkit-scrollbar {
    display: none !important;
}

body.theme-market[data-current-page="games"] .wheel-legend-item {
    flex: 0 0 auto !important;
    width: min(74vw, 236px) !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.theme-market[data-current-page="games"] .wheel-legend-item small {
    font-size: 11px !important;
    color: rgba(247, 244, 235, 0.58) !important;
}

body.theme-market[data-current-page="games"] .wheel-spin-form,
body.theme-market[data-current-page="games"] .wheel-card > .primary-btn.full {
    width: 100% !important;
}

body.theme-market[data-current-page="games"] .wheel-spin-form {
    display: grid !important;
    gap: 14px !important;
}

body.theme-market[data-current-page="games"] .wheel-spin-form .primary-btn.full,
body.theme-market[data-current-page="games"] .wheel-card > .primary-btn.full {
    min-height: 72px !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, #ffd95b, #f5c13c) !important;
    color: #14120b !important;
    border: 0 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body.theme-market[data-current-page="games"] .wheel-spin-form .primary-btn.full:disabled {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(247, 244, 235, 0.62) !important;
    box-shadow: none !important;
}

body.theme-market[data-current-page="games"] .wheel-result:not(:empty) {
    min-height: 86px !important;
    display: grid !important;
    place-items: center !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(120, 82, 19, 0.82), rgba(98, 65, 14, 0.78)) !important;
    border: 2px solid rgba(255, 215, 93, 0.80) !important;
    color: #ffd75d !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

body.theme-market[data-current-page="games"] .wheel-card > .muted {
    width: 100% !important;
    min-height: 66px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.085) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    color: rgba(247, 244, 235, 0.72) !important;
    font-size: 14px !important;
    text-align: center !important;
}

body.theme-market[data-current-page="games"] .wheel-result-modal {
    background: rgba(2, 4, 12, 0.86) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-market[data-current-page="games"] .wheel-result-card {
    width: min(100%, 386px) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(31, 34, 44, 0.98), rgba(10, 12, 20, 0.99)) !important;
    border: 1px solid rgba(255, 215, 93, 0.36) !important;
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.58) !important;
}

body.theme-market[data-current-page="about"] .content-page {
    max-width: 560px !important;
    gap: 14px !important;
    padding-bottom: 0 !important;
}

body.theme-market[data-current-page="about"] .page-showcase {
    display: grid !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(24, 27, 37, 0.96), rgba(10, 12, 19, 0.99)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32) !important;
    overflow: hidden !important;
}

body.theme-market[data-current-page="about"] .page-showcase::before,
body.theme-market[data-current-page="about"] .page-showcase::after {
    opacity: 0.18 !important;
    filter: none !important;
}

body.theme-market[data-current-page="about"] .page-showcase-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 430px !important;
    border-radius: 22px !important;
    background: #080b12 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    overflow: hidden !important;
}

body.theme-market[data-current-page="about"] .page-showcase-media img,
body.theme-market[data-current-page="about"] .page-showcase-media video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.theme-market[data-current-page="about"] .page-showcase-copy {
    display: grid !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f7f4eb !important;
}

body.theme-market[data-current-page="about"] .page-showcase-kicker {
    justify-self: start !important;
    max-width: 100% !important;
    color: color-mix(in srgb, var(--accent) 72%, #ffffff) !important;
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.12)) !important;
    letter-spacing: 0 !important;
}

body.theme-market[data-current-page="about"] .page-showcase-copy h2 {
    color: #ffd75d !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body.theme-market[data-current-page="about"] .page-showcase-copy .wysiwyg {
    color: rgba(247, 244, 235, 0.75) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body.theme-market.telegram-lite-mode[data-current-page="games"] .wheel-stage::before,
body.theme-market.telegram-lite-mode[data-current-page="about"] .page-showcase::before,
body.theme-market.telegram-lite-mode[data-current-page="about"] .page-showcase::after {
    display: none !important;
}

@media (max-width: 430px) {
    body.theme-market[data-current-page="games"] .wheel-page > .section-head h1 {
        font-size: 38px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-page > .section-head p {
        font-size: 15px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-stage {
        width: min(100%, 354px) !important;
    }

    body.theme-market[data-current-page="games"] .wheel-sector-label {
        width: 96px !important;
        font-size: 12px !important;
        transform-origin: center -122px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-sector-label span {
        max-width: 90px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-center-badge {
        width: 66px !important;
        height: 66px !important;
        border-width: 5px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-spin-form .primary-btn.full,
    body.theme-market[data-current-page="games"] .wheel-card > .primary-btn.full {
        min-height: 68px !important;
        border-radius: 26px !important;
        font-size: 20px !important;
    }
}

@media (max-width: 360px) {
    body.theme-market[data-current-page="games"] .wheel-page > .section-head h1 {
        font-size: 33px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-stage {
        width: min(100%, 316px) !important;
    }

    body.theme-market[data-current-page="games"] .wheel-sector-label {
        font-size: 11px !important;
        transform-origin: center -106px !important;
    }

    body.theme-market[data-current-page="games"] .wheel-sector-label b {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
}
/* === Stable wheel/about premium polish END === */

/* === Games page footer scroll fix START === */
body.theme-market[data-current-page="games"] .app-content {
    padding-bottom: 4px !important;
}

body.theme-market[data-current-page="games"] .wheel-card {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.theme-market[data-current-page="games"] .wheel-card > .muted:last-child {
    margin-bottom: 0 !important;
}

body.theme-market[data-current-page="games"] .footer-socials {
    margin-top: 2px !important;
    padding-top: 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
/* === Games page footer scroll fix END === */

/* === Global footer rhythm and safe bottom START === */
body.theme-market .device-frame:has(.footer-socials) .app-content {
    padding-bottom: 8px !important;
}

body.theme-market.has-bottom-nav .device-frame:not(:has(.footer-socials)) .app-content {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}

body.theme-market .content-page,
body.theme-market .profile-page,
body.theme-market .wheel-page,
body.theme-market .store-shell {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.theme-market .footer-socials {
    margin-top: 6px !important;
    padding-top: 0 !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

body.theme-market:not(.has-bottom-nav) .footer-socials {
    padding-bottom: 18px !important;
}

body.theme-market[data-current-page="games"] .footer-socials,
body.theme-market[data-current-page="about"] .footer-socials,
body.theme-market[data-current-page="profile"] .footer-socials,
body.theme-market[data-current-page="referral"] .footer-socials,
body.theme-market[data-current-page="shop"] .footer-socials {
    margin-top: 4px !important;
}

body.theme-market[data-current-page="games"] .app-content,
body.theme-market[data-current-page="about"] .app-content,
body.theme-market[data-current-page="profile"] .app-content,
body.theme-market[data-current-page="referral"] .app-content,
body.theme-market[data-current-page="shop"] .app-content {
    padding-bottom: 6px !important;
}

body.theme-market[data-current-page="games"] .wheel-card,
body.theme-market[data-current-page="about"] .page-showcase,
body.theme-market[data-current-page="profile"] .profile-page,
body.theme-market[data-current-page="referral"] .content-page,
body.theme-market[data-current-page="shop"] .store-shell {
    margin-bottom: 0 !important;
}
/* === Global footer rhythm and safe bottom END === */
/* ABOUT PAGE FOOTER GAP FIX - keep footer close to real content only. */
body.theme-market[data-current-page="about"] .device-frame {
    justify-content: flex-start !important;
}

body.theme-market[data-current-page="about"] .app-content {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
}

body.theme-market[data-current-page="about"] .content-page {
    min-height: 0 !important;
    align-content: start !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.theme-market[data-current-page="about"] .content-page > :last-child,
body.theme-market[data-current-page="about"] .page-showcase,
body.theme-market[data-current-page="about"] .page-showcase-copy,
body.theme-market[data-current-page="about"] .page-showcase-copy .wysiwyg {
    margin-bottom: 0 !important;
}

body.theme-market[data-current-page="about"] .footer-socials {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.theme-market.has-bottom-nav[data-current-page="about"] .footer-socials {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

body.theme-market:not(.has-bottom-nav)[data-current-page="about"] .footer-socials {
    padding-bottom: 18px !important;
}

/* Final bottom surface: keep the last viewport band visually attached to the
   page on every store route, even when route-specific spacing overrides run. */
body.theme-market .footer-socials {
    width: 100% !important;
    max-width: none !important;
    padding-left: max(14px, calc((100% - 430px) / 2)) !important;
    padding-right: max(14px, calc((100% - 430px) / 2)) !important;
    background:
        linear-gradient(180deg, rgba(7, 11, 22, 0) 0%, var(--ui-page-bottom-bg) 22%, var(--ui-page-bottom-bg) 100%) !important;
    box-sizing: border-box !important;
}

body.theme-market .bottom-nav {
    background:
        linear-gradient(180deg, rgba(20, 23, 35, 0.96), rgba(7, 11, 22, 0.99)) !important;
}

/* Theme harmony pass: header, marquee, footer and bottom navigation now share
   the same surface language as the app cards instead of fixed dark blocks. */
body.theme-market {
    --ui-theme-surface: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent) 17%, rgba(10, 14, 26, 0.97)),
        color-mix(in srgb, var(--accent-2) 12%, rgba(7, 11, 22, 0.985)) 54%,
        rgba(7, 11, 22, 0.995)
    );
    --ui-theme-surface-soft: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent) 11%, rgba(255, 255, 255, 0.07)),
        color-mix(in srgb, var(--accent-2) 8%, rgba(255, 255, 255, 0.035))
    );
    --ui-theme-border: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.12));
    --ui-theme-border-2: color-mix(in srgb, var(--accent-2) 24%, rgba(255, 255, 255, 0.10));
}

body.theme-market .topbar.topbar-native {
    width: min(calc(100% - 20px), 680px) !important;
    margin: 10px auto 0 !important;
    padding: 8px 10px !important;
    border-radius: 22px !important;
    background: var(--ui-theme-surface) !important;
    border: 1px solid var(--ui-theme-border) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
}

body.theme-market .topbar-brand {
    color: #f7f4eb !important;
    text-decoration: none !important;
}

body.theme-market .topbar-brand-logo-shell {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, rgba(255, 255, 255, 0.18)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.38)) !important;
}

body.theme-market .topbar-brand-copy strong {
    color: #fff8dd !important;
    -webkit-text-fill-color: currentColor !important;
}

body.theme-market .topbar-brand-copy span {
    color: color-mix(in srgb, var(--accent) 26%, rgba(247, 244, 235, 0.72)) !important;
}

body.theme-market .topbar .icon-btn,
body.theme-market .topbar .cart-counter-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: #070b16 !important;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.18)) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 24%, rgba(0, 0, 0, 0.36)) !important;
}

body.theme-market .topbar-cart-icon {
    stroke: currentColor !important;
}

body.theme-market .cart-counter-badge {
    background: #fff8dd !important;
    color: #070b16 !important;
}

body.theme-market .marquee-wrap {
    width: min(calc(100% - 20px), 680px) !important;
    margin: 8px auto 0 !important;
}

body.theme-market .marquee-pill {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, rgba(7, 11, 22, 0.92)), color-mix(in srgb, var(--accent-2) 22%, rgba(7, 11, 22, 0.92))) !important;
    border: 1px solid var(--ui-theme-border-2) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-2) 18%, rgba(0, 0, 0, 0.30)) !important;
}

body.theme-market .footer-socials {
    background:
        linear-gradient(180deg, rgba(7, 11, 22, 0) 0%, color-mix(in srgb, var(--accent) 8%, #070b16) 24%, color-mix(in srgb, var(--accent-2) 7%, #070b16) 100%) !important;
}

body.theme-market .footer-socials p {
    color: color-mix(in srgb, var(--accent) 18%, rgba(247, 244, 235, 0.74)) !important;
}

body.theme-market .footer-social-link {
    background: var(--ui-theme-surface-soft) !important;
    border-color: var(--ui-theme-border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20) !important;
}

body.theme-market .footer-social-icon {
    color: color-mix(in srgb, var(--accent) 58%, #ffffff) !important;
}

body.theme-market .bottom-nav {
    background: var(--ui-theme-surface) !important;
    border-color: var(--ui-theme-border) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

body.theme-market .bottom-nav a,
body.theme-market .bottom-nav .nav-cart-btn {
    color: rgba(247, 244, 235, 0.74) !important;
    background: transparent !important;
}

body.theme-market .bottom-nav a.active,
body.theme-market .bottom-nav .nav-cart-btn.active {
    color: #070b16 !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.24)) !important;
}

body.theme-market .bottom-nav a.active .nav-icon-svg,
body.theme-market .bottom-nav .nav-cart-btn.active .nav-icon-svg {
    stroke: currentColor !important;
}

/* Telegram launch failsafe: keep the Mini App readable even when the full
   visual preset overloads the WebView or leaves a blocking layer active. */
html.telegram-webapp,
html.telegram-webapp body,
body.is-telegram-context,
body.telegram-webapp,
body.telegram-ios-webview {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: #070b16 !important;
    color: #f7f4eb !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.is-telegram-context *,
body.is-telegram-context *::before,
body.is-telegram-context *::after,
body.telegram-webapp *,
body.telegram-webapp *::before,
body.telegram-webapp *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    letter-spacing: 0 !important;
}

body.is-telegram-context .device-frame,
body.is-telegram-context .app-content,
body.telegram-webapp .device-frame,
body.telegram-webapp .app-content,
body.telegram-ios-webview .device-frame,
body.telegram-ios-webview .app-content {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: var(--app-viewport-height, 100dvh) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    contain: none !important;
    background: #070b16 !important;
    position: relative !important;
}

body.is-telegram-context .app-content,
body.telegram-webapp .app-content,
body.telegram-ios-webview .app-content {
    z-index: 3 !important;
    padding: 16px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

body.is-telegram-context .access-screen,
body.is-telegram-context .store-shell,
body.is-telegram-context .content-page,
body.is-telegram-context .profile-page,
body.is-telegram-context .wheel-page,
body.telegram-webapp .access-screen,
body.telegram-webapp .store-shell,
body.telegram-webapp .content-page,
body.telegram-webapp .profile-page,
body.telegram-webapp .wheel-page,
body.telegram-ios-webview .access-screen,
body.telegram-ios-webview .store-shell,
body.telegram-ios-webview .content-page,
body.telegram-ios-webview .profile-page,
body.telegram-ios-webview .wheel-page {
    display: grid !important;
    gap: 16px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    position: relative !important;
    z-index: 4 !important;
}

body.is-telegram-context[data-current-page="access"] .access-screen,
body.telegram-webapp[data-current-page="access"] .access-screen,
body.telegram-ios-webview[data-current-page="access"] .access-screen {
    min-height: calc(var(--app-viewport-height, 100dvh) - 48px) !important;
    align-content: center !important;
}

body.is-telegram-context .access-bio-card,
body.is-telegram-context .access-form,
body.is-telegram-context .access-hint-card,
body.is-telegram-context .store-header-card,
body.is-telegram-context .hero-card,
body.is-telegram-context .promo-card,
body.is-telegram-context .panel-card,
body.is-telegram-context .page-card,
body.is-telegram-context .page-showcase,
body.is-telegram-context .product-card,
body.is-telegram-context .wheel-card,
body.telegram-webapp .access-bio-card,
body.telegram-webapp .access-form,
body.telegram-webapp .access-hint-card,
body.telegram-webapp .store-header-card,
body.telegram-webapp .hero-card,
body.telegram-webapp .promo-card,
body.telegram-webapp .panel-card,
body.telegram-webapp .page-card,
body.telegram-webapp .page-showcase,
body.telegram-webapp .product-card,
body.telegram-webapp .wheel-card {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #111827 !important;
    color: #f7f4eb !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
}

body.is-telegram-context .app-preloader,
body.is-telegram-context .modal:not(.active),
body.is-telegram-context .overlay:not(.active),
body.is-telegram-context .cart-drawer:not(.active),
body.is-telegram-context .modal-portal-root:empty,
body.telegram-webapp .app-preloader,
body.telegram-webapp .modal:not(.active),
body.telegram-webapp .overlay:not(.active),
body.telegram-webapp .cart-drawer:not(.active),
body.telegram-webapp .modal-portal-root:empty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.is-telegram-context[data-current-page="access"] .overlay,
body.is-telegram-context[data-current-page="access"] .modal,
body.is-telegram-context[data-current-page="access"] .cart-drawer,
body.telegram-webapp[data-current-page="access"] .overlay,
body.telegram-webapp[data-current-page="access"] .modal,
body.telegram-webapp[data-current-page="access"] .cart-drawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.is-telegram-context input,
body.is-telegram-context select,
body.is-telegram-context textarea,
body.is-telegram-context button,
body.telegram-webapp input,
body.telegram-webapp select,
body.telegram-webapp textarea,
body.telegram-webapp button {
    min-height: 46px !important;
    visibility: visible !important;
    opacity: 1 !important;
}