:root {
      --primary-teal: #00bfa5;
      --primary-teal-dark: #00938a;
      --secondary-gold: #f6d365;
      --bg-light-blue: #e0f2f1;
      --card-bg: #ffffff;
      --text-main: #1f2937;
      --text-muted: #6b7280;
    }
    body {
      background-color: var(--bg-light-blue);
      color: var(--text-main);
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } .floating-mascot { animation: float 4s ease-in-out infinite; z-index: 40; pointer-events: none; bottom: 2rem !important; } @media (max-width: 1024px) { .floating-mascot img { width: 100px !important; } .floating-mascot { bottom: 1rem !important; } }

@keyframes float {
    0% { transform: translateY(-50%) translateY(0px); }
    50% { transform: translateY(-50%) translateY(-15px); }
    100% { transform: translateY(-50%) translateY(0px); }
  }
  .floating-mascot {
    animation: float 4s ease-in-out infinite;
    z-index: 40;
    pointer-events: none;
  }
  @media (max-width: 1024px) {
    .floating-mascot img {
      width: 100px !important;
    }
    .floating-mascot {
      top: 20% !important;
    }
  }
  header {
  background: transparent !important;
}

.floating-mascot-container {
    position: fixed;
    bottom: 20px;
    z-index: 50;
    pointer-events: none;
    display: block !important;
  }
  .floating-mascot-container img {
    width: 80px;
    height: auto;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.2));
  }
  @media (min-width: 640px) {
    .floating-mascot-container img { width: 120px; }
  }
  @media (min-width: 768px) {
    .floating-mascot-container img { width: 160px; }
  }
  @media (min-width: 1024px) {
    .floating-mascot-container img { width: 200px; }
  }
  .mascot-left { left: 10px; }
  .mascot-right { right: 10px; }

.running-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }

@media (max-width: 640px) {
  #team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 18rem !important;
    gap: 0.45rem !important;
    padding-right: 0.25rem !important;
  }

  #team-grid .team-card {
    border-radius: 0.65rem !important;
    min-height: 4.75rem;
    padding: 0.45rem 0.25rem !important;
  }

  #team-grid .team-card img {
    height: 1.35rem !important;
    margin-bottom: 0.35rem !important;
    width: 1.9rem !important;
  }

  #team-grid .team-card span {
    display: -webkit-box;
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
    max-width: 100%;
    min-height: 1.35rem;
    overflow: hidden;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #klasemen-tebak-skor-body,
  #klasemen-main-body,
  #jadwal-pertandingan-list,
  #prediksi-juara-stats {
    max-height: 24rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #prediksi-juara-stats {
    padding-right: 0.25rem;
  }

  #jadwal-pertandingan-list {
    max-height: 30rem !important;
  }

  #prediksi-juara-stats-card .border-t,
  .border.border-gray-200.rounded-xl.overflow-hidden.mb-6 > .border-t {
    justify-content: center !important;
    padding: 0.6rem !important;
  }

  #prediksi-juara-stats-card .border-t button,
  .border.border-gray-200.rounded-xl.overflow-hidden.mb-6 > .border-t button {
    flex: 1 1 0;
    max-width: 8rem;
  }

  #klasemen-tebak-skor-body td,
  #klasemen-main-body td,
  .klasemen-table td {
    align-items: start !important;
    display: grid !important;
    gap: 0.75rem !important;
    grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr) !important;
    justify-content: initial !important;
    text-align: right !important;
  }

  #klasemen-tebak-skor-body td::before,
  #klasemen-main-body td::before,
  .klasemen-table td::before {
    justify-self: start !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #klasemen-tebak-skor-body td > *,
  #klasemen-main-body td > *,
  .klasemen-table td > * {
    justify-self: end !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  body .floating-mascot-container {
    display: none !important;
  }
}

@media (max-width: 640px) {
  table:has(#klasemen-tebak-skor-body),
  table:has(#klasemen-main-body),
  table:has(#klasemen-tebak-skor-body) thead,
  table:has(#klasemen-main-body) thead,
  #klasemen-tebak-skor-body,
  #klasemen-main-body,
  #klasemen-tebak-skor-body tr,
  #klasemen-main-body tr,
  #klasemen-tebak-skor-body td,
  #klasemen-main-body td,
  .klasemen-table,
  .klasemen-table thead,
  .klasemen-table tbody,
  .klasemen-table tr,
  .klasemen-table td {
    display: block !important;
    width: 100%;
  }

  table:has(#klasemen-tebak-skor-body) thead,
  table:has(#klasemen-main-body) thead,
  .klasemen-table thead {
    display: none !important;
  }

  #klasemen-tebak-skor-body,
  #klasemen-main-body,
  .klasemen-table tbody {
    background: #f8fafc;
    padding: 0.75rem;
  }

  #klasemen-tebak-skor-body tr,
  #klasemen-main-body tr,
  .klasemen-table tr {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.06);
    margin-bottom: 0.75rem;
    overflow: hidden;
    padding: 0.6rem 0.75rem;
  }

  #klasemen-tebak-skor-body tr:last-child,
  #klasemen-main-body tr:last-child,
  .klasemen-table tr:last-child {
    margin-bottom: 0;
  }

  #klasemen-tebak-skor-body td,
  #klasemen-main-body td,
  .klasemen-table td {
    align-items: start;
    border-bottom: 1px solid #eef2f7;
    display: grid !important;
    gap: 0.75rem;
    grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr);
    line-height: 1.35;
    padding: 0.55rem 0 !important;
    text-align: right;
    word-break: break-word;
  }

  #klasemen-tebak-skor-body td::before,
  #klasemen-main-body td::before,
  .klasemen-table td::before {
    color: #4da0d4;
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.25;
    min-width: 0;
    text-align: left;
    text-transform: uppercase;
  }

  #klasemen-tebak-skor-body td > *,
  #klasemen-main-body td > *,
  .klasemen-table td > * {
    justify-self: end;
    min-width: 0;
  }

  #klasemen-tebak-skor-body td:nth-child(1)::before { content: "Peringkat"; }
  #klasemen-tebak-skor-body td:nth-child(2)::before { content: "Tiket"; }
  #klasemen-tebak-skor-body td:nth-child(3)::before { content: "Tebak Skor"; }
  #klasemen-tebak-skor-body td:nth-child(4)::before { content: "Point"; }

  #klasemen-main-body td:nth-child(1)::before { content: "Tiket"; }
  #klasemen-main-body td:nth-child(2)::before { content: "Pertandingan"; }
  #klasemen-main-body td:nth-child(3)::before { content: "Skor"; }
  #klasemen-main-body td:nth-child(4)::before { content: "Pencetak Gol"; }
  #klasemen-main-body td:nth-child(5)::before { content: "Menit"; }

  #klasemen-tebak-skor-body td:last-child,
  #klasemen-main-body td:last-child,
  .klasemen-table td:last-child {
    border-bottom: 0;
  }

  #klasemen-tebak-skor-body td[colspan],
  #klasemen-main-body td[colspan],
  .klasemen-table td[colspan] {
    display: block;
    padding: 1.5rem 0.75rem !important;
    text-align: center;
  }

  #klasemen-tebak-skor-body td[colspan]::before,
  #klasemen-main-body td[colspan]::before,
  .klasemen-table td[colspan]::before {
    display: none;
  }

  .floating-mascot-container {
    display: none !important;
  }
}

:root {
      --primary-teal: #00bfa5;
      --primary-teal-dark: #00938a;
      --secondary-gold: #f6d365;
      --bg-light-blue: #e0f2f1;
      --card-bg: #ffffff;
      --text-main: #1f2937;
      --text-muted: #6b7280;
    }
    body {
      background-color: var(--bg-light-blue);
      color: var(--text-main);
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

@keyframes float {
    0% { transform: translateY(-50%) translateY(0px); }
    50% { transform: translateY(-50%) translateY(-15px); }
    100% { transform: translateY(-50%) translateY(0px); }
  }
  .floating-mascot {
    animation: float 4s ease-in-out infinite;
    z-index: 40;
    pointer-events: none;
  }
  @media (max-width: 1024px) {
    .floating-mascot img {
      width: 100px !important;
    }
    .floating-mascot {
      top: 20% !important;
    }
  }
  header {
  background: transparent !important;
}

.floating-mascot-container {
    position: fixed;
    bottom: 20px;
    z-index: 50;
    pointer-events: none;
    display: block !important;
  }
  .floating-mascot-container img {
    width: 80px;
    height: auto;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.2));
  }
  @media (min-width: 640px) {
    .floating-mascot-container img { width: 120px; }
  }
  @media (min-width: 768px) {
    .floating-mascot-container img { width: 160px; }
  }
  @media (min-width: 1024px) {
    .floating-mascot-container img { width: 200px; }
  }
  .mascot-left { left: 10px; }
  .mascot-right { right: 10px; }

.running-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }