/* ============================================================
   SIMULATOR TRAINING — the experience layer.

   Everywhere else on this site is a web app ABOUT your Racerz. This page is meant to
   read as the rig's own screen: a pit-wall monitor the driver is looking at. That is
   why it gets its own type (a wide italic display face and mono for anything
   instrument-like), its own chamfered panels and its own failure states, instead of
   reusing .stat-card / .shop-card and blending in with the rest of the UI.

   Layout is three columns: PIT LANE picks a Racerz, DRIVER SHEET describes it, and the
   SESSION panel is either the run in progress or the rotation to choose from. The panel
   changing role — rather than emptying out — is what keeps the widest column earning
   its space when nothing is training.

   Class names the FX layer owns (.sim-track*, .sim-lap, .sim-telemetry, .sim-t-*,
   .sim-radio*, .sim-boot*, .fuel*) are kept verbatim: simulator-fx.js queries them by
   name, so renaming one here silently kills the instruments.

   Lives in its own file because style.css had already passed 2,600 lines.
   ============================================================ */

:root {
  --sim-telemetry: #7dd3a0;   /* instrument readouts — cool, so amber stays the brand */
  --sim-grid: rgba(125, 211, 160, 0.14);
  --sim-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
  /* Rajdhani, already loaded for the rest of the site, is the closest thing to a racing
     face in the current font budget. Italic + tight tracking is what does the work. */
  --sim-display: "Rajdhani", "Orbitron", sans-serif;
  --sim-cut: 14px;            /* corner chamfer — the page's whole silhouette */
  --sim-speed: #e9a13b;
  --sim-control: #4a90d9;
  --sim-focus: #8b5cf6;
  --sim-luck: #4fb477;
}

/* ---------- page chrome ---------- */

.app-page[data-page="simulator"] {
  position: relative;
}

/* ---------- the rig, as the room this page happens in ----------

   This backdrop used to be a `position: fixed` pseudo-element ON the page section, and it
   produced two separate bugs, both from the same mistake — a viewport-fixed layer living
   inside an element that the app animates and scrolls:

   1. `.app-page.is-active` animates `transform: translateY(10px)`, and a transformed
      element becomes the CONTAINING BLOCK of its fixed descendants. The art stopped
      resolving against the viewport, anchored to the page box and got clipped by
      `.app-content` (`overflow: auto`) — the "boxed inside the scroll area, then snaps
      to full screen" bug.
   2. Removing the transform exposed the next layer of the same trap: the entrance also
      animates `opacity`, which creates a STACKING CONTEXT. `z-index: -1` cannot escape a
      stacking context, so for the length of the fade the backdrop painted over the top
      nav instead of behind it — the nav "disappearing for a couple of seconds".

   So the layer moved to where a full-viewport background actually belongs: `#screen-app`,
   the app's one and only backdrop element. It is already `position: fixed; inset: 0;
   cover`, it is outside every animated container, and swapping its image per page cannot
   be trapped by anything. `training.js` toggles `body.is-sim` on page change. */
body.is-sim #screen-app {
  background-image:
    linear-gradient(rgba(11, 11, 14, 0.74), rgba(11, 11, 14, 0.9)),
    url("assets/bg-simulator.jpg");
  background-position: center 32%;
}
/* The darkening above is deliberate and self-contained, so the app's generic 40% wash
   would only stack a second, unplanned layer on top of it. */
body.is-sim .app-overlay { background: transparent; }

/* A faint scanline wash: enough to read as "a screen", not so much that it fights the
   content. Sits above the photo, below everything real. */
.app-page[data-page="simulator"]::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.016) 0px,
    rgba(255, 255, 255, 0.016) 1px,
    transparent 1px,
    transparent 3px
  );
}
/* Lifts the page's own content above the scanline wash. These children are not flex
   items, so they need a position for z-index to apply at all. */
.app-page[data-page="simulator"] > * { position: relative; z-index: 1; }
/* …except the action bar, which this blanket rule would otherwise un-stick. It is more
   specific than `.sim-actions` on its own, so the override has to be at least as
   specific — a plain `position: sticky` in the component block silently lost. */
.app-page[data-page="simulator"] > .sim-actions { position: sticky; bottom: 0; }

/* The silhouette of the whole page. One utility, applied everywhere, is what makes the
   Simulator look like a different product rather than the same cards with a new photo. */
.sim-chamfer {
  clip-path: polygon(
    var(--sim-cut) 0, 100% 0,
    100% calc(100% - var(--sim-cut)), calc(100% - var(--sim-cut)) 100%,
    0 100%, 0 var(--sim-cut));
}

.sim-panel {
  background: rgba(22, 22, 26, 0.82);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- header ---------- */

.sim-head {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 14px;
}
.sim-brandmark {
  width: 6px; align-self: stretch; min-height: 48px;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform: skewX(-12deg);
}
.sim-kana {
  display: block;
  font-size: 10px; letter-spacing: 0.42em; color: var(--accent);
  margin-bottom: 2px;
}
.sim-wordmark {
  font-family: var(--sim-display);
  font-style: italic; font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: 0.03em; line-height: 0.95; margin: 0;
  background: linear-gradient(180deg, #fff, #8e8e96);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim-speedlines { display: flex; gap: 4px; align-items: center; padding-bottom: 8px; }
.sim-speedlines i { display: block; width: 24px; height: 4px; background: var(--border-strong); transform: skewX(-24deg); }
.sim-speedlines i:nth-child(2) { width: 15px; }
.sim-speedlines i:nth-child(3) { width: 8px; }

.sim-tabs { margin-left: auto; display: flex; gap: 8px; padding-bottom: 6px; }
/* Parallelograms, not pills: the tabs are the first thing that says this page is not
   the shop. Overrides .sim-subtab wherever style.css styled it as a generic subtab. */
.sim-tabs .sim-subtab {
  font-family: var(--sim-display);
  font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
  padding: 9px 20px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: color .16s var(--ease-smooth), background .16s var(--ease-smooth);
}
.sim-tabs .sim-subtab:hover { color: var(--text); }
.sim-tabs .sim-subtab.is-active { background: var(--accent); border-color: var(--accent); color: #151007; }

/* ---------- rig bar ---------- */

.sim-rig-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 0;
  background: linear-gradient(180deg, rgba(125,211,160,0.05), transparent);
  font-family: var(--sim-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-dim);
}
.sim-rig-status { display: flex; align-items: center; gap: 6px; color: var(--sim-telemetry); }
.sim-rig-status::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sim-telemetry); box-shadow: 0 0 6px var(--sim-telemetry);
  animation: simBlink 2.4s steps(1) infinite;
}
@keyframes simBlink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.25; } }
.sim-rig-sep { flex: 1 1 auto; }
.sim-audio-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--sim-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  transition: color .16s var(--ease-smooth), border-color .16s var(--ease-smooth);
}
.sim-audio-btn:hover { color: var(--sim-telemetry); border-color: var(--sim-telemetry); }
.sim-audio-btn.is-on { color: var(--sim-telemetry); border-color: rgba(125,211,160,0.5); }

