/* ==========================================================================
   MVL 2026 — Phase 2 landing page
   Mobile-first. Single breakpoint at 960px.
   ========================================================================== */

:root {
  /* color tokens */
  --navy: #16104A;
  --navy-deep: #0B0730;
  --navy-footer: #080522;
  --mint: #7CF5B4;
  --teal: #2DD4BF;
  --indigo: #4338CA;
  --red: #E11D48;
  --ink-soft: #EDEBFF;
  --ink-muted: rgba(255, 255, 255, .65);
  --surface-tonal: rgba(255, 255, 255, .065);
  --surface-soft: rgba(255, 255, 255, .04);
  --surface-deep: rgba(4, 9, 15, .62);
  --surface-radius: 24px;
  --control-radius: 12px;
  --surface-shadow: 0 24px 70px rgba(4, 2, 20, .2);

  /* team band cycle */
  --band-1: #5B4FE8;
  --band-2: #0FB5A6;
  --band-3: #7C3AED;
  --band-4: #2563EB;

  /* type */
  --display: 'Morganite', 'STRRETCH Sans Free', 'Anton', 'Arial Narrow', sans-serif;
  --stretch: 'Morganite', 'STRRETCH Sans Free', 'Anton', 'Arial Narrow', sans-serif;
  --ui: 'Archivo', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h: 56px;
}

