*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #FFF7EC;
  --text: #3D2C2E;
  --text-muted: #8B7E80;
  --card: #ffffff;
  --accent-red: #FF6B6B;
  --accent-teal: #4ECDC4;
  --accent-yellow: #FFD93D;
  --accent-purple: #6C5CE7;
  --accent-orange: #FF9F43;
  --shadow-sm: 0 4px 12px rgba(61, 44, 46, 0.08);
  --shadow-md: 0 8px 28px rgba(61, 44, 46, 0.12);
  --radius: 20px;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* blobs */
.blob { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.2; z-index: 0; animation: blobFloat 14s ease-in-out infinite alternate; pointer-events: none; }
.blob-1 { width: 380px; height: 380px; background: var(--accent-orange); top: -140px; left: -80px; }
.blob-2 { width: 340px; height: 340px; background: var(--accent-purple); bottom: -100px; right: -60px; animation-delay: -5s; }
.blob-3 { width: 280px; height: 280px; background: var(--accent-teal); top: 35%; left: 55%; animation-delay: -9s; }
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -32px) scale(1.06); }
}

/* top bar */
.top-bar { position: relative; z-index: 10; padding: 12px 20px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s;
}
.back-btn:hover { background: rgba(255,255,255,0.9); color: var(--text); }

/* game wrapper */
.game-wrapper {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px 16px;
  max-width: 600px; margin: 0 auto; width: 100%;
}

/* header */
.game-header { text-align: center; margin-bottom: 8px; animation: fadeDown 0.5s ease both; }
.game-header h1 {
  font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.emoji-bounce {
  display: inline-block; -webkit-text-fill-color: initial;
  animation: emojiBounce 2s ease-in-out infinite;
}
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-6px) rotate(-8deg); }
  75%  { transform: translateY(-3px) rotate(6deg); }
}
.subtitle { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ball counter */
.ball-counter {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px;
  animation: fadeDown 0.5s 0.1s ease both;
}
.counter-num {
  font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: 1.8rem; color: var(--accent-purple);
  transition: transform 0.2s;
}
.counter-num.pop { animation: counterPop 0.3s ease; }
@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.counter-label {
  font-weight: 700; font-size: 0.9rem; color: var(--text-muted);
}

/* arena */
.arena {
  flex: 1;
  width: 100%;
  min-height: 280px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  margin-bottom: 14px;
  animation: fadeDown 0.5s 0.2s ease both;
  border: 2px solid rgba(0,0,0,0.04);
}

.arena-hint {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Baloo 2', cursive; font-size: 1.3rem; font-weight: 700;
  color: var(--text-muted); opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s;
}
.arena-hint.hidden { opacity: 0; }

/* balls */
.ball {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.10);
  transition: none;
}
.ball::after {
  content: '';
  position: absolute;
  top: 15%; left: 20%;
  width: 30%; height: 25%;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: rotate(-30deg);
}
.ball.spawn {
  animation: ballSpawn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ballSpawn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* buttons */
.actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  animation: fadeDown 0.5s 0.35s ease both;
}
.btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem;
  border: none; border-radius: 16px; padding: 12px 22px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, opacity 0.3s;
}
.btn:active { transform: scale(0.93); }
.btn:disabled { opacity: 0.35; pointer-events: none; }
.btn-icon { font-size: 1.1rem; display: inline-block; }

.btn-play {
  background: linear-gradient(135deg, #2ECC71, #27ae60);
  color: #fff; box-shadow: 0 4px 16px rgba(46,204,113,0.35);
}
.btn-play:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(46,204,113,0.45); transform: translateY(-2px); }
.btn-play.active {
  background: linear-gradient(135deg, #27ae60, #1e8449);
}

.btn-stop {
  background: linear-gradient(135deg, var(--accent-orange), #e67e22);
  color: #fff; box-shadow: 0 4px 16px rgba(255,159,67,0.35);
}
.btn-stop:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(255,159,67,0.45); transform: translateY(-2px); }

.btn-reset { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-reset:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-2px); }

@media (max-width: 400px) {
  .arena { min-height: 220px; }
  .btn { padding: 10px 16px; font-size: 0.88rem; }
}