* {
  box-sizing: border-box;
}

:root {
  --bg-deep: #120b2e;
  --bg-mid: #241454;
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-fill: rgba(255, 255, 255, 0.08);
  --accent: #ff2d95;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: "Comic Sans MS", "Trebuchet MS", "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at top, var(--bg-mid) 0%, var(--bg-deep) 60%, #06031a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Starfield ---------- */
.stars, .stars-2 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 10px, #fff, transparent),
    radial-gradient(2px 2px at 140px 90px, #fff, transparent),
    radial-gradient(1px 1px at 60px 140px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 170px 40px, #fff, transparent),
    radial-gradient(1px 1px at 110px 160px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10px 180px, #fff, transparent);
  background-size: 200px 200px;
  opacity: 0.7;
  animation: twinkle 5s ease-in-out infinite alternate;
}

.stars-2 {
  background-size: 260px 260px;
  background-position: 40px 60px;
  opacity: 0.4;
  animation-duration: 7s;
  animation-direction: alternate-reverse;
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 0.85; }
}

/* ---------- Login screen ---------- */
#login-screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--glass-fill);
  border: 2px solid var(--glass-border);
  backdrop-filter: blur(6px);
  border-radius: 28px;
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 45, 149, 0.25);
}

.login-emoji {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  background: linear-gradient(90deg, #ff2d95, #00e5ff, #c6ff00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  opacity: 0.85;
  margin-bottom: 24px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form label {
  font-size: 1.05rem;
}

.login-form input {
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.9);
  color: #241454;
  font-size: 1.1rem;
  text-align: center;
  font-family: inherit;
}

.login-form input:focus {
  outline: 3px solid #00e5ff;
}

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: 18px;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.95);
}

.btn-primary {
  background: linear-gradient(135deg, #ff2d95, #d500f9);
  color: #fff;
  box-shadow: 0 6px 0 #8e00b8, 0 8px 18px rgba(213, 0, 249, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 4px 0 #8e00b8, 0 6px 14px rgba(213, 0, 249, 0.5);
  transform: translateY(2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid var(--glass-border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
}

.icon-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--glass-border);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  cursor: pointer;
  color: #fff;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------- Game screen ---------- */
#game-screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

.player-badge {
  background: var(--glass-fill);
  border: 2px solid var(--glass-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
}

.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 30px;
  gap: 24px;
}

.level-title {
  font-size: 1.8rem;
  text-align: center;
  margin: 0;
  text-shadow: 0 0 12px rgba(255, 45, 149, 0.7);
}

/* ---------- Tubes ---------- */
.loading-msg {
  font-size: 1.2rem;
  opacity: 0.85;
  animation: twinkle 1s ease-in-out infinite alternate;
}

.tubes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  max-width: 900px;
}

.tube {
  --tube-w: 76px;
  --ball-size: 58px;
  width: var(--tube-w);
  height: calc(var(--ball-size) * 4 + 22px);
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-top: none;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(120, 190, 255, 0.18));
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding: 8px 6px;
  gap: 4px;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.tube::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 14px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.08);
}

.tube.selectable-target {
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.15),
    0 0 22px 4px rgba(0, 229, 255, 0.6);
}

.tube.selected-tube {
  transform: translateY(-4px);
}

.ball {
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    inset -6px -8px 10px rgba(0, 0, 0, 0.35),
    inset 4px 6px 8px rgba(255, 255, 255, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.4);
  position: relative;
}

.ball.selected {
  transform: translateY(-16px);
  filter: brightness(1.15);
}

.ball.shake {
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateY(-16px) translateX(0); }
  25% { transform: translateY(-16px) translateX(-6px); }
  75% { transform: translateY(-16px) translateX(6px); }
}

.ball-0 { background: radial-gradient(circle at 35% 30%, #ffb3d9, #ff2d95 60%, #b3006b); }
.ball-1 { background: radial-gradient(circle at 35% 30%, #b3f5ff, #00e5ff 60%, #007a8c); }
.ball-2 { background: radial-gradient(circle at 35% 30%, #eaffb3, #c6ff00 60%, #6e8a00); }
.ball-3 { background: radial-gradient(circle at 35% 30%, #fff6b3, #ffea00 60%, #8a7a00); }
.ball-4 { background: radial-gradient(circle at 35% 30%, #ffd6b3, #ff9100 60%, #8a4700); }
.ball-5 { background: radial-gradient(circle at 35% 30%, #f0b3ff, #d500f9 60%, #6a007c); }
.ball-6 { background: radial-gradient(circle at 35% 30%, #ffb3b3, #ff1744 60%, #8a0016); }
.ball-7 { background: radial-gradient(circle at 35% 30%, #b3c6ff, #2979ff 60%, #003a8a); }
.ball-8 { background: radial-gradient(circle at 35% 30%, #b3ffd9, #00e676 60%, #007a3d); }
.ball-9 { background: radial-gradient(circle at 35% 30%, #d9b3ff, #7c4dff 60%, #3a0080); }

/* ---------- Flying ball (FLIP animation clone) ---------- */
.flying-ball {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  box-shadow:
    inset -6px -8px 10px rgba(0, 0, 0, 0.35),
    inset 4px 6px 8px rgba(255, 255, 255, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Controls ---------- */
.controls {
  display: flex;
  gap: 16px;
}

/* ---------- Win overlay ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 3, 26, 0.75);
  backdrop-filter: blur(3px);
}

.overlay.hidden {
  display: none;
}

.win-card {
  position: relative;
  z-index: 2;
  background: var(--glass-fill);
  border: 2px solid var(--glass-border);
  border-radius: 28px;
  padding: 36px 30px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 0 50px rgba(255, 45, 149, 0.5);
}

.win-card h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

#confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  opacity: 0.9;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(540deg);
    opacity: 0.9;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .tube {
    --tube-w: 58px;
    --ball-size: 44px;
  }
  .tubes-container {
    gap: 14px;
  }
  .level-title {
    font-size: 1.4rem;
  }
}