/* Layar tanding (display TV + panel juri). Bentuk dan ukuran mengikuti mockup Tahap 7 yang disetujui
   pemilik; semua warna/font/gerak dari tema.css. Gerak hanya transform/opacity. */
/* Design system Silat Digital "E-Sport Terang". Satu-satunya tempat warna, font, jarak, dan gerak didefinisikan. */

@font-face {
  font-family: "Oxanium";
  font-weight: 500;
  font-display: swap;
  src: url("./oxanium-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-weight: 700;
  font-display: swap;
  src: url("./oxanium-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-weight: 800;
  font-display: swap;
  src: url("./oxanium-latin-800-normal.woff2") format("woff2");
}

:root {
  /* Permukaan: putih murni, kotak abu tipis tanpa garis tepi */
  --latar: #ffffff;
  --kartu: #f0f2f7;
  --kartu-redup: #e3e7ef;
  --garis: #dbe0e9;
  --tinta: #10162a;
  --tinta-redup: #566079;
  --mati: #b4bccc;

  /* Sudut: biru kiri, merah kanan (ciri lama) */
  --biru: #0047e0;
  --biru-tua: #00309c;
  --biru-muda: #e2eaff;
  --merah: #e6102b;
  --merah-tua: #a50a1c;
  --merah-muda: #ffe3e7;
  --kalah: #98a1b2;
  --kalah-tua: #737c8d;

  /* Penanda dan status */
  --kuning: #ffd400;
  --kuning-tinta: #231a00;
  --hijau: #00a84f;
  --jingga: #ff6a13;
  --amber: #ffb000;

  /* Font */
  --font-angka: "Oxanium", "Segoe UI", sans-serif;
  --font-teks: "Oxanium", "Segoe UI", Roboto, Arial, sans-serif;

  /* Skala tipografi display */
  --ukuran-skor: min(43vh, 25vw);
  --ukuran-timer: clamp(3.5rem, 13vh, 9rem);

  /* Bentuk: siku tajam; pelat nama miring ke arah timer dengan garis gema, blok skor persegi lurus */
  --radius: 0;
  --radius-panel: 0;
  --potong-skor: 3.5vh;
  --pelat-skor: 1.6vh;
  --miring-nama: 3vh;
  --miring-kecil: 0.8vh;
  --potong: 1.5vh;
  --gema: 0.6vw;
  --sela: 0.5vw;

  /* Gerak: hanya transform/opacity, tidak pernah di jalur data. */
  --gerak-skor: 200ms;
  --gerak-ringan: 150ms;
  --ease-keluar: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.angka,
.tabular {
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gerak-skor: 0ms;
    --gerak-ringan: 0ms;
  }
}


* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--font-teks);
}

/* Warna per sudut; dipakai pelat nama, blok skor, dan penanda */
.biru {
  --warna: var(--biru);
  --warna-tua: var(--biru-tua);
}
.merah {
  --warna: var(--merah);
  --warna-tua: var(--merah-tua);
}
.kalah {
  /* Satu tingkat lebih tua dari mockup: putih di atas abu-abu muda hanya 2,6:1 */
  --warna: var(--kalah-tua);
  --warna-tua: var(--tinta-redup);
}

/* ============ Display tanding ============ */
.layar {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.4vh;
  padding: 0 1.6vw 1.8vh;
}

