/* Layar arena seni (display TV + panel juri/dewan/operator). Gaya "E-Sport Terang" sama dengan
   tanding: putih, blok warna solid persegi, tanpa gradien. Semua warna/font/gerak dari tema.css.
   Gerak hanya transform/opacity. Kelas diawali `sn-` agar tidak bentrok (LESSONS Tahap 8–9). */
/* 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);
}
#app {
  height: 100%;
}
.merah {
  --warna: var(--merah);
  --warna-tua: var(--merah-tua);
  --warna-muda: var(--merah-muda);
}
.biru {
  --warna: var(--biru);
  --warna-tua: var(--biru-tua);
  --warna-muda: var(--biru-muda);
}
.angka {
  font-family: var(--font-angka);
}
.tabular {
  font-variant-numeric: tabular-nums;
}
button {
  font-family: inherit;
}

/* ============ Panel (juri, dewan, operator) ============ */
.sn-panel {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.sn-halaman {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  padding: 0 14px 12px;
}
.sn-kepala {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 2px 8px;
  border-bottom: 3px solid var(--tinta);
}
.sn-judul {
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
}
.sn-sub {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tinta-redup);
}
.sn-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.sn-status::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--hijau);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sn-status.putus::before {
  background: var(--merah);
}
.sn-isi {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
}
.sn-kosong {
  margin: auto;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tinta-redup);
  text-align: center;
}
.sn-pelat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 1.2vh 18px;
  background: var(--warna);
  color: #fff;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.sn-pelat .sn-sudut {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  opacity: 0.85;
}
.sn-pelat .sn-nama {
  flex: 1;
  min-width: 0;
  font-size: clamp(1.1rem, 3vh, 2rem);
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sn-pelat .sn-kontingen {
  font-weight: 500;
  font-size: 1rem;
}

/* Juri */
.sn-skor-saya {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 4px;
}
.sn-skor-saya span {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.sn-skor-saya b {
  font-size: clamp(3rem, 11vh, 6rem);
  line-height: 1;
}
.sn-skor-saya small {
  margin-left: auto;
  color: var(--tinta-redup);
  font-weight: 500;
}
.sn-biasa,
.sn-komponen-daftar {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1.4vh;
}
.sn-biasa {
  grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr);
}
.sn-komponen-daftar {
  grid-auto-rows: minmax(0, 1fr);
}
.sn-blok {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
.sn-blok h2 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.sn-blok h2 b {
  font-size: 1.9rem;
}
.sn-wm {
  min-height: 0;
}
.sn-wm-tombol {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border: 0;
  background: var(--kuning);
  color: var(--kuning-tinta);
  font-size: clamp(1.6rem, 5vh, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.sn-wm-tombol b {
  font-size: clamp(3rem, 12vh, 7rem);
  line-height: 1;
}
.sn-wm-tombol small {
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
}
.sn-wm-tombol:active,
.sn-chip:active,
.sn-penalty-tombol:active,
.sn-pilih:active {
  transform: scale(0.98);
}
.sn-chip-baris {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sn-chip {
  flex: 1 1 15%;
  min-width: 64px;
  min-height: 44px;
  border: 0;
  background: var(--kartu);
  color: var(--tinta);
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 3vh, 1.8rem);
  font-weight: 800;
}
.sn-chip.kecil {
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--kartu-redup);
  font-size: 1rem;
}
.sn-komponen .sn-chip-baris {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
}
.sn-komponen .sn-chip {
  min-width: 0;
  flex: none;
}
.sn-komponen .sn-chip.kecil {
  grid-column: span 3;
}
.sn-komponen .sn-chip[data-uji$="-kurang"] {
  order: 2;
}
.sn-komponen .sn-chip[data-uji$="-tambah"] {
  order: 3;
}
.sn-chip.dipilih {
  background: var(--tinta);
  color: #fff;
}
.sn-aksi-bawah {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
}
.sn-batal {
  flex: 1;
  min-height: 52px;
  border: 0;
  background: var(--kartu-redup);
  color: var(--tinta);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}
.sn-batal:disabled {
  color: var(--mati);
}
.sn-belum {
  padding: 8px 12px;
  background: var(--amber);
  color: var(--kuning-tinta);
  font-weight: 800;
}
.sn-selesai {
  padding: 8px 12px;
  background: var(--hijau);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}
.sn-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 12px 22px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  max-width: 90vw;
}
button:disabled {
  opacity: 0.45;
}

/* Dewan */
.sn-penalty {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4vh 14px;
}
.sn-penalty-tombol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border: 0;
  background: var(--kartu);
  color: var(--tinta);
  font-size: clamp(1.3rem, 3.6vh, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
}
.sn-penalty-tombol.nyala {
  background: var(--merah);
  color: #fff;
}
.sn-clear {
  min-height: 56px;
  border: 0;
  background: var(--kartu-redup);
  color: var(--tinta);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
}
.sn-clear.yakin,
.sn-pilih.yakin {
  background: var(--amber);
  color: var(--kuning-tinta);
}
.sn-tetapkan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--amber);
  color: var(--kuning-tinta);
  font-weight: 800;
}
.sn-tetapkan > p {
  flex: 1 1 100%;
  margin: 0;
}
.sn-tetapkan-tombol {
  flex: 1;
  min-height: 56px;
  border: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}
