.wto-game-page main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.75rem 0 2.5rem; }
.wto-game-controls[hidden], .wto-game-over[hidden], .wto-game-ready[hidden], .wto-stage-preview[hidden], .wto-game-name-form[hidden], .wto-game-pending[hidden], .wto-falling-preview[hidden], .wto-falling-name-form[hidden], [data-falling-over][hidden], [data-falling-ready][hidden], [data-falling-pending][hidden], [data-rally-controls][hidden], [data-rally-over][hidden], [data-rally-ready][hidden], [data-rally-preview][hidden], [data-rally-checkpoint][hidden], [data-rally-name-form][hidden], [data-rally-pending][hidden], [data-carnival-controls][hidden], [data-carnival-over][hidden], [data-carnival-ready][hidden], [data-carnival-preview][hidden], [data-carnival-name-form][hidden], [data-carnival-pending][hidden] { display: none !important; }
.wto-game-intro { margin: 0 auto 1.25rem; text-align: center; }
.wto-game-intro h1 { margin: .2rem 0 .4rem; color: var(--wto-text); font-size: clamp(2rem, 5vw, 3.4rem); }
.wto-game-intro p:not(.wto-eyebrow) { margin: 0; color: var(--wto-muted); }
.wto-balloon-game, .wto-game-leaderboard { margin: 0 auto 1.25rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 52%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 84%, #000); width: min(100%, 1120px);max-width: none;}
.wto-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.wto-game-levels, .wto-game-board-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.wto-game-levels button, .wto-game-board-tabs button, .wto-game-controls button, .wto-game-sound button, .wto-game-leaderboard > button, .wto-game-name-form button { min-height: 2.35rem; padding: .45rem .75rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 65%, transparent); border-radius: .55rem; color: var(--wto-text); background: transparent; font: inherit; cursor: pointer; }
.wto-game-levels button.is-active, .wto-game-board-tabs button.is-active, .wto-game-controls button:first-child, .wto-game-name-form button { border-color: #ff6d79; color: #fff; background: #e94f65; }
.wto-game-hud { display: flex; gap: .85rem; flex-wrap: wrap; color: var(--wto-muted); font-size: .82rem; }
.wto-game-hud b { color: var(--wto-text); }
.wto-balloon-stage { position: relative; min-height: 430px; overflow: hidden; border-radius: .85rem; background: linear-gradient(#62c6f4 0%, #bfeeff 62%, #e5f5bc 62%, #c8e98d 100%); box-shadow: inset 0 -10px 20px rgb(42 104 50 / 12%); }
.wto-falling-stage { position: relative; min-height: 430px; overflow: hidden; border-radius: .85rem; background: linear-gradient(#ffeab2 0%, #d9f2ff 64%, #a7dc7b 64%, #75b85e 100%); box-shadow: inset 0 -10px 20px rgb(42 104 50 / 14%); }
.wto-falling-stage::before { position: absolute; inset: auto 0 23%; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 22px, rgb(255 255 255 / 40%) 22px 34px); content: ""; }
.wto-falling-sun { position: absolute; top: 1.1rem; right: 7%; color: #ffbd3e; font-size: 3.4rem; text-shadow: 0 2px 0 rgb(255 255 255 / 42%); }.wto-falling-garden-pal { position: absolute; z-index: 1; right: 7%; bottom: 1.2rem; font-size: 4.3rem; filter: drop-shadow(0 5px 4px rgb(34 80 38 / 17%)); }
.wto-falling-preview { position: absolute; z-index: 3; inset: 0; }.wto-falling-preview-word { position: absolute; top: 14%; left: 12%; padding: .55rem .85rem; border: 3px solid #b9783c; border-radius: .55rem; color: #fff8dd; background: #a96132; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 17%), 0 6px 10px rgb(72 42 23 / 18%); font-weight: 800; }.wto-falling-preview-word-two { top: 39%; right: 13%; left: auto; background: #8d4f2b; }
.wto-falling-word { position: absolute; z-index: 2; min-width: 4.8rem; padding: .52rem .76rem; border: 3px solid #b9783c; border-radius: .55rem; color: #fff8dd; background: linear-gradient(145deg, #c77a3d, #92512d); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 16%), 0 6px 10px rgb(72 42 23 / 20%); font-weight: 800; text-align: center; }.wto-falling-word.is-smashed { animation: wto-falling-smash .22s ease-out forwards; }@keyframes wto-falling-smash { to { opacity: 0; transform: rotate(12deg) scale(1.5); } }
.wto-rally-stage { position: relative; min-height: 430px; overflow: hidden; border-radius: .85rem; background: radial-gradient(circle at 20% 14%, #4f3d9a 0, transparent 23%), linear-gradient(#171235 0%, #291b4f 48%, #0d0e24 48%); }.wto-rally-stars { position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:42px 42px;opacity:.45; }.wto-rally-road { position:absolute;right:13%;bottom:-5%;left:13%;height:62%;background:linear-gradient(90deg,#26233d 0 48%,#f6d64b 48% 52%,#26233d 52%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:.98; }.wto-rally-road::after{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 28px,#fff 28px 41px,transparent 41px 70px);content:"";opacity:.68;}
.wto-rally-preview { position:absolute;z-index:3;inset:0; }.wto-rally-checkpoint { position:absolute;z-index:4;top:17%;left:50%;min-width:230px;transform:translateX(-50%);padding:1rem 1.3rem;border:2px solid #53e9f0;border-radius:.85rem;color:#e9ffff;background:rgb(11 14 40 / 88%);box-shadow:0 0 22px rgb(83 233 240 / 37%);text-align:center;}.wto-rally-checkpoint span{display:block;color:#f6d64b;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;}.wto-rally-checkpoint strong{display:block;margin:.25rem 0;font-size:clamp(1.4rem,4vw,2.1rem);}.wto-rally-checkpoint em{display:block;min-height:1.25rem;color:#ff6cbd;font-style:normal;letter-spacing:.12em;}.wto-rally-car{position:absolute;z-index:3;bottom:14%;left:10%;width:5.8rem;height:2.45rem;border-radius:1rem .75rem .45rem .45rem;background:#ff4e89;box-shadow:inset 0 -8px 0 rgb(83 17 72 / 25%),0 0 18px rgb(255 78 137 / 55%);transition:transform .25s ease;}.wto-rally-car::before{position:absolute;top:-1rem;left:1.6rem;width:2.7rem;height:1.25rem;border-radius:1rem 1rem 0 0;background:#56eaf0;content:"";}.wto-rally-car i,.wto-rally-car b{position:absolute;bottom:-.4rem;width:1.2rem;height:1.2rem;border:3px solid #10111f;border-radius:50%;background:#f6d64b;box-sizing:border-box;}.wto-rally-car i{left:.7rem}.wto-rally-car b{right:.7rem}
.wto-balloon-stage::before, .wto-balloon-stage::after { position: absolute; z-index: 0; content: ""; border-radius: 50%; opacity: .52; filter: blur(1px); }
.wto-balloon-stage::before { width: 100px; height: 38px; top: 65px; left: 9%; background: #fff; box-shadow: 145px 55px 0 #fff, 460px 4px 0 #fff, 690px 118px 0 #fff; }
.wto-stage-preview { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.wto-preview-balloon { position: absolute; z-index: 1; display: grid; width: 4.6rem; height: 5.25rem; place-items: center; border-radius: 50% 50% 46% 46%; color: #fff; background: #ef5c73; box-shadow: inset -10px -12px 0 rgb(0 0 0 / 12%), inset 10px 10px 0 rgb(255 255 255 / 18%), 0 8px 12px rgb(44 74 100 / 19%); font-size: 1.3rem; font-weight: 800; text-shadow: 0 1px 1px rgb(0 0 0 / 20%); }
.wto-preview-balloon::after { position: absolute; top: calc(100% + 2px); width: 1px; height: 70px; background: rgb(39 67 79 / 45%); content: ""; }
.wto-preview-balloon-one { bottom: 3.5rem; left: 12%; }
.wto-preview-balloon-two { top: 4.5rem; right: 15%; background: #8265e6; }
.wto-preview-balloon-three { right: 31%; bottom: 8.5rem; background: #2fbb9b; }
.wto-stage-preview-card { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(88%, 420px); transform: translate(-50%, -50%); padding: 1.35rem 1.5rem; border-radius: 1rem; color: #183444; background: rgb(255 255 255 / 93%); text-align: center; box-shadow: 0 14px 36px rgb(13 66 93 / 24%); }
.wto-stage-preview-card h2 { margin: .15rem 0 .4rem; font-size: clamp(1.45rem, 4vw, 2rem); }
.wto-stage-preview-card p:not(.wto-eyebrow) { margin: 0; line-height: 1.5; }
.wto-stage-preview-card button { min-height: 2.75rem; margin-top: 1rem; padding: .55rem 1rem; border: 0; border-radius: .6rem; color: #fff; background: #e94f65; font: inherit; font-weight: 800; cursor: pointer; }
.wto-grass-buddy { position: absolute; z-index: 2; bottom: 1.45rem; left: 5.5%; width: 4.9rem; height: 4.1rem; border-radius: 48% 48% 40% 40%; background: #b87b4f; box-shadow: inset -9px -9px 0 rgb(79 48 29 / 13%), 0 5px 8px rgb(46 90 40 / 18%); }
.wto-buddy-ear { position: absolute; top: -.7rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #9f643e; }.wto-buddy-ear-left { left: .25rem; }.wto-buddy-ear-right { right: .25rem; }
.wto-buddy-face { position: absolute; top: 1.1rem; left: 50%; width: 2.9rem; height: 2.2rem; transform: translateX(-50%); border-radius: 48%; background: #e9bd8b; }.wto-buddy-face::before, .wto-buddy-face::after { position: absolute; top: .55rem; width: .28rem; height: .28rem; border-radius: 50%; background: #3d2a22; content: ""; }.wto-buddy-face::before { left: .62rem; }.wto-buddy-face::after { right: .62rem; }
.wto-buddy-face i { position: absolute; top: .98rem; left: 50%; width: .52rem; height: .4rem; transform: translateX(-50%); border-radius: 50% 50% 45% 45%; background: #3d2a22; }.wto-buddy-face b { position: absolute; top: 1.32rem; left: 50%; width: .65rem; height: .35rem; transform: translateX(-50%); border-bottom: 2px solid #3d2a22; border-radius: 0 0 50% 50%; }
.wto-grass-car { position: absolute; z-index: 2; right: 5.5%; bottom: 1.45rem; width: 7.4rem; height: 2.55rem; border-radius: .65rem .85rem .45rem .45rem; background: #e94f65; box-shadow: inset 0 -8px 0 rgb(101 32 45 / 15%), 0 5px 8px rgb(46 90 40 / 18%); }.wto-grass-car::before { position: absolute; top: -1.4rem; left: 1.65rem; width: 3.85rem; height: 1.7rem; border-radius: .9rem .9rem 0 0; background: #e94f65; content: ""; }
.wto-car-window { position: absolute; z-index: 1; top: -1.15rem; width: 1.55rem; height: 1.05rem; background: #bfeeff; transform: skew(-12deg); }.wto-car-window-left { left: 2rem; }.wto-car-window-right { left: 3.75rem; border-left: 2px solid #e94f65; }.wto-car-wheel { position: absolute; bottom: -.55rem; width: 1.45rem; height: 1.45rem; border: .28rem solid #273343; border-radius: 50%; background: #bbc6cd; box-sizing: border-box; }.wto-car-wheel-left { left: .9rem; }.wto-car-wheel-right { right: .85rem; }.wto-grass-car i { position: absolute; top: .5rem; right: .15rem; width: .42rem; height: .62rem; border-radius: .2rem; background: #ffe47a; }
.wto-game-ready, .wto-game-over { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(92%, 520px); transform: translate(-50%, -50%); padding: 1.35rem 1.45rem; border-radius: 1rem; color: #183444; background: rgb(255 255 255 / 94%); text-align: center; box-shadow: 0 14px 36px rgb(13 66 93 / 24%); }
.wto-game-over h2 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.wto-game-over > p { margin: 0; line-height: 1.5; }
.wto-game-name-form { max-width: 420px; margin: .9rem auto .8rem; text-align: left; }
.wto-game-name-form label { display: grid; gap: .5rem; font-size: .95rem; font-weight: 700; }
.wto-game-name-form input { display: block; width: 100% !important; min-height: 3.15rem; box-sizing: border-box; padding: .75rem .9rem; border: 1px solid #87b5c9; border-radius: .65rem; color: #183444; background: #fff; box-shadow: inset 0 1px 2px rgb(18 52 68 / 8%); font: inherit; }
.wto-game-name-form input:focus { border-color: #e94f65; outline: 3px solid rgb(233 79 101 / 18%); }
.wto-game-over-actions { display: flex; align-items: center; justify-content: center; gap: .65rem; flex-wrap: wrap; }
.wto-game-over-actions button { width: auto; min-width: 132px; min-height: 2.6rem; margin: 0; padding: .5rem .9rem; border: 1px solid #87b5c9; border-radius: .6rem; color: #183444; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.wto-game-over-actions [data-game-submit] { border-color: #e94f65; color: #fff; background: #e94f65; }
.wto-game-over-actions [data-game-replay] { min-width: 118px; }
.wto-balloon { position: absolute; z-index: 2; display: grid; width: 4.45rem; height: 5.1rem; place-items: center; border-radius: 50% 50% 46% 46%; color: #fff; background: var(--balloon-color, #f25e72); box-shadow: inset -10px -12px 0 rgb(0 0 0 / 12%), inset 10px 10px 0 rgb(255 255 255 / 18%), 0 6px 10px rgb(44 74 100 / 17%); font-size: 1.3rem; font-weight: 800; text-shadow: 0 1px 1px rgb(0 0 0 / 18%); user-select: none; }
.wto-balloon::before { position: absolute; bottom: -11px; width: 0; height: 0; border-top: 14px solid var(--balloon-color, #f25e72); border-right: 7px solid transparent; border-left: 7px solid transparent; content: ""; }
.wto-balloon::after { position: absolute; top: calc(100% + 2px); width: 1px; height: 70px; background: rgb(39 67 79 / 45%); content: ""; }
.wto-balloon.is-pop { animation: wto-balloon-pop .24s ease-out forwards; }
@keyframes wto-balloon-pop { to { opacity: 0; transform: scale(1.55); } }
.wto-game-controls, .wto-game-sound { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.wto-game-controls { margin: .85rem 0 0; }
.wto-game-toolbar .wto-game-controls { margin: 0 0 0 auto; }
.wto-game-help { margin: .8rem 0; color: var(--wto-muted); font-size: .82rem; text-align: center; }
.wto-game-sound { padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--wto-muted) 35%, transparent); color: var(--wto-muted); font-size: .82rem; }
.wto-game-leaderboard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; width: min(100%, 1120px);max-width: none;}
.wto-game-leaderboard h2 { margin: .2rem 0; color: var(--wto-text); font-size: 1.25rem; }
.wto-game-leaderboard p:not(.wto-eyebrow) { margin: 0; color: var(--wto-muted); font-size: .84rem; }
.wto-game-leaderboard ol { grid-column: 1 / -1; display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: board; }
.wto-game-leaderboard li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .65rem .75rem; border-radius: .55rem; color: var(--wto-muted); background: color-mix(in srgb, var(--wto-accent) 7%, transparent); counter-increment: board; }
.wto-game-leaderboard li::before { color: var(--wto-accent); content: "#" counter(board); font-weight: 800; }
.wto-game-leaderboard li strong { color: var(--wto-text); overflow-wrap: anywhere; }
.wto-game-leaderboard li span { color: var(--wto-accent); font-weight: 800; }
.wto-game-leaderboard li small { font-size: .75rem; }
.wto-game-leaderboard > button { grid-column: 1 / -1; justify-self: center; }
.wto-games-hub main { min-height: calc(100vh - 13rem); }
.wto-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem auto; width: min(100%, 1832px, 1120px);max-width: none;}
.wto-game-tile { position: relative; display: grid; grid-template-columns: minmax(190px, .95fr) minmax(0, 1fr); min-height: 245px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-muted) 52%, transparent); border-radius: 1rem; color: inherit; background: color-mix(in srgb, var(--wto-bg) 84%, #000); text-decoration: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, background .28s ease; }
.wto-game-tile-preview { position: relative; overflow: hidden; min-height: 100%; background: linear-gradient(#62c6f4 0%, #bfeeff 62%, #e5f5bc 62%, #c8e98d 100%); transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .28s ease; }
.wto-game-tile-preview .wto-preview-balloon { transform: scale(.7); transform-origin: center; }
.wto-game-tile-preview .wto-preview-balloon-one { bottom: 1.6rem; left: 4%; }
.wto-game-tile-preview .wto-preview-balloon-two { top: 1rem; right: 4%; }
.wto-game-tile-preview .wto-preview-balloon-three { right: 30%; bottom: 5rem; }
.wto-tile-cloud { position: absolute; width: 75px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / 65%); }
.wto-tile-cloud-one { top: 19%; left: 17%; }.wto-tile-cloud-two { top: 39%; right: 18%; }
.wto-game-tile-copy { display: flex; flex-direction: column; justify-content: center; padding: 1.3rem; }
.wto-game-tile-play { position: absolute; z-index: 7; top: 50%; left: 50%; display: grid; width: 4.25rem; height: 4.25rem; place-items: center; border: 4px solid rgb(255 255 255 / 92%); border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 27%, #67d9ff 0 10%, #079bc9 37%, #075e9d 72%); box-shadow: 0 0 0 4px rgb(8 51 91 / 26%), 0 12px 20px rgb(10 31 60 / 35%); pointer-events: none; transform: translate(-50%, -50%); animation: wto-game-play-pulse 2.2s ease-in-out infinite; }.wto-game-tile-play::after { margin-left: .22rem; border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; border-left: 1rem solid currentColor; content: ""; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 22%)); }.wto-falling-tile .wto-game-tile-play { background: radial-gradient(circle at 35% 27%, #9ff7ff 0 10%, #437de1 38%, #172d78 74%); }.wto-rally-tile .wto-game-tile-play { background: radial-gradient(circle at 35% 27%, #ff8fc1 0 10%, #df357f 39%, #5c1bb3 76%); }.wto-carnival-tile .wto-game-tile-play { background: radial-gradient(circle at 35% 27%, #fff2a7 0 10%, #ef4b57 40%, #961a4b 76%); }.wto-game-tile:hover .wto-game-tile-play { animation-duration: .85s; transform: translate(-50%, -50%) scale(1.08); }.wto-game-tile:hover .wto-game-tile-play::after { transform: scale(1.1); }@keyframes wto-game-play-pulse { 0%,100% { box-shadow: 0 0 0 4px rgb(8 51 91 / 26%),0 10px 19px rgb(10 31 60 / 28%); } 50% { box-shadow: 0 0 0 12px rgb(57 190 255 / 0%),0 15px 25px rgb(10 31 60 / 42%); } }@media (prefers-reduced-motion: reduce) { .wto-game-tile-play { animation: none; } }
.wto-game-tile-copy h2 { margin: .25rem 0 .45rem; color: var(--wto-text); font-size: 1.5rem; }.wto-game-tile-copy p:not(.wto-eyebrow) { margin: 0; color: var(--wto-muted); line-height: 1.55; }.wto-game-tile-copy > span { margin-top: 1rem; color: var(--wto-accent); font-weight: 800; }.wto-game-tile-copy > span b { font-size: 1.1rem; }
.wto-game-tile:not(.wto-game-tile-soon)::after { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 28%, rgb(255 255 255 / 18%) 49%, transparent 70%); content: ""; opacity: 0; pointer-events: none; transform: translateX(-115%); transition: transform .6s ease, opacity .25s ease; }
.wto-game-tile:not(.wto-game-tile-soon):hover { transform: translateY(-6px) scale(1.012); border-color: var(--wto-accent); background: color-mix(in srgb, var(--wto-accent) 8%, var(--wto-bg)); box-shadow: 0 18px 30px rgb(15 35 47 / 20%); }
.wto-game-tile:not(.wto-game-tile-soon):hover .wto-game-tile-preview { filter: saturate(1.08) brightness(1.04); transform: scale(1.045); }.wto-game-tile:not(.wto-game-tile-soon):hover::after { opacity: 1; transform: translateX(115%); }.wto-game-tile:not(.wto-game-tile-soon):hover .wto-game-tile-copy > span { text-decoration: underline; text-underline-offset: .2rem; }
.wto-game-tile-soon { grid-template-columns: 1fr; place-items: center; min-height: 245px; border-style: dashed; text-align: center; }.wto-game-tile-soon-mark { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 50%; color: var(--wto-accent); background: color-mix(in srgb, var(--wto-accent) 12%, transparent); font-size: 2rem; }
.wto-rally-tile .wto-game-tile-preview { background: radial-gradient(circle at 24% 24%, #7d46ec 0 2px, transparent 3px), radial-gradient(circle at 70% 17%, #63e8ff 0 1px, transparent 2px), linear-gradient(180deg, #120a35 0%, #25124d 52%, #0d1436 53%, #090d20 100%); }.wto-rally-tile-road { position: absolute; bottom: 0; left: 14%; width: 72%; height: 50%; clip-path: polygon(38% 0,62% 0,100% 100%,0 100%); background: repeating-linear-gradient(90deg, transparent 0 42%, rgb(255 241 120 / 90%) 43% 57%, transparent 58% 100%), linear-gradient(90deg, #1b2144, #050817); }.wto-rally-tile-car { position: absolute; z-index: 1; bottom: 1.4rem; left: 50%; width: 4.7rem; height: 2.2rem; border: 3px solid #62e8ff; border-radius: 55% 55% 28% 28%; background: linear-gradient(135deg, #ff4c8b, #632bd6); box-shadow: 0 0 18px #5ee6ff; transform: translateX(-50%); }.wto-rally-tile-car::before, .wto-rally-tile-car::after { position: absolute; bottom: -.55rem; width: .7rem; height: .7rem; border-radius: 50%; background: #050816; content: ""; }.wto-rally-tile-car::before { left: .45rem; }.wto-rally-tile-car::after { right: .45rem; }.wto-rally-tile-star { position: absolute; top: 18%; left: 21%; color: #fff29a; font-size: 1.35rem; text-shadow: 0 0 12px #fff29a; }

/* Game 02: a separate moonlit mountain world. */
.wto-falling-stage { background: radial-gradient(circle at 76% 16%, rgb(245 245 208 / 18%) 0 2%, transparent 2.5%), linear-gradient(180deg, #101b43 0%, #263a71 56%, #2a4d51 57%, #1d3f3d 100%); }.wto-falling-stage::after { position: absolute; z-index: 0; right: 0; bottom: 22%; left: 0; height: 48%; background: linear-gradient(145deg, transparent 0 19%, #182f49 19.2% 36%, transparent 36.2%), linear-gradient(215deg, transparent 0 20%, #132943 20.2% 39%, transparent 39.2%), linear-gradient(145deg, transparent 0 45%, #1e3b58 45.2% 64%, transparent 64.2%); content: ""; opacity: .95; }.wto-falling-stage::before { z-index: 1; bottom: 22%; background: repeating-linear-gradient(90deg, transparent 0 22px, rgb(166 229 239 / 32%) 22px 34px); }.wto-falling-sun { z-index: 2; top: 1.6rem; right: 8%; width: 3.15rem; height: 3.15rem; border-radius: 50%; color: transparent; background: #fff5c7; box-shadow: 0 0 0 .45rem rgb(255 245 199 / 8%), 0 0 26px rgb(255 245 199 / 44%); }.wto-falling-sun::after { position: absolute; top: -.15rem; right: -.6rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #15284f; content: ""; }.wto-falling-garden-pal { z-index: 3; filter: drop-shadow(0 6px 5px rgb(0 0 0 / 34%)); }.wto-falling-preview, .wto-falling-word { z-index: 4; }

/* Game 03: an animated neon highway rather than a static road. */
.wto-rally-stage { isolation: isolate; min-height: 455px; background: radial-gradient(ellipse at 50% 28%, #674da0 0%, #251548 33%, #0b102b 70%); }.wto-rally-stage::before { position: absolute; z-index: 0; right: 0; bottom: 37%; left: 0; height: 32%; background: linear-gradient(145deg, transparent 0 14%, #202a58 14.4% 31%, transparent 31.4%), linear-gradient(215deg, transparent 0 15%, #17234d 15.4% 35%, transparent 35.4%), linear-gradient(145deg, transparent 0 47%, #263c66 47.4% 63%, transparent 63.4%); content: ""; opacity: .92; }.wto-rally-stage::after { position: absolute; z-index: 1; right: 0; bottom: 34%; left: 0; height: 13%; background: repeating-linear-gradient(90deg, #111735 0 22px, #28214c 23px 34px, #0b1025 35px 55px); box-shadow: 0 -10px 22px rgb(109 73 224 / 36%); content: ""; }.wto-rally-stars { z-index: 0; animation: wto-rally-stars 10s linear infinite; }.wto-rally-road { z-index: 2; right: 22%; bottom: -10%; left: 22%; height: 69%; background: linear-gradient(90deg, #20233f 0 47%, #ffd94d 47% 53%, #20233f 53%); box-shadow: 0 0 0 3px #ff5da7, 0 0 18px rgb(255 93 167 / 56%); }.wto-rally-road::after { background: repeating-linear-gradient(0deg, transparent 0 29px, rgb(255 255 255 / 94%) 30px 44px, transparent 45px 77px); opacity: .9; animation: wto-rally-road 1s linear infinite; }.wto-rally-stage:not(.is-paused) .wto-rally-road::after { animation-play-state: running; }.wto-rally-checkpoint { z-index: 7; top: 13%; }.wto-rally-car { z-index: 6; bottom: 8%; left: 50%; width: 6.8rem; height: 2.8rem; border: 3px solid #ffd84d; border-radius: 1.3rem 1.1rem .55rem .55rem; background: linear-gradient(135deg, #ff3f89, #922fe6); box-shadow: inset 0 -9px 0 rgb(78 13 85 / 28%), 0 0 23px rgb(255 67 151 / 70%); transform: translateX(-50%) !important; }.wto-rally-car::before { left: 1.9rem; width: 3rem; background: linear-gradient(135deg, #78fcff, #4e9cf7); }.wto-rally-car i, .wto-rally-car b { width: 1.35rem; height: 1.35rem; background: #12132a; border-color: #ffd94d; }.wto-rally-car i { left: .8rem; }.wto-rally-car b { right: .8rem; }.wto-rally-car::after { position: absolute; right: -1.1rem; bottom: .45rem; width: 1rem; height: .45rem; background: #68f7ff; box-shadow: 1.2rem 0 #68f7ff; content: ""; filter: blur(1px); }.wto-rally-stage.is-racing .wto-rally-car { animation: wto-rally-car .7s ease-in-out infinite alternate; }.wto-rally-stage.is-racing .wto-rally-road::after { animation-duration: .55s; }.wto-rally-stage.is-racing::after { animation: wto-rally-city 1.6s linear infinite; }.wto-rally-cone { position: absolute; z-index: 5; bottom: 24%; width: 1.1rem; height: 2.6rem; border-radius: .4rem .4rem .1rem .1rem; background: repeating-linear-gradient(0deg, #ff9c34 0 28%, #fff5d0 29% 47%); box-shadow: 0 0 10px rgb(255 167 57 / 56%); }.wto-rally-cone-one { left: 26%; }.wto-rally-cone-two { right: 26%; }.wto-rally-stage.is-racing .wto-rally-cone { animation: wto-rally-cone 1.15s linear infinite; }.wto-rally-cone-two { animation-delay: -.58s !important; }@keyframes wto-rally-road { to { background-position-y: 78px; } }@keyframes wto-rally-stars { 50% { opacity: .78; } }@keyframes wto-rally-car { to { margin-bottom: 5px; } }@keyframes wto-rally-city { to { background-position-x: -110px; } }@keyframes wto-rally-cone { from { transform: translateY(-65px) scale(.35); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(230px) scale(1.25); opacity: 0; } }
.wto-rally-stage::after { animation: wto-rally-city 1.6s linear infinite; }.wto-rally-car { animation: wto-rally-car .7s ease-in-out infinite alternate; }

/* Keep the Games hub previews faithful to their individual game worlds. */
.wto-falling-tile .wto-game-tile-preview { background: radial-gradient(circle at 78% 18%, #fff4c0 0 4%, transparent 4.7%), linear-gradient(180deg, #101b43 0%, #29457c 57%, #244c4a 58%, #1b3c39 100%); }.wto-falling-tile .wto-game-tile-preview::after { position: absolute; right: 0; bottom: 0; left: 0; height: 52%; background: linear-gradient(145deg, transparent 0 18%, #183450 18.5% 38%, transparent 38.5%), linear-gradient(215deg, transparent 0 25%, #112b47 25.5% 46%, transparent 46.5%), linear-gradient(145deg, transparent 0 53%, #24475a 53.5% 70%, transparent 70.5%); content: ""; }.wto-falling-tile .wto-falling-preview-word, .wto-falling-tile .wto-falling-preview-star { z-index: 1; }

/* A top-down racer makes the car direction unambiguous: it drives upward. */
.wto-rally-car { bottom: 7%; width: 3.85rem; height: 6.55rem; border-radius: 1.2rem 1.2rem .85rem .85rem; background: linear-gradient(90deg, #a729e1 0 20%, #ff488e 20% 80%, #a729e1 80%); box-shadow: inset 0 -10px 0 rgb(67 13 91 / 38%), 0 0 23px rgb(255 67 151 / 70%); }.wto-rally-car::before { top: 1.35rem; left: .58rem; width: 2.15rem; height: 2.55rem; border-radius: .85rem .85rem .5rem .5rem; background: linear-gradient(90deg, #377fe0, #86faff 49%, #377fe0 51%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 22%); }.wto-rally-car::after { top: -.36rem; right: auto; bottom: auto; left: .48rem; width: .55rem; height: .72rem; border-radius: .35rem; background: #fff7a1; box-shadow: 2.28rem 0 #fff7a1, 0 -.35rem 13px #fff3a1, 2.28rem -.35rem 13px #fff3a1; filter: none; }.wto-rally-car i, .wto-rally-car b { top: 3.85rem; bottom: auto; width: 1rem; height: 1.65rem; border: 3px solid #10111f; border-radius: .55rem; background: #ffd94d; }.wto-rally-car i { left: -.52rem; }.wto-rally-car b { right: -.52rem; }.wto-rally-car { transform: translateX(-50%) !important; }
/* Turbo Type Rally: a simple side-view race. Cars move horizontally; the track stays still. */
.wto-rally-stage { min-height: 430px; background: linear-gradient(#101842 0 57%, #4d8bb3 57.2% 59%, #386c43 59.2% 100%); }.wto-rally-stage::before { bottom: 43%; height: 32%; background: linear-gradient(145deg, transparent 0 19%, #263d67 19.3% 38%, transparent 38.3%), linear-gradient(215deg, transparent 0 14%, #1d345d 14.3% 37%, transparent 37.3%), linear-gradient(145deg, transparent 0 52%, #315077 52.3% 71%, transparent 71.3%); }.wto-rally-stage::after { display: none; }.wto-rally-stars { opacity: .65; animation: none; }.wto-rally-road { z-index: 2; right: 4%; bottom: 8%; left: 4%; height: 42%; clip-path: none; border: 4px solid #f5d55b; border-radius: .75rem; background: repeating-linear-gradient(0deg, #343942 0 24%, #dfe8ed 24.8% 26.5%, #343942 27% 49.5%, #dfe8ed 50.3% 52%, #343942 52.5% 75%, #dfe8ed 75.8% 77.5%, #343942 78% 100%); box-shadow: 0 0 0 3px #30323a, 0 8px 0 rgb(0 0 0 / 18%); }.wto-rally-road::after { top: 0; right: 2.2%; bottom: 0; left: auto; width: .95rem; background: repeating-conic-gradient(#fff 0 25%, #12131c 0 50%) 0 / 1rem 1rem; opacity: 1; animation: none; }.wto-rally-road::before { position: absolute; top: .45rem; right: 3.5rem; color: #fff7ba; content: "FINISH"; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }.wto-rally-checkpoint { z-index: 8; top: 11%; min-width: 220px; }.wto-rally-car, .wto-rally-ai { position: absolute; z-index: 6; left: var(--wto-racer-x, 4%); width: 5.7rem; height: 2.5rem; border: 3px solid #1c2230; border-radius: 1.1rem .65rem .6rem 1rem; box-sizing: border-box; transform: translateX(-5%) !important; transition: left .16s linear; }.wto-rally-car { bottom: 13.5%; border-color: #ffd84d; background: linear-gradient(135deg, #ff4f91, #942be3); box-shadow: inset 0 -7px 0 rgb(80 16 85 / 32%), 0 0 17px rgb(255 70 150 / 65%); animation: none; }.wto-rally-car::before { top: -.92rem; left: 1.55rem; width: 2.55rem; height: 1.15rem; border-radius: 1rem 1rem 0 0; background: linear-gradient(135deg, #64efff, #3186e6); }.wto-rally-car::after { top: .46rem; right: -.62rem; bottom: auto; left: auto; width: .65rem; height: .45rem; border-radius: 0 .3rem .3rem 0; background: #fff5a4; box-shadow: 0 0 13px #fff5a4; }.wto-rally-car i, .wto-rally-car b { top: auto; bottom: -.46rem; width: 1.15rem; height: 1.15rem; border: 3px solid #11131e; border-radius: 50%; background: #f6d64b; }.wto-rally-car i { left: .65rem; }.wto-rally-car b { right: .65rem; }.wto-rally-ai { background: linear-gradient(135deg, #2cc6dc, #2169d8); box-shadow: inset 0 -7px 0 rgb(8 36 93 / 30%); }.wto-rally-ai::before { position: absolute; top: -.72rem; left: 1.45rem; width: 2.35rem; height: .9rem; border-radius: .8rem .8rem 0 0; background: #b9eff7; content: ""; }.wto-rally-ai::after { position: absolute; top: .52rem; right: -.48rem; width: .45rem; height: .36rem; border-radius: 0 .25rem .25rem 0; background: #fff5a4; box-shadow: 0 0 9px #fff5a4; content: ""; }.wto-rally-ai-one { bottom: 22.5%; background: linear-gradient(135deg, #55c76a, #1d8d55); }.wto-rally-ai-two { bottom: 31.7%; background: linear-gradient(135deg, #ff9d3e, #e35635); }.wto-rally-ai-three { bottom: 40.8%; background: linear-gradient(135deg, #4da0ff, #6247c8); }.wto-rally-stage .wto-rally-cone { display: none; }.wto-rally-stage.is-racing .wto-rally-road::after, .wto-rally-stage.is-racing::after, .wto-rally-stage.is-racing .wto-rally-car { animation: none; }
/* Optimized custom car sprites: realistic, smaller, and still fast to load. */
.wto-rally-car, .wto-rally-ai { width: 4.8rem; height: 2.1rem; border: 0; border-radius: 0; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; box-shadow: none !important; }.wto-rally-car { background-image: url('../images/games/turbo-rally-car-pink.webp') !important; }.wto-rally-ai-one { background-image: url('../images/games/turbo-rally-car-blue.webp') !important; }.wto-rally-ai-two { background-image: url('../images/games/turbo-rally-car-orange.webp') !important; }.wto-rally-ai-three { background-image: url('../images/games/turbo-rally-car-green.webp') !important; }.wto-rally-car::before, .wto-rally-car::after, .wto-rally-car i, .wto-rally-car b, .wto-rally-ai::before, .wto-rally-ai::after { display: none; }
.wto-rally-car { transition: left .58s cubic-bezier(.22,.8,.25,1); will-change: left; }.wto-rally-ai { transition: left .1s linear; will-change: left; }

/* Game 04: a bright, lightweight carnival shooting gallery. */
.wto-carnival-page { --wto-game-ink: #fdf3d4; --wto-game-accent: #ff5572; background: #301a4a; }.wto-carnival-page .wto-site-header, .wto-carnival-page .wto-site-footer { background: #301a4a; }.wto-carnival-page .wto-game-intro { color: #ffeec8; }

.wto-carnival-game { margin: 0 auto 1.25rem; border: 1px solid #f5a743; border-radius: 1rem; padding: .8rem; background: #241336; box-shadow: 0 20px 45px rgb(11 4 20 / 38%); width: min(100%, 1120px);max-width: none;}

.wto-carnival-game .wto-game-toolbar { margin-bottom: .75rem; }.wto-carnival-stage { position: relative; min-height: 430px; overflow: hidden; border: 4px solid #ffc24e; border-radius: .8rem; background: linear-gradient(180deg, #4d245f 0 14%, #8b3767 14% 24%, #351b55 24% 100%); box-shadow: inset 0 0 0 5px #ffe28c, inset 0 -35px 0 #243049; }.wto-carnival-stage::before { position: absolute; inset: 28% 0 auto; height: 2.25rem; background: repeating-linear-gradient(90deg, #fb4665 0 3rem, #fff0b5 3rem 6rem, #48bdd3 6rem 9rem); box-shadow: 0 8px 0 #671f57, 0 16px 0 #1f2344; content: ""; }.wto-carnival-stage::after { position: absolute; inset: auto 0 0; height: 21%; background: repeating-linear-gradient(90deg, #1b2039 0 3.5rem, #34446b 3.5rem 7rem); content: ""; }.wto-carnival-lights { position: absolute; z-index: 1; top: 1rem; right: 2%; left: 2%; height: 1rem; background: radial-gradient(circle, #fff8b2 0 .22rem, transparent .27rem) 0 0 / 2.1rem 1rem repeat-x; filter: drop-shadow(0 0 6px #fff1a4); }.wto-carnival-sign { position: absolute; z-index: 2; top: 7%; left: 5%; padding: .7rem 1rem; border: 3px solid #ffd05c; border-radius: .55rem; color: #fff7d2; background: #e53f62; box-shadow: 0 0 0 4px #772356, 0 0 18px #ff7b8f; font-weight: 900; line-height: .9; text-align: center; transform: rotate(-5deg); }.wto-carnival-preview { position: absolute; z-index: 6; inset: 0; }.wto-carnival-preview-target { position: absolute; top: 50%; left: 17%; padding: .65rem 1rem; border: 3px solid #ffdd74; border-radius: 50%; color: #fffbe8; background: #e84d70; box-shadow: 0 0 0 4px #742052; font-weight: 900; }.wto-carnival-preview-duck { position: absolute; right: 14%; bottom: 19%; font-size: 3.4rem; filter: drop-shadow(0 4px 1px #241336); }.wto-carnival-target { position: absolute; z-index: 4; display: flex; align-items: center; gap: .4rem; min-width: 6rem; padding: .35rem .55rem .35rem .35rem; border: 3px solid #ffe08a; border-radius: 999px; color: #2a193d; background: #fff6d2; box-shadow: 0 4px 0 #c83c5d, 0 0 0 4px #5d255d; font-weight: 900; white-space: nowrap; }.wto-carnival-target-duck { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #ffc83d; font-size: 1.25rem; }.wto-carnival-target:nth-of-type(2n) { border-color: #8ff3f4; background: #bdf7ef; box-shadow: 0 4px 0 #2498b1, 0 0 0 4px #28487c; }.wto-carnival-target.is-hit { animation: wto-carnival-hit .25s ease-out forwards; }@keyframes wto-carnival-hit { to { opacity: 0; transform: scale(1.5) rotate(18deg); } }.wto-carnival-page .wto-game-help, .wto-carnival-page .wto-game-sound { color: #f8db9c; }.wto-carnival-page .wto-game-leaderboard { border-color: #8b4d86; background: #29183f; }.wto-carnival-page .wto-game-leaderboard li { border-color: #55335d; }.wto-carnival-page .wto-game-levels button.is-active, .wto-carnival-page .wto-game-board-tabs button.is-active, .wto-carnival-page .wto-stage-preview-card button, .wto-carnival-page .wto-game-over-actions button { background: #ff5572; }
.wto-carnival-tile .wto-game-tile-preview { background: linear-gradient(180deg, #4d245f 0 43%, #e64d6b 44% 57%, #26304a 58%); }.wto-carnival-tile .wto-carnival-tile-lights { position: absolute; top: .65rem; right: .6rem; left: .6rem; height: .65rem; background: radial-gradient(circle, #fff5ac 0 .12rem, transparent .17rem) 0 0 / 1.2rem .65rem repeat-x; }.wto-carnival-tile .wto-carnival-tile-target { position: absolute; top: 41%; left: 19%; padding: .35rem .55rem; border: 2px solid #ffe88d; border-radius: 999px; color: #351a4c; background: #fff3c2; font-weight: 900; }.wto-carnival-tile .wto-carnival-tile-duck { position: absolute; right: 18%; bottom: 14%; font-size: 2.4rem; }

/* Carnival depth: three clear target tracks plus curtains in the foreground. */
.wto-carnival-tracks { position: absolute; z-index: 2; inset: 38% 7% 18%; display: grid; grid-template-rows: repeat(3, 1fr); gap: .8rem; pointer-events: none; }.wto-carnival-tracks i { display: block; border: 3px solid rgb(255 224 138 / 48%); border-right: 0; border-left: 0; border-radius: 999px; background: linear-gradient(90deg, rgb(255 255 255 / 8%), transparent 18% 82%, rgb(255 255 255 / 8%)); box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 4px 0 rgb(17 18 47 / 48%); }.wto-carnival-stage .wto-carnival-target { z-index: 4; transition: filter .12s ease; }.wto-carnival-stage .wto-carnival-target:hover { filter: brightness(1.04); }.wto-carnival-curtain { position: absolute; z-index: 5; top: 0; bottom: 0; width: 8.5%; pointer-events: none; background: repeating-linear-gradient(90deg, #951a49 0 13px, #c92859 13px 26px, #7a123e 26px 39px); box-shadow: inset -7px 0 8px rgb(47 4 33 / 42%), 2px 0 9px rgb(30 5 37 / 42%); }.wto-carnival-curtain::after { position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, transparent, rgb(255 131 164 / 34%), transparent); content: ""; }.wto-carnival-curtain-left { left: 0; border-radius: .4rem 0 0 .4rem; }.wto-carnival-curtain-left::after { right: 7px; }.wto-carnival-curtain-right { right: 0; border-radius: 0 .4rem .4rem 0; transform: scaleX(-1); }.wto-carnival-curtain-right::after { right: 7px; }.wto-carnival-preview, .wto-game-over, .wto-game-ready { z-index: 7; }
.wto-carnival-tile .wto-game-tile-preview { overflow: hidden; background: linear-gradient(180deg, #4d245f 0 32%, #a73464 32% 47%, #2b1a4a 48% 100%); }.wto-carnival-tile .wto-game-tile-preview::before, .wto-carnival-tile .wto-game-tile-preview::after { position: absolute; z-index: 3; top: 0; bottom: 0; width: 13%; background: repeating-linear-gradient(90deg, #951a49 0 8px, #c92859 8px 16px, #7a123e 16px 24px); content: ""; }.wto-carnival-tile .wto-game-tile-preview::before { left: 0; }.wto-carnival-tile .wto-game-tile-preview::after { right: 0; }.wto-carnival-tile .wto-carnival-tile-lights { z-index: 4; }.wto-carnival-tile .wto-carnival-tile-target { z-index: 2; top: 46%; left: 23%; box-shadow: 0 4px 0 #c83c5d, 0 0 0 3px #5d255d; }.wto-carnival-tile .wto-carnival-tile-target::after { position: absolute; top: 130%; left: -2.8rem; width: 9.5rem; height: .55rem; border: 2px solid rgb(255 224 138 / 60%); border-right: 0; border-left: 0; border-radius: 999px; background: rgb(255 255 255 / 7%); content: ""; }.wto-carnival-tile .wto-carnival-tile-duck { z-index: 2; right: 21%; bottom: 16%; }

.wto-falling-game, .wto-rally-game, .wto-space-game{ margin: 0 auto 1.25rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 52%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 84%, #000); width: min(100%, 1120px);max-width: none;}
/* Updated Rally hub cover: the same side-view race seen in the game. */
.wto-rally-tile .wto-game-tile-preview { overflow: hidden; background-color: #101842; background-image: url('../images/games/turbo-rally-car-green.webp'), url('../images/games/turbo-rally-car-orange.webp'), url('../images/games/turbo-rally-car-blue.webp'), url('../images/games/turbo-rally-car-pink.webp'), repeating-linear-gradient(0deg, #343942 0 10%, #dfe8ed 10.7% 12%, #343942 12.7% 24%, #dfe8ed 24.7% 26%, #343942 26.7% 38%, #dfe8ed 38.7% 40%, #343942 40.7% 52%, #dfe8ed 52.7% 54%, #343942 54.7% 66%, #dfe8ed 66.7% 68%, #343942 68.7% 80%, #dfe8ed 80.7% 82%, #343942 82.7% 100%), linear-gradient(#101842 0 56%, #4d8bb3 56.5% 59%, #386c43 59.5% 100%); background-repeat: no-repeat; background-size: 3.45rem auto, 3.45rem auto, 3.45rem auto, 3.45rem auto, 88% 42%, auto; background-position: 18% 59%, 34% 68%, 24% 77%, 43% 86%, center bottom 8%, center; }.wto-rally-tile .wto-game-tile-preview::before { display: none; }.wto-rally-tile .wto-game-tile-preview::after { position: absolute; z-index: 1; top: 54%; right: 8%; bottom: 8%; width: .5rem; background: repeating-conic-gradient(#fff 0 25%, #12131c 0 50%) 0 / .55rem .55rem; content: ""; }.wto-rally-tile .wto-rally-tile-car, .wto-rally-tile .wto-rally-tile-road { display: none; }.wto-rally-tile .wto-rally-tile-star { z-index: 2; top: 13%; left: 13%; font-size: 1rem; }
@media (max-width: 820px) { .wto-games-grid { grid-template-columns: 1fr; }.wto-game-tile { max-width: 680px; margin: 0 auto; width: 100%; } }
@media (max-width: 680px) { .wto-game-page main { width: calc(100% - 1rem); padding-top: 1rem; } .wto-balloon-stage { min-height: 380px; } .wto-game-ready, .wto-game-over { width: min(94%, 520px); padding: 1rem; } .wto-game-toolbar .wto-game-controls { width: 100%; margin: 0; justify-content: flex-start; } .wto-game-leaderboard { grid-template-columns: 1fr; } .wto-game-board-tabs { justify-content: start; } .wto-game-leaderboard li { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .45rem; } .wto-game-leaderboard li small { display: none; } }
@media (max-width: 480px) { .wto-game-tile { grid-template-columns: 1fr; }.wto-game-tile-preview { min-height: 180px; }.wto-preview-balloon-three { display: none; }.wto-grass-buddy { left: 3%; transform: scale(.78); transform-origin: bottom left; }.wto-grass-car { right: 1%; transform: scale(.66); transform-origin: bottom right; }.wto-stage-preview-card { padding: 1rem; }.wto-stage-preview-card p:not(.wto-eyebrow) { font-size: .88rem; } }

/* Small-screen game controls: retain a large play area and easy-to-tap buttons. */
@media (max-width: 680px) { .wto-balloon-game, .wto-falling-game, .wto-rally-game, .wto-carnival-game { padding: .5rem; } .wto-balloon-stage, .wto-falling-stage, .wto-rally-stage, .wto-carnival-stage { min-height: 340px; } .wto-game-toolbar { gap: .55rem; } .wto-game-levels, .wto-game-controls { width: 100%; } .wto-game-levels button, .wto-game-controls button { flex: 1 1 0; min-height: 2.75rem; } .wto-game-hud { width: 100%; justify-content: space-between; gap: .3rem; font-size: .74rem; } .wto-rally-checkpoint { min-width: min(78vw, 220px); } .wto-rally-car, .wto-rally-ai { width: 3.8rem; height: 1.7rem; } .wto-carnival-curtain { width: 11%; } .wto-carnival-tracks { right: 9%; left: 9%; gap: .55rem; } .wto-carnival-target { min-width: 5.25rem; padding: .25rem .45rem .25rem .25rem; font-size: .9rem; } .wto-carnival-target-duck { width: 1.65rem; height: 1.65rem; font-size: 1rem; } }
@media (max-width: 390px) { .wto-balloon-stage, .wto-falling-stage, .wto-rally-stage, .wto-carnival-stage { min-height: 305px; } .wto-game-hud span:nth-child(4) { display: none; } .wto-game-over { max-height: calc(100% - 1rem); overflow: auto; } .wto-carnival-sign { transform: scale(.76) rotate(-5deg); transform-origin: top left; } }

/* Game 05: lightweight CSS-only stars, aliens and laser bursts. */
.wto-space-game{margin-inline:auto;max-width:114rem;padding:1rem;border:1px solid #35476b;border-radius:1rem;background:#101a38}.wto-space-stage{position:relative;min-height:430px;overflow:hidden;border:3px solid #65dffc;border-radius:.85rem;background:radial-gradient(circle at 20% 18%,#49328a 0,transparent 21%),radial-gradient(circle at 85% 12%,#227cb4 0,transparent 19%),linear-gradient(180deg,#10183e,#0d1231 74%,#1c315b)}.wto-space-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.6px),radial-gradient(#71e4ff 1px,transparent 1.4px);background-position:0 0,20px 28px;background-size:40px 40px,57px 57px;opacity:.72}.wto-space-planet{position:absolute;right:-3rem;bottom:-4rem;width:14rem;height:14rem;border-radius:50%;background:radial-gradient(circle at 34% 28%,#d2fcff 0 6%,#6fe2f7 7% 25%,#3b78d0 26% 58%,#263a92 59%);box-shadow:0 0 38px #3fbfec;opacity:.85}.wto-space-ship{position:absolute;z-index:3;bottom:1.2rem;left:50%;color:#ffcf55;font-size:4rem;line-height:1;transform:translateX(-50%);text-shadow:0 0 16px #ff8e4d}.wto-space-preview{position:absolute;z-index:5;inset:0}.wto-space-preview-alien{position:absolute;top:18%;left:14%;padding:.5rem .85rem;border:2px solid #71f0ff;border-radius:2rem;color:#fff;background:#6a3ec7;font-weight:800;box-shadow:0 0 18px #6a3ec7}.wto-space-target{position:absolute;z-index:4;top:0;min-width:5.5rem;padding:.35rem .6rem;border:2px solid #72f5ff;border-radius:1rem;color:#fff;background:linear-gradient(145deg,#7342cf,#2c70ce);box-shadow:0 0 15px rgb(91 224 255 / 58%);font:inherit;font-weight:800;text-align:center;transform:translateX(-50%)}.wto-space-target span{display:block;font-size:1.45rem;line-height:1}.wto-space-target b{display:block}.wto-space-target.is-blasted{animation:wto-space-blast .25s ease-out forwards}.wto-space-target.is-escaped{animation:wto-space-escape .25s ease-out forwards}@keyframes wto-space-blast{to{opacity:0;transform:translateX(-50%) scale(1.75) rotate(30deg);filter:brightness(2)}}@keyframes wto-space-escape{to{opacity:0;transform:translateX(-50%) translateY(18px)}}.wto-space-game .wto-game-help,.wto-space-game .wto-game-sound{color:#c7e8ff}.wto-space-game .wto-game-levels button,.wto-space-game .wto-game-controls button,.wto-space-game .wto-game-sound button{border-color:#6cb9e9;color:#f4fbff;background:#18264a}.wto-space-game .wto-game-levels button.is-active,.wto-space-game .wto-game-controls button:first-child{border-color:#ff5d92;background:#ec4f7a;color:#fff}.wto-space-tile .wto-game-tile-preview{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 20%,#4a90cc 0,transparent 16%),linear-gradient(145deg,#111d4b,#34276c)}.wto-space-tile-ship{position:absolute;bottom:12%;left:50%;color:#ffcc5c;font-size:3.2rem;transform:translateX(-50%);text-shadow:0 0 13px #ff7d4c}.wto-space-tile-alien{position:absolute;top:22%;left:26%;padding:.35rem .65rem;border-radius:1rem;color:#fff;background:#7044c9;font-weight:800}.wto-space-tile-stars{position:absolute;right:11%;top:15%;color:#baf7ff;letter-spacing:.45rem}.wto-space-page .wto-game-leaderboard{border-color:#35476b;background:#101a38}.wto-space-page .wto-game-leaderboard h2,.wto-space-page .wto-game-leaderboard p{color:#ecf7ff}.wto-space-page .wto-game-leaderboard li{background:#1d2b53;color:#fff}.wto-space-page .wto-game-leaderboard li small{color:#aaddf4}@media(max-width:680px){.wto-space-game{padding:.5rem}.wto-space-stage{min-height:340px}.wto-space-ship{font-size:3.1rem}.wto-space-target{min-width:4.3rem;font-size:.82rem}.wto-space-planet{width:10rem;height:10rem}}

/* Space Shooter: high-contrast alien targets and a laser for every correct key. */
.wto-space-target { color: #fff !important; background: linear-gradient(145deg, #9b57ff, #237fd3) !important; box-shadow: 0 0 0 2px rgb(230 255 255 / 22%), 0 0 21px #58e9ff !important; }
.wto-space-target .wto-space-alien { display: block; margin-bottom: .12rem; color: initial; font-size: 1.65rem; line-height: 1; filter: drop-shadow(0 2px 0 rgb(4 14 48 / 55%)) brightness(1.25); }
.wto-space-target b { color: #fff; font-size: 1.08rem; letter-spacing: .025em; text-shadow: 0 2px 2px rgb(5 12 42 / 65%); }
.wto-space-target b em { color: #aaffec; font-style: normal; text-decoration: line-through; opacity: .96; }
.wto-space-target b strong { color: #fff6a2; font-size: 1.25em; text-decoration: underline; }
.wto-space-laser { position: absolute; z-index: 5; bottom: 3.5rem; left: 50%; width: 4px; height: 0; transform: translateX(-50%) rotate(var(--laser-angle, 0deg)); transform-origin: bottom center; border-radius: 999px; background: linear-gradient(#fffbd0, #58efff 55%, transparent); box-shadow: 0 0 7px #fff, 0 0 16px #4deeff; animation: wto-space-laser .32s ease-out forwards; pointer-events: none; }
.wto-space-laser::after { position: absolute; top: -8px; left: 50%; width: .8rem; height: .8rem; transform: translateX(-50%); border-radius: 50%; background: #fff8bd; box-shadow: 0 0 14px #fff, 0 0 28px #50eaff; content: ""; }
@keyframes wto-space-laser { from { height: 0; opacity: 1; } 72% { height: 15rem; opacity: 1; } to { height: 18rem; opacity: 0; } }
.wto-space-game .wto-game-hud, .wto-space-game .wto-game-hud b, .wto-space-game .wto-game-help, .wto-space-game .wto-game-sound { color: #e9fbff !important; text-shadow: 0 1px 1px #071332; }
.wto-space-page .wto-game-leaderboard { border-color: #65dffc; background: #101a38; }
.wto-space-page .wto-game-leaderboard h2, .wto-space-page .wto-game-leaderboard p, .wto-space-page .wto-game-leaderboard li strong, .wto-space-page .wto-game-leaderboard li span, .wto-space-page .wto-game-leaderboard li small, .wto-space-page .wto-game-leaderboard > button { color: #f3fcff !important; }
.wto-space-page .wto-game-board-tabs button, .wto-space-page .wto-game-leaderboard > button { border-color: #69dff6 !important; color: #effcff !important; background: #1b315a !important; }
.wto-space-page .wto-game-board-tabs button.is-active { background: #ec4f7a !important; color: #fff !important; }

/* Keep the two Space Shooter panels distinct and aim each beam at its target. */
.wto-space-game { margin-bottom: 1.25rem; }
.wto-space-laser { height: 0; transform: translateX(-50%) rotate(var(--laser-angle)); }
@keyframes wto-space-laser { from { height: 0; opacity: 1; } 78% { height: var(--laser-length); opacity: 1; } to { height: var(--laser-length); opacity: 0; } }
[data-space-shooter] .wto-game-leaderboard .wto-eyebrow,
[data-space-shooter] .wto-game-leaderboard h2,
[data-space-shooter] .wto-game-leaderboard > div > p,
[data-space-shooter] .wto-game-leaderboard ol strong,
[data-space-shooter] .wto-game-leaderboard ol span,
[data-space-shooter] .wto-game-leaderboard ol small { color: #effcff !important; opacity: 1 !important; text-shadow: 0 1px 1px #071332; }
[data-space-shooter] .wto-game-leaderboard h2 { font-weight: 800; }
[data-space-shooter] .wto-game-leaderboard .wto-game-board-tabs button,
[data-space-shooter] .wto-game-leaderboard > button { color: #f8fdff !important; background: #1d3968 !important; border-color: #74e9ff !important; opacity: 1 !important; }
[data-space-shooter] .wto-game-leaderboard .wto-game-board-tabs button.is-active { background: #ec4f7a !important; border-color: #ff8bb0 !important; color: #fff !important; }

/* Player craft: a compact CSS sprite instead of the former triangle glyph. */
.wto-space-ship { width: 5.6rem; height: 5.2rem; bottom: .8rem; color: transparent; font-size: 0; text-shadow: none; }
.wto-space-ship::before { position: absolute; inset: .2rem 1.55rem .45rem; border: 3px solid #193054; border-radius: 56% 56% 36% 36%; background: linear-gradient(90deg, #607fbd 0 18%, #e4f5ff 19% 49%, #6eb5ef 50% 80%, #315487 81%); box-shadow: inset 0 .25rem 0 rgb(255 255 255 / 75%), 0 0 16px #50eaff; content: ""; }
.wto-space-ship::after { position: absolute; bottom: .25rem; left: .1rem; width: 5.35rem; height: 2.25rem; border: 3px solid #193054; border-radius: 75% 75% .7rem .7rem; background: linear-gradient(90deg, #2a5e9f 0 25%, #77d8ff 26% 49%, #3e8bc6 50% 74%, #244b83 75%); box-shadow: inset 0 .3rem 0 rgb(255 255 255 / 45%), 0 0 16px rgb(80 234 255 / 72%); content: ""; clip-path: polygon(50% 0, 100% 100%, 66% 84%, 50% 100%, 34% 84%, 0 100%); }
@media (max-width: 680px) { .wto-space-ship { transform: translateX(-50%) scale(.78); transform-origin: bottom center; } }
/* Whack-a-Mole Typing: self-contained garden stage. */
.wto-whack-page .wto-game-intro { margin-bottom: 1.5rem; }
.wto-whack-game, .wto-whack-leaderboard {
  max-width: 1180px;
  margin-inline: auto;
}
.wto-whack-game {
  padding: 1rem;
  border: 1px solid #9a6c3c;
  border-radius: 1.25rem;
  background: #3a2355;
  color: #fff9df;
}
.wto-whack-game .wto-game-toolbar,
.wto-whack-game .wto-game-help,
.wto-whack-game .wto-game-sound { color: #fff9df; }
.wto-whack-stage {
  position: relative;
  min-height: 28rem;
  overflow: hidden;
  border: 4px solid #6d3f24;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 11% 13%, #fffce0 0 2px, transparent 3px) 0 0 / 55px 42px,
    linear-gradient(#75d4f5 0 57%, #91d96b 57% 100%);
  isolation: isolate;
}
.wto-whack-stage::before {
  content: '';
  position: absolute;
  inset: 57% 0 0;
  background: repeating-linear-gradient(90deg, #75bd55 0 38px, #68af4d 38px 76px);
  z-index: -1;
}
.wto-whack-sun {
  position: absolute;
  top: 2.25rem;
  right: 7%;
  width: 4.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd768;
  box-shadow: 0 0 0 0.55rem #ffed9c99;
}
.wto-whack-cloud {
  position: absolute;
  width: 9rem;
  height: 2.4rem;
  border-radius: 99px;
  background: #eefbffb8;
  filter: blur(.2px);
}
.wto-whack-cloud::before, .wto-whack-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.wto-whack-cloud::before { width: 3.6rem; height: 3.6rem; left: 1.1rem; bottom: .35rem; }
.wto-whack-cloud::after { width: 2.8rem; height: 2.8rem; right: 1.1rem; bottom: .35rem; }
.wto-whack-cloud-one { top: 4.4rem; left: 9%; }
.wto-whack-cloud-two { top: 8rem; right: 25%; transform: scale(.7); }
.wto-whack-holes {
  position: absolute;
  inset: auto 6% 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(5rem, 1fr));
  gap: 1.5rem 3rem;
}
.wto-whack-hole {
  position: relative;
  min-height: 5rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #37201b 0 54%, #71442a 55% 68%, transparent 69%);
}
.wto-whack-mole {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  display: grid;
  place-items: center;
  width: min(8.4rem, 90%);
  min-height: 6rem;
  transform: translateX(-50%) translateY(14%);
  border: 0;
  border-radius: 48% 48% 40% 40%;
  background: linear-gradient(#b9824c, #754124);
  color: #fff8df;
  box-shadow: inset 0 0 0 3px #542d1e, 0 .5rem 0 #4c2b20;
  font: 800 1.35rem/1 system-ui, sans-serif;
  animation: wto-mole-pop .24s ease-out both;
}
.wto-whack-mole span { display: block; font-size: 2rem; line-height: 1; }
.wto-whack-mole b { display: block; min-height: 1.25em; text-transform: lowercase; }
.wto-whack-mole b em { color: #ffe56c; font-style: normal; }
.wto-whack-mole b strong { color: #fff; text-decoration: underline; }
.wto-whack-mole.is-whacked { animation: wto-mole-whack .28s ease-in both; }
.wto-whack-mole.is-ducked { animation: wto-mole-duck .28s ease-in both; }
@keyframes wto-mole-pop { from { transform: translateX(-50%) translateY(90%); } to { transform: translateX(-50%) translateY(14%); } }
@keyframes wto-mole-whack { 45% { transform: translateX(-50%) translateY(-12%) rotate(8deg) scale(1.15); filter: brightness(1.45); } to { transform: translateX(-50%) translateY(105%) rotate(-7deg); opacity: 0; } }
@keyframes wto-mole-duck { to { transform: translateX(-50%) translateY(105%); opacity: .2; } }
.wto-whack-preview-mole {
  margin-inline: auto;
  width: 5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 42% 42%;
  background: #9b633a;
  color: #fff;
  box-shadow: inset 0 0 0 3px #63351f;
  font-weight: 800;
}
.wto-whack-leaderboard { margin-top: 1.25rem; }
@media (max-width: 640px) {
  .wto-whack-game { padding: .65rem; }
  .wto-whack-stage { min-height: 26rem; }
  .wto-whack-holes { inset-inline: .75rem; gap: 1rem .5rem; }
  .wto-whack-mole { width: 5.3rem; min-height: 4.6rem; font-size: 1rem; }
  .wto-whack-mole span { font-size: 1.4rem; }
  .wto-whack-hole { min-height: 4.2rem; }
}

/* Whack-a-Mole final stage cleanup: each active slot is one burrow only. */
.wto-whack-hole::after { display: none; }
.wto-whack-hole {
  overflow: visible;
  background: radial-gradient(ellipse at center, #2b1712 0 54%, #714027 56% 71%, transparent 73%);
}
.wto-whack-mole {
  overflow: visible;
  line-height: 1.08;
  padding: .18rem .28rem .36rem;
}
.wto-whack-mole > b {
  display: block;
  min-height: 1.35em;
  overflow: visible;
  line-height: 1.15;
  white-space: nowrap;
}

/* Natural burrow placement: holes appear only when a numbered mole is about to pop. */
.wto-whack-stage {
  min-height: 31rem;
  background:
    radial-gradient(circle at 11% 12%, #fffce0 0 2px, transparent 3px) 0 0 / 55px 42px,
    linear-gradient(#76d5f4 0 35%, #91d96b 35% 100%);
}
.wto-whack-stage::before {
  inset: 35% 0 0;
  background:
    radial-gradient(ellipse at 50% 100%, #77be53 0 55%, transparent 56%) 0 100% / 12rem 3.7rem repeat-x,
    linear-gradient(#99dd70, #6eb550);
}
.wto-whack-holes {
  inset: 0;
  display: block;
}
.wto-whack-hole {
  position: absolute;
  display: none;
  width: clamp(4.25rem, 7vw, 6.1rem);
  min-height: 0;
  height: clamp(2.2rem, 3.8vw, 3rem);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #2f1b17 0 55%, #79472a 57% 72%, transparent 74%);
  isolation: isolate;
}
.wto-whack-hole.is-active { display: block; }
.wto-whack-hole::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 3%;
  right: 3%;
  bottom: -8%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #271511 0 48%, #603721 50% 67%, transparent 69%);
  pointer-events: none;
}
.wto-whack-hole:nth-child(1) { left: 10%; top: 57%; }
.wto-whack-hole:nth-child(2) { left: 30%; top: 51%; }
.wto-whack-hole:nth-child(3) { left: 53%; top: 61%; }
.wto-whack-hole:nth-child(4) { left: 76%; top: 54%; }
.wto-whack-hole:nth-child(5) { left: 18%; top: 76%; }
.wto-whack-hole:nth-child(6) { left: 41%; top: 70%; }
.wto-whack-hole:nth-child(7) { left: 65%; top: 79%; }
.wto-whack-hole:nth-child(8) { left: 83%; top: 70%; }
.wto-whack-hole:nth-child(9) { left: 48%; top: 48%; }
.wto-whack-mole {
  width: clamp(4.35rem, 6.2vw, 5.65rem);
  min-height: 4.5rem;
  z-index: 2;
  bottom: .1rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  box-shadow: inset 0 0 0 3px #542d1e, 0 .35rem 0 #4c2b20;
}
.wto-whack-mole span { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.wto-whack-mole b { text-transform: none; }
.wto-whack-mole > span,
.wto-whack-mole > b {
  position: relative;
  z-index: 4;
}
@keyframes wto-mole-pop { from { transform: translateX(-50%) translateY(105%); } to { transform: translateX(-50%) translateY(0); } }
@keyframes wto-mole-duck { to { transform: translateX(-50%) translateY(110%); opacity: .15; } }
.wto-whack-game .wto-game-hud,
.wto-whack-game .wto-game-hud span,
.wto-whack-game .wto-game-hud b,
.wto-whack-game .wto-game-help,
.wto-whack-game .wto-game-sound,
.wto-whack-game .wto-game-sound span,
.wto-whack-leaderboard,
.wto-whack-leaderboard h2,
.wto-whack-leaderboard p,
.wto-whack-leaderboard li,
.wto-whack-leaderboard li strong,
.wto-whack-leaderboard li small { color: #fff9df !important; opacity: 1; }
.wto-whack-game button,
.wto-whack-leaderboard button {
  color: #fffdf0 !important;
  border-color: #ffd36b !important;
  background: #4d2d68;
  text-shadow: none;
}
.wto-whack-game .wto-game-levels button.is-active,
.wto-whack-leaderboard .wto-game-board-tabs button.is-active,
.wto-whack-game [data-whack-pause] { background: #ef4d73; border-color: #ff9ab2 !important; }
@media (max-width: 640px) {
  .wto-whack-stage { min-height: 27rem; }
  .wto-whack-hole:nth-child(1) { left: 8%; top: 56%; }
  .wto-whack-hole:nth-child(2) { left: 35%; top: 53%; }
  .wto-whack-hole:nth-child(3) { left: 65%; top: 60%; }
  .wto-whack-hole:nth-child(4) { left: 78%; top: 50%; }
  .wto-whack-hole:nth-child(5) { left: 14%; top: 76%; }
  .wto-whack-hole:nth-child(6) { left: 43%; top: 70%; }
  .wto-whack-hole:nth-child(7) { left: 70%; top: 78%; }
  .wto-whack-hole:nth-child(8) { display: none !important; }
  .wto-whack-hole:nth-child(9) { left: 48%; top: 49%; }
}

/* Consistent game-to-game navigation, kept beside the difficulty controls. */
.wto-game-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-content: center;
  min-height: 2.35rem;
  padding: .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--wto-muted) 65%, transparent);
  border-radius: .55rem;
  background: transparent;
  color: var(--wto-text);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.wto-game-toolbar-link:hover,
.wto-game-toolbar-link:focus-visible {
  border-color: var(--wto-accent);
  color: var(--wto-accent);
  outline: none;
}
@media (max-width: 640px) {
  .wto-game-toolbar-link { flex: 1 1 100%; min-height: 2.75rem; }
}

/* Current-game covers for the Games hub. Kept CSS-only for a fast first paint. */
.wto-space-tile .wto-game-tile-play { background: radial-gradient(circle at 35% 30%, #71f4ff, #2576da 56%, #111b4b); }
.wto-whack-tile .wto-game-tile-preview { background: linear-gradient(#72cdf0 0 42%, #8ed95c 42%); }
.wto-whack-tile .wto-game-tile-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 23%, #fff9c5 0 2px, transparent 3px) 0 0 / 35px 28px; opacity: .75; }
.wto-whack-tile-mole { position: absolute; z-index: 2; left: 30%; bottom: 15%; display: grid; place-items: center; width: 4.75rem; height: 4.5rem; border-radius: 50% 50% 42% 42%; background: #55346f; border: 4px solid #402445; color: #fff; font-size: 1.7rem; line-height: 1; box-shadow: 0 .7rem 0 -.25rem #4c241b; }
.wto-whack-tile-mole b { position: absolute; bottom: .35rem; font-size: .85rem; }
.wto-whack-tile-hole { position: absolute; z-index: 1; left: 62%; bottom: 14%; width: 5.2rem; height: 1.35rem; border-radius: 50%; background: #462019; box-shadow: 0 .25rem 0 #714026; }

.wto-rain-tile .wto-game-tile-preview { background: linear-gradient(#75c9f0 0 73%, #6bc86d 73%); }
.wto-rain-tile .wto-game-tile-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 23%, #fff 0 5%, transparent 5.4%), radial-gradient(ellipse at 24% 25%, #fff 0 7%, transparent 7.4%), radial-gradient(ellipse at 75% 17%, #fff 0 5%, transparent 5.4%); opacity: .76; }
.wto-rain-tile .wto-game-tile-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 27%; background: repeating-linear-gradient(90deg, rgba(70,159,77,.22) 0 15px, transparent 15px 30px); }
.wto-rain-tile-drop { position: absolute; z-index: 2; display: grid; place-items: center; width: 3.45rem; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; color: #172442; font-size: 1.55rem; font-weight: 900; box-shadow: 0 .32rem 0 rgba(25,50,79,.18); }
.wto-rain-tile .drop-one { top: 17%; left: 18%; background: #ff9362; transform: rotate(-8deg); }
.wto-rain-tile .drop-two { top: 39%; left: 51%; background: #85df85; transform: rotate(7deg); }
.wto-rain-tile .drop-three { top: 14%; right: 14%; background: #ffd45b; transform: rotate(-5deg); }

.wto-memory-tile .wto-game-tile-preview { background: radial-gradient(circle at 81% 20%, #479bd0 0 7%, transparent 8%), linear-gradient(135deg, #412b76, #101f55 55%, #16688c); }
.wto-memory-tile-stars { position: absolute; inset: .8rem 1rem auto; color: #d8f6ff; letter-spacing: .55rem; font-size: 1.1rem; }
.wto-memory-tile-card { position: absolute; z-index: 2; left: 10%; right: 10%; top: 34%; padding: 1rem .75rem; border: 2px solid #66e9ff; border-radius: 1rem; background: rgba(250,253,255,.93); color: #1b3154; text-align: center; font-weight: 800; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); }

.wto-maze-tile .wto-game-tile-preview { background-color: #101f4d; background-image: linear-gradient(90deg, transparent 46%, #2865b3 46% 53%, transparent 53%), linear-gradient(#101f4d 44%, #2865b3 44% 51%, #101f4d 51%); background-size: 55px 55px; }
.wto-maze-tile-dots { position: absolute; z-index: 2; left: 12%; top: 31%; color: #ffe367; letter-spacing: .58rem; font-size: 1.4rem; }
.wto-maze-tile-pac { position: absolute; z-index: 3; left: 31%; bottom: 23%; width: 3.4rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 35deg, #ffd947 0 290deg, transparent 290deg); filter: drop-shadow(0 0 .4rem #ffe76e); }
.wto-maze-tile-ghost { position: absolute; z-index: 3; right: 17%; bottom: 24%; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1.5rem 1.5rem .55rem .55rem; background: #ef6c9f; color: #fff; font-size: .8rem; font-weight: 800; }

@media (max-width: 760px) {
  .wto-rain-tile-drop { width: 3rem; font-size: 1.25rem; }
  .wto-memory-tile-card { left: 7%; right: 7%; font-size: .85rem; }
}