/* =========================================================
   Roundnet Squads — Dark Theme System (Apple/Tesla vibe)
   COMPLETE styles.css (standardized)
   ========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  /* Layout */
  --container: clamp(960px, 92vw, 1440px);

  /* Brand */
  --primary: #3B82F6;
  --primary-ink: #0B1220;

  /* Surfaces (dark) */
  --bg: #0d1c3a;
  --bg-elev: #131d35;
  --card: #12213d;
  --border: rgba(148,163,184,.18);
  --ink: #c1921b;
  --muted: #748398;

  /* Accents */
  --win: #22c55e;
  --error: #ef4444;
  --warn: #f59e0b;

  /* Radii & shadows */
  --r-lg: 16px;
  --r-sm: 10px;
  --shadow-1: 0 4px 18px rgba(0,0,0,.24);
  --shadow-2: 0 10px 36px rgba(0,0,0,.28);

  /* Bracket sizing */
  --col-w: 400px;
  --card-w: 450px;
  --name-col: 190px;
  --score-w: 42px;
  --row-h: 28px;
  --card-min-h: 140px;
  --gap-x: 156px;
  --gap-y: 36px;
}

/* ---------------- Base ---------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(1200px 600px at 95% -10%, rgba(96,165,250,.12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container{max-width:var(--container);margin:0 auto;padding:16px}
a{color:inherit}

/* ---- Full-bleed / fluid layout helpers (safe) ---- */
.container--fluid{max-width:100vw}
.panel--bleed{
  /* pull the panel edges out to the viewport edges */
  margin-left:  calc((100vw - var(--container)) / -2);
  margin-right: calc((100vw - var(--container)) / -2);
  /* keep the same inner padding as a normal .panel so text lines up */
  padding-left: 16px;
  padding-right: 16px;
}

/* Bleed only to the right: left edge stays aligned with container */
.panel--bleed-right{
  margin-right: calc((100vw - var(--container)) / -2);
}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(15,23,42,.75);
  border-bottom: 1px solid var(--border);
  transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled{background: rgba(15,23,42,.9)}
.nav{display:flex;align-items:center;gap:18px}
.brand{
  font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--ink);
  padding:8px 10px; border-radius:12px;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,0));
}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.menu>li>a,.menu>li>.dd-btn{
  color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:10px;
  background: transparent; border: 0; cursor: pointer; font: inherit;
}
.menu>li>a:hover,.menu>li>.dd-btn:hover{background: rgba(59,130,246,.12)}

.auth{margin-left:auto;display:flex;gap:8px;align-items:center}
.who{color:var(--muted);font-size:.92rem}


/* --- Mobile Nav --- */
.menu-toggle {
  display: none; /* hidden by default (desktop) */
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  margin-left: auto; /* push it to the right */
}


/* ===== Mobile utility classes & global portrait tweaks ===== */

/* A. Simple helpers you can use anywhere in templates */
.hide-sm { display: none !important; }
.show-sm { display: inline-flex !important; }
.stack-sm { display: flex; flex-direction: column; gap: .6rem; }
.block-sm { display: block; width: 100%; }     /* e.g., make buttons full-width on phones */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nowrap { white-space: nowrap; }
.wrap   { white-space: normal; }

