/* ELS Fit — gaya kelompok layar v3: check-in QR (/s/:id/checkin), papan Hari H (/s/:id/live), rekap (/s/:id/rekap).
   Hanya memakai token (tokens.css/fit.css); semua kelas berawalan v3-. Satu-satunya warna mentah: hitam-putih QR (syarat keterbacaan pemindai).
   Nilai dinamis tidak dipakai di sini (posisi avatar lapangan lewat kelas .pa1 .pa2 .pb1 .pb2). Mobile-first 360-430 px; dua kolom >= 1100 px; Mode TV: html.v3-tv. */

.v3 { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.v3 > * { min-width: 0; }
.main > .v3-live { max-width: none; }
@media (min-width: 900px) {
  .main > .v3-live { max-width: 1240px; }
  html.v3-tv .main > .v3-live { max-width: none; }
}

/* ================================================================== kepala layar */
.v3-head { display: flex; flex-direction: column; gap: var(--space-2); }
.v3-head h1 { font-size: var(--fs-xl); letter-spacing: -.02em; overflow-wrap: anywhere; }
.v3-head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.v3 .back, .v3-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap);
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
}
.v3 .back:hover, .v3-link:hover { text-decoration: underline; }
.v3-sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-muted); font-size: var(--fs-sm); }
.v3-sum b { color: var(--color-text); font-size: var(--fs-md); }

/* indikator sambungan polling */
.v3-conn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ok);
}
.v3-conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.v3-conn.lost { color: var(--due); }
.v3-conn.lost i { background: var(--due); box-shadow: 0 0 0 3px var(--due-soft); }

/* ================================================================== tata letak papan */
.v3-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.v3-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (min-width: 1100px) {
  .v3-grid:not(.single) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
}
.v3-sec-title { margin-bottom: var(--space-2); font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
.v3-card { min-width: 0; }
.v3-card-actions { display: flex; gap: var(--space-2); }
.v3-card-actions .btn { flex: 1; }
.v3-recap-link { text-align: center; color: var(--color-link); text-decoration: none; min-height: var(--tap); justify-content: center; }

/* giliranmu */
.v3-turn-text { font-size: var(--fs-lg); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.v3-turn-title { margin: 0; }

/* ================================================================== lapangan */
.v3-courts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.v3-court-card { gap: var(--space-3); }
.v3-court-card.busy { border-color: var(--ok-line); }
.v3-court { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.v3-court-svg { display: block; width: 100%; height: auto; }
.v3-court-svg .surf { fill: var(--info-soft); }
.v3-court-svg .ln { fill: none; stroke: var(--info); stroke-opacity: .55; stroke-width: .55; }
.v3-court-svg .net { stroke: var(--accent-2); stroke-width: 1.4; }
.v3-court-pl { position: absolute; transform: translate(-50%, -50%); display: grid; }
.v3-court-pl .av { box-shadow: 0 0 0 2px var(--color-surface-solid); }
.v3-court-pl.pa1 { left: 21%; top: 30%; }
.v3-court-pl.pa2 { left: 21%; top: 70%; }
.v3-court-pl.pb1 { left: 79%; top: 30%; }
.v3-court-pl.pb2 { left: 79%; top: 70%; }

/* ================================================================== laga (dua tim + VS / skor) */
.v3-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.v3-team { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3-team.b { align-items: stretch; text-align: right; }   /* stretch + row-reverse: baris pemain memenuhi kolom (nama bisa terpotong …) tetap rata kanan */
.v3-pl { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: var(--fs-sm); font-weight: 700; }
.v3-team.b .v3-pl { flex-direction: row-reverse; }
/* nama membungkus ke baris kedua (tidak dipotong …): pencatat skor harus melihat nama lengkap */
.v3-pl-name { position: relative; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.v3-pl.me .v3-pl-name { color: var(--color-link); }
.v3-vs { display: flex; align-items: center; justify-content: center; gap: 6px; }
.v3-vs.pending { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; color: var(--color-muted); }
.v3-match.compact .v3-pl { font-size: var(--fs-xs); }
/* laga selesai: papan skor dua baris */
.v3-match.scoreboard { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.v3-sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.v3-sb-row + .v3-sb-row { border-top: 1px dashed var(--color-border); }
.v3-sb-score { min-width: 2ch; text-align: right; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--color-muted); }
.v3-sb-row.win .v3-sb-score { color: var(--color-text); }
.v3-sb-row:not(.win) .v3-pl { font-weight: 500; }
.v3-match.compact .v3-sb-score { font-size: 1.2rem; }

/* ================================================================== antrean */
.v3-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.v3-queue-item { display: flex; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.v3-queue-item:first-child { padding-top: 0; border-top: 0; }
.v3-queue-no {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--queue-soft); color: var(--queue); font-size: var(--fs-xs); font-weight: 800;
}
.v3-queue-first { margin-bottom: var(--space-1); }

/* ================================================================== kehadiran dan hasil */
.v3-att { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-att-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 4px 0; border-top: 1px solid var(--color-border); font-size: var(--fs-sm);
}
.v3-att-row:first-child { border-top: 0; }
.v3-att-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-weight: 700; }
.v3-att-nm { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.v3-att-name .cap { flex: none; }
.v3-att-row.me .v3-att-name { color: var(--color-link); }
.v3-att-n { min-width: 3.4em; text-align: right; }
.v3-pips { display: flex; gap: 3px; }
.v3-pips i { width: 11px; height: 8px; border-radius: 2px; background: var(--track); }
.v3-pips i.on { background: var(--ok); }

.v3-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.v3-result { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.v3-result:first-child { padding-top: 0; border-top: 0; }
.v3-result-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--fs-xs); }

/* ================================================================== panel admin */
.v3-admin {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-lg); background: var(--accent-soft);
}
.v3-admin-eyebrow { padding: 0 var(--space-1); color: var(--accent-ink); }
.v3-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.v3-admin-grid > :nth-child(1) { order: 1; }
.v3-admin-grid > :nth-child(3) { order: 2; }
.v3-admin-grid > :nth-child(2) { order: 3; }
@media (min-width: 900px) {
  .v3-admin-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .v3-admin-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .v3-admin-grid > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .v3-admin-grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

.v3-qr-box { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); }
.v3-qr-box > .v3-qr-frame { order: 1; }
.v3-qr-box > .v3-qr-url { order: 2; width: 100%; min-width: 0; }
.v3-qr-box > .v3-qr-side { order: 3; }
@media (min-width: 640px) {
  .v3-qr-box { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: start; }
  .v3-qr-box > .v3-qr-frame { grid-column: 1; grid-row: 1; }
  .v3-qr-box > .v3-qr-side { grid-column: 2; grid-row: 1; }
  .v3-qr-box > .v3-qr-url { grid-column: 1 / -1; grid-row: 2; }
}
.v3-qr-frame { width: min(100%, 260px); overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
.v3-qr-side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; width: 100%; }
.v3-qr { display: block; width: 100%; height: auto; }
.v3-qr .bg { fill: #fff; }   /* hitam-putih mutlak: syarat keterbacaan pemindai QR, di tema terang maupun gelap */
.v3-qr .dk { fill: #000; }
.v3-qr-full { width: min(100%, 70vh, 480px); margin: 0 auto; overflow: hidden; border-radius: var(--radius); }
.v3-url { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-muted); overflow-wrap: anywhere; word-break: break-all; text-align: center; }

.v3-pres-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-5); }
@media (min-width: 900px) { .v3-pres-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v3-pres-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); min-width: 0; }
.v3-pres-row .btn { flex: none; }

/* ================================================================== sheet skor */
.v3-score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.v3-score-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.v3-score-team { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; color: var(--color-muted); font-size: var(--fs-xs); font-weight: 700; }
.v3-score-input { min-height: 64px; text-align: center; font-size: 2rem; font-weight: 800; }
.v3-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.v3-actions .btn { flex: 1; }
.v3-preview { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-2); }
.v3-preview-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.v3-preview-list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.v3-preview-list b.up { color: var(--ok); }
.v3-preview-list b.down { color: var(--due); }

