.lu-home--games {
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 20%, rgba(58, 119, 255, 0.32) 0%, transparent 37%),
        linear-gradient(180deg, #051a70 0%, #0b33a1 58%, #123eb4 100%);
}

.lu-games-scene {
    position: relative;
    z-index: 6;
    min-height: 100svh;
    padding: 76px 24px 210px;
}

.lu-games-shell {
    position: relative;
    z-index: 8;
    width: min(94vw, 1420px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lu-games-brand {
    width: min(38vw, 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -8px;
}

.lu-games-brand .lu-moon-area {
    width: clamp(145px, 16vw, 220px);
    height: clamp(145px, 16vw, 220px);
}

.lu-games-brand .lu-brush {
    width: 66%;
    left: 28%;
    top: 17%;
}

.lu-games-brand .lu-title-window {
    width: min(31vw, 285px);
    margin-top: -12px;
}

.lu-games-heading {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: -10px;
}

.lu-games-heading h1 {
    margin: 0;
    padding: 0 0 0.12em;
    font: 900 clamp(52px, 7vw, 94px)/1.08 system-ui, sans-serif;
    letter-spacing: -0.035em;
    color: #ffd83d;
    background: linear-gradient(180deg, #fff4a2 0%, #ffd93f 43%, #ffb51f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 0 rgba(201, 122, 0, 0.30)) drop-shadow(0 0 16px rgba(255, 221, 68, 0.30));
}

.lu-games-heading p {
    margin: 10px 0 0;
    color: #fff;
    font: 700 clamp(16px, 2vw, 25px)/1.25 system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,75,.35);
}

.lu-games-grid {
    position: relative;
    z-index: 12;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 28px);
    margin-top: 28px;
}

.lu-game-card {
    position: relative;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 28px;
    transition: transform 180ms ease, filter 180ms ease;
}

.lu-game-card::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(0, 4, 73, 0.34);
    z-index: -1;
}

.lu-game-card img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 9px 15px rgba(1, 8, 80, 0.18));
    user-select: none;
    -webkit-user-drag: none;
}

.lu-game-card:hover,
.lu-game-card:focus-visible {
    transform: translateY(-9px) scale(1.035);
    filter: brightness(1.07);
    outline: none;
}

.lu-game-card.is-first::before {
    content: "¡Primero!";
    position: absolute;
    z-index: 5;
    top: 4%;
    right: 2%;
    padding: 7px 12px;
    border-radius: 999px;
    color: #6e1b63;
    background: #fff4a1;
    font: 900 clamp(11px, 1vw, 14px)/1 system-ui, sans-serif;
    box-shadow: 0 4px 12px rgba(67, 0, 85, 0.22);
    transform: rotate(7deg);
}

.lu-game-card__fallback {
    min-height: 230px;
    display: grid;
    place-items: center;
    padding: 22px;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 28px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font: 800 22px/1.15 system-ui, sans-serif;
    text-align: center;
}

.lu-games-back {
    position: relative;
    z-index: 12;
    margin-top: 20px;
    color: rgba(255,255,255,.92);
    font: 700 15px/1.2 system-ui, sans-serif;
    text-decoration: none;
    text-shadow: 0 2px 6px rgba(0,0,70,.3);
}

.lu-games-back:hover,
.lu-games-back:focus-visible {
    color: #ffe566;
    outline: none;
}

.lu-games-star {
    position: absolute;
    z-index: 4;
    width: clamp(180px, 22vw, 350px);
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    filter: drop-shadow(0 0 16px rgba(255, 225, 61, 0.22));
    will-change: transform, opacity;
}

.lu-games-star--left { left: -28vw; top: 92px; animation: lu-games-star-fly-left 12s ease-in-out infinite; }
.lu-games-star--right { right: -28vw; top: 175px; animation: lu-games-star-fly-right 14s ease-in-out infinite; animation-delay: -6s; }

.lu-games-clouds {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 360px;
    overflow: hidden;
    pointer-events: none;
}

.lu-games-cloud {
    position: absolute;
    bottom: -120px;
    width: min(58vw, 760px);
    height: auto;
    user-select: none;
    filter: drop-shadow(0 0 22px rgba(177, 201, 255, 0.18));
}