.sn-tetapkan-tombol.merah {
  background: var(--merah);
}
.sn-tetapkan-tombol.biru {
  background: var(--biru);
}
.sn-tetapkan-tombol.yakin {
  background: var(--tinta);
}
.sn-ringkas-baris {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sn-ringkas {
  padding: 8px 12px;
  background: var(--kartu);
  border-top: 6px solid var(--warna);
}
.sn-ringkas.aktif {
  background: var(--warna-muda);
}
.sn-ringkas h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--warna);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-ringkas dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  font-size: 0.95rem;
}
.sn-ringkas dt {
  color: var(--tinta-redup);
}
.sn-ringkas dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.sn-ringkas dd.besar {
  font-size: 1.3rem;
  font-weight: 800;
}

/* Operator */
.sn-kendali {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 1.4vh 18px;
  align-items: start;
}
.sn-grup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sn-grup h2 {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.sn-pilih {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: var(--kartu);
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 800;
}
.sn-pilih.kecil {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.9rem;
}
.sn-pilih.dipilih {
  background: var(--warna, var(--tinta));
  color: #fff;
}
.sn-pilih.utama {
  background: var(--hijau);
  color: #fff;
}
.sn-stopwatch {
  grid-column: 1 / -1;
}
.sn-waktu-besar {
  min-width: 6ch;
  font-size: clamp(2rem, 7vh, 4rem);
  line-height: 1;
}
.sn-hasil {
  flex: 0 0 100%;
  font-size: 1.3rem;
  font-weight: 800;
}
.sn-status-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sn-titik {
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--kartu-redup);
  color: var(--mati);
}
.sn-titik.ok {
  background: var(--hijau);
  color: #fff;
}
.sn-tabel-wadah {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.sn-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.sn-tabel th,
.sn-tabel td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--garis);
}
.sn-tabel th {
  position: sticky;
  top: 0;
  background: var(--tinta);
  color: #fff;
  font-weight: 800;
}
.sn-tabel tr.aktif td {
  background: var(--kuning);
  font-weight: 700;
}

