/* Reference artwork with live, keyboard-accessible controls over its UI regions. */
#app[data-page="home"]{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);gap:0;display:grid;place-items:center;container-type:size;background:radial-gradient(ellipse at center,#1268b6,#061b37)}
/* Keep artwork and hit regions on one uniformly scaled 852 × 1846 canvas. */
.home-scene{position:relative;width:min(100cqw,calc(100cqh * 852 / 1846));height:min(100cqh,calc(100cqw * 1846 / 852));min-height:0;container-type:size;isolation:isolate;overflow:hidden}
.home-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.home-hit{position:absolute;z-index:2;display:block;min-height:44px;border:0;border-radius:18px;background:transparent;box-shadow:none;padding:0}
.home-hit:focus-visible{outline:3px solid #fff2a1;outline-offset:-4px;box-shadow:inset 0 0 16px #fff7}
.home-hit:active{background:#ffffff14}
.home-profile{left:3%;top:2%;width:46%;height:8.5%;border-radius:40px}
.home-settings{right:1.5%;top:3.5%;width:12%;height:6%;min-width:44px}
.live-name,.live-level,.live-coins{position:absolute;z-index:3;display:flex;align-items:center;pointer-events:none;overflow:hidden;white-space:nowrap;font-weight:900;text-shadow:0 2px 2px #002658;color:white}
.live-name{left:22.6%;top:4.05%;width:31%;height:2.6%;background:linear-gradient(100deg,#1056b9,#0c54b7);border-radius:4px;font-size:min(4.9cqw,2.4cqh);padding-left:.4cqw;text-overflow:ellipsis;display:block;line-height:2.6cqh}
.live-level{left:28%;top:6.9%;width:15.5%;height:1.8%;background:#063f92;color:#ffe46f;font-size:3.55cqw;line-height:1;padding-left:.3cqw;border-radius:8px}
.live-coins{left:67.5%;top:5.15%;width:13.2%;height:2.9%;justify-content:center;border-radius:20px;background:#052c65;font-size:4.8cqw;line-height:1}
.home-avatar{position:absolute;z-index:3;left:4.4%;top:2.55%;width:16.5%;height:7.5%;display:grid;place-items:center;background:#08498c;border-radius:50%;pointer-events:none}.home-avatar .art{width:min(16cqw,7.4cqh);height:min(16cqw,7.4cqh)}.home-avatar .avatar-emoji{font-size:10cqw}
.home-classic{left:2.7%;top:51.55%;width:46%;height:28.5%;border-radius:25px}
.home-snake{left:50.6%;top:51.55%;width:46.7%;height:28.5%;border-radius:25px}
.home-rules{left:11%;top:81.5%;width:78%;height:5%;border-radius:28px}
.home-navigation{position:absolute;z-index:2;left:0;right:0;bottom:0;height:10.4%;display:grid;grid-template-columns:repeat(4,1fr)}
.home-navigation .home-hit{position:relative;width:100%;height:100%;border-radius:12px}
.home-continue{position:absolute;z-index:4;left:18%;top:46%;width:64%;min-height:30px;padding:6px 8px;font-size:12px;border-radius:14px}
@media(max-height:640px){.home-rules{top:81%;height:7%}.home-continue{top:45.4%;font-size:11px}}
@media(min-width:481px){.phone:has(#app[data-page="home"]:not([hidden])){width:min(440px,96vw,calc(96dvh * 852 / 1846))}}