*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020914;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;overflow-x:hidden}.page-shell{min-height:100vh}
.hero{position:relative;min-height:100vh;overflow:hidden;background:#031125}
.hero-bg{position:absolute;inset:0;background-image:url('basketball-approved-bg.png');background-size:cover;background-position:center 42%;transform:scale(1.025)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,7,20,.92),rgba(3,16,45,.67) 24%,rgba(1,7,20,.62) 68%,rgba(1,7,20,.92))}
.hero-content{position:relative;z-index:2;width:min(1180px,96vw);min-height:100vh;margin:auto;padding:14px 14px 38px;text-align:center;display:flex;flex-direction:column;align-items:center}
 .brand{display:block;width:min(360px,65vw);text-decoration:none;position:relative;z-index:8}
.brand img{display:block;width:100%;height:auto;filter:none!important;mix-blend-mode:normal!important;opacity:1!important;transform:none!important}
.title-wrap{margin-top:2px;text-shadow:0 5px 20px rgba(0,0,0,.95)}
h1{margin:0;font-size:clamp(2.25rem,6vw,5.4rem);line-height:.92;letter-spacing:-.045em;font-style:italic;font-weight:1000;color:#f5f8ff}
h1 span{color:#ffb21f}h1 strong{color:#ffc21a}.subtitle{margin:10px 0 0;font-size:clamp(.72rem,1.6vw,1rem);font-weight:900;letter-spacing:.1em}
.game-card{width:min(880px,96vw);margin-top:18px;padding:14px;border:1px solid rgba(67,201,255,.5);border-radius:26px;background:linear-gradient(180deg,rgba(2,16,36,.84),rgba(2,7,18,.94));box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 38px rgba(0,157,255,.16);backdrop-filter:blur(6px)}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.hud>div{padding:10px 8px;border-radius:16px;background:linear-gradient(180deg,#0a2d59,#05172f);border:1px solid #159eff;box-shadow:inset 0 0 20px rgba(0,174,255,.12)}.hud small{display:block;font-size:.68rem;letter-spacing:.12em;color:#8cdcff}.hud b{display:block;margin-top:2px;font-size:1.55rem}
.court{position:relative;height:430px;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 50% 30%,rgba(24,98,180,.62),rgba(2,12,29,.95) 56%),linear-gradient(180deg,#071b38,#050b16);border:1px solid rgba(255,255,255,.14)}
.court:before{content:"";position:absolute;left:-15%;right:-15%;bottom:-18%;height:55%;border-radius:50% 50% 0 0;border:3px solid rgba(255,174,20,.42);box-shadow:0 0 18px rgba(255,154,0,.18)}
.backboard{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:210px;height:120px;border:8px solid rgba(230,247,255,.96);background:rgba(170,220,255,.08);box-shadow:0 0 24px rgba(80,201,255,.55)}
.backboard:after{content:"";position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:72px;height:50px;border:4px solid #ff9c17}
.rim{position:absolute;top:155px;left:50%;transform:translateX(-50%);width:110px;height:18px;border-radius:50%;border:6px solid #ff6b17;box-shadow:0 0 18px rgba(255,100,20,.85);z-index:4}.net{position:absolute;top:169px;left:50%;transform:translateX(-50%);width:82px;height:74px;clip-path:polygon(5% 0,95% 0,75% 100%,25% 100%);background:repeating-linear-gradient(65deg,transparent 0 9px,rgba(255,255,255,.7) 10px 12px),repeating-linear-gradient(-65deg,transparent 0 9px,rgba(255,255,255,.7) 10px 12px);opacity:.75}
.sweetspot{position:absolute;left:50%;top:143px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,205,38,.85);box-shadow:0 0 22px rgba(255,198,28,.75);opacity:.42}
.ball{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffb34f 0 8%,#f77d16 28%,#c44a09 70%,#782203 100%);border:3px solid #351508;box-shadow:0 10px 20px rgba(0,0,0,.45),inset -10px -12px 20px rgba(80,20,0,.35);z-index:6;transition:left .18s ease}
.ball:before,.ball:after{content:"";position:absolute;inset:10px;border:3px solid rgba(45,18,7,.9);border-left-color:transparent;border-right-color:transparent;border-radius:50%;transform:rotate(28deg)}.ball:after{transform:rotate(-28deg)}
.message{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:clamp(1.2rem,4vw,2.35rem);font-weight:1000;letter-spacing:.05em;color:#fff;text-shadow:0 0 18px #009dff,0 3px 10px #000;z-index:10;pointer-events:none}.message.good{color:#ffce38;text-shadow:0 0 20px #ff8c00}.message.miss{color:#ff5a5a;text-shadow:0 0 18px #ff2020}
.ball.shoot{animation:shoot .72s cubic-bezier(.2,.7,.2,1)}@keyframes shoot{0%{bottom:30px;transform:translateX(-50%) scale(1) rotate(0)}45%{bottom:255px;transform:translateX(-50%) scale(.68) rotate(290deg)}72%{bottom:245px;transform:translateX(-50%) scale(.54) rotate(420deg)}100%{bottom:30px;transform:translateX(-50%) scale(1) rotate(600deg)}}
.power-wrap{margin:14px 4px 2px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}.power-wrap span{font-size:.72rem;font-weight:900;letter-spacing:.12em;color:#a8dcff}.power-track{position:relative;height:18px;border-radius:999px;background:linear-gradient(90deg,#12385a 0 34%,#f6b51a 34% 62%,#12385a 62%);border:1px solid #1aa3ff;overflow:visible}.power-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(0,190,255,.14),rgba(255,174,18,.16))}.power-marker{position:absolute;top:50%;left:0;width:12px;height:28px;border-radius:6px;background:#fff;box-shadow:0 0 12px #20c8ff;transform:translate(-50%,-50%)}
.controls{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}.btn{min-width:180px;padding:14px 22px;border-radius:16px;border:1px solid #1aa5ff;color:#fff;font-weight:1000;font-size:1rem;letter-spacing:.05em;cursor:pointer}.btn.primary{background:linear-gradient(180deg,#087be5,#03499f);box-shadow:0 0 22px rgba(0,174,255,.35)}.btn.secondary{background:linear-gradient(180deg,#27384f,#101a28)}.btn:disabled{opacity:.45;cursor:not-allowed}.hint{margin:12px 8px 2px;font-size:.78rem;line-height:1.45;color:#b9d8ef}
@media(max-width:640px){.hero-content{padding:10px 8px 24px}.brand{width:min(285px,76vw)}h1{font-size:clamp(2rem,11vw,3.45rem)}.subtitle{line-height:1.35}.game-card{margin-top:14px;padding:10px;border-radius:20px}.hud{gap:6px}.hud>div{padding:8px 4px}.hud small{font-size:.55rem}.hud b{font-size:1.16rem}.court{height:360px}.backboard{top:48px;width:170px;height:100px}.rim{top:134px;width:92px}.net{top:148px}.sweetspot{top:124px}.ball{width:66px;height:66px}.btn{min-width:145px;padding:13px 16px}.hint{font-size:.72rem}}


/* V5 GAMEPLAY EFFECTS — logo asset preserved exactly */
.court.swish{animation:courtSwish .5s ease}
@keyframes courtSwish{0%,100%{box-shadow:none}35%{box-shadow:inset 0 0 90px rgba(255,190,20,.5),0 0 42px rgba(0,190,255,.45)}}
.rim.swish{animation:rimPulse .55s ease}
@keyframes rimPulse{0%,100%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.18);box-shadow:0 0 38px rgba(255,194,33,1)}}
.net.swish{animation:netSnap .6s ease}
@keyframes netSnap{0%,100%{transform:translateX(-50%) scaleY(1)}35%{transform:translateX(-50%) scaleY(1.22)}}
.score-pop{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font-weight:1000;font-size:clamp(2rem,8vw,4.6rem);color:#ffd447;text-shadow:0 0 18px #ff9c00,0 5px 18px #000;opacity:0;pointer-events:none;z-index:20}
.score-pop.show{animation:scorePop .8s cubic-bezier(.2,.9,.2,1)}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%{opacity:1;transform:translate(-50%,-62%) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%) scale(.9)}}
.swish-flash{position:absolute;inset:0;pointer-events:none;z-index:15;opacity:0;background:radial-gradient(circle at 50% 38%,rgba(255,214,72,.55),rgba(0,167,255,.18) 35%,transparent 68%)}
.swish-flash.show{animation:swishFlash .48s ease}
@keyframes swishFlash{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
.message.combo{color:#65e7ff;text-shadow:0 0 22px #00aaff,0 3px 10px #000}
.ball.misskick{animation:missKick .55s ease}
@keyframes missKick{0%,100%{filter:none}40%{filter:saturate(.75) brightness(.8)}}
@media(max-width:640px){.score-pop{top:43%}}


/* V6 PWA / INSTALL */
.install-btn{margin:14px auto 2px;display:block;width:min(390px,92%);padding:14px 18px;border-radius:16px;border:1px solid #23b8ff;background:linear-gradient(180deg,#0b8ff0,#0550a6);color:#fff;font-weight:1000;font-size:.92rem;letter-spacing:.07em;cursor:pointer;box-shadow:0 0 24px rgba(0,174,255,.28)}
.install-btn:active{transform:translateY(1px)}
.splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 35%,#0a2f63 0,#031229 45%,#010713 100%);opacity:1;visibility:visible;transition:opacity .45s ease,visibility .45s ease}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash img{width:min(420px,78vw);height:auto;filter:none!important;mix-blend-mode:normal!important}
.splash strong{font-size:clamp(1.4rem,5vw,2.5rem);letter-spacing:.06em;color:#fff;text-shadow:0 0 20px #00a8ff}
@media(max-width:640px){.install-btn{font-size:.82rem;padding:13px 14px}.splash img{width:min(310px,80vw)}}

/* V7 FINAL POLISH */
.fulltime-panel{display:none;margin:16px auto 0;width:min(520px,94%);padding:20px 18px 18px;border-radius:22px;border:1px solid rgba(255,198,33,.72);background:linear-gradient(180deg,rgba(10,35,72,.97),rgba(3,12,28,.98));box-shadow:0 0 34px rgba(255,173,18,.18),0 22px 50px rgba(0,0,0,.38);text-align:center;transform:translateY(10px);opacity:0}
.fulltime-panel.show{display:block;animation:fulltimeIn .5s ease forwards}
@keyframes fulltimeIn{to{opacity:1;transform:translateY(0)}}
.fulltime-label{font-size:clamp(1.35rem,4vw,2.1rem);font-weight:1000;letter-spacing:.11em;color:#ffd447;text-shadow:0 0 18px rgba(255,156,0,.65)}
.fulltime-score{margin:4px 0 0;font-size:clamp(3rem,10vw,5.4rem);font-weight:1000;line-height:1;color:#fff;text-shadow:0 0 24px rgba(0,178,255,.72)}
.fulltime-caption{margin-top:6px;font-size:.78rem;font-weight:900;letter-spacing:.18em;color:#9fdfff}
.play-again{margin-top:16px;min-width:220px}
.game-card.game-over{animation:gameOverPulse .8s ease}
@keyframes gameOverPulse{0%,100%{box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 38px rgba(0,157,255,.16)}45%{box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 54px rgba(255,185,25,.38)}}
@media(max-width:640px){.fulltime-panel{padding:17px 12px 15px}.play-again{min-width:180px}}