@import url("../js/rich-text.css");
@import url("root.css");

@import url("notifications.css");



html.site-loading {
    min-height: 100%;

    background: var(--color-bg);
}

html.site-loading body {
    visibility: hidden;
    opacity: 0;
}



html.site-loading::after {
    content: "";

    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;

    width: 28px;
    height: 28px;

border: 3px solid var(--color-border);
border-top-color: var(--color-accent);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation: siteLoaderRotation 0.7s linear infinite;
}

html.site-loading::before {
    content:
        attr(data-loading-hint);

    position: fixed;
    top: calc(50% + 42px);
    left: 50%;
    z-index: 99999;

box-sizing: border-box;

display: flex;
align-items: center;

width: max-content;
max-width: calc(100vw - 36px);
min-height: 40px;

padding:
    0
    0
    0
    42px;

color: var(--color-text-secondary);

font-family:
    "Oswald",
    Arial,
    sans-serif;

font-size: 14px;
line-height: 1.4;
text-align: left;
text-wrap: balance;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.8-2.9 8.1-7 10-4.1-1.9-7-5.2-7-10V6l7-3Z'/%3E%3Crect x='8.5' y='10.5' width='7' height='5.5' rx='1.2'/%3E%3Cpath d='M10 10.5V9a2 2 0 0 1 4 0v1.5'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
background-position: 2px center;
background-size: 30px 30px;

    pointer-events: none;

    visibility: hidden;
    opacity: 0;

    transform:
        translate(
            -50%,
            8px
        );

    animation:
        siteVpnHintAppearance
        0.25s
        ease
        6s
        forwards;
}

:root[data-theme="dark"].site-loading::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5aab2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.8-2.9 8.1-7 10-4.1-1.9-7-5.2-7-10V6l7-3Z'/%3E%3Crect x='8.5' y='10.5' width='7' height='5.5' rx='1.2'/%3E%3Cpath d='M10 10.5V9a2 2 0 0 1 4 0v1.5'/%3E%3C/svg%3E");
}

html.site-ready body {
    visibility: visible;
    opacity: 1;

    animation: siteReadyAppearance 0.16s ease-out;
}

@keyframes siteLoaderRotation {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes siteVpnHintAppearance {
    from {
        visibility: visible;
        opacity: 0;

        transform:
            translate(
                -50%,
                8px
            );
    }

    to {
        visibility: visible;
        opacity: 1;

        transform:
            translate(
                -50%,
                0
            );
    }
}

@keyframes siteReadyAppearance {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.site-loading::after {
        animation-duration: 1.4s;
    }

    html.site-ready body {
        animation: none;
    }
}



body {
    font-family: "Oswald", Arial, sans-serif;

    background: var(--color-bg);
    color: var(--color-text);

    line-height: var(--lh-body);
}
a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: var(--button-transition);
}

img {
    display: block;
    max-width: 100%;
}
.content {
    width: 100%;
    max-width: var(--content-width);
    min-width: 0;

    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) 70px;

    box-sizing: border-box;
}
main {
    width: 100%;
    min-width: 0;

    overflow-x: hidden;
}


.game-page #post,
.games-home,
.order,
.reviews,
.products {
    margin-top: var(--space-xl);
}



.logo {
    display: flex;
    align-items: center;
    height: var(--logo-height);
}
.logo svg {
    height: 100%;
    width: auto;
    display: block;
}
.logo img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
}
@keyframes logoGoldMove {
    from {
        filter: brightness(0.96) saturate(0.95);
    }

    25% {
        filter: brightness(1.12) saturate(1.1);
    }

    50% {
        filter: brightness(1.02) saturate(1.25);
    }

    75% {
        filter: brightness(1.15) saturate(1.05);
    }

    to {
        filter: brightness(0.96) saturate(0.95);
    }
}
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#headerLogo {
    flex-shrink: 0;
}



.header-title {
   position: relative;
    display: inline-block;
    color: var(--color-text);
    font-size: calc(var(--logo-height) * 0.65);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
}

.home-showcase-title,
.order-status-instruction h2,
.checkout .order-price strong,
.order-status-game-name,
.game-info h1,
#orderStatusTitle,
.post-modal-title ,
.legal-page h1,
.legal-page h2,
.game-content-section-title,
.products h2,
.order h2,
.games-home h1,
.reviews-hero h1,
.modal-content h2,
.reviews h2 {
   margin-bottom: var(--space-md);
    color: var(--color-text);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}
.modal-content h2 {
   text-align: center;
}

.home-showcase-benefit,
.post-modal-description,
.game-content-expandable-trigger,
.game-content-text,
.game-content-text-main,
.game-content-heading,
.post-action-count,
.game-content-text-normal,
.post-comment-text,
.post-comment-input,
.post-comments-title,
.product h3,
.player-id input,
.modal-content input,
#newPassword,
#nicknameInput,
#reviewText,
.stat-value,
.stat-title,
#reviewsCount,
.orders-description,
.profile-top h3,
.profile-info,
.profile-info p,
.profile-info strong,
.review-header strong,
#reviewsCount,
.selected-product,
#selectedProductTitle,
#selectedProductPrice,
.player-id label,
.order-price span,
.order-price strong,
.profile-name,
.product-price strong,
.cart-item-information span,
.history-price,
.order-product,
.order-id,
.game-home-card h3 {
    border-radius: 0 0 var(--radius) var(--radius);
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
}
.order-status {
    color: var(--color-surface);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
}
.product h3 {
   flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.game-home-card h3 {
   background: var(--color-surface);
}
.profile-name {
   margin-bottom: var(--space-lg);
}
.game-home-card h3 {
   padding: var(--space-md);
    text-align: center;
}

.game-description p,
.legal-page p,
#reviewCounter,
.review-text,
.post-comment-author,
.reviews-hero p,
.legal-page li,
.order-date,
.game-content-text-secondary,
.footer-container a,
.game-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
    word-break: break-word;
}
.legal-page th,
.legal-page td {
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
    word-break: break-word;
}
.footer-container a:hover {
   color: var(--color-text);
}

.old-price {
   color: var(--color-text-secondary);
    font-size: calc(var(--fs-body) / 1.4);
    font-weight: var(--fw-medium);
    text-decoration: line-through;
}




.reviews,
.home-showcase,
.order-progress,
.order:not(.profile-section),
.products {
    margin-top: var(--space-xl);

    padding: var(--space-lg);

    background: var(--color-surface);

    border-radius: var(--radius);
}




.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);

    margin: var(--space-lg) 0;
}
.filter,
#returnToGameButton,
.favorite-button,
.game-content-button,
.post-comment-send,
.post-button,
.buy-button,
.reviews-actions a,
.reviews-load-button,
.profile-action-button,
.modal-content button,
.product-card-quantity,
.login-button,
.product button {
    position: relative;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--button-height);
    padding: 0 var(--button-padding-x);

    background: var(--color-surface);
    color: var(--color-text);

    border-radius: var(--button-radius);

    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);

    line-height: var(--button-height);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease,
        opacity .2s ease;
}
.filter::before,
.favorite-button::before,
#returnToGameButton::before,
.game-content-button::before,
.post-comment-send::before,
.post-button::before,
.buy-button::before,
.reviews-actions a::before,
.product-card-quantity::before,
.reviews-load-button::before,
.profile-action-button::before,
.modal-content button::before,
.login-button::before,
.product button::before {
    box-sizing: border-box;
    content: "";

    position: absolute;
    inset: 0;

    padding: var(--gray-stroke-width);

    border-radius: var(--button-radius);

    background: var(--gray-stroke);
    background-size: 300% 300%;

    animation: var(--gray-stroke-animation);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}
.filter.active::before,
.login-button::before,
.product button.selected::before {
    padding: var(--gold-stroke-width);
    background: var(--gold-stroke);
    background-size: 300% 300%;
    animation: var(--gold-stroke-animation);
}
.filter,
.favorite-button,
.game-content-button,
.post-button,
#returnToGameButton,
.post-comment-send,
.buy-button,
.reviews-actions a,
.reviews-load-button,
.profile-action-button,
.product-card-quantity,
.modal-content button,
.login-button,
.product button {
    isolation: isolate;
}
.filter > *,
.favorite-button > *,
.game-content-button > *,
.post-button > *,
.buy-button > *,
.reviews-actions a > *,
.product-card-quantity > *,
.post-comment-send > *,
.reviews-load-button > *,
.profile-action-button > *,
.modal-content button > *,
.login-button > *,
.product button > * {
    position: relative;
    z-index: 1;
}
.filter:hover,
.game-content-button:hover,
.favorite-button:hover,
.post-button:hover,
#returnToGameButton:hover,
.post-comment-send:hover,
.buy-button:hover,
.product-card-quantity:hover,
.reviews-actions a:hover,
.reviews-load-button:hover,
.profile-action-button:hover,
.modal-content button:hover,
.product button:hover {
    background: var(--color-hover);
    transform: translateY(-1px);
}
.filter.active,
.login-button,
.product button.selected {
    background: var(--button-bg);
    color: var(--button-color);

    border-color: var(--color-text);
}
.filter.active:hover,
.login-button:hover,
.product button.selected:hover {
    background: var(--button-bg-hover);
    transform: translateY(-1px);
}
.reviews-load-button,
.buy-button,
.profile-action-button {
    width: 100%;
}
#loadMoreBtn {
    margin-top: var(--block-gap);
}
.reviews-actions a {
    text-decoration: none;
}
.modal-content button {
    width: 100%;
    margin-bottom: var(--space-xs);
}



#returnToGameButton {
    display: block;

    width: 75%;
    max-width: 760px;

    margin: 0 auto;
}



.products-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
} 
.cart-item,
.product {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);

    padding: var(--space-sm) var(--space-md);

    background: var(--color-bg);
    border-radius: 999px 0 0 999px;
    clip-path: inset(0 0 0 2px round 999px 0 0 999px);

    transition: background .2s ease;
}
.product img {
    width: var(--product-image-size);
    height: var(--product-image-size);

    object-fit: contain;

    border-radius: var(--radius);

    flex-shrink: 0;
}
.product p {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 2px;

    flex-shrink: 0;
    margin-left: var(--space-md);

    font-size: var(--fs-secondary);
    line-height: var(--lh-heading);
}
.product::before {
    content: "";

    position: absolute;

    top: 50%;
    left: calc((var(--product-image-size) + (var(--space-md) * 2)) / 2);

    width: calc(var(--product-image-size) + (var(--space-md) * 2) - 8px);
    height: calc(var(--product-image-size) + (var(--space-md) * 2) - 8px);

    transform: translate(-50%, -50%);

    border-radius: 50%;
    box-sizing: border-box;
    border: var(--gray-stroke-width) solid transparent;

    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        var(--gray-stroke) border-box;

    background-size:
        100% 100%,
        300% 300%;

    animation: var(--gray-stroke-animation);

    z-index: 0;
}
.product>* {
    position: relative;
    z-index: 1;
}
header {
    width: 100%;
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 999;
}
.header-container {
    width: var(--header-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--header-padding-y) 0;
    position: relative;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.header-search {

    position:
        absolute;

    left:
        50%;

    z-index:
        20;

    width:
        min(420px, 36%);

    transform:
        translateX(-50%);

}
.game-search-panel {

    position:
        relative;

    width:
        100%;

}
.game-search-field {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

}
.game-search-icon {

    position:
        absolute;

    right:
        var(--space-md);

    width:
        20px;

    height:
        20px;

    color: var(--color-text);

    pointer-events:
        none;

}
.game-search-open,
.game-search-close {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--button-size);

    height:
        var(--button-size);

    padding:
        0;

    background:
        transparent;

    color: var(--color-text);

    border:
        none;

    border-radius:
        var(--button-radius);

    cursor:
        pointer;

}
.game-search-open svg,
.game-search-close svg {

    width:
        21px;

    height:
        21px;

}
.game-search-results {

    position:
        absolute;

    top:
        calc(
            100% +
            var(--space-xs)
        );

    left:
        0;

    z-index:
        30;

    width:
        100%;

    max-height:
        min(420px, 65vh);

    overflow-y:
        auto;

    padding:
        var(--space-xs);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .16);

}
.game-search-results[hidden] {

    display:
        none;

}
.game-search-result {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--space-sm);

    padding:
        var(--space-xs);

    color: var(--color-text);

    text-decoration:
        none;

    border-radius:
        var(--radius);

    transition:
        background .2s ease;

}
.game-search-result:hover {

    background:
        var(--color-hover);

}
.game-search-result-image {

    display:
        block;

    width:
        44px;

    height:
        44px;

    aspect-ratio: 1;

    flex-shrink:
        0;

    object-fit:
        contain;

    border-radius:
        var(--radius);

}
.game-search-result-name {

    min-width:
        0;

    overflow:
        hidden;

    font-size:
        var(--fs-body);

    font-weight:
        var(--fw-semibold);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}
.game-search-empty {

    padding:
        var(--space-md);

    color:
        var(--color-text-secondary);

    text-align:
        center;

}


.language-selector {
    position: relative;

    display: flex;
    align-items: center;
}

.language-selector[hidden] {
    display: none;
}

.language-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    padding: 0;

    color: var(--color-text);
    background: transparent;

    border: none;
    border-radius: var(--button-radius);

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease;
}

.language-button:hover {
    background: var(--color-hover);

    transform:
        translateY(-1px);
}

.language-button svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}

.language-menu {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    z-index: 1000;

    width: 180px;

    padding: var(--space-xs);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .16);
}

.language-menu[hidden] {
    display: none;
}

.language-option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding:
        var(--space-sm)
        var(--space-md);

    color: var(--color-text);
    background: transparent;

    border: none;
    border-radius: var(--radius);

    font-size: var(--fs-body);
    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.language-option:hover {
    background: var(--color-hover);
}

.language-option.active {
    color: var(--color-text);
    background: var(--color-hover);

    font-weight: var(--fw-semibold);
}

.language-check {
    margin-left: var(--space-sm);

    color: var(--star-color, var(--color-star));

    font-weight: var(--fw-semibold);
}

.language-check svg { display: block; width: 16px; height: 16px; }


.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    padding: 0;

    color: var(--color-text);
    background: transparent;

    border: none;
    border-radius: var(--button-radius);

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease;
}
.theme-toggle:hover {
    background: var(--color-hover);
    transform: translateY(-1px);
}
.theme-icon {
    display: block;
    width: 20px;
    height: 20px;
}
.theme-icon-sun {
    display: none;
}
:root[data-theme="dark"] .theme-icon-moon {
    display: none;
}
:root[data-theme="dark"] .theme-icon-sun {
    display: block;
}
:root[data-theme="dark"] .order-status,
:root[data-theme="dark"] .review-avatar,
:root[data-theme="dark"] .profile-avatar {
    color: #ffffff;
}
footer {
    margin-top: var(--section-gap);
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) var(--space-md);
    background: var(--color-surface-secondary);
}
.footer-container {
    width: var(--header-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}
.profile-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    padding: 0;

    background: transparent;
    border: none;
    border-radius: 50%;

    cursor: pointer;
}
.header-avatar {
    width: 100%;
    height: 100%;

    overflow: hidden;

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

    background: var(--button-bg);
    color: var(--button-color);

    border-radius: 50%;

    font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold);
    line-height: 1;

    transition: var(--button-transition);
}
.header-avatar img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}
.profile-button:hover .header-avatar {
    background: var(--button-bg-hover);
    transform: translateY(-1px);
}
.game-block {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    width: 100%;
}
.game-image {
    flex: 0 0 var(--game-image-width);
    max-width: var(--game-image-width);
}
.game-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.game-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.game-description {
    margin-top: var(--block-gap);
    padding: var(--space-md);

    background: transparent;

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}
#selectedProductImage {
    display: block;
}
#selectedProductImage:not([src]),
#selectedProductImage[src=""] {
    visibility: hidden;
}
.profile-page .order:first-child {
    margin-top: 0;
}
.selected-product {
    margin-bottom: var(--space-md);
}
.selected-product > h3 {
    margin-bottom: var(--space-md);
}
.selected-product-info {
    gap: var(--space-lg);
}
.selected-product-info img {
    width: var(--product-image-size);
    height: var(--product-image-size);

    object-fit: contain;
    flex-shrink: 0;
}
.selected-product-text {
    display: flex;
    flex-direction: column;
    gap: 2px;

    flex: 1;
    min-width: 0;
}