/* ---------- wallet stat rule ---------- */

.sim-statrail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  margin-bottom: 14px;
}
.sim-statrail > div {
  background: rgba(22, 22, 26, 0.9);
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
}
.sim-rail-ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: var(--accent);
  transform: rotate(45deg);
}
.sim-rail-ico svg { width: 15px; height: 15px; transform: rotate(-45deg); }
.sim-rail-k { display: block; font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-dim); }
.sim-rail-v {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: 0.01em; color: var(--text);
}
.sim-rail-v em {
  font-style: normal; font-family: var(--font-ui); font-weight: 500;
  font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim);
}
.sim-rail-sub {
  display: block; font-family: var(--sim-mono); font-size: 9px;
  color: var(--text-dim); margin-top: 1px;
}
.sim-rail-sub:empty { display: none; }

/* ---------- the stage ---------- */

.sim-stage {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 14px; align-items: start;
}
.sim-stage.is-empty { grid-template-columns: 1fr; }
.sim-stage.is-empty .sim-pitlane,
.sim-stage.is-empty .sim-sheet,
.sim-stage.is-empty .sim-session { display: none; }

/* ---------- column 1: pit lane ---------- */

/* The lane is a PANEL, not a column that grows. A wallet with 120 staked Racerz made it
   20,700px tall next to a 646px driver sheet — twenty-three screens of scrolling with the
   right-hand two thirds of the page empty. Sticky + its own scrollbar keeps the list
   beside the driver instead of below the fold. */
.sim-pitlane {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 4px;
}
/* The real cap is measured in fitPitLane() — CSS cannot see the fixed nav or the fixed
   sales ticker. This is only the fallback for the moment before the first measurement. */
.sim-lane-list { max-height: calc(100vh - 380px); }
.sim-lane-head { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.sim-lane-list {
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; overflow-x: hidden;
  /* Cross-axis minimum: a column flex container does NOT get the automatic-minimum-size
     rule horizontally, so without this the widest child sets the whole lane's width. */
  min-width: 0;
  /* Room for the scrollbar so it never sits on top of a card's chamfer. */
  padding-right: 4px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.sim-lane-list::-webkit-scrollbar { width: 5px; }
.sim-lane-list::-webkit-scrollbar-thumb { background: var(--border-strong); }
.sim-lane-list::-webkit-scrollbar-track { background: transparent; }

.sim-lane-label {
  font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--text-dim); padding-left: 2px;
}
.sim-lane-none {
  font-family: var(--sim-mono); font-size: 8.5px; line-height: 1.5;
  color: var(--text-dim); padding: 8px 2px;
}

/* Filter + search. Only rendered past a handful of Racerz — over four cards they cost
   more attention than they save; over a hundred they are the only way to find anything. */
.sim-lane-filters { display: flex; gap: 3px; }
.sim-lane-chip {
  flex: 1 1 0; min-width: 0; cursor: pointer;
  padding: 5px 2px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim);
  font-family: var(--sim-mono); font-size: 7.5px; letter-spacing: 0.06em;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
}
.sim-lane-chip b {
  font-family: var(--sim-display); font-style: italic; font-size: 13px;
  letter-spacing: 0; color: var(--text);
}
.sim-lane-chip:hover { color: var(--text); border-color: var(--border-strong); }
.sim-lane-chip.is-on { border-color: var(--accent); color: var(--accent); }
.sim-lane-chip.is-on b { color: var(--accent); }

