@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Chakra+Petch:wght@400;500;600&display=swap');

:root {
  --void:#04070b;
  --slate-0:#080c12;
  --slate-1:#0e131b;
  --slate-2:#141a24;
  --slate-3:#1c2431;
  --line:#222b39;
  --line-2:#313d4f;

  --text:#eceae6;
  --text-2:#98a2b1;
  --text-3:#616c7c;

  --red:#c0272d;
  --red-2:#e8383f;
  --red-dk:#71090e;

  --gold:#c9a961;
  --gold-2:#8a6f35;

  --biru:#4a7fa8;

  --q1:#6b5a3e; --q2:#7d7030; --q3:#2f6b45; --q4:#5a3a7a; --q5:#8a2f2f;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  background:
    radial-gradient(1400px 760px at 50% -14%, rgba(192,39,45,.15), transparent 58%),
    radial-gradient(1000px 620px at 88% 108%, rgba(74,127,168,.07), transparent 62%),
    linear-gradient(180deg,#0d1219 0%, var(--void) 62%);
  background-attachment:fixed;
  color:var(--text);
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.65; -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--void); }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:5px;
                            border:2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background:#465468; }

/* ================= TOPBAR ================= */

.topbar {
  position:sticky; top:0; z-index:200;
  background:rgba(6,9,14,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar-inner {
  display:flex; align-items:stretch;
  padding:0 26px; max-width:1720px; margin:0 auto; height:64px;
}

.logo {
  display:flex; flex-direction:column; justify-content:center;
  font-family:"Barlow Condensed",sans-serif;
  font-size:20px; font-weight:700; line-height:.92;
  letter-spacing:.06em; text-transform:uppercase;
  padding-right:30px; margin-right:24px; white-space:nowrap; flex:none;
  border-right:1px solid rgba(255,255,255,.08);
}
.logo span:first-child { color:#fff; }
.logo span:last-child { color:var(--red-2); }

.topbar nav { display:flex; align-items:stretch; flex:1; gap:4px; }

/* Tombol menu: hover pakai latar, aktif pakai garis.
   Dibedakan supaya tidak terlihat dua-duanya aktif. */
.nav-btn {
  position:relative; background:none; border:none;
  color:var(--text-3); padding:0 15px; border-radius:6px 6px 0 0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:color .16s, background .16s;
}
.nav-btn::after {
  content:""; position:absolute; left:14px; right:14px; bottom:0;
  height:3px; border-radius:2px 2px 0 0; background:var(--red-2);
  opacity:0; transform:translateY(3px);
  transition:opacity .2s, transform .2s;
}
.nav-btn:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-btn.active { color:#fff; }
.nav-btn.active::after { opacity:1; transform:none; }

/* Dropdown Lainnya */
.nav-drop { position:relative; display:flex; }
.nav-lain .panah { font-size:10px; margin-left:5px; opacity:.65;
                   display:inline-block; transition:transform .2s; }
.nav-drop:has(.buka) .nav-lain .panah { transform:rotate(180deg); }
.nav-drop:has(.buka) .nav-lain { color:var(--text); background:rgba(255,255,255,.05); }

.drop-menu {
  position:absolute; top:calc(100% + 7px); left:0; z-index:210;
  min-width:246px; padding:7px;
  background:rgba(14,19,27,.99); backdrop-filter:blur(16px);
  border:1px solid var(--line-2); border-radius:9px;
  box-shadow:0 18px 48px rgba(0,0,0,.75);
  display:none; flex-direction:column; gap:2px;
  animation:dropTurun .18s ease;
}
.drop-menu.buka { display:flex; }
@keyframes dropTurun { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} }

.drop-item {
  display:flex; align-items:center; gap:12px;
  background:none; border:none; border-radius:6px;
  padding:10px 12px; text-align:left; color:var(--text-2);
  font-family:"Inter",sans-serif;
}
.drop-item:hover { background:rgba(255,255,255,.07); color:var(--text); }
.drop-item.aktif { background:rgba(192,39,45,.16); }
.drop-item.aktif b { color:var(--red-2); }
.drop-ikon {
  width:32px; height:32px; flex:none; border-radius:6px; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.drop-item b { display:block; font-family:"Barlow Condensed",sans-serif;
               font-size:14.5px; font-weight:600; letter-spacing:.08em;
               text-transform:uppercase; color:var(--text); }
.drop-item small { display:block; font-size:11px; color:var(--text-3); margin-top:1px; }

/* Sisi kanan */
.topbar-right {
  display:flex; align-items:center; gap:11px;
  padding-left:22px; margin-left:14px; flex:none;
  border-left:1px solid rgba(255,255,255,.08);
}
.nav-ikon {
  width:36px; height:36px; border-radius:8px; font-size:17px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  color:var(--text-2); display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.nav-ikon:hover { color:#fff; background:rgba(255,255,255,.1);
                  border-color:rgba(255,255,255,.2); transform:rotate(45deg); }
.nav-ikon.active { color:#fff; background:rgba(192,39,45,.22); border-color:var(--red); }

.version {
  font-family:"Barlow Condensed",sans-serif;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  padding:6px 13px; border-radius:20px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}

@media (max-width:1180px) {
  .nav-btn { padding:0 11px; font-size:13.5px; letter-spacing:.07em; }
  .logo { font-size:18px; padding-right:20px; margin-right:16px; }
}

/* ================= MAIN ================= */

.main { padding:34px 42px 80px; max-width:1720px; margin:0 auto; }

.page { display:none; animation:fade .3s ease; }
.page.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }

.page-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:22px; padding-bottom:20px; margin-bottom:26px;
  border-bottom:1px solid var(--line); position:relative; flex-wrap:wrap;
}
.page-header::after {
  content:""; position:absolute; left:0; bottom:-1px; width:82px; height:3px;
  background:var(--red-2);
}

.eyebrow { font-family:"Barlow Condensed",sans-serif; font-size:12px; font-weight:600;
           letter-spacing:.32em; text-transform:uppercase; color:var(--red-2); margin-bottom:6px; }
h1 { font-family:"Barlow Condensed",sans-serif; font-size:44px; font-weight:700;
     letter-spacing:.02em; text-transform:uppercase; line-height:.98; }
.page-header p { color:var(--text-2); font-size:13.5px; margin-top:8px; max-width:660px; }
h2 { font-family:"Barlow Condensed",sans-serif; font-size:22px; font-weight:600;
     letter-spacing:.05em; text-transform:uppercase; }
h3 { font-family:"Barlow Condensed",sans-serif; font-size:16px; font-weight:600;
     letter-spacing:.06em; text-transform:uppercase; }

/* ================= PANEL ================= */

.panel {
  background:linear-gradient(168deg, rgba(28,36,49,.72), rgba(10,14,19,.92));
  border:1px solid var(--line); border-radius:8px; padding:24px; position:relative;
  backdrop-filter:blur(3px);
}
.panel-title { display:flex; justify-content:space-between; align-items:flex-start;
               gap:14px; margin-bottom:17px; }
.panel-title p { color:var(--text-2); font-size:12.5px; margin-top:4px;
                 text-transform:none; letter-spacing:0; }

/* ================= FORM ================= */

label { display:block; font-family:"Barlow Condensed",sans-serif; font-size:12px;
        font-weight:600; letter-spacing:.19em; text-transform:uppercase;
        color:var(--text-3); margin:19px 0 8px; }
.panel > label:first-child { margin-top:0; }

input, textarea, select {
  width:100%; background:rgba(4,7,11,.75); border:1px solid var(--line-2);
  border-radius:6px; padding:11px 14px; color:var(--text);
  font-family:inherit; font-size:13.5px; transition:border-color .18s, box-shadow .18s;
}
textarea { resize:vertical; line-height:1.7; min-height:84px; }
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(192,39,45,.16);
}
input::placeholder, textarea::placeholder { color:var(--text-3); }
select { cursor:pointer; }
select optgroup { background:var(--slate-0); color:var(--gold); font-style:normal;
                  font-weight:600; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
select option { background:var(--slate-2); color:var(--text); padding:7px; }

.two-column { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .two-column{grid-template-columns:1fr} }

/* ================= BUTTONS ================= */

button { font-family:inherit; cursor:pointer; transition:all .18s; }

.primary, .generate-btn {
  background:var(--red); border:1px solid rgba(255,255,255,.1); color:#fff;
  padding:12px 26px; border-radius:6px;
  font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.primary:hover, .generate-btn:hover { background:var(--red-2);
  box-shadow:0 5px 22px rgba(192,39,45,.34); transform:translateY(-1px); }
.generate-btn { width:100%; margin-top:22px; padding:15px; font-size:17px; }
.primary:disabled, .generate-btn:disabled, .small-btn:disabled {
  opacity:.3; cursor:not-allowed; transform:none; box-shadow:none; }

.small-btn, .setting-button {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  color:var(--text-2); padding:9px 17px; border-radius:20px;
  font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.small-btn:hover, .setting-button:hover {
  color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }

/* ================= STAT CARD ================= */

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
         gap:16px; margin-bottom:24px; }

.stat-card {
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(28,36,49,.8), rgba(10,14,19,.94));
  border:1px solid var(--line); border-radius:8px; padding:22px 24px;
  display:flex; align-items:center; gap:17px;
}
.stat-card::after {
  content:""; position:absolute; right:-24px; bottom:-30px;
  width:130px; height:130px; opacity:.045; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, #fff 0 3px, transparent 3px),
             radial-gradient(circle at 50% 50%, transparent 38%, #fff 38% 41%, transparent 41%);
  transform:rotate(-12deg);
}
.stat-card:nth-child(1) { border-top:2px solid var(--text-3); }
.stat-card:nth-child(2) { border-top:2px solid var(--gold-2); }
.stat-card:nth-child(3) { border-top:2px solid var(--biru); }
.stat-card:nth-child(4) { border-top:2px solid var(--red); }

.stat-icon { width:46px; height:46px; flex:none; display:flex; align-items:center;
             justify-content:center; border-radius:8px; font-size:21px;
             background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
.stat-card span { display:block; font-size:11.5px; letter-spacing:.04em; color:var(--text-2); }
.stat-card strong { display:block; font-family:"Barlow Condensed",sans-serif;
                    font-size:30px; font-weight:700; line-height:1.15; }

/* ================= LAYOUT ================= */

.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-bottom:17px; }
@media (max-width:950px){ .dashboard-grid{grid-template-columns:1fr} }
.generator-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:1050px){ .generator-layout{grid-template-columns:1fr} }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; align-items:start; }
@media (max-width:950px){ .settings-grid{grid-template-columns:1fr} }

.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.quick-actions button { background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--text-2); padding:14px; border-radius:6px; font-size:13px; text-align:left; }
.quick-actions button:hover { color:#fff; border-color:var(--red);
  background:rgba(192,39,45,.12); }

/* Segmented control ala situs resmi */
.format-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.format { background:rgba(255,255,255,.035); border:1px solid var(--line);
          color:var(--text-2); padding:12px 14px; border-radius:6px;
          font-size:12.5px; text-align:left; }
.format:hover { color:var(--text); background:rgba(255,255,255,.07); }
.format.active { background:var(--red); border-color:var(--red-2); color:#fff; font-weight:500;
                 box-shadow:0 3px 14px rgba(192,39,45,.3); }

.result-panel { display:flex; flex-direction:column; }
.result-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px; }
.result-header label { margin:0 0 3px; }
#result { flex:1; min-height:470px; font-size:13px; line-height:1.8; }

.tips-panel { margin-bottom:17px; }
.workflow { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-top:17px; }
.workflow > div { background:rgba(255,255,255,.03); border:1px solid var(--line);
                  border-radius:6px; padding:16px 19px; }
.workflow b { display:block; font-family:"Barlow Condensed",sans-serif; color:var(--red-2);
              font-size:21px; font-weight:700; }
.workflow span { font-size:12.5px; color:var(--text-2); }

.activity { min-height:98px; display:flex; align-items:center; color:var(--text-3); font-size:13px; }
.activity-item { display:flex; gap:13px; align-items:center; }
.activity-item span { font-size:22px; }
.activity-item b { display:block; font-size:13.5px; }
.activity-item small { color:var(--text-3); font-size:11.5px; }

.setting-row { display:flex; justify-content:space-between; align-items:center; gap:18px;
               padding:16px 0; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:none; }
.setting-row b { display:block; font-size:13.5px; font-weight:500; }
.setting-row span { display:block; font-size:12px; color:var(--text-3); margin-top:2px; }
.setting-row select, .setting-row input[type=range] { max-width:220px; }

.switch { position:relative; width:46px; height:25px; flex:none; margin:0; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; }
.switch > span { position:absolute; inset:0; background:var(--line-2);
                 border-radius:13px; transition:background .2s; }
.switch > span::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
                        background:var(--text-2); border-radius:50%;
                        transition:transform .2s, background .2s; }
.switch input:checked ~ span { background:var(--red); }
.switch input:checked ~ span::after { transform:translateX(21px); background:#fff; }

.about strong { font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:700;
                letter-spacing:.11em; text-transform:uppercase; }
.about p { color:var(--text-2); font-size:12.5px; margin:8px 0; }
.about span { font-size:11px; color:var(--text-3); }

/* ================= TEMPLATE CARD ================= */

.template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:16px; }
.template-card {
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(192,39,45,.3), transparent 62%),
    linear-gradient(168deg, rgba(28,36,49,.85), rgba(8,12,18,.96));
  border:1px solid var(--line); border-radius:8px; padding:22px;
  transition:all .2s;
}
.template-card:hover { border-color:var(--red); transform:translateY(-3px);
                       box-shadow:0 12px 34px rgba(0,0,0,.55); }
