/* MMOGames palette — loads after storefront-full.css + tokens.css */

body {
    background: var(--color-bg);
    color: var(--color-text);
}

.card {
    background: var(--color-surface);
}

.text-content p {
    color: var(--color-text-secondary);
}

.text-content h4,
.text-content p b {
    color: var(--color-text);
}

.header {
    background: var(--color-bg);
}

.header-topbar {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text-muted);
}

.header-topbar__item strong,
.header-topbar__announce {
    color: var(--color-text-secondary);
}

.header-content {
    background: transparent;
}

.header-pill {
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border-color: var(--color-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.header-button.selected,
.header-button:hover {
    background: var(--color-surface-raised);
}

.header-button path,
.header-button p {
    stroke: var(--color-text-muted);
    color: var(--color-text-muted);
}

.header-button:hover path,
.header-button:hover span {
    stroke: var(--color-text);
    color: var(--color-text);
}

.header-user-menu__trigger {
    color: var(--color-text);
}

.header-user-menu__trigger:hover,
.header-user-menu__trigger.is-open {
    background: var(--color-surface-raised);
}

.header-user-menu__avatar {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
}

.header-user-menu__dropdown,
.profile-sidebar-panel.header-user-menu__dropdown {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.header-user-menu__role,
.header-user-menu__balance-label {
    color: var(--color-text-muted);
}

.header-user-menu__link {
    color: var(--color-text-secondary);
}

.header-user-menu__link svg {
    color: var(--color-text-muted);
}

.header-user-menu__link:hover {
    color: var(--color-text);
}

.header-user-menu__link:hover svg {
    color: var(--color-link);
}

.profile-sidebar-panel .header-user-menu__link.is-active {
    background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
    color: var(--color-text);
}

.profile-sidebar-panel .header-user-menu__link.is-active svg {
    color: var(--color-link);
}

.header-user-menu__balance-btn {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
}

.header-user-menu__balance-btn:hover {
    background: var(--color-secondary-hover);
}

.header-user-menu__link--danger,
.header-user-menu__link--danger svg {
    color: var(--color-error);
}

.header-user-menu__link--danger:hover {
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
}

.header-user-menu__link--danger:hover svg {
    color: var(--color-error);
}

.header-nav__link a,
.header-nav-box .header-nav__link a {
    color: var(--color-text-secondary);
}

.header-nav__link a:hover,
.header-nav-box .header-nav__link:not(.header-nav__link--pill) a:hover {
    color: var(--color-text) !important;
    background: var(--color-surface-raised);
}

.header-currency {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border-color: var(--color-border);
}

.header-btn-login {
    color: var(--color-text-secondary);
}

.header-btn-login:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.header-online {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-link) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-link) 22%, transparent);
}

a.header-online {
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.header-online:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-link) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-link) 32%, transparent);
}

.header-search-trigger {
    color: var(--color-text-secondary);
}

.header-search-trigger:hover,
.header-button.header-search-trigger:hover,
.header-actions .header-button.header-search-trigger:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
    color: var(--color-text);
}

.header-search-trigger:hover .header-search-trigger__kbd,
.header-button.header-search-trigger:hover .header-search-trigger__kbd {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.header-button.header-icon-btn:hover {
    background: var(--color-surface-raised);
}

.btn {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.btn:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

.btn:disabled {
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    color: color-mix(in srgb, var(--color-text-on-accent) 45%, transparent);
}

.btn-gradient:before {
    background: var(--color-accent);
}

.btn-gradient:after {
    background: var(--color-accent-hover);
}

.btn-gray {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.btn-gray:before {
    background: var(--color-secondary);
}

.btn-gray.bordered {
    border-color: var(--color-border);
}

.btn-gray:not(:disabled):hover {
    color: var(--color-text-on-secondary);
}

.card-price .price p {
    color: var(--color-accent);
}

.card-price .price p .sale {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-text);
}

.game-item__meta p:last-child,
.card-data__content .info p:last-child {
    color: var(--color-success);
}

.header-nav-box .header-nav__link--pill a,
.header-nav-box .header-nav__link--pill a:hover,
.header-mobile-nav .header-nav__link--pill a,
.header-mobile-nav .header-nav__link--pill a:hover {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary) !important;
    -webkit-text-fill-color: var(--color-text-on-secondary) !important;
}

.header-online {
    background: color-mix(in srgb, var(--color-link) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-link) 22%, transparent);
    color: var(--color-text-secondary);
}

