/* ============================================================
   PB.Fams — court cards, scoring screen, TV display
   Gaya flat broadcast: warna solid, garis tegas, tanpa glow.
   ============================================================ */

/* ---------- court cards (dashboard) ---------- */
.courts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.courts.one{grid-template-columns:1fr}
.court{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--speed) var(--ease);
}
.court:has(.cscore){border-color:var(--border-strong)}
.court:has(.badge-live){border-color:color-mix(in srgb,var(--primary) 45%,transparent)}

.court-h{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);font-size:.8rem;font-weight:750;color:var(--text-strong);
}
.court-h .spacer{flex:1}
.court-b{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}

.cscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.cscore .side{min-width:0}
.cscore .side .nm{font-size:.95rem;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong)}
.cscore .side .gm{font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px}
.cscore .side.r{text-align:right}
.cscore .pt{
  font-family:var(--font-num);font-weight:700;font-size:clamp(38px,6vw,56px);line-height:.95;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
.cscore .vs{color:var(--faint);font-size:.8rem}
.svc{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-left:6px;vertical-align:middle;
  animation:pulse 1.3s infinite;
}

/* keadaan kosong / nonaktif (dipakai juga oleh dashboard) */
.dsp-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted)}

/* ---------- scoring screen ---------- */
.sb{display:flex;flex-direction:column;gap:14px}
.sb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.sb-top .spacer{flex:1}
.sb-main{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}

