:root{
  --brand:#7fee64;
  --bg:#0a0a0a;
  --text:#e8f5e9;
  --muted:#9aa19c;
  --card:#101313;
  --line:#203220;
  --nav:#0f1410;
  --shutter:#0504aa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:radial-gradient(1200px 700px at 50% -10%,#0f1a0f 0%,#0d120d 40%,#0a0a0a 100%);
  line-height:1.6;
}
a{color:var(--text);text-decoration:none}
img{max-width:100%;display:block}

/* shutter */
.shutter{position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none}
.shutter .panel{flex:1;background:var(--shutter);animation:shUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.shutter .panel.right{animation-delay:.08s}
@keyframes shUp{to{transform:translateY(-100%)}}

/* header/nav */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:color-mix(in oklab,var(--nav),transparent 35%);border-bottom:1px solid color-mix(in oklab,var(--brand),#202020 80%)}
.nav{max-width:1200px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:36px;height:36px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#92ff7c 0%,#4be66c 35%,#18b04a 70%);box-shadow:0 8px 24px rgba(127,238,100,.35)}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.brand span{font-weight:800;letter-spacing:.3px}
.nav-links a{padding:8px 12px;border-radius:10px}
.nav-links a:hover{background:#161a16}
.cta{background:var(--brand);color:#032004;font-weight:800;padding:10px 14px!important;border-radius:14px;box-shadow:0 6px 20px rgba(127,238,100,.35)}

/* hero */
.hero{max-width:1200px;margin:30px auto 0;padding:30px 20px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px}
.hero h1{font-size:clamp(2rem,2.6vw + 1rem,4rem);margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 16px}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:10px;font-weight:700;padding:12px 16px;border-radius:14px;border:1px solid #1f3321;background:#0f1910;color:#c8ffc0}
.button.primary{background:var(--brand);color:#032004;border:0}
.button:hover{transform:translateY(-1px)}

/* angled field */
.field-wrap{width:100%;display:grid;place-items:center;perspective:900px;margin:10px 0 0}
#fieldCanvas{width:min(1400px,98vw);aspect-ratio:16/6;transform:rotateX(20deg) rotateZ(-18deg);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.55);border:2px solid #1c3720;background:#0f2d12}

/* sections/cards */
.section{max-width:1200px;margin:30px auto 60px;padding:0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}

/* calendar (multi-month stack) */
.cal-stack{display:grid;gap:26px}
.calendar{--accent:var(--brand);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.cal-header{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 10px}
.week-legend{color:#9aa19c;font-size:.85rem;padding:0 4px 8px}
.week-legend span{display:inline-block;width:calc(100%/7);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cell{border:1px solid #1e2b1e;border-radius:10px;min-height:88px;padding:6px;font-size:.95rem;color:var(--muted);position:relative;overflow:hidden}
.cell .date{color:#9fc8a0;font-weight:700;font-size:.9rem;position:absolute;top:6px;left:8px}
.event-pill{position:absolute;bottom:8px;left:8px;right:8px;font-size:.85rem;color:#d9ffd6;border:1px solid rgba(127,238,100,.35);border-radius:10px;padding:6px 8px;background:rgba(127,238,100,.10)}

/* keep sign-up lower to avoid collisions */
#signup{margin-top:60px}

/* league */
.league-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:20px}
@media (max-width:950px){.league-layout{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.table th{text-align:left;background:#0e160f}
.logo-slot{width:38px;height:38px;border-radius:9px;border:1px dashed #365b37;display:grid;place-items:center;color:#7fee64}

/* bracket */
.bracket-card svg{width:100%;height:auto;display:block}

/* highlights hub */
.highlight-layout{display:grid;grid-template-columns:320px 1fr;gap:24px}
@media (max-width:950px){.highlight-layout{grid-template-columns:1fr}}
.match-list{display:grid;gap:12px}
.match-item{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#0f1910;cursor:pointer}
.match-item:hover{outline:2px solid rgba(127,238,100,.35)}
.viewer{border:1px solid var(--line);border-radius:18px;padding:8px;min-height:420px;display:grid;align-items:center;justify-items:center}
.viewer .video{width:100%;max-width:900px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line)}

/* footer */
footer{border-top:1px solid #1e2b1e;background:#0a0c0a}
.footer-wrap{max-width:1200px;margin:auto;padding:30px 20px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}
.footer-brand{display:flex;gap:12px;align-items:center}
footer h4{margin:0 0 8px}
footer p,footer a{color:#a9b6ad}
.footer-links,.footer-contacts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-contacts li{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.footer-bottom{max-width:1200px;margin:0 auto;padding:14px 20px;color:#8aa08c;border-top:1px solid #1e2b1e}
@media (max-width:900px){.footer-wrap{grid-template-columns:1fr}.footer-contacts li{grid-template-columns:1fr}}

/*images*/
/* .logo-slot img {
  vertical-align: middle;
  border-radius: 8px;
} */
/* Grid: 2 rows × 4 cols on desktop; names stay on one line */
/* .teams-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(280px, 1fr));
  gap:20px;
  margin-bottom:32px;
}
@media (max-width:1200px){ .teams-grid{ grid-template-columns:repeat(3, minmax(280px, 1fr)); } }
@media (max-width:900px){  .teams-grid{ grid-template-columns:repeat(2, minmax(260px, 1fr)); } }
@media (max-width:560px){  .teams-grid{ grid-template-columns:1fr; } }

Grid: 2×4, then wrap */
.teams-grid{
  display:grid;
  grid-template-columns: repeat(4, 260px);
  gap: 16px;
  margin-bottom:32px;
  justify-content: center;   /* center the grid tracks */
  width: fit-content;        /* grid shrinks to its content width */
  margin-inline: auto;  
  }
@media (max-width:1200px){ .teams-grid{ grid-template-columns:repeat(3,minmax(280px,1fr)); } }
@media (max-width:900px){  .teams-grid{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (max-width:560px){  .teams-grid{ grid-template-columns:1fr; } }

.slim-banners .team-card{ min-height:240px; }

/* Card background and layout */
.team-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  color:#fff;
  padding:16px 18px 18px;
  background-color:#111;
  background-image:var(--bg);
  background-repeat:no-repeat;

  /* Fill the card and bias LEFT so the left logo area is visible */
  background-size:cover;
  background-position:left center;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Team name: FULL text, up to TWO lines, then clamp */
.team-name{
  position: absolute; top: 10px; left: 14px; right: 104px;
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 0.9vw + .65rem, 1.25rem);
  line-height: 1.1;
  white-space: nowrap;
  /* overflow: hidden;
  text-overflow: ellipsis; */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Fallback for engines without line-clamp support (older Firefox etc.) */



/* Big logo on top of the background (won't be cropped) */
.team-emblem{
  position:absolute;
  left:22px;                 /* keep it left-heavy */
  bottom:16px;
  height:64%;                /* make it prominent */
  max-height:150px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
  pointer-events:none;
}

/* Circular points badge on the right */
.points-badge.right{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:78px; height:78px; border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.18);
  color:#fff; font-weight:800; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  backdrop-filter:blur(3px); box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.points-badge.right span{ font-size:1.2rem; line-height:1; }
.points-badge.right small{ font-size:.7rem; opacity:.95; }

/* Ensure bracket stays below & shows fully */
.league-layout{ max-width: 1100px;display:block; }
/* .bracket-centered{ margin-top:36px; text-align:center; }
.bracket-centered .bracket-wrap{
  display:flex; justify-content:center; align-items:center;
  width:100%; overflow-x:auto;
}
.bracket-centered svg{ display:block; max-width:100%; height:auto; }