/* ============ OG Classic Playlist v2 — minimal player + full-screen canvases ============ */

:root {
  --cream: #f4e6c8;
  --ink: #241246;
  --brown-ink: #2a1810;

  /* OG Classic Playlist palette */
  --og-crimson: #a52a2a;
  --og-crimson-trim: #7a1f1f;
  --og-earth: #c9a06a;
  --og-earth-dark: #8a6a3f;
  --og-road: #3a2b22;
  --og-teal: #1f6b6b;
  --og-teal-deep: #123f3f;
  --og-yellow: #e8b93b;

  /* Feel The Vibe palette */
  --vibe-bg-top: #241246;
  --vibe-bg-bottom: #0a0614;
  --vibe-orange: #ff8a3d;
  --vibe-pink: #ff3da0;
  --vibe-purple: #8b3dff;
  --vibe-teal: #3de0ff;

  --font-display: 'Alfa Slab One', 'Georgia', serif;
  --font-body: 'Baloo 2', 'Poppins', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--brown-ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============ Screens ============ */

.screen {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: none;
}

.screen.active {
  display: block;
}

/* ============ Mode select screen ============ */

#mode-select-screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 3rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(165, 42, 42, 0.10), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(139, 61, 255, 0.10), transparent 50%);
}

.site-header {
  text-align: center;
  margin-bottom: 3rem;
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--og-crimson);
  text-shadow: 3px 3px 0 var(--og-yellow), 6px 6px 0 rgba(42, 24, 16, 0.15);
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
}

.site-tagline {
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: var(--brown-ink);
  font-weight: 600;
  margin: 0;
  opacity: 0.75;
}

.mode-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 240px;
  padding: 2rem 1.25rem;
  border-radius: 20px;
  border: 3px solid var(--brown-ink);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 5px 5px 0 rgba(42, 24, 16, 0.25);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mode-btn:hover, .mode-btn:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 rgba(42, 24, 16, 0.25);
}

.mode-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 rgba(42, 24, 16, 0.25);
}

.mode-btn-swatch {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid var(--brown-ink);
}

.mode-btn-swatch--og {
  background: radial-gradient(circle at 35% 30%, var(--og-yellow), var(--og-crimson) 60%, var(--og-crimson-trim));
}

.mode-btn-swatch--vibe {
  background: radial-gradient(circle at 35% 30%, var(--vibe-teal), var(--vibe-purple) 55%, var(--vibe-bg-bottom));
}

.mode-btn-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brown-ink);
  text-align: center;
  line-height: 1.3;
}

.site-footer {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--brown-ink);
  opacity: 0.65;
}

/* ============ Player screen ============ */

#player-screen.active {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.mode-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.ogscene-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- OG Classic Playlist scene colors ---- */
.ogscene-sun { fill: #ffd77a; opacity: 0.55; }
.ogscene-wall { fill: var(--og-crimson); }
.ogscene-wall-trim { fill: var(--og-crimson-trim); }
.ogscene-signage {
  font-family: 'Noto Sans Devanagari', var(--font-body);
  font-weight: 700;
  font-size: 110px;
  fill: var(--cream);
  opacity: 0.92;
}
.ogscene-ground { fill: var(--og-earth); }
.ogscene-road { fill: var(--og-road); }
.ogscene-road-line { stroke: var(--og-earth); stroke-width: 4; stroke-dasharray: 22 18; opacity: 0.5; }

.ogscene-leaf { fill: var(--og-teal); }
.ogscene-leaf--alt { fill: var(--og-teal-deep); }
.ogscene-leaf-group { transform-origin: bottom center; animation: ogscene-sway 6s ease-in-out infinite; }
.ogscene-sway-alt { animation-name: ogscene-sway-alt; animation-duration: 7s; }

@keyframes ogscene-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes ogscene-sway-alt {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
}

.ogscene-bus-body { fill: var(--og-teal); stroke: var(--brown-ink); stroke-width: 3; }
.ogscene-bus-window { fill: #cfe8e6; stroke: var(--brown-ink); stroke-width: 2; }
.ogscene-bus-stripe { fill: var(--og-yellow); }

.ogscene-figure-head { fill: #4a2f1f; }
.ogscene-figure-body { fill: #6b3f2a; }
.ogscene-figure-body--alt { fill: #5a3420; }
.ogscene-figure-body--barber { fill: var(--og-teal-deep); }
.ogscene-scissors-arm { stroke: #4a2f1f; stroke-width: 5; stroke-linecap: round; }

.ogscene-rickshaw-body { fill: var(--og-yellow); stroke: var(--brown-ink); stroke-width: 3; }
.ogscene-rickshaw-window { fill: #cfe8e6; stroke: var(--brown-ink); stroke-width: 2; }
.ogscene-rickshaw-skirt { fill: var(--brown-ink); }
.ogscene-rickshaw-pole { fill: var(--brown-ink); }

.ogscene-wheel { fill: var(--brown-ink); }

.ogscene-chair-seat, .ogscene-chair-back, .ogscene-chair-arm { fill: var(--og-teal); stroke: var(--brown-ink); stroke-width: 2; }
.ogscene-chair-leg { fill: var(--brown-ink); }

/* ---- Feel The Vibe canvas ---- */
#canvas-feel-the-vibe {
  background: linear-gradient(180deg, var(--vibe-bg-top), var(--vibe-bg-bottom));
}

/* ============ Floating UI over the canvas ============ */

.back-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 5;
  border: none;
  background: rgba(10, 6, 20, 0.45);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.back-btn:hover { background: rgba(10, 6, 20, 0.65); }

.player-empty-state {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  color: var(--cream);
  background: rgba(10, 6, 20, 0.55);
}

.player-empty-state-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0;
}

.player-empty-state-hint {
  font-size: 0.95rem;
  opacity: 0.85;
  margin: 0;
}

.player-empty-state-hint code {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

.player-card {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 4;
  width: min(92%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: 20px;
  background: rgba(10, 6, 20, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  color: var(--cream);
  text-align: center;
}

#now-playing-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.3;
}

#now-playing-artist {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.75;
  margin: 0;
}

.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.time-label {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.75;
  min-width: 2.4em;
}

.progress-bar {
  flex: 1;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--vibe-teal) var(--fill, 0%), rgba(255, 255, 255, 0.2) 0%);
  cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.progress-bar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.12s ease;
}

.control-btn:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.control-btn:active { transform: translateY(0); }

.control-btn--main {
  width: 58px;
  height: 58px;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.16);
}

/* Hidden YouTube player: kept in-DOM (not display:none) so the IFrame API stays healthy */
.yt-hidden {
  position: fixed;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  bottom: 0;
  left: 0;
}

@media (max-width: 480px) {
  .player-card { padding: 1.25rem 1.25rem 1.5rem; bottom: 1.5rem; }
}