* { box-sizing: border-box; }
/* Clipped, not scrollable: a battle's widen lays the canvas element out wider than the frame it shows (main.ts). */
html, body { margin: 0; width: 100%; height: 100%; overflow: clip; background: #080b10; }
body { color: #f8f8f8; font-family: "Power Green", monospace; }
#game { width: 100%; height: 100%; position: relative; overflow: clip; background: #080b10; }
/* main.ts places the canvas box from screen-geometry.ts (and, in a battle's widen, crops it from the top-left origin). */
#canvas { position: absolute; display: block; transform-origin: 0 0; image-rendering: pixelated; outline: none; touch-action: manipulation; }
#touch-controls { display: none; }
/* Developer controls (?debug only) sit on the canvas's top-right, never over the Nav docked on the left. */
#debug-controls { position: fixed; z-index: 10; top: 4px; right: 4px; }
#asset-error { display: none; position: fixed; z-index: 10; inset: 0; background: #101820ed; place-items: center; padding: 24px; }
#asset-error.active { display: grid; }
#asset-error > div { max-width: 600px; }
#asset-error-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8em; opacity: 0.75; }
#asset-error details { margin-top: 16px; }
#asset-error summary { cursor: pointer; opacity: 0.75; }
#toast { display: none; position: fixed; z-index: 10; bottom: 12px; left: 50%; transform: translateX(-50%); max-width: 90vw; background: #182438; border: 3px solid #c8d8e8; padding: 10px 18px; font-size: 24px; }
#toast.active { display: block; }
.hidden { display: none; }

/* Mobile presentation owns the whole visible viewport. main.ts pins the game
 * screen to the top in portrait and centres it in landscape between the two
 * control gutters (screen-geometry.ts). */
/* The touch controls and the astral sky (owner 2026-10-04: the chosen reference, 1:1).
 *
 * The frame, the d-pad, A and B and the compass key are vector art traced from the reference (src/apps/play/assets/astra-*.svg;
 * crops in output/m5-nav/polish/refcrops/), the app icons are lifted from it (key_icons.py), the sky is Codex's (astra-bg.jpg).
 * Layout (portrait), every length from the d-pad's box D (`--dpad-size`) and the side margin m, measured off the reference:
 * the pad stands m from the left edge; A's halo m from the right (halo = 1.22 × A); B sits so the gap between the pad and B's
 * halo is centred on the screen; A is 0.15 D above the pad's centre line, B 0.21 D below; the compass key stands on the centre
 * line at the screen's centre, a fine gold cross through it. The d-pad is one surface: the thumb's angle from its centre
 * picks the arm (main.ts). The sky animates on the compositor only (transform and opacity of a few fixed layers), behind
 * the game, the Nav and the controls; reduced motion stills it. */
/* ── the sky: behind the game, the Nav and the controls on every screen (on desktop it fills the space round them) ── */
#astra-sky {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #070b24 url('/ui/astra-bg.jpg') center / cover no-repeat;
}
.sky-stars { position: absolute; left: 0; right: 0; will-change: transform; }
.sky-far {
  top: -240px; bottom: 0;
  background-image:
    radial-gradient(1px 1px at 22px 38px, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 132px 92px, #a9c4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 201px 171px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 77px 205px, #9fe7f0 50%, transparent 51%),
    radial-gradient(1px 1px at 178px 22px, #cfe0ff 50%, transparent 51%);
  background-size: 240px 240px;
  opacity: 0.55;
  animation: sky-drift 140s linear infinite;
}
.sky-near {
  top: -180px; bottom: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, #ffffff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 150px 130px, #bfe9ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 95px 165px, #ffffff 50%, transparent 51%);
  background-size: 180px 180px;
  animation: sky-drift-near 80s linear infinite, sky-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes sky-drift { to { transform: translate3d(0, 240px, 0); } }
@keyframes sky-drift-near { to { transform: translate3d(0, 180px, 0); } }
@keyframes sky-twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }
/* Bokeh orbs: soft discs drifting and breathing. */
.sky-orb { position: absolute; border-radius: 50%; will-change: transform, opacity; animation: sky-float 22s ease-in-out infinite alternate; }
.sky-orb.o1 { width: 23vmin; height: 23vmin; left: 6%; top: 18%; background: radial-gradient(circle, rgba(76, 195, 204, 0.38), transparent 68%); }
.sky-orb.o2 { width: 36vmin; height: 36vmin; right: -4%; top: 34%; background: radial-gradient(circle, rgba(91, 120, 240, 0.30), transparent 68%); animation-duration: 28s; animation-delay: -9s; }
.sky-orb.o3 { width: 15vmin; height: 15vmin; left: 44%; top: 62%; background: radial-gradient(circle, rgba(76, 195, 204, 0.32), transparent 68%); animation-duration: 18s; animation-delay: -4s; }
.sky-orb.o4 { width: 28vmin; height: 28vmin; left: -5%; bottom: 6%; background: radial-gradient(circle, rgba(130, 100, 230, 0.26), transparent 68%); animation-duration: 25s; animation-delay: -14s; }
.sky-orb.o5 { width: 18vmin; height: 18vmin; right: 12%; bottom: 14%; background: radial-gradient(circle, rgba(76, 195, 204, 0.30), transparent 68%); animation-duration: 20s; animation-delay: -6s; }
@keyframes sky-float {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  50% { opacity: 1; }
  100% { transform: translate3d(18px, -26px, 0) scale(1.12); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) { .sky-stars, .sky-orb { animation: none; } }

@media (hover: none) and (pointer: coarse) {
  html, body { width: 100dvw; height: 100dvh; }
  /* --game-w: the portrait width the layout is drawn for (the viewport's height while the phone is turned). */
  #game { --game-w: 100dvw; width: 100dvw; height: 100dvh; }
  #canvas { z-index: 2; touch-action: none; }

  #touch-controls {
    --m: 18px;
    --ab: calc(var(--dpad-size) * 0.46);
    --halo: calc(var(--ab) * 1.22);
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--nav-font);
  }
  .touch-button {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    touch-action: none;
    cursor: pointer;
  }

  /* ── the d-pad (vector, traced from the reference: refcrops/dpad.png) ──
     The base (two faint rings, the hub and its star) fills the box D. Each arm is the UP arm's box, 0.297 D wide and
     0.345 D long, its inner edge 0.106 D from the centre, turned about the pad's centre for the others (its hit area turns
     with it). */
  .touch-dpad {
    position: absolute;
    width: var(--dpad-size);
    height: var(--dpad-size);
    pointer-events: auto;
    touch-action: none;
    border-radius: 50%;
    background: url('/ui/astra-ref-dpad.png') center / 100% 100% no-repeat;
  }
  .touch-dpad .dpad-center { display: none; }
  .touch-dpad .touch-button {
    position: absolute;
    left: calc(var(--dpad-size) * 0.3515);
    top: calc(var(--dpad-size) * 0.055);
    width: calc(var(--dpad-size) * 0.297);
    height: calc(var(--dpad-size) * 0.345);
    transform-origin: calc(var(--dpad-size) * 0.1485) calc(var(--dpad-size) * 0.445);
    border-radius: 40% 40% 12% 12%;
    transition: background-color 70ms;
  }
  .touch-dpad .touch-button span { display: none; }
  .touch-dpad .dpad-right { transform: rotate(90deg); }
  .touch-dpad .dpad-down { transform: rotate(180deg); }
  .touch-dpad .dpad-left { transform: rotate(270deg); }
  /* The pressed arm lights from within (the art is the reference's; the light is a soft cyan wash over it). */
  .touch-dpad .touch-button.pressed { background-color: rgba(120, 220, 240, 0.22); box-shadow: 0 0 14px rgba(76, 207, 224, 0.55); }

  /* ── A and B: the reference's glass buttons in their faint halos; the letters are crisp text ── */
  .touch-actions { position: absolute; pointer-events: none; }
  .action-button {
    position: absolute;
    width: var(--ab);
    height: var(--ab);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: url('/ui/astra-ref-a.png') center / 100% 100% no-repeat;
    transition: transform 70ms ease-out, filter 70ms;
  }
  .action-b { background-image: url('/ui/astra-ref-b.png'); }
  /* The reference's buttons carry their letters; the label stays for the screen reader only. */
  .action-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .action-button.pressed { transform: scale(0.94); filter: brightness(1.3) drop-shadow(0 0 10px rgba(76, 207, 224, 0.7)); }

  /* ── the compass key and its fine gold cross ── */
  .touch-compass-lines {
    position: absolute;
    pointer-events: none;
    width: calc(var(--dpad-size) * 0.5);
    height: calc(var(--dpad-size) * 0.78);
    background:
      linear-gradient(90deg, transparent, rgba(217, 178, 95, 0.7) 30% 70%, transparent) center / 100% 1px no-repeat,
      linear-gradient(180deg, transparent, rgba(217, 178, 95, 0.55) 25% 75%, transparent) center / 1px 100% no-repeat;
  }
  .menu-button {
    position: absolute;
    width: 46px;
    height: 46px;
    background: url('/ui/astra-ref-compass.png') center / 100% 100% no-repeat;
    animation: astra-breathe 2.8s ease-in-out infinite;
    transition: transform 70ms ease-out;
  }
  .menu-button span { display: none; }
  .menu-button.pressed { animation: none; filter: brightness(1.25) drop-shadow(0 0 12px rgba(76, 207, 224, 0.85)); }
  @keyframes astra-breathe {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(76, 207, 224, 0.35)); }
    50% { filter: drop-shadow(0 0 9px rgba(76, 207, 224, 0.7)); }
  }
}

