/* Shooting practice. Its own file on purpose: the layout work lives in
   styles.css / fit.css and is worked by another session, and a new screen has
   no business landing in the middle of it. Everything here is prefixed .pr- or
   scoped to #screen-practice, so nothing leaks onto the bonus round. */

/* Centred down the screen, not stacked at the top. The court is the only thing
   on here and an iPad mini portrait is 1133px tall - left to flow, the whole
   round sits in the top half with a lake of empty under it. */
#screen-practice .pr-wrap {
  max-width: 560px; margin: 0 auto; padding: 18px 16px 28px;
  min-height: 78vh; min-height: 78svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
#screen-practice h1 { margin: 2px 0 0; }
.pr-sub { margin: 0 0 4px; color: var(--muted); font-size: 14px; }

/* Back on the left, the allowance on the right.
   The margin reset is the load-bearing line, and styles.css already records why
   at .case-head: .ghost-btn carries `margin: 18px auto 0` for its normal life
   as a centred block button, and in a flex row TWO auto margins eat the free
   space before justify-content is ever consulted. Back came to rest dead centre
   of the row until this zeroed them. A margin-right: auto does not fix it -
   the margin-left from the shorthand is still there and still splits the gap. */
.pr-top { display: flex; width: 100%; align-items: center; gap: 12px; }
#pr-back { margin: 0; }

/* The limit is stated where he is standing, not discovered when he presses a
   dead button. It is the whole bargain, so it is not small print. */
.pr-gate {
  margin-left: auto; font-family: var(--pixel); font-size: 13px;
  color: var(--on-bright); background: var(--green);
  border: 2px solid var(--drop); border-radius: 4px; padding: 6px 10px; white-space: nowrap;
}
.pr-gate:empty { display: none; }
.pr-gate.shut { background: var(--sunk); color: var(--muted); border-color: var(--drop); }

#screen-practice .court { position: relative; width: 100%; max-width: 420px; }

/* The rank, under the title. Jason, 2026-09-20: "maybe include ranking here as
   well." It is the loudest thing on the screen after the ball, because it is
   the only part of shooting practice that carries over from one run to the
   next - the points reset, the rank does not. */
.pr-rankline {
  display: flex; align-items: baseline; gap: 10px;
  margin: -2px 0 2px;
}
.pr-rankline b {
  font-family: var(--pixel); font-size: 14px; letter-spacing: .5px;
  color: var(--on-bright); background: var(--fire);
  border: 2px solid var(--drop); border-radius: 4px; padding: 5px 10px;
}
.pr-rankline span {
  font-family: var(--pixel); font-size: 11px; color: var(--muted);
}
.pr-rankline span[hidden] { display: none; }
/* The power bar is the game. Inside a centred flex column it shrinks to its
   own content and becomes a 4px sliver - it has to be told to take the width
   of the court it belongs to. */
#screen-practice .power { width: 100%; max-width: 420px; }

/* Heat. Three in a row lights the rim, and the glow is the only thing on this
   screen that says he is doing well - there is no XP bar here to fill. */
#screen-practice .court.hot .hoop-art { filter: drop-shadow(0 0 22px rgba(255,159,28,.85)); }
/* and the crowd gets on its feet - the rest of that lives in ball.css, with the
   gym, because the stage-clear court has the same scene and must react the same
   way. */

/* Above the top of the arc, not across it. At 14% it sat exactly where the ball
   crests on a make, so the one word telling him what happened was printed over
   the thing that happened. */
.pr-call {
  position: absolute; left: 50%; top: 2%; z-index: 5; transform: translate(-50%, -6px) scale(.9);
  font-family: var(--pixel); font-size: 17px; letter-spacing: .5px;
  color: var(--ink); text-shadow: 0 2px 0 var(--drop);
  opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none; white-space: nowrap;
}
.pr-call.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pr-call.good { color: var(--green); }
.pr-call.hot { color: var(--fire); text-shadow: 0 0 16px rgba(255,159,28,.9); }

.pr-score { display: flex; gap: 22px; margin: 2px 0 2px; }
.pr-score div { display: flex; flex-direction: column; align-items: center; }
/* Digits get the dot face, the same as every other number in the app. These sit
   on the page's dark field, which is where a dot-matrix glyph belongs. */
.pr-score span {
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums; font-size: 26px; color: var(--ink);
}
.pr-score em { font-style: normal; font-family: var(--pixel); font-size: 11px; color: var(--muted); }

#screen-practice .big-btn { width: 100%; max-width: 420px; }
#pr-shoot[disabled] { opacity: .45; }
/* Only one of the two is ever the thing to press. Start disappears mid-run
   rather than sitting there greyed out under the button he is using. */
#pr-start[disabled] { display: none; }

.pr-record { font-family: var(--pixel); font-size: 12px; color: var(--muted); margin-top: 2px; }
.pr-record b { color: var(--ink); }

/* An iPad mini lying down is 744px tall and the court is the tallest thing
   here. Nothing below 744 is supported, so this is the only size that needs a
   rule of its own. */
@media (max-height: 820px) {
  #screen-practice .pr-wrap { padding-top: 10px; gap: 7px; }
  /* The court keeps the full 420 and gives way in HEIGHT instead - that happens
     in ball.css, because the stage-clear court has to shrink with it. Narrowing
     it here (it was 300) bought nothing: height is what runs out on a short
     screen, and a court narrower than the bar and the button under it read as a
     mistake rather than as a choice. */
  .pr-score span { font-size: 22px; }
  .pr-rankline b { font-size: 12px; padding: 4px 8px; }
}

/* The tile on "Pick your game". It sits with the subjects and must not read as
   one of them - a tile that teaches nothing should not look like the two that
   do. Outlined rather than filled, and the mark is the ball. */
.subject-tile.pr-tile {
  border-style: dashed;
  border-color: var(--fire);
}
.subject-tile.pr-tile .subject-mark { filter: drop-shadow(0 0 10px rgba(255,159,28,.6)); }
.subject-tile.pr-tile .subject-what { color: var(--fire); }