/* Horizons (/journey). Visual language « Ligne d'horizon » (research/presentation.md §3):
   quiet type and hairlines on the biome colour field; text over the live scene sits on
   a solid panel plate (no backdrop blur over the WebGPU canvas); motion = opacity/transform.
   HUD layout classes MUST match runtime/Camera.js `layoutClass`:
     desktop  = (min-width: 1024px) and (min-height: 600px)
     portrait = (max-width: 699.98px) and (max-aspect-ratio: 85/100)
     compact  = everything else (landscape phones, tablets) → the base HUD rules below. */
.page-content:has(> .journey) {
    padding-top: 0 !important;
    height: 100dvh;
    min-height: 0;
}
.journey {
    --hz-paper: #fff8ea;
    --hz-ink: #0f1a2e;
    --hz-panel: rgb(15 26 46 / 0.74);
    --hz-panel-strong: rgb(15 26 46 / 0.92);
    --hz-line: rgb(255 248 234 / 0.32);
    --hz-risk: #ffb08a;
    --hz-new: #fff3b0;
    --hz-locked: rgb(255 248 234 / 0.6);
    /* Semantic accents (presentation.md §3.2): goal met / about to bank / new.
       The biome accent stays decorative; data-palette="colorblind" swaps these. */
    --hz-ok: var(--journey-accent);
    /* Text scale (Réglages › Taille du texte): --hz-ts for body and labels,
       --hz-ts-lg (half the step) for ≥ 18 px type and the plates sized to it;
       --hz-subs for the story layer (Sous-titres du récit). */
    --hz-ts: 1;
    --hz-ts-lg: 1;
    --hz-subs: 1;
    /* Display face (presentation.md §3.1): Fraunces when self-hosted as 'Hz Display'
       (not shipped yet), else a local Fraunces, else Georgia. */
    --hz-display: 'Hz Display', 'Fraunces', Georgia, 'Times New Roman', serif;
    --hz-d3: 0.48s;
    --hz-margin: clamp(20px, 4vw, 72px);
    --hz-top: max(22px, env(safe-area-inset-top));
    --hz-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--hz-paper);
    background: linear-gradient(180deg, #263f69 0%, #f6b68a 78%, #dc9c82 100%);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    isolation: isolate;
    touch-action: none;
    user-select: none;
    --hz-medal-1: #d9a27a;
    --hz-medal-2: #d6dbe4;
    --hz-medal-3: #ffcf6b;
    --hz-medal-4: #ffe9c2;
}
.journey-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.hz-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.25em;
}
.visually-hidden,
.hz-live {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.journey :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hz-ink);
}
.journey-stage,
.journey-vignette {
    position: absolute;
    inset: 0;
}
.journey-card h1 {
    margin: 10px 0 8px;
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: clamp(48px, 10vw, 76px);
    line-height: 1.02;
}
.journey-stage:focus,
.journey-stage:focus-visible,
.journey h1:focus,
.journey h1:focus-visible {
    outline: none;
    box-shadow: none;
} /* programmatic focus targets (FocusOnNavigate, focus return), not controls */
.journey-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.journey-art-panel:not([hidden]) {
    position: absolute;
    z-index: 9;
    right: 18px;
    top: 68px;
    width: min(280px, calc(100% - 36px));
    padding: 16px;
    background: #1a2943ed;
    border: 1px solid #ffe9c588;
    border-radius: 14px;
    display: grid;
    gap: 13px;
    color: #fff5e3;
    font:
        12px 'Space Grotesk',
        sans-serif;
}
.journey-art-panel strong {
    font-size: 11px;
    letter-spacing: 0.13em;
}
.journey-art-panel label {
    display: grid;
    gap: 5px;
}
.journey-art-panel input {
    width: 100%;
    accent-color: #ffe1a0;
}
.journey-vignette {
    pointer-events: none;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(19, 25, 43, 0.23) 100%);
}

/* ---------- Header ---------- */
.journey-header {
    position: absolute;
    z-index: 7;
    left: 0;
    right: 0;
    top: 0;
    padding: var(--hz-top) var(--hz-margin) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    pointer-events: none;
}
.journey-header > * {
    pointer-events: auto;
}
.journey-header a,
.journey-header button {
    color: var(--hz-paper);
    text-decoration: none;
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.journey-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-right: 8px;
    white-space: nowrap;
    text-shadow: 0 1px 8px #2336526e;
}
.journey-back .hz-icon {
    width: 22px;
    height: 22px;
}
.journey-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.journey-icon-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hz-line);
    border-radius: 44px;
    background: var(--hz-panel);
}
.journey-back:hover,
.journey-icon-button:hover {
    color: var(--journey-accent);
}
.journey-icon-button .hz-icon {
    width: 20px;
    height: 20px;
}
.journey-settings-toggle {
    padding: 0;
    width: 44px;
}
.journey-sound[aria-pressed='false'] {
    border-style: dashed;
}

