44r/* =========================================================
   LottoTune — Global Styles
   (pure CSS; no JavaScript in this file)
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root{
  --brand: #00c244;
  --bg: #000;
  --panel: #0e0e0e;
  --panel-2: #141414;
  --border: #222;
  --text: #eaeaea;
  --text-dim: #bdbdbd;
}

.progress-fill {
  transition: width 1.6s ease; /* slower, smoother */
  will-change: width;
}
.bar-fill {
  transition: width 1.6s ease;      /* keep existing bar class smooth too */
}
.count-badge {
  transition: opacity .25s ease;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body{
  font-family: "Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

/* Page titles */
h1,h2,h3 { font-family: "Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial; }


/* make sure nothing else hides or disables clicks */
.hamburger, .sidebar, .overlay { pointer-events: auto; }


/* ---------- Sidebar + overlay ---------- */
.sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: 1200;
  padding: 64px 16px 20px;
  overflow-y: auto;
}
.sidebar.active{ transform: translateX(0); }

.sidebar a{
  display:block;
  padding:10px 8px;
  color:#d7d7d7;
  text-decoration:none;
  border-radius:8px;
}
.sidebar a:hover{ background: var(--panel-2); color:#fff; }

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1150;
}
/* Make overlay clickable/visible when active */
.overlay.active{
  opacity: 1;
  pointer-events: auto;
}


/* ---------- Search (pinned top-right) ---------- */
.search-container{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1100;                    /* below hamburger */
}

#searchForm{ position: relative; margin: 0; }

#searchInput{
  width: 260px;
  max-width: 36vw;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  background: #0f0f0f;
  color: #e6e6e6;
  outline: none;
}

/* Suggestions panel (used by app.js) */
#suggestions{
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 260px;
  max-width: 420px;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
  display: none;
  z-index: 1101;
  overflow: hidden;
}
#suggestions .suggestion-row{
  padding: 8px 10px;
  color: #ddd;
  cursor: pointer;
}
#suggestions .suggestion-row:hover{ background:#1f1f1f; }

/* ---------- Albums grid helpers (minimal) ---------- */
.albums-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  padding:24px;
  max-width:1100px;
  margin:0 auto;
}
.album-card{
  background:#121212;
  border:1px solid #222;
  border-radius:12px;
  overflow:hidden;
}
.album-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.album-card .meta{ padding:10px 12px; }
.album-card .title{ color:#fff; font-weight:600; }
.album-card .by{ color:#aaa; font-size:.9rem; }

/* ---------- Footer (centered + readable) ---------- */
footer{
  color:#cfcfcf;
  text-align:center;
  max-width:1000px;
  margin:40px auto 24px;
  padding:0 16px;
  line-height:1.6;
  font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
}
footer p{ margin:.2rem 0; }
footer a{ color: var(--brand); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px){
  .albums-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .albums-grid{ grid-template-columns: repeat(2, 1fr); }
  #searchInput{ width: 54vw; }
}
@media (max-width: 420px){
  .albums-grid{ grid-template-columns: 1fr; }
  .hamburger{ top: 10px; left: 10px; }
  .search-container{ top: 10px; right: 10px; }
}

.hamburger.active span:nth-child(1){transform:translateY(6px)rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-6px)rotate(-45deg);}

/* Keep it visible on all pages */
body.index .hamburger,
body.albums .hamburger,
body.user_login .hamburger,
body.register .hamburger{
  display: flex;
}

/* Make sure sidebar/overlay visibility rules are sane */
.sidebar{ transform: translateX(-100%); }
.sidebar.active{ transform: translateX(0); }
.overlay{ display:none; }
.overlay.active{ display:block; }
.search-container { position: relative; }
.search-results { background:#0e0e0e; border:1px solid #232323; border-radius:8px; display:none; max-height:320px; overflow:auto; }
.sug-item:hover { background:#1b1b1b !important; }

/* === Hamburger (green bars on black square) === */
.hamburger{
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(0,0,0,.9); /* black square */
}

.hamburger span{
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: #00c244 !important; /* Lotto green */
}
/* Search UI */
.search-container {
  position: relative;
  max-width: 420px;
  margin: 8px auto 0;
  z-index: 1200; /* above sidebar */
}

@media (min-width: 900px) {
  .search-container {
    position: fixed;
    top: 14px;
    right: 72px; /* keep clear of hamburger at ~24px */
  }
}

#searchInput {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #1d2a22;
  background: #0f1512;
  color: #e7f5ec;
  outline: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #0f1512;
  border: 1px solid #1d2a22;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  z-index: 1300;
}

.search-results .sr-item {
  display: block;
  padding: 10px 12px;
  color: #d2e9dd;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.04);
}

.search-results .sr-item:first-child { border-top: 0; }

.search-results .sr-item[data-active="true"],
.search-results .sr-item:hover {
  background: rgba(0, 194, 68, 0.14);
  color: #fff;
}

/* ---------- Progress bar (giveaways, etc.) ---------- */
.bar-rail {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.bar-fill {
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: var(--accent, #00c244);
  transition: width 0.8s ease;
}

/* ---------- Album player visualizer (top green line) ---------- */
.lt-visualizer {
  margin-top: 16px;
  width: 100%;
  height: 64px;
  background: #111;
  border-radius: 999px;
  padding: 6px 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.lt-visualizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 100%;
}

.lt-visualizer-bar {
  flex: 1;
  max-width: 8px;
  border-radius: 999px;
  background: linear-gradient(to top, #00ff5f, #66ff99);
  height: 20%;
  opacity: 0.7;
  transform-origin: bottom;
  transition: height 0.08s linear, opacity 0.08s linear;
}

/* Canvas mode (if you later swap bars for a waveform canvas) */
.lt-visualizer canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* LottoTune player visualizer */

.lt-visualizer-wrapper {
  width: 100%;
  height: 120px;
  margin: 24px 0 8px;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

#lt-visualizer-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Global dark background */
body {
  background: #000;
  color: #fff;
}