:root {
    --site-accent: #35d477;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #050b0e;
    color: #f2f5f5;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

html,
.search-results {
    scrollbar-width: thin;
    scrollbar-color: #207e50 #08131f;
}

html::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
    background: #08131f;
}

html::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
    border: 2px solid #08131f;
    border-radius: 999px;
    background: #207e50;
}

html::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
    background: var(--site-accent);
}

html::-webkit-scrollbar-corner,
.search-results::-webkit-scrollbar-corner {
    background: #08131f;
}

bdi,
.latin-text {
    direction: ltr;
    unicode-bidi: isolate;
}

.game-title-text {
    direction: rtl;
    text-align: right;
}

.navbar {
    height: 100px;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #1b3035;
    background: #071014;
}

.logo span {
    display: block;
    color: var(--site-accent);
    font-size: 25px;
    font-weight: bold;
}

.logo small {
    color: #809095;
    font-size: 11px;
}
.logo img {
    width: 400px;
    height: 98px;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
}

nav {
    display: flex;
    gap: 35px;
    font-size: 19px;
    font-weight: 500;
    position: absolute;
left: 50%;
transform: translateX(-50%);
}

nav a,
.section-header a,
.game-info a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

nav a:hover,
nav .active {
    color: var(--site-accent);
}


.actions {
    display: flex;
    gap: 12px;
}

.actions button {
    background: #0d1a1e;
    border: 1px solid #1b3035;
    color: white;
    font-size: 22px;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 6px;

}
.actions button:hover {
    border-color: var(--site-accent);
    color: var(--site-accent);
}

.menu-toggle {
    display: none;
}

.back-to-top {
    position: fixed;
    right: 24px;
    left: auto;
    bottom: 24px;
    z-index: 70;
    padding: 10px 16px;
    border: 1px solid rgba(66, 255, 136, 0.65);
    border-radius: 24px;
    background: rgba(7, 16, 20, 0.94);
    color: #f2f5f5;
    font: inherit;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    cursor: pointer;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s, border-color 0.2s, color 0.2s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: var(--site-accent);
    color: var(--site-accent);
    outline: none;
}

/* SEARCH */

.search-interface {
    padding: 24px 6%;
    background: #071014;
    border-bottom: 1px solid #1b3035;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.search-panel {
    width: min(760px, 100%);
    margin: 0 auto;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border: 1px solid #294149;
    border-radius: 8px;
    outline: none;
    background: #0d1a1e;
    color: #f2f5f5;
    font: inherit;
    font-size: 17px;
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input::placeholder {
    color: #809095;
}

.search-box input:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.14);
}

.search-box button {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 1px solid #294149;
    border-radius: 8px;
    background: #0d1a1e;
    color: #f2f5f5;
    font-size: 18px;
    cursor: pointer;
}

.search-box button:hover,
.search-box button:focus-visible {
    border-color: var(--site-accent);
    color: var(--site-accent);
}

.search-results {
    padding-top: 14px;
    color: #8f9a9c;
    font-size: 15px;
}

.search-result-list {
    display: grid;
    gap: 10px;
    list-style: none;
}

.search-result-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid #1b3035;
    border-radius: 8px;
    background: #081216;
    color: #f2f5f5;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.search-result-link:hover,
.search-result-link:focus-visible {
    border-color: var(--site-accent);
    background: #0d1a1e;
    outline: none;
}

.search-result-link img {
    width: 127.78px;
    height: 79.86px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
}

.search-result-content {
    min-width: 0;
}

.search-result-content h3 {
    color: #f2f5f5;
    font-size: 17px;
    line-height: 1.35;
}

.search-result-content p {
    margin-top: 4px;
    color: var(--site-accent);
    font-size: 14px;
}

.search-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.search-result-tags span {
    padding: 2px 8px;
    border-radius: 20px;
    background: #063c2a;
    color: var(--site-accent);
    font-size: 13px;
}


/* HERO */

.hero {
    min-height: 390px;
    display: flex;
    align-items: center;
    padding: 60px 8%;
    position: relative;
    overflow: hidden;
    background: #050b0e;
    touch-action: pan-y;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
    linear-gradient(
        270deg,
        #050b0e 0%,
        rgba(5, 11, 14, 0.85) 25%,
        rgba(5, 11, 14, 0.35) 60%,
        rgba(5, 11, 14, 0.1) 100%
    );
}

.hero-backgrounds,
.hero-background {
    position: absolute;
    inset: 0;
}

.hero-backgrounds {
    z-index: 0;
}

.hero-background {
    opacity: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 350ms ease;
}

.hero-background:first-child {
    background-image: url("images/gta6.jpg");
}

.hero-background.is-active {
    opacity: 1;
}

.hero-content {
    max-width: 480px;
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 175ms ease, transform 175ms ease;
}

.hero-content.is-leaving {
    opacity: 0;
    transform: translateX(var(--hero-exit-offset, 10px));
}

.hero-content.is-entering {
    opacity: 0;
    transform: translateX(var(--hero-enter-offset, -10px));
    transition: none;
}

.hero-arrow {
    width: 94px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.hero-arrow::before {
    content: "";
    width: 46px;
    height: 46px;
    position: absolute;
    border: 1px solid rgba(66, 255, 136, 0.65);
    border-radius: 50%;
    background: rgba(5, 11, 14, 0.75);
    transition: border-color 0.2s, background 0.2s;
}

.hero-arrow svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
    color: var(--site-accent);
    outline: none;
}

.hero-arrow:hover::before,
.hero-arrow:focus-visible::before {
    border-color: var(--site-accent);
    background: #0d1a1e;
}

.hero-arrow-right {
    right: 0;
}

.hero-arrow-left {
    left: 0;
}

.badge {
    display: inline-block;
    border: 1px solid #207e50;
    background: #063c2a;
    color: var(--site-accent);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
}

.hero h1 {
    font-size: 50px;
    height: 2.3em;
    display: flex;
    align-items: center;
    overflow: hidden;
    line-height: 1.15;
    margin: 15px 0;
}

.release {
    color: var(--site-accent);
    font-weight: bold;
    direction: rtl;
    text-align: right;
}

.release-date-value {
    direction: rtl;
    unicode-bidi: isolate;
}

.hijri-date-value {
    display: inline-block;
    margin-top: 4px;
    color: #94aaa5;
    font-size: 1em;
    font-weight: 700;
    direction: rtl;
    unicode-bidi: isolate;
}

.hero p {
    color: #b8c2c4;
    margin-bottom: 20px;
}

#hero-release,
#hero-description {
    font-size: 18px;
}

#hero-description {
    height: 4.8em;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.primary-button {
    background: #063c2a;
    border: 1px solid #207e50;
    padding: 13px 25px;
    border-radius: 7px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    color: var(--site-accent);
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.primary-button:hover,
.primary-button:focus-visible {
    border-color: var(--site-accent);
    background: #085237;
    color: #72ffa4;
    transform: translateY(-1px);
    outline: none;
}


/* GAMES */

.games-section {
    padding: 55px 6%;
}

.platform-games-section {
    padding-top: 22px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-inline: 58px;
    margin-bottom: 25px;
}

.section-header h2 {
    font-size: 30px;
}

.section-header p {
    color: #8f9a9c;
    font-size: 19px;
    margin-right: 7px;
}

.section-header a {
    color: var(--site-accent);
}

.games-carousel {
    position: relative;
    padding-inline: 58px;
}

.games-viewport {
    overflow: hidden;
    padding: 5px 5px 0;
    touch-action: pan-y;
}

.games-grid {
    display: flex;
    direction: rtl;
    gap: 20px;
    transition: transform 350ms ease;
    will-change: transform;
}

.games-empty {
    width: 100%;
    padding: 45px 20px;
    border: 1px solid #1b3035;
    border-radius: 9px;
    color: #8f9a9c;
    text-align: center;
}

.game-card {
    flex: 0 0 calc((100% - 80px) / 5);
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 9px;
    background: #081216;
}

.games-grid .game-card {
    display: flex;
    height: 375px;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #294149;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(66, 255, 136, 0.035);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.games-grid .game-card:hover,
.games-grid .game-card:focus-within {
    border-color: var(--site-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(66, 255, 136, 0.08);
}

.platform-games-section .games-grid .game-card {
    height: 320px;
}

.games-arrow {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    padding: 0;
    border: 1px solid rgba(66, 255, 136, 0.65);
    border-radius: 50%;
    background: rgba(5, 11, 14, 0.9);
    color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.games-arrow:hover,
.games-arrow:focus-visible {
    border-color: var(--site-accent);
    background: #0d1a1e;
    color: var(--site-accent);
    outline: none;
}

.games-arrow svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.games-arrow-right {
    right: 0;
}

.games-arrow-left {
    left: 0;
}

.game-image {
    height: 180px;
    overflow: hidden;
}
.game-image a {
    display: block;
    height: 100%;
}
.game-info h3 a {
    font-size: 24px;
    color: inherit;
    text-decoration: none;
}

.games-grid .game-info h3,
.games-grid .game-info h3 a {
    display: block;
    white-space: nowrap;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gta {
    background: linear-gradient(135deg, #6d315c, #e47a8a);
}

.death {
    background: linear-gradient(135deg, #161d27, #65717d);
}

.monster {
    background: linear-gradient(135deg, #47351c, #a47c35);
}

.borderlands {
    background: linear-gradient(135deg, #bd1717, #f04c28);
}

.game-info {
    padding: 17px;
}

.games-grid .game-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.games-grid .game-card-details-link {
    width: fit-content;
    margin-top: auto;
}

.platform-games-section .games-grid .game-card-details-link {
    margin-top: 0;
}

.platform-games-section .games-grid .game-info {
    padding-block: 13px;
}

.section-header > a,
.games-grid .game-card-details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid #207e50;
    border-radius: 7px;
    background: #063c2a;
    color: var(--site-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.games-section .section-header > a {
    margin-left: 5px;
}

.section-header > a.platform-guide-link {
    gap: 7px;
}

.section-header > a .guide-platform-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    cursor: inherit;
}

.section-header > a .guide-platform-icon svg {
    width: 20px;
    height: 20px;
}

.section-header > a .guide-platform-icon::after {
    display: none;
}

.section-header > a:hover,
.section-header > a:focus-visible,
.games-grid .game-card-details-link:hover,
.games-grid .game-card-details-link:focus-visible {
    border-color: var(--site-accent);
    background: #085237;
    color: #72ffa4;
    transform: translateY(-1px);
    outline: none;
}

.game-info h3 {
    font-size: 19px;
}

.game-info p {
    color: var(--site-accent);
    font-size: 16px;
    margin: 4px 0 12px;
}

.tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tags span {
    border: 1px solid #207e50;
    background: #063c2a;
    color: var(--site-accent);
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 18px;
}

.platform-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.games-grid .platform-icons {
    margin-bottom: 15px;
}

.platform-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    position: relative;
    border: 1px solid #207e50;
    border-radius: 8px;
    background: #063c2a;
    color: var(--site-accent);
    cursor: help;
}

.platform-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.platform-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 50%;
    bottom: calc(100% + 7px);
    z-index: 8;
    padding: 5px 8px;
    border: 1px solid #294149;
    border-radius: 6px;
    background: #071014;
    color: #f2f5f5;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50%) translateY(4px);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.platform-icon:hover::after,
.platform-icon:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
}

.platform-icon:focus-visible {
    border-color: var(--site-accent);
    outline: none;
}

.game-info a {
    color: var(--site-accent);
    font-size: 18px;
}

/* ALL GAMES CATALOG */

.catalog-page {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: 48px 6% 80px;
}

.catalog-intro {
    margin-bottom: 32px;
}

.catalog-intro h1 {
    margin: 10px 0 4px;
    font-size: 46px;
    line-height: 1.25;
}

.catalog-intro p {
    color: #8f9a9c;
    font-size: 18px;
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 36px;
    padding: 20px;
    border: 1px solid #1b3035;
    border-radius: 10px;
    background: #081216;
    transform: translateY(-27px);
}

.catalog-field-search {
    grid-column: auto;
}

.catalog-field label {
    display: block;
    margin-bottom: 7px;
    color: #b8c2c4;
    font-size: 14px;
    font-weight: bold;
}

.catalog-field input,
.catalog-field select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #294149;
    border-radius: 7px;
    outline: none;
    background: #0d1a1e;
    color: #f2f5f5;
    font: inherit;
    font-size: 15px;
}

.catalog-field select {
    appearance: none;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b8c2c4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 17px center;
    background-size: 12px 8px;
}

.catalog-field .catalog-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.catalog-dropdown {
    position: relative;
}

.catalog-dropdown-toggle {
    width: 100%;
    height: 46px;
    padding: 0 13px 0 40px;
    border: 1px solid #294149;
    border-radius: 7px;
    outline: none;
    background-color: #0d1a1e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b8c2c4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 17px center;
    background-size: 12px 8px;
    color: #f2f5f5;
    font: inherit;
    font-size: 15px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-dropdown-toggle:focus-visible,
.catalog-dropdown.open .catalog-dropdown-toggle {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.14);
}

.catalog-dropdown-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, calc(100vw - 40px));
    max-height: 220px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid #294149;
    border-radius: 7px;
    background: #0d1a1e;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

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

.catalog-dropdown-option {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 11px;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #f2f5f5;
    font: inherit;
    font-size: 14px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-dropdown-option:hover,
.catalog-dropdown-option:focus-visible,
.catalog-dropdown-option.selected {
    outline: none;
    background: #123027;
    color: var(--site-accent);
}

.catalog-field input {
    text-align: right;
}

.catalog-field input:focus,
.catalog-field select:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.14);
}

.catalog-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 0 18px;
}

.catalog-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: -12px 0 18px;
}

.catalog-active-filters[hidden] {
    display: none;
}

.catalog-active-filters-label {
    color: #b8c2c4;
    font-size: 14px;
}

.catalog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid #207e50;
    border-radius: 20px;
    background: #063c2a;
    color: #dfffee;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.catalog-filter-chip span {
    color: var(--site-accent);
    font-size: 19px;
    line-height: 1;
}

.catalog-filter-chip:hover,
.catalog-filter-chip:focus-visible {
    border-color: var(--site-accent);
    color: #ffffff;
    outline: none;
}

.catalog-summary p {
    color: #b8c2c4;
    font-weight: bold;
}

.catalog-summary button {
    padding: 9px 15px;
    border: 1px solid #294149;
    border-radius: 7px;
    background: #0d1a1e;
    color: #f2f5f5;
    font: inherit;
    cursor: pointer;
}

.catalog-summary button:hover,
.catalog-summary button:focus-visible {
    border-color: var(--site-accent);
    color: var(--site-accent);
    outline: none;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.catalog-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.catalog-card .game-image {
    height: 210px;
}

.catalog-card .game-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.catalog-status {
    width: fit-content;
    margin-bottom: 7px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #063c2a;
    color: var(--site-accent);
    font-size: 13px;
    font-weight: bold;
}

.catalog-status.released {
    background: #223137;
    color: #c4cdd0;
}

.catalog-status.unknown {
    background: #3b3315;
    color: #ffd866;
}

.catalog-card-meta {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    color: #9da9ac;
    font-size: 14px;
}

.catalog-card-releases {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.catalog-release-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.catalog-release-row .release {
    margin: 0;
    font-size: 14px;
}

.catalog-release-icons {
    flex: 0 0 auto;
    min-height: 0;
}

.catalog-release-icons .platform-icon {
    width: 28px;
    height: 28px;
}

.catalog-release-icons .platform-icon svg {
    width: 18px;
    height: 18px;
}

.catalog-platform-row,
.release-platform-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.catalog-platform-row .platform-icons,
.release-platform-row .platform-icons {
    display: inline-flex;
    min-height: 0;
}

.catalog-platform-row .platform-icon,
.release-platform-row .platform-icon {
    width: 30px;
    height: 30px;
}

.catalog-platform-row .platform-icon svg,
.release-platform-row .platform-icon svg {
    width: 19px;
    height: 19px;
}

.catalog-card-meta strong {
    color: #d9dfe0;
}

.catalog-details-link {
    width: fit-content;
    margin-top: auto;
}

.catalog-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    border: 1px solid #1b3035;
    border-radius: 9px;
    color: #8f9a9c;
    text-align: center;
}

@media (max-width: 1100px) {
    .game-card {
        flex-basis: calc((100% - 40px) / 3);
    }

    .catalog-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .catalog-page {
        padding: 35px 20px 60px;
    }

    .catalog-intro h1 {
        font-size: 38px;
    }

    .catalog-toolbar,
    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-field-search {
        grid-column: auto;
    }

    .catalog-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-card .game-image {
        height: 190px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .hero-background,
    .hero-content,
    .games-grid,
    .games-grid .game-card,
    .back-to-top {
        transition: none;
    }

    .games-grid .game-card:hover,
    .games-grid .game-card:focus-within {
        transform: none;
    }
}

/* MOBILE */

@media (max-width: 800px) {

    .navbar {
        height: 82px;
        padding: 0 12px;
        z-index: 100;
    }

    .logo img {
        width: clamp(145px, 36vw, 230px);
        height: auto;
        max-height: 76px;
    }

    .actions {
        gap: 8px;
    }

    .actions button {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .menu-toggle {
        display: grid;
        place-items: center;
    }

    .navbar nav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        right: 12px;
        left: 12px;
        z-index: 100;
        flex-direction: column;
        gap: 3px;
        padding: 10px;
        border: 1px solid #1b3035;
        border-radius: 10px;
        background: #071014;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
        transform: none;
    }

    .navbar.mobile-nav-open nav {
        display: flex;
    }

    .navbar nav a {
        width: 100%;
        padding: 10px 13px;
        border-radius: 7px;
        text-align: right;
    }

    .navbar nav a:hover,
    .navbar nav a:focus-visible,
    .navbar nav a.active {
        background: #0d1a1e;
        outline: none;
    }

    .back-to-top {
        right: 14px;
        left: auto;
        bottom: 14px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .hero {
    min-height: 500px;
    padding: 50px 58px;
}

    .hero-background {
        background-position: 65% center;
    }

    .hero-arrow {
        width: 58px;
    }

    .hero-arrow::before {
        width: 40px;
        height: 40px;
    }

    .hero-arrow svg {
        width: 19px;
        height: 19px;
    }

    .hero h1 {
    font-size: 40px;
    height: 3.45em;
    margin: 12px 0;
}

    #hero-description {
        height: 6.4em;
        -webkit-line-clamp: 4;
    }

.hero-content {
    max-width: 100%;
}

.hero p {
    font-size: 16px;
}

    .games-section {
        padding: 35px 20px;
    }

    .games-carousel {
        padding-inline: 48px;
    }

    .games-grid {
        gap: 16px;
    }

    .game-card {
        flex-basis: 100%;
    }

    .games-arrow {
        width: 40px;
        height: 40px;
    }

    .games-arrow-right {
        right: 0;
    }

    .games-arrow-left {
        left: 0;
    }

    .section-header {
        align-items: flex-start;
        gap: 10px;
        flex-direction: column;
        margin-inline: 48px;
    }

    .search-interface {
        padding: 18px 20px;
    }

    .search-box input,
    .search-box button {
        height: 46px;
    }

    .search-box button {
        width: 46px;
    }

    .search-result-link {
        align-items: flex-start;
    }

    .search-result-link img {
        width: 103.82px;
        height: 69.21px;
    }
}

/* Game details page */

.game-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 50px;
    align-items: center;
    padding: 50px 8% 20px;
    max-width: 1400px;
    margin: auto;
}

.game-details-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    transform: scale(1.25);
transform-origin: left center;
}

.game-details-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-details-content h1 {
    font-size: 52px;
    margin: 15px 0;
    white-space: nowrap;
}

.game-details-content > p {
    color: #f7f4f4;
    font-size: 22px;
    margin-bottom: 20px;
}

.game-details-content .release {
    color: var(--site-accent);
    font-weight: bold;
}

.game-description {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 8%;
}

.game-description h2 {
    font-size:30px;
    margin:0 auto 25px;
    position:relative;
    padding-bottom:15px;
    width:fit-content;
}

.game-description h2::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: var(--site-accent);
    margin-top: 10px;
}

