/* the-orchestra-learned-to-celebrate.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
body { min-height: 100vh; }

      .article-wrap { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 80px 24px 60px; }
      .article-meta { margin-bottom: 32px; }
      .article-meta .tag { display: inline-block; background: var(--green); color: #000; font-weight: 700; font-size: 11px; padding: 4px 14px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; }
      .article-meta time { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

      .article-wrap h1 { font-size: 28px; line-height: 1.3; color: var(--green); margin-bottom: 32px; }
      .article-wrap h2 { font-size: 18px; color: var(--green); margin-top: 48px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
      .article-wrap h3 { font-size: 15px; color: var(--green-dim); margin-top: 28px; margin-bottom: 12px; }
      .article-wrap p { font-size: 14px; color: var(--white); line-height: 1.8; margin-bottom: 16px; }
      .article-wrap ul, .article-wrap ol { font-size: 14px; color: var(--white); line-height: 1.8; margin-bottom: 16px; padding-left: 24px; }
      .article-wrap li { margin-bottom: 8px; }
      .article-wrap code { background: var(--bg-terminal); border: 1px solid var(--border); padding: 2px 6px; font-size: 13px; color: var(--green); }
      .article-wrap pre { background: var(--bg-terminal); border: 1px solid var(--border); padding: 20px; overflow-x: auto; margin-bottom: 20px; font-size: 13px; line-height: 1.6; color: var(--green); }
      .article-wrap pre code { background: none; border: none; padding: 0; }
      .article-wrap strong { color: var(--green); font-weight: 600; }

      .tldr { border-left: 3px solid var(--green); background: var(--bg-terminal); padding: 16px 20px; margin-bottom: 32px; font-size: 13px; line-height: 1.7; color: var(--white); }
      .tldr .tldr-label { color: var(--green); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }

      .cta-box { border: 2px solid var(--green); background: var(--bg-card); padding: 32px 28px; margin: 40px 0; text-align: center; box-shadow: 0 0 40px var(--green-glow); }
      .cta-box h3 { color: var(--green); margin-top: 0; margin-bottom: 12px; }
      .cta-box p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
      .cta-btn { display: inline-block; background: var(--green); color: #000; font-weight: 700; font-size: 13px; padding: 12px 28px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: background 0.2s; }
      .cta-btn:hover { background: #00cc33; }
      .cta-btn-secondary { display: inline-block; color: var(--green-dim); font-size: 12px; text-decoration: none; margin-left: 16px; text-transform: uppercase; letter-spacing: 1px; }
      .cta-btn-secondary:hover { color: var(--green); }

      .nav-links { margin-top: 48px; display: flex; justify-content: space-between; font-size: 12px; }
      .nav-links a { color: var(--green-dark); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
      .nav-links a:hover { color: var(--green); }

      .key-point { border-left: 3px solid var(--green); padding: 12px 20px; margin: 20px 0; background: rgba(0, 255, 65, 0.04); }
      .key-point p { margin: 0; font-size: 13px; }

      .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
      .do-dont .do, .do-dont .dont { border: 1px solid var(--border); padding: 16px; font-size: 13px; }
      .do-dont .do { border-color: var(--green-dark); }
      .do-dont .dont { border-color: #ff3333; }
      .do-dont h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
      .do-dont .do h4 { color: var(--green); }
      .do-dont .dont h4 { color: #ff3333; }

      .section-icon { font-size: 20px; margin-right: 8px; vertical-align: middle; color: var(--green); }

      .info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13px; }
      .info-table th, .info-table td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
      .info-table th { background: var(--bg-terminal); color: var(--green); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
      .info-table td { color: var(--white); }

      .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
      .concept-card { border: 1px solid var(--border); background: var(--bg-card); padding: 20px; }
      .concept-card .icon { font-size: 24px; margin-bottom: 8px; }
      .concept-card h4 { color: var(--green); font-size: 14px; margin-bottom: 8px; }
      .concept-card p { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.6; }

      .visual-flow { border: 1px solid var(--border); background: var(--bg-terminal); padding: 24px; margin: 24px 0; text-align: center; font-size: 14px; line-height: 2; }
      .visual-flow .arrow { color: var(--green); font-size: 18px; }

      @media (max-width: 600px) { .concept-grid, .do-dont { grid-template-columns: 1fr; } }
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Orbitron:wght@500;700;900&display=swap');

  /* ============================================================
     Shared tokens
     ============================================================ */
  .gam-stage {
    --gam-bg-1: #0a0612;
    --gam-bg-2: #1a0a2e;
    --gam-magenta: #b14eff;
    --gam-cyan: #00f0ff;
    --gam-pink: #ff2e88;
    --gam-yellow: #ffe04e;
    --gam-grid: rgba(177, 78, 255, 0.06);
    --gam-text: #e8e1ff;
    --gam-muted: #8a7fb0;

    position: relative;
    border-radius: 14px;
    background:
      radial-gradient(ellipse at top left, rgba(177, 78, 255, 0.18), transparent 55%),
      radial-gradient(ellipse at bottom right, rgba(0, 240, 255, 0.10), transparent 55%),
      linear-gradient(155deg, var(--gam-bg-1), var(--gam-bg-2));
    border: 1px solid rgba(177, 78, 255, 0.28);
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.05),
      0 30px 60px -30px rgba(0, 0, 0, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--gam-text);
    overflow: hidden;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    margin: 32px 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .gam-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--gam-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--gam-grid) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  }
  .gam-hud {
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gam-cyan);
    opacity: 0.85;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
    z-index: 5;
  }
  .gam-hud-right {
    left: auto;
    right: 14px;
    color: var(--gam-magenta);
    text-shadow: 0 0 8px rgba(177, 78, 255, 0.6);
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .gam-hud-piece {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: inherit;
  }
  .gam-hud-piece b {
    font-family: 'Audiowide', monospace;
    font-size: 13px;
    color: var(--gam-yellow);
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 224, 78, 0.6);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 480px) {
    .gam-hud {
      font-size: 9px;
      letter-spacing: 2px;
    }
    .gam-hud-right { gap: 6px; }
    .gam-hud-piece { font-size: 9px; letter-spacing: 1px; }
    .gam-hud-piece b { font-size: 11px; }
  }
  @media (max-width: 360px) {
    .gam-hud:not(.gam-hud-right) { display: none; }
  }

  /* ============================================================
     META HUD — total orchestra score (above game 1)
     ============================================================ */
  .gam-meta-hud {
    position: relative;
    margin: 24px 0 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background:
      linear-gradient(135deg, rgba(177, 78, 255, 0.12), rgba(0, 240, 255, 0.08)),
      rgba(10, 6, 18, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.45);
    box-shadow:
      0 0 22px rgba(177, 78, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 18px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
  }
  .gam-meta-label {
    grid-column: 1; grid-row: 1;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gam-cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  }
  .gam-meta-value {
    grid-column: 1; grid-row: 2;
    font-family: 'Audiowide', monospace;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1;
    color: var(--gam-yellow);
    text-shadow: 0 0 14px rgba(255, 224, 78, 0.7);
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
  }
  .gam-meta-breakdown {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .gam-meta-breakdown > span {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid rgba(177, 78, 255, 0.45);
    border-radius: 999px;
    background: rgba(10, 6, 18, 0.6);
    color: var(--gam-muted);
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
  }
  .gam-meta-breakdown em {
    font-style: normal;
    color: var(--gam-magenta);
    text-shadow: 0 0 4px rgba(177, 78, 255, 0.6);
  }
  .gam-meta-breakdown b {
    font-family: 'Audiowide', monospace;
    font-size: 13px;
    color: var(--gam-yellow);
    text-shadow: 0 0 4px rgba(255, 224, 78, 0.5);
    font-variant-numeric: tabular-nums;
  }
  .gam-meta-breakdown > span.gam-meta-active {
    border-color: var(--gam-cyan);
    color: var(--gam-text);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  }
  @media (max-width: 600px) {
    .gam-meta-hud {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
    }
    .gam-meta-label { grid-column: 1; grid-row: 1; }
    .gam-meta-value { grid-column: 1; grid-row: 2; }
    .gam-meta-breakdown {
      grid-column: 1; grid-row: 3;
      justify-content: flex-start;
    }
  }

  /* ============================================================
     SHARED — start / end overlay used by every game
     ============================================================ */
  .gam-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at center, rgba(10, 6, 18, 0.55), rgba(10, 6, 18, 0.92));
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 16px;
  }
  .gam-overlay.gam-overlay-on {
    opacity: 1;
    pointer-events: auto;
  }
  .gam-overlay-card {
    max-width: 380px;
    text-align: center;
    padding: 8px 16px;
  }
  .gam-overlay-title {
    font-family: 'Audiowide', monospace;
    font-size: clamp(20px, 4.5vw, 30px);
    color: var(--gam-yellow);
    text-shadow: 0 0 14px rgba(255, 224, 78, 0.7);
    letter-spacing: 4px;
    margin-bottom: 10px;
    line-height: 1.05;
  }
  .gam-overlay-sub {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--gam-text);
    line-height: 1.55;
    margin-bottom: 16px;
    opacity: 0.85;
  }
  .gam-overlay-meta {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gam-cyan);
    text-transform: uppercase;
    margin-bottom: 16px;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  }
  .gam-overlay-meta b {
    font-family: 'Audiowide', monospace;
    font-size: 22px;
    color: var(--gam-yellow);
    margin-left: 8px;
    text-shadow: 0 0 8px rgba(255, 224, 78, 0.6);
    font-variant-numeric: tabular-nums;
  }
  .gam-overlay-meta .gam-meta-divider {
    margin: 0 12px;
    color: var(--gam-muted);
    opacity: 0.5;
  }
  .gam-overlay-final {
    font-family: 'Audiowide', monospace;
    font-size: clamp(36px, 8vw, 56px);
    line-height: 1;
    color: var(--gam-yellow);
    text-shadow: 0 0 18px rgba(255, 224, 78, 0.8), 0 0 36px rgba(255, 46, 136, 0.4);
    letter-spacing: 3px;
    margin: 4px 0 14px;
    font-variant-numeric: tabular-nums;
  }
  .gam-overlay-newbest {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border: 1px solid var(--gam-pink);
    border-radius: 999px;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gam-pink);
    text-shadow: 0 0 8px rgba(255, 46, 136, 0.7);
    animation: gam-newbest-pulse 1.4s ease-in-out infinite;
  }
  @keyframes gam-newbest-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 46, 136, 0.5); }
    50%      { box-shadow: 0 0 22px rgba(255, 46, 136, 1), 0 0 32px rgba(255, 224, 78, 0.4); }
  }

  /* ============================================================
     SHARED — buttons
     ============================================================ */
  .gam-btn {
    --c: var(--gam-cyan);
    appearance: none;
    border: 2px solid var(--c);
    background: rgba(0, 240, 255, 0.08);
    color: var(--c);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 18px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow:
      0 0 0 0 var(--c),
      0 0 12px rgba(0, 0, 0, 0) inset;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-shadow: 0 0 6px currentColor;
    text-align: center;
    line-height: 1.2;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .gam-btn:focus-visible {
    outline: 2px solid var(--gam-yellow);
    outline-offset: 3px;
  }
  .gam-btn:hover {
    background: color-mix(in srgb, var(--c) 18%, transparent);
    box-shadow: 0 0 14px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 25%, transparent);
  }
  .gam-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 0 18px var(--c), inset 0 0 22px color-mix(in srgb, var(--c) 45%, transparent);
  }
  .gam-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .gam-btn.gam-btn-magenta { --c: var(--gam-magenta); background: rgba(177, 78, 255, 0.08); }
  .gam-btn.gam-btn-pink    { --c: var(--gam-pink);    background: rgba(255, 46, 136, 0.08); }
  .gam-btn.gam-btn-yellow  { --c: var(--gam-yellow);  background: rgba(255, 224, 78, 0.08); }
  .gam-btn.gam-btn-ghost   { --c: var(--gam-muted);   background: transparent; font-size: 10px; padding: 8px 14px; letter-spacing: 3px; }

  /* ============================================================
     1. KILLSTREAK / COMBO CATCHER
     ============================================================ */
  .gam-killstreak-hero {
    height: 380px;
    display: grid;
    place-items: center;
    cursor: default;
  }
  .gam-tree-svg {
    width: 100%;
    max-width: 520px;
    height: 240px;
    display: block;
    overflow: visible;
  }
  .gam-tree-svg .gam-link {
    stroke: rgba(177, 78, 255, 0.55);
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(177, 78, 255, 0.6));
  }
  .gam-tree-svg .gam-node {
    fill: #14082a;
    stroke: var(--gam-magenta);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(177, 78, 255, 0.85));
    animation: gam-node-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  .gam-tree-svg .gam-node.gam-node-success {
    stroke: var(--gam-cyan);
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95));
  }
  .gam-tree-svg .gam-node.gam-node-fire {
    stroke: var(--gam-yellow);
    filter: drop-shadow(0 0 12px rgba(255, 224, 78, 0.95));
  }
  @keyframes gam-node-pulse {
    0%, 100% { r: 9; opacity: 0.85; }
    50%      { r: 11; opacity: 1; }
  }

  /* spirits — pre-allocated SVG circles, JS toggles .gam-spirit-alive */
  .gam-spirit {
    fill: var(--gam-cyan);
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 8px var(--gam-cyan));
    cursor: crosshair;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  .gam-spirit.gam-spirit-alive {
    opacity: 1;
    pointer-events: auto;
  }
  .gam-spirit.gam-spirit-fail {
    fill: var(--gam-pink);
    stroke: rgba(255, 220, 220, 0.85);
    filter: drop-shadow(0 0 10px var(--gam-pink)) drop-shadow(0 0 16px rgba(255, 46, 136, 0.6));
    animation: gam-spirit-throb 0.6s ease-in-out infinite;
  }
  .gam-spirit.gam-spirit-hit {
    transform: scale(2.2);
    opacity: 0;
  }
  @keyframes gam-spirit-throb {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
  }

  /* combo banner — preserved from original */
  .gam-banner-track {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end center;
    padding-bottom: 14px;
    pointer-events: none;
    z-index: 4;
  }
  .gam-banner {
    font-family: 'Audiowide', 'Orbitron', sans-serif;
    font-size: clamp(20px, 6.5vw, 64px);
    letter-spacing: clamp(1px, 0.5vw, 4px);
    text-transform: uppercase;
    padding: clamp(8px, 1.6vw, 14px) clamp(16px, 4vw, 38px);
    border: 2px solid currentColor;
    background: rgba(10, 6, 18, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 0 12px currentColor, 0 0 30px currentColor;
    box-shadow: 0 0 20px currentColor, inset 0 0 30px rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateX(-120%) skewX(-14deg);
    will-change: transform, opacity;
    white-space: nowrap;
    max-width: calc(100% - 24px);
  }
  .gam-banner.gam-tier-2 { color: var(--gam-cyan); }
  .gam-banner.gam-tier-3 { color: var(--gam-magenta); }
  .gam-banner.gam-tier-4 { color: var(--gam-pink); }
  .gam-banner.gam-tier-5 { color: var(--gam-yellow); }
  .gam-banner.gam-banner-active {
    animation: gam-banner-fly 2.4s cubic-bezier(0.18, 0.9, 0.32, 1.15) forwards;
  }
  @keyframes gam-banner-fly {
    0%   { opacity: 0;   transform: translateX(-120%) skewX(-14deg) scale(0.85); }
    14%  { opacity: 1;   transform: translateX(-2%)   skewX(-14deg) scale(1.05); }
    22%  {                transform: translateX(0)     skewX(0deg)   scale(1); }
    74%  { opacity: 1;   transform: translateX(0)     skewX(0deg)   scale(1); }
    88%  { opacity: 1;   transform: translateX(8%)    skewX(8deg)   scale(1); }
    100% { opacity: 0;   transform: translateX(140%)  skewX(14deg)  scale(0.95); }
  }

  /* score popups (when you hit a spirit) */
  .gam-pop {
    position: absolute;
    font-family: 'Audiowide', monospace;
    font-size: 16px;
    color: var(--gam-yellow);
    text-shadow: 0 0 10px rgba(255, 224, 78, 0.95);
    pointer-events: none;
    will-change: transform, opacity;
    animation: gam-pop-rise 0.9s ease-out forwards;
    white-space: nowrap;
    z-index: 7;
  }
  .gam-pop.gam-pop-pink { color: var(--gam-pink); text-shadow: 0 0 10px rgba(255, 46, 136, 0.95); }
  .gam-pop.gam-pop-cyan { color: var(--gam-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.95); }
  @keyframes gam-pop-rise {
    0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -42px) scale(0.85); }
  }

  /* ============================================================
     2. SCOREBOARD / PHASE CONDUCTOR
     ============================================================ */
  .gam-scoreboard-demo {
    padding: 48px 20px 22px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.05fr);
    gap: 20px;
    align-items: stretch;
    min-height: 460px;
  }
  @media (max-width: 600px) {
    .gam-scoreboard-demo {
      grid-template-columns: 1fr;
      padding: 44px 14px 18px;
      gap: 14px;
    }
  }

  .gam-scoreboard {
    position: relative;
    background: rgba(10, 6, 18, 0.55);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 10px;
    padding: 16px 16px 14px;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .gam-scoreboard h4 {
    margin: 0 0 8px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gam-cyan);
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  }
  .gam-score-total {
    font-family: 'Audiowide', monospace;
    font-size: 38px;
    line-height: 1;
    color: var(--gam-yellow);
    text-shadow: 0 0 14px rgba(255, 224, 78, 0.7);
    letter-spacing: 2px;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
  }
  .gam-score-total-label {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gam-muted);
    margin-bottom: 12px;
  }
  .gam-combo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    color: var(--gam-text);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
  }
  .gam-combo-value {
    font-family: 'Audiowide', monospace;
    font-size: 22px;
    color: var(--gam-magenta);
    text-shadow: 0 0 8px rgba(177, 78, 255, 0.6);
  }
  .gam-combo.gam-combo-fire .gam-combo-value {
    color: var(--gam-pink);
    text-shadow: 0 0 12px rgba(255, 46, 136, 0.8);
  }
  .gam-combo-fire-icon {
    display: inline-block;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.4) translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .gam-combo.gam-combo-fire .gam-combo-fire-icon {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: gam-fire-flicker 1.2s ease-in-out infinite;
  }
  @keyframes gam-fire-flicker {
    0%, 100% { transform: scale(1)    translateY(0)   rotate(-2deg); }
    50%      { transform: scale(1.18) translateY(-1px) rotate(3deg); }
  }
  .gam-combo-mult {
    margin-left: auto;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gam-cyan);
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.6);
  }
  .gam-combo-mult b {
    font-family: 'Audiowide', monospace;
    color: var(--gam-yellow);
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 224, 78, 0.6);
  }

  .gam-top-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }
  .gam-top-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    background: rgba(0, 240, 255, 0.05);
    border-left: 2px solid rgba(0, 240, 255, 0.4);
  }
  .gam-top-list li .gam-name { color: var(--gam-text); }
  .gam-top-list li .gam-pts {
    color: var(--gam-yellow);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(255, 224, 78, 0.4);
  }

  .gam-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
  }
  .gam-ach {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--gam-muted);
    opacity: 0.35;
    transition: all 0.3s ease;
  }
  .gam-ach.gam-ach-on {
    color: var(--gam-cyan);
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    animation: gam-ach-pop 0.6s ease-out;
  }
  .gam-ach.gam-ach-on.gam-ach-magenta {
    color: var(--gam-magenta);
    box-shadow: 0 0 10px rgba(177, 78, 255, 0.5);
  }
  .gam-ach.gam-ach-on.gam-ach-yellow {
    color: var(--gam-yellow);
    box-shadow: 0 0 10px rgba(255, 224, 78, 0.5);
  }
  .gam-ach.gam-ach-on.gam-ach-pink {
    color: var(--gam-pink);
    box-shadow: 0 0 10px rgba(255, 46, 136, 0.5);
  }
  @keyframes gam-ach-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
  }

  /* killstreak banner overlay used inside scoreboard demo */
  .gam-mini-banner-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    z-index: 10;
  }
  .gam-mini-banner-host .gam-banner {
    font-size: clamp(20px, 4.5vw, 36px);
    padding: 8px 22px;
  }

  /* RIGHT side — conductor queue + status + boost */
  .gam-conductor-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .gam-conductor-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    align-items: center;
  }
  .gam-stat {
    border: 1px solid rgba(0, 240, 255, 0.4);
    padding: 5px 9px;
    border-radius: 4px;
    color: var(--gam-cyan);
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
  }
  .gam-stat b {
    color: var(--gam-yellow);
    font-family: 'Audiowide', monospace;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 224, 78, 0.5);
    font-variant-numeric: tabular-nums;
  }
  .gam-stat.gam-stat-low { border-color: var(--gam-pink); color: var(--gam-pink); }
  .gam-stat.gam-stat-low b { color: var(--gam-pink); }

  .gam-boost-btn {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 5px 10px;
    border: 1px solid var(--gam-pink);
    background: rgba(255, 46, 136, 0.1);
    color: var(--gam-pink);
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 46, 136, 0.5);
    margin-left: auto;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
  }
  .gam-boost-btn:focus-visible { outline: 2px solid var(--gam-yellow); outline-offset: 2px; }
  .gam-boost-btn:hover:not([disabled]) {
    box-shadow: 0 0 14px var(--gam-pink);
  }
  .gam-boost-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
  .gam-boost-btn.gam-boost-armed {
    color: var(--gam-yellow);
    border-color: var(--gam-yellow);
    background: rgba(255, 224, 78, 0.15);
    animation: gam-boost-arm 0.7s ease-in-out infinite;
  }
  @keyframes gam-boost-arm {
    0%, 100% { box-shadow: 0 0 10px var(--gam-yellow); }
    50%      { box-shadow: 0 0 22px var(--gam-yellow), 0 0 32px var(--gam-pink); }
  }

  .gam-conductor-queue {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 1 1 auto;
  }
  .gam-worker-card {
    --c: var(--gam-cyan);
    position: relative;
    border: 1px solid var(--c);
    border-radius: 8px;
    padding: 9px 11px;
    background: rgba(10, 6, 18, 0.65);
    box-shadow: 0 0 10px color-mix(in srgb, var(--c) 25%, transparent);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    text-align: left;
    transition: transform 0.12s ease, opacity 0.3s ease, filter 0.3s ease;
    overflow: hidden;
    color: var(--c);
    user-select: none;
    -webkit-user-select: none;
  }
  .gam-worker-card[data-role="researcher"] { --c: var(--gam-cyan); }
  .gam-worker-card[data-role="builder"]    { --c: var(--gam-magenta); }
  .gam-worker-card[data-role="tester"]     { --c: var(--gam-pink); }
  .gam-worker-card[data-role="scorer"]     { --c: var(--gam-yellow); }
  .gam-worker-card[data-state="empty"] {
    opacity: 0.18;
    cursor: default;
    filter: grayscale(0.7);
  }
  .gam-worker-card[data-state="failing"] {
    animation: gam-worker-warn 0.5s ease-in-out infinite;
  }
  @keyframes gam-worker-warn {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50%      { box-shadow: 0 0 22px currentColor, 0 0 30px var(--gam-pink); }
  }
  .gam-worker-card.gam-worker-reject {
    animation: gam-worker-reject 0.32s ease-out;
  }
  @keyframes gam-worker-reject {
    0%   { transform: translateX(0); box-shadow: 0 0 10px currentColor; }
    20%  { transform: translateX(-6px); box-shadow: 0 0 18px var(--gam-pink), inset 0 0 18px rgba(255, 46, 136, 0.35); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); box-shadow: 0 0 10px currentColor; }
  }
  .gam-worker-card:hover:not([data-state="empty"]) { transform: translateY(-1px); }
  .gam-worker-card:active:not([data-state="empty"]) { transform: translateY(1px) scale(0.99); }
  .gam-worker-card:focus-visible {
    outline: 2px solid var(--gam-yellow);
    outline-offset: 2px;
  }
  .gam-worker-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
  }
  .gam-worker-role {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .gam-worker-name {
    font-family: 'Audiowide', monospace;
    font-size: 13px;
    color: var(--gam-text);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
  }
  .gam-worker-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
  }
  .gam-worker-bar > i {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    will-change: transform;
  }
  .gam-worker-pts {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: 'Audiowide', monospace;
    font-size: 11px;
    color: var(--gam-yellow);
    text-shadow: 0 0 6px rgba(255, 224, 78, 0.5);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     3. PIPELINE / SCORE SURGE
     ============================================================ */
  .gam-pipeline-flow {
    padding: 48px 16px 28px;
    min-height: 320px;
  }
  .gam-pipeline-svg {
    width: 100%;
    height: 220px;
    display: block;
    overflow: visible;
  }
  .gam-hex {
    fill: rgba(10, 6, 18, 0.85);
    stroke: var(--gam-cyan);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
    cursor: pointer;
    transition: filter 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
  }
  .gam-hex.gam-hex-pulse {
    filter: drop-shadow(0 0 16px rgba(255, 224, 78, 1)) drop-shadow(0 0 24px rgba(255, 224, 78, 0.7));
    stroke: var(--gam-yellow);
  }
  .gam-hex.gam-hex-charged {
    fill: rgba(0, 240, 255, 0.18);
    stroke: var(--gam-yellow);
    filter: drop-shadow(0 0 12px rgba(255, 224, 78, 0.95)) drop-shadow(0 0 20px rgba(0, 240, 255, 0.5));
  }
  .gam-hex.gam-hex-leak {
    animation: gam-hex-leak 0.55s ease-out;
  }
  @keyframes gam-hex-leak {
    0%   { stroke: var(--gam-pink); filter: drop-shadow(0 0 22px rgba(255, 46, 136, 1)); fill: rgba(255, 46, 136, 0.3); }
    100% { stroke: var(--gam-cyan); filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6)); fill: rgba(10, 6, 18, 0.85); }
  }
  .gam-hex-label {
    fill: var(--gam-text);
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    text-anchor: middle;
    font-weight: 700;
    letter-spacing: 1px;
    pointer-events: none;
  }
  .gam-hex-sub {
    fill: var(--gam-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-anchor: middle;
    pointer-events: none;
  }
  .gam-hex-charge-ring {
    fill: none;
    stroke: var(--gam-yellow);
    stroke-width: 2;
    stroke-dasharray: 6 3;
    pointer-events: none;
    opacity: 0;
    transform-origin: center center;
    transform-box: fill-box;
  }
  .gam-hex-charge-ring.gam-charge-on {
    opacity: 1;
    animation: gam-charge-spin 1.5s linear infinite;
  }
  @keyframes gam-charge-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .gam-pipe-wire {
    stroke: rgba(0, 240, 255, 0.3);
    stroke-width: 2;
    stroke-dasharray: 4 6;
    fill: none;
  }
  .gam-pipeline-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }

  /* ============================================================
     4. VICTORY EASTER EGG / CHARGE THE VICTORY
     ============================================================ */
  .gam-victory-easter-egg {
    height: 480px;
    cursor: default;
  }

  .gam-charge-zone {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    z-index: 5;
    transition: opacity 0.3s ease;
  }
  .gam-charge-zone .gam-charge-title {
    font-family: 'Audiowide', monospace;
    font-size: clamp(20px, 4.5vw, 30px);
    color: var(--gam-yellow);
    letter-spacing: 4px;
    text-shadow: 0 0 14px rgba(255, 224, 78, 0.6);
    margin-bottom: 8px;
  }
  .gam-charge-zone .gam-charge-desc {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--gam-text);
    line-height: 1.5;
    margin-bottom: 16px;
    opacity: 0.85;
    max-width: 320px;
  }
  .gam-charge-meter {
    width: clamp(180px, 70%, 320px);
    height: 26px;
    border: 2px solid var(--gam-yellow);
    border-radius: 14px;
    background: rgba(10, 6, 18, 0.7);
    position: relative;
    overflow: hidden;
    margin: 0 auto 14px;
    box-shadow: 0 0 14px rgba(255, 224, 78, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.6);
  }
  .gam-charge-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--gam-cyan), var(--gam-magenta), var(--gam-pink), var(--gam-yellow));
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.4);
    transition: width 0.06s linear;
  }
  .gam-charge-pct {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Audiowide', monospace;
    font-size: 13px;
    color: var(--gam-text);
    text-shadow: 0 0 4px black, 0 0 4px black;
    font-variant-numeric: tabular-nums;
    z-index: 2;
  }
  .gam-charge-btn {
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 2px solid var(--gam-yellow);
    background: rgba(255, 224, 78, 0.1);
    color: var(--gam-yellow);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    text-shadow: 0 0 6px rgba(255, 224, 78, 0.6);
    transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .gam-charge-btn:focus-visible {
    outline: 2px solid var(--gam-cyan);
    outline-offset: 3px;
  }
  .gam-charge-btn:hover { box-shadow: 0 0 18px var(--gam-yellow); }
  .gam-charge-btn.gam-charge-pressed {
    background: rgba(255, 224, 78, 0.4);
    box-shadow: 0 0 26px var(--gam-yellow), 0 0 40px var(--gam-pink);
    transform: scale(0.97);
  }
  .gam-charge-tier-msg {
    margin-top: 14px;
    font-family: 'Audiowide', monospace;
    font-size: clamp(16px, 3vw, 22px);
    letter-spacing: 2px;
    color: var(--gam-text);
    min-height: 26px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  .gam-charge-tier-msg.gam-tier-perfect {
    color: var(--gam-yellow);
    text-shadow: 0 0 14px var(--gam-yellow), 0 0 28px rgba(255, 46, 136, 0.6);
  }
  .gam-charge-tier-msg.gam-tier-charged {
    color: var(--gam-pink);
    text-shadow: 0 0 12px rgba(255, 46, 136, 0.7);
  }
  .gam-charge-tier-msg.gam-tier-almost {
    color: var(--gam-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
  }
  .gam-charge-stats {
    margin-top: 6px;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gam-muted);
    text-transform: uppercase;
  }
  .gam-charge-stats b {
    color: var(--gam-yellow);
    font-family: 'Audiowide', monospace;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
  }

  .gam-victory-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(177, 78, 255, 0.35), rgba(10, 6, 18, 0.92) 60%, rgba(10, 6, 18, 1));
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 30;
  }
  .gam-victory-overlay.gam-victory-on {
    opacity: 1;
    pointer-events: auto;
  }
  .gam-victory-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .gam-victory-text {
    font-family: 'Audiowide', sans-serif;
    font-size: clamp(36px, 9vw, 92px);
    line-height: 1;
    letter-spacing: clamp(2px, 0.6vw, 8px);
    color: var(--gam-yellow);
    text-align: center;
    text-shadow: 0 0 14px var(--gam-yellow), 0 0 28px rgba(255, 224, 78, 0.7), 0 0 44px rgba(255, 46, 136, 0.55);
    transform: scale(0.6);
    opacity: 0;
    padding: 0 16px;
    max-width: 100%;
    word-break: break-word;
    z-index: 2;
    position: relative;
  }
  .gam-victory-overlay.gam-victory-on .gam-victory-text {
    animation: gam-victory-pop 0.7s cubic-bezier(0.18, 0.9, 0.32, 1.25) forwards,
               gam-victory-pulse 1.6s ease-in-out 0.7s infinite;
  }
  .gam-victory-sub {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: clamp(12px, 2.4vw, 16px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gam-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
    z-index: 3;
    text-align: center;
    width: max-content;
    max-width: calc(100% - 40px);
    opacity: 0;
  }
  .gam-victory-overlay.gam-victory-on .gam-victory-sub {
    animation: gam-victory-subfade 0.6s ease-out 0.3s forwards;
  }
  .gam-victory-sub.gam-victory-sub-perfect {
    color: var(--gam-yellow);
    text-shadow: 0 0 14px var(--gam-yellow), 0 0 24px rgba(255, 46, 136, 0.7);
  }
  @keyframes gam-victory-subfade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  @keyframes gam-victory-pop {
    0%   { transform: scale(0.4) rotate(-4deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
    100% { transform: scale(1)    rotate(0);    opacity: 1; }
  }
  @keyframes gam-victory-pulse {
    0%, 100% { transform: scale(1);    text-shadow: 0 0 14px var(--gam-yellow), 0 0 28px rgba(255, 224, 78, 0.7), 0 0 44px rgba(255, 46, 136, 0.55); }
    50%      { transform: scale(1.04); text-shadow: 0 0 20px var(--gam-yellow), 0 0 40px rgba(255, 224, 78, 0.95), 0 0 64px rgba(255, 46, 136, 0.8); }
  }

  /* ============================================================
     Reduced motion
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .gam-stage *, .gam-stage *::before, .gam-stage *::after {
      animation: none !important;
      transition: none !important;
    }
    .gam-banner { opacity: 1 !important; transform: none !important; }
    .gam-victory-overlay { opacity: 1; pointer-events: none; }
    .gam-victory-text, .gam-victory-sub { opacity: 1; transform: none; }
    .gam-spirit { display: none !important; }
    .gam-charge-fill { transition: none !important; }
  }
  .gam-reduced-notice {
    position: absolute;
    inset: auto 0 12px 0;
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gam-cyan);
    opacity: 0.7;
    pointer-events: none;
    text-transform: uppercase;
    z-index: 11;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .gam-reduced-notice { display: block; }
    .gam-overlay { display: none !important; }
  }