/* ==========================================================================
   Dugout Fantasy League — front end
   ========================================================================== */

.dfpl{
  --dfpl-gold:#D4AF37;
  --dfpl-champ:#E6CA65;
  --dfpl-cream:#F2EDE3;
  --dfpl-text:#9A9488;
  --dfpl-muted:#8D8778;
  --dfpl-faint:#6B6250;
  --dfpl-panel:#0A0A0A;
  --dfpl-up:#7FB77E;
  --dfpl-down:#C0655C;
  --dfpl-line:rgba(212,175,55,.16);
  --dfpl-cols:44px minmax(0,1fr) 78px 68px 78px;

  border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(150deg,#141210,#0a0a0a 60%);
  font-family:Archivo,system-ui,sans-serif;
  color:var(--dfpl-cream);
}
.dfpl--nomove{--dfpl-cols:44px minmax(0,1fr) 78px 78px}
.dfpl *,.dfpl *::before,.dfpl *::after{box-sizing:border-box}
.dfpl p{margin:0}
.dfpl a{text-decoration:none}

.dfpl__kicker{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--dfpl-gold);
}

/* ---------------------------------------------------------------- header */
.dfpl__head{
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;
  align-items:flex-end;padding:32px 30px 26px;
  border-bottom:1px solid rgba(212,175,55,.2);
}
.dfpl__intro{display:grid;gap:10px;min-width:0}
.dfpl__h{
  margin:0;font-family:'Hanken Grotesk',sans-serif;
  font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.05;
  letter-spacing:-.025em;color:var(--dfpl-cream);
}
.dfpl__p{font-size:14px;line-height:1.7;color:var(--dfpl-text);max-width:52ch}

.dfpl__join{display:grid;gap:12px;min-width:250px}
.dfpl__code{
  border:1px dashed rgba(212,175,55,.4);background:rgba(212,175,55,.05);
  padding:14px 16px;display:grid;gap:6px;
}
.dfpl__code-k{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.24em;color:var(--dfpl-muted);
}
.dfpl__code-v{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;font-weight:700;line-height:1;letter-spacing:.12em;
  color:var(--dfpl-champ);overflow-wrap:anywhere;
}
.dfpl__flag{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;line-height:1.6;letter-spacing:.08em;color:var(--dfpl-faint);
}

.dfpl__btn{
  display:block;text-align:center;
  background:linear-gradient(135deg,var(--dfpl-champ),var(--dfpl-gold));
  color:#0a0a0a;border:0;padding:17px 24px;
  font-size:11px;font-weight:700;letter-spacing:.18em;cursor:pointer;
}
.dfpl__btn:hover{filter:brightness(1.06);color:#0a0a0a}
.dfpl__btn--ghost{
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.34);
  color:var(--dfpl-champ);padding:14px 20px;font-size:10px;letter-spacing:.16em;
}
.dfpl__btn--ghost:hover{background:rgba(212,175,55,.2);color:var(--dfpl-champ);filter:none}
.dfpl__btn--quiet{
  background:transparent;border:1px solid rgba(212,175,55,.28);
  color:var(--dfpl-champ);padding:14px 20px;font-size:10px;letter-spacing:.16em;
}
.dfpl__btn--quiet:hover{background:rgba(212,175,55,.1);color:var(--dfpl-champ);filter:none}

/* ----------------------------------------------------------------- stats */
.dfpl__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--dfpl-line);
}
.dfpl__stat{background:var(--dfpl-panel);padding:20px 22px;display:grid;gap:7px}
.dfpl__stat-k{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.24em;color:var(--dfpl-muted);
}
.dfpl__stat-v{
  font-family:'Hanken Grotesk',sans-serif;font-size:24px;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--dfpl-champ);
}

/* ------------------------------------------------------------- standings */
.dfpl__body{padding:28px 30px 32px}
.dfpl__bar{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;
}
.dfpl__bar .dfpl__kicker{letter-spacing:.3em}
.dfpl__updated{font-size:11px;letter-spacing:.06em;color:var(--dfpl-faint)}

.dfpl__thead,
.dfpl__row{display:grid;grid-template-columns:var(--dfpl-cols);gap:12px;align-items:center}
.dfpl__thead{
  padding:0 18px 12px;
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.22em;color:var(--dfpl-faint);
}
.dfpl--r{text-align:right}

.dfpl__rows{display:grid;gap:1px;background:var(--dfpl-line)}
.dfpl__row{background:var(--dfpl-panel);padding:15px 18px}
.dfpl__row.is-top{background:rgba(212,175,55,.06)}
.dfpl__pos{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.1em;color:var(--dfpl-muted);
}
.dfpl__row.is-top .dfpl__pos{color:var(--dfpl-champ)}
.dfpl__squad{display:grid;gap:3px;min-width:0}
.dfpl__name{
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:700;
  line-height:1.2;letter-spacing:-.01em;color:var(--dfpl-cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dfpl__mgr{font-size:11px;color:var(--dfpl-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfpl__gw{font-size:14px;font-weight:600;color:#B9B2A2}
.dfpl__move{font-size:12px;font-weight:600;color:var(--dfpl-faint)}
.dfpl__move.is-up{color:var(--dfpl-up)}
.dfpl__move.is-down{color:var(--dfpl-down)}
.dfpl__total{
  font-family:'Hanken Grotesk',sans-serif;font-size:16px;font-weight:700;
  color:var(--dfpl-champ);
}
.dfpl__empty{
  padding:26px 18px;background:var(--dfpl-panel);
  font-size:14px;line-height:1.7;color:var(--dfpl-text);
}

/* ---------------------------------------------------------------- footer */
.dfpl__foot{
  margin-top:24px;padding-top:22px;border-top:1px solid rgba(212,175,55,.2);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
}
.dfpl__how{font-size:13px;line-height:1.7;color:var(--dfpl-muted);max-width:56ch}
.dfpl__acts{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:767px){
  .dfpl{--dfpl-cols:30px minmax(0,1fr) 46px 58px}
  .dfpl__head{padding:24px 18px 20px}
  .dfpl__join{min-width:0;width:100%}
  .dfpl__body{padding:22px 18px 26px}
  .dfpl__thead{padding:0 12px 12px}
  .dfpl__row{padding:14px 12px}
  /* the movement column is the first thing to go on a narrow screen */
  .dfpl__move{display:none}
  .dfpl__acts .dfpl__btn{flex:1 1 100%}
}