.tko-lotto { --dur:240ms; --stagger:100ms; --intro:140ms; --starspause:250ms; --seq:1400ms; }
.tko-lotto { 
  --target-scale: 1; /* history */
  margin: 1rem 0;
  padding: 0;                      /* removed outer padding */
  border: 0;                       /* removed outer border */
  border-radius: 0;                /* no outer radius */
  background: transparent;         /* no outer background panel */
  text-align: center;
}

/* Header (inside latest card now) */
.tko-head { display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom: .75rem; }
.tko-title { margin: 0; font-size: 1.35rem; }
.tko-badge { display:inline-block; padding:.15rem .45rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1; border:1px solid transparent; }
.tko-badge--latest { background:#eef6ff; border-color:#cfe7ff; color:#1a56b6; }
.tko-badge--xl { font-size:1.05rem; padding:.3rem .7rem; }
.tko-date { color: rgba(0,0,0,.8); font-weight:600; }

/* Cards */
.tko-card { border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; background:#fff; }
.tko-card--latest { 
  border-color:#bcd4ff;
  border-width: 2px;                /* thicker border per request */
  box-shadow: 0 10px 20px rgba(26,86,182,.12);
  --target-scale: 1.5;              /* latest size */
}
.tko-card--history { border-color:rgba(0,0,0,.06); }

/* Layout inside latest card */
.tko-latest { display:flex; gap: 12px; align-items:center; flex-wrap:wrap; justify-content:center; }
.tko-balls, .tko-stars { 
  display:flex; 
  gap: 10px; 
  list-style:none; 
  padding:0; 
  margin:.25rem 0; 
  justify-content:center; 
  flex-wrap: wrap;                  /* allow wrapping on narrow screens */
}

/* Group spacing so enlarged stars never collide with the last ball */
.tko-card--latest .tko-balls,
.tko-card--latest .tko-stars { gap: 28px; }
.tko-card--latest .tko-stars { margin-left: 38px; }

/* Balls & Stars */
.tko-ball, .tko-star {
  width: 48px; height: 48px; border-radius: 50%;
  display:grid; place-items:center; position:relative;
  transform: translateZ(0) scale(var(--target-scale, 1)); /* promote to GPU + scale */
  opacity: 1;
  transition: transform 160ms ease;
  will-change: transform;
  backface-visibility: hidden;
}
.tko-ball span, .tko-star-num { font-weight: 700; font-size: 1rem; }

/* 3D ball */
.tko-ball {
  background: radial-gradient(circle at 30% 30%, #ffffff, #d5dbe5 35%, #c0c7d4 60%, #96a1b2 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.15), inset 0 2px 6px rgba(255,255,255,.6);
}

/* Coloured balls */
.tko--colored .tko-ball--colored { background: var(--ball-bg, #2e7d32); box-shadow: 0 6px 12px rgba(0,0,0,.18), inset 0 2px 8px rgba(255,255,255,.35); }
.tko--colored .tko-ball--colored span { color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.55); }

/* Range bindings */
.tko--colored .tko-ball--r1  { --ball-bg: var(--tko-range-1,  #2e7d32); }
.tko--colored .tko-ball--r2  { --ball-bg: var(--tko-range-2,  #1565c0); }
.tko--colored .tko-ball--r3  { --ball-bg: var(--tko-range-3,  #6a1b9a); }
.tko--colored .tko-ball--r4  { --ball-bg: var(--tko-range-4,  #ef6c00); }
.tko--colored .tko-ball--r5  { --ball-bg: var(--tko-range-5,  #c62828); }
.tko--colored .tko-ball--r6  { --ball-bg: var(--tko-range-6,  #00897b); }
.tko--colored .tko-ball--r7  { --ball-bg: var(--tko-range-7,  #5d4037); }
.tko--colored .tko-ball--r8  { --ball-bg: var(--tko-range-8,  #283593); }
.tko--colored .tko-ball--r9  { --ball-bg: var(--tko-range-9,  #00695c); }
.tko--colored .tko-ball--r10 { --ball-bg: var(--tko-range-10, #ad1457); }

/* Star look */
.tko-star { width: 52px; height: 52px; border-radius: 0; position:relative; }
.tko-star .tko-star-num { position:absolute; left:0; right:0; top:50%; transform: translateZ(0) translateY(-50%); text-align:center; text-shadow: 0 1px 1px rgba(0,0,0,.35); color:red; }

/* History reveal (fade + slide) */
.tko-history-wrap { opacity: 0; transform: translateY(16px); animation: tko-history-in 380ms ease-out forwards; animation-delay: var(--histdelay, var(--seq)); }
@keyframes tko-history-in { to { opacity:1; transform: translateY(0); } }

/* Pop-in sequence; smoother easing, extra glide phase */
.tko-lotto.is-animated .tko-balls > .tko-ball,
.tko-lotto.is-animated .tko-stars > .tko-star {
  opacity: 0; transform: translateZ(0) scale(calc(var(--target-scale,1) * .6));
  animation: tko-pop var(--dur) cubic-bezier(.22,1,.36,1) forwards; /* smoother */
  animation-delay: calc(var(--intro) + var(--i) * var(--stagger));
}
.tko-lotto.is-animated .tko-stars > .tko-star {
  animation-delay: calc(var(--stars-start) + var(--i) * var(--stagger) + var(--i) * 1ms);
}

/* Overshoot -> glide -> settle for smoothness */
@keyframes tko-pop {
  55% { transform: translateZ(0) scale(calc(var(--target-scale,1) * 1.5)); opacity:1; }
  80% { transform: translateZ(0) scale(calc(var(--target-scale,1) * 1.02)); }
  100%{ transform: translateZ(0) scale(var(--target-scale,1)); opacity:1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tko-lotto.is-animated .tko-balls > .tko-ball,
  .tko-lotto.is-animated .tko-stars > .tko-star { animation: none; opacity:1; transform: translateZ(0) scale(var(--target-scale,1)); }
  .tko-history-wrap { animation: none; opacity:1; transform:none; }
}

/* Two-line history items */
.tko-history { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 0; border-top:1px dashed rgba(0,0,0,.08); }
.tko-history-head { color: rgba(0,0,0,.75); font-weight:600; }
.tko-history-body { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }

/* Small variants for history lists (used by markup classes tko-balls--sm / tko-stars--sm) */
.tko-balls--sm .tko-ball { width: 42px; height: 42px; }
.tko-stars--sm .tko-star { width: 46px; height: 46px; }
.tko-balls--sm .tko-ball span,
.tko-stars--sm .tko-star-num { font-size: .95rem; }

/* Hover nicety */
@media (hover:hover) { .tko-card--history .tko-ball:hover { transform: translateZ(0) scale(1.05); } }

/* ---------------------- */
/* Mobile responsiveness  */
/* ---------------------- */

/* Phones and small devices */
@media (max-width: 600px) {
  /* Reduce latest card amplification to avoid overflow */
  .tko-card--latest { --target-scale: 1.2; }

  /* Smaller base balls & stars */
  .tko-ball { width: 40px; height: 40px; }
  .tko-star { width: 44px; height: 44px; }
  .tko-ball span, .tko-star-num { font-size: .95rem; }

  /* Tighter gaps and reduced star overlap margin */
  .tko-balls, .tko-stars { gap: 8px; }
  .tko-card--latest .tko-balls,
  .tko-card--latest .tko-stars { gap: 16px; }
  .tko-card--latest .tko-stars { margin-left: 14px; }

  /* History rows smaller by default */
  .tko-balls--sm .tko-ball { width: 36px; height: 36px; }
  .tko-stars--sm .tko-star { width: 40px; height: 40px; }
  .tko-balls--sm .tko-ball span,
  .tko-stars--sm .tko-star-num { font-size: .9rem; }
}

/* Extra small devices */
@media (max-width: 380px) {
  .tko-card--latest { --target-scale: 1.1; }
  .tko-ball { width: 36px; height: 36px; }
  .tko-star { width: 40px; height: 40px; }
  .tko-ball span, .tko-star-num { font-size: .9rem; }

  .tko-balls, .tko-stars { gap: 6px; }
  .tko-card--latest .tko-balls,
  .tko-card--latest .tko-stars { gap: 12px; }
  .tko-card--latest .tko-stars { margin-left: 10px; }

  .tko-balls--sm .tko-ball { width: 32px; height: 32px; }
  .tko-stars--sm .tko-star { width: 36px; height: 36px; }
  .tko-balls--sm .tko-ball span,
  .tko-stars--sm .tko-star-num { font-size: .85rem; }
}


/* Status line shown while checking / after checks */
.tko-lotto .tko-lotto__status {
  --status-accent: var(--tko-status-accent, #2b64ff);
  display: block;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 500;
  color: inherit;
  background: rgba(43, 100, 255, 0.08); /* light info tint */
  border-left: 4px solid var(--status-accent);
  border-radius: 6px;
}

/* Collapse when JS clears text */
.tko-lotto .tko-lotto__status:empty {
  display: none;
}

/* Gentle entrance, but respect reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .tko-lotto .tko-lotto__status {
    opacity: 0;
    transform: translateY(-4px);
    animation: tko-lr-status-in 240ms ease-out forwards;
  }
  @keyframes tko-lr-status-in {
    to { opacity: 1; transform: none; }
  }
}

/* Dark mode tweak */
@media (prefers-color-scheme: dark) {
  .tko-lotto .tko-lotto__status {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: rgba(255, 255, 255, 0.35);
  }
}

/* Optional semantic variants you can toggle later, if desired */
.tko-lotto .tko-lotto__status.is-ok    { --status-accent: #2b964a; background: rgba(43, 150, 74, 0.08); }
.tko-lotto .tko-lotto__status.is-warn  { --status-accent: #e6a100; background: rgba(230, 161, 0, 0.10); }
.tko-lotto .tko-lotto__status.is-error { --status-accent: #d32f2f; background: rgba(211, 47, 47, 0.10); }