:root {
  --ink: #eaf4f8;
  --muted: #9aafbc;
  --ice: #a9e5f4;
  --gold: #f5b942;
  --orange: #f4773d;
  --navy: #071724;
  --panel: rgba(12, 37, 54, .85);
  --line: rgba(175, 223, 239, .16);
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--navy);
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 16% 7%, rgba(36, 108, 137, .4), transparent 28rem), radial-gradient(circle at 90% 42%, rgba(73, 42, 91, .25), transparent 34rem), #071724; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .16; pointer-events: none; background-image: linear-gradient(115deg, transparent 0 48%, rgba(197,242,249,.22) 48.1% 48.4%, transparent 48.5% 100%), repeating-linear-gradient(0deg, transparent 0 76px, rgba(188,238,247,.1) 77px 78px); }
button { font: inherit; }
button:focus-visible, [draggable="true"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.app-shell { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 52px; }
.site-header { min-height: 72px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; }
.brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:4px 0; }
.brand-lockup img { display:block; width:148px; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.26)); }
.brand-lockup small { display:block; padding-left:2px; color:var(--ice); font-size:.56rem; font-weight:850; letter-spacing:.27em; line-height:1; }
.header-rule { display:flex; flex: 1; align-items:center; gap: 10px; color: var(--muted); font-size:.6rem; letter-spacing:.2em; }.header-rule span { flex:1; height:1px; background:var(--line); }.header-rule b { font-weight:700; white-space:nowrap; }.header-puck { width: 31px; height: 9px; border-radius: 50%; background: #01101b; box-shadow: 0 5px 3px rgba(0,0,0,.35); }
.view { padding-top: 48px; }.is-hidden { display: none; }
.hero-copy { max-width: 720px; margin-bottom: 34px; }.eyebrow { margin:0 0 8px; color:var(--ice); font-size:.65rem; line-height:1; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }.hero-copy h1, .results-heading h1 { margin: 0; font: 800 clamp(2.8rem, 6vw, 5.4rem)/.93 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .025em; text-transform:uppercase; }.hero-copy > p:last-child { max-width: 615px; margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.setup-layout { display:grid; grid-template-columns:minmax(0, 1.28fr) minmax(360px, .72fr); gap:20px; align-items:start; }.panel { border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg, rgba(19, 54, 72, .92), rgba(6, 24, 38, .92)); box-shadow:var(--shadow); }.club-panel, .seed-panel { padding: 23px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap: 16px; }.panel-heading h2 { margin:0; font-size:1.23rem; letter-spacing:-.02em; }.panel-note { margin:8px 0 20px; color:var(--muted); font-size:.82rem; line-height:1.45; }.count-pill, .rule-badge { flex:0 0 auto; border:1px solid rgba(169,229,244,.3); border-radius:99px; padding:7px 10px; color:var(--ice); background:rgba(119,210,239,.08); font-size:.69rem; font-weight:800; letter-spacing:.08em; }.count-pill { min-width:62px; text-align:center; }.drag-hint { color:var(--muted); font-size:.69rem; }
.team-picker { display:grid; grid-template-columns:repeat(4, minmax(105px, 1fr)); gap:9px; max-height:516px; overflow:auto; padding-right:4px; }.team-picker::-webkit-scrollbar, .seed-list::-webkit-scrollbar { width:7px; }.team-picker::-webkit-scrollbar-thumb, .seed-list::-webkit-scrollbar-thumb { border-radius:20px; background:rgba(169,229,244,.28); }
.team-option { display:flex; align-items:center; gap:9px; min-height:56px; padding:7px; overflow:hidden; border:1px solid rgba(169,229,244,.11); border-radius:10px; color:var(--ink); text-align:left; cursor:pointer; background:rgba(2,18,29,.28); transition:transform .18s, border-color .18s, background .18s; }.team-option:hover { transform:translateY(-2px); border-color:rgba(169,229,244,.45); }.team-option.is-selected { border-color:var(--gold); background:rgba(245,185,66,.12); }.team-option:disabled { opacity:.35; cursor:not-allowed; }.team-option img { width:36px; height:36px; object-fit:contain; }.team-option span { overflow:hidden; font-size:.72rem; font-weight:750; line-height:1.1; text-overflow:ellipsis; }
.seed-list { display:flex; flex-direction:column; gap:6px; max-height:560px; min-height:280px; margin:0; padding:0; list-style:none; overflow:auto; }.empty-seed { display:grid; min-height:240px; place-items:center; padding:30px; border:1px dashed rgba(169,229,244,.26); border-radius:12px; color:var(--muted); text-align:center; font-size:.82rem; line-height:1.5; }.seed-row { display:grid; grid-template-columns:31px 32px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:48px; padding:6px 7px; border:1px solid rgba(169,229,244,.1); border-radius:10px; background:rgba(2,18,29,.31); cursor:grab; transition:opacity .16s, transform .16s, border-color .16s; }.seed-row.is-dragging { opacity:.4; }.seed-row.is-over { border-color:var(--gold); transform:translateY(2px); }.seed-number { color:var(--ice); font:800 1rem Impact, sans-serif; text-align:center; }.seed-row img { width:30px; height:30px; object-fit:contain; }.seed-name { overflow:hidden; font-size:.8rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }.rank-controls { display:flex; gap:2px; }.rank-button { width:24px; height:25px; border:0; border-radius:5px; color:var(--muted); cursor:pointer; background:rgba(169,229,244,.1); }.rank-button:hover:not(:disabled) { color:var(--navy); background:var(--ice); }.rank-button:disabled { opacity:.25; cursor:not-allowed; }
.launch-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:20px; padding:18px 22px; border:1px solid var(--line); border-radius:16px; background:rgba(3,21,34,.6); }.control-label { display:block; margin-bottom:8px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.segmented { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }.pace-button { display:flex; align-items:baseline; gap:6px; padding:8px 12px; border:0; border-right:1px solid var(--line); color:var(--muted); cursor:pointer; background:transparent; }.pace-button:last-child { border:0; }.pace-button.is-selected { color:var(--navy); background:var(--ice); }.pace-button b { font-size:.78rem; }.pace-button small { font-size:.61rem; }.launch-action { display:flex; align-items:center; justify-content:flex-end; gap:18px; }.launch-message { color:var(--muted); font-size:.78rem; }.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:45px; padding:0 18px; border:0; border-radius:8px; color:#061a28; font-weight:850; cursor:pointer; background:linear-gradient(135deg, #c5f1f9, #76d7ec); box-shadow:0 8px 24px rgba(86,204,230,.18); transition:transform .18s, filter .18s; }.primary-button:hover:not(:disabled), .secondary-button:hover { transform:translateY(-2px); filter:brightness(1.06); }.primary-button:disabled { color:rgba(4,25,38,.5); cursor:not-allowed; filter:grayscale(.45); }.secondary-button { color:var(--ink); background:rgba(169,229,244,.09); border:1px solid var(--line); box-shadow:none; }
.show-view { padding-top:26px; }.broadcast-topline { display:flex; align-items:center; gap:18px; min-height:44px; padding:0 3px 15px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.14em; }.live-label { color:#ff9872; }.live-label i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#ff6944; box-shadow:0 0 14px #ff6944; animation:pulse 1.3s infinite; }.broadcast-topline #show-counter { margin-left:auto; }.text-button { padding:0; border:0; color:var(--ice); cursor:pointer; background:transparent; font-weight:800; letter-spacing:.04em; }.text-button:hover { color:var(--gold); }.show-grid { display:grid; grid-template-columns:minmax(380px, 1fr) minmax(370px, .75fr); gap:20px; padding-top:20px; }.stage { position:relative; display:flex; min-height:690px; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; padding:54px 32px; border:1px solid rgba(169,229,244,.2); border-radius:18px; text-align:center; background:radial-gradient(circle at 50% 45%, rgba(90,193,220,.24), transparent 26%), linear-gradient(145deg, #0e3449, #061825 69%); box-shadow:var(--shadow); }.stage::after { position:absolute; inset:-50%; content:""; opacity:.12; background:repeating-radial-gradient(ellipse at center, transparent 0 24px, #baeef6 25px 26px, transparent 27px 55px); }.stage > *:not(.stage-lights) { position:relative; z-index:1; }.stage-lights { position:absolute; inset:0; opacity:.6; background:linear-gradient(115deg, transparent 0 21%, rgba(186,238,246,.11) 24%, transparent 29%), linear-gradient(65deg, transparent 0 69%, rgba(186,238,246,.1) 74%, transparent 79%); }.stage-pick { margin:-7px 0 -14px; color:rgba(169,229,244,.12); font:900 clamp(9rem, 19vw, 16rem)/1 Impact, sans-serif; letter-spacing:-.08em; }.stage-logo-wrap { display:grid; width:min(190px, 42vw); height:min(190px, 42vw); place-items:center; margin-top:-22px; border:1px solid rgba(169,229,244,.22); border-radius:50%; background:rgba(0,14,24,.3); box-shadow:0 0 0 13px rgba(169,229,244,.035), 0 16px 50px rgba(0,0,0,.28); }.stage-logo-wrap.is-flashing { animation:logo-reveal .75s ease-out; }.stage-logo-wrap img { width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)); }.stage h1 { max-width:600px; margin:23px 0 7px; font:800 clamp(2rem, 4vw, 3.9rem)/.94 Impact, sans-serif; letter-spacing:.025em; text-transform:uppercase; }.stage p:last-child { max-width:490px; margin:0; color:var(--muted); font-size:.88rem; line-height:1.55; }.reveal-panel { padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(7,28,42,.74); box-shadow:var(--shadow); }.compact-heading { margin-bottom:16px; }.compact-heading h2 { font-size:1.05rem; }.reveal-list, .final-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; margin:0; padding:0; list-style:none; }.reveal-row, .final-row { display:grid; grid-template-columns:25px 29px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:47px; padding:5px 7px; border:1px solid rgba(169,229,244,.1); border-radius:8px; background:rgba(3,19,30,.42); transition:opacity .35s, transform .35s, border-color .35s; }.reveal-row { opacity:.18; transform:translateY(-3px); }.reveal-row.is-revealed { opacity:1; transform:none; }.reveal-row.is-lottery, .final-row.is-lottery { border-color:rgba(245,185,66,.46); background:rgba(245,185,66,.075); }.reveal-number, .final-number { color:var(--ice); font:800 .95rem Impact, sans-serif; text-align:center; }.reveal-row img, .final-row img { width:28px; height:28px; object-fit:contain; }.reveal-name, .final-name { overflow:hidden; font-size:.7rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.movement { padding:3px 5px; border-radius:4px; color:var(--gold); background:rgba(245,185,66,.13); font-size:.59rem; font-weight:800; }.movement.steady { color:var(--muted); background:rgba(169,229,244,.08); }
.results-view { padding-top:42px; }.results-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.results-actions { display:flex; gap:9px; }.lottery-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:31px 0 18px; }.lottery-card { position:relative; min-height:160px; overflow:hidden; padding:18px; border:1px solid rgba(245,185,66,.37); border-radius:14px; background:linear-gradient(135deg, rgba(87,62,31,.5), rgba(11,35,50,.86)); }.lottery-card img { position:absolute; right:15px; bottom:8px; width:96px; height:96px; opacity:.28; object-fit:contain; filter:grayscale(.12); }.lottery-card > *:not(img) { position:relative; z-index:1; }.lottery-card .eyebrow { color:var(--gold); }.lottery-card h2 { max-width:74%; margin:7px 0 3px; font-size:1.28rem; line-height:1.06; }.lottery-card p:last-child { max-width:75%; margin:0; color:var(--muted); font-size:.68rem; line-height:1.4; }.final-board { padding:20px; }.final-list { grid-template-columns:repeat(4, minmax(0,1fr)); }.final-row { min-height:53px; }.final-name { font-size:.75rem; }.toast { position:fixed; bottom:24px; left:50%; z-index:10; max-width:calc(100% - 40px); padding:10px 14px; border:1px solid rgba(169,229,244,.3); border-radius:9px; color:var(--ink); font-size:.78rem; opacity:0; pointer-events:none; background:#102d40; box-shadow:var(--shadow); transform:translate(-50%, 12px); transition:opacity .2s, transform .2s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@keyframes pulse { 50% { opacity:.32; transform:scale(.75); } } @keyframes logo-reveal { 0% { transform:scale(.72); filter:brightness(3); } 70% { transform:scale(1.08); } 100% { transform:scale(1); } }
.reveal-row { opacity:1; transform:none; transition:background .42s, transform .42s, border-color .42s; }
.reveal-row.is-pending { background:rgba(2,18,29,.2); }
.reveal-row.is-pending .reveal-name { color:var(--muted); }
.reveal-row.is-pending.is-already-placed { border-color:rgba(169,229,244,.12); opacity:.34; filter:grayscale(.78); }
.reveal-row.is-pending.is-already-placed .reveal-name { color:rgba(169,229,244,.5); text-decoration:line-through; }
.reveal-row.is-revealed { border-color:rgba(169,229,244,.44); background:rgba(18,58,76,.7); animation:row-reveal .55s ease-out; }
.seed-label { color:var(--muted); font-size:.56rem; font-weight:850; letter-spacing:.08em; }
.odds-chip { justify-self:end; padding:3px 5px; border:1px solid rgba(169,229,244,.24); border-radius:4px; color:var(--ice); background:rgba(119,210,239,.08); font-size:.58rem; font-weight:850; letter-spacing:.04em; white-space:nowrap; }
.odds-chip.is-live { border-color:rgba(245,185,66,.48); color:var(--gold); background:rgba(245,185,66,.13); }
.odds-chip.is-cap { color:#ffb198; border-color:rgba(255,152,114,.42); background:rgba(255,105,68,.1); }
.placed-chip { justify-self:end; padding:3px 5px; border:1px solid rgba(169,229,244,.14); border-radius:4px; color:var(--muted); font-size:.53rem; font-weight:850; letter-spacing:.06em; white-space:nowrap; background:rgba(169,229,244,.04); }
.cap-pill { display:inline-block; margin:3px 0 0 2px; padding:2px 5px; border:1px solid rgba(255,177,152,.62); border-radius:99px; color:#ffcab9; font-size:.53rem; font-weight:900; letter-spacing:.06em; line-height:1.15; vertical-align:middle; background:rgba(167,58,31,.45); white-space:nowrap; }
.seed-row { grid-template-columns:31px 32px minmax(0,1fr) auto auto; }
.seed-odds { display:flex; align-items:center; gap:5px; padding:3px 5px; border:1px solid rgba(169,229,244,.22); border-radius:5px; color:var(--ice); background:rgba(119,210,239,.08); white-space:nowrap; }
.seed-odds-stat { display:flex; flex-direction:column; align-items:flex-end; min-width:31px; }.seed-odds-stat + .seed-odds-stat { padding-left:5px; border-left:1px solid rgba(169,229,244,.16); }.seed-odds-stat small { color:var(--muted); font-size:.43rem; font-weight:850; letter-spacing:.06em; line-height:1; }.seed-odds-stat b { margin-top:2px; color:var(--ice); font-size:.61rem; line-height:1; }
.setup-layout { align-items:stretch; }
.seed-panel .panel-heading { margin-bottom:12px; }
.reveal-meta { display:flex; align-items:center; justify-self:end; gap:4px; }
.movers-panel { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
.movers-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color:var(--muted); font-size:.57rem; font-weight:850; letter-spacing:.11em; }.movers-heading .eyebrow { margin:0; color:var(--gold); }
.mover-list { display:flex; flex-direction:column; gap:6px; }
.mover-card { display:grid; grid-template-columns:29px minmax(0,1fr) auto; align-items:center; gap:6px; padding:4px 7px; border:1px solid rgba(245,185,66,.42); border-radius:7px; background:rgba(245,185,66,.085); animation:row-reveal .55s ease-out; }.mover-card img { width:27px; height:27px; object-fit:contain; }.mover-card span { min-width:0; }.mover-card b { display:block; overflow:hidden; color:var(--ink); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.mover-card small { display:block; margin-top:1px; color:var(--gold); font-size:.53rem; font-weight:750; }.mover-card strong { color:var(--gold); font-size:.5rem; line-height:1.15; letter-spacing:.07em; text-align:right; }
@keyframes row-reveal { 0% { transform:translateX(20px); filter:brightness(1.8); } 100% { transform:translateX(0); filter:brightness(1); } }

/* Keep the complete setup flow on a typical desktop display; long club lists
   scroll inside their panels instead of extending the document. */
@media (min-width: 1050px) {
  .app-shell { padding-top:12px; }
  .site-header { min-height:58px; }
  .brand-lockup { gap:3px; padding:2px 0; }
  .brand-lockup img { width:132px; }
  .view { padding-top:25px; }
  .hero-copy { max-width:820px; margin-bottom:19px; }
  .hero-copy h1 { font-size:clamp(2.75rem, 4vw, 4.15rem); }
  .hero-copy > p:last-child { max-width:none; margin-top:10px; font-size:.9rem; line-height:1.42; white-space:nowrap; }
  .club-panel, .seed-panel { padding:16px; }
  .panel-note { margin:6px 0 12px; }
  .team-picker { gap:7px; max-height:431px; }
  .team-option { min-height:47px; padding:5px 6px; }
  .team-option img { width:31px; height:31px; }
  .seed-list { min-height:0; max-height:431px; }
  .seed-row { min-height:41px; }
  .launch-bar { margin-top:14px; padding:13px 18px; }
}

@media (max-width: 1040px) { .setup-layout, .show-grid { grid-template-columns:1fr; }.seed-list { max-height:440px; }.stage { min-height:520px; }.final-list { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 680px) { .app-shell { width:min(100% - 24px, 1500px); padding-top:12px; }.site-header { min-height:60px; }.header-rule { display:none; }.header-puck { margin-left:auto; }.view { padding-top:31px; }.team-picker { grid-template-columns:repeat(2, minmax(0,1fr)); max-height:none; }.club-panel,.seed-panel { padding:16px; }.launch-bar, .results-heading { align-items:stretch; flex-direction:column; }.launch-action { align-items:stretch; flex-direction:column; }.launch-message { text-align:center; }.primary-button { width:100%; }.show-grid { padding-top:12px; }.stage { min-height:480px; padding:42px 18px; }.reveal-list, .final-list { grid-template-columns:1fr; }.lottery-summary { grid-template-columns:1fr; }.results-actions { flex-direction:column; }.results-actions button { width:100%; }.broadcast-topline { gap:10px; font-size:.58rem; }.text-button { font-size:.65rem; }.stage h1 { font-size:2.15rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }