/* 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?v=8ad0e754c0e8") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-weight: 700;
  font-display: swap;
  src: url("./oxanium-latin-700-normal.woff2?v=19ac72d5a8b3") format("woff2");
}
@font-face {
  font-family: "Oxanium";
  font-weight: 800;
  font-display: swap;
  src: url("./oxanium-latin-800-normal.woff2?v=acb6db05b7b5") 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);
  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.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))
  );
}
/* ============ 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);
  }
}
.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;
  }
}

/* ============ 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;
  }
}

/* Tahap 19B: tautan ke daftar partai seni di arena yang sama */
.operator a.tombol-op {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.operator .tombol-op.ganti-cabang {
  background: var(--kartu-redup);
  color: var(--tinta);
}
.operator .tabel-partai h2 {
  justify-content: flex-start;
  gap: 8px;
}
.operator .tabel-partai h2 > .tombol-op:first-of-type {
  margin-left: auto;
}