.solo-game-modal-open,
.solo-game-modal-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

.game-hub-card {
    isolation: isolate;
}

.game-card-hero {
    position: relative;
    min-height: 238px;
    overflow: hidden;
    background: #172033;
}

.game-card-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 22%, rgb(255 255 255 / .16), transparent 18%),
        linear-gradient(160deg, #55b9eb 0%, #b9e5f1 46%, #ffd69b 100%);
    animation: game-card-sky-cycle 24s ease-in-out infinite alternate;
}

.game-card-sky::after {
    content: "";
    position: absolute;
    inset: auto -10% -42% -10%;
    height: 63%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgb(24 58 73 / .68), #101a2c);
    box-shadow: 0 -2px 0 rgb(217 255 95 / .7);
}

.game-card-sun,
.game-card-moon {
    position: absolute;
    top: 28px;
    right: 34px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
}

.game-card-sun {
    background: #fff3a8;
    box-shadow: 0 0 38px rgb(255 224 109 / .78);
    animation: game-card-sun-cycle 24s ease-in-out infinite alternate;
}

.game-card-moon {
    left: 34px;
    opacity: 0;
    background: #f8fafc;
    box-shadow: 0 0 24px rgb(226 232 240 / .4);
    animation: game-card-moon-cycle 24s ease-in-out infinite alternate;
}

