/* ========================================================================== 
   PROJECT 12 DISCIPLES — v0.3.4 “PROFESSIONAL UI POLISH”
   ========================================================================== */

:root {
  /* Backgrounds */
  --bg-page: #0b1120;
  --bg-panel: #1e293b;
  --bg-panel-dark: #0f172a;
  --bg-hover: #334155;

  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-placeholder: #64748b;
  --text-card: #e2e8f0;

  /* Accent colors */
  --accent: #38bdf8;
  --accent-light: #818cf8;
  --accent-hover: #2563eb;
  --accent-border: #3b82f6;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-wash: rgba(56, 189, 248, 0.1);
  --accent-border-soft: rgba(56, 189, 248, 0.3);
  --gold: #eab308;
  --gold-light: #facc15;
  --gold-soft: rgba(234, 179, 8, 0.12);
  --danger: #dc2626;
  --danger-light: #ef4444;
  --danger-dark: #7f1d1d;
  --danger-border: #991b1b;
  --danger-text: #fecaca;
  --success-dark: #14532d;

  /* Borders and shadows */
  --border: #334155;
  --border-light: #475569;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-large: 0 20px 40px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 20px rgba(234, 179, 8, 0.2);
  --winner-glow: 0 0 12px rgba(56, 189, 248, 0.45);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;

  /* Bracket layout */
  --round-width: 230px;
  --round-gap: 48px;
  --connector: 24px;
  --grid-row: 130px;
  --grid-gap: 20px;

  /* Motion and layers */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
  --z-card: 2;
  --z-dropdown: 100;
  --z-modal: 1000;

  /* Professional UI */
  --bg-deep: #050913;
  --bg-elevated: rgba(15, 23, 42, 0.82);
  --panel-glass: rgba(17, 27, 48, 0.78);
  --panel-highlight: rgba(255, 255, 255, 0.055);
  --line-glow: rgba(56, 189, 248, 0.22);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);
  --danger-soft: rgba(239, 68, 68, 0.14);
  --shadow-header: 0 24px 70px rgba(0, 0, 0, 0.38);
  --shadow-premium: 0 14px 38px rgba(0, 0, 0, 0.34);
  --shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(56, 189, 248, 0.16);
}

/* ========================================================================== 
   RESET & GLOBAL
   ========================================================================== */

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  min-width: 320px;
  margin: 0;
  padding: var(--space-6);
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
select,
input { font: inherit; }

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========================================================================== 
   SHARED COMPONENTS & UTILITIES
   ========================================================================== */

.card {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-panel-dark));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
.clickable { cursor: pointer; }
.hidden { display: none !important; }

/* ========================================================================== 
   MASTER MODE BANNER
   ========================================================================== */

#master-mode-banner {
  display: none;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--danger-dark);
  color: var(--danger-text);
  border-bottom: 2px solid var(--danger-border);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
}

#master-mode-banner.is-visible { display: block; }

/* ========================================================================== 
   HEADER & CONTROLS
   ========================================================================== */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-panel-dark));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.header-title { flex: 1 1 360px; }

.header-title h1 {
  margin: 0 0 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  background-clip: text;
  color: transparent;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-title p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.header-controls,
.btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.btn-group { gap: var(--space-2); }

#g5-selector-container {
  padding: 10px var(--space-4);
  background: var(--bg-panel-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

#g5-select {
  margin-left: 10px;
  padding: 6px 10px;
  background: var(--bg-panel);
  color: var(--accent);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}

#score-board {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent-wash), rgba(129, 140, 248, 0.1));
  border: 1px solid var(--accent-border-soft);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#user-score {
  margin-left: 6px;
  color: var(--accent);
  font-size: 1.4rem;
}

.action-btn,
.reset-btn {
  padding: 8px 14px;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition-fast);
}

.action-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-border);
}

.reset-btn:hover {
  background: var(--danger);
  border-color: var(--danger-light);
}

.action-btn:active,
.reset-btn:active { transform: translateY(1px); }

.mode-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-panel-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.mode-btn {
  padding: 6px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.mode-btn:hover { color: var(--text-primary); }
.mode-btn.active { background: var(--accent-hover); color: var(--text-primary); }
.mode-btn.master-active { background: #b91c1c; color: var(--text-primary); }

/* ========================================================================== 
   BRACKET GRID
   Column 1: First Round | Column 2: Quarterfinals
   Column 3: Semifinals | Column 4: Championship / Champion
   ========================================================================== */

#bracket-wrapper {
  overflow-x: auto;
  padding-bottom: var(--space-5);
  scrollbar-color: var(--border-light) var(--bg-panel-dark);
}

.bracket-headers,
#bracket-grid {
  min-width: calc((4 * var(--round-width)) + (3 * var(--round-gap)));
}

.bracket-headers {
  display: grid;
  grid-template-columns: repeat(4, var(--round-width));
  column-gap: var(--round-gap);
  margin-bottom: var(--space-5);
}

.bracket-headers h2 {
  margin: 0;
  padding-bottom: var(--space-2);
  color: var(--accent);
  border-bottom: 2px solid var(--bg-panel);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#bracket-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--round-width));
  grid-template-rows: repeat(4, var(--grid-row));
  column-gap: var(--round-gap);
  row-gap: var(--grid-gap);
  align-items: center;
}

/* ========================================================================== 
   MATCHUPS & TEAM SLOTS
   ========================================================================== */

.matchup {
  position: relative;
  z-index: var(--z-card);
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.team-slot,
.team {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px var(--space-3);
  background: var(--bg-panel);
  color: var(--text-card);
  border-bottom: 1px solid var(--bg-panel-dark);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-slot:last-child,
.team:last-child { border-bottom: 0; }

.team-slot:hover,
.team:hover:not(.placeholder) {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateX(3px);
}

.team-slot.bye-slot { border-left: 3px solid var(--accent); }

.team-slot.has-team,
.team.has-team {
  border-left: 5px solid var(--team-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--team-color) 26%, transparent), var(--bg-panel-dark));
}

.seed-tag {
  min-width: 26px;
  margin-right: 10px;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--space-1);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
}

.placeholder,
.placeholder-text {
  color: var(--text-placeholder);
  font-style: italic;
  font-weight: 500;
}

.team-content,
.team-item-main,
.champion-content {
  display: flex;
  align-items: center;
}

.team-content {
  flex: 1;
  min-width: 0;
  gap: var(--space-2);
  overflow: hidden;
  padding-left: var(--space-1);
}

.advanced-team-content { padding-left: 6px; }

.team-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.team-name {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-change-btn {
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: none;
  color: var(--text-secondary);
  border: 0;
  font-size: 10px;
  cursor: pointer;
}

.team-change-btn:hover { color: var(--text-primary); }

.correct-pick {
  box-shadow: inset 0 0 0 2px #22c55e, var(--winner-glow);
}

.incorrect-pick { box-shadow: inset 0 0 0 2px var(--danger-light); }

.team.pending { opacity: 0.8; }
.team.live { animation: live-pulse 1.8s infinite; }

@keyframes live-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* ========================================================================== 
   BRACKET CONNECTORS
   ========================================================================== */

.line-r1-qf::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 2px;
  background: var(--border-light);
}

.bracket-top::after,
.bracket-bottom::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--connector));
  width: var(--connector);
  height: calc(100% + var(--grid-gap));
  border-right: 2px solid var(--border-light);
}

.bracket-top::after {
  top: 50%;
  border-top: 2px solid var(--border-light);
}

.bracket-bottom::after {
  bottom: 50%;
  border-bottom: 2px solid var(--border-light);
}

.bracket-top::before,
.bracket-bottom::before,
.final-matchup::before,
.cell-nc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--connector));
  width: var(--connector);
  height: 2px;
  background: var(--border-light);
}

/* ========================================================================== 
   CHAMPIONSHIP LAYOUT & CHAMPION
   ========================================================================== */

.cell-sf1 { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.cell-sf2 { grid-column: 3; grid-row: 3 / span 2; align-self: center; }
.cell-nc { grid-column: 4; grid-row: 1 / span 4; align-self: center; }
.cell-champ { grid-column: 4; grid-row: 1 / span 4; align-self: center; transform: translateY(125px); }

.cell-sf1::after,
.cell-sf2::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--connector));
  width: var(--connector);
  height: 150px;
  border-right: 2px solid var(--border-light);
}

.cell-sf1::after { top: 50%; border-top: 2px solid var(--border-light); }
.cell-sf2::after { bottom: 50%; border-bottom: 2px solid var(--border-light); }

#champion-box {
  align-self: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--gold-soft), rgba(15, 23, 42, 0.9));
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold);
  text-align: center;
}

#champion-box h3 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.winner-banner {
  min-height: 38px;
  color: var(--gold-light);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.winner-banner.has-champion {
  padding: var(--space-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 34%, transparent), var(--bg-panel-dark));
  border: 2px solid var(--team-color);
  border-radius: var(--radius-md);
}

.champion-content { justify-content: center; gap: 10px; }
.champion-logo { width: 30px; height: 30px; object-fit: contain; }
.champion-name { color: var(--text-primary); font-size: 1.2rem; font-weight: 800; }
.champion-placeholder { color: var(--text-placeholder); font-weight: 600; }

/* ========================================================================== 
   TEAM PICKER MODAL
   ========================================================================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  padding: var(--space-5);
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.modal.is-open { display: block; }

.modal-content {
  width: min(90%, 480px);
  margin: 5vh auto;
  padding: var(--space-6);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-large);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { margin: 0; color: var(--accent); font-size: 1.1rem; }

.close-btn {
  padding: 0;
  background: none;
  color: var(--text-secondary);
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.close-btn:hover { color: var(--text-primary); }

.modal-search-bar input {
  width: 100%;
  margin-bottom: 14px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-panel-dark);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.modal-search-bar input:focus { border-color: var(--accent); }

.conference-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: var(--space-2);
  overflow-x: auto;
}

.filter-btn {
  padding: 6px var(--space-3);
  background: var(--bg-panel-dark);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--accent);
  color: var(--bg-page);
  border-color: var(--accent);
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.team-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  background: var(--bg-panel-dark);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition-fast);
}

.team-item:hover { background: var(--bg-hover); transform: translateX(2px); }
.team-item.disabled { opacity: 0.35; cursor: not-allowed; }
.team-item.disabled:hover { background: var(--bg-panel-dark); transform: none; }

.team-item-main { min-width: 0; gap: 10px; }
.team-item-logo { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; }
.team-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-item-conf {
  flex: 0 0 auto;
  padding: 3px var(--space-2);
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ========================================================================== 
   RESPONSIVE FOUNDATION
   ========================================================================== */

@media (max-width: 1100px) {
  body { padding: var(--space-3); }
  #master-mode-banner { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-4); }
  header { align-items: flex-start; }
  .header-controls,
  .btn-group { width: 100%; }
}

@media (max-width: 700px) {
  header { padding: var(--space-4); }
  .header-title h1 { font-size: 1.4rem; }
  .header-controls,
  .btn-group { flex-direction: column; align-items: stretch; }
  #g5-selector-container,
  #score-board,
  .mode-switch,
  .action-btn { width: 100%; }
  #g5-select { width: 100%; margin: var(--space-2) 0 0; }
  .mode-btn { flex: 1; }
  .modal { padding: var(--space-3); }
  .modal-content { width: 100%; margin: 2vh auto; padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========================================================================== 
   v0.3.0 PROFESSIONAL UI — POLISH LAYER
   ========================================================================== */

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.12), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(129, 140, 248, 0.1), transparent 30rem),
    linear-gradient(180deg, #070d19 0%, var(--bg-page) 42%, #070b14 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.app-shell {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 42px) 48px;
}

#master-mode-banner {
  margin: -24px calc(-1 * clamp(16px, 3vw, 42px)) 18px;
  padding: 11px clamp(16px, 3vw, 42px);
  background: linear-gradient(90deg, #5f1118, #8b1f28 48%, #5f1118);
  border-color: rgba(254, 202, 202, 0.26);
  box-shadow: 0 10px 28px rgba(127, 29, 29, 0.24);
  letter-spacing: 0.015em;
}

.banner-icon { margin-right: 8px; color: #fca5a5; }

.app-header {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) minmax(360px, 0.9fr);
  grid-template-areas:
    "brand dashboard"
    "actions actions";
  align-items: center;
  gap: 22px 28px;
  overflow: hidden;
  margin-bottom: 26px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(10, 17, 32, 0.94)),
    radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.18), transparent 45%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 22px;
  box-shadow: var(--shadow-header);
  backdrop-filter: blur(20px);
}

.app-header::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(56, 189, 248, 0.05);
}

.brand-block {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  place-items: center;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(129, 140, 248, 0.08));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.25);
  transform: rotate(45deg);
}

.brand-mark-ball {
  color: var(--accent);
  font-size: 30px;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
  transform: rotate(-45deg);
}

.header-title { flex: initial; min-width: 0; }

.eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.season-pill,
.version-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.season-pill { background: var(--accent-soft); color: #7dd3fc; border: 1px solid rgba(56,189,248,.26); }
.version-pill { background: rgba(129,140,248,.1); color: #c7d2fe; border: 1px solid rgba(129,140,248,.22); }

.header-title h1 {
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.header-title p {
  max-width: 680px;
  color: #a9b7ca;
  font-size: 0.98rem;
  line-height: 1.55;
}

.header-dashboard {
  grid-area: dashboard;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(230px, 280px);
  gap: 12px;
}

.dashboard-control,
.score-card {
  min-height: 126px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}

#g5-selector-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px;
  background: rgba(8, 15, 29, 0.66);
  border-color: rgba(148, 163, 184, 0.17);
}

.control-label,
.score-label,
.section-kicker,
.modal-kicker,
.champion-kicker {
  color: var(--text-secondary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#g5-selector-container label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0 10px;
  color: var(--text-card);
  font-size: 0.84rem;
  font-weight: 700;
}

.bonus-chip {
  display: inline-grid;
  min-width: 29px;
  height: 22px;
  place-items: center;
  background: rgba(234, 179, 8, 0.13);
  color: var(--gold-light);
  border: 1px solid rgba(234,179,8,.28);
  border-radius: 999px;
  font-size: .7rem;
}

#g5-select {
  width: 100%;
  margin: 0;
  padding: 10px 34px 10px 11px;
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(71,85,105,.9);
  transition: border-color var(--transition), box-shadow var(--transition);
}

#g5-select:hover,
#g5-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.09); }

.score-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(8, 47, 73, 0.62), rgba(30, 27, 75, 0.46));
  border-color: rgba(56,189,248,.25);
}

.score-value-row { display: flex; align-items: baseline; gap: 6px; margin: 5px 0 2px; }
#user-score { margin: 0; color: #fff; font-size: 2.65rem; line-height: 1; letter-spacing: -.06em; text-shadow: 0 0 22px rgba(56,189,248,.36); }
.score-unit { color: var(--accent); font-size: .69rem; font-weight: 900; letter-spacing: .11em; }
.score-caption { color: #7890aa; font-size: .67rem; line-height: 1.3; }

.header-actions {
  grid-area: actions;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.13);
}

.mode-control-group { display: flex; flex-direction: column; gap: 7px; }
.mode-switch { padding: 4px; background: rgba(5, 10, 20, .62); border-color: rgba(71,85,105,.78); border-radius: 12px; }
.mode-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 8px 14px; border-radius: 9px; }
.mode-dot { width: 7px; height: 7px; background: #64748b; border-radius: 50%; transition: var(--transition); }
.mode-btn.active { background: linear-gradient(135deg, #0369a1, #2563eb); box-shadow: 0 7px 18px rgba(37,99,235,.23); }
.mode-btn.active .mode-dot { background: #bae6fd; box-shadow: 0 0 9px #38bdf8; }
.mode-btn.master-active { background: linear-gradient(135deg, #991b1b, #dc2626); box-shadow: 0 7px 18px rgba(220,38,38,.2); }
.mode-btn.master-active .mode-dot { background: #fecaca; box-shadow: 0 0 9px #f87171; }

.action-btn,
.reset-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 14px; background: rgba(51,65,85,.68); border-color: rgba(100,116,139,.52); }
.reset-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(220,38,38,.16); }

.bracket-stage {
  padding: clamp(18px, 2.8vw, 30px);
  background: linear-gradient(180deg, rgba(17, 27, 48, 0.77), rgba(8, 14, 27, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(16px);
}

.stage-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.stage-heading h2 { margin: 5px 0 0; font-size: 1.48rem; letter-spacing: -.025em; }
.section-kicker { color: var(--accent); }
.stage-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: var(--text-secondary); font-size: .72rem; font-weight: 650; }
.stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 8px; height: 8px; border-radius: 50%; }
.legend-bye { background: var(--accent); box-shadow: 0 0 8px rgba(56,189,248,.55); }
.legend-correct { background: var(--success); }
.legend-incorrect { background: var(--danger-light); }

#bracket-wrapper { margin: 0 -8px; padding: 3px 8px 16px; }
.bracket-headers { margin-bottom: 13px; }
.bracket-headers h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 11px;
  color: #b8c7d9;
  border-bottom: 1px solid rgba(71, 85, 105, .65);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bracket-headers h3 span { display: inline-grid; width: 22px; height: 22px; place-items: center; color: var(--accent); background: rgba(56,189,248,.09); border: 1px solid rgba(56,189,248,.18); border-radius: 6px; font-size: .62rem; }

.matchup {
  background: linear-gradient(150deg, rgba(30, 41, 59, .95), rgba(12, 20, 36, .95));
  border-color: rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.035);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.matchup:hover { border-color: rgba(56,189,248,.25); box-shadow: var(--shadow-hover); }

.team-slot,
.team {
  min-height: 48px;
  padding: 11px 12px;
  background: rgba(30, 41, 59, .72);
  border-bottom-color: rgba(15,23,42,.86);
  border-radius: 10px;
}
.team-slot:hover,
.team:hover:not(.placeholder) { background: rgba(51,65,85,.8); transform: translateX(2px); }
.team-slot.bye-slot { border-left-width: 4px; box-shadow: inset 6px 0 12px rgba(56,189,248,.035); }
.team-slot.has-team,
.team.has-team { background: linear-gradient(90deg, color-mix(in srgb, var(--team-color) 31%, transparent), rgba(13, 22, 39, .97)); }
.team-slot.has-team::after,
.team.has-team::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.035); }

.seed-tag { min-width: 30px; padding: 4px 6px; border: 1px solid rgba(56,189,248,.16); border-radius: 7px; }
.team-logo { width: 25px; height: 25px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.team-name { font-size: .9rem; letter-spacing: -.01em; }
.team-change-btn { width: 25px; height: 25px; justify-content: center; padding: 0; background: rgba(148,163,184,.06); border-radius: 7px; }

.line-r1-qf::after,
.bracket-top::before,
.bracket-bottom::before,
.final-matchup::before,
.cell-nc::before { background: linear-gradient(90deg, var(--border-light), rgba(56,189,248,.55)); box-shadow: 0 0 7px var(--line-glow); }
.bracket-top::after,
.bracket-bottom::after,
.cell-sf1::after,
.cell-sf2::after { border-color: rgba(71,85,105,.92); filter: drop-shadow(0 0 4px var(--line-glow)); }

.correct-pick { background-color: var(--success-soft) !important; box-shadow: inset 0 0 0 2px var(--success), 0 0 18px rgba(34,197,94,.16); }
.incorrect-pick { background-color: var(--danger-soft) !important; box-shadow: inset 0 0 0 2px var(--danger-light), 0 0 18px rgba(239,68,68,.12); }

#champion-box {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 22px 18px 18px;
  background:
    radial-gradient(circle at 50% -20%, rgba(250,204,21,.25), transparent 58%),
    linear-gradient(155deg, rgba(65,48,9,.42), rgba(12,20,36,.97));
  border-color: rgba(234,179,8,.68);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 32px rgba(234,179,8,.1), inset 0 1px rgba(255,255,255,.07);
}
#champion-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.05) 42%, transparent 65%); transform: translateX(-100%); animation: champion-sheen 7s ease-in-out infinite; }
.trophy-orbit { display: grid; width: 35px; height: 35px; margin: 0 auto 8px; place-items: center; color: var(--gold-light); background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.3); border-radius: 50%; box-shadow: 0 0 18px rgba(234,179,8,.18); }
.champion-kicker { display: block; margin-bottom: 3px; color: #d6b84f; }
#champion-box h3 { margin-bottom: 11px; font-size: .87rem; }
.winner-banner { display: grid; min-height: 49px; place-items: center; }
.winner-banner.has-champion { padding: 10px; border-radius: 11px; animation: champion-arrive .38s ease both; }
.champion-logo { width: 38px; height: 38px; filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)); }
.champion-name { font-size: 1.08rem; }
@keyframes champion-sheen { 0%, 68% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }
@keyframes champion-arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.modal { background: rgba(3, 7, 16, .82); backdrop-filter: blur(12px); animation: modal-fade .18s ease; }
.modal-content { width: min(94%, 550px); margin: 4vh auto; padding: 0; overflow: hidden; background: linear-gradient(160deg, rgba(30,41,59,.98), rgba(10,17,31,.99)); border-color: rgba(148,163,184,.23); border-radius: 20px; box-shadow: 0 30px 85px rgba(0,0,0,.65); animation: modal-rise .24s ease; }
.modal-header { margin: 0; padding: 20px 22px 16px; background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.13); }
.modal-header h3 { margin-top: 4px; color: #fff; font-size: 1.18rem; }
.modal-kicker { color: var(--accent); }
.close-btn { display: grid; width: 34px; height: 34px; place-items: center; background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.12); border-radius: 10px; }
.modal-search-bar { position: relative; margin: 18px 22px 0; }
.search-icon { position: absolute; top: 50%; left: 13px; color: var(--text-secondary); font-size: 1.2rem; transform: translateY(-50%); pointer-events: none; }
.modal-search-bar input { margin: 0; padding: 12px 14px 12px 40px; background: rgba(5,10,20,.7); border-color: rgba(71,85,105,.75); }
.modal-helper { margin: 9px 22px 13px; color: #71849b; font-size: .72rem; line-height: 1.45; }
.conference-filters { margin: 0; padding: 0 22px 14px; scrollbar-width: thin; }
.filter-btn { border-radius: 999px; }
.team-list { max-height: min(48vh, 390px); padding: 0 22px 22px; }
.team-item { min-height: 52px; padding: 10px 12px; background: rgba(15,23,42,.7); border: 1px solid rgba(71,85,105,.28); }
.team-item:hover { background: rgba(51,65,85,.68); border-color: rgba(56,189,248,.24); transform: translateX(3px); }
.team-item-logo { width: 29px; height: 29px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.team-item-conf { background: rgba(30,41,59,.8); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

@media (max-width: 980px) {
  .app-header { grid-template-columns: 1fr; grid-template-areas: "brand" "dashboard" "actions"; }
  .header-dashboard { grid-template-columns: minmax(230px, 1fr) 170px; }
}

@media (max-width: 700px) {
  .app-shell { padding: 12px 10px 28px; }
  #master-mode-banner { margin: -12px -10px 12px; }
  .app-header { padding: 18px; border-radius: 16px; }
  .brand-block { align-items: flex-start; }
  .brand-mark { width: 48px; height: 48px; border-radius: 15px; }
  .brand-mark-ball { font-size: 21px; }
  .header-title h1 { font-size: 1.55rem; }
  .header-dashboard { grid-template-columns: 1fr; }
  .dashboard-control, .score-card { min-height: auto; }
  .score-card { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .score-caption { flex-basis: 100%; margin-top: 4px; }
  .header-actions { align-items: stretch; flex-direction: column; }
  .mode-control-group, .mode-switch, .reset-btn { width: 100%; }
  .mode-btn { flex: 1; justify-content: center; }
  .bracket-stage { padding: 16px 12px; border-radius: 16px; }
  .stage-heading { align-items: flex-start; flex-direction: column; }
  .stage-legend { justify-content: flex-start; }
  .modal-content { margin: 1vh auto; border-radius: 16px; }
}

/* ========================================================================== 
   v0.3.5 — SCORING FEEDBACK REFINEMENT
   Subtle full-card outlines preserve readability without icons or glows.
   ========================================================================== */

:root {
  --success-outline: rgba(74, 222, 128, 0.62);
  --success-tint: rgba(34, 197, 94, 0.055);
  --danger-outline: rgba(248, 113, 113, 0.58);
  --danger-tint: rgba(239, 68, 68, 0.045);
  --shadow-modal-soft: 0 26px 70px rgba(0, 0, 0, 0.52);
}

/*
  Scoring feedback uses a separate inset layer:
  - the outer-left team-color rail remains unobstructed
  - the scoring border begins inside the card body
  - no icons, strike-through, or glow
  - the soft tint preserves team-name readability
*/
.correct-pick,
.incorrect-pick {
  position: relative;
  outline: none;
  box-shadow: none !important;
}

.correct-pick {
  background:
    linear-gradient(90deg, var(--success-tint), transparent 72%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--team-color, var(--success)) 20%, transparent),
      rgba(13, 22, 39, 0.97)
    ) !important;
}

.incorrect-pick {
  background:
    linear-gradient(90deg, var(--danger-tint), transparent 72%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--team-color, var(--danger-light)) 16%, transparent),
      rgba(13, 22, 39, 0.97)
    ) !important;
}

