/* ============================================================
   Tempest Tournament — design system
   Dark "competitive console" theme: warm near-black surfaces,
   inset hairline rings instead of flat borders, red brand accent.

   Everything below routes through these tokens, so retheming the
   whole site is a matter of editing this block. The legacy names
   (--panel, --red, --radius …) are kept as aliases because the
   component rules further down still reference them.
   IMPORTANT — this file must never contain a raw angle bracket or
   ampersand, not even inside a comment. nodeToPng() inlines this whole
   stylesheet into an XML SVG style block to export the broadcast
   boards, so either character breaks XML parsing and every PNG export
   silently fails. Spell such names out in words instead.
   ============================================================ */
:root {
  /* ---- surfaces (opaque, so nested panels stop compounding) ---- */
  --bg:          #0b0809;
  --bg-2:        #120e0f;
  --surface-1:   #121012;   /* generic card / panel            */
  --surface-2:   #171315;   /* raised, hover                   */
  --surface-nav: #0a0809;   /* nav pill, inputs, chips         */
  --surface-row: linear-gradient(180deg, #0e0b0c 0%, #0a0809 100%);
  --well:        linear-gradient(180deg, #0a0708 0%, #120e0f 17%, #0a0708 25%);

  /* ---- borders + the inset hairline rings ---- */
  --border:        #291e22;
  --border-strong: #33222a;
  --border-hover:  #4a2a30;
  --ring-faint:    rgba(255,255,255,0.04);
  --ring-card:     rgba(41,30,34,0.22);
  --ring-row:      rgba(245,114,114,0.07);

  /* ---- text ---- */
  --text:    #faf9f9;
  --text-2:  #d6d2d3;
  --muted:   #a39a9a;
  --muted-2: #6f6666;

  /* ---- brand accent ---- */
  --red:      #ef4444;
  --red-2:    #dc2626;
  --red-lite: #f87171;
  --red-glow: rgba(239,68,68,0.45);
  --red-soft: rgba(239,68,68,0.10);
  --red-ring: rgba(239,68,68,0.28);
  --red-grad: linear-gradient(127deg, #750000 0%, #d40000 14%, #e63737 60%, #e30000 88%, #520000 101%);

  /* ---- status + placing ---- */
  --win:      #22c55e;
  --win-glow: rgba(34,197,94,0.35);
  --online:   #00c267;
  --offline:  #ff6565;
  --info:     #72a9ff;
  --gold:     #ffc800;
  --silver:   #cfcfcf;
  --bronze:   #cd7f32;

  /* ---- radii ---- */
  --r-xs:  4px;
  --r-sm:  6px;
  --radius-sm: 10px;
  --radius:    12px;
  --r-nav: 14px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --sh-row:  inset 0 0 0 1px var(--ring-row), 0 8px 18px rgba(0,0,0,0.45);
  --sh-card: inset 0 0 0 1px var(--ring-card), 0 10px 28px rgba(0,0,0,0.45);
  --sh-lift: inset 0 0 0 1px rgba(245,114,114,0.12), 0 10px 22px rgba(0,0,0,0.5);
  --sh-pop:  0 16px 34px rgba(0,0,0,0.36);
  --shadow:  var(--sh-card);

  /* ---- rhythm + motion ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 30px; --sp-7: 50px; --sp-8: 80px;
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t-mid:  .25s;
  --t-slow: .55s;

  --shell-max: 1360px;
  --gutter:    50px;

  /* ---- type ----
     The broadcast boards deliberately stay on the system stack:
     nodeToPng() rasterises them through an SVG foreignObject, which
     cannot resolve a webfont URL, so a webfont there would silently
     fall back and the exported PNG would not match the screen. */
  --font-sys:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font:         "Inter", var(--font-sys);
  --font-display: "Saira", var(--font-sys);
  --font-board:   var(--font-sys);

  /* legacy aliases still referenced further down */
  --panel:   var(--surface-1);
  --panel-2: var(--surface-2);
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .brand-text, .btn, .nav-link { font-family: var(--font-display); }

/* ---------- background layers ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(239,68,68,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #000003 0%, rgba(10,7,8,0) 34%, rgba(10,7,8,0) 67%, #000000 103%),
    radial-gradient(700px 420px at 50% -8%, rgba(220,38,38,0.17), transparent 70%),
    radial-gradient(500px 400px at 100% 6%, rgba(239,68,68,0.06), transparent 70%);
}

/* ---------- layout shell ---------- */
.page {
  position: relative; z-index: 1;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 24px var(--gutter) var(--sp-8);
}
.hidden { display: none !important; }

/* the single bordered container page content sits inside */
.well {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--well);
  box-shadow: var(--sh-card);
}
.well-divider { height: 1px; background: rgba(163,154,154,0.22); margin: var(--sp-6) 0; border: 0; }
.section-eyebrow {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-2); margin-bottom: 6px;
}
.section-h2 { font-size: 24px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; }
.nav-inner { max-width: var(--shell-max); margin: 0 auto; padding: 10px var(--gutter); }
.nav-bar {
  display: flex; align-items: center; gap: 18px;
  min-height: 47px; padding: 0 18px;
  border-radius: var(--r-nav);
  background: rgba(10,8,9,0.86);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px var(--ring-faint), 0 10px 28px rgba(0,0,0,0.45);
}
.brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text);
  padding: 5px 14px 5px 6px; margin: 5px 0;
  border-radius: var(--r-nav);
  background: var(--surface-nav);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand-mark { display: block; width: 30px; height: 30px; object-fit: contain; }
.brand-text { font-weight: 800; letter-spacing: -0.03em; font-size: 16px; white-space: nowrap; }
.brand-accent { color: var(--red-lite); font-weight: 800; margin-left: 4px; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  background: none; border: none; color: var(--text-2);
  font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 15px;
  height: 35px; padding: 0 14px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
/* a 2px rule that sweeps in from the right on hover */
.nav-link::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: right center; opacity: 0;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::before { transform: scaleX(1); opacity: 1; }
.nav-link.active { color: var(--red); font-weight: 600; }
.nav-link.active::before { transform: scaleX(1); opacity: 1; transition: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- role badge ---------- */
.role-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(239,68,68,0.09); border: 1px solid rgba(239,68,68,0.28);
  border-radius: 999px; padding: 5px 6px 5px 12px;
}
.role-chip.visitor { background: var(--panel); border-color: var(--border); }
.role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.role-chip.visitor .role-dot { background: var(--muted-2); box-shadow: none; }
.role-name { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--red-lite); white-space: nowrap; }
.role-chip.visitor .role-name { color: var(--muted); }
.role-switch {
  font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap;
  color: var(--muted); background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 4px 10px; transition: .14s;
}
.role-switch:hover { color: var(--text); border-color: rgba(239,68,68,0.5); }
.role-switch.signin { color: var(--red-lite); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.10); }
.role-switch.signin:hover { background: rgba(239,68,68,0.18); }
@media (max-width: 720px) { .role-chip .role-name { display: none; } }

/* ---------- narrow: tabs drop to their own scrollable row ---------- */
@media (max-width: 1024px) {
  .nav-inner { padding: 8px 14px; }
  .nav-bar { flex-wrap: wrap; gap: 10px; padding: 0 10px; }
  .brand { padding: 4px 11px 4px 5px; margin: 7px 0; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-text { font-size: 15px; }
  .brand-accent { display: none; }          /* keep the first row to one line */
  .nav-right { margin-left: auto; gap: 8px; }
  .nav-links {
    order: 3; width: 100%; margin: 0 0 8px; gap: 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { height: 32px; padding: 0 11px; font-size: 14px; white-space: nowrap; }
  .nav-link::before { left: 11px; right: 11px; }
  .role-chip { padding: 4px 5px 4px 9px; }
  .role-switch { font-size: 10px; padding: 4px 8px; }
}
@media (max-width: 520px) {
  .brand-text { display: none; }             /* logo only on the narrowest phones */
  .brand { padding: 4px 5px; }
}

/* ---------- link address panel ---------- */
.base-warn {
  display: flex; gap: 10px; align-items: flex-start; line-height: 1.5;
  background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.35);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: #fdba74;
  margin-bottom: 4px;
}
.base-warn .vo-badge { color: #fdba74; background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.4); }
.base-warn b { color: #fff; }
.base-panel .share-divider { margin-top: 16px; }

/* ---------- login ---------- */
.login-form { display: flex; gap: 10px; align-items: stretch; }
.login-form .input { flex: 1; }
.login-form .btn { flex: 0 0 auto; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-family: var(--font-display); font-weight: 600; cursor: pointer;
  border-radius: var(--r-sm); padding: 0 18px; min-height: 38px;
  border: 1px solid transparent; color: var(--text);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: none; filter: brightness(.98); }
.btn-primary {
  background: var(--red-grad);
  border-color: #700000;
  box-shadow: 0 6px 22px rgba(220,38,38,0.28);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 28px rgba(220,38,38,0.42); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.btn-ghost {
  background: var(--surface-nav); border-color: var(--border);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--ring-faint);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-hover); color: var(--text); transform: translateY(-1px); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn-lg { min-height: 46px; padding: 0 26px; font-size: 16px; }
.btn:focus-visible, .nav-link:focus-visible, .chip:focus-visible, .mode:focus-visible {
  outline: 2px solid var(--red-lite); outline-offset: 2px;
}

/* ---------- hero ---------- */
.hero { text-align: center; padding: 34px 0 28px; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-lite); background: var(--red-soft);
  border: 1px solid var(--red-ring); padding: 6px 12px; border-radius: var(--r-pill);
}
.hero-title {
  font-size: clamp(32px, 5.4vw, 54px); font-weight: 800; letter-spacing: -0.035em;
  margin-top: 16px; line-height: 1.04;
}
.grad { background: linear-gradient(135deg, var(--red-lite), var(--red) 50%, var(--red-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); max-width: 620px; margin: 14px auto 0; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; }

/* ---------- panels ---------- */
.setup-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 10px; }
.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--sh-card);
}
.panel-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.panel-title .num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--red-soft); color: var(--red-lite); font-size: 14px; font-weight: 800;
  border: 1px solid var(--red-ring);
}
.count-pill {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--red-lite);
  background: var(--red-soft); border: 1px solid var(--red-ring);
  padding: 3px 11px; border-radius: var(--r-pill);
}

