/* Short, event-driven motion. Content remains visible without JavaScript. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-fast:150ms;--motion-state:240ms}
button,.hint-choice{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease)}
button:enabled:active{transform:scale(.975)}
.welcome-play svg,.brand .mark,#result-close svg,.search-wrap>svg{transition:transform var(--motion-state) var(--motion-ease),color var(--motion-fast)}
.welcome-play{gap:12px;box-shadow:0 4px 24px #ea377a38;transition:box-shadow 220ms,background-color 150ms,transform 150ms var(--motion-ease)}
.welcome-play:enabled:is(:hover,:focus-visible){box-shadow:0 5px 30px #ea377a58}
.welcome-play:disabled{box-shadow:none}
.welcome-play svg{stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.search-wrap:focus-within>svg{color:#f6afcc;transform:scale(1.08)}
.game-title-link,footer a{transition:color var(--motion-fast),text-decoration-color var(--motion-fast);text-decoration-color:transparent}
.game-title-link:is(:hover,:focus-visible),footer a:is(:hover,:focus-visible){text-decoration-color:currentColor}
@media(hover:hover) and (pointer:fine){
 .welcome-play:enabled:hover svg{transform:translateX(4px)}
 .brand:hover .mark{transform:rotate(-5deg)}
 #result-close:hover svg{transform:rotate(90deg)}
 #cover-fan:hover img{transform:translateY(calc((var(--position) - 2)*(var(--position) - 2)*5px - 5px)) rotate(calc((var(--position) - 2)*11deg))}
 .hint-choice:enabled:hover{transform:translateX(3px)}
}
.switch{position:relative;isolation:isolate}
.switch.motion-ready::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:var(--active-width);transform:translateX(var(--active-left));border-radius:8px;background:var(--pink);z-index:-1;transition:transform 280ms var(--motion-ease),width 280ms var(--motion-ease)}
.switch.motion-ready button.active{background:transparent}
/* Existing guesses must never replay when the board rerenders. */
.guess .tile{animation:none}
.guess.is-new{animation:guess-arrive 300ms var(--motion-ease)}
.guess.is-new .tile{position:relative;transform-style:preserve-3d;transform-origin:center;animation:tile-flip 600ms cubic-bezier(.22,.65,.28,1) backwards;animation-delay:calc(var(--i)*40ms)}
.guess.is-new .tile>div{backface-visibility:hidden;transform:translateZ(1px)}
.guess.is-new .tile::after{content:"";position:absolute;inset:-1px;border:1px solid #515769;border-radius:inherit;background:#292d38;backface-visibility:hidden;transform:rotateY(180deg) translateZ(2px)}
.guess.is-new .tile.exact .tile-label>svg path{stroke-dasharray:24;animation:match-mark 300ms var(--motion-ease) backwards;animation-delay:calc(140ms + var(--i)*24ms)}
.guess.is-new .clue-arrow{animation:arrow-cue 360ms var(--motion-ease) backwards;animation-delay:calc(160ms + var(--i)*24ms)}
.guess.is-new.winning-guess{animation:solved-border 650ms var(--motion-ease)}
#results:not([hidden]){animation:search-open 170ms var(--motion-ease)}
.result{transition:background-color 120ms,color 120ms}
.result img{transition:transform 180ms var(--motion-ease)}
.result:is(:hover,.selected) img{transform:scale(1.035)}
.disclosure:not([hidden]){animation:disclosure-open 240ms var(--motion-ease)}
#game:not([hidden]),#welcome:not([hidden]){animation:surface-enter 260ms var(--motion-ease)}
dialog{opacity:0;transform:translateY(8px) scale(.985);transition:opacity 160ms ease-out,transform 160ms ease-out,display 160ms allow-discrete,overlay 160ms allow-discrete}
dialog[open]{opacity:1;transform:none;transition-duration:280ms;transition-timing-function:var(--motion-ease)}
dialog::backdrop{opacity:0;transition:opacity 180ms,display 180ms allow-discrete,overlay 180ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.985)}dialog[open]::backdrop{opacity:0}}
dialog[open] .result-metrics>div{animation:metric-enter 360ms var(--motion-ease) backwards}
dialog[open] .result-metrics>div:nth-child(2){animation-delay:45ms}
dialog[open] .result-metrics>div:nth-child(3){animation-delay:90ms}
dialog[open] #result-outcome.is-win{animation:solved-word 440ms var(--motion-ease)}
#result-dialog[open]:has(.is-win){animation:win-bounce 520ms ease-out;transition:opacity 160ms ease-out,display 160ms allow-discrete,overlay 160ms allow-discrete}
.win-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:3}
.win-confetti i{position:absolute;top:0;width:5px;height:9px;border-radius:1px;opacity:0}
@keyframes win-bounce{0%{opacity:0;transform:translateY(16px) scale(.95)}60%{opacity:1;transform:translateY(-4px) scale(1.012)}82%{transform:translateY(2px) scale(.997)}100%{opacity:1;transform:none}}
@keyframes guess-arrive{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tile-flip{from{transform:perspective(800px) rotateY(180deg)}to{transform:perspective(800px) rotateY(0deg)}}
@keyframes match-mark{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes arrow-cue{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes solved-border{from{border-color:#fbd3e3}to{border-color:#ea377a}}
@keyframes search-open{from{opacity:.5;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes disclosure-open{from{opacity:.4;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes surface-enter{from{opacity:.6}to{opacity:1}}
@keyframes metric-enter{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes solved-word{from{opacity:.5;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 button:enabled:active,.brand:hover .mark,.welcome-play:enabled:hover svg,#result-close:hover svg,.search-wrap:focus-within>svg,.hint-choice:enabled:hover,.result:is(:hover,.selected) img{transform:none}
 #cover-fan:hover img{transform:translateY(calc((var(--position) - 2)*(var(--position) - 2)*7px)) rotate(calc((var(--position) - 2)*8deg))}
 button,.search-wrap,.result{transition:background-color 100ms,color 100ms,border-color 100ms!important}
}