/* Carven Events — 2026 Summer Dance Tournament system (CARVEN × ALAT).
   Two surfaces, one system:
   - CONTROL APP (this operator tool): ink on paper — black on white, the calm
     scoresheet the staff drive the show from. No magenta here.
   - SHOW DISPLAY (.sv-*, the projector): the loud magenta field, Zuume/Anton
     eroded caps — the 2026 Summer Dance broadcast, kept exactly as designed.
   Heavy condensed caps (Anton), geometric letter-spaced labels (Montserrat),
   flat square panels, hairline rules, one shared motion curve. */

/* Display face: Zuume Rough Bold (Pangram Pangram) — the brand's condensed,
   eroded caps. It's a licensed font, so drop the web files in /fonts and this
   picks them up; until then the stack falls back to Anton. */
@font-face{
  font-family:'Zuume Rough';
  src:url('../fonts/ZuumeRough-Bold.woff2') format('woff2'),
      url('../fonts/ZuumeRough-Bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* ---- show brand — magenta broadcast, referenced only by .sv-* ---- */
  --magenta: #DF39BC;
  --magenta-press: #C51F9F;
  --violet: #BD15E5;
  --indigo: #5432B0;
  --yellow: #FFEE95;

  /* ---- control app — carvengaming.com brand: dark charcoal arena + gold.
     Cool-slate darks (hue ~250) so the warm gold accent pops, matching the
     site (near-black nav, #1F2124 surfaces, #F89F1F gold, white text). ---- */
  --bg:        oklch(0.176 0.010 250);   /* charcoal page  ~#12151b */
  --surface:   oklch(0.215 0.011 250);   /* cards          ~#1e222a */
  --raised:    oklch(0.258 0.012 250);   /* inputs, insets ~#262b34 */
  --line:      oklch(0.330 0.013 250);   /* border         ~#373d48 */
  --line-2:    oklch(0.420 0.014 250);   /* stronger divider / hover edge */
  --text:      oklch(0.960 0.004 250);   /* near-white ink */
  --muted:     oklch(0.680 0.012 250);   /* secondary */
  --gold:      oklch(0.765 0.150 63);    /* CARVEN gold #F89F1F */
  --accent:    var(--gold);              /* the one accent */
  --accent-press: oklch(0.705 0.145 60);
  --on-accent: oklch(0.200 0.020 60);    /* near-black text on gold */
  --ink:       oklch(0.20 0.030 330);    /* darkest — show white-card text */
  --ok:        oklch(0.72 0.13 158);     /* status: green */
  --danger:    oklch(0.63 0.20 25);

  --disp: 'Zuume Rough', 'Anton', 'Arial Narrow', 'Arial Black', sans-serif;
  --body: 'Montserrat', Arial, Helvetica, sans-serif;

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px;

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.375rem; --text-xl: 2rem; --text-hero: 2.75rem;

  --radius: 4px;

  /* ---- one motion language, control app + broadcast ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint: entrances, hovers */
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --dur-1: .12s;   /* micro: hovers, focus */
  --dur-2: .22s;   /* standard: cards, tabs */
  --dur-3: .36s;   /* deliberate: reveals */
}

/* the app's single accent flows through the old --orange/--brand names so
   every existing accent use turns black at once; the show never reads these */
:root{ --orange: var(--accent); --orange-press: var(--accent-press); --brand: var(--accent); }

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--text-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--body);font-size:var(--text-base);cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- header ---------------- */
#sitenav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--space-xl);
  height:64px;padding:0 clamp(16px, 3vw, 40px);
  background:oklch(0.145 0.009 250);
  border-bottom:1px solid var(--line);
}
.logo{
  display:flex;align-items:center;
  color:var(--text);
  user-select:none;
}
.logo .logomark{display:inline-flex;align-items:center}
.logo .logomark img{height:1.3rem;width:auto;display:block}
.logosub{
  margin-left:var(--space-md);padding-left:var(--space-md);
  border-left:1px solid var(--line);
  font-family:var(--body);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
#nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-lg)}

/* ---------------- buttons ---------------- */
.btn-cta{
  display:inline-block;
  font-weight:700;font-size:var(--text-sm);letter-spacing:.07em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);border-radius:var(--radius);
  padding:10px 18px;text-align:center;cursor:pointer;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.btn-cta:hover{background:var(--accent-press);border-color:var(--accent-press)}
.btn-cta:active{transform:translateY(1px)}
.btn-lg{padding:13px 26px;font-size:var(--text-base)}
.btn-ghost{
  font-weight:600;font-size:var(--text-sm);letter-spacing:.05em;text-transform:uppercase;
  background:transparent;color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:9px 14px;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--raised)}
