/* The riding screen on a TV: the phone's HUD at TV scale (TvScreen.Scale: cards and bars 1.6×,
   mini-map 2 × 1.6, credit 1.3 × 1.6), 48 px from the edges for overscan. 1920 × 1080 stage. */
* { box-sizing: border-box; margin: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: -apple-system, "Google Sans", Roboto, "Segoe UI", Helvetica, Arial, sans-serif; color: #fff; }

#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  background: radial-gradient(ellipse at 50% 35%, #1c2326 0%, #0b0d0e 70%); }
[hidden], .off { display: none !important; }

/* The world: Cast 2's video, or Cast 1's route profile in its place. */
#world { position: absolute; inset: 0; }
#worldVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#profile { position: absolute; left: 0; right: 0; bottom: 230px; width: 100%; height: 420px; }
#profileFacts { position: absolute; left: 0; right: 0; bottom: 170px; display: flex; justify-content: center; gap: 64px;
  font-size: 30px; font-weight: 600; color: rgba(255,255,255,.75); }
#stage[data-world="tv"] #profile, #stage[data-world="tv"] #profileFacts { display: none; }

.panel { background: rgba(0,0,0,.72); border: 1.6px solid rgba(255,255,255,.14); border-radius: 22px; }
.hud { position: absolute; }
.fig { font-weight: 700; font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.unit { font-size: 18px; font-weight: 600; opacity: .85; margin-left: 4px; }
.lbl { font-size: 16px; letter-spacing: .06em; opacity: .7; margin-top: 5px; }

.card-center { position: absolute; left: 0; right: 0; top: 40%; text-align: center; }
.card-center .brand { font-size: 72px; font-weight: 700; letter-spacing: -.01em; }
.card-center .sub { font-size: 30px; opacity: .7; margin-top: 16px; }

#rose { left: 48px; top: 48px; }
#roseRing, #roseArrow { transform-origin: 32px 32px; transition: transform .25s linear; }
#miniMap { left: 166px; top: 48px; width: 288px; height: 205px; overflow: hidden; }

#intervals { left: 50%; top: 48px; width: 678px; margin-left: -339px; padding: 13px 16px; }
.iv-top { display: flex; justify-content: space-between; font-size: 18px; opacity: .9; margin-bottom: 10px; }
.iv-top b { font-size: 21px; }
.iv-blocks { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.iv-blocks i { display: block; border-radius: 3px; }
#ivCursor { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; }

.bar { top: 44%; display: flex; align-items: center; gap: 13px; }
.bar.left { left: 48px; } .bar.right { right: 48px; }
.zb { position: relative; width: 22px; height: 176px; border-radius: 11px; background: rgba(255,255,255,.12); overflow: hidden; }
.zb i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 11px; transition: height .25s; }
.zv { padding: 6px 13px; font-weight: 700; font-size: 32px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zv .unit { font-size: 16px; }

#speedGrade { left: 48px; bottom: 48px; padding: 13px 19px; display: flex; gap: 26px; align-items: flex-end; }
.graph { position: relative; display: flex; align-items: center; gap: 2px; height: 26px; width: 102px; margin-bottom: 6px; }
.graph::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.6px; background: rgba(255,255,255,.35); }
.graph i { flex: 1; border-radius: 2px; }

#allowance { right: 48px; top: 48px; padding: 13px 19px; text-align: right; }
#pausedBanner { left: 50%; top: 46%; transform: translate(-50%, -50%); padding: 19px 45px; font-size: 42px; font-weight: 700; }
#routeEnd { left: 50%; top: 220px; transform: translateX(-50%); padding: 16px 32px; text-align: center; }
#summary { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 32px 48px; min-width: 760px; text-align: center; }
.sum-title { font-size: 34px; font-weight: 700; margin-bottom: 24px; }
.sum-row { display: flex; justify-content: space-around; gap: 48px; }

#credit { right: 48px; bottom: 48px; width: 499px; text-align: right; font-size: 23px; line-height: 31px; color: #fff;
  text-shadow: 0 1.6px 3px #000; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* Stages: the title card alone when off or away; the route's name before Start; no numbers at the end. */
#title { display: none; }
#routeName { display: block; }
#stage[data-stage="off"] #title, #stage[data-stage="title"] #title { display: block; }
#stage[data-stage="off"] #world, #stage[data-stage="title"] #world { display: none; }