/* ui/Armory — the Armory station, the Hangar's sister room. Contract: ./Armory.spec.md
   The tiles, tags, brackets and the buy dialog wear ui/Hangar's classes
   (qc-hangar__paint, __roster-ship, __tag, __corner, qc-unlock), so the two
   rooms share one look; this sheet lays the room out with the Hangar's
   numbers and tints it by the slot on show. Tokens only (ui/Theme C8); no
   font under 12px, none under 13px in the display face. */

.qc-armory {
  --qc-hangar-ship: var(--qc-accent);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 14px;
  overflow-x: hidden;
  color: var(--qc-text);
}
.qc-armory[data-slot="singularity"] { --qc-hangar-ship: var(--qc-paint-crimson); }
.qc-armory[data-slot="lance"] { --qc-hangar-ship: var(--qc-accent-2); }
.qc-armory[data-slot="nova"] { --qc-hangar-ship: var(--qc-paint-void); }
.qc-armory[data-slot="bombardment"] { --qc-hangar-ship: var(--qc-paint-solar); }
.qc-armory[data-slot="overload"] { --qc-hangar-ship: var(--qc-paint-magenta); }
/* A tank arena's own three, in their arena colours (client/Renderer SUPERWEAPON_COLOR_KEYS). */
.qc-armory[data-slot="railgun"] { --qc-hangar-ship: var(--qc-paint-ice); }
.qc-armory[data-slot="emp"] { --qc-hangar-ship: var(--qc-paint-aurora); }
.qc-armory[data-slot="airstrike"] { --qc-hangar-ship: var(--qc-paint-ember); }
.qc-armory[data-slot="trail"] { --qc-hangar-ship: var(--qc-accent); }
.qc-armory[data-slot="title"] { --qc-hangar-ship: var(--qc-accent); }

/* Below 900 px the inspector dissolves into the column, so its parts take the
   phone's order: stage, name, the style row, the action, the lines, the
   track, the strip (the Hangar's pattern). */
.qc-armory__inspector { display: contents; min-width: 0; }
.qc-armory__stage-wrap { order: 1; position: relative; }
.qc-armory__readout { order: 2; }
.qc-armory__styles { order: 3; }
.qc-armory__cta { order: 4; }
.qc-armory__hair { order: 5; display: none; }
.qc-armory__lines { order: 5; }
.qc-armory__earn { order: 6; }
.qc-armory__track { order: 7; }
.qc-armory__route { order: 7; }
.qc-armory__spacer { order: 8; display: none; }
.qc-armory__strip { order: 9; }

/* ——— the stage: a bracketed patch of the arena the parent draws into ——— */
.qc-armory__stage { position: relative; flex: none; height: clamp(200px, 34dvh, 318px); margin: 10px 16px 0; }
.qc-armory__canvas {
  position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); display: block;
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, black 60%, transparent 100%);
}
/* The stage's controls: the replay button and the tabs (the Hangar's
   rotate buttons and BASE / FORMS toggle, in the same places). */
.qc-armory__controls { z-index: 2; display: flex; align-items: center; gap: 12px; }
.qc-armory__tabs { min-width: 0; flex-wrap: wrap; }