.game-description p {
    color: #f7f4f4;
    margin-bottom: 18px;
    font-size: 20px;
line-height: 1.9;
}

.back-button {
    display: block;
    width: fit-content;
    margin: 20px auto 60px;
    color: var(--site-accent);
    text-decoration: none;
}

.game-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px;
}

.game-meta div {
    background: #081216;
    border: 1px solid #1b3035;
    border-radius: 8px;
    padding: 14px;
}

.game-meta span {
    display: block;
    color: #809095;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
}

.game-meta strong {
    font-size: 16px;
    color: #f7f4f4;
}


@media (max-width: 800px) {

    .game-details {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
    }

    .game-details-content h1 {
        font-size: 42px;
    }

    .game-details-content > p {
        font-size: 15px;
    }

    .game-description {
        padding: 30px 20px;
    }

    .game-meta {
    display: grid;
    grid-template-columns: 1fr ;
    width: 100%;
}

}
body.light-mode {
    background: #f4f7f7;
    color: #101719;
}
body.light-mode nav a:hover,
body.light-mode nav .active {
    color: #16a85a;
}
body.light-mode nav a {
    color: #101719;
}
body.light-mode .navbar {
    background: #ffffff;
    border-bottom-color: #d9e2e4;
}
body.light-mode .actions button {
    background: #f4f7f7;
    border-color: #d9e2e4;
    color: #101719;
}
body.light-mode .back-to-top {
    border-color: #9fcdb3;
    background: rgba(255, 255, 255, 0.96);
    color: #101719;
    box-shadow: 0 8px 24px rgba(16, 23, 25, 0.14);
}
body.light-mode .back-to-top:hover,
body.light-mode .back-to-top:focus-visible {
    border-color: #16a85a;
    color: #087a3e;
}
body.light-mode .search-interface {
    background: #ffffff;
    border-bottom-color: #d9e2e4;
    box-shadow: 0 14px 30px rgba(16, 23, 25, 0.1);
}
body.light-mode .search-box input,
body.light-mode .search-box button {
    background: #f4f7f7;
    border-color: #c9d5d8;
    color: #101719;
}
body.light-mode .search-box input:focus {
    border-color: #16a85a;
    box-shadow: 0 0 0 3px rgba(22, 168, 90, 0.14);
}
body.light-mode .search-results {
    color: #667477;
}
body.light-mode .search-result-link {
    background: #f4f7f7;
    border-color: #d9e2e4;
    color: #101719;
}
body.light-mode .search-result-link:hover,
body.light-mode .search-result-link:focus-visible {
    background: #ffffff;
    border-color: #16a85a;
}
body.light-mode .search-result-content h3 {
    color: #101719;
}
body.light-mode .search-result-content p {
    color: #087a3e;
}
body.light-mode .search-result-tags span {
    background: #d9f7e6;
    color: #087a3e;
}
body.light-mode .games-arrow {
    background: rgba(255, 255, 255, 0.94);
    border-color: #c9d5d8;
    color: #101719;
}
body.light-mode .games-arrow:hover,
body.light-mode .games-arrow:focus-visible {
    background: #ffffff;
    border-color: #16a85a;
    color: #087a3e;
}
body.light-mode .games-empty {
    border-color: #d9e2e4;
    color: #667477;
}
body.light-mode .catalog-intro p,
body.light-mode .catalog-summary p,
body.light-mode .catalog-field label,
body.light-mode .catalog-card-meta {
    color: #667477;
}
body.light-mode .catalog-toolbar {
    background: #ffffff;
    border-color: #d9e2e4;
}
body.light-mode .catalog-field input,
body.light-mode .catalog-field select,
body.light-mode .catalog-summary button {
    background-color: #f4f7f7;
    border-color: #c9d5d8;
    color: #101719;
}
body.light-mode .catalog-dropdown-toggle,
body.light-mode .catalog-dropdown-menu {
    background-color: #f4f7f7;
    border-color: #c9d5d8;
    color: #101719;
}
body.light-mode .catalog-dropdown-option {
    color: #101719;
}
body.light-mode .catalog-dropdown-option:hover,
body.light-mode .catalog-dropdown-option:focus-visible,
body.light-mode .catalog-dropdown-option.selected {
    background: #dff5e8;
    color: #087a3e;
}
body.light-mode .catalog-active-filters-label {
    color: #667477;
}
body.light-mode .catalog-filter-chip {
    border-color: #9fcdb3;
    background: #dff5e8;
    color: #0a6537;
}
body.light-mode .catalog-filter-chip span {
    color: #087a3e;
}
body.light-mode .catalog-field input:focus,
body.light-mode .catalog-field select:focus {
    border-color: #16a85a;
    box-shadow: 0 0 0 3px rgba(22, 168, 90, 0.14);
}
body.light-mode .catalog-card-meta strong {
    color: #101719;
}
body.light-mode .catalog-status.released {
    background: #e4eaec;
    color: #4d5a5e;
}
body.light-mode .catalog-status.unknown {
    background: #fff1bd;
    color: #765b00;
}
body.light-mode .catalog-empty {
    border-color: #d9e2e4;
    color: #667477;
}
body.light-mode .game-card {
    background: #ffffff;
    border-color: #d9e2e4;
}
body.light-mode .games-grid .game-card {
    box-shadow: inset 0 0 0 1px rgba(22, 168, 90, 0.035);
}
body.light-mode .section-header p {
    color: #667477;
}

body.light-mode .tags span {
    background: #d9f7e6;
    color: #087a3e;
}
body.light-mode .platform-icon {
    border-color: #9fcdb3;
    background: #d9f7e6;
    color: #087a3e;
}
body.light-mode .hero .badge,
body.light-mode .hero .primary-button {
    border-color: #9fcdb3;
    background: #d9f7e6;
    color: #087a3e;
}
body.light-mode .hero .primary-button:hover,
body.light-mode .hero .primary-button:focus-visible {
    border-color: #16a85a;
    background: #c9f1da;
    color: #075f32;
}
body.light-mode .section-header > a,
body.light-mode .games-grid .game-card-details-link {
    border-color: #9fcdb3;
    background: #d9f7e6;
    color: #087a3e;
}
body.light-mode .section-header > a:hover,
body.light-mode .section-header > a:focus-visible,
body.light-mode .games-grid .game-card-details-link:hover,
body.light-mode .games-grid .game-card-details-link:focus-visible {
    border-color: #16a85a;
    background: #c9f1da;
    color: #075f32;
}
body.light-mode .platform-icon::after {
    border-color: #c9d5d8;
    background: #ffffff;
    color: #101719;
    box-shadow: 0 8px 20px rgba(16, 23, 25, 0.14);
}
body.light-mode .game-info p {
    color: #16a85a;
}
/* LIGHT MODE - HERO */

body.light-mode .hero h1 {
    color: #ffffff;
}

body.light-mode .hero p {
    color: #e1e7e8;
}


/* LIGHT MODE - GAME DETAILS */

body.light-mode .game-details-content > p {
    color: #101719;
}

body.light-mode .game-description p {
    color: #101719;
}

body.light-mode .game-meta div {
    background: #ffffff;
    border-color: #d9e2e4;
}

body.light-mode .game-meta strong {
    color: #101719;
}

/* SHARED CONTENT PAGES */

.content-page {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 50px 6% 90px;
}

.page-intro {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.page-intro h1 {
    margin: 12px 0 8px;
    font-size: clamp(38px, 5vw, 58px);
}

.page-intro p {
    color: #8f9a9c;
    font-size: 18px;
}

.content-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px;
}

.content-section-heading h2,
.release-toolbar h2 {
    font-size: 30px;
}

.content-section-heading p,
.release-toolbar p {
    color: #8f9a9c;
}

/* RELEASE SCHEDULE */

.next-release-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    min-height: 310px;
    margin-bottom: 42px;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 14px;
    background: #081216;
}

.next-release-card > img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
}

.next-release-card > div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 38px;
}

.release-eyebrow {
    margin-bottom: 10px;
    color: var(--site-accent);
    font-weight: bold;
}

.next-release-card h2 {
    margin-bottom: 12px;
    font-size: clamp(30px, 4vw, 46px);
}

.next-release-card p {
    margin-bottom: 24px;
    color: #d8dfe0;
    font-size: 18px;
}

.next-release-platforms {
    min-height: 0;
    margin-bottom: 14px;
}

.next-release-card a,
.release-entry a,
.news-card a,
.featured-news a {
    color: var(--site-accent);
    text-decoration: none;
}

.release-schedule {
    padding: 26px;
    border: 1px solid #1b3035;
    border-radius: 12px;
    background: #071014;
}

.release-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.release-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.release-filters button {
    min-width: 62px;
    padding: 8px 13px;
    border: 1px solid #294149;
    border-radius: 20px;
    background: #0d1a1e;
    color: #c8d0d2;
    font: inherit;
    cursor: pointer;
}

.release-filters button:hover,
.release-filters button:focus-visible,
.release-filters button.active {
    border-color: var(--site-accent);
    color: var(--site-accent);
    outline: none;
}

.release-timeline {
    display: grid;
    gap: 12px;
}

.release-entry {
    display: grid;
    grid-template-columns: 160px 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 112px;
    padding: 12px;
    border: 1px solid #1b3035;
    border-radius: 9px;
    background: #081216;
}

.release-date-box {
    text-align: center;
}

.release-date-box strong,
.release-date-box span {
    display: block;
}

.release-date-box strong {
    color: var(--site-accent);
    font-size: 18px;
}

.release-date-box span {
    color: #8f9a9c;
    font-size: 13px;
}

.release-entry > a {
    height: 88px;
    overflow: hidden;
    border-radius: 7px;
}

.release-entry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.release-entry h3 {
    margin-bottom: 4px;
    font-size: 22px;
}

.release-entry h3 a {
    color: #f2f5f5;
}

.release-entry p {
    margin-bottom: 6px;
    color: #aeb9bb;
}

/* NEWS */

.featured-news {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    min-height: 360px;
    margin-bottom: 48px;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 14px;
    background: #081216;
}

.featured-news > img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.featured-news > div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 38px;
}

.featured-news h2 {
    margin: 16px 0 12px;
    font-size: clamp(29px, 3.5vw, 44px);
    line-height: 1.35;
}

