@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Nunito:wght@800;900&display=swap');

:root { --yellow:#ffd83d; --orange:#ff8b22; --green:#39c86b; --ink:#253238; }
* { box-sizing:border-box; }
button { touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100vh; display:grid; place-items:center; font-family:Nunito,Arial,sans-serif; color:var(--ink); background:radial-gradient(circle at 50% 20%,#fff8c8 0 12%,transparent 35%),linear-gradient(#62d8ee 0 52%,#4bcf70 52%); overflow:hidden; }
body::before { content:"🌴      🌿          🌴       🌿"; position:fixed; inset:auto 0 0; height:38%; font-size:110px; opacity:.45; display:flex; align-items:flex-end; justify-content:space-around; filter:saturate(.8); }
.home-link { position:fixed; z-index:10; top:14px; left:18px; padding:9px 14px; color:#fff; background:#73321f; border:3px solid #fff; border-radius:12px; text-decoration:none; font-size:13px; box-shadow:0 4px #3d1b10; }
.game { position:relative; width:min(1000px,96vw); min-height:min(690px,94vh); padding:18px 30px 28px; border:7px solid #fff; border-radius:32px; background:linear-gradient(#fff9d9dd,#fffdf2e8); box-shadow:0 15px 0 #238a58,0 25px 50px #164d4b88; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1,h2 { font-family:Boogaloo,Nunito,sans-serif; letter-spacing:2px; margin:5px; text-align:center; color:#9b3e25; text-shadow:2px 3px #fff; }
h1 { font-size:clamp(25px,5vw,49px); }
h2 { font-size:clamp(32px,6vw,58px); }
.level,.sound { background:var(--yellow); border:4px solid #9b3e25; border-radius:15px; padding:8px 14px; font-size:20px; box-shadow:0 5px #9b3e25; white-space:nowrap; }
.screen { display:none; text-align:center; animation:pop .35s ease-out; }
.screen.active { display:block; }
#choose p { font-size:22px; margin:2px 0 20px; }
.animals { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.animal { width:195px; padding:9px; border:5px solid #fff; border-radius:22px; background:linear-gradient(#ffd83d,#ff9e28); color:#6e2b20; font:900 23px Nunito; cursor:pointer; box-shadow:0 8px #ba5227,0 12px 16px #5555; transition:.15s; }
.sprite { display:block; background-image:url('assets/animals.png'); background-size:400% 100%; background-repeat:no-repeat; }
.sprite.lion { background-position:0% center; }
.sprite.tiger { background-position:33.333% center; }
.sprite.elephant { background-position:66.666% center; }
.sprite.gorilla { background-position:100% center; }
.sprite.extra,.sprite.bear,.sprite.crocodile,.sprite.rhino { background-image:url('assets/animals-extra.png'); background-size:300% 100%; }
.sprite.bear { background-position:0% center; }
.sprite.crocodile { background-position:50% center; }
.sprite.rhino { background-position:100% center; }
.animal .sprite { width:100%; height:130px; border-radius:15px; filter:drop-shadow(0 6px 2px #87411d55); }
.animal:hover { transform:translateY(-7px) rotate(-2deg); }
.animal:active,.space-button:active { transform:translateY(5px); box-shadow:0 3px #82381e; }
.timer { display:inline-block; margin:8px; padding:6px 25px; color:white; background:#e84d39; border-radius:30px; font-size:25px; box-shadow:0 5px #922c25; }
.arena { height:300px; display:flex; align-items:center; justify-content:center; }
.fighter { width:210px; font-size:24px; color:#73321f; }
.big-animal { width:210px; height:230px; border-radius:28px; transition:.08s; filter:drop-shadow(0 10px 3px #3334); }
.big-animal.bump { transform:scale(1.12) rotate(-4deg); }
.enemy { transform:scaleX(-1); }
.enemy.gorilla-hit { transform:scaleX(-1) scale(1.12) translateX(12px); filter:drop-shadow(0 10px 8px #ff3b19); }
.rope { position:relative; width:38%; height:15px; background:#9a5d27; border:4px solid #633814; border-radius:20px; }
.marker { position:absolute; left:50%; top:-28px; height:62px; border-left:5px dashed #e64433; }
.knot { position:absolute; left:50%; top:-30px; font-size:40px; transform:translateX(-50%); transition:left .1s; }
.meter-wrap { margin:0 auto 14px; width:min(680px,90%); }
.meter-label { display:flex; justify-content:space-between; font-size:14px; }
.meter { height:28px; position:relative; overflow:hidden; border:4px solid #253238; border-radius:20px; background:#ddd; }
.power { height:100%; width:0; background:linear-gradient(90deg,#42d969,#ffe33f,#ff6d2e); transition:width .08s; }
.gorilla-mark { position:absolute; top:0; bottom:0; width:7px; background:#713c26; left:62%; }
.space-button,.next-button { border:5px solid #853821; border-radius:18px; background:linear-gradient(#ffe95b,#ff982a); color:#74301f; font:900 26px Nunito; padding:8px 45px; box-shadow:0 7px #853821; cursor:pointer; user-select:none; }
.space-button small { display:block; font-size:15px; }
.result-animal { width:260px; height:270px; margin:10px auto -10px; border-radius:35px; animation:bounce .7s infinite alternate; }
.result .result-animal { width:210px; height:190px; }
.result p { font-size:25px; }
.score { font-size:24px; margin:16px; }
.next-button { font-size:22px; }
.lights-screen h2 { margin-top:18px; font-size:44px; }
.lights-screen > p { margin:4px; font-size:18px; }
.lights-top { display:flex; justify-content:center; gap:25px; margin-top:12px; }
.lights-top div { min-width:150px; padding:8px 18px; color:white; background:#703cc4; border:4px solid #fff; border-radius:15px; box-shadow:0 5px #3d1d7f; }
.lights-top strong { color:#fff04a; font-size:25px; }
.light-grid { width:min(570px,88vw); margin:16px auto 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }
.challenge-light { aspect-ratio:1; border:7px solid #ffffff88; border-radius:50%; background:linear-gradient(145deg,#69787c,#303d42); box-shadow:inset 0 -9px #1c2629,0 8px 12px #2338; cursor:pointer; transition:.1s; }
.challenge-light.glowing { background:radial-gradient(circle at 35% 30%,#fff 0 7%,#fff75c 16%,#ffad25 50%,#ff4b37 85%); border-color:#fff; transform:scale(1.14); box-shadow:0 0 15px #fff,0 0 35px #ffe33d,0 0 55px #ff7b28,inset 0 -7px #d83327; animation:lightPulse .4s infinite alternate; }
.challenge-light.wrong { background:#ed3652; animation:shake .2s; }
.light-message { color:#713c26; font-weight:900; min-height:24px; }
@keyframes lightPulse { to { transform:scale(1.22); filter:brightness(1.2); } }
@keyframes shake { 25%{transform:translateX(-7px)}75%{transform:translateX(7px)} }
@keyframes pop { from { opacity:0; transform:scale(.85); } }
@keyframes bounce { to { transform:translateY(-18px) rotate(5deg); } }
@media(max-width:650px){ .game{padding:10px;min-height:96vh}.level,.sound{font-size:14px;padding:5px}.arena{height:250px}.big-animal{width:120px;height:150px}.fighter{width:120px}.animals{gap:10px}.animal{width:29%;font-size:18px}.animal .sprite{height:95px}.space-button{font-size:19px;padding:8px 25px}.light-grid{grid-template-columns:repeat(3,1fr);gap:12px}.lights-screen h2{font-size:30px}.challenge-light{border-width:5px} }