/* Paddle Forge: Forge, card, and deck component ownership. */
/* ========================================================================== 
     Ranked Card Forge + live systems layer
     Kept here, after the core skin, so card progression reads as one interface.
     ========================================================================== */
  
  @media (min-width: 761px) {
    .app-shell {
      padding-bottom: 22px;
    }
  
    .game-layout {
      --board-labels: 28px;
    }
  }
  
  html[data-theme="day"] .icon-button {
    background: color-mix(in srgb, var(--panel) 88%, #fff);
    border-color: rgba(12, 18, 28, 0.38);
    color: var(--cream);
  }
  
  html[data-theme="day"] .currency-wallet {
    border-color: color-mix(in srgb, var(--amber) 42%, rgba(12, 18, 28, 0.28));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--amber) 14%, transparent), color-mix(in srgb, var(--panel) 90%, #fff));
  }
  
  html[data-theme="day"] .currency-meta small {
    color: var(--amber-ink);
  }
  
  html[data-theme="day"] .currency-meta strong {
    color: var(--cream);
  }
  
  
  html[data-theme="day"] .shield-charge {
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--system-color, #c44a42) 75%, #111916);
  }
  
  html[data-theme="day"] .shield-charge i {
    opacity: 0.62;
  }
  
  html[data-theme="day"] .shield-charge:has(i.active) {
    border-color: color-mix(in srgb, var(--amber) 70%, #111916);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--amber2) 40%, transparent),
      0 0 12px color-mix(in srgb, var(--amber) 38%, transparent);
  }
  
  .forge-overlay {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  
  /* FORGE SCROLLBAR
     Squared off to match the rest of the chrome — no pill thumbs. The thumb picks
     up the open branch colour so scrolling reads as part of the same dossier.
     Scoped to the Forge so the rest of the app keeps native scrollbars. */
  .forge-overlay .skill-tree {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--branch-color, var(--steel)) 52%, var(--forge-desk-bg)) transparent;
  }
  
  .forge-overlay .skill-tree::-webkit-scrollbar {
    width: 10px;
  }
  
  .forge-overlay .skill-tree::-webkit-scrollbar-track {
    border-left: 1px solid color-mix(in srgb, var(--cream-dim) 14%, transparent);
    background: color-mix(in srgb, var(--ink-deep) 55%, transparent);
  }
  
  .forge-overlay .skill-tree::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background: color-mix(in srgb, var(--branch-color, var(--steel)) 46%, var(--steel-dark));
    background-clip: content-box;
  }
  
  .forge-overlay .skill-tree::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--branch-color, var(--steel)) 78%, var(--steel-dark));
    background-clip: content-box;
  }
  
  .forge-shell .skill-tree {
    align-items: start;
  }
  
  /* ==========================================================================
     FORGE CARD STATE SYSTEM
     Access, ownership, loadout, economy, and rank are layered signals. Keep
     every card-state selector and the teaching legend together in this section.
     ========================================================================== */
  
  article.skill-card {
    --rank-color: var(--steel);
    isolation: isolate;
    min-height: 178px;
    overflow: hidden;
    cursor: default;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }
  
  article.skill-card::after {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 44px;
    height: 3px;
    background: var(--branch-color);
    content: "";
    opacity: 0.45;
    transition: width 160ms ease, opacity 160ms ease;
  }
  
  article.skill-card:hover,
  article.skill-card:focus-within {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--branch-color) 78%, var(--cream));
    background: #1d2924;
    box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.18), inset 3px 0 0 color-mix(in srgb, var(--branch-color) 70%, transparent);
  }
  
  article.skill-card:hover::after,
  article.skill-card:focus-within::after {
    width: 34%;
    opacity: 0.9;
  }
  
  article.skill-card:focus-within {
    outline: 2px solid var(--branch-color);
    outline-offset: 3px;
  }

  /* Hangar deck → this card: brief land mark, then settle. */
  article.skill-card.is-forge-jump {
    outline: 2px solid var(--branch-color);
    outline-offset: 3px;
    animation: forge-card-jump 1s ease-out;
  }

  @keyframes forge-card-jump {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--branch-color) 45%, transparent), 5px 6px 0 rgba(0, 0, 0, 0.16); }
    35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--branch-color) 22%, transparent), 5px 6px 0 rgba(0, 0, 0, 0.16); }
    100% { box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.16); }
  }
  
  article.skill-card.is-unlocked.is-unforged {
    border-color: color-mix(in srgb, var(--branch-color) 72%, transparent);
    background: linear-gradient(105deg, color-mix(in srgb, var(--branch-color) 8%, transparent), transparent 42%), #18221e;
  }
  
  article.skill-card.is-owned:not(.is-equipped) {
    border-color: color-mix(in srgb, var(--branch-color) 42%, var(--line));
    box-shadow: var(--signal-off);
  }
  
  article.skill-card.is-equipped {
    border-color: var(--branch-color);
    background: linear-gradient(105deg, color-mix(in srgb, var(--branch-color) 12%, transparent), transparent 46%), #18221e;
    box-shadow: var(--signal-on), inset 5px 0 0 var(--branch-color), 5px 6px 0 rgba(0, 0, 0, 0.16);
  }
  
  article.skill-card.is-equipped .card-badge {
    border-color: var(--branch-color);
    box-shadow: inset 3px 0 0 var(--branch-color);
  }
  
  article.skill-card.is-locked {
    opacity: 1;
    border-style: dashed;
    border-color: rgba(181, 193, 189, 0.34);
    background: #131b18;
    filter: none;
  }
  
  article.skill-card.is-locked::after {
    background: var(--steel-dark);
    opacity: 0.35;
  }
  
  article.skill-card.is-unforged .card-node i {
    filter: saturate(0.45) contrast(0.92) brightness(0.86);
  }
  
  article.skill-card.is-unforged > .card-node,
  article.skill-card.is-unforged > .card-copy {
    position: relative;
    z-index: 1;
  }
  
  .unforged-x {
    --unforged-x-color: color-mix(in srgb, var(--branch-color) 32%, #aeb6b2);
    position: absolute;
    z-index: 0;
    inset: 10px;
    overflow: hidden;
    opacity: 0.17;
    pointer-events: none;
  }
  
  .unforged-x i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--unforged-x-color) 0 8px, transparent 8px 14px);
    box-shadow: 0 0 3px color-mix(in srgb, var(--unforged-x-color) 14%, transparent);
    transform-origin: center;
  }
  
  .unforged-x i:first-child {
    transform: translate(-50%, -50%) rotate(31deg);
  }
  
  .unforged-x i:last-child {
    transform: translate(-50%, -50%) rotate(-31deg);
  }
  
  .unforged-x::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 0.75px solid var(--unforged-x-color);
    border-radius: 50%;
    background: #131b18;
    box-shadow: 0 0 4px color-mix(in srgb, var(--unforged-x-color) 20%, transparent);
    content: "";
    transform: translate(-50%, -50%);
  }
  
  article.skill-card.is-locked .unforged-x {
    opacity: 0.11;
  }
  
  article.skill-card.is-locked:hover,
  article.skill-card.is-locked:focus-within {
    transform: none;
    border-color: rgba(181, 193, 189, 0.44);
    background: #151d1a;
    box-shadow: none;
  }
  
  article.skill-card.is-locked p {
    color: #d8d0bc;
  }
  
  article.skill-card.is-locked .card-state {
    color: #c0cac4;
  }
  
  article.skill-card.rank-tone-neutral { --rank-color: var(--steel); }
  article.skill-card.rank-tone-mint { --rank-color: #7cf1c4; }
  article.skill-card.rank-tone-blue { --rank-color: #7dafff; }
  article.skill-card.rank-tone-rose { --rank-color: #ff7b7f; }
  article.skill-card.rank-tone-violet { --rank-color: #b58cff; }
  article.skill-card.rank-tone-amber { --rank-color: var(--amber); }
  article.skill-card.rank-tone-coral { --rank-color: var(--coral); }
  article.skill-card.rank-tone-gold { --rank-color: var(--amber); }
  
  .skill-card .rank-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 18px;
    margin-top: 5px;
    padding: 4px 6px;
    border-left: 3px solid var(--rank-color);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 13%, transparent), transparent 78%);
    color: var(--rank-color);
    font: 800 9px var(--mono);
    letter-spacing: 0.7px;
  }
  
  .skill-card .rank-line > b {
    color: inherit;
    font: inherit;
  }
  
  .skill-card .rank-pips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  
  .skill-card .rank-pips i {
    display: block;
    width: 13px;
    height: 7px;
    border: 1px solid color-mix(in srgb, var(--rank-color) 72%, transparent);
    background: transparent;
    box-shadow: inset 0 0 0 2px #18221e;
    transform: skewX(-12deg);
  }
  
  .skill-card .rank-pips i.filled {
    border-color: var(--rank-color);
    background: var(--rank-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-color) 60%, var(--cream));
  }
  
  .skill-card.is-locked .rank-pips i {
    border-color: var(--steel-dark);
  }
  
  .skill-card p b {
    color: var(--forge-card-dim, #c8d0dc);
    font-size: 8px;
    letter-spacing: 1px;
    font-weight: 800;
  }
  
  .skill-card p.next-effect {
    min-height: 32px;
    margin-top: 0;
    padding: 5px 7px 0;
    border-top: 1px dashed rgba(247, 239, 218, 0.28);
    background: linear-gradient(90deg, rgba(247, 239, 218, 0.05), transparent 72%);
    color: var(--forge-card-type, #eef2f8);
  }
  
  .skill-card p.next-effect b {
    color: var(--forge-card-dim, #c8d0dc);
  }
  
  .skill-card.is-maxed p.next-effect {
    color: color-mix(in srgb, var(--amber) 70%, var(--forge-card-dim, #c8d0dc));
  }
  
  .skill-card .card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }
  
  .skill-card .card-actions.is-single > * {
    grid-column: 1 / -1;
  }
  
  .skill-card .card-action,
  .skill-card .maxed-stamp {
    display: inline-grid;
    place-items: center;
    min-width: 0;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--branch-color) 55%, var(--ink-deep));
    background: transparent;
    color: var(--forge-card-type, #eef2f8);
    font: 800 8px var(--mono);
    letter-spacing: 0.8px;
    line-height: 1.25;
    text-align: center;
  }
  
  .skill-card button.card-action {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, opacity 120ms ease;
  }
  
  .skill-card button.card-action:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  
  .skill-card button.card-action:active:not(:disabled) {
    transform: translateY(1px);
  }
  
  .skill-card button.card-action:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
  }
  
  /* Home CTA recipe: solid pastel fill + hangar black type (reads in Dā + Nīt) */
  .skill-card .forge-action {
    border-color: color-mix(in srgb, var(--branch-color) 55%, var(--ink-deep));
    background: var(--branch-color);
    color: var(--ink-deep);
    box-shadow:
      1px 2px 0 rgba(0, 0, 0, 0.22),
      inset 0 -3px 0 rgba(11, 16, 14, 0.22);
  }
  
  .skill-card .forge-action:hover:not(:disabled) {
    background: color-mix(in srgb, var(--branch-color) 82%, #fff);
    color: var(--ink-deep);
  }
  
  .skill-card button.forge-action:disabled {
    opacity: 1;
    filter: none;
    border-color: color-mix(in srgb, var(--branch-color) 40%, #6a736c);
    background: color-mix(in srgb, var(--branch-color) 42%, #8a928a);
    color: var(--ink-deep);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
  }
  
  .skill-card .access-action:disabled {
    grid-column: 1 / -1;
    cursor: not-allowed;
    opacity: 1;
    border-style: dashed;
    border-color: rgba(181, 193, 189, 0.34);
    background: rgba(181, 193, 189, 0.06);
    color: #c0cac4;
    box-shadow: none;
  }
  
  /* Can't afford — muted amber, not the locked grey wash. */
  .skill-card button.forge-action.is-short:disabled {
    cursor: not-allowed;
    border-color: color-mix(in srgb, var(--amber) 32%, #5c564c);
    background: color-mix(in srgb, var(--amber) 14%, #2a2822);
    color: color-mix(in srgb, var(--cream) 58%, transparent);
    box-shadow: none;
    text-decoration: none;
  }
  
  .skill-card .forge-action.is-forge-ready {
    border-color: color-mix(in srgb, var(--branch-color) 72%, #fff8ec);
    animation: forge-ready-card-breath 2.6s ease-in-out infinite;
  }
  
  @keyframes forge-ready-card-breath {
    0%, 100% {
      box-shadow:
        1px 2px 0 rgba(0, 0, 0, 0.22),
        inset 0 -3px 0 rgba(11, 16, 14, 0.22);
    }
    50% {
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--branch-color) 55%, transparent),
        0 0 15px color-mix(in srgb, var(--branch-color) 42%, transparent),
        inset 0 -3px 0 rgba(11, 16, 14, 0.22);
    }
  }
  
  .skill-card .equip-action {
    border-color: color-mix(in srgb, var(--branch-color) 70%, var(--forge-card-type, #eef2f8));
    background: color-mix(in srgb, var(--branch-color) 14%, transparent);
    color: var(--forge-card-type, #eef2f8);
  }
  
  .skill-card.is-equipped .equip-action {
    border-color: #ff7b6f;
    color: #ffb0a8;
    background: rgba(255, 123, 111, 0.12);
  }
  
  .skill-card.is-loadout-full .equip-action:disabled {
    opacity: 1;
    border-color: color-mix(in srgb, var(--steel) 38%, transparent);
    background: repeating-linear-gradient(-45deg, rgba(181, 193, 189, 0.08) 0 5px, transparent 5px 10px);
    color: color-mix(in srgb, var(--steel) 62%, transparent);
  }
  
  .skill-card .equip-action:hover:not(:disabled) {
    border-color: var(--forge-card-type, #eef2f8);
    background: rgba(238, 242, 248, 0.1);
    color: var(--forge-card-type, #eef2f8);
  }
  
  .skill-card button.forge-action:disabled {
    cursor: not-allowed;
  }
  
  .skill-card .maxed-stamp {
    grid-column: 1 / -1;
    border-color: var(--amber);
    background: var(--amber);
    color: var(--ink-deep);
    letter-spacing: 1.5px;
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  
  .skill-card.is-maxed .maxed-stamp {
    grid-column: 1;
  }
  
  .skill-card.is-maxed .equip-action {
    grid-column: 2;
  }
  
  /* CARD SIGNALS — a layered key, not a list of mutually exclusive states. */
  .forge-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px 16px;
    min-height: 72px;
    padding: 10px 31px;
    border-top: 1px solid rgba(247, 239, 218, 0.16);
    background: #151e1a;
    color: var(--forge-card-dim, #c8d0dc);
  }
  
  .forge-legend-label {
    display: grid;
    place-items: center;
    padding-right: 16px;
    border-right: 1px solid rgba(247, 239, 218, 0.16);
    color: var(--cream-dim);
    font: 700 8px/1 var(--mono);
    letter-spacing: 1.6px;
  }

  .forge-legend-label .forge-signals-cue {
    display: none;
  }
  
  .forge-signals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
  }
  
  .forge-signal-group {
    min-width: 0;
    padding: 0 10px;
    border-left: 1px dashed rgba(247, 239, 218, 0.13);
  }
  
  .forge-signal-group:first-child {
    padding-left: 0;
    border-left: 0;
  }
  
  .forge-signal-group > b {
    display: block;
    margin-bottom: 7px;
    color: var(--cream-dim);
    font: 800 7px/1 var(--mono);
    letter-spacing: 1.1px;
  }
  
  .forge-signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .forge-signal-list li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font: 700 7px/1 var(--mono);
    letter-spacing: 0.55px;
    white-space: nowrap;
  }
  
  .card-state-swatch {
    flex: 0 0 auto;
    width: 19px;
    height: 12px;
    border: 1px solid color-mix(in srgb, var(--steel) 70%, transparent);
    background: #18221e;
  }
  
  .card-state-swatch.locked {
    border-style: dashed;
    opacity: 0.58;
  }
  
  .card-state-swatch.unlocked {
    border-color: var(--mint);
  }
  
  .card-state-swatch.unforged {
    opacity: 0.62;
    background:
      linear-gradient(31deg, transparent 46%, var(--steel) 47% 51%, transparent 52%),
      linear-gradient(-31deg, transparent 46%, var(--steel) 47% 51%, transparent 52%),
      #18221e;
  }
  
  .card-state-swatch.owned {
    border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
    background: color-mix(in srgb, var(--mint) 8%, #18221e);
  }
  
  .card-state-swatch.unequipped {
    box-shadow: inset 0 -3px 0 var(--steel);
  }
  
  .card-state-swatch.equipped {
    border-color: var(--mint);
    box-shadow: inset 4px 0 0 var(--mint);
  }
  
  .card-state-swatch.loadout-full {
    background: repeating-linear-gradient(-45deg, rgba(181, 193, 189, 0.18) 0 3px, transparent 3px 6px), #18221e;
    box-shadow: inset 0 -3px 0 var(--steel);
  }
  
  .card-state-swatch.can-afford {
    border-color: var(--mint);
    box-shadow: 0 0 7px color-mix(in srgb, var(--mint) 56%, transparent);
  }
  
  .card-state-swatch.cannot-afford {
    border-color: color-mix(in srgb, var(--amber) 34%, #5c564c);
    background: color-mix(in srgb, var(--amber) 10%, #18221e);
    opacity: 0.72;
  }
  
  .rank-swatch {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 12px;
    border-left: 3px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, #18221e);
    color: var(--steel);
    font-size: 6px;
  }
  
  .rank-swatch.tone-mint { color: #7cf1c4; }
  .rank-swatch.tone-blue { color: #7dafff; }
  .rank-swatch.tone-rose { color: #ff7b7f; }
  .rank-swatch.tone-gold { color: var(--amber-ink); }
  
  @media (max-width: 900px) {
    .forge-footer {
      grid-template-columns: 1fr;
    }
  
    .forge-legend-label {
      display: block;
      padding: 0 0 7px;
      border-right: 0;
      border-bottom: 1px solid rgba(247, 239, 218, 0.16);
    }
  
    .forge-signals {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 10px;
    }
  
    .forge-signal-group:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }
  
    .rank-signal-group {
      grid-column: 1 / -1;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .skill-card .forge-action.is-forge-ready {
      animation: none;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--branch-color) 55%, transparent),
        0 0 12px color-mix(in srgb, var(--branch-color) 34%, transparent),
        inset 0 -3px 0 rgba(11, 16, 14, 0.22);
    }
  }
  
  /* DAY keeps the Forge as a dark maintenance inset. Local surface tokens prevent
     day-page ink from collapsing notice, state, legend, and disabled-control copy. */
  html[data-theme="day"] .forge-shell {
    --ink: #111916;
    --cream: #eef2f8;
    --cream-dim: #cbd6d0;
    --steel: #aebdb5;
    --steel-dark: #65746c;
    --line: rgba(238, 242, 248, 0.2);
    --amber: #e2b56e;
    --amber-ink: #e2b56e;
    --forge-card-type: #eef2f8;
    --forge-card-dim: #cbd6d0;
    --forge-card-mute: #aebdb5;
  }
  
  html[data-theme="day"] .forge-shell .forge-notice {
    border-left-color: #7fd4b4;
    background: #1a2521;
    color: #dce6e0;
  }
  
  html[data-theme="day"] .forge-shell .forge-footer {
    border-top-color: rgba(238, 242, 248, 0.22);
    color: #d5dfda;
  }
  
  html[data-theme="day"] .forge-shell .forge-legend-label,
  html[data-theme="day"] .forge-shell .forge-signal-group > b,
  html[data-theme="day"] .forge-shell .forge-signal-list li,
  html[data-theme="day"] .forge-shell .card-state {
    color: #d5dfda;
  }
  
  html[data-theme="day"] .forge-shell .forge-signal-group {
    border-left-color: rgba(238, 242, 248, 0.24);
  }
  
  html[data-theme="day"] .forge-shell article.skill-card.is-unlocked.is-unforged {
    border-color: color-mix(in srgb, var(--branch-color) 78%, #eef2f8);
  }
  
  html[data-theme="day"] .forge-shell article.skill-card.is-owned:not(.is-equipped) {
    border-color: color-mix(in srgb, var(--branch-color) 48%, #aebdb5);
    box-shadow: var(--signal-off);
  }
  
  html[data-theme="day"] .forge-shell article.skill-card.is-equipped {
    border-color: var(--branch-color);
    box-shadow: var(--signal-on), inset 5px 0 0 var(--branch-color), 5px 6px 0 rgba(0, 0, 0, 0.16);
  }
  
  html[data-theme="day"] .forge-shell article.skill-card.is-locked {
    border-color: rgba(213, 223, 218, 0.5);
  }
  
  html[data-theme="day"] .forge-shell .skill-card .access-action:disabled {
    border-color: rgba(213, 223, 218, 0.5);
    background: rgba(213, 223, 218, 0.08);
    color: #dce6e0;
  }
  
  html[data-theme="day"] .forge-shell .skill-card button.forge-action.is-short:disabled {
    border-color: #a9874e;
    background: #302a20;
    color: #f1ddb8;
  }
  
  html[data-theme="day"] .forge-shell .skill-card.is-loadout-full .equip-action:disabled {
    border-color: #82938a;
    background: repeating-linear-gradient(-45deg, rgba(213, 223, 218, 0.12) 0 5px, transparent 5px 10px);
    color: #dce6e0;
  }
  
  html[data-theme="day"] .forge-shell .skill-card .maxed-stamp {
    border-color: #f0c879;
    background: #e2b56e;
    color: #111916;
  }
  
  .hud-rail-right .systems-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 8px 0 4px;
    color: var(--cream-dim);
    font: 800 8px var(--mono);
    letter-spacing: 1.2px;
    white-space: nowrap;
  }
  
  .hud-rail-right .systems-heading::after {
    min-width: 12px;
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, var(--steel-dark), transparent);
    content: "";
  }
  
  .hud-rail-right .active-systems,
  .hud-rail-right .field-effects {
    display: grid;
    min-width: 0;
    gap: 5px;
  }
  
  .hud-rail-right button.active-system {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--system-color) 52%, transparent);
    background: linear-gradient(110deg, color-mix(in srgb, var(--system-color) 8%, transparent), transparent 44%), #121b17;
    color: var(--cream);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
  }
  
  .hud-rail-right button.active-system:hover:not(:disabled),
  .hud-rail-right button.active-system:focus-visible {
    transform: translateX(2px);
    border-color: var(--system-color);
    background-color: #18231e;
  }
  
  .hud-rail-right button.active-system:disabled {
    cursor: default;
    opacity: 0.76;
  }
  
  .active-system > .system-node {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--system-color) 50%, var(--ink-deep));
    background: var(--system-color);
    color: var(--ink-deep);
    font-size: 9px;
    font-weight: 900;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
  }
  
  .hud-rail-right .active-system > span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
  }
  
  .hud-rail-right .active-system b,
  .hud-rail-right .active-system small {
    display: block;
    min-width: 0;
    overflow: hidden;
    font: 800 8px var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .hud-rail-right .active-system small {
    color: var(--system-color);
    font-size: 7px;
  }
  
  .hud-rail-right .active-system i,
  .hud-rail-right .field-effect i {
    display: block;
    height: 5px;
    overflow: hidden;
    border: 1px solid rgba(247, 239, 218, 0.08);
    background: rgba(247, 239, 218, 0.06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.36);
  }
  
  .hud-rail-right .active-system em,
  .hud-rail-right .field-effect em {
    display: block;
    width: 0;
    height: 100%;
    background: var(--system-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--system-color) 55%, transparent);
    transition: width 90ms linear;
  }
  
  .hud-rail-right .active-empty,
  .hud-rail-right .effect-empty {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    padding: 9px;
    border-left: 2px solid var(--steel-dark);
    background: rgba(23, 33, 29, 0.5);
    color: var(--steel);
    font: 700 7px var(--mono);
    letter-spacing: 0.8px;
    line-height: 1.35;
  }
  
  .hud-rail-right .field-effect {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 40px;
    padding: 5px 6px;
    overflow: hidden;
    border-left: 2px solid var(--effect-color);
    background: linear-gradient(100deg, color-mix(in srgb, var(--effect-color) 8%, transparent), transparent 52%), rgba(23, 33, 29, 0.72);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }
  
  body:is([data-game-state="ready"], [data-game-state="playing"], [data-game-state="paused"]) .hud-rail-right .field-effect {
    animation: field-active-pulse 2.4s ease-in-out infinite;
  }
  
  body:is([data-game-state="ready"], [data-game-state="playing"], [data-game-state="paused"]) .hud-rail-right .field-effect.is-expiring {
    animation: field-expire-flash 0.55s ease-in-out infinite;
  }
  
  body[data-game-state="playing"] .hud-rail-right button.active-system.is-active {
    animation: system-active-pulse 2.4s ease-in-out infinite;
  }
  
  .hud-rail-right .field-effect > b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    border: 1px solid var(--effect-color);
    color: var(--effect-color);
    font-size: 8px;
    letter-spacing: 0;
  }
  
  .hud-rail-right .field-effect > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: 4px 7px;
  }
  
  .hud-rail-right .field-effect strong,
  .hud-rail-right .field-effect small {
    min-width: 0;
    overflow: hidden;
    font: 800 7px var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .hud-rail-right .field-effect small {
    color: var(--effect-color);
  }
  
  .hud-rail-right .field-effect i {
    grid-column: 1 / -1;
  }
  
  .hud-rail-right .field-effect em {
    background: var(--effect-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--effect-color) 55%, transparent);
    transition: width 90ms linear, background-color 160ms ease, box-shadow 160ms ease;
  }
  
  .hud-rail-right .field-effect.is-expiring > b {
    border-color: var(--coral);
    color: var(--coral);
  }
  
  .hud-rail-right .field-effect.is-expiring small {
    color: var(--coral);
  }
  
  .hud-rail-right .field-effect.is-expiring em {
    background: var(--coral);
    box-shadow: 0 0 10px color-mix(in srgb, var(--coral) 60%, transparent);
  }
  
  .state-panel.clear-stamp {
    position: relative;
    overflow: hidden;
    border-color: var(--amber);
    box-shadow: 0 0 0 1px rgba(255, 188, 87, 0.28), 10px 12px 0 rgba(0, 0, 0, 0.28);
    animation: forge-clear-stamp 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  
  .state-panel.clear-stamp::after {
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: -32%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(247, 239, 218, 0.22), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-16deg);
    animation: forge-clear-scan 720ms 80ms ease-out both;
  }
  
  .state-panel.court-transition-panel {
    padding-block: 25px 23px;
    border-top-color: var(--court-accent);
    text-align: center;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--court-accent) 24%, transparent), 8px 10px 0 rgba(0, 0, 0, .22);
  }
  
  .state-panel.miss-ack-panel {
    padding-block: 24px 22px;
    border-top-color: var(--coral);
    text-align: center;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 28%, transparent), 8px 10px 0 rgba(0, 0, 0, .22);
  }
  
  .miss-ack-panel .state-kicker {
    color: var(--coral);
  }
  
  .miss-ack-panel .state-copy {
    margin-top: 10px;
    text-align: center;
  }
  
  .miss-ack-panel .state-actions {
    margin-top: 18px;
    justify-content: center;
  }
  
  .court-transition-panel .state-kicker {
    color: var(--court-from-accent, var(--court-accent));
    animation: court-theme-swap-color var(--court-morph-ms, 1800ms) ease both;
  }
  
  .court-transition-panel .state-copy {
    margin-top: 12px;
    text-align: center;
  }
  
  .court-loader {
    position: relative;
    width: min(248px, 86%);
    margin: 22px auto 0;
    padding: 10px 8px 12px;
    border: 1px solid color-mix(in srgb, var(--court-from-accent, var(--court-accent)) 42%, transparent);
    background: var(--court-from-bg, color-mix(in srgb, var(--steel-dark) 55%, transparent));
    box-shadow: inset 0 0 0 1px rgba(17, 25, 22, 0.08);
    animation: court-loader-shelf-morph var(--court-morph-ms, 1800ms) ease both;
  }
  
  .court-loader-stage {
    position: relative;
    display: grid;
  }
  
  .court-loader-rack {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  
  .court-loader-to {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: court-loader-theme-in var(--court-morph-ms, 1800ms) ease both;
  }
  
  .court-loader-from {
    animation: court-loader-theme-out var(--court-morph-ms, 1800ms) ease both;
  }
  
  .court-loader-brick {
    height: 24px;
    min-height: 24px;
    box-shadow: 1px 2px 0 rgba(17, 25, 22, 0.2);
    animation: court-brick-load 520ms ease-in-out infinite alternate;
  }
  
  .court-loader-brick.anchor-swatch {
    font-size: 9px;
  }
  
  .court-loader-brick .hit-stamp {
    top: 6px;
    left: 2px;
    width: 10px;
    height: 10px;
    font-size: 7px;
  }
  
  .court-loader-rack > :nth-child(2) { animation-delay: 70ms; }
  .court-loader-rack > :nth-child(3) { animation-delay: 140ms; }
  .court-loader-rack > :nth-child(4) { animation-delay: 210ms; }
  .court-loader-rack > :nth-child(5) { animation-delay: 280ms; }
  
  .court-loader-ball {
    position: absolute;
    top: 2px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--court-from-ball, var(--cream));
    box-shadow: 0 0 8px var(--court-from-accent, var(--court-accent));
    animation:
      court-loader-ball 760ms ease-in-out infinite alternate,
      court-loader-ball-theme var(--court-morph-ms, 1800ms) ease both;
  }
  
  @keyframes court-brick-load {
    from { opacity: .55; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-2px); }
  }
  
  @keyframes court-loader-ball {
    from { left: 8px; }
    to { left: calc(100% - 16px); }
  }
  
  @keyframes court-loader-shelf-morph {
    0%, 42% {
      background: var(--court-from-bg);
      border-color: color-mix(in srgb, var(--court-from-accent) 42%, transparent);
    }
    55%, 100% {
      background: var(--court-to-bg);
      border-color: color-mix(in srgb, var(--court-to-accent) 42%, transparent);
    }
  }
  
  @keyframes court-loader-theme-out {
    0%, 42% { opacity: 1; }
    55%, 100% { opacity: 0; }
  }
  
  @keyframes court-loader-theme-in {
    0%, 42% { opacity: 0; }
    55%, 100% { opacity: 1; }
  }
  
  @keyframes court-loader-ball-theme {
    0%, 42% {
      background: var(--court-from-ball);
      box-shadow: 0 0 8px var(--court-from-accent);
    }
    55%, 100% {
      background: var(--court-to-ball);
      box-shadow: 0 0 8px var(--court-to-accent);
    }
  }
  
  @keyframes court-theme-swap-color {
    0%, 42% { color: var(--court-from-accent, var(--court-accent)); }
    55%, 100% { color: var(--court-to-accent, var(--court-accent)); }
  }
  
  @keyframes forge-clear-stamp {
    0% { opacity: 0; transform: scale(0.84) rotate(-2deg); }
    42% { opacity: 1; transform: scale(1.035) rotate(0.5deg); }
    72% { transform: scale(0.992) rotate(0deg); }
    100% { opacity: 1; transform: scale(1); }
  }
  
  @keyframes forge-clear-scan {
    from { left: -32%; }
    to { left: 118%; }
  }

@media (prefers-reduced-motion: reduce) {
  .forge-shell *, .skill-card *, .forge-tabs * { scroll-behavior: auto !important; }
}


/* Field taste → forged ownership: the sixth dossier key stays readable on desktop
   and joins the existing horizontal signal rail on phones. */
.forge-signals {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(180px, 1.35fr);
}

.behavior-signal-group .forge-signal-list {
  display: grid;
  grid-template-columns: 1fr;
}

.behavior-swatch {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 19px;
  height: 12px;
  border: 1px solid currentColor;
  color: var(--mint);
  font: 800 6px/1 var(--mono);
}

.behavior-swatch.drop { color: var(--amber); }
.behavior-swatch.card { color: var(--mint); }
.behavior-swatch.passive { color: #8bd5ff; }
.behavior-swatch.trigger { color: var(--coral); }