@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Geist:wght@400;500;600;700&display=swap');
/* Light: warm neutrals. Dark: Arm navy with progressively lighter blue surfaces.
   Lime is reserved for primary actions/live states; blue denotes the next match. */
:root {
  --navy:#080225; --header-border:#373e5c; --header-control:#1a1d38; --header-hover:#292e4d; --lime:#bdee63; --accent-text:#1d211c; --accent-hover:#b0e64c; --accent-border:#8db654;
  --paper:#f1f0ef; --surface:#fdfdfc; --raised:#f9f9f8; --text:#21201c; --muted:#63635e;
  --hover:#e9e8e6; --subtle:#f1f0ef; --line:#dad9d6; --divider:#e9e8e6; --input-border:#bcbbb5;
  --focus:#6550b9; --connector:#8d8d86; --winner:#f8faf3;
  --live-bg:#eef6d6; --live-text:#37401c; --live-line:#abc978; --live-dot:#5c7c2f;
  --next-bg:#f4f0fe; --next-text:#2f265f; --next-line:#d4cafe;
  --error-bg:#fff7f7; --error-text:#641723; --error-line:#f4a9aa;
  color-scheme:light;
  font:15px/1.5 Geist,system-ui,sans-serif;
  color:var(--text); background:var(--paper);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit}
