:root {
  color-scheme: dark;
  --bg: #05070f;
  --panel: #101322;
  --panel-2: #171b2d;
  --line: #313850;
  --text: #fbfcff;
  --muted: #aab7d1;
  --maroon: #7f0d12;
  --purple: #6e00f5;
  --navy: #222883;
  --teal: #005646;
  --blue: #3153f4;
  --aqua: #5be8c6;
  --coral: #ff967d;
  --lime: #e9ff2d;
  --red: #e50000;
  --green: #00c853;
  --gold: #e9ff2d;
  --pink: #e91e63;
  --orange: #ff3d0a;
  --sky: #2a9be6;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  color: inherit;
  font: inherit;
}

.app-shell,
.selector {
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

.team-panel,
.setup-panel {
  width: min(720px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0 42px;
}

.site-footer {
  width: min(980px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 26px 0 42px;
  color: #d7e0f5;
  font-size: 12px;
  line-height: 1.6;
}

.site-footer strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--lime);
}

.coffee-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 4px 0 12px;
  padding: 0 16px;
  border: 1px solid rgba(233, 255, 45, .42);
  border-radius: 999px;
  background: rgba(3, 18, 43, .7);
  color: var(--lime);
  font-weight: 900;
  text-decoration: none;
}

.coffee-link:hover {
  border-color: var(--lime);
  background: rgba(233, 255, 45, .1);
}

.site-footer details {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(91, 232, 198, .28);
  border-radius: 8px;
  background: rgba(16, 19, 34, .74);
}

.site-footer summary {
  cursor: pointer;
  color: #ffffff;
  font-weight: 900;
}

.brand-lockup {
  position: relative;
  padding: 26px 0 18px;
}

.brand-lockup::after {
  content: "26";
  position: absolute;
  right: 0;
  top: -12px;
  z-index: -1;
  color: rgba(91, 232, 198, .1);
  font-size: 116px;
  line-height: .8;
  font-weight: 950;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 9vw, 74px);
  line-height: .96;
  font-weight: 950;
  letter-spacing: 0;
  text-align: center;
}

.intro {
  margin: 14px auto 18px;
  color: #d5def2;
  text-align: center;
  max-width: 560px;
  font-size: 16px;
}

.launch-logo {
  display: block;
  width: min(220px, 52vw);
  height: auto;
  margin: 0 auto 24px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}

.control-block {
  margin: 30px 0;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
}

.control-block h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title h2 {
  margin: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.team-rank-note {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.team-card,
.formation-grid button,
.option-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .88);
  color: #dbe5fb;
  cursor: pointer;
}

.team-card {
  --team-primary: #101322;
  --team-secondary: #ffffff;
  --team-accent: #5be8c6;
  position: relative;
  isolation: isolate;
  min-height: 86px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-align: left;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--team-primary) 82%, #05070f) 0%, rgba(16, 19, 34, .96) 68%),
    var(--panel);
  box-shadow: inset 4px 0 0 var(--team-accent);
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--team-secondary) 34%, transparent) 0 18%, transparent 19%),
    linear-gradient(120deg, transparent 0 58%, color-mix(in srgb, var(--team-accent) 32%, transparent) 58% 100%);
  opacity: .55;
}

.team-card-copy,
.team-card-copy small,
.option-card span,
.option-card small {
  display: block;
}

.team-flag {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(3, 18, 43, .74);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
  overflow: hidden;
  position: relative;
}

.team-flag img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-flag span {
  position: relative;
  z-index: 0;
  font-size: 11px;
  font-weight: 900;
}

.team-card-copy {
  min-width: 0;
}

.team-card-copy strong {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 900;
  line-height: 1.15;
}

.team-card-copy small {
  margin-top: 5px;
  color: #d7e0f5;
  font-size: 11px;
}

.team-rank {
  min-width: 54px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(3, 18, 43, .76);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  text-align: center;
  line-height: 1;
}

.team-rank small {
  display: block;
  margin: 0 0 3px;
  color: #aab7d1;
  font-size: 9px;
  letter-spacing: 1px;
}

.team-card.active,
.formation-grid button.active,
.option-card.active {
  border-color: var(--aqua);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(91, 232, 198, .5),
    inset 4px 0 0 var(--team-accent),
    0 0 0 2px rgba(91, 232, 198, .14);
}

.formation-grid,
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.formation-grid button {
  min-height: 46px;
  font-weight: 900;
}