.sb-side{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;text-align:center;position:relative;overflow:hidden;
  transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.sb-side.serving{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.sb-side.serving::before{content:"";position:absolute;top:0;left:18%;right:18%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.sb-side .team{font-size:1.05rem;font-weight:800;line-height:1.3;color:var(--text-strong)}
.sb-side .team u{text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.sb-side .pos{
  display:inline-block;min-width:20px;padding:1px 5px;margin-right:7px;
  border-radius:6px;font-size:.68rem;font-weight:800;text-align:center;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--muted);
  vertical-align:1px;
}
.sb-side .sub{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.11em;font-weight:750}
.sb-side .big{
  font-family:var(--font-num);font-weight:700;font-size:clamp(70px,18vw,190px);line-height:.85;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-strong);
  transition:transform .12s ease;
}
.sb-side .big.pop{animation:pop-sc .28s ease}
@keyframes pop-sc{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.sb-side .games{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sb-side .games b{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:3px 9px;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;
}
.sb-side .games b.won{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 50%,transparent);color:var(--primary-2);font-weight:800}

.sb-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:80px;color:var(--muted)}
.sb-mid .dash{font-family:var(--font-num);font-weight:600;font-size:2.2rem;color:var(--faint)}
.sb-mid .timer{font-variant-numeric:tabular-nums;font-size:.92rem;font-weight:750;color:var(--text)}

/* tombol +1 besar */
.tap{
  min-height:96px;border-radius:var(--radius);border:1px solid transparent;
  background:var(--primary);color:var(--primary-ink);font-size:1.1rem;font-weight:800;letter-spacing:.04em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  user-select:none;
  transition:filter .15s ease,transform .1s ease;
}
.tap:hover{filter:brightness(1.07)}
.tap:active{transform:scale(.985)}
.tap[disabled]{opacity:.4;cursor:not-allowed}
.tap.b{background:var(--info);color:var(--info-ink)}

.minus{min-height:46px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border-strong);cursor:pointer;font-weight:750;transition:all var(--speed) var(--ease)}
.minus:hover{background:var(--surface-3);border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}
.ph-legend{display:flex;gap:14px;margin:2px 0 10px;font-size:.78rem;font-weight:700;color:var(--text)}
.ph-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.ph-legend .a i{background:var(--primary)}
.ph-legend .b i{background:var(--info)}
.ph-game{margin-bottom:10px}
.ph-game:last-child{margin-bottom:0}
.ph-glbl{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:5px}
.ph-row{display:flex;flex-wrap:wrap;gap:5px}
.ph-pt{
  min-width:34px;text-align:center;padding:3px 7px;border-radius:8px;
  font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.ph-pt.a{background:var(--primary-soft);color:var(--primary-2)}
.ph-pt.b{background:var(--info-soft);color:var(--info)}
.ph-pt.cur{outline:2px solid var(--accent);outline-offset:1px}
.sb-actions{display:flex;gap:8px;flex-wrap:wrap}

/* banner game/match point & info */
.banner{
  padding:13px 18px;border-radius:var(--radius);text-align:center;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;
  background:var(--accent);color:var(--accent-ink);
  animation:pop .2s ease;
}
.banner.match{background:var(--danger-strong);color:#fff}
.banner.info{background:var(--info);color:var(--info-ink);letter-spacing:.06em;font-weight:800}
.pending{position:absolute;top:9px;right:12px;font-size:.62rem;color:var(--faint)}

@media (max-width:720px){
  .sb-main{grid-template-columns:1fr 1fr;gap:8px}
  .sb-mid{grid-column:1/-1;order:3;flex-direction:row;min-width:0}
  .sb-side{padding:14px 10px;border-radius:var(--radius)}
  .sb-side .big{font-size:clamp(64px,26vw,120px)}
  .tap{min-height:84px}
}

/* ============================================================
   MODE DISPLAY / TV — tampilan siaran layar penuh
   Selalu gelap & flat: kontras tinggi, terbaca dari jauh.
   ============================================================ */
body.display-mode{overflow:hidden;background:#05080d}
body.display-mode #sidebar,body.display-mode #topbar,body.display-mode #bottomnav{display:none}
body.display-mode #app{grid-template-columns:1fr}
body.display-mode #view{max-width:none;padding:0;height:100vh;height:100dvh;animation:none}

.dsp{
  position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;
  gap:clamp(10px,1.6vh,18px);
  padding:clamp(14px,2.2vh,26px) clamp(18px,2.6vw,34px);
  overflow:hidden;color:#eef2ff;
  background:#05080d;
}
.dsp>*{position:relative;z-index:1}

@keyframes dspIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dsp{animation:dspIn .4s cubic-bezier(.22,.9,.32,1)}

/* ---------- header ---------- */
.dsp-h{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.dsp-h .logo{
  width:clamp(40px,5vh,56px);height:clamp(40px,5vh,56px);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-primary);color:var(--primary-ink);
  border-radius:clamp(10px,1.1vw,14px);
  box-shadow:inset 0 1px 0 var(--btn-hi),0 4px 16px -6px var(--primary-glow);
}
.dsp-h .logo .ic{width:60%;height:60%}
.dsp-h .dsp-t{min-width:0}
.dsp-h h1{
  font-weight:800;letter-spacing:.01em;
  font-size:clamp(1.1rem,2.6vh,1.85rem);
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dsp-h .dsp-sub{
  font-size:clamp(.62rem,1.4vh,.82rem);color:rgba(200,215,240,.62);font-weight:600;
  letter-spacing:.04em;margin-top:2px;
}
.dsp-h .spacer{flex:1}
.dsp-h .dsp-livecnt{
  display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-num);font-weight:600;font-size:clamp(.9rem,2.2vh,1.3rem);letter-spacing:.08em;
  color:#4ade80;background:rgba(34,197,94,.1);border:1px solid rgba(74,222,128,.4);
  border-radius:99px;padding:clamp(4px,.8vh,7px) clamp(12px,1.4vw,18px);
}
.dsp-h .dsp-livecnt .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;animation:pulse 1.2s infinite}
.dsp-h .dsp-clock{
  font-family:var(--font-num);font-weight:700;font-size:clamp(2rem,7.4vh,3.3rem);line-height:.9;
  color:#fff;text-align:right;letter-spacing:.04em;
}
.dsp-h .dsp-clock small{
  display:block;font-family:var(--font);font-weight:700;
  font-size:clamp(.56rem,1.4vh,.72rem);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(200,215,240,.55);margin-top:clamp(2px,.5vh,5px);
}

/* ---------- grid lapangan ---------- */
.dsp-grid{
  flex:1;display:grid;gap:clamp(10px,1.6vh,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));
  align-content:stretch;min-height:0;
}
.dsp-grid.one{grid-template-columns:1fr}

/* ---------- kartu lapangan ---------- */
.dsp-court{
  container-type:size;
  position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);
  padding:clamp(12px,1.8vh,20px) clamp(16px,2vw,26px);
  min-height:0;overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.16);
  border-radius:clamp(12px,1.4vw,20px);
}
/* garis aksen atas saat LIVE — solid, tanpa glow */
.dsp-court.live::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--primary);
}
.dsp-court.live{border-color:rgba(74,222,128,.4)}

