/* styles.css - look & feel morbido e colorato */
:root{
  --bg-1: #f6f8ff;
  --panel: rgba(255,255,255,0.85);
  --accent-1: #a0e9d8;
  --accent-2: #ffd1dc;
  --accent-3: #c3b8ff;
  --muted: #6b6b7a;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 6px 18px rgba(20,20,45,0.08);
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{
  background: radial-gradient(circle at 10% 10%, #f0f7ff 0%, var(--bg-1) 40%, #fff 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));backdrop-filter: blur(6px);
  box-shadow:var(--shadow);
}
.topbar h1{margin:0;font-size:20px;letter-spacing:0.6px}
.controls button{margin-left:8px;padding:8px 10px;border-radius:10px;border: none;background:linear-gradient(180deg,#fff,#f0f3ff);cursor:pointer}
.main-area{display:flex;gap:12px;height:calc(100% - 120px);padding:16px}
#gameCanvas{flex:1;border-radius:14px;background:linear-gradient(180deg, #edf8ff, #fff);box-shadow:var(--shadow);display:block;width:100%;height:100%;}
.hud{width:260px;background:var(--panel);border-radius:12px;padding:14px;box-shadow:var(--shadow);backdrop-filter: blur(6px)}
.stat{margin-bottom:12px;padding:10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55))}
.stat .label{font-size:12px;color:var(--muted)}
.stat div[id]{font-size:22px;font-weight:600}
.actions label{display:block;margin-bottom:6px;color:var(--muted)}
.actions select{width:100%;padding:8px;border-radius:8px;border:none;background:#fff;margin-bottom:10px}
#overlay{position:fixed;inset:0;background:rgba(6,8,20,0.45);display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}
#overlayCard{background:linear-gradient(180deg,#fff,#f9fbff);padding:20px;border-radius:12px;min-width:320px;box-shadow:0 14px 40px rgba(10,10,30,0.3)}
#leaderboardList{max-height:320px;overflow:auto;margin:10px 0;padding:6px;background:rgba(250,250,255,0.6);border-radius:8px}
footer.footer{padding:8px 18px;text-align:center;color:var(--muted);font-size:13px}
button{font-family:inherit}
input#playerName{width:100%;padding:8px;border-radius:8px;border:none;margin-bottom:8px}
#submit-area button{width:100%;padding:8px;border-radius:8px;border:none;background:linear-gradient(90deg,#a0e9d8,#c3b8ff);color:#0a0a1a;font-weight:700}
@media (max-width:900px){
  .main-area{flex-direction:column}
  .hud{width:100%}
}
/* Effetti glowing per power-up */
.orb-rainbow {
  animation: rainbowGlow 1.5s infinite alternate;
}
@keyframes rainbowGlow {
  from { filter: drop-shadow(0 0 6px rgba(255,0,200,0.6)); }
  to { filter: drop-shadow(0 0 16px rgba(0,200,255,0.9)); }
}

.orb-magnet {
  animation: pulseGreen 1.2s infinite alternate;
}
@keyframes pulseGreen {
  from { filter: drop-shadow(0 0 6px rgba(0,255,100,0.6)); }
  to { filter: drop-shadow(0 0 14px rgba(0,255,100,0.9)); }
}

.orb-slow {
  animation: pulseBlue 1.2s infinite alternate;
}
@keyframes pulseBlue {
  from { filter: drop-shadow(0 0 6px rgba(100,200,255,0.6)); }
  to { filter: drop-shadow(0 0 14px rgba(100,200,255,0.9)); }
}