/* ==========================================================================
   Design Tokens & Variables
   ========================================================================== */
:root {
    /* Brand Colors - Venezuela Game */
    --vg-blue: #0B1957;
    --vg-blue-light: #1A2B75;
    --vg-yellow: #F2A900;
    --vg-yellow-hover: #FFB81C;
    --vg-red: #C00A27;
    --vg-red-hover: #DA1535;

    /* Backgrounds & Surfaces (Dark Theme) */
    --bg-base: #060913;
    --bg-surface: #0a0f25;
    --bg-surface-elevated: #111836;

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;

    /* Glassmorphism Tokens */
    --glass-bg: rgba(17, 24, 54, 0.4);
    --glass-bg-hover: rgba(26, 43, 117, 0.5);
    --glass-border: rgba(248, 250, 252, 0.08);
    --glass-border-highlight: rgba(242, 169, 0, 0.3);
    /* Yellow tint border */

    /* Typography */
    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Spacing & Layout */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Scale */
    --z-background: -10;
    --z-base: 0;
    --z-elevated: 10;
    --z-dropdown: 20;
    --z-sticky: 30;
    --z-modal: 50;
    --z-toast: 60;
}

/* ==========================================================================
   Light Theme Tokens
   ========================================================================== */
[data-theme="light"] {
    /* Backgrounds & Surfaces (Light Theme) */
    --bg-base: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F1F5F9;

    /* Text Colors */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;

    /* Glassmorphism Tokens */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(15, 23, 42, 0.1);

    /* Brand Tweaks for Light Mode Contrast */
    --vg-blue: #0B1957;
    --vg-blue-light: #F2F8FF;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    /* Use dynamic viewport height so iOS Safari's collapsing URL bar doesn't
       leave an empty band at the bottom on overscroll. Falls back to 100vh
       on browsers that don't support dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lock scroll behind the mobile menu when it's open */
body.nav-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
.text-gradient {
    background: linear-gradient(135deg, var(--vg-yellow), #FFD166);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.text-gradient-red {
    background: linear-gradient(135deg, var(--vg-red), #FF4D6D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.center {
    text-align: center;
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.pb-section {
    padding-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Background Effects (Orbs)
   ========================================================================== */
.bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-background);
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    animation: float 20s infinite alternate ease-in-out;
}

.orb-1 {
    top: -10%;
    left: 10%;
    width: 600px;
    height: 600px;
    background: var(--vg-blue);
    animation-delay: 0s;
}

.orb-2 {
    bottom: -20%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: rgba(192, 10, 39, 0.4);
    /* Red tint */
    animation-delay: -5s;
}

.orb-3 {
    top: 30%;
    left: 40%;
    width: 500px;
    height: 500px;
    background: rgba(242, 169, 0, 0.2);
    /* Yellow tint */
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* ==========================================================================
   Glassmorphism System
   ========================================================================== */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .glass-panel {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    /* Lighter shadow for light mode */
}

.blur-glass {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.promo-gradient {
    position: relative;
    overflow: hidden;
}

.promo-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Using radial gradients isolated in different corners to avoid muddy mixing */
    background:
        radial-gradient(ellipse at top right, rgba(242, 169, 0, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(192, 10, 39, 0.15) 0%, transparent 50%),
        var(--glass-bg);
    z-index: -1;
}

/* ==========================================================================
   Components: Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--transition-normal);
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    user-select: none;
}

.btn-large {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: 12px;
}

.btn-primary {
    background: var(--vg-yellow);
    color: var(--bg-surface);
    box-shadow: 0 4px 14px rgba(242, 169, 0, 0.4);
}

.btn-primary:hover {
    background: var(--vg-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 169, 0, 0.6);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-outline:hover {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-surface);
    transform: translateY(-2px);
}

.btn-icon {
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    color: var(--text-primary);
    background: var(--glass-border);
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.glass-nav {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: var(--z-sticky);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.75rem 0;
    transition: all var(--transition-normal);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme="light"] .logo-dark {
    display: none !important;
}

[data-theme="light"] .logo-light {
    display: block !important;
}

.logo-img {
    object-fit: contain;
}

/* The light-mode source (assets/logo-light.png) is a tiny 240×60 PNG,
   so we visually upscale it to fill the nav. The dark-mode source
   (assets/translog.png) is already 2129×738 — applying the same scale
   would overflow the nav and crowd out the menu links, so we only
   transform the light variant. */
.logo-light {
    transform: scale(1.8);
    transform-origin: left center;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
}

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

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

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--vg-yellow);
    border-radius: 2px;
}

/* Mobile menu button — subtle circular pill that mirrors the theme-toggle
   button. Uses direct rgba values (no CSS variables) so it renders the same
   on every mobile browser, with enough contrast in light mode to actually
   be visible. */
.mobile-menu-btn {
    display: none;
    padding: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    /* Light theme defaults */
    background: rgba(15, 23, 42, 0.08);
    color: #0F172A;
    border: 1px solid rgba(15, 23, 42, 0.22);
    transition: background 150ms ease;
}

[data-theme="dark"] .mobile-menu-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #F5F5F7;
    border-color: rgba(255, 255, 255, 0.22);
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
    background: rgba(15, 23, 42, 0.18);
}

[data-theme="dark"] .mobile-menu-btn:hover,
[data-theme="dark"] .mobile-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

.mobile-menu-btn svg {
    stroke-width: 2.5;
    width: 22px;
    height: 22px;
    display: block;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0 4rem;
    position: relative;
}

.hero-content {
    /* Fills the container so the hero card's left/right edges line up
       with the showcase controls and game grid below. The headline
       stays centred via text-align; the subtitle is pinned at 600px so
       wide cards don't produce uncomfortably long lines. */
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}


[data-theme="dark"] .hero-content {
    background: linear-gradient(180deg, rgba(11, 25, 87, 0.4) 0%, rgba(6, 9, 19, 0.8) 100%);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* Highlight flare on card edge */
.hero-content::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 169, 0, 0.8), transparent);
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 100px;
    background: rgba(242, 169, 0, 0.1);
    color: var(--vg-yellow);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(242, 169, 0, 0.2);
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    /* Pin to a comfortable reading width so the headline doesn't
       stretch to a single low-density line on very wide hero cards. */
    max-width: 900px;
    margin-inline: auto;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-inline: auto;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ==========================================================================
   Hero Marquee — continuously scrolling strip of game thumbnails
   ========================================================================== */
.hero-marquee {
    position: relative;
    width: 100%;
    margin: 0 auto 2rem;
    /* Vertical padding gives the hover lift+scale room to breathe without
       being clipped by overflow:hidden on the inner viewport. */
    padding: 14px 0;
    /* Edge fade so items disappear into nothing instead of clipping hard */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Inner viewport: clips horizontally for the seamless loop. Uses
   overflow:hidden (universal mobile support) — the parent .hero-marquee
   carries the vertical padding so the hover lift on items still has
   room to breathe even though both axes are clipped here. */
.hero-marquee-viewport {
    overflow: hidden;
    border-radius: 14px;
}

.hero-marquee-track {
    display: flex;
    gap: 0.875rem;
    width: max-content;
    animation: hero-marquee-scroll 32s linear infinite;
    padding: 6px 0;
}

.hero-marquee:hover .hero-marquee-track {
    animation-play-state: paused;
}

.hero-marquee-item {
    flex: 0 0 auto;
    width: 140px;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    background: var(--bg-surface-elevated);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    transform-origin: center center;
}

.hero-marquee-item:hover {
    /* Scale only (no Y translate) so the item stays inside the
       overflow:hidden viewport on mobile browsers. */
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--glass-border-highlight);
    z-index: 2;
}

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

@keyframes hero-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-marquee-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .hero-marquee-item {
        width: 110px;
    }

    .hero-marquee-track {
        animation-duration: 22s;
    }
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-panel p {
    text-align: justify;
    /* Slightly tighten loose lines that long words can create */
    text-justify: inter-word;
    hyphens: auto;
    /* Panel itself is full container width (matches hero / showcase
       grid), but cap each paragraph at a comfortable reading width so
       long lines don't tire the eye. Centred inside the wider panel. */
    max-width: 900px;
    margin-inline: auto;
}

.about-tagline {
    color: var(--vg-blue);
    font-weight: bold;
    /* The tagline is one short sentence; centring reads better than justifying */
    text-align: center !important;
}

[data-theme="dark"] .about-tagline {
    color: var(--vg-yellow);
}

/* ==========================================================================
   Showcase & Filters
   ========================================================================== */
.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
}