/* A title's plate: the callsign with the title under it, over the ship. */
.qc-armory__plate {
  position: absolute; left: 50%; top: 34%; z-index: 1; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: calc(100% - 32px);
  text-align: center; pointer-events: none;
}
.qc-armory__plate-name { font-family: var(--qc-font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qc-text); }
.qc-armory__plate-title { font-family: var(--qc-font-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: var(--qc-rarity-legendary); overflow-wrap: anywhere; }

/* ——— the inspector's text ——— */
.qc-armory__readout { padding: 12px 16px 0; }
.qc-armory__eyebrow {
  margin: 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--qc-text-faint);
}
.qc-armory__inspector[data-rarity="rare"] .qc-armory__eyebrow { color: var(--qc-rarity-rare); }
.qc-armory__inspector[data-rarity="epic"] .qc-armory__eyebrow { color: var(--qc-rarity-epic); }
.qc-armory__inspector[data-rarity="legendary"] .qc-armory__eyebrow { color: var(--qc-rarity-legendary); }
.qc-armory__name { margin: 2px 0 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; }
.qc-armory__hair { flex: none; height: 1px; background: var(--qc-line); }
.qc-armory__lines { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 16px 0; list-style: none; }
.qc-armory__line { position: relative; padding-left: 12px; font-size: 13px; line-height: 1.45; color: var(--qc-text-dim); }
.qc-armory__line:first-child { color: var(--qc-text); }
.qc-armory__line::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--qc-hangar-ship); }
.qc-armory__earn { margin: 0; padding: 8px 16px 0; font-size: 13px; line-height: 1.45; color: var(--qc-text-dim); }

/* ——— the reward track: six steps along a bar, the kills marked on it ——— */
.qc-armory__track { padding: 14px 16px 0; min-width: 0; }
.qc-armory__track-label { margin: 0 0 4px; }
.qc-armory__track-bar { position: relative; height: 78px; margin: 0 16px 0 0; }
.qc-armory__track-rail { position: absolute; left: 0; right: 0; top: 30px; height: 4px; border-radius: 2px; background: var(--qc-space-2); }
.qc-armory__track-rail > i {
  position: absolute; inset: 0 auto 0 0; width: var(--at, 0%); border-radius: 2px;
  background: var(--qc-hangar-ship); box-shadow: 0 0 8px color-mix(in srgb, var(--qc-hangar-ship) 50%, transparent);
}
.qc-armory__track-marker {
  position: absolute; top: 0; left: clamp(30px, var(--at, 0%), calc(100% - 30px)); translate: -50% 0;
  padding: 0 6px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--qc-hangar-ship) 60%, transparent);
  background: var(--qc-space-1);
  font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 18px; color: var(--qc-text); white-space: nowrap;
}
.qc-armory__rungs { position: absolute; inset: 24px 0 0; margin: 0; padding: 0; list-style: none; }
.qc-armory__rung { position: absolute; top: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qc-armory__rung:nth-child(1) { left: 16.667%; }
.qc-armory__rung:nth-child(2) { left: 33.333%; }
.qc-armory__rung:nth-child(3) { left: 50%; }
.qc-armory__rung:nth-child(4) { left: 66.667%; }
.qc-armory__rung:nth-child(5) { left: 83.333%; }
.qc-armory__rung:nth-child(6) { left: 100%; }
.qc-armory__rung-dot {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--qc-line-strong); background: var(--qc-space-1);
  font-size: 12px; line-height: 1; color: var(--qc-space-0);
}
.qc-armory__rung[data-owned="true"] .qc-armory__rung-dot { border-color: var(--qc-hangar-ship); background: var(--qc-hangar-ship); }
.qc-armory__rung[data-kind="title"] .qc-armory__rung-dot, .qc-armory__rung:nth-child(6) .qc-armory__rung-dot { border-color: var(--qc-rarity-legendary); }
.qc-armory__rung-label { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qc-text-dim); }
.qc-armory__rung[data-owned="true"] .qc-armory__rung-label { color: var(--qc-text); }
.qc-armory__rung-kills { font-family: var(--qc-font-mono); font-size: 12px; color: var(--qc-text-faint); }
.qc-armory__next { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--qc-text-dim); }

/* ——— a trail's or a title's earn route, where a superweapon has its track ——— */
.qc-armory__route { padding: 14px 16px 0; min-width: 0; }
.qc-armory__route-head { margin: 0 0 4px; }
.qc-armory__route-need { margin: 0; font-size: 14px; line-height: 1.45; color: var(--qc-text); }
.qc-armory__route-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qc-armory__route-bar { position: relative; flex: 1; min-width: 0; height: 4px; border-radius: 2px; background: var(--qc-space-2); overflow: hidden; }
.qc-armory__route-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 2px; background: var(--qc-hangar-ship); }
.qc-armory__route-count { flex: none; font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--qc-text-dim); }

