.game-pocket{display:flex;justify-content:flex-end;padding:0 0 30px}
.eco-teaser{display:inline-flex;align-items:center;gap:10px;border:1px solid #cbd9c5;border-radius:12px;background:#edf2e7;color:#18372b;padding:7px 11px;text-align:left;transition:background-color .2s}
.eco-teaser:hover{background:#e1ecda}
.eco-teaser small,.eco-teaser strong{display:block}
.eco-teaser small{font-size:.72rem;color:#476653;font-weight:400}
.eco-teaser strong{font-size:.92rem}
.eco-teaser-arrow{padding-left:6px}

/* Capivara ícone comum */
.capy{display:block;position:relative;width:38px;height:32px;flex:none;transform-origin:bottom center}
.capy-in-view .capy{animation:capy-peek 2.1s ease-in-out 2}
.eco-teaser:hover .capy{transform:rotate(-5deg)}
.capy i,.capy b,.capy em,.capy::before,.capy::after{position:absolute;display:block;content:"";background:#9b633d}
.capy::before{width:32px;height:20px;border-radius:18px 12px 8px 10px;bottom:4px;left:1px}
.capy::after{width:18px;height:20px;border-radius:9px 12px 6px 6px;bottom:8px;right:1px;background:#b97c50}
.capy i{width:7px;height:8px;top:2px;right:11px;border-radius:50%;z-index:1;background:#754a33}
.capy b{width:3px;height:3px;top:11px;right:9px;border-radius:50%;z-index:2;background:#2d291e}
.capy em{width:5px;height:4px;bottom:12px;right:1px;border-radius:4px;z-index:2;background:#6b4232}
@keyframes capy-peek{0%,76%,96%,100%{transform:translateY(0) rotate(0)}83%{transform:translateY(-4px) rotate(-7deg)}90%{transform:translateY(-1px) rotate(4deg)}}

/* Diálogo do Jogo */
.eco-game{width:min(calc(100% - 20px),560px);max-height:calc(100dvh - 20px);margin:auto;padding:0;border:1px solid #c7d7c4;border-radius:18px;background:#f9fcf5;color:#19382c;box-shadow:0 25px 70px #071f1ac0;overscroll-behavior:contain}
.eco-game::backdrop{background:#0e241caa}
body:has(.eco-game[open]){overflow:hidden}
.eco-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:#19382c;color:#eff8e7}
.eco-head-tag{display:block;font-size:.65rem;letter-spacing:.14em;color:#d6eea7;font-weight:800}
.eco-head h2{font-size:clamp(1.45rem,4.6vw,1.95rem);margin-top:2px}
.eco-close{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;border:1px solid #6e8f7e;background:transparent;color:#fff;font-size:1.65rem;line-height:1;cursor:pointer}
.eco-close:hover{background:#385b48}
.eco-play,.eco-end{padding:13px 16px 16px}
.eco-instructions{font-size:.88rem;margin-bottom:9px;color:#2c4b3a;font-weight:600}
.eco-stats{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:650;color:#3e5c4a}
.eco-stats strong{font-size:.98rem;color:#19382c;font-variant-numeric:tabular-nums}
.eco-track{height:21px;position:relative;margin:3px 10px 10px 5px;--runner:0%}
.eco-track::before,.eco-track>[data-eco-progress]{content:"";position:absolute;inset:auto 0 0;height:4px;border-radius:5px;background:#d9e6d4}
.eco-track>[data-eco-progress]{background:#598645;transform-origin:right;transform:scaleX(var(--remaining,1))}
.eco-track .capy-runner{position:absolute;left:var(--runner);bottom:0;transform:translateX(-39%) scale(.68);transform-origin:bottom center}
.capy-legs{position:absolute;bottom:1px;left:8px;width:5px;height:9px;border-radius:4px;background:#865331;box-shadow:15px 0 #865331}
.eco-game[data-playing="true"] .capy-legs{animation:capy-steps .35s ease-in-out infinite alternate}
.eco-game[data-playing="true"] .eco-track[data-fast="true"] .capy-legs{animation-duration:.24s}
@keyframes capy-steps{from{transform:skewX(-22deg)}to{transform:skewX(22deg)}}

/* Arena do jogo - cenário e objeto grande */
.eco-arena{height:clamp(142px,31dvh,210px);position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid #b8ceb4;border-radius:14px;background:linear-gradient(180deg,#dbeef1 0%,#eaf3e5 60%,#dbe9dc 100%)}
.eco-arena-lines{position:absolute;inset:0;background:linear-gradient(0deg,transparent 93%,#a9c4a4 93%),repeating-linear-gradient(90deg,transparent 0 32px,#cbe0c8 32px 34px);opacity:.75}
.eco-countdown{position:relative;color:#214c33;font-size:2.2rem;font-weight:900;text-shadow:0 2px 8px rgba(255,255,255,.8)}

.eco-object{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid #366b44;border-radius:14px;padding:6px 16px;display:flex;align-items:center;gap:12px;max-width:95%;box-shadow:0 6px 20px rgba(18,51,32,.22);white-space:nowrap}
.eco-object .eco-symbol{font-size:clamp(2.3rem,6.5vw,3.1rem);line-height:1;display:inline-block}
.eco-object .eco-name{font-size:clamp(1.05rem,3.4vw,1.32rem);font-weight:800;color:#113324;letter-spacing:-.01em}

/* Lixeiras do jogo */
.eco-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.eco-bins[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.eco-bins[data-columns="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.eco-bins button{display:grid;position:relative;justify-items:center;align-content:center;min-height:56px;border:1px solid #9cb4a1;border-bottom:4px solid #6b8f78;border-radius:9px;padding:4px 2px;background:#e4efe5;color:#18372b;line-height:1.08;cursor:pointer;transition:transform .08s,filter .1s}
.eco-bins button[data-bin="plasticos"]{background:#f9ebd8;border-color:#be9c5f;border-bottom-color:#9a793d}
.eco-bins button[data-bin="eletronicos"]{background:#e7ecfa;border-color:#95a6d0;border-bottom-color:#6c7ea7}
.eco-bins button[data-bin="vidro"]{background:#e2f4f1;border-color:#84b5b0;border-bottom-color:#5d8d88}
.eco-bins button[data-bin="organicos"]{background:#f4eae4;border-color:#c4a28f;border-bottom-color:#9e7965}
.eco-bins button:not(:disabled):hover,.eco-bins button:not(:disabled):active{filter:brightness(.92);transform:scale(.98)}
.eco-bins button:disabled{cursor:default;opacity:.9}
.eco-bins button span{font-size:1.15rem}
.eco-bins button strong{font-size:clamp(.68rem,2.2vw,.88rem);margin-top:2px}
.eco-bins button small{font-size:.62rem;color:#456453;font-weight:700}
.eco-bins button.paw-hit{box-shadow:0 0 0 3px #36793f;border-color:#2e6b36;transform:scale(1.04)}

/* Perspectiva em primeira pessoa: Patinha peluda com garrinhas da Capivara */
.capy-fp-view{position:relative;height:78px;margin:2px auto 0;display:flex;justify-content:space-between;align-items:flex-end;max-width:440px;padding:0 24px;pointer-events:none;overflow:visible}
.capy-fp-arm{position:relative;width:60px;height:78px;transform-origin:bottom center;transition:transform .14s cubic-bezier(.16,1,.3,1)}
.capy-fp-left{transform:rotate(-14deg)}
.capy-fp-right{transform:rotate(14deg)}

.eco-game[open] .capy-fp-left:not(.reaching):not(.arm-strike){animation:capy-arm-idle-left 2s ease-in-out infinite alternate}
.eco-game[open] .capy-fp-right:not(.reaching):not(.arm-strike){animation:capy-arm-idle-right 2s ease-in-out infinite alternate .35s}

@keyframes capy-arm-idle-left{
  0%{transform:translateY(0) rotate(-14deg)}
  50%{transform:translateY(-6px) rotate(-9deg)}
  100%{transform:translateY(-2px) rotate(-16deg)}
}
@keyframes capy-arm-idle-right{
  0%{transform:translateY(0) rotate(14deg)}
  50%{transform:translateY(-6px) rotate(9deg)}
  100%{transform:translateY(-2px) rotate(16deg)}
}

/* Golpe de pata batendo na lixeira selecionada */
.capy-fp-arm.arm-strike{animation:capy-arm-slam .34s cubic-bezier(.12,.9,.24,1) forwards!important}
@keyframes capy-arm-slam{
  0%{transform:translate(0, 0) scale(1)}
  35%{transform:translate(var(--strike-x, 0px), -48px) scale(1.22)}
  70%{transform:translate(var(--strike-x, 0px), -36px) scale(1.12)}
  100%{transform:translate(0, 0) scale(1)}
}

/* Braço peludo castanho */
.capy-arm-fur{position:absolute;inset:12px 6px 0;background:linear-gradient(180deg,#9b633d 0%,#7d4d2d 60%,#5d361c 100%);border-radius:20px 20px 8px 8px;box-shadow:inset 3px 0 6px rgba(255,255,255,.18),inset -4px 0 6px rgba(0,0,0,.28)}

/* Pata arredondada */
.capy-arm-paw{position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:40px;background:#aa7047;border-radius:24px 24px 14px 14px;border:1px solid #6b3e21;box-shadow:0 4px 10px rgba(0,0,0,.22),inset 0 2px 5px rgba(255,255,255,.28)}

/* Almofada da pata */
.capy-pad{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:24px;height:14px;background:#7a4627;border-radius:50%;opacity:.9;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}

/* 4 garrinhas da capivara */
.capy-claws{position:absolute;top:-8px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.capy-claws i{display:block;width:5px;height:13px;background:linear-gradient(180deg,#150d08 0%,#3d2719 55%,#1c1008 100%);border-radius:3px 3px 1px 1px;box-shadow:0 -1px 3px rgba(0,0,0,.45)}
.capy-claws i:first-child,.capy-claws i:last-child{height:10px;margin-top:3px}

.eco-feedback{font-size:.85rem;min-height:2.2em;margin-top:6px;font-weight:600}
.eco-feedback[data-feedback="right"]{color:#205a2e;font-weight:750}
.eco-feedback[data-feedback="wrong"]{color:#783f12;font-weight:750}
.eco-end{text-align:center;padding-block:23px}
.eco-medal{margin:0 auto 11px;width:47px;height:47px;display:grid;place-items:center;border-radius:50%;background:#daedb7;font-size:1.5rem}
.eco-end p{margin:9px auto 15px;max-width:38ch}
.eco-end>div{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.game-page{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.game-page h2{margin:9px 0}.game-page .eco-teaser,.game-page .button{margin-top:13px}
@media(max-width:600px){.game-page{grid-template-columns:1fr}.game-pocket{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){
  .capy-in-view .capy,.eco-game[data-playing="true"] .capy-legs,.capy-fp-arm,.capy-fp-arm.arm-strike{animation:none!important}
  .eco-teaser{transition:none}
}