/* ============================================================================
   Basketball — Arline Arcade. Portrait arcade hoops on the felt: gold rim,
   glass backboard, flick-to-shoot canvas. Theme comes from ../../styles/app.css.
   ========================================================================== */

body{ overflow:hidden }   /* this page is a single portrait playfield */

.court-wrap{
  position:relative; width:100%; max-width:620px; flex:1 1 auto; min-height:0;
  overflow:hidden; touch-action:none;
  border-radius:var(--radius) var(--radius) 0 0;
  /* arena spotlight over the shared felt */
  background:
    radial-gradient(130% 70% at 50% 18%, rgba(255,255,255,.07), rgba(0,0,0,0) 55%),
    radial-gradient(140% 120% at 50% 30%, #0e7a48 0%, #0b6437 58%, #073d22 100%);
  box-shadow:inset 0 0 110px rgba(0,0,0,.5), inset 0 0 0 4px rgba(201,162,57,.14);
}

#court{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* ---- HUD ------------------------------------------------------------------ */
.hud{
  position:absolute; top:10px; left:0; right:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:0 16px; pointer-events:none;
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:70px }
.stat .lbl{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.stat .val{
  font-family:var(--mono); font-weight:700; font-size:1.5rem; line-height:1; color:var(--gold-hi);
  text-shadow:0 2px 6px rgba(0,0,0,.55);
  transition:transform .15s cubic-bezier(.2,0,0,1);
}
.stat .val.bump{ transform:scale(1.28) }

.timer{
  font-family:var(--mono); font-weight:800; font-size:clamp(2.3rem,12vw,3.2rem); line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  min-width:2ch; text-align:center;
}
.timer.low{
  background:linear-gradient(180deg,#ffd9d9,#ff6b6b 50%,#c22232);
  -webkit-background-clip:text; background-clip:text;
  animation:tick .5s cubic-bezier(.2,0,0,1) infinite alternate;
}
@keyframes tick{ from{ transform:scale(1) } to{ transform:scale(1.07) } }

.status{
  position:absolute; top:clamp(64px,11vh,96px); left:0; right:0; z-index:5; margin:0;
  text-align:center; font-family:var(--mono); font-size:.85rem; color:var(--paper);
  text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; min-height:1.3em;
  transition:color .2s cubic-bezier(.2,0,0,1);
}
.status.fire{ color:#ffb347; font-weight:700; text-shadow:0 0 14px rgba(255,110,20,.75), 0 1px 4px rgba(0,0,0,.6) }

/* ---- gold pill button (house recipe) --------------------------------------- */
.pill{
  font:800 1rem/1 var(--mono); color:var(--ink); background:var(--gold-grad);
  border:none; border-radius:999px; padding:.95rem 2.4rem; cursor:pointer;
  min-height:44px; min-width:44px; letter-spacing:.02em;
  box-shadow:0 5px 16px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,240,176,.4);
  transition:transform .15s cubic-bezier(.2,0,0,1), box-shadow .15s cubic-bezier(.2,0,0,1);
}
.pill:hover{ transform:translateY(-2px); box-shadow:0 9px 22px rgba(0,0,0,.5), 0 0 22px rgba(233,195,74,.45), inset 0 0 0 2px rgba(255,240,176,.55) }
.pill:active{ transform:translateY(0) scale(.98) }
.pill[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:0 5px 16px rgba(0,0,0,.45) }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* ---- end-of-round panel ----------------------------------------------------- */
.end-panel{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center;
  background:rgba(2,20,11,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:panelIn .3s cubic-bezier(.2,0,0,1);
}
.end-panel[hidden]{ display:none }
@keyframes panelIn{ from{ opacity:0 } to{ opacity:1 } }
.end-card{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:clamp(24px,6vw,40px) clamp(30px,9vw,56px); margin:0 18px;
  background:linear-gradient(180deg, rgba(10,70,42,.96), rgba(6,52,31,.98));
  border-radius:var(--radius);
  box-shadow:
    0 0 0 3px var(--gold-2), 0 0 0 4px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,240,176,.25), inset 0 18px 40px rgba(0,0,0,.35),
    0 18px 44px rgba(0,0,0,.55), 0 0 34px rgba(233,195,74,.3);
  animation:cardIn .35s cubic-bezier(.2,0,0,1);
  text-align:center;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
.end-card h2{
  margin:0; font-family:var(--display); font-weight:700; font-size:2rem;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.end-card .final{
  margin:.1rem 0 0; display:flex; align-items:baseline; gap:.5rem;
  font-family:var(--mono); font-weight:800; font-size:clamp(3rem,18vw,4.4rem); line-height:1;
  color:var(--gold-hi); text-shadow:0 3px 12px rgba(0,0,0,.55);
}
.end-card .pts-word{ font-size:1rem; font-weight:400; color:var(--muted); letter-spacing:.12em; text-transform:uppercase }
.best-line{ margin:0 0 .8rem; font-family:var(--mono); font-size:.85rem; color:var(--paper); opacity:.9 }
.best-line.record{ color:var(--gold-hi); opacity:1; font-weight:700 }

/* ---- reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .timer.low{ animation:none }
  .end-panel, .end-card{ animation:none }
  .stat .val, .pill, .status{ transition:none }
}