.review-item {
    padding: var(--space-md);

    background: var(--color-bg);

    transition: background .2s ease;
}
.reviews-summary {
    margin-bottom: var(--space-md);
    padding: var(--space-md);

    background: var(--color-bg);
}
#reviewsList {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.review-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.games-home-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
}
.game-home-card {

    position: relative;
    display: flex;
    flex-direction: column;

    overflow: hidden;
    border-radius: var(--radius);

    text-decoration: none;

    transition: opacity .2s ease;
}
.game-home-card:hover {
    opacity: .9;
}
.game-home-card img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
}

.game-favorite-mark {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-danger);
    pointer-events: none;
}
.game-favorite-mark {

    top:
        -2px;

    right:
        -2px;

}


.game-favorite-mark svg {

    display:
        block;

    width:
        22px;

    height:
        22px;


    fill:
        currentColor;

}
.game-maintenance-mark {
    position: absolute;
    top: -2px;
    left: -2px;

    z-index: 2;

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

    width: 34px;
    height: 34px;

    color: var(--color-star);

    pointer-events: none;
}

.game-maintenance-mark svg {
    display: block;

    width: 22px;
    height: 22px;
}
.game-title-row {
    position: relative;

    width: 100%;
}

.game-title-row .favorite-button {
    position: absolute;
    top: 0;
    right: 0;

    margin-top: 0;
}
.favorite-button {
    gap: var(--space-xs);
}


.favorite-button[hidden] {

    display:
        none;

}


.favorite-button-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


.favorite-button-icon svg {

    display:
        block;

    width:
        20px;

    height:
        20px;

}
.favorite-button.is-favorite {

    color:
        var(--color-danger);

}
.favorite-button.is-favorite
.favorite-button-icon svg {

    fill:
        currentColor;

}
.favorite-button:disabled {

    opacity:
        .65;

    cursor:
        wait;

}

.legal-page {
    width: 100%;
    max-width: 900px;
    min-width: 0;

    margin: 0 auto;

    box-sizing: border-box;
}
.legal-page h1 {
    margin-bottom: var(--space-lg);
}
.legal-page h2 {
    margin: var(--space-xl) 0 var(--space-sm);
}
.legal-page p {
    margin-bottom: var(--space-sm);
}
.legal-page li {
    margin-bottom: var(--space-xs);
}
.legal-page table {
    width: 100%;
    margin: var(--space-md) 0;
}
.legal-page th {
    font-weight: var(--fw-semibold);
}
.legal-page th,
.legal-page td {
    padding: var(--space-sm) var(--space-md);

    text-align: left;
    vertical-align: top;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
}
.legal-page ul {
    margin: var(--space-xs) 0 var(--space-md) 24px;
    padding-left: 0;
}



.legal-table-scroll {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: var(--space-md) 0;

    overflow: visible;

    box-sizing: border-box;
}

.legal-table-scroll .policy-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    border-collapse: collapse;
    table-layout: auto;
}

@media (max-width: 768px) {

    .legal-table-scroll,
    .legal-table-scroll .policy-table,
    .legal-table-scroll .policy-table tbody {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .legal-table-scroll .policy-table thead {
        display: none;
    }

    .legal-table-scroll .policy-table tr {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-bottom: var(--space-md);

        overflow: hidden;

        background: var(--color-surface);

        border: 1px solid var(--color-border);
        border-radius: var(--radius);

        box-sizing: border-box;
    }

    .legal-table-scroll .policy-table th,
    .legal-table-scroll .policy-table td,
    .legal-table-scroll .policy-table td:first-child {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: var(--space-sm);

        background: var(--color-surface);

        border: none;
        border-bottom: 1px solid var(--color-border);

        box-sizing: border-box;

        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .legal-table-scroll .policy-table td:first-child {
        color: var(--color-text);
        background: var(--color-surface-secondary);

        font-weight: var(--fw-semibold);
    }

    .legal-table-scroll .policy-table td:last-child {
        border-bottom: none;
    }

}

.profile-page #menuButton {
    display: none;
}
.profile-card {
    background: transparent;
    border-radius: 0;
}
.profile-top {
    display: flex;
    align-items: center;

    height: var(--avatar-size);

    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.order-status.completed,
.order-status.done {
    background: var(--color-success);
    border-color: var(--color-success);
}
.order-status.pending,
.order-status.waiting {
    background: var(--color-warning);
    border-color: var(--color-warning);
}
.order-status.cancelled,
.order-status.canceled {
    background: var(--color-danger);
    border-color: var(--color-danger);
}
#ordersList {

    display: flex;

    flex-direction: column;

    gap:
        var(--block-gap);

}
.order-history-card {

    padding:
        var(--space-md);

    background:
        var(--color-bg);

    border-radius:
        var(--radius);

}
.order-history-main {

    display: grid;

    grid-template-columns:

        auto

        minmax(0, 1fr)

        auto;

    align-items:
        center;

    gap:
        var(--space-md);

}
.order-product-visual {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        calc(
            var(--product-image-size) +
            var(--space-md) * 2 -
            8px
        );

    height:
        calc(
            var(--product-image-size) +
            var(--space-md) * 2 -
            8px
        );

    flex-shrink:
        0;

    border:

        var(--gray-stroke-width)

        solid

        transparent;

    border-radius:
        50%;

    background:

        linear-gradient(
            var(--color-surface),
            var(--color-surface)
        )
        padding-box,

        var(--gray-stroke)
        border-box;

    background-size:

        100% 100%,

        300% 300%;

    animation:
        var(--gray-stroke-animation);

}
.order-product-image {

    width:
        var(--product-image-size);

    height:
        var(--product-image-size);

    object-fit:
        contain;

    border-radius:
        var(--radius);

}



.order-product-visual.multiple {
    position: relative;
    isolation: isolate;
}

.order-product-visual.multiple .order-product-image {
    position: absolute;
    top: 50%;
    left: 50%;

    width: var(--product-image-size);
    height: var(--product-image-size);

    object-fit: contain;
    transform: translate(-50%, -50%);
}



.order-product-visual.multiple .order-product-image:first-child {
    z-index: 3;

    transform: translate(-50%, -25%);
}



.order-product-visual.multiple .order-product-image:nth-child(2) {
    z-index: 1;

    width: calc(var(--product-image-size) * 0.75);
    height: calc(var(--product-image-size) * 0.75);

    transform: translate(-80%, -60%);
}



.order-product-visual.multiple .order-product-image:nth-child(3) {
    z-index: 2;

    width: calc(var(--product-image-size) * 0.75);
    height: calc(var(--product-image-size) * 0.75);

    transform: translate(-20%, -60%);
}




.order-history-information {

    display: flex;

    flex-direction: column;

    min-width:
        0;

}

.order-game-name {

    overflow:
        hidden;

    color:
        var(--color-text-secondary);

    font-size:
        var(--fs-secondary);

    line-height:
        var(--lh-body);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}

.order-product-name {

    overflow:
        hidden;

    color: var(--color-text);

    font-size:
        var(--fs-body);

    font-weight:
        var(--fw-semibold);

    line-height:
        var(--lh-body);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}

.order-history-information .order-id {

    overflow:
        hidden;

    color:
        var(--color-text-secondary);

    font-size:
        var(--fs-secondary);

    line-height:
        var(--lh-body);

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}




.order-history-card .history-price {

    align-self:
        start;

    color: var(--color-text);

    font-size:
        var(--fs-body);

    font-weight:
        var(--fw-bold);

    line-height:
        var(--lh-body);

    white-space:
        nowrap;

}




.order-history-bottom {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-sm);

    margin-top:
        var(--space-md);

}

.order-status-group {

    display: flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-xs);

}

.order-status {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        26px;

    padding:

        0

        var(--space-sm);

    border-radius:
        999px;

    font-size:
        var(--fs-secondary);

    line-height:
        1;

}

.order-date {

    color:
        var(--color-text-secondary);

    font-size:
        var(--fs-secondary);

    line-height:
        var(--lh-body);

    white-space:
        nowrap;

}

.modal {
    position: fixed;
    inset: 0;

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

    padding: var(--space-md);

    background: var(--color-overlay);

    backdrop-filter: blur(6px);

    opacity: 1;

    z-index: 10000;

    transition: opacity .2s ease;
}
.hidden {
    opacity: 0;
    pointer-events: none;
}
.modal-content {
    width: 100%;
    max-width: 420px;

    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    animation: modalOpen .2s ease;
}
@keyframes modalOpen {

    from {
        transform: translateY(15px) scale(.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

}
.modal-content hr {

    margin: var(--space-md) 0;

    border: 0;

    border-top: 1px solid var(--color-border);

}
#googleLoginBtn {

    font-size: var(--fs-secondary);

}
#closeAuthModal,
#closeReviewModal,
#saveReviewBtn {

    margin-top: var(--space-xs);

}
.profile-modal {

    display: flex;

    flex-direction: column;

    align-items: center;

}
.profile-modal .profile-avatar {
    margin-bottom: var(--space-md);
}
.profile-avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    width: var(--avatar-size);
    height: var(--avatar-size);

    flex-shrink: 0;

    background: var(--color-dark);
    border-radius: 50%;

    color: var(--color-surface);

    font-size: var(--fs-secondary);
    font-weight: var(--fw-bold);
    line-height: 1;
}
.profile-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}
.password-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-xs);
}
#averageRating {
    color: var(--color-star);

    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);

    letter-spacing: 1px;
}
.review-avatar,
.profile-avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    width: var(--avatar-size);
    height: var(--avatar-size);

    flex-shrink: 0;

    background: var(--color-dark);
    border-radius: 50%;

    color: var(--color-surface);

    font-size: var(--fs-secondary);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);

    overflow: hidden;
}
.review-avatar img,
.profile-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    border-radius: 50%;
}
.review-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: var(--space-sm);

    margin-bottom: var(--space-xs);
}
.review-header span {
    color: var(--color-accent);

    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);

    letter-spacing: 1px;
}
.reviews-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-sm);

    margin-top: var(--space-md);
}
.rating-stars {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);

    margin-bottom: var(--space-md);
}
.rating-stars span {
    color: var(--color-star);

    font-size: var(--rating-star-size);

    cursor: pointer;

    transition: transform .15s ease;
}
.rating-stars span:hover {
    transform: scale(1.1);
}
#reviewCounter {
    margin-top: var(--space-xs);

    text-align: right;
}
#saveReviewBtn {
    margin-top: var(--space-md);
}
.reviews-hero {
    margin-bottom: var(--space-xl);

    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.reviews-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-xs);

    padding: var(--space-md);

    background: var(--color-surface-secondary);
}
.review-stat {
    display: contents;
}





.game-search-input {

    width:
        100%;

    height:
        var(--button-height);

    padding:

        0

        calc(
            var(--button-size) +
            var(--space-xs)
        )

        0

        var(--space-md);


    background:
    var(--color-bg);

    color: var(--color-text);


    border:
        1px solid
        var(--color-input-border);

    border-radius:
        var(--button-radius);

    outline:
        none;


    font-family:
        inherit;

    font-size:
        var(--fs-body);


    transition:

        border-color .2s ease,

        background .2s ease;

}
.game-search-input:focus {

    border-color: var(--color-text);

}
.game-search-input::-webkit-search-cancel-button {

    display:
        none;

}

.player-id {
    margin-bottom: var(--space-md);
}
.player-id input,
.post-comment-input,
.modal-content input,
#newPassword,
#nicknameInput,
#reviewText {
    width: 100%;
    height: var(--button-height);

    padding: 0 var(--space-sm);

    background: var(--color-surface);

    border: 1px solid var(--color-input-border);
    border-radius: 0;

    outline: none;

    transition: border-color .2s ease;
}
.player-id input:focus,
.post-comment-input:focus,
.modal-content input:focus,
#newPassword:focus,
#nicknameInput:focus,
#reviewText:focus {
    border-color: var(--color-text);
}
.password-input-wrap {
    position: relative;

    width: 100%;
}

.password-input-wrap #password,
.password-input-wrap #newPassword {
    padding-right: 42px;
}

.modal-content .password-visibility-button,
.password-visibility-button {
    position: absolute;
    top: 50%;
    right: var(--space-sm);

    z-index: 2;

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

    width: 20px;
    min-width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    overflow: visible;

    color: var(--color-text-secondary);
    background: transparent !important;

    border: 0;
    border-radius: 0;
    outline: 0;

    box-shadow: none;

    line-height: 1;

    transform: translateY(-50%) !important;
    transition: none;

    isolation: auto;
}

.modal-content .password-visibility-button::before,
.password-visibility-button::before {
    content: none;

    display: none;

    animation: none;
}

.modal-content .password-visibility-button:hover,
.password-visibility-button:hover,
.modal-content .password-visibility-button:focus,
.password-visibility-button:focus {
    color: var(--color-text);
    background: transparent !important;

    transform: translateY(-50%) !important;
}

.password-visibility-button svg {
    display: block;

    width: 20px;
    height: 20px;
}
#paymentEmail {
    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        opacity .2s ease;
}

#paymentEmail.payment-email-prefilled:not(:focus) {
    background:
        var(--color-surface-secondary);

    border-color:
        var(--color-border);

    color:
        var(--color-text-secondary);

    opacity:
        .72;
}

#paymentEmail:focus {
    background:
        var(--color-surface);

    color: var(--color-text);

    opacity:
        1;
}
.modal-content input {
    margin-bottom: var(--space-sm);
}
#reviewText {
    min-height: var(--review-text-height);
    resize: vertical;
}



.auth-error {

    display: none;

    margin:
        calc(var(--space-lg) * -1)
        calc(var(--space-lg) * -1)
        var(--space-md);

    padding:
        var(--space-sm)
        var(--space-lg);


    background: var(--color-danger);

    color: var(--color-surface);


    font-size: var(--fs-body);

    font-weight: var(--fw-medium);

    line-height: var(--lh-body);


    border-radius:
        var(--radius)
        var(--radius)
        0
        0;

}
.auth-error.show {

    display: block;

}




.game-maintenance-notice,
.product-maintenance-notice {
    width: 100%;
    box-sizing: border-box;
    text-align: center;


    background: var(--button-bg); 


    color: var(--button-color); 
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-body);


    text-transform: uppercase;
    letter-spacing: 1px;


    border: none;
    border-radius: 0;

    padding: 0px 16px;
}
.game-maintenance-notice {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-bottom: var(--space-md);
}
.product-maintenance-notice {
    margin-bottom: var(--space-sm);
}

.product-maintenance-notice {
    margin-bottom: 0;
}


.product-maintenance-notice + .product {
    margin-top: calc(var(--space-sm) * -1);
}


#postsList {
    display: flex;

    flex-wrap: nowrap;

    gap: var(--space-lg);

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
}
#postsList::-webkit-scrollbar {
    display: none;
}
#postsList .post-card {
    flex: 0 0 calc(
        ((100% - (var(--space-lg) * 3)) / 4) * 1.75
    );

    width: calc(
        ((100% - (var(--space-lg) * 3)) / 4) * 1.75
    );
}

.post-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: var(--radius);

    cursor: pointer;

    transition: opacity .2s ease;

    visibility: hidden;
}
.post-card.loaded {
    visibility: visible;
}
.post-card-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}
.post-card:hover {
    opacity: .9;
}
.post-modal {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: var(--space-md);

    background: var(--color-overlay);

    backdrop-filter: blur(6px);

    opacity: 1;

    transition: opacity .2s ease;
}
#postModal.hidden {
    opacity: 0;

    pointer-events: none;
}
.post-modal-content {
    position: relative;

    width: 100%;
    max-width: 700px;
    margin: 0 auto;

    max-height: calc(100vh - (var(--space-md) * 2));

    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);
}
.post-comments-close,
.post-modal-close {
    position: absolute;

    top: var(--space-md);
    right: var(--space-md);

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    padding: 0;

    background: transparent;
    color: white;

    border: none;
    border-radius: 0;

    font-size: calc(var(--button-size) * 1);
    line-height: 1;

    mix-blend-mode: difference;

    cursor: pointer;
}
.post-modal-list {
    width: 100%;

    max-height: calc(100vh - (var(--space-md) * 2));

    overflow-y: auto;

    overscroll-behavior: contain;
}
.post-modal-item {
    width: 100%;

    background: var(--color-surface);
}
.post-modal-item + .post-modal-item {
    border-top: 1px solid var(--color-border);
}
.post-modal-image {
    display: block;

    width: 100%;

    height: auto;

    max-height: 500px;

    object-fit: cover;
}
.post-modal-body {
    display: flex;

    flex-direction: column;

    gap: var(--space-md);

    padding: var(--space-lg);
}
.post-actions {
    display: flex;

    align-items: center;

    gap: var(--space-sm);

    padding-top: var(--space-sm);

    border-top: 1px solid var(--color-border);
}
.post-action {
    display: flex;

    align-items: center;
    justify-content: center;

    width: var(--button-size);
    height: var(--button-size);

    padding: 0;

    background: transparent;

    color: var(--color-text);

    border-radius: 50%;

    font-size: var(--fs-body);

    transition:
        background .2s ease,
        transform .15s ease;
}
.post-action:hover {
    background: var(--color-bg);

    transform: translateY(-1px);
}
body.post-modal-open {
    overflow: hidden;
}





.post-comments-panel {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 400px;

    background: var(--color-surface);

    border-top: 1px solid var(--color-border);

    border-radius: var(--radius) var(--radius) 0 0;

    overflow: hidden;

    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
}


.post-comments-panel.hidden {
    display: flex; 
    transform: translateY(100%);
    pointer-events: none;
}

.post-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px;

}

.post-comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 16px;
    background: var(--color-bg);
}

.post-comments-form {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 16px;
}

.post-comment {
    margin-bottom: 12px;
}

.post-comment-input {
    flex: 1;
}


.post-comments-header {
    position: relative;
}


.post-comments-close {
    top: 50%;
    transform: translateY(-50%);
}






.post-actions {
    display: flex;
    align-items: center;
    gap: 16px; 
    padding-top: var(--space-sm);
}


.post-action {
    display: inline-flex;
    align-items: center;
    gap: 6px; 
    
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;

    color: var(--color-text);
    font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold);
    
    cursor: pointer;
    line-height: 1;
}


.post-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2em; 
    line-height: 1;
}

.post-action-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}


.post-action-count {
    font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold);
    line-height: 1;
}


.post-like-button.liked,
.post-like-button.liked .post-action-count,
.post-like-button.liked .post-action-icon {
    color: var(--color-danger);
}

@media (max-width: 768px) {
    .posts-list {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .post-card {
        flex-shrink: 0;
    }
}







/* ================= GAME CONTENT ================= */

#gameContent {
    display: flex;
    flex-direction: column;

    gap: var(--space-xl);

    margin-top: var(--space-xl);
}




.game-content-section {
    display: flex;
    flex-direction: column;

    gap: var(--space-md);

    padding: var(--space-lg);

    background: var(--color-surface);

    border-radius: var(--radius);
}




.game-content-blocks {
    display: flex;
    flex-direction: column;

    gap: var(--space-md);
}




.game-content-image-wrapper {
    width: 100%;

    display: flex;
    justify-content: center;
}


.game-content-image {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: var(--radius);
}


.game-content-expandable {
    display: flex;
    flex-direction: column;

    gap: var(--space-md);
}




.game-content-expandable-trigger {
    display: inline;

    align-self: flex-start;

    padding: 0;

    background: none;

    border: none;

    text-align: left;

    text-decoration: underline;
    text-underline-offset: 3px;

    cursor: pointer;

    transition:
        color .2s ease,
        opacity .2s ease;
}


.game-content-expandable-trigger:hover {
    opacity: .7;
}




.game-content-expandable-content {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--space-md);
}

.game-content-expandable-content[hidden] {
    display: none;
}


.lum-navigation-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.lum-navigation-progress.is-visible {
    opacity: 1;
}

.lum-navigation-progress::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    content: "";
    background: var(--gray-stroke);
    box-shadow: 0 0 12px var(--color-border);
    animation: lum-navigation-progress-move 1.6s linear infinite;
    will-change: transform;
}

.lum-navigation-progress.is-complete::before {
    width: 100%;
    animation: none;
    transform: translateX(0);
}

.game-home-card.lum-navigation-pending {
    opacity: 0.72;
    transform: scale(0.985);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.footer-company {
    width: 100%;
    text-align: center;

    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
}

.footer-company p {
    margin: 0;
}

.footer-company p:first-child {
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.footer-company a {
    display: inline-block;
    margin-top: var(--space-xs);
}

.footer-copyright {
    width: 100%;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
}

.footer-copyright p {
    margin: 0;
}

.footer-copyright p + p {
    margin-top: var(--space-xs);
}

:root[data-theme="dark"] .filter.active,
:root[data-theme="dark"] .login-button,
:root[data-theme="dark"] .product button.selected {
    background: var(--button-bg);
    color: var(--button-color);
    border-color: var(--color-text);
}

:root[data-theme="dark"] .filter.active:hover,
:root[data-theme="dark"] .login-button:hover,
:root[data-theme="dark"] .product button.selected:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-bg-hover);
}

.order-price,
.player-id {
    margin-top: var(--space-md);
}
#ordersList {
    margin-top: var(--space-md);
}

.breadcrumbs {
    width: 100%;

    background: var(--color-bg);
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);

    width: calc(var(--header-width) - 3%);

margin: 0 auto;
padding: var(--space-sm) 0 0;

    list-style: none;
}

.breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    min-width: 0;

    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
}

.breadcrumbs-item + .breadcrumbs-item::before {
    content: "—";

    color: var(--color-text-secondary);
}

.breadcrumbs-link {
    color: var(--color-text-secondary);

    transition: color .2s ease;
}

.breadcrumbs-link:hover {
    color: var(--color-text);
}

.breadcrumbs-current {
    color: var(--color-text);

    font-weight: var(--fw-semibold);
}

.order-legal {
    margin-top: var(--space-sm);

    color: var(--color-text-secondary);

    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
}

.order-legal a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.order-legal a:hover {
    color: var(--color-text);
}



.home-showcase {

    overflow: hidden;

}




.home-showcase-marquee {

    position: relative;

    overflow: hidden;

    padding:
        var(--space-lg)
        0
        var(--space-md);

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

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 9%,
            #000 91%,
            transparent
        );

}

.home-showcase-track {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    width: max-content;

    animation:
        home-showcase-scroll
        var(--showcase-duration, 34s)
        linear
        infinite;

}

.home-showcase-product {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        calc(
            var(--product-image-size) +
            var(--space-md) * 2 -
            8px
        );

    height:
        calc(
            var(--product-image-size) +
            var(--space-md) * 2 -
            8px
        );

    flex:
        0 0
        calc(
            var(--product-image-size) +
            var(--space-md) * 2 -
            8px
        );

    border:
        var(--gray-stroke-width)
        solid
        transparent;

    border-radius:
        50%;

    background:

        linear-gradient(
            var(--color-surface),
            var(--color-surface)
        )
        padding-box,

        var(--gray-stroke)
        border-box;

    background-size:

        100% 100%,

        300% 300%;

    animation:
        var(--gray-stroke-animation);

}

.home-showcase-product img {

    width:
        var(--product-image-size);

    height:
        var(--product-image-size);

    object-fit:
        contain;

    border-radius:
        var(--radius);

}

@keyframes home-showcase-scroll {

    to {

        transform:
            translateX(
                calc(
                    -50% -
                    var(--space-md) / 2
                )
            );

    }

}




.home-showcase-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding:

        var(--space-md)

        var(--space-lg)

        var(--space-lg);

    text-align: center;

}





.home-showcase-benefits {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-lg);

    margin-top:
        var(--space-lg);

}

.home-showcase-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.home-showcase-benefit svg {

    width:
        18px;

    height:
        18px;

    flex-shrink:
        0;

}

.benefit-speed svg {
    color: var(--color-accent);
}

.benefit-price svg {
    color: var(--color-accent);
}

.benefit-official svg {
    color: var(--color-accent);
}

:root[data-theme="dark"] .benefit-speed svg {
    color: var(--color-accent);
}

:root[data-theme="dark"] .benefit-price svg {
    color: var(--color-accent);
}

:root[data-theme="dark"] .benefit-official svg {
    color: var(--color-accent);
}

.home-showcase-review {

    display:
        block;

    width:
        100%;

    margin-top:
        var(--space-lg);

    text-align:
        left;

    transition:

        opacity .26s ease,

        transform .26s ease;

}

.home-showcase-review[hidden],

.home-showcase-marquee[hidden] {

    display:
        none;

}


.home-showcase-review.is-changing {

    opacity:
        0;

    transform:
        translateY(
            8px
        );

}



.auth-modal-content h2 {
    margin-bottom: var(--space-md);
    text-align: center;
}

.auth-providers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    width: 100%;
}

.modal-content .auth-provider-button {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    line-height: 1;
}

.modal-content .auth-provider-button::before {
    border-radius: 50%;
}

.auth-provider-button svg {
    position: relative;
    z-index: 1;

    display: block;

    width: 28px;
    height: 28px;
}



@media (max-width: 480px) {
    .auth-providers {
        gap: var(--space-xs);
    }

    .modal-content .auth-provider-button {
        flex-basis: 52px;

        width: 52px;
        height: 52px;
    }

    .auth-provider-button svg {
        width: 26px;
        height: 26px;
    }
}





@media (max-width: 768px) {


    .home-showcase-title {

        font-size:
            clamp(
                24px,
                6vw,
                34px
            );

    }

}

@media (max-width: 480px) {


    .home-showcase-content {

        padding-right:
            var(--space-md);

        padding-left:
            var(--space-md);

    }

    .home-showcase-benefits {

        gap:
            var(--space-xs);

    }

    .home-showcase-benefit {

        font-size:
            11px;

    }

}



@keyframes lum-navigation-progress-move {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(310%);
    }
}


@media (max-width: 768px) {
    :root {
        --header-width: 95%;
    }
    .games-home-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    :root {
        --header-width: 95%;
    }
    .games-home-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

.header-search {

    position:
        static;

    width:
        auto;

    margin-left:
        auto;

    transform:
        none;

}

.header-search + .header-actions {

    margin-left:
        var(--space-sm);

}

header.game-search-active
.header-search {

    width:
        100%;

    margin-left:
        0;

}


    .game-search-open {

        display:
            flex;

    }


    .game-search-panel {

        display:
            none;

    }


    header.game-search-active
    .header-container {

        width:
            var(--header-width);

    }


    header.game-search-active
    .header-brand,

    header.game-search-active
    .header-actions
    > :not(.header-search) {

        display:
            none;

    }


    header.game-search-active
    .header-search {

        width:
            100%;

    }


    header.game-search-active
    .game-search-open {

        display:
            none;

    }


    header.game-search-active
    .game-search-panel {

        display:
            block;

        width:
            100%;

    }


    header.game-search-active
    .game-search-close {

        position:
            absolute;

        right:
            0;

        display:
            flex;

    }


    header.game-search-active
    .game-search-icon {

        right:
            calc(
                var(--button-size) +
                var(--space-sm)
            );

    }


    header.game-search-active
    .game-search-input {

        padding-right:
            calc(
                var(--button-size) * 2 +
                var(--space-md)
            );

    }

}

/* ================= STATUS PAGE ================= */


.order-status-loading,
.order-status-error {
    padding:
        var(--space-xl)
        var(--space-md);

    text-align: center;
}

.order-status-error h1 {
    margin-bottom: var(--space-sm);
}

.order-status-error p {
    margin-bottom: var(--space-lg);

    color: var(--color-text-secondary);
}

.order-status-heading {
    margin-bottom: var(--space-lg);

    text-align: center;
}

.order-status-heading h1 {
    margin:
        var(--space-sm)
        0;
}

.order-status-badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        0
        var(--space-sm);

    background:
        var(--color-surface-secondary);

    color:
        var(--color-text-secondary);

    border-radius: 999px;

    font-size:
        var(--fs-secondary);

    font-weight:
        var(--fw-semibold);

    line-height: 1;
}

#orderStatusGameImage {
    width: 76px;
    height: 76px;

    flex-shrink: 0;

    object-fit: contain;

    border-radius: var(--radius);
}

.order-status-instruction {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);

    border-top:
        1px
        solid
        var(--color-border);
}

.order-status-instruction p {
    white-space: pre-line;

    color: var(--color-text-secondary);
}

#orderInstructionText:empty {
    display: none;
}

#orderInstructionImage {
    display: block;

    width: 75%;
    max-width: 760px;
    height: auto;

    margin:
        var(--space-md)
        auto
        0;

    object-fit: contain;

    border-radius: var(--radius);
}

.order-status-profile-note {
    margin:
        var(--space-lg)
        0
        var(--space-md);

    color: var(--color-text-secondary);

    text-align: center;
}

.order-status-profile-note a {
    color: inherit;

    font-weight: var(--fw-semibold);
}

.order-status-badge.pending {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

.order-status-badge.paid,
.order-status-badge.completed {
    background: var(--color-success);
    color: #ffffff;
}

.order-status-badge.cancelled {
    background: var(--color-danger);
    color: #ffffff;
}

.checkout .order-card {
    display: grid;
    gap: var(--space-lg);
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cart-empty {
    margin: 0;
    padding: var(--space-sm) 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-body);
}

.cart-item {
    min-height: 0;
    padding: 6px var(--space-md);
    border-radius: 0;
    clip-path: none;
}

.cart-item-information {
    display: contents;
}

.cart-item-information strong {
    flex: 1;
    min-width: 0;

    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);

    overflow-wrap: anywhere;
}

.cart-item-information span {
    flex-shrink: 0;
    white-space: nowrap;
}

.cart-item .product-card-quantity {
    flex-shrink: 0;
}

.checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.checkout .player-id {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    margin: 0;
}

.checkout .player-id label {
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    font-weight: var(--fw-regular);
}

.checkout-payment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 40%);
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.checkout .order-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.checkout .order-price span {
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    font-weight: var(--fw-regular);
}

.checkout .order-legal {
    margin: 0;
}

@media (max-width: 480px) {
    .checkout-fields,
    .checkout-payment {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout .order-price {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-sm);
    }
}

.order-product-name.order-products-list {
    overflow: visible;

    white-space: pre-line;

    text-overflow: clip;
}

.order-status-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin:
        0
        auto
        var(--space-sm);

    color: var(--color-text-secondary);
}

.order-status-icon svg {
    width: 100%;
    height: 100%;
}

.order-status-icon.processing {
    color: var(--color-text-secondary);
}

.order-status-icon.processing svg {
    animation:
        orderStatusSpin
        0.9s
        linear
        infinite;
}

.order-status-icon.completed {
    color: var(--color-success);
}

.order-status-icon.cancelled {
    color: var(--color-danger);
}

.order-status-support-link {
    display: inline-block;

    margin-top: var(--space-sm);

    color: var(--color-danger);

    font-weight: var(--fw-semibold);
}

@keyframes orderStatusSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 480px) {

    #orderInstructionImage {
        width: 100%;
    }

}

.order-status-icon[hidden],
.order-status-support-link[hidden] {
    display: none;
}

#orderInstructionText {
    width: 75%;
    max-width: 760px;

    margin:
        0
        auto;

    overflow-wrap: anywhere;
}

@media (max-width: 480px) {

    #orderInstructionText {
        width: 100%;
    }

}

