:root {
  --elmo-red: #E23636;
  --elmo-orange: #F4900C;
  --elmo-yellow: #FFD23F;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Fredoka', system-ui, sans-serif; }

.baloo { font-family: 'Baloo 2', 'Fredoka', cursive; }
.fredoka { font-family: 'Fredoka', sans-serif; }

/* Background */
.elmo-bg {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.5) 0%, transparent 40%),
    linear-gradient(160deg, #FFE66D 0%, #FFB347 45%, #FF8C42 100%);
}

/* Header */
.elmo-title {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5rem);
  color: var(--elmo-red);
  text-shadow: 4px 4px 0 #fff, 7px 7px 0 rgba(214,40,40,0.25);
  margin: 0.2rem 0;
  letter-spacing: -1px;
  animation: titlePop 0.8s cubic-bezier(.5,1.6,.5,1) both;
}
@keyframes titlePop {
  0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.tagline {
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: #B5170B;
  margin: 0.5rem 0 0;
  animation: fadeSlide 0.6s ease both;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.giggle-badge {
  display: inline-block;
  background: #fff;
  color: var(--elmo-red);
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(214,40,40,0.3);
  border: 3px solid var(--elmo-red);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

/* Avatar */
.elmo-avatar-wrap {
  position: relative;
  width: min(66vw, 260px);
  height: min(66vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: idleBounce 2.4s ease-in-out infinite;
}
@keyframes idleBounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
.elmo-avatar-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(var(--elmo-red), var(--elmo-orange), var(--elmo-yellow), var(--elmo-red));
  filter: blur(2px);
  opacity: 0.85;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.elmo-avatar-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 12px 30px rgba(180,20,10,0.35);
  z-index: 2;
}
.elmo-avatar-loading {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 50%;
  border: 8px solid var(--elmo-red);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
}
.elmo-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 6px solid #FFE0DB;
  border-top-color: var(--elmo-red);
  animation: spin 0.8s linear infinite;
}

/* Soundboard buttons */
.sound-btn {
  border: none;
  border-radius: 28px;
  padding: 1.4rem 1rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 8px 0 rgba(0,0,0,0.18), 0 10px 22px rgba(0,0,0,0.12);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  animation: popIn 0.5s cubic-bezier(.5,1.6,.5,1) both;
}
.sound-btn:hover { transform: translateY(-3px); }
.sound-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Chat */
.chat-panel {
  background: #fff;
  border-radius: 28px;
  border: 5px solid var(--elmo-red);
  box-shadow: 0 12px 30px rgba(180,20,10,0.2);
  overflow: hidden;
}
.chat-scroll {
  height: 340px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(180deg, #FFF7EC, #FFFFFF);
}
.chat-row { display: flex; align-items: flex-end; gap: 0.4rem; }
.elmo-mini {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--elmo-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.bubble-user {
  background: var(--elmo-yellow);
  color: #7a4a00;
  padding: 0.7rem 1rem;
  border-radius: 20px 20px 4px 20px;
  max-width: 78%;
  font-weight: 500;
  font-family: 'Fredoka', sans-serif;
}
.bubble-elmo {
  background: var(--elmo-red);
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: 20px 20px 20px 4px;
  max-width: 78%;
  font-weight: 500;
  font-family: 'Fredoka', sans-serif;
  animation: fadeSlide 0.3s ease both;
}
.dots { animation: blink 1s steps(3) infinite; }
@keyframes blink { 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #FFF3E0;
  border-top: 3px dashed var(--elmo-orange);
}
.chat-input {
  flex: 1;
  border: 3px solid var(--elmo-orange);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  outline: none;
}
.chat-input:focus { border-color: var(--elmo-red); }
.chat-send {
  background: var(--elmo-red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #a01a10;
  transition: transform 0.08s ease;
}
.chat-send:active { transform: translateY(3px); box-shadow: 0 1px 0 #a01a10; }
.chat-send:disabled { opacity: 0.6; }

/* Decorations */
.deco {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.7;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}
.deco1 { top: 12%; left: 6%; animation-delay: 0s; }
.deco2 { top: 22%; right: 8%; animation-delay: 1s; font-size: 2rem; }
.deco3 { top: 55%; left: 4%; animation-delay: 2s; }
.deco4 { top: 8%; right: 20%; animation-delay: 1.5s; font-size: 2rem; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* Floaters */
.floater-layer, .confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.floater {
  position: fixed;
  font-size: 1.6rem;
  animation: floatUp 1.4s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translate(0,0) rotate(0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), -160px) rotate(var(--rot)) scale(1.2); opacity: 0; }
}

/* Confetti */
.confetti {
  position: absolute;
  top: -20px;
  width: 12px; height: 16px;
  border-radius: 2px;
  animation: fall 2s linear forwards;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
}

/* Scrollbar */
.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--elmo-orange); border-radius: 999px; }