/* Pelat nama menempel ke tepi atas layar, garis gema di sisi dalam */
.nama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin: 0 -1.6vw;
}
.pemain {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: center;
  padding: 2vh 2.2vw;
  color: #fff;
  background: var(--warna);
}
.pemain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--latar);
}
.pemain > * {
  position: relative;
  z-index: 1;
}
.pemain.biru {
  padding-right: calc(2.2vw + var(--miring-nama) + var(--gema) + var(--sela));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--miring-nama)) 100%, 0 100%);
}
.pemain.biru::after {
  /* Celah putih di antara pelat dan garis gema */
  clip-path: polygon(
    calc(100% - var(--gema) - var(--sela)) 0,
    calc(100% - var(--gema)) 0,
    calc(100% - var(--gema) - var(--miring-nama)) 100%,
    calc(100% - var(--gema) - var(--sela) - var(--miring-nama)) 100%
  );
}
.pemain.merah {
  padding-left: calc(2.2vw + var(--miring-nama) + var(--gema) + var(--sela));
  text-align: right;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--miring-nama) 100%);
}
.pemain.merah::after {
  clip-path: polygon(
    var(--gema) 0,
    calc(var(--gema) + var(--sela)) 0,
    calc(var(--gema) + var(--sela) + var(--miring-nama)) 100%,
    calc(var(--gema) + var(--miring-nama)) 100%
  );
}
.pemain small {
  font-size: clamp(0.75rem, 1.9vh, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pemain b {
  font-weight: 800;
  font-size: clamp(1.3rem, 4.1vh, 3rem);
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  /* Nama sangat panjang dipotong dengan elipsis, tidak mendorong timer */
  overflow: hidden;
  text-overflow: ellipsis;
}
.tengah-atas {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 0.8vh 0.8vw;
}
.tengah-atas p {
  margin: 0;
  font-size: clamp(0.7rem, 1.7vh, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-redup);
  white-space: nowrap;
}
.timer {
  font-size: var(--ukuran-timer);
  font-weight: 800;
  line-height: 1;
}

.lima {
  display: grid;
  grid-template-columns: minmax(130px, 10.5vw) 1fr minmax(110px, 8.5vw) 1fr minmax(130px, 10.5vw);
  gap: 0.9vw;
  min-height: 0;
}

/* Blok skor: persegi lurus, pelat bawah keras, sudut terpotong, bingkai siku di dalam */
.skor {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-bottom: var(--pelat-skor);
  background: var(--warna);
  box-shadow: inset 0 calc(var(--pelat-skor) * -1) 0 var(--warna-tua);
  color: #fff;
  font-size: var(--ukuran-skor);
  font-weight: 800;
  line-height: 0.9;
}
.skor.kiri {
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong-skor)) 0,
    100% var(--potong-skor),
    100% 100%,
    var(--potong-skor) 100%,
    0 calc(100% - var(--potong-skor))
  );
}
.skor.kanan {
  clip-path: polygon(
    var(--potong-skor) 0,
    100% 0,
    100% calc(100% - var(--potong-skor)),
    calc(100% - var(--potong-skor)) 100%,
    0 100%,
    0 var(--potong-skor)
  );
}
/* Bingkai siku di sudut dalam bawah */
.skor::before {
  content: "";
  position: absolute;
  width: 6vh;
  height: 6vh;
  border: 0 solid rgb(255 255 255 / 45%);
}
.skor.kiri::before {
  right: 1.6vh;
  bottom: calc(var(--pelat-skor) + 1.6vh);
  border-width: 0 0.6vh 0.6vh 0;
}
.skor.kanan::before {
  left: 1.6vh;
  bottom: calc(var(--pelat-skor) + 1.6vh);
  border-width: 0 0 0.6vh 0.6vh;
}
.skor .tag {
  position: absolute;
  top: 1.8vh;
  z-index: 1;
  padding: 0.7vh 1.2vw;
  background: #fff;
  color: var(--warna);
  font-size: clamp(0.8rem, 2vh, 1.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
}
.skor.kiri .tag {
  left: 1.6vh;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1vh) 100%, 0 100%);
}
.skor.kanan .tag {
  right: 1.6vh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1vh 100%);
}
.skor .angka {
  position: relative;
  z-index: 1;
  display: block;
  will-change: transform;
}
.skor .angka.pop {
  animation: pop var(--gerak-skor) var(--ease-keluar);
}
.skor .kilat {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.skor .kilat.pop {
  animation: kilat 220ms ease-out;
}
@keyframes pop {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
@keyframes kilat {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0;
  }
}

/* Hukuman: kotak bersudut potong, cermin di sisi merah */
.hukuman {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0.7vh 0.4vw;
  min-height: 0;
}
.ikon {
  display: grid;
  place-items: center;
  background: var(--kartu);
  color: var(--mati);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vh, 3.4rem);
  line-height: 1;
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong)) 0,
    100% var(--potong),
    100% 100%,
    var(--potong) 100%,
    0 calc(100% - var(--potong))
  );
}
.hukuman.kanan .ikon {
  clip-path: polygon(
    var(--potong) 0,
    100% 0,
    100% calc(100% - var(--potong)),
    calc(100% - var(--potong)) 100%,
    0 100%,
    0 var(--potong)
  );
}
.ikon.aktif.binaan {
  background: var(--amber);
  color: var(--kuning-tinta);
}
.ikon.aktif.teguran {
  background: var(--jingga);
  color: var(--kuning-tinta);
}
.ikon.aktif.peringatan {
  background: var(--merah);
  color: #fff;
}