/* ---------- fields ---------- */
.field { display: block; margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-bottom: 9px; }
.input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface-nav); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 11px 14px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: none; border-color: var(--border-hover); box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }

/* ---------- bracket type chips ---------- */
.chip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chip {
  text-align: left; cursor: pointer; font: inherit;
  background: var(--surface-row); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 13px; 
  box-shadow: var(--sh-row);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: flex; flex-direction: column; gap: 4px;
}
.chip:hover { border-color: var(--border-hover); box-shadow: var(--sh-lift); transform: translateY(-1px); }
.chip.active { border-color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-ring), 0 8px 18px rgba(0,0,0,0.45); }
.chip-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: -0.01em; }
.chip-desc { font-size: 12px; color: var(--muted); line-height: 1.35; letter-spacing: -0.02em; }

/* ---------- mode grid ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mode {
  cursor: pointer; font: inherit; text-align: center;
  background: var(--surface-row); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 6px 10px;
  box-shadow: var(--sh-row);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mode:hover { border-color: var(--border-hover); box-shadow: var(--sh-lift); transform: translateY(-2px); }
.mode.active { border-color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-ring), 0 0 18px rgba(239,68,68,0.18); }
.mode-icon { height: 30px; display: grid; place-items: center; }
.mode-icon img { height: 30px; width: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.mode-name { font-size: 12px; font-weight: 700; color: var(--text); }
.mode-inline { display: inline-flex; align-items: center; gap: 5px; }
.mode-inline img { height: 16px; width: 16px; object-fit: contain; vertical-align: middle; }
.mode-eyebrow-img { height: 15px; width: 15px; object-fit: contain; vertical-align: -2px; margin-right: 2px; }
.mode.active .mode-name { color: var(--red-lite); }

/* ---------- add player ---------- */
.add-row { display: flex; gap: 10px; align-items: flex-start; }
.add-preview {
  position: relative; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  image-rendering: pixelated;
}
.add-preview img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: none; }
.add-preview.has-img img { display: block; }
.add-preview.has-img .add-preview-fallback { display: none; }
.add-preview-fallback { color: var(--muted-2); font-weight: 800; font-size: 20px; }
.add-row .input { flex: 1; }
.add-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.3fr 1fr 116px; gap: 8px; }
.add-fields .input { width: 100%; padding: 12px 12px; font-size: 14px; }
.add-fields .select { padding-right: 28px; }
@media (max-width: 640px) { .add-fields { grid-template-columns: 1fr 1fr; } .add-fields .input:first-child { grid-column: 1 / -1; } }
.hint { font-size: 12px; color: var(--muted-2); margin-top: 8px; }
.hint.error { color: var(--red-lite); }

/* ---------- tier badges (HT1 best … LT5 worst) ---------- */
.tier-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 900; letter-spacing: .04em;
  padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.35); color: var(--muted); line-height: 1;
}
.tier-badge.t1 { color: #fca5a5; border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.16); }
.tier-badge.t2 { color: #fdba74; border-color: rgba(249,115,22,0.45); background: rgba(249,115,22,0.13); }
.tier-badge.t3 { color: #fcd34d; border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.11); }
.tier-badge.t4 { color: #93c5fd; border-color: rgba(59,130,246,0.38); background: rgba(59,130,246,0.11); }
.tier-badge.t5 { color: #cbd5e1; border-color: rgba(148,163,184,0.35);background: rgba(148,163,184,0.10); }
.tier-badge.ur { color: var(--muted-2); font-style: normal; }
.tier-badge.lt { opacity: .78; }
.tier-badge.mini { font-size: 9px; padding: 2px 4px; }
.tier-badge.big { font-size: 16px; padding: 6px 10px; border-radius: 7px; }

/* ---------- player list ---------- */
.player-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.player-list::-webkit-scrollbar { width: 8px; }
.player-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.player-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-row); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 10px 8px 8px;
  box-shadow: var(--sh-row);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  animation: pop .2s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.player-seed { font-size: 12px; font-weight: 800; color: var(--muted-2); width: 22px; text-align: center; flex: 0 0 auto; }
.player-head { width: 38px; height: 38px; border-radius: 8px; flex: 0 0 auto; background: rgba(0,0,0,0.4); image-rendering: pixelated; }
.player-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.player-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-team { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-team i { color: var(--muted-2); font-weight: 600; }
.player-edit {
  background: none; border: none; color: var(--muted-2); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 7px 7px; border-radius: 8px; transition: .15s;
}
.player-edit:hover { color: var(--red-lite); background: rgba(239,68,68,0.12); }
.player-remove {
  background: none; border: none; color: var(--muted-2); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 8px; transition: .15s;
}
.player-remove:hover { color: var(--red); background: rgba(239,68,68,0.12); }
.empty-note { color: var(--muted-2); font-size: 14px; text-align: center; padding: 26px 0; }

.quick-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.sample-adder { display: flex; align-items: center; gap: 6px; }
.step-btn.sm { width: 30px; height: 30px; font-size: 16px; border-radius: 7px; }
.mini-num {
  width: 54px; text-align: center; font: inherit; font-weight: 800; font-size: 14px; color: var(--text);
  background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 4px;
}
.mini-num:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.mini-num:disabled, .btn:disabled { opacity: .45; }

/* ---------- generate bar ---------- */
.generate-bar {
  margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 24px; box-shadow: var(--shadow);
}
.gen-summary { color: var(--muted); font-size: 14px; }
.gen-summary b { color: var(--text); }

/* ============================================================
   BRACKET VIEW
   ============================================================ */
.bracket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.bracket-title { font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -0.02em; margin-top: 12px; }
.bracket-actions { display: flex; align-items: center; gap: 14px; }
.champion-badge {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.05));
  border: 1px solid rgba(34,197,94,0.4); border-radius: var(--radius); padding: 10px 16px;
  box-shadow: 0 0 26px var(--win-glow);
  animation: pop .3s ease;
}
.champ-label { font-size: 11px; font-weight: 900; letter-spacing: 0.16em; color: var(--win); }
.champ-body { display: flex; align-items: center; gap: 10px; }
.champ-body img { width: 34px; height: 34px; border-radius: 7px; image-rendering: pixelated; }
.champ-body span { font-weight: 900; font-size: 18px; }

/* ---------- bracket scroll canvas ---------- */
.bracket-scroll {
  position: relative; overflow-x: auto; overflow-y: hidden;
  padding: 12px 6px 30px; border-radius: var(--radius);
}
.bracket-scroll::-webkit-scrollbar { height: 10px; }
.bracket-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.bracket {
  position: relative; display: inline-flex; gap: 64px; align-items: stretch;
  min-width: min-content; padding: 4px;
}
.svg-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.svg-connectors path { fill: none; stroke: var(--border-strong); stroke-width: 2; transition: stroke .2s; }
.svg-connectors path.lit { stroke: var(--red); filter: drop-shadow(0 0 4px var(--red-glow)); }

.round { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-around; min-width: 240px; }
.round-label {
  position: absolute; top: -6px; left: 0; right: 0; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--muted);
  text-transform: uppercase;
}
.round-inner { display: flex; flex-direction: column; justify-content: space-around; height: 100%; gap: 22px; padding-top: 26px; }

/* ---------- match card ---------- */
.match {
  background: var(--panel-2); border: 1px solid var(--border-strong);
  border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: border-color .2s, box-shadow .2s;
}
.match:hover { border-color: rgba(239,68,68,0.4); }
.match.done { border-color: rgba(239,68,68,0.35); }
.match-num {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted-2);
  padding: 5px 10px 3px; background: rgba(0,0,0,0.25); display: flex; justify-content: space-between;
}
.match-fmt {
  color: var(--red-lite); cursor: context-menu; padding: 0 4px; border-radius: 4px;
  background: rgba(239,68,68,0.12);
}
.slot {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
  border-top: 1px solid var(--border-strong); transition: background .15s;
  position: relative;
}
.slot:first-of-type { border-top: none; }
.slot:hover:not(.empty):not(.locked) { background: rgba(239,68,68,0.08); }
.slot-head { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; background: rgba(0,0,0,0.4); image-rendering: pixelated; }
.slot-seed { font-size: 11px; font-weight: 800; color: var(--muted-2); width: 16px; text-align: center; flex: 0 0 auto; }
.slot-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slot-name { font-weight: 700; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-id > .slot-name { flex: 0 0 auto; }
.slot-team { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.winner .slot-team { color: var(--muted); }
.slot-score {
  font-size: 12px; font-weight: 800; color: var(--muted-2); min-width: 18px; text-align: center;
}
.slot.winner { background: rgba(239,68,68,0.12); }
.slot.winner .slot-name { color: var(--red-lite); }
.slot.winner .slot-score { color: var(--red-lite); }
.slot.winner::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
}
.slot.eliminated { opacity: .45; }
.slot.empty { cursor: default; color: var(--muted-2); }
.slot.empty .slot-name { color: var(--muted-2); font-style: italic; font-weight: 600; }
.slot.locked { cursor: default; }
.slot.bye .slot-name { color: var(--muted-2); font-style: italic; }
.pick-hint { font-size: 10px; color: var(--muted-2); opacity: 0; transition: .15s; }
.slot:hover:not(.empty):not(.locked) .pick-hint { opacity: 1; }

/* ---------- split (mirrored) bracket: halves left + right, final centred ---- */
/* a mirrored bracket is far wider than the page column, so let its canvas use
   the whole window — body already clips horizontal overflow */
.bracket-scroll.wide {
  width: calc(100vw - 26px);
  margin-left: calc(50% - 50vw + 13px);
}
.bracket-fit { text-align: center; }
.bracket.split { gap: 40px; align-items: stretch; text-align: left; }
.split-side { display: flex; gap: 64px; align-items: stretch; }
.split-side.right { flex-direction: row-reverse; }
.split-centre { min-width: 260px; justify-content: center; }

/* tighter columns, used by the fit pass before it resorts to zooming out */
.bracket.split.compact { gap: 22px; }
.bracket.split.compact .split-side { gap: 26px; }
.bracket.split.compact .round { min-width: 186px; }
.bracket.split.compact .split-centre { min-width: 210px; }
.bracket.split.compact .round-inner { gap: 14px; }
.bracket.split.compact .slot { padding: 7px 9px; gap: 8px; }
.bracket.split.compact .slot-head { width: 26px; height: 26px; }
.bracket.split.compact .slot-name { font-size: 13px; }
.split-centre > .round-inner { justify-content: center; flex: 0 1 auto; height: auto; gap: 18px; }
.split-centre .match { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(239,68,68,0.18); }

.centre-champ {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.05));
  border: 1px solid rgba(34,197,94,0.4); border-radius: var(--radius); padding: 11px 14px;
  box-shadow: 0 0 26px var(--win-glow); animation: pop .3s ease;
}
.centre-champ-label { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: var(--win); }
.centre-champ-body { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 16px; }
.centre-champ-head { width: 34px; height: 34px; border-radius: 7px; image-rendering: pixelated; }

