@import url('./fonts.css');

:root{--hoops-ink:#fff6df;--hoops-muted:#aaa1b9;--hoops-bg:#100d25;--hoops-panel:#171330;--hoops-line:#393254;--hoops-yellow:#ffd447;--hoops-pink:#ff4f81;--hoops-blue:#62d9ff;--hoops-court:#d8753b}
*{box-sizing:border-box}.hoops-page{margin:0;min-height:100vh;color:var(--hoops-ink);background:radial-gradient(circle at 20% 0,#29204b 0,transparent 34%),linear-gradient(rgba(98,217,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(98,217,255,.025) 1px,transparent 1px),var(--hoops-bg);background-size:auto,30px 30px,30px 30px;font-family:'IBM Plex Mono',monospace}.hoops-page button,.hoops-page a{font:inherit}.hoops-topbar{height:68px;padding:0 clamp(18px,4vw,60px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--hoops-line);background:rgba(16,13,37,.94);position:relative;z-index:2}.hoops-topbar .brand{justify-self:start}.hoops-topbar .brand-mark{background:var(--hoops-yellow);color:var(--hoops-bg)}.hoops-topbar .back-link{color:var(--hoops-muted);text-decoration:none;font-size:10px;letter-spacing:.14em}.court-status{justify-self:end;color:var(--hoops-muted);font-size:9px;letter-spacing:.14em}.court-status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hoops-pink);box-shadow:0 0 12px var(--hoops-pink);margin-right:8px}.hoops-shell{width:min(1320px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 330px;border-inline:1px solid var(--hoops-line)}.hoops-game{padding:clamp(22px,3vw,42px)}.hoops-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.hoops-heading h1{margin:0;font:400 clamp(48px,7vw,84px)/.82 'Archivo Black',sans-serif;letter-spacing:-.065em}.hoops-heading h1 span{color:var(--hoops-yellow)}.mode-label{text-align:right;font-size:9px;letter-spacing:.13em;color:var(--hoops-muted)}.mode-label span,.mode-label strong{display:block}.mode-label strong{margin-top:7px;color:var(--hoops-blue);font-size:11px}.hoops-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hoops-line);border-bottom:0;background:var(--hoops-panel)}.hoops-stats>div{padding:13px 16px;border-right:1px solid var(--hoops-line)}.hoops-stats>div:last-child{border:0}.hoops-stats span,.aim-readout span{display:block;color:var(--hoops-muted);font-size:8px;letter-spacing:.15em}.hoops-stats strong{display:block;margin-top:4px;font:400 24px 'Archivo Black',sans-serif}.court-wrap{position:relative;isolation:isolate;border:1px solid var(--hoops-line);background:#130e27;overflow:hidden;touch-action:none}.court-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;cursor:crosshair;outline:none}.court-wrap canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--hoops-blue)}.court-grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}.hoops-overlay{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:rgba(13,10,32,.76);backdrop-filter:blur(4px)}.hoops-overlay[hidden]{display:none}.hoops-overlay>p:first-child{margin:0 0 12px;color:var(--hoops-yellow);font-size:10px;font-weight:700;letter-spacing:.2em}.hoops-overlay h2{margin:0;font:400 clamp(31px,5vw,58px)/.95 'Archivo Black',sans-serif;letter-spacing:-.04em}.hoops-overlay>p:nth-of-type(2){max-width:430px;color:#c4bdd0;line-height:1.7;font-size:11px}.hoops-primary{margin-top:10px;min-width:190px;padding:15px 20px;border:0;background:var(--hoops-yellow);color:var(--hoops-bg);font-weight:700;letter-spacing:.1em;cursor:pointer;box-shadow:6px 6px 0 var(--hoops-pink)}.hoops-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hoops-pink)}.shot-call{position:absolute;z-index:4;left:50%;top:26%;transform:translate(-50%,-50%) rotate(-4deg) scale(.7);font:400 clamp(30px,6vw,66px) 'Archivo Black',sans-serif;color:var(--hoops-yellow);text-shadow:4px 4px 0 var(--hoops-pink);opacity:0;pointer-events:none}.shot-call.pop{animation:shot-pop .9s ease-out}@keyframes shot-pop{0%{opacity:0;transform:translate(-50%,-20%) rotate(-8deg) scale(.35)}25%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-85%) rotate(1deg) scale(.95)}}.aim-deck{display:grid;grid-template-columns:1fr auto minmax(130px,190px) auto 1fr;align-items:center;gap:12px;padding:14px;border:1px solid var(--hoops-line);border-top:0;background:var(--hoops-panel)}.aim-readout strong{font:400 19px 'Archivo Black',sans-serif}.power-readout{text-align:right}.mini-track{height:4px;margin-top:7px;background:#302949}.mini-track i{display:block;height:100%;width:50%;background:var(--hoops-blue)}.power-readout .mini-track i{margin-left:auto;background:var(--hoops-pink)}.nudge-controls{display:flex;gap:4px}.nudge-controls button{width:44px;height:44px;border:1px solid var(--hoops-line);color:var(--hoops-ink);background:#211b3c;font-size:22px;cursor:pointer}.nudge-controls button:hover{border-color:var(--hoops-blue);color:var(--hoops-blue)}.shoot-button{min-height:58px;border:0;background:var(--hoops-pink);color:white;cursor:pointer;touch-action:none;box-shadow:0 0 24px rgba(255,79,129,.16)}.shoot-button span,.shoot-button strong{display:block}.shoot-button span{font-size:7px;letter-spacing:.13em}.shoot-button strong{font:400 19px 'Archivo Black',sans-serif}.shoot-button.charging{background:var(--hoops-yellow);color:var(--hoops-bg);transform:scale(.98)}.shoot-button:disabled{opacity:.4;cursor:not-allowed}.keyboard-hint{margin:11px 0 0;text-align:center;color:var(--hoops-muted);font-size:8px;letter-spacing:.07em}.keyboard-hint kbd{padding:2px 5px;border:1px solid var(--hoops-line);background:#211b3c;color:var(--hoops-ink);font:inherit}.hoops-panel{border-left:1px solid var(--hoops-line);background:rgba(23,19,48,.74)}.panel-number{padding:28px 30px;border-bottom:1px solid var(--hoops-line);color:var(--hoops-yellow);font:400 56px 'Archivo Black',sans-serif}.hoops-panel-block{padding:28px 30px;border-bottom:1px solid var(--hoops-line)}.hoops-panel-block h2{margin:0 0 10px;font:400 28px 'Archivo Black',sans-serif}.hoops-panel-block>p:not(.eyebrow){color:var(--hoops-muted);font-size:10px;line-height:1.7}.streak-pips{display:flex;gap:8px;margin:20px 0 10px}.streak-pips i{width:38px;height:8px;transform:skew(-12deg);background:#332c4b}.streak-pips i.hot{background:var(--hoops-yellow);box-shadow:0 0 10px rgba(255,212,71,.4)}#challenge-status{font-size:9px;letter-spacing:.12em;color:var(--hoops-pink)}.rules ol{list-style:none;padding:0;margin:0}.rules li{display:flex;align-items:center;gap:13px;padding:10px 0;color:var(--hoops-muted);font-size:10px;border-bottom:1px solid rgba(57,50,84,.6)}.rules li span{color:var(--hoops-blue);font-weight:700}.tip-card{margin:24px 30px;padding:17px;border:1px solid var(--hoops-line);background:#211b3c;transform:rotate(-1deg)}.tip-card span{color:var(--hoops-yellow);font-size:8px;letter-spacing:.14em}.tip-card p{margin:8px 0 0;color:var(--hoops-muted);font-size:10px;line-height:1.6}.tip-card strong{color:var(--hoops-ink)}.restart-link{width:calc(100% - 60px);margin:0 30px 28px;padding:13px;border:1px solid var(--hoops-line);background:transparent;color:var(--hoops-muted);font-size:9px;letter-spacing:.1em;cursor:pointer}.restart-link:hover{color:var(--hoops-pink);border-color:var(--hoops-pink)}.hoops-footer{width:min(1320px,100%);min-height:65px;margin:auto;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--hoops-line);color:var(--hoops-muted);font-size:8px;letter-spacing:.12em}.hoops-footer a{color:var(--hoops-ink);text-decoration:none}
@media(max-width:920px){.hoops-shell{grid-template-columns:1fr}.hoops-panel{border-left:0;border-top:1px solid var(--hoops-line);display:grid;grid-template-columns:1fr 1fr}.panel-number{display:none}.hoops-panel-block{border-right:1px solid var(--hoops-line)}.tip-card,.restart-link{align-self:center}.restart-link{width:auto}.hoops-footer{border-inline:0}}
@media(max-width:620px){.hoops-topbar{grid-template-columns:1fr 1fr;height:60px}.hoops-topbar .back-link{display:none}.hoops-game{padding:14px}.mode-label{display:none}.hoops-heading{margin-top:8px}.hoops-stats>div{padding:10px 8px}.hoops-stats strong{font-size:19px}.aim-deck{grid-template-columns:1fr minmax(125px,1.5fr) 1fr;gap:7px}.aim-readout{grid-row:1}.nudge-controls{display:none}.shoot-button{grid-column:2;grid-row:1}.power-readout{grid-column:3}.keyboard-hint{display:none}.hoops-panel{display:block}.hoops-panel-block{border-right:0}.tip-card{margin:20px}.restart-link{width:calc(100% - 40px);margin:0 20px 20px}.hoops-footer{padding:18px;gap:14px;flex-wrap:wrap}.hoops-footer>span:nth-child(2){display:none}}
@media(max-height:720px) and (min-width:700px){.hoops-game{padding-top:16px}.hoops-heading h1{font-size:48px}.hoops-heading{margin-bottom:10px}.court-wrap{max-width:520px;margin:auto}.hoops-stats,.aim-deck{max-width:520px;margin:auto}}
.game-select-link{min-height:50px;margin:0 22px 22px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hoops-yellow);color:var(--hoops-yellow);background:#120e28;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.11em}.game-select-link:hover,.game-select-link:focus-visible{color:var(--hoops-bg);background:var(--hoops-yellow);outline:none}@media(max-width:620px){.game-select-link{margin:0 20px 20px;min-height:52px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.shot-call.pop{animation:none;opacity:1}}