/* Tengah: lampu babak miring + Win By */
.tengah {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1vh;
}
.label {
  text-align: center;
  font-size: clamp(0.8rem, 1.9vh, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--tinta-redup);
}
.babak {
  display: grid;
  gap: 0.7vh;
}
.babak span {
  display: grid;
  place-items: center;
  padding: 1.3vh 0;
  background: var(--kartu);
  color: var(--mati);
  font-weight: 800;
  font-size: clamp(1.3rem, 4.4vh, 3rem);
  line-height: 1;
  clip-path: polygon(
    var(--potong) 0,
    calc(100% - var(--potong)) 0,
    100% 50%,
    calc(100% - var(--potong)) 100%,
    var(--potong) 100%,
    0 50%
  );
}
.babak span.aktif {
  background: var(--hijau);
  color: #fff;
}
.babak span.selesai {
  background: var(--kartu-redup);
  color: var(--tinta-redup);
}
.winby {
  align-self: end;
  padding: 1.2vh 0.3vw;
  border-top: 0.6vh solid var(--tinta);
  background: var(--kartu);
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.1rem, 3vh, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.winby small {
  display: block;
  font-weight: 700;
  font-size: 0.48em;
  letter-spacing: 0.18em;
  color: var(--tinta-redup);
}
.winby.kosong {
  border-top-color: var(--mati);
  color: var(--mati);
}

/* Penanda juri: tab miring, kuning saat menyala, cermin di sisi merah */
.penanda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vw;
}
.sisi {
  display: grid;
  gap: 0.6vh;
}
.baris {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(84px, 7vw);
  gap: 0.3vw;
  align-items: stretch;
}
.sisi.biru .baris {
  grid-template-columns: minmax(84px, 7vw) repeat(3, 1fr);
}
.baris > i {
  align-self: center;
  font-style: normal;
  font-size: clamp(0.65rem, 1.6vh, 1.1rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.sisi.merah .baris > i {
  text-align: right;
}
.kotak {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 1vh 0;
  background: var(--kartu);
  color: var(--tinta-redup);
  font-weight: 800;
  font-size: clamp(0.95rem, 2.7vh, 1.9rem);
  line-height: 1;
  box-shadow: inset 0 -0.5vh 0 var(--warna);
}
.sisi.biru .kotak {
  clip-path: polygon(0 0, calc(100% - var(--miring-kecil)) 0, 100% 100%, var(--miring-kecil) 100%);
}
.sisi.merah .kotak {
  clip-path: polygon(var(--miring-kecil) 0, 100% 0, calc(100% - var(--miring-kecil)) 100%, 0 100%);
}
.kotak .kilat {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.kotak.nyala {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.kotak .sisa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5vh;
  background: var(--kuning-tinta);
  transform-origin: left;
  opacity: 0;
}
.kotak.nyala .sisa {
  opacity: 0.7;
}

/* Keadaan pemenang */
.layar.selesai .timer {
  color: var(--mati);
}
.pemenang {
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1.6vh 2vw;
  background: var(--warna);
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.3rem, 4.2vh, 3rem);
  line-height: 1.15;
  text-transform: uppercase;
  clip-path: polygon(var(--miring-nama) 0, calc(100% - var(--miring-nama)) 0, 100% 100%, 0 100%);
}

/* ============ Panel juri ============ */
.juri {
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 14px 12px;
  user-select: none;
  --potong: 16px;
}
.juri-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px 8px;
  border-bottom: 3px solid var(--tinta);
}
.juri-kepala h1 {
  margin: 0;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
}
.juri-kepala .info {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tinta-redup);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--tinta);
}
.status::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--hijau);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.babak-juri {
  display: flex;
  gap: 2px;
}
.babak-juri span {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 8px 0;
  background: var(--kartu);
  color: var(--mati);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
  clip-path: polygon(
    var(--potong) 0,
    calc(100% - var(--potong)) 0,
    100% 50%,
    calc(100% - var(--potong)) 100%,
    var(--potong) 100%,
    0 50%
  );
}
.babak-juri span.aktif {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.dua {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
.kolom {
  display: grid;
  grid-template-rows: auto 1fr 1fr 0.5fr;
  gap: 8px;
  min-height: 0;
}
.kolom h2 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px;
  color: var(--warna);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
}
.kolom h2 b {
  font-size: 2.4rem;
  line-height: 1;
}
.tombol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border: 0;
  background: var(--warna);
  color: #fff;
  font-family: var(--font-teks);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong) * 2) 0,
    100% calc(var(--potong) * 2),
    100% 100%,
    calc(var(--potong) * 2) 100%,
    0 calc(100% - var(--potong) * 2)
  );
}
/* Umpan balik saat disentuh: tanpa transition */
.tombol:active {
  transform: scale(0.98);
  opacity: 0.82;
}
.tombol .lencana {
  font-size: 1.35em;
}
.tombol.hapus {
  justify-content: center;
  background: var(--kartu);
  color: var(--tinta);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong)) 0,
    100% var(--potong),
    100% 100%,
    var(--potong) 100%,
    0 calc(100% - var(--potong))
  );
}
.riwayat {
  display: flex;
  gap: 18px;
  overflow: hidden;
  padding-top: 6px;
  border-top: 1px solid var(--garis);
}
.riwayat span {
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}
.riwayat span.belum {
  font-weight: 700;
  color: var(--jingga);
}

