/* ============================================================
   Kades Cup Bentar — jadwal, klasemen, top skor
   Layout mengikuti referensi app skor: dasar putih, kartu
   membulat, bottom navbar. Aksen merah tua & kuning tua.
   Semua kelas & variabel diawali prefix "kiosweb-"
   ============================================================ */

:root {
  /* Latar layar putih keabu (#F8F8F8 seperti referensi), kartu putih murni.
     --kiosweb-fill untuk isian bulat (logo tim, avatar) supaya tetap kebaca
     di atas latar yang sudah abu. */
  --kiosweb-bg: #F8F8F8;
  --kiosweb-page: #EDEDEF;
  --kiosweb-fill: #F0F0F2;
  --kiosweb-surface: #FFFFFF;
  --kiosweb-ink: #17181C;
  --kiosweb-ink-2: #71747C;
  --kiosweb-ink-3: #A0A3AB;
  --kiosweb-line: #EDEEF1;

  --kiosweb-red: #8E1220;
  --kiosweb-red-dark: #3F0710;
  --kiosweb-gold: #B8860B;
  --kiosweb-gold-light: #F0C24B;
  --kiosweb-blue: #1D4ED8;

  --kiosweb-radius: 22px;
  --kiosweb-radius-sm: 16px;
  --kiosweb-shadow: 0 1px 2px rgba(23, 24, 28, .04), 0 14px 30px -22px rgba(23, 24, 28, .4);

  --kiosweb-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kiosweb-page);
  color: var(--kiosweb-ink);
  font-family: var(--kiosweb-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.kiosweb-app {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 18px calc(104px + env(safe-area-inset-bottom));
  background: var(--kiosweb-bg);
}

.kiosweb-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, label, summary):focus-visible {
  outline: 2px solid var(--kiosweb-red);
  outline-offset: 2px;
  border-radius: 10px;
}

.kiosweb-app > input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

/* ---------- Header ---------- */

/* Logo & nama turnamen SEJAJAR, bloknya di tengah halaman (permintaan
   Renaldi; sempat rata kiri). */
.kiosweb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gap sengaja kecil: berkas logo yang diunggah biasanya punya bantalan
     putih sendiri di tepinya (~6px pada logo Kades Cup), jadi gap 10px
     terlihat jadi jarak ~16px dan teksnya kelihatan jauh dari logo. */
  gap: 2px;
  padding: 16px 0 14px;
  text-align: left;
}

/* Tinggi kotaknya dikunci (gambarnya yang menyesuaikan) supaya isi halaman
   tidak melompat waktu logonya baru selesai diunduh.
   Pakai flex, BUKAN text-align: di file ini ada `img { display: block }`
   global, jadi gambar tidak ikut rata tengah oleh text-align. */
.kiosweb-header-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin: 0;
}

.kiosweb-header-logo img {
  max-height: 100%;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}

/* Dua baris kecil di samping logo (permintaan Renaldi: lebih kecil &
   jangan terlalu tebal — dulu 19px/800 satu baris). */
.kiosweb-title {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.kiosweb-title span { display: block; }

/* ---------- Baris tanggal + strip hari ---------- */

.kiosweb-datebar {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kiosweb-ink-2);
}

/* 7 hari sekaligus: tanggal aktif selalu jatuh di kolom tengah. */
/* Strip tanggal: 5 kotak terlihat sekaligus, sisanya digeser. Tanggal yang
   dipilih ditaruh ke tengah oleh skrip di Views/Home/beranda.php. */
.kiosweb-days {
  position: relative; /* jadi acuan offsetLeft anaknya (dipakai skrip geser) */
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* JANGAN pasang scroll-behavior:smooth di sini — waktu skrip menaruh
     tanggal aktif ke tengah saat halaman dibuka, animasinya bertabrakan
     dengan pemanggilan berikutnya dan berhenti sekolom sebelum tengah.
     Gerak halus diatur dari JS, khusus waktu tanggal diklik. */
}

.kiosweb-days::-webkit-scrollbar { display: none; }

.kiosweb-day {
  /* 5 kolom + 4 sela 4px */
  flex: 0 0 calc((100% - 16px) / 5);
  min-width: 0;
  padding: 8px 2px 9px;
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
  cursor: pointer;
}

/* Lebar dua kolom + selanya: bikin tanggal paling ujung tetap bisa
   digeser sampai ke tengah. */
