*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: #0a0a0a;
  color: #f0f0f0;
  min-height: 100vh;
}

.screen { padding: 2rem; max-width: 1400px; margin: 0 auto; }
.hidden { display: none !important; }

/* ——— Setup ——— */
h1 { font-size: 2.5rem; font-weight: 400; text-align: center; margin-bottom: 2.5rem; letter-spacing: -0.02em; }
.setup-form { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.player-inputs { display: flex; gap: 0.75rem; }

input[type="text"], select {
  width: 100%; padding: 0.75rem 1rem;
  background: #141414; color: #f0f0f0;
  border: 1px solid #2a2a2a; border-radius: 6px;
  font-size: 1rem; font-family: inherit;
  appearance: none;
}
input::placeholder { color: #555; }
select { cursor: pointer; }
select option { background: #141414; }

.pool-msg { font-size: 0.85rem; color: #666; text-align: center; min-height: 1.2rem; }

button {
  padding: 0.875rem; background: #e8c84a; color: #000;
  border: none; border-radius: 6px; font-size: 1rem;
  font-family: inherit; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
button:disabled { opacity: 0.35; cursor: not-allowed; }
button:not(:disabled):hover { opacity: 0.85; }
.btn-secondary { background: #1a1a1a; color: #f0f0f0; border: 1px solid #333; }

/* ——— Draft layout ——— */
.draft-layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 1.5rem;
  min-height: calc(100vh - 4rem);
}

.roster-panel {
  background: #111; border: 1px solid #1e1e1e;
  border-radius: 10px; padding: 1rem;
  transition: border-color 0.2s;
}
.roster-panel.active-drafter { border-color: #e8c84a; }
.roster-panel h3 { font-size: 0.85rem; color: #666; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }

.picks-list { display: flex; flex-direction: column; gap: 0.4rem; }
.pick-chip {
  background: #1a1a1a; border: 1px solid #242424;
  border-radius: 5px; padding: 0.45rem 0.6rem;
  font-size: 0.78rem; display: flex; justify-content: space-between;
}
.pick-chip .overall { color: #e8c84a; font-weight: 700; }

/* ——— Draft center ——— */
.draft-center { display: flex; flex-direction: column; gap: 0.75rem; }
.turn-banner {
  background: #e8c84a; color: #000; text-align: center;
  padding: 0.75rem; border-radius: 8px;
  font-size: 1.2rem; font-weight: 600;
}
.pick-counter { text-align: center; font-size: 0.8rem; color: #555; }

/* ——— Player grid ——— */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}
.player-card {
  background: #111; border: 1px solid #1e1e1e;
  border-radius: 8px; padding: 0.75rem;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.player-card:hover { border-color: #e8c84a; background: #161600; }
.player-card img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; background: #1a1a1a;
  display: block; margin: 0 auto 0.5rem;
}
.card-name { font-size: 0.78rem; font-weight: 600; line-height: 1.25; margin-bottom: 0.2rem; }
.card-meta { font-size: 0.7rem; color: #666; }
.card-overall { font-size: 1.1rem; font-weight: 700; color: #e8c84a; margin-top: 0.2rem; }

/* ——— Results ——— */
h2 { font-size: 2rem; font-weight: 400; text-align: center; margin-bottom: 2rem; letter-spacing: -0.02em; }
.results-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.result-team h3 { font-size: 1.1rem; margin-bottom: 1rem; text-align: center; }
.picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.results-actions { display: flex; gap: 0.75rem; justify-content: center; }