@media (max-width: 860px) {
  .bracket.split { flex-direction: column; gap: 28px; }
  .split-side.right { flex-direction: row; }
}

/* ---------- PNG export stage (offscreen) ---------- */
.bracket-export {
  display: inline-block; padding: 34px 40px 40px; color: var(--text); font-family: var(--font);
  background:
    radial-gradient(80% 60% at 12% -10%, rgba(239,68,68,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #160f0f 0%, #0c0909 100%);
}
.bracket-export .bx-head { margin-bottom: 26px; }
.bx-title { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.bx-sub {
  margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-lite); display: flex; align-items: center; gap: 6px;
}
.bx-champ {
  margin-top: 12px; display: inline-block; font-size: 13px; font-weight: 900; letter-spacing: .12em;
  color: var(--win); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.4);
  border-radius: 8px; padding: 6px 12px;
}
.bracket-export .bracket-block:last-child { margin-bottom: 0; }
.bracket-export .view-only-note { display: none; }

/* ---------- view-only banner ---------- */
.view-only-note {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  background: rgba(255,255,255,0.03); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 16px; color: var(--muted); font-size: 13px;
}
.vo-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 900; letter-spacing: .14em;
  color: var(--red-lite); background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3); border-radius: 5px; padding: 3px 7px;
}

