@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap');
    :root {
      color-scheme: light dark;
      --page: #e9edf0;
      --panel: #f8fafb;
      --ink: #13212a;
      --muted: #52616b;
      --line: #bbc6cc;
      --accent: #d76719;
      --accent-2: #0c7592;
      --button: #18313e;
      --button-ink: #ffffff;
      --shadow: 0 18px 55px rgba(30, 50, 60, .18);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --page: #07131a;
        --panel: #0d1f29;
        --ink: #f1f6f7;
        --muted: #abc0ca;
        --line: #294551;
        --accent: #ff883b;
        --accent-2: #39bada;
        --button: #e8f2f4;
        --button-ink: #10212a;
        --shadow: 0 20px 70px rgba(0, 0, 0, .45);
      }
    }
    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--page); }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;
      color: var(--ink);
      background:
        linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--line) 22%, transparent) 48% 49%, transparent 49%) 0 0 / 42px 42px,
        var(--page);
      font-family: Barlow, system-ui, sans-serif;
      display: grid;
      place-items: center;
      padding: clamp(14px, 3vw, 34px);
    }
    main { width: min(1100px, 100%); }
    .briefing {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin: 0 2px 14px;
    }
    h1 {
      font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      letter-spacing: .025em;
      font-size: clamp(30px, 5vw, 52px);
      line-height: .92;
      margin: 0;
    }
    .briefing p { margin: 7px 0 0; color: var(--muted); font-size: 15px; }
    .sector {
      color: var(--accent);
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
      padding-bottom: 4px;
    }
    .game-shell {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      overscroll-behavior: contain;
      position: relative;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .game-shell button {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .hud {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
      align-items: center;
      min-height: 58px;
      border-bottom: 1px solid var(--line);
      padding: 9px 13px 9px 18px;
      gap: 12px;
      background: var(--panel);
    }
    .hud.has-credits { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; }
    .stat[hidden] { display: none; }
    .stat small {
      display: block;
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 700;
    }
    .stat strong {
      font-family: "Barlow Condensed", sans-serif;
      font-size: 22px;
      letter-spacing: .04em;
      font-variant-numeric: tabular-nums;
    }
    .icon-btn {
      appearance: none;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      width: 50px;
      height: 38px;
      display: grid;
      place-items: center;
      cursor: pointer;
      font: 800 12px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .04em;
    }
    .icon-btn[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
    .icon-btn:hover, .icon-btn:focus-visible { border-color: var(--accent-2); outline: 2px solid color-mix(in srgb, var(--accent-2) 35%, transparent); }
    .fullscreen-status {
      position: absolute;
      z-index: 1200;
      top: 68px;
      right: 12px;
      max-width: min(330px, calc(100% - 24px));
      padding: 9px 12px;
      color: #eef8fa;
      background: rgba(8, 24, 33, .94);
      border: 1px solid rgba(141, 206, 222, .62);
      font-size: 13px;
      line-height: 1.35;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    }
    .fullscreen-status[hidden] { display: none; }
    .stage { position: relative; background: #152f3d; }
    canvas {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 7;
      touch-action: none;
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
      -webkit-transition: -webkit-filter .5s ease;
      transition: filter .5s ease;
    }
    canvas.impact-stun-reset {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
      -webkit-transition: none;
      transition: none;
    }
    canvas.impact-stun {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
      -webkit-transition-duration: .4s;
      transition-duration: .4s;
    }
    canvas.highlight-replay {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
      -webkit-transition: none;
      transition: none;
    }
    .overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(5, 17, 24, .38);
      transition: opacity .18s ease;
    }
    .overlay[hidden] { display: none; }
    .mission-card {
      width: min(610px, 94%);
      max-height: calc(100% - 24px);
      color: #eef8fa;
      background: rgba(8, 24, 33, .91);
      border: 1px solid rgba(141, 206, 222, .52);
      padding: clamp(18px, 2.4vw, 24px) clamp(26px, 4vw, 38px);
      text-align: center;
      box-shadow: 0 12px 35px rgba(0, 0, 0, .3);
      display: flex;
      flex-direction: column;
    }
    .mission-card .tag {
      display: inline-block;
      color: #67d5eb;
      border: 1px solid #357b8c;
      padding: 4px 8px;
      font: 700 11px/1 Barlow, sans-serif;
      letter-spacing: .13em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .mission-card h2 {
      margin: 0;
      font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(31px, 6vw, 48px);
      line-height: .95;
      letter-spacing: .025em;
    }
    .mission-card p { color: #c8d8dd; line-height: 1.45; margin: 15px auto 22px; max-width: 42ch; }
    .crawl-viewport {
      display: none;
      width: min(390px, 100%);
      min-height: 104px;
      margin: 10px auto 15px;
      position: relative;
      z-index: 3;
      overflow: visible;
    }
    .crawl-viewport.active { display: grid; place-items: center; }
    .crawl-text {
      color: #ffd452;
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 800;
      line-height: .92;
      letter-spacing: .06em;
      text-align: center;
      text-transform: uppercase;
      font-variant-numeric: tabular-nums;
    }
    .score-kicker,
    .score-unit,
    .score-intel { display: block; }
    .score-kicker { color: #8edcea; font-size: 13px; letter-spacing: .18em; }
    .crawl-text strong {
      display: block;
      margin: 2px 0 0;
      color: #fff0a5;
      font-size: clamp(62px, 9vw, 88px);
      line-height: .78;
      letter-spacing: .025em;
      text-shadow: 0 0 22px rgba(255, 212, 82, .42), 0 3px 0 rgba(0, 0, 0, .35);
    }
    .score-unit { color: #fff0a5; font-size: 20px; letter-spacing: .15em; }
    .score-intel { margin-top: 9px; color: #c8d8dd; font: 700 13px/1.1 Barlow, sans-serif; letter-spacing: .07em; }
    .score-credits { display: block; margin-top: 7px; color: #ffe48a; font: 800 14px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .07em; }
    .score-credits[hidden] { display: none; }
    .daily-challenge {
      margin: 2px auto 10px;
      width: min(520px, 100%);
      padding: 7px 10px;
      color: #fff5c8;
      background: linear-gradient(100deg, rgba(83, 55, 5, .78), rgba(34, 31, 18, .88));
      border: 1px solid rgba(255, 211, 76, .72);
      text-align: left;
      box-shadow: inset 0 0 24px rgba(255, 191, 40, .06);
    }
    .daily-challenge[hidden] { display: none; }
    .daily-challenge-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }
    .daily-kicker {
      display: block;
      margin-bottom: 2px;
      color: #ffd34c;
      font: 800 8px/1 Barlow, sans-serif;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .daily-challenge h3 {
      margin: 0;
      color: #fff9df;
      font: 800 15px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .daily-challenge > p { margin: 3px 0 5px; color: #dfd6ad; font-size: 10px; line-height: 1.2; }
    .daily-reward {
      flex: 0 0 auto;
      padding: 3px 5px;
      color: #2d2106;
      background: #ffd34c;
      font: 800 10px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .daily-reward[hidden] { display: none; }
    .daily-progress-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 3px;
      color: #fff1ae;
      font: 700 9px/1.1 Barlow, sans-serif;
      font-variant-numeric: tabular-nums;
    }
    .daily-countdown { color: #cbbf8d; white-space: nowrap; }
    .daily-progress {
      height: 4px;
      overflow: hidden;
      background: rgba(255, 255, 255, .12);
      border: 0;
    }
    .daily-progress span { display: block; width: 0; height: 100%; background: #ffd34c; transition: width .28s ease; }
    .daily-actions { display: flex; align-items: center; justify-content: flex-end; min-height: 0; margin-top: 4px; }
    .daily-actions:has(.daily-claim[hidden]):has(.daily-completed[hidden]) { display: none; }
    .daily-claim {
      appearance: none;
      border: 1px solid #ffe994;
      background: #ffd34c;
      color: #2a2009;
      padding: 4px 8px;
      font: 800 10px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .05em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .daily-claim:hover, .daily-claim:focus-visible { background: #ffe681; outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 1px; }
    .daily-claim[disabled] { opacity: .55; cursor: wait; }
    .daily-completed { color: #ffe681; font: 800 10px/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
    .daily-claim[hidden], .daily-completed[hidden], .daily-content[hidden], .daily-guest[hidden] { display: none; }
    .daily-guest {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 1px;
      color: #e1d8b6;
      font-size: 10px;
    }
    .daily-guest .google-sign-in { flex: 0 0 auto; border-color: rgba(255, 211, 76, .6); color: #fff4bf; padding: 4px 7px; font-size: 10px; }
    .daily-status { min-height: 0; margin: 3px 0 0 !important; color: #dfd6ad !important; font-size: 9px !important; }
    .daily-status:empty { display: none; }
    .daily-status.error { color: #ffc09c !important; }
    .overlay.score-crawl-active {
      overflow: hidden;
      background: #020306;
      animation: score-backdrop 5.6s ease both;
    }
    .overlay.score-crawl-active::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 11% 19%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 69% 27%, #b9dfff 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 72%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 88% 82%, #fff 0 1px, transparent 1.4px);
      background-size: 137px 113px, 181px 149px, 223px 167px, 257px 191px;
      animation: score-stars 5.6s ease both;
    }
    .crawl-viewport.active.is-crawling {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      perspective: 360px;
      perspective-origin: 50% 18%;
    }
    .crawl-viewport.active.is-crawling .crawl-text {
      position: absolute;
      left: 50%;
      bottom: -42%;
      width: min(430px, 80%);
      transform-origin: 50% 100%;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      animation: score-crawl 5.6s linear both;
    }
    .crawl-viewport.active.settled .crawl-text { animation: score-settle .5s ease-out both; }
    .mission-card.revealing-score { overflow: visible; animation: mission-frame-reveal 5.6s ease both; }
    .mission-card.revealing-score > .tag,
    .mission-card.revealing-score > h2,
    .mission-card.revealing-score > .daily-challenge,
    .mission-card.revealing-score > .mission-actions,
    .mission-card.revealing-score > .runner-network { animation: report-details-reveal 5.6s ease both; }
    @media (min-width: 621px) {
      .mission-card:has(.crawl-viewport.active) { width: min(660px, 94%); padding: 16px 32px; }
      .mission-card:has(.crawl-viewport.active) .crawl-viewport:not(.is-crawling) { min-height: 104px; margin: 7px auto 12px; }
      .mission-card:has(.crawl-viewport.active) .mission-actions { flex-wrap: nowrap; }
      .mission-card:has(.crawl-viewport.active) .mission-actions .primary,
      .mission-card:has(.crawl-viewport.active) .mission-actions .secondary { min-height: 38px; padding-block: 8px; }
      .mission-card:has(.crawl-viewport.active) .runner-network { margin-top: 14px; padding-top: 10px; }
      .mission-card:has(.crawl-viewport.active) .leader-pane { min-height: 44px; max-height: 88px; }
    }
    @keyframes score-crawl {
      0% { bottom: -42%; transform: translate3d(-50%, 0, 36px) rotateX(22deg); opacity: 0; }
      8% { opacity: 1; }
      58% { opacity: 1; }
      72% { bottom: 76%; transform: translate3d(-50%, 0, -330px) rotateX(34deg); opacity: .95; }
      86% { bottom: 101%; transform: translate3d(-50%, 0, -620px) rotateX(39deg); opacity: 0; }
      100% { bottom: 108%; transform: translate3d(-50%, 0, -720px) rotateX(39deg); opacity: 0; }
    }
    @keyframes score-settle {
      0% { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes score-backdrop {
      0%, 70% { background-color: #020306; }
      100% { background-color: rgba(5, 17, 24, .38); }
    }
    @keyframes score-stars {
      0%, 70% { opacity: .9; }
      100% { opacity: 0; }
    }
    @keyframes mission-frame-reveal {
      0%, 74% { background-color: rgba(8, 24, 33, 0); border-color: transparent; box-shadow: none; }
      100% { background-color: rgba(8, 24, 33, .91); border-color: rgba(141, 206, 222, .52); box-shadow: 0 12px 35px rgba(0, 0, 0, .3); }
    }
    @keyframes report-details-reveal {
      0%, 76% { opacity: 0; transform: translateY(7px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .primary {
      appearance: none;
      border: 0;
      background: #f27c2a;
      color: #17242a;
      padding: 12px 22px;
      font: 800 17px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .05em;
      text-transform: uppercase;
      cursor: pointer;
      min-width: 150px;
    }
    .primary:hover, .primary:focus-visible { background: #ff9c58; outline: 3px solid rgba(255, 255, 255, .65); outline-offset: 2px; }
    .mission-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .mission-card.main-menu { width: min(860px, 96%); padding: 16px 22px; overflow-y: auto; }
    .mission-card.main-menu .mission-actions {
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
    }
    .mission-card.main-menu .mission-actions .primary,
    .mission-card.main-menu .mission-actions .secondary { width: min(240px, 100%); }
    .mission-actions .primary,
    .mission-actions .secondary {
      width: 180px;
      min-height: 42px;
      padding: 11px 12px;
      font-size: 16px;
    }
    .mission-card[hidden] { display: none; }
    .depot-card {
      width: min(820px, 96%);
      text-align: left;
      padding: 18px 22px;
    }
    /* The complete shop shares one viewport-sized scroll area. */
    #supplyDepotPanel {
      position: fixed;
      inset: 12px;
      z-index: 50;
      margin: auto;
      width: min(820px, calc(100% - 24px));
      height: calc(100dvh - 24px);
      max-height: none;
      box-sizing: border-box;
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-gutter: stable;
      background: #081821;
    }
    #supplyDepotPanel[hidden] { display: none; }
    #supplyDepotPanel .depot-inventory {
      max-height: none;
      overflow: visible;
    }
    #supplyDepotPanel .depot-footer {
      position: sticky;
      bottom: -18px;
      margin-top: 16px;
      padding: 12px 0;
      background: #081821;
      border-top: 1px solid rgba(255,255,255,.16);
      z-index: 1;
    }
    .depot-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.16);
    }
    .depot-header .tag { margin-bottom: 7px; }
    .depot-header h2 { font-size: clamp(29px, 5vw, 42px); }
    .depot-balance {
      margin: 0 !important;
      color: #ffe48a !important;
      font: 800 18px/1.1 "Barlow Condensed", sans-serif;
      text-align: right;
      white-space: nowrap;
    }
    .depot-balance small { display: block; margin-top: 4px; color: #a9c3cb; font: 600 11px/1 Barlow, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
    .depot-status { min-height: 18px; margin: 8px 0 4px !important; color: #b9d0d7 !important; font-size: 12px; }
    .depot-status.error { color: #ffc09c !important; }
    .depot-guest {
      max-width: 510px;
      margin: 34px auto 28px;
      padding: 24px;
      text-align: center;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(141,206,222,.22);
    }
    .depot-guest[hidden] { display: none; }
    .depot-guest h3 {
      margin: 0;
      color: #f2fbfd;
      font: 800 clamp(22px, 4vw, 30px)/1.05 "Barlow Condensed", sans-serif;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    .depot-guest p { margin: 12px auto 18px; color: #b9d0d7; font-size: 14px; line-height: 1.45; }
    .depot-guest .google-sign-in { padding: 10px 16px; font-size: 14px; }
    .depot-inventory {
      flex: 1 1 auto;
      min-height: 0;
      max-height: min(54vh, 430px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      padding: 0 5px 2px 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(103,213,235,.55) rgba(255,255,255,.06);
    }
    .depot-inventory::-webkit-scrollbar { width: 7px; }
    .depot-inventory::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
    .depot-inventory::-webkit-scrollbar-thumb { background: rgba(103,213,235,.55); }
    .depot-group { margin: 14px 0 0; }
    .depot-group h3 {
      margin: 0 0 7px;
      color: #67d5eb;
      font: 800 14px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .depot-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .depot-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(141,206,222,.22);
    }
    .depot-item h4 { margin: 0; color: #f2fbfd; font: 800 16px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .025em; }
    .depot-item p { margin: 4px 0 0; color: #afc5cc; font-size: 11px; line-height: 1.25; }
    .depot-tier { display: block; margin-top: 5px; color: #ffe48a; font: 700 11px/1 Barlow, sans-serif; }
    .depot-pricing { display: block; margin-top: 4px; color: #8edcea; font: 600 10px/1.3 Barlow, sans-serif; }
    .depot-item.cosmetic { grid-template-columns: auto minmax(0, 1fr) auto; }
    .armor-swatch {
      --armor-accent: #dce6e8;
      position: relative;
      width: 40px;
      height: 43px;
      flex: 0 0 auto;
      overflow: hidden;
      background: #eef3f3;
      border: 2px solid #758991;
      clip-path: polygon(19% 2%, 81% 2%, 100% 28%, 88% 94%, 62% 100%, 50% 84%, 38% 100%, 12% 94%, 0 28%);
      box-shadow: inset 0 -9px 0 rgba(64, 82, 89, .14);
    }
    .armor-swatch::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 50%;
      width: 9px;
      transform: translateX(-50%);
      background: var(--armor-accent);
    }
    .armor-swatch::after {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: 12px;
      height: 8px;
      background: #152a34;
      clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
    }
    .depot-buy {
      appearance: none;
      min-width: 76px;
      border: 1px solid #67d5eb;
      background: rgba(103,213,235,.1);
      color: #e9fbff;
      padding: 8px 9px;
      font: 800 12px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .depot-buy:hover, .depot-buy:focus-visible { background: rgba(103,213,235,.22); outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; }
    .depot-buy[disabled] { opacity: .42; cursor: not-allowed; }
    .depot-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
    .deployment-version { color: #8ea6af; font: 11px monospace; }
    .deployment-version:hover, .deployment-version:focus-visible { color: #d9f7ff; }
    .secondary {
      appearance: none;
      border: 1px solid #67d5eb;
      background: transparent;
      color: #d9f7ff;
      padding: 11px 18px;
      font: 800 16px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .05em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .secondary:hover, .secondary:focus-visible { background: rgba(103, 213, 235, .14); outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
    .secondary[hidden] { display: none; }
    .runner-network {
      min-height: 0;
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,.14);
      padding-top: 13px;
      text-align: left;
      font-size: 13px;
      display: flex;
      flex-direction: column;
    }
    .runner-network-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .leader-tabs { display: flex; gap: 2px; }
    .leader-tab {
      appearance: none;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #9db4bd;
      padding: 6px 8px;
      font: 800 12px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .leader-tab[aria-selected="true"] { color: #f1fbfd; border-bottom-color: #67d5eb; }
    .leader-tab:focus-visible { outline: 2px solid #67d5eb; outline-offset: 2px; }
    .account-controls { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
    .google-sign-in {
      appearance: none;
      border: 1px solid rgba(141,206,222,.52);
      background: rgba(255,255,255,.06);
      color: #eaf9fc;
      padding: 6px 10px;
      font: 700 12px/1 Barlow, sans-serif;
      cursor: pointer;
    }
    .google-sign-in:hover, .google-sign-in:focus-visible { border-color: #67d5eb; outline: 2px solid rgba(103,213,235,.3); }
    .signed-in { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #cfe1e6; }
    .signed-in[hidden], .google-sign-in[hidden] { display: none; }
    .signed-in strong { overflow: hidden; max-width: 125px; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
    .sign-out {
      appearance: none;
      border: 0;
      border-bottom: 1px solid rgba(207,225,230,.42);
      background: none;
      color: #aebfc5;
      padding: 2px 0;
      font: inherit;
      cursor: pointer;
    }
    .leader-pane {
      min-height: 42px;
      max-height: 118px;
      overflow-y: auto;
      overscroll-behavior: contain;
      margin-top: 12px;
      padding-right: 5px;
      scrollbar-width: thin;
      scrollbar-color: rgba(103, 213, 235, .55) rgba(255, 255, 255, .06);
    }
    .leader-pane::-webkit-scrollbar { width: 7px; }
    .leader-pane::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); }
    .leader-pane::-webkit-scrollbar-thumb { background: rgba(103, 213, 235, .55); }
    .leader-pane[hidden] { display: none; }
    .leader-empty, .leader-loading { margin: 10px 0 0 !important; color: #9eb2b9 !important; font-size: 12px; }
    .leader-list { margin: 0; padding: 0; list-style: none; counter-reset: runners; }
    .leader-list li {
      counter-increment: runners;
      display: grid;
      grid-template-columns: 22px minmax(0,1fr) auto;
      gap: 8px;
      align-items: baseline;
      padding: 3px 2px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-variant-numeric: tabular-nums;
    }
    .leader-list li::before { content: counter(runners); color: #6f8c96; text-align: right; }
    .leader-list .leader-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dcecf0; }
    .leader-list .leader-score { color: #fff0a5; font-weight: 700; }
    #localScoresMount .local-bests { margin: 0; border: 0; padding: 0; }
    #localScoresMount .local-bests h3 { display: none; }
    .handle-setup { margin-top: 9px; padding: 10px; background: rgba(103,213,235,.08); border: 1px solid rgba(103,213,235,.28); }
    .handle-setup[hidden] { display: none; }
    .handle-setup label { display: block; margin-bottom: 7px; color: #d8e8ec; line-height: 1.35; }
    .handle-row { display: flex; gap: 7px; }
    .handle-row input {
      min-width: 0;
      flex: 1;
      border: 1px solid #557a86;
      background: #071820;
      color: #fff;
      padding: 8px 9px;
      font: 600 14px/1 Barlow, sans-serif;
    }
    .handle-row button { min-width: 78px; padding: 8px 10px; font-size: 14px; }
    .network-status { min-height: 16px; margin: 10px 0 0 !important; color: #abc2ca !important; font-size: 12px; line-height: 1.3 !important; }
    .network-status.error { color: #ffc09c !important; }
    .story-intro {
      position: absolute;
      inset: 0;
      z-index: 20;
      overflow: hidden;
      color: #ffd54d;
      background: #020306;
      perspective: 330px;
    }
    .story-intro[hidden] { display: none; }
    .story-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 73% 29%, #b9dfff 0 1px, transparent 1.5px),
        radial-gradient(circle at 35% 71%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 89% 80%, #fff 0 1px, transparent 1.4px);
      background-size: 137px 113px, 181px 149px, 223px 167px, 257px 191px;
      opacity: .86;
    }
    .intro-fade {
      position: absolute;
      z-index: 2;
      inset: 0 0 auto;
      height: 34%;
      background: linear-gradient(#020306 28%, transparent);
      pointer-events: none;
    }
    .intro-crawl {
      position: absolute;
      z-index: 1;
      left: 50%;
      bottom: -72%;
      width: min(690px, 84%);
      text-align: justify;
      font: 800 clamp(22px, 3.2vw, 38px)/1.42 "Barlow Condensed", sans-serif;
      letter-spacing: .025em;
      transform-origin: 50% 100%;
      transform: translateX(-50%) rotateX(22deg);
    }
    .story-intro.playing .intro-crawl { animation: intro-scroll 26.4s linear forwards; }
    .intro-crawl h2 { margin: 0 0 22px; text-align: center; font-size: 1.55em; line-height: 1; text-transform: uppercase; }
    .intro-crawl .episode { display: block; margin-bottom: 8px; font-size: .55em; letter-spacing: .15em; }
    .intro-crawl p { margin: 0 0 1.05em; }
    .skip-intro {
      position: absolute;
      z-index: 3;
      right: 15px;
      bottom: 14px;
      border-color: rgba(255,213,77,.72);
      color: #ffe999;
      background: rgba(2,3,6,.7);
    }
    @keyframes intro-scroll {
      0% { bottom: -72%; }
      100% { bottom: 96%; }
    }
    .controls {
      display: grid;
      grid-template-columns: 1fr auto auto auto auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-top: 1px solid var(--line);
    }
    .tip { color: var(--muted); font-size: 14px; padding-left: 5px; }
    .control {
      appearance: none;
      border: 1px solid var(--line);
      background: var(--button);
      color: var(--button-ink);
      min-height: 48px;
      min-width: 112px;
      padding: 10px 17px;
      font: 800 16px/1 "Barlow Condensed", sans-serif;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      touch-action: manipulation;
    }
    .control:active { background: var(--accent); }
    .control[disabled] { opacity: .48; cursor: not-allowed; }
    .control.fire-ready { background: #a83b24; color: #fff; border-color: #df7459; }
    .detonator-control {
      min-width: 72px;
      padding: 9px 11px;
      align-items: center;
      justify-content: center;
      background: #2f393d;
      border-color: #75848a;
    }
    .detonator-control:not([hidden]) { display: inline-flex; }
    .detonator-control[hidden] { display: none; }
    .detonator-control:not([disabled]) { border-color: #bdcbc9; }
    .detonator-icon {
      display: inline-block;
      width: 17px;
      height: 17px;
      margin-right: 6px;
      vertical-align: -4px;
      border: 2px solid #dce5e6;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f4f7f7 0 10%, #8f9b9e 12% 47%, #242c2f 50% 64%, #d5dedf 67% 74%, #3d484c 77% 100%);
      box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
    }
    .debrief {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin: 12px 3px 0;
      color: var(--muted);
      font-size: 13px;
    }
    .debrief b { color: var(--ink); }
    body.game-fullscreen {
      overflow: hidden;
      padding: 0;
      touch-action: none;
      overscroll-behavior: none;
    }
    body.game-fullscreen main { width: 100vw; height: 100vh; height: 100dvh; }
    body.game-fullscreen .briefing,
    body.game-fullscreen .debrief { display: none; }
    body.game-fullscreen .game-shell {
      position: fixed;
      inset: 0;
      z-index: 1000;
      height: 100vh;
      height: 100dvh;
      border: 0;
      display: flex;
      flex-direction: column;
      padding-top: env(safe-area-inset-top);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      box-shadow: none;
    }
    body.game-fullscreen .stage {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    body.game-fullscreen canvas {
      width: 100%;
      max-height: 100%;
      height: auto;
    }
    body.game-fullscreen .controls { flex: 0 0 auto; }
    body.game-fullscreen .tip { display: none; }
    @media (max-width: 620px) {
      body { padding: 10px; place-items: start center; }
      .briefing { margin-top: 8px; align-items: start; }
      .briefing p { font-size: 13px; }
      .sector { display: none; }
      .hud { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; padding-left: 12px; gap: 7px; }
      .hud.has-credits { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 5px; }
      .hud.has-credits .stat small { font-size: 8px; letter-spacing: .07em; line-height: 1.05; }
      .stat strong { font-size: 19px; }
      .hud.has-credits .stat strong { font-size: 17px; }
      .controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 7px; }
      .tip { grid-column: 1 / -1; grid-row: 2; text-align: center; font-size: 12px; padding: 0; }
      .control { min-width: 0; width: 100%; padding-inline: 10px; }
      .detonator-control { width: 58px; padding-inline: 7px; }
      .detonator-icon { margin-right: 3px; }
      .debrief { display: block; line-height: 1.45; }
      .debrief span:last-child { display: block; margin-top: 3px; }
      .overlay { position: relative; padding: 0; background: #0b202a; }
      .mission-card { width: 100%; padding: 24px 18px 22px; border: 0; box-shadow: none; }
      .mission-card.main-menu { width: 100%; padding: 20px 14px; }
      .mission-card.main-menu .mission-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
      .mission-card.main-menu .mission-actions .primary,
      .mission-card.main-menu .mission-actions .secondary { width: 100%; min-width: 0; }
      .mission-card h2 { font-size: 32px; }
      .mission-card p { font-size: 13px; margin: 12px auto 18px; }
      .daily-challenge { margin-bottom: 10px; padding: 7px 9px; }
      .daily-challenge h3 { font-size: 15px; }
      .daily-challenge > p { margin: 3px 0 5px; }
      .daily-guest { align-items: stretch; flex-direction: column; gap: 8px; }
      .daily-guest .google-sign-in { width: 100%; }
      .depot-card { padding: 18px 12px 16px; }
      .depot-header { align-items: flex-start; }
      .depot-header .tag { margin-bottom: 5px; }
      .depot-header h2 { font-size: 29px; }
      .depot-balance { font-size: 16px; }
      .depot-items { grid-template-columns: 1fr; }
      .depot-item { padding: 9px; }
      .depot-inventory { max-height: 56vh; }
      .primary { padding: 10px 18px; }
      .mission-actions { gap: 10px; }
      .runner-network { margin-top: 18px; padding-top: 14px; }
      .runner-network-bar { align-items: flex-start; gap: 8px; }
      .signed-in strong { max-width: 92px; }
      .google-sign-in { padding: 6px 8px; }
      .leader-pane { max-height: 132px; margin-top: 11px; }
      body.game-fullscreen .hud { min-height: 54px; }
      body.game-fullscreen .overlay { position: absolute; inset: 0; padding: 12px; background: rgba(5, 17, 24, .52); }
      body.game-fullscreen .mission-card { width: min(430px, 100%); max-height: 100%; overflow-y: auto; border: 1px solid rgba(141, 206, 222, .52); }
      body.game-fullscreen .mission-card.revealing-score { overflow: visible; }
      body.game-fullscreen .controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
      .crawl-text strong { font-size: clamp(58px, 19vw, 74px); }
      .intro-crawl { width: 88%; font-size: 21px; }
      .story-intro.playing .intro-crawl { animation-duration: 23.1s; }
    }
    @media (prefers-reduced-motion: reduce) {
      canvas {
        -webkit-transition-duration: .12s;
        transition-duration: .12s;
      }
      canvas.impact-stun {
        -webkit-transition-duration: .08s;
        transition-duration: .08s;
      }
      canvas.highlight-replay,
      canvas.impact-stun-reset {
        -webkit-transition: none;
        transition: none;
      }
      .overlay { transition: none; }
      .crawl-text,
      .crawl-viewport.active .crawl-text,
      .mission-card.revealing-score,
      .mission-card.revealing-score > .tag,
      .mission-card.revealing-score > h2,
      .mission-card.revealing-score > .daily-challenge,
      .mission-card.revealing-score > .mission-actions,
      .mission-card.revealing-score > .runner-network { animation: none; transform: none; opacity: 1; filter: none; }
      .story-intro { overflow-y: auto; padding: 38px 20px 76px; perspective: none; }
      .intro-fade { display: none; }
      .intro-crawl { position: relative; left: auto; bottom: auto; width: min(650px, 100%); margin: auto; transform: none; animation: none !important; font-size: 22px; }
    }

/* Permanent quest dialog stays accessible above both gameplay and menus. */
.quests-dialog { width:min(520px,calc(100% - 28px)); height:min(720px,85dvh); max-height:85dvh; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }
.quests-dialog::backdrop { background:rgba(2,9,15,.78); }
.quests-dialog h2 { margin:8px 0; font-family:'Barlow Condensed',sans-serif; font-size:32px; }
.quests-dialog p { line-height:1.5; }
#questTestingNote { color:var(--accent); font-size:13px; }
.quest-progress { list-style:none; padding:0; display:grid; gap:15px; }
.quest-progress li { display:grid; gap:6px; font-size:14px; }
.quest-progress progress { width:100%; height:12px; accent-color:#b8433d; }
.quest-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.quests-dialog .quest-actions button { padding:10px 16px; border:1px solid var(--line); border-radius:6px; background:var(--button); color:var(--button-ink); cursor:pointer; }
.quests-dialog .quest-actions .secondary { background:transparent; color:var(--ink); }
.quests-dialog .quest-actions button:disabled { opacity:.6; cursor:default; }

.depot-loadout-actions { display:grid; gap:7px; }

.quest-tabs { display:flex; gap:8px; margin:14px 0; }
.quest-tabs button { flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); font:700 15px 'Barlow',sans-serif; cursor:pointer; }
.quest-tabs button[aria-selected="true"] { background:var(--button); color:var(--button-ink); }
.quest-tabs button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.quest-tabs { flex-wrap:wrap; }
.quest-tabs button { min-width:100px; }

.quests-dialog[open] { display:flex; flex-direction:column; }
.quests-dialog > .tag, .quests-dialog > .quest-tabs { flex-shrink:0; }
#questDetails { flex:1; min-height:0; overflow-y:auto; scrollbar-gutter:stable; padding-right:4px; }

.mode-dialog { width:min(520px,calc(100% - 28px)); max-height:85dvh; overflow:auto; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }
.mode-dialog::backdrop { background:rgba(2,9,15,.78); }
.mode-dialog h2 { margin:8px 0 20px; font:800 32px 'Barlow Condensed',sans-serif; }
.mode-dialog button { cursor:pointer; }
.mode-dialog .mode-option { display:flex; flex-direction:column; gap:8px; width:100%; margin:0 0 14px; padding:20px; text-align:left; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); }
.mode-option strong { font:800 24px 'Barlow Condensed',sans-serif; }
.mode-option span { font:400 14px/1.5 'Barlow',sans-serif; }
.mode-dialog .mode-option:hover { border-color:var(--accent-2); }
.mode-dialog button:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
.mode-dialog .chapter-number { color:var(--accent); font-weight:700; }
.mode-dialog .primary,.mode-dialog .secondary { margin-top:8px; padding:10px 16px; border:1px solid var(--line); border-radius:6px; background:var(--button); color:var(--button-ink); }
.mode-dialog .secondary { background:transparent; color:var(--ink); }

#mundiPortrait { display:block; width:180px; height:170px; max-width:100%; margin:16px auto; border:2px solid var(--line); border-radius:10px; }
.rescue-actions { display:flex; flex-wrap:wrap; gap:8px; }
.mode-dialog.mission-success { background:#123b2d; border-color:#74d997; color:#e6fff0; }
.mode-dialog.mission-success .secondary { color:#e6fff0; border-color:#74d997; }
.mode-dialog .mode-option.chapter-complete { border:2px solid #4aaa76; background:rgba(72,170,111,.14); }
.mode-dialog .chapter-completion { color:#36965e; font-weight:800; }

.mode-dialog .mode-option:disabled { opacity:.5; cursor:not-allowed; }

/* Story chapters use an in-app full-screen view without changing the URL. */
.mode-dialog.chapter-screen { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:16px; border:0; border-radius:0; background:radial-gradient(ellipse at 80% 0%,#253e53 0%,#10222f 44%,#09151f 100%); color:#edf5fa; }
.mode-dialog.chapter-screen > .tag,.mode-dialog.chapter-screen > h2,#storyChapters { max-width:1000px; margin-left:auto; margin-right:auto; }
.mode-dialog.chapter-screen > .tag { display:block; color:#94bed4; }
.mode-dialog.chapter-screen > h2 { margin:4px auto 8px; font-size:clamp(26px,4vw,34px); }
#storyChapters > p { margin:4px 0; font-size:12px; line-height:1.35; }
.chapter-intro { color:#b3c8d5; }
.chapter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:8px 0 12px; }
.mode-dialog.chapter-screen .chapter-option { min-height:85px; margin:0; padding:4px 6px 6px; gap:2px; border:1px solid #3c586d; border-radius:16px; background:#152b3a; color:#edf5fa; overflow:hidden; }
.chapter-option canvas { display:block; width:100%; height:40px; object-fit:contain; background:radial-gradient(ellipse,#344653 0%,#192e3b 70%); }
.chapter-option canvas ~ span,.chapter-option canvas ~ strong { margin:0; }
.chapter-screen .chapter-option > span:not(.chapter-number) { display:none; }
.mode-dialog.chapter-screen .chapter-option strong { font-size:14px; line-height:1.15; }
.mode-dialog.chapter-screen .chapter-option span { color:#b8cfdb; }
.mode-dialog.chapter-screen .chapter-option .chapter-number { color:#f4a869; font-weight:700; font-size:10px; line-height:1.2; }
.mode-dialog.chapter-screen .chapter-option.chapter-complete { border:2px solid #6dd59b; background:#153c32; }
.mode-dialog.chapter-screen .chapter-completion { color:#8be0ad; }
.mode-dialog.chapter-screen .secondary { color:#edf5fa; border-color:#5b788d; }
@media(max-width:640px) { .chapter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .mode-dialog.chapter-screen .chapter-option { min-height:70px; } .chapter-option canvas { height:28px; } .mode-dialog.chapter-screen .chapter-option strong { font-size:11px; } .mode-dialog.chapter-screen .chapter-option .chapter-number { display:none; } #storyChapters > p:not([id]):not(.chapter-intro) { display:none; } }

.story-arc-heading { margin:12px 0 4px; font:700 20px 'Barlow',sans-serif; color:#d4e5ee; }
#escapePodScene { display:block; width:100%; height:auto; margin:18px 0; border:1px solid var(--line); border-radius:10px; }

.story-scene { display:block; width:100%; height:auto; margin:16px 0; border-radius:10px; }

.story-preview-portrait { display:block; width:100%; height:240px; object-fit:contain; margin:16px 0; border-radius:12px; background:radial-gradient(ellipse,#344653,#192e3b); }
#storyPreviewNumber { display:block; margin-top:16px; }

#testCodeForm { display:grid; gap:14px; margin:20px 0; }
#testCode { width:100%; box-sizing:border-box; padding:12px; font:700 24px monospace; letter-spacing:.4em; border:1px solid var(--line); border-radius:4px; }
#testCodeError { color:#d54444; margin:0; }
#testCode[aria-invalid="true"] { border-color:#d54444; }

.test-level-exit { position:static; }
#testToolbar:not([hidden]) { display:flex; justify-content:flex-end; padding:6px 12px; }

#stealthTestControls[hidden], #escapeTestChoices[hidden] { display:none; }
#stealthTestControls { grid-template-columns:repeat(4,minmax(0,1fr)); }
#escapeTestChoices { grid-template-columns:repeat(2,minmax(0,1fr)); }
#stealthTestControls .control, #escapeTestChoices .control { min-width:0; padding-inline:6px; }

#combatTestControls[hidden] { display:none; }
#combatTestControls { grid-template-columns:repeat(5,minmax(0,1fr)); }
#combatTestControls .control { min-width:0; padding-inline:6px; }

.separatist-depot-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.separatist-depot-section .depot-balance { text-align:left; }

#combatSpecial[hidden] { display:none; }
#combatTestControls:has(#combatSpecial:not([hidden])) { grid-template-columns:repeat(6,minmax(0,1fr)); }
#batchArenaPicker .chapter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#batchArenaPicker .mode-option { min-width:0; padding:14px; margin:0; }
#batchArenaPicker .mode-option strong { font-size:21px; }

.redeem-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
#redeemCodeForm[hidden] { display:none; }
.redeem-code-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
#redeemCodeInput { flex:1; min-width:120px; padding:10px; font:700 16px monospace; text-transform:uppercase; }

.skin-trade-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
#skinTradeControls[hidden], #tradeReviewPanel[hidden] { display:none; }
#tradeSkinSelect { width:100%; min-width:0; padding:10px; font:inherit; margin:8px 0; }
#joinTradeCode { flex:1; min-width:120px; padding:10px; font:700 16px monospace; text-transform:uppercase; }
.trade-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
#tradeRoomCode { font-family:monospace; overflow-wrap:anywhere; }
#tradeReviewPanel { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:8px; }
.trade-consent { display:flex; gap:10px; align-items:flex-start; margin:16px 0; }
.trade-consent input { flex:none; width:20px; height:20px; }
#tradeResetWarning { font-weight:700; }

.collection-dialog { box-sizing:border-box; width:min(900px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:20px; border:1px solid #547080; border-radius:12px; color:#edf5fa; background:#10222f; overflow-y:auto; overscroll-behavior:contain; }
.collection-dialog::backdrop { background:rgba(4,14,21,.8); }
.collection-header { position:sticky; top:-20px; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; background:#10222f; border-bottom:1px solid #547080; }
.collection-header h2 { margin:5px 0; font:800 30px 'Barlow Condensed',sans-serif; }
.collection-header p { margin:0; }
.collection-header .tag { font:700 12px Barlow,sans-serif; color:#82d3e6; }
.collection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.collection-card { min-width:0; padding:12px 8px; text-align:center; background:#203a4a; border:1px solid #496478; border-radius:8px; }
.collection-card.owned { border-color:#77c9a3; }
.collection-card canvas { display:block; width:100%; max-width:150px; height:160px; object-fit:contain; margin:0 auto 8px; background:#c6d0d3; border-radius:6px; }
.collection-card h3 { margin:6px 0; font:700 18px 'Barlow Condensed',sans-serif; }
.collection-card p { margin:4px 0; font-size:12px; color:#bed0d9; }
#depotCollectionBtn { align-self:flex-start; margin-bottom:12px; }
@media(max-width:480px) { .collection-dialog { padding:14px; } .collection-header { top:-14px; } .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }

.collection-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.collection-tabs button[aria-pressed="true"] { background:#c6e8ef; color:#10222f; }
.collection-grid[hidden] { display:none; }

#elementCodeForm { display:grid; gap:12px; margin-top:18px; }
#elementCodeInput { padding:12px; font:inherit; min-width:0; }
#elementCodeError { color:#bd3c27; }

.mission-card.game-over-menu:not(.main-menu) .mission-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.mission-card.game-over-menu:not(.main-menu) .mission-actions > button { width:100%; min-width:0; padding:10px 6px; font-size:clamp(13px,2.2vw,16px); }

.quest-tabs button.quest-complete { background:#c6f3d1; color:#173b25; border-color:#68b780; }
.quest-tabs button.quest-complete[aria-selected="true"] { background:#c6f3d1; color:#173b25; border-color:#287543; box-shadow:inset 0 0 0 2px #287543; }

/* Sticker pages use paper, loose cutouts and varied placement. */
:is(#stickerGrid,#collectionGrid) { padding:24px 18px 30px; gap:28px 16px; border-radius:8px; background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(98,121,137,.13) 27px 28px),#eee8d9; border:1px solid #c6baa0; box-shadow:inset 6px 0 0 rgba(146,121,84,.14); }
#stickerGrid .sticker-card { background:none; border:0; padding:8px 4px; color:#24313b; }
#stickerGrid .sticker-card p { color:#4c5760; }
#stickerGrid .sticker-card canvas { background:transparent; border-radius:0; aspect-ratio:1; height:auto; width:100%; max-width:170px; margin-bottom:16px; transform:rotate(-7deg); }
#stickerGrid .sticker-card:nth-child(2) canvas { transform:rotate(8deg) translateY(4px); }
#stickerGrid .sticker-card:nth-child(3) canvas { transform:rotate(-4deg) translateY(-5px); }
#stickerGrid .sticker-card:nth-child(4) canvas { transform:rotate(6deg) translateY(6px); }
#stickerGrid .sticker-card.owned canvas { filter:drop-shadow(2px 4px 2px rgba(34,27,18,.3)); }
#stickerGrid .sticker-card.owned h3 { color:#265338; }
@media(max-width:480px) { :is(#stickerGrid,#collectionGrid) { padding:20px 10px; gap:24px 12px; } }

#collectionGrid .collection-card { background:none; border:0; padding:8px 4px; color:#24313b; }
#collectionGrid .collection-card p { color:#4c5760; }
#collectionGrid .collection-card canvas { background:transparent; border-radius:0; aspect-ratio:1; height:auto; width:100%; max-width:170px; margin-bottom:16px; transform:rotate(-6deg); }
#collectionGrid .collection-card:nth-child(4n+2) canvas { transform:rotate(5deg) translateY(4px); }
#collectionGrid .collection-card:nth-child(4n+3) canvas { transform:rotate(-3deg) translateY(-3px); }
#collectionGrid .collection-card:nth-child(4n) canvas { transform:rotate(7deg) translateY(5px); }
#collectionGrid .collection-card.owned canvas { filter:drop-shadow(2px 4px 2px rgba(34,27,18,.3)); }
#collectionGrid .collection-card.owned h3 { color:#265338; }

.comic-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.comic-library[hidden] { display:none; }
.comic-cover { min-width:0; padding:24px 16px; color:#c3c9cb; border:3px solid #18212b; background:repeating-linear-gradient(135deg,#263443 0 8px,#2c3d4a 8px 16px); box-shadow:4px 5px 0 #050f18; }
.comic-cover.unlocked { color:#172b35; background:linear-gradient(145deg,#ffdf91,#e79d64); }
.comic-cover h3 { font:900 28px 'Barlow Condensed',sans-serif; text-transform:uppercase; margin:0 0 18px; }
.comic-cover button { max-width:100%; }
.comic-cover.unlocked button { color:#162b35; border-color:#162b35; }
.comic-reader { box-sizing:border-box; width:min(1000px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; padding:20px; color:#14232c; background:#f2ead7; border:4px solid #17232d; }
.comic-reader::backdrop { background:rgba(3,12,20,.86); }
.comic-reader-header { position:sticky; top:-20px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f2ead7; padding:12px 0; border-bottom:3px solid #17232d; }
.comic-reader-header h2 { font:900 clamp(24px,5vw,38px) 'Barlow Condensed',sans-serif; text-transform:uppercase; margin:5px 0; }
.comic-reader-header p { margin:4px 0; }
.comic-reader .secondary { color:#14232c; border-color:#14232c; }
.comic-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; }
.comic-panels figure { min-width:0; margin:0; border:3px solid #17232d; background:#fff9ec; box-shadow:4px 5px 0 #b9ab91; }
.comic-panels canvas { display:block; width:100%; height:auto; aspect-ratio:420/220; }
.comic-panels figcaption { padding:14px; }
.comic-panels h3 { font:900 24px 'Barlow Condensed',sans-serif; text-transform:uppercase; margin:0 0 8px; }
.comic-panels p { margin:0; font:500 16px/1.5 Barlow,sans-serif; }
.comic-reader-footer { position:sticky; bottom:-20px; display:flex; justify-content:space-between; gap:12px; padding:12px 0; background:#f2ead7; border-top:3px solid #17232d; }
#storyComicBtn { margin:12px 0; }
@media(max-width:620px) { .comic-panels { grid-template-columns:1fr; } .comic-library { grid-template-columns:1fr; } .comic-reader { padding:12px; } .comic-reader-header { top:-12px; } .comic-reader-footer { bottom:-12px; } .comic-reader-header button { padding:8px; font-size:14px; } }

/* Keep the book header outside the scrolling pages, including on short screens. */
.collection-dialog { width:min(900px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:min(850px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; }
.collection-dialog[open] { display:flex; flex-direction:column; }
.collection-dialog:not([open]) { display:none; }
.collection-header { position:static; flex:none; min-width:0; }
.collection-header > div { min-width:0; overflow-wrap:anywhere; }
.collection-header > button { flex:none; max-width:40%; padding:10px 12px; }
.collection-dialog > .collection-tabs,.collection-dialog > #collectionNote { flex:none; }
.collection-dialog > :is(#collectionGrid,#stickerGrid,#comicGrid) { box-sizing:border-box; flex:1; min-height:0; min-width:0; width:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; align-content:start; }
.mission-card.main-menu .mission-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.mission-card.main-menu .mission-actions .primary,.mission-card.main-menu .mission-actions .secondary { width:100%; min-width:0; padding:10px 6px; font-size:clamp(13px,2.2vw,16px); }
.mission-card.main-menu #highlightsBtn,.mission-card:not(.main-menu) #leaderboardBtn { display:none; }
.leaderboard-dialog { box-sizing:border-box; width:min(800px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:20px; border:1px solid #547080; background:#10222f; color:#edf5fa; overflow-y:auto; }
.leaderboard-dialog::backdrop { background:rgba(4,14,21,.8); }
.leaderboard-dialog > header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.leaderboard-dialog h2 { margin:0; font:800 30px 'Barlow Condensed',sans-serif; }
.leaderboard-dialog .runner-network { margin-top:16px; }
.leaderboard-dialog .leader-pane { max-height:min(50dvh,440px); }
.collection-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.collection-tabs button { min-width:0; padding:10px 4px; font-size:clamp(13px,1.8vw,16px); white-space:normal; }

/* Comic books share the collection window dimensions and keep chrome out of the page scroller. */
.comic-reader { width:min(900px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:min(850px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; }
.comic-reader[open] { display:flex; flex-direction:column; }
.comic-reader:not([open]) { display:none; }
.comic-reader-header,.comic-reader-footer { position:static; flex:none; }
.comic-reader-header > div { min-width:0; overflow-wrap:anywhere; }
.comic-reader-header > button { flex:none; max-width:40%; }
.comic-panels { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; overscroll-behavior:contain; align-content:start; padding:0 6px 8px 0; }
#comicGrid { padding:26px 22px; gap:30px 22px; background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(98,121,137,.13) 27px 28px),#eee8d9; border:1px solid #c6baa0; border-radius:8px; }
#comicGrid .comic-cover { padding:8px 6px; color:#24313b; border:0; background:none; box-shadow:none; text-align:center; }
#comicGrid .comic-cover canvas { display:block; width:100%; max-width:240px; height:auto; aspect-ratio:3/4; margin:0 auto 22px; transform:rotate(-4deg); box-shadow:-4px 1px 0 #18212b,3px 6px 7px rgba(34,27,18,.35); }
#comicGrid .comic-cover:nth-child(2) canvas { transform:rotate(5deg) translateY(4px); }
#comicGrid .comic-cover:nth-child(3) canvas { transform:rotate(-6deg) translateY(2px); }
#comicGrid .comic-cover:nth-child(4) canvas { transform:rotate(3deg) translateY(6px); }
#comicGrid .comic-cover:not(.unlocked) canvas { filter:grayscale(1) brightness(.75); }
#comicGrid .comic-cover h3 { font-size:22px; margin-bottom:10px; }
#comicGrid .comic-cover button { color:#172b35; border-color:#172b35; }

/* Mission choices and quests always share the same black-and-blue palette. */
.mode-dialog,.quests-dialog { --panel:#10222f; --ink:#edf5fa; --line:#45667e; --button:#244f70; --button-ink:#edf5fa; --accent:#78cde4; --accent-2:#92e3f4; background-color:#10222f; color:#edf5fa; color-scheme:dark; }
.mode-dialog .mode-option:not(.chapter-complete) { background:#162f40; border-color:#45667e; }
.mode-dialog .mode-option:hover { border-color:#92e3f4; }
.quest-progress progress { accent-color:#78cde4; }
.mode-dialog #testCodeError,.mode-dialog #elementCodeError { color:#ffb9a0; }

.republic-crate-section { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; margin:20px 0; padding:18px; background:#152f41; border:1px solid #7299b0; }
.republic-crate-section h3 { margin:0; font:800 26px 'Barlow Condensed',sans-serif; color:#edf8fc; }
#supplyDepotPanel .republic-crate-section p { margin:10px 0; max-width:none; font-size:13px; }
.crate-odds { padding-left:18px; font:500 13px/1.7 Barlow,sans-serif; }
.supply-crate-art { display:grid; place-items:center; align-self:center; height:90px; background:linear-gradient(135deg,#5d88a9,#244d71); color:#e8f4fa; font-size:50px; border:5px solid #152b3b; box-shadow:inset 0 0 0 3px #adc9d9,4px 6px 0 #0c1c27; }
.crate-result-dialog { box-sizing:border-box; width:min(500px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding:24px; border:1px solid #7299b0; background:#10222f; color:#edf5fa; text-align:center; }
.crate-result-dialog::backdrop { background:rgba(4,14,21,.82); }
.crate-result-dialog h2 { font:800 32px 'Barlow Condensed',sans-serif; margin:8px 0; }
.crate-result-dialog canvas { display:block; width:192px; max-width:100%; height:auto; aspect-ratio:1; margin:16px auto; }
.crate-result-dialog p { line-height:1.5; }
@media(max-width:480px) { .republic-crate-section { grid-template-columns:1fr; padding:12px; } .supply-crate-art { width:90px; justify-self:center; } }

#collectionGrid .collection-equip { margin-top:8px; min-height:40px; max-width:100%; padding:7px 16px; border:1px solid #35566a; border-radius:5px; background:#173646; color:#eefaff; font:700 16px 'Barlow Condensed',sans-serif; cursor:pointer; }
#collectionGrid .collection-equip:disabled { cursor:default; opacity:.65; }
#collectionGrid .collection-equip:focus-visible { outline:3px solid #2182a8; outline-offset:3px; }

/* Preview art must allow the collection's native vertical touch scrolling. */
#collectionDialog, #collectionDialog .collection-grid, #collectionDialog canvas {
  touch-action: pan-y;
}

.leader-list button.leader-handle { padding:6px 0; border:0; border-radius:0; background:transparent; color:#b8eaff; font:inherit; text-align:left; text-transform:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.leader-list button.leader-handle:hover { color:#fff; }
.leader-list button.leader-handle:focus-visible { outline:2px solid #84d9f1; outline-offset:3px; }

#globalLeaderboard .leader-list li { align-items:center; }
#globalLeaderboard button.leader-handle { display:flex; align-items:center; gap:8px; min-width:0; text-decoration:none; }
#globalLeaderboard .leader-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
#globalLeaderboard canvas.leader-avatar { flex:0 0 40px; width:40px; height:40px; aspect-ratio:1; background:transparent; touch-action:pan-y; }

.geo-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#geoControls[hidden], #geoRoutes[hidden] { display:none; }
#geoBrief p { line-height:1.55; }
#geoBrief h3 { color:#ffd99a; font:800 30px 'Barlow Condensed',sans-serif; }

#lairScene { width:100%; max-width:420px; height:auto; aspect-ratio:21/11; margin:0 auto 16px; touch-action:pan-y; }
#lairScene[hidden] { display:none; }

/* Inked comic pages retain the shared reader size and independent page scroll. */
.comic-panels { gap:22px; padding:10px 12px 16px 6px; background:radial-gradient(#b9a786 0.6px,transparent 0.8px) 0 0/7px 7px,#eee0bf; }
.comic-panels figure { border:4px solid #15202b; box-shadow:5px 6px 0 #26333c; background:#fff7dd; }
.comic-panels canvas { border-bottom:3px solid #15202b; box-sizing:border-box; filter:contrast(1.08) saturate(1.14); }
.comic-panels figcaption { padding:0 0 14px; }
.comic-panels h3 { margin:0 0 12px; padding:10px 12px; border-bottom:3px solid #15202b; background:#f3d16e; color:#17222c; font-style:italic; letter-spacing:.4px; }
.comic-panels p { padding:0 13px; color:#202a34; font:600 15px/1.55 Barlow,sans-serif; }
#comicGrid .comic-cover:nth-child(5) canvas { transform:rotate(-2deg) translateY(-3px); }

[data-crates-hidden] { display:none !important; }

.halloween-shop { margin:18px 0; padding:18px; border:2px solid #d58c49; background:radial-gradient(ellipse at top right,#493357,#1e1c32 70%); color:#fff2d8; }
.halloween-shop-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.halloween-shop h3 { margin:4px 0; color:#ffbf71; font:900 30px 'Barlow Condensed',sans-serif; }
#halloweenBalance { padding:10px; border:1px solid #c98b55; background:#201c2d; font-weight:800; }
#halloweenStatus { font-size:14px; color:#ded1e6; }
.halloween-inventory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.halloween-item { min-width:0; display:flex; flex-direction:column; align-items:center; padding:12px; text-align:center; border:1px solid #77627e; background:#191c2b; }
.halloween-item canvas { width:120px; max-width:100%; height:auto; aspect-ratio:1; touch-action:pan-y; }
.halloween-item h4 { margin:8px 0 4px; font:800 21px 'Barlow Condensed',sans-serif; color:#ffdaa6; }
.halloween-item p { margin:4px 0; font-size:12px; }
.halloween-item .halloween-price { color:#ffbf71; font-weight:800; margin-top:auto; padding-top:10px; }
.halloween-item button { margin-top:8px; color:#ffdaa6; border-color:#bc8a5b; width:100%; }
@media(max-width:600px) { .halloween-shop { padding:12px; } .halloween-inventory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

#openRunCrates { display:block; width:100%; max-width:100%; box-sizing:border-box; margin:10px 0; white-space:normal; }
#openRunCrates[hidden], .mission-card.main-menu #openRunCrates, .mission-card.revealing-score #openRunCrates { display:none; }

/* Permanent free Battle Pass */
.battle-pass-entry{border-color:#a6bd79!important;background:linear-gradient(115deg,#263d3b,#1d3548)!important}.battle-pass-entry span{display:block;font-size:9px;letter-spacing:.14em;color:#d7e8ab;margin-top:4px}
#battlePassDialog{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:0;color:#e5eef1;background:radial-gradient(ellipse at 20% 25%,#173d50 0,transparent 48%),linear-gradient(135deg,#0b1722,#112536 65%,#152b36);overflow:auto}#battlePassDialog::backdrop{background:#06111b}#battlePassDialog button{cursor:pointer}#battlePassDialog button:disabled{cursor:default;opacity:.55}.bp-shell{max-width:1200px;margin:auto;padding:36px 40px 24px}.bp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.bp-kicker{font-size:10px;font-weight:800;letter-spacing:.2em;color:#90bdcc;margin:0 0 10px}.bp-header h1{font:800 clamp(28px,4vw,48px)/1.05 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.015em;margin:0}.bp-header h1 span{color:#efcf84}.bp-subtitle{color:#9eb6c2;font-size:14px;margin:12px 0 22px}.bp-header button{margin:0;white-space:nowrap}.bp-overview{display:flex;align-items:center;gap:20px;border-top:1px solid #33505e;border-bottom:1px solid #33505e;padding:15px 0;font-size:12px;font-weight:700}.bp-free{color:#102a2d;background:#c2dfa8;font-size:10px;padding:7px 10px;border-radius:4px;letter-spacing:.08em}.bp-no-expiry{font-size:10px;letter-spacing:.12em;color:#95aeba}.bp-overview progress{flex:1;min-width:40px}.bp-shell progress{appearance:none;height:5px;border:none;border-radius:3px;background:#203e4b;accent-color:#d6c381}.bp-shell progress::-webkit-progress-bar{background:#203e4b;border-radius:3px}.bp-shell progress::-webkit-progress-value{background:linear-gradient(90deg,#77c9d8,#e6ce8a);border-radius:3px}.bp-shell progress::-moz-progress-bar{background:#b9d8ad}.bp-account{display:flex;align-items:center;gap:16px;margin:10px 0 20px;min-height:32px}.bp-account p{color:#9ab2c0;font-size:12px;margin:0;flex:1}.bp-account button{font-size:11px;padding:7px 12px;margin:0}.bp-text-button{background:none;border:0;color:#c2d9e1;text-decoration:underline}.bp-feature{display:grid;grid-template-columns:1fr;border:1px solid #345566;border-radius:14px;overflow:hidden;background:linear-gradient(140deg,rgba(53,104,121,.2),rgba(9,24,36,.8));box-shadow:0 16px 50px #0003}.bp-assignment{padding:30px;display:flex;flex-direction:column;justify-content:center}.bp-assignment h2{font:800 30px/1.1 'Barlow Condensed',sans-serif;margin:0 0 24px}.bp-objective{display:grid;grid-template-columns:1fr auto;gap:9px;font-size:12px;color:#b7cdd7;margin-bottom:17px}.bp-objective strong{font-size:12px;font-variant-numeric:tabular-nums;color:#e9e3ce}.bp-objective progress{grid-column:1/-1;width:100%;height:4px}.bp-assignment>button{width:100%;margin:12px 0 0;padding:13px}.bp-rules{color:#8ea8b7;font-size:10px;line-height:1.7;margin:14px 0 0}.bp-status{color:#e3cf93;font-size:12px;min-height:18px;margin:12px 0}.bp-track-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0}.bp-track-heading h2{font:800 22px 'Barlow Condensed',sans-serif;margin:0}.bp-track-heading .bp-kicker{margin-bottom:5px}.bp-track-heading button{font-size:11px;margin:0;padding:9px 12px}.bp-track{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}.bp-tier{position:relative;display:flex;justify-content:space-between;align-items:center;padding:12px 10px;margin:0;border:1px solid #314958;background:#102333;color:#718d9e;border-radius:5px;transition:background .15s,border-color .15s,transform .15s}.bp-tier:hover{background:#203e50;transform:translateY(-2px)}.bp-tier-number{font:800 18px 'Barlow Condensed',sans-serif}.bp-tier-icon{font-size:14px;color:#ab9871}.bp-tier.current{border-color:#a1ced3;color:#c7edf0;background:#234553}.bp-tier.selected{outline:2px solid #f0d48a;outline-offset:1px;color:#f1dda3;background:#394b49}.bp-tier.completed{background:#263e3a;color:#bde5c5;border-color:#526e5c}.bp-tier.completed .bp-tier-icon{color:#b8dea9}.bp-legend{font-size:10px;color:#91acbd;line-height:1.7}.bp-footer{display:flex;flex-wrap:wrap;align-items:center;gap:20px;border-top:1px solid #294451;margin-top:24px;padding-top:20px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#7f9cae}.bp-footer span{color:#c4bb94}
@media(max-width:650px){.bp-shell{padding:22px 16px}.bp-header{gap:12px}.bp-header h1{font-size:31px}.bp-header h1 span{display:block}.bp-header>button{padding:8px 10px;font-size:11px}.bp-subtitle{font-size:12px;max-width:230px;line-height:1.5}.bp-overview{gap:10px;flex-wrap:wrap}.bp-overview progress{min-width:70px}.bp-no-expiry{display:none}.bp-account{flex-wrap:wrap;gap:8px}.bp-account p{flex-basis:100%}.bp-account .bp-text-button{margin-left:auto}.bp-feature{grid-template-columns:1fr}.bp-assignment{padding:23px 20px}.bp-assignment h2{font-size:28px}.bp-track{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.bp-tier{padding:11px 8px;min-height:48px}.bp-track-heading button{max-width:120px}.bp-footer{gap:12px;line-height:1.7}.bp-footer span:last-child{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.bp-tier{transition:none}.bp-tier:hover{transform:none}}

#bpClaim{background:#e6ce8b;color:#142a36;border:1px solid #f4dca0}#bpClaim:disabled{background:#1d3544;color:#9bb3c2;border-color:#3d5968;opacity:1}#bpClaim:not(:disabled):hover{background:#f5dfa6}

.candy-donation { display:grid; gap:10px; margin:18px 0; padding:16px; border:1px solid #d58c49; }
.candy-donation h4,.candy-donation p { margin:0; }
.candy-donation input { box-sizing:border-box; width:100%; min-width:0; padding:10px; font:inherit; }

.local-bests{margin-top:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:10px;font-size:13px;opacity:.94;text-align:left}
.local-bests h3{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.local-bests ol{margin:0;padding:0;list-style:none}
.local-bests li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font-variant-numeric:tabular-nums}
.local-bests .lb-score{font-weight:700}
.local-bests .lb-date{opacity:.6;font-size:12px}
.local-bests .lb-empty{opacity:.6;margin:0}