/* ===== ANIMAL ORCHESTRA ===== */
.ao-wrapper{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}

/* Stage */
.ao-stage{background:linear-gradient(160deg,#1a0050 0%,#0d0030 50%,#1a0050 100%);border-radius:28px;padding:32px 24px 24px;border:3px solid rgba(255,200,50,.3);position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ao-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,200,50,.08) 0%,transparent 70%);pointer-events:none}

/* Stars */
.ao-star{position:absolute;font-size:20px;animation:ao-twinkle 2s ease-in-out infinite alternate;pointer-events:none}
.ao-star:nth-child(2){animation-delay:.5s}
.ao-star:nth-child(3){animation-delay:1s}
@keyframes ao-twinkle{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}

/* Animals Grid */
.ao-animals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Animal Card */
.ao-animal-card{
    background:linear-gradient(160deg,var(--card-bg,#2d0060),var(--card-bg2,#1a003d));
    border:3px solid var(--card-border,rgba(255,255,255,.15));
    border-radius:20px;padding:20px 12px;text-align:center;cursor:pointer;
    transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;
    user-select:none;-webkit-tap-highlight-color:transparent
}
.ao-animal-card:nth-child(1){--card-bg:#3d1a00;--card-bg2:#1a0800;--card-border:rgba(255,150,50,.4)}
.ao-animal-card:nth-child(2){--card-bg:#1a3d00;--card-bg2:#0a2000;--card-border:rgba(100,255,50,.4)}
.ao-animal-card:nth-child(3){--card-bg:#003d1a;--card-bg2:#001a0a;--card-border:rgba(50,255,150,.4)}
.ao-animal-card:nth-child(4){--card-bg:#00233d;--card-bg2:#000d1a;--card-border:rgba(50,150,255,.4)}
.ao-animal-card:nth-child(5){--card-bg:#1a003d;--card-bg2:#0d0020;--card-border:rgba(150,50,255,.4)}
.ao-animal-card:nth-child(6){--card-bg:#3d001a;--card-bg2:#1a000a;--card-border:rgba(255,50,150,.4)}
.ao-animal-card:nth-child(7){--card-bg:#3d3d00;--card-bg2:#1a1a00;--card-border:rgba(255,255,50,.4)}
.ao-animal-card:nth-child(8){--card-bg:#003d3d;--card-bg2:#001a1a;--card-border:rgba(50,255,255,.4)}

.ao-animal-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 10px 30px rgba(255,255,255,.1)}
.ao-animal-card:active{transform:scale(.95)}
.ao-animal-card.playing{animation:ao-bounce-card .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes ao-bounce-card{0%,100%{transform:scale(1)}25%{transform:scale(1.15) rotate(-3deg)}75%{transform:scale(1.1) rotate(3deg)}}

.ao-animal-emoji{font-size:52px;margin-bottom:8px;display:block;transition:transform .15s;line-height:1}
.ao-animal-card.playing .ao-animal-emoji{animation:ao-dance .4s ease}
@keyframes ao-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(-8deg)}75%{transform:translateY(-8px) rotate(8deg)}}

.ao-animal-name{font-size:13px;font-weight:700;color:#fff;font-family:'Nunito','Poppins',sans-serif;margin-bottom:4px}
.ao-animal-note{font-size:11px;font-weight:900;color:rgba(255,255,100,.8);font-family:'Fredoka One','Poppins',sans-serif;background:rgba(0,0,0,.3);border-radius:20px;padding:2px 10px;display:inline-block}

/* Ripple */
.ao-ripple{position:absolute;inset:0;border-radius:17px;pointer-events:none}
.ao-ripple::after{content:'';position:absolute;inset:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.25);transform:translate(-50%,-50%)}
.ao-animal-card.playing .ao-ripple::after{animation:ao-ripple-anim .5s ease-out}
@keyframes ao-ripple-anim{0%{width:0;height:0;opacity:1}100%{width:200%;height:200%;opacity:0}}

/* Floating notes */
.ao-float-note{position:fixed;font-size:24px;pointer-events:none;animation:ao-float-up .8s ease forwards;z-index:9999}
@keyframes ao-float-up{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.5)}}

/* Songs Bar */
.ao-songs-bar{background:linear-gradient(135deg,#0d1a0d,#1a2d1a);border-radius:20px;padding:20px 24px;border:2px solid rgba(50,200,100,.2)}
.ao-songs-title{font-size:16px;font-weight:800;color:#50c850;margin-bottom:14px;text-align:center;font-family:'Fredoka One','Poppins',sans-serif}
.ao-songs-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.ao-song-btn{background:linear-gradient(135deg,#1a4d1a,#0d2d0d);border:2px solid rgba(50,200,100,.3);border-radius:12px;padding:10px 20px;font-size:14px;font-weight:700;color:#90ee90;cursor:pointer;transition:all .2s;font-family:'Nunito','Poppins',sans-serif}
.ao-song-btn:hover{border-color:#50c850;color:#50ff50;transform:translateY(-2px);box-shadow:0 5px 15px rgba(50,200,100,.3)}
.ao-song-btn.playing{background:linear-gradient(135deg,#2d7d2d,#1a4d1a);border-color:#50c850;color:#50ff50}
.ao-stop-btn{display:block;margin:0 auto;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;border-radius:12px;padding:10px 30px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif}
.ao-stop-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(231,76,60,.4)}

/* Score Bar */
.ao-score-bar{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;background:rgba(255,255,255,.05);border-radius:16px;padding:14px 24px;border:1px solid rgba(255,255,255,.1)}
.ao-score-item{font-size:14px;color:#ccc;font-family:'Nunito',sans-serif}
.ao-score-item strong{color:#ffd700;font-size:18px}
.ao-reset-btn{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:9px;padding:7px 16px;font-size:13px;font-weight:700;color:#ccc;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif}
.ao-reset-btn:hover{background:rgba(255,255,255,.2);color:#fff}

/* Confetti */
.ao-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.ao-confetti-piece{position:absolute;width:10px;height:10px;border-radius:2px;animation:ao-confetti-fall 1.5s ease forwards}
@keyframes ao-confetti-fall{0%{opacity:1;transform:translateY(-20px) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

@media(max-width:700px){
    .ao-animals-grid{grid-template-columns:repeat(4,1fr);gap:8px}
    .ao-animal-emoji{font-size:36px}
    .ao-animal-name{font-size:11px}
    .ao-animal-card{padding:12px 6px;border-radius:14px}
    .ao-songs-grid{gap:8px}
    .ao-song-btn{padding:8px 14px;font-size:12px}
}
@media(max-width:480px){
    .ao-animals-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .ao-animal-emoji{font-size:44px}
    .ao-animal-card{padding:16px 10px}
}