/* Variables: base tokens */
:root {
    --font-main: "Roboto", "Segoe UI", sans-serif;
    --color-page-bg: #242127;
    --color-surface: #2f2a35;
    --color-surface-soft: #3a3342;
    --color-text: #f6f2ff;
    --color-text-dim: #d5cfe3;
    --color-accent: #ffcc5f;
    --color-accent-strong: #ff7a4d;
    --color-accent-ink: #221d17;
    --color-button-main: #f9d674;
    --color-button-main-shadow: #886b1b;
    --color-button-soft: #f9d674;
    --color-button-soft-shadow: #886b1b;
    --color-button-text: black;
    --color-link: #ffe5ae;
    --color-border: #4d4359;
    --color-overlay: rgba(9, 7, 14, 0.62);
    --color-focus: #68d4ff;

    --radius-soft: clamp(0.5rem, 0.46rem + 0.2vw, 0.7rem);
    --radius-main: clamp(0.85rem, 0.72rem + 0.55vw, 1.3rem);
    --radius-pill: 999px;
    --radius-button: clamp(0.35rem, 0.32rem + 0.12vw, 0.45rem);

    --shadow-head: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.35);
    --shadow-card: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.38);
    --shadow-focus: 0 0 0 0.16rem rgba(104, 212, 255, 0.4);

    --time-fast: 220ms;
    --time-main: 360ms;
    --ease-main: cubic-bezier(0.2, 0.7, 0.2, 1);

    --container-width: min(100% - clamp(1rem, 2.2vw, 2.2rem), 81.25rem);
    --header-min-height: clamp(4rem, 3.65rem + 1.2vw, 4.9rem);
    --section-gap: clamp(1.2rem, 1rem + 0.9vw, 2rem);

    --text-small: clamp(0.85rem, 0.82rem + 0.14vw, 0.98rem);
    --text-base: clamp(0.95rem, 0.91rem + 0.2vw, 1.08rem);
    --text-nav: clamp(0.9rem, 0.86rem + 0.18vw, 1.02rem);
    --text-sub: clamp(1rem, 0.95rem + 0.3vw, 1.24rem);
    --text-title: clamp(1.5rem, 1.1rem + 1.6vw, 2.55rem);

    --pad-chip-y: clamp(0.52rem, 0.48rem + 0.2vw, 0.68rem);
    --pad-chip-x: clamp(0.8rem, 0.7rem + 0.5vw, 1.2rem);
    --pad-block: clamp(1.2rem, 1rem + 0.9vw, 2rem);
    --pad-hero-y: clamp(2.2rem, 1.8rem + 1.8vw, 3.7rem);

    --menu-switch-size: clamp(2.5rem, 2.34rem + 0.6vw, 2.95rem);
    --drawer-top-gap: clamp(0.45rem, 0.4rem + 0.2vw, 0.62rem);

    --hero-min-height: clamp(22rem, 20rem + 8vw, 30rem);
    --hero-width-copy: clamp(17rem, 15.5rem + 7vw, 34rem);

    --grid-card-min: clamp(14.2rem, 13.2rem + 3.8vw, 17.2rem);
    --card-aspect: 1.5;
    --card-action-size: clamp(2.7rem, 2.4rem + 1vw, 3.35rem);

    --footer-note-size: clamp(0.8rem, 0.77rem + 0.15vw, 0.94rem);
}

/* Base: reset and helpers */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    font-size: var(--text-base);
    color: var(--color-text);
    background:
        radial-gradient(120% 120% at 8% -20%, #4c2744 0%, rgba(76, 39, 68, 0) 48%),
        radial-gradient(90% 110% at 96% 0%, #3a2f59 0%, rgba(58, 47, 89, 0) 52%),
        var(--color-page-bg);
    line-height: 1.4;
    min-height: 100vh;
}

img,
svg {
    display: block;
    max-inline-size: 100%;
}

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

p {
    margin: 0;
}

.ocf-layout-wrap {
    width: var(--container-width);
    margin-inline: auto;
}

main {
    display: grid;
    gap: var(--section-gap);
    padding-block: var(--pad-block);
}

a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Header */
.shell-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, rgba(21, 17, 28, 0.94) 0%, rgba(21, 17, 28, 0.78) 100%);
    box-shadow: var(--shadow-head);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-line {
    min-height: var(--header-min-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.6rem, 0.4rem + 1vw, 1.35rem);
}

