/**
 * Category Game Page Styles
 * Figma Node: 6002:31133 � "Category - News"
 *
 * Design tokens:
 *   Background:              #101114
 *   Neutral/09 - Section:    #1C1E22
 *   Neutral/08 - Frame:      #25272D
 *   Neutral/07 - Border:     #30343B
 *   Neutral/06 - Frame 2:    #3C4049
 *   Primary:                 #1081DF
 *   Other/Yellow:            #9B7F0E
 *   Primary/01:              #FFFFFF
 *   Neutral/01:              #C4C8CF
 *   Neutral/02 - Secondary:   #8F96A3
 *   Font:                    IRANSansX
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* --- Body override ----------------------------------------------------------- */
/* Ensure dark background extends to full viewport to prevent white corners
   around footer's rounded top borders. This file is only loaded on the
   category-??????-???? page, so these styles are scoped appropriately. */
body.category-??????-???? {
    background-color: #101114;
    /* Ensure no white shows through footer rounded corners */
    overflow-x: hidden;
    /* Extend background to cover viewport */
    min-height: 100vh;
}

body.category-??????-???? .site-main {
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
    margin-top: 0;
    margin-bottom: 0;
}

/* Ensure hero sits flush under header (no gap) */
body.category-??????-???? .cat-game-hero {
    margin-top: 0;
    border-radius: 0;
}

/* Fix footer rounded corners - ensure dark background extends to edges */
body.category-??????-???? #colophon.sc-footer,
body.category-??????-???? .site-footer {
    position: relative;
    /* Ensure the footer background extends fully */
    background-clip: padding-box;
}

/* --- CSS Custom Properties --------------------------------------------------- */
.cat-game-page {
    --cm-bg-page:        #101114;
    --cm-bg-section:     #1c1e22;
    --cm-bg-frame:       #25272d;
    --cm-bg-frame2:      #3c4049;
    --cm-border:         #30343b;
    --cm-text-primary:   #ffffff;
    --cm-text-secondary: #8f96a3;
    --cm-text-muted:     #c4c8cf;
    --cm-primary:        #1081df;
    --cm-yellow:         #9b7f0e;
    --cm-radius-card:    8px;
    --cm-radius-badge:   4px;
    --cm-radius-btn:     8px;
    --cm-gap-grid:       24px;
    --cm-gap-section:    64px;
    --cm-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --cm-font:           'Vazir', 'Vazir', 'Tahoma', sans-serif;
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Page Base --------------------------------------------------------------- */
.cat-game-page {
    background-color: var(--cm-bg-page);
    min-height: 100vh;
    direction: rtl;
    font-family: var(--cm-font);
}

/* --- Hero Banner ------------------------------------------------------------- */
.cat-game-hero {
    position: relative;
    width: 100%;
    height: 286px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-game-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #1a1c21;
    z-index: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.cat-game-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-game-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(16, 17, 20, 0.90) 0%,
        rgba(25, 26, 30, 0.90) 100%
    );
    z-index: 1;
    border-radius: 0 0 16px 16px;
    border-bottom: 2px solid var(--neutral-07-boarder-dark-hover, #30343B);
}

.cat-game-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Decorative display text (transparent, behind heading) */
.cat-game-hero__display-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(143, 150, 163, 0.20);
    font-family: iransansx;
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: transparent;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: 4px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.cat-game-hero__title {
    font-family: var(--cm-font);
    font-size: 40px;
    font-weight: 400;
    color: var(--cm-text-primary);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}

/* Breadcrumb navigation */
.cat-game-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    direction: rtl;
    flex-direction: row-reverse;
}

.cat-game-hero__breadcrumb-link {
    font-family: var(--cm-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cm-text-muted);
    text-decoration: none;
    transition: color var(--cm-transition);
    line-height: 1.2;
}

.cat-game-hero__breadcrumb-link:hover {
    color: var(--cm-text-primary);
}

.cat-game-hero__breadcrumb-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-game-hero__breadcrumb-sep img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.cat-game-hero__breadcrumb-current {
    font-family: var(--cm-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cm-text-muted);
    line-height: 1.2;
}

/* --- Main Section ------------------------------------------------------------ */
.cat-game-section {
    padding: 64px 0;
    background-color: var(--cm-bg-page);
}

