:root {
      --bg: #000008;
      --cyan: #00ddff;
      --purple: #bb00ff;
      --p1: #2255ff;
      --p2: #ff2200;
      --gold: #ffbb00;
      --text: #ddeeff;
      --dim: #445566;
      --glass: rgba(1, 2, 14, 0.84);
      --gborder: rgba(0, 180, 255, 0.16);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Rajdhani', 'Segoe UI', sans-serif;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
    }

    #c {
      display: block;
      position: fixed;
      top: var(--kg-header-h, 48px);
      bottom: var(--kg-rail-h, 48px);
      left: 0;
      right: 0;
      width: 100%;
      height: calc(100dvh - var(--kg-header-h, 48px) - var(--kg-rail-h, 48px));
      z-index: 0;
    }

    /* ── Header rail player chips ──────────────────────────────────────── */
    .rail-brand {
      font-family: 'Orbitron', monospace;
      font-size: 11px;
      letter-spacing: 2px;
      color: var(--cyan);
      text-decoration: none;
      padding-right: 10px;
      border-right: 1px solid rgba(0, 220, 255, 0.18);
      margin-right: 8px;
      flex-shrink: 0;
    }

    .rail-players {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .rail-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 2px 7px;
      border-radius: 6px;
      border: 1px solid rgba(100, 140, 180, 0.15);
      background: rgba(0, 0, 12, 0.45);
      transition: border-color .3s, box-shadow .3s;
      cursor: default;
    }

    .rail-chip.active {
      background: rgba(0, 0, 20, 0.7);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    .rail-chip.active.p1-chip-active {
      border-color: #c81a2a;
    }

    .rail-chip.active.p2-chip-active {
      border-color: #1f8a4a;
    }

    .rail-chip.active.p3-chip-active {
      border-color: #6020c8;
    }

    .rail-chip.active.p4-chip-active {
      border-color: #d9a82a;
    }

    .rail-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Orbitron', monospace;
      font-size: 9px;
      font-weight: 900;
      border: 1.5px solid currentColor;
      flex-shrink: 0;
      position: relative;
    }

    .rail-badge.pulse::after {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      animation: badge-ring 1.5s ease-in-out infinite;
    }

    @keyframes badge-ring {

      0%,
      100% {
        opacity: .9;
        transform: scale(1);
      }

      50% {
        opacity: .1;
        transform: scale(1.3);
      }
    }

    .rail-name {
      font-family: 'Orbitron', monospace;
      font-size: 8px;
      letter-spacing: 0.8px;
      color: #c8d8ef;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 68px;
    }

    .rail-score {
      font-family: 'Orbitron', monospace;
      font-size: 14px;
      font-weight: 900;
      flex-shrink: 0;
      min-width: 16px;
      text-align: right;
    }

    .rail-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
    }

    .rail-sep {
      color: var(--dim);
      font-size: 10px;
    }

    .rail-timer {
      font-family: 'Orbitron', monospace;
      font-size: 11px;
      letter-spacing: 1px;
      flex-shrink: 0;
      color: var(--cyan);
      min-width: 28px;
      text-align: right;
      padding-left: 10px;
    }

    /* ── Player badge / score colors (BPALETTE glow tones) ─────────────── */
    .p1-badge {
      color: #c81a2a;
    }

    .p2-badge {
      color: #1f8a4a;
    }

    .p3-badge {
      color: #6020c8;
    }

    .p4-badge {
      color: #d9a82a;
    }

    .p1-score {
      color: #c81a2a;
      text-shadow: 0 0 10px rgba(200, 26, 42, 0.55);
    }

    .p2-score {
      color: #1f8a4a;
      text-shadow: 0 0 10px rgba(31, 138, 74, 0.55);
    }

    .p3-score {
      color: #6020c8;
      text-shadow: 0 0 10px rgba(96, 32, 200, 0.55);
    }

    .p4-score {
      color: #d9a82a;
      text-shadow: 0 0 10px rgba(217, 168, 42, 0.55);
    }

    /* ── Footer rail overrides ──────────────────────────────────────────── */
    #kg-rail .btn-ghost.on {
      background: rgba(0, 255, 255, 0.16);
      border-color: #00ffff;
      color: #fff;
    }

    /* ── ORIENT button (amber / warning tone) ───────────────────────────── */
    .btn-orient {
      padding: 0 14px;
      height: 36px;
      border-radius: 6px;
      font-family: 'Orbitron', 'Rajdhani', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      background: rgba(255, 176, 0, 0.12);
      border: 1px solid rgba(255, 176, 0, 0.55);
      color: #ffcc44;
      line-height: 1;
      transition: all .2s;
    }

    .btn-orient:hover {
      background: rgba(255, 176, 0, 0.26);
      box-shadow: 0 0 14px rgba(255, 176, 0, 0.5);
    }

    .btn-orient.orient-pulse {
      animation: orient-flash 0.35s 2 ease-in-out;
    }

    @keyframes orient-flash {

      0%,
      100% {
        background: rgba(255, 176, 0, .12);
      }

      50% {
        background: rgba(255, 80, 0, .5);
        box-shadow: 0 0 18px rgba(255, 80, 0, .7);
      }
    }

    @media (max-width: 600px) {
      .rail-name {
        display: none;
      }

      .rail-brand {
        display: none;
      }

      .rail-sep {
        display: none;
      }
    }

    /* player-panel / panel-* / mob-chip styles removed — see rail-chip above */

    /* #hud-top removed — scenario-tag and turn-indicator now live in the
       header rail. Keep the standalone ID styles so they apply correctly. */

    #scenario-tag {
      font-family: 'Orbitron', monospace;
      font-size: 7px;
      color: var(--purple);
      letter-spacing: 3px;
    }

    #turn-indicator {
      font-family: 'Orbitron', monospace;
      font-size: 13px;
      letter-spacing: 2px;
    }

    #turn-timer {
      font-size: 9px;
      letter-spacing: 1px;
      min-height: 14px;
    }

    /* Turn announcement banner. Appears centred near the top of the screen for ~1.4s when the
       active player changes. Pointer-events disabled so it never blocks the cursor ball aim. */
    #turn-announce {
      position: fixed;
      top: 110px;
      left: 50%;
      transform: translateX(-50%) scale(0.6);
      z-index: 200;
      font-family: 'Orbitron', monospace;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 6px;
      padding: 14px 32px;
      border-radius: 10px;
      background: rgba(0, 0, 10, .55);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, .15);
      color: #fff;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1);
    }

    #turn-announce.show {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }

    #col-grid {
      position: fixed;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      pointer-events: auto;
      background: rgba(0, 1, 10, .82);
      backdrop-filter: blur(12px);
      border: 1px solid var(--gborder);
      border-radius: 10px;
      padding: 7px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    #cg-label {
      font-family: 'Orbitron', monospace;
      font-size: 7px;
      color: var(--dim);
      letter-spacing: 2px;
    }

    .cg-row {
      display: flex;
      gap: 4px;
    }

    .drop-btn {
      width: 40px;
      height: 34px;
      background: rgba(0, 160, 220, .05);
      border: 1px solid rgba(0, 160, 220, .18);
      border-radius: 5px;
      color: var(--cyan);
      font-family: 'Orbitron', monospace;
      font-size: 6px;
      letter-spacing: .5px;
      cursor: pointer;
      transition: all .16s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
    }

    .drop-btn:hover:not(:disabled) {
      background: rgba(0, 180, 240, .18);
      border-color: var(--cyan);
      box-shadow: 0 0 10px rgba(0, 220, 255, .3);
      transform: translateY(-2px);
    }

    .drop-btn.p2b {
      color: var(--p2);
      border-color: rgba(255, 50, 0, .18);
    }

    .drop-btn.p2b:hover:not(:disabled) {
      background: rgba(255, 50, 0, .14);
      border-color: var(--p2);
      box-shadow: 0 0 10px rgba(255, 50, 0, .3);
    }

    .drop-btn:disabled {
      opacity: .15;
      cursor: not-allowed;
      transform: none;
    }

    .drop-btn .da {
      font-size: 13px;
      line-height: 1;
    }

    .drop-btn .dl {
      font-size: 5px;
      color: var(--dim);
    }

    /* #cam-controls and .cam-btn removed — camera buttons now live in the
       fixed footer rail as .btn-ghost buttons (styled by control-rail.css). */

    #scenario-select {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0, 0, 10, .94);
      backdrop-filter: blur(18px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    #scenario-select.show {
      display: flex;
    }

    .ss-title {
      font-family: 'Orbitron', monospace;
      font-size: 26px;
      letter-spacing: 6px;
      color: var(--cyan);
    }

    .ss-sub {
      font-size: 11px;
      color: var(--dim);
      letter-spacing: 2px;
    }

    .ss-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      max-width: 660px;
      width: 100%;
      padding: 0 18px;
    }

    .ss-card {
      padding: 14px 10px;
      border: 1px solid rgba(100, 40, 200, .25);
      border-radius: 8px;
      background: rgba(8, 4, 22, .88);
      cursor: pointer;
      transition: all .2s;
      text-align: center;
      user-select: none;
    }

    .ss-card:hover,
    .ss-card.sel {
      border-color: var(--purple);
      background: rgba(70, 0, 110, .28);
      transform: translateY(-3px);
      box-shadow: 0 8px 26px rgba(150, 0, 255, .2);
    }

    .ss-card.sel {
      box-shadow: 0 0 0 2px var(--purple), 0 8px 26px rgba(150, 0, 255, .3);
    }

    .ss-icon {
      font-size: 26px;
      margin-bottom: 6px;
    }

    .ss-name {
      font-family: 'Orbitron', monospace;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--cyan);
      margin-bottom: 4px;
    }

    .ss-desc {
      font-size: 8px;
      color: var(--dim);
      line-height: 1.5;
      white-space: pre-line;
    }

    .ss-row {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .ss-vs-btn {
      padding: 9px 24px;
      border-radius: 6px;
      font-family: 'Orbitron', monospace;
      font-size: 10px;
      letter-spacing: 1px;
      cursor: pointer;
      border: 1px solid;
      transition: all .2s;
    }

    .pvp-btn {
      color: var(--cyan);
      border-color: rgba(0, 200, 255, .3);
      background: rgba(0, 200, 255, .06);
    }

    .pvp-btn:hover,
    .pvp-btn.sel {
      background: rgba(0, 200, 255, .16);
    }

    .ai-btn {
      color: var(--purple);
      border-color: rgba(180, 0, 255, .3);
      background: rgba(180, 0, 255, .06);
    }

    .ai-btn:hover,
    .ai-btn.sel {
      background: rgba(180, 0, 255, .16);
    }

    .ss-diff-row {
      display: none;
      gap: 8px;
    }

    .ss-diff-row.show {
      display: flex;
    }

    .diff-btn {
      padding: 6px 14px;
      border-radius: 5px;
      font-family: 'Orbitron', monospace;
      font-size: 8px;
      letter-spacing: 1px;
      cursor: pointer;
      border: 1px solid rgba(200, 120, 0, .25);
      background: rgba(200, 100, 0, .05);
      color: #ffaa44;
      transition: all .2s;
    }

    .diff-btn:hover,
    .diff-btn.sel {
      background: rgba(200, 100, 0, .18);
      border-color: #ffaa44;
    }

    .launch-btn {
      padding: 12px 36px;
      background: linear-gradient(90deg, rgba(0, 180, 255, .15), rgba(150, 0, 255, .15));
      border: 1px solid rgba(100, 100, 255, .35);
      border-radius: 7px;
      color: #aaddff;
      font-family: 'Orbitron', monospace;
      font-size: 12px;
      letter-spacing: 3px;
      cursor: pointer;
      transition: all .25s;
    }

    .launch-btn:hover {
      background: linear-gradient(90deg, rgba(0, 180, 255, .28), rgba(150, 0, 255, .28));
      box-shadow: 0 0 24px rgba(100, 100, 255, .3);
    }

    /* Win/draw card: compact, centred, semi-transparent. Replaces the previous full-screen
       blur-out so the player can still see the winning line on the board behind the card. */
    #result-overlay {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 400;
      background: rgba(0, 0, 10, .85);
      border: 1px solid rgba(0, 200, 255, .3);
      border-radius: 12px;
      padding: 28px 38px;
      box-shadow: 0 0 60px rgba(0, 200, 255, .2), 0 0 30px rgba(180, 0, 255, .15);
      pointer-events: auto;
      min-width: 320px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    #result-overlay.show {
      display: flex;
    }

    #result-title {
      font-family: 'Orbitron', monospace;
      font-size: 2.8em;
      letter-spacing: 5px;
      text-align: center;
      animation: pop-in .55s cubic-bezier(.2, 1.6, .4, 1) both;
    }

    #result-line {
      font-size: .85em;
      color: #aabbcc;
      letter-spacing: 1px;
    }

    #result-tally {
      font-size: .7em;
      color: var(--dim);
      letter-spacing: 1px;
    }

    @keyframes pop-in {
      from {
        transform: scale(.4);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .r-btn-row {
      display: flex;
      gap: 12px;
      margin-top: 6px;
    }

    .r-btn {
      padding: 10px 22px;
      border-radius: 6px;
      font-family: 'Orbitron', monospace;
      font-size: 9px;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all .2s;
      border: 1px solid;
    }

    .r-btn.ok {
      color: var(--cyan);
      border-color: rgba(0, 200, 255, .3);
      background: rgba(0, 200, 255, .07);
    }

    .r-btn.ok:hover {
      background: rgba(0, 200, 255, .2);
    }

    .r-btn.alt {
      color: var(--purple);
      border-color: rgba(180, 0, 255, .3);
      background: rgba(180, 0, 255, .06);
    }

    .r-btn.alt:hover {
      background: rgba(180, 0, 255, .18);
    }

    #preloader {
      position: fixed;
      inset: 0;
      z-index: 600;
      background: #000008;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      transition: opacity .8s;
    }

    .pre-t {
      font-family: 'Orbitron', monospace;
      font-size: 22px;
      letter-spacing: 5px;
      color: var(--cyan);
    }

    .pre-s {
      font-size: 10px;
      color: var(--dim);
      letter-spacing: 2px;
    }

    .pre-bar-w {
      width: 200px;
      height: 2px;
      background: rgba(0, 200, 255, .12);
      border-radius: 2px;
      overflow: hidden;
    }

    .pre-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--cyan), var(--purple));
      width: 0;
      transition: width .35s;
      border-radius: 2px;
    }

    .pre-spinner {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 2px solid rgba(0, 200, 255, .15);
      border-top-color: var(--cyan);
      border-right-color: var(--purple);
      animation: preSpin 1.05s linear infinite;
      box-shadow: 0 0 18px rgba(0, 200, 255, .35), inset 0 0 12px rgba(140, 0, 255, .25);
    }

    @keyframes preSpin {
      to {
        transform: rotate(360deg);
      }
    }

    /* mobile-player-strip, side-panel, cam-controls media blocks removed — replaced by control-rail.css */