.level-announcement{margin:2.5rem 0;padding:clamp(1rem,3vw,2rem);border:1px solid #668175;border-radius:20px;background:#102e28;color:#f2f5ed}
.level-announcement h3{font-size:clamp(1.7rem,4vw,2.8rem);margin:.5rem 0 1rem}
.level-announcement p{max-width:70ch;line-height:1.65}
.level-announcement .level-status{color:#c8e3a3;font-weight:700;letter-spacing:.06em}
.level-comparison{position:relative;aspect-ratio:1;max-width:800px;margin:1.5rem auto 1rem;overflow:hidden;border-radius:12px;--split:50%}
.level-comparison img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.level-comparison .comparison-damaged{clip-path:inset(0 0 0 var(--split))}
.comparison-divider{position:absolute;inset:0 auto 0 var(--split);width:3px;background:white;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 8px #0009}
.comparison-divider::after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#173d33;font-size:24px;box-shadow:0 2px 12px #0006}
.comparison-label{position:absolute;top:12px;padding:.35rem .65rem;background:#102e28df;border-radius:6px;font-size:.9rem;pointer-events:none}
.comparison-label.intact{left:12px}.comparison-label.damaged{right:12px}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.level-comparison:focus-within{outline:3px solid #d1f4a8;outline-offset:4px}
.comparison-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;max-width:800px;margin:auto}
.comparison-controls button{padding:.7rem 1rem;border:1px solid #acc39b;border-radius:8px;background:#254c3c;color:white;font:inherit;cursor:pointer}
.comparison-controls button:focus-visible{outline:3px solid #d1f4a8;outline-offset:3px}
.level-announcement .comparison-note{font-size:.85rem;color:#c5d2ca}
.level-announcement .map-review-link{display:inline-block;margin-top:1rem;color:#d1f4a8}
.more-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.more-levels .level-announcement{margin:0 0 2.5rem;min-width:0}
.more-levels .level-announcement h3{font-size:clamp(1.5rem,3vw,2rem)}
@media(max-width:760px){.more-levels{grid-template-columns:1fr;gap:0}}