/* Rocket Roadster - screens and HUD. Night event look: white + hot orange logo (concept art), glassy dark panels, blue accents
   (the jets / mark). Portrait first.
   fix1 (2026-10-16, leader: "the text is small and unreadable; match art 01 / 02 / 04 / 10"): the HUD and the title were rebuilt
   on the art's layout - FUEL bar top-left, DESCENT SPEED big top-right, ALT + the mark finder top-centre, the round HOLD button
   bottom-centre, the speedometer on the run-up; the title's round-cornered LEADERBOARD / STUNT buttons bottom-left / right with
   TAP TO START between them; the result card = RESULT + TOTAL SCORE + today's top 5 with names. Sizes are set for a 390 px
   wide phone first (numbers 40-56 px, labels >= 12 px). Orange = what you do / what you scored, blue = the machine and lights. */
:root { --o: #ff8a1f; --o2: #ffb347; --b: #5fb4ff; --g: #4cff9a; --r: #ff4b4b; --panel: rgba(8, 12, 24, 0.74); --line: rgba(160, 190, 255, 0.24);
  --fd: 'Exo 2', 'Arial Black', sans-serif; --fb: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --st: max(12px, env(safe-area-inset-top)); --sb: max(14px, env(safe-area-inset-bottom)); --sl: max(14px, env(safe-area-inset-left)); --sr: max(14px, env(safe-area-inset-right)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #05070c; color: #fff; overflow: hidden; font-family: var(--fb); user-select: none; -webkit-user-select: none; touch-action: none; }
#app canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
[hidden] { display: none !important; }
button { font-family: var(--fd); cursor: pointer; }

/* ---------- logo (concept art 01: white ROCKET over an orange ROADSTER, a rocket streaking over it) ---------- */
.logo { position: relative; text-align: center; line-height: 0.86; font-family: var(--fd); font-style: italic; font-weight: 900; letter-spacing: 0.01em; }
.logo .rocket { position: absolute; left: 50%; top: -0.32em; width: 1.5em; margin-left: 0.25em; font-size: clamp(44px, 13vw, 96px); overflow: visible; }
.logo .rocket .trail { fill: none; stroke: var(--o); stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.logo .rocket .body { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.logo .l1 { font-size: clamp(44px, 13vw, 96px); color: #fff; text-shadow: 0 3px 0 #9aa6b8, 0 6px 22px rgba(0,0,0,0.6); }
.logo .l2 { font-size: clamp(44px, 13vw, 96px); background: linear-gradient(180deg, #ffd27a 0%, var(--o) 55%, #e2560c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #8a2c00) drop-shadow(0 8px 18px rgba(0,0,0,0.55)); }
.logo .lbar { height: 4px; margin: 10px auto 0; width: 70%; background: linear-gradient(90deg, transparent, var(--o) 15%, var(--o) 85%, transparent); box-shadow: 0 0 14px var(--o); }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; padding: var(--st) var(--sr) var(--sb) var(--sl); }
.title { justify-content: space-between; background: linear-gradient(180deg, rgba(3,5,10,0.55) 0%, rgba(3,5,10,0) 30%, rgba(3,5,10,0) 58%, rgba(3,5,10,0.75) 100%); }
.title .logo { margin-top: 3vh; }
.feat { font-family: var(--fb); font-weight: 600; letter-spacing: 0.32em; font-size: 12px; color: rgba(230,236,255,0.8); text-transform: uppercase; margin-top: -2px; }
.tbottom { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stagepick { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; width: min(360px, 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-arrow { width: 44px; height: 56px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.08); color: #fff; font-size: 28px; font-weight: 800; }
.sp-mid { flex: 1; text-align: center; }
.sp-mid .n { font-family: var(--fd); font-weight: 800; font-size: 12px; color: var(--b); letter-spacing: 0.12em; }
.sp-mid .t { font-family: var(--fd); font-weight: 900; font-style: italic; font-size: 21px; line-height: 1.1; }
.sp-mid .h { font-size: 13px; color: rgba(255,255,255,0.7); }
.sp-mid .bs { font-size: 12px; color: var(--o2); font-weight: 700; min-height: 14px; }
.trow { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; gap: 8px; }
.sq { width: 76px; height: 76px; flex: none; border-radius: 16px; border: 1px solid rgba(255,255,255,0.35); background: rgba(8,12,24,0.7); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sq svg { width: 38px; height: 38px; fill: #fff; } .sq svg .ln { fill: none; stroke: var(--o); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sq span { font-family: var(--fd); font-weight: 800; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
.cta { flex: 0 1 auto; font-weight: 800; font-size: clamp(16px, 4.6vw, 24px); letter-spacing: 0.04em; color: #fff; background: rgba(6,10,20,0.78); border: 2px solid rgba(255,255,255,0.92); border-radius: 14px; padding: 15px clamp(8px, 3vw, 24px); margin-bottom: 6px; white-space: nowrap; box-shadow: 0 0 24px rgba(95,180,255,0.25); animation: pulse 1.6s ease-in-out infinite; }
.cta span { color: var(--o); }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: 0 0 34px rgba(95,180,255,0.45); } }
.ttop { min-height: 16px; font-size: 13px; color: rgba(255,255,255,0.78); }
.credit { font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; }
.mute { position: fixed; z-index: 30; left: var(--sl); bottom: var(--sb); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: #fff; font-size: 16px; }
.title:not([hidden]) ~ .mute, .result:not([hidden]) ~ .mute { left: auto; bottom: auto; right: var(--sr); top: var(--st); }
.mute.off { opacity: 0.45; text-decoration: line-through; }
.lbp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,4,10,0.55); z-index: 12; padding: 16px; }
.lbp-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lbp-h { font-family: var(--fd); font-weight: 900; font-style: italic; font-size: 26px; }
.lbp-s { font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; color: var(--b); margin: 2px 0 8px; }

/* today's top 5 (title panel + result card): rank, a car glyph, name, score (concept art 10) */
.lb5 { list-style: none; margin: 4px 0; padding: 0; counter-reset: r; }
.lb5 li { counter-increment: r; display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 9px; background: rgba(255,255,255,0.06); font-family: var(--fd); font-weight: 800; font-size: 15px; }
.lb5 li::before { content: counter(r) "."; width: 20px; color: rgba(255,255,255,0.8); }
.lb5 li i { width: 22px; height: 16px; flex: none; border-radius: 4px; background: rgba(95,180,255,0.25); border: 1px solid rgba(95,180,255,0.6); }
.lb5 li em { flex: 1; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb5 li b { font-variant-numeric: tabular-nums; color: var(--o2); }
.lb5 li.mine { background: rgba(255,138,31,0.22); }
.lb5 li.empty { color: rgba(255,255,255,0.35); } .lb5 li.empty i { opacity: 0.3; }

/* ---------- HUD (fix2: edges only - the car is never covered; sizes for 390 px wide portrait first) ---------- */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-family: var(--fd); }
/* one short hint line at the top edge (1.5 s); first plays: bigger (body.first) */
.tip { position: absolute; left: 50%; top: calc(var(--st) + 30px); transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 8px #000, 0 0 2px #000; opacity: 0; transition: opacity 0.3s; }
.tip.go { color: var(--g); } .tip.warn { color: var(--o2); }
body.first .tip { font-size: 18px; top: calc(var(--st) + 30px); }
/* left edge: fuel, a thin vertical bar */
.edge-l { position: absolute; left: calc(var(--sl) - 4px); top: 34%; height: 30%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.el-lab { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); text-shadow: 0 1px 4px #000; }
.vbar { position: relative; width: 6px; flex: 1; border-radius: 3px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.28); overflow: hidden; }
.vfill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 3px; background: var(--g); box-shadow: 0 0 8px rgba(76,255,154,0.5); transition: height 0.06s linear; }
.fuel-fill.low { background: #ffcc33; } .fuel-fill.empty { background: var(--r); }
/* right edge: descent speed (number + bar: red = too fast for this height, green = safe) and the height */
.edge-r { position: absolute; right: calc(var(--sr) - 4px); top: 30%; height: 38%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.er-n { line-height: 1; } .er-n b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; } .er-n span { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.7); }
.er-alt { line-height: 1; font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.7); text-shadow: 0 1px 4px #000; } .er-alt b { display: block; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.vsafe { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-top: 1px solid rgba(255,255,255,0.6); }
.desc .vfill { background: #fff; box-shadow: none; }
.desc.safe .vfill { background: var(--g); } .desc.warn .vfill { background: #ffcc33; } .desc.danger .vfill { background: var(--r); box-shadow: 0 0 10px rgba(255,75,75,0.7); }
.desc.safe b { color: var(--g); } .desc.warn b { color: #ffcc33; } .desc.danger b { color: var(--r); }
body.first .er-n b { font-size: 28px; }
.spin { margin-top: 4px; line-height: 1; } .spin b { font-style: italic; font-weight: 900; font-size: 16px; color: #fff; text-shadow: 0 1px 6px #000; }
.spin.good b { color: var(--o2); }
.hud.loop .spin { display: none; } /* THE LOOP: the flip is shown by the coach ring, not a number */
.topc { position: absolute; left: var(--sl); top: var(--st); display: flex; gap: 6px; align-items: center; }
.pill { font-weight: 800; font-size: 10px; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; background: rgba(8,12,24,0.5); border: 1px solid var(--line); white-space: nowrap; color: rgba(255,255,255,0.8); }
.rank { font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(8,12,24,0.5); border-radius: 8px; padding: 2px 7px; border: 1px solid var(--line); }
.wind { position: absolute; left: var(--sl); top: calc(var(--st) + 24px); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; background: rgba(8,12,24,0.5); border-radius: 8px; padding: 2px 7px; border: 1px solid var(--line); }
.wind i { font-style: normal; display: inline-block; margin-left: 6px; color: var(--b); }
/* bottom edge: the run-up speed, full width and thin; the number small at the left end; no words (the hint line says it once) */
.speedo { position: absolute; left: calc(var(--sl) + 46px); right: calc(var(--sr) + 64px); bottom: calc(var(--sb) + 2px); display: flex; align-items: center; gap: 8px; }
.sp-n { flex: none; line-height: 1; text-shadow: 0 1px 6px #000; } .sp-n b { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; } .sp-n span { font-weight: 800; font-size: 9px; margin-left: 2px; color: rgba(255,255,255,0.7); }
.sp-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; }
.sp-band { position: absolute; top: 0; bottom: 0; background: rgba(76,255,154,0.5); }
.sp-needle { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #fff; }
.speedo.ok .sp-band { background: rgba(76,255,154,0.9); box-shadow: 0 0 10px rgba(76,255,154,0.8); } .speedo.hot .sp-needle { background: var(--r); }
body.first .sp-bar { height: 12px; } body.first .sp-n b { font-size: 22px; }
/* HOLD: small and see-through, bottom-right (the whole screen is the button; this only shows the state) */
.hold { position: absolute; right: var(--sr); bottom: var(--sb); width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55); background: rgba(10,14,26,0.35); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); transition: transform 0.08s, background 0.08s; }
.hold.go { border-color: var(--o); background: rgba(255,138,31,0.45); animation: go 0.35s ease-in-out infinite alternate; }
@keyframes go { to { transform: scale(1.1); box-shadow: 0 0 18px rgba(255,138,31,0.8); } }
.hold.on { transform: scale(0.92); background: rgba(95,180,255,0.45); border-color: rgba(255,255,255,0.8); }
/* the flip coach: a thin ring outside the car with the turn arrow, the wheels tick and the target tick (green when they meet) */
.coach[hidden] { display: none; }
.coach { position: fixed; z-index: 6; pointer-events: none; overflow: visible; transform: translate(-50%, -50%); }
.coach .c-ring { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 2; stroke-dasharray: 3 7; }
.coach .c-arc { fill: none; stroke: var(--o2); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,138,31,0.8)); }
.coach .c-head { fill: var(--o2); }
.coach .c-target { stroke: rgba(255,255,255,0.9); stroke-width: 4; stroke-linecap: round; }
.coach .c-wheels line { stroke: #ff6a5a; stroke-width: 6; stroke-linecap: round; } .coach .c-wheels circle { fill: #ff6a5a; }
.coach.ok .c-wheels line, .coach.ok .c-target { stroke: var(--g); } .coach.ok .c-wheels circle { fill: var(--g); } .coach.ok .c-arc, .coach.ok .c-head { opacity: 0; }
.coach.ok .c-ring { stroke: rgba(76,255,154,0.6); stroke-dasharray: none; }
.why { font-family: var(--fd); font-weight: 800; font-size: 14px; color: #ffd0c8; background: rgba(255,75,75,0.16); border: 1px solid rgba(255,75,75,0.5); border-radius: 10px; padding: 5px 9px; margin: 2px 0 6px; }
.why.close { color: #ffe9a8; background: rgba(255,200,40,0.14); border-color: rgba(255,200,40,0.5); }

/* ---------- banners ---------- */
.banner { position: fixed; left: 0; right: 0; top: 23%; z-index: 8; text-align: center; pointer-events: none; }
#b-main { font-family: var(--fd); font-style: italic; font-weight: 900; font-size: clamp(54px, 15vw, 120px); line-height: 1; color: #ffd84a; text-shadow: 0 4px 0 #b25d00, 0 0 34px rgba(255,170,0,0.6); animation: pop 0.45s cubic-bezier(.2,1.6,.4,1); }
#b-main.bad { color: #ff3b30; text-shadow: 0 4px 0 #6b0000, 0 0 30px rgba(255,40,40,0.5); -webkit-text-stroke: 2px #ffd84a; }
#b-main.mid { color: #fff; text-shadow: 0 4px 0 #3a4a66, 0 0 26px rgba(95,180,255,0.6); }
#b-sub { font-family: var(--fd); font-weight: 800; font-size: 22px; margin-top: 8px; color: #fff; text-shadow: 0 2px 8px #000; }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- result (concept art 10) ---------- */
.result { justify-content: flex-end; background: linear-gradient(180deg, rgba(3,5,10,0) 30%, rgba(3,5,10,0.6) 100%); }
.res-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-height: 100%; overflow: auto; }
.res-h { font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1; }
.grade { font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1.1; color: #ffd84a; text-shadow: 0 3px 0 #b25d00; }
.grade.bad { color: #ff3b30; text-shadow: 0 3px 0 #6b0000; }
.grade.mid { color: #fff; text-shadow: 0 3px 0 #3a4a66; }
.rstage { font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; color: var(--b); margin: 2px 0 6px; }
.tot { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 6px 10px; }
.tot span { font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.75); }
.tot b { display: block; font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin: 6px 0 2px; }
.rows .row { display: flex; justify-content: space-between; font-family: var(--fd); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; padding: 2px 2px; color: rgba(255,255,255,0.85); }
.rows .row b { font-variant-numeric: tabular-nums; color: #fff; }
.best { font-size: 13px; color: rgba(255,255,255,0.75); min-height: 15px; }
.best.new { color: var(--g); font-weight: 700; }
.board { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.board-h { font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: rgba(255,255,255,0.75); }
.board .lb5 li { padding: 4px 8px; margin: 3px 0; font-size: 14px; }
.me { font-size: 12px; color: rgba(255,255,255,0.75); min-height: 15px; }
.btns { display: flex; gap: 8px; margin-top: 8px; }
.btn { flex: 1; font-weight: 800; font-size: 16px; letter-spacing: 0.04em; padding: 12px 8px; border-radius: 12px; border: 0; color: #fff; background: linear-gradient(180deg, #ff9a2e, #e5620c); box-shadow: 0 4px 0 #8a3500; }
.btn.ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); box-shadow: none; }
.btn.small { font-size: 13px; padding: 9px 8px; }
.btn:disabled { opacity: 0.4; }
.res-card .credit { margin-top: 6px; text-align: center; }

/* og / share card title overlay (only in ?shot=og) */
.og-title { position: fixed; top: 4%; left: 0; right: 0; z-index: 20; text-align: center; font-family: var(--fd); font-style: italic; font-weight: 900; line-height: 0.88; }
.og-title .l1 { font-size: 92px; color: #fff; text-shadow: 0 4px 0 #9aa6b8, 0 8px 26px rgba(0,0,0,0.7); display: inline; margin-right: 0.25em; }
.og-title .l2 { font-size: 92px; display: inline; background: linear-gradient(180deg, #ffd27a 0%, var(--o) 55%, #e2560c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #8a2c00); }

/* ---------- landscape ---------- */
@media (orientation: landscape) {
  .result { justify-content: center; align-items: flex-start; padding-left: max(4vw, var(--sl)); }
  .tbottom { gap: 6px; }
  .trow { width: min(760px, 100%); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .logo .l1, .logo .l2, .logo .rocket { font-size: 46px; } .title .logo { margin-top: 1vh; }
  .stagepick { padding: 3px; } .sp-arrow { height: 42px; } .sp-mid .t { font-size: 17px; } .sp-mid .h { font-size: 12px; }
  .sq { width: 66px; height: 66px; } .sq svg { width: 28px; height: 28px; } .cta { font-size: 18px; padding: 10px 18px; margin-bottom: 4px; }
  /* two columns on short landscape screens (844 x 390: one column ran off the bottom): score left, board + buttons right */
  .res-card { width: min(640px, 92vw); padding: 6px 12px 4px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; grid-auto-flow: row dense; align-content: start; }
  .res-card > .res-h, .res-card > .grade, .res-card > .rstage, .res-card > .tot, .res-card > .rows { grid-column: 1; }
  .res-card > .board, .res-card > .btns, .res-card > .credit { grid-column: 2; } .res-card > .board { grid-row: 1 / 5; border-top: 0; margin-top: 0; padding-top: 0; } .res-h { font-size: 24px; } .grade { font-size: 20px; } .tot b { font-size: 28px; }
  .rows .row { font-size: 11px; padding: 0 2px; } .board .lb5 li { padding: 1px 6px; margin: 1px 0; font-size: 12px; } .btns { margin-top: 4px; } .btn { padding: 7px; font-size: 13px; }
  .res-card .credit { margin-top: 2px; font-size: 10px; } .board-h { font-size: 10px; }
  .edge-l, .edge-r { top: 24%; height: 50%; } .tip { top: calc(var(--st) + 4px); }
}

/* ---------- mode 2 (stunt flight prototype) ---------- */
.corner { position: absolute; top: calc(var(--st) + 92px); font-family: var(--fd); font-style: italic; font-weight: 900; font-size: clamp(22px, 6vw, 34px); text-shadow: 0 2px 10px #000; animation: pop 0.35s cubic-bezier(.2,1.6,.4,1); }
.corner.left { left: 16px; color: var(--o); } .corner.right { right: 16px; color: #ffd84a; }
body.stunt .edge-l, body.stunt .desc, body.stunt .spin, body.stunt .wind, body.stunt .speedo { display: none !important; }
body.stunt .pill { font-size: 15px; padding: 6px 14px; }

/* fix3 THE FLYOVER: before the row, the right-edge bar is the HEIGHT with a tick at the Semi's roof (#h-roof, set by ui.js).
   The bar is not overflow-clipped for the tick's label, so the label sits left of the bar. */
.roof { display: none; position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px solid #fff; }
.desc.up .roof { display: block; }
.desc.up .vsafe, .desc.up .er-alt { display: none; }
.desc.up .vbar { overflow: visible; }
.desc.up .roof::after { content: 'SEMI'; position: absolute; right: 12px; top: -7px; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px #000; }

/* fix3: the swipe hint (bottom edge, centre), the arrows slide out and back */
.swipe { position: absolute; left: 50%; bottom: calc(var(--sb) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 12px; letter-spacing: 0.12em; color: #fff; text-shadow: 0 1px 6px #000; }
.swipe i { font-style: normal; font-size: 22px; color: var(--g); animation: swipe 0.6s ease-in-out infinite alternate; }
.swipe i:first-child { animation-direction: alternate-reverse; }
@keyframes swipe { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
body.first .swipe { font-size: 15px; }