.ws-btn { min-height: 72px; padding: 0 28px; border-radius: 999px; border: 4px solid #fff; background: var(--barn); color: #fff; font-weight: 900; font-size: 26px; box-shadow: var(--shadow); cursor: pointer; }
.ws-btn:active { transform: translateY(2px); }
.ws-btn--soft { background: var(--straw); color: var(--ink); font-size: 22px; }
.ws-btn--green { background: var(--green); }
.ws-center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ws-speaker { width: 150px; height: 150px; border-radius: 50%; border: 6px solid #fff; background: var(--straw); font-size: 74px; box-shadow: var(--shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ws-speaker.is-playing { animation: ws-pulse .6s ease-in-out infinite alternate; }
@keyframes ws-pulse { to { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255, 207, 74, .45), var(--shadow); } }
.ws-prompt { font-size: clamp(26px, 7vw, 38px); font-weight: 900; text-shadow: 0 2px 0 #fff; }
.ws-mic { font-size: 22px; font-weight: 900; color: var(--ink-2); min-height: 32px; }
.ws-mic.is-on::before { content: "🎤 "; animation: ws-blink 1s infinite; }
@keyframes ws-blink { 50% { opacity: .35; } }
.ws-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.ws-choice { background: var(--paper); border: 5px solid #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 6px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 900; font-size: 20px; min-height: 160px; }
.ws-choice[disabled] { cursor: default; }
.ws-pic { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sky-2); display: flex; align-items: center; justify-content: center; font-size: clamp(54px, 15vw, 92px); border: 4px solid var(--straw); }
.ws-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-choice.is-right { border-color: var(--green); background: #e5f6e2; animation: ws-pop .35s ease-out; }
.ws-choice.is-wrong { border-color: var(--barn); opacity: .55; animation: ws-shake .35s; }
@keyframes ws-pop { 50% { transform: scale(1.07); } }
@keyframes ws-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ws-dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ws-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.ws-dot.is-done { background: var(--green); border-color: var(--green); }
.ws-dot.is-now { background: var(--straw); border-color: var(--straw); }
.ws-stars { font-size: 46px; letter-spacing: 4px; }
.ws-cast { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ws-cast img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow); object-fit: cover; }
@media (max-width: 420px) { .ws-choice { min-height: 130px; font-size: 17px; } }