:root {
  color-scheme: light;
  --night: #0b2347;
  --twilight: #153a6a;
  --neon: #59b7f6;
  --sunset: #2e7bc8;
  --coral: #244f91;
  --cream: #f6f9fd;
  --surface: #ffffff;
  --surface-alt: #e8f1fa;
  --ink: #14233b;
  --muted: #617086;
  --line: rgba(20, 42, 74, 0.16);
  --green: #247284;
  --green-soft: #deedf2;
  --blue: #1b5f9d;
  --blue-soft: #dfeeff;
  --gold: #9b6a1f;
  --gold-soft: #f5ead2;
  --danger: #b4485d;
  --klass1-accent: #183c72;
  --klass2-accent: #1f72ad;
  --klass3-accent: #58a6d8;
  --klass4-accent: #2d8bbf;
  --klass5-accent: #3f7fb4;
  --klass6-accent: #0f5f99;
  --klass7-accent: #24588e;
  --klass8-accent: #12355f;
  --radius: 8px;
  --poster-image: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="padel57"] {
  --night: #061220;
  --twilight: #182840;
  --neon: #29dce4;
  --sunset: #ff9146;
  --coral: #ff5d74;
  --cream: #fff2df;
  --surface: #fff8ee;
  --surface-alt: #fff0dd;
  --ink: #201821;
  --muted: #716563;
  --line: rgba(68, 43, 46, 0.18);
  --green: #0b8f78;
  --green-soft: #dff8ef;
  --blue: #167f9f;
  --blue-soft: #def7fb;
  --gold: #b3751d;
  --gold-soft: #fff0cd;
  --danger: #c73d52;
  --klass1-accent: #ff5d8f;
  --klass2-accent: #29dce4;
  --klass3-accent: #ff9146;
  --klass4-accent: #ffd166;
  --klass5-accent: #7bd88f;
  --klass6-accent: #9b5de5;
  --klass7-accent: #00bbf9;
  --klass8-accent: #f15bb5;
}

body[data-theme="coast-blue"] {
  --night: #06345f;
  --twilight: #0077b6;
  --neon: #90e0ef;
  --sunset: #00b4d8;
  --coral: #0096c7;
  --blue: #0077b6;
  --blue-soft: #d8f7ff;
  --klass1-accent: #0077b6;
  --klass2-accent: #0096c7;
  --klass3-accent: #00b4d8;
  --klass4-accent: #48cae4;
  --klass5-accent: #4361ee;
  --klass6-accent: #168aad;
  --klass7-accent: #4cc9f0;
  --klass8-accent: #023e8a;
}

body[data-theme="forest-green"] {
  --night: #10291f;
  --twilight: #1f5a42;
  --neon: #82d6b2;
  --sunset: #477f64;
  --coral: #2f684e;
  --green: #2f7d5d;
  --green-soft: #def2e9;
  --blue: #2f7d5d;
  --blue-soft: #e0f1ea;
  --klass1-accent: #1b5e20;
  --klass2-accent: #2e7d32;
  --klass3-accent: #388e3c;
  --klass4-accent: #43a047;
  --klass5-accent: #66bb6a;
  --klass6-accent: #00897b;
  --klass7-accent: #00695c;
  --klass8-accent: #4caf50;
}

body[data-theme="graphite-gold"] {
  --night: #171d26;
  --twilight: #2c3440;
  --neon: #d7b56d;
  --sunset: #9a7431;
  --coral: #a77a2c;
  --gold: #8a641f;
  --gold-soft: #f3ead8;
  --blue: #3f4b59;
  --blue-soft: #e6ebf0;
  --klass1-accent: #3f4b59;
  --klass2-accent: #8a641f;
  --klass3-accent: #b3872f;
  --klass4-accent: #5a6572;
  --klass5-accent: #d7b56d;
  --klass6-accent: #59616c;
  --klass7-accent: #9a7431;
  --klass8-accent: #222831;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(7, 25, 56, 0.72), rgba(7, 25, 56, 0.96)),
    linear-gradient(90deg, transparent 0 49.6%, rgba(255, 255, 255, 0.18) 49.6% 50.4%, transparent 50.4% 100%),
    linear-gradient(0deg, transparent 0 49.6%, rgba(255, 255, 255, 0.14) 49.6% 50.4%, transparent 50.4% 100%),
    linear-gradient(135deg, var(--twilight) 0%, var(--blue) 48%, var(--night) 100%);
  color: var(--cream);
}

body[data-theme="padel57"] {
  background:
    linear-gradient(180deg, rgba(6, 18, 32, 0.72), rgba(6, 18, 32, 0.96)),
    linear-gradient(135deg, var(--twilight) 0%, #0d6b67 52%, var(--night) 100%);
}

body[data-poster="custom"] {
  background:
    linear-gradient(180deg, rgba(7, 25, 56, 0.72), rgba(7, 25, 56, 0.96)),
    var(--poster-image) center top / cover fixed no-repeat;
}

button {
  font: inherit;
}

.live-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-height: 178px;
  padding: 24px 16px 18px;
  background: linear-gradient(180deg, rgba(7, 25, 56, 0.2), rgba(7, 25, 56, 0.9));
}

