:root{--ink:#365968;--cream:#e9d7a7;--mint:#b6d1c5;--peach:#e2ae85}*{box-sizing:border-box}body{margin:0;background:#b6d1c5;color:var(--ink);font-family:'Microsoft JhengHei',Arial,sans-serif}.screen{min-height:620px;height:100svh;position:relative;isolation:isolate;overflow:hidden;border:10px solid #76978c;box-shadow:inset 0 0 0 3px #d5dfbd;background:#b6d1c5}header{position:absolute;top:0;left:0;right:0;padding:22px 30px;display:flex;gap:25px;align-items:center;z-index:5;font:bold 10px monospace;letter-spacing:2px}.tiny-brand{font-weight:900;font-size:15px;color:var(--ink);text-decoration:none}button{margin-left:auto;background:#d7d6af;color:var(--ink);border:2px solid #7d9b8b;padding:8px 12px;min-height:36px;cursor:pointer;font-size:11px}a:focus-visible,button:focus-visible{outline:3px solid #3b6777;outline-offset:5px}.world{position:absolute;inset:0;z-index:-2;background:linear-gradient(#afd0c9 0 48%,#e1cfa0 80%)}.sun{position:absolute;top:13%;right:14%;width:125px;height:125px;background:#e9d5a1;clip-path:polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%)}.cloud{position:absolute;height:18px;width:150px;background:#dfdfba;box-shadow:20px -18px #dfdfba,52px -36px #dfdfba,90px -18px #dfdfba;animation:drift 18s ease-in-out infinite alternate;opacity:.7}.one{left:8%;top:24%}.two{right:4%;top:46%;scale:.8;animation-delay:-7s}.three{left:43%;top:13%;scale:.55;animation-delay:-12s}.mountains{position:absolute;bottom:13%;height:36%;width:100%;background:#8eafa6;clip-path:polygon(0 65%,12% 5%,24% 50%,33% 25%,47% 65%,61% 10%,75% 55%,87% 5%,100% 58%,100% 100%,0 100%)}.skyline{position:absolute;bottom:13%;height:32%;left:0;right:0;display:flex;align-items:end;gap:12px;opacity:.65}.skyline>i{width:10%;height:var(--h);background:repeating-linear-gradient(0deg,transparent 0 17px,#d2d1a744 17px 21px),repeating-linear-gradient(90deg,#72978d 0 15px,#aac1a3 15px 21px);border-top:6px solid #668e84}.tower{height:100%;width:8%;min-width:55px;display:flex;flex-direction:column;justify-content:end;align-items:center;position:relative}.tower:before{content:'';position:absolute;height:26%;width:5px;background:#668b80;top:-15%}.tower b{display:block;background:#739b8d;width:100%;height:10%;border-top:4px solid #aac1a3;clip-path:polygon(5% 0,95% 0,85% 100%,15% 100%)}.tower b:first-child{width:62%;height:15%}.ground{position:absolute;bottom:0;height:13%;width:100%;background:repeating-linear-gradient(90deg,transparent 0 63px,#b7ab8044 64px 66px),repeating-linear-gradient(0deg,#ccbd91 0 27px,#9eaa87 28px 31px);border-top:9px solid #708f7b}.title-scene{position:absolute;top:18%;left:50%;transform:translateX(-50%);text-align:center;width:min(720px,80%);z-index:2}.edition{font:bold 10px monospace;letter-spacing:3px;animation:appear .5s .15s both}h1{margin:22px 0 18px;font-family:Impact,'Arial Black',monospace;font-weight:1000;font-size:clamp(70px,8.8vw,150px);letter-spacing:3px;line-height:.86;transform:skew(-6deg);color:#efd49a;text-shadow:4px 0 #516f72,-4px 0 #516f72,0 -4px #516f72,0 4px #516f72,7px 8px #b18164,11px 12px #516f72}h1>span{display:block;animation:title-drop .8s steps(8,end) both}h1>span:last-child{animation-delay:.18s;position:relative}.spark{position:absolute;font-size:32px;right:5%;top:12%;color:#cb9675;text-shadow:2px 2px #5c7e7b;animation:spark 2.8s steps(2,end) 1s infinite}.chinese{display:flex;justify-content:center;align-items:center;gap:22px;font-weight:900;font-size:27px;letter-spacing:7px;margin-top:24px;animation:appear .6s .7s both}.chinese i{height:3px;width:48px;background:#76988a;box-shadow:0 5px #d8c28e}.slogan{font-size:14px;letter-spacing:3px;line-height:1.9;margin:16px 0 25px;animation:appear .6s .9s both}.mobile-break{display:none}.start{display:inline-flex;align-items:center;gap:17px;padding:17px 30px;min-height:60px;border:3px solid #63897f;box-shadow:inset 3px 3px #ead1a6,inset -3px -3px #bd9176,5px 5px #78998b;background:#e1b38f;color:#334f5b;text-decoration:none;font-size:19px;font-weight:900;animation:appear .6s 1.1s both;transition:background .2s,translate .2s}.start:hover{background:#ebc39b;translate:0 -2px}.start:active{translate:3px 3px;box-shadow:1px 1px #78998b}.en{font:bold 11px monospace;letter-spacing:1px}.arrow{font-size:14px;animation:prompt 1.8s steps(2,end) infinite}.rules{font:bold 9px monospace;letter-spacing:2px;margin-top:23px;animation:appear .6s 1.3s both}.rules span{margin:0 8px;color:#6b8d80}.cast{position:absolute;inset:0;pointer-events:none;z-index:1}.actor{position:absolute;bottom:10.5%;width:180px;text-align:center;animation:walk-in 1s steps(8,end) .45s both}.actor img{height:260px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(6px 6px #546d6540);animation:bob 2.8s steps(4,end) infinite}.actor span{font:bold 10px monospace;letter-spacing:2px;display:block;margin-bottom:10px}.wanan{left:8%;--from:-220px}.puma{right:8%;--from:220px}.puma img{animation-delay:-1.4s}footer{position:absolute;bottom:20px;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#405e59;z-index:3}footer span:last-child{font-family:monospace;letter-spacing:2px}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,transparent 0 3px,#517a6a0b 3px 4px)}.transition{position:absolute;inset:0;background:#6c9587;z-index:10;pointer-events:none;transform:translateY(100%);transition:transform .35s steps(8,end)}.entering .transition{transform:translateY(0)}.paused *{animation-play-state:paused!important}@keyframes title-drop{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}@keyframes appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes walk-in{from{opacity:0;translate:var(--from) 0}to{opacity:1;translate:0 0}}@keyframes bob{50%{transform:translateY(-5px)}}@keyframes drift{to{transform:translateX(45px)}}@keyframes prompt{50%{opacity:.35}}@keyframes spark{50%{scale:.7;rotate:20deg}}
@media(max-width:700px) and (orientation:portrait){.screen{min-height:600px;border-width:6px}header{padding:14px 12px;gap:12px}header>span{font-size:7px;letter-spacing:0}.tiny-brand{font-size:11px}button{padding:6px;font-size:9px;min-height:32px}.title-scene{top:17%;width:92%}.edition{font-size:7px;letter-spacing:1px}h1{font-size:clamp(66px,17vw,108px);margin:20px 0}.spark{font-size:20px;right:7%}.chinese{font-size:21px;gap:12px;letter-spacing:4px;margin-top:22px}.chinese i{width:30px}.slogan{font-size:12px;letter-spacing:1px;margin:15px 0 21px}.start{font-size:16px;padding:14px 22px;gap:12px;min-height:54px}.en{font-size:9px}.rules{font-size:8px;letter-spacing:1px;margin-top:19px}.rules span{margin:0 4px}.actor{bottom:9%;width:100px}.actor img{height:156px}.actor span{font-size:7px;letter-spacing:1px;margin-bottom:4px}.wanan{left:9%}.puma{right:9%}.sun{width:80px;height:80px;right:9%;top:13%}.skyline{height:28%;gap:7px}.ground{height:11%}.mountains,.skyline{bottom:11%}footer{left:10px;right:10px;bottom:13px;display:block;text-align:center;font-size:8px;line-height:1.8}footer span{display:block}footer span:last-child{font-size:7px;letter-spacing:1px}.spark{right:5%}}
@media(orientation:landscape) and (max-height:650px){.screen{min-height:0;border-width:5px}header{padding:9px 14px}header>span{font-size:7px}button{min-height:28px;padding:4px 8px;font-size:9px}.title-scene{top:16%;width:65%}.edition{font-size:7px;letter-spacing:1px}h1{font-size:clamp(48px,15vh,86px);margin:12px 0 10px;text-shadow:2px 0 #516f72,-2px 0 #516f72,0 -2px #516f72,0 2px #516f72,4px 5px #b18164,6px 7px #516f72}.chinese{font-size:18px;margin-top:12px;gap:12px;letter-spacing:4px}.slogan{font-size:10px;margin:8px 0 12px;letter-spacing:1px}.start{min-height:42px;padding:9px 20px;font-size:14px;gap:12px}.rules{margin-top:12px;font-size:7px}.actor{width:110px;bottom:11%}.actor img{height:170px}.actor span{font-size:8px}.wanan{left:5%}.puma{right:5%}.spark{font-size:20px}.sun{width:70px;height:70px;top:19%}footer{bottom:9px;font-size:7px}.skyline{height:40%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#motion{display:none}}
/* Keep entry on the actor; patrol the image without moving its label. */
.actor{--patrol:22px}.actor img{animation:welcome-patrol 5s ease-in-out 1.5s infinite}.puma img{animation-delay:1.8s;animation-direction:reverse}
@keyframes welcome-patrol{0%,100%{transform:translateX(-16px) translateY(0) rotate(-.5deg)}20%{transform:translateX(0) translateY(-4px) rotate(.5deg)}40%{transform:translateX(var(--patrol)) translateY(0) rotate(-.5deg)}60%{transform:translateX(var(--patrol)) translateY(-4px) rotate(.5deg)}80%{transform:translateX(0) translateY(0) rotate(-.5deg)}}
@media(max-width:700px) and (orientation:portrait){.actor{--patrol:12px}@keyframes welcome-patrol{0%,100%{transform:translateX(-9px) translateY(0)}25%{transform:translateX(2px) translateY(-3px)}50%{transform:translateX(var(--patrol)) translateY(0)}75%{transform:translateX(2px) translateY(-3px)}}}
@media(prefers-reduced-motion:reduce){.actor,.actor img{animation:none!important;transform:none!important}}
/* Faster, wider patrol closer to the title's center axis. */
.wanan{left:22%}.puma{right:22%}.actor{--patrol:44px}.actor img{animation:welcome-fast-patrol 2.6s ease-in-out 1.2s infinite}.puma img{animation-delay:1.45s;animation-direction:reverse}
@keyframes welcome-fast-patrol{0%,100%{transform:translate(-36px,0) rotate(-.8deg)}25%{transform:translate(4px,-6px) rotate(.8deg)}50%{transform:translate(var(--patrol),0) rotate(-.8deg)}75%{transform:translate(4px,-6px) rotate(.8deg)}}
@media(max-width:700px) and (orientation:portrait){.wanan{left:17%}.puma{right:17%}.actor{--patrol:22px}.actor img{animation-duration:2.4s}@keyframes welcome-fast-patrol{0%,100%{transform:translate(-20px,0) rotate(-.7deg)}25%{transform:translate(1px,-4px) rotate(.7deg)}50%{transform:translate(var(--patrol),0) rotate(-.7deg)}75%{transform:translate(1px,-4px) rotate(.7deg)}}}
@media(orientation:landscape) and (max-height:650px){.wanan{left:18%}.puma{right:18%}.actor{--patrol:30px}}
@media(prefers-reduced-motion:reduce){.actor,.actor img{animation:none!important;transform:none!important}}
/* Bold POP player labels, without character names. */
.actor>span{font-family:Impact,'Arial Black','Microsoft JhengHei',sans-serif;font-size:44px;font-weight:1000;line-height:1.1;font-style:italic;letter-spacing:2px;color:#efd49a;-webkit-text-stroke:2px #456776;paint-order:stroke fill;text-shadow:3px 3px #b18164,5px 5px #456776;margin-bottom:15px;transform:rotate(-6deg)}.puma>span{color:#e9b598;transform:rotate(6deg)}
@media(max-width:700px) and (orientation:portrait){.actor>span{font-size:32px;margin-bottom:10px;-webkit-text-stroke:1.5px #456776;text-shadow:2px 2px #b18164,4px 4px #456776}}
@media(orientation:landscape) and (max-height:650px){.actor>span{font-size:30px;margin-bottom:10px;-webkit-text-stroke:1.5px #456776;text-shadow:2px 2px #b18164,4px 4px #456776}}
.welcome-rank{margin-left:auto;color:#365563;font-size:12px;font-weight:bold;letter-spacing:0}header button{margin-left:0}@media(max-width:700px){header>span{display:none}.welcome-rank{font-size:10px}}
/* High-visibility ranking entry preview. */
header .welcome-rank{background:#e3bd8f;border:3px solid #60887f;box-shadow:3px 3px #8eaa96;padding:11px 21px;font-size:16px;font-weight:900;letter-spacing:1px;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:6px;color:#345a65}header .welcome-rank:before{content:'★';color:#6e6454}header .welcome-rank:hover{background:#edcc9e;translate:0 -2px}@media(max-width:700px){header .welcome-rank{padding:8px 10px;font-size:13px;border-width:2px;min-height:38px}}@media(orientation:landscape) and (max-height:650px){header .welcome-rank{padding:5px 13px;min-height:32px;font-size:12px}}
/* Larger, readable welcome typography across desktop and phones. */
header{font-size:13px;letter-spacing:1.5px}.tiny-brand{font-size:19px}.edition{font-size:13px;letter-spacing:2px}h1{font-size:clamp(80px,9.2vw,158px)}.chinese{font-size:34px;letter-spacing:8px}.slogan{font-size:19px;letter-spacing:2px;line-height:1.8;margin:18px 0 24px}.start{font-size:24px;padding:18px 32px;min-height:66px}.en{font-size:14px}.arrow{font-size:18px}.rules{font-size:13px;letter-spacing:1px;line-height:1.7;margin-top:21px}header .welcome-rank{font-size:18px}header button{font-size:13px;min-height:40px}footer{font-size:12px;line-height:1.6}footer span:last-child{letter-spacing:.5px}.title-scene{top:16%}
@media(max-width:700px) and (orientation:portrait){header{padding:13px 10px;gap:8px}.tiny-brand{font-size:14px}header .welcome-rank{font-size:15px;padding:8px 10px}header button{font-size:11px;min-height:36px;padding:7px}.title-scene{top:16%;width:94%}.edition{font-size:10px;letter-spacing:.5px}h1{font-size:clamp(76px,19vw,118px);margin:20px 0}.chinese{font-size:27px;letter-spacing:5px;margin-top:23px;gap:12px}.chinese i{width:26px}.slogan{font-size:16px;letter-spacing:.5px;line-height:1.8;margin:17px 0 20px}.mobile-break{display:block}.start{font-size:20px;gap:12px;padding:15px 18px;min-height:58px}.en{font-size:12px}.arrow{font-size:15px}.rules{font-size:11px;letter-spacing:0;margin-top:19px;line-height:1.7}.rules span{margin:0 3px}.actor>span{font-size:36px}.actor img{height:145px}footer{font-size:10px;line-height:1.7;bottom:10px}footer span:last-child{font-size:10px;letter-spacing:0}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.title-scene{top:13%}h1{font-size:clamp(65px,17vw,95px);margin:15px 0}.chinese{font-size:24px;margin-top:15px}.slogan{font-size:15px;margin:12px 0 15px}.start{min-height:50px;padding:11px 16px}.rules{font-size:10px;margin-top:14px}.actor img{height:112px}.actor{bottom:9%}.actor>span{font-size:28px;margin-bottom:5px}}
@media(orientation:landscape) and (max-height:650px){header{padding:8px 13px}.tiny-brand{font-size:14px}header .welcome-rank{font-size:14px;min-height:32px;padding:5px 12px}header button{font-size:11px;min-height:30px;padding:4px 8px}.title-scene{top:16%;width:64%}.edition{font-size:9px;letter-spacing:.5px}h1{font-size:clamp(48px,14vh,82px);margin:10px 0}.chinese{font-size:23px;letter-spacing:4px;gap:10px;margin-top:12px}.slogan{font-size:13px;line-height:1.6;letter-spacing:0;margin:8px 0 10px}.start{font-size:18px;padding:9px 18px;min-height:43px;gap:10px}.en{font-size:11px}.rules{font-size:10px;margin-top:11px;line-height:1.5}.actor>span{font-size:33px}.actor img{height:150px}.actor{width:100px}.wanan{left:12%}.puma{right:12%}footer{font-size:9px;bottom:7px}footer span:last-child{letter-spacing:0}.mobile-break{display:none}}
/* Larger cast: 1.5× previous image heights, with separate responsive placement. */
.actor{width:270px}.actor img{height:390px;max-width:none}.wanan{left:12%}.puma{right:12%}
@media(max-width:700px) and (orientation:portrait){.screen{min-height:760px}.title-scene{top:10.5%}.actor{width:140px;bottom:9%}.actor img{height:217.5px;max-width:100%}.wanan{left:9%}.puma{right:9%}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.title-scene{top:11%}.actor img{height:168px}.actor{bottom:9%}}
@media(orientation:landscape) and (max-height:650px){.actor{width:150px;bottom:10%}.actor img{height:225px;max-width:none}.wanan{left:3%}.puma{right:3%}.actor>span{font-size:31px}.title-scene{width:60%}}
@media(max-width:700px) and (orientation:portrait){.actor{bottom:6%}}
/* Normalize cutout visual heights, not image canvas width. */
.actor img{max-width:none;width:auto}.puma img{height:401.6px;margin-bottom:-7px}
@media(max-width:700px) and (orientation:portrait){.actor img{height:217.5px;max-width:none}.puma img{height:224px;margin-bottom:-4px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.actor img{height:168px}.puma img{height:173px;margin-bottom:-3px}}
@media(orientation:landscape) and (max-height:650px){.actor img{height:225px}.puma img{height:231.7px;margin-bottom:-4px}}
/* Full-viewport welcome: fit elements independently, never letterbox the page. */
@media(min-width:701px) and (min-height:651px), (min-width:1101px){
body{margin:0;min-height:0;height:100dvh;overflow:hidden;display:block;background:#b6d1c5}
.screen{--home-unit:min(1vw,1.6dvh);width:100%;height:100dvh;min-height:0;aspect-ratio:auto;margin:0;border-width:clamp(5px,.52vw,10px);container-type:normal}
header{padding:calc(var(--home-unit) * 1.15) calc(var(--home-unit) * 1.55);gap:calc(var(--home-unit) * 1.3);font-size:calc(var(--home-unit) * .68);letter-spacing:calc(var(--home-unit) * .08)}.tiny-brand{font-size:calc(var(--home-unit) * .99)}header>span{font-size:calc(var(--home-unit) * .68)}header .welcome-rank{font-size:calc(var(--home-unit) * .94);padding:calc(var(--home-unit) * .57) calc(var(--home-unit) * 1.1);border-width:calc(var(--home-unit) * .16);min-height:calc(var(--home-unit) * 2.3);box-shadow:calc(var(--home-unit) * .16) calc(var(--home-unit) * .16) #8eaa96}header button{font-size:calc(var(--home-unit) * .68);padding:calc(var(--home-unit) * .42) calc(var(--home-unit) * .63);min-height:calc(var(--home-unit) * 2.1);border-width:calc(var(--home-unit) * .1)}.music-control summary{font-size:calc(var(--home-unit) * .63);padding:calc(var(--home-unit) * .37) calc(var(--home-unit) * .52);min-height:calc(var(--home-unit) * 1.7)}.title-scene{top:16%;width:calc(var(--home-unit) * 37.5)}.edition{font-size:calc(var(--home-unit) * .68);letter-spacing:calc(var(--home-unit) * .1)}h1{font-size:calc(var(--home-unit) * 8.23);margin:calc(var(--home-unit) * 1.15) 0 calc(var(--home-unit) * .94);letter-spacing:calc(var(--home-unit) * .16);line-height:.86;text-shadow:calc(var(--home-unit) * .21) 0 #516f72,calc(var(--home-unit) * -.21) 0 #516f72,0 calc(var(--home-unit) * -.21) #516f72,0 calc(var(--home-unit) * .21) #516f72,calc(var(--home-unit) * .36) calc(var(--home-unit) * .42) #b18164,calc(var(--home-unit) * .57) calc(var(--home-unit) * .63) #516f72}.spark{font-size:calc(var(--home-unit) * 1.67);right:5%}.chinese{font-size:calc(var(--home-unit) * 1.77);letter-spacing:calc(var(--home-unit) * .42);margin-top:calc(var(--home-unit) * 1.25);gap:calc(var(--home-unit) * 1.15)}.chinese i{width:calc(var(--home-unit) * 2.5);height:calc(var(--home-unit) * .16);box-shadow:0 calc(var(--home-unit) * .26) #d8c28e}.slogan{font-size:calc(var(--home-unit) * .99);letter-spacing:calc(var(--home-unit) * .1);line-height:1.8;margin:calc(var(--home-unit) * .94) 0 calc(var(--home-unit) * 1.25)}.mobile-break{display:none}.start{font-size:calc(var(--home-unit) * 1.25);padding:calc(var(--home-unit) * .94) calc(var(--home-unit) * 1.67);min-height:calc(var(--home-unit) * 3.44);gap:calc(var(--home-unit) * .89);border-width:calc(var(--home-unit) * .16);box-shadow:inset calc(var(--home-unit) * .16) calc(var(--home-unit) * .16) #ead1a6,inset calc(var(--home-unit) * -.16) calc(var(--home-unit) * -.16) #bd9176,calc(var(--home-unit) * .26) calc(var(--home-unit) * .26) #78998b}.en{font-size:calc(var(--home-unit) * .73);letter-spacing:calc(var(--home-unit) * .05)}.arrow{font-size:calc(var(--home-unit) * .94)}.rules{font-size:calc(var(--home-unit) * .68);letter-spacing:calc(var(--home-unit) * .05);line-height:1.7;margin-top:calc(var(--home-unit) * 1.1)}.rules span{margin:0 calc(var(--home-unit) * .42)}.actor{width:calc(var(--home-unit) * 14.06);bottom:10.5%;--walk-distance:calc(var(--home-unit) * 2.1)}.wanan{left:12%}.puma{right:12%}.actor img{height:calc(var(--home-unit) * 20.31);width:auto;max-width:none;animation-name:proportional-patrol}.puma img{height:calc(var(--home-unit) * 20.92);margin-bottom:calc(var(--home-unit) * -.36)}.actor>span{font-size:calc(var(--home-unit) * 2.29);margin-bottom:calc(var(--home-unit) * .78);letter-spacing:calc(var(--home-unit) * .1);-webkit-text-stroke:calc(var(--home-unit) * .1) #456776;text-shadow:calc(var(--home-unit) * .16) calc(var(--home-unit) * .16) #b18164,calc(var(--home-unit) * .26) calc(var(--home-unit) * .26) #456776}footer{font-size:calc(var(--home-unit) * .63);bottom:calc(var(--home-unit) * 1.04);left:calc(var(--home-unit) * 1.3);right:calc(var(--home-unit) * 1.3);line-height:1.6}footer span:last-child{font-size:calc(var(--home-unit) * .63);letter-spacing:calc(var(--home-unit) * .03)}.sun{width:calc(var(--home-unit) * 6.5);height:calc(var(--home-unit) * 6.5)}.cloud{width:calc(var(--home-unit) * 7.8);height:calc(var(--home-unit) * .94)}
}
@keyframes proportional-patrol{0%,100%{transform:translate(calc(-1 * var(--walk-distance)),0) rotate(-.8deg)}25%{transform:translate(0,calc(var(--home-unit) * -.3)) rotate(.8deg)}50%{transform:translate(var(--walk-distance),0) rotate(-.8deg)}75%{transform:translate(0,calc(var(--home-unit) * -.3)) rotate(.8deg)}}

/* The background always covers the viewport, including shorter portrait phones. */
.screen{min-height:0;height:100dvh;width:100%;aspect-ratio:auto}
@media(max-width:700px) and (orientation:portrait){.screen{min-height:0;height:100dvh}}