.kiosweb-day-pad {
  flex: 0 0 calc((100% - 16px) / 5 * 2 + 8px);
}

.kiosweb-hari[hidden] { display: none; }

.kiosweb-fixtures--lanjut { margin-top: 10px; }

.kiosweb-day-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-day-num {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kiosweb-ink);
  font-variant-numeric: tabular-nums;
}

/* Logo tim tampil TANPA latar di mana pun (permintaan Renaldi). Latar
   kotaknya hanya dipakai kalau timnya belum punya logo — yang tampil di
   situ inisial nama, dan itu perlu bidang supaya kebaca. */
.kiosweb-badge:has(img),
.kiosweb-dot:has(img),
.kiosweb-champ-logo:has(img) { background: none; }

.kiosweb-day.kiosweb-is-active { background: var(--kiosweb-red); }
.kiosweb-day.kiosweb-is-active .kiosweb-day-name { color: rgba(255, 255, 255, .72); }
.kiosweb-day.kiosweb-is-active .kiosweb-day-num { color: #fff; }

/* ---------- Judul bagian ---------- */

.kiosweb-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.kiosweb-section-title small {
  font-size: 12px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-section-title a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kiosweb-red);
  text-decoration: none;
}

/* ---------- Kartu laga berjalan ---------- */

.kiosweb-board {
  position: relative;
  padding: 20px 18px 20px;
  color: #fff;
  border-radius: var(--kiosweb-radius);
  overflow: hidden;
  background: linear-gradient(150deg, #7C101D 0%, var(--kiosweb-red-dark) 100%);
}

.kiosweb-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, .10), transparent 38%),
    radial-gradient(circle at 12% 96%, rgba(240, 194, 75, .12), transparent 42%);
  pointer-events: none;
}

/* Motif latar kartu: logo turnamen (berkas kiriman Renaldi, sudah semi
   transparan). Dibuat BESAR, dimiringkan, dan sengaja terpotong tepi kartu
   — meniru referensi desain awal yang logonya nyembul dari sudut kanan. */
.kiosweb-board::after {
  content: "";
  position: absolute;
  top: -54px; right: -58px;
  width: 240px; height: 240px;
  /* Samar saja: motifnya lewat di belakang logo & nama tim, kalau terlalu
     pekat malah mengganggu (versi .6 sempat menabrak logo tim kanan). */
  opacity: .26;
  transform: rotate(-15deg);
  transform-origin: center;
  pointer-events: none;
  background: url("../img/motif-turnamen.webp") no-repeat center / contain;
}

.kiosweb-board-head {
  position: relative;
  text-align: center;
  margin-bottom: 18px;
}

.kiosweb-venue { font-size: 14.5px; font-weight: 700; }

.kiosweb-round {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.kiosweb-board-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}

.kiosweb-side { text-align: center; }

/* Kotak logo dibuat membulat (bukan lingkaran penuh): logo tim yang diunggah
   umumnya persegi dengan latar solid, jadi kalau dikasih padding di dalam
   lingkaran, sudut siku logonya kelihatan mengambang. Sekarang gambar
   memenuhi kotak dan sudutnya ikut dibulatkan oleh overflow:hidden. */
.kiosweb-badge {
  width: 50px; height: 50px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--kiosweb-red);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.kiosweb-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.kiosweb-club {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* Kolom tengah dibuat setinggi logo & nama tim, jadi skor sejajar dengan
   baris logo dan menit sejajar dengan baris nama tim. */
.kiosweb-side-score .kiosweb-score {
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kiosweb-clock {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--kiosweb-gold-light);
  font-variant-numeric: tabular-nums;
}

/* ---------- Daftar laga ---------- */

.kiosweb-fixtures { display: grid; gap: 10px; }

.kiosweb-fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
  box-shadow: var(--kiosweb-shadow);
}

.kiosweb-fixture-team {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
}

/* Nama tim panjang dibiarkan turun baris, jangan dipotong "Garuda Mu…" */
.kiosweb-fixture-team > span:first-child {
  min-width: 0;
  line-height: 1.25;
}

.kiosweb-fixture-team.kiosweb-away {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.kiosweb-dot {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-fill);
  border-radius: 9px;
  overflow: hidden;
}

.kiosweb-dot img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.kiosweb-kickoff {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--kiosweb-gold);
  font-variant-numeric: tabular-nums;
}