.btn-sm{padding:5px 10px;font-size:var(--text-xs)}
.btn-danger{
  font-weight:600;font-size:var(--text-sm);letter-spacing:.05em;text-transform:uppercase;
  background:transparent;color:var(--danger);
  border:1px solid var(--danger);border-radius:var(--radius);
  padding:9px 14px;
}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ---------------- page scaffolding ---------------- */
.page{max-width:1200px;margin:0 auto;padding:var(--space-2xl) clamp(16px,3vw,40px) 96px}
.page-narrow{max-width:880px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-xl);margin-bottom:var(--space-2xl)}
h1{font-family:var(--disp);font-weight:900;font-size:var(--text-hero);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.lede{color:var(--muted);margin-top:var(--space-sm);max-width:60ch}
.crumb{
  display:inline-block;margin-bottom:var(--space-xl);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.crumb:hover{color:var(--orange)}
.grouphead{
  font-family:var(--disp);font-weight:700;font-size:var(--text-base);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:var(--space-3xl) 0 var(--space-lg);
}
.hint{color:var(--muted);font-size:var(--text-sm)}

/* ---------------- game banners (signature) ---------------- */
.banners{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--space-lg);margin:var(--space-xl) 0 var(--space-2xl);
}
.banner{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);
  padding:var(--space-xl) var(--space-lg) var(--space-lg);
  min-height:200px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.banner:hover{transform:translateY(-3px);border-color:var(--line-2)}
.banner.selected{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.banner-glyph{width:44px;height:44px;color:var(--muted);transition:color var(--dur-2) var(--ease)}
.banner-glyph svg{width:100%;height:100%}
.banner:hover .banner-glyph,.banner.selected .banner-glyph{color:var(--orange)}
.banner-name{font-family:var(--disp);font-weight:800;font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.02em;margin-top:auto}
.banner-tag{color:var(--muted);font-size:var(--text-sm);line-height:1.35}
.banner-unit{
  margin-top:var(--space-sm);padding:3px 8px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.banner.selected .banner-unit{border-color:var(--orange);color:var(--orange)}

/* ---------------- dashboard rows ---------------- */
.empty{margin-top:var(--space-3xl)}
.empty-line{font-size:var(--text-lg);color:var(--muted)}
.trows{display:flex;flex-direction:column;gap:var(--space-md)}
.trow{
  display:flex;align-items:center;gap:var(--space-xl);
  padding:var(--space-lg) var(--space-xl);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.trow:hover{border-color:var(--line-2);transform:translateX(3px)}
.trow-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.trow-name{
  font-family:var(--disp);font-weight:800;font-size:var(--text-lg);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trow-meta{color:var(--muted);font-size:var(--text-sm)}
.gtag{
  display:inline-flex;align-items:center;gap:var(--space-sm);flex:0 0 auto;
  padding:8px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.gtag svg{width:20px;height:20px;color:var(--orange)}
.stagechip{
  margin-left:auto;flex:0 0 auto;
  padding:5px 12px;border-radius:var(--radius);border:1px solid var(--line);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stagechip.stage-live{border-color:var(--orange);color:var(--orange)}
.stagechip.stage-done{border-color:var(--ok);color:var(--ok)}
.stagechip.stage-scheduled{border-color:var(--magenta);color:var(--magenta)}
.stagechip.stage-expired{border-color:var(--danger);color:var(--danger)}
/* stage-draft keeps the base muted chip */

/* Overview status banner: the lifecycle chip + a contextual action
   (Go Live, an "opens…" affordance, a reschedule prompt, or a caption) */
.eventstatus{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}
.eventstatus .stagechip{margin-left:0}
.eventstatus .hint{margin:0}
.datetime{display:flex;gap:var(--space-sm);align-items:center}
.datetime input{min-width:0}
.btn-golive:disabled{opacity:.5;cursor:not-allowed}

/* ---------------- forms ---------------- */
.formcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-xl);
}
.formgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-lg) var(--space-xl);
}
.field{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.field.span2{grid-column:1 / -1}
.fname{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.fopt{font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none}
.fixed{color:var(--muted);font-size:var(--text-sm);padding-top:6px}
input,select{
  font-family:var(--body);font-size:var(--text-base);color:var(--text);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;width:100%;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px oklch(0.765 0.150 63 / .22)}
input::placeholder{color:oklch(0.55 0.012 250)}
.formcard .btn-cta,.formcard .btn-lg{margin-top:var(--space-xl)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;width:fit-content;max-width:100%}
.segbtn{
  background:transparent;color:var(--muted);border:none;
  padding:9px 18px;font-weight:700;font-size:var(--text-sm);
}
.segbtn + .segbtn{border-left:1px solid var(--line)}
.segbtn.on{background:var(--orange);color:var(--on-accent)}
.boselects{display:flex;gap:var(--space-md);flex-wrap:wrap}
.boselects label{
  display:flex;flex-direction:column;gap:var(--space-xs);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.boselects select{width:auto}

/* ---------------- creation wizard ---------------- */
.wiz-steps{
  display:flex;gap:var(--space-sm);list-style:none;
  margin:var(--space-xl) 0 var(--space-2xl);flex-wrap:wrap;
}
.wiz-step{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:6px 12px 6px 6px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.wiz-stepnum{
  width:24px;height:24px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
}
.wiz-step.current{border-color:var(--orange);color:var(--text)}
.wiz-step.current .wiz-stepnum{background:var(--orange);color:var(--on-accent);border-color:var(--orange)}
.wiz-step.done{color:var(--muted)}
.wiz-step.done .wiz-stepnum{color:var(--orange);border-color:var(--orange);background:transparent}
.wiz-nav{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);
  margin-top:var(--space-xl);
}
.wiz-nav .btn-cta:disabled{opacity:.4;cursor:not-allowed;background:var(--orange);border-color:var(--orange)}
#wiz-body .banners{margin-bottom:var(--space-lg)}
.formatcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-lg);margin-bottom:var(--space-lg);
}
.formatcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);
  padding:var(--space-lg) var(--space-xl);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);
  transition:border-color var(--dur-2) var(--ease);
}
.formatcard:hover{border-color:var(--line-2)}
.formatcard.selected{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.formatcard b{
  font-family:var(--disp);font-weight:800;font-size:var(--text-lg);
  text-transform:uppercase;letter-spacing:.02em;
}
.formatcard.selected b{color:var(--orange)}
.formatcard span{color:var(--muted);font-size:var(--text-sm);line-height:1.4}
.reco-chip{
  margin-top:var(--space-xs);padding:3px 8px;
  border:1px solid var(--orange);border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange) !important;
}
.schedrows{display:flex;flex-direction:column;gap:var(--space-md);align-items:flex-start}
.schedrow{display:flex;gap:var(--space-md);width:100%;align-items:center}
.schedrow input[type="time"]{flex:0 0 9rem;font-variant-numeric:tabular-nums}
.schedrow .btn-ghost{flex:0 0 auto}
.revblock{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-lg);
}
.revhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-sm)}
.revhead h2{
  font-family:var(--disp);font-weight:700;font-size:var(--text-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.revline{font-size:var(--text-base)}
.revline b{font-family:var(--disp);text-transform:uppercase}
.revsched{list-style:none;display:flex;flex-direction:column;gap:var(--space-xs)}
.revsched li{display:flex;gap:var(--space-lg);font-size:var(--text-sm)}
.revsched time{color:var(--orange);font-weight:700;font-variant-numeric:tabular-nums;min-width:5.5rem}

/* ---------------- workspace ---------------- */
.workhead{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap}
.workhead-main{min-width:0}
.workhead h1{font-size:var(--text-xl)}
.tabs{
  display:flex;gap:var(--space-xl);margin-bottom:var(--space-xl);
  border-bottom:1px solid var(--line);
}
.tab{
  padding:10px 2px;font-weight:600;font-size:var(--text-sm);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabhead{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-sm);flex-wrap:wrap}
.tabhead h2,.panel h2{
  font-family:var(--disp);font-weight:700;font-size:var(--text-base);
  letter-spacing:.14em;text-transform:uppercase;
}
.tabhead-meta{color:var(--muted);font-size:var(--text-sm)}
.tabhead .btn-ghost{margin-left:auto}
.tabbody > .hint{display:block;margin-bottom:var(--space-xl);max-width:70ch}
.dangerzone{
  display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;
  margin-top:var(--space-2xl);padding-top:var(--space-xl);
  border-top:1px solid var(--line);
}
.coverrow{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.coverthumb{
  width:96px;height:54px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);flex:0 0 auto;
}
.checkline{
  display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);
  font-size:var(--text-sm);color:var(--muted);cursor:pointer;
}
.checkline input{width:auto;accent-color:var(--orange)}
.dangerask{width:100%;max-width:60ch;color:var(--muted)}
.dangerask b{color:var(--danger)}
.dangerrow{display:flex;gap:var(--space-md);flex-wrap:wrap;width:100%}
.dangerrow input{max-width:18rem;border-color:var(--danger)}
.btn-danger:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--danger)}
.formcard-schedule{max-width:640px}

/* ---------------- settings tab (sharing + team & roles) ---------------- */
.teaminvite{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.teaminvite #team-email{flex:1;min-width:180px}
.teamlist{display:flex;flex-direction:column;gap:6px}
.memberrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius)}
.memberrow.owner{background:var(--raised)}
.memberemail{flex:1;min-width:160px;word-break:break-word}
.memberrole{opacity:.8}

/* ---------------- players tab ---------------- */
.playgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--space-lg);margin-top:var(--space-lg);
}
.pslot{
  display:flex;gap:var(--space-md);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-md);
}
.seed{
  flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:var(--text-sm);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius);
}
.pslot-main{display:flex;flex-direction:column;gap:var(--space-sm);flex:1;min-width:0}
.prow{display:flex;align-items:center;gap:var(--space-sm)}
.pthumb{width:40px;height:52px;object-fit:cover;object-position:center top;border-radius:var(--radius);border:1px solid var(--line-2);flex:0 0 auto;background:var(--raised)}

/* ---------------- bracket tree ---------------- */
/* Grid geometry comes from tree.js (row spans double per round, so a match
   centers on its feeders' boundary); the elbows below live in the column gap:
   each feeder draws a half-gap elbow out, each receiver a half-gap stub in. */
