:root{
  --bg1:#2a0b4a; --bg2:#1a0d2a;
  --card:#201338; --card-2:#21183c;
  --ink:#e9ecff; --ink-dim:#aab1d6;
  --accent:#2fe0ff; --accent-2:#29ffbf; --accent-3:#ff6b6b;
  --line:rgba(255,255,255,0.08);
  --shadow:rgba(0,0,0,0.45);
  --good:#3bf2a0; --bad:#ff5c83;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% 5%, #391a67, transparent 60%),
    radial-gradient(1200px 600px at 85% 5%, #2b1151, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
}
.page{max-width:1100px;margin:0 auto;padding:18px 16px 48px}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.brand .tag{opacity:.85}
.header-actions{display:flex;gap:10px;align-items:center}
.pill{border:1px solid var(--line);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,0.03)}
.pill.muted{opacity:.8}

/* Buttons */
.btn{
  border:1px solid var(--accent);
  background:transparent;
  color:var(--ink);
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .18s, box-shadow .18s, color .18s, border-color .18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--shadow)}
.btn.primary{background:linear-gradient(180deg,#2fe0ff33,#2fe0ff18);border-color:#2fe0ff}
.btn.outline{border-color:var(--line)}
.btn.purchase{width:100%;margin-top:12px;background:linear-gradient(180deg,#2fe0ff33,#2fe0ff18);border-color:#2fe0ff}

/* Cards */
.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 10px 30px var(--shadow)
}
.play-title{font-weight:700}

/* Generic collapsible utility */
.collapsible{cursor:pointer}
.collapse{display:none;padding-top:8px}
.collapse.open{display:block}

/* Icon buttons */
.icon-btn{
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  padding:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  cursor:pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}

/* Eye buttons (panel + in-card) */
.icon-btn.eye{ border-color: var(--accent); }
.eye-toggle{  border:1px solid var(--line); border-radius:10px; padding:6px 8px; }

/* Eye glyph (slashed by default) */
.icon-btn.eye::before,
.eye-toggle::before{
  content:"";
  width:16px; height:16px; display:block;
  background:no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%232fe0ff" viewBox="0 0 24 24"><path d="M2.1 3.51 3.5 2.1l18.4 18.39-1.41 1.42-2.46-2.46A12.3 12.3 0 0 1 12 19.6C6.48 19.6 2.23 15.47 1.14 13.27a1 1 0 0 1 0-.94c.72-1.41 3.1-4.13 6.64-5.6L2.1 3.51ZM12 5c5.52 0 9.77 4.13 10.86 6.33.2.31.2.63 0 .94-.58 1.12-2.35 3.08-4.99 4.61L15.2 15.2A3.2 3.2 0 0 0 8.8 8.8L6.69 6.69C8.25 5.96 10.08 5 12 5Z"/></svg>');
}
.icon-btn.eye.is-open::before,
.eye-toggle.is-open::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%232fe0ff" viewBox="0 0 24 24"><path d="M12 5c5.523 0 9.77 4.13 10.86 6.33a1 1 0 0 1 0 .94C21.77 14.47 17.523 18.6 12 18.6S2.23 14.47 1.14 12.27a1 1 0 0 1 0-.94C2.23 9.13 6.477 5 12 5Zm0 2C7.79 7 4.2 9.94 3.28 12 4.2 14.06 7.79 17 12 17s7.8-2.94 8.72-5C19.8 9.94 16.21 7 12 7Zm0 1.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Z"/></svg>');
}

/* “turn green on hover” (Quick Actions + eyes + panel eye) */
.qa .btn:hover,
.qa .btn:focus-visible,
#quick-pick:hover, #quick-pick:focus-visible,
#clear-selection:hover, #clear-selection:focus-visible,
#tickets-toggle:hover, #tickets-toggle:focus,
.icon-btn.eye:hover, .icon-btn.eye:focus,
.eye-toggle:hover, .eye-toggle:focus{
  color:var(--good);
  border-color:var(--good);
  outline:none;
}

/* Draw area */
.draw-card{display:flex;gap:14px;align-items:center;justify-content:space-between}
.draw-left{display:flex;align-items:center;gap:18px}
.draw-right{flex:1}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{background:#140b25;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.kpi-label{opacity:.75;margin-bottom:6px}
.kpi-value{font-size:28px;font-weight:800}
.kpi-sub{opacity:.6;font-size:12px}
.sub{opacity:.8;margin-top:4px}

/* Grid */
.grid{display:grid;grid-template-columns:1.4fr .9fr;gap:14px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

/* Balls */
.balls{display:flex;gap:10px;align-items:center}
.ball{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;color:#fff;
  border:2px solid rgba(255,255,255,0.8);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 6px 14px rgba(255,255,255,.18), inset -6px -8px 16px rgba(0,0,0,.35), 4px 6px 18px rgba(0,0,0,.5);
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.25) 0%, rgba(255,255,255,.05) 35%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.35) 100%);
}
.ball.red{background:#ff4d6d}
.ball.blue{background:#4d7dff}
.ball.teal{background:#12d6c4}
.ball.green{background:#3bd671}
.ball.purple{background:#8b5cf6}
.ball.orange{background:#f59e0b}
.balls-animated .ball{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Selection + number grid */
.selected{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px}
.selected-title{opacity:.8}
.qa{display:flex;align-items:center;gap:10px}
.qa .spacer{flex:1}
.qty-label{display:flex;align-items:center;gap:6px}
.qty-input{width:64px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:8px 10px}

.num-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  background:#150e29;border:1px solid var(--line);border-radius:12px;padding:10px
}
.num-btn{
  border:1px solid var(--line);background:transparent;border-radius:10px;padding:8px 0;cursor:pointer;font-weight:700;color:var(--ink)
}
.num-btn.active{border-color:#2fe0ff;background:#2fe0ff18;box-shadow:inset 0 0 0 1px #2fe0ff33}
.num-btn:disabled{opacity:.5;cursor:not-allowed}

/* Cart */
.cart{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#140b25;padding:10px}
.cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cart-total{opacity:.85}
.cart-list{display:grid;gap:8px;max-height:220px;overflow:auto;padding-right:6px}
.cart-line{border:1px solid var(--line);border-radius:10px;background:#0f0b1a;padding:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cart-line .balls{gap:8px}
.cart-line .qty{display:flex;align-items:center;gap:6px}
.cart-line .badge{border:1px solid var(--accent);border-radius:999px;padding:2px 8px;font-size:12px;background:#2fe0ff18}
.cart-line .icon{border:1px solid var(--line);background:transparent;border-radius:8px;padding:6px;cursor:pointer}
.cart-list.empty{display:block}

/* My Tickets */
.tabs{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.tab-group{display:flex;gap:6px;flex-wrap:wrap}
.tab{
  border:1px solid var(--line);background:transparent;color:var(--ink);
  padding:6px 10px;border-radius:10px;cursor:pointer
}
.tab.active{border-color:var(--accent);background:#2fe0ff18}

.tickets{display:grid;gap:10px}
.scroll{max-height:460px;overflow:auto;padding-right:6px}

.ticket{border:1px solid var(--line);background:#140b25;border-radius:12px;padding:10px}
.ticket-head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ticket-title{font-weight:700}
.ticket-sub{opacity:.7;font-size:12px}
.ticket-body{margin-top:8px}
.ticket-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* vertical scrollbar look (optional) */
.sub-scroll.collapse.open::-webkit-scrollbar { width: 8px; }
.sub-scroll.collapse.open::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}

/* ticket mini card */
.ticket-mini{
  border:1px solid var(--line);
  background:#0f0b1a;
  border-radius:10px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.ticket-mini .mini-info{display:flex;flex-direction:column;gap:2px}
.ticket-mini .mini-head{font-weight:700}
.ticket-mini .mini-sub{opacity:.8;font-size:12px}
.ticket-mini .mini-balls{display:flex;gap:8px}
.ticket-mini .mini-code{font-weight:800;color:var(--good)}

/* Helper bits */
.group-summary{margin-top:10px}
.cost-line strong{color:var(--accent)}
.divider{margin:12px 0;border-top:1px solid var(--line)}
.sub-title{text-align:center;color:var(--ink-dim);margin:4px 0 8px}

/* Entire My Tickets panel collapsible */
#tickets-panel.collapse{display:none}
#tickets-panel.collapse.open{display:block}

/* --- Previous Winners: fluid, wrap-safe, scrollable --- */
.win-history{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.win-card{background:#0f0a1d;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.win-card .win-head{font-weight:700;margin-bottom:8px}

/* Let each line wrap; avoid horizontal overflow */
.win-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Smaller balls inside win-cards; wrap when needed */
.win-card .balls{display:flex;flex-wrap:wrap;gap:8px}
.win-card .ball{width:32px;height:32px;font-size:14px}
@media (max-width:400px){
  .win-card .ball{width:28px;height:28px;font-size:13px}
}

/* Long IDs/dates won’t stretch the grid */
.win-code{color:var(--good);font-weight:800;letter-spacing:.5px;overflow-wrap:anywhere;word-break:break-word}

/* Keep the panel within viewport height when many items exist */
#prev-wins.collapse.open{
  max-height:min(60vh, 640px);
  overflow:auto;
}

/* If you also add .sub-scroll in HTML, styled scrollbars apply */
.sub-scroll.collapse.open{max-height:min(60vh, 640px);overflow:auto}

/* Footer — 2 collapsible cards + 1 static card */
.footer .footer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:18px;
  align-items:start;
}

/* Collapsible footer cards */
.foot-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#140b25;
  padding:0;
}
.foot-head{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:transparent; color:#fff; font-weight:700; letter-spacing:.02em;
  cursor:pointer;
  transition:color .18s, border-color .18s, box-shadow .18s;
}
.foot-head:hover,
.foot-head:focus-visible,
.foot-head.is-open{
  color:var(--good);
  border-color:var(--good);
  box-shadow:0 0 0 2px rgba(25,214,125,.15);
  outline:none;
}
.foot-body{display:none;padding:10px}
.foot-body.collapse.open{display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 10px}
.rules{margin:6px 0 0;padding-left:18px;line-height:1.5}

/* Static “Connect With Us” card */
.foot-connect{
  background:#140b25;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.foot-connect .foot-title{font-weight:700;margin:0 0 10px;color:var(--ink)}
.foot-connect .contact-list{list-style:disc;padding-left:18px;margin:0;display:grid;gap:6px}
.foot-connect .contact-list li span{opacity:.8;margin-right:6px}
.footer .foot-link{color:var(--accent);text-decoration:none}
.footer .foot-link:hover,
.footer .foot-link:focus{color:var(--good);text-decoration:underline}

/* Copyright */
.copyright{text-align:center;opacity:.75;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .icon-btn{transition:none}
  .foot-head{transition:none}
}

/* =========================
   RWD fix: section.card.draw-card
   ========================= */

.card.draw-card{
  flex-wrap: wrap;
  align-items: stretch;
}

.draw-left,
.draw-right{
  min-width: 0; /* prevents flex children from forcing overflow/squeeze */
}

/* Let the winning balls wrap instead of squeezing */
#winning-balls.balls{
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* KPI cards should not be forced into 3 columns on small widths */
.kpis{
  min-width: 0;
}

/* Tablet and down: stack left + right */
@media (max-width: 820px){
  .draw-card{
    flex-direction: column;
    gap: 12px;
  }

  .draw-left{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .draw-right{
    width: 100%;
  }

  .kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Phone: 1 KPI per row, slightly smaller balls */
@media (max-width: 520px){
  .kpis{
    grid-template-columns: 1fr;
  }

  #winning-balls .ball{
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .kpi-value{
    font-size: 24px;
  }
}

/* Very small phones */
@media (max-width: 380px){
  #winning-balls .ball{
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}