#level04Screen.active{display:flex;flex-direction:column;background:#17383b}
.l4-room{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:url("assets/level04/bean-catch-background.png") center top/cover no-repeat}
.l4-intro{position:absolute;z-index:8;left:18px;right:18px;bottom:18px;padding:18px;border:4px solid #17383b;background:#fff7e8f2;box-shadow:7px 7px 0 #d68576}
.l4-intro span{color:#555653;font-size:12px;font-weight:900;letter-spacing:.16em}
.l4-intro h3{margin:8px 0 6px;color:#17383b;font:700 27px/1.05 Georgia,serif}
.l4-intro p{margin:7px 0;color:#17383b;font-size:15px;line-height:1.4}
.l4-intro .l4-warning{color:#7b3028}
.l4-intro .primary{margin-top:10px}
.l4-game{position:absolute;inset:0;touch-action:none}
.l4-hud{position:absolute;z-index:7;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px}
.l4-hud span{min-width:112px;padding:8px 10px;border:3px solid #17383b;background:#fff7e8e8;color:#555653;font-size:11px;font-weight:900;letter-spacing:.09em;text-align:center;box-shadow:3px 3px 0 #d68576}
.l4-hud b{color:#17383b;font-size:17px}
.l4-fall-zone{position:absolute;z-index:3;inset:58px 0 34px;overflow:hidden;cursor:ew-resize}
.l4-catcher{position:absolute;z-index:5;left:50%;bottom:4px;width:116px;height:98px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 5px 5px #17383b66);user-select:none;pointer-events:none}
.l4-falling{position:absolute;z-index:4;top:0;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 2px #17383b66);pointer-events:none}
.l4-falling.is-ladybird{width:42px;height:42px}
.l4-control-note{position:absolute;z-index:7;left:0;right:0;bottom:6px;margin:0;color:#fff7e8;font-size:11px;font-weight:900;letter-spacing:.04em;text-align:center;text-shadow:0 2px 5px #17383b}
.l4-room.bean-caught .l4-hud span:last-child{animation:l4-score-good .28s ease}
.l4-room.ladybird-hit .l4-hud span:last-child{animation:l4-score-bad .4s ease}
@keyframes l4-score-good{50%{background:#d9efcf;transform:scale(1.04)}}
@keyframes l4-score-bad{35%{background:#f2b1a5;transform:translateX(-5px)}70%{transform:translateX(5px)}}
.l4-success-panel h2,.l4-fail-panel h2{font-size:38px}
.l4-success-art{width:min(100%,300px);aspect-ratio:3/4;align-self:center;margin:16px 0 14px;border:4px solid #17383b;background:url("assets/level04/bean-catch-ending-atlas.png") 0 0/400% 100% no-repeat;box-shadow:7px 7px 0 #17383b}
.l4-success-art.playing{animation:l4-reverse-reveal 16s steps(1,end) forwards}
@keyframes l4-reverse-reveal{0%,24.9%{background-position:0 0}25%,49.9%{background-position:33.333% 0}50%,74.9%{background-position:66.667% 0}75%,100%{background-position:100% 0}}
.l4-success-panel .primary,.l4-fail-panel .primary{margin-top:4px}
#level04Fail.active{display:flex;align-items:center;justify-content:center;background:#17383b}
.l4-fail-panel{position:relative;width:calc(100% - 36px);padding:26px 20px;background:#fff7e8;border:5px solid #17383b;box-shadow:9px 9px 0 #d68576;text-align:center}
.l4-fail-panel>small,.l4-fail-panel h2,.l4-fail-panel p,.l4-fail-panel .complete{color:#555653}
.l4-fail-panel .secondary{width:100%;margin-top:9px;color:#555653;border-color:#555653}
@media(max-height:760px){.l4-intro{bottom:10px;padding:14px}.l4-intro h3{font-size:23px}.l4-intro p{font-size:13px}.l4-catcher{width:98px;height:84px}.l4-success-panel{padding-top:14px}.l4-success-panel h2{font-size:31px}.l4-success-panel p{font-size:13px}.l4-success-art{width:min(100%,240px);margin:9px 0}}
@media(max-width:520px){.l4-room{background-position:center top}.l4-hud{top:8px}.l4-fall-zone{top:54px}}
@media(prefers-reduced-motion:reduce){.l4-success-art.playing{animation:none;background-position:100% 0}}