@layer base, hud, panels, fx;

/* Unlayered on purpose: MapLibre's stylesheet is unlayered and its
   .maplibregl-map { position: relative } would beat any layered rule here —
   unlayered author styles outrank all layers, then #map wins on specificity. */
#map {
  position: absolute;
  inset: 0;
}

/* Also unlayered and non-negotiable: our display:flex on these panels beats
   the UA's [hidden] { display:none }, so hidden panels rendered anyway —
   the cause of every phantom search-bar sighting. hidden must always win. */
:is(#search, #wayback, #passport, #intel-panel, #pole, #touchbar)[hidden] {
  display: none;
}

/* Required Esri imagery credit — keep it, but let it wear the theme.
   Unlayered so it out-cascades MapLibre's own (later in source order). */
.maplibregl-ctrl-attrib {
  background-color: oklch(0.16 0.01 260 / 0.55);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.62rem;
  color: oklch(0.62 0.02 90);
}

.maplibregl-ctrl-attrib a {
  color: oklch(0.62 0.02 90);
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
  padding: 2px 26px 2px 10px;
}

.maplibregl-ctrl-attrib-button {
  filter: invert(0.8);
}

@layer base {
  :root {
    color-scheme: dark;

    --ink: oklch(0.95 0.01 90);
    --ink-dim: oklch(0.78 0.02 90);
    --ink-faint: oklch(0.62 0.02 90);
    --surface: oklch(0.16 0.01 260 / 0.62);
    --surface-edge: oklch(0.9 0.02 90 / 0.14);
    --accent: oklch(0.85 0.16 85);
    --danger: oklch(0.62 0.19 25);

    --font-ui: "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, Consolas, monospace;

    --pad-card: clamp(1rem, 2vw, 1.6rem);
    --radius: 0.75rem;
  }

  html, body {
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    font-family: var(--font-ui);
    color: var(--ink);
  }

  kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1em 0.45em;
    border: 1px solid var(--surface-edge);
    border-radius: 0.3em;
    background: oklch(1 0 0 / 0.07);
  }
}

@layer fx {
  #vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at center, transparent 55%, oklch(0 0 0 / 0.45) 100%),
      linear-gradient(to top, oklch(0 0 0 / 0.5), transparent 22%);
  }

  #fader {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #000;
    opacity: 1;
    transition: opacity 900ms ease;
  }

  #fader.clear { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    #fader { transition-duration: 200ms; }
  }

  /* !important needed to beat MapLibre's inline grab-cursor on the canvas */
  body.no-cursor, body.no-cursor * { cursor: none !important; }

  .click-marker {
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 oklch(from var(--accent) l c h / 0.5);
    animation: marker-pulse 1.6s ease-out infinite;
  }

  @keyframes marker-pulse {
    to { box-shadow: 0 0 0 14px transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    .click-marker { animation: none; }
  }
}

