/* Hot Potato: the potato is the tap target. Background flashes hot when the music stops, purple in Silly Spud. */
:root {
  --accent: var(--hot-ink);
  --on-silly: #fff;
  --potato-dark: #9c6a33;
  --hot-soft: #ffe1d6;
  --silly-soft: #ece3ff;
  --pill-line: var(--potato-dark);
  --pill-on: var(--potato);
  --pill-on-fg: #2a1a08;
  --pill-focus: var(--hot);
}
@media (prefers-color-scheme: dark) {
  :root { --potato-dark: #a8763d; --hot-soft: #4a2219; --silly-soft: #2d2350; --on-silly: #121a2c; }
}
body.stopped { background: var(--hot-soft); }
body.switch, body.stopped.silly-mode { background: var(--silly-soft); }
.silly-mode h1 { color: var(--silly); }
.switch .status { color: var(--silly); font-size: 2.1rem; }

.potato-btn {
  border: 0; background: none; padding: 0; cursor: pointer; width: min(60vw, 250px); aspect-ratio: 1; max-width: 100%;
  border-radius: 50%;
}
.potato-btn:focus-visible { outline: 4px solid var(--hot); outline-offset: 6px; }
.potato-btn svg { width: 100%; height: 100%; display: block; }
.playing .potato-btn svg { animation: wobble var(--wob, .45s) ease-in-out infinite alternate; }
.stopped .potato-btn svg { animation: shake .08s linear 10; }
.switch .potato-btn svg { animation: spin .6s ease-in-out 1; }
@keyframes wobble { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.04); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.steam { opacity: 0; transition: opacity .2s; }
.stopped .steam { opacity: 1; }

.challenge {
  width: 100%; background: var(--card); border: 3px dashed var(--silly); border-radius: 18px;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.challenge .label { font-size: .75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silly); }
.challenge p { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.15; text-wrap: balance; }
.link-btn {
  font-family: var(--body); font-weight: 800; font-size: .95rem; background: none; border: 0;
  color: var(--silly); text-decoration: underline; cursor: pointer; padding: 4px 8px;
}
.link-btn:focus-visible { outline: 3px solid var(--silly); outline-offset: 2px; border-radius: 6px; }

.playing .main-btn { background: var(--muted); }
.seg button.silly-btn[aria-pressed="true"] { background: var(--silly); border-color: var(--silly); color: var(--on-silly); }
.mode-note { max-width: 34ch; }
@media (prefers-reduced-motion: reduce) {
  .playing .potato-btn svg, .stopped .potato-btn svg, .switch .potato-btn svg { animation: none; }
}