/* ===========================
   DISPLAY — KATA BENDERA (SOLID BOLD • STATIC)
   - Skor super besar
   - Teks atlet sedikit turun
   - Timer slim
   - Label "AKA/ AO BERMAIN" menempel di atas timer
   - Tanpa animasi apa pun (static clean)
   =========================== */

:root{
  --bg1:#0B0D12;
  --bg2:#0B0D12;
  --panel:#0E131B;
  --text:#F5F7FA;
  --muted:#B7C0CE;
  --border:#1C2330;
  --accent:#0EA5E9;
  --aka:#C62828;
  --ao:#1E40AF;
}

html,body{ height:100%; overflow:hidden }
body{
  margin:0;
  color:var(--text);
  background: var(--bg1);
}

/* ====== HEADER ====== */
.sb-header-title{ text-align:center; padding:16px 0 10px }
.title-stack{ display:flex; flex-direction:column; align-items:center; gap:8px }

#d-title-main{
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 900; letter-spacing:.6px; text-transform:uppercase;
  color: var(--text);
}
#d-title-main::after{
  content:""; display:block; height:4px; width:min(200px, 18vw); margin:10px auto 0; border-radius:999px;
  background: linear-gradient(90deg, var(--aka) 0%, var(--ao) 100%);
}
#d-title-sub{
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight:800; color: var(--muted);
}
#d-title-loc{
  font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight:700; font-style:italic; opacity:.9;
}

/* ====== GRID ====== */
.display-grid{
  display:grid; grid-template-columns: 1fr minmax(320px, .9fr) 1fr;
  gap:22px; padding:18px; height:calc(100% - 96px);
}

/* ====== CARD ====== */
.disp-card{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--panel);
  border:2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  display:flex;
  min-height:0;
}
.disp-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:10px;
}
.disp-card.aka::before{ background: var(--aka); }
.disp-card.ao::before{  background: var(--ao); }

/* highlight lead (tanpa motion) */
.disp-card.lead{
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 0 3px rgba(14,165,233,.35) inset;
  transform: translateY(-2px);
}

/* ====== PANEL + TEKS ATLET ====== */
.disp-panel{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:32px 24px 22px; /* teks turun 8px dari tepi atas */
}
.athlete{
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  transform: translateY(8px);
}
.name{
  font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}
.contingent{
  font-weight:800; color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.kata{
  font-weight:800; color: var(--muted); font-style:italic;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
}

/* ====== SKOR SUPER ====== */
.score-float{
  margin-top:auto; /* skor otomatis "jatuh" ke bawah panel */
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(48px, 7.8vw, 140px);
  font-weight: 900;
  min-width: 280px;
  padding: 26px 34px;
  border-radius: 18px;
  color:#fff;
  background:#0A0F16;
  border:2px solid #1C2330;
  box-shadow: 0 14px 34px rgba(0,0,0,.50);
}
/* Tidak ada efek bump/animasi */
.disp-card.aka .score-float{
  box-shadow:
    0 14px 34px rgba(0,0,0,.50),
    0 0 0 6px rgba(198,40,40,.70) inset;
}
.disp-card.ao .score-float{
  box-shadow:
    0 14px 34px rgba(0,0,0,.50),
    0 0 0 6px rgba(30,64,175,.70) inset;
}

/* ====== TIMER (slim) ====== */
.disp-center{ display:flex; align-items:center; justify-content:center; margin-top:12px; }
.timer-box.big{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size: clamp(32px, 5.4vw, 76px);
  font-weight: 900;
  padding: 12px 22px;
  min-width: 260px;
  background:#0A0F16;
  color:var(--text);
  border:2px solid #1C2330;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.timer-box .colon{ opacity:.85 }

/* ====== MODE ====== */
body.mode-timer-aka .display-grid{ grid-template-columns: 1fr minmax(320px, .9fr); }
body.mode-timer-aka #card-ao{ display:none; }
body.mode-timer-aka #timerSection{ display:flex !important; }

body.mode-timer-ao .display-grid{ grid-template-columns: minmax(320px, .9fr) 1fr; }
body.mode-timer-ao #card-aka{ display:none; }
body.mode-timer-ao #timerSection{ display:flex !important; }

/* ====== LABEL di atas TIMER ====== */
.timer-box.big{ position: relative; overflow: visible; }

/* Teks label (tanpa animasi) */
.timer-box.big[data-playing]::before{
  content: attr(data-playing-label);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 12px);
  z-index: 3;

  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .06rem;
  text-transform: uppercase;
  pointer-events: none;

  color: var(--text);
  text-shadow:
    0 1px 0 rgba(0,0,0,.70),
    0 2px 0 rgba(0,0,0,.55),
    0 3px 4px rgba(0,0,0,.55),
    0 8px 22px rgba(0,0,0,.35);
}

/* Pastikan aturan lama tidak aktif */
#timerSection[data-playing]::before{ content:none !important; }

/* ====== (Tidak ada shine/label sweep/card overlay) ====== */
/* Semua blok ::after animasi & @keyframes telah dihapus */

/* ====== RESPONSIVE ====== */
@media (max-width:1080px){
  .score-float{ min-width:240px; padding:22px 28px; }
}
@media (max-width:520px){
  .score-float{ min-width:200px; padding:18px 24px; }
  .timer-box.big{ min-width:240px; font-size: clamp(30px, 7vw, 64px); }
  .timer-box.big[data-playing]::before{
    bottom: calc(100% + 10px);
    font-size: clamp(18px, 2.4vw, 24px);
  }
}