.hoops-dialog {
  width:min(920px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;
  border:1px solid var(--line);border-radius:24px;background:#171a18;color:#f5f4ed;
  box-shadow:0 28px 100px rgba(0,0,0,.5);overflow:auto;overscroll-behavior:contain;
}
.hoops-dialog::backdrop {background:rgba(7,9,7,.75);backdrop-filter:blur(12px);}
.hoops-dialog[open] {animation:hoops-enter 240ms ease-out;}
.hoops-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);}
.hoops-kicker {font:500 10px/1.3 var(--display);letter-spacing:.17em;color:#b4b9aa;text-transform:uppercase;}
.hoops-header h2 {font:500 24px/1.2 var(--display);letter-spacing:-.04em;color:#ffd100;margin-top:4px;}
.hoops-close {width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;color:inherit;font-size:25px;}
.hoops-close:hover {background:#ffd100;color:#171a18;border-color:#ffd100;}
.hoops-layout {display:grid;grid-template-columns:minmax(0,420px) minmax(240px,1fr);}
.hoops-play {min-width:0;border-right:1px solid rgba(255,255,255,.1);}
.hoops-stage {position:relative;overflow:hidden;background:#20251e;isolation:isolate;}
.hoops-canvas {display:block;width:100%;height:auto;aspect-ratio:3/4;touch-action:none;cursor:pointer;}
.hoops-overlay {position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:28px;background:rgba(15,20,15,.78);backdrop-filter:blur(6px);}
.hoops-overlay[hidden] {display:none;}
.hoops-overlay h3 {font:500 36px/1.1 var(--display);letter-spacing:-.05em;color:#fff;}
.hoops-overlay p {max-width:27ch;color:#ced3c7;line-height:1.55;font-size:14px;}
.hoops-button {padding:12px 20px;border:1px solid #ffd100;border-radius:12px;background:#ffd100;color:#191d14;font-weight:700;min-height:44px;}
.hoops-button:hover {background:#ffe052;}
.hoops-button:disabled {opacity:.5;cursor:default;}
.hoops-overlay .hoops-button {margin-top:8px;}
.hoops-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;color:#bac1b2;font-size:11px;border-top:1px solid rgba(255,255,255,.1);}
.hoops-pause,.hoops-refresh {padding:8px 12px;min-height:36px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:transparent;color:#f5f4ed;}
.hoops-pause:disabled {opacity:.4;cursor:default;}
.hoops-sidebar {padding:24px;min-width:0;}
.hoops-scoreline {font:500 18px/1.4 var(--display);margin-bottom:20px;color:#e0e5d7;}
.hoops-scoreline strong {font-size:36px;color:#ffd100;margin-right:6px;}
.hoops-save {display:grid;gap:10px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);}
.hoops-save[hidden] {display:none;}
.hoops-save label {font-weight:700;font-size:13px;}
.hoops-save input {width:100%;min-width:0;padding:12px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.05);color:#f5f4ed;font:inherit;}
.hoops-save input:focus {outline:2px solid #ffd100;outline-offset:2px;}
.hoops-note {font-size:11px;line-height:1.5;color:#b4b9aa;}
.hoops-feedback {font-size:12px;line-height:1.5;color:#ffd100;min-height:18px;}
.hoops-leader-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;}
.hoops-leader-heading h3 {font:500 19px/1.3 var(--display);letter-spacing:-.02em;}
.hoops-list {list-style:none;margin:0;padding:0;counter-reset:rank;}
.hoops-list li {counter-increment:rank;display:flex;align-items:center;gap:12px;min-height:40px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;}
.hoops-list li::before {content:counter(rank,decimal-leading-zero);font-size:10px;color:#8f9987;min-width:17px;}
.hoops-list li:first-child::before,.hoops-list li:first-child strong {color:#ffd100;}
.hoops-list span {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hoops-list strong {font-variant-numeric:tabular-nums;color:#f5f4ed;}
.hoops-empty {font-size:13px;color:#b4b9aa;line-height:1.6;padding-block:16px;}
.hoops-practice {margin-top:12px;color:#d9c788;}
@media(max-width:670px){
  .hoops-layout {grid-template-columns:1fr;}
  .hoops-play {border-right:0;border-bottom:1px solid rgba(255,255,255,.1);}
  .hoops-header {padding:14px 18px;}
  .hoops-stage {max-width:420px;margin-inline:auto;}
  .hoops-sidebar {padding:20px;}
  .hoops-dialog {width:min(420px,calc(100% - 20px));}
  .hoops-header h2 {font-size:21px;}
}
@keyframes hoops-enter {from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hoops-dialog[open]{animation:none;}}
.hoops-header {position:sticky;top:0;z-index:3;background:#171a18;}
.hoops-dialog :focus-visible {outline-color:#ffd100;}
.hoops-overlay-ball {width:72px;height:72px;object-fit:contain;rotate:-12deg;}