:root {
  font-family: 'Trebuchet MS', 'Avenir Next', sans-serif;
  color: #302b30;
  background: #f5f4ef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.playground { max-width: 880px; margin: auto; padding: 22px 24px; }
.topbar, .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topbar a { color: #55505a; font-size: 14px; text-decoration: none; }
.intro { margin: 28px 0; text-align: center; }
h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 10px; letter-spacing: -1.5px; }
.intro p { margin: 0; font-size: 18px; }
.toolbar { margin-bottom: 20px; font-size: 13px; }
.toolbar label { display: flex; align-items: center; gap: 8px; }
select { font: inherit; padding: 9px; border: 1px solid #a49da2; background: white; border-radius: 5px; max-width: 100%; }
.round { white-space: nowrap; }
.comparison { display: grid; grid-template-columns: 1fr 45px 1fr; align-items: center; gap: 12px; }
.plate { text-align: center; padding: 15px 12px 24px; border: 3px solid #302b30; border-radius: 14px; position: relative; }
.peach { background: #ffdf9a; transform: rotate(-1deg); }
.blue { background: #bddcf5; transform: rotate(1deg); }
.plate-label { display: flex; align-items: center; flex-direction: column; font-size: 20px; font-weight: bold; }
.pet { display: block; width: 160px; max-width: 100%; height: 128px; overflow: visible; }
.expression { font-size: clamp(32px, 5vw, 48px); font-weight: bold; margin-top: 18px; white-space: normal; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.versus { text-align: center; font-size: 38px; font-weight: bold; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 640px; margin: 28px auto 0; }
button { cursor: pointer; font-family: inherit; touch-action: manipulation; }
.answer { border: 3px solid #302b30; border-radius: 10px; background: white; color: #302b30; padding: 16px 22px; display: grid; grid-template-columns: 45px 1fr; align-items: center; text-align: left; box-shadow: 0 5px 0 #302b30; }
.answer > span { grid-row: 1 / 3; font-size: 38px; font-weight: bold; }
.answer strong { font-size: 24px; }
.answer small { margin-top: 4px; font-size: 13px; }
.answer:hover:not(:disabled) { background: #f3ecfc; }
.answer:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #302b30; }
.answer:disabled { cursor: default; color: #7a747b; border-color: #aaa5a9; box-shadow: 0 5px 0 #aaa5a9; }
.answer.chosen { background: #c2e8bc; color: #302b30; border-color: #302b30; box-shadow: 0 5px 0 #302b30; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #6940b1; outline-offset: 5px; }
.speech { text-align: center; font-size: 21px; font-weight: bold; margin: 26px 0 6px; }
.feedback { text-align: center; min-height: 48px; line-height: 1.5; font-size: 15px; padding: 3px 0 12px; }
.game-tools { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; min-height: 44px; }
.small { border: 1px solid #8e8791; background: transparent; color: #49404b; padding: 10px 14px; border-radius: 5px; font-size: 13px; }
.next { border: 2px solid #302b30; background: #302b30; color: white; padding: 12px 22px; border-radius: 7px; font-size: 16px; font-weight: bold; }
.scoreboard { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 2px solid #d3cfd0; padding: 20px 0 0; margin-top: 25px; }
.scoreboard h2 { font-size: 16px; margin: 0 0 5px; }
.scoreboard p { font-size: 13px; margin: 0; }
.treats { display: flex; gap: 10px; }
.treat { width: 34px; height: 38px; display: grid; place-items: center; font-size: 29px; }
.treat.empty { color: #b8b2b5; font-size: 28px; }
footer { text-align: center; color: #6e6570; font-size: 12px; margin-top: 23px; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 180px; margin: 17px auto 0; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: #302b30; }
.zero { font-size: 14px; }
[hidden] { display: none !important; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.confetti.shower { animation: shower 3s linear both; }
.confetti.cannon { animation: cannon 3s linear both; }
.confetti.party-symbol { width: auto !important; height: auto !important; font-style: normal; font-size: 28px; line-height: 1; }
@keyframes shower {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift-x), 110vh, 0) rotate(var(--spin)); }
}
@keyframes cannon {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); animation-timing-function: cubic-bezier(.15,.65,.3,1); }
  42% { opacity: 1; transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--spin)); animation-timing-function: cubic-bezier(.45,0,1,.6); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--burst-x), 65vh, 0) rotate(1100deg); }
}
.happy { animation: hop .4s ease 2; }
@keyframes hop { 50% { transform: translateY(-12px) rotate(5deg); } }
@media (max-width: 560px) {
  .playground { padding: 16px; }
  .intro { margin: 25px 0; }
  .intro p { font-size: 16px; }
  .toolbar label { flex-direction: column; align-items: flex-start; gap: 5px; }
  .comparison { grid-template-columns: 1fr 25px 1fr; gap: 6px; }
  .plate { padding: 10px 5px 22px; }
  .pet { width: 125px; height: 100px; }
  .plate-label { font-size: 17px; }
  .expression { font-size: clamp(24px, 7vw, 35px); margin-top: 15px; }
  .versus { font-size: 28px; }
  .answers { gap: 12px; margin-top: 24px; }
  .answer { padding: 12px 9px; grid-template-columns: 30px 1fr; }
  .answer > span { font-size: 27px; }
  .answer strong { font-size: 19px; }
  .answer small { font-size: 10px; }
  .speech { font-size: 18px; }
  .feedback { font-size: 13px; }
  .scoreboard { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep controls in their own rows; the next button always reserves its space. */
.game-tools { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
.dot-control { display: grid; justify-items: center; gap: 6px; }
#dot-label { font-size: 12px; color: #6e6570; }
.dot-modes { display: inline-flex; }
.dot-modes button { padding: 11px 14px; min-height: 44px; border: 1px solid #8e8791; background: white; color: #302b30; font-size: 13px; }
.dot-modes button + button { border-left: 0; }
.dot-modes button:first-child { border-radius: 6px 0 0 6px; }
.dot-modes button:last-child { border-radius: 0 6px 6px 0; }
.dot-modes button[aria-pressed="true"] { background: #302b30; color: white; }
.dot-modes button:focus-visible { position: relative; z-index: 1; }
#next { min-width: 170px; }
#next[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.expression { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; }
.term { display: inline-flex; align-items: flex-start; gap: 8px; }
.operand { display: inline-flex; flex-direction: column; align-items: center; }
.dot-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 86px; margin-top: 8px; }
.dot-group .dot { width: 9px; height: 9px; flex: 0 0 9px; }
.dots .dot-group { max-width: 150px; }
@media (max-width: 560px) {
  .expression, .term { gap: 5px; }
  .dot-group { max-width: 49px; gap: 3px; }
  .dot-group .dot { width: 7px; height: 7px; flex-basis: 7px; }
}

.sound-switch { display: inline-flex; align-items: center; gap: 8px; }
.switch-track { display: inline-block; width: 32px; height: 20px; border-radius: 12px; background: #d3cfd0; border: 1px solid #8e8791; position: relative; }
.switch-track::after { content: ''; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; background: white; border: 1px solid #6e6570; border-radius: 50%; }
.sound-switch[aria-checked="true"] .switch-track { background: #42a17c; border-color: #28684f; }
.sound-switch[aria-checked="true"] .switch-track::after { left: 14px; }

.topbar { flex-wrap: wrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-actions button { min-height: 44px; white-space: nowrap; }
.counters { display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
.counter { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #6e6570; }
.counter input { width: 62px; height: 62px; padding: 4px; border: 2px solid #302b30; border-radius: 50%; background: #fff; color: #302b30; font: bold 22px 'Trebuchet MS', sans-serif; text-align: center; appearance: textfield; cursor: text; }
.counter:last-child input { background: #fff; }
.counter input::-webkit-inner-spin-button, .counter input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.counter input:focus-visible { outline: 3px solid #6940b1; outline-offset: 4px; }

.dot-group.concealed { visibility: hidden; }

.plate-label { position: relative; }
.costume { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-9deg); font-size: 35px; line-height: 1; pointer-events: none; }
.costume:empty { display: none; }
.speech { min-height: 2.5em; display: grid; align-items: center; }

/* Dedicated milestone effects, rather than rare symbols in the confetti. */
#whimsy { position: fixed; inset: 0; pointer-events: none; z-index: 101; overflow: hidden; }
.whimsy { position: absolute; display: block; opacity: 0; font-size: var(--size); line-height: 1; will-change: transform, opacity; }
.whimsy.bubbles { top: 105%; width: var(--size); height: var(--size); border: 3px solid #75bde7; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffffb0, #a5d7f014 45%, #e5a4d140); box-shadow: inset -4px -5px 0 #e5a4d166, inset 3px 3px 0 #ffffffb0; animation: bubble-rise 4s ease-out both; }
.whimsy.bubbles::before { content: ''; position: absolute; top: 18%; left: 20%; width: 22%; height: 12%; border-radius: 50%; background: white; transform: rotate(-35deg); }
.whimsy.paws { top: 105%; animation: paw-dance 4s ease-out both; }
.whimsy.stars { left: -10%; color: #ffbf00; text-shadow: 0 2px 0 #b16b13; animation: shooting-star 2.5s ease-out both; }
@keyframes bubble-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  10%, 75% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--sway), -125vh, 0) scale(1.2); }
}
@keyframes paw-dance {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-20deg); }
  12%, 75% { opacity: .85; }
  45% { transform: translate3d(var(--sway), -50vh, 0) rotate(20deg); }
  100% { opacity: 0; transform: translate3d(0, -120vh, 0) rotate(-20deg); }
}
@keyframes shooting-star {
  0% { opacity: 0; transform: translate3d(-70vw, -20vh, 0) scale(.5) rotate(-60deg); }
  20%, 65% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(90vw, 40vh, 0) scale(1.2) rotate(150deg); }
}