/* header kartu */
.dsp-court .hd{display:flex;align-items:center;gap:clamp(8px,1.2vw,12px);min-width:0}
.dsp-court .ct-num{
  width:clamp(28px,5.6cqw,54px);height:clamp(28px,5.6cqw,54px);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-weight:700;font-size:clamp(1.05rem,3.1cqw,1.9rem);color:var(--primary-ink);
  background:var(--primary);border-radius:clamp(8px,1vw,11px);
}
.dsp-court .ct-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.dsp-court .ct-t b{
  font-size:clamp(13px,2.8cqw,27px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dsp-court .ct-t span{font-size:clamp(11px,2.1cqw,19px);color:rgba(200,215,240,.55);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsp-court .hd .spacer{flex:1}

/* chip status */
.dsp-live{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-weight:800;letter-spacing:.14em;font-size:clamp(11px,2.1cqw,18px);
  color:#4ade80;border:1px solid rgba(74,222,128,.45);background:rgba(34,197,94,.12);
  border-radius:99px;padding:clamp(3px,.6vh,6px) clamp(9px,1.2vw,14px);
}
.dsp-live .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 1.15s infinite}
.dsp-live.idle{color:rgba(200,215,240,.62);border-color:rgba(148,163,184,.28);background:rgba(148,163,184,.08)}
.dsp-live.idle .dot{background:rgba(200,215,240,.5);animation:none}

/* badge game/match point */
.dsp-pt-badge{
  flex:none;font-weight:800;letter-spacing:.16em;font-size:clamp(10px,1.9cqw,16px);
  color:#fbbf24;border:1px solid rgba(251,191,36,.55);background:rgba(251,191,36,.12);
  border-radius:99px;padding:clamp(3px,.5vh,5px) clamp(8px,1vw,12px);
  animation:ptBlink 1.2s steps(2,start) infinite;
}
.dsp-pt-badge.danger{color:#f87171;border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.12)}
@keyframes ptBlink{50%{opacity:.5}}

/* body kartu — skor besar di atas, nama tim di bawah */
.dsp-court .bd{
  flex:1;display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr auto;
  grid-template-areas:"pt pt" "a b";
  gap:clamp(4px,.9vh,10px) clamp(14px,2.4vw,32px);
  min-height:0;
}
.dsp-court .side{display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px);min-width:0;justify-content:flex-end}
.dsp-court .side.a{grid-area:a}
.dsp-court .side.b{grid-area:b;align-items:flex-end;text-align:right}

/* nama tim + garis warna */
.dsp-court .nm{display:flex;align-items:center;gap:clamp(8px,1.4vw,14px);min-width:0}
.dsp-court .side.b .nm{justify-content:flex-end}
.dsp-court .nm-c{display:flex;flex-direction:column;min-width:0;line-height:1.08}
.dsp-court .nm-c b{
  font-size:clamp(16px,3.5cqw,42px);font-weight:800;color:#fff;line-height:1.12;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word;max-width:100%;
}
.dsp-court .nm-c span{
  font-size:clamp(12px,2.5cqw,30px);font-weight:600;color:rgba(200,215,240,.6);line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word;max-width:100%;margin-top:3px;
}
.dsp-court .nm .tbar{
  width:clamp(5px,1cqw,12px);flex:none;align-self:stretch;
  border-radius:99px;opacity:.95;
}
/* tim yang sedang servis */
.dsp-court .side.sv .nm-c b{color:#fbbf24}
.dsp-court .svc{
  width:clamp(11px,2.1cqw,24px);height:clamp(11px,2.1cqw,24px);flex:none;
  border-radius:50%;background:#fbbf24;margin:0;
  animation:pulse 1.2s infinite;
}

/* chip skor per game */
.dsp-court .gchips{display:flex;gap:clamp(4px,.8vw,7px);flex-wrap:wrap}
.dsp-court .side.b .gchips{justify-content:flex-end}
.dsp-court .gchip{
  min-width:clamp(28px,5.4cqw,52px);height:clamp(24px,4.4cqw,42px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-weight:600;font-size:clamp(1rem,2.9cqw,2rem);color:rgba(200,215,240,.7);
  background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.24);border-radius:clamp(7px,1vw,10px);
}
.dsp-court .gchip.won{color:#4ade80;background:rgba(34,197,94,.12);border-color:rgba(74,222,128,.45)}
.dsp-court .gchip.cur{color:#fff;border-color:rgba(251,191,36,.6)}

/* progress poin menuju target */
.dsp-court .bar2{height:clamp(6px,1.2cqw,14px);border-radius:99px;background:rgba(148,163,184,.14);overflow:hidden;width:100%}
.dsp-court .side.b .bar2{direction:rtl}
.dsp-court .bar2 i{display:block;height:100%;border-radius:inherit;background:#22c55e;transition:width .5s cubic-bezier(.22,.9,.32,1)}
.dsp-court .side.sv .bar2 i{background:#fbbf24}

/* skor raksasa */
.dsp-court .pt{
  grid-area:pt;align-self:center;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px);
  font-family:var(--font-num);font-weight:700;
  font-size:min(clamp(60px,40cqw,560px),max(60px,calc(118cqh - 42cqw)));line-height:.82;
}
.dsp-grid.one .dsp-court .pt{font-size:min(clamp(96px,38cqw,700px),max(80px,calc(118cqh - 26cqw)))}
.dsp-court .pt b{color:#fff;font-variant-numeric:tabular-nums;transition:color .3s ease}
.dsp-court .pt .dash{font-size:.42em;color:rgba(200,215,240,.26);font-weight:600}
.dsp-court.live .pt b:first-child{color:#4ade80}
.dsp-court.live .pt b:last-child{color:#fbbf24}
/* satu lapangan penuh: semua ikut membesar */
.dsp-grid.one .dsp-court .bd{gap:clamp(10px,2vh,22px) clamp(20px,4vw,60px)}
.dsp-grid.one .dsp-court .nm-c b{font-size:clamp(24px,5.2cqw,52px)}
.dsp-grid.one .dsp-court .nm-c span{font-size:clamp(16px,3.8cqw,36px)}
.dsp-grid.one .dsp-court .nm .tbar{width:clamp(7px,1.2cqw,16px)}

/* ---------- lapangan kosong ---------- */
.dsp-court.idle{background:#0b1220;border-color:rgba(148,163,184,.12)}
.dsp-court.idle .dsp-idle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.8vh,8px);min-height:0}
.dsp-court.idle .dsp-idle .ico{line-height:0;animation:floaty 3.6s ease-in-out infinite}
.dsp-court.idle .dsp-idle .ico .ic{width:clamp(2.2rem,9cqw,5rem);height:clamp(2.2rem,9cqw,5rem);stroke-width:1.4;color:var(--primary)}
/* ikon idle di luar layar TV (dashboard) */
.dsp-idle .ico{line-height:0}
.dsp-idle .ico .ic{width:32px;height:32px;stroke-width:1.6;color:var(--primary)}
.dsp-idle .warn .ic,.dsp-idle .ic.warn{color:var(--warn)}
.court-h .ic{width:15px;height:15px;color:var(--primary-2)}
.dsp-court.idle .dsp-idle b{font-size:clamp(14px,2.6cqw,26px);color:rgba(230,240,255,.8);text-align:center}
.dsp-court.idle .dsp-idle small{font-size:clamp(11px,1.8cqw,16px);color:rgba(200,215,240,.45);text-align:center}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- footer: up next & statistik ---------- */
.dsp-foot{
  display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(10px,1.6vh,18px);
  min-height:clamp(92px,14vh,136px);
}
.dsp-panel{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.16);border-radius:clamp(12px,1.4vw,20px);
  padding:clamp(10px,1.4vh,16px) clamp(14px,1.6vw,20px);
}
.dsp-panel h4{
  display:flex;align-items:center;gap:8px;margin-bottom:clamp(6px,.9vh,10px);
  font-size:clamp(.62rem,1.6vh,.8rem);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(200,215,240,.6);font-weight:800;
}
.dsp-panel h4::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--primary)}
.dsp-next{display:flex;flex-direction:column;gap:clamp(2px,.4vh,5px);min-height:0}
.dsp-next .it{
  display:flex;gap:clamp(6px,1vw,12px);align-items:center;
  font-size:clamp(.74rem,1.9vh,.95rem);color:rgba(230,240,255,.92);
  padding:clamp(2px,.5vh,5px) 0;border-bottom:1px solid rgba(148,163,184,.10);
  min-width:0;
}
.dsp-next .it:last-child{border-bottom:0}
.dsp-next .it .ct{
  font-size:clamp(.56rem,1.3vh,.68rem);color:rgba(200,215,240,.6);background:rgba(148,163,184,.12);
  border-radius:7px;padding:2px 8px;white-space:nowrap;font-weight:700;flex:none;
}
.dsp-next .it .it-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:center}
.dsp-next .it em{font-style:normal;opacity:.4;font-size:.85em}
.dsp-next .it b{font-weight:800;color:#4ade80;font-variant-numeric:tabular-nums}
.dsp-next .it .rank{
  width:clamp(20px,2.4vh,26px);height:clamp(20px,2.4vh,26px);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.62rem,1.5vh,.76rem);font-weight:800;border-radius:8px;border:0;
}
.dsp-next .it .rank-1{background:#fbbf24;color:#3b2302}
.dsp-next .it .rank-2{background:#cbd5e1;color:#1e293b}
.dsp-next .it .rank-3{background:#e2a874;color:#3b1c06}
.dsp-next .it .rank-4,.dsp-next .it .rank-5{background:rgba(148,163,184,.16);color:rgba(230,240,255,.75)}

.dsp-next .it.muted{color:rgba(200,215,240,.45)}

.dsp-panel .bar2{height:clamp(5px,.9cqw,10px);border-radius:99px;background:rgba(148,163,184,.14);overflow:hidden}
.dsp-panel .bar2 i{display:block;height:100%;border-radius:inherit;background:#22c55e}

/* ---------- responsif TV ---------- */
@media (max-width:980px){
  .dsp-foot{grid-template-columns:1fr}
  .dsp-h .dsp-livecnt{display:none}
}
@media (max-width:760px){
  .dsp{padding:10px}
  .dsp-h .dsp-clock{font-size:1.8rem}
  .dsp-grid{grid-template-columns:1fr;overflow:auto}
  .dsp-foot{min-height:0}
}