/* App custom tweaks layered on top of Tailwind (CDN). */
:root { --bg: #0b1220; }
html, body, #root { height: 100%; }
body {
  color: #fff;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(56,189,248,0.20), transparent 55%), /* sky-400 */
    radial-gradient(900px 500px at 110% 110%, rgba(236,72,153,0.16), transparent 60%), /* fuchsia-500 */
    linear-gradient(120deg, #0b1220, #111827 60%, #0b1220);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sidebar layout helpers (ChatGPT-like) */
.sidebar { width: 260px; transition: width .2s ease; }
.sidebar--collapsed { width: 64px; }
.sidebar .nav-item { display:flex; align-items:center; gap:.625rem; padding:.5rem .5rem; border-radius:.5rem; color:#e5e7eb; }
.sidebar .nav-item:hover { background: rgba(255,255,255,0.08); }
.sidebar .nav-icon { width: 1.25rem; height: 1.25rem; display:inline-flex; align-items:center; justify-content:center; opacity:.9 }
.sidebar .section-title { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7; padding:.25rem .5rem; }
.sidebar .brand { font-weight:700; letter-spacing:.02em; }

/* Mobile sheet menu */
.sheet { transform: translateX(-104%); transition: transform .16s cubic-bezier(.22,1,.36,1); will-change: transform; }
.sheet-open { transform: translateX(0); }

/* Mobile menu card */
.menu-card {
  background: rgba(17,24,39,0.94); /* even darker for readability */
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.55);
  overflow-y: auto;
}

.nav-list { display: grid; gap: 8px; }
.nav-sep { height:1px; background: rgba(255,255,255,0.08); border-radius:9999px; margin: 6px 2px; }
.menu-badge { margin-left:auto; border-radius:9999px; background: rgba(255,255,255,0.14); padding: 3px 8px; font-size: 12px; border: 1px solid rgba(255,255,255,0.22); }

/* Tighter nav items for menu */
.nav-item { padding: .6rem .6rem; border: 1px solid transparent; }
.nav-item.bg-white\/10 { border-color: rgba(255,255,255,0.18); }
/* Gradient stroke utility (glass inner, vibrant border) */
.stroke-mega,
.stroke-winners,
.stroke-live {
  border: 1px solid transparent;
  border-radius: 12px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.stroke-mega {
  background-image:
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
    linear-gradient(135deg, #22d3ee, #f472b6); /* cyan -> pink */
}
.stroke-winners {
  background-image:
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
    linear-gradient(135deg, #a78bfa, #f59e0b); /* violet -> amber */
}
.stroke-live {
  background-image:
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
    linear-gradient(135deg, #34d399, #22d3ee); /* emerald -> cyan */
}

/* Number balls */
.ball { width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; font-weight:700; cursor:pointer; user-select:none; color:#fff; border:1px solid transparent; background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box, linear-gradient(135deg, #22d3ee, #a78bfa) border-box; transition: box-shadow .15s ease, filter .15s ease, transform .15s ease; will-change: transform; }
.ball:hover { filter: brightness(1.1); }
/* Selected: emphasize colored gradient stroke and subtle glow */
.ball--selected { box-shadow: 0 0 0 2px rgba(16,185,129,1), 0 0 16px rgba(20,184,166,.45); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box, linear-gradient(135deg, #10b981, #22d3ee) border-box; transform: scale(1.35); z-index: 1; }
.ball-power { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box, linear-gradient(135deg, #fb7185, #f43f5e) border-box; }
.ball-power.ball--selected { box-shadow: 0 0 0 2px rgba(244,114,182,1), 0 0 16px rgba(244,63,94,.4); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box, linear-gradient(135deg, #f472b6, #f43f5e) border-box; transform: scale(1.35); z-index: 1; }

/* Pick3 segmented rows with distinct colors */
.ball-p3-a { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box, linear-gradient(135deg, #34d399, #22d3ee) border-box; }
.ball-p3-a.ball--selected { box-shadow: 0 0 0 2px rgba(52,211,153,.95), 0 0 16px rgba(34,211,238,.4); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box, linear-gradient(135deg, #059669, #22d3ee) border-box; transform: scale(1.35); z-index: 1; }
.ball-p3-b { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box, linear-gradient(135deg, #f59e0b, #f43f5e) border-box; }
.ball-p3-b.ball--selected { box-shadow: 0 0 0 2px rgba(245,158,11,.95), 0 0 16px rgba(244,63,94,.35); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box, linear-gradient(135deg, #b45309, #f43f5e) border-box; transform: scale(1.35); z-index: 1; }
.ball-p3-c { background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box, linear-gradient(135deg, #a78bfa, #22d3ee) border-box; }
.ball-p3-c.ball--selected { box-shadow: 0 0 0 2px rgba(167,139,250,.95), 0 0 16px rgba(34,211,238,.35); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box, linear-gradient(135deg, #7c3aed, #22d3ee) border-box; transform: scale(1.35); z-index: 1; }

/* Toasts */
.toast-wrap { position: fixed; top: 12px; right: 12px; z-index: 60; display: grid; gap: 8px; width: min(92vw, 360px); }
.toast { border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(17,24,39,0.92); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.4); display:flex; align-items:center; gap:8px; }
.toast--ok { border-color: rgba(16,185,129,.6); }
.toast--info { border-color: rgba(59,130,246,.6); }
.toast--err { border-color: rgba(244,63,94,.6); }
.toast .dot { width:8px; height:8px; border-radius:9999px; }

/* Stroke styles for unique cards */
.stroke-power { background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), linear-gradient(135deg, #fb7185, #f472b6); }
.stroke-pick3 { background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), linear-gradient(135deg, #f59e0b, #34d399); }

/* Live purchases user colors */
.user-dot { width:10px; height:10px; border-radius:9999px; display:inline-block; margin-right:6px; }

/* Responsive ball grids */
.ball-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.ball-grid--digits { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
/* Hide number spinners for a cleaner UI */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Dropdown (How to win) */
.dropdown { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); border-radius: 10px; }
.dropdown > summary { cursor: pointer; padding: 8px 12px; list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > .dropdown-body { padding: 8px 12px 12px; }
.dropdown summary .chev { transition: transform .15s ease; display:inline-block; }
.dropdown[open] summary .chev { transform: rotate(90deg); }

/* Mobile tweaks */
@media (max-width: 420px) {
  .ball { width: 34px; height: 34px; font-size: .9rem; }
  .ball-grid { gap: 6px; }
  .toast { font-size: 14px; }
}

@media (max-width: 768px) {
  nav [data-nav-group="links"] {
    display: grid;
    gap: 10px;
    width: 100%;
  }
  nav [data-nav-group="links"] a,
  nav [data-nav-group="links"] button {
    width: 100%;
    justify-content: center;
  }
}