.game-card-stars {
    position: absolute;
    inset: 12px 8px 72px;
    opacity: 0;
    background-image:
        radial-gradient(circle at 8% 20%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 19% 64%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 36% 28%, #fff 0 1.3px, transparent 2px),
        radial-gradient(circle at 54% 15%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 70% 48%, #fff 0 1.2px, transparent 2px),
        radial-gradient(circle at 88% 24%, #fff 0 1px, transparent 1.8px);
    animation: game-card-stars-cycle 24s ease-in-out infinite alternate;
}

.game-card-badges {
    position: absolute;
    z-index: 8;
    top: 14px;
    right: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.game-card-copy {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 42px 16px 16px;
    background: linear-gradient(180deg, transparent, rgb(8 15 29 / .94) 58%);
}

.game-card-art {
    position: absolute;
    z-index: 3;
    inset: 24px 10px 70px;
    pointer-events: none;
}

.art-player,
.art-rider {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    border: 3px solid #172033;
    border-radius: 999px;
    color: #172033;
    background: #d9ff5f;
    box-shadow: 0 9px 20px rgb(15 23 42 / .28);
    font-size: 9px;
    font-weight: 950;
}

[data-game-art="stair-king-solo"] .game-card-sky::after {
    background:
        repeating-linear-gradient(90deg, #111a2e 0 28px, #1d2b43 28px 31px);
}

.art-step {
    position: absolute;
    width: 74px;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, #94a3b8, #fff, #a3e635);
    box-shadow: 0 8px 14px rgb(15 23 42 / .3);
}
.art-step-1 { right: 8%; bottom: 5%; }
.art-step-2 { right: 31%; bottom: 27%; }
.art-step-3 { right: 9%; bottom: 49%; }
.art-step-4 { right: 34%; bottom: 71%; }
[data-game-art="stair-king-solo"] .art-player {
    right: 46%;
    bottom: 38%;
    width: 34px;
    height: 34px;
    border: 0;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 0 18px rgb(96 165 250 / .55), 0 9px 20px rgb(15 23 42 / .28);
    animation: game-art-hop 1.7s ease-in-out infinite;
}
[data-game-art="stair-king-solo"] .art-player b {
    position: relative;
    z-index: 2;
    font-size: 10px;
}
.art-player-crown {
    position: absolute;
    z-index: 1;
    top: -11px;
    left: 5px;
    width: 24px;
    height: 15px;
    background: #fbbf24;
    clip-path: polygon(0 100%, 5% 24%, 34% 65%, 50% 0, 69% 65%, 96% 20%, 100% 100%);
}

[data-game-art="fly-pick"] .game-card-sky::after {
    background: linear-gradient(180deg, rgb(47 105 87 / .44), #173d39);
}
.art-pipe {
    position: absolute;
    right: 14%;
    width: 52px;
    border: 3px solid #31520f;
    background: linear-gradient(90deg, #4d7c0f, #a3e635 38%, #65a30d);
    box-shadow: inset 7px 0 rgb(255 255 255 / .22);
}
.art-pipe::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -4px;
    left: -8px;
    height: 17px;
    border: 3px solid #31520f;
    background: #84cc16;
}
.art-pipe-top { top: -28px; height: 64px; }
.art-pipe-bottom { bottom: -30px; height: 72px; }
.art-pipe-bottom::after { top: -4px; bottom: auto; }
.art-flyer {
    position: absolute;
    top: 46%;
    left: 24%;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 3px solid #172033;
    border-radius: 50%;
    color: #172033;
    background: linear-gradient(145deg, #efffb0, #a3e635);
    box-shadow: 0 8px 12px rgb(15 23 42 / .28);
    font-size: 10px;
    font-weight: 950;
    animation: game-art-fly 1.25s ease-in-out infinite;
}
.art-flyer::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 9px;
    width: 7px;
    height: 7px;
    border: 2px solid #172033;
    border-radius: 50%;
    background: #fff;
}
.art-flyer > i {
    position: absolute;
    right: -13px;
    width: 15px;
    height: 12px;
    background: #fb923c;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.art-fly-wing {
    position: absolute;
    bottom: 4px;
    left: -9px;
    width: 25px;
    height: 15px;
    border-radius: 60% 35% 55% 45%;
    background: #84cc16;
    transform: rotate(-20deg);
}
.art-flyer b { position: relative; z-index: 2; }
.art-speed-line,
.art-run-line {
    position: absolute;
    left: 4%;
    height: 3px;
    border-radius: 99px;
    background: rgb(255 255 255 / .76);
}
.art-speed-line-1 { top: 41%; width: 19%; }
.art-speed-line-2 { top: 62%; width: 12%; }

[data-game-art="sum10-orchard"] .game-card-sky {
    background:
        radial-gradient(circle at 16% 20%, rgb(255 255 255 / .7) 0 3px, transparent 4px),
        linear-gradient(145deg, #ffd5b5, #fff1c9);
    animation: none;
}
[data-game-art="sum10-orchard"] .game-card-sky::after { background: #f1b678; box-shadow: 0 -3px 0 #fff2; }
[data-game-art="sum10-orchard"] .game-card-sun,
[data-game-art="sum10-orchard"] .game-card-moon,
[data-game-art="sum10-orchard"] .game-card-stars { display: none; }
[data-game-art="sum10-orchard"] .game-card-art {
    top: 36px;
    right: 14%;
    bottom: 80px;
    left: 14%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 7px;
}
.art-apple {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 42% 45% 46% 40%;
    color: #fff;
    background: linear-gradient(145deg, #ff7048, #cf2f22);
    box-shadow: inset -3px -4px #8f1f1c55, 0 5px 8px #9a341244;
    font-size: 13px;
    font-weight: 950;
}
.art-selection {
    position: absolute;
    inset: 40% -7px -5px 30%;
    display: grid;
    place-items: end center;
    border: 3px solid #2563eb;
    border-radius: 10px;
    padding: 4px;
    color: #172033;
    background: rgb(217 249 157 / .28);
    font-size: 10px;
    font-weight: 950;
}

[data-game-art="solo-2048"] .game-card-sky {
    background: linear-gradient(145deg, #faf8ef, #e8def8);
    animation: none;
}
[data-game-art="solo-2048"] .game-card-sky::after { background: #bbada0; box-shadow: none; }
[data-game-art="solo-2048"] .game-card-sun,
[data-game-art="solo-2048"] .game-card-moon,
[data-game-art="solo-2048"] .game-card-stars { display: none; }
[data-game-art="solo-2048"] .game-card-art {
    top: 42px;
    right: 19%;
    bottom: 85px;
    left: 19%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    border: 8px solid #bbada0;
    border-radius: 16px;
    background: #bbada0;
    box-shadow: 0 16px 26px rgb(60 58 50 / .22);
}
.art-tile {
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
}
.tile-2 { color: #776e65; background: #eee4da; }
.tile-4 { color: #776e65; background: #ede0c8; }
.tile-8 { background: #f2b179; }
.tile-16 { background: #f59563; animation: game-art-tile-pop 1.8s ease-in-out infinite; }

[data-game-art="hill-rider-pick"] .game-card-sky::after { display: none; }
.art-hill {
    position: absolute;
    bottom: -78px;
    width: 230px;
    height: 170px;
    border: 4px solid #d9ff5f;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(#2d5248, #0d2430);
}
.art-hill-back { right: -42px; opacity: .74; transform: scale(.82); }
.art-hill-front { left: -48px; }
[data-game-art="hill-rider-pick"] .art-rider {
    left: 43%;
    bottom: 49%;
    width: 36px;
    height: 36px;
    animation: game-art-rider 2.1s ease-in-out infinite;
}
[data-game-art="hill-rider-pick"] .art-rider b {
    position: absolute;
    top: 9px;
    left: 8px;
    color: #fff;
    font-size: 9px;
}
.art-rider-eye {
    position: absolute;
    top: 9px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #172033;
}
.art-rider-mouth {
    position: absolute;
    right: 7px;
    bottom: 9px;
    width: 14px;
    height: 3px;
    border-radius: 99px;
    background: #172033;
}
.art-flow {
    position: absolute;
    top: 18%;
    left: 14%;
    border-radius: 999px;
    padding: 5px 9px;
    color: #d9ff5f;
    background: rgb(23 32 51 / .78);
    font-size: 9px;
    font-weight: 950;
}

[data-game-art="run-pick"] .game-card-sky::after {
    border-radius: 0;
    background:
        repeating-linear-gradient(90deg, #162640 0 38px, #233954 38px 42px);
}
.art-runner {
    position: absolute;
    left: 25%;
    bottom: 21%;
    width: 54px;
    height: 72px;
    filter: drop-shadow(0 9px 9px rgb(15 23 42 / .32));
    animation: game-art-run .55s ease-in-out infinite alternate;
}
.art-runner-body {
    position: absolute;
    z-index: 4;
    top: 28px;
    left: 14px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    color: #d9ff5f;
    background: linear-gradient(145deg, #243757, #0f172a);
    font-size: 10px;
    font-weight: 950;
}
.art-runner-head {
    position: absolute;
    z-index: 5;
    top: 4px;
    left: 17px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 68% 56%, #172033 0 1.5px, transparent 2px),
        linear-gradient(160deg, #172033 0 43%, #ffd2ad 44%);
}
.art-runner-scarf {
    position: absolute;
    z-index: 2;
    top: 29px;
    left: -22px;
    width: 43px;
    height: 18px;
    background: #fb6b35;
    clip-path: polygon(100% 10%, 0 30%, 76% 100%);
}
.art-runner-arm,
.art-runner-leg {
    position: absolute;
    z-index: 3;
    display: block;
    border-radius: 99px;
    background: #172033;
    transform-origin: 50% 0;
}
.art-runner-arm { top: 34px; width: 7px; height: 27px; }
.art-runner-arm-back { left: 13px; transform: rotate(42deg); }
.art-runner-arm-front { left: 38px; transform: rotate(-45deg); }
.art-runner-leg { top: 51px; width: 8px; height: 30px; }
.art-runner-leg-back { left: 19px; transform: rotate(38deg); }
.art-runner-leg-front { left: 34px; transform: rotate(-42deg); }
.art-run-line-1 { top: 41%; width: 18%; }
.art-run-line-2 { top: 59%; width: 12%; }
.art-obstacle {
    position: absolute;
    right: 13%;
    bottom: 15%;
    width: 42px;
    height: 57px;
    border: 3px solid #7f1d1d;
    border-radius: 7px;
    background: repeating-linear-gradient(-45deg, #f97316 0 8px, #fff1f2 8px 14px);
    box-shadow: 0 8px 12px rgb(15 23 42 / .28);
}
.art-coin {
    position: absolute;
    top: 24%;
    right: 28%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 3px solid #fff7ad;
    border-radius: 50%;
    color: #854d0e;
    background: #facc15;
    font-size: 9px;
    font-weight: 950;
}
.art-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; }

.art-animal-pop {
    position: absolute;
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 25px;
    font-size: 45px;
    box-shadow: 0 8px 0 #6b4660, 0 12px 22px rgb(70 54 77 / .32);
    animation: game-art-animal 2.2s ease-in-out infinite alternate;
}
.art-animal-bunny { left: 17%; top: 28%; z-index: 2; background: #ff8fac; transform: rotate(-10deg); }
.art-animal-fox { left: 39%; top: 18%; z-index: 3; background: #ffae5a; transform: rotate(5deg) scale(1.08); animation-delay: -.8s; }
.art-animal-panda { right: 17%; top: 31%; z-index: 2; background: #94a1b8; transform: rotate(11deg); animation-delay: -1.4s; }
.art-animal-spark { position: absolute; z-index: 5; left: 50%; top: 68%; color: white; font-size: 18px; font-weight: 950; text-shadow: 0 3px 0 #ff477a, 0 0 14px #ff477a; transform: translateX(-50%) rotate(-3deg); animation: game-art-tile-pop 1.6s ease infinite; }

@keyframes game-card-sky-cycle {
    0%, 22% { filter: brightness(1) saturate(1); }
    78%, 100% { filter: brightness(.43) saturate(.78) hue-rotate(12deg); }
}
@keyframes game-card-sun-cycle {
    0%, 25% { opacity: 1; transform: translate(0, 0); }
    80%, 100% { opacity: 0; transform: translate(-90px, 35px); }
}
@keyframes game-card-moon-cycle {
    0%, 25% { opacity: 0; transform: translate(35px, 28px); }
    78%, 100% { opacity: 1; transform: translate(78px, -5px); }
}
@keyframes game-card-stars-cycle {
    0%, 28% { opacity: 0; }
    76%, 100% { opacity: .9; }
}
@keyframes game-art-hop {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(22px, -25px); }
}
@keyframes game-art-fly {
    0%, 100% { transform: translateY(-6px) rotate(-4deg); }
    50% { transform: translateY(9px) rotate(5deg); }
}
@keyframes game-art-tile-pop {
    0%, 70%, 100% { transform: scale(1); }
    82% { transform: scale(1.13); }
}
@keyframes game-art-rider {
    0%, 100% { transform: translate(-28px, 10px) rotate(-14deg); }
    50% { transform: translate(30px, -25px) rotate(15deg); }
}
@keyframes game-art-run {
    from { transform: translateY(0) rotate(-3deg); }
    to { transform: translateY(-6px) rotate(3deg); }
}
@keyframes game-art-animal {
    to { margin-top: -8px; filter: brightness(1.08); }
}

@media (max-width: 639px) {
    .game-card-hero { min-height: 224px; }
}

@media (prefers-reduced-motion: reduce) {
    .game-card-sky,
    .game-card-sun,
    .game-card-moon,
    .game-card-stars,
    .game-card-art * {
        animation: none !important;
    }
}