.template-icon { font-size:29px; margin-bottom:12px; }
.template-card h3 { font-size:17px; margin-bottom:7px; color:#fff; }
.template-card p { font-size:12.5px; color:var(--text-2); min-height:44px; }
.template-actions { display:flex; gap:6px; margin-top:17px; }
.template-actions button {
  flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  color:var(--text-2); padding:8px 4px; border-radius:20px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.template-actions button:hover { background:rgba(255,255,255,.11); color:#fff; }
.delete-template:hover { background:rgba(192,39,45,.28) !important;
                         border-color:var(--red) !important; color:#fff !important; }

/* ============ TAMPILAN GAYA WIKI (halaman detail karakter) ============ */

.wiki-teks {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 18px;
}
.wiki-teks p { margin: 0 0 9px; }
.wiki-teks p:last-child { margin-bottom: 0; }

.wiki-teks ul {
  margin: 0 0 9px;
  padding-left: 18px;
  list-style: none;
}
.wiki-teks li {
  position: relative;
  margin-bottom: 5px;
}
.wiki-teks li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--merah, #c0272d);
}

/* Lore dibedakan: miring, diberi garis tepi, seperti kutipan arsip */
.wiki-teks.lore {
  font-style: italic;
  color: var(--text-3);
  border-left: 2px solid rgba(192, 39, 45, .45);
  padding-left: 14px;
}

/* Bagian tambahan yang bisa dibuka-tutup */
.wiki-bagian {
  border: 1px solid var(--garis, #2a3038);
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
}
.wiki-bagian summary {
  cursor: pointer;
  padding: 9px 13px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255, 255, 255, .025);
  user-select: none;
  list-style: none;
}
.wiki-bagian summary::-webkit-details-marker { display: none; }
.wiki-bagian summary::before {
  content: "+";
  display: inline-block;
  width: 14px;
  color: var(--merah, #c0272d);
  font-weight: 700;
}
.wiki-bagian[open] summary::before { content: "\2212"; }
.wiki-bagian summary:hover { background: rgba(255, 255, 255, .05); }
.wiki-bagian .wiki-teks {
  padding: 12px 13px 4px;
  margin-bottom: 0;
}

.wiki-sumber {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--garis, #2a3038);
  font-size: 11px;
  color: var(--text-3);
}
.wiki-sumber span { word-break: break-all; opacity: .8; }

#zoomTanda {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 9999; padding: 7px 16px;
  background: rgba(10, 13, 18, .93); border: 1px solid #2a3038; border-radius: 5px;
  font-family: "Barlow Condensed", sans-serif; font-size: 15px; letter-spacing: .1em;
  color: #e9e7e2; opacity: 0; pointer-events: none; transition: opacity .18s;
}
#zoomTanda.show { opacity: 1; }

/* ==================== DRAFT TURNAMEN ==================== */

/* Toolbar operator: aksi utama dulu, lalu kelompok Draft & Overlay yang
   dipisah garis tipis supaya tidak terbaca sebagai satu tumpukan tombol. */
.dr-atas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.dra-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dra-cluster.utama { gap: 8px; }
.dra-cluster + .dra-cluster { padding-left: 14px; border-left: 1px solid var(--line-2); }
.dra-l {
  font-family: "Barlow Condensed", sans-serif; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
  margin-right: 2px; align-self: center;
}
.dr-atas .primary { padding: 9px 20px; font-size: 13px; border-radius: 5px; }
.dr-atas .small-btn { padding: 7px 13px; font-size: 12px; letter-spacing: .1em; }
@media (max-width: 820px) {
  .dra-cluster + .dra-cluster { padding-left: 0; border-left: 0; }
}

/* Kepala halaman turnamen — sebelumnya polos; disamakan dengan .page-header. */
#draft > .head, #tournament > .head, #globalban > .head {
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); position: relative;
}
#draft > .head::after, #tournament > .head::after, #globalban > .head::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 60px; height: 3px; background: var(--red-2);
}
#draft > .head p, #tournament > .head p, #globalban > .head p {
  color: var(--text-2); font-size: 13px; margin-top: 7px; max-width: 620px;
}