.featured-news p {
    margin-bottom: 22px;
    color: #c6ced0;
    font-size: 18px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.news-card {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 230px;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 10px;
    background: #081216;
}

.news-card > a {
    display: block;
    min-height: 230px;
}

.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.news-meta {
    margin-bottom: 8px;
    color: var(--site-accent);
    font-size: 13px;
}

.news-card h2 {
    margin-bottom: 8px;
    font-size: 21px;
    line-height: 1.45;
}

.news-card-content > p:not(.news-meta) {
    color: #aeb9bb;
    font-size: 15px;
}

.news-actions {
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 16px;
}

/* EXPANDED GAME DETAILS */

.detail-page {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 52px 6% 80px;
}

.detail-page .game-details {
    max-width: none;
    margin: 0 0 60px;
    padding: 0;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    gap: 48px;
    align-items: stretch;
}

.detail-page .game-details-image {
    aspect-ratio: 16 / 9;
    transform: none;
    transform-origin: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.game-details-media {
    display: flex;
    height: auto;
    flex-direction: column;
    padding-top: 14px;
    min-width: 0;
}

.detail-media-main {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 12px;
    background: #081216;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.detail-media-main img,
.detail-media-main iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.detail-media-main img {
    object-fit: cover;
}

.detail-media-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.detail-media-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    border: 2px solid #1b3035;
    border-radius: 8px;
    background: #081216;
    cursor: pointer;
}

.detail-media-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.76;
    transition: opacity 0.2s, transform 0.2s;
}

.detail-media-thumbnail:hover,
.detail-media-thumbnail:focus-visible,
.detail-media-thumbnail.active {
    border-color: var(--site-accent);
    outline: none;
}

.detail-media-thumbnail:hover img,
.detail-media-thumbnail:focus-visible img,
.detail-media-thumbnail.active img {
    opacity: 1;
    transform: scale(1.035);
}

.thumbnail-play-icon {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(5, 11, 14, 0.82);
    color: var(--site-accent);
    font-size: 15px;
    line-height: 1;
}

.detail-page .game-details-content h1 {
    margin: 14px 0;
    font-size: clamp(38px, 4.3vw, 58px);
    line-height: 1.15;
    white-space: nowrap;
}

.detail-page .game-details-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.detail-page .game-details-content > p {
    font-size: 18px;
}

.detail-page .detail-summary {
    color: #d7ddde;
    line-height: 1.9;
}

.detail-page .game-details-content > .release {
    margin: 0 0 8px;
}

.detail-page .game-details-content > .detail-countdown {
    margin: 0 0 20px;
}

.detail-release-list {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-release-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-release-platforms {
    flex: 0 0 auto;
    min-height: 0;
}

.detail-release-text {
    min-width: 0;
}

.detail-release-text .release {
    margin: 0 0 4px;
}

.detail-release-text .detail-countdown {
    margin: 0;
}

.detail-page .game-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    padding-top: 25px;
}

.game-meta .platform-icons {
    display: flex;
    min-height: 34px;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
}

.game-meta .platform-icon {
    display: grid;
    margin: 0;
    color: var(--site-accent);
    font-size: inherit;
    font-weight: normal;
}

.detail-page .detail-meta-item:first-child {
    grid-column: 1 / -1;
}

.game-meta .age-rating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.game-meta .age-rating-item > span {
    margin-bottom: 0;
}

.game-meta .age-rating-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    border: 3px solid #f5f5f5;
    border-radius: 7px;
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.game-meta .age-rating-icon bdi {
    font-size: 21px;
}

.game-meta .age-rating-icon::after {
    content: attr(data-system);
    margin-top: 3px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.game-meta .rating-21 {
    background: #121212;
}

.game-meta .rating-18 {
    background: #c91f2c;
}

.game-meta .rating-16 {
    background: #f2a126;
    color: #101010;
}

.game-meta .rating-tbc {
    background: #2374ad;
}

.game-meta .rating-tbc bdi {
    font-size: 16px;
}

.detail-section {
    margin: 0 auto 58px;
}

.detail-section h2 {
    width: fit-content;
    margin: 0 auto 28px;
    padding-bottom: 12px;
    font-size: 31px;
    text-align: center;
}

.detail-section h2::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 10px;
    background: var(--site-accent);
}

.detail-page .game-description {
    max-width: 900px;
    padding: 0;
}

.pc-requirements {
    max-width: 1000px;
}

.similar-games {
    max-width: 1200px;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.requirements-column,
.detail-info-message {
    border: 1px solid #1b3035;
    border-radius: 10px;
    background: #081216;
}

.requirements-column {
    padding: 24px;
}

.requirements-column h3 {
    margin: 0 0 16px;
    color: var(--site-accent);
    font-size: 20px;
}

.requirements-column ul {
    margin: 0;
    padding-inline-start: 20px;
}

.requirements-column li {
    margin-bottom: 10px;
    color: #d7ddde;
    line-height: 1.7;
}

.requirements-column li:last-child {
    margin-bottom: 0;
}

.detail-info-message {
    margin: 0;
    padding: 28px;
    color: #aab5b8;
    text-align: center;
}

.similar-games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.similar-game-card {
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 10px;
    background: #081216;
    transition: border-color 0.2s, transform 0.2s;
}

.similar-game-card > a {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.similar-game-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.similar-game-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.similar-game-content h3 {
    margin: 0 0 10px;
    color: #f7f4f4;
    font-size: 22px;
    text-align: right;
}

.similar-game-content p {
    margin: auto 0 0;
    color: var(--site-accent);
    font-weight: 700;
}

.similar-game-card:hover,
.similar-game-card:focus-within {
    border-color: var(--site-accent);
    transform: translateY(-3px);
}

.detail-media {
    max-width: 1200px;
}

.detail-media-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 20px;
}

.detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-gallery a {
    min-height: 130px;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 9px;
}

.detail-gallery a:first-child {
    grid-column: 1 / -1;
}

.detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.detail-gallery a:hover img,
.detail-gallery a:focus-visible img {
    transform: scale(1.035);
}

.detail-trailer {
    min-height: 100%;
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 10px;
    background: #081216;
}

.detail-trailer iframe {
    width: 100%;
    height: 100%;
    min-height: 370px;
    border: 0;
}

.detail-unavailable {
    padding: 100px 20px;
    text-align: center;
}

body.light-mode .page-intro p,
body.light-mode .content-section-heading p,
body.light-mode .release-toolbar p,
body.light-mode .release-entry p,
body.light-mode .news-card-content > p:not(.news-meta),
body.light-mode .featured-news p {
    color: #667477;
}

body.light-mode .next-release-card,
body.light-mode .release-schedule,
body.light-mode .release-entry,
body.light-mode .featured-news,
body.light-mode .news-card,
body.light-mode .detail-trailer {
    border-color: #d9e2e4;
    background: #ffffff;
}

body.light-mode .detail-media-main,
body.light-mode .detail-media-thumbnail {
    border-color: #d9e2e4;
    background: #ffffff;
}

body.light-mode .detail-media-thumbnail:hover,
body.light-mode .detail-media-thumbnail:focus-visible,
body.light-mode .detail-media-thumbnail.active {
    border-color: #16a85a;
}

body.light-mode .release-entry h3 a {
    color: #101719;
}

body.light-mode .release-filters button {
    border-color: #c9d5d8;
    background: #f4f7f7;
    color: #4d5a5e;
}

body.light-mode .release-filters button:hover,
body.light-mode .release-filters button:focus-visible,
body.light-mode .release-filters button.active {
    border-color: #16a85a;
    color: #087a3e;
}

body.light-mode .detail-page .detail-summary {
    color: #101719;
}

body.light-mode .requirements-column,
body.light-mode .detail-info-message,
body.light-mode .similar-game-card {
    border-color: #d9e2e4;
    background: #ffffff;
}

body.light-mode .requirements-column li,
body.light-mode .detail-info-message,
body.light-mode .similar-game-content h3 {
    color: #101719;
}

@media (max-width: 1050px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .detail-page .game-details {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .detail-page .game-details-image {
        order: -1;
    }

    .game-details-media {
        order: -1;
        display: block;
        width: 100%;
        height: auto;
        padding-top: 0;
    }

    .detail-page .game-details-content {
        display: block;
    }

    .detail-page .game-meta {
        margin-top: 25px;
        padding-top: 0;
    }

    .detail-media-thumbnails {
        margin-top: 12px;
        padding-top: 0;
    }

    .detail-media-main {
        flex: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .similar-games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .content-page,
    .detail-page {
        padding: 36px 20px 65px;
    }

    .next-release-card,
    .featured-news,
    .detail-media-layout {
        grid-template-columns: 1fr;
    }

    .next-release-card > div,
    .featured-news > div {
        padding: 25px;
    }

    .release-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .release-entry {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .release-entry > a {
        height: 180px;
    }

    .news-card {
        grid-template-columns: 1fr;
    }

    .news-card > a {
        min-height: 200px;
    }

    .detail-page .game-details {
        gap: 28px;
        margin-bottom: 48px;
        padding: 0;
    }

    .detail-page .game-details-content h1 {
        font-size: 38px;
    }

    .detail-page .game-meta,
    .detail-media-layout,
    .requirements-grid,
    .similar-games-grid {
        grid-template-columns: 1fr;
    }

    .detail-page .detail-meta-item:first-child {
        grid-column: auto;
    }

    .detail-trailer iframe {
        min-height: 240px;
    }
}

/* FOOTER */

.site-footer {
    border-top: 1px solid #1b3035;
    background: #071014;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.7fr);
    gap: 60px;
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 42px 6%;
}

.footer-brand img {
    width: 280px;
    height: 69px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-bottom: 18px;
}

.footer-brand p {
    max-width: 540px;
    color: #8f9a9c;
    font-size: 16px;
}

.footer-links {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links h2 {
    margin-bottom: 4px;
    color: #f2f5f5;
    font-size: 18px;
}

.footer-links a {
    width: fit-content;
    color: #aeb9bb;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--site-accent);
    outline: none;
}

.footer-copyright {
    padding: 17px 6%;
    border-top: 1px solid #13262b;
    color: #718084;
    font-size: 14px;
    text-align: center;
}

body.light-mode .site-footer {
    border-top-color: #d9e2e4;
    background: #ffffff;
}

body.light-mode .footer-brand p,
body.light-mode .footer-links a,
body.light-mode .footer-copyright {
    color: #667477;
}

body.light-mode .footer-links h2 {
    color: #101719;
}

body.light-mode .footer-copyright {
    border-top-color: #d9e2e4;
}

body.light-mode .footer-links a:hover,
body.light-mode .footer-links a:focus-visible {
    color: #087a3e;
}

@media (max-width: 800px) {
    body.light-mode .navbar nav {
        border-color: #d9e2e4;
        background: #ffffff;
        box-shadow: 0 16px 34px rgba(16, 23, 25, 0.18);
    }

    body.light-mode .navbar nav a:hover,
    body.light-mode .navbar nav a:focus-visible,
    body.light-mode .navbar nav a.active {
        background: #f4f7f7;
    }
}

@media (max-width: 800px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 35px 20px;
    }

    .footer-brand img {
        width: 240px;
        height: 59px;
    }
}

/* Compact header inspired by the supplied reference. */
.navbar {
    height: 80px;
    padding: 0 2.4%;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.25fr) minmax(390px, 1fr);
    align-items: center;
    gap: 24px;
    isolation: isolate;
    border-bottom-color: rgba(92, 118, 132, 0.24);
    background:
        radial-gradient(circle at 18% 0%, rgba(34, 74, 107, 0.18), transparent 34%),
        #08131f;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
}

.navbar .logo {
    min-width: 0;
    justify-self: start;
}

.navbar .logo a {
    display: flex;
    align-items: center;
}

.navbar .logo img {
    width: min(300px, 100%);
    height: 76px;
    object-fit: contain;
    object-position: center;
    transform: translateX(-80%) scale(1.72);
    transform-origin: center;
}

.navbar nav {
    position: static;
    left: auto;
    transform: none;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(18px, 2vw, 36px);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.navbar nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px 1px 0;
    color: #f3f6f8;
    transition: color 0.2s ease;
}

.navbar nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--site-accent);
    opacity: 0;
    transform: scaleX(0.45);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar nav a:hover::after,
.navbar nav a:focus-visible::after,
.navbar nav a.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.navbar nav a:focus-visible {
    color: var(--site-accent);
    outline: none;
}

.navbar .actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    direction: ltr;
    flex-direction: row-reverse;
}

.navbar .header-icon-button,
.navbar .actions .menu-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #d6e0e6;
}

.navbar .header-icon-button:hover,
.navbar .header-icon-button:focus-visible,
.navbar .actions .menu-toggle:hover,
.navbar .actions .menu-toggle:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.07);
    color: var(--site-accent);
    outline: none;
}

.navbar .header-icon-button svg,
.search-field-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-toggle-button {
    display: none !important;
}

.navbar .actions .menu-toggle {
    display: none;
}

.navbar .search-interface {
    position: relative;
    width: clamp(300px, 27vw, 410px);
    flex: 0 1 410px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    direction: ltr;
}

.navbar .search-panel {
    width: 100%;
    margin: 0;
}

.navbar .search-box {
    height: 42px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(109, 143, 164, 0.2);
    border-radius: 22px;
    background: #172638;
    color: #97a9b7;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.navbar .search-box:focus-within {
    border-color: rgba(66, 255, 136, 0.62);
    background: #1a2b3e;
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.1);
}

.search-field-icon {
    display: grid;
    place-items: center;
    color: #b4c3cd;
}

.navbar .search-box input {
    width: 100%;
    height: 40px;
    padding: 0 4px 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #f3f6f8;
    font-size: 13px;
    direction: rtl;
    text-align: right;
}

.navbar .search-box input:focus {
    border: 0;
    box-shadow: none;
}

.navbar .search-box input::placeholder {
    color: #8396a5;
    opacity: 1;
}

.navbar .search-box input::-webkit-search-cancel-button {
    display: none;
}

.navbar .search-box button {
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8da0ae;
    font-size: 13px;
}

.navbar .search-box input:placeholder-shown + #search-close {
    visibility: hidden;
    pointer-events: none;
}

.navbar .search-box button:hover,
.navbar .search-box button:focus-visible {
    border: 0;
    background: rgba(255, 255, 255, 0.07);
    color: var(--site-accent);
    outline: none;
}

.navbar .search-results {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 130;
    width: 100%;
    max-height: min(480px, calc(100vh - 110px));
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #263d4d;
    border-radius: 14px;
    background: rgba(8, 19, 31, 0.98);
    color: #97a9b7;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(16px);
    direction: rtl;
}

.navbar .search-results[hidden],
.navbar .search-interface[hidden] {
    display: none;
}

.navbar .search-result-link {
    border-color: rgba(109, 143, 164, 0.18);
    border-radius: 10px;
    background: #0d1a27;
}

.language-toggle {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 5px;
    border-radius: 10px;
    color: #aebdc7;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    direction: rtl;
    cursor: default;
}

.language-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

.language-code {
    min-width: 30px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: linear-gradient(145deg, #30d980, #138e54);
    color: #ffffff;
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: 0.04em;
}

.language-option.is-active {
    color: #ffffff;
    font-weight: 700;
}

.language-divider {
    color: #52697a;
}

body.light-mode .navbar {
    border-bottom-color: #d7e1e7;
    background:
        radial-gradient(circle at 18% 0%, rgba(22, 168, 90, 0.08), transparent 34%),
        #ffffff;
    box-shadow: 0 8px 24px rgba(16, 23, 25, 0.08);
}

body.light-mode .navbar nav a,
body.light-mode .language-option.is-active {
    color: #101719;
}

body.light-mode .navbar .header-icon-button,
body.light-mode .language-toggle {
    color: #52646e;
}

body.light-mode .navbar .header-icon-button {
    border-color: transparent;
    background: transparent;
}

body.light-mode .navbar .header-icon-button:hover,
body.light-mode .navbar .header-icon-button:focus-visible,
body.light-mode .language-toggle:hover {
    background: #eef3f5;
}

body.light-mode .navbar .search-box {
    border-color: #d6e1e6;
    background: #eef3f5;
}

body.light-mode .navbar .search-box:focus-within {
    border-color: #16a85a;
    background: #ffffff;
}

body.light-mode .navbar .search-box input {
    background: transparent;
    color: #101719;
}

body.light-mode .navbar .search-results {
    border-color: #d6e1e6;
    background: rgba(255, 255, 255, 0.98);
    color: #667477;
}

@media (max-width: 1180px) {
    .navbar {
        grid-template-columns: minmax(200px, 0.75fr) minmax(355px, 1fr) minmax(305px, 0.95fr);
        gap: 14px;
    }

    .navbar .logo img {
        width: min(235px, 100%);
    }

    .navbar nav {
        gap: 17px;
        font-size: 19px;
    }

    .navbar .search-interface {
        width: clamp(220px, 25vw, 330px);
    }

    .language-option-en,
    .language-divider {
        display: none;
    }
}

@media (max-width: 800px) {
    .navbar {
        height: 72px;
        padding: 0 12px;
        display: flex;
        gap: 10px;
    }

    .navbar .logo {
        margin-left: auto;
    }

    .navbar .logo img {
        width: clamp(150px, 38vw, 210px);
        height: 68px;
        max-height: none;
    }

    .navbar .actions {
        gap: 4px;
    }

    .navbar .header-icon-button,
    .navbar .actions .menu-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
        font-size: 18px;
    }

    .navbar .actions .menu-toggle {
        display: grid;
    }

    .search-toggle-button {
        display: grid !important;
    }

    .language-toggle {
        height: 34px;
        padding: 0 4px;
    }

    .language-toggle .language-option,
    .language-toggle .language-divider {
        display: none;
    }

    .language-code {
        min-width: 28px;
        height: 22px;
    }

    .navbar .search-interface {
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        left: 12px;
        width: auto;
        padding: 10px;
        border: 1px solid #263d4d;
        border-radius: 14px;
        background: rgba(8, 19, 31, 0.98);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    }

    .navbar .search-box {
        height: 46px;
        border-radius: 23px;
    }

    .navbar .search-box input {
        height: 44px;
    }

    .navbar .search-results {
        position: static;
        width: 100%;
        max-height: min(430px, calc(100vh - 170px));
        margin-top: 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .navbar nav {
        display: none;
        top: calc(100% + 8px);
        right: 12px;
        left: 12px;
        padding: 10px;
        border-color: #263d4d;
        border-radius: 14px;
        background: rgba(8, 19, 31, 0.98);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    }

    .navbar.mobile-nav-open nav {
        display: flex;
    }

    .navbar nav a {
        min-height: 43px;
        padding: 8px 13px;
    }

    .navbar nav a::after {
        display: none;
    }

    .navbar nav a.active {
        background: rgba(66, 255, 136, 0.1);
    }

    body.light-mode .navbar .search-interface,
    body.light-mode .navbar nav {
        border-color: #d6e1e6;
        background: rgba(255, 255, 255, 0.98);
    }
}

@media (max-width: 470px) {
    .navbar .logo img {
        width: clamp(125px, 34vw, 160px);
    }

    .navbar #theme-toggle {
        display: none;
    }
}

/* Monthly release calendar */
.release-page {
    width: min(1540px, 100%);
    padding-top: 44px;
}

.release-calendar-intro {
    margin-bottom: 30px;
}

.release-calendar-intro .badge {
    border-color: #207e50;
    background: #063c2a;
    color: var(--site-accent);
}

.release-calendar-shell {
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 18px;
    background: #071014;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid #1b3035;
    background:
        radial-gradient(circle at 88% -70%, rgba(66, 255, 136, 0.13), transparent 42%),
        #08151b;
}

.calendar-month-navigation,
.calendar-quick-actions {
    display: flex;
    align-items: center;
}

.calendar-month-navigation {
    gap: 14px;
}

.calendar-current-month {
    min-width: 210px;
    text-align: center;
}

.calendar-current-month > span,
.calendar-month-picker > span,
.calendar-search-field > span,
.calendar-platform-field > span,
.calendar-sidebar-heading span {
    display: block;
    color: #83949a;
    font-size: 12px;
    font-weight: 700;
}

.calendar-current-month h2 {
    color: #f4f7f7;
    font-size: 27px;
    line-height: 1.25;
}

.calendar-current-hijri-month {
    display: block;
    margin-top: 3px;
    color: var(--site-accent);
    font-size: 0.64em;
    font-weight: 700;
    direction: rtl;
    unicode-bidi: isolate;
}