/* The phone layout: portrait only (owner 2026-10-04; main.ts `lockPortrait` asks the browser to lock it, else the phone's own lock). */
@media (hover: none) and (pointer: coarse) {
  /* The d-pad's box, which the Nav band (nav.css) ends at. */
  /* rs: one reference pixel (the reference phone is 935 px wide). Each control's box: its measured centre ± its cut radius. */
  #game {
    --rs: calc(var(--game-w) / 935);
    --dpad-size: calc(344 * var(--rs));
    --dpad-bottom: calc(60 * var(--rs) + env(safe-area-inset-bottom));
  }
  #astra-sky { top: var(--screen-height, 75dvw); }

  /* ── the Astra Nav on the phone (the owner's chosen reference, 1:1) ──
     The card IS the reference's frame (astra-frame.svg, vector, 900×560: its window 40..860 × 56..526), at that proportion;
     the padding (shares of the width) puts the content in the window. It rises 22 px into the game screen, as the reference's
     does, so the device reads as part of the game. Here, not in nav.css: these art URLs are served files esbuild cannot bundle.
     Collapsed, the band shows the header and the apps; the foot plate (the handle) expands it to the upper screen. */
  #game .nav[data-mode="band"] .nav-shell { display: none; }
  /* The card is the reference's own bezel, cut from its pixels (astra-bezel.png, 920×588: output/m5-nav/polish/cut_bezel_ref.py),
     in four pieces so it grows with its two screens: the crown (rows 0–200), the star wings (220–360, centred), the foot
     (360–588), and the plain rail (200–220) stretched in the two gaps (a straight gold bar stretches without loss). At 588·s
     tall the pieces are the original. s = card width / 920. The padding puts the content in its window (49, 71) – (869, s·41
     from the bottom), whose glass is ::before. The card rises 75·s into the game screen, as the reference's crown and top rail
     overlap its scene. */
  #game .nav[data-mode="band"] .nav-device {
    --s: calc((var(--game-w) - 16px) / 920);
    position: relative;
    isolation: isolate;
    width: auto;
    height: auto;
    min-height: calc(588 * var(--s));
    margin: calc(-75 * var(--s)) 8px 0;
    padding: calc(71 * var(--s) + 2px) calc(51 * var(--s) + 4px) calc(41 * var(--s) + 4px) calc(49 * var(--s) + 4px);
    gap: 4px;
    border: 0;
    border-radius: 0;
    background:
      url('/ui/astra-bezel-top.png') 0 0 / 100% auto no-repeat,
      url('/ui/astra-bezel-wing.png') 0 50% / 100% auto no-repeat,
      url('/ui/astra-bezel-bottom.png') 0 100% / 100% auto no-repeat,
      url('/ui/astra-bezel-rail.png') 0 calc(200 * var(--s) - 1px) / 100% max(0px, calc(50% - 270 * var(--s) + 2px)) no-repeat,
      url('/ui/astra-bezel-rail.png') 0 calc(100% - 228 * var(--s) + 1px) / 100% max(0px, calc(50% - 298 * var(--s) + 2px)) no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(2, 5, 18, 0.65));
    animation: nav-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* In a battle the card slides down off the game screen and docks 14 px above the controls, so the whole battle (the frame and
     its message band) shows; leaving the battle it slides back up into the screen. (Its height follows its content, taller in
     battle, so it docks by its bottom edge rather than by a computed offset.) */
  #game[data-battle="true"] .nav[data-mode="band"] .nav-device {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 14px;
    margin: 0;
    animation: nav-drop 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes nav-drop { from { transform: translateY(-120px); } to { transform: none; } }
  @keyframes nav-rise { from { transform: translateY(120px); } to { transform: none; } }
  #game .nav[data-mode="band"] .nav-device::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: calc(49 * var(--s)); right: calc(51 * var(--s)); top: calc(71 * var(--s)); bottom: calc(41 * var(--s));
    border-radius: calc(10 * var(--s));
    background: linear-gradient(180deg, #0c1632, #11204a);
    pointer-events: none;
  }
  #game .nav[data-mode="band"][data-expanded="true"] .nav-device { height: calc(100% + 75 * var(--s) - 14px); }
  /* The upper screen: shown on the phone above the hinge (walking: a compact trainer card; in a battle: the battle's own
     upper view, compact, filling the room between the message band and the controls). The status header's place and clock
     are the hinge's. */
  #game .nav[data-mode="band"] .nav-glass-upper .nav-header { display: none; }
  /* The upper screen slides out over the game view (owner, 2026-10-13): the device shows the hinge and the lower screen, at
     the desktop's proportions, and the lens in the hinge (nav.ts `data-upper`) brings the upper screen out of the device's
     crown to cover the game screen, or puts it away. A screen whose main content is up there (`ScreenView.primary`) and the
     boot face open it by themselves. It is its own glass panel, gold-edged, as tall as the game screen above the device. */
  #game .nav[data-mode="band"] .nav-glass-upper {
    position: absolute;
    z-index: 3;
    left: calc(49 * var(--s));
    right: calc(51 * var(--s));
    bottom: calc(100% - 10 * var(--s));
    height: calc(var(--screen-height, 75dvw) - 65 * var(--s) - 8px);
    min-height: 0;
    max-height: none;
    flex: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 8px 8px 12px;
    border: 2px solid #d9b25f;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 22, 50, 0.97), rgba(17, 32, 74, 0.97)) !important;
    box-shadow: 0 0 0 1px #6e4f1c, 0 10px 28px rgba(2, 5, 18, 0.7) !important;
    clip-path: inset(100% 0 0 0 round 14px);
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 220ms ease-in, transform 220ms ease-in, opacity 180ms ease-in, visibility 0s linear 220ms;
  }
  #game .nav[data-mode="band"][data-upper="open"] .nav-glass-upper {
    clip-path: inset(0 0 0 0 round 14px);
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: clip-path 280ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease-out, visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) { #game .nav[data-mode="band"] .nav-glass-upper { transition: none !important; } }
  /* The lens is the upper screen's key: lit while the screen is out. */
  #game .nav[data-mode="band"] .nav-lens { cursor: pointer; pointer-events: auto; transition: box-shadow 160ms; }
  #game .nav[data-mode="band"][data-upper="open"] .nav-lens { box-shadow: 0 0 0 2px #f3d27e, 0 0 0 3px #6e4f1c, 0 0 14px rgba(120, 235, 250, 0.95); }
  /* The signed-in player in the hinge's left corner (the carrier's place on a phone's status bar), in place of the label. */
  #game .nav[data-mode="band"] .nav-hinge { position: relative; }
  #game .nav[data-mode="band"] .nav-hinge[data-user="true"] .nav-hinge-context::before { content: none; }
  #game .nav[data-mode="band"] .nav-hinge-user {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%); max-width: 38%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; letter-spacing: 0.06em; color: #dfe7f8;
  }
  /* Collapsed, the device never reaches the controls: capped at the room between the game screen and the d-pad box, its lower
     pane scrolls inside the frame (a six-member party, a long Summary page). Expanded (the foot plate's handle), it covers them. */
  #game:not([data-battle="true"]) .nav[data-mode="band"]:not([data-expanded="true"]) .nav-device { max-height: calc(100dvh - var(--screen-height) - var(--dpad-size) - var(--dpad-bottom) + 75 * var(--s) - 10px); }
  #game .nav[data-mode="band"] .nav-glass-lower { min-height: 0; overflow-y: auto; }
  /* In a battle: the battlers as a 2×2 grid of chips (yours, then the foe's: icon, name and level over the HP bar and its
     numbers; types live in Info), and the prompt on one line, so the card fits between the message band and the controls. */
  #game[data-battle="true"] .nav[data-mode="band"] .nav-upper { gap: 4px; padding: 2px 4px 0; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battlers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: 'icon head' 'icon bar';
    align-items: center;
    gap: 1px 6px;
    min-height: 0;
    padding: 4px 6px;
    border: 1px solid rgba(76, 170, 214, 0.3);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(34, 70, 110, 0.5), rgba(14, 32, 62, 0.75));
  }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler[data-side="foe"] { border-color: rgba(214, 120, 120, 0.32); }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler[data-marked="true"] { border-color: rgba(76, 207, 224, 0.85); }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler > .nav-icon { grid-area: icon; width: 26px; height: 26px; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-head { grid-area: head; display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-name { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-level { font-size: 9.5px; opacity: 0.8; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-gender { font-size: 10px; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-bar { grid-area: bar; display: flex; align-items: center; gap: 4px; min-width: 0; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-bar .nav-hp { flex: 1 1 auto; height: 4px; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-hp { font-size: 9px; opacity: 0.85; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-hp-label,
  #game[data-battle="true"] .nav[data-mode="band"] .nav-battler-types { display: none; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-upper > .nav-texts { padding: 2px 0 0; gap: 0; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-upper > .nav-texts .nav-text { font-size: 13px; line-height: 1.3; }
  #game[data-battle="true"] .nav[data-mode="band"] .nav-upper > .nav-texts .nav-text + .nav-text { display: none; }
  #game .nav[data-mode="band"] .nav-upper { flex: 0 0 auto; padding: 4px 6px 2px; gap: 6px; overflow: visible; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid rgba(76, 170, 214, 0.3);
    border-radius: 9px;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0 22%, transparent 34%), linear-gradient(180deg, rgba(34, 70, 110, 0.5), rgba(14, 32, 62, 0.75));
  }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-title,
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-stats { display: none; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-body { display: contents; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-portrait { width: 40px; height: 40px; padding: 0; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-portrait .nav-icon,
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-portrait .nav-image { width: 100%; height: 100%; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-lines { gap: 1px; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-line { font-size: 11px; line-height: 1.25; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-line:first-child { font-size: 15px; font-weight: 600; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-line-label { display: none; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-icons { display: grid; grid-template-columns: repeat(4, 16px); gap: 3px; padding: 0; background: none; border: 0; }
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-icons .nav-icon,
  #game .nav[data-mode="band"] .nav-upper > .nav-card[data-style="identity"] .nav-card-icons .nav-canvas { width: 16px; height: 16px; }
  #game .nav[data-mode="band"] .nav-upper > .nav-party { flex: 0 0 auto; gap: 4px; padding: 3px 6px 5px; }
  #game .nav[data-mode="band"] .nav-upper > .nav-party .nav-chip { gap: 3px; }
  #game .nav[data-mode="band"] .nav-upper > .nav-party .nav-chip .nav-icon { height: 30px; }
  #game .nav[data-mode="band"] .nav-glass { background: none; box-shadow: none; border-radius: 0; }
  #game .nav[data-mode="band"] .nav-glass::after { display: none; }

  /* The header: "ASTRA NAV" letterspaced, the gem centred, the clock, signal and battery; a fine rule under it. */
  #game .nav[data-mode="band"] .nav-hinge {
    min-height: 0;
    height: 25px;
    padding: 0 10px;
    border: 0;
    border-bottom: 1px solid rgba(76, 150, 214, 0.32);
    background: none;
    letter-spacing: 0.34em;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(200, 214, 245, 0.85);
  }
  #game .nav[data-mode="band"] .nav-hinge-context { font-size: 0; letter-spacing: 0; }
  #game .nav[data-mode="band"] .nav-hinge-context::before { content: 'ASTRA NAV'; font-size: 10.5px; letter-spacing: 0.34em; }
  #game .nav[data-mode="band"] .nav-hinge-owner { display: none; }
  #game .nav[data-mode="band"] .nav-lens { width: 22px; height: 22px; background: radial-gradient(circle at 40% 35%, #c4f8ff 0, #43cfe0 35%, #0f7d8f 70%); border-radius: 50%; box-shadow: 0 0 0 2px #d9b25f, 0 0 0 3px #6e4f1c, 0 0 8px rgba(76, 207, 224, 0.55); }
  #game .nav[data-mode="band"] .nav-hinge-clock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0.02em; color: #dfe7f8; }
  #game .nav[data-mode="band"] .nav-hinge-clock::after {
    content: '';
    width: 38px;
    height: 12px;
    background: url('/ui/astra-wifi.png') left center / auto 11px no-repeat, url('/ui/astra-battery.png') right center / auto 10px no-repeat;
    opacity: 0.85;
  }

  /* The apps: frosted glass tiles with a fine cyan edge and a soft sheen, the icon over its label and a thin chevron. */
  /* The grid fills the window under the header (the reference's tall tiles). */
  #game .nav[data-mode="band"] .nav-glass-lower { flex: 1 1 auto; }
  #game .nav[data-mode="band"] .nav-lower { flex: 1 1 auto; padding: 0 0 2px; gap: 2%; }
  /* Every three-wide menu is laid out as Home's (owner, 2026-10-13): two equal rows of three filling the lower screen, the
     same key shape on every page and every menu (a page of four keeps the rows' height), never a scroll. Longer menus are
     paged with dots (nav.ts `paged`). A key's detail line ("0 of 5") sits under its label, small, on one line. */
  #game .nav[data-mode="band"] .nav-lower > .nav-tiles { flex: 1 1 auto; grid-auto-rows: minmax(60px, 1fr); gap: 6px; }
  #game .nav[data-mode="band"] .nav-lower > .nav-tiles[data-cols="3"]:not([data-sprites]) {
    grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); min-height: 0; overflow: hidden;
  }
  #game .nav[data-mode="band"] .nav-lower > .nav-tiles[data-cols="3"]:not([data-sprites]) .nav-tile { min-height: 0; overflow: hidden; }
  #game .nav[data-mode="band"] .nav-lower > .nav-tiles[data-cols="3"]:not([data-sprites]) .nav-tile-detail {
    display: none;
  }
  #game .nav[data-mode="band"] .nav-lower > .nav-dots { flex: none; }
  #game .nav[data-mode="band"] .nav-tile {
    min-height: 0;
    padding: 5px 4px 5px;
    gap: 3px;
    border: 1px solid rgba(76, 170, 214, 0.34);
    border-radius: 9px;
    background:
      linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0 22%, transparent 34%),
      linear-gradient(180deg, rgba(34, 70, 110, 0.62), rgba(14, 32, 62, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 10px rgba(30, 110, 170, 0.12);
    font-size: 13px;
    font-weight: 600;
    color: #e6eeff;
  }
  #game .nav[data-mode="band"] .nav-tile .nav-disc { width: 27px; height: 27px; }
  #game .nav[data-mode="band"] .nav-tile .nav-glyph { filter: none; }
  #game .nav[data-mode="band"] .nav-tile .nav-label { display: inline-flex; align-items: center; gap: 9px; overflow: visible; }
  /* The chevron: its 45° turn reaches 2px past its box, so a 2px margin keeps the turned corner inside the label (WebKit counts it as overflow). */
  #game .nav[data-mode="band"] .nav-tile .nav-label::after { content: ''; width: 6px; height: 6px; margin-right: 2px; border-top: 1.6px solid rgba(220, 232, 255, 0.85); border-right: 1.6px solid rgba(220, 232, 255, 0.85); transform: rotate(45deg); }
  /* The label carries the chevron (the reference's tiles); the wide keys' own trailing chevron would double it. */
  #game .nav[data-mode="band"] .nav-tile .nav-chevron { display: none; }
  /* A Pokédex tile opens nothing: no chevron; its sprite fills the tile's top. */
  #game .nav[data-mode="band"] .nav-tile[data-sprite="true"] .nav-label::after,
  #game .nav[data-mode="band"] .nav-tiles:has(> .nav-tile[data-sprite="true"]) .nav-tile .nav-label::after { content: none; }
  #game .nav[data-mode="band"] .nav-tile[data-focus="true"] { border-color: rgba(76, 207, 224, 0.85); box-shadow: 0 0 10px rgba(76, 207, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

  .touch-dpad { left: calc(32.5 * var(--rs)); bottom: var(--dpad-bottom); }
  .touch-actions { inset: 0; }
  .action-button { width: calc(176 * var(--rs)); height: calc(176 * var(--rs)); }
  .action-a { left: calc(702.6 * var(--rs)); bottom: calc(205.7 * var(--rs) + env(safe-area-inset-bottom)); }
  .action-b { left: calc(567.7 * var(--rs)); bottom: calc(85.9 * var(--rs) + env(safe-area-inset-bottom)); }
  .touch-compass-lines { display: none; }
  .menu-button { width: calc(224 * var(--rs)); height: calc(224 * var(--rs)); left: calc(356.4 * var(--rs)); bottom: calc(132.2 * var(--rs) + env(safe-area-inset-bottom)); }
}