/* ===== From history.html ===== */
@charset "UTF-8";
/* …(berisi seluruh CSS inline dari history.html)… */
/* (mulai) */
html{scroll-behavior:smooth}
*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#ffd75a;--secondary:#1ef7e6;--dark:#0b1724;--darker:#0f141b;--line:rgba(255,255,255,.08);--text:#e6eef8;--muted:#9ca3af;--font-ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body{background:var(--dark);color:var(--text);font-family:var(--font-ui)}
/* header */
.header{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.header .wrap{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center}
.header .brand img{height:40px}
.header nav{margin-left:auto}
.header nav ul{display:flex;gap:18px;list-style:none}
.header nav a{color:var(--text);font-weight:700;text-decoration:none;padding:8px 10px;border-radius:8px}
.header nav a.active,.header nav a:hover{color:var(--primary);background:rgba(255,255,255,.06)}
/* section */
.section{max-width:1100px;margin:20px auto;padding:0 16px}
.card{background:var(--darker);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line),0 16px 32px rgba(0,0,0,.3);padding:16px}
.title{font-weight:900;letter-spacing:.4px;margin:6px 0 10px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.h-card{position:relative;background:var(--darker);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.h-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary) 0%,#ffb800 42%,var(--primary) 100%)}
.h-head{display:flex;gap:12px;align-items:center;padding:14px 14px 12px;flex-wrap:wrap}
.h-dt{font-weight:900}
.h-prizes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:.28rem .5rem;border-radius:.6rem;background:#12161c;color:#cfe6ff;font-weight:800;font-size:.95rem;box-shadow:inset 0 0 0 1px var(--line)}
.pill em{font-style:normal;color:var(--muted);font-weight:900}
.h-toggle{padding:.35rem .65rem;border-radius:.5rem;border:0;background:#1b2330;color:var(--primary);font-weight:800;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.h-body{border-top:1px solid var(--line);padding:14px}
.h-body[hidden]{display:none!important}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.h-subtitle{color:#ffcc66;font-weight:900;margin-bottom:.4rem}
.h-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.h-list li{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:.6rem;background:#12161c;color:var(--text);font-weight:900;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
@media (max-width:720px){.h-grid{grid-template-columns:1fr}}
/* (akhir) */


/* ===== From index.html ===== */
/* …(berisi seluruh CSS inline dari index.html)… */
/* (mulai) */
.hero{max-width:1200px;margin:20px auto 0;padding:0 16px}
.hero .card{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:center}
.widget{background:var(--darker);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line),0 16px 32px rgba(0,0,0,.3);padding:14px}
.widget-title{font-weight:900;letter-spacing:.4px;margin:6px 0 10px;color:var(--text)}
.jackpot{font:800 2.1rem/1 var(--font-num)}
/* countdown */
#countdown.cd{display:flex;align-items:center;gap:.5rem;user-select:none}
#countdown .cd-sep{opacity:.6;font-weight:700}
.cd-item{display:flex;align-items:center;gap:.25rem}
.cd-val{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.6rem;border-radius:.6rem;font:700 1.25rem/1 var(--font-num);background:#12161c;color:#e6eef8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cd-val.bump{animation:cd-bump .18s ease}
@keyframes cd-bump{0%{transform:scale(1.05)}100%{transform:scale(1)}}
#countdown.urgent .cd-val::after{content:"";position:absolute;inset:3px;border-radius:8px;background:conic-gradient(from 0deg,transparent 0 75%,rgba(255,215,0,.9) 85%,transparent 100%);-webkit-mask:radial-gradient(transparent 58%,#000 59%);mask:radial-gradient(transparent 58%,#000 59%);animation:cd-spin 900ms linear infinite;opacity:.95}
@keyframes cd-spin{to{transform:rotate(360deg)}}
/* results table */
.results-table{display:grid;gap:14px;margin-top:6px}
.results-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:14px 8px;border-radius:10px;background:#0c1117;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.results-row .k{color:#ffcc66;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.results-row .v{display:flex;align-items:center;justify-content:flex-end}
/* prize-box + spinner dot-run */
.prize-box{min-width:190px;min-height:62px;display:flex;align-items:center;justify-content:center;font:800 2rem/1 var(--font-num);color:#fff;background:#12161c;border-radius:.8rem;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);position:relative;overflow:hidden}
.prize-box.loading::after,.prize-list.loading .prize-box::after{content:none!important}
.prize-box.loading,.prize-list.loading .prize-box{color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;position:relative}
@keyframes dot-run{from{transform:translateY(-50%) translateX(0);opacity:.35}50%{opacity:1}to{transform:translateY(-50%) translateX(calc(100% - 10px - 14px*2));opacity:.35}}
.prize-box.loading::before,.prize-list.loading .prize-box::before{content:"";position:absolute;top:50%;left:calc(14px + 3px + 10px/2);width:10px;height:10px;border-radius:50%;background:#1ef7e6;filter:drop-shadow(0 0 6px rgba(30,247,230,.75));transform:translate(-50%,-50%);animation:dot-run 1.15s ease-in-out infinite alternate}
/* special & consolation */
.sc-two{margin-top:16px}
.sc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sc-col{background:#0c1117;border-radius:10px;padding:14px;box-shadow:inset 0 0 0 1px var(--line)}
.sc-col .col-title{color:#ffcc66;font-weight:900;margin-bottom:.4rem}
.sc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-col li .prize-box{min-width:auto;min-height:52px;font:800 1.4rem/1 var(--font-num);box-shadow:inset 0 0 0 2px rgba(255,255,255,.20)}
/* footer */
.footer{background:rgba(0,0,0,.40);color:#cbd5e1}
.footer .wrap{max-width:1200px;margin:0 auto;padding:12px 16px;font-size:.9rem}
/* (akhir) */


/* ===== From livedraw.html ===== */
/* …(berisi seluruh CSS inline dari livedraw.html)… */
/* (mulai) */
.main-only{max-width:980px;margin:24px auto 64px;padding:0 16px}
.main-only .card{background:var(--darker);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line),0 16px 32px rgba(0,0,0,.35);padding:18px 18px 22px}
.main-only .title{text-align:center;color:#e6eef8;font-size:clamp(1.4rem,3.2vw,2.2rem);font-weight:800;margin:6px 0 8px;letter-spacing:.6px;text-transform:uppercase}
.ld-underline{width:160px;height:6px;margin:8px auto 18px;border-radius:999px;background:linear-gradient(90deg,#ffd000 0%,#ffb800 40%,#ffd000 100%);opacity:.85}
/* mini countdown center */
.live-count{margin-top:16px;text-align:center}
.live-count #countdown.cd{justify-content:center}
/* (akhir) */

/* ===== NAGOYA RESULTS SKIN ===== */

/* judul & underline */
.ng-results .ng-title{
  font: 900 1.9rem/1 var(--font-ui);
  letter-spacing:.5px;
  margin: 6px 0 14px;
}
.ng-results .ng-title::after{
  content:"";
  display:block;
  width:180px;height:6px;margin:10px 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,#ffd000 0%,#ffb800 40%,#ffd000 100%);
  opacity:.9;
}

/* baris besar 1st/2nd/3rd */
.ng-rows{ display:grid; gap:18px; }
.ng-row{
  position:relative;
  background:#0c1117;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  padding:18px 16px;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
}
.ng-row::before{
  /* garis tipis kuning di atas seperti demo */
  content:"";
  position:absolute; left:14px; right:14px; top:10px; height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#ffd000 0%,#ffb800 40%,#ffd000 100%);
  opacity:.85;
}
.ng-label{
  font: 900 1.05rem/1 var(--font-ui);
  color:#ffcc66;
  letter-spacing:.6px;
}

/* kotak angka glossy sebelah kanan */
.ng-box-wrap{ display:flex; justify-content:flex-end; }
.ng-box{
  min-width: 240px;
  min-height: 64px;
  font: 900 2.0rem/1 var(--font-num);
  color:#fff;
  background: linear-gradient(90deg,#151b23 0%, #1c212a 45%, #202730 100%);
  border-radius:14px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.22),
    0 2px 0 rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.ng-box::after{
  /* highlight elips di atas */
  content:"";
  position:absolute; inset:0 0 auto 0; height:28px;
  background: radial-gradient(200px 18px at 28px 6px, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* daftar kecil Special/Consolation */
.ng-two{
  margin-top:18px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.ng-col{
  background:#0c1117; border-radius:12px; padding:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.ng-col-title{
  color:#ffcc66; font-weight:900; margin-bottom:.55rem;
}
.ng-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ng-list li .prize-box{
  min-width:auto; min-height:56px;
  font: 900 1.35rem/1 var(--font-num);
  border-radius:12px;
  background: linear-gradient(90deg,#151b23 0%, #1c212a 45%, #202730 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.20);
  position:relative; overflow:hidden;
}
.ng-list li .prize-box::after{
  content:""; position:absolute; inset:0 0 auto 0; height:22px;
  background: radial-gradient(180px 16px at 22px 6px, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
}

/* spinner dot-run tetap, tapi pastikan titik start lebih ke dalam & vertikal center */
.prize-box.loading::before,
.prize-list.loading .prize-box::before{
  left: calc(16px + 3px + 10px/2);    /* offset dari tepi kiri */
  transform: translate(-50%,-50%);    /* benar-benar center secara vertikal */
}
@media (max-width: 860px){
  .ng-box{ min-width:200px }
  .ng-two{ grid-template-columns:1fr }
}


/* ===== Lottery Result Card ===== */
.lotto-result{
  max-width:720px;margin:24px auto;padding:0 16px;
}
.result-card{
  background:#001125;color:#fff;
  border-radius:12px;padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.result-title{
  text-align:center;
  font:900 1.4rem/1.2 var(--font-ui,sans-serif);
  margin:0 0 6px;
}
.result-meta{
  text-align:center;
  font-size:.95rem;
  margin-bottom:14px;
  border-bottom:2px dashed #ccc;
  padding-bottom:8px;
}

.prize-pools{ display:grid; gap:12px; margin-bottom:18px; }
.pool-label{ font-weight:700; margin-bottom:6px; text-align:center; }
.digit-row{ display:flex; justify-content:center; gap:8px; }

/* lingkaran angka */
.digit{
  width:38px;height:38px;
  border-radius:50%;
  background:#ffe0a6;color:#000;
  font:700 1.2rem/38px monospace;
  text-align:center;
  box-shadow:0 0 0 3px #001125 inset;
}

/* Starter & Consolation */
.sc-pools{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sc-col{ background:#f6d98a; border-radius:8px; padding:12px; color:#000; }
.sc-title{ font-weight:700; margin-bottom:8px; text-align:center; }
.digit-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.digit-list li{ display:flex; justify-content:center; gap:6px; }

/* ==== FIX layout Starter / Consolation agar tidak overflow ==== */
.sc-pools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;                 /* jarak antar kolom */
}

.sc-col{
  background:#f6d98a;
  color:#001125;
  border-radius:10px;
  padding:14px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.15) inset;
  min-width:0;              /* <— penting: biar kolom bisa menyusut, tidak meluber */
  overflow:hidden;          /* amankan jika masih ada overshoot kecil */
}

.sc-title{
  font-weight:800;
  text-align:center;
  margin:2px 0 10px;
}

/* Setiap baris (1 nomor) di dalam kolom */
.digit-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  row-gap:10px;             /* jarak antar baris nomor */
}

/* Satu baris nomor: sejajarkan di tengah, boleh wrap kalau sempit */
.digit-list li{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;           /* kalau viewport sempit, biar turun baris rapi */
  gap:8px;
  min-width:0;
}

/* Lingkaran angka untuk Starter/Consolation — sedikit lebih kecil */
.sc-col .digit{
  width:34px;
  height:34px;
  line-height:34px;
  border-radius:50%;
  font:700 1.05rem/34px monospace;
  text-align:center;
  background:#ffe0a6;
  color:#001125;
  box-shadow:0 0 0 3px #0b1a2a inset;
}

/* Lingkaran angka untuk 1st/2nd/3rd tetap lebih besar */
.digit-row .digit{
  width:38px;
  height:38px;
  line-height:38px;
  font:700 1.2rem/38px monospace;
  box-shadow:0 0 0 3px #0b1a2a inset;
}

/* Responsif: tumpuk kolom saat layar sempit */
@media (max-width: 820px){
  .sc-pools{ grid-template-columns:1fr; }
}

/* Responsif tambahan: kecilkan dot sedikit agar aman di HP kecil */
@media (max-width: 420px){
  .sc-col .digit{ width:30px; height:30px; line-height:30px; font-size:.95rem; }
  .digit-row .digit{ width:34px; height:34px; line-height:34px; font-size:1.05rem; }
}

/* ===== Header Layout ===== */
:root{
  --brand-red:#8b0e0e;
  --hero-krem:#efd59b;
  --deep:#071b2a;
  --txt:#eaf1f7;
  --accent:#ffd75a;
}

.container{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* TOP BAR */
.ng-topbar{
  background:var(--brand-red);
  box-shadow:0 2px 0 rgba(0,0,0,.25) inset;
}
.ng-menu{ display:flex; gap:32px; padding:10px 0; margin:0; list-style:none; justify-content:center; }
.ng-menu a{
  color:#fff; text-decoration:none; font:800 .95rem/1 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  letter-spacing:.4px;
}
.ng-menu a:hover{ color:var(--accent); }

/* HERO */
.ng-hero{ background:var(--hero-krem); }
.ng-hero-logo{
  display:block; margin:22px auto;
  max-width:420px; width:60%; height:auto;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
}

/* INFO BAR */
.ng-infobar{ background:#051725; color:var(--txt); box-shadow:0 -1px 0 rgba(0,0,0,.25) inset; }
.ng-infobar-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.ng-pool{ font:900 1rem/1 var(--font-ui); letter-spacing:.3px; }
.ng-livetime{ opacity:.9; margin-top:4px; }
.ng-next-label{ margin-right:12px; opacity:.85; }

@media (max-width:820px){
  .ng-infobar-wrap{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ===== Countdown kotak “flip” look ===== */
.flipcd{ display:flex; align-items:center; gap:6px; user-select:none; }
.flipcd .sep{ opacity:.7; margin:0 4px; font-weight:800; }
.flip{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:34px; border-radius:6px;
  font:900 1.05rem/1 var(--font-num, ui-monospace, Menlo, Consolas, monospace);
  color:#111;
  background:#ffe7ae;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.35),
    0 2px 0 rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.flip::after{
  /* garis “lipatan” atas */
  content:""; position:absolute; left:0; right:0; top:0; height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
.flip.bump{ animation:flip-bump .18s ease; }
@keyframes flip-bump{ 0%{transform:translateY(-1px)} 100%{transform:translateY(0)} }

.flipcd.urgent .flip{ background:#ffe9b8; box-shadow: inset 0 0 0 2px rgba(255,215,0,.6), 0 2px 0 rgba(0,0,0,.25); }
.flipcd.urgent .sep{ color:var(--accent); }

/* Ticker placeholder */
.ng-ticker{ padding:6px 0 10px; opacity:.85; font-size:.9rem; }

/* HERO */
.ng-hero{ 
  background:var(--hero-krem); 
  margin:0;               /* pastikan nggak ada gap */
  padding:0; 
  line-height:0;          /* buang extra line gap */
}
.ng-hero-logo{
  display:block; 
  margin:0px auto;       /* kecilkan jarak atas-bawah */
  max-width:260px;        /* perkecil ukuran maksimum */
  width:45%;              /* supaya lebih kecil */
  height:auto;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
}

/* INFO BAR */
.ng-infobar{ 
  background:#051725; 
  color:var(--txt); 
  margin:0;               /* hapus gap atas */
  padding-top:6px; 
  padding-bottom:6px;
  box-shadow:0 -1px 0 rgba(0,0,0,.25) inset;
}

/* container (pakai punyamu kalau sudah ada) */
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* FOOTER */
.ng-footer{margin:0}

.ng-foot-top{
  background:#000000;           /* merah */
  color:#fff;
  text-align:center;
  padding:18px 12px 10px;
  box-shadow:0 -1px 0 rgba(0,0,0,.25) inset;
}
.ng-foot-top .ng-copy{
  font:700 .95rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.2px;
}
.ng-foot-links{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:flex; gap:12px; justify-content:center; align-items:center;
  font:600 .9rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.ng-foot-links a{
  color:#ffefe0; text-decoration:none
}
.ng-foot-links a:hover{color:#ffd75a}

/* strip biru tua + disclaimer */
.ng-foot-bottom{
  background:#051725;           /* biru tua */
  color:#cfe6ff;
  text-align:center;
  padding:12px 16px;
  box-shadow:0 -1px 0 rgba(0,0,0,.25) inset;
}
.ng-disclaimer{
  margin:0; opacity:.9;
  font-size:.86rem; line-height:1.6;
}

/* pastikan tidak ada gap aneh di tepi halaman */
html,body{margin:0}