:root {
    --ink: #24304a;
    --purple: #7357f6;
    --purple-dark: #5941cf;
    --sky-top: #7ed5ff;
    --sky-bottom: #dff7ff;
    --cream: #fffaf1;
    --card: rgba(255,255,255,.95);
    --shadow: 0 14px 30px rgba(65, 76, 121, .18);
    --radius-xl: 28px;
    --radius-lg: 22px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--sky-bottom); }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 9%, rgba(255,255,255,.65) 0 6%, transparent 6.5%),
        linear-gradient(180deg, var(--sky-top) 0%, #aee8ff 28%, #f3fbf1 60%, #fff6e8 100%);
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

body::before {
    width: 340px;
    height: 340px;
    left: -180px;
    bottom: 8vh;
    background: #75d78a;
    box-shadow: 160px 45px 0 #a6e67f, 300px 70px 0 #79c96f;
    opacity: .72;
}

body::after {
    width: 330px;
    height: 330px;
    right: -185px;
    bottom: 2vh;
    background: #70c875;
    box-shadow: -160px 35px 0 #a8df7b, -280px 90px 0 #76bc74;
    opacity: .68;
}

.page-shell {
    width: min(100%, 820px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(18px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom));
    position: relative;
}

.sky-decoration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cloud {
    position: absolute;
    width: 88px;
    height: 30px;
    background: rgba(255,255,255,.8);
    border-radius: 999px;
    animation: drift 11s ease-in-out infinite alternate;
}
.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    bottom: 8px;
    background: inherit;
    border-radius: 50%;
}
.cloud::before { width: 42px; height: 42px; left: 13px; }
.cloud::after { width: 34px; height: 34px; right: 10px; }
.cloud-a { top: 54px; right: -12px; transform: scale(.72); opacity: .75; }
.cloud-b { top: 185px; left: -28px; transform: scale(.5); opacity: .48; animation-delay: -4s; }
.sparkle { position: absolute; color: rgba(255,255,255,.9); font-size: 18px; animation: twinkle 2.6s ease-in-out infinite; }
.sparkle-a { top: 125px; right: 23%; }
.sparkle-b { top: 245px; left: 14%; animation-delay: -1.1s; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    padding: 22px 6px 24px;
}

.brand-badge {
    width: 70px;
    height: 70px;
    position: relative;
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 23px;
    transform: rotate(-5deg);
    background: linear-gradient(145deg, #ffda59, #ff9f43);
    box-shadow: 0 12px 24px rgba(79, 82, 135, .2), inset 0 2px 0 rgba(255,255,255,.65);
}

.brain-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; }
.brain-dot.d1 { left: 13px; top: 16px; }
.brain-dot.d2 { right: 13px; top: 12px; }
.brain-dot.d3 { left: 16px; bottom: 12px; }
.brain-dot.d4 { right: 15px; bottom: 15px; }
.brain-line { position: absolute; height: 4px; border-radius: 99px; background: white; transform-origin: left center; }
.brain-line.l1 { width: 27px; left: 22px; top: 26px; transform: rotate(-8deg); }
.brain-line.l2 { width: 25px; left: 21px; top: 36px; transform: rotate(16deg); }
.brain-line.l3 { width: 22px; left: 24px; top: 46px; transform: rotate(-18deg); }


.hero-content { min-width: 0; }
.hero-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.refresh-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 11px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #8f72ff, #6548e9);
    box-shadow: 0 8px 16px rgba(97,72,218,.22), inset 0 2px 0 rgba(255,255,255,.25);
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.refresh-button:active { transform: translateY(1px) scale(.97); }
.refresh-icon { font-size: 1.35rem; line-height: 1; }
@media (max-width: 430px) {
    .refresh-label { display: none; }
    .refresh-button { width: 44px; padding: 7px; border-radius: 15px; }
}

.eyebrow,
.section-kicker {
    margin: 0 0 4px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .72rem;
    color: var(--purple-dark);
}