/* Admin dashboard — intentionally quiet and utilitarian */
.admin-page{min-height:100svh;background:#f5f6f8;color:#1d2433;font-family:Arial,Helvetica,sans-serif}
.admin-topbar{height:60px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;box-shadow:0 1px 4px rgba(18,25,38,.08)}
.admin-topbar img{height:34px;width:auto}.admin-main{width:min(1040px,100%);margin:auto;padding:32px 16px 72px}
.admin-panel{padding:20px;border:0;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(18,25,38,.1)}
.admin-login{width:min(440px,100%);margin:8vh auto}.admin-login h1,.admin-heading h1{margin:0;font:700 28px/1.2 Arial,Helvetica,sans-serif;text-transform:none}
.admin-login-copy,.admin-heading div>p,.admin-panel-head p,.admin-day-filter span{color:#667085;font-size:13px;line-height:1.5}
.admin-form{display:grid;gap:18px}.admin-heading,.admin-panel-head,.admin-form-actions,.admin-games-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-heading{margin-bottom:24px}.admin-heading>p{color:#667085;font-size:12px}
.admin-tabs{position:sticky;top:10px;z-index:20;display:flex;gap:5px;margin:0 0 20px;padding:5px;overflow-x:auto;border:1px solid #e4e7ec;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(16,24,40,.08);scrollbar-width:none}.admin-tabs::-webkit-scrollbar{display:none}.admin-tab{min-height:40px;min-width:max-content;flex:1;padding:9px 16px;border:0;border-radius:7px;background:transparent;color:#667085;cursor:pointer;font:600 13px Arial,Helvetica,sans-serif;white-space:nowrap}.admin-tab:hover{background:#f2f4f7;color:#344054}.admin-tab.is-active{background:#25324a;color:#fff;box-shadow:0 2px 6px rgba(16,24,40,.16)}.admin-tab:focus-visible{outline:2px solid #475467;outline-offset:2px}.admin-tab-panel{display:none}.admin-tab-panel.is-active{display:block}.admin-tab-panel>.admin-readiness:first-child{margin-top:0}.admin-tab-panel>.admin-games-toolbar:first-child{margin-top:0}
.admin-panel-head h2,.admin-games-toolbar h2{margin:0;font:700 20px/1.3 Arial,Helvetica,sans-serif;text-transform:none}.admin-panel-head h3{margin:0;font:700 18px/1.3 Arial,Helvetica,sans-serif;text-transform:none}.admin-panel-head h3 em{color:#667085;font-style:normal;font-weight:400}.admin-team-name{color:var(--team-color,#344054)}.admin-player-team{font-weight:700}
.admin-fields,.admin-result-fields{display:grid;gap:14px}.admin-result-fields{grid-template-columns:1fr}.admin-page .field{gap:6px}.admin-page .field span{color:#344054;font:600 12px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}.admin-page .field small{color:#667085;font-size:11px;line-height:1.4}
.admin-page .field input,.admin-page .field select,.admin-day-filter select{min-height:42px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;color:#1d2433;font:400 14px Arial,Helvetica,sans-serif;padding:9px 11px;box-shadow:none}.admin-page .field input:focus,.admin-page .field select:focus,.admin-day-filter select:focus{border-color:#475467;box-shadow:0 0 0 3px rgba(71,84,103,.1);background:#fff}
.admin-switch{display:flex;gap:8px;align-items:center;color:#344054;font-size:13px;font-weight:600}.admin-switch input{width:18px;height:18px;accent-color:#344054}
.admin-link{border:0;background:none;color:#475467;cursor:pointer;font:600 12px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}.admin-link:hover{color:#101828}
.admin-page .cta{min-height:40px;padding:10px 16px;border:0;border-radius:7px;background:#25324a;color:#fff;font:600 13px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none}.admin-page .cta--secondary{background:#eef1f5;color:#25324a}.admin-page .cta:hover{filter:none;background:#34435e}.admin-page .cta--secondary:hover{background:#e3e7ed}.admin-game+.admin-game{margin-top:14px}.admin-game .cta:disabled{cursor:not-allowed;opacity:.4}
.admin-games-toolbar{margin:36px 0 14px}.admin-games-toolbar>div>p{margin-top:3px;color:#667085;font-size:13px}.admin-day-filter{display:grid;gap:5px;min-width:210px}.admin-day-filter span{font-weight:600}
.admin-score-heading,.admin-sets label{display:grid;grid-template-columns:54px minmax(75px,1fr) minmax(75px,1fr);align-items:center;gap:8px}.admin-score-heading{color:#667085;font-size:11px}.admin-score-heading strong{text-align:center;color:#344054}.admin-sets{display:grid;gap:7px}.admin-sets label{color:#667085;font-size:11px}
.admin-page .admin-sets input{width:100%;min-height:38px;padding:7px;border:1px solid #d0d5dd;border-radius:6px;background:#fff;color:#1d2433;font:600 14px Arial,Helvetica,sans-serif;text-align:center}.admin-page .form-status{color:#667085;font:400 12px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}.admin-page .form-status.is-error{color:#b42318}.admin-page .form-status.is-success{color:#067647}
.admin-player-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.admin-player-search .cta{min-height:42px}.admin-player-preview{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 12px;border:1px solid #e4e7ec;border-radius:8px;background:#f9fafb}.admin-player-preview.is-empty{min-height:auto;color:#667085;font-size:12px}.admin-player-preview img,.admin-player-photo-placeholder{width:46px;height:54px;flex:0 0 46px;border-radius:6px;object-fit:cover;background:#eef1f5}.admin-player-photo-placeholder{display:grid;place-items:center;color:#667085;font-size:9px;text-align:center}.admin-player-preview strong,.admin-player-preview span{display:block}.admin-player-preview strong{color:#1d2433;font-size:13px}.admin-player-preview span{margin-top:4px;color:#667085;font-size:11px}
.admin-video-editor{display:grid;gap:10px;padding:14px;border:1px solid #e4e7ec;border-radius:8px;background:#f9fafb}.admin-video-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-video-head strong,.admin-video-head small{display:block}.admin-video-head strong{color:#344054;font-size:13px}.admin-video-head small{margin-top:3px;color:#667085;font-size:11px;line-height:1.4}.admin-video-list{display:grid;gap:9px}.admin-video-row{display:grid;grid-template-columns:1fr;align-items:end;gap:8px;padding-top:9px;border-top:1px solid #e4e7ec}.admin-video-row:first-child{padding-top:0;border-top:0}.admin-video-remove{min-height:42px;padding:0 4px;color:#b42318;text-align:left}
.admin-readiness{display:grid;gap:16px;margin-top:18px}.admin-readiness-filters{display:grid;grid-template-columns:1fr;gap:12px}.admin-readiness-subtitle{margin:2px 0 -5px;color:#344054;font:700 13px/1.4 Arial,Helvetica,sans-serif}.admin-readiness-summary{padding:10px 12px;border-radius:7px;background:#f2f4f7;color:#475467;font-size:12px;line-height:1.5}.admin-readiness-table-wrap{overflow-x:auto}.admin-readiness-table{width:100%;min-width:580px;border-collapse:collapse;text-align:left}.admin-readiness-table th{padding:0 12px 9px;color:#667085;font-size:11px;font-weight:600}.admin-readiness-table th:first-child,.admin-readiness-table td:first-child{padding-left:0}.admin-readiness-table th:last-child,.admin-readiness-table td:last-child{padding-right:0}.admin-readiness-table td{padding:11px 12px;border-top:1px solid #eaecf0;color:#344054;font-size:12px;vertical-align:middle}.admin-readiness-team-table tbody tr{transition:background-color .15s ease}.admin-readiness-team-table tbody tr.is-selected{background:#f8fafc}.admin-team-detail-link{border:0;background:none;color:var(--team-color,#25324a);cursor:pointer;font:700 12px Arial,Helvetica,sans-serif;text-align:left}.admin-team-detail-link:hover{text-decoration:underline}.admin-readiness-count{display:inline-flex;align-items:baseline;gap:3px;color:#667085;white-space:nowrap}.admin-readiness-count strong{color:#344054;font-size:13px}.admin-readiness-count.is-complete,.admin-readiness-count.is-complete strong{color:#067647}.admin-player-name strong,.admin-player-name span{display:block}.admin-player-name strong{color:#1d2433;font-size:13px}.admin-player-name span{margin-top:3px;color:#667085;font-size:11px}.admin-player-preview .admin-team-name{display:inline}.admin-status-badge{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:600;white-space:nowrap}.admin-status-badge.is-complete{background:#ecfdf3;color:#067647}.admin-status-badge.is-warning{background:#fffaeb;color:#b54708}.admin-status-detail{display:block;margin-top:4px;color:#667085;font-size:10px;white-space:nowrap}.admin-unmatched{padding:12px;border-radius:7px;background:#fffaeb;color:#7a2e0e;font-size:12px;line-height:1.5}.admin-unmatched strong{display:block;margin-bottom:5px}.admin-unmatched ul{display:flex;flex-wrap:wrap;gap:5px 14px;padding-left:17px}.admin-readiness-empty{padding:18px 0;color:#667085;font-size:12px;text-align:center}
.admin-readiness-card-head{align-items:flex-end}.admin-readiness-card-head>div{min-width:0}.admin-readiness-day,.admin-readiness-team-control{width:230px;flex:0 0 230px}.admin-readiness-day select,.admin-readiness-team-control select{width:100%}.admin-player-meta{display:flex;align-items:center;gap:8px;min-height:28px}.admin-player-identifiers{margin:0!important}.admin-player-instagram{color:#475467;font-weight:600}.admin-emergency-button{display:inline-grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border:0;border-radius:50%;background:#fff1f3;color:#c01048;cursor:pointer;font:700 12px Arial,Helvetica,sans-serif}.admin-emergency-button:hover{background:#ffe4e8}.admin-emergency-button:focus-visible{outline:2px solid #c01048;outline-offset:2px}
.admin-contact-dialog{position:fixed;inset:0;width:min(440px,calc(100% - 28px));max-height:calc(100svh - 28px);margin:auto;overflow:auto;padding:0;border:0;border-radius:14px;background:#fff;color:#1d2433;box-shadow:0 24px 80px rgba(16,24,40,.28);font-family:Arial,Helvetica,sans-serif}.admin-contact-dialog::backdrop{background:rgba(16,24,40,.56);backdrop-filter:blur(3px)}.admin-contact-dialog-card{display:grid;gap:16px;padding:22px}.admin-contact-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.admin-contact-dialog-head p{margin-bottom:4px;color:#667085;font-size:11px;font-weight:700;text-transform:uppercase}.admin-contact-dialog-head h2{margin:0;font:700 22px/1.2 Arial,Helvetica,sans-serif}.admin-contact-close{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:50%;background:#f2f4f7;color:#475467;cursor:pointer;font:400 24px/1 Arial,Helvetica,sans-serif}.admin-contact-close:hover{background:#e4e7ec}.admin-contact-note,.admin-contact-loading{color:#667085;font-size:12px;line-height:1.5}.admin-contact-details{display:grid;gap:0;border-top:1px solid #eaecf0}.admin-contact-details>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid #eaecf0}.admin-contact-details dt{color:#667085;font-size:11px}.admin-contact-details dd{color:#1d2433;font-size:13px;font-weight:600;overflow-wrap:anywhere}.admin-page .admin-contact-call{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center}.admin-contact-dialog .form-status{font-size:12px}
.admin-raffle-grid{display:grid;gap:18px}.admin-raffle-filters,.admin-raffle-blacklist-form{display:grid;gap:12px}.admin-checkbox{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:8px;background:#f9fafb;color:#344054;cursor:pointer}.admin-checkbox input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:#25324a}.admin-checkbox span,.admin-checkbox strong,.admin-checkbox small{display:block}.admin-checkbox strong{font-size:12px}.admin-checkbox small{margin-top:3px;color:#667085;font-size:11px;line-height:1.4}.admin-raffle-blacklist-actions{display:flex;align-items:center;gap:14px}.admin-raffle-list{overflow-x:auto;border-top:1px solid #eaecf0}.admin-raffle-table{width:100%;min-width:650px;border-collapse:collapse;text-align:left}.admin-raffle-table th{padding:12px;color:#667085;font-size:11px;font-weight:600}.admin-raffle-table th:first-child,.admin-raffle-table td:first-child{padding-left:0}.admin-raffle-table th:last-child,.admin-raffle-table td:last-child{padding-right:0}.admin-raffle-table td{padding:12px;border-top:1px solid #eaecf0;color:#344054;font-size:12px;vertical-align:middle}.admin-raffle-table td:first-child strong,.admin-raffle-table td:first-child span{display:block}.admin-raffle-table td:first-child strong{color:#1d2433;font-size:13px}.admin-raffle-table td:first-child span{margin-top:4px;color:#667085;font-size:11px}.admin-raffle-table .admin-team-name{display:inline;font-weight:700}.admin-raffle-remove{border:0;background:none;color:#b42318;cursor:pointer;font:600 12px Arial,Helvetica,sans-serif}.admin-raffle-remove:hover{text-decoration:underline}.admin-raffle-remove:disabled,.admin-page .cta:disabled{cursor:wait;opacity:.55}
.admin-raffle-export-actions{display:flex;flex-wrap:wrap;gap:8px}.admin-raffle-dialog{position:fixed;inset:0;width:min(620px,calc(100% - 28px));max-height:calc(100svh - 28px);margin:auto;overflow:auto;padding:0;border:0;border-radius:16px;background:#fff;color:#1d2433;box-shadow:0 28px 90px rgba(16,24,40,.32);font-family:Arial,Helvetica,sans-serif}.admin-raffle-dialog::backdrop{background:rgba(16,24,40,.68);backdrop-filter:blur(5px)}.admin-raffle-dialog-card{display:grid;gap:18px;padding:22px}.admin-raffle-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.admin-raffle-dialog-head p{margin-bottom:4px;color:#667085;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.admin-raffle-dialog-head h2{margin:0;font:700 22px/1.2 Arial,Helvetica,sans-serif}.admin-raffle-drawing{display:grid;gap:14px;text-align:center}.admin-raffle-drawing>p{color:#667085;font-size:12px}.admin-raffle-name-pool{position:relative;height:240px;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 50% 45%,#25324a 0,#141c2d 52%,#101828 100%)}.admin-raffle-name-pool::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 24%,rgba(16,24,40,.62) 78%);pointer-events:none}.admin-raffle-name-pool span{position:absolute;left:var(--pool-x);top:var(--pool-y);max-width:160px;overflow:hidden;color:rgba(255,255,255,.55);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;transform:translate(-50%,-50%);animation:admin-raffle-float 1.4s ease-in-out var(--pool-delay) infinite}.admin-raffle-ticker{position:absolute;z-index:2;left:50%;width:min(80%,360px);margin-top:124px;padding:12px 14px;overflow:hidden;border-radius:999px;background:rgba(124,245,180,.94);color:#101828;font-size:18px;text-overflow:ellipsis;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 10px 34px rgba(0,0,0,.24)}.admin-raffle-progress{height:6px;overflow:hidden;border-radius:999px;background:#eaecf0}.admin-raffle-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2dd4bf,#7cf5b4,#ec4899)}.admin-raffle-drawing.is-animating .admin-raffle-progress span{animation:admin-raffle-progress 5s linear forwards}.admin-raffle-winner{display:grid;justify-items:center;gap:10px;padding:4px 0 2px;text-align:center;animation:admin-raffle-winner-in .45s cubic-bezier(.2,.8,.2,1)}.admin-raffle-winner-label{color:#067647;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.admin-raffle-winner-photo{display:grid;width:150px;height:178px;place-items:center;overflow:hidden;border-radius:14px;background:#eef1f5;box-shadow:0 12px 32px rgba(16,24,40,.16)}.admin-raffle-winner-photo img{width:100%;height:100%;object-fit:cover}.admin-raffle-winner-photo span{padding:16px;color:#667085;font-size:11px}.admin-raffle-winner h2{font:700 27px/1.15 Arial,Helvetica,sans-serif}.admin-raffle-winner>p:not(.admin-raffle-winner-label){color:#475467;font-size:13px;font-weight:600}.admin-raffle-winner-form{display:grid;width:min(100%,430px);gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid #eaecf0;text-align:left}.admin-raffle-winner-form .cta{width:100%}@keyframes admin-raffle-float{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.78)}50%{opacity:.9;transform:translate(-50%,-58%) scale(1.08)}}@keyframes admin-raffle-progress{to{width:100%}}@keyframes admin-raffle-winner-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.admin-raffle-name-pool span,.admin-raffle-progress span,.admin-raffle-winner{animation:none!important}.admin-raffle-drawing.is-animating .admin-raffle-progress span{width:100%}}
.admin-raffle-name-stage{position:relative}.admin-raffle-name-stage .admin-raffle-ticker{top:50%;margin-top:0}.admin-scoreboards{display:grid;gap:18px}.admin-scoreboard-create{display:grid;grid-template-columns:1fr;gap:12px;padding:16px;border:1px solid #e4e7ec;border-radius:8px;background:#f9fafb}.admin-scoreboard-create-actions{display:flex;align-items:center;gap:12px}.admin-scoreboard-list{display:grid;gap:10px}.admin-scoreboard-empty{padding:16px;border-radius:8px;background:#f9fafb;color:#667085;font-size:12px;line-height:1.5;text-align:center}.admin-scoreboard-card{display:grid;gap:14px;padding:14px;border:1px solid #e4e7ec;border-radius:8px}.admin-scoreboard-matchup{display:grid;gap:12px}.admin-scoreboard-matchup>div:first-child strong,.admin-scoreboard-matchup>div:first-child span{display:block}.admin-scoreboard-matchup>div:first-child strong{font-size:14px}.admin-scoreboard-matchup>div:first-child span{margin-top:4px;color:#667085;font-size:10px}.admin-scoreboard-score{display:flex;align-items:center;gap:8px;color:#667085;font-size:12px}.admin-scoreboard-score span{color:var(--team-color,#344054);font-weight:700}.admin-scoreboard-score b{font-size:18px}.admin-scoreboard-score i{font-style:normal}.admin-scoreboard-actions{display:flex;flex-wrap:wrap;gap:8px}.admin-scoreboard-actions .cta{display:inline-flex;align-items:center;justify-content:center}.admin-scoreboard-card>.form-status:empty{display:none}
@media(min-width:760px){.admin-main{padding:40px 24px 80px}.admin-panel{padding:22px}.admin-fields,.admin-readiness-filters,.admin-raffle-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-raffle-filters .admin-checkbox{grid-column:1/-1}.admin-raffle-blacklist-form{grid-template-columns:minmax(150px,.7fr) minmax(190px,1fr) minmax(230px,1.25fr)}.admin-raffle-blacklist-actions{grid-column:1/-1}.admin-result-fields{grid-template-columns:minmax(180px,.7fr) minmax(360px,1.3fr);align-items:start}.admin-video-row{grid-template-columns:minmax(130px,.45fr) minmax(320px,1.4fr) auto}.admin-video-remove{text-align:center}.admin-score-heading,.admin-sets label{grid-template-columns:70px minmax(100px,1fr) minmax(100px,1fr)}}
@media(max-width:600px){.admin-heading,.admin-panel-head,.admin-form-actions,.admin-games-toolbar,.admin-raffle-blacklist-actions{align-items:flex-start;flex-direction:column}.admin-heading{margin-bottom:18px}.admin-tabs{top:6px;margin-inline:-6px}.admin-tab{flex:0 0 auto;padding-inline:14px}.admin-day-filter,.admin-readiness-day,.admin-readiness-team-control{width:100%;flex-basis:auto}.admin-day-filter select{width:100%}.admin-switch{margin-top:4px}.admin-contact-dialog{inset:auto 0 0;width:100%;max-width:none;max-height:min(82svh,680px);margin:0;border-radius:18px 18px 0 0}.admin-contact-dialog-card{padding-bottom:calc(22px + env(safe-area-inset-bottom))}.admin-contact-details>div{grid-template-columns:1fr;gap:4px}}
.admin-awards{display:grid;gap:16px}.admin-awards-head{align-items:flex-end}.admin-awards-head>div{min-width:0}.admin-award-filter{width:min(100%,360px);flex:0 0 360px}.admin-award-filter select{width:100%}.admin-award-results,.admin-award-leader-section,.admin-award-remaining{display:grid;gap:12px}.admin-award-results{gap:22px}.admin-award-leader-section>h3,.admin-award-remaining>h3{margin:0;color:#344054;font:700 13px/1.3 Arial,Helvetica,sans-serif}.admin-award-leaders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.admin-award-leader-card{min-width:0;overflow:hidden;border:1px solid #e4e7ec;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(16,24,40,.08)}.admin-award-leader-visual{position:relative;display:grid;aspect-ratio:4/5;overflow:hidden;place-items:center;color:color-mix(in srgb,var(--team-a,#7cf5b4) 48%,#fff);background:linear-gradient(180deg,rgba(4,2,20,.04) 34%,rgba(4,2,20,.82) 100%),var(--team-art,linear-gradient(135deg,var(--team-a,#3fe39a),var(--team-b,#25324a)));background-position:center;background-size:cover}.admin-award-leader-photo{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;object-fit:contain;object-position:bottom center;transform:translateX(-50%);filter:drop-shadow(0 8px 14px rgba(4,2,20,.5))}.admin-award-leader-silhouette{width:38%;opacity:.5}.admin-award-leader-card.has-photo .admin-award-leader-silhouette{display:none}.admin-award-leader-rank{position:absolute;z-index:2;top:12px;left:12px;display:grid;min-width:42px;height:42px;padding:0 10px;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(4,2,20,.54);color:#fff;font:800 15px/1 Arial,Helvetica,sans-serif;box-shadow:0 4px 14px rgba(4,2,20,.2);backdrop-filter:blur(7px)}.admin-award-leader-copy{position:absolute;z-index:2;right:16px;bottom:15px;left:16px;color:#fff;text-shadow:0 2px 10px rgba(4,2,20,.82)}.admin-award-leader-copy>span{display:block;margin-bottom:4px;color:#fff;font:700 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}.admin-award-leader-copy h3{margin:0;font:800 clamp(18px,2.1vw,25px)/1.05 Arial,Helvetica,sans-serif}.admin-award-leader-copy p{margin-top:5px;color:rgba(255,255,255,.84);font-size:11px;font-weight:600}.admin-award-leader-tally{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-top:3px solid var(--team-a,#7cf5b4)}.admin-award-leader-tally span{color:#667085;font-size:11px;font-weight:600}.admin-award-leader-tally strong{color:var(--team-b,#25324a);font-size:16px}.admin-award-remaining{padding-top:2px}.admin-award-table .admin-team-name{font-weight:700}.admin-award-rank{width:56px;color:#667085;font-weight:700}.admin-award-vote-count{color:#1d2433;font-size:18px}.admin-award-table th:last-child,.admin-award-table td:last-child{width:90px;text-align:right}@media(max-width:760px){.admin-award-leaders{grid-template-columns:1fr}.admin-award-leader-visual{aspect-ratio:16/10}.admin-award-leader-copy h3{font-size:22px}}@media(max-width:600px){.admin-awards-head{align-items:flex-start}.admin-award-filter{width:100%;flex-basis:auto}}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: hidden;
}

body {
  background: var(--navy);
  color: #fff;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* diagonal-stripe convention: striped block = placeholder asset */
.placeholder {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .10) 0 10px,
    rgba(255, 255, 255, .02) 10px 20px
  );
  background-color: rgba(8, 5, 34, .45);
}
.ph-note {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   Top nav — clean glass bar; logo joins on scroll past hero
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  min-height: var(--nav-h);
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav--stuck {
  background: rgba(11, 7, 48, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(124, 245, 180, .18);
  box-shadow: 0 8px 30px rgba(4, 2, 20, .45);
}

.nav-logo {
  display: flex;
  align-items: center;
  line-height: 1;
  opacity: 0;
  transform: translateY(10px) scale(.82);
  transform-origin: left center;
  transition: opacity .55s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.nav-logo-img {
  display: block;
  width: auto;
  height: 34px;
  filter: drop-shadow(0 8px 20px rgba(4, 2, 20, .38));
}
.nav--stuck.logo-docked .nav-logo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.nav.hero-ready .nav-links {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-links a {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover { color: var(--mint); border-bottom-color: var(--mint); }

@font-face {
  font-family: 'STRRETCH Sans Free';
  src: url('../assets/fonts/STRRETCH SANS FREE.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morganite';
  src: url('../assets/fonts/Morganite/Morganite-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morganite';
  src: url('../assets/fonts/Morganite/Morganite-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morganite';
  src: url('../assets/fonts/Morganite/Morganite-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Morganite';
  src: url('../assets/fonts/Morganite/Morganite-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Fold 01 · Hero — scroll-built intro
   ========================================================================== */
.hero {
  position: relative;
  height: 340svh;
  min-height: 1680px;
  background: #05030f;
}
.hero-pin {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-is-pinned .hero-pin {
  position: fixed;
  z-index: 1;
}
.hero-is-done .hero-pin {
  position: absolute;
  inset: auto 0 0 0;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(124, 245, 180, .16), transparent 30%),
    linear-gradient(180deg,
      rgba(16, 10, 50, .24) 0%,
      rgba(16, 10, 50, .42) 42%,
      rgba(16, 10, 50, .68) 72%,
      rgba(16, 10, 50, .9) 100%);
}

.hero-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  perspective: 1000px;
}
.hero-layer {
  position: absolute;
  max-width: none;
  user-select: none;
  will-change: transform, opacity, filter;
  opacity: var(--layer-opacity, 0);
  transform:
    translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0)
    scale(var(--layer-scale, 1))
    rotate(var(--layer-rotate, 0deg));
  filter: blur(var(--layer-blur, 0));
  transition: opacity .16s linear, transform .16s linear, filter .16s linear;
}
.hero-rays {
  width: max(112vw, 112svh);
  height: max(104vw, 104svh);
  object-fit: cover;
  mix-blend-mode: screen;
}
.hero-star {
  width: clamp(330px, 78vw, 940px);
  translate: 0 -8svh;
  filter: drop-shadow(0 24px 60px rgba(4, 2, 20, .38)) blur(var(--layer-blur, 0));
}
.hero-player {
  width: clamp(340px, 74vw, 720px);
  translate: 0 -8svh;
  transform-origin: center bottom;
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, .48)) blur(var(--layer-blur, 0));
}
.hero-mark {
  width: clamp(190px, 52vw, 520px);
  translate: 0 -8svh;
  transform-origin: center center;
  filter: drop-shadow(0 22px 42px rgba(4, 2, 20, .5)) blur(var(--layer-blur, 0));
}
.hero-mark.is-flight-hidden { opacity: 0 !important; }

.logo-flight {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 120;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height, opacity;
  filter: drop-shadow(0 18px 36px rgba(4, 2, 20, .46));
}
.logo-flight.is-active { opacity: 1; }

.hero-content {
  position: absolute;
  inset: auto 16px max(18px, env(safe-area-inset-bottom)) 16px;
  z-index: 4;
  display: grid;
  justify-items: center;
  text-align: center;
  opacity: var(--hero-copy-opacity, 0);
  transform: translateY(calc((1 - var(--hero-copy-opacity, 0)) * 24px));
  transition: opacity .16s linear, transform .16s linear;
}
/* soft dark halo so the kicker/dates stay legible over the bright video */
.hero-content::before {
  content: '';
  position: absolute;
  inset: -34px -10px -14px;
  z-index: -1;
  background: radial-gradient(ellipse 62% 78% at 50% 46%,
    rgba(5, 3, 24, .78) 0%,
    rgba(5, 3, 24, .5) 48%,
    transparent 74%);
  filter: blur(14px);
  pointer-events: none;
}
.hero-kicker {
  font-family: var(--stretch);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 7px;
  text-shadow: 0 2px 14px rgba(4, 2, 20, .85);
}
.hero-kicker-ext { display: none; }

.hero-schedule {
  font-family: var(--stretch);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2.4px;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(4, 2, 20, .9), 0 4px 26px rgba(4, 2, 20, .7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-schedule span { color: var(--mint); }
.hero-calendar-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(124, 245, 180, .72);
  border-radius: 999px;
  color: var(--mint);
  background: rgba(11, 7, 48, .42);
  vertical-align: middle;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.hero-calendar-link:hover {
  background: var(--mint);
  color: var(--navy);
  transform: translateY(-1px);
}
.hero-calendar-link svg {
  width: 16px;
  height: 16px;
}

.hero-sub {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  width: min(100%, 330px);
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  transition: filter .15s ease, background .15s ease;
}
/* <button class="cta"> must not inherit the UA's white button chrome */
button.cta {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  font-family: var(--ui);
  color: inherit;
  cursor: pointer;
}
button.cta--secondary { border: 2px solid var(--mint); color: var(--mint); }
.cta--primary {
  background: linear-gradient(90deg, var(--mint), var(--teal));
  color: #16104A;
}
.cta--primary:hover { filter: brightness(1.08); }
.cta--secondary {
  border: 2px solid var(--mint);
  color: var(--mint);
}
.cta--secondary:hover { background: rgba(124, 245, 180, .1); }
.cta--tertiary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.cta--tertiary:hover { background: rgba(255, 255, 255, .18); }

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ==========================================================================
   Sponsor marquee
   ========================================================================== */
/* the track is panned by JS transform (see setupMarquee), not by scrolling —
   an unbounded offset is what lets the loop wrap in both directions */
.marquee {
  overflow: hidden;
  background: var(--navy-deep);
  border-top: 1px solid rgba(124, 245, 180, .2);
  border-bottom: 1px solid rgba(124, 245, 180, .2);
  padding: 14px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* horizontal drags are ours; the page still scrolls */
}
.marquee.is-dragging { cursor: grabbing; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--mint);
  white-space: nowrap;
}
.marquee-tier {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-left: 1px solid rgba(124, 245, 180, .3);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mint);
  white-space: nowrap;
}
.marquee-item--logo {
  position: relative;
  height: 44px;
  padding: 4px 8px;
}
.marquee-item--logo.marquee-item--bg-mint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124, 245, 180, .96), rgba(32, 207, 202, .92));
}
.marquee-item--logo img {
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .25));
}
.marquee-fallback {
  display: none;
}
.marquee-item--logo img:not([src]),
.marquee-item--logo img[src=''] {
  display: none;
}
.marquee-item--logo img:not([src]) + .marquee-fallback,
.marquee-item--logo img[src=''] + .marquee-fallback {
  display: inline;
}
.marquee-sep { color: var(--indigo); font-size: 10px; }
/* Members of a brand-house group sit shoulder to shoulder. Dropping the
   diamond alone still leaves the track's 20px gap on both sides, so pull the
   follower back to read as one cluster rather than as separate sponsors. */
.marquee-item--tight { margin-left: -12px; }
.marquee--footer { border-bottom: 0; }
.marquee--footer .marquee-tier { color: rgba(255, 255, 255, .82); }
.marquee--footer .marquee-item--logo {
  height: 38px;
  padding: 4px 7px;
}
.marquee--footer .marquee-item--logo img {
  max-width: 132px;
  max-height: 30px;
}

/* ==========================================================================
   Section headers
   ========================================================================== */
.section-head {
  padding: 44px 16px 0;
  position: relative;
}
/* KV gradient-oval motif tucked behind each section header */
.section-head::before {
  content: '';
  position: absolute;
  z-index: -1; /* behind the fold's content, above the section background */
  top: 18px;
  left: -74px;
  width: 268px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(112deg, #6C4CF5 4%, #4A6FE8 46%, #35D3B8 96%);
  transform: rotate(-16deg);
  opacity: .85;
  filter: blur(1px);
  pointer-events: none;
}
.section-title { position: relative; z-index: 1; }
.section-kicker {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 8px;
}
.section-kicker--teal { color: var(--teal); }
.section-title {
  font-family: var(--stretch);
  font-style: italic;
  text-transform: uppercase;
  font-size: 56px;
  line-height: .82;
  color: #fff;
}
.section-title em { font-style: italic; color: var(--mint); }
.section-title .em-teal { color: var(--teal); }

/* ==========================================================================
   Fold 02 · The Teams — compressed IDL-style preview cards
   ========================================================================== */
.schedule-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(45, 212, 191, .18), transparent 26%),
    linear-gradient(180deg, #0b0730 0%, #16104a 100%);
  padding-bottom: 48px;
}
.schedule-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 41%, rgba(124, 245, 180, .08) 41% 42%, transparent 42% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 92px);
  opacity: .52;
}
.schedule-preview .section-head,
.rules-preview .section-head,
.home-preview-grid,
.rules-preview-list,
.section-link {
  position: relative;
  z-index: 1;
}
.home-preview-grid {
  display: grid;
  gap: 14px;
  padding: 24px 16px 0;
}
.preview-panel {
  min-width: 0;
  border: 1px solid rgba(124, 245, 180, .2);
  background:
    linear-gradient(135deg, rgba(8, 5, 34, .92), rgba(22, 16, 74, .78)),
    rgba(255, 255, 255, .03);
  box-shadow: 0 18px 38px rgba(4, 2, 20, .3);
}
.preview-panel-head {
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.preview-panel-head .games-label { margin-bottom: 8px; }
.preview-panel h3 {
  font-family: var(--stretch);
  font-size: 38px;
  line-height: .84;
  text-transform: uppercase;
  color: #fff;
}
.home-match-list,
.home-standings-list {
  display: grid;
}
.home-match {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.home-match:last-child,
.home-standing-row:last-child { border-bottom: 0; }
.home-match h4 {
  font-size: 14px;
  line-height: 1.15;
  text-transform: uppercase;
}
.home-match h4 span {
  margin: 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mint);
}
.home-match p {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.home-match-time {
  margin-top: 0 !important;
  margin-bottom: 6px;
  color: var(--teal) !important;
}
.home-status {
  flex: 0 0 auto;
  border: 1px solid rgba(124, 245, 180, .25);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mint);
}
.home-status--final { color: #fff; border-color: rgba(255, 255, 255, .2); }
.home-standing-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .15s ease, color .15s ease;
}
/* scoped to <a> — rows are plain <div>s until team detail pages exist,
   and a non-interactive row shouldn't advertise interactivity */
a.home-standing-row:hover {
  background: rgba(124, 245, 180, .08);
  color: var(--mint);
}
.home-standing-row span,
.home-standing-row em {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--teal);
  font-style: normal;
}
.home-standing-row strong {
  min-width: 0;
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  max-width: 380px;
  min-height: 48px;
  margin: 20px 16px 0;
  border: 2px solid var(--mint);
  color: var(--mint);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.section-link:hover {
  background: var(--mint);
  color: var(--navy);
  transform: translateY(-1px);
}

.teams {
  position: relative;
  min-height: 100svh;
  /* A single row of eight is a short band, where the bento mosaic used to fill
     the fold. Centre the head and grid as one group so the band sits in the
     middle of the viewport rather than stranded against the top. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(22, 16, 74, 1) 0%, rgba(5, 9, 17, 1) 100%);
  /* the nav is fixed and overlays this fold; without the top inset the centred
     group pushes the heading up behind it */
  padding-top: var(--nav-h);
  padding-bottom: 28px;
}
.teams::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* space field: scattered stars + faint diagonal star-streaks (jersey motif) */
  background:
    radial-gradient(circle 1px at 18% 14%, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle 1px at 71% 32%, rgba(255, 255, 255, .38) 0 1px, transparent 1.6px),
    radial-gradient(circle 1.4px at 44% 58%, rgba(255, 255, 255, .3) 0 1.4px, transparent 2px),
    radial-gradient(circle 1px at 88% 74%, rgba(255, 255, 255, .42) 0 1px, transparent 1.6px),
    radial-gradient(circle 1px at 8% 86%, rgba(255, 255, 255, .3) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg,
      transparent 0 54px, rgba(255, 255, 255, .05) 54px 55.5px,
      transparent 55.5px 132px, rgba(255, 255, 255, .03) 132px 134px, transparent 134px 210px);
  background-size:
    340px 300px, 420px 360px, 500px 420px, 380px 340px, 460px 400px, auto;
  opacity: .8;
}
.teams .section-head {
  position: relative;
  z-index: 1;
  padding-bottom: 22px;
}

.teams-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 14px;
}

.team-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(185, 235, 255, .22);
  /* full-bleed team gradient, darkened on the left for the name (jersey look) */
  background:
    linear-gradient(100deg, rgba(4, 9, 15, .82) 0 26%, rgba(4, 9, 15, .3) 48%, transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-b) 78%, #04090F), var(--team-a) 52%, var(--team-b));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.team-card-oval {
  position: absolute;
  z-index: 0;
  left: var(--oval-x, 12%);
  top: var(--oval-y, 8%);
  width: min(72vw, 360px);
  height: min(34vw, 160px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 42%, rgba(255, 255, 255, .2), transparent 38%),
    linear-gradient(112deg, var(--team-a) 5%, color-mix(in srgb, var(--team-a) 42%, var(--team-b)) 46%, var(--team-b) 96%);
  transform: rotate(var(--oval-rot, -16deg));
  filter: saturate(1.18);
  opacity: .86;
  pointer-events: none;
}
/* starfield dots */
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1px at 22% 24%, rgba(255, 255, 255, .85) 0 1px, transparent 1.7px),
    radial-gradient(circle 1.3px at 64% 12%, rgba(255, 255, 255, .6) 0 1.3px, transparent 2px),
    radial-gradient(circle 1px at 47% 70%, rgba(255, 255, 255, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle 1px at 84% 46%, rgba(255, 255, 255, .5) 0 1px, transparent 1.7px),
    radial-gradient(circle 1.4px at 8% 78%, rgba(255, 255, 255, .55) 0 1.4px, transparent 2.1px);
  background-size: 150px 120px, 190px 150px, 170px 140px, 210px 160px, 230px 170px;
}
/* diagonal star-streak rain + team-color top bar */
.team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--team-a) 0 4px, transparent 4px 100%),
    repeating-linear-gradient(115deg,
      transparent 0 18px, rgba(255, 255, 255, .16) 18px 19.5px,
      transparent 19.5px 44px, rgba(255, 255, 255, .07) 44px 46.5px,
      transparent 46.5px 78px, rgba(255, 255, 255, .11) 78px 79px,
      transparent 79px 118px),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .28) 100%);
}
.team-card:hover {
  border-color: rgba(124, 245, 180, .58);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
  transform: translateY(-2px);
}

/* captain cutout — big, on top, nothing overlapping it */
.team-card-photo {
  position: absolute;
  inset: -44px -4px -30px 34%;
  z-index: 2;
  background-image: url('../assets/hero-player.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: saturate(1.1) contrast(1.05) drop-shadow(0 16px 30px rgba(0, 0, 0, .5));
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

/* lens-flare sparkle + one bright beam (jersey motif) */
.team-card-shards {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 84%, rgba(255, 255, 255, .75) 0 2px, rgba(255, 255, 255, .28) 3%, transparent 9%),
    linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, .22) 58% 60.5%, transparent 60.5% 100%);
  mix-blend-mode: screen;
}

.team-card-copy {
  position: relative;
  z-index: 3;
  width: 64%;
  min-height: 112px;
  display: flex;
  align-items: center;
  padding: 18px 16px;
}
.team-card-name {
  /* matches the schedule match-ups: Archivo 900 uppercase, not the condensed
     display face — so the size drops accordingly to keep names on one line */
  font-family: var(--ui);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(20px, 6.4vw, 30px);
  line-height: 1.05;
  letter-spacing: .4px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 5px 22px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Fold 03 · Watch the Games — blurred drifting KV background
   ========================================================================== */
.games {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}
.games-bg {
  position: absolute;
  inset: -30px;
  z-index: 0;
  overflow: hidden;
}
/* rendered at half size and scaled up: quarter the raster area and half
   the blur radius for the same look — keeps the drift cheap on phones */
.games-bg img {
  width: 50%;
  height: 50%;
  object-fit: cover;
  transform-origin: 0 0;
  filter: blur(9px) saturate(.25) brightness(.45);
  will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}
.games-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 7, 48, .62);
}
@keyframes drift {
  from { transform: scale(2.24) translate(0, 0); }
  to   { transform: scale(2.44) translate(-2.5%, 2%); }
}

.games-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 52px;
}
.games .section-head { padding-bottom: 30px; }
.games .section-title { font-size: 44px; }

.games-grid {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 0 16px;
}
/* on mobile the side + bottom grids read as one continuous 2-col grid */
.games-side + .past-grid--bottom { margin-top: -20px; }
.games-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.live-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 2px solid rgba(45, 212, 191, .6);
  box-shadow: 0 0 28px rgba(45, 212, 191, .28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.play-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .55);
  position: relative;
}
.play-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.play-btn--sm { width: 30px; height: 30px; border-width: 1.5px; }
.play-btn--sm::after { border-width: 5px 0 5px 8px; }

.past-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.video-card { min-width: 0; }
.video-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid rgba(124, 245, 180, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, transform .15s ease;
}
.video-card:hover .video-thumb {
  border-color: rgba(124, 245, 180, .55);
  transform: translateY(-2px);
}
.video-title {
  margin-top: 8px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .4px;
  color: var(--ink-soft);
}
.video-meta {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
}

/* ==========================================================================
   Fold 05 · Rules FAQ preview
   ========================================================================== */
/* echoes the rules page: flat deep navy + one bordered mint panel */
.rules-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 88% 0%, rgba(124, 58, 237, .28), transparent 70%),
    #0B0730;
  padding-bottom: 52px;
}
.rules-preview-list {
  display: block;
  margin: 24px 16px 0;
  border: 1px solid rgba(124, 245, 180, .28);
  background: rgba(11, 7, 48, .55);
  border-radius: 14px;
  padding: 8px 18px;
}
.rules-preview .faq-item {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rules-preview .faq-item:last-of-type { border-bottom: 0; }
.rules-preview .faq-item summary {
  font-size: 14px;
  padding-left: 0;
}
.rules-preview .faq-item summary::after { right: 4px; }
.rules-preview .faq-item p {
  color: var(--ink-muted);
  padding-left: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-bar {
  background: var(--navy-footer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
}
.footer-logo {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  color: var(--mint);
  font-size: 18px;
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-logo-img--metarice {
  height: 42px;
  max-width: min(52vw, 240px);
  object-fit: contain;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-social a {
  display: flex;
  color: var(--ink-soft);
  transition: color .15s ease, transform .15s ease;
}
.footer-social a:hover { color: var(--mint); transform: translateY(-1px); }
.footer-social .sep { color: var(--indigo); margin: 0 8px; }
.social-icon { width: 21px; height: 21px; }

/* ==========================================================================
   Game videos page
   ========================================================================== */
.videos-page {
  background: var(--navy-deep);
}
.videos-main {
  min-height: 100svh;
  padding: 0;
}
.videos-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(680px, 100svh);
  padding: calc(var(--nav-h) + 34px) 16px 82px;
  overflow: hidden;
  background: #05030f;
}
.videos-feature-media,
.videos-feature-scrim {
  position: absolute;
  inset: 0;
}
.videos-feature-media {
  z-index: -3;
  background: #05030f;
}
.videos-feature-media img,
.videos-feature-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.videos-feature-media img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) brightness(.7);
  transform: scale(1.02);
}
.videos-feature-scrim {
  z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(9, 6, 39, .94) 0%,
      rgba(9, 6, 39, .7) 38%,
      rgba(9, 6, 39, .2) 72%,
      rgba(9, 6, 39, .42) 100%),
    linear-gradient(180deg,
      rgba(7, 5, 28, .66) 0%,
      rgba(7, 5, 28, .06) 38%,
      rgba(11, 7, 48, .88) 100%);
  transition: opacity .2s ease;
}
.videos-feature-inner {
  width: min(100%, 1504px);
  margin: 0 auto;
  transition: opacity .18s ease, transform .18s ease;
}
.videos-feature-panel {
  width: min(100%, 680px);
  padding: 26px 24px 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(23, 17, 71, .62), rgba(10, 8, 39, .52));
  box-shadow: 0 32px 90px rgba(4, 3, 22, .38);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.videos-feature-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mint);
  font: 800 10px var(--ui);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.videos-feature-label span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(45, 212, 191, .48);
}
.videos-feature-title {
  margin-top: 15px;
  font-family: var(--stretch);
  font-size: clamp(58px, 18vw, 88px);
  font-style: italic;
  font-weight: 700;
  line-height: .82;
  text-transform: uppercase;
}
.videos-feature-title em {
  color: var(--mint);
  font-style: inherit;
}
.videos-feature-matchup {
  margin-top: 28px;
  font-size: clamp(24px, 7.6vw, 34px);
  line-height: 1;
  text-transform: uppercase;
}
.videos-feature-meta {
  margin-top: 12px;
  color: var(--ink-soft);
  font: 800 10px var(--ui);
  letter-spacing: 1.6px;
  line-height: 1.5;
  text-transform: uppercase;
}
.videos-feature-result {
  margin-top: 18px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}
.videos-feature-result::before {
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-right: 10px;
  background: var(--teal);
  content: '';
  vertical-align: middle;
}
.videos-feature-actions {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
.videos-feature-play {
  border: 0;
  border-radius: 999px;
}
.videos-feature-play:disabled {
  cursor: not-allowed;
  filter: grayscale(.8);
  opacity: .5;
}
.videos-feature-play .play-btn {
  border-color: transparent;
  background: var(--navy-deep);
}
.videos-feature-play .play-btn::after {
  border-left-color: var(--mint);
}
.videos-feature-library-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.videos-feature-library-link span {
  color: var(--mint);
  font-size: 18px;
  transition: transform .15s ease;
}
.videos-feature-library-link:hover span {
  transform: translateY(3px);
}
.videos-feature-close {
  position: absolute;
  top: calc(var(--nav-h) + 16px);
  right: 16px;
  z-index: 4;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 7, 48, .84);
  color: #fff;
  cursor: pointer;
  font: 800 9px var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.videos-feature.is-playing .videos-feature-inner,
.videos-feature.is-playing .videos-feature-scrim {
  pointer-events: none;
  opacity: 0;
}
.videos-feature.is-playing .videos-feature-inner {
  transform: translateY(10px);
}
.videos-feature.is-playing .videos-feature-media {
  top: var(--nav-h);
}
.video-library {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 32px), 1504px);
  margin: -32px auto 34px;
  padding: 26px 18px 34px;
  border-radius: 24px;
  background: rgba(11, 7, 48, .94);
  box-shadow: 0 -18px 60px rgba(4, 2, 20, .24);
}
.video-library-head {
  display: grid;
  gap: 20px;
  padding-bottom: 8px;
}
.video-library-head .games-label {
  margin-bottom: 8px;
  color: var(--teal);
}
.video-library-head h2 {
  font-family: var(--stretch);
  font-size: 40px;
  line-height: .9;
  text-transform: uppercase;
}
.video-result-count {
  margin-top: 10px;
  font: 700 10px var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.video-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.video-filter {
  display: grid;
  gap: 6px;
}
.video-filter span {
  font: 700 9px var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mint);
}
.video-filter select {
  min-width: 0;
  min-height: 44px;
  padding: 9px 34px 9px 11px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 0;
  background: #111827;
  color: #fff;
  font: 700 11px var(--ui);
}
.video-library-grid {
  display: grid;
  gap: 16px;
  padding-top: 22px;
}
.library-video-card {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 16px 36px rgba(4, 2, 20, .2);
}
.library-video-card:target {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(124, 245, 180, .16);
}
.library-video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #030711;
}
.library-video-player button,
.library-video-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.library-video-player button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  background: #030711;
  color: #fff;
  cursor: pointer;
}
.library-video-player button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(3, 7, 17, .66));
}
.library-video-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .15s ease, transform .2s ease;
}
.library-video-player button:hover img {
  opacity: 1;
  transform: scale(1.02);
}
.library-video-player .play-btn {
  z-index: 1;
}
.library-video-copy {
  padding: 14px;
}
.video-library-meta {
  font: 700 9px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
}
.library-video-copy h3 {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
}
.library-video-copy h3 em {
  margin: 0 4px;
  color: var(--mint);
  font: 700 10px var(--mono);
  font-style: normal;
}
.library-video-copy > p:not(.video-library-meta) {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}
.library-video-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font: 700 9px var(--mono);
  letter-spacing: .8px;
  text-transform: uppercase;
}
.library-video-actions span { color: var(--ink-muted); }
.library-video-actions a { color: var(--mint); }
.video-library-empty {
  padding: 54px 16px;
  text-align: center;
}
.video-library-empty h3 {
  font-size: 20px;
  text-transform: uppercase;
}
.video-library-empty p {
  max-width: 460px;
  margin: 10px auto 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}
