:root {
      --bg: #0a1018;
      --panel: rgba(12, 19, 32, 0.84);
      --line: rgba(151, 185, 255, 0.14);
      --text: #edf4ff;
      --muted: #9fb3d7;
      --accent: #82f5d7;
      --accent-2: #67a7ff;
      --wall: #263349;
      --floor: #121a29;
      --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
      font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    }

    body.caps-pending { visibility: hidden; }

    * { box-sizing: border-box; }
    html {
      height: 100%;
      overflow: hidden;
      background: #08111c;
    }

    body {
      margin: 0;
      position: fixed;
      inset: 0;
      overflow: hidden;
      overscroll-behavior: none;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(103, 167, 255, 0.16), transparent 24%),
        linear-gradient(160deg, #08111c, #05070c 40%, #0d1522);
    }

    /* ── App shell: sidebar + viewer area ─────────────────────────────────── */

    .app-shell {
      display: flex;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
    }

    /* ── Arena sidebar ──────────────────────────────────────────────────────── */

    .arena-sidebar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 52px;
      padding: 12px 6px;
      background: rgba(8, 14, 24, 0.7);
      border-right: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }

    .arena-tabs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .arena-tab-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      padding-bottom: 8px;
      margin-bottom: 2px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .arena-tab-group:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .arena-tab-group-label {
      width: 36px;
      color: var(--muted);
      font-size: 0.52rem;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .arena-tab {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 0.72rem;
      font-weight: 600;
      transition: background 0.15s, border-color 0.15s;
      position: relative;
    }

    .arena-tab:hover {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.2);
      color: var(--text);
    }

    .arena-tab:disabled:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      color: var(--muted);
    }

    .arena-tab.active {
      background: rgba(103,167,255,0.14);
      border-color: rgba(103,167,255,0.35);
      color: var(--text);
    }

    .arena-tab-public {
      border-color: rgba(79, 201, 126, 0.32);
    }

    .arena-tab-private {
      border-color: rgba(148, 163, 184, 0.24);
    }

    .arena-tab-replay {
      cursor: default;
      border-color: rgba(103,167,255,0.35);
      background: rgba(103,167,255,0.14);
      color: var(--text);
    }

    .arena-tab-number {
      line-height: 1;
    }

    .arena-tab-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--muted);
    }

    .arena-tab.waiting  .arena-tab-dot { background: #f5b942; }
    .arena-tab.running  .arena-tab-dot { background: #4fc97e; }
    .arena-tab.finished .arena-tab-dot { background: #60a5fa; }

    .arena-tab.running .arena-tab-dot {
      animation: arena-activity-pulse 1.8s ease-in-out infinite;
    }

    @keyframes arena-activity-pulse {
      0%, 100% { opacity: 0.25; }
      50%      { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .arena-tab.running .arena-tab-dot { animation: none; }
    }

    .arena-tab-add {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px dashed rgba(255,255,255,0.18);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      margin-top: 4px;
    }

    .arena-tab-add:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.3);
      color: var(--text);
    }

    .arena-tab-add:disabled:hover {
      background: transparent;
      border-color: rgba(255,255,255,0.18);
      color: var(--muted);
    }

    /* ── Viewer area ───────────────────────────────────────────────────────── */

    .viewer-area {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── Topbar ────────────────────────────────────────────────────────────── */

    .viewer-topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 48px;
      padding: 0 12px;
      background: rgba(8, 14, 24, 0.88);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      flex-shrink: 0;
    }

    .topbar-identity {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    .workspace-switch {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 6px;
    }

    .workspace-switch-btn.is-active {
      background: rgba(103, 167, 255, 0.16);
      border-color: rgba(103, 167, 255, 0.3);
      color: var(--text);
    }

    .topbar-identity-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .topbar-identity h1 {
      font-size: 0.9rem;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .topbar-subtitle {
      color: var(--muted);
      font-size: 0.72rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
    }

    .topbar-subtitle i {
      font-size: 0.65rem;
      opacity: 0.8;
      vertical-align: middle;
    }

    .partner-overlay-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    .partner-overlay-badge {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.35rem 0.75rem;
      border-radius: 8px;
      background: rgba(10, 14, 22, 0.42);
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.85rem;
      text-decoration: none;
      white-space: nowrap;
      pointer-events: auto;
    }

    .partner-overlay-badge.hidden {
      display: none;
    }

    .partner-overlay-badge[data-corner="top-left"] { top: 10px; left: 10px; }
    .partner-overlay-badge[data-corner="top-right"] { top: 10px; right: 10px; }
    .partner-overlay-badge[data-corner="bottom-left"] { bottom: 10px; left: 10px; }
    .partner-overlay-badge[data-corner="bottom-right"] { bottom: 10px; right: 10px; }

    .partner-overlay-logo {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    .partner-overlay-logo.hidden {
      display: none;
    }

    .partner-slot-group {
      margin-bottom: 10px;
    }

    .partner-slot-group-title {
      margin: 0 0 4px;
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 600;
    }

    .partner-slot-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .partner-slot-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.02);
      position: relative;
    }

    .partner-slot-dropzone {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted);
      padding: 0;
    }

    .partner-slot-dropzone.is-dragover {
      border-color: rgba(103, 167, 255, 0.6);
      background: rgba(103, 167, 255, 0.08);
    }

    .partner-slot-thumb {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .partner-slot-thumb.hidden {
      display: none;
    }

    .partner-slot-name {
      flex: 1;
      min-width: 0;
    }

    .partner-slot-id {
      font-size: 0.62rem;
      color: var(--muted);
      flex-shrink: 0;
      width: 64px;
    }

    .partner-slot-icon-btn {
      flex-shrink: 0;
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 2px 4px;
    }

    .partner-slot-icon-btn:hover {
      color: var(--text);
    }

    .partner-slot-bg-toggle[data-active="false"] {
      opacity: 0.35;
    }

    .partner-slot-remove-logo.is-inactive {
      visibility: hidden;
    }

    .partner-slot-icon-btn.hidden {
      display: none;
    }

    .partner-slot-row .partner-slot-toggle {
      margin: 0;
      flex-shrink: 0;
    }

    .partner-slot-link-popover {
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 2;
      display: flex;
      gap: 4px;
      padding: 6px;
      margin-top: 3px;
      background: #10151f;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 6px;
    }

    .partner-slot-link-popover.hidden {
      display: none;
    }


    .topbar-status {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      min-width: 18px;
      overflow: visible;
    }

    .viewer-toggle {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      margin-top: 8px;
      color: var(--text);
      font-size: 0.72rem;
    }

    .viewer-toggle input {
      width: auto;
      margin: 0;
    }

    .topbar-actions {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }

    .topbar-toggles {
      display: none;
      gap: 5px;
      flex-shrink: 0;
    }

    .topbar-toggles .is-active {
      background: rgba(103, 167, 255, 0.16);
      border-color: rgba(103, 167, 255, 0.3);
      color: var(--text);
    }

    .mobile-controls-sheet {
      display: none;
    }

    /* ── Arena body ────────────────────────────────────────────────────────── */

    .arena-body {
      flex: 1;
      display: flex;
      min-height: 0;
      overflow: hidden;
    }

    /* ── Player sidebar ────────────────────────────────────────────────────── */

    .player-sidebar {
      width: 200px;
      flex-shrink: 0;
      background: rgba(8, 14, 24, 0.5);
      border-right: 1px solid var(--line);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px;
      position: relative;
      pointer-events: auto;
    }

    .arena-timer {
      position: absolute;
      bottom: 30px;
      left: 12px;
      display: flex;
      align-items: baseline;
      gap: 5px;
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,0.38);
      pointer-events: none;
      z-index: 140;
      letter-spacing: 0.02em;
    }

    .arena-timer.hidden { display: none; }

    .arena-timer .timer-value {
      font-size: 0.88rem;
      font-weight: 600;
      color: rgba(255,255,255,0.55);
    }

    .arena-timer.timer-warning .timer-value { color: var(--accent); }
    .arena-timer.timer-reset .timer-value { color: var(--accent); }
    .arena-timer.timer-danger  .timer-value { color: var(--accent); }

    .arena-timer .timer-label {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.28);
    }

    .player-sidebar-header-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .player-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      width: 100%;
      margin-bottom: 8px;
      padding: 2px 2px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      border-radius: 0;
      background: transparent;
      cursor: pointer;
      color: var(--muted);
      text-align: left;
      transition: color 160ms ease;
    }

    .player-sidebar-header:hover {
      background: transparent;
      color: color-mix(in srgb, currentColor 88%, white 12%);
    }

    .player-sidebar-header::after {
      content: "▴";
      font-size: 0.74rem;
      color: currentColor;
      line-height: 1;
    }

    .player-sidebar-header[data-player-view="rail"]::after {
      content: "▾";
    }

    .player-sidebar-title {
      font-size: 0.68rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      transition: color 160ms ease;
    }

    .player-sidebar-header:hover .player-sidebar-title {
      color: color-mix(in srgb, var(--muted) 82%, white 18%);
    }

    .player-sidebar .players {
      display: grid;
      gap: 5px;
    }

    .player-sidebar .player-card {
      align-items: stretch;
      gap: 4px;
      padding: 7px 8px;
      cursor: pointer;
      pointer-events: auto;
    }

    .player-sidebar .player-card > span.player-dot {
      display: none;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      align-self: flex-start;
      margin-top: 8px;
      box-shadow: 0 0 0 1px rgba(7, 12, 21, 0.8);
    }

    .player-sidebar .player-meta,
    .player-sidebar .channel-activity,
    .player-sidebar .kick-btn,
    .player-sidebar .command-badge {
      display: none;
    }

    .player-sidebar .player-stats {
      display: grid;
      gap: 3px;
    }

    .player-sidebar .player-stat-row + .player-stat-row {
      display: none;
    }

    .player-stat-note {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.66rem;
      line-height: 1.2;
    }

    .player-sidebar .player-stat-line {
      display: none;
    }

    .player-sidebar .player-stat-track {
      height: 4px;
    }

    .player-sidebar .player-card.expanded {
      cursor: default;
      background: rgba(130, 245, 215, 0.06);
      border-color: rgba(130, 245, 215, 0.22);
    }

    .player-sidebar .player-card.expanded .player-meta,
    .player-sidebar .player-card.expanded .channel-activity,
    .player-sidebar .player-card.expanded .kick-btn,
    .player-sidebar .player-card.expanded .command-badge {
      display: block;
    }

    .player-sidebar .player-card.expanded .player-stat-row + .player-stat-row {
      display: block;
    }

    .player-sidebar .player-card.expanded .player-stat-line {
      display: flex;
    }

    .player-sidebar .player-card.expanded .player-stat-track {
      height: 8px;
    }

    .player-mini-flags {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-sidebar {
      width: 34px;
      padding: 8px 3px;
    }

    .app-shell[data-player-view="rail"] .player-sidebar-header-row {
      justify-content: center;
    }

    .app-shell[data-player-view="rail"] .player-sidebar-header {
      justify-content: center;
      margin-bottom: 6px;
      padding: 0 0 6px;
    }

    .app-shell[data-player-view="rail"] .player-sidebar-title {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .players {
      justify-items: center;
      gap: 6px;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .team-header {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .player-card {
      width: 24px;
      min-width: 24px;
      min-height: 24px;
      padding: 2px;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border-radius: 999px;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .player-card > div {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .player-actions-stack {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-sidebar .player-card > span.player-dot {
      display: block;
      align-self: center;
      width: 8px;
      height: 8px;
      margin-top: 0;
      box-shadow: 0 0 0 1px rgba(7, 12, 21, 0.8);
    }

    .app-shell[data-player-view="rail"] .player-mini-flags {
      position: absolute;
      right: -1px;
      bottom: -1px;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 0.5rem;
      color: var(--text);
    }

    .app-shell[data-player-view="rail"] .player-mini-flag {
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.3);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    }

    .app-shell[data-player-view="rail"] .player-mini-flag.sees {
      display: none;
    }

    .app-shell[data-player-view="rail"] .player-mini-flag.stunned {
      background: #ffbe0b;
    }

    .app-shell[data-player-view="rail"] .player-mini-flag.resident {
      background: var(--accent);
    }

    .app-shell[data-player-view="rail"] .player-card[data-player-alive="false"] > span.player-dot {
      opacity: 0.38;
      filter: grayscale(1);
    }

    /* ── Arena column ──────────────────────────────────────────────────────── */

    .arena-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
    }

    .arena-viewport-wrap {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .build-preview-note {
      padding: 10px 14px 0;
      flex-shrink: 0;
    }

    .build-preview-note.hidden {
      display: none;
    }

    .build-preview-note-card {
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(103, 167, 255, 0.14);
      background:
        linear-gradient(135deg, rgba(103, 167, 255, 0.09), rgba(130, 245, 215, 0.06)),
        rgba(8, 14, 24, 0.74);
      box-shadow: var(--shadow);
    }

    .build-preview-note-card h2 {
      margin-top: 6px;
      font-size: 0.95rem;
    }

    .build-preview-note-card p {
      margin-top: 6px;
      font-size: 0.76rem;
      line-height: 1.5;
      color: var(--muted);
      max-width: 70ch;
    }

    .build-worlds-panel {
      position: absolute;
      top: 46px;
      left: 12px;
      z-index: 22;
      display: none;
      width: min(620px, calc(100% - 24px));
      max-height: min(68vh, 620px);
      overflow: hidden;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(8, 14, 24, 0.92);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .build-worlds-panel.is-open {
      display: block;
    }

    .build-worlds-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .build-worlds-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .build-worlds-header h3 {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text);
    }

    .build-worlds-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      max-height: calc(min(68vh, 620px) - 58px);
      overflow: auto;
      padding-right: 2px;
      scrollbar-width: none;
    }

    .build-worlds-list::-webkit-scrollbar {
      display: none;
    }

    .build-world-card {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
    }

    .build-world-card-empty {
      color: var(--muted);
      font-size: 0.74rem;
    }

    .build-world-name {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text);
    }

    .build-world-meta {
      margin-top: 4px;
      font-size: 0.72rem;
      color: var(--muted);
      line-height: 1.45;
    }

    .build-world-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .text-dialog {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .text-dialog.hidden {
      display: none;
    }

    .text-dialog-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 8, 14, 0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .text-dialog-card {
      position: relative;
      width: min(760px, 100%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
    }

    .text-dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .text-dialog-subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.74rem;
      line-height: 1.45;
    }

    .text-dialog-input {
      min-height: 260px;
      resize: vertical;
      font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 0.75rem;
      line-height: 1.45;
    }

    .text-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    /* ── Create arena panel ─────────────────────────────────────────────────── */

    .create-arena-panel {
      position: fixed;
      top: 0;
      left: 52px;
      bottom: 0;
      width: 380px;
      background: rgba(10, 16, 28, 0.97);
      border-right: 1px solid rgba(255,255,255,0.09);
      z-index: 100;
      overflow-y: auto;
      scrollbar-width: none;
      display: flex;
      flex-direction: column;
    }

    .create-arena-panel::-webkit-scrollbar {
      display: none;
    }

    .create-arena-panel.hidden {
      display: none;
    }

    .create-arena-inner {
      padding: 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .app-shell[data-workspace-mode="build"] .arena-sidebar {
      display: none;
    }

    .app-shell[data-workspace-mode="build"] .create-arena-panel {
      position: relative;
      top: auto;
      left: auto;
      bottom: auto;
      width: min(420px, 38vw);
      min-width: 360px;
      background: rgba(10, 16, 28, 0.95);
      z-index: auto;
      border-right: 1px solid rgba(255,255,255,0.09);
      flex-shrink: 0;
    }

    .app-shell[data-workspace-mode="build"] .viewer-topbar .topbar-actions,
    .app-shell[data-workspace-mode="build"] .player-sidebar,
    .app-shell[data-workspace-mode="build"] .info-drawer,
    .app-shell[data-workspace-mode="build"] .mobile-controls-sheet,
    .app-shell[data-workspace-mode="build"] .topbar-toggles,
    .app-shell[data-workspace-mode="build"] .arena-timer,
    .app-shell[data-workspace-mode="build"] .spectator-count {
      display: none;
    }

    .app-shell[data-workspace-mode="build"] .cr-players-group {
      display: none;
    }

    .app-shell[data-workspace-mode="build"] .build-only {
      display: inline-flex;
    }

    .app-shell[data-workspace-mode="build"] .build-only.hidden {
      display: none;
    }

    .app-shell[data-workspace-mode="build"] .build-only-block {
      display: block;
    }

    .create-arena-inner h2 {
      margin: 0;
      font-size: 1rem;
      color: var(--text);
    }

    .cr-panel-subtitle {
      margin-top: -6px;
      font-size: 0.72rem;
      color: var(--muted);
      line-height: 1.45;
    }

    .app-shell[data-workspace-mode="build"] .cr-panel-subtitle {
      display: none;
    }

    .create-arena-inner .fields {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .cr-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .cr-row label {
      flex: 1;
      min-width: 100px;
      flex-direction: column;
      align-items: flex-start;
    }

    .cr-row label > input,
    .cr-row label > select {
      width: 100%;
    }

    .cr-world-settings {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 8px 10px;
    }

    .cr-world-settings summary {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.72rem;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      list-style: none;
      transition: color 160ms ease;
    }

    .cr-world-settings summary:hover {
      color: color-mix(in srgb, currentColor 88%, white 12%);
    }

    .cr-world-settings summary::before {
      content: "▸";
      flex-shrink: 0;
    }

    .cr-world-settings[open] summary::before {
      content: "▾";
    }

    .cr-world-settings summary > span {
      flex: 1;
    }

    .cr-arena-id-row {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .cr-arena-id-row input {
      flex: 1;
    }

    .cr-arena-id-row input[readonly] {
      cursor: text;
      background: rgba(255,255,255,0.03);
    }

    .cr-arena-id-copy-btn {
      flex-shrink: 0;
      background: none;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.8rem;
      line-height: 1;
      padding: 5px 7px;
      transition: border-color 0.15s, color 0.15s;
    }

    .cr-arena-id-copy-btn:hover {
      border-color: rgba(255,255,255,0.4);
      color: var(--text);
    }

    .cr-arena-id-copy-btn:disabled:hover {
      border-color: rgba(255,255,255,0.15);
      color: var(--muted);
    }

    .seed-roll-btn {
      flex-shrink: 0;
      background: none;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1;
      padding: 1px 4px;
      transition: border-color 0.15s, color 0.15s;
    }

    .seed-roll-btn:hover {
      border-color: rgba(255,255,255,0.4);
      color: var(--text);
    }

    .seed-roll-btn:disabled:hover {
      border-color: rgba(255,255,255,0.15);
      color: var(--muted);
    }

    .seed-roll-btn:active {
      opacity: 0.7;
    }

    @keyframes seed-roll-flash {
      0% { color: var(--text); border-color: rgba(255,255,255,0.5); }
      100% { color: var(--muted); border-color: rgba(255,255,255,0.15); }
    }

    .seed-roll-btn--rolled {
      animation: seed-roll-flash 0.4s ease-out forwards;
    }

    .cr-world-settings-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    .cr-world-settings-body label {
      font-size: 0.78rem;
    }

    .cr-inline-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .cr-world-slider-fields,
    .cr-scenario-zones {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cr-slider-field {
      display: grid;
      gap: 5px;
    }

    .cr-slider-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.78rem;
      color: var(--text);
    }

    .cr-slider-value {
      color: var(--muted);
      font-size: 0.72rem;
      min-width: 40px;
      text-align: right;
    }

    .cr-world-settings-body input[type="range"] {
      width: 100%;
    }

    .cr-rift-blend-control {
      display: grid;
      gap: 7px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(5, 10, 18, 0.48);
    }

    .cr-rift-triangle-wrap {
      position: relative;
      width: min(100%, 230px);
      aspect-ratio: 10 / 9;
      margin: 0 auto;
      touch-action: none;
    }

    .cr-rift-triangle {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.28));
    }

    .cr-rift-blend-handle {
      position: absolute;
      width: 16px;
      height: 16px;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.92);
      background: #dff8ff;
      box-shadow: 0 0 0 3px rgba(12, 25, 40, 0.72), 0 0 16px rgba(130,245,215,0.42);
      transform: translate(-50%, -50%);
      transition: box-shadow 140ms ease, background-color 140ms ease;
      cursor: grab;
    }

    .cr-rift-blend-handle:hover,
    .cr-rift-blend-handle:active {
      transform: translate(-50%, -50%);
    }

    .cr-rift-blend-handle:active {
      cursor: grabbing;
      background: #f3fdff;
      box-shadow: 0 0 0 3px rgba(12, 25, 40, 0.78), 0 0 20px rgba(130,245,215,0.56);
    }

    .cr-rift-blend-handle:focus-visible {
      outline: 2px solid rgba(130, 245, 215, 0.9);
      outline-offset: 4px;
    }

    .cr-rift-corner {
      position: absolute;
      font-size: 0.64rem;
      line-height: 1;
      color: rgba(238, 246, 255, 0.86);
      text-shadow: 0 1px 6px rgba(0,0,0,0.8);
      pointer-events: none;
      user-select: none;
    }

    .cr-rift-corner-gap {
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
    }

    .cr-rift-corner-hazard {
      left: 0;
      bottom: 2px;
    }

    .cr-rift-corner-wall {
      right: 0;
      bottom: 2px;
    }

    .cr-rift-blend-readout {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      font-size: 0.66rem;
      color: var(--muted);
    }

    .cr-rift-blend-readout span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cr-toggle-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
    }

    .cr-toggle-row .viewer-toggle {
      margin-top: 0;
    }

    .cr-world-settings-body textarea {
      width: 100%;
      min-height: 72px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 8px 9px;
      background: rgba(7, 12, 21, 0.94);
      color: var(--text);
      font: inherit;
      font-size: 0.82rem;
      outline: none;
      resize: vertical;
    }

    .cr-field-hint {
      font-size: 0.68rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .cr-field-disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    .cr-players-group {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 10px;
      margin: 0;
    }

    .cr-players-group legend {
      font-size: 0.72rem;
      color: var(--muted);
      padding: 0 4px;
    }

    .cr-player-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 8px;
    }

    .cr-player-row {
      display: grid;
      grid-template-columns: 1fr 1fr 80px 28px;
      gap: 4px;
      align-items: center;
    }

    .cr-player-row input {
      font-size: 0.72rem;
      padding: 5px 7px;
    }

    .cr-remove-player {
      padding: 4px 6px;
      font-size: 0.7rem;
    }

    .cr-optional {
      color: var(--muted);
      font-weight: normal;
      font-size: 0.85em;
    }

    .cr-hint {
      margin: 6px 0 0;
      font-size: 0.69rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .cr-error {
      background: rgba(255, 80, 80, 0.12);
      border: 1px solid rgba(255, 80, 80, 0.3);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.74rem;
      color: #ff8a8a;
    }

    .cr-error.hidden { display: none; }

    .arena-local-badge {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: var(--accent);
    }

    .arena-local-badge.hidden { display: none; }

    .cr-local-run {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(120, 180, 255, 0.08);
      border: 1px solid rgba(120, 180, 255, 0.28);
      border-radius: 8px;
      padding: 10px;
    }

    .cr-local-run.hidden,
    .cr-local-run-launch.hidden { display: none; }

    .cr-local-run-status {
      font-size: 0.76rem;
      color: var(--muted);
    }

    .cr-local-run-launch {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cr-local-run-cmd {
      margin: 0;
      padding: 8px;
      background: rgba(8, 12, 20, 0.6);
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.7rem;
      white-space: pre-wrap;
      word-break: break-all;
      overflow-x: auto;
    }

    .cr-local-run-actions {
      display: flex;
      gap: 8px;
    }

    .cr-local-run-viewer-link-btn {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 0.76rem;
      font-weight: 600;
      color: #04121a;
      background: var(--accent);
      text-decoration: none;
    }

    .cr-local-run-viewer-link-btn.hidden { display: none; }

    .cr-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .build-only {
      display: none;
    }

    .build-only-block {
      display: none;
    }

    .hidden {
      display: none;
    }

    .small {
      padding: 5px 8px;
      font-size: 0.7rem;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 10px;
    }

    h1, h2, p, pre { margin: 0; }

    h1 {
      font-size: 1rem;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    h2 {
      font-size: 0.86rem;
      line-height: 1.15;
    }

    label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 8px;
      row-gap: 4px;
      color: var(--text);
      font-size: 0.74rem;
    }

    label > input,
    label > select {
      flex: 0 0 auto;
      width: auto;
    }

    label > textarea {
      flex-basis: 100%;
    }

    .cr-field-hint {
      flex-basis: 100%;
    }

    input {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 8px 9px;
      background: rgba(7, 12, 21, 0.94);
      color: var(--text);
      font: inherit;
      font-size: 0.82rem;
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: rgba(130, 245, 215, 0.5);
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
      width: 3.6em;
      flex: 0 0 auto;
    }

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border: 1.5px solid var(--accent);
      border-radius: 4px;
      background: transparent;
      padding: 0;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }

    input[type="checkbox"]:checked::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--accent);
    }

    input[type="checkbox"]:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: 2px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
    }

    input[type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      margin-top: -5px;
      border-radius: 50%;
      border: 2px solid rgba(7, 12, 21, 0.9);
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      cursor: pointer;
    }

    input[type="range"]::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
    }

    input[type="range"]::-moz-range-progress {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
    }

    input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(7, 12, 21, 0.9);
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      cursor: pointer;
    }

    input[type="range"]:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: 2px;
    }

    select {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 8px 26px 8px 9px;
      background: rgba(7, 12, 21, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667799' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
      color: var(--text);
      font: inherit;
      font-size: 0.82rem;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .buttons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    button {
      border: 0;
      border-radius: 10px;
      padding: 7px 10px;
      font: inherit;
      font-size: 0.76rem;
      cursor: pointer;
      color: var(--text);
      transition: background 160ms ease, color 160ms ease;
    }

    button:hover {
      background: rgba(255,255,255,0.08);
      color: color-mix(in srgb, currentColor 88%, white 12%);
    }

    button:disabled {
      cursor: default;
      opacity: 0.42;
      transform: none;
      filter: saturate(0.55);
    }

    button:disabled:hover {
      background: inherit;
      color: inherit;
    }

    button.pending {
      pointer-events: none;
      animation: btn-pulse 0.85s ease-in-out infinite;
    }

    .primary {
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      color: #07111f;
      font-weight: 700;
    }

    .primary:hover {
      background: linear-gradient(135deg, #8fdcff, #8ef4df);
    }

    .secondary {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .secondary:hover {
      background: rgba(255,255,255,0.08);
    }

    .danger {
      color: rgba(255, 120, 100, 0.9);
      border-color: rgba(255, 100, 80, 0.2);
    }

    .danger:hover {
      background: rgba(255, 80, 60, 0.1);
      border-color: rgba(255, 100, 80, 0.35);
    }

    .danger:disabled:hover {
      background: transparent;
      border-color: rgba(255, 100, 80, 0.2);
    }

    .status {
      margin-top: 6px;
      padding: 7px 9px;
      border-radius: 10px;
      background: rgba(103, 167, 255, 0.08);
      border: 1px solid rgba(103, 167, 255, 0.16);
      color: #dceaff;
      line-height: 1.35;
      font-size: 0.74rem;
    }

    .realtime-state {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .pending-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      padding: 7px 9px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
    }

    @keyframes btn-pulse {
      0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 0 rgba(128, 243, 214, 0);
      }
      50% {
        filter: brightness(1.22) saturate(1.3);
        box-shadow: 0 0 0 5px rgba(128, 243, 214, 0.18), 0 0 18px rgba(128, 243, 214, 0.1);
      }
    }


    .timing {
      padding: 6px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--muted);
      line-height: 1.35;
      font-size: 0.7rem;
      font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
      font-variant-numeric: tabular-nums;
      align-items: center;
    }

    .timing-group {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }

    .timing-key {
      color: rgba(159, 179, 215, 0.82);
      text-transform: lowercase;
    }

    .timing-value {
      display: inline-block;
      min-width: 8ch;
      color: var(--text);
    }

    .timing-type {
      min-width: 8ch;
    }

    .rt-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 6px;
      border-radius: 999px;
      font-size: 0.67rem;
      line-height: 1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      white-space: nowrap;
    }

    .rt-pill.ok {
      color: #bcf3cf;
      border-color: rgba(34, 197, 94, 0.18);
      background: rgba(34, 197, 94, 0.1);
    }

    .rt-pill.warn {
      color: #ffe4a6;
      border-color: rgba(255, 190, 11, 0.2);
      background: rgba(255, 190, 11, 0.1);
    }

    .legend,
    .players {
      display: grid;
      gap: 6px;
    }

    .legend-item,
    .player-card {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 7px 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      font-size: 0.74rem;
    }

    .player-card[data-player-alive="false"] {
      background: rgba(255,255,255,0.02);
      border-color: rgba(255,255,255,0.04);
      color: rgba(237, 244, 255, 0.74);
      filter: saturate(0.45);
    }

    .player-card[data-player-alive="false"] .player-meta,
    .player-card[data-player-alive="false"] .player-stat-line,
    .player-card[data-player-alive="false"] .channel-pill {
      color: rgba(159, 179, 215, 0.68);
    }

    .player-card[data-player-alive="false"] .player-stat-fill {
      background: linear-gradient(90deg, #5a6576, #8f9caf);
    }

    .player-card[data-player-alive="false"] .player-dot {
      opacity: 0.55;
      filter: grayscale(0.65);
    }

    .team-header {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 8px 3px;
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 6px;
    }
    .team-header:first-child {
      margin-top: 0;
    }
    .team-header-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .team-header-total {
      margin-left: auto;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    .player-card-main {
      flex: 1;
      min-width: 0;
    }

    .command-badge {
      display: inline-block;
      margin-top: 0;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 0.68rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
    }

    .command-badge.confirmed {
      background: rgba(34, 197, 94, 0.1);
      border-color: rgba(34, 197, 94, 0.18);
      color: #bcf3cf;
    }

    .player-meta {
      color: var(--muted);
      margin-top: 2px;
      font-size: 0.72rem;
      line-height: 1.35;
    }

    .player-stats {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .player-stat-row {
      display: grid;
      gap: 4px;
    }

    .player-stat-line {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .player-stat-track {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .player-stat-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
    }

    .player-stat-fill.warn {
      background: linear-gradient(90deg, #ffbe0b, #ffd166);
    }

    .player-stat-fill.danger {
      background: linear-gradient(90deg, #ef476f, #ff899f);
    }

    .channel-activity {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }

    .channel-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(103, 167, 255, 0.12);
      border: 1px solid rgba(103, 167, 255, 0.18);
      color: #dceaff;
      font-size: 0.68rem;
      line-height: 1;
    }

    .kick-btn {
      margin-top: 6px;
      padding: 5px 8px;
      border-radius: 9px;
      background: rgba(255, 137, 159, 0.12);
      border: 1px solid rgba(255, 137, 159, 0.18);
      color: #ffd6de;
      font-size: 0.68rem;
    }

    .my-roster-btn {
      position: absolute;
      top: 10px;
      left: 12px;
      z-index: 20;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(7, 12, 21, 0.86);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 0.68rem;
      cursor: pointer;
    }

    .my-roster-btn.hidden { display: none; }

    .my-roster-card {
      width: min(360px, 100%);
    }

    .my-roster-list {
      display: grid;
      gap: 6px;
    }

    .my-roster-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      font-size: 0.74rem;
    }

    .my-roster-note {
      flex: 1 0 100%;
      font-size: 0.68rem;
      color: var(--accent);
    }

    .my-roster-name {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .my-roster-one-match {
      font-size: 0.68rem;
      color: rgba(237, 244, 255, 0.7);
      white-space: nowrap;
    }

    .assign-section-label {
      margin: 10px 2px 2px;
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
    }

    .swatch,
    .player-dot {
      width: 14px;
      height: 14px;
      border-radius: 5px;
      flex: 0 0 auto;
    }

    .wall { background: var(--wall); }
    .floor { background: var(--floor); border: 1px solid rgba(255,255,255,0.08); }
    .ready { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 999px; }
    .not-ready { background: #5b677f; border-radius: 999px; }

    .player-name-row .player-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      align-self: center;
    }

    .player-title-dot {
      flex: 0 0 auto;
    }

    .player-name-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      transition: color 160ms ease;
    }

    .player-name-row:hover {
      background: transparent;
      color: color-mix(in srgb, currentColor 88%, white 12%);
    }

    .player-card-toggle::after {
      content: "▾";
      color: currentColor;
      font-size: 0.72rem;
      line-height: 1;
      margin-left: 2px;
      flex: 0 0 auto;
    }

    .player-card.expanded .player-card-toggle::after {
      content: "▴";
    }

    .player-name-row strong {
      margin-right: auto;
      transition: color 160ms ease;
    }

    .player-resident-icon {
      flex: 0 0 auto;
      font-size: 0.62rem;
      color: var(--muted);
    }

    .player-name-row:hover strong {
      color: color-mix(in srgb, var(--text) 86%, white 14%);
    }

    .player-actions-stack {
      flex: 0 0 148px;
      width: 148px;
      min-height: 92px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-self: stretch;
    }

    .player-actions-stack.is-empty {
      justify-content: flex-start;
    }

    .action-msg,
    .action-msg-empty {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-height: 0;
      padding: 5px 7px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      overflow: hidden;
    }

    .action-msg-empty {
      color: var(--muted);
      font-size: 0.66rem;
      justify-content: center;
      min-height: 28px;
    }

    .action-msg-channel {
      color: var(--accent);
      font-size: 0.56rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .action-msg-label,
    .action-msg-detail {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .action-msg-label {
      color: var(--text);
      font-size: 0.65rem;
    }

    .action-msg-detail {
      color: var(--muted);
      font-size: 0.62rem;
    }

    .action-msg-cancel {
      border-color: rgba(255, 190, 11, 0.22);
      background: rgba(255, 190, 11, 0.08);
    }

    .stun-alert {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: #ffe066;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1;
    }

    .build-worlds-toggle {
      position: absolute;
      top: 10px;
      left: 12px;
      z-index: 20;
      display: none;
      padding: 6px 11px;
      border-radius: 999px;
      background: rgba(7, 12, 21, 0.86);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--text);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.24);
    }

    .app-shell[data-workspace-mode="build"] .build-worlds-toggle {
      display: block;
    }

    .build-worlds-toggle.is-open {
      background: rgba(130, 245, 215, 0.1);
      border-color: rgba(130, 245, 215, 0.24);
    }

    .build-clear-elements-btn {
      position: absolute;
      top: 10px;
      right: 12px;
      z-index: 20;
      display: none;
      padding: 6px 11px;
      border-radius: 999px;
      background: rgba(7, 12, 21, 0.86);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--text);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.24);
    }

    .app-shell[data-workspace-mode="build"] .build-clear-elements-btn {
      display: block;
    }

    .app-shell[data-workspace-mode="build"] .build-worlds-panel.is-open {
      display: block;
    }

    .player-actions-stack.hud {
      width: auto;
      min-height: 0;
      flex: 1 1 auto;
    }

    .spectator-count {
      position: absolute;
      bottom: 10px;
      left: 12px;
      font-size: 0.72rem;
      color: rgba(255,255,255,0.38);
      pointer-events: none;
      z-index: 20;
      letter-spacing: 0.02em;
    }
    .spectator-count.hidden { display: none; }

    .match-splash {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(6, 10, 18, 0.52), rgba(6, 10, 18, 0.78));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: match-splash-fade 280ms ease;
      pointer-events: auto;
      touch-action: auto;
    }

    .match-splash.hidden {
      display: none;
    }

    .match-splash[data-splash-mode="waiting"] {
      align-items: flex-start;
      justify-content: center;
      padding-top: clamp(16px, 6vh, 48px);
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      pointer-events: none;
      touch-action: auto;
    }

    .match-splash[data-splash-mode="waiting"] .match-splash-card {
      pointer-events: auto;
      width: min(420px, calc(100% - 32px));
    }

    .match-splash-card {
      width: min(760px, calc(100% - 32px));
      display: grid;
      gap: 14px;
      padding: 22px 22px 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top left, rgba(103, 167, 255, 0.16), transparent 26%),
        radial-gradient(circle at top right, rgba(130, 245, 215, 0.14), transparent 24%),
        rgba(9, 15, 26, 0.96);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 26px 68px rgba(0, 0, 0, 0.42);
      animation: match-splash-card-in 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
      pointer-events: auto;
    }

    .match-splash-eyebrow {
      color: var(--accent);
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .match-splash-card h2 {
      font-size: 1.6rem;
      letter-spacing: -0.04em;
    }

    .match-splash-subtitle {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .match-splash-callouts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
    }

    .match-splash-tabs {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      gap: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding-bottom: 10px;
    }

    .match-splash-tabs::-webkit-scrollbar {
      display: none;
    }

    .match-splash-tab {
      appearance: none;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--muted);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
    }

    .match-splash-tab:hover {
      color: var(--text);
      border-color: rgba(255,255,255,0.18);
    }

    .match-splash-tab:disabled:hover {
      color: var(--muted);
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }

    .match-splash-tab.active {
      color: var(--bg);
      background: var(--accent);
      border-color: var(--accent);
    }

    .match-splash-body {
      display: grid;
      gap: 12px;
    }

    .match-splash-empty {
      color: var(--muted);
      font-size: 0.8rem;
      padding: 10px 2px;
    }

    .starting-soon-countdown {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 18px 2px 6px;
    }

    .starting-soon-count {
      font-size: 3.4rem;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      color: var(--accent);
    }

    .starting-soon-label {
      font-size: 0.8rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .match-leaderboard {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }

    .match-leaderboard th,
    .match-leaderboard td {
      padding: 7px 10px;
      text-align: right;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .match-leaderboard th.lead,
    .match-leaderboard td.lead {
      text-align: left;
    }

    .match-leaderboard th {
      color: var(--muted);
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
    }

    .match-leaderboard td.lead {
      font-weight: 700;
    }

    .match-leaderboard th.team,
    .match-leaderboard td.team {
      max-width: 8.5rem;
      width: 8.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .match-leaderboard tbody tr.winner td {
      color: rgb(154, 248, 222);
    }

    .match-leaderboard tbody tr.out td {
      color: var(--muted);
    }

    .match-leaderboard tbody tr:last-child td {
      border-bottom: none;
    }

    .match-highlight {
      display: grid;
      gap: 3px;
      padding: 10px 11px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .match-highlight-label {
      color: var(--muted);
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .match-splash-players {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .match-player-result {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 11px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .match-player-rank {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 600;
      min-width: 20px;
      text-align: right;
      flex-shrink: 0;
    }

    .match-player-result-info {
      flex: 1;
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .match-player-result.winner {
      border-color: rgba(130, 245, 215, 0.3);
      background: rgba(130, 245, 215, 0.08);
    }

    .match-player-result.survivor {
      border-color: rgba(103, 167, 255, 0.2);
    }

    .match-player-result-name {
      font-size: 0.84rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .match-result-resident-icon {
      color: var(--accent);
      font-size: 0.76rem;
    }

    .match-player-result-meta {
      color: var(--muted);
      font-size: 0.7rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .match-table-wrap {
      overflow-x: auto;
    }

    .match-splash-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    @keyframes match-splash-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes match-splash-card-in {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ── Replay playback overlay ─────────────────────────────────────────────── */

    .replay-playback-overlay {
      position: absolute;
      inset: 0;
      z-index: 25;
      pointer-events: none;
    }

    .replay-playback-overlay.hidden {
      display: none;
    }

    .replay-playback-close-btn {
      flex: 0 0 auto;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: var(--text);
      font-size: 0.68rem;
      cursor: pointer;
    }

    .replay-playback-bar {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(9, 15, 26, 0.82);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      pointer-events: auto;
      width: min(480px, calc(100% - 32px));
    }

    .replay-playback-toggle-btn {
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: var(--accent);
      color: #06101c;
      cursor: pointer;
      padding: 0;
    }

    .replay-playback-toggle-icon {
      font-size: 0.75rem;
      line-height: 1;
      transform: translateX(1px);
    }

    .replay-playback-scrubber {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }

    .replay-playback-time-label {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 0.7rem;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .replay-playback-actions-toggle-btn {
      flex: 0 0 auto;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: var(--text);
      font-size: 0.68rem;
      cursor: pointer;
    }

    .replay-playback-actions-toggle-btn[aria-expanded="true"] {
      background: var(--accent);
      color: #06101c;
      border-color: transparent;
    }

    .replay-playback-actions-panel {
      position: absolute;
      bottom: 68px;
      left: 50%;
      transform: translateX(-50%);
      width: min(360px, calc(100% - 32px));
      max-height: 260px;
      border-radius: 14px;
      background: rgba(9, 15, 26, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      pointer-events: auto;
      overflow: hidden;
    }

    .replay-playback-actions-panel.hidden {
      display: none;
    }

    .replay-playback-actions-list {
      max-height: 260px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 6px;
    }

    .replay-playback-action-row {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 2px;
      padding: 5px 8px;
      border-radius: 8px;
      font-size: 0.7rem;
      line-height: 1.35;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .replay-playback-action-row:last-child {
      margin-bottom: 0;
    }

    .replay-playback-action-row.current {
      background: rgba(255,255,255,0.07);
      color: var(--text);
    }

    /* ── Waiting splash slots ──────────────────────────────────────────────── */

    .waiting-teams {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 4px 0;
    }

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

    .waiting-team-name {
      font-size: 0.78rem;
      color: var(--muted);
      min-width: 64px;
      text-align: right;
    }

    .waiting-slots {
      display: flex;
      gap: 6px;
    }

    .waiting-slot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
    }

    .waiting-slot.filled {
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 0 8px rgba(130, 245, 215, 0.4);
    }

    .waiting-required {
      margin-top: 6px;
      font-size: 0.7rem;
      color: var(--muted);
      text-align: center;
    }

    /* ── Arena viewport ────────────────────────────────────────────────────── */

    .arena-viewport {
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 50% 18%, rgba(103, 167, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(13, 21, 33, 0.98), rgba(8, 13, 22, 0.98));
      overflow: hidden;
    }

    .arena-viewport::after {
      content: attr(data-empty);
      display: none;
    }

    .arena-viewport[data-empty="true"]::before {
      content: "No map data loaded yet.";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 0.82rem;
      letter-spacing: 0.02em;
      z-index: 0;
    }

    .arena-canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
      position: relative;
      z-index: 1;
      cursor: grab;
    }

    .arena-canvas:active {
      cursor: grabbing;
    }

    .arena-canvas.hovering-player {
      cursor: pointer;
    }

    /* ── Bot hover tooltip ─────────────────────────────────────────────────── */

    .bot-hover-tooltip {
      position: absolute;
      z-index: 5;
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(12, 20, 36, 0.92);
      border: 1px solid rgba(128, 180, 255, 0.22);
      color: rgba(220, 232, 255, 0.92);
      font-size: 0.74rem;
      line-height: 1.36;
      backdrop-filter: blur(6px);
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }

    .bot-hover-tooltip.hidden {
      display: none;
    }

    .bot-hover-tooltip.pinned {
      border-color: var(--accent);
    }

    .bot-hover-tooltip-name {
      font-weight: 600;
      color: #fff;
    }

    .bot-hover-tooltip-status,
    .bot-hover-tooltip-stat {
      color: rgba(180, 210, 255, 0.78);
      font-family: "Courier New", monospace;
      font-size: 0.68rem;
    }

    .bot-hover-tooltip-owner {
      color: var(--muted);
      font-size: 0.66rem;
    }

    /* ── Info drawer ───────────────────────────────────────────────────────── */

    .info-drawer {
      flex-shrink: 0;
      border-top: 1px solid var(--line);
      background: rgba(7, 12, 22, 0.72);
    }

    .drawer-toggle {
      display: flex;
      align-items: center;
      padding: 7px 12px;
      cursor: pointer;
      list-style: none;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      user-select: none;
      transition: color 160ms ease;
    }

    .drawer-toggle:hover {
      color: color-mix(in srgb, currentColor 88%, white 12%);
    }

    .drawer-toggle::-webkit-details-marker {
      display: none;
    }

    .info-drawer[open] .drawer-toggle::after {
      content: " ▴";
    }

    .info-drawer:not([open]) .drawer-toggle::after {
      content: " ▾";
    }

    .drawer-content {
      display: flex;
      gap: 0;
      overflow-x: auto;
      overflow-y: hidden;
      height: 190px;
    }

    .drawer-section {
      flex: 0 0 auto;
      min-width: 190px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 12px 10px;
      border-right: 1px solid var(--line);
      overflow-y: auto;
    }

    .drawer-section:last-child {
      border-right: 0;
    }

    .drawer-section h3 {
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 8px 0 2px;
      flex-shrink: 0;
    }

    .drawer-section-state,
    .drawer-section-log {
      min-width: 260px;
    }

    .drawer-section .dump {
      flex: 1;
      overflow: auto;
      padding: 6px;
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .drawer-section .status {
      margin-top: 0;
    }

    .drawer-section .timing {
      padding: 0;
    }

    @media (max-width: 1200px) {
      .viewer-area {
        padding-bottom: 32px;
      }

      .app-shell[data-workspace-mode="build"] .viewer-area {
        padding-bottom: 0;
      }

      .viewer-topbar {
        height: auto;
        min-height: 44px;
        padding: 6px 10px;
        flex-wrap: wrap;
        align-items: center;
      }

      .topbar-identity,
      .topbar-status {
        min-width: 0;
      }

      .topbar-identity {
        flex: 0 1 auto;
      }

      .topbar-subtitle {
        max-width: none;
      }

      .topbar-status {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        overflow: visible;
      }

      .topbar-actions {
        display: none;
      }

      .topbar-toggles {
        display: flex;
        position: fixed;
        top: auto;
        left: 52px;
        right: 0;
        bottom: 0;
        z-index: 140;
        min-height: 28px;
        padding: 0;
        background: rgba(8, 14, 24, 0.94);
        border-top: 1px solid rgba(255,255,255,0.12);
        border-left: 1px solid rgba(255,255,255,0.12);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        border-right: 0;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .mobile-toggle {
        flex: 1;
        min-width: 0;
        min-height: 28px;
        border-radius: 0;
        border: 0;
        border-right: 1px solid rgba(255,255,255,0.08);
        background: transparent;
        color: var(--muted);
        font-size: 0.7rem;
        line-height: 1;
        padding: 6px 8px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .mobile-toggle.no-arrow::after {
        content: none;
      }

      .mobile-toggle::after {
        content: " ▴";
        font-size: 0.68rem;
      }

      .mobile-toggle:last-child {
        border-right: 0;
      }

      /* The arena rail (.arena-sidebar) only becomes a hidden/toggleable sheet
         below 760px (see the 760px media query) — above that it's still shown
         in its normal place, so the "Arenas" bottom-bar toggle would otherwise
         appear here inert (visible but with nothing to show/hide). */
      #mobile-arenas-btn {
        display: none;
      }

      .arena-body {
        flex-direction: column;
        position: relative;
      }

      .arena-column {
        order: 1;
        min-height: 0;
      }

      .arena-viewport-wrap {
        min-height: 52vh;
      }

      .player-actions-stack {
        display: none !important;
      }

      .player-sidebar {
        order: 2;
        width: auto;
        max-width: none;
        border-right: 0;
        border-top: 1px solid var(--line);
        padding: 10px;
      }

      .info-drawer {
        order: 3;
      }

      .app-shell[data-player-view="rail"] .player-sidebar {
        width: auto;
        padding: 8px 10px;
      }

      .app-shell[data-player-view="rail"] .player-sidebar-header {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .players {
        grid-template-columns: 1fr;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 7px 8px;
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible;
        border-radius: 10px;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-card > div {
        display: block;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-card > span.player-dot {
        display: none;
        align-self: flex-start;
        width: 8px;
        height: 8px;
        margin-top: 8px;
        box-shadow: 0 0 0 1px rgba(7, 12, 21, 0.8);
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-actions-stack {
        display: none;
      }

      .app-shell[data-player-view="rail"] .player-mini-flags {
        display: none;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-meta,
      .app-shell[data-player-view="rail"] .player-sidebar .channel-activity,
      .app-shell[data-player-view="rail"] .player-sidebar .kick-btn,
      .app-shell[data-player-view="rail"] .player-sidebar .command-badge {
        display: none;
      }

      .app-shell[data-player-view="rail"] .player-sidebar .player-card.expanded .player-meta,
      .app-shell[data-player-view="rail"] .player-sidebar .player-card.expanded .channel-activity,
      .app-shell[data-player-view="rail"] .player-sidebar .player-card.expanded .kick-btn,
      .app-shell[data-player-view="rail"] .player-sidebar .player-card.expanded .command-badge {
        display: block;
      }

      .player-sidebar .players {
        grid-template-columns: 1fr;
      }

      .drawer-content {
        height: auto;
        max-height: 36vh;
      }

      .drawer-section {
        min-width: 240px;
      }

      .create-arena-panel {
        left: 0;
        width: min(420px, 100vw);
      }

      .player-sidebar,
      .info-drawer,
      .mobile-controls-sheet {
        position: fixed;
        left: 56px;
        right: 0;
        bottom: 28px;
        z-index: 120;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-left: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        border-right: 0;
        border-radius: 18px 0 0 0;
        background: rgba(7, 12, 22, 0.96);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .player-sidebar {
        display: none;
        max-height: min(46vh, 360px);
        overflow: auto;
      }

      .app-shell[data-active-sheet="players"] .player-sidebar {
        display: block;
      }

      .info-drawer {
        display: none;
        order: initial;
      }

      .app-shell[data-active-sheet="info"] .info-drawer {
        display: block;
      }

      .app-shell[data-active-sheet="info"] .info-drawer .drawer-toggle {
        display: none;
      }

      .mobile-controls-sheet {
        display: none;
        padding: 10px;
        max-height: min(40vh, 360px);
        overflow: auto;
      }

      .app-shell[data-active-sheet="controls"] .mobile-controls-sheet {
        display: block;
      }

      .mobile-controls-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .drawer-content {
        max-height: min(40vh, 360px);
      }

      .match-splash[data-splash-mode="result"] {
        position: fixed;
        z-index: 130;
        align-items: flex-end;
        padding-top: 54px;
        padding-bottom: 28px;
      }

      .match-splash[data-splash-mode="result"] .match-splash-card {
        width: 100%;
        max-width: none;
        max-height: 100%;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        border-right: 0;
        animation: match-splash-card-up 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
      }

      @keyframes match-splash-card-up {
        from { opacity: 0; transform: translateY(32px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .match-splash[data-splash-mode="waiting"],
      .match-splash[data-splash-mode="waiting"] .match-splash-card {
        position: absolute;
        width: min(420px, calc(100% - 32px));
      }

      .match-splash-card {
        width: calc(100% - 16px);
        padding: 18px 16px 14px;
        border-radius: 18px 0 0 18px;
      }
    }

    @media (max-width: 760px) {
      .arena-sidebar {
        display: none;
      }

      #mobile-arenas-btn {
        display: inline-block;
      }

      .app-shell[data-active-sheet="arenas"] .arena-sidebar {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 28px;
        z-index: 145;
        width: auto;
        overflow-y: auto;
        padding: 10px 5px;
        background: rgba(8, 14, 24, 0.96);
        border-right: 1px solid rgba(255,255,255,0.12);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        animation: arena-sidebar-slide-in 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
      }

      @keyframes arena-sidebar-slide-in {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
      }

      .arena-sidebar-backdrop {
        display: none;
      }

      .app-shell[data-active-sheet="arenas"] .arena-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 144;
        background: rgba(0, 0, 0, 0.36);
      }

      .arena-tab,
      .arena-tab-add {
        width: 32px;
        height: 32px;
      }

      .viewer-topbar {
        padding: 6px 8px;
      }

      .topbar-identity {
        gap: 6px;
      }

      .topbar-identity h1 {
        font-size: 0.84rem;
      }

      .topbar-status {
        gap: 6px;
      }

      .topbar-toggles {
        top: auto;
        left: 0;
      }

      .arena-viewport-wrap {
        min-height: 46vh;
      }

      .drawer-content {
        display: grid;
        grid-auto-flow: row;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 42vh;
      }

      .drawer-section,
      .drawer-section-state,
      .drawer-section-log {
        width: auto;
        min-width: 0;
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: 12px;
      }

      .drawer-section:last-child {
        border-bottom: 0;
      }

      .player-sidebar-header {
        align-items: center;
      }

      .player-sidebar,
      .info-drawer,
      .mobile-controls-sheet {
        left: 0;
        border-radius: 16px 16px 0 0;
      }

      .app-shell[data-workspace-mode="build"] .topbar-toggles {
        display: flex;
      }

      .app-shell[data-workspace-mode="build"] .viewer-area {
        padding-bottom: 32px;
      }

      .app-shell[data-workspace-mode="build"] .topbar-toggles .mobile-toggle:not(.build-only) {
        display: none;
      }

      .app-shell[data-workspace-mode="build"] .create-arena-panel:not(.hidden) {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 28px;
        width: 100%;
        min-width: 0;
        max-height: 85svh;
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,0.09);
        border-radius: 16px 16px 0 0;
        z-index: 120;
        animation: match-splash-card-up 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
      }

      .match-splash-card {
        width: min(760px, calc(100% - 32px));
        border-radius: 18px;
      }

      .match-splash[data-splash-mode="waiting"] {
        position: absolute;
        inset: 0;
        width: auto;
      }

      .match-splash[data-splash-mode="waiting"] .match-splash-card {
        position: relative;
        width: min(420px, calc(100% - 32px));
      }
    }

    .dump {
      padding: 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      overflow: auto;
      max-height: 22vh;
    }

    pre {
      white-space: pre-wrap;
      word-break: break-word;
      font-family: "Courier New", monospace;
      font-size: 0.74rem;
      line-height: 1.32;
    }

    /* ── Latency chip ──────────────────────────────────────────────────────── */

    .latency-chip {
      position: fixed;
      top: 56px;
      right: 18px;
      z-index: 200;
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(12, 20, 36, 0.88);
      border: 1px solid rgba(128, 180, 255, 0.18);
      color: rgba(180, 210, 255, 0.85);
      font-size: 0.69rem;
      font-family: "Courier New", monospace;
      letter-spacing: 0.01em;
      backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
    }

    .latency-chip.chip-play {
      animation: chip-show 3.2s ease forwards;
    }

    @keyframes chip-show {
      0%   { opacity: 0; transform: translateY(-5px); }
      8%   { opacity: 1; transform: translateY(0); }
      78%  { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-3px); }
    }

    /* ── Viewer auth UI ──────────────────────────────────────────────────── */

    .viewer-user-chip:not(.hidden) {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .viewer-user-name {
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .viewer-signout-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.72rem;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .viewer-signout-btn:hover { color: var(--text); }

    .viewer-login-panel:not(.hidden) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      height: 100dvh;
      height: var(--vv-height, 100dvh);
      z-index: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      overflow: hidden;
      touch-action: auto;
    }
    .viewer-login-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(3, 8, 14, 0.58);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .viewer-login-card {
      position: relative;
      z-index: 1;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 28px 28px 24px;
      width: min(320px, 100%);
      flex-shrink: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      overflow-y: auto;
      max-height: 100%;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
    }
    .viewer-login-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .viewer-login-header h2 { margin: 0; font-size: 1rem; }
    .viewer-login-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .viewer-login-form label {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      font-size: 0.82rem;
      text-align: left;
      color: var(--muted);
    }
    .viewer-login-form input {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--text);
      padding: 7px 10px;
      font-size: 0.88rem;
      width: 100%;
    }
    .viewer-login-form textarea,
    .viewer-login-form select {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--text);
      padding: 7px 10px;
      font-size: 0.88rem;
      width: 100%;
      font: inherit;
    }
    .viewer-login-form textarea {
      min-height: 112px;
      resize: vertical;
    }
    .viewer-login-form input:focus,
    .viewer-login-form textarea:focus,
    .viewer-login-form select:focus { outline: 1px solid var(--accent); }
    .viewer-login-form button[type=submit] { margin-top: 4px; width: 100%; }
    .viewer-login-error {
      font-size: 0.8rem;
      color: #f87171;
      background: rgba(248, 113, 113, 0.1);
      border-radius: 4px;
      padding: 6px 10px;
    }
    .viewer-login-footer {
      margin: 0;
      font-size: 0.8rem;
      color: var(--muted);
      text-align: center;
    }
    .feedback-viewer-btn {
      width: 32px;
      min-width: 32px;
      padding-left: 0;
      padding-right: 0;
    }
    .viewer-feedback-card {
      width: min(380px, 100%);
    }
    .viewer-feedback-card .viewer-login-header {
      gap: 14px;
    }
    .viewer-feedback-card .viewer-login-form {
      width: 100%;
    }
    .viewer-feedback-card label span {
      color: rgba(167, 179, 194, 0.7);
      font-size: 0.74rem;
    }
    .viewer-feedback-card input,
    .viewer-feedback-card textarea,
    .viewer-feedback-card select {
      box-sizing: border-box;
      display: block;
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--text);
      padding: 8px 10px;
      font: inherit;
      font-size: 0.88rem;
    }
    .viewer-feedback-card textarea {
      min-height: 116px;
      resize: vertical;
      line-height: 1.45;
    }
    .viewer-feedback-card select {
      appearance: none;
      -webkit-appearance: none;
    }
    .viewer-feedback-card input:focus,
    .viewer-feedback-card textarea:focus,
    .viewer-feedback-card select:focus {
      outline: 1px solid var(--accent);
      outline-offset: 0;
    }
    .viewer-feedback-honeypot {
      display: none !important;
    }
    .viewer-feedback-card .feedback-sent label,
    .viewer-feedback-card .feedback-sent input[type="hidden"],
    .viewer-feedback-card .feedback-sent button[type=submit],
    .viewer-feedback-card .feedback-sent .viewer-feedback-honeypot {
      display: none !important;
    }
    .viewer-feedback-success {
      font-size: 0.8rem;
      color: var(--accent);
      background: rgba(20, 184, 166, 0.1);
      border-radius: 4px;
      padding: 6px 10px;
      text-align: center;
    }
    .link-btn {
      background: none;
      border: none;
      padding: 0;
      color: var(--accent);
      font-size: inherit;
      cursor: pointer;
      text-decoration: underline;
    }
    .link-btn:hover { opacity: 0.8; }
    .link-btn:disabled:hover { opacity: 0.42; }
    .build-world-card-cta {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .build-world-card-cta p { margin: 0; }

    .chat-open-btn {
      position: absolute;
      bottom: 10px;
      right: 12px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.28);
      color: rgba(255,255,255,0.45);
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 31;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .chat-open-btn:hover { background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.28); }
    .chat-open-btn:disabled:hover { background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.12); }
    .chat-open-btn[aria-pressed="true"] { background: rgba(130,245,215,0.12); color: var(--accent); border-color: rgba(130,245,215,0.3); }
    .chat-open-btn.hidden { display: none; }

    .chat-panel {
      position: absolute;
      bottom: 54px;
      right: 12px;
      width: 280px;
      max-width: calc(100% - 24px);
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 30;
      pointer-events: none;
    }
    .chat-panel.hidden { display: none; }
    .chat-messages {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow: hidden;
    }
    .chat-msg {
      background: rgba(0,0,0,0.55);
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 0.78rem;
      line-height: 1.35;
      word-break: break-word;
      pointer-events: none;
      animation: chat-msg-fade 12s linear forwards;
    }
    @keyframes chat-msg-fade {
      0%, 70% { opacity: 1; }
      100% { opacity: 0; }
    }
    .chat-msg-sender {
      font-weight: 600;
      color: var(--accent);
      margin-right: 4px;
    }
    .chat-msg-text { color: #eee; }
    .chat-form {
      display: flex;
      gap: 4px;
      pointer-events: auto;
    }
    .chat-input {
      flex: 1;
      font-size: 0.8rem;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(20,20,30,0.9);
      color: var(--text);
      min-width: 0;
    }
    .chat-input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
    .chat-signin-cta {
      pointer-events: auto;
      font-size: 0.78rem;
      color: var(--muted);
      margin: 0;
      text-align: right;
    }

    /* ── Spectator mode: operator-only elements hidden ───────────────────── */
    body:is([data-viewer-mode="player"], [data-viewer-mode="control"]) #viewer-signin-btn { display: none; }

    /* ── Arena recovery notice (thin strip inside the arena window) ─────── */
    .arena-recovering-notice {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      padding: 3px 12px;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: rgba(237, 244, 255, 0.92);
      background: rgba(10, 16, 24, 0.62);
      backdrop-filter: blur(2px);
      border-bottom: 1px solid transparent;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-100%);
      transition: opacity 0.22s ease, transform 0.28s ease;
    }
    .arena-recovering-notice.is-visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .arena-recovering-notice { transition: none; }
    }
    .arena-recovering-notice {
      background: rgba(16, 34, 54, 0.6);
      border-bottom-color: rgba(127, 196, 255, 0.5);
      color: #cfe6ff;
    }

    .capacity-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: 0;
      background: transparent;
      outline: none;
    }
    .capacity-badge.hidden { display: none; }
    .capacity-indicator-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex: 0 0 auto;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
    }
    .capacity-badge[data-capacity="healthy"] .capacity-indicator-dot { background: #82f5d7; }
    .capacity-badge[data-capacity="busy"] .capacity-indicator-dot { background: #ffd479; }
    .capacity-badge[data-capacity="full"] .capacity-indicator-dot { background: #ff9d7a; }
    .capacity-badge[data-capacity="unknown"] .capacity-indicator-dot { background: rgba(171, 184, 205, 0.55); }
    .capacity-popover {
      position: fixed;
      z-index: 10000;
      display: grid;
      gap: 5px;
      width: min(280px, 82vw);
      padding: 10px 12px;
      border: 1px solid rgba(130, 245, 215, 0.28);
      border-radius: 6px;
      background: rgba(8, 14, 24, 0.96);
      box-shadow: 0 16px 36px rgba(0,0,0,0.38);
      color: var(--text);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-3px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }
    .capacity-popover strong { color: #82f5d7; font-size: 12px; }
    .capacity-popover em {
      color: var(--muted);
      font-style: normal;
      font-weight: 500;
    }
    .capacity-popover.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }