:root{--lime:#d2fa77;--paper:#f1f3e9;--muted:#a3b0a7}*{box-sizing:border-box}body{background:#080f0c;color:var(--paper);margin:0;font-family:Arial,'Microsoft YaHei',sans-serif}body>.topbar,body>main{display:none}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:disabled{opacity:.4;cursor:default}#app{width:100%;max-width:480px;min-height:100dvh;margin:auto;background:#101c16;position:relative;overflow:hidden}#app .page{padding:22px 20px 100px;min-height:100dvh;background:radial-gradient(ellipse at 90% 0,#2b3c2a 0,transparent 55%)}#app h1{font-size:30px;line-height:1.25;margin:24px 0 12px}#app h2{font-size:21px;margin:24px 0 14px}#app p{color:var(--muted);font-size:12px;line-height:1.9}#app small{color:var(--muted)}.appbar{height:44px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.appbrand{display:flex;gap:9px;align-items:center;font-weight:900;font-size:20px;font-style:italic}.appbrand img{width:42px}.appbrand small{display:block;font-size:8px;letter-spacing:5px;font-style:normal;margin-top:2px}.icon-button,.back{width:42px;height:42px;border:1px solid #a6b7a62a;border-radius:50%;background:#11221980;color:#eef4ea;display:grid;place-items:center}.icon{width:24px;height:24px;filter:invert(88%) sepia(12%) saturate(360%) hue-rotate(60deg)}.homeview{padding:20px 16px 90px;position:relative;isolation:isolate}.homeview:before{content:'';position:absolute;inset:0 0 auto;height:580px;z-index:-1;background:linear-gradient(0deg,#101c16 0%,transparent 28%,#08130d30),url('assets/backgrounds/home-court.webp') center top/cover}.hero{height:330px;padding:20px 7px}.hero h1{font-size:40px!important;font-style:italic;font-weight:950;letter-spacing:-2px;margin:25px 0 14px!important;text-shadow:0 3px 20px #0005}.hero h1 em{color:var(--lime);font-style:inherit}.hero p{font-size:11px!important}.bests{border:1px solid #d2fa7730;background:#101c16b8;border-radius:16px;padding:12px 14px;width:240px;backdrop-filter:blur(5px)}.bests>small{display:block;text-align:center;font-size:10px;margin-bottom:8px}.bestvalues{display:flex;gap:22px}.bestvalues>div{border-left:2px solid var(--lime);padding-left:9px}.bestvalues span{font-size:10px;color:#b9c1b8;display:block}.bestvalues b{font-size:28px;font-style:italic}.bestvalues small{font-size:12px}.starstrip{display:flex;align-items:center;gap:10px;width:100%;height:72px;background:linear-gradient(110deg,#344c23,#11221bbf);border:1px solid #cfec9d30;border-radius:13px;color:var(--paper);text-align:left;overflow:hidden}.starstrip img{width:102px;height:80px;object-fit:cover;align-self:end}.starstrip small{font-size:11px;display:block;margin-bottom:5px}.starstrip b{font-size:16px}.starstrip>span:last-child{margin-left:auto;margin-right:13px;color:var(--lime);font-size:12px;white-space:nowrap}.modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:18px 0}.mode-tile{border:1px solid #9cab9b38;color:var(--paper);background:#15251cbd;border-radius:13px;padding:13px 5px;min-height:95px}.mode-tile .icon{display:block;margin:0 auto 7px;width:27px;height:27px}.mode-tile b{font-size:15px;display:block}.mode-tile small{display:block;font-size:10px;margin-top:5px}.mode-tile.selected{border:2px solid var(--lime);background:#304326;box-shadow:0 0 14px #c7ed6220}.cta,.outline{display:block;width:100%;min-height:49px;border-radius:11px;font-weight:700;margin-top:12px;padding:13px;border:1px solid #a6bc9e42;background:transparent;color:var(--paper)}.cta{background:linear-gradient(110deg,#d5ff7c,#c9f464);border-color:#e3ffad;color:#14200e;font-size:18px}.daily-mobile{margin:22px 5px 0}.daily-mobile>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:13px}.daily-mobile strong{font-size:21px;color:var(--lime)}.textbutton{border:0;background:none;color:var(--lime);padding:8px;font-size:12px}.rewards{display:flex;justify-content:space-between;margin-top:15px;position:relative}.rewards:before{content:'';height:2px;background:#62715e;position:absolute;left:15%;right:15%;top:30px}.reward{position:relative;text-align:center;width:30%;font-size:11px;color:#b7c2b6}.reward i{display:grid;place-items:center;margin:0 auto 9px;background:#233227;border:1px solid #8b9d87;width:28px;height:37px;border-radius:4px;color:#d7e8c9;font-style:normal;transform:rotate(8deg)}.reward.done i{background:var(--lime);color:#172212}.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);height:70px;padding-bottom:env(safe-area-inset-bottom);display:flex;background:#0c1813f5;border-top:1px solid #b0c2a633;z-index:5;backdrop-filter:blur(16px)}.bottomnav button{flex:1;border:0;color:#b5c1b3;background:none;font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px}.bottomnav .active{color:var(--lime);border-bottom:3px solid var(--lime)}.pagehead{display:flex;align-items:center;gap:13px;margin-bottom:25px}.pagehead strong{font-size:17px}.kicker{font-size:9px;letter-spacing:2px;color:var(--lime)}.tabs{display:flex;gap:6px;margin:18px 0}.tabs button{background:#17281f;border:1px solid #778a7333;border-radius:20px;padding:9px 15px;color:#b5c1b3;font-size:12px}.tabs button.active{background:var(--lime);color:#132011}.roster{display:grid;grid-template-columns:1fr 1fr;gap:12px}.starcard{position:relative;border:1px solid #94b17e42;border-radius:14px;overflow:hidden;min-width:0;background:linear-gradient(145deg,#31472b,#101e18);padding:12px 10px 15px;color:var(--paper);text-align:left}.starcard.active{border-color:var(--lime)}.starcard.locked img{filter:grayscale(1);opacity:.5}.starcard .tag{font-size:9px;color:var(--lime);position:relative;z-index:1}.starcard .jersey{position:absolute;top:30px;left:10px;font-size:65px;font-weight:900;font-style:italic;color:#d9f1b818}.starcard img{position:relative;width:calc(100% + 20px);margin:0 -10px;height:120px;object-fit:cover;object-position:center top}.starcard b{display:block;font-size:14px;margin-top:4px}.starcard small{font-size:10px;display:block;margin-top:5px}.detailhero{position:relative;height:270px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at bottom,#607a3a66,transparent 65%)}.detailhero>strong{font-size:180px;position:absolute;inset:0;color:#cee8a116;font-style:italic}.detailhero img{height:100%;max-width:140%;position:relative;object-fit:contain}.detailname{text-align:center;margin-top:-6px}.detailname h1{margin:8px 0!important}.ratings{background:#1b2c20;border:1px solid #8ea77b30;border-radius:14px;padding:18px;margin:20px 0}.ratingrow{display:grid;grid-template-columns:40px 1fr 30px;align-items:center;gap:14px;font-size:12px;margin-bottom:17px}.ratingrow:last-child{margin-bottom:0}.ratingrow i{height:5px;background:#3c4b36;border-radius:3px}.ratingrow i span{display:block;height:5px;background:var(--lime);border-radius:3px}.ratingrow b{text-align:right;color:var(--lime)}.infobox{padding:16px;background:#1d30214d;border:1px solid #7e977329;border-radius:13px;margin:14px 0}.infobox p{margin:0}.spotoptions{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.spotoptions button{padding:12px 2px;border:1px solid #93a58140;background:#203222;color:#d8e3cc;font-size:11px;border-radius:8px}.spotoptions .chosen{background:var(--lime);color:#16200f}.reveal{text-align:center}.revealcard{margin:25px auto;width:245px;border:1px solid #cee78a;border-radius:18px;background:radial-gradient(ellipse at 50% 20%,#728140,#1b2b1c 70%);padding:20px 12px;box-shadow:0 0 65px #ccfc6b15;animation:reveal .5s ease-out}.revealcard img{width:100%;height:190px;object-fit:cover}.revealcard .mystery{height:190px;font-size:130px;font-style:italic;color:var(--lime);font-weight:900}.revealcard h2{margin:0!important}.revealcard p{margin:10px 0 0}.resultnum{font-size:100px;font-weight:900;font-style:italic;color:var(--lime);line-height:1.2;margin:16px 0}.resultnum small{font-size:20px}.metrics{display:flex;background:#1c2b20;border-radius:12px;margin:20px 0;padding:17px 0}.metrics div{flex:1;text-align:center;border-right:1px solid #a9ba9430}.metrics div:last-child{border:0}.metrics b{font-size:22px;display:block}.metrics span{font-size:10px;color:#aabb9f;display:block;margin-top:5px}.positionline{display:flex;justify-content:space-between;border-bottom:1px solid #8b9f7c25;padding:11px 0;font-size:12px}.settingrow{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #8b9f7c25}.settingrow input{accent-color:var(--lime);width:22px;height:22px}.empty{padding:55px 15px;text-align:center;color:#a4b09d}.empty .icon{height:50px;width:50px;margin-bottom:15px}body.playing #app{display:none}body.playing>main{display:block;padding:0;max-width:480px;margin:auto}body.playing .workspace{display:block}body.playing .court-panel{width:100%;height:100dvh;min-height:580px;border:0;border-radius:0}body.playing #gameSide,body.playing footer{display:none!important}body.playing #scoreboard{top:max(25px,env(safe-area-inset-top));left:22px;right:22px}body.playing .game-bottom{bottom:max(22px,env(safe-area-inset-bottom));left:22px;right:22px}body.playing #shoot{background:var(--lime);color:#1a2715;border-radius:12px;min-height:58px}body.playing #feedback{top:27%;font-size:22px;text-shadow:0 2px 8px #000}body.playing #endPractice{display:block}#modal{max-width:430px;width:calc(100% - 32px);border-radius:20px}#modal .close{min-width:40px;min-height:40px}.toast{z-index:50}.assist-off .meter{visibility:hidden} @keyframes reveal{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}@media(min-width:600px){#app,body.playing>main{box-shadow:0 0 100px #0009}body{background:radial-gradient(ellipse at top,#263327,#080f0c 65%)}}@media(max-width:360px){.hero h1{font-size:35px!important}.hero{height:310px}.starstrip b{font-size:14px}.starstrip img{width:85px}.mode-tile b{font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
body.playing .game-bottom{transform:none;width:auto;background:linear-gradient(0deg,#0e1c15ee,#0e1c1588 75%,transparent);padding:16px 0 0;border-radius:14px}body.playing .shot-row{padding:12px;background:#17261dd9;border:1px solid #b4cc9230;border-radius:10px;font-size:11px}body.playing .meter{height:12px;margin:14px 0}body.playing #shoot{font-size:23px;font-style:italic}body.playing #shoot span{font-size:11px;font-style:normal}body.playing .game-help{font-size:10px}.reduced *{animation:none!important;transition:none!important}.hero{height:310px}.daily-mobile{margin-top:18px}.reward i{height:30px}.reward{font-size:10px}.homeview{padding-bottom:95px}
body.playing .sweet{background:#c9f46477;border:1px solid #d2fa77;box-shadow:0 0 10px #c9f46433}body.playing #scoreboard .clock strong{color:var(--lime)}body.playing .game-bottom{background:linear-gradient(0deg,#0e1c15e8,transparent)}.reveal>.bests{margin:auto}.page>.bests{width:100%}.page>.bests .bestvalues{justify-content:space-around}.page>.bests .bestvalues b{font-size:34px}
.homeview .hero{height:355px;padding-top:5px}.homeview .hero h1{margin-top:20px!important}.homeview .starstrip{height:62px}.homeview .modes{margin:15px 0}.homeview .mode-tile{min-height:82px;padding:9px 4px}.homeview .mode-tile .icon{width:23px;height:23px;margin-bottom:5px}.bottomnav button{flex-direction:column;gap:4px;font-size:12px}.bottomnav{height:70px}.homeview .bests{width:220px}.homeview .bestvalues{gap:16px}.homeview .hero p{margin:18px 0 14px}.homeview .cta{font-size:22px;font-style:italic}

.homeview .starstrip img{height:62px;width:90px;object-fit:contain}.homeview .daily-mobile{margin-top:12px}.homeview .rewards{margin-top:10px}
/* Shot outcome is centered above the held ball and never blocks touch input. */
body.playing #feedback{top:43%;left:16px;right:16px;width:auto;transform:translateY(-50%);text-align:center;font-size:clamp(32px,9vw,44px);font-weight:900;line-height:1.25;letter-spacing:1px;pointer-events:none;z-index:4;text-shadow:0 3px 6px #000,0 0 24px #07120ee6}
body.playing #feedback small{font-size:14px;font-weight:600;line-height:1.6;letter-spacing:0;margin-top:10px;color:#f1f4e9}
body.playing #feedback>span{font-size:30px;margin-left:8px}
body.playing.hard-mode .meter{visibility:hidden!important}
.mode-tile[data-choice="hard"] b{font-size:13px}
body.playing #feedback.flash{animation:shot-feedback .25s ease-out}
@keyframes shot-feedback{from{transform:translateY(-50%) scale(.86);opacity:.3}to{transform:translateY(-50%) scale(1);opacity:1}}
/* SHOOTER KING brand lockup */
.appbrand{gap:8px;font-size:21px;letter-spacing:-.5px}.appbrand img{width:44px;height:44px;object-fit:contain}.appbrand small{font-size:8px;letter-spacing:2px;margin-top:4px}.revealcard .mystery{display:grid;place-items:center}.revealcard .mystery img{width:125px;height:125px;object-fit:contain}@media(max-width:360px){.appbrand{font-size:19px}.appbrand img{width:38px;height:38px}}
