/* Record boards (src/run/screens/records-ui.js; docs/math-racing/v5-worlds.md §12): the strip on the results card, the board
   dialog, the trophy in the map's bar. Calm: the gold of a new best fades in once (opacity), and not at all with Calm
   motion or reduced motion. Nothing flashes, nothing moves. */
.rec-cup{display:block; width:24px; height:24px; flex:none}

/* ---------- Results card: this race's board as one strip (best first), a button that opens the whole board ---------- */
.rec-strip{display:flex; align-items:center; gap:4px; width:100%; min-height:52px; box-sizing:border-box; padding:4px 6px 4px 8px; margin:0;
  border:0; border-radius:14px; background:var(--given); color:var(--ink); cursor:pointer; font:inherit}
.rec-strip:focus-visible{outline:3px solid var(--you); outline-offset:2px}
.rec-strip > .rec-cup{width:26px; height:26px; margin-right:2px}
.rec-it{position:relative; flex:1 1 0; min-width:0; max-width:64px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px 3px; border-radius:10px}
.rec-it .rec-t{font:700 13px/1 var(--font-display); font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
/* Fewer than four runs (the cup is the first child): the strip hugs its tiles, centred, so a first run is not one small
   tile in a wide empty bar. Without :has the rule is dropped and the strip keeps the full width. */
.rec-strip:not(:has(.rec-it:nth-child(5))){width:auto; align-self:center; justify-self:center; padding-inline:10px}
.rec-strip:not(:has(.rec-it:nth-child(5))) .rec-it{flex:0 0 64px}
.rec-it.mine{background:var(--you-soft); box-shadow:inset 0 0 0 2px var(--you)}
.rec-it.mine .rec-t{color:var(--ink)}
/* a new best: the run is gold (a soft gold wash fades in once) */
.rec-strip.best .rec-it.mine{box-shadow:inset 0 0 0 2px var(--gold)}
.rec-strip.best .rec-it.mine::before{content:""; position:absolute; inset:0; border-radius:inherit; background:color-mix(in srgb, var(--gold) 30%, var(--tile)); z-index:0;
  animation:recIn .8s ease-out both}
.rec-it > *{position:relative; z-index:1}
@keyframes recIn{0%{opacity:0}}

/* A face: your racer on a soft disc, the place on a small medal (colour and number) */
.rec-face{position:relative; flex:none; width:34px; height:34px; border-radius:50%; background:#dfe8ff; box-shadow:inset 0 0 0 2px #ffffff}
.rec-face canvas{display:block; width:100%; height:100%; border-radius:50%}
.rec-pl{position:absolute; right:-6px; bottom:-4px; min-width:17px; height:17px; box-sizing:border-box; padding:0 3px; border-radius:999px; display:grid; place-items:center;
  font:700 11px/1 var(--font-display); color:#3a2c0a; background:var(--mc, #e6ebf3); border:1.5px solid #ffffff; box-shadow:0 1px 0 rgba(0,0,0,.18)}

/* The chip in the card's chip row: "New best!" (a cup) or "3.2 s faster" (a little clock) */
.endchip.rec .rec-cup{width:20px; height:20px}
.endchip.rec.best{background:color-mix(in srgb, var(--gold) 26%, var(--tile)); box-shadow:inset 0 0 0 2px var(--gold)}
.rec-clock{position:relative; flex:none; width:15px; height:15px; box-sizing:border-box; border-radius:50%; border:2px solid var(--good)}
.rec-clock::before,.rec-clock::after{content:""; position:absolute; left:50%; bottom:50%; width:2px; margin-left:-1px; background:var(--good); border-radius:1px; transform-origin:50% 100%}
.rec-clock::before{height:5px} .rec-clock::after{height:4px; transform:rotate(90deg)}

/* Upright: the tally goes two columns while the strip shows, so the card still never scrolls */
@media (max-aspect-ratio: 5/4){
  #endOv .card.rec-on .tally{display:grid; grid-template-columns:1fr 1fr; column-gap:16px}
  #endOv .card.rec-on .tally div:last-child{grid-column:1 / -1}
}
/* Laptop and tablet landscape up to 800 high: a slimmer strip (the card itself tightens in play.css, strip or not) */
@media (min-aspect-ratio: 5/4) and (min-height:561px) and (max-height:800px){
  #endOv .card.rec-on .rec-strip{min-height:46px; padding-block:2px}
}
/* Short landscape: the strip sits under the standings in the right-hand column */
@media (min-aspect-ratio: 5/4) and (max-height:560px){
  #endOv .card.rec-on{grid-template-areas:"medal st" "title st" "tally rec" "tally note" "tally btns" "row btns"; grid-template-rows:auto auto auto auto 1fr auto}
  #endOv .rec-strip{grid-area:rec; min-height:48px}
}

/* ---------- The whole board (a dialog over the results card or the map) ---------- */
.rec-dlg{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:16px; background:rgba(20,22,54,.45)}
.rec-dlg[hidden]{display:none}
.rec-box{position:relative; width:100%; max-width:420px; max-height:100%; overflow:auto; box-sizing:border-box; padding:14px 14px 12px; border-radius:22px;
  background:var(--tile); color:var(--ink); border:1px solid var(--panel-line); box-shadow:0 8px 0 var(--tile-edge), 0 24px 50px rgba(0,0,0,.18)}
.rec-head{display:flex; align-items:center; gap:10px; min-height:44px; padding-right:50px}
.rec-head .rec-cup{width:34px; height:34px}
.rec-world{display:block; font:700 22px/1.1 var(--font-display)}
.rec-sub{display:block; margin-top:2px; font-size:13px; font-weight:700; color:var(--muted)}
.rec-x{position:absolute; top:8px; right:8px; width:44px; height:44px; padding:0; display:grid; place-items:center; font:600 26px/1 var(--font-display); color:var(--ink); background:var(--given); box-shadow:none; cursor:pointer}
.rec-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.rec-row{display:grid; grid-template-columns:18px 42px minmax(0, 1fr) auto auto; align-items:center; gap:8px; min-height:48px; padding:3px 10px 3px 8px; border-radius:12px; background:var(--given)}
.rec-row.mine{background:var(--you-soft); box-shadow:inset 0 0 0 2px var(--you)}
.rec-n{font:600 15px/1 var(--font-display); color:var(--muted); text-align:center}
.rec-row .rec-face{width:36px; height:36px}
.rec-row .rec-pl{min-width:19px; height:19px; font-size:12px}
.rec-row .rec-t{font:600 19px/1 var(--font-display); font-variant-numeric:tabular-nums}
.rec-s{font:600 15px/1 var(--font-display); font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.rec-s i{font-style:normal; color:var(--gold); margin-right:3px}
.rec-d{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; min-width:40px; text-align:right}
@media (max-width:359px){ .rec-d{display:none} .rec-row{grid-template-columns:18px 42px minmax(0, 1fr) auto} }
/* landscape: short screens get tighter rows so five fit */
@media (max-height:430px){ .rec-row{min-height:44px; padding-block:1px} .rec-list{gap:3px; margin-top:6px} }

/* ---------- The map: a trophy in the bar, for a world that has a board ---------- */
.map-rec{flex:none; width:52px; height:52px; padding:0; display:grid; place-items:center; border-radius:50%; background:var(--given); box-shadow:0 3px 0 var(--tile-edge); cursor:pointer}
.map-rec[hidden]{display:none}
.map-rec .rec-cup{width:30px; height:30px}
@media (min-aspect-ratio: 5/4){ .map-rec{align-self:center} }

@media (prefers-reduced-motion: reduce){ .rec-strip.best .rec-it.mine::before{animation:none} }
html.calm .rec-strip.best .rec-it.mine::before{animation:none}
/* narrow phones upright: the bar makes room for the cup (a smaller gap, Go and name) so the world's name never clips */
@media (max-aspect-ratio: 5/4) and (max-width:419px){
  .map-bar:has(.map-rec:not([hidden])){gap:8px; padding-left:12px}
  .map-bar:has(.map-rec:not([hidden])) .map-rec{width:46px; height:46px}
  .map-bar:has(.map-rec:not([hidden])) .map-go{min-width:84px; padding-inline:14px}
  .map-bar:has(.map-rec:not([hidden])) .map-name{font-size:20px}
}
@media (max-aspect-ratio: 5/4) and (max-width:379px){ .map-bar:has(.map-rec:not([hidden])) .map-name{font-size:18px} }
/* short phones upright (360x640): a slimmer strip, so the card with a chip and a two-line tip still never scrolls */
@media (max-aspect-ratio: 5/4) and (max-height:700px){
  #endOv .rec-strip{min-height:44px; padding-block:2px} #endOv .rec-it{padding-block:2px 1px; gap:2px} #endOv .rec-it .rec-face{width:28px; height:28px}
  #endOv .card.rec-on .endrow{margin-block:-2px}
}