/* Canonical phone component owner: core/HUD responsive rules. */
@media (max-width: 760px) {
    .app-shell {
      padding: 10px 12px 8px;
    }
  
    .topbar {
      flex: 0 0 auto;
      min-height: 57px;
      padding-bottom: 10px;
    }
  
    .brand {
      gap: 9px;
    }
  
    .brand-mark {
      width: 32px;
      height: 36px;
      padding: 6px;
    }
  
    .brand strong {
      font-size: 17px;
    }
  
    .currency-wallet {
      min-height: 44px;
      padding: 3px;
    }
  
    .currency-chip {
      padding-right: 8px;
    }
  
    .currency-meta small {
      display: none;
    }
  
    .currency-meta strong {
      font-size: 17px;
    }
  
    .icon-button {
      min-height: 44px;
      min-width: 46px;
    }
  
    .board-topline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      column-gap: 10px;
      row-gap: 1px;
      align-items: baseline;
      min-height: 0;
      padding: 3px 0 5px;
      font-size: 8px;
      letter-spacing: 0.7px;
    }

    .board-topline > span:first-child {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .board-scoreline {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      font-size: 20px;
      letter-spacing: 0.06em;
    }

    .board-topline > span:last-child {
      grid-column: 1;
      grid-row: 2;
      max-width: none;
      overflow: hidden;
      color: color-mix(in srgb, var(--cream-dim) 78%, transparent);
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 7px;
      letter-spacing: 0.55px;
    }

    /* Result screens own the telemetry — drop the leftover board chrome. */
    body:is([data-game-state="levelClear"], [data-game-state="victory"], [data-game-state="gameOver"]) .board-topline {
      display: none;
    }
  
    #gameCanvas {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
    }
  
    .state-overlay {
      padding: 12px;
      overflow-x: hidden;
      overflow-y: auto;
      align-content: safe center;
    }
  
    .state-panel {
      padding: 22px 20px 20px;
    }
  
    .state-panel.title-panel {
      max-height: 100%;
    }
  
    .state-panel h1 {
      font-size: 39px;
    }
  
    .state-panel h2 {
      font-size: 29px;
    }
  
    .state-kicker {
      font-size: 10px;
    }
  
    .state-copy {
      font-size: 11px;
      line-height: 1.55;
    }
  
    .state-actions {
      margin-top: 17px;
    }
  
    .primary-action,
    .secondary-action {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 44px;
      padding-right: 11px;
      padding-left: 11px;
      font-size: 11px;
    }
  
    .brief-grid,
    .result-grid,
    .clear-stat-rack {
      margin-top: 15px;
    }
  
    .brief-grid > div,
    .result-grid > div,
    .clear-stat {
      padding: 8px 5px;
    }
  
    .brief-grid span,
    .result-grid span,
    .clear-stat span {
      font-size: 8px;
    }
  
    .brief-grid strong,
    .result-grid strong,
    .clear-stat strong {
      font-size: 15px;
    }
  
    .clear-stat em {
      font-size: 8px;
    }
  
    .loadout-card,
    .loadout-empty {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 8px;
      min-height: 58px;
      padding: 6px 8px 6px 8px;
    }
  
    .loadout-node {
      min-width: 20px;
      max-width: 52px;
      min-height: 20px;
      font-size: 8px;
    }
  
    .loadout-copy b {
      font-size: 11px;
    }
  
    .loadout-copy span {
      font-size: 9px;
    }
  
    .serve-prompt {
      font-size: 12px;
    }
  
    .serve-prompt small {
      font-size: 13px;
    }
  
    .serve-prompt span {
      font-size: 13px;
    }

    .toast {
      font-size: 13px;
    }
  
    .forge-overlay {
      padding: 0;
    }
  
    .forge-shell {
      min-height: 100vh;
      border: 0;
    }
  
    .forge-header {
      position: sticky;
      z-index: 5;
      top: 0;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 15px 13px 13px;
    }
  
    .forge-header h1 {
      font-size: 25px;
    }
  
    .forge-header > div:first-child > span,
    .forge-header p {
      display: none;
    }
  
    .forge-balance {
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
      padding: 5px 0;
      border: 0;
    }
  
    .forge-header .panel-header-actions {
      grid-column: 2;
      grid-row: 1 / span 2;
      gap: 7px;
    }
  
    .forge-header .panel-jump {
      min-width: 0;
      padding: 0 9px 0 8px;
      font-size: 8px;
    }
  
    .forge-header .theme-toggle {
      min-width: 46px;
    }

    /* Phone desk accents — thin crowns/rails so small surfaces don't look framed twice. */
    .forge-header {
      border-top-width: 2px;
      padding-top: 13px;
    }

    .forge-tab::before {
      width: 28px;
      height: 1px;
      opacity: 0.55;
    }

    .forge-branch-docket {
      border-left-width: 2px;
      padding: 8px 10px;
    }

    .card-state-swatch.equipped {
      box-shadow: inset 2px 0 0 var(--mint);
    }

    .card-state-swatch.unequipped,
    .card-state-swatch.loadout-full {
      box-shadow: inset 0 -2px 0 var(--steel);
    }

    .settings-shell {
      border-top-width: 2px;
    }

    .state-panel {
      border-top-width: 2px;
      box-shadow: 8px 9px 0 var(--shadow);
    }

    .state-panel.clear-results-panel.is-perfect {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mint) 18%, transparent),
        6px 7px 0 rgba(0, 0, 0, 0.2);
    }

    .state-panel.clear-stamp,
    .state-panel.miss-ack-panel,
    .state-panel.court-transition-panel {
      box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.2);
    }

    .canvas-bezel {
      border-top-width: 2px;
    }
  
    .forge-notice {
      margin: 13px 13px 0;
      line-height: 1.45;
    }
  
    .skill-tree {
      display: block;
      padding: 16px 13px 24px;
    }
  
    .skill-branch + .skill-branch {
      margin-top: 28px;
    }
  
    .skill-card {
      min-height: 110px;
    }

    /* Phone: desk accents were sized for desktop cards — thin so they don't dominate. */
    article.skill-card::after {
      width: 28px;
      height: 1px;
      opacity: 0.4;
    }

    article.skill-card:hover::after,
    article.skill-card:focus-within::after {
      width: 28%;
      height: 1px;
    }

    article.skill-card:hover,
    article.skill-card:focus-within {
      box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.16), inset 2px 0 0 color-mix(in srgb, var(--branch-color) 70%, transparent);
    }

    article.skill-card.is-equipped {
      box-shadow: var(--signal-on), inset 2px 0 0 var(--branch-color), 4px 5px 0 rgba(0, 0, 0, 0.14);
    }

    article.skill-card.is-equipped .card-badge {
      box-shadow: inset 2px 0 0 var(--branch-color);
    }

    html[data-theme="day"] .forge-shell article.skill-card.is-equipped {
      box-shadow: var(--signal-on), inset 2px 0 0 var(--branch-color), 4px 5px 0 rgba(0, 0, 0, 0.14);
    }

    .skill-card .rank-line {
      border-left-width: 2px;
      padding: 3px 5px;
      font-size: 10px;
    }
  
    /* Phone read pass — forge body/CTAs were microtype; +1–2px without growing chrome. */
    .card-topline strong {
      font-size: 15px;
    }
  
    .card-badge {
      font-size: 8px;
    }
  
    .skill-card p {
      font-size: 11px;
      line-height: 1.45;
    }
  
    .skill-card p b {
      font-size: 9px;
    }
  
    .card-state {
      font-size: 10px;
    }
  
    .skill-card .card-action,
    .skill-card .maxed-stamp {
      font-size: 9px;
      letter-spacing: 0.7px;
    }
  
    .forge-footer {
      gap: 8px 12px;
      padding: 12px 13px;
    }
  }
  
  @media (max-width: 390px) {
    .app-shell {
      padding-right: 8px;
      padding-left: 8px;
    }
  
    .topbar-actions {
      gap: 5px;
    }
  
    .currency-chip {
      gap: 6px;
      padding-left: 3px;
      padding-right: 7px;
    }
  
    .core-token-md {
      --core-size: 25px;
      --core-optical-y: 0.5px;
    }
  
    .theme-toggle {
      min-width: 52px;
      padding: 0 7px;
      font-size: 9px;
    }
  
    .pickup-items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .state-overlay {
      padding: 11px;
    }
  
    .state-panel {
      padding: 18px 16px;
    }
  
    .state-panel h1 {
      font-size: 34px;
    }
  
    .state-panel h2 {
      font-size: 25px;
    }
  
    .state-copy {
      margin-top: 11px;
    }
  
    .state-actions {
      margin-top: 13px;
    }
  
    .brief-grid > div,
    .result-grid > div {
      min-width: 0;
    }
  }
  
  /* Mobile control deck: the hand stays below the live playfield. */
  .touch-control-deck {
    display: none;
  }
  
  @media (max-width: 760px) {
    .touch-control-deck {
      position: relative;
      display: grid;
      grid-template-rows: 22px minmax(48px, 1fr);
      min-height: 76px;
      margin-top: 8px;
      padding: 0 8px 8px;
      overflow: hidden;
      border: 1px solid rgba(124, 241, 196, 0.32);
      background:
        linear-gradient(115deg, rgba(124, 241, 196, 0.07), transparent 34%),
        repeating-linear-gradient(120deg, transparent 0 20px, rgba(247, 239, 218, 0.025) 21px 22px),
        #101815;
      box-shadow: inset 0 1px rgba(247, 239, 218, 0.06), 0 8px 20px rgba(0, 0, 0, 0.22);
    }
    .touch-control-deck::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 38%;
      height: 2px;
      background: linear-gradient(90deg, var(--mint), var(--amber));
      content: "";
      box-shadow: 0 0 12px rgba(124, 241, 196, 0.45);
    }
    .touch-control-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--cream-dim);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1.1px;
    }
    .touch-control-head span { color: var(--mint); }
    .touch-control-head b { color: var(--cream); font: inherit; }
    .touch-track {
      --control-x: 50%;
      position: relative;
      display: block;
      min-height: 48px;
      overflow: hidden;
      border: 1px solid rgba(247, 239, 218, 0.22);
      background:
        linear-gradient(90deg, rgba(255, 111, 97, 0.12), transparent 18% 82%, rgba(255, 111, 97, 0.12)),
        #0a100e;
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }
    .touch-track:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
    .touch-track-rail {
      position: absolute;
      top: 50%;
      right: 15px;
      left: 15px;
      height: 4px;
      transform: translateY(-50%);
      background: rgba(247, 239, 218, 0.13);
      box-shadow: inset 0 0 0 1px rgba(11, 16, 14, 0.55);
    }
    .touch-track-rail::before,
    .touch-track-rail::after {
      position: absolute;
      top: -5px;
      width: 1px;
      height: 14px;
      background: var(--coral);
      content: "";
      opacity: 0.7;
    }
    .touch-track-rail::before { left: 0; }
    .touch-track-rail::after { right: 0; }
    .touch-track-thumb {
      position: absolute;
      top: 50%;
      left: clamp(25px, var(--control-x), calc(100% - 25px));
      display: grid;
      place-items: center;
      width: 50px;
      height: 26px;
      transform: translate(-50%, -50%);
      border: 1px solid var(--mint);
      background: var(--graphite);
      box-shadow: 0 0 0 3px rgba(124, 241, 196, 0.08), 0 5px 13px rgba(0, 0, 0, 0.4);
      pointer-events: none;
    }
    .touch-track-thumb::before,
    .touch-track-thumb::after {
      position: absolute;
      width: 4px;
      height: 8px;
      border-top: 1px solid var(--amber);
      border-bottom: 1px solid var(--amber);
      content: "";
    }
    .touch-track-thumb::before { left: 7px; }
    .touch-track-thumb::after { right: 7px; }
    .touch-track-thumb span {
      width: 14px;
      height: 3px;
      background: var(--amber);
      box-shadow: 0 0 8px rgba(255, 188, 87, 0.4);
    }

    .touch-track-rail-y {
      display: none;
    }

    /* Elevator online — Centipede pad: drag X and Y on a taller rail. */
    .touch-control-deck.is-lift-pad {
      grid-template-rows: 18px minmax(72px, 1fr) 44px;
      min-height: 148px;
    }

    .touch-control-deck.is-lift-pad .touch-track {
      --control-y: 100%;
      min-height: 72px;
      cursor: move;
      background:
        linear-gradient(90deg, rgba(255, 111, 97, 0.1), transparent 18% 82%, rgba(255, 111, 97, 0.1)),
        linear-gradient(180deg, rgba(124, 241, 196, 0.1), transparent 22% 78%, rgba(124, 241, 196, 0.08)),
        #0a100e;
    }

    .touch-control-deck.is-lift-pad .touch-track-rail-y {
      display: block;
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 50%;
      width: 3px;
      transform: translateX(-50%);
      background: rgba(124, 241, 196, 0.22);
      box-shadow: inset 0 0 0 1px rgba(11, 16, 14, 0.45);
      pointer-events: none;
    }

    .touch-control-deck.is-lift-pad .touch-track-thumb {
      top: clamp(16px, var(--control-y), calc(100% - 16px));
    }
  }

