.badges-screen{max-width:1120px;margin:0 auto}.badges-screen .badges-panel,.badges-screen .premium-panel{position:relative;overflow:hidden;border-radius:34px!important;background:linear-gradient(180deg,rgba(8,27,19,.94),rgba(5,18,13,.98));box-shadow:0 28px 90px rgba(0,0,0,.32)}.badges-screen .badges-panel:before,.badges-screen .premium-panel:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#ffd166,#31e981);opacity:.95}.badges-screen .section-heading{align-items:flex-start}.badges-screen .section-heading>span{width:62px;height:62px;font-size:2rem;border-radius:22px;background:rgba(255,209,102,.14);box-shadow:0 14px 34px rgba(255,209,102,.14)}.badges-screen .section-heading h2{font-size:clamp(2rem,3.8vw,3.2rem);letter-spacing:-.08em;margin-bottom:6px}.badges-screen .section-heading p{font-size:1.02rem;line-height:1.55}.badges-screen .badges-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.badges-screen .badge-card{position:relative;min-height:178px;border-radius:28px!important;padding:20px!important;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);transition:transform .18s ease,border-color .18s ease,filter .18s ease}.badges-screen .badge-card:hover{transform:translateY(-3px);border-color:rgba(255,209,102,.38)!important}.badges-screen .badge-card:before{content:"🔒 Bloqueada";position:absolute;right:14px;top:14px;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:950;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#d8e7dd}.badges-screen .badge-card:after{content:"";position:absolute;right:-32px;bottom:-36px;width:130px;height:130px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 66%)}.badges-screen .badge-card>span{width:62px;height:62px;display:grid;place-items:center;border-radius:22px;background:rgba(255,255,255,.08);font-size:2rem;margin-bottom:14px;filter:grayscale(.85);opacity:.72}.badges-screen .badge-card strong{font-size:1.18rem;line-height:1.15;letter-spacing:-.035em;z-index:1}.badges-screen .badge-card small{margin-top:8px;color:#cfe8d8!important;font-size:.92rem;line-height:1.4;z-index:1}.badges-screen .badge-card.unlocked{background:radial-gradient(circle at 85% 15%,rgba(255,209,102,.22),transparent 32%),linear-gradient(135deg,rgba(49,233,129,.16),rgba(255,209,102,.08))!important;border-color:rgba(49,233,129,.46)!important;box-shadow:0 22px 60px rgba(49,233,129,.08),inset 0 0 0 1px rgba(255,255,255,.08)}.badges-screen .badge-card.unlocked:before{content:"✅ Conseguida";color:#052012;background:linear-gradient(135deg,#31e981,#ffd166);border-color:transparent}.badges-screen .badge-card.unlocked>span{background:rgba(255,255,255,.14);filter:none;opacity:1;animation:badgePulse 2.8s ease-in-out infinite}.badges-screen .badge-card.unlocked strong{color:#f8fff9}.badges-screen .badge-card.unlocked small{color:#eaffef!important}.badges-screen .premium-panel{margin-top:22px}.badges-screen .premium-panel h2{letter-spacing:-.05em}.badges-screen .premium-panel button{min-height:52px;border-radius:999px}.badges-screen:after{content:"Consejo: crea cuentos, guarda favoritos, prueba Audio mágico y usa distintos villanos para desbloquear nuevas insignias.";display:block;margin:18px auto 0;width:min(100%,780px);text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.14);border-radius:20px;padding:12px;background:rgba(255,255,255,.035)}.react-toast span{animation:toastPop .55s ease both}@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes toastPop{0%{transform:scale(.75) rotate(-6deg)}70%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}@media(max-width:920px){.badges-screen .badges-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.badges-screen .badges-panel,.badges-screen .premium-panel{border-radius:24px!important;padding:16px!important}.badges-screen .section-heading h2{font-size:2rem}.badges-screen:after{margin-bottom:88px;font-size:.9rem}}@media(max-width:520px){.badges-screen .badges-grid{grid-template-columns:1fr}.badges-screen .badge-card{min-height:150px}.badges-screen .badge-card>span{width:54px;height:54px;font-size:1.75rem;border-radius:18px}.badges-screen .badge-card:before{font-size:.68rem}}@media print{.badges-screen{display:none!important}}