/* ---------- share modal ---------- */
.share-row { display: flex; gap: 10px; align-items: stretch; }
.share-input { font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.share-row .btn { flex: 0 0 auto; }
.share-divider {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 22px 0 8px; display: flex; align-items: center; gap: 8px;
}
.share-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.share-note { margin: 0 0 12px; line-height: 1.5; }
.share-note code { font-size: 11px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; }
.live-panel { border-radius: var(--radius-sm); }
.live-panel .share-divider { margin-top: 4px; }
.live-panel.on .share-divider { color: var(--win); }
.live-panel.on .share-divider::after { background: rgba(34,197,94,0.3); }
.live-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.live-panel .style-opts { margin-bottom: 12px; }
.live-panel .style-card { padding: 12px 14px; }
.live-extra:not(:empty) { margin-bottom: 4px; }
.live-extra .config-label { margin-bottom: 6px; }
.live-extra .hint { margin-top: 6px; }

/* ---------- live status chip (bracket header) ---------- */
.live-chip {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; cursor: pointer;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--win);
  background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.38);
  border-radius: 999px; padding: 7px 13px; transition: .15s; white-space: nowrap;
}
.live-chip:hover:not(:disabled) { background: rgba(34,197,94,0.16); }
.live-chip:disabled { cursor: default; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win-glow); animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-chip.pending { color: var(--red-lite); background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); }
.live-chip.pending .live-dot { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.live-chip.failed, .live-chip.stalled { color: #fdba74; background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.4); }
.live-chip.failed .live-dot, .live-chip.stalled .live-dot { background: #fb923c; box-shadow: none; }
.view-only-note.live-error { border-color: rgba(249,115,22,0.5); color: #fdba74; }
.view-only-note.live-error .vo-badge { color: #fdba74; background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.4); }

/* bracket section (winners/losers/grand final labels) */
.bracket-section-label {
  font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-lite); margin: 8px 0 4px 6px; display: flex; align-items: center; gap: 8px;
}
.bracket-section-label::before { content: ""; width: 14px; height: 2px; background: var(--red); border-radius: 2px; }
.bracket-block { margin-bottom: 34px; }

/* ---------- round robin ---------- */
.rr-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
@media (max-width: 900px){ .rr-wrap { grid-template-columns: 1fr; } }
.rr-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.rr-panel h3 { font-size: 15px; font-weight: 800; margin-bottom: 14px; letter-spacing: .02em; }
.rr-matches { display: flex; flex-direction: column; gap: 16px; }
.rr-round-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.standings { width: 100%; border-collapse: collapse; }
.standings th, .standings td { text-align: left; padding: 9px 8px; font-size: 14px; border-bottom: 1px solid var(--border-strong); }
.standings th { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.standings td.c, .standings th.c { text-align: center; }
.standings tr.leader td { color: var(--red-lite); font-weight: 800; }
.stand-player { display: flex; align-items: center; gap: 10px; }
.stand-player img { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; }
.rr-rank { font-weight: 800; color: var(--muted-2); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .setup-grid { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: repeat(4, 1fr); }
  .chip-row { grid-template-columns: 1fr; }
  .generate-bar { flex-direction: column; align-items: stretch; }
  .generate-bar .btn { width: 100%; justify-content: center; }
  .nav-link[data-nav]{ padding: 8px 10px; }
}
@media (max-width: 480px) {
  .mode-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- format context menu ---------- */
.ctx-menu {
  position: fixed; z-index: 100; width: 224px;
  background: #17110f; border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  animation: pop .12s ease;
}
.ctx-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ctx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ctx-opt {
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; color: var(--text);
  background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 0;
  transition: .12s;
}
.ctx-opt:hover { border-color: rgba(239,68,68,0.6); }
.ctx-opt.active { background: rgba(239,68,68,0.16); border-color: var(--red); color: var(--red-lite); }
.ctx-custom { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ctx-custom > span { font-size: 11px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.ctx-select {
  font: inherit; font-size: 12px; color: var(--text); background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 4px; flex: 1; min-width: 0;
}
.ctx-num {
  font: inherit; font-size: 12px; color: var(--text); background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px; width: 46px; text-align: center;
}
.ctx-apply, .ctx-reset {
  font: inherit; font-weight: 800; cursor: pointer; color: var(--text);
  background: linear-gradient(to right, var(--red-2), var(--red)); border: none; border-radius: 7px;
  padding: 6px 12px; font-size: 12px;
}
.ctx-reset { width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); color: var(--muted); padding: 8px; }
.ctx-reset:hover { border-color: rgba(239,68,68,0.5); color: var(--red-lite); }

.slot-score { font-size: 13px; font-weight: 900; }

/* ---------- config sub-panels (swiss / groups) ---------- */
.sub-config {
  margin-top: -6px; margin-bottom: 22px; padding: 16px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.18);
  animation: pop .15s ease;
}
.sub-config .field { margin-bottom: 16px; }
.sub-config .field:last-child { margin-bottom: 0; }
.select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.step-btn {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 18px; font-weight: 800;
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text); line-height: 1; transition: .12s;
}
.step-btn:hover { border-color: var(--red); color: var(--red-lite); }
.step-val { min-width: 74px; text-align: center; font-weight: 800; font-size: 15px; }
.stepper-note { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* ---------- group stage view ---------- */
.stage-label {
  font-size: 15px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin: 8px 0 16px; display: flex; align-items: center; gap: 10px;
}
.stage-label::before { content: ""; width: 4px; height: 20px; border-radius: 3px; background: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.stage-label.main { margin-top: 40px; }
.groups-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 20px; }
.group-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.group-title { font-size: 16px; font-weight: 900; margin-bottom: 14px; color: var(--red-lite); letter-spacing: .02em; }
.group-sub { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0; }
.group-matches { margin-bottom: 14px; }
.group-matches .rr-matches { gap: 10px; }
.group-matches .bracket { gap: 34px; }
.qual-list { border-top: 1px solid var(--border-strong); padding-top: 12px; }
.qual-head { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.qual-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-weight: 700; font-size: 14px; opacity: .55; }
.qual-row.q { opacity: 1; }
.qual-row img { border-radius: 6px; image-rendering: pixelated; }
.qual-rank { font-size: 12px; font-weight: 800; color: var(--muted-2); width: 22px; }
.locked-note {
  background: rgba(255,255,255,0.03); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--muted); font-size: 14px; margin-bottom: 18px; line-height: 1.5;
}

/* qualification highlight in standings */
.standings tr.qualifies td { background: rgba(34,197,94,0.06); }
.standings tr.cut td { border-top: 2px solid rgba(239,68,68,0.5); }
.qual-badge {
  font-size: 10px; font-weight: 900; color: var(--win); background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.4); border-radius: 5px; padding: 1px 5px; margin-left: 6px;
}
.soft { color: var(--muted-2); font-weight: 600; }

/* placeholder qualifier slots in the main bracket */
.slot.placeholder .slot-name { color: var(--red-lite); font-style: italic; font-weight: 700; opacity: .8; }
.slot.placeholder { cursor: default; }
.slot.placeholder .slot-head { background: repeating-linear-gradient(45deg, rgba(239,68,68,0.1), rgba(239,68,68,0.1) 4px, transparent 4px, transparent 8px); }

/* ============================================================
   MODALS (style popup + pvpchamp)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(6,4,4,0.72); backdrop-filter: blur(6px); padding: 24px; overflow-y: auto;
  animation: pop .12s ease;
}
.modal {
  width: 100%; max-width: 560px; background: #17110f; border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,0.7); padding: 26px;
  max-height: 90vh; overflow-y: auto;
}
.modal-title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.modal-sub { color: var(--muted); font-size: 14px; margin-top: 4px; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.modal-actions .btn { flex: 0 0 auto; }

/* style cards */
.style-opts { display: flex; flex-direction: column; gap: 10px; }
.style-card {
  text-align: left; cursor: pointer; font: inherit; color: var(--text); display: flex; flex-direction: column; gap: 3px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: .14s;
}
.style-card:hover { border-color: rgba(239,68,68,0.5); }
.style-card.active { border-color: var(--red); background: rgba(239,68,68,0.10); box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }
.style-name { font-weight: 800; font-size: 15px; }
.style-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.style-config { margin-top: 18px; }
.config-note { font-size: 14px; color: var(--muted); background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 14px; }
.config-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.config-hint { font-size: 12px; color: var(--muted-2); margin-top: 10px; }
.config-hint.ok { color: var(--win); }

/* mode pick chips (shared: config + champ modal) */
.modepick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.modepick {
  cursor: pointer; font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 6px 8px; transition: .13s;
}
.modepick img { width: 30px; height: 30px; object-fit: contain; }
.modepick span { font-size: 11px; font-weight: 700; }
.modepick:hover:not(.disabled) { border-color: rgba(239,68,68,0.5); transform: translateY(-2px); }
.modepick.active { border-color: var(--red); background: rgba(239,68,68,0.14); box-shadow: 0 0 14px rgba(239,68,68,0.22); }
.modepick.banned { border-color: rgba(120,120,120,0.5); opacity: .5; }
.modepick.banned img { filter: grayscale(1); }
.modepick.disabled { opacity: .38; cursor: not-allowed; }
.modepick-tag { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 900; color: var(--red-lite); font-style: normal; }

/* switching: per-match mode chip in header */
.match-mode { color: var(--red-lite); display: inline-flex; align-items: center; gap: 4px; cursor: context-menu; background: rgba(239,68,68,0.12); border-radius: 4px; padding: 1px 5px 1px 3px; }
.match-mode img { width: 13px; height: 13px; object-fit: contain; }

/* ctx-menu mode list (switching) */
.ctx-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; max-height: 150px; overflow-y: auto; }
.ctx-mode { cursor: pointer; font: inherit; background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: .12s; }
.ctx-mode img { width: 20px; height: 20px; object-fit: contain; }
.ctx-mode span { font-size: 9px; font-weight: 700; }
.ctx-mode:hover { border-color: rgba(239,68,68,0.5); }
.ctx-mode.active { border-color: var(--red); background: rgba(239,68,68,0.14); }

/* pvpchamp match footer */
.match.champ { min-width: 260px; }
.champ-foot { border-top: 1px solid var(--border-strong); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0,0,0,0.2); }
.champ-hint { font-size: 11px; color: var(--muted-2); font-style: italic; }
.champ-games { display: flex; gap: 5px; }
.cgame { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.cgame img { width: 22px; height: 22px; object-fit: contain; opacity: .85; }
.cgame em { font-size: 8px; font-weight: 800; color: var(--muted-2); font-style: normal; }
.cgame.decider img { filter: drop-shadow(0 0 4px var(--red-glow)); }
.cgame.won img { opacity: 1; }
.cgame.won::after { content: "✓"; position: absolute; top: -4px; right: -4px; font-size: 9px; color: var(--win); font-weight: 900; }
.champ-manage { padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap; }

/* pvpchamp modal */
.champ-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; font-weight: 800; }
.cvs-p { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.cvs-p img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.cvs-x { color: var(--muted-2); font-size: 13px; }
.champ-section { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.champ-section:first-child { margin-top: 0; }
.champ-step { font-size: 15px; margin-bottom: 12px; }
.champ-step em { color: var(--red-lite); font-style: normal; font-weight: 800; }
.champ-assign { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cassign { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 11px; }
.cassign img { width: 26px; height: 26px; object-fit: contain; }
.cassign b { font-size: 13px; display: block; }
.cassign span { font-size: 11px; color: var(--muted); }
.cassign.decider { border-color: rgba(239,68,68,0.5); }
.cassign.banned { opacity: .55; }
.cassign.banned img { filter: grayscale(1); }
.cgrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-strong); }
.cgrow.locked { opacity: .4; }
.cgrow-mode { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.cgrow-mode img { width: 22px; height: 22px; object-fit: contain; }
.cgrow-pick { display: flex; gap: 6px; }
.cgrow-btn { font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text); background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 12px; transition: .12s; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgrow-btn:hover { border-color: rgba(239,68,68,0.5); }
.cgrow-btn.won { background: rgba(239,68,68,0.16); border-color: var(--red); color: var(--red-lite); }
.champ-winner { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.05)); border: 1px solid rgba(34,197,94,0.4); border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: 0 0 22px var(--win-glow); }
.champ-winner img { width: 30px; height: 30px; border-radius: 6px; image-rendering: pixelated; }
.champ-winner b { color: var(--win); }
@media (max-width: 520px) { .champ-assign { grid-template-columns: 1fr; } }

/* ============================================================
   SCHEDULE BOARD
   ============================================================ */
.sched-empty {
  max-width: 640px; margin: 0 auto; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; line-height: 1.6;
}
.linkish { background: none; border: none; color: var(--red-lite); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

.sched-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 10px; align-items: start; }
.sched-builder .field { margin-bottom: 0; }
.sched-builder .field > span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; margin-bottom: 24px; }
.field-grid .field-sm { }
.field-grid .field-wide { grid-column: 1 / -1; }
.sched-builder textarea.input { resize: vertical; font-family: var(--font); line-height: 1.5; }

.sched-matchbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sched-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 700; }
.sched-matchlist { list-style: none; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.sched-match { }
.sched-match-lab {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); cursor: pointer; font-size: 13px;
}
.sched-match-lab:hover { border-color: rgba(239,68,68,0.4); }
.sched-check { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.sched-match-no { font-weight: 800; color: var(--red-lite); font-size: 12px; min-width: 26px; }
.sched-match-vs { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-match-round { color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sched-actions { margin-top: 22px; }
.sched-actions .btn-lg { width: 100%; }

.sched-saved-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sched-saved-item { display: flex; gap: 8px; }
.sched-saved-open {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); cursor: pointer; text-align: left;
}
.sched-saved-open:hover { border-color: rgba(239,68,68,0.4); }
.sched-saved-open strong { font-size: 14px; }
.sched-saved-open span { font-size: 12px; color: var(--muted); }
.sched-saved-del { width: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); cursor: pointer; }
.sched-saved-del:hover { color: var(--red-lite); border-color: rgba(239,68,68,0.4); }

/* ---- the board stage ---- */
.board-stage { margin-top: 30px; }
.board-toolbar { display: flex; align-items: center; margin-bottom: 12px; gap: 10px; }
.board-toolbar-title { font-weight: 800; font-size: 15px; }
.board-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
.board-wrap { position: relative; width: 100%; overflow: auto; border-radius: var(--radius); }

/* ---- the graphic itself (fixed 1280×720, scaled by JS) ---- */
.sboard {
  width: 1280px; height: 720px; transform-origin: top left; position: relative;
  color: var(--text); font-family: var(--font); overflow: hidden;
  padding: 52px 60px 0;
  background:
    radial-gradient(115% 85% at 50% 116%, rgba(248,113,113,0.55) 0%, rgba(239,68,68,0.40) 16%, rgba(220,38,38,0.20) 38%, rgba(24,14,14,0.4) 64%, #0c0909 100%),
    radial-gradient(80% 60% at 12% -10%, rgba(239,68,68,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #160f0f 0%, #0c0909 100%);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.12), inset 0 -120px 160px -60px rgba(239,68,68,0.18);
}
/* faint tech grid, matching the app background */
.sboard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(239,68,68,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 120%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 50% 120%, #000 20%, transparent 75%);
}
.sboard > * { position: relative; }
.sb-corner { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(248,113,113,0.85); filter: drop-shadow(0 0 6px var(--red-glow)); }
.sb-corner-tl { top: 26px; left: 30px; border-right: none; border-bottom: none; }
.sb-corner-tr { top: 26px; right: 30px; border-left: none; border-bottom: none; }
.sb-corner-bl { bottom: 16px; left: 30px; border-right: none; border-top: none; }
.sb-corner-br { bottom: 16px; right: 30px; border-left: none; border-top: none; }

.sb-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 34px; }
.sb-logo { display: flex; align-items: center; gap: 14px; }
.sb-logo-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.sb-logo-text { font-weight: 900; font-size: 20px; letter-spacing: .02em; text-shadow: 0 2px 6px rgba(0,0,0,.5); max-width: 200px; line-height: 1.05; }
.sb-title { text-align: center; }
.sb-day { font-size: 26px; font-weight: 900; color: var(--red-lite); letter-spacing: .04em; text-shadow: 0 2px 10px var(--red-glow); }
.sb-sched { font-size: 62px; font-weight: 900; line-height: .9; letter-spacing: .02em; color: var(--text);
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.6); }
.sb-times { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 4px; }
.sb-time { font-size: 22px; font-weight: 800; color: var(--text); text-shadow: 0 2px 6px rgba(0,0,0,.6); }

.sb-matches { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.sb-finals { margin-top: 16px; display: flex; justify-content: center; }
.sb-finals .sb-card { width: 60%; }

.sb-card {
  position: relative; background: linear-gradient(180deg, rgba(30,17,17,.85), rgba(12,9,9,.92));
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 16px 20px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.sb-card::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--red-lite), var(--red) 55%, var(--red-2)); box-shadow: 0 0 12px var(--red-glow); }
.sb-card.featured { padding: 20px 24px 24px; border-color: rgba(239,68,68,0.45); box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(239,68,68,0.18); }
.sb-card-row { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 14px; }
.sb-name { font-weight: 900; font-size: 21px; letter-spacing: .01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 5px rgba(0,0,0,.6); }
.sb-card.featured .sb-name { font-size: 25px; }
.sb-name-l { text-align: right; }
.sb-name-r { text-align: left; }
.sb-name.tbd { color: var(--muted); }
.sb-head { width: 40px; height: 40px; border-radius: 7px; image-rendering: pixelated; object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); flex: none; }
.sb-card.featured .sb-head { width: 46px; height: 46px; }
.sb-head-tbd { display: grid; place-items: center; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.3);
  color: var(--red-lite); font-weight: 900; font-size: 22px; }
