body { margin: 0; font-family: sans-serif; background: #fafafa; overflow: hidden; }
h3 { margin: 0; padding: 0.5em; }
details { 
  position: absolute; 
  bottom: 10px; 
  right: 10px; 
  z-index: 100; 
  background: rgba(240, 240, 240, 0.95); 
  padding: 0.5em; 
  border-radius: 6px; 
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#controls { display: flex; gap: 1em; flex-wrap: wrap; }
textarea { width: 250px; height: 120px; font-size: 0.8em; }
#word-container { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  overflow: hidden; 
  background: white; 
}
span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  padding: clamp(6px, 1.2vw, 8px) clamp(8px, 1.8vw, 12px);
  border-radius: clamp(2px, 0.5vw, 4px);
  transition: transform 1s ease;
  cursor: grab;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
span.dragging { cursor: grabbing; transition: none; z-index: 10; }
.verb { background: #FF6B9D; color: white; }
.noun { background: #00D4AA; color: white; }
.adjective { background: #FFD93D; color: #333; }
.outcome { background: #6BCF7F; color: white; }
button { margin: 0.5em; padding: 8px 16px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: white; }
button:hover { background: #f0f0f0; }
#generate {
  font-size: 1.3em;
  padding: 16px 32px;
  background: #6B46C1;
  color: white;
  border: none;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
#generate:hover {
  background: #7C3AED;
  transform: translateY(-2px);
}
#button-group { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  z-index: 100; 
  display: flex; 
  gap: 0.5em; 
  flex-wrap: wrap; 
}
.confetti {
  position: fixed;
  width: 8px; 
  height: 8px;
  opacity: 1;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
footer {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 100;
  font-size: 0.7em;
}
footer a {
  color: #666;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
}
footer a:hover {
  opacity: 1;
}