.calendar-nav-button,
.calendar-quick-actions button,
.calendar-clear-button {
    border: 1px solid #294149;
    background: #0d1a1e;
    color: #e7edef;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.calendar-nav-button {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

.calendar-nav-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-nav-button:hover,
.calendar-nav-button:focus-visible,
.calendar-quick-actions button:hover,
.calendar-quick-actions button:focus-visible,
.calendar-clear-button:hover,
.calendar-clear-button:focus-visible {
    border-color: var(--site-accent);
    background: #063c2a;
    color: var(--site-accent);
    outline: none;
}

.calendar-quick-actions {
    align-items: flex-end;
    gap: 10px;
}

.calendar-quick-actions > button {
    height: 44px;
    padding: 0 18px;
    border-radius: 9px;
}

.calendar-month-picker {
    position: relative;
    display: grid;
    min-width: 210px;
    gap: 5px;
}

.calendar-month-picker-toggle,
.calendar-search-field input,
.calendar-platform-field select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #294149;
    border-radius: 9px;
    outline: none;
    background: #0d1a1e;
    color: #f2f5f5;
    color-scheme: dark;
    font: inherit;
}

.calendar-month-picker-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 13px;
    text-align: right;
}

.calendar-month-picker-toggle svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: #9aabb0;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-month-popover {
    position: fixed;
    z-index: 70;
    top: 0;
    left: 0;
    width: 310px;
    padding: 12px;
    border: 1px solid #294149;
    border-radius: 12px;
    background: #0b171c;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.calendar-month-popover[hidden] {
    display: none;
}

.calendar-month-picker-header {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #20353b;
}

.calendar-month-picker-header strong {
    color: #f2f5f5;
    font-size: 17px;
    text-align: center;
}

.calendar-month-picker-header button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
}

.calendar-month-picker-header svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-picker-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.calendar-picker-months button {
    min-width: 0;
    height: 40px;
    padding: 0 5px;
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
    color: #dce5e7;
    font-size: 14px;
}

.calendar-picker-months button:hover,
.calendar-picker-months button:focus-visible {
    border-color: #207e50;
    background: #0c2b20;
    color: var(--site-accent);
}

.calendar-picker-months button.selected {
    border-color: var(--site-accent);
    background: #0a4a31;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(66, 255, 136, 0.15);
}

.calendar-month-picker-toggle:focus-visible,
.calendar-month-picker-toggle[aria-expanded="true"],
.calendar-search-field input:focus,
.calendar-platform-field select:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.1);
}

.calendar-filter-bar {
    display: grid;
    grid-template-columns: minmax(230px, 1.2fr) minmax(200px, 0.8fr) auto;
    align-items: end;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid #17292f;
}

.calendar-search-field,
.calendar-platform-field {
    display: grid;
    gap: 6px;
}

.calendar-clear-button {
    min-width: 118px;
    height: 44px;
    padding: 0 16px;
    border-radius: 9px;
}


.release-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
}

.release-calendar-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #24383f;
    border-radius: 12px;
    background: #1b3035;
}

.calendar-weekdays,
.release-calendar-grid {
    min-width: 770px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    direction: rtl;
}

.calendar-weekdays {
    gap: 1px;
    border-bottom: 1px solid #24383f;
    background: #24383f;
}

.calendar-weekdays span {
    padding: 10px 5px;
    background: #0d1a1e;
    color: #9dadb2;
    font-size: 15.6px;
    font-weight: 700;
    text-align: center;
}

.release-calendar-grid {
    gap: 1px;
    background: #1b3035;
}

.release-calendar-grid.is-entering-next-month {
    animation: calendar-month-enter-next 0.28s cubic-bezier(0.22, 0.75, 0.28, 1);
}

.release-calendar-grid.is-entering-previous-month {
    animation: calendar-month-enter-previous 0.28s cubic-bezier(0.22, 0.75, 0.28, 1);
}

@keyframes calendar-month-enter-next {
    from {
        opacity: 0.2;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes calendar-month-enter-previous {
    from {
        opacity: 0.2;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .release-calendar-grid.is-entering-next-month,
    .release-calendar-grid.is-entering-previous-month {
        animation: none;
    }
}

.calendar-day {
    min-width: 0;
    min-height: 132px;
    padding: 9px;
    background: #091419;
    transition: background 0.2s;
}

.calendar-day.is-outside-month {
    background: #071014;
}

.calendar-day.is-outside-month > * {
    opacity: 0.42;
}

.calendar-day.is-today {
    position: relative;
    background: #0b2019;
    box-shadow: inset 0 0 0 1px var(--site-accent);
}

.calendar-day.has-releases:not(.is-today) {
    background: #0a181b;
}

.calendar-day-header {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 6px;
}

.calendar-day-number-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.calendar-day-number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #dce3e5;
    font-size: 13px;
    font-weight: 800;
}

.calendar-hijri-day-number {
    min-width: 20px;
    color: #7f9690;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    direction: rtl;
    unicode-bidi: isolate;
}

.calendar-day.is-today .calendar-day-header {
    justify-content: flex-start;
    gap: 10px;
}

.calendar-day.is-today .calendar-day-number {
    background: var(--site-accent);
    color: #06100a;
}

.calendar-today-label {
    color: var(--site-accent);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.calendar-game-event {
    display: block;
    min-width: 0;
    margin-top: 6px;
    padding: 7px;
    border: 1px solid #207e50;
    border-radius: 7px;
    background: #063c2a;
    color: #dfffea;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.calendar-game-event:hover,
.calendar-game-event:focus-visible {
    border-color: var(--site-accent);
    background: #085237;
    transform: translateY(-1px);
    outline: none;
}

.calendar-day.has-releases.has-search-match {
    position: relative;
    background: #0c241a;
    box-shadow: inset 0 0 0 2px rgba(66, 255, 136, 0.7);
}

.calendar-game-event.is-search-match {
    position: relative;
    z-index: 1;
    border-color: var(--site-accent);
    background: #0a5a39;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(66, 255, 136, 0.22), 0 0 22px rgba(66, 255, 136, 0.24);
    animation: calendar-search-highlight 0.9s ease-out;
}

@keyframes calendar-search-highlight {
    0% {
        transform: scale(0.96);
        box-shadow: 0 0 0 7px rgba(66, 255, 136, 0.38);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(66, 255, 136, 0.22), 0 0 22px rgba(66, 255, 136, 0.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-game-event.is-search-match {
        animation: none;
    }
}

.calendar-day.is-past .calendar-game-event {
    border-color: #355149;
    background: #11251f;
    opacity: 0.7;
}

.calendar-day.is-past .calendar-game-event.is-search-match {
    border-color: var(--site-accent);
    background: #0a5a39;
    opacity: 1;
}

.calendar-game-event-title {
    min-height: 2.7em;
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.calendar-game-event-title.is-long-title {
    font-size: 11px;
}

.calendar-game-event-title.is-very-long-title {
    font-size: 10px;
}

.calendar-event-platforms,
.calendar-sidebar-platforms {
    min-height: 0;
    gap: 4px;
    margin-top: 6px;
}

.calendar-event-platforms .platform-icon {
    width: 19px;
    height: 19px;
    border-radius: 5px;
}

.calendar-event-platforms .platform-icon svg {
    width: 13px;
    height: 13px;
}

.calendar-event-platforms .platform-icon::after,
.calendar-sidebar-platforms .platform-icon::after {
    display: none;
}

.release-calendar-sidebar {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 18px;
}

.release-calendar-sidebar > section {
    overflow: hidden;
    border: 1px solid #24383f;
    border-radius: 12px;
    background: #081216;
}

.calendar-sidebar-heading {
    padding: 16px 17px 13px;
    border-bottom: 1px solid #1b3035;
}

.calendar-sidebar-heading h2 {
    color: #f1f5f5;
    font-size: 20px;
}

.calendar-upcoming-list,
.calendar-estimated-list {
    display: grid;
    gap: 1px;
    background: #1b3035;
}

.calendar-upcoming-item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 11px;
    padding: 11px;
    background: #091419;
}

.calendar-upcoming-item > a {
    min-height: 72px;
    overflow: hidden;
    border-radius: 7px;
}

.calendar-upcoming-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.calendar-upcoming-content {
    min-width: 0;
}

.calendar-upcoming-content > a {
    display: block;
    overflow: hidden;
    color: #f2f5f5;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-upcoming-content > a:hover,
.calendar-upcoming-content > a:focus-visible,
.calendar-estimated-item:hover,
.calendar-estimated-item:focus-visible {
    color: var(--site-accent);
    outline: none;
}

.calendar-upcoming-date {
    display: block;
    margin-bottom: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--site-accent);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.calendar-upcoming-hijri-date {
    display: block;
    margin-top: 2px;
    color: #8aa09a;
    font-size: 12px;
    direction: rtl;
    unicode-bidi: isolate;
}

.calendar-upcoming-date:hover,
.calendar-upcoming-date:focus-visible {
    text-decoration: underline;
    outline: none;
}

.calendar-sidebar-platforms .platform-icon {
    width: 21px;
    height: 21px;
    border-radius: 5px;
}

.calendar-sidebar-platforms .platform-icon svg {
    width: 14px;
    height: 14px;
}

.calendar-estimated-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    background: #091419;
    color: #e3e8e9;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.calendar-estimated-item strong {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid #6f6121;
    border-radius: 12px;
    background: #302a12;
    color: #ffd866;
    font-size: 11px;
}

.calendar-empty-state {
    padding: 22px 15px;
    background: #091419;
    color: #7f8e92;
    font-size: 13px;
    text-align: center;
}

body.light-mode .release-calendar-intro .badge {
    border-color: #9fcdb3;
    background: #d9f7e6;
    color: #087a3e;
}

body.light-mode .release-calendar-shell,
body.light-mode .release-calendar-sidebar > section {
    border-color: #d9e2e4;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(16, 23, 25, 0.09);
}

body.light-mode .calendar-toolbar {
    border-color: #d9e2e4;
    background:
        radial-gradient(circle at 88% -70%, rgba(22, 168, 90, 0.1), transparent 42%),
        #f7f9fa;
}

body.light-mode .calendar-current-month h2,
body.light-mode .calendar-sidebar-heading h2,
body.light-mode .calendar-upcoming-content > a {
    color: #101719;
}

body.light-mode .calendar-nav-button,
body.light-mode .calendar-quick-actions button,
body.light-mode .calendar-clear-button,
body.light-mode .calendar-month-picker-toggle,
body.light-mode .calendar-search-field input,
body.light-mode .calendar-platform-field select {
    border-color: #c9d5d8;
    background: #f4f7f7;
    color: #101719;
    color-scheme: light;
}

body.light-mode .calendar-month-popover {
    border-color: #c9d5d8;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(16, 23, 25, 0.16);
}

body.light-mode .calendar-month-picker-header {
    border-color: #d9e2e4;
}

body.light-mode .calendar-month-picker-header strong,
body.light-mode .calendar-picker-months button {
    color: #101719;
}

body.light-mode .calendar-month-picker-toggle svg {
    stroke: #667477;
}

body.light-mode .calendar-picker-months button:hover,
body.light-mode .calendar-picker-months button:focus-visible {
    border-color: #9fcdb3;
    background: #eaf8f0;
    color: #087a3e;
}

body.light-mode .calendar-picker-months button.selected {
    border-color: #16a85a;
    background: #d9f7e6;
    color: #075f32;
}


body.light-mode .release-calendar-panel,
body.light-mode .calendar-weekdays,
body.light-mode .release-calendar-grid,
body.light-mode .calendar-upcoming-list,
body.light-mode .calendar-estimated-list {
    border-color: #d9e2e4;
    background: #d9e2e4;
}

body.light-mode .calendar-weekdays span,
body.light-mode .calendar-day,
body.light-mode .calendar-upcoming-item,
body.light-mode .calendar-estimated-item,
body.light-mode .calendar-empty-state {
    background: #ffffff;
}

body.light-mode .calendar-day.is-outside-month {
    background: #f4f7f7;
}

body.light-mode .calendar-day.is-today {
    background: #eaf8f0;
}

body.light-mode .calendar-day.has-releases:not(.is-today) {
    background: #fbfdfc;
}

body.light-mode .calendar-day-number,
body.light-mode .calendar-estimated-item {
    color: #101719;
}

body.light-mode .calendar-hijri-day-number,
body.light-mode .calendar-upcoming-hijri-date,
body.light-mode .hijri-date-value {
    color: #4f6e65;
}

body.light-mode .calendar-game-event {
    border-color: #9fcdb3;
    background: #d9f7e6;
    color: #075f32;
}

body.light-mode .calendar-game-event:hover,
body.light-mode .calendar-game-event:focus-visible {
    border-color: #16a85a;
    background: #c9f1da;
}

body.light-mode .calendar-day.has-releases.has-search-match {
    background: #e4f8ec;
    box-shadow: inset 0 0 0 2px rgba(22, 168, 90, 0.65);
}

body.light-mode .calendar-game-event.is-search-match {
    border-color: #16a85a;
    background: #bceccc;
    color: #064f2b;
    box-shadow: 0 0 0 2px rgba(22, 168, 90, 0.18), 0 0 20px rgba(22, 168, 90, 0.18);
}

body.light-mode .calendar-day.is-past .calendar-game-event {
    border-color: #cadbd1;
    background: #e9f2ed;
}

body.light-mode .calendar-day.is-past .calendar-game-event.is-search-match {
    border-color: #16a85a;
    background: #bceccc;
    opacity: 1;
}

body.light-mode .calendar-sidebar-heading {
    border-color: #d9e2e4;
}

body.light-mode .calendar-upcoming-date {
    color: #087a3e;
}

body.light-mode .calendar-empty-state {
    color: #667477;
}

@media (max-width: 1100px) {
    .release-calendar-layout {
        grid-template-columns: 1fr;
    }

    .release-calendar-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .release-page {
        padding: 34px 14px 70px;
    }

    .calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 18px;
    }

    .calendar-month-navigation {
        justify-content: center;
    }

    .calendar-quick-actions {
        justify-content: center;
    }

    .calendar-month-picker {
        flex: 1;
    }

    .calendar-month-popover {
        width: min(310px, calc(100vw - 48px));
    }

    .calendar-filter-bar {
        grid-template-columns: 1fr 1fr;
        padding: 16px 18px;
    }

    .calendar-search-field {
        grid-column: 1 / -1;
    }

    .calendar-clear-button {
        min-width: 0;
    }


    .release-calendar-layout {
        padding: 18px;
    }

    .release-calendar-panel {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #207e50 #08131f;
    }
}

@media (max-width: 600px) {
    .calendar-current-month {
        min-width: 150px;
    }

    .calendar-current-month h2 {
        font-size: 22px;
    }

    .calendar-filter-bar,
    .release-calendar-sidebar {
        grid-template-columns: 1fr;
    }

    .calendar-search-field {
        grid-column: auto;
    }


}


/* NEWSROOM REDESIGN */

.news-page {
    width: min(1500px, 100%);
    padding-top: 42px;
}

.news-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 42px;
    margin-bottom: 34px;
}

.news-page-intro {
    max-width: 760px;
}

.news-page-intro .badge {
    display: inline-flex;
    padding: 7px 13px;
    border: 1px solid rgba(66, 255, 136, 0.38);
    border-radius: 999px;
    background: rgba(66, 255, 136, 0.08);
    color: var(--site-accent);
    font-size: 13px;
}

.news-page-intro h1 {
    margin: 10px 0 4px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.15;
}

.news-page-intro p {
    max-width: 660px;
    color: #91a0a5;
    font-size: 18px;
}

.news-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    min-width: min(100%, 390px);
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 13px;
    background: #081216;
}

.news-overview > div {
    padding: 16px 18px;
    text-align: center;
}

.news-overview > div + div {
    border-right: 1px solid #1b3035;
}

.news-overview strong,
.news-overview span {
    display: block;
}

.news-overview strong {
    color: var(--site-accent);
    font-size: 20px;
}


.news-overview span {
    color: #88979b;
    font-size: 12px;
}

.news-featured-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);

    min-height: 430px;
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid #20363d;
    border-radius: 18px;
    background: linear-gradient(135deg, #08181b 0%, #071014 65%);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);
}

.news-featured-hero[hidden] {
    display: none;
}

.news-featured-media {
    position: relative;
    min-height: 430px;
    overflow: hidden;
}

.news-featured-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 16, 20, 0.12), transparent 45%);
    pointer-events: none;
}

.news-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-featured-media:hover img {
    transform: scale(1.025);
}

.news-featured-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: clamp(30px, 4vw, 54px);
}

.news-featured-eyebrow,
.news-story-labels,
.news-article-labels {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.news-category-label,
.news-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.news-category-label {
    border: 1px solid rgba(66, 255, 136, 0.32);
    background: rgba(66, 255, 136, 0.08);
    color: var(--site-accent);
}

.news-status-badge {
    border: 1px solid #30434a;
    background: #111f24;
    color: #dbe4e6;
}

.news-status-new {
    border-color: rgba(66, 255, 136, 0.5);
    background: #0c5131;
    color: #caffdc;
}

.news-status-breaking {
    border-color: rgba(255, 94, 94, 0.48);
    background: #501b1b;
    color: #ffc3c3;
}

.news-status-coverage {
    border-color: rgba(72, 180, 255, 0.44);
    background: #12384e;
    color: #bde7ff;
}

.news-featured-content h2 {
    margin: 17px 0 12px;
    font-size: clamp(31px, 3.3vw, 50px);
    line-height: 1.25;
}

.news-featured-content h2 a,
.news-story-card h3 a {
    color: #f3f7f7;
    text-decoration: none;
}

.news-featured-content h2 a:hover,
.news-story-card h3 a:hover {
    color: var(--site-accent);
}

.news-featured-content > p {
    margin-bottom: 22px;
    color: #b7c2c5;
    font-size: 17px;
}

.news-story-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: #8c9a9e;
    font-size: 13px;
}