.sb-vs { font-weight: 900; font-size: 18px; color: var(--red-lite); text-shadow: 0 2px 6px var(--red-glow); }
.sb-card-label { text-align: center; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.sb-card.featured .sb-card-label { font-size: 14px; color: var(--red-lite); }

.sb-footer { position: absolute; left: 60px; right: 60px; bottom: 30px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.sb-foot-l { text-align: left; }
.sb-foot-c { text-align: center; color: var(--red-lite); }
.sb-foot-r { text-align: right; }

@media (max-width: 900px) { .sched-grid { grid-template-columns: 1fr; } }

/* ============================================================
   NEXT MATCH — VS FACE-OFF BOARD
   ============================================================ */
.vsboard {
  width: 1280px; height: 720px; transform-origin: top left; position: relative;
  color: var(--text); font-family: var(--font); overflow: hidden;
  background:
    radial-gradient(60% 75% at 25% 42%, rgba(248,113,113,0.22) 0%, transparent 55%),
    radial-gradient(60% 75% at 75% 42%, rgba(248,113,113,0.22) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 120%, rgba(239,68,68,0.30) 0%, rgba(220,38,38,0.12) 34%, #0c0909 72%),
    linear-gradient(180deg, #160f0f 0%, #0c0909 100%);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.12);
}
.vsboard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(239,68,68,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 80%);
}
.vsboard > * { position: relative; }

.vs-main { height: 620px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 30px 60px 0; }
.vs-side { display: flex; align-items: center; justify-content: center; height: 100%; }

.vs-figure { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.vs-nameblock { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vs-meta { display: flex; align-items: center; gap: 10px; }
.vs-team { font-size: 17px; font-weight: 800; letter-spacing: .14em; color: var(--red-lite); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.vs-name {
  white-space: nowrap; font-weight: 900; font-size: 32px; letter-spacing: .02em; color: var(--text);
  background: rgba(12,9,9,.82); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 22px; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.vs-head { width: 300px; height: 300px; image-rendering: pixelated; object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 34px var(--red-glow)); }
.vs-head.tbd { opacity: .5; filter: grayscale(1) drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.vs-right .vs-head { transform: scaleX(-1); }   /* mirror so both heads face the VS */

.vs-center { align-self: center; font-size: 118px; font-weight: 900; line-height: 1; padding: 0 10px;
  color: #fff; text-shadow: 0 0 24px var(--red-glow), 0 6px 0 rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.6); }

.vs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 60px;
  background: linear-gradient(180deg, rgba(12,9,9,.4), rgba(12,9,9,.92)); border-top: 1px solid var(--border-strong); }
.vs-bar-title { font-size: 34px; font-weight: 900; letter-spacing: .01em; color: var(--text); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.vs-bar-sub { font-size: 15px; font-weight: 700; color: var(--red-lite); letter-spacing: .06em; margin-top: 2px; }
.vs-bar-logo { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }



/* ============================================================
   SHARED PARTS — rows, pills, status
   ============================================================ */

/* the export boards must stay on the system stack: nodeToPng()
   rasterises them inside an SVG foreignObject, which cannot load a
   webfont, so a webfont here would silently fall back in the PNG. */
.sboard, .sboard *, .vsboard, .vsboard * { font-family: var(--font-board); }

.row {
  background: var(--surface-row); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px;
  box-shadow: var(--sh-row);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.row:hover { border-color: var(--border-hover); box-shadow: var(--sh-lift); transform: translateY(-1px); }

.row-head { display: contents; }
.row-head > span {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2); padding-bottom: 8px;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-xs);
  background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.pill-accent { color: var(--red-lite); box-shadow: inset 0 0 0 1px var(--red-ring); background: var(--red-soft); }
.pill-region { color: var(--info); box-shadow: inset 0 0 0 1px rgba(114,169,255,0.3); background: rgba(114,169,255,0.08); letter-spacing: .04em; font-weight: 700; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex: 0 0 auto; }
.status-dot.on  { background: var(--online);  box-shadow: 0 0 9px rgba(0,194,103,0.75); }
.status-dot.off { background: var(--offline); }
.status-dot.pending { background: var(--muted-2); animation: dotpulse 1.2s ease-in-out infinite; }
@keyframes dotpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ============================================================
   SERVERS VIEW
   ============================================================ */
.srv-featured {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.srv-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 150px; padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #100a0d;
  box-shadow: inset 0 0 5px rgba(255,255,255,0.14), var(--sh-card);
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  animation: srvIn .42s var(--ease) both;
}
.srv-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(29deg,
    rgba(var(--srv-accent, 239,68,68), 0.80) 0%,
    rgba(var(--srv-accent, 239,68,68), 0.46) 22%,
    rgba(var(--srv-accent, 239,68,68), 0.12) 48%,
    transparent 72%);
}
/* the icon a server serves for itself, bled large and faint to the right */
.srv-card-art {
  position: absolute; z-index: -1; right: -18px; top: 50%;
  width: 150px; height: 150px; transform: translateY(-50%);
  object-fit: contain; image-rendering: pixelated;
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
  mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
}
.srv-card.has-art .srv-card-art { opacity: .5; }
.srv-card:nth-child(2) { animation-delay: 70ms; }
.srv-card:nth-child(3) { animation-delay: 140ms; }
.srv-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 5px rgba(255,255,255,0.18), var(--sh-pop); }
@keyframes srvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.srv-card-top { min-width: 0; }
.srv-card-name {
  font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-card-blurb {
  font-size: 13px; color: var(--text-2); line-height: 1.4; letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7); margin-top: 2px;
}
.srv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.srv-card-live { display: flex; align-items: center; gap: 7px; min-width: 0; }
.srv-card-count {
  font-size: 13px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); white-space: nowrap;
}
/* deliberately raised, like a game button */
.srv-play {
  flex: 0 0 auto; cursor: pointer; font: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
  min-width: 96px; min-height: 30px; padding: 0 16px; border: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.42));
  box-shadow: inset 0 -2px 8px rgba(255,255,255,0.35), 0 3px 14px rgba(0,0,0,0.5);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.srv-play:hover { transform: scale(1.05); filter: brightness(1.1); }
.srv-play:active { transform: none; }

/* ---------- the table ---------- */
.srv-list { display: flex; flex-direction: column; gap: 8px; }

/* The header and the rows share one track definition, and every track is
   either fixed or fr, never content-sized. That is what keeps the labels
   lined up with the cells underneath despite being separate grids. */
.srv-head, .srv-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns:
    26px                    /* flag    */
    28px                    /* icon    */
    minmax(120px, 1.3fr)    /* name    */
    104px                   /* players */
    minmax(110px, 1fr)      /* version */
    82px                    /* status  */
    72px                    /* modes   */
    minmax(200px, 1.5fr);   /* actions */
}
.srv-head { padding: 0 14px 4px; }
.srv-head > span {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2);
}
.srv-head-title { grid-column: 1 / 4; }
.srv-sort {
  grid-column: 8; justify-self: end;
  cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); background: var(--surface-nav);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 5px 10px; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.srv-sort:hover { color: #fff; border-color: var(--border-hover); }

.srv-flag { display: grid; place-items: center; color: var(--muted-2); font-size: 11px; }
.srv-flag img {
  width: 22px; height: 15px; object-fit: cover; display: block;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.srv-ico { width: 28px; height: 28px; }
.srv-ico img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: var(--r-xs); image-rendering: pixelated;
  background: var(--surface-nav);
}
.srv-ico.blank img { opacity: .25; }

.srv-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srv-row-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-row-sub {
  font-size: 12px; color: var(--muted); letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-players {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--text); white-space: nowrap;
}
.srv-version {
  font-size: 12px; color: var(--text-2); line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.srv-state-cell { display: flex; }
.srv-state {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; min-height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.srv-state.on      { color: #6ee7a0; background: rgba(0,194,103,0.13); box-shadow: inset 0 0 0 1px rgba(0,194,103,0.42); }
.srv-state.off     { color: var(--offline); background: rgba(255,101,101,0.10); box-shadow: inset 0 0 0 1px rgba(255,101,101,0.34); }
.srv-state.unknown { color: var(--muted-2); background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border); }
.srv-state.wait    { color: var(--muted-2); background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border); }

.srv-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.srv-mode-ico { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.srv-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.srv-status b { color: var(--text); font-weight: 700; }
.srv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.srv-ip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.srv-copy { cursor: pointer; }
.srv-copy.copied { color: var(--win); border-color: rgba(34,197,94,0.45); }

/* Narrow: the table collapses to a stacked card per server. This drops the
   grid entirely rather than redefining its tracks, because the full-width
   spanning cells inflate the fixed flag and icon columns when they do not
   fit. flex-wrap gets the same stacking with no track arithmetic. */
@media (max-width: 1200px) {
  .srv-head { display: none; }
  .srv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .srv-row > .srv-flag       { order: 0; width: 22px; }
  .srv-row > .srv-ico        { order: 0; }
  .srv-row > .srv-row-main   { order: 1; flex: 1 1 130px; }
  .srv-row > .srv-state-cell { order: 2; margin-left: auto; }
  .srv-row > .srv-players    { order: 3; flex: 0 0 auto; }
  .srv-row > .srv-version    { order: 4; flex: 1 1 120px; }
  .srv-row > .srv-modes      { order: 5; flex: 1 1 100%; }
  .srv-row > .srv-actions    { order: 6; flex: 1 1 100%; justify-content: flex-start; }
}

/* ============================================================
   HOME VIEW
   ============================================================ */
.home-hero { text-align: center; padding: 30px 0 26px; }
.home-cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

.home-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); }
.feature {
  position: relative; overflow: hidden;
  min-height: 190px; padding: 26px 28px;
  border-radius: var(--radius); border: 1px solid var(--ring-faint);
  background: var(--surface-1);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  cursor: pointer; text-align: left;
  font: inherit; color: var(--text);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.feature::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(239,68,68,0.22), transparent 62%);
  transition: transform var(--t-slow) var(--ease);
}
.feature.alt::before { background: radial-gradient(120% 120% at 100% 0%, rgba(114,169,255,0.18), transparent 62%); }
.feature:hover { transform: translateY(-2px); box-shadow: var(--sh-pop); }
.feature:hover::before { transform: scale(1.025); }
.feature > * { position: relative; }
.feature-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.feature-sub { color: var(--muted); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; max-width: 46ch; }
.feature-go { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--red-lite); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.step { padding: 16px; border-radius: var(--radius-sm); background: var(--surface-row); border: 1px solid var(--border-strong); box-shadow: var(--sh-row); }
.step-n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--red-soft); border: 1px solid var(--red-ring);
  color: var(--red-lite); font-weight: 800; font-size: 13px; margin-bottom: 10px;
}
.step-t { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.step-d { font-size: 13px; color: var(--muted); line-height: 1.45; letter-spacing: -0.02em; }

.home-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.home-mode {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: var(--r-pill);
  background: var(--surface-nav); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.home-mode img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  background: #080607;
  margin-top: var(--sp-8);
}
.footer-inner {
  max-width: var(--shell-max); margin: 0 auto; padding: 26px var(--gutter);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.footer-brand img { width: 28px; height: 28px; object-fit: contain; }
.footer-legal { font-size: 12px; font-weight: 500; color: var(--muted-2); line-height: 1.5; margin-top: 8px; max-width: 42ch; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); font-weight: 700; }
.footer-link {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--muted);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-link:hover { color: #fff; transform: translateY(-1px); }

/* ============================================================
   RESPONSIVE — 1024 / 768 / 520
   ============================================================ */
@media (max-width: 1024px) {
  :root { --gutter: 28px; }
  .srv-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --gutter: 16px; }
  .srv-featured, .home-features { grid-template-columns: 1fr; }
  .srv-row { grid-template-columns: 1fr auto; row-gap: 10px; }
  .srv-row .srv-modes { grid-column: 1; }
  .srv-actions { grid-column: 1 / -1; justify-content: space-between; }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .srv-row { grid-template-columns: 1fr; }
  .srv-actions { flex-wrap: wrap; }
  .home-cta .btn { width: 100%; }
}

/* ---------- respect a reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .row:hover, .chip:hover, .mode:hover, .feature:hover, .srv-card:hover,
  .btn-primary:hover, .btn-ghost:hover, .footer-link:hover { transform: none; }
}

/* ============================================================
   PARTICIPANTS VIEW
   ============================================================ */
.dc-input { grid-column: 1 / -1; }

.part-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.part-head-info .hint { margin-top: 6px; }
.part-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.part-head-actions .input { width: 240px; min-height: 32px; padding: 6px 12px; font-size: 14px; }

.part-list { display: flex; flex-direction: column; gap: 8px; }
.part-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 30px 34px minmax(0, 1fr) auto auto auto;
}
.part-seed { font-size: 12px; font-weight: 800; color: var(--muted-2); text-align: center; }
.part-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.part-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.part-team {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.part-team.none { color: var(--muted-2); font-style: italic; font-weight: 600; }
.part-actions { display: flex; align-items: center; gap: 6px; }
.part-remove:hover { color: var(--red-lite); border-color: var(--red-ring); }

/* ---------- the Discord chip ---------- */
.dc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 190px; min-height: 26px; padding: 0 10px;
  border-radius: var(--r-xs); cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* a handle we can show, versus a raw id we can only ping */
.dc-badge.handle {
  color: #c9d2ff; background: rgba(88,101,242,0.12);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,0.38);
}
.dc-badge.id {
  color: #a7b2e8; background: rgba(88,101,242,0.07);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.dc-badge.handle:hover, .dc-badge.id:hover {
  color: #fff; background: rgba(88,101,242,0.22);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,0.55);
}
.dc-badge.copied {
  color: var(--win); background: rgba(34,197,94,0.12);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.45);
}
/* nobody linked: hold the column open so rows stay aligned */
.dc-badge.empty { cursor: default; min-width: 1px; }