.hint {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.mini-pitch,
.pitch {
  position: relative;
  overflow: hidden;
  border: 3px solid #2c8d37;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .12) 1px, transparent 1px 50%),
    repeating-linear-gradient(0deg, #12561a 0 12%, #0f4a17 12% 24%);
}

.mini-pitch {
  aspect-ratio: 2.2 / 1;
}

.mini-pitch::before,
.pitch::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
}

.spot {
  position: absolute;
  z-index: 1;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 255, 255, .42);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(6, 55, 18, .7);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

.spot.filled {
  border-style: solid;
  border-color: white;
  background: var(--gold);
  color: #111;
}

.spot small {
  position: absolute;
  top: 27px;
  min-width: 52px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .68);
  color: white;
  font-size: 9px;
  text-align: center;
}

.spot.low small {
  top: auto;
  bottom: 27px;
}

.primary-action,
.secondary-action {
  border: 0;
  border-radius: 8px;
  background: var(--aqua);
  color: #06110f;
  cursor: pointer;
  font-weight: 950;
}

.primary-action {
  width: 100%;
  min-height: 58px;
  font-size: 18px;
}

.primary-action:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.primary-action:empty {
  visibility: hidden;
}

.secondary-action {
  width: auto;
  min-height: 40px;
  padding: 0 22px;
  font-size: 14px;
}

.secondary-action:disabled {
  cursor: not-allowed;
  opacity: .72;
}

.secondary-action.subtle {
  border: 1px solid rgba(233, 255, 45, .38);
  background: rgba(3, 18, 43, .62);
  color: var(--lime);
}

.secondary-action.subtle:disabled {
  color: #7f8ba7;
}

.share-action {
  width: 100%;
  margin-bottom: 12px;
}

.spin-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.secondary-action.spinning {
  position: relative;
  overflow: hidden;
  color: #06110f;
}

.secondary-action.spinning::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, var(--aqua), var(--lime), var(--coral), var(--blue), var(--aqua));
  animation: spinWheel .75s linear infinite;
}

.secondary-action.spinning::after {
  content: "Spinning...";
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--aqua);
  font-weight: 950;
}

.primary-action.compact {
  width: auto;
  min-height: 44px;
  padding: 0 24px;
  font-size: 15px;
}

.option-card {
  min-height: 64px;
  padding: 12px;
  text-align: left;
}

.option-card span {
  font-weight: 900;
}

.option-card small {
  margin-top: 4px;
  color: #c8d4ed;
  font-size: 11px;
  font-weight: 500;
}

.draft-panel {
  display: grid;
  grid-template-columns: 378px 1fr;
  min-height: 100vh;
}

.squad-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 16px;
  background: #061d0b;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.sidebar-head,
.draft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.chosen-team {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid rgba(91, 232, 198, .42);
  border-radius: 8px;
  background: rgba(91, 232, 198, .1);
}

.chosen-team span {
  color: #b8c7e3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.chosen-team strong {
  color: white;
}

.chosen-team.team-card {
  min-height: 76px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  cursor: default;
}

.chosen-team.team-card span {
  color: inherit;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.chosen-team.team-card .team-card-copy small {
  margin: 0 0 4px;
  color: #d7e0f5;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.progress-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--aqua);
  font-size: 12px;
}

.icon-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.progress-line {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.progress-line span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--aqua);
  transition: width .25s ease;
}

.pitch {
  aspect-ratio: 2 / 3;
}

.rating-card,
.position-picker,
.ready-card,
.results-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .94);
}

.rating-card {
  padding: 18px;
}

.rating-card strong {
  display: block;
  margin-bottom: 18px;
  font-size: 38px;
  line-height: 1;
}

.bars {
  display: grid;
  gap: 8px;
}

.bars label {
  display: flex;
  justify-content: space-between;
  color: #d4def4;
  font-size: 12px;
  font-weight: 800;
}

.bars div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.bars div span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
}

.bars div:last-child span {
  background: var(--gold);
}

.draft-main {
  padding: 22px min(5vw, 64px);
}

.draft-top {
  margin-bottom: 18px;
}

.draft-top h2 {
  margin: 0;
  font-size: 20px;
}

.draft-top p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.position-picker {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1.4fr;
  gap: 16px;
  align-items: center;
  max-width: 760px;
  margin-bottom: 12px;
  padding: 14px;
}

.ready-card {
  max-width: 760px;
  padding: 18px;
}

.ready-card h2 {
  margin: 0 0 8px;
}

.ready-card p:not(.eyebrow) {
  margin: 0 0 16px;
  color: var(--muted);
}

.draft-grade,
.captain-picker {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(91, 232, 198, .22);
  border-radius: 8px;
  background: rgba(6, 29, 11, .42);
}

.draft-grade {
  grid-template-columns: 90px 1fr;
  align-items: start;
}