.treewrap{overflow-x:auto;padding-bottom:var(--space-md)}
.tree{--tree-gap:2.5rem;--tree-rowh:2.7rem;min-width:fit-content}
.tree-heads{display:grid;column-gap:var(--tree-gap);margin-bottom:var(--space-md)}
.tree-grid{display:grid;column-gap:var(--tree-gap);grid-auto-rows:minmax(var(--tree-rowh),1fr)}
.tcell{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:2px 0}
.tcell .bmatch,.tcell .sv-match{width:100%}
.tcell:not(.last)::after{
  content:"";position:absolute;left:100%;width:calc(var(--tree-gap) / 2);pointer-events:none;
}
.tcell.top:not(.last)::after{top:50%;bottom:0;border-top:2px solid var(--line);border-right:2px solid var(--line)}
.tcell.bot:not(.last)::after{top:0;bottom:50%;border-bottom:2px solid var(--line);border-right:2px solid var(--line)}
.tcell.decided:not(.last)::after{border-color:var(--orange)} /* winner path */
.tcell.fed::before{
  content:"";position:absolute;right:100%;width:calc(var(--tree-gap) / 2);
  top:calc(50% - 2px);border-top:2px solid var(--line);pointer-events:none;
}
.bcolhead{
  font-family:var(--disp);font-weight:700;font-size:var(--text-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  border-bottom:1px solid var(--line);padding-bottom:var(--space-sm);
}
.bmatch{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.bslot{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:8px 40px 8px 12px;font-weight:600;font-size:var(--text-sm);
  border-bottom:1px solid var(--line);
}
.bslot:last-of-type{border-bottom:none}
.bslot.clickable{cursor:pointer}
.bslot.clickable:hover{background:var(--raised)}
.bslot.winner{color:var(--orange)}
.bslot.winner .bname::after{
  content:"WIN";margin-left:10px;
  font-family:var(--disp);font-weight:800;font-size:var(--text-xs);letter-spacing:.12em;
}
.bslot.tbd{color:var(--muted);font-style:italic;font-weight:400}
.bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bscore{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.bmini{width:20px;height:26px;object-fit:cover;object-position:center top;border-radius:2px;border:1px solid var(--line-2);flex:0 0 auto}
.bmatch.islive{border-color:var(--line-2)}
.mactions{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:flex;gap:4px;
}
.mlive,.bfeature{
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--raised);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius);font-size:.7rem;
  opacity:0;transition:opacity var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.bmatch:hover .mlive,.bmatch:hover .bfeature,
.mlive:focus-visible,.bfeature:focus-visible,
.mlive.on,.bfeature.on{opacity:1}
.mlive:hover,.mlive.on,.bfeature:hover,.bfeature.on{color:var(--orange);border-color:var(--orange)}
.mlive.on{animation:pulse 1.6s infinite}

/* ---------------- round-robin standings + fixtures ---------------- */
.standtable{
  width:100%;border-collapse:collapse;margin-top:var(--space-lg);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.standtable th,.standtable td{
  padding:10px 14px;text-align:center;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.standtable th{
  font-family:var(--disp);font-weight:700;font-size:var(--text-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.standtable .st-name{text-align:left}
.standtable td.st-name{font-weight:700}
.standtable td.st-name .bmini{vertical-align:middle;margin-right:var(--space-sm)}
.standtable td.st-name span{vertical-align:middle}
.standtable tr:last-child td{border-bottom:none}
.standtable tr.leader td{color:var(--orange)}
.standtable td b{font-family:var(--disp);font-weight:800}
.rrfixhead{margin-top:var(--space-2xl)}
.rrround{margin-top:var(--space-lg)}
.rrmatches{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--space-md);margin-top:var(--space-md);
}

/* ---------------- show tab ---------------- */
/* min(320px,100%) so the track can shrink below 320 on narrow phones instead of overflowing */
.showgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-lg)}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg);align-items:flex-start;
}
.panel .hint{margin:0}
.panel .field{width:100%}
.panel .formgrid{width:100%}
.viewswitch{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* stage-then-push: the draft picker + the Go Live control */
.golive{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin:var(--space-xs) 0}
.btn-golive{font-size:var(--text-base);padding:12px 24px;letter-spacing:.1em}
.livewhat{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--muted)}
.livewhat b{color:var(--text);font-weight:700}
.livedot{width:9px;height:9px;border-radius:50%;background:oklch(0.63 0.2 22);flex:0 0 auto}
.panel-live,.panel-draft{font-family:var(--body);font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 9px;border-radius:999px;margin-left:var(--space-sm);vertical-align:middle}
.panel-live{background:oklch(0.63 0.2 22 / .18);color:oklch(0.74 0.18 25)}
.panel-draft{border:1px solid var(--line-2);color:var(--muted)}
.livenow{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;padding-top:2px}
.livechip{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:4px 6px 4px 10px;background:var(--raised);
  border:1px solid var(--orange);border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);
}
.livechip.final{border-color:var(--ok);color:var(--ok)}
.livechip button{
  background:transparent;border:none;color:inherit;font-size:var(--text-xs);
  padding:2px 4px;opacity:.7;
}
.livechip button:hover{opacity:1}
.scorectl{display:flex;align-items:center;gap:var(--space-xl);flex-wrap:wrap}
.scoreside{display:flex;flex-direction:column;gap:var(--space-xs)}
.scorename{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scorebtns{display:flex;align-items:center;gap:var(--space-sm)}
.scorebtns .btn-cta,.scorebtns .btn-ghost{padding:6px 14px;font-size:var(--text-lg);line-height:1}
.scoreval{font-family:var(--disp);font-weight:900;font-size:var(--text-xl);font-variant-numeric:tabular-nums;min-width:1.4ch;text-align:center}
.scoredash{color:var(--muted);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase}
.cdrow{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.cdclock{font-family:var(--disp);font-weight:900;font-size:var(--text-xl);font-variant-numeric:tabular-nums}

/* ================= SHOW DISPLAY (projector) =================
   Full magenta field, white cards, violet + yellow accents — the
   2026 Summer Dance Tournament broadcast look. */
body.show-mode{overflow:hidden}
body.show-mode #sitenav{display:none}
body.show-mode #app{
  /* broadcast tokens — CARVEN house default: charcoal arena + gold.
     A sponsor skins the show by overriding these under .theme-<sponsor>
     (see .theme-alat below); everything .sv-* reads only these tokens. */
  --sv-field-1: var(--raised);        /* field gradient: lifted charcoal (near) */
  --sv-field-2: var(--surface);       /* field mid */
  --sv-field-3: var(--bg);            /* field deep (far) */
  --sv-accent: var(--gold);           /* winner / highlight fills */
  --sv-accent-press: var(--accent-press);
  --sv-on-accent: var(--on-accent);   /* text/border ON an accent fill (near-black on gold) */
  --sv-spark: var(--gold);            /* field-context accent: live dot, edges, champ name */
  --sv-band-hi: var(--on-accent);     /* highlight text/dot sitting ON an accent band */
  --sv-shard: linear-gradient(135deg, var(--raised), var(--gold));
  --sv-bar:   linear-gradient(90deg, var(--surface), var(--raised));
  --sv-haze-1: oklch(0.40 0.030 255); --sv-haze-2: oklch(0.46 0.060 70); --sv-haze-3: oklch(0.34 0.020 255);

  position:fixed;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(120% 120% at 88% 108%, var(--sv-field-1), var(--sv-field-2) 46%);
  color:#fff;
}
/* ALAT sponsor theme — the 2026 Summer Dance magenta broadcast. References the
   raw --magenta/--violet constants so this look stays byte-identical to before. */
body.show-mode #app.theme-alat{
  --sv-field-1: var(--violet); --sv-field-2: var(--magenta); --sv-field-3: var(--magenta-press);
  --sv-accent: var(--magenta); --sv-accent-press: var(--magenta-press);
  --sv-on-accent: #fff;
  --sv-spark: var(--yellow); --sv-band-hi: var(--yellow);
  --sv-shard: linear-gradient(135deg, var(--violet), #ff8ad4);
  --sv-bar:   linear-gradient(90deg, var(--violet), #9a15c2);
  --sv-haze-1: #7b3ff2; --sv-haze-2: #d98cff; --sv-haze-3: #5a2fd6;
}
.sv-topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:2vh 2.4vw 0;position:relative;z-index:2;
}
/* broadcast is Canva-clean: the centered CARVEN×ALAT lockup is the branding,
   so drop the operator topbar and let the stage fill the screen edge-to-edge */
body.show-mode .sv-topbar{display:none}
#sv-body:has(.sv-stage),#sv-body:has(.sv-thanks){padding:0}
.logo-sm{font-size:2.6vh;color:#fff}
.sv-event{
  font-size:1.7vh;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.live{
  display:inline-block;margin-right:1vh;width:1.1vh;height:1.1vh;border-radius:50%;
  background:var(--sv-spark);animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 oklch(1 0 0 / .7)}
  50%{opacity:.5;box-shadow:0 0 0 1vh oklch(1 0 0 / 0)}
}
#sv-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0 2.4vw 2.5vh;position:relative;z-index:1}
.sv{flex:1;display:flex;flex-direction:column;min-height:0}
.sv-center{align-items:center;justify-content:center;text-align:center}
.sv-eyebrow{
  font-weight:700;font-size:2.1vh;letter-spacing:.5em;text-transform:uppercase;color:#fff;
  margin-bottom:2.5vh;
}
.sv-mega{
  font-family:var(--disp);font-weight:400;
  font-size:15vh;line-height:.92;text-transform:uppercase;color:#fff;letter-spacing:.005em;
}
.sv-clock{font-size:24vh;font-variant-numeric:tabular-nums;margin-top:2.5vh}
.sv-clock.zero{animation:zeroflash .8s steps(2,end) infinite}
@keyframes zeroflash{50%{opacity:.2}}
.sv-sub{
  font-size:3vh;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:oklch(1 0 0 / .82);
  margin-top:2.5vh;
}
/* home title card: copy centered mid-screen, the game glyph as a ghosted
   watermark behind it */
.sv-home{
  position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:4vh 1vw 5vh;overflow:hidden;
}
.sv-home-glyph{
  position:absolute;left:50%;bottom:-14vh;width:70vh;height:70vh;
  transform:translateX(-50%);
  color:oklch(1 0 0 / .1);pointer-events:none;
}
.sv-home-glyph svg{width:100%;height:100%}
.sv-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-cover-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, oklch(0.13 0.01 240 / .3), oklch(0.13 0.01 240 / .62));
}
.sv-home.has-cover .sv-home-main{text-shadow:0 2px 28px oklch(0 0 0 / .55)}
/* the glyph/decor are a fallback layer behind the cover; hide them while the
   cover loads. If the cover image fails, onerror drops .has-cover to reveal them
   instead of leaving a blank field. */
.sv-home.has-cover .sv-home-glyph,
.sv-home.has-cover .sv-decor{display:none}
.sv-home-main{position:relative;min-width:0;max-width:86vw;text-align:center}
.sv-home .sv-eyebrow{display:flex;align-items:center;justify-content:center;margin-bottom:3vh}
.sv-home .sv-eyebrow::before{
  content:"";display:inline-block;margin-right:1.4vw;
  border-left:.9vh solid transparent;border-right:.9vh solid transparent;
  border-top:1.6vh solid var(--orange);
}
.sv-home-title{font-size:8.5vh;overflow-wrap:anywhere}
.sv-home .sv-sub{margin-top:2.2vh;letter-spacing:.28em}

/* full-screen run of show */
.sv-schedule{align-items:center;padding:14vh 0 9vh}
.sv-schedule .sv-matchline{flex:0 0 auto}
.sv-schedlist{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:min(72vw,130vh);min-height:0;
}
.sv-schedrow{
  display:grid;grid-template-columns:minmax(7ch,max-content) 1fr;gap:2.8vw;align-items:center;
  padding:2.2vh 1.5vw;border-top:1px solid oklch(1 0 0 / .22);
  font-size:min(3.4vh,3.2vw);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.sv-schedrow:first-of-type{border-top:none}
.sv-schedrow time{
  color:var(--sv-spark);font-family:var(--disp);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;font-size:min(4.2vh,4vw);line-height:1;
}
.sv-schedrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* signature scatter marks, tucked into the screen margins */
.sv-decor{position:absolute;z-index:0;pointer-events:none;opacity:.92}
.sv-decor.tl{top:9vh;left:2.4vw}
.sv-decor.tr{top:7vh;right:3vw}
.sv-decor .sv-marks{width:auto;height:min(36vh,320px)}
.sv-center{position:relative}
.sv-center .sv-inner{position:relative;z-index:1}
.sv-home-main{z-index:1}

/* view entrance: on a screen switch the new content IS the transition —
   top-level blocks rise in sequence (headline → body → footer), and list-like
   screens cascade their rows. Nothing is painted over the content. */
#sv-body.enter > .sv > *{animation:svin .5s cubic-bezier(.22,1,.36,1) both}
#sv-body.enter > .sv > :nth-child(2){animation-delay:.07s}
#sv-body.enter > .sv > :nth-child(3){animation-delay:.14s}
#sv-body.enter > .sv > :nth-child(4){animation-delay:.21s}
@keyframes svin{from{opacity:0;transform:translateY(2.4vh)}to{opacity:1;transform:none}}
/* rows and tiles cascade individually instead of moving as one slab */
#sv-body.enter > .sv > .sv-schedlist,
#sv-body.enter > .sv > .sv-tiles{animation:none}
#sv-body.enter .sv-schedlist .sv-schedrow,
#sv-body.enter .sv-tiles .sv-tile{animation:svin .45s cubic-bezier(.22,1,.36,1) both;animation-delay:.42s}
#sv-body.enter .sv-schedlist .sv-schedrow:nth-child(-n+8),
#sv-body.enter .sv-tiles .sv-tile:nth-child(-n+8){animation-delay:calc(.06s + var(--svi, 0) * .06s)}
#sv-body.enter .sv-schedlist :nth-child(1),#sv-body.enter .sv-tiles :nth-child(1){--svi:0}
#sv-body.enter .sv-schedlist :nth-child(2),#sv-body.enter .sv-tiles :nth-child(2){--svi:1}
#sv-body.enter .sv-schedlist :nth-child(3),#sv-body.enter .sv-tiles :nth-child(3){--svi:2}
#sv-body.enter .sv-schedlist :nth-child(4),#sv-body.enter .sv-tiles :nth-child(4){--svi:3}
#sv-body.enter .sv-schedlist :nth-child(5),#sv-body.enter .sv-tiles :nth-child(5){--svi:4}
#sv-body.enter .sv-schedlist :nth-child(6),#sv-body.enter .sv-tiles :nth-child(6){--svi:5}
#sv-body.enter .sv-schedlist :nth-child(7),#sv-body.enter .sv-tiles :nth-child(7){--svi:6}
#sv-body.enter .sv-schedlist :nth-child(8),#sv-body.enter .sv-tiles :nth-child(8){--svi:7}
.sv-champname{
  font-family:var(--disp);font-weight:700;font-size:11vh;color:var(--sv-spark);
  margin-top:2vh;text-transform:uppercase;line-height:.92;
}
.sv-champava{
  position:relative;width:24vh;height:28vh;border-radius:var(--radius);overflow:hidden;margin:3.5vh auto 0;
  border:4px solid #fff;box-shadow:0 0 50px oklch(1 0 0 / .35);
  background:var(--raised);
}
.sv-champava .sv-photo-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(20px) brightness(.4);transform:scale(1.15);
}
.sv-champava .sv-photo-fg{position:relative;width:100%;height:100%;object-fit:contain;display:block}

