/* Long-press must never become a text selection: a held thrust in
       Hyper Run was painting the whole screen selection-blue on phones.
       The prefixed rules are what iOS Safari actually honours, and the
       touch-callout kill stops the copy/look-up bubble. Inputs opt back
       in so the access code can still be typed and pasted. */
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    input, textarea { -webkit-user-select: text; user-select: text; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #070b16; color: #f3efe4; font-family: Figtree, system-ui, sans-serif; touch-action: none; user-select: none; }
    #app, .ac-root { width: 100%; height: 100%; display: flex; justify-content: center; }
    .ac-stage { position: relative; width: 100%; max-width: 480px; height: 100%; background: #0c1224; overflow: hidden;
      /* the notch, published for the canvas HUD to read (engine resize) */
      --sat: env(safe-area-inset-top, 0px); }
    .ac-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
    .ac-backplate { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
    /* the beta flight lab on the pause sheet */
    .ac-lab { margin: 6px 0 4px; text-align: left; }
    .ac-labhead { text-align: center; margin-bottom: 4px; }
    .ac-labrow { display: grid; grid-template-columns: 9.5em 1fr 3.6em; align-items: center; gap: 8px; margin: 3px 0; font-size: 11px; }
    .ac-labname { color: #cfd8ea; letter-spacing: .04em; text-transform: uppercase; }
    .ac-labval { text-align: right; color: #ffe299; font-variant-numeric: tabular-nums; }
    .ac-labslider { width: 100%; accent-color: #b876ff; }
    .ac-lab .ac-modes { margin: 6px 0 2px; }
    /* a built-in wake is shown, not chosen: full strength while disabled */
    .ac-builtintrail, .ac-builtintrail:disabled { opacity: 1; cursor: default; }
    .ac-suit-pitch { margin: 6px 0 2px; }
    .ac-suit-pitch .ac-modes { margin: 6px 0; }
    /* WIDESCREEN MODE: the stage sheds the phone cap and menus take the
       whole screen — panels and art run full-bleed while the content
       holds a centred, readable column instead of stretching. */
    body.ac-wide .ac-stage { max-width: none; }
    body.ac-wide .ac-sheet { padding-left: max(18px, calc(50% - 360px)); padding-right: max(18px, calc(50% - 360px)); }
    .ac-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
    .ac-overlay > * { pointer-events: auto; }
    .ac-sheet { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px 18px 18px; background: rgba(7,11,22,0.9); overflow: hidden; }
    .ac-center { align-items: center; justify-content: center; text-align: center; }
    .ac-result { overflow-y: auto; justify-content: safe center; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    @media (max-height: 540px) { .ac-result { justify-content: flex-start; } }
    h1 { font-family: Fraunces, serif; font-size: 42px; line-height: 0.95; }
    h2 { font-family: Fraunces, serif; font-size: 28px; }
    .ac-kicker { letter-spacing: .32em; text-transform: uppercase; color: #e8a44a; font-size: 11px; }
    .ac-sub, .ac-fine { color: #8b95b0; font-size: 12px; }
    .ac-fine { text-align: center; font-size: 10px; }
    .ac-gold { color: #e8a44a; font-weight: 700; }
    .ac-row { display: flex; justify-content: space-between; align-items: flex-start; }
    /* ================= THE MENU SHELL =================
       Five tabs on one bar, every tab its own full screen. Two button
       materials: HELMET GLASS on the home screen (the visor off the
       suit, so the launch button belongs to the art) and GALAXY on the
       side menus. Gold is reserved for what you EARN — acorn counts,
       prices, the Flight Log's rungs and its XP bar.            */

    /* --- 1 · the cold open: loading --- */
    .ac-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
      background: radial-gradient(120% 62% at 50% 42%, #16123a 0%, #0a0620 52%, #05020e 100%); }
    .ac-bootnut { position: relative; width: 150px; height: 150px; }
    /* the drained shell, waiting to be filled */
    .ac-bootshell { position: absolute; inset: 0; width: 150px; height: 150px; object-fit: contain;
      filter: grayscale(1) brightness(.8) contrast(.75); opacity: .44; }
    /* THIS BOX'S HEIGHT IS THE PROGRESS VALUE. It is masked by the
       acorn's own alpha so the waterline stops at the shell instead of
       running off as a rectangle. */
    .ac-bootfill { position: absolute; left: 0; bottom: 0; width: 150px; height: 8%; overflow: hidden;
      transition: height .28s ease;
      -webkit-mask-image: var(--nut); mask-image: var(--nut);
      -webkit-mask-size: 150px 150px; mask-size: 150px 150px;
      -webkit-mask-position: center bottom; mask-position: center bottom;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
    .ac-bootfill img { position: absolute; left: 0; bottom: 0; width: 150px; height: 150px; object-fit: contain; }
    .ac-bootline { position: absolute; left: 0; right: 0; top: 0; height: 26px;
      background: linear-gradient(rgba(255,230,163,.45), transparent); border-top: 2px solid #fff2cf; }
    .ac-boottitle { margin-top: 14px; font-family: Fraunces, serif; font-weight: 800; font-size: 40px; line-height: .95;
      background: linear-gradient(#ffe6a3 12%, #e8a44a 54%, #a86a1f 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ac-bootsub { margin-top: 9px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #8b95b0; }
    .ac-bootfine { position: absolute; left: 0; right: 0; bottom: 22px; }

    /* --- 2 · tap to start. The tap also unlocks audio. --- */
    .ac-splash { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
      background-color: #05020e; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; }
    .ac-splash-ink { position: absolute; left: 0; right: 0; bottom: 0; height: 54%;
      background: linear-gradient(transparent, rgba(5,2,14,.55) 42%, rgba(5,2,14,.9) 78%, #05020e 100%); }
    .ac-splash-stack { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 24px 92px; }
    .ac-splash-title { font-family: Fraunces, serif; font-weight: 800; font-size: 51px; line-height: .92; color: #fff;
      text-shadow: 0 3px 22px rgba(5,2,14,.9), 0 0 44px rgba(120,150,220,.35); }
    .ac-splash-tap { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: #ffd76a;
      animation: ac-tappulse 1.9s ease-in-out infinite; }
    .ac-splash-tap span { font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fff;
      text-shadow: 0 1px 10px rgba(5,2,14,.95); }
    .ac-splash-fine { position: relative; padding-bottom: 22px; }
    @keyframes ac-tappulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

    /* --- 2b · the launch film. Runs once between the tap and the menu,
       then holds its last frame and dissolves into the home plate, which
       is that same frame painted larger. The dissolve is what hides the
       seam: the film is 1088x1920 and the plate 1206x2622, so their cover
       crops do not land on identical pixels. --- */
    .ac-filmhost { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
    .ac-filmhost > * { pointer-events: auto; }
    .ac-film { position: absolute; inset: 0; background: #05020e; cursor: pointer; z-index: 40; }
    .ac-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    /* a wide window (desktop, landscape phone): the portrait film is shown
       whole on the dark plate instead of a zoomed crop of its middle
       (owner, 7 Sep 2026: "super zoomed in and missing a lot") */
    @media (min-aspect-ratio: 1/1) {
      .ac-film video { object-fit: contain; }
      /* the owner's wide plate behind the letterboxed film, so the sides
         are a horizon rather than black; the film's own edge falls into a
         soft shadow instead of a hard cut */
      .ac-film { background: #05020e url("./art/film-backdrop-wide.jpg?v=224") center / cover no-repeat; }
      .ac-film::before { content: ""; position: absolute; inset: 0; background: rgba(5,2,14,.28); pointer-events: none; }
      .ac-film video { filter: drop-shadow(0 0 60px rgba(0,0,0,.85)); }
    }
    .ac-film.out { opacity: 0; transition: opacity .38s ease; pointer-events: none; }
    .ac-filmskip { position: absolute; right: 14px; bottom: 18px; z-index: 2;
      background: rgba(10,16,32,.6); border: 1px solid rgba(150,166,200,.3); color: #cdd6ea;
      border-radius: 999px; padding: 7px 15px; font: 700 10px/1 Figtree, system-ui, sans-serif;
      letter-spacing: .18em; opacity: 0; transition: opacity .4s ease .7s; }
    .ac-film.ready .ac-filmskip { opacity: 1; }
    /* MENU ANIMATION OFF. One switch, one class on <body>, every menu
       animation and transition stops - including the ones behind the
       pulse, the fade and the moving dust badge. Canvas motion is the
       game and is not touched. */
    body.ac-nomotion *, body.ac-nomotion *::before, body.ac-nomotion *::after {
      animation: none !important; transition: none !important; }
    /* the settings list: a label with a quiet second line, the switch on the right */
    .ac-setrow { gap: 12px; }
    .ac-settxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .ac-settxt b { font-weight: 800; }
    .ac-setsub { font-size: 10.5px; font-weight: 600; color: #7d869f; letter-spacing: .02em; }

    /* --- 3 · HOME --- */
    /* full-bleed, like the film that dissolves into it: the plate is a
       whole-phone composition and the old 74% band cropped the pilot's
       head up under the wordmark */
    /* a touch of ink so the pills and wordmark hold on any frame */
    .ac-pill { display: flex; align-items: center; gap: 6px; background: rgba(10,16,32,.72);
      border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 800; color: #fff; }
    .ac-pill-gold { color: #ffdf9a; }

    /* the second door into the Hangar */

    /* HELMET GLASS — home only */
    .ac-mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; }
    .ac-modes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px;
      background: rgba(16,22,42,.9); border: 1px solid #2a3454; border-radius: 14px; padding: 4px; }
    .ac-mode { min-height: 44px; border-radius: 10px; background: transparent; color: #98a2bd; font-size: 10px;
      font-size: 11px; font-weight: 700; letter-spacing: .04em; }
    .ac-mode.on { color: #17203A; font-weight: 800;
      background: linear-gradient(196deg, #F4F8FF, #C4D5EC); box-shadow: inset 0 1px 0 rgba(255,255,255,1); }

    /* --- the tab bar, on every menu --- */
    /* HOME is the raised dome: the biggest target, and glass on EVERY
       screen because it is the home button — the white is its identity,
       not the current screen's colour. */

    /* --- the four side menus --- */
    .ac-menu { display: flex; flex-direction: column; height: 100%; background: #070b16; overflow: hidden; }

    /* Help left the tab bar for the "?" every other game puts in a corner.
       44px so it clears the touch-target floor on a phone. */
    .ac-helpdot { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
      background: rgba(10,16,32,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
      color: #cfd8ea; cursor: pointer; }
    .ac-helpdot:active { transform: scale(.94); }
    .ac-headaside { display: flex; align-items: center; gap: 8px; flex: none; }

    /* a mod or bundle card is a row, not a tile: it has to carry a
       sentence of explanation that a 3-up grid cannot hold */
    .ac-bundlestrip { display: flex; align-items: center; gap: 4px; }
    .ac-bundlestrip img, .ac-bundlestrip canvas { width: 40px; height: 40px; }
    .ac-bundlemore { font-size: 11px; font-weight: 800; color: #8b95b0; }
    .ac-bundlecount { position: absolute; right: 12px; bottom: 8px; font-size: 9px;
      letter-spacing: .14em; color: #6f7ba0; }
    .ac-labnote { text-align: center; margin-top: 6px; color: #5d6885; }

    /* ---- star chart ---- */
    .ac-pips { display: inline-flex; gap: 2px; }
    .ac-pip { color: #3a4468; font-size: 13px; line-height: 1; }
    .ac-pip.on { color: #ffd060; text-shadow: 0 0 8px rgba(255,208,96,.55); }
    .ac-pips.sm .ac-pip { font-size: 10px; }
    .ac-lvlsheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(5,8,18,.72); }
    .ac-lvlcard { width: 100%; border-radius: 18px 18px 0 0; border-top: 1px solid #3a4468; background: #101830; padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
    .ac-lvlcard.ac-racecard { width: min(760px, 100%); max-height: min(94vh, 820px); margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .ac-racecard > * { flex-shrink: 0; }
    .ac-racecard .ac-lvlname { font-weight: 800; }
    .ac-briefhead { display: flex; align-items: center; gap: 12px; }
    .ac-briefhead > div { flex: 1; min-width: 0; }
    .ac-raceactions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); padding: 10px 0 calc(16px + env(safe-area-inset-bottom)); background: #101830; }
    body.ac-beta .ac-raceactions { background: #191036; }
    .ac-raceactions .ac-primary { width: 100%; }
    .ac-racebrief { display: grid; gap: 10px; }
    .ac-racebriefblock { border: 1px solid rgba(170,140,240,.28); border-radius: 14px; padding: 12px 13px; background: rgba(8,13,31,.38); }
    .ac-racebriefblock h3 { margin: 0 0 8px; font: 900 14px/1 Figtree, sans-serif; letter-spacing: .12em; color: #ffe086; }
    .ac-racebriefblock p { margin: 0; color: #d7def0; font: 600 14px/1.45 Figtree, sans-serif; }
    .ac-racecontrols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ac-racecontrol { display: grid; grid-template-columns: minmax(118px, .9fr) 1.1fr; gap: 10px; align-items: baseline; padding: 5px 0; color: #d7def0; font: 600 14px/1.3 Figtree, sans-serif; }
    .ac-racecontrol + .ac-racecontrol { border-top: 1px solid rgba(170,140,240,.13); }
    .ac-racecontrol b { color: #a9f5ff; font-size: 14px; letter-spacing: .035em; }
    @media (max-width: 619px), (max-height: 699px) {
      .ac-lvlcard.ac-racecard { max-height: 96vh; gap: 8px; padding-top: 14px; }
      .ac-racecontrols { grid-template-columns: 1fr; }
      .ac-racebriefblock { padding: 10px 12px; }
      .ac-racebriefblock p, .ac-racecontrol { font-size: 14px; }
    }
    .ac-lvlname { font-family: Fraunces, Georgia, serif; font-size: 26px; margin: 0; }
    .ac-lvltags { display: flex; flex-wrap: wrap; gap: 6px; }
    .ac-lvltag { font: 800 9px/1 Figtree, sans-serif; letter-spacing: .1em; color: #9fb0d0; border: 1px solid #3a4468; border-radius: 999px; padding: 5px 9px; }
    .ac-lvltag.mode { color: #ffd060; border-color: rgba(255,208,96,.5); }
    .ac-lvlgoals { display: flex; flex-direction: column; gap: 6px; }
    .ac-goal { display: flex; align-items: center; gap: 9px; font: 600 13px/1.3 Figtree, sans-serif; color: #b9c4dc; }
    .ac-goal.on { color: #fff; }
    .ac-goal.kept { color: #d7c9a0; }
    .ac-bigpips { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
    .ac-bigpip { font-size: 34px; color: #2c3554; }
    .ac-bigpip.earned { color: #ffd060; text-shadow: 0 0 16px rgba(255,208,96,.7); }
    .ac-bigpip.kept { color: #a08b52; }
    .ac-menuhead { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
      padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 10px; }
    .ac-menuheadtext { min-width: 0; }
    .ac-menutitle { font-family: Fraunces, serif; font-weight: 800; font-size: 24px; line-height: 1.1; }
    .ac-menu .ac-kicker { color: #8b95b0; font-size: 9px; }
    .ac-menu .ac-sheet-scroll { padding: 0 16px 10px; }
    .ac-secthead { margin: 12px 0 8px; letter-spacing: .24em; }

    /* the equipped rig, pinned above the categories so the preview is
       never a mystery while you shop */
    .ac-rigtags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
    .ac-tagpill { background: #141b30; border: 1px solid #2a3454; border-radius: 999px; padding: 4px 8px;
      font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #98a2bd; }
    .ac-tagblue { background: rgba(74,180,255,.12); border-color: rgba(74,180,255,.4); color: #4ab4ff; }
    .ac-taggold { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.4); color: #d4af37; }

    /* GALAXY — the side menus' material */
    .ac-cats { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding: 12px 16px 10px; }
    .ac-cat { min-height: 36px; border-radius: 999px; background: #141b30; border: 1px solid #2a3454; color: #98a2bd;
      font-size: 10px; font-weight: 700; letter-spacing: .04em; }
    .ac-cat.on { color: #fff; font-weight: 800; border-color: transparent;
      background:
        radial-gradient(120% 180% at 18% -20%, rgba(116,150,255,.34), transparent 60%),
        linear-gradient(180deg, #6C5FB6, #463C86);
      box-shadow: inset 0 1px 0 rgba(206,214,255,.55); }

    .ac-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
    .ac-tile { background: #0c1224; border: 1px solid #2a3454; border-radius: 14px; padding: 10px 8px; text-align: center; }
    .ac-tilenum { font-size: 18px; font-weight: 800; }
    .ac-tilelabel { font-size: 9px; letter-spacing: .1em; color: #8b95b0; margin-top: 3px; }
    .ac-rows { background: #0c1224; border: 1px solid #2a3454; border-radius: 16px; padding: 2px 14px; margin-top: 8px; }
    .ac-rows .ac-row { align-items: center; padding: 11px 0; border-bottom: 1px solid #1a2238; font-size: 13px; font-weight: 700; width: 100%; }
    .ac-rowbtn { background: transparent; color: inherit; text-align: left; }
    .ac-rows .ac-row:last-child { border-bottom: 0; }
    .ac-rowbtn { background: transparent; color: #f3efe4; text-align: left; }
    .ac-rownote { font-weight: 400; }
    .ac-rowgold { color: #ffd76a; font-weight: 800; }
    .ac-switch { width: 42px; height: 25px; flex: none; border-radius: 999px; background: #1a2238; border: 1px solid #2a3454;
      display: flex; align-items: center; padding: 0 3px; }
    .ac-switch.on { border-color: transparent; justify-content: flex-end;
      background: radial-gradient(120% 180% at 18% -20%, rgba(116,150,255,.34), transparent 60%), linear-gradient(180deg, #6C5FB6, #463C86);
      box-shadow: inset 0 1px 0 rgba(206,214,255,.55); }
    .ac-knob { width: 19px; height: 19px; border-radius: 999px; background: #4d5674; }
    .ac-switch.on .ac-knob { background: #fff8ea; }
    .ac-idcard { display: flex; align-items: center; gap: 13px; background: linear-gradient(#0f1730, #0b1124);
      border: 1px solid #2a3454; border-radius: 16px; padding: 13px; }
    .ac-idface { width: 66px; height: 66px; flex: none; border-radius: 999px; border: 1px solid #2a3454;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(circle at 50% 36%, #1b2547 0%, #0a1024 74%); }
    .ac-idface canvas { width: 58px; height: 58px; }
    .ac-idtxt { min-width: 0; }
    .ac-idname { font-size: 18px; font-weight: 800; }
    .ac-replay { width: 100%; margin: 12px 0 4px; }
    .ac-reset { width: 100%; margin: 10px 0 2px; }
    /* the ad network's privacy-options door, shown only where its consent platform requires one (6 Oct 2026) */
    .ac-privacyopts { min-height: 44px; margin-top: 10px; border-color: rgba(207,175,115,.5); }
    .ac-resetarmed { color: #ff8a8a; border-color: #a84444; }
    .ac-resetnote { margin-bottom: 72px; }
    /* PREMIUM. The gold border used to be !important, which meant a premium
       card could never also show the equipped ring - one state silently ate
       the other. The gold is now a hairline INSET, so the card's own border
       stays free for equipped and both can be true at once.
       --pg is the item's own glow, fed in from catalog.ts, so Cyber blooms
       magenta and Cryostar ice-blue rather than twenty identical gold cards. */
    .ac-premium { box-shadow: inset 0 0 0 1px rgba(212,175,55,.55),
      inset 0 -18px 26px -18px var(--pg, #c9b6ff); }
    .ac-premium::after { content: "★"; position: absolute; top: 6px; right: 8px; color: #ffd76a; font-size: 12px; }
    /* an unowned premium card is dimmed, so :not(.ac-cardoff) is exactly
       "premium AND yours" - the lettering lifts only on what you actually own */
    .ac-premium:not(.ac-cardoff) { text-shadow: 0 0 7px color-mix(in srgb, var(--pg, #c9b6ff) 70%, transparent); }
    .ac-premium:not(.ac-cardoff).on { box-shadow: inset 0 0 0 1px rgba(212,175,55,.55),
      inset 0 -18px 26px -18px var(--pg, #c9b6ff), 0 0 0 2px #A99BE8; }
    .ac-card { position: relative; }
    button { font: inherit; cursor: pointer; border: 0; }
    .ac-primary { background: #4ab4ff; color: #0c1224; border-radius: 16px; padding: 14px 16px; font-weight: 800; font-size: 18px; }
    .ac-ghost { background: #141b30; color: #f3efe4; border: 1px solid #2a3454; border-radius: 16px; padding: 12px 16px; font-weight: 700; }
    /* a suit that wears its own head closes the helmet shelf rather than
       offering picks that would change nothing you can see */
    .ac-cardoff { opacity: .34; filter: grayscale(.6); cursor: default; }

    /* the pack row: give the words the space, cap the faces */
    .ac-bundlestrip { flex-wrap: nowrap; max-width: 148px; overflow: hidden; }
    .ac-bundlestrip img, .ac-bundlestrip canvas { width: 34px; height: 34px; }


    /* GRID VIEW. The same groupings and the same headings - the rows simply
       stop scrolling and wrap, so a whole group is on screen at once
       instead of behind a swipe. One class flips the Loadout's shelves and
       the shop's PREVIEW alike, because both are built from ac-shelfrow. */
    .ac-viewrow { display: flex; justify-content: flex-end; margin: 2px 2px -2px; }
    .ac-viewseg { display: flex; gap: 2px; padding: 2px; border-radius: 10px;
      background: rgba(20,14,44,.72); border: 1px solid rgba(203,180,255,.22); }
    .ac-viewbtn { width: 30px; height: 26px; padding: 0; border: 0; border-radius: 8px;
      background: transparent; color: #98a2bd; font-size: 14px; line-height: 1; }
    .ac-viewbtn.on { background: rgba(143,107,255,.35); color: #f0ebff; }
    .ac-asgrid .ac-shelfrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
      overflow-x: visible; }
    .ac-asgrid .ac-shelfrow > .ac-card { flex: initial; min-width: 0; }
    .ac-asgrid .ac-shelfrow > .ac-card.ac-modcard { min-width: 0; }
    /* the PREVIEW cards are bigger, so they get three across rather than four */
    .ac-tostage ~ .ac-shelfrow, .ac-asgrid .ac-shelfrow > .ac-tocard { min-width: 0; }
    .ac-asgrid .ac-shelfrow:has(> .ac-tocard) { grid-template-columns: repeat(3, minmax(0,1fr)); }

    /* THE PAUSE SHEET CAN BE TALLER THAN THE PHONE. With the Spill settings
       open it runs well past a short screen, and .ac-sheet is a fixed-height flex
       column with overflow:hidden and justify-content:center — so it spilled
       off BOTH ends and RESUME went with it. You could read every dial and
       have no way to leave. .ac-result already solved exactly this; the pause
       sheet never got it. `safe center` centres while it fits and falls back
       to the top when it does not, instead of clipping symmetrically. */
    .ac-pausesheet { overflow-y: auto; justify-content: safe center;
      padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    .ac-pausesheet > * { flex: none; }
    /* and the way out never scrolls away, whatever is above it */
    .ac-pauseact { position: sticky; bottom: 0; z-index: 3; width: 100%;
      display: grid; gap: 8px; margin-top: 4px;
      padding: 12px 0 max(2px, env(safe-area-inset-bottom));
      background: linear-gradient(to top, rgba(7,11,22,.97) 64%, rgba(7,11,22,0)); }
    body.ac-beta .ac-pauseact {
      background: linear-gradient(to top, rgba(16,8,36,.97) 64%, rgba(16,8,36,0)); }

    /* THE ROTATING SHELF. A pack whose contents the pilot part-owns shows
       what it costs THEM, with the sticker struck through beside it, so a
       discount reads as a discount rather than as an inconsistent price. */
    /* the sticker sits UNDER the price, not beside it: side by side it
       widened the price column enough to squeeze the blurb back into the
       five wrapped lines that were fixed two versions ago */
    .ac-wasprice { flex: 0 0 100%; margin: 1px 0 0; font-size: 10.5px;
      opacity: .5; text-decoration-thickness: 1px; line-height: 1.1; }

    /* the daily badge, the disc from the key art */
    .ac-dailybadge { flex: none; width: 46px; height: 46px;
      filter: drop-shadow(0 3px 9px rgba(120,80,220,.7)); }
    .ac-dailybadgebig { display: block; width: 96px; height: 96px; margin: 2px auto 0;
      filter: drop-shadow(0 5px 16px rgba(120,80,220,.85)); }
    /* THE BADGE TURNS. The disc is a 32-cell sprite sheet, 8 across and 4
       down. The sheet steps across the columns, the row it sits in steps
       down the rows, and this box crops a single cell - two nested boxes
       because one element carries one transform. Every offset is a
       percentage of the animated element's OWN size, so this one rule
       serves the 46px row badge and the 96px popup badge without knowing
       either number. 32 cells over 3.5s; the column leg is a quarter of
       that, which is what keeps the two legs in phase.

       The still disc is this box's own background. It is what shows while
       the sheet loads, if the sheet never arrives, and for a pilot whose
       system asked for less motion - so the badge is never missing. */
    .ac-dustbadge { position: relative; overflow: hidden;
      background-position: center; background-size: contain; background-repeat: no-repeat; }
    .ac-dustbadgerow { position: absolute; left: 0; top: 0; width: 100%; height: 400%;
      animation: ac-dustrow 3.5s steps(4) infinite; }
    .ac-dustbadgecells { position: absolute; left: 0; top: 0; width: 800%; height: 100%;
      background-position: left top; background-size: 100% 100%; background-repeat: no-repeat;
      animation: ac-dustcol .875s steps(8) infinite; }
    @keyframes ac-dustrow { to { transform: translateY(-100%); } }
    @keyframes ac-dustcol { to { transform: translateX(-100%); } }
    @media (prefers-reduced-motion: reduce) { .ac-dustbadgerow { display: none; } }
    /* STAR DUST ON A PURPLE SHOP. The violet glyph sat on a violet sheet and
       all but vanished. It keeps its colour and gains a dark disc to sit on,
       so the contrast comes from the plate rather than from repainting the
       currency a colour it does not mean. */
    .ac-pill-dust svg, .ac-modprice.ac-dustprice svg, .ac-hub-iddust svg {
      background: rgba(6,4,18,.72); border-radius: 999px; padding: 1px;
      box-shadow: 0 0 0 1px rgba(203,180,255,.45); }
    .ac-dustface { background: radial-gradient(70% 70% at 50% 30%, rgba(90,60,180,.5), rgba(4,3,12,.92));
    /* REMOVE ADS: the one non-consumable beside the packs (7 Oct 2026). A struck AD badge for a face, OWNED once bought. */
    .ac-noadsface { position: relative; display: grid; place-items: center; font: 900 18px/1 Figtree, sans-serif; letter-spacing: .08em; color: #ffd7e8; }
    .ac-noadsface::after { content: ""; position: absolute; z-index: 1; left: 14%; right: 14%; top: 50%; height: 3px; background: #ff5d8a; transform: rotate(-28deg); border-radius: 2px; }
    .ac-noadsrow .ac-owned { display: grid; place-items: center; min-height: 42px; min-width: 70px; padding: 8px 12px; border-radius: 12px;
      border: 1px solid rgba(124,224,173,.5); color: #7ce0ad; font: 800 12px/1 Figtree, sans-serif; letter-spacing: .08em; }
      border-color: rgba(203,180,255,.55); }


    /* the acorn counter, matched to the Star Dust pill */
    .ac-hub-idnut { display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
      padding: 0 10px; border-radius: 999px; color: #ffdf9a;
      font: 800 12px/1 Figtree, sans-serif;
      background: rgba(120,90,20,.28); border: 1px solid rgba(255,206,92,.4); }
    .ac-hub-idnut svg { filter: drop-shadow(0 0 4px rgba(255,206,92,.6)); }
    /* a price, never a bare number: the gold tag from the currency sheet -
       the acorn and the count on one amber pill, dark text, so it reads as
       a price the moment the eye lands on it */
    .ac-costtag { display: inline-flex; align-items: center; gap: 4px; color: #2b1700;
      font: 800 11px/1 Figtree, sans-serif; padding: 3px 8px 3px 5px; border-radius: 999px;
      background: linear-gradient(180deg, #ffcd5a, #f29a1e);
      box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
    .ac-nutimg { flex: none; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
    /* "Spend X acorns to unlock Y?" - the one sheet between a tap and a purse */
    .ac-spendsheet { align-items: center; padding: 18px; z-index: 40; }
    .ac-spendcard { width: min(380px, 100%); border-radius: 18px; border: 1px solid #3a4468;
      text-align: center; gap: 12px; padding-bottom: 18px; }
    .ac-spendask { margin: 0; color: #f3efe4; font: 700 17px/1.4 Figtree, sans-serif;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
    .ac-spendask b { color: #ffd76a; }
    .ac-spendbal { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0; }
    .ac-spendrow { display: flex; gap: 10px; }
    .ac-spendrow > button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    /* STAR CHART BOOSTS: the owner's badges, in the shop, on the chart and in the profile */
    .ac-boostart { display: block; flex: none; border-radius: 50%; object-fit: cover;
      box-shadow: 0 0 10px rgba(255,206,92,.25); }
    .ac-boostcard .ac-boostart { width: 56px; height: 56px; }
    .ac-boostheld { color: #ffd76a; }
    .ac-card.ac-boostcard.ac-confirming { border-color: #e05a5a; }
    .ac-boostarm { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px;
      padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255,206,92,.45);
      background: rgba(120,90,20,.28); color: #ffe6a8; }
    .ac-boostarm > span { display: flex; flex-direction: column; gap: 2px; font: 600 12px/1.3 Figtree, sans-serif; }
    .ac-boostarm b { font-size: 13px; letter-spacing: .04em; }
    .ac-skipbtn, .ac-unlockbtn, .ac-unlockgo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .ac-boostnote { margin: -4px 0 0; }
    .ac-rewardsheet { text-align: center; align-items: center; }
    .ac-rewardbig { display: flex; justify-content: center; }
    .ac-rewardstate { color: #ffd76a; font-weight: 700; }
    .ac-rewardsheet > button { width: 100%; }
    .ac-invrow { align-items: center; gap: 10px; }
    .ac-invuse { flex: none; padding: 8px 12px; font-size: 12px; }
    /* An unclaimed free reward is an INVITATION, not a status line. It sits
       where the price would sit, wears the acorn gold so it reads as value,
       and breathes so a full shelf still shows you which card is waiting.
       It wraps rather than clipping - a 96px card is narrower than the
       words on a small phone. */
    .ac-collect { display: inline-block; max-width: 100%; text-align: center;
      white-space: normal; color: #241704; border-radius: 999px; padding: 2px 7px;
      background: linear-gradient(180deg, #ffeab0, #ffc94d);
      font: 800 9.5px/1.2 Figtree, sans-serif; letter-spacing: .02em;
      animation: acCollect 1.3s ease-in-out infinite; }
    @keyframes acCollect {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 201, 77, .5); }
      55% { transform: scale(1.06); box-shadow: 0 0 11px 2px rgba(255, 201, 77, .45); } }
    @media (prefers-reduced-motion: reduce) {
      .ac-collect { animation: none; box-shadow: 0 0 9px 1px rgba(255, 201, 77, .4); } }
    /* Active Effects, on the launch tile. The label is a <b>, and the tile
       sizes EVERY <b> at the FREE FLIGHT title size - same specificity as
       the old .ac-hub-active b, declared later, so it won. That is how a
       throwaway "in case you forgot" line ended up shouting at 21px next
       to the button's own name. Out-specify it and inherit the line's own
       type, so the tile's rule can never reach in here again. */
    .t-launch .ac-hub-active b { font: inherit; color: rgba(182,172,214,.92); }
    /* the live pilot stage in the Loadout */
    /* the shop banner icon was inheriting the hub tile's size and bursting
       out of a 60px row */
    .ac-shopbanneric svg, .ac-shopbanneric img, .ac-shopbanneric canvas {
      width: 30px; height: 30px; object-fit: contain; }
    /* the pack purchase, second tap */
    .ac-confirming { background: linear-gradient(180deg, #ffb0b0, #e05a5a); color: #2a0808; }
    /* the daily receipt popup */
    .ac-dailycard { text-align: center; }
    .ac-dailybig { display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 6px 0 2px; color: #cbb4ff;
      font: 900 34px/1 Figtree, sans-serif; text-shadow: 0 0 18px rgba(150,110,255,.8); }
    .ac-dailycard .ac-pips { justify-content: center; margin: 10px 0 4px; }
    /* mail mark */
    .ac-markmail { background: linear-gradient(180deg, #3a4b6e, #1b2540);
      border: 1px solid rgba(255,255,255,.14); }


    /* ---- what you just bought ---- */
    /* a swipeable strip, snapping so a card never ends up half off-screen */


    /* ---- the pilot names themselves ---- */
    .ac-idnamerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .ac-idnameedit { flex: none; width: 30px; height: 30px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center; color: #9aa6c4;
      background: rgba(255,255,255,.06); border: 1px solid #2a3454; }
    .ac-idnameinput { flex: 1; min-width: 0; width: 100%; min-height: 36px;
      padding: 4px 10px; border-radius: 10px; color: #f3efe4;
      font: 800 16px/1.2 Figtree, sans-serif;
      background: #0d1224; border: 1.5px solid #A99BE8; }
    .ac-idnameinput:focus { outline: none; box-shadow: 0 0 0 3px rgba(169,155,232,.28); }
    .ac-idnameok { flex: none; min-height: 36px; padding: 0 12px; border-radius: 10px;
      font: 900 11px/1 Figtree, sans-serif; letter-spacing: .1em; color: #241500;
      background: linear-gradient(180deg, #ffe08a, #e0a02a); border: 0; }


    /* What is switched on, on the launch tile: a footnote, not a headline.
       It exists so nobody launches wondering why the gravity is wrong -
       which needs it READABLE, not loud. Smaller and dimmer than the
       tile's own subtitle, so it sits under the button instead of
       competing with it. One line, never wraps. */
    .ac-hub-active { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px;
      font: 700 8.5px/1.3 Figtree, sans-serif; letter-spacing: .01em; color: rgba(124,235,194,.72);
      max-width: 100%; min-width: 0; }
    /* one chip per effect (owner, 7 Sep 2026: the line "scrunches up with
       too much text"). A chip never breaks inside; the ROW breaks between
       chips, and a chip longer than the tile is clipped with an ellipsis
       rather than pushing the tile's text off its left edge. */
    .ac-hub-fx { display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: 8px;
      background: rgba(10,40,60,.45); border: 1px solid rgba(124,235,194,.22); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
    .t-launch .ac-hub-active b { letter-spacing: .12em; font-size: 8px; }
    /* the daily prompt: the shop button breathes until you visit */
    @keyframes ac-dailypulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(150,110,255,.55), 0 0 14px -2px rgba(150,110,255,.6); }
      50%     { box-shadow: 0 0 0 7px rgba(150,110,255,0), 0 0 22px 2px rgba(150,110,255,.95); }
    }
    .ac-hub-sq.ac-dailyready { animation: ac-dailypulse 1.9s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .ac-hub-sq.ac-dailyready { animation: none;
        box-shadow: 0 0 0 2px rgba(150,110,255,.7), 0 0 16px -2px rgba(150,110,255,.8); }
    }
    /* the Star Dust counter beside acorns, with its plus */
    .ac-hub-iddust { display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
      padding: 0 8px 0 9px; border-radius: 999px; color: #cbb4ff;
      font: 800 12px/1 Figtree, sans-serif;
      background: rgba(70,50,140,.35); border: 1px solid rgba(150,110,255,.42); }
    .ac-hub-iddust svg { filter: drop-shadow(0 0 4px rgba(150,110,255,.8)); }
    .ac-hub-plus { font-style: normal; font-weight: 900; font-size: 13px; color: #e6dbff;
      opacity: .85; margin-left: 1px; }
    /* the daily receipt, now that arriving claims it */
    .ac-dailygot { flex: none; display: inline-flex; align-items: center; gap: 5px;
      color: #cbb4ff; font: 900 15px/1 Figtree, sans-serif;
      text-shadow: 0 0 9px rgba(150,110,255,.8); }
    /* the hangar's way back to the shop: a control, not a caption */
    .ac-shopbanner { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
      width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; text-align: left;
      min-height: 60px; color: #f3efe4;
      background: linear-gradient(100deg, rgba(109,63,209,.5), rgba(14,10,34,.6) 72%);
      border: 1.5px solid rgba(169,155,232,.55);
      box-shadow: 0 8px 22px -14px rgba(150,110,255,.9); }
    .ac-shopbanneric { flex: none; width: 34px; height: 34px; display: flex;
      align-items: center; justify-content: center; }
    .ac-shopbannertxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ac-shopbannertxt b { font: 900 13px/1.1 Figtree, sans-serif; letter-spacing: .08em; }
    .ac-shopbannertxt span { font-size: 11px; color: #b6acd6; }
    .ac-shopbannergo { flex: none; font-size: 20px; font-weight: 800; color: #cbb4ff; }
    /* the pack contents sheet */


    /* ---- DEBRIS FIELDS: a line of rubble laid across the road ---- */
    .ac-debris { position: absolute; left: 0; height: 34px; transform: translateY(-50%);
      pointer-events: none; z-index: 2; }
    .ac-debrisbit { position: absolute; top: 50%; display: block; }
    .ac-debrisbit canvas { display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); }
    .ac-debris.locked .ac-debrisbit canvas { filter: grayscale(1) brightness(.5); opacity: .5; }
    .ac-debris.done { opacity: .28; }
    /* the label rides the line and is the only part you can tap */
    .ac-debristag { position: absolute; transform: translate(-50%,-50%); z-index: 4;
      display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
      padding: 4px 11px 4px 5px; border-radius: 999px;
      background: rgba(8,12,26,.92); border: 1.5px solid #6d7ba8; }
    .ac-debristag b { font: 900 11px/1 "IBM Plex Mono", ui-monospace, monospace;
      letter-spacing: .08em; color: #9aa6c4; }
    .ac-debrisship { width: 26px; height: 26px; object-fit: contain; }
    .ac-debristag.blocking { border-color: #ffce5c;
      box-shadow: 0 0 0 3px rgba(255,206,92,.16), 0 0 18px -3px rgba(255,206,92,.6); }
    .ac-debristag.blocking b { color: #ffce5c; }
    .ac-debristag.done { border-color: #6ee7a8; }
    .ac-debristag.done b { color: #6ee7a8; }
    .ac-debristag.locked { opacity: .4; }
    .ac-gatenote b { color: #ffce5c; }
    .ac-gatecleared b { letter-spacing: .06em; }


    /* ---- PREVIEW: trying premium on before you buy the pack ---- */
    .ac-tocanvas { width: 300px; max-width: 100%; height: auto; display: block; }
    /* THE LEAN EDITOR. Sits under the loadout case, shut by default: it is
       an instrument you open on purpose, not a panel in the way of the suit
       you came to look at. Everything is >=44px so it works on a phone. */
    .ac-tonohelm { position: absolute; top: 8px; right: 10px;
      font: 800 9px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em;
      color: #8b95b0; background: rgba(8,12,26,.8); border-radius: 999px; padding: 4px 8px; }
    /* the shelves reuse the hangar's row, only narrower cards */
    .ac-tocard { min-height: 96px; min-width: 78px; }
    .ac-tocard.on { box-shadow: inset 0 0 0 1px rgba(212,175,55,.55),
      inset 0 -18px 26px -18px var(--pg, #c9b6ff), 0 0 0 2px #A99BE8; }
    /* the stage animates continuously; hold it still for anyone who asked */
    @media (prefers-reduced-motion: reduce) { .ac-tocanvas { /* frames still paint, motion is inherent */ } }


    /* ---- Community: outward links from the Profile ---- */
    .ac-social { display: flex; align-items: center; gap: 11px; text-decoration: none;
      min-height: 52px; color: #f3efe4; }
    .ac-socialmark { flex: none; width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; background: linear-gradient(180deg, #6b7cf0, #4a58d8);
      box-shadow: 0 3px 10px -4px rgba(88,101,242,.9); }
    .ac-socialtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .ac-socialtxt b { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
    .ac-socialtxt span { font-size: 11px; color: #8b95b0; }
    .ac-socialgo { flex: none; color: #8b95b0; font-size: 14px; font-weight: 800; }
    .ac-markx { background: linear-gradient(180deg, #2b2b32, #0b0b0f);
      border: 1px solid rgba(255,255,255,.16); box-shadow: 0 3px 10px -5px rgba(0,0,0,.9); }




    /* ---- STAR DUST: the premium currency ---- */
    /* violet, never gold. Gold is acorns everywhere else in this game, and
       two currencies that share a colour are one currency with two numbers. */
    .ac-pill-dust { color: #cbb4ff; }
    .ac-pill-dust svg { filter: drop-shadow(0 0 4px rgba(150,110,255,.75)); }
    /* TWO CLASSES, deliberately. .ac-modprice is declared 60 lines further
       down and paints gold, so at equal specificity it won and every Star
       Dust price rendered in the acorn colour - the same late-redeclaration
       trap that hid the Founder's Pack layout. */
    .ac-modprice.ac-dustprice { display: inline-flex; align-items: center; gap: 4px;
      color: #cbb4ff; text-shadow: 0 0 8px rgba(150,110,255,.75); }
    .ac-modprice.ac-dustprice svg { filter: drop-shadow(0 0 5px rgba(150,110,255,.9)); }
    /* a Star Dust pack priced in acorns (13 Sep 2026): the acorn glyph and the number, like a mod card */
    .ac-modprice.ac-acornprice { display: inline-flex; align-items: center; gap: 4px; }
    .ac-dustface { display: flex; align-items: center; justify-content: center;
      width: 54px; height: 54px; flex: none; border-radius: 14px; color: #cbb4ff;
      background: radial-gradient(70% 70% at 50% 30%, rgba(120,86,220,.45), rgba(8,6,22,.7));
      border: 1px solid rgba(150,110,255,.4); }
    .ac-dustface svg { filter: drop-shadow(0 0 7px rgba(150,110,255,.85)); }

    /* ---- the daily claim ---- */
    .ac-daily { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
      margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; text-align: left;
      background: linear-gradient(100deg, rgba(86,60,170,.42), rgba(12,9,30,.55) 70%);
      border: 1px solid rgba(150,110,255,.42); }
    .ac-daily.done { opacity: .72; }
    .ac-dailytxt { flex: 1; min-width: 0; }
    /* THE STREAK'S PIPS ARE THE DAILY'S ALONE (audit, 8 Sep 2026). These
       round discs were declared unscoped, so they also repainted every
       GLYPH pip - the small gold stars on the Star Chart nodes, the level
       sheets and the run receipt (.ac-pips at :261-264) - as an 11px violet
       circle with the star hidden inside it. Both daily containers are
       named: the receipt sheet (.ac-dailycard) and the shop's streak row
       (.ac-daily). */
    .ac-daily .ac-pips, .ac-dailycard .ac-pips { display: flex; gap: 5px; margin: 7px 0 5px; }
    .ac-daily .ac-pip, .ac-dailycard .ac-pip { width: 11px; height: 11px; border-radius: 999px; display: block;
      background: rgba(255,255,255,.12); border: 1px solid rgba(150,110,255,.35); }
    .ac-daily .ac-pip.big, .ac-dailycard .ac-pip.big { width: 15px; height: 15px; margin-top: -2px; border-color: #ffd76a; }
    .ac-daily .ac-pip.on, .ac-dailycard .ac-pip.on { background: linear-gradient(180deg, #d9c6ff, #8a5ae4); border-color: #cbb4ff;
      box-shadow: 0 0 7px rgba(150,110,255,.8); }
    .ac-daily .ac-pip.big.on, .ac-dailycard .ac-pip.big.on { background: linear-gradient(180deg, #ffe9a8, #e0a02a);
      box-shadow: 0 0 9px rgba(255,200,90,.9); }

    /* what happened when you tapped. A refused transaction used to change
       nothing at all - no toast, no shake, no re-render - which is what made
       the screen feel dead on a fresh save. (Two generations of this rule
       used to sit here; this is their union, later values winning.) */
    .ac-deny { margin: 0 14px 6px; min-height: 0; padding: 0; overflow: hidden; text-align: center;
      font: 800 11.5px/1.35 Figtree, sans-serif; letter-spacing: .04em; color: #ffb3c4;
      opacity: 0; transition: opacity .14s ease; }
    .ac-deny.on { min-height: 22px; padding: 3px 0 1px; opacity: 1; }
    @keyframes ac-shake { 10%, 90% { transform: translateX(-2px); }
      30%, 70% { transform: translateX(3px); } 50% { transform: translateX(-3px); } }
    .ac-shake { animation: ac-shake .34s cubic-bezier(.36,.07,.19,.97) both; }
    /* motion is the accent here, never the message: the status line carries
       the reason on its own for anyone who does not want the movement */
    @media (prefers-reduced-motion: reduce) {
      .ac-shake { animation: none; }
    }
    .ac-lockednote { grid-column: 1 / -1; background: rgba(169,155,232,.1); border: 1px solid rgba(169,155,232,.32);
      border-radius: 14px; padding: 11px 13px; margin-bottom: 10px; }
    .ac-lockedhead { font-size: 12px; font-weight: 800; color: #e6e0ff; margin: 0 0 3px; }
    /* mods are purchases, so they use the shop card -- wide, with a price */
    .ac-card.ac-modcard { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center;
      justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; white-space: normal; }
    .ac-card.ac-modcard canvas { width: 56px; height: 56px; }
    .ac-modtxt { flex: 1 1 auto; min-width: 0; }
    .ac-modname { font-size: 13px; font-weight: 800; margin: 0 0 2px; }
    .ac-modprice { flex: none; font-size: 12px; font-weight: 800; color: #ffd76a; letter-spacing: .05em; }
    /* HANGAR SHELVES: titled, sideways-scrolling category rows */
    .ac-grid.ac-shelfcol { display: flex; flex-direction: column; gap: 8px; }
    .ac-shelfhead { margin: 4px 2px -2px; font-size: 11px; letter-spacing: .16em;
      color: #98a2bd; font-weight: 800; }
    .ac-shelfrow { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ac-shelfrow::-webkit-scrollbar { display: none; }
    .ac-shelfrow > .ac-card { flex: 0 0 96px; }
    .ac-shelfrow > .ac-card.ac-modcard { flex: 0 0 auto; min-width: 240px; }
    /* a fixed head takes no helmet: dome, circle, slash */
    .ac-nohelm { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px;
      border: 2px solid #8fa0be; border-radius: 50%; opacity: .95; pointer-events: none; }
    .ac-nohelm::before { content: ""; position: absolute; left: 3px; top: 5px; width: 10px;
      height: 7px; border: 2px solid #8fa0be; border-bottom: none; border-radius: 10px 10px 0 0; }
    .ac-nohelm::after { content: ""; position: absolute; left: -2px; top: 6px; width: 19px;
      height: 2px; background: #8fa0be; transform: rotate(-45deg); }
    /* the purchased shelf's door to the shop */
    .ac-card.ac-shopcard { border: 1px dashed #3a4468; background: rgba(20,27,48,.5);
      color: #98a2bd; justify-content: center; }
    .ac-shopglyph { font-size: 26px; line-height: 1; color: #d4af37; font-weight: 800; }
    .ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
    /* PALS RUN THREE WIDE (owner, 7 Sep 2026: "make the pal menu tighter...
       keep pal size same, less open space on tile"). The painting keeps its
       72x60 box; the tile loses its air - thin padding, a hair of gap - and
       the shelf drops from eight rows to five. */
    .ac-grid.ac-palgrid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
    /* store-build affordances: Restore Purchases under the dust packs, the
       platform's own boards above the local bests */
    .ac-restore { margin: 6px 0 2px; }
    .ac-boardglobal { margin: 8px 0 12px; }
    /* SAFE AREA (8 Sep 2026): the sheets that open over a run and the
       in-flight pause button keep clear of the notch as well */
    .ac-pausesheet { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
    .ac-lvlsheet > .ac-lvlcard { max-height: calc(100% - env(safe-area-inset-top, 0px)); }
    /* the first full week's three critters on the daily receipt */
    .ac-dailytrio { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; }
    .ac-dailytrio canvas { width: 64px; height: 64px; }
    /* the seats line above the pal shelf */
    .ac-palseats { grid-column: 1 / -1; margin: 2px 2px 0; font: 800 9px/1.35 Figtree, sans-serif;
      letter-spacing: .08em; text-transform: uppercase; color: #9aa6c8; }
    /* FIRST-TIME GUIDES (26 Sep 2026): the pals and Star Chart sheets, and the
       row on the pal shelf that reopens the first one */
    .ac-guidebtn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 40px; font: 800 11px/1.2 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase;
      border-color: rgba(207,175,115,.6); color: #ffe7b0; }
    .ac-guidemark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
      border: 1px solid currentColor; font-size: 12px; letter-spacing: 0; }
    .ac-guidesheet { gap: 12px; }
    .ac-guidelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
      overflow-y: auto; }
    .ac-guidelist li { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(207,175,115,.35); }
    .ac-guidelist b { color: #ffe7b0; font-size: 13px; font-weight: 800; }
    .ac-guidelist span { color: #c9cfe4; font-size: 12px; line-height: 1.45; }
    .ac-card { min-height: 118px; background: #141b30; color: #f3efe4; border: 1px solid #2a3454; border-radius: 13px; padding: 8px 4px 8px; font-size: 10px; font-weight: 700; white-space: pre-line; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; overflow: visible; }
    .ac-card img, .ac-card canvas { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
    .ac-palcard { justify-content: flex-start; gap: 2px; padding: 5px 4px 6px; min-height: 0; border-radius: 11px; }
    .ac-palcard .ac-palname { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
      max-width: 100%; overflow-wrap: anywhere; }
    .ac-palcard .ac-paldesc { font-size: 9.5px; font-weight: 500; line-height: 1.25; color: #a7b1cc; white-space: normal;
      max-width: 100%; overflow-wrap: anywhere; }
    .ac-palcard .ac-palstat { margin-top: auto; padding-top: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: #8b95b0; }
    /* the premium star tucks into the corner so it clears a long name */
    .ac-palcard.ac-premium::after { top: 2px; right: 4px; font-size: 10px; }
    @media (max-width: 349px) { .ac-palcard .ac-palname { font-size: 9px; } }
    /* WHILE A GUIDED STEP IS LIVE, ONLY THE STEP IS BRIGHT.
       Two other cards on the same shelf say COLLECT REWARD, which reads far
       more like the thing to press than the one the instruction sent you
       for. Dimming the rest is what stops them competing — the target keeps
       full colour and gets an arrow; everything else stays visible (you can
       still browse) but stops shouting. */
    /* `> button` would make this (0,2,1) and quietly outrank the un-dim
       below it at (0,2,0) - the target stayed dimmed with both rules
       matching. `> *` keeps them level so source order decides, which is
       what was intended. */
    /* A GUIDED STEP IS EXCLUSIVE. Dimming told the pilot where to look and
       then let them tap anything anyway - so the step could be walked past
       without being done, which is how a first-timer ends up equipped with
       the wrong thing and no idea why the coach is still nagging. Only the
       target answers a tap while a step is live.
       The two selectors are the SAME specificity (0,2,0), so the target
       rule wins on source order alone - it has to stay below this one. */
    .ac-guiding .ac-card, .ac-guiding .ac-shelfrow > * {
      opacity: .38; filter: saturate(.5); pointer-events: none; }
    .ac-guiding .ac-guidetarget { opacity: 1; filter: none; pointer-events: auto; }
    /* THE ARROW SITS INSIDE THE CARD. Above it is the obvious place and it
       does not work: the shelf is a horizontal scroller (overflow:auto), so
       anything drawn outside a card's own box is clipped away and the arrow
       simply never appeared. Inside the top edge, pointing down into the
       item, cannot be clipped by anything. */
    .ac-guidetarget { position: relative; z-index: 3;
      box-shadow: 0 0 0 2px #ffd782, 0 0 22px rgba(255,205,110,.55); }
    .ac-guidetarget::after {
      content: ""; position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
      width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
      border-top: 12px solid #ffd782;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.85));
      animation: acGuideArrow 1.05s ease-in-out infinite; }
    @keyframes acGuideArrow { 0%,100% { top: 3px; } 50% { top: 9px; } }
    @media (prefers-reduced-motion: reduce) {
      .ac-guidetarget::after { animation: none; } }
    .ac-guideflash { box-shadow: 0 0 0 3px #ffd782, 0 0 26px rgba(255,205,110,.85) !important; }
    .ac-coachfind .ac-coachhint { display: block; font-style: normal; margin-top: 3px;
      font: 700 11px/1.2 Figtree, sans-serif; letter-spacing: .08em;
      text-transform: uppercase; color: #ffd782; opacity: .95; }
    .ac-coach { position: absolute; left: 18px; right: 18px; bottom: 96px; z-index: 40;
      background: #1a2340; border: 1px solid #d4af37; border-radius: 14px; padding: 11px 14px;
      font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #ffe9a8; text-align: center;
      box-shadow: 0 8px 26px rgba(0,0,0,.55); animation: acCoachIn .35s ease; pointer-events: none; }
    @keyframes acCoachIn { from { opacity: 0; transform: translateY(10px); } }
    /* THE COACH BECOMES A CONTROL, so it has to stop being a caption.
       The base .ac-coach is `pointer-events: none` and floats at
       bottom:96px - which is why tapping it did nothing, and why it kept
       landing on top of a card. Sticky puts it in the flow at the bottom of
       the shelf: always on screen, never over an item, and pressable. */
    .ac-coachfind { position: sticky; left: auto; right: auto; bottom: 10px;
      z-index: 60; pointer-events: auto; cursor: pointer;
      margin: 14px 0 4px; animation: none;
      -webkit-tap-highlight-color: transparent; }
    .ac-coachfind:active { transform: scale(.985); }
    /* THE TARGET IS BELOW THE FOLD, and the coach says which way. Added
       only when the card has been MEASURED off screen - see drawLoadout.
       The arrow travels rather than blinking, because the instruction is
       "move down", and it is the one thing on a dimmed shelf that moves. */
    .ac-coachdown { padding-bottom: 22px; }
    .ac-coachdown::after { content: "\2193"; position: absolute; left: 50%;
      bottom: 2px; transform: translateX(-50%); font: 900 17px/1 Figtree, sans-serif;
      color: #ffd782; animation: acCoachDown 1.15s ease-in-out infinite; }
    @keyframes acCoachDown { 0%, 100% { transform: translate(-50%, 0); opacity: .55; }
      55% { transform: translate(-50%, 6px); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .ac-coachdown::after { animation: none; opacity: 1; } }
    /* the run lifelines: the continue leads with the acorn's gold, the
       shortfall note stays quiet, and a mission's restart reads as the
       middle path between resume and abort */
    .ac-continue { background: linear-gradient(180deg, #ffd76a, #d4a12e);
      color: #241a04; border-color: #ffe9a8; }
    .ac-continue-short { opacity: .75; margin: 2px 0 6px; }
    /* the ad continue (13 Sep 2026): the free way on, in the acorn button's shape but green so the two read as different offers */
    .ac-continue.ac-adbtn { background: linear-gradient(180deg, #7ef0a8, #2fb56d); color: #062416; }
    .ac-continue.ac-adbtn:disabled { opacity: .6; }
    /* the Shop's rewarded-dust row: FREE where a price would be */
    .ac-adrow .ac-modprice { color: #7ef0a8; letter-spacing: .06em; }
    /* HOLD, DON'T TAP. The fill is the promise being kept: it grows for
       exactly as long as the hold the script is counting, so letting go
       early visibly costs nothing. Painted in the button's own ::after so
       no extra element rides in the sheet. */
    .ac-holdbtn { position: relative; overflow: hidden; }
    .ac-holdbtn::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: 0; background: rgba(255, 255, 255, .34); pointer-events: none; }
    .ac-holdbtn.ac-holding::after { animation: acHoldFill var(--ac-hold, 550ms) linear forwards; }
    @keyframes acHoldFill { from { width: 0; } to { width: 100%; } }
    .ac-restart { border-color: rgba(255,215,106,.55); color: #ffd76a; }
    .ac-pulse { animation: acPulse 1.15s ease-in-out infinite; border-color: #ffd76a !important; }
    @keyframes acPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 106, .55); }
      55% { box-shadow: 0 0 0 8px rgba(255, 215, 106, 0); } }
    .ac-gear { margin: 8px 0 2px; padding: 10px 12px; background: rgba(212,175,55,.08);
      border: 1px solid rgba(212,175,55,.45); border-radius: 14px; }
    .ac-gearhead { font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px; }
    .ac-gearrow { display: flex; gap: 18px; justify-content: center; }
    .ac-gearcell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .ac-gearcell canvas { width: 56px; height: 56px; }
    .ac-sheet-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 6px; }
    :root { --ac-choice-line: #A99BE8; --ac-choice-fill: rgba(153,142,177,.14); --ac-choice-ring: 0 0 0 3px rgba(169,155,232,.16); }
    .ac-card.on { border-color: var(--ac-choice-line); background: var(--ac-choice-fill); box-shadow: var(--ac-choice-ring); }
    .ac-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
    .ac-ctrl { border-radius: 16px; padding: 12px 8px; text-align: center; border: 1px solid; }
    .ac-tap { background: rgba(58,140,255,.14); border-color: rgba(90,160,255,.6); }
    .ac-swipe { background: rgba(255,150,60,.12); border-color: rgba(255,170,80,.55); }
    .ac-glyph { font-size: 20px; line-height: 1; margin-bottom: 6px; }
    .ac-tap .ac-glyph { color: #5aa0ff; }
    .ac-swipe .ac-glyph { color: #ffb060; }
    .ac-ctrltitle { font-weight: 800; font-size: 15px; }
    .ac-tap .ac-ctrlsub { color: #9cc4ff; font-size: 11px; font-weight: 700; }
    .ac-swipe .ac-ctrlsub { color: #ffc080; font-size: 11px; font-weight: 700; }
    .ac-mid { text-align: center; }
    .ac-helprow { display: flex; align-items: center; gap: 12px; padding: 7px 2px; }
    /* Help-only control cards share the premium button finish. Runtime pads
       and the launch briefing retain their own layout and event handlers. */
    .ac-helpdeck > .ac-menuhead, .ac-helpdeck > .ac-sheet-scroll {
      width: 100%; max-width: 760px; margin-inline: auto; }
    .ac-helpdeck .ac-helpmode { margin: 2px 0 18px; }
    .ac-helpdeck .ac-helpheading { margin: 0 0 9px; color: #f3d492;
      font: 900 14px/1.2 Figtree, sans-serif; letter-spacing: .035em; }
    .ac-helpdeck .ac-helpcontrols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .ac-helpdeck .ac-helpcontrol { --pad-light: var(--mb, #a9f5ff); --pad-edge: var(--m1, #2f9fe9);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
      min-width: 0; min-height: 112px; padding: 12px 6px; text-align: center;
      border: 1px solid #e3bc70; border-radius: 16px;
      background: radial-gradient(ellipse at top, var(--mw2, #294d70), transparent 80%), linear-gradient(#17213d, #080b1c);
      box-shadow: inset 0 1px 0 #fff0bc66, inset 0 0 16px var(--mw, #2f9fe933), 0 0 10px var(--mw, #2f9fe933); }
    .ac-helpdeck .ac-help-dive { --pad-light: #ffd490; --pad-edge: #e39a55;
      background: radial-gradient(ellipse at top, #794527, transparent 85%), linear-gradient(#32223b, #100c23); }
    .ac-helpdeck .ac-helpglyph { color: var(--pad-light); font: 900 23px/1 Figtree, sans-serif;
      text-shadow: 0 0 12px var(--pad-edge); }
    .ac-helpdeck .ac-helpcontrol b, .ac-helpdeck .ac-spillhelp-controls b {
      font: 900 13px/1.15 Figtree, sans-serif; letter-spacing: .035em; color: var(--pad-light);
      text-shadow: 0 0 12px var(--pad-edge); }
    .ac-helpdeck .ac-helpaction, .ac-helpdeck .ac-spillhelp-controls span {
      color: #f3d492; font: 800 10px/1.2 Figtree, sans-serif; letter-spacing: .04em; }
    .ac-helpdeck .ac-helpkeys, .ac-helpdeck .ac-spillhelp-controls small,
    .ac-helpdeck .ac-spillhelp-extra { margin: 0; color: #d3b8f2; font: 700 10px/1.3 Figtree, sans-serif; }
    .ac-helpdeck .ac-spillhelp-controls { margin: 0; gap: 8px; }
    .ac-helpdeck .ac-spillhelp-controls > .ac-spillhelp-pad {
      min-height: 88px; justify-content: center; border: 1px solid #e3bc70;
      background: linear-gradient(155deg, #273647, #100d27 70%);
      box-shadow: inset 0 1px 0 #fff0bc66, inset 0 0 14px #a276d333, 0 0 10px #a276d333; }
    @supports (background: color-mix(in srgb, #fff 10%, #000)) {
      .ac-helpdeck .ac-helpcontrol, .ac-helpdeck .ac-spillhelp-controls > .ac-spillhelp-pad {
        background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--pad-edge) 72%, #19243a), transparent 88%), linear-gradient(#1d1c35, #08091a);
        box-shadow: inset 0 1px 0 #fff0bc66, inset 0 0 15px color-mix(in srgb, var(--pad-light) 22%, transparent),
          0 0 12px color-mix(in srgb, var(--pad-edge) 32%, transparent); }
    }
    .ac-helpdeck .ac-helpextras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: 8px; margin-top: 8px; }
    .ac-menu.ac-helpdeck .ac-helpbriefing, .ac-menu.ac-helpdeck .ac-replay {
      min-height: 44px; padding: 10px 18px; border: 1px solid #e3bc70; border-radius: 999px; color: #ffe2a0;
      background: radial-gradient(ellipse at top, #6e3da0, #1b113c 80%);
      box-shadow: inset 0 1px 0 #fff0bc66, inset 0 0 12px #c390ee66, 0 0 10px #ac65e966;
      font: 900 11px/1.2 Figtree, sans-serif; letter-spacing: .06em; }
    .ac-helpdeck .ac-backbtn { min-width: 44px; min-height: 44px; border-color: #e3bc70; color: #ffe2a0;
      background: radial-gradient(ellipse at top, #6e3da0, #1b113c 80%); box-shadow: inset 0 0 10px #c390ee55, 0 0 8px #ac65e955; }
    .ac-helpdeck .ac-helpitemsheading { margin-top: 20px; }
    .ac-helpdeck .ac-helprow > canvas { flex: none; }
    .ac-helpdeck .ac-helprow > div > p:first-child { color: #f3d492; font-weight: 900; }
    .ac-helpdeck .ac-helprow .ac-sub { color: #c9bbe3; font-size: 12px; line-height: 1.35; }
    .ac-helpdeck button:focus-visible { outline: 2px solid #fff1b2; outline-offset: 3px; }
    @keyframes ac-pulse { 0%,100% { box-shadow: 0 0 8px rgba(232,164,74,.18); } 50% { box-shadow: 0 0 18px rgba(232,164,74,.4); } }
    .ac-playbar { display: flex; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px; }
    /* the first flight can be left; the button sits beside pause and is
       deliberately quiet, so it reads as an escape hatch rather than an
       invitation to leave the lesson */
    /* THE GUIDED STEP. For the two minutes the guided path runs, the next
       thing to do is the loudest thing on screen — and FREE FLIGHT, which
       points away from it, steps down. Gold rather than blue, so the two
       are never mistaken for each other at a glance. */
    .ac-hubtile.t-guide { grid-column: 1 / -1; flex-direction: row;
      justify-content: center; gap: 13px; padding: 13px 10px;
      --m1: #f0b64a; --m2: #b8730a; --t1: #c98a1a; --t2: #6b3d05;
      --tb: #ffd782; border-color: rgba(255, 214, 130, .85);
      box-shadow: 0 0 0 2px rgba(255,210,130,.45), 0 0 26px rgba(230,170,60,.5),
        0 12px 26px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3),
        inset 0 -3px 0 rgba(0,0,0,.28); }
    .ac-hubtile.t-guide b { font-size: 21px; }
    .ac-hub-stepstar { font-size: 34px; line-height: 1; color: #ffd782;
      text-shadow: 0 0 14px rgba(255, 200, 90, .7); }
    /* while guiding, the endless mode is present but no longer shouting */
    .ac-guiding .ac-hubtile.t-launch { filter: saturate(.55) brightness(.78);
      transform: scale(.985); }
    .ac-guiding .ac-hubtile.t-launch .ac-hub-ribbon { opacity: .7; }
    /* IN THE FLOW, not floating. The absolute coach was landing on top of
       the STAR CHART bar it was pointing at and covering that bar's own
       progress line — the instruction hid its target. */
    .ac-coach.ac-coach-inline { position: static; left: auto; right: auto;
      bottom: auto; margin: 8px 0 0; z-index: auto; }
    body.ac-beta .ac-coach.ac-coach-inline { bottom: auto; }
    .ac-tutskip { font-size: 11px; padding: 8px 14px; letter-spacing: .1em;
      align-self: center; margin-right: 8px; opacity: .75;
      min-height: 44px; min-width: 60px; }
    .ac-playbar { align-items: center; }
    .ac-iconbtn { width: 40px; height: 40px; border-radius: 12px; background: rgba(20,27,48,.8); color: #f3efe4; border: 1px solid #2a3454; font-weight: 800; }
    /* Spill controls sit beyond the pilot's flight band. Empty space between
       buttons passes gestures through to the field; Pulse fires automatically. */
    .ac-overlay > .ac-spillbar { position: absolute; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
    .ac-spillbar button { pointer-events: auto; min-width: 88px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
      font: 800 12px/1 Figtree, sans-serif; letter-spacing: .14em; border: 1px solid rgba(255,255,255,.18);
      background: rgba(14,20,38,.8); color: #7c8bb0; }
    .ac-spillbar .ac-lunge { color: #7fd6ff; border-color: rgba(127,214,255,.4); }
    .ac-spillbar .ac-lunge.spent { opacity: .45; }
    .ac-spillbar .ac-pulse.ready { color: #06121e; background: linear-gradient(180deg, #9fe6ff, #6fb8ff);
      border-color: #cfefff; box-shadow: 0 0 22px rgba(120,200,255,.55); }
    /* The Depot's scroll container, balance and input arming. */
    .ac-depotcard { gap: 8px; max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
      width: min(720px, 100%); margin-inline: auto; overscroll-behavior: contain; }
    .ac-depotcard > * { flex: none; }
    /* the ship's meters: one segment per level, lit as it fills */
    /* inert for a moment after docking: a thumb still tapping buys nothing */
    .ac-depotcard.arming .ac-offer, .ac-depotcard.arming .ac-depotact, .ac-depotcard.arming .ac-primary { opacity: .35; pointer-events: none; }
    .ac-depotwrap { background: rgba(8,5,26,.68); }
    .ac-depotcard { text-align: left; padding-bottom: 0; }
    .ac-depotcard .ac-lvlname { margin-bottom: 2px; }
    .ac-spilloptions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    /* Loadout family (10 Sep 2026): violet card, teal choice tokens when fitted, gold for the price word */
    .ac-spilloption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 60px; padding: 12px; border: 1px solid #8656ba; border-radius: 16px; background: linear-gradient(145deg, rgba(23,12,46,.93), rgba(8,6,24,.88)); box-shadow: inset 0 0 0 1px #c386ff15, 0 0 7px #aa69ee22; color: #f9f4ff; text-align: left; font: 600 12px/1.4 Figtree,sans-serif; cursor: pointer; }
    .ac-spilloption b { font-size: 13px; } .ac-spilloption span { color: #e1d9f1; } .ac-spilloption strong { color: #ffd76a; font-size: 11px; }
    .ac-spilloption.selected { border-color: var(--ac-choice-line); background: var(--ac-choice-fill); box-shadow: var(--ac-choice-ring); } .ac-spilloption:disabled { cursor: default; opacity: .5; }
    .ac-spilloption:focus-visible { outline: 2px solid #fff1b2; outline-offset: 3px; }
    .ac-spillprep { position: absolute; bottom: max(18px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(450px,calc(100% - 28px)); max-height: 70%; overflow: auto; pointer-events: auto; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #110b23, #090615); border: 1px solid #7951a7; border-radius: 18px; box-shadow: inset 0 1px 0 #d3a1ff22, 0 12px 60px #0008; }
    .ac-spillprep h2 { margin: 0; font: 700 28px Fraunces,serif; }
    .ac-spillprep p { margin: 0; }
    @media(max-width:380px) { .ac-spilloptions { grid-template-columns: 1fr; }}

    /* ================= THE HUB (v85) =================
       The home is a hub of saturated tiles over the purple key art.
       Sub-screens keep the galaxy chrome; only home wears this. */
    .ac-hub { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
      background: #120a2c; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom)); }
    .ac-hub-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 26%; filter: saturate(1.1); }
    .ac-hub-scrim { position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(16,7,38,.68) 0%, rgba(16,7,38,.12) 22%, rgba(16,7,38,.14) 60%, rgba(10,4,26,.82) 94%); }
    /* stack every hub child over the art with three same-specificity
       rules, last one wins: the art and scrim stay ABSOLUTE (the :not()
       fix in v87 accidentally out-specified them into zero-height
       relative divs — the vanished background), and the mode sheet stays
       FIXED so it overlays instead of rendering inline and clipped. */
    .ac-hub > * { position: relative; }
    .ac-hub > .ac-hub-art, .ac-hub > .ac-hub-scrim { position: absolute; }
    .ac-hub > .ac-lvlsheet { position: fixed; }
    .ac-hub-art, .ac-hub-scrim { position: absolute; }
    /* ONE bar for the whole top rail (owner's call): the capsule background
       that used to sit on each cluster now wraps the group, and every item
       inside carries its own slight pill so the spacing reads as one unit. */
    .ac-hub-rail { --ac-hub-control-size: 44px; flex: none; display: flex; align-items: center; gap: 6px;
      background: linear-gradient(180deg, rgba(55,32,81,.96), rgba(19,11,40,.96));
      border: 1.5px solid rgba(220,178,102,.7); border-radius: 22px; padding: 5px 6px;
      box-shadow: inset 0 1px 1px rgba(255,226,165,.22), 0 4px 16px rgba(7,2,19,.3); }
    .ac-hub-railgap { flex: 1; }
    .ac-hub-sq { position: relative; width: var(--ac-hub-control-size,44px); height: var(--ac-hub-control-size,44px); border-radius: 12px;
      background: radial-gradient(ellipse at 50% 0, rgba(197,139,239,.23), transparent 72%), linear-gradient(#342046, #150b29);
      border: 1px solid rgba(229,189,114,.65); display: flex; align-items: center; justify-content: center; color: #f6e5bc;
      box-shadow: inset 0 1px 1px rgba(255,232,183,.25), inset 0 -2px 3px rgba(5,2,13,.6), 0 3px 8px rgba(5,2,13,.35); }
    .ac-hub-sq img { width: 34px; height: 34px; mix-blend-mode: screen; border-radius: 10px;
      filter: drop-shadow(0 1px 3px rgba(225,166,78,.25)); }
    .ac-hub-sq canvas { width: 36px; height: 36px; }
    .ac-hub-wordmark { margin-top: 10px; text-align: center; }
    .ac-hub-title { font-family: Fraunces, serif; font-weight: 800; font-size: 40px; line-height: .95;
      background: linear-gradient(#fff 25%, #cfd6f2 60%, #9aa6d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 3px 14px rgba(20,10,50,.9)); }
    .ac-hub-kicker { margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.45;
      text-transform: uppercase; text-wrap: balance;
      color: #c9b1ff; text-shadow: 0 1px 8px rgba(10,5,30,.9); }
    .ac-hub-space { flex: 1 1 auto; min-height: 60px; }
    .ac-hub-tiles { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
    .ac-hubtile { position: relative; border-radius: 20px; padding: 12px 8px 10px; display: flex; flex-direction: column;
      align-items: center; gap: 5px; color: #fff;
      background: radial-gradient(ellipse at 50% 0, rgba(255,234,190,.25), transparent 64%),
        linear-gradient(155deg, rgba(255,235,200,.08), transparent 45%), linear-gradient(180deg, var(--t1,#1a1f3a), var(--t2,#0e1122));
      border: 2px solid color-mix(in srgb, var(--tb,#b799df) 38%, #e4bd70);
      box-shadow: 0 9px 22px rgba(0,0,0,.5), 0 0 16px rgba(168,107,223,.14),
        inset 0 2px 0 rgba(255,233,188,.42), inset 0 0 0 1px rgba(255,223,155,.12), inset 0 -3px 0 rgba(0,0,0,.3); }
    .ac-hubtile:active { transform: translateY(1px) scale(.99);
      box-shadow: inset 0 2px 8px rgba(8,3,22,.55), inset 0 0 0 1px rgba(255,225,164,.35), 0 3px 9px rgba(0,0,0,.4); }
    /* BIG TYPE ON BIG TILES (owner, 7 Sep 2026: "the buttons are big but
       the content on them is small") */
    .ac-hubtile b { font-size: 19px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
    .ac-hubsub { font-size: 12.5px; color: rgba(255,255,255,.88); font-weight: 700; margin-top: -3px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
    .ac-hubic { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at 50% 15%, rgba(255,214,151,.13), rgba(8,10,24,.5) 75%); border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255,230,172,.23), inset 0 0 0 1px rgba(255,223,166,.16), inset 0 -3px 6px rgba(0,0,0,.3); }
    .ac-hubic img, .ac-hubic canvas { max-width: 58px; max-height: 58px; object-fit: contain; }
    .ac-hubic .ac-hubic-img { mix-blend-mode: screen; border-radius: 12px; }
    .ac-hubdot { position: absolute; top: 9px; right: 10px; width: 11px; height: 11px; border-radius: 50%;
      background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; }
    .t-launch { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 14px; padding: 16px 12px 13px;
      --t1: #2f8fe0; --t2: #123f80; --tb: #8fdaff;
      box-shadow: 0 0 0 2px rgba(120,200,255,.4), 0 0 26px rgba(90,180,255,.5), 0 12px 26px rgba(0,0,0,.5),
        inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.28); }
    /* LAUNCH: one word, centred, large and in charge (owner) */
    .t-launch b { font-size: 34px; line-height: 1; letter-spacing: .08em; }
    .t-launch .ac-hubic { width: 66px; height: 66px; }
    .t-launch .ac-hubic img, .t-launch .ac-hubic canvas { max-width: 62px; max-height: 62px; }
    .ac-hub-launchtxt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
      min-width: 0; max-width: 100%; flex: 0 1 auto; }
    .ac-hub-launchtxt .ac-hubsub { letter-spacing: .16em; text-transform: uppercase; color: #d4ecff; margin-top: 0; font-size: 12px; }
    .t-launch .ac-hub-active { justify-content: center; font-size: 9.5px; }
    .t-loadout { --t1: #8a5ae4; --t2: #44249a; --tb: #c4a0ff; }
    .t-chart { --t1: #25c58c; --t2: #0a6248; --tb: #7af2bd; }
    .t-modes { --t1: #eda03c; --t2: #8f4d0e; --tb: #ffd88f; }
    .ac-hubtile:is(.t-loadout, .t-chart, .t-modes) { min-width: 0; padding-inline: 5px; }
    .ac-hubtile:is(.t-loadout, .t-chart, .t-modes) b { font-size: clamp(12px, 3.65vw, 19px); white-space: nowrap; letter-spacing: .025em; }
    .ac-hubtile:is(.t-loadout, .t-chart, .t-modes) .ac-hubsub { font-size: 11px; text-align: center; overflow-wrap: anywhere; }
    .t-chart .ac-hub-track { width: 100%; margin-top: 0; flex: none; }
    .t-profile { --t1: #5b64e0; --t2: #282f92; --tb: #a2aaff; }
    /* the mode tab on the launch tile: GOLD on the blue, so the selected
       mode reads before anything else (owner, 7 Sep 2026: "should be a
       different color so it stands out better") */
    .ac-hub-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
      background: linear-gradient(180deg,#ffe08a,#e9a62a); color: #2a1604; font-size: 10.5px; font-weight: 900; letter-spacing: .14em;
      padding: 4.5px 16px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 0 1.5px rgba(255,236,170,.55);
      clip-path: polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%); }
    .ac-hub-track { position: relative; display: block; height: 14px; border-radius: 999px; background: #0b0618;
      border: 1px solid rgba(255,206,92,.35); overflow: hidden; margin-top: 4px; }
    .ac-hub-track i { display: block; height: 100%; background: linear-gradient(90deg, #c07f1f, #ffd76a); border-radius: 999px; }
    .ac-hub-track em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal;
      font-size: 9.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); letter-spacing: .05em; }
    .ac-hubtile, .ac-hub-sq { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .ac-hub-sq:active { transform: translateY(1px);
      box-shadow: inset 0 2px 8px rgba(8,3,22,.6), 0 2px 7px rgba(0,0,0,.35); }
    .ac-hub button:focus-visible, .ac-hub-sq:focus-visible { outline: 2px solid #fff0ba; outline-offset: 3px; }
    @media (hover: hover) {
      .ac-hubtile:hover:not(:active), .ac-hub-sq:hover:not(:active) { border-color: #ffe5a5;
        box-shadow: inset 0 1px 1px rgba(255,238,197,.5), 0 0 0 1px rgba(230,184,103,.25), 0 0 20px rgba(177,113,230,.35), 0 8px 22px rgba(0,0,0,.4); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ac-hubtile, .ac-hub-sq { transition: none; }
      .ac-hubtile:active, .ac-hub-sq:active { transform: none; }
    }
    /* landscape: Launch, Loadout, Star Chart and Modes share one row */
    @media (orientation: landscape) {
      .ac-hub { padding: 12px 22px 14px; }
      .ac-hub-art { background-position: 50% 18%; }
      .ac-hub-wordmark { text-align: left; margin: 2px 0 0 4px; }
      .ac-hub-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; max-width: 860px; width: 100%; align-self: center; }
      .t-launch { grid-column: auto; flex-direction: column; gap: 5px; padding: 14px 8px 10px; }
      .t-launch b { font-size: 24px; }
      .ac-hub-launchtxt { align-items: center; text-align: center; }
      .ac-hub-active { justify-content: center; }
    }
    /* ---- MODES: one saturated row per way to fly ---- */
    .ac-modecard { gap: 9px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .ac-modecard > .ac-menuhead { padding: 0 0 3px; justify-content: flex-start; align-items: center; }
    .ac-modecard .ac-backbtn { width: 44px; height: 44px; }
    .ac-moderow { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
      border-radius: 18px; padding: 10px 12px; color: #f3efe4;
      background: linear-gradient(100deg, var(--mw, rgba(30,38,64,.55)), rgba(12,8,28,.5) 64%);
      border: 1.5px solid var(--m1, #2a3454);
      box-shadow: 0 6px 18px -12px rgba(0,0,0,.9); }
    .ac-moderow.on { border-color: var(--mb, #A99BE8);
      background: linear-gradient(100deg, var(--mw2, rgba(60,70,120,.75)), rgba(14,9,32,.55) 72%);
      box-shadow: 0 0 0 1px var(--m1, #A99BE8), 0 10px 28px -12px var(--m1, #A99BE8),
        inset 0 1px 0 rgba(255,255,255,.18); }
    /* the face plate: real game art, lit by the mode's own hue */
    .ac-modeic { position: relative; flex: none; width: 54px; height: 54px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(78% 78% at 50% 22%, var(--mw2, rgba(60,70,120,.5)), rgba(6,4,18,.72));
      border: 1px solid var(--m1, #2a3454); }
    .ac-modeic canvas, .ac-modeic img { width: 44px; height: 44px; object-fit: contain;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,.65)); }
    .ac-modeicart { border-radius: 12px; }
    .ac-modetick { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center; font-style: normal;
      font: 900 11px/1 Figtree, sans-serif; color: #241500;
      background: linear-gradient(180deg, #ffe08a, #e0a02a); border: 1.5px solid rgba(20,12,40,.9);
      box-shadow: 0 2px 8px -2px rgba(255,190,80,.9); }
    .ac-moderowtxt { flex: 1; min-width: 0; }
    .ac-moderowtxt b { display: block; font-size: 15px; font-weight: 900; letter-spacing: .04em; }
    .ac-moderowtxt span { display: block; font-size: 11.5px; color: #97a2bf; margin-top: 2px; }
    /* the record chip — gold, like every number you earned */
    .ac-modebest { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
      border-radius: 999px; padding: 6px 14px;
      background: linear-gradient(180deg, #ffd76a, #dd9c25); border: 1px solid rgba(255,238,190,.55);
      box-shadow: 0 4px 12px -4px rgba(255,180,60,.65); }
    .ac-modebest i { font: 800 8px/1 Figtree, sans-serif; font-style: normal; letter-spacing: .16em; color: #6b4400; }
    .ac-modebest b { font: 900 16px/1 Figtree, sans-serif; color: #2a1800; }
    .ac-modelock { flex: none; display: flex; align-items: center; gap: 5px; border-radius: 999px; padding: 8px 12px;
      background: rgba(8,6,20,.72); border: 1px solid rgba(140,150,190,.3); color: #aeb8d4; }
    .ac-modelock b { font: 900 12px/1 Figtree, sans-serif; }
    .ac-modelock svg { opacity: .75; }
    /* every mode its own hue, drawn from the hub's tile palette */
    .m-fly { --m1: #3d7bfa; --mb: #9dc0ff; --mw: rgba(61,123,250,.20); --mw2: rgba(61,123,250,.42); }
    .m-deep { --m1: #8a5ae4; --mb: #c9abff; --mw: rgba(138,90,228,.20); --mw2: rgba(138,90,228,.42); }
    .m-lost { --m1: #e0447c; --mb: #ffa3c4; --mw: rgba(224,68,124,.20); --mw2: rgba(224,68,124,.42); }
    .m-arcade { --m1: #eda03c; --mb: #ffd490; --mw: rgba(237,160,60,.20); --mw2: rgba(237,160,60,.42); }
    .m-tunnel { --m1: #1db388; --mb: #7cebc2; --mw: rgba(29,179,136,.20); --mw2: rgba(29,179,136,.42); }
    .m-race { --m1: #2f9fe9; --mb: #a9f5ff; --mw: rgba(47,159,233,.20); --mw2: rgba(47,159,233,.44); }
    .m-spill { --m1: #8a5cf0; --mb: #d9b8ff; --mw: rgba(138,92,240,.20); --mw2: rgba(138,92,240,.44); }
    /* the lab, under a rule and deliberately quieter than a mode */
    .ac-modeshead { display: flex; align-items: center; gap: 10px; margin: 8px 0 1px;
      font: 800 9px/1 Figtree, sans-serif; letter-spacing: .2em; color: #7c86a4; }
    .ac-modeshead::after { content: ""; flex: 1; height: 1px;
      background: linear-gradient(90deg, rgba(140,150,190,.35), transparent); }
    .ac-modedoor { border: 1px dashed rgba(140,150,190,.3); background: rgba(10,7,26,.45);
      color: #9aa6c4; padding: 11px 14px; box-shadow: none; }
    .ac-modedoor .ac-moderowtxt b { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
    .ac-modedoor svg { flex: none; opacity: .65; }
    /* ---- TEST LAB (beta + dev doors only): the flask, its sheet, the Flight Test dock ---- */
    .ac-hub-lab svg { width: 24px; height: 24px; }
    .ac-hub-lab { border-color: rgba(74,216,255,.7); }
    .ac-hub-rail.ac-hub-rail-lab { gap: 4px; }
    @media (max-width: 380px) { .ac-hub-rail.ac-hub-rail-lab { --ac-hub-control-size: 34px; gap: 3px; padding-inline: 3px; } }
    .ac-testlab { gap: 8px; }
    .ac-testlab-stamp { font: 700 10px/1 Figtree, sans-serif; letter-spacing: .12em; color: #7c86a4; margin: -4px 0 0; }
    .ac-testlab-go { --m1: #4ad8ff; border-style: solid; border-color: rgba(74,216,255,.7); color: #f3efe4;
      background: linear-gradient(100deg, rgba(74,216,255,.22), rgba(12,8,28,.5) 64%); }
    .ac-testlab-dials { display: flex; flex-direction: column; gap: 8px; }
    .ac-testlab-note { font-size: 11px; color: #97a2bf; margin: 0; }
    .ac-testlab-reset { margin-top: 6px; }
    .ac-testlab-reset.on { border-color: #ff8a6a; color: #ffd6c9; }
    .ac-ftdock { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 12;
      display: flex; flex-direction: column; gap: 5px; padding: 8px 8px 6px; border-radius: 16px;
      max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
      background: linear-gradient(180deg, rgba(19,12,40,.94), rgba(10,7,24,.96)); border: 1px solid #4f3f7c;
      box-shadow: 0 10px 30px -12px rgba(0,0,0,.9); }
    .ac-ftdock > * { flex: none; }
    .ac-ftreads { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
    .ac-ftreads div { display: flex; flex-direction: column; align-items: center; gap: 1px;
      font: 700 8.5px/1.2 Figtree, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #97a2bf; }
    .ac-ftreads b { font: 800 13px/1.2 Figtree, sans-serif; color: #f3efe4; font-variant-numeric: tabular-nums; }
    .ac-ftlabel { margin: 2px 0 0; font: 800 9px/1 Figtree, sans-serif; letter-spacing: .2em; color: #7c86a4; }
    .ac-ftseg .ac-mode { min-height: 32px; font-size: 9.5px; padding: 0 2px; }
    /* ---- the chapter map ---- */
    .ac-chartmapwrap { display: flex; justify-content: center; padding: 4px 0 14px; }
    .ac-chartmap { position: relative; }
    .ac-mappath { position: absolute; inset: 0; }
    .ac-mapnode { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;
      gap: 3px; background: none; border: 0; color: inherit; padding: 0; }
    .ac-mapdisc { position: relative; display: flex; align-items: center; justify-content: center; color: #c9d2e8; }
    .ac-mapdisc canvas { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
    .ac-mapnode.done .ac-mapdisc::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
      border: 2px solid rgba(255,206,92,.55); box-shadow: 0 0 12px rgba(255,206,92,.3); }
    .ac-mapnode.cur .ac-mapdisc canvas { filter: drop-shadow(0 0 20px rgba(255,206,92,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
    .ac-mapnode.locked { pointer-events: none; }
    .ac-mapnode.locked .ac-mapdisc canvas { filter: grayscale(1) brightness(.55) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
    .ac-mapnode.locked .ac-mapdisc svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-55%);
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
    .ac-mapnum { position: absolute; right: -6px; bottom: -3px; min-width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font: 900 13px/1 Fraunces, serif; color: #4a2f05;
      background: radial-gradient(circle at 50% 32%, #ffe9a8, #e8a44a);
      box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 #fff3c9; }
    .ac-mapnode.todo .ac-mapnum, .ac-mapnode.locked .ac-mapnum {
      background: radial-gradient(circle at 50% 32%, #39415f, #1a2038); color: #98a2bd; }
    .ac-maprider { position: absolute; left: 50%; bottom: 68%; transform: translateX(-50%); width: 62px; pointer-events: none;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }

    /* the continuous chart's chapter dividers */

    /* ============ BETA CHROME ============
       The purple grade on every menu, hung off one body class so the
       live page keeps its shipped navy untouched. */
    body.ac-beta .ac-menu { background:
      radial-gradient(100% 45% at 50% -8%, rgba(96,52,170,.4), transparent 62%), #120a2c; }
    body.ac-beta .ac-sheet { background: rgba(16,8,36,.92); }
    body.ac-beta .ac-stagecard, body.ac-beta .ac-rows, body.ac-beta .ac-idcard, body.ac-beta .ac-rig,
    body.ac-beta .ac-tile, body.ac-beta .ac-log, body.ac-beta .ac-roaditem, body.ac-beta .ac-lockednote {
      background: rgba(24,15,50,.72); border-color: rgba(170,140,240,.26); }
    body.ac-beta .ac-card, body.ac-beta .ac-ghost, body.ac-beta .ac-cat, body.ac-beta .ac-modebar,
    body.ac-beta .ac-tab, body.ac-beta .ac-lvlbtn, body.ac-beta .ac-loadstrip, body.ac-beta .ac-tagpill {
      background: rgba(30,20,62,.85); border-color: rgba(170,140,240,.26); }
    body.ac-beta .ac-card.on { border-color: #c4a0ff; background: rgba(160,120,255,.18); }
    body.ac-beta .ac-lvlcard { background: #191036; border-top-color: rgba(170,140,240,.4); }
    body.ac-beta .ac-rows .ac-row { border-bottom-color: rgba(170,140,240,.16); }
    body.ac-beta .ac-switch { background: #241740; border-color: rgba(170,140,240,.3); }
    /* hub-and-spoke: the beta menus' way home, and room where the bar was */
    /* the same purple as the MODES back button, so it reads as a button and
       not a blend-in glyph (owner, 7 Sep 2026) */
    .ac-backbtn { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center;
      background: linear-gradient(180deg, #8a5ae4, #4a279c); border: 1px solid rgba(206,186,255,.5); color: #fff; align-self: center;
      box-shadow: 0 10px 26px -10px rgba(138,90,228,.85), inset 0 1px 0 rgba(255,255,255,.3); }
    .ac-backbtn:active { transform: scale(.94); }
    body.ac-beta .ac-menu .ac-sheet-scroll { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    body.ac-beta .ac-coach { bottom: calc(20px + env(safe-area-inset-bottom)); }
    /* pals at the roadside, greyed until their stars are banked */
    .ac-palmark { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column;
      align-items: center; gap: 2px; pointer-events: none; opacity: .45; filter: grayscale(.9) brightness(.7); }
    .ac-palmark.earned { opacity: 1; filter: none; }
    .ac-palmarkstar { font: 800 9px/1 Figtree, sans-serif; color: #ffd76a; background: rgba(16,8,36,.85);
      border: 1px solid rgba(255,206,92,.4); border-radius: 999px; padding: 2.5px 7px; letter-spacing: .06em; }
    /* the STANDARD shelf's stand-in for the two retired suits */
    /* the fused pilot + acorns capsule, left side of the rail */
    .ac-hub-id { display: grid; grid-template-columns: var(--ac-hub-control-size) repeat(2,minmax(0,1fr)); align-items: center; gap: 5px;
      flex: 0 1 246px; min-width: 0; }
    .ac-hub-idacorns { display: flex; align-items: center; gap: 6px; color: #ffdf9a; min-height: 34px;
      background: rgba(150,105,40,.30); border: 1px solid rgba(170,140,240,.18); border-radius: 999px;
      font-size: 15px; font-weight: 800; padding: 0 11px 0 8px; }
    .ac-hub-rail :is(.ac-hub-idport, .ac-hub-idnut, .ac-hub-iddust) {
      border-color: rgba(229,189,114,.65);
      box-shadow: inset 0 1px 1px rgba(255,232,183,.25), inset 0 -2px 3px rgba(5,2,13,.6), 0 3px 8px rgba(5,2,13,.35); }
    .ac-hub-rail .ac-hub-sq { flex: 0 0 var(--ac-hub-control-size); min-width: var(--ac-hub-control-size); }
    .ac-hub-id :is(.ac-hub-idnut, .ac-hub-iddust) { display: grid; min-width: 0; width: 100%; height: 34px; min-height: 34px;
      gap: 5px; padding: 0 8px; font-size: var(--ac-hub-amount-size,15px); }
    .ac-hub-idnut { grid-template-columns: 16px minmax(0,1fr); }
    .ac-hub-iddust { grid-template-columns: 14px minmax(0,1fr) 9px; }
    .ac-hub-id svg { flex-shrink: 0; }
    .ac-hub-amount { min-width: 0; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
    @media (max-width: 380px) {
      .ac-hub-rail { --ac-hub-control-size: 36px; gap: 3px; padding-inline: 4px; }
      .ac-hub-id { gap: 3px; }
      .ac-hub-id :is(.ac-hub-idnut, .ac-hub-iddust) { padding-inline: 5px; gap: 3px; }
    }
    /* Profile shares the Shop's violet surfaces and gold edges without
       changing the pilot's controls, inventory or destructive-action state. */
    body .ac-menu.ac-profile { color: #f6efff;
      background: radial-gradient(ellipse at 50% 0, rgba(123,63,166,.28), transparent 52%), linear-gradient(#180d2d, #0c071b); }
    .ac-profile > .ac-menuhead { width: 100%; max-width: 760px; margin-inline: auto; border-bottom: 1px solid rgba(232,193,113,.24); }
    .ac-profile .ac-menutitle { color: #ffe7a8; text-shadow: 0 2px 0 #593c13, 0 0 22px rgba(225,170,65,.2); }
    .ac-profile > .ac-sheet-scroll { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px;
      margin-inline: auto; padding-top: 12px; }
    .ac-profile > .ac-sheet-scroll > * { flex: none; }
    .ac-profile .ac-secthead { margin: 8px 0 0; color: #e9c68d; }
    body .ac-profile .ac-idcard, body .ac-profile .ac-tile, body .ac-profile .ac-rows {
      margin-top: 0; border-color: rgba(220,178,102,.64); background: linear-gradient(145deg, #28163f, #130b25);
      box-shadow: inset 0 1px 1px rgba(255,226,165,.16), 0 5px 18px rgba(6,2,16,.25); }
    .ac-profile .ac-tiles { gap: 10px; }
    .ac-profile .ac-tilenum { color: #ffe4a5; }
    .ac-profile .ac-tilelabel, .ac-profile .ac-setsub, .ac-profile .ac-sub { color: #c5b5d9; }
    body .ac-profile .ac-rows .ac-row { min-height: 52px; border-bottom-color: rgba(223,184,112,.2); gap: 12px; }
    .ac-profile .ac-idface { border-color: #caa867; background: radial-gradient(ellipse at 50% 24%, #58336e, #130b25 75%); }
    .ac-profile .ac-idtxt, .ac-profile .ac-socialtxt { flex: 1; min-width: 0; }
    .ac-profile .ac-idname, .ac-profile .ac-socialtxt { overflow-wrap: anywhere; }
    .ac-profile .ac-idnameedit, .ac-profile .ac-idnameok, .ac-profile .ac-invuse {
      min-width: 44px; min-height: 44px; border: 1px solid #d5b16f; color: #ffebbd;
      background: linear-gradient(#4c2b6c, #27163f); box-shadow: inset 0 1px 0 #ffe9b32b; }
    .ac-profile .ac-idnameinput { min-height: 44px; color: #fff3da; border-color: #ba9963; background: #140b26; }
    body .ac-profile .ac-switch { border-color: #9b79bd; background: #27163e; }
    body .ac-profile .ac-switch.on { border-color: #edc784; background: linear-gradient(#8d5abb, #542b80); }
    .ac-profile .ac-socialmark { border: 1px solid #d5b16f; background: #39214f; color: #ffdf9e; }
    .ac-profile .ac-reset { margin-top: 8px; }
    .ac-profile .ac-resetnote { margin-bottom: 10px; }
    .ac-profile button:focus-visible, .ac-profile a:focus-visible, .ac-profile input:focus-visible {
      outline: 2px solid #fff0ba; outline-offset: 3px; }
    /* hub icons that carry their own painted plate: no blend, just rounding */
    .ac-hubic .ac-hubic-art { width: 100%; height: 100%; max-width: none; max-height: none;
      object-fit: cover; border-radius: 14px; }
    .ac-hubequip { color: #7fe0b0; margin-top: 0; }
    .ac-palmark img, .ac-palmark canvas { max-width: 44px; max-height: 44px; object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
    .ac-rmarkname { font: 700 9px/1.15 Figtree, sans-serif; color: #c3cbe2; max-width: 96px; text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.85); }
    /* the milestone rail: every reward in one column on the chart's right edge */
    .ac-palmark.mile { width: 74px; padding: 5px 2px; border-radius: 12px;
      background: rgba(12,8,30,.55); border: 1px solid rgba(122,132,180,.2); }
    .ac-palmark.mile.earned { border-color: rgba(255,206,92,.35); }
    .ac-palmark.mile img, .ac-palmark.mile canvas { max-width: 40px; max-height: 40px; }
    .ac-palmark.mile .ac-rmarkname { max-width: 68px; }
    /* the loadout/shop category pills: bright, one hue per door, alive */
    body.ac-beta .ac-cat { color: #dfe4f7; font-weight: 800; background: rgba(18,14,42,.9);
      border: 1.5px solid var(--t1, #2a3454); }
    body.ac-beta .ac-cat.on { color: #fff; border-color: var(--tb, #cec6ff);
      background:
        radial-gradient(120% 180% at 18% -20%, rgba(255,255,255,.28), transparent 60%),
        linear-gradient(180deg, var(--t1, #6C5FB6), var(--t2, #463C86));
      box-shadow: 0 4px 16px -4px var(--t1, #6C5FB6), inset 0 1px 0 rgba(255,255,255,.4); }
    body.ac-beta .ac-cats > :nth-child(5n+1) { --t1: #8a5ae4; --t2: #44249a; --tb: #c4a0ff; }
    body.ac-beta .ac-cats > :nth-child(5n+2) { --t1: #1db388; --t2: #0a5a44; --tb: #6ce8bc; }
    body.ac-beta .ac-cats > :nth-child(5n+3) { --t1: #eda03c; --t2: #8f4d0e; --tb: #ffd88f; }
    body.ac-beta .ac-cats > :nth-child(5n+4) { --t1: #5b64e0; --t2: #282f92; --tb: #a2aaff; }
    body.ac-beta .ac-cats > :nth-child(5n+5) { --t1: #e0447c; --t2: #83164a; --tb: #ff9ec2; }
    /* the chart's deep-space backdrop: art pinned behind, content above.
       Same-specificity trio as the hub so the level sheet stays fixed. */
    .ac-chartscene > * { position: relative; }
    .ac-chartscene > .ac-lvlsheet { position: fixed; }
    /* the crash receipt: gates as the headline, the run's story in rows */
    .ac-crashscore { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 2px 0 4px; }
    .ac-crashscore b { font-family: Fraunces, serif; font-weight: 800; font-size: 46px; line-height: 1; color: #ffd76a;
      text-shadow: 0 2px 14px rgba(255,180,60,.35); }
    .ac-crashscore span { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #b7c0da; }
    .ac-crashrows { width: min(320px, 86vw); text-align: left; }
    .ac-rowdim { color: #cdd5ea; font-weight: 800; }
    /* ============ THE BETA STOREFRONT: one page, art-led ============ */
    .ac-shopbeta .ac-sheet-scroll { padding-bottom: 12px; }
    /* ---- THE DISPLAY CASE ----
       A lit vitrine, not a rectangle of empty purple. Every colour comes
       from --case-glow / --case-lite / --case-deep, which the suit on show
       sets, so changing character re-lights the glass. */
    /* the loadout wears the shop's case, but it sits above the category
       tabs rather than at the top of a scroll, so it carries its own
       breathing room and does not need the shop's lead-in gap */
    .ac-hangarcase { margin: 0 12px 10px; }
    .ac-hangarcase .ac-caseeyebrow { color: #7cebc2; }
    /* THE FOLDED CASE: double-tap (or the chevron) shrinks the vitrine to a
       strip so a long shelf is not read from under the pilot */
    .ac-casefold { position: absolute; top: 8px; left: 10px; z-index: 5; width: 26px; height: 26px;
      border-radius: 999px; background: rgba(10,16,32,.55); border: 1px solid rgba(150,166,200,.3);
      color: #cdd6ea; font-size: 12px; line-height: 1; padding: 0; }
    .ac-casecompact .ac-casepane { padding: 2px 0 0; }
    .ac-casecompact .ac-casecanvas { width: 160px !important; height: 110px !important; }
    .ac-casecompact .ac-casebeam, .ac-casecompact .ac-casefloor, .ac-casecompact .ac-casecorner { display: none; }
    .ac-casecompact .ac-caseplate { padding: 5px 14px 7px; }
    .ac-casecompact .ac-caseplate b { font-size: 14px; }
    .ac-casecompact .ac-casesub { display: none; }
    /* THE FAVOURITE STAR on a card, and the shelf it lights */
    .ac-favbtn { position: absolute; top: 4px; right: 5px; z-index: 3; width: 22px; height: 22px;
      display: flex; align-items: center; justify-content: center; border-radius: 999px;
      background: rgba(10,16,32,.55); color: #7d869f; font-size: 13px; line-height: 1; cursor: pointer; }
    .ac-favbtn.on { color: #ffd76a; background: rgba(255,215,106,.14); }
    /* 44px HIT AREAS (audit, 30 Sep 2026): the small controls keep their size
       and grow an invisible touch target around them */
    .ac-viewbtn, .ac-helpdot, .ac-backbtn, .ac-platebtn { position: relative; }
    .ac-favbtn::after, .ac-casefold::after, .ac-viewbtn::after, .ac-helpdot::after, .ac-backbtn::after, .ac-platebtn::after {
      content: ""; position: absolute; inset: -9px; }
    .ac-shelfempty { flex: 1 0 100%; margin: 6px 4px; color: #b9c0d8; font-size: 12px; }
    .ac-profile .ac-labnote a { display: inline-block; padding: 12px 8px; margin: -12px -8px; }
    .ac-favhead { color: #ffd76a; }
    /* the next-run shield, armed from the case plate */
    .ac-platebtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
      padding: 6px 11px; border-radius: 999px; background: rgba(77,155,255,.14);
      border: 1px solid rgba(127,184,255,.45); color: #cfe6ff;
      font: 800 9.5px/1 Figtree, sans-serif; letter-spacing: .12em; }
    /* PALS: the effects switch spans the two-wide pal grid */
    .ac-palfx { grid-column: 1 / -1; }
    /* Ships: visual build preview cards. Launch equipment lives above them. */
    .ac-shipnote { margin: 4px 12px 8px; padding: 9px 12px; border-radius: 12px;
      border: 1px dashed rgba(255,215,106,.45); background: rgba(255,215,106,.06);
      color: #ffd76a; font: 800 9.5px/1.4 Figtree, sans-serif; letter-spacing: .12em; text-align: center; }
    /* a SHIP row reads left to right: four fixed-width tier cards in the
       same scrolling shelf row every other tab uses */
    .ac-shelfrow .ac-shipcard { flex: 0 0 168px; width: 168px; flex-direction: column;
      align-items: flex-start; text-align: left; gap: 6px; }
    .ac-shelfrow .ac-shipcard .ac-modtxt { width: 100%; }
    .ac-shelfrow .ac-shipcard .ac-modprice { align-self: flex-end; }
    .ac-shiptier { font: 800 8.5px/1 Figtree, sans-serif; letter-spacing: .16em; color: #7d869f; }
    /* SHORT LISTS, NOT PARAGRAPHS: the briefing's aims and Help's modes */
    .ac-brieflist,    .ac-brieflist li { font-size: 12.5px; line-height: 1.35; color: #e9e4d6; }
    .ac-shopcase { --case-glow: #c4a0ff; --case-lite: #8a5ae4; --case-deep: #160f34;
      position: relative; margin: 6px 0 12px; border-radius: 20px; overflow: hidden;
      border: 1.5px solid color-mix(in srgb, var(--case-glow) 55%, transparent);
      background:
        radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--case-glow) 26%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--case-lite) 22%, #0b0720), #0b0720 72%);
      box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset,
        0 14px 34px -18px color-mix(in srgb, var(--case-glow) 70%, transparent),
        0 3px 14px rgba(0,0,0,.6); }
    .ac-casepane { position: relative; display: flex; align-items: center; justify-content: center;
      padding: 10px 0 4px; }
    .ac-casecanvas { position: relative; z-index: 2; }
    /* the spotlight the case is lit by */
    .ac-casebeam { position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
      width: 78%; height: 96%; pointer-events: none; z-index: 1;
      background: radial-gradient(52% 62% at 50% 0%,
        color-mix(in srgb, var(--case-glow) 34%, transparent), transparent 72%); }
    /* the pedestal it stands over */
    /* a pool of cast light, not a plinth - the pilot is flying, not standing */
    .ac-casefloor { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
      width: 44%; height: 15px; pointer-events: none; z-index: 1; border-radius: 50%;
      background: radial-gradient(50% 50% at 50% 50%,
        color-mix(in srgb, var(--case-glow) 50%, transparent), transparent 72%);
      filter: blur(3px); opacity: .55; }
    /* corner brackets: the thing that makes it read as a case */
    .ac-casecorner { position: absolute; width: 17px; height: 17px; z-index: 3; pointer-events: none;
      border: 2px solid color-mix(in srgb, var(--case-glow) 85%, transparent); opacity: .85; }
    .ac-c-tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
    .ac-c-tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
    .ac-c-bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
    .ac-c-br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
    .ac-casetag { position: absolute; top: 12px; right: 32px; z-index: 4;
      font-size: 8.5px; letter-spacing: .12em; max-width: calc(100% - 64px); }
    /* the name plate, lit from the same hue */
    .ac-caseplate { position: relative; z-index: 3; display: flex; flex-direction: column;
      align-items: center; gap: 1px; text-align: center;
      padding: 9px 14px calc(11px + env(safe-area-inset-bottom, 0px));
      padding-bottom: 11px;
      border-top: 1px solid color-mix(in srgb, var(--case-glow) 30%, transparent);
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--case-deep) 70%, #06040f)); }
    .ac-caseeyebrow { font: 800 8.5px/1 Figtree, sans-serif; letter-spacing: .26em;
      color: color-mix(in srgb, var(--case-glow) 80%, #fff); }
    .ac-caseplate b { font: 800 17px/1.15 Fraunces, Georgia, serif; letter-spacing: .01em; color: #fff; }
    .ac-casesub { font-size: 11px; color: #9aa4c0; }
    /* older engines without color-mix still get a lit case, just a violet one */
    @supports not (color: color-mix(in srgb, red 50%, blue)) {
      .ac-shopcase { border-color: rgba(196,160,255,.5);
        background: radial-gradient(90% 70% at 50% -10%, rgba(138,90,228,.3), transparent 68%), #0b0720; }
      .ac-casecorner { border-color: rgba(196,160,255,.85); }
      .ac-casebeam { background: radial-gradient(52% 62% at 50% 0%, rgba(196,160,255,.3), transparent 72%); }
      .ac-casefloor { background: radial-gradient(50% 50% at 50% 50%, rgba(196,160,255,.45), transparent 72%); }
      .ac-caseeyebrow { color: #d8c6ff; }
    }
    /* the combo bar: what the stage costs */
    .ac-combobar { display: flex; align-items: center; gap: 12px; width: 100%;
      border-radius: 16px; padding: 12px 14px; margin-bottom: 6px;
      background: linear-gradient(100deg, rgba(138,90,228,.24), rgba(12,8,28,.5) 70%);
      border: 1.5px solid rgba(196,160,255,.5); }
    .ac-combotxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ac-combotxt b { font: 900 14px/1.2 Figtree, sans-serif; letter-spacing: .05em; }
    .ac-combotxt span { font-size: 11.5px; color: #a9b2ce; }
    .ac-combobuy { flex: none; display: flex; align-items: center; gap: 6px;
      border-radius: 999px; padding: 12px 18px; font: 900 15px/1 Figtree, sans-serif;
      color: #241500; border: 1px solid rgba(255,238,190,.6);
      background: linear-gradient(180deg, #ffd76a, #dd9c25);
      box-shadow: 0 6px 16px -6px rgba(255,180,60,.7); }
    .ac-combobuy svg { fill: #241500; }
    /* shelf headings carry the cycle word */
    .ac-shopshelfhead { display: flex; align-items: baseline; gap: 8px; }
    .ac-shelfnote { font: 800 9px/1 Figtree, sans-serif; letter-spacing: .16em;
      color: #ffd76a; border: 1px solid rgba(255,206,92,.4); border-radius: 999px; padding: 4px 8px; }
    /* the tiles: art first, then name, then price */
    .ac-shoptile { min-width: 96px; padding: 8px 6px 7px; gap: 3px; }
    .ac-tilename { font: 800 11px/1.2 Figtree, sans-serif; text-align: center; }
    .ac-tileprice { display: flex; align-items: center; justify-content: center; gap: 4px;
      font: 900 11px/1 Figtree, sans-serif; color: #ffd76a; }
    .ac-tileprice svg { fill: #cbb2ff; }
    .ac-tileprice.owned { color: #7fe0b0; letter-spacing: .08em; font-size: 9.5px; }
    .ac-tilebonus { font: 800 8.5px/1 Figtree, sans-serif; letter-spacing: .1em; color: #7fe0b0; }
    /* ticked into the cart */
    .ac-tickbadge { position: absolute; top: 6px; left: 6px; width: 19px; height: 19px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center; font-style: normal;
      font: 900 11px/1 Figtree, sans-serif; color: #241500;
      background: linear-gradient(180deg, #ffe08a, #e0a02a); border: 1.5px solid rgba(20,12,40,.9);
      box-shadow: 0 2px 8px -2px rgba(255,190,80,.9); z-index: 3; }
    /* currently on the stage, which is a different thing from being ticked */
    .ac-shoptile.ac-previewing { box-shadow: 0 0 0 2px rgba(196,160,255,.75); }
    /* the cart */
    .ac-combobar.ac-cartempty { border-color: rgba(140,150,190,.28);
      background: linear-gradient(100deg, rgba(30,38,64,.45), rgba(12,8,28,.5) 70%); }
    .ac-cartempty .ac-combotxt b { color: #aeb8d4; }
    .ac-cartclear { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
      font: 800 9px/1 Figtree, sans-serif; letter-spacing: .12em; text-transform: uppercase;
      color: #aeb8d4; background: rgba(8,6,20,.6); border: 1px solid rgba(140,150,190,.32); }
    /* the catch, sitting under the case it applies to */
    .ac-caseheld { display: flex; align-items: center; gap: 10px; position: relative; z-index: 3;
      padding: 9px 14px 11px;
      border-top: 1px solid rgba(255,150,90,.35);
      background: linear-gradient(180deg, rgba(224,120,60,.18), rgba(12,8,28,.5)); }
    .ac-caseheldtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
    .ac-caseheldtxt b { font: 900 10px/1.2 Figtree, sans-serif; letter-spacing: .12em; color: #ffb45c; }
    .ac-caseheldtxt span { font-size: 11px; color: #c3b3a4; }
    .ac-caseheldgo { flex: none; border-radius: 999px; padding: 9px 13px;
      font: 900 10px/1 Figtree, sans-serif; letter-spacing: .08em; color: #241500;
      border: 1px solid rgba(255,220,180,.6);
      background: linear-gradient(180deg, #ffb45c, #c56a15); }
    /* the featured pack */
    .ac-featurehead { color: #ffd76a !important; }
    .ac-featurecard { position: relative; }
    .ac-featureoff { position: absolute; top: 8px; right: 10px;
      font: 900 9.5px/1 Figtree, sans-serif; letter-spacing: .1em; color: #241500;
      background: linear-gradient(180deg, #ffd76a, #dd9c25); border-radius: 999px; padding: 5px 9px;
      box-shadow: 0 3px 10px -3px rgba(255,180,60,.8); }
    .ac-dustrow .ac-dustface, .ac-noadsrow .ac-dustface { flex: none; width: 48px; height: 48px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(70% 70% at 50% 30%, rgba(138,90,228,.5), rgba(8,5,22,.7));
      border: 1px solid rgba(170,140,240,.35); }
    .ac-cashprice { color: #ffd76a; font-weight: 900; }
    /* the row whose store sheet is up: quieter, smaller, still readable */
    .ac-cashprice.ac-waiting { color: #a9b2ce; font-weight: 700; font-size: 11px; }
    /* the storefront's rows and cards own their width - a bare .ac-card
       shrink-wraps outside a grid, which is what left the dust rows ragged */
    .ac-shopbeta .ac-sheet-scroll > .ac-card { width: 100%; }
    .ac-card.ac-featurecard { width: 100%; min-height: 0; flex-direction: row;
      align-items: center; justify-content: flex-start; gap: 12px; text-align: left;
      padding: 12px 14px; border-color: rgba(255,206,92,.45);
      background: linear-gradient(100deg, rgba(237,160,60,.18), rgba(12,8,28,.5) 68%); }
    .ac-card.ac-featurecard .ac-bundlestrip { flex: none; display: flex; align-items: center; gap: 2px; }
    .ac-card.ac-featurecard .ac-modtxt { flex: 1; min-width: 0; text-align: left; }
    .ac-card.ac-featurecard .ac-modprice { flex: none; display: flex; flex-direction: column;
      align-items: flex-end; gap: 1px; }
    .ac-card.ac-featurecard .ac-wasprice { margin: 0; }
    .ac-card.ac-featurecard .ac-bundlecount { position: static; align-self: flex-end; }
    /* Shop-only presentation. The Hangar and gameplay keep their existing chrome. */
    .ac-menu.ac-shopbeta.ac-shopvisual { background:
      linear-gradient(180deg, rgba(11,5,28,.78), rgba(10,5,23,.93)),
      var(--shop-nebula) center top / cover, #100820; }
    .ac-shopvisual .ac-menuhead { border-bottom: 1px solid rgba(232,193,113,.2); }
    .ac-shopvisual .ac-menutitle { color: #ffe7a8; text-shadow: 0 2px 0 #593c13, 0 0 22px rgba(225,170,65,.26); }
    .ac-shopvisual .ac-shopcase { border-color: rgba(220,178,102,.7);
      background: radial-gradient(ellipse at 50% 12%, rgba(127,73,184,.35), transparent 65%), #160c2d;
      box-shadow: inset 0 1px 1px rgba(255,226,165,.22), 0 10px 28px rgba(7,2,19,.5); }
    .ac-shopvisual .ac-casecorner { border-color: #d8b477; }
    .ac-shopvisual .ac-casebeam { background: radial-gradient(ellipse at 50% 0%, rgba(172,115,232,.29), transparent 70%); }
    .ac-shopvisual .ac-casefloor { background: radial-gradient(ellipse, rgba(172,121,226,.4), transparent 70%); }
    .ac-shopvisual .ac-caseplate { border-top-color: rgba(214,174,110,.32); background: linear-gradient(#211135, #110923); }
    .ac-shopvisual .ac-caseplate b { color: #fff0ce; }
    .ac-shopvisual .ac-caseeyebrow { color: #e6c58e; }
    .ac-shopvisual .ac-casetag { color: #e1c9f5; border-color: rgba(220,180,115,.45); background: rgba(31,14,54,.88); }
    .ac-shopvisual .ac-shelfhead { margin: 16px 2px 8px; color: #ead5a4; letter-spacing: .16em; }
    .ac-shopvisual .ac-sub, .ac-shopvisual .ac-fine { color: #c1b6d7; }
    .ac-shopvisual .ac-shelfrow { gap: 10px; padding: 4px 3px 12px; }
    .ac-shopvisual .ac-card.ac-shoptile { flex: 0 0 116px; width: 116px; min-width: 0;
      justify-content: flex-start; gap: 7px; padding: 10px 7px 9px; border-radius: 14px;
      border: 1px solid rgba(221,188,126,.64);
      background: linear-gradient(145deg, rgba(103,57,146,.55), rgba(22,12,45,.96) 52%, rgba(52,27,75,.9));
      box-shadow: inset 0 1px 1px rgba(255,238,187,.34), inset 0 -2px 5px rgba(5,2,16,.8), 0 5px 12px rgba(0,0,0,.25);
      text-shadow: none; }
    .ac-shopvisual .ac-shoptile.ac-premium::after { content: none; }
    .ac-shopvisual .ac-shoptile .ac-tilename { min-height: 2.4em; display: flex; align-items: center; justify-content: center;
      width: 100%; color: #fff0ce; font-size: 11px; line-height: 1.2; }
    .ac-shopvisual .ac-shoptile .ac-tileprice { margin-top: auto; min-height: 25px; width: 100%; border-radius: 8px;
      color: #f0d7ff; background: rgba(8,3,24,.65); border-top: 1px solid rgba(196,156,251,.3); }
    .ac-shopvisual .ac-shoptile .ac-tileprice.owned { color: #9eedc2; }
    .ac-shopvisual .ac-shoptile .ac-tilebonus { display: none; }
    .ac-shopvisual .ac-shoptile.on, .ac-shopvisual .ac-shoptile.ac-previewing { border-color: #ffe1a0;
      box-shadow: 0 0 0 1px #b78639, inset 0 0 18px rgba(184,117,245,.25), 0 0 15px rgba(191,144,72,.25); }
    .ac-shopvisual .ac-shopitemart { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
      border-radius: 10px; overflow: hidden;
      background: radial-gradient(ellipse at 50% 58%, rgba(162,105,224,.3), rgba(20,10,44,.28) 70%); }
    .ac-shopvisual .ac-shopitemart canvas, .ac-shopvisual .ac-shopitemart img { display: block;
      width: 100% !important; height: 100% !important; object-fit: contain; }
    .ac-shopvisual .ac-card.ac-shopoffer { display: grid; grid-template-columns: minmax(0, 1fr) auto;
      gap: 0 12px; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid #b68d51;
      background: linear-gradient(130deg, #422465, #170d2e 55%, #2b1944);
      box-shadow: inset 0 1px 0 rgba(255,230,169,.46), 0 8px 24px rgba(2,0,9,.4); }
    .ac-shopvisual .ac-shopoffer > .ac-bundlebanner { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
    .ac-shopvisual .ac-shopoffer > .ac-modname { margin: 0; padding: 14px 0 14px 14px;
      color: #ffebbd; font: 800 18px/1.15 Fraunces, Georgia, serif; }
    .ac-shopvisual .ac-shopoffer > .ac-modprice { display: inline-flex; flex-direction: row; align-items: center;
      gap: 5px; padding: 9px 13px; margin: 9px 10px 9px 0; white-space: nowrap;
      border: 1px solid rgba(210,157,255,.7); border-radius: 10px; color: #f3dcff;
      font: 900 17px/1 Figtree, sans-serif; background: linear-gradient(#60318e, #2c1350);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 0 12px rgba(176,91,255,.25); }
    .ac-shopvisual .ac-offersavings { position: absolute; top: 10px; right: 10px; padding: 7px 10px;
      color: #34200a; font: 900 11px/1 Figtree, sans-serif; letter-spacing: .04em; border-radius: 999px;
      background: linear-gradient(#ffeab1, #e8b752); border: 1px solid #fff1c7; box-shadow: 0 2px 12px rgba(34,12,4,.45); }
    .ac-shopvisual .ac-offercredit { grid-column: 1 / -1; margin: 0; color: #dbc5fa; font-size: 11px; text-align: center; }
    .ac-shopvisual .ac-bundlesummary { margin: 0; color: #d9c9ed; font-size: 12px; line-height: 1.4; }
    .ac-shopvisual .ac-card.ac-boostcard { border-color: rgba(207,175,115,.6); border-radius: 14px;
      background: linear-gradient(120deg, rgba(77,41,112,.84), rgba(22,11,42,.96));
      box-shadow: inset 0 1px 1px rgba(255,229,177,.24), 0 5px 14px rgba(3,0,10,.3); }
    .ac-shopvisual .ac-boostcard .ac-modname { color: #fff0ce; }
    .ac-shopvisual .ac-boostcard .ac-modprice { padding: 9px 8px; border-radius: 9px;
      border: 1px solid rgba(211,162,250,.5); color: #f1dcff; background: rgba(38,15,66,.8); }
    .ac-shopvisual .ac-boostcard.ac-confirming { border-color: #ffe1a0; }
    .ac-shopvisual .ac-card.ac-dustrow, .ac-shopvisual .ac-card.ac-noadsrow { margin-bottom: 10px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 11px; min-height: 82px; padding: 10px; border-radius: 16px; border: 1px solid rgba(207,175,115,.6);
      background: linear-gradient(105deg, rgba(74,44,110,.94), rgba(18,9,39,.94) 55%, rgba(54,27,82,.95));
      box-shadow: inset 0 1px 2px rgba(239,215,255,.5), inset 0 -2px 5px rgba(4,1,16,.8), 0 5px 15px rgba(0,0,0,.3); }
    .ac-shopvisual .ac-dustrow .ac-dustface, .ac-shopvisual .ac-noadsrow .ac-dustface { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; }
    .ac-shopvisual .ac-stardust-emblem { display: block; width: 100%; height: 100%; object-fit: contain; }
    .ac-shopvisual .ac-dustrow .ac-modname, .ac-shopvisual .ac-noadsrow .ac-modname { color: #faf0ff; font-size: 13px; }
    .ac-shopvisual .ac-dustrow .ac-sub, .ac-shopvisual .ac-noadsrow .ac-sub { font-size: 10px; line-height: 1.3; }
    .ac-shopvisual .ac-dustrow .ac-cashprice, .ac-shopvisual .ac-noadsrow .ac-cashprice { display: grid; place-items: center; min-height: 42px;
      min-width: 72px; max-width: 115px; padding: 10px; border-radius: 13px; border: 1px solid #ffe9a9;
      color: #311c09; background: linear-gradient(#ffe89b, #edb746 55%, #ca841d); font-size: 15px;
      box-shadow: inset 0 1px 1px #fff9d8, 0 0 12px rgba(255,180,63,.28); overflow-wrap: anywhere; }
    .ac-shopvisual .ac-dustrow .ac-cashprice.ac-waiting, .ac-shopvisual .ac-noadsrow .ac-cashprice.ac-waiting { font-size: 11px; font-weight: 700; }
    .ac-shopvisual .ac-dustrow:disabled, .ac-shopvisual .ac-noadsrow:disabled { opacity: .65; cursor: wait; }
    .ac-shopvisual .ac-shopreviewsheet { width: min(560px, 100%); margin-inline: auto;
      border: 1px solid rgba(221,188,126,.68); border-bottom: 0; background:
      linear-gradient(rgba(23,11,44,.92), rgba(13,6,29,.96)), var(--shop-nebula) center / cover; }
    .ac-shopvisual .ac-shopreviewsheet .ac-lvlname { color: #ffe9bc; font-size: 26px; line-height: 1.1; }
    .ac-shopvisual .ac-shopincluded { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .ac-shopvisual .ac-shopincluded > .ac-card { width: 100%; min-width: 0; }
    .ac-shopvisual .ac-shopincluded .ac-tilename { font-size: 10px; }
    .ac-shopvisual .ac-featurepreview { padding: 12px 10px; border: 1px solid rgba(185,141,236,.4); border-radius: 16px;
      background: radial-gradient(ellipse at 50% 45%, rgba(109,61,159,.3), rgba(9,4,25,.78)); text-align: center; }
    .ac-shopvisual .ac-featurepreviewname { margin: 0; font: 800 18px/1.2 Fraunces, Georgia, serif; color: #ffedc8; }
    .ac-shopvisual .ac-featurepreview canvas { display: block; width: 100% !important; height: auto !important; max-width: 304px; margin: auto; }
    .ac-shopvisual .ac-featurepreview .ac-fine { margin: 4px 0 0; }
    .ac-shopvisual .ac-feature-reviewback { padding: 10px 14px; margin-bottom: 2px; font-size: 12px; letter-spacing: .08em; }
    .ac-shopvisual button.ac-primary, .ac-shopvisual button.ac-combobuy { min-height: 46px;
      color: #fff1ff; border: 1px solid #d7a0ff; background: linear-gradient(#a760d8, #6a2aa0 48%, #421b6f);
      box-shadow: inset 0 1px 1px rgba(255,233,255,.65), inset 0 -2px 2px rgba(30,2,54,.6), 0 0 16px rgba(167,78,244,.3);
      text-shadow: 0 1px 2px #3e1555; }
    .ac-shopvisual .ac-combobuy svg { fill: #edcaff; }
    .ac-shopvisual .ac-featurebuy { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; }
    .ac-shopvisual button.ac-ghost { min-height: 44px;
      background: linear-gradient(rgba(64,34,91,.75), rgba(20,9,43,.92)); border: 1px solid rgba(207,175,115,.6); color: #e9ddfa; }
    .ac-shopvisual .ac-combobar, .ac-shopvisual .ac-daily { border-color: rgba(207,175,115,.38);
      background: linear-gradient(120deg, rgba(80,42,115,.48), rgba(14,6,32,.9)); }
    .ac-shopvisual .ac-daily.done { opacity: 1; }
    .ac-shopvisual .ac-devbar { border-top-color: rgba(224,184,104,.3); background: rgba(10,4,25,.94); }
    .ac-shopvisual button:focus-visible { outline: 3px solid #ffe5a4; outline-offset: 3px; }
    .ac-shopvisual button { transition: border-color .15s, box-shadow .15s; }
    @media (max-width: 349px) {
      .ac-shopvisual .ac-card.ac-dustrow, .ac-shopvisual .ac-card.ac-noadsrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
      .ac-shopvisual .ac-dustrow .ac-dustface, .ac-shopvisual .ac-noadsrow .ac-dustface { width: 44px; height: 44px; }
      .ac-shopvisual .ac-dustrow .ac-cashprice, .ac-shopvisual .ac-noadsrow .ac-cashprice { min-width: 60px; max-width: 90px; padding: 8px; font-size: 13px; }
      .ac-shopvisual .ac-shopincluded { gap: 6px; }
      .ac-shopvisual .ac-shopincluded > .ac-card { padding: 9px 5px 7px; }
    }
    @media (prefers-reduced-motion: reduce) { .ac-shopvisual button { transition: none; } }
    .ac-card.ac-dustrow, .ac-card.ac-noadsrow { width: 100%; min-height: 0; flex-direction: row; align-items: center;
      justify-content: flex-start; gap: 12px; text-align: left; padding: 11px 14px; }
    .ac-card.ac-dustrow .ac-modtxt, .ac-card.ac-noadsrow .ac-modtxt { flex: 1; min-width: 0; text-align: left; }
    /* the last shelf must clear the preproduction bar pinned under it */
    .ac-shopbeta .ac-sheet-scroll { padding-bottom: 18px; }
    .ac-featuresheet { max-height: 92vh; overflow-y: auto; }
    /* A SHEET THAT SCROLLS MUST NOT ALSO SQUASH. This is a flex column
       pinned at 92vh with overflow-y:auto - it is meant to scroll when the
       pack is tall. But flex items shrink by default, so instead of
       scrolling it COMPRESSED every shelf: rows went 128px -> 110px while
       the 118px cards inside kept their min-height and, being overflow
       visible, spilled over the heading beneath them. That is the overlap.
       Nothing in this sheet is meant to flex - every child is grow:0 - so
       nothing may shrink either, and the scroll does its job. */
    .ac-featuresheet > * { flex: none; }
    /* Capped + scrolling means SCROLL, never squash - see the pack sheet.
       Low specificity on purpose: a child that genuinely wants to flex can
       still say so with a class rule, which outranks this. */
    .ac-lvlcard.ac-racecard > *, .ac-packcard > *, .ac-modecard > * { flex: none; }
    .ac-featuresheet .ac-shelfhead { margin-top: 4px; }
    .ac-featurebuy { display: flex; align-items: center; justify-content: center; gap: 6px;
      flex-wrap: wrap; border-radius: 999px; margin-top: 6px;
      color: #241500; border: 1px solid rgba(255,238,190,.6);
      background: linear-gradient(180deg, #ffd76a, #dd9c25); }
    .ac-featurebuy svg { fill: #241500; }
    .ac-featurebuy .ac-wasprice { flex: none; margin: 0; color: rgba(36,21,0,.6); }
    .ac-tileprice.locked { color: #ffb45c; letter-spacing: .06em; font-size: 9px; }
    /* ---- THE LEADERBOARD ---- */
    .ac-boardhero { display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 6px 0 10px; }
    .ac-boardhero img { width: 132px; height: 132px; object-fit: contain;
      filter: drop-shadow(0 10px 22px rgba(255, 201, 77, .22)); }
    .ac-boardtag { font: 800 10px/1 Figtree, sans-serif; letter-spacing: .14em;
      text-transform: uppercase; color: #8b95b0; }
    .ac-boardlist { display: flex; flex-direction: column; gap: 6px; }
    .ac-boardrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
      border-radius: 14px; background: rgba(12,18,38,.6); border: 1px solid #2a3454; }
    /* the podium colours the art is already promising: gold, silver, bronze */
    .ac-boardrow.ac-medal1 { border-color: rgba(255,201,77,.55); background: rgba(255,201,77,.10); }
    .ac-boardrow.ac-medal2 { border-color: rgba(198,208,232,.45); background: rgba(198,208,232,.07); }
    .ac-boardrow.ac-medal3 { border-color: rgba(214,144,74,.45); background: rgba(214,144,74,.08); }
    .ac-boardpos { flex: none; width: 24px; text-align: center;
      font: 900 15px/1 Fraunces, Georgia, serif; color: #8b95b0; }
    .ac-medal1 .ac-boardpos { color: #ffd76a; }
    .ac-medal2 .ac-boardpos { color: #dbe3f5; }
    .ac-medal3 .ac-boardpos { color: #e0a06a; }
    .ac-boardtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .ac-boardtxt b { font: 800 14px/1.2 Figtree, sans-serif; color: #f3efe4; }
    .ac-boardtxt .ac-sub { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
    .ac-boardscore { flex: none; font: 900 17px/1 Figtree, sans-serif; color: #ffd76a;
      font-variant-numeric: tabular-nums; }
    /* ---- PREPRODUCTION: what the cycle is holding back ---- */
    .ac-devroll { flex: none; border-top: 1px solid rgba(170,140,240,.28);
      background: rgba(10,6,24,.96); }
    .ac-devbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
      width: 100%; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: none; border: 0; color: #9aa6c4; text-align: left; }
    .ac-devbar b { font: 800 10px/1 Figtree, sans-serif; letter-spacing: .16em; color: #c4a0ff; }
    .ac-devbar span { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; color: #7c86a4; }
    .ac-devroll.open .ac-devbar { padding-bottom: 10px; }
    .ac-devpanel { max-height: 46vh; overflow-y: auto; padding: 0 16px calc(14px + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; gap: 12px; }
    /* same trap as the pack sheet: capped, scrolling, and a flex column, so
       its groups would compress instead of the panel scrolling. Found by the
       guard rather than by eye - it opens only when someone taps the roll-up,
       which is exactly the state a live check never reaches. */
    .ac-devpanel > * { flex: none; }
    .ac-devday { font: 500 10px/1.4 "IBM Plex Mono", ui-monospace, monospace; color: #7c86a4; margin: 0; }
    .ac-devgroup { display: flex; flex-direction: column; gap: 5px; }
    .ac-devhead { font: 800 9.5px/1 Figtree, sans-serif; letter-spacing: .14em; color: #ffd76a; margin: 0; }
    .ac-devwhy { font-size: 10.5px; color: #7c86a4; margin: 0; }
    .ac-devlist { display: flex; flex-wrap: wrap; gap: 5px; }
    .ac-devchip { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 8px;
      background: rgba(30,20,62,.85); border: 1px solid rgba(170,140,240,.22); }
    .ac-devchip b { font: 700 10px/1 Figtree, sans-serif; color: #dfe4f7; }
    .ac-devchip i { font: 500 9.5px/1 "IBM Plex Mono", ui-monospace, monospace; font-style: normal; color: #cbb2ff; }
    .ac-devnone { font-size: 10.5px; color: #5b6480; }
    /* the storefront is the first menu to be told about landscape */
    @media (orientation: landscape) {
      .ac-shopbeta .ac-sheet-scroll { padding-left: max(16px, calc(50% - 380px));
        padding-right: max(16px, calc(50% - 380px)); }
      .ac-shopbeta .ac-devpanel, .ac-shopbeta .ac-devbar {
        padding-left: max(16px, calc(50% - 380px)); padding-right: max(16px, calc(50% - 380px)); }
      /* a 200px-tall stage eats a 430px-tall window, so the shelves are
         never reached. The canvas carries inline dimensions from
         miniCanvas, which is why these have to shout. */
      /* a case stretched to the full window leaves the pilot marooned in
         the middle of it, so the vitrine keeps its own proportions */
      .ac-shopbeta .ac-shopcase { max-width: 460px; margin-left: auto; margin-right: auto; }
      .ac-shopbeta .ac-casepane { padding: 4px 0 0; }
      .ac-shopbeta .ac-casecanvas { width: 236px !important; height: 162px !important; }
      .ac-shopbeta .ac-caseplate b { font-size: 15px; }
      .ac-shopbeta .ac-combobar { padding: 9px 12px; }
      /* THE LOADOUT BORROWED THE CASE AND NOT ITS LANDSCAPE MANNERS. Every
         rule above is scoped to .ac-shopbeta, so when the loadout adopted
         the same vitrine it inherited the portrait sizing and nothing else:
         header 66 + case 230 + pills 58 + toggle 32 left the item grid a
         TWENTY PIXEL window, and NONE of its sixteen cards could be
         reached. Measured at 932x430, then fixed.
         Stacking was the wrong shape anyway. Landscape is 932px WIDE and
         430 tall - the scarce axis is the one the case was eating. So the
         pilot moves BESIDE the grid instead of on top of it, which hands
         the whole remaining height back to the thing you came to shop. */
      .ac-menu:has(> .ac-hangarcase) {
        display: grid; grid-template-columns: 320px minmax(0, 1fr);
        column-gap: 12px; align-content: start; }
      .ac-menu:has(> .ac-hangarcase) > * { grid-column: 2; }
      .ac-menu:has(> .ac-hangarcase) > .ac-menuhead { grid-column: 1 / -1; }
      .ac-menu:has(> .ac-hangarcase) > .ac-hangarcase {
        grid-column: 1; grid-row: 2 / 99; align-self: start; margin: 0 0 0 12px; }
      .ac-hangarcase .ac-casepane { padding: 2px 0 0; }
      .ac-hangarcase .ac-casecanvas { width: 236px !important; height: 162px !important; }
      .ac-hangarcase .ac-caseplate b { font-size: 14px; }
    }

    /* The Spill workshop: the ship and its hardpoints own the bay. */
    body .ac-depotwrap { background: linear-gradient(180deg,rgba(8,5,26,.06),rgba(8,5,26,.38)); }
    body .ac-depotwrap .ac-depotcard { width: min(940px,100%); max-height: 92%; gap: 10px; padding: 16px 14px 0;
      background: linear-gradient(180deg,rgba(17,11,35,.95),rgba(9,6,21,.96)); border: 1px solid #7951a7;
      border-bottom: 0; box-shadow: inset 0 1px 0 #d3a1ff22, 0 -16px 80px #03061766; }
    .ac-depotconsole h3, .ac-shipworkshop h3 { font: 700 22px/1.1 Fraunces,serif; margin: 0; color: #f9e7c8; }
    @keyframes ac-bay-arrival { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
    .ac-shipworkshop { gap: 12px; }
    .ac-shiplaunch, .ac-shipplanhead { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #8194b438; border-radius: 14px; background: #131c30; }
    .ac-shiplaunch p, .ac-shipplanhead p { margin: 0; }
    .ac-shipactions { display: flex; flex-wrap: wrap; gap: 7px; } .ac-shipactions button { min-height: 44px; font-size: 10px; padding: 9px; }
    .ac-shipreadout { color: #a9e5cd; font: 800 10px/1.5 Figtree,sans-serif; }
    .ac-shipworkshop .ac-shelfrow { display: flex; overflow-x: auto; }
    .ac-shipworkshop .ac-shelfrow > .ac-shipcard { flex: 0 0 174px; min-width: 174px; }
    .ac-shipcard canvas { max-width: 100%; height: auto!important; border-radius: 8px; background: radial-gradient(ellipse,#38536c55,transparent); }
    .ac-shipspecs { margin-bottom: 8px; }
    @media(min-width:720px) {.ac-depotwrap .ac-depotcard { padding-inline: 22px; } }
    @media(max-height:570px) { body .ac-depotwrap .ac-depotcard { max-height: 98%; } }
    /* Spill controls stay mounted through HUD updates so a held thumb keeps ownership. */
    .ac-stage > .ac-spillcontrols { position: absolute; left: 50%; right: auto; transform: translateX(-50%);
      width: min(360px,calc(100% - 32px)); aspect-ratio: 360 / 112; bottom: max(22px,env(safe-area-inset-bottom));
      z-index: 3; display: block; pointer-events: none; }
    .ac-spillcontrols[hidden] { display: none; }
    .ac-spillcontrols button { position: absolute; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
      min-height: 0; min-width: 0; padding: 0; border: 0; border-radius: 0; display: block; background: transparent; box-shadow: none; }
    .ac-spillcontrols button svg { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 4px 3px #0008); }
    .ac-spillcontrols .ac-dive { border-radius: 28% 0 0 28%; }
    .ac-spillcontrols .ac-lunge { border-radius: 0 28% 28% 0; }
    .ac-spillcontrols .ac-thrust { z-index: 2; border-radius: 50%; }
    .ac-spillcontrols button:active svg,.ac-spillcontrols .firing svg { filter: brightness(1.3) drop-shadow(0 0 8px #a6ffda55); transform: scale(.97); }
    .ac-spillcontrols button:disabled { opacity: .45; }
    .ac-spillcontrols .ac-control-status { position: absolute; top: 100%; left: 12%; width: 88%; text-align: center; color: #b4edff; font: 800 8px Figtree,sans-serif; letter-spacing: .05em; }
    .ac-spillcontrols button:focus-visible { outline: none; }
    .ac-spillcontrols button:focus-visible .ac-pad-face { stroke: #fff; stroke-width: 4; }
    .ac-spillsetting:focus-visible, .ac-hardpoint:focus-visible { outline: 2px solid #fff1b2; outline-offset: 3px; }
    /* Loadout family (10 Sep 2026): the violet panel, violet rows, and the ON pill is the Loadout's lit teal tab */
    .ac-spillsettings { display: flex; flex-direction: column; width: 100%; max-width: 520px; gap: 10px; text-align: left;
      padding: 14px; border: 1px solid #7951a7; border-radius: 18px; background: linear-gradient(180deg,#110b23,#090615);
      box-shadow: inset 0 1px 0 #d3a1ff22; }
    .ac-spillsettings h3 { margin: 0; font: 700 20px Fraunces,serif; color: #f9f4ff; }
    .ac-spillsettings p { margin: 0; }
    .ac-spillsettings .ac-sub { color: #c9bbe3; }
    .ac-spillsetting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; min-height: 60px;
      border: 1px solid #8656ba; border-radius: 16px; color: #f9f4ff; background: linear-gradient(145deg, rgba(23,12,46,.93), rgba(8,6,24,.88));
      box-shadow: inset 0 0 0 1px #c386ff15, 0 0 7px #aa69ee22; text-align: left; cursor: pointer; }
    .ac-spillsetting > span { display: flex; flex-direction: column; gap: 5px; }
    .ac-spillsetting b { font: 800 13px Figtree,sans-serif; }
    .ac-spillsetting small { font: 500 11px/1.4 Figtree,sans-serif; color: #e1d9f1; }
    .ac-spillsetting strong { font: 900 10px Figtree,sans-serif; letter-spacing: .1em; border-radius: 999px; padding: 7px 11px;
      border: 1px solid #955bdd; background: rgba(14,6,32,.84); color: #e0d8ee; }
    .ac-spillsetting[aria-checked="true"] strong { color: #f5fffe; border-color: #65ffe8;
      background: linear-gradient(180deg, #156263, #09252f 65%, #124a4c); box-shadow: inset 0 0 9px #4affdf99, 0 0 12px #4affdf88; }
    .ac-spillsetting:disabled { opacity: .6; }
    @media(max-height:450px) { .ac-stage > .ac-spillcontrols { width: min(300px,calc(100% - 32px)); bottom: max(8px,env(safe-area-inset-bottom)); } }

    .ac-rewardwithpin { display:flex; flex-direction:column; align-items:center; gap:3px; }

.mwr-boot-error { padding: 24px; color: #eef; font: 16px sans-serif; }