/* Depth ideas (agent L). Loaded last; only adds new classes.
   The ball fills up (src/run/hud/ballfill.js) · the results card's chip row (src/run/screens/end-row.js). */

/* ---------- The ball fills up ----------
   The ball's white face is a round glass: .bf is the glass (clipped to the face), its <b> is the liquid, moved by one
   transform. The liquid is a pale tint of the ball's own colour (--rc: never red), so the number stays easy to read.
   Going past the number: .bf-over, a little dome over the rim that wobbles once and then sits still. */
#goal > span{position:relative; z-index:1}
#goal .bf{position:absolute; left:50%; top:52%; width:55%; height:55%; margin:-27.5% 0 0 -27.5%; border-radius:50%; overflow:hidden; pointer-events:none}
#goal .bf b{position:absolute; left:-30%; right:-30%; top:0; height:160%; box-sizing:border-box; transform:translateY(62.5%); transform-origin:50% 0;
  background:color-mix(in srgb, var(--rc) 34%, #fff); border-top:2px solid color-mix(in srgb, var(--rc) 78%, #fff);
  transition:transform .45s cubic-bezier(.3,1.45,.5,1); will-change:transform}
#goal .bf-over{position:absolute; left:50%; top:13%; width:30%; height:15%; margin-left:-15%; box-sizing:border-box; border-radius:50% 50% 42% 42% / 78% 78% 22% 22%;
  background:color-mix(in srgb, var(--rc) 34%, #fff); border-top:2px solid color-mix(in srgb, var(--rc) 78%, #fff);
  transform-origin:50% 100%; transform:scale(.3,0); opacity:0; transition:transform .2s ease-out, opacity .2s; pointer-events:none}
#goal.bf-is-over .bf-over{transform:none; opacity:1; animation:bf-wob .7s ease-out}
@keyframes bf-wob{0%{transform:scale(.3,0)}30%{transform:scale(1.12,1.25)}50%{transform:scale(.94,.88)}70%{transform:scale(1.05,1.08)}100%{transform:none}}
#goal.formula .bf,#goal.formula .bf-over{display:none}

/* Reduced motion (the OS setting or Calm motion): the level simply changes, no slosh, no wobble. */
@media (prefers-reduced-motion: reduce){ #goal .bf b,#goal .bf-over{transition:none!important; animation:none!important} }
html.calm #goal .bf b,html.calm #goal .bf-over{transition:none!important; animation:none!important}

/* ---------- Results card: the chip row ----------
   A row of short chips between the standings and the note (#endRow, made by src/run/screens/end-row.js). A chip has the
   class "endchip"; the row hides while empty. */
.endrow{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 8px; min-width:0}
.endrow:empty{display:none}
.endchip{display:inline-flex; align-items:center; gap:6px; min-width:0; padding:5px 12px; border-radius:999px; background:var(--given); color:var(--ink);
  font:600 15px/1.2 var(--font-display); white-space:nowrap}

/* The card must never scroll: on short screens the chip row pays for its height with a tighter tally. */
@media (max-aspect-ratio: 5/4) and (max-height:700px){
  #endOv .card{gap:8px} #endOv .tally{gap:0} #endOv .tally div{padding:1px 0} #endOv .endchip{padding:3px 10px; font-size:14px}
}
@media (min-aspect-ratio: 5/4) and (max-height:560px){
  #endOv .card{grid-template-areas:"medal st" "title st" "tally note" "tally btns" "row btns"; grid-template-rows:auto auto auto 1fr auto}
  #endOv .endrow{grid-area:row; align-self:end}
  #endOv .tally{gap:1px} #endOv .tally div{padding:1px 0} #endOv .endchip{padding:3px 10px; font-size:14px}
}