/* =====================================================================
   Rustwing menus (UI developer, slice B4). Loaded after base.css.
   Sources: docs/design/ui-screens.md (every box measured at 375 x 667 "S"
   and 390 x 844 "L"), art-direction.md sections 4 and 10, tokens.css.

   Laws kept here (GOAL.md section 4; ui-screens.md 1.1 to 1.8):
   - every touch target is at least 44 x 44 pt and 8 pt from its neighbours;
   - nothing scrolls on a 375 x 667 screen: long lists page with 44 pt arrows;
   - one lit (cyan) primary per screen; claims are gold; destructive arms itself;
   - one modal surface at a time; controls under it take no pointer events;
   - entrances move, they never start from opacity 0; only transform and
     opacity animate; Reduced Motion turns every movement into a cut;
   - the L sizes (390 x 844 and taller) use the larger boxes of the spec
     through @media (min-height: 800px); S keeps the compact ones.
   ===================================================================== */

/* ---------- The menu frame (ui-screens.md 1.1) ---------- */
.rw-menu {
  padding: calc(var(--safe-top) + 4px) calc(var(--safe-right) + var(--rw-gutter)) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + var(--rw-gutter));
  gap: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(63, 230, 255, 0.06), transparent 60%), var(--rw-night);
}
.rw-tabscreen { padding-bottom: calc(var(--rw-tabbar-h) + var(--safe-bottom) + 8px); }
.rw-menu > * { flex: 0 0 auto; }
.rw-menu p, .rw-menu h1, .rw-menu h2, .rw-menu h3, .rw-modal p, .rw-modal h1, .rw-modal h2, .rw-modal h3 { margin: 0; }
.rw-menu__topbar { height: var(--rw-tap); min-height: var(--rw-tap); margin-bottom: 4px; gap: 8px; position: relative; z-index: 2; }
.rw-topbar__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rw-titlerow { height: 36px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rw-titlerow .rw-h1 { white-space: nowrap; }
.rw-fill { flex: 1 1 auto !important; min-height: 0; }
.rw-view { display: flex; flex-direction: column; min-height: 0; }
.rw-view > * { flex: 0 0 auto; }
.rw-ink { color: var(--rw-ink); }
.rw-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rw-num { font-variant-numeric: tabular-nums; }
.rw-reason { min-height: 18px; font: 500 var(--rw-fs-small)/var(--rw-lh-small) var(--rw-font-body); color: var(--rw-ink-dim); }

/* Buttons that are not chamfered boxes (tabs, chips, cards keep their own surfaces). */
.rw-btn--tab, .rw-btn--chip, .rw-btn--seg, .rw-btn--card { --border: transparent; --fill: transparent; }
.rw-btn--card {
  --c: var(--rw-cut-s); --fill: var(--rw-panel-2); --border: var(--rw-line);
  padding: 0; text-transform: none; letter-spacing: 0; color: var(--rw-ink); font: 500 var(--rw-fs-body)/var(--rw-lh-body) var(--rw-font-body);
}
.rw-btn--card:active:not(:disabled) { --fill: var(--rw-panel-3); transform: none; }
/* A disabled card dims only its picture; its words stay readable (ui-screens.md 1.3, art-direction.md 2.5). */
.rw-btn--card:disabled .rw-frame, .rw-btn--card:disabled .rw-emblem { opacity: 0.6; }
.rw-btn--text:disabled { color: var(--rw-ink-faint); }
.rw-btn--gold { --fill: var(--rw-gold); --border: var(--rw-gold); color: var(--rw-ink-dark); filter: drop-shadow(0 0 8px rgba(255, 201, 60, 0.35)); }
.rw-btn--gold:disabled { --fill: var(--rw-panel-3); --border: var(--rw-panel-3); color: var(--rw-ink-dim); filter: none; }
.rw-btn--primary .rw-cost, .rw-btn--secondary .rw-cost { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.rw-btn__costs { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
.rw-iconbtn { width: var(--rw-tap); height: var(--rw-tap); }

/* ---------- Tab bar (ui-screens.md 1.2): 5 cells, 56 pt hit boxes 8 pt apart ---------- */
.rw-tabbar--menu {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; justify-content: stretch;
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); z-index: 3;
}
.rw-tabbar--menu { box-sizing: border-box; }
.rw-tab__cell { height: calc(var(--rw-tabbar-h) - 1px); padding: 4px 4px 3px; display: flex; min-width: 0; }
.rw-tabbar--menu .rw-tab {
  width: 100%; height: var(--rw-tab-hit-h); min-width: 0; min-height: var(--rw-tab-hit-h); padding: 4px 0;
  justify-content: flex-start; gap: 6px; flex: 1 1 auto;
}
.rw-tabbar--menu .rw-tab::before, .rw-tabbar--menu .rw-tab::after { clip-path: none; }
.rw-tabbar--menu .rw-tab[data-state="selected"]::before { content: ""; position: absolute; inset: auto; top: -5px; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: var(--rw-cyan); z-index: 1; }
.rw-tabbar--menu .rw-tab[data-state="selected"]::after { background: transparent; }
.rw-tab__label { font: 600 var(--rw-fs-tab)/var(--rw-lh-tab) var(--rw-font-display); letter-spacing: var(--rw-track-caps); }
/* Locked tabs dim further, so the selected tab is the loudest item in the bar (FL-32). */
.rw-tab[data-state="locked"] .rw-emblem { opacity: 0.4; }
/* The DAILY calendar is the brightest painting in the bar (pale paper, a large gold star): darkened to sit with the
   others; a repaint with darker paper and a smaller star is art item FL-32. The selected DAILY tab shows it whole. */
.rw-tabbar--menu [data-testid="tab-daily"] .rw-emblem:not(.rw-tab__lock) img { filter: brightness(0.72); }
.rw-tabbar--menu [data-testid="tab-daily"][data-state="selected"] .rw-emblem:not(.rw-tab__lock) img { filter: none; }
.rw-tab__lock { position: absolute; right: -6px; bottom: -4px; opacity: 1 !important; }

/* ---------- Red dots (art-direction.md 4.10) ---------- */
.rw-dot { z-index: 2; }
.rw-dot--count {
  width: auto; min-width: var(--rw-badge-count); height: var(--rw-badge-count); top: -6px; right: -10px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--rw-font-display); color: #FFFFFF; letter-spacing: 0;
}
.rw-tab__icon { position: relative; display: inline-flex; }

/* ---------- Currency chips (ui-screens.md 1.2) ---------- */
.rw-chips { display: flex; gap: 8px; align-items: center; }
.rw-chip { padding: 4px 0; justify-content: flex-start; font: 700 16px/1 var(--rw-font-display); text-transform: none; letter-spacing: 0; color: var(--rw-ink); }
.rw-chip[data-currency="credits"] { width: 96px; }
.rw-chip[data-currency="scrap"] { width: 88px; }
.rw-chip[data-currency="cores"] { width: 72px; }
.rw-chip .rw-chip__pill { width: 100%; padding: 0 8px 0 2px; gap: 4px; justify-content: space-between; position: relative; }
.rw-chip .rw-chip__pill .rw-emblem { margin-left: -6px; }
.rw-chip__num { flex: 1 1 auto; text-align: right; white-space: nowrap; }
.rw-chip[data-flash="1"] .rw-chip__pill { background: rgba(255, 201, 60, 0.30); }
/* The hangar's chips carry their words (owner decision 33): CREDITS, SALVAGE, CORES under each number, so the top bar
   is 12 pt taller there (56 pt) and every chip stays a 56 pt tall target. */
.rw-chips--captioned .rw-chip { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; height: 56px; min-height: 56px; padding: 2px 0; }
.rw-chip__cap { display: block; font: 600 12px/12px var(--rw-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rw-ink-dim); text-align: right; padding-right: 8px; }
.rw-hangar .rw-menu__topbar { height: 56px; min-height: 56px; }

/* ---------- Rarity frames, tier words, pips, tags (art-direction.md 4.7) ---------- */
.rw-frame {
  --tc: var(--rw-r-rusted);
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--rw-panel-3); border: 1px solid var(--tc); box-sizing: border-box;
}
.rw-frame__in { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.rw-frame__orn { position: absolute; inset: 2px; pointer-events: none; }
.rw-frame[data-rarity="patched"] { --tc: var(--rw-r-patched); border-width: 1.5px; }
.rw-frame[data-rarity="patched"] .rw-frame__orn { background: radial-gradient(circle, var(--tc) 0 2px, transparent 2.5px) 0 0 / 8px 8px no-repeat, radial-gradient(circle, var(--tc) 0 2px, transparent 2.5px) 100% 100% / 8px 8px no-repeat; }
.rw-frame[data-rarity="steel"] { --tc: var(--rw-r-steel); border-width: 2px; }
.rw-frame[data-rarity="chrome"] { --tc: var(--rw-r-chrome); border-width: 2px; border-image: linear-gradient(135deg, #FFFFFF, var(--rw-r-chrome), #8FA3BD) 1; overflow: hidden; }
.rw-frame[data-rarity="neon"] { --tc: var(--rw-r-neon); border-width: 2px; }
/* The neon glow (art-direction.md 4.7) is drawn once on a layer and breathes 70 to 100 percent through opacity
   only, so it never repaints (only transform and opacity animate, ui-screens.md 1.8). */
.rw-frame[data-rarity="neon"]::before { content: ""; position: absolute; inset: -2px; box-shadow: var(--rw-shadow-glow-neon); pointer-events: none; animation: rw-neon-breathe 2.4s ease-in-out infinite alternate; }
.rw-frame[data-rarity="quantum"] { --tc: var(--rw-r-quantum); border: 2px solid transparent; background: linear-gradient(var(--rw-panel-3), var(--rw-panel-3)) padding-box, var(--rw-r-quantum-sheen) border-box; box-shadow: var(--rw-shadow-glow-quantum); }
.rw-frame[data-rarity="steel"] .rw-frame__orn, .rw-frame[data-rarity="chrome"] .rw-frame__orn, .rw-frame[data-rarity="neon"] .rw-frame__orn, .rw-frame[data-rarity="quantum"] .rw-frame__orn {
  background:
    linear-gradient(var(--tc), var(--tc)) 0 0 / 8px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) 0 0 / 2px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) 100% 0 / 8px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) 100% 0 / 2px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) 0 100% / 8px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) 0 100% / 2px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) 100% 100% / 8px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) 100% 100% / 2px 8px no-repeat;
}
.rw-frame[data-rarity="chrome"]::after { content: ""; position: absolute; left: -60%; top: -30%; width: 40%; height: 160%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(0) rotate(20deg); animation: rw-sheen 600ms var(--rw-ease-out) 1 both; pointer-events: none; }
.rw-frame[data-rarity="quantum"]::after { content: ""; position: absolute; top: -4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: var(--rw-r-quantum); transform: rotate(45deg); pointer-events: none; }
@keyframes rw-sheen { from { transform: translateX(0) rotate(20deg); } to { transform: translateX(400%) rotate(20deg); } }
@keyframes rw-neon-breathe { from { opacity: 0.7; } to { opacity: 1; } }
.rw-tierword { font: 600 13px/18px var(--rw-font-body); color: var(--rw-r-rusted); }
.rw-tierword[data-rarity="patched"] { color: var(--rw-r-patched); }
.rw-tierword[data-rarity="steel"] { color: var(--rw-r-steel); }
.rw-tierword[data-rarity="chrome"] { color: var(--rw-r-chrome); }
.rw-tierword[data-rarity="neon"] { color: var(--rw-r-neon); }
.rw-tierword[data-rarity="quantum"] { color: var(--rw-r-quantum); }
.rw-pips { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; --tc: var(--rw-r-rusted); }
.rw-pips[data-rarity="patched"] { --tc: var(--rw-r-patched); }
.rw-pips[data-rarity="steel"] { --tc: var(--rw-r-steel); }
.rw-pips[data-rarity="chrome"] { --tc: var(--rw-r-chrome); }
.rw-pips[data-rarity="neon"] { --tc: var(--rw-r-neon); }
.rw-pips[data-rarity="quantum"] { --tc: var(--rw-r-quantum); }
/* An up-pointing chevron, the shape of the pick card's rank pips (ui-screens.md 1.3: rank pips are "as tier
   pips"); a down chevron after the tier word read as a dropdown caret. */
