/* Gridiron Slate — modern sportsbook vibe */
:root{
  --bg:#0D1117; --card:#111827; --line:#1F2937; --muted:#9CA3AF; --text:#F3F4F6;
  --accent:#F59E0B; --field:#16A34A; --sky:#38BDF8; --danger:#EF4444; --ok:#22C55E;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;}
.app{min-height:100%;display:flex;flex-direction:column}
.container{width:100%;max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
@media (min-width:900px){ .grid-2{grid-template-columns:2fr 1fr} }

.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#0D1117,rgba(13,17,23,.85));
  border-bottom:1px solid var(--line);backdrop-filter:saturate(120%) blur(6px)}
.header__bar{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand__logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--sky));box-shadow:0 0 0 2px #000 inset}
.header__center{margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:8px}
.week-switch{display:flex;align-items:center;gap:8px;font-weight:600}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);color:var(--text);background:#0B1220;cursor:pointer}
.icon-btn:hover{border-color:#2B384A;transform:translateY(-1px)}
.header__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.badge{font-size:12px;color:#0B1220;background:var(--accent);padding:4px 8px;border-radius:999px;font-weight:700}

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0B1220}
.ticker__inner{display:flex;gap:24px;padding:10px 0;white-space:nowrap;animation:scroll 30s linear infinite}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.ticker__item{color:var(--muted);font-variant-numeric:tabular-nums}
.ticker__item strong{color:var(--text)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card--flat{box-shadow:none}
.card__head{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700}
.card__body{padding:16px 18px}
.card__foot{padding:12px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);color:var(--text);background:#0B1220;cursor:pointer;transition:transform .05s ease, box-shadow .15s ease, border .15s ease}
.btn:hover{transform:translateY(-1px);border-color:#2B384A}
.btn--primary{background:linear-gradient(135deg,var(--accent),#FACC15);color:#0B1220;font-weight:800;border-color:#0000}
.btn--ghost{background:#0B1220}
.btn:disabled{opacity:.5;cursor:not-allowed}

.matchup{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap: nowrap;}
.matchup > .team-chip,
.matchup > .spread-pill {flex: 0 1 auto;}

.team-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#0B1220;border:1px solid var(--line);cursor:pointer;min-width:140px}
.team-chip img{width:24px;height:24px;object-fit:contain}
.team-chip__abbr{font-weight:700;color:var(--text)}
.team-chip--selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,158,11,.25)}
.spread-pill{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:var(--text);background:#0B1220;border:1px dashed #2B384A;padding:10px 16px;border-radius:999px;min-width:78px;text-align:center;font-weight:700}
.meta{display:flex;gap:14px;color:var(--muted);font-size:14px}

.slip{position:sticky;top:88px}
.slip__title{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:800}
.count-pill{background:#0B1220;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted);font-weight:700}
.slip__list{padding:10px 12px}
.slip__item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0B1220;margin-bottom:10px}
.slip__abbr{font-weight:800}
.slip__remove{border:none;background:#1B2331;color:#B0BCD0;border-radius:8px;width:32px;height:32px;cursor:pointer}
.slip__remove:hover{background:#222C3B}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.tr{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.th,.td{padding:12px 14px;text-align:left}
.tr .th:first-child,.tr .td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.tr .th:last-child,.tr .td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.rank{width:56px;text-align:center;font-weight:900;color:#0B1220;background:linear-gradient(135deg,var(--accent),#FDE68A);border-right:1px solid var(--line)}
.tr--leader .rank{background:linear-gradient(135deg,var(--accent),#F59E0B)}
.subtle{color:var(--muted)}

.row{display:flex;align-items:center;gap:12px}
.space-between{display:flex;align-items:center;justify-content:space-between}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}
.w-full{width:100%}
.error{color:var(--danger)}.success{color:var(--ok)}
.hidden{display:none}

/* Prevent container pushing wider than viewport */
#cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}