@media (min-width: 760px) {
  .videos-feature {
    min-height: max(720px, 100svh);
    padding: calc(var(--nav-h) + 42px) 48px 94px;
  }
  .videos-feature-panel {
    padding: 34px 38px 38px;
    border-radius: 30px;
  }
  .videos-feature-title { font-size: 92px; }
  .videos-feature-matchup { font-size: 36px; }
  .videos-feature-meta { font-size: 12px; }
  .videos-feature-result { font-size: 14px; }
  .videos-feature-actions {
    grid-template-columns: minmax(250px, 1fr) auto;
    align-items: center;
    gap: 24px;
  }
  .videos-feature-close {
    right: 48px;
  }
  .video-library {
    width: min(calc(100% - 96px), 1504px);
    margin-top: -36px;
    padding: 34px 22px 48px;
  }
  .video-library-head {
    grid-template-columns: minmax(0, 1fr) minmax(430px, .8fr);
    align-items: end;
  }
  .video-library-head h2 { font-size: 52px; }
  .video-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-top: 26px;
  }
  .library-video-copy { padding: 18px; }
}
@media (min-width: 1240px) {
  .videos-feature-panel {
    width: 680px;
  }
  .video-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Schedule & standings page
   ========================================================================== */
.page-nav .nav-logo { opacity: 1; transform: none; pointer-events: auto; }
.page-nav .nav-links {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-links [aria-current='page'] { color: var(--mint); border-bottom-color: var(--mint); }

/* Phase-aware nav: every page ships the full link set; the phase stamped on
   <html> by js/nav.js decides which apply. Without JS nothing is stamped,
   neither rule matches, and all links render — degraded but never broken. */
html[data-phase='registration'] .nav-links a[data-phase='gameday'],
html[data-phase='gameday'] .nav-links a[data-phase='registration'] { display: none; }

.schedule-page {
  background:
    radial-gradient(circle at 82% 12%, rgba(45, 212, 191, .18), transparent 28%),
    linear-gradient(180deg, var(--navy) 0%, #050911 48%, var(--navy-deep) 100%);
}
.schedule-page main {
  min-height: 100svh;
  padding-top: var(--nav-h);
}
.schedule-hero {
  padding: 46px 16px 22px;
}

.standings-panel,
.schedule-board {
  margin: 0 16px 28px;
  border: 1px solid rgba(124, 245, 180, .18);
  background: rgba(4, 9, 15, .68);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.schedule-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.schedule-section-head > div {
  min-width: 0;
}
.schedule-section-head h2 {
  font-family: var(--stretch);
  font-style: italic;
  font-size: 50px;
  line-height: .82;
  text-transform: uppercase;
}
.schedule-note {
  max-width: 260px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.schedule-team-filter {
  display: grid;
  gap: 7px;
  min-width: min(260px, 42vw);
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mint);
  text-align: left;
}
.schedule-team-filter select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(124, 245, 180, .22);
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .56);
  color: var(--ink);
  font: 800 12px var(--ui);
  letter-spacing: .4px;
  padding: 0 38px 0 13px;
  outline: none;
}
.schedule-note--mobile { display: none; }

@media (max-width: 720px) {
  .schedule-page .section-title {
    font-size: clamp(66px, 24vw, 112px);
    line-height: .78;
  }
  .schedule-section-head {
    display: block;
  }
  .schedule-section-head > .schedule-note {
    display: none;
  }
  .schedule-section-head .schedule-note--mobile {
    display: block;
    max-width: 100%;
    margin-top: 10px;
    text-align: left;
  }
  .schedule-team-filter {
    width: 100%;
    min-width: 0;
    margin: 16px 0 0;
  }
}

.standings-table-wrap {
  overflow-x: auto;
}
.standings-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.standings-table th,
.standings-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
}
.standings-table th {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--teal);
}
.standings-table td {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-soft);
}
.standings-table tr:last-child td { border-bottom: 0; }
.standing-team-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background: linear-gradient(135deg, var(--team-a), var(--team-b));
}

.day-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.day-tab {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
  color: #fff;
  min-width: 0;
  min-height: 74px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 900 clamp(10px, 2.55vw, 13px) var(--ui);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 4px;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.day-tab-label,
.day-tab-date {
  display: block;
}
.day-tab-date {
  margin-top: 5px;
  font: 700 10px var(--mono);
  letter-spacing: 1.1px;
  color: rgba(255, 255, 255, .58);
}
.day-tab:last-child {
  border-right: 0;
}
.day-tab.is-active {
  background: linear-gradient(135deg, #75efaa 0%, #20cfca 100%);
  color: var(--navy);
}
.day-tab.is-active .day-tab-date {
  color: rgba(16, 8, 54, .68);
}

.match-list {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.match-empty {
  margin: 0;
  border: 1px solid rgba(124, 245, 180, .18);
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .42);
  padding: 20px;
  color: var(--ink-muted);
  font: 800 12px var(--ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.match-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .06), transparent 42%),
    rgba(255, 255, 255, .035);
}
.match-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 64%, rgba(124, 245, 180, .08) 64% 68%, transparent 68% 100%);
}
.match-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.match-meta span {
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 5px 7px;
}
.match-stage {
  flex: 0 0 100%;
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(117, 239, 170, .32);
  background: rgba(117, 239, 170, .06);
}
.match-stage strong {
  color: var(--mint);
  font: 800 10px var(--ui);
  letter-spacing: 1px;
}
.match-stage small {
  color: rgba(255, 255, 255, .72);
  font: 700 9px var(--mono);
  letter-spacing: .7px;
}
.match-teams {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 0 12px 12px;
}
.match-team {
  min-width: 0;
  padding: 14px 12px;
  background:
    linear-gradient(110deg, rgba(4, 9, 15, .86) 0 38%, rgba(4, 9, 15, .35) 38% 100%),
    linear-gradient(135deg, var(--team-a), var(--team-b));
}
.match-team--right { text-align: right; }
.match-team small {
  display: block;
  min-height: 11px;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mint);
}
.match-team p {
  margin-top: 4px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
}
.match-score {
  display: flex;
  gap: 9px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .68);
}
.match-team--right .match-score { justify-content: flex-end; }
.match-score .set-won {
  color: #fff;
  text-shadow: 0 0 12px rgba(124, 245, 180, .65);
}
.pending-score {
  color: rgba(255, 255, 255, .54);
  text-transform: uppercase;
}
.match-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
}

.match-feature {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 12px 12px;
  padding: 12px;
  background: rgba(4, 9, 15, .48);
  border: 1px solid rgba(255, 255, 255, .08);
}
.player-portrait {
  width: 46px;
  height: 62px;
  display: grid;
  place-items: center;
}
.player-portrait.has-photo {
  overflow: hidden;
  border: 1px solid rgba(124, 245, 180, .24);
  background: rgba(255, 255, 255, .05);
}
.player-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.player-silhouette {
  width: 46px;
  height: 62px;
  background: var(--red);
  clip-path: polygon(50% 0, 66% 7%, 74% 22%, 69% 38%, 84% 100%, 16% 100%, 31% 38%, 26% 22%, 34% 7%);
  opacity: .72;
}
.feature-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal);
}
.match-feature h3 {
  margin-top: 3px;
  font-size: 15px;
  text-transform: uppercase;
}
.match-feature p:last-child {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-muted);
}
.match-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.winner-pill,
.match-actions a,
.video-pending {
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 9px;
}
.winner-pill { color: var(--mint); }
.winner-pill--pending,
.video-pending { color: var(--ink-muted); }
.match-actions a { color: var(--teal); }

/* ==========================================================================
   Scroll-triggered reveals
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: var(--d, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .games-bg img { animation: none; }
  .live-dot { animation: none; }
  .nav-logo { transition: none; }
}

@media (max-width: 430px) {
  .nav {
    align-items: center;
    height: auto;
    min-height: var(--nav-h);
    padding: 8px 14px;
  }
  .nav-logo-img { height: 30px; }
  .nav-links {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* tuned so the 5-item gameday nav stays on one line at 375px */
    gap: 5px 8px;
    max-width: calc(100vw - 76px);
    padding-top: 1px;
  }
  .nav-links a {
    font-size: 8.5px;
    letter-spacing: 1px;
    padding: 2px 0;
  }
}

/* Below 360px the five-item nav wraps to a second line. It degrades fine —
   .nav is height:auto so the bar grows rather than clipping — but a tighter
   tracking pulls it back onto one line without touching 375px and up. */
@media (max-width: 360px) {
  .nav-links { gap: 5px 6px; max-width: calc(100vw - 62px); }
  .nav-links a { letter-spacing: .4px; }
}

/* ==========================================================================
   Desktop ≥ 960px
   ========================================================================== */
@media (min-width: 960px) {
  :root { --nav-h: 64px; }

  .nav { padding: 0 48px; }
  .nav-logo-img { height: 42px; }
  .nav-links { gap: 32px; }
  .nav-links a { font-size: 12px; letter-spacing: 2px; }

  .hero { height: 340svh; min-height: 2160px; }
  .hero-pin { min-height: 640px; }
  .hero-rays {
    width: max(104vw, 112svh);
    height: max(98vw, 106svh);
  }
  .hero-star {
    width: clamp(640px, 66vw, 980px);
    translate: 0 -3svh;
  }
  .hero-player {
    width: clamp(580px, 46vw, 760px);
    translate: 0 -3svh;
  }
  .hero-mark {
    width: clamp(330px, 30vw, 500px);
    translate: 0 -3svh;
  }
  .hero-content { inset: auto 48px 48px 48px; }
  .hero-kicker { font-size: 27px; letter-spacing: 4.4px; }
  .hero-schedule { font-size: 22px; letter-spacing: 3.4px; }
  .hero-sub { font-size: 14px; }
  .hero-ctas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    width: min(100%, 680px);
    margin-top: 26px;
  }
  .cta { min-height: 56px; padding: 15px 18px; font-size: 13px; }

  .marquee { padding: 18px 0; }
  .marquee-track { gap: 28px; }
  .marquee-item { font-size: 13px; letter-spacing: 3px; }
  .marquee-tier {
    min-height: 46px;
    padding: 0 14px;
    font-size: 13px;
  }
  .marquee-item--logo {
    height: 54px;
    padding: 5px 10px;
  }
  .marquee-item--logo img {
    max-width: 184px;
    max-height: 44px;
  }

  .section-head { padding: 64px 48px 0; }
  .section-head::before {
    top: 30px;
    left: -96px;
    width: 430px;
    height: 158px;
  }
  .section-title { font-size: 72px; }
  .games .section-title { font-size: 64px; }

  .schedule-preview,
  .rules-preview {
    padding-bottom: 80px;
  }
  .home-preview-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 24px;
    padding: 34px 48px 0;
  }
  .preview-panel-head { padding: 22px 24px 16px; }
  .preview-panel h3 { font-size: 38px; }
  .home-match {
    min-height: 86px;
    padding: 18px 24px;
  }
  .home-match h4 { font-size: 17px; }
  .home-standing-row {
    min-height: 58px;
    padding: 0 24px;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }
  .home-standing-row strong { font-size: 15px; }
  .section-link {
    width: 360px;
    margin: 28px 48px 0;
  }

  .teams { padding-bottom: 34px; }
  .teams .section-head {
    padding-top: 48px;
    padding-bottom: 18px;
  }
  .teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 0 48px;
  }
  .team-card { min-height: clamp(124px, calc((100svh - 250px) / 2), 164px); }
  .team-card-copy {
    width: 68%;
    min-height: clamp(124px, calc((100svh - 250px) / 2), 164px);
    padding: 20px;
  }
  .team-card-name { font-size: clamp(18px, 1.6vw, 28px); }
  .team-card-photo {
    inset: -54px -4px -38px 36%;
  }

  .games-bg { inset: -40px; }
  .games-bg img { filter: blur(12px) saturate(.25) brightness(.45); }
  .games .section-head { padding-bottom: 40px; }
  .games-inner { padding-bottom: 80px; }

  /* modular grid: livestream left (1.7fr), 2 stacked right, 4 across below */
  .games-grid {
    display: grid;
    /* minmax(0, …), not bare fr: an fr track's implicit min-width is auto, so
       the recent-games column grew to its own content width — 2680px inside a
       1440px grid — and crushed the livestream track to 119px. */
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px;
    padding: 0 48px;
    align-items: start;
  }
  .games-live { grid-column: 1; grid-row: 1; }
  .live-frame { border-radius: 16px; box-shadow: 0 0 36px rgba(45, 212, 191, .28); }
  .games-side { grid-column: 2; grid-row: 1; min-width: 0; }
  .games-side .past-grid { grid-template-columns: 1fr; gap: 24px; }
  .games-grid.is-offline .games-side { grid-column: 1 / -1; }
  .games-grid.is-offline .games-side .past-grid { grid-template-columns: repeat(2, 1fr); }
  .past-grid--bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .games-side + .past-grid--bottom { margin-top: 0; }
  .video-title { font-size: 12px; }
  .video-meta { font-size: 10px; }
  .video-thumb { border-radius: 12px; }

  .rules-preview-list {
    margin: 34px 48px 0; /* full width, aligned with the other folds' 48px gutters */
    padding: 12px 26px;
  }
  .rules-preview .faq-item summary { font-size: 14.5px; }

  .footer-bar { padding: 22px 48px; }
  .footer-logo { font-size: 22px; }
  .footer-logo-img--metarice {
    height: 48px;
    max-width: 280px;
  }

  .schedule-hero { padding: 70px 48px 30px; }
  .standings-panel,
  .schedule-board {
    margin: 0 48px 34px;
  }
  .schedule-section-head {
    padding: 24px 28px 20px;
  }
  .schedule-section-head h2 { font-size: 44px; }
  .day-tab {
    min-height: 90px;
    font-size: 14px;
  }
  .match-list {
    gap: 18px;
    padding: 24px 28px 28px;
    /* The card's four columns have fixed minimums adding up to more than the
       board is wide between roughly 960px and 1100px. Scroll the whole list so
       every row moves together, rather than giving each card its own scroller. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .match-card {
    display: grid;
    grid-template-columns: 190px minmax(360px, 1.3fr) minmax(220px, .7fr) 180px;
    align-items: stretch;
    /* overflow:hidden below makes this a scroll container, and a scroll
       container's automatic minimum size is 0 — so the card collapsed under its
       own columns and clipped them with no way to reach the far side. Pinning it
       to min-content restores the floor and tracks the columns if they change. */
    min-width: min-content;
  }
  .match-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    padding: 18px;
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  .match-stage {
    grid-column: 1 / -1;
  }
  .match-teams {
    padding: 18px;
    align-items: center;
  }
  .match-team {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .match-team p { font-size: 18px; }
  .match-score { font-size: 13px; }
  .match-vs { width: 36px; font-size: 14px; }
  .match-feature {
    margin: 18px 0;
    border-top: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-left: 1px solid rgba(255, 255, 255, .08);
  }
  .match-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 18px;
  }
}

/* ==========================================================================
   Teaser (Phase 1) page — single fold: logo + dates + venue + CTAs
   ========================================================================== */
/* The teaser is a single fold and the sponsor strip has to be reachable
   without scrolling, so the fold owns the 100svh and the hero takes whatever
   the strip leaves — rather than both claiming a full viewport between them. */
.teaser-fold {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.teaser-page .teaser-hero {
  min-height: 0;
  flex: 1;
}
.marquee--teaser {
  flex: none;
  border-top: 1px solid rgba(124, 245, 180, .18);
}

.teaser-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 24px 16px 22px;
}
.teaser-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: var(--navy-deep);
}
.teaser-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 10, 50, .24) 0%,
    rgba(16, 10, 50, .42) 42%,
    rgba(16, 10, 50, .68) 72%,
    rgba(16, 10, 50, .9) 100%);
}
.teaser-hero-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.teaser-logo-wrap { line-height: 0; }
.teaser-logo-img {
  width: min(58vw, 240px);
  height: auto;
  filter: drop-shadow(0 10px 34px rgba(4, 2, 20, .6));
}
.teaser-dates {
  margin-top: 14px;
  font-family: var(--stretch);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 3px 18px rgba(4, 2, 20, .6);
}
.teaser-dates-amp { color: var(--mint); padding: 0 4px; }
.teaser-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.teaser-venue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--mint);
  padding: 6px 10px;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.teaser-venue:hover { border-bottom-color: var(--mint); }
.teaser-save-dates {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(11, 7, 48, .35);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease;
}
.teaser-save-dates:hover {
  border-color: var(--mint);
  background: rgba(124, 245, 180, .12);
  color: var(--mint);
}

.teaser-hero-ctas {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-top: 20px;
  justify-content: center; /* keep the CTA row centered when it doesn't fill the box */
}

@media (min-width: 960px) {
  .teaser-hero { padding: 40px 48px 44px; }
  .teaser-logo-img { width: min(30vw, 340px); }
  .teaser-dates { font-size: 26px; letter-spacing: 2px; margin-top: 20px; }
  .teaser-venue { font-size: 13px; }
  .teaser-icon { width: 17px; height: 17px; }
  .teaser-save-dates { font-size: 13px; padding: 13px 26px; margin-top: 20px; }
  .teaser-hero-ctas { max-width: 900px; margin-top: 34px; }
}

/* ==========================================================================
   Save-the-Dates action sheet — bottom sheet on mobile, centered on desktop
   ========================================================================== */
.sheet {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 480px;
  margin: auto auto 0; /* bottom sheet */
  background: #0E0936;
  color: #fff;
  border: 1px solid rgba(124, 245, 180, .22);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 60px rgba(4, 2, 20, .6);
}
.sheet::backdrop {
  background: rgba(8, 5, 34, .72);
}
.sheet-head { padding: 22px 22px 14px; }
.sheet-title {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 24px;
  color: var(--mint);
}
.sheet-sub {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
/* Used as both <a> (save-the-dates) and <button> (check-in). A button drags in
   UA chrome — buttonface background, buttontext colour — which renders as a
   pale block with unreadable copy on the dark sheet, so reset it here rather
   than per use site. */
.sheet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 22px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.sheet-option:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.sheet-option:hover { background: rgba(124, 245, 180, .08); }
.sheet-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: var(--mint);
}
.sheet-option strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .3px;
}
.sheet-option small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.sheet-cancel {
  width: 100%;
  padding: 15px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-soft);
  font-family: var(--ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.sheet-cancel:hover { background: rgba(255, 255, 255, .1); }

@media (min-width: 960px) {
  .sheet {
    margin: auto; /* centered card */
    border-bottom: 1px solid rgba(124, 245, 180, .22);
    border-radius: 16px;
  }
  .sheet-cancel { border-radius: 0 0 15px 15px; }
}

/* ==========================================================================
   Rules page
   ========================================================================== */
.rules-page main {
  padding: calc(var(--nav-h) + 26px) 16px 56px;
  max-width: 860px;
  margin: 0 auto;
}
.rules-hero .section-title { font-size: 42px; }
.rules-hero p {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* FAQ — the quick version */
.faq-panel {
  margin-top: 30px;
  border: 1px solid rgba(124, 245, 180, .28);
  background: rgba(11, 7, 48, .55);
  border-radius: 14px;
  padding: 20px 18px 8px;
}
.faq-panel > h2 {
  font-family: var(--stretch);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--mint);
  margin-bottom: 6px;
}
.faq-panel > p {
  color: var(--ink-muted);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.faq-item:last-of-type { border-bottom: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 42px 16px 12px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .3px;
  color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mint);
  font-size: 20px;
  font-weight: 400;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p,
.faq-item ul {
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.65;
  padding: 0 12px 18px;
}
.faq-item ul { padding-left: 30px; padding-bottom: 18px; }
.faq-item a { color: var(--teal); }
.faq-item a:hover { color: var(--mint); }

/* Full rulebook body */
.rules-body { margin-top: 20px; }
.rules-body section { margin-top: 40px; }
.rules-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--teal);
  display: block;
  margin-bottom: 4px;
}
.rules-body h2 {
  font-family: var(--stretch);
  font-style: italic;
  text-transform: uppercase;
  font-size: 27px;
  color: #fff;
  line-height: 1.05;
}
.rules-body h3 {
  margin: 24px 0 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mint);
}
.rules-body p,
.rules-body li {
  color: rgba(237, 235, 255, .88);
  font-size: 14px;
  line-height: 1.7;
}
.rules-body p { margin-top: 8px; }
.rules-body ul, .rules-body ol { margin: 8px 0 0 18px; }
.rules-body li { margin-top: 5px; }
.rules-body li > ul { margin-top: 4px; }
.rules-body a { color: var(--teal); }
.rules-body a:hover { color: var(--mint); }

