.xbgps-wrap{max-width:420px;margin:10px auto;border-radius:16px;background:#111;padding:10px 10px 14px;box-shadow:0 15px 40px rgba(0,0,0,.45);color:#fff}
.xbgps-top{display:flex;justify-content:space-between;font:600 13px/1.2 system-ui,Segoe UI,Roboto}
.xbgps-court{position:relative;height:520px;margin:10px;border-radius:12px;background:#cfae86;overflow:hidden;
  background-image:var(--court),linear-gradient(0deg, rgba(0,0,0,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:cover,40px 40px, 40px 40px; background-position:center;
}
.xbgps-hoop{position:absolute;left:50%;top:80px;width:120px;height:90px;transform:translateX(-50%);background:var(--hoop) center/contain no-repeat;filter:drop-shadow(0 5px 12px rgba(0,0,0,.35))}
.xbgps-ball{position:absolute;left:50%;bottom:30px;width:36px;height:36px;transform:translateX(-50%);background:var(--ball) center/contain no-repeat}
.xbgps-bottom{display:flex;gap:12px;align-items:center;margin:10px}
#xbgps-fire{flex:1;height:40px;border-radius:8px}
#xbgps-msg{font:600 13px/1.2 system-ui;margin-left:auto}
/* Animación */
.xbgps-ball.anim{transition: transform 0.8s cubic-bezier(.25,.8,.25,1), bottom 0.8s cubic-bezier(.25,.8,.25,1), left 0.8s cubic-bezier(.25,.8,.25,1)}