.checkout-summary__price,
.checkout-summary__breakdown dd.is-total {
    color: var(--color-accent);
}

.checkout-bank-support-notice__chat {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
}

.checkout-bank-support-notice__chat:hover {
    background: var(--color-secondary-hover);
}

.checkout-coupon-btn {
    background: var(--color-surface-raised);
    color: var(--color-text);
    border-color: var(--color-border);
}

.home-head__btn--primary,
.error-page__btn--primary,
.game-hero__btn--primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.home-head__btn--primary:hover,
.error-page__btn--primary:hover,
.game-hero__btn--primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

.home-head__btn--secondary,
.game-hero__btn--secondary {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
    border-color: transparent;
}

.home-head__btn--secondary:hover,
.game-hero__btn--secondary:hover {
    background: var(--color-secondary-hover);
    color: var(--color-text-on-secondary);
}

.error-page__btn--ghost {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.error-page__btn--ghost:hover {
    border-color: var(--color-border-strong);
    color: var(--color-link-hover);
}

.checkout-nav .checkout-nav__next.btn {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
}

.checkout-nav .checkout-nav__next.btn:hover {
    background: var(--color-secondary-hover);
}

.checkout-nav .checkout-nav__submit.btn,
.checkout-nav .btn-primary-checkout {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.checkout-nav .checkout-nav__submit.btn:hover,
.checkout-nav .btn-primary-checkout:hover {
    background: var(--color-accent-hover);
}

.checkout-nav .btn.btn-gray {
    background: transparent;
    color: var(--color-text-muted);
}

.catalog-showcase__price-value {
    color: var(--color-accent);
}

.catalog-showcase__tag--accent {
    color: var(--color-success);
}

.catalog-showcase__cta {
    color: var(--color-text-on-secondary);
    background: var(--color-secondary);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-secondary) 28%, transparent);
}

.catalog-showcase:hover .catalog-showcase__cta {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-secondary) 36%, transparent);
}

.catalog-showcase__pill-dot {
    background: var(--color-success);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-success) 55%, transparent);
}

.home-section-head__title {
    color: var(--color-text);
}

.home-section-head__title-accent {
    color: var(--color-link);
}

.home-section-head__desc {
    color: var(--color-text-muted);
}

.home-section-head__cta {
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
    gap: 6px;
}

.home-catalog .catalog-items {
    margin-top: 20px;
}

.why-us {
    padding: 72px 0 44px;
}

@media screen and (max-width: 560px) {
    .why-us {
        padding: 52px 0 36px;
    }
}

.why-us__eyebrow {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-link);
}

.why-us__title {
    color: var(--color-text);
}

.why-us__title-accent {
    color: var(--color-link);
}

.why-us__lead {
    color: var(--color-text-muted);
}

.why-us__card {
    border-color: var(--color-border);
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--color-surface-raised) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-surface) 96%, transparent) 100%
    );
}

.why-us__card:hover {
    border-color: color-mix(in srgb, var(--color-link) 32%, transparent);
}

.why-us__icon {
    color: var(--color-link-hover);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border-color: var(--color-border);
}

.why-us__icon--price {
    color: var(--color-focus);
}

.why-us__icon--support {
    color: var(--color-text-secondary);
}

.why-us__icon--variety {
    color: var(--color-link);
}

.why-us__icon--delivery {
    color: var(--color-warning);
}

.why-us__icon--update {
    color: var(--color-focus);
}

.why-us__icon--setup {
    color: var(--color-link-hover);
}

.why-us__icon--payment {
    color: var(--color-success);
}

.why-us__card-title {
    color: var(--color-text);
}

.why-us__card-text {
    color: var(--color-text-muted);
}

