/* start screen mode picker */
#modes { display: flex; gap: 12px; }
.mode { all: unset; box-sizing: border-box; width: 128px; padding: 11px 10px 9px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(21,21,23,.7); border: 1.5px solid rgba(255,255,255,.14); border-radius: 8px; color: rgba(244,244,242,.5);
  font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; transition: border-color .15s, color .15s, background .15s; }
.mode svg { width: 44px; height: 28px; }
.mode:hover { color: rgba(244,244,242,.85); border-color: rgba(255,255,255,.3); }
.mode.on { color: #f4f4f2; border-color: #f4f4f2; background: rgba(21,21,23,.86); }
.mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#creditsLink { position: absolute; left: 40px; bottom: 30px; color: rgba(244,244,242,.45); font: 600 12px ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
#creditsLink:hover { color: #f4f4f2; }
@media (max-height: 480px) { #start { gap: 14px; padding-bottom: 5vh; } #modes { gap: 8px; } .mode { width: 104px; padding: 8px 8px 7px; flex-direction: row; justify-content: center; gap: 8px; } .mode svg { width: 30px; height: 20px; } #creditsLink { left: 22px; bottom: 16px; } }

/* open map HUD */
#maphud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#minimap { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); border-radius: 50%; line-height: 0; box-shadow: 0 0 0 2px rgba(244,244,242,.85), 0 4px 18px rgba(0,0,0,.4); background: #1b2127; overflow: hidden; }
#fuel { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + var(--mm, 150px) + 10px); left: max(14px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; color: #f4f4f2; font: 700 12px ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
#fuel .ico { display: grid; place-items: center; opacity: .9; }
#fuel .bar { width: 84px; height: 6px; background: rgba(255,255,255,.2); transform: skewX(-14deg); overflow: hidden; }
#fuel .bar i { display: block; height: 100%; background: #f4f4f2; transform-origin: left; }
#fuel .dist { color: rgba(244,244,242,.6); font-weight: 600; }
#fuel.low .bar i { background: #ffb400; } #fuel.low { color: #ffb400; }
#fuel.crit .bar i { background: #e5252a; } #fuel.crit { color: #ff5a5f; animation: fblink .8s steps(2) infinite; }
@keyframes fblink { 50% { opacity: .35; } }
#fuelmsg { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: rgba(13,13,15,.62); color: #f4f4f2; font: 700 14px ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#fuelmsg.warn { color: #ffb400; }