.sim-lane-search {
  width: 100%; padding: 5px 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--sim-mono); font-size: 10px; letter-spacing: 0.06em;
}
.sim-lane-search:focus { outline: none; border-color: var(--accent); }
.sim-lane-search::placeholder { color: #5c5c64; }
.sim-pit {
  position: relative; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sim-pit:hover { border-color: var(--border-strong); }
.sim-pit.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px -6px var(--accent-glow);
}
.sim-pit img, .sim-pit .sim-pit-noimg {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
.sim-pit .sim-pit-noimg {
  display: grid; place-items: center; background: var(--surface-2);
  font-family: var(--sim-mono); font-size: 11px; color: var(--text-dim);
}
.sim-pit-lv {
  position: absolute; top: -1px; left: -1px;
  background: var(--accent); color: #151007;
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 11px; letter-spacing: 0.04em; padding: 2px 9px 2px 7px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.sim-pit-name {
  display: block; padding: 5px 7px;
  font-family: var(--sim-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--text-dim); border-top: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-pit.is-selected .sim-pit-name { color: var(--text); }
/* A running session has to be visible from the lane, or picking the wrong Racerz is the
   only way to find out which one is out on track. */
.sim-pit-live {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sim-telemetry); box-shadow: 0 0 8px var(--sim-telemetry);
  animation: simBlink 2.2s steps(1) infinite;
}
.sim-pit.is-sabotaged .sim-pit-live { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.sim-pit-clock {
  position: absolute; bottom: 26px; right: 4px;
  font-family: var(--sim-mono); font-size: 8.5px; color: var(--text);
  background: rgba(8,8,10,0.78); padding: 1px 4px;
}

/* Racerz in the wallet that are NOT staked. Dimmed with a route out, never a padlock:
   a lock implies an unlock that does not exist, and the real action is one page away. */
.sim-pit.is-unstaked { opacity: 0.42; filter: grayscale(1); }
.sim-pit.is-unstaked:hover { opacity: 0.8; filter: grayscale(0.3); border-color: var(--accent); }
.sim-pit.is-unstaked .sim-pit-name { color: var(--accent); font-size: 8px; white-space: normal; }

/* ---------- column 2: driver sheet ---------- */

.sim-sheet { padding: 16px; }
.sim-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sim-sheet-head h3 {
  margin: 0; font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 30px; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff, #9b9ba3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim-lv-badge {
  margin-left: auto; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 16px; padding: 5px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.sim-rank {
  width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--sim-mono); font-size: 8.5px; color: var(--text-dim);
}

.sim-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sim-art {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border: 1px solid var(--border-strong);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.sim-noimg {
  display: grid; place-items: center; background: var(--surface-2);
  font-family: var(--sim-display); font-style: italic; font-size: 24px; color: var(--text-dim);
}

/* Gear lives on the driver it is fitted to. This is what replaced the "FITTING" select:
   the Racerz is already chosen, so asking again was pure friction. */
.sim-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.sim-slot {
  border: 1px solid var(--border); background: var(--surface-2);
  padding: 7px 6px; text-align: center; cursor: pointer;
  font: inherit; color: inherit;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .15s var(--ease-smooth);
}
.sim-slot:hover { border-color: var(--accent); }
.sim-slot-k { display: block; font-family: var(--sim-mono); font-size: 7.5px; letter-spacing: 0.14em; color: var(--text-dim); }
.sim-slot-v {
  display: block; font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-slot.is-empty .sim-slot-v { color: var(--accent); }

.sim-skills { display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.sim-skill { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; }
.sim-skill-ico { display: grid; place-items: center; color: var(--text-dim); }
.sim-skill-ico svg { width: 16px; height: 16px; }
.sim-skill-name {
  display: block; margin-bottom: 4px;
  font-family: var(--sim-display); font-style: italic; font-weight: 600;
  font-size: 13px; letter-spacing: 0.08em; color: var(--text-dim);
}
/* display:block matters — a <span> stays inline and drops the height entirely. */
.sim-skill-bar {
  display: block; height: 7px; position: relative; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.sim-skill-bar i { position: absolute; inset: 0 auto 0 0; display: block; }
/* The slice earned by levelling, drawn on top of the NFT's own slice. Hatched rather
   than a second solid colour: it has to read as "same stat, added by training", not as
   a different measurement. */
.sim-skill-bar u {
  position: absolute; top: 0; bottom: 0; display: block; opacity: 0.85;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.45) 0 2px, transparent 2px 4px);
  border-left: 1px solid rgba(11,11,14,0.9);
}
.sim-skill-gain {
  font-family: var(--sim-mono); font-style: normal; font-weight: 400;
  font-size: 9px; margin-left: 3px; opacity: 0.85;
}
.sim-skill-note {
  margin: 4px 0 0; font-family: var(--sim-mono); font-size: 8.5px; line-height: 1.6;
  color: var(--text-dim);
}
.sim-skill-note b { color: var(--accent); font-weight: 400; }
.sim-skill-note.is-legendary { color: var(--accent-soft); }

/* The 1/1 marker. Deliberately louder than the level badge next to it: eight tokens in
   2,182 carry this, and the sheet behind it is maxed by decree rather than by score. */
.sim-oneof {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em; padding: 3px 10px;
  color: #151007; background: linear-gradient(180deg, var(--accent-soft), var(--accent-strong));
  box-shadow: 0 0 18px -4px var(--accent-glow);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.sim-skill-num {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 16px; min-width: 30px; text-align: right;
}

/* ---------- the track + instruments ---------- */

.sim-trackbox {
  margin-top: 14px; border: 1px solid var(--border); background: rgba(28, 28, 34, 0.6);
  display: grid; grid-template-columns: minmax(0, 1fr) 132px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sim-trackbox-map { padding: 10px 12px; min-width: 0; }
.sim-trackbox-k { font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-dim); }
.sim-trackbox-n {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 2px;
}
.sim-trackbox-tel { border-left: 1px solid var(--border); padding: 10px 12px; }
.sim-tel-note {
  grid-column: 1 / -1; margin: 0 12px 8px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-family: var(--sim-mono); font-size: 7.5px; letter-spacing: 0.06em; color: #6a6a72;
}

.sim-track-wrap { position: relative; }
.sim-track { display: block; width: 100%; height: auto; }
/* Strokes are sized for the ~140px the card gives this SVG, not for the 240-unit
   viewBox — at card size anything thinner disappears. */
.sim-track-bed { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sim-track-line { fill: none; stroke: rgba(255,255,255,0.20); stroke-width: 1; stroke-dasharray: 3 5; }
/* The portion already driven this lap. */
.sim-track-done { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sim-track-car { fill: var(--accent); stroke: var(--bg-deep); stroke-width: 1.4; }
.sim-track-car-glow { fill: var(--accent); opacity: 0.28; }
.sim-track-start { stroke: rgba(255,255,255,0.4); stroke-width: 2; stroke-dasharray: 2 2; }

/* The lap counter is pulled out of the map and into the instrument stack, so LAP,
   LAP TIME, BEST and SECTOR read as one cluster instead of two. */
.sim-lap {
  font-family: var(--sim-mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--text-dim); line-height: 1.35; margin-bottom: 7px;
}
.sim-lap b { display: block; font-size: 13px; color: var(--sim-telemetry); font-weight: 400; }

.sim-telemetry { display: flex; flex-direction: column; gap: 7px; }
.sim-telemetry div { font-family: var(--sim-mono); font-size: 10.5px; }
.sim-telemetry span { display: block; font-size: 8px; color: var(--text-dim); letter-spacing: 0.12em; }
.sim-telemetry b { color: var(--sim-telemetry); font-weight: 400; font-size: 13px; }

/* ---------- column 3: the session panel ---------- */

.sim-session { display: flex; flex-direction: column; overflow: hidden; }
.sim-banner {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: linear-gradient(90deg, var(--accent-strong), rgba(199, 117, 42, 0));
  border-bottom: 1px solid var(--border);
}
.sim-banner b {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 15px; letter-spacing: 0.14em;
}
.sim-banner-stripes { margin-left: auto; display: flex; gap: 5px; opacity: 0.5; }
.sim-banner-stripes i {
  width: 14px; height: 14px;
  background: repeating-linear-gradient(-45deg, #000 0 3px, transparent 3px 6px);
}
.sim-banner.is-idle { background: linear-gradient(90deg, #33333c, rgba(0,0,0,0)); }
.sim-banner.is-bad { background: linear-gradient(90deg, var(--danger), rgba(199,68,54,0)); }
.sim-banner.is-good { background: linear-gradient(90deg, var(--success), rgba(79,180,119,0)); }

.sim-hero { position: relative; height: 200px; background: var(--surface-2); }
.sim-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgba(11,11,14,0.88));
}
.sim-hero-title {
  position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1;
  display: flex; align-items: flex-end; gap: 14px;
}
.sim-hero-title h4 {
  margin: 0; font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px); letter-spacing: 0.02em; text-shadow: 0 3px 18px #000;
}
.sim-bonus {
  margin-left: auto; flex: 0 0 auto;
  background: rgba(8,8,10,0.82); border: 1px solid var(--border-strong); padding: 6px 13px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.sim-bonus-k { display: block; font-family: var(--sim-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-dim); }
.sim-bonus-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 19px; color: var(--success); }
.sim-bonus.is-negative .sim-bonus-v { color: var(--danger); }
.sim-bonus.is-neutral .sim-bonus-v { color: var(--text-dim); }

.sim-sbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.sim-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sim-metric {
  border: 1px solid var(--border); background: var(--surface-2); padding: 10px 13px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.sim-metric-k { display: block; font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 3px; }
.sim-metric-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 26px; letter-spacing: 0.02em; }
.sim-metric-v.is-xp { color: var(--accent); }
.sim-metric-sub { display: block; font-family: var(--sim-mono); font-size: 8.5px; color: var(--text-dim); margin-top: 2px; }
.sim-metric.is-bad .sim-metric-v { color: var(--danger); }

.sim-meter {
  border: 1px solid var(--border); background: var(--surface-2); padding: 11px 13px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.sim-meter-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.sim-meter-row b { font-family: var(--sim-display); font-style: italic; font-size: 13px; letter-spacing: 0.1em; }
.sim-meter-row .sim-meter-r { margin-left: auto; font-family: var(--sim-mono); font-size: 9.5px; color: var(--text-dim); }
.sim-meter-tag { font-family: var(--sim-mono); font-size: 10px; color: var(--accent); }
.sim-bar { height: 14px; background: #0e0e12; border: 1px solid var(--border); position: relative; overflow: hidden; }
.sim-bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background-image:
    linear-gradient(90deg, var(--accent-strong), var(--accent-soft)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.14) 0 6px, transparent 6px 12px);
  background-blend-mode: overlay;
  transition: width .4s var(--ease-smooth);
}
.sim-bar.is-bad i { background-image: none; background: var(--danger); }
.sim-bar-ticks { position: absolute; inset: 0; display: flex; pointer-events: none; }
.sim-bar-ticks span { flex: 1 1 0; border-right: 1px solid rgba(0,0,0,0.45); }
.sim-bar-ticks span:last-child { border-right: none; }
.sim-meter-foot { font-family: var(--sim-mono); font-size: 9px; color: var(--text-dim); margin-top: 6px; }
.sim-meter.is-clickable { cursor: pointer; }
.sim-meter.is-clickable:hover { border-color: var(--accent); }

/* ---------- the rotation picker (idle) ---------- */

.sim-pickhead { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 2px; }
.sim-pickhead b { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; }
.sim-pickhead span { margin-left: auto; font-family: var(--sim-mono); font-size: 9px; color: var(--text-dim); }

.sim-circs { display: flex; flex-direction: column; gap: 9px; }
.sim-circ {
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; grid-template-columns: 126px minmax(0, 1fr) auto;
  align-items: center; gap: 13px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; padding: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .16s var(--ease-smooth);
}
.sim-circ:hover { border-color: var(--accent); }
.sim-circ.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-glow); }
.sim-circ img { width: 126px; height: 74px; object-fit: cover; display: block; }
.sim-circ-name { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: 0.03em; }
.sim-circ-desc { font-family: var(--sim-mono); font-size: 8.5px; color: var(--text-dim); margin-top: 2px; }
.sim-circ-mod { padding-right: 14px; text-align: right; }
.sim-circ-mod b { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 19px; color: var(--success); }
.sim-circ-mod.is-negative b { color: var(--danger); }
.sim-circ-mod.is-neutral b { color: var(--text-dim); }
.sim-circ-mod span { display: block; font-family: var(--sim-mono); font-size: 7.5px; letter-spacing: 0.1em; color: var(--text-dim); }

.sim-bankline {
  border: 1px dashed var(--border-strong); padding: 9px 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.sim-bankline-k { font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-dim); }
.sim-bankline-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 19px; }
.sim-bankline-conv { font-family: var(--sim-mono); font-size: 9px; color: var(--text-dim); }
.sim-bankline-go {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--sim-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--accent);
}

/* ---------- results (settled) ---------- */

.sim-result {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.sim-result > div { background: var(--surface-2); padding: 12px; text-align: center; }
.sim-result-k { display: block; font-family: var(--sim-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--text-dim); }
.sim-result-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 24px; margin-top: 3px; display: block; }
.sim-levelup {
  text-align: center; padding: 14px; border: 1px solid var(--accent);
  background: linear-gradient(180deg, rgba(233,161,59,0.18), transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sim-levelup-k { font-family: var(--sim-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--accent); }
.sim-levelup-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 36px; margin-top: 2px; }

/* ---------- sabotage: a failure state, not a label ---------- */

.sim-session.is-sabotaged .sim-track-done { stroke: var(--danger); }
.sim-session.is-sabotaged .sim-track-car,
.sim-session.is-sabotaged .sim-track-car-glow { fill: var(--danger); }
.sim-stage.is-sabotaged .sim-telemetry b,
.sim-stage.is-sabotaged .sim-lap b { color: var(--danger); opacity: 0.6; }
.sim-stage.is-sabotaged .sim-track-done { stroke: var(--danger); }
.sim-stage.is-sabotaged .sim-track-car,
.sim-stage.is-sabotaged .sim-track-car-glow { fill: var(--danger); }
.sim-hero.is-sabotaged img { filter: saturate(0.35) brightness(0.7) sepia(0.4) hue-rotate(-30deg); }

.sim-alert {
  margin-top: 7px; padding: 6px 8px; text-align: center;
  background: rgba(199,68,54,0.16); border: 1px solid rgba(199,68,54,0.45);
  color: var(--danger);
  font-family: var(--sim-mono); font-size: 9px; letter-spacing: 0.08em;
}
/* Fires once, when the hit lands. */
.sim-live.is-hit { animation: simGlitch .5s steps(2) 3; }
@keyframes simGlitch {
  0% { transform: translate(0); filter: none; }
  25% { transform: translate(-2px, 1px); filter: hue-rotate(-25deg) saturate(1.6); }
  50% { transform: translate(2px, -1px); filter: brightness(1.35); }
  75% { transform: translate(-1px, -1px); filter: hue-rotate(15deg); }
  100% { transform: translate(0); filter: none; }
}

/* ---------- engineer radio ---------- */

.sim-radio {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 7px; padding: 8px 11px;
  background: rgba(255,255,255,0.03); border-left: 2px solid var(--sim-telemetry);
  font-family: var(--sim-mono); font-size: 9.5px; line-height: 1.5; color: var(--text-dim);
}
.sim-radio.is-hostile { border-left-color: var(--danger); color: #e2a49c; }
.sim-radio-who { flex: 0 0 auto; color: var(--sim-telemetry); }
.sim-radio.is-hostile .sim-radio-who { color: var(--danger); }

/* ---------- action bar ---------- */

.sim-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 8px;
  /* Content scrolls UNDER this bar, so the fade has to be opaque enough to read as a
     surface rather than as two overlapping things. */
  background: linear-gradient(180deg, rgba(11,11,14,0), rgba(11,11,14,0.97) 38%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sim-btn {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 26px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text);
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 15px; letter-spacing: 0.08em;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .16s var(--ease-smooth), color .16s var(--ease-smooth);
}
.sim-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-soft); }
.sim-btn.is-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: var(--accent-soft); color: #141006;
  padding: 13px 40px; font-size: 17px;
  box-shadow: 0 8px 30px -12px var(--accent-glow);
}
.sim-btn.is-primary:hover:not(:disabled) { color: #141006; filter: brightness(1.08); }
/* Destructive: smaller, sober, and carrying its own price. Never the primary — it is
   the one button on this page that takes something away from you. */
.sim-btn.is-stop {
  padding: 11px 18px; font-size: 12px;
  border-color: rgba(199,68,54,0.55); color: #e2a49c; background: rgba(199,68,54,0.1);
  flex-direction: column; align-items: flex-start; gap: 0;
}
.sim-btn.is-stop:hover { border-color: var(--danger); color: #fff; background: rgba(199,68,54,0.26); }
.sim-btn.is-stop small {
  display: block; font-family: var(--sim-mono); font-style: normal;
  font-size: 8px; font-weight: 400; letter-spacing: 0.06em; opacity: 0.8; margin-top: 1px;
}
.sim-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- empty state ---------- */
/* The three-step explainer is an EMPTY STATE, not a page header: it answers the question
   a first-time player has, and stops taking up room the moment they have an answer. */

.sim-empty { padding: 44px 26px; text-align: center; }
.sim-empty h3 {
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 26px; letter-spacing: 0.03em; margin-bottom: 8px;
}
.sim-empty > p { color: var(--text-dim); font-size: 13px; max-width: 520px; margin: 0 auto 26px; line-height: 1.6; }
.sim-flow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; list-style: none; padding: 0; }
.sim-flow li { max-width: 230px; text-align: left; }
.sim-flow .sim-flow-step {
  border: 1px solid var(--border); background: var(--surface-2); padding: 14px 16px; height: 100%;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sim-flow-n {
  display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px;
  background: var(--accent); color: #151007;
  font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 12px;
}
.sim-flow b { display: block; font-family: var(--sim-display); font-style: italic; letter-spacing: 0.08em; font-size: 14px; margin-bottom: 4px; }
.sim-flow span { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.sim-flow-arrow { align-self: center; color: var(--border-strong); font-size: 20px; }

/* ---------- "send to the simulator" ----------
   The one screen where a player commits $CAZH, so every number that decides the choice is
   on it at once: what the circuit pays, what it risks, what the hours cost, and how long
   the rig will actually be running. The old version was a list of text rows and a number
   field — you had to already know the game to read it. */

.train-box {
  max-width: 1000px; width: min(1000px, 100%);
  padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.train-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(233,161,59,0.10), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px);
}
.train-head-ico {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.train-head-ico svg { width: 24px; height: 24px; }
.train-head h3 {
  margin: 0; font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: clamp(18px, 2.2vw, 27px); letter-spacing: 0.03em; color: var(--text);
  /* Uppercased in CSS, not in the string: the title is built from a token id and reads
     better in sentence case anywhere this text is reused. */
  text-transform: uppercase;
}
.train-sub { margin: 2px 0 0; font-size: 12px; font-style: italic; color: var(--text-dim); }
.train-x {
  margin-left: auto; flex: 0 0 auto; width: 38px; height: 38px;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
}
.train-x:hover { color: var(--text); border-color: var(--accent); }

.train-body { padding: 16px 22px 4px; max-height: 74vh; overflow-y: auto; }

/* A rule that starts with the two-slash speed mark, so section headings read as track
   signage rather than as form labels. */
.train-legend {
  display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; color: var(--text-dim);
}
.train-legend::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 9px;
  background: repeating-linear-gradient(115deg, var(--accent) 0 3px, transparent 3px 6px);
}
.train-legend::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* ---- circuit picker ---- */

.train-circuits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 18px;
  /* Exactly two rows before it scrolls on its own. The rotation is admin-controlled, so
     a sixth circuit must not push the cost and the expected result off the screen — those
     two update live while the slider moves and are useless where you cannot see them. */
  max-height: 296px; overflow-y: auto;
  padding-right: 5px; margin-right: -5px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.train-circuits::-webkit-scrollbar { width: 5px; }
.train-circuits::-webkit-scrollbar-thumb { background: var(--border-strong); }
.train-circuits::-webkit-scrollbar-track { background: transparent; }
.train-circuit {
  position: relative; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--text);
  /* The card's parts are spans, and an inline box ignores height — without this the art
     collapsed to its content width and the stats wrapped alongside it. */
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .16s var(--ease-smooth);
}
.train-circuit:hover { border-color: var(--border-strong); }
.train-circuit.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 34px -18px var(--accent-glow); }

/* 104px, not 128: two rows of circuits plus the hours, the cost and the expected result
   have to coexist on one screen. The cost panel updating out of sight while you drag the
   slider is the whole failure this redesign was meant to fix. */
.train-circuit-art { display: block; position: relative; width: 100%; height: 104px; flex: 0 0 auto; background: #101014; }
.train-circuit-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.train-circuit-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 30%, rgba(11,11,14,0.92));
}
.train-circuit-name {
  position: absolute; left: 13px; bottom: 9px; right: 13px; z-index: 1;
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 19px; letter-spacing: 0.03em; text-shadow: 0 2px 12px #000;
}
/* The tick and the word both, because on a 2x2 grid an orange border alone is easy to
   miss — and picking the wrong track is what the player pays for. */
.train-circuit-check {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(11,11,14,0.72); border: 2px solid var(--accent); color: var(--accent);
}
.train-circuit-check svg { width: 16px; height: 16px; }
.train-circuit.is-active .train-circuit-check { display: grid; }
.train-circuit-tag {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: none;
  padding: 3px 9px; background: rgba(11,11,14,0.8); border: 1px solid var(--accent);
  font-family: var(--sim-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--accent);
}
.train-circuit.is-active .train-circuit-tag { display: block; }

.train-circuit-stats {
  display: flex; align-items: center; gap: 12px; padding: 9px 13px;
  font-family: var(--sim-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim);
}
.train-circuit-risk b { font-weight: 400; }
.train-circuit-risk.is-low b { color: var(--success); }
.train-circuit-risk.is-mid b { color: var(--accent); }
.train-circuit-risk.is-high b { color: var(--danger); }
.train-circuit-range { display: flex; align-items: center; gap: 5px; }
.train-circuit-range svg { width: 12px; height: 12px; }
.train-circuit-mod {
  margin-left: auto; padding: 4px 11px;
  border: 1px solid rgba(79,180,119,0.45); background: rgba(79,180,119,0.12);
  font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 15px;
  color: var(--success);
}
/* The Sovereign's sabotaged track is advertised, not hidden — so its badge has to read as
   a penalty at a glance, not as a slightly different green. */
.train-circuit-mod.is-negative { border-color: rgba(199,68,54,0.5); background: rgba(199,68,54,0.14); color: var(--danger); }
.train-circuit-mod.is-neutral { border-color: var(--border-strong); background: transparent; color: var(--text-dim); }

/* ---- hours ---- */

.train-hours-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.train-hours-box, .train-bank, .train-panel {
  border: 1px solid var(--border); background: var(--surface-2); padding: 13px 15px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.train-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.train-step {
  width: 44px; height: 40px; flex: 0 0 auto; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 20px; line-height: 1;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color .15s var(--ease-smooth), color .15s var(--ease-smooth);
}
.train-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.train-step:disabled { opacity: 0.3; cursor: not-allowed; }
.train-hours-input {
  flex: 1 1 auto; min-width: 0; text-align: center;
  background: transparent; border: none; color: var(--text);
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 38px; letter-spacing: 0.02em;
  -moz-appearance: textfield;
}
.train-hours-input::-webkit-outer-spin-button,
.train-hours-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.train-hours-input:focus { outline: none; color: var(--accent); }
.train-hours-unit { flex: 0 0 auto; font-family: var(--sim-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-dim); }

.train-slider { display: flex; align-items: center; gap: 10px; font-family: var(--sim-mono); font-size: 9px; color: var(--text-dim); }
.train-slider input[type="range"] {
  flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--border-strong); cursor: pointer;
}
.train-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-deep); cursor: pointer;
}
.train-slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-deep); cursor: pointer;
}
.train-slider input[type="range"]:focus { outline: none; }
.train-slider input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-glow); }