h1, h2, h3, p { text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2rem, 9vw, 3.8rem); line-height: .95; letter-spacing: -.055em; color: white; text-shadow: 0 3px 0 rgba(73, 72, 144, .22); }
h1 span { color: #ffe568; }
.hero-copy { margin: 9px 0 0; max-width: 530px; color: #31466a; font-size: .95rem; line-height: 1.4; font-weight: 700; }

main {
    position: relative;
    background: rgba(255,250,241,.82);
    border: 1px solid rgba(255,255,255,.76);
    box-shadow: 0 22px 55px rgba(55, 70, 109, .16);
    backdrop-filter: blur(10px);
    border-radius: 34px;
    padding: 20px 14px 24px;
}

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 6px 16px; }
.section-head h2 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.25rem); letter-spacing: -.035em; }
.game-counter { flex: 0 0 auto; min-width: 64px; padding: 8px 12px; text-align: center; border-radius: 18px; color: white; background: linear-gradient(145deg, #8f72ff, #6548e9); box-shadow: 0 8px 16px rgba(97, 72, 218, .22); }
.game-counter strong { display: block; font-size: 1.15rem; line-height: 1; }
.game-counter span { display: block; font-size: .66rem; margin-top: 3px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

.games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 3px solid rgba(255,255,255,.92);
    box-shadow: var(--shadow);
    transform: translateY(12px);
    opacity: 0;
    animation: card-in .48s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: var(--delay);
    -webkit-tap-highlight-color: transparent;
}

.thumb-wrap { position: relative; aspect-ratio: 1 / .82; overflow: hidden; background: #e9efff; }
.game-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.002); transition: transform .2s ease; }
.version-badge {
    position: absolute;
    right: 9px;
    bottom: 9px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    color: white;
    background: rgba(63, 53, 116, .82);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 5px 12px rgba(50, 55, 100, .2);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.game-card-copy { padding: 12px 11px 13px; }
.game-card h3 { margin: 0; font-size: clamp(1rem, 4.4vw, 1.22rem); line-height: 1.05; letter-spacing: -.025em; }
.game-card p { margin: 5px 0 0; font-size: .76rem; line-height: 1.25; color: #68708a; font-weight: 700; }
.game-card:active { transform: scale(.975); }
.game-card:active .game-thumb { transform: scale(1.035); }

.empty-state { text-align: center; padding: 42px 20px 50px; background: rgba(255,255,255,.7); border-radius: 24px; border: 2px dashed rgba(115, 87, 246, .25); }
.empty-icon { font-size: 3rem; }
.empty-state h2 { margin: 10px 0 6px; }
.empty-state p { margin: 0 auto; max-width: 420px; line-height: 1.5; color: #68708a; }
.empty-state code { padding: 2px 6px; border-radius: 7px; background: #eee9ff; color: #5b45cc; }

footer { display: flex; justify-content: center; gap: 8px; padding: 20px 8px 4px; color: #4d6077; font-size: .75rem; font-weight: 800; }

@media (min-width: 600px) {
    .page-shell { padding-inline: 24px; }
    .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
    main { padding: 26px 22px 30px; }
    .game-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(65, 76, 121, .24); }
    .game-card:hover .game-thumb { transform: scale(1.035); }
}

@media (max-width: 350px) {
    .hero { grid-template-columns: 58px 1fr; }
    .brand-badge { width: 56px; height: 56px; transform: scale(.82) rotate(-5deg); transform-origin: left center; }
    .games-grid { gap: 9px; }
    .game-card-copy { padding: 10px 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}

@keyframes card-in { to { opacity: 1; transform: translateY(0); } }
@keyframes drift { to { transform: translateX(16px) scale(.72); } }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(15deg); } }

/* V4 - selection de version */
.version-badge {
    gap: 5px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .16s ease, background .16s ease;
}
.version-badge:active { transform: scale(.94); }
.version-badge:focus-visible { outline: 3px solid #ffe568; outline-offset: 3px; }
.version-chevron { font-size: .9rem; line-height: 1; margin-top: -2px; }

body.modal-open { overflow: hidden; }
.version-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-items: end;
}
.version-modal[hidden] { display: none; }
.version-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 29, 59, .42);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(3px);
}
.version-sheet {
    position: relative;
    width: min(100%, 620px);
    max-height: min(76dvh, 620px);
    margin: 0 auto;
    overflow: auto;
    overscroll-behavior: contain;
    background: #fffaf1;
    border: 3px solid rgba(255,255,255,.95);
    border-radius: 30px 30px 0 0;
    padding: 10px 16px max(18px, env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px rgba(41, 42, 84, .24);
    transform: translateY(105%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.version-modal.is-open .version-modal-backdrop { opacity: 1; }
.version-modal.is-open .version-sheet { transform: translateY(0); }
.version-sheet-handle {
    width: 54px;
    height: 6px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: #c9c5dc;
}
.version-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 2px 14px;
}
.version-sheet-head h2 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.75rem); }
.version-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 15px;
    background: #eee9ff;
    color: #5941cf;
    font: inherit;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.version-options { display: grid; gap: 9px; }
.version-option {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border: 2px solid #e6e0ff;
    border-radius: 19px;
    background: white;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(65, 76, 121, .08);
}
.version-option-main { display: grid; gap: 2px; }
.version-option strong { font-size: 1.08rem; }
.version-option small { color: #747b91; font-weight: 700; }
.version-check {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eee9ff;
    color: transparent;
    font-weight: 900;
}
.version-option.is-selected {
    border-color: #8268f7;
    background: #f6f3ff;
}
.version-option.is-selected .version-check { background: #7357f6; color: white; }
.version-option:focus-visible { outline: 3px solid #ffe568; outline-offset: 2px; }

@media (min-width: 700px) {
    .version-modal { align-items: center; padding: 24px; }
    .version-sheet { border-radius: 30px; }
}