.rw-pip { display: inline-block; width: 8px; height: 6px; background: var(--tc); clip-path: polygon(0 100%, 50% 50%, 100% 100%, 100% 60%, 50% 0, 0 60%); }
.rw-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 0; font: 600 12px/14px var(--rw-font-display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.rw-tag--mint { color: var(--rw-mint); background: rgba(92, 255, 160, 0.15); }
.rw-tag--cyan { color: var(--rw-cyan); background: rgba(63, 230, 255, 0.15); }
.rw-tag--crimson { color: var(--rw-crimson-ink); background: rgba(255, 107, 139, 0.15); }
.rw-tag--dim { color: var(--rw-ink-dim); background: rgba(167, 178, 210, 0.15); }
.rw-checktag { font: 600 12px/20px var(--rw-font-display); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 6px; height: 20px; background: rgba(167, 178, 210, 0.12); color: var(--rw-ink); }
.rw-checktag[data-check="strong"] { color: var(--rw-mint); background: rgba(92, 255, 160, 0.15); }
.rw-checktag[data-check="weak"] { color: var(--rw-crimson-ink); background: rgba(255, 107, 139, 0.15); }
.rw-stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One verdict for a part's rows (U2, shell.js verdictRows): the plain-words sentence wraps to two lines instead of clipping. */
.rw-stat.rw-verdict { white-space: normal; text-overflow: clip; }

/* ---------- Modal surfaces (ui-screens.md 1.3 and 1.4; widgets/sheet.js) ---------- */
.rw-modal-layer { position: absolute; inset: 0; z-index: var(--rw-z-panel); pointer-events: none; }
.rw-modal-layer--dialog { z-index: var(--rw-z-modal); }
.rw-modal__scrim { position: absolute; inset: 0; background: var(--rw-scrim); pointer-events: auto; }
.rw-modal-open > :not(.rw-modal-layer) [data-control], .rw-modal-open > [data-control] { pointer-events: none !important; }
.rw-modal {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  background: var(--rw-panel); color: var(--rw-ink);
}
.rw-modal--sheet, .rw-modal--dock {
  left: 0; right: 0; bottom: 0; max-height: 85%;
  padding: 0 calc(var(--safe-right) + var(--rw-gutter)) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + var(--rw-gutter));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  border-top: 1px solid var(--rw-line);
  animation: rw-sheet-in var(--rw-dur-base) var(--rw-ease-out) both;
}
.rw-modal--dock { background: rgba(17, 22, 42, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rw-modal--dialog {
  left: calc(var(--safe-left) + 16px); right: calc(var(--safe-right) + 16px); top: 50%; max-height: calc(100% - 32px);
  transform: translateY(-50%); padding: 16px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  animation: rw-dialog-in var(--rw-dur-base) var(--rw-ease-out) both;
}
@keyframes rw-sheet-in { from { transform: translateY(24px); opacity: 0.85; } to { transform: none; opacity: 1; } }
@keyframes rw-dialog-in { from { transform: translateY(calc(-50% + 24px)); opacity: 0.85; } to { transform: translateY(-50%); opacity: 1; } }
.rw-modal__head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 10px; flex: 0 0 auto; gap: 8px; }
.rw-modal__grabber { position: absolute; top: -6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--rw-line-strong); }
.rw-modal__title { text-transform: uppercase; letter-spacing: var(--rw-track-caps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-modal__close { width: 44px; height: 44px; padding: 0; font: 400 28px/1 var(--rw-font-display); color: var(--rw-ink-dim); flex: 0 0 auto; }
.rw-modal__body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rw-modal__head + .rw-modal__body { margin-top: 8px; }
.rw-modal--dock .rw-modal__head { margin-top: 2px; }
.rw-modal--dock .rw-modal__head + .rw-modal__body { margin-top: 4px; }
.rw-modal--dock .rw-modal__grabber { top: 2px; }
.rw-dock__tune { margin-top: 2px; }

/* ---------- Hangar (ui-screens.md 3.2) ---------- */
.rw-hangar { padding-bottom: calc(var(--rw-tabbar-h) + var(--safe-bottom) + 12px); background: radial-gradient(ellipse at 50% 38%, #142040 0%, var(--rw-night) 55%, var(--rw-void) 100%); }
.rw-hangar__scene { position: absolute; inset: 0; background-size: cover; background-position: center 38%; z-index: -1; }
.rw-hangar__stage { position: relative; flex: 1 1 auto !important; min-height: 160px; }
/* the currency legend under the chips (FL-31): over the stage's top edge, taking no layout and no taps */
.rw-hangar__legend { position: absolute; left: calc(var(--safe-left) + 16px); right: calc(var(--safe-right) + 16px); top: calc(var(--safe-top) + 68px);
  margin: 0; text-align: right; font: 500 12px/16px var(--rw-font-body); color: var(--rw-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(5, 6, 13, 0.95); pointer-events: none; z-index: 1; }
.rw-hangar__ship { position: absolute; inset: 8px 16px; display: flex; align-items: center; justify-content: center; }
.rw-hangar__ship canvas { max-width: 100%; max-height: 100%; display: block; }
.rw-hangar__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 120px; margin-top: 8px; }
.rw-hangar__feedcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rw-hangar__claim { min-height: 44px; height: 44px; font-size: 15px; width: 100%; padding: 0 8px; gap: 6px; }
.rw-hangar__claim[disabled] .rw-emblem { opacity: 0.5; }
.rw-hangar__next { --fill: rgba(25, 32, 57, 0.92); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 12px; height: 120px; text-align: left; min-width: 0; }
.rw-hangar__nexthead { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 20px; gap: 4px; }
.rw-hangar__nexthead .rw-label { white-space: nowrap; letter-spacing: 0.06em; }
.rw-hangar__nexthead .rw-checktag { font-size: 12px; padding: 0 4px; letter-spacing: 0.02em; }
/* The card's rows (first-session-ui.md 5.2): NEXT LEVEL; "Level 1" with the family emblem at its right; the name;
   "Ship check: Ready" with the word in its colour (AHEAD mint, READY ink, BEHIND crimson-ink). */
.rw-hangar__numrow { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.rw-hangar__check { margin-top: auto; color: var(--rw-ink-dim); white-space: nowrap; }
.rw-hangar__checkword { color: var(--rw-ink); font-weight: 600; }
.rw-hangar__check[data-check="strong"] .rw-hangar__checkword { color: var(--rw-mint); }
.rw-hangar__check[data-check="weak"] .rw-hangar__checkword { color: var(--rw-crimson-ink); }
/* CAMPAIGN CLEAR: the Level row is hidden and the sentence wraps (at most three lines) instead of cutting
   to "Fly any Level again f...": 20 pt head + 2 + 3 x 22 = 88 pt of the card's 96 pt inside. */
.rw-hangar[data-campaign-clear="1"] .rw-hangar__nextname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rw-hangar__fam { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.rw-hangar__famicon { display: inline-flex; }
.rw-hangar__bottom { padding-top: 8px; }

/* The CRT monitor (art-direction.md 4.8 and 10.2): the mining feed and the dock's larger feed. */
.rw-crt { --c: var(--rw-cut-s); --fill: var(--rw-comm-screen); --border: var(--rw-line-strong); position: relative; overflow: hidden; height: 68px; padding: 0; width: 100%; }
.rw-crt__picture { position: absolute; inset: 1px; background-size: cover; background-position: 53% 0; opacity: 0.8; z-index: 0; }
/* The drill drone (art-direction.md 10.2): the equipped drill's painting (308 x 316) with its bit, 51.2
   percent across its top edge (parts.json drill.anchors.bit), on scene_mining_feed's drillTarget (53.2
   percent across, 28.65 percent down the top-aligned 16:9 scene). It sits under the scanlines and the band. */
.rw-crt__rig { --drone: 35px; position: absolute; left: 53.2%; top: 27px; width: var(--drone); height: calc(var(--drone) * 316 / 308); margin-left: calc(var(--drone) * -0.512); z-index: 0; pointer-events: none; }
.rw-crt__drone { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rw-crt__beam { position: absolute; left: 51.2%; bottom: 100%; width: 2px; height: 5px; margin-left: -1px; background: linear-gradient(to top, #FFFFFF, var(--rw-cyan)); animation: rw-crt-beam 180ms linear infinite alternate; }
.rw-crt__sparks { position: absolute; left: 51.2%; top: 0; width: 0; height: 0; }
.rw-crt__sparks > i { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; background: var(--rw-gold); animation: rw-crt-spark 520ms linear infinite; }
.rw-crt__sparks > i:nth-child(1) { --sx: -9px; --sy: 3px; }
.rw-crt__sparks > i:nth-child(2) { --sx: 8px; --sy: 2px; animation-delay: -130ms; }
.rw-crt__sparks > i:nth-child(3) { --sx: -5px; --sy: 6px; animation-delay: -260ms; background: var(--rw-comm-ink); }
.rw-crt__sparks > i:nth-child(4) { --sx: 6px; --sy: 7px; animation-delay: -390ms; }
/* A full cargo (or a clock that went back) stops the drone: no beam, no sparks (ui-screens.md 3.3). */
.rw-crt__rig[data-mining="off"] .rw-crt__beam, .rw-crt__rig[data-mining="off"] .rw-crt__sparks { display: none; }
.rw-dock__feed .rw-crt__rig { --drone: 54px; top: 25px; }
@keyframes rw-crt-beam { from { opacity: 1; } to { opacity: 0.45; } }
@keyframes rw-crt-spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(0.5); opacity: 0; } }
.rw-crt__scan { position: absolute; inset: 1px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }
.rw-crt__band { position: absolute; left: 4px; right: 4px; top: 4px; height: 18px; z-index: 2; background: rgba(4, 20, 26, 0.85); color: var(--rw-comm-ink); font: 400 var(--rw-fs-mono-s)/18px var(--rw-font-mono); text-align: center; white-space: nowrap; overflow: hidden; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rw-crt__band[data-full="1"] { color: var(--rw-gold); }
.rw-cargobar { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 4px; background: var(--rw-panel-3); z-index: 2; overflow: hidden; }
.rw-cargobar__fill { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--rw-gold); transform: scaleX(0); }
.rw-dock__mining { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.rw-dock__feed { height: 84px; }
.rw-dock__rows { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.rw-dock__row { font: 500 var(--rw-fs-body)/22px var(--rw-font-body); color: var(--rw-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The rate and cap words (M1, M2, fix-round-1.md 6) are whole sentences: 13 pt on 17 pt rows, two rows each, beside a 120 pt
   picture, so the claim button still ends above the screen's bottom edge at 375 x 667 (it ends at 661 of 667). */
.rw-dock__row[data-testid="dock-mining-rate"], .rw-dock__row[data-testid="dock-mining-cap"], .rw-dock__row[data-testid="dock-mining-full"] { white-space: normal; font-size: 13px; line-height: 17px; overflow: visible; text-overflow: clip; }
.rw-dock__row[data-testid="dock-mining-cap"] { margin-top: 3px; }
.rw-dock__row--lead { font: 600 15px/22px var(--rw-font-display); color: var(--rw-ink); }
.rw-dock__tune { min-height: 44px; justify-content: flex-start; padding: 0; font-size: 14px; letter-spacing: 0.02em; }
.rw-dock__tune .rw-btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Currency explainers (ui-screens.md 3.4). */
.rw-explain__head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.rw-explain__lines { display: flex; flex-direction: column; gap: 4px; }
.rw-explain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.rw-explain__fam { display: flex; align-items: center; gap: 4px; min-height: 44px; min-width: 0; }
/* a family the player has met is a button to its Fabricator builder (first-session-ui.md 5.3); one not met yet is dim */
.rw-explain__fambtn { --c: var(--rw-cut-s); justify-content: flex-start; padding: 4px; height: 44px; text-transform: none; letter-spacing: 0; text-align: left; font: inherit; color: var(--rw-ink); }
.rw-explain__fam[data-met="0"] .rw-emblem { opacity: 0.5; }
/* On 375 x 667 the hangar stage ends 12 pt higher (the chip captions), so the cores dock's head is a 36 pt emblem and
   its rows sit closer, and the six-cell grid keeps 8 pt above the screen's bottom edge. */
@media (max-height: 700px) {
  .rw-modal--dock[data-currency="cores"] .rw-explain__head { min-height: 36px; gap: 8px; }
  .rw-modal--dock[data-currency="cores"] .rw-explain__head .rw-emblem { width: 36px !important; height: 36px !important; }
  .rw-modal--dock[data-currency="cores"] .rw-explain__lines { gap: 0; }
  .rw-modal--dock[data-currency="cores"] .rw-explain__grid { gap: 6px 8px; }
}
.rw-explain__famtext { display: flex; flex-direction: column; min-width: 0; }
.rw-explain__famtext span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

/* ---------- Pager and segmented control ---------- */
.rw-pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; height: 44px; }
.rw-pager__arrow { width: 44px; height: 44px; min-width: 44px; padding: 0; font: 600 26px/1 var(--rw-font-display); }
.rw-pager__label { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.rw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 44px; }
.rw-seg__btn {
  height: 44px; min-height: 44px; padding: 0 4px; min-width: 44px; background: var(--rw-panel-3); color: var(--rw-ink-dim);
  font: 700 14px/1 var(--rw-font-display); letter-spacing: var(--rw-track-caps); position: relative;
}
.rw-seg__btn::before, .rw-seg__btn::after { clip-path: none; }
.rw-seg__btn[data-state="selected"] { background: var(--rw-panel-2); color: var(--rw-cyan); }
.rw-seg__btn[data-state="selected"]::before { content: ""; inset: auto 0 0 0; height: 2px; background: var(--rw-cyan); z-index: 1; }
.rw-seg__btn:disabled { color: var(--rw-ink-faint); }

/* ---------- Parts root (ui-screens.md 3.5) ---------- */
.rw-parts__hint { flex: 1 1 auto; min-width: 0; }
.rw-parts__totals { height: 108px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.rw-parts__totals .rw-label { margin-bottom: 2px; }
.rw-totals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 0; }
.rw-totals .rw-stat { font: 500 13px/18px var(--rw-font-body); color: var(--rw-ink); }
.rw-totals .rw-stat--wide { grid-column: 1 / -1; }
.rw-parts__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 76px; gap: 8px; margin-top: 8px; }
.rw-slot { display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; align-items: center; justify-items: start; padding: 0 6px 0 8px; text-align: left; height: 100%; min-width: 0; }
.rw-slot .rw-label { letter-spacing: 0.06em; }
.rw-slot__text { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.rw-slot__text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* C4 ("Scrapjack cores 4 of 12", fix-round-1.md 7) is 130 pt in a 98 pt column: it takes two rows inside the 76 pt tile. */
.rw-slot__text > .rw-slot__cores { white-space: normal; line-height: 16px; }
.rw-slot .rw-dot { top: 4px; right: 4px; }
.rw-parts__equipbest { margin-top: auto; padding-top: 8px; }
.rw-parts__equipbest .rw-btn { position: relative; }
.rw-parts__equipbest .rw-dot--count { top: -8px; right: 6px; }

/* Slot page (ui-screens.md 3.6). */
.rw-slotpage__panel { flex: 0 0 auto !important; height: 214px; min-height: 0; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; box-sizing: border-box; }
.rw-slotpage__top { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.rw-slotpage__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-slotpage__info > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-slotpage__tag { position: absolute; top: 10px; right: 10px; }
.rw-tunebar { display: block; width: 120px; height: 4px; background: var(--rw-panel-3); position: relative; overflow: hidden; margin: 2px 0; }
.rw-tunebar > i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--rw-cyan); }
.rw-slotpage__builder { display: flex; align-items: center; gap: 6px; }
.rw-slotpage__stats { display: flex; flex-direction: column; gap: 0; }
.rw-slotpage__stats .rw-stat { font: 500 13px/18px var(--rw-font-body); }
.rw-owned__head { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 8px; gap: 8px; }
.rw-owned__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 70px 70px; gap: 8px; margin-top: 8px; }
.rw-ptile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; height: 100%; min-width: 0; position: relative; }
.rw-ptile > * { flex-shrink: 0; }
.rw-ptile__pic { display: inline-flex; position: relative; }
.rw-ptile__tune { font: 600 var(--rw-fs-tab)/var(--rw-lh-tab) var(--rw-font-display); letter-spacing: 0.04em; color: var(--rw-ink-dim); }
/* NEW and USED UP ride over the picture's lower edge as a ribbon, so no tile reserves a row for them and the
   picture keeps 44 pt (56 on L) in the 79 x 70 tile (ui-screens.md 3.6). */
.rw-ptile__tag { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); display: flex; z-index: 1; pointer-events: none; }
.rw-ptile .rw-tag { position: static; height: 14px; font-size: 12px; line-height: 14px; padding: 0 4px; letter-spacing: 0.02em; background-color: var(--rw-panel-2); }
.rw-ptile .rw-tag--mint { background-image: linear-gradient(rgba(92, 255, 160, 0.18), rgba(92, 255, 160, 0.18)); }
.rw-ptile .rw-tag--crimson { background-image: linear-gradient(rgba(255, 107, 139, 0.18), rgba(255, 107, 139, 0.18)); }
.rw-ptile[data-state="equipped"]::before { background: linear-gradient(var(--rw-cyan), var(--rw-cyan)) 50% 100% / calc(100% - 12px) 2px no-repeat, var(--rw-line); }
.rw-ptile[data-selected="true"] { --border: var(--rw-cyan); --bw: 2px; }
.rw-owned__empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; text-align: center; }
.rw-slotpage__build { margin-top: auto; padding-top: 8px; }
.rw-slotpage__reason { margin-top: 7px; }
.rw-slotpage__primary { margin-top: 8px; }

/* Fabricator sheet and build result (ui-screens.md 3.7). */
.rw-fab .rw-label { margin-top: 2px; }
.rw-fab__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* The slot picker: seven 48 pt buttons, 12 pt between the rows so a thumb on GUN can never reach REACTOR below it, and the
   chosen slot boxed in cyan (not just a colour). Nothing in a slot button's box is enlarged by a pseudo-element or a margin:
   tests/fabricator-sheet.test.mjs reads this block, and the browser check samples every button's whole area. */
.rw-seg.rw-fab__grid { grid-auto-flow: row; height: auto; row-gap: 12px; }
.rw-fab__grid .rw-seg__btn { height: 48px; min-height: 48px; }
.rw-fab__grid .rw-seg__btn[data-state="selected"] { box-shadow: inset 0 0 0 2px var(--rw-cyan); }
/* The sheet keeps one height whatever slot is chosen, with the picker at the top and BUILD pinned at the bottom: before,
   the sheet was bottom-anchored and its height followed the text (a gun adds a line), so choosing GUN or any other slot moved
   the whole picker 38 pt and a second tap landed on the button that had slid under the finger. */
.rw-modal--sheet[data-testid="sheet-fabricator"] { height: 580px; }
.rw-modal--sheet[data-testid="sheet-fabricator"] > .rw-modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.rw-fab { flex: 1 1 auto; }
.rw-fab .rw-fab__pay { margin-top: auto; }
.rw-fab__builds { font-weight: 600 !important; color: var(--rw-ink); }
.rw-fab__build { min-height: var(--rw-btn-h); height: auto; padding-top: 6px; padding-bottom: 6px; }
.rw-fab__build .rw-fab__buildlabel { white-space: normal; font-size: 15px; line-height: 17px; text-align: left; min-width: 0; }
.rw-fab__builder .rw-fab__lock { font: 500 12px/14px var(--rw-font-body); color: var(--rw-ink-dim); }
.rw-fab__grid .rw-seg__btn { font-size: 13px; }
.rw-fab__builder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 48px; min-height: 48px; padding: 2px; text-transform: none; letter-spacing: 0; font: 500 12px/14px var(--rw-font-body); background: var(--rw-panel-3); color: var(--rw-ink); position: relative; min-width: 0; }
.rw-fab__builder::before, .rw-fab__builder::after { clip-path: none; }
.rw-fab__builder[data-state="selected"] { background: var(--rw-panel-2); box-shadow: inset 0 0 0 2px var(--rw-cyan); }
.rw-fab__builder[data-state="locked"] { color: var(--rw-ink-dim); }
.rw-fab__builder[data-state="locked"] .rw-emblem { opacity: 0.5; }
.rw-fab__builder .rw-fab__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rw-fab__builder .rw-fab__corner { position: absolute; top: 2px; right: 2px; }
.rw-fab__gunname { white-space: normal; text-align: center; line-height: 13px; }
.rw-fab__panel { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.rw-fab__panel p { font: 500 13px/18px var(--rw-font-body); margin: 0; }
.rw-fab__pay { min-height: 44px; display: flex; align-items: center; }
/* The spares line (FL-31) takes two rows; on a 375 x 667 phone the sheet's 85 percent cap then cut BUILD by 14 pt, so
   there the Fabricator sheet may rise to 8 pt under the top bar (it is modal; the back control and chips stay clear). */
@media (max-height: 700px) {
  .rw-modal--sheet[data-testid="sheet-fabricator"] { max-height: calc(100% - var(--safe-top) - 56px); }
}
.rw-fab__pay .rw-btn { width: 100%; justify-content: flex-start; padding: 0; }
.rw-dialog__head { text-align: center; }
.rw-dialog__pic { display: flex; justify-content: center; margin: 8px 0; }
.rw-dialog__name { text-align: center; }
.rw-dialog__sub { text-align: center; }
.rw-dialog__rows { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.rw-dialog__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rw-burst { animation: rw-burst 900ms var(--rw-ease-out) 1 both; }
@keyframes rw-burst { 0% { transform: scale(0.92); } 40% { transform: scale(1.06); } 100% { transform: none; } }

/* ---------- Forge (ui-screens.md 3.8) ---------- */
.rw-forge__explainer { height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-steps { display: grid; grid-template-columns: repeat(3, 1fr); height: 24px; margin-top: 4px; gap: 8px; }
.rw-steps span { font: 600 var(--rw-fs-tab)/22px var(--rw-font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rw-ink-faint); text-align: center; border-bottom: 2px solid transparent; }
.rw-steps span[data-step="done"] { color: var(--rw-ink); }
.rw-steps span[data-step="current"] { color: var(--rw-cyan); border-bottom-color: var(--rw-cyan); }
.rw-forge__filter { margin-top: 8px; }
.rw-forge__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rw-frow { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 10px; align-items: center; height: 60px; min-height: 60px; padding: 0 10px; text-align: left; }
.rw-frow__text { display: flex; flex-direction: column; min-width: 0; }
.rw-frow__text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-frow__name { font: 600 15px/20px var(--rw-font-body); color: var(--rw-ink); }
.rw-frow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rw-frow__eq { font: 600 var(--rw-fs-tab)/var(--rw-lh-tab) var(--rw-font-display); color: var(--rw-cyan); letter-spacing: 0.06em; }
.rw-forge__pager { margin-top: auto; }
.rw-forge__empty { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.rw-forge__target { --fill: var(--rw-panel-2); display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; padding: 12px 16px; height: 112px; margin-top: 8px; }
.rw-forge__target .rw-ftext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-forge__target .rw-ftext > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-forge__preview { display: flex; flex-direction: column; margin-top: 8px; height: 88px; overflow: hidden; }
.rw-forge__preview .rw-stat { font: 400 var(--rw-fs-body)/22px var(--rw-font-body); }
.rw-forge__spareshead { margin-top: 8px; height: 20px; line-height: 20px; }
.rw-forge__spares { display: flex; gap: 8px; margin-top: 4px; height: 80px; }
.rw-forge__spares .rw-ptile { width: 80px; height: 80px; flex: 0 0 auto; }
.rw-feeder-empty { width: 80px; height: 80px; flex: 0 0 auto; border: 1px dashed var(--rw-line-strong); display: flex; align-items: center; justify-content: center; font: 600 12px/14px var(--rw-font-display); text-transform: uppercase; color: var(--rw-ink-dim); background: transparent; }
.rw-feeder-empty::before, .rw-feeder-empty::after { display: none; }
.rw-forge__fee { margin-top: 8px; height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-forge__reason { margin-top: 8px; }
.rw-forge__action { margin-top: auto; padding-top: 8px; }
.rw-forge__pics { display: flex; align-items: center; justify-content: center; gap: 16px; height: 112px; }
.rw-forge__warn { color: var(--rw-crimson-ink); }
.rw-spares__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 70px 70px; gap: 8px; }

/* ---------- Sector map (ui-screens.md 3.9) ---------- */
.rw-map__sectors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 44px; margin-top: 8px; }
.rw-map__sectors .rw-seg__btn { font-size: 17px; }
.rw-map__sectors .rw-seg__btn[data-state="locked"] { color: var(--rw-ink-faint); }
.rw-map__sectors .rw-seg__btn[data-selected="true"] { background: var(--rw-panel-2); color: var(--rw-cyan); }
.rw-map__sectors .rw-seg__btn[data-selected="true"]::before { content: ""; inset: auto 0 0 0; height: 2px; background: var(--rw-cyan); z-index: 1; }
.rw-map__head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-top: 8px; gap: 8px; }
.rw-map__head .rw-h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: 0.04em; }
.rw-map__fam { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rw-map__route { position: relative; flex: 1 1 auto !important; min-height: 200px; margin-top: 8px; overflow: hidden; background-size: cover; background-position: center; touch-action: pan-y; }
.rw-map__route::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 6, 13, 0.25), rgba(5, 6, 13, 0.70)); pointer-events: none; }
.rw-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rw-node {
  --c: var(--rw-cut-s); --fill: rgba(17, 22, 42, 0.92); --border: var(--rw-cyan); --bw: 1.5px;
  position: absolute; width: 64px; height: 64px; min-width: 64px; padding: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font: 700 20px/22px var(--rw-font-display); color: var(--rw-ink); letter-spacing: 0;
}
.rw-node:active:not(:disabled) { transform: translate(-50%, calc(-50% + 2px)) scale(0.985); }
.rw-node--boss { width: 80px; height: 80px; }
.rw-node[data-state="cleared"] { --border: var(--rw-mint); }
.rw-node[data-state="locked"] { --fill: rgba(17, 22, 42, 0.6); --border: var(--rw-line); color: var(--rw-ink-faint); }
.rw-node[data-selected="true"] { transform: translate(-50%, -50%) scale(1.06); outline: 2px solid var(--rw-cyan); outline-offset: 3px; }
.rw-node__sub { font: 600 12px/14px var(--rw-font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.rw-node[data-state="cleared"] .rw-node__sub { color: var(--rw-mint); }
.rw-node__next { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font: 600 12px/14px var(--rw-font-display); letter-spacing: 0.06em; color: var(--rw-cyan); }
/* The tile that carries NEXT, and the selected tile, paint over the later tiles of the route, so the label is never
   hidden behind the Level 4 tile at 375 x 667 (FL-33). */
.rw-node[data-next="1"], .rw-node[data-selected="true"] { z-index: 2; }
/* The boss node sits near the route's top edge, so its NEXT label hangs under it instead (clear of the ring). */
.rw-node--boss .rw-node__next { top: auto; bottom: -22px; }
/* The card holds four rows: the title (22), line 2 with the ship check chip (20), line 3 (18) and the ship check
   sentence (18): 90 pt of content and 12 pt of padding each side, so 114 pt is the least it can be. It was 104 and flex
   shrank the rows, which cut the sentence's descenders at its bottom edge and line 3's second row. Its rows never shrink.
   Line 3 takes two rows on a Level with a gun unlock ("First clear: 260 credits, 2 Scrapjack cores and the Scrap
   Scattergun." is 36 pt at 375 wide): the card then grows by that row (132 pt), so the ship check sentence always
   shows, and the route above (min 200 pt, 223 at 375 x 667) gives up the 16 pt; ENTER stays on the screen. */
.rw-map__card { --fill: var(--rw-panel-2); position: relative; padding: 12px; margin-top: 8px; min-height: 116px; display: flex; flex-direction: column; gap: 4px; }
.rw-map__card > * { flex: 0 0 auto; }
.rw-map__card .rw-h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
/* line 2 with the ship check chip at its right end (first-session-ui.md 5.2); the sentence row under line 3 */
.rw-map__row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rw-map__row2 > p { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-map__card .rw-checktag { flex: 0 0 auto; height: 20px; line-height: 20px; white-space: nowrap; }
.rw-map__card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-map__card .rw-map__row2 > p { display: block; }
.rw-map__card .rw-map__checkline { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* S2 ("Your ship matches most pilots here. Dodging does the rest.") is 331 pt at 13 pt against a 319 pt box at 375 wide: 12 pt is 305 pt. */
.rw-map__card .rw-map__checkline { font-size: 12px; }
.rw-map__enter { padding-top: 8px; }

/* ---------- Daily Sortie (ui-screens.md 3.10) ---------- */
.rw-daily__card { --fill: rgba(25, 32, 57, 0.94); position: relative; height: 316px; margin-top: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.rw-daily__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* locked: the corner says when the Daily opens, in dim ink, never a cyan clock (FL-19) */
.rw-daily__top [data-locked="1"] { color: var(--rw-ink-dim); white-space: nowrap; }
.rw-daily__next { display: flex; flex-direction: column; gap: 2px; }
.rw-daily__num { font: 400 var(--rw-fs-hud)/var(--rw-lh-hud) var(--rw-font-mono); color: var(--rw-ink); margin-right: 8px; }
.rw-daily__fam { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.rw-daily__fam > div { display: flex; flex-direction: column; }
.rw-daily__card p { margin: 0; }
/* the locked Daily's rewards row (first-session-ui.md 5.4): the count, then one 16 pt pip per Level before it opens */
.rw-daily__lockrow { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.rw-daily__pips { display: inline-flex; gap: 6px; }
.rw-daily__pip { width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--rw-line-strong); }
.rw-daily__pip[data-state="cleared"] { border-color: var(--rw-mint); background: rgba(92, 255, 160, 0.25); }
.rw-daily__pip[data-state="next"] { border-color: var(--rw-cyan); }
.rw-daily__dock { flex: 1 1 auto !important; min-height: 8px; }
.rw-daily__buttons { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Settings (ui-screens.md 3.11) ---------- */
.rw-settings__sections { margin-top: 8px; }
.rw-settings__sections .rw-seg__btn { font-size: 13px; letter-spacing: 0.03em; padding: 0 2px; }
.rw-settings__rows { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rw-setrow { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; }
.rw-setrow__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 var(--rw-fs-body)/22px var(--rw-font-body); color: var(--rw-ink); }
.rw-setrow__cap { font: 500 var(--rw-fs-small)/var(--rw-lh-small) var(--rw-font-body); color: var(--rw-ink-dim); }
.rw-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-x; pointer-events: auto; }
.rw-slider::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--rw-cyan), var(--rw-cyan)) 0 0 / var(--fill, 50%) 100% no-repeat, var(--rw-line-strong); }
.rw-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--rw-ink); border: 2px solid var(--rw-cyan); }
.rw-slider::-moz-range-track { height: 4px; background: var(--rw-line-strong); }
.rw-slider::-moz-range-progress { height: 4px; background: var(--rw-cyan); }
.rw-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--rw-ink); border: 2px solid var(--rw-cyan); }
.rw-toggle { --border: transparent; --fill: transparent; width: 100%; min-height: 64px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; text-transform: none; letter-spacing: 0; color: var(--rw-ink); font: 400 var(--rw-fs-body)/22px var(--rw-font-body); }
.rw-toggle__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rw-toggle__switch { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--rw-line-strong); flex: 0 0 auto; }
.rw-toggle__switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--rw-ink); transition: transform var(--rw-dur-fast) var(--rw-ease-out); }
.rw-toggle[aria-checked="true"] .rw-toggle__switch { background: var(--rw-cyan); }
.rw-toggle[aria-checked="true"] .rw-toggle__switch::after { transform: translateX(20px); background: var(--rw-ink-dark); }
.rw-toggle__state { font: 600 13px/18px var(--rw-font-display); color: var(--rw-ink-dim); min-width: 28px; text-align: right; }
.rw-settings__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rw-settings__pair .rw-btn { padding: 0 6px; font-size: 13px; }
.rw-settings__version { margin-top: 8px; height: 18px; }
.rw-settings__done { padding-top: 10px; }
.rw-armbar { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; background: rgba(255, 255, 255, 0.85); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; z-index: 1; }
.rw-btn--danger[data-armed="true"] .rw-armbar { animation: rw-disarm 6s linear 1 both; }
@keyframes rw-disarm { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.rw-codebox { width: 100%; height: 112px; resize: none; box-sizing: border-box; padding: 8px; background: var(--rw-panel-3); border: 1px solid var(--rw-line-strong); color: var(--rw-ink); font: 400 var(--rw-fs-mono-s)/var(--rw-lh-mono-s) var(--rw-font-mono); border-radius: 0; pointer-events: auto; }
.rw-codebox:focus { outline: 2px solid var(--rw-cyan); outline-offset: 0; }

/* ---------- Loadout and the gun sheet (ui-screens.md 3.12) ---------- */
.rw-loadout__titlerow { justify-content: space-between; }
.rw-loadout__card2 { --fill: rgba(25, 32, 57, 0.94); flex: 0 1 auto !important; min-height: 0; margin-top: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.rw-loadout__card2 p { margin: 0; }
.rw-loadout__fam { display: flex; align-items: center; gap: 6px; }
.rw-loadout__check { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rw-loadout__check .rw-checktag { height: 28px; line-height: 28px; }
.rw-gunrow2 { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; min-height: 72px; }
.rw-gunrow2 > div { display: flex; flex-direction: column; min-width: 0; }
.rw-gunrow2 > div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-loadout__change { position: relative; }
.rw-loadout__change .rw-tag { margin-left: 8px; }
.rw-loadout__launch { margin-top: auto; padding-top: 8px; }
/* The composed ship in a screen's free band (shell.js shipBand: the loadout, a won Level's results): it takes only
   the space that is left, so the measured layout above and the actions below never move. */
.rw-menu > .rw-shipband { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; pointer-events: none; }
.rw-gunlist { display: flex; flex-direction: column; gap: 8px; }
.rw-gunopt { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; height: 84px; min-height: 84px; padding: 0 12px; text-align: left; position: relative; }
.rw-gunopt[data-state="equipped"] { --border: var(--rw-cyan); --bw: 2px; }
.rw-gunopt[data-state="locked"] .rw-frame { opacity: 0.6; }
/* A locked gun has no tier: a neutral frame (no data-rarity) at 60 percent, its icon not dimmed twice, and
   ui_lock at full strength on the frame's corner (ui-screens.md 3.12). */
.rw-gunopt__pic { position: relative; display: inline-flex; width: 56px; height: 56px; }
.rw-frame.rw-frame--locked { --tc: var(--rw-line); }
.rw-gunopt[data-state="locked"] .rw-frame .rw-emblem { opacity: 1; }
.rw-gunopt__lock { position: absolute; top: -4px; right: -4px; }
.rw-btn--card:disabled .rw-gunopt__lock { opacity: 1; }
.rw-gunopt[data-state="locked"] .rw-h3 { color: var(--rw-ink-dim); }
.rw-gunopt__text { display: flex; flex-direction: column; min-width: 0; }
.rw-gunopt__text .rw-small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-gunopt__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rw-gunopt__head .rw-h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-gunopt .rw-tag { flex: 0 0 auto; }

/* ---------- Results (ui-screens.md 3.18) ---------- */
/* One cyan wash for every outcome: art-direction.md 2.2 keeps crimson-ink for warning text and the danger
   button, never for decoration, and the spec asks for no loss tint (the banner and its words carry it). */
.rw-results2 { background: radial-gradient(ellipse at 50% 20%, rgba(63, 230, 255, 0.08), transparent 60%), rgba(5, 6, 13, 0.90); }
.rw-res__banner { margin-top: 8px; }
.rw-res__line { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-res__score { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; height: 22px; }
.rw-res__score > b { font: 400 var(--rw-fs-hud)/var(--rw-lh-hud) var(--rw-font-mono); font-weight: 400; color: var(--rw-ink); }
.rw-res__stats { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-res__panel { padding: 12px 16px; margin-top: 10px; display: flex; flex-direction: column; gap: 0; }
.rw-res__panel .rw-label { margin-bottom: 6px; }
.rw-res__row { min-height: 24px; font: 500 var(--rw-fs-body)/24px var(--rw-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-res__row--win { min-height: 28px; line-height: 28px; }
/* FIELD RIGS (FL-21): the label, then three equal columns at the row's full width, each a 28 pt emblem and the whole
   name on up to two lines (about 77 pt a line at 375 wide: "Emergency Override" takes two, "Slipstream" one). */
.rw-res__rigs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rw-res__riglist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; min-height: 32px; }
.rw-res__rig { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rw-res__rigname { white-space: normal; line-height: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* REWARDS rows with their 20 pt emblem (FL-21) */
.rw-res__row--icon { display: flex; align-items: center; gap: 8px; }
.rw-res__row--icon > .rw-res__rowtext { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The Daily result's share card preview (FL-11): the band between the stat rows and the comm dock above RETRY. */
.rw-res__thumbwrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; overflow: hidden; }
.rw-res__thumb { --c: var(--rw-cut-m); --border: var(--rw-line-strong); --fill: var(--rw-void); --bw: var(--rw-stroke-2); padding: 3px; min-height: 0; flex: 0 0 auto; }
.rw-res__thumbcanvas { display: block; width: 100%; height: 100%; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.rw-res__stronger { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rw-res__strongrow { --c: var(--rw-cut-m); --border: var(--rw-cyan); --fill: var(--rw-panel); --bw: var(--rw-stroke-2);
  min-height: 52px; height: 52px; width: 100%; padding: 0 12px; justify-content: space-between; text-transform: none; letter-spacing: 0;
  font: 500 14px/18px var(--rw-font-body); color: var(--rw-ink); text-align: left; gap: 8px; }
.rw-res__strongrow .rw-btn__label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; }
.rw-res__strongrow .rw-res__chev { font: 600 22px/1 var(--rw-font-display); color: var(--rw-cyan); flex: 0 0 auto; }
.rw-res__grade { --fill: var(--rw-panel-2); height: 64px; margin-top: 10px; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; }
.rw-res__grade b { font: 800 28px/32px var(--rw-font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.rw-res__daily { margin-top: 8px; display: flex; flex-direction: column; }
.rw-res__daily .rw-res__row { font-size: 15px; line-height: 22px; min-height: 22px; }
.rw-res__daily .rw-res__wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-res__actions { margin-top: auto; padding-top: 8px; }
.rw-res__reward { margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-res__grade { --border: var(--rw-r-rusted); --bw: 2px; }
.rw-res__grade[data-rarity="patched"] { --border: var(--rw-r-patched); }
.rw-res__grade[data-rarity="steel"] { --border: var(--rw-r-steel); }
.rw-res__grade[data-rarity="chrome"] { --border: var(--rw-r-chrome); }
.rw-res__grade[data-rarity="neon"] { --border: var(--rw-r-neon); }
.rw-res__grade[data-rarity="quantum"] { --border: var(--rw-r-quantum); }
/* Unlock rows are the longest win rows ("Shardsinger parts are unlocked at the Fabricator." is 319 pt at
   15 pt against a 311 pt panel at 375 wide): 14 pt fits them on one line (about 298 pt). */
.rw-res__panel .rw-res__unlock { color: var(--rw-mint); font-size: 14px; }
/* C8 ("New at the Fabricator: Scrapjack parts. 12 Scrapjack cores build one.", fix-round-1.md 7) is 417 pt at 14 pt against a
   311 pt panel: the row wraps to two lines (18 pt each) instead of clipping the "12 cores build one" it exists to say. */
.rw-res__panel .rw-res__row.rw-res__unlock { white-space: normal; line-height: 18px; padding: 5px 0; overflow: visible; text-overflow: clip; }

/* ---------- Toasts dock with each screen's free band (ui-screens.md 3.20) ---------- */
/* The toast's panel: --panel-2 at 96 percent inside the chamfer recipe (base.css 4.1 paints ::before and
   ::after only for .rw-chamfer, .rw-btn, .rw-panel and .rw-card, and main.js makes a bare .rw-toast). The
   same recipe, so it stays right once main.js adds rw-chamfer. */
.rw-toast { --bw: var(--rw-stroke); position: relative; isolation: isolate; box-sizing: border-box; }
.rw-toast::before, .rw-toast::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.rw-toast::before { inset: 0; background: var(--border); }
.rw-toast::after { inset: var(--bw); background: var(--fill); }
/* On the menus a toast fills its dock's 343 (358 on L) width, never a shrink-wrapped strip over two cards. */
#ui[data-current="hangar"] .rw-toasts .rw-toast, #ui[data-current="parts"] .rw-toasts .rw-toast, #ui[data-current="forge"] .rw-toasts .rw-toast,
#ui[data-current="map"] .rw-toasts .rw-toast, #ui[data-current="loadout"] .rw-toasts .rw-toast, #ui[data-current="daily"] .rw-toasts .rw-toast,
#ui[data-current="settings"] .rw-toasts .rw-toast, #ui[data-current="results"] .rw-toasts .rw-toast { width: 100%; }
#ui[data-current="hangar"] .rw-toasts { top: auto; bottom: calc(var(--rw-tabbar-h) + var(--safe-bottom) + 12px + 52px + 8px + 52px); }
#ui[data-current="results"] .rw-toasts { top: auto; bottom: calc(var(--safe-bottom) + 16px + 52px + 8px + 56px); }
#ui[data-current="daily"] .rw-toasts { top: auto; bottom: calc(var(--rw-tabbar-h) + var(--safe-bottom) + 8px + 52px + 8px + 56px); }
/* Settings (FL-18): the top slot met the section row (toast 56 to 100, row 96 to 140 at 375 x 667), so its toasts dock
   in the free band 8 pt above the version line over DONE; every section's rows end above it (386 at most on S). */
#ui[data-current="settings"] .rw-toasts, #ui[data-overlay="settings"] .rw-toasts { top: auto; bottom: calc(var(--safe-bottom) + 16px + 52px + 8px + 18px + 8px); }

/* ---------- L layouts (390 x 844 and taller): the spec's larger boxes ---------- */
@media (min-height: 800px) {
  .rw-parts__totals { height: 128px; }
  .rw-parts__grid { grid-auto-rows: 84px; }
  .rw-slot { grid-template-columns: 56px 1fr; }
  .rw-owned__grid { grid-template-rows: 80px 80px; }
  .rw-spares__grid { grid-template-rows: 80px 80px; }
  .rw-slotpage__top { grid-template-columns: 112px 1fr; }
  .rw-slotpage__panel { height: 238px; }
  .rw-forge__target { height: 120px; }
  .rw-forge__preview { height: auto; min-height: 88px; max-height: 132px; }
  .rw-forge__spares { height: 88px; }
  .rw-forge__spares .rw-ptile, .rw-feeder-empty { width: 88px; height: 88px; }
  .rw-map__card { min-height: 120px; }
  .rw-daily__card { height: 336px; }
  .rw-gunopt { height: 92px; min-height: 92px; }
  .rw-gunrow2 { min-height: 80px; }
  .rw-res__grade { margin-top: 12px; }
}

/* ---------- Reduced Motion: cuts instead of movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .rw-modal, .rw-burst, .rw-frame, .rw-frame::before, .rw-frame::after, .rw-crt__beam { animation: none !important; }
  .rw-crt__sparks { display: none; }
}
.rw-reduced-motion .rw-modal, .rw-reduced-motion .rw-burst, .rw-reduced-motion .rw-frame, .rw-reduced-motion .rw-frame::before, .rw-reduced-motion .rw-frame::after, .rw-reduced-motion .rw-crt__beam { animation: none !important; }
.rw-reduced-motion .rw-crt__sparks { display: none; }

/* ---------- Debug builds only: the ?debug=1 toggle (layer 60, right edge) would sit on a sheet's close
   button, so it steps aside while a sheet, dock panel or dialog is open. ---------- */
#ui:has(.rw-modal-open) .rw-layer--debug { visibility: hidden; }

/* ---------- Pilot name: the title's first question and Settings > Pilot name ---------- */
/* Top-anchored, so the field, the count and OK stay above the iPhone keyboard (the app is sized from the visual viewport). */
.rw-pilot { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center;
  padding: calc(var(--safe-top) + max(16px, calc(var(--rw-vh, 100dvh) * 0.08))) calc(var(--safe-right) + var(--rw-gutter)) 12px calc(var(--safe-left) + var(--rw-gutter));
  background: rgba(5, 6, 13, 0.97); overflow: hidden; pointer-events: auto; }
.rw-pilot__head { margin: 0; font-size: 24px; line-height: 28px; }
.rw-pilot__sub { margin: 0; }
.rw-pilot__form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 358px; margin: 4px auto 0; }
.rw-pilot__input { display: block; width: 100%; box-sizing: border-box; height: 56px; padding: 0 14px; text-align: center; background: var(--rw-panel-3);
  border: 2px solid var(--rw-line-strong); border-radius: 0; color: var(--rw-ink); font: 600 22px/1 var(--rw-font-display); letter-spacing: 0.04em;
  -webkit-appearance: none; appearance: none; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.rw-pilot__input:focus { outline: none; border-color: var(--rw-cyan); }
.rw-pilot__count { margin: 0; min-height: 18px; text-align: center; }
.rw-pilot__count[data-state="bad"] { color: var(--rw-crimson-ink); }
.rw-pilot__count[data-state="full"] { color: var(--rw-gold); }
.rw-pilot__ok { min-height: 56px; }
.rw-pilot__skip { min-height: 44px; }
.rw-modal--sheet[data-testid="sheet-pilot"] .rw-pilot__form { max-width: none; margin: 0; }
.rw-pilot__row .rw-pilot__value { flex: 0 0 auto; font: 600 15px/18px var(--rw-font-display); color: var(--rw-cyan); white-space: nowrap; }
.rw-pilot__row .rw-toggle__text { flex: 1 1 0; }
.rw-pilot__row .rw-pilot__chev { font: 400 26px/1 var(--rw-font-display); color: var(--rw-ink-dim); }