/* The status frame is inset so it never covers the team-color rail. */
.correct-pick::before,
.incorrect-pick::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  pointer-events: none;
  border: 2px solid transparent;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* Selected teams reserve the outer five pixels for their team color. */
.has-team.correct-pick::before,
.has-team.incorrect-pick::before {
  left: 7px;
}

.correct-pick::before {
  border-color: var(--success-outline);
}

.incorrect-pick::before {
  border-color: var(--danger-outline);
}

.correct-pick .team-name,
.incorrect-pick .team-name,
.correct-pick .champion-name,
.incorrect-pick .champion-name {
  color: var(--text-primary);
}

/* Slightly roomier rows without additional badges or conference branding. */
.team-slot,
.team {
  min-height: 51px;
  padding: 12px 13px;
}

.team-logo--slot {
  width: 24px;
  height: 24px;
}

.team-logo--champion {
  width: 43px;
  height: 43px;
}

/* Softer motion keeps interaction responsive without pulling focus. */
.team-slot:hover,
.team:hover:not(.placeholder) {
  transform: translateY(-1px);
  filter: brightness(1.035);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

/* Restrained trophy-display treatment. */
#champion-box {
  padding: 21px 18px;
  border-color: rgba(234, 179, 8, 0.66);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), 0 0 18px rgba(234, 179, 8, 0.075);
}

#champion-display {
  min-height: 86px;
}

/* Softer modal depth and interactions. */
.modal-content {
  box-shadow: var(--shadow-modal-soft);
}

.team-item:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* Master Results is authoritative data and never receives scoring decoration. */
body.master-mode .correct-pick,
body.master-mode .incorrect-pick {
  outline: none;
  box-shadow: none !important;
}

body.master-mode .correct-pick::before,
body.master-mode .incorrect-pick::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .team-slot:hover,
  .team:hover:not(.placeholder),
  .team-item:hover:not(.disabled) {
    transform: none;
  }
}

/* ========================================================================== 
   v0.3.7 — SEAMLESS SCORING FRAME
   The scoring frame joins the team-color rail rather than appearing as a
   separate rounded rectangle inside the card.
   ========================================================================== */

:root {
  --success-frame: rgba(74, 222, 128, 0.52);
  --danger-frame: rgba(248, 113, 113, 0.48);
}

/* Preserve the outer team-color rail and keep the card body visually unified. */
.has-team.correct-pick,
.has-team.incorrect-pick {
  overflow: hidden;
}

/*
  Three-sided frame:
  - no left border competing with the team-color rail
  - top and bottom lines meet the rail cleanly
  - only the outer-right corners are rounded
*/
.has-team.correct-pick::before,
.has-team.incorrect-pick::before {
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 5px;
  border-left: 0;
  border-radius: 0 calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0;
}

.has-team.correct-pick::before {
  border-top-color: var(--success-frame);
  border-right-color: var(--success-frame);
  border-bottom-color: var(--success-frame);
}

.has-team.incorrect-pick::before {
  border-top-color: var(--danger-frame);
  border-right-color: var(--danger-frame);
  border-bottom-color: var(--danger-frame);
}

/* Champion has no team-color rail, so retain a complete soft frame. */
#champion-display.correct-pick::before,
#champion-display.incorrect-pick::before {
  left: 1px;
  border-left: 2px solid;
  border-radius: calc(var(--radius-md) - 2px);
}

#champion-display.correct-pick::before {
  border-left-color: var(--success-frame);
}

#champion-display.incorrect-pick::before {
  border-left-color: var(--danger-frame);
}


/* ========================================================================== 
   v0.3.8 — SCORING RAIL UI
   Correctness replaces the existing team-color rail instead of adding another
   border layer. The card body keeps only a restrained status tint.
   ========================================================================== */

:root {
  --success-rail: #22c55e;
  --danger-rail: #ef4444;
  --success-rail-tint: rgba(34, 197, 94, 0.055);
  --danger-rail-tint: rgba(239, 68, 68, 0.045);
}

/* Remove all scoring-frame layers from prior playtest releases. */
.correct-pick::before,
.incorrect-pick::before,
.has-team.correct-pick::before,
.has-team.incorrect-pick::before,
#champion-display.correct-pick::before,
#champion-display.incorrect-pick::before {
  content: none !important;
  display: none !important;
}

/*
  The left rail is the only strong status signal:
  - pending: original school color
  - correct: green
  - incorrect: red
*/
.has-team.correct-pick {
  border-left-color: var(--success-rail) !important;
  background:
    linear-gradient(90deg, var(--success-rail-tint), transparent 72%),
    linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

.has-team.incorrect-pick {
  border-left-color: var(--danger-rail) !important;
  background:
    linear-gradient(90deg, var(--danger-rail-tint), transparent 72%),
    linear-gradient(90deg, rgba(239, 68, 68, 0.07), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

/* Champion has no school-color rail, so add the same restrained status rail. */
#champion-display.correct-pick {
  border-left: 5px solid var(--success-rail) !important;
  background:
    linear-gradient(90deg, var(--success-rail-tint), transparent 72%),
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

#champion-display.incorrect-pick {
  border-left: 5px solid var(--danger-rail) !important;
  background:
    linear-gradient(90deg, var(--danger-rail-tint), transparent 72%),
    linear-gradient(135deg, rgba(239, 68, 68, 0.07), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

/* Master Results remains authoritative and visually neutral. */
body.master-mode .has-team.correct-pick,
body.master-mode .has-team.incorrect-pick {
  border-left-color: var(--team-color) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color) 26%, transparent),
    var(--bg-panel-dark)
  ) !important;
}

body.master-mode #champion-display.correct-pick,
body.master-mode #champion-display.incorrect-pick {
  border-left: 0 !important;
}


/* ==========================================================================
   v0.4.0 — NEUTRAL SCORING RAIL
   --------------------------------------------------------------------------
   The left divider now belongs exclusively to scoring status:
   - pending/unscored: neutral slate
   - correct: green
   - incorrect: red

   Team identity remains visible through the logo and the restrained
   school-color background gradient. No scoring outlines, icons, or glows.
   ========================================================================== */

:root {
  --status-rail-pending: #64748b;
  --status-rail-correct: #22c55e;
  --status-rail-incorrect: #ef4444;
  --status-rail-width: 2px;
}

/* Neutral divider for every populated team card, including Master Results. */
.team-slot.has-team,
.team.has-team {
  border-left: var(--status-rail-width) solid var(--status-rail-pending) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color) 16%, transparent),
    var(--bg-panel-dark)
  ) !important;
}

/* My Picks scoring states own the divider color. */
.team-slot.has-team.correct-pick,
.team.has-team.correct-pick {
  border-left-color: var(--status-rail-correct) !important;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.045), transparent 68%),
    linear-gradient(90deg, color-mix(in srgb, var(--team-color) 13%, transparent), var(--bg-panel-dark)) !important;
  box-shadow: none !important;
}

.team-slot.has-team.incorrect-pick,
.team.has-team.incorrect-pick {
  border-left-color: var(--status-rail-incorrect) !important;
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.04), transparent 68%),
    linear-gradient(90deg, color-mix(in srgb, var(--team-color) 13%, transparent), var(--bg-panel-dark)) !important;
  box-shadow: none !important;
}

/* Champion uses the same status divider language. */
#champion-display.has-champion {
  border-left: var(--status-rail-width) solid var(--status-rail-pending) !important;
}

#champion-display.has-champion.correct-pick {
  border-left-color: var(--status-rail-correct) !important;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.045), transparent 68%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, transparent), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

#champion-display.has-champion.incorrect-pick {
  border-left-color: var(--status-rail-incorrect) !important;
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.04), transparent 68%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, transparent), rgba(13, 22, 39, 0.97)) !important;
  box-shadow: none !important;
}

/* Master Results is authoritative and always displays the neutral divider. */
body.master-mode .team-slot.has-team,
body.master-mode .team.has-team,
body.master-mode .team-slot.has-team.correct-pick,
body.master-mode .team-slot.has-team.incorrect-pick,
body.master-mode .team.has-team.correct-pick,
body.master-mode .team.has-team.incorrect-pick {
  border-left-color: var(--status-rail-pending) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color) 16%, transparent),
    var(--bg-panel-dark)
  ) !important;
}

body.master-mode #champion-display.has-champion,
body.master-mode #champion-display.has-champion.correct-pick,
body.master-mode #champion-display.has-champion.incorrect-pick {
  border-left: var(--status-rail-width) solid var(--status-rail-pending) !important;
}


/* ==========================================================================
   v0.4.1 — RAIL CONSISTENCY & CHAMPIONSHIP CARD FIX
   --------------------------------------------------------------------------
   - All bracket team cards use the same five-pixel status rail.
   - Incorrect uses a deeper crimson rather than a bright orange-red.
   - The champion selection is formatted as a standard team card.
   - Extra bracket-stage room prevents the championship area from clipping.
   ========================================================================== */

:root {
  --status-rail-width: 5px;
  --status-rail-incorrect: #b91c1c;
  --status-tint-incorrect: rgba(185, 28, 28, 0.045);
}

/* Keep the seeded/bye indicator and every populated status rail identical. */
.team-slot.bye-slot {
  border-left-width: var(--status-rail-width) !important;
}

.team-slot.has-team,
.team.has-team,
#champion-display.has-champion {
  border-left-width: var(--status-rail-width) !important;
}

.team-slot.has-team.incorrect-pick,
.team.has-team.incorrect-pick {
  border-left-color: var(--status-rail-incorrect) !important;
  background:
    linear-gradient(90deg, var(--status-tint-incorrect), transparent 68%),
    linear-gradient(90deg, color-mix(in srgb, var(--team-color) 13%, transparent), var(--bg-panel-dark)) !important;
}

#champion-display.has-champion.incorrect-pick {
  border-left-color: var(--status-rail-incorrect) !important;
  background:
    linear-gradient(90deg, var(--status-tint-incorrect), transparent 68%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, transparent), rgba(13, 22, 39, 0.97)) !important;
}

/* The selected champion now follows the same card proportions as other teams. */
#champion-display {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 51px;
  padding: 12px 13px;
  overflow: hidden;
  background: var(--bg-panel-dark);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-left: var(--status-rail-width) solid var(--status-rail-pending);
  border-radius: var(--radius-sm);
  color: var(--text-card);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  box-sizing: border-box;
}

#champion-display:not(.has-champion) {
  justify-content: center;
  border-left-color: var(--status-rail-pending);
}

#champion-display.has-champion {
  padding: 12px 13px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-radius: var(--radius-sm);
}

.champion-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  width: 100%;
}

.champion-logo,
.team-logo--champion {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.champion-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.champion-placeholder {
  color: var(--text-placeholder);
  font-size: 0.88rem;
  font-weight: 600;
}

/* Allow transformed championship content to remain fully visible. */
#bracket-wrapper {
  padding-right: 18px;
  padding-bottom: 150px;
}

#bracket-grid {
  padding-right: 4px;
}

body.master-mode #champion-display.has-champion,
body.master-mode #champion-display.has-champion.correct-pick,
body.master-mode #champion-display.has-champion.incorrect-pick {
  border-left-width: var(--status-rail-width) !important;
  border-left-color: var(--status-rail-pending) !important;
}


/* ==========================================================================
   v0.4.2 — BRACKET STAGE TIGHTENING
   --------------------------------------------------------------------------
   The v0.4.1 championship fix temporarily reserved 150px beneath the grid.
   The championship card now fits inside the established grid footprint, so
   the wrapper returns to compact spacing while retaining scrollbar clearance.
   ========================================================================== */

#bracket-wrapper {
  padding-bottom: 18px;
}

#bracket-grid {
  margin-bottom: 0;
}


/* ==========================================================================
   v0.5.2 — FIELD SCORING PLAYTEST BREAKDOWN
   ========================================================================== */

.score-card {
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
}

.score-card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.score-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

#user-score {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
}

#score-maximum {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.score-breakdown {
  display: grid;
  gap: 6px;
}

.score-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #9fb0c4;
  font-size: 0.72rem;
  line-height: 1.25;
}

.score-breakdown-row strong {
  color: var(--text-primary);
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
}

.score-breakdown-row strong[data-status="pending"] { color: var(--text-placeholder); }
.score-breakdown-row strong[data-status="partial"] { color: var(--gold-light); }
.score-breakdown-row strong[data-status="resolved"] { color: var(--accent); }

.score-breakdown-section-label {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--text-placeholder);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.score-breakdown-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


.score-breakdown-pending {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.score-breakdown-pending strong { color: var(--text-placeholder); }

@media (max-width: 700px) {
  .score-card { align-items: stretch; }
  .score-card-header { width: 100%; }
  .score-breakdown { width: 100%; }
}


/* ==========================================================================
   v0.5.5 — NATIONAL CHAMPIONSHIP TIEBREAKER
   ========================================================================== */

.tiebreaker-panel {
  width: min(100%, 430px);
  margin: 14px 0 0 auto;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(8, 14, 27, .9));
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.tiebreaker-heading {
  margin-bottom: 10px;
}

.tiebreaker-heading h3 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: .94rem;
  letter-spacing: -.01em;
}

.tiebreaker-content {
  color: var(--text-secondary);
}

.tiebreaker-locked-message {
  margin: 0;
  color: var(--text-placeholder);
  font-size: .78rem;
  line-height: 1.5;
}

.tiebreaker-helper {
  display: block;
  margin-bottom: 9px;
  color: var(--text-placeholder);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tiebreaker-score-grid {
  display: grid;
  gap: 7px;
}

.tiebreaker-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 7px 8px 7px 10px;
  background: rgba(30, 41, 59, .58);
  border: 1px solid rgba(71, 85, 105, .34);
  border-radius: 10px;
}

.tiebreaker-team {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.tiebreaker-team img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.tiebreaker-team strong {
  overflow: hidden;
  color: var(--text-card);
  font-size: .82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tiebreaker-score-input {
  width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  background: rgba(5, 10, 20, .72);
  color: var(--text-primary);
  border: 1px solid rgba(100, 116, 139, .56);
  border-radius: 8px;
  outline: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tiebreaker-score-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .12);
}

.tiebreaker-validation {
  min-height: 16px;
  margin: 8px 0 0;
  color: var(--text-placeholder);
  font-size: .68rem;
  line-height: 1.35;
}

.tiebreaker-validation.is-error {
  color: #fca5a5;
}

.tiebreaker-validation.is-ready {
  color: #86efac;
}

body[data-mode="master"] .tiebreaker-panel {
  border-color: rgba(248, 113, 113, .2);
}

@media (max-width: 700px) {
  .tiebreaker-panel {
    width: 100%;
    margin-top: 12px;
  }
}


/* ==========================================================================
   v0.5.6 — STABILIZATION & WORKFLOW POLISH
   ========================================================================== */

.header-dashboard {
  grid-template-columns: minmax(270px, 330px);
  justify-content: end;
}

.score-card {
  width: 100%;
  gap: 9px;
  padding: 15px 17px;
}

.score-card-header {
  align-items: center;
  padding-bottom: 10px;
}

.score-label { color: #b7c5d6; }

.score-breakdown { gap: 3px; }

.score-breakdown-row {
  min-height: 24px;
  padding: 2px 0;
  color: #a8b7c9;
  font-size: .71rem;
}

.score-breakdown-row strong {
  min-width: 44px;
  text-align: right;
}

.score-breakdown-section-label {
  margin: 7px -4px 2px;
  padding: 7px 4px 3px;
  color: #73869c;
  border-top-color: rgba(148,163,184,.11);
  font-size: .61rem;
}

.score-breakdown-section-label:first-child { margin-top: 0; }

.field-prediction-panel {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(260px, 390px);
  align-items: center;
  gap: 22px;
  margin: -3px 0 22px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(15,37,56,.62), rgba(15,23,42,.68));
  border: 1px solid rgba(56,189,248,.16);
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.field-prediction-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.field-prediction-heading .section-kicker { font-size: .62rem; }

.field-count {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  color: #8da1b8;
  background: rgba(148,163,184,.07);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 999px;
  font-size: .61rem;
  font-weight: 750;
}

.field-prediction-copy label {
  display: block;
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 800;
}

.field-prediction-copy p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: .7rem;
  line-height: 1.4;
}

.field-prediction-control select {
  width: 100%;
  min-height: 40px;
  padding: 8px 34px 8px 11px;
  background: rgba(8,15,29,.78);
  color: var(--text-primary);
  border: 1px solid rgba(71,85,105,.75);
  border-radius: 9px;
  outline: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.field-prediction-control select:hover:not(:disabled),
.field-prediction-control select:focus:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.08);
}

.field-prediction-control select:disabled {
  color: #64748b;
  cursor: not-allowed;
  opacity: .8;
}

body[data-mode="master"] .field-prediction-panel {
  background: linear-gradient(135deg, rgba(69,10,10,.2), rgba(15,23,42,.72));
  border-color: rgba(248,113,113,.17);
}

body[data-mode="master"] .field-prediction-heading .section-kicker {
  color: #fca5a5;
}

@media (max-width: 980px) {
  .header-dashboard { grid-template-columns: minmax(270px, 1fr); }
  .field-prediction-panel { grid-template-columns: 1fr; gap: 11px; }
}

@media (max-width: 700px) {
  .header-dashboard { width: 100%; }
  .field-prediction-panel { margin-bottom: 18px; padding: 13px; }
}


/* ==========================================================================
   v0.5.6a — G6 BOTTOM-LAYOUT PATCH
   ========================================================================== */

.bottom-prediction-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin-top: 14px;
}

.bottom-prediction-grid .tiebreaker-panel,
.bottom-prediction-grid .bottom-prediction-card {
  width: 100%;
  margin: 0;
}

.bottom-prediction-card {
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(8, 14, 27, .9));
  border: 1px solid rgba(56, 189, 248, .16);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.bottom-prediction-card .field-prediction-copy {
  margin-bottom: 10px;
}

.bottom-prediction-card .field-prediction-heading {
  margin-bottom: 4px;
}

.bottom-prediction-card .field-prediction-copy label {
  font-size: .94rem;
  letter-spacing: -.01em;
}

.bottom-prediction-card .field-prediction-copy p {
  margin-top: 5px;
  font-size: .7rem;
  line-height: 1.45;
}

.bottom-prediction-card .field-prediction-control select {
  min-height: 38px;
  font-size: .78rem;
}

body[data-mode="master"] .bottom-prediction-card {
  background: linear-gradient(145deg, rgba(69, 10, 10, .18), rgba(8, 14, 27, .9));
  border-color: rgba(248, 113, 113, .2);
}

@media (max-width: 900px) {
  .bottom-prediction-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   v0.5.7 — RIGHT-SIDE DASHBOARD PROTOTYPE
   ========================================================================== */

.header-dashboard { display: none; }

.bracket-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px;
}

#bracket-wrapper { min-width: 0; }

.bracket-sidebar {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 16px;
  align-self: start;
}

.sidebar-card {
  width: 100%;
  padding: 14px 15px;
  background: linear-gradient(145deg, rgba(15,23,42,.82), rgba(8,14,27,.9));
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 13px;
  box-shadow: 0 9px 24px rgba(0,0,0,.2);
}

.sidebar-card-heading { margin-bottom: 9px; }

.sidebar-card-heading h3 {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: .88rem;
  letter-spacing: -.01em;
}

.legend-sidebar-card .stage-legend {
  display: grid;
  gap: 7px;
  margin: 0;
}

.legend-sidebar-card .stage-legend span { justify-content: flex-start; }

.g6-sidebar-card .field-prediction-copy { margin-bottom: 9px; }
.g6-sidebar-card .field-prediction-heading { margin-bottom: 4px; }
.g6-sidebar-card .field-prediction-copy label { font-size: .88rem; }