.kiosweb-kickoff.kiosweb-done { color: var(--kiosweb-ink); }

/* Tanggal turun ke baris sendiri selebar kartu, jadi skor tetap sebaris
   dengan nama tim dan logo. */
.kiosweb-fixture-date {
  grid-column: 1 / -1;
  margin-top: 2px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

/* Kepala hari: tanggal + garis penutup, plus penanda hari ini / babak. */
.kiosweb-dayhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kiosweb-ink-2);
}

.kiosweb-dayhead span { flex: 0 0 auto; }

.kiosweb-dayhead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kiosweb-line);
}

.kiosweb-dayhead em {
  order: 3;
  flex: 0 0 auto;
  padding: 3px 9px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--kiosweb-red);
  background: rgba(142, 18, 32, .09);
  border-radius: 999px;
}

.kiosweb-dayhead .kiosweb-tag-alt {
  color: var(--kiosweb-blue);
  background: rgba(29, 78, 216, .09);
}

/* Keterangan di bawah tiap kartu jadwal. */
.kiosweb-fixture-meta {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--kiosweb-line);
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-fixture-meta b {
  color: var(--kiosweb-red);
  font-weight: 700;
}

.kiosweb-fixture--live { border-left: 3px solid var(--kiosweb-red); }

/* ---------- Klasemen ---------- */

.kiosweb-card {
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
  box-shadow: var(--kiosweb-shadow);
  overflow: hidden;
}

.kiosweb-card + .kiosweb-card { margin-top: 12px; }

.kiosweb-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kiosweb-line);
  font-size: 13.5px;
  font-weight: 800;
}

.kiosweb-group-head span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-table-wrap {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kiosweb-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kiosweb-standings th,
.kiosweb-standings td {
  padding: 11px 7px;
  text-align: center;
  white-space: nowrap;
}

.kiosweb-standings thead th {
  padding-top: 12px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-standings tbody tr { border-top: 1px solid var(--kiosweb-line); }

/* Penanda nasib tim: biru = lolos, merah = tersingkir. */
.kiosweb-col-team {
  width: 100%;
  min-width: 172px;
  padding-left: 13px !important;
  text-align: left !important;
}

.kiosweb-standings tbody .kiosweb-col-team { border-left: 3px solid var(--kiosweb-red); }
.kiosweb-standings tbody .kiosweb-qualify .kiosweb-col-team { border-left-color: var(--kiosweb-blue); }

.kiosweb-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.kiosweb-team-logo {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  object-fit: contain;
  border-radius: 6px;
}

.kiosweb-rank {
  flex: 0 0 auto;
  width: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
  text-align: center;
}


.kiosweb-pts {
  font-weight: 800;
  padding-right: 16px !important;
}

/* Di HP kolom Mn/S/K disembunyikan supaya Poin tidak kegeser keluar kartu. */
@media (max-width: 439px) {
  .kiosweb-col-opt { display: none; }
}

.kiosweb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 2px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-2);
}

.kiosweb-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kiosweb-legend span::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--kiosweb-red);
}

.kiosweb-legend .kiosweb-lolos::before { background: var(--kiosweb-blue); }

/* ---------- Top skor ---------- */

.kiosweb-scorer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kiosweb-scorer {
  display: grid;
  grid-template-columns: 18px 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
}

.kiosweb-scorer + .kiosweb-scorer { border-top: 1px solid var(--kiosweb-line); }

/* Foto pemain: kepalanya sengaja keluar dari lingkaran, badannya duduk
   di dalam. Kartunya pakai .kiosweb-card--open supaya tidak terpotong. */
.kiosweb-avatar {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-fill);
  border-radius: 50%;
}

/* Separuh bawah foto dipangkas mengikuti lingkaran (radial), separuh atas
   dibiarkan bebas supaya kepala & bola tetap keluar. Lingkaran avatar
   44px duduk di dasar foto: pusatnya di 34px, jari-jari 22px. */
