/* Lexi's Lineup — Lavender Tea observatory theme
   The painting and two ornaments are separate generated pieces. Real game state,
   controls, names and rankings remain live HTML. */

body.lineup-page.lexi-backdrop {
  --lineup-surface: rgba(255, 255, 255, 0.94);
  --lineup-surface-soft: rgba(250, 248, 255, 0.86);
  --lineup-line: rgba(128, 137, 211, 0.42);
  --lineup-line-strong: #7d88d3;
  --lineup-shadow: rgba(77, 77, 145, 0.17);
  --lineup-shell-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(126, 140, 214, 0.3),
    0 24px 62px var(--lineup-shadow);
}

body.lineup-page.lexi-backdrop::before {
  top: 116px;
  left: -150px;
  width: clamp(430px, 38vw, 620px);
  aspect-ratio: 1152 / 1365;
  background-image: url("theme/lineup-observatory-arch-left-v1.webp");
  opacity: 0.48;
  filter: drop-shadow(0 22px 40px rgba(77, 82, 151, 0.18));
}

body.lineup-page.lexi-backdrop::after,
body.lineup-page.lexi-backdrop > main::before {
  content: none;
}

.lineup-page .lineup-shell {
  width: min(1320px, calc(100% - 40px));
  padding: 44px 0 68px;
}

.lineup-page .lineup-hero,
.lineup-page .lineup-board-panel,
.lineup-page .lineup-panel,
.lineup-page .lineup-mode-panel,
.lineup-page .lineup-leaderboard,
.lineup-page .lineup-picker-card {
  border: 2px solid rgba(255, 255, 255, 0.97);
  border-radius: 28px;
  background: var(--lineup-surface);
  box-shadow: 0 0 0 2px var(--lineup-line), 0 18px 42px var(--lineup-shadow);
}

.lineup-page .lineup-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(240px, 0.55fr);
  align-items: start;
  min-height: clamp(350px, 38vw, 455px);
  margin-bottom: 28px;
  padding: clamp(28px, 4vw, 54px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background:
    linear-gradient(93deg, rgba(255, 255, 255, 0.97) 0 34%, rgba(255, 254, 255, 0.78) 49%, rgba(235, 232, 253, 0.14) 72%),
    url("theme/lineup-observatory-wide-v1.webp") 58% 50% / cover no-repeat;
  box-shadow: var(--lineup-shell-shadow);
}

.lineup-page .lineup-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(161deg, transparent 0 58%, rgba(188, 218, 250, 0.18) 58% 67%, transparent 67%),
    linear-gradient(161deg, transparent 0 66%, rgba(219, 200, 244, 0.16) 66% 73%, transparent 73%);
  pointer-events: none;
}

.lineup-page .lineup-hero > * {
  position: relative;
  z-index: 1;
}

.lineup-page .lineup-hero-copy {
  align-self: center;
  max-width: 680px;
  padding: clamp(20px, 2.7vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 27px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.89), rgba(255, 255, 255, 0.61));
  box-shadow: inset 0 0 0 1px rgba(128, 137, 211, 0.18), 0 16px 42px rgba(80, 82, 146, 0.12);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.lineup-page .lineup-hero h1 {
  margin: 8px 0 12px;
  font-size: clamp(2.7rem, 5.3vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.lineup-page .lineup-hero .lede {
  max-width: 600px;
  margin: 0;
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.65;
}

.lineup-page .live-chip {
  justify-self: end;
  align-self: start;
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  color: var(--lx-v3-ink-deep);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px var(--lineup-line), 0 12px 28px rgba(75, 79, 145, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lineup-page .lineup-mode-panel {
  position: relative;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.55fr);
  min-height: 154px;
  margin-bottom: 24px;
  padding: 24px clamp(24px, 3vw, 38px);
  overflow: hidden;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.97), rgba(238, 239, 255, 0.92) 58%, rgba(249, 229, 241, 0.88));
}

.lineup-page .lineup-mode-panel::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -43px;
  width: min(760px, 60%);
  aspect-ratio: 3 / 1;
  background: url("theme/lineup-seven-moons-v1.webp") center / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.lineup-page .lineup-mode-panel > * {
  position: relative;
  z-index: 1;
}

.lineup-page .lineup-mode-copy h2 {
  max-width: 620px;
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
  line-height: 1.14;
}

.lineup-page .lineup-mode-tabs {
  border: 1px solid rgba(126, 140, 214, 0.38);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.lineup-page .lineup-mode-tab {
  border-width: 1px;
  color: var(--lx-v3-ink);
}

.lineup-page .lineup-mode-tab.is-active {
  border-color: rgba(255, 255, 255, 0.95);
  color: #fff;
  background: linear-gradient(105deg, #747fc9, #8198d7 58%, #79add1);
  box-shadow: 0 0 0 1px #7180c7, 0 9px 20px rgba(80, 89, 157, 0.2);
}

.lineup-page .lineup-ranked-gate {
  border: 1px solid rgba(126, 140, 214, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.lineup-page .lineup-layout {
  gap: 22px;
}

.lineup-page .lineup-board-panel {
  min-width: 0;
  padding: clamp(19px, 2.6vw, 30px);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--lineup-shell-shadow);
}

.lineup-page .lineup-panel {
  gap: 14px;
  padding: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(235, 238, 255, 0.88));
}

.lineup-page .lineup-stat-row {
  border: 1px solid rgba(128, 137, 211, 0.19);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
}

.lineup-page .lineup-omen {
  border: 1px solid rgba(128, 137, 211, 0.3);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(252, 252, 255, 0.96), rgba(237, 242, 255, 0.84));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.lineup-page .lineup-omen-label,
.lineup-page .lineup-omen-toggle {
  border-width: 1px;
  box-shadow: 0 6px 14px rgba(76, 80, 144, 0.12);
}

.lineup-page .lineup-omen-label {
  background: linear-gradient(105deg, #7b86cf, #83a7d7);
}

.lineup-page .lineup-omen-toggle {
  color: var(--lx-v3-ink-deep);
  background: rgba(255, 255, 255, 0.84);
}

.lineup-page .lineup-slot,
.lineup-page .lineup-tile,
.lineup-page .roster-card {
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  color: var(--lx-v3-ink);
  box-shadow: 0 0 0 1px rgba(126, 140, 214, 0.28), 0 8px 20px rgba(78, 80, 145, 0.1);
}

.lineup-page .lineup-slot {
  background: linear-gradient(145deg, rgba(251, 249, 255, 0.92), rgba(226, 229, 252, 0.75));
}

.lineup-page .lineup-slot.is-filled {
  background: linear-gradient(145deg, #fffdf5, #f8edc8);
}

.lineup-page .lineup-row {
  border: 1px solid rgba(128, 137, 211, 0.19);
  border-radius: 18px;
  background: rgba(241, 242, 255, 0.54);
}

.lineup-page .lineup-leaderboard {
  margin-top: 24px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.98), rgba(239, 240, 255, 0.93) 62%, rgba(251, 235, 246, 0.91));
  box-shadow: var(--lineup-shell-shadow);
}

.lineup-page .lineup-leaderboard-header {
  align-items: center;
  margin-bottom: 18px;
}

.lineup-page .lineup-leaderboard h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.45rem);
}

.lineup-page .lineup-leaderboard-status {
  border: 1px solid rgba(128, 137, 211, 0.3);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.lineup-page .lineup-leaderboard-table tbody th,
.lineup-page .lineup-leaderboard-table tbody td {
  border-color: rgba(128, 137, 211, 0.16);
  background: rgba(255, 255, 255, 0.78);
}

.lineup-page .lineup-leaderboard-table tbody tr > :first-child {
  border-left-color: rgba(128, 137, 211, 0.16);
  color: var(--lx-v3-ink);
}

.lineup-page .lineup-leaderboard-table tbody tr > :last-child {
  border-right-color: rgba(128, 137, 211, 0.16);
}

.lineup-page .lineup-leaderboard-more {
  display: block;
  min-width: 150px;
  min-height: 43px;
  margin: 18px auto 0;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(105deg, #6d79c5, #8198d8 58%, #76a9d0);
  box-shadow: 0 0 0 1px #6d7bc4, 0 11px 24px rgba(76, 87, 157, 0.2);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.lineup-page .lineup-leaderboard-more[hidden] {
  display: none;
}

.lineup-page .lineup-leaderboard-more:hover,
.lineup-page .lineup-leaderboard-more:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #6372be, 0 15px 28px rgba(76, 87, 157, 0.27);
}

.lineup-page .lineup-leaderboard-more:disabled {
  cursor: wait;
  opacity: 0.64;
  transform: none;
}

.lineup-page .lineup-picker {
  background: rgba(72, 69, 116, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lineup-page .lineup-picker-card {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--lineup-shell-shadow);
}

@media (max-width: 900px) {
  .lineup-page .lineup-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 390px;
    background-position: 62% 50%;
  }

  .lineup-page .lineup-mode-panel {
    grid-template-columns: 1fr;
  }

  .lineup-page .lineup-mode-panel::after {
    width: 78%;
    opacity: 0.11;
  }
}

@media (max-width: 760px) {
  body.lineup-page.lexi-backdrop::before {
    display: none;
  }

  .lineup-page .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .lineup-page .site-header .brand {
    justify-self: start;
  }

  .lineup-page .site-header .nav-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    overflow: visible;
  }

  .lineup-page .site-header .nav-links a {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 36px;
    padding: 6px 4px;
    font-size: 0.74rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .lineup-page .site-header .style-picker {
    grid-column: 1 / -1;
    order: 10;
    justify-content: center;
    min-width: 0;
  }

  .lineup-page .site-header .style-picker select {
    width: min(100%, 180px);
  }

  .lineup-page .lineup-shell {
    width: min(100% - 24px, 1320px);
    padding: 28px 0 48px;
  }

  .lineup-page .lineup-hero {
    grid-template-columns: 1fr;
    min-height: 410px;
    padding: 22px;
    border-radius: 26px;
    background:
      linear-gradient(103deg, rgba(255, 255, 255, 0.95) 0 28%, rgba(255, 255, 255, 0.63) 58%, rgba(235, 232, 253, 0.12) 78%),
      url("theme/lineup-observatory-wide-v1.webp") 64% 50% / cover no-repeat;
  }

  .lineup-page .lineup-hero-copy {
    align-self: start;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
  }

  .lineup-page .lineup-hero h1 {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .lineup-page .live-chip {
    justify-self: start;
    align-self: end;
  }

  .lineup-page .lineup-mode-panel::after {
    right: -90px;
    width: 580px;
    opacity: 0.09;
  }

  .lineup-page .lineup-board-panel,
  .lineup-page .lineup-panel,
  .lineup-page .lineup-mode-panel,
  .lineup-page .lineup-leaderboard,
  .lineup-page .lineup-picker-card {
    border-radius: 22px;
  }
}

@media (max-width: 480px) {
  .lineup-page .lineup-hero {
    min-height: 440px;
    padding: 14px;
  }

  .lineup-page .lineup-hero-copy {
    padding: 18px;
  }

  .lineup-page .lineup-hero .eyebrow {
    font-size: 0.64rem;
  }

  .lineup-page .lineup-hero .lede {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

@media (prefers-contrast: more) {
  body.lineup-page.lexi-backdrop::before,
  .lineup-page .lineup-mode-panel::after {
    display: none;
  }

  .lineup-page .lineup-hero {
    background: #fff;
  }
}

@media print {
  body.lineup-page.lexi-backdrop::before,
  .lineup-page .lineup-mode-panel::after {
    display: none;
  }

  .lineup-page .lineup-hero {
    min-height: 0;
    background: #fff;
  }
}