/* ============ Display (TV) ============ */
.sn-d-halaman {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2.4vh;
  padding: 2vh 2.4vw;
  overflow: hidden;
}
.sn-d-kepala {
  display: flex;
  align-items: baseline;
  gap: 2vw;
  padding-bottom: 1vh;
  border-bottom: 0.5vh solid var(--tinta);
  font-size: clamp(1.2rem, 3.4vh, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
}
.sn-d-kepala span {
  color: var(--tinta-redup);
}
.sn-d-putus {
  margin-left: auto;
  padding: 0.4vh 1vw;
  background: var(--merah);
  color: #fff !important;
}
.sn-d-kosong {
  margin: auto;
  font-size: clamp(2rem, 8vh, 5rem);
  font-weight: 800;
  color: var(--mati);
}
.sn-d-satu,
.sn-d-dua {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
.sn-d-pelat {
  display: flex;
  align-items: baseline;
  gap: 2vw;
  padding: 2vh 2.4vw;
  background: var(--warna);
  color: #fff;
  clip-path: polygon(var(--miring-nama) 0, 100% 0, calc(100% - var(--miring-nama)) 100%, 0 100%);
}
.sn-d-pelat .sn-sudut {
  font-size: clamp(1rem, 2.6vh, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.85;
}
.sn-d-pelat .sn-nama {
  flex: 1;
  min-width: 0;
  font-size: clamp(1.8rem, 6.4vh, 4.6rem);
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sn-d-pelat .sn-kontingen {
  font-size: clamp(1rem, 3vh, 2rem);
  font-weight: 500;
}
.sn-d-pelat .sn-selesai {
  background: #fff;
  color: var(--tinta);
}
.sn-d-tabel {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.5fr;
  gap: 0.8vw;
}
.sn-d-tabel > div {
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
  padding: 1.6vh 1.2vw;
  background: var(--kartu);
}
.sn-d-tabel > div > span:first-child {
  font-size: clamp(0.8rem, 2.2vh, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinta-redup);
}
.sn-d-tabel b {
  font-size: clamp(1.8rem, 7vh, 4.5rem);
  line-height: 1;
}
.sn-d-tabel .total {
  background: var(--warna);
  color: #fff;
}
.sn-d-tabel .total > span:first-child {
  color: #fff;
  opacity: 0.85;
}
.sn-d-tabel .total b {
  font-size: clamp(2.6rem, 11vh, 7rem);
}
.sn-d-kartu {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0.8vw;
  align-items: stretch;
}
.sn-kartu {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6vh;
  background: var(--kartu);
  border-bottom: 1vh solid var(--kartu-redup);
}
.sn-kartu b {
  font-size: clamp(1.6rem, 6.4vh, 4.6rem);
  line-height: 1;
}
.sn-kartu span {
  font-size: clamp(0.9rem, 2.6vh, 1.8rem);
  font-weight: 800;
  color: var(--tinta-redup);
}
.sn-kartu-label {
  min-height: 1.2em;
  font-size: clamp(0.7rem, 2vh, 1.3rem);
  font-weight: 800;
  text-transform: uppercase;
}
.sn-kartu.tengah {
  background: var(--tinta);
  color: #fff;
  border-bottom-color: var(--kuning);
}
.sn-kartu.tengah span {
  color: #fff;
}
.sn-kartu.tengah .sn-kartu-label {
  color: var(--kuning);
}
/* Kartu menyala saat nilainya berubah: lapisan kuning yang hanya berubah `opacity`. */
.sn-kartu::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2.4vh;
  background: var(--kuning);
  opacity: 0;
  pointer-events: none;
}
.sn-kartu.nyala::after {
  opacity: 1;
  transition: opacity var(--gerak-ringan) var(--ease-keluar);
}

/* Dua atlet */
.sn-d-duasisi {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 1.2vw;
}
.sn-sisi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vh;
  padding: 2vh 1.6vw;
  background: var(--warna);
  color: #fff;
  min-width: 0;
}
.sn-sisi.kalah {
  --warna: var(--kalah);
}
.sn-sisi .sn-sudut {
  font-size: clamp(1rem, 2.6vh, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.85;
}
.sn-sisi .sn-nama {
  font-size: clamp(1.6rem, 5.6vh, 4rem);
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sn-sisi .sn-kontingen {
  font-size: clamp(1rem, 2.8vh, 1.8rem);
  font-weight: 500;
}
.sn-sisi .sn-total {
  margin-top: auto;
  font-size: clamp(3rem, var(--ukuran-skor-seni, 16vh), 11rem);
  line-height: 1;
}
.sn-pemenang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  padding: 2vh 1vw;
  background: var(--kuning);
  color: var(--kuning-tinta);
  text-align: center;
}
.sn-pemenang span {
  font-size: clamp(1.2rem, 3.6vh, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
}
.sn-pemenang > b {
  font-size: clamp(1.8rem, 6.4vh, 4.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sn-pemenang small {
  font-size: clamp(0.9rem, 2.6vh, 1.8rem);
  font-weight: 700;
}
.sn-pemenang small b {
  font-size: 1.3em;
}
.sn-d-detail {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(1.1rem, 3.6vh, 2.4rem);
}
.sn-d-detail td,
.sn-d-detail th {
  padding: 0.8vh 1vw;
  border-bottom: 2px solid var(--garis);
  font-weight: 800;
}
.sn-d-detail td {
  width: 36%;
  text-align: center;
}
.sn-d-detail td.biru {
  color: var(--biru);
}
.sn-d-detail td.merah {
  color: var(--merah);
}
.sn-d-detail th {
  width: 28%;
  text-align: center;
  text-transform: uppercase;
  color: var(--tinta-redup);
  font-size: 0.6em;
}
.sn-d-detail tr.total td,
.sn-d-detail tr.total th {
  border-bottom: 0;
  font-size: 1.35em;
}

@media (max-width: 900px) {
  .sn-kendali {
    grid-template-columns: 1fr 1fr;
  }
  .sn-penalty {
    grid-template-columns: 1fr;
  }
  .sn-d-tabel {
    grid-template-columns: 1fr 1fr;
  }
  .sn-d-tabel .total {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-kartu.nyala::after {
    transition: none;
  }
}