.brand-link img {
    height: clamp(2rem, 1.9rem + 0.45vw, 2.4rem);
    width: auto;
    object-fit: contain;
}

.main-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.34rem, 0.28rem + 0.3vw, 0.6rem);
}

.main-link {
    font-size: var(--text-nav);
    color: var(--color-text-dim);
    padding: var(--pad-chip-y) var(--pad-chip-x);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition: color var(--time-fast) var(--ease-main), border-color var(--time-fast) var(--ease-main), background-color var(--time-fast) var(--ease-main);
}

.main-link:hover,
.main-link:focus-visible {
    color: var(--color-text);
    border-color: var(--color-border);
    background-color: rgba(255, 255, 255, 0.04);
}

.header-cta {
    display: flex;
    align-items: center;
    gap: clamp(0.46rem, 0.36rem + 0.46vw, 0.82rem);
}

.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-small);
    font-weight: 800;
    padding: var(--pad-chip-y) var(--pad-chip-x);
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    line-height: 1;
    transition: transform var(--time-fast) var(--ease-main), filter var(--time-fast) var(--ease-main);
}

.action-link-soft {
    background: var(--color-button-soft);
    color: var(--color-button-text);
    box-shadow: 0 0.3rem 0 0 var(--color-button-soft-shadow);
}

.action-link-strong {
    background: var(--color-button-main);
    color: var(--color-button-text);
    box-shadow: 0 0.3rem 0 0 var(--color-button-main-shadow);
}

.action-link:hover,
.action-link:focus-visible {
    transform: translateY(0.04rem);
    filter: brightness(1.04);
}

.menu-switch {
    width: var(--menu-switch-size);
    height: var(--menu-switch-size);
    display: none;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
}

.menu-glyph {
    width: clamp(1.15rem, 1.08rem + 0.33vw, 1.4rem);
    height: clamp(1.15rem, 1.08rem + 0.33vw, 1.4rem);
    fill: var(--color-text);
}

.menu-glyph-close {
    display: none;
}

.menu-switch[aria-expanded="true"] .menu-glyph-open {
    display: none;
}

.menu-switch[aria-expanded="true"] .menu-glyph-close {
    display: block;
}

.mobile-drawer {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--drawer-top-gap));
    background: rgba(20, 17, 27, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-card);
}

.mobile-drawer.is-open {
    display: block;
}

.mobile-links {
    display: grid;
}

.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-dim);
    padding: var(--pad-chip-y) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-link svg {
    width: 1rem;
    height: 1rem;
    fill: var(--color-link);
}

.mobile-auth {
    display: flex;
    gap: clamp(0.46rem, 0.36rem + 0.46vw, 0.82rem);
    padding-block: var(--pad-chip-y);
}

/* Hero */
.showcase {
    position: relative;
}

.showcase-panel {
    position: relative;
    min-height: var(--hero-min-height);
    border-radius: var(--radius-main);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: var(--shadow-card);
    background: #1a1620;
}

.showcase-image {
    inline-size: 100%;
    height: 100%;
    min-height: var(--hero-min-height);
    object-fit: cover;
}

.showcase-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(92deg, var(--color-overlay) 0%, rgba(9, 7, 14, 0.4) 52%, rgba(9, 7, 14, 0.2) 100%),
        radial-gradient(95% 120% at 0% 0%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 64%);
}

.showcase-copy {
    position: absolute;
    inset-block: auto 0;
    inset-inline: 0 auto;
    width: var(--hero-width-copy);
    display: grid;
    gap: clamp(0.72rem, 0.62rem + 0.45vw, 1.06rem);
    padding: var(--pad-hero-y);
}

.showcase-title {
    font-size: var(--text-title);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.showcase-subtitle {
    max-width: 40ch;
    font-size: var(--text-sub);
    color: var(--color-text-dim);
    text-wrap: pretty;
}

.showcase-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-button-text);
    background: var(--color-button-main);
    border-radius: var(--radius-button);
    padding: clamp(0.66rem, 0.57rem + 0.44vw, 0.96rem) clamp(1.1rem, 0.95rem + 0.72vw, 1.65rem);
    box-shadow: 0 0.36rem 0 0 var(--color-button-main-shadow);
    animation: ctaBreath 2.2s ease-in-out infinite;
}