/* ——— the action: Equip, or Buy ◈ N and the balance it leaves ——— */
.qc-armory__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 0; }
.qc-armory .qc-armory__action {
  --qc-action: var(--qc-hangar-ship);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; width: min(342px, calc(100% - 16px)); height: 56px; min-height: 56px; padding: 0 28px; border-radius: var(--qc-radius-sm);
  font-family: var(--qc-font-display); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; text-transform: uppercase;
}
.qc-armory .qc-armory__action[data-kind="equipped"], .qc-armory .qc-armory__action[data-kind="locked"] {
  border: 1px solid var(--qc-line-strong); background: color-mix(in srgb, var(--qc-space-1) 55%, transparent); color: var(--qc-text-dim);
}
.qc-armory .qc-armory__action[data-kind="short"] { border: 1px solid var(--qc-line); background: var(--qc-space-2); color: var(--qc-text-faint); }
.qc-armory__glyph { display: inline-flex; align-items: center; }
.qc-armory__amount { color: inherit; }

/* ——— the style row: the Hangar's paint tiles ——— */
.qc-armory__styles {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 14px 16px 0;
}
.qc-armory__styles-label { display: none; }
.qc-armory__style .qc-hangar__paint-box { position: relative; }
.qc-armory__style[data-rarity="rare"] .qc-hangar__paint-box { border-color: color-mix(in srgb, var(--qc-rarity-rare) 45%, var(--qc-line)); }
.qc-armory__style[data-rarity="epic"] .qc-hangar__paint-box { border-color: color-mix(in srgb, var(--qc-rarity-epic) 45%, var(--qc-line)); }
.qc-armory__style[data-rarity="legendary"] .qc-hangar__paint-box { border-color: color-mix(in srgb, var(--qc-rarity-legendary) 50%, var(--qc-line)); }
.qc-armory__style[aria-pressed="true"] { cursor: default; }
.qc-armory__style[aria-pressed="true"] .qc-hangar__paint-box {
  border-color: var(--qc-hangar-ship);
  box-shadow: 0 0 var(--qc-glow-sm) color-mix(in srgb, var(--qc-hangar-ship) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--qc-hangar-ship) 16%, transparent);
}
.qc-armory__style[aria-pressed="true"] .qc-hangar__paint-name { color: var(--qc-text); }
.qc-armory__style[data-state="short"] { opacity: 0.8; }
/* The free route stays inside its tile and is never cut: "ou 100 éliminations" takes two lines. */
.qc-armory__style .qc-hangar__paint-earn { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; text-align: center; }
/* A superweapon's code is a word in the pilot's language, up to six letters (ÜBERL, ПЕРЕГР, MIZRAK):
   tighter letters keep it whole in its 72 px tab. */
.qc-armory .qc-armory__code { letter-spacing: 0.04em; max-width: 100%; }
/* Trails and titles earn in whole words ("or 100 superweapon kills"): their
   tiles are a little wider and the line may take two lines, never cut. */
.qc-armory:not([data-tab="superweapons"]) .qc-armory__style { width: 104px; }
/* A style's pill and line are short in English but not translated ("400
   Abschüsse", "oder 250 Abschüsse"): its tile is wider still, so both stay
   one whole line in a row of five. */