/* the same chip, smaller, inside the Tournament Maker player list */
.player-item .dc-badge { max-width: 120px; min-height: 22px; padding: 0 8px; font-size: 11px; }
.player-item .dc-badge.empty { display: none; }

/* On a phone the roster row stops being a grid: flex-wrap lets the tier and
   Discord chips flow onto a second line and the buttons onto a third,
   without having to place each child explicitly. */
@media (max-width: 768px) {
  .part-head-actions { width: 100%; }
  .part-head-actions .input { width: 100%; }
  .part-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  }
  .part-row > .part-main { flex: 1 1 120px; }
  .part-row > .part-dc { flex: 0 1 auto; min-width: 0; }
  .part-row > .part-dc .dc-badge { max-width: 100%; }
  .part-row > .part-actions { flex: 1 1 100%; justify-content: flex-end; }
}
/* keep Add level with the first field row now that Discord sits below it */
#addPlayerBtn { min-height: 44px; align-self: flex-start; }

/* ---------- Minecraft head with a Discord avatar over its corner ---------- */
.av-stack { position: relative; flex: 0 0 auto; }
.av-stack .player-head { display: block; width: 100%; height: 100%; }
.av-dc {
  position: absolute; top: -5px; right: -5px;
  width: 48%; height: 48%; min-width: 15px; min-height: 15px;
  border-radius: 50%; object-fit: cover;
  /* the ring matches the row surface so the circle reads as a cutout */
  border: 2px solid #0c0a0b;
  background: #0c0a0b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.av-stack.dc-unknown .av-dc { opacity: .45; filter: saturate(.35); }

/* ---------- chip states while an id is being resolved ---------- */
.dc-badge.resolving { opacity: .62; }
.dc-badge.unknown {
  color: var(--muted-2); background: var(--surface-nav);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
}
.dc-badge.unknown:hover { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-hover); }

/* ---------- server add/edit form ---------- */
.server-modal .field { margin-bottom: 16px; }
.server-modal .hint { margin-top: 5px; }
.srv-mode-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
}
.srv-mode-opt {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 9px; border-radius: var(--r-sm);
  background: var(--surface-nav); border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.srv-mode-opt:hover { border-color: var(--border-hover); background: var(--surface-2); }
.srv-mode-opt img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.srv-mode-opt input { accent-color: var(--red); }
.srv-feat-opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px;
}
.srv-feat-opt input { accent-color: var(--red); }

