:root {
      color-scheme: dark;
      --so-void: #070b1f;
      --so-surface: #0b1230;
      --so-surface-raised: #101838;
      --so-edge: #22306b;
      --so-volt: #2de2ff;
      --so-flux: #b026ff;
      --so-paper: #eaf0ff;
      --so-muted: #9aa8d5;
      --so-line: rgba(143, 246, 255, 0.16);
      --so-ease: cubic-bezier(0.22, 1, 0.36, 1);
      /* The standard frame: where the card's no-photo figure stands inside
         the photo's square. The photo editor drew an outline on it too, until
         Dan took it out (2026-09-25): lining a head up with a dashed figure
         was too much to ask of a new player, so photos are framed freely. */
      --so-frame-top: 2%;
      --so-frame-left: 4%;
      --so-frame-size: 92%;
    }

    /* ── Floodlights boot screen ─────────────────────────────────────────
       Plain CSS on purpose. tailwind.css is a committed build artifact, so a
       class missing from that build renders as nothing, silently -- and this
       layer has to be correct before anyone can see that it is not. Every rule
       here is self-contained under the boot- prefix.                        */
    #boot-splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 26px;
      padding: 24px;
      background: #070B1F;
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #boot-splash[hidden] { display: none; }

    .boot-scene {
      width: min(92vw, 440px);
      height: auto;
      display: block;
    }

    /* Lamp banks. `color` drives currentColor inside the shadow tree of a
       use element, the only styling hook that reaches symbol internals.      */
    .boot-lamp {
      color: #131A38;
      transition: color 0.45s ease-out;
    }
    .boot-scene[data-lit="1"] .boot-lamp[data-light="1"],
    .boot-scene[data-lit="2"] .boot-lamp[data-light="1"],
    .boot-scene[data-lit="2"] .boot-lamp[data-light="2"],
    .boot-scene[data-lit="3"] .boot-lamp[data-light="1"],
    .boot-scene[data-lit="3"] .boot-lamp[data-light="2"],
    .boot-scene[data-lit="3"] .boot-lamp[data-light="3"],
    .boot-scene[data-lit="4"] .boot-lamp,
    .boot-scene[data-lit="blast"] .boot-lamp {
      color: #2DE2FF;
      animation: boot-strike 0.42s steps(1, end) 1, boot-hum 2.6s ease-in-out 0.42s infinite;
      filter: drop-shadow(0 0 5px rgba(45,226,255,0.85)) drop-shadow(0 0 14px rgba(45,226,255,0.45));
    }
    .boot-scene[data-lit="blast"] .boot-lamp {
      animation: none;
      filter: drop-shadow(0 0 9px rgba(45,226,255,1)) drop-shadow(0 0 30px rgba(45,226,255,0.7));
    }

    /* A floodlight does not fade up, it strikes: on, off, on, on. This is the
       difference between reading as a stadium and reading as a checkbox.     */
    @keyframes boot-strike {
      0%   { opacity: 0.15; }
      18%  { opacity: 1; }
      30%  { opacity: 0.2; }
      44%  { opacity: 1; }
      56%  { opacity: 0.45; }
      70%  { opacity: 1; }
      100% { opacity: 1; }
    }
    @keyframes boot-hum {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.86; }
    }

    .boot-beam, .boot-pool {
      opacity: 0;
      transition: opacity 0.7s ease-out 0.2s;
    }
    .boot-scene[data-lit="1"] [data-light="1"].boot-beam,
    .boot-scene[data-lit="1"] [data-light="1"].boot-pool,
    .boot-scene[data-lit="2"] [data-light="1"].boot-beam,
    .boot-scene[data-lit="2"] [data-light="1"].boot-pool,
    .boot-scene[data-lit="2"] [data-light="2"].boot-beam,
    .boot-scene[data-lit="2"] [data-light="2"].boot-pool,
    .boot-scene[data-lit="3"] [data-light="1"].boot-beam,
    .boot-scene[data-lit="3"] [data-light="1"].boot-pool,
    .boot-scene[data-lit="3"] [data-light="2"].boot-beam,
    .boot-scene[data-lit="3"] [data-light="2"].boot-pool,
    .boot-scene[data-lit="3"] [data-light="3"].boot-beam,
    .boot-scene[data-lit="3"] [data-light="3"].boot-pool,
    .boot-scene[data-lit="4"] .boot-beam,
    .boot-scene[data-lit="4"] .boot-pool,
    .boot-scene[data-lit="blast"] .boot-beam,
    .boot-scene[data-lit="blast"] .boot-pool {
      opacity: 1;
    }

    /* The grass genuinely brightens four times -- one step per real event. */
    .boot-grass {
      fill: #2DE2FF;
      opacity: 0.018;
      transition: opacity 0.6s ease-out;
    }
    .boot-scene[data-lit="1"] .boot-grass { opacity: 0.032; }
    .boot-scene[data-lit="2"] .boot-grass { opacity: 0.05; }
    .boot-scene[data-lit="3"] .boot-grass { opacity: 0.075; }
    .boot-scene[data-lit="4"] .boot-grass { opacity: 0.1; }
    .boot-scene[data-lit="blast"] .boot-grass { opacity: 0.2; }

    .boot-line {
      fill: none;
      stroke: #2DE2FF;
      stroke-width: 1.1;
      opacity: 0.1;
      transition: opacity 0.6s ease-out;
    }
    .boot-scene[data-lit="1"] .boot-line { opacity: 0.16; }
    .boot-scene[data-lit="2"] .boot-line { opacity: 0.23; }
    .boot-scene[data-lit="3"] .boot-line { opacity: 0.3; }
    .boot-scene[data-lit="4"] .boot-line { opacity: 0.4; }
    .boot-scene[data-lit="blast"] .boot-line { opacity: 0.75; }

    .boot-mast { fill: #0E1533; stroke: rgba(255,255,255,0.10); stroke-width: 0.7; }

    .boot-wordmark {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800;
      font-size: 25px;
      letter-spacing: 6px;
      text-anchor: middle;
      fill: rgba(255,255,255,0.22);
      transition: fill 0.6s ease-out;
    }
    .boot-scene[data-lit="2"] .boot-wordmark { fill: rgba(255,255,255,0.4); }
    .boot-scene[data-lit="3"] .boot-wordmark { fill: rgba(255,255,255,0.68); }
    .boot-scene[data-lit="4"] .boot-wordmark,
    .boot-scene[data-lit="blast"] .boot-wordmark { fill: #ffffff; }

    .boot-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      text-align: center;
      max-width: 300px;
    }
    .boot-status {
      color: rgba(255,255,255,0.82);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.4px;
      margin: 0;
      min-height: 17px;
    }
    .boot-sub {
      color: rgba(255,255,255,0.34);
      font-size: 11.5px;
      font-weight: 400;
      line-height: 1.5;
      margin: 0;
      min-height: 17px;
    }
    .boot-bar {
      width: 200px;
      height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.45s ease-out;
    }
    .boot-bar[data-show="1"] { opacity: 1; }
    .boot-bar-fill {
      display: block;
      position: relative;
      width: 4%;
      height: 100%;
      border-radius: 999px;
      background: #2DE2FF;
      box-shadow: 0 0 8px 1px rgba(45,226,255,0.7);
      overflow: hidden;
      /* Linear, not eased: the bar is driven by its own creep loop, and an
         ease on top of that reads as the bar hesitating.                    */
      transition: width 0.4s linear;
    }
    /* Deep into a cold start the honest value barely moves -- a couple of
       pixels a minute. A bar that holds still reads as broken, so the light
       keeps travelling along it while the number tells the truth.           */
    .boot-bar-fill::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0) 100%);
      animation: boot-sweep 1.6s linear infinite;
    }
    @keyframes boot-sweep {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }

    .boot-action {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      color: rgba(255,255,255,0.55);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 9px 20px;
      cursor: pointer;
      display: none;
      transition: border-color 0.15s, color 0.15s;
    }
    .boot-action[data-show="1"] { display: inline-block; }
    .boot-action:hover { border-color: rgba(45,226,255,0.5); color: #2DE2FF; }
    .boot-action:active { transform: scale(0.97); }

    #boot-splash[data-state="leaving"] {
      animation: boot-leave 0.44s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
    }
    @keyframes boot-leave {
      0%   { opacity: 1; transform: scale(1); }
      18%  { opacity: 1; transform: scale(1); background: #0b1f06; }
      100% { opacity: 0; transform: scale(1.045); }
    }

    @media (prefers-reduced-motion: reduce) {
      .boot-scene .boot-lamp { animation: none !important; }
      .boot-bar-fill::after { animation: none; opacity: 0; }
      #boot-splash[data-state="leaving"] {
        animation: boot-leave-plain 0.3s ease-out forwards;
      }
      @keyframes boot-leave-plain {
        from { opacity: 1; }
        to   { opacity: 0; }
      }
    }

    :focus-visible { outline: 2px solid #2DE2FF; outline-offset: 3px; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    @keyframes pulse-teal {
      0%, 100% { box-shadow: 0 0 6px 1px rgba(45,226,255,0.6); }
      50%       { box-shadow: 0 0 14px 4px rgba(45,226,255,0.9); }
    }
    .live-dot { animation: pulse-teal 1.8s ease-in-out infinite; }

    /* The tab you are on used to pulse a ring at you, forever, for no reason --
       the loudest thing on a screen you are not looking at. It is a still holo
       pill now: the tab is marked, it does not ask for attention. */
    .nav-on {
      background: linear-gradient(150deg, rgba(45,226,255,0.20), rgba(176,38,255,0.16));
      box-shadow: inset 0 0 0 1px rgba(45,226,255,0.4), 0 0 14px -5px rgba(45,226,255,0.9);
    }

    @keyframes court-ping {
      0%   { transform: scale(1);   opacity: 0.8; }
      70%  { transform: scale(2.2); opacity: 0;   }
      100% { transform: scale(1);   opacity: 0;   }
    }
    .court-ping::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 9999px;
      background: #2DE2FF;
      animation: court-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
    }

    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(10px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
    }
    @keyframes toast-out {
      from { opacity: 1; transform: translateX(-50%) translateY(0);    }
      to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
    }
    .toast-enter { animation: toast-in  0.28s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .toast-exit  { animation: toast-out 0.22s ease-in forwards; }

    @keyframes section-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0);   }
    }
    /* Do not retain the animation's transform after it finishes. A transformed
       ancestor becomes the containing block for fixed children, which made the
       expanded Explore map drift when it was opened after the page was scrolled. */
    .section-enter { animation: section-in 0.2s ease-out; }

    body {
      background-color: #070B1F;
      -webkit-font-smoothing: antialiased;
    }

    button,
    [role="button"],
    a,
    input,
    select,
    textarea {
      touch-action: manipulation;
    }
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    a[href] { cursor: pointer; }
    button:disabled,
    [aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.48;
    }
    [data-auth-nav][hidden] { display: none !important; }
    body:not(.is-authenticated) #main-content { margin-left: 0 !important; }
    body:not(.is-authenticated) .app-topbar { display: none; }

    /* ── Authenticated app shell ───────────────────────────────────────
       The four core destinations share one stadium language: dark indigo
       ground, floodlight hairlines, condensed score typography and a quiet
       goal-net grid. These semantic classes deliberately live outside the
       generated Tailwind bundle so a purge can never strip the app frame. */
    body.is-authenticated {
      background:
        radial-gradient(circle at 82% 8%, rgba(176,38,255,.09), transparent 28rem),
        radial-gradient(circle at 18% 88%, rgba(45,226,255,.07), transparent 30rem),
        var(--so-void);
    }
    body.is-authenticated::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .24;
      background-image:
        linear-gradient(rgba(143,246,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143,246,255,.028) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, black, transparent 92%);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
    }
    #main-content { min-width: 0; }
    .app-screen:not([data-section="landing"]) {
      width: min(100%, 82rem);
      margin-inline: auto;
    }
    .app-topbar {
      min-height: 4.5rem;
      border-bottom: 1px solid rgba(143,246,255,.08);
      background: linear-gradient(180deg, rgba(7,11,31,.98), rgba(7,11,31,.88));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .app-sidebar {
      background:
        linear-gradient(180deg, rgba(45,226,255,.035), transparent 30%),
        rgba(7,11,31,.97);
      border-color: rgba(143,246,255,.1);
      box-shadow: 18px 0 56px rgba(0,0,0,.24);
    }
    .brand-lockup {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
    }
    .brand-mark {
      width: 2rem;
      height: 2.25rem;
      filter: drop-shadow(0 0 12px rgba(45,226,255,.34));
    }
    .brand-wordmark {
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: .055em;
      line-height: 1;
      text-transform: uppercase;
    }
    .nav-sidebar-item { min-height: 3.5rem; }
    .nav-sidebar-item:hover { background: rgba(143,246,255,.055); }
    .mobile-dock {
      border-color: rgba(143,246,255,.1);
      box-shadow: 0 -18px 48px rgba(0,0,0,.42);
    }
    .mobile-dock [data-tab] { min-width: 3.5rem; min-height: 3.75rem; }

    /* A screen starts like a pre-match scoreboard, not a generic card. */
    .screen-intro {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: end;
      gap: 1rem;
      min-height: 11.5rem;
      margin-bottom: 1.25rem;
      padding: clamp(1.25rem, 3vw, 2rem);
      overflow: hidden;
      border: 1px solid rgba(143,246,255,.16);
      border-radius: 1.5rem;
      background:
        radial-gradient(circle at 82% 18%, rgba(176,38,255,.17), transparent 17rem),
        linear-gradient(145deg, rgba(16,24,56,.96), rgba(7,11,31,.94));
      box-shadow: 0 20px 54px -34px rgba(45,226,255,.7), inset 0 1px rgba(255,255,255,.035);
    }
    .screen-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .44;
      background:
        radial-gradient(circle at 78% 52%, transparent 0 4.8rem, rgba(143,246,255,.1) 4.85rem 4.9rem, transparent 5rem),
        linear-gradient(90deg, transparent calc(78% - .5px), rgba(143,246,255,.09) 78%, transparent calc(78% + .5px)),
        repeating-linear-gradient(45deg, rgba(45,226,255,.035) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,.03) 0 1px, transparent 1px 16px);
    }
    .screen-intro::after {
      content: '';
      position: absolute;
      inset: auto 1.5rem 0;
      height: 2px;
      background: linear-gradient(90deg, var(--so-volt), rgba(176,38,255,.72), transparent 82%);
      box-shadow: 0 0 14px rgba(45,226,255,.42);
    }
    .screen-kicker {
      margin: 0;
      color: var(--so-volt);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .17em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .screen-title {
      margin: 0;
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: clamp(2.5rem, 5vw, 4.4rem);
      font-weight: 800;
      letter-spacing: -.025em;
      line-height: .92;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .screen-copy {
      max-width: 42rem;
      margin-bottom: 0;
      color: var(--so-muted);
      font-size: .95rem;
      line-height: 1.55;
    }
    .section-heading {
      margin: 0;
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: .025em;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .so-button {
      display: inline-flex;
      min-height: 3rem;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .7rem 1.15rem;
      border: 1px solid transparent;
      border-radius: .9rem;
      font-size: .875rem;
      font-weight: 800;
      line-height: 1;
      transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    }
    .so-button-primary {
      color: #fff;
      border-color: rgba(143,246,255,.28);
      background: linear-gradient(100deg, #14748f, #4f3bc7 52%, #7f1cd1);
      box-shadow: 0 14px 30px -18px rgba(45,226,255,.95), inset 0 1px rgba(255,255,255,.14);
    }
    .so-button-primary:hover {
      border-color: rgba(143,246,255,.52);
      box-shadow: 0 16px 34px -16px rgba(45,226,255,.95), inset 0 1px rgba(255,255,255,.18);
    }
    .so-button:active { opacity: .78; }

    .empty-state {
      position: relative;
      display: grid;
      width: 100%;
      min-height: 13rem;
      place-content: center;
      padding: 2rem;
      overflow: hidden;
      border: 1px dashed rgba(143,246,255,.2);
      border-radius: 1.5rem;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 3rem, rgba(143,246,255,.07) 3.05rem 3.1rem, transparent 3.2rem),
        linear-gradient(145deg, rgba(16,24,56,.74), rgba(11,18,48,.52));
      text-align: center;
    }
    .empty-state::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .28;
      background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(143,246,255,.11) 50%, transparent calc(50% + .5px)),
        repeating-linear-gradient(45deg, rgba(45,226,255,.035) 0 1px, transparent 1px 18px);
    }
    .empty-state > * { position: relative; z-index: 1; }
    .screen-skeleton-card {
      min-height: 9.5rem;
      border: 1px solid rgba(255,255,255,.055);
      border-radius: 1.25rem;
      background: linear-gradient(100deg, rgba(16,24,56,.65) 20%, rgba(34,48,107,.56) 40%, rgba(16,24,56,.65) 60%);
      background-size: 200% 100%;
      animation: profile-skeleton-shift 1.2s ease-in-out infinite;
    }
    .match-pitch-mark {
      position: relative;
      display: grid;
      width: 3.25rem;
      height: 3rem;
      flex: none;
      place-items: center;
      clip-path: polygon(8% 0, 92% 0, 100% 14%, 100% 86%, 92% 100%, 8% 100%, 0 86%, 0 14%);
      color: var(--so-volt);
      background:
        linear-gradient(145deg, rgba(45,226,255,.15), rgba(176,38,255,.14)),
        var(--so-surface-raised);
      box-shadow: inset 0 0 0 1px rgba(143,246,255,.28);
    }
    /* My Matches rows: when the buttons cannot fit beside the text, they drop onto
       their own line instead of squeezing the date and player count into a sliver
       (or sliding over it). */
    .mm-row { flex-wrap: wrap; }
    .mm-row > .mm-text { flex: 1 1 8.5rem; min-width: 0; }
    .mm-row > .mm-actions { margin-left: auto; }
    /* Upcoming session card (My Sessions). The top is one button into the
       session; the state on the right is a label and must not look like one. */
    .up-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(143,246,255,.14);
      border-radius: 1.25rem;
      background:
        radial-gradient(120% 90% at 0% 0%, rgba(45,226,255,.10), transparent 55%),
        radial-gradient(90% 80% at 100% 100%, rgba(176,38,255,.10), transparent 60%),
        var(--so-surface-raised);
      box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.28);
    }
    .up-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, var(--so-volt), var(--so-flux));
      opacity: .85;
    }
    .up-head {
      display: flex;
      width: 100%;
      align-items: center;
      gap: .85rem;
      padding: .9rem .9rem .75rem 1.05rem;
      text-align: left;
      color: inherit;
      background: none;
      transition: background .2s var(--so-ease);
    }
    .up-head:hover { background: rgba(255,255,255,.025); }
    .up-head:active { background: rgba(45,226,255,.06); }
    .up-head:focus-visible { outline: 2px solid var(--so-volt); outline-offset: -2px; border-radius: 1.25rem; }
    .up-date {
      display: flex;
      flex: none;
      width: 3.4rem;
      flex-direction: column;
      align-items: center;
      padding: .4rem 0 .35rem;
      border: 1px solid rgba(143,246,255,.22);
      border-radius: .9rem;
      background: linear-gradient(160deg, rgba(45,226,255,.14), rgba(176,38,255,.10)), var(--so-surface);
      line-height: 1;
    }
    .up-date small { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--so-muted); }
    .up-date b { margin: .18rem 0 .14rem; font-size: 1.45rem; font-weight: 900; color: var(--so-paper); }
    .up-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .2rem; }
    .up-title { overflow: hidden; font-size: .95rem; font-weight: 800; color: var(--so-paper); text-overflow: ellipsis; white-space: nowrap; }
    .up-meta { overflow: hidden; font-size: .74rem; color: var(--so-muted); text-overflow: ellipsis; white-space: nowrap; }
    .up-fill { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
    .up-bar { position: relative; height: .3rem; flex: 1; max-width: 7.5rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
    .up-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--so-volt), var(--so-flux)); }
    .up-count { font-size: .7rem; font-weight: 700; color: rgba(234,240,255,.7); white-space: nowrap; }
    .up-state { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
    .up-state::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
    .up-state-open { color: #39ff88; }
    .up-state-full { color: #fbbf24; }
    .up-state-locked { color: var(--so-volt); }
    .up-chev { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: rgba(234,240,255,.45); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .up-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      padding: .55rem .8rem .65rem 1.05rem;
      border-top: 1px solid rgba(143,246,255,.08);
    }
    .up-btn {
      min-height: 2.5rem;
      padding: 0 1rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: .8rem;
      background: rgba(255,255,255,.04);
      color: rgba(234,240,255,.78);
      font-size: .78rem;
      font-weight: 800;
      transition: transform .15s var(--so-ease), background .2s, border-color .2s;
    }
    .up-btn:hover { border-color: rgba(45,226,255,.35); color: var(--so-paper); }
    .up-btn:active { transform: scale(.96); }
    .up-btn-room {
      flex: 1;
      border-color: rgba(45,226,255,.4);
      background: linear-gradient(135deg, rgba(45,226,255,.18), rgba(176,38,255,.16));
      color: var(--so-paper);
      box-shadow: 0 0 18px rgba(45,226,255,.12);
    }
    .up-btn-go { border-color: rgba(57,255,136,.4); background: rgba(57,255,136,.12); color: #7dffb0; }
    /* Hiding is rare, so it is a small control at the end of the row, not a
       line of its own under every card. */
    .up-hide {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      min-height: 2.5rem;
      margin-left: auto;
      padding: 0 .55rem;
      border-radius: .8rem;
      font-size: .7rem;
      font-weight: 700;
      color: rgba(252,165,165,.62);
    }
    .up-hide svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .up-hide:hover { color: #fca5a5; }
    /* Sessions Played (another player's profile). One compact row per night:
       the whole row opens the Session Summary. The latest five show; the rest
       open in place behind "View all". */
    /* minmax(0, 1fr): a row never grows wider than the phone because of a chip. */
    .sr-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .sr-list .sr-extra { display: none; }
    .sr-list.sr-open .sr-extra { display: block; }
    .sr-row {
      display: flex;
      width: 100%;
      align-items: center;
      gap: .8rem;
      padding: .65rem .8rem .65rem .65rem;
      border: 1px solid rgba(143,246,255,.1);
      border-radius: 1.1rem;
      background: var(--so-surface-raised);
      color: inherit;
      text-align: left;
      transition: border-color .2s, background .2s, transform .15s var(--so-ease);
    }
    .sr-row:hover { border-color: rgba(45,226,255,.28); }
    .sr-row:active { transform: scale(.985); background: rgba(45,226,255,.05); }
    .sr-row:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .sr-thumb {
      position: relative;
      display: grid;
      width: 3.6rem;
      height: 3.6rem;
      flex: none;
      place-items: center;
      overflow: hidden;
      border-radius: .85rem;
      color: var(--so-volt);
      background: linear-gradient(145deg, rgba(45,226,255,.15), rgba(176,38,255,.14)), var(--so-surface);
      box-shadow: inset 0 0 0 1px rgba(143,246,255,.22);
    }
    .sr-thumb svg { width: 74%; height: 74%; stroke: currentColor; opacity: .5; }
    .sr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .sr-has-photo { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .sr-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .18rem; }
    .sr-top { display: flex; align-items: center; gap: .4rem; min-width: 0; }
    .sr-title { overflow: hidden; font-size: .9rem; font-weight: 800; color: var(--so-paper); text-overflow: ellipsis; white-space: nowrap; }
    .sr-meta { font-size: .72rem; color: var(--so-muted); }
    .sr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-top: .15rem; }
    .sr-result {
      padding: .12rem .45rem;
      border-radius: .45rem;
      font-size: .68rem;
      font-weight: 800;
      white-space: nowrap;
      background: rgba(255,255,255,.06);
      color: rgba(234,240,255,.78);
    }
    .sr-result.sr-won { background: rgba(251,191,36,.14); color: #fcd34d; }
    .sr-result.sr-lost { background: rgba(248,113,113,.1); color: #fca5a5; }
    .sr-tags .sp-tick { gap: 3px; padding: 1px 7px 1px 2px; font-size: 8.5px; letter-spacing: .1em; }
    .sr-tags .sp-tick i { width: 12px; height: 12px; }
    .sr-tags .night-answers { margin: 0; }
    .sr-cta {
      display: flex;
      flex: none;
      align-items: center;
      gap: .1rem;
      max-width: 4.6rem;
      font-size: .66rem;
      font-weight: 800;
      line-height: 1.15;
      text-align: right;
      color: var(--so-volt);
    }
    /* The whole row opens the Summary, so the arrow is enough on screen; the
       words stay for screen readers. Without them the chips fit on one line. */
    .sr-cta-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sr-cta svg { width: .95rem; height: .95rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .sr-more {
      width: 100%;
      min-height: 2.75rem;
      border: 1px dashed rgba(143,246,255,.22);
      border-radius: 1rem;
      background: rgba(45,226,255,.04);
      color: var(--so-volt);
      font-size: .78rem;
      font-weight: 800;
      transition: background .2s;
    }
    .sr-more:hover { background: rgba(45,226,255,.09); }

    /* ── Sessions that pull the eye (Ron, 2026-10-04) ─────────────────────
       The same heads on your own profile and on another player's: a title, a
       lit count, and colour that says what kind of list it is. The soonest
       session is the brightest thing on the list and says when in words. */
    .ps-head { display: flex; align-items: center; gap: .55rem; margin: 0 .25rem .75rem; }
    .ps-count {
      display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem;
      border-radius: 999px; font-size: .78rem; font-weight: 900; color: #0A1028;
      background: linear-gradient(135deg, var(--so-volt), #9C7BFF);
      box-shadow: 0 0 14px rgba(45,226,255,.35);
    }
    .ps-count-live { background: linear-gradient(135deg, #39ff88, var(--so-volt)); box-shadow: 0 0 14px rgba(57,255,136,.35); }
    .ps-note { margin-left: auto; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .ps-note-won { color: #fcd34d; }
    .ms-group + .ms-group { margin-top: 1rem; }
    .ms-sub {
      display: flex; align-items: center; gap: .5rem; margin: .25rem .25rem .6rem;
      font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
      color: rgba(234,240,255,.55);
    }
    .ms-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
    .ms-count {
      display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
      border-radius: 999px; font-size: .68rem; letter-spacing: 0;
      background: color-mix(in srgb, currentColor 16%, transparent);
    }
    .ms-live { color: #ff6b6b; }
    .ms-live .ms-sub { color: #ff8a8a; }
    .ms-live .ms-dot { animation: ms-pulse 1.4s ease-in-out infinite; }
    @keyframes ms-pulse { 50% { opacity: .35; } }
    @media (prefers-reduced-motion: reduce) { .ms-live .ms-dot { animation: none; } }
    .ms-next .ms-sub { color: var(--so-volt); }
    .ms-wait .ms-sub { color: #fbbf24; }
    .ms-done .ms-sub { color: rgba(234,240,255,.6); }
    .up-list > .up-card:first-child {
      border-color: rgba(45,226,255,.42);
      box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(45,226,255,.12), 0 14px 34px -10px rgba(45,226,255,.38);
    }
    .up-list > .up-card:first-child::before { width: 4px; opacity: 1; }
    .up-tagline { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
    .up-when {
      padding: .15rem .5rem; border-radius: 999px;
      font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
      color: #0A1028; background: var(--so-volt);
    }
    .up-when-today { background: #39ff88; box-shadow: 0 0 12px rgba(57,255,136,.45); }
    /* The edge wears the place colour: green first, red last (_placeColor). */
    .sr-row[style*="--pl"] { box-shadow: inset 3px 0 var(--pl); }
    .sr-chip {
      display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .42rem; border-radius: .45rem;
      font-size: .66rem; font-weight: 800; white-space: nowrap;
      background: rgba(255,255,255,.06); color: rgba(234,240,255,.82);
    }
    .sr-chip svg { width: .75rem; height: .75rem; }
    .sr-goals { color: var(--so-volt); background: rgba(45,226,255,.1); }
    .sr-up { color: #39ff88; background: rgba(57,255,136,.1); }
    .sr-down { color: #fca5a5; background: rgba(248,113,113,.1); }
    .mm-row.mm-won { border-color: rgba(251,191,36,.3); box-shadow: inset 3px 0 #fbbf24; }
    /* The lines of a football pitch, seen from above: touchlines, halfway
       line, centre circle, and a penalty box at each end — never a number. */
    .match-pitch-mark svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      opacity: .55;
    }

    /* Explore */
    #court-search {
      min-height: 3.25rem;
      border-color: rgba(143,246,255,.14);
      background: rgba(16,24,56,.88);
      box-shadow: inset 0 1px rgba(255,255,255,.025);
    }
    #court-search:focus {
      border-color: rgba(45,226,255,.58);
      box-shadow: 0 0 0 3px rgba(45,226,255,.09);
    }
    [data-section="courts"] [aria-label="Open full map"] {
      min-height: 12rem;
      border-radius: 1.5rem;
      box-shadow: 0 22px 48px -34px rgba(45,226,255,.85);
    }
    #nearby-courts-list > button { min-height: 13.5rem; }

    /* Rankings — the list sits on bare ground.
       This used to draw #rankings-list as a bordered, gradient-filled card.
       With the leader now standing in his own lit panel, a second panel of the
       same weight right under it flattened the difference back out: the thing
       the whole screen is built to say — one player is on top — was being
       argued against by the container. The two `.bo-row` padding rules that
       lived here went with it; that class left #rankings-list when the Board
       was rebuilt and now only the rivalries list uses it. */
    #rankings-list > .empty-state { border: 0; border-radius: 0; }

    /* Profile */
    [data-section="profile"] { padding-top: 1rem; }
    .profile-hero {
      position: relative;
      isolation: isolate;
      width: calc(100% - 2rem);
      max-width: 48rem;
      margin-inline: auto;
      overflow: hidden;
      /* On the "my" tab this sits in normal block flow, so shrinking never
         comes up. The player-card overlay is a flex column instead, and a
         flex item with overflow:hidden gets its automatic min-size floored
         to 0 -- the browser was free to crush this down to almost nothing
         and clip the card inside it rather than let the column grow. Pin it
         to its content size explicitly. */
      flex-shrink: 0;
      border: 1px solid rgba(143,246,255,.15);
      border-radius: 1.75rem;
      background:
        radial-gradient(circle at 50% 4%, rgba(45,226,255,.15), transparent 15rem),
        linear-gradient(145deg, rgba(16,24,56,.94), rgba(7,11,31,.9));
      box-shadow: 0 22px 58px -38px rgba(45,226,255,.86);
    }
    .profile-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .38;
      pointer-events: none;
      background:
        repeating-linear-gradient(45deg, rgba(45,226,255,.045) 0 1px, transparent 1px 17px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,.04) 0 1px, transparent 1px 17px);
      mask-image: linear-gradient(to bottom, black, transparent 75%);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
    }
    .profile-avatar {
      box-shadow: 0 0 0 6px rgba(45,226,255,.055), 0 0 32px -7px rgba(45,226,255,.72);
    }
    /* ── Under the card (Ron, 2026-10-04) ──────────────────────────────
       Handle, bio, followers, the Overall gap and the actions used to take
       six stacked rows and more height than the card. Now: one meta line,
       the bio only when there is one, one row of actions. */
    .pf-meta {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .5rem;
      width: 100%; max-width: 24rem; min-height: 44px;
    }
    /* The handle keeps its natural width: a short one shares the line with the
       counts, a long one takes the line and the counts drop under it, rather
       than both being cut. */
    .pf-handle { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; }
    .pf-user, .pf-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-user { font-size: .82rem; font-weight: 700; color: rgba(234,240,255,.78); }
    .pf-city { font-size: .7rem; color: rgba(234,240,255,.45); }
    .pf-city svg { display: inline-block; width: .75rem; height: .75rem; margin-right: .2rem; vertical-align: -.1rem; }
    .pf-counts { display: flex; flex: none; align-items: center; margin-left: auto; }
    .pf-count {
      display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .55rem;
      border-radius: .75rem; color: inherit; background: none; border: 0; cursor: pointer;
      transition: background .15s;
    }
    .pf-count:last-child { padding-right: 0; }
    .pf-count:hover { background: rgba(255,255,255,.04); }
    .pf-count:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 1px; }
    .pf-count b { font-size: .95rem; font-weight: 800; color: var(--so-paper); font-variant-numeric: tabular-nums; }
    .pf-count span { font-size: .72rem; color: rgba(234,240,255,.5); }
    .pf-bio {
      width: 100%; max-width: 24rem; margin-top: .1rem;
      font-size: .78rem; line-height: 1.45; color: rgba(234,240,255,.62);
      overflow-wrap: anywhere;
    }
    .pf-bio:empty, .pf-status:empty, .pf-gap:empty { display: none; }
    .pf-status { width: 100%; max-width: 28rem; margin-top: .5rem; }
    .pf-gap { width: 100%; max-width: 24rem; display: flex; justify-content: center; margin-bottom: .15rem; }
    .ovr-gap-line {
      display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem;
      border: 1px solid rgba(143,246,255,.12); border-radius: 999px; background: rgba(7,11,31,.45);
      font-size: .7rem; color: rgba(234,240,255,.7);
    }
    .pf-actions { display: flex; gap: .5rem; width: 100%; max-width: 24rem; margin-top: .45rem; }
    .pf-btn {
      display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: .35rem;
      min-height: 44px; padding: 0 .75rem; border-radius: .85rem;
      border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
      color: rgba(234,240,255,.82); font-size: .84rem; font-weight: 700;
      transition: transform .15s var(--so-ease), border-color .2s, background .2s;
    }
    .profile-header-shell.pf-actions { max-width: 24rem; }
    .pf-btn.hidden { display: none; }
    .pf-btn:hover { border-color: rgba(45,226,255,.35); }
    .pf-btn:active { transform: scale(.96); }
    .pf-btn:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .pf-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .pf-btn-main {
      flex-grow: 1.4; border-color: rgba(45,226,255,.45);
      background: linear-gradient(135deg, rgba(45,226,255,.2), rgba(176,38,255,.14));
      color: var(--so-paper);
    }

    .sport-chip,
    .region-chip {
      min-height: 2.75rem;
      padding-inline: 1rem;
      font-size: .75rem;
      border-color: rgba(143,246,255,.1);
      background: rgba(16,24,56,.72);
    }
    .sport-chip:hover,
    .region-chip:hover { border-color: rgba(143,246,255,.28); color: #c5d0ef; }

    @media (min-width: 1024px) {
      .app-screen:not([data-section="landing"]) { padding-bottom: 2rem; }
      [data-section="courts"] #nearby-courts-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        overflow: visible;
      }
      [data-section="courts"] #nearby-courts-list > button { width: auto; }
    }
    @media (min-width: 1280px) {
      [data-section="courts"] #nearby-courts-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width: 639px) {
      .app-topbar { min-height: 4rem; }
      .screen-intro {
        grid-template-columns: minmax(0,1fr);
        align-items: start;
        min-height: 0;
        padding: 1.2rem;
        border-radius: 1.25rem;
      }
      .screen-intro::before { background-position: 8rem 0; }
      .screen-intro::after { inset-inline: 1.2rem; }
      .screen-title { font-size: clamp(2.2rem, 12vw, 3.25rem); }
      .screen-copy { font-size: .9rem; }
      .screen-intro > .so-button { width: 100%; }
      .empty-state { min-height: 11.5rem; padding: 1.5rem 1rem; }
      .profile-hero { width: calc(100% - 1rem); border-radius: 1.4rem; }
      .profile-hero .flex.items-center.justify-around { padding-inline: 0; }
      .sport-chip,
      .region-chip { min-height: 2.75rem; }
    }

    /* Logged-out Game Night entrance. The playbook is a tactics board, not a
       generic marketing card: the three rows mirror the real weekly flow. */
    .landing-stage {
      position: relative;
      display: grid;
      min-height: 100dvh;
      width: min(100%, 88rem);
      margin-inline: auto;
      padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem)
        max(1.25rem, env(safe-area-inset-bottom));
      place-items: center;
      isolation: isolate;
    }
    .landing-stage::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 18%, rgba(45, 226, 255, 0.11), transparent 28rem),
        radial-gradient(circle at 86% 78%, rgba(176, 38, 255, 0.10), transparent 30rem),
        var(--so-void);
    }
    .landing-stage::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.32;
      background-image:
        linear-gradient(rgba(143, 246, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 246, 255, 0.035) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: linear-gradient(to bottom, black, transparent 88%);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
    }
    .landing-board {
      position: relative;
      display: grid;
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--so-line);
      border-radius: clamp(1.25rem, 3vw, 2rem);
      background:
        linear-gradient(145deg, rgba(16, 24, 56, 0.96), rgba(7, 11, 31, 0.98) 58%),
        var(--so-surface);
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px rgba(255, 255, 255, 0.04);
    }
    .landing-board::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(45, 226, 255, 0.06), transparent 62%);
    }
    .landing-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(1.5rem, 5vw, 4.75rem);
    }
    .landing-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      width: fit-content;
      margin-bottom: clamp(2rem, 5vw, 4.5rem);
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: 0.055em;
      text-transform: uppercase;
    }
    .landing-brand img {
      width: 2.375rem;
      height: 2.375rem;
    }
    .landing-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      width: fit-content;
      margin: 0 0 1.15rem;
      color: #b6c4ee;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .landing-eyebrow > span {
      width: 1.75rem;
      height: 2px;
      background: var(--so-volt);
      box-shadow: 0 0 12px rgba(45, 226, 255, 0.75);
    }
    .landing-title {
      max-width: 10ch;
      margin: 0;
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: clamp(3.25rem, 7vw, 6.8rem);
      font-weight: 800;
      letter-spacing: -0.045em;
      line-height: 0.84;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .landing-title span {
      display: block;
      color: transparent;
      background: linear-gradient(100deg, #8ff6ff 0%, var(--so-volt) 35%, #ffffff 53%, #c77bff 72%, var(--so-flux) 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }
    .landing-subtitle {
      max-width: 38rem;
      margin: 1.5rem 0 0;
      color: var(--so-muted);
      font-size: clamp(1rem, 1.8vw, 1.15rem);
      line-height: 1.65;
    }
    .landing-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 2rem;
    }
    .landing-action {
      min-height: 3rem;
      padding: 0.75rem 1.25rem;
      border: 1px solid transparent;
      border-radius: 0.9rem;
      font-size: 0.95rem;
      font-weight: 800;
      transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    }
    .landing-action-primary {
      min-width: 13rem;
      color: #ffffff;
      background: linear-gradient(100deg, #14748f, #4f3bc7 52%, #7f1cd1);
      box-shadow: 0 12px 32px -15px rgba(45, 226, 255, 0.9);
    }
    .landing-action-primary:hover {
      box-shadow: 0 15px 38px -14px rgba(45, 226, 255, 0.95);
      opacity: 0.94;
    }
    .landing-action-secondary {
      min-width: 7.5rem;
      color: var(--so-paper);
      border-color: rgba(234, 240, 255, 0.18);
      background: rgba(234, 240, 255, 0.055);
    }
    .landing-action-secondary:hover {
      border-color: rgba(143, 246, 255, 0.38);
      background: rgba(143, 246, 255, 0.09);
    }
    .landing-action:active { opacity: 0.78; }
    .landing-proof {
      margin: 1rem 0 0;
      color: #8997c6;
      font-size: 0.8rem;
      line-height: 1.5;
    }
    .landing-proof strong {
      color: var(--so-volt);
      font-variant-numeric: tabular-nums;
    }
    .landing-playbook {
      position: relative;
      z-index: 1;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: clamp(1.5rem, 4vw, 3.5rem);
      border-left: 1px solid var(--so-line);
      background:
        radial-gradient(circle at 50% 50%, transparent 0 4.9rem, rgba(143, 246, 255, 0.10) 5rem 5.05rem, transparent 5.15rem),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(143, 246, 255, 0.09) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(rgba(45, 226, 255, 0.035), rgba(176, 38, 255, 0.035)),
        rgba(7, 11, 31, 0.58);
    }
    .landing-playbook-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: #b6c4ee;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .landing-live {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--so-volt);
      letter-spacing: 0.08em;
    }
    .landing-live i {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 999px;
      background: var(--so-volt);
      box-shadow: 0 0 10px rgba(45, 226, 255, 0.9);
    }
    .landing-playbook h2 {
      max-width: 13ch;
      margin: 1.4rem 0 1.75rem;
      color: var(--so-paper);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
      text-transform: uppercase;
    }
    .landing-steps {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .landing-steps li {
      display: grid;
      grid-template-columns: 2.5rem minmax(0, 1fr);
      gap: 0.85rem;
      align-items: center;
      min-height: 4.75rem;
      padding-block: 0.8rem;
      border-top: 1px solid rgba(143, 246, 255, 0.12);
    }
    .landing-step-number {
      color: var(--so-volt);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 1.15rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .landing-steps strong,
    .landing-steps div > span {
      display: block;
    }
    .landing-steps strong {
      color: var(--so-paper);
      font-size: 0.95rem;
    }
    .landing-steps div > span {
      margin-top: 0.2rem;
      color: var(--so-muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }
    .landing-playbook-note {
      margin: 1.2rem 0 0;
      color: #8997c6;
      font-size: 0.75rem;
      line-height: 1.5;
    }
    .landing-secondary-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      margin-top: 1rem;
      color: #8997c6;
      font-size: 0.78rem;
    }
    .landing-secondary-actions button {
      min-height: 2.75rem;
      padding-inline: 0.35rem;
      color: #aebce5;
      text-underline-offset: 0.25rem;
    }
    .landing-secondary-actions button:hover {
      color: var(--so-volt);
      text-decoration: underline;
    }

    @media (min-width: 840px) {
      .landing-board { grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr); }
    }
    @media (max-width: 839px) {
      .landing-stage { place-items: start center; }
      .landing-board { grid-template-columns: minmax(0, 1fr); }
      .landing-brand { margin-bottom: 2.25rem; }
      .landing-playbook {
        border-top: 1px solid var(--so-line);
        border-left: 0;
      }
    }
    @media (max-width: 479px) {
      .landing-copy,
      .landing-playbook { padding: 1.35rem; }
      .landing-title { font-size: clamp(3rem, 16vw, 4.5rem); }
      .landing-subtitle { font-size: 1rem; }
      .landing-actions { display: grid; grid-template-columns: 1fr; }
      .landing-action { width: 100%; min-height: 3.25rem; }
      .landing-secondary-actions { gap: 0.25rem 0.55rem; }
    }

    #feed-map, #courts-mini-map { position: absolute; inset: 0; z-index: 0; }

    .leaflet-tooltip-sportout {
      background: rgba(11,18,48,0.94);
      border: 1px solid rgba(45,226,255,0.35);
      color: #2DE2FF;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      border-radius: 8px;
      padding: 4px 8px;
      box-shadow: 0 0 8px 1px rgba(45,226,255,0.25);
      white-space: nowrap;
    }
    .leaflet-tooltip-sportout::before { border: none; }

    #app-toast { bottom: 88px; }
    @media (min-width: 1024px) { #app-toast { bottom: 24px; } }

    /* iOS safe-area utilities */
    .safe-pt     { padding-top: max(1.5rem, env(safe-area-inset-top)); }
    .safe-pb-nav { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .safe-pb-main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    .safe-pb { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
    body:not(.is-authenticated) .safe-pb-main { padding-bottom: 0; }

    .profile-section-gutter {
      width: 100%;
      max-width: 48rem;
      margin-inline: auto;
      padding-inline: 1rem;
    }
    /* The card in the identity slot. Narrower than a section, because up here
       it is an object you hold, not a panel that spans the screen -- and on a
       wide screen an unconstrained card stretches into a banner.

       The type steps down with it. At the body's full size the card ran the
       whole viewport and pushed the account controls under the fold; these are
       the same proportions read at the size the slot actually is. */
    /* ── Home ────────────────────────────────────────────────────────
       Written as CSS, not Tailwind utilities, for the same reason the bell is:
       tailwind.css is a committed build and a class outside it renders as
       nothing. Everything here uses the holo tokens the card already uses. */
    .hm-kick {
      font-size: 10px; font-weight: 800; letter-spacing: .19em;
      text-transform: uppercase; color: #2DE2FF; margin: 0 0 7px 2px;
    }
    .hm-kick.hm-quiet { color: #8290C4; }
    .hm-card {
      background: #101838;
      border: 1px solid #22306B;
      border-radius: 18px;
      padding: 16px;
    }
    .hm-card.hm-hero {
      background:
        radial-gradient(130% 100% at 100% 0%, rgba(176,38,255,.16), transparent 62%),
        linear-gradient(160deg, rgba(45,226,255,.12), rgba(16,24,56,.92) 55%);
      border-color: rgba(45,226,255,.34);
    }
    .hm-when {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 900; font-size: 30px; line-height: 1;
      color: #EAF0FF; margin: 0;
    }
    .hm-where { margin: 6px 0 0; font-size: 12.5px; color: #8290C4; }

    .hm-pips { display: flex; align-items: center; gap: 6px; margin: 14px 0 5px; flex-wrap: wrap; }
    .hm-pip { width: 9px; height: 9px; border-radius: 999px; background: #2DE2FF;
              box-shadow: 0 0 7px -1px rgba(45,226,255,.85); flex: none; }
    .hm-pip.hm-off { background: transparent; border: 1px solid rgba(130,144,196,.45); box-shadow: none; }
    .hm-count { margin-inline-start: 5px; font-size: 11.5px; font-weight: 700; color: #EAF0FF; }
    .hm-names { margin: 0; font-size: 11.5px; color: #8290C4; }

    .hm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .hm-btn {
      border-radius: 11px; padding: 11px 0; text-align: center;
      font-size: 13px; font-weight: 800; border: 0; width: 100%;
      font-family: inherit; cursor: pointer;
    }
    .hm-btn:active { transform: scale(.97); }
    .hm-btn-in    { background: rgba(61,220,132,.15); border: 1px solid rgba(61,220,132,.5); color: #3DDC84; }
    .hm-btn-ghost { background: rgba(234,240,255,.05); border: 1px solid rgba(130,144,196,.32); color: #EAF0FF; }
    .hm-btn-solid { background: linear-gradient(96deg, #2DE2FF, #B026FF); color: #070B1F; grid-column: 1 / -1; }

    .hm-task { display: flex; align-items: center; gap: 10px; padding: 10px 0;
               border-bottom: 1px solid rgba(34,48,107,.55); }
    .hm-task:last-child { border-bottom: 0; padding-bottom: 0; }
    .hm-task:first-child { padding-top: 0; }
    .hm-task p { margin: 0; font-size: 13px; flex: 1; color: #EAF0FF; min-width: 0; }
    .hm-task-actions { display: flex; gap: 6px; flex: none; }
    .hm-go {
      font-size: 11px; font-weight: 800; color: #2DE2FF; background: transparent;
      border: 1px solid rgba(45,226,255,.4); border-radius: 8px; padding: 5px 10px;
      white-space: nowrap; font-family: inherit; cursor: pointer;
    }
    .hm-go.hm-go-mute { color: #8290C4; border-color: rgba(130,144,196,.35); }
    .hm-go:active { transform: scale(.96); }
    .hm-glyph {
      width: 24px; height: 24px; border-radius: 8px; flex: none;
      background: rgba(45,226,255,.11); border: 1px solid rgba(45,226,255,.3);
      display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #2DE2FF;
    }

    /* OVR Trend — the graph borrows the precision and crosshair of a market
       chart, while every segment still reads as a football result. */
    .ot-card {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(110% 75% at 10% 0%, rgba(45,226,255,.07), transparent 58%),
        #101838;
    }
    .ot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .ot-current {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 34px; line-height: 1; font-weight: 900; color: #EAF0FF;
      font-variant-numeric: tabular-nums;
    }
    .ot-unit { margin-inline-start: 5px; color: #8290C4; font-size: 10px; font-weight: 800;
               letter-spacing: .13em; }
    .ot-change { font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .ot-up { color: #3DDC84; }
    .ot-down { color: #F2547D; }
    .ot-flat { color: #9AA8D5; }
    .ot-ranges {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
      margin-top: 14px; padding: 3px; border: 1px solid rgba(130,144,196,.19);
      border-radius: 13px; background: rgba(7,11,31,.48);
    }
    .ot-range {
      min-height: 44px; border: 1px solid transparent; border-radius: 10px;
      background: transparent; color: #8290C4; cursor: pointer; font: 800 11px/1 Inter, sans-serif;
      letter-spacing: .07em; transition: color .18s ease, background-color .18s ease, border-color .18s ease;
      touch-action: manipulation;
    }
    .ot-range:hover { color: #EAF0FF; }
    .ot-range:active { background: rgba(45,226,255,.08); }
    .ot-range.is-active {
      color: #EAF0FF; border-color: rgba(45,226,255,.42);
      background: linear-gradient(120deg, rgba(45,226,255,.18), rgba(61,220,132,.09));
      box-shadow: inset 0 0 16px rgba(45,226,255,.05);
    }
    .ot-range:focus-visible, .ot-point:focus-visible, .ot-retry:focus-visible {
      outline: 2px solid #EAF0FF; outline-offset: 2px;
    }
    .ot-chart { position: relative; height: 184px; margin: 12px -4px 0; }
    .ot-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .ot-grid-line { stroke: rgba(154,168,213,.13); stroke-width: 1; stroke-dasharray: 2 5; }
    .ot-crosshair { stroke: rgba(234,240,255,.38); stroke-width: 1; stroke-dasharray: 3 4; }
    .ot-baseline-dot { fill: #101838; stroke: #8290C4; stroke-width: 2; }
    .ot-axis {
      position: absolute; right: 4px; z-index: 1; color: rgba(154,168,213,.62);
      font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
      pointer-events: none;
    }
    .ot-axis-high { top: 4px; }
    .ot-axis-low { bottom: 3px; }
    .ot-point {
      position: absolute; left: var(--ot-x); top: var(--ot-y); z-index: 2;
      width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
      transform: translate(-50%, -50%); cursor: pointer; touch-action: manipulation;
      display: grid; place-items: center;
    }
    .ot-point > span {
      width: 24px; height: 24px; display: grid; place-items: center;
      color: #070B1F; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 12px; font-weight: 900; line-height: 1;
      transition: transform .18s var(--so-ease), box-shadow .18s ease;
    }
    .ot-point:hover > span, .ot-point.is-selected > span { transform: scale(1.16); }
    .ot-point.ot-win > span {
      border-radius: 50%; background: linear-gradient(135deg, #2DE2FF, #3DDC84);
      box-shadow: 0 0 13px rgba(45,226,255,.36);
    }
    .ot-point.ot-draw > span {
      border-radius: 5px; color: #EAF0FF; background: #6474A9;
      border: 1px solid #9AA8D5;
    }
    .ot-point.ot-loss > span {
      color: #070B1F; background: #F2547D;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      box-shadow: 0 0 13px rgba(242,84,125,.3);
    }
    .ot-dates { display: flex; justify-content: space-between; margin-top: -7px; padding: 0 7px;
                color: #8290C4; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
    .ot-tooltip {
      display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 9px;
      min-height: 64px; margin-top: 12px; padding: 10px 12px; border-radius: 12px;
      background: rgba(7,11,31,.72); border: 1px solid rgba(130,144,196,.22);
      color: #EAF0FF; font-size: 11px;
    }
    .ot-tooltip strong { grid-column: 2; font-size: 14px; font-variant-numeric: tabular-nums; }
    .ot-tooltip > .ot-up, .ot-tooltip > .ot-down, .ot-tooltip > .ot-flat {
      grid-column: 3; grid-row: 2; font-weight: 850; font-variant-numeric: tabular-nums;
    }
    .ot-tooltip-result { grid-row: 1 / span 2; min-width: 34px; font-weight: 900; letter-spacing: .08em; }
    .ot-tooltip-result.ot-win { color: #3DDC84; }
    .ot-tooltip-result.ot-draw { color: #9AA8D5; }
    .ot-tooltip-result.ot-loss { color: #F2547D; }
    .ot-tooltip-date { color: #9AA8D5; font-size: 10px; font-weight: 750; }
    .ot-tooltip-line { grid-column: 2 / -1; color: #9AA8D5; }
    .ot-hint { min-height: 28px; margin: 12px 0 0; text-align: center; color: #8290C4;
               font-size: 10.5px; line-height: 28px; }
    .ot-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
               padding-top: 10px; border-top: 1px solid rgba(130,144,196,.14);
               color: #8290C4; font-size: 9.5px; font-weight: 650; }
    .ot-empty { display: grid; place-items: center; min-height: 150px; padding: 24px 12px 12px; text-align: center; }
    .ot-empty-mark { width: 48px; height: 20px; border-bottom: 2px solid #8290C4; position: relative; }
    .ot-empty-mark::after { content: ""; position: absolute; right: 0; bottom: -5px; width: 9px; height: 9px;
                            border-radius: 50%; background: #8290C4; }
    .ot-empty-title { margin: 13px 0 0; color: #EAF0FF; font-size: 14px; font-weight: 800; }
    .ot-empty-copy { max-width: 290px; margin: 4px 0 0; color: #8290C4; font-size: 11px; line-height: 1.5; }
    .ot-error { text-align: center; padding-block: 24px; }
    .ot-retry { min-width: 112px; min-height: 44px; margin-top: 14px; border-radius: 11px;
                border: 1px solid rgba(45,226,255,.4); background: rgba(45,226,255,.08);
                color: #2DE2FF; font: 800 12px/1 Inter, sans-serif; cursor: pointer; }
    .ot-loading { min-height: 286px; display: flex; flex-direction: column; gap: 16px; }
    .ot-skeleton { display: block; border-radius: 9px; background: linear-gradient(90deg,
                   rgba(130,144,196,.08), rgba(130,144,196,.17), rgba(130,144,196,.08));
                   background-size: 220% 100%; animation: ot-shimmer 1.5s ease-in-out infinite; }
    .ot-skeleton-head { width: 42%; height: 30px; }
    .ot-skeleton-tabs { height: 50px; }
    .ot-skeleton-chart { flex: 1; }
    @keyframes ot-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
    .ot-sr-only {
      position: absolute !important; width: 1px !important; height: 1px !important;
      padding: 0 !important; margin: -1px !important; overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
    }
    @media (max-width: 374px) {
      .ot-chart { height: 168px; }
      .ot-tooltip { grid-template-columns: auto 1fr; }
      .ot-tooltip > .ot-up, .ot-tooltip > .ot-down, .ot-tooltip > .ot-flat {
        grid-column: 2; grid-row: 3;
      }
      .ot-foot { flex-direction: column; gap: 3px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ot-skeleton { animation: none; }
      .ot-point > span, .ot-range { transition: none; }
    }

    /* The circle: where a player stands among the people they follow. */
    .hm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
              border-bottom: 1px solid rgba(34,48,107,.55); width: 100%;
              background: none; border-left: 0; border-right: 0; border-top: 0;
              font-family: inherit; cursor: pointer; text-align: start; }
    .hm-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .hm-row.hm-me { background: rgba(45,226,255,.07); margin-inline: -8px;
                    padding-inline: 8px; border-radius: 9px; border-bottom-color: transparent; }
    .hm-rank { font-family: "Saira Condensed", Oswald, Impact, sans-serif;
               font-weight: 900; font-size: 13px; color: #8290C4; width: 16px; flex: none; }
    .hm-who { flex: 1; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
              font-weight: 700; font-size: 15px; letter-spacing: .03em; color: #EAF0FF;
              text-transform: uppercase; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
    .hm-sc { font-family: "Saira Condensed", Oswald, Impact, sans-serif;
             font-weight: 900; font-size: 17px; color: #EAF0FF;
             font-variant-numeric: tabular-nums; flex: none; }
    .hm-row.hm-me .hm-sc { color: #2DE2FF; }
    /* Provisional: the number is real, it just is not settled yet. Dimmed
       rather than hidden, because a rank with no number ranks nobody. */
    .hm-sc.hm-prov { color: #8290C4; }
    .hm-row.hm-me .hm-sc.hm-prov { color: rgba(45,226,255,.55); }
    .hm-lock { font-size: 12px; color: #8290C4; flex: none; }
    /* Online now: a friend currently in a live match. */
    .hm-online-dot {
      display: inline-block; width: 8px; height: 8px; flex: none;
      border-radius: 999px; background: #22C55E;
      box-shadow: 0 0 6px 1px rgba(34,197,94,.65);
    }

    /* The rep ladder, as one line -- tap it to open the full Rep Ladder screen. */
    .hm-rep {
      display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; width: 100%;
      background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left;
    }
    .hm-rep:active { transform: scale(0.99); }
    .hm-repbar { flex: 1; height: 4px; border-radius: 999px; background: rgba(34,48,107,.9); overflow: hidden; }
    .hm-repfill { display: block; height: 100%; background: linear-gradient(90deg, #2DE2FF, #B026FF); }
    .hm-reptxt { font-size: 10.5px; font-weight: 700; color: #8290C4; white-space: nowrap;
                 letter-spacing: .06em; text-transform: uppercase; }

    .hm-empty { margin: 0; font-size: 13px; color: rgba(234,240,255,.4); text-align: center; padding: 6px 0; }
    .hm-link { background: none; border: 0; font-family: inherit; cursor: pointer;
               font-size: 11.5px; font-weight: 800; color: #2DE2FF; padding: 0; }

    /* ── Players of the Week ─────────────────────────────────────────
       The podium ring is a different thing from the rep aura: rep says how
       much you have PLAYED and stays for good, the podium says how you did
       LAST WEEK and changes every Monday. So it is a plain metal ring around
       the face -- gold, silver, bronze -- never the tier icon, never animated. */
    .pod-1 { --pod: #FFC93C; --pod-hi: #FFF0B8; --pod-lo: #C98A10; }
    .pod-2 { --pod: #C9D3E6; --pod-hi: #F2F6FF; --pod-lo: #7C889F; }
    .pod-3 { --pod: #E28B4B; --pod-hi: #F8C39A; --pod-lo: #9A5423; }

    .au.pod-1 .au-in, .au.pod-2 .au-in, .au.pod-3 .au-in,
    .au.au-still.pod-1 .au-in, .au.au-still.pod-2 .au-in, .au.au-still.pod-3 .au-in {
      border-color: var(--pod-hi);
      box-shadow: 0 0 0 2px var(--pod), 0 0 14px 1px color-mix(in srgb, var(--pod) 70%, transparent);
      animation: none;
    }

    .pod-chip {
      margin: 4px 0 0; font-size: 9px; font-weight: 800; letter-spacing: .14em;
      text-transform: uppercase; color: var(--pod);
    }
    .hc-wrap.pod-1 .hc, .hc-wrap.pod-2 .hc, .hc-wrap.pod-3 .hc {
      box-shadow: 0 0 0 1px var(--pod), 0 0 26px -6px var(--pod);
    }

    .hm-pod {
      border-radius: 18px; padding: 14px 14px 6px;
      background: linear-gradient(160deg, rgba(255,201,60,.13), rgba(16,24,56,.92) 60%);
      border: 1px solid rgba(255,201,60,.33);
    }
    .hm-pod-when { font-size: 10.5px; font-weight: 700; color: #8290C4;
                   letter-spacing: .06em; text-transform: uppercase; }
    .hm-pod-row {
      display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
      cursor: pointer; font-family: inherit; background: none; border: 0;
      padding: 8px 0; border-top: 1px solid rgba(130,144,196,.14);
    }
    .hm-pod-row:active { transform: scale(.99); }
    .hm-pod-medal {
      width: 22px; height: 22px; border-radius: 999px; flex: none; display: grid; place-items: center;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 13px;
      color: #0A1024; background: linear-gradient(160deg, var(--pod-hi), var(--pod) 55%, var(--pod-lo));
    }
    .hm-pod-1 .au-av { width: 46px; height: 46px; font-size: 16px; }
    .hm-pod-name { display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
                    font-weight: 800; font-size: 16px; color: #EAF0FF; }
    .hm-pod-1 .hm-pod-name { font-size: 19px; }
    .hm-pod-sub { display: block; margin-top: 2px; font-size: 11.5px; color: #8290C4; }

    /* Rivalry spotlight: the same red '.bo-rank' streak treatment as the
       Profile rivalry row, on the '.hm-card' shell everything else on Home uses. */
    .hm-card.hm-rival {
      display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
      border-color: rgba(242,84,125,.35);
      background: radial-gradient(120% 100% at 100% 0%, rgba(242,84,125,.12), transparent 60%), #101838;
    }
    .hm-card.hm-rival:active { transform: scale(.99); }

    /* ── The bell ────────────────────────────────────────────────────
       Written here rather than as Tailwind utilities because tailwind.css is a
       committed build: bg-flux, text-volt, last:border-b-0 and the [18px] steps
       are not in it, and a class that is not in the build renders as nothing
       at all. Rebuilding the stylesheet to add them would also strip the
       -webkit- prefixes the committed build carries. */
    .notif-bell svg { color: #2DE2FF; }
    /* Red, and nothing else in the header is: the brand's own purple read as
       decoration. The bell rings once and the number pops once when a new
       notification arrives, then both stay still. Never `infinite`. */
    .notif-count {
      position: absolute; top: -6px; right: -6px;
      min-width: 20px; height: 20px; padding: 0 5px;
      border-radius: 999px;
      background: #FF3B30;
      border: 2px solid #070B1F;
      color: #fff;
      font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .notif-bell svg { transform-origin: 50% 12%; }
    .notif-bell.is-ringing svg { animation: notif-ring .7s ease-in-out 1; }
    .notif-bell.is-ringing .notif-count { animation: notif-pop .45s ease-out 1; }
    @keyframes notif-ring {
      0%, 100% { transform: rotate(0); }
      15% { transform: rotate(-16deg); }
      35% { transform: rotate(13deg); }
      55% { transform: rotate(-8deg); }
      75% { transform: rotate(4deg); }
    }
    @keyframes notif-pop {
      0% { transform: scale(0); }
      60% { transform: scale(1.35); }
      100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .notif-bell.is-ringing svg,
      .notif-bell.is-ringing .notif-count { animation: none; }
    }
    .notif-row {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 8px;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .notif-row:last-child { border-bottom: 0; }
    .notif-mark {
      margin-top: 2px; flex: none;
      width: 28px; height: 28px;
      border-radius: 9px;
      display: grid; place-items: center;
      font-size: 13px; font-weight: 700;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(234,240,255,.35);
    }
    .notif-row.is-unread .notif-mark {
      background: rgba(45,226,255,.12);
      border-color: rgba(45,226,255,.35);
      color: #2DE2FF;
    }
    .notif-body { font-size: 14px; line-height: 1.4; color: rgba(234,240,255,.45); }
    .notif-row.is-unread .notif-body { color: rgba(234,240,255,.88); }
    .notif-when { font-size: 11px; color: rgba(234,240,255,.3); margin-top: 2px; }
    .notif-row.is-tappable {
      width: 100%; text-align: left; font: inherit; color: inherit;
      background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05);
      border-radius: 10px; cursor: pointer;
      transition: background .15s;
    }
    .notif-row.is-tappable:last-child { border-bottom: 0; }
    .notif-row.is-tappable:hover { background: rgba(255,255,255,.04); }
    .notif-row.is-tappable:active { background: rgba(255,255,255,.07); }
    /* A recap taller than the phone used to lose its TOP, the Overall itself,
       with no way to reach it: the card was pinned to the bottom of a window
       that could not scroll. Now the window scrolls and opens on the Overall.
       A short recap still sits at the bottom (centred from 640px), because an
       auto margin only takes the space that is left over. */
    #session-reveal-overlay {
      align-items: flex-start;
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    #session-reveal-card { margin-top: auto; }
    @media (min-width: 640px) { #session-reveal-card { margin-bottom: auto; } }

    /* ── The recap's follow row ──────────────────────────────────────
       Plain CSS, like the bell: tailwind.css is a committed build and a class
       that is not in it renders as nothing. */
    .rf-box {
      margin-top: 16px; padding: 16px 14px 14px;
      border-radius: 24px; text-align: left;
      border: 1px solid rgba(45,226,255,.3); background: rgba(45,226,255,.05);
    }
    .rf-kick {
      font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
      color: rgba(45,226,255,.8);
    }
    .rf-sub { margin-top: 4px; font-size: 12px; color: rgba(234,240,255,.5); }
    .rf-row {
      display: flex; gap: 10px; margin-top: 12px; padding-bottom: 4px;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .rf-row::-webkit-scrollbar { display: none; }
    .rf-person { flex: none; width: 78px; text-align: center; }
    .rf-av {
      display: grid; place-items: center; overflow: hidden;
      width: 50px; height: 50px; margin: 0 auto 6px; border-radius: 50%;
      background: #101736; border: 1px solid rgba(45,226,255,.45);
      color: #2DE2FF; font-size: 17px; font-weight: 800;
    }
    .rf-av img { width: 100%; height: 100%; object-fit: cover; }
    .rf-name {
      font-size: 12px; font-weight: 600; color: #EAF0FF;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rf-btn {
      width: 100%; margin-top: 6px; padding: 6px 0; border-radius: 999px;
      border: 1px solid #2DE2FF; background: rgba(45,226,255,.12);
      color: #2DE2FF; font-size: 12px; font-weight: 800; cursor: pointer;
    }
    .rf-btn:disabled { cursor: default; opacity: .6; }
    .rf-btn.is-done, .rf-all.is-done {
      opacity: 1; background: none;
      border: 1px solid rgba(255,255,255,.16); color: rgba(234,240,255,.55);
    }
    .rf-all {
      width: 100%; margin-top: 12px; padding: 11px 0; border-radius: 14px; border: 0;
      background: #2DE2FF; color: #04202a; font-size: 14px; font-weight: 800; cursor: pointer;
    }
    .rf-all:disabled { cursor: default; }
    .rf-all:disabled:not(.is-done) { opacity: .6; }

    /* A row with something to press: the line and the pill are two buttons. */
    .notif-row.has-action { align-items: center; }
    .notif-main {
      display: flex; align-items: flex-start; gap: 12px;
      flex: 1; min-width: 0;
      text-align: left; font: inherit; color: inherit;
      background: none; border: 0; padding: 0;
    }
    button.notif-main { cursor: pointer; }
    .notif-act {
      flex: none; padding: 7px 13px; border-radius: 999px;
      border: 1px solid #2DE2FF; background: rgba(45,226,255,.12);
      color: #2DE2FF; font-size: 12px; font-weight: 800; line-height: 1.2;
      cursor: pointer;
    }
    .notif-act:disabled { cursor: default; opacity: .6; }
    .notif-act.is-done {
      opacity: 1; background: none;
      border-color: rgba(255,255,255,.16); color: rgba(234,240,255,.55);
    }
    /* The same red as the bell's number, and nothing else on the dock is red. */
    [data-tab] .nav-icon-wrap { position: relative; }
    [data-tab].has-dot .nav-icon-wrap::after {
      content: ''; position: absolute; top: 3px; right: 3px;
      width: 11px; height: 11px; border-radius: 50%;
      background: #FF3B30; border: 2px solid #070B1F;
    }
    .notif-go { flex: none; align-self: center; font-size: 22px; line-height: 1; color: rgba(234,240,255,.3); }

    .profile-card-mount {
      width: 100%;
      max-width: 24rem;
      margin-inline: auto;
    }
    /* A slot that rendered nothing must not reserve space. Follow requests,
       the trend and the rivalries are each absent on a new profile, and their
       margins were stacking into a hole under the account strip. */
    #my-follow-requests:empty,
    #my-trend-panel:empty,
    #my-rivalries-panel:empty,
    #my-stats-panel:empty { display: none; }
    .profile-header-shell {
      width: 100%;
      max-width: 48rem;
      margin-inline: auto;
    }
    .profile-avatar,
    .profile-ovr-badge {
      width: clamp(80px, 5rem, 112px);
      height: clamp(80px, 5rem, 112px);
    }
    .profile-card-head { flex-wrap: wrap; }
    .profile-touch-target {
      min-width: 44px;
      min-height: 44px;
      touch-action: manipulation;
    }
    .profile-touch-target:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
    .profile-card-carousel {
      scroll-padding-inline: 0.5rem;
      scroll-snap-type: x proximity;
      padding-right: 0.5rem;
      overscroll-behavior-inline: contain;
    }
    .profile-card-carousel > * { scroll-snap-align: start; }
    .profile-skeleton {
      background: linear-gradient(100deg, rgba(255,255,255,.04) 20%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.04) 60%);
      background-size: 200% 100%;
      animation: profile-skeleton-shift 1.2s ease-in-out infinite;
    }
    @keyframes profile-skeleton-shift {
      from { background-position: 100% 0; }
      to { background-position: -100% 0; }
    }
    body.profile-overlay-open,
    body.app-dialog-open { overflow: hidden; }
    [aria-modal="true"][class*="overflow-y-auto"] {
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
    }
    #avatar-lightbox {
      padding-top: max(16px, env(safe-area-inset-top));
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      overscroll-behavior: contain;
    }
    #avatar-lightbox img { min-height: 0; touch-action: auto; }

    /* Player detail slide-in overlay */
    #player-detail-overlay {
      height: 100dvh;
      overscroll-behavior: contain;
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      will-change: transform;
    }
    #player-detail-overlay.pd-open {
      transform: translateX(0);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Memory sheet slide-in overlay — sits above the player detail */
    #memory-sheet-overlay {
      height: 100dvh;
      overscroll-behavior: contain;
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
    }
    #memory-sheet-overlay.ms-open {
      transform: none;
    }

    /* One night's temporary team card — above the recap, below player detail. */
    #memory-team-overlay {
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      will-change: transform;
    }
    #memory-team-overlay.mt-open {
      transform: translateX(0);
    }

    /* Court detail slide-in overlay */
    #court-detail-overlay {
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      will-change: transform;
    }
    #court-detail-overlay.cd-open {
      transform: translateX(0);
    }

    /* Match detail slide-in overlay */
    #match-detail-overlay {
      overscroll-behavior: contain;
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      color: #EAF0FF;
      background:
        radial-gradient(80% 42% at 50% 0%, rgba(45,226,255,.08), transparent 68%),
        #070B1F;
    }
    #match-detail-overlay.md-open {
      transform: none;
    }

    /* Match details — a fixture card followed by a visible command chain.
       The gold manager node and coloured captain armbands encode real roles;
       the rest stays quiet so the hierarchy reads before the player grid. */
    .md-topbar {
      display: flex; align-items: center; gap: 12px; padding-inline: 16px;
      padding-bottom: 12px; background: rgba(7,11,31,.9);
      border-bottom: 1px solid rgba(130,144,196,.12); backdrop-filter: blur(18px);
    }
    .md-back {
      width: 38px; height: 38px; flex: none; display: grid; place-items: center;
      border-radius: 50%; color: rgba(234,240,255,.72); background: #101838;
      border: 1px solid rgba(130,144,196,.22); transition: border-color .15s, transform .1s;
    }
    .md-back svg { width: 17px; height: 17px; }
    .md-back:hover { border-color: rgba(45,226,255,.55); }
    .md-back:active { transform: scale(.95); }
    .md-top-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .md-top-kick {
      font-size: 9px; line-height: 1.1; font-weight: 800; letter-spacing: .2em;
      text-transform: uppercase; color: #6473A7;
    }
    #md-sport { margin-top: 2px; font-size: 16px; line-height: 1.1; font-weight: 800; }
    .md-status {
      flex: none; padding: 6px 10px; border-radius: 999px; font-size: 10px;
      font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
      color: #3DDC84; background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.32);
    }
    .md-status[data-state="live"] { color: #FFC93C; background: rgba(255,201,60,.1); border-color: rgba(255,201,60,.35); }
    .md-status[data-state="complete"] { color: #8290C4; background: rgba(130,144,196,.1); border-color: rgba(130,144,196,.28); }

    .md-shell { width: 100%; max-width: 620px; margin: 0 auto; padding: 12px 16px max(28px, env(safe-area-inset-bottom)); }
    .md-hero {
      position: relative; overflow: hidden; padding: 15px 16px 0; border-radius: 20px;
      background:
        linear-gradient(145deg, rgba(45,226,255,.14), rgba(16,24,56,.96) 52%, rgba(176,38,255,.1)),
        #101838;
      border: 1px solid rgba(45,226,255,.34); box-shadow: 0 18px 46px -34px rgba(45,226,255,.8);
    }
    .md-hero::after {
      content: ""; position: absolute; width: 148px; height: 148px; right: -76px; top: -58px;
      border: 1px solid rgba(45,226,255,.13); border-radius: 50%; box-shadow: 0 0 0 20px rgba(45,226,255,.025);
      pointer-events: none;
    }
    .md-hero-kick, .md-section-kick {
      margin: 0; color: #2DE2FF; font-size: 9px; line-height: 1.2; font-weight: 800;
      letter-spacing: .21em; text-transform: uppercase;
    }
    .md-time {
      position: relative; z-index: 1; margin: 4px 0 9px; color: #EAF0FF;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: clamp(26px, 7vw, 34px);
      line-height: .98; font-weight: 900; letter-spacing: .015em; text-transform: uppercase;
    }
    .md-venue {
      position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%;
      padding: 0 0 13px; color: rgba(234,240,255,.72); text-align: left; font-size: 12.5px;
      font-weight: 650; transition: color .15s;
    }
    .md-venue:hover { color: #2DE2FF; }
    .md-venue-copy { display: flex; flex-direction: column; min-width: 0; }
    #md-court-name { overflow: hidden; color: #EAF0FF; font-size: 13.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
    .md-venue-address { overflow: hidden; color: #8290C4; font-size: 11px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
    .md-venue-address:empty { display: none; }
    .md-pin {
      width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 8px;
      color: #2DE2FF; background: rgba(45,226,255,.1); border: 1px solid rgba(45,226,255,.22);
    }
    .md-pin svg { width: 14px; height: 14px; }
    .md-venue-arrow { width: 15px; height: 15px; margin-left: auto; flex: none; color: rgba(234,240,255,.28); }
    .md-facts {
      position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 0 -16px; border-top: 1px solid rgba(130,144,196,.15); background: rgba(7,11,31,.28);
    }
    .md-fact { min-width: 0; padding: 9px 6px 10px; text-align: center; border-right: 1px solid rgba(130,144,196,.12); }
    .md-fact:last-child { border-right: 0; }
    .md-fact span { display: block; color: #6473A7; font-size: 8.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .md-fact strong { display: block; overflow: hidden; margin-top: 3px; color: #EAF0FF; font-size: 12px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
    .md-fact-live strong { color: #2DE2FF; }

    .md-section { margin-top: 18px; }
    .md-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
    .md-section-head h2 {
      margin: 3px 0 0; color: #EAF0FF; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    }
    .md-armband {
      width: 28px; height: 28px; display: grid; place-items: center; transform: rotate(-8deg);
      border-radius: 8px; color: #070B1F; background: #FFC93C; font-size: 13px; font-weight: 950;
      box-shadow: 0 0 18px -5px rgba(255,201,60,.85);
    }
    .md-leadership {
      position: relative; padding: 10px; border-radius: 18px; background: rgba(16,24,56,.72);
      border: 1px solid rgba(130,144,196,.2);
    }
    .md-manager {
      position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0;
      padding: 8px 10px; border-radius: 14px; text-align: left; color: inherit;
      background: linear-gradient(90deg, rgba(255,201,60,.11), rgba(255,201,60,.025));
      border: 1px solid rgba(255,201,60,.3); transition: transform .1s, border-color .15s;
    }
    .md-manager:hover { border-color: rgba(255,201,60,.55); }
    .md-manager:active, .md-captain-card:active { transform: scale(.985); }
    .md-leader-avatar {
      position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center;
      overflow: hidden; border-radius: 50%; color: #2DE2FF; background: #17224A;
      border: 2px solid rgba(234,240,255,.16); font-size: 16px; font-weight: 900;
    }
    .md-manager .md-leader-avatar { width: 38px; height: 38px; font-size: 14px; color: #FFC93C; border-color: rgba(255,201,60,.48); }
    .md-leader-copy { flex: 1; min-width: 0; }
    .md-leader-role { display: block; color: #FFC93C; font-size: 8.5px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
    .md-leader-name { display: block; overflow: hidden; margin-top: 2px; color: #EAF0FF; font-size: 13px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
    .md-leader-note { display: block; margin-top: 2px; color: #6473A7; font-size: 10px; }
    .md-manager-mark { flex: none; color: rgba(255,201,60,.72); font-size: 18px; }
    .md-command-line { width: 1px; height: 12px; margin: 0 auto; background: linear-gradient(#FFC93C, rgba(130,144,196,.24)); }
    .md-captain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .md-captain-card {
      --md-team: #2DE2FF; --md-team-bd: #2DE2FF70; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
      min-height: 54px; padding: 7px 8px 7px 11px; overflow: hidden; border-radius: 13px;
      text-align: left; color: inherit; background: rgba(7,11,31,.4); border: 1px solid rgba(130,144,196,.18);
      transition: transform .1s, border-color .15s;
    }
    .md-captain-card::before { content: ""; position: absolute; inset: 9px auto 9px 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--md-team); box-shadow: 0 0 10px var(--md-team); }
    .md-captain-card:hover { border-color: var(--md-team-bd); }
    .md-captain-card .md-leader-avatar { width: 32px; height: 32px; font-size: 13px; border-color: var(--md-team-bd); }
    .md-captain-card .md-leader-role { color: var(--md-team); font-size: 7.5px; letter-spacing: .11em; }
    .md-captain-card .md-leader-name { font-size: 11px; }
    .md-captain-card.is-empty { border-style: dashed; opacity: .72; }
    .md-captain-card.is-empty .md-leader-avatar { border-style: dashed; color: #6473A7; }
    .md-captain-card.is-empty .md-leader-name { color: #8290C4; font-weight: 650; }
    /* The organizer's own view: every team card takes a dropped player or a tap. */
    .md-captain-card.is-editable { cursor: pointer; opacity: 1; }
    .md-captain-card.is-editable.is-empty { border-color: var(--md-team-bd); background: rgba(7,11,31,.55); }
    .md-captain-card.is-editable.is-empty .md-leader-name { color: #C3CCEB; }
    .md-cap-edit { flex: none; color: rgba(234,240,255,.4); font-size: 13px; }
    .md-cap-hint { margin: 8px 2px 0; color: #6473A7; font-size: 10.5px; line-height: 1.45; }
    .md-dragging [data-cap-slot] { transition: background .12s, outline-color .12s; }
    .md-ghost { border-radius: 50%; overflow: hidden; }
    .md-cap-chip {
      flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px;
      color: #070B1F; background: #FFC93C; font-size: 10px; font-weight: 950; transform: rotate(-8deg);
    }
    .md-edit-btn {
      flex: none; padding: 7px 11px; border-radius: 999px; color: #EAF0FF; font-size: 11px; font-weight: 800;
      background: rgba(45,226,255,.08); border: 1px solid rgba(45,226,255,.35); transition: transform .1s;
    }
    .md-edit-btn:active { transform: scale(.96); }
    .md-pick-row {
      display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px;
      text-align: left; color: inherit; background: rgba(16,24,56,.72); border: 1px solid rgba(130,144,196,.18);
    }
    .md-pick-row.is-on { border-color: #FFC93C; background: rgba(255,201,60,.08); }
    .md-pick-row .md-leader-avatar { width: 34px; height: 34px; font-size: 13px; }
    .md-pick-name { flex: 1; min-width: 0; overflow: hidden; color: #EAF0FF; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    .md-pick-note { flex: none; color: #6473A7; font-size: 10.5px; }
    .md-player-count { color: #8290C4; font-size: 10.5px; font-weight: 800; }
    .md-roster { display: block; }
    /* The details page holds the shared chat panel (.ch); no frame of its own. */
    .md-chat { display: block; }
    .md-chat .ch { margin-top: 0; }
    .md-action-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(130,144,196,.14); }
    .md-action-zone[hidden], .md-command[hidden], .md-actions[hidden] { display: none; }

    /* The command block: under the ticket, the one place to act on a session.
       The manager sees it edged in the gold that marks the manager everywhere
       on this page; a player sees it in the page's own blue-grey. */
    .md-command {
      margin-top: 12px; padding: 10px; border-radius: 18px;
      background: rgba(16,24,56,.72); border: 1px solid rgba(130,144,196,.2);
    }
    .md-command.is-manager {
      background: linear-gradient(160deg, rgba(255,201,60,.09), rgba(16,24,56,.78) 46%);
      border-color: rgba(255,201,60,.32);
    }
    .md-command-kick {
      margin: 0 2px 8px; color: #8290C4; font-size: 9px; line-height: 1.2; font-weight: 850;
      letter-spacing: .18em; text-transform: uppercase;
    }
    .md-command-kick:empty { display: none; }
    .md-command.is-manager .md-command-kick { color: #FFC93C; }
    .md-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .md-actions > :only-child, .md-actions > .md-verify-status { grid-column: 1 / -1; }
    .md-actions + .md-tools { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(130,144,196,.14); }
    .md-actions[hidden] + .md-tools { margin-top: 0; padding-top: 0; border-top: 0; }
    .md-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
    .md-tool {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      min-height: 52px; padding: 7px 4px; border-radius: 13px; color: #C3CCEB;
      background: rgba(7,11,31,.45); border: 1px solid rgba(130,144,196,.18);
      font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
      transition: transform .1s, border-color .15s, color .15s;
    }
    .md-tool svg { width: 18px; height: 18px; color: #2DE2FF; }
    .md-tool:hover { border-color: rgba(45,226,255,.45); color: #EAF0FF; }
    .md-tool:active { transform: scale(.95); }
    .md-tool:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    .md-tool.is-warn svg { color: #FFC93C; }
    .md-tool.is-danger { color: #fca5a5; border-color: rgba(239,68,68,.28); }
    .md-tool.is-danger svg { color: #f87171; }
    .md-tool.is-danger:hover { border-color: rgba(239,68,68,.55); }

    /* The squad before teams exist: a tight grid of faces, five to a row. */
    .md-squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 6px; }
    .md-sq { position: relative; min-width: 0; }
    .md-sq-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; transition: transform .1s; }
    .md-sq-btn:active { transform: scale(.95); }
    .md-sq-av {
      position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
      border-radius: 50%; color: #2DE2FF; background: #17224A; border: 2px solid rgba(234,240,255,.14);
      font-size: 15px; font-weight: 900;
    }
    .md-sq-av.is-manager { border-color: rgba(255,201,60,.7); color: #FFC93C; }
    .md-sq-name { max-width: 100%; overflow: hidden; color: rgba(234,240,255,.75); font-size: 10.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    .md-sq-team { max-width: 100%; overflow: hidden; margin-top: -3px; color: #6473A7; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
    .md-sq-x {
      position: absolute; top: -4px; right: calc(50% - 30px); width: 22px; height: 22px;
      display: grid; place-items: center; border-radius: 50%; color: #f87171; font-size: 10px; font-weight: 900;
      background: #2a1426; border: 1px solid rgba(239,68,68,.5);
    }

    /* Edit session: a bottom sheet with the create form's own fields, set to
       what the session is now, and one Save in reach of the thumb. */
    #md-edit-sheet { z-index: 260; }
    #md-edit-sheet.hidden { display: none; }
    .me-panel {
      width: 100%; max-width: 30rem; max-height: 92vh; display: flex; flex-direction: column;
      background: #070B1F; border: 1px solid rgba(130,144,196,.22); border-bottom: 0;
      border-radius: 24px 24px 0 0; box-shadow: 0 -24px 60px -30px rgba(45,226,255,.45);
    }
    @media (min-width: 640px) { .me-panel { border-radius: 24px; border-bottom: 1px solid rgba(130,144,196,.22); } }
    .me-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; border-bottom: 1px solid rgba(130,144,196,.12); }
    .me-kick { margin: 0; color: #FFC93C; font-size: 9px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
    .me-title { margin: 2px 0 0; color: #EAF0FF; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 22px; line-height: 1; font-weight: 800; text-transform: uppercase; }
    .me-x { width: 34px; height: 34px; flex: none; border-radius: 50%; color: rgba(234,240,255,.7); background: #101838; border: 1px solid rgba(130,144,196,.22); font-size: 20px; line-height: 1; }
    .me-body { flex: 1; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
    .me-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
    .me-label { color: #8290C4; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .me-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
    .me-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .me-seg { display: flex; gap: 6px; }
    .me-seg.me-wrap { flex-wrap: wrap; }
    .me-chip {
      min-height: 38px; padding: 0 12px; border-radius: 11px; color: #AAB5DA; background: #101838;
      border: 1px solid rgba(130,144,196,.22); font-size: 12px; font-weight: 750; white-space: nowrap;
      transition: border-color .15s, color .15s, background .15s;
    }
    .me-chip.is-on { color: #070B1F; background: #2DE2FF; border-color: #2DE2FF; }
    .me-chip:disabled { opacity: .35; }
    .me-chip:focus-visible, .me-stepper button:focus-visible, .me-save:focus-visible, .me-cancel:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    .me-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: #101838; border: 1px solid rgba(130,144,196,.22); align-self: flex-start; }
    .me-stepper button { width: 34px; height: 32px; border-radius: 9px; color: #2DE2FF; background: rgba(45,226,255,.08); font-size: 17px; font-weight: 800; }
    .me-stepper span { min-width: 70px; text-align: center; color: #AAB5DA; font-size: 12px; font-weight: 700; }
    .me-stepper b { color: #EAF0FF; font-size: 15px; }
    .me-note { margin: 0; color: #6473A7; font-size: 11px; line-height: 1.4; }
    .me-court { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #101838; border: 1px solid rgba(130,144,196,.22); }
    .me-court-pin { color: #2DE2FF; font-size: 10px; }
    .me-court-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .me-court-copy b { overflow: hidden; color: #EAF0FF; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
    .me-court-copy small { overflow: hidden; color: #6473A7; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
    .me-court-clear { flex: none; padding: 6px 9px; border-radius: 9px; color: #AAB5DA; background: rgba(7,11,31,.5); border: 1px solid rgba(130,144,196,.22); font-size: 11px; font-weight: 750; }
    .me-court-list { display: flex; flex-direction: column; gap: 4px; max-height: 15rem; overflow-y: auto; }
    .me-court-list[hidden] { display: none; }
    .me-nights { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1px dashed rgba(130,144,196,.2); }
    .me-nights[hidden] { display: none; }
    .me-sub { margin: 0; color: #EAF0FF; font-size: 12px; font-weight: 800; }
    .me-foot { display: flex; gap: 8px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(130,144,196,.14); }
    .me-cancel { flex: 1; min-height: 46px; border-radius: 14px; color: #AAB5DA; background: #101838; border: 1px solid rgba(130,144,196,.22); font-size: 13px; font-weight: 800; }
    .me-save { flex: 2; min-height: 46px; border-radius: 14px; color: #070B1F; background: #2DE2FF; font-size: 13px; font-weight: 900; box-shadow: 0 10px 26px -14px rgba(45,226,255,.9); }
    .me-save:disabled { opacity: .6; }

    @media (min-width: 560px) {
      .md-captain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (prefers-reduced-motion: reduce) {
      #match-detail-overlay { transition: none; }
    }

    /* Create match slide-in overlay */
    #create-match-overlay {
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
      will-change: transform;
    }
    #create-match-overlay.cm-open {
      transform: translateX(0);
    }

    /* ── Create a Match: two short steps ─────────────────────────────────
       Dan, 2026-09-25: one long form scared organisers off before they had
       answered the only three questions that matter. Step 1 asks when, where
       and how many; step 2 lists the house rules already set, one line each.
       data-cm-step on the overlay is the single switch for which step shows. */
    #create-match-overlay[data-cm-step="1"] [data-cm-only="2"],
    #create-match-overlay[data-cm-step="2"] [data-cm-only="1"] { display: none; }

    /* On a wide screen the form keeps a phone's width instead of stretching
       the board and every row across the whole monitor. */
    .cm-steps, .cm-pane, .cm-foot { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }

    .cm-head { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .cm-head-title { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2; }
    .cm-head-sub { margin-top: 2px; color: var(--so-muted); font-size: 11.5px; font-weight: 600; }

    .cm-steps {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
      list-style: none; margin: 0 auto; padding: 12px 16px 0;
    }
    .cm-step { display: flex; flex-direction: column; gap: 6px; }
    .cm-step-bar { height: 3px; border-radius: 3px; background: #182248; }
    .cm-step-lab {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #5e6da6;
    }
    #create-match-overlay[data-cm-step="1"] [data-cm-step-mark="1"] .cm-step-bar,
    #create-match-overlay[data-cm-step="2"] [data-cm-step-mark="2"] .cm-step-bar {
      background: linear-gradient(90deg, #2DE2FF, #6c4bff 70%, #B026FF);
      box-shadow: 0 0 10px rgba(45, 226, 255, 0.45);
    }
    #create-match-overlay[data-cm-step="1"] [data-cm-step-mark="1"] .cm-step-lab,
    #create-match-overlay[data-cm-step="2"] [data-cm-step-mark="2"] .cm-step-lab { color: var(--so-volt); }
    #create-match-overlay[data-cm-step="2"] [data-cm-step-mark="1"] .cm-step-bar { background: rgba(45, 226, 255, 0.55); }
    #create-match-overlay[data-cm-step="2"] [data-cm-step-mark="1"] .cm-step-lab { color: var(--so-muted); }

    .cm-pane { display: flex; flex-direction: column; gap: 22px; flex: 1; padding: 18px 16px 24px; }
    .cm-pane-rules { gap: 12px; padding-top: 14px; }
    .cm-q {
      margin: 0 0 10px; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 700;
      font-size: 21px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
      color: var(--so-paper); outline: none;
    }

    /* The tactics board: two teams on the pitch, any others waiting on the
       touchline. Drawn by _cmRenderBoard() and redrawn on every change. */
    .cm-board { border: 1px solid rgba(34, 48, 107, 0.9); border-radius: 16px; background: #0b1230; padding: 10px; }
    .cm-board svg { display: block; width: 100%; height: auto; }
    .cm-headcount { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 12px; }
    .cm-headcount b {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 28px; line-height: 0.9; font-weight: 800;
      background: linear-gradient(103deg,#8FF6FF 0%,#2DE2FF 26%,#FFFFFF 43%,#C77BFF 62%,#B026FF 82%,#7FEFFF 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .cm-headcount span { font-size: 13px; font-weight: 600; color: var(--so-paper); }
    .cm-headcount em { font-style: normal; font-weight: 500; color: var(--so-muted); }
    .cm-size { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .cm-mini {
      margin: 0 0 7px 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
    }
    .cm-size .cm-chip { padding: 10px 0; }
    .cm-size .cm-stepper { gap: 10px; padding: 4px 8px; justify-content: space-between; }
    .cm-size .cm-bump { width: 36px; height: 34px; }

    /* Step 2 opens on what step 1 decided, so the rules are read against it. */
    .cm-ticket {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
      border: 1px solid var(--so-edge); border-radius: 18px; padding: 14px 14px 12px;
      background: radial-gradient(120% 100% at 100% 0%, rgba(45, 226, 255, 0.10), transparent 55%), #101838;
    }
    .cm-ticket-when {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 24px; line-height: 1;
      font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--so-paper);
    }
    .cm-ticket-where {
      margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--so-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cm-ticket-size { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: var(--so-paper); }
    .cm-ticket-edit {
      flex: none; min-height: 34px; padding: 0 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
      border: 1px solid rgba(45, 226, 255, 0.45); background: rgba(45, 226, 255, 0.08); color: var(--so-volt);
    }
    .cm-lead { margin: 0 2px -4px; font-size: 12.5px; line-height: 1.45; color: var(--so-muted); }

    /* One rule per line with its current choice, the way a match-settings
       screen in a football game lists them. The arrows walk the same values
       the old chip rows offered; tapping the value itself steps forward. */
    .cm-rules { border: 1px solid var(--so-edge); border-radius: 18px; background: #0b1230; overflow: hidden; }
    .cm-rule {
      display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 13px;
      border-top: 1px solid rgba(34, 48, 107, 0.6);
    }
    .cm-rule:first-child { border-top: 0; }
    .cm-rule-l { flex: 1; min-width: 0; }
    .cm-rule-k { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--so-paper); }
    .cm-rule-h { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--so-muted); }
    .cm-cyc {
      flex: none; width: 158px; display: flex; align-items: stretch; padding: 2px;
      background: #101838; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
    }
    .cm-cyc-btn {
      flex: none; width: 27px; min-height: 44px; display: grid; place-items: center;
      background: none; border: 0; border-radius: 9px; color: var(--so-volt); cursor: pointer;
    }
    .cm-cyc-btn svg { width: 14px; height: 14px; }
    .cm-cyc-v {
      flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: none; border: 0; border-radius: 9px; padding: 4px 2px; cursor: pointer; color: inherit;
    }
    .cm-cyc-v b {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 14px; line-height: 1.05;
      font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--so-paper); text-align: center;
    }
    .cm-cyc-btn:active, .cm-cyc-v:active { background: rgba(45, 226, 255, 0.10); }
    .cm-cyc-btn:focus-visible, .cm-cyc-v:focus-visible { outline: 2px solid var(--so-volt); outline-offset: -2px; }
    .cm-dots { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
    .cm-dots i { width: 4px; height: 4px; border-radius: 50%; background: #2a3972; }
    .cm-dots i.on { background: var(--so-volt); box-shadow: 0 0 5px var(--so-volt); }
    /* A rule that does not apply to this night's shape is hidden, not greyed. */
    .cm-rule[hidden] { display: none; }
    /* A number rule: the value is a box you can type in, with a step either side. */
    .cm-cyc-num { cursor: text; }
    .cm-cyc-num:focus-within { outline: 2px solid var(--so-volt); outline-offset: -2px; }
    .cm-num-input {
      width: 100%; background: none; border: 0; outline: 0; padding: 0; text-align: center;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 18px; line-height: 1.05;
      font-weight: 700; color: var(--so-paper); -moz-appearance: textfield; appearance: textfield;
    }
    .cm-num-input::-webkit-outer-spin-button,
    .cm-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .cm-cyc-num span {
      font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--so-muted);
    }

    /* The rating rule, as a footnote right above the button it is about. */
    .cm-rating-note { display: flex; align-items: flex-start; gap: 9px; margin: -2px 4px 0; }
    .cm-rating-note-mark { flex: none; display: flex; color: #2DE2FF; margin-top: 1px; }
    .cm-rating-note-mark svg { width: 15px; height: 15px; }
    .cm-rating-note-copy { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--so-muted); }

    /* Sticky, so the step's one button is always within reach of the thumb. */
    .cm-foot {
      position: sticky; bottom: 0; z-index: 5;
      padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
      background: linear-gradient(180deg, rgba(7, 11, 31, 0), rgba(7, 11, 31, 0.94) 26%);
    }

    /* Form inputs in create-match overlay */
    .cm-input {
      width: 100%;
      background: #182248;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 12px 16px;
      color: white;
      font-size: 14px;
      outline: none;
      transition: border-color 0.15s;
      appearance: none;
      -webkit-appearance: none;
    }
    .cm-input:focus { border-color: rgba(45,226,255,0.4); }
    .cm-chip {
      flex: 1;
      padding: 10px 4px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,0.08);
      background: #182248;
      color: rgba(255,255,255,0.4);
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }
    .cm-chip.active {
      background: rgba(45,226,255,0.15);
      border-color: rgba(45,226,255,0.4);
      color: #2DE2FF;
    }
    .cm-chip { display: flex; align-items: center; justify-content: center; gap: 6px; }

    /* A native select/input styled to look like an icon-prefixed row, without
       touching how the element works -- appearance:none already strips the
       native chrome, this just adds the icon and a custom chevron on top. */
    .cm-field-icon { position: relative; display: flex; align-items: center; }
    .cm-field-glyph {
      position: absolute; left: 16px; width: 16px; height: 16px;
      color: #2DE2FF; pointer-events: none; flex: none;
    }
    .cm-field-chevron {
      position: absolute; right: 16px; width: 14px; height: 14px;
      color: rgba(130,144,196,0.7); pointer-events: none; flex: none;
    }
    .cm-input-icon { padding-left: 44px; }
    select.cm-input-icon { padding-right: 40px; }

    /* Pitch search: the matching pitches sit right under the box. */
    .cm-facility-input { padding-right: 44px; }
    .cm-facility-clear {
      position: absolute; right: 8px; width: 32px; height: 32px; border-radius: 10px;
      background: none; border: 0; color: rgba(130,144,196,0.9); font-size: 22px; line-height: 1; cursor: pointer;
    }
    .cm-facility-clear[hidden] { display: none; }
    .cm-facility-list {
      list-style: none; margin: 8px 0 0; padding: 4px; max-height: 264px; overflow-y: auto;
      background: #0b1230; border: 1px solid var(--so-edge); border-radius: 16px;
    }
    .cm-facility-list[hidden] { display: none; }
    .cm-facility-item {
      width: 100%; min-height: 44px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
      padding: 11px 12px; border: 0; border-radius: 12px; background: none; text-align: left;
      color: var(--so-paper); cursor: pointer;
    }
    .cm-facility-item b { font-size: 13px; font-weight: 700; }
    .cm-facility-item span { flex: none; font-size: 11px; color: var(--so-muted); }
    .cm-facility-item:hover,
    [role="option"][aria-selected="true"] .cm-facility-item { background: rgba(45, 226, 255, 0.10); }
    .cm-facility-note { padding: 10px 12px; font-size: 11.5px; color: var(--so-muted); }

    /* Players-per-team stepper: the real value still lives on the hidden
       #cm-players-per-team select this only drives. */
    .cm-stepper {
      display: flex; align-items: center; justify-content: center; gap: 20px;
      background: #182248; border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px; padding: 10px 16px;
    }
    .cm-bump {
      width: 38px; height: 38px; border-radius: 12px; flex: none;
      border: 1px solid rgba(255,255,255,0.12); background: #101838;
      color: #EAF0FF; font-size: 18px; font-weight: 700; line-height: 1;
      display: grid; place-items: center; cursor: pointer;
    }
    .cm-bump:active { transform: scale(0.94); }
    .cm-stepper-value {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 22px; color: #EAF0FF;
      min-width: 24px; text-align: center;
    }

    /* Fullscreen map modal */
    #map-modal {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }
    #map-modal.map-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }
    #fullscreen-map {
      flex: 1;
      min-height: 0;
      position: relative;
    }

    /* Sport filter chip states */
    .sport-chip {
      flex-shrink: 0;
      min-height: 44px;
      padding: 8px 16px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(143,246,255,0.12);
      background: rgba(16,24,56,0.82);
      color: #9AA8D5;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .sport-chip.active {
      background: rgba(45,226,255,0.15);
      border-color: rgba(45,226,255,0.4);
      color: #2DE2FF;
      font-weight: 600;
    }
    .region-chip {
      flex-shrink: 0;
      min-height: 44px;
      padding: 8px 16px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(143,246,255,0.1);
      background: rgba(11,18,48,0.86);
      color: #9AA8D5;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .region-chip.active {
      background: rgba(45,226,255,0.10);
      border-color: rgba(45,226,255,0.35);
      color: #2DE2FF;
      font-weight: 600;
    }
    .region-chip.following-active {
      background: rgba(45,226,255,0.10);
      border-color: rgba(45,226,255,0.35);
      color: #2DE2FF;
      font-weight: 600;
    }

    /* Highlight grid squares */
    .highlight-sq {
      aspect-ratio: 1;
      border-radius: 6px;
      background: #101838;
      border: 1px solid rgba(255,255,255,0.05);
      cursor: pointer;
      overflow: hidden;
      position: relative;
      transition: border-color 0.15s;
    }
    .highlight-sq:hover { border-color: rgba(45,226,255,0.3); }
    .highlight-sq:active { transform: scale(0.96); }

    /* ═══════════════════════════════════════════════════════════════
       HOLO CARD  (.hc-*)
       The player's identity as a collectible, not as a stats panel.
       Plain CSS on purpose: clip-path polygons, conic gradients and
       background-clip:text do not survive the prebuilt-Tailwind step
       cleanly, and this is the one component the whole product is for.
       ═══════════════════════════════════════════════════════════════ */

    /* The silhouette: cut shoulders and a point at the bottom. This alone is
       what stops the card reading as another rounded rectangle. The border is
       a 2px gradient frame painted by the wrapper showing through the inset. */
    .hc-wrap {
      position: relative;
      display: block;
      padding: 2px;
      --hc-sil: polygon(6% 0, 94% 0, 100% 5%, 100% 92%, 50% 100%, 0 92%, 0 5%);
      clip-path: var(--hc-sil);
      background: linear-gradient(160deg, #2DE2FF, #6C4BFF 42%, #B026FF 70%, #28E7FF);
      filter: drop-shadow(0 0 22px rgba(45,226,255,0.30))
              drop-shadow(0 0 44px rgba(176,38,255,0.34));
    }
    .hc {
      position: relative;
      overflow: hidden;
      clip-path: var(--hc-sil);
      background: linear-gradient(168deg, #1B2A6B 0%, #141C48 34%, #0C1230 72%, #161A44 100%);
      padding: 20px 20px 32px;
    }
    /* Foil: two crossing weaves in cyan and violet — the diamond of a goal net —
       plus one soft gloss band. Screen blend so it lifts the ground instead of
       greying it. */
    .hc::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.62;
      background:
        repeating-linear-gradient(45deg,  rgba(45,226,255,0.11) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,0.11) 0 1px, transparent 1px 13px),
        linear-gradient(112deg, transparent 26%, rgba(255,255,255,0.16) 41%,
                                rgba(255,255,255,0.03) 49%, transparent 64%);
    }
    /* The sweep: one highlight crosses the foil, then a long pause. One moment,
       not constant motion — constant motion is what makes a page look generated,
       and it runs for as long as the card is on screen, same as always.
       Moved from animating `left` to animating `transform: translateX(...)`
       (346.2% of this element's own 52%-wide box ≈ the same 180%-of-card travel
       -60% -> 120% covered before) — `left` forces the browser to recompute
       layout on every single frame, forever; `transform` is compositor-only, so
       an infinite run costs the phone almost nothing instead of costing it
       forever. This is what crashed Safari on iPhones with Reduce Motion off
       (confirmed 2026-08-29: matched exactly against a phone that never crashed
       because Reduce Motion was on, disabling this animation entirely). */
    .hc::before {
      content: "";
      position: absolute;
      top: -60%; bottom: -60%; left: -60%;
      width: 52%;
      z-index: 4;
      pointer-events: none;
      transform: rotate(16deg) translateX(0%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.015) 30%,
                  rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.015) 70%, transparent);
      animation: hc-sweep 5.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }
    @keyframes hc-sweep {
      0%, 62% { transform: rotate(16deg) translateX(0%); }
      100%    { transform: rotate(16deg) translateX(346.2%); }
    }

    .hc-body { position: relative; z-index: 5; }

    /* The rating keeps a narrow rail on the left; the face owns the rest of
       the top of the card. The face itself is drawn in .hc-art below. */
    .hc-identity {
      display: grid;
      grid-template-columns: 4.65rem minmax(0, 1fr);
      align-items: end;
      min-height: 11.25rem;
      gap: 0.35rem;
    }
    .hc-rating-stack {
      position: relative;
      z-index: 3;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 0.2rem;
    }
    .hc-tier-lockup {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      margin-top: auto;
      padding: 0 0 0.65rem 0.15rem;
    }
    /* Only the player's own card wears this -- another player's tier mark
       stays a plain, inert label. */
    .hc-tier-lockup.hc-tappable { background: none; border: 0; font-family: inherit; cursor: pointer; }
    .hc-tier-lockup.hc-tappable:active { transform: scale(.96); }
    /* The tap target over the face. The picture lives in .hc-art, under the
       foil, so this button is deliberately empty. It stops short of the row's
       foot so its focus ring clears the name standing on the fade. */
    .hc-portrait {
      position: relative;
      min-height: 10.75rem;
      margin-bottom: 0.5rem;
      padding: 0;
      border: 0;
      border-radius: 14px;
      background: none;
      color: inherit;
      cursor: pointer;
    }
    .hc-portrait:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    .hc:has(.hc-portrait-img.hidden) .hc-portrait { cursor: default; }

    /* The art: the photo printed INTO the card, not pasted onto it (Dan,
       2026-09-25, after the FC26 "Road to the Final" cards). No frame and no
       edge anywhere -- it fades into the card's dark on every side, the edge
       of the photo's own background sinks into the card's indigo, and the
       card's two lights tint its corners. Light rays bursting from behind the
       head were tried and rejected ("i dont like the lights"); the soft glow
       is the part that was kept. */
    .hc-art {
      position: absolute;
      inset: 0 0 auto 0;
      z-index: 0;
      height: 15.25rem;
      pointer-events: none;
    }
    /* A photo rises above the foil's net (.hc::after) but stays under the
       sweep (.hc::before, z-index 4). Under the net, lines crossed the face
       and the photo read as dim, seen through glass (Dan, 2026-09-25). The
       no-photo figure keeps the net: only a visible photo lifts the art. */
    .hc-art:has(.hc-portrait-img:not(.hidden)) { z-index: 1; }
    .hc-art::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 64% 40%, rgba(45,226,255,.34), rgba(108,75,255,.16) 30%, transparent 62%);
    }
    /* Uploads are 512px squares, framed however the player likes. The
       no-photo figure shares this exact box, so a photo and the figure stand
       in the same spot. Right of the card's centre on purpose: the Overall
       keeps clean dark to stand on. */
    .hc-art-photo,
    .hc-portrait-fallback {
      position: absolute;
      top: 3%;
      right: -6%;
      width: 84%;
      aspect-ratio: 1;
    }
    /* Solid from the hair down to the chest, then gone before the name: at
       the name's line only about a quarter of the photo is left, so the name
       reads even over a close-up selfie. */
    .hc-art-photo {
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 54%, rgba(0,0,0,.42) 67%, transparent 83%);
              mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 54%, rgba(0,0,0,.42) 67%, transparent 83%);
      transition: filter 180ms var(--so-ease);
    }
    /* Without a photo the lights below would paint on empty air, over the
       figure. */
    .hc-art-photo:has(.hc-portrait-img.hidden) { display: none; }
    /* Two nested masks rather than one mask-composite: Safari and older
       Chrome disagree on the composite keywords; nesting works in both. */
    .hc-art-frame {
      position: absolute;
      inset: 0;
      isolation: isolate;
      -webkit-mask-image: radial-gradient(50% 60% at 50% 42%, #000 66%, rgba(0,0,0,.6) 86%, transparent 100%);
              mask-image: radial-gradient(50% 60% at 50% 42%, #000 66%, rgba(0,0,0,.6) 86%, transparent 100%);
    }
    /* A slight lift, never a dimming. The earlier grade (.84 saturation, .94
       brightness) was one of the reasons the photo read as dim. */
    .hc-portrait-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 30%;
      filter: saturate(1.06) contrast(1.08) brightness(1.05);
    }
    /* The card's lights, pushed out to the corners: cyan at the upper right,
       violet at the lower left. They tint the edge of the photo, not the face
       -- across the face they washed it out. Painted BEFORE the darkening
       below: the other way round, the cyan re-lit the photo's background
       corner and a bright object there stayed glaring. */
    .hc-art-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(40% 34% at 92% 4%, rgba(45,226,255,.22), transparent 72%),
        radial-gradient(50% 44% at 0% 100%, rgba(176,38,255,.2), transparent 70%);
      mix-blend-mode: screen;
    }
    /* Whatever stood behind the player -- a room, a wall, a car -- sinks into
       the card's indigo at the outer edge. The player keeps the photo's own
       light. */
    .hc-art-frame::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background: radial-gradient(52% 60% at 50% 42%, transparent 58%, rgba(16,16,70,.7) 100%);
      mix-blend-mode: multiply;
    }
    /* No photo: a player's figure stands where the face would be, edged by
       the same two lights. The collar cut into it is what makes it read as a
       footballer rather than an account icon. It keeps the fade the photo
       had before; only the photo was brightened. */
    .hc-portrait-fallback {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 50%, rgba(0,0,0,.35) 68%, transparent 84%);
              mask-image: linear-gradient(180deg, transparent, #000 15%, #000 50%, rgba(0,0,0,.35) 68%, transparent 84%);
      filter: drop-shadow(1.2px -1.2px 0 rgba(143,246,255,.75))
              drop-shadow(-1px 1px 0 rgba(176,38,255,.55))
              drop-shadow(0 0 14px rgba(45,226,255,.28));
    }
    .hc-sil {
      position: absolute;
      top: var(--so-frame-top);
      left: var(--so-frame-left);
      width: var(--so-frame-size);
      height: var(--so-frame-size);
      background:
        radial-gradient(circle at 60% 26%, rgba(45,226,255,.26), transparent 20%),
        linear-gradient(180deg, #2A3A86 0%, #18225E 48%, #0E1535 88%);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='c'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M39.5 58.2c3.4 3.6 7 5.3 10.5 5.3s7.1-1.7 10.5-5.3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/mask%3E%3Cg mask='url%28%23c%29'%3E%3Cpath d='M50 16.5c-8.6 0-14.8 7-14.8 16.6 0 11.3 6.6 20.2 14.8 20.2s14.8-8.9 14.8-20.2c0-9.6-6.2-16.6-14.8-16.6z'/%3E%3Cpath d='M43.2 48.5v8.6c-5.6 3.1-16.6 5.1-24.2 9.2-8 4.2-11.1 10.8-12.6 19.8L4.5 100h91l-1.9-13.9c-1.5-9-4.6-15.6-12.6-19.8-7.6-4.1-18.6-6.1-24.2-9.2v-8.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='c'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M39.5 58.2c3.4 3.6 7 5.3 10.5 5.3s7.1-1.7 10.5-5.3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/mask%3E%3Cg mask='url%28%23c%29'%3E%3Cpath d='M50 16.5c-8.6 0-14.8 7-14.8 16.6 0 11.3 6.6 20.2 14.8 20.2s14.8-8.9 14.8-20.2c0-9.6-6.2-16.6-14.8-16.6z'/%3E%3Cpath d='M43.2 48.5v8.6c-5.6 3.1-16.6 5.1-24.2 9.2-8 4.2-11.1 10.8-12.6 19.8L4.5 100h91l-1.9-13.9c-1.5-9-4.6-15.6-12.6-19.8-7.6-4.1-18.6-6.1-24.2-9.2v-8.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    }
    .hc-portrait-img.hidden,
    .hc-portrait-fallback.hidden { display: none; }
    /* The name stands on the fade, centred under the face the way FC sets
       it. Its old box read as a second panel pasted under the photo. */
    .hc-nameplate {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      margin-top: -0.3rem;
      text-align: center;
    }
    .hc-nameplate .hc-name { filter: drop-shadow(0 2px 10px rgba(7,11,31,.85)); }
    @media (hover: hover) {
      .hc:has(.hc-portrait:hover) .hc-art-photo { filter: brightness(1.08); }
    }

    /* The app's mark: the same cut silhouette at 34px. A highlight sweeping
       across something this small is noise, so the mark does not sweep. */
    .hc-mark {
      display: inline-block;
      padding: 1.5px;
      filter: drop-shadow(0 0 10px rgba(45,226,255,0.35))
              drop-shadow(0 0 18px rgba(176,38,255,0.30));
    }
    .hc-mark .hc         { padding: 0; width: 100%; height: 100%; display: grid; place-items: center; }
    .hc-mark .hc::before { display: none; }

    /* Foil fills. Numerals and the name read as metal, not as coloured text. */
    .hc-holo {
      background: linear-gradient(103deg, #8FF6FF 0%, #2DE2FF 26%, #FFFFFF 43%,
                                  #C77BFF 62%, #B026FF 82%, #7FEFFF 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hc-gold {
      background: linear-gradient(175deg, #FFF0B8, #FFC93C 48%, #C98A10 82%, #FFE58A);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hc-disp {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800;
    }
    /* line-height under 1 clips a Saira numeral at the baseline; the padding is
       what stops the descender of the gradient fill being cut by the clip-path. */
    .hc-ovr { display: inline-block; font-size: 76px; line-height: 1.04; letter-spacing: -0.02em; padding-bottom: 2px; }
    .hc-name { display: inline-block; font-size: 25px; line-height: 1.05; letter-spacing: 0.01em; }
    .hc-label {
      font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: #8290C4;
    }
    .hc-stat { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; color: #EAF0FF; }
    .hc-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(45,226,255,0.35), transparent); }

    /* ── The compact card (Ron, 2026-10-04) ─────────────────────────────
       The tall card filled a phone screen on its own: the profile's owner
       scrolled past their own face to reach anything else. Same silhouette,
       same foil, same facts, about 60% shorter. The face takes the right
       side of the top, the Overall and the name stand on its left, and every
       row under them is a single line. Scoped to .hc-compact so the app's
       mark (which borrows .hc) keeps its own shape. */
    .hc-wrap.hc-compact {
      --hc-sil: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                        50% 100%, 0 calc(100% - 16px), 0 16px);
      filter: drop-shadow(0 0 16px rgba(45,226,255,0.22))
              drop-shadow(0 0 30px rgba(176,38,255,0.24));
    }
    .hc-compact .hc { padding: 12px 12px 20px; }
    .hc-compact .hc-identity {
      grid-template-columns: minmax(0, 1fr) 42%;
      align-items: stretch;
      min-height: 8rem;
      gap: 0.5rem;
    }
    .hc-compact .hc-rating-stack { padding-top: 0; gap: 0.35rem; }
    .hc-compact .hc-ovr-line { display: flex; align-items: center; gap: 0.5rem; }
    .hc-compact .hc-ovr { font-size: 46px; line-height: 0.98; }
    .hc-compact .hc-ovr-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .hc-prov {
      font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      color: #FFC93C; border: 1px solid rgba(255,201,60,.4); border-radius: 999px;
      padding: 2px 6px; background: rgba(255,201,60,.08);
    }
    /* The name now stands under the Overall, left-aligned, instead of
       centred on the photo's fade. */
    .hc-compact .hc-nameplate {
      align-items: flex-start; text-align: left; margin-top: 0; gap: 0.15rem; max-width: 100%;
    }
    /* A long name wraps once and then stops: the whole name matters more
       than one line, but it must never push the record off the card. */
    .hc-compact .hc-name {
      display: -webkit-box; max-width: 100%; font-size: 21px; line-height: 1.05;
      overflow: hidden; overflow-wrap: anywhere;
      -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    }
    .hc-compact .pod-chip { margin-top: 2px; }
    .hc-compact .hc-tier-lockup {
      flex-direction: row; gap: 0.45rem; margin-top: auto; padding: 4px 12px 4px 4px;
      border: 1px solid rgba(143,246,255,.14); border-radius: 999px;
      background: rgba(7,11,31,.42); min-height: 44px;
    }
    .hc-compact .hc-tier-lockup.hc-tappable { border: 1px solid rgba(143,246,255,.14); background: rgba(7,11,31,.42); }
    .hc-tier-name {
      font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #C9D3F5;
    }
    /* Rep rides inside the pill: the rank, its bar, the rep. The Rep Ladder
       it opens says what the next rank needs. */
    .hc-tier-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
    /* The pill never leaves its column: high rep ("1,398 rep") shortens the
       bar, it does not push the pill over the photo. */
    .hc-compact .hc-tier-lockup { max-width: 100%; min-width: 0; }
    .hc-tier-prog { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .hc-tier-prog .hc-rep-bar { flex: 0 1 3.25rem; min-width: 1.25rem; }
    .hc-rep-now { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8290C4; white-space: nowrap; }
    .hc-compact .hc-portrait { min-height: 0; margin-bottom: 0; }
    /* The face fills the right of the top band and fades into the card on its
       left and bottom edges, so the Overall keeps clean dark to stand on. */
    .hc-compact .hc-art { height: 10.25rem; }
    .hc-compact .hc-art-photo,
    .hc-compact .hc-portrait-fallback { top: 0; right: -3%; width: 56%; }
    .hc-compact .hc-art-photo {
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.4) 74%, transparent 90%);
              mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.4) 74%, transparent 90%);
    }
    .hc-compact .hc-art::before {
      background: radial-gradient(circle at 74% 38%, rgba(45,226,255,.3), rgba(108,75,255,.14) 30%, transparent 58%);
    }
    /* The record: one strip, four numbers. */
    .hc-stats {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 8px; padding: 6px 4px;
      border: 1px solid rgba(143,246,255,.1); border-radius: 12px;
      background: rgba(7,11,31,.5);
    }
    .hc-stat-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .hc-stat-cell + .hc-stat-cell { border-left: 1px solid rgba(143,246,255,.08); }
    .hc-compact .hc-stat { font-size: 18px; }
    .hc-compact .hc-label { font-size: 8.5px; letter-spacing: 0.14em; }
    .hc-rep-bar { display: block; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
    .hc-rep-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2DE2FF, #B026FF); }
    /* The foot of the card holds the badges alone; the links moved under
       the bio (Ron, 2026-10-04). */
    .hc-foot { display: flex; align-items: center; min-width: 0; margin-top: 2px; }
    .hc-badges { display: flex; align-items: center; gap: 6px; min-width: 0; }
    /* The medallion is drawn at 30px; the tap around it stays 44px. */
    .hc-badges .bd-row { gap: 0; padding-bottom: 0; margin-inline: -7px; flex-wrap: wrap; }
    .hc-badges .bd-tap { min-width: 44px; min-height: 44px; justify-content: center; }
    .hc-badges .bd-hex { width: 30px; height: 34px; }
    .hc-badges .hc-more { color: #6C7AB0; }

    /* Links under the bio, the way a social profile lists them: a row of
       chips, each the app's own mark and the account name. The mark says
       which app, so "Instagram link" is left to the aria-label. */
    .pf-about {
      display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem;
      width: 100%; max-width: 24rem; margin-top: .15rem;
    }
    /* A real bio takes its own line; the "Add a bio" prompt sits beside the links. */
    .pf-about > .pf-bio { flex: 1 1 100%; width: auto; margin-top: 0; }
    /* No :has() in this header. Safari on iPhone does not always re-check a
       :has() rule after a slot is filled, and an empty-row rule built on it
       kept another player's links hidden for good (Ron, 2026-10-04). The
       code marks the prompt with a class instead. */
    .pf-about > .pf-bio.pf-bio-prompt { flex: 0 0 auto; }
    .pf-social { min-width: 0; }
    .pf-social:empty { display: none; }
    .pf-social .hc-socials { display: flex; flex-wrap: wrap; gap: .4rem; }
    .pf-social .hc-social-link {
      display: inline-grid; grid-template-columns: 22px minmax(0, auto) 12px; gap: 7px;
      max-width: 100%; padding: 6px 11px 6px 7px; border-radius: 999px;
    }
    .pf-social .hc-social-mark { width: 22px; height: 22px; }
    .pf-social .hc-social-copy { font-size: 0; max-width: 13rem; }
    .pf-social .hc-social-copy strong { font-size: 12.5px; font-weight: 700; }
    .pf-social .hc-social-arrow { width: 12px; height: 12px; }
    .pf-add-bio {
      min-height: 44px; padding: 0 .2rem; border: 0; background: none; cursor: pointer; white-space: nowrap;
      font-size: .74rem; font-weight: 700; color: var(--so-volt);
    }
    .pf-add-bio:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; border-radius: .4rem; }

    /* Social links are transfer tags printed into the collectible, not auth
       buttons floating outside it. HTTPS universal links let the phone hand
       the destination to the installed Instagram/Facebook/Google app. */
    /* Edit Profile wears the same marks inside its link fields. */
    .ep-soc { position: relative; }
    .ep-soc-mark { position: absolute; left: .75rem; top: .6rem; width: 1.35rem; height: 1.35rem; pointer-events: none; }
    .ep-soc > input { padding-left: 2.75rem; }
    .hc-socials { display: grid; gap: 7px; }
    /* A link is the app's own mark in its own colours on a quiet dark chip
       (Ron, 2026-10-04): the red "IG" box with a red stripe read as an error,
       not as Instagram. The platform colour now lives only in the mark. */
    .hc-social-link {
      --hc-social-rgb: 45, 226, 255;
      position: relative;
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr) 14px;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 12px 8px 9px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 12px;
      background: rgba(7, 11, 31, .55);
      color: #EAF0FF;
      text-decoration: none;
      transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }
    .hc-social-instagram { --hc-social-rgb: 225, 48, 108; }
    .hc-social-facebook { --hc-social-rgb: 24, 119, 242; }
    .hc-social-google { --hc-social-rgb: 66, 133, 244; }
    .hc-social-mark { display: block; width: 26px; height: 26px; }
    .hc-social-copy {
      min-width: 0;
      overflow: hidden;
      color: rgba(234, 240, 255, .64);
      font-size: 10.5px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hc-social-copy strong { color: #EAF0FF; font-weight: 800; }
    .hc-social-arrow {
      width: 14px; height: 14px; fill: none;
      stroke: rgba(234, 240, 255, .5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    }
    .hc-social-link:hover { border-color: rgba(var(--hc-social-rgb), .55); background: rgba(var(--hc-social-rgb), .08); }
    .hc-social-link:hover .hc-social-arrow { stroke: rgb(var(--hc-social-rgb)); }
    .hc-social-link:active { transform: scale(.985); }
    .hc-social-link:focus-visible { outline: 2px solid rgb(var(--hc-social-rgb)); outline-offset: 2px; }

    /* ── The aura ────────────────────────────────────────────────────
       The ONLY thing rep pays out. Light around the player, wherever the
       player appears. It never grants an ability — every player can do
       everything. Rookie is deliberately bare so the first ring is felt. */
    .au { position: relative; display: grid; place-items: center; flex: none; }
    .au-in {
      position: relative; z-index: 2;
      border-radius: 9px;
      display: grid; place-items: center;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800;
      background: #0E1533;
      border: 1px solid #22306B;
      color: #8290C4;
    }
    .au-rookie  .au-in { border-color: #182248; }
    .au-baller  .au-in {
      border-color: rgba(176,38,255,0.8); color: #C08BFF;
      box-shadow: 0 0 0 1px rgba(176,38,255,0.3), 0 0 10px -3px rgba(176,38,255,0.9);
    }
    .au-allstar .au-in {
      border-color: #2DE2FF; color: #2DE2FF;
      animation: au-breathe 2.6s ease-in-out infinite;
    }
    @keyframes au-breathe {
      0%, 100% { box-shadow: 0 0 0 1px rgba(45,226,255,0.45), 0 0 11px -3px rgba(45,226,255,0.85); }
      50%      { box-shadow: 0 0 0 2px rgba(45,226,255,0.85), 0 0 22px 0    rgba(45,226,255,1); }
    }
    .au-legend::before {
      content: ""; position: absolute; inset: -3px; border-radius: 12px; z-index: 1;
      background: conic-gradient(from 0deg, #FFC93C, #FFF6D0 12%, #2DE2FF 38%,
                                 #B026FF 62%, #FFE9A8 84%, #FFC93C);
      animation: au-spin 3.4s linear infinite;
    }
    .au-legend::after {
      content: ""; position: absolute; inset: -10px; border-radius: 20px; z-index: 0;
      background: radial-gradient(circle, rgba(255,201,60,0.5), rgba(176,38,255,0.18) 45%, transparent 70%);
      animation: au-pulse 2.4s ease-in-out infinite;
    }
    @keyframes au-spin  { to { transform: rotate(360deg); } }
    @keyframes au-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.94); }
                          50%      { opacity: 1;   transform: scale(1.06); } }
    .au-legend .au-in { border-color: transparent; background: #141031; color: #FFD764; }

    /* The aura also has to work as a round avatar, which is how a player is
       drawn everywhere outside their own card. */
    .au-round .au-in     { border-radius: 9999px; }
    .au-round::before    { border-radius: 9999px; }
    .au-round::after     { border-radius: 9999px; }
    .au-av { font-size: 13px; width: 34px; height: 34px; }

    /* One card holds one aura and it can breathe. A list holds twenty, and in a
       group that has played a season most of them are All-Star -- twenty
       breathing rings at once is a flicker wall, not status. On a list the
       All-Star ring holds still and only Legend turns, so the rarest tier is
       the only thing moving. Verified against a full 20-player Board. */
    .au-still.au-allstar .au-in {
      animation: none;
      box-shadow: 0 0 0 1px rgba(45,226,255,0.5), 0 0 13px -3px rgba(45,226,255,0.9);
    }
    .au-still.au-legend::before { animation-duration: 7s; }
    .au-still.au-legend::after  { animation: none; opacity: 0.62; transform: scale(1); }

    /* ── Badges ──────────────────────────────────────────────────────
       The aura says how much you have PLAYED. A badge says what you have
       DONE. Earned once, kept for good, and — like the aura — it grants no
       ability whatsoever. Only badges a player has won are drawn — see
       _renderBadgeRow. */
    /* The row is the last thing in the card, and the card ends in a point. At
       the default bottom padding the count text lands 0.6% below where the
       silhouette starts tapering — measured, not guessed — which survives ×7
       and would not survive a wider count. The padding lifts the whole row
       clear of the taper instead of relying on the text staying short. */
    .bd-row { display: flex; align-items: flex-start; gap: 9px; padding-bottom: 14px; }
    .bd     { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
    /* 40px, not the 34px this started at. A mark with two parts — a hat sitting
       on a ball carrying a number — turns to mush at 34/15px; at 40/23px every
       part reads. Checked against the widest case: five medallions come to
       266px inside a card that has 310px on a 390px phone. 46px reads better
       still and was rejected — with most of the catalogue unearned it turns the
       empty slots into five loud holes. */
    .bd-hex {
      display: block; width: 40px; height: 45px; padding: 1.5px;
      --bd-sil: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
      clip-path: var(--bd-sil);
      background: #1A2350;
    }
    /* Marks knock detail out of themselves with --bd-bg rather than a baked-in
       hex, so the number on the ball stays the ground behind it in both the
       earned and the unearned state. */
    .bd-in {
      display: grid; place-items: center; width: 100%; height: 100%;
      clip-path: var(--bd-sil);
      --bd-bg: #0B1130;
      background: var(--bd-bg); color: #35427F;
    }
    /* Badge levels, the 2K idea: a badge is easy to GET and hard to MAX, so the
       first one lands early and the top frame takes a year. The ladder is
       bronze, silver, gold, then purple on top (Dan, 2026-09-26). It replaced
       steel / volt / flux / card-gradient, whose top two frames were too close
       to tell apart at 40px. Gold now sits on level 3, so it is no longer
       Legend's alone; the top level moved to purple to stay clear of it.
       Nothing here animates — the card already has one breathing aura, and
       five moving badges beside it is a flicker wall (the same lesson the
       Board taught). */
    /* Both sizes of the same medallion: .bd-hex on a card, .bs-hex blown up in
       the sheet. The level frame has to reach both — listed once so the sheet
       cannot quietly show a level-4 badge wearing a level-0 frame. */
    .bd-on .bd-in,
    .bd-on .bs-in    { --bd-bg: #101838; color: #EAF0FF; }
    .bd-t1 .bd-hex,
    .bd-t1 .bs-hex   { background: linear-gradient(158deg, #CD8642, #79441C); }
    .bd-t2 .bd-hex,
    .bd-t2 .bs-hex   {
      background: linear-gradient(158deg, #F6F9FF, #9AA7BF);
      filter: drop-shadow(0 0 6px rgba(214,226,255,0.26));
    }
    .bd-t3 .bd-hex,
    .bd-t3 .bs-hex   {
      background: linear-gradient(158deg, #FFE580, #DE9C10);
      filter: drop-shadow(0 0 6px rgba(255,201,60,0.34));
    }
    .bd-t4 .bd-hex,
    .bd-t4 .bs-hex   {
      background: linear-gradient(158deg, #D68FFF, #B026FF 48%, #6A1BD1);
      filter: drop-shadow(0 0 9px rgba(176,38,255,0.55))
              drop-shadow(0 0 17px rgba(176,38,255,0.36));
    }
    /* Every slot opens its badge, earned or not — what is still out there is
       half of why anyone chases it. */
    .bd-tap { cursor: pointer; }
    .bd-tap:active .bd-hex { transform: scale(0.94); }
    .bd-hex { transition: transform .12s ease; }
    .bd-tap:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 3px; border-radius: 4px; }

    /* The badge sheet. One badge, big enough to actually look at, with the rule
       in the player's own words underneath. */
    .bs-hex {
      display: block; width: 96px; height: 108px; padding: 2.5px; margin: 0 auto;
      --bd-sil: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
      clip-path: var(--bd-sil); background: #1A2350;
    }
    .bs-in {
      display: grid; place-items: center; width: 100%; height: 100%;
      clip-path: var(--bd-sil); --bd-bg: #0B1130; background: var(--bd-bg); color: #35427F;
    }

    /* ── The Board ───────────────────────────────────────────────────
       A league table is a list, not a column of boxes. Bare ground and a
       hairline between entries; the aura does the work the card background
       used to pretend to do. */
    .bo-title {
      font-size: 34px; line-height: 1; letter-spacing: 0.04em;
      text-transform: uppercase; font-weight: 900;
      display: inline-block;
    }
    /* A rivalry row is a Board row that opens. The wrapper holds the row and
       the panel it reveals, so the list stays flat -- hairlines, not boxes. */
    .rivalry-row:focus-visible {
      outline: 2px solid rgba(45,226,255,0.7);
      outline-offset: 2px;
      border-radius: 10px;
    }
    .bo-row {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      padding: 12px 4px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.15s;
    }
    .bo-row:active { background: rgba(45,226,255,0.05); }
    div.bo-row { cursor: default; }
    .bo-row.is-me  { background: rgba(45,226,255,0.06); border-radius: 12px; }
    .bo-hr { height: 1px; background: rgba(255,255,255,0.06); }
    .bo-rank {
      width: 26px; flex: none; text-align: center;
      font-size: 17px; line-height: 1; color: #8997C6;
      font-variant-numeric: tabular-nums;
    }
    .bo-name { font-size: 14px; font-weight: 600; color: #EAF0FF; }
    .bo-sub  { font-size: 12px; color: #8997C6; margin-top: 2px; }
    .bo-score { font-size: 22px; line-height: 1; flex: none; font-variant-numeric: tabular-nums; }
    .bo-tag {
      display: inline-block; margin-left: 7px; vertical-align: 1px;
      font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 2px 6px; border-radius: 5px;
      border: 1px solid currentColor;
    }
    .t-rookie  { color: #6C7AB0; }
    .t-baller  { color: #C08BFF; }
    .t-allstar { color: #2DE2FF; }
    .t-legend  { color: #FFC93C; }

    /* ── The Board, second draft ─────────────────────────────────────
       The first Board was an honest list and read as one: rank 1 drawn
       exactly like rank 10, names set in body text, goals not drawn at all,
       and no answer to the only question a player opens this screen to ask —
       where am I, and who do I have to catch.

       Nothing here is a new colour or a new face. Same holo tokens, same
       Saira Condensed. Gold stays Legend's alone, so the leader is lit in
       volt cyan and never in gold. The `.bo-*` block above is still live:
       the rivalries list uses it. */
    .bd2 { padding-bottom: 170px; }

    .bd2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
    .bd2-title { font-size: 42px; line-height: 0.9; letter-spacing: 0.015em; text-transform: uppercase; font-weight: 900; display: inline-block; }
    .bd2-ctx { margin-top: 9px; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8290C4; }
    .bd2-sportwrap { position: relative; flex: none; margin-top: 6px; }
    .bd2-sport {
      appearance: none; min-height: 38px; padding: 0 30px 0 14px; border-radius: 999px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
      background: rgba(45,226,255,0.10); border: 1px solid rgba(45,226,255,0.32); color: #2DE2FF; cursor: pointer;
    }
    .bd2-sport:focus-visible { outline: 2px solid rgba(45,226,255,0.7); outline-offset: 2px; }
    .bd2-sport-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: #2DE2FF; pointer-events: none; }

    /* Football keeps two tables: the league and the golden boot. Goals already
       arrive on every leaderboard row and were drawn nowhere. */
    .bd2-controls { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
    .bd2-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(11,18,48,0.9); border: 1px solid rgba(143,246,255,0.12); }
    .bd2-seg-b {
      min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #9AA8D5;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
      transition: color 0.15s, background-color 0.15s;
    }
    .bd2-seg-b.is-on { background: rgba(45,226,255,0.14); color: #2DE2FF; box-shadow: inset 0 0 0 1px rgba(45,226,255,0.34); }
    .bd2-chip {
      min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
      border: 1px solid rgba(143,246,255,0.1); background: rgba(11,18,48,0.86); color: #9AA8D5; cursor: pointer;
      display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .bd2-chip.active { background: rgba(45,226,255,0.10); border-color: rgba(45,226,255,0.35); color: #2DE2FF; }
    .bd2-audience {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
      margin-bottom: 14px; padding: 4px; border: 1px solid rgba(143,246,255,0.12);
      border-radius: 14px; background: rgba(11,18,48,0.9);
    }
    .bd2-audience-b {
      min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px;
      background: transparent; color: #9AA8D5; cursor: pointer;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 13px; font-weight: 800; letter-spacing: .04em;
      transition: color .18s, background-color .18s, box-shadow .18s;
    }
    .bd2-audience-b.is-on {
      color: #2DE2FF; background: rgba(45,226,255,.13);
      box-shadow: inset 0 0 0 1px rgba(45,226,255,.34), 0 8px 20px -16px rgba(45,226,255,.9);
    }
    .bd2-audience-b:focus-visible, .bd2-chip:focus-visible, .bd2-seg-b:focus-visible {
      outline: 2px solid rgba(45,226,255,.8); outline-offset: 2px;
    }

    /* ── The podium ────────────────────────────────────────────────
       Dan, 2026-09-08: a stage for the top three, not for one.

       The app already owns this light: the boot screen strikes four masts over
       a dark pitch, and a floodlight stands on a mast at the CORNER of a
       ground — so the beam arrives diagonally and lands on the middle step.

       Height does the ranking. There is no gold, silver or bronze here: gold
       belongs to the Legend tier alone, and spending it on whoever is top this
       week would quietly cost that tier its meaning. */
    .bd2-pod {
      position: relative; overflow: hidden; border-radius: 22px; margin-bottom: 4px;
      border: 1px solid rgba(45,226,255,0.16);
      background: linear-gradient(180deg, #0C1332 0%, #090F27 100%);
      padding: 16px 14px 14px;
    }
    .bd2-beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(6px); }
    /* The lamp head the beam leaves from. Four cells, the same cyan the boot
       screen strikes its masts with. */
    .bd2-lamp {
      position: absolute; left: 9px; top: 8px; z-index: 3;
      display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(-14deg);
    }
    .bd2-lamp i {
      width: 6px; height: 4.5px; border-radius: 1px; background: #9BF2FF;
      box-shadow: 0 0 6px 1px rgba(45,226,255,0.95), 0 0 14px 3px rgba(45,226,255,0.45);
    }

    /* Bottom-aligned, so three steps of different heights share one ground
       line — that line is the pitch marking the steps stand on. */
    .bd2-pod-row {
      position: relative; z-index: 2;
      display: flex; align-items: flex-end; justify-content: center; gap: 6px;
      border-bottom: 1px solid rgba(45,226,255,0.16);
    }
    .bd2-pod-slot {
      flex: 1 1 0; min-width: 0; max-width: 132px;
      display: flex; flex-direction: column; align-items: center;
      border: 0; background: none; padding: 0; color: inherit; font: inherit;
      cursor: pointer; text-align: center;
    }
    /* Built 1-2-3 for the reading and tab order, shown 2-1-3 for the eye. */
    .bd2-pod-1 { order: 2; }
    .bd2-pod-2 { order: 1; }
    .bd2-pod-3 { order: 3; }
    .bd2-pod-slot:focus-visible { outline: 2px solid rgba(45,226,255,0.7); outline-offset: 3px; border-radius: 12px; }

    .bd2-pod-kicker {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase;
      color: #2DE2FF; margin-bottom: 7px; white-space: nowrap;
    }
    /* An empty band on the other two slots, so marking one as yours cannot
       shove that column's avatar out of line with the rest. Drawn only when
       one of the three is actually you. */
    .bd2-pod-tag {
      display: block; min-height: 15px; margin-bottom: 4px; line-height: 15px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #070B1F;
    }
    .bd2-pod-slot.is-me .bd2-pod-tag { background: #2DE2FF; border-radius: 5px; padding: 0 6px; }

    .bd2-avf-1  { width: 66px; height: 66px; overflow: hidden; }
    .bd2-avf-23 { width: 48px; height: 48px; overflow: hidden; }
    .bd2-avf-1  .bd2-av-fb { font-size: 23px; }
    .bd2-avf-23 .bd2-av-fb { font-size: 17px; }

    .bd2-pod-nmrow { display: flex; align-items: baseline; justify-content: center; gap: 4px; max-width: 100%; margin-top: 8px; }
    .bd2-pod-nm {
      font-size: 12.5px; line-height: 1.08; letter-spacing: 0.015em; text-transform: uppercase;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
    }
    .bd2-pod-val { display: inline-block; font-size: 24px; line-height: 1; margin-top: 5px; font-variant-numeric: tabular-nums; }
    /* Colour ONLY the two unlit slots. .hc-holo works by setting the text to
       transparent and clipping a gradient behind it, and these rules are
       defined after it — so a plain `color` on the shared class silently wins
       and the winner comes out flat white. It shipped that way for one build. */
    .bd2-pod-2 .bd2-pod-nm, .bd2-pod-3 .bd2-pod-nm,
    .bd2-pod-2 .bd2-pod-val, .bd2-pod-3 .bd2-pod-val { color: #EAF0FF; }
    .bd2-pod-1 .bd2-pod-nm { font-size: 15.5px; }
    .bd2-pod-1 .bd2-pod-val { font-size: 36px; padding-bottom: 2px; }
    /* Rank 4 and below print games, wins and goals on every row; the podium
       would otherwise say less about the top three than about seventh. */
    .bd2-pod-sub { font-size: 9.5px; line-height: 1.25; color: #6F7DB6; margin-top: 4px; font-variant-numeric: tabular-nums; }

    .bd2-step {
      width: 100%; margin-top: 10px; display: grid; place-items: center;
      border-radius: 7px 7px 0 0;
      border: 1px solid rgba(45,226,255,0.16); border-bottom: 0;
      background: linear-gradient(180deg, rgba(45,226,255,0.09), rgba(45,226,255,0.015));
    }
    .bd2-step-1 {
      height: 54px; border-color: rgba(45,226,255,0.40);
      background: linear-gradient(180deg, rgba(45,226,255,0.24), rgba(45,226,255,0.04));
      box-shadow: 0 0 26px -6px rgba(45,226,255,0.40);
    }
    .bd2-step-2 { height: 38px; }
    .bd2-step-3 { height: 28px; }
    .bd2-step-n {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 20px; line-height: 1; color: #6F7DB6;
    }
    .bd2-step-1 .bd2-step-n { font-size: 26px; color: #2DE2FF; }
    .bd2-pod-slot.is-me .bd2-step { border-color: rgba(45,226,255,0.6); box-shadow: inset 0 0 0 1px rgba(45,226,255,0.3); }

    .bd2-lead-foot {
      position: relative; z-index: 2; display: flex; align-items: center; gap: 8px;
      margin-top: 12px; padding-top: 0;
    }
    .bd2-lead-note { font-size: 12px; color: #8FA0D8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── The chase ─────────────────────────────────────────────────
       A row per player, and between two rows a connector drawn to the size of
       the real Overall gap. Players level with each other almost touch; a
       runaway leader leaves visible dark. The spacing is data, not styling. */
    .bd2-sec { margin-top: 22px; }
    .bd2-seclb {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
      color: #5C6AA4; padding: 0 6px 10px;
    }
    .bd2-row {
      display: grid; grid-template-columns: 26px 42px 1fr auto; align-items: center; gap: 12px;
      width: 100%; padding: 7px 6px; border: 0; background: transparent; color: inherit; font: inherit;
      text-align: left; cursor: pointer; border-radius: 12px; transition: background-color 0.15s;
    }
    .bd2-row:active { background: rgba(45,226,255,0.05); }
    .bd2-row:focus-visible { outline: 2px solid rgba(45,226,255,0.7); outline-offset: 2px; }
    .bd2-rk {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 19px; line-height: 1; color: #5C6AA4; text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .bd2-nm {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: 0.015em;
      text-transform: uppercase; color: #EAF0FF;
    }
    .bd2-sub { font-size: 11px; color: #8290C4; margin-top: 3px; font-variant-numeric: tabular-nums; }
    .bd2-ov {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; color: #EAF0FF;
    }
    /* A locked row's Overall is not sent; the dash sits where the number would. */
    .bd2-hid { color: #6C7AB0; -webkit-text-fill-color: #6C7AB0; }
    .bd2-avf { width: 42px; height: 42px; overflow: hidden; }
    .bd2-av-img, .bd2-av-fb { width: 100%; height: 100%; }
    .bd2-av-img { display: block; object-fit: cover; object-position: center 20%; }
    .bd2-av-fb { display: grid; place-items: center; font-size: 14px; font-weight: 800; }
    .bd2-av-img.hidden, .bd2-av-fb.hidden { display: none; }

    .bd2-row.is-me { background: rgba(45,226,255,0.07); box-shadow: inset 3px 0 0 0 #2DE2FF; }
    .bd2-you-tag {
      display: inline-block; margin-left: 7px; vertical-align: 2px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: #070B1F; background: #2DE2FF; padding: 2px 6px; border-radius: 5px;
    }
    .bd2-lock { width: 11px; height: 11px; display: inline; vertical-align: -1px; color: #6C7AB0; margin-left: 5px; }

    /* --g is the Overall (or goal) difference, straight from the payload. */
    .bd2-gap { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px; padding-left: 6px; height: calc(5px + var(--g) * 6px); }
    .bd2-gapline { justify-self: center; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(143,246,255,0.42), rgba(143,246,255,0.07)); }
    .bd2-gaplb {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 700; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #8290C4;
    }
    .bd2-gap.is-level .bd2-gapline { background: rgba(143,246,255,0.10); }

    /* A player before their first rated game keeps a quiet shelf instead of
       sitting in the table with a dash where a rank should be. */
    .bd2-prov { opacity: 0.72; }
    .bd2-prov .bd2-rk { font-size: 15px; color: #3E4A7E; }

    /* Wide screens carry the sidebar instead of the dock, so the list stops
       stretching to the window. */
    @media (min-width: 1024px) {
      .bd2, .bd2-pod { max-width: 760px; }
      .bd2 { padding-bottom: 120px; }
    }

    /* ── Team Selection: the ceremony ──────────────────────────────
       Picking the teams is the night's opening ritual, and the room used to
       render it as a settings form. Three moments are marked instead: the
       walk-out, a name being called, and the teams becoming real.

       Two rules hold everywhere below.
       1. Transform and opacity only. Animating a layout property for the
          length of a draft is what crashed Safari on the holo card — see the
          note above .hc::before.
       2. The team's colour arrives as three inline custom properties set from
          _TEAM_STYLES in app.js: `--ts-c` solid, `--ts-c-bd` for borders and
          `--ts-c-bg` for fills, each an 8-digit hex. They are passed already
          mixed rather than derived here with color-mix(), which nothing else in
          this stylesheet uses and which older iPhones do not support — and
          tailwind.css is a committed build artifact, so a colour written as a
          new utility class would render as nothing at all. */

    /* The crest. A team stops being a column of names and becomes a badge. */
    .ts-crest {
      flex: 1; min-width: 0; position: relative; overflow: hidden;
      border: 1px solid var(--ts-c-bd);
      border-radius: 14px; padding: 11px 10px 10px;
      background: linear-gradient(168deg, rgba(255,255,255,0.05), transparent 62%);
    }
    .ts-shield {
      width: 38px; height: 43px; margin: 0 auto 6px;
      display: grid; place-items: center;
      clip-path: polygon(50% 0, 100% 17%, 100% 66%, 50% 100%, 0 66%, 0 17%);
      background: var(--ts-sh-bg, var(--ts-c-bg));
      color: var(--ts-sh-fg, var(--ts-c));
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 22px; line-height: 1;
    }
    .ts-crest-nm {
      text-align: center; margin-bottom: 5px; color: var(--ts-c);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 13.5px; line-height: 1;
      letter-spacing: 0.06em; text-transform: uppercase;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ts-avg {
      text-align: center; color: #8290C4;
      font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    }
    .ts-avg b {
      margin-left: 3px; letter-spacing: 0; font-size: 14px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    /* One pip per shirt: filled for a player already on the team, hollow for a
       place still open. The count is readable without reading a number. */
    .ts-pips { display: flex; justify-content: center; gap: 3px; margin-top: 8px; }
    .ts-pip  { width: 5px; height: 5px; border-radius: 999px; background: var(--ts-edge, var(--ts-c)); }
    .ts-pip-off { background: rgba(255,255,255,0.13); }

    /* A player row, with the team's colour down its edge — from arm's length
       the whole split reads without reading a word. */
    .ts-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 11px 7px 9px; margin-bottom: 6px;
      border-radius: 12px; background: #101838;
      border: 1px solid rgba(255,255,255,0.07);
      position: relative; overflow: hidden;
      transition: border-color 0.15s, transform 0.1s;
    }
    .ts-row::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--ts-edge, var(--ts-c, transparent));
    }
    /* A player's face, laid OVER the letter inside the aura ring, so a broken or
       slow image degrades to the letter with no second code path. Deliberately
       NOT Ron's .bo-avatar-frame: that pins 46px and a 14px letter, which would
       override every avatar size in this room. Same cover/crop treatment though,
       so a face sits the same way here as it does on his board. */
    .dr-av-frame { position: relative; overflow: hidden; }
    .dr-av {
      position: absolute; inset: 0; width: 100%; height: 100%;
      display: block; object-fit: cover; object-position: center 20%;
    }
    /* .dr-av's display:block comes later in the cascade than Tailwind's .hidden,
       so without this a photo that failed to load was never hidden and the
       browser drew its broken-image icon over the letter. */
    .dr-av.hidden { display: none; }
    /* Three or four columns on a phone leave the name about 9px once the aura,
       the rating and the padding have taken theirs, so every first name came out
       as "Y…". Past two teams the row shrinks instead. Nothing is dropped — a
       player scanning for himself looks for his name, so the name gets the room. */
    .ts-row-cmp { gap: 6px; padding: 5px 7px; margin-bottom: 5px; border-radius: 10px; }
    .ts-row-cmp .au-in  { width: 24px; height: 24px; font-size: 10px; }
    .ts-row-cmp .ts-nm  { font-size: 11.5px; }
    .ts-row-cmp .ts-ovr { font-size: 14px; }
    .ts-row-cmp .ts-pick { width: 11px; font-size: 10px; }
    .ts-row-cmp .ts-armband::after { margin-top: -5px; height: 10px; }
    /* Quick Split: a player can be picked up (a mouse at once, a finger after a
       short hold) and dropped into a team column. user-select and touch-callout
       are off so the hold does not select text or open the phone's callout. */
    .ts-drag { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    .ts-drag img { -webkit-user-drag: none; pointer-events: none; }
    .ts-drag-src { opacity: 0.25; }
    .ts-ghost button { display: none; }
    .ts-ghost {
      position: fixed; left: 0; top: 0; z-index: 5000; margin: 0;
      pointer-events: none; transition: none;
      box-shadow: 0 12px 30px rgba(0,0,0,0.6); border-color: rgba(45,226,255,0.7);
    }
    .ts-dragging .ts-drop { transition: background 0.12s, outline-color 0.12s; }
    .ts-drop-on { outline: 2px dashed rgba(45,226,255,0.75); outline-offset: 3px;
                  border-radius: 14px; background: rgba(45,226,255,0.06); }
    .ts-drop-empty {
      padding: 12px 8px; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.3); font-size: 11px; text-align: center; line-height: 1.35;
    }
    .ts-row-tap { cursor: pointer; }
    .ts-row-tap:active { transform: scale(0.985); }
    .ts-row-tap:hover  { border-color: rgba(45,226,255,0.4); }
    .ts-row-dim { opacity: 0.4; }
    .ts-nm  { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #EAF0FF;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* The rating is set in the display numerals so it reads as a rating, but in
       plain paper — NOT the holo foil. At 17px a two-digit number samples such a
       narrow slice of that gradient that each row lands on a different colour,
       which reads as a bug. The foil is kept for the one place it works: the
       called name, at 38px. Colour in this row belongs to the team, not the number. */
    .ts-ovr { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
              font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums;
              color: #EAF0FF; }
    .ts-pick { width: 15px; flex: none; text-align: right; color: #5E6DA5;
               font-family: "Saira Condensed", Oswald, Impact, sans-serif;
               font-size: 11px; font-variant-numeric: tabular-nums; }
    /* The captain's mark is an armband in his OWN team's colour. It used to be a
       fixed amber "C", which is exactly Team B's crest colour — so in every
       two-team draft Team A's captain wore Team B's colour. */
    .ts-armband { position: relative; }
    .ts-armband::after {
      content: ""; position: absolute; right: -1px; top: 50%; margin-top: -6px;
      width: 3px; height: 12px; border-radius: 2px;
      background: var(--ts-c, #2DE2FF);
      box-shadow: 0 0 6px -1px var(--ts-c, #2DE2FF);
    }

    /* The turn clock: a ring that drains. Mirrors the mini-game clock's
       stroke-dashoffset technique so the two clocks behave identically. */
    /* The team letter a Quick Split row cycles through. */
    .ts-badge {
      flex: none; min-width: 24px; text-align: center;
      padding: 3px 7px; border-radius: 8px;
      font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
      color: var(--ts-c); border: 1px solid var(--ts-c-bd); background: var(--ts-c-bg);
    }
    .ts-badge-off { color: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.12);
                    background: rgba(255,255,255,0.04); }

    /* Sized like .au-av, the app's list avatar — the size class rides on .au-in. */
    .ts-au-lg { font-size: 22px; width: 56px; height: 56px; }

    /* The room's headlines. Declared here rather than as Tailwind arbitrary
       sizes (text-[22px] and friends): tailwind.css is a committed build
       artifact, and a size that was not in the source at build time compiles to
       nothing at all — the text would silently render at the inherited size. */
    .ts-head, .ts-head-lg {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;
    }
    .ts-head    { font-size: 22px; }
    .ts-head-lg { font-size: 26px; }
    .ts-lock-label {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em;
    }

    .ts-ring { position: relative; width: 132px; height: 132px; margin: 2px auto 10px; }
    .ts-ring svg { position: absolute; inset: 0; }
    .ts-ring-mid { position: absolute; inset: 0; display: grid; place-items: center; }
    .ts-ring-d {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 36px; line-height: 1; color: #EAF0FF; font-variant-numeric: tabular-nums;
    }

    /* ── Act 0: the walk-out ── */
    .ts-tunnel {
      position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
      background: #04060F; text-align: center; padding: 24px;
    }
    .ts-tunnel-body { animation: ts-call-in 0.55s cubic-bezier(0.16,0.9,0.3,1) 0.34s both; }
    .ts-mark {
      width: 26px; height: 30px; margin: 0 auto 11px;
      clip-path: polygon(50% 0, 100% 17%, 100% 66%, 50% 100%, 0 66%, 0 17%);
      background: linear-gradient(100deg, #2DE2FF, #6C4BFF 52%, #B026FF);
      filter: drop-shadow(0 0 10px rgba(45,226,255,0.4));
    }
    .ts-tunnel h4 {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 29px; line-height: 1; margin: 0 0 9px; color: #EAF0FF;
      text-transform: uppercase; letter-spacing: 0.16em;
    }
    .ts-line {
      display: block; width: 76%; height: 1px; margin: 0 auto 10px;
      transform-origin: 50% 50%;
      background: linear-gradient(90deg, transparent, #2DE2FF, transparent);
      animation: ts-seal 0.6s cubic-bezier(0.16,0.9,0.3,1) both;
    }
    .ts-tunnel-sub {
      font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: #8290C4;
    }
    .ts-tunnel-leaving { animation: ts-fade-out 0.34s ease forwards; }

    /* ── Act II: the called name ──
       Mounted on the room overlay, never inside #dr-body — a poll landing
       mid-animation replaces that element's innerHTML wholesale. */
    .ts-call {
      position: absolute; inset: 0; z-index: 14; display: grid; place-items: center;
      background: rgba(4,6,15,0.93); text-align: center; padding: 24px;
      overflow: hidden;
    }
    .ts-call .au { display: inline-grid; }
    .ts-call-body { animation: ts-call-in 0.62s cubic-bezier(0.16,0.9,0.3,1) both; }
    .ts-call-kick {
      font-size: 9.5px; font-weight: 800; letter-spacing: 0.2em;
      text-transform: uppercase; color: #8290C4; margin-bottom: 9px;
    }
    .ts-call-nm {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 38px; line-height: 0.95; margin: 10px 0 7px;
      text-transform: uppercase; letter-spacing: 0.01em;
    }
    .ts-call-to { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    /* One highlight crosses the card, once. Same transform-only construction as
       the holo card's foil sweep. */
    .ts-call-sweep {
      position: absolute; top: -60%; bottom: -60%; left: -60%; width: 46%;
      z-index: 2; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02) 30%,
                  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.02) 70%, transparent);
      animation: ts-sweep 1.05s cubic-bezier(0.4,0,0.5,1) 0.28s both;
    }
    .ts-call-leaving { animation: ts-fade-out 0.28s ease forwards; }

    /* ── Act III: the reveal ──
       Each element carries its own delay as --d, so the stagger follows the
       real number of teams and players instead of hard-coded nth-child rules. */
    .ts-slide-l { animation: ts-slide-l 0.5s cubic-bezier(0.16,0.9,0.3,1) both; }
    .ts-slide-r { animation: ts-slide-r 0.5s cubic-bezier(0.16,0.9,0.3,1) both; }
    .ts-seal-line {
      height: 1px; margin: 0 0 12px; transform-origin: 50% 50%;
      background: linear-gradient(90deg, transparent, rgba(45,226,255,0.55), transparent);
      animation: ts-seal 0.55s cubic-bezier(0.16,0.9,0.3,1) 0.42s both;
    }
    .ts-rise { animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) var(--d, 0s) both; }

    @keyframes ts-call-in { from { opacity: 0; transform: translateY(10px) scale(0.97); }
                            to   { opacity: 1; transform: none; } }
    @keyframes ts-sweep   { from { transform: rotate(16deg) translateX(0%); }
                            to   { transform: rotate(16deg) translateX(360%); } }
    @keyframes ts-seal    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes ts-rise    { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    @keyframes ts-slide-l { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
    @keyframes ts-slide-r { from { opacity: 0; transform: translateX(22px); }  to { opacity: 1; transform: none; } }
    @keyframes ts-fade-out { to { opacity: 0; } }

    /* ── The night, between mini-games ──────────────────────────────────────
       Same grammar as the team sheet above it: display numerals, a hairline
       instead of a box, and the team's own colour carrying identity. Everything
       here is presentation — no rule, count or control changed. */
    .sn-bar {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 2px 9px; margin-top: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .sn-dot {
      width: 7px; height: 7px; border-radius: 50%; flex: none;
      background: #FF4D5E; box-shadow: 0 0 8px -1px #FF4D5E;
      animation: sn-pulse 1.6s ease-in-out infinite;
    }
    .sn-live {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #EAF0FF;
    }
    .sn-live em { font-style: normal; color: #8290C4; }
    /* One pip per mini-game actually played, plus the one being set up. There is
       deliberately no "of 5" — a night's length is not fixed when it starts. */
    .sn-pips { margin-left: auto; display: flex; gap: 4px; align-items: center; }
    .sn-pip  { width: 13px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); }
    .sn-pip-done { background: #2DE2FF; box-shadow: 0 0 6px -2px #2DE2FF; }
    .sn-pip-now  { background: #B026FF; box-shadow: 0 0 6px -2px #B026FF; }

    .sn-rules { display: flex; gap: 6px; margin-top: 12px; }
    .sn-tile {
      flex: 1; min-width: 0; text-align: center; padding: 8px 4px;
      border-radius: 12px; background: #101838; border: 1px solid rgba(255,255,255,0.07);
    }
    .sn-tile-k {
      display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em;
      text-transform: uppercase; color: #5E6DA5; margin-bottom: 3px;
    }
    .sn-tile-v {
      display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 15px; line-height: 1; color: #EAF0FF;
      font-variant-numeric: tabular-nums;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sn-tie {
      margin-top: 7px; padding-top: 7px; font-size: 10.5px; color: #8290C4;
      border-top: 1px solid rgba(255,255,255,0.06); display: flex;
      justify-content: space-between; gap: 10px;
    }
    .sn-tie b { color: #EAF0FF; font-weight: 700; text-align: right; }

    .sn-head {
      display: flex; align-items: baseline; justify-content: space-between;
      margin: 18px 0 8px;
    }
    .sn-head-k {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 12.5px; letter-spacing: 0.15em; text-transform: uppercase; color: #EAF0FF;
    }
    .sn-head-s { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
                 text-transform: uppercase; color: #5E6DA5; }

    /* The table keeps its columns — they are real data — but each row now wears
       its team's colour down the edge, exactly like a row on the team sheet. */
    /* A league table carries goal columns, so it asks for 22rem and scrolls
       sideways rather than squash (--sn-min, set per table). */
    .sn-tbl { width: 100%; border-collapse: collapse; min-width: var(--sn-min, 0); }
    .sn-tbl th {
      font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      color: #5E6DA5; padding: 0 4px 7px; text-align: center;
    }
    .sn-tbl th.sn-l { text-align: left; padding-left: 11px; }
    .sn-tbl td { padding: 9px 4px; text-align: center; font-variant-numeric: tabular-nums;
                 font-size: 12px; color: #8290C4; }
    .sn-tbl tbody tr { background: #101838; }
    .sn-tbl tbody tr td:first-child {
      border-left: 3px solid var(--ts-c, transparent);
      border-top-left-radius: 10px; border-bottom-left-radius: 10px;
      padding-left: 8px; width: 26px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 13px; color: #5E6DA5;
    }
    .sn-tbl tbody tr td:last-child {
      border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-right: 11px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 16px; color: #EAF0FF;
    }
    .sn-tbl tbody tr.sn-lead td:last-child { color: #2DE2FF; }
    .sn-tbl .sn-team { text-align: left; color: #EAF0FF; font-size: 12.5px; font-weight: 600;
                       white-space: nowrap; }
    .sn-tbl .sn-you  { color: #2DE2FF; font-weight: 400; opacity: 0.75; }
    /* The gap between rows is a spacer row, so it must not inherit the row's
       background or its cell padding — otherwise it reads as a fourth team. */
    .sn-tbl tbody tr.sn-sp { background: transparent; height: 6px; }
    .sn-tbl tbody tr.sn-sp td { padding: 0; border: 0; }
    .sn-crest {
      display: inline-flex; align-items: center; justify-content: center;
      width: 19px; height: 19px; margin-right: 7px; vertical-align: -4px;
      border-radius: 6px; font-size: 10px; font-weight: 800;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      color: var(--ts-c, #EAF0FF); background: var(--ts-c-bg, rgba(255,255,255,0.06));
      border: 1px solid var(--ts-c-bd, rgba(255,255,255,0.12));
    }

    .sn-panel {
      margin-top: 14px; padding: 12px; border-radius: 16px;
      background: rgba(16,24,56,0.6); border: 1px solid rgba(255,255,255,0.07);
    }

    @keyframes sn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

    @media (prefers-reduced-motion: reduce) {
      .sn-dot { animation: none; }
      .hc::before { animation: none; transform: rotate(16deg) translateX(0%); }
      .au-legend::before, .au-legend::after, .au-allstar .au-in { animation: none; }
      .au-allstar .au-in { box-shadow: 0 0 0 1px rgba(45,226,255,0.6), 0 0 14px -3px rgba(45,226,255,0.9); }
      /* The ceremony collapses to plain state changes: every beat still shows
         its finished composition, nothing moves, nothing is lost. */
      .ts-tunnel-body, .ts-call-body, .ts-call-sweep, .ts-slide-l, .ts-slide-r,
      .ts-rise, .ts-line, .ts-seal-line, .ts-tunnel-leaving, .ts-call-leaving {
        animation: none;
      }
      .ts-call-sweep { display: none; }
    }

    /* ── Rep ceremony ──────────────────────────────────────────────────────
       Two screens for the aura's own escalation (docs/rep-ceremony/). Ceremony
       1 fires for a level inside a tier -- light, because the ring itself did
       not change. Ceremony 2 fires for one of the three tier crossings -- the
       ceremony IS the ring changing, watched, and the new tier's own motion
       ignites for the first time. Rep still grants nothing (app.js:5266 /
       app.css:1791) -- this only shows the aura. Reuses ts-call-in / ts-sweep /
       ts-seal / ts-rise from the Captain's Room ceremony above; `.rc-tier`
       modifiers carry the heavier ceremony's own, later timing. */
    .rc-stage {
      position: relative; height: 100%; overflow: hidden; background: #04060F;
      display: grid; place-items: center; text-align: center; padding: 24px;
    }
    .rc-body { animation: ts-call-in 0.55s cubic-bezier(0.16,0.9,0.3,1) 0.12s both; }
    .rc-body.rc-tier { animation-duration: 0.62s; animation-delay: 0.18s; }
    .rc-sweep {
      position: absolute; top: -60%; bottom: -60%; left: -60%; width: 46%; z-index: 6;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02) 30%,
                  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.02) 70%, transparent);
      animation: ts-sweep 1.05s cubic-bezier(0.4,0,0.5,1) 0.62s both;
    }
    .rc-kick {
      font-size: 9.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
      color: #8290C4; margin: 0 0 16px;
      animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 0.24s both;
    }
    .rc-kick.rc-tier { animation-delay: 0.3s; }
    /* The aura swap: old drains, new arrives with its own leaving ring. */
    .rc-au { position: relative; display: inline-grid; width: 96px; height: 96px; }
    .rc-old { animation: rc-drain 0.34s cubic-bezier(0.16,0.9,0.3,1) 0.38s both; }
    @keyframes rc-drain { to { opacity: 0; transform: scale(0.82); } }
    .rc-new { animation: ts-call-in 0.5s cubic-bezier(0.16,0.9,0.3,1) 0.82s both; }
    .rc-ring {
      position: absolute; inset: -2px; border-radius: 12px; z-index: 5; pointer-events: none;
      border: 1.5px solid;
      animation: rc-ring 0.55s cubic-bezier(0.16,0.9,0.3,1) 0.5s both;
    }
    .rc-ring.rc-tier { animation-duration: 0.62s; animation-delay: 0.86s; }
    @keyframes rc-ring { from { opacity: 0.8; transform: scale(0.9); } to { opacity: 0; transform: scale(1.8); } }
    /* The payoff beat: the new tier's own motion ignites -- Legend's first
       turn runs fast, then settles into the permanent 3.4s everyone else sees. */
    .rc-ignite.au-legend::before {
      animation: au-spin 0.95s linear 1.05s 1, au-spin 3.4s linear 2s infinite;
    }
    .rc-name {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800;
      font-size: 34px; line-height: 0.95; margin: 18px 0 6px; text-transform: uppercase;
      animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 0.6s both;
    }
    .rc-name.rc-tier { font-size: 38px; margin: 18px 0 7px; letter-spacing: 0.01em; animation-delay: 1.42s; }
    /* Ceremony 1: the numeral is the subject, so the "Level" line itself does
       not fade in -- only the swapping digit does. Ceremony 2 (`.rc-tier`)
       shows a plain "Level 1" with no swap, so the whole line rises instead. */
    .rc-lvl {
      font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #8290C4; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .rc-lvl.rc-tier { animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 1.6s both; }
    .rc-lvl .n {
      display: inline-block; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-weight: 800; font-size: 19px; letter-spacing: 0;
    }
    .rc-out { position: absolute; left: 0; top: -10px; animation: rc-lv-out 0.3s cubic-bezier(0.16,0.9,0.3,1) 0.62s both; }
    .rc-inn { position: absolute; left: 0; top: -10px; animation: rc-lv-in 0.34s cubic-bezier(0.16,0.9,0.3,1) 0.84s both; }
    @keyframes rc-lv-out { to { opacity: 0; transform: translateY(-9px); } }
    @keyframes rc-lv-in  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    /* Five pips: one tier, five levels. The new one fills left to right. */
    .rc-pips {
      display: flex; gap: 6px; justify-content: center; margin: 16px 0 0;
      animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 0.7s both;
    }
    .rc-pip { width: 26px; height: 4px; border-radius: 999px; background: rgba(34,48,107,0.9); overflow: hidden; }
    .rc-pip > i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); }
    .rc-pip.rc-done > i { transform: scaleX(1); }
    .rc-pip.rc-now > i { animation: rc-pip-fill 0.42s cubic-bezier(0.16,0.9,0.3,1) 0.95s both; }
    @keyframes rc-pip-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .rc-seal {
      display: block; width: 56%; height: 1px; margin: 18px auto 0; transform-origin: 50% 50%;
      animation: ts-seal 0.5s cubic-bezier(0.16,0.9,0.3,1) 1.15s both;
    }
    .rc-seal.rc-tier { width: 64%; margin: 16px auto 0; animation-duration: 0.55s; animation-delay: 1.3s; }
    .rc-copy {
      font-size: 11.5px; line-height: 1.6; color: #8290C4; margin: 13px auto 0; max-width: 230px;
      animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 1.32s both;
    }
    .rc-copy.rc-tier { max-width: 250px; margin: 14px auto 0; animation-delay: 1.85s; }
    .rc-cta {
      margin-top: 18px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      background: transparent; border: 1px solid #22306B; color: #8290C4; border-radius: 9px; padding: 10px 20px;
      animation: ts-rise 0.38s cubic-bezier(0.16,0.9,0.3,1) 1.5s both;
    }
    .rc-cta.rc-tier { margin-top: 20px; animation-delay: 2.05s; }

    @media (prefers-reduced-motion: reduce) {
      /* Same rule as the Captain's Room ceremony above: collapse to the
         finished composition, every beat still visible, nothing moving. */
      .rc-body, .rc-sweep, .rc-kick, .rc-name, .rc-lvl, .rc-seal, .rc-copy, .rc-cta,
      .rc-pips, .rc-ring, .rc-out, .rc-inn, .rc-old, .rc-new {
        animation: none;
      }
      .rc-pip.rc-now > i { animation: none; transform: scaleX(1); }
      .rc-sweep, .rc-ring, .rc-old, .rc-out { display: none; }
      .rc-ignite.au-legend::before { animation: none; }
    }

    /* ── Rep Ladder screen ─────────────────────────────────────────────────
       The read-only screen behind a tap on the rep line (Home, or a player's
       own card). No beats here -- layout, type scale and spacing lifted from
       docs/rep-ceremony/live/rep-ladder-screen.html; every number in it is
       still computed live from REP_STEPS / _repTier(), never copied out of
       that file's sample player. */
    .rl-stage { max-width: 480px; margin: 0 auto; padding: 26px 18px 48px; box-sizing: border-box; }
    .rl-header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
    .rl-title {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 700;
      font-size: 18px; letter-spacing: 0.01em; color: #EAF0FF;
    }
    .rl-closebtn {
      width: 32px; height: 32px; border-radius: 10px; flex: none;
      background: #101838; border: 1px solid #22306B; color: #8290C4;
      display: grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer;
    }
    .rl-closebtn:active { transform: scale(0.94); }

    .rl-status { background: #101838; border: 1px solid #22306B; border-radius: 20px; padding: 20px; margin-top: 16px; }
    .rl-status-top { display: flex; align-items: center; gap: 16px; }
    .rl-status-text { min-width: 0; }
    .rl-status-name {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 700; font-size: 21px;
    }
    .rl-status-rep { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #8290C4; }
    .rl-bar { margin-top: 16px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
    .rl-barfill { display: block; height: 100%; background: linear-gradient(90deg, #2DE2FF, #B026FF); }
    .rl-next { margin: 8px 0 0; font-size: 11px; font-weight: 600; color: #6C7AB0; }
    .rl-blurb { margin: 16px 4px 4px; font-size: 12.5px; line-height: 1.6; color: #8290C4; }

    .rl-ladder { margin-top: 14px; }
    .rl-section { display: flex; align-items: center; gap: 8px; padding: 18px 4px 6px; }
    .rl-section-icon { width: 13px; height: 13px; flex: none; }
    .rl-section-name {
      margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    }
    .rl-section-rule { flex: 1; height: 1px; background: rgba(255,255,255,.07); }

    .rl-row { display: flex; align-items: center; gap: 14px; padding: 9px 4px; }
    .rl-rowtext { flex: 1; min-width: 0; }
    .rl-rowname {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 700;
      font-size: 13.5px; color: #EAF0FF;
    }
    .rl-rowname.rl-muted { color: #8290C4; }
    .rl-rowsub { margin: 1px 0 0; font-size: 10.5px; font-weight: 500; color: #4A5488; }
    .rl-rowsub.rl-here { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2DE2FF; }
    .rl-current-name { font-size: 14.5px; }

    /* The current row's highlight is the app's own accent pair, not a tier
       colour -- copied verbatim from the design file. */
    .rl-row.rl-current {
      margin: 4px -12px; padding: 12px; border-radius: 14px;
      background: linear-gradient(100deg, rgba(45,226,255,.12), rgba(176,38,255,.10));
      border: 1px solid rgba(45,226,255,.4);
    }
    /* Whole row dimmed, same as the design file's .lk wrapper. */
    .rl-row.rl-locked { opacity: 0.5; }
    .rl-icon-locked {
      width: 30px; height: 30px; border-radius: 9px; flex: none;
      background: #0E1533; border: 1px solid #182248; display: grid; place-items: center;
    }
    /* The four rep marks bake their colour into the SVG (Part A) -- `color`
       cannot dim them, so grayscale is the only lever a locked row has. */
    .rl-icon-locked svg { width: 17px; height: 17px; filter: grayscale(1) brightness(.9); }

    .rl-check {
      width: 20px; height: 20px; border-radius: 999px; flex: none;
      background: rgba(45,226,255,.14); color: #2DE2FF; display: grid; place-items: center;
    }
    .rl-check svg { width: 11px; height: 11px; }
    .rl-lock { color: #4A5488; flex: none; display: grid; place-items: center; }
    .rl-lock svg { width: 14px; height: 14px; }

    .rl-footer {
      margin-top: 22px; padding: 18px; border-radius: 16px; text-align: center;
      background: linear-gradient(100deg, rgba(45,226,255,.09), rgba(176,38,255,.09));
      border: 1px solid #22306B;
    }
    .rl-footer-line { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: #EAF0FF; }
    .rl-cta {
      display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px;
      border-radius: 12px; background: linear-gradient(100deg, #2DE2FF, #6C4BFF 52%, #B026FF);
      color: #070B1F; font-size: 13px; font-weight: 700; border: 0; cursor: pointer;
      font-family: inherit;
    }
    .rl-cta:active { transform: scale(0.97); }
    /* Read-only, no beats of its own to collapse under prefers-reduced-motion.
       The one thing on this screen that moves is the current row's real aura
       (breathing All-Star, spinning Legend) -- the existing global rule above
       (`.au-legend::before, .au-legend::after, .au-allstar .au-in { animation:
       none; }`) already stills that, here exactly as everywhere else. */

    /* ════════════════════════════════════════════════════════════════
       THE SESSION POST
       A finished night rendered as a post rather than a report. The
       SCORE is the hero and the victory photo is the ground it stands
       on -- the way a broadcast lays the final score over the
       celebration shot. Dan's call (2026-09-05): photo-first was
       rejected, because SportOut is a competition with a social layer
       and not Instagram with a football skin.

       Every rule here is plain CSS on purpose. These class names are
       assembled in app.js, and tailwind.css only contains the classes
       its scanner finds written out in full -- a utility invented here
       would silently render as nothing, which is the trap CLAUDE.md
       already records twice.
       ════════════════════════════════════════════════════════════════ */

    /* #ms-body carries px-4, and the slab has to reach the screen edge
       or the photograph reads as a thumbnail instead of a backdrop. */
    .sp-bleed { margin-left: -1rem; margin-right: -1rem; }

    .sp-slab {
      position: relative; aspect-ratio: 16 / 9; overflow: hidden;
      background: var(--so-surface-raised);
    }
    /* A real photograph earns the taller crop; the woven no-photo ground does
       not, or the post opens on 290px of empty net. */
    .sp-slab.sp-has-photo { aspect-ratio: 4 / 3; }
    .sp-slab-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    /* No photo is not an empty state -- the goal net, doubled in the two
       accent colours, fills the same slot so the layout never collapses. */
    .sp-slab-weave {
      position: absolute; inset: 0; background-color: #0c1330;
      background-image:
        repeating-linear-gradient(45deg,  rgba(45,226,255,0.13) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,0.13) 0 1px, transparent 1px 9px);
    }
    /* Dark at the top for the eyebrow, dark at the foot for the score,
       and open through the middle so faces survive. */
    .sp-slab-scrim {
      position: absolute; inset: 0;
      background: linear-gradient(178deg,
        rgba(7,11,31,0.72) 0%, rgba(7,11,31,0.18) 34%,
        rgba(7,11,31,0.55) 62%, rgba(7,11,31,0.96) 100%);
    }
    /* The layers over the photos let a swipe through to the gallery below. */
    .sp-slab-scrim, .sp-slab-body { pointer-events: none; }
    .sp-slab-body {
      position: absolute; inset: 0; padding: 14px 16px;
      display: flex; flex-direction: column;
    }
    /* The date and pitch share one row with the Verified seal: the pitch name
       shortens before the seal and never sits under it (Ron, 2026-10-04). */
    .sp-toprow { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .sp-toprow .sp-seal { flex: none; margin-left: auto; }
    .sp-eyebrow {
      flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(234,240,255,0.86);
    }
    /* Up to five photos, swiped. Each fills the slab; the snap keeps one whole. */
    .sp-gallery {
      position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .sp-gallery::-webkit-scrollbar { display: none; }
    .sp-gallery .sp-slab-img { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
    /* Under the photo: which photo, who took it, and the one button that opens
       everything a player can do with the photos. */
    .sp-photostrip {
      display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 16px;
      border-bottom: 1px solid rgba(34,48,107,0.55);
    }
    .sp-dots { display: inline-flex; gap: 4px; flex: none; }
    .sp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(234,240,255,0.25); transition: background .2s, width .2s; }
    .sp-dots i.on { width: 14px; border-radius: 3px; background: var(--so-volt); }
    .sp-ps-note { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--so-muted); }
    .sp-ps-btn {
      flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
      border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; color: var(--so-paper);
      background: rgba(45,226,255,0.08); border: 1px solid rgba(45,226,255,0.38);
    }
    .sp-ps-btn svg { width: 15px; height: 15px; fill: none; stroke: var(--so-volt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .sp-ps-btn:active { transform: scale(0.96); }
    .sp-ps-btn:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    [data-night-photo-add]:disabled { opacity: .55; cursor: wait; }
    .sp-ps-add { color: #070b1f; border: 0; background: linear-gradient(100deg, #2de2ff, #6c4bff 52%, #b026ff); }
    /* The photo list (openNightPhotos), in the Edit-session sheet's frame. */
    #np-sheet { z-index: 260; }
    #np-sheet.hidden { display: none; }
    .np-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .np-row { display: flex; gap: 12px; padding: 8px; border-radius: 14px; background: #101838; border: 1px solid rgba(130,144,196,.2); }
    .np-thumb { width: 84px; height: 84px; flex: none; border-radius: 10px; object-fit: cover; background: #17224A; }
    .np-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .np-title { margin: 0; color: #EAF0FF; font-size: 13px; font-weight: 800; }
    .np-row:first-child .np-title { color: var(--so-volt); }
    .np-by { margin: 1px 0 0; overflow: hidden; color: #6473A7; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
    .np-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
    .np-tool {
      display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 9px;
      color: #C3CCEB; background: rgba(7,11,31,.5); border: 1px solid rgba(130,144,196,.25);
      font-size: 11.5px; font-weight: 750; text-decoration: none;
    }
    .np-danger { color: #fca5a5; border-color: rgba(239,68,68,.35); }
    .np-order { display: inline-flex; align-items: center; gap: 4px; }
    .np-move { width: 32px; height: 32px; border-radius: 9px; color: var(--so-volt); background: rgba(45,226,255,.08); border: 1px solid rgba(45,226,255,.3); font-size: 18px; font-weight: 800; line-height: 1; }
    .np-move:disabled { opacity: .3; }
    .np-tool:focus-visible, .np-move:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .sp-result { margin-top: auto; display: flex; align-items: flex-end; gap: 14px; }
    .sp-team-wrap { flex: 1; min-width: 0; }
    .sp-won {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--so-volt); margin-bottom: 2px;
    }
    /* Solid paper, not the foil. Two foil elements side by side fight each
       other; the points number is the one thing on this slab that shines. */
    .sp-team {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 44px; line-height: 0.86; text-transform: uppercase; font-weight: 700;
      margin: 0; letter-spacing: 0.005em; color: var(--so-paper);
      text-shadow: 0 2px 18px rgba(7,11,31,0.9), 0 1px 3px rgba(7,11,31,0.8);
      overflow-wrap: anywhere;
    }
    .sp-pts { text-align: right; flex: none; padding-bottom: 2px; }
    .sp-pts-n {
      display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 50px; line-height: 0.8; font-weight: 800;
      background: linear-gradient(103deg,#8FF6FF 0%,#2DE2FF 26%,#FFFFFF 43%,
                  #C77BFF 62%,#B026FF 82%,#7FEFFF 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .sp-pts-l {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--so-muted);
    }
    .sp-sub {
      margin-top: 9px; font-size: 12.5px; font-weight: 500;
      color: rgba(234,240,255,0.72);
    }
    .sp-sub em { font-style: normal; color: var(--so-muted); }

    .sp-who {
      margin: 0; padding: 10px 14px 0; font-size: 12.5px; line-height: 1.5;
      color: rgba(234,240,255,0.72);
    }
    .sp-who b { color: var(--so-paper); font-weight: 700; }

    /* ── The caption ──────────────────────────────────────────────────
       Written by the app from the night's own goals, never typed by a
       player. A post that waits for someone to write a caption stays
       empty; a post that arrives with one is finished at the whistle. */
    .sp-caption { padding: 14px 16px 4px; display: flex; gap: 9px; align-items: flex-start; }
    .sp-caption-ico { flex: none; font-size: 15px; line-height: 1.35; }
    .sp-caption p {
      margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--so-paper);
    }
    .sp-caption b {
      font-weight: 700;
      background: linear-gradient(103deg,#8FF6FF 0%,#2DE2FF 26%,#FFFFFF 43%,
                  #C77BFF 62%,#B026FF 82%,#7FEFFF 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .sp-squad { padding: 11px 16px 14px; display: flex; align-items: center; gap: 10px; }
    .sp-faces { display: flex; }
    .sp-face {
      width: 27px; height: 27px; border-radius: 50%; margin-left: -6px; position: relative;
      border: 1.8px solid var(--so-surface-raised);
      display: grid; place-items: center;
      font-size: 10.5px; font-weight: 700; color: #070b1f;
    }
    .sp-face:first-child { margin-left: 0; }
    .sp-face.sp-more { background: var(--so-surface); color: var(--so-muted); font-size: 9.5px; }
    .sp-squad-meta { font-size: 12px; color: var(--so-muted); font-weight: 500; }

    /* ── The honours band ──────────────────────────────────────────────
       A badge is a rare EVENT, not a stat, so it does not sit as a chip
       beside the numbers -- Dan, 2026-09-05, after a first pass that
       shrank four badges into four grey text pills: "אירוע בדג' אמור
       להיות יוקרתי ולא שגרתי". It gets its own full-bleed band with its
       own ground and its own light, and on most nights it is simply not
       there. That absence is what makes its presence worth something.

       The medallion, its silhouette and all four level frames are reused
       from .bd-* above rather than redrawn, so the post can never show a
       level-4 badge wearing a level-1 frame. Only the SIZE is overridden:
       40px is right for five slots on a player card and far too small for
       the one moment in the app that is meant to feel like a ceremony. */
    .sp-hon {
      position: relative; margin: 20px 0 6px; padding: 24px 16px 26px;
      border-top: 1px solid rgba(45,226,255,0.22);
      border-bottom: 1px solid rgba(45,226,255,0.22);
      background:
        radial-gradient(122% 80% at 50% -10%, rgba(45,226,255,0.17), transparent 62%),
        radial-gradient(94% 62% at 50% 110%, rgba(176,38,255,0.14), transparent 60%),
        #0a1030;
      overflow: hidden;
    }
    /* The goal net, faded out downwards so the light reads as coming from
       above the medallions rather than lying flat behind them. */
    .sp-hon::before {
      content: ""; position: absolute; inset: 0; opacity: 0.45;
      background-image:
        repeating-linear-gradient(45deg,  rgba(45,226,255,0.13) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,0.13) 0 1px, transparent 1px 9px);
      -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%);
              mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%);
    }
    .sp-hon-lab {
      position: relative; text-align: center; margin: 0 0 22px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--so-volt);
    }
    .sp-hon-grid {
      position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 10px;
    }
    .sp-hon-one { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .sp-hon .bd-hex { width: 62px; height: 70px; padding: 2px; }
    .sp-hon .bd-in svg { width: 36px; height: 36px; display: block; }
    .sp-hon-name {
      margin: 12px 0 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 16.5px; letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--so-paper); font-weight: 700; line-height: 1;
    }
    /* Not a count -- Dan cut the "Your 7th" line. This marks the one thing a
       count was carrying that mattered: the first time, ever. */
    .sp-hon-first {
      display: inline-block; margin-top: 10px; font-size: 8.5px; font-weight: 800;
      letter-spacing: 0.17em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
      border: 1px solid rgba(176,38,255,0.62); background: rgba(176,38,255,0.17); color: #e7c7ff;
    }
    /* One badge is the normal night and four is a haul, so the band scales to
       the event instead of shrinking it into a row. */
    .sp-hon-solo { padding: 30px 20px 34px; }
    .sp-hon-solo .sp-hon-grid { grid-template-columns: 1fr; }
    .sp-hon-solo .bd-hex { width: 96px; height: 108px; padding: 2.5px; }
    .sp-hon-solo .bd-in svg { width: 56px; height: 56px; }
    .sp-hon-solo .sp-hon-name { font-size: 27px; margin-top: 16px; }
    .sp-hon-rule {
      position: relative; margin: 13px auto 0; max-width: 252px;
      font-size: 12.5px; line-height: 1.55; color: #9dabda; text-align: center;
    }

    /* ── The wall of nights ────────────────────────────────────────────
       Home's lower half used to be empty below the rep bar. It now holds
       the finished nights of the people this player follows -- the one
       surface that makes a night visible to anyone who was not on the
       pitch, and the reason to open the app on a Tuesday.

       The card reuses the post's own slab, ribbon and caption. A feed
       card and the night it opens are the same object at two sizes, not
       two designs that have to be kept in step by hand. */
    .sp-feed-head {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 2px 2px 10px;
    }
    .sp-feed-head h3 {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--so-paper); font-weight: 700;
    }
    .sp-feed-head span { font-size: 11px; color: var(--so-muted); }
    .sp-card {
      display: block; width: 100%; text-align: left; padding: 0; margin: 0 0 14px;
      border: 1px solid var(--so-edge); border-radius: 20px; overflow: hidden;
      background: var(--so-surface-raised); color: inherit; font: inherit;
      cursor: default; transition: border-color .15s ease, transform .12s ease;
    }
    .sp-card:hover { border-color: rgba(45,226,255,0.4); }
    .sp-card:active { transform: scale(0.994); }
    .sp-card:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    /* Shorter than the post's own slab: a card in a scrolling list has to show
       the next card's top edge, or the wall reads as one screen per night. */
    .sp-card .sp-slab { aspect-ratio: 1.8 / 1; }
    .sp-card .sp-seal { padding: 3px 10px 3px 4px; font-size: 11px; }
    .sp-card .sp-seal i { width: 18px; height: 18px; }
    .sp-card .sp-team { font-size: 38px; }
    .sp-card .sp-pts-n { font-size: 42px; }
    .sp-card .sp-caption { padding: 13px 15px 2px; }
    .sp-card .sp-caption p { font-size: 14px; }
    .sp-card .sp-squad { padding: 10px 15px 13px; }
    .sp-card-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 15px; border-top: 1px solid rgba(34,48,107,0.55);
      background: rgba(11,18,48,0.55);
    }
    .sp-card-foot .sp-you {
      font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--so-volt); border: 1px solid rgba(45,226,255,0.4);
      background: rgba(45,226,255,0.1); border-radius: 20px; padding: 3px 9px;
    }
    .sp-card-foot .sp-open {
      font: inherit; font-size: 12px; font-weight: 600; color: var(--so-volt);
      background: none; border: 0; padding: 6px 0 6px 10px; cursor: pointer;
    }
    .sp-card-foot .sp-open:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; border-radius: 8px; }
    /* "Confirm this night?" runs across the top of a card whose result is waiting
       on this player. It is a label inside the card's own open button, so tapping
       it opens the night on the question. Volt and flux only: gold is Legend's. */
    .sp-ask {
      display: flex; align-items: center; gap: 10px; padding: 10px 15px;
      background: linear-gradient(90deg, rgba(45, 226, 255, 0.24), rgba(176, 38, 255, 0.24));
      border-bottom: 1px solid rgba(45, 226, 255, 0.5);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 14px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--so-paper);
    }
    .sp-ask-dot {
      flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--so-volt);
      box-shadow: 0 0 10px 2px rgba(45, 226, 255, 0.85); animation: sp-ask-pulse 1.8s ease-in-out infinite;
    }
    .sp-ask i { margin-left: auto; font-style: normal; font-size: 20px; line-height: 1; color: var(--so-volt); }
    @keyframes sp-ask-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
    /* ── Verified nights, and the vote that earns it ─────────────────────────
       A night enough of its players confirmed has to stand out in a feed of
       ordinary nights, the way a blue tick does. It wears the holo foil round
       its whole frame and a seal on its photo. The foil is volt and flux only:
       gold belongs to Legend and nothing else. */
    .sp-seal {
      position: relative; z-index: 2;
      display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px;
      background: rgba(7, 11, 31, 0.74); border: 1px solid rgba(45, 226, 255, 0.6);
      box-shadow: 0 0 16px -4px rgba(45, 226, 255, 0.7);
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--so-paper);
    }
    .sp-seal i, .sp-tick i {
      display: grid; place-items: center; border-radius: 50%;
      background: linear-gradient(135deg, #2DE2FF, #B026FF);
    }
    .sp-seal i { width: 22px; height: 22px; box-shadow: 0 0 10px rgba(45, 226, 255, 0.8); }
    .sp-seal svg, .sp-tick svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .sp-tick {
      display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px;
      font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--so-volt); border: 1px solid rgba(45, 226, 255, 0.45); background: rgba(45, 226, 255, 0.08);
    }
    .sp-tick i { width: 15px; height: 15px; }
    .sp-bleed.sp-verified .sp-slab {
      box-shadow: inset 0 0 0 1.5px rgba(45, 226, 255, 0.6), inset 0 -70px 70px -50px rgba(176, 38, 255, 0.35);
    }
    .sp-card.sp-verified {
      border: 1.5px solid transparent;
      background:
        linear-gradient(var(--so-surface-raised), var(--so-surface-raised)) padding-box,
        linear-gradient(120deg, #2DE2FF, #B026FF 38%, #2DE2FF 68%, #FFFFFF) border-box;
      box-shadow: 0 0 24px -8px rgba(45, 226, 255, 0.6), 0 0 44px -14px rgba(176, 38, 255, 0.5);
    }
    .sp-verified .sp-slab::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.1) 48%, rgba(45, 226, 255, 0.14) 53%, transparent 64%);
      transform: translateX(-110%); animation: sp-foil 6s ease-in-out infinite;
    }
    @keyframes sp-foil { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

    /* The question sits on top of the post: the one thing a player who was
       there is asked, so it glows and it cannot be scrolled past by accident. */
    .nv-card {
      margin: 14px 0 6px; padding: 18px 16px 16px; border-radius: 20px; text-align: center;
      background: linear-gradient(160deg, rgba(45, 226, 255, 0.10), rgba(176, 38, 255, 0.10) 60%, rgba(11, 18, 48, 0.92));
      border: 1px solid rgba(45, 226, 255, 0.55);
      animation: nv-glow 2.8s ease-in-out infinite;
    }
    @keyframes nv-glow {
      0%, 100% { box-shadow: 0 0 22px -8px rgba(45, 226, 255, 0.45), 0 0 50px -16px rgba(176, 38, 255, 0.4); }
      50% { box-shadow: 0 0 30px -4px rgba(45, 226, 255, 0.7), 0 0 64px -12px rgba(176, 38, 255, 0.6); }
    }
    .nv-kick { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--so-volt); }
    .nv-q {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 30px; line-height: 1;
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--so-paper);
    }
    .nv-sub { margin: 8px auto 0; max-width: 20rem; font-size: 12.5px; line-height: 1.45; color: rgba(234, 240, 255, 0.68); }
    .nv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
    .nv-btn {
      min-height: 54px; padding: 0 8px; border-radius: 16px; font-size: 14px; font-weight: 800; line-height: 1.15;
      cursor: pointer; transition: transform 0.1s ease, filter 0.15s ease;
    }
    .nv-btn:active { transform: scale(0.97); }
    .nv-yes { border: 0; color: #fff; background: linear-gradient(90deg, #2DE2FF, #B026FF); box-shadow: 0 0 20px -4px rgba(45, 226, 255, 0.6); }
    .nv-no { color: #ff9a9a; background: rgba(255, 90, 90, 0.08); border: 1px solid rgba(255, 110, 110, 0.45); }
    .nv-progress { margin: 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--so-muted); }
    .nv-note {
      display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 11px 14px; border-radius: 16px;
      background: rgba(16, 24, 56, 0.7); border: 1px solid rgba(45, 226, 255, 0.28); font-size: 12.5px; color: rgba(234, 240, 255, 0.82);
    }
    .nv-note b { display: block; font-size: 13px; color: var(--so-paper); }
    .nv-note span { color: var(--so-muted); font-size: 11.5px; }
    .nv-note-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(45, 226, 255, 0.12); }
    .nv-note-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--so-volt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .nv-review { border-color: rgba(255, 110, 110, 0.5); background: rgba(255, 90, 90, 0.07); }
    .nv-review .nv-note-ic { background: rgba(255, 110, 110, 0.14); }
    .nv-review .nv-note-ic svg { stroke: #ff9a9a; }
    .app-confirm-danger { background: #c0392b !important; }
    #admin-metrics-button.admin-flagged {
      border-color: rgba(255, 110, 110, 0.55); background: rgba(255, 90, 90, 0.10); color: #ffb3b3;
    }
    /* Match details: a venue with no pitch page behind it is a name, not a link. */
    #md-court-btn:disabled { cursor: default; }
    #md-court-btn:disabled .md-venue-arrow { display: none; }
    #md-court-btn:disabled #md-court-name { color: #fff; }
    .rv-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 110, 110, 0.3); }
    .rv-row p { margin: 0; font-size: 12.5px; color: rgba(234, 240, 255, 0.85); }
    .rv-row small { display: block; margin-top: 2px; font-size: 11px; color: var(--so-muted); }
    @media (prefers-reduced-motion: reduce) {
      .nv-card { animation: none; box-shadow: 0 0 26px -8px rgba(45, 226, 255, 0.55); }
      .sp-ask-dot { animation: none; }
      .sp-verified .sp-slab::after { animation: none; display: none; }
    }

    .sp-feed-empty {
      border: 1px dashed var(--so-edge); border-radius: 18px; padding: 22px 18px;
      text-align: center; color: var(--so-muted); font-size: 13px; line-height: 1.6;
    }

    /* ── The voice on a night ──────────────────────────────────────────
       Everything else on a finished night is machine-written and cannot
       be argued with. This is the only part a person authors, which is
       why it is the one block that does not look derived. */
    .sp-social {
      display: flex; align-items: center; gap: 8px; padding: 12px 0 2px;
      border-top: 1px solid rgba(34,48,107,0.55); margin-top: 18px;
    }
    .sp-act {
      display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
      border-radius: 20px; border: 1px solid var(--so-edge); background: transparent;
      color: var(--so-muted); font-family: inherit; font-size: 12.5px; font-weight: 600;
      font-variant-numeric: tabular-nums; cursor: pointer;
      transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .sp-act svg { width: 14px; height: 14px; display: block; }
    /* A count that is only a label must not look like the button beside it. */
    .sp-act.sp-static { cursor: default; border-color: transparent; padding-left: 4px; padding-right: 4px; }
    .sp-act.is-on {
      border-color: rgba(45,226,255,0.55); background: rgba(45,226,255,0.11); color: var(--so-volt);
    }
    .sp-act:active { transform: scale(0.96); }
    .sp-act:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .sp-act[disabled] { opacity: 0.45; cursor: default; }

    .sp-cmt { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid rgba(34,48,107,0.4); }
    .sp-cmt-face {
      width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid;
      place-items: center; font-size: 11px; font-weight: 700; color: #070b1f;
    }
    .sp-cmt-b { flex: 1; min-width: 0; }
    .sp-cmt-h { display: flex; align-items: baseline; gap: 8px; }
    .sp-cmt-h b { font-size: 12.5px; font-weight: 700; color: var(--so-paper); }
    .sp-cmt-h time { font-size: 10.5px; color: var(--so-muted); }
    .sp-cmt-b p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: #c9d3f2;
      overflow-wrap: anywhere; }
    .sp-cmt-del {
      margin-left: auto; background: none; border: 0; color: var(--so-muted);
      font-size: 11px; font-family: inherit; cursor: pointer; padding: 2px 4px;
    }
    .sp-composer { display: flex; gap: 9px; align-items: center; padding: 14px 0 4px; }
    .sp-composer input {
      flex: 1; min-width: 0; background: var(--so-surface-raised); border: 1px solid var(--so-edge);
      border-radius: 20px; padding: 11px 15px; color: var(--so-paper);
      font-family: inherit; font-size: 13px;
    }
    .sp-composer input::placeholder { color: #5e6da6; }
    .sp-composer button {
      border: 0; border-radius: 20px; padding: 11px 16px; font-weight: 700; font-size: 12.5px;
      color: #070b1f; font-family: inherit;
      background: linear-gradient(100deg, #2de2ff, #6c4bff 52%, #b026ff);
    }
    .sp-quiet { font-size: 12.5px; color: var(--so-muted); padding: 14px 0 2px; line-height: 1.5; }

    /* The feed card stops being one big <button>: it now holds real controls,
       and a button inside a button is invalid and swallows the inner clicks. */
    .sp-card-open {
      display: block; width: 100%; text-align: left; padding: 0; border: 0;
      background: none; color: inherit; font: inherit; cursor: pointer;
    }
    .sp-card-foot .sp-act { padding: 6px 11px; font-size: 12px; }

    /* The same bar, sitting at the top of a night as well as the bottom.
       Dan, 2026-09-06: liking a night must not cost a scroll past the table,
       every game and the line-ups, and the two numbers have to be readable
       the moment the night opens. It lives inside .sp-bleed, so it puts its
       own side padding back rather than inheriting the sheet's. */
    .sp-social-top {
      margin-top: 0; padding: 2px 16px 14px; border-top: 0;
    }

    /* ── Night details ─────────────────────────────────────────────────
       Dan, 2026-09-25: the whole night -- table, every game, scorers,
       line-ups, setup -- no longer lands on the reader at once. It folds
       into one window under the post, closed by default. The face is a
       button showing the night in three numbers and what waits inside. */
    .nd {
      margin-top: 18px; border: 1px solid var(--so-edge); border-radius: 20px; overflow: hidden;
      background: var(--so-surface-raised); scroll-margin-top: 84px;
    }
    .nd-face {
      display: block; width: 100%; text-align: left; border: 0; padding: 15px 15px 14px;
      color: inherit; font: inherit; cursor: pointer;
      background: radial-gradient(130% 110% at 100% 0%, rgba(45,226,255,0.10), transparent 58%);
    }
    .nd-face:focus-visible { outline: 2px solid var(--so-volt); outline-offset: -2px; border-radius: 20px; }
    .nd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .nd-title {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 15px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--so-paper);
    }
    .nd-chev {
      width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
      border: 1px solid rgba(45,226,255,0.5); background: rgba(45,226,255,0.09); color: var(--so-volt);
      box-shadow: 0 0 14px -4px rgba(45,226,255,0.7); transition: transform .25s ease;
    }
    .nd-chev svg { width: 15px; height: 15px; display: block; }
    .nd.is-open .nd-chev { transform: rotate(180deg); }
    .nd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
    .nd-stat {
      display: block; padding: 9px 4px 8px; text-align: center; border-radius: 13px;
      border: 1px solid rgba(34,48,107,0.75); background: rgba(7,11,31,0.42);
    }
    .nd-stat b {
      display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 27px;
      line-height: 0.95; font-weight: 800; color: var(--so-paper); font-variant-numeric: tabular-nums;
    }
    .nd-stat.nd-hot b { color: var(--so-volt); }
    .nd-stat i {
      display: block; margin-top: 4px; font-style: normal; font-size: 9px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--so-muted);
    }
    .nd-inside { display: block; margin: 11px 1px 0; font-size: 12px; line-height: 1.45; color: var(--so-muted); }
    .nd-inside b { font-weight: 700; color: var(--so-volt); }
    /* Once it is open the list of what is inside is the page itself. */
    .nd.is-open .nd-inside { display: none; }
    .nd-body { padding: 2px 14px 14px; border-top: 1px solid rgba(34,48,107,0.6); }
    .nd-body[hidden] { display: none; }
    .nd.is-open .nd-body { animation: nd-open .22s ease-out; }
    @keyframes nd-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    /* Inside the window the frame and its padding leave 328px on a 390px
       phone, and 22rem pushed the points column -- the one that decides the
       night -- off the edge (seen on a real league night, 2026-09-25). Here
       the table takes the width it needs, which fits; team names wrap first. */
    .nd-table { margin-top: 16px; }
    .nd-table .sn-tbl { min-width: 0; }
    /* Team names never wrap, so on a 360px phone the room has to come from
       between the number columns; the rank and points cells keep theirs. */
    .nd-table .sn-tbl th, .nd-table .sn-tbl td { padding-left: 2px; padding-right: 2px; }
    .nd-table .sn-tbl th.sn-l { padding-left: 11px; }
    .nd-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
    .nd-form p {
      margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(255,255,255,0.4);
    }
    .nd-hide {
      display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
      min-height: 44px; margin-top: 16px; border: 1px solid var(--so-edge); border-radius: 14px;
      background: transparent; color: var(--so-muted); font-family: inherit; font-size: 12.5px; font-weight: 700;
      cursor: pointer;
    }
    .nd-hide svg { width: 14px; height: 14px; transform: rotate(180deg); }
    .nd-hide:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
      .nd-chev { transition: none; }
      .nd.is-open .nd-body { animation: none; }
    }

    /* How much a night was answered, in the archive rows. Silent when nobody
       has said anything -- two zeroes on every row is noise, not information. */
    .night-answers { display: inline-flex; align-items: center; gap: 10px; margin-top: 5px; }
    .night-answers .na-bit {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 700; color: var(--so-muted);
      font-variant-numeric: tabular-nums;
    }
    .night-answers .na-bit svg { width: 12px; height: 12px; display: block; }

/* ── Map: Esri Dark Gray, with a cheap SportOut navy tint ────────────────── */
/* The Esri canvas is already dark. Filtering the whole moving tile pane forced
   iPhones to repaint every tile during drag/zoom; the cheap navy overlay below
   keeps the SportOut tone without turning map movement into a GPU filter pass. */
.leaflet-container { background: #070B1F; }
.leaflet-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 350;
  background: rgba(7, 11, 31, 0.16);
}

/* ══ EXPLORE ── Players or Pitches, one at a time (Ron, 2026-10-05) ═══════
   The screen used to open on a map with "Search players" floating over it,
   so nobody could tell what the map was for. Now it reads like Sessions: a
   title, two tabs (the same .ss-seg), one search box that says what it
   searches, and the map only on Pitches. */

.ex-stage { position: relative; }
.ex-col { padding-bottom: 1.5rem; }

.ex-segb { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.ex-segb svg { width: 1rem; height: 1rem; flex: none; }

/* ── one search box ── */
.ex-searchwrap { position: relative; margin: 0.15rem 0 0.75rem; }
.ex-searchicon {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: #6C7AB0; pointer-events: none;
}
.ex-search {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem 0.6rem 2.45rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(57,77,145,.7);
  background: rgba(11,18,48,.9);
  color: #EAF0FF;
  font-size: 16px; /* anything smaller and iOS zooms the page on focus */
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ex-search::placeholder { color: #6C7AB0; }
.ex-search:focus { border-color: rgba(45,226,255,.55); box-shadow: 0 0 0 3px rgba(45,226,255,.13); }

/* ── Pitches only: the location line and the map ── */
.ex-stage[data-mode="players"] .ex-pitchtop { display: none; }

.ex-locate:empty { display: none; }
.ex-locate { margin-bottom: 0.6rem; }
.ex-locate-btn {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  min-height: 3rem; padding: 0.55rem 0.8rem; text-align: left;
  border-radius: 0.9rem; border: 1px solid rgba(45,226,255,.45);
  background: rgba(45,226,255,.08); color: #2DE2FF;
}
.ex-locate-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ex-locate-btn b { display: block; font-size: 0.85rem; font-weight: 800; color: #EAF0FF; }
.ex-locate-btn small { display: block; font-size: 0.7rem; color: #8290C4; margin-top: 1px; }
.ex-locate-btn:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
.ex-locate-line {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  padding: 0.5rem 0.75rem; border-radius: 0.8rem;
  border: 1px solid rgba(34,48,107,1); background: rgba(11,18,48,.7);
  font-size: 0.72rem; line-height: 1.45; color: #B9C4E8;
}
.ex-locate-line.is-off { border-color: rgba(255,201,60,.22); background: rgba(255,201,60,.06); color: rgba(255,236,196,.85); }
.ex-locate-spin {
  width: 0.85rem; height: 0.85rem; flex: none; border-radius: 999px;
  border: 2px solid rgba(45,226,255,.25); border-top-color: #2DE2FF;
  animation: ex-spin .8s linear infinite;
}
@keyframes ex-spin { to { transform: rotate(360deg); } }

.ex-mapframe {
  position: relative;
  height: clamp(12rem, 32dvh, 17rem);
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(34,48,107,.9);
  background: #070B1F;
}
.ex-map { position: absolute; inset: 0; z-index: 0; background: #070B1F; }
.ex-mapfall {
  position: absolute; inset: 0; z-index: 1;
  display: none; place-items: center; padding: 1.5rem; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(45,226,255,.06) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(176,38,255,.06) 0 1px, transparent 1px 10px),
    #070B1F;
}
/* Shown only when the map genuinely failed. A plain `.hidden` cannot switch this
   off, because app.css wins on source order over tailwind's .hidden. */
.ex-mapfall.is-on { display: grid; }

/* ── the list under the tabs ── */
.ex-results { position: relative; }
.ex-scroll { min-height: 0; padding-top: 0.25rem; }

.ex-tip { margin: 0.1rem 0.15rem 0.5rem; font-size: 0.72rem; line-height: 1.45; color: #8290C4; }

.ex-loading { padding: 0.5rem 0; }
.ex-loading-line {
  display: block; height: 3.5rem; margin-top: 0.5rem; border-radius: 0.9rem;
  background: linear-gradient(100deg, #111A3A 25%, #18244C 42%, #111A3A 58%);
  background-size: 220% 100%; animation: ex-shimmer 1.25s ease-in-out infinite;
}
.ex-loading-line.is-title { width: 42%; height: 1rem; margin-bottom: 0.8rem; }
@keyframes ex-shimmer { to { background-position-x: -220%; } }

/* ── section heads ── */
.ex-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; padding: 0.7rem 0.15rem 0.3rem;
}
.ex-head h3 {
  font-family: 'Saira Condensed', Oswald, Impact, sans-serif;
  font-size: 1rem; margin: 0; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; color: #EAF0FF;
}
.ex-head span {
  font-size: 0.625rem; letter-spacing: .12em; color: #6C7AB0;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
}

/* ── pitch row: one tap opens the pitch ── */
.ex-row {
  display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto;
  gap: 0.75rem; align-items: center; width: 100%;
  padding: 0.6rem 0.15rem; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(34,48,107,.55);
}
.ex-row:last-of-type { border-bottom: 0; }
.ex-row.is-sel { background: rgba(45,226,255,.05); border-radius: 0.7rem; }
.ex-row:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; border-radius: 0.7rem; }
.ex-row > span:nth-child(2) { min-width: 0; }
.ex-thumb {
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  border: 1px solid rgba(34,48,107,1);
  display: grid; place-items: center; color: #8290C4; background: #0B1230;
}
.ex-thumb.on { border-color: rgba(45,226,255,.5); color: #2DE2FF; box-shadow: 0 0 14px -6px rgba(45,226,255,.95); }
.ex-name {
  display: block; font-size: 0.9rem; line-height: 1.25; font-weight: 750; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-meta {
  display: block; font-size: 0.7rem; color: #8290C4; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-game {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem;
  padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 800; color: #2DE2FF;
  background: rgba(45,226,255,.1); border: 1px solid rgba(45,226,255,.3);
}
.ex-game i { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #2DE2FF; box-shadow: 0 0 8px rgba(45,226,255,.9); }
.ex-dist {
  font-size: 0.85rem; font-weight: 800; color: #EAF0FF; text-align: right; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ex-dist small { display: block; font-size: 0.6rem; color: #6C7AB0; font-weight: 600; }

.ex-more {
  margin: 0.6rem 0 0; padding: 0.55rem 0.75rem; border-radius: 0.7rem;
  border: 1px dashed rgba(34,48,107,1);
  font-size: 0.7rem; line-height: 1.45; color: #8290C4; text-align: center;
}

/* ── map pins: every pitch has one violet marker; selection earns a label. ── */
.ex-pin {
  display: flex; align-items: center; justify-content: center;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
  border: 1px solid rgba(34,48,107,1);
  background: rgba(11,18,48,.94); color: #8290C4;
  box-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.ex-pin.sel {
  background: #EAF0FF; border-color: #EAF0FF; color: #070B1F;
  box-shadow: 0 0 22px -2px rgba(234,240,255,.65);
  max-width: 13rem; overflow: hidden; text-overflow: ellipsis;
}
.ex-pinwrap { background: none !important; border: 0 !important; }
/* Pitch status never changes marker colour. Session details stay in the list. */
.ex-dot {
  display: block; width: 10px; height: 10px; border-radius: 999px;
  background: #B48CE8; border: 1.5px solid rgba(7,11,31,.85);
  box-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* ── player row: the face and name open the card, the button follows ── */
.ex-prow {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 0.75rem; align-items: center; width: 100%;
  padding: 0.55rem 0.15rem; text-align: left;
  border-bottom: 1px solid rgba(34,48,107,.55);
  transition: opacity .18s ease, transform .18s ease;
}
.ex-prow:last-child { border-bottom: 0; }
.ex-prow.is-leaving { opacity: 0; transform: translateX(10px); }
.ex-person-main {
  display: grid; grid-template-columns: 2.75rem minmax(0,1fr); gap: 0.7rem;
  align-items: center; min-width: 0; min-height: 2.75rem; padding: 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.ex-person-main:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 4px; border-radius: .6rem; }
.ex-person-copy { min-width: 0; }
.ex-pav {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; font-size: 0.95rem; font-weight: 800;
  color: #EAF0FF; background: #101838; border: 1.5px solid rgba(45,226,255,.4);
}
.ex-pav img { width: 100%; height: 100%; object-fit: cover; }
.ex-pname {
  display: block; font-size: 0.9rem; color: #F3F6FF; font-weight: 750;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-lock { display: inline-grid; place-items: center; margin-left: .35rem; color: #8FA0D8; vertical-align: -2px; }
.ex-lock svg { width: .8rem; height: .8rem; }
.ex-psub {
  display: block; font-size: 0.7rem; color: #8290C4; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-why { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; min-width: 0; }
.ex-pips { display: flex; flex-shrink: 0; }
.ex-fp {
  width: 1.15rem; height: 1.15rem; border-radius: 999px; overflow: hidden;
  border: 1.5px solid #0A1029; margin-left: -0.35rem;
  display: grid; place-items: center;
  font-size: 0.5rem; font-weight: 800; color: #EAF0FF; background: #2B3A73;
}
.ex-fp:first-child { margin-left: 0; }
.ex-fp img { width: 100%; height: 100%; object-fit: cover; }
.ex-whytx {
  font-size: 0.7rem; color: #8290C4; line-height: 1.3; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-whytx b { color: #B9C4E8; font-weight: 600; }
.ex-follow {
  flex-shrink: 0; min-width: 5.25rem; min-height: 2.5rem;
  border: 1px solid rgba(111,239,255,.75); color: #061328;
  background: linear-gradient(135deg, #8FF6FF, #2DE2FF); border-radius: 999px;
  padding: 0.35rem 0.9rem; font-size: 0.75rem; font-weight: 850;
}
.ex-follow:hover { background: linear-gradient(135deg, #B9FAFF, #64E9FF); border-color: #B9FAFF; }
.ex-follow:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
.ex-relation {
  min-width: 5.25rem; text-align: center; color: #8290C4;
  font-size: .72rem; font-weight: 700;
}

/* ── a card that says what to do next ── */
.ex-hint {
  border: 1px solid rgba(45,226,255,.28);
  border-radius: 0.9rem; padding: 0.9rem 1rem; margin-top: 0.25rem;
  background: radial-gradient(120% 100% at 50% 0, rgba(45,226,255,.07), transparent 70%);
}
.ex-hint b { display: block; font-size: 0.95rem; color: #EAF0FF; margin-bottom: 0.3rem; font-weight: 800; }
.ex-hint p { margin: 0; font-size: 0.78rem; color: #8290C4; line-height: 1.5; }
.ex-hint-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.ex-hint-action {
  min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: .75rem;
  border: 1px solid rgba(45,226,255,.5); background: rgba(45,226,255,.12);
  color: #2DE2FF; font-size: .78rem; font-weight: 800;
}
.ex-hint-action.is-quiet { border-color: rgba(57,77,145,.8); background: none; color: #B9C4E8; }
.ex-hint-action:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
.ex-people-group + .ex-people-group { margin-top: 0.6rem; }

@media (min-width: 1024px) {
  .ex-mapframe { height: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-prow { transition: none; }
  .ex-loading-line, .ex-locate-spin { animation: none; }
}

/* Attribution is a legal requirement, so it stays readable inside the map. */
.leaflet-control-attribution {
  background: rgba(7,11,31,.72) !important;
  color: #6C7AB0 !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: #8290C4 !important; }
.leaflet-bottom.leaflet-left { bottom: 0; }

.ex-prow > button, .ex-row { text-align: left; }

/* ══ Map controls ═════════════════════════════════════════════════════════
   Expand top-right, "where am I" bottom-right, where every map app keeps it. */
.ex-mapbtns {
  position: absolute; z-index: 5; right: 0.6rem; top: 0.6rem;
  display: flex; flex-direction: row; gap: 0.55rem;
}
.ex-herebtn { position: absolute; z-index: 5; right: 0.6rem; bottom: 0.6rem; }
.ex-mapbtn {
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(11,18,48,.94);
  border: 1px solid rgba(34,48,107,1);
  color: #B9C4E8;
  box-shadow: 0 5px 18px rgba(0,0,0,.6);
}
.ex-mapbtn svg { width: 1.15rem; height: 1.15rem; }
.ex-mapbtn:active { transform: scale(.94); }
.ex-mapbtn[aria-pressed="true"] {
  background: rgba(45,226,255,.16); border-color: rgba(45,226,255,.6); color: #2DE2FF;
  box-shadow: 0 0 16px -4px rgba(45,226,255,.9);
}

/* Full screen promotes only the map frame; the list stays ordinary content. */
.ex-stage[data-map="full"] {
  animation: none !important;
  transform: none !important;
}
.ex-stage[data-map="full"] .ex-mapframe {
  position: fixed;
  inset: var(--ex-map-top, 0px) 0 var(--ex-map-bottom, 0px);
  z-index: 120; width: 100%; height: auto;
  min-height: 0; border: 0; border-radius: 0;
}
html.ex-map-open,
body.ex-map-open { overflow: hidden; overscroll-behavior: none; }

/* ══ You are here ═════════════════════════════════════════════════════════
   A sonar contact rather than a dot: a foil core, two rings leaving on a
   stagger, and a slow sweep behind them. */
.ex-mewrap { background: none !important; border: 0 !important; }
.ex-me { position: relative; display: block; width: 54px; height: 54px; }
.ex-me-core {
  position: absolute; left: 50%; top: 50%; width: 19px; height: 19px;
  margin: -9.5px 0 0 -9.5px; border-radius: 999px;
  background: linear-gradient(135deg, #8FF6FF, #2DE2FF 42%, #B026FF);
  border: 1.5px solid rgba(234,240,255,.92);
  box-shadow: 0 0 14px 2px rgba(45,226,255,.75), 0 2px 6px rgba(0,0,0,.7);
}
.ex-me-ring {
  position: absolute; inset: 0; border-radius: 999px;
  border: 1.5px solid rgba(45,226,255,.55);
  animation: ex-sonar 2.8s cubic-bezier(.2,.6,.35,1) infinite;
}
.ex-me-ring.is-late { animation-delay: 1.4s; border-color: rgba(176,38,255,.45); }
.ex-me-sweep {
  position: absolute; inset: 4px; border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(45,226,255,.30), rgba(45,226,255,0) 62%);
  animation: ex-sweep 3.4s linear infinite;
}
@keyframes ex-sonar {
  0%   { transform: scale(.28); opacity: .95; }
  100% { transform: scale(1);   opacity: 0; }
}
@keyframes ex-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ex-me-ring, .ex-me-sweep { animation: none; }
  .ex-me-ring { transform: scale(.62); opacity: .5; }
  .ex-me-sweep { opacity: .35; }
}

/* ── Court truth layer: verified facts and community corrections ─────── */
.cd-verify {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin: 0 1rem 1rem;
  padding: .9rem;
  border: 1px solid rgba(45, 226, 255, .22);
  border-radius: 1rem;
  background:
    linear-gradient(115deg, rgba(45, 226, 255, .10), rgba(176, 38, 255, .05)),
    rgba(11, 18, 48, .82);
}

/* ── The pitch screen (Ron, 2026-10-05): name and address, a row of facts,
   directions, the sessions planned here, then what is published. ── */
.cd-name {
  margin: 0; color: #F4F7FF; font-size: 1rem; font-weight: 800; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-addr { margin: .15rem 0 0; color: #8290C4; font-size: .72rem; line-height: 1.35; unicode-bidi: plaintext; text-align: left; }
.cd-body { width: 100%; max-width: 44rem; margin-inline: auto; padding: .9rem 1rem calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1rem; }
.cd-body .cd-verify { margin: 0; }
.cd-facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.cd-fact {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: .2rem .65rem;
  border-radius: 999px; border: 1px solid rgba(57,77,145,.7); background: rgba(11,18,48,.8);
  color: #B9C4E8; font-size: .7rem; font-weight: 700;
}
.cd-fact.is-live { color: #2DE2FF; border-color: rgba(45,226,255,.45); background: rgba(45,226,255,.1); }
.cd-fact.is-check { color: #FDE7A8; border-color: rgba(255,201,60,.3); background: rgba(255,201,60,.08); }
.cd-fact.is-ok { color: #A5F3FC; border-color: rgba(103,232,249,.3); background: rgba(34,211,238,.08); }
.cd-fact-live { color: #2DE2FF; }
.cd-go { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cd-go-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.9rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #EAF0FF; font-size: .8rem; font-weight: 800;
}
.cd-go-btn svg { width: 1rem; height: 1rem; color: #2DE2FF; }
.cd-go-btn:active, .cd-create:active, .cd-sess:active { transform: scale(.98); }
.cd-sec-head h3 {
  margin: 0 0 .45rem; font-family: 'Saira Condensed', Oswald, Impact, sans-serif;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: #EAF0FF;
}
.cd-sess {
  display: grid; grid-template-columns: auto minmax(0,1fr) 1rem; align-items: center; gap: .7rem;
  width: 100%; min-height: 3.25rem; margin-bottom: .45rem; padding: .55rem .75rem; text-align: left;
  border-radius: .9rem; border: 1px solid rgba(45,226,255,.3); background: rgba(45,226,255,.06); color: #EAF0FF;
}
.cd-sess svg { width: 1rem; height: 1rem; color: #6C7AB0; }
.cd-sess-when { font-size: .72rem; font-weight: 800; color: #2DE2FF; white-space: nowrap; }
.cd-sess-mid { min-width: 0; }
.cd-sess-mid b, .cd-sess-mid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-sess-mid b { font-size: .85rem; font-weight: 800; }
.cd-sess-mid small { font-size: .68rem; color: #8290C4; margin-top: 1px; }
.cd-empty { margin: 0 0 .55rem; color: #8290C4; font-size: .75rem; line-height: 1.45; }
.cd-create {
  width: 100%; min-height: 2.9rem; border-radius: .9rem;
  border: 1px solid rgba(45,226,255,.45); background: rgba(45,226,255,.12);
  color: #2DE2FF; font-size: .82rem; font-weight: 800;
}
.cd-sess:focus-visible, .cd-create:focus-visible, .cd-go-btn:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
.cd-rows { border-radius: .9rem; border: 1px solid rgba(34,48,107,.8); overflow: hidden; }
/* app.css beats tailwind's .hidden on source order, so these say it again. */
.cd-rows.hidden, .cd-row.hidden, .cd-fact.hidden { display: none; }
.cd-row {
  display: grid; grid-template-columns: 1.6rem auto minmax(0,1fr); align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .45rem .75rem; border-top: 1px solid rgba(34,48,107,.55);
}
.cd-row:first-child, .cd-row.hidden + .cd-row { border-top: 0; }
.cd-row-ic { color: #2DE2FF; opacity: .75; display: grid; place-items: center; }
.cd-row-ic svg { width: 1rem; height: 1rem; }
.cd-row-l { color: #8290C4; font-size: .72rem; }
.cd-row-v { color: #EAF0FF; font-size: .8rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cd-missing { margin: .45rem .15rem 0; color: #6C7AB0; font-size: .7rem; line-height: 1.45; }
.cd-verify-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .8rem;
  border: 1px solid rgba(45, 226, 255, .28);
  color: #2DE2FF;
  background: rgba(45, 226, 255, .08);
}
.cd-verify-icon svg { width: 1.35rem; height: 1.35rem; }
.cd-verify-copy { min-width: 0; }
.cd-verify-copy h2 {
  color: #F4F7FF;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.2;
}
.cd-verify-copy p {
  margin-top: .2rem;
  color: #95A2CC;
  font-size: .68rem;
  line-height: 1.4;
}
.cd-verify-action {
  min-height: 2.75rem;
  padding: 0 .8rem;
  border: 1px solid rgba(45, 226, 255, .4);
  border-radius: 999px;
  color: #2DE2FF;
  background: rgba(45, 226, 255, .1);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.cd-verify-action:focus-visible,
.cc-submit:focus-visible,
.cc-field :is(input, select, textarea):focus-visible {
  outline: 2px solid #2DE2FF;
  outline-offset: 2px;
}
.cc-body {
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom));
}
.cc-intro {
  display: flex;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid rgba(45, 226, 255, .18);
  border-radius: 1rem;
  background: rgba(11, 18, 48, .82);
}
.cc-intro-mark {
  flex: none;
  width: .28rem;
  min-height: 3.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2DE2FF, #B026FF);
  box-shadow: 0 0 1rem rgba(45, 226, 255, .3);
}
.cc-court-name {
  color: #F4F7FF;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.cc-intro-copy {
  margin-top: .25rem;
  color: #95A2CC;
  font-size: .75rem;
  line-height: 1.55;
}
.cc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1rem;
}
.cc-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .4rem;
  color: #C8D2F0;
  font-size: .72rem;
  font-weight: 700;
}
.cc-field.cc-wide { grid-column: 1 / -1; }
.cc-field > span { padding-left: .15rem; }
.cc-field > span small,
.cc-field > small {
  color: #6C7AB0;
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.45;
}
.cc-field :is(input, select, textarea) {
  width: 100%;
  min-height: 3rem;
  border: 1px solid rgba(108, 122, 176, .34);
  border-radius: .85rem;
  background: #0B1230;
  color: #F4F7FF;
  padding: .75rem .85rem;
  font-size: 16px;
  font-weight: 500;
}
.cc-field textarea { min-height: 6.5rem; resize: vertical; }
.cc-field :is(input, textarea)::placeholder { color: #64719D; }
.cc-error {
  min-height: 1.25rem;
  margin: .75rem .2rem 0;
  color: #FCA5A5;
  font-size: .75rem;
}
.cc-submit {
  width: 100%;
  min-height: 3.25rem;
  margin-top: .35rem;
  border: 1px solid rgba(45, 226, 255, .55);
  border-radius: 1rem;
  background: #2DE2FF;
  color: #07101E;
  font-size: .86rem;
  font-weight: 900;
  box-shadow: 0 0 1.5rem rgba(45, 226, 255, .18);
}
.cc-submit:disabled { cursor: wait; opacity: .55; }

@media (max-width: 359px) {
  .cd-verify { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .cd-verify-action { grid-column: 1 / -1; width: 100%; }
  .cc-grid { grid-template-columns: 1fr; }
  .cc-field.cc-wide { grid-column: auto; }
}

    /* Goal scorers on the session post (Ron, 2026-10-04): every scorer, a face,
       a name and a handle, one tappable row each. */
    .gs-card { margin: 12px 0 0; padding: 10px 10px 6px; border-radius: 18px; background: var(--so-surface-raised); border: 1px solid rgba(143,246,255,.12); }
    .gs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 6px; }
    .gs-title { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--so-paper); }
    .gs-sum { font-size: 11px; color: var(--so-muted); white-space: nowrap; }
    .gs-list { margin: 0; padding: 0; list-style: none; }
    .gs-row {
      display: grid; grid-template-columns: 1.1rem 34px minmax(0, 1fr) 3.2rem 1.6rem; align-items: center; gap: 9px;
      width: 100%; min-height: 48px; padding: 5px 4px; border-radius: 12px; text-align: left; color: inherit;
      transition: background .15s;
    }
    .gs-row:hover { background: rgba(45,226,255,.05); }
    .gs-row:active { background: rgba(45,226,255,.09); }
    .gs-row:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 1px; }
    .gs-list li + li .gs-row { border-top: 1px solid rgba(143,246,255,.06); border-radius: 0 0 12px 12px; }
    .gs-rank { font-size: 11px; font-weight: 800; color: rgba(234,240,255,.35); text-align: center; }
    .gs-rank.gs-top { color: #fcd34d; }
    .gs-av {
      position: relative; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden;
      border-radius: 50%; color: #070b1f; font-size: 12px; font-weight: 800; border: 1.5px solid rgba(255,255,255,.14);
    }
    .gs-who { display: flex; flex-direction: column; min-width: 0; }
    .gs-who b { overflow: hidden; font-size: 13px; font-weight: 700; color: var(--so-paper); white-space: nowrap; text-overflow: ellipsis; }
    .gs-who small { overflow: hidden; font-size: 11px; color: var(--so-muted); white-space: nowrap; text-overflow: ellipsis; }
    .gs-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
    .gs-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2DE2FF, #B026FF); }
    .gs-n { font-size: 16px; font-weight: 900; color: var(--so-volt); text-align: right; font-variant-numeric: tabular-nums; }

    /* Session summary, tighter (Ron, 2026-10-04). With no photo the woven
       ground only has to carry the result, so it is as tall as the result. */
    .sp-bleed .sp-slab:not(.sp-has-photo) { aspect-ratio: auto; height: 176px; }
    .nv-card { margin: 10px 0 4px; padding: 14px 14px 12px; }
    .nv-q { font-size: 24px; }
    .nv-sub { margin-top: 6px; font-size: 12px; }
    .nv-actions { margin-top: 12px; gap: 8px; }
    .nv-btn { min-height: 48px; font-size: 13.5px; }
    .nv-progress { margin-top: 9px; }
    .np-thumb { width: 72px; height: 72px; }
    .np-tool { min-height: 30px; padding: 0 9px; }
    .np-move { width: 30px; height: 30px; }

    /* ── Live game entry (2026-10-04) ───────────────────────────────────────
       The scorekeeper's screen. One large thing at a time: "+ Goal" while the
       game is played, "Save result" once the clock is at zero. A team's colour
       (--lg-c, set per team by _lgVars) only ever means "this side"; the foil
       gradient is kept for the single next step. Everything else stays quiet. */
    .lg-strip { display: flex; align-items: center; gap: 9px; padding: 14px 2px 0; }
    .lg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #FF4D5E;
              animation: sn-pulse 1.6s ease-in-out infinite; }
    .lg-dot-idle { background: #5E6DA5; animation: none; }
    .lg-live { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 13px;
               letter-spacing: 0.16em; text-transform: uppercase; color: #EAF0FF; }
    .lg-live em { font-style: normal; color: #8290C4; }
    .lg-by { margin-left: auto; font-size: 11px; font-weight: 600; color: #8290C4; }
    .lg-strip .sn-pips { margin-left: auto; }

    .lg-card { margin-top: 12px; border-radius: 24px; background: #0B1230;
               border: 1px solid rgba(255,255,255,0.08); overflow: hidden; color: #EAF0FF; }
    .lg-clock { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
    .lg-k { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8290C4; }
    .lg-k-warn { color: #fbbf24; }
    .lg-t { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 48px;
            line-height: 0.95; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: #EAF0FF; }
    .lg-t-ft { font-size: 38px; letter-spacing: 0.06em; }
    .lg-t-low { color: #ff8490; }
    .lg-pause { flex: none; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
                background: #101838; color: #EAF0FF; font-weight: 700; font-size: 13px;
                display: flex; align-items: center; gap: 8px; transition: transform 0.1s; }
    .lg-pause:active { transform: scale(0.96); }
    .lg-ic-pause { display: inline-block; width: 10px; height: 12px; border-left: 3px solid #EAF0FF; border-right: 3px solid #EAF0FF; }
    .lg-ic-play { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
                  border-color: transparent transparent transparent #EAF0FF; }
    .lg-line { height: 4px; background: rgba(255,255,255,0.08); }
    .lg-line i { display: block; height: 100%; background: #EAF0FF; border-radius: 0 2px 2px 0; transition: width 1s linear; }

    .lg-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .lg-side { padding: 16px 12px; text-align: center; min-width: 0; }
    .lg-side + .lg-side { border-left: 1px solid rgba(255,255,255,0.08); }
    .lg-team { display: flex; gap: 7px; align-items: center; justify-content: center; min-width: 0;
               font-size: 13px; font-weight: 700; color: var(--lg-c); }
    .lg-team > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-crest { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--lg-c); color: #070B1F;
                font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 13px;
                display: grid; place-items: center; }
    .lg-num { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 116px;
              line-height: 0.92; margin: 8px 0 14px; font-variant-numeric: tabular-nums; color: #EAF0FF; }
    .lg-num-sm { font-size: 84px; margin: 6px 0 10px; }

    /* The goal button: dark glass that takes its team's tint. Large because it
       is the one thing tapped again and again, not because it is loud. */
    .lg-goal { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 66px;
               border-radius: 17px; border: 1.5px solid var(--lg-c); color: #EAF0FF;
               background: linear-gradient(180deg, var(--lg-hi), var(--lg-lo)), #0B1230;
               font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 25px;
               letter-spacing: 0.08em; text-transform: uppercase; touch-action: manipulation;
               -webkit-tap-highlight-color: transparent; transition: transform 0.1s, background 0.1s; }
    .lg-goal:active { transform: scale(0.96); background: linear-gradient(180deg, var(--lg-bd), var(--lg-hi)), #0B1230; }
    .lg-goal i { width: 28px; height: 28px; border-radius: 50%; background: var(--lg-c); color: #070B1F; font-style: normal;
                 display: grid; place-items: center; font-size: 24px; line-height: 1; padding-bottom: 3px; }
    .lg-goal-late { height: 44px; border-width: 1px; border-radius: 13px; font-size: 15px; background: transparent; color: var(--lg-c); }
    .lg-goal-late i { width: 18px; height: 18px; font-size: 16px; padding-bottom: 2px; }

    .lg-goals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; min-height: 30px; }
    .lg-g { max-width: 100%; height: 30px; padding: 0 10px 0 4px; border-radius: 999px; background: rgba(255,255,255,0.05);
            border: 1px solid var(--lg-c); font-size: 12px; font-weight: 600; color: #EAF0FF;
            display: inline-flex; align-items: center; gap: 6px; }
    button.lg-g:active { transform: scale(0.96); }
    .lg-g-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-g em { font-style: normal; font-weight: 800; color: var(--lg-c); }
    .lg-av { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lg-c, #22306B); color: #070B1F;
             font-size: 10px; font-weight: 800; display: grid; place-items: center; }
    .lg-g-unk { border-style: dashed; border-color: rgba(255,255,255,0.3); color: #9aa8d5; }
    .lg-g-unk .lg-av { background: transparent; border: 1px dashed rgba(255,255,255,0.4); color: #9aa8d5; }
    .lg-g-unk em { color: #9aa8d5; }
    .lg-none { font-size: 12px; color: #5E6DA5; line-height: 30px; }
    .lg-pens { margin: 0 16px 14px; text-align: center; font-size: 12.5px; font-weight: 700; color: #EAF0FF; }
    .lg-hint { margin: 0 16px 14px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.04);
               font-size: 12.5px; color: #c3cbea; text-align: center; }
    .lg-hint b { color: #EAF0FF; }

    .lg-watch { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.04);
                border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; font-weight: 600; color: #EAF0FF; }
    .lg-watch .lg-av { width: 30px; height: 30px; font-size: 12px; background: #22306B; color: #EAF0FF; }
    .lg-watch small { display: block; font-size: 11.5px; font-weight: 500; color: #8290C4; }

    .lg-save { display: block; width: 100%; margin-top: 14px; min-height: 68px; padding: 10px 14px; border-radius: 18px; border: 0;
               background: linear-gradient(100deg, #2DE2FF, #6C4BFF 52%, #B026FF); color: #fff; transition: transform 0.1s; }
    .lg-save:active { transform: scale(0.98); }
    .lg-save b { display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 24px;
                 letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; }
    .lg-save small { display: block; font-size: 12.5px; font-weight: 600; opacity: 0.92; margin-top: 2px; }
    .lg-save-off { min-height: 60px; background: #101838; color: #5E6DA5; border: 1px solid rgba(255,255,255,0.08); cursor: not-allowed; }
    .lg-save-off b { font-size: 20px; }
    .lg-save-off:active { transform: none; }
    .lg-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
    .lg-cancel { text-align: center; font-size: 12px; color: #8290C4; margin-top: 8px; }
    .lg-own { text-align: center; font-size: 11.5px; color: #8290C4; margin-top: 12px; line-height: 1.45; }
    .lg-fin { display: block; width: 100%; margin-top: 18px; height: 50px; border-radius: 14px;
              border: 1px solid rgba(251,191,36,0.4); background: transparent; color: #fbbf24; font-weight: 700; font-size: 13.5px; }
    .lg-fin:active { transform: scale(0.98); }

    /* ── Ending a game (2026-10-10) ─────────────────────────────────────────
       On the night of 2026-10-09 scorekeepers could not find how to finish a
       game: "End game" was a quiet outline among other quiet controls, often
       below the fold. The footer now sticks to the bottom of the room, and its
       colours carry the meaning: green = save, red = throw away. */
    .lg-foot { position: sticky; bottom: 0; z-index: 5; margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
               background: linear-gradient(180deg, rgba(7,11,31,0) 0, rgba(7,11,31,0.94) 18px, #070B1F 100%); }
    .lg-foot-k { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 4px 0 8px;
                 font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8290C4; }
    .lg-foot-now .lg-foot-k { color: #4ADE80; }
    .lg-btn-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
    .lg-btn-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .lg-btn-txt { min-width: 0; text-align: left; }
    .lg-btn-txt b { display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 23px;
                    letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.05; }
    .lg-btn-txt small { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; opacity: 0.85;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Before full time: a clear green outline. Never louder than + Goal, but
       impossible to miss. */
    .lg-end { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 16px;
              border-radius: 18px; border: 2px solid #4ADE80; background: rgba(74,222,128,0.10); color: #EAFFF0;
              transition: transform 0.1s, background 0.1s; touch-action: manipulation; }
    .lg-end:active { transform: scale(0.98); background: rgba(74,222,128,0.2); }
    .lg-end .lg-btn-ic { background: rgba(74,222,128,0.18); color: #4ADE80; }
    /* At full time, and in the "end now" sheet: the one solid green button. */
    .lg-save-go { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 70px;
                  background: linear-gradient(180deg, #4ADE80, #16A34A); color: #04170A;
                  box-shadow: 0 0 0 1px rgba(74,222,128,0.5), 0 10px 30px -8px rgba(74,222,128,0.65); }
    .lg-save-go .lg-btn-ic { background: rgba(4,23,10,0.16); color: #04170A; }
    .lg-save-go .lg-btn-txt small { opacity: 0.8; }
    .lg-foot-now .lg-save-go { animation: lg-go 1.8s ease-in-out infinite; }
    @keyframes lg-go { 0%, 100% { box-shadow: 0 0 0 1px rgba(74,222,128,0.5), 0 10px 30px -8px rgba(74,222,128,0.65); }
                       50% { box-shadow: 0 0 0 5px rgba(74,222,128,0.18), 0 10px 34px -6px rgba(74,222,128,0.85); } }
    @media (prefers-reduced-motion: reduce) { .lg-foot-now .lg-save-go { animation: none; } }
    .lg-cancel-btn { display: block; margin: 8px auto 0; min-height: 40px; padding: 0 16px; border-radius: 999px;
                     border: 1px solid rgba(255,107,122,0.35); background: transparent; color: #FF8A96;
                     font-size: 13px; font-weight: 700; }
    .lg-cancel-btn small { font-weight: 500; color: #c08890; }
    .lg-cancel-btn:active { transform: scale(0.97); }
    .lg-keep { display: block; width: 100%; margin-top: 10px; min-height: 52px; border-radius: 16px;
               border: 1px solid rgba(255,255,255,0.2); background: #101838; color: #EAF0FF; font-size: 15px; font-weight: 700; }
    .lg-keep:active { transform: scale(0.98); }
    .lg-sh-score { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px;
                   margin: 2px 0 6px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.04); }
    .lg-sh-score > span { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
    .lg-sh-score em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--lg-c); max-width: 100%;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-sh-score > b { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 44px;
                       line-height: 1; color: #EAF0FF; font-variant-numeric: tabular-nums; }
    /* The how-to: three numbered steps for a new scorekeeper. */
    .lg-how { margin: 0 14px 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.04);
              border: 1px solid rgba(255,255,255,0.07); display: grid; gap: 7px; list-style: none; }
    .lg-how li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #c3cbea; }
    .lg-how li i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #22306B; color: #EAF0FF;
                   font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
    .lg-how b { color: #EAF0FF; }
    .lg-how .lg-how-end { color: #4ADE80; }

    /* ── The way into the Live Room (2026-10-10) ──────────────────────────── */
    .lr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; flex: none;
              animation: sn-pulse 1.6s ease-in-out infinite; }
    .lr-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px;
              border-radius: 18px; text-align: left; color: #EAF0FF; border: 1.5px solid rgba(45,226,255,0.55);
              background: linear-gradient(115deg, rgba(45,226,255,0.16), rgba(45,226,255,0.04) 60%), #0B1230;
              box-shadow: 0 10px 28px -14px rgba(45,226,255,0.7); transition: transform 0.1s; }
    .lr-cta:active { transform: scale(0.98); }
    .lr-cta-live { border-color: rgba(255,77,94,0.7);
                   background: linear-gradient(115deg, rgba(255,77,94,0.22), rgba(255,77,94,0.05) 60%), #0B1230;
                   box-shadow: 0 10px 28px -14px rgba(255,77,94,0.8); }
    .lr-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
              background: #2DE2FF; color: #04170A; }
    .lr-cta-live .lr-ico { background: #FF4D5E; color: #fff; }
    .lr-ico svg { width: 24px; height: 24px; fill: currentColor; }
    .lr-txt { flex: 1; min-width: 0; }
    .lr-kick { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
               text-transform: uppercase; color: #2DE2FF; }
    .lr-cta-live .lr-kick { color: #FF8A96; }
    .lr-txt b { display: block; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 24px;
                letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; margin-top: 2px; }
    .lr-txt small { display: block; font-size: 12.5px; color: #c3cbea; margin-top: 2px; }
    .lr-chev { flex: none; width: 22px; height: 22px; fill: none; stroke: #EAF0FF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
    .lr-banner[hidden], .lr-pill-wrap[hidden] { display: none; }
    .lr-card { border-radius: 20px; padding: 12px; background: #0B1230; border: 1px solid rgba(255,77,94,0.3); display: grid; gap: 10px; }
    .lr-card-head { display: block; text-align: left; min-width: 0; }
    .lr-card-title { display: block; font-size: 15px; font-weight: 700; color: #EAF0FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lr-card-meta { display: block; font-size: 12px; color: #8290C4; margin-top: 2px; }
    .lr-card-tools { display: flex; gap: 6px; justify-content: flex-end; }
    .up-btn.up-btn-live { border-color: rgba(45,226,255,0.6); color: #2DE2FF; font-weight: 800; }
    /* The pill: above the bottom dock on a phone, bottom-right on a computer. */
    .lr-pill-wrap { position: fixed; left: 0; right: 0; z-index: 55; display: flex; justify-content: center; pointer-events: none;
                    bottom: calc(84px + env(safe-area-inset-bottom)); padding: 0 16px; }
    @media (min-width: 1024px) { .lr-pill-wrap { bottom: 24px; left: auto; right: 24px; } }
    .lr-pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px 0 16px;
               border-radius: 999px; border: 1.5px solid rgba(45,226,255,0.6); background: rgba(8,13,36,0.96); color: #EAF0FF;
               box-shadow: 0 12px 30px -10px rgba(0,0,0,0.8), 0 0 24px -6px rgba(45,226,255,0.5); max-width: 100%; }
    .lr-pill:active { transform: scale(0.97); }
    .lr-pill > span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #2DE2FF; white-space: nowrap; }
    .lr-pill .lr-dot { background: #2DE2FF; }
    .lr-pill-live { border-color: rgba(255,77,94,0.75); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.8), 0 0 24px -6px rgba(255,77,94,0.6); }
    .lr-pill-live > span { color: #FF8A96; }
    .lr-pill-live .lr-dot { background: #FF4D5E; }
    .lr-pill b { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.04em;
                 text-transform: uppercase; white-space: nowrap; }
    .lr-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

    /* Level at full time: play on, or say who won the shootout. */
    .lg-level { border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 14px 16px; }
    .lg-level-h { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 15px;
                  letter-spacing: 0.12em; text-transform: uppercase; color: #EAF0FF; }
    .lg-q { font-size: 12.5px; font-weight: 600; color: #c3cbea; margin: 12px 0 7px; }
    .lg-row { display: flex; gap: 8px; }
    .lg-opt { flex: 1; min-width: 0; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.16); background: #101838;
              color: #EAF0FF; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; }
    .lg-opt:active { transform: scale(0.97); }
    .lg-opt > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-opt-team { border-color: var(--lg-bd); color: var(--lg-c); }
    .lg-opt-on { border: 2px solid var(--lg-c); background: linear-gradient(180deg, var(--lg-hi), var(--lg-lo)), #101838; color: #EAF0FF; }
    .lg-note { font-size: 11.5px; color: #8290C4; margin-top: 9px; line-height: 1.4; }
    .lg-note b { color: #c3cbea; }

    /* The sheet under the game. */
    .lg-sheet { width: 100%; max-width: 28rem; max-height: 88vh; overflow-y: auto; background: #101838; color: #EAF0FF;
                border-radius: 28px 28px 0 0; border-top: 3px solid var(--lg-c, rgba(255,255,255,0.2));
                padding: 10px 16px calc(26px + env(safe-area-inset-bottom, 0px)); }
    .lg-grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin: 0 auto 14px; }
    .lg-sh-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--lg-c, #8290C4);
               letter-spacing: 0.1em; text-transform: uppercase; }
    .lg-sh-k > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-sh-k small { margin-left: auto; flex: none; color: #9aa8d5; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }
    .lg-sh-t { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 34px;
               line-height: 1; margin: 10px 0 16px; letter-spacing: 0.01em; }
    .lg-sh-sub { font-size: 15px; font-weight: 600; color: #c3cbea; margin: -8px 0 6px; }
    .lg-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
    .lg-faces-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-face { display: block; min-width: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: #EAF0FF; }
    .lg-face:active { transform: scale(0.95); }
    .lg-face-av { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 6px; border-radius: 50%;
                  border: 2px solid var(--lg-c); background: #0B1230; color: var(--lg-c);
                  font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 26px; }
    .lg-faces-4 .lg-face-av { width: 54px; height: 54px; font-size: 22px; }
    .lg-face-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-skip { display: block; width: 100%; margin-top: 18px; height: 52px; border-radius: 16px;
               border: 1px dashed rgba(255,255,255,0.3); background: transparent; color: #EAF0FF; font-weight: 700; font-size: 14px; }
    .lg-skip:active { transform: scale(0.98); }
    .lg-undo { text-align: center; font-size: 12.5px; color: #9aa8d5; margin-top: 12px; }
    .lg-act { display: flex; align-items: center; width: 100%; min-height: 60px; padding: 8px 16px; border-radius: 16px; margin-top: 10px;
              border: 1px solid rgba(255,255,255,0.16); background: #0B1230; color: #EAF0FF; font-weight: 700; font-size: 15px; text-align: left; }
    .lg-act:active { transform: scale(0.98); }
    .lg-act small { display: block; font-size: 12px; font-weight: 500; color: #9aa8d5; margin-top: 1px; }
    .lg-act-del { border-color: rgba(255,93,108,0.5); color: #ff8490; }

    /* Between games: the result just saved, then the two questions. */
    .lg-saved { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 14px; border-radius: 15px;
                background: #101838; border: 1px solid rgba(255,255,255,0.1); color: #EAF0FF; }
    .lg-saved i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EAF0FF; color: #070B1F;
                  display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; }
    .lg-saved p { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
    .lg-saved small { display: block; font-size: 12px; font-weight: 500; color: #9aa8d5; margin-top: 1px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-saved .lg-link { flex: none; font-size: 12.5px; color: #9aa8d5; }
    .lg-next { color: #EAF0FF; }
    .lg-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
    .lg-step b { font-size: 17px; font-weight: 700; }
    .lg-step span { margin-left: auto; font-size: 12px; font-weight: 600; color: #8290C4; }
    .lg-step-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.28);
                    display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
    .lg-step-ok { background: #EAF0FF; border-color: #EAF0FF; color: #070B1F; }
    .lg-teams { display: grid; grid-template-columns: repeat(var(--lg-n, 3), minmax(0, 1fr)); gap: 8px; }
    .lg-tm { min-width: 0; min-height: 104px; padding: 10px 6px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1);
             background: #101838; color: #8290C4; font-size: 13px; font-weight: 700;
             display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
             transition: transform 0.1s, border-color 0.15s, background 0.15s; }
    .lg-tm:active { transform: scale(0.96); }
    .lg-tm .lg-crest { width: 34px; height: 34px; border-radius: 11px; font-size: 20px;
                       background: transparent; border: 1px solid var(--lg-c); color: var(--lg-c); }
    .lg-tm-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-tm small { font-size: 11px; font-weight: 600; color: #5E6DA5; }
    .lg-tm-on { border: 2px solid var(--lg-c); background: linear-gradient(180deg, var(--lg-hi), var(--lg-lo)), #101838; color: #EAF0FF; }
    .lg-tm-on .lg-crest { background: var(--lg-c); color: #070B1F; }
    .lg-tm-on small { color: var(--lg-c); }
    .lg-mins { display: flex; gap: 8px; }
    .lg-min { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: #101838;
              color: #8290C4; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 20px;
              text-align: center; transition: transform 0.1s, border-color 0.15s, color 0.15s; }
    .lg-min:active { transform: scale(0.96); }
    .lg-min.dr-mins-on { border: 2px solid #EAF0FF; color: #EAF0FF; background: #101838; }
    .lg-min-input { -moz-appearance: textfield; appearance: textfield; }
    .lg-min-input::-webkit-outer-spin-button,
    .lg-min-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .lg-min-input::placeholder { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #8290C4; }
    .lg-min-input:focus { outline: none; border-color: #EAF0FF; }
    .lg-next .lg-save { margin-top: 22px; }
    .lg-divide { margin: 26px -16px 0; border-top: 6px solid #04071a; }

    .lg-fold { margin-top: 14px; }
    .lg-fold + .lg-fold { margin-top: 8px; }
    .lg-fold-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px;
                   border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; font-weight: 600; color: #c3cbea; text-align: left; }
    .lg-fold-row small { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #5E6DA5; white-space: nowrap; }
    .lg-chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid #5E6DA5; border-bottom: 2px solid #5E6DA5;
               transform: rotate(45deg); margin-top: -3px; }
    .lg-chev-open { transform: rotate(-135deg); margin-top: 3px; }
    .lg-fold-in { padding-top: 14px; }

    .lg-goal:focus-visible, .lg-save:focus-visible, .lg-end:focus-visible, .lg-cancel-btn:focus-visible, .lg-keep:focus-visible, .lr-cta:focus-visible, .lr-pill:focus-visible, .lg-pause:focus-visible, .lg-tm:focus-visible,
    .lg-min:focus-visible, .lg-opt:focus-visible, .lg-face:focus-visible, .lg-g:focus-visible, .lg-act:focus-visible,
    .lg-skip:focus-visible, .lg-link:focus-visible, .lg-fold-row:focus-visible, .lg-fin:focus-visible {
      outline: 2px solid #EAF0FF; outline-offset: 2px;
    }
    @media (max-width: 340px) {
      .lg-num { font-size: 96px; }
      .lg-goal { font-size: 22px; gap: 8px; }
      .lg-face-av { width: 58px; height: 58px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .lg-dot { animation: none; }
      .lg-line i { transition: none; }
    }

    /* ══ Session Summary, rebuilt (Ron, 2026-10-04) ══════════════════════
       Small blocks, big readable words, one idea each: the recap with its
       badges, the line-ups side by side, the top scorers, then Full stats.
       Text stays at 11px or more and every control is at least 36px tall, so
       it reads for anyone, not only the regulars. */

    /* Your session recap: Overall and its move on the left, the result on
       the right, badges kept from the night underneath. */
    .rc-card {
      margin-top: 12px; padding: 12px 14px; border-radius: 18px;
      background: linear-gradient(160deg, rgba(45,226,255,.09), var(--so-surface-raised) 55%);
      border: 1px solid rgba(45,226,255,.32);
    }
    .rc-kick { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--so-muted); }
    .rc-row { display: flex; align-items: center; gap: 12px; }
    .rc-left { flex: none; min-width: 6.5rem; }
    .rc-ovr { display: flex; align-items: baseline; gap: 6px; }
    .rc-ovr b { font-size: 30px; line-height: 1; font-weight: 900; color: var(--so-paper); font-variant-numeric: tabular-nums; }
    .rc-ovr span { font-size: 11px; font-weight: 700; color: var(--so-muted); text-transform: uppercase; letter-spacing: .08em; }
    .rc-move { margin: 4px 0 0; display: flex; align-items: baseline; gap: 4px; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
    .rc-move small { font-size: 11px; font-weight: 600; color: var(--so-muted); }
    .rc-arrow { font-size: 10px; }
    .rc-up { color: var(--so-volt); }
    .rc-down { color: #fca5a5; }
    .rc-flat { color: var(--so-muted); font-size: 12px; font-weight: 700; }
    .rc-wait { margin: 0; font-size: 12px; color: var(--so-muted); }
    .rc-right { flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid rgba(143,246,255,.14); }
    .rc-result { margin: 0; font-size: 16px; font-weight: 900; color: var(--so-paper); }
    .rc-team { margin: 1px 0 0; font-size: 13px; font-weight: 700; color: rgba(234,240,255,.82); }
    .rc-team-name { font: inherit; color: inherit; text-align: left; }
    .rc-record { margin: 2px 0 0; font-size: 12px; color: var(--so-muted); }
    .rc-badges { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(143,246,255,.12); }
    .rc-badges-lab { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fcd34d; }
    .rc-badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .rc-badge {
      display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px;
      border-radius: 14px; background: rgba(7,11,31,.45); border: 1px solid rgba(252,211,77,.28); color: inherit; text-align: left;
    }
    .rc-badge .bd-hex { width: 34px; height: 38px; padding: 1.5px; }
    .rc-badge .bd-in svg { width: 20px; height: 20px; display: block; }
    .rc-badge-copy { display: flex; flex-direction: column; min-width: 0; }
    .rc-badge-copy b { font-size: 13px; font-weight: 800; color: var(--so-paper); }
    .rc-badge-copy small { font-size: 11px; color: #fcd34d; }
    .rc-badge:focus-visible, .gs-toggle:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }

    /* Line-ups: one block per team, side by side. */
    .lu-card { margin-top: 12px; }
    .lu-kick, .ns-kick {
      display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
      margin: 0 2px 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--so-muted);
    }
    .ns-kick span { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .lu-grid { display: grid; grid-template-columns: repeat(var(--lu-cols, 2), minmax(0, 1fr)); gap: 8px; }
    .lu-team {
      min-width: 0; padding: 8px 8px 6px; border-radius: 16px; background: var(--so-surface-raised);
      border: 1px solid rgba(143,246,255,.1); box-shadow: inset 0 3px 0 var(--lu);
    }
    .lu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
    .lu-team-name { min-width: 0; font-size: 13.5px; font-weight: 900; color: var(--lu); text-align: left; overflow-wrap: break-word; }
    .lu-tag { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--so-muted); background: rgba(255,255,255,.06); }
    .lu-tag.lu-win { color: #070b1f; background: #fcd34d; }
    .lu-list { margin: 0; padding: 0; list-style: none; }
    .lu-p { display: flex; align-items: center; gap: 6px; min-height: 36px; }
    .lu-av {
      position: relative; width: 24px; height: 24px; flex: none; display: grid; place-items: center; overflow: hidden;
      border-radius: 50%; color: #070b1f; font-size: 9.5px; font-weight: 800;
    }
    .lu-name { min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: rgba(234,240,255,.82); text-align: left; overflow-wrap: break-word; }
    .lu-me .lu-name { color: var(--so-volt); font-weight: 800; }
    .lu-none { font-size: 12px; color: var(--so-muted); padding: 6px 0; }

    /* Goal scorers: the top three, the rest one tap away. */
    .gs-card .gs-extra { display: none; }
    .gs-card.is-open .gs-extra { display: list-item; }
    .gs-toggle {
      display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 2px;
      border-top: 1px solid rgba(143,246,255,.08); font-size: 13px; font-weight: 800; color: var(--so-volt);
    }
    .gs-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
    .gs-card.is-open .gs-toggle svg { transform: rotate(180deg); }

    /* Full stats: a smaller face, then a plain table and one row per game. */
    .nd { margin-top: 12px; border-radius: 18px; }
    .nd-face { padding: 12px 14px; }
    .nd-title { font-size: 14px; letter-spacing: .14em; }
    .nd-chev { width: 30px; height: 30px; }
    .nd-stats { margin-top: 8px; gap: 6px; }
    .nd-stat { padding: 6px 4px; border-radius: 11px; }
    .nd-stat b { font-size: 21px; }
    .nd-stat i { font-size: 10px; letter-spacing: .08em; }
    .nd-inside { margin-top: 8px; font-size: 12px; }
    .nd-body { padding: 2px 12px 12px; }
    .nd-body .ns-kick { margin-top: 14px; }
    .ns-table { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
    .ns-row {
      display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto 3rem; align-items: center; gap: 8px;
      min-height: 46px; padding: 4px 8px; border-radius: 12px; background: rgba(7,11,31,.4);
      box-shadow: inset 3px 0 0 var(--lu);
    }
    .ns-first { background: rgba(255,255,255,.03); }
    .ns-mine { outline: 1px solid rgba(45,226,255,.35); outline-offset: -1px; }
    .ns-rank { text-align: center; font-size: 14px; font-weight: 900; color: var(--so-muted); }
    .ns-team { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
    .ns-team small { font-size: 10.5px; font-weight: 800; color: var(--so-volt); }
    .ns-team-name { min-width: 0; font-size: 14px; font-weight: 800; color: var(--so-paper); text-align: left; overflow-wrap: break-word; }
    .ns-wdl { font-size: 12px; font-weight: 600; color: rgba(234,240,255,.7); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .ns-pts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
    .ns-pts b { font-size: 20px; font-weight: 900; color: var(--so-paper); font-variant-numeric: tabular-nums; }
    .ns-row[style*="--pl"] .ns-pts b { color: var(--pl); }
    .ns-pts i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--so-muted); text-transform: uppercase; }
    .ns-ctx { margin-top: 14px; }
    .ns-venue { margin: 0; font-size: 14px; font-weight: 800; color: var(--so-paper); }
    .ns-when { margin: 1px 0 0; font-size: 12px; color: var(--so-muted); }
    .ns-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
    .ns-chips span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 11px; background: rgba(7,11,31,.4); font-size: 11px; color: var(--so-muted); text-align: center; }
    .ns-chips b { font-size: 13px; font-weight: 900; color: var(--so-paper); }
    .ns-chips b.ns-hot { color: var(--so-volt); }
    .ns-setup { margin-top: 8px; border-radius: 11px; background: rgba(7,11,31,.3); padding: 0 10px; }
    .ns-setup summary { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; color: rgba(234,240,255,.75); }
    .ns-setup summary svg { width: 16px; height: 16px; }
    .ns-setup[open] summary svg { transform: rotate(180deg); }
    .ns-setup dl { margin: 0 0 8px; }
    .ns-setup dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(143,246,255,.08); font-size: 12.5px; }
    .ns-setup dt { color: var(--so-muted); }
    .ns-setup dd { margin: 0; font-weight: 700; color: rgba(234,240,255,.82); text-align: right; }

    /* A narrow block (three teams on a small phone) gives the name the room:
       the face goes, the name stays whole. */
    .lu-team { container-type: inline-size; }
    @container (max-width: 104px) {
      .lu-av { display: none; }
      .lu-p { min-height: 30px; }
    }

    /* The table on a narrow phone: the record goes under the team name, so
       the name never has to break inside a word. */
    .ns-team { flex-direction: column; align-items: flex-start; gap: 0; }
    @media (max-width: 380px) {
      .ns-row { grid-template-columns: 1.6rem minmax(0, 1fr) 3rem; grid-template-rows: auto auto; row-gap: 1px; }
      .ns-rank { grid-row: 1 / span 2; }
      .ns-team { grid-column: 2; grid-row: 1; }
      .ns-wdl { grid-column: 2; grid-row: 2; }
      .ns-pts { grid-column: 3; grid-row: 1 / span 2; }
    }

    /* Every game, folded behind its arrow; open, each game is a scoreboard:
       a quiet line saying how it ended, then team · score · team, and under
       each team the players who scored for it (Ron, 2026-10-04). */
    .ns-games-box { margin-top: 14px; border-radius: 14px; background: rgba(7,11,31,.35); }
    .ns-games-face {
      display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px;
      list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; color: rgba(234,240,255,.85);
    }
    .ns-games-face::-webkit-details-marker { display: none; }
    .ns-games-face b {
      min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px;
      font-size: 12px; color: var(--so-volt); background: rgba(45,226,255,.1);
    }
    .ns-games-face svg { width: 18px; height: 18px; margin-left: auto; color: var(--so-volt); transition: transform .2s; }
    .ns-games-box[open] .ns-games-face svg { transform: rotate(180deg); }
    .ns-games-face:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; border-radius: 14px; }
    .ns-games { margin: 0; padding: 0 8px 8px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .ns-game { padding: 8px 10px 10px; border-radius: 12px; background: var(--so-surface-raised); border: 1px solid rgba(143,246,255,.07); }
    .ns-played { border-color: rgba(45,226,255,.28); }
    .ns-game-head {
      display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px;
      font-size: 11.5px; font-weight: 600; color: var(--so-muted);
    }
    .ns-game-head span:first-child { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .ns-game-head span:last-child { text-align: right; }
    .ns-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
    .ns-side { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .ns-a { align-items: flex-end; text-align: right; }
    .ns-b { align-items: flex-start; text-align: left; }
    .ns-side .ns-team-name {
      display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800;
      color: var(--so-paper); overflow-wrap: break-word;
    }
    .ns-a .ns-team-name { flex-direction: row-reverse; text-align: right; }
    .ns-side .ns-team-name::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lu); }
    .ns-lost .ns-team-name { color: rgba(234,240,255,.55); font-weight: 700; }
    .ns-score {
      display: flex; align-items: center; gap: 5px; padding: 0 2px; font-size: 20px; line-height: 1.15;
      font-weight: 900; color: var(--so-paper); font-variant-numeric: tabular-nums;
    }
    .ns-score i { font-style: normal; font-weight: 600; color: rgba(234,240,255,.35); }
    .ns-goals { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.4; color: rgba(234,240,255,.62); }
    .ns-a .ns-goals { align-items: flex-end; }
    .ns-goal { display: inline-flex; align-items: baseline; gap: 4px; }
    .ns-a .ns-goal { flex-direction: row-reverse; }
    /* Mirrored on the left team: the ball at the edge, then ×2, then the name. */
    .ns-a .ns-goal .ns-scorer { order: 1; }
    .ns-goal::before { content: "\26BD"; font-size: 10px; flex: none; }
    .ns-goal small { font-size: 11px; font-weight: 800; color: rgba(234,240,255,.8); }
    .ns-scorer { font: inherit; color: inherit; }
    .ns-scorer.ns-me { color: var(--so-volt); font-weight: 800; }
    .ns-also { margin: 6px 0 0; font-size: 11.5px; color: var(--so-muted); text-align: center; }
    .ns-wdl b { font-weight: 700; color: rgba(234,240,255,.85); }

    /* Photos (Ron, 2026-10-04): the photo is the button. ⋯ sits on the photo
       just under Verified, a glass circle that reads on any picture. */
    .sp-gallery .sp-slab-img { cursor: zoom-in; }
    .sp-photo-menu {
      position: absolute; top: 50px; right: 14px; z-index: 2; pointer-events: auto;
      width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
      color: #fff; background: rgba(7,11,31,.55); border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 4px 14px rgba(0,0,0,.35);
    }
    .sp-photo-menu svg { width: 20px; height: 20px; fill: currentColor; }
    .sp-photo-menu:active { transform: scale(.94); }
    .sp-photo-menu:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .sp-ps-hint { flex: none; font-size: 11px; color: var(--so-muted); }

    /* Full screen: black, the photo whole (never cropped), swiped. */
    .pv {
      position: fixed; inset: 0; z-index: 270; display: flex; flex-direction: column;
      height: 100dvh; overflow: hidden; overscroll-behavior: contain;
      background: #000; color: #fff;
    }
    .pv[hidden] { display: none; }
    .pv-top {
      flex: none;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    }
    .pv-btn {
      width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
      color: #fff; background: rgba(255,255,255,.12); font-size: 26px; line-height: 1;
    }
    .pv-btn svg { width: 22px; height: 22px; fill: currentColor; }
    .pv-btn:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .pv-count { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
    .pv-track {
      flex: 1; min-width: 0; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      scrollbar-width: none; overscroll-behavior: contain;
    }
    .pv-track::-webkit-scrollbar { display: none; }
    .pv-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: 0; height: 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; }
    .pv-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; touch-action: auto; }
    .pv-slide img[hidden], .pv-image-status[hidden] { display: none; }
    .pv-image-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: rgba(255,255,255,.75); pointer-events: none; }
    .pv-foot { flex: none; min-height: 44px; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: rgba(255,255,255,.7); }

    /* The photo menu: an action sheet, one large row per thing to do. */
    #ph-menu { z-index: 280; }
    #ph-menu.hidden { display: none; }
    .pm-panel {
      width: 100%; max-width: 28rem; max-height: calc(100dvh - env(safe-area-inset-top) - 12px); overflow-y: auto; overscroll-behavior: contain;
      padding: 8px 10px max(12px, env(safe-area-inset-bottom));
      border-radius: 22px 22px 0 0; background: #0b1230; border: 1px solid rgba(130,144,196,.22); border-bottom: 0;
    }
    @media (min-width: 640px) { .pm-panel { border-radius: 22px; border-bottom: 1px solid rgba(130,144,196,.22); } }
    .pm-title { margin: 6px 6px 8px; font-size: 12px; font-weight: 700; color: var(--so-muted); text-align: center; }
    .pm-item {
      display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 6px;
      border-radius: 14px; font-size: 15px; font-weight: 800; color: var(--so-paper); text-decoration: none;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    }
    .pm-primary { color: #070b1f; background: var(--so-volt); border-color: var(--so-volt); }
    .pm-item:active { transform: scale(.98); }
    .pm-item:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .pm-danger { color: #fca5a5; }
    .pm-cancel { margin-top: 10px; color: var(--so-muted); background: transparent; }

    /* ── One chat (Ron, 2026-10-04): the same panel on Session Details and
       the Session Summary. Folded behind an arrow, a window of fixed height
       that scrolls inside itself, and a full-screen group chat (#chat-full). */
    .ch {
      margin-top: 12px; border-radius: 18px; overflow: hidden;
      background: linear-gradient(160deg, rgba(45,226,255,.05), rgba(16,24,56,.72) 45%);
      border: 1px solid rgba(130,144,196,.2);
    }
    .ch-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; }
    .ch-fold {
      flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px;
      padding: 0 10px; border-radius: 12px; color: var(--so-paper); text-align: left;
    }
    .ch-title { font-size: 14px; font-weight: 800; }
    .ch-count {
      min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px;
      font-size: 11px; font-weight: 850; color: #2DE2FF; background: rgba(45,226,255,.1); border: 1px solid rgba(45,226,255,.25);
    }
    .ch-fold svg { width: 18px; height: 18px; margin-left: auto; color: var(--so-muted); transition: transform .2s; }
    .ch-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
    .ch-expand {
      width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
      color: #AAB5DA; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    }
    .ch-expand svg { width: 18px; height: 18px; }
    .ch-fold:focus-visible, .ch-expand:focus-visible, .ch-send:focus-visible, .chf-back:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .ch-body[hidden] { display: none; }
    .ch-body { border-top: 1px solid rgba(130,144,196,.14); }
    .ch-scroll {
      max-height: min(46vh, 340px); overflow-y: auto;
      padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 3px;
      -webkit-overflow-scrolling: touch;
    }
    .ch-empty { margin: 10px 4px; font-size: 12.5px; color: var(--so-muted); text-align: center; }
    .ch-note {
      margin: 0 10px 8px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 650;
      color: #AAB5DA; background: rgba(7,11,31,.54); border: 1px solid rgba(255,201,60,.2);
    }
    .ch-day { display: flex; justify-content: center; margin: 8px 0 4px; }
    .ch-day span {
      padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 700;
      color: #AAB5DA; background: rgba(7,11,31,.7);
    }
    .ch-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; margin-top: 5px; }
    .ch-msg.ch-cont { margin-top: 0; }
    .ch-mine { align-self: flex-end; flex-direction: row-reverse; }
    .ch-av { width: 28px !important; height: 28px !important; font-size: 10px; }
    .ch-cont .ch-av { visibility: hidden; height: 0 !important; }
    .ch-bubble {
      min-width: 0; padding: 6px 10px 5px; border-radius: 14px 14px 14px 4px;
      background: #18224d; color: #E6ECFF;
    }
    .ch-cont .ch-bubble { border-radius: 14px; }
    .ch-mine .ch-bubble { border-radius: 14px 14px 4px 14px; background: #135a4e; color: #F0FFF9; }
    .ch-mine.ch-cont .ch-bubble { border-radius: 14px; }
    .ch-name { display: block; font-size: 12px; font-weight: 800; margin-bottom: 1px; }
    .ch-bubble p { margin: 0; font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
    .ch-meta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; font-size: 10.5px; color: rgba(230,236,255,.55); }
    .ch-meta .sp-cmt-del { margin: 0; padding: 0; font-size: 10.5px; color: rgba(230,236,255,.6); text-decoration: underline; }
    .ch-composer { display: flex; gap: 8px; align-items: center; padding: 8px 10px 10px; }
    .ch-input {
      flex: 1; min-width: 0; min-height: 44px; padding: 10px 15px; border-radius: 22px;
      background: var(--so-surface-raised, #121a3d); border: 1px solid var(--so-edge, rgba(130,144,196,.25));
      color: var(--so-paper); font-family: inherit; font-size: 16px;
    }
    .ch-input::placeholder { color: #6b79ad; }
    .ch-send {
      width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
      color: #070b1f; background: var(--so-volt);
    }
    .ch-send svg { width: 20px; height: 20px; }
    .ch-input:disabled + .ch-send { opacity: .5; }

    /* Full screen, like a group chat: a bar on top, the messages, the box at the bottom. */
    .chf {
      position: fixed; inset: 0; z-index: 245; display: flex; flex-direction: column;
      height: 100vh; height: 100dvh; background: #070b1f; color: var(--so-paper);
    }
    .chf[hidden] { display: none; }
    .chf-top {
      display: flex; align-items: center; gap: 8px; flex: none;
      padding: max(8px, env(safe-area-inset-top)) 12px 8px 6px;
      background: #0e1536; border-bottom: 1px solid rgba(130,144,196,.18);
    }
    .chf-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--so-paper); }
    .chf-back svg { width: 24px; height: 24px; }
    .chf-id { min-width: 0; }
    .chf-id h2 { margin: 0; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chf-sub { margin: 1px 0 0; font-size: 12px; color: var(--so-muted); }
    .chf-scroll {
      flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
      background:
        radial-gradient(circle at 20% 10%, rgba(45,226,255,.05), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(176,38,255,.05), transparent 40%);
    }
    .chf-scroll .ch-msg { max-width: 80%; }
    .chf-foot { flex: none; background: #0e1536; border-top: 1px solid rgba(130,144,196,.18); padding-bottom: env(safe-area-inset-bottom); }
    .chf-ro { flex: none; margin: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); text-align: center; font-size: 12.5px; color: var(--so-muted); background: #0e1536; }

    /* A finishing place, one colour everywhere (_placeColor): green first, red last. */
    .sr-result[style*="--pl"] { color: var(--pl); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--pl) 15%, transparent); }
    .rc-result[style*="--pl"] { color: var(--pl); }
    .lu-tag[style*="--pl"] { color: var(--pl); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--pl) 15%, transparent); }
    .lu-tag.lu-win[style*="--pl"] { color: #04170b; background: var(--pl); }
    .ns-row[style*="--pl"] .ns-rank {
      width: 24px; height: 24px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%;
      font-size: 12.5px; font-weight: 900; color: #04170b; background: var(--pl);
    }

    /* ── Home, compact (2026-10-05) ─────────────────────────────────────
       One column a first-time player can read top to bottom: the next session
       (or how to get one), the first steps, what is waiting on them, the week,
       and the wall of sessions as slim rows. */
    .home-col { max-width: 640px; margin-inline: auto; }

    /* The next session. Where you stand is a small tag in the corner; the
       session itself -- name, when, where, who -- is the headline. */
    .hn-card { padding: 14px 15px 15px; }
    .hn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 22px; }
    .hn-tag {
      display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
      font-size: 10.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
      color: #C9D3F5; background: rgba(234,240,255,.07); border: 1px solid rgba(130,144,196,.3);
    }
    .hn-tag-in { color: #3DDC84; background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.42); }
    .hn-tag-live { color: #FF8A8A; background: rgba(255,90,90,.12); border-color: rgba(255,120,120,.45); }
    .hn-tag-live i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5A; box-shadow: 0 0 8px 1px rgba(255,90,90,.8); animation: sp-ask-pulse 1.6s ease-in-out infinite; }
    .hn-soon {
      font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: var(--so-volt); padding: 3px 9px; border-radius: 999px; background: rgba(45,226,255,.1);
    }
    .hn-soon-today { color: #070B1F; background: var(--so-volt); box-shadow: 0 0 14px -2px rgba(45,226,255,.8); }
    .hn-head {
      display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
      font: inherit; color: inherit; cursor: pointer; border-radius: 10px;
    }
    .hn-head:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 3px; }
    .hn-head > span { display: block; }
    .hn-head .hm-kick { margin: 0 0 3px; }
    .hn-title {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 900;
      font-size: 28px; line-height: 1.02; color: #EAF0FF; letter-spacing: .01em;
      overflow-wrap: anywhere;
    }
    .hn-head > .hn-fact { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; font-weight: 600; color: #C9D3F5; min-width: 0; }
    .hn-head > .hn-fact + .hn-fact { margin-top: 3px; color: #8290C4; font-weight: 500; }
    .hn-fact svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--so-volt); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .hn-squad { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
    .hn-faces { display: flex; flex: none; }
    .hn-faces:empty { display: none; }
    .hn-face {
      width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
      font-size: 10px; font-weight: 800; color: #070B1F; border: 2px solid #131c44; margin-left: -8px;
      position: relative; overflow: hidden;
    }
    .hn-face:first-child { margin-left: 0; }
    .hn-face-more { background: #22306B; color: #EAF0FF; font-size: 9.5px; }
    .hn-squad-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .hn-going { font-size: 12.5px; color: #8290C4; }
    .hn-going .hm-count { margin: 0; font-size: 13px; font-weight: 800; color: #EAF0FF; }
    .hn-left { font-size: 11px; color: #8290C4; }
    .hn-bar { display: block; height: 4px; margin: 9px 0 7px; border-radius: 999px; background: rgba(34,48,107,.9); overflow: hidden; }
    .hn-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2DE2FF, #B026FF); }
    .hn-card .hm-names { font-size: 11.5px; }
    .hn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .hn-btns .hm-btn { padding: 11px 0; }
    .hn-btns .hm-btn-solid { grid-column: auto; }
    .hn-btns .hm-btn-solid.hn-wide { grid-column: 1 / -1; }
    .hn-lede { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #AEB9E2; }

    /* First steps. Each row ticks itself off; done rows fade. */
    .hg-card { padding: 13px 14px 8px; border-color: rgba(176,38,255,.32);
      background: radial-gradient(120% 90% at 100% 0%, rgba(176,38,255,.12), transparent 60%), #101838; }
    .hg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .hg-head .hm-kick { margin: 0 0 2px; color: #C77BFF; }
    .hg-title { margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1; color: #EAF0FF; }
    .hg-hide {
      flex: none; min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(130,144,196,.3);
      background: none; color: #8290C4; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    }
    .hg-progress { height: 4px; margin: 10px 0 4px; border-radius: 999px; background: rgba(34,48,107,.9); overflow: hidden; }
    .hg-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B026FF, #2DE2FF); }
    .hg-steps { display: flex; flex-direction: column; }
    .hg-step {
      display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; padding: 7px 0;
      background: none; border: 0; border-top: 1px solid rgba(34,48,107,.55); text-align: left;
      font: inherit; color: inherit;
    }
    .hg-step:first-child { border-top: 0; }
    button.hg-step { cursor: pointer; }
    button.hg-step:active { transform: scale(.99); }
    .hg-mark {
      width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
      font-size: 11.5px; font-weight: 800; color: var(--so-volt); border: 1.5px solid rgba(45,226,255,.5);
    }
    .hg-done .hg-mark { color: #070B1F; background: #3DDC84; border-color: #3DDC84; }
    .hg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .hg-txt b { font-size: 13.5px; font-weight: 700; color: #EAF0FF; }
    .hg-txt small { font-size: 11.5px; color: #8290C4; margin-top: 1px; }
    .hg-done .hg-txt b { color: #8290C4; text-decoration: line-through; text-decoration-color: rgba(130,144,196,.5); }
    .hg-go { flex: none; font-size: 22px; line-height: 1; color: var(--so-volt); }

    /* Needs you, tighter. */
    #home-needs .hm-card { padding: 12px 14px; }
    #home-needs .hm-task { padding: 8px 0; }
    #home-needs .hm-task:first-child { padding-top: 0; }
    #home-needs .hm-task:last-child { padding-bottom: 0; }
    #home-needs .hm-task p { font-size: 12.5px; line-height: 1.35; }

    /* Players of the Week, compact rows. */
    .hm-pod { padding: 12px 13px 4px; }
    .hm-pod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .hm-pod-head .hm-kick { margin: 0; color: #FFC93C; white-space: nowrap; }
    .hm-pod-head .hm-pod-when { white-space: nowrap; }
    .hm-pod-rule { margin: -2px 0 6px; font-size: 11px; color: #8290C4; }
    .hm-pod-row { padding: 6px 0; gap: 10px; }
    .hm-pod .au-av { width: 30px; height: 30px; font-size: 11px; }
    .hm-pod .hm-pod-1 .au-av { width: 36px; height: 36px; font-size: 13px; }
    .hm-pod-name { font-size: 15px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hm-pod .hm-pod-1 .hm-pod-name { font-size: 16px; }
    .hm-pod-sub { font-size: 11px; margin-top: 1px; }
    .hm-pod .hm-sc { font-size: 16px; }

    /* Your rival, one row. */
    .hm-card.hm-rival { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
    .hm-rival-run { flex: none; display: flex; flex-direction: column; align-items: center; width: 34px; line-height: 1; }
    .hm-rival-run b { font-size: 24px; color: #FF6B6B; font-weight: 900; }
    .hm-rival-run small { margin-top: 2px; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,107,107,.75); white-space: nowrap; }
    .hm-rival-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .hm-rival-txt .hm-kick { margin: 0 0 1px; color: #FF6B6B; font-size: 9px; }
    .hm-rival-name { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .hm-rival-rule { font-size: 11px; line-height: 1.35; color: #8290C4; margin-top: 2px; }

    /* The wall: each group is headed by WHOSE sessions they are. */
    .nr-group + .nr-group { margin-top: 18px; }
    .nr-group .sp-feed-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 2px 9px; }
    .nr-group .sp-feed-head .nr-who {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 17px; font-weight: 800;
      letter-spacing: .06em; text-transform: uppercase; color: var(--so-paper); line-height: 1.1;
    }
    .nr-group .sp-feed-head .nr-who-ico {
      width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center;
      background: rgba(45,226,255,.12); border: 1px solid rgba(45,226,255,.4);
    }
    .nr-who-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--so-volt); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .nr-group-world .sp-feed-head .nr-who-ico { background: rgba(176,38,255,.12); border-color: rgba(176,38,255,.45); }
    .nr-group-world .nr-who-ico svg { stroke: #C77BFF; }
    .nr-group .sp-feed-head h3 {
      margin: 0 0 0 34px; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
      color: var(--so-muted);
    }
    .nr-list { display: flex; flex-direction: column; gap: 8px; }

    /* One session, one slim row. The like/comment pills sit over the row's
       bottom-right corner, outside the open button (a button inside a button
       is invalid), so the open button keeps room for them. */
    .sp-card.nr { position: relative; margin: 0; border-radius: 16px; }
    .nr .sp-ask { padding: 7px 12px; font-size: 12px; gap: 8px; }
    .nr .sp-ask i { font-size: 17px; }
    .nr-body { display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 10px; }
    .nr-thumb {
      width: 58px; height: 58px; flex: none; border-radius: 12px; overflow: hidden; position: relative;
      display: grid; place-items: center;
      background: linear-gradient(150deg, rgba(45,226,255,.16), rgba(176,38,255,.14)), #0b1230;
      border: 1px solid rgba(130,144,196,.22);
    }
    .nr-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .nr-trophy { width: 28px; height: 28px; color: #FFC93C; filter: drop-shadow(0 0 8px rgba(255,201,60,.45)); }
    .nr-thumb-txt { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 24px; font-weight: 900; color: #EAF0FF; }
    .nr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .nr-eyebrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .nr-when {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--so-muted);
    }
    .nr-eyebrow .sp-tick { flex: none; gap: 3px; padding: 0 6px 0 2px; font-size: 8px; letter-spacing: .08em; }
    .nr-eyebrow .sp-tick i { width: 11px; height: 11px; }
    .nr-title {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 18px; font-weight: 800;
      line-height: 1.12; color: var(--so-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .nr-won { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--so-volt); }
    .nr .sp-caption { padding: 0; gap: 5px; align-items: center; min-width: 0; }
    .nr .sp-caption-ico { font-size: 11px; line-height: 1; }
    .nr .sp-caption p { font-size: 12px; font-weight: 500; line-height: 1.3; color: #C9D3F5;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .nr-line { font-size: 12px; color: #C9D3F5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nr-squad { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-right: 48px; min-width: 0; }
    .nr.nr-nopts .nr-squad { padding-right: 92px; }
    .nr-faces { display: flex; flex: none; }
    .nr-faces:empty { display: none; }
    .nr-face {
      width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden;
      font-size: 7.5px; font-weight: 800; color: #070B1F; border: 1.5px solid var(--so-surface-raised); margin-left: -6px;
    }
    .nr-face:first-child { margin-left: 0; }
    .nr-meta { font-size: 11px; color: var(--so-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .nr-pts { flex: none; display: flex; flex-direction: column; align-items: center; align-self: flex-start; line-height: 1; padding-top: 2px; }
    .nr-pts b {
      font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 26px; font-weight: 900;
      background: linear-gradient(160deg, #8FF6FF, #2DE2FF 40%, #B026FF); -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .nr-pts small { margin-top: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--so-muted); }
    .nr-foot { position: absolute; right: 8px; bottom: 7px; display: flex; gap: 2px; }
    .nr-foot .sp-act { padding: 4px 6px; font-size: 11.5px; gap: 4px; border-radius: 12px; border-color: transparent; background: rgba(234,240,255,.04); }
    .nr-foot .sp-act svg { width: 12px; height: 12px; }
    .nr-foot .sp-act.sp-static { padding: 4px 2px; }

    /* ── Profile, synced sections (2026-10-05) ───────────────────────── */
    .pf-sec-head { display: flex; align-items: baseline; gap: 8px; padding: 0 1px; margin-bottom: 4px; }
    .pf-sec-head .hm-kick { margin: 0; }
    .pf-sec-count { font-size: 11px; font-weight: 800; color: var(--so-volt); padding: 1px 7px; border-radius: 999px; background: rgba(45,226,255,.12); }
    .pf-sec-note { margin: 0 0 4px; padding: 0 4px; font-size: 11px; color: rgba(234,240,255,.38); }

    /* The rep line, moved from Home: one tappable row above OVR Trend. */
    .hm-rep.rp-card {
      gap: 11px; padding: 10px 12px; border-radius: 16px; text-align: left;
      background: linear-gradient(100deg, rgba(45,226,255,.08), rgba(176,38,255,.08)), #101838;
      border: 1px solid #22306B;
    }
    .hm-rep.rp-card:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .rp-card .au { flex: none; }
    .rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .rp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .rp-label { color: #EAF0FF; font-size: 12px; letter-spacing: .1em; }
    .rp-rep { font-size: 11px; font-weight: 800; color: var(--so-volt); white-space: nowrap; }
    .rp-card .hm-repbar { flex: none; height: 5px; }
    .rp-next { font-size: 10.5px; line-height: 1.3; color: #8290C4; }
    .rp-go { flex: none; font-size: 22px; line-height: 1; color: var(--so-volt); }

    /* My Sessions: the rest of a long group waits behind "Show N more". */
    .ms-group .ms-extra { display: none; }
    .ms-group.ms-open .ms-extra { display: contents; }
    .ms-more { margin-top: 8px; }
    .mm-actions .up-hide { min-height: 2rem; margin-left: 0; }
    /* The narrowest phones: the count matters more than three tiny faces. */
    @media (max-width: 359px) {
      /* The eye icon alone; its name stays on aria-label. */
      .mm-actions .up-hide { font-size: 0; gap: 0; padding: 0 .5rem; }
    }

    /* ── Sessions tab: Upcoming / Played and one filter (2026-10-05) ───── */
    .ss-col { max-width: 760px; margin-inline: auto; }
    .ss-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 2px 12px; }
    .ss-lede { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--so-muted); }
    .ss-create { flex: none; padding-inline: 14px; min-height: 40px; }
    .ss-bar { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
    .ss-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 14px;
      background: #0b1230; border: 1px solid rgba(130,144,196,.22); }
    .ss-seg-btn { min-height: 38px; border-radius: 11px; font-size: 13px; font-weight: 800; color: #8290C4;
      background: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
    .ss-seg-btn.is-on { color: #070B1F; background: linear-gradient(96deg, #2DE2FF, #8FF6FF); box-shadow: 0 6px 18px -10px rgba(45,226,255,.9); }
    .ss-seg-btn:focus-visible, .ss-filter-btn:focus-visible, .ss-chip:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .ss-filter-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px;
      border-radius: 14px; color: #EAF0FF; background: #101838; border: 1px solid rgba(130,144,196,.3);
      font-size: 13px; font-weight: 750; cursor: pointer; }
    .ss-filter-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .ss-filter-btn.is-on { border-color: rgba(45,226,255,.6); color: var(--so-volt); background: rgba(45,226,255,.08); }
    .ss-filter-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
      font-size: 10.5px; font-weight: 900; color: #070B1F; background: var(--so-volt); }
    .ss-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
    .ss-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 6px 0 11px; border-radius: 999px;
      font-size: 12px; font-weight: 700; color: var(--so-volt); background: rgba(45,226,255,.1); border: 1px solid rgba(45,226,255,.35); cursor: pointer; }
    .ss-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ss-chip i { font-style: normal; font-size: 16px; line-height: 1; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(45,226,255,.16); }
    .ss-chip-all { padding: 0 11px; color: #AAB5DA; background: none; border-color: rgba(130,144,196,.3); }
    .ss-empty { padding: 28px 16px; }
    .ss-clear-btn { margin-top: 10px; min-height: 36px; padding: 0 14px; border-radius: 11px; font-size: 12px; font-weight: 800;
      color: var(--so-volt); background: rgba(45,226,255,.08); border: 1px solid rgba(45,226,255,.35); cursor: pointer; }
    .ss-empty-row { margin: 0; padding: 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--so-muted);
      background: #0b1230; border: 1px dashed rgba(130,144,196,.25); display: flex; flex-direction: column; align-items: flex-start; }
    .ss-more { margin-top: 8px; }
    #ss-played .nr-group + .nr-group { margin-top: 22px; }
    #ss-filter-sheet { z-index: 260; }
    #ss-filter-sheet.hidden { display: none; }
    .ssf-kick { color: var(--so-volt); }
    .ssf-select { width: 100%; min-height: 44px; }
    .ssf-dates { margin-top: 4px; }

    /* Home: the way from the few newest to all of them. */
    .nr-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 8px;
      border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--so-volt); background: rgba(45,226,255,.05);
      border: 1px solid rgba(45,226,255,.25); cursor: pointer; }
    .nr-more i { font-style: normal; font-size: 18px; line-height: 1; }
    .nr-more:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .ss-filter-count.hidden, .ss-chips.hidden { display: none; }

    /* Each list's own filter row (Ron, 2026-10-05): the usual dates are one tap,
       the Filter button holds city, pitch and exact dates. */
    .ss-seg { flex: 1; }
    .ss-tools { margin: 2px 0 12px; }
    .ss-tools-row { display: flex; align-items: center; gap: 8px; }
    .ss-quick { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
      padding: 2px 2px 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
      mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .ss-quick::-webkit-scrollbar { display: none; }
    .ss-q { flex: none; min-height: 36px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 750;
      color: #AAB5DA; background: #101838; border: 1px solid rgba(130,144,196,.25); cursor: pointer; white-space: nowrap; }
    .ss-q.is-on { color: #070B1F; background: var(--so-volt); border-color: var(--so-volt); }
    .ss-q:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; }
    .ss-tools .ss-filter-btn { min-height: 38px; padding: 0 11px; }
    .ss-tools .ss-chips { padding: 8px 0 0; }
    @media (max-width: 359px) { .ss-tools .ss-filter-btn span { display: none; } }

    /* Faces on the shared session card: who is in, at a glance. */
    .up-faces { display: flex; flex: none; }
    .up-face { width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden;
      font-size: 8px; font-weight: 800; color: var(--so-volt); background: #17224A; border: 1.5px solid var(--so-surface-raised); }
    .up-face:first-child { margin-left: 0; }
    .up-fill .up-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .up-fill .up-bar { min-width: 2.5rem; }

    /* ── Session rows with a real photo (Ron, 2026-10-05) ───────────────
       Home, the Sessions tab and both profiles show a finished session the
       same way: a wide 4:3 frame for the night's photo that stands out, and a
       row a little roomier than before. Without a photo the same frame holds
       the trophy, the score or the pitch mark, so every row lines up. */
    .nr-body { gap: 13px; padding: 12px 14px 12px 12px; }
    .nr-thumb, .sr-thumb {
      width: 112px; height: 84px; border-radius: 14px; flex: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 22px -14px rgba(45,226,255,.55);
    }
    .nr-thumb.nr-has-photo::after, .sr-thumb.sr-has-photo::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: linear-gradient(180deg, rgba(7,11,31,0) 55%, rgba(7,11,31,.35));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .nr-trophy { width: 34px; height: 34px; }
    .nr-thumb-txt { font-size: 28px; }
    .nr-title { font-size: 19px; }
    .nr .sp-caption p, .nr-line { font-size: 12.5px; }
    .nr-face { width: 22px; height: 22px; font-size: 8px; }
    .sr-row { gap: .85rem; padding: .7rem .85rem .7rem .7rem; }
    .sr-thumb svg { width: 46%; height: 46%; }
    .sr-title { font-size: .98rem; }
    .sr-body { gap: .25rem; }
    .mm-row .sr-thumb { align-self: flex-start; }
    @media (max-width: 359px) {
      .nr-thumb, .sr-thumb { width: 92px; height: 72px; }
      .nr-body { gap: 10px; padding: 10px 10px 10px 10px; }
    }
    /* Who played sits on the photo's corner, like a post: the text keeps its room. */
    .nr-thumb .nr-faces { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: flex; }
    .nr-thumb.nr-has-photo::after { z-index: 1; }
    .nr-thumb .nr-face { border-color: rgba(7,11,31,.85); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
    .nr-thumb:not(.nr-has-photo) .nr-trophy, .nr-thumb:not(.nr-has-photo) .nr-thumb-txt { margin-bottom: 14px; }
    /* The night's sentence may take two lines before it is cut. */
    .nr .sp-caption { align-items: flex-start; }
    .nr .sp-caption-ico { line-height: 1.3; }
    .nr .sp-caption p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    /* Your own played rows: the photo on the left, the words and the buttons
       stacked beside it, so nothing drops under the photo and leaves a hole. */
    .mm-row.mm-played { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: .45rem; align-items: start; }
    .mm-row.mm-played > .sr-thumb { grid-row: 1 / span 2; }
    .mm-row.mm-played > .mm-text, .mm-row.mm-played > .mm-actions { grid-column: 2; }
    .mm-row.mm-played > .mm-actions { justify-content: flex-start; margin-left: 0; }
    /* Your own played row is the visitor's row, with Hide as a small eye in its
       bottom corner, outside the button (a button in a button is invalid). */
    .mm-played-row { position: relative; min-width: 0; }
    .mm-played-row > .sr-row { padding-right: 2.6rem; }
    .mm-played-row > .up-hide { position: absolute; right: .3rem; bottom: .3rem; min-height: 2.25rem; padding: 0 .5rem; font-size: 0; gap: 0; margin: 0; }
    /* A won session keeps its gold edge until the place colour (from the night card) arrives. */
    .mm-played-row.mm-won > .sr-row { border-color: rgba(251,191,36,.3); }
    .mm-played-row.mm-won > .sr-row:not([style*="--pl"]) { box-shadow: inset 3px 0 #fbbf24; }
    .sr-confirm { padding: .12rem .45rem; border-radius: .45rem; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
      color: #070B1F; background: var(--so-volt); box-shadow: 0 0 12px -2px rgba(45,226,255,.8); }

    /* ── Sessions as posts (Ron, 2026-10-05: "like Instagram") ──────────
       Head (who played, when, where), the photo across the whole card with
       the result written on it, the night's sentence, the like bar. */
    .sp-card.nr.np { border-radius: 18px; }
    .np-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 9px; }
    .np-faces { display: flex; flex: none; }
    .np-faces:empty { display: none; }
    .np-face {
      width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden;
      font-size: 10px; font-weight: 800; color: #070B1F; border: 2px solid var(--so-surface-raised); margin-left: -10px;
    }
    .np-face:first-child { margin-left: 0; }
    .np-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .np-name { font-size: 13px; color: #C9D3F5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .np-name b { color: var(--so-paper); font-weight: 800; }
    .np-head .nr-when { font-size: 10px; }
    .np-head .sp-tick { flex: none; gap: 3px; padding: 0 7px 0 2px; font-size: 8.5px; letter-spacing: .08em; }
    .np-head .sp-tick i { width: 12px; height: 12px; }
    /* The photo is the post: full width, 16:10. No photo, a shorter banner. */
    .np-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
      background: linear-gradient(150deg, rgba(45,226,255,.18), rgba(176,38,255,.16)), #0b1230; }
    .np-media:not(.np-has-photo) { aspect-ratio: 21 / 8; }
    .np-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .np-weave { position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(45deg,  rgba(45,226,255,0.13) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(176,38,255,0.13) 0 1px, transparent 1px 9px); }
    .np-mark { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; color: #FFC93C; opacity: .9;
      filter: drop-shadow(0 0 12px rgba(255,201,60,.45)); }
    .np-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,31,0) 35%, rgba(7,11,31,.88)); }
    .np-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; }
    .np-result { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .np-result .nr-won { font-size: 10.5px; letter-spacing: .14em; }
    .np-title { font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-size: 26px; font-weight: 900; line-height: 1.02;
      color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .np-shape { margin-top: 2px; font-size: 11.5px; color: rgba(234,240,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .np-over .nr-pts { align-self: flex-end; padding: 0; }
    .np-over .nr-pts b { font-size: 34px; }
    .np-over .nr-pts small { color: rgba(234,240,255,.8); }
    .np-text { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 4px; }
    .np .sp-caption { padding: 0; }
    .np .sp-caption p { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .np .nr-meta { font-size: 11.5px; }
    /* The bar under the post, in the flow (not over the corner). */
    .np > .nr-foot { position: static; display: flex; align-items: center; gap: 4px; padding: 4px 10px 10px; }
    .np > .nr-foot .sp-act { padding: 6px 10px; font-size: 12.5px; gap: 6px; border-radius: 14px; }
    .np > .nr-foot .sp-act svg { width: 15px; height: 15px; }
    .np-spacer { flex: 1; }
    .np-open { display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px 6px 10px; border: 0; background: none; cursor: pointer;
      font: inherit; font-size: 12.5px; font-weight: 700; color: var(--so-volt); }
    .np-open i { font-style: normal; font-size: 17px; line-height: 1; }
    .np-open:focus-visible { outline: 2px solid var(--so-volt); outline-offset: 2px; border-radius: 8px; }
    .nr-list { gap: 14px; }

    /* While the Live Room pill floats over the bottom of a tab, the tab ends
       with room for it, so the last row is never hidden behind it. */
    body.lr-pill-on .app-screen::after { content: ""; display: block; height: 68px; }
    .lg-foot-now .lr-dot { background: #4ADE80; }

    /* ── Correcting a saved game (2026-10-10) ───────────────────────────── */
    .lg-past { display: grid; gap: 6px; }
    .lg-edit-game { justify-self: end; min-height: 36px; padding: 0 14px; border-radius: 999px;
                    border: 1px solid rgba(255,201,60,0.45); background: rgba(255,201,60,0.08); color: #FFC93C;
                    font-size: 12.5px; font-weight: 800; }
    .lg-edit-game:active { transform: scale(0.97); }
    .ge-sheet { max-height: 88vh; overflow-y: auto; }
    .ge-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 6px 0 10px; }
    .ge-side { min-width: 0; padding: 12px 10px; border-radius: 16px; background: rgba(255,255,255,0.04);
               border: 1px solid var(--lg-bd); text-align: center; }
    .ge-step { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
    .ge-step b { min-width: 2ch; font-family: "Saira Condensed", Oswald, Impact, sans-serif; font-weight: 800; font-size: 54px;
                 line-height: 1; color: #EAF0FF; font-variant-numeric: tabular-nums; }
    .ge-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--lg-c); background: var(--lg-lo);
              color: #EAF0FF; font-size: 24px; font-weight: 700; line-height: 1; }
    .ge-btn:disabled { opacity: 0.3; }
    .ge-btn:active { transform: scale(0.94); }
    .lg-x { font-style: normal; margin-left: 2px; color: #9aa8d5; font-weight: 700; }
    .ge-q { margin-top: 10px; font-size: 12px; font-weight: 700; color: #EAF0FF; }
    .ge-q small { display: block; font-weight: 500; color: #8290C4; }
    .ge-faces { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
    .ge-face { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 10px 0 4px;
               border-radius: 999px; border: 1px dashed var(--lg-c); background: transparent; color: #EAF0FF; font-size: 12px; font-weight: 600; }
    .ge-face span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lg-edit-game:focus-visible, .ge-btn:focus-visible, .ge-face:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }

    /* ══════════════════════════════════════════════════════════════════
       Easy to read (2026-10-10). The app is used by players of every age,
       including people who do not read small grey print. Each block below
       belongs to one area of the app; keep a rule in its own block.
       ══════════════════════════════════════════════════════════════════ */

    /* ── A. Whole app: text size floor, contrast, tap targets ─────────── */
    /* A1. Text size floor */
    /* Print smaller than 11px cannot be read by many players, whatever the
       layout wanted. Tailwind's arbitrary tiny sizes are raised here once,
       for every screen, instead of one by one. */
    .text-\[8px\], .text-\[9px\] { font-size: 11px; }
    .text-\[10px\] { font-size: 12px; }
    .text-\[11px\] { font-size: 12.5px; }
    .text-xs { font-size: 13px; line-height: 1.35; }
    /* iOS zooms the page when a field under 16px gets focus. */
    input, select, textarea { font-size: max(16px, 1em); }
    /* end of A1
       .
       .
       .                                                                  */

    /* A2. Contrast of grey text */
    /* Grey text at 25-45% white measured 2.2-4.5:1 on the page background;
       anything a player has to read needs at least 4.5:1. */
    .text-white\/25 { color: rgba(255, 255, 255, 0.55); }
    .text-white\/30 { color: rgba(255, 255, 255, 0.60); }
    .text-white\/35 { color: rgba(255, 255, 255, 0.62); }
    .text-white\/40 { color: rgba(255, 255, 255, 0.66); }
    .text-white\/45 { color: rgba(255, 255, 255, 0.70); }
    .placeholder\:text-white\/30::placeholder,
    .placeholder\:text-white\/25::placeholder,
    .placeholder\:text-white\/20::placeholder { color: rgba(255, 255, 255, 0.5); }
    /* end of A2
       .
       .
       .                                                                  */

    /* A3. Confirm and reason dialogs */
    /* A question the app asks must be read and answered without squinting:
       big text, big buttons, the safe choice clearly readable. */
    #app-confirm-modal > div, #app-reason-modal > div { max-width: 24rem; padding: 24px 20px 20px; }
    #app-confirm-message, #app-reason-message { font-size: 17px; line-height: 1.5; font-weight: 600; }
    #app-confirm-modal button, #app-reason-modal button {
      min-height: 52px; font-size: 16px; padding: 0 12px; border-radius: 14px;
    }
    #app-confirm-cancel, #app-reason-modal button[data-action^="_appReasonResolve"] {
      color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.28);
    }
    #app-reason-input { font-size: 16px; }
    #app-reason-error { font-size: 14px; }
    /* end of A3
       .
       .
       .                                                                  */

    /* A4. Toasts */
    /* The inline style sets a 320px cap on #app-toast; !important is the only way past it. */
    #app-toast { max-width: 360px !important; width: calc(100% - 32px) !important; padding: 14px 16px; }
    #app-toast-msg { color: #fff; font-size: 15px; line-height: 1.4; }
    /* end of A4
       .
       .
       .                                                                  */

    /* end of block A
       (spacer so the blocks below never share a diff hunk with this one)
       .
       .
       .
       .                                                                  */

    /* ── B. Landing, sign-in, top bar, bottom bar, Home ───────────────── */
    /* B.H1 Top bar and bottom navigation */
    /* The logo is a way home, like on any website. */
    .topbar-home { min-height: 44px; padding: 0 4px 0 0; border-radius: 12px; background: none; }
    .topbar-home:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* Bell and avatar were 36px circles: too small to hit with a thumb. */
    #notif-bell, #account-menu-toggle { width: 44px; height: 44px; }
    #notif-bell svg { width: 22px; height: 22px; }
    #account-menu-dropdown { width: 17.5rem; }
    #account-menu-dropdown > button {
      min-height: 48px; font-size: 16px; color: #EAF0FF;
    }
    #account-menu-dropdown > button svg { width: 20px; height: 20px; color: #C9D3F5; }
    #profile-privacy-status { font-size: 13px; color: rgba(255,255,255,.7); }

    /* Bottom bar: bigger icons and labels, a light grey that can be read,
       and the tab you are on sits in one filled pill (icon and word). */
    .mobile-dock [data-tab] {
      min-width: 0; flex: 1 1 0; min-height: 3.75rem;
      gap: 2px; padding: 4px 2px; border-radius: 18px;
      color: #C9D3F5;
    }
    .mobile-dock .nav-icon { width: 24px; height: 24px; }
    .mobile-dock .nav-icon:not(.text-teal-glow) { color: #C9D3F5; }
    .mobile-dock .nav-label { font-size: 13px; line-height: 1.2; white-space: nowrap; }
    .mobile-dock .nav-label:not(.text-teal-glow) { color: #C9D3F5; }
    .mobile-dock .nav-icon-wrap { width: 2.25rem; height: 2.25rem; }
    .mobile-dock [data-tab]:has(.nav-on) {
      background: linear-gradient(150deg, rgba(45,226,255,0.20), rgba(176,38,255,0.16));
      box-shadow: inset 0 0 0 1px rgba(45,226,255,0.4);
    }
    .mobile-dock [data-tab]:has(.nav-on) .nav-on { background: none; box-shadow: none; }
    .mobile-dock [data-tab]:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* end of B.H1
       .
       .                                                              */
    /* B.H2 Landing page (signed out) */
    /* The headline says what the app is for, in ordinary words, and is set
       so it reads as a sentence: no capitals, normal spacing between letters. */
    .landing-eyebrow {
      color: #C9D3F5; font-size: 15px; font-weight: 700;
      letter-spacing: 0; text-transform: none;
    }
    .landing-title {
      max-width: 14ch;
      font-size: clamp(2.6rem, 6vw, 5.2rem);
      letter-spacing: 0;
      line-height: 1.05;
      text-transform: none;
    }
    .landing-subtitle { color: #C9D3F5; font-size: 18px; line-height: 1.5; }
    /* One clear main button, one outlined button under it. */
    .landing-action { min-height: 3.5rem; font-size: 17px; }
    .landing-action-primary,
    .landing-action-primary:hover {
      color: #070B1F;
      background: #2DE2FF;
      box-shadow: 0 12px 32px -15px rgba(45, 226, 255, 0.9);
      opacity: 1;
    }
    .landing-action-secondary {
      font-size: 16px; font-weight: 700;
      border-color: rgba(234, 240, 255, 0.45);
    }
    .landing-proof { color: #C9D3F5; font-size: 15px; }
    .landing-playbook-head {
      color: #C9D3F5; font-size: 15px; font-weight: 700;
      letter-spacing: 0; text-transform: none;
    }
    .landing-playbook h2 { text-transform: none; letter-spacing: 0; line-height: 1.1; }
    .landing-step-number { font-size: 18px; }
    .landing-steps strong { font-size: 17px; }
    .landing-steps div > span { color: #C9D3F5; font-size: 15px; }
    .landing-playbook-note { color: #C9D3F5; font-size: 15px; }
    .landing-secondary-actions { color: #C9D3F5; font-size: 15px; }
    .landing-secondary-actions button { color: #C9D3F5; text-decoration: underline; }
    .landing-action:focus-visible,
    .landing-secondary-actions button:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 3px; }
    @media (max-width: 479px) {
      .landing-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
      .landing-subtitle { font-size: 17px; }
      .landing-action-primary { min-height: 3.5rem; }
    }
    /* end of B.H2
       .
       .                                                              */
    /* B.H3 Sign-in / sign-up dialog */
    #login-modal .auth-sub { font-size: 14px; color: rgba(255,255,255,.7); }
    #login-modal .auth-footnote { font-size: 13px; color: rgba(255,255,255,.6); }
    #tab-signin, #tab-signup { min-height: 48px; font-size: 16px; }
    #tab-signin.text-white\/40, #tab-signup.text-white\/40 { color: rgba(255,255,255,.7); }
    /* Google / Facebook first, one full-width button each. */
    #oauth-provider-options { margin: 0 0 1.25rem; }
    #login-modal .auth-oauth-buttons { display: grid; gap: .5rem; }
    #login-modal .auth-oauth-buttons button {
      min-height: 52px; font-size: 16px; font-weight: 600; color: #EAF0FF;
      border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06);
    }
    #login-modal .auth-oauth-buttons svg { width: 20px; height: 20px; }
    #login-modal .auth-divider { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
    #login-modal .auth-divider span { font-size: 13px; color: #C9D3F5; }
    /* Labels read as words, inputs are big enough to tap. */
    #login-modal form label[for] {
      font-size: 14px; font-weight: 600; color: #C9D3F5;
      letter-spacing: 0; text-transform: none;
    }
    #login-modal input[type="email"],
    #login-modal input[type="password"],
    #login-modal input[type="text"] {
      min-height: 52px; font-size: 16px;
      border-color: rgba(255,255,255,.28);
    }
    #login-modal input::placeholder { color: rgba(255,255,255,.45); }
    #login-modal .so-button-primary { min-height: 52px; font-size: 17px; }
    /* A failed sign-in is a clear red box, not a line of tiny red print. */
    #login-error:not(:empty), #reg-error:not(:empty) {
      margin-top: 0; padding: 10px 12px;
      font-size: 15px; line-height: 1.4; color: #FFC9C4;
      background: rgba(255,59,48,.12); border: 1px solid rgba(255,90,80,.55); border-radius: 12px;
    }
    #login-error:not(:empty)::before, #reg-error:not(:empty)::before { content: "\26A0\FE0E  "; }
    #login-modal .auth-forgot { font-size: 14px; line-height: 1.45; color: #C9D3F5; text-align: center; }
    #login-modal .auth-forgot a { color: #2DE2FF; text-decoration: underline; overflow-wrap: anywhere; }
    /* Consent: bigger boxes and print. */
    #policy-consent-block { font-size: 14px; color: rgba(255,255,255,.8); }
    #policy-consent-block input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin-top: 0; }
    #policy-consent-block legend { font-size: 15px; }
    /* end of B.H3
       .
       .                                                              */
    /* B.H4 Home: next-session card, section kickers */
    /* Section headings on Home read as words, not tiny spaced-out capitals. */
    [data-section="feed"] .hm-kick {
      font-size: 13px; letter-spacing: .06em; text-transform: none; font-weight: 800;
    }
    .hn-tag, .hn-soon { font-size: 13px; letter-spacing: .02em; text-transform: none; padding: 4px 11px; }
    .hn-head > .hn-fact { font-size: 15px; }
    .hn-head > .hn-fact + .hn-fact { color: #C9D3F5; }
    .hn-fact svg { width: 18px; height: 18px; }
    .hn-going { font-size: 15px; color: #C9D3F5; }
    .hn-going .hm-count { font-size: 15px; }
    .hn-left, .hn-card .hm-names { font-size: 14px; color: #C9D3F5; }
    .hn-card .hm-names { margin-top: 10px; }
    .hn-face { width: 34px; height: 34px; font-size: 12px; }
    .hn-face-more { font-size: 12px; }
    .hn-lede { font-size: 15px; color: #C9D3F5; }
    /* One big main button across the card; "Details" is a plain link under it. */
    .hn-btns { grid-template-columns: 1fr; gap: 4px; margin-top: 14px; }
    .hn-btns .hm-btn { min-height: 50px; padding: 12px 0; font-size: 16px; border-radius: 13px; }
    .hn-btns .hm-btn-solid { grid-column: 1 / -1; background: #2DE2FF; color: #070B1F; }
    .hn-card:not(.hn-empty) .hn-btns .hm-btn-ghost {
      min-height: 44px; background: none; border: 0; color: #2DE2FF;
      text-decoration: underline; text-underline-offset: 3px; font-weight: 700;
    }
    .hn-empty .hn-btns .hm-btn-ghost { border-color: rgba(234,240,255,.45); }
    .hn-btns .hm-btn:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* The live dot pulses a few times, then rests. */
    .hn-tag-live i { animation-iteration-count: 3; }
    @media (prefers-reduced-motion: reduce) { .hn-tag-live i { animation: none; } }
    /* end of B.H4
       .
       .                                                              */
    /* B.H5 Home: Needs you, first-steps guide */
    /* Needs you: the sentence on top at 15px, then a row of real buttons
       under it, the first one filled, the second outlined. */
    #home-needs .hm-card { padding: 14px; }
    #home-needs .hm-task { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding: 12px 0; }
    #home-needs .hm-task p { font-size: 15px; line-height: 1.4; padding-top: 2px; }
    #home-needs .hm-glyph { width: 28px; height: 28px; font-size: 14px; }
    #home-needs .hm-task-actions {
      flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    }
    #home-needs .hm-go {
      min-height: 44px; padding: 8px 12px; border-radius: 12px;
      font-size: 15px; white-space: normal;
    }
    #home-needs .hm-go:not(.hm-go-mute) { background: #2DE2FF; border-color: #2DE2FF; color: #070B1F; }
    #home-needs .hm-go.hm-go-mute { color: #EAF0FF; border-color: rgba(234,240,255,.45); }
    #home-needs .hm-go:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* First steps: readable notes and a Hide button big enough to hit. */
    .hg-hide { min-height: 44px; padding: 0 14px; font-size: 14px; color: #C9D3F5; border-color: rgba(234,240,255,.4); }
    .hg-title { font-size: 21px; }
    .hg-step { min-height: 56px; padding: 9px 0; }
    .hg-mark { width: 28px; height: 28px; font-size: 14px; }
    .hg-txt b { font-size: 15px; }
    .hg-txt small { font-size: 14px; line-height: 1.35; color: #C9D3F5; margin-top: 2px; }
    .hg-done .hg-txt b { color: #AAB5DA; }
    .hg-hide:focus-visible, button.hg-step:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* end of B.H5
       .
       .                                                              */
    /* B.H6 Home: Players of the Week, your rival */
    .hm-pod-head { flex-wrap: wrap; row-gap: 2px; }
    .hm-pod-when, .hm-pod-head .hm-pod-when {
      font-size: 12px; color: #C9D3F5; letter-spacing: 0; text-transform: none; white-space: normal;
    }
    .hm-pod-row { min-height: 52px; }
    .hm-pod-sub, .hm-pod .hm-pod-sub { font-size: 13px; color: #C9D3F5; }
    /* A number with a word under it: "Rating", or "Private" under the lock. */
    .hm-rating, [data-section="feed"] .hm-lock {
      flex: none; display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
    }
    .hm-rating small, [data-section="feed"] .hm-lock small {
      margin-top: 3px; font-size: 12px; font-weight: 600; color: #C9D3F5; letter-spacing: 0;
      font-family: Inter, system-ui, sans-serif;
    }
    [data-section="feed"] .hm-lock { font-size: 16px; color: #C9D3F5; }
    /* Your rival */
    .hm-rival-run { width: auto; min-width: 40px; }
    .hm-rival-run small { font-size: 12px; letter-spacing: 0; text-transform: none; color: #FF9A9A; }
    .hm-rival-txt .hm-kick { font-size: 13px; }
    .hm-rival-rule { font-size: 14px; line-height: 1.4; color: #C9D3F5; }
    .hm-card.hm-rival { padding: 13px 14px; }
    .hm-card.hm-rival:focus-visible, .hm-pod-row:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* end of B.H6
       .
       .                                                              */
    /* B.H7 Home: the feed of sessions */
    /* Only the Home wall (#home-nights): the same cards on other screens keep
       their own look. Group heading: the title is the big line, the note
       about whose sessions they are is the small line under it. */
    #home-nights .nr-group .sp-feed-head { flex-direction: column-reverse; gap: 4px; padding: 4px 2px 10px; }
    #home-nights .nr-group .sp-feed-head h3 {
      margin: 0; font-family: "Saira Condensed", Oswald, Impact, sans-serif;
      font-size: 20px; font-weight: 800; letter-spacing: .01em; color: #EAF0FF;
    }
    #home-nights .nr-group .sp-feed-head .nr-who {
      font-family: inherit; font-size: 13px; font-weight: 600;
      letter-spacing: 0; text-transform: none; color: #C9D3F5;
    }
    #home-nights .nr-group .sp-feed-head .nr-who-ico { width: 24px; height: 24px; }
    /* Small print on each card. */
    #home-nights .np-name { font-size: 15px; }
    #home-nights .np-face { width: 34px; height: 34px; font-size: 12px; }
    #home-nights .np-head .nr-when {
      font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #C9D3F5;
    }
    #home-nights .np-head .sp-tick { font-size: 12px; letter-spacing: .02em; text-transform: none; padding: 1px 8px 1px 2px; }
    #home-nights .np-head .sp-tick i { width: 15px; height: 15px; }
    #home-nights .np-result .nr-won { font-size: 13px; letter-spacing: .02em; text-transform: none; }
    #home-nights .np-shape { font-size: 14px; white-space: normal; }
    #home-nights .np-over .nr-pts small { font-size: 12px; letter-spacing: 0; text-transform: none; }
    #home-nights .np .sp-caption p { font-size: 15px; line-height: 1.4; }
    #home-nights .np .nr-meta { font-size: 14px; color: #C9D3F5; }
    #home-nights .sp-ask {
      font-family: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; min-height: 48px;
    }
    #home-nights .sp-ask-dot { animation-iteration-count: 3; }
    @media (prefers-reduced-motion: reduce) { #home-nights .sp-ask-dot { animation: none; } }
    /* Buttons under each card: 44px, 15px, and "Session summary" outlined
       so it looks like the button it is. */
    #home-nights .np > .nr-foot { gap: 6px; padding: 6px 12px 12px; }
    #home-nights .np > .nr-foot .sp-act { min-height: 44px; padding: 8px 12px; font-size: 15px; color: #C9D3F5; }
    #home-nights .np > .nr-foot .sp-act svg { width: 18px; height: 18px; }
    #home-nights .np > .nr-foot .sp-act.sp-static { cursor: default; border-color: transparent; }
    #home-nights .np-open {
      min-height: 44px; padding: 8px 12px 8px 14px; font-size: 15px;
      border: 1px solid rgba(45,226,255,.55); border-radius: 14px;
    }
    #home-nights .np-open i { font-size: 18px; }
    #home-nights .nr-more { min-height: 48px; font-size: 15px; }
    /* end of B.H7
       .
       .                                                              */
    /* end of block B
       (spacer)
       .
       .
       .
       .                                                                  */

    /* ── C. Sessions, session details, Captain's Room, live game ──────── */
    /* C1 Session details */
    /* One main action: the first primary button is the filled one, unless the
       Live Room button already leads; every other button reads as secondary. */
    #md-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #md-actions .md-primary, #md-actions .md-secondary, #md-actions .md-danger {
      min-height: 52px; padding: 12px 16px; border-radius: 16px; font-size: 16px; line-height: 1.25;
    }
    #md-actions .md-primary {
      color: #EAF0FF; background: rgba(45,226,255,.06); border: 1.5px solid rgba(45,226,255,.55);
    }
    #md-actions > .md-primary:not(.md-primary ~ .md-primary):not(.lr-cta ~ .md-primary) {
      min-height: 56px; font-size: 17px; font-weight: 800;
      color: #070B1F; background: #2DE2FF; border-color: #2DE2FF;
    }
    #md-actions .md-secondary { color: #EAF0FF; border-color: rgba(234,240,255,.28); }
    #md-actions span.md-secondary { display: flex; align-items: center; justify-content: center; }
    #md-actions .md-verify-status { font-size: 15px; line-height: 1.4; color: #EAF0FF; padding: 12px 14px; }
    #md-actions select { min-height: 44px; font-size: 15px; }
    #md-actions .text-xs { font-size: 14px; }

    /* Tools: bigger tiles and words; Delete is a red line at the very bottom. */
    .md-tools { gap: 8px; }
    .md-tool { min-height: 62px; padding: 8px 6px; font-size: 14px; letter-spacing: 0; color: #EAF0FF; }
    .md-tool svg { width: 20px; height: 20px; }
    .md-danger-foot:empty { display: none; }
    .md-danger-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid rgba(239,68,68,.18); text-align: center; }
    .md-danger-link {
      min-height: 48px; padding: 0 16px; color: #F87171; background: none; border: 0;
      font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
    }
    .md-danger-link:focus-visible { outline: 2px solid #F87171; outline-offset: 2px; border-radius: 10px; }

    /* The ticket and the top bar: labels people can read without glasses. */
    .md-back { width: 44px; height: 44px; }
    .md-back svg { width: 20px; height: 20px; }
    .md-top-kick, .md-hero-kick, .md-section-kick, .md-command-kick {
      font-size: 12px; letter-spacing: .04em; text-transform: none;
    }
    .md-top-kick { color: #9aa8d5; }
    .md-command-kick { color: #AAB5DA; }
    .md-status { font-size: 13px; letter-spacing: .02em; text-transform: none; padding: 7px 12px; }
    .md-status[data-state="complete"] { color: #AAB5DA; }
    .md-hero::after { display: none; }
    #md-court-name { font-size: 15px; }
    .md-venue-address { font-size: 13px; color: #9aa8d5; }
    .md-venue { min-height: 44px; }
    .md-fact { padding: 10px 4px 12px; }
    .md-fact span { color: #9aa8d5; font-size: 12px; letter-spacing: 0; text-transform: none; }
    .md-fact strong { font-size: 15px; }
    .md-player-count { color: #AAB5DA; font-size: 13px; }

    /* Who runs it and the captains. */
    .md-command-line { display: none; }
    .md-captain-grid { margin-top: 10px; }
    .md-leader-role { font-size: 12px; letter-spacing: .02em; text-transform: none; }
    .md-leader-name { font-size: 15px; }
    .md-leader-note, .md-cap-hint, .md-pick-note { color: #9aa8d5; font-size: 13px; }
    .md-captain-card { min-height: 60px; }
    .md-captain-card .md-leader-role { font-size: 11px; letter-spacing: 0; }
    .md-captain-card .md-leader-name { font-size: 14px; }
    .md-captain-card.is-empty { opacity: 1; }
    .md-captain-card.is-empty .md-leader-name { color: #AAB5DA; }
    .md-pick-row { min-height: 52px; }
    .md-pick-name { font-size: 15px; }
    .md-edit-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }

    /* The squad and the team lists. */
    .md-sq-name { font-size: 13px; color: #EAF0FF; }
    .md-sq-team { margin-top: -2px; font-size: 12px; color: #9aa8d5; }
    .md-tg-head { min-height: 52px; }
    .md-roster .md-tg-name { font-size: 16px; }
    .md-roster .md-tg-win { font-size: 12px; text-transform: none; letter-spacing: 0; }
    .md-roster .md-tg-count { font-size: 13px; color: #AAB5DA; }
    .md-roster .md-tg-member { font-size: 15px; color: #EAF0FF; }

    /* ✕ keeps its small circle but takes a 44px tap. */
    .md-x-btn:not(.md-sq-x) { position: relative; }
    .md-x-btn::before { content: ""; position: absolute; inset: -8px; }
    .md-sq-x { width: 26px; height: 26px; font-size: 12px; top: -6px; right: calc(50% - 32px); }
    .md-sq-x::before { inset: -9px; }

    /* C2 Sessions tab */
    /* The session card: words big enough to read, one filled main button. */
    .up-state { font-size: 13px; letter-spacing: .01em; text-transform: none; }
    .up-when { font-size: 12px; letter-spacing: .02em; text-transform: none; }
    .up-date { width: 3.75rem; }
    .up-date small { font-size: 12px; letter-spacing: .02em; text-transform: none; color: #AAB5DA; }
    .up-title { font-size: 18px; }
    .up-meta { font-size: 14px; color: #AAB5DA; }
    .up-count { font-size: 13px; color: #EAF0FF; }
    .up-actions { gap: 8px; padding: 10px 12px 12px 14px; }
    .up-btn { min-height: 48px; padding: 0 16px; font-size: 15px; color: #EAF0FF; border-color: rgba(234,240,255,.28); }
    .up-btn.up-btn-room, .up-btn.up-btn-live {
      flex: 1 1 100%; min-height: 52px; font-size: 16px; font-weight: 800;
      color: #070B1F; background: #2DE2FF; border-color: #2DE2FF; box-shadow: none;
    }
    .up-btn.up-btn-room:hover, .up-btn.up-btn-live:hover { color: #070B1F; border-color: #2DE2FF; }
    .up-btn.up-btn-go { color: #7dffb0; border-color: rgba(57,255,136,.55); background: rgba(57,255,136,.08); }
    .up-actions > .up-btn:not(.up-btn-room) { flex: 1 1 0; }
    .up-hide { min-height: 48px; padding: 0 12px; font-size: 13px; color: #FCA5A5; }
    .up-hide svg { width: 18px; height: 18px; }
    .mm-actions .up-hide { min-height: 44px; }
    .mm-played-row > .up-hide { min-width: 44px; min-height: 44px; }

    /* The Sessions tab's own controls. */
    [data-section="matches"] .ss-lede { font-size: 14px; color: #AAB5DA; }
    .ss-create { min-height: 48px; font-size: 15px; }
    #ss-tab-upcoming, #ss-tab-played { min-height: 48px; font-size: 15px; }
    #ss-tab-upcoming:not(.is-on), #ss-tab-played:not(.is-on) { color: #AAB5DA; }
    .ss-q { min-height: 44px; padding: 0 15px; font-size: 14px; }
    .ss-filter-btn, .ss-tools .ss-filter-btn { min-height: 44px; font-size: 14px; }
    .ss-clear-btn { min-height: 44px; font-size: 14px; }
    .ss-chip { min-height: 44px; font-size: 14px; }
    .ss-empty-row { font-size: 14px; color: #AAB5DA; }

    /* C3 Create a session */
    /* Header and steps. */
    #create-match-overlay [data-action="_cmBack()"] { width: 44px; height: 44px; }
    #create-match-overlay [data-action="_cmBack()"] svg { width: 20px; height: 20px; }
    .cm-head-title { font-size: 17px; }
    .cm-head-sub { font-size: 13px; color: #9aa8d5; }
    .cm-step-lab { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #9aa8d5; }

    /* Step 1. */
    .cm-name-help { margin: 8px 4px 0; font-size: 14px; line-height: 1.45; color: #9aa8d5; }
    .cm-input { min-height: 48px; font-size: 16px; }
    .cm-facility-clear { width: 44px; height: 44px; right: 2px; }
    .cm-facility-item { min-height: 48px; }
    .cm-facility-item b { font-size: 15px; }
    .cm-facility-item span { font-size: 13px; color: #9aa8d5; }
    .cm-facility-note { font-size: 13px; color: #9aa8d5; }
    .cm-headcount span { font-size: 14px; }
    .cm-headcount em { color: #AAB5DA; }
    .cm-mini { margin: 0 0 8px 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #9aa8d5; }
    .cm-chip { min-height: 48px; font-size: 16px; color: #AAB5DA; }
    .cm-chip.active { color: #2DE2FF; }
    .cm-size .cm-stepper { padding: 4px 6px; }
    .cm-size .cm-bump { width: 48px; height: 48px; font-size: 22px; }

    /* Step 2: the ticket and the house rules. */
    .cm-ticket-where, .cm-ticket-size { font-size: 14px; }
    .cm-ticket-where { color: #AAB5DA; }
    .cm-ticket-edit { min-height: 44px; padding: 0 16px; font-size: 14px; }
    .cm-lead { font-size: 14px; color: #AAB5DA; }
    .cm-rule { flex-wrap: wrap; row-gap: 6px; padding: 10px 8px 10px 14px; }
    .cm-rule-l { flex: 1 1 140px; }
    .cm-rule-k { font-size: 15px; }
    .cm-rule-h { font-size: 13px; color: #9aa8d5; }
    .cm-cyc { width: 196px; margin-left: auto; }
    .cm-cyc-btn { width: 44px; min-height: 48px; }
    .cm-cyc-btn svg { width: 18px; height: 18px; }
    .cm-cyc-v b { font-family: inherit; font-size: 16px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
    .cm-dots:has(i:nth-child(5)) { display: none; }
    .cm-cyc-num span { font-size: 12px; letter-spacing: 0; text-transform: none; color: #9aa8d5; }
    .cm-rating-note-copy { font-size: 13px; color: #AAB5DA; }

    /* C4 Captain's Room */
    /* Header: back and title on the first line; state and Names & colours
       below, so the title is never squeezed to a few letters. */
    #dr-head { flex-wrap: wrap; row-gap: 8px; }
    #dr-head .dr-back { width: 44px; height: 44px; }
    #dr-head .dr-back svg { width: 20px; height: 20px; }
    #dr-title { flex: 1 1 calc(100% - 60px); font-size: 17px; }
    #dr-status-chip { font-size: 13px; padding: 6px 12px; }
    #dr-status-chip.text-white\/40 { color: rgba(234,240,255,.85); }
    #dr-style-btn { order: 3; margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 14px; color: #EAF0FF; border-color: rgba(234,240,255,.28); }

    /* How the teams are made: three choices, one under another. */
    .dr-tools-q { margin: 0 2px 8px; font-size: 15px; font-weight: 700; color: #EAF0FF; }
    #dr-body .dr-tools { flex-direction: column; gap: 6px; }
    #dr-body .dr-tool { min-height: 48px; padding: 0 14px; font-size: 15px; text-align: left; }
    #dr-body .dr-tool:not(.is-on) { color: rgba(234,240,255,.8); background: rgba(255,255,255,.03); }
    #dr-body .dr-tool-promise { font-size: 14px; line-height: 1.45; color: rgba(234,240,255,.75); }

    /* Helper lines and labels people must read. */
    #dr-body .dr-help { font-size: 13px; line-height: 1.45; color: rgba(234,240,255,.75); }
    #dr-body .dr-label { font-size: 13px; letter-spacing: 0; text-transform: none; color: #AAB5DA; }
    #dr-body .dr-sealed { font-size: 16px; }

    /* Buttons: one main one, the rest outlined. */
    #dr-body .dr-main { min-height: 52px; font-size: 16px; }
    #dr-body .dr-second { min-height: 48px; font-size: 15px; color: #EAF0FF; }
    #dr-body .dr-lock { min-height: 56px; font-size: 17px; font-weight: 800; }
    #dr-body .dr-lock:not([disabled]) { color: #070B1F; background: #2DE2FF; }
    #dr-body .dr-lock[disabled] { font-size: 15px; color: #9aa8d5; }
    #dr-body .dr-unlock { min-height: 48px; font-size: 14px; color: #EAF0FF; }
    #dr-body .dr-remove { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 13px; white-space: nowrap; }

    /* C5 Live game card */
    /* The strip and the clock. */
    .lg-by, .lg-own { font-size: 13.5px; color: #AAB5DA; }
    .lg-live em { color: #AAB5DA; }
    .lg-k { font-size: 13px; letter-spacing: .01em; text-transform: none; color: #AAB5DA; }
    .lg-k.lg-k-warn { color: #fbbf24; }
    .lg-pause { height: 48px; font-size: 15px; }

    /* Goals under each score: readable, and big enough to fix with a thumb. */
    .lg-none { font-size: 14px; color: #9aa8d5; line-height: 40px; }
    .lg-g { height: auto; min-height: 40px; font-size: 13.5px; }
    .lg-pens { font-size: 14px; }
    .lg-watch p { font-size: 15px; }
    .lg-watch small { font-size: 13px; color: #AAB5DA; }

    /* A level game at full time. */
    .lg-q { font-size: 15px; color: #EAF0FF; }
    .lg-opt { height: 52px; font-size: 15px; }
    .lg-note { font-size: 13px; color: #9aa8d5; }

    /* The footer: save, end, cancel. Cancel keeps its distance from save. */
    .lg-save small, .lg-btn-txt small { font-size: 14px; }
    .lg-cancel-btn { min-height: 48px; margin-top: 20px; padding: 0 18px; font-size: 15px; }
    .lg-cancel-btn small { font-size: 13px; color: #E7A9B1; }
    .lg-save-off, .lg-save-off b { color: #9aa8d5; }

    /* The result just saved, and the way to take it back. */
    .lg-saved p { font-size: 15px; }
    .lg-saved small { font-size: 13px; color: #AAB5DA; }
    .lg-saved .lg-link {
      min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 700;
      color: #EAF0FF; text-decoration: none; border: 1px solid rgba(234,240,255,.3);
    }
    .lg-saved .lg-link + .lg-link { margin-left: 6px; }
    #dr-body .lg-undo-btn { min-height: 48px; font-size: 15px; }
    .lg-edit-game { min-height: 44px; font-size: 14px; }

    /* Picking the next game. */
    .lg-step span { font-size: 13px; color: #9aa8d5; }
    .lg-tm small { font-size: 13px; color: #AAB5DA; }
    .lg-min { height: 52px; font-size: 17px; }
    .lg-fold-row { min-height: 52px; font-size: 15px; }
    .lg-fold-row small { font-size: 13px; color: #9aa8d5; }
    .lg-chev { border-color: #9aa8d5; }

    /* Ending the night: the explanation first, then one amber button. */
    .lg-own.lg-fin-why { margin-top: 22px; }
    .lg-fin {
      height: auto; min-height: 56px; margin-top: 10px; font-size: 17px; font-weight: 800;
      color: #1A1204; background: #fbbf24; border-color: #fbbf24;
    }

    /* The sheets over the game. */
    .lg-sh-k { font-size: 13px; }
    .lg-undo { font-size: 14px; }
    .lg-undo .lg-link { display: inline-block; min-height: 44px; padding: 10px 6px; }
    .lg-act small { font-size: 13px; }
    .ge-btn { width: 52px; height: 52px; }
    .ge-q { font-size: 14px; }
    .ge-q small { font-size: 13px; color: #9aa8d5; }
    .ge-face { height: auto; min-height: 44px; font-size: 14px; }

    /* The night's rules, table and headings in the room. */
    .sn-tile-k { font-size: 12px; letter-spacing: 0; text-transform: none; color: #9aa8d5; }
    .sn-tile-v { font-size: 16px; }
    .sn-tie { font-size: 13px; color: #AAB5DA; }
    .sn-head-k { font-size: 15px; letter-spacing: .02em; text-transform: none; }
    .sn-head-s { font-size: 13px; letter-spacing: 0; text-transform: none; color: #9aa8d5; }
    .sn-tbl th { font-size: 12px; letter-spacing: 0; text-transform: none; color: #9aa8d5; }
    .sn-tbl td { font-size: 14px; color: #AAB5DA; }
    .sn-tbl tbody tr td:first-child { font-size: 15px; color: #AAB5DA; }

    /* C6 Two-team result form */
    #submit-result-overlay .sr-back { width: 44px; height: 44px; }
    #submit-result-overlay .sr-back svg { width: 20px; height: 20px; }
    #submit-result-overlay .sr-intro { font-size: 16px; line-height: 1.5; color: rgba(234,240,255,.8); }
    /* One team per line: its real name and colour, then − score +. */
    .sr-scores { display: grid; gap: 16px; }
    .sr-score { display: grid; gap: 8px; }
    #submit-result-overlay .sr-team-label {
      display: flex; align-items: center; gap: 8px; margin: 0;
      font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #EAF0FF;
    }
    .sr-team-label::before, #submit-result-overlay .sr-side-label::before {
      content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sr-c, #2DE2FF);
    }
    .sr-score-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
    .sr-score-row .cm-input { min-height: 56px; padding: 6px 8px; }
    .sr-bump {
      width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
      font-size: 28px; font-weight: 700; line-height: 1; color: #EAF0FF;
      background: #101838; border: 1.5px solid rgba(234,240,255,.28);
    }
    .sr-bump:active { transform: scale(.95); }
    .sr-bump:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* Who scored. */
    #submit-result-overlay .sr-scorers-h { font-size: 15px; letter-spacing: 0; text-transform: none; color: #EAF0FF; }
    #submit-result-overlay .sr-side-label {
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; letter-spacing: 0; text-transform: none; color: #EAF0FF;
    }
    #submit-result-overlay .sr-sc-chip { min-height: 44px; gap: 4px; padding: 2px 4px 2px 4px; }
    #submit-result-overlay .sr-chip-add { min-height: 40px; padding-right: 8px; font-size: 15px; color: #EAF0FF; }
    #submit-result-overlay .sr-chip-av { width: 32px; height: 32px; font-size: 13px; }
    #submit-result-overlay .sr-chip-minus {
      min-width: 44px; min-height: 40px; padding: 0 8px; border-radius: 999px;
      font-size: 15px; font-weight: 800; color: #EAF0FF; background: rgba(255,255,255,.08);
    }
    #submit-result-overlay .sr-scorers-note { font-size: 13px; line-height: 1.5; color: #9aa8d5; }
    #sr-submit-btn, #sr-finish-btn { min-height: 56px; font-size: 17px; }

    /* C7 Night vote and Session Summary */
    /* The vote: two big answers, and words people can read. */
    .nv-kick { font-size: 13px; letter-spacing: .02em; text-transform: none; }
    .nv-sub { font-size: 15px; color: rgba(234,240,255,.8); }
    .nv-btn { min-height: 56px; font-size: 16px; }
    .nv-progress { font-size: 13px; letter-spacing: 0; color: #AAB5DA; }
    .nv-note { font-size: 14px; }
    .nv-note b { font-size: 15px; }
    .nv-note span { font-size: 13px; color: #AAB5DA; }

    /* Session Summary: the recap card. */
    .rc-card .rc-kick { font-size: 13px; letter-spacing: .02em; text-transform: none; color: #AAB5DA; }
    .rc-ovr span { font-size: 13px; letter-spacing: 0; text-transform: none; color: #AAB5DA; }
    .rc-move small { font-size: 13px; color: #AAB5DA; }
    .rc-arrow { font-size: 13px; }
    .rc-move.rc-flat, .rc-wait { font-size: 14px; color: #AAB5DA; }
    .rc-team { font-size: 14px; }
    .rc-record { font-size: 14px; color: #AAB5DA; }
    .rc-badges-lab { font-size: 13px; letter-spacing: .02em; text-transform: none; }
    .nd-stat i { font-size: 13px; letter-spacing: 0; text-transform: none; color: #AAB5DA; }
    .nd-inside { font-size: 14px; color: #AAB5DA; }

    /* C8 Anything else in this area */

    /* C9. Undo goal under + Goal: always where a player looks for it, quieter than + Goal. */
    .lg-undo-goal { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
                    margin-top: 8px; border-radius: 13px; border: 1px dashed rgba(255, 255, 255, 0.32); background: transparent;
                    color: #C9D3F5; font-size: 15px; font-weight: 600; }
    .lg-undo-goal i { font-style: normal; font-size: 20px; line-height: 1; color: #FCA5A5; }
    .lg-undo-goal:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.05); }
    .lg-undo-goal:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* end of block C
       (spacer)
       .
       .
       .
       .                                                                  */

    /* ── D. Profile, Rankings, Explore, notifications, dialogs ────────── */
    /* slot P1 */
    /* P1 · Account block at the end of the Profile tab ················· */
    .pf-acct { margin-top: 8px; }
    .pf-acct-title { font-size: 17px; font-weight: 800; color: #EAF0FF; margin: 0 4px 10px; }
    .pf-acct-list { display: flex; flex-direction: column; gap: 8px; }
    .pf-acct-row {
      display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
      padding: 12px 16px; border-radius: 14px; text-align: left;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
      color: #EAF0FF; font-size: 16px; font-weight: 600;
    }
    .pf-acct-row:hover { background: rgba(255,255,255,.08); }
    .pf-acct-row:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    .pf-acct-label { flex: 1; min-width: 0; }
    .pf-acct-value { color: #AAB5DA; font-size: 15px; font-weight: 600; }
    .pf-acct-go { color: #AAB5DA; font-size: 22px; line-height: 1; }
    .pf-acct-signout { margin-top: 8px; color: #FF8A8A; border-color: rgba(255,138,138,.35); }
    /* end of slot P1
       .
       .
       .                                                                  */

    /* slot P2 */
    /* P2 · Player card: labels people can read ························ */
    .hc-compact .hc-label { font-size: 11px; letter-spacing: .03em; text-transform: none; color: #AAB5DA; }
    .hc-compact .hc-ovr-caption .hc-label { font-weight: 800; color: #C9D3F5; white-space: nowrap; }
    .hc-compact .hc-prov { font-size: 11px; letter-spacing: .02em; text-transform: none; padding: 2px 8px; white-space: nowrap; }
    .hc-compact .hc-tier-name { font-size: 12px; letter-spacing: .04em; text-transform: none; }
    .hc-compact .hc-rep-now { font-size: 11px; letter-spacing: .02em; text-transform: none; color: #AAB5DA; }
    .hc-badges { flex-wrap: wrap; }
    .hc-badge-hint { flex-basis: 100%; margin: 4px 0 -2px; font-size: 12px; font-weight: 600; color: #AAB5DA; }
    .hc-badges .hc-more { color: #AAB5DA; font-weight: 700; }
    /* end of slot P2
       .
       .
       .                                                                  */

    /* slot P3 */
    /* P3 · The Board: labelled numbers, readable rows ··················· */
    .bd2-colhead {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 4px 6px 8px 98px; font-size: 12px; font-weight: 700; color: #AAB5DA;
    }
    .bd2-rk { color: #8FA0D8; }
    .bd2-sub { font-size: 13px; color: #AAB5DA; }
    .bd2-you-tag { font-size: 12px; letter-spacing: .06em; }
    .bd2-pod-sub { font-size: 12px; color: #AAB5DA; }
    .bd2-pod-unit { display: block; font-size: 12px; font-weight: 600; color: #AAB5DA; margin-top: 2px; white-space: nowrap; }
    .bd2-pod-kicker { font-size: 12px; letter-spacing: .06em; }
    .bd2-pod-tag { font-size: 12px; letter-spacing: .06em; }
    .bd2-gaplb { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #AAB5DA; }
    .bd2-seclb { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #AAB5DA; }
    .bd2-lead-note { font-size: 13px; color: #AAB5DA; }
    .bd2-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 16px; text-align: center; }
    .bd2-empty-title { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
    .bd2-empty-note { font-size: 14px; color: #AAB5DA; margin-top: -6px; }
    .bd2-empty-btn {
      min-height: 48px; padding: 0 24px; border-radius: 14px;
      background: #2DE2FF; color: #070B1F; font-size: 16px; font-weight: 800;
    }
    .bd2-empty-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    /* end of slot P3
       .
       .
       .                                                                  */

    /* slot P4 */
    /* P4 · Notifications and the followers sheet ························ */
    .notif-body { font-size: 15px; color: rgba(234,240,255,.72); }
    .notif-row.is-unread .notif-body { color: rgba(234,240,255,.95); }
    .notif-when { font-size: 13px; color: rgba(234,240,255,.6); margin-top: 3px; }
    .notif-mark { color: rgba(234,240,255,.6); }
    .notif-act { min-height: 44px; padding: 8px 16px; font-size: 14px; }
    .notif-act.is-done { color: rgba(234,240,255,.72); }
    .notif-go { color: rgba(234,240,255,.6); }
    .sheet-close {
      display: inline-flex; align-items: center; gap: 6px; flex: none;
      min-height: 44px; padding: 0 16px; border-radius: 999px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
      color: #EAF0FF; font-size: 15px; font-weight: 700;
    }
    .sheet-close:hover { background: rgba(255,255,255,.14); }
    .sheet-close:focus-visible { outline: 2px solid #2DE2FF; outline-offset: 2px; }
    /* Loading / empty / error lines in both sheets, and the people rows. */
    #notif-sheet-body > p, #people-sheet-body > p { font-size: 15px; color: rgba(234,240,255,.72); }
    #people-sheet-body > button { min-height: 56px; }
    #people-sheet-body > button p:first-child { font-size: 16px; }
    #people-sheet-body > button p + p { font-size: 13px; color: #AAB5DA; }
    /* end of slot P4
       .
       .
       .                                                                  */

    /* slot P5 */
    /* P5 · Profile sections: headings, rating chart, rivals, rep, sessions */
    .pf-sec-head .hm-kick,
    #my-form-panel .hm-kick, #pd-form-panel .hm-kick {
      font-size: 16px; letter-spacing: .02em; text-transform: none;
    }
    .pf-sec-note { font-size: 13px; color: rgba(234,240,255,.65); }
    .pf-sec-count { font-size: 13px; }
    .pf-sec-empty { margin: 0 0 12px; padding: 4px; font-size: 14px; line-height: 1.5; color: rgba(234,240,255,.65); }
    .ot-unit { font-size: 13px; letter-spacing: .02em; color: #AAB5DA; }
    .ot-change { font-size: 14px; }
    .ot-range { font-size: 13px; letter-spacing: .01em; color: #AAB5DA; }
    .ot-range.is-active { color: #EAF0FF; }
    .ot-axis { font-size: 12px; color: #AAB5DA; }
    .ot-dates { font-size: 12px; color: #AAB5DA; letter-spacing: 0; }
    .ot-tooltip { font-size: 13px; }
    .ot-tooltip-date { font-size: 12px; color: #AAB5DA; }
    .ot-tooltip-line { color: #AAB5DA; }
    .ot-hint { font-size: 13px; color: #AAB5DA; }
    .ot-foot { font-size: 12px; color: #AAB5DA; }
    .ot-empty-copy { font-size: 13px; color: #AAB5DA; }
    .rp-label { font-size: 14px; letter-spacing: .04em; }
    .rp-rep { font-size: 13px; }
    .rp-next { font-size: 13px; line-height: 1.35; color: #AAB5DA; }
    .sr-meta { font-size: .85rem; color: #AAB5DA; }
    .sr-result { font-size: .8rem; }
    .sr-chip { font-size: .78rem; }
    .sr-tags .sp-tick { font-size: 11px; letter-spacing: .04em; }
    .night-answers .na-bit { font-size: 13px; color: #AAB5DA; }
    .sr-more { font-size: .95rem; min-height: 3rem; }
    .ps-note { font-size: .82rem; letter-spacing: .02em; text-transform: none; }
    .ovr-gap-line { font-size: .85rem; color: rgba(234,240,255,.85); }
    /* end of slot P5
       .
       .
       .                                                                  */

    /* slot P6 */
    /* P6 · Another player's profile: a Back you can read, unfollow asks first */
    #player-detail-overlay .back-pill { gap: 6px; padding: 0 16px 0 12px; }
    .back-pill-txt { font-size: 15px; font-weight: 700; color: #EAF0FF; }
    /* end of slot P6
       .
       .
       .                                                                  */

    /* slot P7 */
    /* P7 · Explore list, map pins and the court details screen ·········· */
    .cd-back { gap: 6px; padding: 0 16px 0 12px; min-width: 44px; }
    .cd-back-txt { font-size: 15px; font-weight: 700; color: #EAF0FF; }
    .cd-addr { font-size: .9rem; color: #AAB5DA; }
    .cd-fact { font-size: .82rem; min-height: 2.25rem; }
    .cd-row-l { font-size: .85rem; color: #AAB5DA; }
    .cd-missing { font-size: .82rem; color: #8FA0D8; }
    .cd-go-head { margin: 0 0 -.5rem; font-size: 15px; font-weight: 700; color: #EAF0FF; }
    .cd-go-btn { font-size: .95rem; min-height: 3.1rem; }
    .cd-verify-action { font-size: .85rem; }
    .cd-live-head { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.65); }
    /* A 10px dot is too small to hit: give it a 44px invisible tap area. */
    .ex-pinwrap .ex-dot { position: relative; }
    .ex-dot::before { content: ''; position: absolute; inset: -17px; border-radius: 999px; }
    .ex-meta, .ex-psub { font-size: .85rem; color: #AAB5DA; }
    .ex-dist small { font-size: .75rem; color: #8FA0D8; }
    .ex-game { font-size: .78rem; }
    .ex-more { font-size: .82rem; color: #AAB5DA; }
    /* end of slot P7
       .
       .
       .                                                                  */

    /* slot P8 */
    /* P8 · Photo editor slider words, loading placeholders ·············· */
    .ac-zoom-labels {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
      font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7);
    }
    #avatar-crop-zoom { min-height: 44px; }
    /* A grey box alone does not say "wait": the first placeholder says it. */
    .screen-skeleton-card:not([aria-hidden="true"]) {
      display: grid; place-items: center;
    }
    .screen-skeleton-card:not([aria-hidden="true"])::after {
      content: 'Loading…'; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6);
    }
    @media (prefers-reduced-motion: reduce) {
      .screen-skeleton-card { animation: none; background-size: 100% 100%; }
    }
    /* end of slot P8
       .
       .
       .                                                                  */

    /* end of block D */

    /* ── E. Safety: report, contact SportOut, block, delete the account (2026-10-11) ── */
    #safety-sheet .sf-panel { width: 100%; max-width: 30rem; max-height: 92vh; overflow-y: auto; background: #0F1634;
      border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px 22px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
    @media (min-width: 640px) { #safety-sheet .sf-panel { border-radius: 22px; } }
    .sf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .sf-title { font-size: 21px; font-weight: 800; color: #EAF0FF; margin: 0; }
    .sf-close { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2);
      background: transparent; color: #C9D3F5; font-size: 15px; font-weight: 600; }
    .sf-intro { color: #C9D3F5; font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
    .sf-intro b { color: #EAF0FF; }
    .sf-q, .sf-label { display: block; color: #EAF0FF; font-size: 15px; font-weight: 700; margin: 14px 0 8px; }
    .sf-reasons { display: grid; gap: 8px; }
    .sf-reason { min-height: 52px; text-align: start; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.03); color: #EAF0FF; font-size: 16px; font-weight: 600; }
    .sf-reason.is-on { border-color: #2DE2FF; background: rgba(45, 226, 255, 0.12); color: #2DE2FF; }
    .sf-text, .sf-input { width: 100%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: #0A1029;
      color: #EAF0FF; font-size: 16px; padding: 12px 14px; }
    .sf-input { min-height: 52px; }
    .sf-text:focus, .sf-input:focus { outline: 2px solid #2DE2FF; outline-offset: 1px; }
    .sf-error { min-height: 1.2em; color: #FCA5A5; font-size: 15px; margin: 10px 0 0; }
    .sf-main { width: 100%; min-height: 56px; margin-top: 12px; border-radius: 16px; border: 0; background: #2DE2FF; color: #070B1F;
      font-size: 17px; font-weight: 800; }
    .sf-main:disabled { opacity: 0.6; }
    .sf-danger { background: #DC2626; color: #fff; }
    .sf-secondary { width: 100%; min-height: 52px; margin-top: 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);
      background: transparent; color: #EAF0FF; font-size: 16px; font-weight: 700; }
    .sf-list { display: grid; gap: 8px; }
    .sf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 12px;
      border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
    .sf-item span { display: grid; min-width: 0; }
    .sf-item b { color: #EAF0FF; font-size: 16px; }
    .sf-item small { color: #AAB5DA; font-size: 13px; }
    .sf-small { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent; color: #EAF0FF; font-size: 14px; font-weight: 700; white-space: nowrap; }
    .sf-reason:focus-visible, .sf-main:focus-visible, .sf-secondary:focus-visible, .sf-small:focus-visible, .sf-close:focus-visible {
      outline: 2px solid #2DE2FF; outline-offset: 2px; }
    .pd-safety { display: flex; gap: 10px; margin-top: 12px; width: 100%; max-width: 32rem; }
    .pd-safety.hidden { display: none; }
    .pd-safety-btn { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent;
      color: #AAB5DA; font-size: 15px; font-weight: 600; white-space: nowrap; }
    .pd-safety-btn.is-blocked { color: #FCA5A5; border-color: rgba(252, 165, 165, 0.45); }
    .pf-acct-delete { color: #FCA5A5; }
    .ai-box { border: 1px solid rgba(45, 226, 255, 0.25); border-radius: 16px; padding: 14px; background: rgba(45, 226, 255, 0.04); }
    .ai-title { color: #EAF0FF; font-size: 17px; font-weight: 800; margin: 0 0 10px; }
    .ai-empty { color: #AAB5DA; font-size: 14px; margin: 0; }
    .ai-item { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 12px 0; }
    .ai-item:first-of-type { border-top: 0; padding-top: 0; }
    .ai-top { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #EAF0FF; font-size: 15px; margin: 0; }
    .ai-top span { margin-inline-start: auto; color: #AAB5DA; font-size: 13px; }
    .ai-about, .ai-from { color: #AAB5DA; font-size: 13px; margin: 4px 0 0; }
    .ai-text { color: #EAF0FF; font-size: 15px; line-height: 1.45; margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
    .ai-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    /* end of block E */