.train-bank { display: flex; align-items: center; gap: 12px; }
.train-bank-ico {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: var(--accent);
}
.train-bank-ico svg { width: 19px; height: 19px; }
.train-bank-k { display: block; font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-dim); }
.train-bank-v { display: block; font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 26px; }
.train-bank-sub { display: block; font-family: var(--sim-mono); font-size: 8.5px; color: var(--text-dim); }

/* ---- cost / result ---- */

.train-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: 12px; }
.train-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.train-row:last-child { border-bottom: none; }
.train-row-ico { flex: 0 0 auto; width: 16px; color: var(--text-dim); }
.train-row-ico svg { width: 15px; height: 15px; display: block; }
.train-row-k { color: var(--text-dim); font-size: 11px; letter-spacing: 0.04em; }
.train-row-v {
  margin-left: auto; text-align: right;
  font-family: var(--sim-display); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em;
}
.train-row-v small { display: block; font-family: var(--sim-mono); font-style: normal; font-weight: 400; font-size: 8.5px; color: var(--text-dim); letter-spacing: 0; }
.train-row-v.is-good { color: var(--success); }
.train-row-v.is-warn { color: var(--danger); }
.train-row-v.is-accent { color: var(--accent); }

.train-problems:empty { display: none; }
.train-problems {
  margin-bottom: 12px; padding: 9px 12px;
  border: 1px solid rgba(199,68,54,0.45); background: rgba(199,68,54,0.12);
  color: #e2a49c; font-family: var(--sim-mono); font-size: 10px; line-height: 1.6;
}