.section-desc {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.filters-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Search bar: glass panel sized to match the filters row above. Holds an
   icon, the input, and a live result count. */
.search-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 3rem;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.search-container .search-icon {
    flex: 0 0 auto;
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-container input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    padding: 0.25rem 0;
}

.search-container input[type="search"]::placeholder {
    color: var(--text-secondary);
    opacity: 0.65;
}

/* Hide WebKit's default search clear ("x") since we're rendering inside a
   glass panel and the default control clashes with our styling. */
.search-container input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.75;
    white-space: nowrap;
}

.filter-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.filter-btn:hover {
    color: var(--text-primary);
    background: var(--glass-border);
}

.filter-btn.active {
    background: var(--vg-blue);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(11, 25, 87, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .filter-btn.active {
    background: var(--vg-blue-light);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(11, 25, 87, 0.5);
}

/* ==========================================================================
   Showcase: Fullscreen Toggle
   ==========================================================================
   "Fullscreen" here = the showcase section breaks out of the 1280px
   container so the grid uses the full viewport width. Thumbnails get
   denser (more per row, slightly smaller min) for easier scanning and
   sorting. Lives inline in the search bar (right side) so it's visible
   beside controls the user is already looking at. Mobile auto-runs in
   fullscreen mode (see media query) and hides the button. */
.fullscreen-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    margin-left: 0.25rem;
    border-radius: 10px;
    background: var(--vg-yellow);
    border: 1px solid transparent;
    color: var(--vg-blue);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(242, 169, 0, 0.25);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fullscreen-toggle:hover {
    background: var(--vg-yellow-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(242, 169, 0, 0.35);
}

.fullscreen-toggle:focus-visible {
    outline: 2px solid var(--vg-yellow);
    outline-offset: 2px;
}

/* Active (fullscreen ON): swap to a calm "exit" look so the button reads
   as a secondary control once the user is already in fullscreen. */
.fullscreen-toggle[aria-pressed="true"] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border-color: var(--glass-border-highlight);
    box-shadow: none;
}

.fullscreen-toggle[aria-pressed="true"]:hover {
    background: var(--glass-bg-hover);
    transform: none;
}

.fs-icon {
    flex: 0 0 auto;
}

/* Show the right icon for the current state */
.fullscreen-toggle .fs-icon-collapse { display: none; }
.fullscreen-toggle[aria-pressed="true"] .fs-icon-expand { display: none; }
.fullscreen-toggle[aria-pressed="true"] .fs-icon-collapse { display: block; }

/* Fullscreen mode: container loses its max-width so the grid stretches.
   Header / filters / search stay capped at 1280px so reading width
   doesn't blow out on ultrawides; the grid alone fills the new space.
   Cap the grid at 1800px too so 4K monitors don't show 8+ tiny cards
   per row. */
.showcase.is-fullscreen > .container {
    max-width: none;
    padding: 0 1.5rem;
}

.showcase.is-fullscreen .section-header,
.showcase.is-fullscreen .filters-container,
.showcase.is-fullscreen .search-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.showcase.is-fullscreen .game-grid {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    /* Tighter min so more thumbnails fit per row, with a slightly
       smaller gap to match. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* ==========================================================================
   Game Grid & Cards
   ========================================================================== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.game-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--glass-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--glass-border-highlight);
    border-color: rgba(255, 255, 255, 0.15);
}



.game-card:hover .play-button,
.game-card:focus-within .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Two-button overlay (Watch + Play) */
.card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(6, 9, 19, 0.15) 0%, rgba(6, 9, 19, 0.7) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.game-card:hover .card-overlay,
.game-card:focus-within .card-overlay {
    opacity: 1;
    pointer-events: auto;
}

.card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 160px;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform var(--transition-bounce),
        opacity var(--transition-normal),
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast);
}

.game-card:hover .card-action,
.game-card:focus-within .card-action {
    transform: translateY(0);
    opacity: 1;
}

.game-card:hover .card-action-play,
.game-card:focus-within .card-action-play {
    transition-delay: 60ms;
}

.card-action-icon {
    flex-shrink: 0;
}

/* Watch Video — secondary outline button on a glassy backdrop */
.card-action-watch {
    background: rgba(11, 25, 87, 0.55);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(248, 250, 252, 0.25);
}

.card-action-watch:hover {
    background: rgba(11, 25, 87, 0.85);
    border-color: var(--vg-yellow);
    box-shadow: 0 6px 18px rgba(11, 25, 87, 0.45);
}

/* Play / Try Game — primary brand button */
.card-action-play {
    background: var(--vg-yellow);
    color: var(--vg-blue);
    box-shadow: 0 6px 18px rgba(242, 169, 0, 0.45);
}

.card-action-play:hover {
    background: var(--vg-yellow-hover);
    box-shadow: 0 8px 22px rgba(242, 169, 0, 0.6);
    transform: translateY(-2px);
}

.card-action-play.is-disabled {
    background: rgba(248, 250, 252, 0.15);
    color: rgba(248, 250, 252, 0.65);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: auto;
}

.card-action-play.is-disabled:hover {
    background: rgba(248, 250, 252, 0.15);
    box-shadow: none;
    transform: translateY(0);
}

/* Backwards compat: hide the legacy single play-button (the new overlay supersedes it) */
.play-button {
    display: none;
}

.game-card-media {
    position: relative;
    /* Aspect ratio removed to allow the image's natural aspect ratio to define the card size */
    overflow: hidden;
    background: #000;
    width: 100%;
    height: 100%;
    display: flex;
    /* Ensures image stretches to border-radius bounds without awkward gaps */
}

.game-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease, opacity var(--transition-normal);
    position: relative;
    z-index: 1;
}

