/* --------------------------------------------------
   GLOBAL RESET + VARIABLES
-------------------------------------------------- */

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

:root {
  /* Day mode colors */
  --bg-day: linear-gradient(#b3e5ff, #e8f7ff);
  --machine-body-day: #ff4d4d;
  --machine-dome-day: rgba(255, 255, 255, 0.6);
  --outline: #000;

  /* Night mode colors */
  --bg-night: linear-gradient(#0a0f33, #1a1f4d);
  --machine-body-night: #992222;
  --machine-dome-night: rgba(255, 255, 255, 0.25);

  /* Gumball colors (examples) */
  --g-red: #ff4d4d;
  --g-blue: #4da6ff;
  --g-green: #4dff88;
  --g-yellow: #ffe44d;
  --g-purple: #b84dff;
  --g-orange: #ff944d;
}

/* --------------------------------------------------
   ROOT APP CONTAINER
-------------------------------------------------- */

#gumball-app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  transition: background 0.4s ease;
}

#gumball-app.mode-day {
  background: var(--bg-day);
}

#gumball-app.mode-night {
  background: var(--bg-night);
}

/* --------------------------------------------------
   UI TOP (MODE TOGGLE)
-------------------------------------------------- */

.ui-top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.mode-toggle {
  width: 50px;
  height: 50px;
  border: 3px solid var(--outline);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* --------------------------------------------------
   MACHINE WRAPPER
-------------------------------------------------- */

.machine-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -20px;
}

/* --------------------------------------------------
   MACHINE (DOME + BODY)
-------------------------------------------------- */

#gumball-machine {
  width: 300px;
  position: relative;
}

/* DOME */
.machine-dome {
  width: 100%;
  height: 200px;
  border-radius: 50% 50% 40% 40%;
  background: var(--machine-dome-day);
  border: 4px solid var(--outline);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

.mode-night .machine-dome {
  background: var(--machine-dome-night);
}

/* GUMBALL GROUP INSIDE DOME */
.gumball-group {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* --------------------------------------------------
   MACHINE BODY
-------------------------------------------------- */

.machine-body {
  width: 100%;
  height: 180px;
  background: var(--machine-body-day);
  border: 4px solid var(--outline);
  border-radius: 20px;
  position: relative;
  transition: background 0.4s ease;
}

.mode-night .machine-body {
  background: var(--machine-body-night);
}

/* Coin slot */
.coin-slot {
  width: 40px;
  height: 10px;
  background: #333;
  border: 3px solid var(--outline);
  border-radius: 5px;
  position: absolute;
  top: 20px;
  left: calc(50% - 20px);
}

/* Crank */
.crank {
  width: 40px;
  height: 40px;
  border: 4px solid var(--outline);
  border-radius: 50%;
  background: #ddd;
  position: absolute;
  right: -20px;
  top: 60px;
}

/* Chute */
.chute {
  width: 80px;
  height: 40px;
  background: #222;
  border: 4px solid var(--outline);
  border-radius: 0 0 20px 20px;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 40px);
}

/* --------------------------------------------------
   DISPLAY BUBBLE
-------------------------------------------------- */

.display-bubble {
  width: 120px;
  height: 120px;
  margin-top: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 4px solid var(--outline);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* --------------------------------------------------
   UI BOTTOM (COIN + STATUS)
-------------------------------------------------- */

.ui-bottom {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coin-area {
  margin-bottom: 10px;
}

.coin {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: silver;
  border: 4px solid var(--outline);
  cursor: pointer;
}

/* Status message */
.status-message {
  margin-top: 10px;
  font-size: 18px;
  color: #000;
}

/* --------------------------------------------------
   GUMBALLS (BOTH INSIDE DOME + DISPENSED)
-------------------------------------------------- */

.gumball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--outline);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gumball-face {
  width: 60%;
  height: 60%;
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 768px) {
  #gumball-machine {
    transform: scale(0.8);
  }
}

/* --------------------------------------------------
   COIN ANIMATIONS
-------------------------------------------------- */

@keyframes coin-wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.coin.wiggle {
  animation: coin-wiggle 0.4s ease-out;
}

@keyframes coin-insert {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  60% { transform: translateY(-40px) scale(0.9); }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

.coin.insert {
  animation: coin-insert 0.6s ease-out forwards;
}

/* --------------------------------------------------
   CRANK SPIN
-------------------------------------------------- */

@keyframes crank-spin {
  0% { transform: rotate(0deg); }
  80% { transform: rotate(380deg); }
  100% { transform: rotate(360deg); }
}

.crank.spin {
  animation: crank-spin 0.8s cubic-bezier(.25,.8,.25,1);
  transform-origin: center;
}

/* --------------------------------------------------
   MACHINE SHAKE
-------------------------------------------------- */

@keyframes machine-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

#gumball-machine.shake {
  animation: machine-shake 0.5s ease-out;
}

/* --------------------------------------------------
   DOME SWIRL (GUMBALL GROUP)
-------------------------------------------------- */

@keyframes swirl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gumball-group.swirl {
  animation: swirl 0.8s linear;
  transform-origin: center;
}

/* --------------------------------------------------
   GUMBALL DROP + ROLL + BOUNCE
-------------------------------------------------- */

@keyframes gumball-drop {
  0% { transform: translateY(-80px); }
  100% { transform: translateY(0); }
}

@keyframes gumball-roll {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(0); }
}

@keyframes gumball-bounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.gumball.drop {
  animation: gumball-drop 0.35s ease-out forwards;
}

.gumball.roll {
  animation: gumball-roll 0.35s ease-out forwards;
}

.gumball.bounce {
  animation: gumball-bounce 0.45s ease-out;
}

/* --------------------------------------------------
   IDLE BOB + BLINK
-------------------------------------------------- */

@keyframes idle-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.gumball.idle {
  animation: idle-bob 3s ease-in-out infinite;
}

@keyframes blink {
  0%, 90%, 100% { opacity: 1; }
  92%, 96% { opacity: 0; }
}

.gumball-face.blink {
  animation: blink 6s infinite;
}

@keyframes dome-empty {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(80px); opacity: 0; }
}

.gumball.empty-out {
  animation: dome-empty 0.5s ease-in forwards;
}

@keyframes rain-in {
  0% { transform: translateY(-120px) scale(0.6); opacity: 0; }
  80% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.gumball.rain-in {
  animation: rain-in 0.6s ease-out forwards;
}

.refill-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  padding: 12px 24px;
  background: #fff;
  border: 4px solid #000;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
}

@keyframes banner-pop {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  40% { transform: translateX(-50%) scale(1.1); opacity: 1; }
  60% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.8); opacity: 0; }
}

.refill-banner.show {
  animation: banner-pop 1.6s ease-out forwards;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  background: red;
  opacity: 0;
  border-radius: 2px;
  pointer-events: none;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}