.live-brand {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
}

.live-sponsor-strip {
  display: flex;
  flex: 1 1 220px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 8px;
}

.live-sponsor-strip[hidden] {
  display: none;
}

.live-sponsor-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 336px;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(7, 25, 56, 0.08);
  backdrop-filter: blur(10px);
}

.live-sponsor-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.live-logo {
  display: block;
  width: clamp(62px, 15vw, 92px);
  height: clamp(62px, 15vw, 92px);
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: #ffffff;
  object-fit: contain;
  padding: 7px;
  box-shadow: 0 14px 34px rgba(7, 25, 56, 0.24);
}

.live-hero p {
  margin: 0 0 4px;
  color: var(--neon);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.live-hero h1 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(3rem, 18vw, 6rem);
  line-height: 0.85;
  font-weight: 950;
}

.live-status {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(7, 25, 56, 0.68);
  padding: 7px 10px;
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 900;
}

.live-status[data-state="ok"] {
  color: var(--neon);
}

.live-status[data-state="error"] {
  color: var(--coral);
}

.live-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px 12px 28px;
}

.live-message,
.next-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
}

.live-message {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 12px;
}

.live-message[hidden],
.next-panel[hidden] {
  display: none;
}

.live-message strong {
  color: var(--gold);
  font-size: 0.95rem;
}

.live-message span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.38;
}

.metric,
.card,
.class-block {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
}

.metric {
  min-height: 68px;
  padding: 10px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.12rem;
}

.next-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-title h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 950;
}

.panel-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.next-list {
  display: grid;
  gap: 8px;
}

.next-card {
  display: grid;
  grid-template-columns: minmax(92px, 0.65fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
  padding: 10px;
}

.next-card[data-class-id="klass1"] {
  border-left: 5px solid var(--klass1-accent);
}

.next-card[data-class-id="klass2"] {
  border-left: 5px solid var(--klass2-accent);
}

.next-card[data-class-id="klass3"] {
  border-left: 5px solid var(--klass3-accent);
}

.next-card[data-class-id="klass4"] {
  border-left: 5px solid var(--klass4-accent);
}

.next-card[data-class-id="klass5"] {
  border-left: 5px solid var(--klass5-accent);
}

.next-card[data-class-id="klass6"] {
  border-left: 5px solid var(--klass6-accent);
}

.next-card[data-class-id="klass7"] {
  border-left: 5px solid var(--klass7-accent);
}

.next-card[data-class-id="klass8"] {
  border-left: 5px solid var(--klass8-accent);
}

.next-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.next-card strong,
.next-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-card strong {
  font-size: 0.88rem;
  font-weight: 950;
}

.next-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.live-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 0 10px;
}

.live-tabs button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 950;
}

.live-tabs button[aria-pressed="true"] {
  border-color: var(--neon);
  background: linear-gradient(135deg, var(--neon), var(--sunset));
  color: #0b2347;
}

.live-view {
  display: grid;
  gap: 10px;
}

.live-view[hidden] {
  display: none;
}

.card {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.card[data-class-id="klass1"] {
  border-left: 5px solid var(--klass1-accent);
}

.card[data-class-id="klass2"] {
  border-left: 5px solid var(--klass2-accent);
}

.card[data-class-id="klass3"] {
  border-left: 5px solid var(--klass3-accent);
}

.card[data-class-id="klass4"] {
  border-left: 5px solid var(--klass4-accent);
}

.card[data-class-id="klass5"] {
  border-left: 5px solid var(--klass5-accent);
}

.card[data-class-id="klass6"] {
  border-left: 5px solid var(--klass6-accent);
}

.card[data-class-id="klass7"] {
  border-left: 5px solid var(--klass7-accent);
}

.card[data-class-id="klass8"] {
  border-left: 5px solid var(--klass8-accent);
}

.card-head,
.card-title,
.winner-line,
.class-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-head {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.card-title h2,
.class-title h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.12;
}

.card-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.teams {
  font-size: 0.92rem;
  font-weight: 850;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: var(--radius);
  background: var(--gold-soft);
  color: var(--gold);
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 950;
  white-space: nowrap;
}

.pill[data-state="complete"] {
  background: var(--green-soft);
  color: var(--green);
}

.pill[data-state="progress"] {
  background: var(--blue-soft);
  color: var(--blue);
}

.pill[data-state="needs-winner"] {
  background: #f6dde3;
  color: var(--danger);
}

.winner-line {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.winner-line strong {
  color: var(--ink);
}

.class-block {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.class-block[data-class-id="klass1"] {
  border-left: 5px solid var(--klass1-accent);
}

.class-block[data-class-id="klass2"] {
  border-left: 5px solid var(--klass2-accent);
}

.class-block[data-class-id="klass3"] {
  border-left: 5px solid var(--klass3-accent);
}

.class-block[data-class-id="klass4"] {
  border-left: 5px solid var(--klass4-accent);
}

.class-block[data-class-id="klass5"] {
  border-left: 5px solid var(--klass5-accent);
}

.class-block[data-class-id="klass6"] {
  border-left: 5px solid var(--klass6-accent);
}

.class-block[data-class-id="klass7"] {
  border-left: 5px solid var(--klass7-accent);
}

.class-block[data-class-id="klass8"] {
  border-left: 5px solid var(--klass8-accent);
}

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

.playoff-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.table-wrap {
  min-width: 0;
}

.table-title,
.playoff-title {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 950;
}

table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: collapse;
  overflow: hidden;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: right;
  font-size: 0.78rem;
}

th {
  background: var(--surface-alt);
  color: var(--muted);
  font-weight: 950;
}

th:first-child,
td:first-child {
  width: 48%;
  text-align: left;
}

tr:last-child td {
  border-bottom: 0;
}

.team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.playoff-column {
  display: grid;
  gap: 8px;
}

.mini-match {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
  padding: 9px;
}

.mini-match strong,
.mini-match span {
  display: block;
}

.mini-match span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.team-search-panel {
  display: grid;
  gap: 10px;
}

.team-search-field {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  padding: 12px;
}

.team-search-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
}

.team-search-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-weight: 900;
}