.qc-armory[data-tab="superweapons"] .qc-armory__style { width: 120px; }
.qc-armory__style .qc-armory__tag { padding: 0 5px; }
/* A trail runs corner to corner: its canvas fills the whole box. */
.qc-armory[data-tab="trails"] .qc-hangar__paint-box { overflow: hidden; }
.qc-armory[data-tab="trails"] .qc-hangar__paint-canvas { width: 100%; height: 100%; }
.qc-armory:not([data-tab="superweapons"]) .qc-armory__style .qc-hangar__paint-earn {
  white-space: normal; overflow: visible; text-align: center; line-height: 1.25;
}
.qc-armory__rank {
  position: absolute; top: 3px; right: 3px; min-width: 18px; padding: 0 4px; border-radius: 7px;
  background: var(--qc-space-1); border: 1px solid var(--qc-line);
  font-family: var(--qc-font-ui); font-weight: 700; font-size: 12px; line-height: 14px; letter-spacing: 0.04em; text-align: center; color: var(--qc-text-dim);
}
.qc-armory__style[data-rarity="rare"] .qc-armory__rank { color: var(--qc-rarity-rare); border-color: color-mix(in srgb, var(--qc-rarity-rare) 50%, transparent); }
.qc-armory__style[data-rarity="epic"] .qc-armory__rank { color: var(--qc-rarity-epic); border-color: color-mix(in srgb, var(--qc-rarity-epic) 50%, transparent); }
.qc-armory__style[data-rarity="legendary"] .qc-armory__rank { color: var(--qc-rarity-legendary); border-color: color-mix(in srgb, var(--qc-rarity-legendary) 55%, transparent); }
/* Worn: the tick lit in the room's colour; owned, the Hangar's dim tick. */
.qc-armory__tag[data-kind="equipped"] { color: var(--qc-space-0); background: var(--qc-hangar-ship); border-color: var(--qc-hangar-ship); }

/* ——— the strip: the Hangar's roster, with kill bars ——— */
.qc-armory__strip {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 14px 16px 14px;
}
.qc-armory__slot[data-slot="singularity"] { --qc-hangar-tile: var(--qc-paint-crimson); }
.qc-armory__slot[data-slot="lance"] { --qc-hangar-tile: var(--qc-accent-2); }
.qc-armory__slot[data-slot="nova"] { --qc-hangar-tile: var(--qc-paint-void); }
.qc-armory__slot[data-slot="bombardment"] { --qc-hangar-tile: var(--qc-paint-solar); }
.qc-armory__slot[data-slot="overload"] { --qc-hangar-tile: var(--qc-paint-magenta); }
.qc-armory__slot[data-slot="railgun"] { --qc-hangar-tile: var(--qc-paint-ice); }
.qc-armory__slot[data-slot="emp"] { --qc-hangar-tile: var(--qc-paint-aurora); }
.qc-armory__slot[data-slot="airstrike"] { --qc-hangar-tile: var(--qc-paint-ember); }
.qc-armory__slot[data-slot="trail"], .qc-armory__slot[data-slot="title"] { --qc-hangar-tile: var(--qc-accent); }
.qc-armory__badge { position: absolute; top: 2px; right: 5px; font-size: 12px; line-height: 1; color: var(--qc-rarity-legendary); }

/* ——— the buy dialog: the unlock panel, tinted by the slot ——— */
.qc-armory__confirm[data-slot="singularity"] { --qc-hangar-ship: var(--qc-paint-crimson); }
.qc-armory__confirm[data-slot="lance"] { --qc-hangar-ship: var(--qc-accent-2); }
.qc-armory__confirm[data-slot="nova"] { --qc-hangar-ship: var(--qc-paint-void); }
.qc-armory__confirm[data-slot="bombardment"] { --qc-hangar-ship: var(--qc-paint-solar); }
.qc-armory__confirm[data-slot="overload"] { --qc-hangar-ship: var(--qc-paint-magenta); }
.qc-armory__confirm[data-slot="railgun"] { --qc-hangar-ship: var(--qc-paint-ice); }
.qc-armory__confirm[data-slot="emp"] { --qc-hangar-ship: var(--qc-paint-aurora); }
.qc-armory__confirm[data-slot="airstrike"] { --qc-hangar-ship: var(--qc-paint-ember); }
.qc-armory__confirm-canvas {
  width: min(300px, 100%); height: 160px;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, black 55%, transparent 100%);
}
.qc-armory__confirm-question { text-transform: none; letter-spacing: 0.04em; }
.qc-armory__confirm-question .qc-armory__glyph, .qc-armory__confirm-balance .qc-armory__glyph { vertical-align: middle; }
.qc-armory__confirm-balance { display: block; text-align: center; }

