: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;
  --warn:#ffd166;
  --bad:#ff5c83;
}
*{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, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.page{max-width:1100px;margin:0 auto;padding:18px 16px 48px}

.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px
}
.logo{font-size:40px;margin:0;letter-spacing:1px}
.logo .muted{opacity:.75;font-weight:300}
.tag{opacity:.8}
.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}
.btn{border:1px solid var(--accent);background:transparent;color:var(--ink);padding:10px 14px;border-radius:8px;cursor:pointer;transition:all .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)}

.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)
}
.card-title{font-weight:700;margin-bottom:8px}
.card-header{display:flex;align-items:center;gap:12px}
.card-header .card-title{flex:1;margin:0}
.meta{opacity:.8}
.collapsible{cursor:pointer}
.collapse{display:none;padding-top:8px}
.collapse.open{display:block}

.icon-btn{border:1px solid var(--line);background:transparent;border-radius:8px;padding:8px;cursor:pointer}
.icon-btn.eye::before{content:"👁";display:block;line-height:1;font-size:16px}

.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{display:grid;grid-template-columns:1.4fr .9fr;gap:14px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}

.digits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:10px}
.digit-col{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#150e29;border:1px solid var(--line);border-radius:12px;padding:10px}
.digit-btn{border:1px solid var(--line);background:transparent;border-radius:10px;padding:8px 0;cursor:pointer;font-weight:600}
.digit-btn.active{border-color:#2fe0ff;background:#2fe0ff18;box-shadow:inset 0 0 0 1px #2fe0ff33}

.selected{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;margin-bottom:12px}
.selected-title{opacity:.8}

.plays{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.play-box{background:#140b25;border:1px solid var(--line);border-radius:12px;padding:12px}
.play-title{font-weight:700}
.play-sub{opacity:.7;margin-bottom:8px}
.options{display:grid;gap:8px;margin-top:6px}
.opt{border:1px solid var(--line);background:transparent;border-radius:10px;padding:10px;cursor:pointer;text-align:left}
.opt.active{border-color:#2fe0ff;background:#2fe0ff18;box-shadow:inset 0 0 0 1px #2fe0ff33}

.btn.purchase{width:100%;margin-top:12px;background:linear-gradient(180deg,#2fe0ff33,#2fe0ff18);border-color:#2fe0ff}
.msg{opacity:.8;margin-top:6px;min-height:18px}

.tabs{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px 0}
.tab-group{display:flex;gap:6px}
.tab{border:1px solid var(--line);background:transparent;color:var(--ink);padding:6px 10px;border-radius:10px;cursor:pointer}
.tab.active{border-color:#2fe0ff;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-sub{opacity:.7;font-size:12px}
.ticket-body{margin-top:8px}
.ticket-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ticket .expand{cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:8px;padding:6px 8px}

.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-color:#ff4d6d}
.ball.blue{background-color:#4d7dff}
.ball.teal{background-color:#12d6c4}
.ball.green{background-color:#3bd671}
.ball.gray{background-color:#7f8aa1}

.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)}}

.qa{display:flex;gap:10px}

.footer{margin-top:18px;opacity:.95}

@media (max-width: 980px){}
.foot-card{border:1px solid var(--line);border-radius:12px;background:#140b25}
.foot-head{width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:10px;font-weight:700;cursor:pointer}
.foot-body{display:none;padding:10px}
.foot-body.open{display:block}
.kv{display:flex;gap:8px;margin-bottom:6px}
.kv code{opacity:.9}
.copyright{text-align:center;opacity:.75;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}

/* Quick Actions — make text turn green on hover/focus */
.qa .btn {
  transition: color .18s ease-in-out; /* smooth change */
}

/* Hover and keyboard focus */
#quick-pick:hover,
#quick-pick:focus-visible,
#clear-selection:hover,
#clear-selection:focus-visible {
  color: var(--good, #22c55e); /* fallback green if --good isn't defined */
}

/* (Optional) slight emphasis for accessibility */
#quick-pick:focus-visible,
#clear-selection:focus-visible {
  outline: 2px solid var(--good, #22c55e);
  outline-offset: 2px;
}

/* (Optional) respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qa .btn { transition: none; }
}

#quick-pick:hover, #quick-pick:focus-visible,
#clear-selection:hover, #clear-selection:focus-visible {
  border-color: var(--good, #22c55e);
}

/* === Grouped ticket (Straight/Box) === */
.ticket-group .ticket-title{ font-weight:700; }
.ticket-group .badge{
  border:1px solid var(--accent); color:var(--ink);
  border-radius:999px; padding:4px 10px; font-size:12px;
  background:#2fe0ff18; margin-right:8px;
}
.ticket-group .badge.cube{ border-color:#29ffbf; background:#29ffbf18; }

/* Chevron toggle */
.toggle{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.toggle::before{
  content:""; width:12px; height:12px; display:block;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23a4eaff" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  transform: rotate(0deg); transition: transform .18s ease;
}
.toggle.is-open::before{ transform: rotate(180deg); }

/* Summary lines + divider */
.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; }

/* --- My Tickets · horizontal minis inside expanded view --- */
/* --- My Tickets · Individual tickets panel (vertical) --- */
.sub-scroll {           /* base: no display; collapse controls it */
  gap: 10px;
  padding-right: 6px;
  overflow-x: hidden;
}
.sub-scroll.collapse { display: none; }
.sub-scroll.collapse.open {
  display: block;
  max-height: 240px;    /* controls the inner panel height */
  overflow-y: auto;     /* vertical scroll inside the expanded panel */
}

/* 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); }

/* keep variations grid closed unless opened */
.combo-grid.collapse{ display:none; }
.combo-grid.collapse.open{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
}

/* Eye state (optional) */
.eye-toggle.is-open::before{ content:"🙈"; } /* base .icon-btn.eye draws the open eye */


/* Footer summary in list */
.tickets-summary{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between;
}


/* === Readability Update (Aqua titles) =============================== */
.col.left > .card > .card-title { color: var(--accent); text-shadow: 0 0 8px rgba(47, 224, 255, 0.22); }
.play-box .play-title { color: var(--accent); text-shadow: 0 0 8px rgba(47, 224, 255, 0.22); }
/* Ensure option & digit buttons never render black */
.options .opt, .digit-btn { color: var(--ink) !important; }

/* === Footer five-column layout === */
.footer .footer-grid.five-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* Cards */
.foot-card {
  background: var(--panel, #0f1424);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 12px;
}

/* Header with title + eye button on the right */
.foot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
}

.foot-title {
  font-weight: 700;
  letter-spacing: .02em;
}

/* Body (collapsible) */
.foot-body.collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.foot-body.collapse.open {
  /* large enough to fit list/text; adjust if needed */
  max-height: 420px;
}

/* Typographic helpers */
.foot-body .kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  font-size: .95rem;
  margin: 8px 0;
}
.foot-body .kv span { opacity: .8; }
.foot-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Rules list in GAME RULES card */
.foot-body .rules { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }

/* Responsive breakpoints */
@media (max-width: 1200px) {
  .footer .footer-grid.five-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .footer .footer-grid.five-cols { grid-template-columns: repeat(1, 1fr); }
}

/* === Quick Actions hover (turn text/border green) === */
.qa .btn:hover,
.qa .btn:focus {
  color: var(--good, #31d07e);
  border-color: var(--good, #31d07e);
}

/* Optional: make the eye change state when open */
.icon-btn.eye.is-open {
  outline-color: var(--good, #31d07e);
  box-shadow: 0 0 0 1px var(--good, #31d07e) inset;
}


/* ===== Wallet connected state ===== */
.connected #connect-btn{ display:none; }
/* Default: show Connect, hide Disconnect */
#disconnect-btn { display: none; }

/* When connected, flip visibility */
.connected #connect-btn { display: none !important; }
.connected #disconnect-btn { display: inline-block !important; }

/* Optional: make the address look copyable */
#user-address.copyable { cursor: pointer; }
#user-address.copyable::after { content: " ⧉"; opacity: .7; font-size: 12px; }


/* ===== My Tickets panel + nested lists ===== */
#tickets-panel.collapse { display: none; }
#tickets-panel.open { display: block; }

.ticket-head .right-actions{ display:flex; align-items:center; gap:8px; }

/* --- Eye icon: slashed when closed, normal when open --- */
.icon-btn.eye{ border-color: var(--accent); }
.icon-btn.eye::before{
  content: ""; width: 16px; height: 16px; display: block;
  background: no-repeat center/contain;
  /* default is slashed eye (closed) */
  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="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{
  /* open eye */
  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>');
}

/* --- Variations button readable & on-brand --- */
.ticket .expand{
  color: var(--ink);
  border-color: var(--accent);
}
.ticket .expand:hover{
  background: #2fe0ff18;
  color: var(--accent);
}

/* --- Horizontal mini rows for owned tickets & variations --- */
.balls-sm { gap: 8px; }
.balls-sm .ball { width: 32px; height: 32px; font-size: 14px; }

/* --- Ensure collapsed panels are hidden and look clean when open --- */
.owned-grid.collapse{ display: none; }
.owned-grid.collapse.open{ display: grid; }
.owned-grid.collapse.open { display: block; }

.owned-grid, .combo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border-top: 1px solid var(--line);
}
/* Aqua eye icon (SVG) */
.icon-btn.eye {
  border-color: var(--accent);
}
.icon-btn.eye::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232fe0ff"><path d="M12 5c5.523 0 9.77 4.13 10.86 6.33a1 1 0 010 .94C21.77 14.47 17.523 18.6 12 18.6S2.23 14.47 1.14 12.27a1 1 0 010-.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 110 6.4 3.2 3.2 0 010-6.4z"/></svg>');
}
.icon-btn.eye.aqua::before { filter:none; }

/* Purchased/variations grids (used by Box & Straight group expanders) */
.owned-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:10px;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border-top:1px solid var(--line);
}
.combo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
  max-height:200px;
  overflow:auto;
  padding:6px;
  border-top:1px solid var(--line);
}
.ball.sm{ width:32px; height:32px; font-size:14px; }

/* === Previous Winning Numbers: 3-per-row grid, last 6 === */
.win-history{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){ .win-history{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .win-history{ grid-template-columns: 1fr; } }

.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;
  color:var(--ink);
}
.win-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.win-code{
  color: var(--good);
  font-weight:800;
  letter-spacing: .5px;
}
.win-card .balls .ball{
  width:36px; height:36px; font-size:16px;
}

/* --- Eye toggles = outline button look & hover ------------------------- */
#tickets-toggle,
.icon-btn.eye,
.eye-toggle,
.foot-head {
  background: transparent;
  color: #fff;                     /* same as your outline buttons */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover/focus: white → green (same as Quick Pick / Clear Selection) */
#tickets-toggle:hover,
#tickets-toggle:focus,
.icon-btn.eye:hover,
.icon-btn.eye:focus,
.eye-toggle:hover,
.eye-toggle:focus,
.foot-head:hover,
.foot-head:focus {
  color: var(--good);
  border-color: var(--good);
}

/* Keep them green while the related panel is open */
#tickets-toggle.is-open,
.icon-btn.eye.is-open,
.eye-toggle.is-open,
.foot-head.is-open {
  color: var(--good);
  border-color: var(--good);
}

/* Optional: tiny eye glyph for the icon-style buttons (keeps your current icon) */
.icon-btn.eye::before,
.eye-toggle::before,
#tickets-toggle::before {
  content: "";
  width: 16px; height: 16px;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M12 5c5.523 0 10 5 10 7s-4.477 7-10 7S2 14 2 12s4.477-7 10-7zm0 3a4 4 0 100 8 4 4 0 000-8z'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M12 5c5.523 0 10 5 10 7s-4.477 7-10 7S2 14 2 12s4.477-7 10-7zm0 3a4 4 0 100 8 4 4 0 000-8z'/></svg>") no-repeat center/contain;
  background: currentColor;
}

/* Footer — 4 collapsible cards + 1 static card */
.footer .footer-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(240px, 1fr));
  gap:10px;
  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}

/* Social icons – keep them compact so they don't blow up the row height */
.foot-connect .socials { display: flex; gap: 10px; margin: 8px 0 12px; }
.foot-connect .social-btn svg { width: 28px; height: 28px; display: block; }
.footer .foot-link{color:var(--accent);text-decoration:none}
.footer .foot-link:hover,
.footer .foot-link:focus{color:var(--good);text-decoration:underline}

/* Same green hover as Quick Pick / Clear Selection */
.foot-head {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.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;
}

/* =========================
   RWD fix: Win4ETH draw-card
   ========================= */

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

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

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

/* Tablet and down: stack left + right */
@media (max-width: 820px){
  .card.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;
  }
}
/* =========================
   RWD fixes: Digit picker + Selected row + Play boxes
   ========================= */

/* 1) Digit picker: allow wrap instead of squeeze */
.digits{
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.digit-col{
  min-width: 0;
}

/* 2) Selected Numbers row: wrap-safe */
.selected{
  flex-wrap: wrap;
  align-items: center;
}

#selected-balls.balls{
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 3) Play boxes: go single-column on small screens */
@media (max-width: 680px){
  .plays{
    grid-template-columns: 1fr;
  }

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

  #selected-balls.balls{
    justify-content: center;
  }

  /* tighten spacing so digit columns stay readable */
  .digits{ gap: 10px; }
  .digit-col{ padding: 8px; gap: 6px; }
  .digit-btn{ padding: 7px 0; }
}

/* Very small phones: keep digit buttons from crushing */
@media (max-width: 420px){
  .digit-col{
    grid-template-columns: repeat(5, minmax(28px, 1fr));
  }
}
/* =========================
   RWD fix: Header (Win4ETH)
   ========================= */

.header{
  flex-wrap: wrap;
}

.header .brand,
.header .tag,
.header .header-actions{
  min-width: 0;
}

@media (max-width: 820px){
  .header{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .header .brand a img{
    max-width: min(280px, 90vw);
    height: auto;
  }

  .header .tag{
    max-width: 42ch;
    line-height: 1.25;
  }

  .header .header-actions{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 520px){
  .header .header-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .header .header-actions .pill,
  .header .header-actions .btn{
    width: 100%;
  }
}