.team-result-list,
.team-schedule-list {
  display: grid;
  gap: 8px;
}

.team-result-card {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.team-result-card strong,
.selected-team-head strong {
  font-size: 0.95rem;
  font-weight: 950;
}

.team-result-card span,
.selected-team-head span,
.team-search-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.team-search-hint {
  margin: 0;
  text-align: center;
}

.selected-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
  color: var(--ink);
  padding: 12px;
}

.selected-team-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.selected-team-head button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 10px;
  font-weight: 950;
}

.winner-summary {
  display: grid;
  gap: 10px;
}

.winner-summary-head {
  display: grid;
  gap: 4px;
  text-align: center;
}

.winner-summary-head strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.winner-summary-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

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

.winner-summary-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
  color: var(--ink);
  padding: 10px;
}

.winner-summary-card[data-class-id="klass1"] {
  border-left: 5px solid var(--klass1-accent);
}

.winner-summary-card[data-class-id="klass2"] {
  border-left: 5px solid var(--klass2-accent);
}

.winner-summary-card[data-class-id="klass3"] {
  border-left: 5px solid var(--klass3-accent);
}

.winner-summary-card[data-class-id="klass4"] {
  border-left: 5px solid var(--klass4-accent);
}

.winner-summary-card[data-class-id="klass5"] {
  border-left: 5px solid var(--klass5-accent);
}

.winner-summary-card[data-class-id="klass6"] {
  border-left: 5px solid var(--klass6-accent);
}

.winner-summary-card[data-class-id="klass7"] {
  border-left: 5px solid var(--klass7-accent);
}

.winner-summary-card[data-class-id="klass8"] {
  border-left: 5px solid var(--klass8-accent);
}

.winner-summary-card strong {
  font-size: 0.95rem;
  font-weight: 950;
}

.winner-summary-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.empty {
  display: grid;
  gap: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.32);
  border-radius: var(--radius);
  background: rgba(7, 25, 56, 0.62);
  padding: 18px;
  color: var(--cream);
  font-weight: 850;
  text-align: center;
}

.empty.compact {
  border-color: var(--line);
  background: var(--surface-alt);
  color: var(--ink);
  padding: 12px;
}

.empty span {
  font-size: 0.84rem;
  font-weight: 800;
}

body[data-theme="padel57"] .next-card[data-class-id="klass1"],
body[data-theme="padel57"] .card[data-class-id="klass1"],
body[data-theme="padel57"] .class-block[data-class-id="klass1"] {
  border-left-color: #ff5d8f;
}

body[data-theme="padel57"] .next-card[data-class-id="klass2"],
body[data-theme="padel57"] .card[data-class-id="klass2"],
body[data-theme="padel57"] .class-block[data-class-id="klass2"] {
  border-left-color: #29dce4;
}

body[data-theme="padel57"] .next-card[data-class-id="klass3"],
body[data-theme="padel57"] .card[data-class-id="klass3"],
body[data-theme="padel57"] .class-block[data-class-id="klass3"] {
  border-left-color: #ff9146;
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll;
  }

  .live-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 150px;
  }

  .live-sponsor-strip {
    justify-content: flex-start;
  }

  .live-tabs,
  .tables-grid,
  .playoff-grid {
    grid-template-columns: 1fr;
  }

  .next-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .next-card .pill {
    justify-self: start;
  }
}