/* Below 900 px the controls are a row under the stage, as the Hangar's
   toggle is; the tabs share it, each at least a thumb tall. */
@media (max-width: 899px) {
  .qc-armory__controls { position: static; padding: 10px 16px 0; }
  .qc-armory__tabs { flex: 1 1 auto; display: flex; }
  .qc-armory .qc-armory__tab { flex: 1 1 auto; min-width: 0; height: auto; min-height: 44px; padding: 0 8px; letter-spacing: 0.06em; }
}

/* A portrait phone (and a narrow tablet held upright): what kind of thing
   first (the tabs), then which superweapon (the strip), then the look on the
   stage with its replay over the stage's foot, its name, the styles and what
   to do. The landscape phone and the desktop keep their own rooms. */
@media (max-width: 599px), (max-width: 899px) and (min-height: 561px) {
  .qc-armory__stage-wrap, .qc-armory__controls { display: contents; }
  .qc-armory__tabs { order: 0; margin: 10px 16px 0; }
  .qc-armory__strip { order: 1; padding: 10px 16px 14px; border-bottom: 1px solid var(--qc-line); }
  .qc-armory__stage { order: 2; height: clamp(170px, 26dvh, 260px); }
  .qc-armory__replay { order: 2; position: relative; z-index: 2; align-self: flex-start; margin: -62px 0 18px 28px; }
  .qc-armory__readout { order: 3; }
  .qc-armory__styles { order: 4; }
  .qc-armory__cta { order: 5; }
  .qc-armory__lines { order: 6; }
  .qc-armory__earn { order: 7; }
  .qc-armory__track, .qc-armory__route { order: 8; }
}

@media (min-width: 900px) {
  .qc-armory {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: minmax(0, 1fr) 140px 100px;
    grid-template-areas: "stage insp" "styles insp" "strip strip";
    height: 100%; min-height: 600px; padding: 0;
  }
  .qc-armory__stage-wrap { display: block; grid-area: stage; position: relative; min-height: 0; }
  .qc-armory__stage { position: absolute; inset: 22px 24px 72px; height: auto; margin: 0; }
  .qc-armory:not([data-tab="superweapons"]) { grid-template-rows: minmax(0, 1fr) 164px; grid-template-areas: "stage insp" "styles insp"; }
  .qc-armory__controls { position: absolute; left: 24px; right: 24px; bottom: 12px; gap: 14px; }
  .qc-armory__tabs { margin-left: auto; }
  .qc-armory__plate-name { font-size: 26px; }
  .qc-armory__plate-title { font-size: 17px; }

  .qc-armory__inspector {
    grid-area: insp; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 26px 24px; border-left: 1px solid var(--qc-line); backdrop-filter: blur(6px);
    background: linear-gradient(270deg, color-mix(in srgb, var(--qc-space-1) 85%, transparent), color-mix(in srgb, var(--qc-space-1) 55%, transparent));
  }
  .qc-armory__readout, .qc-armory__lines, .qc-armory__earn, .qc-armory__track, .qc-armory__route, .qc-armory__cta { padding: 0; }
  .qc-armory__name { font-size: 22px; }
  .qc-armory__line { font-size: 14px; }
  .qc-armory__hair { display: block; }
  .qc-armory__spacer { display: block; flex: 1; }
  .qc-armory__cta { gap: 16px; }
  .qc-armory .qc-armory__action { width: 100%; }
  .qc-armory__readout { order: 1; }
  .qc-armory__hair { order: 2; }
  .qc-armory__lines { order: 3; }
  .qc-armory__earn { order: 4; }
  .qc-armory__track, .qc-armory__route { order: 5; }
  .qc-armory__spacer { order: 6; }
  .qc-armory__cta { order: 7; }

  .qc-armory__styles { grid-area: styles; align-items: flex-start; gap: 14px; padding: 10px 24px 0; border-top: 1px solid var(--qc-line); scroll-snap-type: none; }
  .qc-armory__styles-label { display: block; flex: none; min-width: 54px; align-self: center; }
  .qc-armory__style { gap: 4px; }
  .qc-armory__strip {
    grid-area: strip; padding: 0 20px; border-top: 1px solid var(--qc-line);
    background: linear-gradient(0deg, color-mix(in srgb, var(--qc-space-1) 90%, transparent), color-mix(in srgb, var(--qc-space-1) 50%, transparent));
  }
}