.game-card:hover .game-card-img,
.game-card:focus-visible .game-card-img {
    transform: scale(1.05);
}

/* When the card has a video preview, fade the image fully on hover so the video shows through */
.game-card.has-preview:hover .game-card-img,
.game-card.has-preview:focus-visible .game-card-img {
    opacity: 0;
}

/* Cards without a preview still get the dramatic darkening effect */
.game-card:not(.has-preview):hover .game-card-img {
    opacity: 0.7;
}

/* Inline preview video — sits underneath the image, revealed on hover */
.game-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    z-index: 0;
}

.game-card.has-preview:hover .game-card-video,
.game-card.has-preview:focus-visible .game-card-video {
    opacity: 1;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 56px;
    height: 56px;
    background: rgba(11, 25, 87, 0.8);
    backdrop-filter: blur(8px);
    border: 2px solid var(--vg-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-bounce);
    box-shadow: 0 0 20px rgba(242, 169, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

.game-card:focus-visible {
    outline: 2px solid var(--vg-yellow);
    outline-offset: 2px;
}

.game-card:focus-visible .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

[data-theme="light"] .play-button {
    box-shadow: 0 0 30px rgba(242, 169, 0, 0.8);
}

/* Triangle for play icon */
.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--vg-yellow);
    margin-left: 4px;
    /* visually center the triangle */
}