@layer hud {
  #topbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: clamp(0.8rem, 2vw, 1.5rem);
    pointer-events: none;
  }

  #topbar-left {
    display: flex;
    gap: 0.6em;
    align-items: center;
  }

  #mode-chip {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    padding: 0.45em 1em;
    border: 1px solid var(--surface-edge);
    border-radius: 100px;
    background: var(--surface);
    backdrop-filter: blur(12px);
  }

  #search-chip {
    pointer-events: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    padding: 0.45em 1em;
    border: 1px solid var(--surface-edge);
    border-radius: 100px;
    background: var(--surface);
    backdrop-filter: blur(12px);
    color: var(--ink-dim);
    cursor: pointer;
    min-block-size: 24px;
  }

  #search-chip:hover { color: var(--accent); border-color: var(--accent); }

  #search-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Search: docked under the SEARCH chip, top-left, off the map's center ---- */
  #search {
    position: absolute;
    inset-block-start: clamp(3.6rem, 8vh, 5rem);
    inset-inline-start: clamp(0.8rem, 2.5vw, 2rem);
    inline-size: min(22rem, 86vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #search-close {
    position: absolute;
    inset-block-start: 0.35em;
    inset-inline-end: 0.35em;
    z-index: 1;
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
  }

  #search-close:hover { color: var(--ink); }

  #search-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .card-close {
    position: absolute;
    inset-block-start: 0.45em;
    inset-inline-end: 0.5em;
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25em 0.5em;
  }

  .card-close:hover { color: var(--ink); }

  .card-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Time machine ---- */
  #wayback {
    position: absolute;
    inset-block-end: clamp(2.2rem, 5vh, 3.5rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    inline-size: min(36rem, 80vw);
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--surface-edge);
    border-radius: 100px;
    background: var(--surface);
    backdrop-filter: blur(16px);
  }

  .wayback-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    min-inline-size: 9em;
    max-inline-size: 15em;
  }

  #wayback-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-align: center;
  }

  #wayback-source {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
  }

  #wayback-source:empty { display: none; }

  #wayback-slider {
    flex: 1;
    accent-color: var(--accent);
    min-block-size: 24px;
    cursor: pointer;
  }

  #wayback-slider:disabled {
    opacity: 0.35;
    cursor: progress;
  }

  .wayback-end {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
  }

  #wayback-close {
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15em 0.4em;
  }

  #wayback-close:hover { color: var(--ink); }

  #wayback-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Clean view: H hides everything but the planet ---- */
  #topbar, #controls-hint, #progress, #toast {
    transition: opacity 500ms ease;
  }

  body.clean :is(#topbar, .hud-card, #controls-hint, #progress, #toast, #wayback, #search) {
    opacity: 0;
    pointer-events: none;
  }

  #search-input {
    inline-size: 100%;
    box-sizing: border-box;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--ink);
    padding: 0.7em 2.4em 0.7em 1em;
    border: 1px solid var(--surface-edge);
    border-radius: var(--radius);
    background: oklch(0.14 0.01 260 / 0.8);
    backdrop-filter: blur(18px);
  }

  #search-input:focus-visible {
    outline: 2px solid oklch(from var(--accent) l c h / 0.6);
    outline-offset: 0;
  }

  #search-input::placeholder { color: var(--ink-faint); }

  #search-results {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--radius);
    overflow: hidden auto;
    max-block-size: 42vh;
    scrollbar-width: thin;
  }

  #search-results li {
    padding: 0.7em 1.2em;
    background: oklch(0.14 0.01 260 / 0.8);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid oklch(1 0 0 / 0.06);
    cursor: pointer;
  }

  #search-results li:hover {
    background: oklch(0.22 0.02 80 / 0.85);
  }

  #search-results .result-name { color: var(--ink); }

  #search-results .result-detail {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    margin-block-start: 0.2em;
  }

  #mode-chip.mystery {
    color: var(--accent);
    border-color: oklch(from var(--accent) l c h / 0.4);
  }

  #clock {
    text-align: end;
    text-shadow: 0 1px 8px oklch(0 0 0 / 0.7);
  }

  #clock-local {
    display: block;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 200;
    font-variant-numeric: tabular-nums;
  }

  #clock-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    color: var(--ink-dim);
  }

  .hud-card {
    position: absolute;
    inset-block-end: clamp(2.2rem, 5vh, 3.5rem);
    inset-inline-start: clamp(0.8rem, 2.5vw, 2rem);
    max-inline-size: min(30rem, 82vw);
    padding: var(--pad-card);
    border-radius: var(--radius);
    border: 1px solid var(--surface-edge);
    background: var(--surface);
    backdrop-filter: blur(16px) saturate(1.2);
    opacity: 0;
    translate: 0 12px;
    transition: opacity 600ms ease, translate 600ms ease;
  }

  .hud-card.show {
    opacity: 1;
    translate: 0 0;
  }

  .hud-card h1 {
    margin: 0.1em 0 0.25em;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    font-weight: 250;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  .hud-card p { margin: 0.3em 0; }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
  }

  #place-blurb {
    color: var(--ink-dim);
    font-size: 0.95rem;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .coords {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }

  .weather {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--accent);
    letter-spacing: 0.06em;
  }

  .weather:empty { display: none; }

  .imagery {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }

  .imagery:empty { display: none; }

  .credit {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: oklch(from var(--accent) l c h / 0.75);
    text-transform: uppercase;
  }

  .credit:empty { display: none; }

  .card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em;
    margin-block-start: 0.7em;
  }

  .card-actions .intel-btn { margin-block-start: 0; }

  a.intel-btn {
    text-decoration: none;
    display: inline-block;
  }

  .intel-btn {
    margin-block-start: 0.7em;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    padding: 0.5em 1em;
    background: none;
    border: 1px solid var(--surface-edge);
    border-radius: 100px;
    color: var(--accent);
    cursor: pointer;
    min-block-size: 24px;
  }

  .intel-btn:hover { border-color: var(--accent); }

  .intel-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Dossier: the classified variant ---- */
  #dossier {
    font-family: var(--font-mono);
    border-color: oklch(from var(--accent) l c h / 0.3);
    background: oklch(0.13 0.015 80 / 0.72);
  }

  .dossier-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    border-block-end: 1px dashed var(--surface-edge);
    padding-block-end: 0.6em;
    margin-block-end: 0.6em;
  }

  .stamp {
    color: var(--danger);
    border: 1.5px solid currentColor;
    padding: 0.15em 0.5em;
    rotate: -4deg;
    font-weight: 700;
    letter-spacing: 0.25em;
  }

  #dossier h1 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .dossier-body {
    margin: 0.8em 0 0.5em;
    font-size: 0.8rem;
    line-height: 1.55;
  }

  .dossier-body dt {
    color: var(--accent);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-block-start: 0.9em;
  }

  .dossier-body dd {
    margin: 0.25em 0 0;
    color: var(--ink-dim);
  }

  /* ---- Bottom chrome ---- */
  #controls-hint {
    position: absolute;
    inset-block-end: clamp(2.2rem, 5vh, 3.5rem);
    inset-inline-end: clamp(0.8rem, 2.5vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5em 1.1em;
    max-inline-size: 24rem;
    font-size: 0.72rem;
    color: var(--ink-dim);
    text-shadow: 0 1px 6px oklch(0 0 0 / 0.8);
    transition: opacity 1.2s ease;
  }

  #controls-hint.faded { opacity: 0; }

  /* ---- Touch bar: the keyboard, for people without one ---- */
  #touchbar {
    position: absolute;
    inset-block-end: clamp(2.2rem, 5vh, 3.5rem);
    inset-inline-end: clamp(0.8rem, 2.5vw, 2rem);
    display: flex;
    gap: 0.5em;
  }

  #touchbar button {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    padding: 0.7em 1em;
    min-block-size: 44px;
    border: 1px solid var(--surface-edge);
    border-radius: 100px;
    background: var(--surface);
    backdrop-filter: blur(12px);
    color: var(--ink);
    cursor: pointer;
  }

  @media (pointer: coarse) {
    #controls-hint { display: none; } /* keyboard hints mean nothing to thumbs */
  }

  #progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 3px;
    background: oklch(1 0 0 / 0.08);
  }

  #progress-fill {
    block-size: 100%;
    inline-size: 100%;
    background: oklch(from var(--accent) l c h / 0.75);
    transform-origin: left;
  }

  #toast {
    position: absolute;
    inset-block-start: clamp(4rem, 10vh, 6rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    padding: 0.6em 1.4em;
    border-radius: 100px;
    border: 1px solid var(--surface-edge);
    background: var(--surface);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    opacity: 0;
    transition: opacity 400ms ease;
  }

  #toast.show { opacity: 1; }
}

