/* Variables */
:root {
    /* Base palette */
    --color-page: #131017;
    --color-surface: #201a27;
    --color-surface-soft: #2d2436;
    --color-surface-hover: #3c3048;
    --color-control: #4d3d5c;
    --color-control-active: #5f4a72;
    --color-accent: #1dbf59;
    --color-accent-hover: #3fc972;
    --color-accent-strong: #009a59;
    --color-warning: #fae97c;
    --color-text: #ffffff;
    --color-text-soft: #d5d0e2;
    --color-text-muted: #7d7689;
    --color-border: rgba(255, 255, 255, 0.08);
    --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.28);

    /* Typography */
    --font-family-base: "Roboto", Arial, sans-serif;
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.18vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
    --font-size-md: clamp(1rem, 0.93rem + 0.25vw, 1.125rem);
    --font-size-lg: clamp(1.25rem, 1rem + 1vw, 2rem);
    --font-size-xl: clamp(1.55rem, 1.05rem + 1.8vw, 2.7rem);
    --line-tight: 1.05;
    --line-base: 1.45;
    --weight-medium: 600;
    --weight-bold: 800;

    /* Spacing and sizing */
    --container-width: 1300px;
    --page-gutter: clamp(0.75rem, 0.35rem + 1.7vw, 1.5rem);
    --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.4rem);
    --space-sm: clamp(0.5rem, 0.35rem + 0.55vw, 0.85rem);
    --space-md: clamp(0.75rem, 0.55rem + 0.85vw, 1.25rem);
    --space-lg: clamp(1rem, 0.75rem + 1vw, 1.75rem);
    --space-xl: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
    --radius-sm: clamp(0.45rem, 0.35rem + 0.25vw, 0.65rem);
    --radius-md: clamp(0.6rem, 0.45rem + 0.35vw, 0.9rem);
    --radius-pill: 999px;
    --logo-width: clamp(7rem, 5.8rem + 3.2vw, 9.4rem);
    --icon-size: clamp(1.1rem, 1rem + 0.3vw, 1.4rem);

    /* Buttons */
    --button-height: clamp(2rem, 1.8rem + 0.45vw, 2.4rem);
    --button-padding: clamp(0.85rem, 0.7rem + 0.55vw, 1.2rem);
    --button-font: var(--font-size-sm);

    /* Header */
    --header-height: clamp(3.1rem, 2.85rem + 0.75vw, 3.8rem);
    --header-bg: #100d14;
    --header-gap: clamp(0.45rem, 0.3rem + 0.75vw, 1rem);

    /* Hero */
    --hero-gap: clamp(0.55rem, 0.35rem + 0.85vw, 1rem);
    --hero-min: clamp(10.5rem, 8.5rem + 8vw, 18.5rem);
    --hero-label-bg: rgba(95, 74, 114, 0.92);
    --hero-overlay: linear-gradient(90deg, rgba(19, 16, 23, 0.9) 0%, rgba(19, 16, 23, 0.5) 46%, rgba(19, 16, 23, 0.08) 100%);

    /* Carousel */
    --card-size: clamp(8.5rem, 7.1rem + 5vw, 13.4rem);
    --carousel-gap: clamp(0.7rem, 0.45rem + 0.85vw, 1rem);
    --control-size: clamp(2.25rem, 2rem + 0.85vw, 3rem);
    --play-size: clamp(3.1rem, 2.7rem + 1.4vw, 4rem);

    /* Footer */
    --footer-logo-tile: clamp(8rem, 6.6rem + 4vw, 12.2rem);
    --footer-icon-height: clamp(1.35rem, 1.1rem + 0.8vw, 2rem);
    --footer-row-gap: clamp(0.85rem, 0.55rem + 1vw, 1.35rem);
}

/* Base */
@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/roboto/Roboto-VariableFont_wdth,wght.woff2") format("woff2");
}

* {
    box-sizing: border-box;
}

html {
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-family-base);
    line-height: var(--line-base);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0%, rgba(95, 74, 114, 0.18), transparent 34rem),
        var(--color-page);
    color: var(--color-text);
}

