#hoopDialog{width:660px;max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);overflow:auto;padding:8px;border:5px solid #75613f;background:#192b29;color:#ead5a3;box-shadow:0 20px 70px #0009;font-family:'DM Mono',monospace}
#hoopDialog::backdrop{background:#081316df}
#hoopDialog [hidden]{display:none!important}
#hoopDialog header{display:flex;justify-content:space-between;align-items:center;padding:0 8px 6px;border-bottom:1px solid #826948}
#hoopDialog h2{font-size:1.15rem;margin:0;color:#e3ba7e;letter-spacing:.08em}
#hoopDialog button{min-height:44px;padding:9px 13px;border:1px solid #b39665;background:#30453e;color:#f0d8a2;font:700 .8rem 'DM Mono',monospace;cursor:pointer;touch-action:manipulation}
#hoopDialog button:focus-visible{outline:3px solid #d7975b;outline-offset:3px}
#hoopCanvas{display:block;width:min(100%,calc(78dvh * .75));height:auto;margin:4px auto 0;touch-action:none;user-select:none;-webkit-user-select:none}
#hoopPanel{text-align:center;padding:14px 10px;line-height:1.5}
#hoopPanel h3{color:#f1b778;margin:8px}
#hoopPanel button{margin:6px}
#hoopPanel .hoop-how{max-width:410px;margin:12px auto;font: .9rem/1.5 Georgia,serif}
#hoopDialog .hoop-controls{text-align:center;font-size:.65rem;margin:4px 0;line-height:1.5;color:#d1c29c}
#hoopStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Completed-round ticket receipt; no changes to the playing machine. */
#hoopPanel .hoop-ticket-slot{height:65px;width:116px;margin:10px auto;overflow:hidden;border-top:7px solid #101e1c}
#hoopPanel .hoop-ticket-strip{background:#d88e78;color:#442f2b;border:2px dashed #764c3d;font:12px/21px monospace;animation:hoop-ticket-dispense 1.3s ease-out both}
@keyframes hoop-ticket-dispense{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#hoopPanel .hoop-ticket-strip{animation:none}}