:root{
  --bg: #0b1020;
  --bg-elev: #121933;
  --text: #e9eefb;
  --muted: #98a2b3;
  --brand: #7c3aed;        /* purple-600 */
  --brand-2: #06b6d4;      /* cyan-500 */
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --border: #23304f;
  --ring: rgba(124, 58, 237, .45);
  --shadow: 0 10px 25px rgba(2, 6, 23, .45);
}

@media (prefers-color-scheme: light) {
  :root{
    --bg: #f7f8fb;
    --bg-elev: #ffffff;
    --text: #0f172a;
    --muted: #4b5563;
    --border: #e5e7eb;
    --ring: rgba(124, 58, 237, .25);
    --shadow: 0 8px 20px rgba(2, 6, 23, .08);
  }
}

/* Global */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 14px/1.55 ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(60vmax 60vmax at 10% -10%, rgba(124,58,237,.15), transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 10%, rgba(6,182,212,.15), transparent 60%),
    var(--bg);
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 80px;
}
.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom: 12px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px;
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size:20px;
}
.pill{
  padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted);
  background: color-mix(in hsl, var(--bg-elev) 80%, black 10%);
}
.pill.small{ padding:1px 7px; font-size:11px }

/* Tabs (optional sticky bar if you add .tabs container) */
.tabs{
  position: sticky; top:0; z-index:20;
  display:flex; gap:8px; padding:8px; margin: 8px -8px 18px;
  backdrop-filter: saturate(130%) blur(6px);
  background: linear-gradient(to bottom, rgba(10,14,25,.85), rgba(10,14,25,.55));
  border-bottom: 1px solid var(--border);
}
.tabs button{
  cursor:pointer; padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in hsl, var(--bg-elev) 85%, #000 10%), var(--bg-elev));
  color: var(--text); font-weight:600;
  transition:.2s ease;
}
.tabs button:hover{ transform: translateY(-1px) }
.tabs button.active{
  background: linear-gradient(180deg, color-mix(in hsl, var(--bg-elev) 92%, #000 4%), var(--bg-elev));
  border-color: color-mix(in hsl, var(--border) 30%, var(--brand) 70%);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Cards & sections */
.card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 12px 0;
}
.section-title{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  font-size: 15px; margin: 6px 0 12px;
}
.section-title .badge{ margin-left:8px }

/* Buttons */
.button{
  cursor:pointer; border:1px solid var(--border);
  background: linear-gradient(180deg, #121a33, #0f1529);
  color:var(--text);
  padding: 8px 12px; border-radius: 12px; font-weight:600;
  transition:.15s ease;
}
.button:hover{ transform: translateY(-1px) scale(1.01) }
.button:active{ transform: translateY(0) scale(.99) }
.button.secondary{
  background: linear-gradient(180deg, #0d1429, #0b1020);
}
.button.ghost{
  background: transparent;
}
.button.small{ padding:6px 10px; font-size:12px; border-radius:10px }

/* Inputs */
.input, input[type=password], input[type=text], input[type=search]{
  width:100%; padding:10px 12px; border-radius: 12px; color:var(--text);
  background: var(--bg-elev); border:1px solid var(--border); outline:none;
  transition: box-shadow .2s ease;
}
.input:focus, input[type=password]:focus, input[type=text]:focus, input[type=search]:focus{
  box-shadow: 0 0 0 3px var(--ring);
}

/* Badges & tags */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 2px 8px; font-size: 12px; border-radius: 999px;
  border:1px solid var(--border); color: var(--muted);
  background: color-mix(in hsl, var(--bg-elev) 88%, black 5%);
}
.tag{
  display:inline-block; padding:4px 8px; margin:4px 6px 0 0;
  background: color-mix(in hsl, var(--brand) 13%, var(--bg-elev));
  border:1px solid color-mix(in hsl, var(--border) 70%, var(--brand) 30%);
  border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Text utils */
.small{ font-size: 12px }
.muted{ color: var(--muted) }
.right{ margin-left:auto }

/* NEW: compact rows for highlight lists */
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.row.gap-sm{ gap:6px }
.row.tight{ gap:6px; line-height:1.3 }
.row.tight .tag{ margin:0 6px 0 0 }

/* NEW: bigger headline number/text (used in craps record) */
.bigger{ font-size:22px; font-weight:800; letter-spacing:.2px; line-height:1.15; margin-bottom:6px }

/* NEW: Responsive grid for highlight cards */
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Table */
table{
  border-collapse: separate; border-spacing: 0; width:100%;
  background: var(--bg-elev); border:1px solid var(--border);
  border-radius: 14px; overflow:hidden
}
thead th{
  position: sticky; top:0; z-index:1;
  background: color-mix(in hsl, var(--bg-elev) 85%, black 5%);
  text-align:left; font-weight:700; padding:10px; border-bottom:1px solid var(--border);
  user-select:none; cursor:pointer;
}
tbody td{ padding:10px; border-bottom:1px solid var(--border) }
tbody tr:hover{ background: color-mix(in hsl, var(--bg-elev) 85%, black 4%) }
tbody tr:nth-child(even){ background: color-mix(in hsl, var(--bg-elev) 90%, black 2%) }
th .sort{ opacity:.6; margin-left:6px }
.table-wrap{ overflow:auto; max-height: 60vh; border-radius: 14px }

/* Toasts */
#toastHost{
  position: fixed; top: 14px; right: 14px; z-index: 50;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  background: var(--bg-elev); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; box-shadow: var(--shadow)
}

/* Ensure hidden views don't block clicks */
.view{ display:none }
.view[style*="display:block"]{ display:block }

/* Small accessibility tweaks */
button:focus-visible, .input:focus-visible, a:focus-visible{
  outline: none; box-shadow: 0 0 0 3px var(--ring);
  border-color: color-mix(in hsl, var(--border) 30%, var(--brand) 70%);
}

/* ===== Lottery grid ===== */
.lottery-grid{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)); /* exactly 10 columns */
  gap:10px;
}

/* A single ball */
.ball{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio:1 / 1;
  border-radius:999px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in hsl, var(--bg-elev) 94%, #000 3%), var(--bg-elev));
  box-shadow: var(--shadow);
  user-select:none;
}
.ball .num{ font-weight:800; font-size:16px; line-height:1; }
.ball .cnt{ font-size:11px; color: var(--muted); margin-top:2px }

/* --- NEW: Binned fills by count (use .bin-0..4 via JS) --- */
/* Neutral (0) */
.ball.bin-0{
  background: linear-gradient(180deg, color-mix(in hsl, var(--bg-elev) 94%, #000 3%), var(--bg-elev));
  border-color: var(--border);
  color: var(--text);
}
/* 1–2: low (green) */
.ball.bin-1{
  background: linear-gradient(180deg, #ecfdf5, #bbf7d0);
  border-color: color-mix(in hsl, var(--border) 60%, #16a34a 40%);
  color:#064e3b;
}
/* 3–5: medium (yellow) */
.ball.bin-2{
  background: linear-gradient(180deg, #fefce8, #fef9c3);
  border-color: color-mix(in hsl, var(--border) 60%, #eab308 40%);
  color:#713f12;
}
/* 6–9: high (orange) */
.ball.bin-3{
  background: linear-gradient(180deg, #ffedd5, #fdba74);
  border-color: color-mix(in hsl, var(--border) 60%, #ea580c 40%);
  color:#7c2d12;
}
/* 10+: very high (red) */
.ball.bin-4{
  background: linear-gradient(180deg, #fee2e2, #fca5a5);
  border-color: color-mix(in hsl, var(--border) 60%, #ef4444 40%);
  color:#7f1d1d;
}

/* (Deprecated) Per-count fills kept for compatibility */
.ball.count-1{
  background: linear-gradient(180deg, #ecfdf5, #bbf7d0); /* pastel green */
  border-color: color-mix(in hsl, var(--border) 60%, #16a34a 40%);
  color:#064e3b;
}
.ball.count-2{
  background: linear-gradient(180deg, #fefce8, #fef9c3); /* pastel yellow */
  border-color: color-mix(in hsl, var(--border) 60%, #eab308 40%);
  color:#713f12;
}
.ball.count-3{
  background: linear-gradient(180deg, #eff6ff, #bfdbfe); /* pastel blue */
  border-color: color-mix(in hsl, var(--border) 60%, #2563eb 40%);
  color:#1e3a8a;
}

/* ===== Games tab styling ===== */
/* Container for craps record */
.games-card .games-record{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.games-record .record-value{
  font-size:32px;
  font-weight:800;
  color:var(--brand);
}
.games-record .record-label{
  font-size:14px;
  color:var(--muted);
}
.games-record .record-player,
.games-record .record-room{
  font-size:14px;
}
.games-record .record-date{
  font-size:12px;
  color:var(--muted);
}

/* Winners grid */
.winners-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:12px;
}
.winner-card{
  background: var(--bg-elev);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  text-align:center;
  box-shadow: var(--shadow);
}
.winner-name{
  font-weight:600;
  margin-bottom:4px;
}
.winner-amount{
  font-size:18px;
  font-weight:700;
  color:var(--ok);
}

/* ===== Songs tab styling ===== */
#viewSongs .table-wrap{ max-height: 70vh } /* taller for songs list */

#viewSongs table.data th,
#viewSongs table.data td{
  white-space: nowrap;
  vertical-align: middle;
}

#viewSongs td.rank{
  width:56px; text-align:center; color:var(--muted); font-weight:700;
}

#viewSongs td.title-cell{ max-width: 340px }
#viewSongs td.artist-cell{ max-width: 220px }

#viewSongs .truncate{
  display:inline-block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Avg / reaction chips */
#viewSongs .avg-cell,
#viewSongs .likes-cell,
#viewSongs .dislikes-cell,
#viewSongs .stars-cell{
  text-align:right;
}
#viewSongs .avg-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 2px 8px; border-radius:999px; border:1px solid var(--border);
  background: color-mix(in hsl, var(--bg-elev) 88%, black 4%);
  font-weight:600; font-variant-numeric: tabular-nums;
}

/* Chips for likes / dislikes / stars */
#viewSongs .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 2px 8px; border-radius:999px; border:1px solid var(--border);
  background: color-mix(in hsl, var(--bg-elev) 88%, black 4%);
  font-weight:600; font-variant-numeric: tabular-nums;
}
#viewSongs .chip-ok{
  border-color: color-mix(in hsl, var(--border) 40%, var(--ok) 60%);
}
#viewSongs .chip-warn{
  border-color: color-mix(in hsl, var(--border) 40%, var(--warn) 60%);
}

/* Plays bar */
#viewSongs .plays-cell{ width:240px }
#viewSongs .plays{
  display:flex; align-items:center; gap:10px;
}
#viewSongs .bar{
  position:relative; flex:1 1 auto; height:8px; border-radius:999px;
  background: color-mix(in hsl, var(--bg-elev) 92%, #000 6%);
  border:1px solid var(--border); overflow:hidden;
}
#viewSongs .bar-fill{
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
#viewSongs .count{
  width:70px; text-align:right; font-variant-numeric: tabular-nums;
}

/* Last played */
#viewSongs .recent-cell{ color:var(--muted) }

/* Suggested column widths */
#viewSongs th[data-col="avg"]{ width:120px; text-align:right }
#viewSongs th[data-col="likes"]{ width:110px; text-align:right }
#viewSongs th[data-col="dislikes"]{ width:120px; text-align:right }
#viewSongs th[data-col="stars"]{ width:100px; text-align:right }
#viewSongs th[data-col="plays"]{ width:240px }

/* Responsive: tuck artist under title and hide some cols on narrow screens */
@media (max-width: 900px){
  #viewSongs td.artist-cell{ display:none }
  #viewSongs .artist-mobile{ display:block }
  #viewSongs td.dislikes-cell,
  #viewSongs td.stars-cell{ display:none } /* optional hide on small screens */
}
@media (min-width: 901px){
  #viewSongs .artist-mobile{ display:none }
}