/* In-race HUD. */

.hud {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  font-family: var(--display);
  color: #fff;
  --panel: rgba(8, 12, 24, .62);
  --edge: max(14px, var(--safe-l));
  --edge-r: max(14px, var(--safe-r));
}
.hud.on { opacity: 1; }
.hud .hide { display: none !important; }

.hud-tl, .hud-tr, .hud-dash, .hud-map {
  position: absolute;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Position + lap */
.hud-tl { left: var(--edge); top: 12px; display: flex; flex-direction: column; gap: 4px; }
.hud-pos {
  display: flex; align-items: baseline; gap: 2px;
  font-style: italic; font-weight: 800; line-height: .9;
  background: var(--panel);
  padding: 6px 14px 6px 10px;
  border-left: 5px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hud-pos .big { font-size: 54px; letter-spacing: -.02em; }
.hud-pos .of { font-size: 22px; color: var(--muted); }
.hud.tt .hud-pos { display: none; }
.hud-lap {
  align-self: flex-start;
  background: var(--panel);
  padding: 4px 14px 4px 10px;
  font: italic 700 15px/1.2 var(--display);
  letter-spacing: .08em;
  color: #cfd6e6;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.hud-lap b { color: #fff; font-size: 19px; }
.hud-lap span { color: var(--muted); }

/* Lap times */
.hud-tr { right: var(--edge-r); top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.trow {
  display: flex; gap: 10px; align-items: baseline;
  background: var(--panel);
  padding: 3px 10px 3px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  min-width: 156px; justify-content: space-between;
}
.trow .lbl { font: 700 11px/1 var(--body); letter-spacing: .14em; color: var(--muted); }
.trow .val { font: 600 18px/1.15 var(--mono); font-variant-numeric: tabular-nums; }
.trow .val.invalid { color: #ff7d7d; text-decoration: line-through; }
.trow.gap .val { color: var(--accent); }
.trow.gap:empty, .trow.gap .lbl:empty { display: none; }

/* Dashboard: revs, gear, speed, damage */
.hud-dash {
  right: var(--edge-r);
  bottom: calc(14px + var(--safe-b));
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.revs { display: flex; gap: 3px; height: 14px; align-items: flex-end; }
.revs i {
  width: 9px; height: calc(6px + var(--i) * .45px);
  background: rgba(255, 255, 255, .16);
  transform: skewX(-14deg);
  border-radius: 1px;
}
.revs i.on { background: #e9eef8; }
.revs i.on.amber { background: #FFC21F; }
.revs i.on.red { background: #FF3B3B; }
.revs.limit i.on { animation: limiter .08s steps(2) infinite; }
@keyframes limiter { 50% { opacity: .25; } }
.dash-row { display: flex; align-items: center; gap: 10px; background: var(--panel); padding: 4px 14px 4px 10px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }
.gear {
  min-width: 42px; text-align: center;
  font: italic 800 46px/1 var(--display);
  color: var(--accent);
}
.speedbox { display: flex; flex-direction: column; align-items: flex-end; }
.speed { font: italic 800 44px/.95 var(--display); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.unit { font: 700 11px/1 var(--body); letter-spacing: .16em; color: var(--muted); }
.dmg { position: absolute; left: -64px; bottom: 4px; }
.dmg.hide { display: none; }
.dmg-car { position: relative; width: 30px; height: 54px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 9px 9px 7px 7px; background: rgba(0, 0, 0, .3); }
.dmg-car i { position: absolute; border-radius: 3px; background: rgba(80, 220, 120, .85); }
.dmg-car .f { left: 4px; right: 4px; top: 3px; height: 9px; }
.dmg-car .b { left: 4px; right: 4px; bottom: 3px; height: 8px; }
.dmg-car .l { left: 3px; top: 15px; bottom: 14px; width: 6px; }
.dmg-car .r { right: 3px; top: 15px; bottom: 14px; width: 6px; }

/* Map */
.hud-map {
  left: var(--edge);
  bottom: calc(14px + var(--safe-b));
  width: 170px; height: 150px;
  background: radial-gradient(closest-side, rgba(8, 12, 24, .5), rgba(8, 12, 24, 0));
}
.hud-map canvas { width: 100%; height: 100%; display: block; }

/* Timing tower */
.hud-tower {
  position: absolute;
  left: var(--edge);
  top: 116px;
  display: flex; flex-direction: column; gap: 2px;
  font: 600 13px/1 var(--body);
}
.trow-pos {
  display: grid; grid-template-columns: 20px 6px 38px 52px; gap: 6px; align-items: center;
  background: rgba(8, 12, 24, .55);
  padding: 3px 8px 3px 6px;
  height: 21px;
}
.trow-pos .p { font: italic 800 14px/1 var(--display); text-align: right; color: #cdd5e6; }
.trow-pos .chip { width: 6px; height: 14px; border-left: 3px solid transparent; border-radius: 1px; }
.trow-pos .n { letter-spacing: .06em; }
.trow-pos .g { font: 500 12px/1 var(--mono); color: #b9c3d8; text-align: right; }
.trow-pos.me { background: rgba(255, 210, 31, .92); color: #1b1600; }
.trow-pos.me .p, .trow-pos.me .g { color: #1b1600; }
.trow-pos.pit { opacity: .5; }

/* Middle: start lights and messages */
.hud-centre {
  position: absolute; left: 50%; top: 22%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(92vw, 640px);
  text-align: center;
}
.lights { display: flex; gap: 10px; padding: 10px 14px; background: rgba(10, 12, 18, .85); border-radius: 12px; opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s; }
.lights.on { opacity: 1; transform: none; }
.lamp { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #05070b; border-radius: 8px; }
.lamp i { width: 30px; height: 30px; border-radius: 50%; background: #2a0d0d; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.lamp.red i { background: radial-gradient(circle at 40% 35%, #ff9d8a, #ff1f12 55%, #9a0800); box-shadow: 0 0 18px rgba(255, 40, 20, .85); }
.lights.go .lamp i { background: radial-gradient(circle at 40% 35%, #c9ffbf, #21e04e 55%, #0b7a25); box-shadow: 0 0 18px rgba(40, 255, 90, .8); }
.msg {
  font: italic 800 clamp(30px, 6vw, 54px)/1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 8px 26px;
  background: rgba(8, 12, 24, .7);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  opacity: 0; transform: scale(.9);
  transition: opacity .2s, transform .2s;
}
.msg.on { opacity: 1; transform: none; }
.msg[data-kind="good"] { color: var(--green); }
.msg[data-kind="best"] { color: var(--purple); }
.msg[data-kind="warn"] { color: var(--accent); }
.msg[data-kind="bad"] { color: #ff6b6b; }
.submsg { font: 600 15px/1.3 var(--body); color: #e3e8f2; background: rgba(8, 12, 24, .6); padding: 6px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; }
.submsg.on { opacity: 1; }
.submsg:empty { display: none; }

.hud-flag {
  position: absolute; left: 50%; top: 42%; transform: translateX(-50%);
  font: italic 800 34px/1 var(--display); color: #fff;
  background: #d71e1e; padding: 8px 22px; letter-spacing: .06em;
  opacity: 0; transition: opacity .2s;
}
.hud-flag.wrong { opacity: 1; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* Rear-view mirror frame (the picture itself is drawn by WebGL underneath). */
.hud-mirror {
  position: absolute;
  border: 3px solid #0b0d12;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .15);
  display: none;
}
.hud-mirror.on { display: block; }

@media (max-width: 760px), (max-height: 520px) {
  .hud-pos .big { font-size: 40px; }
  .hud-pos .of { font-size: 17px; }
  .trow { min-width: 130px; padding: 2px 8px 2px 12px; }
  .trow .val { font-size: 15px; }
  .hud-map { width: 120px; height: 104px; }
  .hud-tower { top: 92px; font-size: 12px; }
  .trow-pos { height: 18px; grid-template-columns: 16px 5px 32px 46px; }
  .gear { font-size: 36px; min-width: 32px; }
  .speed { font-size: 34px; }
}
/* On touch screens the pedals sit bottom-right and the arrows bottom-left: the speed moves to
   the top middle and the map to the bottom middle. */
.touch-on .hud-dash { bottom: auto; top: 10px; right: 50%; transform: translateX(50%); }
.touch-on .hud-dash .revs { display: none; }
.touch-on .dmg { display: none; }
.touch-on .hud-map { bottom: calc(10px + var(--safe-b)); left: 50%; transform: translateX(-50%); width: 120px; height: 96px; }
.touch-on .hud-centre { top: 30%; }
@media (max-height: 520px) {
  .touch-on .hud-tower { display: none; }
  .touch-on .hud-map { width: 100px; height: 80px; }
}
@media (orientation: portrait) {
  .touch-on .hud-map { bottom: auto; top: 190px; left: auto; right: max(14px, var(--safe-r)); transform: none; }
}