.rules-table-wrap { overflow-x: auto; margin-top: 12px; }
.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: rgba(11, 7, 48, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  overflow: hidden;
}
.rules-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal);
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.rules-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(237, 235, 255, .88);
  vertical-align: top;
}
.rules-table tr:last-child td { border-bottom: 0; }

.rules-note {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--mint);
  background: rgba(124, 245, 180, .07);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 960px) {
  .rules-page main { padding-top: calc(var(--nav-h) + 44px); }
  .rules-hero .section-title { font-size: 62px; }
  .faq-panel { padding: 26px 26px 12px; }
  .faq-item summary { font-size: 14.5px; }
  .rules-body h2 { font-size: 32px; }
}

/* ==========================================================================
   Waiver and registration page
   ========================================================================== */
.waiver-page {
  background:
    radial-gradient(circle at 82% 10%, rgba(124, 245, 180, .12), transparent 28%),
    linear-gradient(180deg, var(--navy) 0%, #050911 58%, var(--navy-deep) 100%);
}
.waiver-main {
  padding: calc(var(--nav-h) + 28px) 16px 54px;
  max-width: 980px;
  margin: 0 auto;
}
.waiver-intro .section-title { font-size: 40px; }
.waiver-copy,
.form-panel {
  margin-top: 24px;
  border: 1px solid rgba(124, 245, 180, .2);
  background: rgba(4, 9, 15, .68);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}
.waiver-copy {
  padding: 20px 18px;
}
.waiver-copy p,
.release-copy p {
  color: rgba(237, 235, 255, .88);
  font-size: 14px;
  line-height: 1.7;
}
.waiver-copy p + p,
.release-copy p + p { margin-top: 10px; }
.waiver-copy h2 {
  margin-top: 22px;
  font-family: var(--stretch);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mint);
}
.waiver-copy a,
.release-copy a { color: var(--teal); }
.waiver-copy a:hover,
.release-copy a:hover { color: var(--mint); }

.waiver-form { margin-top: 28px; }
.form-panel {
  padding: 0 16px 18px;
}
.form-panel + .form-panel { margin-top: 18px; }
.form-panel-head {
  padding: 20px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.form-panel-head h2 {
  font-family: var(--stretch);
  font-style: italic;
  font-size: 31px;
  line-height: 1;
  text-transform: uppercase;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 18px;
}
.field {
  display: grid;
  gap: 7px;
}
.field span {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--teal);
}
.field input,
.field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: 700 15px var(--ui);
  padding: 12px 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field select { color-scheme: dark; }
.field input:focus,
.field select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(124, 245, 180, .14);
  background: rgba(255, 255, 255, .09);
}
.field input::placeholder { color: rgba(255, 255, 255, .38); }
.is-hidden { display: none !important; }

.release-copy {
  padding-top: 18px;
  max-height: 460px;
  overflow: auto;
  padding-right: 6px;
}
.release-copy h3 {
  margin: 22px 0 7px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--mint);
}
.waiver-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(124, 245, 180, .24);
  background: rgba(124, 245, 180, .07);
}
.waiver-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint);
  margin-top: 2px;
}
.waiver-check span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.form-actions {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.form-actions .cta {
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
}
.form-status {
  min-height: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.form-status.is-error { color: #FF9BAE; }
.form-status.is-success { color: var(--mint); }

@media (min-width: 960px) {
  .waiver-main { padding-top: calc(var(--nav-h) + 48px); }
  .waiver-intro .section-title { font-size: 64px; }
  .waiver-copy { padding: 26px 28px; }
  .form-panel { padding: 0 28px 26px; }
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
  .field--wide { grid-column: 1 / -1; }
  .form-panel-head h2 { font-size: 40px; }
  .form-actions {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .form-actions .cta { min-width: 240px; }
}

/* Waiver tonal-layer treatment */
.waiver-page .waiver-main { max-width: 1120px; }
.waiver-page .waiver-copy {
  display: grid;
  gap: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.waiver-page .waiver-copy h2 {
  margin-top: 0;
  margin-bottom: 12px;
}
.waiver-page .form-panel {
  padding: 24px 18px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.waiver-page .form-panel + .form-panel { margin-top: 22px; }
.waiver-page .form-panel-head {
  padding: 0;
  border-bottom: 0;
}
.waiver-page .form-grid { padding-top: 24px; }
.waiver-page .field input,
.waiver-page .field select {
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-deep);
  box-shadow: 0 0 0 0 rgba(124, 245, 180, 0);
  transition: box-shadow .15s ease, background .15s ease;
}
.waiver-page .field input:focus,
.waiver-page .field select:focus,
.raffle-page .field input:focus,
.raffle-page .field select:focus {
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 0 6px rgba(124, 245, 180, .12),
    0 0 22px rgba(124, 245, 180, .1);
  background: rgba(4, 9, 15, .82);
}
.waiver-page .field select:disabled {
  cursor: not-allowed;
  opacity: .62;
}
/* The location note sits directly under the email helper and reads as one
   block with it, so it has to carry the same type — not a <p>'s inherited
   size against a <small>'s 0.8em. */
.waiver-page .field small,
.raffle-page .field small,
.raffle-page .raffle-privacy {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
}
/* the two lines stack directly, so they need the same measure as well as the
   same type or the ragged edges give away that they are different elements */
.raffle-page .field--wide small,
.raffle-page .raffle-privacy { max-width: 62ch; }
.waiver-page .field small.is-error,
.raffle-page .field small.is-error { color: #FF9BAE; }
.waiver-page .waiver-check {
  border: 0;
  border-radius: 14px;
}
.waiver-page .form-actions button.cta--primary {
  min-height: 54px;
  width: 100%;
  padding: 15px 24px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--mint), var(--teal));
  color: var(--navy);
  box-shadow: 0 14px 34px rgba(45, 212, 191, .18);
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.waiver-page .form-actions button.cta--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 16px 38px rgba(45, 212, 191, .25);
  transform: translateY(-1px);
}
.waiver-page .form-actions button.cta--primary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}
.waiver-page .form-actions button.cta--primary:disabled {
  cursor: wait;
  filter: grayscale(.3);
  opacity: .65;
  transform: none;
}

@media (min-width: 960px) {
  .waiver-page .waiver-copy {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 72px;
    align-items: start;
    margin-top: 30px;
  }
  .waiver-page .form-panel {
    padding: 32px 36px 34px;
    border-radius: 24px;
  }
  .waiver-page .form-actions button.cta--primary { width: auto; }
}

/* ==========================================================================
   Waiver confirmation page
   ========================================================================== */
.confirmation-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 78% 22%, rgba(124, 245, 180, .2), transparent 28%),
    radial-gradient(circle at 16% 78%, rgba(45, 212, 191, .14), transparent 24%),
    linear-gradient(180deg, var(--navy) 0%, #050911 60%, var(--navy-deep) 100%);
}
.confirmation-main {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 34px) 16px 56px;
}
.confirmation-card {
  width: min(100%, 860px);
  border: 1px solid rgba(124, 245, 180, .24);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 44%),
    rgba(4, 9, 15, .72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  padding: 28px 20px;
}
.confirmation-card .section-title {
  margin-top: 8px;
  font-size: 46px;
}
.confirmation-lede {
  margin-top: 18px;
  max-width: 680px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.45;
}
.confirmation-copy {
  margin-top: 12px;
  max-width: 640px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.7;
}
.confirmation-actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 960px) {
  .confirmation-main { padding: calc(var(--nav-h) + 56px) 48px 72px; }
  .confirmation-card { padding: 48px; }
  .confirmation-card .section-title { font-size: 76px; }
  .confirmation-lede { font-size: 22px; }
  .confirmation-actions {
    display: flex;
    align-items: center;
  }
}

/* ==========================================================================
   Raffle check-in page
   ========================================================================== */
.raffle-privacy {
  border-left: 3px solid var(--teal);
  background: rgba(45, 212, 191, .08);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
}
.raffle-closed-copy,
.raffle-result-copy,
.panel-copy {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
/* Standing state plus the control that leaves it — the sign-out is a utility,
   not a form action, so it reads as a link beside the status rather than as a
   button competing with the scanner. */
.panel-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
}
.panel-note .panel-copy { flex: 1 1 22ch; margin: 0; }
.panel-link {
  flex: 0 0 auto;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 700 11px var(--ui);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .15s ease;
}
.panel-link:hover { color: var(--accent, var(--mint)); }
.panel-link:focus-visible { outline: 2px solid var(--accent, var(--mint)); outline-offset: 3px; }
/* a scan code is short; a full-width input reads as a comment box */
.field--code { max-width: 420px; }
/* the field is a div now, so its label needs the field-label treatment back */
.raffle-page .field--code > label {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--accent, var(--teal));
}
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1 1 auto; min-width: 0; }
/* Camera fallback for when the booth reader is missing or jammed. Sized to the
   input so the pair reads as one control. */
.code-cam {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--control-radius, 12px);
  background: rgba(4, 9, 15, .82);
  color: var(--accent, var(--mint));
  font: 800 11px var(--ui);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.code-cam:hover { border-color: var(--accent, var(--mint)); background: rgba(4, 9, 15, .95); }
.code-cam:focus-visible { outline: 2px solid var(--accent, var(--mint)); outline-offset: 2px; }
.code-cam svg { width: 17px; height: 17px; display: block; }
@media (max-width: 430px) {
  /* label drops away, the icon carries it */
  .code-cam { padding: 0 12px; }
  .code-cam span { display: none; }
}

/* ---- camera scanner sheet ---- */
.cam-stage {
  position: relative;
  aspect-ratio: 1;
  background: #05070d;
  overflow: hidden;
}
.cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* a frame to aim with — the decoder reads the whole image, this is just a cue */
.cam-reticle {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 62%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(4, 2, 20, .45);
  pointer-events: none;
}
.cam-status {
  padding: 12px 22px 0;
  text-align: center;
}
.cam-status:empty { display: none; }
#qrStatus { margin-top: 14px; }
.raffle-closed-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.raffle-closed-actions .cta { flex: 0 1 auto; padding: 13px 22px; font-size: 13px; }
.raffle-result { border-color: rgba(124, 245, 180, .45); }
.raffle-result--retry { border-color: rgba(255, 255, 255, .25); }
.raffle-result .form-panel-head h2 { color: var(--mint); }
.raffle-result--retry .form-panel-head h2 { color: #fff; }
#submitBtn { display: inline-flex; align-items: center; gap: 8px; }
#submitBtn:disabled { opacity: .6; cursor: wait; filter: none; }

/* ==========================================================================
   Rules page — section index
   ========================================================================== */
.rules-toc {
  margin-top: 30px;
  border: 1px solid rgba(124, 245, 180, .28);
  background: rgba(11, 7, 48, .55);
  border-radius: 14px;
  padding: 20px 18px;
}
.rules-toc h2 {
  font-family: var(--stretch);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--mint);
  margin-bottom: 12px;
}
.rules-toc ol {
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: toc;
}
.rules-toc li { counter-increment: toc; }
.rules-toc a {
  display: flex;
  gap: 12px;
  padding: 9px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: color .15s ease;
}
.rules-toc li:last-child a { border-bottom: 0; }
.rules-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--teal);
  flex: 0 0 auto;
  padding-top: 2px;
}
.rules-toc a:hover { color: var(--mint); }

@media (min-width: 960px) {
  .rules-toc { padding: 26px; }
  .rules-toc ol { grid-template-columns: 1fr 1fr; gap: 2px 32px; }
}

/* ==========================================================================
   Shared tonal-layer system for public pages
   ========================================================================== */
body:not(.admin-page) .cta.cta--secondary,
body:not(.admin-page) button.cta.cta--secondary {
  border: 0;
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, .1);
  color: var(--mint);
}
body:not(.admin-page) .cta.cta--secondary:hover,
body:not(.admin-page) button.cta.cta--secondary:hover {
  background: rgba(124, 245, 180, .14);
}
body:not(.admin-page) .hero-ctas .cta.cta--secondary,
body:not(.admin-page) .hero-ctas button.cta.cta--secondary {
  border: 2px solid var(--mint);
  background: transparent;
  color: var(--mint);
}
body:not(.admin-page) .hero-ctas .cta.cta--secondary:hover,
body:not(.admin-page) .hero-ctas button.cta.cta--secondary:hover {
  background: rgba(124, 245, 180, .1);
}
body:not(.admin-page) button.cta.cta--primary {
  background: linear-gradient(90deg, var(--mint), var(--teal));
  color: var(--navy);
}
body:not(.admin-page) .cta:focus-visible,
body:not(.admin-page) .section-link:focus-visible,
body:not(.admin-page) .day-tab:focus-visible,
body:not(.admin-page) .video-filter select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

/* Homepage and gameday landing */
.marquee {
  border-top: 0;
  border-bottom: 0;
  background: rgba(8, 5, 34, .82);
}
.marquee-tier { border-left: 0; }
.preview-panel,
.rules-preview-list {
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.preview-panel-head { border-bottom: 0; }
.home-match-list,
.home-standings-list {
  gap: 8px;
  padding: 0 12px 12px;
}
.home-match,
.home-standing-row {
  border-bottom: 0;
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .38);
}
.home-status {
  border: 0;
  border-radius: 999px;
  background: rgba(124, 245, 180, .1);
}
.home-status--final {
  border: 0;
  background: rgba(255, 255, 255, .08);
}
.section-link {
  border: 0;
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 12px 30px rgba(4, 2, 20, .16);
}
.section-link:hover {
  background: linear-gradient(90deg, var(--mint), var(--teal));
  color: var(--navy);
}
.team-card {
  border: 0;
  border-radius: 20px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.team-card:hover {
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
}
.live-frame {
  border: 0;
  border-radius: 18px;
  background-color: var(--surface-deep);
  box-shadow: 0 18px 44px rgba(4, 2, 20, .28);
}
/* .live-frame centres its children so the "stream is offline" placeholder sits
   in the middle. Once the embed is injected the iframe inherits that treatment
   and, having no intrinsic size of its own, renders at the 300x150 default
   floating in the centre of the frame. Taking it out of the flex flow lets it
   fill the 16/9 box the frame already reserves. */
.live-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-thumb {
  border: 0;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, .06);
}
.video-card:hover .video-thumb {
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(4, 2, 20, .24);
}
.rules-preview-list {
  padding: 12px;
}
.rules-preview .faq-item {
  margin-top: 8px;
  border-bottom: 0;
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .34);
  overflow: hidden;
}
.rules-preview .faq-item:first-child { margin-top: 0; }
.teaser-save-dates {
  border: 0;
  background: rgba(255, 255, 255, .12);
}
.sheet {
  border: 0;
  background: rgba(14, 9, 54, .94);
  box-shadow: var(--surface-shadow);
}
.sheet-option,
.sheet-cancel { border-top: 0; }

/* Rules and FAQ */
.rules-page main { max-width: 980px; }
.faq-panel,
.rules-toc {
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rules-page .faq-item {
  margin-top: 8px;
  border-bottom: 0;
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .34);
  overflow: hidden;
}
.rules-page .faq-item:first-of-type { margin-top: 0; }
.rules-toc ol { gap: 4px 20px; }
.rules-toc a {
  border-bottom: 0;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.rules-toc a:hover { background: rgba(124, 245, 180, .08); }
.rules-body {
  display: grid;
  gap: 18px;
}
.rules-body section {
  margin-top: 0;
  padding: 22px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .038);
}
.rules-table {
  border: 0;
  border-radius: 14px;
  background: rgba(4, 9, 15, .38);
}
.rules-table th { border-bottom-color: rgba(255, 255, 255, .08); }
.rules-table td { border-bottom-color: rgba(255, 255, 255, .045); }
.rules-note {
  border-left: 0;
  border-radius: 14px;
  background: rgba(124, 245, 180, .08);
}

/* Video library */
.video-library {
  border: 0;
  border-radius: var(--surface-radius);
  background: rgba(11, 7, 48, .94);
  box-shadow: 0 -18px 60px rgba(4, 2, 20, .24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.video-library-head {
  border-bottom: 0;
}
.video-filter select {
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-deep);
  outline: none;
}
.video-filter select:focus {
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 0 6px rgba(124, 245, 180, .12);
}
.library-video-card {
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 14px 34px rgba(4, 2, 20, .18);
}
.library-video-card:target {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 0 6px rgba(124, 245, 180, .12);
}
.library-video-actions {
  border-top: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  padding: 10px;
}

/* Registration and raffle */
/* same measure as /waiver and /rules — the forms here are the same forms, and
   a wider column made the page read as if it belonged to another site */
.raffle-page .waiver-copy {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.raffle-page .form-panel {
  padding: 24px 18px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.raffle-page .form-panel-head {
  padding: 0;
  border-bottom: 0;
}
.raffle-page .form-grid { padding-top: 24px; }
.raffle-page .field input,
.raffle-page .field select {
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-deep);
  box-shadow: 0 0 0 0 rgba(124, 245, 180, 0);
}
.raffle-page .field input:focus,
.raffle-page .field select:focus {
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 0 6px rgba(124, 245, 180, .12),
    0 0 22px rgba(124, 245, 180, .1);
  background: rgba(4, 9, 15, .82);
}
.raffle-privacy {
  border-left: 0;
  border-radius: var(--control-radius);
}
.raffle-result,
.raffle-result--retry { border-color: transparent; }
.raffle-page .form-actions button.cta--primary {
  min-height: 54px;
  width: 100%;
  padding: 15px 24px;
  box-shadow: 0 14px 34px rgba(45, 212, 191, .18);
}

/* Schedule and standings */
.standings-panel,
.schedule-board {
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.schedule-section-head { border-bottom: 0; }
.standing-team-mark { border-radius: 50%; }
.day-tabs {
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 0;
}
.day-tab {
  min-height: 58px;
  border-right: 0;
  border-radius: var(--control-radius);
  background: rgba(4, 9, 15, .44);
}
.match-card {
  border: 0;
  border-radius: 18px;
  background: rgba(4, 9, 15, .42);
  box-shadow: 0 14px 34px rgba(4, 2, 20, .16);
}
.match-card::before { opacity: 0; }
.match-meta span {
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
}
.match-stage {
  border: 0;
  border-radius: 10px;
}
.match-team { border-radius: 14px; }
.match-feature {
  border: 0;
  border-radius: 14px;
  background: rgba(4, 9, 15, .5);
}
.player-portrait.has-photo {
  border: 0;
  border-radius: 10px;
}
.winner-pill,
.match-actions a,
.video-pending {
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .055);
}

/* Confirmation */
.confirmation-card {
  border: 0;
  border-radius: var(--surface-radius);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 44%),
    var(--surface-tonal);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (min-width: 960px) {
  .rules-body section { padding: 28px 30px; }
  .raffle-page .form-panel {
    padding: 32px 36px 34px;
    border-radius: var(--surface-radius);
  }
  .raffle-page .form-actions button.cta--primary { width: auto; }
  .match-meta { border-right: 0; }
  .match-feature {
    border-right: 0;
    border-left: 0;
  }
  .sheet { border-bottom: 0; }
}

/* Shared public-page header and background */
.rules-page,
.videos-page,
.schedule-page,
.waiver-page,
.raffle-page {
  background:
    radial-gradient(circle at 82% 12%, rgba(45, 212, 191, .18), transparent 28%),
    linear-gradient(180deg, var(--navy) 0%, #050911 48%, var(--navy-deep) 100%);
}
.page-hero {
  padding: 46px 16px 22px;
}
.page-hero .section-title {
  font-size: 56px;
  line-height: .82;
}
.rules-page main,
.waiver-page .waiver-main,
.raffle-page .waiver-main {
  padding-top: var(--nav-h);
}
.rules-page .page-hero,
.waiver-page .page-hero,
.raffle-page .page-hero {
  padding-right: 0;
  padding-left: 0;
}
.rules-page .faq-panel,
.waiver-page .waiver-copy,
.raffle-page .waiver-copy {
  margin-top: 0;
}

@media (max-width: 720px) {
  .page-hero .section-title {
    font-size: clamp(66px, 24vw, 112px);
    line-height: .78;
  }
}

@media (min-width: 960px) {
  .page-hero {
    padding: 70px 48px 30px;
  }
  .page-hero .section-title {
    font-size: 72px;
  }
  .rules-page main,
  .waiver-page .waiver-main,
  .raffle-page .waiver-main {
    padding-top: var(--nav-h);
  }
  .rules-page .page-hero,
  .waiver-page .page-hero,
  .raffle-page .page-hero {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   Gametime preview refinements
   ========================================================================== */
/* team colour marks in the match list (same language as /schedule) */
.home-match h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}
.home-match-team {
  display: inline-flex;
  align-items: center;
}
.home-match-team .standing-team-mark {
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.home-match h4 .home-match-vs {
  margin: 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mint);
}

/* standings preview: colour mark + win-loss */
.home-standing-row { grid-template-columns: 42px minmax(0, 1fr) 60px; }
.home-standing-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-standing-row strong .standing-team-mark {
  width: 10px;
  height: 10px;
  margin-right: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}
.home-standing-row em { white-space: nowrap; text-align: right; }
.home-standing-row em i {
  font-style: normal;
  opacity: .62;
  font-size: .92em;
}

/* Rules FAQ: breathing room either side of the summary row */
.rules-preview .faq-item summary {
  padding-left: 16px;
  padding-right: 52px;
}
.rules-preview .faq-item summary::after { right: 18px; }
.rules-preview .faq-item p {
  padding-left: 16px;
  padding-right: 16px;
}

/* recent game videos on /gametime — click-to-play embeds */
.home-video-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 0 16px 12px 0;
  margin-right: -16px;
  -webkit-overflow-scrolling: touch;
}
.home-video-grid::-webkit-scrollbar {
  height: 7px;
}
.home-video-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
}
.home-video-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(84, 240, 187, .72);
}
.home-video-card {
  flex: 0 0 clamp(260px, 78vw, 430px);
  width: clamp(260px, 78vw, 430px);
  max-width: 430px;
  min-width: 0;
  scroll-snap-align: start;
  padding: 10px 10px 12px;
  border: 1px solid rgba(156, 240, 227, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(70, 12, 236, .32), transparent 42%),
    linear-gradient(145deg, rgba(42, 31, 102, .94), rgba(5, 8, 27, .96) 62%, rgba(12, 8, 44, .94));
  box-shadow: 0 18px 46px rgba(8, 4, 34, .24);
}
.home-video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(4, 9, 15, .55);
  border: 1px solid rgba(124, 245, 180, .32);
}
.home-video-player button {
  appearance: none;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: none;
  cursor: pointer;
}
.home-video-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-video-player .play-btn { position: relative; z-index: 1; }
.home-video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.home-video-card:hover .home-video-player { border-color: rgba(124, 245, 180, .55); }
.home-video-card .video-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 12px 6px 0;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
.home-video-card .video-meta {
  margin: 5px 6px 0;
  color: var(--poster-mint);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
.home-video-empty {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 960px) {
  .home-video-grid {
    gap: 20px;
    max-width: none;
    margin: 0 -48px 0 0;
    padding-right: 48px;
  }
  .home-video-card {
    flex-basis: clamp(340px, 32vw, 430px);
    width: clamp(340px, 32vw, 430px);
    max-width: 430px;
  }
}

/* ==========================================================================
   Raffle prize showcase (/checkin)
   ========================================================================== */
/* 24px is the page's panel rhythm (.waiver-copy, .form-panel) */
.prize-showcase { margin-top: 24px; }
.prize-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--panel-radius, 18px);
  padding: 26px 20px 24px;
  background:
    radial-gradient(ellipse 70% 90% at 12% 8%, rgba(124, 58, 237, .5), transparent 62%),
    linear-gradient(135deg, #6C4CF5 0%, #4A6FE8 46%, #35D3B8 100%);
  box-shadow: var(--surface-shadow, 0 18px 38px rgba(4, 2, 20, .3));
}
/* starfield, echoing the team cards */
.prize-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 1px at 22% 24%, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle 1.3px at 68% 16%, rgba(255,255,255,.6) 0 1.3px, transparent 2px),
    radial-gradient(circle 1px at 46% 74%, rgba(255,255,255,.65) 0 1px, transparent 1.7px),
    radial-gradient(circle 1px at 86% 58%, rgba(255,255,255,.5) 0 1px, transparent 1.7px);
  background-size: 160px 130px, 200px 160px, 180px 150px, 220px 170px;
}
.prize-banner > * { position: relative; }
.prize-banner h2 {
  font-family: var(--stretch);
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(30px, 9vw, 46px);
  line-height: .92;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 4px 22px rgba(4, 2, 20, .4);
}
.prize-blurb {
  color: rgba(255, 255, 255, .92);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 52ch;
}
.prize-cta { margin-top: 16px; display: inline-flex; width: auto; }