/* ============================================================
   ROLES, AUTH AND STAFF
   ============================================================ */

/* Every role carries two gradient stops as --rf and --rt, set inline from
   staff.js. The gradient always runs left to right, so recolouring a role
   is two hex values and nothing else. */
.role-name, .role-badge {
  background-image: linear-gradient(90deg, var(--rf, #9e9494), var(--rt, #6f6666));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.role-gem {
  width: 11px; height: 11px; flex: 0 0 auto;
  border-radius: 3px; transform: rotate(45deg);
  background-image: linear-gradient(90deg, var(--rf, #6f6666), var(--rt, #3a3436));
  box-shadow: 0 0 8px rgba(0,0,0,0.55);
}
.role-badge {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
}
.role-badge.none { color: var(--muted-2); background-image: none; }

/* the nav chip: role, then who you are signed in as */
.role-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-nav);
  border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.role-name {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.role-user {
  font-size: 12px; font-weight: 600; color: var(--muted);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.role-user::before { content: ""; }
@media (max-width: 1024px) { .role-user { display: none; } }

/* ---------- log in / sign up ---------- */
.auth-modal { min-width: 0; }
.auth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.auth-form .btn { margin-top: 4px; justify-content: center; }
.auth-modal .modal-actions { justify-content: space-between; }

/* ---------- the staff table ---------- */
.staff-list { display: flex; flex-direction: column; gap: 8px; }
.staff-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 12px minmax(0, 1fr) 118px 150px auto;
}
.staff-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.staff-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-sub {
  font-size: 12px; color: var(--muted-2); letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-role { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.staff-role:disabled { opacity: .5; cursor: not-allowed; }
.staff-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.staff-actions .btn:disabled { opacity: .4; cursor: not-allowed; }
.staff-note { line-height: 1.6; margin-top: var(--sp-4); }
.staff-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--red-lite);
  background: var(--red-soft); border-radius: var(--r-xs); padding: 1px 5px;
}
.staff-note b { color: var(--text-2); }

@media (max-width: 1024px) {
  .staff-row { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 10px; }
  .staff-row > .role-badge  { grid-column: 3; justify-self: end; }
  .staff-row > .staff-role  { grid-column: 2 / -1; }
  .staff-row > .staff-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- role colour editor ---------- */
.role-editor { display: flex; flex-direction: column; gap: 8px; }
.role-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 12px 168px 92px minmax(60px, 1fr) auto;
}
.role-level { font-size: 12px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.role-bar {
  height: 12px; border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--rf, #6f6666), var(--rt, #3a3436));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.45);
}
.role-stops { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.role-stop { display: inline-flex; line-height: 0; }
.role-stop input[type="color"] {
  width: 40px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-nav);
  transition: border-color var(--t-fast) var(--ease);
}
.role-stop input[type="color"]:hover { border-color: var(--border-hover); }
.role-stop input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.role-stop input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.role-stops .btn:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 1024px) {
  .role-row { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 10px; }
  .role-row > .role-level { grid-column: 3; justify-self: end; }
  .role-row > .role-bar   { grid-column: 1 / -1; }
  .role-row > .role-stops { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- nav dropdown groups ---------- */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret {
  width: 0; height: 0; opacity: .75;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--t-fast) var(--ease);
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 30;
  min-width: 196px; padding: 6px;
  background: var(--surface-nav);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--ring-faint), 0 14px 32px rgba(0,0,0,0.55);
  display: none; flex-direction: column; gap: 2px;
}
.nav-group.open .nav-menu { display: flex; animation: navMenuIn .16s var(--ease) both; }
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.nav-menu-item {
  text-align: left; cursor: pointer; white-space: nowrap;
  font: inherit; font-family: var(--font-display); font-weight: 500; font-size: 14px;
  color: var(--text-2); background: none; border: 0;
  padding: 9px 12px; border-radius: var(--r-xs);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-menu-item:hover { background: var(--surface-2); color: #fff; }
.nav-menu-item.active { color: var(--red); background: var(--red-soft); font-weight: 600; }
.nav-menu-item:focus-visible { outline: 2px solid var(--red-lite); outline-offset: -2px; }

/* Narrow: the tab row scrolls sideways, which would clip a popup menu.
   So the group stops being a dropdown and its items simply join the row. */
@media (max-width: 1024px) {
  .nav-group { display: contents; }
  .nav-group-btn { display: none; }
  .nav-menu {
    position: static; display: flex; flex-direction: row;
    min-width: 0; padding: 0; gap: 2px;
    background: none; border: 0; box-shadow: none; animation: none;
  }
  .nav-menu-item {
    height: 32px; padding: 0 11px; display: inline-flex; align-items: center;
    font-weight: 400; font-size: 14px; border-radius: var(--r-sm);
  }
  .nav-menu-item.active { background: none; }
}

/* ============================================================
   SUB-ROLES
   ============================================================ */
.sub-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sub-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: .02em; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-pill);
  background-color: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  background-image: linear-gradient(90deg, var(--rf, #9e9494), var(--rt, #6f6666));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub-badge-lg { font-size: 13px; padding: 4px 11px; }
.sub-none { font-size: 11px; color: var(--muted-2); font-style: italic; }

.sub-modal .sub-group { margin-top: var(--sp-4); }
.sub-group-head { margin-bottom: 8px; }
.sub-group-name {
  display: block; font-family: var(--font-display);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2);
}
.sub-group-blurb { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.sub-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius-sm);
  background: var(--surface-row); border: 1px solid var(--border-strong);
  transition: border-color var(--t-fast) var(--ease);
}
.sub-opt:hover { border-color: var(--border-hover); }
.sub-opt input { accent-color: var(--red); margin-top: 3px; flex: 0 0 auto; }
.sub-opt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sub-opt-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ============================================================
   EVENTS
   ============================================================ */
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1fr) 96px auto;
}
.event-kind {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 0 9px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.event-kind.event { color: #7fd1ff; background: rgba(127,209,255,0.10); box-shadow: inset 0 0 0 1px rgba(127,209,255,0.32); }
.event-kind.tournament { color: var(--red-lite); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-ring); }

.event-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.event-name {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-when { font-size: 12px; font-weight: 600; color: var(--text-2); }
.event-desc {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.event-where { display: flex; flex-wrap: wrap; gap: 6px; }
.event-people { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.event-label {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-2); margin-bottom: 3px;
}
.event-staff-list { display: flex; flex-wrap: wrap; gap: 4px; }
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.person-chip.unknown { color: var(--muted-2); font-style: italic; }
.event-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 0 10px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.event-status.upcoming { color: var(--info); background: rgba(114,169,255,0.10); box-shadow: inset 0 0 0 1px rgba(114,169,255,0.3); }
.event-status.live { color: #6ee7a0; background: rgba(0,194,103,0.13); box-shadow: inset 0 0 0 1px rgba(0,194,103,0.42); }
.event-status.done { color: var(--muted-2); background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border); }
.event-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.event-modal textarea.input { resize: vertical; min-height: 68px; }
.event-staff-pick { display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; }
.event-staff-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-nav); border: 1px solid var(--border-strong);
}
.event-staff-opt:hover { border-color: var(--border-hover); }
.event-staff-opt input { accent-color: var(--red); }
.event-staff-body { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; }
.event-staff-subs { font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
  .event-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .event-row > .event-main { flex: 1 1 200px; order: 1; }
  .event-row > .event-kind { order: 0; }
  .event-row > .event-status { order: 2; margin-left: auto; }
  .event-row > .event-where { flex: 1 1 100%; order: 3; }
  .event-row > .event-people { flex: 1 1 100%; order: 4; }
  .event-row > .event-actions { flex: 1 1 100%; order: 5; justify-content: flex-start; }
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-card {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: 84px minmax(0, 1fr) auto;
  padding: var(--sp-5); border-radius: var(--radius);
  background: var(--surface-row); border: 1px solid var(--border-strong);
  box-shadow: var(--sh-row);
}
.profile-card .player-head { width: 84px; height: 84px; border-radius: var(--radius-sm); }
.profile-id { min-width: 0; }
.profile-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.profile-handle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.profile-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.profile-actions { display: flex; flex-direction: column; gap: 6px; }

.profile-section { margin-top: var(--sp-6); }
.profile-section .section-h2 { margin-bottom: var(--sp-3); }
.profile-subs { display: flex; flex-direction: column; gap: 8px; }
.profile-sub { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; }
.profile-sub-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

.profile-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.profile-cap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-row); border: 1px solid var(--border-strong);
  font-size: 13px; color: var(--muted-2);
}
.profile-cap.on { color: var(--text-2); }
.profile-cap-mark {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 6px; border-radius: var(--r-xs);
  color: var(--muted-2); background: var(--surface-nav); box-shadow: inset 0 0 0 1px var(--border);
}
.profile-cap.on .profile-cap-mark { color: #6ee7a0; background: rgba(0,194,103,0.12); box-shadow: inset 0 0 0 1px rgba(0,194,103,0.4); }

.profile-events { display: flex; flex-direction: column; gap: 8px; }
.profile-event {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 14px; align-items: center;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.profile-event-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-event-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red-lite); }
.profile-event-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.profile-empty { text-align: center; padding: var(--sp-5) 0; }

@media (max-width: 768px) {
  .profile-card { grid-template-columns: 64px minmax(0, 1fr); }
  .profile-card .player-head { width: 64px; height: 64px; }
  .profile-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .profile-sub { grid-template-columns: 1fr; gap: 6px; }
  .profile-event { grid-template-columns: 1fr; gap: 4px; }
}
.role-editor-head {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2);
  margin: var(--sp-4) 0 2px;
}

/* ============================================================
   MANAGEMENT  — Perspective replays and AntiCheat flags
   ============================================================ */
.mgmt-list { display: flex; flex-direction: column; gap: 8px; }

/* one pill per event kind, used in the counts, the filters and the timeline */
.kind-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 0 9px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--muted-2); background: var(--surface-nav);
  box-shadow: inset 0 0 0 1px var(--border);
}
.kind-pill.chat    { color: #cfd6e6; box-shadow: inset 0 0 0 1px rgba(207,214,230,0.28); background: rgba(207,214,230,0.07); }
.kind-pill.command { color: #7fd1ff; box-shadow: inset 0 0 0 1px rgba(127,209,255,0.32); background: rgba(127,209,255,0.09); }
.kind-pill.flag    { color: var(--red-lite); box-shadow: inset 0 0 0 1px var(--red-ring); background: var(--red-soft); }
.kind-pill.death   { color: #ff9d7a; box-shadow: inset 0 0 0 1px rgba(255,157,122,0.32); background: rgba(255,157,122,0.09); }
.kind-pill.join    { color: #6ee7a0; box-shadow: inset 0 0 0 1px rgba(0,194,103,0.38); background: rgba(0,194,103,0.10); }
.kind-pill.leave   { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); background: var(--surface-nav); }
/* filter buttons are the same pill, dimmed until switched on */
.rec-filters .kind-pill { cursor: pointer; opacity: .38; transition: opacity var(--t-fast) var(--ease); }
.rec-filters .kind-pill.on { opacity: 1; }

/* ---------- recordings ---------- */
.rec-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 54px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) 104px auto;
}
.rec-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; color: var(--muted); text-align: center;
}
.rec-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-players { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rec-players .pill { min-height: 22px; font-size: 11px; padding: 0 8px; }
.rec-counts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* ---------- the timeline ---------- */
.rec-modal { min-width: 0; }
.rec-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--sp-4) 0 var(--sp-3); }
.rec-timeline {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
}
.rec-timeline::-webkit-scrollbar { width: 8px; }
.rec-timeline::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.tl-row {
  display: grid; grid-template-columns: 52px 78px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-xs);
}
.tl-row:nth-child(odd) { background: rgba(255,255,255,0.018); }
.tl-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted-2); text-align: right;
}
.tl-body { font-size: 13px; color: var(--text-2); line-height: 1.45; word-break: break-word; }
.tl-body b { color: var(--text); font-weight: 700; }

