.quest-scene.bridge-scene{height:290px;isolation:isolate;background:#a8e4e4}
.ruins-landscape{position:absolute;inset:0;width:100%;height:100%}
.bridge-deck{transform-origin:var(--hinge) 366px;transition:transform .6s ease-out,opacity .6s}
.bridge-deck.missing{opacity:.22;transform:rotate(-65deg)}
.bridge-deck.repairing{transform:rotate(-40deg);filter:drop-shadow(0 0 6px #ffe882)}
.bridge-deck.connected{opacity:1;transform:rotate(0)}
.bridge-section.just-built .bridge-deck{animation:bridge-lower .8s cubic-bezier(.2,.7,.3,1) both}
.bridge-scene .bridge-walker{width:24%;max-width:130px;aspect-ratio:1;height:auto;position:absolute;left:var(--walker)!important;top:auto;bottom:47%;transform:translateX(-50%);z-index:2}
.bridge-scene .bridge-walker .sprite{width:100%;height:100%}
.quest-scene.bridge-scene.success .bridge-walker{animation:bridge-step .8s ease-out both}
.bridge-scene .quest-bubble{left:16px;right:16px;top:auto;bottom:5%;max-width:none;text-align:center;font-size:17px;padding:13px 10px;z-index:3}
@keyframes bridge-lower{0%{transform:rotate(-55deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes bridge-step{0%{transform:translateX(-80%)}50%{transform:translate(-65%,-16px)}100%{transform:translateX(-50%)}}
@media(min-width:900px){.lesson-board>.bridge-scene{height:100%;min-height:0;margin:0}.bridge-scene .bridge-walker{width:27%;max-width:145px;bottom:47%}.bridge-scene .quest-bubble{font-size:18px}}
@media(prefers-reduced-motion:reduce){.bridge-deck,.bridge-section.just-built .bridge-deck,.quest-scene.bridge-scene.success .bridge-walker{animation:none;transition:none}}