* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: "Impact", "Arial Black", sans-serif;
  background: linear-gradient(135deg, #1a0033 0%, #3d0080 50%, #ff006e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Decorative corner emojis */
body::before {
  content: "🍹";
  position: fixed;
  top: -20px;
  left: -20px;
  font-size: 140px;
  opacity: 0.18;
  transform: rotate(-15deg);
  pointer-events: none;
}
body::after {
  content: "🌴";
  position: fixed;
  bottom: -20px;
  right: -20px;
  font-size: 140px;
  opacity: 0.22;
  transform: rotate(15deg);
  pointer-events: none;
}

#app { text-align: center; position: relative; z-index: 1; }

.label {
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: 0.3em;
  color: #ffe600;
  text-shadow: 0 0 12px #ffe600, 0 0 24px #ffaa00;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.timer {
  font-size: clamp(72px, 18vw, 180px);
  font-weight: 900;
  line-height: 1;
  color: #00ffd1;
  text-shadow: 0 0 20px #00ffd1, 0 0 40px #00ffd1, 0 0 8px #fff;
  letter-spacing: 0.02em;
}

.sub {
  margin-top: 18px;
  font-size: clamp(16px, 2vw, 22px);
  color: #ff66cc;
  text-shadow: 0 0 10px #ff006e;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Phase visibility */
.party-screen { display: none; }
#app[data-phase="PARTY"] .countdown-screen { display: none; }
#app[data-phase="PARTY"] .party-screen { display: block; }

/* Party text */
.party-text {
  font-size: clamp(48px, 10vw, 110px);
  color: #ffe600;
  text-shadow: 0 0 12px #ffe600, 0 0 24px #ffaa00;
  animation: pulse 1s ease-in-out infinite, hue 3s linear infinite;
  margin-bottom: 32px;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes hue {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(60deg); }
}

/* Margarita glass */
.margarita { position: relative; width: 200px; margin: 0 auto; height: 220px; }
.glass {
  position: relative;
  width: 0; height: 0;
  margin: 0 auto;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 140px solid rgba(255, 255, 255, 0.15);
}
.glass::after {
  content: "";
  position: absolute;
  top: 140px; left: -4px;
  width: 8px; height: 60px;
  background: rgba(255, 255, 255, 0.2);
}
.glass::before {
  content: "";
  position: absolute;
  top: 196px; left: -30px;
  width: 60px; height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}
.liquid {
  position: absolute;
  top: 0; left: -100px;
  width: 200px; height: 0;
  background: linear-gradient(180deg, #c8ff00 0%, #84cc16 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: pour 2s ease-out forwards;
}
@keyframes pour { 0% { height: 0; } 100% { height: 130px; } }
.rim {
  position: absolute;
  top: -8px; left: -110px;
  width: 220px; height: 8px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.lime {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  opacity: 0;
  animation: drop 0.5s ease-in 1.8s forwards;
}
@keyframes drop {
  0% { opacity: 0; transform: translate(-50%, -40px) rotate(-30deg); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
}

/* Not-ready-yet prompt */
.ready-prompt {
  position: fixed;
  bottom: 24px; right: 24px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 2px solid #00ffd1;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 255, 209, 0.5);
  animation: slide-in 0.4s ease-out;
}
#app[data-phase="PARTY"] .ready-prompt { display: inline-flex; }
.ready-prompt:hover, .ready-prompt:focus-visible {
  background: rgba(0, 255, 209, 0.2);
  outline: 2px solid #00ffd1;
  outline-offset: 2px;
}
@keyframes slide-in {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 3; }
.ring-fg {
  fill: none;
  stroke: #00ffd1;
  stroke-width: 3;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 0;
  animation: drain 10s linear forwards;
}
@keyframes drain {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100.5; }
}
.ready-prompt-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}
.ready-prompt-text strong { font-size: 14px; font-weight: 700; }
.ready-prompt-text small { font-size: 12px; opacity: 0.8; }

/* Reduced motion: disable pulses, hue rotation, pour, slide, drain */
@media (prefers-reduced-motion: reduce) {
  .party-text { animation: none; }
  .liquid { animation: none; height: 130px; }
  .lime { animation: none; opacity: 1; transform: translateX(-50%); }
  .ready-prompt { animation: none; }
  .ring-fg { animation: none; stroke-dashoffset: 0; }
  body::before, body::after { transform: none; }
}