/* ==========================================================================
   CTA & Footer
   ========================================================================== */
.cta-card {
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 24px;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.footer {
    border-top: 1px solid var(--glass-border);
    padding: 2rem 0;
    background: var(--glass-bg);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

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

/* ==========================================================================
   Video Modal Window
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    width: 100%;
    max-width: 1000px;
    padding: 1rem;
    position: relative;
    transform: scale(0.95);
    transition: transform var(--transition-bounce);
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: -2.5rem;
    right: 1rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.modal-close:hover {
    background: var(--vg-red);
}

.modal-content {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}

.modal-content video,
.modal-content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Game modal — larger near-full-viewport surface for the iframe-embedded
   bundle. Aspect ratio is intentionally NOT 16:9 because each scratch /
   slot game owns its own scaling logic, and we want it to fill the
   available height instead of being letterboxed. */
.modal-container.is-game {
    max-width: 95vw;
    padding: 0;
}

.modal-container.is-game .modal-close {
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-content.is-game {
    aspect-ratio: auto;
    height: 92vh;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}

.modal-content.is-game iframe {
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .modal-container.is-game {
        max-width: 100vw;
        height: 100dvh;
    }

    .modal-content.is-game {
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
}

/* ==========================================================================
   Inline Game Player (Pragmatic-style game detail page)
   ==========================================================================
   Replaces the fullscreen modal with an in-page section. Iframe sits in
   a 16:9 frame at typical slot aspect, info panel (title + description)
   below it. "Back" button returns to the showcase grid. */
.game-player {
    padding-top: calc(var(--spacing-xl) + 2rem);
}

.game-player-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.game-player-back:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-highlight);
}

.game-player-frame {
    position: relative;
    /* Pragmatic-Play-sized panel: ~960px max width, 16:10 aspect ratio,
       centred on the page. Smaller than the previous full-bleed
       container so the page chrome (logo, back button, info card)
       breathes around the iframe instead of being dominated by it. */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    max-height: 70vh;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* Floating fullscreen button on the iframe — top-right corner. Sits above
   the iframe at z-index 3 so it's always reachable; the iframe itself
   captures pointer events otherwise. */
.game-fs-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(11, 25, 87, 0.7);
    color: #FFFFFF;
    border: 1px solid rgba(248, 250, 252, 0.2);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.game-fs-btn:hover {
    background: rgba(11, 25, 87, 0.9);
    border-color: var(--vg-yellow);
    transform: translateY(-1px);
}

.game-fs-btn:focus-visible {
    outline: 2px solid var(--vg-yellow);
    outline-offset: 2px;
}

.game-fs-btn .game-fs-icon-collapse { display: none; }
.game-player-frame[data-fullscreen="on"] .game-fs-icon-expand { display: none; }
.game-player-frame[data-fullscreen="on"] .game-fs-icon-collapse { display: block; }

/* When the frame is in browser fullscreen, drop the aspect-ratio cap so
   the iframe fills the viewport edge-to-edge. Selectors split because
   browsers invalidate a whole list if any pseudo-class is unrecognized. */
.game-player-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
}

.game-player-frame:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
}

#gamePlayerContainer,
#gamePlayerContainer iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.game-player-info {
    /* Match the centred Pragmatic-Play-sized iframe above. */
    width: 100%;
    max-width: 960px;
    margin: 1.5rem auto 0;
    padding: 1.5rem 1.75rem;
}