.train-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--border); background: rgba(11,11,14,0.55);
}
.train-note {
  flex: 1 1 240px; margin: 0;
  font-size: 11px; font-style: italic; color: var(--text-dim); line-height: 1.5;
}

@media (max-width: 780px) {
  /* One column means taller cards, so the two-row cap would show a card and a half. The
     body already scrolls here and everything is stacked anyway — one scroll beats two. */
  .train-circuits {
    grid-template-columns: 1fr;
    max-height: none; overflow: visible;
    padding-right: 0; margin-right: 0;
  }
  .train-hours-row, .train-panels { grid-template-columns: 1fr; }
  .train-body { padding: 14px 15px 4px; max-height: 62vh; }
  .train-head, .train-foot { padding: 14px 15px; }
  .train-note { flex: 1 1 100%; order: 3; }
  .train-foot .sim-btn { flex: 1 1 0; justify-content: center; }
  .train-hours-input { font-size: 30px; }
}

/* ---------- bulk send ----------
   Reaproveita a caixa do "send to the circuits": é a mesma decisão, tomada uma vez para
   um lote. O que ela acrescenta é a LISTA — e a lista precisa dizer, sem abrir nada, o
   que cada Racerz custa e quem o saldo não alcança. */

/* Nem primário nem destrutivo: é um atalho. Fica ao lado dos outros, marcado apenas por
   uma borda em âmbar, para não competir com o "SEND TO THE CIRCUITS" do Racerz aberto. */
