/* Theme tokens live in theme.css (shared with the boot gate). */

* {
    box-sizing: border-box;
  }
  
  html {
    min-width: 320px;
    background: var(--ink);
    transition: background-color var(--theme-ease);
  }
  
  body {
    position: relative;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    background:
      radial-gradient(circle at 22% -10%, var(--glow-b), transparent 30rem),
      radial-gradient(circle at 78% 4%, var(--glow-a), transparent 34rem),
      var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    transition: background-color var(--theme-ease), color var(--theme-ease);
  }
  
  /* Soft round sky disc — moon (Nīt) / sun (Dā), Pong hangar not cartoon */
  body::after {
    position: fixed;
    z-index: 0;
    top: var(--sky-orb-y);
    left: var(--sky-orb-x);
    width: var(--sky-orb-size);
    height: var(--sky-orb-size);
    pointer-events: none;
    border-radius: 50%;
    content: "";
    background:
      radial-gradient(circle at 46% 42%, var(--sky-core) 0%, var(--sky-mid) 26%, var(--sky-rim) 52%, transparent 68%);
    box-shadow:
      0 0 90px var(--sky-bloom),
      0 0 180px color-mix(in srgb, var(--sky-bloom) 55%, transparent);
    transform: translate(-50%, -20%);
    transition:
      left var(--theme-ease),
      top var(--theme-ease),
      width var(--theme-ease),
      height var(--theme-ease),
      background var(--theme-ease),
      box-shadow var(--theme-ease),
      opacity 280ms ease;
  }
  
  /* Home shell hatch: Nīt ball-dots on / · Dā dashed sun-rays on \ */
  body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
    background: var(--cream);
    opacity: 0.07;
    /* NÄ«t: / */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='26' cy='6' r='1.4' fill='%23000'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='%23000'/%3E%3Ccircle cx='6' cy='26' r='1.4' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='26' cy='6' r='1.4' fill='%23000'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='%23000'/%3E%3Ccircle cx='6' cy='26' r='1.4' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 32px 32px;
    mask-size: 32px 32px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    transition: opacity var(--theme-ease), background-color var(--theme-ease);
  }
  
  html[data-theme="day"] body::before {
    opacity: 0.26;
    /* Dā: dashed \ — reads as soft sun rays */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M0 0L36 36' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M0 0L36 36' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 9'/%3E%3C/svg%3E");
    -webkit-mask-size: 36px 36px;
    mask-size: 36px 36px;
  }
  
  /* Quick theme crossfade — orb dips while chrome eases */
  html.theme-fading body::after {
    opacity: 0.35;
  }
  
  .app-shell,
  .topbar,
  .currency-wallet,
  .icon-button,
  .hud-rail,
  .stat-stack > div,
  .loadout-card,
  .loadout-empty,
  .system-readout,
  .state-panel,
  .rail-button,
  .pickup-legend,
  .target-legend,
  .control-legend {
    transition:
      background-color var(--theme-ease),
      border-color var(--theme-ease),
      color var(--theme-ease),
      box-shadow var(--theme-ease);
  }
  
  @media (prefers-reduced-motion: reduce) {
    html,
    body,
    body::before,
    body::after,
    .app-shell,
    .topbar,
    .currency-wallet,
    .icon-button,
    .hud-rail,
    .stat-stack > div,
    .loadout-card,
    .loadout-empty,
    .system-readout,
    .state-panel,
    .rail-button,
    .pickup-legend,
    .target-legend,
    .control-legend,
    .forge-overlay,
    .forge-shell {
      transition: none !important;
    }
  }
  
  /* Day: harden leftover cream-on-dark borders so edges read on light chrome */
  html[data-theme="day"] .canvas-bezel {
    border-color: rgba(12, 18, 28, 0.45);
    border-top-color: var(--cream);
    box-shadow:
      0 12px 28px rgba(12, 18, 28, 0.2),
      0 0 0 4px rgba(12, 18, 28, 0.14);
  }
  
  html[data-theme="day"] .brand-mark {
    border-color: rgba(20, 28, 40, 0.45);
  }
  
  html[data-theme="day"] .loadout-card,
  html[data-theme="day"] .loadout-empty,
  html[data-theme="day"] .system-readout,
  html[data-theme="day"] .rail-button,
  html[data-theme="day"] .icon-button,
  html[data-theme="day"] .currency-wallet,
  html[data-theme="day"] .state-panel,
  html[data-theme="day"] .forge-shell,
  html[data-theme="day"] .forge-close,
  html[data-theme="day"] .settings-close,
  html[data-theme="day"] .skill-card,
  html[data-theme="day"] article.skill-card {
    border-color: rgba(20, 28, 40, 0.28);
  }
  
  html[data-theme="day"] .panel-jump {
    border-color: color-mix(in srgb, var(--amber) 55%, #111916);
    color: var(--ink-deep);
    background: linear-gradient(180deg, #f0c98a, #d9a04a);
  }
  
  html[data-theme="day"] .rail-kicker,
  html[data-theme="day"] .topbar,
  html[data-theme="day"] .stat-stack > div,
  html[data-theme="day"] .rail-rule,
  html[data-theme="day"] .pickup-legend,
  html[data-theme="day"] .target-legend,
  html[data-theme="day"] .control-legend {
    border-color: rgba(20, 28, 40, 0.28);
  }
  
  html[data-theme="day"] .systems-heading,
  html[data-theme="day"] .pickup-legend > span,
  html[data-theme="day"] .target-legend > span {
    color: var(--cream-dim);
  }
  
  html[data-theme="day"] kbd {
    border-color: rgba(20, 28, 40, 0.35);
    background: rgba(20, 28, 40, 0.08);
    color: var(--cream);
  }
  
  html[data-theme="day"] .board-topline {
    color: var(--cream-dim);
    border-color: rgba(20, 28, 40, 0.22);
  }
  
  html[data-theme="day"] .loadout-empty {
    background: rgba(20, 28, 40, 0.1);
  }
  
  html[data-theme="day"] .loadout-empty b,
  html[data-theme="day"] .loadout-empty .loadout-copy span,
  html[data-theme="day"] .loadout-empty .loadout-node {
    color: #1a2432;
  }
  
  html[data-theme="day"] .loadout-empty .loadout-node {
    border-color: #1a2432;
    background: transparent;
  }
  
  button {
    color: inherit;
    font: inherit;
  }
  
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 3px;
  }
  
  [hidden] {
    display: none !important;
  }
  
  .app-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1460px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 18px 24px 22px;
  }
  
  /* Desktop: lock to the viewport — scale the whole field (paddle included), never crop it. */
  @media (min-width: 761px) {
    html,
    body {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
    }
  
    .app-shell {
      display: flex;
      flex-direction: column;
      height: 100%;
      height: 100dvh;
      max-height: 100dvh;
      min-height: 0;
      overflow: hidden;
      /* Non-F11 air: keep chrome off the viewport edges; F11 just gets more leftover height. */
      padding: 22px 22px 28px;
    }
  
    .topbar {
      flex: 0 0 auto;
      min-height: 52px;
      padding-bottom: 10px;
    }
  
    .brand-mark {
      width: 34px;
      height: 36px;
    }
  
    .brand strong {
      font-size: 18px;
    }
  
    .game-layout {
      flex: 1 1 auto;
      min-height: 0;
      padding: 20px;
      gap: 16px;
      align-items: start;
      justify-content: center;
      /*
        Board target: ~77vh when it fits.
        Cap hard against real chrome (shell pad + topbar + layout pad + gaps)
        so overflow:hidden on .app-shell never shears the paddle.
        Width follows 4:5 from that height.
      */
      --shell-chrome: 210px;
      --board-labels: 28px;
      --field-h: min(77dvh, calc(100dvh - var(--shell-chrome) - var(--board-labels)));
      --field-w: min(720px, calc(var(--field-h) * 4 / 5));
      grid-template-columns: minmax(148px, 1fr) var(--field-w) minmax(160px, 1fr);
    }
  
    .hud-rail {
      position: static;
      max-height: calc(var(--field-h) + var(--board-labels) + 20px);
      overflow-x: hidden;
      overflow-y: auto;
      padding-top: 4px;
      scrollbar-width: thin;
    }
  
    .hud-rail-left,
    .hud-rail-right {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      height: fit-content;
      max-height: calc(var(--field-h) + var(--board-labels) + 20px);
    }
  
    .hud-rail-left .rail-kicker {
      min-height: 26px;
      margin-bottom: 4px;
    }
  
    .stat-stack > div {
      min-height: 32px;
      padding: 3px 0;
    }
  
    .stat-stack dd {
      font-size: 22px;
    }
  
    .hud-rail-left .control-legend {
      margin-top: 10px;
      padding: 10px 0 2px;
    }
  
    .hud-rail-left .control-legend > span {
      margin-bottom: 6px;
      font-size: 10px;
      letter-spacing: 2px;
    }
  
    .hud-rail-left .control-legend-items {
      gap: 5px 8px;
    }
  
    .hud-rail-left .control-legend-items span {
      font-size: 9px;
      letter-spacing: 0.8px;
      gap: 2px 0;
    }
  
    .hud-rail-left .control-legend-items kbd {
      min-width: 18px;
      margin-right: 3px;
      padding: 2px 4px;
      font-size: 9px;
    }
  
    .hud-rail-left .rail-button {
      min-height: 44px;
      margin-top: 10px;
    }
  
    /* Field Drops on left — Target Hits stay on right for balance */
    .hud-rail-left .pickup-legend {
      margin-top: 8px;
      padding-top: 8px;
    }
  
    .hud-rail-left .pickup-items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
  
    .hud-rail-left .drop-chip {
      height: 30px;
      padding: 0 7px;
      gap: 6px;
      font-size: 10px;
    }
  
    .hud-rail-right .systems-heading {
      margin: 5px 0 3px;
    }
  
    .hud-rail-right .system-readout {
      margin-top: 6px;
    }
  
    .hud-rail-right .target-legend {
      margin-top: 6px;
      padding-top: 5px;
    }
  
    .hud-rail-right .target-legend-items {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 3px;
    }
  
    .hud-rail-right .target-swatch,
    .hud-rail-right .anchor-swatch {
      height: 22px;
      font-size: 9px;
    }
  
    .hud-rail-right .active-systems,
    .hud-rail-right .field-effects {
      gap: 4px;
    }
  
    .hud-rail-right button.active-system {
      min-height: 42px;
      padding: 5px 6px;
      gap: 6px;
    }
  
    .hud-rail-right .active-empty,
    .hud-rail-right .effect-empty {
      min-height: 32px;
      padding: 6px 7px;
    }
  
    .hud-rail-right .field-effect {
      min-height: 34px;
      padding: 4px 5px;
      gap: 6px;
    }
  
    .hud-rail-right .field-effect > b {
      width: 24px;
      height: 22px;
    }
  
    .board-column {
      display: flex;
      flex-direction: column;
      width: var(--field-w);
      max-width: 100%;
      min-height: 0;
      justify-self: center;
    }
  
    .board-topline {
      flex: 0 0 auto;
      min-height: 24px;
    }
  
    .canvas-bezel {
      flex: 0 0 auto;
      width: 100%;
      height: var(--field-h);
      max-height: var(--field-h);
      aspect-ratio: 4 / 5;
      container-type: size;
      container-name: court;
    }
  
    #gameCanvas {
      display: block;
      width: 100%;
      height: 100%;
      max-height: none;
      aspect-ratio: 4 / 5;
      object-fit: contain;
      object-position: center bottom;
    }
  
    .loadout-card,
    .loadout-empty {
      min-height: 48px;
      padding: 7px 8px 6px 8px;
    }
  }
  
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 0 6px 14px;
    border-bottom: 1px solid var(--line);
  }
  
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  
  .brand-mark {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 7px);
    align-items: end;
    width: 39px;
    height: 42px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--amber) 62%, transparent);
    background: var(--brand-well);
    box-shadow: inset 0 0 0 3px var(--ink);
    transform: skewY(-5deg);
  }
  
  .brand-mark::after {
    position: absolute;
    right: -5px;
    bottom: 6px;
    width: 5px;
    height: 22px;
    background: var(--amber);
    content: "";
  }
  
  .brand-mark i {
    display: block;
    height: 17px;
    background: var(--cream);
  }
  
  .brand-mark i:nth-child(2) {
    height: 25px;
    background: var(--amber);
  }
  
  .brand strong {
    display: block;
    font-family: var(--display);
    font-size: 22px;
    font-stretch: condensed;
    letter-spacing: 1.8px;
    line-height: 1;
  }
  
  .topbar-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }
  
  .icon-button {
    min-height: 46px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  
  /* Currency wallet — readout only (not a control). Extra chips slot in beside Shards later. */
  .currency-wallet {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 46px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--amber) 10%, transparent), color-mix(in srgb, var(--amber) 3%, var(--panel)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--amber2) 12%, transparent);
  }
  
  .currency-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0 11px 0 5px;
    cursor: default;
    user-select: none;
  }
  
  .currency-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
    line-height: 1;
  }
  
  .currency-meta small {
    color: var(--amber-ink);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
  }
  
  .currency-meta strong {
    color: var(--cream);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
  }
  
  .currency-shards .currency-coin {
    --core-ring-bg: transparent;
    border-color: color-mix(in srgb, var(--amber2) 55%, #8a5a18);
    background: radial-gradient(circle at 32% 28%, #ffe6b0 0 16%, var(--amber) 46%, #9a6218 100%);
    color: #1a1410;
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 220, 0.45),
      inset 0 -2px 0 rgba(0, 0, 0, 0.22),
      0 0 12px color-mix(in srgb, var(--amber) 32%, transparent);
  }
  
  .core-token {
    --core-size: 28px;
    --core-ring-bg: var(--panel);
    --core-optical-y: 0px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--core-size);
    height: var(--core-size);
    border: 2px solid var(--amber);
    border-radius: 50%;
    color: var(--amber-ink);
    font-family: var(--display);
    font-size: calc(var(--core-size) * 0.42);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    box-shadow: inset 0 0 0 3px var(--core-ring-bg);
  }
  
  /* Letter sits in its own flex box so the glyph centers in the ring */
  .core-token > b {
    display: block;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    transform: translateY(var(--core-optical-y));
  }
  
  .core-token-md {
    --core-size: 28px;
    --core-optical-y: 0.5px;
  }
  
  .core-token-sm {
    --core-size: 25px;
    --core-optical-y: 0.5px;
  }
  
  .core-token-xs {
    --core-size: 19px;
    --core-optical-y: 0.5px;
    border-width: 1.5px;
    font-size: 10px;
    box-shadow: inset 0 0 0 2px var(--core-ring-bg);
  }
  
  .core-value,
  .core-reward {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  .core-amount {
    line-height: 1;
  }
  
  .core-reward {
    color: var(--cream);
  }
  
  .core-reward-label {
    color: var(--amber-ink);
    font-weight: 800;
    letter-spacing: 1.5px;
  }
  
  /* Result-grid span rules are intentionally broad; restore the Core component's inline geometry. */
  .result-grid .core-value {
    display: inline-flex;
  }
  
  .result-grid .core-token {
    display: inline-flex;
  }
  
  .result-grid .core-amount {
    display: inline;
    margin-top: 0;
  }
  
  .icon-button {
    min-width: 55px;
    padding: 0 10px;
    color: var(--cream);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    background: var(--panel);
  }
  
  .theme-toggle {
    color: var(--cream);
    letter-spacing: 0.6px;
    min-width: 48px;
  }
  
  .theme-toggle:hover {
    color: var(--mint);
  }
  
  /* Armed = mint crown · idle = coral heel (Sound, Forge equip, loadout). */
  .icon-button[aria-pressed="true"],
  .settings-control[aria-pressed="true"] {
    box-shadow: var(--signal-on);
  }
  
  .icon-button[aria-pressed="false"],
  .settings-control[aria-pressed="false"] {
    box-shadow: var(--signal-off);
  }
  
  .icon-button[aria-pressed="false"] {
    color: var(--cream-dim);
    opacity: 0.78;
    text-decoration: line-through;
  }
  
  .game-layout {
    display: grid;
    grid-template-columns: minmax(178px, 0.78fr) minmax(360px, 720px) minmax(190px, 0.82fr);
    align-items: start;
    justify-content: center;
    gap: 22px;
    padding: 20px;
  }
  
  .hud-rail {
    position: sticky;
    top: 16px;
    min-width: 0;
    padding-top: 13px;
  }
  
  .rail-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-bottom: 10px;
    border-top: 2px solid var(--cream);
    border-bottom: 1px solid var(--line);
    color: var(--cream-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
  }
  
  .rail-kicker b {
    padding: 3px 5px;
    color: var(--amber-ink);
    background: rgba(255, 188, 87, 0.1);
    font-size: 9px;
  }
  
  .stat-stack {
    margin: 0;
  }
  
  .stat-stack > div {
    display: grid;
    grid-template-columns: minmax(78px, 0.95fr) 1fr;
    align-items: end;
    min-height: 62px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  
  .stat-stack dt,
  .pickup-legend > span,
  .system-label span {
    color: var(--cream-dim);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  
  .stat-stack dd {
    margin: 0;
    overflow: hidden;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-align: right;
  }
  
  .stat-stack dd.is-high-score {
    color: var(--amber-ink);
    text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 35%, transparent);
  }
  
  .stat-stack dd.life-pips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--coral);
    font-size: 16px;
    letter-spacing: 0;
  }
  
  /* Blocky heart: thick inverted V with squared lobes */
  .life-pip {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(
      0% 18%,
      18% 0%,
      38% 0%,
      50% 22%,
      62% 0%,
      82% 0%,
      100% 18%,
      100% 42%,
      50% 100%,
      0% 42%
    );
  }
  
  /* Extra Life hearts — mint so they read as forge bonus, not +N math */
  .life-pip-bonus {
    color: var(--mint);
  }

  /* Spent heart: the husk of one you had. Status, not alarm — no glow. */
  .life-pip.is-spent {
    background: color-mix(in srgb, currentColor 26%, transparent);
    opacity: 0.72;
  }
  
  .rail-rule {
    height: 10px;
    margin: 14px 0;
    background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 7px);
  }
  
  .rail-button {
    position: relative;
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 11px 38px 11px 13px;
    overflow: hidden;
    border: 1px solid var(--amber);
    background: var(--amber);
    color: var(--ink-deep);
    text-align: left;
    cursor: pointer;
    transition: transform 130ms ease, background 130ms ease;
  }
  
  .rail-button::after {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 100%;
    border-left: 1px solid rgba(11, 16, 14, 0.28);
    content: ">";
    font-size: 20px;
  }
  
  .rail-button:hover {
    transform: translateY(-2px);
    background: #ffd07f;
  }
  
  .rail-button span,
  .rail-button small {
    display: block;
  }
  
  .rail-button span {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
  }
  
  .rail-button small {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  
  .control-legend {
    margin-top: 10px;
    padding-top: 10px;
    /* No border-top — last .stat-stack row already draws the divider. */
  }
  
  .control-legend > span {
    display: block;
    margin-bottom: 6px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
  }
  
  .control-legend-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
  }
  
  .control-legend-items span {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 0;
    min-width: 0;
    color: var(--cream-dim);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
  }
  
  .control-legend-items .control-offline {
    opacity: 0.38;
  }
  
  .board-column {
    min-width: 0;
  }
  
  .board-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 31px;
    border-top: 2px solid var(--cream);
    color: var(--cream-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  
  .board-topline > span:first-child,
  .board-topline > span:last-child {
    flex: 1 1 0;
    min-width: 0;
  }
  
  .board-topline span:first-child {
    color: var(--cream);
  }
  
  .board-topline > span:last-child {
    text-align: right;
  }
  
  .board-scoreline {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--cream);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
  }
  
  .board-scoreline b {
    color: var(--cream);
    font-weight: 800;
  }
  
  .board-scoreline.is-high b {
    color: var(--amber-ink);
    text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 35%, transparent);
  }
  
  .canvas-bezel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cream) 42%, transparent);
    border-top: 3px solid var(--cream);
    background: #e9e0c9;
    box-shadow:
      0 18px 55px rgba(0, 0, 0, 0.35),
      0 0 0 7px #141d19,
      0 0 0 8px color-mix(in srgb, var(--cream) 18%, transparent);
    isolation: isolate;
  }

  /* Phone-only court chip strip; desktop keeps timers on the right rail. */
  .field-effects-court {
    display: none;
  }
  
  .canvas-bezel::before,
  .canvas-bezel::after {
    position: absolute;
    z-index: 5;
    width: 12px;
    height: 38px;
    border-top: 1px solid var(--amber);
    border-bottom: 1px solid var(--amber);
    content: "";
    pointer-events: none;
  }
  
  .canvas-bezel::before { top: 18px; left: 0; }
  .canvas-bezel::after { right: 0; bottom: 18px; }
  
  /* Life loss — court rim / bezel spikes coral, then settles. */
  .canvas-bezel.is-miss-flash {
    animation: court-miss-edge 0.58s ease-out;
  }
  
  .canvas-bezel.is-miss-flash::before,
  .canvas-bezel.is-miss-flash::after {
    border-color: #ff6a5c;
    box-shadow: 0 0 12px rgba(255, 90, 80, 0.55);
  }
  
  @keyframes court-miss-edge {
    0%, 18% {
      border-color: #ff6a5c;
      border-top-color: #ff8a7a;
      box-shadow:
        0 18px 55px var(--court-frame-shadow, rgba(0, 0, 0, 0.35)),
        0 0 0 6px #6a1814,
        0 0 0 9px #ff6a5c,
        0 0 30px rgba(255, 90, 80, 0.48);
    }
    100% {
      border-color: color-mix(in srgb, var(--cream) 42%, transparent);
      border-top-color: var(--cream);
      box-shadow:
        0 18px 55px var(--court-frame-shadow, rgba(0, 0, 0, 0.35)),
        0 0 0 7px var(--court-frame, #141d19),
        0 0 0 8px var(--court-frame-line, color-mix(in srgb, var(--cream) 18%, transparent));
    }
  }
  
  #gameCanvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    background: var(--cream);
    touch-action: none;
    cursor: crosshair;
  }
  
  .canvas-sheen {
    position: absolute;
    z-index: 3;
    inset: 0;
    background:
      linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 18% 75%, rgba(255, 188, 87, 0.06)),
      repeating-linear-gradient(0deg, transparent 0 5px, rgba(17, 25, 22, 0.018) 6px);
    pointer-events: none;
  }
  
  .court-stage-pass {
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
  }
  
  .court-stage-pass::before {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: -34%;
    width: 30%;
    border-inline: 1px solid color-mix(in srgb, var(--court-pass-accent, var(--mint)) 68%, transparent);
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--court-pass-accent, var(--mint)) 16%, transparent) 28%,
      color-mix(in srgb, var(--cream) 28%, transparent) 50%,
      color-mix(in srgb, var(--court-pass-accent, var(--mint)) 19%, transparent) 72%,
      transparent);
    content: "";
    transform: skewX(-8deg);
  }
  
  .court-stage-pass.is-running {
    opacity: 1;
  }
  
  .court-stage-pass.is-running::before {
    animation: court-stage-sweep 1.8s cubic-bezier(.42, 0, .3, 1) both;
  }
  
  @keyframes court-stage-sweep {
    0%, 8% { left: -34%; opacity: 0; }
    18% { opacity: .82; }
    78% { opacity: .72; }
    100% { left: 108%; opacity: 0; }
  }
  
  .state-overlay {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 36px;
    background: rgba(11, 16, 14, 0.66);
    opacity: 1;
    transition: opacity 160ms ease;
  }
  
  .state-overlay:empty {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  
  .state-panel {
    width: min(100%, 450px);
    padding: 30px 32px 28px;
    border-top: 5px solid var(--amber);
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--amber) 12%, transparent), transparent 42%),
      var(--desk);
    box-shadow: 16px 16px 0 var(--shadow);
    text-align: left;
    animation: panel-in 220ms ease both;
  }
  
  .state-panel.title-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top-color: var(--mint);
  }
  
  /* Mission brief — same card shell as hangar, court color on the top stripe only. */
  .state-panel.brief-panel {
    border-top-color: var(--brief-accent, var(--amber));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--brief-accent, var(--amber)) 12%, transparent), transparent 40%),
      var(--desk);
  }
  
  .brief-panel .state-kicker {
    color: var(--brief-accent, var(--amber));
  }
  
  .brief-panel .brief-lesson {
    margin: 8px 0 0;
    color: color-mix(in srgb, var(--brief-accent, var(--amber)) 75%, var(--cream));
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  
  .brief-panel .serve-brief {
    margin-top: 14px;
    color: var(--cream-dim);
  }
  
  .brief-panel .primary-action {
    border-color: var(--brief-accent, var(--amber));
    background: var(--brief-accent, var(--amber));
    color: var(--ink-deep);
  }
  
  .brief-panel .primary-action:hover {
    filter: brightness(1.08);
    background: var(--brief-accent, var(--amber));
  }
  
  /* Retreat — quieter than Enter, but still outlined so it doesn't melt into the card. */
  .brief-panel .secondary-action {
    border-color: rgba(247, 239, 218, 0.42);
    color: var(--cream);
    letter-spacing: 1.2px;
    background: rgba(247, 239, 218, 0.04);
  }
  
  .brief-panel .secondary-action:hover {
    border-color: color-mix(in srgb, var(--brief-accent, var(--amber)) 45%, var(--cream));
    background: rgba(247, 239, 218, 0.08);
    color: var(--cream);
  }
  
  /* Ghost rack sits behind copy — faint watermark only. */
  .title-ghost-rack {
    position: absolute;
    z-index: 0;
    right: -10px;
    bottom: -14px;
    width: 188px;
    height: 128px;
    pointer-events: none;
    opacity: 0.26;
    transform: rotate(-2deg);
  }
  
  .title-ghost-rack .title-ghost-svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  html[data-theme="day"] .title-ghost-rack {
    opacity: 0.22;
  }
  
  .state-panel.title-panel > *:not(.title-ghost-rack) {
    position: relative;
    z-index: 1;
  }
  
  .state-kicker {
    margin: 0 0 12px;
    color: var(--amber-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
  }
  
  .state-kicker .kicker-label {
    color: var(--mint);
  }
  
  .state-kicker .kicker-sep {
    color: var(--steel);
  }
  
  .state-kicker .core-reward {
    vertical-align: -2px;
  }
  
  .state-panel h1,
  .state-panel h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0.92;
    text-transform: uppercase;
  }
  
  .state-panel h1 {
    max-width: 350px;
    font-size: 54px;
  }
  
  .state-panel h2 {
    font-size: 38px;
  }
  
  .state-panel .subtitle {
    margin: 14px 0 0;
    color: var(--mint);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  
  .state-copy {
    max-width: 380px;
    margin: 17px 0 0;
    color: var(--cream-dim);
    font-size: 12px;
    line-height: 1.65;
  }
  
  .state-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 23px;
  }
  
  .primary-action,
  .secondary-action {
    min-height: 47px;
    padding: 0 17px;
    border: 1px solid var(--amber);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }
  
  .primary-action {
    background: var(--amber);
    color: var(--ink-deep);
  }
  
  .primary-action:hover {
    background: #ffd07f;
  }
  
  .secondary-action {
    background: transparent;
    color: var(--cream);
    border-color: rgba(247, 239, 218, 0.38);
  }
  
  .secondary-action:hover {
    border-color: var(--cream);
    background: rgba(247, 239, 218, 0.07);
  }
  
  html[data-theme="day"] .secondary-action {
    border-color: color-mix(in srgb, var(--cream) 42%, transparent);
  }
  
  html[data-theme="day"] .secondary-action:hover {
    border-color: var(--cream);
    background: color-mix(in srgb, var(--cream) 8%, transparent);
  }
  
  html[data-theme="day"] .secondary-action:disabled,
  html[data-theme="day"] .primary-action:disabled {
    border-color: color-mix(in srgb, var(--cream) 22%, transparent);
  }
  
  .secondary-action:disabled {
    cursor: default;
    opacity: 0.55;
    border-color: rgba(247, 239, 218, 0.22);
    color: var(--cream-dim);
  }
  
  .secondary-action:disabled:hover {
    border-color: rgba(247, 239, 218, 0.22);
    background: transparent;
  }
  
  .secondary-action small {
    display: block;
    margin-top: 2px;
    font: 700 8px/1 var(--mono);
    letter-spacing: 1.2px;
    opacity: 0.8;
  }
  
  .brief-grid,
  .result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 20px;
    background: var(--line);
  }
  
  .brief-grid > div,
  .result-grid > div {
    padding: 10px 8px;
    background: var(--panel);
  }
  
  .brief-grid span,
  .result-grid span {
    display: block;
    color: var(--cream-dim);
    font-size: 8px;
    letter-spacing: 1px;
  }
  
  .brief-grid strong,
  .result-grid strong {
    display: block;
    margin-top: 5px;
    font-family: var(--display);
    font-size: 17px;
  }
  
  /* Rack Broken — one stamped telemetry block (run stats + next board). */
  .clear-results-panel {
    overflow: hidden;
  }
  
  .clear-results-panel.is-perfect {
    border-top-color: var(--mint);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--mint) 22%, transparent),
      8px 10px 0 rgba(0, 0, 0, 0.22);
  }
  
  .clear-results-panel.is-perfect .state-kicker .kicker-label {
    color: var(--mint);
    text-shadow: 0 0 18px color-mix(in srgb, var(--mint) 40%, transparent);
    letter-spacing: 0.14em;
  }
  
  .clear-results-panel.is-perfect h2 {
    background: linear-gradient(180deg, #fff8ec 0%, #e8fff6 55%, var(--mint) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.08em;
  }
  
  .clear-results-panel.is-perfect .state-copy {
    color: color-mix(in srgb, var(--cream) 82%, var(--mint));
  }
  
  .clear-results-panel .bonus-shard-mark {
    color: var(--amber-ink);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px color-mix(in srgb, var(--amber) 45%, transparent);
  }
  
  .clear-results-panel .bonus-shard-mark.is-shard-launch {
    animation: bonus-shard-pulse 420ms ease-out;
  }
  
  /* Pre-launch tell — the words charge up so the toss is not a surprise. */
  .clear-results-panel .bonus-shard-mark.is-shard-arming {
    animation: bonus-shard-arm 320ms ease-in both;
  }
  
  .clear-results-panel h2 {
    letter-spacing: 0.06em;
  }
  
  /* Perfect Clear — shard orb fly (hosted on #stateOverlay via fx-candy.js). */
  .pong-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: visible;
  }
  
  .shard-fly-trail {
    position: absolute;
    inset: 0;
    overflow: visible;
  }
  
  .shard-fly-path {
    fill: none;
    stroke: color-mix(in srgb, var(--amber) 78%, #fff);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0.85;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--amber) 45%, transparent));
  }
  
  .shard-fly-orb {
    position: absolute;
    z-index: 1;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, #ffe9b0 0%, var(--amber) 48%, #b86a12 100%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, #fff 30%, transparent),
      0 0 10px color-mix(in srgb, var(--amber) 60%, transparent);
    color: #1a1410;
    font: 800 7px/1 var(--mono);
    transform: scale(0.92);
  }

  .shard-fly-orb.is-ball {
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    background:
      radial-gradient(circle at 32% 28%, #fff8ec 0 22%, #f7efda 38%, #e8b86a 72%, #8a6230 100%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, #fff 22%, transparent),
      0 0 8px color-mix(in srgb, var(--amber) 40%, transparent);
  }

  .shard-fly-orb.is-ball i {
    display: block;
    width: 4px;
    height: 4px;
    margin: -5px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.85;
  }

  .shard-fly-orb.is-ghost {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    opacity: 0.38;
    box-shadow: none;
  }

  .pong-fx-burst {
    position: fixed;
    z-index: 80;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .pong-fx-burst-ball {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, #fff 0 28%, var(--ball, #f7efda) 55%, #6a5a38 100%);
    animation: pong-fx-burst-ball 420ms ease-out forwards;
  }

  @keyframes pong-fx-burst-ball {
    0% { transform: translate(0, 0) scale(0.35); opacity: 1; }
    62% { opacity: 0.95; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.8); opacity: 0; }
  }
  
  .shard-fly-orb b {
    font: inherit;
  }
  
  .shard-fly-orb.is-impact {
    animation: shard-orb-impact 280ms ease-out forwards;
  }
  
  .core-reward.is-awaiting-bonus .core-reward-count {
    opacity: 0.72;
  }
  
  .core-reward.is-shard-hit {
    animation: shard-reward-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  
  .core-reward.is-shard-hit .core-reward-count {
    color: var(--mint);
  }
  
  @keyframes bonus-shard-arm {
    0% { filter: brightness(1); text-shadow: 0 0 12px color-mix(in srgb, var(--amber) 45%, transparent); }
    100% { filter: brightness(1.35); text-shadow: 0 0 20px color-mix(in srgb, var(--amber) 80%, transparent); }
  }
  
  @keyframes bonus-shard-pulse {
    0% { filter: brightness(1); }
    40% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
  }
  
  @keyframes shard-orb-impact {
    0% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.35); opacity: 0; }
  }
  
  @keyframes shard-reward-pop {
    0% { filter: none; }
    35% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--amber) 45%, transparent)); }
    100% { filter: none; }
  }
  
  .clear-stat-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--cream));
    background: var(--line);
  }
  
  .clear-stat {
    position: relative;
    min-width: 0;
    padding: 11px 10px 12px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--panel-hi) 55%, transparent), transparent 42%),
      var(--panel);
    animation: clear-stat-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  
  .clear-stat:nth-child(1) { animation-delay: 40ms; }
  .clear-stat:nth-child(2) { animation-delay: 90ms; }
  .clear-stat:nth-child(3) { animation-delay: 140ms; }
  .clear-stat:nth-child(4) { animation-delay: 190ms; }
  .clear-stat:nth-child(5) { animation-delay: 240ms; }
  .clear-stat:nth-child(6) { animation-delay: 290ms; }
  
  .clear-stat span {
    display: block;
    color: var(--cream-dim);
    font: 800 7px/1.2 var(--mono);
    letter-spacing: 1.35px;
  }
  
  .clear-stat strong {
    display: block;
    margin-top: 7px;
    color: var(--cream);
    font-family: var(--display);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    word-break: break-word;
  }
  
  .clear-stat em {
    display: block;
    margin-top: 5px;
    color: color-mix(in srgb, var(--mint) 72%, var(--cream));
    font: 800 8px/1 var(--mono);
    font-style: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  
  .clear-stat.is-mint strong {
    color: var(--mint);
  }
  
  .clear-stat.is-hot-combo {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--mint) 16%, transparent), transparent 55%),
      var(--panel);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 34%, transparent);
  }
  
  .clear-stat.is-hot-combo strong {
    color: var(--mint);
    text-shadow: 0 0 14px color-mix(in srgb, var(--mint) 35%, transparent);
  }
  
  .clear-stat.is-rack strong,
  .clear-stat.is-court strong {
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  
  .clear-stat-rack.is-perfect .clear-stat.is-mint {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 28%, transparent);
  }
  
  @keyframes clear-stat-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .serve-prompt {
    position: absolute;
    z-index: 8;
    top: 38%;
    left: 50%;
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cream);
    box-shadow: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.96);
    pointer-events: none;
    transition:
      opacity 0.26s ease,
      transform 0.26s ease,
      visibility 0s linear 0.26s;
  }
  
  .serve-prompt.is-shown:not(.is-leaving) {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0s;
  }
  
  .serve-prompt.is-leaving {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% - 6px)) scale(0.97);
    transition:
      opacity 0.24s ease,
      transform 0.24s ease,
      visibility 0s linear 0.24s;
  }
  
  .serve-prompt small {
    color: var(--amber-ink);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-shadow:
      2px 2px 0 rgba(6, 9, 16, 0.92),
      0 0 10px color-mix(in srgb, var(--amber) 35%, transparent);
  }
  
  .serve-prompt strong {
    margin: 0;
    color: var(--cream);
    font-family: var(--display);
    font-size: clamp(52px, 11vw, 68px);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 0.9;
    text-shadow:
      3px 3px 0 rgba(6, 9, 16, 0.95),
      0 0 14px color-mix(in srgb, var(--amber) 40%, transparent);
  }
  
  .serve-prompt span {
    color: var(--cream);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-shadow:
      2px 2px 0 rgba(6, 9, 16, 0.92),
      0 0 8px rgba(6, 9, 16, 0.55);
  }
  
  .serve-prompt.is-urgent {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  
  .serve-prompt.is-urgent small,
  .serve-prompt.is-urgent strong {
    color: var(--coral);
    text-shadow:
      3px 3px 0 rgba(6, 9, 16, 0.95),
      0 0 16px color-mix(in srgb, var(--coral) 45%, transparent);
    animation: serve-count-pulse 0.7s ease-in-out infinite;
  }
  
  .serve-prompt.is-urgent span {
    color: var(--coral);
    text-shadow:
      2px 2px 0 rgba(6, 9, 16, 0.92),
      0 0 8px color-mix(in srgb, var(--coral) 30%, transparent);
  }
  
  @keyframes serve-count-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.88; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .serve-prompt,
    .serve-prompt.is-shown:not(.is-leaving),
    .serve-prompt.is-leaving {
      transition: none !important;
      transform: translate(-50%, -50%);
    }
  
    .serve-prompt.is-urgent small,
    .serve-prompt.is-urgent strong,
    .drop-chip.is-active,
    .pong-fx-burst-ball {
      animation: none !important;
    }
  }
  
  .combo-pop {
    --combo-grow: 1;
    --combo-color: var(--coral);
    position: absolute;
    z-index: 7;
    top: 43%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--combo-color);
    font-family: var(--display);
    font-size: 42px;
    font-weight: 900;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-4deg);
    text-shadow:
      0 0 12px color-mix(in srgb, var(--combo-color) 55%, transparent),
      2px 2px 0 rgba(17, 25, 22, 0.35);
    pointer-events: none;
  }
  
  .combo-pop.has-zen {
    top: 41%;
  }
  
  .combo-pop small {
    display: none;
    color: var(--combo-color);
    font: 800 12px/1 var(--mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-shadow:
      0 0 8px color-mix(in srgb, var(--combo-color) 40%, transparent),
      1px 1px 0 rgba(17, 25, 22, 0.4);
    opacity: 0.92;
  }
  
  .combo-pop.has-zen small {
    display: block;
  }
  
  .combo-pop.show {
    animation: combo-pop 650ms ease-out both;
  }
  
  .combo-pop.is-hot {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--combo-color) 78%, transparent));
  }
  
  .combo-pop.is-hot::before,
  .combo-pop.is-hot::after {
    position: absolute;
    top: 50%;
    color: var(--combo-color);
    content: "✦";
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
  }
  
  .combo-pop.is-hot::before {
    left: -22px;
  }
  
  .combo-pop.is-hot::after {
    right: -22px;
  }
  
  .combo-pop.show.is-hot::before {
    animation: combo-spark-left 650ms ease-out both;
  }
  
  .combo-pop.show.is-hot::after {
    animation: combo-spark-right 650ms 45ms ease-out both;
  }
  
  .combo-pop.is-blazing::before,
  .combo-pop.is-blazing::after {
    font-size: 20px;
    text-shadow: 0 -17px 0 color-mix(in srgb, var(--combo-color) 75%, white);
  }
  
  kbd {
    display: inline-block;
    min-width: 18px;
    margin-right: 3px;
    padding: 2px 4px;
    border: 1px solid rgba(247, 239, 218, 0.26);
    border-bottom-width: 2px;
    background: var(--panel);
    color: var(--cream);
    font: inherit;
    text-align: center;
  }
  
  .loadout-slots {
    display: grid;
    gap: 7px;
  }
  
  .loadout-card,
  .loadout-empty {
    --branch-color: var(--steel-dark);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 60px;
    padding: 9px 9px 8px 10px;
    border-left: 3px solid var(--branch-color);
    background: var(--panel);
  }
  
  .loadout-card.is-equipped {
    box-shadow:
      var(--signal-on),
      inset 0 0 0 1px color-mix(in srgb, var(--branch-color) 42%, transparent),
      2px 2px 0 rgba(0, 0, 0, 0.16);
  }
  
  .loadout-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    min-width: 28px;
  }
  
  .loadout-stamp {
    position: static;
    z-index: 1;
    padding: 2px 5px 1px;
    border: 1px solid color-mix(in srgb, var(--branch-color) 70%, var(--ink-deep));
    background: color-mix(in srgb, var(--branch-color) 88%, #fff);
    color: var(--ink-deep);
    font: 800 7px/1 var(--mono);
    letter-spacing: 0.8px;
    transform: rotate(4deg);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22);
    pointer-events: none;
  }
  
  .loadout-stamp.is-empty {
    border-style: dashed;
    border-color: var(--steel);
    background: transparent;
    color: var(--steel);
    box-shadow: none;
    transform: rotate(-2deg);
  }
  
  .loadout-open-forge {
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
  }
  
  .loadout-open-forge:hover,
  .loadout-open-forge:focus-visible {
    background: color-mix(in srgb, var(--panel) 82%, var(--amber));
    outline: none;
  }
  
  .loadout-node {
    display: grid;
    place-items: center;
    min-width: 24px;
    width: max-content;
    max-width: 58px;
    min-height: 24px;
    height: auto;
    padding: 3px 4px;
    border: 2px solid color-mix(in srgb, var(--system-color, var(--branch-color)) 55%, var(--ink-deep));
    background: var(--system-color, var(--branch-color));
    color: var(--ink-deep);
    font-family: var(--display);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    box-shadow:
      2px 2px 0 rgba(0, 0, 0, 0.28),
      0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  }
  
  .loadout-copy {
    min-width: 0;
    padding-right: 0;
  }
  
  .loadout-copy b {
    display: block;
    font-family: var(--display);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.4px;
    white-space: normal;
  }
  
  .loadout-copy > span {
    display: block;
    margin-top: 4px;
    color: var(--cream-dim);
    font-size: 8px;
    line-height: 1.4;
  }
  
  .loadout-copy em {
    margin-left: 0.35em;
    color: color-mix(in srgb, var(--branch-color) 58%, var(--cream));
    font: 800 9px/1.4 var(--mono);
    letter-spacing: 0.45px;
    font-style: normal;
    vertical-align: 0.06em;
  }
  
  html[data-theme="day"] .loadout-copy em {
    color: color-mix(in srgb, var(--branch-color) 72%, #0c121c);
  }

  /* Always-on passives: mint "ON" — not a hotkey square (old branch letter read as a key). */
  .loadout-card.is-passive {
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--mint) 8%, transparent), transparent 48%),
      var(--panel);
  }

  .loadout-card.is-passive .loadout-stamp {
    border-color: color-mix(in srgb, var(--mint) 55%, var(--ink-deep));
    background: color-mix(in srgb, var(--mint) 86%, #fff);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  }

  .loadout-card.is-passive .loadout-node {
    border-color: color-mix(in srgb, var(--mint) 48%, var(--ink-deep));
    background: color-mix(in srgb, var(--mint) 82%, #fff);
    color: var(--ink-deep);
    box-shadow:
      2px 2px 0 rgba(0, 0, 0, 0.26),
      0 0 10px color-mix(in srgb, var(--mint) 32%, transparent);
  }

  .loadout-card.is-passive .loadout-mode {
    color: var(--mint) !important;
  }
  
  .loadout-empty {
    --branch-color: var(--steel-dark);
    background:
      repeating-linear-gradient(
        -45deg,
        rgba(23, 33, 29, 0.42) 0 6px,
        rgba(23, 33, 29, 0.28) 6px 12px
      );
    box-shadow: inset 0 0 0 1px rgba(120, 132, 124, 0.28);
    border-left-style: dashed;
  }
  
  .loadout-empty .loadout-node {
    border-style: dashed;
    border-color: var(--steel-dark);
    background: transparent;
    color: var(--steel);
    box-shadow: none;
  }
  
  .loadout-empty b {
    color: var(--steel);
    font-size: 10px;
    letter-spacing: 1px;
  }
  
  html[data-theme="day"] .loadout-stamp.is-empty {
    border-color: #1a2432;
    color: #1a2432;
  }
  
  html[data-theme="day"] .loadout-empty {
    background:
      repeating-linear-gradient(
        -45deg,
        rgba(20, 28, 40, 0.08) 0 6px,
        rgba(20, 28, 40, 0.03) 6px 12px
      );
    box-shadow: inset 0 0 0 1px rgba(20, 28, 40, 0.22);
  }
  
  .system-readout {
    --system-color: var(--steel);
    margin-top: 10px;
  }
  
  .survival-system { --system-color: #ff7b6f; }
  /* Charged saves = warm digital protect; coral stays for offline / spent. */
  .survival-system:has(strong.ready),
  .survival-system:has(.shield-charge i.active) {
    --system-color: var(--amber);
  }
  
  .system-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  
  .system-noun {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  
  .system-node {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--system-color) 50%, var(--ink-deep));
    background: var(--system-color);
    color: var(--ink-deep);
    font-family: var(--display);
    font-size: 9px;
    font-weight: 900;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
  }
  
  .system-label strong {
    color: var(--steel);
    font-size: 9px;
    white-space: nowrap;
  }
  
  .system-label strong.ready {
    color: var(--amber2);
  }
  
  .shield-charge {
    position: relative;
    height: 17px;
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--system-color, var(--amber)) 72%, var(--ink-deep));
    background: color-mix(in srgb, var(--system-color, var(--amber)) 10%, transparent);
  }
  
  .shield-charge i {
    position: absolute;
    inset: 2px;
    border: 1px dashed color-mix(in srgb, var(--system-color, var(--amber)) 55%, var(--ink-deep));
    background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--system-color, var(--amber)) 38%, transparent) 5px 7px);
    opacity: 0.42;
  }
  
  .shield-charge i.active {
    border-style: solid;
    border-color: var(--system-color, var(--amber));
    background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--system-color, var(--amber)) 72%, transparent) 5px 7px);
    opacity: 1;
    animation: shield-hatch 900ms linear infinite, shield-guard-glow 1.7s ease-in-out infinite;
  }
  
  .shield-charge:has(i.active) {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--amber2) 35%, transparent),
      0 0 14px color-mix(in srgb, var(--amber) 42%, transparent);
  }
  
  .shield-charge:has(i.active) > span {
    color: color-mix(in srgb, var(--amber2) 70%, var(--ink-deep));
  }
  
  .shield-charge[data-charge-band="2"] i.active {
    background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--system-color, var(--amber)) 82%, transparent) 4px 7px);
    filter: brightness(1.08);
  }
  
  .shield-charge[data-charge-band="3"] i.active {
    background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--amber2) 88%, transparent) 3px 6px);
    filter: brightness(1.2);
    animation-duration: 620ms, 1.25s;
  }
  
  .shield-charge[data-charge-band="3"]:has(i.active) {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--amber2) 52%, transparent),
      0 0 18px color-mix(in srgb, var(--amber) 58%, transparent);
  }
  
  @keyframes shield-hatch {
    from { background-position: 0 0; }
    to { background-position: 14px 0; }
  }
  
  @keyframes shield-guard-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
  }
  
  .shield-charge > span {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--cream-dim);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
  }
  
  .pickup-legend {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--cream-dim);
    font-size: 8px;
  }
  
  .pickup-legend > span,
  .target-legend > span {
    display: block;
    margin-bottom: 8px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.35;
  }
  
  .pickup-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  
  .pickup-items:has(.pickup-family) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  
  .pickup-family small {
    display: block;
    margin-bottom: 5px;
    color: var(--cream-dim);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }
  
  .pickup-family-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .drop-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid #111916;
    border-radius: 4px;
    background: var(--drop-color);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
    /* Fixed dark hangar type — same as --ink-deep / drop chips */
    color: #111916;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  
  .drop-chip b {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 16px;
    border-right: 1px solid rgba(17, 25, 22, 0.45);
    font-size: 9px;
    letter-spacing: 0;
  }
  
  .drop-chip span {
    overflow: hidden;
    color: #111916;
    text-overflow: clip;
  }
  
  .drop-chip.locked {
    filter: grayscale(1) brightness(0.72);
    opacity: 0.72;
  }
  
  .drop-chip .drop-lock {
    margin-left: auto;
    padding-left: 4px;
    color: rgba(17, 25, 22, 0.78);
    font: 800 7px/1 var(--mono);
    letter-spacing: 0.4px;
    font-style: normal;
  }
  
  .drop-chip.locked span {
    letter-spacing: 0.4px;
  }
  
  .drop-chip.is-active {
    border-color: color-mix(in srgb, #fff8ec 55%, var(--drop-color));
    box-shadow:
      2px 3px 0 rgba(0, 0, 0, 0.2),
      0 0 0 1px color-mix(in srgb, var(--drop-color) 70%, transparent),
      0 0 14px color-mix(in srgb, var(--drop-color) 55%, transparent);
    animation: drop-chip-live 1.15s ease-in-out infinite;
    filter: brightness(1.08) saturate(1.15);
  }
  
  .drop-chip.is-active.locked {
    animation: none;
    filter: grayscale(1) brightness(0.72);
  }
  
  @keyframes drop-chip-live {
    0%, 100% {
      box-shadow:
        2px 3px 0 rgba(0, 0, 0, 0.2),
        0 0 0 1px color-mix(in srgb, var(--drop-color) 55%, transparent),
        0 0 10px color-mix(in srgb, var(--drop-color) 35%, transparent);
    }
    50% {
      box-shadow:
        2px 3px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px color-mix(in srgb, var(--drop-color) 85%, transparent),
        0 0 18px color-mix(in srgb, var(--drop-color) 70%, transparent);
    }
  }
  
  /* Lean title= tip — CBD behavior, Paddle Forge hangar chrome (desk + hard shadow). */
  #pf-game-tooltip.pf-game-tooltip {
    --pf-tip-accent: var(--mint);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50000;
    max-width: min(200px, 78vw);
    padding: 6px 8px 5px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--pf-tip-accent) 70%, transparent);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--pf-tip-accent) 8%, transparent), transparent 48%),
      var(--desk);
    box-shadow: 4px 4px 0 var(--shadow);
    color: var(--cream);
    font: 500 8px/1.35 var(--mono);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  
  #pf-game-tooltip.pf-game-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .target-legend {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  
  .target-legend-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  
  .target-legend .object-key {
    position: relative;
    display: block;
    min-width: 0;
  }
  
  .target-legend .object-key.is-undiscovered .brick-swatch {
    border-style: dashed;
    filter: grayscale(1) saturate(.12) contrast(.72) brightness(.72);
    opacity: .68;
  }
  
  .target-state-marker {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 3;
    min-width: 13px;
    padding: 1px 2px;
    border: 1px solid rgba(17, 25, 22, .52);
    background: color-mix(in srgb, var(--steel-dark) 82%, transparent);
    color: var(--dim);
    font: 900 5px/1 var(--mono);
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
  }
  
  .target-legend .object-key.is-new-discovery .brick-swatch {
    animation: target-forged-reveal 720ms cubic-bezier(.2, .8, .2, 1) both;
  }

  /* Chips knocked off a freshly unlocked swatch. Square, tier-coloured, gone in
     half a second — the reveal is the signal, this is only its edge. */
  .discovery-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 3px;
    height: 3px;
    background: var(--target-fill, var(--mint));
    pointer-events: none;
    animation: discovery-spark-out 480ms cubic-bezier(.2, .7, .3, 1) forwards;
  }

  @keyframes discovery-spark-out {
    0% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.45); }
  }
  
  @keyframes target-forged-reveal {
    0% { filter: grayscale(1) saturate(.1) contrast(.72) brightness(.7); opacity: .68; transform: scale(.92); }
    42% { filter: grayscale(0) saturate(1.12) contrast(1.08) brightness(1.18); opacity: 1; transform: scale(1.06); }
    100% { filter: none; opacity: 1; transform: none; }
  }
  
  .target-swatch,
  .anchor-swatch {
    position: relative;
    z-index: 0;
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(17, 25, 22, 0.55);
    border-radius: 2px;
    /* Under-line / drop — same language as canvas BRICK_FACE.drop */
    box-shadow: 2px 3px 0 rgba(17, 25, 22, 0.18);
    color: var(--target-ink, #111916);
    font-family: var(--mono);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    background:
      linear-gradient(180deg, rgba(255, 248, 236, 0.18) 0%, transparent 36%, rgba(17, 25, 22, 0.12) 100%),
      var(--target-fill, var(--target-mint));
  }
  
  /* Targets: top-left hit stamp (matches canvas + title ghost). Anchors stay centered U. */
  .target-swatch { display: block; }
  .anchor-swatch { display: grid; place-items: center; }
  
  .hit-stamp {
    position: absolute;
    top: 7px;
    left: 3px;
    z-index: 1;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 1px solid color-mix(in srgb, var(--target-highlight, #fff8ec) 55%, rgba(10, 12, 16, 0.5));
    border-radius: 2px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 50%),
      rgba(10, 12, 16, 0.9);
    color: #fff8ec;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.28);
    font: 900 8px/1 var(--mono);
    letter-spacing: 0;
    pointer-events: none;
  }
  
  .hit-stamp[data-digits="2"] {
    width: 14px;
    font-size: 7px;
  }
  
  .hit-stamp[data-digits="3"] {
    width: 18px;
    font-size: 6px;
  }
  
  .target-swatch.camo-swatch .hit-stamp {
    color: #fff8ec;
    border-color: color-mix(in srgb, #e8efe0 40%, rgba(10, 12, 16, 0.55));
  }
  
  .target-swatch::before {
    position: absolute;
    top: 3px;
    right: 3px;
    left: 3px;
    z-index: -1;
    height: 3px;
    background: var(--target-highlight, var(--target-mint-hi));
    content: "";
    pointer-events: none;
  }
  
  /* Bottom lip + right shade + rivets — mirrors canvas bevel */
  .target-swatch::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
      linear-gradient(to top, rgba(17, 25, 22, 0.16) 0 3px, transparent 3px),
      linear-gradient(to left, rgba(17, 25, 22, 0.16) 0 3px, transparent 3px),
      linear-gradient(to right, rgba(255, 248, 236, 0.14) 0 2px, transparent 2px),
      radial-gradient(circle at 5.4px 7.2px, rgba(17, 25, 22, 0.42) 0.7px, var(--target-rivet, rgba(17, 25, 22, 0.2)) 1.25px, transparent 1.5px),
      radial-gradient(circle at calc(100% - 5.4px) 7.2px, rgba(17, 25, 22, 0.42) 0.7px, var(--target-rivet, rgba(17, 25, 22, 0.2)) 1.25px, transparent 1.5px);
  }
  
  /* Tier 20 — M81-ish woodland (jagged leaf shapes, not U hatch / soft ellipses) */
  .target-swatch.camo-swatch {
    background-color: #4a5d23;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28' preserveAspectRatio='none'%3E%3Cpath fill='%233d5224' d='M2 6c4-5 12-4 16 1 3 4 1 9-3 11-5 3-12 1-14-4-2-4 0-7 1-8z'/%3E%3Cpath fill='%231b1b16' d='M28 2c6-1 14 2 16 8 1 4-2 9-7 10-6 2-12-1-14-6-2-5 1-11 5-12z'/%3E%3Cpath fill='%236a4428' d='M18 14c7-1 16 3 18 9 1 4-3 7-9 6-7-1-14-4-16-9-1-3 2-6 7-6z'/%3E%3Cpath fill='%23c2b07a' d='M1 20c4-1 9 1 10 5 1 3-2 5-6 4-4-1-7-3-7-6 0-2 1-3 3-3z'/%3E%3Cpath fill='%232a3d18' d='M36 16c5 0 11 3 10 8-1 3-5 4-9 3-4-1-7-4-6-7 1-2 3-4 5-4z'/%3E%3Cpath fill='%231b1b16' d='M22 8c3 0 6 2 5 5s-5 3-7 1c-2-2-1-6 2-6z'/%3E%3Cpath fill='%23c2b07a' d='M40 22c3 0 6 1 5 3s-5 2-6 0c-1-2 0-3 1-3z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #e8efe0;
  }
  
  /* U = unbreakable — match canvas drawBrick: hatch + X brace + rivets + amber U */
  .anchor-swatch {
    z-index: 0;
    overflow: hidden;
    border: 2px solid var(--anchor-steel);
    background: var(--anchor-steel-dark);
    color: #ffd07f;
    font-size: 10px;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow:
      2px 3px 0 rgba(0, 0, 0, 0.18),
      inset 0 0 0 1.5px rgba(143, 157, 152, 0.55);
  }
  
  .anchor-swatch::before {
    position: absolute;
    inset: 2px;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
      linear-gradient(
        to bottom right,
        transparent calc(50% - 0.85px),
        rgba(255, 255, 255, 0.22) calc(50% - 0.85px),
        rgba(255, 255, 255, 0.22) calc(50% + 0.85px),
        transparent calc(50% + 0.85px)
      ),
      linear-gradient(
        to top right,
        transparent calc(50% - 0.85px),
        rgba(255, 255, 255, 0.22) calc(50% - 0.85px),
        rgba(255, 255, 255, 0.22) calc(50% + 0.85px),
        transparent calc(50% + 0.85px)
      ),
      repeating-linear-gradient(
        115deg,
        transparent 0 4px,
        rgba(255, 255, 255, 0.12) 4px 5.5px
      );
  }
  
  .anchor-swatch::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
      radial-gradient(circle at 5px 5px, var(--anchor-steel) 1.15px, transparent 1.35px),
      radial-gradient(circle at calc(100% - 5px) 5px, var(--anchor-steel) 1.15px, transparent 1.35px),
      radial-gradient(circle at 5px calc(100% - 5px), var(--anchor-steel) 1.15px, transparent 1.35px),
      radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--anchor-steel) 1.15px, transparent 1.35px);
  }
  
  .forge-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 26px;
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  
  .forge-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .forge-overlay.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .forge-shell {
    --forge-card-bg: #18221e;
    --forge-card-type: #eef2f8;
    --forge-card-dim: #c8d0dc;
    --forge-card-mute: #a4b0be;
    width: min(1180px, 100%);
    height: min(880px, calc(100dvh - 52px));
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--amber) 8%, transparent) 1px, transparent 1px),
      linear-gradient(color-mix(in srgb, var(--amber) 8%, transparent) 1px, transparent 1px),
      var(--ink);
    background-size: 36px 36px;
    box-shadow: 0 25px 80px var(--shadow);
    transform: translateY(12px) scale(0.985);
    transition: transform 240ms cubic-bezier(0.33, 0.1, 0.2, 1);
  }
  
  .forge-overlay.is-open .forge-shell {
    transform: none;
  }
  
  .forge-overlay.is-closing .forge-shell {
    transform: translateY(8px) scale(0.99);
  }
  
  .forge-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 27px 31px 22px;
    border-top: 5px solid var(--amber);
    border-bottom: 1px solid var(--line);
    background: var(--graphite);
  }
  
  .panel-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .panel-jump {
    position: relative;
    min-height: 44px;
    padding: 0 14px 0 13px;
    border: 1px solid color-mix(in srgb, var(--amber) 62%, var(--line));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--amber) 28%, transparent), color-mix(in srgb, var(--amber) 10%, transparent));
    color: var(--amber2);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--amber) 14%, transparent),
      0 0 18px color-mix(in srgb, var(--amber) 22%, transparent);
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    animation: panel-jump-pulse 2.1s ease-in-out infinite;
  }
  
  .panel-jump b {
    margin-left: 7px;
    color: var(--cream);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  
  .panel-jump:hover,
  .panel-jump:focus-visible {
    border-color: var(--amber2);
    background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 42%, transparent), color-mix(in srgb, var(--amber) 16%, transparent));
    color: var(--cream);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--amber2) 28%, transparent),
      0 0 26px color-mix(in srgb, var(--amber) 38%, transparent);
    filter: brightness(1.06);
  }
  
  @keyframes panel-jump-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--amber) 14%, transparent),
        0 0 14px color-mix(in srgb, var(--amber) 18%, transparent);
    }
    50% {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--amber) 28%, transparent),
        0 0 24px color-mix(in srgb, var(--amber) 34%, transparent);
    }
  }
  
  .forge-header .theme-toggle {
    align-self: center;
    min-height: 44px;
  }
  
  .forge-header p {
    margin: 0 0 5px;
    color: var(--amber-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
  }
  
  .forge-header h1 {
    display: inline-block;
    margin: 0 18px 0 0;
    font-family: var(--display);
    font-size: 35px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  
  .forge-header > div:first-child > span {
    color: var(--cream-dim);
    font-size: 10px;
  }
  
  .forge-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 135px;
    padding: 9px 12px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  
  .forge-balance > span {
    color: var(--cream-dim);
    font-size: 8px;
    letter-spacing: 1px;
  }
  
  .forge-balance strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 22px;
  }
  
  .forge-balance .core-token {
    --core-ring-bg: var(--graphite);
  }
  
  .forge-notice {
    margin: 18px 31px 0;
    padding: 10px 13px;
    border-left: 3px solid var(--mint);
    background: rgba(124, 241, 196, 0.06);
    color: var(--cream-dim);
    font-size: 10px;
  }
  
  .skill-tree {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    gap: 31px;
    padding: 28px 31px 33px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  
  .skill-branch {
    position: relative;
    min-width: 0;
  }
  
  .skill-branch::before {
    position: absolute;
    z-index: 0;
    top: 57px;
    bottom: 48px;
    left: 25px;
    width: 2px;
    background: rgba(247, 239, 218, 0.16);
    content: "";
  }
  
  .mastery-rack {
    position: relative;
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px dashed color-mix(in srgb, var(--branch-color) 58%, transparent);
  }
  
  .mastery-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--branch-color);
    font: 800 8px var(--mono);
    letter-spacing: 1px;
  }
  
  .mastery-label span {
    color: var(--cream-dim);
    font-size: 7px;
  }
  
  article.skill-card.mastery-card {
    width: calc(100% - 15px);
    margin-left: 15px;
    border-left-width: 2px;
  }
  
  article.skill-card.mastery-card::before {
    position: absolute;
    top: 28px;
    left: -16px;
    width: 15px;
    border-top: 1px dashed color-mix(in srgb, var(--branch-color) 56%, transparent);
    content: "";
  }
  
  .mastery-gate {
    display: grid;
    gap: 4px;
    margin: 18px 0 0 15px;
    padding: 11px 12px;
    border: 1px dashed rgba(181, 193, 189, 0.3);
    background: rgba(0, 0, 0, 0.08);
    color: var(--steel);
    font: 800 8px var(--mono);
    letter-spacing: 1px;
  }
  
  .mastery-gate b {
    color: color-mix(in srgb, var(--branch-color) 42%, var(--steel));
  }
  
  .mastery-gate span {
    font-size: 7px;
  }
  
  .branch-header {
    display: none;
  }
  
  .forge-branch-cue {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: color-mix(in srgb, var(--branch-color) 55%, var(--cream-dim));
    font: 700 11px/1.35 var(--mono);
    letter-spacing: 0.4px;
  }
  
  .skill-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 49px 1fr;
    width: 100%;
    min-height: 118px;
    margin-top: 10px;
    padding: 0;
    border: 1px solid rgba(247, 239, 218, 0.18);
    background: var(--forge-card-bg, #18221e);
    color: var(--forge-card-type, #eef2f8);
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  }
  
  .skill-card:hover:not(:disabled) {
    transform: translateX(3px);
    border-color: var(--branch-color);
    background: #1d2924;
  }
  
  .skill-card:disabled {
    cursor: not-allowed;
  }
  
  .skill-card .card-node {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(247, 239, 218, 0.12);
    background: rgba(0, 0, 0, 0.12);
  }
  
  .skill-card .card-node i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 2px solid color-mix(in srgb, var(--branch-color) 55%, var(--ink-deep));
    background: var(--branch-color);
    color: var(--ink-deep);
    font-family: var(--display);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
  }
  
  .skill-card .card-copy {
    min-width: 0;
    padding: 10px 12px 9px;
  }
  
  .card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  
  .card-topline strong {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.3px;
  }
  
  .card-badge {
    flex: 0 0 auto;
    min-height: 27px;
  }
  
  .card-badge {
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    border: 1px solid var(--forge-card-mute, var(--steel));
    background: rgba(181, 193, 189, 0.1);
    color: var(--forge-card-type, var(--cream));
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.8px;
  }
  
  .skill-card p {
    min-height: 30px;
    margin: 5px 0 6px;
    color: var(--forge-card-dim, var(--cream-dim));
    font-size: 9px;
    line-height: 1.4;
  }
  
  .card-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--forge-card-mute, var(--steel));
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
  }
  
  /* Board-local toasts: float up from the crown — translucent so bricks stay readable. */
  .toast-stack {
    position: absolute;
    z-index: 14;
    top: 14px;
    left: 50%;
    width: min(320px, calc(100% - 28px));
    height: 0;
    transform: translateX(-50%);
    pointer-events: none;
  }
  
  .toast {
    --toast-color: var(--amber);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px 14px;
    border-left: 4px solid var(--toast-color);
    border-top: 1px solid color-mix(in srgb, var(--toast-color) 34%, transparent);
    /* Glass over the court — readable, still see bricks/score through. */
    background: color-mix(in srgb, var(--toast-color) 22%, rgba(10, 16, 14, 0.58));
    color: var(--cream);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: toast-float-up 3.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
  
  @keyframes toast-float-up {
    0% { opacity: 0; transform: translateY(8px); }
    5% { opacity: 0.92; transform: translateY(0); }
    72% { opacity: 0.86; transform: translateY(-18px); }
    100% { opacity: 0; transform: translateY(-58px); }
  }
  
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes combo-pop {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(calc(0.72 * var(--combo-grow, 1))) rotate(-4deg); }
    22% { opacity: 1; transform: translate(-50%, -48%) scale(calc(1.08 * var(--combo-grow, 1))) rotate(-3deg); }
    100% { opacity: 0; transform: translate(-50%, -78%) scale(calc(1.2 * var(--combo-grow, 1))) rotate(-5deg); }
  }
  
  @keyframes combo-spark-left {
    0% { opacity: 0; transform: translate(12px, 7px) scale(0.25) rotate(0); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translate(-28px, -24px) scale(1.05) rotate(-90deg); }
  }
  
  @keyframes combo-spark-right {
    0% { opacity: 0; transform: translate(-12px, 7px) scale(0.25) rotate(0); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translate(28px, -30px) scale(1.05) rotate(100deg); }
  }
  
  @keyframes field-active-pulse {
    0%,
    100% {
      border-color: rgba(247, 239, 218, 0.08);
      border-left-color: var(--effect-color);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
      border-color: color-mix(in srgb, var(--effect-color) 34%, transparent);
      border-left-color: var(--effect-color);
      box-shadow: 0 0 10px color-mix(in srgb, var(--effect-color) 15%, transparent);
    }
  }
  
  @keyframes field-expire-flash {
    0%,
    100% {
      border-left-color: var(--coral);
      background: linear-gradient(100deg, color-mix(in srgb, var(--coral) 14%, transparent), transparent 52%), rgba(23, 33, 29, 0.72);
      box-shadow: 0 0 0 transparent;
    }
    50% {
      border-left-color: #ff6a5c;
      background: linear-gradient(100deg, color-mix(in srgb, var(--coral) 28%, transparent), transparent 52%), rgba(36, 18, 16, 0.82);
      box-shadow: 0 0 12px color-mix(in srgb, var(--coral) 28%, transparent);
    }
  }
  
  @keyframes system-active-pulse {
    0%,
    100% { border-color: rgba(247, 239, 218, 0.14); }
    50% {
      border-color: color-mix(in srgb, var(--system-color) 58%, transparent);
      box-shadow: 0 0 10px color-mix(in srgb, var(--system-color) 16%, transparent);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .toast {
      animation: toast-float-up-reduced 1.85s ease both;
    }
  }

  @keyframes toast-float-up-reduced {
    0% { opacity: 0; }
    10% { opacity: 0.9; }
    82% { opacity: 0.9; }
    100% { opacity: 0; }
  }
  
  @media (max-width: 1080px) {
    /* Keep the 3-column desktop shell — stacking the right rail under the board
       was the main source of vertical scroll on laptop widths. */
    .game-layout {
      gap: 12px;
      --shell-chrome: 200px;
    }
  
    .skill-tree {
      gap: 18px;
      padding-right: 22px;
      padding-left: 22px;
    }
  
    .forge-header {
      padding-right: 22px;
      padding-left: 22px;
    }
  }
  
  @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;
    }
  }
  
  /* Shorter desktops: give the court the leftover height, then compact rails so they don't scroll. */
  @media (min-width: 761px) and (max-height: 900px) {
    .app-shell {
      padding: 12px 16px 14px;
    }

    .topbar {
      min-height: 44px;
      padding-bottom: 6px;
    }

    .game-layout {
      padding: 10px;
      gap: 10px;
      --shell-chrome: 148px;
      --board-labels: 24px;
    }

    .board-topline {
      min-height: 22px;
      padding: 2px 0 4px;
    }

    .stat-stack > div {
      min-height: 26px;
      padding: 2px 0;
    }

    .stat-stack dd {
      font-size: 18px;
    }

    .hud-rail-left .control-legend {
      margin-top: 6px;
      padding: 6px 0 0;
    }

    .hud-rail-left .pickup-legend {
      margin-top: 6px;
      padding-top: 6px;
    }

    .loadout-card,
    .loadout-empty {
      min-height: 40px;
      padding: 5px 7px;
    }

    .rail-rule {
      height: 6px;
      margin: 8px 0;
    }

    .card-behavior > span {
      padding: 5px 5px;
    }

    .rail-button {
      min-height: 40px;
      margin-top: 8px;
      padding-top: 7px;
      padding-bottom: 7px;
    }
  }

  @media (min-width: 761px) and (max-height: 760px) {
    .app-shell {
      padding: 8px 12px 10px;
    }

    .game-layout {
      padding: 8px;
      gap: 8px;
      --shell-chrome: 124px;
      --board-labels: 22px;
    }

    .stat-stack > div {
      min-height: 22px;
    }

    .stat-stack dd {
      font-size: 16px;
    }

    /* Hangar-only: drop rank-4 legends so Equipped Deck still fits without a scrollbar. */
    body[data-game-state="title"] .hud-rail-right .card-behavior-group,
    body[data-game-state="title"] .hud-rail-right .target-legend,
    body[data-game-state="title"] .hud-rail-right .field-effects-group {
      display: none;
    }
  }

  /* Court-sized overlay: Start Run stays on the card even when the bezel is short. */
  @media (min-width: 761px) {
    @container court (max-height: 660px) {
      .state-overlay {
        padding: 12px 14px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: safe center;
        scrollbar-width: thin;
      }

      .state-panel {
        padding: 16px 18px 14px;
      }

      .state-panel h1 {
        font-size: 38px;
      }

      .state-panel h2 {
        font-size: 28px;
      }

      .state-panel .subtitle {
        margin-top: 8px;
        font-size: 12px;
      }

      .state-copy {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.4;
      }

      .brief-grid,
      .result-grid {
        margin-top: 10px;
      }

      .brief-grid > div,
      .result-grid > div {
        padding: 7px 6px;
      }

      .state-actions {
        margin-top: 10px;
        gap: 7px;
      }

      .primary-action,
      .secondary-action {
        min-height: 42px;
      }

      .title-ghost-rack {
        width: 120px;
        height: 80px;
        opacity: 0.14;
      }

      .title-panel .achievement-placeholder[disabled] {
        min-height: 44px;
      }
    }

    @container court (max-height: 540px) {
      .state-overlay:has(.title-panel) {
        display: flex;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
        padding: 8px 10px;
      }

      .state-panel.title-panel {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        min-height: 0;
      }

      .state-panel.title-panel .state-copy {
        display: none;
      }

      .title-ghost-rack {
        display: none;
      }

      .state-panel h1 {
        font-size: 30px;
      }

      .state-panel.title-panel .state-actions {
        flex: 0 0 auto;
        margin-top: auto;
      }
    }
  }
  
  .skill-card p {
    font-size: 10px;
  }
  
  .card-state {
    font-size: 9px;
    line-height: 1.35;
  }
  
  /* Reflow before tablet cards collapse into three microtype columns. */
  @media (min-width: 761px) and (max-width: 900px) {
    .skill-tree {
      grid-template-columns: 1fr;
      width: min(100%, 690px);
      margin-right: auto;
      margin-left: auto;
      gap: 28px;
    }
  
    .skill-card p {
      min-height: 0;
      font-size: 11px;
    }
  
    .card-state {
      gap: 12px;
      font-size: 10px;
    }
  }
  
  /* Narrow phones: keep name + score on one row; threat rides under the name. */
  @media (max-width: 390px) {
    .board-topline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      column-gap: 8px;
      row-gap: 1px;
      align-items: baseline;
      min-height: 0;
      padding: 3px 0 5px;
    }

    .board-topline > span:first-child {
      grid-column: 1;
      grid-row: 1;
    }

    .board-scoreline {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
    }

    .board-topline > span:last-child {
      grid-column: 1;
      grid-row: 2;
      max-width: none;
      overflow: visible;
      text-align: left;
      text-overflow: clip;
      white-space: normal;
    }
  }