:root {
  color-scheme: dark;
  --orange: #ffc067;
  --orange-strong: #ffb64c;
  --orange-soft: #6c5334;
  --bg: #121212;
  --panel: #1e1e1e;
  --panel-2: #272727;
  --panel-3: #313131;
  --line: #3a3a3a;
  --text: #f7f7f5;
  --muted: #aaa9a5;
  --green: #79d6a3;
  --green-dark: #254d38;
  --red: #ef8d8d;
  --red-dark: #522e2e;
  --blue: #85b8e8;
  --drawer: 268px;
  --radius: 16px;
  --shadow: 0 16px 45px rgb(0 0 0 / 24%);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(120deg, #000, transparent 55%);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.boot-screen, .auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.boot-screen { align-content: center; gap: 16px; color: var(--muted); }
.boot-screen p { margin: 0; }

.brand-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #171717;
  box-shadow: var(--shadow);
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  top: 7px;
}
.brand-mark::before { left: 8px; }
.brand-mark::after { right: 8px; }
.brand-mark span { font-size: 9px; letter-spacing: .13em; color: var(--muted); transform: translateY(-8px); }
.brand-mark b { position: absolute; bottom: 8px; font-size: 17px; letter-spacing: -.04em; }

.auth-shell {
  grid-template-columns: minmax(280px, 490px) minmax(300px, 620px);
  gap: clamp(24px, 6vw, 88px);
  max-width: 1280px;
  margin: 0 auto;
}
.auth-card {
  position: relative;
  background: rgb(30 30 30 / 94%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 30px 90px rgb(0 0 0 / 42%);
}
.auth-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 42px; }
.auth-logo-copy strong { display: block; font-size: 17px; }
.auth-logo-copy small { color: var(--muted); }
.eyebrow {
  margin: 0 0 10px;
  color: var(--orange);
  font: 700 11px/1.2 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
.auth-card h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; }
.auth-card > p { color: var(--muted); line-height: 1.6; margin: 0 0 28px; }
.auth-art {
  min-height: 580px;
  position: relative;
  border: 1px solid #2f2f2f;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(140deg, transparent 10%, rgb(255 192 103 / 12%) 50%, transparent 75%),
    repeating-linear-gradient(90deg, #181818 0 39px, #202020 40px 41px);
  box-shadow: var(--shadow);
}
.auth-art::before {
  content: "BACKGROUND ARTWORK";
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  border: 1px dashed #444;
  color: #777;
  font: 700 12px "Courier New", monospace;
  letter-spacing: .18em;
}
.auth-art::after {
  content: "";
  position: absolute;
  left: -18%; right: -18%; top: 48%; height: 7px;
  background: var(--orange);
  box-shadow: 0 -128px 0 #3d3d3d, 0 128px 0 #3d3d3d;
  transform: rotate(-8deg);
}

.form-stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span, .field > label { color: #d6d5d1; font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea, .input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #161616;
  color: var(--text);
  padding: 12px 14px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #777; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 192 103 / 13%);
  background: #191919;
}
.field small, .form-help { color: var(--muted); line-height: 1.5; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: #d7d7d4; font-size: 14px; line-height: 1.45; }
.check-row input { accent-color: var(--orange); width: 18px; height: 18px; margin-top: 1px; }
.error-box, .notice-box, .success-box {
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}
.error-box { background: var(--red-dark); border-color: #844848; color: #ffd8d8; }
.notice-box { background: #342c21; border-color: #675237; color: #ffe1b7; }
.success-box { background: var(--green-dark); border-color: #3d7656; color: #caffdf; }
.config-list { display: grid; gap: 8px; margin: 14px 0 0; }
.config-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #181818; }
.config-item b.ok { color: var(--green); }
.config-item b.bad { color: var(--red); }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 16px;
  background: var(--panel-3);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select: none;
}
.btn:hover { background: #3a3a3a; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 3px solid rgb(255 192 103 / 35%); outline-offset: 2px; }
.btn-primary { background: var(--orange); color: #17120c; }
.btn-primary:hover { background: var(--orange-strong); }
.btn-danger { background: var(--red-dark); border-color: #6e3d3d; color: #ffd4d4; }
.btn-danger:hover { background: #683636; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-small { min-height: 34px; padding: 7px 11px; border-radius: 9px; font-size: 13px; }
.btn-icon { width: 42px; padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.app-shell { min-height: 100vh; }
.drawer {
  width: var(--drawer);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #171717;
  border-right: 1px solid var(--line);
  box-shadow: 10px 0 40px rgb(0 0 0 / 18%);
}
.drawer-head { height: 78px; display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.drawer-head .brand-mark { width: 46px; height: 46px; flex: 0 0 auto; box-shadow: none; }
.drawer-title strong { display: block; font-size: 15px; }
.drawer-title small { color: var(--muted); }
.drawer-live { display: none; }
.nav-list { display: grid; gap: 5px; padding: 18px 12px; overflow: auto; }
.nav-item {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 9px 12px;
  color: #c8c8c5;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.nav-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-item:hover { color: white; background: #242424; }
.nav-item:active { transform: translateX(2px); }
.nav-item.active { background: var(--orange); color: #17120c; }
.nav-item.disabled { opacity: .38; pointer-events: none; }
.nav-spacer { flex: 1; }
.drawer-foot { border-top: 1px solid var(--line); padding: 14px 12px 18px; }

.main-wrap { margin-left: var(--drawer); min-height: 100vh; }
.topbar {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(18px, 3vw, 38px);
  border-bottom: 1px solid rgb(58 58 58 / 85%);
  background: rgb(18 18 18 / 88%);
  backdrop-filter: blur(16px);
}
.menu-button { display: none; }
.topbar-title { min-width: 160px; }
.topbar-title h1 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.topbar-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.live-strip {
  margin-left: auto;
  min-width: 430px;
  max-width: 720px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
}
.live-overview-link { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 5px 7px; border-radius: 8px; color: inherit; text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.live-overview-link:hover, .live-overview-link:focus-visible { background: #2d2923; box-shadow: 0 0 0 2px rgb(255 192 103 / 20%); outline: 0; }
.live-state { color: var(--orange); font: 700 10px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.live-match { min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.live-score { font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.live-time { min-width: 74px; font: 700 18px "Courier New", monospace; text-align: right; }
.live-time.warning, .live-time.overtime { color: var(--orange); }
.live-time.critical { color: var(--red); }
.live-progress { color: var(--muted); font-size: 11px; }

.page { padding: clamp(22px, 4vw, 46px); max-width: 1700px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-head h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
.page-head p { max-width: 720px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: clamp(18px, 3vw, 28px); }
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { color: var(--muted); line-height: 1.55; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.metric { padding: 20px; }
.metric small { color: var(--muted); }
.metric strong { display: block; margin-top: 8px; font-size: 28px; letter-spacing: -.04em; }

.home-hero {
  min-height: 260px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  overflow: hidden;
}
.home-copy { padding: clamp(26px, 5vw, 56px); }
.home-copy h2 { margin: 0 0 20px; max-width: 680px; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.055em; }
.home-copy p { margin: 0; max-width: 750px; color: #c6c5c1; line-height: 1.7; }
.home-art { position: relative; min-height: 260px; background: #181818; border-left: 1px solid var(--line); overflow: hidden; }
.home-art::before { content: ""; position: absolute; width: 360px; height: 360px; border: 44px solid var(--orange); border-radius: 50%; left: 25%; top: 18%; opacity: .82; }
.home-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 31px, rgb(255 255 255 / 8%) 32px 33px); transform: rotate(12deg) scale(1.3); }
.tutorial-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tutorial-card { padding: 20px; }
.tutorial-card span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #17120c; font-size: 12px; font-weight: 900; margin-bottom: 24px; }
.tutorial-card h3 { margin-bottom: 7px; }
.tutorial-card p { margin: 0; font-size: 14px; }
.home-metrics { margin-bottom: 18px; }
.home-hero + .home-metrics { margin-top: 18px; }
.tournament-operations { margin-bottom: 18px; }
.tournament-operations > .section-title-row { margin-bottom: 14px; }
.tournament-operations h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; }
.tournament-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tournament-overview-match { min-width: 0; padding: clamp(18px, 2.5vw, 26px); }
.tournament-overview-match.upcoming { border-color: #5f4c33; background: #24211c; }
.tournament-overview-match.empty { display: grid; align-content: center; min-height: 180px; }
.tournament-overview-match.empty h3 { margin: 0; }
.tournament-overview-match.empty p:last-child { margin-bottom: 0; }
.overview-match-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.overview-match-head h3 { margin: 0; font-size: clamp(16px, 2vw, 22px); }
.overview-timer { display: inline-flex; align-items: center; gap: .12em; color: var(--orange); font-size: clamp(22px, 2.5vw, 32px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overview-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 22px; text-align: center; }
.overview-matchup > div { min-width: 0; display: grid; gap: 6px; }
.overview-matchup strong { overflow: hidden; font-size: clamp(20px, 2.6vw, 32px); text-overflow: ellipsis; white-space: nowrap; }
.overview-matchup small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.overview-score { display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-size: clamp(23px, 3vw, 38px); font-weight: 900; font-variant-numeric: tabular-nums; }
.overview-score span { color: #777; }
.referee-handoff { margin-bottom: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid #655137; border-radius: var(--radius); background: #211e19; box-shadow: var(--shadow); }
.referee-handoff > .section-title-row { margin-bottom: 13px; }
.referee-handoff h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); }
.referee-handoff .tournament-overview-match { box-shadow: none; }
.handoff-note { margin: 12px 2px 0; color: var(--muted); font-size: 13px; }
.referee-connection-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; }
.referee-connection-bar p { margin: 0; text-align: right; }

.setup-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 18px; }
.rules-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.55; }
.rule-line { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.rule-line:first-of-type { margin-top: 14px; }
.rule-line b { margin-left: auto; color: var(--text); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 5px 9px; border-radius: 999px; background: #303030; color: #d4d4d1; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status-pill.active::before { background: var(--orange); }
.status-pill.completed::before { background: var(--green); }

.team-toolbar { position: sticky; top: 92px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; margin-bottom: 18px; background: rgb(30 30 30 / 92%); backdrop-filter: blur(14px); }
.team-auto-shuffle { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #242424; color: #dededb; font-size: 12px; font-weight: 800; cursor: pointer; }
.team-auto-shuffle:hover { border-color: #5b4a35; background: #2d2923; }
.team-auto-shuffle input { width: 16px; height: 16px; accent-color: var(--orange); }
.save-state { color: var(--muted); font-size: 13px; }
.save-state.saving { color: var(--orange); }
.save-state.saved { color: var(--green); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.team-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 12px 28px rgb(0 0 0 / 18%); }
.team-card h3 { margin: 0; padding: 14px 15px 12px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: .08em; }
.team-card label { display: block; border-bottom: 1px solid var(--line); }
.team-card label:last-child { border-bottom: 0; }
.team-card label span { display: block; padding: 9px 13px 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.team-card input { width: 100%; border: 0; outline: 0; padding: 7px 13px 13px; background: transparent; color: var(--text); font-size: 16px; }
.team-card input::placeholder { color: #6f6f6f; font-style: italic; }
.team-card.invalid { border-color: #885050; }
.team-card.duplicate { box-shadow: 0 0 0 2px rgb(239 141 141 / 38%); }
.validation-list { margin: 0; padding-left: 18px; }
.validation-list li + li { margin-top: 5px; }

.bracket-shell { position: relative; min-height: 620px; overflow: hidden; cursor: grab; touch-action: none; background: #151515; }
.bracket-shell.dragging { cursor: grabbing; }
.bracket-stage { position: absolute; transform-origin: 0 0; will-change: transform; }
.bracket-world { position: relative; padding-top: 58px; }
.bracket-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.bracket-lines path { fill: none; stroke: #4a4a4a; stroke-width: 2; }
.bracket-round { position: absolute; top: 0; width: 280px; }
.bracket-round-title { position: absolute; top: 8px; width: 100%; color: var(--muted); font: 700 11px "Courier New", monospace; letter-spacing: .11em; text-transform: uppercase; text-align: center; }
.bracket-group-label { position: absolute; left: 0; width: 112px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; color: var(--orange); font: 900 13px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.bracket-group-label i { height: calc(100% - 18px); border-right: 2px solid rgb(255 192 103 / 48%); }
.bracket-match { position: absolute; width: 280px; min-height: 72px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); box-shadow: 0 8px 22px rgb(0 0 0 / 23%); overflow: hidden; }
.bracket-match.live { border-color: var(--orange); box-shadow: 0 0 0 2px rgb(255 192 103 / 16%), 0 0 24px rgb(255 192 103 / 18%); animation: live-glow 2.8s ease-in-out infinite; }
@keyframes live-glow { 50% { box-shadow: 0 0 0 2px rgb(255 192 103 / 25%), 0 0 34px rgb(255 192 103 / 25%); } }
.match-label { position: absolute; right: 7px; top: 6px; z-index: 2; padding: 3px 6px; border-radius: 6px; background: var(--orange); color: #17120c; font: 900 9px "Courier New", monospace; letter-spacing: .08em; }
.bracket-team { min-height: 36px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid #3d3d3d; font-size: 13px; }
.bracket-team:last-child { border-bottom: 0; }
.bracket-team.winner { background: var(--green-dark); color: #d9ffe8; font-weight: 900; }
.bracket-team.champion { background: var(--orange); color: #17120c; }
.bracket-team.loser { opacity: .43; }
.bracket-team.current { background: #624a2d; }
.bracket-score { min-width: 22px; text-align: right; font-weight: 900; }
.match-edit { position: absolute; right: 5px; bottom: 4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #343434; color: white; cursor: pointer; }
.match-edit:hover { background: var(--orange); color: #151515; }

.queue-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr); gap: 18px; margin-bottom: 18px; }
.up-next { position: relative; overflow: hidden; }
.up-next::after { content: ""; position: absolute; width: 180px; height: 180px; border: 34px solid rgb(255 192 103 / 12%); border-radius: 50%; right: -40px; top: -55px; }
.matchup-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 20px 0; }
.matchup-line strong { font-size: clamp(18px, 2.2vw, 28px); }
.matchup-line strong:last-child { text-align: right; }
.versus { color: var(--orange); font: 900 12px "Courier New", monospace; }
.player-line { color: var(--muted); font-size: 13px; }
.player-line.right { text-align: right; }

.scoreboard { position: relative; overflow: hidden; }
.scoreboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .38fr) minmax(0, 1fr); min-height: 460px; }
.score-team { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 48px); text-align: center; }
.score-team h3 { margin: 0; font-size: clamp(24px, 4vw, 52px); letter-spacing: -.045em; }
.score-team p { min-height: 22px; margin: 10px 0 26px; color: var(--muted); }
.score-value { font-size: clamp(86px, 12vw, 174px); line-height: .9; font-weight: 900; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.score-controls { display: grid; grid-template-columns: 1fr 1.8fr; gap: 10px; width: min(100%, 310px); margin-top: 30px; }
.score-controls .minus { min-height: 66px; font-size: 25px; }
.score-controls .plus { min-height: 66px; background: var(--orange); color: #17120c; font-size: 29px; }
.score-controls .plus:hover { background: var(--orange-strong); }
.score-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #191919; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 22px 12px; }
.timer-large { font: 800 clamp(31px, 4.3vw, 57px) "Courier New", monospace; letter-spacing: -.07em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timer-large.warning { color: var(--orange); }
.timer-large.critical { color: var(--red); }
.timer-large.overtime { color: var(--orange); }
.timer-controls { display: grid; gap: 9px; width: 100%; max-width: 150px; }
.swap-button { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; }
.swap-button:active { transform: translateX(-50%) translateY(1px) scale(.985); }
.bo3 { display: flex; justify-content: center; gap: 8px; }
.bo3 span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #646464; background: transparent; }
.bo3 span.win { border-color: var(--green); background: var(--green); }
.bo3 span.loss { border-color: #4d4d4d; background: #333; }
.live-bottom { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.mode-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 14px 16px; border-color: #5d4b32; background: #2b251d; }
.mode-banner strong { color: var(--orange); }
.standalone-names { margin-bottom: 18px; }
.name-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.overlay-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.overlay-settings { position: sticky; top: 96px; }
.colour-row { display: grid; grid-template-columns: 54px 1fr; gap: 10px; }
.colour-row input[type="color"] { width: 54px; height: 48px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #161616; }
.url-list { display: grid; gap: 9px; }
.url-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.url-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 11px; border-radius: 9px; background: #151515; border: 1px solid var(--line); color: #c7c7c3; font: 12px "Courier New", monospace; }
.preview-list { display: grid; gap: 18px; }
.preview-card { overflow: hidden; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.preview-head h3 { margin: 0; }
.preview-head small { color: var(--muted); }
.preview-frame { width: 100%; border: 0; display: block; background-image: linear-gradient(45deg, #262626 25%, transparent 25%), linear-gradient(-45deg, #262626 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #262626 75%), linear-gradient(-45deg, transparent 75%, #262626 75%); background-position: 0 0, 0 10px, 10px -10px, -10px 0; background-size: 20px 20px; }
.preview-frame.slim { aspect-ratio: 16 / 2.2; }
.preview-frame.large { aspect-ratio: 2160 / 1300; }
.preview-frame.timer { aspect-ratio: 5 / 1; }
.preview-frame.draft { aspect-ratio: 16 / 9; min-height: 360px; }
.preview-frame.upcoming { aspect-ratio: 9 / 13; max-height: 620px; }

.archive-list { display: grid; gap: 11px; }
.archive-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 17px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .15s ease, transform .12s ease, background .15s ease; }
.archive-item:hover { border-color: #5b5b5b; background: #242424; }
.archive-item:active { transform: scale(.995); }
.archive-item h3 { margin: 0 0 5px; }
.archive-item p { margin: 0; color: var(--muted); font-size: 13px; }
.archive-champion { color: var(--green); font-weight: 800; }
.game-history { display: grid; gap: 8px; margin-top: 16px; }
.game-history > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 10px 12px; border-radius: 9px; background: #171717; }
.game-history b { font-size: 18px; font-variant-numeric: tabular-nums; }
.game-history small { color: var(--muted); }

.empty-state { min-height: 300px; display: grid; place-items: center; text-align: center; padding: 40px; }
.empty-state > div { max-width: 530px; }
.empty-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #2d2d2d; color: var(--orange); font-size: 24px; }
.empty-state h3 { margin: 0 0 8px; font-size: 22px; }
.empty-state p { margin: 0 0 20px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 74%); backdrop-filter: blur(8px); }
.modal { width: min(620px, 100%); max-height: min(780px, calc(100vh - 40px)); overflow: auto; background: #202020; border: 1px solid #484848; border-radius: 20px; box-shadow: 0 28px 90px rgb(0 0 0 / 55%); }
.modal.wide { width: min(840px, 100%); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 19px 22px; background: #202020; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-close { width: 36px; height: 36px; border-radius: 9px; background: #303030; color: white; cursor: pointer; }
.modal-body { padding: 22px; }
.modal-body p { color: var(--muted); line-height: 1.6; }
.modal-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; background: #202020; border-top: 1px solid var(--line); }
.rules-list { padding-left: 24px; color: #dfdfdc; line-height: 1.55; }
.rules-list li + li { margin-top: 12px; }
.rules-list ul { margin-top: 7px; color: var(--muted); }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 140; display: grid; gap: 9px; pointer-events: none; }
.toast { width: min(380px, calc(100vw - 36px)); padding: 13px 15px; border: 1px solid #525252; border-radius: 11px; background: #292929; box-shadow: 0 14px 44px rgb(0 0 0 / 34%); animation: toast-in .2s ease-out; }
.toast.error { border-color: #874e4e; background: #492b2b; }
.toast.success { border-color: #477258; background: #294333; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.drawer-scrim { display: none; }

@media (min-width: 1550px) {
  .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-strip { min-width: 360px; }
  .live-progress { display: none; }
  .overlay-layout { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 940px) {
  .auth-shell { grid-template-columns: minmax(0, 560px); }
  .auth-art { display: none; }
  .drawer { transform: translateX(-105%); transition: transform .22s ease; }
  .drawer.open { transform: translateX(0); }
  .drawer-scrim { position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / 56%); backdrop-filter: blur(7px); }
  .drawer-scrim.open { display: block; }
  body.drawer-open { overflow: hidden; }
  .drawer-live { display: block; margin: 14px 12px 0; padding: 13px; background: #222; border: 1px solid var(--line); border-radius: 11px; }
  .drawer-live .live-match { margin: 9px 0 7px; text-align: left; }
  .drawer-live-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .main-wrap { margin-left: 0; }
  .menu-button { display: inline-flex; }
  .live-strip { display: none; }
  .topbar { padding-inline: 16px; }
  .topbar-title { min-width: 0; }
  .setup-layout, .queue-layout, .overlay-layout { grid-template-columns: 1fr; }
  .tournament-overview-grid { grid-template-columns: 1fr; }
  .overlay-settings { position: static; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scoreboard-grid { grid-template-columns: 1fr 140px 1fr; }
}

@media (max-width: 680px) {
  .page { padding: 20px 14px 34px; }
  .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .grid-2, .grid-3, .tutorial-grid, .team-grid { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; }
  .home-art { min-height: 160px; border-left: 0; border-top: 1px solid var(--line); }
  .team-toolbar { top: 87px; align-items: flex-start; flex-direction: column; }
  .scoreboard-grid { grid-template-columns: 1fr 1fr; }
  .score-center { grid-column: 1 / -1; grid-row: 1; min-height: 185px; border: 0; border-bottom: 1px solid var(--line); }
  .score-team { min-width: 0; padding: 24px 12px; }
  .score-team h3 { font-size: 24px; }
  .score-team p { font-size: 12px; }
  .score-value { font-size: 82px; }
  .score-controls { grid-template-columns: 1fr; }
  .score-controls .plus { grid-row: 1; }
  .swap-button { top: 196px; }
  .archive-item { grid-template-columns: 1fr auto; }
  .archive-champion { grid-column: 1 / -1; }
  .name-side { grid-template-columns: 1fr; }
  .url-item { grid-template-columns: minmax(0, 1fr); }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .overview-matchup { gap: 8px; }
  .overview-matchup strong { font-size: 20px; }
  .overview-matchup small { font-size: 11px; }
  .referee-connection-bar { align-items: flex-start; flex-direction: column; }
  .referee-connection-bar p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Update 2: navigation hierarchy, presence and sync state */
.nav-group { margin: 4px 0 9px; padding: 8px; border: 1px solid #303030; border-radius: 13px; background: #1b1b1b; }
.nav-group.output-active { border-color: #604c31; background: #211e19; }
.nav-group-title { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 7px 6px; color: #d8d8d5; font-size: 12px; font-weight: 800; }
.nav-group-title > span { display: inline-flex; align-items: center; gap: 8px; }
.nav-group-title small { color: #777; font: 700 8px "Courier New", monospace; letter-spacing: .08em; }
.nav-group.output-active .nav-group-title small { color: var(--orange); }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; background: #646464; box-shadow: 0 0 0 4px rgb(255 255 255 / 3%); }
.nav-group.output-active .mode-dot { background: var(--orange); box-shadow: 0 0 0 4px rgb(255 192 103 / 10%); }
.nav-sublist { display: grid; gap: 3px; }
.nav-sublist .nav-item { min-height: 37px; padding-block: 7px; font-size: 13px; }
.nav-mode-switch { width: 100%; margin-top: 7px; padding: 8px 9px; border: 1px solid #3a3a3a; border-radius: 9px; background: #272727; color: #d6d6d3; cursor: pointer; font-size: 11px; font-weight: 800; }
.nav-mode-switch:hover { border-color: #665139; background: #332a20; color: var(--orange); }
.nav-global { display: grid; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid #303030; }
.sync-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 9px; color: var(--muted); font: 700 9px "Courier New", monospace; letter-spacing: .07em; text-transform: uppercase; }
.sync-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sync-saving i { background: var(--orange); animation: sync-pulse .8s ease-in-out infinite alternate; }
.sync-error i { background: var(--red); }
@keyframes sync-pulse { to { opacity: .3; transform: scale(.75); } }
.presence-row { display: flex; align-items: center; margin-left: auto; }
.presence-avatar, .account-avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid var(--bg); border-radius: 50%; background: #353535; color: #f3f3f0; font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.presence-avatar { margin-left: -7px; background: #2f493b; color: #caffdf; }
.account-avatar { background: var(--orange); color: #17120c; }
.topbar .live-strip { margin-left: 0; }
.header-score-button { min-width: 24px; padding: 0 3px; border-radius: 6px; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; cursor: pointer; }
.header-score-button:hover:not(:disabled) { background: var(--orange); color: #17120c; transform: translateY(-1px); }
.header-score-button:disabled { cursor: default; }
.live-score { display: inline-flex; align-items: center; gap: 3px; }
.live-score i { font-style: normal; }

/* Team sheet removal and smooth reflow */
.team-card { position: relative; }
.team-remove { position: absolute; z-index: 3; top: 7px; right: 7px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #494949; border-radius: 8px; background: #292929; color: #d8d8d5; cursor: pointer; font-size: 18px; line-height: 1; }
.team-remove:hover { border-color: #8c4f4f; background: var(--red-dark); color: #ffd5d5; }
::view-transition-group(*) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2,.72,.2,1); }

/* Bracket usability */
.bracket-shell { height: max(620px, calc(100vh - 235px)); min-height: 620px; }
.bracket-match.editable { cursor: pointer; }
.match-edit-overlay { position: absolute; z-index: 5; inset: 50% auto auto 50%; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #6a6a6a; border-radius: 11px; background: #333; color: white; font-size: 19px; opacity: 0; transform: translate(-50%, -50%) scale(.88); transition: opacity .15s ease, transform .15s ease, background .15s ease; }
.bracket-match.editable .bracket-team { transition: filter .15s ease, opacity .15s ease; }
.bracket-match.editable:hover .bracket-team, .bracket-match.editable:focus-visible .bracket-team { filter: brightness(.48); opacity: .64; }
.bracket-match.editable:hover .match-edit-overlay, .bracket-match.editable:focus-visible .match-edit-overlay { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--orange); color: #17120c; }
.match-label { inset: 50% auto auto 50%; right: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; padding: 4px 9px; }
.bracket-score { padding-left: 8px; }
.bracket-match.live .bracket-team { padding-right: 11px; }

/* Score typography, stage state and Bo3/Bo5 markers */
.live-time, .timer-large, .spectator-timer { font-family: Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.live-time, .timer-large { display: inline-flex; align-items: center; justify-content: center; gap: .18em; }
.live-time { font-weight: 900; letter-spacing: -.045em; }
.timer-large { font-weight: 900; }
.live-time.overtime { min-width: 94px; font-size: 16px; }
.timer-large.overtime { font-size: clamp(25px, 3.2vw, 44px); letter-spacing: -.055em; }
.ot-label { color: var(--orange); font-size: .45em; letter-spacing: -.04em; }
.clock-value { min-width: 0; }
.match-stage-label { padding: 5px 9px; border-radius: 999px; background: #30291f; color: var(--orange); font: 800 11px "Courier New", monospace; letter-spacing: .07em; text-transform: uppercase; text-align: center; }
.series-dots-ui { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; }
.series-dots-ui span { width: 13px; height: 13px; border: 2px solid #666; border-radius: 50%; background: transparent; }
.series-dots-ui span.win { border-color: var(--green); background: var(--green); box-shadow: 0 0 12px rgb(121 214 163 / 32%); }

/* Overlay previews and archive detail */
.preview-frame.bracket-preview { aspect-ratio: 16 / 9; min-height: 420px; }
.status-pill.cancelled::before { background: var(--red); }
.archive-title-row, .section-title-row, .history-match-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.archive-title-row h3 { margin: 0; }
.history-section { margin-top: 28px; }
.history-tabs { display: flex; gap: 7px; margin: 12px 0 18px; overflow-x: auto; padding-bottom: 4px; }
.history-tab { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #202020; color: #c8c8c5; cursor: pointer; font-size: 12px; font-weight: 800; }
.history-tab:hover, .history-tab.active { border-color: #72593a; background: #382d21; color: var(--orange); }
.history-series-score { color: var(--green); }
.history-dot-pair { display: grid; gap: 7px; }
.correction-form { display: grid; gap: 14px; margin-top: 18px; }
.correction-game { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #191919; }
.correction-game > h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #242424; color: var(--orange); font: 800 12px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.correction-game .grid-2 { gap: 0; }
.correction-team { display: grid; gap: 8px; padding: 15px; }
.correction-team + .correction-team { border-left: 1px solid var(--line); }
.correction-team strong { text-align: center; }
.correction-team input { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 10px; background: #111; color: white; padding: 10px; text-align: center; font-size: 24px; font-weight: 900; }

/* Sharing and account administration */
.share-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
.share-qr-wrap { padding: 14px; border-radius: 18px; background: white; }
.share-qr { display: block; width: 100%; height: auto; }
.share-copy { min-width: 0; }
.share-copy .url-code { margin: 15px 0; white-space: normal; overflow-wrap: anywhere; }
.share-copy > .notice-box { margin-top: 12px; }
.auth-public-link { display: inline-flex; margin-top: 22px; color: var(--muted); font-size: 13px; text-decoration: none; }
.auth-public-link:hover { color: var(--orange); }
.presence-list, .member-list, .audit-list { display: grid; gap: 9px; margin-top: 16px; }
.presence-item, .member-row, .audit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #343434; border-radius: 11px; background: #191919; }
.presence-item { grid-template-columns: auto minmax(0, 1fr); }
.presence-item small, .member-row small, .audit-row small { display: block; margin-top: 3px; color: var(--muted); }
.audit-card { margin-top: 18px; }
.audit-row b { text-transform: capitalize; }
.audit-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.empty-inline { padding: 20px 0 4px; color: var(--muted); }

/* Public score and archive website */
.public-body { min-height: 100vh; background: #111; }
.public-site { min-height: 100vh; }
.public-header { min-height: 76px; position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 24px; padding: 9px clamp(18px, 4vw, 60px); border-bottom: 1px solid var(--line); background: rgb(17 17 17 / 90%); backdrop-filter: blur(18px); }
.public-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.public-brand .brand-mark { width: 46px; height: 46px; box-shadow: none; }
.public-brand b, .public-brand small { display: block; }
.public-brand small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.public-header nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #333; border-radius: 12px; background: #1b1b1b; }
.public-header nav a { padding: 9px 12px; border-radius: 8px; color: #bcbcb8; text-decoration: none; font-size: 12px; font-weight: 800; white-space: nowrap; }
.public-header nav a:hover, .public-header nav a.active { background: #303030; color: white; }
.public-header > .btn { justify-self: end; }
.public-main { width: min(1800px, 100%); margin: 0 auto; padding: clamp(24px, 4vw, 58px); }
.public-hero { max-width: 850px; margin-bottom: 30px; }
.public-hero h1, .public-tournament-head h1 { margin: 0; font-size: clamp(36px, 5.5vw, 78px); line-height: 1; letter-spacing: -.055em; }
.public-hero > p:last-child, .public-tournament-head p { color: var(--muted); line-height: 1.6; }
.public-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public-event-card { display: block; min-height: 220px; position: relative; overflow: hidden; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.public-event-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -80px; bottom: -80px; border: 30px solid rgb(255 192 103 / 7%); border-radius: 50%; }
.public-event-card:hover { transform: translateY(-2px); border-color: #66533b; background: #24221f; }
.public-event-card h2 { margin: 17px 0 8px; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.04em; }
.public-event-card h2 i { color: var(--orange); font-style: normal; font-size: .6em; }
.public-event-card p { color: var(--muted); line-height: 1.55; }
.card-link { display: inline-block; margin-top: 13px; color: var(--orange); font-weight: 800; font-size: 13px; }
.public-card-score { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 16px 0 8px; padding: 13px; border-radius: 12px; background: #151515; text-align: center; }
.public-card-score > :first-child { text-align: right; }
.public-card-score > :last-child { text-align: left; }
.public-card-score b { font-size: 28px; }
.public-card-score.compact { grid-template-columns: 1fr auto 1fr; }
.public-card-score.compact > :first-child { text-align: right; }
.public-card-score.compact > :last-child { text-align: left; }
.public-card-timer { color: var(--orange); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.public-tournament-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.public-tournament-head h1 { margin-top: 14px; }
.public-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spectator-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .34fr) minmax(0, 1fr); min-height: 340px; margin-bottom: 20px; overflow: hidden; border: 1px solid #444; border-radius: 22px; background: #181818; box-shadow: var(--shadow); }
.spectator-team { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; place-items: center; padding: clamp(20px, 4vw, 48px); text-align: center; background: #f0f0ee; color: #111; }
.spectator-team.two { background: #111; color: white; }
.spectator-team h2 { margin: 0; font-size: clamp(25px, 3.5vw, 52px); letter-spacing: -.04em; }
.spectator-team p { min-height: 20px; margin: 9px 0; color: inherit; opacity: .65; }
.spectator-team strong { align-self: center; font-size: clamp(92px, 13vw, 190px); line-height: .85; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.spectator-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px 10px; background: #1b1b1b; text-align: center; }
.spectator-stage { color: var(--orange); font: 800 11px "Courier New", monospace; letter-spacing: .07em; text-transform: uppercase; }
.spectator-timer { display: inline-flex; align-items: center; gap: .18em; color: white; font-size: clamp(30px, 4vw, 58px); font-weight: 900; letter-spacing: -.05em; }
.public-waiting { min-height: 250px; display: grid; place-items: center; align-content: center; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); text-align: center; }
.public-waiting span { color: var(--orange); font-size: 52px; font-weight: 900; }
.public-waiting h2 { margin: 15px 0 2px; }
.public-waiting p { color: var(--muted); }
.public-bracket-section .bracket-shell, .public-bracket { height: clamp(580px, 72vh, 1000px); }

/* Read-only 16:9 browser scoreboard */
.fullscreen-scoreboard-body { width: 100vw; height: 100vh; min-height: 0; overflow: hidden; background: #101010; }
.fullscreen-scoreboard-body::before { opacity: .08; }
.fullscreen-scoreboard { width: 100%; height: 100%; display: grid; place-items: stretch; position: relative; padding: clamp(16px, 2.2vw, 42px); }
.fullscreen-scoreboard .spectator-scoreboard, .fullscreen-scoreboard .public-waiting { width: 100%; height: 100%; min-height: 0; margin: 0; }
.fullscreen-scoreboard .spectator-team h2 { font-size: clamp(30px, 4vw, 76px); }
.fullscreen-scoreboard .spectator-team p { font-size: clamp(15px, 1.6vw, 30px); }
.fullscreen-scoreboard .spectator-team strong { font-size: clamp(110px, 22vh, 300px); }
.fullscreen-scoreboard .spectator-timer { font-size: clamp(44px, 6vw, 110px); }
.fullscreen-button { position: absolute; z-index: 5; top: 26px; right: 26px; padding: 9px 12px; border: 1px solid #555; border-radius: 10px; background: rgb(20 20 20 / 75%); color: white; cursor: pointer; font-weight: 800; opacity: .3; transition: opacity .15s ease; }
.fullscreen-button:hover { opacity: 1; }

@media (max-width: 1180px) {
  .presence-row { margin-left: auto; }
  .presence-avatar { display: none; }
  .public-header { grid-template-columns: 1fr auto; }
  .public-header nav { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 760px) {
  .bracket-shell { height: 66vh; min-height: 480px; }
  .swap-button { position: relative; inset: auto; left: auto; top: auto; transform: none; margin: 14px auto 0; display: flex; }
  .swap-button:active { transform: translateY(1px) scale(.985); }
  .share-layout { grid-template-columns: 1fr; }
  .share-qr-wrap { width: min(360px, 100%); margin: 0 auto; }
  .member-row, .audit-row { grid-template-columns: auto minmax(0, 1fr); }
  .member-row .btn-row, .audit-row time { grid-column: 1 / -1; }
  .public-header { position: static; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px; }
  .public-brand small { display: none; }
  .public-header nav { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .public-header > .btn { padding-inline: 10px; }
  .public-main { padding: 24px 14px 38px; }
  .public-event-grid { grid-template-columns: 1fr; }
  .public-tournament-head { align-items: flex-start; flex-direction: column; }
  .spectator-scoreboard { grid-template-columns: 1fr 1fr; min-height: 520px; }
  .spectator-center { grid-column: 1 / -1; grid-row: 1; min-height: 135px; gap: 9px; }
  .spectator-team { padding: 24px 12px; }
  .spectator-team h2 { font-size: 25px; }
  .spectator-team p { font-size: 12px; }
  .spectator-team strong { font-size: 90px; }
  .public-card-score { grid-template-columns: 1fr auto auto auto 1fr; font-size: 12px; }
  .correction-game .grid-2 { grid-template-columns: 1fr 1fr; }
  .fullscreen-scoreboard { padding: 10px; }
  .fullscreen-scoreboard .spectator-scoreboard { grid-template-columns: 1fr 150px 1fr; min-height: 0; }
  .fullscreen-scoreboard .spectator-center { grid-column: auto; grid-row: auto; }
}

/* V2.1: safer setup, clearer live states and public presentation */
.brand-mark::before, .brand-mark::after { display: none; }
.drawer-live.is-hidden { display: none !important; }
.eyebrow { font-size: 12px; }
.public-live-kicker { font-size: clamp(15px, 1.6vw, 22px); }
.colour-row input[type="color"] { padding: 3px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }
.colour-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.colour-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.colour-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }

.attention-wiggle { animation: attention-wiggle .8s cubic-bezier(.2,.8,.2,1); border-color: var(--orange); }
@keyframes attention-wiggle { 0%,100% { transform: scale(1) rotate(0); } 28% { transform: scale(1.075) rotate(-1.5deg); } 48% { transform: scale(1.075) rotate(1.5deg); } 68% { transform: scale(1.04) rotate(-.7deg); } }
.validation-more { margin-top: 9px !important; list-style: none; color: #ffd0d0; font-weight: 800; }
.manual-draw-card { margin-top: 20px; }
.manual-draw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); gap: 18px; margin-top: 18px; }
.manual-match-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.manual-match-card { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #181818; }
.manual-match-card h4 { margin: 0 0 3px; color: var(--orange); font: 800 11px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.manual-match-card label { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.manual-match-card select { min-width: 0; min-height: 39px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; background: #232323; color: white; }
.manual-bye { min-height: 39px; display: grid; place-items: center; border: 1px dashed #5b4a35; border-radius: 9px; color: var(--orange); font-size: 12px; }
.bye-short { display: none; }
.manual-unassigned { align-self: start; position: sticky; top: 166px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #171717; }
.manual-unassigned ol { max-height: 390px; margin: 12px 0 0; padding-left: 23px; overflow: auto; color: var(--muted); line-height: 1.65; }

.referee-status-card { min-height: 390px; display: grid; place-items: center; align-content: center; gap: 14px; padding: clamp(30px, 6vw, 70px); text-align: center; }
.referee-status-card h2 { margin: 2px 0 0; font-size: clamp(28px, 4vw, 48px); }
.referee-status-card > p { max-width: 680px; margin: 0 0 8px; }
.referee-status-line { display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; }
.connected-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.connected-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(121 214 163 / 10%); }
html[data-connection="offline"] .connected-state i, html[data-connection="error"] .connected-state i { background: var(--red); box-shadow: 0 0 0 4px rgb(239 141 141 / 10%); }
.setup-team-preview { max-width: 760px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #181818; }
.setup-team-preview > span { color: var(--orange); font: 800 10px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.setup-team-preview p { margin: 7px 0 0; font-size: 13px; }

.btn-caution { border-color: #765e3b; background: #3d3224; color: #ffe1b7; }
.btn-caution:hover { background: #4b3b28; }
.caution-box { margin-bottom: 16px; padding: 13px 15px; border: 1px solid #765e3b; border-radius: 11px; background: #3d3224; color: #ffe1b7; line-height: 1.5; }
.side-control-row { width: 100%; display: grid; gap: 7px; }
.score-controls .plus { display: grid; place-items: center; gap: 0; }
.score-controls .plus small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .68; }
.score-controls .plus.table-black, .header-score-button.table-black { border-color: #555; background: #111; color: white; }
.score-controls .plus.table-white, .header-score-button.table-white { border-color: #cfcfca; background: #f1f1ee; color: #111; }
.score-controls .plus.table-black:hover { background: #252525; }
.score-controls .plus.table-white:hover { background: white; }
.header-score-button { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); }
.score-team { transition: background .22s ease, color .22s ease, opacity .22s ease; }
.score-team.is-winner { background: var(--orange); color: #17120c; }
.score-team.is-winner p { color: #3a2b19; }
.score-team.is-winner .series-dots-ui span.win { border-color: #17120c; background: #17120c; box-shadow: none; }
.score-team.is-loser { opacity: .58; }
.score-value { position: relative; width: 100%; min-height: 1em; display: grid; place-items: center; }
.score-value > span { grid-area: 1 / 1; }
.score-old, .score-new { display: block; }
.score-increase .score-old { animation: ui-old-grow .38s ease-in forwards; }
.score-increase .score-new { animation: ui-new-shrink .38s ease-out forwards; }
.score-decrease .score-old { animation: ui-old-shrink .38s ease-in forwards; }
.score-decrease .score-new { animation: ui-new-grow .38s ease-out forwards; }
.spectator-team strong.score-increase, .spectator-team strong.score-decrease { position: relative; display: grid; place-items: center; width: 100%; }
.spectator-team strong.score-increase > span, .spectator-team strong.score-decrease > span { grid-area: 1 / 1; }
.spectator-team.table-black { background: #111; color: white; }
.spectator-team.table-white { background: #f0f0ee; color: #111; }
@keyframes ui-old-grow { 0% { transform: scale(1); opacity: 1; } 49% { transform: scale(1.18); opacity: 1; } 50%,100% { transform: scale(1.18); opacity: 0; } }
@keyframes ui-new-shrink { 0%,49% { transform: scale(1.18); opacity: 0; } 50% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ui-old-shrink { 0% { transform: scale(1); opacity: 1; } 49% { transform: scale(.7); opacity: 1; } 50%,100% { transform: scale(.7); opacity: 0; } }
@keyframes ui-new-grow { 0%,49% { transform: scale(.7); opacity: 0; } 50% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.match-stage-label { order: -2; padding: 7px 11px; font-size: 14px; }
.timer-large { order: -1; }
.timer-large.overtime, .spectator-timer { white-space: nowrap; }
.timer-large .ot-label, .spectator-timer .ot-label, .live-time .ot-label { flex: 0 0 auto; }
.timer-large.overtime { max-width: 100%; gap: .1em; font-size: clamp(24px, 3vw, 39px); letter-spacing: -.06em; }
.live-time.overtime { gap: .1em; font-size: 15px; }

.bracket-shell { height: max(720px, calc(100vh - 170px)); min-height: 720px; }
.bye-label { min-width: 0; color: var(--muted); font-style: italic; }
.bracket-progress-summary { display: grid; grid-template-columns: minmax(190px, auto) minmax(160px, 1fr) auto; align-items: center; gap: 18px; margin-top: 16px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.bracket-progress-summary > div:first-child { display: grid; gap: 4px; }
.bracket-progress-summary span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #343434; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.bracket-progress-summary > strong { color: var(--orange); font-size: 21px; }
.history-match-card { display: grid; align-content: start; gap: 16px; }
.history-match-title h3 { margin: 0; font-size: 18px; }
.history-match-title h3 span { color: var(--green); }
.history-series-score { color: var(--orange); }
.history-series-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #383838; border-radius: 10px; background: #171717; text-align: center; }
.history-series-summary > span:first-child { text-align: right; }
.history-series-summary > span:nth-child(3) { text-align: left; }
.history-series-summary > b { color: var(--orange); font-size: 22px; }
.history-series-summary .series-dots-ui { margin: 0; }
.history-series-dots { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.history-game-list { margin-top: 0; }
.history-game-row { grid-template-columns: auto minmax(0, 1fr) !important; }
.history-game-result { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 11px; }
.history-game-result > strong:first-child { text-align: right; }
.history-game-result > strong:last-child { text-align: left; }
.history-game-result strong { min-width: 0; overflow: hidden; color: #b2b2ae; text-overflow: ellipsis; white-space: nowrap; }
.history-game-result strong.game-winner { color: var(--green); }
.history-game-result b { display: flex; gap: 7px; color: white; }
.history-game-result b i { color: var(--orange); font-style: normal; }
.history-game-result b em { color: #888; font-style: normal; }

.audit-filters { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; align-items: end; gap: 10px; margin: 18px 0; padding: 13px; border: 1px solid #353535; border-radius: 12px; background: #181818; }
.audit-load-more { width: 100%; margin-top: 13px; }
.audit-row { align-items: start; gap: 15px; padding: 15px 16px; }
.audit-row .account-avatar { margin-top: 1px; }
.audit-copy { min-width: 0; }
.audit-row b { display: block; font-size: 14px; text-transform: none; line-height: 1.45; }
.audit-row small { margin-top: 6px; color: #b9b8b4; font-size: 12px; }
.audit-row time { padding-top: 3px; }

.public-bracket-section { position: relative; }
.bracket-deadzone { display: none; }
.fullscreen-scoreboard .spectator-timer { font-size: clamp(34px, 4.4vw, 78px); }
.fullscreen-scoreboard .spectator-team strong { font-size: clamp(92px, 19vh, 250px); }

html[data-connection="offline"] [data-requires-sync] { opacity: .35; cursor: not-allowed; }
.btn.is-pending, .header-score-button.is-pending { opacity: .62; cursor: progress; }

@media (max-width: 1100px) {
  .manual-draw-layout { grid-template-columns: 1fr; }
  .manual-unassigned { position: static; }
  .audit-filters { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 760px) {
  .eyebrow { font-size: 11px; }
  .manual-match-list { grid-template-columns: 1fr; }
  .manual-match-card label { grid-template-columns: 47px minmax(0, 1fr); }
  .bracket-shell { height: 68vh; min-height: 500px; }
  .public-bracket .bracket-deadzone { display: block; position: absolute; z-index: 12; top: 0; bottom: 0; width: 12%; touch-action: pan-y; }
  .public-bracket .bracket-deadzone.left { left: 0; }
  .public-bracket .bracket-deadzone.right { right: 0; }
  .bye-long { display: none; }
  .bye-short { display: inline; }
  .bracket-progress-summary { grid-template-columns: 1fr auto; }
  .bracket-progress-summary .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .history-series-summary { grid-template-columns: 1fr auto 1fr; }
  .history-series-dots { display: none; }
  .history-game-row { grid-template-columns: 1fr !important; gap: 7px !important; }
  .history-game-result { gap: 7px; font-size: 12px; }
  .audit-filters { grid-template-columns: 1fr; }
  .referee-status-card { min-height: 360px; padding: 32px 22px; }
  .score-center { min-height: 245px; }
  .side-control-row { grid-template-columns: 1fr 1fr; }
  .timer-controls { max-width: 190px; }
  .score-controls .plus small { font-size: 8px; }
}

/* V3.0 workspace chat */
.nav-chat-badge, .chat-fab-badge {
  min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border-radius: 999px; background: #dc143b; color: white;
  font-size: 10px; font-weight: 900; line-height: 1;
}
.nav-chat-badge { margin-left: auto; }
.nav-chat-badge[hidden], .chat-fab-badge[hidden] { display: none; }
.chat-notification-slot { display: none; min-width: 0; }
.chat-notification {
  width: 100%; min-width: 0; height: 48px; display: flex; align-items: stretch;
  overflow: hidden; border: 1px solid #5a4a36; border-radius: 12px;
  background: #2a251e; box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
}
.chat-notification.priority { border: 2px solid #dc143b; background: #2c1b20; }
.chat-notification-open {
  min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 9px; padding: 0 12px; background: transparent; color: white;
  text-align: left; cursor: pointer;
}
.chat-notification-open b { color: var(--orange); font-size: 12px; white-space: nowrap; }
.chat-notification-open span { overflow: hidden; color: #e0dfdc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-notification-check { width: 48px; flex: 0 0 auto; border-left: 1px solid rgb(255 255 255 / 14%); background: #dc143b; color: white; cursor: pointer; font-size: 21px; font-weight: 900; }
.chat-notification-check:disabled { opacity: .55; cursor: progress; }

.chat-fab {
  position: fixed; z-index: 64; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #66523a;
  border-radius: 50%; background: var(--orange); color: #17120c; box-shadow: 0 16px 42px rgb(0 0 0 / 46%);
  cursor: pointer; transition: opacity .18s ease, transform .2s ease;
}
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(18px) scale(.8); }
.chat-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat-fab-badge { position: absolute; right: -4px; top: -4px; border: 2px solid var(--bg); }

.chat-drawer {
  width: min(460px, calc(100vw - 24px)); position: fixed; z-index: 63; inset: 12px 12px 12px auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
  border: 1px solid #484848; border-radius: 20px; background: #191919;
  box-shadow: -16px 18px 70px rgb(0 0 0 / 58%); opacity: 0; pointer-events: none;
  transform: translateY(calc(100% + 34px)) scale(.96); transform-origin: right bottom;
  transition: transform .24s cubic-bezier(.2,.78,.2,1), opacity .18s ease;
}
.chat-drawer.open { opacity: 1; pointer-events: auto; transform: none; }
.chat-drawer-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #202020; }
.chat-drawer-head .eyebrow { margin-bottom: 3px; }
.chat-drawer-head h2 { margin: 0; font-size: 22px; }
.chat-drawer-head .btn-icon { width: 36px; min-height: 36px; font-size: 22px; }

.chat-page { max-width: 1320px; }
.chat-page-card { height: min(780px, calc(100vh - 190px)); min-height: 560px; overflow: hidden; }
.chat-conversation { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.chat-conversation.has-history-tools { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-history-tools { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #343434; background: #1d1d1d; }
.chat-message-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.chat-message { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px; border: 1px solid #383838; border-radius: 13px; background: #202020; }
.chat-message.has-delete { padding-bottom: 54px; }
.chat-message + .chat-message { margin-top: 10px; }
.chat-message.mine { background: #25221d; border-color: #51432f; }
.chat-message.priority { border: 2px solid #dc143b; background: #271b1f; }
.chat-message.pending { opacity: .68; }
.chat-message.failed { border-color: #a34d5e; }
.chat-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #30483a; color: #d9ffea; font-size: 10px; font-weight: 900; }
.chat-message.mine .chat-avatar { background: var(--orange); color: #17120c; }
.chat-message-main { min-width: 0; }
.chat-message-main > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-message-main > header > span { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chat-message-main header b { font-size: 13px; }
.chat-message-main header small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.chat-message-main header em { padding: 3px 6px; border-radius: 999px; background: #dc143b; color: white; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.chat-tournament-context { min-width: 0; margin-left: auto; overflow: hidden; color: var(--orange); font: 800 10px "Courier New", monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-main time { flex: 0 0 auto; margin-left: auto; color: #aaa9a5; font-size: 10px; white-space: nowrap; }
.chat-context { display: block; margin-top: 5px; color: var(--orange); font: 700 9px "Courier New", monospace; letter-spacing: .04em; }
.chat-message-main > p { margin: 9px 0 0; color: #eeeeeb; font-size: 14px; line-height: 1.48; overflow-wrap: anywhere; white-space: normal; }
.chat-checked { margin-top: 9px; color: #c6c5c1; font-size: 12px; font-style: italic; }
.chat-message-actions { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 11px; }
.chat-message-actions:empty { display: none; }
.chat-check { border-color: #dc143b; background: #dc143b; color: white; }
.chat-check:hover { background: #ec3157; }
.chat-check-complete { color: var(--green); font-size: 11px; font-weight: 800; }
.chat-delete { position: absolute; left: 13px; bottom: 13px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #a64d5d; border-radius: 8px; background: #5a2630; color: #ffdce3; cursor: pointer; font-size: 20px; font-weight: 900; line-height: 1; }
.chat-delete:hover { border-color: #dc143b; background: #dc143b; color: white; }
.chat-reconnecting { margin-left: auto; color: #ffc067; font-size: 11px; font-weight: 800; }
.danger-confirm { display: grid; gap: 12px; }
.danger-confirm > strong { color: #ff9daf; font-size: 17px; }
.danger-confirm p { margin: 0; }
.danger-confirm blockquote { margin: 0; padding: 13px 15px; border-left: 3px solid #dc143b; border-radius: 0 10px 10px 0; background: #171717; color: #f0efec; line-height: 1.45; }
.chat-empty { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 7px; padding: 30px; color: var(--muted); text-align: center; }
.chat-empty b { color: white; font-size: 18px; }
.chat-composer { padding: 13px; border-top: 1px solid #3a3a3a; background: #202020; }
.chat-composer textarea { width: 100%; min-height: 76px; max-height: 160px; resize: vertical; border: 1px solid #494949; border-radius: 11px; padding: 11px 12px; background: #141414; color: white; outline: 0; line-height: 1.45; }
.chat-composer textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(255 192 103 / 12%); }
.chat-composer.compact textarea { min-height: 58px; }
.chat-compose-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.chat-compose-row > small { margin-left: auto; color: var(--muted); font-size: 10px; }
.chat-priority-toggle { display: inline-flex; align-items: center; gap: 7px; color: #d6d5d1; cursor: pointer; font-size: 12px; font-weight: 800; }
.chat-priority-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.chat-priority-toggle span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #585858; border-radius: 7px; background: #303030; color: #b5b4b0; font-weight: 900; }
.chat-priority-toggle input:checked + span { border-color: #dc143b; background: #dc143b; color: white; box-shadow: 0 0 0 3px rgb(220 20 59 / 16%); }

/* V3.1 manual Team Draft */
.team-draft-page { max-width: 1560px; }
.team-draft-launch { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.team-draft-launch h3, .team-draft-launch p { margin-bottom: 0; }
.draft-status-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: clamp(18px, 3vw, 28px); border-color: #5c4a32; background: linear-gradient(105deg, #2b251d, #1d1d1d 68%); }
.draft-status-card h2 { margin: 4px 0 0; font-size: clamp(24px, 3.3vw, 42px); }
.draft-counters { display: flex; align-items: stretch; gap: 10px; }
.draft-counters span { min-width: 165px; display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #46423b; border-radius: 11px; background: #181818; color: #b9b8b4; font-size: 11px; font-weight: 800; }
.draft-counters b { color: var(--orange); font-size: 25px; line-height: 1; }
.draft-bye-notice { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.draft-bye-notice b { flex: 0 0 auto; color: var(--orange); }
.draft-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: stretch; gap: 12px; }
.draft-side-card { min-width: 0; display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); }
.draft-side-card select { width: 100%; }
.draft-team-preview { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 24px; border: 1px dashed #484848; border-radius: 16px; background: #181818; color: #7e7e7a; text-align: center; }
.draft-team-preview > span { color: #858580; font: 800 10px "Courier New", monospace; letter-spacing: .13em; }
.draft-team-preview strong { max-width: 100%; overflow-wrap: anywhere; color: #a7a6a2; font-size: clamp(21px, 3vw, 38px); line-height: 1; }
.draft-team-preview small { color: #8d8c88; font-size: 13px; }
.draft-team-preview.selected { border-style: solid; border-color: #6b5435; background: #282117; box-shadow: inset 0 0 0 1px rgb(255 192 103 / 8%); }
.draft-team-preview.selected strong { color: var(--orange); }
.draft-team-preview.selected small { color: #dfded9; }
.draft-versus { display: grid; place-items: center; color: var(--orange); font: 900 22px "Courier New", monospace; letter-spacing: .08em; }
.draft-lock-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 18px 20px; }
.draft-lock-bar p { margin: 4px 0 0; }
.draft-complete-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: clamp(24px, 4vw, 42px); border-color: #4e785e; background: linear-gradient(110deg, #203a2a, #1e211f 70%); }
.draft-complete-card h2 { margin: 5px 0 8px; font-size: clamp(25px, 3.5vw, 44px); }
.draft-complete-card p { margin: 0; }
.draft-complete-icon { width: 58px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #102117; font-size: 29px; font-weight: 900; }

@media (max-width: 940px) {
  .topbar.has-chat-notification .topbar-title, .topbar.has-chat-notification .presence-row { display: none; }
  .topbar.has-chat-notification .chat-notification-slot { display: block; flex: 1; }
  .chat-drawer { width: 100%; inset: 78px 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .chat-fab { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .draft-status-card, .draft-lock-bar, .team-draft-launch { align-items: flex-start; flex-direction: column; }
  .draft-counters { width: 100%; }
  .draft-counters span { min-width: 0; flex: 1; }
  .draft-complete-card { grid-template-columns: auto 1fr; }
  .draft-complete-card .btn-row { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .chat-page-card { height: calc(100dvh - 180px); min-height: 500px; }
  .chat-message-list { padding: 11px; }
  .chat-message { grid-template-columns: 30px minmax(0, 1fr); padding: 11px; }
  .chat-message.has-delete { padding-bottom: 52px; }
  .chat-avatar { width: 30px; height: 30px; }
  .chat-delete { left: 11px; bottom: 11px; }
  .chat-message-main > header { align-items: flex-start; flex-wrap: wrap; }
  .chat-tournament-context { max-width: 48%; white-space: normal; }
  .chat-compose-row { flex-wrap: wrap; }
  .chat-compose-row > small { margin-left: 0; }
  .chat-compose-row .btn { margin-left: auto; }
  .draft-control-grid { grid-template-columns: 1fr; }
  .draft-versus { min-height: 36px; }
  .draft-team-preview { min-height: 165px; }
  .draft-counters { display: grid; grid-template-columns: 1fr 1fr; }
  .draft-bye-notice { align-items: flex-start; flex-direction: column; }
  .draft-complete-card { grid-template-columns: 1fr; text-align: center; }
  .draft-complete-icon { margin-inline: auto; }
  .draft-complete-card .btn-row { grid-column: auto; justify-content: center; }
}

/* V3.0 operational layout and completed public-score states */
.home-status-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 18px;
}
.home-status-card { min-height: 138px; display: grid; align-content: space-between; gap: 20px; padding: 22px 24px; }
.home-status-card small { color: var(--orange); font: 800 10px "Courier New", monospace; letter-spacing: .12em; }
.home-status-card strong { display: flex; align-items: baseline; gap: 8px; margin-top: 11px; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.055em; }
.home-status-card strong span { color: #777; font-size: .45em; letter-spacing: 0; }
.home-status-card p { margin: 2px 0 0; font-size: 12px; }
.home-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #383838; }
.home-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--orange); box-shadow: 0 0 18px rgb(255 192 103 / 30%); }
.live-output-card { background: linear-gradient(135deg, #24211c, var(--panel) 70%); border-color: #5e4a31; }
.live-output-card strong i { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgb(255 192 103 / 10%); }

.scoreboard + .queue-layout { margin-top: 18px; }

.bracket-view-controls {
  position: absolute; z-index: 24; top: 12px; right: 12px; display: flex; gap: 7px;
  padding: 7px; border: 1px solid #494949; border-radius: 13px;
  background: rgb(24 24 24 / 90%); box-shadow: 0 10px 32px rgb(0 0 0 / 38%);
  backdrop-filter: blur(12px); cursor: default;
}
.bracket-view-controls .btn { min-height: 36px; padding-block: 7px; }
.bracket-view-controls .btn-icon { width: 36px; padding-inline: 0; }

.archive-visibility-btn { gap: 8px; }
.archive-visibility-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(121 214 163 / 10%); }
.archive-visibility-btn.is-unlisted .archive-visibility-dot { background: #7c7c78; box-shadow: 0 0 0 4px rgb(255 255 255 / 5%); }

.spectator-scoreboard { grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr) minmax(0, 1fr); }
.spectator-center { gap: 20px; padding-inline: 16px; }
.spectator-stage { font-size: clamp(13px, 1.15vw, 18px); line-height: 1.35; }
.spectator-timer { font-size: clamp(42px, 5.2vw, 76px); }
.spectator-team.result-winner h2 { color: var(--green); font-weight: 900; }
.spectator-team.table-white.result-winner h2 { color: #24764a; }
.spectator-team.result-loser h2, .spectator-team.result-loser p { opacity: .45; }
.spectator-team.table-white.result-loser h2 { color: #111; opacity: .78; }
.spectator-team strong.result-score { color: inherit; }
.spectator-team.result-winner strong.result-score { color: var(--orange); }
.spectator-team.table-white.result-winner strong.result-score { color: #bd6500; }
.public-card-score.is-complete b { color: inherit; }
.public-card-score.is-complete b.card-score-winner { color: var(--orange); }
.public-card-score.is-complete .card-winner { color: var(--green); font-weight: 900; }
.public-card-score.is-complete .card-loser { opacity: .46; }
.spectator-completion {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  padding: 10px 13px; border: 1px solid var(--orange); border-radius: 10px;
  color: var(--orange); font: 900 clamp(15px, 1.6vw, 24px) "Courier New", monospace;
  line-height: 1.12; letter-spacing: .07em; text-align: center;
}
.spectator-completion.just-completed { animation: completion-arrive .52s cubic-bezier(.2,.8,.2,1); }
.spectator-final-score { color: #9f9f9b; font: 800 10px "Courier New", monospace; letter-spacing: .12em; }
@keyframes completion-arrive { from { opacity: 0; transform: translateY(8px) scale(.94); } 60% { transform: translateY(0) scale(1.025); } }

@media (max-width: 760px) {
  .home-status-grid { grid-template-columns: 1fr; }
  .home-status-card { min-height: 125px; }
  .bracket-view-controls { top: 9px; right: 9px; }
  .bracket-view-controls .btn { min-height: 34px; padding: 6px 9px; font-size: 11px; }
  .bracket-view-controls .btn-icon { width: 34px; }
  .spectator-scoreboard { grid-template-columns: 1fr 1fr; min-height: 530px; }
  .spectator-center { grid-column: 1 / -1; grid-row: 1; min-height: 165px; gap: 13px; padding: 22px 14px; }
  .spectator-stage { max-width: 100%; font-size: clamp(14px, 4vw, 18px); }
  .spectator-timer { font-size: clamp(48px, 15vw, 70px); }
  .spectator-completion { font-size: clamp(15px, 4.8vw, 21px); }
}