/* ============ Tambahan Tahap 8 ============ */
.layar-tanding {
  overflow: hidden;
}
.layar {
  position: relative;
}
.pemenang.seri {
  --warna: var(--tinta);
}
.winby.voting {
  border-top-color: var(--warna, var(--tinta));
}
.winby.voting.biru {
  background: var(--biru);
  color: #fff;
}
.winby.voting.merah {
  background: var(--merah);
  color: #fff;
}
.winby.voting.biru small,
.winby.voting.merah small {
  color: #fff;
}
.putus-layar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.8vh 0;
  background: var(--merah-tua);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.2vh, 1.4rem);
}
.ukur {
  position: absolute;
  right: 1vw;
  bottom: 0.6vh;
  font-size: 1.4vh;
  color: var(--tinta-redup);
}

/* ============ Panel juri (tambahan) ============ */
.panel-juri {
  overflow: hidden;
  overscroll-behavior: none;
}
.juri {
  position: relative;
}
.juri-kepala .berkas {
  display: flex;
  gap: 18px;
  align-items: center;
}
.status.putus {
  color: var(--merah-tua);
}
.status.putus::before {
  background: var(--jingga);
}
.tombol {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.tombol.hapus {
  overflow: hidden;
  opacity: 0.45;
}
.tombol.hapus.aktif {
  opacity: 1;
  background: var(--kuning);
  color: var(--kuning-tinta);
}
/* Hitung mundur 2 dtk: berjalan paralel, tidak menunda ketukan berikutnya */
.sisa-batal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--kuning-tinta);
  transform-origin: left;
  animation: sisa 2s linear forwards;
}
@keyframes sisa {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.kaki-juri {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 6px;
  border-top: 1px solid var(--garis);
}
.daftar {
  border-collapse: collapse;
  font-size: 0.9rem;
}
.daftar th,
.daftar td {
  padding: 2px 8px;
  text-align: center;
  font-weight: 700;
  color: var(--tinta-redup);
  white-space: nowrap;
}
.daftar th:first-child {
  text-align: left;
}
.daftar thead th.biru {
  color: var(--biru);
}
.daftar thead th.merah {
  color: var(--merah);
}
.daftar tbody tr.aktif th,
.daftar tbody tr.aktif td {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.daftar td {
  font-size: 1.05rem;
  color: var(--tinta);
}
.riwayat {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.riwayat span.biru {
  color: var(--biru-tua);
}
.riwayat span.merah {
  color: var(--merah-tua);
}
.riwayat span.batal {
  color: var(--mati);
  text-decoration: line-through;
}
.riwayat span.kosong {
  color: var(--tinta-redup);
}
.riwayat span.belum {
  color: var(--merah-tua);
}
.pemberitahuan {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 18px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
}
.galat {
  margin: 24px;
  font-weight: 700;
}

/* Modal voting: muncul otomatis di atas panel, tombol sebesar tombol nilai */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(255 255 255 / 96%);
}
.modal-isi {
  width: min(100%, 980px);
  display: grid;
  gap: 12px;
  text-align: center;
}
.modal-isi h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
}
.modal-isi p {
  margin: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tinta-redup);
}
.pilihan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: min(46vh, 320px);
}
.tombol.suara {
  justify-content: center;
  padding: 0 12px;
  font-size: clamp(1.7rem, 4vw, 3rem);
}
.tombol.suara.biru {
  --warna: var(--biru);
}
.tombol.suara.merah {
  --warna: var(--merah);
}
.tombol.suara.invalid {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.tombol.suara.dipilih::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 8px solid #fff;
  pointer-events: none;
}
.tombol.suara.invalid.dipilih::after {
  border-color: var(--kuning-tinta);
}
@media (prefers-reduced-motion: reduce) {
  .sisa-batal {
    animation: none;
  }
}