/* One column on phones: these are posters to look at, and two 160px thumbnails
   show nothing worth tapping. */
.prize-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 560px) {
  .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prize-card {
  min-width: 0;
  border-radius: var(--control-radius, 12px);
  overflow: hidden;
  background: rgba(11, 7, 48, .55);
  border: 1px solid rgba(124, 245, 180, .22);
}
.prize-card--feature {
  grid-column: 1 / -1;
  border-color: rgba(124, 245, 180, .5);
}
/* 4:5 matches the posters' own 1080x1350, so `cover` crops nothing. */
.prize-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
.prize-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.prize-media:hover img { transform: scale(1.03); }
.prize-media:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
/* the affordance has to survive whatever is behind it, hence the scrim */
.prize-zoom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(11, 7, 48, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 800 9.5px/1 var(--ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.prize-zoom svg { width: 13px; height: 13px; display: block; }
.prize-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mint);
  color: #16104A;
  font-weight: 900;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.prize-copy { padding: 12px 14px 14px; }
.prize-sponsor {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.prize-copy h3 {
  font-family: var(--stretch);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.prize-drawn {
  margin-top: 6px;
  color: var(--mint);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .prize-banner { padding: 40px 38px 36px; }
  .prize-grid {
    gap: 16px;
    margin-top: 16px;
    align-items: start;
  }
  .prize-blurb { font-size: 15px; }
  .prize-copy h3 { font-size: 26px; }
}

/* ==========================================================================
   Raffle mechanics
   ========================================================================== */
.mechanics-list {
  list-style: none;
  display: grid;
  gap: 12px;
  padding-top: 18px;
}
.mechanics-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}
.mechanics-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--mint));
}
.mechanics-list strong { color: #fff; font-weight: 800; }

.draw-days {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.draw-day {
  padding: 16px 18px;
  border: 1px solid rgba(124, 245, 180, .28);
  border-radius: var(--control-radius, 12px);
  background: rgba(11, 7, 48, .45);
}
.draw-day-label {
  color: var(--accent, var(--mint));
  font: 800 10px/1 var(--mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.draw-day-when {
  margin-top: 8px;
  color: #fff;
  font-family: var(--stretch);
  font-style: italic;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
}
@media (min-width: 560px) {
  .draw-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Poster lightbox — fit by default, tap for natural size, drag to pan
   ========================================================================== */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  /* dvh so the poster is not cut off behind mobile browser chrome */
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(4, 2, 20, .92); }
.lightbox-stage {
  width: 100%;
  height: 100%;
  padding: 56px 16px 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* The cap is in viewport units, not `max-height: 100%`: the percentage would
   resolve against an auto-sized grid area — a circular dependency the spec
   resolves to `none`, which is how a 1350px poster escaped the stage entirely.
   108px is the stage's own 56px + 52px padding. */
.lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  width: auto;
  height: auto;
  border-radius: 10px;
  cursor: zoom-in;
}
/* zoomed: the stage becomes the scroll container and the image goes to its
   natural size, so panning is plain scrolling — momentum and pinch stay native */
.lightbox.is-zoomed .lightbox-stage {
  overflow: auto;
  place-items: start;
  padding: 56px 0 52px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.lightbox.is-zoomed .lightbox-stage:active { cursor: grabbing; }
.lightbox.is-zoomed .lightbox-stage img {
  max-width: none;
  max-height: none;
  width: auto;
  border-radius: 0;
  cursor: zoom-out;
  /* keep a narrow poster centred once the stage starts scrolling */
  margin: 0 auto;
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .22); }
.lightbox-close:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.lightbox-close svg { width: 17px; height: 17px; display: block; }
.lightbox-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font: 700 10px/1 var(--ui);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  pointer-events: none;
}

/* team colour marks on the Videos page */
.video-team {
  display: inline-flex;
  align-items: center;
}
.video-team .standing-team-mark {
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.videos-feature-matchup,
.library-video-copy h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}
.videos-feature-matchup .video-vs {
  font-family: var(--mono);
  font-size: .62em;
  color: var(--mint);
}

/* ==========================================================================
   Waiver form — accents follow the selected team
   --accent / --accent-soft / --accent-ink are set by js/waiver.js once a team
   is chosen. They default to the house mint/teal so the form looks correct
   before any selection and if JS never runs.
   ========================================================================== */
.waiver-page {
  --accent: var(--mint);
  --accent-2: var(--teal);
  --accent-soft: rgba(124, 245, 180, .14);
  --accent-ink: var(--navy);
}
.waiver-page .section-kicker,
.waiver-page .section-kicker--teal,
.waiver-page .field span,
.raffle-page .section-kicker,
.raffle-page .section-kicker--teal,
.raffle-page .field span,
.waiver-page .waiver-copy h2,
.waiver-page .release-copy h3 {
  /* the fallback matters: an unset custom property makes the declaration
     invalid at computed-value time, and colour being inherited that would
     leave these the same tone as body copy rather than the brand mint */
  color: var(--accent-2, var(--poster-mint-main));
  transition: color .25s ease;
}
/* Copy links follow the team as well — they were the last teal left on the
   page once a team was picked. --accent rather than --accent-2 so they stay a
   step brighter than the headings they sit under. */
.waiver-page .waiver-copy a,
.waiver-page .release-copy a {
  color: var(--accent, var(--teal));
  transition: color .25s ease;
}
.waiver-page .waiver-copy a:hover,
.waiver-page .release-copy a:hover {
  color: var(--accent-2, var(--mint));
}
.waiver-page .field input:focus,
.waiver-page .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.waiver-page .waiver-check input { accent-color: var(--accent); }
.waiver-page .form-status.is-success,
.raffle-page .form-status.is-success { color: var(--accent); }
/* must out-specify `body:not(.admin-page) button.cta.cta--primary` */
body.waiver-page .form-actions button.cta.cta--primary,
body.raffle-page .form-actions button.cta.cta--primary,
body.raffle-page .prize-cta {
  /* Fallbacks matter here: an unset custom property makes the whole
     declaration invalid at computed-value time, which resolves to the
     property's initial value — a transparent button — not to the unthemed
     rule above. Before a team is picked these vars do not exist. */
  background: var(--accent-btn, linear-gradient(90deg, var(--mint), var(--teal)));
  color: var(--accent-ink, var(--navy));
  transition: background .25s ease, color .25s ease, filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.waiver-page .form-actions button.cta.cta--primary:focus-visible,
body.raffle-page .form-actions button.cta.cta--primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 6px var(--accent-soft),
    0 0 22px var(--accent-soft);
}
/* the team select itself carries a dot of its own colour */
.waiver-page .field--team,
.raffle-page .field--team { position: relative; }
.waiver-page .team-swatch,
.raffle-page .team-swatch {
  display: inline-block;
  /* collapsed until a team is picked, otherwise it indents the TEAM label
     out of line with its sibling field labels */
  width: 0;
  height: 11px;
  border-radius: 50%;
  margin-right: 0;
  transition: width .2s ease, margin-right .2s ease, opacity .25s ease;
  vertical-align: -1px;
  background: linear-gradient(135deg, var(--team-a, var(--mint)), var(--team-b, var(--teal)));
  opacity: 0;
}
.waiver-page .team-swatch.is-on,
.raffle-page .team-swatch.is-on { opacity: 1; width: 11px; margin-right: 8px; }
/* Fields in a row are stretched to equal height, and each .field is a grid.
   TEAM has two rows where PLAYER NAME has three — it carries no helper <small>
   — so the spare height was being shared out to TEAM's label and select,
   dropping its select 12px below its neighbour's and making it taller. Packing
   the rows to the start leaves the slack at the bottom of the field instead. */
body:not(.admin-page) .field {
  align-content: start;
}
/* With the rows no longer stretched, the swatch's own 11px inline-block box
   is what would set the label apart — it adds ~1px of line box over a plain
   text label. Flex sizes the line to the taller of the two rather than
   stacking half-leading, whether the swatch is collapsed or expanded. */
.waiver-page .field--team > span,
.raffle-page .field--team > span {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Team cards — per-team background artwork
   The 2026 team art already carries the jersey shapes, texture and colour, so
   the CSS oval/shard decoration is suppressed on cards that have artwork.
   Falls back to the gradient treatment for any team without a `bg`.
   ========================================================================== */
.team-card--art {
  --team-card-rail: 34px;
  min-height: 0;
  aspect-ratio: .82;
  border: 0;
  border-radius: 0 44px 0 44px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 calc(100% - var(--team-card-rail)), #f5f7f2 calc(100% - var(--team-card-rail)) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 48%, color-mix(in srgb, var(--team-a) 42%, transparent) 100%),
    var(--team-art);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.team-card--art .team-card-oval,
.team-card--art .team-card-shards { display: none; }
/* the artwork supplies its own texture — drop the starfield dots and the
   diagonal streak "rain", keeping only the team accent bar and base vignette */
.team-card--art::before { display: none; }
.team-card--art::after {
  background: linear-gradient(90deg, transparent 0 calc(100% - var(--team-card-rail)), rgba(255, 255, 255, .72) calc(100% - var(--team-card-rail)) 100%);
}
/* The stock player was a single generic cutout in a green jersey, repeated
   across all eight cards. Superseded by the per-team cutouts below. */
.team-card--art .team-card-photo { display: none; }

/* The cutout stands on the bottom edge of the card, tucked against the name
   rail. The slot keeps clear of the rail so a raised elbow never disappears
   behind it — tied to --team-card-rail rather than a fixed inset, since the
   rail narrows at small breakpoints. */
.team-card-player-slot {
  position: absolute;
  inset: 10px calc(var(--team-card-rail) + 4px) 0 6px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  /* against the rail, not centred: the bento slots run up to 5x wider than
     they are tall, and a centred cutout floats in the middle of all that
     artwork with nothing to anchor it */
  justify-content: flex-end;
  pointer-events: none;
}
/* Every cutout is exported at the same pixel height with a tight crop, so
   sizing purely on height renders them all at one scale — heads line up across
   the row and nobody looks further away than their team-mates. Width is left
   to each figure's own build, which means the broader stances run wider than
   the slot; they are allowed to, and .team-card's overflow trims the excess at
   the card edge. Capping the width instead is what threw the scale off, since
   a wide figure would shrink below full height to fit. */
.team-card-player {
  height: 100%;
  width: auto;
  max-width: none;
  flex: none;
  /* the cutouts are bottom-cropped at the waist or knee, so they read as
     standing on the card edge rather than floating */
  object-position: bottom center;
  /* The cutout's edge needs some separation from the artwork behind it, but
     drop-shadow blurs the image's alpha mask on every re-raster, and a large
     radius over eight full-bleed figures is enough to make Safari drop tiles
     mid-scroll. A tight radius keeps the edge reading without that cost. */
  filter: drop-shadow(0 4px 8px rgba(4, 2, 20, .5));
}
/* The whole card is the hit target for its roster reveal. A real <button>
   rather than a click handler on the article, so it is keyboard-reachable and
   announced; it sits above the artwork, the cut-out and the name rail so no
   child can swallow the press. */
.team-card-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
}
.team-card-hit:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -3px;
}
/* Announced by screen readers, invisible on screen. clip-path over the older
   clip:rect so it survives transforms on the ancestor card. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.team-card--art .team-card-copy {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 4;
  width: var(--team-card-rail);
  min-height: 100%;
  display: flex;
  /* the name sits against the bottom of the rail; the rail's rounded corner is
     at the top, so that is the square end for type to sit on */
  align-items: flex-end;
  justify-content: center;
  padding: 14px 0 16px;
  background: #f5f7f2;
  border-radius: 0 44px 0 0;
}
.team-card--art .team-card-name {
  /* h3 keeps its default 1em block margin, which sat under the name as a
     second gap below the rail padding and, worse, ate room the fit pass had
     already counted as available */
  margin: 0;
  color: var(--team-a);
  /* STRRETCH ships a single 700 face; asking for 900 would only get a
     synthesised bold */
  font-family: 'STRRETCH Sans Free', var(--ui);
  font-weight: 700;
  font-size: clamp(15px, 3.6vw, 20px);
  /* em, not px: the shrink-to-fit pass scales font-size, and a fixed px
     tracking would stay behind as a constant the ratio can never remove —
     a thirteen-letter name kept overrunning its rail at any size */
  letter-spacing: .1em;
  line-height: .92;
  text-align: center;
  text-shadow: none;
  /* vertical-rl on its own reads top-to-bottom with the glyphs turned
     clockwise; the rotate(180deg) that used to sit here flipped it back to
     bottom-to-top */
  writing-mode: vertical-rl;
  transform-origin: center;
}

@media (max-width: 959px) {
  .teams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 30px 0 14px;
  }
  .team-card--art {
    --team-card-rail: 28px;
    border-radius: 0 36px 0 36px;
  }
  .team-card--art:nth-child(4n + 3),
  .team-card--art:nth-child(4n + 4) {
    translate: 22px 0;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 36px 0 0;
  }
  .team-card--art .team-card-name {
    font-size: clamp(12px, 3.35vw, 15px);
    letter-spacing: .55px;
  }
}

@media (min-width: 720px) and (max-width: 959px) {
  .teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1040px;
    gap: 28px 20px;
    padding: 0 28px;
  }
  .team-card--art {
    --team-card-rail: 26px;
    border-radius: 0 34px 0 34px;
  }
  .team-card--art:nth-child(4n + 3),
  .team-card--art:nth-child(4n + 4) {
    translate: 0;
  }
  .team-card--art:nth-child(n + 5) {
    translate: clamp(34px, 5vw, 58px) 0;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 34px 0 0;
    padding-bottom: 14px;
  }
  .team-card--art .team-card-name {
    font-size: clamp(11px, 1.7vw, 14px);
    letter-spacing: .5px;
  }
}

@media (min-width: 960px) {
  .teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 860px;
    margin: 0 auto;
    gap: 32px 28px;
  }
  .team-card--art {
    --team-card-rail: 38px;
    min-height: 0;
    aspect-ratio: .82;
    border-radius: 0 52px 0 52px;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 52px 0 0;
    padding-bottom: 18px;
  }
  .team-card--art .team-card-name {
    font-size: clamp(16px, 1.35vw, 21px);
  }
  .team-card--art:nth-child(n + 5) {
    translate: clamp(72px, 8vw, 112px) 0;
  }
}

/* Teams fold: bento composition. Size classes are shuffled on each load by
   js/main.js, while team order remains stable for scanning. */
.teams-grid {
  grid-auto-flow: dense;
  align-items: stretch;
}
.team-card--art {
  aspect-ratio: auto;
  height: 100%;
}
.team-card--bento-compact,
.team-card--bento-wide,
.team-card--bento-tall,
.team-card--bento-hero {
  translate: 0;
}
.teams-grid .team-card--art:nth-child(4n + 3),
.teams-grid .team-card--art:nth-child(4n + 4),
.teams-grid .team-card--art:nth-child(n + 5) {
  translate: 0;
}

@media (max-width: 719px) {
  .teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(78px, 21vw, 104px);
    gap: 16px 12px;
    max-width: 620px;
    padding: 0 16px;
  }
  .team-card--art {
    --team-card-rail: 25px;
    border-radius: 0 30px 0 30px;
    grid-column: span 2;
    grid-row: span 3;
  }
  .team-card--bento-wide,
  .team-card--bento-hero {
    grid-column: span 4;
    grid-row: span 3;
  }
  .team-card--bento-tall {
    grid-column: span 2;
    grid-row: span 4;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 30px 0 0;
    padding-bottom: 12px;
  }
}

@media (min-width: 720px) and (max-width: 959px) {
  .teams-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: clamp(58px, 8vw, 76px);
    max-width: 1160px;
    gap: 20px;
    padding: 0 28px;
  }
  .team-card--art {
    --team-card-rail: 26px;
    border-radius: 0 34px 0 34px;
    grid-column: span 2;
    grid-row: span 4;
  }
  .team-card--bento-wide {
    grid-column: span 4;
    grid-row: span 3;
  }
  .team-card--bento-tall {
    grid-column: span 2;
    grid-row: span 5;
  }
  .team-card--bento-hero {
    grid-column: span 4;
    grid-row: span 4;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 34px 0 0;
    padding-bottom: 14px;
  }
  .team-card--art .team-card-name {
    font-size: clamp(11px, 1.55vw, 14px);
  }
}

@media (min-width: 960px) {
  .teams-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(58px, 5.1vw, 74px);
    max-width: 1180px;
    gap: 24px;
    padding: 0 48px;
  }
  .team-card--art {
    --team-card-rail: 32px;
    border-radius: 0 44px 0 44px;
    grid-column: span 3;
    grid-row: span 4;
  }
  .team-card--bento-wide {
    grid-column: span 5;
    grid-row: span 3;
  }
  .team-card--bento-tall {
    grid-column: span 3;
    grid-row: span 5;
  }
  .team-card--bento-hero {
    grid-column: span 6;
    grid-row: span 5;
  }
  .team-card--art .team-card-copy {
    border-radius: 0 44px 0 0;
    padding-bottom: 16px;
  }
  .team-card--art .team-card-name {
    font-size: clamp(14px, 1vw, 19px);
  }
}

/* Uniform grid: 2 across on phones, 4 from tablet up. The bento mosaic sized
   every card differently, which was fine for abstract artwork but not for
   player cutouts: the wide slots left a figure stranded in a field of empty
   colour while the tall ones ran it edge to edge, so no single treatment read
   well across all eight. Equal cards give every player the same frame. */
.teams-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  max-width: 620px;
  padding: 0 16px;
  /* .teams is a flex column now, and this grid carries `margin: 0 auto` for
     its centring. An auto cross-axis margin suppresses flex stretch, so
     without an explicit width the grid shrink-to-fits and every column
     collapses to 0. */
  width: 100%;
}
/* portrait, so a standing figure has room; the cards are the same shape at
   every breakpoint and only the column count changes. --art is named too
   because the bento rules above set it back to `auto` with height:100%, which
   only made sense when the grid rows dictated the size. */
.team-card,
.team-card--art {
  aspect-ratio: 5 / 7;
  height: auto;
  min-height: 0;
  /* Explicit width, or the card collapses to 0x0 in Safari. Every child is
     absolutely positioned, so the row has no content height; Safari resolves
     the item's height first (0) and derives width from the ratio, landing on
     nothing, where Chrome resolves width from the track first and derives
     height. A definite width breaks the circularity the same way in both. */
  width: 100%;
  /* the breakpoint blocks above still span cards across 2-3 tracks of the old
     4/8/12-column bento; one card, one cell now */
  grid-column: auto;
  grid-row: auto;
}
/* From tablet up the 4x2 block fills the fold: the grid takes the height the
   heading leaves behind and the two rows split it, so the cards grow with the
   viewport instead of sitting as a short band in an empty gradient. Cards drop
   their aspect ratio here — the rows dictate the height now.
   min-height: 0 on the grid is what lets `flex: 1` actually shrink it; without
   it the flex item floors at its content height and overflows short viewports. */