.order-status-product {
    display: grid;

    gap: var(--space-md);

    padding: var(--space-md);

    background: var(--color-bg);

    border-radius: var(--radius);
}

.order-status-game {
    display: flex;

    align-items: center;

    gap: var(--space-md);
}

.order-status-game-info {
    min-width: 0;
}

.order-status-label {
    display: block;

    margin-bottom: 3px;

    color: var(--color-text-secondary);

    font-size: var(--fs-secondary);
}

.order-status-purchase-details {
    display: grid;

    gap: var(--space-md);

    padding-top: var(--space-md);

    border-top:
        1px
        solid
        var(--color-border);
}

.order-status-field {
    min-width: 0;
}

.order-status-items {
    display: grid;

    gap: 6px;
}

.order-status-item {
    margin: 0;

    overflow-wrap: anywhere;

    color: var(--color-text);
}

.order-status-meta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    
        align-items: start;

    gap: var(--space-md);
}

.order-status-field strong {
    display: block;

    overflow-wrap: anywhere;

    color: var(--color-text);
}

.order-status-total {
    color: var(--color-text) !important;
}

@media (max-width: 480px) {


    .order-status-heading {
        margin-bottom: var(--space-md);
    }

    .order-status-badge {
        min-height: 26px;

        padding:
            0
            var(--space-sm);

        font-size: 14px;
    }

    .order-status-icon {
        width: 44px;
        height: 44px;

        margin-bottom: var(--space-xs);
    }

    .order-status-product {
        gap: var(--space-sm);

        padding: var(--space-md);
    }

    .order-status-game {
        gap: var(--space-sm);
    }

    #orderStatusGameImage {
        width: 64px;
        height: 64px;
    }

    .order-status-purchase-details {
        gap: var(--space-sm);

        padding-top: var(--space-sm);
    }

    .order-status-label {
        margin-bottom: 2px;

        font-size: 14px;
    }

    .order-status-product .order-status-items .order-status-item {
        font-size: var(--fs-secondary);
        line-height: 1.35;
    }

    .order-status-meta {
        gap: var(--space-sm);
    }

    .order-status-field strong {
        font-size: var(--fs-body);
        line-height: 1.2;
    }

    .order-status-instruction {
        margin-top: var(--space-md);
        padding-top: var(--space-md);
    }

    #orderInstructionText {
        font-size: var(--fs-secondary);
        line-height: 1.5;
    }

    .order-status-profile-note {
        margin:
            var(--space-md)
            0;

        font-size: var(--fs-secondary);
        line-height: 1.45;
    }

}
.order-status-instruction h2 {
    width: 75%;
    max-width: 760px;

    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 480px) {

    .order-status-instruction h2 {
        width: 100%;
    }

}

@media (max-width: 480px) {

    #returnToGameButton {
        width: 100%;
    }

}


@media (max-width: 768px) {

    input:not(
        [type="checkbox"]
    ):not(
        [type="radio"]
    ):not(
        [type="file"]
    ),
    textarea,
    select {
        font-size: 16px;
    }

}

.orders-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    margin-top: var(--block-gap);
}

.orders-pagination-info {
    min-width: 130px;

    color: var(--color-text-secondary);

    font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold);
    text-align: center;
}

.orders-pagination .filter:disabled {
    opacity: .45;

    cursor: default;
    transform: none;
}

.reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    margin-top: var(--block-gap);
}

#reviewsPageInfo {
    min-width: 130px;

    color: var(--color-text-secondary);

    font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold);
    text-align: center;
}

.reviews-pagination .filter:disabled {
    opacity: .45;

    cursor: default;
    transform: none;
}

.orders-pagination .filter,
.reviews-pagination .filter {
    margin: 0;

    line-height: 1;
}

.orders-pagination-info,
#reviewsPageInfo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: var(--button-height);

    line-height: 1;
}

#reviewsPagination #loadMoreBtn {
    margin-top: 0;
}

.password-input-wrap {
    height: var(--button-height);

    line-height: 0;
}

.password-input-wrap > input {
    display: block;
}

.orders-pagination .filter,
.reviews-pagination .filter {
    width: var(--button-size);
    min-width: var(--button-size);

    padding: 0;

    font-size: 0;
}

.orders-pagination .filter svg,
.reviews-pagination .filter svg {
    display: block;

    width: 18px;
    height: 18px;
}

.auth-modal-content .password-input-wrap {
    margin-bottom: var(--space-sm);
}

.auth-modal-content .password-input-wrap #password {
    margin-bottom: 0;
}

.game-favorite-mark,
.game-maintenance-mark {
    filter:
        drop-shadow(
            0 1px 2px
            rgba(0, 0, 0, .85)
        );
}

.game-maintenance-mark {
    color: var(--color-star);
}

.game-maintenance-mark svg {
    stroke-width: 2.5;
}



.profile-avatar-settings {
    display: grid;
    gap: var(--space-md);

    margin-top: var(--space-lg);
    padding-top: var(--space-lg);

    border-top: 1px solid var(--color-border);
}

.profile-avatar-settings-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
}

.profile-avatar-settings-top h3 {
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.profile-avatar-settings-top p {
    margin-top: var(--space-xs);

    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    line-height: var(--lh-body);
}

.avatar-picker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm);
}

.avatar-picker[hidden] {
    display: none;
}

.avatar-picker-item {
    aspect-ratio: 1;
    overflow: hidden;

    padding: 0;

    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: 50%;

    cursor: pointer;
}

.avatar-picker-item:hover,
.avatar-picker-item.active {
    border-color: var(--color-text);
}

.avatar-picker-item.active {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.avatar-picker-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media (max-width: 768px) {

    .profile-avatar-settings-top {
        align-items: stretch;
        flex-direction: column;
    }

    .avatar-picker {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.product-card-actions {
    display: flex;

    width: auto;

    flex-shrink: 0;
}

.product-card-add {
    width: auto;
    min-width: 0 !important;
}

.product-card-quantity {
    display: grid;
grid-template-columns:
    28px
    20px
    28px;

    align-items: center;

    width: auto;
    padding: 0;
}

.product-card-quantity[hidden],
.product-card-add[hidden] {
    display: none;
}

:is(.product, .cart-item) .product-card-quantity-button {
width: 28px;
min-width: 28px;
    height: 100%;

    padding: 0;

    background: transparent;
    color: inherit;

    border: 0;
    border-radius: 0;

    font-size: 19px;
    line-height: 1;
}

:is(.product, .cart-item) .product-card-quantity-button::before {
    display: none;
}

:is(.product, .cart-item) .product-card-quantity-button:hover {
    background: transparent;
    color: inherit;

    transform: none;
}

:is(.product, .cart-item) .product-card-quantity-button:disabled {
    opacity: 0.45;
}

.product-card-quantity-value {
    min-width: 0;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;

    font-size: var(--button-font-size);
    font-weight: var(--fw-semibold);
    text-align: center;
}

@media (max-width: 480px) {

.product-card-quantity {
    grid-template-columns:
        28px
        20px
        28px;
}

:is(.product, .cart-item) .product-card-quantity-button {
    width: 28px;
    min-width: 28px;
}
}



.email-verification-view {
    text-align: center;
}

.email-verification-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 auto var(--space-md);

    background: rgba(46, 125, 50, 0.12);
    color: var(--color-success);

    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: 50%;

    font-size: 28px;
    font-weight: var(--fw-semibold);
}

.email-verification-view h2 {
    margin-bottom: var(--space-sm);
}

.email-verification-view p {
    margin: 0;

    color: var(--color-text-secondary);
    line-height: var(--lh-body);
}

.email-verification-address {
    display: block;

    margin: var(--space-sm) 0;

    overflow-wrap: anywhere;

    color: var(--color-text);
    font-size: var(--fs-body);
}

.email-verification-hint {
    margin-bottom: var(--space-lg) !important;
}

.email-verification-view button {
    width: 100%;
    min-height: var(--button-height);
}

.email-verification-view button + button {
    margin-top: var(--space-sm);
}

@media (max-width: 767px) {

    .email-verification-view {
        font-size: 16px;
    }

    .email-verification-view button {
        min-height: 46px;
    }
}

#authFormView.hidden,
.email-verification-view.hidden {
    display: none;
}

#continuePaymentButton {
    display: block;
    width: 75%;
    max-width: 760px;
    margin: 16px auto;
}

#continuePaymentButton[hidden] {
    display: none;
}

@media (max-width: 480px) {
    #continuePaymentButton {
        width: 100%;
    }
}

#postCommentsMore[hidden] {
    display: none;
}

#postCommentsMore {
    width: auto;
    align-self: center;
    margin: 8px 16px;
    padding: 8px 14px;
    font-size: 14px;
}
.auth-provider-button[hidden] {
    display: none;
}