/* Canonical phone component owner: Forge/deck responsive rules. */
@media (max-width: 520px) {
    .forge-footer {
      padding-right: 13px;
      padding-left: 13px;
    }
  
    .forge-footer {
      position: relative;
    }

    .forge-legend-label .forge-signals-cue {
      display: inline;
      margin-left: 6px;
      color: var(--mint);
      font: 800 8px/1 var(--mono);
      letter-spacing: 0.9px;
      white-space: nowrap;
    }

    .forge-footer[data-signals-scroll="fit"] .forge-signals-cue,
    .forge-footer[data-signals-scroll="end"] .forge-signals-cue {
      opacity: 0.35;
      color: var(--cream-dim);
    }

    .forge-signals {
      display: flex;
      gap: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
      touch-action: pan-x;
      /* Right fade = "more this way" until you reach the end. */
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
    }

    .forge-footer[data-signals-scroll="mid"] .forge-signals {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 calc(100% - 36px), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 calc(100% - 36px), transparent 100%);
    }

    .forge-footer[data-signals-scroll="end"] .forge-signals,
    .forge-footer[data-signals-scroll="fit"] .forge-signals {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 28px, #000 100%);
    }

    .forge-footer[data-signals-scroll="start"]::after,
    .forge-footer[data-signals-scroll="mid"]::after {
      position: absolute;
      right: 10px;
      bottom: 14px;
      z-index: 2;
      color: var(--mint);
      font: 900 16px/1 var(--display);
      content: "›";
      pointer-events: none;
      text-shadow: 0 0 10px color-mix(in srgb, var(--mint) 45%, transparent);
      animation: forge-signals-nudge 1.6s ease-in-out infinite;
    }

    .forge-footer[data-signals-scroll="end"]::after,
    .forge-footer[data-signals-scroll="fit"]::after {
      content: none;
      animation: none;
    }

    @keyframes forge-signals-nudge {
      0%, 100% { transform: translateX(0); opacity: 0.55; }
      50% { transform: translateX(3px); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .forge-footer[data-signals-scroll="start"]::after,
      .forge-footer[data-signals-scroll="mid"]::after {
        animation: none;
        opacity: 0.85;
      }
    }
  
    .forge-signal-group,
    .forge-signal-group:nth-child(odd) {
      flex: 0 0 auto;
      min-width: 142px;
      padding: 0 12px;
      border-left: 1px dashed rgba(247, 239, 218, 0.13);
      scroll-snap-align: start;
    }
  
    .forge-signal-group:first-child {
      padding-left: 0;
      border-left: 0;
    }
  }
  
  .touch-control-head .elevator-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 36px;
    padding: 5px 9px;
    border: 1px solid var(--mint);
    background: linear-gradient(100deg, rgba(124, 241, 196, 0.08), transparent), #17211d;
    color: var(--mint);
    font: 800 7px var(--mono);
    letter-spacing: 0.7px;
    cursor: pointer;
  }
  
  .touch-control-head .elevator-control:hover,
  .touch-control-head .elevator-control:focus-visible {
    background-color: #203129;
    box-shadow: inset 3px 0 0 var(--amber);
  }
  
  @media (max-width: 760px) {
    .forge-overlay {
      -webkit-overflow-scrolling: touch;
    }
  
    .forge-shell {
      width: 100%;
      height: 100dvh;
      min-height: 0;
      max-height: 100dvh;
    }
  
    .forge-header {
      position: relative;
      top: auto;
    }
  
    .forge-notice {
      position: relative;
      z-index: 4;
      top: auto;
      background: #17211d;
      box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
    }
  
    .skill-tree {
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    article.skill-card {
      min-height: 190px;
    }
  
    .skill-card .card-action,
    .skill-card .maxed-stamp {
      min-height: 44px;
      padding-right: 7px;
      padding-left: 7px;
    }
  
    .forge-footer {
      padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
  
    .hud-rail-right > .rail-rule,
    .hud-rail-right > .systems-heading,
    .hud-rail-right > .active-systems,
    .hud-rail-right > .field-effects {
      grid-column: 1 / -1;
    }
  
    .hud-rail-right > .rail-rule {
      margin: 1px 0 0;
    }
  
    .hud-rail-right .systems-heading {
      margin-top: 2px;
      margin-bottom: -3px;
    }
  
    .hud-rail-right .active-systems {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .hud-rail-right .active-empty {
      grid-column: 1 / -1;
    }
  
    .hud-rail-right button.active-system {
      min-height: 58px;
    }
  
    .hud-rail-right .field-effects {
      grid-template-columns: 1fr;
    }
  
    .touch-control-deck {
      grid-template-rows: 46px minmax(50px, 1fr);
      min-height: 104px;
    }
  
    .touch-control-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      pointer-events: auto;
    }
  
    .touch-control-head:has(.elevator-control:not([hidden])) > b {
      display: none;
    }
  
    .touch-control-head .elevator-control {
      min-width: 126px;
      min-height: 44px;
    }
  }
  
  @media (max-width: 390px) {
    .skill-card .card-copy {
      padding-right: 10px;
      padding-left: 10px;
    }
  
    .skill-card .card-actions {
      gap: 6px;
    }
  
    .skill-card .card-action,
    .skill-card .maxed-stamp {
      font-size: 9px;
      letter-spacing: 0.55px;
    }
  
    .hud-rail-right .active-systems {
      grid-template-columns: 1fr;
    }
  
    .touch-control-head {
      font-size: 8px;
      letter-spacing: 0.75px;
    }
  
    .touch-control-head .elevator-control {
      min-width: 122px;
      padding-right: 7px;
      padding-left: 7px;
      font-size: 6px;
    }
  }

/* Paddle Forge responsive bridge.
   Canonical phone layout owner: later responsive refinements remain together
   while older component baselines are progressively retired from game.css. */
/* Mobile board-first hierarchy + court-aware surrounding hardware. */
  :root {
    --court-bezel: #101815;
    --court-frame: #07100e;
    --court-frame-line: rgba(170, 200, 245, 0.18);
    --court-frame-shadow: rgba(2, 5, 12, 0.58);
    --touch-panel: #101815;
    --touch-track: #0a100e;
    --touch-border: rgba(230, 238, 252, 0.2);
    --touch-rail: rgba(230, 238, 252, 0.14);
  }
  
  html[data-theme="day"] {
    --touch-panel: #7a6a52;
    --touch-track: #645640;
    --touch-border: rgba(22, 18, 12, 0.32);
    --touch-rail: rgba(22, 18, 12, 0.2);
  }
  
  .mobile-run-strip { display: none; margin: 0; }
  .canvas-bezel {
    background: var(--court-bezel);
    box-shadow: 0 18px 55px var(--court-frame-shadow), 0 0 0 7px var(--court-frame), 0 0 0 8px var(--court-frame-line);
  }
  html[data-theme="day"] .canvas-bezel {
    box-shadow: 0 12px 28px var(--court-frame-shadow), 0 0 0 7px var(--court-frame), 0 0 0 8px var(--court-frame-line);
  }
  
  @media (max-width: 760px) {
    /* Game-first phone shell: no page scroll past the paddle track. */
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
  
    .topbar {
      border-bottom: 0;
    }
  
    .board-topline {
      min-height: 0;
      border-top: 0;
    }
  
    .app-shell {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      max-height: 100dvh;
      min-height: 0;
      overflow: hidden;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  
    .game-layout {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px 0;
      --mobile-strip-h: 48px;
      --mobile-paddle-h: 78px;
      --mobile-equip-h: 0px;
      --field-h: min(
        calc(100dvh - 57px - var(--mobile-strip-h) - var(--mobile-equip-h) - var(--mobile-paddle-h) - 36px),
        calc((100vw - 24px) * 5 / 4)
      );
      --field-w: min(100%, calc(var(--field-h) * 4 / 5));
    }
  
    body:is(
      [data-game-state="ready"],
      [data-game-state="playing"],
      [data-game-state="paused"],
      [data-game-state="levelClear"],
      [data-game-state="gameOver"],
      [data-game-state="victory"]
    ) .game-layout {
      --mobile-equip-h: 68px;
    }
  
    .board-column {
      order: 0;
      width: min(100%, var(--field-w));
      margin-inline: auto;
      flex: 0 1 auto;
      min-height: 0;
    }
  
    /* Reference rails stay on desktop; phone keeps only a slim equip strip above the paddle. */
    .hud-rail-left {
      display: none !important;
    }
  
    .hud-rail-right {
      order: 1;
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      gap: 4px;
      margin: 0;
      padding: 0;
      border: 0;
      flex: 0 0 auto;
    }
  
    body:is([data-game-state="title"], [data-game-state="courtTransition"]) .hud-rail-right {
      display: none !important;
    }
  
    .hud-rail-right .rail-kicker,
    .hud-rail-right .rail-rule,
    .hud-rail-right .card-behavior-group,
    .hud-rail-right .target-legend,
    .hud-rail-right .systems-heading,
    .hud-rail-right .survival-system,
    .hud-rail-right .control-legend,
    .hud-rail-right .pickup-legend {
      display: none !important;
    }
  
    .hud-rail-right .loadout-slots {
      grid-column: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
  
    .hud-rail-right .field-effects-group {
      display: none !important;
    }

    /* Timed fields ride the court — never grow the shell under the paddle. */
    .field-effects-court {
      position: absolute;
      left: 6px;
      right: 6px;
      top: 6px;
      z-index: 4;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      pointer-events: none;
    }

    .field-effects-court:empty,
    .field-effects-court[hidden] {
      display: none !important;
    }

    .field-effects-court .field-effect {
      display: grid;
      grid-template-columns: 20px minmax(0, auto);
      align-items: center;
      gap: 5px;
      min-height: 26px;
      padding: 4px 8px 4px 4px;
      border: 1px solid color-mix(in srgb, var(--effect-color, var(--mint)) 55%, transparent);
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .field-effects-court .field-effect > b {
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      color: #111916;
      background: var(--effect-color, var(--mint));
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .field-effects-court .field-effect > span {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .field-effects-court .field-effect strong {
      color: var(--cream);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.35px;
      white-space: nowrap;
    }

    .field-effects-court .field-effect small,
    .field-effects-court .field-timer {
      color: color-mix(in srgb, var(--effect-color, var(--mint)) 85%, var(--cream));
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.4px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .field-effects-court .field-effect i {
      display: block;
      width: 100%;
      height: 3px;
      margin-top: 1px;
      overflow: hidden;
      background: color-mix(in srgb, var(--effect-color, var(--mint)) 22%, transparent);
    }

    .field-effects-court .field-effect em {
      display: block;
      height: 100%;
      background: var(--effect-color, var(--mint));
    }
  
    .touch-control-deck {
      order: 2;
      flex: 0 0 auto;
      margin-top: 0;
    }
  
    .stat-stack { display: none; }
  
    .mobile-run-strip {
      display: grid;
      grid-template-columns: 0.7fr 1.35fr 0.85fr 0.85fr;
      min-height: 48px;
      margin: 0 0 8px;
      border: 0;
      background: var(--panel);
    }
    .mobile-run-strip > div {
      display: flex;
      min-width: 0;
      padding: 6px 10px;
      flex-direction: column;
      justify-content: center;
      border-right: 1px solid var(--line);
    }
    .mobile-run-strip > div:last-child { border-right: 0; }
    .mobile-run-strip dt {
      color: var(--cream-dim);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .mobile-run-strip dd {
      margin: 2px 0 0;
      overflow: hidden;
      color: var(--cream);
      font-family: var(--display);
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #mobileLivesValue { color: var(--coral); }
    #mobileComboValue { color: var(--amber-ink); }
    .canvas-bezel {
      width: 100%;
      height: var(--field-h);
      aspect-ratio: auto;
      border-width: 1px;
      box-shadow: 0 12px 35px var(--court-frame-shadow);
    }
    .loadout-stamp,
    .loadout-stamp.is-empty {
      padding: 2px 4px 1px;
      font-size: 7px;
      letter-spacing: 0.5px;
      transform: none;
    }
    .loadout-copy {
      padding-right: 0;
    }
    .touch-control-deck {
      border-color: var(--touch-border);
      background: linear-gradient(115deg, rgba(124, 241, 196, 0.07), transparent 34%), repeating-linear-gradient(120deg, transparent 0 20px, rgba(247, 239, 218, 0.025) 21px 22px), var(--touch-panel);
    }
    .touch-track {
      border-color: var(--touch-border);
      background: linear-gradient(90deg, rgba(255, 111, 97, 0.12), transparent 18% 82%, rgba(255, 111, 97, 0.12)), var(--touch-track);
    }
    .touch-track-rail { background: var(--touch-rail); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .mobile-run-strip, .canvas-bezel, .touch-control-deck, .touch-track { transition: none !important; }
  }
  
  /* DOM is board-first for phones; explicit desktop placement preserves the three-column rail hierarchy. */
  @media (min-width: 761px) {
    .hud-rail-left { grid-column: 1; grid-row: 1; }
    .board-column { grid-column: 2; grid-row: 1; }
    .hud-rail-right { grid-column: 3; grid-row: 1; }
    .touch-control-deck { display: none; }
  
    /* One quiet rail per desktop zone; color does the separating instead of stacked rules. */
    .rail-kicker {
      border-top-width: 1px;
      border-bottom: 0;
    }
    .board-topline {
      border-top-width: 1px;
    }
    html[data-theme] .hud-rail-left .rail-kicker {
      border-top-color: var(--amber);
    }
    html[data-theme] .board-topline {
      border-top-color: var(--mint);
    }
    html[data-theme] .hud-rail-right .rail-kicker {
      border-top-color: var(--coral);
    }
  }
  
  
  /* System Settings — one compact top-bar entry, one deliberate control panel. */
  .settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 112px;
  }
  
  .settings-glyph {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    align-items: end;
    gap: 2px;
    width: 13px;
    height: 14px;
  }
  
  .settings-glyph i { display: block; background: currentColor; }
  .settings-glyph i:nth-child(1) { height: 7px; }
  .settings-glyph i:nth-child(2) { height: 14px; }
  .settings-glyph i:nth-child(3) { height: 10px; }
  
  .settings-overlay {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  
  .settings-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .settings-shell {
    width: min(540px, 100%);
    max-height: min(760px, calc(100dvh - 40px));
    overflow: auto;
    border: 1px solid var(--line);
    border-top: 5px solid var(--amber);
    background:
      radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 25%),
      var(--graphite);
    box-shadow: 0 24px 74px var(--shadow);
    transform: translateY(10px) scale(.986);
    transition: transform 190ms cubic-bezier(.33, .1, .2, 1);
  }
  
  .settings-overlay.is-open .settings-shell { transform: none; }
  
  .settings-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 24px 26px 20px;
    border-bottom: 1px solid var(--line);
  }
  
  .settings-header p,
  .settings-header h1,
  .settings-header span { margin: 0; }
  .settings-header p { color: var(--amber-ink); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
  .settings-header h1 { margin-top: 5px; font-family: var(--display); font-size: 30px; letter-spacing: .5px; text-transform: uppercase; }
  .settings-header span { display: block; margin-top: 4px; color: var(--cream-dim); font-size: 10px; }
  
  .settings-body { display: grid; gap: 22px; padding: 24px 26px 27px; }
  .settings-control-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .settings-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--cream);
    text-align: left;
    cursor: pointer;
  }
  .settings-control > span { display: grid; gap: 5px; }
  .settings-control small { color: var(--cream-dim); font-size: 8px; letter-spacing: 1.8px; }
  .settings-control strong { font-family: var(--display); font-size: 17px; letter-spacing: 1px; }
  .settings-control > b { min-width: 42px; padding: 8px 6px; border: 1px solid var(--line); color: var(--mint); font-size: 9px; text-align: center; }
  .settings-control[aria-pressed="false"] > b { color: var(--cream-dim); text-decoration: line-through; }
  
  .settings-control.theme-toggle {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  
  .settings-control.theme-toggle > * {
    position: relative;
    z-index: 1;
  }
  
  .settings-control.theme-toggle::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 19px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 190, 255, .7) 0 12%, rgba(105, 135, 205, .26) 34%, transparent 68%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, -50%) scale(.45);
  }
  
  html[data-theme="day"] .settings-control.theme-toggle::before {
    background: radial-gradient(circle, rgba(255, 236, 176, .95) 0 12%, rgba(255, 188, 87, .34) 34%, transparent 68%);
  }
  
  html.theme-fading .settings-control.theme-toggle::before {
    animation: settings-theme-orb 420ms cubic-bezier(.33, .1, .2, 1) both;
  }
  
  html.theme-fading .settings-control.theme-toggle > span,
  html.theme-fading .settings-control.theme-toggle > b {
    animation: settings-theme-label 420ms cubic-bezier(.33, .1, .2, 1) both;
  }
  
  .settings-section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
  .settings-section-label span { color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }
  .settings-section-label b { color: var(--cream-dim); font-size: 8px; letter-spacing: 1.2px; }
  
  .settings-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 86%, transparent);
  }
  .settings-stat-grid div { min-width: 0; padding: 13px 10px; border-right: 1px solid var(--line); }
  .settings-stat-grid div:last-child { border-right: 0; }
  .settings-stat-grid dt { color: var(--cream-dim); font-size: 9px; letter-spacing: .7px; line-height: 1.35; }
  .settings-stat-grid dd { margin: 7px 0 0; color: var(--cream); font-family: var(--display); font-size: 18px; }
  
  /* Phone-only field guide — desktop keeps power-ups / target hits on the hangar rails. */
  .settings-field-guide {
    display: none;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  
  .settings-guide-note {
    margin: 0 0 12px;
    color: var(--cream-dim);
    font-size: 10px;
    line-height: 1.5;
  }
  
  .settings-guide-block {
    margin-top: 10px;
  }
  
  .settings-guide-block > span {
    display: block;
    margin-bottom: 6px;
    color: var(--mint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
  }
  
  .settings-pickup-items,
  .settings-target-items {
    display: grid;
    gap: 6px;
  }
  
  .settings-pickup-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .settings-pickup-items .pickup-family {
    grid-column: 1 / -1;
  }
  
  .settings-target-items {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
  
  @media (max-width: 760px) {
    .settings-field-guide {
      display: block;
    }
  }
  
  .settings-danger {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--coral) 42%, var(--line));
    background: color-mix(in srgb, var(--coral) 7%, var(--panel));
  }
  .settings-danger-idle,
  .reset-confirmation {
    min-height: 72px;
    padding: 13px 15px;
  }
  .settings-danger-idle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .settings-danger-idle > span { display: grid; gap: 5px; min-width: 0; }
  .settings-danger-idle small,
  .reset-confirmation p strong {
    color: var(--coral);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
  }
  .settings-danger-idle strong {
    color: var(--cream-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.45;
  }
  .settings-danger p { margin: 0; color: var(--cream-dim); font-size: 10px; line-height: 1.55; }
  .settings-danger-action,
  .settings-cancel-action {
    min-height: 34px;
    min-width: 42px;
    margin-top: 0;
    padding: 8px 10px;
    border: 1px solid var(--coral);
    background: transparent;
    color: var(--coral);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.1px;
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
  }
  .settings-danger-action.is-final { background: var(--coral); color: #111916; }
  .settings-cancel-action { border-color: var(--line); color: var(--cream); }
  .reset-confirmation { display: grid; align-content: center; gap: 10px; }
  .reset-confirmation p strong { display: block; margin-bottom: 4px; }
  .reset-confirmation > div { display: flex; flex-wrap: wrap; gap: 9px; }
  
  .settings-button:focus-visible,
  .settings-close:focus-visible,
  .panel-jump:focus-visible,
  .settings-control:focus-visible,
  .settings-danger-action:focus-visible,
  .settings-cancel-action:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
  }
  
  .flux-anchor-swatch::before {
    background:
      conic-gradient(from 90deg, rgba(255,255,255,.28) 0 25%, rgba(0,0,0,.24) 0 50%, rgba(255,255,255,.28) 0 75%, rgba(0,0,0,.24) 0) 0 0 / 8px 8px,
      var(--anchor-steel-dark);
  }
  .flux-anchor-swatch { box-shadow: 2px 3px 0 rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(244,169,62,.45); }
  
  .anchor-variant-key { position: relative; }
  .anchor-variant-key.is-current .anchor-swatch {
    border-color: var(--amber);
    box-shadow: 2px 3px 0 rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(244,169,62,.72), 0 0 0 1px rgba(244,169,62,.3);
  }
  .anchor-variant-key.is-current .anchor-state-marker {
    border-color: rgba(17,25,22,.58);
    background: var(--amber);
    color: #111916;
  }
  
  @keyframes settings-theme-orb {
    0% { opacity: 0; transform: translate(50%, -50%) scale(.4); }
    45% { opacity: .72; }
    100% { opacity: 0; transform: translate(25%, -50%) scale(1.45); }
  }
  
  @keyframes settings-theme-label {
    0% { opacity: .28; transform: translateY(5px); }
    55% { opacity: 1; transform: translateY(-1px); }
    100% { opacity: 1; transform: none; }
  }
  
  html[data-theme="day"] .settings-shell { background: var(--graphite); }
  
  @media (max-width: 760px) {
    .settings-button { min-width: 48px; padding: 0 8px; }
    .settings-button-label { display: none; }
    .settings-overlay { align-items: center; padding: 12px; }
    .settings-shell { width: min(100%, 540px); max-height: calc(100dvh - 24px); }
    .settings-header {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 12px;
      padding: 18px 16px 15px;
    }
    .settings-header .panel-header-actions { justify-self: end; }
    .settings-header h1 { font-size: 24px; }
    .settings-header span { font-size: 9px; }
    .settings-close { padding: 0 9px; }
    .settings-body { gap: 18px; padding: 18px 16px max(20px, env(safe-area-inset-bottom)); }
    /* Lifetime Record stays one row of four on phones — room is there. */
    .settings-stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .settings-stat-grid div {
      padding: 11px 6px;
    }
    .settings-stat-grid dt {
      font-size: 9px;
      letter-spacing: 0.55px;
    }
    .settings-stat-grid dd {
      margin-top: 6px;
      font-size: 16px;
    }
    .settings-control small {
      font-size: 9px;
    }
    .settings-danger-idle { gap: 10px; }
  }
  
  @media (max-width: 390px) {
    /* Sound + Chrome stay side by side; only the erase row wraps. */
    .settings-control-bank { grid-template-columns: 1fr 1fr; gap: 8px; }
    .settings-control { min-height: 58px; padding: 10px 8px; }
    .settings-control strong { font-size: 15px; }
    .settings-control > b { min-width: 36px; padding: 7px 4px; font-size: 8px; }
    .settings-stat-grid div { padding: 10px 4px; }
    .settings-stat-grid dt { font-size: 9px; letter-spacing: 0.3px; }
    .settings-stat-grid dd { font-size: 15px; }
    .settings-danger-idle {
      flex-wrap: wrap;
      align-items: flex-start;
    }
    .settings-danger-idle .settings-danger-action {
      margin-left: auto;
    }
    .reset-confirmation > div {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .settings-cancel-action,
    .settings-danger-action.is-final {
      width: 100%;
      min-height: 40px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .settings-overlay,
    .settings-shell,
    .settings-control.theme-toggle::before,
    .settings-control.theme-toggle > span,
    .settings-control.theme-toggle > b {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* ==========================================================================
     Phone title route + compact branch switchboard
     ========================================================================== */
  
  /* Skill Forge lives on the hangar title card (desktop + phone). */
  .title-panel .state-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  
  .title-panel .state-actions > .primary-action,
  .title-panel .state-actions > .secondary-action {
    width: 100%;
    min-width: 0;
  }
  
  .title-panel .state-actions > :last-child {
    grid-column: 1 / -1;
  }
  
  .title-forge-action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-color: color-mix(in srgb, var(--mint) 72%, #fff8ec);
    background: var(--mint);
    color: var(--ink-deep);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mint) 35%, transparent);
  }

  .title-forge-action .hangar-equip-marks {
    position: absolute;
    top: 7px;
    right: 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
  }

  .title-forge-action .hangar-equip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--branch-color) 78%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--branch-color) 35%, transparent);
    opacity: 0.9;
  }
  
  .title-forge-action:hover {
    border-color: color-mix(in srgb, var(--mint) 55%, #fff8ec);
    background: color-mix(in srgb, var(--mint) 78%, #fff8ec);
    color: var(--ink-deep);
  }
  
  .title-forge-action small {
    color: rgba(17, 25, 22, 0.72);
    opacity: 1;
  }
  
  /* FORGE-READY SIGNAL
     Something in the tree is affordable right now. Slow and low-contrast on
     purpose: an ambient "there is steel to spend", not an alarm. The hangar
     button and the affordable card buttons share one breath so the cue the
     player learns outside the Forge is the same cue they follow inside it. */
  [data-action="open-forge"].is-forge-ready {
    animation: forge-ready-breath 2.6s ease-in-out infinite;
  }
  
  @keyframes forge-ready-breath {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mint) 35%, transparent); }
    50% {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mint) 60%, transparent),
        0 0 16px color-mix(in srgb, var(--mint) 42%, transparent);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    /* Keep the meaning, drop the motion — a fixed lift instead of a breath. */
    [data-action="open-forge"].is-forge-ready {
      animation: none;
    }
  
    [data-action="open-forge"].is-forge-ready {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mint) 60%, transparent),
        0 0 14px color-mix(in srgb, var(--mint) 38%, transparent);
    }
  }
  
  /* A deliberate sealed ledger, not a dimmed mystery button. */
  .title-panel .achievement-placeholder[disabled] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 11px;
    border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
    background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 8%, transparent), rgba(0, 0, 0, 0.08));
    color: var(--cream-dim);
    text-align: left;
    opacity: 0.79;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 44%, transparent);
  }
  
  .title-panel .achievement-placeholder[disabled]:hover {
    border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
    background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 8%, transparent), rgba(0, 0, 0, 0.08));
  }
  
  .achievement-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--amber) 54%, var(--line));
    background: color-mix(in srgb, var(--amber) 13%, transparent);
    color: var(--amber2);
    font: 900 12px/1 var(--display);
  }
  
  .achievement-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
  }
  
  .achievement-copy strong {
    color: var(--cream);
    font: 900 10px/1 var(--display);
    letter-spacing: 0.9px;
  }
  
  .achievement-copy small {
    margin: 0;
    color: color-mix(in srgb, var(--amber2) 62%, var(--cream-dim));
    opacity: 1;
  }
  
  .achievement-seal {
    padding: 5px 7px;
    border: 1px dashed color-mix(in srgb, var(--amber) 42%, var(--line));
    color: color-mix(in srgb, var(--amber2) 62%, var(--cream-dim));
    font: 800 7px/1 var(--mono);
    letter-spacing: 1px;
  }
  
  .forge-shell {
    --forge-desk-bg: color-mix(in srgb, var(--forge-card-bg) 74%, var(--ink));
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    background: var(--ink);
    background-size: auto;
  }
  
  .forge-tabs {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 12px 31px 0;
    padding: 0 4px;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  
  .forge-tab {
    position: relative;
    display: flex;
    flex: 0 1 168px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 13px 8px 9px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--branch-color) 22%, var(--line));
    background: color-mix(in srgb, var(--forge-card-bg) 74%, var(--ink));
    color: var(--forge-card-mute);
    font: 900 10px/1 var(--display);
    letter-spacing: 1.1px;
    cursor: pointer;
    transform: translateY(0);
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }
  
  .forge-tab::before {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 43px;
    height: 3px;
    background: var(--branch-color);
    content: "";
    opacity: 0.72;
  }
  
  .forge-tab::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 3px;
    background: var(--forge-desk-bg);
    content: "";
    opacity: 0;
  }
  
  .forge-tab:hover {
    color: var(--forge-card-type);
    border-color: color-mix(in srgb, var(--branch-color) 58%, var(--line));
    background: color-mix(in srgb, var(--branch-color) 9%, var(--forge-card-bg));
    transform: translateY(-2px);
  }
  
  .forge-tab[aria-selected="true"] {
    z-index: 2;
    border-color: color-mix(in srgb, var(--branch-color) 58%, var(--line));
    border-bottom-color: var(--forge-desk-bg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--branch-color) 12%, var(--forge-desk-bg)), var(--forge-desk-bg));
    color: var(--forge-card-type);
    box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.15), inset 0 2px 0 color-mix(in srgb, var(--branch-color) 36%, transparent);
    transform: translateY(1px);
  }
  
  .forge-tab[aria-selected="true"]::after {
    opacity: 1;
  }
  
  .forge-tab:focus-visible {
    z-index: 1;
    outline: 2px solid var(--branch-color);
    outline-offset: -3px;
  }
  
  /* Same filled stamp as skill-card nodes — every branch tab gets one. */
  .forge-tab-code {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    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: 13px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
  }
  
  .forge-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Quiet occupancy tell — same language as rank pips, branch-tinted. */
  .forge-tab .equip-branch-pips {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding-left: 6px;
  }

  .forge-tab .equip-branch-pips i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--branch-color) 72%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--branch-color) 28%, transparent);
    opacity: 0.85;
  }

  .forge-tab.has-equipped:not([aria-selected="true"]) {
    border-color: color-mix(in srgb, var(--branch-color) 38%, var(--line));
  }

  .forge-tab.has-equipped .forge-tab-code {
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--branch-color) 40%, transparent);
  }
  
  .forge-shell .skill-tree.forge-desk {
    display: block;
    width: auto;
    margin: 0 31px 24px;
    padding: 18px 20px 33px;
    border: 1px solid color-mix(in srgb, var(--cream-dim) 20%, transparent);
    border-top-color: color-mix(in srgb, var(--cream-dim) 27%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 2%, transparent), transparent 70px), var(--forge-desk-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 -18px 34px rgba(0, 0, 0, 0.08), 0 13px 26px rgba(0, 0, 0, 0.14);
  }
  
  .forge-shell .skill-branch {
    width: 100%;
    margin: 0;
  }
  
  .forge-shell .skill-branch::before {
    display: none;
  }
  
  .forge-branch-docket {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--branch-color) 20%, var(--line));
    border-left: 3px solid var(--branch-color);
    background: color-mix(in srgb, var(--branch-color) 5%, rgba(0, 0, 0, 0.12));
  }
  
  .docket-label,
  .docket-count {
    color: color-mix(in srgb, var(--branch-color) 72%, var(--cream-dim));
    font: 900 7px/1 var(--mono);
    letter-spacing: 1.1px;
    white-space: nowrap;
  }
  
  .docket-count {
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, var(--branch-color) 25%, var(--line));
  }
  
  .forge-branch-docket .forge-branch-cue {
    margin: 0;
    color: var(--forge-card-dim);
    font-size: 10px;
  }
  
  .forge-branch-card-grid {
    --forge-gap: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--forge-gap);
  }
  
  .forge-branch-card-grid > .forge-card-slot > article.skill-card {
    margin-top: 0;
  }
  
  /* TIER RAIL
     Reads the tree the way you have to walk it: across the row, then down to the
     next. Pong's centre line is the reference — square dashes and a square ball
     for the head, never a drawn triangle. The rail is dim until the card it
     points at is actually reachable, so an unlit rail means "not yet". */
  .forge-card-slot {
    --rail-dim: color-mix(in srgb, var(--branch-color, #7cf1c4) 26%, transparent);
    --rail-lit: color-mix(in srgb, var(--branch-color, #7cf1c4) 88%, transparent);
    --rail-out: var(--rail-dim);
    --rail-in: var(--rail-dim);
    position: relative;
    min-width: 0;
  }
  
  .forge-card-slot.is-open { --rail-out: var(--rail-lit); }
  .forge-card-slot.is-entered { --rail-in: var(--rail-lit); }
  
  .forge-card-slot::before,
  .forge-card-slot::after {
    position: absolute;
    z-index: 2;
    display: none;
    content: "";
    pointer-events: none;
  }
  
  /* Across: rail spans the column gap, ball lands against the next card. */
  .forge-card-slot::after {
    top: 68px;
    right: calc(var(--forge-gap) * -1);
    width: var(--forge-gap);
    height: 6px;
    background:
      linear-gradient(var(--rail-out), var(--rail-out)) 100% 50% / 6px 6px no-repeat,
      repeating-linear-gradient(90deg, var(--rail-out) 0 3px, transparent 3px 7px) 0 50% / 100% 2px no-repeat;
  }
  
  /* Down: rail drops through the row gap into the first card of the next row. */
  .forge-card-slot::before {
    top: calc(var(--forge-gap) * -1);
    left: 30px;
    width: 6px;
    height: var(--forge-gap);
    background:
      linear-gradient(var(--rail-in), var(--rail-in)) 50% 100% / 6px 6px no-repeat,
      repeating-linear-gradient(180deg, var(--rail-in) 0 3px, transparent 3px 7px) 50% 0 / 2px 100% no-repeat;
  }
  
  /* Which rails show depends on where rows break, so each column count owns its
     own rule at its own width. Non-overlapping ranges on purpose — an unscoped
     base rule here would outrank the narrower overrides and strand a rail
     pointing off the end of a row. */
  @media (min-width: 901px) {
    /* Three columns: across unless the slot ends a row, drop into each row start. */
    .forge-branch-card-grid:not(.mastery-card-grid) > .forge-card-slot:not(:nth-child(3n)):not(:last-child)::after,
    .forge-branch-card-grid:not(.mastery-card-grid) > .forge-card-slot:nth-child(3n + 1):not(:first-child)::before {
      display: block;
    }
  }
  
  @media (min-width: 521px) and (max-width: 900px) {
    /* Two columns: rows break one card earlier. */
    .forge-branch-card-grid:not(.mastery-card-grid) > .forge-card-slot:not(:nth-child(2n)):not(:last-child)::after,
    .forge-branch-card-grid:not(.mastery-card-grid) > .forge-card-slot:nth-child(2n + 1):not(:first-child)::before {
      display: block;
    }
  }
  
  @media (max-width: 520px) {
    /* One column: the walk is purely downward, so every rail is a drop. */
    .forge-branch-card-grid:not(.mastery-card-grid) > .forge-card-slot:not(:first-child)::before {
      display: block;
    }
  }
  
  .mastery-card-grid {
    margin-top: 10px;
  }
  
  .mastery-card-grid > article.skill-card.mastery-card {
    width: 100%;
    margin-left: 0;
  }
  
  .mastery-card-grid > article.skill-card.mastery-card::before {
    display: none;
  }
  
  .forge-shell .mastery-gate {
    margin-left: 0;
  }
  
  @media (max-width: 900px) {
    .forge-branch-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 760px) {
    .mobile-run-strip > div {
      padding-right: 7px;
      padding-left: 7px;
    }
  
    .mobile-run-strip dt {
      color: color-mix(in srgb, var(--cream-dim) 78%, transparent);
      font-size: 9px;
      letter-spacing: 0.8px;
    }
  
    .mobile-run-strip dd {
      font-size: 21px;
    }
  
    #mobileLivesValue {
      color: var(--coral);
    }
  
    #mobileScoreValue {
      color: var(--amber-ink);
    }
  
    #mobileComboValue {
      color: var(--mint);
    }
  
    #mobileHighComboValue {
      color: var(--steel);
    }
  
    /* Left rail + legend chrome stay desktop-only; phone uses the slim equip strip. */
    .hud-rail-right {
      row-gap: 6px;
      margin: 0;
      padding: 0;
      border: 0;
    }
  
    .hud-rail-right .system-readout {
      margin-top: 0;
      margin-bottom: 0;
    }
  
    .forge-tabs {
      position: relative;
      z-index: 4;
      margin: 10px 13px 0;
      padding: 0 2px;
      gap: 4px;
    }
  
    .forge-tab {
      flex: 1 1 0;
      min-height: 45px;
      padding: 6px;
      gap: 5px;
      font-size: 9px;
      letter-spacing: 0.55px;
    }
  
    .forge-tab-code {
      width: 26px;
      height: 26px;
      font-size: 12px;
    }
  
    .forge-shell .skill-tree.forge-desk {
      display: block;
      width: auto;
      margin: 0 13px 14px;
      padding: 14px 12px 22px;
    }
  
    .forge-branch-docket {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 10px;
      margin-bottom: 12px;
    }
  
    .forge-branch-docket .forge-branch-cue {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  
    .docket-count {
      padding-left: 8px;
    }
  }
  
  @media (max-width: 520px) {
    .forge-branch-card-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  
    /* Phone: the label takes its own row and the key becomes an aligned grid, so
       the five states sit in columns instead of ragged-wrapping one orphan. */
    .forge-legend-label {
      flex-basis: 100%;
      padding-right: 0;
      padding-bottom: 9px;
      border-right: 0;
      border-bottom: 1px solid rgba(247, 239, 218, 0.16);
    }
  
    .forge-legend {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 9px 12px;
    }
  
    /* Keep Start Run + Skill Forge on one row so Achievements rides up under them. */
    .title-panel .state-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
  
    .title-panel .state-actions > .primary-action,
    .title-panel .state-actions > .title-forge-action {
      min-height: 46px;
      padding-right: 8px;
      padding-left: 8px;
      font-size: 11px;
    }
  
    .title-panel .state-actions > .title-forge-action small {
      font-size: 8px;
    }
  
    .title-panel .state-actions > :last-child {
      grid-column: 1 / -1;
    }
  
    .title-panel .achievement-placeholder[disabled] {
      min-height: 48px;
      gap: 8px;
      padding: 7px 9px;
    }
  
    .achievement-seal {
      padding-right: 5px;
      padding-left: 5px;
      letter-spacing: 0.7px;
    }
  }
  
  @media (max-width: 390px) {
    /* Four branch folders share one phone row — trim the stamp and type, keep all labels. */
    .forge-tabs {
      margin-right: 10px;
      margin-left: 10px;
      gap: 3px;
    }
  
    .forge-tab {
      padding: 5px 4px;
      gap: 3px;
      font-size: 9px;
      letter-spacing: 0.3px;
    }
  
    .forge-tab-code {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
  
    .mobile-run-strip {
      grid-template-columns: 0.72fr 1.32fr 0.92fr 0.84fr;
    }
  
    .mobile-run-strip > div {
      padding-right: 5px;
      padding-left: 5px;
    }
  
    .mobile-run-strip dt {
      font-size: 9px;
      letter-spacing: 0.55px;
    }
  
    .mobile-run-strip dd {
      font-size: 19px;
    }
  }
  
  /* EQUIPPED DECK
     The three slots are the only card controls: passive cards read as fixed
     hardware; trigger cards are live switches with one status rail. */
  button.loadout-card {
    width: 100%;
    border-top: 1px solid color-mix(in srgb, var(--system-color, var(--branch-color)) 28%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--system-color, var(--branch-color)) 20%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--system-color, var(--branch-color)) 20%, transparent);
    color: var(--cream);
    font: inherit;
    text-align: left;
  }
  
  .loadout-card.is-trigger-card {
    min-height: 76px;
    border-left-color: var(--system-color);
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--system-color) 10%, transparent), transparent 52%),
      var(--panel);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
  }
  
  .loadout-card.is-trigger-card:hover,
  .loadout-card.is-trigger-card:focus-visible {
    border-color: color-mix(in srgb, var(--system-color) 76%, var(--cream));
    outline: 2px solid color-mix(in srgb, var(--system-color) 74%, transparent);
    outline-offset: 2px;
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--system-color) 18%, transparent), transparent 58%),
      color-mix(in srgb, var(--panel) 92%, var(--system-color));
  }
  
  .loadout-card.is-trigger-card:active {
    transform: translateY(1px);
  }
  
  .loadout-card.is-trigger-card.is-cooling {
    filter: saturate(.72);
  }
  
  .loadout-card.is-trigger-card.is-ready {
    /* Armed = mint for every trigger (Plasma included) — not identity/danger red. */
    --system-color: var(--mint);
    border-color: color-mix(in srgb, var(--mint) 58%, var(--line));
    animation: deck-trigger-ready 2.4s ease-in-out infinite;
  }
  
  .loadout-card.is-trigger-card.is-ready .loadout-mode {
    text-shadow: 0 0 10px color-mix(in srgb, var(--system-color) 42%, transparent);
  }
  
  .loadout-card.is-trigger-card.is-ready .loadout-node {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--system-color) 40%, transparent),
      0 0 10px color-mix(in srgb, var(--system-color) 36%, transparent);
  }
  
  .loadout-card.is-trigger-card.is-ready .loadout-progress em {
    box-shadow: 0 0 10px color-mix(in srgb, var(--system-color) 70%, transparent);
  }
  
  .loadout-card.is-trigger-card.is-active {
    border-color: var(--system-color);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--system-color) 62%, transparent),
      0 0 13px color-mix(in srgb, var(--system-color) 22%, transparent);
    animation: deck-trigger-live 1.6s ease-in-out infinite;
  }
  
  .loadout-card.is-trigger-card[aria-disabled="true"] {
    opacity: .78;
  }
  
  .loadout-mode {
    color: var(--system-color, var(--branch-color)) !important;
    font: 800 7px/1.2 var(--mono);
    letter-spacing: .65px;
  }
  
  .loadout-progress {
    display: block;
    height: 4px;
    margin-top: 5px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--system-color) 24%, transparent);
    background: rgba(247, 239, 218, .06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38);
  }
  
  .loadout-progress em {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--system-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--system-color) 60%, transparent);
    transition: width 90ms linear;
  }
  
  .deck-info {
    min-width: 0;
  }
  
  .card-behavior {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--steel-dark) 66%, transparent);
    border-left: 2px solid var(--mint);
    background: rgba(23, 33, 29, .56);
  }
  
  .card-behavior > span {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 7px 6px;
  }
  
  .card-behavior > span + span {
    border-left: 1px solid color-mix(in srgb, var(--steel-dark) 62%, transparent);
  }
  
  .card-behavior b,
  .card-behavior small {
    overflow: hidden;
    font: 800 8px/1.2 var(--mono);
    letter-spacing: .6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .card-behavior b {
    color: var(--cream);
  }
  
  .card-behavior small {
    color: var(--steel);
    font-size: 7px;
  }
  
  html[data-theme="day"] .card-behavior {
    background: rgba(20, 28, 40, .08);
  }
  
  @keyframes deck-trigger-live {
    0%, 100% { background-color: transparent; }
    50% { background-color: color-mix(in srgb, var(--system-color) 9%, transparent); }
  }
  
  @keyframes deck-trigger-ready {
    0%, 100% {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--system-color) 18%, transparent),
        0 0 6px color-mix(in srgb, var(--system-color) 10%, transparent);
      filter: brightness(1);
    }
    50% {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--system-color) 42%, transparent),
        0 0 14px color-mix(in srgb, var(--system-color) 26%, transparent);
      filter: brightness(1.05);
    }
  }
  
  @media (max-width: 760px) {
    .hud-rail-right > .card-behavior-group {
      grid-column: 1;
    }
  
    .hud-rail-right > .field-effects-group {
      grid-column: 2;
    }
  
    .hud-rail-right .deck-info {
      align-self: start;
    }
  
    .hud-rail-right .deck-info .systems-heading {
      margin: 0 0 5px;
    }
  
    .hud-rail-right .deck-info .field-effects {
      grid-template-columns: minmax(0, 1fr);
    }
  
    .loadout-card,
    .loadout-empty,
    .loadout-card.is-trigger-card {
      min-width: 0;
      min-height: 80px;
      padding: 10px 6px 7px;
      gap: 5px 6px;
    }
  
    .loadout-copy {
      padding-right: 0;
    }
  
    .loadout-copy b {
      overflow: hidden;
      font-size: 9px;
      line-height: 1.25;
      text-overflow: ellipsis;
    }
  
    .loadout-card:not(.is-trigger-card) .loadout-copy > span:not(.loadout-mode) {
      display: none;
    }
  
    .loadout-stamp {
      font-size: 7px;
      letter-spacing: .45px;
      transform: none;
    }
  
    .loadout-mode {
      margin-top: 3px !important;
      font-size: 8px;
      letter-spacing: .35px;
      white-space: nowrap;
    }
  
    .loadout-progress {
      margin-top: 4px;
    }
  
    .card-behavior {
      grid-template-columns: minmax(0, 1fr);
    }
  
    .card-behavior > span + span {
      border-top: 1px solid color-mix(in srgb, var(--steel-dark) 62%, transparent);
      border-left: 0;
    }
  
    .card-behavior > span {
      padding: 6px;
    }
  }
  
  @media (max-width: 390px) {
    .hud-rail-right .loadout-slots {
      gap: 5px;
    }
  
    .loadout-card,
    .loadout-empty,
    .loadout-card.is-trigger-card {
      min-height: 78px;
      padding-right: 5px;
      padding-left: 5px;
    }
  
    .loadout-copy b {
      font-size: 9px;
      letter-spacing: .25px;
    }
  
    .loadout-node {
      min-width: 19px;
      max-width: 48px;
      min-height: 19px;
      font-size: 7px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .loadout-card.is-trigger-card,
    .loadout-card.is-trigger-card.is-ready,
    .loadout-card.is-trigger-card.is-active,
    .loadout-progress em {
      animation: none;
      transition: none;
    }
  
    .loadout-card.is-trigger-card.is-ready {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--system-color) 34%, transparent),
        0 0 8px color-mix(in srgb, var(--system-color) 16%, transparent);
    }
  }
  
  /* PHONE RUN CONSOLE + HELD RUN MANIFEST
     One full-width steering rail owns movement; the fixed action bay never
     reflows the console heading or changes the court gesture surface.
     Deck height vars must match the sticky bottom chrome in LIVE PHONE COURT. */
  @media (max-width: 760px) {
    .game-layout {
      --mobile-paddle-h: 118px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .game-layout {
      --mobile-equip-h: 44px;
      --mobile-paddle-h: 102px;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .game-layout:has(.touch-control-deck.is-lift-pad) {
      --mobile-paddle-h: 148px;
    }
  
    body:not(:is([data-game-state="ready"], [data-game-state="playing"], [data-game-state="paused"])) .touch-control-deck {
      display: none;
    }

    /* Board clear / victory — free the court so the result card can breathe. */
    body:is([data-game-state="levelClear"], [data-game-state="victory"], [data-game-state="gameOver"]) .hud-rail-right {
      display: none !important;
    }

    body:is([data-game-state="levelClear"], [data-game-state="victory"], [data-game-state="gameOver"]) .game-layout {
      --mobile-equip-h: 0px;
      --mobile-paddle-h: 0px;
    }

    .state-panel.clear-stamp,
    .state-panel.clear-results-panel,
    .state-panel.miss-ack-panel {
      width: min(100%, 420px);
      max-width: 100%;
      padding: 20px 16px 16px;
      border-top-width: 2px;
      box-shadow: 6px 7px 0 var(--shadow);
    }

    .state-panel.clear-stamp h2,
    .state-panel.clear-results-panel h2,
    .state-panel.miss-ack-panel h2 {
      font-size: 30px;
    }

    .state-panel.clear-stamp .state-kicker,
    .state-panel.clear-results-panel .state-kicker,
    .state-panel.miss-ack-panel .state-kicker {
      font-size: 11px;
    }

    .state-panel.clear-stamp .state-copy,
    .state-panel.clear-results-panel .state-copy,
    .state-panel.miss-ack-panel .state-copy {
      font-size: 12px;
      line-height: 1.45;
    }

    .clear-results-panel .clear-stat-rack {
      margin-top: 14px;
      gap: 6px;
    }

    .clear-results-panel .clear-stat {
      padding: 9px 7px;
    }

    .clear-results-panel .clear-stat span {
      font-size: 9px;
    }

    .clear-results-panel .clear-stat strong {
      font-size: 16px;
    }
  
    .touch-control-deck {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 116px;
      margin: 0;
      padding: 0 7px 7px;
      align-self: stretch;
      grid-template-rows: 18px 44px 44px;
      gap: 3px;
    }
  
    .touch-control-head {
      display: flex;
      gap: 8px;
      font-size: 8px;
      letter-spacing: .85px;
    }
  
    .touch-track {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 44px;
    }
  
    .touch-track-rail {
      right: 9px;
      left: 9px;
    }
  
    .touch-action-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      min-width: 0;
    }
  
    .touch-action-strip:has(.elevator-control:not([hidden])) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  
    .touch-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 44px;
      padding: 4px 7px;
      border: 1px solid currentColor;
      background: color-mix(in srgb, var(--panel) 92%, currentColor);
      color: var(--mint);
      font: 900 9px/1 var(--display);
      letter-spacing: .8px;
      text-align: center;
      cursor: pointer;
    }
  
    .touch-action[hidden] {
      display: none;
    }
  
    .touch-serve-action {
      color: var(--amber-ink);
    }
  
    .touch-pause-action {
      color: var(--mint);
    }
  
    .touch-action:hover:not(:disabled),
    .touch-action:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      box-shadow: inset 3px 0 0 currentColor;
    }
  
    .touch-action:disabled {
      cursor: default;
      opacity: .4;
      filter: saturate(.45);
    }
  
    .touch-action-strip .elevator-control {
      display: inline-flex;
      min-width: 0;
      min-height: 44px;
      padding: 4px 5px;
      flex-direction: column;
      gap: 3px;
      border-color: var(--mint);
      background: color-mix(in srgb, var(--panel) 92%, var(--mint));
      color: var(--mint);
      font: 900 8px/1 var(--display);
      letter-spacing: .55px;
    }
  
    .touch-action-strip .elevator-control[hidden] {
      display: none;
    }
  
    .touch-action-strip .elevator-control small {
      color: var(--cream-dim);
      font: 800 7px/1 var(--mono);
      letter-spacing: .35px;
    }
  
    /* Stamp over node on the right; copy keeps the full title lane. */
    .loadout-card,
    .loadout-empty,
    .loadout-card.is-trigger-card {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: minmax(46px, 1fr);
      min-height: 76px;
      padding: 5px;
      gap: 4px 6px;
    }

    .loadout-meta {
      align-self: stretch;
      justify-content: flex-start;
      gap: 4px;
    }
  
    .loadout-stamp,
    .loadout-stamp.is-empty {
      padding: 2px 3px 1px;
      font-size: 7px;
      line-height: 1;
      transform: none;
    }
  
    .loadout-node {
      min-width: 19px;
      max-width: 48px;
      min-height: 19px;
      font-size: 7px;
    }
  
    .loadout-copy {
      display: grid;
      min-width: 0;
      padding: 0;
      align-content: start;
      gap: 2px;
    }
  
    .loadout-copy b {
      display: -webkit-box;
      min-height: 20px;
      overflow: hidden;
      font-size: 9px;
      line-height: 1.25;
      letter-spacing: .2px;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  
    .loadout-copy em {
      font-size: 7px;
    }
  
    .loadout-mode {
      min-width: 0;
      margin-top: 0 !important;
      overflow: hidden;
      font-size: 8px;
      letter-spacing: .2px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  
    .loadout-progress {
      height: 4px;
      margin-top: 0;
    }
  
    .hud-rail-right > .field-effects-group {
      grid-column: 1;
    }
  
    body[data-game-state="paused"] .game-layout {
      --mobile-equip-h: 0px;
      --mobile-paddle-h: 0px;
    }
  
    body[data-game-state="paused"] .hud-rail-right {
      display: none !important;
    }
  
    body[data-game-state="paused"] .touch-control-deck {
      display: none !important;
    }
  }
  
  .state-panel.pause-panel {
    max-height: calc(100% - 8px);
    padding: 20px 22px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top-color: var(--mint);
    scrollbar-width: thin;
    scrollbar-color: var(--mint) var(--panel);
  }
  
  .pause-panel .state-kicker {
    margin-bottom: 7px;
    color: var(--mint);
  }
  
  .pause-panel .state-copy {
    margin-top: 9px;
  }
  
  .pause-status-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 12px;
    background: var(--line);
  }
  
  .pause-status-rack > div {
    min-width: 0;
    padding: 7px 8px;
    background: var(--panel);
  }
  
  .pause-status-rack .pause-board-status {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  
  .pause-status-rack span,
  .pause-manifest-section > span {
    color: var(--cream-dim);
    font: 800 7px/1.2 var(--mono);
    letter-spacing: .8px;
  }
  
  .pause-status-rack strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--cream);
    font: 900 13px/1 var(--display);
    letter-spacing: .5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pause-status-rack .pause-now {
    color: var(--cream);
    font: inherit;
  }

  .pause-status-rack .pause-best {
    color: color-mix(in srgb, var(--amber) 72%, var(--cream-dim));
    font: 800 11px/1 var(--mono);
    letter-spacing: 0.4px;
  }

  .pause-status-rack .pause-sep {
    color: var(--cream-dim);
    font: 700 11px/1 var(--mono);
    font-style: normal;
  }
  
  .pause-status-rack .pause-board-status strong {
    margin-top: 0;
    color: var(--amber-ink);
    font-size: 10px;
  }
  
  .pause-manifest-section {
    margin-top: 9px;
  }
  
  .pause-deck-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 4px;
  }
  
  .pause-deck-chip {
    display: grid;
    min-width: 0;
    min-height: 35px;
    padding: 5px;
    align-content: center;
    gap: 3px;
    border-left: 2px solid var(--chip-color);
    background: var(--panel);
  }
  
  .pause-deck-chip b,
  .pause-deck-chip small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .pause-deck-chip b {
    color: var(--cream);
    font: 900 7px/1.15 var(--display);
    white-space: normal;
  }
  
  .pause-deck-chip small {
    color: var(--chip-color);
    font: 800 6px/1 var(--mono);
    white-space: nowrap;
  }
  
  .pause-field-rack {
    display: flex;
    min-height: 27px;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .pause-field-chip {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    padding: 5px 6px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  
  .pause-field-chip b,
  .pause-field-chip span,
  .pause-field-chip small,
  .pause-manifest-empty {
    font: 800 6px/1 var(--mono);
    letter-spacing: .35px;
  }
  
  .pause-field-chip b,
  .pause-field-chip small {
    color: var(--mint);
  }
  
  .pause-field-chip span {
    min-width: 0;
    overflow: hidden;
    color: var(--cream);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .pause-manifest-empty {
    display: flex;
    width: 100%;
    min-height: 27px;
    padding: 5px 7px;
    align-items: center;
    border: 1px dashed var(--steel-dark);
    color: var(--steel);
  }
  
  .pause-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }
  
  .pause-actions .primary-action {
    grid-column: 1 / -1;
  }
  
  .pause-actions .primary-action,
  .pause-actions .secondary-action {
    width: 100%;
  }
  
  @media (max-width: 760px) {
    .state-overlay:has(.pause-panel) {
      padding: 8px;
      overflow-y: hidden;
    }
  
    .state-panel.pause-panel {
      padding: 11px 12px 10px;
      box-shadow: 8px 8px 0 var(--shadow);
    }
  
    .pause-panel h2 {
      font-size: 24px;
    }
  
    .pause-panel .state-copy {
      margin-top: 5px;
      font-size: 9px;
      line-height: 1.35;
    }
  
    .pause-status-rack {
      margin-top: 7px;
    }
  
    .pause-status-rack > div {
      padding: 5px 6px;
    }
  
    .pause-actions .primary-action,
    .pause-actions .secondary-action {
      min-height: 40px;
      font-size: 9px;
    }
  }
  
  @media (max-width: 390px) {
    .touch-action {
      padding-right: 4px;
      padding-left: 4px;
      font-size: 7px;
      letter-spacing: .45px;
    }
  
    .touch-action-strip .elevator-control {
      min-width: 0;
      padding-right: 3px;
      padding-left: 3px;
      font-size: 6px;
      letter-spacing: .25px;
    }
  }
  
  @media (max-width: 760px) {
    /* A briefing clears the live runway. Once its panel leaves the overlay,
       ordinary ready-state equipment and controls return without JS toggles. */
    .game-layout:has(.state-overlay .brief-panel) {
      --mobile-equip-h: 0px;
      --mobile-paddle-h: 0px;
    }
  
    .game-layout:has(.state-overlay .brief-panel) .hud-rail-right,
    .game-layout:has(.state-overlay .brief-panel) .touch-control-deck {
      display: none !important;
    }
  
    .state-overlay:has(.brief-panel) {
      padding: 8px;
      align-content: center;
      overflow: hidden;
    }
  
    .state-panel.brief-panel {
      box-sizing: border-box;
      max-height: 100%;
      padding: 14px 16px 13px;
      overflow: hidden;
      box-shadow: 8px 8px 0 var(--shadow);
    }
  
    .brief-panel .state-kicker {
      margin-bottom: 7px;
      font-size: 8px;
    }
  
    .brief-panel h2 {
      font-size: 25px;
    }
  
    .brief-panel .brief-lesson {
      margin-top: 6px;
      font-size: 8px;
    }
  
    .brief-panel .state-copy {
      margin-top: 9px;
      font-size: 10px;
      line-height: 1.4;
    }
  
    .brief-panel .brief-grid {
      margin-top: 10px;
    }
  
    .brief-panel .brief-grid > div {
      padding: 6px 5px;
    }
  
    .brief-panel .brief-grid strong {
      margin-top: 2px;
      font-size: 14px;
    }
  
    .brief-panel .serve-brief {
      margin-top: 8px;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .7px;
    }
  
    .brief-panel .state-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: 10px;
    }
  
    .brief-panel .state-actions > button {
      width: 100%;
    }
  }
  
  /* The 320×568 safety seam keeps the full manifest and all three actions in
     the initial overlay viewport; action targets retain their 40px minimum. */
  @media (max-width: 760px) and (max-height: 620px) {
    .state-panel.pause-panel {
      max-height: 100%;
      padding: 8px 9px 7px;
      box-shadow: 5px 5px 0 var(--shadow);
    }
  
    .pause-panel .state-kicker {
      margin-bottom: 3px;
      font-size: 8px;
    }
  
    .pause-panel h2 {
      font-size: 21px;
    }
  
    .pause-panel .state-copy {
      margin-top: 3px;
      font-size: 8px;
      line-height: 1.2;
    }
  
    .pause-status-rack {
      margin-top: 4px;
    }
  
    .pause-status-rack > div {
      padding: 3px 5px;
    }
  
    .pause-status-rack .pause-board-status strong {
      font-size: 9px;
    }
  
    .pause-manifest-section {
      margin-top: 6px;
    }
  
    .pause-deck-rack,
    .pause-field-rack {
      margin-top: 2px;
    }
  
    .pause-deck-chip {
      min-height: 29px;
      padding: 3px 4px;
    }
  
    .pause-field-rack,
    .pause-manifest-empty {
      min-height: 23px;
    }
  
    .pause-field-chip,
    .pause-manifest-empty {
      padding-top: 3px;
      padding-bottom: 3px;
    }
  
    .pause-actions {
      gap: 5px;
      margin-top: 5px;
      padding-bottom: 2px;
    }
  }
  /* LIVE PHONE COURT BUDGET
     Sticky chrome: run strip stays at the top of the board, action deck stays
     on the bottom of the shell. Court height is leftover space — never a magic
     px budget that forgets Elevator’s taller pad. */
  @media (max-width: 760px) {
    body:is([data-game-state="ready"], [data-game-state="playing"]) .topbar {
      display: none;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .app-shell {
      padding-top: 0;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .game-layout {
      gap: 3px;
      padding-top: max(12px, env(safe-area-inset-top));
      --mobile-equip-h: 44px;
      --mobile-paddle-h: 102px;
      --mobile-topline-h: 28px;
      --mobile-run-gaps: 22px;
      --mobile-top-air: max(12px, env(safe-area-inset-top));
      --field-h: min(
        calc(
          100dvh
          - var(--mobile-topline-h)
          - var(--mobile-strip-h)
          - var(--mobile-equip-h)
          - var(--mobile-paddle-h)
          - var(--mobile-run-gaps)
          - var(--mobile-top-air)
          - max(8px, env(safe-area-inset-bottom))
        ),
        calc((100vw - 24px) * 5 / 4)
      );
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .game-layout:has(.touch-control-deck.is-lift-pad) {
      --mobile-paddle-h: 148px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .board-column {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .board-topline {
      flex: 0 0 auto;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .mobile-run-strip {
      position: relative;
      z-index: 6;
      flex: 0 0 auto;
      margin-bottom: 4px;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .canvas-bezel {
      flex: 0 1 auto;
      min-height: 0;
      max-height: 100%;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .hud-rail-right {
      gap: 2px;
      order: 1;
      flex: 0 0 auto;
      margin-top: auto;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .hud-rail-right .loadout-slots {
      height: 44px;
      min-height: 44px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) :is(
      .loadout-card,
      .loadout-empty,
      .loadout-card.is-trigger-card
    ) {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: 1fr;
      height: 44px;
      min-height: 44px;
      padding: 3px 4px;
      gap: 4px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-stamp,
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-stamp.is-empty {
      display: none;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-meta {
      align-self: center;
      gap: 0;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-node {
      min-width: 18px;
      max-width: 44px;
      min-height: 18px;
      font-size: 7px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-copy {
      display: grid;
      min-width: 0;
      padding: 0;
      align-content: center;
      gap: 1px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-copy b {
      display: block;
      min-height: 0;
      overflow: hidden;
      font-size: 11px;
      line-height: 1.15;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: unset;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-copy em {
      display: none;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-card:not(.is-trigger-card) .loadout-copy > span:not(.loadout-mode),
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-empty .loadout-copy > span {
      display: none;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-mode {
      margin: 0 !important;
      font-size: 10px;
      line-height: 1.1;
      letter-spacing: 0;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .loadout-progress {
      height: 3px;
      margin: 1px 0 0;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .touch-control-deck {
      position: sticky;
      bottom: 0;
      z-index: 6;
      order: 2;
      flex: 0 0 auto;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      margin-top: 0;
      padding: 0 7px 6px;
      /* Track flexible-but-capped; action strip is a fixed last row — never clipped. */
      grid-template-rows: minmax(44px, 46px) 46px;
      gap: 4px;
      overflow: visible;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .touch-control-deck.is-lift-pad {
      /* Cap the 2D pad so SERVE / PAUSE / FLOOR stay on-screen on short phones. */
      grid-template-rows: minmax(64px, 88px) 46px;
    }

    body:is([data-game-state="ready"], [data-game-state="playing"]) .touch-action-strip {
      align-self: stretch;
      min-height: 46px;
    }
  
    body:is([data-game-state="ready"], [data-game-state="playing"]) .touch-control-head {
      display: none;
    }
  }


/* Card behavior dossier: four concepts, no extra live-phone height (the group is
   already hidden during active phone play and remains available inside Forge). */
.card-behavior > span {
  grid-template-columns: 10px minmax(0, 1fr);
}

.card-behavior > span::before {
  grid-row: 1 / span 2;
  align-self: center;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  content: "";
}

.card-behavior > span:nth-child(n + 3) {
  border-top: 1px solid color-mix(in srgb, var(--steel-dark) 62%, transparent);
}

.card-behavior > span:nth-child(odd) {
  border-left: 0;
}

.card-behavior b,
.card-behavior small {
  grid-column: 2;
}

.card-behavior [data-behavior="drop"] { color: var(--amber); }
.card-behavior [data-behavior="card"] { color: var(--mint); }
.card-behavior [data-behavior="passive"] { color: #8bd5ff; }
.card-behavior [data-behavior="trigger"] { color: var(--coral); }