.kiosweb-avatar img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 56px;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  -webkit-mask-image:
    linear-gradient(#000 0 34px, transparent 34px),
    radial-gradient(circle 22px at 26px 34px, #000 99%, transparent 100%);
  mask-image:
    linear-gradient(#000 0 34px, transparent 34px),
    radial-gradient(circle 22px at 26px 34px, #000 99%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.kiosweb-card--open { overflow: visible; }

.kiosweb-scorer-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.kiosweb-scorer-club { display: block; font-size: 12px; color: var(--kiosweb-ink-2); }

.kiosweb-goals {
  font-size: 15px;
  font-weight: 800;
  color: var(--kiosweb-gold);
  font-variant-numeric: tabular-nums;
}

.kiosweb-goals small {
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

/* ---------- Panel ---------- */

.kiosweb-panel { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-panels #kiosweb-panel-beranda,
#kiosweb-nav-jadwal:checked ~ .kiosweb-panels #kiosweb-panel-jadwal,
#kiosweb-nav-klasemen:checked ~ .kiosweb-panels #kiosweb-panel-klasemen,
#kiosweb-nav-topskor:checked ~ .kiosweb-panels #kiosweb-panel-topskor { display: block; }

/* ---------- Bottom navbar ---------- */

/* Bar melayang liquid glass ala iOS, pola sama dengan kw-bnav halogameshop.
   TANPA bayangan jatuh (permintaan Renaldi) — kesan melayang datang dari
   blur + rim cahaya di dalam tepi (inset), bukan dari drop shadow.
   Tint gelapnya dibuat tipis (.42) supaya isi halaman benar-benar terlihat
   menembus bar; angka ini JANGAN diturunkan lagi tanpa mengecek ikon
   non-aktif masih kebaca di atas kartu putih. */
.kiosweb-bottomnav {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px;
  max-width: calc(100vw - 20px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)),
    rgba(19, 18, 21, .42);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  transition: padding .28s ease, gap .28s ease;
}

/* Peramban tanpa backdrop-filter (HP lama) tidak bisa mengaburkan latar,
   jadi tintnya ditebalkan supaya ikon tetap kebaca. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kiosweb-bottomnav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
      rgba(19, 18, 21, .88);
  }
}

.kiosweb-navitem {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  border-radius: 24px;
  cursor: pointer;
  /* Ikon non-aktif dibuat lebih terang dari versi mockup (.62): tint bar
     sekarang tipis, jadi di atas halaman yang putih ikonnya gampang pudar. */
  color: rgba(255, 255, 255, .8);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .25s ease, box-shadow .25s ease,
              width .28s ease, height .28s ease,
              transform .14s cubic-bezier(.2, .7, .3, 1.4);
}

.kiosweb-navitem:active { transform: scale(.88); }

.kiosweb-navitem svg {
  width: 22px; height: 22px;
  stroke-width: 1.8;
  transition: width .28s ease, height .28s ease;
}

/* 5 menu (Top skor + Babak gugur dua-duanya menyala) — itemnya dikecilkan
   supaya barnya tidak melebihi lebar layar HP kecil. */
.kiosweb-bottomnav--rapat .kiosweb-navitem { width: 52px; }

@media (max-width: 359px) {
  .kiosweb-bottomnav--rapat .kiosweb-navitem { width: 46px; }
  .kiosweb-bottomnav--rapat .kiosweb-navitem svg { width: 20px; height: 20px; }
}

/* Menciut saat halaman digulir ke bawah, mengembang lagi saat digulir naik. */
.kiosweb-bottomnav--mini { padding: 4px; gap: 0; }
.kiosweb-bottomnav--mini .kiosweb-navitem { width: 46px; height: 38px; border-radius: 19px; }
.kiosweb-bottomnav--mini .kiosweb-navitem svg { width: 20px; height: 20px; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"],
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"],
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"],
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Tanda aktif: ikon berubah jadi versi terisi + pill kaca terang di belakangnya. */
.kiosweb-navitem .kiosweb-ico-fill { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"] .kiosweb-ico-line,
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"] .kiosweb-ico-line,
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"] .kiosweb-ico-line,
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] .kiosweb-ico-line { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"] .kiosweb-ico-fill,
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"] .kiosweb-ico-fill,
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"] .kiosweb-ico-fill,
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] .kiosweb-ico-fill { display: block; }

#kiosweb-nav-beranda:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"],
#kiosweb-nav-jadwal:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"],
#kiosweb-nav-klasemen:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"],
#kiosweb-nav-topskor:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: -3px;
  border-radius: 27px;
}

/* ---------- Babak gugur (bracket) ---------- */

/* Sengaja BUKAN bagan bercabang: di layar HP bagan seperti itu harus digeser
   ke samping. Tiap laga jadi satu kartu berisi dua baris tim. */
.kiosweb-kos { display: grid; gap: 10px; }

.kiosweb-ko {
  padding: 10px 12px;
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
  box-shadow: var(--kiosweb-shadow);
}

.kiosweb-ko--live { border-color: rgba(142, 18, 32, .35); }

.kiosweb-ko-side {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-2);
}

.kiosweb-ko-side + .kiosweb-ko-side { border-top: 1px solid var(--kiosweb-line); }

/* Pemenang ditebalkan — penanda utama, jangan cuma warna. */
.kiosweb-ko-win { color: var(--kiosweb-ink); font-weight: 800; }

.kiosweb-ko-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.kiosweb-ko-score {
  flex: 0 0 auto;
  min-width: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.kiosweb-ko-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--kiosweb-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-ko-live { color: var(--kiosweb-red); font-style: normal; font-weight: 700; }

/* Kartu juara & pemain terbaik */
.kiosweb-champ {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--kiosweb-red) 0%, var(--kiosweb-red-dark) 100%);
  border-radius: var(--kiosweb-radius-sm);
}

.kiosweb-champ-logo {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.kiosweb-champ-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.kiosweb-champ-body { min-width: 0; }
.kiosweb-champ-body strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }

.kiosweb-champ-cap {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kiosweb-gold-light);
}

.kiosweb-champ-mvp {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Sponsor ---------- */

.kiosweb-sponsors {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--kiosweb-line);
}

/* minmax(0,1fr) + min-width:0 — tanpa ini logo memaksa kolom selebar
   ukuran aslinya dan gridnya jebol keluar container. */
/* 3 kartu per baris (permintaan Renaldi) — dengan nama sponsor di bawah logo,
   4 kolom bikin nama gampang kepotong di HP. */
.kiosweb-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kiosweb-sponsor {
  min-width: 0;
  padding: 9px 7px 8px;
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: 12px;
}

.kiosweb-sponsor-in {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

/* Tinggi logo dikunci angka tetap, BUKAN aspect-ratio: di dalam grid
   bersarang seperti ini aspect-ratio bikin barisnya salah hitung dan nama
   sponsor tercetak keluar kartu (sudah kejadian). */
.kiosweb-sponsor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
}

/* max-height (bukan height:100%) — di dalam kotak yang barisnya auto,
   height:100% tidak terhitung dan logo melar melewati kotaknya sampai
   menimpa nama sponsor. Sudah kejadian, jangan diubah balik. */
.kiosweb-sponsor img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Kolomnya cuma ~100px di HP, jadi nama panjang dibiarkan turun ke baris
   kedua lalu dipotong — bukan dipaksa satu baris sampai kecil sekali. */
.kiosweb-sponsor-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--kiosweb-ink-2);
}

