.runner-controls{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center}
.runner-controls button{font:600 12px Arial,sans-serif;border:1px solid #8e8675;border-radius:999px;background:#fffaf0;color:#302a20;padding:8px 12px;cursor:pointer}
.runner-controls button:focus-visible{outline:3px solid #95651b;outline-offset:3px}
.character-stage{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1000;contain:strict}
.character-runner{position:absolute;left:0;bottom:24px;width:150px;pointer-events:none;will-change:transform}
.character-quote{display:block;position:relative;margin:0 -15px 2px;padding:9px 12px;border:2px solid #342c43;border-radius:20px;background:#fff;color:#302337;font:bold 17px/1.2 Arial,sans-serif;text-align:center;box-shadow:0 3px 8px #0002}
.character-sprite{display:block;width:150px;height:245px;background-repeat:no-repeat;background-size:400% 100%;animation:character-stride .48s steps(4) infinite;filter:drop-shadow(0 4px 3px #0002)}
.character-runner.reverse .character-sprite{transform:scaleX(-1)}
@keyframes character-stride{to{background-position:133.333333% 0}}
@media(max-width:600px){.character-runner,.character-sprite{width:100px}.character-sprite{height:164px}.character-quote{font-size:14px}.character-runner{bottom:12px}}
@media(prefers-reduced-motion:reduce){.character-stage{display:none}.character-sprite{animation:none}}

.character-stage[popover]{margin:0;padding:0;border:0;width:auto;height:auto;max-width:none;max-height:none;background:transparent;color:inherit}
.character-stage::backdrop{background:transparent;pointer-events:none}