.news-story-meta span + span::before {
    content: "•";
    margin-left: 9px;
    color: #3a535b;
}

.news-story-meta.is-compact {
    margin-top: 10px;
    font-size: 12px;
}

.news-featured-actions,
.news-story-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.news-primary-link,
.news-secondary-link,
.news-story-actions a,
.news-load-more,
.news-empty-state button,
.news-empty-state a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid rgba(66, 255, 136, 0.44);
    border-radius: 8px;
    color: var(--site-accent);
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.news-primary-link {
    background: var(--site-accent);
    color: #04110a;
}

.news-primary-link:hover,
.news-story-actions a:first-child:hover,
.news-load-more:hover,
.news-empty-state button:hover {
    background: #58ff95;
    color: #04110a;
    transform: translateY(-1px);
}

.news-secondary-link,
.news-story-actions a:last-child {
    border-color: #284048;
    color: #c4ced0;
}

.news-controls {
    position: sticky;
    top: 112px;
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(270px, 0.7fr) minmax(0, 1.3fr);
    gap: 18px 28px;
    align-items: end;
    margin-bottom: 38px;
    padding: 18px;
    border: 1px solid rgba(31, 55, 63, 0.94);
    border-radius: 14px;
    background: rgba(7, 16, 20, 0.95);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(16px);
}

.news-search-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid #2b444d;
    border-radius: 10px;
    background: #0a171c;
}

.news-search-field:focus-within {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px rgba(66, 255, 136, 0.1);
}

.news-search-icon {
    display: grid;
    width: 48px;
    place-items: center;
    color: #6f858c;
}

.news-search-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.news-search-field input {
    width: 100%;
    min-width: 0;
    padding: 12px 0 12px 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f2f5f5;
    font: inherit;
}

.news-search-field input::placeholder {
    color: #6f7f84;
}

.news-search-field button {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #8c9a9e;
    cursor: pointer;
}

.news-category-filter > span {
    display: block;
    margin-bottom: 7px;
    color: #8f9da1;
    font-size: 12px;
}

.news-category-buttons {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-category-buttons::-webkit-scrollbar {
    display: none;
}

.news-category-buttons button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid #294149;
    border-radius: 999px;
    background: #0b181d;
    color: #c2ccce;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.news-category-buttons button:hover,
.news-category-buttons button:focus-visible,
.news-category-buttons button.is-active {
    border-color: var(--site-accent);
    background: rgba(66, 255, 136, 0.1);
    color: var(--site-accent);
    outline: none;
}

.news-active-filters {
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.news-active-filters[hidden] {
    display: none;
}

.news-active-filters button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(66, 255, 136, 0.34);
    border-radius: 7px;
    background: rgba(66, 255, 136, 0.08);
    color: #caffdc;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.news-active-filters b {
    color: var(--site-accent);
    font-size: 17px;
    line-height: 1;
}

.news-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: start;
}

.news-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.news-section-heading > div > span,
.news-sidebar-heading span {
    color: var(--site-accent);
    font-size: 12px;
    font-weight: 700;
}

.news-section-heading h2,
.news-sidebar-heading h2 {
    font-size: 28px;
}

.news-section-heading > p {
    color: #8f9da1;
    font-size: 13px;
}

.news-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.news-story-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #1b3035;
    border-radius: 13px;
    background: #081216;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.14);
    animation: newsReveal 0.42s ease both;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.news-story-card:hover {
    border-color: rgba(66, 255, 136, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 23px 48px rgba(0, 0, 0, 0.25);
}

.news-story-card.is-lead {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(270px, 0.95fr) minmax(0, 1.05fr);
}

.news-story-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b171b;
}

.news-story-card.is-lead .news-story-image {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
}

.news-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.news-story-card:hover .news-story-image img {
    transform: scale(1.035);
}

.news-story-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.news-story-card h3 {
    margin: 13px 0 8px;
    font-size: 22px;
    line-height: 1.4;
}

.news-story-card.is-lead h3 {
    font-size: clamp(25px, 2.7vw, 34px);
}

.news-story-content > p {
    display: -webkit-box;
    overflow: hidden;
    color: #9baaad;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-story-actions {
    margin-top: auto;
    padding-top: 20px;
}

.news-story-actions a {
    min-height: 36px;
    padding: 5px 11px;
    font-size: 12px;
}

.news-load-more {
    width: min(100%, 260px);
    margin: 26px auto 0;
    background: #0c1b20;
    font: inherit;
    cursor: pointer;
}

.news-load-more[hidden] {
    display: none;
}

.news-empty-state {
    padding: 64px 24px;
    border: 1px dashed #2a434b;
    border-radius: 14px;
    background: #081216;
    text-align: center;
}

.news-empty-state[hidden] {
    display: none;
}

.news-empty-state > span {
    display: block;
    color: var(--site-accent);
    font-size: 50px;
}

.news-empty-state h2 {
    margin: 7px 0;
}

.news-empty-state p {
    margin-bottom: 20px;
    color: #8f9da1;
}

.news-empty-state button {
    margin-left: 7px;
    background: var(--site-accent);
    color: #04110a;
    font: inherit;
    cursor: pointer;
}

.news-sidebar {
    display: grid;
    gap: 20px;
}

.news-sidebar-panel {
    padding: 22px;
    border: 1px solid #1b3035;
    border-radius: 13px;
    background: #081216;
}

.news-sidebar-heading {
    margin-bottom: 15px;
}

.news-sidebar-heading h2 {
    font-size: 20px;
}

.news-popular-list {
    list-style: none;
}

.news-popular-item,
.news-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    color: #f1f5f5;
    text-decoration: none;
}

.news-popular-list li + li .news-popular-item,
.news-timeline-item + .news-timeline-item {
    border-top: 1px solid #172a30;
}

.news-sidebar-order {
    min-width: 34px;
    color: var(--site-accent);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    direction: ltr;
}

.news-sidebar-item-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.news-sidebar-item-content strong {
    font-size: 14px;
    line-height: 1.45;
}

.news-sidebar-item-content small {
    margin-top: 5px;
    color: #7f8e92;
    font-size: 11px;
}

.news-popular-item:hover strong,
.news-timeline-item:hover strong {
    color: var(--site-accent);
}

.news-timeline-item {
    position: relative;
    padding-right: 20px;
}

.news-timeline-item::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 0;
    width: 7px;
    height: 7px;
    border: 2px solid var(--site-accent);
    border-radius: 50%;
    background: #081216;
}

.news-timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 31px;
    right: 4px;
    bottom: -13px;
    width: 1px;
    background: #244048;
}

@keyframes newsReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* NEWS ARTICLE */

.news-article-page {
    width: min(1220px, 100%);
    padding-top: 34px;
}

.news-article-back {
    display: inline-flex;
    margin-bottom: 28px;
    color: #9aabad;
    text-decoration: none;
}

.news-article-back:hover {
    color: var(--site-accent);
}

.news-article {
    min-height: 360px;
}

.news-article-header {
    max-width: 930px;
    margin: 0 auto 32px;
    text-align: center;
}

.news-article-labels {
    justify-content: center;
    margin-bottom: 16px;
}

.news-article-header h1 {
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.25;
}

.news-article-header > p {
    max-width: 800px;
    margin: 18px auto 0;
    color: #abb8bb;
    font-size: clamp(17px, 2.1vw, 21px);
}

.news-article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    margin-top: 22px;
    color: #7f9094;
    font-size: 13px;
}

.news-article-meta-item + .news-article-meta-item::before {
    content: "•";
    margin-left: 18px;
    color: #375058;
}

.news-article-hero {
    margin-bottom: 42px;
}

.news-article-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8.2;
    object-fit: cover;
    border: 1px solid #20363d;
    border-radius: 17px;
    background: #081216;
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.28);
}

.news-article-hero figcaption {
    margin-top: 8px;
    color: #708186;
    font-size: 12px;
}

.news-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 54px;
    align-items: start;
    max-width: 1030px;
    margin: 0 auto;
}

.news-article-body {
    font-size: 19px;
    line-height: 2;
}

.news-article-body p {
    margin-bottom: 24px;
}

.news-article-body p:first-child::first-letter {
    color: var(--site-accent);
    font-size: 35px;
    font-weight: 800;
    line-height: 1;
}

.news-article-side {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 122px;
}

.news-article-side section {
    padding: 20px;
    border: 1px solid #1b3035;
    border-radius: 12px;
    background: #081216;
}

.news-article-side h2 {
    margin-bottom: 6px;
    color: #f2f5f5;
    font-size: 15px;
}

.news-article-side p {
    margin-bottom: 13px;
    color: #8e9da1;
    font-size: 13px;
}