img {
    display: block;
    max-width: 100%;
}

figure {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

.page {
    min-height: 100vh;
}

.container {
    width: min(100% - (var(--page-gutter) * 2), var(--container-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--space-lg);
}

.section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-end: var(--space-md);
}

.section-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    padding-inline: var(--button-padding);
    border-radius: var(--radius-pill);
    background: var(--color-control);
    color: var(--color-text);
    font-size: var(--button-font);
    font-weight: var(--weight-bold);
    line-height: 1;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.button:hover {
    background: var(--color-control-active);
    transform: translateY(-1px);
}

.button.primary {
    background: var(--color-accent-strong);
}

.button.primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-page);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-size);
    height: var(--control-size);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.icon-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.icon-button:disabled {
    cursor: default;
    opacity: 0.38;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--header-gap);
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand img {
    width: var(--logo-width);
    height: auto;
}

.brand .block-image,
.footer-brand .block-image {
    display: block;
    width: var(--logo-width);
    margin: 0;
}

.brand .block-image img,
.footer-brand .block-image img {
    width: var(--logo-width);
    height: auto;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-surface-soft);
}

.switch-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--button-height);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
}

.switch-link.active {
    background: var(--color-control);
    color: var(--color-text);
}

.switch-mark {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav-link {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
    transition: color 0.2s ease;
}

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

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-inline-start: auto;
}

.search-icon {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-text-muted);
}

.search-icon::before {
    content: "";
    position: absolute;
    width: 62%;
    height: 62%;
    border: 2px solid currentColor;
    border-radius: 50%;
    inset: 0;
}

.search-icon::after {
    content: "";
    position: absolute;
    width: 42%;
    height: 2px;
    background: currentColor;
    right: 2%;
    bottom: 12%;
    transform: rotate(45deg);
    transform-origin: right center;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: var(--space-sm);
}

.menu-line {
    display: block;
    width: var(--icon-size);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-text);
}

.mobile-menu {
    display: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.mobile-menu[data-open="true"] {
    display: block;
}

.mobile-panel {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.mobile-links,
.mobile-auth {
    display: grid;
    gap: var(--space-sm);
}

.mobile-link {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
    font-weight: var(--weight-medium);
}

/* Hero */
.hero {
    overflow: hidden;
}

.hero-shell {
    position: relative;
    overflow: hidden;
}

.hero-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--hero-gap)) / 2);
    gap: var(--hero-gap);
    transform: translateX(0);
    transition: transform 0.45s ease;
    will-change: transform;
}

.hero-slide {
    position: relative;
    min-height: var(--hero-min);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.hero-slide img {
    width: 100%;
    height: 100%;
    min-height: var(--hero-min);
    object-fit: cover;
}

.hero-slide .block-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--hero-min);
    margin: 0;
}

.hero-slide .block-image img {
    width: 100%;
    height: 100%;
    min-height: var(--hero-min);
    object-fit: cover;
}

.hero-copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--hero-overlay);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: var(--button-height);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--hero-label-bg);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
}

.hero-title {
    max-width: 14ch;
    color: var(--color-warning);
    font-size: var(--font-size-xl);
    font-weight: 900;
    line-height: var(--line-tight);
}

.hero-text {
    max-width: 24ch;
    color: var(--color-warning);
    font-size: var(--font-size-md);
    font-weight: var(--weight-bold);
    line-height: 1.18;
}

.hero-dots {
    display: none;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
}

.hero-dot {
    width: clamp(0.45rem, 0.38rem + 0.25vw, 0.6rem);
    height: clamp(0.45rem, 0.38rem + 0.25vw, 0.6rem);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-control);
    cursor: pointer;
}

.hero-dot.active {
    background: var(--color-accent);
}

/* Games */
.carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: var(--carousel-gap);
}

.game-card {
    position: relative;
    flex: 0 0 var(--card-size);
    min-width: 0;
    scroll-snap-align: start;
}

.game-thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.game-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.game-thumb .block-image {
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 1;
}

