/* === Styles: start button + headline+buttons together + nonstop confetti + bright lyrics modal === */
:root{
  --bg1:#ff6b6b;
  --bg2:#ffd93d;
  --bg3:#6bcBef;
  --bg4:#b8f2e6;
  --text:#0b1021;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  --accent:#4f46e5;
  --modalBg1:#ffffff;
  --modalBg2:#e0e7ff; /* indigo-100 */
  --modalText:#0b1021;
  --modalBorder:#c7d2fe; /* indigo-200 */
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  overflow:hidden;
  background:#0b1021;
}

#gradient{
  position:fixed;
  inset:0;
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg1), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, var(--bg2), transparent 60%),
              radial-gradient(1000px 900px at 30% 80%, var(--bg3), transparent 60%),
              radial-gradient(800px 600px at 85% 85%, var(--bg4), transparent 60%);
  filter: saturate(1.2) brightness(1.06);
  animation: floatGradient 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes floatGradient{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-2%,0) scale(1.03); }
}

#confetti{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
}

main{
  position:relative;
  z-index:3;
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 4rem 1rem;
}

h1{
  font-size: clamp(2rem, 6vw + 1rem, 5rem);
  line-height:1.05;
  margin:0 0 1rem 0;
  color: var(--white);
  text-shadow: 0 2px 0 rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.35);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
h1.show{ opacity:1; transform: translateY(0); }

.hidden{ display:none; }

/* Start group: round button + side hint */
.start-group{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1rem;
  z-index:4;
}
.play{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ffffff, #ffe4ff);
  display: grid;
  place-items:center;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,255,255,0.04) inset;
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
  backdrop-filter: blur(6px);
  user-select: none;
}
.play:hover{ transform: scale(1.04); }
.play:active{ transform: scale(0.98); }

.hint{
  color:#fff; font-weight:800; letter-spacing:.3px;
  font-size: clamp(1rem, 1.4vw + .5rem, 1.6rem);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* Actions buttons under headline */
.actions{
  display:flex;
  gap:.75rem;
  flex-wrap: wrap;
  justify-content:center;
  opacity:0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.actions.show{ opacity:1; transform: translateY(0); }
.pill{
  -webkit-tap-highlight-color: transparent;
  border:0;
  background: linear-gradient(135deg, #ffffff, #ffe4ff);
  color:#1a1333;
  padding:.9rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor:pointer;
  transform: translateZ(0);
  transition: transform .12s ease;
  text-decoration:none;
}
.pill:hover{ transform: translateY(-2px) }
.pill:active{ transform: translateY(0) scale(0.98) }

footer{
  position:fixed;
  bottom:.5rem; left:0; right:0;
  text-align:center;
  color:#fff;
  opacity:.8;
  z-index:3;
}

/* Sparkle overlay for extra paillettes (CSS only) */
body::after{
  content:"";
  position:fixed; inset:0;
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 55%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.4) 0 1px, transparent 2px);
  background-size: 250px 250px, 300px 300px, 220px 220px, 280px 280px;
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;
  animation: twinkle 5s linear infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.6; transform:translateY(0) }
  50%{ opacity:1; transform:translateY(-1%) }
}

/* Modal lyrics - light & colorful */
.modal{ 
  position: fixed; inset: 0; display:none; z-index: 10;
}
.modal.show{ display:block; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.modal-card{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(860px, 94vw);
  max-height: 82vh;
  background: linear-gradient(180deg, var(--modalBg1), var(--modalBg2));
  color: var(--modalText);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 0 0 2px var(--modalBorder);
  padding: 1rem 1rem 1.2rem;
  display:flex; flex-direction:column;
}
.modal-card h2{
  margin: .25rem 2.25rem .25rem .25rem;
}
.modal-close{
  position:absolute; right:.6rem; top:.6rem;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor:pointer;
  font-size: 20px; font-weight: 800;
  background: #eef2ff;
  color: #1f2937;
  display:grid; place-items:center;
  box-shadow: var(--shadow);
}
.modal-close:hover{ filter: brightness(0.95); }
.lyrics{
  margin: .25rem 0 0 0;
  white-space: pre-wrap;
  overflow:auto;
  padding: .9rem 1rem;
  line-height: 1.65;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #e5e7eb;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #gradient{ animation: none }
  body::after{ animation: none }
}