/* styles.css - layout + animated background */
:root{
  --game-width: 90vw;
  --game-height: 70vw;
  --max-size: 500px;
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:Arial, sans-serif;
  color:#fff;
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #00c6ff);
  background-size:400% 400%;
  animation:bgMove 10s ease infinite;
  -webkit-font-smoothing:antialiased;
}

@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

h1{margin:0; user-select:none; font-size:clamp(18px,4vw,32px)}

#gameArea{
  position:relative;
  width:var(--game-width);
  max-width:var(--max-size);
  height:var(--game-height);
  max-height:var(--max-size);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:4px solid transparent;
  padding:8px;
  box-shadow:0 6px 30px rgba(0,0,0,0.4) inset;
  animation:borderGlow 4s linear infinite;
}

@keyframes borderGlow{
  0%{border-color:#ff0}
  25%{border-color:#0ff}
  50%{border-color:#f0f}
  75%{border-color:#0f0}
  100%{border-color:#ff0}
}

#player{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  width:12%;
  aspect-ratio:1/1;
  background:radial-gradient(circle,#005bff,#00e5ff);
  border-radius:50%;
  box-shadow:0 0 18px rgba(0,229,255,0.6);
}

#ball{
  position:absolute;
  top:0;
  left:0;
  width:9%;
  aspect-ratio:1/1;
  background:radial-gradient(circle,#ff3b3b,#ffd23b);
  border-radius:50%;
  box-shadow:0 0 14px rgba(255,210,59,0.6);
}

#hud{display:flex;gap:12px;align-items:center;font-size:clamp(14px,3.5vw,20px);}
#score,#lives{background:rgba(0,0,0,0.25);padding:6px 10px;border-radius:8px}

#gameOverText{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(24px,8vw,48px);
  font-weight:800;
  text-align:center;
  color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,0.6);
  pointer-events:none;
  animation:flash 1.2s linear infinite;
  z-index:10;
}

@keyframes flash{
  0%{opacity:1;color:#ff0}
  50%{opacity:0.9;color:#f00}
  100%{opacity:1;color:#fff}
}

#restartBtn{
  position:absolute;
  top:60%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:10px 18px;
  font-weight:700;
  border-radius:10px;
  border:none;
  cursor:pointer;
  z-index:11;
  font-size:clamp(12px,4vw,18px);
}

.hidden{display:none}

/* responsive tweaks */
@media (max-width:420px){
  #player{width:14%}
  #ball{width:11%}
}