:root{color-scheme:dark;--paper:#fff7eb;--muted:#d3d4cd;--orange:#ff833e;--ink:#172329;--line:rgba(255,247,235,.22);font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #ffb878;outline-offset:6px}button, a{transition:background .18s,color .18s,opacity .18s,transform .18s}[hidden]{display:none!important}
#experience{position:relative;isolation:isolate;height:100svh;min-height:660px;overflow:hidden;color:var(--paper);background:#172329}#court,.court-backdrop,.shade{position:absolute;inset:0;width:100%;height:100%}#court{z-index:-2;display:block;touch-action:pan-y;opacity:0;transition:opacity 1s}body.ready #court{opacity:1}.court-backdrop{z-index:-3;background:#172329 url('assets/pavilion.jpg') center/cover no-repeat;filter:brightness(.62)}.shade{z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,20,25,.72) 0%,rgba(9,20,25,.15) 23%,transparent 44%,rgba(9,20,25,.35) 66%,rgba(9,20,25,.93) 100%)}
.masthead{position:absolute;top:max(32px,env(safe-area-inset-top));left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{text-decoration:none;flex-shrink:0}.brand strong{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:3.2rem;letter-spacing:-.035em;line-height:.9;display:block}.brand-period{color:var(--orange)}#wordmark>span{font-size:.68rem;font-weight:700;letter-spacing:.23em;display:block;margin-top:8px}.brand img{max-width:145px;max-height:90px;object-fit:contain}.group-link{display:flex;align-items:center;gap:24px;text-decoration:none;font-size:.9rem;font-weight:600;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:4px;background:rgba(14,28,33,.34);backdrop-filter:blur(10px)}.group-link span{font-size:1.25rem}.group-link:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.venue-label{position:absolute;left:3.5%;top:147px;display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.14em;font-weight:600;color:#f4ebdc}.label-rule{display:block;width:24px;height:2px;background:var(--orange)}.venue-detail{color:#dfdfd9;font-size:.68rem;letter-spacing:.08em}.view-tools{position:absolute;right:3.5%;top:135px;display:flex;gap:8px}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:rgba(12,29,36,.35);color:var(--paper);backdrop-filter:blur(8px)}.icon-button:hover{background:rgba(255,247,235,.15)}.icon-button svg{width:22px;height:22px}
.bottom-panel{position:absolute;left:3.5%;right:3.5%;bottom:95px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;pointer-events:none}.intro,.play-panel{pointer-events:auto}.eyebrow{font-size:.73rem;letter-spacing:.15em;line-height:1.6;font-weight:700;margin:0 0 14px;color:var(--orange)}h1{font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif;text-transform:uppercase;font-size:clamp(3.3rem,5.6vw,6.8rem);font-weight:900;letter-spacing:-.025em;line-height:.94;margin:0}.intro-detail{font-size:1rem;color:var(--muted);line-height:1.5;margin:20px 0 0}.play-panel{width:340px;flex-shrink:0;padding-bottom:3px}.shot-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.75rem;letter-spacing:.11em;font-weight:700}.shot-heading #shot-count{font-size:.95rem;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--orange)}.shot-track{display:flex;gap:6px;margin:14px 0 19px}.shot-track span{height:4px;flex:1;background:rgba(255,247,235,.25);transition:background .25s,box-shadow .25s}.shot-track span.made{background:var(--orange);box-shadow:0 0 10px #ff833e44}.shoot-button{border:0;background:var(--orange);border-radius:4px;color:#201c18;text-decoration:none;padding:19px 22px;min-height:62px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:1rem;font-weight:700;line-height:1.3;text-align:left}.shoot-button svg{width:24px;height:24px;flex-shrink:0}.shoot-button:hover:not(:disabled){background:#ff9d60;transform:translateY(-2px)}.shoot-button:active:not(:disabled){transform:translateY(0)}.shoot-button:disabled{background:#d48858;color:#241f1c}.play-hint{font-size:.8rem;color:#d0d1cd;text-align:center;line-height:1.6;margin:12px 0 0}.play-panel h2{font-size:1.6rem;letter-spacing:-.04em;margin:0 0 18px;line-height:1.15}.play-panel .eyebrow{margin-bottom:6px}.text-button{display:block;margin:10px auto 0;min-height:32px;font-size:.85rem;text-decoration:underline;text-underline-offset:4px;color:var(--muted);background:none;border:0;padding:3px 12px}
.footer{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:3.5%;right:3.5%;border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:.66rem;letter-spacing:.12em;color:#c0c6c4}.drag-hint{letter-spacing:.03em;text-transform:none;font-size:.75rem;color:#d1d5d2}.shot-feedback{position:absolute;top:31%;left:50%;transform:translate(-50%,10px);font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.02em;font-size:clamp(2.2rem,4vw,4.2rem);line-height:1;opacity:0;color:var(--paper);text-shadow:0 3px 22px #081a26b0;pointer-events:none;transition:opacity .2s,transform .4s}.shot-feedback.visible{opacity:1;transform:translate(-50%,-10px)}.notice{position:absolute;left:50%;top:200px;transform:translateX(-50%);width:min(440px,90%);padding:14px 20px;border:1px solid var(--line);border-radius:6px;background:#172329ee;color:var(--paper);font-size:.88rem;line-height:1.5;text-align:center}.no-script{position:absolute;top:220px;left:5%;right:5%;padding:20px;background:var(--ink);text-align:center}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{background:#172329;color:var(--paper);border:1px solid var(--line);border-radius:12px;padding:42px;width:min(480px,calc(100% - 36px));box-shadow:0 20px 100px #0008}dialog::backdrop{background:#05151ccc;backdrop-filter:blur(5px)}dialog h2{font-size:1.85rem;letter-spacing:-.04em;line-height:1.12;margin:0 0 22px}dialog p{line-height:1.65;font-size:1rem}.setup-note{color:#bac5c5;font-size:.9rem}dialog code{color:#ffd2b7}.close-dialog{position:absolute;right:14px;top:12px;border:0;background:none;color:var(--paper);font-size:1.8rem;width:36px;height:36px}.setup-note+.shoot-button{margin-top:25px}
@media(min-width:1600px){.play-panel{width:390px}.bottom-panel{bottom:115px}}
@media(max-width:900px){.venue-detail{display:none}.bottom-panel{gap:25px}.play-panel{width:305px}h1{font-size:3.5rem}.eyebrow{font-size:.66rem}.intro-detail{font-size:.9rem}.drag-hint{display:none}}
@media(max-width:640px){#experience{min-height:720px}.masthead{top:max(24px,env(safe-area-inset-top));left:6%;right:6%;gap:15px}.brand strong{font-size:2.7rem}#wordmark>span{font-size:.58rem;letter-spacing:.17em;margin-top:7px}.group-link{font-size:.8rem;gap:12px;padding:0 13px;min-height:44px;max-width:225px;line-height:1.35}.group-link span{font-size:1.15rem}.brand img{max-width:104px;max-height:70px}.venue-label{left:6%;top:111px;font-size:.65rem;gap:8px}.label-rule{width:17px}.view-tools{right:6%;top:105px;gap:6px}.icon-button{width:35px;height:35px}.icon-button svg{width:19px;height:19px}.bottom-panel{left:6%;right:6%;bottom:67px;display:block}.intro{margin-bottom:23px;max-width:100%}.intro .eyebrow{display:none}h1{font-size:2.55rem;letter-spacing:-.015em;line-height:.98}h1 br{display:none}h1 br::after{content:' '}.intro-detail{font-size:.86rem;margin-top:9px;line-height:1.4}.play-panel{width:100%;padding:0}.shot-heading{font-size:.68rem}.shot-track{margin:10px 0 12px}.shoot-button{min-height:56px;padding:15px 19px}.play-hint{margin-top:9px;font-size:.73rem}.footer{left:6%;right:6%;bottom:max(18px,env(safe-area-inset-bottom));padding-top:14px;font-size:.53rem;gap:10px;letter-spacing:.06em}.shade{background:linear-gradient(180deg,#091419b8 0%,#09141912 25%,transparent 43%,#09141936 53%,#091419ee 100%)}.shot-feedback{top:27%}.play-panel h2{font-size:1.45rem;margin-bottom:13px}.notice{top:155px}.text-button{margin-top:8px}}
@media(max-width:380px){h1{font-size:2.3rem}.group-link{max-width:180px}.footer{letter-spacing:0}.masthead{gap:10px}}
@media(max-height:700px) and (min-width:641px){#experience{min-height:570px}.masthead{top:22px}.venue-label{top:112px}.view-tools{top:100px}.bottom-panel{bottom:80px}h1{font-size:3rem}.intro-detail{margin-top:12px}.footer{bottom:22px}.play-panel{width:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Version 2: direct manipulation of the 3D court, including touch gestures. */
#court{touch-action:none;cursor:grab}#court:active{cursor:grabbing}
#court:focus-visible{outline:2px solid #ffb878;outline-offset:-5px}
.orbit-hint{position:absolute;left:3.5%;top:177px;margin:0;font-size:.875rem;line-height:1.5;color:#fff7eb;pointer-events:none;text-shadow:0 1px 5px #15252b}
@media(max-width:640px){.orbit-hint{left:6%;top:153px;font-size:.8rem}.view-tools{gap:6px}}
@media(max-height:700px) and (min-width:641px){.orbit-hint{top:151px}}