:root { --ink: #23364a; --muted: #66758a; --water: #85d8ff; --grass: #8de47e; --sand: #ffd280; --ice: #dff8ff; --panel: rgba(255,255,255,.88); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: 'Nunito', sans-serif; color: var(--ink); background: radial-gradient(circle at 12% 16%, rgba(141,228,126,.65), transparent 28%), radial-gradient(circle at 82% 12%, rgba(133,216,255,.7), transparent 30%), linear-gradient(135deg, #fff7d8, #e8fbff 58%, #f2eeff); }
button, a { font: inherit; }
.app-shell { min-height: 100vh; min-height: 100dvh; padding: clamp(1rem, 3vw, 2rem); }
.toolbar, .mission-card, .animal-card, .habitat-card, .bottom-actions { background: var(--panel); border: 3px solid rgba(35,54,74,.12); box-shadow: 0 14px 0 rgba(35,54,74,.08), 0 22px 42px rgba(35,54,74,.13); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 2rem; padding: 1rem 1.2rem; }
.eyebrow { margin: 0; color: #ef6b43; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; }
h1 { margin: 0; font-family: 'Baloo 2', sans-serif; font-size: clamp(1.9rem, 6vw, 3.6rem); line-height: .9; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bottom-actions { justify-content: center; max-width: 1080px; margin: 1rem auto 0; border-radius: 1.5rem; padding: 1rem; }
button, #goBack { border: 0; border-radius: 999px; padding: .72rem 1rem; background: #fff; color: var(--ink); font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: inset 0 -4px rgba(35,54,74,.08); }
#goBack { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
button:hover, button:focus-visible, #goBack:hover, #goBack:focus-visible { outline: 3px solid rgba(239,107,67,.3); transform: translateY(-2px); }
.mission-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1080px; margin: 1rem auto; border-radius: 1.5rem; padding: 1rem 1.2rem; font-weight: 900; }
.mission-card p { margin: 0; color: var(--muted); }
.mission-card span { white-space: nowrap; background: #fff8dc; border-radius: 999px; padding: .55rem .85rem; }
.animal-row { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: .8rem; max-width: 1080px; margin: 0 auto 1rem; }
.animal-card { display: grid; place-items: center; gap: .35rem; min-height: 132px; border-radius: 1.4rem; padding: .7rem; cursor: pointer; }
.animal-card img { width: min(82px, 55%); aspect-ratio: 1; object-fit: contain; }
.animal-card span { font-weight: 900; }
.animal-card.selected { outline: 5px solid #ffb703; }
.animal-card.rescued { opacity: .48; pointer-events: none; }
.habitat-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: .8rem; max-width: 1080px; margin: 0 auto; }
.habitat-card { min-height: 260px; border-radius: 1.5rem; padding: 1rem; cursor: pointer; overflow: hidden; position: relative; }
.habitat-card h2 { margin: 0 0 .4rem; font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; }
.habitat-card p { margin: 0; color: rgba(35,54,74,.72); font-weight: 800; }
.habitat-card::after { content: ''; position: absolute; inset: auto -20px -32px; height: 118px; border-radius: 50% 50% 0 0; opacity: .9; }
.habitat-card[data-habitat="savanna"] { background: linear-gradient(#fff5c7, #ffe0a3); }
.habitat-card[data-habitat="ocean"] { background: linear-gradient(#dff8ff, #86d8ff); }
.habitat-card[data-habitat="arctic"] { background: linear-gradient(#ffffff, #dff8ff); }
.habitat-card[data-habitat="desert"] { background: linear-gradient(#fff0bf, #ffd280); }
.habitat-card[data-habitat="savanna"]::after { background: #8de47e; }
.habitat-card[data-habitat="ocean"]::after { background: #2da9e8; }
.habitat-card[data-habitat="arctic"]::after { background: #bceeff; }
.habitat-card[data-habitat="desert"]::after { background: #f2a941; }
.rescued-tray { position: absolute; inset: auto 14px 24px; z-index: 1; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: center; gap: .25rem .35rem; }
.rescued-img { width: clamp(52px, 32%, 78px); aspect-ratio: 1; object-fit: contain; }
#confettiLayer { pointer-events: none; position: fixed; inset: 0; overflow: hidden; }
.confetti-piece { position: absolute; top: -22px; width: 13px; height: 20px; border-radius: 4px; animation: fall var(--duration) linear forwards; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--spin)); opacity: .2; } }
@media (max-width: 860px) { .mission-card, .bottom-actions { flex-direction: column; align-items: stretch; } .animal-row, .habitat-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); } .habitat-card { min-height: 210px; } }
@media (max-width: 560px) { .app-shell { padding: .5rem; } .toolbar { padding: .55rem .7rem; border-radius: 1.1rem; } .eyebrow { display: none; } h1 { font-size: clamp(1.45rem, 7vw, 2rem); } .mission-card { gap: .45rem; margin: .5rem auto; padding: .6rem .7rem; border-radius: 1rem; } .mission-card span { padding: .38rem .55rem; } .animal-row, .habitat-grid { gap: .45rem; } .animal-row { margin-bottom: .5rem; } .animal-card { min-height: 92px; border-radius: 1rem; padding: .45rem; } .animal-card img { width: min(58px, 50%); } .habitat-card { min-height: 150px; border-radius: 1rem; padding: .65rem; } .habitat-card h2 { font-size: 1.15rem; } .habitat-card p { font-size: .88rem; } .rescued-tray { inset: auto 8px 16px; gap: .12rem .2rem; } .rescued-img { width: clamp(42px, 30%, 56px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }