:root {
  --bg: #100711;
  --panel: rgba(24, 14, 32, 0.92);
  --panel-2: rgba(40, 20, 56, 0.82);
  --text: #fff6ed;
  --muted: #cdbccc;
  --gold: #f5c542;
  --hot: #ff2e63;
  --blue: #31d7ff;
  --green: #64f58d;
  --danger: #ff6b6b;
  --border: rgba(255, 255, 255, 0.14);
  --shadow: 0 25px 80px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

.arena-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 46, 99, .34), transparent 32%),
    radial-gradient(circle at 84% 10%, rgba(49, 215, 255, .26), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(245, 197, 66, .18), transparent 35%),
    linear-gradient(135deg, #110711 0%, #261231 48%, #07080e 100%);
}
.arena-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.app-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; min-height: 100vh; }
.screen { display: none; min-height: 100vh; padding: 32px 0; }
.screen.active { display: block; }
.start-screen.active { display: grid; place-items: center; }

.hero-card, .share-card, .search-card, .stable-panel, .talent-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.hero-card {
  width: min(720px, 100%);
  padding: clamp(28px, 5vw, 64px);
  border-radius: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-card::before, .share-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(110deg, transparent 0 24%, rgba(245,197,66,.24) 32%, transparent 42% 100%);
  pointer-events: none;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 900;
}
h1, h2, h3, h4 { margin: 0; }
h1 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(76px, 15vw, 150px);
  line-height: .82;
  letter-spacing: .02em;
  text-shadow: 0 6px 0 rgba(255,46,99,.55), 0 18px 35px rgba(0,0,0,.55);
}
h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(44px, 7vw, 86px);
  line-height: .9;
  letter-spacing: .03em;
}
.tagline { color: var(--muted); font-size: clamp(17px, 2vw, 22px); max-width: 570px; margin: 24px auto; line-height: 1.45; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.rules-grid div { background: rgba(255,255,255,.08); border: 1px solid var(--border); border-radius: 18px; padding: 18px 8px; }
.rules-grid strong { display:block; font-size: 30px; color: var(--gold); }
.rules-grid span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
button { font: inherit; cursor: pointer; border: 0; }
.primary-btn, .ghost-btn {
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.primary-btn { color: #12050d; background: linear-gradient(135deg, var(--gold), #ff7a18); box-shadow: 0 12px 30px rgba(245,197,66,.22); }
.ghost-btn { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--border); }
.small-btn { padding: 10px 14px; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.fine-print, .helper-text { color: rgba(255,255,255,.58); font-size: 11px; margin: 10px 0 0; line-height: 1.35; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 8px 0 24px; }
.builder-grid { display:grid; grid-template-columns: 390px 1fr; gap: 22px; align-items:start; }

.stable-panel, .search-card { border-radius: 26px; padding: 18px; }
.stable-panel { position: sticky; top: 20px; }
.panel-heading, .search-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom: 10px; }
.panel-heading h3, .search-topline h3 { font-size: 22px; line-height: 1.1; }
.filled-pill {
  white-space: nowrap;
  border: 1px solid rgba(245,197,66,.35);
  background: rgba(245,197,66,.12);
  color: var(--gold);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.roster-slots { display:grid; gap: 7px; }
.roster-slot {
  width: 100%;
  border:1px solid var(--border);
  background: rgba(255,255,255,.065);
  border-radius:18px;
  padding: 10px 12px;
  min-height: 64px;
  text-align:left;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.roster-slot:hover { transform: translateY(-2px); border-color: rgba(245,197,66,.55); }
.roster-slot.active { border-color: var(--gold); background: rgba(245,197,66,.13); }
.roster-slot .label { color: var(--gold); text-transform:uppercase; font-size:10px; letter-spacing:.11em; font-weight:900; margin-bottom:4px; }
.roster-slot .name { font-weight:900; font-size: 16px; }
.roster-slot .meta { display:block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.roster-slot.empty .name { color: rgba(255,255,255,.45); }
.book-btn { width: 100%; margin-top: 10px; }

.search-box-wrap {
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 4px;
}
#searchInput {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 16px;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}
#searchInput::placeholder { color: rgba(255,255,255,.38); }

.filter-row { display:flex; gap: 8px; flex-wrap:wrap; margin-top: 14px; }
.filter-btn {
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.filter-btn.active {
  color: #12050d;
  background: var(--gold);
  border-color: var(--gold);
}

.results-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.talent-card {
  border-radius: 22px;
  padding: 18px;
  min-height: 190px;
  text-align:left;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}
.talent-card:hover { transform: translateY(-3px); border-color: rgba(245,197,66,.55); }
.talent-card.ineligible { opacity: .46; }
.talent-card.taken { opacity: .38; }
.talent-card h4 { margin:0 0 6px; font-size: 22px; }
.talent-card .meta { margin:0 0 12px; color: var(--muted); font-size: 13px; }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin: 10px 0; }
.badge { border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 8px; font-size:11px; font-weight:900; text-transform:uppercase; color: var(--gold); background: rgba(245,197,66,.08); }
.statline { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.statline div { background: rgba(0,0,0,.18); border-radius: 12px; padding: 8px; }
.statline strong { display:block; color: var(--blue); font-size: 16px; }
.statline span { color: var(--muted); font-size: 10px; text-transform:uppercase; font-weight:800; }
.status-note { color: var(--danger); font-size: 12px; font-weight: 900; margin-top: 10px; text-transform: uppercase; letter-spacing: .05em; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  place-items: center;
  padding: 20px;
  z-index: 10;
}
.modal-backdrop.active { display: grid; }
.modal {
  position: relative;
  width: min(560px, 100%);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  border-radius: 26px;
  padding: 26px;
}
.modal-close {
  position: absolute;
  right: 16px;
  top: 12px;
  color: var(--text);
  background: transparent;
  font-size: 32px;
  line-height: 1;
  width: auto;
  padding: 0;
}
.selected-meta {
  color: var(--muted);
  margin: 8px 0 18px;
  line-height: 1.45;
}
.role-buttons { display: grid; gap: 10px; }
.role-buttons button {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.09);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  font-weight: 900;
}
.role-buttons button:hover { border-color: var(--gold); }
.role-buttons button:disabled { opacity: .35; cursor: not-allowed; }

.result-screen.active { display:grid; place-items:center; }
.result-wrap { width:min(760px, 100%); }
.share-card { position:relative; overflow:hidden; border-radius:32px; padding: clamp(24px, 5vw, 46px); text-align:center; }
.share-card h2 { font-family:"Bebas Neue"; font-size: clamp(64px, 12vw, 124px); letter-spacing:.03em; line-height:.85; }
.score-circle { width: 132px; height:132px; display:grid; place-items:center; border-radius:50%; margin: 20px auto; font-size: 44px; font-weight: 1000; color:#12050d; background: linear-gradient(135deg, var(--gold), var(--green)); box-shadow: 0 0 40px rgba(245,197,66,.24); }
.result-blurb { color: var(--muted); font-size: 18px; line-height:1.45; max-width: 620px; margin: 0 auto 22px; }
.final-roster { display:grid; gap:10px; text-align:left; margin: 22px 0; }
.final-row { display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:center; background:rgba(255,255,255,.07); border:1px solid var(--border); border-radius:16px; padding:12px 14px; }
.final-row span:first-child { color: var(--gold); font-size: 11px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.final-row span:last-child { font-weight:900; }
.score-breakdown { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:18px; }
.score-breakdown div { background:rgba(0,0,0,.2); border-radius:14px; padding:12px; }
.score-breakdown strong { color: var(--blue); display:block; font-size:22px; }
.score-breakdown span { color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:900; }
.result-actions { display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; }

@media (max-width: 940px) {
  .builder-grid { grid-template-columns: 1fr; }
  .stable-panel { position: static; }
}
@media (max-width: 640px) {
  .app-shell { width: min(100% - 20px, 1240px); }
  .screen { padding: 20px 0; }
  .rules-grid, .score-breakdown, .results-grid { grid-template-columns: 1fr; }
  .final-row { grid-template-columns: 1fr; gap:4px; }
  .panel-heading, .search-topline { flex-direction: column; }
  .primary-btn, .ghost-btn { width: 100%; }
  .small-btn { width: auto; }
}


@media (max-height: 760px) and (min-width: 941px) {
  .screen { padding: 18px 0; }
  .topbar { margin-bottom: 14px; }
  .stable-panel { top: 12px; }
  .panel-heading h3 { font-size: 18px; }
  .roster-slot { min-height: 58px; padding: 8px 10px; }
  .roster-slot .name { font-size: 15px; }
  .roster-slot .meta { display: none; }
  .book-btn { padding: 12px 18px; }
}