:root{
  --page-max:1200px;--cards-gap:16px;--cols-desktop:3;--cols-tablet:2;--cols-mobile:1;
  --bg-url:url('/assets/img/backgroundutamagampangtoto.jpg');
  --panel:rgba(0,0,0,.35);--panel-strong:#000000;--border:#e8b823;--text:#e9ecf1;--muted:#b9c0cf
}
*{box-sizing:border-box}
html,body{height:100%;min-height:100%}
html{
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.20)),
    var(--bg-url) center top / cover no-repeat fixed #000 !important;
}
body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:transparent !important}
img{max-width:100%;height:auto;display:block}

.page{max-width:var(--page-max);margin:20px auto 40px;padding:0 16px}
.cards{display:grid;grid-template-columns:repeat(var(--cols-desktop),1fr);gap:var(--cards-gap);contain:content}
@media (min-width:1280px){:root{--cards-gap:18px}}
@media (max-width:980px){.cards{grid-template-columns:repeat(var(--cols-tablet),1fr)}}
@media (max-width:640px){.cards{grid-template-columns:repeat(var(--cols-mobile),1fr);gap:12px}}

.topcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:16px;background:var(--panel-strong);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);position:sticky;top:12px;z-index:5;margin-bottom:16px}
.brand a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{width:200px;height:auto;object-fit:contain;border-radius:8px}
.title{text-align:center;font-weight:800;letter-spacing:.14em;font-size:clamp(18px,2.4vw,22px)}
.right{display:flex;justify-content:flex-end}
.btn{appearance:none;border:1px solid var(--border);background:linear-gradient(180deg,#ffd323,#e8b823);color:#0b0f1a;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)}
@media (max-width:640px){.topcard{gap:10px;padding:12px;border-radius:14px}.brand img{width:120px}.btn{padding:9px 12px;border-radius:9px}}

.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.42);content-visibility:auto;contain-intrinsic-size:300px 200px}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0f0c12}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.card:hover .thumb img{transform:scale(1.03)}
.body{padding:12px 12px 14px}
.text{font-weight:700;line-height:1.35;margin:6px 0 10px}
.row{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.btn.pred-main{background:linear-gradient(180deg,#ffae00,#e8b823);color:#111;border:1px solid var(--border);padding:12px 18px;border-radius:12px;font-size:16px}
@media (max-width:640px){.body{padding:10px}.text{font-size:15px}.btn.pred-main{width:100%;justify-content:center}}

.ws-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:99999;pointer-events:none}
.ws-modal.open{display:flex;pointer-events:auto}
.ws-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ws-sheet{position:relative;width:min(900px,100%);background:#2b0003;border:6px solid #2b0003;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.ws-inner{background:#11161c;border:1px solid var(--border);max-width:100%;overflow:hidden}
.ws-head{position:relative;padding:18px;background:#2b0003;border-bottom:6px solid #2b0003}
.ws-badge{display:inline-block;background:#ffae00;color:#111;font-weight:900;border-radius:10px;padding:10px 16px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-inner{overflow-x:auto}
.ws-table{width:100%;border-collapse:collapse;color:#dbe3ec;table-layout:fixed}
.ws-table th,.ws-table td{padding:12px 16px;border-bottom:1px solid #2f3a43;background:#20262c;vertical-align:middle;word-wrap:break-word}
.ws-table th{width:36%;text-align:left;background:#161c22;color:#bfc9d6}
.ws-actions{display:flex;gap:14px;justify-content:center;align-items:center;padding:18px;background:#2b0003;border-top:6px solid #2b0003;flex-wrap:wrap}
.ws-btn{appearance:none;border:1px solid var(--border);padding:12px 18px;border-radius:10px;font-weight:900;cursor:pointer;text-align:center;display:inline-flex;justify-content:center;align-items:center}
.ws-btn.yellow{background:linear-gradient(180deg,#ffae00,#e8b823);color:#111;min-width:260px;margin:0 auto}
.ws-btn.gray{background:#20262c;color:#e7edf6;min-width:200px;margin:0 auto}
.ws-note{padding:10px 16px;color:#bfc9d6;text-align:center}
.ws-msg{padding:10px 16px;text-align:center;color:#ffd08a;font-weight:800}
@media (max-width:640px){.ws-sheet{border-width:4px;border-radius:12px}.ws-head{padding:12px;border-bottom-width:4px}.ws-table th,.ws-table td{padding:10px 12px;font-size:14px}.ws-actions{padding:12px;gap:10px}.ws-btn{width:auto;min-width:220px}.ws-btn.yellow{padding:14px 18px;font-size:16px}}

.balls{--gap:10px;--n:6;display:flex;gap:var(--gap);flex-wrap:nowrap;align-items:center;justify-content:center;width:100%}
.balls[data-n="6"]{--n:6}
.balls[data-n="5"]{--n:5}
.balls[data-n="4"]{--n:4}
@media (max-width:480px){.balls{--gap:6px}}
.ball{--c:#999;width:clamp(34px, calc((100% - (var(--n) - 1)*var(--gap)) / var(--n)), 64px);aspect-ratio:1/1;border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:inset 0 -10px 18px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);overflow:hidden;flex:0 0 auto}
.ball::after{content:"";position:absolute;top:16%;left:22%;width:28%;height:20%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 60%,rgba(255,255,255,0));transform:rotate(-15deg);pointer-events:none}
.ball.solid{background:radial-gradient(35% 35% at 30% 30%,#fff6,transparent 60%),linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 65%,#000))}
.ball.stripe{background:linear-gradient(180deg,color-mix(in oklab,var(--c) 85%,#000),var(--c)) top/100% 40% no-repeat,linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 65%,#000)) bottom/100% 40% no-repeat,radial-gradient(35% 35% at 30% 30%,#fff6,transparent 60%);background-color:var(--c)}
.ball.cue{background:radial-gradient(circle at 30% 30%,#ffffff,#e9e9e9 60%,#d8d8d8)}
.pip{width:44%;height:44%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25);z-index:1}
.num{font-weight:900;font-size:clamp(10px,3.2vw,18px);color:#111}
@keyframes reel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ball.spinning{animation:reel .45s linear infinite;background:linear-gradient(180deg,#444,#111)}
.n1{--c:#f2c300}.n2{--c:#1e75d6}.n3{--c:#c0392b}.n4{--c:#6a2ebb}.n5{--c:#e67e22}.n6{--c:#1fa463}.n7{--c:#7a1f1f}.n8{--c:#111}.n9{--c:#f2c300}

.article-wrap{max-width:1024px;margin:30px auto 40px;padding:0 16px}
.article{background:#16141c;border:1px solid #2a2633;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.article h1{line-height:1.25;font-size:clamp(24px,3.6vw,34px);margin:0 0 10px;font-weight:900;letter-spacing:.3px}
.article h2{line-height:1.3;font-size:clamp(18px,2.4vw,24px);margin:28px 0 10px;font-weight:800}
.article h3{line-height:1.35;font-size:clamp(16px,2vw,20px);margin:20px 0 8px;font-weight:800}
.article .lead{color:#dfe5f2;font-size:18px}
.article .hr{height:1px;background:linear-gradient(90deg,transparent,#3a2d46,transparent);margin:20px 0}
.article .info{background:rgba(124,77,255,.1);border:1px solid rgba(124,77,255,.25);color:#e9e2ff;padding:12px;border-radius:12px}
.article blockquote{margin:14px 0;padding:10px 14px;border-left:4px solid #7c4dff;background:#1a1620;border-radius:8px;color:#d8d0ff}
.article .kicker{color:#ffd89e;font-weight:900;letter-spacing:.12em}
.article .footer-note{margin-top:22px;color:#b6c0d0;font-size:14px;text-align:center}
/* ==== FINAL: Bola responsif + warna terjamin ==== */
.balls{ --gap:10px; --n:6; display:flex; gap:var(--gap); align-items:center; justify-content:center; width:100%; flex-wrap:nowrap; }
.balls[data-n="6"]{ --n:6 }
.balls[data-n="5"]{ --n:5 }
.balls[data-n="4"]{ --n:4 }

/* Ukuran otomatis pas 1 baris */
.ball{
  --c:#999;
  width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  max-width: 64px;
  min-width: 22px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  overflow: hidden; flex: 0 0 auto;
}

/* Pupil & angka */
.pip{ width:44%; height:44%; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); z-index:1 }
.num{ font-weight:900; font-size:20px; color:#111 }

/* Medium mobile */
@media (max-width:560px){
  .balls{ --gap:6px }
  .ball{ max-width:48px; min-width:20px }
  .pip{ width:46%; height:46% }
  .num{ font-size:16px }
}

/* Small mobile */
@media (max-width:380px){
  .balls{ --gap:4px }
  .ball{ max-width:42px; min-width:18px }
  .num{ font-size:14px }
}

/* Extra small */
@media (max-width:330px){
  .ball{ max-width:36px; min-width:16px }
  .num{ font-size:12px }
}

/* Animasi & highlight */
@keyframes reel{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.ball.spinning{ animation:reel .45s linear infinite; background:linear-gradient(180deg,#444,#111) }
.ball::after{
  content:""; position:absolute; top:16%; left:22%;
  width:28%; height:20%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 60%, transparent);
  transform:rotate(-15deg); pointer-events:none;
}

/* === PENGISI WARNA (ditempatkan ulang agar menang urutan) === */
.ball.cue{
  background: radial-gradient(circle at 30% 30%, #ffffff, #e9e9e9 60%, #d8d8d8) !important;
}
.ball.solid{
  background:
    radial-gradient(35% 35% at 30% 30%, #ffffff66, transparent 60%),
    linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c) 65%, #000)) !important;
}
.ball.stripe{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--c) 85%, #000), var(--c)) top/100% 40% no-repeat,
    linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c) 65%, #000)) bottom/100% 40% no-repeat,
    radial-gradient(35% 35% at 30% 30%, #ffffff66, transparent 60%) !important;
  background-color: var(--c) !important;
}

/* Palet warna bola biliar (via CSS variable --c) */
.n1{ --c:#f2c300 }  /* 1 kuning (solid) */
.n2{ --c:#1e75d6 }  /* 2 biru (solid) */
.n3{ --c:#c0392b }  /* 3 merah (solid) */
.n4{ --c:#6a2ebb }  /* 4 ungu (solid) */
.n5{ --c:#e67e22 }  /* 5 oranye (solid) */
.n6{ --c:#1fa463 }  /* 6 hijau (solid) */
.n7{ --c:#7a1f1f }  /* 7 marun (solid) */
.n8{ --c:#111 }     /* 8 hitam (solid) */
.n9{ --c:#f2c300 }  /* 9 kuning (stripe) */

/* Hindari konten kepotong di sel tabel modal */
.ws-table td{ overflow-x: visible }