.news-article-side a,
.news-article-side button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(66, 255, 136, 0.4);
    border-radius: 7px;
    background: rgba(66, 255, 136, 0.07);
    color: var(--site-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.news-related-section {
    margin-top: 86px;
    padding-top: 36px;
    border-top: 1px solid #1b3035;
}

.news-related-section[hidden] {
    display: none;
}

.news-related-section .news-section-heading a {
    color: var(--site-accent);
    text-decoration: none;
}

.news-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-related-card {
    overflow: hidden;
    border: 1px solid #1b3035;
    border-radius: 12px;
    background: #081216;
    color: #f2f5f5;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s;
}

.news-related-card:hover {
    border-color: var(--site-accent);
    transform: translateY(-3px);
}

.news-related-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-related-card > span {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    padding: 15px;
}

.news-related-card small {
    margin-bottom: 7px;
    color: var(--site-accent);
    font-size: 11px;
}

.news-related-card strong {
    line-height: 1.5;
}

.news-article-not-found {
    display: grid;
    min-height: 420px;
    place-content: center;
    text-align: center;
}

.news-article-not-found h1 {
    font-size: 44px;
}

.news-article-not-found p {
    margin: 8px 0 20px;
    color: #8f9da1;
}

.news-article-not-found a {
    color: var(--site-accent);
}


@keyframes newsReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.light-mode .news-overview,
body.light-mode .news-featured-hero,
body.light-mode .news-controls,
body.light-mode .news-story-card,
body.light-mode .news-sidebar-panel,
body.light-mode .news-empty-state,
body.light-mode .news-article-side section,
body.light-mode .news-related-card {
    border-color: #d4e0e2;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(30, 58, 64, 0.08);
}

body.light-mode .news-page-intro p,
body.light-mode .news-featured-content > p,
body.light-mode .news-story-content > p,
body.light-mode .news-article-header > p,
body.light-mode .news-article-side p {
    color: #55676c;
}

body.light-mode .news-featured-content h2 a,
body.light-mode .news-story-card h3 a,
body.light-mode .news-related-card,
body.light-mode .news-article-side h2 {
    color: #10191c;
}

body.light-mode .news-search-field {
    border-color: #c9d8dc;
    background: #f4f8f8;
}

body.light-mode .news-search-field input {
    color: #10191c;
}

body.light-mode .news-category-buttons button {
    border-color: #cbdadd;
    background: #f5f8f9;
    color: #405258;
}

body.light-mode .news-popular-list li + li .news-popular-item,
body.light-mode .news-timeline-item + .news-timeline-item,
body.light-mode .news-related-section {
    border-color: #dce5e7;
}

body.light-mode .news-primary-link,
body.light-mode .news-empty-state button {
    color: #06130b;
}

@media (max-width: 1120px) {
    .news-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 22px;
    }

    .news-overview {
        width: 100%;
        max-width: 520px;
    }

    .news-featured-hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    }

    .news-content-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .news-page {
        padding-top: 30px;
    }

    .news-featured-hero {
        grid-template-columns: 1fr;
    }

    .news-featured-media {
        min-height: 0;
        aspect-ratio: 16 / 8.7;
    }

    .news-featured-content {
        padding: 28px;
    }

    .news-controls {
        position: static;
        grid-template-columns: 1fr;
    }

    .news-active-filters {
        grid-column: auto;
    }

    .news-story-card.is-lead {
        display: flex;
    }

    .news-story-card.is-lead .news-story-image {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .news-article-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .news-article-side {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .news-page-header {
        margin-bottom: 24px;
    }

    .news-page-intro h1 {
        font-size: 38px;
    }

    .news-page-intro p {
        font-size: 15px;
    }

    .news-overview {
        min-width: 0;
    }

    .news-overview > div {
        padding: 12px 7px;
    }

    .news-overview strong {
        font-size: 16px;
    }

    .news-featured-hero {
        min-height: 0;
        border-radius: 13px;
    }

    .news-featured-media {
        aspect-ratio: 16 / 9;
    }

    .news-featured-content {
        padding: 22px;
    }

    .news-featured-content h2 {
        margin-top: 13px;
        font-size: 28px;
    }

    .news-featured-content > p {
        font-size: 15px;
    }

    .news-controls {
        top: auto;
        padding: 13px;
    }

    .news-feed-grid,
    .news-sidebar,
    .news-related-grid,
    .news-article-side {
        grid-template-columns: 1fr;
    }

    .news-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .news-story-card h3 {
        font-size: 20px;
    }

    .news-story-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .news-story-actions a {
        width: 100%;
    }

    .news-empty-state button,
    .news-empty-state a {
        width: 100%;
        margin: 6px 0 0;
    }

    .news-article-page {
        padding-top: 24px;
    }

    .news-article-header {
        text-align: right;
    }

    .news-article-labels,
    .news-article-meta {
        justify-content: flex-start;
    }

    .news-article-header h1 {
        font-size: 36px;
    }

    .news-article-header > p,
    .news-article-body {
        font-size: 16px;
    }

    .news-article-hero {
        margin-bottom: 30px;
    }

    .news-article-hero img {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .news-related-section {
        margin-top: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-story-card {
        animation: none;
        transition: border-color 0.2s;
    }

    .news-story-card:hover,
    .news-related-card:hover {
        transform: none;
    }

    .news-featured-media img,
    .news-story-image img {
        transition: none;
    }
}

.news-maintenance-banner {
    width: min(100%, 620px);
    margin: 0 auto 34px;
    padding: 15px 24px;
    border: 1px solid #ff6b73;
    border-radius: 10px;
    background: #b4232d;
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(180, 35, 45, 0.28);
    font-size: clamp(18px, 2.3vw, 24px);
    font-weight: 800;
    text-align: center;
}

body.light-mode .news-maintenance-banner {
    border-color: #a71922;
    background: #c92b35;
    color: #ffffff;
}

@media (max-width: 650px) {
    .news-maintenance-banner {
        margin-bottom: 24px;
        padding: 12px 16px;
        font-size: 18px;
    }
}
/* Calendar platform selector arrow alignment */
.calendar-platform-field select {
    appearance: none;
    padding-left: 46px;
    background-color: #0d1a1e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b8c2c4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 21px center;
    background-size: 12px 8px;
}

body.light-mode .calendar-platform-field select {
    background-color: #f4f7f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667477' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Game-page release platform row */
.detail-release-row {
    display: block;
}

.detail-release-text {
    width: 100%;
}

.detail-release-platforms {
    width: 100%;
    margin-top: 10px;
    justify-content: flex-start;
    direction: rtl;
}

.detail-page .detail-meta-item:first-child {
    grid-column: auto;
}

/* Mint-gray light mode redesign */
body.light-mode {
    --light-canvas: #edf4f1;
    --light-section: #e6efeb;
    --light-surface: #ffffff;
    --light-surface-soft: #f5faf7;
    --light-border: #bfd2c9;
    --light-border-strong: #9fbeb0;
    --light-text: #0b1c21;
    --light-muted: #506965;
    --light-green: #087a46;
    --light-green-strong: #05683b;
    --light-mint: #dcefe6;
    --light-shadow: 0 14px 34px rgba(14, 55, 42, 0.10);
    background: var(--light-canvas);
    color: var(--light-text);
}

body.light-mode .navbar {
    border-color: var(--light-border);
    background: radial-gradient(circle at 12% 0%, rgba(40, 190, 116, 0.10), transparent 31%), rgba(250, 255, 252, 0.97);
    box-shadow: 0 8px 26px rgba(14, 55, 42, 0.08);
}

body.light-mode .navbar nav a,
body.light-mode .section-header h2,
body.light-mode .game-info h3,
body.light-mode .game-info h3 a,
body.light-mode .catalog-intro h1,
body.light-mode .catalog-card h2,
body.light-mode .catalog-card h3,
body.light-mode .page-intro h1,
body.light-mode .content-section-heading,
body.light-mode .detail-page h1,
body.light-mode .detail-page h2,
body.light-mode .detail-page h3,
body.light-mode .news-page-intro h1,
body.light-mode .news-section-heading h2,
body.light-mode .news-sidebar-heading h2,
body.light-mode .news-story-card h3,
body.light-mode .news-sidebar-item-content strong,
body.light-mode .news-article-header h1,
body.light-mode .news-article-side h2,
body.light-mode .news-related-card strong {
    color: var(--light-text);
}

body.light-mode .section-header p,
body.light-mode .catalog-intro p,
body.light-mode .catalog-summary,
body.light-mode .page-intro p,
body.light-mode .game-description,
body.light-mode .detail-info-message,
body.light-mode .news-page-intro p,
body.light-mode .news-section-heading > p,
body.light-mode .news-story-content > p,
body.light-mode .news-sidebar-item-content small,
body.light-mode .news-article-header > p,
body.light-mode .news-article-meta,
body.light-mode .news-article-side p {
    color: var(--light-muted);
}

body.light-mode .search-interface,
body.light-mode .search-box,
body.light-mode .language-toggle {
    border-color: var(--light-border);
    background: var(--light-surface-soft);
    box-shadow: 0 7px 20px rgba(14, 55, 42, 0.07);
}

body.light-mode .search-results,
body.light-mode .catalog-dropdown-menu {
    border-color: var(--light-border-strong);
    background: var(--light-surface);
    box-shadow: var(--light-shadow);
}

body.light-mode .search-result-link,
body.light-mode .catalog-dropdown-option {
    border-color: #d5e2dc;
    background: var(--light-surface-soft);
    color: var(--light-text);
}

body.light-mode .search-result-link:hover,
body.light-mode .search-result-link:focus-visible,
body.light-mode .catalog-dropdown-option:hover,
body.light-mode .catalog-dropdown-option:focus-visible,
body.light-mode .catalog-dropdown-option.is-selected {
    border-color: var(--light-green);
    background: var(--light-mint);
    color: var(--light-green-strong);
}

body.light-mode .platform-games-section:nth-of-type(even) {
    box-shadow: inset 0 1px rgba(159, 190, 176, 0.52), inset 0 -1px rgba(159, 190, 176, 0.52);
    background: linear-gradient(180deg, rgba(220, 239, 230, 0.46), rgba(230, 239, 235, 0.72));
}

body.light-mode .game-card,
body.light-mode .games-grid .game-card,
body.light-mode .catalog-grid .game-card,
body.light-mode .similar-game-card {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: 0 10px 26px rgba(14, 55, 42, 0.09);
}

body.light-mode .games-grid .game-card:hover,
body.light-mode .games-grid .game-card:focus-within,
body.light-mode .catalog-grid .game-card:hover,
body.light-mode .catalog-grid .game-card:focus-within,
body.light-mode .similar-game-card:hover,
body.light-mode .similar-game-card:focus-within {
    border-color: var(--light-green);
    box-shadow: 0 16px 30px rgba(8, 122, 70, 0.16);
}

body.light-mode .games-empty,
body.light-mode .catalog-empty {
    border-color: var(--light-border-strong);
    background: var(--light-surface-soft);
    color: var(--light-muted);
}

body.light-mode .game-info p,
body.light-mode .catalog-card-meta,
body.light-mode .calendar-current-hijri-month,
body.light-mode .calendar-upcoming-date,
body.light-mode .news-section-heading > div > span,
body.light-mode .news-sidebar-heading span {
    color: var(--light-green);
}

body.light-mode .tags span,
body.light-mode .platform-icon,
body.light-mode .search-result-tags span,
body.light-mode .catalog-filter-chip,
body.light-mode .news-active-filters button {
    border-color: #97c9af;
    background: var(--light-mint);
    color: var(--light-green-strong);
}

body.light-mode .games-arrow,
body.light-mode .back-to-top {
    border-color: var(--light-border-strong);
    background: rgba(255, 255, 255, 0.94);
    color: var(--light-text);
    box-shadow: 0 8px 20px rgba(14, 55, 42, 0.10);
}

body.light-mode .games-arrow:hover,
body.light-mode .games-arrow:focus-visible,
body.light-mode .back-to-top:hover,
body.light-mode .back-to-top:focus-visible {
    border-color: var(--light-green);
    background: var(--light-green);
    color: #ffffff;
}

body.light-mode .section-header > a,
body.light-mode .games-grid .game-card-details-link,
body.light-mode .catalog-details-link,
body.light-mode .primary-button,
body.light-mode .news-primary-link,
body.light-mode .news-story-actions a,
body.light-mode .news-article-side a,
body.light-mode .news-article-side button,
body.light-mode .news-load-more {
    border-color: #8dbfa6;
    background: var(--light-mint);
    color: var(--light-green-strong);
    box-shadow: 0 5px 14px rgba(14, 55, 42, 0.07);
}

body.light-mode .section-header > a:hover,
body.light-mode .section-header > a:focus-visible,
body.light-mode .games-grid .game-card-details-link:hover,
body.light-mode .games-grid .game-card-details-link:focus-visible,
body.light-mode .catalog-details-link:hover,
body.light-mode .catalog-details-link:focus-visible,
body.light-mode .primary-button:hover,
body.light-mode .primary-button:focus-visible,
body.light-mode .news-primary-link:hover,
body.light-mode .news-primary-link:focus-visible,
body.light-mode .news-story-actions a:hover,
body.light-mode .news-story-actions a:focus-visible,
body.light-mode .news-article-side a:hover,
body.light-mode .news-article-side a:focus-visible,
body.light-mode .news-article-side button:hover,
body.light-mode .news-article-side button:focus-visible,
body.light-mode .news-load-more:hover,
body.light-mode .news-load-more:focus-visible {
    border-color: var(--light-green-strong);
    background: var(--light-green);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 122, 70, 0.20);
}

body.light-mode .catalog-toolbar,
body.light-mode .release-filters,
body.light-mode .release-toolbar,
body.light-mode .news-controls {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: var(--light-shadow);
}

body.light-mode .catalog-field input,
body.light-mode .catalog-field select,
body.light-mode .catalog-dropdown-toggle,
body.light-mode .news-search-field,
body.light-mode .news-search-field input,
body.light-mode .news-category-buttons button {
    border-color: var(--light-border);
    background: var(--light-surface-soft);
    color: var(--light-text);
}

body.light-mode .catalog-field input:focus,
body.light-mode .catalog-field select:focus,
body.light-mode .catalog-dropdown-toggle:focus-visible,
body.light-mode .catalog-dropdown-toggle[aria-expanded="true"],
body.light-mode .news-search-field:focus-within,
body.light-mode .news-category-buttons button:hover,
body.light-mode .news-category-buttons button:focus-visible,
body.light-mode .news-category-buttons button.is-active {
    border-color: var(--light-green);
    background: var(--light-mint);
    color: var(--light-green-strong);
    box-shadow: 0 0 0 3px rgba(8, 122, 70, 0.10);
}

body.light-mode .catalog-active-filters-label,
body.light-mode .catalog-status {
    color: var(--light-muted);
}

body.light-mode .release-entry,
body.light-mode .next-release-card,
body.light-mode .detail-media-main,
body.light-mode .detail-media-thumbnail,
body.light-mode .detail-meta-item,
body.light-mode .requirements-column,
body.light-mode .detail-trailer,
body.light-mode .detail-info-message {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: 0 10px 26px rgba(14, 55, 42, 0.08);
}

body.light-mode .detail-media-thumbnail:hover,
body.light-mode .detail-media-thumbnail:focus-visible,
body.light-mode .detail-media-thumbnail.active {
    border-color: var(--light-green);
    box-shadow: 0 0 0 2px rgba(8, 122, 70, 0.13);
}

body.light-mode .detail-meta-item > span,
body.light-mode .requirements-column h3 {
    color: var(--light-muted);
}

body.light-mode .detail-meta-item strong,
body.light-mode .requirements-column p,
body.light-mode .requirements-column li,
body.light-mode .similar-game-content strong {
    color: var(--light-text);
}

body.light-mode .release-schedule {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: var(--light-shadow);
}

body.light-mode .release-calendar-shell,
body.light-mode .release-calendar-sidebar > section {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: var(--light-shadow);
}

body.light-mode .calendar-toolbar {
    border-color: var(--light-border);
    background: radial-gradient(circle at 88% -70%, rgba(8, 122, 70, 0.14), transparent 43%), var(--light-surface-soft);
}

body.light-mode .calendar-filter-bar,
body.light-mode .calendar-sidebar-heading {
    border-color: var(--light-border);
    background: var(--light-surface);
}

body.light-mode .calendar-current-month > span,
body.light-mode .calendar-month-picker > span,
body.light-mode .calendar-search-field > span,
body.light-mode .calendar-platform-field > span,
body.light-mode .calendar-sidebar-heading span {
    color: var(--light-muted);
}

body.light-mode .calendar-nav-button,
body.light-mode .calendar-quick-actions button,
body.light-mode .calendar-clear-button,
body.light-mode .calendar-month-picker-toggle,
body.light-mode .calendar-search-field input,
body.light-mode .calendar-platform-field select {
    border-color: var(--light-border-strong);
    background-color: var(--light-surface-soft);
    color: var(--light-text);
}

body.light-mode .calendar-platform-field select {
    background-repeat: no-repeat !important;
    background-position: left 21px center !important;
    background-size: 12px 8px !important;
}

body.light-mode .calendar-nav-button:hover,
body.light-mode .calendar-nav-button:focus-visible,
body.light-mode .calendar-quick-actions button:hover,
body.light-mode .calendar-quick-actions button:focus-visible,
body.light-mode .calendar-clear-button:hover,
body.light-mode .calendar-clear-button:focus-visible {
    border-color: var(--light-green);
    background: var(--light-green);
    color: #ffffff;
}

body.light-mode .calendar-month-popover {
    border-color: var(--light-border-strong);
    background: var(--light-surface);
    box-shadow: 0 20px 46px rgba(14, 55, 42, 0.18);
}

body.light-mode .calendar-month-picker-header {
    border-color: var(--light-border);
}

body.light-mode .calendar-picker-months button:hover,
body.light-mode .calendar-picker-months button:focus-visible {
    border-color: var(--light-green);
    background: var(--light-mint);
    color: var(--light-green-strong);
}

body.light-mode .calendar-picker-months button.selected {
    border-color: var(--light-green-strong);
    background: var(--light-green);
    color: #ffffff;
}

body.light-mode .release-calendar-panel,
body.light-mode .calendar-weekdays,
body.light-mode .release-calendar-grid,
body.light-mode .calendar-upcoming-list,
body.light-mode .calendar-estimated-list {
    border-color: var(--light-border);
    background: var(--light-border);
}

body.light-mode .calendar-weekdays span {
    background: #e0ebe6;
    color: #29463f;
}

body.light-mode .calendar-day,
body.light-mode .calendar-upcoming-item,
body.light-mode .calendar-estimated-item,
body.light-mode .calendar-empty-state {
    background: var(--light-surface);
}

body.light-mode .calendar-day.is-outside-month {
    background: #e5ece9;
}

body.light-mode .calendar-day.is-today {
    background: #d6eee2;
    box-shadow: inset 0 0 0 2px #15945b;
}

body.light-mode .calendar-day.has-releases:not(.is-today) {
    background: #f1f8f4;
}

body.light-mode .calendar-day-number,
body.light-mode .calendar-today-label,
body.light-mode .calendar-upcoming-content > a,
body.light-mode .calendar-estimated-item,
body.light-mode .calendar-sidebar-heading h2 {
    color: var(--light-text);
}

body.light-mode .calendar-day.is-today .calendar-day-number {
    background: var(--light-green);
    color: #ffffff;
}

body.light-mode .calendar-today-label,
body.light-mode .calendar-upcoming-date {
    color: var(--light-green-strong);
}

body.light-mode .calendar-hijri-day-number,
body.light-mode .calendar-upcoming-hijri-date,
body.light-mode .hijri-date-value {
    color: #47665d;
}

body.light-mode .calendar-game-event {
    border-color: #72b894;
    background: #cfe9dc;
    color: #06492b;
}

body.light-mode .calendar-game-event:hover,
body.light-mode .calendar-game-event:focus-visible {
    border-color: var(--light-green);
    background: #bde1ce;
    box-shadow: 0 7px 16px rgba(8, 122, 70, 0.14);
}

body.light-mode .calendar-day.has-releases.has-search-match {
    background: #d8eee3;
    box-shadow: inset 0 0 0 2px rgba(8, 122, 70, 0.7);
}

body.light-mode .calendar-game-event.is-search-match {
    border-color: var(--light-green-strong);
    background: #afe0c5;
    color: #043d25;
    box-shadow: 0 0 0 2px rgba(8, 122, 70, 0.16), 0 0 20px rgba(8, 122, 70, 0.16);
}

body.light-mode .calendar-day.is-past .calendar-game-event {
    border-color: #b7cfc4;
    background: #e2ede8;
    color: #415c54;
}

body.light-mode .news-overview,
body.light-mode .news-featured-hero,
body.light-mode .news-controls,
body.light-mode .news-story-card,
body.light-mode .news-sidebar-panel,
body.light-mode .news-empty-state,
body.light-mode .news-article-side section,
body.light-mode .news-related-card {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: var(--light-shadow);
}

body.light-mode .news-story-card:hover,
body.light-mode .news-related-card:hover {
    border-color: var(--light-green);
    box-shadow: 0 19px 38px rgba(8, 122, 70, 0.15);
}

body.light-mode .news-popular-item,
body.light-mode .news-timeline-item,
body.light-mode .news-sidebar-item-content strong {
    color: var(--light-text);
}

body.light-mode .news-popular-list li + li .news-popular-item,
body.light-mode .news-timeline-item + .news-timeline-item,
body.light-mode .news-related-section {
    border-color: #d2e0da;
}

body.light-mode .news-timeline-item::before {
    border-color: var(--light-green);
    background: var(--light-surface);
}

body.light-mode .news-timeline-item:not(:last-child)::after {
    background: var(--light-border-strong);
}

body.light-mode .news-sidebar-order,
body.light-mode .news-active-filters b,
body.light-mode .news-related-card small,
body.light-mode .news-article-body p:first-child::first-letter {
    color: var(--light-green);
}

body.light-mode .news-article-hero img {
    border-color: var(--light-border);
    background: var(--light-surface);
    box-shadow: 0 22px 52px rgba(14, 55, 42, 0.14);
}

body.light-mode .news-empty-state {
    color: var(--light-text);
}

body.light-mode .site-footer {
    border-color: #1a3c36;
    background: #0a1b20;
    color: #d9e7e2;
    box-shadow: inset 0 1px 0 rgba(66, 255, 136, 0.07);
}

body.light-mode .footer-brand p,
body.light-mode .footer-links a,
body.light-mode .footer-copyright {
    color: #a9bdb7;
}

body.light-mode .footer-brand h2,
body.light-mode .footer-links h3 {
    color: #f4f8f6;
}

body.light-mode .footer-links a:hover,
body.light-mode .footer-links a:focus-visible {
    color: var(--site-accent);
}

body.light-mode .footer-copyright {
    border-color: #19363a;
}

/* Theme refinement: carousel sequence and contrast */
body.light-mode {
    --light-canvas: #e7efeb;
    --light-section: #d9e5df;
    --light-surface-soft: #f0f6f3;
    background: var(--light-canvas);
}

body.light-mode main > .games-section:nth-of-type(even) {
    background: var(--light-canvas);
    box-shadow: none;
}

body.light-mode main > .games-section:nth-of-type(odd) {
    background: linear-gradient(180deg, #dbe7e1, #d6e3dd);
    box-shadow: inset 0 1px rgba(118, 154, 138, 0.42), inset 0 -1px rgba(118, 154, 138, 0.42);
}

body:not(.light-mode) main > .games-section:nth-of-type(even) {
    background: #050b0e;
    box-shadow: none;
}

body:not(.light-mode) main > .games-section:nth-of-type(odd) {
    background: #081419;
    box-shadow: inset 0 1px rgba(41, 65, 73, 0.58), inset 0 -1px rgba(41, 65, 73, 0.58);
}

body.light-mode .detail-release-text .release {
    color: #087343;
}

body.light-mode .detail-release-text .detail-countdown {
    color: #245f4d;
}

body.light-mode .navbar {
    border-bottom-color: #b8cec5;
    background: #f8fbfa;
    box-shadow: 0 7px 22px rgba(22, 63, 50, 0.09);
}

body.light-mode .navbar .search-interface,
body.light-mode .navbar .search-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.light-mode .navbar .search-box {
    border-color: #afc6bc;
    background: #e7f0ec;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 5px 14px rgba(22, 63, 50, 0.07);
}

body.light-mode .navbar .search-box:focus-within {
    border-color: #168957;
    background: #eef6f2;
    box-shadow: 0 0 0 3px rgba(8, 122, 70, 0.11);
}

body.light-mode .navbar .search-field-icon,
body.light-mode .navbar .search-box input,
body.light-mode .navbar .search-box button {
    background: transparent;
}

body.light-mode .catalog-status.upcoming,
body.light-mode .catalog-status:not(.released):not(.unknown) {
    background: #0a7042;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(8, 112, 66, 0.16);
}

body.light-mode .catalog-grid .catalog-details-link {
    border-color: #087343;
    background: linear-gradient(135deg, #0b7d49, #08663d);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(8, 102, 61, 0.18);
}

body.light-mode .catalog-grid .catalog-details-link:hover,
body.light-mode .catalog-grid .catalog-details-link:focus-visible {
    border-color: #055d36;
    background: #055d36;
    color: #ffffff;
    box-shadow: 0 9px 19px rgba(5, 93, 54, 0.24);
}

body.light-mode .site-footer {
    border-color: #9fb9ae;
    background: #c1d3cb;
    color: #17322c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

body.light-mode .footer-brand p,
body.light-mode .footer-links a,
body.light-mode .footer-copyright {
    color: #38564e;
}

body.light-mode .footer-brand h2,
body.light-mode .footer-links h3 {
    color: #102b25;
}

body.light-mode .footer-links a:hover,
body.light-mode .footer-links a:focus-visible {
    color: #05683b;
}

body.light-mode .footer-copyright {
    border-color: #9fb9ae;
}

/* Theme refinement: release alignment and card surfaces */
.catalog-release-row {
    display: grid;
    align-items: initial;
    gap: 6px;
}

.catalog-release-icons {
    width: 100%;
    justify-content: flex-start;
    direction: rtl;
}

body.light-mode .release .hijri-date-value {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: inherit;
    text-align: right;
}

body.light-mode .detail-release-text .release,
body.light-mode .detail-release-text .detail-countdown {
    color: #087343;
}

body.light-mode .navbar {
    border-bottom-color: #9fb9ae;
    background: #c1d3cb;
}

body.light-mode .navbar .header-icon-button:hover,
body.light-mode .navbar .header-icon-button:focus-visible,
body.light-mode .language-toggle:hover {
    background: rgba(255, 255, 255, 0.34);
}

body.light-mode main > .games-section .games-grid .game-card,
body.light-mode .news-overview,
body.light-mode .news-featured-hero,
body.light-mode .news-controls,
body.light-mode .news-story-card,
body.light-mode .news-sidebar-panel,
body.light-mode .news-empty-state,
body.light-mode .news-article-side section,
body.light-mode .news-related-card {
    background: #f1f5f3;
}

body.light-mode .release-calendar-shell,
body.light-mode .release-calendar-sidebar > section {
    background: #edf3f0;
}

body.light-mode .calendar-toolbar,
body.light-mode .calendar-filter-bar,
body.light-mode .calendar-sidebar-heading {
    background-color: #e8f0ec;
}

body.light-mode .calendar-day,
body.light-mode .calendar-upcoming-item,
body.light-mode .calendar-estimated-item,
body.light-mode .calendar-empty-state {
    background: #f1f5f3;
}

body.light-mode .calendar-day.is-outside-month {
    background: #dce6e1;
}

body.light-mode .calendar-day.is-today {
    background: #cfe8dc;
}

body.light-mode .calendar-day.has-releases:not(.is-today) {
    background: #eaf2ee;
}

body.light-mode .catalog-grid .catalog-details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid #8dbfa6;
    border-radius: 7px;
    background: var(--light-mint);
    color: var(--light-green-strong);
    box-shadow: 0 5px 14px rgba(14, 55, 42, 0.07);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

body.light-mode .catalog-grid .catalog-details-link:hover,
body.light-mode .catalog-grid .catalog-details-link:focus-visible {
    border-color: var(--light-green-strong);
    background: var(--light-green);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 122, 70, 0.20);
}

@media (max-width: 800px) {
    body.light-mode .navbar nav {
        border-color: #9fb9ae;
        background: #c1d3cb;
    }
}

/* Sitewide date alignment and softer light surfaces */
.release-date-label {
    display: inline-block;
    margin-inline-end: 0.25em;
}

.release-date-values {
    display: contents;
}

.release-date-values .release-date-value {
    display: inline;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
}

.release-date-values .hijri-date-value {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
    text-align: right;
}

.calendar-upcoming-hijri-date {
    font-size: 1em;
    line-height: inherit;
    text-align: right;
}

.calendar-hijri-day-number {
    font-size: 16px;
}

body.light-mode {
    --light-surface: #f1f5f3;
}

body.light-mode .game-card,
body.light-mode .catalog-grid .game-card,
body.light-mode .catalog-toolbar,
body.light-mode .catalog-dropdown-menu,
body.light-mode .search-results,
body.light-mode .game-meta div,
body.light-mode .next-release-card,
body.light-mode .release-schedule,
body.light-mode .release-entry,
body.light-mode .featured-news,
body.light-mode .news-card,
body.light-mode .detail-trailer,
body.light-mode .detail-media-main,
body.light-mode .detail-media-thumbnail,
body.light-mode .requirements-column,
body.light-mode .similar-game-card,
body.light-mode .calendar-month-popover,
body.light-mode .release-calendar-panel,
body.light-mode .news-overview,
body.light-mode .news-featured-hero,
body.light-mode .news-controls,
body.light-mode .news-story-card,
body.light-mode .news-sidebar-panel,
body.light-mode .news-empty-state,
body.light-mode .news-article-side section,
body.light-mode .news-related-card {
    background-color: var(--light-surface);
}

body.light-mode .games-arrow,
body.light-mode .back-to-top {
    background: rgba(241, 245, 243, 0.96);
}

body.light-mode .platform-icon::after {
    background: var(--light-surface);
}

/* Light-mode design contract for new site components */
body.light-mode {
    --site-accent: var(--theme-accent);
    --theme-page-bg: #e7efeb;
    --theme-section-bg: #d9e5df;
    --theme-card-bg: #f1f5f3;
    --theme-panel-bg: #edf3f0;
    --theme-control-bg: #e8f0ec;
    --theme-frame-bg: #c1d3cb;
    --theme-border: #9fb9ae;
    --theme-border-soft: #bfd2c9;
    --theme-text: #0b1c21;
    --theme-text-muted: #506965;
    --theme-accent: #087a46;
    --theme-accent-strong: #05683b;
    --theme-accent-soft: #dcefe6;
    --theme-focus-ring: rgba(8, 122, 70, 0.14);
    --theme-shadow: 0 14px 34px rgba(14, 55, 42, 0.10);
    color-scheme: light;
}

body.light-mode :where(main article, main aside, main form, main dialog, main fieldset),
body.light-mode :where(.theme-card, [data-light-surface="card"]) {
    border-color: var(--theme-border-soft);
    background-color: var(--theme-card-bg);
    color: var(--theme-text);
}

body.light-mode :where(.theme-panel, [data-light-surface="panel"]) {
    border-color: var(--theme-border-soft);
    background-color: var(--theme-panel-bg);
    color: var(--theme-text);
}

body.light-mode :where(main input, main select, main textarea),
body.light-mode :where(.theme-control, [data-light-surface="control"]) {
    border-color: var(--theme-border);
    background-color: var(--theme-control-bg);
    color: var(--theme-text);
}

body.light-mode :where(main input, main select, main textarea):focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-focus-ring);
    outline: none;
}

body.light-mode :where(main button) {
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body.light-mode :where(.theme-action, [data-light-surface="action"]) {
    border-color: var(--theme-accent);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

body.light-mode :where(.theme-action, [data-light-surface="action"]):hover,
body.light-mode :where(.theme-action, [data-light-surface="action"]):focus-visible {
    background: var(--theme-accent);
    color: #ffffff;
}

body.light-mode :where(.theme-muted, [data-light-text="muted"]) {
    color: var(--theme-text-muted);
}
/* Light-mode navigation and catalog badge palette alignment */
body.light-mode .navbar nav a::after {
    background: var(--theme-accent);
}

body.light-mode .catalog-status.upcoming,
body.light-mode .catalog-status:not(.released):not(.unknown) {
    border: 1px solid #97c9af;
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
    box-shadow: none;
}
/* Light-mode hero arrow palette */
body.light-mode .hero-arrow {
    color: var(--theme-accent-strong);
}

body.light-mode .hero-arrow::before {
    border-color: var(--theme-border);
    background: rgba(220, 239, 230, 0.94);
    box-shadow: 0 6px 18px rgba(14, 55, 42, 0.16);
}

body.light-mode .hero-arrow:hover,
body.light-mode .hero-arrow:focus-visible {
    color: #ffffff;
}

body.light-mode .hero-arrow:hover::before,
body.light-mode .hero-arrow:focus-visible::before {
    border-color: var(--theme-accent-strong);
    background: var(--theme-accent);
}

/* Game-page light-mode palette coverage */
body.light-mode .detail-page {
    color: var(--theme-text);
}

body.light-mode .detail-page .game-details-content > p,
body.light-mode .detail-page .detail-summary,
body.light-mode .detail-page .game-description p {
    color: var(--theme-text);
}

body.light-mode .detail-page .release,
body.light-mode .detail-page .detail-countdown,
body.light-mode .detail-page .requirements-column h3,
body.light-mode .detail-page .similar-game-content p {
    color: var(--theme-accent-strong);
}

body.light-mode .detail-page .detail-meta-item,
body.light-mode .detail-page .requirements-column,
body.light-mode .detail-page .detail-info-message,
body.light-mode .detail-page .similar-game-card,
body.light-mode .detail-page .detail-media-main,
body.light-mode .detail-page .detail-media-thumbnail {
    border-color: var(--theme-border-soft);
    background-color: var(--theme-card-bg);
}

body.light-mode .detail-page .detail-meta-item > span {
    color: var(--theme-text-muted);
}

body.light-mode .detail-page .detail-meta-item strong,
body.light-mode .detail-page .requirements-column li,
body.light-mode .detail-page .similar-game-content h3 {
    color: var(--theme-text);
}

body.light-mode .detail-page .detail-section h2::after {
    background: var(--theme-accent);
}

body.light-mode .detail-page .detail-media-thumbnail:hover,
body.light-mode .detail-page .detail-media-thumbnail:focus-visible,
body.light-mode .detail-page .detail-media-thumbnail.active,
body.light-mode .detail-page .similar-game-card:hover,
body.light-mode .detail-page .similar-game-card:focus-within {
    border-color: var(--theme-accent);
}

/* Dark-mode upcoming badge border */
body:not(.light-mode) .catalog-status.upcoming {
    border: 1px solid #207e50;
}

/* Larger primary calendar labels */
.calendar-current-month > span,
.calendar-search-field > span,
.calendar-platform-field > span {
    font-size: 17px;
}

/* Calendar month-jump label size */
.calendar-month-picker > span {
    font-size: 17px;
}

/* Light-mode scrollbars */
html.light-mode,
body.light-mode .search-results,
body.light-mode .catalog-dropdown-menu,
body.light-mode .calendar-month-popover,
body.light-mode .release-calendar-panel {
    scrollbar-color: #5f927b #d7e4de;
}

html.light-mode::-webkit-scrollbar,
body.light-mode .search-results::-webkit-scrollbar,
body.light-mode .catalog-dropdown-menu::-webkit-scrollbar,
body.light-mode .calendar-month-popover::-webkit-scrollbar,
body.light-mode .release-calendar-panel::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.light-mode::-webkit-scrollbar-track,
body.light-mode .search-results::-webkit-scrollbar-track,
body.light-mode .catalog-dropdown-menu::-webkit-scrollbar-track,
body.light-mode .calendar-month-popover::-webkit-scrollbar-track,
body.light-mode .release-calendar-panel::-webkit-scrollbar-track {
    background: #d7e4de;
}

html.light-mode::-webkit-scrollbar-thumb,
body.light-mode .search-results::-webkit-scrollbar-thumb,
body.light-mode .catalog-dropdown-menu::-webkit-scrollbar-thumb,
body.light-mode .calendar-month-popover::-webkit-scrollbar-thumb,
body.light-mode .release-calendar-panel::-webkit-scrollbar-thumb {
    border: 2px solid #d7e4de;
    border-radius: 999px;
    background: #5f927b;
}

html.light-mode::-webkit-scrollbar-thumb:hover,
body.light-mode .search-results::-webkit-scrollbar-thumb:hover,
body.light-mode .catalog-dropdown-menu::-webkit-scrollbar-thumb:hover,
body.light-mode .calendar-month-popover::-webkit-scrollbar-thumb:hover,
body.light-mode .release-calendar-panel::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent);
}

html.light-mode::-webkit-scrollbar-corner,
body.light-mode .search-results::-webkit-scrollbar-corner,
body.light-mode .catalog-dropdown-menu::-webkit-scrollbar-corner,
body.light-mode .calendar-month-popover::-webkit-scrollbar-corner,
body.light-mode .release-calendar-panel::-webkit-scrollbar-corner {
    background: #d7e4de;
}

/* Functional Arabic / English language switch */
.language-toggle {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.language-toggle:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}

html[dir="ltr"] body {
    direction: ltr;
}

html[dir="ltr"] .game-title-text,
html[dir="ltr"] .release,
html[dir="ltr"] .release-date-value,
html[dir="ltr"] .hijri-date-value,
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] .catalog-dropdown-toggle,
html[dir="ltr"] .catalog-dropdown-option {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .catalog-field select {
    padding-right: 40px;
    padding-left: 13px;
    background-position: right 17px center;
}

html[dir="ltr"] .catalog-dropdown-toggle {
    padding-right: 40px;
    padding-left: 13px;
}

html[dir="ltr"] .catalog-dropdown-toggle::after {
    right: 17px;
    left: auto;
}

html[dir="ltr"] .catalog-dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="ltr"] .detail-release-text,
html[dir="ltr"] .game-details-content,
html[dir="ltr"] .catalog-card .game-info,
html[dir="ltr"] .news-card-content,
html[dir="ltr"] .news-article-header,
html[dir="ltr"] .news-article-body,
html[dir="ltr"] .footer-brand,
html[dir="ltr"] .footer-links {
    text-align: left;
}

html[dir="ltr"] .detail-release-platforms {
    justify-content: flex-start;
}

@media (min-width: 801px) and (max-width: 1180px) {
    html[dir="ltr"] .language-toggle .language-option:not(.language-option-en) {
        display: none;
    }

    html[dir="ltr"] .language-toggle .language-option-en {
        display: inline;
    }
}

@media (max-width: 800px) {
    html[dir="ltr"] .language-toggle .language-option-en {
        display: none;
    }
}

/* Keep the English header in a natural left-to-right reading order. */
html[dir="ltr"] .navbar {
    direction: ltr;
}

html[dir="ltr"] .navbar .logo {
    justify-self: start;
}

html[dir="ltr"] .navbar .logo img {
    width: min(290px, 100%);
    object-position: left center;
    transform: none;
    transform-origin: left center;
}

html[dir="ltr"] .navbar nav {
    direction: ltr;
}

html[dir="ltr"] .navbar .actions {
    direction: ltr;
    flex-direction: row;
    justify-content: flex-end;
}

html[dir="ltr"] .navbar .search-interface,
html[dir="ltr"] .navbar .search-panel,
html[dir="ltr"] .navbar .search-box {
    direction: ltr;
}

html[dir="ltr"] .navbar .search-box input {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] .navbar .search-results,
html[dir="ltr"] .navbar .search-result-content {
    direction: ltr;
    text-align: left;
}

@media (min-width: 1181px) {
    html[dir="ltr"] .navbar {
        grid-template-columns: minmax(230px, 0.75fr) minmax(500px, 1fr) minmax(520px, 1.15fr);
        gap: clamp(16px, 1.5vw, 26px);
    }
}

@media (min-width: 801px) and (max-width: 1180px) {
    html[dir="ltr"] .navbar .logo img {
        width: min(210px, 100%);
    }

    html[dir="ltr"] .navbar nav {
        gap: 14px;
        font-size: 17px;
    }
}

@media (max-width: 800px) {
    html[dir="ltr"] .navbar .logo {
        margin-right: auto;
        margin-left: 0;
    }

    html[dir="ltr"] .navbar .logo img {
        width: clamp(150px, 38vw, 210px);
        height: 68px;
    }

    html[dir="ltr"] .navbar .actions {
        flex-direction: row;
    }
}

@media (max-width: 470px) {
    html[dir="ltr"] .navbar .logo img {
        width: clamp(125px, 34vw, 160px);
    }
}
@media (min-width: 801px) and (max-width: 950px) {
    html[dir="ltr"] .navbar {
        padding: 0 12px;
        grid-template-columns: minmax(160px, 0.55fr) minmax(340px, 1.2fr) minmax(260px, 0.9fr);
        gap: 8px;
    }

    html[dir="ltr"] .navbar .logo img {
        width: min(170px, 100%);
    }

    html[dir="ltr"] .navbar nav {
        gap: 8px;
        font-size: 16px;
    }

    html[dir="ltr"] .navbar .search-interface {
        width: clamp(140px, 18vw, 190px);
    }

    html[dir="ltr"] .language-toggle .language-option-en {
        display: none;
    }
}
/* English direction for game metadata and detail-page content. */
html[dir="ltr"] .platform-icons,
html[dir="ltr"] .catalog-release-icons,
html[dir="ltr"] .catalog-platform-row,
html[dir="ltr"] .release-platform-row,
html[dir="ltr"] .detail-release-platforms,
html[dir="ltr"] .detail-platform-icons {
    direction: ltr;
    flex-direction: row;
}

html[dir="ltr"] .similar-game-content p {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

html[dir="ltr"] .detail-page .game-description,
html[dir="ltr"] .detail-page .game-description h2,
html[dir="ltr"] .detail-page .game-description p,
html[dir="ltr"] .detail-page .pc-requirements,
html[dir="ltr"] .detail-page .pc-requirements h2,
html[dir="ltr"] .detail-page .requirements-grid,
html[dir="ltr"] .detail-page .requirements-column,
html[dir="ltr"] .detail-page .requirements-column h3,
html[dir="ltr"] .detail-page .requirements-column ul,
html[dir="ltr"] .detail-page .requirements-column li,
html[dir="ltr"] .detail-page .pc-requirements .detail-info-message {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .detail-page .game-description h2,
html[dir="ltr"] .detail-page .pc-requirements > h2 {
    margin-right: auto;
    margin-left: auto;
}

/* English direction for game-card actions. */
html[dir="ltr"] .games-grid .game-card-details-link,
html[dir="ltr"] .catalog-grid .catalog-details-link {
    direction: ltr;
    flex-direction: row;
    text-align: left;
    unicode-bidi: plaintext;
}

/* Left-align homepage carousel actions in English mode. */
html[dir="ltr"] main > .games-section .games-grid .game-card-details-link {
    align-self: flex-start;
    margin-right: auto;
    margin-left: 0;
}

/* English dark-mode Game Guide card action. */
html[dir="ltr"] body:not(.light-mode) .catalog-grid .catalog-details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid #207e50;
    border-radius: 7px;
    background: #063c2a;
    color: var(--site-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

html[dir="ltr"] body:not(.light-mode) .catalog-grid .catalog-details-link:hover,
html[dir="ltr"] body:not(.light-mode) .catalog-grid .catalog-details-link:focus-visible {
    border-color: var(--site-accent);
    background: #085237;
    color: #72ffa4;
    transform: translateY(-1px);
    outline: none;
}

/* English brand logo: mirror the Arabic header size and outer-edge spacing. */
@media (min-width: 1181px) {
    html[dir="ltr"] .navbar {
        grid-template-columns: minmax(420px, 0.95fr) minmax(425px, 1fr) minmax(375px, 1fr);
        gap: 16px;
    }

    html[dir="ltr"] .navbar .logo img {
        width: min(300px, 100%);
        object-position: center;
        transform: translateX(93.5%) scale(1.892);
        transform-origin: center;
    }

    html[dir="ltr"] .navbar nav {
        gap: 18px;
        font-size: 19px;
    }
}

@media (min-width: 1181px) and (max-width: 1350px) {
    html[dir="ltr"] .navbar {
        grid-template-columns: 412px minmax(350px, 1fr) minmax(280px, 1fr);
        gap: 8px;
    }

    html[dir="ltr"] .navbar nav {
        gap: 8px;
        font-size: 16px;
    }

    html[dir="ltr"] .language-toggle .language-option,
    html[dir="ltr"] .language-toggle .language-divider {
        display: none;
    }
}

/* English hero and homepage carousel flow. */
html[dir="ltr"] .hero::after {
    background: linear-gradient(90deg, #050b0e 0%, rgba(5, 11, 14, 0.85) 25%, rgba(5, 11, 14, 0.35) 60%, rgba(5, 11, 14, 0.1) 100%);
}

html[dir="ltr"] .hero-content,
html[dir="ltr"] #hero-description {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

html[dir="ltr"] main > .games-section .games-grid {
    direction: ltr;
    justify-content: flex-start;
}

/* Center English About and PC requirements content. */
html[dir="ltr"] .detail-page .game-description,
html[dir="ltr"] .detail-page .game-description h2,
html[dir="ltr"] .detail-page .game-description p,
html[dir="ltr"] .detail-page .pc-requirements,
html[dir="ltr"] .detail-page .pc-requirements h2,
html[dir="ltr"] .detail-page .requirements-grid,
html[dir="ltr"] .detail-page .requirements-column,
html[dir="ltr"] .detail-page .requirements-column h3,
html[dir="ltr"] .detail-page .requirements-column ul,
html[dir="ltr"] .detail-page .requirements-column li,
html[dir="ltr"] .detail-page .pc-requirements .detail-info-message {
    text-align: center;
}

html[dir="ltr"] .detail-page .game-description h2,
html[dir="ltr"] .detail-page .pc-requirements > h2 {
    margin-right: auto;
    margin-left: auto;
}

html[dir="ltr"] .detail-page .requirements-column ul {
    padding-inline-start: 0;
    list-style-position: inside;
}

/* English light-mode Hijri date direction. */
html[dir="ltr"] body.light-mode .hijri-date-value,
html[dir="ltr"] body.light-mode .calendar-upcoming-hijri-date {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

html[dir="ltr"] body.light-mode .calendar-current-hijri-month,
html[dir="ltr"] body.light-mode .calendar-hijri-day-number {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Keep the complete release calendar in natural English reading order. */
html[dir="ltr"] .calendar-weekdays,
html[dir="ltr"] .release-calendar-grid,
html[dir="ltr"] .calendar-day,
html[dir="ltr"] .calendar-day-header,
html[dir="ltr"] .calendar-day-number-group,
html[dir="ltr"] .calendar-game-event,
html[dir="ltr"] .calendar-event-platforms {
    direction: ltr;
}

html[dir="ltr"] .calendar-day-header,
html[dir="ltr"] .calendar-day-number-group {
    flex-direction: row;
}

html[dir="ltr"] .calendar-game-event-title {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/* The calendar SVG chevrons were drawn for the Arabic layout. */
html[dir="ltr"] .calendar-month-navigation .calendar-nav-button svg {
    transform: scaleX(-1);
}

/* Center these sections while retaining English text and list flow. */
html[dir="ltr"] .detail-page .game-description,
html[dir="ltr"] .detail-page .game-description h2,
html[dir="ltr"] .detail-page .game-description p,
html[dir="ltr"] .detail-page .pc-requirements,
html[dir="ltr"] .detail-page .pc-requirements h2,
html[dir="ltr"] .detail-page .requirements-grid,
html[dir="ltr"] .detail-page .requirements-column,
html[dir="ltr"] .detail-page .requirements-column h3,
html[dir="ltr"] .detail-page .requirements-column ul,
html[dir="ltr"] .detail-page .requirements-column li,
html[dir="ltr"] .detail-page .pc-requirements .detail-info-message {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* Clear hierarchy between Gregorian and Hijri calendar day numbers. */
.calendar-day-number {
    font-size: 18px;
}

.calendar-hijri-day-number {
    min-width: 18px;
    font-size: 13px;
}

/* Left-align English PC system requirement content beneath its centered title. */
html[dir="ltr"] .detail-page .pc-requirements .requirements-grid,
html[dir="ltr"] .detail-page .pc-requirements .requirements-column,
html[dir="ltr"] .detail-page .pc-requirements .requirements-column h3,
html[dir="ltr"] .detail-page .pc-requirements .requirements-column ul,
html[dir="ltr"] .detail-page .pc-requirements .requirements-column li,
html[dir="ltr"] .detail-page .pc-requirements .detail-info-message {
    text-align: left;
}

.detail-media-main video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #02080c;
}
/* Public accounts and saved games */
.site-account {
    position: relative;
    flex: 0 0 auto;
}

.account-toggle-button {
    position: relative;
}

.account-presence {
    position: absolute;
    inset-inline-start: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid #071218;
    border-radius: 50%;
    background: #7d8b93;
}

.account-toggle-button.is-signed-in .account-presence {
    background: #2cff88;
    box-shadow: 0 0 9px rgba(44, 255, 136, 0.8);
}

.account-menu {
    position: absolute;
    z-index: 2300;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    width: min(260px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid #1c3b45;
    border-radius: 12px;
    background: #0a171e;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
    direction: rtl;
}

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

.account-menu-email {
    display: block;
    padding: 8px 10px 12px;
    overflow: hidden;
    color: #a9bac2;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: start;
}

.account-menu-link,
.account-sign-out {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #f2f7f9;
    font: inherit;
    font-size: 0.9rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.account-menu-link:hover,
.account-menu-link:focus-visible,
.account-sign-out:hover,
.account-sign-out:focus-visible {
    outline: none;
    background: rgba(44, 255, 136, 0.1);
    color: #2cff88;
}

.auth-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.auth-modal[hidden] {
    display: none;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 12, 0.82);
    backdrop-filter: blur(7px);
}

.auth-dialog {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid #1d4650;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% -20%, rgba(44, 255, 136, 0.12), transparent 45%),
        #09161c;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.6);
    color: #f4f8fa;
    text-align: center;
}

.auth-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #23434d;
    border-radius: 50%;
    background: #0c1c23;
    color: #bdd0d7;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.auth-close:hover,
.auth-close:focus-visible {
    border-color: #2cff88;
    outline: none;
    color: #2cff88;
}

.auth-dialog-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    place-items: center;
    border: 1px solid rgba(44, 255, 136, 0.45);
    border-radius: 50%;
    background: rgba(44, 255, 136, 0.08);
    color: #2cff88;
    font-size: 1.65rem;
}

.auth-dialog h2 {
    margin: 0;
    font-size: clamp(1.55rem, 5vw, 2rem);
}

.auth-description {
    margin: 10px auto 22px;
    color: #9eb1ba;
    line-height: 1.75;
}

.auth-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: #d9e3e7;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: start;
}

.auth-field[hidden] {
    display: none;
}

.auth-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #23434d;
    border-radius: 9px;
    outline: none;
    background: #071218;
    color: #f6fafb;
    font: inherit;
    direction: ltr;
}

.auth-field input:focus {
    border-color: #2cff88;
    box-shadow: 0 0 0 3px rgba(44, 255, 136, 0.1);
}

.auth-primary,
.auth-secondary,
.favorites-signed-out button,
.favorites-empty a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.auth-primary {
    width: 100%;
    margin-top: 5px;
    border: 1px solid #2cff88;
    background: #2cff88;
    color: #031109;
}

.auth-primary:hover,
.auth-primary:focus-visible {
    outline: none;
    background: #69ffa8;
}

.auth-primary:disabled {
    cursor: wait;
    opacity: 0.65;
}

.auth-secondary {
    width: 100%;
    margin-top: 9px;
    border: 1px solid #23434d;
    background: #0c1c23;
    color: #e5edf0;
}

.auth-secondary:hover,
.auth-secondary:focus-visible {
    border-color: #2cff88;
    outline: none;
    color: #2cff88;
}

.auth-text-button {
    margin: 14px 0 2px;
    border: 0;
    background: transparent;
    color: #82a0ac;
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.auth-text-button:hover,
.auth-text-button:focus-visible {
    outline: none;
    color: #2cff88;
}

.auth-status {
    min-height: 22px;
    margin: 14px 0 0;
    color: #9eb1ba;
    font-size: 0.84rem;
    line-height: 1.55;
}

.auth-status.is-error {
    color: #ff8e8e;
}

.auth-status.is-success {
    color: #55f99b;
}

body.auth-modal-open {
    overflow: hidden;
}

.favorite-button {
    position: absolute;
    z-index: 8;
    top: 10px;
    inset-inline-start: 10px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(184, 211, 220, 0.45);
    border-radius: 50%;
    background: rgba(5, 15, 20, 0.86);
    color: #e8f0f3;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.game-card,
.similar-game-card {
    position: relative;
}

.favorite-button svg,
.favorite-detail-button svg {
    width: 20px;
    height: 20px;
    overflow: visible;
}

.favorite-button path,
.favorite-detail-button path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.favorite-button:hover,
.favorite-button:focus-visible {
    border-color: #2cff88;
    outline: none;
    color: #2cff88;
    transform: translateY(-2px) scale(1.04);
}

.favorite-button.is-favorite {
    border-color: #2cff88;
    background: rgba(8, 55, 34, 0.94);
    color: #2cff88;
}

.favorite-button.is-favorite path,
.favorite-detail-button.is-favorite path {
    fill: currentColor;
}

.favorite-button:disabled,
.favorite-detail-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.favorite-detail-button {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 9px 15px;
    border: 1px solid #245344;
    border-radius: 9px;
    background: #0b211a;
    color: #75f7aa;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.favorite-detail-button:hover,
.favorite-detail-button:focus-visible,
.favorite-detail-button.is-favorite {
    border-color: #2cff88;
    outline: none;
    background: rgba(44, 255, 136, 0.14);
    color: #2cff88;
}

.account-toast {
    position: fixed;
    z-index: 10100;
    inset-inline-start: 50%;
    bottom: 26px;
    max-width: min(420px, calc(100vw - 28px));
    padding: 11px 16px;
    border: 1px solid #2cff88;
    border-radius: 10px;
    background: #0a2118;
    color: #dfffee;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.account-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.account-toast.is-error {
    border-color: #ff7272;
    background: #2d1013;
    color: #ffe4e4;
}

.favorites-page {
    width: min(1200px, calc(100% - 40px));
    min-height: 70vh;
    margin: 0 auto;
    padding: 76px 0 100px;
}

.favorites-page-header {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.favorites-page-header > span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 11px;
    border: 1px solid rgba(44, 255, 136, 0.38);
    border-radius: 999px;
    background: rgba(44, 255, 136, 0.08);
    color: #2cff88;
    font-size: 0.78rem;
    font-weight: 800;
}

.favorites-page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.favorites-page-header p {
    margin: 12px 0;
    color: #91a8b3;
    font-size: 1rem;
    line-height: 1.8;
}

.favorites-page-header strong {
    color: #2cff88;
    font-size: 0.9rem;
}

.favorites-signed-out,
.favorites-empty {
    max-width: 620px;
    margin: 50px auto 0;
    padding: 42px 24px;
    border: 1px dashed #26444e;
    border-radius: 16px;
    background: #08151b;
    text-align: center;
}

.favorites-signed-out[hidden],
.favorites-empty[hidden],
.favorites-grid[hidden] {
    display: none;
}

.favorites-empty-icon {
    color: #2cff88;
    font-size: 3rem;
    line-height: 1;
}

.favorites-signed-out h2,
.favorites-empty h2 {
    margin: 14px 0 6px;
}

.favorites-signed-out p,
.favorites-empty p {
    margin: 0 0 20px;
    color: #91a8b3;
    line-height: 1.7;
}

.favorites-signed-out button,
.favorites-empty a {
    padding: 10px 18px;
    border: 1px solid #2cff88;
    background: #123d2c;
    color: #76ffad;
}

.favorites-signed-out button:hover,
.favorites-signed-out button:focus-visible,
.favorites-empty a:hover,
.favorites-empty a:focus-visible {
    outline: none;
    background: #2cff88;
    color: #04120b;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.favorite-page-card {
    min-height: 100%;
}

.favorite-page-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.favorite-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-page-card .game-info {
    display: flex;
    min-height: 170px;
    flex-direction: column;
}

.favorite-page-card h2 {
    margin: 0 0 10px;
    font-size: 1.18rem;
}

.favorite-page-card h2 a {
    color: inherit;
    text-decoration: none;
}

.favorite-page-card .game-card-details-link {
    margin-top: auto;
}

html[dir="ltr"] .account-menu {
    direction: ltr;
}

html[dir="ltr"] .account-menu-email {
    text-align: left;
}

html[dir="ltr"] .auth-dialog,
html[dir="ltr"] .favorites-page {
    direction: ltr;
}

html[dir="ltr"] .account-toast {
    transform: translate(-50%, 14px);
}

html[dir="ltr"] .account-toast.is-visible {
    transform: translate(-50%, 0);
}

body.light-mode .account-presence {
    border-color: #edf5f7;
}

body.light-mode .account-menu,
body.light-mode .auth-dialog,
body.light-mode .favorites-signed-out,
body.light-mode .favorites-empty {
    border-color: #bdd1d7;
    background: #f7fbfc;
    color: #10242c;
}

body.light-mode .account-menu-link,
body.light-mode .account-sign-out {
    color: #10242c;
}

body.light-mode .auth-field {
    color: #213941;
}

body.light-mode .auth-field input {
    border-color: #b7cbd1;
    background: #ffffff;
    color: #10242c;
}

body.light-mode .auth-secondary,
body.light-mode .auth-close {
    border-color: #b7cbd1;
    background: #edf4f6;
    color: #18323b;
}

body.light-mode .favorite-button {
    border-color: rgba(22, 75, 58, 0.35);
    background: rgba(249, 253, 252, 0.92);
    color: #173d31;
}

body.light-mode .favorite-button.is-favorite {
    border-color: #0fa45a;
    background: #e2f8ec;
    color: #087642;
}

body.light-mode .favorite-detail-button {
    border-color: #8fc9ad;
    background: #e7f8ef;
    color: #087642;
}

body.light-mode .favorites-page-header p,
body.light-mode .favorites-signed-out p,
body.light-mode .favorites-empty p {
    color: #536e78;
}

@media (max-width: 800px) {
    .account-menu {
        position: fixed;
        top: 70px;
        inset-inline: 12px;
        width: auto;
    }

    .auth-dialog {
        padding: 26px 20px 22px;
    }

    .favorites-page {
        width: min(100% - 28px, 680px);
        padding-top: 48px;
    }

    .favorites-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .favorite-button,
    .account-toast {
        transition: none;
    }
}

.auth-dialog-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}