@media (min-width: 720px) {
  .teams {
    /* the side inset moves off the grid so the grid's own box is pure
       proportion — see the aspect-ratio below */
    padding-left: clamp(18px, 3vw, 48px);
    padding-right: clamp(18px, 3vw, 48px);
  }
  .teams-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 0;
    min-height: 0;
    /* 4 cards across by 2 down, held to one shape so the cutouts always get a
       portrait frame. Width leads and height follows from the ratio; the third
       arm of the min() is what keeps the block inside the fold, capping width
       by the height actually available (fold minus nav, heading and padding).
       Sizing the other way round — height from flex, width from the ratio —
       breaks at both extremes: a short wide window stretches the cards into
       landscape, a tall narrow one computes a block wider than the screen. */
    width: 100%;
    max-width: min(1240px, calc((100svh - 240px) * 10 / 7));
    aspect-ratio: 10 / 7;
    height: auto;
    /* auto side margins would suppress flex stretch; align-self centres
       without fighting the ratio */
    align-self: center;
    gap: clamp(14px, 1.5vw, 22px);
    padding: 0;
  }
  .team-card,
  .team-card--art {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ==========================================================================
  Select fields — custom chevron
   The native select arrow is pinned to the control's right edge and ignores
   padding, so it sat much further out than the text inset on the left. This
   replaces it with a chevron positioned to match. Scoped away from the admin
   console, which has its own light-theme field styling.
   ========================================================================== */
body:not(.admin-page) .field select,
body:not(.admin-page) .schedule-team-filter select,
body:not(.admin-page) .video-filter select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  /* room so long option text never runs under the chevron */
  padding-right: 44px;
}

/* ==========================================================================
   Schedule match-ups — per-team artwork
   Same treatment as the gametime team cards. The scrim mirrors for the
   right-hand team so the darkest part always sits under its text, which is
   right-aligned there.
   ========================================================================== */
.match-team--art {
  background-image:
    linear-gradient(100deg, rgba(4, 9, 15, .9) 0 38%, rgba(4, 9, 15, .52) 68%, rgba(4, 9, 15, .28) 100%),
    var(--team-art);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.match-team--right.match-team--art {
  background-image:
    linear-gradient(260deg, rgba(4, 9, 15, .9) 0 38%, rgba(4, 9, 15, .52) 68%, rgba(4, 9, 15, .28) 100%),
    var(--team-art);
}

/* ==========================================================================
   Hero title presenter ("Presented by" Mizuno)
   Sits below the nav, above the hero artwork, and joins the scroll sequence
   just behind the MVL mark. Uses the same --layer-* props as .hero-layer so
   the reduced-motion branch reveals it like every other layer.
   ========================================================================== */
.hero-presenter {
  position: absolute;
  top: calc(var(--nav-h) + 14px);
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  will-change: transform, opacity, filter;
  opacity: var(--layer-opacity, 0);
  transform:
    translate3d(calc(-50% + var(--layer-x, 0px)), var(--layer-y, 0px), 0)
    scale(var(--layer-scale, 1));
  filter: blur(var(--layer-blur, 0));
  transition: opacity .16s linear, transform .16s linear, filter .16s linear;
}
.hero-presenter span {
  font-family: var(--ui);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}
.hero-presenter img {
  height: 20px;
  width: auto;
  filter: drop-shadow(0 3px 12px rgba(4, 2, 20, .55));
}
/* make room for it: the artwork shifts down and loses a little scale */
.hero-sequence .hero-mark { translate: 0 -4svh; }

@media (min-width: 960px) {
  .hero-presenter { top: calc(var(--nav-h) + 20px); gap: 14px; }
  .hero-presenter span { font-size: 11px; letter-spacing: 2.8px; }
  .hero-presenter img { height: 28px; }
}

/* ==========================================================================
   Gametime fold gradients — poster palette refresh
   Removes image-backed section atmospheres and replaces them with abstract
   gradients sampled from the MVL 2026 palette.
   ========================================================================== */
body:not(.teaser-page) {
  --poster-violet: #5300C0;
  --poster-mint: #3ADFB4;
  --poster-blue: #5D50FF;
  --poster-navy: #2A1F66;
  --poster-lavender: #8C83FA;
  --poster-electric: #460CEC;
  --poster-magenta: #FF46FF;
  --poster-green: #66FDA2;
  --poster-aqua: #9CF0E3;
  --poster-lime: #CFF665;
  --poster-pink: #F238A7;
  --poster-red: #FF4733;
}

.schedule-preview,
.games,
.teams,
.rules-preview {
  isolation: isolate;
  overflow: hidden;
}

.schedule-preview {
  background:
    radial-gradient(circle at 18% 14%, rgba(156, 240, 227, .72) 0%, transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(207, 246, 101, .46) 0%, transparent 36%),
    linear-gradient(132deg, var(--poster-mint) 0%, #48CBEA 34%, var(--poster-blue) 68%, var(--poster-navy) 100%);
}
.schedule-preview::before {
  opacity: 0;
  background: none;
}

.games {
  background:
    radial-gradient(circle at 16% 18%, rgba(207, 246, 101, .52) 0%, transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(255, 71, 51, .52) 0%, transparent 38%),
    linear-gradient(145deg, var(--poster-aqua) 0%, var(--poster-green) 30%, var(--poster-blue) 66%, var(--poster-violet) 100%);
}
.games-bg {
  display: none;
}
.games::before {
  content: none;
}
.games-inner {
  position: relative;
  z-index: 1;
}

.teams {
  background:
    radial-gradient(circle at 14% 12%, rgba(207, 246, 101, .5) 0%, transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(58, 223, 180, .58) 0%, transparent 38%),
    linear-gradient(135deg, var(--poster-blue) 0%, var(--poster-electric) 45%, var(--poster-mint) 100%);
}
.teams::before {
  opacity: 0;
  background: none;
}

.rules-preview {
  background:
    radial-gradient(circle at 18% 16%, rgba(140, 131, 250, .62) 0%, transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(242, 56, 167, .34) 0%, transparent 34%),
    linear-gradient(144deg, var(--poster-navy) 0%, var(--poster-blue) 50%, var(--poster-aqua) 100%);
}
.rules-preview::before {
  content: none;
}
.rules-preview .section-head,
.rules-preview-list,
.rules-preview .section-link {
  position: relative;
  z-index: 1;
}

.preview-panel,
.live-frame,
.rules-preview-list {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(13, 8, 54, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   Gametime style comparison routes
   /mvl/gametime/v1 = older section backgrounds
   /mvl/gametime/v2 = current treatment
   /mvl/gametime/v3 = current layout with main-poster colour gradients
   ========================================================================== */
body.gametime-v1 .schedule-preview {
  background:
    radial-gradient(circle at 92% 8%, rgba(45, 212, 191, .18), transparent 26%),
    linear-gradient(180deg, #0b0730 0%, #16104a 100%);
}
body.gametime-v1 .schedule-preview::before {
  content: '';
  opacity: .52;
  background:
    linear-gradient(116deg, transparent 0 41%, rgba(124, 245, 180, .08) 41% 42%, transparent 42% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 92px);
}
body.gametime-v1 .games {
  background: var(--navy-deep);
}
body.gametime-v1 .games-bg {
  display: block;
}
body.gametime-v1 .teams {
  background: linear-gradient(180deg, rgba(22, 16, 74, 1) 0%, rgba(5, 9, 17, 1) 100%);
}
body.gametime-v1 .teams::before {
  content: '';
  opacity: .8;
  background:
    radial-gradient(circle 1px at 18% 14%, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle 1px at 71% 32%, rgba(255, 255, 255, .38) 0 1px, transparent 1.6px),
    radial-gradient(circle 1.4px at 44% 58%, rgba(255, 255, 255, .3) 0 1.4px, transparent 2px),
    radial-gradient(circle 1px at 88% 74%, rgba(255, 255, 255, .42) 0 1px, transparent 1.6px),
    radial-gradient(circle 1px at 8% 86%, rgba(255, 255, 255, .3) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg,
      transparent 0 54px, rgba(255, 255, 255, .05) 54px 55.5px,
      transparent 55.5px 132px, rgba(255, 255, 255, .03) 132px 134px, transparent 134px 210px);
  background-size:
    340px 300px, 420px 360px, 500px 420px, 380px 340px, 460px 400px, auto;
}
body.gametime-v1 .rules-preview {
  background:
    radial-gradient(ellipse 60% 40% at 88% 0%, rgba(124, 58, 237, .28), transparent 70%),
    #0B0730;
}
body.gametime-v1 .rules-preview::before {
  content: none;
}

body.gametime-v3 {
  --poster-deep: #100836;
  --poster-midnight: #18104d;
  --poster-court-blue: #244fa6;
  --poster-cyan: #22aee9;
  --poster-teal-main: #20cfbd;
  --poster-mint-main: #54f0bb;
  --poster-ice: #dfffee;
}
body.gametime-v3 .schedule-preview {
  background:
    radial-gradient(circle at 74% 14%, rgba(84, 240, 187, .58) 0%, transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(34, 174, 233, .5) 0%, transparent 36%),
    linear-gradient(138deg, var(--poster-midnight) 0%, var(--poster-court-blue) 42%, var(--poster-teal-main) 100%);
}
/* Games and Teams share one ramp. Painting a gradient on each section
   restarted it at their shared edge, and unlike every other section boundary
   on this page there is no sponsor strip between them to hide the seam. The
   accents are spread across the combined height rather than per section. */
body.gametime-v3 .poster-flow {
  background:
    radial-gradient(circle at 20% 5%, rgba(223, 255, 238, .3) 0%, transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(84, 240, 187, .48) 0%, transparent 28%),
    radial-gradient(circle at 10% 54%, rgba(34, 174, 233, .42) 0%, transparent 30%),
    radial-gradient(circle at 72% 84%, rgba(223, 255, 238, .36) 0%, transparent 28%),
    linear-gradient(150deg, var(--poster-deep) 0%, var(--poster-court-blue) 52%, var(--poster-teal-main) 100%);
}
body.gametime-v3 .games,
body.gametime-v3 .teams {
  background: transparent;
}
body.gametime-v3 .rules-preview {
  background:
    radial-gradient(circle at 82% 10%, rgba(84, 240, 187, .5) 0%, transparent 30%),
    radial-gradient(circle at 16% 82%, rgba(34, 174, 233, .42) 0%, transparent 34%),
    linear-gradient(144deg, var(--poster-midnight) 0%, var(--poster-court-blue) 56%, var(--poster-teal-main) 100%);
}

/* ==========================================================================
   V3 poster palette for supporting pages
   Applies the main-poster navy/blue/teal/mint direction to core pages without
   changing their content structure.
   ========================================================================== */
.schedule-page,
.videos-page,
.waiver-page,
.raffle-page {
  --poster-deep: #100836;
  --poster-midnight: #18104d;
  --poster-court-blue: #244fa6;
  --poster-cyan: #22aee9;
  --poster-teal-main: #20cfbd;
  --poster-mint-main: #54f0bb;
  --poster-ice: #dfffee;
  background:
    radial-gradient(circle at 82% 10%, rgba(84, 240, 187, .38) 0%, transparent 30%),
    radial-gradient(circle at 8% 48%, rgba(34, 174, 233, .34) 0%, transparent 34%),
    linear-gradient(145deg, var(--poster-deep) 0%, var(--poster-court-blue) 52%, var(--poster-teal-main) 100%);
}
.schedule-page .page-nav,
.videos-page .page-nav,
.waiver-page .page-nav,
.raffle-page .page-nav {
  background:
    linear-gradient(90deg, rgba(16, 8, 54, .96), rgba(24, 16, 77, .9) 58%, rgba(36, 79, 166, .9));
  border-bottom-color: rgba(84, 240, 187, .26);
}
.schedule-page .section-title em,
.videos-page .section-title em,
.waiver-page .section-title em,
.raffle-page .section-title em,
.raffle-page .waiver-copy h2 {
  color: var(--poster-mint-main);
}
.standings-panel,
.schedule-board,
.video-library,
.library-video-card,
.waiver-page .form-panel,
.raffle-page .form-panel,
.prize-banner,
.prize-card {
  border-color: rgba(84, 240, 187, .28);
  background:
    radial-gradient(circle at 96% 0%, rgba(34, 174, 233, .16), transparent 36%),
    rgba(16, 8, 54, .78);
  box-shadow: 0 20px 56px rgba(16, 8, 54, .32);
}
.videos-feature {
  background:
    radial-gradient(circle at 82% 18%, rgba(84, 240, 187, .28) 0%, transparent 34%),
    linear-gradient(145deg, var(--poster-deep) 0%, var(--poster-court-blue) 58%, var(--poster-teal-main) 100%);
}
.videos-feature-scrim {
  background:
    linear-gradient(90deg, rgba(16, 8, 54, .9) 0%, rgba(16, 8, 54, .58) 52%, rgba(36, 79, 166, .5) 100%),
    linear-gradient(180deg, rgba(16, 8, 54, .25), rgba(16, 8, 54, .86));
}
.videos-feature-panel {
  border-color: rgba(84, 240, 187, .28);
  background: rgba(16, 8, 54, .64);
}
.waiver-page .waiver-copy,
.raffle-page .waiver-copy {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.raffle-page .raffle-privacy {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-top: 4px;
}
.day-tabs button[aria-selected='true'],
.cta.cta--primary.prize-cta {
  background: linear-gradient(135deg, var(--poster-mint-main), var(--poster-teal-main));
  color: var(--poster-deep);
}
.waiver-page .field input:focus,
.waiver-page .field select:focus,
.raffle-page .field input:focus,
.raffle-page .field select:focus {
  border-color: var(--poster-mint-main);
  box-shadow: 0 0 0 3px rgba(84, 240, 187, .16);
}

.waiver-page {
  --waiver-bg-a: var(--poster-mint-main);
  --waiver-bg-b: var(--poster-cyan);
  background:
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--waiver-bg-a) 42%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 10% 46%, color-mix(in srgb, var(--waiver-bg-b) 34%, transparent) 0%, transparent 36%),
    radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--waiver-bg-a) 18%, transparent) 0%, transparent 32%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--waiver-bg-b) 16%, var(--poster-deep)) 0%,
      color-mix(in srgb, var(--waiver-bg-b) 28%, var(--poster-court-blue)) 54%,
      color-mix(in srgb, var(--waiver-bg-a) 32%, var(--poster-teal-main)) 100%);
}
.waiver-page .page-nav {
  background:
    linear-gradient(90deg,
      rgba(16, 8, 54, .96),
      color-mix(in srgb, var(--waiver-bg-b) 18%, rgba(24, 16, 77, .92)) 58%,
      color-mix(in srgb, var(--waiver-bg-a) 18%, rgba(36, 79, 166, .9)));
}
.waiver-page .form-panel {
  border-color: color-mix(in srgb, var(--waiver-bg-a) 34%, rgba(255, 255, 255, .16));
}
.waiver-page .section-title em {
  color: var(--accent-2);
}
.waiver-page .field input:focus,
.waiver-page .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ==========================================================================
   Game-day check-in — mode modal and full-page confirmation
   ========================================================================== */
/* Back out of a flow to the mode chooser. Sits above the kicker so it reads as
   a return path rather than an action inside the form. */
.panel-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 700 11px var(--ui);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease;
}
.panel-back::before { content: '\2190'; font-size: 13px; line-height: 1; }
.panel-back:hover { color: var(--accent, var(--mint)); }
.panel-back:focus-visible { outline: 2px solid var(--accent, var(--mint)); outline-offset: 3px; }

/* The confirmation is the end of the flow, and at the booth it is read across
   a table rather than held at arm's length — so it takes the whole viewport
   and everything behind it is hidden rather than merely scrolled past. */
body.checkin-complete > *:not(.checkin-done):not(.checkin-pending) { display: none; }
body.checkin-complete { overflow: hidden; }

.checkin-done {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--team-a, var(--mint)) 22%, transparent), transparent 58%),
    var(--navy-deep);
}
.checkin-done.is-hidden { display: none; }

/* ---- verifying, between scan and confirmation ---- */
.checkin-pending {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--team-a, var(--mint)) 20%, transparent), transparent 60%),
    var(--navy-deep);
}
.checkin-pending.is-hidden { display: none; }
.pending-ring {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--team-a, var(--mint)) 34%, transparent);
  color: var(--team-a, var(--mint));
}
.pending-ring svg { width: 46px; height: 46px; display: block; }
/* one arc sweeping the ring — reads as "working" without a spinner cliché */
.pending-sweep {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--team-a, var(--mint));
  border-right-color: var(--team-a, var(--mint));
  animation: pendingSpin 900ms linear infinite;
}
@keyframes pendingSpin { to { transform: rotate(360deg); } }
.pending-label {
  color: #fff;
  font-family: var(--stretch);
  font-style: italic;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}
.pending-label::after {
  content: '';
  animation: pendingDots 1.2s steps(4, end) infinite;
}
@keyframes pendingDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}
.pending-who {
  margin-top: 12px;
  color: var(--team-a, var(--mint));
  font: 800 12px var(--mono);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  min-height: 1em;
}
@media (prefers-reduced-motion: reduce) {
  .pending-sweep { animation: none; border-color: color-mix(in srgb, var(--team-a, var(--mint)) 60%, transparent); }
  .pending-label::after { animation: none; content: '…'; }
}

.checkin-card {
  width: min(560px, 100%);
  padding: 40px 28px 32px;
  text-align: center;
  border-radius: var(--surface-radius);
  border: 2px solid var(--team-a, var(--mint));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--team-a, var(--mint)) 26%, transparent), transparent 62%),
    var(--surface-deep);
}
.checkin-photo {
  --checkin-card-rail: 36px;
  width: clamp(190px, 56vw, 280px);
  aspect-ratio: .82;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 44px 0 44px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 calc(100% - var(--checkin-card-rail)), #f5f7f2 calc(100% - var(--checkin-card-rail)) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, color-mix(in srgb, var(--team-a, var(--mint)) 40%, transparent) 100%),
    var(--team-art, linear-gradient(135deg, var(--team-b, var(--teal)), var(--team-a, var(--mint))));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: color-mix(in srgb, var(--team-a, var(--mint)) 55%, #ffffff);
  box-shadow: 0 20px 52px rgba(4, 2, 20, .34);
}
.checkin-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - var(--checkin-card-rail)), rgba(255, 255, 255, .7) calc(100% - var(--checkin-card-rail)) 100%),
    linear-gradient(180deg, transparent 44%, rgba(4, 2, 20, .18) 100%);
}
/* Same treatment as the team cards on the landing page: the cut-out stands on
   the bottom edge, tucked against the name rail, rather than sitting inside a
   rounded thumbnail. See .team-card-player-slot for the full reasoning. */
.checkin-photo-slot {
  position: absolute;
  inset: 12px calc(var(--checkin-card-rail) + 4px) 0 6px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
/* Every cut-out is exported at one pixel height, so sizing on height alone
   renders them all at the same scale. Width is left to each figure's own
   build; a broad stance runs wider than the slot and .checkin-photo's
   overflow trims it at the card edge. */
.checkin-photo img {
  height: 100%;
  width: auto;
  max-width: none;
  flex: none;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(4, 2, 20, .5));
}
/* author display:block beats the UA [hidden] rule whatever the specificity,
   so the JS fallback to the silhouette needs this to actually hide */
.checkin-photo img[hidden] { display: none; }
.checkin-silhouette {
  position: relative;
  z-index: 2;
  width: 42%;
  height: auto;
  display: block;
  transform: translateX(calc(var(--checkin-card-rail) / -2));
  filter: drop-shadow(0 8px 12px rgba(4, 2, 20, .34));
}
.checkin-photo.has-photo .checkin-silhouette { display: none; }
.checkin-photo:not(.has-photo) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 calc(100% - var(--checkin-card-rail)), #f5f7f2 calc(100% - var(--checkin-card-rail)) 100%),
    radial-gradient(circle at 42% 45%, rgba(4, 2, 20, .58) 0 32%, transparent 33%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, color-mix(in srgb, var(--team-a, var(--mint)) 40%, transparent) 100%),
    var(--team-art, linear-gradient(135deg, var(--team-b, var(--teal)), var(--team-a, var(--mint))));
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
/* The rail is painted as a background gradient on .checkin-photo so it also
   covers the no-photo state, but the name needs a real element to sit in —
   above ::after, which washes the same strip with white. */
