/* In-race HUD (js/ui/hud.js). Each player's view is sized in --u: a unit taken from that view's own
   size (container units), so one view, two stacked halves, quarters and phone screens all scale
   alike. A player alone has everything in the view; players sharing a screen keep their own things
   at their views' outer edges, and what they share is shown once in a layer over the whole screen
   (.hud-shared, near the end). Plates are navy at 80-90 % with a light-blue rim - no backdrop blur
   here (four views would blur four times a frame). */
.hud {
  position: fixed;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
  font-family: var(--font);
  font-style: italic;
  font-weight: 900;
  color: #fff;
  --u-scale: 1;
}

html.text-large .hud { --u-scale: 1.15; }

.hud-view {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  /* one layout unit for everything inside (resolved there, against this view) */
  --u: calc(clamp(4px, min(1.3cqh, 0.8cqw), 13px) * var(--u-scale));
}

.hud[data-views="2"] .hud-view { height: 50%; }

.hud[data-views="3"] .hud-view,
.hud[data-views="4"] .hud-view {
  flex-basis: 50%;
  height: 50%;
}

.hud[data-views="2"] .hud-view:nth-child(n + 2),
.hud[data-views="3"] .hud-view:nth-child(n + 3),
.hud[data-views="4"] .hud-view:nth-child(n + 3) {
  border-top: 3px solid rgb(0 0 0 / 55%);
}

.hud[data-views="3"] .hud-view:nth-child(even),
.hud[data-views="4"] .hud-view:nth-child(even) {
  border-left: 3px solid rgb(0 0 0 / 55%);
}

.hud-spectator {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  font-size: var(--t-md);
}

/* lettering with a dark outline */
.hud-plate b,
.hud-standings .num,
.hud-standings .shape,
.hud-boost span,
.hud-item-count,
.hud-coin-count {
  paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--u) * 0.42) var(--c-ink);
}

.hud-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgb(45 68 121 / 92%), rgb(21 34 63 / 92%));
  border: calc(var(--u) * 0.22) solid var(--c-rim);
  border-radius: calc(var(--u) * 1.1);
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgb(0 0 0 / 35%), inset 0 calc(var(--u) * 0.2) 0 rgb(255 255 255 / 18%);
  transform: skewX(-9deg);
}

/* ---------------------------------------------------------------- top left: seat, standings */
.hud-tl {
  position: absolute;
  top: calc(var(--u) * 2);
  left: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
  align-items: flex-start;
}

.hud-seat { font-size: calc(var(--u) * 2.4); }

.hud-standings {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.45);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hud-standings li {
  display: flex;
  gap: calc(var(--u) * 0.8);
  align-items: center;
  width: calc(var(--u) * 10.5);
  height: calc(var(--u) * 4.2);
  padding: 0 calc(var(--u) * 0.5) 0 calc(var(--u) * 1.1);
  background: linear-gradient(90deg, rgb(21 34 63 / 86%), rgb(45 68 121 / 66%));
  border-radius: calc(var(--u) * 0.9);
  transform: skewX(-9deg);
}

.hud-standings li.me {
  background: linear-gradient(90deg, #ff9d1e, var(--c-gold));
  box-shadow: 0 0 calc(var(--u) * 1.2) rgb(255 190 40 / 70%);
}

.hud-standings .num { flex: 1; font-size: calc(var(--u) * 2.7); }

.hud-standings .face {
  width: calc(var(--u) * 3.8);
  height: calc(var(--u) * 3.8);
  transform: skewX(9deg);
}

/* a player at a shared screen: the row in the seat's colour, with the seat's shape */
.hud-standings li.seated {
  background: var(--seat);
  box-shadow: 0 0 0 calc(var(--u) * 0.25) var(--c-ink);
}

.hud-standings .shape {
  font-size: calc(var(--u) * 2.2);
  font-style: normal;
  line-height: 1;
  transform: skewX(9deg);
}

/* a short view has no room for six rows above the item slot */
@container (max-height: 300px) {
  .hud-view .hud-standings { display: none; }
}

/* ---------------------------------------------------------------- right: lap / place / time, minimap, speed */
.hud-right {
  position: absolute;
  top: calc(var(--u) * 2);
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  align-items: flex-end;
  width: calc(var(--u) * 25);
}

.hud-tr {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  align-items: flex-end;
}

.hud-lapline {
  display: flex;
  gap: calc(var(--u) * 1.2);
  align-items: center;
}

.hud-lap {
  flex-direction: column;
  min-width: calc(var(--u) * 9.5);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 1.3);
  line-height: 1;
}