.lu-games-cloud--left { left: -7vw; animation: lu-games-cloud-float 11s ease-in-out infinite; }
.lu-games-cloud--right { right: -7vw; transform: scaleX(-1); animation: lu-games-cloud-float-right 13s ease-in-out infinite; animation-delay: -3s; }

.lu-games-toast {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: 28px;
    max-width: min(90vw, 560px);
    padding: 13px 20px;
    border: 1px solid rgba(255,232,111,.46);
    border-radius: 999px;
    color: #fff;
    background: rgba(5, 24, 87, 0.94);
    font: 800 15px/1.2 system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 9px 28px rgba(0,0,60,.32);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 18px) scale(.97);
    transition: opacity 180ms ease, transform 180ms ease;
}

.lu-games-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

@keyframes lu-games-star-fly-left {
    0% { opacity: 0; transform: translate3d(0,18px,0) scale(0.88); }
    12% { opacity: 1; }
    25% { opacity: 1; transform: translate3d(32vw,0,0) scale(0.96); }
    68% { opacity: 1; transform: translate3d(92vw,-34px,0) scale(1.02); }
    88% { opacity: 0; transform: translate3d(125vw,-55px,0) scale(1.05); }
    100% { opacity: 0; transform: translate3d(125vw,-55px,0) scale(1.05); }
}

@keyframes lu-games-star-fly-right {
    0% { opacity: 0; transform: translate3d(0,12px,0) scaleX(-1) scale(0.88); }
    12% { opacity: 1; }
    25% { opacity: 1; transform: translate3d(-32vw,0,0) scaleX(-1) scale(0.96); }
    68% { opacity: 1; transform: translate3d(-92vw,-30px,0) scaleX(-1) scale(1.02); }
    88% { opacity: 0; transform: translate3d(-125vw,-50px,0) scaleX(-1) scale(1.05); }
    100% { opacity: 0; transform: translate3d(-125vw,-50px,0) scaleX(-1) scale(1.05); }
}

@keyframes lu-games-cloud-float {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(12px,-7px,0); }
}

@keyframes lu-games-cloud-float-right {
    0%,100% { transform: scaleX(-1) translate3d(0,0,0); }
    50% { transform: scaleX(-1) translate3d(12px,-7px,0); }
}

@media (max-width: 1150px) {
    .lu-games-grid {
        width: min(88vw, 760px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .lu-games-star { width: clamp(155px, 23vw, 270px); opacity: .86; }
    .lu-games-cloud { width: min(72vw, 690px); }
}

@media (max-width: 767px) {
    .lu-home--games { overflow-y: auto; }
    .lu-games-scene { padding: 62px 10px 190px; }
    .lu-games-brand { width: 50vw; max-width: 230px; }
    .lu-games-brand .lu-moon-area { width: min(42vw, 180px); height: min(42vw, 180px); }
    .lu-games-brand .lu-title-window { width: min(47vw, 220px); margin-top: -10px; }
    .lu-games-heading { margin-top: -2px; }
    .lu-games-heading h1 { font-size: clamp(48px, 15vw, 72px); }
    .lu-games-heading p { margin-top: 7px; font-size: 15px; padding: 0 22px; }
    .lu-games-grid { width: min(94vw, 580px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
    .lu-game-card { border-radius: 18px; }
    .lu-game-card:hover { transform: none; }
    .lu-game-card.is-first::before { top: 2%; right: 0; padding: 5px 8px; font-size: 10px; }
    .lu-games-star { width: 165px; }
    .lu-games-star--left { left: -150px; top: 90px; }
    .lu-games-star--right { right: -150px; top: 165px; }
    .lu-games-clouds { height: 250px; }
    .lu-games-cloud { width: 84vw; bottom: -92px; }
    .lu-games-cloud--left { left: -35vw; }
    .lu-games-cloud--right { right: -35vw; }
    .lu-games-back { margin-top: 16px; font-size: 13px; }
}

@media (max-width: 390px) {
    .lu-games-grid { width: 96vw; gap: 6px; }
    .lu-games-heading p { font-size: 13px; }
    .lu-games-brand .lu-moon-area { width: 158px; height: 158px; }
    .lu-games-brand .lu-title-window { width: 195px; }
}

@media (prefers-reduced-motion: reduce) {
    .lu-games-star { display: none !important; }
    .lu-games-cloud { animation: none !important; }
    .lu-game-card { transition: none !important; }
}