/* ---------- anticheat flags ---------- */
.flag-head, .flag-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 124px minmax(0, 1fr) 104px 104px 62px 116px minmax(0, 1.4fr);
}
.flag-head { padding: 0 14px 4px; }
.flag-head > span {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2);
}
.flag-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.flag-player {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flag-check {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 0 9px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--red-lite); background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red-ring);
}
.flag-vl {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.flag-net { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.flag-debug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.part-head-actions .select { min-height: 32px; padding: 6px 12px; font-size: 14px; }

@media (max-width: 1200px) {
  .rec-row, .flag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .rec-row > .rec-main { flex: 1 1 200px; }
  .rec-row > .rec-players, .rec-row > .rec-counts { flex: 1 1 100%; }
  .flag-head { display: none; }
  .flag-row > .flag-player { flex: 1 1 120px; }
  .flag-row > .flag-debug { flex: 1 1 100%; white-space: normal; }
}
@media (max-width: 768px) {
  .tl-row { grid-template-columns: 44px 70px minmax(0, 1fr); gap: 8px; }
}
.rec-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   STAFF DASHBOARD - cases, recent replays, permissions
   ============================================================ */

.case-list { display: flex; flex-direction: column; gap: 8px; }

.case-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 62px minmax(0, 1fr) 150px auto;
}
.case-row.claimed  { box-shadow: inset 0 0 0 1px rgba(255,200,0,0.14), 0 8px 18px rgba(0,0,0,0.45); }
.case-row.resolved { opacity: .62; }
.case-row.resolved:hover { opacity: 1; }

/* the count is the headline: fifty flags is one decision, and the number
   is what tells you how urgent that decision is */
.case-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 6px 0; border-radius: var(--r-sm);
  background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-ring);
}
.case-n {
  font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1;
  color: var(--red-lite); letter-spacing: -0.03em;
}
.case-n-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--muted-2);
}

.case-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.case-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.case-player {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-meta { font-size: 12px; color: var(--muted); letter-spacing: -0.01em; }
.case-debug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.case-state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.case-status {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.case-status.open     { color: var(--red-lite); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-ring); }
.case-status.claimed  { color: var(--gold);     background: rgba(255,200,0,0.10);  box-shadow: inset 0 0 0 1px rgba(255,200,0,0.28); }
.case-status.resolved { color: var(--win);      background: rgba(34,197,94,0.10);  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.28); }
.case-who {
  font-size: 11px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

.case-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.case-actions .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- recent replays ---- */
.dash-replays { display: flex; flex-direction: column; gap: 8px; }
.dash-replay {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}

/* ---- who can do what ---- */
.perm-matrix { display: flex; flex-direction: column; gap: 6px; }
.perm-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px) 46px;
  padding: 9px 14px;
}
.perm-row.mine { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.16), 0 8px 18px rgba(0,0,0,0.45); }
.perm-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.perm-name {
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perm-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perm-holders { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.perm-andup { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.perm-mark {
  justify-self: end; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em; color: transparent;
}
.perm-mark.on { color: var(--win); }

/* ---- staff row extras ---- */
.staff-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.staff-tags .sub-badges { margin-top: 0; }
.dc-preview { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-3); min-height: 24px; }

@media (max-width: 1200px) {
  .case-row, .perm-row, .dash-replay {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  }
  .case-row > .case-count { flex: 0 0 62px; }
  .case-row > .case-main { flex: 1 1 200px; }
  .case-row > .case-actions { flex: 1 1 100%; justify-content: flex-start; }
  .perm-row > .perm-main { flex: 1 1 220px; }
  .perm-row > .perm-holders { flex: 1 1 auto; }
  .dash-replay > .rec-main { flex: 1 1 200px; }
}

/* ---- dashboard tiles ---- */
.dash-tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dash-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-row); border: 1px solid var(--border-strong);
  box-shadow: var(--sh-row);
  font: inherit; color: inherit; text-align: left;
  transition: var(--t-fast) var(--ease);
}
button.dash-tile { cursor: pointer; }
button.dash-tile:hover {
  border-color: var(--border-hover); box-shadow: var(--sh-lift); transform: translateY(-1px);
}
.dash-tile-n {
  font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.05;
  letter-spacing: -0.04em; color: var(--text);
}
.dash-tile-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--muted);
}
.dash-tile-sub { font-size: 11px; color: var(--muted-2); letter-spacing: -0.01em; }
.dash-tile.hot  .dash-tile-n { color: var(--red-lite); }
.dash-tile.hot  { box-shadow: inset 0 0 0 1px var(--red-ring), 0 8px 18px rgba(0,0,0,0.45); }
.dash-tile.warn .dash-tile-n { color: var(--gold); }
.dash-tile.warn { box-shadow: inset 0 0 0 1px rgba(255,200,0,0.28), 0 8px 18px rgba(0,0,0,0.45); }

/* ---- the account list, grouped by rank ---- */
.staff-group {
  display: flex; align-items: center; gap: 8px;
  margin: var(--sp-4) 0 2px; padding: 0 2px;
}
.staff-group:first-child { margin-top: 0; }
.staff-group-n {
  font-size: 11px; font-weight: 700; color: var(--muted-2);
  letter-spacing: .08em;
}

@media (max-width: 1024px) {
  .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tile-n { font-size: 24px; }
}

/* ---- sub-tabs inside a view ----
   The Staff page holds four unrelated jobs. Stacked, the one you wanted was
   the one you scrolled past three others to reach. */
.sub-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm);
  background: var(--surface-nav);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sub-tab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 15px; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  transition: var(--t-fast) var(--ease);
}
.sub-tab:hover { color: var(--text-2); background: var(--surface-2); }
.sub-tab.on {
  color: var(--text); background: var(--surface-row);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 6px 14px rgba(0,0,0,0.45);
}
.sub-tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  color: var(--red-lite); background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red-ring);
}
.sub-panel.sub-off { display: none; }

/* ---- the matrix, in edit mode ---- */
.perm-row.editing { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) 46px; }
.perm-row.editing > .perm-holders { flex-wrap: nowrap; }
.perm-level { min-height: 30px; padding: 4px 9px; font-size: 13px; flex: 0 0 160px; }
.perm-subs { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.perm-sub-toggle {
  border: 0; cursor: pointer; opacity: .28;
  font-size: 10px; padding: 1px 7px;
  filter: grayscale(1);
  transition: var(--t-fast) var(--ease);
}
.perm-sub-toggle:hover { opacity: .65; filter: grayscale(.4); }
.perm-sub-toggle.on { opacity: 1; filter: none; }
.perm-moved {
  margin-left: 7px; padding: 0 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); background: rgba(255,200,0,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,200,0,0.28);
}

@media (max-width: 1200px) {
  .perm-row.editing > .perm-holders { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .sub-tab { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 13px; }
}