/* Keep motion on compositor-friendly properties and use a consistent cadence. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:140ms;--motion-normal:220ms}
.view-in{animation:none}
.device button,.device [role="button"]{transition:opacity var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.device button:not(:disabled):active,.device [role="button"]:active{opacity:.72}
.app-ic{transition:transform 160ms var(--motion-ease),filter 160ms ease}
.app-ic:active{transform:scale(.94)}
.modal-mask{animation:motion-mask 180ms ease-out}
.modal-mask>.sheet{animation:motion-sheet 260ms var(--motion-ease)}
.modal-mask>.card,.modal-mask>.xs-preview,.modal-mask>.result-card{animation:motion-dialog 220ms var(--motion-ease)}
.exit-home{transition:transform 180ms var(--motion-ease),opacity 180ms ease;transform:scale(.95)}
.toast{animation:toastIn 180ms var(--motion-ease)}
.clue-square{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.device input,.device textarea{transition:border-color 140ms ease,box-shadow 140ms ease}
@keyframes motion-mask{from{opacity:0}to{opacity:1}}
@keyframes motion-sheet{from{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-dialog{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.exit-home{transform:none}}

.game-ended-notice{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);z-index:15;padding:7px 12px;border-radius:15px;background:#252525e8;color:#fff;font-size:11px;white-space:nowrap;pointer-events:none}

.game-ended-notice button{pointer-events:auto;color:#fff;border:1px solid #aaa;border-radius:8px;margin-left:8px;padding:3px 7px;font-size:11px}