/* Bii Hoops (public/arcade/hoops.js). The stage is the clean white Bii lobby with the felt-red machine in it; the arcade's
   black chrome frames it. The only DOM over the 3D: the power meter while you pull, "+2" pops, the other player's pops. */
.ag-stage[data-kind="hoops"] { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; background: #fff; overflow: hidden; }
.ag-stage[data-kind="hoops"]:active { cursor: grabbing; }
.ag-stage[data-kind="hoops"]::before { content: "Setting up the machine"; position: absolute; left: 0; right: 0; top: 46%; text-align: center;
  font: 400 30px/1 var(--ac-pixel, "Jersey 10"); color: #3340a0; }
.ag-stage[data-kind="hoops"].ready::before { content: none; }
.ag-stage[data-kind="hoops"] .hp-wrap { position: absolute; inset: 0; }
.ag-stage[data-kind="hoops"] .hp-cv { display: block; width: 100%; height: 100%; }

/* how hard: a felt-red bar filling up the left edge while you pull */
.hp-meter { position: absolute; left: 12px; bottom: 16%; width: 14px; height: 36%; background: #fff; border: 2px solid #0d0a09; opacity: 0; pointer-events: none; }
.hp-meter.on { opacity: 1; }
.hp-meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #4a5ad8; transform-origin: bottom; transform: scaleY(.02); }

/* +2 / +3 over the hoop */
.hp-pop { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; pointer-events: none; opacity: 0;
  font: 400 76px/1 var(--ac-pixel, "Jersey 10"); color: #4a5ad8; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.hp-pop.hot { color: #ff5a1f; }
.hp-pop.on { animation: hp-pop .9s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes hp-pop { 0% { opacity: 0; transform: translateY(18px) scale(.6); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 70% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-26px); } }

/* the other player scoring: a small ink slip in their colour, top right */
.hp-opp { position: absolute; right: 10px; top: 10px; margin: 0; padding: 4px 10px 5px; background: #0d0a09; color: var(--c, #eeeef2); pointer-events: none;
  font: 400 26px/1 var(--ac-pixel, "Jersey 10"); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; }
.hp-opp.on { animation: hp-opp 1.1s ease-out forwards; }
@keyframes hp-opp { 0% { opacity: 0; transform: translateY(-6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.hp-note { position: absolute; left: 20px; right: 20px; top: 38%; margin: 0; text-align: center; color: #2e0b0f; font: 700 17px/1.4 var(--font); }
.hp-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-pop.on, .hp-opp.on { animation: none; opacity: 1; }
}

/* the pick sheet straight over the Lobby (Lobby.arcade.pick, the Bii Hoops machine) */
.arc-float { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%); z-index: 31; color: var(--ac-ink); font-family: var(--font); }
.arc-sheet-sub { margin: 0 0 10px; font-size: 15px; line-height: 1.35; color: var(--ac-ink-2); }