button,a,summary,input,select,textarea{outline-offset:3px}
:focus-visible{outline:2px solid var(--focus)}
.skip{position:absolute;top:.5rem;left:.5rem;z-index:3;background:var(--surface);padding:.6rem;transform:translateY(-200%)}
.skip:focus{transform:none}
.frame{width:min(100% - 3rem,1180px);margin-inline:auto}
.top{background:var(--mast,var(--navy));color:white;border-bottom:1px solid var(--header-border,#312a4b)}
.top-inner,.brand,.mode,.page-heading,.panel-title,.row-main,.row-end,.spotlight,.dialog-actions{display:flex;align-items:center}
.top-inner,.page-heading,.panel-title,.spotlight{justify-content:space-between;gap:.8rem}
.top-inner{min-height:64px}
.brand{text-decoration:none;font-weight:700;gap:.55rem}
.ball {
  flex: none;
  width: 27px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 36% 24%, #344503 0 5%, transparent 6.5%),
    radial-gradient(ellipse at 66% 24%, #344503 0 5%, transparent 6.5%),
    radial-gradient(ellipse at 23% 50%, #344503 0 4%, transparent 5.5%),
    radial-gradient(ellipse at 51% 49%, #344503 0 6%, transparent 7.5%),
    radial-gradient(ellipse at 78% 49%, #344503 0 4%, transparent 5.5%),
    radial-gradient(ellipse at 36% 74%, #344503 0 5%, transparent 6.5%),
    radial-gradient(ellipse at 66% 74%, #344503 0 5%, transparent 6.5%),
    radial-gradient(circle at 33% 24%, #f5ffb2, var(--lime) 43%, #a6ca2a 76%, #728b13);
  box-shadow: inset 0 0 0 1px #efff9280;
}
.mode{border:1px solid #47415e;border-radius:7px;overflow:hidden}
.mode button{padding:.42rem .72rem;border:0;color:#dedbe7;background:transparent;cursor:pointer;font-size:.83rem}
.mode button[aria-pressed=true]{background:#352c50;color:white}
.mast{color:white;background:var(--mast,var(--navy))}
.mast-inner{position:relative;isolation:isolate;min-height:247px;display:flex;align-items:center;padding-block:2.2rem}
.mast-inner::after{content:"";position:absolute;z-index:-1;inset:0 0 0 36%;background:linear-gradient(90deg,var(--mast,var(--navy)),transparent 64%),linear-gradient(0deg,#08022550,#08022535),url('hero.jpg') 65% 54%/cover;border-radius:0 0 9px 0}
.event-date{margin:0;color:var(--lime);font-size:.84rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font:800 clamp(3.2rem,7vw,6.4rem)/.94 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;margin:.5rem 0 .6rem}
.mast-meta{margin:0;color:#ebe7f3;font-size:.9rem}
.mast-meta span{padding-inline:.25em;color:var(--lime)}
.workspace{display:grid;grid-template-columns:185px minmax(0,1fr);gap:2rem;padding-block:1.6rem 4rem}
.preview-note{margin:.38rem 0 .8rem;color:var(--muted);font-size:.77rem;font-weight:600}
.side{display:grid;gap:4px}
.side a{display:flex;gap:.55rem;align-items:center;border-radius:7px;padding:.58rem .66rem;text-decoration:none}
.side a span{width:1rem;text-align:center;color:var(--muted);font-weight:700}
.side a:hover,.side a[aria-current=page]{background:var(--hover)}
.side a[aria-current=page]{font-weight:700;box-shadow:inset 3px 0 var(--accent-border)}
.page-heading{margin-bottom:1rem;flex-wrap:wrap}
h2{font-size:1.8rem;letter-spacing:-.035em;margin-bottom:0}
h3{font-size:1rem;margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;border:1px solid var(--input-border);border-radius:7px;padding:.45rem .72rem;background:var(--raised);color:var(--text);text-decoration:none;font-size:.83rem;font-weight:650;box-shadow:0 1px 1px #0802250b;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{color:var(--accent-text);background:var(--lime);border-color:var(--accent-border)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.compact{padding:.27rem .57rem}
.panel,.feature{border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}
.panel + .panel{margin-top:1rem}
.panel-title{padding:.75rem 1rem;background:var(--raised);border-bottom:1px solid var(--line);flex-wrap:wrap}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.feature{padding:.95rem 1rem 1.05rem;min-height:130px}
.feature:first-child{box-shadow:inset 0 3px var(--live-line)}
.feature h3{font-size:1.1rem;margin:.55rem 0 .16rem}
.feature p,.spotlight p{margin:0;color:var(--muted);font-size:.88rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);padding:.10rem .53rem;border-radius:20px;font-size:.75rem;font-weight:650;white-space:nowrap}
.tag.live{background:var(--live-bg);border-color:var(--live-line);color:var(--live-text)}
.tag.live::before{content:"";width:6px;height:6px;background:var(--live-dot);border-radius:50%}
.tag.next{background:var(--next-bg);color:var(--next-text);border-color:var(--next-line)}
.tag.planned{color:var(--muted)}
.rows{list-style:none;padding:0;margin:0}
.rows li{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;gap:.85rem;flex-wrap:wrap}
.rows li+li{border-top:1px solid var(--divider)}
.row-main,.row-end{gap:.6rem;flex-wrap:wrap}
.row-main span:last-child{font-weight:600}
.muted{color:var(--muted);font-size:.83rem}
.spotlight,.padded{padding:1rem}
.spotlight h3,.padded h3{margin-bottom:.3rem}
/* One shared grid keeps each downstream match centered between its feeders. */
.bracket-panel { overflow: visible; }
.bracket-panel .panel-title { border-radius: 9px 9px 0 0; }
.bracket-scroll { overflow-x: auto; scrollbar-color: var(--connector) var(--subtle); padding: 1rem; border-radius: 0 0 9px 9px; }
.bracket-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, minmax(185px, 1fr));
  grid-template-rows: auto repeat(8, minmax(0, 1fr));
  gap: .65rem clamp(1.3rem, 4vw, 2.35rem);
  min-width: 610px;
}
.bracket-connectors { position: absolute; inset: 0; pointer-events: none; }
.bracket-connectors i { position: absolute; background: var(--connector); }
.round-title {
  grid-column: var(--column);
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .15rem;
  font-weight: 700;
  font-size: .87rem;
}
.round-title span { padding: .02rem .4rem; border-radius: 20px; color: var(--muted); background: var(--subtle); font-size: .72rem; }
.match-card {
  position: relative;
  grid-column: var(--column);
  grid-row: var(--start) / span var(--span);
  align-self: center;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.match-card.is-live { border-color: var(--live-line); }
.match-card header,.match-card p { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .45rem .68rem; margin: 0; }
.match-card header { background: var(--raised); color: var(--muted); font-size: .75rem; font-weight: 650; }
.match-team { min-height: 2.33rem; border-top: 1px solid var(--divider); font-size: .88rem; }
.match-team.won { background: var(--winner); font-weight: 700; }
.match-team.pending { color: var(--muted); }
.match-team strong { font-variant-numeric: tabular-nums; min-width: 1.1rem; text-align: end; }
.groups { margin-top: 1rem; }
.groups summary { font-weight: 650; }
.groups p { margin: 0; color: var(--muted); border-top: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
label{font-size:.86rem;font-weight:650;display:grid;gap:.3rem}
input:not([type=checkbox]),select,textarea{width:100%;min-width:0;color:var(--text);border:1px solid var(--input-border);border-radius:6px;background:var(--surface);padding:.45rem .58rem}
input[type=checkbox]{accent-color:var(--live-dot);margin:0}
.check{display:flex;align-items:center}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;padding:1rem;align-items:end}
.fields .btn{justify-self:start}
.disclosures details+details,#team-list details+details{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:.72rem 1rem;font-weight:650}
summary:hover{background:var(--hover)}
#team-list details p{padding:.1rem 1rem .75rem;margin:0;color:var(--muted)}
#team-search{max-width:16rem}
dialog{border:1px solid var(--line);border-radius:10px;padding:0;width:min(37rem,calc(100% - 2rem));color:var(--text);background:var(--surface);box-shadow:0 16px 70px #08022535}
dialog::backdrop{background:#08022580}
.dialog-actions{justify-content:end;gap:.5rem;border-top:1px solid var(--line);padding:.75rem 1rem}
.toast{position:fixed;bottom:1rem;right:1rem;background:var(--navy);color:white;border-radius:7px;padding:.7rem 1rem;margin:0;max-width:calc(100% - 2rem)}
@media(max-width:940px){.workspace{grid-template-columns:1fr;gap:1rem}.side{display:flex;flex-wrap:wrap}.side a{padding:.42rem .55rem}.side a[aria-current=page]{box-shadow:inset 0 -2px var(--accent-border)}.mast-inner{min-height:185px}.mast-inner::after{inset-inline-start:18%}}
@media(max-width:460px){.frame{width:calc(100% - 1.5rem)}.top-inner{gap:.4rem}.mode button{padding:.38rem .43rem}.live-grid,.fields{grid-template-columns:1fr}.feature{min-height:0}.spotlight{align-items:start;flex-direction:column}.mast-inner{min-height:170px}}
.user-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--next-bg);color:var(--next-text);font-size:.78rem;font-weight:700;text-transform:uppercase}
.score{display:flex;flex-wrap:wrap;gap:.35rem;align-items:end;padding:.6rem;border-top:1px solid var(--line)}
.score label{width:4rem;font-size:.72rem}
.score input[type=number]{padding:.24rem .39rem}

.panel, .feature { box-shadow: 0 1px 2px #08022508; }
.btn:active { transform: translateY(1px); }
.mode button:focus-visible { outline-offset: -3px; }
.side a, .btn { min-height: 34px; }
.view { scroll-margin-top: 1rem; }
input::file-selector-button { font: inherit; margin-right: .55rem; border: 1px solid var(--line); border-radius: 5px; padding: .18rem .4rem; background: var(--subtle); color: var(--text); cursor: pointer; }
@media (max-width: 460px) {
  .bracket-scroll { padding: .75rem; }
  .bracket-grid { min-width: 590px; }
  dialog { max-height: calc(100dvh - 2rem); }
}

.queue-panel { margin-top: 1.15rem; }
.queue-panel .row-main a { font-weight: 600; text-decoration: none; }
.queue-panel .row-main a:hover { text-decoration: underline; }
.tag.final { background: var(--subtle); color: var(--text); border-color: var(--line); }
.match-card:target { outline: 2px solid var(--focus); outline-offset: 2px; }
.match-controls { padding: .42rem .65rem; border-top: 1px solid var(--line); }
.match-controls label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; align-items: center; font-size: .72rem; }
.match-controls select { padding: .25rem .35rem; font-size: .78rem; }
.rules-stack { display: grid; gap: 1rem; }
.rules-stack .panel + .panel { margin-top: 0; }
.rules-stack h3 { font-size: 1.18rem; }
.rules-stack :is(ol, ul) { padding-inline-start: 1.3rem; }
.rules-stack li { margin-block: .52rem; }
.rules-video iframe { display: block; width: 100%; max-width: 42rem; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: var(--navy); }
.rules-video p:last-child { margin: .65rem 0 0; }
.video-scoring { margin-block: 1rem; border: 1px solid var(--line); border-radius: 7px; }
.video-scoring p { padding-inline: 1rem; }

:root[data-theme="dark"] {
  --mast:#080225; --paper:#080225; --surface:#12132d; --raised:#1a1d38; --text:#f1f3fa; --muted:#b0b7cf;
  --hover:#292e4d; --subtle:#20243f; --line:#373e5c; --divider:#292f4b; --input-border:#67718e;
  --focus:#bdee63; --connector:#77829e; --winner:#1b2c2c;
  --accent-hover:#d4ff70; --accent-border:#577538;
  --live-bg:#29371d; --live-text:#e3f7ba; --live-line:#496231; --live-dot:#bde56c;
  --next-bg:#1c2d4a; --next-text:#c0d8ff; --next-line:#425c83;
  --error-bg:#3b1219; --error-text:#ffd1d9; --error-line:#8c333a;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --mast:#080225; --paper:#080225; --surface:#12132d; --raised:#1a1d38; --text:#f1f3fa; --muted:#b0b7cf;
    --hover:#292e4d; --subtle:#20243f; --line:#373e5c; --divider:#292f4b; --input-border:#67718e;
    --focus:#bdee63; --connector:#77829e; --winner:#1b2c2c;
    --accent-hover:#d4ff70; --accent-border:#577538;
    --live-bg:#29371d; --live-text:#e3f7ba; --live-line:#496231; --live-dot:#bde56c;
    --next-bg:#1c2d4a; --next-text:#c0d8ff; --next-line:#425c83;
    --error-bg:#3b1219; --error-text:#ffd1d9; --error-line:#8c333a;
    color-scheme:dark;
  }
}

.header-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--header-border,#5d526f);
  border-radius: 7px;
  background: var(--header-control,#211938);
  color: white;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--header-hover,#352c50); }
.theme-icon { position: relative; display: block; width: 18px; height: 18px; }
:root:not([data-theme]) .theme-icon::before {
  content: "";
  position: absolute;
  inset: 1px 0 5px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
:root:not([data-theme]) .theme-icon::after {
  content: "";
  position: absolute;
  inset: 12px 5px 1px;
  background: currentColor;
  clip-path: polygon(42% 0, 58% 0, 58% 70%, 100% 70%, 100% 100%, 0 100%, 0 70%, 42% 70%);
}
[data-theme="light"] .theme-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(currentColor 0deg 12deg, transparent 12deg 45deg);
  mask: radial-gradient(circle, transparent 0 6px, black 6px 9px, transparent 9px);
}
[data-theme="light"] .theme-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
[data-theme="dark"] .theme-icon {
  border-radius: 50%;
  background: currentColor;
  mask: radial-gradient(circle at 70% 27%, transparent 0 7.2px, black 7.8px);
}
.round-picker { display: none; }
@media (max-width: 690px) {
  .top-inner { flex-wrap: wrap; gap: .55rem; padding-block: .65rem; }
  .header-controls { justify-content: space-between; }
  .header-controls button { min-height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
  .btn, .side a, summary { min-height: 44px; }
  .side a { font-size: .88rem; }
  .panel-title, .rows li { padding-inline: .75rem; }
  .score { gap: .5rem; }
  .score label { flex: 1 1 3.4rem; max-width: 5rem; }
  input:not([type=checkbox]), select, textarea, .match-controls select { font-size: 16px; min-height: 44px; }
  .check input { width: 1.2rem; height: 1.2rem; }
  .round-picker { display: flex; flex-wrap: wrap; gap: .3rem; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
  .round-picker button { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--text); padding: .35rem .45rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
  .round-picker button[aria-pressed=true] { background: var(--lime); color: var(--accent-text); border-color: var(--accent-border); }
  .bracket-grid { display: flex; flex-direction: column; min-width: 0; gap: .65rem; }
  .bracket-connectors, .round-title { display: none; }
  .match-card { align-self: stretch; }
  .bracket-grid[data-visible-round="0"] .match-card:not([data-round="0"]),
  .bracket-grid[data-visible-round="1"] .match-card:not([data-round="1"]),
  .bracket-grid[data-visible-round="2"] .match-card:not([data-round="2"]) { display: none; }
  #team-search { max-width: none; }
}
@media (max-width: 460px) {
  .header-controls { width: 100%; }
  .mast-inner { padding-block: 1.5rem; }
  h1 { font-size: clamp(2.65rem, 11vw, 3.2rem); }
}

/* Live tournament forms and bracket */
.top a { text-decoration: none; }
.top nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.live .header-controls { justify-content: flex-end; width: auto; }
.live .header-controls a { font-size: .85rem; }
.live .top-inner, .live .header-controls { gap: .65rem; }
.live .mast-inner { min-height: clamp(165px, 23vw, 247px); }
.live .workspace aside { min-width: 0; }
.live .side { position: sticky; top: .8rem; }
.live .archive { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.live .archive a { padding: .35rem .62rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-size: .82rem; }
.live .archive a[aria-current] { background: var(--subtle); font-weight: 700; }
.live .content { min-width: 0; }
.live .content > section, .live [data-live-bracket] > section { scroll-margin-top: 1rem; }
.live .content h2 { margin: 0 0 .65rem; }
.live .board-bar, .live .admin-toolbar, .live .actions, .live .inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: .65rem; }
.live .board-bar, .live .admin-toolbar { justify-content: space-between; }
.live .board-bar p { margin: 0; color: var(--muted); font-size: .85rem; }
.live .board-bar h2 { margin-bottom: 0; }
.live .admin-toolbar { margin-bottom: .85rem; }
.live .admin-panel, .live .match-day, .live .narrow, .live .champion { padding: 1rem; margin-bottom: 1rem; }
.live .notice { border: 1px solid var(--live-line); background: var(--live-bg); color: var(--live-text); border-radius: 8px; padding: .75rem 1rem; overflow-wrap: anywhere; }
.live .notice.error { border-color: var(--error-line); background: var(--error-bg); color: var(--error-text); }
.live .stack { display: grid; justify-items: start; gap: .8rem; margin-top: .8rem; }
.live .stack label { width: min(100%, 38rem); }
.live .setup-form { margin-top: .8rem; }
.live .admin-panel > details + details, .live .match-day details + details { border-top: 1px solid var(--line); }
.live .admin-panel summary, .live .match-day summary { padding-inline: .35rem; }
.live .admin-panel > details { margin-top: .5rem; }
.live .roster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 12rem),1fr)); gap: .3rem .65rem; }
.live .roster label, .live label.check-option { display: flex; align-items: center; gap: .45rem; }
.live label.check-option { margin-block: .6rem; }
.live .roster-list { list-style:none; padding:0; }
.live .roster-list li, .live .fixed-pair, .live .roster-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.45rem 0; border-bottom:1px solid var(--divider); }
.live .roster-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 11rem),1fr)); gap:.65rem; }
.live .roster-edit-card { background:var(--raised); border:1px solid var(--line); border-radius:8px; padding:.8rem; }
.live .roster-status, .live .roster-count, .live .profile-field p, .live .schedule-note { color:var(--muted); font-size:.86rem; }
.live .profile-field, .live .roster-edit-actions { margin-top:.7rem; }
.live .team-player { display:inline-flex; gap:.3rem; align-items:center; }
.live .player-avatar { border-radius:50%; object-fit:cover; vertical-align:middle; }
.live .audit-scroll { overflow:auto; }
.live .audit-table { border-collapse:collapse; width:100%; font-size:.86rem; }
.live .audit-table :is(td,th) { padding:.5rem .6rem; border-bottom:1px solid var(--line); }
.live .audit-table thead { background:var(--raised); }
.live .match-queue { max-height:18rem; overflow:auto; }
.live .match-queue a { text-decoration:none; }
.live .match-queue a:hover { text-decoration:underline; }
.live .match-queue li { justify-content:flex-start; }
.live .team-search { margin-block:.8rem; max-width:24rem; }
.live .team-progress { margin-left:.25rem; }
.live .team-results { padding-inline-start:1.3rem; }
.live .champion { background:var(--live-bg); border:1px solid var(--live-line); border-radius:8px; }
.live .champion .kicker { margin:0 0 .4rem; color:var(--live-text); font-weight:700; }
.live .bracket-board { margin-block:1rem; }
.live .bracket-board .panel-title { border-radius:8px 8px 0 0; }
.live .scroll-board { position:relative; overflow-x:auto; padding:.7rem; }
.live .rounds { position:relative; display:flex; gap:2rem; min-width:max-content; }
.live .round { width:clamp(205px,22vw,265px); display:flex; flex-direction:column; gap:.5rem; }
.live .round h4 { margin:.1rem 0 .2rem; font-size:.86rem; }
.live .round-cards { display:flex; flex:1; flex-direction:column; justify-content:space-around; gap:.65rem; }
.live :is(.match-queue,.rounds) [id] { scroll-margin-top:1rem; }
.live .match { position:relative; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; }
.live .match:target { outline:2px solid var(--focus); }
.live .match[data-status="In progress"] { border-color:var(--live-line); }
.live .match header, .live .match .team { display:flex; align-items:center; justify-content:space-between; gap:.45rem; padding:.45rem .65rem; }
.live .match header { background:var(--raised); color:var(--muted); font-size:.78rem; font-weight:650; }
.live .match .team { border-top:1px solid var(--divider); font-size:.86rem; min-height:2.55rem; }
.live .match .team.won { background:var(--winner); font-weight:700; }
.live .match .team strong { font-variant-numeric:tabular-nums; }
.live .score-form, .live .match-status-form { display:flex; gap:.35rem; flex-wrap:wrap; align-items:end; padding:.5rem .65rem; border-top:1px solid var(--line); }
.live .score-form label { width:3.7rem; font-size:.72rem; }
.live .score-form input, .live .match-status-form select { padding:.25rem .35rem; }
.live .match-status-form label { flex:1; font-size:.73rem; }
.live .round-picker { display:none; }

@media(max-width:690px) {
  .live .match-status-form select { font-size:16px; }
  .live .header-controls { flex:1; }
  .live .top nav { gap:.45rem; }
  .live .content { overflow-wrap:anywhere; }
}
.live .connector-layer { position:absolute; inset:0; pointer-events:none; }
.live .connector-layer i { position:absolute; background:var(--connector); }
.live .section, .live .rules-content { padding-block:1.3rem; }
.live .rules-content { max-width:56rem; }
.live .rules-content h2 { margin-bottom:.5rem; }
.live .mast p:not(.event-date) { color:#ebe7f3; }
.live .mast .btn { margin-bottom:.4rem; }
.live .details { display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:0; }
.live .details dt { font-weight:700; }
.live .details dd { margin:0; }
.live .faq-section { background:var(--surface); }
.live .top .brand { margin-block:.3rem; }
.live .top .top-inner > nav { margin-left:auto; }

.mast-inner::after { box-shadow: inset 0 -3px var(--navy); }


/* Shared selection, workspace, and form refinements. */
.live nav.view-switch { display: inline-flex; flex-wrap: nowrap; gap: 3px; padding: 3px; border: 1px solid var(--header-border); background: var(--navy); border-radius: 8px; }
.view-switch a { display: inline-flex; align-items: center; gap: .38rem; min-height: 34px; border-radius: 5px; padding: .36rem .62rem; color: #e2ddfe; font-weight: 550; white-space: nowrap; }
.view-switch a:hover { background: var(--header-hover); color: white; }
.view-switch a[aria-current="page"] { background: var(--lime); color: var(--accent-text); font-weight: 700; }
.view-switch a[aria-current="page"]::before { content: ""; width: .38rem; height: .38rem; background: currentColor; border-radius: 50%; }
.live .top nav:not(.view-switch) a { border-radius: 5px; padding: .35rem .45rem; }
.live .top nav:not(.view-switch) a:hover, .live .top nav:not(.view-switch) a[aria-current] { background: #291f43; }
.live .mast-inner { overflow: hidden; }
.live .mast-inner::after { background-image: linear-gradient(90deg,var(--mast,var(--navy)) 0%,transparent 75%),linear-gradient(0deg,#08022566,#08022524),url('hero.jpg'); }
.live .content section + .archive { margin-top: .8rem; }
.live .admin-panel > details { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); margin-block: .55rem; }
.live .admin-panel > details > summary { padding: .55rem .75rem; border-radius: 6px; }
.live .admin-panel > details[open] > summary { background: var(--raised); border-bottom: 1px solid var(--line); }
.live .admin-panel > details > :not(summary) { margin-inline: .75rem; }
.live .admin-panel > details > :last-child:not(summary) { margin-bottom: .75rem; }
.live .admin-panel > details > p { margin-top: .7rem; }
.live .roster-list li:nth-child(even) { background: var(--raised); }
.live .roster-list li { padding: .45rem .55rem; }
.live .roster-list li.is-editing { background: var(--live-bg); }
.live .stack label { max-width: 38rem; }
.live .danger { color: var(--error-text); border-color: var(--error-line); }
.live .danger:hover { background: var(--error-bg); }
.live .btn, .live input, .live select, .live textarea { max-width: 100%; }
.live .btn { white-space: normal; }
.live .match .team > span { min-width: 0; }
.live .match .team strong { min-width: 1.5rem; text-align: end; }
.live .match-queue, .live .audit-scroll { scrollbar-color: var(--connector) var(--subtle); }
.live .team-results { color: var(--muted); }
.live .profile-field input { margin-top: .2rem; }
.live .faq-section details + details { border-top:1px solid var(--line); }
.live .faq-section details p { padding-inline:1rem; }
.live .notice, .live .narrow { max-width: 100%; }
.live .schedule-note { margin-block: .6rem 1rem; }
@media (max-width:690px) {
  .view-switch a { min-height:44px; }
  .live .header-controls { flex: 0 1 auto; margin-inline-start:auto; }
  .live .mast-inner::after { inset-inline-start: 0; opacity: .75; }
  .live .match .tag { white-space: nowrap; }
  .live .match-status-form { align-items: end; }
  .live .inline-form label { min-width:min(100%, 12rem); flex: 1 1 12rem; }
}

.live .scroll-board { scrollbar-color: var(--connector) var(--subtle); overscroll-behavior-inline: contain; }
.live .connector-layer + .round { position: relative; }
.bracket-scroll-hint {
  display: none;
  margin: 0; padding: .45rem .75rem;
  background: var(--raised); color: var(--muted);
  border-bottom: 1px solid var(--line); font-size: .79rem; font-weight: 600;
}
@media (max-width: 690px) {
  .live .bracket-scroll-hint { display: block; }
  .live .rounds { gap: 1.3rem; }
  .live .round { width: clamp(215px, 72vw, 285px); }
}

.live .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--lime); font-weight: 700; }
.live .home-links { padding-block: 1.5rem 2rem; }
.home-links h2 { margin-bottom: .8rem; }
.home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.home-grid .panel { display:flex; align-items:flex-start; flex-direction:column; gap:.4rem; margin:0; }
.home-grid p { color:var(--muted); margin:0 0 .5rem; }
.home-grid .btn { margin-top:auto; }
@media(max-width:690px) {
  .home-grid { grid-template-columns:1fr; }
  .live .top-inner { justify-content:flex-start; }
  .live .top .top-inner > nav { margin-left:0; }
  .live .top-inner > .theme-toggle { margin-inline-start:auto; }
}

/* Shared control geometry and restrained match editing. */
.live .top-inner { gap: 1rem; }
.live .header-controls, .live .top-inner > .theme-toggle { margin-inline-start: auto; }
.live .btn { min-height: 36px; padding: .4rem .7rem; font-size: .84rem; line-height: 1.3; font-weight: 600; }
.live input:not([type=checkbox]), .live select { min-height: 36px; padding: .4rem .6rem; font-size: 1rem; line-height: 1.3; }
.live select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23828ca6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px; }
.live summary { list-style: none; display: flex; align-items: center; gap: .6rem; }
.live summary::-webkit-details-marker { display: none; }
.live summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.live details[open] > summary::before { transform: rotate(45deg); }
.live .match .team { font-size: 1rem; font-weight: 600; min-height: 48px; padding: .65rem .75rem; }
.live .match .team > span { line-height: 1.5; }
.live .match header { padding: .4rem .75rem; font-size: .72rem; }
.live .match .tag { font-size: .7rem; font-weight: 500; padding: .08rem .45rem; }
.live .match-editor { border-top: 1px solid var(--divider); background: var(--raised); }
.live .match-editor > summary { min-height: 36px; padding: .45rem .75rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
.live .match-editor[open] > summary { color: var(--text); }
.live .match-status-form, .live .score-form { padding: .6rem .75rem; gap: .5rem; border-color: var(--divider); }
.live .match-status-form label { font-weight: 500; }
.live .score-form label { width: 3.9rem; font-weight: 500; }
.live .match-status-form select, .live .score-form input { height: 36px; min-height: 36px; }
.live .match-status-form .btn, .live .score-form .btn { min-height: 36px; }
.live .rules-content { line-height: 1.65; }
.live .rules-content h2 { font-size: 1.5rem; }
.live .rules-content li + li { margin-top: .65rem; }
.live .rules-content ol, .live .rules-content ul { padding-left: 1.3rem; }
.live .rules-content .padded { padding: 1.4rem; }
.live .rules-back { margin: 0; }
@media(max-width:690px) {
 .live .top-inner { gap: .5rem; }
 .live .header-controls { gap: .5rem; }
 .live .view-switch a { font-size: .8rem; min-height: 36px; padding: .35rem .6rem; }
 .live .theme-toggle { width: 38px; height: 38px; min-height: 38px; }
 .live .side { gap: .25rem; }
 .live .side a { min-height: 36px; }
 .live .round { width: clamp(245px, 76vw, 285px); }
 .live .match-editor summary { min-height: 40px; }
 .live .rules-content .padded { padding: 1rem; }
}
@media(max-width:460px) {
 .live .top-inner { display: grid; grid-template-columns: 1fr auto; }
 .live .header-controls { grid-column: 1 / -1; width: 100%; justify-content: space-between; margin: 0; }
 .live .header-controls .theme-toggle { margin-left: auto; }
 .live .brand { font-size: .95rem; }
 .live .live-grid { gap: .65rem; }
}
@media(max-width:690px) {
 .live .inline-form { align-items: stretch; }
 .live .inline-form label { flex: 1 1 100%; }
 .live .inline-form .btn { margin-top: .15rem; }
}
.live .workspace > .archive { grid-column: 1 / -1; margin: 0; }
.live .workspace { row-gap: 1rem; }
/* Attendance belongs to the selected tournament; keep each row on one grid. */
.live .roster-list li { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 4rem; gap: .65rem; align-items: center; padding: .65rem .75rem; }
.live .roster-name { min-width: 0; overflow-wrap: anywhere; }
.live .roster-status { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .55rem; border: 1px solid var(--error-line); border-radius: 999px; background: var(--error-bg); color: var(--error-text); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.live .roster-status::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.live .roster-status.is-attending { background: var(--live-bg); color: var(--live-text); border-color: var(--live-line); }
.live .roster-list li > :last-child { justify-self: end; }
.live .roster-editing { color: var(--muted); font-size: .8rem; }
@media(max-width:540px) {
 .live .roster-list li { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .6rem; }
 .live .roster-list .roster-name { grid-column: 1; grid-row: 1; }
 .live .roster-list .roster-status { grid-column: 1; grid-row: 2; }
 .live .roster-list li > :last-child { grid-column: 2; grid-row: 1 / 3; }
}
.live .score-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.live .score-form .team-score-label { width:auto; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:.4rem; line-height:1.35; }
.live .score-form .btn { justify-self:start; }
.live .change-list { padding-left:1.2rem; max-height:24rem; overflow:auto; }
.live .change-list li { padding:.6rem .25rem; border-bottom:1px solid var(--divider); }
.live .change-list time { color:var(--muted); font-size:.8rem; }
.live .change-list p { margin:.25rem 0; }
.live .results-actions { margin-top:1rem; }
.live .results-table { text-align:left; }
.live .results-table th { text-align:left; }
.live .results-table td { font-variant-numeric:tabular-nums; white-space:nowrap; }
.live .share-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1.3rem; align-items:center; }
.qr-code { background:white; border-radius:8px; padding:6px; width:180px; }
.qr-code svg { display:block; width:100%; height:auto; }
.winner-celebration { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border:0; border-radius:0; background:#080225ed; color:#f1f3fa; padding:1.5rem; }
.winner-celebration::backdrop { background:#080225b3; }
.winner-celebration[open] { display:grid; place-items:center; }
.winner-celebration canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.winner-message { position:relative; text-align:center; max-width:50rem; animation:winner-arrival .65s ease-out both; }
.winner-message h2 { font-size:clamp(2rem,7vw,5rem); line-height:1.1; margin:1rem 0; overflow-wrap:anywhere; }
.winner-message > p:not(.event-date) { color:#c0d8ff; }
.winner-trophy { font-size:4rem; margin:0 0 1rem; }
@keyframes winner-arrival { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .winner-message { animation:none; } }
@media(max-width:540px) { .live .share-layout { grid-template-columns:1fr; } .qr-code { justify-self:center; } }
html:has(.winner-celebration[open]) { overflow:hidden; }
.winner-celebration { overflow:hidden; }
/* A staged championship reveal; motion is decorative and always dismissible. */
.winner-celebration { background:radial-gradient(ellipse at 50% 42%,#282044f5 0%,#100a2bf8 48%,#080225fc 85%); }
.winner-celebration::before { content:''; position:absolute; inset:-35%; pointer-events:none; background:conic-gradient(from 0deg at 50% 50%,transparent 0 30deg,#f7cf760d 34deg,transparent 40deg 95deg,#bdee630a 100deg,transparent 110deg 200deg,#c0d8ff0d 205deg,transparent 214deg 300deg,#f7cf760b 308deg,transparent 320deg); animation:champion-rays 24s linear infinite; }
.winner-message { width:100%; animation:winner-arrival .9s cubic-bezier(.2,.8,.2,1) both; }
.winner-message .event-date { letter-spacing:.18em; font-size:.75rem; animation:winner-arrival .8s .25s both; }
.winner-message h2 { font-weight:700; letter-spacing:-.045em; font-size:clamp(2.4rem,7.5vw,6rem); margin:1.15rem 0 1.4rem; color:#fff7dc; background:linear-gradient(110deg,#fff7dc 25%,#f7cf76 44%,white 50%,#f7cf76 56%,#fff7dc 75%); background-size:250% 100%; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:winner-arrival 1s .45s both,champion-shimmer 4s 1.4s ease-in-out both; }
.winner-trophy { display:grid; place-items:center; width:120px; height:120px; margin:0 auto 1.4rem; position:relative; filter:drop-shadow(0 0 28px #f7cf7638); animation:trophy-reveal 1.1s cubic-bezier(.2,.8,.2,1) both; }
.winner-trophy svg { width:100%; height:100%; }
.winner-trophy::before,.winner-trophy::after { content:''; position:absolute; inset:-18px; border:1px solid #f7cf7638; border-radius:50%; animation:champion-ring 3s 1s ease-out infinite; }
.winner-trophy::after { animation-delay:2.5s; }
.winner-message .winner-final-score { display:table; margin:0 auto 1.8rem; padding:.5rem 1.2rem; border:1px solid #f7cf763d; border-radius:999px; background:#08022580; color:#f7e6bc; font-size:.9rem; letter-spacing:.13em; font-variant-numeric:tabular-nums; animation:winner-arrival .8s .7s both; }
.winner-message .btn { animation:winner-arrival .8s .9s both; }
@keyframes champion-rays { to { transform:rotate(360deg); } }
@keyframes champion-shimmer { from { background-position:130% 0; } to { background-position:-30% 0; } }
@keyframes champion-ring { from { transform:scale(.85); opacity:.65; } to { transform:scale(1.7); opacity:0; } }
@keyframes trophy-reveal { from { opacity:0; transform:translateY(25px) scale(.55) rotate(-12deg); } to { opacity:1; transform:none; } }
@media(max-width:540px) { .winner-trophy { width:94px; height:94px; } .winner-message h2 { font-size:clamp(2.2rem,9vw,3.5rem); } }
@media(prefers-reduced-motion:reduce) { .winner-celebration::before,.winner-trophy,.winner-trophy::before,.winner-trophy::after,.winner-message,.winner-message h2,.winner-message .event-date,.winner-message .btn,.winner-message .winner-final-score { animation:none; } }
.winner-name { display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.winner-join { white-space:pre; }
.live .results-table { min-width:540px; }
.live .results-table th { white-space:nowrap; }
.live .results-table th[scope=row] { white-space:normal; min-width:150px; }
.table-scroll-hint { display:none; }
@media(max-width:690px) { .table-scroll-hint { display:block; margin:.75rem 0 .35rem; } }
/* Each round sizes to its widest matchup; every card stretches to that width. */
.live .round { flex:0 0 auto; width:max-content; min-width:265px; }
.live .round-cards { align-items:stretch; }
.live .match .team > span { display:flex; align-items:center; gap:.25em; white-space:nowrap; }
.live .match .team-player { flex:none; }
.live .match .team strong { flex:none; }
@media(max-width:690px) { .live .round { min-width:clamp(245px,76vw,285px); } }
/* Context navigation: quiet filled selection, without the colored edge. */
.live .side { gap:.25rem; }
.live .side a { border:1px solid transparent; border-radius:7px; color:var(--muted); padding:.5rem .7rem; font-size:.88rem; font-weight:500; box-shadow:none; }
.live .side a:hover { color:var(--text); background:var(--subtle); }
.live .side a[aria-current=page] { color:var(--text); background:var(--hover); border-color:transparent; font-weight:650; box-shadow:none; }
.live .side a:focus:not(:focus-visible) { outline:none; }
html[data-sections=tabs] [data-tab-panel]:not(.is-active) { display:none; }
.live [data-tab-panel] { scroll-margin-top:1rem; }
.live .workspace > .all-tournaments { grid-column:1/-1; }
.all-tournaments { display:inline-flex; align-items:center; width:fit-content; text-decoration:none; color:var(--muted); font-size:.84rem; padding:.35rem 0; }
.all-tournaments:hover { color:var(--text); text-decoration:underline; }
.live .team-identity { flex-direction:column; align-items:flex-start!important; gap:.1rem!important; }
.live .team-members { display:flex; align-items:center; gap:.25em; }
.custom-team-name { display:block; color:var(--muted); font-size:.75rem; line-height:1.4; font-weight:500; }
.attendance-search { margin-block:1rem .4rem; max-width:28rem; }
.live .roster-list li { grid-template-columns:minmax(0,1fr) 9rem 14rem; }
.roster-row-actions { display:flex; gap:.4rem; align-items:center; justify-content:flex-end; }
.tournament-directory { padding-block:2rem 4rem; }
.tournament-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; }
.tournament-card { display:flex; flex-direction:column; gap:.6rem; text-decoration:none; padding:1.25rem; transition:border-color .15s,background .15s; }
.tournament-card:hover { background:var(--raised); border-color:var(--input-border); }
.tournament-card h3 { font-size:1.3rem; }
.tournament-card time { font-weight:600; }
.tournament-card p { margin:0; }
.card-link { margin-top:.7rem; font-size:.85rem; font-weight:600; }
.header-admin { color:#e2ddfe; font-size:.85rem; }
.profile-page { max-width:850px; padding-block:1.5rem 4rem; }
.profile-page .all-tournaments { margin-bottom:1rem; }
.profile-title { font:700 clamp(1.8rem,5vw,2.6rem)/1.2 Geist,system-ui,sans-serif; text-transform:none; letter-spacing:-.03em; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-block:1rem; }
.profile-stats > div { display:grid; gap:.2rem; }
.profile-stats strong { font-size:2rem; font-variant-numeric:tabular-nums; }
.profile-stats span { color:var(--muted); font-size:.85rem; }
.profile-tournaments-title { margin-block:1.5rem .8rem; }
.profile-page .panel h2 { margin-bottom:.7rem; }
@media(max-width:940px) { .live .side { padding-bottom:.6rem; border-bottom:1px solid var(--line); } }
@media(max-width:690px) {
 .live .roster-list li { grid-template-columns:minmax(0,1fr) auto; gap:.35rem .6rem; }
 .live .roster-list .roster-name { grid-column:1;grid-row:1; }
 .live .roster-list .roster-status { grid-column:1;grid-row:2; }
 .live .roster-list li > .roster-row-actions { grid-column:2;grid-row:1/3; flex-direction:column; align-items:stretch; }
 .roster-row-actions .btn { font-size:.76rem; }
 .profile-page .profile-stats { gap:.5rem; }
 .profile-page .profile-stats span { font-size:.78rem; }
}

/* User-controlled avatar framing, shared by player and admin uploads. */
.photo-crop-dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:24px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 80px #0006; }
.photo-crop-dialog::backdrop { background:rgb(0 0 0 / .65); }
.photo-crop-dialog h2 { margin:0 0 10px; font-size:1.35rem; }
.photo-crop-dialog p { font-size:.875rem; line-height:1.5; }
.crop-stage { position:relative; width:min(100%,280px); aspect-ratio:1; margin:18px auto; overflow:hidden; border-radius:8px; cursor:grab; touch-action:none; background:#fff; }
.crop-stage:active { cursor:grabbing; }
.crop-stage:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.crop-stage canvas { display:block; width:100%; height:100%; }
.crop-mask { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 100px #0009; border:2px solid #fff; pointer-events:none; }
.crop-zoom { display:grid; grid-template-columns:auto 1fr 3rem; align-items:center; gap:12px; font-size:.875rem; }
.crop-zoom input { width:100%; min-height:36px; padding:0; accent-color:var(--lime); }
.crop-zoom output { text-align:right; font-variant-numeric:tabular-nums; }
.crop-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:16px; }
.crop-actions .btn { min-height:40px; font-size:.875rem; }
.crop-error:empty { display:none; }
.crop-result { display:block; width:72px; height:72px; object-fit:cover; border-radius:50%; border:1px solid var(--line); margin-top:10px; }
.crop-result[hidden] { display:none; }
.crop-feedback:empty { display:none; }