.cat-game-container {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 108px;
    display: flex;
    flex-direction: column;
    gap: var(--cm-gap-section);
    align-items: center;
}

/* --- Featured Slider --------------------------------------------------------- */
.cat-game-featured {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.cat-game-featured__link {
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
}

.cat-game-featured__image-wrap {
    position: relative;
    width: 100%;
    height: 516px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--cm-bg-section);
    direction: initial;
}

.cat-game-featured__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NOTE: The scale-on-hover for the featured image is intentionally
   disabled on the Game category page. The JS carousel handles
   transitions instead. This rule is overridden below. */
.cat-game-featured__link:hover .cat-game-featured__image {
    transform: none; /* disabled for Game category � carousel handles transitions */
}

.cat-game-featured__shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(16, 17, 20, 0) 0%,
        #191a1e 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 24px;
    border-radius: 16px;
}

.cat-game-featured__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.cat-game-featured__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    border-radius: var(--cm-radius-badge);
    flex-shrink: 0;
    /* background-color set inline */
}

.cat-game-featured__badge-text {
    font-family: var(--cm-font);
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.cat-game-featured__title {
    font-family: var(--cm-font);
    font-size: 24px;
    font-weight: 400;
    color: var(--cm-text-primary);
    margin: 0;
    line-height: 32px;
    text-align: right;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cat-game-featured__subtitle {
    color: var(--Neutral-01, #C4C8CF);
    font-family: var(--cm-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin: 0;
    text-align: right;
    text-overflow: ellipsis;
    font-family: Vazir;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    direction: rtl;
}

/* Slider dots */
.cat-game-featured__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.cat-game-featured__dot {
    position: relative;
    width: 42px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--cm-bg-frame);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--cm-transition), width var(--cm-transition), border-color var(--cm-transition), box-shadow var(--cm-transition), transform var(--cm-transition);
    flex-shrink: 0;
}

.cat-game-featured__dot::before {
    content: '';
    position: absolute;
    inset: -12px -6px;
}

.cat-game-featured__dot--active {
    width: 56px;
    background-color: var(--cm-primary);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 4px rgba(16, 129, 223, 0.18);
}

.cat-game-featured__dot:hover:not(.cat-game-featured__dot--active),
.cat-game-featured__dot:focus-visible:not(.cat-game-featured__dot--active) {
    background-color: var(--cm-bg-frame2);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.cat-game-featured__dot:focus-visible {
    outline: 2px solid var(--cm-primary);
    outline-offset: 4px;
}

/* --- Slider Controls (Nav Arrows + Dots) ------------------------------------ */
.cat-game-featured__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
    align-self: flex-end;
    padding: 8px;
    margin: -8px;
}

.cat-game-featured__nav {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: var(--cm-bg-frame);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.cat-game-featured__nav img {
    width: 16px;
    height: 16px;
    display: block;
}

.cat-game-featured__nav--next {
    transform: rotate(180deg);
}

.cat-game-featured__nav:hover:not(:disabled) {
    background: var(--cm-bg-frame2);
}

.cat-game-featured__nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Posts Section ----------------------------------------------------------- */
.cat-game-posts-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* --- Controls: Tabs + Count -------------------------------------------------- */
.cat-game-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

/* Sort Tabs */
.cat-game-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: row;
}

.cat-game-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 8px 12px;
    border-radius: var(--cm-radius-btn);
    font-family: var(--cm-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cm-text-secondary);
    text-decoration: none;
    line-height: 1.2;
    direction: rtl;
    transition: color var(--cm-transition), border-color var(--cm-transition);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    /* button reset */
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    outline: none;
}

.cat-game-tab:hover,
.cat-game-tab:focus-visible {
    color: var(--cm-text-primary);
    background-color: rgba(48, 52, 59, 0.45);
    outline: none;
}

.cat-game-tab--active {
    color: var(--cm-text-primary);
    border-bottom-color: var(--cm-primary);
}

/* Count + Dropdown group (right side of controls) */
.cat-game-count-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

/* Subcategory Dropdown (Figma Design) */
.cat-game-dropdown {
    position: relative;
    z-index: 100;
}

.cat-game-dropdown__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 240px;
    height: 40px;
    padding: 8px 12px;
    background-color: #25272d;
    border: 1px solid #30343b;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
}