.sim-btn.is-bulk {
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 11px 20px; font-size: 13px;
  border-color: var(--accent-soft); color: var(--accent-soft);
  background: rgba(233,161,59,0.08);
}
.sim-btn.is-bulk:hover:not(:disabled) { background: rgba(233,161,59,0.16); color: var(--accent); }
.sim-btn.is-bulk small {
  display: block; font-family: var(--sim-mono); font-style: normal;
  font-size: 8px; font-weight: 400; letter-spacing: 0.06em; opacity: 0.8; margin-top: 1px;
}

/* Duas colunas enquanto houver largura: a lista à esquerda, o custo e o resumo à direita.
   Empilhados, o total ficava abaixo da dobra num laptop — e é o total que decide se o
   lote vale a pena. `align-items: start` para o painel não esticar junto com a lista. */
.bulk-cols {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 12px;
}
.bulk-cols .train-panels { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
/* Empilhados, os dois painéis somam sete linhas com o ritmo do envio individual e
   empurram o rodapé para fora da janela num laptop. Dois pixels por linha resolvem sem
   mexer no tamanho de nada que se lê. */
.bulk-cols .train-panel { padding: 11px 15px; }
.bulk-cols .train-row { padding: 5px 0; }
.bulk-cols .train-panel .train-legend { margin-bottom: 6px; }

.bulk-listhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.bulk-pick {
  flex: 0 0 auto; cursor: pointer; padding: 5px 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.12em;
  transition: border-color .15s var(--ease-smooth), color .15s var(--ease-smooth);
}
.bulk-pick:hover { border-color: var(--accent); color: var(--accent); }

/* Cresce até a altura dos dois painéis ao lado e para: passar disso é a lista empurrando
   o rodapé com o botão de enviar para fora da janela. */
.bulk-list {
  max-height: 288px; overflow-y: auto; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.bulk-list::-webkit-scrollbar { width: 5px; }
.bulk-list::-webkit-scrollbar-thumb { background: var(--border-strong); }
.bulk-list::-webkit-scrollbar-track { background: transparent; }

/* GRADE DE RETRATOS. A lista era uma pilha de números — "#1837" numa coluna de 40 linhas
   não identifica nada, e a arte identifica na hora. Cada cartão é um botão de verdade
   (aria-pressed), não um checkbox: o alvo de clique é o retrato inteiro. */
.bulk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 7px; padding: 8px;
}
.bulk-tile {
  position: relative; display: grid; gap: 3px; padding: 6px; cursor: pointer;
  text-align: center; background: var(--surface); border: 1px solid var(--border);
  font-family: var(--sim-mono); font-size: 9px; color: var(--text-dim);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color .14s var(--ease-smooth), background .14s var(--ease-smooth);
}
.bulk-tile:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.03); }
.bulk-tile.is-on { border-color: var(--accent); background: rgba(233,161,59,0.07); color: var(--text); }
.bulk-tile-art { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-2); font-size: 11px; }
/* O retrato de quem NÃO vai fica dessaturado: com 40 cartões, a diferença tem que se ler
   de longe, e uma borda sozinha some no meio da grade. */