.why-us__card-text strong {
    color: var(--color-text-secondary);
}

.why-us__badge {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
}

.why-us__link {
    color: var(--color-link);
}

.why-us__link:hover {
    color: var(--color-link-hover);
}

.home-reviews__eyebrow {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-link);
}

.home-reviews__title {
    color: var(--color-text);
}

.home-reviews__title-accent {
    color: var(--color-link);
}

.home-reviews__all-link {
    color: var(--color-link);
}

.home-reviews__all-link:hover {
    color: var(--color-link-hover);
}

.home-reviews__nav-btn {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    color: var(--color-text-muted);
}

.home-reviews__nav-btn:hover {
    border-color: color-mix(in srgb, var(--color-link) 45%, var(--color-border));
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-link) 12%, transparent);
}

.home-reviews__track {
    scrollbar-color: color-mix(in srgb, var(--color-link) 35%, transparent) transparent;
}

.home-reviews__track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-link) 35%, transparent);
}

.home-reviews__card {
    border-color: var(--color-border);
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--color-surface-raised) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-surface) 96%, transparent) 100%
    );
}

.home-reviews__star {
    color: var(--color-border-strong);
}

.home-reviews__star.is-active {
    color: var(--color-warning);
}

.home-reviews__text {
    color: var(--color-text-muted);
}

.home-reviews__footer {
    border-top-color: var(--color-divider);
}

.home-reviews__avatar {
    color: var(--color-link);
    background: color-mix(in srgb, var(--color-link) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-link) 28%, transparent);
}

.home-reviews__name {
    color: var(--color-text-secondary);
}

.home-reviews__product {
    color: var(--color-text-muted);
}

.home-reviews__product:hover {
    color: var(--color-link);
}

.ez-footer {
    background: var(--color-bg-footer);
    border-top-color: var(--color-divider);
}

.ez-bottom {
    background: var(--color-bg);
}

.ez-stat b {
    color: var(--color-text);
}

.ez-btn {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary) !important;
}

.ez-btn:hover {
    background: var(--color-secondary-hover);
}

.ez-more {
    color: var(--color-link) !important;
}

.ez-more:hover {
    color: var(--color-link-hover) !important;
}

.ez-features svg {
    stroke: var(--color-focus);
}

.ez-social a:hover {
    border-color: var(--color-border-strong);
}

@media screen and (max-width: 1135px) {
    .mobile-dock {
        border-color: var(--color-border);
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-surface-raised) 96%, transparent) 0%,
            color-mix(in srgb, var(--color-bg) 96%, transparent) 100%
        );
    }

    .mobile-dock__item.is-active {
        color: var(--color-link);
    }

    .mobile-dock__item.is-active svg path,
    .mobile-dock__item.is-active svg circle {
        stroke: var(--color-link);
    }
}

.site-search-modal__dialog {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.site-search-modal__close {
    color: var(--color-text-muted);
}

.site-search-modal__eyebrow {
    color: var(--color-link);
}

.site-search-modal__hint,
.site-search-modal__empty,
.site-search-modal__loading {
    color: var(--color-text-muted);
}

.site-search-modal__results-wrap {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    scrollbar-color: var(--color-border-strong) transparent;
}

.site-search-modal__results-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
}

.site-search-modal__spinner {
    border-top-color: var(--color-secondary);
}

.site-search-modal .input-searchbar {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border: none;
    box-shadow: none;
}

.site-search-modal .input-searchbar input,
.site-search-modal .site-search-modal__input {
    color: var(--color-text);
    border: none;
    outline: none;
    box-shadow: none;
}

.site-search-modal .input-searchbar input:focus,
.site-search-modal .input-searchbar input:focus-visible,
.site-search-modal .site-search-modal__input:focus,
.site-search-modal .site-search-modal__input:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
}

.site-search-modal .input-searchbar input::placeholder {
    color: var(--color-text-muted);
}

.site-search-modal .product-item {
    background: var(--color-bg);
}

.site-search-modal .product-item:hover {
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg));
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.site-search-modal input:focus-visible {
    outline: none;
    outline-offset: 0;
}