.cat-game-dropdown__button:hover {
    border-color: #1081df;
}

.cat-game-dropdown__button[aria-expanded="true"] {
    border-color: #1081df;
}

.cat-game-dropdown__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #ffffff;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-game-dropdown__button[aria-expanded="true"] .cat-game-dropdown__icon {
    transform: rotate(180deg);
}

.cat-game-dropdown__text {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-game-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 240px;
    max-height: 300px;
    overflow-y: auto;
    background-color: #25272d;
    border: 1px solid #30343b;
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: none;
    direction: rtl;
}

.cat-game-dropdown__menu.is-open {
    display: block;
}

.cat-game-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #c4c8cf;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cat-game-dropdown__item:hover {
    background-color: #30343b;
    color: #ffffff;
}

.cat-game-dropdown__item--active {
    background-color: #1081df;
    color: #ffffff;
}

.cat-game-dropdown__item--active:hover {
    background-color: #1081df;
}

.cat-game-dropdown__item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #8f96a3;
}

.cat-game-dropdown__item--active .cat-game-dropdown__item-count {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Custom scrollbar for dropdown */
.cat-game-dropdown__menu::-webkit-scrollbar {
    width: 6px;
}

.cat-game-dropdown__menu::-webkit-scrollbar-track {
    background: #25272d;
}

.cat-game-dropdown__menu::-webkit-scrollbar-thumb {
    background: #30343b;
    border-radius: 3px;
}

.cat-game-dropdown__menu::-webkit-scrollbar-thumb:hover {
    background: #3c4049;
}

/* Post Count */
.cat-game-count {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cat-game-count__number {
    font-family: var(--cm-font);
    font-size: 20px;
    font-weight: 500;
    color: var(--cm-text-primary);
    line-height: 1.5;
    direction: rtl;
    white-space: nowrap;
}

.cat-game-count__icon {
    flex-shrink: 0;
    display: block;
}

/* --- Posts Grid -------------------------------------------------------------- */
.cat-game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cm-gap-grid);
    width: 100%;
    align-items: start;
}

/* --- Post Card --------------------------------------------------------------- */
.cat-game-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-radius: var(--cm-radius-card);
    overflow: hidden;
    transition:
        transform var(--cm-transition),
        box-shadow var(--cm-transition);
    will-change: transform;
    position: relative;
}

.cat-game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Card Image */
.cat-game-card__link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.cat-game-card__image-wrap {
    position: relative;
    width: 100%;
    height: 184px;
    overflow: hidden;
    border-radius: var(--cm-radius-card) var(--cm-radius-card) 0 0;
    background-color: var(--cm-bg-section);
}

.cat-game-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cat-game-card:hover .cat-game-card__image {
    transform: scale(1.05);
}

.cat-game-card__image-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #25272d 0%, #1c1e22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-game-card__image-placeholder::after {
    content: '';
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' stroke='%2330343b' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' stroke='%2330343b' stroke-width='1.5'/%3E%3Cpath d='M21 15L16 10L5 21' stroke='%2330343b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
}

/* Card Body */
.cat-game-card__body {
    background-color: var(--cm-bg-section);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    border-radius: 0 0 var(--cm-radius-card) var(--cm-radius-card);
    flex: 1;
}

/* Category Badge */
.cat-game-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    border-radius: var(--cm-radius-badge);
    text-decoration: none;
    flex-shrink: 0;
    transition:
        filter var(--cm-transition),
        transform var(--cm-transition);
    align-self: baseline;
    /* background-color is set inline via PHP */
}

.cat-game-card__badge:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.cat-game-card__badge-text {
    font-family: var(--cm-font);
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Card Title */
.cat-game-card__title {
    margin: 0;
    width: 100%;
    height: 27px;
    overflow: hidden;
    text-align: right;
    direction: rtl;
}

.cat-game-card__title-link {
    display: block;
    font-family: var(--cm-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--cm-text-primary);
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--cm-transition);
}

.cat-game-card__title-link:hover {
    color: var(--cm-primary);
}

/* Card Meta */
.cat-game-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

.cat-game-card__meta-left,
.cat-game-card__meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-game-card__meta-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.cat-game-card__meta-item svg {
    flex-shrink: 0;
    display: block;
}

