/* Feedback motion and sound settings. Pure CSS: no images or fonts. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.resource{position:relative}.resource.bump strong{animation:resource-bump .7s ease}.resource .delta{position:absolute;top:-4px;left:46px;font:700 12px system-ui,sans-serif;font-style:normal;color:#ffe3a0;text-shadow:0 1px 4px #04121c;pointer-events:none;animation:resource-delta 1.8s ease-out forwards}.resource .delta.loss{color:#ffb2b9}
@keyframes resource-bump{30%{transform:scale(1.16);color:#ffe7ad}}
@keyframes resource-delta{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.turn-display.turn-flip strong{animation:turn-flip .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes turn-flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
.end-turn.ready{animation:turn-ready 1.8s ease-in-out infinite}
@keyframes turn-ready{50%{box-shadow:0 0 0 5px #f6d58a40,0 6px 28px #f6d58a50}}
.combat-unit{position:relative}.combat-unit .threat{position:absolute;top:-8px;right:-4px;padding:1px 6px;border-radius:9px;background:#6e2a3a;border:1px solid #ff9aab88;color:#ffd9de;font:700 9px system-ui,sans-serif;white-space:nowrap}
.threat-total{margin-left:8px;padding:1px 7px;border-radius:9px;background:#5a2533;color:#ffc9d0;font-size:10px;font-weight:650}
.battle-keys{display:block;margin-top:4px;color:#93b3ae}
@media(hover:none){.battle-keys{display:none}}
dialog.result-dialog{position:fixed;overflow-x:hidden}.celebration{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.result-dialog #dialog-body>*:not(.celebration){position:relative;z-index:1}
.result-dialog .result-seal svg{animation:seal-rise 1.1s cubic-bezier(.2,.9,.3,1.25) both}.result-dialog .result-seal.win svg{filter:drop-shadow(0 0 18px #ffd77a90)}
@keyframes seal-rise{0%{transform:scale(.4) translateY(20px);opacity:0}100%{transform:none;opacity:1}}
.sound-settings{display:flex;flex-direction:column;gap:6px;margin:16px 0 12px}
.switch-row,.slider-row{display:flex;align-items:center;gap:14px;padding:11px 12px;border:1px solid #4c6e74;border-radius:9px;background:#163543}
.switch-row>span,.slider-row>span{flex:1;min-width:0}.switch-row strong,.slider-row strong{display:block;font-size:13px;color:#e6f2ea}.switch-row small,.slider-row small{display:block;font-size:11px;color:#a9c6c2;margin-top:2px}
.switch-row input{width:22px;height:22px;accent-color:#f0cc86}.slider-row input{flex:0 0 42%;accent-color:#f0cc86}.slider-row output{flex:0 0 30px;text-align:right;font:600 12px system-ui,sans-serif;color:#f3d79c}
.sound-tests{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.sound-tests button{flex:1 1 auto;font-size:11px;padding:7px 10px}
#sound{white-space:nowrap}
@media(max-width:760px){.switch-row,.slider-row{padding:9px;gap:9px}.slider-row{flex-wrap:wrap}.slider-row input{flex:1 1 70%}.combat-unit .threat{top:-7px;font-size:8px;padding:1px 4px}.threat-total{display:inline-block;margin:2px 0 0}}
@media(prefers-reduced-motion:reduce){.resource.bump strong,.resource .delta,.turn-display.turn-flip strong,.end-turn.ready,.result-dialog .result-seal svg{animation:none}.resource .delta{opacity:1}}