/* ============ Monitor layar besar ============ */
body.mon { background: #eef2fa; font-size: clamp(14px, 1.05vw, 22px); }
.mtool { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 16px; background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; }
.mtool select { padding: 5px 8px; border: 1.5px solid #b9c0cf; border-radius: 6px; font-size: 14px; margin-left: 4px; }
.mtool button { border: 1.5px solid var(--brand); color: var(--brand); background: #fff; border-radius: 6px; padding: 5px 12px; font-weight: 700; }
.mt-home { color: var(--muted); text-decoration: none; margin-right: auto; }
body.full .mtool { display: none; }

.mhead { display: flex; align-items: center; gap: 1.2em; background: var(--brand); color: #fff; padding: .6em 1.2em; }
.mhead img { width: 3.6em; height: 3.6em; background: #fff; border-radius: .6em; padding: .2em; object-fit: contain; }
.mh-ev { flex: 1; min-width: 0; }
.mh-ev b { display: block; font-size: 1.7em; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ev span { opacity: .85; }
.mh-kelas, .mh-sesi, .mh-clock { text-align: center; }
.mh-kelas span, .mh-sesi span { display: block; font-size: .75em; opacity: .8; letter-spacing: 1px; }
.mh-kelas b { font-size: 2em; background: var(--yellow); color: #000; padding: .05em .5em; border-radius: .25em; display: inline-block; white-space: nowrap; }
.mh-sesi b { font-size: 2em; }
.mh-clock b { font-size: 1.8em; display: block; }
.mh-clock span { font-size: .8em; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #3f3; box-shadow: 0 0 6px #3f3; margin-right: .3em; animation: blink 1.6s infinite; }
.dot.off { background: #f55; box-shadow: none; animation: none; }
.mh-clock em { font-style: normal; font-weight: 700; }
@keyframes blink { 50% { opacity: .35; } }

.mgrid { display: grid; gap: .9em; padding: .9em; grid-template-columns: 1.55fr 1fr; grid-template-areas: "display rekap" "koncer rank"; }
.p-display { grid-area: display; } .p-rekap { grid-area: rekap; } .p-koncer { grid-area: koncer; } .p-rank { grid-area: rank; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: .8em; padding: .8em 1em; min-width: 0; }
.panel h2 { margin: 0 0 .6em; font-size: 1.1em; letter-spacing: .5px; color: var(--brand); display: flex; align-items: center; gap: .6em; }
.panel h2 small { color: var(--muted); font-weight: 400; font-size: .8em; margin-left: auto; }
.lock { background: #ffe1e1; color: var(--danger); border: 1.5px solid var(--danger); border-radius: 99px; padding: .1em .6em; font-size: .75em; }
.tw { overflow-x: auto; }

table.dtab, table.rtab, table.ktab, table.vtab { width: 100%; border-collapse: collapse; }
.dtab th, .dtab td { border: 2px solid #111; text-align: center; padding: .3em .2em; }
.dtab th { background: #1f3a93; color: #fff; font-size: .85em; }
.dtab td.jh { font-weight: 700; font-size: 1.4em; width: 2.2em; }
.dtab td.nm { text-align: left; font-weight: 700; padding-left: .5em; white-space: nowrap; }
.dtab td.g { color: #fff; font-weight: 700; font-size: 1.7em; width: 2.2em; }
.dtab td.tot { font-weight: 700; font-size: 1.3em; }
.dtab td.ok { color: var(--ok); font-weight: 700; font-size: .85em; }
.dtab td.bad { color: var(--danger); font-weight: 700; font-size: .85em; }
.dtab td.flash { animation: flash 1.6s ease-out 2; }
@keyframes flash { 0% { box-shadow: inset 0 0 0 .3em var(--yellow); filter: brightness(1.4); } 100% { box-shadow: none; } }

.rtab td { border: 2px solid #111; padding: .25em .4em; }
.rtab td.lvl { width: 3.6em; text-align: center; font-size: 2.2em; font-weight: 700; background: var(--yellow); line-height: 1; }
.rtab td.lvl small { display: block; font-size: .3em; letter-spacing: 1px; }
.rtab tr.top td.lvl { background: #000; color: var(--yellow); }
.rtab td.nums { min-height: 2.5em; }
.gc { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; margin: .12em; padding: 0 .2em; color: #fff; font-weight: 700; font-size: 1.35em; border: 2px solid #111; }
.gc.xl { font-size: 3em; min-width: 1.6em; height: 1.6em; }
.dash { color: #9aa1ad; }

.kwait { text-align: center; padding: 1.4em .6em; color: var(--muted); font-size: 1.15em; border: 2px dashed #c4c9d2; border-radius: .6em; }
.juara { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-bottom: .7em; }
.jbox { display: flex; align-items: center; gap: .7em; border: 2px solid #111; border-radius: .7em; padding: .5em .8em; }
.jbox.j1 { background: linear-gradient(135deg, #fff6c7, #ffd84d); }
.jbox.j2 { background: linear-gradient(135deg, #f4f6f9, #c9ced6); }
.jl { font-weight: 700; font-size: .9em; text-align: center; line-height: 1.2; }
.jl b { font-size: 2.2em; display: block; }
.jn { flex: 1; text-align: center; }
.tbd { font-size: 3em; color: #888; font-weight: 700; }
.seri { font-weight: 700; color: var(--danger); font-size: 1.2em; }
.vtab th { font-size: .75em; color: var(--muted); text-align: left; padding: .2em; }
.vtab td { padding: .15em .2em; }
.bar { position: relative; height: 1.5em; background: #eef1f6; border-radius: .3em; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width .4s; }
.bar.a i { background: #ffc400; } .bar.b i { background: #aab2bf; }
.bar span { position: relative; font-weight: 700; padding-left: .4em; line-height: 1.5em; }
.kjuri { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; font-size: .85em; }
.kj { border: 1.5px solid #c4c9d2; border-radius: 99px; padding: .1em .6em; }

.ktab th, .ktab td { border-bottom: 1px solid var(--line); padding: .25em .3em; text-align: center; }
.ktab th { font-size: .75em; color: var(--muted); }
.ktab td.rk { font-weight: 700; font-size: 1.2em; }
.ktab td.lb { font-weight: 700; text-align: left; }
.ktab .gc { font-size: 1.05em; }
.ktab tr.r1 td { background: #fff3c4; }
.ktab tr.r2 td { background: #eef0f4; }

@media (max-width: 900px) {
  body.mon { font-size: 14px; }
  .mgrid { grid-template-columns: 1fr; grid-template-areas: "display" "rekap" "koncer" "rank"; padding: 10px; }
  .mhead { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .mh-ev { flex-basis: calc(100% - 70px); }
  .mh-kelas b, .mh-sesi b { font-size: 1.5em; }
  .juara { grid-template-columns: 1fr; }
}

/* ukuran ringkas agar muat satu layar 1080p */
.vtab .gc { font-size: 1em; min-width: 1.8em; height: 1.5em; margin: 0; }
.vtab td { padding: .1em .2em; }
.bar { height: 1.2em; }
.bar span { line-height: 1.2em; }
.gc.xl { font-size: 2.4em; }
.jbox { padding: .35em .8em; }
.ktab .gc { font-size: .95em; height: 1.6em; min-width: 1.7em; margin: .05em; }
.ktab td { padding: .12em .3em; }
.mgrid { align-items: start; }
.mgrid { gap: .7em; padding: .7em; }
.panel { padding: .6em .9em; }
.panel h2 { margin-bottom: .45em; }

.jp { text-align: center; line-height: 1; }
.jp b { display: block; font-size: 2em; }
.jp small { font-size: .7em; letter-spacing: 1px; }
.vtab .pt, .ktab .pt { font-weight: 700; font-size: 1.15em; text-align: center; }
.vtab th.pt { font-size: .75em; }
/* banyak juri (5+): rekapitulasi lebih rapat */
.rtab.many td.lvl { font-size: 1.6em; width: 3em; }
.rtab.many .gc { font-size: 1.1em; height: 1.75em; min-width: 1.75em; margin: .08em; }
.dtab.many td { padding: .15em .2em; }
.dtab.many td.g { font-size: 1.45em; }

/* ===== warna koncer: A = MERAH (Juara 1), B = BIRU (Juara 2) ===== */
.jbox.j1 { background: linear-gradient(135deg, #ff4d4d, #c40000); color: #fff; border-color: #7a0000; }
.jbox.j2 { background: linear-gradient(135deg, #4d7dff, #0026b3); color: #fff; border-color: #001a80; }
.jbox .tbd { color: rgba(255,255,255,.75); }
.jbox .seri { color: #fff; }
.jbox .gc.xl { box-shadow: 0 0 0 3px #fff; }
.bar.a i { background: #ff4d4d; } .bar.b i { background: #6b8cff; }
.bar span { color: #111; mix-blend-mode: normal; }
.ktab tr.r1 td { background: #ffe1e1; }
.ktab tr.r2 td { background: #e1e8ff; }
.ktab tr.r1 td.lb { color: #c40000; } .ktab tr.r2 td.lb { color: #0026b3; }
.kj i { font-style: normal; font-weight: 700; padding: 0 .3em; border-radius: .25em; color: #fff; }
.kj i.ka { background: #e00000; } .kj i.kb { background: #0033e0; }