/* The drive tracker (src/drive_tracker.js): the sim's picture, a TV drive
   strip on navy. The strip and the drive are one SVG stretched to the box
   (its aspect ratio is the viewBox's), the pin, the words and the lights are
   HTML laid over it at the same percentages, so they stay their own size. */
.gd-field-wrap.dt-on > .gd-field { display: none; }
.gd-field-wrap.dt-on { background: #07111f; }
/* a call made over the tracker still gets the room it had over the field */
.gd-field-wrap.dt-on:has(> .gd-call:not(:empty)) { min-height: 440px; }
.dt-host { position: relative; }
.dt { position: relative; width: 100%; overflow: hidden; container-type: inline-size; color: #fff; font-family: Rubik, system-ui, sans-serif;
  background: radial-gradient(ellipse 80% 70% at 50% 100%, #1a3a60 0%, #0d2140 45%, #07111f 100%); }
/* a big desk: the strip stops growing, centred on the same navy */
.dt:not(.narrow) { max-width: 1100px; margin: 0 auto; }
.dt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dt-num { fill: #fff; opacity: .9; font: 800 italic 30px Rubik, system-ui, sans-serif; letter-spacing: 1px; }
.dt-num.dim { opacity: .35; font-size: 22px; }
.dt.narrow .dt-num { font-size: 46px; }
.dt-post { stroke: #f59e0b; stroke-width: 5; fill: none; stroke-linecap: round; }
.dt.narrow .dt-post { stroke-width: 8; }

.dt-los { stroke: #60a5fa; stroke-width: 3; opacity: .85; }
.dt-togo { stroke: #facc15; stroke-width: 4; opacity: .9; }
.dt-togo.lit { stroke-width: 7; filter: drop-shadow(0 0 6px #facc15); animation: dt-pulse .5s ease-in-out 4 alternate; }
.dt-leg { fill: none; stroke: #2dd4bf; stroke-width: 5; stroke-linecap: round; opacity: .75; }
.dt.narrow .dt-leg { stroke-width: 8; }
.dt-leg.last, .dt-leg.live { stroke: #5eead4; opacity: 1; stroke-width: 7; }
.dt.narrow .dt-leg.last, .dt.narrow .dt-leg.live { stroke-width: 11; }
.dt-leg.loss { stroke: #fb7185; }
.dt-leg.flag { stroke: #facc15; stroke-dasharray: 10 8; }
.dt-leg.ghost { stroke: #fff; opacity: .35; stroke-width: 3; stroke-dasharray: 8 7; }
.dt-leg.live.flag { stroke-dasharray: 1 2; }
.dt-glow { fill: none; stroke: #2dd4bf; stroke-width: 20; opacity: .55; stroke-linecap: round; }
.dt-glow.loss { stroke: #fb7185; }
.dt-dot { fill: #fff; stroke: #0b1a2e; stroke-width: 2.5; }
.dt-dot.start { fill: #9fb3c8; }
.dt-dot.fd { fill: #facc15; stroke: #fff; stroke-width: 3; }
.dt-dot.loss { fill: #fecdd3; }

/* the pin: face in a ring in the club's colour, on a stalk, the tip on the spot */
.dt-pinbox { position: absolute; width: 0; height: 0; z-index: 3; }
.dt-pin { position: absolute; left: 0; bottom: 0; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
.dt-head { display: block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: var(--c, #1b2c47);
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c, #1b2c47); }
.dt:not(.narrow) .dt-head { width: clamp(34px, 5.2cqw, 54px); height: clamp(34px, 5.2cqw, 54px); }
.dt-head .dt-fimg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dt-ini { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 900; font-size: 18px; }
.dt-tip { display: block; width: 0; height: 0; margin-top: 2px; border: 8px solid transparent; border-top: 11px solid #fff; border-bottom: 0; }
.dt-pin.none { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.dt-fb, .dt-ball { display: block; width: 18px; height: 11px; border-radius: 50%; background: #8b4a1c; border: 2px solid #fff; }
.dt-pin.none .dt-fb { margin-bottom: -5px; }
.dt-ball { position: absolute; z-index: 4; transform: translate(-50%, -50%) rotate(-25deg); box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.dt-ball[hidden] { display: none; }

/* the words under the pin, TV bold */
.dt-cap { position: absolute; bottom: 4%; transform: translateX(-50%); z-index: 3; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8); line-height: 1.1; pointer-events: none; }
.dt-cap[hidden] { display: none; }
.dt-cap b { display: block; font-weight: 900; font-style: italic; font-size: 21px; letter-spacing: .2px; }
.dt-cap span { display: block; font-weight: 800; font-size: 14px; color: #cbd5e1; text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
/* a wide box that is not so wide (a phone on its side, the game beside the card): the type follows the box */
.dt:not(.narrow) .dt-cap b { font-size: clamp(14px, 2.3cqw, 22px); }
.dt:not(.narrow) .dt-cap span { font-size: clamp(10px, 1.5cqw, 14px); }
.dt:not(.narrow) .dt-hd { font-size: clamp(11px, 1.6cqw, 15px); }
.dt:not(.narrow) .dt-pill { font-size: clamp(10px, 1.4cqw, 13px); }
.dt:not(.narrow) .dt-pill b { font-size: clamp(9px, 1.3cqw, 12px); }
.dt:not(.narrow) .dt-call b { font-size: clamp(17px, 3.2cqw, 32px); }
.dt:not(.narrow) .dt-call.dim b { font-size: clamp(12px, 2cqw, 20px); }

/* top left: whose ball, the down and the spot; top right: the drive */
.dt-hd { position: absolute; left: 12px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.dt-sw { width: 6px; height: 22px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.dt-ab { font-weight: 900; }
.dt-dd { padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); transition: background .3s, color .3s, box-shadow .3s; }
.dt-dd.lit { background: #facc15; color: #0d1b2a; box-shadow: 0 0 18px #facc15, 0 0 3px #fff; animation: dt-pulse .5s ease-in-out 4 alternate; }
.dt-pill { position: absolute; right: 12px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); font-size: 13px; font-weight: 700; }
.dt-pill b { padding: 3px 10px; border-radius: 999px; background: #2dd4bf; color: #06202a; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }

/* the lights: FIRST DOWN, TOUCHDOWN, INTERCEPTION */
.dt-call { position: absolute; left: 50%; top: 27%; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.dt-call b { display: block; padding: 6px 18px; border-radius: 6px; font-weight: 900; font-style: italic; font-size: 30px;
  text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; background: #facc15; color: #0d1b2a;
  box-shadow: 0 0 26px rgba(250, 204, 21, .75), 0 0 0 3px #fff; }
.dt-call.red b { background: #e11d48; color: #fff; box-shadow: 0 0 26px rgba(225, 29, 72, .8), 0 0 0 3px #fff; }
.dt-call.tm b { background: var(--c, #1b2c47); color: #fff; box-shadow: 0 0 30px var(--c, #1b2c47), 0 0 0 3px #facc15; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.dt-call.ink b { background: #0d1b2a; color: #fff; box-shadow: 0 0 22px rgba(0, 0, 0, .8), 0 0 0 3px #fb7185; }
.dt-call.dim b { background: rgba(255, 255, 255, .14); color: #e2e8f0; box-shadow: none; font-size: 20px; }
.dt-call.go { animation: dt-call 1.9s cubic-bezier(.2, .9, .2, 1) forwards; }
.dt-call.dim.go { animation-duration: 1s; }
@keyframes dt-call {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  20% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes dt-pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* a phone upright: the strip is taller (narrow viewBox), the type smaller */
.dt.narrow .dt-head { width: 40px; height: 40px; border-width: 2px; }
.dt.narrow .dt-tip { border-width: 6px; border-top-width: 9px; }
.dt.narrow .dt-cap { bottom: 3%; }
.dt.narrow .dt-cap b { font-size: 16px; }
.dt.narrow .dt-cap span { font-size: 11px; }
.dt.narrow .dt-hd { left: 8px; top: 8px; font-size: 12px; gap: 5px; }
.dt.narrow .dt-sw { height: 18px; }
.dt.narrow .dt-pill { right: 8px; top: 8px; font-size: 11px; padding: 3px 9px 3px 3px; gap: 6px; }
.dt.narrow .dt-pill b { font-size: 10px; padding: 2px 7px; }
.dt.narrow .dt-call { top: 30%; }
.dt.narrow .dt-call b { font-size: 21px; padding: 5px 12px; }
.dt.narrow .dt-call.dim b { font-size: 15px; }
@media (max-width: 400px) {
  .dt.narrow .dt-pill span { display: none; }
  .dt.narrow .dt-pill { padding-right: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-call.go { animation: none; opacity: 1; }
  .dt-dd.lit, .dt-togo.lit { animation: none; }
}