/* ---------- Settings (popover and inline in the pause card) ---------- */
.journey-settings-panel {
    position: absolute;
    z-index: 8;
    top: calc(var(--hz-top) + 54px);
    right: var(--hz-margin);
    width: min(calc(310px * var(--hz-ts-lg)), calc(100% - 32px));
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #ffe9c588;
    border-radius: 12px;
    background: var(--hz-panel-strong);
    box-shadow: 0 12px 32px #15243b66;
    text-align: left;
    max-height: calc(100% - var(--hz-top) - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.journey-settings-panel.is-inline {
    position: static;
    width: 100%;
    box-shadow: none;
}
.journey-settings-panel strong {
    font-size: calc(12px * var(--hz-ts));
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.journey-settings-head {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--hz-line);
    color: var(--journey-accent);
}
.journey-settings-head:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.journey-settings-panel label {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.journey-settings-panel input {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 28px;
    accent-color: var(--journey-accent);
    touch-action: auto;
}
.journey-value {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.journey-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}
.journey-choice legend {
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.journey-choice-note {
    flex-basis: 100%;
    font-size: calc(12px * var(--hz-ts));
    line-height: 1.4;
    color: #fff8eae0;
}
.journey-choice button {
    flex: 1;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: transparent;
    color: var(--hz-paper);
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    cursor: pointer;
}
.journey-choice button[aria-pressed='true'] {
    background: var(--journey-accent);
    border-color: var(--journey-accent);
    color: var(--hz-ink);
    box-shadow: inset 0 -3px 0 var(--hz-ink);
}

/* ---------- JS-owned HUD (runtime/HudView.js). Horizons 3.0 Flow V4 (UiAgent). ----------
   Hierarchy (Libre): zone A = score cluster top-left (big score, metres · shards ·
   m/s, combo row, Flow gauge, challenges); storm meter at the left edge (a strip
   under zone A in portrait); zone B = notices / route hint; one trick callout
   right of the rider's look-ahead (landscape) or in the bottom band (tall
   screens); hazard telegraph at the right edge. Base rules = compact layout.
   Safe zones follow the Camera play frame (rider fx .29–.35, fy .47–.78, look-
   ahead 7 u to the right): nothing but the hazard marker enters that band. */
.journey-hud-root {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    --hz-danger: #ff6a3d;
}
.hz-hud {
    display: none;
}
.journey-hud-root[data-phase='playing'] .hz-hud {
    display: block;
}
.hz-zone-a,
.hz-notice,
.hz-route {
    background: var(--hz-panel);
    border: 1px solid var(--hz-line);
    border-radius: 12px;
}

/* Zone A: compact = two short rows (score · status · dots / Flow), combo under them. */
.hz-zone-a {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    max-width: calc(54vw - 24px);
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: 'score status meta' 'flow flow flow' 'combo combo combo';
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 6px 12px 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.hz-biome {
    grid-area: biome;
    display: none;
}
.hz-extra {
    grid-area: extra;
    display: none;
}
.hz-score {
    grid-area: score;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hz-score b {
    font-size: calc(22px * var(--hz-ts-lg));
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
}
.hz-score small {
    display: none;
    font-size: calc(11px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.82;
}
.hz-status {
    grid-area: status;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hz-status b {
    font-weight: 700;
}
.hz-status small {
    margin-left: 3px;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0.82;
}
.hz-distance b {
    font-size: calc(15px * var(--hz-ts-lg));
}
.hz-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: calc(14px * var(--hz-ts));
}
.hz-stat .hz-icon {
    width: 15px;
    height: 15px;
    align-self: center;
    color: var(--journey-accent);
}
.hz-stat small {
    display: none;
}
.hz-speed {
    font-size: calc(13px * var(--hz-ts));
}
.hz-speed b {
    color: var(--journey-accent);
}
.hz-progress {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgb(255 245 226 / 0.25);
    overflow: hidden;
}
.hz-progress i {
    display: block;
    height: 100%;
    background: var(--journey-accent);
    transform-origin: left center;
    transform: scaleX(0);
}
.hz-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.08em;
}
.hz-mastery {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hz-challenges span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hz-trick-tags span {
    padding: 2px 8px;
    border: 1px solid var(--journey-accent);
    border-radius: 6px;
    background: var(--hz-panel-strong);
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hz-hazard > span {
    display: grid;
    line-height: 1.15;
}
.hz-touch-word > span {
    display: none;
}
.journey-mode > span {
    grid-area: text;
    font-size: calc(13px * var(--hz-ts));
    line-height: 1.4;
    opacity: 0.92;
}
.hz-mastery > span:last-child {
    display: none;
}
/* Challenges done: filled disc = done, ring = to do (shape, not colour, carries the state). */
.hz-dots {
    display: inline-flex;
    gap: 5px;
}
.hz-dots i {
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border: 1.5px solid var(--hz-paper);
    border-radius: 50%;
    opacity: 0.75;
}
.hz-dots i.done {
    background: var(--hz-ok);
    border-color: var(--hz-ok);
    opacity: 1;
}
/* Challenge checklist (desktop): ring → ticked disc, the tick pops once. */
.hz-challenges {
    grid-area: challenges;
    display: none;
    gap: 4px;
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--hz-line);
    list-style: none;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.03em;
}
.hz-challenges li {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
}
.hz-challenges li[hidden] {
    display: none;
}
.hz-challenges b {
    font-variant-numeric: tabular-nums;
    opacity: 0.88;
}
.hz-check {
    position: relative;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1.5px solid var(--hz-paper);
    border-radius: 50%;
    opacity: 0.75;
}
.hz-challenges li[data-done='on'] .hz-check {
    background: var(--hz-ok);
    border-color: var(--hz-ok);
    opacity: 1;
}
.hz-challenges li[data-done='on'] .hz-check::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid var(--hz-ink);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.hz-challenges li[data-done='on'] span {
    opacity: 0.78;
}
.hz-challenges li.tick .hz-check {
    animation: hz-tick 0.55s var(--hz-ease);
}
.hz-challenges li.tick span {
    animation: hz-tick-text 0.9s ease-out;
}
@keyframes hz-tick {
    0% {
        transform: scale(0.4);
    }
    55% {
        transform: scale(1.45);
    }
}
@keyframes hz-tick-text {
    0% {
        opacity: 0.35;
    }
}

/* Combo row (inside zone A): ×M, points at stake, grounded grace line. */
.hz-combo {
    grid-area: combo;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
    padding: 4px 9px 6px;
    border-radius: 8px;
    background: rgb(255 248 234 / 0.09);
}
.hz-combo[data-live='off'] {
    display: none;
}
.hz-combo strong {
    grid-row: 1;
    grid-column: 1;
    color: var(--journey-accent);
    font-size: calc(19px * var(--hz-ts-lg));
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.05;
}
.hz-combo-points {
    font-size: calc(13px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hz-grace {
    grid-column: 1 / -1;
    height: 3px;
    margin-top: 4px;
    border-radius: 3px;
    background: rgb(255 245 226 / 0.2);
    overflow: hidden;
}
.hz-grace i {
    display: block;
    height: 100%;
    background: var(--journey-accent);
    transform-origin: left center;
    transition: transform 0.22s linear;
}
.hz-grace i.snap {
    transition: none;
}
/* About to bank: thinner, dashed line in the risk colour (not colour alone). */
.hz-combo.closing .hz-grace {
    height: 2px;
}
.hz-flow-bar i {
    position: absolute;
    inset: 0;
    background: var(--journey-accent);
    transform-origin: left center;
    transform: scaleX(var(--hz-v, 0));
    transition: transform 0.22s linear;
}
.hz-storm-bar i {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--hz-danger), var(--hz-risk));
    transform-origin: center bottom;
    transform: scaleY(var(--hz-v, 0));
    transition: transform 0.22s linear;
}
.hz-storm-pips i {
    width: 6px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0.25;
}
.hz-memories i {
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 1.5px solid var(--hz-paper);
    opacity: 0.7;
    transform: rotate(45deg);
}
.hz-card-line i {
    position: absolute;
    top: -4px;
    left: calc(50% - 4.5px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--journey-accent);
}
.journey-horizon i {
    position: absolute;
    top: -4px;
    left: 18%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--journey-accent);
    animation: hz-sun-drift 16s ease-in-out infinite alternate;
}
.journey-hold-line i {
    position: absolute;
    inset: 0;
    background: var(--journey-accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.journey-bar i {
    position: absolute;
    inset: 0;
    background: var(--journey-accent);
    transform-origin: left center;
}
.journey-dots i {
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 50%;
}
.journey-memdots i {
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    transform: rotate(45deg);
}
.hz-photo-guides i {
    position: absolute;
    background: rgb(255 248 234 / 0.6);
    box-shadow: 0 0 0 1px rgb(15 26 46 / 0.22);
}
.journey-odo-reel i {
    display: block;
    height: 1.1em;
    line-height: 1.1em;
    font-style: normal;
    text-align: center;
}
.journey-horizon.is-loading i {
    left: 0;
    width: 100%;
    height: 9px;
    background: none;
    border-radius: 0;
    animation: hz-load 2.4s ease-in-out infinite alternate;
}
.journey-horizon.is-drawn i {
    left: auto;
    right: -4px;
    top: -3.5px;
    animation: none;
}
.hz-photo-guides i:nth-child(-n + 2) {
    top: 0;
    bottom: 0;
    width: 1px;
    left: 33.333%;
}
.hz-photo-guides i:nth-child(2) {
    left: 66.667%;
}
.hz-photo-guides i:nth-child(n + 3) {
    left: 0;
    right: 0;
    height: 1px;
    top: 33.333%;
}
.hz-photo-guides i:nth-child(4) {
    top: 66.667%;
}
.hz-combo.closing .hz-grace i {
    background: repeating-linear-gradient(90deg, var(--hz-risk) 0 6px, transparent 6px 10px);
}
.hz-combo[data-live='on'] {
    animation: hz-in-a 0.22s var(--hz-ease);
}
.hz-combo strong.step-a {
    animation: hz-step-a 0.28s ease-out;
}
.hz-combo strong.step-b {
    animation: hz-step-b 0.28s ease-out;
}

/* Flow gauge (zone A row): bar = gauge (--hz-v), time left while active; level I–III.
   Nearly full = outlined bar; active = accent label, sheen sweeping the bar, zone A
   border in the accent (data-flow on the root). */
.hz-flow {
    grid-area: flow;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hz-flow[hidden] {
    display: none;
}
.hz-flow-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hz-flow-label .hz-icon {
    width: 14px;
    height: 14px;
    color: var(--journey-accent);
}
.hz-flow-bar {
    position: relative;
    flex: 1;
    min-width: 56px;
    height: 6px;
    border-radius: 6px;
    background: rgb(255 245 226 / 0.2);
    overflow: hidden;
}
.hz-flow-bar i.snap {
    transition: none;
}
.hz-flow-time {
    min-width: 2.4em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hz-flow-time:empty {
    display: none;
}
.hz-flow[data-ready='on'] .hz-flow-bar {
    outline: 1px dashed var(--journey-accent);
    outline-offset: 1px;
}
.hz-flow[data-active='on'] .hz-flow-label {
    color: var(--journey-accent);
}
.hz-flow[data-active='on'] .hz-flow-bar {
    height: 8px;
}
.hz-flow[data-active='on'] .hz-flow-bar i {
    background: linear-gradient(90deg, var(--journey-accent), #fff6dc);
}
.hz-flow[data-active='on'] .hz-flow-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
    transform: translateX(-100%);
    animation: hz-sheen 1.3s linear infinite;
}
.hz-flow[data-level='2'] .hz-flow-bar::after {
    animation-duration: 0.95s;
}
.hz-flow[data-level='3'] .hz-flow-bar::after {
    animation-duration: 0.7s;
}
.journey-hud-root[data-flow='on'] .hz-zone-a {
    border-color: var(--journey-accent);
}
@keyframes hz-sheen {
    to {
        transform: translateX(100%);
    }
}

/* Storm meter: vertical at the left edge (compact / desktop), a strip under zone A
   in portrait. State = word + pips (shape) + colour: 0 Tempête, 1 Tempête proche
   (1 pip), 2 Elle gagne ! (2 pips, filled plate), 3 Dernière chance (3 pips,
   pulsing red-orange plate and left-edge glow). */
.hz-storm {
    position: absolute;
    left: max(8px, env(safe-area-inset-left));
    top: 34%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.hz-storm[hidden] {
    display: none;
}
.hz-storm-bar {
    position: relative;
    flex: 1;
    width: 10px;
    border-radius: 10px;
    background: rgb(15 26 46 / 0.45);
    border: 1px solid var(--hz-line);
    overflow: hidden;
}
.hz-storm-bar i.snap {
    transition: none;
}
.hz-storm-read {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'icon label' 'pips text';
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: var(--hz-panel);
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hz-storm-read .hz-icon {
    grid-area: icon;
    width: 14px;
    height: 14px;
}
.hz-storm-label {
    grid-area: label;
}
.hz-storm-text {
    grid-area: text;
    font-size: calc(13px * var(--hz-ts));
    font-variant-numeric: tabular-nums;
}
.hz-storm-pips {
    grid-area: pips;
    display: inline-flex;
    gap: 2px;
}
.hz-storm[data-warn='3'] .hz-storm-bar i {
    animation: hz-alarm-fill 0.55s ease-in-out infinite alternate;
}
.journey-hud-root[data-beat] .hz-progress i {
    box-shadow: 0 0 6px var(--journey-accent);
}
.hz-storm[data-warn='1'] .hz-storm-read {
    color: var(--hz-risk);
    border-color: var(--hz-risk);
}
.hz-storm[data-warn='2'] .hz-storm-read {
    color: var(--hz-ink);
    background: var(--hz-risk);
    border-color: var(--hz-risk);
}
.hz-storm[data-warn='3'] .hz-storm-read {
    color: #fff;
    background: var(--hz-danger);
    border: 2px solid #fff;
    animation: hz-alarm-scale 0.55s ease-in-out infinite alternate;
}
.hz-storm[data-warn='2'] .hz-storm-bar,
.hz-storm[data-warn='3'] .hz-storm-bar {
    border-color: var(--hz-risk);
}
.hz-storm-read::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    box-shadow: 0 0 14px 2px var(--hz-danger);
    opacity: 0;
    pointer-events: none;
}
.hz-storm[data-warn='3'] .hz-storm-read::after {
    animation: hz-alarm 0.55s ease-in-out infinite alternate;
}
.hz-storm-edge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14vw;
    background: linear-gradient(90deg, rgb(255 106 61 / 0.5), rgb(255 106 61 / 0));
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.hz-storm-edge[data-warn='2'] {
    opacity: 0.3;
}
.hz-storm-edge[data-warn='3'] {
    opacity: 0.75;
    animation: hz-alarm-edge 0.55s ease-in-out infinite alternate;
}
/* V6 (ISS-038): hidden during the grace (HudView, storm.active); when the chase
   starts the meter slides in with « La tempête se lève » in the risk colour, three
   soft pulses and one left-edge swell (data-rise, STORM_RISE_S). */
.hz-storm[data-rise='on'] {
    animation: hz-storm-rise 0.6s var(--hz-ease) both;
}
.hz-storm[data-rise='on'] .hz-storm-read {
    color: var(--hz-risk);
    border-color: var(--hz-risk);
}
.hz-storm[data-rise='on'] .hz-storm-read::after {
    animation: hz-alarm 0.6s ease-in-out 4 alternate;
}
.hz-storm-edge[data-rise='on'] {
    animation: hz-storm-swell 2.6s ease-out;
}
@keyframes hz-storm-rise {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
}
@keyframes hz-storm-swell {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}
@keyframes hz-alarm {
    from {
        opacity: 0.15;
    }
    to {
        opacity: 1;
    }
}
@keyframes hz-alarm-scale {
    to {
        transform: scale(1.06);
    }
}
@keyframes hz-alarm-fill {
    from {
        opacity: 0.55;
    }
}
@keyframes hz-alarm-edge {
    from {
        opacity: 0.45;
    }
    to {
        opacity: 0.9;
    }
}

/* Zone B: notices / route hint (the combo moved into zone A in V4). */
.hz-zone-b {
    position: absolute;
    top: calc(max(10px, env(safe-area-inset-top)) + 54px * var(--hz-ts-lg));
    right: max(16px, env(safe-area-inset-right));
    width: min(46vw, 440px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
/* Compact has one event slot (HudView sets data-slot): the route hint beats pickup
   notices, landing results and milestones beat the hint. Portrait/desktop stack both. */
.hz-notice {
    box-sizing: border-box;
    max-width: 100%;
    padding: 8px 13px;
    text-align: center;
    font-size: calc(14px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.35;
    overflow-wrap: break-word;
    text-transform: uppercase;
}
.hz-route {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 7px 12px;
    border-left: 3px solid var(--journey-accent);
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}
.journey-hud-root[data-slot='route'] .hz-notice,
.journey-hud-root[data-slot='notice'] .hz-route {
    display: none;
}
.hz-notice[hidden],
.hz-route[hidden],
.hz-controls[hidden] {
    display: none;
}
.hz-route .hz-icon {
    color: var(--journey-accent);
}
.hz-controls {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom) + 10px);
    max-width: 40vw;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgb(15 26 46 / 0.55);
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.2s;
}
.journey-hud-root[data-touch='left'] .hz-controls {
    left: auto;
    right: max(18px, env(safe-area-inset-right));
}
.hz-notice.in-a {
    animation: hz-in-a 0.24s var(--hz-ease);
}
.hz-notice.in-b {
    animation: hz-in-b 0.24s var(--hz-ease);
}
@keyframes hz-in-a {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}
@keyframes hz-in-b {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}
@keyframes hz-step-a {
    from {
        opacity: 0.4;
        transform: scale(1.25);
    }
}
@keyframes hz-step-b {
    from {
        opacity: 0.4;
        transform: scale(1.25);
    }
}

/* Trick callout (#hz-trick, the only place a landed trick is named): badge, big
   name in the display face, points, stacked tags (grabs, « Enchaînement ×5 », named
   chains, variété). Aspect < 4:3 (portrait, tablets): bottom band beside the
   touch button, under the rider band. Aspect ≥ 4:3: right of the 7 u look-ahead
   (rider fx ≤ .35 + 7 u of 15 u view height = 35vw + 47vh), under zone B. */
.hz-trick {
    position: absolute;
    left: 16px;
    right: 112px;
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 4px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.hz-trick[data-on='on'] {
    opacity: 1;
    transition: none;
}
.journey-hud-root[data-touch='left'] .hz-trick {
    left: 112px;
    right: 16px;
}
.journey-hud-root[data-touch='hidden'] .hz-trick {
    left: 16px;
    right: 16px;
}
.journey-hud-root[data-callout='on'] .hz-controls {
    opacity: 0;
}
.hz-trick-name {
    max-width: 100%;
    font-family: var(--hz-display);
    font-style: italic;
    font-weight: 600;
    font-size: calc(26px * var(--hz-ts-lg));
    line-height: 1.05;
    color: #fff8e6;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow:
        0 0 2px rgb(20 12 4 / 0.9),
        0 2px 14px rgb(20 12 4 / 0.7);
}
.hz-trick-points {
    padding: 2px 11px;
    border-radius: 20px;
    background: var(--hz-panel-strong);
    color: var(--journey-accent);
    font-size: calc(16px * var(--hz-ts-lg));
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.hz-trick-name:empty,
.hz-trick-points:empty {
    display: none;
}
.hz-trick-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.hz-trick-tags span[hidden] {
    display: none;
}
.hz-trick-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--hz-new);
    color: var(--hz-ink);
    font-size: calc(13px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.hz-trick-badge[hidden] {
    display: none;
}
.hz-trick-badge[data-kind='close'] {
    background: var(--hz-risk);
}
.hz-trick-badge small {
    font-size: calc(11px * var(--hz-ts));
    letter-spacing: 0.08em;
}
.hz-hazard small {
    font-size: calc(12px * var(--hz-ts));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.hz-card small {
    font-size: calc(12px * var(--hz-ts) * var(--hz-subs));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.88;
}
.journey-profile small {
    font-size: calc(12px * var(--hz-ts));
    opacity: 0.88;
    font-variant-numeric: tabular-nums;
}
.journey-mode small {
    grid-area: extra;
    font-size: calc(12px * var(--hz-ts));
    opacity: 0.85;
}
.journey-level small {
    font-size: calc(12px * var(--hz-ts));
    line-height: 1.35;
    opacity: 0.85;
}
.journey-tile small {
    font-size: calc(12px * var(--hz-ts));
    line-height: 1.35;
    opacity: 0.9;
}
.journey-achievements small {
    font-size: calc(12px * var(--hz-ts));
    line-height: 1.35;
    opacity: 0.88;
}
.journey-results-score > small {
    padding-bottom: 0.2em;
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}
.journey-results-stats small {
    grid-column: 1 / -1;
    justify-self: end;
    font-size: calc(11px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.journey-medal-next small {
    font-size: calc(11px * var(--hz-ts));
    opacity: 0.85;
}
.journey-records li small {
    grid-column: 1 / -1;
    opacity: 0.8;
}
.hz-trick-badge small:empty {
    display: none;
}
.hz-trick.in-a .hz-trick-name {
    animation: hz-pop-a 0.34s var(--hz-ease);
}
.hz-trick.in-b .hz-trick-name {
    animation: hz-pop-b 0.34s var(--hz-ease);
}
.hz-trick.in-a :is(.hz-trick-points, .hz-trick-tags) {
    animation: hz-lift-a 0.42s var(--hz-ease) 0.1s both;
}
.hz-trick.in-b :is(.hz-trick-points, .hz-trick-tags) {
    animation: hz-lift-b 0.42s var(--hz-ease) 0.1s both;
}
.hz-trick-badge.in-a {
    animation: hz-pop-a 0.3s var(--hz-ease);
}
.hz-trick-badge.in-b {
    animation: hz-pop-b 0.3s var(--hz-ease);
}
@keyframes hz-pop-a {
    from {
        opacity: 0;
        transform: scale(1.35);
    }
}
@keyframes hz-pop-b {
    from {
        opacity: 0;
        transform: scale(1.35);
    }
}
@keyframes hz-lift-a {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}
@keyframes hz-lift-b {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}
@media (min-aspect-ratio: 4/3) {
    /* right: room for the hazard marker at the right edge (≈ 90 px). */
    .hz-trick,
    .journey-hud-root[data-touch] .hz-trick {
        left: calc(35vw + 47vh + 12px);
        right: calc(max(16px, env(safe-area-inset-right)) + 84px);
        top: 40%;
        bottom: auto;
        align-content: start;
    }
    .journey-hud-root[data-callout='on'] .hz-controls {
        opacity: 1;
    }
}

/* Hazard telegraph (#hz-hazard): the next chasm / rock beyond the visible look-
   ahead, at the right edge and at rider height (translateY from JS); the arrow
   points off-screen toward it. Libre adds the distance. */
.hz-hazard {
    position: absolute;
    top: 0;
    right: max(6px, env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 9px;
    border: 1.5px solid var(--hz-risk);
    border-radius: 10px 4px 4px 10px;
    background: var(--hz-panel-strong);
    color: var(--hz-paper);
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.22s linear;
}
.hz-hazard[hidden] {
    display: none;
}
.hz-hazard:not([hidden]) {
    animation: hz-fade-in 0.25s ease-out;
}
.hz-hazard .hz-icon {
    width: 18px;
    height: 18px;
    color: var(--hz-risk);
}
.hz-hazard small:empty {
    display: none;
}
.hz-hazard-arrow {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right: 0;
    border-left: 8px solid var(--hz-risk);
}
@keyframes hz-fade-in {
    from {
        opacity: 0;
    }
}

.journey-hud-root[data-mode='zen'] :is(.hz-flow, .hz-storm, .hz-storm-edge, .hz-hazard, .hz-challenges) {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .journey:not([data-motion='off'])
        :is(
            .hz-storm,
            .hz-flow-bar i,
            .hz-flow-bar::after,
            .hz-storm-bar i,
            .hz-storm-read,
            .hz-storm-read::after,
            .hz-storm-edge,
            .hz-trick,
            .hz-trick *,
            .hz-hazard,
            .hz-challenges *,
            .hz-zone-a,
            .hz-controls
        ) {
        animation: none !important;
        transition: none !important;
    }
    .journey:not([data-motion='off']) .hz-flow[data-active='on'] .hz-flow-bar::after {
        display: none;
    }
    .journey:not([data-motion='off']) .hz-storm[data-warn='3'] .hz-storm-read::after {
        opacity: 0.8;
    }
}
.journey[data-motion='on']
    :is(
        .hz-storm,
        .hz-flow-bar i,
        .hz-flow-bar::after,
        .hz-storm-bar i,
        .hz-storm-read,
        .hz-storm-read::after,
        .hz-storm-edge,
        .hz-trick,
        .hz-trick *,
        .hz-hazard,
        .hz-challenges *,
        .hz-zone-a,
        .hz-controls
    ) {
    animation: none !important;
    transition: none !important;
}
.journey[data-motion='on'] .hz-flow[data-active='on'] .hz-flow-bar::after {
    display: none;
}
.journey[data-motion='on'] .hz-storm[data-warn='3'] .hz-storm-read::after {
    opacity: 0.8;
}

/* Touch jump button: JS pointer events with capture (runtime/Input.js). The word
   follows the gesture: « Sauter » at rest, « Plonger » while held on the ground
   (release = jump), « Figure » in the air (data-air from HudView). */
.journey-touch {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom) + 12px);
    right: max(20px, env(safe-area-inset-right) + 12px);
    width: 76px;
    height: 76px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 1.5px solid rgb(255 245 223 / 0.75);
    border-radius: 50%;
    background: rgb(15 26 46 / 0.42);
    color: #fff;
    font:
        800 12px 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    box-shadow: 0 5px 26px #2e395875;
    transition:
        transform 0.12s var(--hz-ease),
        background-color 0.12s;
}
.journey-touch .hz-icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.8;
    transition: transform 0.12s var(--hz-ease);
}
.hz-touch-word > .hz-touch-idle {
    display: inline;
}
.journey-touch[data-pressed] .hz-touch-idle,
.journey-touch[data-air='on'] .hz-touch-idle {
    display: none;
}
.journey-touch[data-pressed]:not([data-air='on']) .hz-touch-hold {
    display: inline;
}
.journey-touch[data-air='on'] .hz-touch-air {
    display: inline;
}
.hz-memory .hz-icon {
    width: 16px;
    height: 16px;
    color: var(--journey-accent);
}
.journey-mode > .hz-icon {
    grid-area: icon;
    width: 26px;
    height: 26px;
    color: var(--journey-accent);
}
.journey-swatch .hz-icon {
    width: 13px;
    height: 13px;
}
.journey-chapter-state .hz-icon {
    width: 16px;
    height: 16px;
}
.journey-medal .hz-icon {
    width: 1.1em;
    height: 1.1em;
}
.journey-results-challenges .hz-icon {
    width: 16px;
    height: 16px;
}
.journey-mission strong .hz-icon {
    color: var(--hz-ok);
}
.journey-hud-root[data-touch='left'] .journey-touch {
    right: auto;
    left: max(20px, env(safe-area-inset-left) + 12px);
}
.journey[data-contrast='high'] .journey-touch {
    background: var(--hz-panel-strong);
    border: 2px solid var(--hz-paper);
}
.journey-hud-root[data-phase='playing']:not([data-touch='hidden']) .journey-touch {
    display: flex;
}
.journey-touch[data-pressed] {
    transform: scale(0.93);
    background: rgb(255 245 223 / 0.38);
    border-width: 3px;
}

/* Desktop: zone A = score cluster top-left, narrow enough to stay left of the
   rider box (rider fx ≥ .29 − 1.5 u of a 15 u view: 25vw − 10vh − 12 px); zone B
   column to its right (y ≈ 12–30 %); the storm meter lower on the left edge. */
@media (min-width: 1024px) and (min-height: 600px) {
    .journey-hud-root {
        --hz-za-w: calc(clamp(220px, 25vw - 10vh - 12px, 340px) * var(--hz-ts-lg));
    }
    .hz-zone-a {
        top: max(22px, env(safe-area-inset-top));
        left: var(--hz-margin);
        width: var(--hz-za-w);
        max-width: none;
        grid-template-columns: 1fr auto;
        grid-template-areas: 'biome extra' 'score score' 'status status' 'combo combo' 'flow flow' 'progress progress' 'challenges challenges';
        row-gap: 7px;
        padding: 11px 15px 13px;
    }
    .hz-biome {
        display: block;
        overflow: hidden;
        font-size: calc(12px * var(--hz-ts));
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0.85;
    }
    .hz-extra {
        grid-area: extra;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: calc(12px * var(--hz-ts));
        font-weight: 700;
    }
    .hz-online {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .hz-score b {
        font-size: calc(36px * var(--hz-ts-lg));
    }
    .hz-score small {
        display: inline;
    }
    .hz-status {
        gap: 14px;
    }
    .hz-distance b {
        font-size: calc(17px * var(--hz-ts-lg));
    }
    .hz-stat {
        font-size: calc(15px * var(--hz-ts));
    }
    .hz-stat small {
        display: inline;
    }
    .hz-speed {
        font-size: calc(14px * var(--hz-ts));
    }
    .hz-progress {
        grid-area: progress;
        position: static;
        height: 3px;
    }
    .hz-meta {
        display: none;
    }
    .hz-challenges {
        display: grid;
    }
    .hz-combo strong {
        font-size: calc(22px * var(--hz-ts-lg));
    }
    .hz-combo-points {
        font-size: calc(15px * var(--hz-ts));
    }
    .hz-storm {
        top: 42%;
        height: 26%;
    }
    .hz-zone-b {
        top: max(86px, env(safe-area-inset-top) + 62px);
        left: calc(var(--hz-margin) + var(--hz-za-w) + 24px);
        right: var(--hz-margin);
        width: auto;
        align-items: flex-end;
    }
    .hz-notice,
    .hz-route {
        max-width: min(560px, 100%);
    }
    .hz-notice {
        font-size: calc(16px * var(--hz-ts));
        padding: 9px 16px;
    }
    .journey-hud-root[data-slot] .hz-notice:not([hidden]) {
        display: block;
    }
    .journey-hud-root[data-slot] .hz-route:not([hidden]) {
        display: flex;
    }
    .hz-trick-name {
        font-size: calc(36px * var(--hz-ts-lg));
    }
    .hz-trick-points {
        font-size: calc(19px * var(--hz-ts-lg));
    }
    .hz-hazard {
        font-size: calc(12px * var(--hz-ts));
        padding: 7px 8px 7px 11px;
    }
    .journey-touch {
        width: 88px;
        height: 88px;
        right: clamp(20px, 6vw, 88px);
        bottom: max(32px, env(safe-area-inset-bottom) + 20px);
    }
    .journey-hud-root[data-touch='left'] .journey-touch {
        left: clamp(20px, 6vw, 88px);
    }
    .hz-controls {
        left: var(--hz-margin);
        bottom: max(32px, env(safe-area-inset-bottom) + 25px);
        max-width: none;
    }
    .journey-hud-root[data-touch='left'] .hz-controls {
        right: var(--hz-margin);
    }
}

/* Desktop callout: under zone B right of the look-ahead; on squarer desktops the
   bottom band, clear of the larger touch button. */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 4/3) {
    .hz-trick,
    .journey-hud-root[data-touch] .hz-trick {
        top: 31%;
    }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-aspect-ratio: 1333/1000) {
    .hz-trick {
        right: calc(clamp(20px, 6vw, 88px) + 100px);
    }
    .journey-hud-root[data-touch='left'] .hz-trick {
        left: calc(clamp(20px, 6vw, 88px) + 100px);
        right: var(--hz-margin);
    }
    .journey-hud-root[data-touch='hidden'] .hz-trick {
        left: var(--hz-margin);
        right: var(--hz-margin);
    }
}

/* Portrait: the top 24 % is the only band clear of the rider and its look-ahead.
   Zone A in the header row (left of the icon buttons): score + combo chip, metres ·
   shards · m/s + dots, Flow; the storm strip under it; zone B under the strip.
   The callout lives in the bottom band beside the touch button (base rules). */
@media (max-width: 699.98px) and (max-aspect-ratio: 85/100) {
    /* Zone A height budget (rows below at 100 %), scaled by --hz-ts-lg. */
    .journey-hud-root {
        --hz-za-h: 84px;
        --hz-strip: 30px;
    }
    .journey-hud-root:not([data-mode='libre']),
    .journey-hud-root[data-storm='off'] {
        --hz-strip: 0px;
    }
    .journey-hud-root[data-mode='zen'] {
        --hz-za-h: 50px;
    }
    .journey-hud-root[data-mode='voyage'] {
        --hz-za-h: 100px;
    }
    .hz-zone-a {
        top: max(15px, env(safe-area-inset-top));
        left: 16px;
        right: 120px;
        max-width: none;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: 'score combo' 'status meta' 'flow flow';
        column-gap: 10px;
        row-gap: 3px;
        padding: 6px 12px 8px;
    }
    .hz-score b {
        font-size: calc(21px * var(--hz-ts-lg));
    }
    .hz-status {
        gap: 9px;
    }
    .hz-distance b {
        font-size: calc(15px * var(--hz-ts-lg));
    }
    .hz-stat {
        font-size: calc(13px * var(--hz-ts-lg));
    }
    .hz-speed {
        font-size: calc(12px * var(--hz-ts-lg));
    }
    .hz-meta {
        justify-self: end;
    }
    .hz-combo {
        justify-self: end;
        grid-template-columns: auto auto;
        padding: 1px 6px 3px;
    }
    .hz-combo strong {
        font-size: calc(17px * var(--hz-ts-lg));
    }
    .hz-combo-points {
        font-size: calc(12px * var(--hz-ts));
    }
    .hz-grace {
        margin-top: 2px;
    }
    .hz-flow-bar {
        min-width: 40px;
    }
    .hz-storm {
        top: calc(max(15px, env(safe-area-inset-top)) + var(--hz-za-h) * var(--hz-ts-lg));
        left: 16px;
        right: 16px;
        height: 24px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .hz-storm-bar {
        order: 2;
        flex: 1;
        width: auto;
        height: 8px;
    }
    .hz-storm-bar i {
        transform-origin: left center;
        transform: scaleX(var(--hz-v, 0));
        background: linear-gradient(90deg, var(--hz-danger), var(--hz-risk));
    }
    .hz-storm-read {
        order: 1;
        grid-template-columns: auto auto auto auto;
        grid-template-areas: 'icon label pips text';
        padding: 2px 8px;
    }
    .hz-storm-edge {
        width: 10vw;
    }
    .hz-zone-b {
        top: calc(max(15px, env(safe-area-inset-top)) + var(--hz-za-h) * var(--hz-ts-lg) + var(--hz-strip) + 4px);
        left: 16px;
        right: 16px;
        width: auto;
        align-items: center;
    }
    .hz-notice {
        font-size: calc(13px * var(--hz-ts));
        padding: 7px 12px;
    }
    /* V6: one event slot like compact (HudView data-slot: the route hint beats pickup
       notices, landing results and milestones beat the hint) and the short one-line
       route wording (Hud.js ROUTE_HINTS.short), so zone B stays one row above the
       rider's look-ahead box at jump apex. */
    .hz-route {
        padding: 6px 10px;
        letter-spacing: 0.04em;
    }
    .hz-trick-name {
        font-size: calc(24px * var(--hz-ts-lg));
    }
    .journey-touch {
        width: 84px;
        height: 84px;
    }
    .hz-controls {
        max-width: 52vw;
        line-height: 1.45;
    }
}
/* Very short landscape phones: smaller button so it stays below the route corridor. */
@media (max-height: 450px) {
    .journey-touch {
        width: 68px;
        height: 68px;
        bottom: max(14px, env(safe-area-inset-bottom) + 8px);
    }
    .journey-touch span {
        font-size: 11px;
    }
    .journey-touch .hz-icon {
        width: 24px;
        height: 24px;
    }
    .hz-controls {
        bottom: max(12px, env(safe-area-inset-bottom) + 6px);
    }
    .hz-trick-name {
        font-size: calc(21px * var(--hz-ts-lg));
    }
}
@media (max-height: 450px) and (min-aspect-ratio: 4/3) {
    .hz-trick,
    .journey-hud-root[data-touch] .hz-trick {
        top: 36%;
    }
}

/* Zen (HudView data-mode): no numbers at all — no distance, shards, score, speed,
   combo, Flow, storm or challenges. The biome name and the horizon progress line remain. */
.journey-hud-root[data-mode='zen'] :is(.hz-score, .hz-status, .hz-meta, .hz-extra, .hz-combo) {
    display: none !important;
}
.journey-hud-root[data-mode='zen'] .hz-zone-a {
    grid-template-columns: auto;
    grid-template-areas: 'biome' 'progress';
    row-gap: 7px;
    width: auto;
    min-width: 170px;
    padding: 9px 14px 11px;
}
.journey-hud-root[data-mode='zen'] .hz-biome {
    display: block;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.journey-hud-root[data-mode='zen'] .hz-progress {
    grid-area: progress;
    position: static;
    height: 2px;
}

/* Voyage (HudView data-mode): chapter label + destination thread, light gathered
   (éclats), the chapter's three memory dots and a quiet Flow line (no numbers);
   no metres, score, speed, storm or run challenges (progression-story.md §5). */
.hz-memories {
    grid-area: memories;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
}
.hz-memories i.done {
    background: var(--hz-ok);
    border-color: var(--hz-ok);
    opacity: 1;
}
.journey-hud-root[data-mode='voyage']
    :is(
        .hz-meta,
        .hz-extra,
        .hz-distance,
        .hz-speed,
        .hz-score,
        .hz-challenges,
        .hz-storm,
        .hz-storm-edge,
        .hz-flow-time
    ) {
    display: none !important;
}
.journey-hud-root[data-mode='voyage'] .hz-zone-a {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'biome memories' 'status memories' 'combo combo' 'flow flow' 'progress progress';
    column-gap: 16px;
    row-gap: 5px;
    width: auto;
    min-width: 200px;
    padding: 8px 14px 10px;
}
.journey-hud-root[data-mode='voyage'] .hz-biome {
    display: block;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.journey-hud-root[data-mode='voyage'] .hz-memories {
    display: inline-flex;
}
.journey-tile.is-locked small {
    color: var(--hz-paper);
}
.journey-achievements .is-locked small {
    color: var(--hz-paper);
}
.journey-hud-root[data-mode='voyage'] .hz-stat small {
    display: inline;
}
.journey-hud-root[data-mode='voyage'] .hz-progress {
    grid-area: progress;
    position: static;
    height: 2px;
}
.journey-hud-root[data-mode='voyage'] .hz-flow {
    opacity: 0.8;
    font-size: calc(10px * var(--hz-ts));
}
.journey-hud-root[data-mode='voyage'] .hz-flow-bar {
    height: 4px;
}

/* Voyage story layer (HudView renderStory), zone B only: caption > notice > route
   hint (presentation.md §3.6). A chapter card takes zone B alone and dims zone A. */
.hz-card,
.hz-caption,
.hz-memory {
    pointer-events: none;
}
.hz-card[hidden],
.hz-caption[hidden],
.hz-memory[hidden] {
    display: none;
}
.hz-card {
    display: grid;
    justify-items: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: min(300px, 100%);
    max-width: 100%;
    padding: 12px 24px 13px;
    border: 1px solid var(--hz-line);
    border-top-color: var(--journey-accent);
    border-radius: 12px;
    background: var(--hz-panel);
    text-align: center;
    animation: hz-card 2.8s var(--hz-ease) both;
}
.hz-card-numeral {
    color: var(--journey-accent);
    font-size: calc(11px * var(--hz-ts) * var(--hz-subs));
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.hz-card strong {
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: calc(clamp(26px, 3.2vw, 40px) * var(--hz-ts-lg) * var(--hz-subs));
    line-height: 1.05;
}
.hz-card-line {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    margin: 3px 0 1px;
    background: var(--hz-line);
}
.hz-caption {
    box-sizing: border-box;
    max-width: min(calc(560px * var(--hz-subs)), 100%);
    margin: 0;
    padding: 9px 16px 10px;
    border-radius: 10px;
    background: rgb(15 26 46 / 0.7);
    font-family: var(--hz-display);
    font-size: calc(clamp(17px, 1.9vw, 21px) * var(--hz-ts-lg) * var(--hz-subs));
    font-style: italic;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    animation: hz-caption 0.7s var(--hz-ease) both;
}
.hz-memory {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--journey-accent);
    border-radius: 12px;
    background: var(--hz-panel);
    font-size: calc(13px * var(--hz-ts) * var(--hz-subs));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hz-memory.in-a {
    animation: hz-in-a 0.3s var(--hz-ease);
}
.hz-memory.in-b {
    animation: hz-in-b 0.3s var(--hz-ease);
}
.journey-hud-root[data-story='card'] :is(.hz-combo, .hz-notice, .hz-route) {
    display: none !important;
}
.journey-hud-root[data-story='card'] .hz-zone-a {
    opacity: 0.45;
}
.journey-hud-root[data-story='line'] .hz-route {
    display: none !important;
}
@media not all and (min-width: 1024px) and (min-height: 600px) {
    .journey-hud-root[data-story='line'] .hz-notice {
        display: none !important;
    }
}
/* Wordless beat: a warm light breathes down from the sky; data-beat also warms
   the chapter thread, which is the whole cue with reduced motion. */
.hz-beat {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 32%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse 55% 100% at 50% 0%, rgb(255 238 206 / 0.2), transparent 72%);
}
.hz-beat.glow-a {
    animation: hz-glow-a 1.8s ease-in-out;
}
.hz-beat.glow-b {
    animation: hz-glow-b 1.8s ease-in-out;
}
.journey-hud-root[data-beat] .hz-progress {
    background: rgb(255 245 226 / 0.5);
}
@keyframes hz-card {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }
    14% {
        opacity: 1;
        transform: none;
    }
    84% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes hz-caption {
    from {
        opacity: 0;
    }
}
@keyframes hz-glow-a {
    40% {
        opacity: 1;
    }
}
@keyframes hz-glow-b {
    40% {
        opacity: 1;
    }
}

/* ---------- Pause (Razor dialog) ---------- */
.journey-overlay {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(100px, env(safe-area-inset-top) + 76px) 20px max(30px, env(safe-area-inset-bottom));
    touch-action: pan-y;
}
/* Solid scrim: the canvas keeps rendering while paused, so no backdrop blur (A13). */
.journey-pause-overlay {
    background: rgb(21 32 56 / 0.78);
}
.journey-card {
    width: min(490px, 100%);
    text-align: center;
    margin: auto;
}
.journey-card p {
    margin: 0 auto 22px;
    max-width: 560px;
    line-height: 1.5;
    font-size: calc(clamp(14px, 1.7vw, 17px) * var(--hz-ts));
    color: #fff8eae0;
}
.journey-pause-actions {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(340px, 100%);
    margin: 0 auto;
}
.journey-eyebrow {
    color: var(--journey-accent);
    letter-spacing: 0.32em;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.journey-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(310px, 100%);
    min-height: 52px;
    border: 0;
    border-radius: 50px;
    background: var(--journey-accent);
    color: #24374a;
    font:
        800 calc(13px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 9px 30px #27354d66;
    transition:
        transform 0.2s var(--hz-ease),
        filter 0.2s;
}
.journey-pause-actions .journey-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.journey-start:disabled {
    opacity: 0.6;
    cursor: wait;
}
.journey-menu-actions .journey-start {
    width: 100%;
}
.journey-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--hz-line);
    border-radius: 50px;
    background: var(--hz-panel);
    color: var(--hz-paper);
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.journey-secondary:hover {
    border-color: var(--journey-accent);
    color: var(--journey-accent);
}
.journey-link-button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: -6px 0 -8px -10px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hz-paper);
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.journey-link-button:disabled {
    opacity: 0.5;
    cursor: default;
}
.journey-link-button:hover:not(:disabled) {
    color: var(--journey-accent);
}
.journey-tip {
    display: block;
    margin-top: 4px;
    font-size: calc(12px * var(--hz-ts));
    letter-spacing: 0.08em;
    line-height: 1.45;
    color: #fff9eed0;
}
.journey-count {
    padding: 1px 7px;
    border: 1px solid var(--hz-line);
    border-radius: 10px;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
/* « Nouveau » (unlock, record): a label, never colour alone. */
.journey-new {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--hz-new);
    color: var(--hz-ink);
    font-size: calc(11px * var(--hz-ts));
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.journey-error {
    margin: 0;
    padding: 12px;
    border: 1px solid #ffd3c8;
    border-radius: 8px;
    background: #783c4ccf;
    color: #fff5e5;
    line-height: 1.45;
}

/* ---------- Menus (Razor): loading, error, title, modes, missions, collection, results ----------
   A sheet on the left (desktop, compact) or at the bottom (portrait); Camera.js
   `MENU_PROFILES` composes the idle rider in the uncovered area (`cover`). */
.journey-menu {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.journey-menu-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(15 26 46 / 0.55) 0%, rgb(15 26 46 / 0.3) 32%, transparent 52%);
}
.journey-sheet {
    pointer-events: auto;
    position: absolute;
    left: var(--hz-margin);
    top: calc(var(--hz-top) + 60px);
    bottom: max(24px, env(safe-area-inset-bottom) + 16px);
    width: min(calc(440px * var(--hz-ts-lg)), 38vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 24px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border: 1px solid var(--hz-line);
    border-top: 1px solid var(--journey-accent);
    border-radius: 4px 4px 16px 16px;
    background: var(--hz-panel);
    scrollbar-width: thin;
}
.journey-sheet > * {
    flex: none;
}
/* Title / loading / error: vertically centred plate, sized to its content. */
.journey-title-screen,
.journey-state {
    height: fit-content;
    max-height: calc(100% - var(--hz-top) - 84px);
    margin-block: auto;
}
.journey-hero {
    margin: 0;
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: clamp(44px, 5.2vw, 84px);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--hz-paper);
}
.journey-hero-small {
    font-size: calc(28px * var(--hz-ts-lg));
}
.journey-results {
    gap: 12px;
}
.journey .journey-hero:focus,
.journey h2:focus,
.journey-results:focus {
    outline: none;
    box-shadow: none;
}
.journey-sheet-title {
    margin: 0;
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: calc(clamp(28px, 3vw, 40px) * var(--hz-ts-lg));
    line-height: 1.1;
}
.journey-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.journey-sheet-head .journey-icon-button {
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hz-paper);
    cursor: pointer;
}
.journey-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: calc(13px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.journey-lede {
    margin: 0;
    max-width: 36ch;
    font-size: calc(16px * var(--hz-ts));
    line-height: 1.5;
    color: #fff8eae6;
}
.journey-context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: calc(13px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--journey-accent);
}
.journey-note {
    margin: 0;
    padding: 10px 12px;
    border-left: 2px solid var(--journey-accent);
    background: rgb(15 26 46 / 0.5);
    font-size: calc(14px * var(--hz-ts));
    line-height: 1.5;
}
.journey-menu-actions {
    display: grid;
    gap: 10px;
}
.journey-menu-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Horizon line motif: hairline + sun dot (title), loading bar, results line. */
.journey-horizon {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--hz-line);
}
.journey-horizon.is-loading i::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--journey-accent);
}
.journey-horizon.is-drawn {
    height: 2px;
    background: var(--journey-accent);
    transform-origin: left center;
    animation: hz-draw 0.9s var(--hz-ease) 0.7s both;
}
@keyframes hz-sun-drift {
    to {
        transform: translateX(140px);
    }
}
@keyframes hz-load {
    to {
        transform: translateX(calc(100% - 9px));
    }
}
@keyframes hz-draw {
    from {
        transform: scaleX(0);
    }
}
.journey-loading {
    display: grid;
    gap: 12px;
    font-size: calc(14px * var(--hz-ts));
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Hold-to-start (runtime/Input.js sets data-hold on .journey): the line fills in
   0.6 s while held and snaps back on release. Functional feedback, so it is kept
   with reduced motion. */
.journey-hold {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    font-size: calc(13px * var(--hz-ts));
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff8eae0;
}
.journey-hold kbd {
    padding: 1px 6px;
    border: 1px solid var(--hz-line);
    border-radius: 4px;
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
}
.journey-hold-line {
    position: relative;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: rgb(255 248 234 / 0.18);
    overflow: hidden;
}
.journey[data-hold='on'] .journey-hold-line i {
    transform: scaleX(1);
    transition: transform 0.6s linear;
}
.journey[data-hold='done'] .journey-hold-line i {
    transform: scaleX(1);
}
.journey-medal-next[data-medal='2'] .journey-bar i {
    background: var(--hz-medal-2);
}
.journey-medal-next[data-medal='3'] .journey-bar i {
    background: var(--hz-medal-3);
}
.journey-medal-next[data-medal='4'] .journey-bar i {
    background: var(--hz-medal-4);
}
.hz-storm[data-warn='3'] .hz-storm-pips i,
.hz-storm[data-warn='1'] .hz-storm-pips i:nth-child(-n + 1),
.hz-storm[data-warn='2'] .hz-storm-pips i:nth-child(-n + 2) {
    opacity: 1;
}
.journey-hold-touch {
    display: none;
}
@media (hover: none) and (pointer: coarse) {
    .journey-hold-key {
        display: none;
    }
    .journey-hold-touch {
        display: inline;
    }
}

/* Profile: level + XP line. */
.journey-profile {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--hz-line);
    border-radius: 10px;
    background: rgb(15 26 46 / 0.45);
}
.journey-profile.is-compact {
    padding: 8px 10px;
}
.journey-profile-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: calc(14px * var(--hz-ts));
}
.journey-profile-head strong {
    font-size: calc(13px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journey-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.journey-bar {
    position: relative;
    display: block;
    height: 4px;
    border-radius: 4px;
    background: rgb(255 248 234 / 0.18);
    overflow: hidden;
}

/* Mode select: radio cards; the sun dot rises above the selected card. */
.journey-modes {
    display: grid;
    gap: 10px;
}
.journey-mode {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'icon name' 'icon text' 'icon extra';
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-height: 64px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--hz-line);
    border-radius: 10px;
    background: rgb(27 52 92 / 0.6);
    color: var(--hz-paper);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.journey-mode strong {
    grid-area: name;
    font-size: calc(16px * var(--hz-ts));
}
.journey-mode.active {
    border-color: var(--journey-accent);
    box-shadow: inset 0 0 0 1px var(--journey-accent);
}
.journey-mode.active::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 22px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--journey-accent);
}
.journey-mode.is-locked {
    border-style: dashed;
    background: rgb(15 26 46 / 0.4);
    color: var(--hz-locked);
    cursor: default;
}
.journey-mode.is-locked > .hz-icon {
    color: var(--hz-locked);
}
.journey-achievements .is-done .hz-icon {
    color: var(--hz-ok);
}
.journey-medal.is-hero .hz-icon {
    width: 1.35em;
    height: 1.35em;
    fill: currentColor;
}
.journey-results-challenges .complete .hz-icon {
    color: var(--hz-ok);
}
.journey-touch[data-pressed]:not([data-air='on']) .hz-icon {
    transform: rotate(180deg) scale(0.85);
}

/* Biome select (Libre / Zen): lock icon + hint text, difficulty dots + words. */
.journey-biomes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.journey-level {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #fff8e76b;
    border-radius: 8px;
    background: rgb(27 52 92 / 0.72);
    color: var(--hz-paper);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        transform 0.2s var(--hz-ease),
        background-color 0.2s;
}
.journey-level:disabled {
    opacity: 0.55;
    cursor: wait;
}
.journey-level:hover:not([aria-disabled='true']):not(:disabled) {
    transform: translateY(-2px);
    background: #294b72e8;
}
.journey-level.active {
    border-color: var(--level-accent);
    box-shadow: inset 0 0 0 2px var(--level-accent);
}
.journey-level-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.journey-level strong {
    font-size: calc(15px * var(--hz-ts));
    line-height: 1.15;
}
.journey-level.is-locked {
    border-style: dashed;
    background: rgb(15 26 46 / 0.45);
    color: var(--hz-locked);
    cursor: not-allowed;
}
.journey-level .journey-lock-hint {
    color: var(--hz-paper);
    opacity: 0.9;
}
.journey-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--level-accent);
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
}
.journey-level.is-locked .journey-difficulty {
    color: inherit;
}
.journey-dots {
    display: inline-flex;
    gap: 3px;
}
.journey-dots i.on {
    background: currentColor;
}
.journey-level-selected {
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--level-accent, var(--journey-accent));
    color: var(--hz-ink);
    font-size: calc(11px * var(--hz-ts));
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.journey-mode .journey-level-selected {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    background: var(--journey-accent);
}

/* Missions. */
.journey-missions {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-mission {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--hz-line);
    border-radius: 10px;
    background: rgb(27 52 92 / 0.55);
}
.journey-mission.is-done {
    border-color: var(--hz-ok);
}
.journey-mission-scope {
    color: var(--journey-accent);
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.journey-mission strong {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: calc(15px * var(--hz-ts));
    line-height: 1.35;
}
.journey-mission-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.journey-mission-hint {
    font-size: calc(12px * var(--hz-ts));
    font-style: italic;
    opacity: 0.88;
}

/* Collection: tabs, cosmetic grid (owned / locked + how to unlock), achievements. */
.journey-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--hz-line);
}
.journey-tabs [role='tab'] {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--hz-paper);
    font:
        700 calc(13px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.78;
    cursor: pointer;
}
.journey-tabs [aria-selected='true'] {
    border-bottom-color: var(--journey-accent);
    opacity: 1;
}
[role='tabpanel'] {
    display: grid;
    gap: 12px;
}
.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-tile > button,
.journey-tile-body {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 4px;
    width: 100%;
    min-height: 96px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: rgb(27 52 92 / 0.6);
    color: var(--hz-paper);
    text-align: left;
    font: inherit;
}
.journey-tile > button {
    cursor: pointer;
}
.hz-photo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: transparent;
    color: var(--hz-paper);
    font:
        700 calc(12px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    letter-spacing: 0.06em;
    cursor: pointer;
    touch-action: manipulation;
}
.hz-photo-main button {
    min-height: 44px;
    padding: 0 6px;
    border-radius: 50px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journey-tile.is-equipped > button {
    border-color: var(--journey-accent);
    box-shadow: inset 0 0 0 1px var(--journey-accent);
}
.hz-photo button:disabled {
    opacity: 0.6;
    cursor: wait;
}
.journey-tile > button:hover:not(:disabled) {
    border-color: var(--journey-accent);
}
.journey-tile strong {
    font-size: calc(13px * var(--hz-ts));
    line-height: 1.25;
}
.journey-swatch {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 1.5px solid var(--hz-paper);
    border-radius: 50%;
    background: var(--tile-color);
}
.journey-swatch.is-locked {
    border-style: dashed;
    border-color: var(--hz-locked);
    background: transparent;
}
.journey-tile.is-locked .journey-tile-body {
    border-style: dashed;
    background: rgb(15 26 46 / 0.45);
    color: var(--hz-locked);
}
.journey-tile.is-equipped small::before {
    content: '✓ ';
}
.journey-tile .journey-new {
    position: absolute;
    top: 8px;
    right: 8px;
}
.journey-achievements {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-achievements li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: rgb(27 52 92 / 0.5);
}
.journey-achievements li > span:nth-child(2) {
    display: grid;
    gap: 2px;
}
.journey-achievements strong {
    font-size: calc(14px * var(--hz-ts));
}
.journey-hud-root[data-mode='voyage'] .hz-flow-label .hz-icon {
    width: 12px;
    height: 12px;
}
.journey-achievements .is-locked {
    border-style: dashed;
    color: var(--hz-locked);
}
.journey-achievement-state {
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    white-space: nowrap;
}
.journey-mastery-state {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.85;
}
.journey-mastery-state::before {
    content: '· ';
}

/* Results: staged by CSS (delays per --stage). `visibility` is part of the
   keyframes, so a stage that has not appeared yet cannot be clicked or focused;
   .is-skipped (any input) shows everything at once. */
.journey-results-catch {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}
.journey-score {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}
.journey-score > div {
    padding: 8px 10px;
    border: 1px solid var(--hz-line);
    border-radius: 8px;
    background: rgb(15 26 46 / 0.45);
}
.journey-score dt {
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.88;
}
.journey-score dd {
    margin: 2px 0 0;
    font-size: calc(20px * var(--hz-ts-lg));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.journey-score .is-wide {
    grid-column: 1 / -1;
}
.journey-score.is-xp {
    grid-template-columns: 1fr 1fr;
}
.journey-results-stats dd {
    margin: 0;
    text-align: right;
    font-size: calc(15px * var(--hz-ts));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.journey-score.is-xp dd {
    font-size: calc(16px * var(--hz-ts));
}
.journey-score.is-xp .is-total {
    grid-column: 1 / -1;
    border-color: var(--journey-accent);
}
.journey-xp {
    display: grid;
    gap: 10px;
}
.journey-levelup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 800;
}
.journey-rewards {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(14px * var(--hz-ts));
}
.journey-rewards li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--journey-accent);
    background: rgb(15 26 46 / 0.45);
}
.journey-results.is-skipped .journey-skip-tip {
    display: none;
}
.hz-stage {
    animation: hz-rise var(--hz-d3) var(--hz-ease) both;
    animation-delay: calc(var(--stage, 0) * 60ms);
}
.journey-results .hz-stage {
    animation-name: hz-stage;
    animation-duration: 0.45s;
    animation-delay: calc(var(--stage, 0) * 0.16s);
}
.journey-premise .hz-stage {
    animation-name: hz-stage;
    animation-duration: 0.9s;
    animation-delay: calc(var(--stage, 0) * 1.4s);
}
.journey-ending .hz-stage {
    animation-name: hz-stage;
    animation-duration: 0.8s;
    animation-delay: calc(var(--stage, 0) * 0.9s);
}
.journey-results.is-skipped .hz-stage,
.journey-results.is-skipped .journey-horizon.is-drawn {
    animation: none;
}
@keyframes hz-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}
@keyframes hz-stage {
    from {
        opacity: 0;
        transform: translateY(12px);
        visibility: hidden;
    }
}

/* Voyage: chapter select (numeral, title, time of day, memories x/3, lock with
   its reason in words), premise (prologue) and ending + short credits. */
.journey-chapters {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-chapter {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-areas: 'num title state' 'num meta state';
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--hz-line);
    border-radius: 10px;
    background: rgb(27 52 92 / 0.62);
    color: var(--hz-paper);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.journey-chapter:disabled {
    opacity: 0.6;
    cursor: wait;
}
.journey-chapter:hover:not([aria-disabled='true']):not(:disabled) {
    background: #294b72e8;
}
.journey-chapter-numeral {
    grid-area: num;
    color: var(--chapter-accent, var(--journey-accent));
    font-family: var(--hz-display);
    font-size: calc(26px * var(--hz-ts-lg));
    line-height: 1;
    text-align: center;
}
.journey-chapter strong {
    grid-area: title;
    font-size: calc(15px * var(--hz-ts));
    line-height: 1.2;
}
.journey-chapter-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;
    font-size: calc(12px * var(--hz-ts));
    line-height: 1.35;
    opacity: 0.9;
}
.journey-chapter-state {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journey-chapter.active {
    border-color: var(--chapter-accent, var(--journey-accent));
    box-shadow: inset 0 0 0 2px var(--chapter-accent, var(--journey-accent));
}
.journey-chapter.is-done .journey-chapter-state {
    color: var(--chapter-accent, var(--journey-accent));
}
.journey[data-palette='colorblind'] .journey-chapter.is-done .journey-chapter-state {
    color: var(--hz-ok);
}
.journey-chapter.is-locked {
    border-style: dashed;
    background: rgb(15 26 46 / 0.45);
    color: var(--hz-locked);
    cursor: not-allowed;
}
.journey-chapter.is-locked .journey-chapter-numeral {
    color: inherit;
}
.journey-chapter.is-locked .journey-chapter-meta {
    color: var(--hz-paper);
}
.journey-memdots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.journey-memdots i.on {
    background: currentColor;
}
.journey-premise,
.journey-ending {
    width: min(560px, 44vw);
    height: fit-content;
    max-height: calc(100% - var(--hz-top) - 84px);
    margin-block: auto;
    gap: 16px;
}
.journey-premise .journey-sheet-head .journey-icon-button {
    min-width: 44px;
}
.journey-premise-text {
    display: grid;
    gap: 14px;
}
.journey-premise-text p {
    margin: 0;
    font-family: var(--hz-display);
    font-size: calc(clamp(17px, 1.6vw, 21px) * var(--hz-ts-lg));
    line-height: 1.5;
    color: #fff8eaf2;
}
.journey-premise.is-skipped .hz-stage,
.journey-ending.is-skipped .hz-stage {
    animation: none;
}
.journey-premise.is-skipped .journey-skip-tip,
.journey-ending.is-skipped .journey-skip-tip {
    display: none;
}
.journey-premise:focus,
.journey-ending:focus {
    outline: none;
    box-shadow: none;
}
.journey-ending-line {
    margin: 0;
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: calc(clamp(28px, 3.4vw, 44px) * var(--hz-ts-lg));
    line-height: 1.15;
}
.journey-epilogue {
    margin: 0;
    padding-left: 12px;
    border-left: 2px solid var(--journey-accent);
    font-family: var(--hz-display);
    font-size: calc(17px * var(--hz-ts));
    font-style: italic;
    line-height: 1.5;
}
.journey-arrivals {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-arrivals li {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-left: 2px solid var(--journey-accent);
    background: rgb(15 26 46 / 0.45);
    font-size: calc(13px * var(--hz-ts));
}
.journey-arrivals q {
    font-family: var(--hz-display);
    font-size: calc(16px * var(--hz-ts));
    font-style: italic;
}
.journey-credits {
    position: relative;
    height: 140px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.journey-credits-roll {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: calc(13px * var(--hz-ts));
    letter-spacing: 0.06em;
    animation: hz-credits 18s linear 3.6s both;
}
.journey-credits-roll strong {
    display: block;
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--journey-accent);
}
.journey-credits-roll a {
    color: inherit;
    text-underline-offset: 0.2em;
}
@keyframes hz-credits {
    from {
        transform: translateY(140px);
    }
    to {
        transform: translateY(-100%);
    }
}

/* Settings popover additions (name field, more choices): scroll inside. */
.journey-settings-panel .journey-name {
    display: grid;
    grid-template-columns: 1fr;
}
.journey-name input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff9eeed;
    color: #27344d;
    outline: none;
    font:
        600 calc(15px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    text-transform: none;
    letter-spacing: 0;
    user-select: text;
}
.journey-name input:focus {
    border-color: var(--journey-accent);
}

@media (max-width: 700px) {
    .journey {
        --hz-margin: 16px;
        --hz-top: max(15px, env(safe-area-inset-top));
    }
    .journey-back > span:not(.visually-hidden) {
        display: none;
    }
    .journey-overlay {
        padding-top: max(76px, env(safe-area-inset-top) + 68px);
        align-items: flex-start;
    }
}
/* During a run on small screens the header keeps icon-only 44 px buttons (zone A takes the row). */
@media not all and (min-width: 1024px) and (min-height: 600px) {
    .journey-header.is-running {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .journey-header.is-running .journey-icon-button {
        width: 44px;
        padding: 0;
    }
    .journey-header.is-running .journey-icon-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    /* Compact menus: left rail (Camera MENU_PROFILES.compact.cover = .5). */
    .journey-sheet {
        width: min(calc(420px * var(--hz-ts-lg)), 48vw);
        top: calc(var(--hz-top) + 52px);
        bottom: max(12px, env(safe-area-inset-bottom) + 8px);
        gap: 10px;
        padding: 16px 16px 14px;
    }
    .journey-menu-scrim {
        background: linear-gradient(90deg, rgb(15 26 46 / 0.55) 0%, rgb(15 26 46 / 0.3) 40%, transparent 60%);
    }
    .journey-score dd {
        font-size: calc(17px * var(--hz-ts));
    }
}
@media (max-height: 520px) {
    .journey-hero {
        font-size: calc(36px * var(--hz-ts-lg));
    }
    .journey-lede {
        display: none;
    }
    .journey-sheet-title {
        font-size: calc(26px * var(--hz-ts-lg));
    }
}
/* Portrait: bottom sheet (≤ 62 %), the scene and the rider above it. */
@media (max-width: 699.98px) and (max-aspect-ratio: 85/100) {
    .journey-header.is-running {
        padding-top: max(15px, env(safe-area-inset-top));
    }
    .journey-menu-scrim {
        background: linear-gradient(0deg, rgb(15 26 46 / 0.55) 0%, rgb(15 26 46 / 0.25) 48%, transparent 66%);
    }
    .journey-sheet,
    .journey-title-screen,
    .journey-state,
    .journey-premise,
    .journey-ending {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        height: auto;
        max-height: 62%;
        margin: 0;
        padding: 18px 16px max(16px, env(safe-area-inset-bottom) + 12px);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }
    .journey-hero {
        font-size: calc(44px * var(--hz-ts-lg));
    }
    .journey-lede {
        display: none;
    }
    .journey-score {
        grid-template-columns: 1fr 1fr;
    }
    .journey-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .journey-biomes {
        grid-template-columns: 1fr;
    }
    .journey-level small:not(.journey-lock-hint) {
        display: none;
    }
}

/* Reduced motion: « Système » follows the OS, « Réduites » forces it, « Complètes »
   opts out (Razor renders data-motion from journey-settings-v1). Camera.js reads
   the same setting (no title drift, cuts instead of blends). */
@media (prefers-reduced-motion: reduce) {
    .journey:not([data-motion='off'])
        :is(
            .hz-stage,
            .journey-horizon i,
            .journey-horizon.is-drawn,
            .journey-level,
            .journey-start,
            .journey-touch,
            .hz-grace i,
            .hz-combo,
            .hz-combo strong,
            .hz-notice,
            .hz-card,
            .hz-caption,
            .hz-memory,
            .hz-beat,
            .journey-credits-roll
        ) {
        animation: none !important;
        transition: none !important;
    }
    .journey:not([data-motion='off']) .journey-credits {
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}
.journey[data-motion='on']
    :is(
        .hz-stage,
        .journey-horizon i,
        .journey-horizon.is-drawn,
        .journey-level,
        .journey-start,
        .journey-touch,
        .hz-grace i,
        .hz-combo,
        .hz-combo strong,
        .hz-notice,
        .hz-card,
        .hz-caption,
        .hz-memory,
        .hz-beat,
        .journey-credits-roll
    ) {
    animation: none !important;
    transition: none !important;
}
.journey[data-motion='on'] .journey-credits {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

/* ---------- Photo mode (JS-owned layer, runtime/PhotoMode.js, R3) ----------
   `.journey[data-photo]` is set by JS ('on' | 'drag'): HUD, header and vignette
   leave on the same frame. Captures read the canvas only, so nothing here is
   ever in a photo; « Masquer » only clears the view while framing. */
.journey-photo-root {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}
.journey[data-photo] :is(.journey-hud-root, .journey-header, .journey-vignette) {
    visibility: hidden;
}
.journey[data-photo] .journey-stage {
    cursor: grab;
}
.journey[data-photo='drag'] .journey-stage {
    cursor: grabbing;
}
.hz-photo {
    position: absolute;
    inset: 0;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.hz-photo-guides {
    position: absolute;
    inset: 0;
    display: none;
}
.hz-photo[data-guides='on'] .hz-photo-guides {
    display: block;
}
.hz-photo-flash {
    position: absolute;
    inset: 0;
    background: #fff8ea;
    opacity: 0;
}
.hz-photo-flash.is-on {
    animation: hz-photo-flash 0.45s ease-out;
}
@keyframes hz-photo-flash {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 0;
    }
}
/* Docked bar (ISS-033): top-right panel (desktop, landscape, tablets) or a top
   sheet (portrait), away from the rider's play-frame band (left third, lower
   half). « Options » folds the help / ambiance / zoom rows (open by default on
   desktop only). The bar fades out while a drag or pinch is in progress. */
.hz-photo-bar {
    pointer-events: auto;
    position: absolute;
    top: max(12px, env(safe-area-inset-top) + 8px);
    right: max(12px, env(safe-area-inset-right) + 8px);
    width: min(calc(300px * var(--hz-ts-lg)), 46vw);
    max-height: calc(100% - 24px);
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border: 1px solid var(--hz-line);
    border-top: 1px solid var(--journey-accent);
    border-radius: 4px 4px 14px 14px;
    background: var(--hz-panel-strong);
    box-shadow: 0 12px 32px #15243b66;
    color: var(--hz-paper);
    font-size: calc(12px * var(--hz-ts));
    transition: opacity 0.16s ease-out;
}
.hz-photo-bar[hidden],
.hz-photo-show[hidden],
.hz-photo-more[hidden] {
    display: none;
}
.journey[data-photo='drag'] :is(.hz-photo-bar, .hz-photo-show) {
    opacity: 0;
    pointer-events: none;
}
.hz-photo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hz-photo-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--journey-accent);
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.hz-photo-title:focus,
.hz-photo-title:focus-visible {
    outline: none;
    box-shadow: none;
} /* programmatic focus target */
.hz-photo-more {
    display: grid;
    gap: 8px;
}
.hz-photo-help,
.hz-photo-status {
    margin: 0;
    line-height: 1.45;
    color: #fff8eae6;
}
.hz-photo-status {
    min-height: 1.45em;
    overflow-wrap: anywhere;
}
.hz-photo-status:empty {
    display: none;
}
.hz-photo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.hz-photo-label {
    flex-basis: 100%;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.hz-photo button:hover:not(:disabled) {
    border-color: var(--journey-accent);
}
.hz-photo button[aria-pressed='true'] {
    background: var(--journey-accent);
    border-color: var(--journey-accent);
    color: var(--hz-ink);
    box-shadow: inset 0 -3px 0 var(--hz-ink);
}
.hz-photo [data-act^='zoom'] {
    font-size: calc(18px * var(--hz-ts-lg));
    padding: 0;
}
.hz-photo-more-toggle[aria-expanded='true'] {
    border-color: var(--journey-accent);
}
.hz-photo-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.hz-photo-main .is-primary {
    background: var(--journey-accent);
    border-color: var(--journey-accent);
    color: #24374a;
    font-weight: 800;
}
.hz-photo kbd {
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font: inherit;
    font-size: calc(11px * var(--hz-ts));
    letter-spacing: 0;
    opacity: 0.75;
    display: none;
}
.hz-photo button.hz-photo-show {
    pointer-events: auto;
    position: absolute;
    top: max(12px, env(safe-area-inset-top) + 8px);
    right: max(12px, env(safe-area-inset-right) + 8px);
    border-radius: 44px;
    background: var(--hz-panel);
    opacity: 0.82;
    transition: opacity 0.16s ease-out;
}
.hz-photo button.hz-photo-show:is(:hover, :focus-visible) {
    opacity: 1;
}
/* Key hints only where a keyboard is likely (desktop layout, fine pointer). */
@media (min-width: 1024px) and (min-height: 600px) and (pointer: fine) {
    .hz-photo kbd {
        display: inline;
    }
}
@media (min-width: 1024px) and (min-height: 600px) {
    .hz-photo-bar {
        top: max(24px, env(safe-area-inset-top) + 16px);
        right: var(--hz-margin);
        width: calc(330px * var(--hz-ts-lg));
        gap: 10px;
        padding: 14px 16px 12px;
    }
    .hz-photo-main {
        grid-template-columns: 1fr 1fr;
    }
    .hz-photo-main .is-primary {
        grid-column: 1 / -1;
        min-height: 48px;
    }
    .hz-photo button.hz-photo-show {
        top: max(24px, env(safe-area-inset-top) + 16px);
        right: var(--hz-margin);
    }
}
/* Portrait: a sheet across the top (sky), the ambiances scroll sideways. */
@media (max-width: 699.98px) and (max-aspect-ratio: 85/100) {
    .hz-photo-bar {
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-height: 46%;
        padding: max(10px, env(safe-area-inset-top) + 6px) 12px 10px;
        border-width: 0 0 1px;
        border-bottom-color: var(--journey-accent);
        border-radius: 0 0 14px 14px;
    }
    .hz-photo-help {
        display: none;
    }
    .hz-photo-grades {
        flex-wrap: nowrap;
        overflow-x: auto;
        touch-action: pan-x;
    }
    .hz-photo-grades .hz-photo-label {
        display: none;
    }
    .hz-photo-grades button {
        flex: none;
    }
}
@media (max-height: 480px) {
    .hz-photo-help {
        display: none;
    }
    .hz-photo-bar {
        gap: 6px;
        padding: 8px 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .journey:not([data-motion='off']) .hz-photo-flash.is-on {
        animation: none;
    }
    .journey:not([data-motion='off']) :is(.hz-photo-bar, .hz-photo-show) {
        transition: none;
    }
}
.journey[data-motion='on'] .hz-photo-flash.is-on {
    animation: none;
}
.journey[data-motion='on'] :is(.hz-photo-bar, .hz-photo-show) {
    transition: none;
}

/* ---------- Layout polish (R4) ---------- */
/* Pause tip: key hints on keyboards, a touch sentence on coarse pointers. */
.journey-tip-touch {
    display: none;
}
@media (hover: none) and (pointer: coarse) {
    .journey-tip-keys {
        display: none;
    }
    .journey-tip-touch {
        display: inline;
    }
}
/* Results / ending: the actions stay reachable at the bottom of a scrolling sheet. */
.journey-results > .journey-menu-actions,
.journey-ending > .journey-menu-actions {
    position: sticky;
    bottom: -1px;
    z-index: 1;
    margin-inline: -4px;
    padding: 12px 4px 2px;
    background: linear-gradient(rgb(15 26 46 / 0), rgb(15 26 46 / 0.985) 12px);
    /* V5 browser smoke: Chrome sticks inside the sheet's bottom padding, so rows scrolled under it showed below / between the buttons. The shadow fills that padding band. */
    box-shadow: 0 40px 0 0 rgb(15 26 46 / 0.985);
}
/* Mode description line: only for the compact mode row below. */
.journey-mode-desc {
    display: none;
    margin: 0;
    font-size: calc(13px * var(--hz-ts));
    line-height: 1.4;
    color: #fff8eae6;
}
/* Short landscape phones (844×390): the three modes fit on one row, so the
   chapter / biome list starts above the fold; the descriptions stay in the
   accessible name (visually hidden) and the selected one is shown below. */
@media (max-height: 520px) {
    .journey-modes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .journey-mode {
        grid-template-columns: 1fr;
        grid-template-areas: 'icon' 'name';
        justify-items: center;
        row-gap: 4px;
        min-height: 60px;
        padding: 8px 6px;
        text-align: center;
    }
    .journey-mode > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .journey-mode small,
    .journey-mode .journey-level-selected {
        display: none;
    }
    .journey-mode.active::before {
        left: calc(50% - 4.5px);
    }
    .journey-mode-desc {
        display: block;
    }
    .journey-sheet-head .journey-icon-button {
        min-height: 40px;
    }
    .journey-chapter {
        min-height: 52px;
        padding: 7px 10px;
    }
    .journey-premise-text p {
        font-size: calc(16px * var(--hz-ts));
        line-height: 1.45;
    }
}
/* Portrait: premise / ending read inside the 62 % sheet, actions side by side. */
@media (max-width: 699.98px) and (max-aspect-ratio: 85/100) {
    .journey-premise,
    .journey-ending {
        gap: 12px;
    }
    .journey-premise-text {
        gap: 10px;
    }
    .journey-premise-text p {
        font-size: calc(16px * var(--hz-ts-lg));
        line-height: 1.45;
    }
    .journey-premise .journey-menu-actions,
    .journey-results .journey-menu-actions > .journey-menu-row {
        grid-template-columns: 1fr auto;
    }
    .journey-premise .journey-menu-actions {
        display: grid;
    }
    .journey-premise .journey-menu-actions .journey-secondary {
        width: auto;
        padding: 0 18px;
    }
    .journey-ending-line {
        font-size: calc(26px * var(--hz-ts-lg));
    }
    .journey-credits {
        height: 110px;
    }
    /* Zone B story layer: a caption never grows past two thirds of the width's lines. */
    .hz-caption {
        padding: 8px 12px 9px;
    }
}

/* ---------- Accessibility settings (R4, presentation.md §4.9) ----------
   Razor renders data-text / data-contrast / data-palette / data-subs / data-jump
   on .journey from journey-settings-v1; nothing here needs a runtime call. */
.journey[data-text='125'] {
    --hz-ts: 1.25;
    --hz-ts-lg: 1.12;
}
.journey[data-text='150'] {
    --hz-ts: 1.5;
    --hz-ts-lg: 1.25;
}
/* Portrait HUD numbers use the half step (--hz-ts-lg), so zone A keeps its rows
   at 150 %: set in the portrait HUD block above (Flow V4). */
.journey[data-subs='s'] {
    --hz-subs: 0.88;
}
.journey[data-subs='l'] {
    --hz-subs: 1.28;
}

/* Hold / toggle charge hint: HudView.setJumpHint sets `hidden` on the inactive
   span (works even before this sheet loads); these rules mirror it. */
.hz-controls > [hidden] {
    display: none;
}
.hz-hint-toggle {
    display: none;
}
.journey[data-jump='toggle'] .hz-hint-hold {
    display: none;
}
.journey[data-jump='toggle'] .hz-hint-toggle {
    display: inline;
}

/* Colour-blind-safe semantic accents (Okabe–Ito-derived, ≥ 6:1 on the panel);
   each state keeps its word or shape (✓ / ring, dashed closing bar, « Nouveau »). */
.journey[data-palette='colorblind'] {
    --hz-ok: #56b4e9;
    --hz-risk: #e69f00;
    --hz-new: #f0e442;
}
/* Flow V4: the storm's last chance in vermillion (Okabe–Ito); every storm state
   also carries its word and pip count, the hazard marker its icon and word. */
.journey[data-palette='colorblind'] .journey-hud-root {
    --hz-danger: #d55e00;
}

/* High contrast: every HUD zone and menu plate on the strong panel with a paper
   border, secondary text at full paper, HUD opacity locked to 100 %, a 4 px
   combo line (still dashed when closing). */
.journey[data-contrast='high'] {
    --hz-panel: var(--hz-panel-strong);
    --hz-line: rgb(255 248 234 / 0.8);
    --hz-locked: rgb(255 248 234 / 0.86);
}
.journey[data-contrast='high']
    :is(.hz-zone-a, .hz-combo, .hz-notice, .hz-route, .hz-card, .hz-caption, .hz-memory, .hz-controls) {
    background: var(--hz-panel-strong);
    border: 1px solid var(--hz-paper);
}
.journey[data-contrast='high'] .hz-route {
    border-left: 4px solid var(--hz-paper);
}
.journey[data-contrast='high'] :is(.hz-grace, .hz-combo.closing .hz-grace) {
    height: 4px;
}
.journey[data-contrast='high'] .hz-progress {
    height: 3px;
    background: rgb(255 248 234 / 0.45);
}
.journey[data-contrast='high'] .journey-hud-root[data-story='card'] .hz-zone-a {
    opacity: 1;
}
.journey[data-contrast='high'] :is(.hz-status small, .hz-biome, .hz-card small, .hz-dots i, .hz-memories i) {
    opacity: 1;
}
/* Flow V4 HUD blocks on strong plates; the callout name gets its own plate too. */
.journey[data-contrast='high'] :is(.hz-storm-read, .hz-hazard, .hz-trick-points, .hz-trick-tags span) {
    border: 1px solid var(--hz-paper);
}
.journey[data-contrast='high'] .hz-storm[data-warn='0'] .hz-storm-read {
    background: var(--hz-panel-strong);
}
.journey[data-contrast='high'] .hz-trick-name {
    padding: 2px 12px 4px;
    border-radius: 10px;
    background: var(--hz-panel-strong);
    text-shadow: none;
}
.journey[data-contrast='high'] :is(.hz-flow-bar, .hz-storm-bar) {
    background: rgb(255 248 234 / 0.35);
}
.journey[data-contrast='high'] .hz-combo {
    background: rgb(255 248 234 / 0.16);
}
.journey[data-contrast='high'] .journey-sheet {
    background: var(--hz-panel-strong);
    border-color: var(--hz-paper);
}
.journey[data-contrast='high'] .journey-menu-scrim {
    background: rgb(15 26 46 / 0.45);
}
.journey[data-contrast='high'] .journey-pause-overlay {
    background: rgb(15 26 46 / 0.92);
}
.journey[data-contrast='high']
    :is(
        .journey-lede,
        .journey-tip,
        .journey-card p,
        .journey-hold,
        .journey-premise-text p,
        .journey-mode-desc,
        .journey-choice-note,
        .hz-photo-help,
        .hz-photo-status
    ) {
    color: var(--hz-paper);
}
.journey[data-contrast='high']
    :is(
        .journey-mode,
        .journey-level,
        .journey-chapter,
        .journey-mission,
        .journey-tile > button,
        .journey-tile-body,
        .journey-achievements li,
        .journey-score > div,
        .journey-secondary,
        .journey-icon-button,
        .journey-choice button,
        .hz-photo button
    ) {
    border-color: var(--hz-paper);
}
.journey[data-contrast='high'] .journey-header .journey-back {
    text-shadow: none;
    padding-inline: 10px;
    border-radius: 44px;
    background: var(--hz-panel-strong);
}

/* V4 progression (ProgressionAgent): Libre records, medals, run challenges,
   « Défier mon record », Carnet › Records. Medals carry their word and a star
   icon (never colour alone); colours are tints of the existing paper/panel. */
.journey-medal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 2px 10px 2px 6px;
    border-radius: 12px;
    border: 1px solid currentColor;
    color: var(--hz-medal-2);
    background: rgb(15 26 46 / 0.38);
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.journey-medal[data-medal='1'] {
    color: var(--hz-medal-1);
}
.journey-medal[data-medal='2'] {
    color: var(--hz-medal-2);
}
.journey-medal[data-medal='3'] {
    color: var(--hz-medal-3);
}
.journey-medal[data-medal='4'] {
    color: var(--hz-medal-4);
    box-shadow: 0 0 0 2px rgb(255 233 194 / 0.25);
}
.journey-medal.is-small {
    padding: 0 8px 0 4px;
    font-size: calc(10.5px * var(--hz-ts));
}
.journey-score.is-compact dd {
    font-size: calc(17px * var(--hz-ts));
}
.journey-score > div.is-record dd {
    color: var(--hz-new);
}
.journey-level-record {
    display: block;
}
.journey-level .journey-medal {
    margin-top: 4px;
}
.journey-results-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: calc(11.5px * var(--hz-ts));
    letter-spacing: 0.04em;
    color: #fff9eed0;
}
.journey-medal-scale,
.journey-title-record {
    opacity: 0.86;
}
.journey-records {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.journey-records li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--hz-line);
    border-radius: 12px;
    background: rgb(255 248 234 / 0.05);
}
.journey-score.is-lifetime {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.journey[data-contrast='high'] :is(.journey-medal, .journey-records li) {
    border-color: var(--hz-paper);
    background: var(--hz-panel-strong);
}
/* end V4 progression */

/* ---------- V6 results (ISS-037, UiAgent) ----------
   Above the fold at 1280×720 and 390×844: eyebrow, end reason (title), score +
   medal, record pill, « Encore une » and the secondary row, key hints. Then
   compact stats (two columns of label · value rows), next medal bar, challenges,
   rewards, folded XP (<details>). Reward: the score rolls in (odometer), the
   medal pops after it, a new record pill follows; skip / reduced motion = final. */
.journey-results-title {
    font-size: calc(clamp(22px, 2.2vw, 30px) * var(--hz-ts-lg));
    line-height: 1.15;
}
.journey-results-hero {
    display: grid;
    gap: 8px;
}
.journey-results-hero .journey-horizon {
    margin-bottom: 4px;
}
.journey-results-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.journey-results-badges:empty {
    display: none;
}
.journey-results-score {
    justify-self: start;
    display: inline-flex;
    align-items: flex-end;
    gap: 0.22em;
    font-family: var(--hz-display);
    font-weight: 400;
    font-size: calc(clamp(40px, 4.4vw, 56px) * var(--hz-ts-lg));
    line-height: 1;
}
.journey-results-held {
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
.journey-results-hero .journey-record {
    background: var(--hz-medal-3);
    font-size: calc(12px * var(--hz-ts));
    padding: 2px 9px;
}
/* Odometer: each digit is a 1.1 em window on a 0–9 0–9 reel. */
.journey-odo {
    display: inline-flex;
    align-items: flex-end;
    font-variant-numeric: lining-nums tabular-nums;
}
.journey-odo-col {
    display: inline-block;
    height: 1.1em;
    overflow: hidden;
}
.journey-odo-reel {
    display: flex;
    flex-direction: column;
    transform: translateY(calc((10 + var(--d, 0)) * -1.1em));
    animation: journey-odo calc(0.75s + var(--c, 0) * 0.09s) cubic-bezier(0.16, 0.8, 0.24, 1) 0.2s both;
}
.journey-odo-sep {
    display: inline-block;
    width: 0.22em;
}
@keyframes journey-odo {
    from {
        transform: translateY(0);
    }
}
/* Medal: bigger plate in the hero, pops after the score, one sheen; a new medal keeps a soft ring. */
.journey-medal.is-hero {
    position: relative;
    overflow: hidden;
    padding: 4px 12px 4px 8px;
    border-radius: 14px;
    font-size: calc(13px * var(--hz-ts));
}
.journey-medal.is-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: journey-sheen 0.9s ease-out 1.6s both;
    pointer-events: none;
}
.journey-medal.is-hero.is-new {
    box-shadow:
        0 0 0 2px rgb(255 233 194 / 0.3),
        0 0 18px rgb(255 207 107 / 0.35);
}
.journey-results .is-reveal {
    animation: journey-reveal 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 1.1s both;
}
.journey-results .journey-record.is-reveal {
    animation-delay: 1.3s;
}
@keyframes journey-reveal {
    from {
        opacity: 0;
        transform: scale(0.35) rotate(-10deg);
    }
}
@keyframes journey-sheen {
    to {
        transform: translateX(120%);
    }
}
/* Actions: primary full width, replay full width, then Menu | Changer de mode. */
.journey-results-actions {
    display: grid;
    gap: 8px;
}
.journey-results-actions .journey-start {
    width: 100%;
}
.journey-start:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}
.journey-results-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.journey-results-row .journey-secondary {
    min-height: 44px;
    padding: 4px 12px;
    line-height: 1.3;
}
.journey-results-row .journey-replay {
    grid-column: 1 / -1;
}
.journey-results-keys kbd {
    display: inline-block;
    min-width: 1.4em;
    margin-right: 4px;
    padding: 0 5px;
    border: 1px solid var(--hz-line);
    border-bottom-width: 2px;
    border-radius: 4px;
    font:
        700 calc(10.5px * var(--hz-ts)) 'Space Grotesk',
        sans-serif;
    text-align: center;
}
@media (hover: none) and (pointer: coarse) {
    .journey-results-keys {
        display: none;
    }
}
/* Stats: two columns of « label … value » rows; records beaten in the new colour + « record +Δ ». */
.journey-results-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin: 0;
}
.journey-results-stats > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--hz-line);
}
.journey-results-stats dt {
    font-size: calc(11px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    white-space: nowrap;
}
.journey-results-stats .is-record :is(dd, small) {
    color: var(--hz-new);
    opacity: 1;
}
.journey-results-stats .is-wide {
    grid-column: 1 / -1;
}
.journey-medal-next {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: baseline;
    margin: 0;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.04em;
}
.journey-medal-next .journey-bar {
    grid-column: 1 / -1;
}
.journey-results-challenges {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 700;
    letter-spacing: 0.03em;
}
.journey-results-challenges li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
.journey-results-challenges .remaining {
    opacity: 0.88;
}
.journey-results-challenges .journey-mastery-state {
    white-space: nowrap;
}
.journey-results-challenges .journey-mastery-state::before {
    content: none;
}
/* Folded XP details. */
.journey-details {
    border-top: 1px solid var(--hz-line);
}
.journey-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: calc(12px * var(--hz-ts));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.journey-details > summary::-webkit-details-marker {
    display: none;
}
.journey-details > summary:focus-visible {
    outline: 2px solid var(--journey-accent);
    outline-offset: 2px;
    border-radius: 6px;
}
.journey-details-chevron {
    margin-left: auto;
    transition: transform 0.2s var(--hz-ease);
}
.journey-details[open] .journey-details-chevron {
    transform: rotate(180deg);
}
.journey-details .journey-xp {
    padding-bottom: 4px;
}
.journey-results .journey-rewards li {
    padding: 6px 10px;
    font-size: calc(13px * var(--hz-ts));
}
.journey-results.is-skipped :is(.journey-odo-reel, .is-reveal, .journey-medal.is-hero::before) {
    animation: none;
}
/* Short screens: slightly tighter hero. */
@media (max-height: 520px) {
    .journey-results {
        gap: 8px;
    }
    .journey-results-score {
        font-size: calc(34px * var(--hz-ts-lg));
    }
    .journey-results-title {
        font-size: calc(20px * var(--hz-ts-lg));
    }
}
@media (max-width: 699.98px) and (max-aspect-ratio: 85/100) {
    .journey-results {
        gap: 10px;
    }
    .journey-results-score {
        font-size: calc(42px * var(--hz-ts-lg));
    }
}
@media (prefers-reduced-motion: reduce) {
    .journey:not([data-motion='off'])
        :is(.journey-odo-reel, .journey-results .is-reveal, .journey-medal.is-hero::before, .journey-details-chevron) {
        animation: none !important;
        transition: none !important;
    }
}
.journey[data-motion='on']
    :is(.journey-odo-reel, .journey-results .is-reveal, .journey-medal.is-hero::before, .journey-details-chevron) {
    animation: none !important;
    transition: none !important;
}
.journey[data-contrast='high']
    :is(
        .journey-results-stats dt,
        .journey-results-keys,
        .journey-results-held,
        .journey-medal-next small,
        .journey-results-challenges .remaining
    ) {
    opacity: 1;
    color: var(--hz-paper);
}
.journey[data-contrast='high'] .journey-results-stats > div {
    border-bottom-color: var(--hz-paper);
}
/* end V6 results */
.journey[data-contrast='high']
    :is(
        .journey-mode > span,
        .journey-mode small,
        .journey-level small,
        .journey-chapter-meta,
        .journey-profile small,
        .journey-score dt,
        .journey-achievements small,
        .journey-mission-hint,
        .journey-tile small,
        .journey-value,
        .journey-tabs [role='tab'],
        .journey-biome
    ) {
    opacity: 1;
}
.journey[data-contrast='high'] :is(.journey-records li small, .journey-medal-scale, .journey-title-record) {
    opacity: 1;
}