.cat-game-card__meta-value {
    font-family: var(--cm-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--cm-text-secondary);
    line-height: 1;
    white-space: nowrap;
    direction: rtl;
}

/* --- Pagination -------------------------------------------------------------- */
.cat-game-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.cat-game-pagination__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
}

.cat-game-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 8px;
    font-family: var(--cm-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cm-text-primary);
    text-decoration: none;
    line-height: 1.5;
    transition:
        background-color var(--cm-transition),
        color var(--cm-transition),
        transform var(--cm-transition);
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    background: transparent;
}

.cat-game-pagination__btn:hover:not(.cat-game-pagination__btn--current):not(.cat-game-pagination__btn--disabled) {
    background-color: var(--cm-bg-frame);
    transform: scale(1.05);
}

.cat-game-pagination__btn--current {
    background-color: var(--cm-primary);
    color: #ffffff;
    cursor: default;
    pointer-events: none;
}

.cat-game-pagination__btn--nav {
    color: var(--cm-text-primary);
}

.cat-game-pagination__btn--nav svg {
    display: block;
}

.cat-game-pagination__btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.cat-game-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--cm-font);
    font-size: 16px;
    color: var(--cm-text-primary);
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
}

/* --- Empty State ------------------------------------------------------------- */
.cat-game-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
    padding: 64px 0;
    grid-column: 1 / -1;
}

.cat-game-empty__text {
    font-family: var(--cm-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cm-text-primary);
    margin: 0;
    text-align: center;
    direction: rtl;
}

