*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#b5f1f4 url('assets/pool.webp') center/cover fixed;font-family:ui-rounded,'Arial Rounded MT Bold',Trebuchet MS,sans-serif;color:#55336d}header{position:absolute;top:18px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2;gap:12px}main{max-width:1400px;margin:auto;padding:12px 30px 50px}.title{margin:0 auto 16px;width:min(58%,737px);font-size:0}.slice{display:block;position:relative;overflow:hidden;aspect-ratio:var(--w)/var(--h)}.slice img{position:absolute;width:calc(153600% / var(--w));max-width:none;height:auto;left:calc(-100% * var(--x) / var(--w));top:calc(-100% * var(--y) / var(--h))}.games{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:start}.game{position:relative;display:block;width:calc((100% - 28px)/3);padding:0;border:0;border-radius:50px;background:none;cursor:pointer;text-decoration:none;font:inherit;transition:transform .18s}.game-3,.game-4{width:35%}.game .slice{border-radius:48px}.game:hover{transform:translateY(-4px)}.game:focus-visible,a:focus-visible,button:focus-visible{outline:5px solid #6b1686;outline-offset:5px}.soon{position:absolute;top:14px;right:18px;background:#fff3fc;color:#652e85;padding:6px 13px;border:2px solid white;border-radius:20px;font-weight:800;font-size:14px;box-shadow:0 2px 8px #31556833}dialog{border:4px solid white;border-radius:30px;background:#fff2fa;padding:30px;max-width:min(460px,90vw);text-align:center;box-shadow:0 15px 70px #234b6770}dialog::backdrop{background:#153e5c66}dialog h2{color:#aa137f}dialog a,dialog button{display:block;border:2px solid white;background:#f9badd;color:#582657;border-radius:20px;padding:14px;margin:20px auto 0;font:700 17px inherit;text-decoration:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:800px){header{position:relative;top:auto;left:auto;right:auto;padding:12px;align-items:center}.title{width:min(85%,580px)}main{padding:0 14px 30px}.game,.game-3,.game-4{width:calc((100% - 14px)/2)}.soon{font-size:12px;padding:4px 9px;top:10px;right:12px}.game .slice{border-radius:30px}}@media(max-width:500px){.game,.game-3,.game-4{width:100%;max-width:430px}.title{width:100%;margin:0 auto 12px}header .music-player{max-width:220px}.games{gap:18px}.soon{font-size:14px;top:15px;right:18px}}@media(prefers-reduced-motion:reduce){.game{transition:none}.game:hover{transform:none}}
/* Preserve the approved composition exactly on tablet and desktop. */
@media(min-width:801px){body{background:#b5f1f4}main{position:relative;width:100%;max-width:1536px;aspect-ratio:3/2;padding:0;background:url('assets/menu.png') center/100% 100% no-repeat}.title{position:absolute;left:25.39%;top:1.17%;width:47.98%;margin:0}.title .slice{visibility:hidden}.games{display:contents}.game{position:absolute!important;margin:0;transition:none;border-radius:12%}.game .slice{visibility:hidden}.game-0{left:8.203%;top:29.297%;width:28.19%;height:30.273%}.game-1{left:36.523%;top:29.297%;width:26.953%;height:30.273%}.game-2{left:63.607%;top:29.297%;width:28.32%;height:30.273%}.game-3{left:19.727%;top:60.547%;width:30.078%;height:31.641%}.game-4{left:50.065%;top:60.547%;width:30.143%;height:31.641%}.game:hover{transform:none;box-shadow:0 0 0 4px #fff9}.soon{font-size:clamp(10px,1vw,15px);padding:4px 9px;top:7%;right:6%}header{inset:0;position:absolute;pointer-events:none;max-width:1536px;margin:0 auto;height:auto;bottom:auto}header .home-button{pointer-events:auto;position:absolute;left:2%;top:2vw;width:14.5%;height:5vw;min-width:0;min-height:0;opacity:0}header .home-button:focus-visible{opacity:1}header .music-player{pointer-events:auto;position:absolute;right:16px;top:16px}.game:focus-visible{outline:5px solid #6b1686;outline-offset:1px}}
@media(max-width:800px){body{background:#b5f1f4}.title .slice{border-radius:30px}}