.checkin-photo-rail {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 4;
  width: var(--checkin-card-rail);
  min-height: 100%;
  display: flex;
  /* the rail's rounded corner is at the top, so the square end is where type
     sits */
  align-items: flex-end;
  justify-content: center;
  padding: 14px 0 16px;
  background: #f5f7f2;
  border-radius: 0 44px 0 0;
}
.checkin-team {
  margin: 0;
  color: var(--team-a, var(--mint));
  font-family: 'STRRETCH Sans Free', var(--ui);
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 19px);
  /* em, not px: fitTeamName scales font-size, and fixed px tracking would stay
     behind as a constant the ratio can never remove */
  letter-spacing: .1em;
  line-height: .92;
  text-align: center;
  text-transform: uppercase;
  /* vertical-rl reads top-to-bottom with the glyphs turned clockwise */
  writing-mode: vertical-rl;
}
.checkin-name {
  margin: 8px 0 4px;
  font-family: var(--stretch);
  font-style: italic;
  font-size: clamp(38px, 11vw, 62px);
  line-height: .96;
  text-transform: uppercase;
  color: #fff;
}
.checkin-jersey {
  margin: 0;
  color: var(--ink-muted);
  font: 700 13px var(--mono);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.checkin-kicker {
  margin: 24px 0 6px;
  color: var(--team-a, var(--mint));
  font: 800 18px var(--ui);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.checkin-message {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--ink-soft);
  font: 400 15px/1.65 var(--ui);
}
.checkin-actions {
  margin-top: 28px;
  display: grid;
  gap: 10px;
}
@media (min-width: 560px) {
  .checkin-actions { grid-auto-flow: column; justify-content: center; }
  .checkin-card { padding: 48px 40px 38px; }
}

/* Two-court livestream management and public viewing */
.admin-livestream-grid{display:grid;gap:12px}.admin-livestream-court{display:grid;gap:14px;padding:16px;border-radius:10px;background:#f8fafc}.admin-livestream-court-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-livestream-court-head h3{font:700 15px Arial,Helvetica,sans-serif}.admin-stream-guide{display:grid;gap:18px;margin-top:18px}.admin-stream-alert{display:grid;gap:4px;padding:13px 15px;border-radius:9px;background:#fffaeb;color:#7a2e0e}.admin-stream-alert strong{font-size:12px}.admin-stream-alert span{font-size:12px;line-height:1.5}.admin-stream-essentials{display:grid;gap:8px}.admin-stream-essentials>div{padding:13px 14px;border-radius:9px;background:#f8fafc}.admin-stream-essentials strong,.admin-stream-essentials span{display:block}.admin-stream-essentials strong{color:#1d2433;font-size:13px}.admin-stream-essentials span{margin-top:4px;color:#667085;font-size:11px;line-height:1.4}.admin-stream-camera-picker{display:grid;gap:8px}.admin-stream-camera-picker>span{color:#344054;font-size:12px;font-weight:600}.admin-stream-camera-picker>div{display:inline-flex;width:max-content;max-width:100%;padding:4px;border-radius:9px;background:#eef1f5}.admin-stream-camera-picker button{min-height:36px;padding:8px 14px;border:0;border-radius:7px;background:transparent;color:#667085;cursor:pointer;font:600 12px Arial,Helvetica,sans-serif}.admin-stream-camera-picker button.is-active{background:#25324a;color:#fff;box-shadow:0 2px 5px rgba(16,24,40,.14)}.admin-stream-camera-picker button:focus-visible{outline:2px solid #475467;outline-offset:2px}.admin-stream-steps{display:grid;gap:8px}.admin-stream-steps details{overflow:hidden;border:1px solid #e4e7ec;border-radius:9px;background:#fff}.admin-stream-steps summary{display:flex;align-items:center;gap:11px;padding:13px 14px;color:#344054;cursor:pointer;font-size:13px;font-weight:700;list-style:none}.admin-stream-steps summary::-webkit-details-marker{display:none}.admin-stream-steps summary::after{content:'+';margin-left:auto;color:#667085;font-size:20px;font-weight:400}.admin-stream-steps details[open] summary::after{content:'−'}.admin-stream-steps summary b{display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;border-radius:7px;background:#eef1f5;color:#475467;font-size:11px}.admin-stream-detail{padding:0 16px 16px 50px;color:#475467;font-size:12px;line-height:1.55}.admin-stream-detail ul,.admin-stream-detail ol{display:grid;gap:7px;padding-left:18px}.admin-stream-detail strong{color:#1d2433}.admin-stream-settings{width:100%;border-collapse:collapse}.admin-stream-settings th,.admin-stream-settings td{padding:8px 10px;border-top:1px solid #eaecf0;text-align:left;vertical-align:top}.admin-stream-settings th{width:42%;color:#667085;font-size:11px;font-weight:600}.admin-stream-settings td{color:#1d2433;font-size:12px;font-weight:600}.admin-stream-checklist{list-style:'✓  '}.games-live-grid{display:grid;gap:16px}.live-court{min-width:0}.live-court>p{margin-bottom:8px;color:var(--mint);font:800 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase}.livestream-picker{position:fixed;inset:0;width:min(460px,calc(100% - 28px));max-height:calc(100svh - 28px);margin:auto;padding:0;border:0;border-radius:24px;background:var(--navy-deep);color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.46)}.livestream-picker::backdrop{background:rgba(4,2,20,.72);backdrop-filter:blur(5px)}.livestream-picker-card{display:grid;gap:20px;padding:24px}.livestream-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.livestream-picker-head p{margin-bottom:6px;color:var(--teal);font:800 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase}.livestream-picker-head h2{font:italic 48px/.9 var(--stretch);text-transform:uppercase}.livestream-picker-head button{display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:25px}.livestream-picker-options{display:grid;gap:10px}.livestream-picker-options a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff}.livestream-picker-options a:hover{background:rgba(124,245,180,.14)}.livestream-picker-options span,.livestream-picker-options strong{display:flex;align-items:center;gap:9px}.livestream-picker-options span{font:800 13px var(--ui);text-transform:uppercase}.livestream-picker-options strong{color:var(--mint);font:800 10px var(--mono);letter-spacing:.8px;text-transform:uppercase}.livestream-picker-options b{font-size:18px}.videos-live{position:relative;z-index:3;width:min(calc(100% - 32px),1504px);margin:0 auto;padding:calc(var(--nav-h) + 42px) 0 54px}.videos-live-head{max-width:720px;margin-bottom:26px}.videos-live-head .games-label{color:var(--teal)}.videos-live-head h1{font:italic clamp(54px,10vw,104px)/.9 var(--stretch);text-transform:uppercase}.videos-live-grid{display:grid;gap:18px}.videos-live-card{min-width:0;padding:14px;border-radius:20px;background:rgba(255,255,255,.065);box-shadow:0 20px 46px rgba(4,2,20,.24)}.videos-live-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px}.videos-live-card-head p{display:flex;align-items:center;gap:8px;font:800 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}.videos-live-card-head strong{color:var(--mint);font:800 9px var(--mono);letter-spacing:1px;text-transform:uppercase}.videos-live-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#030711}.videos-live-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.videos-live-card>a{display:block;padding:13px 3px 2px;color:var(--mint);font:800 9px var(--mono);letter-spacing:1px;text-align:right;text-transform:uppercase}
@media(min-width:760px){.admin-livestream-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-stream-essentials{grid-template-columns:repeat(3,minmax(0,1fr))}.games-live-grid.has-two-streams{grid-template-columns:repeat(2,minmax(0,1fr))}.videos-live{width:min(calc(100% - 96px),1504px);padding-top:calc(var(--nav-h) + 70px)}.videos-live-grid.has-two-streams{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}.videos-live-card.is-primary{padding:18px}}
@media(max-width:600px){.livestream-picker{inset:auto 0 0;width:100%;max-width:none;max-height:min(82svh,680px);margin:0;border-radius:24px 24px 0 0}.livestream-picker-card{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.livestream-picker-options a{align-items:flex-start;flex-direction:column}.videos-live{padding-top:calc(var(--nav-h) + 32px)}}

/* Team-colored vertical roulette for the admin raffle draw. */
.admin-raffle-roulette{position:relative;height:192px;overflow:hidden;border-radius:14px;background:#101828;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.admin-raffle-roulette::before,.admin-raffle-roulette::after{content:'';position:absolute;z-index:2;right:0;left:0;height:64px;pointer-events:none}
.admin-raffle-roulette::before{top:0;background:linear-gradient(#101828,rgba(16,24,40,.18))}
.admin-raffle-roulette::after{bottom:0;background:linear-gradient(rgba(16,24,40,.18),#101828)}
.admin-raffle-roulette-track{position:absolute;z-index:1;top:0;right:10px;left:10px;will-change:transform}
.admin-raffle-roulette-row{position:relative;display:grid;height:64px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 20px;overflow:hidden;border-radius:10px;background:linear-gradient(100deg,var(--raffle-start),var(--raffle-end));color:#fff;opacity:.72;transform:scale(.95);text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.38)}
.admin-raffle-roulette-row::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,40,.08),rgba(16,24,40,.2));pointer-events:none}
.admin-raffle-roulette-row strong,.admin-raffle-roulette-row span{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-raffle-roulette-row strong{font-size:15px}
.admin-raffle-roulette-row span{padding:5px 8px;border-radius:999px;background:rgba(16,24,40,.3);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.admin-raffle-roulette-marker{position:absolute;z-index:3;top:50%;right:10px;left:10px;height:64px;border:2px solid #7cf5b4;border-radius:11px;pointer-events:none;transform:translateY(-50%);box-shadow:0 0 0 3px rgba(124,245,180,.1),0 0 22px rgba(124,245,180,.28)}
.admin-raffle-roulette-marker::before,.admin-raffle-roulette-marker::after{content:'';position:absolute;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translateY(-50%)}
.admin-raffle-roulette-marker::before{left:-2px;border-left:8px solid #7cf5b4}
.admin-raffle-roulette-marker::after{right:-2px;border-right:8px solid #7cf5b4}
@media(max-width:520px){.admin-raffle-roulette-row{gap:8px;padding:0 14px}.admin-raffle-roulette-row strong{font-size:13px}.admin-raffle-roulette-row span{max-width:112px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.admin-raffle-roulette-track{transition:none!important}}

/* The winner portrait sits on the same artwork used by their team card. */
.admin-raffle-winner-photo{position:relative;width:190px;height:214px;background-color:var(--raffle-winner-start,#eef1f5);background-image:linear-gradient(180deg,rgba(16,24,40,.02) 50%,rgba(16,24,40,.28) 100%),var(--raffle-winner-bg,none);background-position:center;background-repeat:no-repeat;background-size:cover;isolation:isolate}
.admin-raffle-winner-photo::after{content:'';position:absolute;z-index:1;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:inherit;pointer-events:none;box-shadow:inset 0 -42px 58px color-mix(in srgb,var(--raffle-winner-end,#25324a) 34%,transparent)}
.admin-raffle-winner-photo img{position:relative;z-index:1;width:88%;height:94%;margin-top:auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 10px rgba(16,24,40,.28))}
.admin-raffle-winner-photo span{position:relative;z-index:2;margin:16px;padding:8px 10px;border-radius:8px;background:rgba(16,24,40,.58);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* ==========================================================================
   Schedule card header — time and court
   The card used to lead with three mono chips at 9px: a status, the time and
   the full venue. The status only repeated the winner pill below, and every
   game is at Gameville Ball Park, so the venue read the same on all forty
   cards. What is left is the two facts someone scans for.

   .match-meta keeps its own layout — a wrapping flex row when narrow, a grid
   in the 190px rail on desktop. .match-when claims a full row inside it the
   same way .match-stage does, rather than the container being restructured:
   .match-stage is `flex: 0 0 100%`, which in a column container sets its
   HEIGHT to 100% and swallowed the rail on playoff cards.
   ========================================================================== */
.match-when {
  flex: 0 0 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.match-meta .match-time,
.match-meta .match-court {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(18px, 3.6vw, 22px);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mint);
  /* these inherited the chip treatment from .match-meta span */
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
/* the court is the secondary of the pair — same face, stepped back */
.match-meta .match-court {
  font-size: clamp(14px, 2.8vw, 17px);
  color: color-mix(in srgb, var(--mint) 68%, transparent);
}

@media (min-width: 960px) {
  /* The rail is a fixed 190px track — 154px of content once padding is off.
     A side-by-side pair does not fit there at display sizes, so it stacks;
     and it spans both grid columns like .match-stage above it. */
  .match-when {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }
  .match-meta .match-time { font-size: 24px; }
  .match-meta .match-court { font-size: 16px; }
}

/* ==========================================================================
   Schedule card — player of the game, winner emphasis, watch-video button
   ========================================================================== */
/* The portrait sat on the panel's flat background, so the cut-out had nothing
   behind it. Same treatment as the team cards: the team's artwork, darkened
   under the figure so a light jersey still separates from it. */
.player-portrait {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
/* two classes, not one: .player-portrait.has-photo above uses the `background`
   shorthand, which resets background-image to none, and it outranks a single
   class whatever the source order */
.player-portrait.player-portrait--art {
  background-image:
    linear-gradient(180deg, rgba(4, 2, 20, .12) 0 46%, rgba(4, 2, 20, .55) 100%),
    var(--team-art);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* no artwork for this team — fall back to its gradient rather than a flat box */
.player-portrait:not(.player-portrait--art) {
  background: linear-gradient(135deg, var(--team-b, #1b2340), var(--team-a, #2c3557));
}
.player-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 3px 6px rgba(4, 2, 20, .5));
}

/* The winner is now carried by the card itself rather than a "Winner: x" pill
   repeating the name two rows down. Inset so it reads on the artwork's edge
   without changing the card's footprint. */
.match-team.is-winner {
  box-shadow: inset 0 0 0 2px var(--mint), 0 0 18px rgba(124, 245, 180, .16);
}

/* The video link read as body text; the glyph makes it look pressable. */
.watch-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* the glyph and the label are one control — never let them break apart */
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* The svg also carries width/height attributes. Safari sizes an inline svg
   that has none from its containing block rather than from these rules, and
   the glyph filled the whole action row on iOS while Chromium looked right. */
.watch-video-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  flex: 0 0 16px;
  /* optical centring against uppercase 9px type */
  margin-top: -1px;
}

/* ==========================================================================
   Video library filters — team, day, game
   The grid was built for two selects; the game picker's labels are far longer
   (day, time and both team names), so it takes a full row of its own rather
   than being squeezed into a half-width column.
   ========================================================================== */
.video-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.video-filter--game { grid-column: 1 / -1; }
.video-filter select { width: 100%; }
.video-filter-clear {
  grid-column: 1 / -1;
  justify-self: start;
  appearance: none;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  font: 700 10px var(--mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  cursor: pointer;
}
.video-filter-clear:hover { color: var(--mint); border-color: var(--mint); }
.video-filter-clear:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.admin-raffle-drawing.is-animating .admin-raffle-progress span { animation-duration: var(--raffle-animation-duration, 5s); }

.admin-toast {
  position: fixed;
  z-index: 1200;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid #abefc6;
  border-radius: 10px;
  background: #ecfdf3;
  color: #067647;
  box-shadow: 0 14px 40px rgba(16, 24, 40, .18);
  font: 600 13px/1.45 Arial, Helvetica, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.admin-toast.is-visible { opacity: 1; transform: translateY(0); }
.admin-video-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-raffle-note-cell { min-width: 240px; }
.admin-raffle-note-form { display: grid; gap: 7px; }
.admin-raffle-note-form input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 7px; color: #1d2433; font: 400 12px Arial, Helvetica, sans-serif; }
.admin-raffle-note-form input:focus { border-color: #475467; outline: 0; box-shadow: 0 0 0 3px rgba(71, 84, 103, .1); }
.admin-raffle-note-form > div, .admin-raffle-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.admin-raffle-note-form .cta { min-height: 34px; padding: 7px 12px; }
.admin-raffle-edit { border: 0; background: none; color: #344054; cursor: pointer; font: 600 12px Arial, Helvetica, sans-serif; }
.admin-raffle-edit:hover, .admin-raffle-remove:hover { text-decoration: underline; }
.admin-raffle-status-toggle { border: 0; cursor: pointer; font-family: Arial, Helvetica, sans-serif; transition: filter .15s ease, transform .15s ease; }
.admin-raffle-status-toggle:hover { filter: brightness(.96); transform: translateY(-1px); }
.admin-raffle-status-toggle:focus-visible { outline: 2px solid #475467; outline-offset: 2px; }
.admin-raffle-status-toggle:disabled { cursor: wait; opacity: .55; transform: none; }
.admin-raffle-draw-form { gap: 14px; }
.admin-raffle-draw-head { align-items: flex-end; }
.admin-raffle-display-access { display: grid; flex: 0 0 auto; grid-template-columns: auto auto; align-items: center; gap: 5px 10px; padding: 10px 12px; border-radius: 9px; background: #f2f4f7; }
.admin-raffle-display-access > span { color: #667085; font: 600 10px/1.2 Arial, Helvetica, sans-serif; text-transform: uppercase; }
.admin-raffle-display-access code { color: #25324a; font: 700 12px/1.2 Arial, Helvetica, sans-serif; }
.admin-raffle-display-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.admin-raffle-display-access .cta { width: 100%; }
.admin-raffle-filter-group { display: grid; gap: 12px; padding: 14px; border-radius: 9px; background: #f8fafc; }
.admin-raffle-filter-head h3, .admin-raffle-record-head h3 { margin: 0; color: #1d2433; font: 700 14px/1.35 Arial, Helvetica, sans-serif; }
.admin-raffle-filter-head p, .admin-raffle-record-head p { margin-top: 3px; color: #667085; font: 400 11px/1.45 Arial, Helvetica, sans-serif; }
.admin-raffle-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-raffle-winner-date-settings { display: grid; gap: 12px; padding: 12px; border-radius: 8px; background: #fff; }
.admin-raffle-winner-date-settings[hidden] { display: none; }
.admin-raffle-date-add { display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 8px; align-items: center; }
.admin-raffle-date-add .cta { min-height: 42px; }
.admin-raffle-date-list-label { display: block; margin-bottom: 7px; color: #667085; font: 600 11px Arial, Helvetica, sans-serif; }
.admin-raffle-date-list { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-raffle-date-chip { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; border-radius: 999px; background: #eef1f5; color: #344054; font: 600 11px Arial, Helvetica, sans-serif; }
.admin-raffle-date-chip button { display: grid; width: 20px; height: 20px; place-items: center; border: 0; border-radius: 50%; background: #d0d5dd; color: #344054; cursor: pointer; font: 600 15px/1 Arial, Helvetica, sans-serif; }
.admin-raffle-date-chip button:hover { background: #bfc5cf; }
.admin-raffle-date-chip button:focus-visible { outline: 2px solid #475467; outline-offset: 1px; }
.admin-raffle-date-empty { color: #98a2b3; font: 400 11px Arial, Helvetica, sans-serif; }
.admin-raffle-draw-actions { display: grid; justify-content: stretch; gap: 8px; }
.admin-raffle-draw-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-raffle-draw-actions > small { color: #667085; font: 400 10px/1.45 Arial, Helvetica, sans-serif; }
.admin-raffle-record-head { padding-top: 2px; }
.admin-raffle-record-list-head { margin-top: 2px; padding-top: 16px; border-top: 1px solid #eaecf0; }
.admin-raffle-team-exclusions { grid-column: 1 / -1; min-width: 0; margin: -2px 0 0; padding: 14px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; }
.admin-raffle-team-exclusions[hidden] { display: none; }
.admin-raffle-team-exclusions legend { padding: 0 5px; color: #475467; font: 600 11px Arial, Helvetica, sans-serif; }
.admin-raffle-team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-raffle-team-option { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 7px; background: #f9fafb; color: #344054; cursor: pointer; font: 600 11px Arial, Helvetica, sans-serif; }
.admin-raffle-team-option input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--team-color, #25324a); }
.admin-raffle-team-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-raffle-team-option span::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--team-color, #475467); content: ''; vertical-align: 1px; }
@media (min-width: 760px) { .admin-raffle-team-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .admin-toast { right: 16px; bottom: 16px; left: 16px; max-width: none; }
  .admin-video-head { align-items: stretch; flex-direction: column; }
  .admin-video-actions { justify-content: space-between; }
  .admin-raffle-date-range, .admin-raffle-date-add { grid-template-columns: 1fr; }
  .admin-raffle-date-add .cta { width: 100%; }
  .admin-raffle-display-access { width: 100%; }
  .admin-raffle-display-actions { grid-template-columns: 1fr; }
}


/* The library note reuses .mechanics-list from the raffle panel. That list was
   written to follow a panel head, so it carries a top pad the header does not
   want, and its 14px body is a size larger than this header needs. */
.video-library-note {
  gap: 8px;
  padding-top: 14px;
  max-width: 62ch;
}
.video-library-note li { font-size: 13px; line-height: 1.6; }

/* The card whose video is loaded in the player above. Without it nothing in
   the grid says which one you picked once you scroll back down to it. */
.library-video-card.is-playing {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.library-video-card.is-playing .library-video-player .play-btn {
  opacity: .35;
}

/* ==========================================================================
   Special-award voting — /mvl/vote
   The page is a .waiver-page, so .waiver-main, .form-panel, .form-panel-head,
   .form-grid, .field, .cta and .mechanics-list all come from the waiver flow.
   Only the ballot's two-column split and the nominee slot are new.
   ========================================================================== */
.vote-stars {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.vote-star {
  position: absolute;
  width: var(--star-size);
  max-width: none;
  opacity: var(--star-opacity, .42);
  transform: rotate(var(--star-rotate, 0deg));
  filter: drop-shadow(0 14px 34px rgba(16, 8, 54, .22));
}
.vote-star--splash-a { --star-size: clamp(220px, 38vw, 560px); --star-opacity: .24; --star-rotate: -18deg; top: 6%; right: calc(var(--star-size) * -.38); }
.vote-star--splash-b { --star-size: clamp(170px, 28vw, 410px); --star-opacity: .18; --star-rotate: 24deg; bottom: calc(var(--star-size) * -.44); left: 8%; }
.vote-star--blue-a { --star-size: clamp(100px, 17vw, 240px); --star-opacity: .5; --star-rotate: 14deg; top: 44%; left: calc(var(--star-size) * -.34); }
.vote-star--blue-b { --star-size: clamp(58px, 9vw, 130px); --star-opacity: .38; --star-rotate: -24deg; top: calc(var(--star-size) * -.32); left: 34%; }
.vote-star--violet-a { --star-size: clamp(92px, 15vw, 220px); --star-opacity: .56; --star-rotate: -12deg; top: 27%; right: calc(var(--star-size) * -.34); }
.vote-star--violet-b { --star-size: clamp(64px, 10vw, 150px); --star-opacity: .42; --star-rotate: 24deg; bottom: calc(var(--star-size) * -.34); left: 28%; }
.vote-star--mint-a { --star-size: clamp(96px, 16vw, 230px); --star-opacity: .52; --star-rotate: 8deg; right: calc(var(--star-size) * -.32); bottom: 12%; }
.vote-star--mint-b { --star-size: clamp(58px, 9vw, 130px); --star-opacity: .4; --star-rotate: -20deg; top: 68%; left: calc(var(--star-size) * -.34); }
.vote-page .waiver-main,
.vote-page .marquee--footer,
.vote-page .footer { position: relative; z-index: 1; }

.vote-layout { padding-top: 18px; }
.vote-rail { display: none; }          /* desktop only — see the query below */

.vote-card { display: grid; gap: 16px; }
.vote-copy { display: grid; gap: 12px; }
.vote-brand {
  color: var(--teal);
  font: 800 10px var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.vote-tagline { margin-top: 6px; color: #fff; font-size: 15px; font-weight: 700; }
.vote-body { display: grid; gap: 8px; margin-top: 10px; }
.vote-body p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.vote-question { margin-top: 12px; color: var(--mint); font-size: 14px; font-weight: 700; }
.vote-identity-sub { padding-top: 16px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.vote-recap { padding-top: 14px; }
.vote-recap li { font-size: 13.5px; }

.vote-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.vote-review-grid + .form-panel-head { margin-top: 16px; }
.vote-review-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--team-a, var(--mint)) 58%, transparent);
  border-radius: 13px;
  color: color-mix(in srgb, var(--team-a, var(--mint)) 58%, #fff);
  background:
    linear-gradient(180deg, rgba(4, 2, 20, .58) 0%, rgba(4, 2, 20, 0) 35%, rgba(4, 2, 20, .86) 100%),
    var(--team-art, linear-gradient(135deg, var(--team-b, #1b2340), var(--team-a, #2c3557)));
  background-size: cover, cover;
  background-position: center, center;
}
.vote-review-photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 96%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 5px 10px rgba(4, 2, 20, .55));
}
.vote-review-silhouette {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  transform: translate(-50%, -48%);
  opacity: .55;
}
.vote-review-card.has-photo .vote-review-silhouette { display: none; }
.vote-review-award,
.vote-review-pick {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  text-shadow: 0 2px 7px rgba(4, 2, 20, .9);
}
.vote-review-award {
  top: 9px;
  color: var(--mint);
  font: 800 8px/1.25 var(--mono);
  letter-spacing: .55px;
  text-transform: uppercase;
}
.vote-review-pick {
  bottom: 9px;
  display: grid;
  gap: 1px;
  color: #fff;
}
.vote-review-pick strong { font: 800 12px/1.15 var(--ui); }
.vote-review-pick span { color: rgba(255, 255, 255, .76); font-size: 10px; line-height: 1.2; }

/* The nominee slot: the check-in card's treatment — the cut-out standing on the
   team's artwork — with the presenting brand where it would sit on a poster. */
.vote-slot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--team-a, var(--mint)) 55%, #ffffff);
  background:
    linear-gradient(180deg, rgba(4, 2, 20, 0) 44%, rgba(4, 2, 20, .72) 100%),
    var(--team-art, linear-gradient(135deg, var(--team-b, #1b2340), var(--team-a, #2c3557)));
  background-size: cover, cover;
  background-position: center, center;
}
.vote-slot img#voteSlotPhoto {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 12px rgba(4, 2, 20, .5));
}
.vote-slot.has-photo .vote-slot-silhouette { display: none; }
.vote-slot-silhouette { width: 84px; opacity: .5; }
.vote-slot-caption {
  position: absolute;
  left: 14px;
  right: 92px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font: 800 12px var(--ui);
  text-shadow: 0 2px 8px rgba(4, 2, 20, .8);
}
.vote-slot-brand {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
}
.vote-copy-brand { justify-self: end; }
.vote-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.vote-brand-lockup[hidden] { display: none; }
.vote-brand-logo {
  width: auto;
  max-width: 78px;
  max-height: 24px;
  object-fit: contain;
}
.vote-brand-logo.has-logo-bg {
  max-height: 18px;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--mint);
}
.vote-brand-lockup.is-group {
  width: min(190px, 62%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 8px;
  align-items: center;
}
.vote-brand-lockup.is-group .vote-brand-logo {
  width: 100%;
  max-width: 58px;
  max-height: 14px;
  justify-self: center;
}
.vote-slot.has-brand-group .vote-slot-caption { right: 194px; }
.vote-slot-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 2, 20, .6);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.vote-slot-clear[hidden] { display: none; }
.vote-slot-clear:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* .cta sets display, which beats the UA [hidden] rule whatever the specificity */
.vote-actions .cta[hidden] { display: none; }
.vote-actions { display: flex; gap: 10px; }
.vote-actions .cta { flex: 1 1 auto; border: 0; cursor: pointer; }
.vote-actions .cta:disabled { cursor: not-allowed; opacity: .52; }
.vote-step-status { min-height: 16px; }
.vote-step-status[hidden] { display: none; }
.vote-selectors .field.is-error > span { color: #ff9bae; }
.waiver-page .vote-selectors .field.is-error select {
  background: rgba(255, 155, 174, .08);
  box-shadow: 0 0 0 2px #ff9bae;
}

/* ---- mobile: one viewport per step; the award panel becomes the pick card -- */
@media (max-width: 859px) {
  .vote-page { min-height: 100svh; }
  .vote-page .marquee--footer,
  .vote-page .footer { display: none; }
  .vote-page .waiver-main {
    min-height: 100svh;
    max-width: none;
    padding: var(--nav-h) 0 0;
  }

  /* Landing is deliberately its own screen. It introduces the task without
     making the first award begin below the fold. */
  .vote-stage-intro { overflow: hidden; }
  .vote-stage-intro .waiver-main { display: flex; padding-right: 16px; padding-left: 16px; }
  .vote-stage-intro .vote-intro {
    width: 100%;
    min-height: calc(100svh - var(--nav-h));
    display: flex;
    flex-direction: column;
    padding: 46px 0 22px;
  }
  .vote-intro .page-title {
    max-width: none;
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1;
  }
  .vote-intro .page-lede {
    max-width: none;
    margin-top: 22px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.7;
  }
  .vote-intro-action {
    width: min(44vw, 168px);
    min-height: 52px;
    align-self: flex-end;
    margin-top: auto;
    border: 0;
    cursor: pointer;
  }
  .vote-stage-intro .vote-ballot,
  .vote-stage-intro .vote-form,
  .vote-stage-intro .vote-done,
  .vote-stage-active .vote-intro,
  .vote-stage-review .vote-intro,
  .vote-stage-done .vote-intro { display: none !important; }

  /* The ballot owns the viewport. Header and controls take only what they
     need; the award/player panel absorbs the remaining height. */
  .vote-stage-active { overflow: hidden; }
  .vote-stage-active .waiver-main { height: 100svh; }
  .waiver-page .vote-ballot {
    height: calc(100svh - var(--nav-h));
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    margin: 0;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .vote-ballot .form-panel-head { padding: 0 2px; }
  .vote-ballot .form-panel-head h2 {
    margin-top: 4px;
    font-size: clamp(27px, 8vw, 36px);
  }
  .vote-layout {
    min-height: 0;
    padding-top: 12px;
  }
  .vote-card {
    height: 100%;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
  }
  .vote-copy {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
    padding: clamp(18px, 5vw, 24px);
  }
  .vote-copy-text {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .vote-brand { font-size: 9px; }
  .vote-tagline { font-size: 14px; }
  .vote-body { gap: 6px; margin-top: 8px; }
  .vote-body p { font-size: 13px; line-height: 1.45; }
  .vote-question { margin-top: 9px; font-size: 13px; }
  .vote-card:not(.has-pick) .vote-slot { display: none; }
  .vote-card.has-pick .vote-copy { display: none; }
  .vote-controls {
    display: grid;
    gap: 9px;
    padding-top: 12px;
  }
  .vote-controls .form-grid { grid-template-columns: 1fr; gap: 7px; padding-top: 0; }
  .vote-controls .field span { font-size: 9px; }
  .vote-controls .field { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; }
  .vote-controls .field select { min-height: 42px; padding: 9px 12px; font-size: 14px; }
  .vote-actions { justify-content: flex-end; }
  .vote-actions .cta { flex: 0 1 142px; min-height: 44px; padding: 10px 16px; }
  .vote-slot { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 18px; }

  .vote-star--splash-a { right: calc(var(--star-size) * -.48); top: 7%; }
  .vote-star--splash-b { left: 8%; bottom: calc(var(--star-size) * -.46); }
  .vote-star--blue-a { left: calc(var(--star-size) * -.42); top: 43%; }
  .vote-star--blue-b { left: 36%; top: calc(var(--star-size) * -.38); }
  .vote-star--violet-a { right: calc(var(--star-size) * -.42); top: 29%; }
  .vote-star--violet-b { left: 28%; bottom: calc(var(--star-size) * -.38); }
  .vote-star--mint-a { right: calc(var(--star-size) * -.42); bottom: 8%; }
  .vote-star--mint-b { left: calc(var(--star-size) * -.42); top: 68%; }

  /* Review and completion may need to scroll on short phones. */
  .vote-stage-review .waiver-main,
  .vote-stage-done .waiver-main { padding: calc(var(--nav-h) + 16px) 16px 36px; }
}

@media (min-width: 860px) {
  .vote-intro-action { display: none; }
}

@media (min-width: 860px) {
  .vote-layout {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .vote-rail {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .vote-rail-item {
    width: 100%;
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .vote-rail-item:disabled { opacity: .45; cursor: default; }
  .vote-rail-item.is-current { border-color: var(--mint); background: rgba(124, 245, 180, .1); }
  .vote-rail-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
  .vote-rail-name { font: 800 11px var(--ui); letter-spacing: .4px; text-transform: uppercase; }
  .vote-rail-pick { color: var(--ink-muted); font-size: 12px; }
  .vote-rail-item.is-done .vote-rail-pick { color: var(--mint); }

  .vote-card { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 22px; align-items: start; }
  .vote-slot { aspect-ratio: 4 / 5; }
  .vote-controls { margin-top: 20px; }
  .vote-controls .form-grid { grid-template-columns: 1fr 1fr; }
  .vote-actions { justify-content: flex-end; margin-top: 16px; }
  .vote-actions .cta { flex: 0 0 auto; min-width: 140px; }
  .vote-review-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .vote-review-card { aspect-ratio: 1 / 1; }
  .vote-review-award { font-size: 8.5px; }
  .vote-review-pick strong { font-size: 13px; }
}

/* Eligibility caveat under an award's question — only Fresh New Player has one. */
.vote-eligibility {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.vote-eligibility[hidden] { display: none; }

/* Preserve the full award story on short phones even with a six-logo lockup. */
@media (max-width: 859px) and (max-height: 620px) {
  .vote-copy { gap: 5px; padding: 12px 14px; }
  .vote-brand { font-size: 8px; }
  .vote-tagline { margin-top: 4px; font-size: 12.5px; line-height: 1.25; }
  .vote-body { gap: 4px; margin-top: 6px; }
  .vote-body p { font-size: 11.5px; line-height: 1.32; }
  .vote-question { margin-top: 6px; font-size: 11.5px; line-height: 1.25; }
  .vote-eligibility { margin-top: 5px; font-size: 10.5px; line-height: 1.3; }
  .vote-brand-lockup.is-group { gap: 3px 6px; }
  .vote-brand-lockup.is-group .vote-brand-logo { max-height: 11px; }
}

/* The deadline reuses .draw-day from the raffle mechanics panel; it only needs
   to sit in the page flow rather than in that panel's grid. */
.vote-deadline {
  width: 100%;
  margin-top: 20px;
}
.vote-deadline[hidden] { display: none; }

/* Shown in place of the ballot when an admin closes voting. */
.vote-closed-note {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 245, 180, .34);
  border-radius: 12px;
  background: rgba(124, 245, 180, .07);
  color: var(--mint);
  font-size: 14px;
  line-height: 1.5;
  max-width: 52ch;
}
/* The admin switch sits above the vote counts. */
.admin-voting-switch .admin-panel-head { align-items: center; }
.admin-voting-switch #votingSwitchState { margin: 4px 0 0; }

/* Assign-teams block on a bracket game in the admin console. Same shape as the
   video editor section above it. */
.admin-assign-teams{margin-top:18px;padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc}
.admin-assign-teams .admin-result-fields{margin-top:12px}
.admin-assign-teams .admin-video-actions{margin-top:12px}

/* ==========================================================================
   Photos — /mvl/photos
   The page borrows .videos-feature and .video-library wholesale, so only the
   tiles are new. A tile is an image with its label over it, so a gallery link
   reads as a preview rather than a button.
   ========================================================================== */
.photos-library-head--second { margin-top: 30px; }

.photos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 18px;
}

.photo-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: #030711;
  box-shadow: 0 14px 32px rgba(4, 2, 20, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
a.photo-tile:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(4, 2, 20, .3); }
a.photo-tile:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.photo-tile-media { position: absolute; inset: 0; }
.photo-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 2, 20, .05) 34%, rgba(4, 2, 20, .82) 100%);
}
.photo-tile-copy {
  position: absolute;
  left: 14px;
  right: 44px;
  bottom: 12px;
  display: grid;
  gap: 2px;
}
.photo-tile-kicker {
  color: var(--mint);
  font: 800 9px var(--mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.photo-tile-title {
  color: #fff;
  font: 800 15px var(--ui);
  letter-spacing: .2px;
  text-transform: uppercase;
}
.photo-tile-note { color: var(--ink-soft); font-size: 11.5px; }
.photo-tile-go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--mint);
  font-size: 17px;
}
/* Without a gallery yet the tile still shows its preview, says so, and is a
   div rather than an anchor — better than hiding the row or a dead link. */
.photo-tile.is-empty { filter: saturate(.6); }
.photo-tile-soon {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(4, 2, 20, .66);
  color: var(--ink-muted);
  font: 700 8px var(--mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
/* The hero button before there is a gallery to open. */
.cta.is-disabled { opacity: .55; cursor: default; pointer-events: none; }

@media (min-width: 760px) {
  .photos-grid { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photos-grid--teams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  /* Five game days read as one row rather than 3 + 2. */
  .photos-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .photos-grid--teams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   FEEDBACK FORM
   Rides on the waiver's panels and fields. What is new here is the
   1-5 rating control, and a readable label for the questions: the
   waiver's .field span is 10px letter-spaced caps, which suits a
   short field name ("Email Address") but is unreadable on a full
   sentence. The verification panel at the end keeps the waiver's
   own .field styling, since those labels are short again.
   ============================================================ */
.feedback-q {
  position: relative;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Marks the question you are on. An absolutely positioned rule rather than a
   real border or padding change, so nothing reflows as it moves down the form
   — it sits in the panel's own 18px gutter. */
.feedback-q::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -13px;
  width: 2px;
  border-radius: 2px;
  background: var(--mint);
  opacity: 0;
  transition: opacity .3s ease;
}
.feedback-q.is-active::before { opacity: .85; }
.feedback-q.is-active > .q-label { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .feedback-q::before { transition: none; }
}
.feedback-q + .feedback-q { padding-top: 4px; }
.q-label {
  display: block;
  padding: 0;
  color: rgba(237, 235, 255, .92);
  font: 700 14.5px/1.5 var(--ui);
  letter-spacing: 0;
  text-transform: none;
}
.q-optional {
  color: rgba(237, 235, 255, .42);
  font-weight: 600;
}
.feedback-q small {
  color: rgba(237, 235, 255, .5);
  font: 600 12px/1.5 var(--ui);
}

/* The radios are the hit target and stay in the tab order; the visible cell is
   the sibling span, so `input:checked + span` does the styling. Cells follow
   the waiver's controls — no border, --control-radius, --surface-deep — and
   the selected and focus states use the same layered mint glow the waiver's
   inputs use, rather than a border colour the waiver never shows. */
.rating {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.rating-opt {
  position: relative;
  display: block;
  min-width: 0;
}
.rating-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.rating-opt > span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-deep);
  color: #fff;
  font: 800 16px var(--ui);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  transition: box-shadow .15s ease, background .15s ease, color .15s ease;
}
.rating-opt input:checked + span {
  background: rgba(124, 245, 180, .14);
  color: var(--mint);
  box-shadow: 0 0 0 2px var(--mint), 0 0 0 6px rgba(124, 245, 180, .12);
}
.rating-opt input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--mint), 0 0 0 6px rgba(124, 245, 180, .12), 0 0 22px rgba(124, 245, 180, .1);
}

/* The opt-out is deliberately quieter than the scale: it is the answer we
   least want to nudge people towards, so it reads as a small ghost pill until
   it is actually chosen. */
.rating-opt--na {
  justify-self: start;
  margin-top: 2px;
}
.rating-opt--na > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--ink-muted);
  font: 700 11px var(--ui);
}
.rating-opt--na > span::before {
  content: '';
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: background .15s ease, box-shadow .15s ease;
}
.rating-opt--na input:checked + span {
  background: rgba(124, 245, 180, .1);
  box-shadow: inset 0 0 0 1px rgba(124, 245, 180, .5);
  color: var(--mint);
}
.rating-opt--na input:checked + span::before {
  background: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint);
}
.rating-opt--na input:focus-visible + span {
  box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 3px rgba(124, 245, 180, .16);
}

.rating-anchors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  color: rgba(237, 235, 255, .5);
  font: 600 11px/1.4 var(--ui);
}
.rating-anchors span { min-width: 0; overflow-wrap: anywhere; }
.rating-anchors span:last-child { text-align: right; }

.feedback-q textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 13px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-deep);
  color: #fff;
  font: 600 15px/1.55 var(--ui);
  outline: none;
  resize: vertical;
  transition: box-shadow .15s ease, background .15s ease;
}
.feedback-q textarea:focus {
  background: rgba(4, 9, 15, .82);
  box-shadow: 0 0 0 2px var(--mint), 0 0 0 6px rgba(124, 245, 180, .12), 0 0 22px rgba(124, 245, 180, .1);
}

.feedback-q.is-invalid .q-label { color: #FF9BAE; }
.feedback-q.is-invalid .rating-opt:not(.rating-opt--na) > span,
.feedback-q.is-invalid textarea { box-shadow: 0 0 0 1.5px rgba(255, 155, 174, .6); }
.feedback-q.is-invalid .rating-opt--na > span { box-shadow: inset 0 0 0 1px rgba(255, 155, 174, .5); }

.feedback-panel-note {
  padding-top: 16px;
  color: rgba(237, 235, 255, .72);
  font: 600 13px/1.6 var(--ui);
}
.feedback-anonymity {
  margin-top: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(124, 245, 180, .22);
  background: rgba(124, 245, 180, .06);
  color: rgba(237, 235, 255, .86);
  font: 600 13px/1.65 var(--ui);
}
.feedback-anonymity strong,
.feedback-page .waiver-copy strong { color: var(--mint); }
.feedback-thanks { margin-top: 24px; }
.feedback-thanks-actions { margin-top: 18px; }

@media (min-width: 960px) {
  .rating { gap: 10px; }
  .feedback-q textarea { min-height: 96px; }
}

/* Narrow phones: claw back horizontal room so the scale, its anchors and the
   panel padding fit with slack rather than exactly. Reported as a sideways
   scroll on an iPhone that neither Chromium at 320-430px nor an iPhone 17 Pro
   in the simulator reproduces, so this buys ~16px of headroom instead of
   trusting a measurement that already looked fine. */
@media (max-width: 430px) {
  .feedback-page .waiver-main { padding-left: 12px; padding-right: 12px; }
  .feedback-page .form-panel { padding-left: 14px; padding-right: 14px; }
  .feedback-page .rating { gap: 6px; }
  .feedback-page .rating-opt > span { padding: 6px 4px; font-size: 15px; }
  .feedback-page .rating-anchors { gap: 10px; font-size: 10.5px; }
  /* the active rule follows the panel's smaller gutter */
  .feedback-page .feedback-q::before { left: -9px; }
}

/* Belt and braces: `clip` rather than `hidden`, because `hidden` would make
   this a scroll container and break the sticky nav — the exact trade that bit
   the vote page. `clip` creates no scroll container, so sticky still works and
   a stray overflowing pixel can never turn into a sideways drag. */
.feedback-page { overflow-x: clip; }

/* iOS Safari zooms the page in whenever a focused control's text is under
   16px, and it does not zoom back out on blur — which leaves the page wider
   than the visual viewport and scrolling sideways. 16px is the threshold, so
   the controls meet it on touch devices rather than relying on
   maximum-scale=1, which would take pinch-zoom away from everyone. */
@media (pointer: coarse), (max-width: 767px) {
  .feedback-page .feedback-q textarea,
  .feedback-page .field input,
  .feedback-page .field select {
    font-size: 16px;
  }
}

/* ============================================================
   PLAYOFF BRACKET
   Rounds are columns; each round's matches are wrapped in
   equal-height cells, so a semifinal cell (50% of the column)
   centres exactly on the midpoint of the two quarterfinal cells
   (25% each) that feed it. That equal-height trick is also what
   lets the connectors be plain pseudo-elements: adjacent cells
   in a round are one cell-height apart centre to centre, so the
   vertical joiner is simply height:100%.
   ============================================================ */
.bracket-wrap { padding: 18px 16px 22px; }
.bracket {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.bracket-round { display: flex; flex-direction: column; min-width: 0; }
.bracket-round-label {
  margin-bottom: 12px;
  color: var(--teal);
  font: 800 10px var(--ui);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.bracket-cells {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.bracket-cell {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  position: relative;
  /* Padding, not gap: the tallest round has no slack, so without this its
     matches butt together and read as one eight-row block. Padding keeps every
     cell the same height, which is what the connectors' height:100% relies on —
     a gap would push the centres apart and leave the joiners short. */
  padding: 5px 0;
}
.bracket-match {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(4, 9, 15, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.bracket-team {
  display: grid;
  grid-template-columns: 20px 12px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  color: rgba(237, 235, 255, .72);
  font: 700 13px var(--ui);
}
.bracket-team + .bracket-team { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.bracket-team.is-winner { color: #fff; }
.bracket-seed {
  color: rgba(237, 235, 255, .38);
  font: 700 10px var(--ui);
  text-align: center;
}
.bracket-chip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--team-a), var(--team-b));
}
.bracket-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-score {
  color: rgba(237, 235, 255, .5);
  font: 800 14px var(--ui);
  text-align: right;
}
.bracket-team.is-winner .bracket-score { color: var(--mint); }
.bracket-team.is-winner .bracket-name { color: #fff; }

/* Outside the bracket grid: inside the Final column this consumed height, so
   the cells took only what was left and the final match sat 33px above the
   midpoint of the two semifinals feeding it. */
.bracket-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
  margin-top: 26px;
}
.bracket-champion {
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(124, 245, 180, .1);
  box-shadow: inset 0 0 0 1px rgba(124, 245, 180, .3);
}
.bracket-champion span {
  display: block;
  margin-bottom: 3px;
  color: var(--mint);
  font: 800 9px var(--ui);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.bracket-champion strong { color: #fff; font: 800 16px var(--ui); }

.bracket-third { max-width: 340px; }

/* Connectors only once the rounds sit side by side; stacked, they would point
   at nothing. */
@media (min-width: 760px) {
  .bracket-round:not(:last-child) .bracket-cell::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 14px;
    border-top: 1px solid rgba(124, 245, 180, .28);
  }
  /* One joiner per pair, spanning from this cell's centre to the next one's. */
  .bracket-round:not(:last-child) .bracket-cell:nth-child(odd)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    height: 100%;
    border-left: 1px solid rgba(124, 245, 180, .28);
  }
  .bracket-round:not(:first-child) .bracket-match::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 14px;
    border-top: 1px solid rgba(124, 245, 180, .28);
  }
  .bracket-round:not(:first-child) .bracket-cell { position: relative; }
  .bracket-round:not(:first-child) .bracket-match { position: relative; }
}

/* Stacked on phones: three columns of two-line cards would leave the names
   ellipsised to nothing. */
@media (max-width: 759px) {
  .bracket { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bracket-outcomes { grid-template-columns: minmax(0, 1fr); }
  .bracket-cells { gap: 0; }
}

/* ============================================================
   ADMIN · PARTICIPANT FEEDBACK REPORT
   Light console theme, matching the other admin panels rather
   than the public site's navy.
   ============================================================ */
.admin-feedback-report { display: grid; gap: 26px; }
.admin-fb-team-summary { display: grid; gap: 9px; margin-bottom: 22px; }
.admin-fb-team-summary > h3 {
  margin: 0;
  color: #344054;
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
}
.admin-fb-team-count-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-fb-team-count {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 11px 12px;
  border-left: 4px solid var(--team-color, #475467);
  border-radius: 8px;
  background: #f8fafc;
}
.admin-fb-team-count span {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-fb-team-count strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #1d2433;
  font: 800 24px/1 Arial, Helvetica, sans-serif;
}
.admin-fb-team-count small {
  color: #98a2b3;
  font: 600 10px/1.2 Arial, Helvetica, sans-serif;
}
.admin-fb-section { display: grid; gap: 12px; }
.admin-fb-section > h3 {
  margin: 0;
  color: #344054;
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
}
.admin-fb-grid { display: grid; gap: 12px; }
.admin-fb-card {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
}
.admin-fb-label {
  margin-bottom: 10px;
  color: #1d2433;
  font: 600 13px/1.45 Arial, Helvetica, sans-serif;
}
.admin-fb-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.admin-fb-score strong {
  display: block;
  color: #1d2433;
  font: 800 26px/1 Arial, Helvetica, sans-serif;
}
.admin-fb-score span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
}
/* A bar chart rather than a number alone: an average of 3 hides whether the
   room was lukewarm or evenly split, and those need different responses. */
.admin-fb-bars {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  align-items: end;
  gap: 6px;
  height: 54px;
}
.admin-fb-bar {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.admin-fb-bar-fill {
  display: block;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: #25324a;
}
.admin-fb-bar b {
  color: #98a2b3;
  font: 700 10px Arial, Helvetica, sans-serif;
  text-align: center;
}
.admin-fb-anchors {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 600;
}
.admin-fb-answers {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-fb-answers li {
  padding: 9px 11px;
  border-left: 2px solid #d0d5dd;
  border-radius: 0 8px 8px 0;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.admin-fb-empty, .admin-fb-count {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
}
.admin-fb-count { margin-top: 9px; }

@media (min-width: 900px) {
  .admin-fb-team-count-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-fb-card--text { grid-column: 1 / -1; }
}