/* show bracket (tree, scaled for the projector) */
.sv-treewrap{overflow:auto;padding-top:1vh}
.sv-treewrap .tree{--tree-gap:2vw;--tree-rowh:4.6vh;--tree-colw:0px;min-width:0}
.sv-treewrap .tree-heads{margin-bottom:1.2vh}
/* connector elbows on the magenta field are white; decided edges go yellow */
.sv-treewrap .tcell:not(.last)::after{border-color:oklch(1 0 0 / .55)}
.sv-treewrap .tcell.fed::before{border-color:oklch(1 0 0 / .55)}
.sv-treewrap .tcell.decided:not(.last)::after{border-color:var(--sv-spark)}
.sv-colhead{
  font-family:var(--disp);font-weight:700;font-size:1.7vh;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;
  border-bottom:1px solid oklch(1 0 0 / .3);padding-bottom:.6vh;
}
/* bracket slots: solid white cards with plum text, like the printed bracket */
.sv-match{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px oklch(0.2 0.05 330 / .25)}
.sv-slot{
  display:flex;align-items:center;gap:.7vw;padding:1vh 1.1vw;
  font-family:var(--disp);font-size:2.1vh;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid oklch(0.85 0.05 330);
}
.sv-slot:last-child{border-bottom:none}
.sv-slot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-slot.winner{background:var(--sv-accent);color:var(--sv-on-accent)}
.sv-slot.winner span::after{
  content:"WIN";margin-left:1vw;
  font-family:var(--disp);font-weight:700;font-size:1.3vh;letter-spacing:.14em;
}
.sv-slot.tbd{color:oklch(0.55 0.03 330);font-style:normal;font-weight:600}
.sv-mini{width:2.4vh;height:3.1vh;border-radius:2px;object-fit:cover;object-position:center top;border:1px solid oklch(0.85 0.05 330);flex:0 0 auto}

/* show match — edge-anchored player figures (the Canva "VS" screen) */
.sv-matchline{
  font-weight:700;font-size:2vh;letter-spacing:.3em;color:#fff;text-transform:uppercase;text-align:center;
}
.sv-matchview .sv-face{position:relative;flex:1;width:100%;min-height:0}
/* each player figure stands near its screen edge, cropped by the violet bar
   (Canva proportions: torso from ~1/4 height down to the bar) */
.sv-matchview .sv-pcard{
  position:absolute;bottom:8.6vh;width:30vw;height:67vh;
  background:transparent;box-shadow:none;overflow:visible;
  transition:opacity var(--dur-2) var(--ease);
}
.sv-matchview .sv-face > .sv-pcard:first-child{left:1.2vw}
.sv-matchview .sv-face > .sv-pcard:last-child{right:1.2vw}
.sv-matchview .sv-photo{position:absolute;inset:0;width:100%;height:100%;background:transparent;overflow:hidden}
.sv-matchview .sv-photo-bg{display:none}
.sv-matchview .sv-photo-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 8%;display:block}
.sv-matchview .sv-photo::after{content:none}
/* knocked-out cutouts float straight on the field — the subject keeps its own
   colours, the (now transparent) background shows the pink. This is the normal
   path: player photos are background-removed on upload. */
.sv-matchview .sv-cut .sv-photo-fg{
  -webkit-mask-image:none;mask-image:none;
  object-fit:contain;object-position:center bottom}
/* fallback if a photo still has a background (knockout found no clean backdrop):
   fade only the outer edges into the field — never a colour tint, so the
   subject always keeps its real colours */