.draft-grade strong {
  display: block;
  color: var(--aqua);
  font-size: 34px;
  line-height: 1;
}

.draft-grade ul {
  margin: 0;
  padding-left: 18px;
  color: #dbe5fb;
}

.draft-grade li + li {
  margin-top: 5px;
}

.captain-picker > div:first-child strong {
  display: block;
  margin-bottom: 4px;
}

.captain-picker > div:first-child span {
  color: var(--muted);
  font-size: 13px;
}

.captain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.captain-grid button {
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .92);
  color: #dbe5fb;
  cursor: pointer;
  text-align: left;
}

.captain-grid button.active {
  border-color: #ffdf00;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 223, 0, .4), 0 0 0 2px rgba(255, 223, 0, .12);
}

.captain-grid span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  margin-bottom: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 223, 194, .16);
  color: var(--aqua);
  font-size: 11px;
  font-weight: 900;
}

.captain-grid strong,
.captain-grid small {
  display: block;
}

.captain-grid small {
  color: var(--muted);
}

.prediction-card {
  display: grid;
  gap: 16px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(91, 232, 198, .34);
  border-radius: 8px;
  background: rgba(3, 18, 43, .58);
}

.prediction-card > div:first-child strong {
  display: block;
  margin: 2px 0 4px;
  color: white;
  font-size: 20px;
  line-height: 1.1;
}

.prediction-card > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.odds-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.odds-grid span {
  color: #d4def4;
  font-size: 11px;
  font-weight: 850;
}

.odds-grid strong {
  color: var(--lime);
  font-size: 19px;
  line-height: 1;
}

.odds-grid i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.odds-grid b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aqua), var(--lime));
}

.position-picker h3 {
  margin: 0 0 6px;
}

.position-picker p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.position-picker.hunch-mode {
  border-color: rgba(255, 223, 0, .55);
  background:
    linear-gradient(135deg, rgba(255, 223, 0, .12), rgba(16, 19, 34, .94) 42%),
    rgba(16, 19, 34, .94);
}

.position-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.position-options button {
  min-height: 48px;
  border: 1px solid rgba(91, 232, 198, .55);
  border-radius: 8px;
  background: #073a39;
  color: white;
  cursor: pointer;
  font-weight: 900;
}

.position-options small {
  display: block;
  margin-top: 2px;
  color: #c8d4ed;
  font-size: 10px;
  font-weight: 600;
}

.squad-list {
  display: grid;
  gap: 9px;
  max-width: 760px;
}

.squad-list.rare-squad {
  padding: 10px;
  border: 1px solid rgba(255, 223, 0, .35);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 223, 0, .08), rgba(0, 223, 194, .06)),
    rgba(16, 19, 34, .24);
  box-shadow: 0 0 28px rgba(255, 223, 0, .1);
}

.player-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .94);
  cursor: pointer;
}

.player-card.reveal-card {
  opacity: 0;
  transform: translateY(8px);
  animation: playerReveal .34s ease forwards;
}

.player-card.reveal-card:nth-child(2n) {
  animation-delay: .03s;
}

.player-card.reveal-card:nth-child(3n) {
  animation-delay: .06s;
}

.player-card.rare-player {
  border-color: rgba(255, 223, 0, .28);
  background:
    linear-gradient(90deg, rgba(255, 223, 0, .08), rgba(16, 19, 34, .96) 34%),
    rgba(16, 19, 34, .96);
}

.player-card.jackpot-player {
  border-color: rgba(255, 223, 0, .72);
  box-shadow: inset 3px 0 0 #ffdf00, 0 0 20px rgba(255, 223, 0, .16);
  animation: playerReveal .34s ease forwards, jackpotPulse 1.8s ease-in-out 2;
}

.player-card.hunch-ready {
  border-style: dashed;
  border-color: rgba(255, 223, 0, .55);
}

.player-card.unavailable-player {
  border-color: rgba(170, 183, 209, .18);
  background: rgba(16, 19, 34, .58);
  filter: grayscale(.45);
}

.player-card.unavailable-player .tags span,
.player-card.unavailable-player .rating-badge {
  opacity: .72;
}

.player-card:hover {
  border-color: var(--aqua);
}

.player-card[disabled] {
  cursor: not-allowed;
  opacity: .45;
}

.player-card.ratings-hidden {
  grid-template-columns: 1fr auto;
}

.rating-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue);
  font-weight: 950;
}

.rating-badge.elite {
  background: var(--gold);
  color: #111;
}

.rating-badge.forward {
  background: var(--red);
}