/* B. Portrait comfort defaults */
@media (max-width: 600px){
  /* spacing & readability */
  .container{ padding: 10px; }
  .panel{ padding: 12px; border-radius: 12px; }
  .section h1{ font-size: 28px; line-height: 1.15; }
  .section h2{ font-size: 20px; }
  .heading-main{ font-size: 2rem; }

  /* big tap targets */
  .btn, input, select, textarea { min-height: 44px; }

  /* “bars” and inline tool rows collapse neatly */
  .bar, .inline, .form-actions { flex-wrap: wrap; gap: .5rem; }
  .bar, .inline { display: flex; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { flex: 1 1 auto; } /* buttons fill width nicely */

  /* tables: never squish, allow horizontal scroll */
  table{ display:block; width:100%; overflow-x:auto; }
  th, td { padding: 8px 10px; }

  /* match-edit: ensure the pairs grid stacks (safety net) */
  .pairs-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* C. Optional: extra-narrow phones (e.g., 375px width) */
@media (max-width: 420px){
  .section h1{ font-size: 24px; }
  .heading-main{ font-size: 1.75rem; }
}


/* When screen is small */
@media (max-width: 768px) {
  .menu {
    display: none; /* hide menu by default */
    flex-direction: column; /* vertical stack */
    gap: 0;
    background: var(--bg-elev);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .menu.open {
    display: flex; /* show when toggled */
  }

  .menu-toggle {
    display: block; /* show hamburger */
  }

  .auth {
    display: none; /* optional: hide "Signed in as..." on tiny screens */
  }
}


/* Dropdowns */
.has-dd{position:relative}
.dropdown{
  position:absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 8px; display: grid; gap: 2px; opacity: 0; transform: translateY(6px) scale(.98);
  pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.has-dd:hover .dropdown, .has-dd.open .dropdown{
  opacity:1; transform: translateY(0) scale(1); pointer-events:auto;
}
.dropdown-right{ right:0; left:auto; }
.dropdown a{
  color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px; display:block;
}
.dropdown a:hover{background: rgba(59,130,246,.14)}

.nav .has-dd.open .dropdown { display: block; }

/*-----------------Headings------------------ */

.heading-main {
  color: #d2b383;
  font-size: 2.5rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.sub-heading-a {
  font-size: 1.5rem;
  text-align: left;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border); border-radius:12px;
  padding:.5rem .8rem; text-decoration:none; cursor:pointer;
  color:var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.btn.primary{
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  color:#0b1220; border-color: transparent; font-weight:700;
}
.btn.ghost:hover{background: rgba(255,255,255,.06)}
.btn.danger{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12)}
.btn.tiny{padding:.35rem .6rem; border-radius:10px}

.btn.is-disabled{
  opacity:.55;
  pointer-events:none;
  cursor:default;
}

.btn.danger { background: #b00020; color: #fff; }
.btn.danger[disabled] { opacity: .6; cursor: not-allowed; }


/* ---------------- Panels / Cards ---------------- */
.page{padding-top:10px}
.panel{
  background: var(--card); border:1px solid var(--border); border-radius: var(--r-lg);
  padding:16px; box-shadow: var(--shadow-1);
}
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--r-lg);
  padding:14px 16px; text-decoration:none; color:inherit; display:block; box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.panel-head{padding:12px 12px 6px;border-bottom:1px solid var(--border)}
.panel-head h3{margin:0}

/* ---------------- Text helpers ---------------- */
.muted{color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}
.chip{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.1rem .45rem;margin:.1rem .2rem;background:rgba(255,255,255,.06)}
.section{margin:18px 0}
.section h1{font-size:40px;line-height:1.1;margin:.2rem 0 8px;font-weight:800}
.section h2{font-size:24px;line-height:1.2;margin:0 0 8px;font-weight:700}

/* ---------------- Layout utilities ---------------- */
.inline{display:inline-flex;gap:.6rem;align-items:center}
.stack label{display:block;margin:.55rem 0}
.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}
.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.w80{width:80px}.w100{width:100px}.w120{width:180px}.w160{width:180px}

/* ---------------- Form controls (generic) ---------------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="file"],
select,
textarea{
  width:100%;
  padding:.45rem .55rem;
  border-radius:10px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  color:var(--ink);
  outline:none;
}
input:disabled, select:disabled, textarea:disabled{opacity:.55;cursor:not-allowed}

/* ---------------- Flash messages ---------------- */
.flashes{margin:.75rem 0; list-style:none; padding:0}
.flash{padding:.55rem .8rem;border-radius:10px;border:1px solid var(--border)}
.flash.success{background: rgba(34,197,94,.12)}
.flash.warning{background: rgba(245,158,11,.12)}
.flash.error{background: rgba(239,68,68,.12)}

/* ---------------- Footer ---------------- */
.site-footer{margin-top:28px;border-top:1px solid var(--border);background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.02))}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.support.tiny{
  font-size:.9rem;color:var(--ink);text-decoration:none;
  border:1px solid rgba(250,204,21,.35); background: rgba(250,204,21,.08);
  border-radius:999px; padding:.25rem .6rem;
}
.support.tiny:hover{background: rgba(250,204,21,.14)}

/* ---------------- Home / Hero ---------------- */
.hero{
  display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start;margin:8px 0 16px
}
.hero-left .site-logo{
  height:96px;border-radius:12px;object-fit:cover;display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:.5rem;background:#fff
}
.tagline{color:#8696ad;margin:.25rem 0 .75rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-right .panel{margin:0 0 .75rem}
.live-list{list-style:none;margin:0;padding:0}
.live-list li{padding:.35rem 0;border-top:1px dashed rgba(148,163,184,.25)}
.live-list li:first-child{border-top:0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0 16px}

/* Donate */
.donate-link{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;
  border:1px solid #f3e28a;border-radius:8px;background:#fffbe6;text-decoration:none;color:#1f2937
}
.donate-link:hover{background:#fff6c4}
.bmc-logo{width:18px;height:18px;border-radius:4px;display:block}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:10px;padding:.5rem .75rem;background:var(--card);margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:600}

/* ---------------- Tables (matchups & generic) ---------------- */
/* Pool Matchups table fixed column layout */
.matchups-table { table-layout: fixed; }
.matchups-table col.col-1 { width: 40%; }  /* left edge = 0% */
.matchups-table col.col-2 { width: 35%; }  /* starts at ~40% */
.matchups-table col.col-3 { width: 25%; }  /* starts at ~75% */

/* Right-align header and cells for the View column */
.matchups-table th:nth-child(3),
.matchups-table td:nth-child(3) { text-align: right; }


table{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
th,td{border-bottom:1px solid var(--border);padding:10px 12px}
th{background: rgba(255,255,255,.04); text-align:left; color:var(--ink)}
tr:last-child td{border-bottom:0}

/* Nice table modifier (for results/admin order lists) */
.nice{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.nice th,.nice td{border-bottom:1px solid var(--border);padding:.55rem .65rem}
.nice thead th{background:rgba(255,255,255,.04)}
.rank{width:110px;white-space:nowrap}

/* ---------------- Filters bar ---------------- */
.bar{display:flex;gap:1rem;align-items:center;margin:.25rem 0 1rem;flex-wrap:wrap}
.bar select{
  background: var(--bg-elev); color: var(--ink); border:1px solid var(--border);
  padding:.35rem .5rem; border-radius:10px;
}

/* --- Matchups (pool gating) helpers --- */
.lock-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.1rem .45rem;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.85rem;
  background:rgba(239,68,68,.12); /* red-500 tint */
  color:#fecaca;                   /* red-200 text */
}

tr.is-locked { opacity: .95; } /* very subtle; keep legible */

/* Standings: make the panel hug the table width */
.panel.fit { display: inline-block; }

/* Let this table size itself (not forced to 100%) */
.table-auto table { width: auto; }

/* Right-align numbers for easier scanning */
.num { text-align: right; }



/* =========================================================
   Bracket Layout (dynamic width + column count)
   ========================================================= */
.bracket-wrap{
  position:relative;
  overflow-x:auto;             /* horizontal scroll on narrow screens */
  padding-bottom: 12px;
}
.bracket-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(var(--cols, 4), var(--col-w));
  column-gap: var(--gap-x);
  align-items:start;
  padding-bottom: 24px;
}
.bracket-col{min-width:var(--col-w)}
.bracket-col h2{margin:.25rem 0 .85rem}

/* Stack of matches within a round */
.col-stack{
  display:flex;
  flex-direction:column;
  gap:var(--gap-y);
  position:relative;
}

/* Match Card */
.match-card{
  position:relative;
  width:var(--card-w);
  min-height: var(--card-min-h);
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px 14px;
  box-shadow: var(--shadow-1);
  display:grid;
  grid-template-columns: var(--name-col) repeat(4, var(--score-w));
  column-gap: 12px;
  row-gap: 10px;
}
.header{
  grid-column: 1 / 2;
  grid-row: 1 / span 3;
  display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0;
}
.header .side{
  display:flex; align-items:center; gap:.5rem; min-width:0; height: var(--row-h);
}
.seed{color:#7ea2ff;font-weight:700;display:inline-block;min-width:1.5ch}
.name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scores{ grid-column: 2 / 6; display:grid; grid-template-columns: repeat(4, var(--score-w)); gap:8px; }
.scores .labels{
  grid-column: 1 / -1; display:grid; grid-template-columns: repeat(4, var(--score-w));
  gap:8px; font-weight:800; text-align:center; line-height: var(--row-h); height: var(--row-h);
}
.scores .row{
  grid-column: 1 / -1; display:grid; grid-template-columns: repeat(4, var(--score-w)); gap:8px; height: var(--row-h);
}
.scores .row span{
  display:inline-block; width:var(--score-w); text-align:center;
  line-height: calc(var(--row-h) - 2px);
  border:1px solid var(--border);
  border-radius:8px;
  background: rgba(255,255,255,.05);
  font-variant-numeric: tabular-nums;
}
.actions{ grid-column: 1 / -1; margin-top: 6px; display:flex; align-items:center; }
.actions a{ text-decoration:underline; color:var(--ink); }

/* Winner highlight */
.match-card.winner-left  .header .side:first-child .name{
  background: var(--win); color:#08110a; border-radius:6px; padding:1px 6px
}
.match-card.winner-right .header .side:last-child  .name{
  background: var(--win); color:#08110a; border-radius:6px; padding:1px 6px
}

/* =========================================================
   MATCH EDIT • Pairing UI + Scores
   ========================================================= */
.round-card{
  margin:12px 0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding:12px;
  box-shadow: var(--shadow-1);
  position: relative;   /* NEW: makes this card the anchor for the overlay */
}
.pairs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 14px; position:relative}
.pairs-grid.gated{ opacity:.55; pointer-events:none }

.gate-overlay{
  position: absolute;
  /* Move the banner to the TOP of the round */
  inset: 12px 12px auto 12px;   /* top:12px; right:12px; bottom:auto; left:12px */
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px dashed rgba(148,163,184,.35);
  background: rgba(15,23,42,.85);
  color: #e5e7eb;
  text-align: center;
  font-size: .95rem;
  z-index: 2;                   /* keep banner above the card’s content */
}

.pairs-card{
  border:1px solid rgba(148,163,184,.25); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(30,41,59,.65), rgba(15,23,42,.65));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.pairs-card h3{margin:0 0 .4rem; font-size:1.05rem}

.lock{margin-left:.4rem; color:#34d399; font-weight:700}
.rule-note{color:#94a3b8; font-size:.92rem; margin:.15rem 0 .5rem}

.mustplay{margin:.25rem 0 .5rem; font-size:.92rem}
.mustplay b{font-weight:700; margin-right:.35rem}
.mustplay .chips{display:inline}
.warn{color:#f87171; margin-left:.5rem}

.set-table{
  width:100%; border-collapse:collapse; table-layout:fixed; margin-top:.25rem; background:transparent;
}
.set-table thead th{ background:rgba(148,163,184,.10); color:#e5e7eb}
.set-table th,.set-table td{ border:1px solid rgba(148,163,184,.25); padding:.4rem .5rem; vertical-align:top}
.set-no{ width:30px; text-align:center; font-weight:700; color:#e2e8f0 }

/* Center the # header in scores tables */
.set-table th:first-child { text-align:center; }

.set-table input[type="number"], .set-table select{
  background: rgba(2,6,23,.6);
  border: 1px solid rgba(148,163,184,.35);
  color: #e5e7eb;
  border-radius:8px;
  padding:.38rem .45rem;
}

.pscore,.delta{ text-align:center; font-variant-numeric:tabular-nums }
.delta.ok{ color:#34d399 }
.delta.bad{ color:#f87171 }

.pair-err{ grid-column:1/-1; color:#fca5a5; font-size:.86rem; margin:.25rem 0 0 .25rem }

.scores-card{
  border:1px solid rgba(148,163,184,.25); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(30,41,59,.65), rgba(15,23,42,.65));
  margin-top:8px;
}
.scores-card h3{ margin:0 0 .4rem }

.actions{ margin-top:14px; display:flex; gap:.5rem; flex-wrap:wrap }

/* =========================================================
   Admin: Bracket Build (form)
   ========================================================= */
.admin-bbuild .row{display:flex;gap:1rem;align-items:center;margin:.5rem 0;flex-wrap:wrap}
.admin-bbuild select{background:var(--bg-elev);border:1px solid var(--border);color:var(--ink);padding:.4rem .55rem;border-radius:10px}
.admin-bbuild .radio{display:inline-flex;gap:.5rem;align-items:center}

/* =========================================================
   Admin: Bracket Preview (drag to slots)
   ========================================================= */
.preview-wrap{display:grid;grid-template-columns:380px 1fr;gap:1.25rem}
@media (max-width: 980px){ .preview-wrap{grid-template-columns:1fr} }
.list{list-style:none;margin:0;padding:12px}
.row{padding:6px 8px}
.row.head{font-weight:700;color:var(--muted);font-size:.95rem;padding:8px;border-bottom:1px solid var(--border)}
.row.item{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03);margin-bottom:.35rem;cursor:grab}
.row.slot{border:1px dashed rgba(148,163,184,.45);border-radius:12px;background:rgba(255,255,255,.02);margin-bottom:.6rem;min-height:52px}
.grid{display:grid;grid-template-columns:minmax(200px,1fr) 46px 46px 46px 46px 56px 56px 64px;align-items:center;gap:.25rem}
.c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-w,.c-l,.c-rf,.c-ra,.c-pf,.c-pa,.c-pm{text-align:right}
.badge-seed{font-weight:700;color:#9fb0c8;margin-right:.35rem}

/* =========================================================
   Admin: Pools
   ========================================================= */
.pgen-grid{display:grid;grid-template-columns:1fr 2fr;gap:1rem}
@media(max-width:980px){.pgen-grid{grid-template-columns:1fr}}
.plist.list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:10px;min-height:120px;background:var(--card)}
.plist.list li{display:flex;justify-content:space-between;align-items:center;padding:.45rem .6rem;border-bottom:1px solid var(--border)}
.plist.list li:last-child{border-bottom:none}
.controls{display:flex;gap:.35rem;align-items:center}
.pool{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.pool header{background:rgba(255,255,255,.03);padding:.5rem .7rem;font-weight:700;border-bottom:1px solid var(--border)}
.pools-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem;margin-top:.5rem}
.pool-tools{display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem}
.pool-tools select,.pool-tools button,.plist select{
  background:var(--bg-elev);border:1px solid var(--border);color:var(--ink);padding:.35rem .5rem;border-radius:10px
}

/* =========================================================
   Admin: Results / Order list
   ========================================================= */
.btn.tiny{padding:.2rem .5rem;border-radius:10px}

/* =========================================================
   Admin: Auth forms (login / register)
   ========================================================= */
.auth-form label{display:block;margin:.55rem 0}
.auth-form input{
  width:100%; padding:.5rem .6rem; border-radius:10px;
  background:var(--bg-elev); border:1px solid var(--border); color:var(--ink)
}


/* =========================================================
   Admin: Alternates and Players
   ========================================================= */

writer.writerow(["player_name", "seed", "is_alternate", "alternate_order", "email", "phone"])
# Example rows (actives)
writer.writerow(["Alice Example", 1, 0, "", "alice@example.com", ""])
writer.writerow(["Beth Example", 2, 0, "", "beth@example.com", ""])
# Example rows (alternates)
writer.writerow(["Alt One", "", 1, 1, "alt1@example.com", ""])
writer.writerow(["Alt Two", "", 1, 2, "alt2@example.com", ""])

/* simple, unobtrusive list styling for help blocks */
.help-list {
  margin: .25rem 0 0 1.1rem;
  padding: 0;
}
.help-list li {
  margin: .25rem 0;
}

/* small badges/tags used in the summary panel */
.badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
  background: var(--panel-accent, #1d2636);
}
.tag {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: .4rem;
  font-size: .85rem;
  background: #f6f7f8;
}
.tag.warn { background: #1d2636; }
.tag.info { background: #1d2636; }
.chip {
  display:inline-block; padding:.1rem .45rem; border-radius:999px; background:#1d2636; font-size:.85rem;
}
.alt-row { color: #dacebb; }



/* =========================================================
   Match Edit (all-in-one variant)
   ========================================================= */
.round-card .set-table{ /* reuse .set-table styles; ensure spacing */ }
.actions.flex{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------------- Responsive ---------------- */
@media (max-width: 1280px){
  :root{ --col-w: 520px; --card-w: 390px; --name-col: 180px; --score-w: 40px; --gap-x: 48px; --gap-y: 30px; }
}
@media (max-width: 980px){
  :root{ --col-w: 460px; --card-w: 360px; --name-col: 160px; --score-w: 38px; --gap-x: 32px; --gap-y: 24px; --card-min-h: 128px; }
  .hero{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .pairs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .container{padding:12px}
}

/* ---------------- Emergency fallback (if CSS fails to load) ---------------- */
@supports not (color: var(--ink)) {
  .round-card{border:1px solid #e7e7e7;border-radius:12px;padding:12px;margin:12px 0;background:#fff}
  .pairs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pairs-card{border:1px solid #f0f0f0;border-radius:10px;padding:10px;background:#fcfcfc}
  .set-table{width:100%;border-collapse:collapse}
  .set-table th,.set-table td{border:1px solid #e9ecef;padding:.35rem .5rem}
  select,input[type="number"]{width:100%;padding:.3rem .35rem}
}