.cat-game-empty__subtext {
    font-family: var(--cm-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: var(--cm-text-secondary, #8f96a3);
    margin: 0;
    text-align: center;
    direction: rtl;
    max-width: 450px;
}

/* --- Card Entrance Animation ------------------------------------------------- */
@keyframes cm-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cat-game-card {
    animation: cm-card-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger delay for each card in the grid */
.cat-game-card:nth-child(1)  { animation-delay: 0.00s; }
.cat-game-card:nth-child(2)  { animation-delay: 0.05s; }
.cat-game-card:nth-child(3)  { animation-delay: 0.10s; }
.cat-game-card:nth-child(4)  { animation-delay: 0.15s; }
.cat-game-card:nth-child(5)  { animation-delay: 0.20s; }
.cat-game-card:nth-child(6)  { animation-delay: 0.25s; }
.cat-game-card:nth-child(7)  { animation-delay: 0.30s; }
.cat-game-card:nth-child(8)  { animation-delay: 0.35s; }
.cat-game-card:nth-child(9)  { animation-delay: 0.40s; }

/* --- Filter Switch Transition ------------------------------------------------ */
/* The JS sets opacity/transform inline; these defaults ensure smooth start */
#cat-game-grid {
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

/* Loading state: skeleton shimmer on grid */
#cat-game-grid.is-loading {
    pointer-events: none;
    opacity: 0.4;
}

/* --- Responsive -------------------------------------------------------------- */

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .cat-game-container {
        padding: 0 108px;
    }
}

/* Desktop (1200px�1639px) */
@media (max-width: 1639px) {
    .cat-game-container {
        padding: 0 48px;
    }
}

/* Tablet landscape (1024px�1199px) */
@media (max-width: 1199px) {
    .cat-game-container {
        padding: 0 32px;
    }

    .cat-game-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .cat-game-featured__image-wrap {
        height: 400px;
    }
}

/* Tablet portrait (768px�1023px) */
@media (max-width: 1023px) {
    .cat-game-container {
        padding: 0 24px;
    }

    .cat-game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cat-game-hero {
        height: 220px;
    }

    .cat-game-hero__title {
        font-size: 28px;
    }

    .cat-game-featured__image-wrap {
        height: 320px;
    }

    .cat-game-featured__title {
        font-size: 20px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .cat-game-container {
        padding: 0 16px;
        gap: 40px;
    }

    .cat-game-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cat-game-section {
        padding: 40px 0 60px;
    }

    .cat-game-hero {
        height: 200px;
    }

    .cat-game-hero__display-text {
        font-size: 48px;
    }

    .cat-game-hero__title {
        font-size: 24px;
    }

    .cat-game-hero__breadcrumb-link,
    .cat-game-hero__breadcrumb-current {
        font-size: 14px;
    }

    .cat-game-featured__image-wrap {
        height: 240px;
    }

    .cat-game-featured__title {
        font-size: 16px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cat-game-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cat-game-controls {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .cat-game-count-group {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cat-game-tabs {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cat-game-dropdown__button {
        width: 240px;
    }

    .cat-game-card__image-wrap {
        height: 200px;
    }

    .cat-game-card__title {
        height: auto;
        white-space: normal;
    }

    .cat-game-card__title-link {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Center slider controls on mobile */
    .cat-game-featured__controls {
        align-self: center;
    }

}

/* --- Reduced Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cat-game-card {
        animation: none;
    }

    .cat-game-card,
    .cat-game-card__image,
    .cat-game-card__badge,
    .cat-game-card__title-link,
    .cat-game-tab,
    .cat-game-pagination__btn,
    .cat-game-featured__image,
    .cat-game-featured__dot,
    #cat-game-grid {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   GAME SUB-CATEGORY ROW SYSTEM
   Figma Node: 6002:31055 � Horizontal scrolling row of game sub-categories
   --------------------------------------------------------------------------- */

/* --- Row Wrapper ------------------------------------------------------------- */
.cat-game-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* --- Inner: header + track side by side ------------------------------------- */
.cat-game-row__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
    direction: rtl;
}

/* --- Section Header (Figma Node 6002:31063) ---------------------------------- */
.cat-game-row__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0;
}

.cat-game-row__header-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-game-row__header-icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.cat-game-row__header-title {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    direction: rtl;
}

/* --- Scroll Track ------------------------------------------------------------ */
.cat-game-row__track {
    overflow: hidden;             /* clip the animated strip */
    cursor: grab;
    user-select: none;
    flex: 1;
    min-width: 0;
    direction: ltr;
    padding: 8px 0;
}

.cat-game-row__track.is-dragging {
    cursor: grabbing;
}

/* --- Individual Game Card ---------------------------------------------------- */
.cat-game-row-card {
    position: relative;
    flex-shrink: 0;
    height: 72px;
    min-width: 160px;             /* minimum width; grows with content */
    padding: 0 40px;
    border: 1px solid #30343b;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    direction: ltr;               /* keep internal layout LTR */
}

.cat-game-row-card:hover {
    border-color: #1081df;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 129, 223, 0.25);
}

/* Background image (covers the card) */
.cat-game-row-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border-radius: 8px;
}

/* Dark overlay / shadow � matches Figma "Shadow" layer:
   rgba(25,26,30,0.7) centered, 500px wide, 72px tall */
.cat-game-row-card__shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 72px;
    background-color: rgba(25, 26, 30, 0.70);
    border-radius: 8px;
    pointer-events: none;
}

/* Content row: counter badge + game name */
.cat-game-row-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* Counter badge (blue pill) */
.cat-game-row-card__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 4px;
    background-color: #1081df;
    border-radius: 2px;
    flex-shrink: 0;
}

.cat-game-row-card__counter-text {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
}

/* Game name */
.cat-game-row-card__name {
    font-family: 'Vazir', 'Vazir', 'Tahoma', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    white-space: nowrap;
    direction: ltr;
}

/* Placeholder card (no image) */
.cat-game-row-card--no-image .cat-game-row-card__bg {
    display: none;
}

.cat-game-row-card--no-image {
    background-color: #1c1e22;
}

/* --- Responsive adjustments -------------------------------------------------- */
@media (max-width: 767px) {
    .cat-game-row__inner {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .cat-game-row__header {
        align-items: center;
    }

    .cat-game-row__header-title {
        font-size: 16px;
        font-weight: 400;
    }

    .cat-game-row__track {
        width: 100%;
        padding: 8px 4px;
    }

    .cat-game-row-card {
        height: 72px;
        padding: 0 24px;
        min-width: 140px;
    }

    .cat-game-row-card__name {
        font-size: 16px;
    }

    .cat-game-row-card__counter-text {
        font-size: 12px;
    }
}

    .cat-game-featured__subtitle {
        color: var(--Neutral-01, #C4C8CF);
        font-family: Vazir;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 30px */
    }

@media (prefers-reduced-motion: reduce) {
    .cat-game-row-card {
        transition: none;
    }
}