:root {
  --text-color: #2D3748;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Fredoka', sans-serif;
  user-select: none;
  touch-action: manipulation;
}

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

#word-display {
  font-size: 20vw;
  color: white;
  text-shadow: 
    3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px  3px 0 #000,
    0px 10px 20px rgba(0,0,0,0.5);
  margin: 0;
  line-height: 1;
  text-align: center;
  word-wrap: break-word;
  padding: 0 5vw;
}

.word-pop {
  animation: wordPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes wordPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#instruction-text {
  position: absolute;
  bottom: 8vh;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2vw;
  font-weight: 600;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
  animation: pulse 2s infinite;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  #instruction-text {
    font-size: 4vw;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

#emoji-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}

.emoji {
  position: absolute;
  will-change: transform, opacity;
}

.emoji.anim-pop {
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.emoji.anim-spin {
  animation: spinIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.emoji.anim-float {
  animation: floatUp 3s ease-in-out both;
}

.emoji.anim-explode {
  animation: explode 1s ease-out both;
}

.emoji.fade-out {
  transition: opacity 0.5s ease-out;
  opacity: 0 !important;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes spinIn {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes floatUp {
  0% { transform: translateY(50vh) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-50vh) scale(1.5); opacity: 0; }
}

@keyframes explode {
  0% { transform: scale(0.1); opacity: 1; }
  50% { transform: scale(2); opacity: 1; }
  100% { transform: scale(3) rotate(45deg); opacity: 0; }
}

.word-fade-out {
  animation: wordFadeOut 0.5s ease-out forwards;
}

@keyframes wordFadeOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

#word-counter {
  position: absolute;
  bottom: 2vh;
  right: 2vw;
  color: rgba(255, 255, 255, 0.4);
  font-size: 2vw;
  font-weight: 500;
  pointer-events: none;
  z-index: 100;
}

@media (max-width: 768px) {
  #word-counter {
    font-size: 4vw;
  }
}

.scrolling-word {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  color: white;
  font-size: 80vh;
  font-weight: 700;
  pointer-events: none;
  z-index: 30;
  line-height: 1;
  text-shadow: 
    6px 6px 0 #000,
    -6px -6px 0 #000,
    6px -6px 0 #000,
    -6px 6px 0 #000,
    0px 20px 40px rgba(0,0,0,0.5);
  margin: 0;
  will-change: transform;
  transform: translate(-50%, -50%);
}