.hud-lap b { font-size: calc(var(--u) * 4.8); }

.hud-lap small {
  font-size: calc(var(--u) * 1.8);
  letter-spacing: calc(var(--u) * 0.25);
  opacity: 0.9;
}

.hud-rank {
  display: block;
  height: calc(var(--u) * 9);
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgb(0 0 0 / 40%));
}
/* the place is SVG lettering (ui/rankBadge.js): as tall as its box, as wide as its letters */
.hud-rank svg { display: block; height: 100%; width: auto; overflow: visible; }

.hud-time {
  gap: calc(var(--u) * 0.8);
  margin-right: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 2.5);
  font-variant-numeric: tabular-nums;
}

.hud-time span { font-style: normal; }

/* the minimap takes the room left between the plates above and the speedometer below */
.hud-map {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 0;
}

.hud-map svg {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: calc(var(--u) * 24);
  overflow: visible;
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgb(0 0 0 / 30%));
}

.map-edge { fill: none; stroke: var(--c-ink); stroke-linejoin: round; }
.map-road { fill: none; stroke: #e9f1ff; stroke-linejoin: round; }

/* the portrait is the pin; yours has a gold glow. Without a portrait: a disc in the driver's colour with the initial */
.map-marker circle,
.map-letter,
.map-place { display: none; }

.map-marker.me image { filter: drop-shadow(0 0 3px var(--c-gold)) drop-shadow(0 0 1.5px var(--c-gold)); }
.map-marker.no-face image { display: none; }
.map-marker.no-face circle { display: block; stroke: var(--c-ink); stroke-width: 4; }
.map-marker.no-face .map-letter { display: block; fill: #fff; font-style: italic; font-weight: 900; }

/* at a shared screen each player's marker is framed in the seat's colour, and carries the seat's shape */
.map-frame { fill: var(--seat); stroke: var(--c-ink); }
.map-seat { fill: var(--seat); stroke: var(--c-ink); stroke-linejoin: round; }

/* colour-safe markers: each marker carries its place */
html.colour-safe .map-place {
  display: block;
  font-weight: 900;
  fill: #fff;
  stroke: var(--c-ink);
  stroke-width: 6;
  paint-order: stroke fill;
}

.hud-br {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  align-items: stretch;
  width: 100%;
}

.hud-speedo {
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgb(0 0 0 / 35%));
}

.speedo-plate { fill: var(--c-navy-900); stroke: var(--c-rim); stroke-width: 3; }
.speedo-seg { opacity: 0.2; transition: opacity 0.12s; }
.speedo-seg.on { opacity: 1; }
.speedo-value { font-size: 44px; fill: #fff; stroke: var(--c-ink); stroke-width: 7; paint-order: stroke fill; }
.speedo-unit { font-size: 15px; fill: #cfe3ff; }

.hud-boost {
  display: flex;
  gap: calc(var(--u) * 0.8);
  align-items: center;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 2);
  background: linear-gradient(rgb(45 68 121 / 92%), rgb(21 34 63 / 92%));
  border: calc(var(--u) * 0.22) solid var(--c-rim);
  border-radius: calc(var(--u) * 1.1);
  transform: skewX(-9deg);
}

.hud-boost-track {
  flex: 1;
  height: calc(var(--u) * 1.7);
  overflow: hidden;
  background: rgb(0 0 0 / 45%);
  border-radius: calc(var(--u) * 0.6);
}

.hud-boost-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2aa8ff, #9be7ff);
  transform: scaleX(0);
  transform-origin: left center;
}

.hud-boost-track i.burn { background: linear-gradient(90deg, #2aa8ff, #fff); box-shadow: 0 0 10px #6fd0ff; }
.hud-boost-track i.drift0 { background: #b9c4d6; }
.hud-boost-track i.drift1 { background: linear-gradient(90deg, #2aa8ff, #9be7ff); }
.hud-boost-track i.drift2 { background: linear-gradient(90deg, #ff9d1e, #ffe23a); }
.hud-boost-track i.drift3 { background: linear-gradient(90deg, #ff3fb4, #ffb3ec); }

/* ---------------------------------------------------------------- bottom left: items, coins */
.hud-bl {
  position: absolute;
  bottom: calc(var(--u) * 2);
  left: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  align-items: flex-start;
}

.hud-items {
  display: flex;
  gap: calc(var(--u) * 1.1);
  align-items: flex-end;
}

.hud-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  background: radial-gradient(circle at 50% 35%, #3a5596, var(--c-navy-900) 72%);
  border: calc(var(--u) * 0.5) solid var(--c-rim);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u) * 0.35) var(--c-ink), 0 calc(var(--u) * 0.6) calc(var(--u) * 1.2) rgb(0 0 0 / 45%);
}

.hud-item.has {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 calc(var(--u) * 0.35) var(--c-ink), 0 0 calc(var(--u) * 2.4) rgb(255 200 60 / 85%);
  animation: item-pulse 1.1s ease-in-out infinite;
}

@keyframes item-pulse {
  50% { transform: scale(1.05); }
}

/* the item waiting behind the one in hand: smaller, beside it, only there when it holds something */
.hud-spare {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-width: calc(var(--u) * 0.4);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s, transform 0.18s;
}

.hud-spare.has {
  opacity: 1;
  transform: none;
  animation: none;
  box-shadow: 0 0 0 calc(var(--u) * 0.35) var(--c-ink), 0 0 calc(var(--u) * 1.2) rgb(255 200 60 / 55%);
}

.hud-item-art {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgb(0 0 0 / 35%));
}

.hud-item-art.empty { opacity: 0.28; filter: grayscale(0.7); }

/* how many: a badge on the slot's top-right edge */
.hud-item-count {
  position: absolute;
  top: calc(var(--u) * -0.6);
  right: calc(var(--u) * -0.9);
  font-size: calc(var(--u) * 3);
}

.hud-spare .hud-item-count { font-size: calc(var(--u) * 2.2); }

/* a mystery box's dice are rolling: the item slot shakes until it lands */
.rolling { animation: slot-roll 0.12s linear infinite; }
@keyframes slot-roll { 0% { transform: rotate(-5deg) scale(1.06); } 50% { transform: rotate(5deg) scale(1.1); } 100% { transform: rotate(-5deg) scale(1.06); } }

/* the coin meter: coin, count, bar (gold: speed; marks: a coin turbo each), bolt (a turbo is paid for) */
.hud-coins {
  display: flex;
  gap: calc(var(--u) * 0.8);
  align-items: center;
  height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * 0.4);
  background: linear-gradient(rgb(45 68 121 / 92%), rgb(21 34 63 / 92%));
  border: calc(var(--u) * 0.22) solid var(--c-rim);
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgb(0 0 0 / 35%);
}

.hud-coin-icon { height: calc(var(--u) * 4.6); margin: calc(var(--u) * -0.6) 0; }

.hud-coin-count {
  min-width: calc(var(--u) * 3.2);
  font-size: calc(var(--u) * 2.9);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hud-coin-bar {
  position: relative;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 1.6);
  overflow: hidden;
  background: linear-gradient(90deg, #ffe066 0, #ffa51e calc(var(--speed) * 100%), #35c8ff calc(var(--speed) * 100%), #9be7ff);
  border-radius: calc(var(--u) * 0.5);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.15) rgb(0 0 0 / 40%);
}

/* (the part of the purse not filled yet) */
.hud-coin-empty {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  background: rgb(10 18 40 / 90%);
  transition: width 0.2s;
}

.hud-coin-notch,
.hud-coin-speed {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 0.3);
  background: var(--c-ink);
  transform: translateX(-50%);
}

.hud-coin-speed { width: calc(var(--u) * 0.4); background: #fff; }

/* the button to press, on the item slot and the coin meter while there is something to use (js/ui/views/controlsView.js
   hudHint): a player alone's in the kind of device last used (no hint while playing by touch: the buttons are on the
   screen), a shared screen's each in its own player's device */
.hud-key {
  position: absolute;
  z-index: 1;
  display: none;
  font-size: calc(var(--u) * 2.4);
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 0.25) 0 rgb(0 0 0 / 45%));
}

.hud-key-item { right: calc(var(--u) * -2.2); bottom: calc(var(--u) * -1.2); }
.hud-coins { position: relative; }
.hud-key-turbo { top: calc(var(--u) * -3.4); right: calc(var(--u) * -1.8); }
.hud-item.has > .hud-key,
.hud-coins.ready > .hud-key { display: flex; }
.hud-key > span { display: none; gap: 0.2em; }
.hud-key[data-device="pad"] > .hud-key-pad,
.hud-key[data-device="keys"] > .hud-key-keys,
html[data-input="pad"][data-pad="xbox"] .hud-key[data-device="solo"] > .hud-key-pad[data-family="xbox"],
html[data-input="pad"][data-pad="playstation"] .hud-key[data-device="solo"] > .hud-key-pad[data-family="playstation"],
html[data-input="pad"][data-pad="nintendo"] .hud-key[data-device="solo"] > .hud-key-pad[data-family="nintendo"],
html[data-input="pad"][data-pad="generic"] .hud-key[data-device="solo"] > .hud-key-pad[data-family="generic"],
html:not([data-input="pad"]) .hud-key[data-device="solo"] > .hud-key-keys { display: flex; }
html.touch .hud-key[data-device="solo"] { visibility: hidden; }

.hud-coin-bolt { display: flex; color: rgb(255 255 255 / 25%); transition: color 0.2s, transform 0.2s; }
.hud-coin-bolt svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
.hud-coins.ready .hud-coin-bolt { color: var(--c-cyan); filter: drop-shadow(0 0 calc(var(--u) * 0.6) #6fd0ff); transform: scale(1.1); }
.hud-coins.full { border-color: var(--c-gold); }

/* ---------------------------------------------------------------- banners */
.hud-banner {
  position: absolute;
  top: 30%;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  font-size: calc(var(--u) * 11);
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--u) * 1) var(--c-ink);
  text-shadow: 0 calc(var(--u) * 0.7) 0 rgb(0 0 0 / 40%);
  opacity: 0;
  transition: opacity 0.3s;
}

.hud-banner.show { opacity: 1; }
.hud-banner.pop { animation: banner-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.hud-banner.count { color: var(--c-gold); }
.hud-banner.go { color: #5df07a; }
.hud-banner.oops { color: #ff8fb3; font-size: calc(var(--u) * 7); }
.hud-banner.lap { color: #9be7ff; font-size: calc(var(--u) * 7.5); }
.hud-banner.finish { color: #ffe45c; font-size: calc(var(--u) * 8.5); }
.hud-banner.stunt { color: #ffb3ec; font-size: calc(var(--u) * 7); }

@keyframes banner-pop {
  from { transform: scale(0.3) rotate(-8deg); }
  to { transform: none; }
}

.hud-hint {
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  font-size: calc(var(--u) * 5);
  color: #ff6b6b;
  paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--u) * 0.6) var(--c-ink);
  opacity: 0;
}

.hud-hint.show { opacity: 1; animation: hint-blink 0.6s steps(2) infinite; }

@keyframes hint-blink {
  50% { opacity: 0.3; }
}

/* ---------------------------------------------------------------- a shared screen: each view, its player's own things */
/* Seat, place and lap; items and coins; speed - kept to the view's outer edges and mirrored by where the view is
   (data-pos: top / bottom of two stacked halves, tl / tr / bl / br of quarters). Each chase camera keeps its kart low in
   the middle of its view, and the middle of the screen, where the views meet, is the shared panel's (below). */
.hud-id {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  align-items: flex-start;
}

/* the place at the outer edge: on the left side of the screen it comes before the lap */
.hud-view[data-pos] .hud-lapline { flex-direction: row-reverse; }
.hud-view[data-pos="tr"] .hud-lapline,
.hud-view[data-pos="br"] .hud-lapline { flex-direction: row; }

/* the player's own time, once over the line */
.hud-finish b { color: var(--c-gold); }

.hud-view[data-pos] .hud-id,
.hud-view[data-pos] .hud-br { position: absolute; }

.hud-view[data-pos] .hud-br { width: calc(var(--u) * 25); }

/* two stacked halves: seat and place, then items and coins, along the outer edge on the left; the speed on the right */
.hud-view[data-pos="top"] .hud-side,
.hud-view[data-pos="bottom"] .hud-side {
  position: absolute;
  left: calc(var(--u) * 2);
  display: flex;
  gap: calc(var(--u) * 2.4);
}

.hud-view[data-pos="top"] .hud-side { top: calc(var(--u) * 2); align-items: flex-start; }
.hud-view[data-pos="bottom"] .hud-side { bottom: calc(var(--u) * 2); align-items: flex-end; }

.hud-view[data-pos="top"] .hud-side .hud-id,
.hud-view[data-pos="top"] .hud-side .hud-bl,
.hud-view[data-pos="bottom"] .hud-side .hud-id,
.hud-view[data-pos="bottom"] .hud-side .hud-bl { position: static; }

.hud-view[data-pos="top"] .hud-br { top: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.hud-view[data-pos="bottom"] .hud-br { right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); }

/* quarters: the place in the screen's corner, the speed along the outer edge towards the middle, the items and coins down
   (or up) the side towards the seam - the inner corner, at the middle of the screen, stays free */
.hud-view[data-pos="tl"] .hud-side,
.hud-view[data-pos="tr"] .hud-side,
.hud-view[data-pos="bl"] .hud-side,
.hud-view[data-pos="br"] .hud-side { display: contents; }

.hud-view[data-pos="tl"] .hud-id { top: calc(var(--u) * 2); left: calc(var(--u) * 2); }
.hud-view[data-pos="tr"] .hud-id { top: calc(var(--u) * 2); right: calc(var(--u) * 2); align-items: flex-end; }
.hud-view[data-pos="bl"] .hud-id { bottom: calc(var(--u) * 2); left: calc(var(--u) * 2); }
.hud-view[data-pos="br"] .hud-id { right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); align-items: flex-end; }

.hud-view[data-pos="tl"] .hud-br { top: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.hud-view[data-pos="tr"] .hud-br { top: calc(var(--u) * 2); left: calc(var(--u) * 2); }
.hud-view[data-pos="bl"] .hud-br { right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); }
.hud-view[data-pos="br"] .hud-br { bottom: calc(var(--u) * 2); left: calc(var(--u) * 2); }

/* (the items are bottom-left already: tl) */
.hud-view[data-pos="tr"] .hud-bl { right: calc(var(--u) * 2); left: auto; align-items: flex-end; }
.hud-view[data-pos="bl"] .hud-bl { top: calc(var(--u) * 2); bottom: auto; }
.hud-view[data-pos="br"] .hud-bl { top: calc(var(--u) * 2); right: calc(var(--u) * 2); bottom: auto; left: auto; align-items: flex-end; }

.hud-view[data-pos="tr"] .hud-items,
.hud-view[data-pos="br"] .hud-items { flex-direction: row-reverse; }

/* three players: the leader's view in the fourth quarter is dimmed under the shared panel */
.hud[data-views="3"] .hud-spectator {
  align-items: flex-end;
  justify-content: flex-end;
  background: rgb(13 23 48 / 45%);
}

/* ---------------------------------------------------------------- a shared screen: what the players share, once */
/* A layer over the whole screen (js/ui/hud/sharedPanel.js) with a unit of its own - the same as each view's, worked out
   from the screen: two stacked halves are half as tall as it, quarters half as tall and half as wide. --map is the room
   the views leave the minimap (each view's speedometer reaches some 24u in from the screen's edge). */
.hud-shared {
  position: absolute;
  inset: 0;
  container-type: size;
  --u: calc(clamp(4px, min(0.65cqh, 0.4cqw), 13px) * var(--u-scale));
}

.hud-shared-box {
  position: absolute;
  inset: 0;
  display: flex;
  gap: calc(var(--u) * 1.2);
  align-items: center;
  justify-content: center;
}

.hud-board {
  display: flex;
  gap: calc(var(--u) * 1.2);
  align-items: center;
}

.hud-shared .hud-map {
  flex: none;
  justify-content: center;
  width: auto;
  height: var(--map);
}

.hud-shared .hud-map svg { max-height: none; }

/* the banner for everyone (the countdown): in the middle of the screen */
.hud-shared .hud-banner {
  top: calc(50% - 0.5em);
  font-size: calc(var(--u) * 13);
}

/* standings as a strip, one place after the other */
.hud[data-views="2"] .hud-shared .hud-standings,
.hud[data-views="4"] .hud-shared .hud-standings { flex-direction: row; }

.hud[data-views="2"] .hud-shared .hud-standings li,
.hud[data-views="4"] .hud-shared .hud-standings li { width: auto; }

/* two stacked halves: along the seam - the clock and the standings on the left, the map on the right; the middle, just
   above which the top player's kart is, stays clear */
.hud[data-views="2"] .hud-shared {
  --u: calc(clamp(4px, min(0.65cqh, 0.8cqw), 13px) * var(--u-scale));
  --map: min(calc(var(--u) * 40), calc(100cqh - var(--u) * 50));
}

.hud[data-views="2"] .hud-shared-box {
  justify-content: space-between;
  padding: 0 calc(var(--u) * 2);
}

/* three players: in the fourth quarter, over the leader's dimmed view - the clock over the standings, the map beside them */
.hud[data-views="3"] .hud-shared { --map: min(calc(var(--u) * 44), calc(50cqh - var(--u) * 6)); }
.hud[data-views="3"] .hud-shared-box { inset: 50% 0 0 50%; gap: calc(var(--u) * 3); }

.hud[data-views="3"] .hud-board {
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
  align-items: flex-start;
}

/* four players: at the cross in the middle of the screen, clear of every kart - the clock, the map, the standings */
.hud[data-views="4"] .hud-shared { --map: min(calc(var(--u) * 36), calc(100cqh - var(--u) * 60)); }
.hud[data-views="4"] .hud-shared-box { flex-direction: column; }
.hud[data-views="4"] .hud-board { display: contents; }
.hud[data-views="4"] .hud-shared .hud-map { order: 1; }
.hud[data-views="4"] .hud-shared .hud-standings { order: 2; }

/* ---------------------------------------------------------------- developer read-out (?stats=1) */
.stats {
  position: fixed;
  top: 6px;
  left: 50%;
  z-index: 10;
  margin: 0;
  padding: 6px 10px;
  font: 12px/1.35 ui-monospace, Consolas, monospace;
  color: #d7ffd9;
  pointer-events: none;
  background: rgb(0 0 0 / 60%);
  border-radius: 8px;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------- rear-view mirror (top centre, see js/mirror.js) */
/* The picture is drawn by the renderer into exactly this box; the rim lies outside it and covers its square corners. */
.hud-mirror {
  --u: clamp(7px, 1.25vh, 13px);
  --mirror-rim: var(--c-gold);
  position: absolute;
  display: none;
  box-sizing: content-box;
  margin: calc(var(--u) * -0.62);
  border: calc(var(--u) * 0.62) solid var(--mirror-rim);
  border-radius: calc(var(--u) * 2);
  background: linear-gradient(165deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%) 32%, rgb(255 255 255 / 0%) 80%, rgb(10 20 50 / 22%));
  box-shadow: 0 0 0 calc(var(--u) * 0.32) var(--c-ink), 0 calc(var(--u) * 0.7) calc(var(--u) * 1.4) rgb(0 0 0 / 50%),
    inset 0 0 0 1.5px var(--c-ink), inset 0 0 calc(var(--u) * 1.6) rgb(0 0 0 / 40%);
}

/* the arm it hangs from */
.hud-mirror::before {
  position: absolute;
  bottom: calc(100% + var(--u) * 0.6);
  left: 50%;
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 6);
  background: linear-gradient(90deg, var(--c-navy-900), var(--c-navy-700) 45%, var(--c-navy-900));
  border: calc(var(--u) * 0.3) solid var(--c-ink);
  border-radius: 0 0 calc(var(--u) * 0.8) calc(var(--u) * 0.8);
  content: "";
  transform: translateX(-50%);
}

.hud-mirror.warn {
  --mirror-rim: #ff6248;
  animation: mirror-warn 0.45s ease-in-out infinite alternate;
}

@keyframes mirror-warn {
  to { border-color: #ffb09a; }
}

/* the mirror's glass: the picture behind it, turned side to side (Hud.reflect) */
.hud-mirror canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: calc(var(--u) * 1.4); }

/* nothing going on behind: a plain dark rim (gold is for a hit of the player's, red for something coming) */
.hud-mirror.idle { --mirror-rim: var(--c-navy-900); }

/* every layout of the HUD drawn once at start-up where nobody sees it (js/ui/hud.js: Hud.warm), so that the browser
   compiles what it draws them with before the first race needs it: all but see-through - at opacity 0 it would not be
   drawn at all, even with will-change; 0.0005 is drawn, and adds less than half a step of 8 bits to any pixel (the title
   screen's pixels come out the same with it as without) */
.hud-warm {
  position: fixed;
  inset: 0;
  opacity: 0.0005;
  will-change: opacity;
  pointer-events: none;
}

/* while a race has the keys the pointer is hidden over the picture (game.js showCursor); menus over it show it again */
html.racing #view { cursor: none; }