/* ===================================================================
   Mobile: keep the motion, drop the filters.

   Measured on a 390px viewport before this sheet existed:

     .trophy-beam        453k px2 of blur(20px), animating
     svg (flow overlay)  581k px2 of drop-shadow
     .v-link-pulse x13   138k px2 of drop-shadow, animating
     .v-link-light x13   138k px2 of drop-shadow
     .trophy-object x4   210k px2 of a 20px shadow
     .tr-ticket          148k px2 of a 44px shadow

   Nearly a million square pixels of blurred, animating surface on a
   phone GPU. Blur is the expensive part of all of it — a filter is
   resampled every frame over its whole box, and a 20px radius reads
   the surrounding pixels for each output pixel.

   Everything still moves. The travelling lights, the pulses, the
   reveals and the tile charge all run exactly as they do on desktop;
   only the blur comes off, and the stroke is brightened and widened
   slightly to carry the same read without it. At 390px a 2.5px glow
   around a 2.6px line is under a millimetre of screen — it was never
   doing the work the stroke colour does.

   700px rather than a device query: this is about paint area and the
   width of a phone, not about touch.

   Loaded after flow.css, which is otherwise last, because it overrides
   that sheet's tokens. It contains nothing but a mobile media block,
   so it can be deleted whole without touching anything else.
   =================================================================== */

@media (max-width: 700px) {
  :root {
    /* flow.css paints every travelling light through this token, on the
       container rather than per path. One line removes the glow from
       the routes, the footer court and the image overlays at once. */
    --flow-filter: none;
    /* Compensating: the line does the work the bloom used to. */
    --flow-width: 3;
    --flow-stroke: #e4ffff;
  }

  /* The connector system's own paths, which state their shadows
     directly rather than through the token. */
  .v-link-pulse,
  .v-link-light,
  .v-link-track,
  .v-link-port,
  .v-live-wire,
  .v-wire,
  .v-flow {
    filter: none !important;
  }

  /* The single most expensive element measured: a 20px blur over a
     453k px2 box, running continuously. The beam is a soft gradient
     already; at phone size the blur adds nothing the gradient does not. */
  .trophy-beam {
    filter: none !important;
  }

  /* Large-radius contact shadows. Kept, because they are what lifts the
     cutouts off the page, but at a radius a phone can afford. */
  .trophy-object {
    filter: drop-shadow(0 10px 8px #00000066) !important;
  }
  .tr-ticket {
    filter: drop-shadow(0 12px 16px #03182b3d) !important;
  }

  /* The tile language keeps its edge and its bloom — both are cheap,
     being a border colour and a gradient — but loses the inset/outer
     glow stack, which is four blurred shadows per tile. */
  .v-electric:hover,
  .v-electric:focus-visible,
  .v-electric:focus-within,
  .v-electric[aria-pressed="true"],
  .v-electric.v-hover-lit {
    box-shadow: 0 0 0 1px var(--tile-edge-hot), 0 8px 18px #00142c40 !important;
  }
  .v-tile-row > .v-electric {
    box-shadow: 0 6px 14px #00142c33;
  }

  /* Readability floor.

     Measured at 390px, the only prose under 12px was a handful of
     captions and disclaimers — "Illustrative factors, not scores or
     weights" sat at 10px. The 9-10px labels inside the app mockups are
     left alone on purpose: they are drawings of an interface, not text
     anyone is asked to read, and enlarging them would break the
     illusion they depend on. This floors real captions only. */
  main > section small,
  main > section figcaption,
  main > section .caption {
    font-size: max(12px, 1em);
  }

  /* A CSS background, so srcset cannot reach it: 1586px wide for a
     viewport under 700. */
  #ladder.home-arena {
    background-image: url(/assets/home-arena-v71-720w.webp);
  }
}