/* Shared palette for keyboard focus and text selection in both themes. */
::selection {
    background: #e9c477;
    color: #17150f;
}
input::selection, textarea::selection {
    background: #e9c477;
    color: #17150f;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* LUM storefront — supplied dark and gold reference. */
:root {
    --content-width: 1120px;
    --header-width: 1120px;
    --footer-width: 1120px;
    --radius: 10px;
    --button-radius: 8px;
    --button-height: 42px;
    --button-size: 42px;
    --fs-h1: clamp(25px, 2.7vw, 33px);
    --fs-h2: clamp(21px, 2.2vw, 27px);
    --fs-body: 14px;
    --fs-secondary: 13px;
    --lh-body: 1.55;
}
body { background: #0C1015; font-family: Arial, "Segoe UI", sans-serif; }
main { overflow: visible; }
h1, h2, h3, .header-title, .store-nav, .store-primary, .store-text-link, .store-benefit { font-family: "Oswald", Arial, sans-serif; }
h1, h2, h3 { color: var(--color-text); font-weight: 500; letter-spacing: .005em; }
.content { max-width: var(--content-width); padding: 22px 32px 36px; }
.content > *, .game-shop-layout > *, .account-layout > *, .games-home-list > *, .products-list > *, .game-info, .review-content, .header-search, .order-status-game-info { min-width: 0; }
header { --header-control-gap: 10px; background: linear-gradient(110deg, #090D11, #151A20 60%, #090D11); border-bottom: 1px solid #ffffff0d; }
.header-container { width: calc(100% - 64px); max-width: 1056px; min-height: 70px; gap: var(--header-control-gap); }
.header-brand { gap: 10px; flex-shrink: 0; }
.header-title { color: #F4F4F5; font-size: 24px; font-weight: 600; white-space: nowrap; text-shadow: none; }
.header-title::before, .header-title::after { display: none; }
.logo { height: 42px; }
.logo img { animation: none; filter: none; }
.store-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.store-nav a { position: relative; padding: 10px 14px; color: #A7ADB5; font-size: 15px; white-space: nowrap; }
.store-nav a:hover { color: #E2C15A; }
.home-page .store-nav-home { color: #E2C15A; border-radius: 28px; background: #ffffff06; }
.home-page .store-nav-home::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: #D4AF37; }
.header-search { position: relative; left: auto; transform: none; flex: 1 1 230px; width: auto; max-width: 340px; margin-left: auto; }
.game-search-input { background: #11182080; border: 1px solid #35404B; border-radius: 28px; height: 44px; color: var(--color-text); }
.header-actions { flex-shrink: 0; gap: var(--header-control-gap); }
.header-avatar { border: 0; box-shadow: none; }
.theme-toggle { display: none !important; }
.breadcrumbs { max-width: 1120px; margin: 0 auto; padding: 16px 32px 0; background: transparent; }
.breadcrumbs-list { width: 100%; padding: 0; flex-wrap: wrap; gap: 6px 10px; }
.breadcrumbs-item { max-width: 100%; }
.breadcrumbs-link, .breadcrumbs-current { overflow-wrap: anywhere; }
.breadcrumbs-item + .breadcrumbs-item::before { content: "/"; }
.home-page .breadcrumbs { display: none; }
.store-hero { position: relative; margin-top: 22px; background: #111820 url("../Benefits.png") center / cover no-repeat; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
/* Align the desktop hero edges with the content inside its 32px gutters. */
@media (min-width: 769px) {
    .store-hero {
        width: calc(100% - 64px);
        max-width: calc(var(--content-width) - 64px);
        margin-inline: auto;
    }
}
.store-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #06090bdb 0%, #070a0c7a 38%, transparent 70%), linear-gradient(0deg, #0C10154d, transparent 45%); pointer-events: none; }
.store-hero-inner { position: relative; max-width: 1120px; min-height: 0; margin: 0 auto; padding: 24px 48px 22px; display: flex; align-items: center; }
.store-hero-copy { width: 540px; max-width: 55%; }
.store-eyebrow { color: var(--color-accent); font-size: 11px; letter-spacing: .09em; margin-bottom: 12px; }
.store-hero h1 { font-family: Arial, sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 37px); line-height: 1.06; letter-spacing: -.025em; margin: 0; }
.store-hero h1 em { font-style: normal; color: #D4AF37; }
.store-hero-description { max-width: 395px; margin: 12px 0 16px; font-size: 14px; line-height: 1.45; color: #F4F4F5; }
.store-primary { display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 24px; min-height: 44px; padding: 10px 26px; border-radius: 9px; background: var(--finish-button); color: #090D11; font-size: 16px; font-weight: 600; box-shadow: 0 6px 25px #D4AF3712; }
/* Optical alignment for the Oswald label inside the centered flex row. */
.store-primary > [data-i18n] { display: block; transform: translateY(-.06em); }
.store-primary:focus-visible { outline-color: #E2C15A; }
.store-primary:hover { color: #090D11; background: var(--finish-button-hover); }
.store-hero-benefits { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.store-benefit { display: flex; align-items: center; min-width: 0; gap: 14px; font-size: 15px; line-height: 1.5; }
.store-benefit svg { width: 36px; height: 36px; color: var(--color-accent); flex: 0 0 auto; }
.store-hero-benefits .store-benefit { font: 12px/1.35 Arial, sans-serif; max-width: none; flex: 0 0 auto; gap: 8px; }
.store-benefit > [data-i18n="home.speed"] { white-space: nowrap; flex-shrink: 0; }
.store-hero-benefits svg { width: 27px; height: 27px; }
.home-page .content { padding-top: 22px; padding-bottom: 24px; }
.games-home, .home-page .games-home { margin-top: 0; scroll-margin-top: 116px; }
.catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.catalog-heading h2 { font-size: clamp(22px, 2.3vw, 28px); margin: 0 0 3px; }
.catalog-heading p { color: #A7ADB5; font-size: 14px; line-height: 1.5; }
.store-text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--color-text); font-size: 15px; flex-shrink: 0; }
.store-text-link:hover { color: #ffffff; }
.games-home-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.game-home-card { position: relative; display: flex; justify-content: flex-end; min-height: 175px; aspect-ratio: 1 / 1; border: 1px solid #35404B; border-radius: 10px; overflow: hidden; background: #151A20; isolation: isolate; transition: border-color .2s, box-shadow .2s; }
.game-home-card > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; z-index: -2; }
.game-home-card > img:not(.game-card-backdrop) { transition: transform .35s ease; }
.game-home-card:hover > img:not(.game-card-backdrop) { transform: scale(1.035); }
.game-home-card > .game-card-backdrop { object-fit: cover; object-position: left center; filter: blur(24px); transform: scale(1.2); opacity: .75; z-index: -3; pointer-events: none; }
.game-home-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0C1015 0%, #0C1015c9 20%, #0C101500 78%); }
.game-home-card h3 { color: #F4F4F5; background: none; text-align: left; font-size: 20px; line-height: 1.3; padding: 0; margin: 0; overflow-wrap: anywhere; }
.game-card-copy { padding: 52px 54px 14px 16px; }
.game-card-copy p { margin-top: 4px; font-size: 12px; color: #A7ADB5; }

.game-home-card:hover { opacity: 1; border-color: #707986; box-shadow: 0 0 0 1px #ffffff0a; }
.game-favorite-mark, .game-maintenance-mark { top: 8px; border-radius: 50%; background: #0C1015c9; width: 32px; height: 32px; }
.game-favorite-mark { right: 8px; }
.game-maintenance-mark { left: 8px; }
.store-featured { position: relative; min-height: 205px; margin: 22px 0 24px; padding: 24px 28px; border: 1px solid #ffffff0c; border-radius: 12px; overflow: hidden; background: #151A20; isolation: isolate; }
.store-featured > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.store-featured::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080b0ef2, #080b0e99 45%, #080b0e15 90%); z-index: -1; }
.store-featured-copy { max-width: 58%; }
.store-featured h2 { color: #F4F4F5; font-size: clamp(23px, 2.7vw, 33px); line-height: 1.15; overflow-wrap: anywhere; }
.store-featured-copy > p { margin: 12px 0 20px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.store-featured button { display: inline-flex; align-items: center; gap: 20px; width: auto; min-height: 44px; padding: 10px 22px; color: var(--color-text); background: #090D11a6; border: 1px solid var(--color-input-border); border-radius: 24px; font-weight: 600; }
.store-news { margin-top: 24px; scroll-margin-top: 116px; }
#postsList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
#postsList .post-card { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #35404B; border-radius: 10px; background: var(--finish-surface); transition: border-color .2s; }
.post-card:hover { opacity: 1; border-color: #707986; }
.post-card-image { width: 100%; height: 125px; object-fit: cover; }
.post-card-body { padding: 12px 16px 16px; }
.post-card-body h3 { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.post-card-body > p { color: #A7ADB5; margin-top: 8px; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.post-card-body time { display: block; margin-bottom: 8px; color: #A7ADB5; font-size: 11px; }
.store-news-empty { grid-column: 1 / -1; color: #A7ADB5; padding: 22px 0; }
.store-benefits { background: transparent; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px 4px; margin: 10px 0; }
.store-benefits .store-benefit { justify-content: center; text-align: center; padding: 4px 24px; border-right: 1px solid #ffffff0d; }
.store-benefits .store-benefit:last-child { border: 0; }
.home-details { background: transparent; border: 0; padding: 0; margin: 0; }
.home-showcase-review { box-shadow: inset 0 1px 0 var(--finish-highlight); width: 100%; max-width: none; border-radius: 10px; border: 1px solid #35404B; margin: 0; padding: 16px 20px; background: #151A20; }
.home-showcase .review-text { -webkit-line-clamp: 2; }
.game-block { box-shadow: inset 0 1px 0 var(--finish-highlight), var(--finish-shadow); display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid #35404B; border-radius: 12px; background: var(--finish-surface); }
.game-image { display: flex; align-items: center; justify-content: center; flex: 0 0 112px; max-width: 112px; min-width: 0; aspect-ratio: 1; }
.game-image img { width: 100%; height: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.game-image img:not([src]), .game-image img[src=""] { display: none; }
.game-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.game-title-row h1 { flex: 1 1 180px; font-size: clamp(23px, 2.6vw, 30px); overflow-wrap: anywhere; }
.game-title-row .favorite-button { position: static; flex-shrink: 0; max-width: 100%; }
.game-info p { display: block; color: #A7ADB5; margin-top: 8px; max-width: 720px; }
.game-description { padding: 14px 0 20px; margin-top: 0; border: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.game-shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.game-shop-layout > .products { margin: 0; padding: 0; background: none; }
.game-shop-layout > .checkout { position: sticky; top: 90px; margin: 0; padding: 22px; }
.products h2, .checkout h2 { margin-bottom: 16px; }
.products-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product { box-shadow: inset 0 1px 0 var(--finish-highlight); display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 16px; gap: 12px; border: 1px solid #35404B; border-radius: 10px; clip-path: none; background: var(--finish-surface); }
.product::before, .cart-item::before { display: none; }
.product img { width: 52px; height: 52px; object-fit: contain; }
.product h3 { font-family: Arial, sans-serif; font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; }
.product p { grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 10px; margin: 0; align-items: baseline; justify-content: flex-start; }
.product:hover { border-color: #707986; background: var(--finish-surface); }
.product-card-actions { grid-column: 1 / -1; width: 100%; min-width: 0; }
.product .product-card-add, .product .product-card-quantity { width: 100%; }
.product .product-card-quantity { grid-template-columns: 40px minmax(24px, 1fr) 40px; height: 42px; }
:is(.product, .cart-item) .product-card-quantity-button { width: 40px; min-width: 40px; min-height: 40px; background: transparent; }
.product-card-quantity-value { color: var(--color-text); }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid #35404B; border-radius: 8px; clip-path: none; padding: 12px; gap: 10px; background: #0C1015; }
.cart-item-information { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.cart-item-information strong, .cart-item-information span { white-space: normal; overflow-wrap: anywhere; }
.cart-item .product-card-quantity { width: auto; height: 40px; grid-template-columns: 32px 22px 32px; }
.cart-item .product-card-quantity-button { width: 32px; min-width: 32px; }
.checkout-fields, .checkout-payment { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.checkout .order-price { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.checkout .order-price strong { font-size: 23px; }
.filters { max-width: 100%; gap: 8px; margin: 16px 0; }
.filter { min-height: 40px; height: auto; padding: 8px 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; border-radius: 7px; }
.filter::before, .favorite-button::before, .login-button::before, .product button::before, .product-card-quantity::before, .buy-button::before, .profile-action-button::before, .reviews-actions a::before, .post-button::before, .modal-content button::before { display: none; }
.filter, .favorite-button, .login-button, .product button, .product-card-quantity, .profile-action-button, .reviews-actions a, .post-button, .modal-content button:not([data-language-option]):not(.password-visibility-button):not(.auth-provider-button) { border: 1px solid #35404B; background: #151A20; color: var(--color-text); border-radius: 8px; }
.buy-button, .filter.active, .product button.selected, :root[data-theme="dark"] .filter.active, :root[data-theme="dark"] .product button.selected, :root[data-theme="dark"] .login-button { border: 1px solid transparent; background: var(--finish-button); color: #090D11; }
.buy-button:hover, .filter.active:hover, :root[data-theme="dark"] .filter.active:hover, :root[data-theme="dark"] .login-button:hover { background: var(--finish-button-hover); color: #090D11; }
.buy-button { min-height: 44px; border-radius: 8px; }
.product .product-card-add:hover, .favorite-button:hover, .profile-action-button:hover { background: #1D232A; border-color: #707986; }
.reviews, .order:not(.profile-section), .order-progress, .game-content-section { box-shadow: inset 0 1px 0 var(--finish-highlight); border: 1px solid #35404B; border-radius: 12px; padding: 20px; background: var(--finish-surface); }
.reviews h2, .order h2, .player-id label, .profile-info, .profile-info p, .profile-info strong, .profile-top h3, .review-header strong, .stat-title, .orders-description, .order-price span, #reviewsCount { color: var(--color-text); }
.player-id input, .modal-content input, #newPassword, #nicknameInput, #reviewText { color: var(--color-text); background: #111820; border: 1px solid #35404B; border-radius: 8px; min-width: 0; max-width: 100%; }
.review-item, .reviews-summary { border-radius: 8px; background: #0C1015; }
.review-item { padding: 18px; }
.review-header { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.review-header strong { min-width: 0; overflow-wrap: anywhere; }
.review-header > span { white-space: nowrap; }
.reviews-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.reviews-hero { text-align: left; padding: 8px 0 24px; border-bottom: 1px solid #35404B; }
.reviews-hero h1 { font-size: 30px; }
.reviews-hero p { display: block; max-width: 650px; margin-top: 12px; }
.reviews-stats { display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; padding: 0; margin-top: 24px; background: none; }
.review-stat { display: block; }
#averageRating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 24px; }
.average-rating-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--color-star); flex-shrink: 0; }
.average-rating-stars svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.average-rating-score { font: 600 14px/1.4 Arial, sans-serif; color: var(--color-text); }
.account-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 24px; }
.account-layout .profile-section { box-shadow: inset 0 1px 0 var(--finish-highlight); grid-column: 1; grid-row: 1 / 3; margin: 0; padding: 20px; border: 1px solid #35404B; border-radius: 12px; background: var(--finish-surface); }
.account-layout .account-history, .account-layout .account-settings { grid-column: 2; margin: 0; min-width: 0; }
.account-layout .profile-top { flex-direction: column; align-items: flex-start; gap: 16px; height: auto; }
#profileName { overflow-wrap: anywhere; max-width: 100%; }
.account-layout .profile-info { margin-top: 20px; overflow-wrap: anywhere; }
.account-layout .profile-info p { margin-top: 14px; }
.account-layout .profile-info strong { display: block; font-size: 12px; color: #A7ADB5; }
.order-product-visual { border: 1px solid #35404B; border-radius: 10px; background: #111820; animation: none; }
.order-history-card { border: 1px solid #35404B; border-radius: 10px; }
.order-history-bottom { flex-wrap: wrap; }
.order-game-name, .order-product-name { overflow-wrap: anywhere; white-space: normal; }
.order-history-card .history-price { white-space: normal; overflow-wrap: anywhere; }
.order-progress { max-width: 920px; margin: 0 auto; }
.order-status-heading { align-items: flex-start; text-align: left; border-bottom: 1px solid #35404B; padding-bottom: 24px; margin-bottom: 24px; }
.order-status-heading h1 { font-size: clamp(27px, 3vw, 36px); }
.order-status-product { min-width: 0; }
.orders-pagination, .reviews-pagination { flex-wrap: wrap; gap: 8px; }
.orders-pagination-info, #reviewsPageInfo { min-width: 0; }
.modal-content { padding: 26px; border: 1px solid #35404B; border-radius: 12px; background: var(--finish-surface); max-width: min(440px, calc(100vw - 28px)); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 80px #0009; }
.post-modal-content { border: 1px solid #35404B; border-radius: 12px; max-width: min(700px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.post-modal-list { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.post-comments-panel { height: min(360px, 65vh); height: min(360px, 65dvh); }
.post-comments-form, .post-comment-input { min-width: 0; }
.post-modal-close, .post-comments-close { color: #F4F4F5; background: #151A20de; border: 1px solid #35404B; border-radius: 50%; width: 38px; height: 38px; font-size: 26px; mix-blend-mode: normal; }
.products-list > .product-maintenance-notice { grid-column: 1 / -1; border-radius: 8px; padding: 12px; text-transform: none; letter-spacing: 0; }
.products-list > .product-maintenance-notice + .product { margin-top: 0; }
footer { margin-top: 16px; border-top: 1px solid #35404B; background: #090D11 url("../footer.PNG") center top / cover no-repeat; }
.footer-container { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; width: calc(100% - 64px); max-width: 1056px; margin: 0 auto; padding: 26px 0 20px; gap: 34px 60px; text-align: left; }
.footer-container > * { min-width: 0; }
.footer-container .header-brand { display: inline-flex; }
.footer-brand-column > p { font-size: 12px; color: #A7ADB5; margin: 12px 0 20px; }
.footer-container a { display: inline-flex; color: #A7ADB5; }
.footer-container a:hover { color: var(--color-text); }
.footer-container .header-title { color: #F4F4F5; }
.footer-social { gap: 16px; font-size: 13px; }
.footer-links { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; }
.footer-links h2 { font-size: 17px; margin: 4px 0 8px; }
.footer-links a { font-size: 13px; }
.footer-copyright { grid-column: 1 / -1; border-top: 1px solid #ffffff16; padding-top: 20px; max-width: none; }
.footer-copyright p { display: block; color: #707986; font-size: 11px; line-height: 1.6; margin-bottom: 12px; }
.standalone-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0C1015 url("../footer.PNG") center bottom / cover; }
.standalone-page #message, .standalone-page .telegram-auth-status, .standalone-page .discord-auth-status { width: 100%; max-width: 560px; padding: clamp(24px, 5vw, 48px); border: 1px solid #35404B; border-radius: 12px; background: var(--finish-surface); }
.standalone-page h1 { font-size: clamp(28px, 5vw, 40px); margin: 22px 0 16px; }
.standalone-page h2 { color: var(--color-text); font-size: 16px; }
.standalone-page p { color: #A7ADB5; margin: 16px 0 24px; }
.standalone-brand { display: inline-flex; align-items: center; gap: 14px; color: #D4AF37; font-weight: 700; }
.standalone-brand img { width: 44px; height: 44px; object-fit: contain; }
.standalone-page #homeLink:not([hidden]) { display: inline-flex; padding: 12px 20px; border-radius: 8px; background: var(--finish-button); color: #090D11; }
 .game-page .reviews, .game-page #post, .game-content-section { margin-top: 26px; }
.reviews h2, .account-layout h2, .products h2, .checkout h2 { font-size: 25px; line-height: 1.25; margin-bottom: 14px; }
.product-price strong { color: var(--color-text); }
.checkout .order-price strong { color: var(--color-accent); }
.review-item, .reviews-summary, .order-history-card { border: 1px solid #ffffff08; background: #151A20; }
.footer-container .header-brand img { object-fit: contain; }
[hidden] { display: none !important; }
/* All navigation arrows reference the same SVG symbol. */
.navigation-arrow {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: inherit;
    pointer-events: none;
}
.navigation-arrow-back { transform: rotate(180deg); }
.reviews-actions a, .footer-social { gap: 8px; }
.game-home-card { --card-mark-size: 32px; --card-icon-size: 22px; --card-mark-inset: 8px; }
.game-card-arrow {
    position: absolute;
    right: var(--card-mark-inset);
    bottom: var(--card-mark-inset);
    display: grid;
    place-items: center;
    width: var(--card-mark-size);
    height: var(--card-mark-size);
    border-radius: 50%;
    background: #0C1015c9;
    color: var(--color-text);
    pointer-events: none;
}
.game-home-card .game-favorite-mark {
    width: var(--card-mark-size);
    height: var(--card-mark-size);
    right: var(--card-mark-inset);
    top: var(--card-mark-inset);
}
.game-home-card .game-favorite-mark svg, .game-card-arrow .navigation-arrow {
    width: var(--card-icon-size);
    height: var(--card-icon-size);
}
@media (max-width: 768px) {
    .navigation-arrow { width: 16px; height: 16px; }
    .game-home-card { --card-mark-size: 24px; --card-icon-size: 16px; --card-mark-inset: 5px; }
}
@media (max-width: 480px) {
    .game-home-card { --card-mark-size: 20px; --card-icon-size: 12px; }
}

/* One visual language across the storefront and account pages. */
body { background: var(--color-bg); }
.game-block, .reviews-hero, .reviews, .order:not(.profile-section),
.account-layout .profile-section, .game-content-section, .modal-content {
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--finish-surface) padding-box, var(--finish-border) border-box;
    box-shadow: inset 0 1px 0 var(--finish-highlight), var(--finish-shadow);
}
.game-block, .reviews-hero { padding: 24px; }
.game-info { flex: 1; }
.game-title-row h1 { margin-bottom: 0; }
.game-description p { display: block; overflow: visible; }
.game-description { border-color: #ffffff0d; }
.reviews-hero { text-align: left; gap: 0; margin-bottom: 0; }
.reviews-hero h1 { margin: 0; font-size: var(--fs-h1); color: var(--color-text); }
.reviews-hero p { margin-top: 10px; }
.reviews-stats { gap: 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff0c; align-items: center; }
.review-stat + .review-stat { border-left: 1px solid #ffffff12; padding-left: 28px; }
.stat-title { color: var(--color-text-secondary); font-size: var(--fs-secondary); font-weight: 400; margin-top: 4px; }
.reviews-page .reviews { margin-top: 24px; }
.reviews h2, .account-layout h2, .products h2, .checkout h2,
.game-content-section-title, .order-status-instruction h2 { color: var(--color-text); font-size: clamp(20px, 2vw, 25px); font-weight: 500; }
.product, #postsList .post-card, .order-history-card {
    border: 1px solid transparent;
    background: var(--finish-surface) padding-box, var(--finish-border) border-box;
    box-shadow: inset 0 1px 0 var(--finish-highlight);
}
.product { transition: border-color .2s ease, box-shadow .2s ease; }
.product:has(.product-card-quantity:not([hidden])) { border-color: #D4AF37; box-shadow: inset 0 1px 0 #D4AF3712, 0 0 18px #D4AF3706; }
.game-shop-layout > .checkout { background: var(--finish-surface) padding-box, var(--finish-border) border-box; }
.filter, .favorite-button, .profile-action-button, .reviews-actions a,
.post-button, .game-content-button, .reviews-load-button, #returnToGameButton {
    box-shadow: inset 0 1px 0 var(--finish-highlight);
}
.game-content-button::before, .reviews-load-button::before, #returnToGameButton::before { display: none; }
.game-content-button, .reviews-load-button, #returnToGameButton {
    border: 1px solid #35404B; border-radius: 8px; background: #151A20; color: var(--color-text);
}
#gameContent { gap: 26px; margin-top: 26px; }
#gameContent .game-content-section { margin-top: 0; }
#gameContent:empty { display: none; }
.reviews-pagination #loadMoreBtn { margin-top: 0; }
.store-primary, .buy-button { box-shadow: inset 0 1px 0 #E2C15A66, 0 4px 16px #0002; }
.store-hero h1 em { background: var(--finish-button); background-clip: text; -webkit-background-clip: text; color: transparent; }
.review-item, .reviews-summary, .order-status-product { background: #111820; border: 1px solid #ffffff09; }
.review-item { margin-bottom: 12px; }
.review-item:last-child { margin-bottom: 0; }
.review-avatar { border: 1px solid var(--color-border); box-shadow: none; }
.profile-avatar { border: 0; box-shadow: none; }
.orders-description { color: var(--color-text-secondary); font-weight: 400; }
.account-layout .profile-info p { font-weight: 400; }
.order-history-card { padding: 16px; }
.order-status-heading { padding-bottom: 20px; margin-bottom: 20px; }
.order-status-heading h1 { color: var(--color-text); }
#orderStatusGameImage { width: auto; height: auto; max-width: 120px; max-height: 76px; aspect-ratio: auto; object-fit: contain; }
.order-status-total { font-variant-numeric: tabular-nums; }
.games-home-list, #postsList { align-items: stretch; }
.game-home-card { min-height: 0; }
.post-card-image { height: auto; aspect-ratio: 2.65; }
.store-featured { border-color: var(--color-border); }
.store-benefits { border-top: 1px solid #ffffff08; border-bottom: 1px solid #ffffff08; }
.footer-container .header-brand { min-width: 0; }
footer { padding: 0; }
button:disabled, .buy-button:disabled { cursor: not-allowed; }

@media (max-width: 1100px) {
    .header-container { gap: var(--header-control-gap); }
    .header-title { font-size: 22px; }
    .store-nav { gap: 0; }
    .store-nav a { padding: 8px; font-size: 13px; }
    .game-shop-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
    .game-shop-layout > .checkout { padding: 18px; }
    .product { padding: 12px; gap: 10px; grid-template-columns: 42px minmax(0, 1fr); }
    .product img { width: 42px; height: 42px; }
    .games-home-list, #postsList { gap: 14px; }
    .game-home-card h3 { font-size: 18px; }
    .store-benefits .store-benefit { padding: 4px 14px; gap: 10px; }
    .store-benefit { font-size: 13px; }
    .store-benefit svg { width: 28px; height: 28px; }
}

@media (max-width: 900px) {
    .header-container { flex-wrap: wrap; gap: 6px var(--header-control-gap); padding: 8px 0; }
    .store-nav { order: 4; width: 100%; justify-content: center; border-top: 1px solid #ffffff0c; }
    .store-nav a { padding: 8px 20px; }
    .game-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .game-shop-layout > .checkout { position: static; }
    .checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkout-payment { grid-template-columns: minmax(0, 1fr) minmax(120px, 36%); }
    .account-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
    .store-hero-inner { min-height: 0; padding: 24px 32px; }
    .store-hero-copy { max-width: 60%; }
    .store-hero h1 { font-size: 29px; }
    .store-hero-benefits { gap: 10px; }
    .store-hero-benefits .store-benefit { font-size: 10px; gap: 5px; }
    .store-hero-benefits svg { width: 20px; height: 20px; }
    .game-card-copy { padding: 42px 40px 12px 12px; }
    .footer-container { gap: 24px; }
}

/* Compact versions of the desktop sections; checkout follows the products. */
@media (max-width: 768px) {
    :root {
        --button-height: 34px; --button-size: 32px; --button-font-size: 12px;
        --fs-h1: 23px; --fs-h2: 20px; --fs-body: 12px; --fs-secondary: 11px;
        --space-xs: 5px; --space-sm: 8px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px;
        --block-gap: 12px; --section-gap: 22px; --avatar-size: 34px; --product-image-size: 36px;
    }
    .content, .home-page .content { padding: 16px 16px 22px; }
    header { --header-control-gap: 8px; }
    .header-container { width: calc(100% - 32px); min-height: 0; gap: 4px var(--header-control-gap); }
    .header-brand { gap: 6px; }
    .header-title { font-size: 20px; }
    .logo { height: 32px; }
    .header-search { position: static; flex: 0 0 auto; max-width: none; margin-left: auto; }
    .header-search + .header-actions { margin-left: 0; }
    .header-actions { gap: var(--header-control-gap); }
    header.game-search-active .header-container { width: calc(100% - 32px); padding: 8px 0; }
    header.game-search-active .header-search { flex: 1 1 0; width: auto; margin: 0; }
    header.game-search-active .header-actions, header.game-search-active .store-nav { display: none; }
    .store-nav { justify-content: space-between; }
    .store-nav a { padding: 7px 12px; font-size: 12px; }
    .breadcrumbs { padding: 10px 16px 0; font-size: 10px; }
    .store-hero-inner { min-height: 0; padding: 18px 24px; }
    .store-hero-copy { width: 60%; max-width: 60%; }
    .store-hero { width: calc(100% - 32px); margin: 16px auto 0; border-radius: 8px; background-position: center; }
    .store-hero::before { background: linear-gradient(90deg, #06090bdb, #070a0c66 50%, transparent 78%); }
    .store-hero h1 { font-size: clamp(20px, 3.7vw, 27px); }
    .store-eyebrow { font-size: 8px; letter-spacing: .055em; margin-bottom: 8px; }
    .store-hero-description { font-size: 11px; margin: 9px 0 12px; max-width: 260px; }
    .store-primary { min-height: 32px; padding: 7px 16px; font-size: 12px; gap: 14px; border-radius: 6px; }
    .store-hero-benefits { margin-top: 14px; gap: 7px 10px; }
    .store-hero-benefits .store-benefit { font-size: 9px; gap: 4px; }
    .store-hero-benefits svg { width: 16px; height: 16px; }
    .catalog-heading { align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: nowrap; }
    .catalog-heading > div { min-width: 0; }
    .catalog-heading h2 { font-size: 20px; }
    .catalog-heading p { font-size: 11px; }
    .store-text-link { font-size: 11px; gap: 5px; }
    .games-home-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #postsList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .game-home-card { min-height: 0; aspect-ratio: 1 / 1; border-radius: 8px; }
    .game-home-card h3 { font-size: 15px; }
    .game-card-copy { padding: 28px 30px 9px 10px; }
    .game-card-copy p { font-size: 9px; }
    .game-favorite-mark, .game-maintenance-mark { width: 24px; height: 24px; top: 5px; }
    .game-favorite-mark { right: 5px; }
    .game-maintenance-mark { left: 5px; }
    .store-featured { margin: 16px 0; padding: 18px; min-height: 150px; border-radius: 8px; }
    .store-featured-copy { max-width: 60%; }
    .store-featured h2 { font-size: 23px; }
    .store-featured-copy > p { font-size: 11px; margin: 8px 0 12px; }
    .store-featured button { min-height: 32px; padding: 6px 14px; font-size: 11px; }
    .store-news { margin-top: 18px; }
    .post-card-body { padding: 10px; }
    .post-card-body h3 { font-size: 14px; }
    .post-card-body > p { font-size: 11px; line-height: 1.45; margin-top: 6px; }
    .post-card-body time { font-size: 9px; margin-bottom: 5px; }
    .store-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 16px 0; }
    .store-benefits .store-benefit, .store-benefits .store-benefit:first-child { padding: 2px 8px; font-size: 10px; gap: 6px; }
    .store-benefits .store-benefit > span { white-space: normal; flex-shrink: 1; }
    .store-benefits svg { width: 20px; height: 20px; }
    .home-showcase-review { padding: 12px; }
    .game-block, .reviews-hero { padding: 16px; gap: 14px; }
    .game-image { flex-basis: 80px; max-width: 80px; }
    .game-title-row { gap: 8px; }
    .game-title-row h1 { font-size: 23px; flex-basis: 150px; }
    .game-info p { margin-top: 6px; }
    .game-description { padding: 12px 0; margin-bottom: 16px; }
    .game-shop-layout { gap: 16px; }
    .products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product { padding: 12px; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
    .product img { width: 36px; height: 36px; }
    .product h3 { font-size: 12px; }
    .product .product-card-quantity { height: 34px; grid-template-columns: 32px minmax(24px, 1fr) 32px; }
    :is(.product, .cart-item) .product-card-quantity-button { width: 32px; min-width: 32px; min-height: 32px; }
    .filters { gap: 6px; margin: 12px 0; }
    .filter { min-height: 32px; padding: 6px 10px; font-size: 11px; }
    .reviews, .order:not(.profile-section), .account-layout .profile-section, .game-content-section,
    .game-shop-layout > .checkout { padding: 14px; border-radius: 9px; }
    .reviews h2, .account-layout h2, .products h2, .checkout h2,
    .game-content-section-title, .order-status-instruction h2 { font-size: 20px; margin-bottom: 12px; }
    .game-page .reviews, .game-page #post, .game-content-section, .reviews-page .reviews { margin-top: 18px; }
    .checkout .order-card { gap: 12px; }
    .checkout-fields, .checkout-payment { gap: 10px; }
    .cart-item { padding: 8px 10px; gap: 8px; }
    .cart-item .product-card-quantity { height: 34px; }
    .cart-empty { padding: 4px 0; }
    .checkout .order-price strong { font-size: 20px; }
    .buy-button { min-height: 34px; }
    .review-item { padding: 12px; }
    .reviews-actions { gap: 8px; flex-direction: row; }
    .reviews-actions a { min-height: 32px; height: auto; padding: 6px 10px; text-align: center; line-height: 1.35; }
    #gameContent { gap: 18px; margin-top: 18px; }
    .reviews-stats { gap: 16px; margin-top: 14px; padding-top: 12px; }
    .review-stat + .review-stat { padding-left: 16px; }
    .average-rating-stars svg { width: 15px; height: 15px; }
    .average-rating-score { font-size: 12px; }
    .account-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
    .account-layout .profile-info { margin-top: 12px; }
    .account-layout .profile-info p { margin-top: 10px; }
    .account-layout .profile-info strong { font-size: 10px; }
    .order-history-card { padding: 10px; }
    .order-history-main { gap: 8px; }
    .order-status-heading { padding-bottom: 14px; margin-bottom: 14px; }
    .order-status-heading h1 { font-size: 24px; }
    #orderStatusGameImage { max-width: 88px; max-height: 56px; }
    .order-status-label { font-size: 11px; }
    .order-status-badge { min-height: 24px; font-size: 11px; }
    .order-status-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-content { padding: 20px; }
    /* Keep form text at 16px to prevent automatic focus zoom on iOS. */
    .player-id input, .modal-content input, #newPassword, #nicknameInput, #reviewText,
    .game-search-input, .post-comment-input, input, textarea, select { font-size: 16px; max-width: 100%; min-width: 0; }
    .player-id input, #newPassword, #nicknameInput { padding: 8px 10px; }
    .footer-container { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 0 14px; }
    .footer-container .header-title { font-size: 18px; }
    .footer-container .header-brand img { width: 30px; height: 30px; }
    .footer-brand-column { grid-column: auto; }
    .footer-brand-column > p { font-size: 10px; margin: 8px 0 10px; }
    .footer-links { gap: 6px; }
    .footer-links h2 { font-size: 14px; margin: 3px 0 6px; }
    .footer-links a, .footer-social { font-size: 10px; }
    .footer-copyright { padding-top: 12px; }
    .footer-copyright p { font-size: 9px; margin-bottom: 8px; }
}

@media (max-width: 480px) {
    :root { --fs-h1: 21px; --fs-h2: 18px; --space-xl: 18px; --space-lg: 12px; }
    .content, .home-page .content { padding: 12px 12px 18px; }
    .header-container, header.game-search-active .header-container { width: calc(100% - 24px); }
    .header-title { font-size: 19px; }
    .logo { height: 28px; }
    .login-button { padding: 0 10px; }
    .breadcrumbs { padding: 8px 12px 0; }
    .store-nav a { padding: 6px 10px; }
    .store-hero { width: calc(100% - 24px); margin-top: 12px; }
    .store-hero-inner { min-height: 0; padding: 16px 12px; }
    .store-hero-copy { width: 66%; max-width: 66%; }
    .store-hero h1 { font-size: clamp(18px, 4.8vw, 23px); }
    .store-eyebrow { font-size: 7px; }
    .store-hero-description { font-size: 10px; margin: 8px 0 10px; }
    .store-hero-benefits { gap: 6px 8px; margin-top: 10px; }
    .store-hero-benefits .store-benefit { font-size: 8px; }
    .store-hero-benefits svg { width: 14px; height: 14px; }
    .catalog-heading h2 { font-size: 18px; }
    .catalog-heading p { font-size: 10px; }
    .catalog-heading > .store-text-link { max-width: 100px; font-size: 10px; }
    .games-home-list, #postsList { gap: 7px; }
    .game-home-card { aspect-ratio: 1 / 1; border-radius: 7px; }
    .game-card-copy { padding: 24px 32px 9px 9px; }
    .game-home-card h3 { font-size: 14px; }
    .game-card-copy p { font-size: 9px; margin-top: 3px; }
    .game-favorite-mark, .game-maintenance-mark { width: 20px; height: 20px; }
    .game-favorite-mark svg, .game-maintenance-mark svg { width: 12px; height: 12px; }
    .store-featured { min-height: 134px; padding: 14px; margin: 14px 0; }
    .store-featured h2 { font-size: 19px; }
    .store-featured-copy > p { font-size: 10px; margin: 6px 0 10px; }
    .store-news { margin-top: 16px; }
    .post-card-body { padding: 7px; }
    .post-card-body h3 { font-size: 12px; }
    .post-card-body > p { font-size: 10px; }
    .post-card-body time { font-size: 8px; }
    .store-benefits { padding: 12px 0; }
    .store-benefits .store-benefit, .store-benefits .store-benefit:first-child { padding: 0 4px; font-size: 9px; gap: 4px; }
    .store-benefits svg { width: 16px; height: 16px; }
    .game-block { padding: 12px; gap: 12px; }
    .game-image { flex-basis: 64px; max-width: 64px; }
    .game-title-row h1 { font-size: 21px; flex-basis: 120px; }
    .game-title-row .favorite-button { font-size: 10px; line-height: 1.3; white-space: normal; height: auto; min-height: 28px; padding: 5px 8px; }
    .product { padding: 10px; gap: 7px; grid-template-columns: 32px minmax(0, 1fr); }
    .product img { width: 32px; height: 32px; }
    .product h3 { font-size: 11px; }
    .reviews h2, .account-layout h2, .products h2, .checkout h2,
    .game-content-section-title, .order-status-instruction h2 { font-size: 18px; margin-bottom: 10px; }
    .checkout-payment { grid-template-columns: minmax(0, 1fr) 110px; }
    .checkout .order-price { flex-direction: column; align-items: flex-start; gap: 2px; }
    .account-layout { grid-template-columns: minmax(0, 1fr); }
    .account-layout .profile-section, .account-layout .account-history, .account-layout .account-settings { grid-column: 1; grid-row: auto; }
    .account-layout .profile-top { flex-direction: row; align-items: center; gap: 12px; }
    .account-layout .profile-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
    .account-layout .profile-info p { margin: 0; }
    .profile-avatar-settings-top { flex-direction: row; align-items: center; gap: 10px; }
    .profile-avatar-settings-top > div { min-width: 0; }
    .profile-avatar-settings-top .profile-action-button { width: auto; flex-shrink: 0; }
    .order-history-main { grid-template-columns: auto minmax(0, 1fr) auto; }
    .order-history-main > .history-price { grid-column: auto; max-width: 85px; }
    .order-status-icon { width: 32px; height: 32px; }
    .footer-container { width: calc(100% - 24px); gap: 14px 10px; }
    .footer-container .header-title { font-size: 14px; }
    .footer-container .header-brand { gap: 4px; }
    .footer-container .header-brand img { width: 22px; height: 22px; }
    .footer-links h2 { font-size: 12px; }
    .footer-links a, .footer-social, .footer-brand-column > p { font-size: 9px; }
    .standalone-page { padding: 16px; }
    .standalone-page #message, .standalone-page .telegram-auth-status, .standalone-page .discord-auth-status { padding: 22px; }
    .standalone-page h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .game-home-card, .game-home-card > img { transition: none; }
    .game-home-card > img:not(.game-card-backdrop) { transition: none; }
    .game-home-card:hover > img:not(.game-card-backdrop) { transform: none; }
    .home-showcase-track { animation: none; }
}

/* Ordinary post cards shrink with the natural image ratio; featured/modal images are separate. */
#postsList {
    --post-image-max-height: 160px;
    --post-gap: 20px;
    --post-max-width: calc((100% - var(--post-gap) * 2) / 3);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--post-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #707986 #151A20;
    padding-bottom: 8px;
    --post-card-min-height: 220px;
    --post-card-max-height: 310px;
    --post-card-body-height: 148px;
    align-items: start;
    justify-items: start;
}
#postsList .post-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: min(var(--post-max-width), calc(var(--post-image-max-height) * var(--post-image-ratio, 2.65) + 2px));
    scroll-snap-align: start;
    min-width: 0;
    min-height: var(--post-card-min-height);
    max-height: var(--post-card-max-height);
    justify-self: start;
    align-self: start;
}
#postsList .post-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    flex: 0 0 auto;
    object-fit: contain;
}
#postsList .post-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 var(--post-card-body-height);
    height: var(--post-card-body-height);
    min-height: 0;
    overflow: hidden;
}
#postsList .post-card-body time, #postsList .post-card-body h3 { flex-shrink: 0; }
#postsList .post-card-body > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    flex: 1 1 0;
    min-height: 0;
    -webkit-line-clamp: var(--post-description-lines, 6);
    overflow: hidden;
}
#postsList::-webkit-scrollbar { display: block; height: 4px; }
#postsList::-webkit-scrollbar-track { background: #151A20; border-radius: 4px; }
#postsList::-webkit-scrollbar-thumb { background: #707986; border-radius: 4px; }
.game-search-input:focus, .game-search-input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--color-accent);
}
#postsList .post-card-body h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
@media (max-width: 768px) {
    #postsList {
        --post-gap: 10px;
        --post-max-width: calc((100% - var(--post-gap)) / 2);
        --post-image-max-height: 130px;
        --post-card-min-height: 175px;
        --post-card-max-height: 252px;
        --post-card-body-height: 120px;
    }
}
@media (max-width: 480px) {
    #postsList {
        --post-gap: 7px;
        --post-image-max-height: 110px;
        --post-card-min-height: 150px;
        --post-card-max-height: 212px;
        --post-card-body-height: 100px;
    }
}

/* Gold is reserved for primary actions and explicit selection. */
.favorite-button[aria-pressed="true"] {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}
.modal-content :is(#emailLoginBtn, #emailVerificationLoginButton, #saveReviewBtn) {
    color: var(--button-color);
    background: var(--finish-button);
    border-color: transparent;
}
.modal-content :is(#emailLoginBtn, #emailVerificationLoginButton, #saveReviewBtn):hover {
    color: var(--button-color);
    background: var(--finish-button-hover);
}

/* Shared storefront finish: restrained edges, brighter panels and recessed fields. */
body { color: var(--color-text); }
h1, h2, h3 { letter-spacing: -.018em; }
.catalog-heading h2, .game-title-row h1, .products h2, .checkout h2,
.reviews h2, .reviews-hero h1, .account-layout h2, .game-content-section-title,
.order-status-heading h1, .order-status-instruction h2, .modal-content h2,
.post-modal-title, .store-featured h2 {
    font-family: Arial, "Segoe UI", sans-serif;
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-text);
}
.game-block, .reviews-hero, .reviews, .order:not(.profile-section),
.account-layout .profile-section, .game-content-section, .modal-content,
.game-shop-layout > .checkout {
    border: 1px solid var(--panel-edge);
    border-radius: var(--panel-radius);
    background: var(--finish-surface);
    box-shadow: inset 0 1px 0 var(--finish-highlight), var(--finish-shadow);
}
.product, #postsList .post-card, .order-history-card, .home-showcase-review {
    border: 1px solid var(--panel-edge);
    border-radius: 12px;
    background: var(--finish-surface);
    box-shadow: inset 0 1px 0 var(--finish-highlight), 0 4px 12px #0000000d;
}
.store-hero, .store-featured, .game-home-card {
    border-color: var(--panel-edge);
    border-radius: var(--panel-radius);
    box-shadow: 0 8px 24px #0000001a;
}
.catalog-heading p, .game-info p, .game-description p, .store-featured-copy > p,
.post-card-body > p, .post-card-body time, .orders-description, .cart-empty,
.reviews-hero p, .review-text { color: var(--color-text-secondary); }
.game-block {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 20px 24px;
    padding: 24px;
    margin-bottom: 24px;
    background: radial-gradient(ellipse at 0 0, #70798612, transparent 65%), var(--finish-surface);
}
.game-block .game-image { width: 96px; max-width: 100%; }
.game-block .game-image img { border-radius: 12px; box-shadow: 0 6px 16px #00000026; }
.game-title-row { align-items: center; gap: 12px 20px; }
.game-title-row h1 { font-size: clamp(22px, 2.5vw, 30px); margin: 0; }
.game-info p { margin-top: 10px; line-height: 1.65; max-width: 760px; font-weight: 400; }
.game-block .game-description {
    grid-column: 1 / -1;
    padding: 14px 0 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--panel-edge);
    background: transparent;
}
.game-block .game-description p { font-weight: 400; line-height: 1.6; }
.game-block .game-description:has(p:empty) { display: none; }
.game-shop-layout > .checkout { padding: 20px; }
.checkout h2 { font-size: 21px; margin-bottom: 16px; }
.checkout .order-card { gap: 18px; }
.checkout-payment { border-color: var(--panel-edge); }
.cart-empty { padding: 12px; border-radius: 8px; background: var(--inset-surface); font-size: 12px; }
.product { gap: 12px; }
.product h3 { font-weight: 600; line-height: 1.4; }
.product p { padding-top: 4px; }
.product-price strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.product:hover, #postsList .post-card:hover, .game-home-card:hover {
    border-color: #35404B;
    box-shadow: inset 0 1px 0 #ffffff0d, 0 8px 22px #00000021;
}
.product:has(.product-card-quantity:not([hidden])) {
    border-color: #D4AF37;
    background: linear-gradient(135deg, #252C33, #1D232A 65%);
    box-shadow: inset 0 1px 0 #D4AF3714;
}
.filter:not(.active), .favorite-button:not([aria-pressed="true"]),
.product .product-card-add, .product-card-quantity, .profile-action-button,
.reviews-actions a, .post-button, .game-content-button, .reviews-load-button,
#returnToGameButton, .modal-content button:not([data-language-option]):not(.password-visibility-button):not(.auth-provider-button):not(#emailLoginBtn):not(#emailVerificationLoginButton):not(#saveReviewBtn) {
    background: var(--control-surface);
    border: 1px solid #35404B66;
    color: var(--color-text);
    box-shadow: inset 0 1px 0 #ffffff06;
}
.product .product-card-add:hover, .filter:not(.active):hover,
.favorite-button:not([aria-pressed="true"]):hover, .profile-action-button:hover,
.reviews-actions a:hover { background: #1D232A; border-color: #35404B; }
.player-id input, .modal-content input, #newPassword, #nicknameInput,
#reviewText, .game-search-input, .post-comment-input {
    background: var(--inset-surface);
    border-color: #35404B;
    color: var(--color-text);
    box-shadow: inset 0 1px 3px #0000001a;
    font-weight: 400;
}
.player-id input::placeholder, .modal-content input::placeholder,
.game-search-input::placeholder { color: #707986; opacity: 1; font-weight: 400; }
.game-search-input:focus, .game-search-input:focus-visible { box-shadow: none; border-color: var(--color-accent); }
.review-item, .reviews-summary, .cart-item, .order-status-product,
.order-product-visual { background: var(--inset-surface); border-color: #35404B1a; }
.post-modal-content { background: var(--finish-surface); border-color: var(--panel-edge); border-radius: var(--panel-radius); }
.post-card-body h3 { font-family: Arial, "Segoe UI", sans-serif; font-weight: 600; }
.reviews-hero, .order-status-heading { border-color: var(--panel-edge); }
.store-benefits { border-color: var(--panel-edge); }
.footer-copyright, footer { border-color: var(--panel-edge); }
@media (max-width: 768px) {
    :root, :root[data-theme="dark"], :root[data-theme="light"] { --panel-radius: 10px; }
    .game-block { grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; padding: 16px; margin-bottom: 18px; }
    .game-block .game-image { width: 72px; }
    .game-block .game-image img { border-radius: 9px; }
    .game-info p { margin-top: 6px; line-height: 1.5; }
    .game-block .game-description { padding-top: 10px; }
    .game-title-row h1 { font-size: 22px; }
    .product, #postsList .post-card, .order-history-card, .home-showcase-review { border-radius: 9px; }
    .product { gap: 8px; }
    .product-price strong { font-size: 13px; }
    .game-shop-layout > .checkout { padding: 14px; }
    .checkout h2 { font-size: 18px; }
    .checkout .order-card { gap: 12px; }
    .cart-empty { padding: 10px; font-size: 11px; }
}
@media (max-width: 480px) {
    .game-block { grid-template-columns: 60px minmax(0, 1fr); gap: 10px 12px; padding: 12px; margin-bottom: 16px; }
    .game-block .game-image { width: 60px; }
    .game-title-row h1 { font-size: 20px; }
    .game-title-row { gap: 8px; }
    .product-price strong { font-size: 12px; }
}

/* Product identity and price share the column beside the image. */
.products-list .product { column-gap: 12px; row-gap: 6px; }
.products-list .product > img { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.products-list .product > h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
.products-list .product > .product-price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding: 0;
    gap: 4px 8px;
}
.products-list .product-price strong { color: var(--color-accent); }
.products-list .product-price .old-price { color: var(--color-text-secondary); }
.products-list .product > .product-card-actions { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
.game-page .game-block { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.favorite-button[aria-pressed="true"] .favorite-button-icon { color: #D55347; }
@media (max-width: 768px) {
    .products-list .product { column-gap: 8px; row-gap: 5px; }
    .game-page .game-title-row { flex-wrap: nowrap; align-items: center; gap: 8px; }
    .game-page .game-title-row h1 { flex: 1 1 0; min-width: 0; }
    .game-page .game-title-row .favorite-button {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        min-height: 28px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--color-text-secondary);
        transform: none;
    }
    .game-page .favorite-button-text { display: none; }
    .game-page .favorite-button-icon svg { width: 22px; height: 22px; }
}

/* Clamp within a measured text budget, not a flex-expanded line-clamp box. */
#postsList .post-card-body > p {
    flex: 0 0 auto;
    max-height: var(--post-description-height, 0px);
    overflow: hidden;
}
/* Equal mobile cards, with text flowing directly below each title. */
@media (max-width: 768px) {
    #postsList {
        --post-title-size: 15px;
        --post-preview-size: 12px;
        align-items: stretch;
    }
    #postsList .post-card {
        width: var(--post-max-width);
        flex: 0 0 var(--post-max-width);
        height: auto;
        min-height: 0;
        max-height: none;
        align-self: stretch;
        overflow: hidden;
    }
    #postsList .post-card-image {
        width: 100%;
        height: clamp(80px, 24vw, 160px);
        flex: 0 0 auto;
        aspect-ratio: auto;
        object-fit: contain;
        background: var(--color-bg);
    }
    #postsList .post-card-body {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1 0 calc(44px + var(--post-title-size) * 2.6 + var(--post-preview-size) * 2.9);
        height: calc(44px + var(--post-title-size) * 2.6 + var(--post-preview-size) * 2.9);
        min-height: 0;
        padding: 10px;
        overflow: hidden;
    }
    #postsList .post-card-body time {
        grid-row: 1;
        margin: 0;
        font-size: 10px;
        line-height: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #postsList .post-card-body h3 {
        grid-row: 2;
        margin: 0;
        font-size: var(--post-title-size);
        line-height: 1.3;
        max-height: calc(var(--post-title-size) * 2.6);
    }
    #postsList .post-card-body > p {
        grid-row: 3;
        margin: 0;
        font-size: var(--post-preview-size);
        line-height: 1.45;
        max-height: var(--post-description-height, 0px);
    }
    #postsList .post-card-body h3,
    #postsList .post-card-body > p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    #postsList .post-card-body > p {
        -webkit-line-clamp: var(--post-description-lines, 2);
        flex: 0 0 auto;
    }
}
@media (max-width: 480px) {
    #postsList { --post-title-size: 14px; --post-preview-size: 11px; }
}

/* Identical language buttons in the account page and profile dialog. */
.profile-language-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.profile-language-switch > button,
.modal-content .profile-language-switch > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 9px 8px;
    border: 1px solid #35404B66;
    border-radius: 8px;
    background: var(--control-surface, var(--color-surface));
    color: var(--color-text);
    font: 600 13px/1.4 Arial, sans-serif;
    box-shadow: inset 0 1px 0 #ffffff06;
    transform: none;
}
.profile-language-switch > button::before,
.profile-language-switch > button::after { display: none; }
.profile-language-switch > button:hover {
    background: #1D232A;
    border-color: #35404B;
}
.profile-language-switch > button[aria-pressed="true"],
.modal-content .profile-language-switch > button[aria-pressed="true"] {
    background: linear-gradient(135deg, #252C33, #1D232A 65%);
    border-color: #D4AF37;
    color: #E2C15A;
    box-shadow: inset 0 1px 0 #D4AF3714;
}
.profile-language-switch .language-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    margin: 0;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: inherit;
}
.profile-language-switch .language-check svg { display: block; width: 15px; height: 15px; }
.profile-language-switch > button:focus-visible { outline-offset: 2px; }

/* Palette roles shared by navigation, forms and status indicators. */
body { background-color: var(--color-bg); }
header { background: var(--color-chrome); }
footer { background-color: var(--color-chrome); }
input::placeholder, textarea::placeholder, .game-search-input::placeholder,
.player-id input::placeholder, .modal-content input::placeholder { color: var(--color-text-tertiary); }
.order-status-badge.paid, .order-status-badge.completed { color: var(--color-chrome); background: var(--color-success); }
.order-status-badge.cancelled { color: var(--color-chrome); background: var(--color-danger); }
.store-primary:active, .buy-button:active { background: var(--color-accent-pressed); }
.home-page .home-details { margin-bottom: 22px; }
.home-page .store-benefits { margin-top: 12px; }

.footer-legal-links, .footer-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.footer-legal-links a { font-size: 13px; line-height: 1.5; color: #A7ADB5; }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible, .footer-contact a:hover { color: #E2C15A; }
.footer-contact { font-size: 12px; color: #A7ADB5; gap: 10px 20px; }
.footer-contact a { color: inherit; }
.checkout-legal { margin: 18px 0; padding-top: 16px; border-top: 1px solid #252C33; }
.checkout-legal a { color: #E2C15A; text-decoration: underline; text-underline-offset: 3px; }
.checkout-seller { display: grid; gap: 5px; margin: 0 0 12px; font-size: 12px; color: #A7ADB5; }
.checkout-seller strong { font-size: 13px; color: #F4F4F5; }
.checkout-delivery { font-size: 12px; line-height: 1.65; color: #A7ADB5; margin: 0 0 16px; }
.checkout-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; font-size: 12px; line-height: 1.7; color: #A7ADB5; }
.checkout-consent input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 3px 0 0; accent-color: #D4AF37; cursor: pointer; }
.checkout-confirmation { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #35404B; border-radius: 16px; background: #151A20; color: #F4F4F5; box-shadow: 0 24px 80px #0008; }
.checkout-confirmation::backdrop { background: #090D11cc; backdrop-filter: blur(5px); }
.checkout-confirmation h2 { font-size: 23px; line-height: 1.3; margin: 0 0 14px; }
.checkout-confirmation p { color: #A7ADB5; font-size: 13px; line-height: 1.65; margin: 10px 0; }
.confirmed-game-id { display: block; padding: 12px; margin: 12px 0; border: 1px solid #A98224; border-radius: 10px; color: #E2C15A; font-size: 22px; text-align: center; overflow-wrap: anywhere; }
.checkout-confirmation dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; border-top: 1px solid #252C33; border-bottom: 1px solid #252C33; padding: 16px 0; margin: 16px 0; font-size: 13px; }
.checkout-confirmation dt { color: #A7ADB5; }
.checkout-confirmation dd { margin: 0; overflow-wrap: anywhere; }
.checkout-confirmation-actions { display: grid; gap: 10px; margin-top: 20px; }
.checkout-confirmation-actions button { width: 100%; min-height: 42px; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.checkout-confirmation-actions button[value="edit"] { background: #1D232A; color: #F4F4F5; border: 1px solid #35404B; }
@media (max-width: 600px) {
    .footer-legal-links { gap: 10px 16px; }
    .footer-legal-links a, .footer-contact { font-size: 11px; }
    .checkout-confirmation { padding: 18px; }
    .checkout-confirmation h2 { font-size: 21px; }
}

/* Homepage catalog: square logos and a compact, quiet caption. */
.home-page .games-home-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.home-page .game-home-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    aspect-ratio: auto;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: none;
    text-decoration: none;
    transition: border-color .2s ease;
}
.home-page .game-home-card::before,
.home-page .game-home-card::after { content: none; }
.home-page .game-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
}
.home-page .game-card-media > img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform: none;
}
.home-page .game-card-footer {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 12px;
    padding: 14px;
    min-width: 0;
    border-top: 1px solid var(--color-border);
}
.home-page .game-card-copy { flex: 1; min-width: 0; padding: 0; }
.home-page .game-card-copy h3 {
    margin: 0;
    padding: 0;
    font: 600 16px/1.35 Arial, sans-serif;
    overflow-wrap: anywhere;
}
.home-page .game-card-copy p { display: none; }
.home-page .game-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: var(--button-bg);
}
.home-page .game-card-action > span:first-child { display: none; }
.home-page .game-card-arrow {
    position: static;
    width: 20px;
    height: 20px;
    background: transparent;
    color: inherit;
}
.home-page .game-card-arrow .navigation-arrow { width: 20px; height: 20px; }
.home-page .game-home-card:is(:hover, :focus-visible) {
    border-color: var(--button-bg);
    box-shadow: none;
}
.home-page .game-home-card:focus-visible { outline: 2px solid var(--button-bg); outline-offset: 4px; }
.home-page .game-home-card .game-favorite-mark {
    --card-mark-size: 30px;
    --card-icon-size: 18px;
    --card-mark-inset: 8px;
    background: #171e24b3;
}
@media (max-width: 768px) {
    .home-page .games-home-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .home-page .game-card-footer { gap: 6px; padding: 10px; }
    .home-page .game-card-copy h3 { font-size: 14px; }
    .home-page .game-card-action { width: 24px; height: 24px; }
}
@media (max-width: 380px) {
    .home-page .games-home-list { gap: 10px; }
    .home-page .game-card-footer { padding: 9px; }
    .home-page .game-card-copy h3 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .game-home-card { transition: none; }
}

/* Quiet full-width announcement strip below the header. */
.home-page .home-announcement {
    --announcement-font-size: clamp(10px, 2.6vw, 15px);
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #ffffff0d;
    border-radius: 0;
    background: #13191f;
    box-shadow: none;
}
.home-page .home-announcement::before { content: none; }
.home-announcement-track { display: grid; align-items: center; min-height: 30px; padding: 4px 12px; }
.home-announcement .home-announcement-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: var(--announcement-font-size);
    line-height: 1.4;
    opacity: 0;
    animation: home-announcement-cycle 18s ease-in-out infinite;
}
.home-announcement .home-announcement-slide:nth-child(2) { animation-delay: 6s; }
.home-announcement .home-announcement-slide:nth-child(3) { animation-delay: 12s; }
.home-announcement .store-benefit { justify-content: center; font-size: var(--announcement-font-size); gap: 8px; }
.home-announcement .store-benefit svg { width: 16px; height: 16px; }
.home-announcement:hover .home-announcement-slide { animation-play-state: paused; }
@keyframes home-announcement-cycle {
    0% { opacity: 0; transform: translateY(3px); }
    4%, 28% { opacity: 1; transform: translateY(0); }
    33.333%, 100% { opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-announcement .home-announcement-slide { animation: none; transform: none; }
    .home-announcement .home-announcement-slide:first-child { opacity: 1; }
}

/* Keep the homepage catalog comfortably sized on wide screens. */
.home-page > main > .content {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
}
.home-page .games-home > .catalog-heading,
.home-page .content > .store-benefits,
.home-page .content > .store-news,
.home-page .content > .store-featured {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}
.home-page .games-home-list {
    width: 100%;
    justify-items: stretch;
}
.home-page .game-home-card {
    width: 100%;
    justify-self: stretch;
}

/* Consistent banner typography; retain each message's existing color. */
.home-page .home-announcement .home-announcement-slide,
.home-page .home-announcement .store-benefit {
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: var(--announcement-font-size);
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: .09em;
}
.home-page .content > .store-benefits { padding-block: 10px; }
.home-page .store-benefits .store-benefit { padding-block: 2px; }
@media (max-width: 768px) {
    .home-page .home-announcement .home-announcement-slide,
    .home-page .home-announcement .store-benefit { letter-spacing: .055em; }
    .home-page .content > .store-benefits { padding-block: 6px; }
    .home-page .store-benefits .store-benefit { padding-block: 0; }
}

/* Shared product and player-ID help. */
.products-list .product.product-has-info { position: relative; }
/* Reserve only horizontal space; keep the title's natural height and baseline. */
.products-list .product.product-has-info > h3 { padding-right: 32px; }
.products-list .product > .product-info-button {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    display: grid; place-items: center; width: 36px; min-width: 36px;
    height: 36px; min-height: 36px; margin: 0; padding: 7px;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--button-bg); box-shadow: none; clip-path: none; cursor: pointer;
}
.product-info-button svg { display: block; width: 22px; height: 22px; pointer-events: none; }
.products-list .product > .product-info-button:hover { background: #e9c47714; }
.checkout .player-id-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.checkout .player-id-label label { margin: 0; }
.checkout .player-id-help {
    display: inline; width: auto; height: auto; min-height: 0; padding: 0; margin: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--button-bg); font: inherit; font-size: 12px; line-height: 1.5;
    cursor: pointer; text-transform: none;
}
.player-id-help:hover { text-decoration: underline; text-underline-offset: 3px; }
.info-dialog-open { overflow: hidden; }
.info-dialog {
    width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 40px);
    margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--color-border); border-radius: 16px;
    background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 24px 80px #0008;
}
.info-dialog::backdrop { background: #080b10b8; backdrop-filter: blur(5px); }
.info-dialog-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; padding: 18px 20px; background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.info-dialog-header h2 { margin: 0; font: 600 20px/1.35 Arial, sans-serif; overflow-wrap: anywhere; }
.info-dialog-close {
    display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
    padding: 8px; border: 0; border-radius: 8px; background: transparent;
    color: var(--color-text-secondary); cursor: pointer;
}
.info-dialog-close:hover { background: var(--color-hover); color: var(--color-text); }
.info-dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.info-dialog-body { padding: 20px; }
.info-dialog-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.7 Arial, sans-serif; }
.info-dialog-body img { display: block; width: 100%; height: auto; margin-top: 18px; border-radius: 10px; }
.info-dialog-body p[hidden] + img { margin-top: 0; }
.product-info-button:focus-visible, .player-id-help:focus-visible, .info-dialog-close:focus-visible { outline: 2px solid var(--button-bg); outline-offset: 3px; }
@media (max-width: 480px) {
    .info-dialog-header { padding: 14px 16px; }
    .info-dialog-body { padding: 16px; }
    .info-dialog-header h2 { font-size: 18px; }
}

/* Formatted content must remain fully readable, including secondary blocks. */
.game-content-text.rich-text-content { display: block; -webkit-line-clamp: unset; overflow: visible; }

.post-modal-description.rich-text-content { font-weight: 400; font-size: 16px; }
.game-content-text.rich-text-content:not(.game-content-text-main) { font-weight: 400; }

/* Partner dashboard follows the account's charcoal surfaces and gold accents. */
.account-layout .account-partner { grid-column: 2; min-width: 0; }
.account-partner > details > summary { font-size: 23px; font-weight: 600; cursor: pointer; color: var(--color-text); }
.affiliate-content { display: grid; gap: 16px; padding-top: 18px; }
.affiliate-content h3 { margin: 10px 0 0; font-size: 17px; }
.affiliate-muted { color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; }
.affiliate-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 8px 0; }
.affiliate-stats > div { display: grid; gap: 8px; padding: 14px; border: 1px solid #30353b; border-radius: 10px; background: #121619; }
.affiliate-stats span { font-size: 12px; color: #a8adb3; }
.affiliate-stats strong { font-size: clamp(17px,2vw,23px); color: #e9c477; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.affiliate-link-row { display: flex; gap: 8px; min-width: 0; }
.affiliate-link-row input { width: 100%; min-width: 0; padding: 10px; border: 1px solid #38414b; border-radius: 8px; background: #121619; color: #f3f3f2; font: 13px Arial,sans-serif; }
.affiliate-content .profile-action-button { width: auto; justify-self: start; padding-inline: 14px; min-height: 40px; }
.affiliate-content button:disabled { opacity: .45; cursor: not-allowed; }
.affiliate-history { display: grid; gap: 10px; }
.affiliate-history-item { display: grid; gap: 6px; padding: 14px; border: 1px solid #30353b; border-radius: 10px; background: #121619; font-size: 13px; }
.affiliate-history-item > span, .affiliate-history-item small { color: #a8adb3; }
.affiliate-reward { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 6px; }
.affiliate-reward strong { color: #e9c477; }
.affiliate-notice { padding: 12px; border: 1px solid #e9c47744; border-radius: 8px; color: #e9c477; font-size: 13px; }
.affiliate-rates summary { cursor: pointer; color: #e9c477; font-size: 14px; }
.affiliate-rates[open] .affiliate-history { margin-top: 12px; }
@media (max-width: 600px) {
    .account-layout .account-partner { grid-column: 1 / -1; }
    .affiliate-link-row { flex-wrap: wrap; }
}
@media (hover: hover) and (pointer: fine) {
    .home-page .game-card-media > img { transition: transform .3s ease; }
    .home-page .game-home-card:is(:hover,:focus-visible) .game-card-media > img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .game-card-media > img { transition: none; }
    .home-page .game-home-card:is(:hover,:focus-visible) .game-card-media > img { transform: none; }
}

/* Keep the artwork ratio on phones just as on desktop, without side gutters. */
@media (max-width: 768px) {
    #postsList .post-card {
        width: min(var(--post-max-width), calc(clamp(80px, 24vw, 160px) * var(--post-image-ratio, 2.65) + 2px));
        flex: 0 0 auto;
        align-self: flex-start;
    }
    #postsList .post-card-image { height: auto; width: 100%; }
}

/* Keep the right-hand stack independent of the profile card height. */
.account-layout .profile-section { grid-row: auto; }
.account-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.account-main > .order { margin: 0; }
.affiliate-customers { display: grid; gap: 0; }
.affiliate-customer { padding: 12px 0; border-bottom: 1px solid #30353b; font-size: 13px; }
.affiliate-customer summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; cursor: pointer; }
.affiliate-customer summary > span { color: #a8adb3; }
.affiliate-customer summary > strong { overflow-wrap: anywhere; }
.affiliate-customer-stats { display: grid; gap: 7px; padding-top: 12px; color: #a8adb3; }
@media (max-width: 1100px) { .account-main { gap: 16px; } }
@media (max-width: 768px) { .account-main { gap: 12px; } }

.affiliate-balance { grid-template-columns: minmax(0,1fr); }
.partner-application-form { display: grid; gap: 16px; padding: 20px; }
.partner-application-form label { display: grid; gap: 8px; font-size: 14px; }
.partner-application-form input, .partner-application-form textarea { width: 100%; min-width: 0; padding: 12px; border: 1px solid #38414b; border-radius: 8px; background: #121619; color: #f3f3f2; font: inherit; }
.partner-application-form textarea { resize: vertical; }
.partner-application-form p { font-size: 13px; line-height: 1.5; color: #a8adb3; }
.partner-application-dialog { max-height: 90dvh; overflow-y: auto; }
.footer-contact [data-partner-apply] { padding: 0; border: 0; background: transparent; color: #e9c477; font: inherit; cursor: pointer; text-align: left; }


/* Small spacing adjustments confined to the game page on phones. */
@media (max-width: 600px) {
    .game-page .game-block > .game-image { align-self: start; }
    .game-page .checkout .checkout-seller { margin-bottom: 8px; }
    .game-page .checkout .checkout-delivery { margin-bottom: 10px; }
}

/* Checkout status labels may wrap without being clipped by the button height. */
.game-page .checkout #buyButton {
    height: auto;
    min-height: var(--button-height);
    padding: 10px var(--button-padding-x);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

@media (max-width: 600px) {
    .home-page .content > .store-benefits { padding-block: 16px; }
    .home-page .store-benefits .store-benefit,
    .home-page .store-benefits .store-benefit:first-child {
        flex-direction: column;
        padding: 4px 6px;
        gap: 8px;
        font-size: 12px;
        line-height: 1.4;
    }
    .home-page .store-benefits .store-benefit svg { width: 26px; height: 26px; }
}

.account-settings > [data-partner-apply] { margin-bottom: var(--space-xs); }
.partner-application-dialog .partner-application-close {
    position: static;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .account-layout .profile-info { grid-template-columns: minmax(0, 1fr); }
}

.partner-application-dialog .partner-application-close,
.partner-application-dialog .partner-application-close:focus {
    border: 0;
    outline: none;
    box-shadow: none;
}
.partner-application-dialog .partner-application-close:focus-visible {
    background: #35404B;
    color: #fff;
}
.account-partner > details > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
}
.account-partner > details > summary::-webkit-details-marker { display: none; }
.account-partner > details > summary::marker { content: ''; }
.affiliate-section-arrow {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}
.account-partner > details[open] > summary .affiliate-section-arrow { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .affiliate-section-arrow { transition: none; }
}

.affiliate-rates > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}
.affiliate-rates > summary::-webkit-details-marker { display: none; }
.affiliate-rates > summary::marker { content: ''; }
.affiliate-rates[open] > summary .affiliate-section-arrow { transform: rotate(90deg); }
.info-dialog .unified-dialog-close {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #151A20de;
    color: #F4F4F5;
    font-size: 26px;
    line-height: 1;
    mix-blend-mode: normal;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}
.info-dialog .unified-dialog-close:focus-visible { background: #35404B; color: #fff; }