.player-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.player-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.tags span {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(91, 232, 198, .16);
  color: #a8ffe9;
  font-size: 10px;
  font-weight: 900;
}

.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  max-width: 760px;
  color: var(--muted);
  text-align: center;
}

.empty-state p {
  max-width: 360px;
  margin: 0;
}

.wheel-ghost {
  display: flex;
  gap: 12px;
}

.wheel-ghost span {
  width: 46px;
  height: 46px;
  border: 1px solid #26345e;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--aqua));
}

.results-panel {
  min-height: 100vh;
  display: block;
  padding: 28px 16px;
}

.simulation-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
}

.simulation-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.simulation-head h2 {
  margin: 0;
}

.simulation-head p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
}

.results-card {
  width: min(620px, 100%);
  padding: 28px;
}

.results-card h2 {
  margin: 0 0 10px;
  font-size: 32px;
}

.results-card p {
  color: var(--muted);
}

.fixture-list {
  display: grid;
  gap: 8px;
  margin: 22px 0;
}

.fixture-list.live {
  min-height: 170px;
}

.fixture {
  display: grid;
  grid-template-columns: 92px 1fr auto 28px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c0f1b;
}

.fixture.match-card {
  animation: matchIn .3s ease both;
}

.fixture.win {
  border-color: rgba(91, 232, 198, .45);
  background: rgba(0, 68, 58, .58);
}

.fixture.loss-card {
  border-color: rgba(255, 36, 22, .45);
  background: rgba(68, 0, 18, .5);
}

.fixture.draw-card {
  border-color: rgba(255, 195, 50, .45);
  background: rgba(72, 44, 0, .42);
}

.fixture strong {
  color: var(--muted);
  font-size: 12px;
}

.fixture b {
  display: block;
}

.fixture small,
.fixture em {
  display: block;
  color: var(--aqua);
  font-size: 11px;
  font-style: normal;
}

.fixture em {
  grid-column: 2 / -1;
  color: var(--muted);
}

.scoreline {
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
}

.result-pill {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.result-pill.loss {
  background: var(--red);
}

.result-pill.draw {
  background: var(--gold);
  color: #111;
}

.results-summary {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.podium,
.stat-grid,
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.podium div,
.stat-card,
.award-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .94);
  text-align: center;
}

.podium span,
.stat-card span,
.award-card span,
.muted-line {
  color: var(--muted);
}

.podium span,
.award-card span {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.podium strong,
.stat-card strong {
  display: block;
  margin-top: 4px;
  font-size: 32px;
  line-height: 1;
}

.stat-card.good strong {
  color: var(--aqua);
}

.stat-card.warn strong {
  color: var(--gold);
}

.stat-card.bad strong {
  color: #ff6570;
}

.results-card {
  width: 100%;
}

.results-card h3 {
  margin: 0 0 8px;
  text-transform: uppercase;
}

.bracket-card {
  overflow-x: auto;
}

.bracket-view {
  display: grid;
  gap: 12px;
  padding-bottom: 4px;
}

.bracket-rating-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(233, 255, 45, .28);
  border-radius: 8px;
  background: rgba(16, 19, 34, .78);
}

.bracket-rating-summary span,
.bracket-rating-summary small {
  color: var(--muted);
}

.bracket-rating-summary span {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.bracket-rating-summary strong {
  grid-row: span 2;
  color: var(--lime);
  font-size: 34px;
  line-height: 1;
}

.bracket-rating-summary small {
  font-size: 12px;
}

.bracket-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(148px, 1fr));
  gap: 10px;
  min-width: 920px;
}

.bracket-stage {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(91, 232, 198, .2);
  border-radius: 8px;
  background: rgba(5, 7, 15, .5);
}

.bracket-stage.pending {
  border-color: rgba(170, 183, 209, .16);
  opacity: .7;
}

.bracket-stage h4 {
  margin: 0 0 2px;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.bracket-match {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 19, 34, .92);
}

.bracket-match span,
.bracket-match small,
.bracket-match i {
  color: var(--muted);
  font-size: 11px;
}

.bracket-match i {
  display: block;
  margin-top: 2px;
  color: #d7e0f5;
  font-style: normal;
}