/* Tablet berdiri: daftar nilai dan riwayat ditumpuk */
@media (max-width: 900px) {
  .kaki-juri {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .riwayat {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 14px;
  }
}

/* ============ Panel dewan (Tahap 9) ============
   Susunan mengikuti layar dewan lama (tabel simetris, tombol berpasangan, Voting di tengah),
   ditambah riwayat nilai tiap juri dengan coretan serong untuk yang tidak masuk skor.
   Semua aturan dicakup di bawah .dewan / .operator supaya nama umum tidak menimpa panel lain. */
.panel-dewan,
.panel-operator {
  overflow: hidden;
  overscroll-behavior: none;
}
.dewan,
.operator {
  position: relative;
  height: 100vh;
  display: grid;
  gap: 8px;
  padding: 0 14px 10px;
  user-select: none;
  --potong: 12px;
}
.dewan {
  display: flex;
  flex-direction: column;
}
.dewan-tabel {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.dewan .rincian tbody tr {
  height: 34px;
}
.dewan .status.putus,
.operator .status.putus {
  color: var(--merah-tua);
}
.dewan-bagian-atas {
  display: grid;
  gap: 4px;
}
.dewan-atas {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 1.6fr;
  gap: 2px;
}
.dewan-nama {
  display: grid;
  align-content: center;
  padding: 4px 14px;
  background: var(--warna);
  color: #fff;
  text-transform: uppercase;
  min-width: 0;
}
.dewan-nama small {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
}
.dewan-nama b {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dewan-total {
  display: grid;
  place-items: center;
  background: var(--warna-tua);
  color: #fff;
}
.dewan-total b {
  font-size: 3rem;
  line-height: 1.1;
}
.spanduk-selesai {
  padding: 6px 16px;
  background: var(--tinta);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.tetapkan-seri {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--amber);
  color: var(--kuning-tinta);
  font-weight: 800;
}
.tetapkan-seri > span {
  flex: 1;
}
.tombol-tetapkan {
  min-height: 48px;
  min-width: 120px;
  padding: 0 14px;
  border: 0;
  color: #fff;
  font: inherit;
}
.tombol-tetapkan.biru {
  background: var(--biru);
}
.tombol-tetapkan.merah {
  background: var(--merah);
}
.tombol-tetapkan.yakin {
  background: var(--tinta);
}

/* Tabel rincian simetris */
.dewan .rincian {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.dewan .rincian th,
.dewan .rincian td {
  border: 1px solid var(--tinta);
  padding: 2px 4px;
}
.dewan .rincian th {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}
.dewan .rincian th.b {
  background: var(--biru-muda);
  color: var(--biru-tua);
}
.dewan .rincian th.m {
  background: var(--merah-muda);
  color: var(--merah-tua);
}
.dewan .rincian th.mid,
.dewan .rincian td.mid {
  width: 118px;
  background: var(--kartu);
}
.dewan .rincian .babak-pilih {
  display: grid;
  gap: 3px;
  justify-items: center;
}
.dewan .rincian .tab {
  width: 100%;
  min-height: 30px;
  border: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--font-teks);
  font-weight: 800;
  font-size: 0.95rem;
  touch-action: manipulation;
}
.dewan .rincian .tab.aktif {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.dewan .rincian td.total {
  width: 84px;
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800;
  font-size: 2.4rem;
}
.dewan .rincian td.total.biru {
  color: var(--biru);
}
.dewan .rincian td.total.merah {
  color: var(--merah);
}
.dewan .rincian td.bersih {
  width: 70px;
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800;
  font-size: 1.5rem;
}
.dewan .rincian td.bersih.biru {
  color: var(--biru-tua);
}
.dewan .rincian td.bersih.merah {
  color: var(--merah-tua);
}
.dewan .rincian td.babak-besar {
  font-weight: 800;
  font-size: 2.4rem;
}
.dewan .rincian td.babak-besar small {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.dewan .rincian td.label {
  width: 86px;
  background: var(--kartu);
  font-size: 0.85rem;
  font-weight: 700;
}
.dewan .rincian td.isi {
  text-align: left;
  vertical-align: middle;
}
.dewan .rincian td.isi.biru {
  background: var(--biru-muda);
}
.dewan .rincian td.isi.merah {
  background: var(--merah-muda);
}
.dewan .rincian .skor-sel {
  display: block;
  text-align: center;
  font-family: var(--font-angka);
  font-weight: 800;
  font-size: 1.2rem;
}
.dewan .rincian .deret {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dewan .rincian .chip {
  flex: none;
}
.dewan .rincian td.isi {
  max-width: 0;
  overflow: hidden;
}
.dewan .rincian .chip {
  position: relative;
  min-width: 30px;
  padding: 1px 5px;
  background: var(--latar);
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
}
.dewan .rincian td.isi.biru .chip {
  color: var(--biru-tua);
}
.dewan .rincian td.isi.merah .chip {
  color: var(--merah-tua);
}
/* Tidak masuk skor (bukan poin, dibatalkan, terlambat, ditolak): coretan serong dari kiri atas ke kanan bawah */
.dewan .rincian .chip.coret {
  background-color: transparent;
  color: var(--tinta-redup);
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1.5px),
    var(--tinta) calc(50% - 1.5px),
    var(--tinta) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
}

/* Baris tombol: Jatuhan/Teguran/Binaan biru | tengah | merah, lalu Hapus, lalu Peringatan */
.dewan-tombol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(48px, 8vh, 72px);
  gap: 6px;
}
.dewan .tombol-dewan {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  background: var(--warna);
  color: #fff;
  font-family: var(--font-teks);
  font-weight: 800;
  font-size: clamp(0.9rem, 1.7vw, 1.3rem);
  line-height: 1;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong)) 0,
    100% var(--potong),
    100% 100%,
    var(--potong) 100%,
    0 calc(100% - var(--potong))
  );
}
.dewan .tombol-dewan:active {
  transform: scale(0.98);
  opacity: 0.82;
}
.dewan .tombol-dewan .lencana {
  font-size: 1.2em;
}
.dewan .tombol-dewan.peringatan {
  grid-column: span 2;
  background: var(--warna-tua);
}
.dewan .tombol-dewan.hapus {
  justify-content: center;
  background: var(--kartu);
  color: var(--warna-tua);
  font-size: clamp(0.75rem, 1.3vw, 1rem);
}
.dewan .tombol-dewan.hapus.yakin {
  background: var(--jingga);
  color: #fff;
}
.dewan .voting-tengah {
  display: grid;
  gap: 2px;
}
.dewan .tombol-dewan.voting-buka {
  justify-content: center;
  background: var(--hijau);
}
.dewan .tombol-dewan.voting-buka.berjalan {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.dewan .hasil-voting {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
}

/* Modal voting dewan */
.dewan .modal-dewan .suara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dewan .modal-dewan .suara li {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: var(--kartu);
  color: var(--tinta-redup);
  font-weight: 800;
}
.dewan .modal-dewan .suara li b {
  font-size: 1.6rem;
}
.dewan .modal-dewan .suara li.biru {
  background: var(--biru);
  color: #fff;
}
.dewan .modal-dewan .suara li.merah {
  background: var(--merah);
  color: #fff;
}
.dewan .modal-dewan .suara li.invalid {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.dewan .modal-dewan .pilihan {
  height: 110px;
}
.dewan .modal-dewan .pilihan.dua {
  grid-template-columns: repeat(2, 1fr);
}
.dewan .modal-dewan .tombol-dewan {
  justify-content: center;
  font-size: 1.5rem;
}
.dewan .modal-dewan .tombol-dewan.putusan-biru {
  background: var(--biru);
}
.dewan .modal-dewan .tombol-dewan.putusan-merah {
  background: var(--merah);
}
.dewan .modal-dewan .tombol-dewan.putusan-invalid {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.dewan .modal-dewan .tombol-dewan.batal-voting {
  min-height: 52px;
  background: var(--kartu-redup);
  color: var(--tinta);
  font-size: 1.1rem;
}

/* ============ Panel operator (Tahap 9) ============ */
.operator {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.op-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.5fr 1fr;
  gap: 10px;
}
.operator .kartu-op {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--kartu);
  min-height: 0;
}
.operator .kartu-op h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.operator .tombol-op {
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  background: var(--tinta);
  color: #fff;
  font-family: var(--font-teks);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(
    0 0,
    calc(100% - var(--potong)) 0,
    100% var(--potong),
    100% 100%,
    var(--potong) 100%,
    0 calc(100% - var(--potong))
  );
}
.operator .tombol-op:active {
  transform: scale(0.98);
  opacity: 0.82;
}
.operator .tombol-op:disabled {
  background: var(--kartu-redup);
  color: var(--mati);
  cursor: default;
}
.operator .tombol-op.kecil {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.95rem;
}
.operator .tombol-op.mulai {
  background: var(--hijau);
}
.operator .tombol-op.mulai:disabled {
  background: var(--kartu-redup);
}
.operator .tombol-op.bahaya {
  background: var(--merah);
}
.operator .tombol-op.yakin {
  background: var(--jingga);
}
.operator .baris-babak,
.operator .baris-timer,
.operator .baris-partai {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.operator .tombol-op.babak {
  min-height: 72px;
  background: var(--latar);
  color: var(--tinta);
  font-size: 1.8rem;
}
.operator .tombol-op.babak.aktif {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.operator .tombol-op.babak:disabled {
  color: var(--mati);
}
.operator .timer-op {
  text-align: center;
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
}
.operator .baris-durasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
}
.operator .baris-durasi input {
  width: 84px;
  min-height: 40px;
  padding: 0 8px;
  border: 2px solid var(--garis);
  background: var(--latar);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
}
.operator .judul-partai {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
}
.operator .skor-op {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
}
.operator .skor-op .biru {
  color: var(--biru);
}
.operator .skor-op .merah {
  color: var(--merah);
}
.operator .skor-op .pisah {
  color: var(--mati);
}
.operator .selesai-op {
  margin: 0;
  padding: 4px 10px;
  background: var(--tinta);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}
.operator .kosong {
  margin: 0;
  color: var(--tinta-redup);
  font-weight: 700;
}
.operator .status-panel {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.operator .status-panel li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: var(--latar);
  border-left: 6px solid var(--hijau);
  font-weight: 700;
  font-size: 0.9rem;
}
.operator .status-panel li.tidak {
  border-left-color: var(--merah);
  color: var(--merah-tua);
}
.operator .tabel-partai {
  grid-template-rows: auto auto;
  align-content: start;
  overflow: auto;
}
.operator .tabel-partai table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.operator .tabel-partai th {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  background: var(--kartu-redup);
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.operator .tabel-partai th.biru,
.operator .tabel-partai td.biru {
  color: var(--biru-tua);
}
.operator .tabel-partai th.merah,
.operator .tabel-partai td.merah {
  color: var(--merah-tua);
}
.operator .tabel-partai td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--garis);
  font-weight: 700;
}
.operator .tabel-partai tr.aktif td {
  background: var(--kuning);
  color: var(--kuning-tinta);
}
.operator .tabel-partai .aksi-tabel {
  text-align: right;
  white-space: nowrap;
}
.operator .label-aktif {
  font-weight: 800;
  text-transform: uppercase;
}
.operator .galat-kecil {
  margin: 0;
  color: var(--merah-tua);
  font-weight: 700;
}
.dewan .pemberitahuan,
.operator .pemberitahuan {
  z-index: 5;
}

@media (max-width: 900px) {
  .dewan-isi {
    grid-template-columns: 1fr;
  }
  .op-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.dewan .rincian td.mid .babak-pilih > span {
  display: none;
}

/* Tablet berdiri / layar sempit: label dan tombol dewan dirapatkan agar tidak terpotong */
.dewan .rincian td.label {
  letter-spacing: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .dewan .rincian td.label {
    width: 64px;
    font-size: 0.68rem;
  }
  .dewan .rincian td.total {
    width: 56px;
    font-size: 1.8rem;
  }
  .dewan .rincian td.bersih {
    width: 52px;
    font-size: 1.2rem;
  }
  .dewan .rincian th.mid,
  .dewan .rincian td.mid {
    width: 84px;
  }
  .dewan .tombol-dewan {
    padding: 0 8px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .dewan .tombol-dewan .lencana {
    font-size: 1em;
  }
  .dewan .tombol-dewan.hapus {
    font-size: 0.68rem;
  }
  .dewan-total b {
    font-size: 2.2rem;
  }
}