.bulk-tile:not(.is-on) .bulk-tile-art { filter: grayscale(1) brightness(0.62); }
.bulk-tile-check {
  position: absolute; top: 4px; right: 4px; width: 17px; height: 17px;
  display: grid; place-items: center; font-size: 10px; line-height: 1;
  background: var(--accent); color: #141006; opacity: 0;
  transition: opacity .14s var(--ease-smooth);
}
.bulk-tile.is-on .bulk-tile-check { opacity: 1; }
.bulk-tile-lv {
  position: absolute; top: 4px; left: 4px; padding: 2px 5px;
  background: rgba(10,10,12,0.78); letter-spacing: 0.06em; font-size: 8px;
}
.bulk-tile-id {
  font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 13px;
  color: var(--text);
}
.bulk-tile-cost {
  padding: 2px 4px; border: 1px solid var(--border-strong); color: var(--accent);
  letter-spacing: 0.04em; font-size: 8px;
}
/* Já pago: o cartão mais barato do lote, e o que o servidor manda primeiro quando o saldo
   é curto. Verde para que a fila de custo se leia de cima a baixo. */
.bulk-tile-cost.is-free { border-color: rgba(79,180,119,0.45); color: var(--success); }
.bulk-tile-cost.is-short { border-color: rgba(199,68,54,0.5); color: var(--danger); }
/* Marcado mas fora do alcance do saldo: continua visível e continua marcado — o servidor
   corta exatamente estes, e escondê-los faria o total mentir. */
.bulk-tile.is-unfunded { box-shadow: inset 0 0 0 1px var(--danger); }

.bulk-listnote {
  margin: 0 0 14px; font-family: var(--sim-mono); font-size: 9px;
  letter-spacing: 0.05em; color: var(--text-dim);
}
.bulk-listnote:empty { display: none; }

/* As duas colunas se sustentam até o mesmo 780px em que o resto do modal já empilha:
   com a lista sobrando largura e o custo fora da tela, uma coluna só era o pior dos dois
   mundos justamente nas telas de ~800px. */
