/* ==========================================================
   LCE4D – Togel CSS (full)
   - Wrapper, Grid, Card
   - Countdown Ring (SVG)
   - Result (odometer digits)
   - Golden shimmer button (left→right)
   ========================================================== */

:root{
  --lce-bg:    #0f1116;
  --lce-card:  #1b1d22;
  --lce-text:  #f2f4f8;
  --lce-sub:   #b3bdc9;
  --lce-track: #30343b;     /* ring track */
  --lce-accent:#ffc107;     /* ring progress */

  /* Odometer digit */
  --digit-w: 42px;
  --digit-h: 52px;
}

/* ---------- Wrapper ---------- */
.lce-togel-wrapper{padding-inline:8px;margin-block:8px}
@media (min-width: 992px){
  .lce-togel-wrapper{padding-inline:0;margin-block:12px}
}

/* ---------- Grid ---------- */
.lce-togel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}
@media (max-width:420px){
  .lce-togel-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* ---------- Card ---------- */
.lce-togel-card{
  background:var(--lce-card);
  color:var(--lce-text);
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column;
  min-height:220px;
}
.lce-togel-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35); }

.lce-togel-card-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:8px
}
.lce-togel-title{ font-size:18px;font-weight:700 }

/* ---------- Badge states ---------- */
.lce-togel-badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1; letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.lce-togel-badge-open,
.lce-togel-badge.is-open   { background:#20bf6b; color:#fff; }
.lce-togel-badge-closed,
.lce-togel-badge.is-closed { background:#eb3b5a; color:#fff; }
.lce-togel-badge-settled,
.lce-togel-badge.is-settled{ background:#4b7bec; color:#fff; }

/* ==========================================================
   Countdown: RING (SVG)
   ========================================================== */
.lce-timer{
  display:flex; gap:18px; align-items:center; justify-content:center;
  margin:6px 0 18px;
}
.lce-timer .unit{
  --size:64px;    /* override inline bila perlu */
  --thick:10;     /* angka → px */
  width:var(--size); height:var(--size);
  position:relative; border-radius:50%;
}
.lce-timer .unit svg{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg);  /* mulai di atas */
}
.lce-timer .unit .ring-track{
  fill:none; stroke:var(--lce-track);
  stroke-width:calc(var(--thick) * 1px);
}
.lce-timer .unit .ring-prog{
  fill:none; stroke:var(--lce-accent);
  stroke-width:calc(var(--thick) * 1px);
  stroke-linecap:round;
  transition:stroke-dashoffset .08s linear;
}
.lce-timer .unit .value{
  position:absolute; inset:0; display:grid; place-items:center;
  z-index:1; font-weight:700; font-size:18px; letter-spacing:.5px;
}
.lce-timer .unit small{
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  font-size:11px; color:var(--lce-sub);
}

/* ==========================================================
   Result (odometer digits) – selalu center
   ========================================================== */
.lce-result{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; margin:6px 0 8px; text-align:center;
}
.lce-result-date{ font-size:12px; color:var(--lce-sub); }
.lce-result-period{ font-size:12px; color:var(--lce-sub); }

.lce-result-numbers{
  display:flex; gap:8px; align-items:center; justify-content:center; line-height:1;
}
.lce-result-numbers .dwheel{
  width:var(--digit-w); height:var(--digit-h); border-radius:10px;
  background:linear-gradient(180deg,#23262c 0%, #1a1d23 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden; position:relative;
}
.lce-result-numbers .digits{
  position:absolute; left:0; top:0; width:100%;
  transition:transform .7s cubic-bezier(.25,.9,.2,1.05);
  will-change:transform;
}
.lce-result-numbers .digits span{
  display:flex; align-items:center; justify-content:center;
  height:var(--digit-h); width:100%;
  font-size:30px; font-weight:800; letter-spacing:.5px; color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

/* ---------- Meta (jadwal & periode singkat) ---------- */
.lce-togel-meta{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--lce-sub);
  margin:10px 0 14px;
}

/* ==========================================================
   GOLDEN SHIMMER BUTTON (no underline)
   ========================================================== */
a.lce-togel-btn, .lce-togel-btn{
  -webkit-appearance:none; appearance:none;
  position:relative; isolation:isolate;
  display:block; width:100%;
  padding:12px 16px;
  border:0; outline:0;
  border-radius:10px;
  cursor:pointer; user-select:none;
  text-align:center; font-weight:800; letter-spacing:.2px;
  color:#1f1400; text-decoration:none !important;
  background:linear-gradient(90deg,#ffb000 0%,#ffc107 45%,#ffc107 59%,#f3a700 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -2px 0 rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  margin-top:auto; overflow:hidden;
}
a.lce-togel-btn:hover, .lce-togel-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.34),
             inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -2px 0 rgba(0,0,0,.25);
  filter:saturate(1.06);
}
a.lce-togel-btn:active, .lce-togel-btn:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(0,0,0,.15),
             inset 0 -1px 0 rgba(0,0,0,.35);
}
a.lce-togel-btn::before, .lce-togel-btn::before{
  content:"";
  position:absolute; top:0; left:-180%;
  width:180%; height:100%;
  transform:skewX(-14deg);
  background:linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 18%,
    rgba(255,255,255,.37) 28%,
    rgba(255,255,255,.10) 38%,
    rgba(255,255,255,0) 52%);
  animation:lceShimmer 2.6s linear infinite;
  z-index:0; pointer-events:none;
}
a.lce-togel-btn::after, .lce-togel-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.35);
  z-index:0; pointer-events:none;
}
@keyframes lceShimmer{ 0%{left:-180%} 100%{left:180%} }

.lce-togel-btn.disabled,
.lce-togel-btn[disabled]{opacity:.55;pointer-events:none;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){
  a.lce-togel-btn::before, .lce-togel-btn::before{ animation:none; }
}