/* A landscape phone (740 x 360 to 932 x 430): the Hangar's landscape room —
   the stage on the left, the inspector and the style row on the right, the
   strip along the bottom, all on one screen. After the 900 px block, so it
   also wins on a wide phone. */
@media (max-height: 560px) and (min-width: 600px) {
  .qc-armory {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "stage insp" "stage styles" "strip strip";
    height: 100%; min-height: 0; padding: 0;
  }
  .qc-armory__stage-wrap { display: block; grid-area: stage; position: relative; min-height: 0; }
  .qc-armory:not([data-tab="superweapons"]) { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage insp" "stage styles"; }
  .qc-armory__stage { position: absolute; inset: 6px 12px 54px; height: auto; margin: 0; }
  .qc-armory__controls { position: absolute; left: 12px; right: 12px; bottom: 6px; gap: 10px; padding: 0; }
  .qc-armory__tabs { flex: none; margin-left: auto; }
  .qc-armory .qc-armory__tab { flex: none; height: 30px; min-height: 30px; padding: 0 10px; }
  .qc-armory__plate-name { font-size: 18px; }

  .qc-armory__inspector {
    grid-area: insp; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 10px 16px 8px; border-left: 1px solid var(--qc-line);
    background: linear-gradient(270deg, color-mix(in srgb, var(--qc-space-1) 85%, transparent), color-mix(in srgb, var(--qc-space-1) 55%, transparent));
    /* What scrolls fades out at the foot instead of stopping mid-line. */
    -webkit-mask-image: linear-gradient(180deg, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(180deg, black calc(100% - 16px), transparent);
  }
  .qc-armory__readout, .qc-armory__lines, .qc-armory__earn, .qc-armory__track, .qc-armory__route, .qc-armory__cta { padding: 0; }
  /* The action straight under the name: the lines and the track are what scroll. */
  .qc-armory__readout { order: 1; }
  .qc-armory__cta { order: 2; gap: 6px; }
  .qc-armory__lines { order: 3; }
  .qc-armory__earn { order: 4; }
  .qc-armory__track, .qc-armory__route { order: 5; }
  .qc-armory__hair, .qc-armory__spacer { display: none; }
  .qc-armory .qc-armory__action { width: 100%; height: 48px; min-height: 48px; }

  .qc-armory__styles {
    grid-area: styles; align-items: flex-start; gap: 8px; padding: 6px 16px 8px;
    border-top: 1px solid var(--qc-line); border-left: 1px solid var(--qc-line); scroll-snap-type: none;
  }
  .qc-armory__style { width: 84px; gap: 3px; }
  .qc-armory__style .qc-hangar__paint-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .qc-armory__strip { grid-area: strip; gap: 10px; padding: 6px 12px 12px; border-top: 1px solid var(--qc-line); }
  /* The display face stays at its 13 px floor on the smaller tiles (the Hangar's roster rule takes it to 12). */
  .qc-armory .qc-armory__code { font-size: 13px; letter-spacing: 0.06em; }
}

/* Thumbs: a tab is 44 px tall on any touch screen, the landscape stage foot
   included (docs/premium-pass.md §1.11 rule 1). */
@media (pointer: coarse) {
  .qc-armory .qc-armory__tab { height: 44px; min-height: 44px; }
}