@media (max-width: 900px) {
  .bulk-cols { gap: 10px; }
  .bulk-list { max-height: 216px; }
  .bulk-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

@media (max-width: 780px) {
  .bulk-cols { grid-template-columns: 1fr; }
  /* O cartão inteiro é o alvo do toque, então o retrato já dá área de sobra — o que falta
     no telefone é caber três por linha sem virar miniatura. */
  .bulk-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .bulk-cols .train-panels { grid-template-columns: 1fr; }
  .bulk-list { max-height: 190px; }
  /* Os três atalhos de seleção não cabem numa linha com o título; deixá-los quebrar sozinhos
     em uma linha própria é melhor do que espremer "ONLY WHAT I CAN AFFORD" contra a borda. */
  .bulk-listhead .train-legend { flex: 1 1 100%; }
  .bulk-pick { flex: 1 1 auto; text-align: center; }
}

/* ---------- career track overlay ---------- */

.career-box { max-width: 940px; width: min(940px, 100%); }
.career-body { padding: 4px 2px 2px; }
.career-sub { font-family: var(--sim-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 18px; }
.career-ladder { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.career-rung { flex: 1 1 0; min-width: 62px; text-align: center; }
.career-rung-box {
  border: 1px solid var(--border); background: var(--surface-2); padding: 9px 4px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.career-rung.is-done .career-rung-box {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: var(--accent-soft);
}
.career-rung.is-current .career-rung-box { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.career-rung-lv { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 16px; }
.career-rung.is-done .career-rung-lv { color: #141006; }
.career-rung-cost { display: block; font-family: var(--sim-mono); font-size: 8px; margin-top: 3px; color: var(--text-dim); }
.career-rung.is-done .career-rung-cost { color: rgba(20,16,6,0.72); }
.career-rung-cazh { display: block; font-family: var(--sim-mono); font-size: 7.5px; margin-top: 6px; color: #6a6a72; }
.career-total { margin-top: 16px; font-family: var(--sim-mono); font-size: 10px; color: var(--text-dim); line-height: 1.7; }
.career-total b { color: var(--accent); font-weight: 400; }

/* ---------- garage header ---------- */
/* The <select> is gone: the Racerz was already picked in the pit lane, and two pickers
   for one decision is what made the Garage feel like a separate product. */

.app-page[data-page="simulator"] .garage-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.garage-head-k { font-family: var(--sim-mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--text-dim); }
.garage-head-v { font-family: var(--sim-display); font-style: italic; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.app-page[data-page="simulator"] .garage-head .sim-bankline-go { margin-left: auto; }

/* ---------- admin fields ----------
   The Cash Shop gets away with bare `.boost-input`s and placeholders, but these carry
   values the admin has to READ, not just type — "Level curve (hours, comma separated)"
   does not fit in a placeholder, and a placeholder disappears the moment there is a
   value. So they keep a real label, and `.shop-field` is what stacks the two.
   (Without this rule the class existed only in the markup: the inputs fell back to the
   browser default and showed up as white rectangles in a dark panel.) */

.shop-form .shop-field {
  display: flex; flex-direction: column; gap: 5px;
  flex: 1 1 190px; min-width: 0;
}
.shop-form .shop-field > span {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.shop-form .shop-field .boost-input { width: 100%; min-width: 0; }
/* Free-text lists need more room than a number field, or they wrap mid-value. */
.shop-form .shop-field:has(> .boost-input[type="text"]) { flex-basis: 250px; }

/* ---------- boot sequence ---------- */

.sim-boot {
  position: absolute; inset: 0; z-index: 20;
  display: grid; align-content: center; gap: 3px;
  padding: 28px 30px;
  background: var(--bg-deep);
  font-family: var(--sim-mono); font-size: 12px; color: var(--sim-telemetry);
}
.sim-boot.is-done { animation: simBootOut .45s var(--ease-smooth) forwards; }
@keyframes simBootOut { to { opacity: 0; visibility: hidden; } }
.sim-boot-line { opacity: 0; animation: simBootIn .18s steps(1) forwards; }
@keyframes simBootIn { to { opacity: 1; } }
.sim-boot-line b { color: var(--accent); font-weight: 400; }
.sim-boot-skip {
  margin-top: 14px; justify-self: start;
  background: none; border: none; cursor: pointer;
  font-family: var(--sim-mono); font-size: 10px; color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- fuel gauge (buying hours) ---------- */

.fuel {
  position: relative; height: 26px; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 12px;
}
.fuel-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-soft));
  transition: width .35s var(--ease-smooth);
}
/* Marks the point the bank already covers, so "paid" and "to buy" are visibly different. */
.fuel-banked {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: rgba(125, 211, 160, 0.3);
}
.fuel-ticks { position: absolute; inset: 0; display: flex; pointer-events: none; }
.fuel-ticks i { flex: 1 1 0; border-right: 1px solid rgba(0,0,0,0.35); }
.fuel-ticks i:last-child { border-right: none; }
.fuel-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sim-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--text); text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  /* minmax(0,1fr), never a bare 1fr: `1fr` is minmax(AUTO,1fr), so the 132-card strip
     inside the lane became the column's minimum and blew the track out to 13,960px. */
  .sim-stage { grid-template-columns: minmax(0, 1fr); }
  /* The lane becomes a horizontal strip: on a phone the Racerz picker is a swipe, and
     the driver sheet gets the full width it needs. Sticky and the height cap only make
     sense while it is a column beside the sheet. */
  .sim-pitlane { position: static; max-height: none; min-height: 0; min-width: 0; }
  .sim-lane-head { flex-direction: row; align-items: center; gap: 8px; }
  .sim-lane-head .sim-lane-label { display: none; }
  .sim-lane-filters { flex: 0 0 auto; }
  .sim-lane-chip { flex: 0 0 auto; padding: 5px 10px; }
  /* min-width:0 because an <input> carries an intrinsic width that flex will not shrink
     past on its own — without it the field runs off the right edge of a phone. */
  .sim-lane-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .sim-lane-list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding-right: 0; margin-right: 0; padding-bottom: 6px;
    /* fitPitLane() writes an inline max-height for the desktop column, and an inline
       style outranks a media query — so this override has to shout to undo it, however
       late the resize handler happens to run. */
    max-height: none !important;
  }
  .sim-lane-list .sim-lane-label,
  .sim-lane-list .sim-lane-none { align-self: center; flex: 0 0 auto; writing-mode: horizontal-tb; }
  .sim-pit { flex: 0 0 96px; }
  .sim-statrail { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .sim-head { flex-wrap: wrap; }
  .sim-tabs { width: 100%; margin-left: 0; }
  .sim-sheet-body { grid-template-columns: 1fr; }
  .sim-trackbox { grid-template-columns: 1fr; }
  .sim-trackbox-tel { border-left: none; border-top: 1px solid var(--border); }
  .sim-telemetry { flex-direction: row; justify-content: space-between; }
  .sim-hero { height: 150px; }
  .sim-duo { grid-template-columns: 1fr; }
  /* Five buttons never fit across a phone, and a horizontal scroller just hid the last
     two behind the edge — DRIVER SHEET and GARAGE were sliced in half with no hint that
     anything was there. So the bar wraps instead: the action that matters gets its own
     full-width row, and the rest share the row below. Nothing is cut, nothing scrolls. */
  .sim-actions {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px; padding: 9px 8px 10px;
  }
  .sim-btn {
    padding: 10px 6px; font-size: 11px; letter-spacing: 0.04em;
    justify-content: center; text-align: center; min-width: 0;
  }
  /* The primary (and its destructive counterpart) span the full width on their own row. */
  .sim-btn.is-primary,
  .sim-btn.is-stop { grid-column: 1 / -1; padding: 12px 14px; font-size: 14px; }
  .sim-btn.is-stop { align-items: center; }
  .sim-btn.is-stop small { display: block; font-size: 7.5px; }
  /* O envio em massa também toma a linha inteira. Em um quarto da largura o rótulo
     quebrava em quatro linhas ("BULK / SEND / 14 IDLE / · ONE CLICK") e virava um bloco
     alto e ilegível ao lado de quatro botões baixos. */
  .sim-btn.is-bulk {
    grid-column: 1 / -1; align-items: center;
    padding: 11px 14px; font-size: 13px;
  }
  .sim-btn.is-bulk small { font-size: 7.5px; }
}

/* Respect users who asked the OS to calm animations down. */
@media (prefers-reduced-motion: reduce) {
  .sim-rig-status::before,
  .sim-pit-live,
  .sim-live.is-hit,
  .sim-boot-line { animation: none; opacity: 1; }
}

/* ============================================================
   MODAL DE PRIMEIRO ACESSO
   Aparece uma vez ao abrir o Simulator. Herda .modal/.modal-backdrop do style.css
   (posicionamento e escurecimento) e só redefine o miolo, para ficar no idioma visual
   da Academy em vez do genérico dos outros modais do app.
   ============================================================ */
.sim-intro-box {
  width: min(94vw, 620px);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #14110c, #0d0c0f 62%);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.sim-intro-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.sim-intro-head h3 {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 19px;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.sim-intro-kicker {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 4px;
}
.sim-intro-head .train-x { margin-left: auto; }

.sim-intro-lead {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 18px;
}
.sim-intro-lead b { color: var(--text); }

.sim-intro-steps {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.sim-intro-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--accent);
}
.sim-intro-n {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  background: rgba(233, 161, 59, 0.12);
}
.sim-intro-steps b { font-size: 13px; letter-spacing: 0.3px; }
.sim-intro-steps p {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.sim-intro-steps p b { color: var(--accent-soft); font-size: inherit; }

.sim-intro-note {
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  border: 1px solid rgba(233, 161, 59, 0.28);
  background: rgba(233, 161, 59, 0.06);
}
.sim-intro-note b { color: var(--text); }

.sim-intro-fine {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.75;
  margin-bottom: 18px;
}

.sim-intro-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sim-intro-dismiss {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.sim-intro-dismiss input { accent-color: var(--accent); cursor: pointer; }
.sim-intro-foot .sim-btn { margin-left: auto; }

@media (max-width: 520px) {
  .sim-intro-box { padding: 18px 16px; }
  .sim-intro-foot .sim-btn { margin-left: 0; width: 100%; }
}