.zoo-game {
	--zg-sky1:#bfe6ff; --zg-sky2:#e9f7ff; --zg-grass:#8fcf6b; --zg-grass2:#6fb64f;
	--zg-ink:#23324a; --zg-accent:#ff8a3d; --zg-accent-d:#e06a1d; --zg-ok:#2e9e6a; --zg-ko:#e2474b;
	--zg-card:#fffdf7;
	position:relative; max-width:960px; margin:1.5em auto; padding:0;
	font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
	color:var(--zg-ink); line-height:1.3; box-sizing:border-box;
}
.zoo-game *, .zoo-game *::before, .zoo-game *::after { box-sizing:border-box; }

.zoo-game .zg-stage {
	position:relative; overflow:hidden; border-radius:24px; min-height:440px;
	background:linear-gradient(180deg,var(--zg-sky1) 0%,var(--zg-sky2) 62%,var(--zg-grass) 62%,var(--zg-grass2) 100%);
	box-shadow:0 10px 30px rgba(35,50,74,.15); padding:28px 20px 32px;
	display:flex; flex-direction:column; align-items:center;
}
.zoo-game .zg-sun { position:absolute; top:-30px; right:-30px; width:140px; height:140px; border-radius:50%; background:#ffd84d; box-shadow:0 0 0 18px rgba(255,216,77,.3); pointer-events:none; }
.zoo-game .zg-cloud { position:absolute; height:28px; width:90px; background:#fff; border-radius:30px; opacity:.85; pointer-events:none; animation:zg-drift 40s linear infinite; }
.zoo-game .zg-cloud::before { content:""; position:absolute; width:44px; height:44px; background:#fff; border-radius:50%; top:-20px; left:16px; }
.zoo-game .zg-cloud.c1 { top:40px; left:-100px; }
.zoo-game .zg-cloud.c2 { top:96px; left:-100px; animation-duration:58s; animation-delay:-25s; transform:scale(.7); }
@keyframes zg-drift { from { left:-120px; } to { left:110%; } }

.zoo-game .zg-title { position:relative; margin:0; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:800; letter-spacing:-.01em; text-align:center; color:var(--zg-ink); }
.zoo-game .zg-sub { position:relative; margin:.3em 0 0; font-size:1.1rem; text-align:center; opacity:.8; }

.zoo-game button.zg-btn {
	all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:.5em;
	background:var(--zg-accent); color:#fff; font:inherit; font-weight:800; font-size:1.2rem;
	padding:.7em 1.6em; border-radius:999px; box-shadow:0 5px 0 var(--zg-accent-d);
	transition:transform .1s, box-shadow .1s;
}
.zoo-game button.zg-btn:hover { filter:brightness(1.05); }
.zoo-game button.zg-btn:active { transform:translateY(4px); box-shadow:0 1px 0 var(--zg-accent-d); }
.zoo-game button.zg-btn:focus-visible { outline:3px solid var(--zg-ink); outline-offset:3px; }

.zoo-game .zg-intro { position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; margin:auto 0; padding-top:10px; }
.zoo-game .zg-parade { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.zoo-game .zg-parade img { width:84px; height:84px; object-fit:contain; animation:zg-bob 2.4s ease-in-out infinite; }
.zoo-game .zg-parade img:nth-child(2n) { animation-delay:-.6s; }
.zoo-game .zg-parade img:nth-child(3n) { animation-delay:-1.2s; }
@keyframes zg-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.zoo-game .zg-top { position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.zoo-game .zg-progress { display:flex; gap:6px; flex-wrap:wrap; }
.zoo-game .zg-dot { width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.75); border:2px solid rgba(35,50,74,.2); }
.zoo-game .zg-dot.done { background:var(--zg-ok); border-color:var(--zg-ok); }
.zoo-game .zg-dot.now { background:var(--zg-accent); border-color:var(--zg-accent); transform:scale(1.2); }

.zoo-game .zg-prompt-wrap { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; }
.zoo-game .zg-prompt { margin:0; font-size:clamp(1.5rem,4.4vw,2.3rem); font-weight:800; }
.zoo-game .zg-prompt b { color:var(--zg-accent-d); }
.zoo-game button.zg-speak {
	all:unset; cursor:pointer; width:48px; height:48px; border-radius:50%; background:#fff; display:grid; place-items:center;
	box-shadow:0 3px 0 rgba(35,50,74,.2); font-size:1.4rem;
}
.zoo-game button.zg-speak:focus-visible { outline:3px solid var(--zg-ink); outline-offset:3px; }
.zoo-game button.zg-speak.talking { animation:zg-pulse .8s ease-in-out infinite; }
@keyframes zg-pulse { 50% { transform:scale(1.12); } }

.zoo-game .zg-grid {
	position:relative; width:100%; display:grid; gap:16px; margin-top:20px;
	grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.zoo-game button.zg-animal {
	all:unset; box-sizing:border-box; cursor:pointer; position:relative; aspect-ratio:1/1;
	background:var(--zg-card); border-radius:20px; padding:10px; display:grid; place-items:center;
	box-shadow:0 6px 0 rgba(35,50,74,.12), 0 8px 18px rgba(35,50,74,.08); border:4px solid transparent;
	transition:transform .15s, border-color .15s;
}
.zoo-game button.zg-animal img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.zoo-game button.zg-animal:hover { transform:translateY(-4px) rotate(-1deg); }
.zoo-game button.zg-animal:focus-visible { outline:3px solid var(--zg-ink); outline-offset:3px; }
.zoo-game button.zg-animal.ok { border-color:var(--zg-ok); animation:zg-jump .6s ease; }
.zoo-game button.zg-animal.ko { border-color:var(--zg-ko); animation:zg-shake .45s ease; }
.zoo-game button.zg-animal.dim { opacity:.35; filter:grayscale(.6); cursor:default; transform:none; }
.zoo-game button.zg-animal .zg-label {
	position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:var(--zg-ok); color:#fff;
	font-weight:800; padding:.15em .7em; border-radius:999px; font-size:1rem; white-space:nowrap;
}
@keyframes zg-shake { 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
@keyframes zg-jump { 40% { transform:translateY(-16px) scale(1.05); } }

.zoo-game .zg-feedback { position:relative; min-height:64px; margin-top:22px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.zoo-game .zg-msg { font-size:1.4rem; font-weight:800; padding:.3em .9em; border-radius:12px; background:rgba(255,255,255,.9); }
.zoo-game .zg-msg.ok { color:var(--zg-ok); }
.zoo-game .zg-msg.ko { color:var(--zg-ko); }

.zoo-game .zg-end { position:relative; margin:auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.zoo-game .zg-stars { font-size:3rem; letter-spacing:.1em; }
.zoo-game .zg-stars span { display:inline-block; animation:zg-pop .5s backwards; }
.zoo-game .zg-stars span.off { filter:grayscale(1); opacity:.35; }
.zoo-game .zg-end p { margin:0; font-size:1.2rem; background:rgba(255,255,255,.85); padding:.4em 1em; border-radius:12px; }
@keyframes zg-pop { from { transform:scale(0); } 70% { transform:scale(1.3); } }

.zoo-game .zg-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.zoo-game .zg-confetti i { position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; animation:zg-fall 1.6s ease-in forwards; }
@keyframes zg-fall { to { transform:translateY(520px) rotate(540deg); opacity:0; } }

@media (max-width:520px) {
	.zoo-game .zg-stage { padding:20px 12px 24px; border-radius:16px; }
	.zoo-game .zg-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
	.zoo-game .zg-parade img { width:60px; height:60px; }
}
@media (prefers-reduced-motion:reduce) {
	.zoo-game *, .zoo-game *::before { animation:none !important; transition:none !important; }
}