.draft-atur {
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 6px; margin-bottom: 14px; overflow: hidden;
}
.draft-atur summary {
  cursor: pointer; padding: 9px 13px; list-style: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2, #9aa3b0);
}
.draft-atur summary::-webkit-details-marker { display: none; }
.draft-atur summary::before { content: "+"; display: inline-block; width: 14px; color: var(--merah,#c0272d); font-weight: 700; }
.draft-atur[open] summary::before { content: "\2212"; }
.draft-atur-isi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px; padding: 3px 13px 13px;
}
.draft-atur-isi label { font-size: 10.5px; color: var(--text-3, #6b7482); display: block; }
.draft-atur-isi label small { opacity: .7; }
.draft-atur-isi .dr-lebar { grid-column: span 2; }
.draft-atur-isi input, .draft-atur-isi select {
  width: 100%; margin-top: 3px; padding: 6px 8px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 12.5px;
}
.draft-atur-isi .draft-cek { display: flex; align-items: center; gap: 6px; align-self: end; padding-bottom: 7px; }
.draft-atur-isi .draft-cek input { width: auto; margin: 0; }

/* ---- Papan ---- */
.dr-papan {
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 7px; overflow: hidden; margin-bottom: 14px;
}

.dr-tim {
  display: grid; grid-template-columns: auto 1fr 128px;
  gap: 11px; align-items: center; padding: 9px 12px;
  transition: background .2s;
}
.dr-tim.tim-a { background: linear-gradient(90deg, rgba(192,39,45,.07), transparent 62%); }
.dr-tim.tim-b { background: linear-gradient(90deg, rgba(70,130,200,.07), transparent 62%); }
.dr-tim.giliran.tim-a { background: linear-gradient(90deg, rgba(192,39,45,.18), transparent 68%); }
.dr-tim.giliran.tim-b { background: linear-gradient(90deg, rgba(70,130,200,.18), transparent 68%); }
@media (max-width: 760px) {
  .dr-tim { grid-template-columns: 1fr; }
  .dr-sisi { order: -1; }
}

/* Ban: petak kecil */
.dr-ban { display: flex; flex-direction: column; gap: 9px; align-content: start; }
.dr-ban-grup { display: flex; flex-direction: column; gap: 3px; }
.dr-ban-petak { display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; }
.dr-ban-jd {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3, #6b7482); white-space: nowrap;
}
.dr-ban-jd i { font-style: normal; opacity: .6; }
.tim-a .dr-ban-jd { color: #a8555a; }
.tim-b .dr-ban-jd { color: #5a7ea8; }
.dr-ban-i {
  width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--garis, #2a3038); background: var(--bg, #0d1218);
  position: relative;
}
.dr-ban-i img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.75); }
.dr-ban-i:not(.kosong)::after {
  content: ""; position: absolute; inset: 14%;
  background:
    linear-gradient(45deg, transparent 48.4%, rgba(255,70,76,.7) 49.2% 50.8%, transparent 51.6%),
    linear-gradient(-45deg, transparent 48.4%, rgba(255,70,76,.7) 49.2% 50.8%, transparent 51.6%);
}
.dr-ban-i.kosong { border-style: dashed; opacity: .5; }
.dr-ban-i.kini { border-color: var(--merah,#c0272d); opacity: 1; animation: drDenyut 1.4s ease-in-out infinite; }

/* Pick: kartu kecil sejajar */
.dr-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-pick-k {
  width: 68px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--garis, #2a3038); background: var(--bg, #0d1218);
  position: relative;
}
.dr-pick-k img, .dr-ph { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.dr-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-size: 22px; font-weight: 700;
  color: #262d36; background: rgba(255,255,255,.02);
}
/* Slot kosong tidak perlu memakan tinggi penuh sebelum draft jalan */
.dr-pick-k.kosong .dr-ph { aspect-ratio: 4/3; font-size: 18px; }
.dr-pick-k span {
  display: block; font-size: 10px; padding: 4px 5px 0; color: var(--text-1, #e9e7e2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-pick-k em {
  display: block; font-size: 9px; font-style: normal; padding: 0 5px 4px;
  color: var(--text-3, #6b7482); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-pick-k u {
  position: absolute; top: 3px; right: 3px; text-decoration: none;
  font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: #c9a961; background: rgba(0,0,0,.78); padding: 1px 4px; border-radius: 2px;
}
/* Siapa yang ban (nama pemain / operator) di petak ban. */
.dr-ban-i .dr-oleh {
  position: absolute; left: 0; right: 0; bottom: 0; text-decoration: none;
  font-size: 7px; line-height: 1.35; text-align: center; padding: 0 2px;
  color: var(--text-1, #e9e7e2); background: rgba(0,0,0,.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tim-a .dr-pick-k.terisi { border-color: rgba(192,39,45,.55); }
.tim-b .dr-pick-k.terisi { border-color: rgba(70,130,200,.55); }
.dr-pick-k.kosong { border-style: dashed; }
.dr-pick-k.kini { border-color: var(--merah,#c0272d); border-style: solid; animation: drDenyut 1.4s ease-in-out infinite; }
@keyframes drDenyut {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,39,45,0) }
  50%     { box-shadow: 0 0 0 3px rgba(192,39,45,.18) }
}

/* Sisi kanan: nama tim + pemain */
.dr-sisi { min-width: 0; }
.dr-nama {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--garis, #2a3038);
  color: var(--text-1, #e9e7e2); font-family: "Barlow Condensed", sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 0 0 5px; margin-bottom: 6px; text-align: right;
}
.tim-a .dr-nama { border-bottom-color: rgba(192,39,45,.5); color: #e05055; }
.tim-b .dr-nama { border-bottom-color: rgba(70,130,200,.5); color: #5c9ae0; }
.dr-nama:focus { outline: none; }
.dr-pemain { list-style: none; margin: 0; padding: 0; text-align: right; }
.dr-pemain li {
  font-size: 10.5px; color: var(--text-3, #6b7482); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Garis waktu tengah */
.dr-tengah {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 13px; border-top: 1px solid var(--garis, #2a3038);
  border-bottom: 1px solid var(--garis, #2a3038); background: rgba(0,0,0,.25);
}
.dr-jam {
  font-family: "Barlow Condensed", sans-serif; font-size: 25px; font-weight: 700;
  color: var(--text-1, #e9e7e2); font-variant-numeric: tabular-nums; min-width: 58px;
}
.dr-jam.panik { color: #e03a40; animation: drKedip .9s ease-in-out infinite; }
@keyframes drKedip { 0%,100%{opacity:1} 50%{opacity:.4} }
.dr-alur { flex: 1; display: flex; gap: 2px; align-items: center; min-width: 0; }
.dr-alur i {
  flex: 1; height: 5px; border-radius: 2px; min-width: 3px;
  background: #232a33; transition: transform .15s;
}
.dr-alur i.tim-a.lewat { background: rgba(192,39,45,.75); }
.dr-alur i.tim-b.lewat { background: rgba(70,130,200,.75); }
.dr-alur i.pick { height: 9px; }
.dr-alur i.kini { background: #e9e7e2; transform: scaleY(1.7); }
.dr-info { font-size: 11.5px; color: var(--text-2, #9aa3b0); white-space: nowrap; }
.dr-info .t-a { color: #e05055; }
.dr-info .t-b { color: #5c9ae0; }
.dr-info i { font-style: normal; color: var(--text-3, #6b7482); }

/* ---- Papan pilihan ---- */
.draft-panel { background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038); border-radius: 7px; overflow: hidden; }
.draft-tab { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 9px 11px; border-bottom: 1px solid var(--garis, #2a3038); }
.draft-tab-btn {
  padding: 5px 11px; background: transparent; border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-2, #9aa3b0); cursor: pointer;
  font-family: "Barlow Condensed", sans-serif; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
}
.draft-tab-btn:hover { color: var(--text-1, #e9e7e2); border-color: #3a4454; }
.draft-tab-btn.active { background: var(--merah, #c0272d); border-color: var(--merah, #c0272d); color: #fff; }
.draft-cari {
  margin-left: auto; padding: 5px 10px; min-width: 140px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 12px;
}
.draft-hitung { font-size: 10.5px; color: var(--text-3, #6b7482); }

.draft-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 5px; padding: 10px; max-height: 44vh; overflow-y: auto;
}
.draft-kartu {
  position: relative; padding: 0; overflow: hidden; text-align: left;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; cursor: default; display: flex; flex-direction: column;
  transition: transform .12s, border-color .12s;
}
.draft-kartu img, .draft-ph { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.draft-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 700;
  color: #262d36; background: rgba(255,255,255,.02);
}
.draft-nm { font-size: 10px; color: var(--text-1,#e9e7e2); padding: 4px 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-sub { font-size: 9px; color: var(--text-3,#6b7482); padding: 0 5px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-kartu.bisa { cursor: pointer; }
.draft-kartu.bisa:hover { transform: translateY(-2px); border-color: var(--merah, #c0272d); }
.draft-kartu.diban { opacity: .32; filter: grayscale(1); }
.draft-kartu.diban.ban::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(192,39,45,.42) 7px 9px);
}
.draft-kartu.diban.pick { opacity: .5; filter: none; }
.draft-tanda {
  position: absolute; top: 3px; left: 3px; z-index: 2;
  font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 4px; border-radius: 2px; color: #fff;
  max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-tanda.tim-a { background: rgba(192,39,45,.92); }
.draft-tanda.tim-b { background: rgba(70,130,200,.92); }
.draft-kosong { font-size: 12px; color: var(--text-3,#6b7482); text-align: center; padding: 14px 0; font-style: italic; }

/* ---- Pick dikelompokkan: killer menonjol, survivor berjajar ---- */
.dr-pick { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.dr-grup { display: flex; flex-direction: column; gap: 4px; }
.dr-grup-jd {
  font-family: "Barlow Condensed", sans-serif; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-3, #6b7482);
}
.dr-grup.killer .dr-grup-jd { color: #c9a961; }
.dr-grup-isi { display: flex; gap: 5px; flex-wrap: wrap; }
.dr-grup.killer { padding-right: 14px; border-right: 1px solid var(--garis, #2a3038); }

/* Kartu killer dibuat lebih besar supaya jadi titik fokus baris */
.dr-pick-k.besar { width: 92px; }
.dr-pick-k.besar .dr-ph { font-size: 30px; }
.dr-pick-k.besar img, .dr-pick-k.besar .dr-ph { aspect-ratio: 3/4; }
.dr-pick-k.besar span { font-size: 11.5px; padding: 5px 6px 0; }
.dr-pick-k.besar em { font-size: 10px; padding: 0 6px 5px; }
.dr-pick-k.besar.terisi { box-shadow: 0 0 16px rgba(201,169,97,.14); }
.tim-a .dr-pick-k.besar.terisi { border-color: rgba(201,169,97,.6); }
.tim-b .dr-pick-k.besar.terisi { border-color: rgba(201,169,97,.6); }

/* Scoreboard Match Room (#tournament) — dipakai app lokal & web (dulu ada di
   index.html inline; dipindah ke sini supaya web pakai gaya yang sama persis). */
#tournament .trn-skor {
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem);
  padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap;
  background: var(--slate-0, #080c12); border: 1px solid var(--line, #222b39); border-radius: 3px;
}
#tournament .trn-sk-tim { display: flex; align-items: center; gap: 14px; }
#tournament .trn-sk-tim b {
  font-family: "Oswald", "Barlow Condensed", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--text, #eceae6);
}
#tournament .trn-sk-tim i {
  font-family: "Anton", "Barlow Condensed", sans-serif; font-style: normal;
  font-size: 2rem; line-height: 1; color: var(--text, #eceae6); font-variant-numeric: tabular-nums;
}
#tournament .trn-sk-mid {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: "Oswald", "Barlow Condensed", sans-serif; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3, #616c7c);
}

/* =========================================================
   DRAFT & BAN — POLISH OPERATOR + PESERTA

   Aksi utama selalu kelihatan, status giliran & jam menonjol, papan +
   grid pilih jadi pusat perhatian, setup meredup saat draft jalan.
   CSS/tanda visual saja, nol logika. body.dr-live / body.dr-selesai
   di-toggle draftGambarSemua(). Papan (#drPapan) & grid pilih (#drPilih)
   dipakai bersama halaman Draft & Ban dan Tournament, jadi di-target by id.
========================================================= */

/* --- Toolbar aksi (#draft): nempel di atas saat scroll ke grid pilih --- */
#draft .dr-atas {
  position: sticky; top: 65px; z-index: 90;
  background: rgba(6,9,14,.97); backdrop-filter: blur(10px);
  margin: 0 -42px 16px; padding: 12px 42px 13px;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.9);
}
@media (max-width: 900px) { #draft .dr-atas { margin-inline: -20px; padding-inline: 20px; } }

/* Aksi alur pertandingan: Mulai Draft -> Start Match -> Match Selesai. */
.dra-cluster.utama .primary {
  padding: 11px 28px; font-size: 14px; letter-spacing: .14em;
  box-shadow: 0 6px 22px -8px rgba(192,39,45,.5);
}
.dra-cluster.utama .ov-start,
.dra-cluster.utama .ov-akhir {
  padding: 10px 18px; font-size: 12.5px; color: #e79aa0;
  background: rgba(192,39,45,.09); border-color: rgba(192,39,45,.45);
}
.dra-cluster.utama .ov-start:hover,
.dra-cluster.utama .ov-akhir:hover {
  color: #fff; background: rgba(192,39,45,.22); border-color: var(--red-2);
}
/* Draft sedang jalan: "Mulai Draft" jadi label status, bukan tombol ajakan. */
body.dr-live .dra-cluster.utama .primary {
  background: var(--slate-2); border-color: var(--line-2);
  color: var(--text-3); box-shadow: none; pointer-events: none;
}
/* Draft selesai: Start Match jadi langkah berikutnya yang paling menonjol. */
body.dr-selesai .dra-cluster.utama .ov-start {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 6px 22px -8px rgba(192,39,45,.55);
}

/* --- Setup (#draft) meredup saat draft jalan, papan yang jadi bintang --- */
body.dr-live #draft .draft-atur,
body.dr-live #draft .dr-map { opacity: .5; }
body.dr-live #draft .draft-atur:hover,
body.dr-live #draft .dr-map:hover { opacity: 1; }
#draft .dr-map { padding: 7px 13px; }
#draft .dr-map > span { font-size: 10px; }

/* --- Papan: giliran & jam jauh lebih tegas (di halaman mana pun) --- */
#drPapan { transition: border-color .3s, box-shadow .3s; }
body.dr-live #drPapan {
  border-color: rgba(192,39,45,.3);
  box-shadow: 0 0 40px -10px rgba(192,39,45,.28);
}
#drPapan .dr-tim.giliran.tim-a { box-shadow: inset 4px 0 0 var(--merah, #c0272d); }
#drPapan .dr-tim.giliran.tim-b { box-shadow: inset 4px 0 0 #4682c8; }
#drPapan .dr-tengah { padding: 11px 15px; gap: 15px; }
#drPapan .dr-jam { font-size: 32px; min-width: 74px; }
#drPapan .dr-jam.panik { animation: drKedip .7s steps(1) infinite; transform: scale(1.06); }
#drPapan .dr-info { font-size: 13px; font-weight: 600; }
#drPapan .dr-info i { font-size: 11px; font-weight: 400; }

/* Giliran tim: warnai bar tengah + jadikan nama tim di status sebuah pil berwarna. */
.dr-papan.giliran-a .dr-tengah { box-shadow: inset 4px 0 0 var(--merah, #c0272d); }
.dr-papan.giliran-b .dr-tengah { box-shadow: inset 4px 0 0 #4682c8; }
.dr-papan.giliran-a .dr-info b.t-a,
.dr-papan.giliran-b .dr-info b.t-b { padding: 1px 8px; border-radius: 3px; color: #fff; }
.dr-papan.giliran-a .dr-info b.t-a { background: var(--merah, #c0272d); }
.dr-papan.giliran-b .dr-info b.t-b { background: #4682c8; }

/* --- Grid pilih: target klik lebih besar, fase aktif "hidup" --- */
#drPilih { transition: border-color .3s; }
body.dr-live #drPilih { border-color: rgba(192,39,45,.4); }
#drPilih .draft-tab { padding: 10px 12px; }
#drPilih .draft-tab-btn { padding: 6px 13px; font-size: 12px; }
#drPilih .draft-tab-btn.active { box-shadow: 0 0 18px -4px rgba(192,39,45,.55); }
#drPilih .draft-cari { padding: 6px 11px; font-size: 12.5px; min-width: 160px; }
#drPilih .draft-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px; padding: 12px; max-height: 52vh;
}
#drPilih .draft-kartu.bisa { box-shadow: inset 0 0 0 1px rgba(192,39,45,.14); }
#drPilih .draft-kartu.bisa:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--red-2);
  box-shadow: 0 10px 24px -8px rgba(192,39,45,.5);
}
#drPilih .draft-nm { font-size: 10.5px; }

/* ==================== BRACKET ==================== */

.br-atur {
  display: grid; grid-template-columns: 1fr 280px; gap: 14px;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 7px; padding: 14px; margin-bottom: 14px;
}
@media (max-width: 760px) { .br-atur { grid-template-columns: 1fr; } }
.br-atur label { display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3, #6b7482); margin-bottom: 4px; }
.br-atur label small { text-transform: none; letter-spacing: 0; opacity: .75; }
.br-atur textarea, .br-atur select {
  width: 100%; padding: 8px 10px; background: var(--bg, #0d1218);
  border: 1px solid var(--garis, #2a3038); border-radius: 4px;
  color: var(--text-1, #e9e7e2); font-size: 12.5px; font-family: inherit; resize: vertical;
}
.br-atur-kanan label + label { margin-top: 9px; }
.br-cek { display: flex !important; align-items: center; gap: 7px; text-transform: none !important;
  font-size: 11.5px !important; color: var(--text-2, #9aa3b0) !important; margin-top: 9px !important; }
.br-cek input { width: auto; }
.br-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.br-catatan { margin-top: 9px; font-size: 11px; color: var(--text-3, #6b7482); }

.br-wadah {
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 7px; padding: 16px; overflow-x: auto;
}
.br-kosong { text-align: center; padding: 40px 0; color: var(--text-3, #6b7482); font-style: italic; font-size: 13px; }

.br-judul {
  font-family: "Barlow Condensed", sans-serif; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--merah, #c0272d);
  margin: 4px 0 12px;
}
.br-judul.kalah { color: #5c9ae0; margin-top: 26px; }

.br-baris { display: flex; gap: 26px; align-items: stretch; min-width: min-content; }
.br-kolom { display: flex; flex-direction: column; min-width: 156px; }
.br-kolom-jd {
  font-family: "Barlow Condensed", sans-serif; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-3, #6b7482); margin-bottom: 8px; text-align: center;
}
.br-kolom-isi {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-around; gap: 10px;
}

.br-match {
  position: relative; border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; overflow: hidden; background: var(--bg, #0d1218);
}
.br-match.bye { opacity: .55; }
/* Garis penghubung ke kolom berikutnya */
.br-kolom:not(:last-child) .br-match::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 26px; height: 1px; background: var(--garis, #2a3038);
}

.br-sisi {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 9px; font-size: 12px; color: var(--text-2, #9aa3b0);
  border-bottom: 1px solid var(--garis, #2a3038); cursor: pointer;
  transition: background .13s, color .13s;
}
.br-sisi:last-child { border-bottom: none; }
.br-sisi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-sisi:hover:not(.kosong) { background: rgba(255,255,255,.045); color: var(--text-1, #e9e7e2); }
.br-sisi.kosong { cursor: default; color: #39414d; font-style: italic; }
.br-sisi.menang {
  background: rgba(192, 39, 45, .16); color: var(--text-1, #e9e7e2); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--merah, #c0272d);
}
.br-sisi.menang b { color: var(--merah, #c0272d); font-size: 11px; }
.br-sisi.kalah { opacity: .4; text-decoration: line-through; }

.br-juara {
  margin-top: 22px; padding: 14px 18px; display: inline-flex; align-items: center; gap: 13px;
  border: 1px solid rgba(201, 169, 97, .5); border-radius: 6px;
  background: linear-gradient(90deg, rgba(201,169,97,.12), transparent);
}
.br-juara span {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: #c9a961;
}
.br-juara b {
  font-family: "Barlow Condensed", sans-serif; font-size: 24px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-1, #e9e7e2);
}

/* ---- Pilihan map ---- */
.br-map {
  width: 100%; margin-bottom: 7px; padding: 5px 7px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-3, #6b7482); font-size: 11px; font-family: inherit;
}
.br-map.terisi { color: #c9a961; border-color: rgba(201, 169, 97, .45); }
.br-map:focus { outline: none; border-color: var(--merah, #c0272d); }

.dr-map {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 6px; padding: 9px 13px; margin-bottom: 14px;
}
.dr-map > span {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3, #6b7482);
}
.dr-map select {
  flex: 1; min-width: 190px; max-width: 320px; padding: 6px 9px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 12.5px; font-family: inherit;
}
.dr-map select:focus { outline: none; border-color: #c9a961; }

/* ==================== GLOBAL BAN ==================== */

.gb-panel {
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 6px; margin-bottom: 14px; overflow: hidden;
}
.gb-panel summary {
  cursor: pointer; padding: 10px 13px; list-style: none;
  font-family: "Barlow Condensed", sans-serif; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2, #9aa3b0);
}
.gb-panel summary::-webkit-details-marker { display: none; }
.gb-panel summary::before { content: "+"; display: inline-block; width: 14px; color: #c9a961; font-weight: 700; }
.gb-panel[open] summary::before { content: "\2212"; }
.gb-panel summary b { color: #c9a961; margin-left: 5px; letter-spacing: 0; }
.gb-isi { padding: 2px 13px 13px; }
.gb-jelas { font-size: 11.5px; color: var(--text-3, #6b7482); line-height: 1.55; margin: 0 0 10px; }
.gb-tombol { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.gb-tombol .small-btn.nyala {
  background: #c9a961; border-color: #c9a961; color: #14181e; font-weight: 600;
}

.gb-ringkas { display: flex; flex-direction: column; gap: 5px; }
.gb-ringkas i { font-size: 11.5px; color: var(--text-3, #6b7482); }
.gb-baris {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 9px; background: var(--bg, #0d1218);
  border-left: 2px solid rgba(201, 169, 97, .6); border-radius: 3px;
}
.gb-baris b {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #c9a961;
}
.gb-baris span { font-size: 11.5px; color: var(--text-2, #9aa3b0); line-height: 1.5; }
.gb-baris i { font-size: 10.5px; color: var(--text-3, #6b7482); font-style: normal; }

.draft-panel-jd {
  font-size: 11px; color: #c9a961; letter-spacing: .04em;
}
.gb-tag {
  color: #c9a961; font-weight: 500; margin-left: 5px;
  border: 1px solid rgba(201,169,97,.4); padding: 1px 5px; border-radius: 2px; font-size: 10px;
}

/* Kartu yang kena global ban */
.draft-kartu.global { opacity: .42; }
.draft-kartu.global img, .draft-kartu.global .draft-ph { filter: grayscale(1) brightness(.6); }
.draft-kartu.global::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(201,169,97,.4) 6px 8px);
}
.draft-tanda.global { background: rgba(201, 169, 97, .95); color: #14181e; font-weight: 700; }

/* Mode atur: semua kartu bisa diklik, batasnya emas */
.draft-grid.mode-gb { outline: 1px solid rgba(201,169,97,.45); outline-offset: -1px; }
.draft-grid.mode-gb .draft-kartu { cursor: pointer; opacity: 1; }
.draft-grid.mode-gb .draft-kartu:hover { border-color: #c9a961; transform: translateY(-2px); }
.draft-grid.mode-gb .draft-kartu.global { opacity: .55; }


.br-jadwal {
  width: 100%; margin-bottom: 7px; padding: 5px 7px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-3, #6b7482);
  font-size: 11px; font-family: inherit;
}
.br-jadwal.terisi { color: #5c9ae0; border-color: rgba(92, 154, 224, .45); }
.br-jadwal:focus { outline: none; border-color: var(--merah, #c0272d); }
.br-jadwal::-webkit-calendar-picker-indicator { filter: invert(.55); cursor: pointer; }

/* ---- Sembunyikan karakter ---- */
.kar-hapus {
  position: absolute; top: 7px; left: 7px; z-index: 4;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 18, .82); color: var(--text-3, #6b7482);
  border: 1px solid var(--garis, #2a3038); border-radius: 4px;
  font-size: 15px; cursor: pointer;
  opacity: 0; transition: opacity .14s, background .14s, color .14s;
}
.kar-kartu:hover .kar-hapus { opacity: 1; }
.kar-hapus:hover {
  background: var(--merah, #c0272d); color: #fff; border-color: var(--merah, #c0272d);
}

.kar-sembunyi-info { color: var(--text-3, #6b7482); }
.kar-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--merah, #c0272d); font-size: inherit; font-family: inherit;
  text-decoration: underline;
}
.kar-link:hover { color: #e05055; }

.pot-sembunyi { color: #e08585 !important; }
.pot-sembunyi:hover {
  background: var(--merah, #c0272d) !important;
  border-color: var(--merah, #c0272d) !important;
  color: #fff !important;
}

/* ==================== IMPOR IKON ==================== */
.ik-atas {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: var(--panel, #12161c);
  border: 1px solid var(--garis, #2a3038); border-radius: 7px;
  padding: 13px 15px; margin-bottom: 14px;
}
.ik-atas > div:first-child { display: flex; gap: 7px; flex-wrap: wrap; }
.ik-info { font-size: 12.5px; color: var(--text-2, #9aa3b0); }
.ik-info b { color: var(--merah, #c0272d); font-size: 15px; }

.ik-aksi {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ik-aksi span { font-size: 11.5px; color: var(--text-3, #6b7482); }

.ik-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.ik-kartu {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 5px;
}
.ik-kartu img {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
  background: rgba(255,255,255,.02); border-radius: 4px;
}
.ik-kartu div { min-width: 0; }
.ik-kartu b {
  display: block; font-size: 12.5px; color: var(--text-1, #e9e7e2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ik-kartu small {
  display: block; font-size: 10px; color: var(--text-3, #6b7482);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ik-sisa { font-size: 12px; color: var(--text-3, #6b7482); margin-top: 10px; }

.ik-gagal {
  margin-top: 14px; border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; overflow: hidden;
}
.ik-gagal summary {
  cursor: pointer; padding: 9px 12px; list-style: none;
  font-size: 12px; color: var(--text-2, #9aa3b0);
  background: rgba(255,255,255,.02);
}
.ik-gagal summary::-webkit-details-marker { display: none; }
.ik-gagal summary::before { content: "+"; display: inline-block; width: 14px; color: var(--merah,#c0272d); font-weight: 700; }
.ik-gagal[open] summary::before { content: "\2212"; }
.ik-gagal p {
  padding: 10px 12px; margin: 0; font-size: 11.5px;
  color: var(--text-3, #6b7482); line-height: 1.7; word-break: break-word;
}

/* ==================== ROLL BUILD ==================== */
.rb-modal { position: fixed; inset: 0; z-index: 900; display: none; }
.rb-modal.show { display: block; }
.rb-latar {
  position: absolute; inset: 0;
  background: rgba(6, 8, 12, .8); backdrop-filter: blur(3px);
  animation: rbFade .18s ease;
}
@keyframes rbFade { from { opacity: 0 } to { opacity: 1 } }

.rb-panel {
  position: relative; z-index: 2;
  width: min(700px, calc(100vw - 40px));
  max-height: calc(100vh - 60px); overflow-y: auto;
  margin: 30px auto;
  background: linear-gradient(170deg, #171d26 0%, #10141a 62%, #0c0f14 100%);
  border: 1px solid #2f3846; border-radius: 10px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62);
  padding: 24px 26px 26px;
  animation: rbNaik .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rbNaik { from { opacity: 0; transform: translateY(16px) scale(.985) } to { opacity: 1 } }

.rb-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; padding: 0; line-height: 1;
  background: transparent; border: 1px solid var(--garis, #2a3038); border-radius: 5px;
  color: var(--text-3, #6b7482); font-size: 19px; cursor: pointer;
}
.rb-x:hover { color: #fff; border-color: var(--merah, #c0272d); background: var(--merah, #c0272d); }

.rb-eyebrow {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--merah, #c0272d);
}
.rb-panel h2 {
  font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-1, #e9e7e2);
  margin: 2px 0 16px;
}






.rb-pilih-judul {
  display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px;
  font-family: "Barlow Condensed", sans-serif; font-size: 12px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-2, #9aa3b0);
}
.rb-pilih-ket { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--text-3, #6b7482); }
.rb-cari {
  width: 100%; padding: 7px 10px; margin-bottom: 9px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 12.5px;
}

.rb-chip {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 190px; overflow-y: auto; padding: 2px;
  margin-bottom: 18px;
}
.rb-c {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; cursor: pointer;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 20px; color: var(--text-2, #9aa3b0); font-size: 11.5px;
  transition: border-color .13s, color .13s, background .13s;
}
.rb-c img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; }
.rb-c:hover { color: var(--text-1, #e9e7e2); border-color: #3a4454; }
.rb-c.on {
  background: rgba(192, 39, 45, .16); border-color: var(--merah, #c0272d);
  color: var(--text-1, #e9e7e2);
}
.rb-kosong { font-size: 12px; color: var(--text-3, #6b7482); font-style: italic; padding: 8px 2px; }

.rb-gulir { width: 100%; padding: 12px; font-size: 14px; }

/* ---- Hasil ---- */
.rb-kepala {
  display: flex; gap: 16px; align-items: center;
  padding-bottom: 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--garis, #2a3038);
  animation: rbMasuk .34s cubic-bezier(.2,.8,.3,1) backwards;
}
.rb-potret { position: relative; width: 96px; flex-shrink: 0; }
.rb-potret img, .rb-potret-ph {
  width: 96px; height: 128px; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid #333d4c;
}
.rb-potret-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-size: 40px; font-weight: 700;
  color: #2b333e; background: rgba(255,255,255,.02);
}
.rb-kepala-teks { min-width: 0; }
.rb-kepala-teks h2 { margin: 2px 0 4px; font-size: 27px; }
.rb-power { font-size: 12px; color: var(--text-3, #6b7482); }

.rb-bagian {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3, #6b7482); margin: 14px 0 8px;
}
.rb-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 7px; }

.rb-slot {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--garis, #2a3038); border-radius: 6px;
  animation: rbMasuk .34s cubic-bezier(.2,.8,.3,1) backwards;
}
@keyframes rbMasuk {
  from { opacity: 0; transform: translateY(10px) scale(.97) }
  to   { opacity: 1; transform: none }
}
.rb-gbr { width: 42px; height: 42px; flex-shrink: 0; }
.rb-slot img, .rb-slot-ph {
  width: 42px; height: 42px; object-fit: contain; display: block;
}
.rb-slot-ph {
  display: flex; align-items: center; justify-content: center;
  color: #2b333e; font-size: 20px; font-weight: 700;
}
.rb-slot-teks { min-width: 0; flex: 1; }
.rb-slot-teks b {
  display: block; font-size: 13.5px; color: var(--text-1, #e9e7e2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rb-slot-teks small { font-size: 10.5px; color: var(--text-3, #6b7482); }
.rb-slot.kunci { border-color: rgba(201, 169, 97, .55); background: rgba(201, 169, 97, .07); }

.rb-gembok {
  background: transparent; border: none; cursor: pointer;
  padding: 3px 5px; font-size: 13px; opacity: .45;
  transition: opacity .13s, transform .13s;
}
.rb-gembok:hover { opacity: 1; transform: scale(1.14); }
.rb-slot.kunci .rb-gembok { opacity: 1; }
.rb-gembok.besar {
  position: absolute; top: 5px; right: 5px;
  background: rgba(10, 13, 18, .8); border-radius: 4px; opacity: .8;
}
.rb-gembok.kecil { font-size: 11px; padding: 0 3px; vertical-align: middle; }

.rb-aksi { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.rb-aksi .primary { flex: 1; min-width: 150px; }
.rb-tip { margin-top: 9px; font-size: 11px; color: var(--text-3, #6b7482); text-align: center; }

/* ---- Efek gulir slot ---- */
.rb-slot.muter {
  border-color: rgba(192, 39, 45, .5);
  background: rgba(192, 39, 45, .07);
}
/* Isi kartu digeser sedikit dan diburamkan supaya terbaca sebagai
   gulungan yang sedang berputar, bukan teks yang berkedip-kedip. */
.rb-slot.muter .rb-gbr,
.rb-slot.muter .rb-slot-teks {
  animation: rbGeser .11s linear infinite;
  filter: blur(.4px);
}
@keyframes rbGeser {
  0%   { transform: translateY(-5px); opacity: .45 }
  55%  { transform: translateY(0);    opacity: 1 }
  100% { transform: translateY(5px);  opacity: .45 }
}
.rb-slot.muter .rb-slot-teks b { color: var(--text-2, #9aa3b0); }
.rb-slot.muter .rb-gembok { opacity: .12; pointer-events: none; }

.rb-slot.mendarat {
  animation: rbMendarat .42s cubic-bezier(.2, .9, .25, 1);
  border-color: rgba(201, 169, 97, .6);
}
@keyframes rbMendarat {
  0%   { transform: scale(1.045); box-shadow: 0 0 0 0 rgba(201,169,97,.5) }
  100% { transform: scale(1);     box-shadow: 0 0 0 9px rgba(201,169,97,0) }
}

/* ---- Opsi berbentuk kartu ----
   Sebelumnya memakai <label> polos, tapi label di halaman lain sudah
   diberi huruf kapital dan rata kanan, jadi teksnya ikut berantakan.
   Kartu ini menetapkan gayanya sendiri agar tidak terpengaruh. */
.rb-opsi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.rb-opsi-k {
  display: flex !important; align-items: flex-start; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  text-align: left !important; text-transform: none !important;
  letter-spacing: normal !important; margin: 0 !important;
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--garis, #2a3038); border-radius: 7px;
  transition: border-color .14s, background .14s;
}
.rb-opsi-k:hover { border-color: #3a4454; background: rgba(255, 255, 255, .04); }
.rb-opsi-k input { position: absolute; opacity: 0; pointer-events: none; }

.rb-tanda {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
  border: 1px solid #3f4856; border-radius: 4px;
  position: relative; transition: background .14s, border-color .14s;
}
.rb-tanda::after {
  content: "\2713"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(.5); transition: opacity .14s, transform .14s;
}
.rb-opsi-k input:checked ~ .rb-tanda {
  background: var(--merah, #c0272d); border-color: var(--merah, #c0272d);
}
.rb-opsi-k input:checked ~ .rb-tanda::after { opacity: 1; transform: scale(1); }
.rb-opsi-k:has(input:checked) {
  border-color: rgba(192, 39, 45, .55); background: rgba(192, 39, 45, .08);
}

.rb-opsi-t { min-width: 0; }
.rb-opsi-t b {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-1, #e9e7e2); text-transform: none; letter-spacing: normal;
}
.rb-opsi-t small {
  display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.4;
  color: var(--text-3, #6b7482); text-transform: none; letter-spacing: normal;
}

/* ==================== MAPS: DAFTAR DATAR ==================== */
.mp-daftar {
  column-count: 4; column-gap: 34px;
  padding-top: 4px;
}
@media (max-width: 1200px) { .mp-daftar { column-count: 3; } }
@media (max-width: 860px)  { .mp-daftar { column-count: 2; } }
@media (max-width: 560px)  { .mp-daftar { column-count: 1; } }

.mp-item {
  /* break-inside mencegah satu baris terpotong antar kolom */
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 8px; margin-bottom: 1px;
  background: transparent; border: none; border-radius: 4px;
  color: var(--text-2, #9aa3b0); font-size: 13.5px; font-family: inherit;
  text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.mp-item:hover { background: rgba(255, 255, 255, .05); color: var(--text-1, #e9e7e2); }

.mp-titik {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #39414d; background: transparent;
}
.mp-item.ada .mp-titik { background: var(--merah, #c0272d); border-color: var(--merah, #c0272d); }

.mp-nama {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.13);
  text-underline-offset: 3px;
}
.mp-item:hover .mp-nama { text-decoration-color: var(--merah, #c0272d); }

.mp-realm {
  font-size: 10px; color: var(--text-3, #6b7482);
  opacity: 0; transition: opacity .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.mp-item:hover .mp-realm { opacity: .85; }

.mp-x {
  flex-shrink: 0; width: 17px; height: 17px; line-height: 15px;
  text-align: center; border-radius: 3px; font-size: 13px;
  color: var(--text-3, #6b7482); opacity: 0; transition: opacity .12s;
}
.mp-item:hover .mp-x { opacity: 1; }
.mp-x:hover { background: var(--merah, #c0272d); color: #fff; }

/* ---- Navigasi penampil map ---- */
.mapsview-body { position: relative; }
.mv-panah {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 62px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 18, .72); color: var(--text-2, #9aa3b0);
  border: 1px solid var(--garis, #2a3038); border-radius: 6px;
  font-size: 26px; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.mapsview-body:hover .mv-panah { opacity: 1; }
.mv-panah:hover { background: var(--merah, #c0272d); color: #fff; border-color: var(--merah, #c0272d); }
.mv-panah.kiri { left: 12px; }
.mv-panah.kanan { right: 12px; }

.mv-kaki {
  padding: 7px 14px; text-align: center;
  font-size: 11px; color: var(--text-3, #6b7482);
  border-top: 1px solid var(--garis, #2a3038);
}

/* ==================== DASHBOARD ==================== */

.db-stat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.db-stat-k {
  padding: 13px 16px; border-radius: 8px;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
}
.db-stat-k span {
  display: block; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3, #6b7482);
}
.db-stat-k strong {
  display: block; margin-top: 4px;
  font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 700;
  color: var(--text-1, #e9e7e2); line-height: 1.05;
}

/* ---- Zona ---- */
.db-zona {
  position: relative; padding: 18px 20px 20px; margin-bottom: 14px;
  border: 1px solid var(--garis, #2a3038); border-radius: 9px;
  background: var(--panel, #12161c);
}
/* Garis warna di tepi kiri membedakan zona tanpa menambah teks */
.db-zona::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 0 3px 3px 0;
}
.db-zona.konten::before   { background: linear-gradient(180deg, #e03a40, #7d1418); }
.db-zona.turnamen::before { background: linear-gradient(180deg, #5c9ae0, #24507e); }
.db-zona.data::before     { background: linear-gradient(180deg, #c9a961, #7a6532); }

.db-zona-kepala {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.db-zona-kepala h2 {
  display: inline; font-family: "Barlow Condensed", sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-1, #e9e7e2);
}
.db-zona-kepala p { margin: 5px 0 0; font-size: 12px; color: var(--text-3, #6b7482); }
.db-nomor {
  font-family: "Barlow Condensed", sans-serif; font-size: 12px;
  letter-spacing: .2em; margin-right: 9px;
}
.db-zona.konten .db-nomor   { color: #e05055; }
.db-zona.turnamen .db-nomor { color: #5c9ae0; }
.db-zona.data .db-nomor     { color: #c9a961; }

.db-ubin {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px;
}
.db-u {
  position: relative; overflow: hidden;
  padding: 13px 14px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--garis, #2a3038); border-radius: 7px;
  transition: transform .14s, border-color .14s, background .14s;
}
.db-u:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .055); }
.db-zona.konten .db-u:hover   { border-color: rgba(224, 80, 85, .55); }
.db-zona.turnamen .db-u:hover { border-color: rgba(92, 154, 224, .55); }
.db-zona.data .db-u:hover     { border-color: rgba(201, 169, 97, .55); }
.db-u b {
  display: block; font-family: "Barlow Condensed", sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-1, #e9e7e2);
}
.db-u small {
  display: block; margin-top: 3px; font-size: 11px; line-height: 1.4;
  color: var(--text-3, #6b7482);
}

.db-cepat { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--garis, #2a3038); }
.db-cepat-jd {
  display: block; margin-bottom: 8px;
  font-family: "Barlow Condensed", sans-serif; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-3, #6b7482);
}

.db-bawah {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.db-panel {
  padding: 16px 18px; border-radius: 9px;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
}
.db-panel h3 {
  margin: 0 0 12px; font-family: "Barlow Condensed", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2, #9aa3b0);
}
.db-ai { font-size: 12px; color: var(--text-2, #9aa3b0); line-height: 1.7; }
.db-ai b { color: var(--text-1, #e9e7e2); }

.db-alur { display: grid; gap: 7px; }
.db-alur div {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: 5px;
  background: rgba(255, 255, 255, .022);
}
.db-alur b {
  font-family: "Barlow Condensed", sans-serif; font-size: 15px;
  color: var(--merah, #c0272d); min-width: 22px;
}
.db-alur span { font-size: 12.5px; color: var(--text-2, #9aa3b0); }

/* Ubin zona diberi kilau tipis saat disentuh kursor */
.db-u::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px 90px at 50% 0%, rgba(255,255,255,.07), transparent 70%);
  opacity: 0; transition: opacity .16s;
}
.db-u:hover::after { opacity: 1; }

/* ==================== PANGGUNG KILLER (DASHBOARD) ==================== */

.lk-hero {
  --aksen: #e03a40;
  --pendar: rgba(224, 58, 64, .3);
  position: relative; overflow: hidden;
  min-height: 420px; margin-bottom: 16px;
  border: 1px solid #2b3340; border-radius: 12px;
  background: #0a0d12;
  display: flex; align-items: center;
}
@media (max-width: 820px) { .lk-hero { min-height: 340px; } }

/* Portrait diperbesar dan diburamkan sebagai latar berwarna,
   supaya tiap killer punya suasana warnanya sendiri tanpa
   perlu gambar tambahan. */
.lk-hero-bg {
  position: absolute; inset: -12%;
  background-size: cover; background-position: center 18%;
  filter: blur(46px) saturate(1.25) brightness(.5);
  opacity: .55; transition: background-image .4s ease;
}

/* Sosok utama di sisi kanan, dipotong lembut ke arah teks */
.lk-hero-sosok {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  background-size: cover; background-position: 62% 14%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 62%);
  transition: background-image .4s ease;
}
@media (max-width: 820px) { .lk-hero-sosok { width: 100%; opacity: .35; } }

.lk-hero-vignet {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0a0d12 4%, rgba(10,13,18,.86) 34%, transparent 72%),
    linear-gradient(0deg, rgba(10,13,18,.95) 0%, transparent 44%),
    radial-gradient(760px 300px at 8% 108%, var(--pendar), transparent 66%);
}

.lk-hero-isi {
  position: relative; z-index: 2;
  padding: 40px 42px; max-width: 620px;
}
@media (max-width: 620px) { .lk-hero-isi { padding: 26px 22px; } }

.lk-eyebrow {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--aksen);
  margin-bottom: 8px;
}

.lk-judul {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: .88; margin: 0 0 12px;
}
.lk-judul span { display: block; }
.lk-judul span:nth-child(1),
.lk-judul span:nth-child(2) {
  font-size: 44px; letter-spacing: .03em; color: var(--text-1, #e9e7e2);
  text-shadow: 0 3px 26px rgba(0,0,0,.8);
}
.lk-nama {
  font-size: 52px; letter-spacing: .02em; margin-top: 5px;
  color: var(--aksen);
  text-shadow: 0 0 42px var(--pendar), 0 3px 22px rgba(0,0,0,.9);
  animation: lkMasuk .45s cubic-bezier(.2,.8,.3,1);
}
@media (max-width: 620px) {
  .lk-judul span:nth-child(1), .lk-judul span:nth-child(2) { font-size: 30px; }
  .lk-nama { font-size: 34px; }
}
@keyframes lkMasuk {
  from { opacity: 0; transform: translateY(9px) }
  to   { opacity: 1; transform: none }
}

.lk-power {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2, #9aa3b0); margin-bottom: 14px; min-height: 16px;
}

.lk-lore {
  font-size: 13px; line-height: 1.72; color: var(--text-2, #9aa3b0);
  margin: 0 0 22px; max-width: 470px;
  text-shadow: 0 1px 12px rgba(0,0,0,.85);
  border-left: 2px solid var(--aksen); padding-left: 14px;
}

.lk-tombol { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-play {
  padding: 12px 30px; cursor: pointer; border: none; border-radius: 5px;
  background: var(--aksen); color: #fff;
  font-family: "Barlow Condensed", sans-serif; font-size: 14px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 8px 26px var(--pendar);
  transition: transform .13s, box-shadow .13s;
}
.lk-play:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--pendar); }
.lk-ghost {
  padding: 12px 22px; cursor: pointer; border-radius: 5px;
  background: rgba(255,255,255,.05); color: var(--text-1, #e9e7e2);
  border: 1px solid rgba(255,255,255,.16);
  font-family: "Barlow Condensed", sans-serif; font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase;
  transition: background .13s, border-color .13s;
}
.lk-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--aksen); }

/* Rak thumbnail di kanan bawah, seperti pemilih karakter */
.lk-rak {
  position: absolute; right: 20px; bottom: 18px; z-index: 3;
  display: flex; gap: 5px; justify-content: flex-end;
  padding: 7px 8px; border-radius: 8px;
  /* Panel gelap tipis di belakang rak supaya thumbnail tidak
     terbaca menempel di badan karakter */
  background: rgba(8, 11, 15, .58);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .07);
}
@media (max-width: 820px) { .lk-rak { position: static; padding: 0 22px 18px; max-width: 100%; } }

.lk-rak-k {
  width: 46px; height: 62px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 4px;
  background: #11151b; opacity: .5;
  transition: opacity .15s, transform .15s, border-color .15s;
}
.lk-rak-k img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.lk-rak-k:hover { opacity: .9; transform: translateY(-3px); }
.lk-rak-k.on {
  opacity: 1; border-color: var(--aksen);
  box-shadow: 0 0 0 1px var(--aksen), 0 6px 18px var(--pendar);
}

.lk-acak {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: rgba(10,13,18,.7); color: var(--text-2, #9aa3b0);
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  font-size: 17px; line-height: 1;
  transition: color .14s, border-color .14s, transform .3s;
}
.lk-acak:hover { color: #fff; border-color: var(--aksen); transform: rotate(180deg); }

.rb-suara {
  position: absolute; top: 12px; right: 52px;
  width: 30px; height: 30px; padding: 0; line-height: 1;
  background: transparent; border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; color: var(--text-3, #6b7482);
  font-size: 14px; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.rb-suara:hover { border-color: var(--merah, #c0272d); background: rgba(255,255,255,.05); }

/* ---- Latar custom panggung ---- */
.lk-hero-custom {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  transition: opacity .18s, filter .18s;
}

.lk-gear {
  position: absolute; top: 16px; right: 60px; z-index: 4;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: rgba(10,13,18,.7); color: var(--text-2, #9aa3b0);
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  font-size: 15px; line-height: 1;
  transition: color .14s, border-color .14s;
}
.lk-gear:hover { color: #fff; border-color: var(--aksen); }

.lk-panel {
  position: absolute; top: 58px; right: 18px; z-index: 6;
  width: 244px; padding: 15px 16px;
  background: rgba(12, 16, 22, .96);
  border: 1px solid #333d4c; border-radius: 9px;
  box-shadow: 0 18px 44px rgba(0,0,0,.62);
  display: none;
}
.lk-panel.buka { display: block; animation: lkPanelMasuk .16s ease; }
@keyframes lkPanelMasuk {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1 }
}

.lk-panel-jd {
  font-family: "Barlow Condensed", sans-serif; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3, #6b7482); margin-bottom: 11px;
}
.lk-panel-baris { display: flex; gap: 6px; margin-bottom: 13px; }
.lk-panel-baris .small-btn { flex: 1; padding: 7px 4px; font-size: 10.5px; }

.lk-slider-baris { display: block; margin-bottom: 12px; }
.lk-slider-baris > span {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--text-3, #6b7482); margin-bottom: 5px;
}
.lk-slider-baris b { color: var(--text-1, #e9e7e2); font-size: 12px; }

.lk-slider-baris input[type=range] {
  width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: #2a3038; border-radius: 3px; outline: none; cursor: pointer;
}
.lk-slider-baris input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--aksen); border: 2px solid #0d1218; cursor: pointer;
  box-shadow: 0 0 0 1px var(--aksen);
}

.lk-cek-baris {
  display: flex; align-items: center; gap: 8px; margin-bottom: 13px;
  font-size: 11.5px; color: var(--text-2, #9aa3b0); cursor: pointer;
}
.lk-cek-baris input { width: auto; margin: 0; }

.lk-panel .lk-hapus { width: 100%; padding: 8px; font-size: 10.5px; }

/* ==================== WALLPAPER HALAMAN ==================== */

.wp {
  --kabut: .5;
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* Konten harus berada di atas wallpaper.

   HANYA .main yang diatur di sini. Topbar sudah punya
   position:sticky dan z-index:200 di bagian atas berkas ini —
   menuliskannya lagi di sini menimpa sticky-nya jadi relative dan
   menurunkan tingkatnya, yang membuat dropdown "Lainnya" tertembus
   isi halaman dan topbar berhenti menempel saat digulir. */
.main { position: relative; z-index: 1; }

.wp-gambar {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .18s, filter .18s;
}

/* Tiga lapis kabut dengan arah dan kecepatan berbeda.
   Satu lapis saja terbaca sebagai noda diam; tiga lapis yang
   saling lewat itulah yang membuatnya terasa bergerak. */
.wp-kabut {
  position: absolute; inset: -45%;
  opacity: var(--kabut);
  will-change: transform;
}

.wp-kabut.k1 {
  background:
    radial-gradient(closest-side at 22% 34%, rgba(154,163,176,.16), transparent 70%),
    radial-gradient(closest-side at 74% 62%, rgba(120,132,150,.13), transparent 72%),
    radial-gradient(closest-side at 48% 86%, rgba(192,39,45,.09), transparent 68%);
  animation: wpHanyut1 64s ease-in-out infinite alternate;
}
.wp-kabut.k2 {
  background:
    radial-gradient(closest-side at 68% 22%, rgba(140,152,170,.12), transparent 70%),
    radial-gradient(closest-side at 16% 72%, rgba(90,110,140,.12), transparent 72%);
  animation: wpHanyut2 92s ease-in-out infinite alternate;
}
.wp-kabut.k3 {
  background:
    radial-gradient(closest-side at 42% 12%, rgba(180,188,200,.08), transparent 66%),
    radial-gradient(closest-side at 88% 88%, rgba(192,39,45,.07), transparent 70%);
  animation: wpHanyut3 128s linear infinite;
}

@keyframes wpHanyut1 {
  from { transform: translate3d(-5%, -3%, 0) scale(1) }
  to   { transform: translate3d(6%, 4%, 0) scale(1.18) }
}
@keyframes wpHanyut2 {
  from { transform: translate3d(7%, 2%, 0) scale(1.12) }
  to   { transform: translate3d(-6%, -5%, 0) scale(1) }
}
@keyframes wpHanyut3 {
  from { transform: translate3d(-8%, 4%, 0) rotate(0deg) }
  to   { transform: translate3d(8%, -4%, 0) rotate(6deg) }
}

/* Butiran halus supaya gradasi tidak terlihat seperti pita warna */
.wp-butir {
  position: absolute; inset: 0; opacity: .035;
  background-image: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;
}

.wp-vignet {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, transparent 44%, rgba(6,8,12,.72) 100%),
    linear-gradient(180deg, rgba(6,8,12,.5) 0%, transparent 22%, transparent 74%, rgba(6,8,12,.62) 100%);
}

/* Hormati pengguna yang mematikan animasi di sistemnya */
@media (prefers-reduced-motion: reduce) {
  .wp-kabut { animation: none; }
}

.ov-start {
  border-color: rgba(212,181,106,.55) !important;
  color: #d4b56a !important;
}
.ov-start:hover {
  background: rgba(212,181,106,.14) !important;
  border-color: #d4b56a !important;
}

/* Logo tim di papan draft */
.dr-logo {
  display: block; width: 46px; height: 46px; object-fit: contain;
  margin: 0 0 6px auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.7));
}
.tim-a .dr-logo { margin: 0 0 6px auto; }

/* =========================================================
   PAPAN SKOR DRAFT

   Dipegang operator selama pertandingan berjalan, jadi tombolnya
   dibuat besar dan angkanya mudah dibaca sekilas dari jauh —
   yang menekan biasanya sedang mengurus banyak hal sekaligus.
========================================================= */
.dr-skor {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--panel, #12161c); border: 1px solid var(--garis, #2a3038);
  border-radius: 7px;
}

/* Label "Skor" tidak perlu — panel sudah jelas dari isinya. Sisakan di
   panel "Ronde ini" saja supaya kedua panel tidak tertukar. */
.dr-skor > .ds-jd { display: none; }
.dr-ronde > .ds-jd {
  display: block; width: 100%;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}

.ds-tim { display: flex; align-items: center; gap: 8px; }
.ds-tim b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-ronde .ds-tim b { font-size: 15px; }
.ds-tim.a b { color: #e05055; }
.ds-tim.b b { color: #5c9ae0; }

.ds-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.ds-btn:hover { background: rgba(255,255,255,.11); }
.ds-btn:active { transform: translateY(1px); }

.ds-angka {
  width: 56px; text-align: center;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px; font-weight: 700; padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.ds-angka:focus { outline: none; border-color: var(--merah, #c0272d); }
/* Panah bawaan mengecilkan ruang angka dan tidak dipakai — sudah ada +/- */
.ds-angka::-webkit-inner-spin-button,
.ds-angka::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ds-kecil {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-3, #6b7482);
}
.ds-kecil select, .ds-kecil input {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 12px; padding: 4px 6px;
}
.ds-kecil input { width: 54px; }

.ds-status {
  margin-left: auto; font-size: 11.5px; color: var(--text-3, #6b7482);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.ds-status.genting { color: #d9a94a; }
.ds-status.menang { color: #5fbd7a; }

@media (max-width: 760px) {
  .ds-status { margin-left: 0; width: 100%; }
}

/* Tombol tampilan overlay: yang sedang tayang diberi tanda supaya
   operator tahu isi layar OBS tanpa harus melirik jendelanya. */
.ov-papan.aktif, .ov-skor.aktif, .ov-start.aktif,
.ov-akhir.aktif, .ov-spin.aktif, .lv-tayang.aktif,
.lv-ticker-saklar.aktif, .lv-promo-saklar.aktif, .lv-iklan-saklar.aktif,
.lv-hk-saklar.aktif, .br-pred-saklar.aktif, .dn-saklar.aktif {
  border-color: rgba(201,169,97,.8) !important;
  background: rgba(201,169,97,.16) !important;
  color: #e6cd90 !important;
}

/* Baris hitungan ronde: hook & generator, memakai ikon yang sama
   dengan overlay supaya operator tidak perlu menghafal urutannya. */
.dr-ronde { margin-top: 0; }
.dr-ronde .ds-tim { gap: 5px; }

.ds-ikon {
  width: 20px; height: 20px; display: block; flex-shrink: 0;
  margin-left: 7px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .6;
}
.ds-ikon.hook { background-image: url("data:image/png;base64,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"); }
.ds-ikon.gen { background-image: url("data:image/png;base64,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"); }

.ds-angka.kecil { width: 42px; font-size: 18px; }

/* Ikon hook pertama dibedakan dengan penanda kecil, bukan gambar lain —
   supaya operator langsung tahu kolom mana yang "1st". */
.ds-ikon.satu { position: relative; }
.ds-ikon.satu::after {
  content: "1st"; position: absolute; top: -5px; right: -7px;
  font-family: "Chakra Petch", "Barlow Condensed", sans-serif;
  font-size: 8px; font-weight: 700; color: #c9a961; letter-spacing: .02em;
}


/* Tombol peran memakai ikon yang sama dengan overlay supaya operator
   melihat lambang yang persis sama di dua tempat. */
.ds-peran { position: relative; padding-left: 30px !important; }
.ds-peran::before {
  content: ""; position: absolute; left: 10px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background-image: url("data:image/png;base64,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");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .55;
}
.ds-peran.aktif::before { opacity: 1; }

/* =========================================================
   RIWAYAT TURNAMEN
========================================================= */
.rw-hitung { font-size: 11px; color: var(--text-3, #6b7482); letter-spacing: .12em; }

.rw-tab {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.rw-tab-btn {
  background: transparent; border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; color: var(--text-3, #6b7482);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; cursor: pointer;
}
.rw-tab-btn:hover { color: var(--text-1, #e9e7e2); }
.rw-tab-btn.active {
  color: #e6cd90; border-color: rgba(201,169,97,.6);
  background: rgba(201,169,97,.1);
}
.rw-tombol { margin-left: auto; display: flex; gap: 6px; }

/* Tabel dibungkus wadah bergulir supaya turnamen dengan banyak tim
   tidak memaksa seluruh halaman melebar. */
.rw-gulir { overflow-x: auto; }

.rw-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rw-tabel th {
  text-align: left; padding: 7px 10px; white-space: nowrap;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
  border-bottom: 1px solid var(--garis, #2a3038);
}
.rw-tabel th i { font-style: normal; opacity: .55; letter-spacing: .04em; }
.rw-tabel td {
  padding: 7px 10px; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.rw-tabel tbody tr:hover { background: rgba(255,255,255,.03); }
.rw-tabel.kecil { font-size: 11.5px; }
.rw-tabel.kecil td, .rw-tabel.kecil th { padding: 5px 9px; }

.rw-no { color: var(--text-3, #6b7482); font-variant-numeric: tabular-nums; }
.rw-tim { font-weight: 600; }
.rw-map { color: var(--text-2, #9aa3b0); }
.rw-menang { color: #5fbd7a; font-weight: 600; }
.rw-kalah { color: #d97070; }
.rw-selisih.plus { color: #5fbd7a; }
.rw-selisih.minus { color: #d97070; }

.rw-match {
  border: 1px solid var(--garis, #2a3038); border-radius: 7px;
  margin-bottom: 10px; overflow: hidden;
}
.rw-kepala {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; background: rgba(255,255,255,.03);
}
.rw-kepala b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2, #9aa3b0);
}
.rw-kepala b.juara { color: #e6cd90; }
.rw-tgl { font-size: 11px; color: var(--text-3, #6b7482); min-width: 88px; }
.rw-skor {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rw-bo { font-size: 10.5px; letter-spacing: .16em; color: var(--text-3, #6b7482); }
.rw-x {
  margin-left: auto; width: 24px; height: 24px;
  background: transparent; border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-3, #6b7482);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.rw-x:hover { color: #e08585; border-color: rgba(192,39,45,.55); }

.rw-kosong { font-size: 12px; color: var(--text-3, #6b7482); padding: 10px 2px; }

/* =========================================================
   DIALOG ALAMAT OVERLAY
========================================================= */
#ovUrlKotak {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 9, .72);
}

.ovu-panel {
  width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
  padding: 18px 20px 20px;
  background: var(--panel, #12161c);
  border: 1px solid var(--garis, #2a3038);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}

.ovu-kepala {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ovu-kepala b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-1, #e9e7e2);
}
.ovu-x {
  width: 26px; height: 26px; cursor: pointer;
  background: transparent; border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; color: var(--text-3, #6b7482); font-size: 16px; line-height: 1;
}
.ovu-x:hover { color: #e08585; border-color: rgba(192, 39, 45, .55); }

.ovu-jelas {
  font-size: 11.5px; line-height: 1.55; color: var(--text-3, #6b7482);
  margin: 0 0 12px;
}

.ovu-grup {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
  margin: 14px 0 4px;
}

.ovu-pilih {
  display: block; padding: 9px 11px; margin-bottom: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--garis, #2a3038); border-radius: 6px;
  font-size: 12.5px; color: var(--text-2, #9aa3b0); cursor: pointer;
}
.ovu-pilih small {
  display: block; margin-top: 3px; padding-left: 21px;
  font-size: 11px; color: var(--text-3, #6b7482);
}

.ovu-baris {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.ovu-no {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .06);
  font-size: 10.5px; color: var(--text-3, #6b7482);
}
.ovu-teks { min-width: 0; flex: 1; }
.ovu-teks code {
  display: block; font-size: 12.5px; color: #e6cd90;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ovu-teks small {
  display: block; margin-top: 2px;
  font-size: 10.5px; color: var(--text-3, #6b7482);
}

/* Pilihan di dalam kotak alamat overlay perlu jarak dari labelnya. */
.ovu-pilih select {
  display: block; margin-top: 7px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 12px; padding: 5px 7px;
}

/* =========================================================
   PANEL LIVE
========================================================= */
.lv-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0;
}
.lv-row + .lv-row { border-top: 1px solid rgba(255,255,255,.045); }

.lv-label, .lv-isi {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 7px 9px;
}
.lv-label {
  width: 130px; flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.lv-isi { flex: 1; min-width: 0; }
.lv-label:focus, .lv-isi:focus { outline: none; border-color: var(--merah, #c0272d); }

.lv-tambah {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px; margin-bottom: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038); border-radius: 6px;
}
.lv-tambah input {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.lv-tambah #lvKiller { flex: 1; min-width: 180px; }
.lv-tambah #lvJumlah { width: 68px; text-align: center; }
.lv-tambah #lvDari { width: 150px; }
.lv-tambah input:focus { outline: none; border-color: var(--merah, #c0272d); }

.lv-antre {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--garis, #2a3038);
  border-left: 3px solid rgba(201,169,97,.6);
  border-radius: 6px;
}
/* Yang sisanya nol dibiarkan tetap terlihat tapi diredupkan — kadang
   perlu dinaikkan lagi kalau penonton menambah request. */
.lv-antre.usai { opacity: .42; border-left-color: rgba(255,255,255,.14); }

.lv-sisa {
  min-width: 46px; text-align: center; flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px; font-weight: 700; color: #e6cd90;
  font-variant-numeric: tabular-nums;
}
.lv-nama { flex: 1; min-width: 0; }
.lv-nama b {
  display: block; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-nama small {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--text-3, #6b7482);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lv-pratinjau {
  padding: 16px 18px;
  background: #06080b; border: 1px solid var(--garis, #2a3038);
  border-radius: 7px;
}
.lv-pra-baris {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px; font-weight: 600; line-height: 1.32; color: #fff;
}
.lv-pra-baris span { color: #c9a961; }

/* Tombol putar dibedakan dari tombol hitung, karena akibatnya beda:
   yang satu mengubah angka, yang satu memunculkan kartu di siaran. */
/* Nama kelasnya sengaja berawalan lv-: ".main" sudah dipakai wadah
   tata letak halaman, dan tombol yang memakai nama itu ikut mewarisi
   padding besarnya. */
.ds-btn.lv-play {
  color: #e6cd90; border-color: rgba(201,169,97,.5);
  font-size: 11px;
}
.ds-btn.lv-play:hover { background: rgba(201,169,97,.16); }

/* Baris yang kartunya sedang tayang diberi tanda supaya operator tahu
   mana yang sedang dilihat penonton. */
.lv-antre.tayang {
  border-color: rgba(201,169,97,.6);
  border-left-color: #c9a961;
  background: rgba(201,169,97,.08);
}

/* Pemilih ukuran dan warna per baris info */
.lv-pilih {
  flex-shrink: 0;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-2, #9aa3b0);
  font-size: 11.5px; padding: 6px 5px;
}
.lv-pilih.ukuran { width: 84px; }
.lv-pilih.warna { width: 78px; }
.lv-pilih:focus { outline: none; border-color: var(--merah, #c0272d); }

/* Baris Mustplay tidak bisa diketik — isinya dari antrean — tapi
   ukuran dan warnanya tetap bisa diatur. */
.lv-row-antre { opacity: .85; }
.lv-label.statis, .lv-isi.statis {
  padding: 7px 9px; font-size: 12px; color: var(--text-3, #6b7482);
  border: 1px dashed var(--garis, #2a3038); border-radius: 4px;
}
.lv-label.statis {
  width: 130px; flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}
.lv-isi.statis { flex: 1; min-width: 0; }

.lv-nama-ubah {
  width: 100%; background: transparent; border: 1px solid transparent;
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 14px; padding: 4px 6px; margin-left: -6px;
}
.lv-nama-ubah:hover { border-color: var(--garis, #2a3038); }
.lv-nama-ubah:focus {
  outline: none; background: var(--bg, #0d1218);
  border-color: var(--merah, #c0272d);
}

/* Pratinjau memakai ukuran dan warna yang sama dengan overlay,
   diperkecil sesuai lebar panel. */
.lv-pra-baris.u-kecil   { font-size: 16px; }
.lv-pra-baris.u-besar   { font-size: 28px; }
.lv-pra-baris.u-raksasa { font-size: 38px; }
.lv-pra-baris.w-emas  { color: #e6cd90; }
.lv-pra-baris.w-merah { color: #ff6a70; }
.lv-pra-baris.w-hijau { color: #74d69a; }
.lv-pra-baris.w-biru  { color: #7cbaff; }
.lv-pra-baris:not(.w-putih) span { color: inherit; opacity: .78; }

/* Judul kolom baris info */
.lv-kepala-kolom {
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 5px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}
.lv-kepala-kolom .k-label { width: 130px; flex-shrink: 0; }
.lv-kepala-kolom .k-isi { flex: 1; min-width: 0; }
.lv-kepala-kolom .k-pilih { width: 84px; flex-shrink: 0; text-align: center; }
.lv-kepala-kolom .k-aksi { width: 96px; flex-shrink: 0; }

/* Warna label, terpisah dari warna isi */
.lv-pra-baris span.wl-emas { color: #e6cd90; }
.lv-pra-baris span.wl-putih { color: #fff; }
.lv-pra-baris span.wl-merah { color: #ff6a70; }
.lv-pra-baris span.wl-hijau { color: #74d69a; }
.lv-pra-baris span.wl-biru { color: #7cbaff; }

/* Deretan tombol putar di bawah pratinjau */
.lv-luncur { margin-top: 14px; }
.lv-luncur-jd {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3, #6b7482); margin-bottom: 9px;
}
.lv-luncur-baris { display: flex; flex-wrap: wrap; gap: 8px; }

.lv-luncur-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--garis, #2a3038);
  border-left: 3px solid rgba(201,169,97,.55);
  border-radius: 8px; cursor: pointer;
  color: var(--text-1, #e9e7e2);
}
.lv-luncur-btn:hover {
  background: rgba(201,169,97,.12);
  border-color: rgba(201,169,97,.6);
}
.lv-luncur-btn:active { transform: translateY(1px); }
.lv-luncur-btn.tayang {
  background: rgba(201,169,97,.16);
  border-color: rgba(201,169,97,.7);
}

.lv-luncur-play { color: #e6cd90; font-size: 12px; }
.lv-luncur-nama {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: .04em;
}
.lv-luncur-sisa {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px; font-weight: 700; color: #e6cd90;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(201,169,97,.14);
}

/* Bar putar cepat di bawah pratinjau */
.lv-bebas {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038);
  border-left: 3px solid rgba(201,169,97,.5);
  border-radius: 7px;
}
.lv-bebas-jd {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3, #6b7482); flex-shrink: 0;
}
.lv-bebas input {
  flex: 1; min-width: 200px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.lv-bebas input:focus { outline: none; border-color: var(--merah, #c0272d); }

/* =========================================================
   TEKS BERJALAN
========================================================= */

.lv-ticker-teks {
  width: 100%; resize: vertical; min-height: 84px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 5px; color: var(--text-1, #e9e7e2);
  font-family: inherit; font-size: 13px; line-height: 1.7; padding: 10px 12px;
}
.lv-ticker-teks:focus { outline: none; border-color: var(--merah, #c0272d); }
.lv-ticker-teks::placeholder { color: var(--text-3, #6b7482); }

.lv-ticker-atur {
  display: flex; flex-wrap: wrap; gap: 9px 20px;
  align-items: center; margin-top: 13px;
}

.lv-atur { display: flex; align-items: center; gap: 8px; }
.lv-atur > span {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}
.lv-atur input[type="range"] { width: 128px; accent-color: #c9a961; }
.lv-atur > b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px; color: #e6cd90; min-width: 24px;
  font-variant-numeric: tabular-nums;
}

/* Pratinjau memakai animasi CSS biasa, bukan penggambaran per bingkai
   seperti di overlay: di sini yang perlu terbaca hanya bentuk dan
   warnanya. Ketepatan titik sambung tidak berpengaruh pada siaran. */
.lv-ticker-pra {
  margin-top: 15px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--garis, #2a3038);
}
.lv-tp-bar {
  position: relative; overflow: hidden; padding: 9px 0;
  background: linear-gradient(0deg, rgba(5,7,10,.96), rgba(5,7,10,.8));
  border-top: 1px solid rgba(201,169,97,.45);
}
.lv-tp-bar.mati { opacity: .4; }
.lv-tp-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,7,10,.95), transparent 9%, transparent 91%, rgba(5,7,10,.95));
}
.lv-tp-jalur {
  display: flex; align-items: center; white-space: nowrap; width: max-content;
  animation: lvTpJalan linear infinite;
}
.lv-tp-bar.kanan .lv-tp-jalur { animation-direction: reverse; }
@keyframes lvTpJalan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lv-tp-rantai { display: inline-flex; align-items: center; }
.lv-tp-pesan {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; padding: 0 17px;
}
.lv-tp-pisah { font-size: 9px; opacity: .5; color: #c9a961; flex-shrink: 0; }

.lv-tp-bar.u-kecil .lv-tp-pesan { font-size: 14px; padding: 0 14px; }
.lv-tp-bar.u-besar .lv-tp-pesan { font-size: 21px; padding: 0 21px; }
.lv-tp-bar.w-emas  .lv-tp-pesan { color: #e6cd90; }
.lv-tp-bar.w-merah .lv-tp-pesan { color: #ff6a70; }
.lv-tp-bar.w-hijau .lv-tp-pesan { color: #74d69a; }
.lv-tp-bar.w-biru  .lv-tp-pesan { color: #7cbaff; }

/* =========================================================
   BANNER PROMO
========================================================= */

.lv-angka {
  width: 62px; padding: 7px 9px; text-align: center;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 13px;
}
.lv-angka.lebar { width: 78px; }
.lv-angka:focus { outline: none; border-color: var(--merah, #c0272d); }

.lv-pr-kepala .k-ajak { flex: 1; min-width: 0; }
.lv-pr-kepala .k-tanda { width: 54px; flex-shrink: 0; text-align: center; }
.lv-pr-kepala .k-merek { width: 210px; flex-shrink: 0; }

.lv-pr-row .lv-pr-ajak,
.lv-pr-row .lv-pr-tanda,
.lv-pr-row .lv-pr-merek {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.lv-pr-row .lv-pr-ajak { flex: 1; min-width: 0; }
.lv-pr-row .lv-pr-tanda {
  width: 54px; flex-shrink: 0; text-align: center;
  color: #e6cd90; font-weight: 700;
}
/* Kolom merek dibedakan tegas: inilah muatan yang sebenarnya dijual,
   sedangkan ajakan di kirinya cuma pengantar. */
.lv-pr-row .lv-pr-merek {
  width: 210px; flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #e6cd90;
}
.lv-pr-row input:focus { outline: none; border-color: rgba(201,169,97,.65); }

/* Pratinjau memakai bentuk yang sama dengan overlay, diperkecil.
   Animasinya tidak ditiru \u2014 yang perlu diperiksa di sini cuma apakah
   tulisannya muat dan warnanya cocok. */
.lv-promo-pra {
  margin-top: 16px; padding: 22px 14px; border-radius: 6px;
  border: 1px solid var(--garis, #2a3038);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.014) 0 9px, transparent 9px 18px),
    #090c11;
  display: flex; justify-content: center; overflow: hidden;
}

.lv-pp-panggung { display: flex; align-items: center; }

.lv-pp-slab {
  height: 40px; display: flex; align-items: center; overflow: hidden;
  transform: skewX(-11deg);
}
.lv-pp-slab span {
  transform: skewX(11deg); white-space: nowrap;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; line-height: 1; text-transform: uppercase;
}
.lv-pp-slab.kiri {
  padding: 0 26px 0 21px;
  background: linear-gradient(120deg, #0a0d12, #12171f);
  border: 1px solid rgba(201,169,97,.42);
  max-width: 300px;
}
.lv-pp-slab.kiri span { font-size: 17px; letter-spacing: .04em; color: #e6cd90; }
.lv-pp-slab.kanan {
  padding: 0 21px 0 26px;
  background: linear-gradient(120deg, #e0c68d, #a8873f 55%, #cdae6c);
  max-width: 260px;
}
.lv-pp-slab.kanan span { font-size: 19px; letter-spacing: .07em; color: #12161c; }

.lv-pp-tanda {
  position: relative; z-index: 3; flex-shrink: 0;
  width: 34px; height: 34px; margin: 0 -11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(158deg, #1a1f28, #0a0d12);
  border: 2px solid #c9a961; transform: rotate(45deg);
}
.lv-pp-tanda i {
  transform: rotate(-45deg); font-style: normal;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px; font-weight: 700; color: #e6cd90; line-height: 1;
}

.lv-pp-panggung.w-merah .lv-pp-slab.kanan { background: linear-gradient(120deg, #d94a51, #8f1b21 55%, #b83840); }
.lv-pp-panggung.w-merah .lv-pp-slab.kanan span { color: #fff; }
.lv-pp-panggung.w-merah .lv-pp-slab.kiri { border-color: rgba(217,74,81,.5); }
.lv-pp-panggung.w-merah .lv-pp-slab.kiri span { color: #ff9195; }
.lv-pp-panggung.w-merah .lv-pp-tanda { border-color: #d94a51; }
.lv-pp-panggung.w-merah .lv-pp-tanda i { color: #ff9195; }

.lv-pp-panggung.w-biru .lv-pp-slab.kanan { background: linear-gradient(120deg, #6fb0f2, #2c5f9e 55%, #4d8dcd); }
.lv-pp-panggung.w-biru .lv-pp-slab.kanan span { color: #0b1018; }
.lv-pp-panggung.w-biru .lv-pp-slab.kiri { border-color: rgba(111,176,242,.5); }
.lv-pp-panggung.w-biru .lv-pp-slab.kiri span { color: #9ccbff; }
.lv-pp-panggung.w-biru .lv-pp-tanda { border-color: #6fb0f2; }
.lv-pp-panggung.w-biru .lv-pp-tanda i { color: #9ccbff; }

.lv-pp-panggung.w-hijau .lv-pp-slab.kanan { background: linear-gradient(120deg, #7ad79f, #2f7a4e 55%, #55ab74); }
.lv-pp-panggung.w-hijau .lv-pp-slab.kanan span { color: #0b1018; }
.lv-pp-panggung.w-hijau .lv-pp-slab.kiri { border-color: rgba(122,215,159,.5); }
.lv-pp-panggung.w-hijau .lv-pp-slab.kiri span { color: #9ce5ba; }
.lv-pp-panggung.w-hijau .lv-pp-tanda { border-color: #7ad79f; }
.lv-pp-panggung.w-hijau .lv-pp-tanda i { color: #9ce5ba; }

/* =========================================================
   BANNER IKLAN BERGAMBAR
========================================================= */

.lv-ik-kepala .k-gbr { width: 64px; flex-shrink: 0; text-align: center; }
.lv-ik-kepala .k-label { width: 180px; flex-shrink: 0; }
.lv-ik-kepala .k-teks { flex: 1; min-width: 0; }

/* Kotak gambar dibuat sebagai tombol berisi pratinjau, bukan kolom
   nama berkas. Yang perlu diperiksa operator adalah lambangnya
   terbaca atau tidak \u2014 nama berkas tidak memberi tahu apa pun. */
.lv-ik-gbr {
  width: 64px; height: 42px; flex-shrink: 0; padding: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #0d1218);
  border: 1px dashed var(--garis, #2a3038); border-radius: 5px;
  color: var(--text-3, #6b7482); font-size: 17px; line-height: 1;
}
.lv-ik-gbr:hover { border-color: rgba(201,169,97,.6); color: #e6cd90; }
.lv-ik-gbr.ada {
  border-style: solid; border-color: rgba(201,169,97,.45);
  background: rgba(255,255,255,.04);
}
.lv-ik-gbr img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.lv-ik-row .lv-ik-label,
.lv-ik-row .lv-ik-teks {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.lv-ik-row .lv-ik-label { width: 180px; flex-shrink: 0; }
.lv-ik-row .lv-ik-teks {
  flex: 1; min-width: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.lv-ik-row input:focus { outline: none; border-color: rgba(201,169,97,.65); }

.lv-iklan-pra {
  margin-top: 16px; padding: 22px 14px; border-radius: 6px;
  border: 1px solid var(--garis, #2a3038);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.014) 0 9px, transparent 9px 18px),
    #090c11;
  display: flex; justify-content: center;
}

.lv-ik-kartu {
  position: relative; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(150deg, #0e1219, #080b0f);
  border: 1px solid rgba(201,169,97,.4); border-radius: 8px;
}
.lv-ik-kartu::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,181,106,.85), transparent);
}
.lv-ik-logo {
  flex-shrink: 0; padding: 11px 14px;
  border-right: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  display: flex; align-items: center;
}
.lv-ik-logo img { display: block; height: 34px; width: auto; max-width: 84px; object-fit: contain; }
.lv-ik-isi { padding: 10px 18px; }
.lv-ik-ket {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(212,181,106,.9); margin-bottom: 4px;
}
.lv-ik-utama {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px; font-weight: 700; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap;
}

/* =========================================================
   TOMBOL PINTAS
========================================================= */

.lv-hk-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 2px;
}
.lv-hk-row + .lv-hk-row { border-top: 1px solid rgba(255,255,255,.045); }

.lv-hk-teks { flex: 1; min-width: 0; }
.lv-hk-teks b {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-1, #e9e7e2);
}
.lv-hk-teks small {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-3, #6b7482);
}

/* Kolom tombol dibuat menyerupai tuts, bukan kotak isian: ia tidak
   diketik, melainkan ditekan sekali lalu menunggu tombol sungguhan. */
.lv-hk-tombol {
  flex-shrink: 0; min-width: 122px; padding: 9px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--garis, #2a3038);
  border-bottom-width: 2px;
  border-radius: 5px; cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #e6cd90;
}
.lv-hk-tombol:hover { background: rgba(201,169,97,.12); border-color: rgba(201,169,97,.5); }
.lv-hk-tombol:active { transform: translateY(1px); border-bottom-width: 1px; }

.lv-hk-tombol.rekam {
  color: #fff; letter-spacing: .08em;
  border-color: var(--merah, #c0272d);
  background: rgba(192,39,45,.18);
  animation: lvHkTunggu 1.1s ease-in-out infinite;
}
@keyframes lvHkTunggu { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* Tombol yang ditolak sistem ditandai di barisnya, bukan lewat kotak
   pesan: kalau muncul sebagai peringatan sekali lewat, operator sudah
   lupa tombol mana yang bermasalah saat hendak menggantinya. */
.lv-hk-row.gagal .lv-hk-tombol {
  color: #ff8b90; border-color: rgba(192,39,45,.55);
}
.lv-hk-row.gagal .lv-hk-teks small { color: #e08585; }

/* Tombol Waiting Spin ikut penanda nyala yang sama, dan diredupkan
   selagi saklar utamanya mati karena ia menumpang sumber yang sama. */
.ov-tunggu.aktif {
  border-color: rgba(201,169,97,.8) !important;
  background: rgba(201,169,97,.16) !important;
  color: #e6cd90 !important;
}
.ov-tunggu:disabled { opacity: .4; cursor: not-allowed; }

/* Kolom tulisan badge menunggu. Sengaja sempit dan menempel pada
   tombolnya: isinya cuma dua kata, dan menaruhnya jauh dari saklar
   yang bersangkutan membuat hubungan keduanya hilang. */
.ov-tunggu-judul {
  width: 128px; padding: 7px 10px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: #e6cd90;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.ov-tunggu-judul:focus { outline: none; border-color: rgba(201,169,97,.65); }
.ov-tunggu-judul::placeholder {
  color: var(--text-3, #6b7482); letter-spacing: .16em;
}

/* Keterangan jumlah badge yang sudah diunduh */
.badge-status {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3, #6b7482); align-self: center;
}
.badge-status.ada { color: #5fbd7a; }
.badge-impor:disabled { opacity: .5; cursor: wait; }

/* =========================================================
   DATA BADGE
========================================================= */
.bd-tambah {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px; margin-bottom: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038); border-radius: 7px;
}
.bd-tambah input[type="text"], .bd-tambah #bdNama {
  flex: 1; min-width: 200px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.bd-tambah select {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 12.5px; padding: 8px;
}

/* Kotak berkas bawaan peramban tidak bisa ditata; yang ditampilkan
   labelnya, kotak aslinya disembunyikan di belakangnya. */
.bd-berkas { position: relative; overflow: hidden; display: inline-block; }
.bd-berkas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bd-berkas span {
  display: inline-block; padding: 8px 14px;
  background: rgba(255,255,255,.05);
  border: 1px dashed var(--garis, #2a3038); border-radius: 4px;
  font-size: 12.5px; color: var(--text-2, #9aa3b0);
}
.bd-berkas:hover span { border-color: rgba(201,169,97,.6); color: #e6cd90; }

.bd-saring { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bd-saring #bdCari {
  margin-left: auto; min-width: 170px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 12.5px; padding: 7px 10px;
}

.bd-petak {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px;
}

.bd-kartu {
  position: relative; padding: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038); border-radius: 8px;
  text-align: center;
}
.bd-kartu.belum { opacity: .5; }
.bd-kartu.custom { border-left: 3px solid rgba(201,169,97,.6); }

.bd-gbr {
  aspect-ratio: 1/1; margin-bottom: 7px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(158deg, #2b3038, #14171d);
  border-radius: 6px; overflow: hidden;
}
.bd-gbr img { width: 100%; height: 100%; object-fit: contain; }
.bd-kosong { font-size: 20px; color: var(--text-3, #6b7482); }

.bd-nama {
  font-size: 12px; line-height: 1.3; margin-bottom: 7px;
  min-height: 31px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bd-kartu .small-btn, .bd-kartu .lv-pilih { width: 100%; font-size: 11px; }
.bd-kartu .rw-x { position: absolute; top: 6px; right: 6px; }

/* Panel Data Badge yang menumpang di halaman Database. Diberi jarak
   sendiri karena di halaman asalnya ia menempel pada panel lain,
   sedangkan di sini ia berdiri sendirian di antara saringan dan grid. */
.bd-rumah:not(:empty) { margin: 18px 0 22px; }

/* =========================================================
   PENANDA NYALA DI JUDUL PANEL
========================================================= */

/* Ditaruh di judul, bukan cuma di tombol saklarnya. Tombol ikut
   terlipat saat panel ditutup, sedangkan judul selalu terlihat —
   dan yang perlu diketahui operator sekilas adalah mana yang sedang
   tayang, bukan di mana tombolnya. */
.gb-nyala {
  display: inline-block; vertical-align: 1px;
  margin-left: 8px; padding: 2px 7px;
  border: 1px solid var(--garis, #2a3038); border-radius: 3px;
  font-family: "Barlow Condensed", sans-serif; font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--text-3, #6b7482); line-height: 1.5;
}
.gb-nyala.hidup {
  color: #12161c; background: #c9a961; border-color: #c9a961;
}

/* Aturan ukuran gambar dibedakan dari keterangan biasa: ia dibaca
   sekali saat memasang gambar, lalu tidak pernah lagi. */
.gb-aturan {
  padding: 10px 13px; margin-bottom: 4px;
  border-left: 2px solid rgba(201,169,97,.5);
  background: rgba(201,169,97,.05); border-radius: 0 5px 5px 0;
}
.gb-aturan b { color: #e6cd90; font-weight: 600; }

/* Gambar tanpa tulisan: pratinjau ikut melepas papannya, sama seperti
   yang akan terjadi di overlay. */
.lv-ik-polos { display: flex; align-items: center; justify-content: center; }
.lv-ik-polos img {
  display: block; height: 84px; width: auto; max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.8));
}

/* =========================================================
   GRAFIS SIARAN — panel operator
========================================================= */

.br-cepat { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.br-j.aktif {
  border-color: rgba(201,169,97,.8) !important;
  background: rgba(201,169,97,.16) !important;
  color: #e6cd90 !important;
}

/* Lebar kolom dijaga sama antara judul dan barisnya, memakai angka
   yang sama persis. Judul kolom yang melenceng dari isinya lebih buruk
   daripada tidak ada judul sama sekali \u2014 mata mengikuti judul, lalu
   membaca kolom yang salah. */
.br-kepala .k-tim    { width: 104px; flex-shrink: 0; }
.br-kepala .k-pemain { flex: 1; min-width: 0; }
.br-kepala .k-kar    { flex: 1; min-width: 0; }
.br-kepala .k-tahan  { width: 62px; flex-shrink: 0; text-align: center; }
.br-kepala .k-aksi   { width: 108px; flex-shrink: 0; }

.br-row .br-tim   { width: 104px; flex-shrink: 0; }
.br-row .br-detik { width: 62px; flex-shrink: 0; }
.br-row .br-tayang { width: 108px; flex-shrink: 0; }

.br-kepala-pred .k-judul { width: 260px; flex-shrink: 0; }
.br-kepala-pred .k-geser { flex: 1; min-width: 0; }
.br-kepala-pred .k-aksi  { width: 122px; flex-shrink: 0; }

.br-row-pred .br-nama { width: 260px; flex: 0 0 260px; min-width: 0; }
.br-row-pred .br-pred-saklar { width: 122px; flex-shrink: 0; }

.br-kepala-map .k-pilih { flex: 1; min-width: 0; }
.br-kepala-map .k-tahan { width: 62px; flex-shrink: 0; text-align: center; }
.br-kepala-map .k-aksi  { width: 132px; flex-shrink: 0; }

.br-row-map .br-map { flex: 1; min-width: 0; max-width: none; }
.br-row-map .br-detik { width: 62px; flex-shrink: 0; }
.br-row-map .br-tayang { width: 132px; flex-shrink: 0; }

.br-kepala-tambah .k-gbr   { width: 64px; flex-shrink: 0; text-align: center; }
.br-kepala-tambah .k-nama  { flex: 1; min-width: 0; }
.br-kepala-tambah .k-realm { width: 220px; flex-shrink: 0; }
.br-kepala-tambah .k-aksi  { width: 30px; flex-shrink: 0; }

.br-row-kustom .br-nama { flex: 1; min-width: 0; }
.br-row-kustom .br-kar  { width: 220px; flex: 0 0 220px; }
.br-k-gbr { width: 64px; height: 40px; }

.br-pra { margin-top: 14px; }

.br-nama, .br-kar {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.br-nama { flex: 1; min-width: 150px; }
.br-kar { flex: 1; min-width: 170px; }
.br-nama:focus, .br-kar:focus { outline: none; border-color: rgba(201,169,97,.65); }
.br-nama.mati, .br-kar.mati { opacity: .35; cursor: not-allowed; }

.br-tayang.small-btn {
  border-color: rgba(201,169,97,.55); color: #e6cd90;
}
.br-tayang.small-btn:hover { background: rgba(201,169,97,.16); }

/* ---- Pratinjau kartu kejadian ---- */
.br-pra {
  padding: 20px 16px; border-radius: 6px;
  border: 1px solid var(--garis, #2a3038);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 9px, transparent 9px 18px),
    #090c11;
  display: flex; justify-content: center;
}

.br-kartu {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 12px 20px 12px 12px;
  background: linear-gradient(100deg, #090c11, #06080c);
  border: 1px solid var(--garis, #2a3038);
  max-width: 100%;
}
.br-kartu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #c9a961;
}
.br-kartu.t-a::before { background: #b3161d; }
.br-kartu.t-b::before { background: #8e8778; }
.br-kartu.t-a { border-color: rgba(179,22,29,.55); }
.br-kartu.t-b { border-color: rgba(216,212,204,.34); }

.br-k-potret {
  width: 58px; height: 58px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(158deg, #1a1f28, #0a0d12);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.br-k-potret img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Sama seperti di overlay: badge membawa bingkainya sendiri, jadi
   wadahnya menghilang begitu ada gambar. */
.br-k-potret.gbr { background: none; border: none; }
.br-k-potret span {
  font-family: "Barlow Condensed", sans-serif; font-size: 25px; color: rgba(255,255,255,.14);
}

.br-k-isi { min-width: 0; }
.br-k-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: .36em; text-transform: uppercase;
  /* Abu tulang, sama seperti di overlay. Merah dicadangkan untuk nama
     tim dan garis pemisah — kalau label pun merah, tidak ada lagi yang
     bisa menonjol. */
  color: #cbc5ba;
}
.br-kartu.j-elim .br-k-label { color: #e8404a; }
.br-k-nama {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1.04; margin-top: 4px;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.br-k-sub {
  margin-top: 5px; font-family: "Barlow Condensed", sans-serif;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}
.br-k-skor {
  display: flex; align-items: center; gap: 9px; padding-left: 14px; margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.br-k-skor b {
  font-family: "Barlow Condensed", sans-serif; font-size: 32px; font-weight: 700; line-height: 1;
}
.br-k-skor b.a { color: #e8404a; }
.br-k-skor b.b { color: #ddd7cc; }
.br-k-skor i { font-style: normal; color: rgba(179,22,29,.65); font-size: 16px; }

/* ---- Bagian lanjutan di dalam panel ---- */
.br-sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); }
.br-sub-jd {
  display: block; margin-bottom: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: #c9a961;
}

.br-geser {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
}
.br-geser input[type="range"] { flex: 1; min-width: 130px; accent-color: #c9a961; }
.br-p {
  font-family: "Barlow Condensed", sans-serif; font-size: 15px; font-weight: 700;
  min-width: 42px; text-align: center; font-variant-numeric: tabular-nums;
}
.br-p.a { color: #e8404a; }
.br-p.b { color: #ddd7cc; }

.br-map { min-width: 260px; max-width: 340px; }

.br-map-pra { margin-top: 13px; }
.br-map-kartu {
  position: relative; height: 132px; overflow: hidden;
  border: 1px solid rgba(201,169,97,.3); border-radius: 5px;
  background: linear-gradient(150deg, #1a1f28, #0a0d12);
  background-size: cover; background-position: center;
}
.br-map-kartu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(4,5,8,.94) 6%, rgba(4,5,8,.2) 60%, rgba(4,5,8,.5));
}
.br-map-teks { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2; }
.br-map-realm {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .4em; text-transform: uppercase;
  color: #c9a961;
}
.br-map-nama {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 30px; font-weight: 800; line-height: 1; margin-top: 5px;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
}

/* =========================================================
   MESIN DONASI
========================================================= */

/* Lebar kolom judul dan barisnya memakai angka yang sama persis.
   Judul yang melenceng dari isinya lebih buruk daripada tidak ada
   judul — mata mengikuti judul, lalu membaca kolom yang salah. */
.dn-kepala .k-nama   { width: 160px; flex-shrink: 0; }
.dn-kepala .k-url    { flex: 1; min-width: 0; }
.dn-kepala .k-status { width: 108px; flex-shrink: 0; text-align: center; }
.dn-kepala .k-aksi   { width: 68px; flex-shrink: 0; }

.dn-row .dn-nama,
.dn-row .dn-url {
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2);
  font-size: 13px; padding: 8px 10px;
}
.dn-row .dn-nama { width: 160px; flex-shrink: 0; }

/* Alamat widget panjang dan tidak pernah dibaca utuh — yang penting
   terlihat pangkalnya, cukup untuk memastikan tidak tertukar. Huruf
   monospace membuat pangkal itu lebih mudah dibandingkan sekilas. */
.dn-row .dn-url {
  flex: 1; min-width: 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11.5px; letter-spacing: -.01em;
  color: var(--text-2, #9aa3b0);
}
.dn-row input:focus { outline: none; border-color: rgba(201,169,97,.65); }

/* Status dibuat tombol, bukan label, karena memang bisa diklik untuk
   membuka jendela widgetnya saat kabar tidak kunjung datang. */
.dn-status {
  width: 108px; flex-shrink: 0; padding: 8px 6px; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038); border-radius: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}
.dn-status:hover { border-color: rgba(201,169,97,.5); }
.dn-status.nyala { color: #74d69a; border-color: rgba(116,214,154,.42); background: rgba(116,214,154,.08); }
.dn-status.gagal { color: #ff8b90; border-color: rgba(192,39,45,.5); background: rgba(192,39,45,.1); }
.dn-status.sambung {
  color: #e6cd90; border-color: rgba(201,169,97,.45);
  animation: dnDenyut 1.2s ease-in-out infinite;
}
@keyframes dnDenyut { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

.dn-cek {
  width: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dn-cek input { width: 15px; height: 15px; accent-color: #c9a961; cursor: pointer; }

/* ---- Aturan ---- */

.dn-kepala-aturan .k-min    { width: 130px; flex-shrink: 0; margin-left: 34px; }
.dn-kepala-aturan .k-aksi-p { flex: 1; min-width: 0; }
.dn-kepala-aturan .k-killer { width: 190px; flex-shrink: 0; }
.dn-kepala-aturan .k-lipat  { width: 62px; flex-shrink: 0; text-align: center; }
.dn-kepala-aturan .k-cd     { width: 90px; flex-shrink: 0; text-align: center; }
.dn-kepala-aturan .k-x      { width: 30px; flex-shrink: 0; }

.dn-row-aturan { align-items: center; }
.dn-row-aturan.mati { opacity: .42; }
.dn-cek-aturan { width: 34px; }

/* Rp ditulis di luar kolom angka, bukan sebagai placeholder di
   dalamnya. Placeholder hilang begitu diketik, dan operator kehilangan
   satu-satunya penanda bahwa angka itu rupiah, bukan detik. */
.dn-min, .dn-cd {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; padding: 0 10px;
}
.dn-min { width: 130px; }
.dn-cd  { width: 90px; }
.dn-min b, .dn-cd b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--text-3, #6b7482); flex-shrink: 0;
}
.dn-min input, .dn-cd input {
  flex: 1; min-width: 0; padding: 8px 0;
  background: none; border: none; outline: none;
  color: #e6cd90; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dn-min:focus-within, .dn-cd:focus-within { border-color: rgba(201,169,97,.65); }

.dn-aksi-grup { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Aksi dibuat tombol tempel yang menyala saat dipilih, bukan deretan
   kotak centang. Yang perlu terbaca sekilas adalah aksi mana yang
   AKTIF — dan kotak centang menuntut mata memeriksa satu per satu. */
.dn-aksi {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: 7px 11px; border-radius: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
  white-space: nowrap;
}
.dn-aksi input { display: none; }
.dn-aksi:hover { border-color: rgba(201,169,97,.4); }
.dn-aksi.pilih {
  color: #12161c; background: #c9a961; border-color: #c9a961;
}

.dn-killer {
  width: 190px; flex-shrink: 0; padding: 8px 10px;
  background: var(--bg, #0d1218); border: 1px solid var(--garis, #2a3038);
  border-radius: 4px; color: var(--text-1, #e9e7e2); font-size: 12.5px;
}
.dn-killer:focus { outline: none; border-color: rgba(201,169,97,.65); }
.dn-killer::placeholder { color: var(--text-3, #6b7482); font-style: italic; }

/* Saklar kelipatan dibuat setara bentuknya dengan tombol aksi, karena
   sifatnya memang sama: menyala atau tidak, dan yang perlu terbaca
   sekilas adalah yang menyala. */
.dn-lipat {
  width: 62px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0; border-radius: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--garis, #2a3038);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3, #6b7482);
}
.dn-lipat input { display: none; }
.dn-lipat:hover { border-color: rgba(201,169,97,.4); }
.dn-lipat.pilih { color: #12161c; background: #c9a961; border-color: #c9a961; }

/* Sisa putaran: merah, bukan emas. Ia bukan keadaan yang diinginkan
   melainkan pekerjaan yang belum selesai, dan warnanya harus berbeda
   dari saklar yang menyala karena sengaja dinyalakan. */
.dn-sisa.small-btn {
  border-color: rgba(192,39,45,.6) !important;
  background: rgba(192,39,45,.14) !important;
  color: #ff9195 !important;
}

/* ---- Pantauan ---- */

.dn-log {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--garis, #2a3038); border-radius: 5px;
  background: #090c11;
}

.dn-log-baris {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 11px;
  font-size: 11.5px; line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.dn-log-baris:last-child { border-bottom: none; }

/* Baris yang nominalnya terbaca diberi garis emas di tepi kiri. Itu
   satu-satunya hal yang dicari operator saat membuka pantauan: mana
   kabar yang benar-benar dikenali sebagai donasi, dan mana yang cuma
   lalu-lalang. */
.dn-log-baris.kena {
  background: rgba(201,169,97,.05);
  box-shadow: inset 2px 0 0 #c9a961;
}

.dn-l-jam {
  width: 60px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; color: var(--text-3, #6b7482);
}
.dn-l-sumber { width: 92px; flex-shrink: 0; color: var(--text-2, #9aa3b0); }
.dn-l-jalur {
  width: 46px; flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3, #6b7482);
}
.dn-l-nilai {
  width: 96px; flex-shrink: 0; text-align: right;
  font-weight: 700; color: #e6cd90;
  font-variant-numeric: tabular-nums;
}
.dn-l-dari { width: 120px; flex-shrink: 0; color: #e9e7e2; }

/* Kabar mentah dipotong satu baris. Isinya bisa ribuan karakter, dan
   dibiarkan penuh ia mendorong seluruh kolom lain keluar layar. */
.dn-l-mentah {
  flex: 1; min-width: 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px; color: var(--text-3, #6b7482);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Simulasi donasi ---- */

.dn-kepala-uji .k-nom   { width: 130px; flex-shrink: 0; }
.dn-kepala-uji .k-nama  { width: 160px; flex-shrink: 0; }
.dn-kepala-uji .k-pesan { flex: 1; min-width: 0; }
.dn-kepala-uji .k-aksi  { width: 96px; flex-shrink: 0; }

.dn-uji-nom { width: 130px; }
.dn-row-uji .dn-nama { width: 160px; flex-shrink: 0; }

/* Kolom pesan memakai huruf biasa, bukan monospace seperti kolom
   alamat — isinya kalimat yang ditulis penonton, bukan alamat. */
.dn-uji-pesan {
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--text-1, #e9e7e2) !important;
}

.dn-uji-btn {
  width: 96px; flex-shrink: 0;
  border-color: rgba(201,169,97,.55) !important;
  color: #e6cd90 !important;
}
.dn-uji-btn:hover { background: rgba(201,169,97,.16) !important; }

/* Tombol nominal cepat: nominal yang paling sering diuji, supaya
   memeriksa kelipatan tidak perlu mengetik ulang tiap kali. */
.dn-cepat { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.dn-cepat .small-btn { padding: 7px 15px; font-size: 12px; }

/* Syarat spin: kolomnya sempit karena pilihannya cuma dua, dan
   keduanya pendek. */
.dn-kepala-aturan .k-syarat { width: 128px; flex-shrink: 0; }
.dn-syarat { width: 128px; flex-shrink: 0; }

/* Baris catatan keputusan: dibedakan dari kabar mentah karena isinya
   bukan kiriman dari luar melainkan penjelasan aplikasi sendiri
   tentang apa yang barusan dilakukannya. */
.dn-log-baris .dn-l-jalur { text-transform: uppercase; }

/* ---- Tingkatan alert ---- */

.dn-kepala-tingkat .k-min   { width: 130px; flex-shrink: 0; }
.dn-kepala-tingkat .k-label { flex: 1; min-width: 0; }
.dn-kepala-tingkat .k-gaya  { width: 116px; flex-shrink: 0; }
.dn-kepala-tingkat .k-warna { width: 106px; flex-shrink: 0; }
.dn-kepala-tingkat .k-detik { width: 90px; flex-shrink: 0; text-align: center; }
.dn-kepala-tingkat .k-uji   { width: 74px; flex-shrink: 0; }
.dn-kepala-tingkat .k-x     { width: 30px; flex-shrink: 0; }

.dn-t-min   { width: 130px; }
.dn-t-label { flex: 1 !important; min-width: 0; width: auto !important; }
.dn-t-gaya  { width: 116px; flex-shrink: 0; }
.dn-t-warna { width: 106px; flex-shrink: 0; }
.dn-t-detik { width: 90px; }

/* Tombol coba memakai warna emas: ia satu-satunya yang mengubah apa
   yang terlihat di OBS saat itu juga, dan itu perlu terbaca berbeda
   dari tombol yang cuma menyimpan. */
.dn-t-uji.small-btn {
  width: 74px; flex-shrink: 0; padding: 8px 0;
  border-color: rgba(201,169,97,.5) !important;
  color: #e6cd90 !important;
}
.dn-t-uji.small-btn:hover { background: rgba(201,169,97,.16) !important; }

/* ---- Saringan sumber pada aturan ---- */

.dn-kepala-aturan .k-sumber { width: 132px; flex-shrink: 0; }
.dn-sumber-pilih { width: 132px; flex-shrink: 0; }

/* Kolom lain dirampingkan supaya sembilan kolom tetap muat tanpa
   membungkus. Baris aturan yang membungkus jadi dua baris membuat
   kolomnya tidak lagi sejajar dengan judulnya. */
.dn-kepala-aturan .k-killer { width: 150px; }
.dn-row-aturan .dn-killer   { width: 150px; }
.dn-kepala-aturan .k-syarat { width: 112px; }
.dn-row-aturan .dn-syarat   { width: 112px; }

.dn-kepala-uji .k-sum { width: 124px; flex-shrink: 0; }
.dn-uji-sumber { width: 124px; flex-shrink: 0; }