.game-player-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.game-player-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .game-player-frame {
        max-width: 100%;
        aspect-ratio: 16 / 10;
        max-height: none;
        border-radius: 12px;
    }

    .game-player-info {
        max-width: 100%;
        padding: 1rem 1.25rem;
    }

    .game-player-title {
        font-size: 1.375rem;
    }

    /* Rotate-device hint: shown only when the phone is held in
       portrait. Slot iframes are landscape-first, so the player gets
       a much bigger effective canvas after a quarter turn. */
    .rotate-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
        line-height: 1.3;
        color: var(--text-secondary);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 10px;
    }
    .rotate-hint svg {
        flex-shrink: 0;
        opacity: 0.7;
    }
    @media (orientation: landscape) {
        .rotate-hint { display: none; }
    }
}

/* On larger screens the rotate hint is irrelevant. */
@media (min-width: 769px) {
    .rotate-hint { display: none; }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 768px) {

    /* Match the body gutter to the floating nav bar (which sits at
       left/right 0.5rem). Without this the hero/showcase/CTA cards
       appear visibly more inset than the header pill above them. */
    .container {
        padding: 0 0.5rem;
    }

    /* Hide the desktop nav links and the desktop "Asociarse" CTA by default;
       show them stacked when the menu is open via the hamburger.
       Dropdown bg is intentionally MORE opaque than the bar's --glass-bg
       so the menu items stay readable over the page content (the previous
       0.4 alpha let everything bleed through). */
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity var(--transition-normal), transform var(--transition-normal);
    }

    [data-theme="dark"] .nav-links {
        background: rgba(11, 25, 87, 0.92);
        border-color: rgba(248, 250, 252, 0.14);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
    }

    .glass-nav.is-open .nav-links {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links .nav-link {
        display: block;
        width: 100%;
        padding: 0.875rem 1rem;
        border-radius: 10px;
        font-size: 1rem;
    }

    .nav-links .nav-link:hover,
    .nav-links .nav-link.active {
        background: var(--glass-border);
    }

    /* The Asociarse / theme-toggle cluster on desktop sits to the right;
       on mobile we hide the Asociarse button and keep only the theme toggle. */
    .glass-nav .btn-primary {
        display: none;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    .glass-nav.is-open .mobile-menu-btn {
        transform: translateY(-1px) rotate(90deg);
    }

    /* On mobile, the logo claims all leftover space so the theme-toggle
       div and hamburger cluster together on the right (no big gap
       between them from justify-content: space-between). The hamburger
       gets a small left margin so the two right-side controls sit
       neatly next to each other rather than touching. */
    .nav-container>.logo-link {
        margin-right: auto;
    }

    .nav-container>.mobile-menu-btn {
        margin-left: 0.5rem;
    }

    /* Shrink the logo on mobile so the right cluster (theme toggle +
       hamburger) fits without overflow on narrow viewports (≤412px).
       Inline style on the <img> sets 80px / 300px on desktop; we need
       !important here to override that. */
    .logo-img {
        height: 60px !important;
        max-width: 180px !important;
        /* Desktop sets a 9.5rem left margin to inset the logo from the
           container edge. On mobile the container is already tight, so
           drop the margin entirely or the logo squashes the right
           cluster (theme toggle + hamburger). */
        margin-left: 0 !important;
    }

    /* Light-mode logo gets transform: scale(1.8) on desktop to compensate
       for the small source PNG. On mobile the bar is much narrower and
       the scaled image visually crashes into the right cluster — drop
       the upscale and let the layout box drive its size. */
    .logo-light {
        transform: none !important;
    }

    /* Trim the glass-nav's left/right margin a hair on small phones so
       the bar uses more of the available viewport width. */
    .glass-nav {
        left: 0.5rem;
        right: 0.5rem;
        padding: 0.5rem 0;
    }

    /* Tighten the container's horizontal padding inside the nav bar. */
    .glass-nav .nav-container {
        padding: 0 0.75rem;
    }

    /* Pull the hero in tighter on mobile but leave a small gap below the
       floating nav pill — 6rem was flush, 7.5rem felt too airy. */
    .hero {
        padding: 6.25rem 0 2.5rem;
        min-height: 0;
    }

    .hero-content {
        padding: 1.75rem 1.25rem;
        border-radius: 18px;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        margin-bottom: 1.75rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .badge {
        margin-bottom: 1rem;
    }

    /* Section headings shrink on phones so they don't wrap awkwardly or
       blow out the container width. */
    .section-header {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.875rem;
    }

    .section-desc {
        font-size: 0.95rem;
    }

    /* CTA loses its desktop 4rem/2rem padding so the card doesn't dwarf
       the rest of the page on a phone. */
    .cta-card {
        padding: 2.5rem 1.25rem;
        border-radius: 20px;
    }

    .cta-content h2 {
        font-size: 1.5rem;
    }

    /* Footer: stack the copyright above the links, centred. The desktop
       space-between with wrap looks lopsided on phones. */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .footer-links {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Galería: 2 imágenes por línea en mobile (en lugar de 1).
       Mobile is implicitly "fullscreen" — the container already runs at
       0.5rem gutters and the grid stretches edge-to-edge. */
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    /* Hide the inline toggle on phones — mobile is fullscreen by default
       and the .is-fullscreen class adds nothing visible at this width. */
    .fullscreen-toggle {
        display: none;
    }

    /* Mobile fullscreen safety: the auto-fill min on .is-fullscreen would
       try to put a single card per row at narrow widths. Force the same
       2-up grid the rest of the site uses on phones. */
    .showcase.is-fullscreen .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        max-width: none;
    }

    .showcase.is-fullscreen > .container {
        padding: 0 0.5rem;
    }

    /* Smaller action buttons inside cards so two-up still looks readable */
    .card-action {
        min-width: 0;
        width: calc(100% - 0.5rem);
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .card-action span {
        white-space: nowrap;
    }

    .filters-container {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 1rem;
        scrollbar-width: none;
    }

    .filters-container::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;
    }

    /* Reduce About panel padding so the justified text has comfortable margins */
    .about-panel {
        padding: 1.5rem !important;
    }
}