/* Short feedback on controls, independent of layout and media timing. */
.screen button, .screen summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease, scale .16s ease; }
.screen button:not(:disabled):active, .screen summary:active { scale: .975; }
.screen.active:not(#screen-home):not(#screen-game) { animation: ui-page-in .32s ease both; }
#screen-game.active { animation:none; } /* Options own the question entrance, including round one. */
.screen :is(button, summary, select, input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes ui-page-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-picked { from { opacity: .35; scale: .88; } to { opacity: 1; scale: 1; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px), (pointer: coarse) { .screen button, .screen summary { min-height: 44px; min-width: 44px; } }
.toy-compact .screen button, .toy-compact .screen summary { min-height: 44px; min-width: 44px; }
@media (prefers-reduced-motion: reduce) {
  .screen.active:not(#screen-home), .screen *, .screen *::before { animation: none !important; transition: none !important; }
  .screen button:active, .screen summary:active { scale: 1; }
}