/* Slots */
.games-strip {
    display: grid;
    gap: clamp(0.82rem, 0.7rem + 0.5vw, 1.2rem);
    margin: 30px 0;
}

.strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.strip-title {
    font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.65rem);
    font-weight: 800;
}

.strip-link {
    font-size: var(--text-small);
    color: var(--color-link);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 30px 0;
    gap: clamp(0.7rem, 0.58rem + 0.58vw, 1.2rem);
}

.game-card {
    position: relative;
    display: block;
    border-radius: var(--radius-main);
    overflow: hidden;
    aspect-ratio: var(--card-aspect);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #17131d;
    isolation: isolate;
}

.game-card img {
    inline-size: 100%;
    height: 100%;
    object-fit: cover;
}

.game-dim,
.game-halo,
.game-action {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.game-dim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 5%, rgba(0, 0, 0, 0.62) 100%);
    opacity: 0;
}

.game-halo {
    inset: 0.12rem;
    border-radius: calc(var(--radius-main) - 0.12rem);
    padding: 0.13rem;
    background: linear-gradient(105deg, #ff8e4d 0%, #ffe26b 26%, #6effc2 50%, #58b7ff 74%, #ff80cb 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    background-size: 210% 210%;
}

.game-action {
    display: grid;
    place-items: center;
    opacity: 0;
}

.game-action svg {
    width: var(--card-action-size);
    height: var(--card-action-size);
    fill: var(--color-text);
    filter: drop-shadow(0 0.3rem 0.9rem rgba(0, 0, 0, 0.55));
}

.game-card:hover .game-dim,
.game-card:focus-visible .game-dim,
.game-card.is-peek .game-dim {
    opacity: 1;
}

.game-card:hover .game-halo,
.game-card:focus-visible .game-halo,
.game-card.is-peek .game-halo {
    opacity: 1;
}

.game-card:hover .game-action,
.game-card:focus-visible .game-action,
.game-card.is-peek .game-action {
    opacity: 1;
}

/* Footer */
.shell-footer {
    padding-block: var(--pad-block);
    background: linear-gradient(180deg, rgba(32, 28, 40, 0.4) 0%, rgba(17, 15, 22, 0.9) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.shell-footer .ocf-layout-wrap {
    display: grid;
    gap: clamp(0.9rem, 0.75rem + 0.7vw, 1.45rem);
}

.footer-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.8rem, 0.64rem + 0.8vw, 1.45rem);
}

.footer-brand img {
    height: clamp(2rem, 1.9rem + 0.45vw, 2.4rem);
    width: auto;
}

.footer-copy {
    color: var(--color-text-dim);
    font-size: var(--text-small);
    max-width: 62ch;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.44rem, 0.38rem + 0.28vw, 0.7rem);
    justify-content: center;
}

.footer-links a {
    padding: var(--pad-chip-y) var(--pad-chip-x);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    color: var(--color-text-dim);
    transition: color var(--time-fast) var(--ease-main), border-color var(--time-fast) var(--ease-main), background-color var(--time-fast) var(--ease-main);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.06);
}

.footer-note {
    font-size: var(--footer-note-size);
    color: var(--color-text-dim);
    text-align: center;
}

/* Animations */
@keyframes ctaBreath {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 163, 94, 0.25);
    }
    50% {
        transform: scale(1.035);
        box-shadow: 0 0 1rem rgba(255, 163, 94, 0.5);
    }
}

/* Media layout rules */
@media (max-width: 68rem) {
    .main-links {
        display: none;
    }

    .menu-switch {
        display: grid;
    }

    .header-cta .action-link-soft,
    .header-cta .action-link-strong {
        display: none;
    }

    .footer-line {
        flex-direction: column;
        align-items: flex-start;
    }

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

@media (max-width: 52rem) {
    .showcase-copy {
        inset: auto 0 0 0;
        inline-size: 100%;
    }

    .strip-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-auth {
        flex-direction: column;
    }

    .mobile-auth .action-link {
        justify-content: center;
    }

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

@media (max-width: 36rem) {
    .footer-links {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links a {
        inline-size: 100%;
    }
}