/* Only the interactive home page loads this stylesheet. */
.simple-home {
    position: relative;
    display: flex;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 7%, rgba(255, 198, 104, .27), transparent 17rem),
        radial-gradient(circle at 4% 88%, rgba(41, 166, 171, .12), transparent 19rem),
        #f8fbfb;
}

.simple-home::before {
    position: absolute;
    top: 7%;
    right: -3rem;
    width: min(42vw, 27rem);
    height: 86%;
    content: "";
    opacity: .52;
    background-image: radial-gradient(#a7cbd0 1.7px, transparent 1.9px);
    background-size: 25px 25px;
    pointer-events: none;
}

.simple-home__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-height: 100%;
    padding: clamp(1rem, 3.8vh, 2.35rem) 0 clamp(1.25rem, 3.8vh, 2.5rem);
    align-content: center;
    gap: clamp(.9rem, 2.4vh, 1.7rem);
}

.simple-hero,
.simple-stage-shell,
.simple-current-game,
.simple-result-area {
    text-align: center;
}

.simple-kicker {
    margin: 0 0 .55rem;
    color: #ad7b14;
    font-size: clamp(.72rem, 1.6vw, .92rem);
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.simple-hero h1 {
    margin: 0;
    color: #0b3c59;
    font-family: var(--display);
    font-size: clamp(2.1rem, 6vw, 4.9rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .96;
    white-space: nowrap;
}

.simple-game-rail {
    display: flex;
    justify-content: center;
    gap: clamp(.85rem, 2.8vw, 2.4rem);
    margin-top: clamp(1.1rem, 3.2vh, 2rem);
    overflow-x: auto;
    padding: .35rem .25rem .85rem;
    scrollbar-width: thin;
}

.simple-game-tile {
    display: grid;
    flex: 0 0 clamp(5.4rem, 8vw, 6.9rem);
    justify-items: center;
    gap: .5rem;
    padding: 0;
    color: #5b7889;
    background: transparent;
    border: 0;
    font-size: clamp(.74rem, 1.3vw, .92rem);
    font-weight: 850;
    line-height: 1.1;
    transition: color .16s ease, transform .16s ease;
}

.simple-game-tile:hover,
.simple-game-tile.is-selected {
    color: #df7529;
    transform: translateY(-2px);
}

.simple-game-ball {
    position: relative;
    display: grid;
    width: clamp(4rem, 6.4vw, 5.25rem);
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(17, 75, 95, .16);
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(13, 55, 71, .12);
    transition: box-shadow .16s ease, transform .16s ease;
}

.simple-game-ball img { width: 100%; height: 100%; object-fit: contain; }
.simple-game-ball.is-generic {
    border-color: rgba(255,255,255,.62);
    box-shadow: inset -8px -10px 14px rgba(0,48,65,.22), inset 5px 5px 10px rgba(255,255,255,.38), 0 8px 16px rgba(13,55,71,.16);
}
.simple-game-ball.is-generic[data-tone="amber"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #ffe59b, #df9a1d 62%, #a65f0e); }
.simple-game-ball.is-generic[data-tone="coral"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #ffb4a0, #f06849 62%, #a93445); }
.simple-game-ball.is-generic[data-tone="violet"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #d4c4ff, #8a70d9 62%, #504093); }
.simple-game-ball.is-generic[data-tone="teal"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #a8f1df, #25ae98 62%, #087766); }
.simple-game-ball.is-generic[data-tone="sky"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #bce5ff, #519ee3 62%, #24649d); }
.simple-game-ball.is-generic[data-tone="lime"] { background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,.16) 10% 17%, transparent 18%), linear-gradient(145deg, #e9f8a9, #9dbd49 62%, #587b27); }
.simple-game-ball-mark,
.simple-game-ball-mark::before,
.simple-game-ball-mark::after { position: absolute; width: .43rem; aspect-ratio: 1; content: ""; background: rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,39,56,.16); }
.simple-game-ball-mark { top: 50%; left: calc(50% - .45rem); transform: translate(-50%, -50%); }
.simple-game-ball-mark::before { transform: translate(.9rem, -.4rem); }
.simple-game-ball-mark::after { transform: translate(.9rem, .4rem); }
.simple-game-tile.is-selected .simple-game-ball,
.simple-game-tile:hover .simple-game-ball {
    box-shadow: 0 0 0 2px rgba(247, 169, 57, .54), 0 11px 20px rgba(13, 55, 71, .18);
    transform: scale(1.04);
}

.simple-game-name { max-width: 11ch; }

.simple-stage-shell {
    display: grid;
    justify-items: center;
    gap: clamp(.65rem, 1.7vh, 1rem);
}

.simple-current-game {
    display: grid;
    justify-items: center;
    gap: .28rem;
}

.simple-current-game__identity { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.simple-current-game-logo { width: clamp(3.8rem, 6.2vw, 4.75rem); height: auto; flex: 0 0 auto; }
.simple-current-game__copy { display: grid; gap: .1rem; text-align: left; }

.simple-game-country {
    margin: 0;
    color: #1d7880;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.simple-current-game h2 {
    margin: 0;
    color: #0d3c57;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 500;
    letter-spacing: -.025em;
}

.simple-game-summary {
    margin: 0;
    color: #59798a;
    font-size: .92rem;
    font-weight: 700;
}

.simple-info-link {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    color: #0e6577;
    font-size: .8rem;
    font-weight: 850;
    text-decoration: none;
}

.simple-info-link:hover { color: #dd702a; }

.simple-result-area {
    display: grid;
    width: 100%;
    justify-items: center;
    gap: .75rem;
}

.simple-generated-groups {
    display: grid;
    min-height: clamp(3.65rem, 8vw, 5rem);
    justify-items: center;
    align-items: center;
}

.template-result-loading {
    color: #6b8796;
    font-size: .85rem;
}

.template-result-group { display: grid; justify-items: center; }
.template-result-group h3 { display: none; }
.template-result-group.is-empty { display: none; }

.template-result-balls {
    display: flex;
    max-width: 42rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.42rem, .9vw, .7rem);
}

.template-result-ball {
    --result-start: #43b2be;
    --result-end: #006176;
    display: grid;
    width: clamp(2.55rem, 4.35vw, 3.35rem);
    aspect-ratio: 1;
    place-items: center;
    padding: 0;
    color: #fff;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.82) 0 7%, rgba(255,255,255,.18) 8% 12%, transparent 13%), linear-gradient(145deg, var(--result-start), var(--result-end));
    border: 0;
    border-radius: 50%;
    box-shadow: inset -8px -10px 12px rgba(0,44,64,.22), inset 4px 4px 8px rgba(255,255,255,.2), 0 7px 14px rgba(7,94,112,.23);
    font-size: clamp(.85rem, 1.5vw, 1rem);
    font-weight: 900;
    opacity: 0;
    transform: translateY(8px) scale(.88);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.2,1.18), filter .16s ease;
}

.template-result-ball.is-visible { opacity: 1; transform: none; }
.template-result-ball:hover { filter: brightness(1.08); }
.template-result-ball.is-removed { pointer-events: none; animation: simple-ball-out .22s ease-in both; }
.template-result-ball[data-color="accent"] { --result-start: #ffd269; --result-end: #f37039; }
.template-result-ball[data-color="coral"] { --result-start: #ff9b83; --result-end: #c34d5b; }
.template-result-ball[data-color="violet"] { --result-start: #bbadf1; --result-end: #6456af; }

.simple-shake-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-width: 8.1rem;
    padding: .7rem 1.25rem;
    color: #fff;
    background: linear-gradient(100deg, #ffae37, #ff653e);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 9px 17px rgba(234,93,47,.24);
    font-size: .94rem;
    font-weight: 900;
    transition: box-shadow .16s ease, transform .16s ease;
}

.simple-shake-button:hover { box-shadow: 0 13px 21px rgba(234,93,47,.3); transform: translateY(-2px); }
.simple-shake-button:disabled { opacity: .68; }

.simple-ad-slot {
    display: grid;
    width: min(100%, 48rem);
    min-height: 82px;
    place-items: center;
    margin-top: clamp(.25rem, 1.2vh, .65rem);
    color: #91a5ac;
    background: rgba(255,255,255,.55);
    border: 1px dashed #c3d4da;
    border-radius: .75rem;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.template-empty-state { padding: 5rem 0; text-align: center; }
.template-kicker { margin: 0 0 .5rem; color: #ad7b14; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

@keyframes simple-ball-out {
    to { opacity: 0; transform: translateY(-.45rem) scale(.58); }
}

@media (max-width: 640px) {
    .simple-home__content { padding-top: 1rem; padding-bottom: 1.25rem; gap: .85rem; }
    .simple-hero h1 { font-size: clamp(1.92rem, 8.4vw, 2.65rem); letter-spacing: -.06em; }
    .simple-game-rail { justify-content: flex-start; margin-right: -14px; padding-right: 14px; }
    .simple-game-tile { flex-basis: 5.25rem; }
    .simple-game-ball { width: 3.9rem; }
    .simple-current-game-logo { width: 3.65rem; }
    .simple-stage-shell { gap: .62rem; }
    .simple-current-game h2 { font-size: 1.85rem; }
    .simple-game-summary { font-size: .86rem; }
    .template-result-balls { gap: .52rem; }
    .template-result-ball { width: 2.85rem; }
    .simple-ad-slot { min-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .simple-game-tile,
    .simple-game-ball,
    .template-result-ball,
    .simple-shake-button { transition: none; }
}