@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#101713;--panel:#19221c;--line:#354037;--muted:#879789;--cream:#ecefdf;--lime:#d3f76b;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:'DM Sans',sans-serif;height:100svh;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{color:inherit}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}.shell{max-width:1600px;height:100%;margin:auto;padding:0 4.5%;display:flex;flex-direction:column}header{height:82px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-1px}.brandmark{font-size:29px;color:var(--lime);margin-right:8px}.brand-light{font-weight:400}.version{font:10px var(--mono);color:var(--muted);margin-left:10px}.header-right{display:flex;align-items:center;gap:25px}.connection{font:10px var(--mono);letter-spacing:1px}i{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:7px;box-shadow:0 0 9px #d3f76455}.icon-button{border:1px solid var(--line);background:transparent;border-radius:50%;width:34px;height:34px;color:var(--muted)}.icon-button[aria-pressed=true]{background:var(--lime);color:var(--bg)}main{flex:1;min-height:0;display:flex;flex-direction:column}.intro{display:flex;justify-content:space-between;align-items:center;padding:26px 0 25px;flex-shrink:0}.eyebrow{font:9px var(--mono);letter-spacing:1.5px;color:var(--muted)}.intro .eyebrow{color:var(--lime);display:flex;align-items:center;gap:8px}.intro .eyebrow span{width:5px;height:5px;background:var(--lime)}h1{font:500 clamp(36px,4.6vw,70px)/.99 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:16px 0 14px;position:relative}h1 em{font-weight:400;color:var(--lime);font-family:Georgia,serif}.heading-star{position:absolute;font-size:58px;color:var(--lime);left:calc(100% + 35px);top:40px;animation:none}.intro p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}.intro-note{align-self:flex-end;display:flex;flex-direction:column;text-align:right;gap:8px;font:9px var(--mono);letter-spacing:1px;color:var(--muted);position:relative;padding-bottom:6px}.tiny-plant{font-size:75px;color:#516347;position:absolute;right:35px;bottom:45px}.playground{display:grid;grid-template-columns:1.27fr 1fr;gap:18px;flex:1;min-height:0;padding-bottom:16px}.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.panel-top{display:flex;align-items:center;justify-content:space-between}.court{padding:21px;display:flex;flex-direction:column}.pill{border:1px solid #516244;color:var(--lime);font:8px var(--mono);border-radius:20px;padding:6px 9px}.pill i{width:4px;height:4px;margin:0 0 0 5px}.court-heading{display:flex;justify-content:space-between;align-items:center;margin:13px 0}h2{font:500 24px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.8px;margin:0}.score{display:flex;align-items:center;gap:8px}.score b{font:30px 'Space Grotesk',sans-serif;color:var(--lime)}.score small{font:8px var(--mono);color:var(--muted)}.court-scene{position:relative;flex:1;min-height:100px;background:#243b30;border-radius:7px;overflow:hidden;isolation:isolate;background-image:radial-gradient(ellipse at 70% 20%,#63784a88,transparent 65%),linear-gradient(#1c3029,#46654c)}.scene-grain{position:absolute;inset:0;opacity:.14;background-image:url('../img/noise.svg');z-index:8;pointer-events:none}.moon{position:absolute;right:21%;top:11%;height:50px;width:50px;background:#d4dc9a;border-radius:50%;box-shadow:0 0 70px #d4dc9a33}.landscape{position:absolute;inset:35% -10% 0;background:#1a332b;clip-path:polygon(0 32%,14% 5%,23% 26%,40% 0,55% 29%,69% 2%,90% 30%,100% 7%,100% 100%,0 100%)}.tree{position:absolute;bottom:20%;width:100px;height:90%;background:#132c24;clip-path:polygon(50% 0,67% 26%,59% 26%,82% 51%,71% 51%,100% 80%,56% 80%,56% 100%,44% 100%,44% 80%,0 80%,29% 51%,18% 51%,41% 26%,33% 26%)}.tree-one{left:2%;transform:scale(1.4)}.tree-two{left:20%;height:65%;opacity:.8}.tree-three{right:-5%;transform:scale(1.7)}.court-floor{position:absolute;inset:61% -30% -40%;background:#869578;transform:perspective(250px) rotateX(40deg);border-top:2px solid #c1d0a4;background-image:linear-gradient(90deg,transparent 49.8%,#c2ceac 50%,transparent 50.2%)}.court-circle{position:absolute;width:180px;height:100px;border:2px solid #c2ceac;border-radius:50%;top:32%;left:calc(50% - 90px)}.court-line{position:absolute;top:0;left:35%;width:30%;height:30%;border:2px solid #c2ceac;border-top:0}.line-two{top:0;left:41%;width:18%;height:16%}.backboard{position:absolute;width:85px;height:56px;border:3px solid #dbe3c5;left:calc(50% - 42px);top:22%;background:#c6d3ba19;box-shadow:2px 3px 0 #11251e}.backboard:after{content:'';position:absolute;width:5px;height:150px;background:#192e24;top:54px;left:38px;z-index:-1}.board-square{width:31px;height:25px;border:2px solid #dbe3c5;position:absolute;bottom:4px;left:24px}.rim{position:absolute;left:21px;bottom:-6px;width:39px;height:9px;border:3px solid #f5aa6d;border-radius:50%;z-index:2}.net{position:absolute;width:30px;height:25px;left:25px;top:54px;border:1px solid #dbe3c5;clip-path:polygon(0 0,100% 0,75% 100%,25% 100%);background:repeating-linear-gradient(65deg,transparent 0 7px,#dbe3c588 8px 9px),repeating-linear-gradient(-65deg,transparent 0 7px,#dbe3c588 8px 9px)}.ball{position:absolute;width:49px;height:49px;bottom:13%;left:calc(50% - 24px);border-radius:50%;background:radial-gradient(circle at 30% 25%,#f8ad6a,#d67438);border:2px solid #472d20;box-shadow:0 12px 9px #142a2455;overflow:hidden;z-index:4}.ball:before,.ball:after,.ball span{content:'';position:absolute;border:1.5px solid #593624;border-radius:50%}.ball:before{width:70px;height:70px;left:-48px;top:-12px}.ball:after{width:70px;height:70px;right:-48px;top:-12px}.ball span{width:70px;height:1px;top:23px;left:-10px;transform:rotate(-20deg)}.scene-caption{position:absolute;bottom:12px;left:14px;right:14px;display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:1px;color:#24372a}.shot-result{position:absolute;top:9%;left:12px;color:var(--lime);font:700 19px 'Space Grotesk',sans-serif;z-index:9}.court-controls{display:flex;gap:16px;align-items:center;padding-top:17px}.shot-instructions{flex-shrink:0;display:flex;flex-direction:column;gap:5px;font-size:11px}.shot-instructions small{font:7px var(--mono);color:var(--muted)}.power-track{position:relative;height:6px;flex:1;background:#3e4a3d;border-radius:5px}.sweet-spot{position:absolute;left:42%;width:20%;height:100%;background:var(--lime)}.needle{position:absolute;height:16px;width:3px;background:var(--cream);top:-5px;left:0}.primary{border:0;border-radius:6px;background:var(--lime);color:#192211;font-size:11px;padding:13px 15px;white-space:nowrap}.primary span{margin-left:17px;font-size:16px}.side-panels{display:grid;grid-template-rows:1.12fr 1fr;gap:18px;min-height:0}.terminal,.magic{padding:20px;display:flex;flex-direction:column;min-height:0}.terminal-dots{font-size:8px;letter-spacing:4px;color:#657063}.terminal h2{font-size:21px;margin:13px 0}.terminal-screen{background:#101813;border:1px solid #29382c;border-radius:5px;padding:13px;font:10px/1.8 var(--mono);flex:1;min-height:0}.terminal-green{color:var(--lime)}.terminal-muted{color:#687c6b}.terminal-screen form{display:flex;gap:10px;align-items:center;margin-top:5px}.terminal-screen input{min-width:0;width:100%;background:none;border:0;color:var(--cream);font:10px var(--mono);outline-offset:1px}.terminal-screen button{border:0;background:none;color:var(--muted)}.terminal-footer{display:flex;justify-content:space-between;font:7px var(--mono);color:var(--muted);padding-top:12px;letter-spacing:.7px}.terminal-footer i{width:4px;height:4px;margin-right:4px}.magic{background:#dfe6c9;color:#243225;border:0}.magic .eyebrow{color:#657359}.suits{font:14px Georgia,serif;letter-spacing:3px}.magic-content{display:flex;justify-content:space-between;gap:10px;align-items:center;flex:1;min-height:0}.magic h2{font-size:26px}.magic p{font-size:10px;line-height:1.6;color:#657359;margin:9px 0}.text-button{border:0;background:none;padding:0;color:var(--muted);font:9px var(--mono)}.magic .text-button{color:#34492c;font-size:8px;border-bottom:1px solid #9bac87;padding-bottom:4px}.cards{position:relative;display:flex;align-items:center;justify-content:center;height:115px;width:185px;flex-shrink:0}.playing-card{position:absolute;width:72px;height:108px;top:4px;border:4px solid #f4f5e9;border-radius:6px;background:#203a2f;color:#c9de9b;box-shadow:0 5px 12px #29362125;background-image:repeating-linear-gradient(45deg,transparent 0 5px,#9aae8022 5px 6px)}.playing-card:nth-child(1){transform:rotate(-17deg);left:15px}.playing-card:nth-child(2){left:57px;top:0}.playing-card:nth-child(3){transform:rotate(17deg);left:99px}.playing-card:hover,.playing-card:focus-visible{translate:0 -9px;z-index:3}.card-art{font-size:34px;display:block;border:1px solid #98b176;margin:7px 2px;line-height:60px}.card-corner,.card-bottom{position:absolute;font:12px Georgia,serif;left:3px;top:2px}.card-bottom{left:auto;top:auto;right:3px;bottom:2px;transform:rotate(180deg)}.playing-card.revealed{background:#f4f5e9;color:#34492c;z-index:4;translate:0 -8px}.playing-card.revealed .card-art{border:none;font-size:40px}.magic-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b9c4a7;padding-top:9px;font:7px var(--mono);letter-spacing:.5px;color:#627355}.magic-footer>span:last-child{font-size:18px}footer{height:43px;flex-shrink:0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);color:var(--muted);letter-spacing:.6px}footer>div{display:flex;gap:8px;align-items:center}.footer-leaf{font-size:19px;color:var(--lime)}.shooting{animation:shot 850ms ease-in-out}.missed{animation:miss 850ms ease-in-out}@keyframes shot{0%{bottom:13%}45%{bottom:80%;transform:scale(.65) rotate(160deg)}70%{bottom:61%;transform:scale(.55) rotate(240deg)}100%{bottom:13%;transform:rotate(360deg)}}@keyframes miss{0%{bottom:13%}45%{bottom:79%;transform:translateX(55px) scale(.7) rotate(160deg)}75%{bottom:25%;transform:translateX(90px) scale(.7) rotate(240deg)}100%{bottom:13%;transform:rotate(360deg)}}@keyframes rotate{to{transform:rotate(360deg)}}
@media(min-height:850px) and (min-width:760px){.intro{padding:40px 0}h1{font-size:78px}.terminal-screen{font-size:12px;line-height:2}.terminal-screen input{font-size:12px}.cards{transform:scale(1.2);margin-right:20px}.magic h2{font-size:32px}}
@media(max-width:900px){.shell{padding:0 3%}.court{padding:16px}.terminal,.magic{padding:15px}.court-controls{gap:9px}.shot-instructions small{font-size:6px}.primary{padding:12px 9px}.primary span{margin-left:7px}.cards{width:150px;transform:scale(.83);transform-origin:right center;margin-left:-25px}.magic h2{font-size:23px}.terminal h2{font-size:18px}}
@media(max-width:640px){header{height:54px}.brand{font-size:14px}.brandmark{font-size:24px;margin-right:2px}.version{display:none}.connection{font-size:7px;letter-spacing:0}.header-right{gap:10px}.icon-button{width:28px;height:28px}.intro{padding:17px 0 14px}.intro .eyebrow{font-size:7px;letter-spacing:.8px}h1{font-size:39px;letter-spacing:-2px;margin:10px 0}.heading-star{font-size:34px;left:calc(100% + 20px);top:20px}.intro p{font-size:9px}.intro-note{display:none}.playground{grid-template-columns:1fr;grid-template-rows:1.13fr 1fr;gap:10px;padding-bottom:8px}.court{padding:12px}.court-heading{margin:7px 0}h2{font-size:20px}.panel-top .eyebrow{font-size:7px;letter-spacing:.8px}.pill{font-size:6px;padding:4px 6px}.score b{font-size:22px}.score small{font-size:6px}.court-controls{padding-top:10px}.shot-instructions{font-size:9px}.primary{font-size:10px;padding:9px 11px}.side-panels{grid-template-columns:1.05fr 1fr;grid-template-rows:1fr;gap:10px}.terminal,.magic{padding:11px}.terminal h2{font-size:14px;letter-spacing:-.5px;margin:9px 0}.terminal-screen{font-size:7px;line-height:1.8;padding:8px}.terminal-screen input{font-size:8px}.terminal-dots{display:none}.terminal-footer{font-size:5px;letter-spacing:0;padding-top:7px}.terminal-footer>span:last-child{display:none}.magic-content{flex-direction:column;align-items:flex-start;gap:0}.magic h2{font-size:18px;margin-top:9px}.magic h2 br{display:none}.magic p{font-size:8px;margin:4px 0}.magic p br{display:none}.magic .text-button{font-size:6px}.cards{height:90px;align-self:center;transform:scale(.64);transform-origin:center top;margin:6px 0 -30px;width:180px}.magic-footer{font-size:5px;letter-spacing:0;padding-top:5px}.magic-footer>span:last-child{display:none}.suits{font-size:9px;letter-spacing:1px}footer{height:29px;font-size:6px;letter-spacing:0}footer>div{display:none}footer .text-button{font-size:7px}.moon{height:30px;width:30px}.backboard{transform:scale(.7);transform-origin:center top}.ball{width:35px;height:35px;left:calc(50% - 17px)}.ball span{top:15px}.scene-caption{font-size:5px;bottom:7px}.shot-result{font-size:13px}}
@media(max-height:700px) and (min-width:641px){header{height:58px}.intro{padding:16px 0}h1{font-size:44px;margin:10px 0}.intro p{font-size:10px}.terminal,.magic,.court{padding:14px}.terminal-screen{font-size:9px;line-height:1.6}.terminal h2{margin:10px 0}.magic h2{font-size:23px}.cards{transform:scale(.85);transform-origin:right center}.court-controls{padding-top:12px}}
@media(max-height:720px) and (max-width:640px){.intro{padding:10px 0}h1{font-size:31px;margin:7px 0}.intro p{font-size:8px}.intro .eyebrow{font-size:6px}.terminal-screen{font-size:6px;padding:6px}.terminal h2{font-size:12px;margin:6px 0}.magic h2{font-size:15px;margin-top:5px}.magic p{font-size:7px}.cards{transform:scale(.5);height:70px;margin-bottom:-28px}.court-scene{min-height:60px}.court-heading{margin:4px 0}.court-controls{padding-top:7px}.primary{padding:7px 9px}.terminal-screen form{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
.court-scene.breathing .moon{animation:breathe 10s ease-in-out infinite}@keyframes breathe{0%,100%{box-shadow:0 0 30px #d4dc9a33;scale:1}40%{box-shadow:0 0 100px #d4dc9a88;scale:1.25}}
@media(max-height:500px) and (orientation:landscape){header{height:40px}.intro{padding:7px 0}.intro .eyebrow,.intro p,.intro-note{display:none}h1{font-size:27px;margin:3px 0}h1 br{display:none}.heading-star{font-size:24px;top:0}.playground{grid-template-columns:1.1fr 1fr;grid-template-rows:1fr}.side-panels{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.court{padding:10px}.terminal,.magic{padding:8px}.terminal h2{font-size:13px;margin:5px 0}.terminal-screen{font-size:7px;line-height:1.3;padding:5px}.terminal-screen input{font-size:8px}.terminal-footer{display:none}.magic-content{flex-direction:row}.magic h2{font-size:17px;margin:4px 0}.magic p{font-size:8px}.cards{transform:scale(.6);transform-origin:right center;height:60px;margin:-10px 0;width:145px}.playing-card{top:-15px}.playing-card:nth-child(2){top:-19px}.magic-footer{font-size:5px;padding-top:4px}footer{height:23px}}
@media(min-width:641px) and (max-height:750px){.intro{padding:13px 0}.intro h1{font-size:42px}.magic h2{font-size:21px}.magic h2 br{display:none}.magic p{margin:6px 0;font-size:9px}.magic-content{gap:8px}.magic-footer{padding-top:5px}.magic-footer>span:last-child{font-size:13px}.cards{height:95px;transform:scale(.75)}.terminal-screen{line-height:1.5;font-size:9px}}
footer{overflow:hidden}.terminal-screen{overflow:hidden}.scene-caption>span:last-child{font-variant-emoji:text}
@media(min-width:641px) and (min-height:501px){.side-panels{grid-template-rows:1.35fr 1fr}.terminal-screen{font-size:9px;line-height:1.6;padding:9px}.terminal-screen input{font-size:9px}.magic h2{font-size:25px}.magic-content{position:relative}.cards{transform:scale(.9);transform-origin:right center}.magic p{max-width:200px}}
@media(min-width:641px) and (max-height:750px){.terminal-screen{font-size:8px;line-height:1.5;padding:7px}.terminal h2{font-size:18px;margin:8px 0}.magic h2{font-size:20px}.magic p{font-size:8px;margin:4px 0}.cards{transform:scale(.65);height:85px}.magic-footer{font-size:6px}}
@media(max-width:640px){.magic h2{line-height:1.15}.cards{margin-top:2px;margin-bottom:-24px}.magic-copy{width:100%}}
@media(max-height:500px) and (orientation:landscape){.terminal h2{display:none}.terminal-screen{margin-top:6px;line-height:1.3}.terminal-screen>div:nth-child(2),.terminal-screen>div:nth-child(3),.terminal-screen>div:nth-child(4){display:none}.terminal-screen form{margin-top:2px}}
/* Living landscape and collectible sunshine. */
.intro{position:relative;padding-top:55px}.intro-topline{position:absolute;top:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.fork-code{font:11px var(--mono);color:var(--muted);white-space:nowrap;letter-spacing:1px}.tiny-plant{width:75px;height:85px;object-fit:contain}
.ball{background:url('../img/basketball.svg') center/contain no-repeat;border:0;overflow:visible;filter:drop-shadow(0 7px 4px #142a2455);box-shadow:none;aspect-ratio:1}.ball:before,.ball:after{display:none}
#magic-title{white-space:nowrap;font-size:clamp(15px,1.7vw,25px)}.magic-copy{min-width:0}.card-logo,.card-bonus{display:none}.suns-card .card-art{visibility:hidden}.suns-card .card-logo{display:block;position:absolute;left:3px;top:18px;width:58px;height:65px;object-fit:contain}.suns-card .card-bonus{display:block;position:absolute;left:0;right:0;bottom:4px;color:#c76521;font:700 12px 'Space Grotesk',sans-serif}.suns-card{animation:suns-reveal 900ms ease-out;box-shadow:0 0 26px #ef9a4277}.score{position:relative}.score-bonus{position:absolute;right:0;top:0;color:#ffb567;font:700 23px 'Space Grotesk',sans-serif;opacity:0;pointer-events:none}.score-bonus.celebrating{animation:bonus-rise 1.4s ease-out}.score:has(.celebrating) b{animation:score-flash 1.4s ease-out}@keyframes suns-reveal{0%{filter:brightness(2);scale:.8}50%{scale:1.12}100%{filter:brightness(1);scale:1}}@keyframes bonus-rise{0%{opacity:0;translate:0 0;scale:.6}20%{opacity:1;scale:1.15}75%{opacity:1}100%{opacity:0;translate:0 -45px;scale:1}}@keyframes score-flash{25%{color:#ffad58;text-shadow:0 0 20px #ffad5899}100%{color:var(--lime)}}
@media(min-height:850px) and (min-width:760px){.intro{padding-top:65px}.intro-topline{top:30px}}
@media(max-width:640px){.intro{padding-top:35px}.intro-topline{top:14px}.fork-code{font-size:8px;letter-spacing:0}.intro-topline .eyebrow{font-size:6px;letter-spacing:.2px;gap:4px}#magic-title{font-size:clamp(11px,3.2vw,18px);letter-spacing:-.5px}.score-bonus{font-size:17px}.suns-card .card-logo{width:58px}}
@media(max-height:750px) and (min-width:641px){.intro{padding-top:35px}.intro-topline{top:12px}#magic-title{font-size:clamp(13px,1.65vw,20px)}}
@media(max-height:720px) and (max-width:640px){.intro{padding-top:28px}.intro-topline{top:9px}}
@media(max-height:500px) and (orientation:landscape){.intro{padding-top:24px}.intro-topline{top:7px}.intro-topline .eyebrow{display:flex;font-size:6px}.fork-code{font-size:8px}#magic-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){.landscape,.tree,.court-scene:before,.court-scene:after,.suns-card,.score-bonus.celebrating,.score:has(.celebrating) b{animation:none}.score-bonus.celebrating{opacity:1;translate:0 -20px}}
.magic .panel-top{flex-shrink:0}.magic-content{align-items:flex-start;padding-top:9px}.magic-copy{align-self:center}.cards{align-self:center}.magic p{line-height:1.4}
@media(min-width:641px){.magic-copy{align-self:flex-start}.magic p{margin:6px 0}}
@media(max-height:500px) and (orientation:landscape){.magic-content{padding-top:5px}.magic p{margin:3px 0}}
/* Six sky scenes; JavaScript rotates a shuffled playlist every five minutes. */
.primary{display:flex;align-items:center;justify-content:center;gap:8px;font:700 20px 'Space Grotesk',sans-serif;letter-spacing:1px;padding:10px 14px}.primary img{width:23px;height:23px}.sky-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}.sky-effects>div{display:none}.weather-birds{position:absolute;left:-20%;top:15%;width:100px;height:45px;color:#dce6b9}.weather-birds span{position:absolute;width:24px;height:12px;animation:wingbeat .8s ease-in-out infinite alternate}.weather-birds span:nth-child(2){left:27px;top:12px;animation-delay:-.3s}.weather-birds span:nth-child(3){left:50px;top:23px;animation-delay:-.5s}.weather-birds span:nth-child(4){left:70px;top:8px;animation-delay:-.1s}.weather-birds svg{width:100%;height:100%}[data-weather=birds] .weather-birds{display:block;animation:bird-flight 18s linear infinite}
.weather-airplane{position:absolute;top:13%;left:-20%;width:48px;color:#e0e8cb}.weather-airplane:after{content:'';position:absolute;right:90%;top:47%;width:110px;height:2px;background:linear-gradient(90deg,transparent,#e0e8cb66)}.weather-airplane svg{display:block;width:100%}[data-weather=airplane] .weather-airplane{display:block;animation:plane-flight 26s linear infinite}
.weather-star{position:absolute;width:90px;height:2px;left:73%;top:8%;background:linear-gradient(90deg,transparent,#edf7ce);transform:rotate(145deg);opacity:0}.weather-star:after{content:'';position:absolute;right:0;top:-1px;width:4px;height:4px;background:#fff7d0;box-shadow:0 0 14px #edffc4;border-radius:50%}[data-weather=star] .weather-star{display:block;animation:meteor-flight 17s ease-out infinite}
.weather-clouds{position:absolute;inset:0}.weather-clouds span{position:absolute;top:10%;left:-25%;width:110px;height:25px;border-radius:50%;background:#c6d4bd66;filter:blur(3px);animation:cloud-flight 40s linear infinite}.weather-clouds span:before,.weather-clouds span:after{content:'';position:absolute;background:inherit;border-radius:50%;width:50px;height:35px;left:20px;bottom:2px}.weather-clouds span:after{left:52px;height:27px}.weather-clouds span:nth-child(2){top:25%;animation-duration:52s;animation-delay:-20s;opacity:.6}.weather-clouds span:nth-child(3){top:6%;animation-duration:64s;animation-delay:-39s;opacity:.8;scale:1.3}[data-weather=clouds] .weather-clouds,[data-weather=rain] .weather-clouds,[data-weather=thunder] .weather-clouds{display:block}
.weather-rain{position:absolute;inset:-30%;background-image:repeating-linear-gradient(105deg,transparent 0 25px,#d2e5d233 26px 27px,transparent 28px 53px);background-size:65px 85px;mask-image:repeating-linear-gradient(0deg,#000 0 12px,transparent 12px 36px);animation:rain-fall .7s linear infinite}[data-weather=rain] .weather-rain,[data-weather=thunder] .weather-rain{display:block}.weather-thunder{position:absolute;inset:0;background:#eef7d2;opacity:0}.weather-thunder svg{position:absolute;right:25%;top:4%;height:55%;width:45px;filter:drop-shadow(0 0 9px #f8ffdf)}[data-weather=thunder] .weather-thunder{display:block;animation:thunder-flash 13s linear infinite}[data-weather=rain],[data-weather=thunder]{background-image:linear-gradient(#172822,#34473b)}[data-weather=rain] .moon,[data-weather=thunder] .moon{opacity:.35}
@keyframes wingbeat{from{scale:1 .7}to{scale:1 1.15}}@keyframes bird-flight{0%{left:-25%;translate:0 10px}85%,100%{left:120%;translate:0 -12px}}@keyframes plane-flight{0%{left:-25%;translate:0 15px}75%,100%{left:120%;translate:0 -20px}}@keyframes meteor-flight{0%,82%{opacity:0;translate:0 0}83%{opacity:1}92%{opacity:0;translate:-230px 120px}100%{opacity:0;translate:-230px 120px}}@keyframes cloud-flight{to{left:120%}}@keyframes rain-fall{to{background-position:-32px 85px}}@keyframes thunder-flash{0%,70%,78%,100%{opacity:0}74%{opacity:.42}76%{opacity:.1}}
.card-back{position:absolute;width:42px;height:60px;left:11px;top:20px;object-fit:contain;filter:brightness(1.8)}.playing-card:not(.revealed) .card-art{visibility:hidden}.playing-card.revealed .card-back{display:none}.playing-card.chosen{outline:2px solid #df9754;outline-offset:2px}.playing-card.revealed:not(.chosen){translate:0 0;filter:brightness(.9)}.card-art{font-family:'Space Grotesk',sans-serif;font-weight:600}.cards{width:210px}.playing-card:nth-child(1){left:0;transform:rotate(-8deg)}.playing-card:nth-child(2){left:70px;transform:none}.playing-card:nth-child(3){left:140px;transform:rotate(8deg)}
#terminal-output{line-height:1.4;overflow-wrap:anywhere}.terminal-screen{display:flex;flex-direction:column}.terminal-screen form{flex-shrink:0;margin-top:auto;padding-top:5px}#terminal-output{flex:1;min-height:0;overflow:hidden}.court-scene.breathing .moon{animation:none}.landscape,.tree{animation:none}.court-scene:before,.court-scene:after{display:none}
@media(max-width:900px){.primary{font-size:18px;padding:9px 11px}.primary img{width:20px;height:20px}.cards{width:210px;margin-left:-50px}}
@media(max-width:640px){.primary{font-size:17px;padding:8px 11px;gap:6px}.primary img{width:20px;height:20px}.cards{width:210px;margin-left:0}.magic-content{padding-top:5px}}
@media(max-height:500px) and (orientation:landscape){.primary{font-size:17px}.cards{width:210px;margin-left:-65px}.terminal-screen form{padding-top:3px}}
@media(prefers-reduced-motion:reduce){.sky-effects *{animation:none!important}.weather-clouds span{left:25%}.weather-clouds span:nth-child(2){left:60%}.weather-birds{left:20%}.weather-airplane{left:65%}.weather-rain{opacity:.45}}
.terminal-screen.interacted>div:nth-child(2),.terminal-screen.interacted>div:nth-child(3),.terminal-screen.interacted>div:nth-child(4){display:none}.terminal-screen.interacted #terminal-output{padding-top:5px}
/* Rim and mesh sit in front of the descending ball, with the board behind it. */
.backboard{z-index:3}.hoop{position:absolute;width:85px;height:56px;border:3px solid transparent;left:calc(50% - 42px);top:22%;z-index:5;pointer-events:none}.hoop .rim{border-top-color:#cf824b;border-bottom-color:#ffd09a}.hoop .net{transform-origin:50% 0}.ball{z-index:4;filter:none}.ball-shadow{position:absolute;width:43px;height:10px;left:calc(50% - 21px);bottom:calc(13% - 4px);border-radius:50%;background:#13251c;opacity:.35;filter:blur(3px);z-index:3}.playing-card:disabled{cursor:default}.playing-card:disabled:hover{translate:0 0}.playing-card.chosen:disabled:hover{translate:0 -8px}.text-button:disabled{opacity:.5;cursor:wait}
.weather-birds span{animation:none;width:27px;height:17px}.weather-birds svg{overflow:visible}.bird-wing{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transform-box:view-box;transform-origin:20px 12px;animation:graceful-wing 2.8s ease-in-out infinite}.bird-wing-right{animation-name:graceful-wing-right}.bird-body{fill:currentColor}.weather-birds span:nth-child(2) .bird-wing{animation-delay:-.8s;animation-duration:3.2s}.weather-birds span:nth-child(3) .bird-wing{animation-delay:-1.7s;animation-duration:3s}.weather-birds span:nth-child(4) .bird-wing{animation-delay:-.4s;animation-duration:3.5s}
@keyframes graceful-wing{0%,100%{transform:rotate(9deg) scaleY(1)}30%{transform:rotate(-16deg) scaleY(.85)}55%,75%{transform:rotate(2deg) scaleY(.95)}}@keyframes graceful-wing-right{0%,100%{transform:rotate(-9deg) scaleY(1)}30%{transform:rotate(16deg) scaleY(.85)}55%,75%{transform:rotate(-2deg) scaleY(.95)}}
@media(max-width:640px){.hoop{transform:scale(.7);transform-origin:center top}.ball-shadow{width:31px;height:7px;left:calc(50% - 15px)}}
@media(prefers-reduced-motion:reduce){.bird-wing{animation:none}}
.game-timer{display:flex;align-items:center;gap:7px;font-size:8px}.game-timer #game-clock{font-size:13px;font-variant-numeric:tabular-nums}.game-timer.time-low{color:#ffb567;border-color:#b88145}.game-timer.time-low i{background:#ffb567}#game-over{display:none;position:absolute;inset:0;z-index:20;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px;text-align:center;background:#101713ee;color:var(--cream);overflow:hidden}#game-over.visible{display:flex}#game-over .eyebrow{font-size:8px}#game-over h2{font-size:23px;margin:0}.final-label{font:8px var(--mono);letter-spacing:2px;color:var(--muted);margin:0}#final-score{display:block;font:700 58px/.95 'Space Grotesk',sans-serif;color:var(--lime)}#final-summary{font:9px/1.4 var(--mono);color:var(--muted);margin:0}#play-again{margin:0;font-size:15px;letter-spacing:0;min-width:145px;padding:9px 14px}#play-again span{margin-left:8px}
@media(max-width:640px){.game-timer{gap:5px;font-size:6px}.game-timer #game-clock{font-size:11px}}
[data-weather=birds] .weather-birds{animation:bird-flight 18s linear 1 forwards}[data-weather=airplane] .weather-airplane{animation:plane-flight 26s linear 1 forwards}[data-weather=birds][data-direction=left] .weather-birds{animation-name:bird-flight-left}[data-weather=airplane][data-direction=left] .weather-airplane{animation-name:plane-flight-left}[data-direction=left] .weather-airplane svg{transform:scaleX(-1)}[data-direction=left] .weather-airplane:after{right:auto;left:90%;background:linear-gradient(90deg,#e0e8cb66,transparent)}
@keyframes bird-flight{from{left:-25%;translate:0 10px}to{left:120%;translate:0 -12px}}@keyframes bird-flight-left{from{left:120%;translate:0 10px}to{left:-25%;translate:0 -12px}}@keyframes plane-flight{from{left:-25%;translate:0 15px}to{left:120%;translate:0 -20px}}@keyframes plane-flight-left{from{left:120%;translate:0 15px}to{left:-25%;translate:0 -20px}}
@media(prefers-reduced-motion:reduce){[data-weather=birds] .weather-birds,[data-weather=airplane] .weather-airplane{animation:none}}

[data-weather=star] .weather-star{animation:meteor-flight 3s ease-in 1 forwards}
@keyframes meteor-flight{0%{opacity:0;translate:0 0}10%,65%{opacity:1}95%,100%{opacity:0;translate:-230px 120px}}
@media(max-width:640px){#game-over{gap:4px;padding:8px}#game-over .eyebrow{font-size:6px}#game-over h2{font-size:16px}#final-score{font-size:36px}#final-summary{font-size:7px}#play-again{font-size:12px;padding:6px 12px;min-width:125px}}
@media(max-height:720px) and (max-width:640px){#game-over .eyebrow{display:none}#game-over{gap:3px}#game-over h2{font-size:14px}#final-score{font-size:28px}#final-summary{font-size:6px}#play-again{padding:5px 10px}}
@media(prefers-reduced-motion:reduce){[data-weather=star] .weather-star{animation:none}}
.court-scene{container-type:size;container-name:court-view}
@container court-view (max-height:205px){#game-over{gap:4px;padding:9px}#game-over .eyebrow{font-size:6px}#game-over h2{font-size:17px}#final-score{font-size:36px}.final-label{font-size:7px}#final-summary{font-size:7px}#play-again{font-size:12px;padding:6px 12px;min-width:125px}}
@container court-view (max-height:140px){#game-over{gap:3px;padding:6px}#game-over .eyebrow{display:none}#game-over h2{font-size:14px}#final-score{font-size:28px}.final-label{font-size:6px}#final-summary{font-size:6px}#play-again{font-size:11px;padding:5px 10px}}
@container court-view (max-height:120px){#game-over.visible{display:grid;grid-template-columns:.7fr 1.3fr;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:3px 8px;padding:6px}#game-over h2{grid-column:1/-1;grid-row:1;font-size:12px}.final-label{grid-column:1;grid-row:2}#final-score{grid-column:1;grid-row:3;font-size:28px}#final-summary{grid-column:2;grid-row:2;font-size:6px}#play-again{grid-column:2;grid-row:3;font-size:11px;padding:5px 10px;min-width:110px}}
.court-actions{display:grid;flex-shrink:0}.court-controls,.replay-controls{grid-area:1/1}.replay-controls{display:none;align-items:center;justify-content:center;padding-top:17px}.court-actions.finished .court-controls{visibility:hidden;pointer-events:none}.court-actions.finished .replay-controls{display:flex}.replay-controls #play-again{font-size:17px;padding:10px 20px;min-width:170px}.best-score{font:8px var(--mono);letter-spacing:1px;color:var(--muted);margin:0}.best-score strong{color:var(--lime);font:700 12px 'Space Grotesk',sans-serif;margin-left:5px}
@media(max-width:640px){.replay-controls{padding-top:10px}.replay-controls #play-again{font-size:15px;padding:8px 18px}.best-score{font-size:7px}.best-score strong{font-size:10px}}
@media(max-height:720px) and (max-width:640px){.replay-controls{padding-top:7px}}
@container court-view (max-height:205px){.best-score{font-size:7px}.best-score strong{font-size:10px}}
@container court-view (max-height:120px){#final-summary{grid-column:1/-1;grid-row:4}.best-score{grid-column:2;grid-row:3;align-self:center;font-size:6px;letter-spacing:.5px}.best-score strong{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.court-scene{min-height:80px}.replay-controls{padding-top:12px}.replay-controls #play-again{font-size:15px;padding:7px 18px}}
@media(max-height:500px) and (orientation:landscape){.court-heading{margin:6px 0}.court-heading h2{font-size:20px}.score b{font-size:22px;line-height:1.1}.court .pill{padding:4px 6px}.court .game-timer #game-clock{font-size:11px}}