@layer panels {
  #intel-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(24rem, 88vw);
    background: oklch(0.13 0.01 260 / 0.82);
    backdrop-filter: blur(20px);
    border-inline-start: 1px solid var(--surface-edge);
    translate: 100% 0;
    transition: translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
  }

  #intel-panel.open { translate: 0 0; }

  #intel-panel header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.4rem 0.8rem;
    border-block-end: 1px solid var(--surface-edge);
  }

  #intel-panel h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: var(--accent);
  }

  #intel-close {
    background: none;
    border: none;
    color: var(--ink-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
  }

  #intel-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  #intel-content {
    overflow-y: auto;
    padding: 1.2rem 1.4rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-dim);
    scrollbar-width: thin;
  }

  #intel-content h3 {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 1.6em 0 0.6em;
  }

  #intel-content h3:first-child { margin-block-start: 0; }

  #intel-content p { margin: 0 0 0.8em; text-wrap: pretty; }

  #intel-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #intel-content li {
    padding: 0.5em 0;
    border-block-end: 1px solid oklch(1 0 0 / 0.06);
    display: flex;
    justify-content: space-between;
    gap: 1em;
  }

  #intel-content li .dist {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-faint);
    white-space: nowrap;
  }

  #intel-content .fact-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  #intel-content .fact-value {
    text-align: end;
    color: var(--ink);
  }

  .intel-loading {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--ink-faint);
  }

  .intel-submit {
    margin-block-start: 1.6em;
    padding-block-start: 0.9em;
    border-block-start: 1px solid oklch(1 0 0 / 0.08);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .intel-submit a { color: var(--accent); }

  /* ---- Today's Pole: NASA polar-projection snapshot viewer ---- */
  #pole {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: min(44rem, 92vw);
    max-block-size: 92vh;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--surface-edge);
    border-radius: var(--radius);
    background: oklch(0.12 0.01 260 / 0.9);
    backdrop-filter: blur(20px);
  }

  #pole header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #pole h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: var(--accent);
  }

  #pole-close {
    background: none;
    border: none;
    color: var(--ink-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
  }

  #pole-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  #pole-img {
    inline-size: 100%;
    max-block-size: 62vh;
    object-fit: contain;
    border-radius: 0.5rem;
    background: oklch(0.08 0 0);
    aspect-ratio: 1;
  }

  #pole-caption {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-dim);
    text-wrap: pretty;
  }

  .pole-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
  }

  .pole-actions .intel-btn { margin-block-start: 0; }

  .intel-btn.active {
    border-color: var(--accent);
    color: var(--ink);
  }

  /* ---- Passport: mirrors the intel panel, slides in from the left ---- */
  #passport {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(20rem, 84vw);
    background: oklch(0.13 0.01 260 / 0.82);
    backdrop-filter: blur(20px);
    border-inline-end: 1px solid var(--surface-edge);
    translate: -100% 0;
    transition: translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
  }

  #passport.open { translate: 0 0; }

  #passport header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.4rem 0.8rem;
    border-block-end: 1px solid var(--surface-edge);
  }

  #passport h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: var(--accent);
  }

  #passport-close {
    background: none;
    border: none;
    color: var(--ink-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
  }

  #passport-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  #passport-content {
    overflow-y: auto;
    padding: 1rem 1.4rem;
    font-size: 0.88rem;
    color: var(--ink-dim);
    scrollbar-width: thin;
  }

  #passport-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #passport-content h3 {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 1.6em 0 0.6em;
  }

  #passport-content .dist {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-faint);
    white-space: nowrap;
  }

  #passport-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8em;
    padding: 0.55em 0;
    border-block-end: 1px solid oklch(1 0 0 / 0.06);
  }

  #passport-content a { color: inherit; }

  #passport-content .pin-region {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }

  .pin-remove {
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
  }

  .pin-remove:hover { color: var(--danger); }
}

/* ---------------- Phone hardware: notches & home bars ----------------
   viewport-fit=cover lets the map run edge-to-edge; the HUD then dodges
   the sensor housing and home indicator. Zero effect on desktop. */
@layer hud {
  #topbar {
    padding-block-start: calc(env(safe-area-inset-top, 0px) + clamp(0.8rem, 2vw, 1.5rem));
    padding-inline:
      calc(env(safe-area-inset-left, 0px) + clamp(0.8rem, 2vw, 1.5rem))
      calc(env(safe-area-inset-right, 0px) + clamp(0.8rem, 2vw, 1.5rem));
  }
  :is(.hud-card, #controls-hint, #touchbar) {
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + clamp(2.2rem, 5vh, 3.5rem));
  }
}