.game-thumb .block-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.favorite-button {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.7rem, 1.55rem + 0.45vw, 2rem);
    height: clamp(1.7rem, 1.55rem + 0.45vw, 2rem);
    border: 0;
    border-radius: 50%;
    background: rgba(19, 16, 23, 0.34);
    color: var(--color-text);
    cursor: pointer;
    font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.65rem);
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
}

.game-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 16, 23, 0.62);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game-card:hover .game-thumb img {
    transform: scale(1.08);
    filter: brightness(0.68);
}

.game-card:hover .game-overlay {
    opacity: 1;
}

.play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--play-size);
    height: var(--play-size);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-page);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.play-button:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

.game-info {
    padding-block-start: var(--space-xs);
}

.game-name {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-provider {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium);
}

.carousel-controls {
    display: flex;
    gap: var(--space-sm);
}

.games-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-inline-start: auto;
}

.view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--control-size);
    padding-inline: var(--button-padding);
    border-radius: var(--radius-pill);
    background: var(--color-control);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.view-all:hover {
    background: var(--color-control-active);
}

.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(1.25rem, 1.05rem + 0.55vw, 1.6rem);
    min-height: clamp(1.25rem, 1.05rem + 0.55vw, 1.6rem);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text);
    font-size: var(--font-size-xs);
}

/* Footer */
.site-footer {
    margin-block-start: var(--space-xl);
    padding-block: var(--space-xl);
    background: var(--color-page);
    border-top: 1px solid var(--color-border);
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--footer-row-gap);
    margin-block-end: var(--space-xl);
}

.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--footer-logo-tile) * 0.46);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.logo-tile img {
    max-height: var(--footer-icon-height);
    object-fit: contain;
}

.logo-tile .block-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.logo-tile .block-image img {
    width: auto;
    max-width: 100%;
    max-height: var(--footer-icon-height);
    object-fit: contain;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--footer-row-gap);
    align-items: center;
    margin-block-end: var(--space-xl);
}

.payment-grid img {
    justify-self: center;
    max-height: var(--footer-icon-height);
    object-fit: contain;
}

.payment-grid .block-image,
.trust-icons .block-image {
    display: block;
    justify-self: center;
    margin: 0;
}

.payment-grid .block-image img,
.trust-icons .block-image img {
    width: auto;
    max-width: 100%;
    max-height: var(--footer-icon-height);
    object-fit: contain;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-xl);
    align-items: start;
}

.footer-brand {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
}

.footer-brand img {
    width: var(--logo-width);
}

.language {
    position: relative;
}

.language-toggle {
    gap: var(--space-xs);
    border: 0;
    cursor: pointer;
}

.chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.language-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--space-xs));
    display: none;
    min-width: 12rem;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    box-shadow: var(--shadow-panel);
}

.language[data-open="true"] .language-menu {
    display: grid;
    gap: var(--space-xs);
}

.language-menu a {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
}

.language-menu a:hover {
    background: var(--color-control);
    color: var(--color-text);
}

.footer-link-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-xl);
}

.footer-column {
    display: grid;
    gap: var(--space-sm);
}

.footer-label {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
}

.footer-column a {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-bold);
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--color-text);
}

.footer-bottom {
    display: grid;
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
}

.trust-icons {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.trust-icons img {
    max-height: var(--footer-icon-height);
}

.disclaimer,
.copyright {
    max-width: 56rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium);
}

/* Media */
@media screen and (max-width: 900px) {
    .switch,
    .header-nav,
    .header-actions .search-icon,
    .header-actions .button {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-menu {
        display: none;
    }

    .mobile-panel .switch {
        display: inline-flex;
    }

    .header-inner {
        justify-content: space-between;
    }

    .hero-track {
        grid-auto-columns: 100%;
        gap: 0;
        transform: translateX(calc(var(--hero-index, 0) * -100%));
    }

    .hero-dots {
        display: flex;
    }

    .footer-top,
    .footer-link-columns {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 760px) {
    .logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .section-bar {
        align-items: center;
    }
}