.sv-matchview .sv-pcard:not(.sv-cut) .sv-photo-fg{
  -webkit-mask-image:radial-gradient(80% 76% at 50% 42%, #000 64%, transparent 86%);
  mask-image:radial-gradient(80% 76% at 50% 42%, #000 64%, transparent 86%)}
.sv-matchview .sv-pcard.winner{box-shadow:none}
.sv-matchview .sv-pcard.leading{box-shadow:none}
.sv-matchview .sv-pcard.loser{opacity:.9;filter:none}
.sv-matchview .sv-pcard.loser .sv-photo-fg{filter:grayscale(.55) brightness(.72)}
.sv-matchview .sv-wintag{display:none !important}
/* name + score boxes on one line near the base of the figure, nudged inward
   like the deck — the boxes ride on the VS side of the name */
.sv-matchview .sv-plate{
  position:absolute;left:0;right:0;bottom:4.2vh;z-index:2;background:transparent;padding:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1.2vw;
}
.sv-matchview .sv-face > .sv-pcard:first-child .sv-plate{transform:translateX(8vw)}
.sv-matchview .sv-face > .sv-pcard:last-child .sv-plate{transform:translateX(-8vw);flex-direction:row-reverse}
/* clean geometric caps, like the Canva PLAYER NAME (not the grunge face) */
.sv-matchview .sv-pname{
  font-family:var(--body);font-weight:800;color:#fff;font-size:3.7vh;line-height:1.1;
  letter-spacing:.16em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw;
}
.sv-matchview .sv-pcard.winner .sv-pname{color:var(--sv-spark)}
/* center column: match label, big VS, now playing */
.sv-matchview .sv-vscol{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3.4vh;width:40vw;
}
.sv-matchview .sv-vscol .sv-track{margin-top:0;min-width:0;width:100%;align-self:stretch}
/* on the match screen NOW PLAYING is plain text on the field — no panel */
.sv-matchview .sv-track{background:transparent;border:none;padding:0}
.sv-matchview .sv-tracklab{color:#fff;font-size:2vh;letter-spacing:.4em}
.sv-matchview .sv-trackval{font-size:3.6vh;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:1vh}
.sv-pips{display:flex;gap:.9vw}
.sv-pip{width:2.4vh;height:2.4vh;border:2px solid oklch(1 0 0 / .85);border-radius:2px;background:transparent}
.sv-pip.won{background:var(--sv-spark);border-color:var(--sv-spark)}
.sv-pip.landed{animation:pipland .5s cubic-bezier(.22,1,.36,1)}
@keyframes pipland{
  0%{transform:scale(1.9);box-shadow:0 0 0 1.4vh oklch(0.7 0.25 350 / .5)}
  100%{transform:scale(1);box-shadow:0 0 0 0 oklch(0.7 0.25 350 / 0)}
}
.sv-wintag{
  position:absolute;top:2.2vh;left:0;z-index:2;background:var(--sv-spark);color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:1.9vh;letter-spacing:.22em;text-transform:uppercase;
  padding:.8vh 1.6vw .8vh 1.8vw;display:none;
}
.sv-pcard.winner .sv-wintag{display:block}
.sv-pcard.winner{box-shadow:0 0 0 4px var(--sv-spark),0 18px 60px oklch(0.7 0.25 350 / .3)}
.sv-pcard.leading{box-shadow:0 0 0 3px oklch(1 0 0 / .6),0 18px 50px oklch(0.14 0.05 330 / .5)}
.sv-pcard.loser{opacity:.5;filter:grayscale(.4)}
.sv-vs{font-family:var(--disp);font-weight:700;font-size:9vh;color:#fff;align-self:center;line-height:.9}
/* NOW PLAYING panel — glassy white on the magenta field */
.sv-track{
  margin-top:3.5vh;align-self:center;min-width:46vw;text-align:center;
  background:oklch(1 0 0 / .12);border:1px solid oklch(1 0 0 / .3);border-radius:var(--radius);
  padding:1.6vh 3vw;
}
.sv-tracklab{font-size:1.5vh;font-weight:700;letter-spacing:.35em;color:var(--sv-spark);text-transform:uppercase}
.sv-trackval{font-size:3vh;font-weight:700;margin-top:.5vh;color:#fff}

/* show match — spotlight strip + tile grid (several matches live at once) */
/* spotlight (one big match + a strip of others): shorter figures, no bar */
.sv-matchview.with-strip .sv-botbar{display:none}
.sv-matchview.with-strip .sv-pcard{height:56vh;width:26vw;bottom:0}
.sv-matchview.with-strip .sv-plate{bottom:2.4vh}
.sv-matchview.with-strip .sv-plate{transform:none !important}
.sv-matchview.with-strip .sv-vscol{top:36%;width:34vw;gap:1.8vh}
.sv-matchview.with-strip .sv-vsword{font-size:min(9vw,8rem)}
.sv-strip{
  flex:0 0 auto;display:flex;gap:1.2vw;justify-content:center;
  padding-top:1.6vh;
}
.sv-strip .sv-tile{flex:0 1 26vw}
.sv-tilewrap{justify-content:center}
.sv-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(30vw,1fr));
  gap:1.6vw;align-content:center;justify-items:stretch;
  max-width:88vw;margin:0 auto;width:100%;
}
.sv-tile{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 8px 24px oklch(0.14 0.05 330 / .3);
}
.sv-tile.final{box-shadow:0 0 0 3px var(--sv-spark),0 8px 24px oklch(0.14 0.05 330 / .3)}
.sv-tlabel{
  display:flex;align-items:center;justify-content:space-between;gap:1vw;
  padding:1vh 1.2vw;background:var(--sv-accent);
  font-size:1.5vh;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sv-on-accent);
}
.sv-tlabel .live{margin-right:0;background:var(--sv-band-hi)}
.sv-tfinal{
  font-family:var(--disp);font-weight:700;font-size:1.5vh;letter-spacing:.2em;
  color:var(--sv-band-hi);text-transform:uppercase;
}
.sv-tside{
  display:flex;align-items:center;gap:1vw;
  padding:1.2vh 1.2vw;border-bottom:2px solid oklch(0.88 0.04 330);
}
.sv-tside:last-child{border-bottom:none}
.sv-tface{width:5.6vh;height:7.4vh;object-fit:cover;object-position:center top;border-radius:2px;border:1px solid oklch(0.85 0.05 330);flex:0 0 auto}
.sv-tname{
  font-family:var(--disp);font-weight:700;font-size:2.9vh;text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.sv-tside.winner{background:var(--sv-accent)}
.sv-tside.winner .sv-tname,.sv-tside.winner .sv-tscore{color:var(--sv-on-accent)}
.sv-tscore{
  margin-left:auto;font-family:var(--disp);font-weight:700;font-size:4.4vh;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}

/* show standings (round robin) */
/* heading + table read as one centred block, not a top-pinned label over a
   floating table (standwrap must not grow to swallow the gap) */
.sv:has(> .sv-standwrap){justify-content:center;gap:3.4vh}
.sv-standwrap{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;overflow:auto}
.sv-standings{
  width:min(88vw,140vh);border-collapse:collapse;
  background:#fff;box-shadow:0 10px 30px oklch(0.14 0.05 330 / .3);
}
.sv-standings th,.sv-standings td{
  padding:1.4vh 1.6vw;text-align:center;border-bottom:2px solid oklch(0.88 0.04 330);
  font-size:2.6vh;font-variant-numeric:tabular-nums;color:var(--ink);
}
.sv-standings thead th{background:var(--sv-accent)}
.sv-standings th{
  font-family:var(--disp);font-weight:700;font-size:1.8vh;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sv-on-accent);
}
.sv-standings .name{text-align:left}
.sv-standings td.name{font-family:var(--disp);font-weight:700;text-transform:uppercase;max-width:34vw}
.sv-standings td.name .sv-mini{vertical-align:middle;margin-right:1vw}
.sv-standings td.name span{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:28vw}
.sv-standings .sv-mini{width:3.4vh;height:4.4vh}
.sv-standings tr:last-child td{border-bottom:none}
/* the leader is the one thing this screen exists to say — solid accent row */
.sv-standings tr.leader td{
  background:var(--sv-accent);color:var(--sv-on-accent);border-bottom-color:var(--sv-accent-press);
}
.sv-standings tr.leader .sv-mini{border-color:oklch(1 0 0 / .5)}
.sv-standings td.pts{font-family:var(--disp);font-weight:900}

/* ---- match on the stage ---- */
.sv-matchview .sv-stage-body{justify-content:center}
.sv-matchview .sv-vsword{font-family:var(--disp);font-weight:800;color:#fff;font-size:min(13vw,12rem);line-height:1}
/* players slide in from opposite edges; VS pops */
#sv-body.enter .sv-face .sv-pcard:first-child{animation:svslideL .7s cubic-bezier(.2,.9,.3,1) both}
#sv-body.enter .sv-face .sv-pcard:last-child{animation:svslideR .7s cubic-bezier(.2,.9,.3,1) both}
#sv-body.enter .sv-face .sv-vsword{animation:svpop .5s cubic-bezier(.22,1.4,.4,1) both;animation-delay:.34s}
@keyframes svslideL{from{opacity:0;transform:translateX(-16vw)}to{opacity:1;transform:none}}
@keyframes svslideR{from{opacity:0;transform:translateX(16vw)}to{opacity:1;transform:none}}
@keyframes svpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

#sv-peek{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:40;
  background:oklch(0.14 0.01 330 / .92);border:1px solid oklch(1 0 0 / .35);border-bottom:none;
  padding:.4vh 1.5vw;font-size:1.4vh;color:oklch(1 0 0 / .72);
  opacity:0;transition:opacity .3s;
}
body.show-mode:hover #sv-peek{opacity:1}
.confetti{position:fixed;top:-4vh;z-index:60;width:1.2vh;height:2.4vh;opacity:.9;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* "reconnecting" chip on the broadcast — shown only while a cloud event's poll
   is failing, so the operator knows the big screen may be stale */
.sv-netstate{
  position:fixed;top:2vh;right:2vw;z-index:50;
  display:flex;align-items:center;gap:.8vh;
  padding:.7vh 1.4vw;border-radius:999px;
  background:oklch(0.14 0.01 330 / .82);border:1px solid oklch(1 0 0 / .28);
  font-size:1.4vh;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:oklch(1 0 0 / .8);
}
.sv-netstate::before{
  content:"";width:1.1vh;height:1.1vh;border-radius:50%;
  background:oklch(0.78 0.16 60);animation:pulse 1.6s infinite;
}

/* ---- shared Canva stage scaffold ---- */
.sv-stage{position:relative;overflow:hidden}
.sv-defs{position:absolute}
.sv-stage-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sv-field{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 72% 42%, var(--sv-field-1) 0%, var(--sv-field-2) 46%, var(--sv-field-3) 100%)}
.sv-smoke{position:absolute;inset:-15%;opacity:.5;mix-blend-mode:screen}
.sv-smoke i{position:absolute;display:block;border-radius:50%;filter:blur(46px)}
.sv-smoke i:nth-child(1){width:52vw;height:52vw;left:-6vw;bottom:-14vw;
  background:radial-gradient(circle, var(--sv-haze-1) 0%, transparent 66%);animation:svdrift 34s ease-in-out infinite}
.sv-smoke i:nth-child(2){width:40vw;height:40vw;right:2vw;top:6vw;
  background:radial-gradient(circle, var(--sv-haze-2) 0%, transparent 64%);animation:svdrift 26s ease-in-out infinite reverse}
.sv-smoke i:nth-child(3){width:34vw;height:34vw;left:34vw;bottom:-6vw;
  background:radial-gradient(circle, var(--sv-haze-3) 0%, transparent 62%);animation:svdrift 44s ease-in-out infinite}
.sv-shard{position:absolute;right:0;bottom:0;width:34vw;height:30vw;z-index:1;
  clip-path:polygon(100% 22%, 100% 100%, 20% 100%);
  background:var(--sv-shard)}
.sv-grid{position:absolute;top:26vh;left:2.6vw;z-index:1;pointer-events:none}
.sv-grid .sv-marks{width:auto;height:min(46vh,420px)}
.sv-logowrap{position:absolute;z-index:2;left:0;right:0;display:flex;justify-content:center}
.sv-logowrap.top{top:5vh}
.sv-logowrap.bl{left:5vw;right:auto;bottom:6vh;justify-content:flex-start}
.sv-logorow{display:flex;align-items:center;gap:2.2vw;color:#fff}
.sv-lg-carven{height:2.05vw;width:auto;display:block}
/* multicolor artwork rendered as a solid-white knockout for the pink field */
.sv-lg-white{filter:brightness(0) invert(1)}
/* the hourglass between CARVEN and ALAT turns over, holding at each end */
.sv-lg-x{width:2.2vw;height:2.2vw;opacity:.92;transform-origin:center;animation:svhourglass 4.2s var(--ease) infinite}
@keyframes svhourglass{0%,26%{transform:rotate(0)}50%,76%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.sv-lg-alat{height:2.7vw;width:auto;display:block}
.sv-stage-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.sv-footer{position:absolute;z-index:2;bottom:4.5vh;left:0;right:0;text-align:center;
  font-family:var(--body);font-weight:700;font-size:1.15vw;letter-spacing:.22em;color:#fff;text-transform:uppercase}
/* grunge on the big display caps */
.sv-mega.sv-stagehead,.sv-stagehead,.sv-winnerword,.sv-vsword{filter:url(#svGrunge)}
/* ambient loops */
@keyframes svdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,-3%,0) scale(1.14)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes svtwinkle{0%,100%{opacity:.4}50%{opacity:1}}
/* the scatter marks twinkle: every other mark breathes on an offset */
/* the +○ו scatter marks twinkle wherever they appear (grid, home/countdown
   decor, thanks) — every glyph breathes on a staggered offset */
.sv-marks *{animation:svtwinkle 3.4s ease-in-out infinite}
.sv-marks *:nth-child(3n){animation-duration:4.6s;animation-delay:.6s}
.sv-marks *:nth-child(3n+1){animation-delay:1.2s}
.sv-marks *:nth-child(4n){animation-duration:5.2s;animation-delay:.3s}

/* ---- title card ---- */
.sv-stagecard .sv-stagehead{font-family:var(--disp);font-weight:800;color:#fff;
  font-size:min(17vw,15rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;
  max-width:62vw;text-shadow:0 0 1px rgba(255,255,255,.25)}
.sv-stagecard .sv-stagesub{font-family:var(--body);font-weight:800;color:#fff;
  letter-spacing:.16em;text-transform:uppercase;font-size:1.7vw;margin-top:2vh}
/* the stage background never choreographs; only chrome + content do */
#sv-body.enter > .sv-stage > .sv-stage-bg{animation:none}
#sv-body.enter > .sv-stage > .sv-grid{animation:svrise .6s cubic-bezier(.22,1,.36,1) both;animation-delay:.28s}
#sv-body.enter > .sv-stage > .sv-logowrap{animation:svrise .55s cubic-bezier(.22,1,.36,1) both;animation-delay:.12s}
#sv-body.enter > .sv-stage > .sv-stage-body{animation:svrise .6s cubic-bezier(.22,1,.36,1) both;animation-delay:.05s}
#sv-body.enter > .sv-stage > .sv-footer{animation:svrise .55s cubic-bezier(.22,1,.36,1) both;animation-delay:.4s}
#sv-body.enter > .sv-stage > .sv-shard,
#sv-body.enter .sv-shard{animation:svshard .6s cubic-bezier(.22,1,.36,1) both;animation-delay:.34s}
@keyframes svrise{from{opacity:0;transform:translateY(2.6vh)}to{opacity:1;transform:none}}
@keyframes svshard{from{opacity:0;transform:translate(18%,18%)}to{opacity:1;transform:none}}

/* ---- winner ---- */
.sv-winner .sv-stage-body{align-items:flex-start;justify-content:flex-start;text-align:left;
  padding:11vh 0 0 5vw}
.sv-winner .sv-winnerrow{display:flex;align-items:center;gap:2.4vw;flex-wrap:nowrap}
.sv-winner .sv-winnerword{font-family:var(--disp);font-weight:800;color:#fff;
  font-size:min(16vw,13rem);line-height:.86;text-transform:uppercase;flex:0 0 auto}
.sv-winner .sv-champname{font-family:var(--disp);font-weight:800;color:var(--sv-spark);
  font-size:5.2vw;text-transform:uppercase;margin-top:2vh;line-height:.95}
.sv-chevrons{color:#fff;font-size:2.2vw;letter-spacing:.1em;overflow:hidden;white-space:nowrap;flex:0 0 auto}
.sv-playicon{width:3.6vw;height:2.4vw;flex:0 0 auto}
/* subtitle + a second marching-arrow row, like the Canva winner deck */
.sv-winsub{display:flex;align-items:center;gap:1.6vw;margin-top:2.2vh}
/* tighter subtitle line under the winner (less tracking, a touch smaller) */
.sv-winsub .sv-stagesub{margin-top:0;letter-spacing:.08em;font-size:2.4vh}
.sv-winarrows{color:#fff;font-size:1.9vw;letter-spacing:.12em;white-space:nowrap;
  animation:svmarch 1.1s linear infinite}
/* the champion floats big on the right, standing on the screen bottom — same
   treatment as the match figures (knocked-out cutout keeps its real colours) */
.sv-winner .sv-champfig{position:absolute;right:4vw;bottom:0;width:30vw;height:76vh;z-index:1;pointer-events:none}
.sv-winner .sv-champfig .sv-photo-fg{width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* fallback for a photo that still has a background: fade edges only, no tint */
.sv-winner .sv-champfig:not(.sv-cut) .sv-photo-fg{object-fit:cover;object-position:center 10%;
  -webkit-mask-image:radial-gradient(80% 76% at 50% 42%, #000 64%, transparent 86%);
  mask-image:radial-gradient(80% 76% at 50% 42%, #000 64%, transparent 86%)}
#sv-body.enter .sv-champfig{animation:svslideR .8s cubic-bezier(.2,.9,.3,1) both;animation-delay:.3s}
/* the winner deck carries the scatter grid top-right (not left) */
.sv-winner .sv-grid{left:auto;right:3vw;top:7vh}
/* clouds: white/lavender wisp top-left (WINNER rises from it), violet cloud bottom-right */
.sv-clouds{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sv-clouds i{position:absolute;display:block;border-radius:50%;filter:blur(34px)}
.sv-cl1{width:42vw;height:42vw;left:-12vw;top:-18vw;mix-blend-mode:screen;
  background:radial-gradient(circle at 42% 42%, oklch(1 0 0 / .85), oklch(0.82 0.10 300 / .45) 46%, transparent 68%);
  animation:svclouddrift 26s ease-in-out infinite}
.sv-cl2{width:46vw;height:46vw;right:-10vw;bottom:-20vw;
  background:radial-gradient(circle at 50% 50%, oklch(0.56 0.17 285 / .92), oklch(0.46 0.14 292 / .5) 48%, transparent 72%);
  animation:svclouddrift 34s ease-in-out infinite reverse}
@keyframes svclouddrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.09)}}
/* whoosh: the wordmark blur-slides in from the left and hard-stops */
#sv-body.enter .sv-winnerword{animation:svwhoosh 1.5s cubic-bezier(.16,.84,.3,1) both}
@keyframes svwhoosh{
  0%{opacity:0;transform:translateX(-42vw) scaleX(1.8);filter:url(#svGrunge) blur(20px)}
  55%{opacity:1;filter:url(#svGrunge) blur(4px)}
  100%{opacity:1;transform:none;filter:url(#svGrunge) blur(0)}
}
/* chevrons march */
.sv-chevrons{animation:svmarch 1.1s linear infinite}
@keyframes svmarch{from{transform:translateX(-1.2em)}to{transform:translateX(0)}}

/* ---- bracket on the stage ---- */
.sv-treewrap .sv-stage-body{justify-content:center;padding:12vh 3vw 8vh}
.sv-treewrap .tree-grid{width:94vw}
/* fit a 16-slot tree inside the stage: compact slots, tighter rows, and no
   marks column behind the bracket (the Canva bracket keeps its corners clean) */
.sv-treewrap .tree{--tree-rowh:3.9vh}
.sv-treewrap .sv-slot{padding:.55vh .9vw;font-size:1.8vh}
.sv-treewrap .sv-grid{display:none}
/* the whole grid never uses the generic svin; slots cascade instead */
#sv-body.enter > .sv-treewrap .tree-grid{animation:none}
/* col 1 = outer P-slots first, converging toward the centre final */
#sv-body.enter > .sv-treewrap .tcell{
  animation:svcascade .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.1s + var(--col,1) * .1s)}
@keyframes svcascade{from{opacity:0;transform:translateY(1.6vh) scale(.96)}to{opacity:1;transform:none}}

/* ---- the two-part violet footer bar (Canva match + bracket) ---- */
.sv-botbar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;height:8.6vh;
  display:flex;align-items:center;justify-content:space-between;padding:0 3.6vw;
  background:var(--sv-bar);color:#fff;
}
.sv-bb-left{font-family:var(--body);font-weight:700;font-size:2vh;letter-spacing:.22em;text-transform:uppercase;
  max-width:46vw;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sv-bb-right{font-family:var(--body);font-weight:700;font-size:1.9vh;letter-spacing:.22em;text-transform:uppercase}

/* ---- mirrored bracket (Canva "advancing slots" board) ---- */
.sv-mirror .sv-stage-body{justify-content:center;padding:13vh 2.5vw 15vh}
.sv-mirror .sv-grid{display:none}
.sv-mirror .sv-matchline{position:absolute;top:4.5vh;left:3vw;right:auto;text-align:left}
/* CARVEN top-centre, ALAT bottom-centre — the printed-bracket lockup */
.sv-brk-top{position:absolute;top:4vh;left:0;right:0;display:flex;justify-content:center;z-index:3}
.sv-brk-carven{height:4.4vw;width:auto}
.sv-brk-alat{position:absolute;bottom:10.5vh;left:0;right:0;display:flex;justify-content:center;z-index:3}
.sv-brk-alat .sv-lg-alat{height:6vw}
.sv-brk{display:flex;align-items:stretch;justify-content:space-between;gap:1.1vw;width:96vw;flex:1;min-height:0}
.sv-bcol{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
.sv-bcol.sv-bp,.sv-bcol.sv-bq,.sv-bcol.sv-bs{justify-content:space-around}
.sv-bcol.sv-bf{justify-content:center}
.sv-bx{
  background:#fff;border-radius:3px;box-shadow:0 6px 16px oklch(0.2 0.05 330 / .22);
  display:flex;align-items:center;gap:.6vw;padding:0 1.1vw;min-height:5.6vh;
  font-family:var(--disp);font-weight:700;font-size:2vh;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);
}
.sv-bx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sv-bx.tbd{color:oklch(0.55 0.03 330);font-weight:600}
.sv-bx.won{background:var(--sv-accent);color:var(--sv-on-accent)}
.sv-bx .sv-mini{width:2.2vh;height:2.8vh}
/* two-slot matchup cards on the outer columns share a thin magenta divider */
.sv-pair{display:flex;flex-direction:column;gap:2px}
.sv-pair .sv-slot2{border-radius:0}
.sv-pair .sv-slot2:first-child{border-radius:3px 3px 0 0}
.sv-pair .sv-slot2:last-child{border-radius:0 0 3px 3px}
.sv-bf .sv-fpair{width:100%}
/* the board reveals column by column, outer edges first, inward to the final */
#sv-body.enter > .sv-mirror .sv-bcol{animation:svcascade .5s cubic-bezier(.22,1,.36,1) both}
#sv-body.enter > .sv-mirror .sv-bp{animation-delay:.12s}
#sv-body.enter > .sv-mirror .sv-bq{animation-delay:.24s}
#sv-body.enter > .sv-mirror .sv-bs{animation-delay:.36s}
#sv-body.enter > .sv-mirror .sv-bf{animation-delay:.48s}

/* ---- thank-you outro ---- */
.sv-thanks{position:relative;overflow:hidden}
.sv-thanks-stage{position:absolute;inset:0;z-index:0}
.sv-thanks-stage .sv-field{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 60% 40%, var(--sv-field-1), var(--sv-field-2) 60%, var(--sv-field-3))}
.sv-thanks-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:svken 18s ease-in-out infinite alternate}
@keyframes svken{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-2%)}}
.sv-thanks-marks{position:absolute;top:18vh;right:6vw;opacity:.85}
.sv-thanks-stage .sv-thanks-marks *{animation:svtwinkle 3.4s ease-in-out infinite}
/* left magenta angled panel */
.sv-thanks-panel{position:absolute;z-index:2;inset:0 auto 0 0;width:46vw;
  background:var(--sv-accent);clip-path:polygon(0 0, 100% 0, 84% 100%, 0 100%);
  display:flex;flex-direction:column;justify-content:center;gap:3vh;padding:0 6vw}
.sv-thanks-brand{margin-bottom:2vh}
/* the CARVEN mark is a white knockout everywhere; on the gold house panel it
   would be low-contrast, so flip it to a dark knockout when not the ALAT theme */
body.show-mode #app:not(.theme-alat) .sv-thanks-brand .sv-lg-white{filter:brightness(0)}
.sv-thanks-head{font-family:var(--body);font-weight:800;color:var(--sv-on-accent);
  font-size:4.5vw;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.sv-thanks-cta{align-self:flex-start;border:2px solid var(--sv-on-accent);color:var(--sv-on-accent);
  font-family:var(--body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:1.3vw;padding:1.1vh 2vw}
/* entrances: panel slides in from the left, CTA outline draws on */
#sv-body.enter .sv-thanks-panel{animation:svpanel .8s cubic-bezier(.16,.84,.3,1) both}
#sv-body.enter .sv-thanks-cta{animation:svdraw .6s ease both;animation-delay:.7s}
/* the thanks backdrop is a static field/cover, not a choreographed block */
#sv-body.enter > .sv-thanks > .sv-thanks-stage{animation:none}
@keyframes svpanel{from{transform:translateX(-102%)}to{transform:none}}
@keyframes svdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion: reduce){
  .sv-smoke i,.sv-marks *,.sv-chevrons,.sv-lg-x,.sv-clouds i,
  .sv-thanks-cover{animation:none !important}
  #sv-body.enter > .sv-stage > *,
  #sv-body.enter .sv-face .sv-pcard,#sv-body.enter .sv-face .sv-vsword,
  #sv-body.enter > .sv-treewrap .tcell,
  #sv-body.enter .sv-winnerword,#sv-body.enter .sv-champfig,.sv-winarrows,
  #sv-body.enter .sv-thanks-panel,#sv-body.enter .sv-thanks-cta{
    animation:svfade .3s ease both !important}
  @keyframes svfade{from{opacity:0}to{opacity:1}}
}

/* ---------------- motion & small screens ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .confetti{display:none}
}
@media (max-width: 720px){
  .pagehead{flex-direction:column;align-items:flex-start;gap:var(--space-lg)}
  h1{font-size:var(--text-xl)}
  .trow{display:grid;grid-template-columns:1fr auto;gap:var(--space-md)}
  .trow > .gtag{grid-row:1;grid-column:1;justify-self:start}
  .trow > .stagechip{grid-row:1;grid-column:2;justify-self:end;margin-left:0}
  .trow > .trow-main{grid-row:2;grid-column:1 / -1}
  .trow-name{white-space:normal}
  .workhead .stagechip{margin-left:0}
  .tabs{gap:var(--space-lg);overflow-x:auto}
  .logosub{display:none}
  .scorectl{gap:var(--space-lg)}
  #sitenav{gap:var(--space-md)}
  #sitenav .btn-cta{padding:8px 12px;font-size:var(--text-xs);white-space:nowrap}
  .workhead h1{font-size:var(--text-lg)}
  .tabhead .btn-ghost{margin-left:0}
}

.dashfilters{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.dashfilters .chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filterchip{border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:4px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.filterchip:hover{color:var(--text)}
.filterchip.on{border-color:var(--magenta);color:var(--magenta)}
.dashfilters .daterange{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem}
.dashfilters .daterange input{font:inherit}