/* A paisagem permanece atrás de toda a interface, inclusive durante a rolagem. */
body {
    min-height: 100dvh;
    isolation: isolate;
    background: var(--bg);
}
body::before, body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 1.8s ease, filter 1.8s ease;
}
body::before {
    background-image: linear-gradient(180deg, #061c194d, #061c1970 42%, #061712a6),
        url('../../assets/images/amazonia/floresta-amazonica-dia.jpg');
}
body::after {
    background-image: linear-gradient(180deg, #0313101a, #03131033 55%, #03131080),
        url('../../assets/images/amazonia/floresta-amazonica-noite.jpg');
    filter: brightness(1.3);
    opacity: 0;
}
body[data-period='night']::before { opacity: 0; }
body[data-period='night']::after { opacity: 1; }
body[data-period='dusk']::before { filter: sepia(.25) brightness(.7); }
body[data-raining='true']::before { filter: saturate(.65) brightness(.75); }
body[data-period='dusk'][data-raining='true']::before { filter: sepia(.2) saturate(.65) brightness(.6); }
.topbar {
    background: #071b17de;
    backdrop-filter: blur(12px);
    border-bottom-color: #c8dfba26;
    box-shadow: 0 8px 30px #00000018;
}
.heading {
    padding: 22px 24px;
    border: 1px solid #c8dfba26;
    border-radius: 10px;
    background: linear-gradient(110deg, #071b17ed, #0b231bcc);
    box-shadow: 0 12px 35px #0000001f;
}
.panel { box-shadow: 0 10px 30px #00000024; }
.turn-bar {
    background: linear-gradient(100deg, #1b3025f5, #081e18f5);
    box-shadow: 0 10px 30px #00000024;
}
.field-note, .history-panel {
    background: #081e18ed;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 18px;
}
.weather { background: #071b1799; }
.build-note { color: #c0d1bf; text-shadow: 0 1px 6px #000; }
footer { background: #071b17e8; color: #9baea2; }
@media (max-width: 650px) {
    body::before, body::after { background-position: 55% center; }
    .heading { padding: 18px 16px; }
    .history-panel { padding: 16px 13px; }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { transition: none; }
}