.bracket-match strong {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.bracket-match.win {
  border-color: rgba(91, 232, 198, .45);
  background: rgba(0, 86, 70, .34);
}

.bracket-match.draw {
  border-color: rgba(233, 255, 45, .35);
  background: rgba(82, 72, 0, .28);
}

.bracket-match.loss {
  border-color: rgba(229, 0, 0, .35);
  background: rgba(127, 13, 18, .28);
}

.bracket-match.crowned {
  border-color: rgba(255, 211, 77, .85);
  box-shadow: 0 0 26px rgba(255, 195, 50, .24);
}

.bracket-match.locked {
  border-style: dashed;
  background: rgba(16, 19, 34, .5);
}

.restart-note {
  margin: 18px 0;
  color: #d7e0f5;
  text-align: center;
}

.xi-list,
.player-stat-table {
  display: grid;
  gap: 8px;
}

.xi-list div,
.player-stat-table div {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.player-stat-table div {
  grid-template-columns: 42px 1fr 36px 36px 36px;
}

.table-head {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.position-chip {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(91, 232, 198, .16);
  color: #a8ffe9;
  font-size: 10px;
  font-weight: 950;
  text-align: center;
}

.xi-list small,
.award-card small {
  color: var(--muted);
}

.award-card {
  text-align: left;
}

.award-card strong {
  display: block;
  margin: 8px 0 2px;
}

.award-card.gold {
  border-color: rgba(255, 195, 50, .55);
  background: rgba(78, 48, 0, .42);
}

.trophy-stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 15, .86);
  animation: trophyFade 4.8s ease 2.2s forwards;
  pointer-events: none;
}

.trophy-stage.golden-party {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 195, 50, .18), transparent 34%),
    rgba(5, 7, 15, .88);
}

.trophy-stage.tragic-rain {
  background:
    linear-gradient(180deg, rgba(34, 40, 131, .3), rgba(5, 7, 15, .9)),
    rgba(5, 7, 15, .92);
}

.trophy-stage h2 {
  position: absolute;
  bottom: 14vh;
  margin: 0;
  color: var(--gold);
  font-size: clamp(38px, 10vw, 92px);
  text-align: center;
}

.trophy-stage.tragic-rain h2 {
  color: #cbd5e1;
  text-shadow: 0 8px 28px rgba(49, 83, 244, .34);
}

.trophy-stage.tragic-rain .world-cup-trophy {
  display: none;
}

.world-cup-trophy {
  position: relative;
  width: 150px;
  height: 260px;
  filter: drop-shadow(0 0 34px rgba(255, 195, 50, .72));
}

.world-cup-trophy::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  width: 94px;
  height: 118px;
  border-radius: 42% 42% 34% 34%;
  background:
    radial-gradient(circle at 32% 28%, #fff6a8 0 9%, transparent 10%),
    radial-gradient(circle at 65% 36%, #805b00 0 11%, transparent 12%),
    linear-gradient(135deg, #ffe783, #c68714 48%, #ffe783);
}

.world-cup-trophy::after {
  content: "";
  position: absolute;
  left: 52px;
  top: 104px;
  width: 46px;
  height: 94px;
  border-radius: 40% 40% 20% 20%;
  background: linear-gradient(90deg, #9f6c0e, #ffe783, #a66e10);
}

.world-cup-trophy span {
  position: absolute;
  left: 30px;
  bottom: 20px;
  width: 90px;
  height: 44px;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, #0a8f55, #075a37);
  box-shadow: 0 14px 0 #d59a22;
}

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.confetti span {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 16px;
  border-radius: 2px;
  animation: confettiFall 3.8s linear infinite;
}

.confetti span.rain-drop {
  width: 3px;
  height: 28px;
  border-radius: 999px;
  opacity: .78;
  animation-name: rainFall;
  animation-timing-function: linear;
}

@keyframes matchIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes confettiFall {
  to {
    transform: translateY(105vh) rotate(720deg);
  }
}

@keyframes rainFall {
  to {
    transform: translate3d(-18px, 105vh, 0);
    opacity: .12;
  }
}

@keyframes trophyFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes spinWheel {
  to {
    transform: rotate(360deg);
  }
}

@keyframes playerReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes jackpotPulse {
  50% {
    box-shadow: inset 3px 0 0 #ffdf00, 0 0 34px rgba(255, 223, 0, .36);
  }
}

@media (max-width: 840px) {
  .draft-panel {
    grid-template-columns: 1fr;
  }

  .squad-sidebar {
    min-height: auto;
  }

  .pitch {
    max-height: 540px;
  }

  .draft-main {
    padding: 22px 16px;
  }

  .draft-top,
  .position-picker {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .draft-top {
    flex-direction: column;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .podium,
  .stat-grid,
  .awards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .formation-grid,
  .option-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .player-card {
    grid-template-columns: 42px 1fr;
  }

  .player-card.ratings-hidden {
    grid-template-columns: 1fr;
  }

  .tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .fixture {
    grid-template-columns: 1fr auto 28px;
  }

  .fixture strong {
    grid-column: 1 / -1;
  }
}