/* =====================
   BROKEN GLASS STYLES
   ===================== */

body {
  background-color: #0b0b0b;
  color: #eee;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.card {
  transition: all 0.2s ease;
  cursor: grab;
}

.card:hover {
  transform: scale(1.02);
}

/* =====================
   📱 MOBILE OPTIMIZATION
   ===================== */

@media (max-width: 768px) {
  body {
    font-size: 1.05rem;                /* slightly larger base text */
    padding: 0 10px;
  }

  h1, .logo-title {
    font-size: 1.8rem !important;      /* larger, more readable heading */
  }

  h2, h3, h4 {
    font-size: 1.3rem !important;
  }

  .access-box, .card, .queue-table {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .btn, button, input, select {
    font-size: 1.1rem !important;      /* easier tap targets */
    padding: 12px !important;
  }

  .form-control {
    font-size: 1.1rem !important;
    padding: 12px !important;
  }

  .queue-num {
    font-size: 1rem !important;
  }

  .song-title {
    font-size: 1.2rem !important;
  }

  .container, .access-box {
    padding: 1rem !important;
  }

  .btn-lg {
    font-size: 1.2rem !important;
    padding: 14px 16px !important;
  }
}




/* ----- NOW SINGING ----- */
.card.current {
  background-color: #2b2b3d;          /* same as queued background */
  color: #fff;                        /* white text */
  border: 2px solid #ffd700;          /* bright gold border */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); /* soft glow */
  position: relative;
}

/* Optional subtle pulse effect (keeps it alive visually) */
@keyframes goldPulse {
  0%   { box-shadow: 0 0 10px rgba(255,215,0,0.5); }
  50%  { box-shadow: 0 0 20px rgba(255,215,0,1); }
  100% { box-shadow: 0 0 10px rgba(255,215,0,0.5); }
}
.card.current {
  animation: goldPulse 2.5s infinite;
}


/* ----- QUEUED CARDS ----- */
.card.queued {
  background-color: #2b2b3d;
  color: #f0f0f0;
  border: 1px solid #444;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}

.card.queued .song-title {
  color: #ffffff;
  font-weight: 600;
}

/* ----- TEXT / NUMBERS ----- */
.song-title {
  font-size: 1.2rem;
}

.queue-num {
  font-size: 1rem;
  color: #bbb;
}

h1 {
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 576px) {
  .d-flex h1 {
    font-size: 1.3rem;
  }
  .d-flex a.btn {
    font-size: 0.8rem;
  }
}

.btn-warning {
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
}

@keyframes pulseYellow {
  0%,100% { color:#ffd700; }
  50% { color:#fff; }
}
#position.updated {
  animation: pulseYellow 1s ease;
}