.g6-sidebar-card .field-prediction-copy p {
  margin-top: 4px;
  font-size: .68rem;
  line-height: 1.4;
}

.g6-sidebar-card .field-prediction-control select {
  min-height: 36px;
  font-size: .74rem;
}

.bracket-sidebar .tiebreaker-panel {
  width: 100%;
  margin: 0;
  padding: 14px 15px;
}

.bracket-sidebar .tiebreaker-heading { margin-bottom: 8px; }
.bracket-sidebar .tiebreaker-heading h3 { font-size: .88rem; }

.bracket-sidebar .tiebreaker-team-row {
  grid-template-columns: minmax(0,1fr) 62px;
  min-height: 42px;
  padding: 6px 7px 6px 9px;
}

.bracket-sidebar .tiebreaker-team img {
  width: 22px;
  height: 22px;
}

.bracket-sidebar .tiebreaker-team strong { font-size: .76rem; }

.bracket-sidebar .tiebreaker-score-input {
  min-height: 31px;
  font-size: .82rem;
}

.compact-score-total {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 2px 0 10px;
}

.compact-score-total strong {
  color: var(--text-primary);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.compact-score-total span {
  color: var(--text-placeholder);
  font-size: .72rem;
  font-weight: 700;
}

.compact-score-rows {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,.1);
}

.compact-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
  color: #9fb0c4;
  font-size: .7rem;
}

.compact-score-row strong {
  color: var(--text-card);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}

.compact-score-link {
  width: 100%;
  margin-top: 10px;
  padding: 7px 8px;
  background: rgba(56,189,248,.06);
  color: #8fdcff;
  border: 1px solid rgba(56,189,248,.13);
  border-radius: 8px;
  font: inherit;
  font-size: .67rem;
  font-weight: 750;
  cursor: pointer;
}

.compact-score-link:hover {
  background: rgba(56,189,248,.1);
  border-color: rgba(56,189,248,.25);
}

.detailed-score-section {
  margin-top: 22px;
  scroll-margin-top: 18px;
}

.detailed-score-heading { margin-bottom: 10px; }

.detailed-score-heading h2 {
  margin: 4px 0 3px;
  color: var(--text-primary);
  font-size: 1rem;
}

.detailed-score-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .72rem;
}

.detailed-score-section #score-board { max-width: 520px; }

body[data-mode="master"] .compact-score-card,
body[data-mode="master"] .g6-sidebar-card,
body[data-mode="master"] .legend-sidebar-card,
body[data-mode="master"] .tiebreaker-panel {
  border-color: rgba(248,113,113,.16);
}

@media (max-width: 1180px) {
  .bracket-content-layout {
    grid-template-columns: minmax(0,1fr) 270px;
    gap: 14px;
  }
}

@media (max-width: 980px) {
  .bracket-content-layout { grid-template-columns: 1fr; }

  .bracket-sidebar {
    position: static;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .bracket-sidebar { grid-template-columns: 1fr; }
  .detailed-score-section #score-board { max-width: none; }
}


/* ==========================================================================
   v0.5.7a — CONTEXTUAL SIDEBAR CLEANUP
   ========================================================================== */

/* The visual legend is intentionally removed; bracket color states are
   designed to be self-explanatory. */

/* Scoring belongs only to My Picks. Master Results defines official truth
   and therefore has no score to display. */
body[data-mode="master"] [data-my-picks-only="true"] {
  display: none !important;
}

/* With the legend and scoring removed in Master mode, the sidebar naturally
   reduces to the two official-result controls. */
body[data-mode="master"] .bracket-sidebar {
  align-content: start;
}

/* Slightly tighten My Picks sidebar spacing now that the legend is gone. */
.bracket-sidebar {
  gap: 10px;
}


/* ==========================================================================
   v0.6.0 — INTERFACE REFINEMENT
   ========================================================================== */

.refined-header {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 22px 14px;
  background: linear-gradient(180deg, rgba(8,15,29,.98), rgba(10,18,32,.95));
  border-bottom: 1px solid rgba(148,163,184,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.header-brand { text-align: center; }

.header-brand h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.38rem, 2vw, 1.72rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.035em;
}

.header-brand p {
  margin: 5px 0 0;
  color: #889bb1;
  font-size: clamp(.67rem, .9vw, .76rem);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.header-mode-nav {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  min-width: 300px;
  padding: 3px;
  background: rgba(15,23,42,.88);
  border: 1px solid rgba(100,116,139,.24);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.header-mode-button {
  min-height: 34px;
  padding: 7px 18px;
  background: transparent;
  color: #788ba2;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .065em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.header-mode-button:hover {
  color: #c6d3df;
  background: rgba(148,163,184,.055);
}

#btn-mode-picks.header-mode-button.active {
  color: #f8fafc;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 3px 10px rgba(37,99,235,.24);
}

#btn-mode-master.header-mode-button.active {
  color: #fff;
  background: linear-gradient(135deg, #991b1b, #b91c1c);
  box-shadow: 0 3px 10px rgba(185,28,28,.22);
}

@media (max-width: 700px) {
  .refined-header {
    gap: 9px;
    padding: 14px 13px 13px;
  }

  .header-mode-nav {
    width: min(100%, 360px);
    min-width: 0;
  }

  .header-mode-button {
    padding-inline: 10px;
    font-size: .64rem;
  }
}


/* ==========================================================================
   v0.6.1 — AUTOMATIC QUALIFIERS LAYER
   ========================================================================== */

.aq-sidebar-card {
  padding: 14px 15px;
}

.aq-card-heading {
  margin-bottom: 10px;
}

.aq-card-heading h3 {
  margin-bottom: 4px;
}

.aq-helper {
  margin: 0;
  color: var(--text-secondary);
  font-size: .66rem;
  line-height: 1.4;
}

.aq-rows {
  display: grid;
  gap: 7px;
}

.aq-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.aq-row-label {
  min-width: 0;
  color: #aebdcd;
  font-size: .67rem;
  font-weight: 750;
  line-height: 1.2;
}

.aq-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 25px 6px 8px;
  background: rgba(8,15,29,.78);
  color: var(--text-primary);
  border: 1px solid rgba(71,85,105,.72);
  border-radius: 8px;
  outline: none;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
}

.aq-row select:hover:not(:disabled),
.aq-row select:focus:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.07);
}

.aq-row select:disabled {
  color: #64748b;
  cursor: not-allowed;
  opacity: .82;
}

.aq-g6-label {
  display: grid;
  gap: 2px;
}

.aq-g6-label small {
  color: #6f849b;
  font-size: .57rem;
  font-weight: 700;
}

body[data-mode="master"] .aq-sidebar-card {
  border-color: rgba(248,113,113,.16);
}

body[data-mode="master"] .aq-row select:hover:not(:disabled),
body[data-mode="master"] .aq-row select:focus:not(:disabled) {
  border-color: rgba(248,113,113,.62);
  box-shadow: 0 0 0 3px rgba(248,113,113,.06);
}

@media (max-width: 700px) {
  .aq-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* ==========================================================================
   v0.6.1a — AQ ELIGIBILITY COUNT POLISH
   ========================================================================== */

.aq-label-with-count,
.aq-g6-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.aq-eligible-count {
  flex: 0 0 auto;
  color: #6f849b;
  font-size: .57rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Override the earlier stacked G6 label treatment. */
.aq-g6-label {
  display: flex;
}

.aq-g6-label small {
  color: #6f849b;
  font-size: .57rem;
  font-weight: 700;
}


/* ==========================================================================
   v0.6.2 — AUTOMATIC QUALIFIER WORKFLOW PROGRESS
   ========================================================================== */

.aq-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}

.aq-title-row h3 {
  margin: 0;
}

.aq-progress-status {
  flex: 0 0 auto;
  color: #6f849b;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

.aq-progress-status.is-complete {
  color: #86efac;
}

body[data-mode="master"] .aq-progress-status.is-complete {
  color: #fca5a5;
}


/* ==========================================================================
   v0.6.3 — TIEBREAKER CONFIRMATION STATE
   ========================================================================== */

.tiebreaker-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}

.tiebreaker-title-row h3 {
  margin: 0;
}

.tiebreaker-progress-status {
  flex: 0 0 auto;
  color: #6f849b;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

.tiebreaker-progress-status.is-complete {
  color: #86efac;
}

.tiebreaker-progress-status.needs-review {
  color: #d6b36a;
}

.tiebreaker-validation.is-review {
  color: #c9b27c;
}

.tiebreaker-review-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.tiebreaker-confirm-btn {
  min-height: 31px;
  padding: 6px 10px;
  background: rgba(214,179,106,.08);
  color: #dfc488;
  border: 1px solid rgba(214,179,106,.22);
  border-radius: 8px;
  font: inherit;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
}

.tiebreaker-confirm-btn:hover {
  background: rgba(214,179,106,.13);
  border-color: rgba(214,179,106,.34);
}

body[data-mode="master"] .tiebreaker-progress-status.is-complete {
  color: #fca5a5;
}


/* ==========================================================================
   v0.7.1 — LEAGUE DOMAIN ARCHITECTURE / DEVELOPMENT PARTICIPANT SWITCHER
   ========================================================================== */

.dev-participant-bar {
  position: relative;
  z-index: 8;
  padding: 7px 18px;
  background: rgba(2, 6, 23, .92);
  border-bottom: 1px dashed rgba(148, 163, 184, .17);
}

.dev-participant-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 260px) auto;
  align-items: center;
  gap: 12px;
}

.dev-participant-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.dev-participant-label span {
  color: #53657a;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.dev-participant-label strong {
  color: #aebdcd;
  font-size: .7rem;
  font-weight: 800;
}

#dev-participant-select {
  min-height: 31px;
  padding: 5px 30px 5px 9px;
  background: rgba(15, 23, 42, .86);
  color: #d7e2ec;
  border: 1px solid rgba(100, 116, 139, .28);
  border-radius: 8px;
  font: inherit;
  font-size: .68rem;
  font-weight: 750;
}

.dev-participant-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.dev-participant-meta span {
  padding: 4px 7px;
  color: #778da5;
  background: rgba(30, 41, 59, .62);
  border: 1px solid rgba(100, 116, 139, .16);
  border-radius: 999px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .045em;
  white-space: nowrap;
}

body[data-workspace-editable="false"] #bracket-grid [role="button"],
body[data-workspace-editable="false"] #champion-display {
  cursor: default;
}

body[data-workspace-editable="false"] .team-slot:hover,
body[data-workspace-editable="false"] .team:hover,
body[data-workspace-editable="false"] #champion-display:hover {
  transform: none;
}

body[data-workspace-editable="false"] .aq-row select:disabled,
body[data-workspace-editable="false"] .tiebreaker-score-input:disabled {
  opacity: 1;
  color: #aebdcd;
}

