/* =========================
   Base Reset
========================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================
   Variables
========================= */
:root{
  --bg:#0B0F14;
  --ink:#E9EEF5;
  --muted:#9FAAB5;
  --blue:#0077FF;
  --green:#00D68F;
  --purple:#9B5CFF;
  --warn:#FFB020;
  --danger:#FF3C41;

  --rarity-common:#B7C3D0;
  --rarity-rare:#2AA3FF;
  --rarity-epic:#9B5CFF;
  --rarity-legendary:#F59E0B;

  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;

  --radius-btn:12px;
  --radius-card:16px;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 6px 18px rgba(0,0,0,.45);

  --container-max:1200px;
}

/* =========================
   Global Styles
========================= */
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4, h5, h6{
  margin: 0 0 var(--space-3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
h1{ font-size: 36px; }
h2{ font-size: 28px; }
h3{ font-size: 22px; }
h4{ font-size: 18px; }
p { margin: 0 0 var(--space-3); font-size: 16px; color: var(--muted); }
small{ font-size: 14px; color: var(--muted); }

a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute; left: -9999px; top: auto;
  background:#000; color:#fff; padding:8px 12px; border-radius:8px; z-index:1000;
}
.skip-link:focus{ left:16px; top:16px; }

/* =========================
   Header and Navigation
========================= */
header{
  display:flex; justify-content:space-between; align-items:center;
  background: var(--bg);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-1);
}
header h1{ font-size: 24px; margin: 0; }

nav ul{
  display:flex; gap:24px; list-style:none; margin:0; padding:0;
  align-items: center;
}
nav a{
  color: var(--ink); font-weight:600; text-decoration:none;
  padding:6px 10px; border-radius: var(--radius-btn);
  transition: background .2s;
}
nav a:hover, nav a:focus{ background: rgba(255,255,255,0.1); }
nav a[aria-current="page"]{ color: var(--blue); font-weight:700; }

footer{
  text-align:center; padding:24px; margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:14px; color: var(--muted);
}

/* =========================
   Profile Dropdown
========================= */
.profile-menu { position: relative; }
.profile-btn { background: transparent; border: none; cursor: pointer; padding: 0; }
.profile-btn img { width: 28px; height: 28px; border-radius: 50%; }
.dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  background: rgba(15, 20, 25, 0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 160px;
  z-index: 1000;
}
.dropdown li { margin: 0; }
.dropdown a,
.dropdown button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.dropdown a:hover,
.dropdown button:hover { background: rgba(255,255,255,0.08); }
.hidden { display: none; }

/* =========================
   Buttons
========================= */
.btn, button, .btn-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: var(--radius-btn);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-weight:600;
}
.btn, button{
  background: var(--blue); color:#001627; box-shadow: var(--shadow-1);
}
.btn:hover, button:hover{ filter: brightness(1.05); }
.btn[disabled], button[disabled]{ opacity:.5; cursor:not-allowed; }

.btn-link{
  background: transparent; color: var(--ink);
  border:1px solid rgba(255,255,255,0.15);
}
.btn-link:hover{ background: rgba(255,255,255,0.08); }

/* =========================
   Utilities
========================= */
.section{ margin-top: 32px; }
.stack > * + * { margin-top: 16px; }
.cluster{ display:flex; gap:16px; }
.center{ text-align:center; }
.lead{ color: var(--muted); }

/* =========================
   Game Cards (home)
========================= */
#games{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap:24px;
  margin-top:24px;
}
.slate-card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px 18px 18px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.slate-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.18); }
.slate-head{ display:flex; justify-content:center; align-items:center; margin-bottom:8px; background:transparent; }
.slate-date{ font-weight:700; font-size:1rem; color: var(--ink); margin:0; }
.slate-match{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 10px; }
.slate-match .team{ display:flex; align-items:center; gap:10px; }
.slate-match img{ width:44px; height:44px; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.slate-match .abbr{ font-weight:800; letter-spacing:.5px; font-size:1.35rem; color:#EAF1F9; text-transform:uppercase; }
.slate-match .at{ color: var(--muted); font-weight:700; letter-spacing:.6px; }
.slate-boosts{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; list-style:none; padding:0; margin:6px 0 14px; }
.slate-boosts li{ background: rgba(0,214,143,.12); border:1px solid rgba(0,214,143,.35); color:#A6F4D0; padding:8px 10px; border-radius:10px; text-align:center; font-weight:700; font-size:1rem; }
.slate-boosts .lab{ color:#7FE4FF; font-weight:700; margin-left:4px; }
.slate-actions{ display:flex; }
.slate-primary{ background: var(--blue); color:#001627; border-color:transparent; width:100%; text-align:center; padding:12px 14px; border-radius:12px; box-shadow: var(--shadow-1); }
.slate-primary:hover{ filter: brightness(1.05); }
.slate-card.is-finished{ opacity:.6; filter:saturate(.75); }
.slate-card.is-finished .slate-primary{ pointer-events:none; opacity:.7; }

/* =========================
   Generic Cards grid (used by picks)
   — match .slate-card look 1:1
========================= */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap:24px;
  margin-top:24px;
}
.cards .card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px 18px 18px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cards .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.18); }
.cards .card h3{ margin: 0 0 .5rem; font-size: 1.05rem; color: var(--ink); }
.cards .card .badge{
  display:inline-block; padding:.15rem .45rem; border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size:.8rem; color: var(--ink);
}

/* =========================
   Forms
========================= */
.error { color: var(--danger); margin-top: 6px; font-size: 0.9rem; }
input.invalid, select.invalid { border-color: var(--danger); }
input.valid, select.valid { border-color: var(--green); }
#form-status.success { color: var(--green); }
#form-status.error { color: var(--danger); }

form { max-width: 640px; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-weight:600; margin-bottom:6px; color: var(--ink); }
.field .hint{ color: var(--muted); margin-top:6px; }
legend{ font-weight:700; margin-bottom:10px; }
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04); color: var(--ink);
}
input::placeholder{ color:#aab3bd; }
.actions{ margin-top:20px; display:flex; gap:12px; }

/* =========================
   Locker Cards
========================= */
.cards-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.card{ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card .card-art{ background: rgba(255,255,255,.06); border-radius: 12px; aspect-ratio: 4 / 5; margin-bottom: var(--space-3); }
.cards-grid h4{ margin: 6px 0 2px; color: var(--ink); }
.rarity{ color: var(--muted); font-weight:600; }
.card-common{ border-color: var(--rarity-common); }
.card-rare{ border-color: var(--rarity-rare); }
.card-epic{ border-color: var(--rarity-epic); }
.card-legendary{ border-color: var(--rarity-legendary); }

/* =========================
   Tables
========================= */
table{ width:100%; border-collapse:collapse; margin-top: var(--space-3); font-size: .95rem; }
th, td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; }
thead th{ color: var(--muted); font-weight:600; }
tbody tr:hover{ background: rgba(255,255,255,.03); }

/* =========================
   Helpers
========================= */
.skeleton{ height:160px; border-radius:12px; background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.06) 63%); background-size: 400% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: 0 0; } }
.empty-state{ color: var(--muted); text-align:center; padding:16px 0; border:1px dashed rgba(255,255,255,.15); border-radius:12px; }

main.container{ padding-bottom: 32px; }

/* keep top-level nav flex only */
nav > ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Dropdown toggled open */
.dropdown.show { display: block; }

/* =========================
   Player Prop Cards (Game page)
========================= */
#player-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* slightly wider */
  gap: 20px;
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  justify-items: center;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.player-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  width: 240px; /* slightly wider */
  text-align: center;
}
.player-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(255,255,255,.18);
}

.player-card h4 {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: 1.05rem;
  text-align: center;
}
.player-line {
  color: var(--muted);
  margin-bottom: var(--space-3);
  text-align: center;
}

.btn-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-prop {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  transition: all .15s ease;
  font-size: 0.95rem;
}
.btn-prop:hover {
  background: rgba(255,255,255,.1);
}
.btn-prop.selected {
  background: var(--blue);
  color: #001627;
  border-color: var(--blue);
}
.btn-prop .price {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 700;
}

/* ===== Expand pick form on game page ===== */
#pick-form {
  max-width: none;
  width: 100%;
}

#pick-form .actions {
  justify-content: center;
  margin-top: 32px;
}

/* =========================
   Auto Pack Timer (Header)
========================= */
.pack-timer {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  margin-left: var(--space-3);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pack-timer span {
  color: var(--green);
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}