/* ================================================================== check-in */
.v3-checkin { max-width: 560px; }
.v3-big-btn { min-height: 64px; font-size: var(--fs-lg); }

/* ================================================================== rekap */
.v3-recap-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.v3-stars { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .v3-stars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v3-highlight-name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.v3-big strong { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.v3-feel { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.v3-feel li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.v3-feel-l { color: var(--color-muted); }
.v3-feel-n { text-align: right; }
.v3-pos { color: var(--ok); }
.v3-neg { color: var(--due); }
.v3-scores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v3-feels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-scores .opt.center .opt-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-2) 2px; }
.v3-emo { font-size: 1.4rem; line-height: 1; }
.v3-textarea { display: block; min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.4; }
.v3-form legend { margin-bottom: var(--space-2); }
.v3-kudos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-kudos-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.v3-kudos-line:first-child { border-top: 0; }
.v3-kudos-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* ================================================================== Mode TV (layar lebar / proyektor) */
html.v3-tv { font-size: clamp(100%, 1.25vw, 150%); }
html.v3-tv .topbar, html.v3-tv .tabbar { display: none; }
html.v3-tv .main { margin-left: 0; max-width: none; padding: var(--space-4) var(--space-5); }
html.v3-tv .v3-head h1 { font-size: var(--fs-2xl); }
html.v3-tv .v3-court { max-width: min(100%, 640px); }
.v3-tvqr { align-items: center; text-align: center; }
.v3-tvqr .v3-qr-frame { width: min(100%, 70vh, 420px); }
.v3-tvqr .v3-url { font-size: var(--fs-sm); }
html.v3-tv .chip { font-size: var(--fs-sm); min-height: 28px; }
@media (min-width: 900px) { html.v3-tv .main > * { max-width: none; } }

/* layar sempit (360 px): kotak pilihan "jumlah game" tidak mepet tepi */
@media (max-width: 400px) {
  .v3-feels .opt-box { padding-left: var(--space-1); padding-right: var(--space-1); font-size: var(--fs-sm); }
}

/* judul sheet memuat nama pemain (sampai 80 karakter tanpa spasi): patahkan di mana saja alih-alih meluap keluar sheet */
.sheet-head .grow { min-width: 0; }
.sheet-head p { overflow-wrap: anywhere; }