@media (max-width: 760px) {
  .dev-participant-inner {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .dev-participant-meta {
    justify-content: flex-start;
  }
}

/* v0.7.2 — Submission Workflow */
.submission-card { display:grid; gap:12px; }
.submission-card[hidden] { display:none; }
.submission-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.submission-title-row h3 { margin:0; }
.submission-status { flex:0 0 auto; padding:4px 7px; border:1px solid rgba(100,116,139,.22); border-radius:999px; color:#8192a6; background:rgba(30,41,59,.7); font-size:.55rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.submission-status.is-ready { color:#d6e2ee; border-color:rgba(148,163,184,.32); }
.submission-status.is-submitted { color:#dbeafe; border-color:rgba(96,165,250,.28); background:rgba(30,64,175,.16); }
.submission-card p { margin:7px 0 0; color:#74869b; font-size:.64rem; line-height:1.45; }
.submission-action { display:grid; }
.submission-btn { width:100%; min-height:36px; padding:8px 12px; border:1px solid rgba(59,130,246,.42); border-radius:9px; background:rgba(37,99,235,.78); color:#eff6ff; font:inherit; font-size:.68rem; font-weight:850; cursor:pointer; }
.submission-btn:disabled { color:#64748b; background:rgba(30,41,59,.62); border-color:rgba(100,116,139,.18); cursor:not-allowed; }
.submission-edit-btn { background:rgba(30,41,59,.8); border-color:rgba(100,116,139,.3); color:#d7e2ec; }


/* ==========================================================================
   v0.7.3 — COMMISSIONER CONTROLS & BRACKET SUBMISSION DEADLINE
   ========================================================================== */

.commissioner-deadline-card {
  position: relative;
  z-index: 7;
  padding: 9px 18px;
  background: rgba(31, 10, 14, .92);
  border-bottom: 1px solid rgba(248, 113, 113, .13);
}

.commissioner-deadline-card[hidden] {
  display: none;
}

.commissioner-deadline-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.deadline-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8c6670;
  font-size: .53rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.deadline-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.deadline-title-row strong {
  color: #e7d9dc;
  font-size: .73rem;
}

.deadline-status {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.deadline-status.is-open {
  color: #bbf7d0;
  background: rgba(22, 101, 52, .18);
  border: 1px solid rgba(74, 222, 128, .16);
}

.deadline-status.is-closed {
  color: #fecaca;
  background: rgba(127, 29, 29, .22);
  border: 1px solid rgba(248, 113, 113, .16);
}

.deadline-copy p {
  margin: 4px 0 0;
  color: #9a7d84;
  font-size: .6rem;
  line-height: 1.35;
}

.deadline-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deadline-summary {
  color: #a98a91;
  font-size: .59rem;
  font-weight: 750;
  white-space: nowrap;
}

.deadline-btn {
  min-height: 31px;
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: .61rem;
  font-weight: 850;
  cursor: pointer;
}

.close-deadline-btn {
  color: #fee2e2;
  background: rgba(153, 27, 27, .72);
  border: 1px solid rgba(248, 113, 113, .23);
}

.reopen-deadline-btn {
  color: #e2e8f0;
  background: rgba(51, 65, 85, .72);
  border: 1px solid rgba(148, 163, 184, .22);
}

.reset-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .commissioner-deadline-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .deadline-controls {
    justify-content: space-between;
  }
}
.submission-status.is-not-submitted{color:#fecaca;border-color:rgba(248,113,113,.2);background:rgba(127,29,29,.16)}

/* v0.7.4 — Leaderboard & Scoring Presentation */
.leaderboard-workspace{width:min(1380px,calc(100% - 36px));margin:18px auto 40px}
.leaderboard-workspace[hidden],.bracket-stage[hidden]{display:none!important}
.leaderboard-header{margin-bottom:14px}.leaderboard-header h2{margin:2px 0 4px;color:#e5edf5;font-size:1.15rem}.leaderboard-header p{margin:0;color:#8192a6;font-size:.7rem}
.leaderboard-table-wrap{overflow-x:auto;border:1px solid rgba(100,116,139,.2);border-radius:12px;background:rgba(15,23,42,.74)}
.leaderboard-table{width:100%;min-width:1080px;border-collapse:collapse;font-size:.67rem}
.leaderboard-table th,.leaderboard-table td{padding:10px 11px;border-bottom:1px solid rgba(100,116,139,.12);text-align:center;white-space:nowrap}
.leaderboard-table th{color:#91a4b9;background:rgba(30,41,59,.62);font-size:.55rem;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0}
.leaderboard-table td:nth-child(2),.leaderboard-table th:nth-child(2){text-align:left;position:sticky;left:0;background:#111b2d;z-index:2}
.rank-cell{font-weight:850}.total-cell{font-weight:900}.state-cell{text-align:left!important;color:#7f91a5;font-style:italic}.ineligible-row{opacity:.65}
.participant-link,.score-link{border:0;padding:0;background:transparent;color:#cfe0f2;font:inherit;font-weight:800;cursor:pointer}.score-link{color:#93c5fd}.participant-link:hover,.score-link:hover{text-decoration:underline}
.participant-preview-banner{margin:0 0 12px;padding:9px 12px;border:1px solid rgba(96,165,250,.18);border-radius:9px;background:rgba(30,64,175,.1);color:#b7c9dc;font-size:.66rem}
.participant-preview-banner[hidden]{display:none}.participant-preview-banner button{float:right;border:0;background:transparent;color:#93c5fd;font:inherit;font-weight:800;cursor:pointer}
.score-details-dialog{width:min(600px,calc(100% - 30px));padding:0;border:1px solid rgba(100,116,139,.24);border-radius:14px;background:#101827;color:#e5edf5}
.score-details-dialog::backdrop{background:rgba(2,6,23,.72);backdrop-filter:blur(3px)}
.score-details-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(100,116,139,.14)}
.score-details-header h3{margin:0;font-size:.9rem}.score-details-header button{border:0;background:transparent;color:#94a3b8;font-size:1.15rem;cursor:pointer}
.score-details-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px}.score-details-body>div{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid rgba(100,116,139,.14);border-radius:9px;background:rgba(30,41,59,.48)}
.score-details-body span{color:#8295aa;font-size:.61rem}.score-detail-total{grid-column:1/-1}
body[data-participant-preview="true"] .submission-card{display:none!important}


/* ==========================================================================
   v0.7.4a — WORKSPACE NAV ALIGNMENT
   ========================================================================== */

.stage-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.stage-workspace-control {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  justify-items: end;
}

.workspace-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
}

.workspace-nav .mode-btn {
  min-width: 0;
  white-space: nowrap;
}

.refined-header .header-mode-nav {
  display: none;
}

@media (max-width: 820px) {
  .stage-heading {
    align-items: stretch;
  }

  .stage-workspace-control {
    justify-items: stretch;
  }

  .workspace-nav {
    width: 100%;
    gap: 6px;
  }

  .workspace-nav .mode-btn {
    flex: 1 1 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* v0.7.4b — persistent workspace navigation */
.persistent-workspace-nav{
  width:min(1380px,calc(100% - 36px));
  margin:14px auto 0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.persistent-workspace-nav .workspace-nav{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:7px;
}
@media(max-width:820px){
  .persistent-workspace-nav{justify-content:stretch}
  .persistent-workspace-nav .workspace-nav{width:100%}
  .persistent-workspace-nav .workspace-nav .mode-btn{flex:1 1 0}
}


/* ==========================================================================
   v0.7.4c — INTEGRATED WORKSPACE HEADER
   ========================================================================== */

.persistent-workspace-nav {
  display: none !important;
}

.stage-heading,
.leaderboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.integrated-workspace-nav {
  flex: 0 0 auto;
  margin-left: auto;
}

.integrated-workspace-nav .workspace-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
}

.integrated-workspace-nav .mode-btn {
  white-space: nowrap;
}

.leaderboard-header {
  margin-bottom: 14px;
}

.leaderboard-header > div:first-child,
.leaderboard-header > span:first-child {
  min-width: 0;
}

@media (max-width: 820px) {
  .stage-heading,
  .leaderboard-header {
    align-items: stretch;
    flex-direction: column;
  }

  .integrated-workspace-nav {
    width: 100%;
    margin-left: 0;
  }

  .integrated-workspace-nav .workspace-nav {
    width: 100%;
  }

  .integrated-workspace-nav .mode-btn {
    flex: 1 1 0;
  }
}


/* ==========================================================================
   v0.7.4d — LEADERBOARD HEADER CLEANUP
   ========================================================================== */

.leaderboard-heading-copy {
  min-width: 0;
}

.leaderboard-heading-copy .section-kicker {
  display: block;
  margin-bottom: 2px;
}

.leaderboard-heading-copy h2 {
  margin: 0 0 4px;
}

.leaderboard-heading-copy p {
  margin: 0;
}

.leaderboard-nav-wrap {
  align-self: flex-end;
}

@media (max-width: 820px) {
  .leaderboard-nav-wrap {
    align-self: stretch;
  }
}


/* ==========================================================================
   v0.7.4e — COMPACT WORKSPACE BRANDING
   ========================================================================== */

.compact-app-header {
  min-height: 0;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: rgba(8,14,27,.88);
  box-shadow: none;
}

.compact-brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.compact-brand-name {
  color: #e7eef6;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.compact-brand-meta {
  color: #64748b;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .045em;
  white-space: nowrap;
}

.compact-product-context {
  color: #7f91a5;
  font-size: .61rem;
  font-weight: 700;
  white-space: nowrap;
}

.dev-participant-bar {
  padding-top: 5px;
  padding-bottom: 5px;
}

.commissioner-deadline-card {
  padding-top: 7px;
  padding-bottom: 7px;
}

.bracket-stage {
  margin-top: 10px;
}

.leaderboard-workspace {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .compact-app-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .compact-product-context {
    white-space: normal;
  }
}

/* v0.7.4f — Unified Workspace Identity */
.compact-app-header{display:none!important}
.dev-participant-bar{
  min-height:0;
  padding-top:6px;
  padding-bottom:6px;
  display:flex;
  align-items:center;
  gap:10px;
}
.workspace-identity{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  margin-right:auto;
  white-space:nowrap;
}
.workspace-brand{color:#e7eef6;font-size:.72rem;font-weight:900}
.workspace-league{color:#94a3b8;font-size:.64rem;font-weight:750}
.workspace-participant{color:#cbd5e1;font-size:.64rem;font-weight:850}
.identity-separator{color:#475569;font-size:.6rem}
.workspace-version{color:#475569;font-size:.52rem;font-weight:800;margin-left:2px}
@media(max-width:760px){
 .workspace-identity{gap:5px;white-space:normal;flex-wrap:wrap}
 .identity-separator{display:none}
 .workspace-version{display:none}
}

/* v0.7.4g — legacy identity cleanup */
.dev-participant-label{display:none!important}


/* ==========================================================================
   v0.7.4h — UNIFIED IDENTITY BAR LAYOUT FIX
   ========================================================================== */

.dev-participant-bar {
  display: block;
}

.dev-participant-inner {
  width: min(1380px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
}

.identity-zone {
  min-width: 0;
  overflow: hidden;
}

.workspace-identity {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-selector-zone {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
}

.participant-selector-label {
  color: #64748b;
  font-size: .54rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

#dev-participant-select {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  flex: 0 0 180px;
  box-sizing: border-box;
}

.identity-meta-zone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.dev-participant-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.workspace-version {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dev-participant-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .identity-meta-zone {
    display: none;
  }
}

@media (max-width: 680px) {
  .dev-participant-inner {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .participant-selector-zone {
    width: 100%;
  }

  #dev-participant-select {
    width: min(100%, 260px);
    min-width: 0;
    max-width: 260px;
    flex: 0 1 260px;
  }
}

/* v0.7.5 — Competition Lifecycle */
.deadline-status.is-live{color:#93c5fd}
.deadline-status.is-final{color:#c4b5fd}
body[data-competition-phase="open"] #master-mode-banner{border-color:rgba(148,163,184,.2)}
body[data-competition-phase="locked"] #master-mode-banner{border-color:rgba(96,165,250,.22)}
body[data-competition-phase="live"] #master-mode-banner{border-color:rgba(96,165,250,.34)}
body[data-competition-phase="final"] #master-mode-banner{border-color:rgba(196,181,253,.28)}

/* ==========================================================================
   v0.7.5a — DEVELOPMENT TEST HARNESS
   ========================================================================== */
.dev-tools-trigger{
  width:auto!important;min-width:auto!important;max-width:none!important;flex:0 0 auto!important;
  padding:7px 10px;border:1px solid rgba(96,165,250,.25);border-radius:7px;
  background:#101b2d;color:#93c5fd;font-size:.56rem;font-weight:900;letter-spacing:.055em;cursor:pointer
}
.dev-tools-trigger:hover{background:#17243a}
.dev-tools-modal[hidden]{display:none}
.dev-tools-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:22px;background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
.dev-tools-panel{width:min(860px,96vw);max-height:90vh;overflow:auto;background:#111c2e;border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.dev-tools-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.dev-tools-header h3{margin:2px 0 4px}.dev-tools-header p{margin:0;color:#8798aa;font-size:.72rem}
.dev-tools-section{padding-top:14px;margin-top:14px;border-top:1px solid rgba(148,163,184,.12)}
.dev-tools-section-title{display:block;margin-bottom:8px;color:#8da0b5;font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.dev-scenario-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dev-scenario-grid button,.dev-action-grid button{border:1px solid rgba(148,163,184,.16);border-radius:8px;background:#162236;color:#dbe7f3;padding:10px;text-align:left;cursor:pointer}
.dev-scenario-grid button:hover,.dev-action-grid button:hover{background:#1d2c44;border-color:rgba(96,165,250,.35)}
.dev-scenario-grid strong{display:block;font-size:.68rem;margin-bottom:3px}.dev-scenario-grid span{display:block;color:#71849a;font-size:.56rem;line-height:1.3}
.dev-action-grid{display:flex;flex-wrap:wrap;gap:8px}.dev-action-grid button{font-size:.62rem;font-weight:800}
.dev-action-grid .dev-danger{border-color:rgba(248,113,113,.25);color:#fca5a5}
.dev-tools-feedback{min-height:18px;margin-top:12px;color:#93c5fd;font-size:.62rem;font-weight:750}
@media(max-width:800px){.dev-scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   v0.7.6 — BRACKET REVEAL & LIVE COMPETITION UX
   ========================================================================== */
.participant-name-static{color:#9aabba;font-weight:750}
.revealed-row .state-cell{color:#93c5fd}
.score-details-body{display:grid;gap:7px}
.score-detail-row{
  display:grid!important;
  grid-template-columns:minmax(180px,1.4fr) minmax(110px,.85fr) minmax(100px,.75fr) auto;
  align-items:center;gap:12px;padding:10px 0!important
}
.score-detail-label{font-weight:800;color:#dbe7f3}
.score-detail-performance{color:#b9c8d8;font-size:.68rem;font-weight:800}
.score-detail-progress{color:#71849a;font-size:.61rem;font-weight:750}
.score-detail-points{white-space:nowrap;color:#e5edf5}
.score-detail-total{margin-top:6px!important;padding-top:13px!important}
@media(max-width:680px){
 .score-detail-row{grid-template-columns:1fr auto;gap:4px 10px}
 .score-detail-performance,.score-detail-progress{grid-column:1}
 .score-detail-points{grid-column:2;grid-row:1 / span 3}
}


/* ==========================================================================
   v0.7.6b — SCORING BREAKDOWN SCORECARD
   ========================================================================== */

.score-details-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 88vh;
  overflow: hidden;
}

.score-details-header {
  padding: 15px 18px;
}

.score-details-body {
  display: block;
  padding: 0 18px 18px;
  max-height: calc(88vh - 60px);
  overflow-y: auto;
}

.scorecard-total {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "unit value";
  align-items: center;
  gap: 0 16px;
  padding: 18px 2px 16px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}

.scorecard-total-label {
  grid-area: label;
  color: #8fa2b7;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scorecard-total-value {
  grid-area: value;
  color: #f3f7fb;
  font-size: 2rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.scorecard-total-unit {
  grid-area: unit;
  margin-top: 2px;
  color: #64748b;
  font-size: .58rem;
  font-weight: 750;
}

.scorecard-sections {
  display: grid;
}

.scorecard-section {
  padding: 13px 0;
  border-bottom: 1px solid rgba(148,163,184,.11);
}

.scorecard-section:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.scorecard-section-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 7px;
}

.scorecard-section-code {
  min-width: 44px;
  color: #93c5fd;
  font-size: .58rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .07em;
}

.scorecard-section-title {
  color: #e2eaf2;
  font-size: .71rem;
  font-weight: 880;
}

.scorecard-section-body {
  margin-left: 53px;
  display: grid;
  gap: 2px;
}

.scorecard-metric {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 4px 0;
}

.scorecard-metric + .scorecard-metric {
  border-top: 1px solid rgba(148,163,184,.07);
}

.scorecard-metric-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(84px,.55fr) minmax(0,1fr);
  align-items: center;
  gap: 12px;
}

.scorecard-metric-label {
  color: #a9b9c9;
  font-size: .63rem;
  font-weight: 820;
}

.scorecard-metric-status {
  color: #71849a;
  font-size: .61rem;
  font-weight: 720;
  white-space: normal;
}

.scorecard-metric-points {
  min-width: 46px;
  color: #eef4fa;
  font-size: .66rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.scorecard-section.is-compact .scorecard-section-heading {
  margin-bottom: 1px;
}

.scorecard-section.is-compact .scorecard-section-body {
  margin-left: 53px;
}

.scorecard-section.is-compact .scorecard-metric-label {
  display: none;
}

.scorecard-section.is-compact .scorecard-metric-copy {
  grid-template-columns: 1fr;
}

@media (max-width: 620px) {
  .score-details-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .scorecard-section-heading {
    gap: 7px;
  }

  .scorecard-section-code {
    min-width: 38px;
  }

  .scorecard-section-body,
  .scorecard-section.is-compact .scorecard-section-body {
    margin-left: 45px;
  }

  .scorecard-metric-copy {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .scorecard-metric {
    align-items: start;
  }
}


/* ==========================================================================
   v0.7.6c — SCORING BREAKDOWN LAYOUT FIX
   ========================================================================== */

.score-details-dialog {
  width: min(620px, calc(100% - 28px));
  max-width: 620px;
  max-height: 90vh;
  overflow: hidden;
}

.score-details-dialog,
.score-details-dialog * {
  box-sizing: border-box;
}

.score-details-header {
  width: 100%;
}

.score-details-body {
  display: block !important;
  width: 100%;
  max-width: 100%;
  padding: 0 18px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

.scorecard-total {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "label value"
    "unit value" !important;
  align-items: center;
  gap: 0 14px;
  padding: 16px 2px 14px;
}

.scorecard-sections {
  display: block !important;
  width: 100%;
  max-width: 100%;
}

.scorecard-section {
  display: block !important;
  width: 100%;
  max-width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148,163,184,.11);
}

.scorecard-section-heading {
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) !important;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
}

.scorecard-section-code {
  min-width: 0 !important;
  width: auto !important;
}

.scorecard-section-title {
  min-width: 0;
}

.scorecard-section-body,
.scorecard-section.is-compact .scorecard-section-body {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  padding-left: 62px;
}

.scorecard-metric {
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center;
  gap: 12px;
  padding: 6px 0 !important;
}

.scorecard-metric-copy {
  display: grid !important;
  grid-template-columns: minmax(110px, .62fr) minmax(0,1fr) !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.scorecard-metric-label {
  min-width: 0;
  white-space: normal;
}

.scorecard-metric-status {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.scorecard-metric-points {
  min-width: 52px;
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

.scorecard-section.is-compact .scorecard-metric-label {
  display: none !important;
}

.scorecard-section.is-compact .scorecard-metric-copy {
  grid-template-columns: minmax(0,1fr) !important;
}

.scorecard-section.is-compact .scorecard-metric-status {
  white-space: normal;
}

@media (max-width: 620px) {
  .score-details-dialog {
    width: calc(100% - 18px);
    max-width: none;
  }

  .score-details-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .scorecard-section-heading {
    grid-template-columns: 46px minmax(0,1fr) !important;
  }

  .scorecard-section-body,
  .scorecard-section.is-compact .scorecard-section-body {
    padding-left: 54px;
  }

  .scorecard-metric-copy {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }
}


/* ==========================================================================
   v0.7.6e — SCORING TYPOGRAPHY CASCADE FIX
   ========================================================================== */

.score-details-dialog {
  width: min(660px, calc(100% - 28px));
  max-width: 660px;
}

.score-details-header h3 {
  font-size: .92rem;
}

.score-details-body .scorecard-total-label {
  font-size: .72rem;
  line-height: 1.3;
}

.score-details-body .scorecard-total-value {
  font-size: 2.35rem;
}

.score-details-body .scorecard-total-unit {
  font-size: .7rem;
}

.score-details-body .scorecard-section-code {
  font-size: .74rem;
  line-height: 1.15;
}

.score-details-body .scorecard-section-title {
  font-size: .9rem;
  line-height: 1.25;
}

.score-details-body .scorecard-metric-label {
  font-size: .8rem;
  line-height: 1.35;
}

.score-details-body .scorecard-metric-status {
  font-size: .78rem;
  line-height: 1.4;
}

.score-details-body .scorecard-metric-points {
  font-size: .82rem;
  line-height: 1.3;
  min-width: 62px;
}

.score-details-body .scorecard-metric {
  min-height: 42px;
  padding: 8px 0 !important;
}

.score-details-body .scorecard-section {
  padding: 15px 0;
}

@media (max-width: 620px) {
  .score-details-body .scorecard-section-code { font-size: .7rem; }
  .score-details-body .scorecard-section-title { font-size: .84rem; }
  .score-details-body .scorecard-metric-label { font-size: .76rem; }
  .score-details-body .scorecard-metric-status { font-size: .74rem; }
  .score-details-body .scorecard-metric-points { font-size: .78rem; }
}

/* v0.7.7 — Commissioner Competition Controls */
#commissioner-deadline-card[data-phase="open"]{border-color:rgba(148,163,184,.17)}
#commissioner-deadline-card[data-phase="locked"]{border-color:rgba(96,165,250,.22)}
#commissioner-deadline-card[data-phase="live"]{border-color:rgba(96,165,250,.32)}
#commissioner-deadline-card[data-phase="final"]{border-color:rgba(196,181,253,.25)}
.deadline-action{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px}
.commissioner-primary-btn{border-color:rgba(96,165,250,.34);color:#bfdbfe;background:rgba(30,64,175,.16)}
.commissioner-primary-btn:hover{background:rgba(37,99,235,.24)}
.commissioner-secondary-btn{color:#94a3b8}
.commissioner-override-btn{border-color:rgba(196,181,253,.3);color:#ddd6fe;background:rgba(109,40,217,.12)}
.commissioner-override-btn:hover{background:rgba(109,40,217,.2)}
.deadline-status.is-override{color:#c4b5fd}
body[data-final-override="true"] #master-mode-banner{border-color:rgba(196,181,253,.35)}
@media(max-width:760px){.deadline-action{justify-content:stretch}.deadline-action .deadline-btn{flex:1 1 auto}}

/* v0.7.8 — Tiebreaker resolution */
.tb-rank-marker{display:inline-block;margin-left:5px;padding:1px 4px;border:1px solid rgba(96,165,250,.3);border-radius:4px;font-size:.48rem;line-height:1.2;color:#93c5fd;vertical-align:middle}
.scorecard-tiebreaker{margin-top:14px;padding:14px 0 2px;border-top:1px solid rgba(148,163,184,.16)}
.scorecard-tiebreaker-heading{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:baseline;gap:8px;margin-bottom:10px}
.scorecard-tiebreaker-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding-left:62px}
.score-details-body .scorecard-tiebreaker-grid span,.score-details-body .scorecard-tiebreaker-grid strong{font-size:.78rem;line-height:1.35}
.scorecard-tiebreaker-grid strong{text-align:right;color:#e2e8f0}
.score-details-body .scorecard-tiebreaker-note{margin:10px 0 0 62px;font-size:.68rem;line-height:1.45;color:#8295aa}
@media(max-width:620px){.scorecard-tiebreaker-heading{grid-template-columns:46px minmax(0,1fr)}.scorecard-tiebreaker-grid{padding-left:54px}.score-details-body .scorecard-tiebreaker-note{margin-left:54px}}

/* v0.7.8a — Tiebreaker scorecard note */
.scorecard-tiebreaker-note-card{margin-top:16px;padding:12px 14px;border:1px solid rgba(148,163,184,.14);border-radius:8px;background:rgba(15,23,42,.34)}
.scorecard-tiebreaker-note-card.is-applied{border-color:rgba(96,165,250,.24);background:rgba(30,64,175,.08)}
.scorecard-tiebreaker-note-card.is-pending{padding-top:11px;padding-bottom:11px}
.tiebreaker-note-label{margin-bottom:6px;font-size:.66rem;line-height:1.2;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8}
.scorecard-tiebreaker-note-card.is-applied .tiebreaker-note-label{color:#93c5fd}
.tiebreaker-note-result{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 8px;font-size:.78rem;line-height:1.45;color:#aebdcd}
.tiebreaker-note-result strong{font-size:.84rem;color:#f1f5f9}
.tiebreaker-dot{color:#52657a}
.tiebreaker-note-caption{margin-top:5px;font-size:.67rem;line-height:1.4;color:#72859a}
@media(max-width:620px){.tiebreaker-dot{display:none}.tiebreaker-note-result{gap:4px 12px}}

/* v0.7.8b — Tiebreaker card stacked flow */
.scorecard-tiebreaker-note-card{
  display:block;
}
.scorecard-tiebreaker-note-card .tiebreaker-note-label,
.scorecard-tiebreaker-note-card .tiebreaker-note-result,
.scorecard-tiebreaker-note-card .tiebreaker-note-caption{
  width:100%;
}
.scorecard-tiebreaker-note-card .tiebreaker-note-result{
  justify-content:flex-start;
}

/* v0.7.9 League Home */
.home-workspace{width:min(1180px,calc(100% - 32px));margin:24px auto 44px}
.home-brand-block{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}
.home-product-name{font-size:.74rem;font-weight:950;letter-spacing:.12em;color:#e5edf5}
.home-product-tagline{font-size:.72rem;font-weight:700;color:#71849a}
.home-league-summary{margin-bottom:22px}.home-league-summary h1{margin:0;font-size:1.7rem;line-height:1.1;letter-spacing:-.03em;color:#f3f7fb}.home-league-summary p{margin:7px 0 0;font-size:.78rem;font-weight:750;color:#8295aa}
.competition-progress-card{padding:20px 22px 22px;border:1px solid rgba(148,163,184,.14);border-radius:12px;background:rgba(15,23,42,.46)}
.home-section-heading{margin-bottom:18px}.home-section-kicker,.home-summary-label{display:block;font-size:.58rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#71849a}.home-section-heading h2{margin:4px 0 0;font-size:1rem;color:#e5edf5}
.competition-tracker{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;align-items:start}
.tracker-stage{min-width:112px;display:grid;justify-items:center;text-align:center}.tracker-node{width:18px;height:18px;border-radius:50%;border:3px solid #3b82f6;background:#0f172a;box-shadow:0 0 0 4px rgba(59,130,246,.08)}.tracker-connector{height:3px;margin-top:8px;background:#3b82f6;opacity:.62}.tracker-copy{display:grid;gap:3px;margin-top:9px}.tracker-copy strong{font-size:.72rem;color:#cbd8e5}.tracker-state{font-size:.61rem;font-weight:800;color:#60a5fa}
.tracker-stage[data-state="complete"] .tracker-node{border-color:#22c55e;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.08)}.tracker-stage[data-state="complete"] .tracker-state{color:#4ade80}
.tracker-stage[data-state="in-progress"] .tracker-node{border-color:#ef4444;background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.09)}.tracker-stage[data-state="in-progress"] .tracker-state{color:#f87171}
.home-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.home-summary-card{width:100%;padding:18px 20px;border:1px solid rgba(148,163,184,.14);border-radius:10px;background:rgba(15,23,42,.36);text-align:left;cursor:pointer}.home-summary-card:hover{border-color:rgba(96,165,250,.28);background:rgba(30,41,59,.5)}.home-summary-card strong{display:block;margin-top:7px;font-size:1rem;color:#eef4fa}.home-summary-card span:last-child{display:block;margin-top:4px;font-size:.69rem;color:#8295aa}
@media(max-width:900px){.competition-tracker{grid-template-columns:1fr}.tracker-stage{grid-template-columns:28px 1fr;justify-items:start;align-items:center;text-align:left;gap:10px;padding:8px 0}.tracker-copy{margin-top:0}.tracker-connector{width:3px;height:24px;margin:0 0 0 8px}}
@media(max-width:620px){.home-workspace{width:min(100% - 18px,1180px);margin-top:16px}.home-league-summary h1{font-size:1.35rem}.competition-progress-card{padding:16px}.home-summary-grid{grid-template-columns:1fr}}


/* v0.7.9c — Home Visual Identity */
.home-brand-block{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}

.home-product-name{align-self:end}
.home-product-tagline{align-self:start}
.home-event-label{
  margin:-8px 0 12px;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#64788e;
}
.competition-progress-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(30,41,59,.64),rgba(15,23,42,.52)),
    repeating-linear-gradient(90deg,transparent 0,transparent 88px,rgba(96,165,250,.025) 89px,transparent 90px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 34px rgba(2,6,23,.14);
}

.tracker-connector{height:4px;border-radius:99px}
.tracker-stage[data-state="in-progress"] .tracker-node{
  animation:home-live-pulse 2.2s ease-in-out infinite;
}
@keyframes home-live-pulse{
  0%,100%{box-shadow:0 0 0 5px rgba(239,68,68,.09)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,.045),0 0 18px rgba(239,68,68,.16)}
}
.home-summary-card{
  position:relative;
  overflow:hidden;
  min-height:124px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.home-summary-card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:#3b82f6;opacity:.65;
}
.home-summary-card strong[id]{
  font-size:1.18rem;
  letter-spacing:-.02em;
}
.home-standing-card #home-standing-status{
  font-size:1.55rem;
  line-height:1;
  letter-spacing:-.045em;
}
.home-standing-card #home-standing-detail{
  font-size:.76rem;
  font-weight:800;
  color:#a8b8c8;
}
.home-champion-pick{
  display:flex !important;
  align-items:center;
  gap:7px;
  margin-top:12px !important;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.1);
  color:#91a3b6 !important;
}
.home-champion-pick.has-team{
  color:#cbd8e5 !important;
}
.home-champion-pick img{
  width:22px;height:22px;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.home-champion-pick strong{
  color:var(--home-team-color,#e5edf5);
  font-size:inherit;
}
@media(prefers-reduced-motion:reduce){
  .tracker-stage[data-state="in-progress"] .tracker-node{animation:none}
}
@media(max-width:620px){
  .home-event-label{margin-top:-6px}
}


/* v0.7.9d — Big Four Champions */
.home-big-four{
  margin-top:16px;
  padding:13px 20px 14px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(15,23,42,.46),rgba(30,41,59,.3));
}
.home-big-four-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.home-big-four-heading h2{
  margin:3px 0 0;
  font-size:.92rem;
  color:#e5edf5;
}
.home-big-four-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}
.home-big-four-team{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:58px;
  padding:9px 10px;
  border:1px solid rgba(148,163,184,.11);
  border-radius:8px;
  background:rgba(15,23,42,.44);
  overflow:hidden;
}
.home-big-four-team::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--home-team-color,#3b82f6);
  opacity:.85;
}
.home-big-four-team img{
  flex:0 0 auto;
  width:32px;height:32px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.24));
}
.home-big-four-team div{min-width:0}
.home-big-four-team strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  color:#e5edf5;
}
.home-big-four-team span{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#71849a;
}
.home-big-four-team.empty{
  justify-content:center;
  border-style:dashed;
  background:rgba(15,23,42,.22);
}
.home-big-four-team.empty::before{opacity:.28}
.home-big-four-team .big-four-placeholder{
  margin:0;
  color:#607287;
}
@media(max-width:900px){
  .home-big-four-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .home-big-four-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   v0.7.9e — HOME CONFERENCE CHAMPIONS
   ========================================================================== */

.home-big-four-heading.is-right{
  justify-content:flex-end;
  text-align:right;
}

.home-big-four-heading.is-right > *{
  margin-left:auto;
}

.home-big-four-heading.is-right .home-section-kicker{
  text-align:right;
}

.home-big-four-grid{
  align-items:stretch;
}

.home-big-four-team{
  display:grid;
  grid-template-columns:auto 34px minmax(0,1fr);
  grid-template-areas:"conf logo copy";
  align-items:center;
  gap:9px;
  min-height:64px;
}

.home-conference-label{
  grid-area:conf;
  align-self:stretch;
  display:grid !important;
  place-items:center;
  min-width:54px;
  margin:-9px 0 -9px -10px !important;
  padding:0 8px;
  border-right:1px solid rgba(148,163,184,.12);
  background:rgba(30,41,59,.5);
  color:#c7d4e2 !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase;
  white-space:nowrap;
}

.home-big-four-team img{
  grid-area:logo;
  width:32px;
  height:32px;
}

.home-big-four-team-copy{
  grid-area:copy;
  min-width:0;
}

.home-big-four-team.empty{
  grid-template-columns:auto 1fr;
  grid-template-areas:"conf placeholder";
  justify-content:stretch;
  text-align:left;
}

.home-big-four-team.empty .home-conference-label{
  grid-area:conf;
}

.home-big-four-team.empty .big-four-placeholder{
  grid-area:placeholder;
  align-self:center;
  padding-left:2px;
  color:#607287;
  text-transform:none;
  letter-spacing:0;
  font-size:.62rem;
}

.home-big-four-team[data-conference="ACC"] .home-conference-label{
  background:rgba(37,99,235,.13);
}

.home-big-four-team[data-conference="BIG_TEN"] .home-conference-label{
  background:rgba(14,116,144,.13);
}

.home-big-four-team[data-conference="BIG_12"] .home-conference-label{
  background:rgba(124,58,237,.13);
}

.home-big-four-team[data-conference="SEC"] .home-conference-label{
  background:rgba(220,38,38,.13);
}

@media(max-width:900px){
  .home-big-four-heading.is-right{
    justify-content:flex-start;
    text-align:left;
  }

  .home-big-four-heading.is-right > *{
    margin-left:0;
  }

  .home-big-four-heading.is-right .home-section-kicker{
    text-align:left;
  }
}


/* ==========================================================================
   v0.7.9f — CONFERENCE CHAMPION ACCENT REFINEMENT
   ========================================================================== */

/* Return section heading to the left. */
.home-big-four-heading.is-right{
  justify-content:flex-start;
  text-align:left;
}

.home-big-four-heading.is-right > *{
  margin-left:0;
}

.home-big-four-heading.is-right .home-section-kicker{
  text-align:left;
}

/* Filled cards derive their visual identity from the selected team. */
.home-big-four-team:not(.empty)::before{
  background:var(--home-team-color,#3b82f6);
  opacity:1;
}

.home-big-four-team:not(.empty) .home-conference-label{
  border-right-color:color-mix(in srgb,var(--home-team-color,#3b82f6) 38%, transparent);
  background:color-mix(in srgb,var(--home-team-color,#3b82f6) 17%, rgba(15,23,42,.88));
  color:color-mix(in srgb,var(--home-team-color,#e5edf5) 34%, #eef4fa) !important;
}

.home-big-four-team:not(.empty){
  border-color:color-mix(in srgb,var(--home-team-color,#3b82f6) 20%, rgba(148,163,184,.11));
  box-shadow:inset 0 0 20px color-mix(in srgb,var(--home-team-color,#3b82f6) 5%, transparent);
}

/* Empty cards keep conference identity until a participant makes a pick.
   These are conference-inspired UI accents rather than logo assets. */
.home-big-four-team.empty[data-conference="ACC"]{
  --conference-accent:#2563eb;
}

.home-big-four-team.empty[data-conference="BIG_TEN"]{
  --conference-accent:#0284c7;
}

.home-big-four-team.empty[data-conference="BIG_12"]{
  --conference-accent:#dc2626;
}

.home-big-four-team.empty[data-conference="SEC"]{
  --conference-accent:#1d4ed8;
}

.home-big-four-team.empty::before{
  background:var(--conference-accent,#3b82f6);
  opacity:.78;
}

.home-big-four-team.empty .home-conference-label{
  border-right-color:color-mix(in srgb,var(--conference-accent,#3b82f6) 30%, transparent);
  background:color-mix(in srgb,var(--conference-accent,#3b82f6) 14%, rgba(15,23,42,.88));
  color:color-mix(in srgb,var(--conference-accent,#e5edf5) 32%, #dce6f0) !important;
}

.home-big-four-team.empty{
  border-color:color-mix(in srgb,var(--conference-accent,#3b82f6) 15%, rgba(148,163,184,.1));
}

/* Override the earlier fixed conference-label backgrounds so team color wins
   once a selection exists. */
.home-big-four-team[data-conference="ACC"] .home-conference-label,
.home-big-four-team[data-conference="BIG_TEN"] .home-conference-label,
.home-big-four-team[data-conference="BIG_12"] .home-conference-label,
.home-big-four-team[data-conference="SEC"] .home-conference-label{
  background:inherit;
}

.home-big-four-team:not(.empty)[data-conference] .home-conference-label{
  background:color-mix(in srgb,var(--home-team-color,#3b82f6) 17%, rgba(15,23,42,.88));
}

.home-big-four-team.empty[data-conference] .home-conference-label{
  background:color-mix(in srgb,var(--conference-accent,#3b82f6) 14%, rgba(15,23,42,.88));
}


/* ==========================================================================
   v0.7.9g — HOME VISUAL BALANCE
   ========================================================================== */

/* Restore the calmer neutral card perimeter from v0.7.9e.
   Team/conference identity remains inside the card, not on its outer border. */
.home-big-four-team,
.home-big-four-team:not(.empty),
.home-big-four-team.empty{
  border-color:rgba(148,163,184,.11);
  box-shadow:none;
}

/* Keep the internal left indicator + conference label as the color-bearing elements. */
.home-big-four-team:not(.empty)::before{
  background:var(--home-team-color,#3b82f6);
  opacity:1;
}

.home-big-four-team.empty::before{
  background:var(--conference-accent,#3b82f6);
  opacity:.78;
}

/* Give the National Champion pick enough visual weight to remain the hierarchy peak. */
.home-champion-pick{
  gap:10px;
  margin-top:14px !important;
  padding-top:12px;
  font-size:.76rem !important;
}

.home-champion-pick img{
  width:32px;
  height:32px;
}

.home-champion-pick strong{
  font-size:.88rem;
  font-weight:900;
  letter-spacing:-.01em;
}

.home-champion-pick.has-team{
  padding:10px 11px 10px 10px;
  border:1px solid rgba(148,163,184,.11);
  border-left:3px solid var(--home-team-color,#3b82f6);
  border-radius:7px;
  background:rgba(15,23,42,.34);
}

/* v0.7.9i — Conference Champions heading hierarchy */
.home-big-four-heading.conference-heading-reversed{display:block}
.home-big-four-heading.conference-heading-reversed .home-section-kicker{
  font-size:.92rem;line-height:1.2;font-weight:850;letter-spacing:0;text-transform:none;color:#e5edf5
}
.home-big-four-heading.conference-heading-reversed h2{
  margin:4px 0 0;font-size:.58rem;line-height:1.2;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#71849a
}




/* ==========================================================================
   v0.7.9k — GOLD CONFERENCE CHAMPION BANNERS
   ========================================================================== */

.home-champion-banner{
  position:absolute;
  top:7px;
  right:7px;
  z-index:4;
  display:grid;
  place-items:center;
  width:23px;
  height:25px;
  cursor:help;
  outline:none;
  transition:transform .14s ease, filter .14s ease;
}

.home-banner-icon{
  position:relative;
  display:block;
  width:19px;
  height:22px;
  background:
    linear-gradient(90deg,
      #8a651d 0%,
      #c79a36 18%,
      #f0d07a 47%,
      #c28e29 76%,
      #795718 100%);
  border:1px solid rgba(255,236,170,.48);
  border-top-color:rgba(255,244,194,.72);
  border-radius:3px 3px 1px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(78,52,10,.22),
    0 2px 5px rgba(2,6,23,.34);
  clip-path:polygon(
    0 0,
    100% 0,
    100% 72%,
    72% 100%,
    50% 81%,
    28% 100%,
    0 72%
  );
}

.home-banner-icon::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:3px;
  height:1px;
  border-radius:2px;
  background:rgba(255,247,210,.55);
}

.home-banner-icon::after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px solid rgba(95,64,14,.28);
  clip-path:inherit;
  pointer-events:none;
}

.home-champion-banner:hover,
.home-champion-banner:focus-visible{
  transform:translateY(-1px) scale(1.04);
  filter:brightness(1.08);
}

.home-champion-banner:focus-visible{
  border-radius:5px;
  box-shadow:0 0 0 2px rgba(240,208,122,.22);
}

.home-banner-tooltip{
  position:absolute;
  right:-2px;
  bottom:calc(100% + 9px);
  z-index:20;
  display:grid;
  gap:2px;
  width:max-content;
  min-width:145px;
  max-width:210px;
  padding:8px 10px;
  border:1px solid rgba(201,164,82,.26);
  border-radius:7px;
  background:#0b1220;
  box-shadow:0 10px 28px rgba(2,6,23,.42);
  color:#dce6f0;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events:none;
}

.home-banner-tooltip::after{
  content:"";
  position:absolute;
  right:8px;
  top:100%;
  width:8px;
  height:8px;
  background:#0b1220;
  border-right:1px solid rgba(201,164,82,.26);
  border-bottom:1px solid rgba(201,164,82,.26);
  transform:translateY(-4px) rotate(45deg);
}

.home-banner-tooltip strong{
  font-size:.61rem;
  line-height:1.25;
  font-weight:900;
  color:#f2d986;
  white-space:nowrap;
}

.home-banner-tooltip span{
  font-size:.58rem;
  line-height:1.25;
  font-weight:750;
  color:#aebdcd;
}

.home-champion-banner:hover .home-banner-tooltip,
.home-champion-banner:focus-visible .home-banner-tooltip,
.home-champion-banner:focus-within .home-banner-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
  .home-champion-banner,
  .home-banner-tooltip{
    transition:none;
  }
}


/* ==========================================================================
   v0.7.9l — CONFERENCE CHAMPION BANNER TOOLTIP FIX
   ========================================================================== */

/* The championship tooltip intentionally extends outside the team card.
   The earlier card treatment clipped overflow, which hid the tooltip. */
.home-big-four-team{
  overflow:visible;
}

/* Keep team-name truncation localized to its copy area instead of the card. */
.home-big-four-team-copy{
  overflow:hidden;
}

/* Ensure the Conference Champions section itself also permits the tooltip
   to extend above the card row. */
.home-big-four,
.home-big-four-grid{
  overflow:visible;
}

/* Lift the active card above neighboring cards so the tooltip isn't visually
   covered by adjacent items. */
.home-big-four-team:has(.home-champion-banner:hover),
.home-big-four-team:has(.home-champion-banner:focus-visible),
.home-big-four-team:has(.home-champion-banner:focus-within){
  z-index:10;
}

/* Fallback stacking for browsers where :has() behavior is limited. */
.home-champion-banner:hover,
.home-champion-banner:focus-visible,
.home-champion-banner:focus-within{
  z-index:30;
}

.home-banner-tooltip{
  z-index:40;
}


/* ==========================================================================
   v0.7.9m — BANNER TOOLTIP SELECTOR FIX
   ========================================================================== */

/*
  Legacy Conference Champion styling applies overflow:hidden to every span
  inside .home-big-four-team. The banner and tooltip are both spans, so they
  were clipping the tooltip even though the card itself allowed overflow.
*/

/* Banner must be allowed to project its tooltip outside its own footprint. */
.home-big-four-team .home-champion-banner{
  display:grid;
  margin-top:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}

/* The tooltip itself must not inherit the team-label truncation rule. */
.home-big-four-team .home-banner-tooltip{
  display:grid;
  margin-top:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}

/* Tooltip text gets its own explicit text behavior. */
.home-big-four-team .home-banner-tooltip strong,
.home-big-four-team .home-banner-tooltip span{
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  text-transform:none;
}

/* Keep truncation where it was actually intended: team copy only. */
.home-big-four-team-copy > strong,
.home-big-four-team-copy > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ==========================================================================
   v0.7.9n — NATIONAL CHAMPION TROPHY
   ========================================================================== */

.home-champion-pick.has-team{
  position:relative;
  overflow:visible;
  padding-right:42px;
}

.home-national-trophy{
  position:absolute;
  top:50%;
  right:9px;
  z-index:6;
  display:grid !important;
  place-items:center;
  width:24px;
  height:24px;
  margin:0 !important;
  overflow:visible !important;
  transform:translateY(-50%);
  cursor:help;
  outline:none;
  transition:transform .14s ease, filter .14s ease;
}

.home-national-trophy-icon{
  position:relative;
  display:block !important;
  width:18px;
  height:18px;
  margin:0 !important;
  overflow:visible !important;
}

/* Cup bowl */
.home-national-trophy-icon::before{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:10px;
  height:9px;
  border:1px solid rgba(255,239,174,.62);
  border-top-color:rgba(255,247,205,.84);
  border-radius:2px 2px 6px 6px;
  background:
    linear-gradient(90deg,
      #826019 0%,
      #c99c35 20%,
      #f2d47d 50%,
      #c58f28 78%,
      #765215 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 5px rgba(2,6,23,.34);
}

/* Stem/base + handles via drop shadows */
.home-national-trophy-icon::after{
  content:"";
  position:absolute;
  left:7px;
  top:10px;
  width:4px;
  height:5px;
  border-radius:1px;
  background:linear-gradient(#d7ac4b,#8f671d);
  box-shadow:
    -4px 4px 0 -1px #9a7224,
    4px 4px 0 -1px #9a7224,
    0 5px 0 1px #b8882e;
}

.home-national-trophy:hover,
.home-national-trophy:focus-visible{
  transform:translateY(-52%) scale(1.06);
  filter:brightness(1.09);
}

.home-national-trophy:focus-visible{
  border-radius:5px;
  box-shadow:0 0 0 2px rgba(240,208,122,.22);
}

.home-national-trophy-tooltip{
  position:absolute;
  right:-2px;
  bottom:calc(100% + 9px);
  z-index:40;
  display:grid !important;
  gap:2px;
  width:max-content;
  min-width:155px;
  max-width:220px;
  margin:0 !important;
  padding:8px 10px;
  overflow:visible !important;
  border:1px solid rgba(201,164,82,.26);
  border-radius:7px;
  background:#0b1220;
  box-shadow:0 10px 28px rgba(2,6,23,.42);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events:none;
}

.home-national-trophy-tooltip::after{
  content:"";
  position:absolute;
  right:8px;
  top:100%;
  width:8px;
  height:8px;
  background:#0b1220;
  border-right:1px solid rgba(201,164,82,.26);
  border-bottom:1px solid rgba(201,164,82,.26);
  transform:translateY(-4px) rotate(45deg);
}

.home-national-trophy-tooltip strong,
.home-national-trophy-tooltip span{
  display:block !important;
  margin:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-transform:none !important;
}

.home-national-trophy-tooltip strong{
  font-size:.61rem !important;
  line-height:1.25;
  font-weight:900;
  color:#f2d986 !important;
}

.home-national-trophy-tooltip span{
  font-size:.58rem !important;
  line-height:1.25;
  font-weight:750;
  color:#aebdcd !important;
}

.home-national-trophy:hover .home-national-trophy-tooltip,
.home-national-trophy:focus-visible .home-national-trophy-tooltip,
.home-national-trophy:focus-within .home-national-trophy-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
  .home-national-trophy,
  .home-national-trophy-tooltip{
    transition:none;
  }
}


/* ==========================================================================
   v0.7.9o — NATIONAL CHAMPION TROPHY ALIGNMENT REFINEMENT
   ========================================================================== */

/*
  Rebuild the trophy on a single 18px-wide centerline.
  Cup, stem and base are all horizontally centered from the same origin.
*/

.home-national-trophy-icon{
  position:relative;
  width:18px;
  height:18px;
}

/* Cup + handles */
.home-national-trophy-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:10px;
  height:8px;
  transform:translateX(-50%);
  border:1px solid rgba(255,239,174,.64);
  border-top-color:rgba(255,247,205,.86);
  border-radius:2px 2px 5px 5px;
  background:
    linear-gradient(90deg,
      #826019 0%,
      #c99c35 20%,
      #f2d47d 50%,
      #c58f28 78%,
      #765215 100%);
  box-shadow:
    -4px 1px 0 -2px #b4842b,
     4px 1px 0 -2px #b4842b,
     inset 0 1px 0 rgba(255,255,255,.28),
     0 2px 4px rgba(2,6,23,.3);
}

/* Stem + base, kept on exact same 50% centerline */
.home-national-trophy-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:4px;
  height:5px;
  transform:translateX(-50%);
  border-radius:1px;
  background:linear-gradient(#d8ad4c,#8f671d);
  box-shadow:
    0 5px 0 -1px #a77a26,
    0 7px 0 1px #b98a31;
}

/* v0.7.10 — Competition Activation & Master Results Gating */
.competition-readiness-inline{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;width:100%;margin-bottom:8px}
.competition-readiness-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid rgba(148,163,184,.14);border-radius:999px;background:rgba(15,23,42,.38);font-size:.56rem;font-weight:800;color:#8295aa;white-space:nowrap}
.competition-readiness-chip.is-ready{color:#a7d9b6;border-color:rgba(74,222,128,.18)}
.competition-readiness-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.start-competition-btn:disabled{cursor:not-allowed;opacity:.42}
.competition-activation-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.76);backdrop-filter:blur(5px)}
.competition-activation-modal[hidden]{display:none}
.competition-activation-panel{width:min(560px,100%);padding:22px;border:1px solid rgba(148,163,184,.18);border-radius:13px;background:#111b2c;box-shadow:0 24px 70px rgba(0,0,0,.44)}
.competition-activation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.competition-activation-header h3{margin:4px 0 7px;font-size:1.18rem;color:#f1f5f9}
.competition-activation-header p{margin:0;max-width:440px;font-size:.72rem;line-height:1.5;color:#91a3b7}
.competition-readiness-modal{display:grid;gap:7px;margin-top:18px;padding:12px;border:1px solid rgba(148,163,184,.12);border-radius:9px;background:rgba(15,23,42,.42)}
.competition-readiness-row{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:center}
.competition-readiness-row .competition-readiness-mark{font-size:.76rem;font-weight:950;color:#75879a}
.competition-readiness-row.is-ready .competition-readiness-mark{color:#4ade80}
.competition-readiness-row strong{display:block;font-size:.67rem;color:#dce6f0}
.competition-readiness-row div span{display:block;margin-top:2px;font-size:.57rem;color:#71849a}
.competition-activation-consequences{margin-top:14px;padding:12px 13px;border-left:3px solid #ef4444;border-radius:7px;background:rgba(127,29,29,.08)}
.competition-activation-consequences strong{font-size:.67rem;color:#e6edf5}
.competition-activation-consequences ul{margin:8px 0 0 17px;padding:0;color:#91a3b7;font-size:.62rem;line-height:1.55}
.competition-activation-ack{display:flex;align-items:flex-start;gap:9px;margin-top:15px;padding:10px 11px;border:1px solid rgba(148,163,184,.12);border-radius:8px;cursor:pointer;color:#b6c4d2;font-size:.64rem;line-height:1.45}
.competition-activation-ack input{margin-top:2px}
.competition-activation-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media(max-width:720px){.competition-readiness-inline,.competition-readiness-actions{justify-content:flex-start}}


/* ==========================================================================
   v0.8.0b — AUTHENTICATION GATE
   ========================================================================== */
body.auth-pending { min-height: 100vh; }
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; background: #07111f; }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(100%, 460px); background: #fff; border-radius: 18px; padding: 34px; box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.auth-brand { font-size: .76rem; font-weight: 900; letter-spacing: .15em; color: #526174; margin-bottom: 12px; }
.auth-card h1 { margin: 0 0 8px; color: #101b2b; font-size: 2rem; }
.auth-subtitle { margin: 0 0 24px; color: #647184; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: #eef2f6; border-radius: 10px; margin-bottom: 22px; }
.auth-tab { border: 0; border-radius: 7px; padding: 10px; background: transparent; color: #536174; font-weight: 800; cursor: pointer; }
.auth-tab.active { background: #fff; color: #13233a; box-shadow: 0 1px 5px rgba(15,23,42,.12); }
.auth-field { display: grid; gap: 7px; margin-bottom: 15px; color: #28384e; font-size: .84rem; font-weight: 800; }
.auth-field input { width: 100%; box-sizing: border-box; border: 1px solid #ccd5df; border-radius: 9px; padding: 12px 13px; font: inherit; color: #142033; background: #fff; }
.auth-field input:focus { outline: 2px solid #8da6c2; outline-offset: 1px; border-color: #506f93; }
.auth-primary { width: 100%; border: 0; border-radius: 9px; padding: 13px 16px; background: #173a63; color: #fff; font-weight: 900; cursor: pointer; margin-top: 4px; }
.auth-primary:disabled { opacity: .6; cursor: wait; }
.auth-message { margin-top: 16px; border-radius: 9px; padding: 11px 12px; background: #edf3f8; color: #29415e; font-size: .9rem; line-height: 1.45; }
.auth-message[data-kind="error"] { background: #fff0f0; color: #8a2626; }
.auth-message[data-kind="success"] { background: #edf8f0; color: #27623a; }
.auth-footnote { margin: 22px 0 0; text-align: center; color: #8a96a6; font-size: .75rem; }
@media (max-width: 520px) { .auth-card { padding: 26px 20px; } .auth-card h1 { font-size: 1.7rem; } }


/* v0.8.0b — Post-authentication profile setup refinement */
.profile-setup-gate{min-height:100vh;display:grid;place-items:center;padding:32px 18px;background:#07111f}
.profile-setup-gate[hidden]{display:none}
.profile-setup-kicker{display:block;margin-bottom:8px;color:#7f8ea1;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.profile-setup-card .auth-subtitle{margin-bottom:22px}
.profile-setup-signout{display:block;margin:15px auto 0;border:0;background:transparent;color:#728196;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.profile-setup-signout:hover{color:#33465e}

/* v0.8.0b — Session boot + authenticated account controls */
.auth-boot-screen{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:#07111f;padding:24px;
}
.auth-boot-screen[hidden]{display:none}
.auth-boot-card{text-align:center;color:#dbe7f4}
.auth-boot-card p{margin:14px 0 0;color:#8798ac;font-size:.86rem;font-weight:700}
.auth-boot-spinner{
  width:28px;height:28px;margin:18px auto 0;border:3px solid rgba(255,255,255,.16);
  border-top-color:currentColor;border-radius:50%;animation:p12-auth-spin .75s linear infinite;
}
@keyframes p12-auth-spin{to{transform:rotate(360deg)}}
.authenticated-account-bar{
  position:relative;z-index:50;display:flex;justify-content:flex-end;align-items:center;
  gap:10px;padding:8px 18px;background:#0b1727;border-bottom:1px solid rgba(255,255,255,.08);
}
.authenticated-account-bar[hidden]{display:none}
.authenticated-user-label{color:#aebdcd;font-size:.78rem;font-weight:800}
.authenticated-signout-btn{
  border:1px solid rgba(255,255,255,.16);border-radius:8px;background:transparent;
  color:#dce7f3;padding:6px 10px;font:inherit;font-size:.75rem;font-weight:900;cursor:pointer;
}
.authenticated-signout-btn:hover{background:rgba(255,255,255,.07)}


/* v0.8.0b — Password Recovery */
.auth-link-btn{
  display:block;
  width:max-content;
  margin:12px auto 0;
  border:0;
  background:transparent;
  color:#8294aa;
  font:inherit;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer;
}
.auth-link-btn:hover{color:#d5e2ef}
.password-recovery-gate{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 18px;
  background:#07111f;
}
.password-recovery-gate[hidden]{display:none}


/* v0.8.0c — User Account Home */
.account-home{min-height:100vh;background:radial-gradient(circle at top right,rgba(77,108,146,.10),transparent 34%),#07111f;color:#e7eef6;padding:34px 22px 56px}
.account-home[hidden]{display:none}.account-home-shell{width:min(1040px,100%);margin:0 auto}
.account-home-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:12px 0 28px}
.account-home-kicker,.account-section-kicker{display:block;color:#7e91a8;font-size:.66rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.account-home-header h1{margin:7px 0 7px;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.035em}.account-home-header p{margin:0;color:#8fa1b5;font-size:.88rem}
.account-home-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.account-home-secondary-btn,.account-home-primary-btn{border:1px solid rgba(148,163,184,.18);border-radius:8px;padding:8px 12px;background:rgba(15,23,42,.52);color:#d9e4ef;font:inherit;font-size:.75rem;font-weight:900;cursor:pointer}
.account-home-primary-btn{background:#e4eaf0;color:#0c1726;border-color:#e4eaf0}.account-home-secondary-btn:hover{background:rgba(148,163,184,.10)}
.account-home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:34px}
.account-action-card{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;text-align:left;border:1px solid rgba(148,163,184,.13);border-radius:12px;padding:17px;background:rgba(15,23,42,.48);color:#e7eef6;cursor:pointer}
.account-action-card:hover{transform:translateY(-1px);border-color:rgba(148,163,184,.24);background:rgba(20,31,50,.70)}.account-action-create{background:linear-gradient(135deg,rgba(29,47,70,.80),rgba(15,23,42,.55))}
.account-action-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.06);font-size:1.3rem}.account-action-copy strong{display:block;font-size:.86rem}.account-action-copy small{display:block;margin-top:4px;color:#8193a8;font-size:.65rem;line-height:1.4}
.account-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:11px}.account-section-heading h2{margin:4px 0 0;font-size:1.15rem}.account-league-count{color:#71849a;font-size:.68rem;font-weight:850}
.account-league-list{display:grid;gap:9px}.account-league-card{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:1px solid rgba(148,163,184,.12);border-radius:10px;padding:14px 15px;background:rgba(15,23,42,.40);color:#e7eef6;cursor:pointer}
.account-league-card:hover{background:rgba(20,31,50,.70);border-color:rgba(148,163,184,.22)}.account-league-card-main strong{display:block;margin:5px 0 3px;font-size:.82rem}.account-league-card-main small{color:#7c8fa5;font-size:.62rem}.account-league-status{color:#8da0b5;font-size:.55rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.account-league-arrow{color:#7f93aa;font-size:1rem}
.account-empty-state{text-align:center;padding:42px 20px;border:1px dashed rgba(148,163,184,.16);border-radius:12px;background:rgba(15,23,42,.24)}.account-empty-state[hidden]{display:none}.account-empty-mark{font-size:1.8rem;color:#62758a}.account-empty-state h3{margin:9px 0 5px;font-size:.92rem}.account-empty-state p{margin:0;color:#7f91a6;font-size:.7rem}
.account-placeholder-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.78);backdrop-filter:blur(5px)}.account-placeholder-modal[hidden]{display:none}
.account-placeholder-panel{position:relative;width:min(440px,100%);padding:22px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:#111b2c;color:#e7eef6;box-shadow:0 24px 70px rgba(0,0,0,.42)}.account-placeholder-panel h3{margin:7px 0 8px}.account-placeholder-panel p{margin:0 0 18px;color:#8fa1b5;font-size:.72rem;line-height:1.55}
@media(max-width:700px){.account-home-header{flex-direction:column}.account-home-actions{grid-template-columns:1fr}}


/* v0.8.0c — Supabase league wiring + Account Home spacing refinement */
.account-home-shell{padding-left:18px;padding-right:18px}
.account-league-loading,.account-league-error{padding:18px;border:1px solid rgba(148,163,184,.12);border-radius:10px;background:rgba(15,23,42,.32);color:#7f91a6;font-size:.72rem}.account-league-error{color:#d8a7a7}
.account-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.78);backdrop-filter:blur(5px)}.account-modal[hidden]{display:none}
.account-modal-panel{position:relative;width:min(500px,100%);padding:24px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:#111b2c;color:#e7eef6;box-shadow:0 24px 70px rgba(0,0,0,.42)}.account-modal-panel h3{margin:7px 0 8px;font-size:1.15rem}.account-modal-panel>p{margin:0 0 18px;color:#8fa1b5;font-size:.72rem;line-height:1.55}.account-modal-primary{width:100%;margin-top:14px}
.created-league-result{margin-top:18px;padding-top:18px;border-top:1px solid rgba(148,163,184,.12)}.created-league-result[hidden]{display:none}.created-league-result>strong{display:block;margin:6px 0 4px;font-size:1rem}.created-league-result>small{display:block;color:#8496aa;font-size:.68rem}
.passcode-display-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:14px 0}.passcode-display-row code{display:block;padding:13px 14px;border:1px solid rgba(148,163,184,.18);border-radius:9px;background:#091321;color:#f0d691;font-size:1.18rem;font-weight:950;letter-spacing:.16em;text-align:center}
.join-league-preview{margin-top:18px;padding-top:18px;border-top:1px solid rgba(148,163,184,.12)}.join-league-preview[hidden]{display:none}.join-league-preview h4{margin:6px 0 13px;font-size:1.05rem}.join-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.join-preview-grid>div{padding:10px;border:1px solid rgba(148,163,184,.12);border-radius:8px;background:rgba(15,23,42,.34)}.join-preview-grid span{display:block;color:#71849a;font-size:.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.join-preview-grid strong{display:block;margin-top:4px;font-size:.72rem}.join-preview-reason{margin:12px 0 0;color:#d8a7a7;font-size:.68rem}
@media(max-width:700px){.account-home-shell{padding-left:8px;padding-right:8px}.join-preview-grid{grid-template-columns:1fr}}


/* v0.8.0c — Refresh persistence, League Access, and polish */
.account-home-shell{padding-left:28px;padding-right:28px}
.account-modal-panel .close-btn,
.account-placeholder-panel .close-btn{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  margin:0 !important;
}
.league-access-panel{
  position:relative;z-index:45;display:flex;justify-content:space-between;
  align-items:center;gap:18px;padding:11px 18px;background:#0d1a2b;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.league-access-panel[hidden]{display:none}
.league-access-copy{display:flex;flex-direction:column;gap:2px}
.league-access-kicker{color:#72859b;font-size:.52rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
.league-access-copy strong{font-size:.76rem;color:#dfe8f2}
.league-access-copy small{font-size:.58rem;color:#76899e}
.league-access-code-wrap{display:flex;align-items:center;gap:9px}
.league-access-code-wrap code{
  padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:7px;
  background:#081321;color:#f0d691;font-size:.86rem;font-weight:950;letter-spacing:.14em;
}
@media(max-width:700px){
  .account-home-shell{padding-left:18px;padding-right:18px}
  .league-access-panel{align-items:flex-start;flex-direction:column}
}


/* v0.8.0c — User Home header breathing-room correction */
.account-home-header{
  padding-left:24px !important;
  padding-right:24px !important;
}
.account-home-actions,
.account-leagues-section{
  padding-left:24px;
  padding-right:24px;
}
@media(max-width:700px){
  .account-home-header,
  .account-home-actions,
  .account-leagues-section{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* v0.8.0c — Clean foundational router + invite flow */
.invite-flow-panel{width:min(520px,100%)}
.invite-preview{margin-top:4px;padding-top:0;border-top:0}


/* v0.8.1d — league hydration boundary */
body[data-league-hydrating="true"] .app-shell {
  visibility: hidden !important;
}


/* v0.8.1g-prep2 — persistent Commissioner testing controls */
.commissioner-testing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
}

.commissioner-testing-actions .danger-testing-action {
  border-style: dashed;
}

.commissioner-testing-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}


/* v0.8.1h-c2 — Commissioner shared-shell visibility hard gate */
#commissioner-deadline-card[hidden] {
  display: none !important;
}


/* ==========================================================================
   v0.8.1i — UI/UX Refresh
   ========================================================================== */

.home-league-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.league-access-inline{
  flex:0 0 auto;
  min-width:280px;
  max-width:390px;
}

.league-access-inline .league-access-panel{
  margin:0;
}

@media(max-width:760px){
  .home-league-summary{
    flex-direction:column;
    align-items:stretch;
  }

  .league-access-inline{
    min-width:0;
    max-width:none;
    width:100%;
  }
}


/* v0.8.1i1 — persistent brand + Commissioner readiness wrapping */
.topbar-brand{
  margin-right:auto;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}

.commissioner-deadline-card .deadline-copy{
  min-width:0;
  flex:1 1 auto;
}

.commissioner-deadline-card #deadline-message,
.commissioner-deadline-card #deadline-summary{
  overflow-wrap:anywhere;
  word-break:normal;
}

.competition-readiness-inline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.competition-readiness-chip{
  max-width:100%;
  white-space:normal;
  line-height:1.25;
}

.competition-readiness-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

@media(max-width:760px){
  .topbar-brand{
    width:100%;
    margin-right:0;
    margin-bottom:8px;
  }
}


/* ==========================================================================
   v0.8.1i2 — League shell alignment + Competition Readiness layout
   ========================================================================== */

/* Keep the authenticated bar content aligned and prevent the brand from disappearing. */
.authenticated-account-bar{
  display:flex;
  align-items:center;
  gap:10px;
}

.authenticated-account-bar .topbar-brand{
  display:block;
  flex:0 0 auto;
  margin-right:auto;
  font-size:14px;
  font-weight:800;
  letter-spacing:.045em;
  color:inherit;
  white-space:nowrap;
}

/* Commissioner control: stable two-column layout instead of allowing copy to collapse. */
.commissioner-deadline-inner{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

.commissioner-deadline-card .deadline-copy{
  min-width:280px;
  width:auto;
}

.commissioner-deadline-card .deadline-copy p{
  max-width:34ch;
  margin-right:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.commissioner-deadline-card .deadline-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.commissioner-deadline-card .deadline-controls{
  min-width:0;
  width:100%;
}

.competition-readiness-inline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}

.competition-readiness-chip{
  white-space:normal;
  max-width:100%;
}

.competition-readiness-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}

/* Keep the testing row aligned with the main Commissioner content area. */
.commissioner-testing-actions{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:760px){
.authenticated-account-bar{
    flex-wrap:wrap;
  }

  .authenticated-account-bar .topbar-brand{
    width:100%;
    margin-right:0;
  }

  .commissioner-deadline-inner{
    grid-template-columns:1fr;
    gap:18px;
  }

  .commissioner-deadline-card .deadline-copy{
    min-width:0;
  }

  .commissioner-deadline-card .deadline-copy p{
    max-width:none;
  }
}


/* ==========================================================================
   v0.8.1i3 — Canonical workspace width alignment
   ========================================================================== */

/*
  The bracket workspace already fills the app-shell content box. Shared league
  chrome and the other primary workspaces now use that same geometry.
*/
.league-width-shell,
.home-workspace,
.leaderboard-workspace{
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

@media(max-width:760px){
  .league-width-shell,
  .home-workspace,
  .leaderboard-workspace{
    width:100%;
  }
}


/* ==========================================================================
   v0.8.1i4 — Shared upper-bar internal content alignment
   ========================================================================== */

/*
  Outer widths are intentionally inherited from v0.8.1i3.
  These rules only normalize internal padding/content placement so shared
  upper chrome aligns visually with League Home and the primary workspaces.
*/

.authenticated-account-bar{
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

.commissioner-deadline-card{
  box-sizing:border-box;
}

.commissioner-deadline-card .commissioner-deadline-inner{
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

/*
  Let the right-side Commissioner controls use their full column cleanly
  instead of appearing visually compressed toward the center.
*/
.commissioner-deadline-card .deadline-controls{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.commissioner-deadline-card .deadline-summary{
  align-self:flex-start;
}

.commissioner-deadline-card .deadline-action{
  width:100%;
}

.competition-readiness-inline,
.competition-readiness-actions{
  width:100%;
}

/* Keep right-side actions visually anchored to the shared right edge. */
.competition-readiness-actions{
  justify-content:flex-end;
}

@media(max-width:760px){
  .authenticated-account-bar{
    padding-left:14px;
    padding-right:14px;
  }

  .commissioner-deadline-card .commissioner-deadline-inner{
    padding-left:14px;
    padding-right:14px;
  }

  .competition-readiness-actions{
    justify-content:flex-start;
  }
}


/* ==========================================================================
   v0.8.1i5 — Commissioner internal content grid correction
   ========================================================================== */

/*
  Keep the i3/i4 outer shell untouched. Rebuild only the interior of the
  Commissioner Competition Control so its content uses the available width
  instead of floating inside an invisible centered sub-grid.
*/
.commissioner-deadline-card .commissioner-deadline-inner{
  display:grid;
  grid-template-columns:minmax(300px, 420px) minmax(0, 1fr);
  column-gap:32px;
  row-gap:14px;
  align-items:start;
  width:100%;
}

.commissioner-deadline-card .deadline-copy{
  grid-column:1;
  grid-row:1;
  min-width:0;
  width:100%;
  justify-self:start;
}

.commissioner-deadline-card .deadline-copy p{
  max-width:38ch;
}

.commissioner-deadline-card .deadline-controls{
  grid-column:2;
  grid-row:1 / span 2;
  width:100%;
  min-width:0;
  align-self:start;
  justify-self:stretch;
}

.commissioner-deadline-card .deadline-summary{
  display:block;
  margin:0 0 10px 0;
  text-align:left;
}

.commissioner-deadline-card .deadline-action{
  width:100%;
}

.competition-readiness-inline{
  width:100%;
  justify-content:flex-start;
}

.competition-readiness-actions{
  width:100%;
  justify-content:flex-end;
}

/* The testing row belongs beneath the main grid, aligned with the control column. */
.commissioner-testing-actions{
  grid-column:2;
  grid-row:2;
  width:100%;
  margin-top:0;
  justify-content:flex-start;
}

/*
  Open/live/final states may not render the testing row as a direct grid child.
  Keep any testing block inside the action area visually aligned.
*/
.deadline-action .commissioner-testing-actions{
  margin-top:14px;
  padding-top:12px;
}

/* On smaller screens the whole Commissioner panel stacks cleanly. */
@media(max-width:900px){
  .commissioner-deadline-card .commissioner-deadline-inner{
    grid-template-columns:1fr;
    row-gap:18px;
  }

  .commissioner-deadline-card .deadline-copy,
  .commissioner-deadline-card .deadline-controls,
  .commissioner-testing-actions{
    grid-column:1;
    grid-row:auto;
  }

  .commissioner-deadline-card .deadline-copy p{
    max-width:none;
  }

  .competition-readiness-actions{
    justify-content:flex-start;
  }
}


/* ==========================================================================
   v0.9.0a — V1 hardening: Account + Delete League
   ========================================================================== */

.account-settings-panel{max-width:560px}
.account-settings-security{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(148,163,184,.16);
}
.account-settings-security strong{display:block;color:#e5edf5;margin-bottom:4px}
.account-settings-security p{margin:0;color:#8192a6;font-size:.76rem}
#account-settings-email[readonly]{
  opacity:.72;
  cursor:default;
}

.league-access-danger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(248,113,113,.18);
}
.league-access-danger span,
.danger-kicker{
  color:#fca5a5!important;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.league-delete-btn,
.league-delete-confirm-btn{
  appearance:none;
  border:1px solid rgba(248,113,113,.34);
  background:rgba(127,29,29,.20);
  color:#fecaca;
  border-radius:9px;
  padding:9px 13px;
  font-weight:850;
  cursor:pointer;
}
.league-delete-btn:hover,
.league-delete-confirm-btn:hover{
  background:rgba(153,27,27,.30);
}
.league-delete-confirm-btn{
  width:100%;
  margin-top:8px;
}
.delete-league-panel{max-width:560px}

@media(max-width:640px){
  .account-settings-security{
    align-items:stretch;
    flex-direction:column;
  }
}


/* v0.9.0b — Delete League presentation cleanup */
.league-access-danger{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.14);
}
.league-access-danger > span,
.league-management-kicker{
  color:#8192a6!important;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.league-delete-btn{
  min-width:104px;
  border:1px solid rgba(248,113,113,.28);
  background:transparent;
  color:#fca5a5;
  padding:8px 12px;
  border-radius:8px;
  font-size:.72rem;
  line-height:1;
  font-weight:850;
}
.league-delete-btn:hover{
  background:rgba(127,29,29,.14);
  border-color:rgba(248,113,113,.42);
}
.delete-league-panel{max-width:520px}
.delete-league-panel > p{line-height:1.5}
.league-delete-confirm-btn{
  width:100%;
  margin-top:10px;
  min-height:42px;
  border:1px solid rgba(248,113,113,.34);
  background:rgba(127,29,29,.16);
  color:#fecaca;
  border-radius:9px;
  font-size:.82rem;
  font-weight:900;
}
.league-delete-confirm-btn:hover{background:rgba(127,29,29,.26)}
.league-delete-confirm-btn:disabled,
.league-delete-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}


/* ==========================================================================
   v0.9.0c — League Management contained second-row layout
   ========================================================================== */

.league-access-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "copy code"
    "manage manage";
  align-items:center;
  column-gap:16px;
  row-gap:0;
  box-sizing:border-box;
}

.league-access-copy{
  grid-area:copy;
  min-width:0;
}

.league-access-code-wrap{
  grid-area:code;
  min-width:0;
}

.league-management-row{
  grid-area:manage;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-width:0;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.14);
  box-sizing:border-box;
}

.league-management-label{
  color:#8192a6;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.league-management-row .league-delete-btn{
  flex:0 0 auto;
  min-width:0;
  width:auto;
  padding:8px 12px;
  margin:0;
  white-space:nowrap;
}

@media(max-width:640px){
  .league-access-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "code"
      "manage";
    row-gap:10px;
  }

  .league-access-code-wrap{
    justify-content:flex-start;
  }

  .league-management-row{
    margin-top:2px;
  }
}


/* ==========================================================================
   v0.9.0d — Inline Delete League
   ========================================================================== */

.league-access-panel{
  display:flex;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
}

.league-access-copy{
  min-width:0;
  flex:1 1 auto;
}

.league-access-code-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 0 auto;
}

.league-access-panel > .league-delete-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  margin:0;
  padding:8px 12px;
  white-space:nowrap;
  align-self:center;
}

/* Retire v0.9.0c's extra management row/header. */
.league-management-row,
.league-management-label,
.league-management-kicker{
  display:none!important;
}

@media(max-width:640px){
  .league-access-panel{
    flex-wrap:wrap;
  }

  .league-access-copy{
    flex:1 1 100%;
  }
}


/* ==========================================================================
   v0.9.0e — League Access copy width refinement
   ========================================================================== */

.league-access-inline{
  min-width:420px;
  max-width:520px;
}

.league-access-panel{
  width:100%;
}

.league-access-copy{
  flex:1 1 190px;
  min-width:190px;
  max-width:240px;
}

.league-access-copy small{
  display:block;
  max-width:22ch;
  line-height:1.35;
}

.league-access-code-wrap{
  flex:0 0 auto;
}

.league-access-panel > .league-delete-btn{
  flex:0 0 auto;
}

@media(max-width:760px){
  .league-access-inline{
    min-width:0;
    max-width:none;
    width:100%;
  }

  .league-access-copy{
    min-width:0;
    max-width:none;
    flex:1 1 100%;
  }

  .league-access-copy small{
    max-width:none;
  }
}


/* v0.9.1 — production hardening */
.commissioner-testing-actions,
.commissioner-testing-label,
.danger-testing-action{
  display:none!important;
}


/* ==========================================================================\n   v1.1d — Regular Season Weekly Pick'em\n   ========================================================================== */
.weekly-picks-workspace{padding:0 0 34px}.weekly-workspace-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}.weekly-heading-copy h2{margin:4px 0 5px}.weekly-heading-copy p{margin:0;color:var(--muted,#94a3b8)}.weekly-toolbar{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(250px,1.4fr) auto;gap:12px;align-items:stretch;margin-bottom:16px}.weekly-week-select-label,.weekly-deadline-card{border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.58);border-radius:12px;padding:10px 12px}.weekly-week-select-label{display:flex;flex-direction:column;gap:5px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}.weekly-week-select-label select{background:#0b1220;color:#e5edf8;border:1px solid rgba(148,163,184,.24);border-radius:8px;padding:8px}.weekly-deadline-card{display:flex;flex-direction:column;justify-content:center}.weekly-deadline-card span{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#8292a6}.weekly-deadline-card strong{margin-top:3px}.weekly-submission-pill{display:flex;align-items:center;justify-content:center;border:1px solid rgba(96,165,250,.22);border-radius:999px;padding:0 16px;min-width:116px;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:rgba(30,41,59,.72)}.weekly-submission-pill[data-state="submitted"]{border-color:rgba(52,211,153,.3);color:#a7f3d0}.weekly-submission-pill[data-state="locked"]{color:#cbd5e1}.weekly-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.weekly-game-card{border:1px solid rgba(148,163,184,.15);background:linear-gradient(160deg,rgba(17,27,45,.94),rgba(8,15,27,.94));border-radius:14px;padding:12px;box-shadow:0 9px 24px rgba(0,0,0,.16)}.weekly-game-meta{display:flex;align-items:center;gap:9px;color:#8292a6;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}.weekly-game-meta span:nth-child(2){margin-right:auto}.weekly-team-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}.weekly-team-choice{position:relative;display:flex;align-items:center;gap:9px;min-height:66px;text-align:left;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.66);color:#edf4ff;border-radius:11px;padding:9px;cursor:pointer}.weekly-team-choice:hover:not(:disabled){border-color:rgba(96,165,250,.48);transform:translateY(-1px)}.weekly-team-choice.selected{border-color:var(--team-accent,#60a5fa);box-shadow:inset 0 0 0 1px var(--team-accent,#60a5fa);background:rgba(30,41,59,.94)}.weekly-team-choice:disabled{cursor:default;opacity:.92}.weekly-team-choice img,.weekly-logo-placeholder{width:34px;height:34px;object-fit:contain;flex:0 0 34px}.weekly-team-choice span:not(.weekly-selected-mark){display:flex;flex-direction:column;min-width:0}.weekly-team-choice strong{font-size:.83rem}.weekly-team-choice small{font-size:.62rem;color:#8292a6;margin-top:2px}.weekly-selected-mark{position:absolute;right:7px;top:6px;font-weight:950}.weekly-versus{align-self:center;font-size:.61rem;font-weight:900;color:#64748b}.weekly-result-badge{margin-left:auto;border-radius:999px;padding:3px 7px}.weekly-result-badge.win{background:rgba(16,185,129,.14);color:#6ee7b7}.weekly-result-badge.loss{background:rgba(239,68,68,.13);color:#fca5a5}.weekly-result-badge.null{background:rgba(148,163,184,.12);color:#cbd5e1}.weekly-submit-card,.platform-admin-card{margin-top:16px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(15,23,42,.64);padding:14px}.weekly-submit-card{display:flex;align-items:center;justify-content:space-between;gap:18px}.weekly-submit-card h3{margin:3px 0}.weekly-submit-card p{margin:0;color:#94a3b8;font-size:.8rem}.weekly-primary-btn,.weekly-secondary-btn{border-radius:9px;padding:9px 13px;font-size:.73rem;font-weight:900;cursor:pointer}.weekly-primary-btn{background:#d8e7ff;color:#08111f;border:1px solid #d8e7ff}.weekly-secondary-btn{background:rgba(30,41,59,.72);color:#dce8f7;border:1px solid rgba(148,163,184,.24)}.weekly-primary-btn:disabled,.weekly-secondary-btn:disabled{opacity:.45;cursor:not-allowed}.platform-admin-card{border-color:rgba(96,165,250,.23);margin-bottom:16px}.platform-admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.platform-admin-heading h3{margin:3px 0}.platform-admin-heading p{margin:0;color:#94a3b8;font-size:.8rem}.platform-admin-badge{border:1px solid rgba(96,165,250,.25);border-radius:999px;padding:4px 8px;font-size:.61rem;font-weight:900;letter-spacing:.06em;color:#93c5fd}.platform-admin-controls{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin-top:13px}.platform-admin-controls label,.platform-game-builder-grid label{display:flex;flex-direction:column;gap:5px;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#8292a6}.platform-admin-controls input,.platform-game-builder-grid input,.platform-game-builder-grid select,.platform-result-control select{background:#0b1220;color:#e5edf8;border:1px solid rgba(148,163,184,.22);border-radius:8px;padding:8px}.platform-game-builder{margin-top:13px;padding-top:13px;border-top:1px solid rgba(148,163,184,.12)}.platform-game-builder-copy{display:flex;justify-content:space-between;margin-bottom:9px}.platform-game-builder-copy span{color:#8292a6;font-size:.72rem}.platform-game-builder-grid{display:grid;grid-template-columns:1fr 1fr .72fr auto 1fr auto;gap:8px;align-items:end}.platform-neutral-check{flex-direction:row!important;align-items:center;height:36px}.weekly-remove-game{margin-top:9px;border:0;background:transparent;color:#fca5a5;font-size:.7rem;font-weight:800;cursor:pointer}.platform-result-note{margin-top:9px;color:#64748b;font-size:.7rem}.platform-result-control{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;color:#8292a6;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.platform-result-control select{min-width:180px}.weekly-empty-state{border:1px dashed rgba(148,163,184,.2);border-radius:14px;padding:26px;text-align:center}.weekly-empty-state strong,.weekly-empty-state span{display:block}.weekly-empty-state span{margin-top:5px;color:#94a3b8}.leaderboard-season-toggle{display:inline-flex;gap:4px;border:1px solid rgba(148,163,184,.17);border-radius:10px;padding:3px;margin:0 0 14px}.leaderboard-season-btn{border:0;background:transparent;color:#8292a6;padding:7px 11px;border-radius:7px;font-size:.66rem;font-weight:900;letter-spacing:.06em;cursor:pointer}.leaderboard-season-btn.active{background:rgba(96,165,250,.14);color:#dbeafe}.regular-leaderboard-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}.regular-leaderboard-summary span:last-child{color:#8292a6;font-size:.75rem}.leaderboard-empty{text-align:center!important;color:#8292a6!important;padding:24px!important}.home-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:1050px){.weekly-games-grid{grid-template-columns:1fr}.platform-game-builder-grid{grid-template-columns:1fr 1fr}.weekly-toolbar{grid-template-columns:1fr 1fr}.weekly-submission-pill{min-height:42px}.home-summary-grid{grid-template-columns:1fr!important}}
@media(max-width:720px){.weekly-workspace-header{flex-direction:column}.weekly-toolbar{grid-template-columns:1fr}.weekly-team-row{grid-template-columns:1fr}.weekly-versus{text-align:center}.platform-admin-controls,.weekly-submit-card{align-items:stretch;flex-direction:column}.platform-game-builder-grid{grid-template-columns:1fr}.regular-leaderboard-summary{align-items:flex-start;flex-direction:column;gap:3px}}


/* ==========================================================================
   v1.1e — Full Season Experience
   ========================================================================== */
.competition-progress-card{overflow:hidden}
.season-map{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:auto auto;gap:26px 8px;position:relative}
.season-map-stage{position:relative;min-width:0;display:grid;justify-items:center;text-align:center}
.season-map-stage .tracker-node{z-index:2}
.season-map-stage .tracker-copy{min-width:0}
.season-map-stage .tracker-copy strong{font-size:.64rem;line-height:1.15}
.season-map-stage .tracker-state{font-size:.55rem}
.season-map-stage::after{content:"";position:absolute;top:8px;left:calc(50% + 9px);width:calc(100% - 10px);height:3px;background:#3b82f6;opacity:.32}
.season-map-stage[data-state="complete"]::after{background:#22c55e;opacity:.72}
.season-pos-10::before{content:"";position:absolute;top:8px;right:calc(50% - 1px);width:3px;height:calc(100% + 28px);background:#3b82f6;opacity:.32}
.season-pos-10[data-state="complete"]::before{background:#22c55e;opacity:.72}
.season-pos-10::after,.season-pos-20::after{display:none}
.season-pos-11{grid-column:10;grid-row:2}.season-pos-12{grid-column:9;grid-row:2}.season-pos-13{grid-column:8;grid-row:2}.season-pos-14{grid-column:7;grid-row:2}.season-pos-15{grid-column:6;grid-row:2}.season-pos-16{grid-column:5;grid-row:2}.season-pos-17{grid-column:4;grid-row:2}.season-pos-18{grid-column:3;grid-row:2}.season-pos-19{grid-column:2;grid-row:2}.season-pos-20{grid-column:1;grid-row:2}
.season-pos-11::after,.season-pos-12::after,.season-pos-13::after,.season-pos-14::after,.season-pos-15::after,.season-pos-16::after,.season-pos-17::after,.season-pos-18::after,.season-pos-19::after{left:auto;right:calc(50% + 9px)}
.season-map-stage[data-state="complete"] .tracker-node{border-color:#22c55e;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.08)}
.season-map-stage[data-state="complete"] .tracker-state{color:#4ade80}
.season-map-stage[data-state="in-progress"] .tracker-node{border-color:#ef4444;background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.09)}
.season-map-stage[data-state="in-progress"] .tracker-state{color:#f87171}
.home-standing-split{cursor:default;padding-bottom:12px}
.home-standing-halves{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border-top:1px solid rgba(148,163,184,.12)}
.home-standing-half{min-width:0;border:0;background:transparent;color:inherit;text-align:left;padding:12px 12px 4px 0;cursor:pointer}
.home-standing-half+ .home-standing-half{border-left:1px solid rgba(148,163,184,.12);padding-left:14px}
.home-standing-half:hover strong{color:#93c5fd}
.home-standing-half span{display:block!important;margin:0!important;font-size:.58rem!important;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#71849a!important}
.home-standing-half strong{display:block;margin-top:5px;font-size:.93rem;color:#eef4fa}
.home-standing-half small{display:block;margin-top:3px;font-size:.64rem;color:#8295aa}
.weekly-submit-card>div{min-height:64px;display:flex;flex-direction:column;justify-content:center}
#weekly-submit-button{width:142px;min-width:142px;height:38px;flex:0 0 142px;white-space:nowrap}
.weekly-game-meta{min-height:20px}.weekly-kickoff{margin-right:auto;color:#cbd5e1}
.weekly-ap-rank{display:inline!important;color:#fbbf24!important;margin-right:5px;font-weight:950}
.platform-ranking-editor{margin-top:14px;padding-top:13px;border-top:1px solid rgba(148,163,184,.12)}
.platform-ranking-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:9px}
.platform-ranking-grid label{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:4px;color:#8292a6;font-size:.62rem;font-weight:900}
.platform-ranking-grid select{min-width:0;background:#0b1220;color:#e5edf8;border:1px solid rgba(148,163,184,.22);border-radius:7px;padding:6px}
.platform-game-builder-grid{grid-template-columns:1fr 1fr .72fr .6fr auto 1fr auto}
@media(max-width:1050px){
  .season-map{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,auto)}
  .season-map-stage{grid-column:auto!important;grid-row:auto!important}
  .season-map-stage::before{display:none}.season-map-stage::after{display:none}
  .platform-ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .season-map{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 5px}
  .season-map-stage .tracker-copy strong{font-size:.58rem}.season-map-stage .tracker-state{font-size:.5rem}
  .home-standing-halves{grid-template-columns:1fr 1fr}
  .platform-ranking-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   v1.1e1 — League Home polish
   ========================================================================== */

/* Prevent hidden workspaces from flashing during route/render transitions. */
[hidden]{display:none!important}
.weekly-picks-workspace[hidden],
.home-workspace[hidden],
.bracket-stage[hidden],
.leaderboard-workspace[hidden]{display:none!important}

/* League Home now uses two summary cards: Bracket + split Standing. */
.home-summary-grid{grid-template-columns:1fr 1.35fr!important}

/* Explicit season-map flow connectors. */
.season-map-stage::after,
.season-map-stage::before{display:none!important}
.season-map-connector{
  position:absolute;
  z-index:1;
  top:8px;
  left:calc(50% + 10px);
  width:calc(100% - 12px);
  height:3px;
  background:#3b82f6;
  opacity:.36;
}
.season-map-stage[data-state="complete"] .season-map-connector{
  background:#22c55e;
  opacity:.76;
}
.season-map-arrow{
  position:absolute;
  right:-1px;
  top:50%;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid currentColor;
  color:#3b82f6;
  transform:translateY(-50%);
}
.season-map-stage[data-state="complete"] .season-map-arrow{color:#22c55e}

/* Second row travels right-to-left. */
.season-map-connector.reverse{
  left:auto;
  right:calc(50% + 10px);
}
.season-map-connector.reverse .season-map-arrow{
  right:auto;
  left:-1px;
  border-left:0;
  border-right:7px solid currentColor;
}

/* Week 10 turns downward into Week 11. */
.season-map-connector.turn-down{
  left:50%;
  top:9px;
  width:3px;
  height:calc(100% + 28px);
}
.season-map-connector.turn-down .season-map-arrow{
  right:auto;
  left:50%;
  top:auto;
  bottom:-5px;
  transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid currentColor;
  border-bottom:0;
}

/* Typography parity across the two halves of Your Standing. */
.home-standing-half span{
  font-size:.58rem!important;
  line-height:1.15;
}
.home-standing-half strong{
  font-size:.93rem!important;
  line-height:1.2;
  min-height:1.15em;
}
.home-standing-half small{
  font-size:.64rem!important;
  line-height:1.3;
  min-height:1.3em;
}
#home-standing-status,
#home-regular-standing-status{
  font-size:.93rem!important;
}
#home-standing-detail,
#home-regular-standing-detail{
  font-size:.64rem!important;
}

@media(max-width:1050px){
  .season-map-connector{display:none}
  .home-summary-grid{grid-template-columns:1fr!important}
}


/* ==========================================================================
   v1.1e2 — True 2 x 10 Desktop Season Snake
   ========================================================================== */

/* The League Home season map stays ten columns across at normal desktop
   widths. This intentionally overrides the v1.1e responsive 5-column rule. */
@media (min-width: 761px){
  .competition-progress-card{
    padding-left:18px;
    padding-right:18px;
  }

  .season-map{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,auto)!important;
    column-gap:2px!important;
    row-gap:34px!important;
    overflow:visible;
  }

  .season-map-stage{
    min-width:0;
  }

  .season-pos-1{grid-column:1!important;grid-row:1!important}
  .season-pos-2{grid-column:2!important;grid-row:1!important}
  .season-pos-3{grid-column:3!important;grid-row:1!important}
  .season-pos-4{grid-column:4!important;grid-row:1!important}
  .season-pos-5{grid-column:5!important;grid-row:1!important}
  .season-pos-6{grid-column:6!important;grid-row:1!important}
  .season-pos-7{grid-column:7!important;grid-row:1!important}
  .season-pos-8{grid-column:8!important;grid-row:1!important}
  .season-pos-9{grid-column:9!important;grid-row:1!important}
  .season-pos-10{grid-column:10!important;grid-row:1!important}

  /* Chronology turns downward at Week 10 and snakes right-to-left. */
  .season-pos-11{grid-column:10!important;grid-row:2!important}
  .season-pos-12{grid-column:9!important;grid-row:2!important}
  .season-pos-13{grid-column:8!important;grid-row:2!important}
  .season-pos-14{grid-column:7!important;grid-row:2!important}
  .season-pos-15{grid-column:6!important;grid-row:2!important}
  .season-pos-16{grid-column:5!important;grid-row:2!important}
  .season-pos-17{grid-column:4!important;grid-row:2!important}
  .season-pos-18{grid-column:3!important;grid-row:2!important}
  .season-pos-19{grid-column:2!important;grid-row:2!important}
  .season-pos-20{grid-column:1!important;grid-row:2!important}

  .season-map-stage .tracker-copy{
    width:100%;
    padding:0 2px;
  }

  .season-map-stage .tracker-copy strong{
    display:block;
    font-size:.56rem!important;
    line-height:1.08!important;
    white-space:normal;
    overflow-wrap:normal;
  }

  .season-map-stage .tracker-state{
    display:block;
    margin-top:3px;
    font-size:.49rem!important;
    line-height:1.05;
  }

  /* Re-enable the explicit v1.1e1 arrow path at desktop widths. */
  .season-map-connector{
    display:block!important;
  }
}

/* On narrow screens we favor readability rather than squeezing ten nodes.
   The full desktop snake remains the canonical presentation. */
@media (max-width:760px){
  .season-map{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
  }
  .season-map-stage{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .season-map-connector{
    display:none!important;
  }
}


/* ==========================================================================
   v1.1e3 — League Home cleanup from visual review
   ========================================================================== */

/* Standalone Home: defensive visibility isolation. */
body:has(#home-workspace:not([hidden])) .bracket-stage,
body:has(#home-workspace:not([hidden])) #weekly-picks-workspace{
  display:none!important;
}

/* Keep horizontal snake connectors in the whitespace between node circles.
   Labels sit below the path; the Week 10 turn begins at the node and travels
   down the far-right gutter, avoiding both Week 10 and Week 11 text. */
@media (min-width:761px){
  .season-map{
    row-gap:52px!important;
  }
  .season-map-stage{
    padding-bottom:0;
  }
  .season-map-connector{
    top:8px!important;
  }
  .season-map-connector.turn-down{
    top:8px!important;
    left:calc(50% + 1px)!important;
    width:3px!important;
    height:85px!important;
    transform:translateX(0);
  }
  .season-map-connector.turn-down .season-map-arrow{
    bottom:-4px!important;
  }

  /* Raise row 2's node/path slightly within its row, preserving a clear
     corridor for the vertical turn on the outside edge. */
  .season-pos-11,.season-pos-12,.season-pos-13,.season-pos-14,.season-pos-15,
  .season-pos-16,.season-pos-17,.season-pos-18,.season-pos-19,.season-pos-20{
    align-self:start;
  }
}

/* Your Standing typography should mirror the visual hierarchy of the
   existing bracket summary card: status headline + secondary description. */
.home-standing-half strong,
#home-regular-standing-status,
#home-standing-status{
  font-size:1.08rem!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.015em;
}
.home-standing-half small,
#home-regular-standing-detail,
#home-standing-detail{
  font-size:.72rem!important;
  line-height:1.35!important;
  color:#8295aa!important;
  font-weight:600;
}


/* ==========================================================================
   v1.1e4 — Final League Home cleanup
   ========================================================================== */

/* The old postseason Conference Champions / Your Picks panel is intentionally
   removed from League Home. Home now focuses on season position, bracket
   summary, and the split Regular Season/Postseason standing card. */

/* Week 10 -> Week 11 uses a three-segment elbow:
   Week 10 node -> right gutter -> down -> left into Week 11 node.
   The vertical segment therefore never passes through either label stack. */
@media (min-width:761px){
  .season-pos-10{
    overflow:visible!important;
  }

  .season-pos-10 .season-map-connector.turn-down{
    display:block!important;
    position:absolute!important;
    top:8px!important;
    left:calc(50% + 9px)!important;
    width:calc(50% + 20px)!important;
    height:3px!important;
    background:#3b82f6!important;
    opacity:.36!important;
    overflow:visible!important;
  }

  /* Vertical leg in the outside-right gutter. */
  .season-pos-10 .season-map-connector.turn-down::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:3px;
    height:84px;
    background:#3b82f6;
  }

  /* Bottom leg comes left toward Week 11 node. */
  .season-pos-10 .season-map-connector.turn-down::after{
    content:"";
    position:absolute;
    top:81px;
    right:0;
    width:calc(50% + 20px);
    height:3px;
    background:#3b82f6;
  }

  /* Arrow points left on the bottom leg, immediately before Week 11. */
  .season-pos-10 .season-map-connector.turn-down .season-map-arrow{
    position:absolute!important;
    top:77px!important;
    left:-2px!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    border-top:5px solid transparent!important;
    border-bottom:5px solid transparent!important;
    border-left:0!important;
    border-right:7px solid currentColor!important;
  }

  .season-pos-10[data-state="complete"] .season-map-connector.turn-down,
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down::before,
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down::after{
    background:#22c55e!important;
    opacity:.76!important;
  }
}

/* Supporting standing copy is normal weight, matching the bracket helper text. */
#home-standing-detail,
#home-regular-standing-detail,
.home-standing-half small{
  font-weight:400!important;
}


/* ==========================================================================
   v1.1e5 — DOM + navigation integrity
   ========================================================================== */
#home-workspace[hidden],
#weekly-picks-workspace[hidden],
.bracket-stage[hidden],
#leaderboard-workspace[hidden]{
  display:none!important;
  pointer-events:none!important;
}

#home-workspace:not([hidden]),
#weekly-picks-workspace:not([hidden]),
.bracket-stage:not([hidden]),
#leaderboard-workspace:not([hidden]){
  pointer-events:auto;
}


/* ==========================================================================
   v1.1e6 — Home Weekly navigation + clean season snake elbow
   ========================================================================== */

/* Three purposeful Home cards: Weekly Pick'em, Your Bracket, Your Standing. */
.home-summary-grid{
  grid-template-columns:.9fr .9fr 1.35fr!important;
}

/* Replace the Week 10 connector with a self-contained elbow that lives
   entirely in the right-side gutter. The screenshot showed the previous
   arrowhead and final segment escaping the card boundary. */
@media (min-width:761px){
  .season-pos-10 .season-map-connector.turn-down{
    display:block!important;
    position:absolute!important;
    top:8px!important;
    left:calc(50% + 9px)!important;
    width:calc(50% + 12px)!important;
    height:3px!important;
    background:#3b82f6!important;
    opacity:.36!important;
    overflow:visible!important;
  }

  .season-pos-10 .season-map-connector.turn-down::before{
    content:""!important;
    position:absolute!important;
    right:0!important;
    top:0!important;
    width:3px!important;
    height:103px!important;
    background:#3b82f6!important;
  }

  .season-pos-10 .season-map-connector.turn-down::after{
    content:""!important;
    position:absolute!important;
    right:0!important;
    top:100px!important;
    width:calc(50% + 12px)!important;
    height:3px!important;
    background:#3b82f6!important;
  }

  .season-pos-10 .season-map-connector.turn-down .season-map-arrow{
    display:block!important;
    position:absolute!important;
    top:96px!important;
    left:-1px!important;
    right:auto!important;
    bottom:auto!important;
    width:0!important;
    height:0!important;
    transform:none!important;
    border-top:5px solid transparent!important;
    border-bottom:5px solid transparent!important;
    border-left:0!important;
    border-right:7px solid currentColor!important;
    color:#3b82f6!important;
  }

  .season-pos-10[data-state="complete"] .season-map-connector.turn-down,
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down::before,
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down::after{
    background:#22c55e!important;
    opacity:.76!important;
  }
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down .season-map-arrow{
    color:#22c55e!important;
  }
}

@media(max-width:1050px){
  .home-summary-grid{grid-template-columns:1fr!important}
}


/* ==========================================================================
   v1.1e7 — Canonical Season Snake Turn
   User-approved geometry from marked-up League Home screenshot.
   ========================================================================== */
@media (min-width:761px){

  /* Top-row path terminates at Week 10. */
  .season-pos-10 .season-map-connector.turn-down{
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    top:8px!important;
    left:50%!important;
    right:auto!important;
    width:3px!important;
    height:103px!important;
    transform:translateX(-50%)!important;
    background:#3b82f6!important;
    opacity:.36!important;
    overflow:visible!important;
  }

  /* Kill every inherited gutter/elbow segment from earlier iterations. */
  .season-pos-10 .season-map-connector.turn-down::before,
  .season-pos-10 .season-map-connector.turn-down::after{
    content:none!important;
    display:none!important;
  }

  /* Arrow points straight down into the Week 11 node. */
  .season-pos-10 .season-map-connector.turn-down .season-map-arrow{
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:-1px!important;
    width:0!important;
    height:0!important;
    transform:translateX(-50%)!important;
    border-left:5px solid transparent!important;
    border-right:5px solid transparent!important;
    border-top:7px solid currentColor!important;
    border-bottom:0!important;
    color:#3b82f6!important;
  }

  /* Week 11 begins the bottom-row path leftward. There is no right-side
     extension beyond the Week 11 node. */
  .season-pos-11 .season-map-connector.reverse{
    left:auto!important;
    right:calc(50% + 9px)!important;
    width:calc(100% - 12px)!important;
  }

  .season-pos-10[data-state="complete"] .season-map-connector.turn-down{
    background:#22c55e!important;
    opacity:.76!important;
  }
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down .season-map-arrow{
    color:#22c55e!important;
  }
}


/* ==========================================================================
   v1.1e8 — Surgical League Home corrections
   ========================================================================== */

/* Week 10 -> Week 11:
   The connector intentionally begins BELOW the Week 10 label/status block.
   Nothing is drawn from the Week 10 node through its text. The visible
   segment then runs straight down and terminates with a downward arrow at
   Week 11. All horizontal row geometry remains unchanged. */
@media (min-width:761px){
  .season-pos-10 .season-map-connector.turn-down{
    display:block!important;
    position:absolute!important;
    z-index:1!important;

    /* Begin below "Week 10 / Upcoming". */
    top:52px!important;
    left:50%!important;
    right:auto!important;

    width:3px!important;
    height:52px!important;

    transform:translateX(-50%)!important;
    background:#3b82f6!important;
    opacity:.36!important;
    overflow:visible!important;
  }

  /* Remove every inherited elbow/gutter segment. */
  .season-pos-10 .season-map-connector.turn-down::before,
  .season-pos-10 .season-map-connector.turn-down::after{
    content:none!important;
    display:none!important;
  }

  /* Direction arrow sits at the end of the visible connector, just above
     the Week 11 node. */
  .season-pos-10 .season-map-connector.turn-down .season-map-arrow{
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:-2px!important;

    width:0!important;
    height:0!important;
    transform:translateX(-50%)!important;

    border-left:5px solid transparent!important;
    border-right:5px solid transparent!important;
    border-top:7px solid currentColor!important;
    border-bottom:0!important;
    color:#3b82f6!important;
  }

  .season-pos-10[data-state="complete"] .season-map-connector.turn-down{
    background:#22c55e!important;
    opacity:.76!important;
  }
  .season-pos-10[data-state="complete"] .season-map-connector.turn-down .season-map-arrow{
    color:#22c55e!important;
  }
}


/* ==========================================================================
   v1.1e9 — Competition Progress: connector lines only
   ========================================================================== */

/* Direction is already communicated by the snake geometry. Remove all
   arrowheads from Competition Progress while preserving every flow line. */
.season-map .season-map-arrow{
  display:none!important;
}


/* ==========================================================================
   v1.1e10 — Remove final Week 10 -> Week 11 arrowhead
   ========================================================================== */

/* The special turn-down connector had its own later arrow override.
   Suppress it explicitly while preserving the vertical connector line. */
.season-pos-10 .season-map-connector.turn-down .season-map-arrow{
  display:none!important;
  border:0!important;
  width:0!important;
  height:0!important;
}


/* ==========================================================================
   v1.1e11 — League Home summary-card typography parity
   ========================================================================== */

/* Weekly Pick'em, Your Bracket, and Your Standing supporting copy all use
   the same secondary-text treatment. */
#home-weekly-nav-detail,
#home-bracket-detail,
#home-regular-standing-detail,
#home-standing-detail{
  font-size:.72rem!important;
  line-height:1.35!important;
  font-weight:400!important;
  color:#8295aa!important;
}


/* ==========================================================================
   v1.1f4 — Platform Admin spreadsheet import review
   ========================================================================== */
.platform-import-review{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(7,14,25,.38);
}
.platform-import-review-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.platform-import-review-heading>div{
  display:grid;
  gap:3px;
}
.platform-import-review-heading strong{
  font-size:.86rem;
  color:#eef4fa;
}
.platform-import-review-heading span{
  font-size:.66rem;
  color:#8295aa;
}
.platform-import-count{
  flex:0 0 auto;
  font-size:.68rem!important;
  font-weight:900;
  color:#cbd5e1!important;
  padding:5px 8px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:999px;
}
.platform-import-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.platform-import-filters,
.platform-import-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.platform-import-filters .weekly-secondary-btn.is-active{
  border-color:rgba(96,165,250,.7);
  color:#dbeafe;
  background:rgba(37,99,235,.12);
}
.platform-import-message{
  min-height:18px;
  margin-top:9px;
  font-size:.65rem;
  color:#8295aa;
}
.platform-import-games{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
  max-height:430px;
  overflow:auto;
  padding-right:3px;
}
.platform-import-game{
  display:grid;
  grid-template-columns:20px 95px minmax(0,1fr);
  grid-template-areas:
    "check time matchup"
    "check venue matchup";
  gap:2px 8px;
  align-items:center;
  width:100%;
  padding:9px;
  border:1px solid rgba(148,163,184,.13);
  border-radius:9px;
  background:#0a1220;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.platform-import-game:hover:not(:disabled){
  border-color:rgba(96,165,250,.42);
}
.platform-import-game.selected{
  border-color:rgba(34,197,94,.64);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.18);
}
.platform-import-game:disabled{
  cursor:default;
  opacity:.66;
}
.platform-import-game.unresolved{
  border-color:rgba(248,113,113,.28);
}
.platform-import-check{
  grid-area:check;
  width:18px;
  height:18px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:5px;
  display:grid;
  place-items:center;
  font-size:.66rem;
  font-weight:950;
  color:#4ade80;
}
.platform-import-game.selected .platform-import-check{
  border-color:#22c55e;
  background:rgba(34,197,94,.12);
}
.platform-import-time{
  grid-area:time;
  font-size:.61rem;
  font-weight:850;
  color:#cbd5e1;
}
.platform-import-matchup{
  grid-area:matchup;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:5px;
  row-gap:2px;
}
.platform-import-matchup strong{
  font-size:.72rem;
  line-height:1.1;
  color:#eef4fa;
}
.platform-import-matchup small{
  font-size:.52rem;
  color:#71849a;
  text-align:right;
  text-transform:uppercase;
  font-weight:850;
}
.platform-import-matchup em{
  grid-column:1/-1;
  font-size:.52rem;
  color:#5f7389;
  font-style:normal;
  text-transform:uppercase;
  font-weight:800;
}
.platform-import-rank{
  display:inline-block;
  margin-right:4px;
  color:#fbbf24;
}
.platform-import-venue{
  grid-area:venue;
  font-size:.55rem;
  color:#63768c;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:900px){
  .platform-import-games{grid-template-columns:1fr}
}


/* ==========================================================================
   v1.1f5 — Finalized results + consistent result badge placement
   ========================================================================== */

.weekly-game-card{
  position:relative!important;
}

/* WIN / LOSS always occupies the same top-right position regardless of
   matchup layout, team-name length, home/away selection, or ranking label. */
.weekly-game-card .weekly-result-badge{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  left:auto!important;
  margin:0!important;
  z-index:4!important;
}

/* Reserve visual breathing room so long kickoff/site metadata cannot collide
   with the fixed result badge. */
.weekly-game-card .weekly-game-meta{
  padding-right:62px!important;
}

.platform-result-locked{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.platform-result-locked strong{
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.platform-result-locked span{
  font-size:.66rem;
}


/* ==========================================================================
   v1.2.2 — Platform Administration Account-Home Navigation
   ========================================================================== */
.platform-admin-home-section{
  margin:24px 0;
  padding:22px;
  border:1px solid rgba(37,99,235,.24);
  border-radius:18px;
  background:rgba(37,99,235,.045);
}
.platform-admin-home-section .account-section-heading{
  align-items:flex-start;
  gap:18px;
}
.platform-admin-home-intro{
  margin:5px 0 0;
  font-size:.86rem;
  line-height:1.45;
  opacity:.72;
}
.platform-admin-home-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.30);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
}
.platform-admin-home-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.platform-admin-home-card{
  width:100%;
  text-align:left;
}
.platform-admin-home-card .account-action-icon{
  min-width:42px;
  font-size:.72rem;
  font-weight:900;
}
.platform-admin-home-note{
  margin:13px 2px 0;
  font-size:.72rem;
  line-height:1.45;
  opacity:.62;
}
@media(max-width:760px){
  .platform-admin-home-grid{grid-template-columns:1fr;}
}


/* ==========================================================================
   v1.2.4 — Prelaunch UI / Authority Cleanup
   ========================================================================== */

/* Completed season nodes may remain green, but flow connectors always retain
   the Claim the Natty blue progression color. */
.season-map-stage[data-state="complete"] .season-map-connector{
  background:#3b82f6!important;
  opacity:.56!important;
}
.season-map-stage[data-state="complete"] .season-map-arrow{
  color:#3b82f6!important;
}

/* Weekly card metadata has three stable alignment lanes:
   kickoff left, neutral-site label centered, result badge top-right. */
.weekly-game-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:9px!important;
}
.weekly-game-meta .weekly-kickoff{
  grid-column:1;
  justify-self:start;
  min-width:0;
}
.weekly-game-meta .weekly-site-label{
  grid-column:2;
  justify-self:center;
  text-align:center;
  white-space:nowrap;
  margin:0!important;
}
.weekly-game-meta .weekly-result-badge{
  grid-column:3;
  justify-self:end;
  margin-left:0!important;
  white-space:nowrap;
}

/* When no neutral-site label/result is present, preserve left alignment
   without allowing anonymous spans to shift the result lane. */
.weekly-game-meta > .weekly-result-badge:nth-child(2){
  grid-column:3;
}

@media(max-width:560px){
  .weekly-game-meta{
    grid-template-columns:minmax(0,1fr) auto!important;
    row-gap:4px;
  }
  .weekly-game-meta .weekly-kickoff{grid-column:1;}
  .weekly-game-meta .weekly-result-badge,
  .weekly-game-meta > .weekly-result-badge:nth-child(2){
    grid-column:2;
  }
  .weekly-game-meta .weekly-site-label{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
  }
}

/* v1.2.8 Weekly Winners */
.regular-season-table{min-width:max-content}
.regular-season-table th,.regular-season-table td{white-space:nowrap}
.weekly-record-cell{text-align:center;min-width:74px}
.weekly-winner-trophy{display:inline-block;margin-left:4px;font-size:.9em;vertical-align:baseline}

/* v1.2.8b — League Home announcement + hierarchy refinement */
.home-league-summary{align-items:center;margin-bottom:18px}
.home-league-identity{flex:0 1 300px;min-width:180px}
.home-announcement{flex:0 1 560px;min-width:0;max-width:560px;padding:3px 0 3px 16px;border-left:3px solid rgba(59,130,246,.72)}
.home-announcement-top{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:5px}
.home-announcement-kicker{font-size:.58rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#71849a}
.home-announcement-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.home-announcement-actions small{font-size:.62rem;font-weight:700;color:#64788e}
.home-announcement p{margin:0;font-size:.78rem;line-height:1.4;font-weight:700;color:#e5edf5}
.home-announcement a{display:inline-block;margin-top:5px;font-size:.7rem;font-weight:850;color:#60a5fa;text-decoration:none}
.home-announcement a:hover{text-decoration:underline}
.home-announcement-edit,.home-announcement-add{border:1px solid rgba(96,165,250,.24);border-radius:7px;background:rgba(30,64,175,.08);color:#93c5fd;font:inherit;font-size:.66rem;font-weight:850;cursor:pointer}
.home-announcement-edit{padding:4px 8px}.home-announcement-add{padding:7px 10px;white-space:nowrap}
.home-announcement-edit:hover,.home-announcement-add:hover{border-color:rgba(96,165,250,.48);background:rgba(30,64,175,.16)}
.league-announcement-modal-panel textarea{width:100%;resize:vertical;min-height:92px}
.league-announcement-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:18px}
.league-announcement-clear{margin-right:auto;border:0;background:transparent;color:#f87171;font-size:.72rem;font-weight:800;cursor:pointer}
.home-summary-grid{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.35fr)}
.home-big-four{margin-top:16px}
@media(max-width:900px){.home-summary-grid{grid-template-columns:1fr}.home-league-summary{align-items:flex-start}.home-announcement{flex-basis:100%}}
@media(max-width:760px){.home-announcement{width:100%;flex-basis:auto;padding-left:14px}.home-announcement-add{align-self:flex-start}.league-announcement-modal-actions{flex-wrap:wrap}}

/* v1.2.8b final League Home polish */
/* Keep the Commissioner-only announcement edit affordance out of the
   announcement header lane so League Access controls cannot crowd it. */
.home-announcement{position:relative}
.home-announcement-edit{
  position:absolute;
  left:-58px;
  top:-1px;
  padding:4px 8px;
}



/* v1.2.8b production hotfix 2 — mobile masthead flow
   NOTE: both the league identity and announcement use flex-basis values on
   desktop. Once the masthead becomes flex-direction:column, those bases
   become vertical heights unless explicitly reset. */
@media(max-width:760px){
  .home-league-summary{gap:18px}
  .home-league-identity{flex:0 0 auto;min-width:0;width:100%}
  .home-announcement{flex:0 0 auto;width:100%;max-width:none}
  .home-announcement-edit{position:static;margin-right:2px}
  .home-announcement-top{flex-wrap:wrap}
}

/* v1.2.8c — private payout profile + Commissioner roster */
.profile-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-field span small{font-size:.72em;font-weight:700;color:#7b8ba0}
.league-roster-panel{max-width:760px}
.league-roster-summary{margin:2px 0 14px;color:#7f91a7;font-size:.72rem;font-weight:800}
.league-roster-table-wrap{overflow-x:auto;border:1px solid rgba(124,146,170,.18);border-radius:10px;background:rgba(7,18,32,.35)}
.league-roster-table{width:100%;border-collapse:collapse;min-width:560px}
.league-roster-table th{padding:10px 14px;text-align:left;color:#71849a;font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(124,146,170,.18)}
.league-roster-table td{padding:12px 14px;color:#dfe8f2;font-size:.76rem;font-weight:700;border-bottom:1px solid rgba(124,146,170,.12);vertical-align:middle}
.league-roster-table tr:last-child td{border-bottom:0}
.league-roster-table td strong{display:block;color:#f1f5f9;font-size:.8rem}
.league-roster-table td small{display:block;margin-top:2px;color:#6f8298;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.league-roster-table a{color:#60a5fa;text-decoration:none;font-weight:850}
.league-roster-table a:hover{text-decoration:underline}
.league-roster-empty{color:#66798e}
.league-roster-loading{text-align:center!important;color:#71849a!important;padding:22px!important}
@media(max-width:620px){.profile-name-grid{grid-template-columns:1fr}.league-roster-panel{max-width:none}}


/* v1.2.8c final pre-deploy polish — announcement editing + League Access
   Keep announcement editing visibly attached to the announcement itself,
   and give Commissioner access controls a stable two-row layout. */
.home-announcement{position:relative}
.home-announcement-footer{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  margin-top:4px;
}
.home-announcement-footer .home-announcement-edit{
  position:static;
  flex:0 0 auto;
  margin:0;
  padding:3px 7px;
}
.home-announcement-footer .home-announcement-edit:not([hidden]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.home-announcement-footer a{margin-top:0}

/* Commissioner League Access: copy stays left; invitation/roster controls
   share the upper action lane; destructive action is visually separated. */
.league-access-inline{
  min-width:430px;
  max-width:550px;
}
.league-access-panel{
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto;
  grid-template-areas:
    "copy actions"
    "copy danger";
  align-items:center;
  column-gap:14px;
  row-gap:7px;
  width:100%;
}
.league-access-copy{
  grid-area:copy;
  min-width:0;
  max-width:210px;
}
.league-access-code-wrap{
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  flex-wrap:nowrap;
}
.league-access-panel > .league-delete-btn{
  grid-area:danger;
  justify-self:end;
  align-self:start;
  margin:0;
  padding:6px 10px;
}

@media(max-width:980px){
  .league-access-inline{min-width:0;max-width:none;width:100%}
  .league-access-panel{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

@media(max-width:760px){
  .league-access-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "actions"
      "danger";
    align-items:start;
    row-gap:10px;
  }
  .league-access-copy{max-width:none}
  .league-access-code-wrap{justify-content:flex-start;flex-wrap:wrap}
  .league-access-panel > .league-delete-btn{justify-self:start}
  .home-announcement-footer{flex-wrap:wrap}
}

/* v1.2.8c final responsive masthead pass — intermediate desktop/tablet
   At condensed desktop widths, preserve readable League Announcement and
   Commissioner League Access by moving league identity to its own row. */
@media (min-width:761px) and (max-width:1180px){
  .home-league-summary{
    display:grid;
    grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
    grid-template-areas:
      "identity identity"
      "announcement access";
    align-items:start;
    gap:18px 24px;
  }

  .home-league-identity{
    grid-area:identity;
    min-width:0;
    width:100%;
  }

  .home-announcement,
  .home-announcement-add{
    grid-area:announcement;
    width:100%;
    max-width:none;
    min-width:0;
  }

  .league-access-inline{
    grid-area:access;
    width:100%;
    min-width:0;
    max-width:none;
  }
}

/* v1.2.8e — Weekly Tiebreaker */
.weekly-tiebreaker-card{margin-top:16px;border:1px solid rgba(96,165,250,.24);border-radius:14px;background:rgba(15,23,42,.72);padding:14px}
.weekly-tiebreaker-card h3{margin:4px 0 6px;font-size:1rem}.weekly-tiebreaker-card p{margin:0 0 12px;color:#94a3b8;font-size:.78rem}
.weekly-tiebreaker-card label{display:flex;flex-direction:column;gap:5px;max-width:260px;color:#8292a6;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.weekly-tiebreaker-card input,.platform-tiebreaker-editor input,.platform-tiebreaker-editor textarea{background:#0b1220;color:#e5edf8;border:1px solid rgba(148,163,184,.22);border-radius:8px;padding:9px}
.weekly-tiebreaker-card input{font-size:1rem;font-weight:900}.weekly-tiebreaker-status{margin-top:9px;color:#93c5fd;font-size:.72rem;font-weight:800}
.platform-tiebreaker-editor{margin-top:14px;padding-top:13px;border-top:1px solid rgba(148,163,184,.12)}
.platform-tiebreaker-toggle{display:flex;align-items:center;gap:7px;color:#dce8f7;font-size:.75rem;font-weight:900;margin-bottom:9px}.platform-tiebreaker-toggle input{width:auto}
.platform-tiebreaker-question-label{display:flex;flex-direction:column;gap:5px;color:#8292a6;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.platform-tiebreaker-question-label textarea{resize:vertical;min-height:58px;font:inherit;text-transform:none;letter-spacing:normal}
.platform-tiebreaker-actions{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin-top:9px}.platform-tiebreaker-actions label{display:flex;flex-direction:column;gap:5px;color:#8292a6;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.platform-tiebreaker-note{margin:8px 0 0;color:#64748b;font-size:.7rem}
.regular-season-table th .weekly-tb-header,.weekly-tb-cell{display:block;margin-top:3px;font-size:.58rem;font-weight:800;color:#93c5fd}.weekly-tb-cell{color:#8292a6}.weekly-record-cell .weekly-winner-trophy{vertical-align:middle}
@media(max-width:720px){.platform-tiebreaker-actions{align-items:stretch;flex-direction:column}.weekly-tiebreaker-card label{max-width:none}}

/* v1.2.8f — sortable weekly leaderboard columns */
.weekly-sort-heading{padding:0!important}
.weekly-sort-button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;min-width:74px;width:100%;height:100%;padding:10px 12px;cursor:pointer;white-space:nowrap}
.weekly-sort-button:hover,.weekly-sort-button:focus-visible{background:rgba(96,165,250,.10);color:#dbeafe;outline:none}
.weekly-sort-button.is-active{color:#bfdbfe;background:rgba(96,165,250,.08)}
.weekly-sort-indicator{display:inline-block;margin-left:5px;color:#8292a6;font-size:.72em;vertical-align:middle}
.weekly-sort-button.is-active .weekly-sort-indicator{color:#93c5fd}
.weekly-sort-button .weekly-tb-header{pointer-events:none}

/* v1.2.8f1 — post-lock Weekly Pick visibility */
.weekly-record-picks-button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:2px 4px;margin:-2px -4px;border-radius:6px;cursor:pointer}
.weekly-record-picks-button:hover,.weekly-record-picks-button:focus-visible{background:rgba(96,165,250,.12);color:#dbeafe;outline:1px solid rgba(96,165,250,.28)}
.weekly-public-picks-dialog{width:min(1040px,calc(100vw - 28px));max-height:90vh;padding:0;border:1px solid rgba(148,163,184,.22);border-radius:16px;background:#0b1220;color:#e5edf8;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.weekly-public-picks-dialog::backdrop{background:rgba(2,6,23,.78)}
.weekly-public-picks-shell{padding:18px}.weekly-public-picks-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(148,163,184,.14);padding-bottom:13px}.weekly-public-picks-header h3{margin:4px 0 4px}.weekly-public-picks-header p{margin:0;color:#94a3b8;font-size:.78rem}.weekly-public-picks-close{appearance:none;border:0;background:transparent;color:#cbd5e1;font-size:1.6rem;line-height:1;cursor:pointer;padding:3px 7px;border-radius:7px}.weekly-public-picks-close:hover{background:rgba(148,163,184,.12)}
.weekly-public-picks-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0}.weekly-public-picks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:66vh;overflow:auto;padding-right:3px}.weekly-public-team{cursor:default}.weekly-public-team:hover{transform:none}
@media(max-width:760px){.weekly-public-picks-shell{padding:13px}.weekly-public-picks-grid{grid-template-columns:1fr;max-height:68vh}.weekly-public-picks-nav .weekly-secondary-btn{flex:1;padding-left:8px;padding-right:8px}.weekly-public-picks-header h3{font-size:1rem}}


/* v1.2.8f1 — one-time What's New release modal */
.ctn-whats-new-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.78);backdrop-filter:blur(6px)}
.ctn-whats-new-modal[hidden]{display:none}
.ctn-whats-new-panel{width:min(94vw,620px);max-height:min(88vh,760px);overflow:auto;background:linear-gradient(160deg,rgba(30,41,59,.99),rgba(10,17,31,.99));border:1px solid rgba(148,163,184,.24);border-radius:20px;box-shadow:0 30px 85px rgba(0,0,0,.65)}
.ctn-whats-new-heading{padding:22px 24px 18px;border-bottom:1px solid rgba(148,163,184,.13)}
.ctn-whats-new-heading h3{margin:5px 0 7px;color:#fff;font-size:1.28rem}
.ctn-whats-new-heading p{margin:0;color:#94a3b8;line-height:1.5}
.ctn-whats-new-items{display:grid;gap:0;padding:4px 24px}
.ctn-whats-new-items>div{display:grid;gap:5px;padding:15px 0;border-bottom:1px solid rgba(148,163,184,.10)}
.ctn-whats-new-items>div:last-child{border-bottom:0}
.ctn-whats-new-items strong{color:#e2e8f0;font-size:.95rem}
.ctn-whats-new-items span{color:#94a3b8;font-size:.86rem;line-height:1.5}
.ctn-whats-new-actions{display:flex;justify-content:flex-end;padding:16px 24px 22px;border-top:1px solid rgba(148,163,184,.13)}
.ctn-whats-new-actions .weekly-primary-btn{min-width:110px}
@media(max-width:640px){.ctn-whats-new-modal{padding:12px}.ctn-whats-new-heading,.ctn-whats-new-items,.ctn-whats-new-actions{padding-left:18px;padding-right:18px}.ctn-whats-new-actions .weekly-primary-btn{width:100%}}