@media (max-width: 319px) {
  .kiosweb-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 520px) {
  .kiosweb-app {
    margin: 20px auto;
    min-height: 0;
    border-radius: 28px;
    box-shadow: 0 30px 60px -40px rgba(23, 24, 28, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Penyesuaian versi aplikasi
   Di mockup keempat tab hidup dalam satu halaman (radio :checked).
   Di aplikasi tiap menu jadi halaman sendiri demi SEO, jadi panel
   selalu tampil dan status menu aktif ditandai kelas dari PHP.
   ============================================================ */

.kiosweb-panel { display: block; }

.kiosweb-bottomnav .kiosweb-navitem { text-decoration: none; }

/* Menu yang sedang dibuka: pill kaca terang, sepasang dengan aturan
   :checked di atas (versi mockup). Ubah keduanya kalau warnanya diganti. */
.kiosweb-navitem.kiosweb-is-current {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.kiosweb-navitem.kiosweb-is-current .kiosweb-ico-line { display: none; }
.kiosweb-navitem.kiosweb-is-current .kiosweb-ico-fill { display: block; }

.kiosweb-navitem:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: -3px;
  border-radius: 27px;
}

/* Hari pada strip tanggal yang tidak ada lagagnya dibuat redup, biar
   kelihatan mana yang bisa diklik. */
.kiosweb-day.kiosweb-is-empty { opacity: .38; }

.kiosweb-empty {
  margin: 14px 0;
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
}

/* Jam kick-off di papan "laga berikutnya" — angkanya lebih kecil daripada
   skor karena isinya 5 karakter, bukan satu digit. */
.kiosweb-score.kiosweb-score--jam { font-size: 26px; letter-spacing: -.01em; }