/* buttons.css — weerrd has no button shapes: every button on the home page
   and the play screen is just its word in flowing rainbow letters.

   HOME PAGE  the picked option in each row is full-bright and a bit bigger;
              the others are faded. Each row's rainbow flows at its own pace.
   PLAY       nooo · drop it · pop it, as big rainbow words under the
              letters (long-press to move or resize them — movable.js).

   Colors setting: Stagnant holds the rainbow still. Movement: Stagnant
   pauses it; calmer steps slow it (settings.js). */

@keyframes rainbowText {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* (Listing the picked state too beats the older base.css choice styles.) */
.choice, .choice[aria-pressed="true"], .primary, .playways-btn, .action {
  position: relative;
  background: linear-gradient(90deg, #ff5cd0, #ff9a5c, #ffd45c, #8dff7a,
                              #5cffd0, #5cb8ff, #b59cff, #ff5cd0);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 8px 4px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: rainbowText 6s linear infinite;
  transition: opacity 0.2s, scale 0.15s ease-out;
}
.choice span, .btn-label { color: inherit; -webkit-text-fill-color: inherit; }
.choice span { font-size: 12px; font-weight: 600; opacity: 0.85; }
.choice:hover, .playways-btn:hover { transform: none; opacity: 1; }
.choice:active, .primary:active, .playways-btn:active, .action:active { scale: 0.9; }


/* ================= PLAY ================= */
.action { height: auto; font-size: clamp(22px, 7vw, 30px); letter-spacing: 0.03em;
          padding: 10px 2px; white-space: nowrap; }
#clear-btn { animation-duration: 7s; animation-direction: reverse; }
#backspace-btn { animation-duration: 5.5s; }
#submit-btn { font-size: clamp(25px, 8vw, 34px); animation-duration: 4s; }


/* ================= HOME PAGE ================= */
.choice { font-size: 20px; }
.choice:not([aria-pressed="true"]) { opacity: 0.38; }
.choice[aria-pressed="true"] { opacity: 1; scale: 1.12; }
[data-group="source"] .choice { animation-duration: 7.5s; animation-direction: reverse; }
[data-group="drift"] .choice  { animation-duration: 5s; }
[data-group="letterCount"] .choice { animation-duration: 8.5s; animation-direction: reverse; }
.choice-row-4 .choice { font-size: 17px; letter-spacing: 0; }
.choice.choice-tight { font-size: 30px; padding: 4px 14px; min-width: 0; }
.playways-btn { font-size: 22px; padding: 6px 12px; letter-spacing: 0.08em; }
.primary { font-size: 44px; padding: 8px; letter-spacing: 0.06em; animation-duration: 4s; }


/* ================= SETTINGS ================= */
html[data-motion="still"] :is(.action, .choice, .primary, .playways-btn) { animation-play-state: paused; }
html[data-colors="calm"] :is(.action, .choice, .primary, .playways-btn) { animation: none; }