/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;touch-action:manipulation}
body{font-family:'Nunito',sans-serif;background:#1a1a2e;color:#333}

/* ===== SCREENS ===== */
.screen{position:fixed;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;overflow:hidden}
.screen.active{display:flex;animation:screenEnter .35s cubic-bezier(.22,1,.36,1) both}
.screen.leaving{display:flex;animation:screenExit .25s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes screenEnter{0%{opacity:0;transform:scale(.96) translateY(12px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes screenExit{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.94) translateY(-8px)}}
.screen.game-enter{animation:gameZoomIn .4s cubic-bezier(.22,1,.36,1) both}
@keyframes gameZoomIn{0%{opacity:0;transform:scale(1.08)}60%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
.screen-flash{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;opacity:0;animation:screenFlash .35s ease-out both}
@keyframes screenFlash{0%{opacity:.25}100%{opacity:0}}

/* ===== LOADING ===== */
#loading-screen{background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);justify-content:center;align-items:center}
.loading-content{text-align:center;position:relative;z-index:2}
.loading-mascot{font-size:100px;animation:bounce 1s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));display:flex;justify-content:center;align-items:center;min-height:100px}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-25px) scale(1.05)}}
.loading-title{font-size:36px;font-weight:900;color:#fff;margin:15px 0 5px;text-shadow:0 4px 15px rgba(0,0,0,.3);animation:loadTitleIn .8s cubic-bezier(.34,1.56,.64,1) .3s both;background:linear-gradient(90deg,#fff,#FECA57,#fff);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes loadTitleIn{0%{opacity:0;transform:scale(.5) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.loading-subtitle{font-size:18px;color:rgba(255,255,255,.9);font-weight:600;margin-bottom:25px}
.loading-bar{width:220px;height:12px;background:rgba(255,255,255,.25);border-radius:10px;overflow:hidden;margin:0 auto}
.loading-progress{width:0%;height:100%;background:linear-gradient(90deg,#FECA57,#FF6B6B,#48DBFB);border-radius:10px;animation:load 2s ease-out forwards}
@keyframes load{to{width:100%}}
.loading-bubbles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.bubble{position:absolute;font-size:30px;opacity:.4;animation:bFloat 4s ease-in-out infinite}
.b1{top:10%;left:10%}.b2{top:15%;right:15%;animation-delay:.8s}.b3{bottom:20%;left:20%;animation-delay:1.6s}.b4{bottom:10%;right:25%;animation-delay:.4s}
@keyframes bFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-25px) rotate(15deg) scale(1.2)}}

/* ===== AGE ===== */
#age-screen{background:linear-gradient(180deg,#0c0c2c,#1a1a4e 40%,#2d1b69);justify-content:center;align-items:center;padding:20px}
.stars-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent),radial-gradient(2px 2px at 160px 120px,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 230px 80px,#fff,transparent),radial-gradient(2px 2px at 300px 150px,rgba(255,255,255,.7),transparent);background-size:350px 200px;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.6}}
.age-content{position:relative;z-index:1;text-align:center;width:100%;max-width:380px}
.mascot-speech{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:35px}
.mascot-avatar{font-size:60px;animation:mascotWave 2s ease-in-out infinite;filter:drop-shadow(0 5px 15px rgba(0,0,0,.3));flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mascot-avatar:has(.nena-char){animation:none}
@keyframes mascotWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.speech-bubble{background:#fff;border-radius:20px;padding:15px 20px;position:relative;box-shadow:0 8px 25px rgba(0,0,0,.2);text-align:center;max-width:280px}
.speech-bubble::before{content:'';position:absolute;left:50%;top:-14px;transform:translateX(-50%);border:8px solid transparent;border-bottom-color:#fff}
.speech-bubble p{font-size:16px;color:#333;line-height:1.4;font-weight:600}
.speech-bubble strong{color:#6C63FF;font-weight:900}
.age-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 5px}
.age-btn{aspect-ratio:1;border:none;border-radius:22px;background:var(--btn-color);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:inherit;transition:all .2s;box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 -4px 0 rgba(0,0,0,.15);position:relative;overflow:hidden}
.age-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);border-radius:22px 22px 0 0}
.age-btn:active{transform:scale(.92)}
.age-btn{animation:ageAppear .5s cubic-bezier(.34,1.56,.64,1) both}
.age-btn:nth-child(1){animation-delay:.1s}.age-btn:nth-child(2){animation-delay:.2s}.age-btn:nth-child(3){animation-delay:.3s}
.age-btn:nth-child(4){animation-delay:.4s}.age-btn:nth-child(5){animation-delay:.5s}.age-btn:nth-child(6){animation-delay:.6s}
@keyframes ageAppear{0%{opacity:0;transform:scale(0) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.age-number{font-size:38px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);position:relative;z-index:1;line-height:1}
.age-emoji{font-size:26px;margin-top:4px;position:relative;z-index:1}

/* ===== MENU ===== */
#menu-screen{background:linear-gradient(180deg,#87CEEB 0%,#98D8C8 60%,#7CB342 85%,#558B2F 100%);position:relative}
.menu-scene{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.scene-sky{position:absolute;top:0;left:0;width:100%;height:70%}
.sun{position:absolute;top:8%;right:12%;font-size:50px;animation:sunPulse 4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,200,0,.4))}
@keyframes sunPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(10deg)}}
.cloud{position:absolute;font-size:45px;opacity:.7;animation:drift 30s linear infinite}
.c1{top:5%;left:-15%;animation-duration:35s;font-size:38px}.c2{top:15%;left:-25%;animation-duration:40s;animation-delay:8s}.c3{top:3%;left:-20%;animation-duration:28s;animation-delay:15s;font-size:32px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 120px))}}
.butterfly{position:absolute;font-size:22px;animation:bfFly 8s ease-in-out infinite,bfWing .4s ease-in-out infinite alternate}
.bf1{top:25%;left:10%;animation-delay:0s,.1s}.bf2{top:35%;right:15%;animation-delay:3s,.2s;animation-duration:10s,.35s}
@keyframes bfFly{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(40px,-20px) scaleX(-1)}50%{transform:translate(80px,10px) scaleX(1)}75%{transform:translate(30px,-10px) scaleX(-1)}100%{transform:translate(0,0) scaleX(1)}}
@keyframes bfWing{0%{transform:scaleY(1)}100%{transform:scaleY(.6)}}
.scene-grass{position:absolute;bottom:0;left:0;width:100%;height:20%;background:linear-gradient(180deg,#7CB342,#558B2F);border-radius:50% 50% 0 0 / 20px 20px 0 0}
.scene-grass::before{content:'🌻🌷🌼🌻🌷🌼🌻🌷';position:absolute;top:-15px;left:5%;font-size:18px;letter-spacing:20px;opacity:.6}
.scene-grass::after{content:'🌱🌿🍀🌱🌿🍀🌱🌿🍀';position:absolute;top:-8px;right:8%;font-size:12px;letter-spacing:15px;opacity:.4;animation:grassSway 4s ease-in-out infinite}
@keyframes grassSway{0%,100%{transform:skewX(0)}50%{transform:skewX(3deg)}}
.menu-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;padding-top:max(10px,calc(env(safe-area-inset-top) + 4px));position:relative;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 80%,transparent);gap:8px;min-height:50px}
.back-btn{width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.92);font-size:18px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:transform .15s;color:#333;font-weight:700;padding:0;line-height:1;flex-shrink:0}
.back-btn span{display:flex;align-items:center;justify-content:center;line-height:1;margin:0;padding:0}
.back-btn:active{transform:scale(.9)}
.menu-coins{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);padding:6px 16px;border-radius:25px;box-shadow:0 3px 10px rgba(0,0,0,.1);cursor:pointer;flex-shrink:0}
.menu-coins:active{transform:scale(.95)}
.coin-icon{font-size:18px}.coin-count{font-size:17px;font-weight:800;color:#F39C12}
.player-age-badge{background:linear-gradient(145deg,#6C63FF,#5a52e0);padding:6px 12px;border-radius:50px;display:flex;align-items:baseline;gap:4px;box-shadow:0 3px 10px rgba(108,99,255,.35);cursor:pointer;flex-shrink:0}
.player-age-badge:active{transform:scale(.95)}
#player-age-display{font-size:18px;font-weight:900;color:#fff}
.age-label{font-size:10px;color:rgba(255,255,255,.8);font-weight:700}
.menu-bottom-nav{display:flex;justify-content:space-around;align-items:flex-end;padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:rgba(0,0,0,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;z-index:2;gap:4px}
.bottom-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.15);border:none;border-radius:16px;padding:10px 6px;cursor:pointer;transition:all .15s;touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}
.nav-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:navRipple .5s ease-out forwards;pointer-events:none;z-index:10}
@keyframes navRipple{0%{transform:scale(0);opacity:.6}100%{transform:scale(3);opacity:0}}
.bottom-nav-btn:active{transform:scale(.92);background:rgba(255,255,255,.28)}
.bottom-nav-icon{font-size:26px;line-height:1.2}
.bottom-nav-label{font-size:12px;font-weight:800;color:rgba(255,255,255,.9);line-height:1}
.bottom-nav-more{background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.25)}
.more-drawer{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .25s ease}
.more-drawer.open{pointer-events:auto;opacity:1}
.more-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.more-drawer-panel{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(145deg,#6C63FF,#5a52e0);border-radius:28px 28px 0 0;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.more-drawer.open .more-drawer-panel{transform:translateY(0)}
.more-drawer-title{text-align:center;font-size:18px;font-weight:900;color:#fff;margin-bottom:16px;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.more-drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.more-drawer-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.18);border:none;border-radius:18px;padding:16px 8px;cursor:pointer;transition:all .15s;touch-action:manipulation;position:relative;overflow:hidden}
.more-drawer-btn:active{transform:scale(.92);background:rgba(255,255,255,.3)}
.more-drawer-icon{font-size:32px;line-height:1.2}
.more-drawer-label{font-size:13px;font-weight:800;color:#fff;line-height:1}
.more-drawer-parent{opacity:.6}
.menu-content{flex:1;padding:5px 16px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;z-index:1;margin-top:2px}
.menu-mascot{text-align:center;margin-bottom:8px}
/* Pet flutuante fixo na tela do menu */
.pet-float{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s;margin-top:-20px;margin-left:12px;margin-right:12px}
.pet-float:active{transform:scale(.92)}
.pet-float-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.8));display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 16px rgba(0,0,0,.18),0 0 0 3px rgba(255,255,255,.6);animation:petFloatBob 2.5s ease-in-out infinite}
@keyframes petFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pet-float-name{font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);margin-top:2px;text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis}
.pet-float-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border-radius:14px;padding:6px 12px;font-size:12px;font-weight:700;color:#333;box-shadow:0 3px 12px rgba(0,0,0,.18);white-space:nowrap;max-width:170px;animation:petBubblePop .3s ease;z-index:20}
.pet-float-bubble::after{content:'';position:absolute;bottom:-6px;left:50%;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff}
@keyframes petBubblePop{from{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.pet-float-avatar.pet-alert{animation:petFloatBob 2.5s ease-in-out infinite,petAlertWiggle 1.2s ease-in-out infinite!important;box-shadow:0 4px 16px rgba(231,76,60,.3),0 0 0 3px rgba(231,76,60,.5)!important}
@keyframes petAlertWiggle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-6deg)}75%{transform:translateY(-4px) rotate(6deg)}}
.menu-pet-status{display:none}
.menu-pet-alert{display:none}
.mascot-bounce{font-size:50px;display:inline-flex;align-items:center;justify-content:center;animation:mascotAlive 3s ease-in-out infinite, mascotBreathe 4s ease-in-out infinite;filter:drop-shadow(0 8px 15px rgba(0,0,0,.15));cursor:pointer}
.mascot-bounce:has(.nena-char){animation:mascotAlive 3s ease-in-out infinite;font-size:unset}
@keyframes mascotAlive{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-3deg)}50%{transform:translateY(-5px) rotate(0)}75%{transform:translateY(-12px) rotate(3deg)}}
@keyframes mascotBreathe{0%,100%{font-size:50px}50%{font-size:52.5px}}
@keyframes mascotTapReact{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.3) rotate(-15deg)}50%{transform:scale(0.9) rotate(10deg)}70%{transform:scale(1.15) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes gentleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mascot-greeting{font-size:22px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);transition:all .3s ease;margin-top:58px;position:relative;z-index:1}

/* Category */
/* Pre-menu category cards */
.premenu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.premenu-card{border:none;border-radius:22px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25);color:white;text-align:center}
.premenu-card:active{transform:scale(.95)}
.premenu-icon{font-size:40px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.2));animation:cardIconFloat 3s ease-in-out infinite}
.premenu-title{font-size:18px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.premenu-desc{font-size:11px;font-weight:600;opacity:.85;line-height:1.3}
.premenu-count{font-size:10px;font-weight:700;background:rgba(255,255,255,.2);border-radius:10px;padding:2px 10px;margin-top:2px}
.category-back-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.category-back-btn{background:rgba(255,255,255,.15);border:none;border-radius:14px;padding:8px 16px;color:white;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px}
.category-back-btn:active{transform:scale(.95)}
.category-back-title{font-size:18px;font-weight:800;color:rgba(255,255,255,.9)}
.menu-category{margin-bottom:14px}
.category-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-left:4px}
.category-icon{font-size:22px}
.category-title{font-size:15px;font-weight:800;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.2)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.show-other-ages-link{display:block;width:100%;margin:16px 0 8px;background:none;border:none;color:rgba(255,255,255,0.5);font-size:13px;text-decoration:underline;cursor:pointer;padding:10px 16px;font-family:inherit;text-align:center}
.show-other-ages-link:active{color:rgba(255,255,255,0.8)}
.extra-age-games{opacity:0.6}
.game-card{aspect-ratio:1;border:none;border-radius:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:inherit;transition:all .2s;box-shadow:0 6px 18px rgba(0,0,0,.15),inset 0 -3px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.2);position:relative;overflow:hidden}
.game-card::before{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);border-radius:20px 20px 0 0;z-index:1}
.game-card:active{transform:scale(.93)}
.game-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 -3px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.2)}
.game-card-icon{font-size:36px;margin-bottom:3px;position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:cardIconFloat 3s ease-in-out infinite}
@keyframes cardIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.game-card-title{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);position:relative;z-index:2}
.game-card-progress{position:absolute;bottom:4px;display:flex;gap:1px;z-index:2}
.game-card-progress .mini-star{font-size:8px;opacity:.8}
.game-card.locked{opacity:.35;filter:grayscale(60%)}
.game-card.locked::after{content:'🔒';position:absolute;font-size:24px;z-index:3}
.game-card.toy-card{border:2px dashed rgba(255,255,255,.3)}

/* Card decorative background shapes per category */
.card-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.card-deco::before,.card-deco::after{content:'';position:absolute;border-radius:50%;opacity:.12}

/* Learn: floating circles (knowledge bubbles) */
.game-card[data-cat="learn"] .card-deco::before{width:40px;height:40px;background:rgba(255,255,255,.25);top:-8px;right:-8px;box-shadow:22px 45px 0 8px rgba(255,255,255,.1),-15px 55px 0 4px rgba(255,255,255,.15)}
.game-card[data-cat="learn"] .card-deco::after{width:18px;height:18px;background:rgba(255,255,255,.2);bottom:8px;left:-2px;box-shadow:50px -10px 0 6px rgba(255,255,255,.08)}

/* Play: diagonal stripes (energy/motion) */
.game-card[data-cat="play"] .card-deco::before{width:120%;height:12px;border-radius:0;top:15%;left:-10%;background:rgba(255,255,255,.06);transform:rotate(-25deg)}
.game-card[data-cat="play"] .card-deco::after{width:120%;height:8px;border-radius:0;bottom:20%;left:-10%;background:rgba(255,255,255,.05);transform:rotate(-25deg);box-shadow:0 -20px 0 0 rgba(255,255,255,.04)}

/* Create: splatter dots (creativity) */
.game-card[data-cat="create"] .card-deco::before{width:14px;height:14px;background:rgba(255,255,255,.22);top:8px;left:6px;box-shadow:28px 5px 0 3px rgba(255,255,255,.12),8px 50px 0 6px rgba(255,255,255,.1),48px 40px 0 2px rgba(255,255,255,.15)}
.game-card[data-cat="create"] .card-deco::after{width:10px;height:10px;background:rgba(255,255,255,.18);bottom:14px;right:8px;box-shadow:-25px -8px 0 4px rgba(255,255,255,.08)}

/* Toy: star sparkles (fun/magic) */
.game-card[data-cat="toy"] .card-deco::before{width:6px;height:6px;background:rgba(255,255,255,.35);top:12px;right:14px;box-shadow:20px 25px 0 2px rgba(255,255,255,.2),-10px 40px 0 1px rgba(255,255,255,.25),35px 50px 0 3px rgba(255,255,255,.15),-5px 15px 0 1px rgba(255,255,255,.2);animation:decoTwinkle 4s ease-in-out infinite}
.game-card[data-cat="toy"] .card-deco::after{width:4px;height:4px;background:rgba(255,255,255,.3);bottom:18px;left:10px;box-shadow:25px -5px 0 2px rgba(255,255,255,.18),40px 8px 0 1px rgba(255,255,255,.22);animation:decoTwinkle 4s ease-in-out 2s infinite}
@keyframes decoTwinkle{0%,100%{opacity:.12}50%{opacity:.25}}

/* Smart Filter Badges */
.game-card-badge{position:absolute;top:4px;right:4px;font-size:8px;font-weight:900;padding:2px 6px;border-radius:8px;z-index:3;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}
.badge-new{background:linear-gradient(135deg,#FECA57,#FF9F43);color:#7c4a00;box-shadow:0 2px 6px rgba(255,159,67,.4);animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Difficulty indicator */
.game-card-diff{position:absolute;top:4px;left:4px;font-size:10px;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* Recommended section */
.recommended-category{background:rgba(255,255,255,.1);border-radius:16px;padding:10px;margin-bottom:14px}
.recommended-category .category-header{margin-bottom:10px}

/* Age hint in category header */
.category-age-hint{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);margin-left:auto;padding:2px 8px;background:rgba(255,255,255,.15);border-radius:10px}

/* Game count in category header */
.category-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);margin-left:auto;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:10px}

/* Card stagger animation */
.category-grid .game-card{animation:cardAppear .4s cubic-bezier(.34,1.56,.64,1) both}
.category-grid .game-card:nth-child(1){animation-delay:.05s}
.category-grid .game-card:nth-child(2){animation-delay:.1s}
.category-grid .game-card:nth-child(3){animation-delay:.15s}
.category-grid .game-card:nth-child(4){animation-delay:.2s}
.category-grid .game-card:nth-child(5){animation-delay:.25s}
.category-grid .game-card:nth-child(6){animation-delay:.3s}
.category-grid .game-card:nth-child(7){animation-delay:.35s}
.category-grid .game-card:nth-child(8){animation-delay:.4s}
@keyframes cardAppear{0%{opacity:0;transform:scale(.5) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* Card shimmer effect */
.game-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translateX(-100%);z-index:1;pointer-events:none}
.game-card:active::after{animation:cardShimmer .6s ease forwards}
@keyframes cardShimmer{to{transform:translateX(100%)}}

/* ===== PROGRESS ===== */
#progress-screen{background:linear-gradient(180deg,#667eea,#764ba2)}
.progress-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.progress-title{color:#fff;font-size:20px;font-weight:800}
.progress-total{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);padding:8px 14px;border-radius:20px}
.progress-total span{color:#fff;font-weight:800;font-size:18px}
.progress-content{flex:1;padding:15px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.progress-game-card{background:rgba(255,255,255,.15);border-radius:16px;padding:12px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.progress-game-icon{font-size:35px;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.progress-game-info{flex:1}
.progress-game-name{color:#fff;font-size:15px;font-weight:800;margin-bottom:3px}
.progress-game-detail{color:rgba(255,255,255,.7);font-size:12px;font-weight:600}
.progress-summary{display:flex;justify-content:center;gap:20px;padding:15px;margin-bottom:12px;background:rgba(255,255,255,.1);border-radius:18px;animation:fadeIn .4s ease}
.progress-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.progress-stat-num{font-size:28px;font-weight:900;color:#FECA57;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.progress-stat-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.7)}
.progress-bar-container{width:100%;height:6px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin-top:4px}
.progress-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}
.progress-game-card{cursor:pointer;transition:transform .15s}
.progress-game-card:active{transform:scale(.97)}
.progress-level-dots{display:flex;gap:3px;margin-top:4px}
.level-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.level-dot.completed{background:#FECA57}
.level-dot.perfect{background:#4ECDC4;box-shadow:0 0 4px rgba(78,205,196,.5)}

/* ===== GAME SCREENS ===== */
.game-screen{background:linear-gradient(180deg,#74b9ff,#a29bfe)}
.game-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:rgba(255,255,255,.15);backdrop-filter:blur(10px)}
.game-info{display:flex;gap:6px;align-items:center}
.level-badge{background:#fff;padding:4px 10px;border-radius:14px;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.level-label{font-size:10px;color:#888;font-weight:700}
.level-number{font-size:15px;font-weight:900;color:#6C63FF}
.stars-display{font-size:14px;letter-spacing:1px}
.round-display{background:rgba(255,255,255,.8);padding:3px 8px;border-radius:10px;font-size:11px;font-weight:800;color:#6C63FF}
.moves-badge{background:#fff;padding:4px 10px;border-radius:14px;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,.1);font-size:13px;font-weight:800;color:#6C63FF}
.sound-btn{width:42px;height:42px;border:none;border-radius:14px;background:rgba(255,255,255,.9);font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
.sound-btn:active{transform:scale(.9)}
.game-instruction{text-align:center;padding:8px 16px;font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.game-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;position:relative;overflow:hidden}
.game-message{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);background:#fff;padding:10px 24px;border-radius:22px;font-size:15px;font-weight:700;color:#333;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;transition:opacity .3s;pointer-events:none;z-index:9998}
.game-message.show{opacity:1}

/* ===== SHAPES ===== */
.shapes-targets{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:30px}
.shape-target{width:80px;height:80px;background:rgba(255,255,255,.2);border:3px dashed rgba(255,255,255,.5);border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .25s}
.shape-target.highlight{background:rgba(255,255,255,.4);border-color:#FECA57;transform:scale(1.12);box-shadow:0 0 18px rgba(254,202,87,.4)}
.shape-target.filled{background:rgba(78,205,196,.3);border:3px solid #4ECDC4;animation:pop .3s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.shape-target .shape-icon{font-size:38px;opacity:.3}
.shape-target.filled .shape-icon{opacity:1}
.shapes-pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.shape-piece-wrapper{width:68px;height:68px;position:relative}
.shape-piece{width:68px;height:68px;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:38px;cursor:grab;box-shadow:0 5px 16px rgba(0,0,0,.18);touch-action:none;position:relative}
.shape-piece.dragging{transform:scale(1.15);box-shadow:0 12px 35px rgba(0,0,0,.3);z-index:1000}
.shape-piece.matched{visibility:hidden;pointer-events:none}
.shape-target-celebrate{animation:shapeTargetCelebrate .6s ease!important}
@keyframes shapeTargetCelebrate{0%{transform:scale(1)}20%{transform:scale(1.2) rotate(5deg)}40%{transform:scale(1.15) rotate(-3deg)}60%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.shape-name-badge{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);background:rgba(78,205,196,.9);color:#fff;padding:3px 12px;border-radius:12px;font-size:12px;font-weight:800;white-space:nowrap;animation:shapeNamePop .4s ease;pointer-events:none;z-index:5}
@keyframes shapeNamePop{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.7)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* ===== COLORS ===== */
.colors-game-area{justify-content:flex-start;padding-top:20px}
.color-question{margin-bottom:35px;text-align:center}
.color-target-display,.abc-display,.numbers-display,.habitat-display{background:#fff;padding:22px 30px;border-radius:22px;box-shadow:0 8px 30px rgba(0,0,0,.1);display:inline-block}
.color-emoji,.abc-object{font-size:60px;display:block;margin-bottom:8px}
.color-name,.abc-word{font-size:20px;font-weight:800;color:#333}
.color-emoji-bounce{animation:colorEmojiBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes colorEmojiBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.15) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.colors-streak-badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:2px 10px;border-radius:12px;font-size:14px;font-weight:900;margin-top:6px;animation:streakPop .3s ease}
.abc-hint{font-size:15px;font-weight:700;color:#888;display:block;margin-top:4px}
.color-options{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.color-option-btn{width:80px;height:80px;border-radius:50%;border:5px solid #fff;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:all .2s}
.color-option-btn:active{transform:scale(.92)}
.color-option-btn.correct{border-color:#4ECDC4;box-shadow:0 0 0 5px rgba(78,205,196,.4);animation:pulse .5s ease}
.color-option-btn.wrong{border-color:#FF6B6B;opacity:.3;animation:shake .4s ease}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ===== MEMORY ===== */
.memory-game-area{padding:10px;overflow-y:auto;justify-content:flex-start;padding-top:10px}
.memory-grid{display:grid;gap:7px;width:100%;max-width:360px}
.memory-grid.cols-2{grid-template-columns:repeat(2,1fr)}.memory-grid.cols-3{grid-template-columns:repeat(3,1fr)}.memory-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.memory-card{aspect-ratio:1;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.15);position:relative;min-height:50px;max-height:95px;background:transparent}
.memory-card-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:transform .4s;transform-style:preserve-3d}
.memory-card.flipped .memory-card-inner{transform:rotateY(180deg)}
.memory-card-front,.memory-card-back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden}
.memory-card-front{background:linear-gradient(145deg,#6C63FF,#5a52e0);font-size:24px;color:rgba(255,255,255,.6)}
.memory-card-back{background:#fff;transform:rotateY(180deg);font-size:36px}
.memory-grid.cols-2 .memory-card{max-height:120px}.memory-grid.cols-2 .memory-card-back{font-size:48px}
.memory-card.matched{pointer-events:none;animation:memoryMatchPop .5s ease}
.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-card.matched .memory-card-back{background:linear-gradient(145deg,#55efc4,#00b894);box-shadow:0 0 15px rgba(85,239,196,.5)}
@keyframes memoryMatchPop{0%{transform:scale(1)}30%{transform:scale(1.2)}60%{transform:scale(.95)}100%{transform:scale(1)}}
.memory-combo-badge{display:flex;align-items:center;gap:3px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border-radius:20px;padding:2px 10px;font-weight:800;font-size:14px;animation:comboAppear .3s ease}
.combo-fire{font-size:16px;animation:fireWiggle .4s infinite alternate}
@keyframes comboAppear{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fireWiggle{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.memory-peek-btn{position:absolute;bottom:12px;right:12px;background:linear-gradient(135deg,#a29bfe,#6c5ce7);color:#fff;border:none;border-radius:16px;padding:8px 16px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(108,92,231,.3);z-index:5;transition:transform .2s,opacity .2s;font-family:inherit}
.memory-peek-btn:active{transform:scale(.92)}
.memory-peek-btn.used{opacity:.3;pointer-events:none}
.memory-card.peeking .memory-card-inner{transform:rotateY(180deg);transition:transform .25s}
.memory-match-sparkle{position:absolute;pointer-events:none;font-size:20px;animation:sparkleFloat .8s ease-out forwards;z-index:10}
@keyframes sparkleFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(.3)}}

/* ===== NUMBERS ===== */
.numbers-game-area{justify-content:flex-start;padding-top:20px}
.numbers-question{text-align:center;margin-bottom:30px}
.numbers-objects{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:220px;margin:0 auto 10px}
.number-object{font-size:40px;animation:popIn .3s ease backwards;position:relative;display:inline-block;transition:transform .2s}
.num-obj-counted{animation:numObjJump .35s ease!important;transform:scale(1.15)}
@keyframes numObjJump{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.25) translateY(-12px)}70%{transform:scale(1.1) translateY(-4px)}100%{transform:scale(1.15) translateY(0)}}
.num-count-badge{position:absolute;top:-8px;right:-8px;background:#FF6B6B;color:#fff;border-radius:50%;width:22px;height:22px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(255,107,107,.4);animation:numBadgePop .25s ease;pointer-events:none;z-index:2}
@keyframes numBadgePop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.num-total-badge{font-size:32px;font-weight:900;color:#4ECDC4;text-shadow:0 2px 8px rgba(78,205,196,.4)}
.num-total-pop{animation:numTotalPop .4s ease}
@keyframes numTotalPop{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.num-obj-shake{animation:numShake .4s ease!important}
@keyframes numShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.numbers-label{font-size:17px;font-weight:700;color:#666}
.numbers-options,.abc-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.number-option,.abc-option{width:72px;height:72px;border:none;border-radius:20px;background:#fff;font-size:34px;font-weight:900;color:#45B7D1;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.13),inset 0 -3px 0 rgba(0,0,0,.08);transition:all .2s;display:flex;align-items:center;justify-content:center;font-family:inherit}
.abc-option{color:#6C63FF}
.abc-option-word{width:auto;height:auto;padding:10px 18px;font-size:16px;display:flex;align-items:center;gap:8px;flex-direction:row}
.abc-opt-emoji{font-size:28px}
.abc-opt-text{font-size:16px;font-weight:800;color:#333}
.abc-big-letter{font-size:100px;display:block;margin-bottom:8px;color:#6C63FF;font-weight:900;text-shadow:0 4px 15px rgba(108,99,255,.3)}
.abc-letter-highlight{color:#FF6B6B;font-weight:900;text-decoration:underline;text-decoration-thickness:3px}
.abc-bounce-in{animation:abcBounceIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes abcBounceIn{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.15) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.number-option:active,.abc-option:active{transform:scale(.93)}
.number-option.correct,.abc-option.correct{background:#d4edda;color:#28a745;border:3px solid #28a745;animation:pulse .5s}
.number-option.wrong,.abc-option.wrong{background:#f8d7da;color:#dc3545;border:3px solid #dc3545;opacity:.4;animation:shake .4s}

/* ===== ANIMALS ===== */
.animals-game-area{justify-content:flex-start;padding-top:20px}
.animals-question{text-align:center;margin-bottom:25px}
.habitat-icon{font-size:60px;display:block;margin-bottom:6px}
.habitat-label{font-size:18px;font-weight:800;color:#333;display:block;margin-bottom:3px}
.habitat-question{font-size:14px;font-weight:700;color:#888;display:block}
.animals-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.animal-option{width:85px;height:85px;border:none;border-radius:50%;background:#fff;font-size:45px;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.13);transition:all .2s;display:flex;align-items:center;justify-content:center;border:4px solid #e0e0e0}
.animal-option:active{transform:scale(.93)}
.animal-option.correct{background:#d4edda;border-color:#28a745;animation:pulse .5s}
.animal-option.wrong{background:#f8d7da;border-color:#dc3545;opacity:.4;animation:shake .4s}
.ani-animal-bounce{animation:aniBounceIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes aniBounceIn{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ani-animal-happy{animation:aniHappyDance .8s ease infinite!important}
@keyframes aniHappyDance{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}
.ani-animal-shake{animation:aniShake .4s ease!important}
@keyframes aniShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.ani-fun-fact{font-size:13px;font-weight:600;color:#6C63FF;background:rgba(108,99,255,.08);border-radius:12px;padding:6px 14px;margin-top:8px;opacity:0;display:none}
.ani-fact-pop{animation:aniFactPop .4s ease forwards!important;display:block!important}
@keyframes aniFactPop{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* ===== PATTERNS ===== */
.puzzle-game-area{justify-content:flex-start;padding-top:15px;gap:25px}
.puzzle-target{text-align:center}
.pattern-sequence{display:flex;justify-content:center;align-items:center;gap:5px;background:#fff;padding:16px 22px;border-radius:20px;box-shadow:0 6px 25px rgba(0,0,0,.1);flex-wrap:wrap}
.pattern-item{font-size:38px;animation:patPop .3s ease backwards}
.pattern-item:nth-child(1){animation-delay:0s}.pattern-item:nth-child(2){animation-delay:.08s}.pattern-item:nth-child(3){animation-delay:.16s}.pattern-item:nth-child(4){animation-delay:.24s}.pattern-item:nth-child(5){animation-delay:.32s}.pattern-item:nth-child(6){animation-delay:.4s}
@keyframes patPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.pattern-question{width:48px;height:48px;background:rgba(255,255,255,.5);border:3px dashed #DDA0DD;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#DDA0DD;font-weight:900;animation:qPulse 1.5s ease-in-out infinite}
@keyframes qPulse{0%,100%{border-color:#DDA0DD}50%{border-color:#FECA57}}
.puzzle-pieces{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.pattern-option{width:75px;height:75px;border:none;border-radius:18px;background:#fff;font-size:38px;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.13),inset 0 -3px 0 rgba(0,0,0,.08);transition:all .2s;display:flex;align-items:center;justify-content:center}
.pattern-option:active{transform:scale(.93)}
.pattern-option.correct{background:#d4edda;border:3px solid #28a745;animation:pulse .5s}
.pattern-option.wrong{background:#f8d7da;border:3px solid #dc3545;opacity:.4;animation:shake .4s}

/* ===== DRAWING ===== */
#game-draw{background:linear-gradient(180deg,#FFF8E1,#FFECB3)}
.draw-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px}
.draw-tools,.draw-actions{display:flex;gap:5px}
.tool-btn,.action-btn{width:42px;height:42px;border:none;border-radius:12px;background:#fff;font-size:19px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
.tool-btn.active{background:#FF9800;transform:scale(1.08)}
.draw-canvas-container,.paint-canvas-container{flex:1;margin:6px;background:#fff;border-radius:16px;box-shadow:0 6px 25px rgba(0,0,0,.1);overflow:hidden}
#draw-canvas,#paint-canvas{width:100%;height:100%;touch-action:none}
.paint-splash-particle{position:absolute;pointer-events:none;font-size:18px;animation:paintSplash .6s ease-out forwards;z-index:5}
@keyframes paintSplash{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.3) translateY(-30px)}}
.paint-progress-bar{position:absolute;bottom:4px;left:10%;width:80%;height:5px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden;z-index:3}
.paint-progress-fill{height:100%;width:0%;border-radius:3px;transition:width .5s ease,background .3s ease}
.draw-colors,.paint-colors{display:flex;justify-content:center;gap:7px;padding:6px}
.color-btn{width:34px;height:34px;border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:all .15s}
.color-btn.active{transform:scale(1.25);border-color:#333}
.draw-sizes{display:flex;justify-content:center;gap:10px;padding:6px 6px 14px}
.size-btn{width:42px;height:42px;border:none;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
.size-btn span{background:#333;border-radius:50%;display:block}
.size-btn.active{background:#FF9800}.size-btn.active span{background:#fff}
.sticker-picker{display:flex;justify-content:flex-start;gap:6px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:rgba(255,152,0,.12);border-radius:12px;margin:0 6px}
.sticker-btn{width:44px;height:44px;min-width:44px;font-size:28px;border:none;border-radius:10px;background:rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sticker-btn.selected{background:rgba(255,255,255,.5);transform:scale(1.1)}

/* ===== PAINTING ===== */
#game-paint{background:linear-gradient(180deg,#FCE4EC,#F8BBD0)}
.paint-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px}
.paint-nav{display:flex;align-items:center;gap:10px}
.nav-btn{width:36px;height:36px;border:none;border-radius:50%;background:#fff;font-size:14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
#paint-title{font-size:15px;font-weight:800;color:#333}

/* ===== TRACING ===== */
#game-trace{background:linear-gradient(180deg,#E0F7FA,#B2EBF2)}
.trace-canvas-container{flex:1;margin:6px;background:#F5FBFF;border-radius:16px;box-shadow:0 6px 25px rgba(0,0,0,.1);overflow:hidden}
#trace-canvas{width:100%;height:100%;touch-action:none}
.trace-progress{height:12px;background:rgba(255,255,255,.5);margin:6px 14px 14px;border-radius:8px;overflow:hidden}
.trace-progress-bar{height:100%;background:linear-gradient(90deg,#4CAF50,#8BC34A,#FECA57);border-radius:8px;transition:width .3s;width:0%}

/* ===== MUSIC SIMON ===== */
#game-music{background:linear-gradient(180deg,#2d1b69,#1a1a4e)}
#game-music .game-header{background:rgba(255,255,255,.08)}
#game-music .game-instruction{color:rgba(255,255,255,.9)}
.music-game-area{justify-content:center;gap:20px}
.music-status{font-size:20px;font-weight:800;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3);min-height:30px}
.music-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:260px;width:100%}
.music-pad{aspect-ratio:1;border:none;border-radius:20px;background:var(--pad-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 -4px 0 rgba(0,0,0,.2);opacity:.7}
.music-pad:active,.music-pad.active{transform:scale(.95);opacity:1;box-shadow:0 3px 12px rgba(0,0,0,.3),0 0 25px var(--pad-color)}
.music-pad.flash{opacity:1;transform:scale(1.05);box-shadow:0 0 35px var(--pad-color)}
.pad-icon{font-size:42px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.music-sequence-display{display:flex;justify-content:center;gap:5px;min-height:18px}
.seq-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .2s}
.seq-dot.done{background:#4ECDC4}.seq-dot.current{background:#FECA57;animation:dotP .5s ease-in-out infinite}
.seq-dot.wrong{background:#FF6B6B}
@keyframes dotP{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ===== ABC ===== */
#game-abc{background:linear-gradient(180deg,#a8edea,#fed6e3)}
.abc-game-area{justify-content:flex-start;padding-top:20px}
.abc-question{text-align:center;margin-bottom:25px}

/* ===== SIZES ===== */
#game-sizes{background:linear-gradient(180deg,#FFEAA7,#FDCB6E)}
.sizes-game-area{justify-content:center;gap:20px}
.sizes-items{display:flex;justify-content:center;align-items:flex-end;gap:14px;min-height:120px;flex-wrap:wrap}
.size-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .2s;padding:8px;border-radius:16px;background:rgba(255,255,255,.5);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.size-item.selected{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.15);transform:scale(1.05)}
.size-item.placed{opacity:.4;pointer-events:none}
.size-item-emoji{line-height:1}
.sizes-slots{display:flex;justify-content:center;align-items:flex-end;gap:14px;min-height:80px}
.size-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px dashed rgba(0,0,0,.2);border-radius:16px;padding:10px;min-width:70px;min-height:70px;transition:all .2s;cursor:pointer;background:rgba(255,255,255,.3)}
.size-slot.highlight{border-color:#6C63FF;background:rgba(108,99,255,.1)}
.size-slot.filled{border-style:solid;border-color:#4ECDC4;background:rgba(78,205,196,.15)}
.size-slot-correct{animation:slotCorrect .5s ease}
@keyframes slotCorrect{0%{transform:scale(1)}30%{transform:scale(1.2);box-shadow:0 0 20px rgba(78,205,196,.6)}60%{transform:scale(.95)}100%{transform:scale(1)}}
.size-slot-label{font-size:12px;font-weight:700;color:#888;margin-top:4px}
.sizes-check-btn{padding:14px 40px;border:none;border-radius:25px;background:linear-gradient(145deg,#6C63FF,#5a52e0);color:#fff;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(108,99,255,.3);font-family:inherit;transition:transform .15s}
.sizes-check-btn:active{transform:scale(.95)}
.sizes-check-btn:disabled{opacity:.5;cursor:default}

/* ===== JIGSAW ===== */
#game-jigsaw{background:linear-gradient(180deg,#DDA0DD,#C39BD3)}
.jigsaw-game-area{justify-content:flex-start;padding-top:10px;gap:12px}
.jigsaw-reference{display:flex;justify-content:center}
.jigsaw-ref-grid{display:grid;gap:2px;background:rgba(255,255,255,.8);padding:6px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.jigsaw-ref-cell{display:flex;align-items:center;justify-content:center;font-size:20px;background:#fff;border-radius:4px;aspect-ratio:1}
.jigsaw-board{display:grid;gap:4px;background:rgba(255,255,255,.3);padding:8px;border-radius:16px}
.jigsaw-cell{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border:2px dashed rgba(255,255,255,.4);border-radius:10px;aspect-ratio:1;cursor:pointer;transition:all .2s;min-width:55px}
.jigsaw-cell.filled{background:rgba(255,255,255,.8);border:2px solid #4ECDC4}
.jigsaw-cell.highlight{background:rgba(254,202,87,.3);border-color:#FECA57}
.jigsaw-cell.wrong-flash{animation:shake .4s}
.jigsaw-pieces-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;background:rgba(0,0,0,.1);border-radius:14px;min-height:50px}
.jigsaw-tray-piece{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:8px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.15);transition:all .2s;min-width:45px;min-height:45px}
.jigsaw-tray-piece.selected{background:#FECA57;transform:scale(1.1);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.jigsaw-tray-piece.used{visibility:hidden;pointer-events:none}

/* ===== PIANO ===== */
#game-piano{background:linear-gradient(180deg,#2c3e50,#34495e)}
.piano-title{color:#fff;font-size:18px;font-weight:800}
.piano-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px}
.piano-display{color:#fff;font-size:22px;font-weight:800;text-align:center;margin-bottom:20px;text-shadow:0 2px 8px rgba(0,0,0,.3);min-height:35px}
.piano-keys{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-width:400px}
.piano-key{width:48px;height:160px;border:none;border-radius:0 0 10px 10px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-size:14px;font-weight:800;transition:all .1s;box-shadow:0 6px 15px rgba(0,0,0,.2)}
.piano-key.white{background:linear-gradient(180deg,#fff,#f0f0f0);color:#999}
.piano-key.white:active,.piano-key.white.active{background:linear-gradient(180deg,#e0e0e0,#d0d0d0);box-shadow:0 2px 5px rgba(0,0,0,.2);transform:scaleY(.98)}
.piano-key.colored{height:140px;color:#fff;font-size:16px}
.piano-key.colored:active,.piano-key.colored.active{filter:brightness(1.3);transform:scaleY(.98)}
.piano-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}
.piano-note-particle{position:absolute;pointer-events:none;animation:pianoParticleFloat 1.2s ease-out forwards;font-size:20px;opacity:0;z-index:2}
@keyframes pianoParticleFloat{0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}50%{opacity:.8}100%{opacity:0;transform:translateY(-120px) scale(.3) rotate(180deg)}}
.piano-wave-ring{position:absolute;pointer-events:none;border-radius:50%;border:2px solid;opacity:0;animation:pianoWaveExpand .8s ease-out forwards;z-index:0}
@keyframes pianoWaveExpand{0%{opacity:.6;transform:scale(0)}100%{opacity:0;transform:scale(3)}}
.piano-key.colored.active{filter:brightness(1.4)!important;box-shadow:0 0 20px currentColor,0 6px 15px rgba(0,0,0,.2)!important}

/* ===== XYLOPHONE ===== */
#game-xylophone{background:linear-gradient(180deg,#2d3436,#636e72)}
.xylophone-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px}
.xylophone-display{color:#fff;font-size:22px;font-weight:800;text-align:center;margin-bottom:20px;text-shadow:0 2px 8px rgba(0,0,0,.3);min-height:35px}
.xylophone-bars{display:flex;flex-direction:column;gap:6px;width:100%;max-width:350px;align-items:center}
.xylo-bar{height:45px;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 4px 12px rgba(0,0,0,.2),inset 0 -3px 0 rgba(0,0,0,.15);transition:all .1s}
.xylo-bar:active,.xylo-bar.active{transform:scaleY(.92);box-shadow:0 1px 4px rgba(0,0,0,.2);filter:brightness(1.2)}
.xylo-bar.xylo-next-note{box-shadow:0 0 0 3px rgba(254,202,87,.7),0 4px 12px rgba(0,0,0,.2);animation:xyloNextPulse 1s ease-in-out infinite}
@keyframes xyloNextPulse{0%,100%{box-shadow:0 0 0 3px rgba(254,202,87,.5),0 4px 12px rgba(0,0,0,.2)}50%{box-shadow:0 0 0 6px rgba(254,202,87,.3),0 4px 12px rgba(0,0,0,.2)}}
.xylo-bar.xylo-demo{filter:brightness(1.5)!important;transform:scaleY(.94)!important;box-shadow:0 0 15px currentColor!important}
.xylo-mode-bar{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.xylo-mode-btn{border:2px solid rgba(255,255,255,.3);border-radius:14px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;color:#fff;background:rgba(255,255,255,.1);transition:all .2s}
.xylo-mode-btn.active{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.6)}
.xylo-melody-hud{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:12px;padding:4px 14px;color:#fff;font-weight:700;font-size:14px;margin-bottom:6px}
.xylo-melody-name{font-size:15px}
.xylo-melody-progress{font-size:13px;opacity:.7}

/* ===== DRUMS ===== */
#game-drums{background:linear-gradient(180deg,#1a1a2e,#16213e)}
.drums-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px;gap:14px;width:100%}
.drums-display{color:#fff;font-size:20px;font-weight:800;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5);min-height:32px;background:rgba(255,255,255,.08);border-radius:16px;padding:8px 20px;backdrop-filter:blur(4px)}
.drums-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:400px}
.drums-pad{border:none;border-radius:18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 8px;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s,filter .08s;touch-action:manipulation;user-select:none;-webkit-user-select:none;min-height:80px}
.drums-pad:active,.drums-pad.hit{transform:scale(.93);box-shadow:0 2px 6px rgba(0,0,0,.3);filter:brightness(1.4)}
.drums-pad-icon{font-size:30px;line-height:1;pointer-events:none}
.drums-pad-name{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:none;letter-spacing:.5px;text-transform:uppercase}
@keyframes drumsPadFlash{0%{filter:brightness(1)}30%{filter:brightness(1.7) saturate(1.5)}100%{filter:brightness(1)}}
.drums-pad.flash{animation:drumsPadFlash .22s ease}
.drums-pad.demo-highlight{animation:drumsDemoGlow .35s ease;filter:brightness(1.6);transform:scale(1.05);box-shadow:0 0 25px rgba(255,255,255,.5)}
@keyframes drumsDemoGlow{0%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.8);transform:scale(1.08)}100%{filter:brightness(1.6);transform:scale(1.05)}}
.drums-mode-toggle{display:flex;gap:8px;width:100%;max-width:400px;justify-content:center}
.drums-mode-btn{border:2px solid rgba(255,255,255,.3);border-radius:14px;padding:6px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;color:#fff;background:rgba(255,255,255,.1);transition:all .2s}
.drums-mode-btn.active{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.6);box-shadow:0 0 10px rgba(255,255,255,.2)}
.drums-follow-info{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:12px;padding:6px 16px;color:#fff;font-weight:700;font-size:14px}
.drums-seq-count{font-size:22px;color:#feca57}
.drums-seq-best{font-size:12px;opacity:.7}
.drums-pad.waiting-input{box-shadow:0 0 0 3px rgba(255,255,255,.4),0 6px 18px rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.25);animation:drumsWaiting 1.2s ease-in-out infinite}
@keyframes drumsWaiting{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 18px rgba(0,0,0,.35)}}

/* ===== MUSIC BOX ===== */
#game-musicbox{background:linear-gradient(180deg,#1a1033,#2d1b69,#3c2a7e)}
.musicbox-controls{display:flex;gap:8px;align-items:center}
.action-btn{background:rgba(255,255,255,.15);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:20px;line-height:1;padding:6px 10px;touch-action:manipulation;transition:background .15s,transform .1s}
.action-btn:active{background:rgba(255,255,255,.3);transform:scale(.92)}
.musicbox-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px;gap:14px;width:100%;box-sizing:border-box;overflow:hidden}
.musicbox-grid{display:grid;gap:4px;width:100%;max-width:520px;padding:4px;box-sizing:border-box}
.musicbox-col-header{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:10px;font-weight:700;height:20px;border-radius:6px;transition:background .1s,color .1s;user-select:none}
.musicbox-col-header.playing{background:rgba(255,255,255,.25);color:#fff}
.musicbox-corner{background:transparent}
.musicbox-row-label{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;font-weight:800;height:36px;min-width:28px;user-select:none;letter-spacing:.3px}
.musicbox-cell{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);border-radius:8px;cursor:pointer;height:36px;width:100%;transition:background .12s,box-shadow .12s,transform .08s,border-color .12s;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-sizing:border-box}
.musicbox-cell:active{transform:scale(.88)}
.musicbox-cell.active{border-color:rgba(255,255,255,.5)}
.musicbox-cell.playing{border-color:rgba(255,255,255,.9);filter:brightness(1.35)}
.musicbox-cell.active.playing{filter:brightness(1.5) saturate(1.3);animation:mbCellPulse .18s ease}
@keyframes mbCellPulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.musicbox-tempo{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:16px;padding:8px 16px;backdrop-filter:blur(6px)}
.musicbox-tempo-label{color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.5px}
.musicbox-bpm-display{color:#fff;font-size:13px;font-weight:800;min-width:52px;text-align:center}
.musicbox-tempo-btn{background:rgba(255,255,255,.12);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:20px;line-height:1;padding:5px 8px;touch-action:manipulation;transition:background .15s,transform .1s}
.musicbox-tempo-btn:active{background:rgba(255,255,255,.3);transform:scale(.9)}

/* ===== ANIMAL SOUNDS ===== */
#game-animal-sounds{background:linear-gradient(180deg,#a8edea,#95e1d3)}
.animal-sounds-area{padding:10px}
.animal-sounds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px;width:100%}
.animal-sound-btn{aspect-ratio:1;border:none;border-radius:18px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 14px rgba(0,0,0,.1),inset 0 -3px 0 rgba(0,0,0,.05);transition:all .15s;font-family:inherit}
.animal-sound-btn:active,.animal-sound-btn.active{transform:scale(.92);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.animal-sound-emoji{font-size:40px}
.animal-sound-name{font-size:11px;font-weight:700;color:#666}
.animal-sounds-tabs-container{display:flex;justify-content:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.animal-sounds-tab{transition:all .15s}
.animal-sounds-tab:active{transform:scale(.95)}
.animal-option-label{font-size:10px;font-weight:700;color:#666;margin-top:2px}
.paint-mode-toggle{display:flex;gap:4px;margin-left:8px}
.jigsaw-drag-clone{position:fixed;z-index:1000;pointer-events:none;opacity:.85;transition:none}

/* ===== ECHO ===== */
#game-echo{background:linear-gradient(180deg,#6c5ce7,#a29bfe)}
.echo-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:15px}
.echo-mascot{font-size:80px;animation:gentleBounce 2s ease-in-out infinite;filter:drop-shadow(0 6px 15px rgba(0,0,0,.2));display:flex;justify-content:center}
.echo-mascot:has(.nena-char){animation:gentleBounce 2s ease-in-out infinite}
.echo-status{color:#fff;font-size:18px;font-weight:700;text-align:center;min-height:25px}
.echo-record-btn{width:120px;height:120px;border:none;border-radius:50%;background:linear-gradient(145deg,#FF6B6B,#ee5a5a);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 8px 25px rgba(255,107,107,.4),inset 0 -4px 0 rgba(0,0,0,.15);transition:all .15s}
.echo-record-btn:active,.echo-record-btn.recording{transform:scale(1.1);box-shadow:0 0 40px rgba(255,107,107,.6);background:linear-gradient(145deg,#ff4757,#ee3b3b)}
.echo-record-btn.recording{animation:recordPulse 1s ease-in-out infinite}
@keyframes recordPulse{0%,100%{box-shadow:0 0 40px rgba(255,107,107,.4)}50%{box-shadow:0 0 60px rgba(255,107,107,.8)}}
.echo-mic{font-size:40px}
.echo-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.8)}
.echo-voices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.echo-voice-btn{border:none;border-radius:16px;background:var(--vc);padding:12px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:all .15s;min-width:70px;opacity:.5}
.echo-voice-btn:active{transform:scale(.93)}
.echo-voice-btn.enabled{opacity:1}
.echo-voice-btn.selected{opacity:1;transform:scale(1.1);box-shadow:0 0 15px rgba(0,0,0,.3)}
.echo-voice-name{font-size:10px;font-weight:700;color:#fff}
.echo-voice-btn span:first-child{font-size:28px}

/* ===== COLOR MIX ===== */
#game-colormix{background:linear-gradient(180deg,#f093fb,#764ba2)}
.colormix-game-area{justify-content:center;gap:20px;padding-top:15px}
.colormix-drops{display:flex;align-items:center;justify-content:center;gap:12px}
.colormix-drop{width:80px;height:80px;border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .6s ease;position:relative}
.colormix-drop-label{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.colormix-plus{font-size:36px;color:#fff;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.colormix-equals{font-size:36px;color:#fff;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.colormix-result{width:90px;height:90px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;color:rgba(0,0,0,.3);box-shadow:0 6px 20px rgba(0,0,0,.2);transition:all .4s ease}
.colormix-result.colormix-reveal{animation:cmPop .5s ease;box-shadow:0 6px 25px rgba(0,0,0,.35)}
@keyframes cmPop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.colormix-drop-a.colormix-slide-right{transform:translateX(15px)}
.colormix-drop-b.colormix-slide-left{transform:translateX(-15px)}
.colormix-options{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.colormix-option{width:80px;height:80px;border-radius:50%;border:4px solid rgba(255,255,255,.3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .15s;box-shadow:0 5px 16px rgba(0,0,0,.2)}
.colormix-option:active{transform:scale(.92)}
.colormix-option.correct{border-color:#4ECDC4;box-shadow:0 0 0 5px rgba(78,205,196,.4);animation:pulse .5s ease}
.colormix-option.wrong{border-color:#FF6B6B;opacity:.3;animation:shake .4s ease}
.colormix-option-name{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ===== CAMERA ===== */
#game-camera{background:linear-gradient(180deg,#2d3436,#636e72)}
.camera-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.camera-viewfinder{position:relative;width:100%;max-height:50vh;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
#camera-video{width:100%;height:100%;object-fit:cover}
.camera-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;transition:opacity .15s}
.camera-flash.active{opacity:.8;transition:none}
.camera-controls{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:rgba(0,0,0,.5)}
.camera-filters{display:flex;gap:6px;overflow-x:auto;padding:4px 8px;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.camera-filters::-webkit-scrollbar{display:none}
.camera-filter-btn{border:none;border-radius:12px;background:rgba(255,255,255,.15);padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;transition:all .15s}
.camera-filter-btn.selected{background:rgba(255,255,255,.4);transform:scale(1.08);box-shadow:0 0 10px rgba(255,255,255,.3)}
.camera-filter-btn span:first-child{font-size:20px}
.filter-name{font-size:9px;font-weight:700;color:rgba(255,255,255,.8)}
.camera-shutter{width:68px;height:68px;border:4px solid #fff;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.camera-shutter:active{transform:scale(.9)}
.camera-shutter.disabled{opacity:.4;pointer-events:none}
.shutter-inner{width:54px;height:54px;border-radius:50%;background:#fff;transition:all .15s}
.camera-shutter:active .shutter-inner{background:#FF6B6B;transform:scale(.9)}
.camera-cooldown-bar{height:4px;background:linear-gradient(90deg,#FF6B6B,#FECA57);border-radius:2px;width:0%;margin-top:2px}
.camera-flip-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:6px}
.camera-gallery{flex:1;display:flex;flex-wrap:wrap;gap:4px;padding:8px;overflow-y:auto;align-content:flex-start;background:rgba(0,0,0,.3)}
.gallery-empty{width:100%;text-align:center;color:rgba(255,255,255,.5);font-size:14px;font-weight:600;padding:20px}
.gallery-thumb{width:calc(33.33% - 3px);aspect-ratio:4/3;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .15s}
.gallery-thumb:active{transform:scale(.95)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.photo-fullscreen{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s}
.photo-fullscreen img{max-width:95%;max-height:70vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.photo-full-actions{display:flex;gap:12px;margin-top:16px}
.photo-full-btn{border:none;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.15);color:#fff;transition:all .15s}
.photo-full-btn:active{transform:scale(.95)}
.photo-close-btn{background:rgba(255,107,107,.5)}
.camera-frames{display:flex;gap:6px;overflow-x:auto;padding:4px 8px;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.camera-frames::-webkit-scrollbar{display:none}
.camera-frame-btn{border:none;border-radius:14px;background:rgba(255,255,255,.1);padding:7px 11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;transition:all .15s;border:2px solid transparent}
.camera-frame-btn.selected{background:rgba(255,215,0,.25);border-color:rgba(255,215,0,.5);transform:scale(1.08);box-shadow:0 0 12px rgba(255,215,0,.3)}
.camera-frame-btn span:first-child{font-size:22px}
.frame-name{font-size:9px;font-weight:700;color:rgba(255,255,255,.7)}

/* ===== FEEDBACK ===== */
.feedback-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.25);z-index:9999;animation:fIn .15s;pointer-events:none}
.feedback-overlay.fade-out{animation:fOut .25s forwards}
@keyframes fIn{from{opacity:0}to{opacity:1}}
@keyframes fOut{from{opacity:1}to{opacity:0}}
.feedback-icon{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:55px;font-weight:bold;color:#fff;animation:fPop .3s ease}
@keyframes fPop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.feedback-icon.success{background:linear-gradient(145deg,#4ECDC4,#2ecc71);box-shadow:0 8px 30px rgba(46,204,113,.5)}
.feedback-icon.error{background:linear-gradient(145deg,#FF6B6B,#e74c3c);box-shadow:0 8px 30px rgba(231,76,60,.5)}
.feedback-mascot{font-size:40px;margin-top:8px;animation:feedbackMascotIn .3s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes feedbackMascotIn{0%{transform:scale(0) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.feedback-phrase{font-size:16px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3);margin-top:4px;animation:feedbackPhraseIn .3s ease .2s both}
@keyframes feedbackPhraseIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.feedback-stars{margin-top:8px;font-size:32px;animation:starsIn .4s ease .15s both}
@keyframes starsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ===== TROPHY BUTTON ===== */
.trophy-btn{width:46px;height:46px;border:none;border-radius:16px;background:linear-gradient(145deg,#FFD700,#FFA500);font-size:22px;cursor:pointer;box-shadow:0 4px 12px rgba(255,165,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .15s;animation:trophyGlow 3s ease-in-out infinite}
.trophy-btn:active{transform:scale(.9)}
@keyframes trophyGlow{0%,100%{box-shadow:0 4px 12px rgba(255,165,0,.3)}50%{box-shadow:0 4px 18px rgba(255,215,0,.6)}}

/* ===== ALBUM BUTTON ===== */
.album-btn{width:46px;height:46px;border:none;border-radius:16px;background:linear-gradient(145deg,#e84393,#d63384);font-size:22px;cursor:pointer;box-shadow:0 4px 12px rgba(232,67,147,.3);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.album-btn:active{transform:scale(.9)}

/* ===== ALBUM SCREEN ===== */
#album-screen.active{background:linear-gradient(180deg,#6c5ce7,#a29bfe 50%,#dfe6e9);display:flex;flex-direction:column}
.album-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.album-title{color:#fff;font-size:20px;font-weight:800}
.album-count{background:rgba(255,255,255,.2);padding:6px 14px;border-radius:20px;color:#fff;font-size:14px;font-weight:800}
.album-tabs{display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
.album-tabs::-webkit-scrollbar{display:none}
.album-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border:none;border-radius:14px;background:rgba(255,255,255,.15);cursor:pointer;transition:all .2s;font-family:inherit;min-width:60px}
.album-tab.active{background:rgba(255,255,255,.35);transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.album-tab.complete{background:rgba(46,213,115,.3);border:2px solid rgba(46,213,115,.5)}
.album-tab-icon{font-size:22px;line-height:1}
.album-tab-count{font-size:10px;font-weight:800;color:#fff}
.album-content{flex:1;padding:0 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.album-page-header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:18px;margin-bottom:10px}
.album-page-icon{font-size:32px;line-height:1}
.album-page-title{font-size:20px;font-weight:900;color:#fff;flex:1}
.album-page-progress{font-size:13px;font-weight:800;color:rgba(255,255,255,.85)}
.album-progress-bar{height:8px;background:rgba(0,0,0,.15);border-radius:4px;margin-bottom:14px;overflow:hidden}
.album-progress-fill{height:100%;border-radius:4px;transition:width .5s ease}
.album-sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.album-sticker{background:rgba(255,255,255,.9);border-radius:18px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .3s;cursor:pointer;border:3px dashed rgba(0,0,0,.1);position:relative;overflow:hidden;min-height:90px;justify-content:center}
.album-sticker.collected{background:#fff;border:3px solid rgba(108,92,231,.3);box-shadow:0 4px 16px rgba(108,92,231,.15)}
.album-sticker.collected::before{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(108,92,231,.08),transparent);border-radius:15px 15px 0 0}
.album-sticker.empty{opacity:.55;border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.5)}
.album-sticker-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.album-sticker.empty .album-sticker-emoji{filter:grayscale(1) brightness(.8);font-size:32px}
.album-sticker-name{font-size:11px;font-weight:800;color:#2d3436;line-height:1.2}
.album-sticker.empty .album-sticker-name{color:#999}
@keyframes stickerTap{0%{transform:scale(1)}40%{transform:scale(1.2) rotate(-5deg)}70%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
.album-tip{text-align:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.7);padding:8px;margin-top:4px}

/* ===== STICKER POPUP ===== */
.sticker-popup{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s ease}
.sticker-popup.show{opacity:1;pointer-events:auto}
.sticker-popup-inner{background:linear-gradient(145deg,#6c5ce7,#a29bfe);padding:28px 32px;border-radius:28px;text-align:center;box-shadow:0 12px 48px rgba(108,92,231,.5);min-width:260px;max-width:320px;animation:stickerPopIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes stickerPopIn{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.sticker-popup-badge{font-size:12px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.sticker-popup-emoji{font-size:80px;line-height:1;margin-bottom:8px;animation:stickerReveal .8s ease both .2s;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
@keyframes stickerReveal{0%{transform:scale(0) rotate(-20deg);opacity:0}50%{transform:scale(1.3) rotate(10deg);opacity:1}70%{transform:scale(.9) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.sticker-popup-name{font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2);margin-bottom:4px}
.sticker-popup-page{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);margin-bottom:18px}
.sticker-popup-btn{background:linear-gradient(145deg,#fff,#f0f0ff);border:none;border-radius:16px;padding:12px 40px;font-family:inherit;font-size:17px;font-weight:900;color:#6c5ce7;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:transform .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.sticker-popup-btn:active{transform:scale(.95)}

/* ===== ACHIEVEMENTS SCREEN ===== */
#achievements-screen{background:linear-gradient(180deg,#2d1b69,#1a1a4e 50%,#0c0c2c)}
.achievements-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.achievements-title{color:#fff;font-size:20px;font-weight:800}
.achievements-count{background:rgba(255,215,0,.2);padding:6px 14px;border-radius:20px;color:#FFD700;font-size:14px;font-weight:800}
/* Progress ring section */
.achievements-progress{display:flex;align-items:center;justify-content:center;gap:20px;padding:8px 16px 4px;flex-shrink:0}
.achievements-ring{position:relative;width:80px;height:80px;flex-shrink:0}
.achievements-ring svg{transform:rotate(-90deg);width:80px;height:80px}
.achievements-ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
.achievements-ring-fill{fill:none;stroke:#FFD700;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.achievements-ring-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#FFD700;font-size:18px;font-weight:900;text-shadow:0 2px 8px rgba(255,215,0,.3)}
.achievements-ring-label{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:9px;font-weight:700;white-space:nowrap}
.achievements-stats{display:flex;flex-direction:column;gap:6px}
.achievements-stat{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600}
.achievements-stat-icon{font-size:16px;width:24px;text-align:center}
.achievements-stat-bar{width:80px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.achievements-stat-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
/* Category headers */
.achievement-category{grid-column:1/-1;padding:12px 4px 4px;display:flex;align-items:center;gap:8px}
.achievement-category-icon{font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.achievement-category-label{font-size:13px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:1px}
.achievement-category-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent)}
.achievements-content{flex:1;padding:12px 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.achievement-card{background:rgba(255,255,255,.08);border-radius:18px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .3s;position:relative;overflow:hidden;border:2px solid transparent;opacity:0;transform:translateY(16px) scale(.95);animation:achCardIn .4s ease forwards}
.achievement-card.earned{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.3)}
.achievement-card.earned::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,215,0,.1),transparent);border-radius:18px 18px 0 0}
.achievement-card.earned::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 55%,transparent 60%);animation:achShimmer 4s ease-in-out infinite;pointer-events:none}
/* Rarity tiers */
.achievement-card.rarity-bronze.earned{border-color:rgba(205,127,50,.5);background:rgba(205,127,50,.1)}
.achievement-card.rarity-silver.earned{border-color:rgba(192,192,192,.5);background:rgba(192,192,192,.1)}
.achievement-card.rarity-gold.earned{border-color:rgba(255,215,0,.5);background:rgba(255,215,0,.12)}
.achievement-card.rarity-diamond.earned{border-color:rgba(185,242,255,.6);background:rgba(185,242,255,.1);box-shadow:0 0 12px rgba(185,242,255,.15)}
.achievement-card.rarity-diamond.earned::after{background:linear-gradient(45deg,transparent 35%,rgba(185,242,255,.1) 42%,rgba(185,242,255,.25) 50%,rgba(185,242,255,.1) 58%,transparent 65%);animation-duration:3s}
.achievement-card.locked{opacity:.4;transform:translateY(0) scale(1)}
.achievement-card.earned:active{transform:scale(.92)}
.achievement-card-emoji{font-size:36px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));transition:transform .3s}
.achievement-card.earned:active .achievement-card-emoji{transform:scale(1.3) rotate(-8deg)}
.achievement-card.locked .achievement-card-emoji{filter:grayscale(1) brightness(.5);font-size:28px}
.achievement-card-title{font-size:11px;font-weight:800;color:#fff;line-height:1.2}
.achievement-card-desc{font-size:9px;font-weight:600;color:rgba(255,255,255,.5);line-height:1.2}
.achievement-card.locked .achievement-card-title{color:rgba(255,255,255,.35)}
.achievement-card.locked .achievement-card-desc{color:rgba(255,255,255,.25)}
/* Check mark on earned */
.achievement-card-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#4ade80,#22c55e);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;box-shadow:0 2px 6px rgba(34,197,94,.4);opacity:0;transform:scale(0);animation:achCheckIn .3s ease forwards}
/* Celebration particles on tap */
.ach-particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;animation:achParticleBurst .6s ease-out forwards}
@keyframes achCardIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes achShimmer{0%,100%{transform:translateX(-100%) rotate(0)}50%{transform:translateX(100%) rotate(0)}}
@keyframes achCheckIn{to{opacity:1;transform:scale(1)}}
@keyframes achParticleBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}

/* ===== ACHIEVEMENT POPUP ===== */
.achievement-popup{position:fixed;top:max(20px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-200%);z-index:10000;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.achievement-popup.show{transform:translate(-50%,0);pointer-events:auto}
.achievement-popup-inner{background:linear-gradient(145deg,#FFD700,#FFA500);padding:16px 24px;border-radius:22px;text-align:center;box-shadow:0 10px 40px rgba(255,165,0,.4),0 0 60px rgba(255,215,0,.2);min-width:260px;max-width:320px;animation:popupGlow 1.5s ease-in-out infinite}
@keyframes popupGlow{0%,100%{box-shadow:0 10px 40px rgba(255,165,0,.4),0 0 60px rgba(255,215,0,.2)}50%{box-shadow:0 10px 40px rgba(255,165,0,.6),0 0 80px rgba(255,215,0,.4)}}
.achievement-popup-emoji{font-size:60px;line-height:1;margin-bottom:6px;animation:popupEmoji .6s ease;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
@keyframes popupEmoji{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.achievement-popup-label{font-size:12px;font-weight:800;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.achievement-popup-title{font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.2);margin-bottom:2px}
.achievement-popup-desc{font-size:13px;font-weight:700;color:rgba(255,255,255,.85)}

/* ===== VICTORY ===== */
#victory-screen{background:linear-gradient(180deg,#667eea,#764ba2 50%,#f093fb);justify-content:center;align-items:center}
.victory-content{text-align:center;position:relative;padding:20px}
.victory-mascot{font-size:65px;animation:vDance .8s ease-in-out infinite;filter:drop-shadow(0 5px 12px rgba(0,0,0,.2));position:relative;display:inline-flex;align-items:center;justify-content:center}
.victory-mascot:has(.nena-char){animation:none}
.victory-mascot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(254,202,87,.4) 0%,transparent 70%);animation:victoryGlow 1.5s ease-in-out infinite;z-index:-1;pointer-events:none}
@keyframes victoryGlow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.4);opacity:.7}}
@keyframes vDance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}
.victory-stars-container{display:flex;justify-content:center;gap:8px;margin:12px 0}
.victory-star{font-size:48px;opacity:0;transform:scale(0)}
.victory-star.earned{opacity:1;transform:scale(1);animation:starEarnGlow .6s ease forwards;filter:drop-shadow(0 3px 8px rgba(254,202,87,.6))}
.victory-star.empty{opacity:.25;transform:scale(.8);filter:grayscale(1);animation:starEmpty .3s ease forwards}
.victory-star.s1.earned{animation-delay:.2s}.victory-star.s2.earned{animation-delay:.5s}.victory-star.s3.earned{animation-delay:.8s}
@keyframes starEarn{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes starEmpty{0%{transform:scale(0);opacity:0}100%{transform:scale(.8);opacity:.25}}
.victory-title{font-size:40px;font-weight:900;color:#fff;margin-bottom:6px;text-shadow:0 4px 12px rgba(0,0,0,.2);animation:victoryBounceIn .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes victoryBounceIn{0%{transform:scale(0) translateY(40px);opacity:0}60%{transform:scale(1.15) translateY(-8px);opacity:1}80%{transform:scale(.95) translateY(2px)}100%{transform:scale(1) translateY(0)}}
.victory-text{font-size:16px;color:rgba(255,255,255,.85);margin-bottom:8px;font-weight:600}
.victory-reward{font-size:15px;color:#FECA57;font-weight:800;margin-bottom:22px;min-height:22px}
.victory-buttons{display:flex;flex-direction:column;gap:10px;align-items:center}
.victory-btn{padding:14px 45px;border:none;border-radius:28px;font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 5px 16px rgba(0,0,0,.15);min-width:200px}
.next-btn{background:linear-gradient(145deg,#4ECDC4,#2ecc71);color:#fff}
.menu-btn{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(5px)}
.victory-btn:active{transform:scale(.95)}
.confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.confetti-piece{position:absolute;width:10px;height:10px;border-radius:2px;top:-10px;animation:confFall 3s ease-out forwards}
.confetti-star{position:absolute;top:-10px;background:none;width:auto;height:auto;line-height:1;animation:confFallSpin 3s ease-out forwards}
.confetti-ribbon{position:absolute;width:4px;height:20px;border-radius:2px;top:-20px;animation:confRibbon 3.5s ease-out forwards}
.confetti-burst{position:absolute;border-radius:50%;animation:confBurst .8s ease-out forwards;pointer-events:none}
.confetti-side-left{left:-10px!important;top:30%!important;animation:confSideLeft 2.5s ease-out forwards!important}
.confetti-side-right{right:-10px!important;left:auto!important;top:30%!important;animation:confSideRight 2.5s ease-out forwards!important}
@keyframes confFall{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}50%{opacity:1}100%{transform:translateY(100vh) rotate(1080deg) scale(.6);opacity:0}}
@keyframes confFallSpin{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}50%{opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(.5);opacity:0}}
@keyframes confRibbon{0%{transform:translateY(0) rotateX(0) scaleY(1);opacity:1}30%{transform:translateY(25vh) rotateX(180deg) scaleY(1.5)}60%{opacity:.8}100%{transform:translateY(100vh) rotateX(720deg) scaleY(.5);opacity:0}}
@keyframes confBurst{0%{transform:scale(0);opacity:.8}50%{transform:scale(1);opacity:.4}100%{transform:scale(2);opacity:0}}
@keyframes confSideLeft{0%{transform:translateX(0) translateY(0) rotate(0);opacity:1}100%{transform:translateX(60vw) translateY(50vh) rotate(400deg);opacity:0}}
@keyframes confSideRight{0%{transform:translateX(0) translateY(0) rotate(0);opacity:1}100%{transform:translateX(-60vw) translateY(50vh) rotate(-400deg);opacity:0}}
.victory-star.earned{opacity:1;transform:scale(1);animation:starEarnGlow .6s ease forwards;filter:drop-shadow(0 3px 8px rgba(254,202,87,.6))}
@keyframes starEarnGlow{0%{transform:scale(0) rotate(-30deg);opacity:0;filter:drop-shadow(0 0 0 rgba(254,202,87,0))}40%{transform:scale(1.4) rotate(10deg);opacity:1;filter:drop-shadow(0 0 30px rgba(254,202,87,.8))}70%{transform:scale(.9) rotate(-5deg);filter:drop-shadow(0 0 15px rgba(254,202,87,.5))}100%{transform:scale(1) rotate(0);opacity:1;filter:drop-shadow(0 3px 8px rgba(254,202,87,.6))}}

/* ===== RESPONSIVE ===== */
@media(max-width:360px){
.age-buttons{gap:10px}.age-number{font-size:30px}.mascot-greeting{font-size:18px}
.category-grid{grid-template-columns:repeat(3,1fr)}
.game-card-icon{font-size:30px}.game-card-title{font-size:10px}
.piano-key{width:40px;height:130px}.pad-icon{font-size:35px}
.speech-bubble{padding:10px 14px}.speech-bubble p{font-size:13px}
.bottom-nav-icon{font-size:22px}.bottom-nav-label{font-size:11px}
.bottom-nav-btn{padding:8px 4px}
.more-drawer-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.more-drawer-icon{font-size:28px}.more-drawer-label{font-size:12px}
.more-drawer-btn{padding:12px 6px}
}
@media(min-width:500px){
.category-grid{grid-template-columns:repeat(5,1fr);max-width:500px}
}

/* ===== CARE GAME ===== */
.care-game-area{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px 12px;gap:6px;overflow:hidden;position:relative}
.care-scenario-title{text-align:center;font-size:20px;font-weight:800;color:#fff;padding:4px 0 0;text-shadow:0 2px 8px rgba(0,0,0,.25);letter-spacing:.5px}
.care-progress{display:flex;justify-content:center;gap:8px;padding:4px 0}
.care-progress-dot{width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(255,255,255,.7);background:transparent;transition:all .4s ease}
.care-progress-dot.done{background:#fff;border-color:#fff;transform:scale(1.1)}
.care-progress-dot.active{border-color:#fff;animation:careDotPulse 1s ease-in-out infinite;box-shadow:0 0 8px rgba(255,255,255,.5)}
@keyframes careDotPulse{0%,100%{transform:scale(1);box-shadow:0 0 4px rgba(255,255,255,.3)}50%{transform:scale(1.25);box-shadow:0 0 12px rgba(255,255,255,.6)}}
.care-scene{width:100%;flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;border-radius:24px;overflow:hidden}
.care-scene-emoji{font-size:120px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));transition:transform .3s ease;position:relative;z-index:1}
.care-scene-emoji.react{animation:careSceneReact .4s ease}
@keyframes careSceneReact{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
.care-instruction{font-size:22px;font-weight:800;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.2);padding:4px 0;min-height:36px;animation:careInstrAppear .4s ease}
@keyframes careInstrAppear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.care-items{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:6px 0 10px;min-height:70px;width:100%}
.care-tool{width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.25);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:42px;cursor:pointer;border:3px solid rgba(255,255,255,.4);box-shadow:0 4px 15px rgba(0,0,0,.15);transition:transform .15s ease,box-shadow .15s ease;position:relative;z-index:10}
.care-tool:active{transform:scale(.92)}
.care-tool.bounce-hint{animation:careToolBounce 1.2s ease-in-out infinite}
@keyframes careToolBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.care-tool.dragging{position:fixed;z-index:2000;transform:scale(1.15);box-shadow:0 8px 30px rgba(0,0,0,.3);pointer-events:none;opacity:.9}
.care-tool.used{opacity:.3;pointer-events:none;transform:scale(.8)}
.care-choose-item{width:70px;height:70px;border-radius:18px;background:rgba(255,255,255,.3);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:36px;cursor:pointer;border:3px solid rgba(255,255,255,.4);box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .2s ease}
.care-choose-item.selected{border-color:#fff;background:rgba(255,255,255,.55);transform:scale(1.08);box-shadow:0 4px 20px rgba(255,255,255,.3)}
.care-choose-item .care-choose-label{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.care-tap-spot{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.25);border:2px dashed rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;animation:careTapHint 1.5s ease-in-out infinite;transition:all .25s ease;z-index:5}
.care-tap-spot:active{transform:scale(.9)}
@keyframes careTapHint{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.3)}50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.care-tap-spot.tapped{background:rgba(255,255,255,.6);border-style:solid;border-color:#fff;animation:careTapDone .3s ease forwards}
@keyframes careTapDone{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1);opacity:.4}}
.care-sparkle{position:absolute;pointer-events:none;font-size:22px;z-index:100;animation:careSparkle .7s ease forwards}
@keyframes careSparkle{0%{opacity:1;transform:scale(0) translateY(0)}40%{opacity:1;transform:scale(1.2) translateY(-15px)}100%{opacity:0;transform:scale(.6) translateY(-40px)}}
.care-step-success{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);z-index:50;animation:careSuccessMsg .8s ease forwards;white-space:nowrap;background:rgba(0,0,0,.15);padding:8px 20px;border-radius:16px;backdrop-filter:blur(6px)}
@keyframes careSuccessMsg{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}60%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) translateY(-20px)}}
.care-mini-confetti{position:absolute;pointer-events:none;z-index:60}
.care-mini-confetti span{position:absolute;font-size:16px;animation:careMiniPop .8s ease forwards}
@keyframes careMiniPop{0%{opacity:1;transform:translate(0,0) scale(0)}30%{transform:translate(var(--dx),var(--dy)) scale(1.1)}100%{opacity:0;transform:translate(calc(var(--dx)*1.5),calc(var(--dy)*1.5 - 30px)) scale(.5)}}
.care-counter{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.2);backdrop-filter:blur(4px);border-radius:12px;padding:4px 12px;font-size:16px;font-weight:800;color:#fff;z-index:10}
.care-scene-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.care-final-celebration{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:50;animation:careFinalIn .5s ease}
@keyframes careFinalIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.care-final-emoji{font-size:80px;animation:careFinalBounce 1s ease-in-out infinite}
@keyframes careFinalBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.05)}}
.care-final-text{font-size:26px;font-weight:900;color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.3)}

/* ===== COLOR SANDBOX ===== */
#game-colorsandbox{background:linear-gradient(180deg,#e056a0,#c44569)}
.sandbox-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px;overflow-y:auto;gap:12px}
.sandbox-colors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:6px}
.sandbox-blob{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:grab}
.sandbox-blob-circle{width:56px;height:56px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .15s}
.sandbox-blob:active .sandbox-blob-circle{transform:scale(1.15)}
.sandbox-blob-label{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.sandbox-mix-zone{width:160px;height:160px;border-radius:50%;border:4px dashed rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s;background:rgba(255,255,255,.1)}
.sandbox-mix-zone.highlight{border-color:#fff;background:rgba(255,255,255,.25);transform:scale(1.08)}
.sandbox-instruction{color:rgba(255,255,255,.8);font-size:14px;font-weight:700;text-align:center;padding:0 10px}
.sandbox-dropped-circle{width:60px;height:60px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.3);animation:sandboxDrop .4s ease}
.sandbox-dropped-circle.small{width:40px;height:40px}
.sandbox-result-circle{width:80px;height:80px;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.3);animation:sandboxReveal .5s ease}
@keyframes sandboxDrop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sandboxReveal{from{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.sandbox-mix-anim{display:flex;align-items:center;gap:8px}
.sandbox-op{color:#fff;font-size:24px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.sandbox-result{min-height:40px;display:flex;justify-content:center;width:100%}
.sandbox-equation{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;animation:sandboxReveal .5s ease}
.sandbox-equation span{color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.sandbox-eq-circle{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);flex-shrink:0}
.sandbox-eq-circle.big{width:36px;height:36px}
.sandbox-result-name{font-size:18px!important;font-weight:900!important;color:#FECA57!important}
.sandbox-history{display:flex;flex-direction:column;gap:6px;width:100%;max-width:320px;padding-bottom:10px}
.sandbox-history-row{display:flex;align-items:center;gap:6px;justify-content:center;background:rgba(255,255,255,.12);border-radius:12px;padding:6px 10px;animation:sandboxDrop .3s ease}
.sandbox-history-row span{color:rgba(255,255,255,.8);font-size:12px;font-weight:700}
.sandbox-h-circle{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.5);flex-shrink:0}
.sandbox-h-name{font-size:12px;font-weight:700;color:#FECA57!important}
.sandbox-clear-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px}

/* ===== COUNTING GAME (tap-to-count) ===== */
#game-counting{background:linear-gradient(180deg,#E74C3C,#c0392b)}
.counting-game-area{flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;gap:16px}
.counting-objects{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:360px;min-height:120px;padding:20px 24px;background:rgba(255,255,255,.18);border-radius:28px;backdrop-filter:blur(4px);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.counting-object{font-size:44px;display:inline-flex;align-items:center;justify-content:center;animation:countBounceIn .4s cubic-bezier(.36,.07,.19,.97) backwards;transform:rotate(var(--rot,0deg));position:relative;user-select:none;-webkit-user-select:none}
.counting-tappable{cursor:pointer;transition:transform .15s,filter .15s;border-radius:16px;padding:4px}
.counting-tappable:active{transform:scale(.85) rotate(var(--rot,0deg))!important}
.counting-counted{transform:scale(1.1) rotate(0deg)!important;filter:drop-shadow(0 0 8px rgba(255,215,0,.8))}
.counting-badge{position:absolute;top:-8px;right:-8px;background:#FECA57;color:#333;font-size:14px;font-weight:900;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);animation:badgePop .3s cubic-bezier(.36,.07,.19,.97);z-index:2;font-family:inherit}
@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.counting-tap-bounce{animation:countTapBounce .35s ease!important}
@keyframes countTapBounce{0%{transform:scale(1) rotate(0deg)}30%{transform:scale(1.25) rotate(0deg)}60%{transform:scale(.95) rotate(0deg)}100%{transform:scale(1.1) rotate(0deg)}}
.counting-wobble{animation:countBounceIn .4s cubic-bezier(.36,.07,.19,.97) backwards,countWobble var(--wobble-dur,3s) ease-in-out var(--wobble-delay,0s) infinite!important}
@keyframes countWobble{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}25%{transform:rotate(calc(var(--rot,0deg) + 5deg)) translateY(-4px)}75%{transform:rotate(calc(var(--rot,0deg) - 5deg)) translateY(3px)}}
.counting-wobble.counting-counted{animation:none!important;transform:scale(1.1) rotate(0deg)!important}
.counting-celebrate{animation:countCelebrate .6s ease forwards!important;filter:drop-shadow(0 0 12px rgba(255,215,0,1))}
@keyframes countCelebrate{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(10deg)}60%{transform:scale(.95) rotate(-5deg)}100%{transform:scale(1.15) rotate(0deg)}}
@keyframes countBounceIn{0%{transform:scale(0) rotate(var(--rot,0deg));opacity:0}60%{transform:scale(1.2) rotate(var(--rot,0deg));opacity:1}80%{transform:scale(.9) rotate(var(--rot,0deg))}100%{transform:scale(1) rotate(var(--rot,0deg));opacity:1}}
.counting-options{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:0 10px;align-items:center}
.counting-counter-area{display:flex;flex-direction:column;align-items:center;gap:2px}
.counting-counter{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.95);color:#E74C3C;font-size:40px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 -3px 0 rgba(0,0,0,.08);font-family:inherit;transition:transform .15s}
.counting-counter-pop{animation:counterPop .3s ease}
@keyframes counterPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.counting-counter-correct{background:#2ecc71!important;color:#fff!important;animation:pulse .5s ease}
.counting-counter-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:1px}
.counting-confirm-btn{padding:14px 32px;border:none;border-radius:20px;font-size:22px;font-weight:900;color:#fff;background:#2ecc71;cursor:pointer;box-shadow:0 6px 18px rgba(46,204,113,.4),inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s;font-family:inherit}
.counting-confirm-btn:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.counting-confirm-pulse{animation:confirmPulse 1s ease infinite}
@keyframes confirmPulse{0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(46,204,113,.4)}50%{transform:scale(1.08);box-shadow:0 8px 24px rgba(46,204,113,.6)}}
.counting-reset-btn{padding:8px 18px;border:none;border-radius:14px;font-size:15px;font-weight:700;color:rgba(255,255,255,.9);background:rgba(255,255,255,.2);cursor:pointer;transition:transform .15s,background .15s;font-family:inherit;backdrop-filter:blur(4px)}
.counting-reset-btn:active{transform:scale(.92);background:rgba(255,255,255,.3)}

/* ===== FLOATING PARTICLES (menu) ===== */
.menu-content::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:radial-gradient(3px 3px at 10% 20%,rgba(255,255,255,.3),transparent),radial-gradient(2px 2px at 30% 60%,rgba(255,255,255,.2),transparent),radial-gradient(3px 3px at 50% 80%,rgba(255,255,255,.25),transparent),radial-gradient(2px 2px at 70% 30%,rgba(255,255,255,.2),transparent),radial-gradient(3px 3px at 90% 70%,rgba(255,255,255,.3),transparent);background-size:100% 100%;animation:particlesDrift 8s ease-in-out infinite}
@keyframes particlesDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ===== VICTORY PARTICLES ===== */
#victory-screen::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:radial-gradient(4px 4px at 15% 25%,rgba(254,202,87,.4),transparent),radial-gradient(3px 3px at 35% 55%,rgba(78,205,196,.3),transparent),radial-gradient(4px 4px at 55% 75%,rgba(255,107,107,.4),transparent),radial-gradient(3px 3px at 75% 35%,rgba(84,160,255,.3),transparent),radial-gradient(4px 4px at 85% 85%,rgba(254,202,87,.4),transparent);background-size:100% 100%;animation:victoryParticles 3s ease-in-out infinite}
@keyframes victoryParticles{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* ===== CATEGORY HEADER ANIMATION ===== */
.category-header{animation:catHeaderSlide .4s ease both}
@keyframes catHeaderSlide{0%{opacity:0;transform:translateX(-15px)}100%{opacity:1;transform:translateX(0)}}
.menu-category:nth-child(1) .category-header{animation-delay:.05s}
.menu-category:nth-child(2) .category-header{animation-delay:.15s}
.menu-category:nth-child(3) .category-header{animation-delay:.25s}
.menu-category:nth-child(4) .category-header{animation-delay:.35s}

/* ===== IMPROVED BUTTON PRESS EFFECTS ===== */
.number-option,.abc-option,.pattern-option,.animal-option,.colormix-option,.color-option-btn{transition:all .15s cubic-bezier(.34,1.56,.64,1)}

/* ===== SMOOTH SCROLLBAR ===== */
.menu-content::-webkit-scrollbar{width:4px}
.menu-content::-webkit-scrollbar-track{background:transparent}
.menu-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px}

/* ===== COINS ANIMATION ===== */
.coin-count{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.menu-coins:active .coin-count{transform:scale(1.2)}
@keyframes coinPulse{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(10deg)}100%{transform:scale(1)}}

/* ===== GAME HEADER GLOW ===== */
.game-header{border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s}

/* ===== INSTRUCTION TEXT ANIMATION ===== */
.game-instruction{animation:instrFadeIn .5s ease both}
@keyframes instrFadeIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}

/* ===== SHOP ===== */
#shop-screen{background:linear-gradient(180deg,#f093fb,#f5576c 50%,#4facfe)}
.shop-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.shop-title{color:#fff;font-size:20px;font-weight:800}
.shop-balance{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);padding:8px 14px;border-radius:20px}
.shop-balance span{color:#fff;font-weight:800;font-size:18px}
.shop-content{flex:1;padding:15px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.shop-category{margin-bottom:18px}
.shop-cat-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:16px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shop-item{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border-radius:18px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;transition:all .3s}
.shop-item.owned{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.3)}
.shop-item.active{border-color:#FECA57;box-shadow:0 0 15px rgba(254,202,87,.3)}
.shop-item.expensive{opacity:.5}
.shop-item-emoji{font-size:45px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.2));animation:shopItemFloat 3s ease-in-out infinite}
@keyframes shopItemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.shop-item-title{font-size:13px;font-weight:800;color:#fff}
.shop-item-desc{font-size:10px;font-weight:600;color:rgba(255,255,255,.7);line-height:1.3}
.shop-buy-btn{border:none;border-radius:14px;background:linear-gradient(145deg,#FECA57,#F39C12);color:#fff;font-size:14px;font-weight:800;padding:8px 16px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(243,156,18,.3);transition:transform .15s}
.shop-buy-btn:active{transform:scale(.93)}
.shop-use-btn{border:none;border-radius:14px;background:rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;cursor:pointer;font-family:inherit;transition:transform .15s}
.shop-use-btn:active{transform:scale(.93)}
.shop-item-status{font-size:11px;font-weight:800;color:#FECA57;padding:4px 10px;background:rgba(254,202,87,.15);border-radius:10px}
.shop-btn{width:46px;height:46px;border:none;border-radius:16px;background:linear-gradient(145deg,#f093fb,#f5576c);font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(240,147,251,.3);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.shop-btn:active{transform:scale(.9)}
.shop-equip-btn{background:linear-gradient(145deg,#2ecc71,#27ae60)!important;color:#fff!important;font-weight:800!important}
.shop-unequip-btn{background:rgba(255,255,255,.15)!important;color:rgba(255,255,255,.8)!important}
.shop-mascot-preview{text-align:center;padding:15px 0 8px;margin-bottom:8px}
.shop-preview-label{font-size:14px;font-weight:800;color:rgba(255,255,255,.7);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.shop-preview-mascot{animation:shopPreviewBounce 2s ease-in-out infinite;margin:0 auto;display:flex;justify-content:center}
@keyframes shopPreviewBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}

/* ===== NENA CHARACTER (CSS-drawn mascot) ===== */
.nena-char{position:relative;display:inline-block;--nc-size:1}
/* Head / Body */
.nena-char .nc-body{width:calc(48px * var(--nc-size));height:calc(52px * var(--nc-size));background:linear-gradient(170deg,#c2855a 0%,#a0694a 60%,#8b5e42 100%);border-radius:calc(22px * var(--nc-size)) calc(22px * var(--nc-size)) calc(18px * var(--nc-size)) calc(18px * var(--nc-size));position:relative;box-shadow:0 calc(4px * var(--nc-size)) calc(12px * var(--nc-size)) rgba(0,0,0,.25),inset 0 calc(-6px * var(--nc-size)) calc(12px * var(--nc-size)) rgba(0,0,0,.1),inset 0 calc(4px * var(--nc-size)) calc(8px * var(--nc-size)) rgba(255,220,180,.3)}
/* Ears */
.nena-char .nc-ear{position:absolute;width:calc(16px * var(--nc-size));height:calc(16px * var(--nc-size));background:linear-gradient(145deg,#c2855a,#9e6940);border-radius:50%;top:calc(-5px * var(--nc-size));box-shadow:inset 0 calc(-2px * var(--nc-size)) calc(4px * var(--nc-size)) rgba(0,0,0,.15)}
.nena-char .nc-ear::after{content:'';position:absolute;width:60%;height:60%;background:linear-gradient(145deg,#f4b8a0,#e8a089);border-radius:50%;top:20%;left:20%}
.nena-char .nc-ear-l{left:calc(-2px * var(--nc-size))}
.nena-char .nc-ear-r{right:calc(-2px * var(--nc-size))}
/* Face area - lighter belly/face patch */
.nena-char .nc-face{position:absolute;width:calc(36px * var(--nc-size));height:calc(30px * var(--nc-size));background:linear-gradient(180deg,#f0d4b8,#e8c4a0);border-radius:calc(14px * var(--nc-size));top:calc(14px * var(--nc-size));left:50%;transform:translateX(-50%)}
/* Eyes */
.nena-char .nc-eye{position:absolute;width:calc(7px * var(--nc-size));height:calc(8px * var(--nc-size));background:radial-gradient(circle at 35% 35%,#4a3728,#1a1008);border-radius:50%;top:calc(19px * var(--nc-size));animation:ncBlink 4s ease-in-out infinite}
.nena-char .nc-eye::after{content:'';position:absolute;width:calc(3px * var(--nc-size));height:calc(2.5px * var(--nc-size));background:rgba(255,255,255,.85);border-radius:50%;top:calc(1px * var(--nc-size));left:calc(1px * var(--nc-size))}
.nena-char .nc-eye-l{left:calc(11px * var(--nc-size))}
.nena-char .nc-eye-r{right:calc(11px * var(--nc-size))}
@keyframes ncBlink{0%,42%,50%,100%{transform:scaleY(1)}45%,47%{transform:scaleY(.1)}}
/* Nose */
.nena-char .nc-nose{position:absolute;width:calc(8px * var(--nc-size));height:calc(5px * var(--nc-size));background:linear-gradient(145deg,#5a3d2e,#3d2818);border-radius:calc(4px * var(--nc-size)) calc(4px * var(--nc-size)) calc(3px * var(--nc-size)) calc(3px * var(--nc-size));top:calc(28px * var(--nc-size));left:50%;transform:translateX(-50%)}
.nena-char .nc-nose::after{content:'';position:absolute;width:calc(3px * var(--nc-size));height:calc(1.5px * var(--nc-size));background:rgba(255,255,255,.4);border-radius:50%;top:calc(1px * var(--nc-size));left:calc(1.5px * var(--nc-size))}
/* Mouth */
.nena-char .nc-mouth{position:absolute;width:calc(12px * var(--nc-size));height:calc(5px * var(--nc-size));border-bottom:calc(2px * var(--nc-size)) solid #5a3d2e;border-radius:0 0 calc(6px * var(--nc-size)) calc(6px * var(--nc-size));top:calc(33px * var(--nc-size));left:50%;transform:translateX(-50%);transition:all .3s ease}
/* Cheeks - blush */
.nena-char .nc-cheek{position:absolute;width:calc(9px * var(--nc-size));height:calc(6px * var(--nc-size));background:radial-gradient(ellipse,rgba(255,130,130,.55),transparent);border-radius:50%;top:calc(30px * var(--nc-size))}
.nena-char .nc-cheek-l{left:calc(4px * var(--nc-size))}
.nena-char .nc-cheek-r{right:calc(4px * var(--nc-size))}
/* Idle breathing animation */
.nena-char .nc-body{animation:ncBreathe 3.5s ease-in-out infinite}
@keyframes ncBreathe{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.03) scaleX(.98)}}
/* Happy state on tap */
.nena-char.nc-happy .nc-eye{animation:none;transform:scaleY(.3);border-radius:calc(4px * var(--nc-size)) calc(4px * var(--nc-size)) 0 0}
.nena-char.nc-happy .nc-mouth{height:calc(7px * var(--nc-size));border-bottom-width:0;background:linear-gradient(180deg,#5a3d2e,#3d2818);border-radius:0 0 calc(8px * var(--nc-size)) calc(8px * var(--nc-size))}
.nena-char.nc-happy .nc-cheek{opacity:1;width:calc(11px * var(--nc-size));height:calc(7px * var(--nc-size))}
/* Size variants */
.nena-char.nc-xs{--nc-size:.6}
.nena-char.nc-sm{--nc-size:.85}
.nena-char.nc-md{--nc-size:1}
.nena-char.nc-lg{--nc-size:1.4}
.nena-char.nc-xl{--nc-size:1.8}
/* Victory dance */
.nena-char.nc-dance .nc-body{animation:ncDance .8s ease-in-out infinite}
@keyframes ncDance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)}}
/* Sleepy state for bedtime */
.nena-char.nc-sleepy .nc-eye{animation:none;transform:scaleY(.15);border-radius:calc(4px * var(--nc-size))}
.nena-char.nc-sleepy .nc-mouth{width:calc(6px * var(--nc-size));height:calc(6px * var(--nc-size));border:0;background:#5a3d2e;border-radius:50%;top:calc(34px * var(--nc-size))}
.nena-char.nc-sleepy .nc-body{animation:ncSleepFloat 4s ease-in-out infinite}
@keyframes ncSleepFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
/* Wave for age screen */
.nena-char.nc-wave .nc-body{animation:ncWave 2s ease-in-out infinite}
@keyframes ncWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ===== MASCOT ACCESSORIES ===== */
.mascot-with-acc{position:relative;display:inline-block}
.victory-mascot-wrapper{margin:0 auto}
.mascot-bounce-wrapper{position:relative;display:inline-block}
.mascot-acc-item{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));line-height:1;transition:all .3s ease;animation:accAppear .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes accAppear{0%{opacity:0;transform:translate(var(--tx,-50%),0) scale(0) rotate(0)}100%{opacity:1;transform:translate(var(--tx,-50%),0) scale(1)}}
.mascot-acc-hat{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.mascot-acc-back{opacity:.85}

/* ===== ODD ONE OUT GAME ===== */
#game-oddone{background:linear-gradient(180deg,#1ABC9C,#0e8c71)}
.oddone-game-area{flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:12px}
.oddone-grid{display:grid;gap:10px;justify-content:center;align-items:center;width:100%;max-width:380px}
.oddone-item{border:none;border-radius:20px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);cursor:pointer;font-family:inherit;line-height:1;display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s,background .15s;animation:oddoneEntry .4s cubic-bezier(.34,1.56,.64,1) both}
.oddone-item:hover{transform:scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.oddone-item:active{transform:scale(.92)}
.oddone-item.found{background:rgba(255,255,255,.9);box-shadow:0 0 0 4px #fff,0 0 20px rgba(254,202,87,.8);animation:oddoneFound .5s cubic-bezier(.34,1.56,.64,1) forwards;pointer-events:none}
.oddone-item.wrong{animation:oddoneWrong .4s ease both}
.oddone-tap-zoom{animation:oddoneTapZoom .25s ease!important}
@keyframes oddoneTapZoom{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.oddone-found-spin{animation:oddoneFoundSpin .6s cubic-bezier(.34,1.56,.64,1) forwards!important}
@keyframes oddoneFoundSpin{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.3) rotate(15deg)}70%{transform:scale(1.1) rotate(-8deg)}100%{transform:scale(1.15) rotate(0)}}
.oddone-hint-wobble{animation:oddoneHintWobble .6s ease-in-out infinite!important}
@keyframes oddoneHintWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}
.oddone-fade-out{opacity:.2!important;transform:scale(.9)!important;transition:all .4s ease!important;pointer-events:none}
@keyframes oddoneEntry{0%{opacity:0;transform:scale(.4) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes oddoneFound{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(5deg)}60%{transform:scale(1.2) rotate(-3deg)}100%{transform:scale(1.1) rotate(0)}}
@keyframes oddoneWrong{0%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-4deg)}40%{transform:translateX(8px) rotate(4deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}100%{transform:translateX(0) rotate(0)}}
.oddone-timer-bar{width:90%;max-width:340px;height:10px;background:rgba(255,255,255,.25);border-radius:10px;overflow:hidden;flex-shrink:0}
.oddone-timer-fill{height:100%;background:linear-gradient(90deg,#FECA57,#FF6B6B);border-radius:10px;width:100%}

/* ===== DOTS GAME (Ligar os Pontos) ===== */
#game-dots{background:linear-gradient(180deg,#2980b9,#1a5276)}
.dots-game-area{position:relative;align-items:center;justify-content:center;padding:8px}
#dots-canvas{position:absolute;top:0;left:0;display:block;border-radius:16px;pointer-events:none}
.dots-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.dot-point{position:absolute;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #3498DB;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#2c3e50;cursor:pointer;pointer-events:all;touch-action:manipulation;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:transform .15s,background .2s,border-color .2s;user-select:none;-webkit-user-select:none;min-width:44px;min-height:44px;z-index:10}
.dot-point:active{transform:scale(.88)}
.dot-point.active{background:#FECA57;border-color:#f39c12;color:#7d5700;box-shadow:0 0 0 4px rgba(254,202,87,.4),0 4px 14px rgba(0,0,0,.3);animation:dotPulse 1s ease-in-out infinite}
.dot-point.completed{background:#4ECDC4;border-color:#1abc9c;color:#fff;width:36px;height:36px;font-size:12px;box-shadow:0 2px 8px rgba(78,205,196,.5);margin-left:6px;margin-top:6px;animation:dotPop .25s ease}
.dot-point.shake-error{animation:shake .4s ease}
.dots-result-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:72px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.3));animation:dotsEmojiReveal .5s cubic-bezier(.34,1.56,.64,1) .2s forwards;pointer-events:none;z-index:20}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(254,202,87,.4),0 4px 14px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 8px rgba(254,202,87,.2),0 4px 18px rgba(0,0,0,.3)}}
@keyframes dotPop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes dotsEmojiReveal{0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg)}70%{transform:translate(-50%,-50%) scale(1.15) rotate(5deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
.dots-shape-name{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);opacity:0;animation:dotsNameAppear .5s ease .6s forwards;pointer-events:none;z-index:20;background:rgba(78,205,196,.85);padding:6px 20px;border-radius:20px}
@keyframes dotsNameAppear{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.dots-hint-arrow{position:absolute;pointer-events:none;z-index:5;opacity:0;transition:opacity .3s}
.dots-hint-arrow.visible{opacity:1}
.dots-hint-arrow-inner{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#f39c12;animation:dotsHintBounce 1s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(243,156,18,.5))}
@keyframes dotsHintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dot-point.active{background:#FECA57;border-color:#f39c12;color:#7d5700;box-shadow:0 0 0 6px rgba(254,202,87,.5),0 4px 14px rgba(0,0,0,.3);animation:dotPulseStrong 1s ease-in-out infinite}
@keyframes dotPulseStrong{0%,100%{box-shadow:0 0 0 6px rgba(254,202,87,.5),0 4px 14px rgba(0,0,0,.3);transform:scale(1)}50%{box-shadow:0 0 0 12px rgba(254,202,87,.2),0 4px 18px rgba(0,0,0,.3);transform:scale(1.08)}}
.dots-progress-bar{position:absolute;bottom:4px;left:10%;width:80%;height:6px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;z-index:15}
.dots-progress-fill{height:100%;background:linear-gradient(90deg,#FECA57,#4ECDC4);border-radius:3px;transition:width .3s ease;width:0%}

/* ===== SEQUENCE GAME ===== */
#game-sequence{background:linear-gradient(180deg,#8E44AD,#6c3483)}
.sequence-game-area{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:10px 14px}
.sequence-display{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;max-width:420px;padding:18px 16px;background:rgba(255,255,255,.12);border-radius:28px;backdrop-filter:blur(6px);box-shadow:0 4px 20px rgba(0,0,0,.2);position:relative}
.sequence-item{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:seqItemIn .4s cubic-bezier(.34,1.56,.64,1) both;flex-shrink:0;position:relative}
.sequence-arrow{display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,.6);flex-shrink:0;animation:seqArrowIn .3s ease both;width:16px}
@keyframes seqArrowIn{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes seqItemIn{0%{opacity:0;transform:scale(0) rotate(-15deg)}70%{transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.sequence-question{background:rgba(255,255,255,.18);border:3px dashed rgba(255,255,255,.7);color:#fff;font-size:36px;animation:seqItemIn .4s cubic-bezier(.34,1.56,.64,1) both,seqPulse 1.2s ease-in-out .6s infinite;transition:background .3s,border-color .3s,box-shadow .3s}
.sequence-question.seq-drop-hover{background:rgba(255,255,255,.45);border-color:#FECA57;box-shadow:0 0 0 6px rgba(254,202,87,.4),0 4px 20px rgba(0,0,0,.3);transform:scale(1.08);animation:none}
@keyframes seqPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.2)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.15),0 4px 16px rgba(0,0,0,.3)}}
.sequence-question.answered{animation:seqSnapIn .5s cubic-bezier(.34,1.56,.64,1) both;background:rgba(255,255,255,.7);border:3px solid #2ecc71;color:#1a5c2e;box-shadow:0 0 0 5px rgba(46,204,113,.4),0 4px 14px rgba(0,0,0,.25)}
@keyframes seqSnapIn{0%{transform:scale(1.3);opacity:.5}50%{transform:scale(.85)}100%{transform:scale(1);opacity:1}}
.sequence-question.answered-wrong{animation:seqItemIn .4s cubic-bezier(.34,1.56,.64,1) both;background:rgba(255,255,255,.5);border:3px solid #FECA57;color:#7d5700;box-shadow:0 0 0 4px rgba(254,202,87,.5),0 4px 14px rgba(0,0,0,.25)}
.seq-item-hidden{opacity:0!important;transform:scale(0)!important;animation:none!important}
.seq-item-reveal{animation:seqRevealPop .4s cubic-bezier(.34,1.56,.64,1) forwards!important;opacity:1!important}
@keyframes seqRevealPop{0%{opacity:0;transform:scale(0) rotate(-10deg)}60%{opacity:1;transform:scale(1.15) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.seq-question-appear{animation:seqQuestionAppear .5s cubic-bezier(.34,1.56,.64,1) forwards,seqPulse 1.2s ease-in-out .8s infinite!important;opacity:1!important}
@keyframes seqQuestionAppear{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
.sequence-options{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:380px;padding:8px 0}
.sequence-drag-hint{font-size:13px;color:rgba(255,255,255,.6);text-align:center;margin-top:-8px;animation:seqHintFade 2s ease-in-out infinite}
@keyframes seqHintFade{0%,100%{opacity:.5}50%{opacity:1}}
.sequence-option-btn{width:76px;height:76px;border:none;border-radius:22px;font-size:32px;font-weight:900;color:#fff;cursor:grab;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 -4px 0 rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s;font-family:inherit;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 6px rgba(0,0,0,.2);animation:seqBtnIn .35s cubic-bezier(.34,1.56,.64,1) both;-webkit-user-select:none;user-select:none;touch-action:none}
@keyframes seqBtnIn{0%{opacity:0;transform:scale(0) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.sequence-option-btn:active{transform:scale(.9);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sequence-option-btn.seq-dragging{opacity:.3;transform:scale(.85)}
.sequence-option-btn.correct{background:#2ecc71!important;box-shadow:0 6px 18px rgba(46,204,113,.5),inset 0 -4px 0 rgba(0,0,0,.1);animation:seqCorrectPop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes seqCorrectPop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-5deg)}70%{transform:scale(1.15) rotate(3deg)}100%{transform:scale(1.1) rotate(0)}}
.sequence-option-btn.wrong{animation:seqWrong .4s ease both}
@keyframes seqWrong{0%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-4deg)}40%{transform:translateX(8px) rotate(4deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}100%{transform:translateX(0) rotate(0)}}
.sequence-option-btn.seq-placed{opacity:0;pointer-events:none;transform:scale(0);transition:all .3s ease}
.seq-sparkle{position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;animation:seqSparkle .6s ease-out forwards}
@keyframes seqSparkle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}

/* ===== WORDS GAME ===== */
#game-words{background:linear-gradient(180deg,#e17055,#fab1a0)}
.words-game-area{flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:12px 16px}
.words-image{font-size:88px;line-height:1;text-align:center;background:rgba(255,255,255,.25);border-radius:28px;padding:18px 26px;box-shadow:0 6px 24px rgba(0,0,0,.15);backdrop-filter:blur(6px);transition:transform .3s,box-shadow .3s}
.words-image.words-image-correct{animation:wordsImagePop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes wordsImagePop{0%{transform:scale(1)}50%{transform:scale(1.18) rotate(-4deg)}75%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1.05) rotate(0)}}
.words-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.words-slot{width:50px;height:56px;border:3px dashed rgba(255,255,255,.7);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;background:rgba(255,255,255,.15);transition:border .2s,background .2s,transform .15s;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.words-slot.filled{border:3px solid #2ecc71;background:rgba(46,204,113,.25);cursor:pointer}
.words-slot.filled:active{transform:scale(.9)}
.words-slot.correct{border:3px solid #fdcb6e;background:rgba(253,203,110,.35);animation:wordsSlotCorrect .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes wordsSlotCorrect{0%{transform:scale(1)}50%{transform:scale(1.2) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
.words-slot.shake{animation:wordsShake .45s ease both}
@keyframes wordsShake{0%{transform:translateX(0)}15%{transform:translateX(-8px) rotate(-4deg)}35%{transform:translateX(8px) rotate(4deg)}55%{transform:translateX(-5px)}75%{transform:translateX(5px)}100%{transform:translateX(0) rotate(0)}}
.words-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:360px}
.words-letter-btn{width:58px;height:58px;border:none;border-radius:18px;font-size:24px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.22),inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s,opacity .2s;font-family:inherit;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 5px rgba(0,0,0,.18);animation:wordsBtnIn .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes wordsBtnIn{0%{opacity:0;transform:scale(0) translateY(18px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.words-letter-btn:active:not(.used){transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.words-letter-btn.used{opacity:.3;pointer-events:none;transform:scale(.88)}
.words-slot.slot-ok{border-color:#2ecc71;background:rgba(46,204,113,.35)}
.words-slot.slot-maybe{border-color:#fdcb6e;background:rgba(253,203,110,.2)}
.words-slot.slot-hint{color:rgba(255,255,255,.2);font-size:22px;border-style:dashed}
.words-slot.slot-correct-hint{border-color:#2ecc71!important;background:rgba(46,204,113,.4)!important}
.words-slot-pop{animation:wordsSlotPop .3s cubic-bezier(.34,1.56,.64,1)!important}
@keyframes wordsSlotPop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.words-word-label{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);font-size:18px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);background:rgba(46,204,113,.8);padding:4px 16px;border-radius:14px;white-space:nowrap;animation:wordsLabelPop .4s ease}

/* ===== MAZE GAME (Labirinto) ===== */
#game-maze{background:linear-gradient(180deg,#2d3436,#636e72)}
.maze-game-area{flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:8px 12px}
.maze-grid{display:grid;gap:0;border-radius:8px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.5);flex-shrink:0}
.maze-cell{display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .12s;position:relative}
.maze-wall{background:linear-gradient(135deg,#2d3436 0%,#636e72 100%)}
.maze-path{background:#f5f6fa}
.maze-exit{background:#f5f6fa;animation:mazeExitGlow 1.2s ease-in-out infinite}
@keyframes mazeExitGlow{0%,100%{box-shadow:inset 0 0 0 2px #FECA57,0 0 8px rgba(254,202,87,.4)}50%{box-shadow:inset 0 0 0 3px #FF9F43,0 0 16px rgba(255,159,67,.7)}}
.maze-exit-icon{font-size:1.4em;line-height:1;animation:mazeFlagWave .8s ease-in-out infinite alternate}
@keyframes mazeFlagWave{0%{transform:rotate(-8deg) scale(0.9)}100%{transform:rotate(8deg) scale(1.05)}}
.maze-has-player{background:#dfe6e9}
.maze-player-icon{font-size:1.3em;line-height:1;transition:transform .12s cubic-bezier(.34,1.56,.64,1);display:block;animation:mazePlayerBob .6s ease-in-out infinite alternate}
@keyframes mazePlayerBob{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-2px) scale(1.05)}}
.maze-controls{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.maze-dir-row{display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center}
.maze-dir-btn{width:58px;height:58px;border-radius:50%;border:none;background:rgba(255,255,255,.22);color:#fff;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 -3px 0 rgba(0,0,0,.15);transition:transform .1s,box-shadow .1s,background .1s;touch-action:manipulation;user-select:none;-webkit-user-select:none;backdrop-filter:blur(4px)}
.maze-dir-btn:active{transform:scale(.88);box-shadow:0 2px 6px rgba(0,0,0,.2);background:rgba(255,255,255,.35)}
.maze-btn-bump{animation:mazeBtnBump .3s ease}
@keyframes mazeBtnBump{0%{transform:scale(1)}40%{transform:scale(.78)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.maze-trail{background:rgba(108,92,231,.15)!important}
.maze-trail::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(108,92,231,.3);top:50%;left:50%;transform:translate(-50%,-50%)}
.maze-star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1em;animation:mazeStarPulse 1.5s ease-in-out infinite;z-index:2;pointer-events:none;filter:drop-shadow(0 0 4px rgba(254,202,87,.6))}
@keyframes mazeStarPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}
.maze-star-collect{animation:mazeStarCollect .4s ease-out forwards!important}
@keyframes mazeStarCollect{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-80%) scale(1.8);opacity:0}}
.maze-star-counter{display:flex;align-items:center;gap:4px;background:rgba(254,202,87,.2);border-radius:14px;padding:2px 10px;font-weight:700;font-size:14px;color:#f39c12}
.maze-player-icon{transition:transform .15s ease!important}

/* ===== MATH GAME (Matematica) ===== */
#game-math{background:linear-gradient(180deg,#27ae60,#2ecc71)}
.math-game-area{flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:10px 14px}
.math-problem{display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.2);border-radius:28px;padding:18px 28px;box-shadow:0 6px 24px rgba(0,0,0,.15);backdrop-filter:blur(6px);flex-wrap:wrap}
.math-num{font-size:64px;font-weight:900;line-height:1;text-shadow:0 4px 12px rgba(0,0,0,.25);animation:mathNumIn .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mathNumIn{0%{opacity:0;transform:scale(0) rotate(-15deg)}70%{transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.math-op{font-size:52px;font-weight:900;line-height:1;text-shadow:0 3px 8px rgba(0,0,0,.2)}
.math-question{font-size:64px;font-weight:900;color:#FECA57;text-shadow:0 4px 12px rgba(0,0,0,.25);animation:mathQuesPulse 1s ease-in-out infinite}
@keyframes mathQuesPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-3deg)}}
.math-visual{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-height:60px;max-width:360px}
.math-visual-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;max-width:180px}
.math-visual-op{font-size:36px;font-weight:900;color:rgba(255,255,255,.9);margin:0 6px;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.math-emoji-item{font-size:32px;line-height:1;animation:mathEmojiIn .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mathEmojiIn{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.math-emoji-crossed{opacity:.35;text-decoration:line-through;filter:grayscale(1)}
.math-visual-hint{font-size:38px;opacity:.85;letter-spacing:8px}
.math-answer-reveal{animation:mathAnswerReveal .5s cubic-bezier(.34,1.56,.64,1) forwards!important;color:#55efc4!important}
@keyframes mathAnswerReveal{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.3) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.math-emoji-counted{animation:mathEmojiCount .3s ease!important;filter:brightness(1.5) drop-shadow(0 0 8px rgba(254,202,87,.6))}
@keyframes mathEmojiCount{0%{transform:scale(1)}50%{transform:scale(1.35) translateY(-5px)}100%{transform:scale(1.15)}}
.math-visual-shake{animation:mathVisShake .4s ease!important}
@keyframes mathVisShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.math-problem-flash{animation:mathProbFlash .5s ease}
@keyframes mathProbFlash{0%,100%{opacity:1}50%{opacity:.4}}
.math-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:320px}
.math-option-btn{width:100%;height:80px;border:none;border-radius:24px;font-size:40px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 -4px 0 rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s;font-family:inherit;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 6px rgba(0,0,0,.2);animation:mathBtnIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mathBtnIn{0%{opacity:0;transform:scale(0) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.math-option-btn:active{transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.math-option-btn.correct{background:#27ae60!important;box-shadow:0 6px 18px rgba(39,174,96,.5),inset 0 -4px 0 rgba(0,0,0,.1);animation:pulse .5s ease}
.math-option-btn.wrong{animation:shake .4s ease both;opacity:.5}

/* ===== CLOCK GAME (Relogio) ===== */
#game-clock{background:linear-gradient(180deg,#f9a825,#fdcb6e)}
.clock-game-area{flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:10px 14px}
#clock-canvas{display:block;border-radius:50%;box-shadow:0 8px 32px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);touch-action:none}
.clock-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:320px;margin-top:4px}
.clock-option-btn{width:100%;height:72px;border:none;border-radius:22px;font-size:22px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.22),inset 0 -4px 0 rgba(0,0,0,.13);transition:transform .15s,box-shadow .15s;font-family:inherit;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 6px rgba(0,0,0,.18);animation:mathBtnIn .35s cubic-bezier(.34,1.56,.64,1) both}
.clock-option-btn:active{transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.clock-option-btn.correct{background:#27ae60!important;box-shadow:0 6px 18px rgba(39,174,96,.5),inset 0 -4px 0 rgba(0,0,0,.1);animation:pulse .5s ease}
.clock-option-btn.wrong{animation:shake .4s ease both;opacity:.5}
.clock-time-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:900;color:#fff;background:rgba(108,92,231,.85);padding:8px 20px;border-radius:20px;z-index:5;animation:clockLabelPop .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(108,92,231,.4);pointer-events:none}
@keyframes clockLabelPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}60%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.clock-shake{animation:clockShake .4s ease!important}
@keyframes clockShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

/* ===== BUBBLES TOY ===== */
#game-bubbles{background:linear-gradient(180deg,#74b9ff 0%,#a29bfe 40%,#dfe6e9 100%);flex-direction:column}
#bubbles-canvas{flex:1;width:100%;display:block;touch-action:none}
.bubbles-mode-bar{display:flex;gap:8px;justify-content:center;padding:4px 12px;position:absolute;top:52px;left:0;right:0;z-index:5}
.bubbles-mode-btn{border:2px solid rgba(255,255,255,.4);border-radius:14px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;color:#fff;background:rgba(255,255,255,.12);transition:all .2s;backdrop-filter:blur(4px)}
.bubbles-mode-btn.active{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.7);box-shadow:0 0 10px rgba(255,255,255,.2)}
.bubbles-challenge-hud{position:absolute;top:88px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);border-radius:14px;padding:5px 16px;color:#fff;font-weight:700;font-size:14px;backdrop-filter:blur(4px)}
.bubbles-hud-next{font-size:24px;color:#FECA57;font-weight:900;min-width:28px;text-align:center}
.bubbles-hud-score{font-size:11px;opacity:.7}

/* ===== AQUARIUM TOY ===== */
#game-aquarium{background:#001f3f;flex-direction:column}
#aquarium-canvas{flex:1;width:100%;display:block;touch-action:none}

/* ===== FIREWORKS TOY ===== */
#game-fireworks{background:#0a0a1a;flex-direction:column}
#fireworks-canvas{flex:1;width:100%;display:block;touch-action:none}
.fireworks-hud{position:absolute;top:52px;right:12px;z-index:5;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.12);border-radius:14px;padding:4px 12px;color:#fff;font-weight:800;font-size:16px;backdrop-filter:blur(4px)}
.fireworks-counter-label{font-size:18px}
.fireworks-counter-num{min-width:20px;text-align:center;color:#FECA57}

/* ===== KALEIDOSCOPE TOY ===== */
#game-kaleidoscope{background:#1a1a2e;flex-direction:column}
#kaleidoscope-canvas{flex:1;width:100%;display:block;touch-action:none}

/* ===== GRAVITY TOY ===== */
#game-gravity{background:#1a1a2e;flex-direction:column}
#gravity-canvas{flex:1;width:100%;display:block;touch-action:none}

/* ===== SPIROGRAPH TOY ===== */
#game-spirograph{background:#0a0a0f;flex-direction:column}
#spirograph-canvas{flex:1;width:100%;display:block;touch-action:none}

/* ===== SHADOWS GAME ===== */
#game-shadows{background:linear-gradient(180deg,#2d3436 0%,#636e72 60%,#4a4a5a 100%)}
.shadows-game-area{flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:12px}
.shadows-display{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border-radius:24px;padding:24px 32px;box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:160px;min-height:160px}
.shadow-emoji{display:block;filter:brightness(0);transition:filter .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
.shadow-emoji.revealed{filter:none;animation:shadowReveal .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes shadowReveal{0%{transform:scale(.5) rotate(-10deg);filter:brightness(0)}60%{transform:scale(1.25) rotate(5deg)}100%{transform:scale(1) rotate(0deg);filter:none}}
.shadows-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;max-width:400px}
.shadow-option{background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.3);border-radius:20px;padding:10px 14px;font-size:52px;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;box-shadow:0 4px 16px rgba(0,0,0,.25);touch-action:manipulation;user-select:none;-webkit-user-select:none;backdrop-filter:blur(6px)}
.shadow-option:active{transform:scale(.88)}
.shadow-option:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
.shadow-option.correct{background:rgba(46,213,115,.35);border-color:#2ed573;animation:shadowOptionCorrect .4s ease both}
.shadow-option.wrong{background:rgba(255,71,87,.35);border-color:#ff4757;animation:shadowOptionWrong .4s ease both}
.shadow-drag-clone{position:fixed;z-index:2000;pointer-events:none;font-size:60px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));transition:none;width:70px;height:70px;display:flex;align-items:center;justify-content:center}
.shadow-drop-target{background:rgba(255,255,255,.15)!important;box-shadow:0 0 0 4px rgba(254,202,87,.5),0 8px 32px rgba(0,0,0,.5)!important;transform:scale(1.05);transition:all .2s}
.shadows-drag-hint{width:100%;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);padding:2px 0;animation:shadowHintPulse 2s ease-in-out infinite}
@keyframes shadowHintPulse{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes shadowOptionCorrect{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes shadowOptionWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ===== MATCHING GAME (Encontre o Par) ===== */
#game-matching{background:linear-gradient(180deg,#a29bfe,#6c5ce7)}
.matching-game-area{flex-direction:row;align-items:stretch;justify-content:center;gap:20px;padding:12px 16px}
.matching-left,.matching-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;max-width:160px}
.matching-item{width:100%;min-height:64px;border:none;border-radius:20px;background:#fff;font-size:46px;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.18);transition:transform .15s,border .15s,box-shadow .15s,opacity .3s;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;padding:6px 0;font-family:inherit}
.matching-item:active{transform:scale(.92)}
.matching-item.selected{border:3px solid #fdcb6e;box-shadow:0 0 0 4px rgba(253,203,110,.5),0 5px 18px rgba(0,0,0,.18);transform:scale(1.08)}
.matching-item.matched{opacity:.25;pointer-events:none;border:3px solid #55efc4}
.matching-item.wrong{animation:matchingShake .4s ease both}
.matching-lines-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
.matching-line{stroke-width:3;stroke-linecap:round;fill:none;opacity:0;animation:matchLineAppear .4s ease forwards}
@keyframes matchLineAppear{from{opacity:0;stroke-dashoffset:200}to{opacity:.6;stroke-dashoffset:0}}
.matching-item.dragging{opacity:.4!important;transform:scale(.9)}
.matching-item.drag-over{border:3px solid #48DBFB;box-shadow:0 0 0 4px rgba(72,219,251,.4),0 5px 18px rgba(0,0,0,.18);transform:scale(1.05)}
.matching-drag-clone{position:fixed;z-index:2000;pointer-events:none;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:none;font-size:46px;opacity:.9}
@keyframes matchingShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ===== JOBS GAME (Profissoes) ===== */
#game-jobs{background:linear-gradient(180deg,#00cec9,#00b894)}
.jobs-game-area{flex-direction:column;align-items:center;justify-content:space-evenly;gap:12px;padding:10px 16px}

/* Professionals - drop zones at top */
.jobs-professionals{display:flex;justify-content:center;gap:12px;width:100%;flex-wrap:wrap}
.jobs-person-zone{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.18);border:3px dashed rgba(255,255,255,.4);border-radius:22px;padding:10px 12px;min-width:90px;flex:1;max-width:140px;transition:all .2s;position:relative}
.jobs-person-emoji{font-size:48px;line-height:1;display:block;animation:jobsPersonPop .4s cubic-bezier(.34,1.56,.64,1) both}
.jobs-person-name{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3);text-align:center}
.jobs-tool-slot{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-top:4px;transition:all .25s}
.jobs-slot-hint{font-size:24px;opacity:.4;color:#fff}
.jobs-slot-filled{border-style:solid;border-color:rgba(46,213,115,.6);background:rgba(46,213,115,.15)}
.jobs-slot-filled .jobs-tool-emoji{font-size:32px}
@keyframes jobsPersonPop{0%{transform:scale(0) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
.jobs-person-zone:nth-child(1) .jobs-person-emoji{animation-delay:.05s}
.jobs-person-zone:nth-child(2) .jobs-person-emoji{animation-delay:.15s}
.jobs-person-zone:nth-child(3) .jobs-person-emoji{animation-delay:.25s}

/* Hover/drag-over state */
.jobs-zone-hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.3);transform:scale(1.05);box-shadow:0 4px 20px rgba(255,255,255,.2)}
.jobs-zone-hover .jobs-tool-slot{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.2)}

/* Correct match celebration */
.jobs-zone-filled{border-style:solid;border-color:rgba(46,213,115,.6);background:rgba(46,213,115,.15)}
.jobs-zone-correct{animation:jobsZoneCorrect .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes jobsZoneCorrect{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.jobs-person-happy{animation:jobsPersonHappy .8s ease infinite!important}
@keyframes jobsPersonHappy{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.1)}75%{transform:rotate(8deg) scale(1.1)}}
.jobs-fun-fact{font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);border-radius:10px;padding:4px 10px;margin-top:4px;animation:jobsFactPop .3s ease;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(4px)}
@keyframes jobsFactPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Tools - draggable items at bottom */
.jobs-tools-row{display:flex;justify-content:center;gap:14px;width:100%;flex-wrap:wrap;padding:8px 0}
.jobs-tool-item{display:flex;align-items:center;justify-content:center;width:72px;height:72px;background:rgba(255,255,255,.25);border:3px solid rgba(255,255,255,.45);border-radius:20px;cursor:grab;transition:transform .15s,opacity .2s,box-shadow .15s;box-shadow:0 4px 16px rgba(0,0,0,.15);touch-action:none;user-select:none;-webkit-user-select:none;animation:jobsToolAppear .4s cubic-bezier(.34,1.56,.64,1) both}
.jobs-tool-item:nth-child(1){animation-delay:.1s}
.jobs-tool-item:nth-child(2){animation-delay:.2s}
.jobs-tool-item:nth-child(3){animation-delay:.3s}
@keyframes jobsToolAppear{0%{transform:scale(0) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
.jobs-tool-item:active{cursor:grabbing;transform:scale(1.1)}
.jobs-tool-emoji{font-size:38px;line-height:1;pointer-events:none}
.jobs-tool-placed{opacity:.25;pointer-events:none;border-style:dashed;border-color:rgba(255,255,255,.2)}

/* ===== EMOTIONS GAME (Emocoes) ===== */
#game-emotions{background:linear-gradient(180deg,#fdcb6e 0%,#e17055 60%,#fab1a0 100%)}
.emotions-game-area{flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:12px 16px}
.emotions-face{display:flex;align-items:center;justify-content:center;min-height:140px;width:100%;max-width:340px}
.emotions-emoji-big{font-size:110px;display:block;text-align:center;animation:emotionBounce 1.8s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));line-height:1.1}
.emotions-emoji-big.emotions-situation{animation:emotionPulse 1.5s ease-in-out infinite}
.emotions-name-big{font-size:38px;font-weight:900;color:#fff;text-align:center;text-shadow:0 3px 12px rgba(0,0,0,.25);background:rgba(255,255,255,.2);border-radius:24px;padding:18px 32px;backdrop-filter:blur(6px);letter-spacing:1px}
@keyframes emotionBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
@keyframes emotionPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.emotions-options{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:360px}
.emotions-option-btn{border:none;border-radius:20px;cursor:pointer;font-family:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s;animation:emotionBtnIn .35s cubic-bezier(.34,1.56,.64,1) both}
.emotions-option-btn:active{transform:scale(.9);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.emotions-option-btn.correct{background:#27ae60!important;animation:pulse .45s ease}
.emotions-option-btn.wrong{animation:shake .4s ease both;opacity:.55}
.emotions-option-name{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 14px;min-width:90px;flex:1 1 calc(50% - 10px);max-width:160px}
.emotions-option-name .eo-emoji{font-size:36px;line-height:1}
.emotions-option-name .eo-text{font-size:14px;font-weight:700;color:#444;text-align:center;line-height:1.2}
.emotions-option-face{display:flex;align-items:center;justify-content:center;padding:10px;flex:1 1 calc(50% - 10px);max-width:160px;min-height:80px}
.emotions-option-face .eo-emoji-large{font-size:54px;line-height:1}
@keyframes emotionBtnIn{0%{opacity:0;transform:scale(.7) translateY(14px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ===== COMPLETE GAME (Completar) ===== */
#game-complete{background:linear-gradient(180deg,#e84393 0%,#c2185b 60%,#f06292 100%)}
.complete-game-area{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px}
.complete-phrase{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,0.18);border-radius:20px;padding:20px 24px;width:100%;max-width:360px;box-shadow:0 4px 20px rgba(0,0,0,0.15);min-height:90px}
.complete-text{font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.25);line-height:1.3}
.complete-blank{font-size:32px;font-weight:900;color:#ffe082;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,0.3);padding:0 4px;transition:all 0.3s ease}
.complete-blank-filled{color:#fff;animation:completeFill 0.4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes completeFill{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
.complete-options{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%;max-width:360px}
.complete-option-btn{border:none;border-radius:20px;cursor:pointer;font-family:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,0.2);transition:transform .15s,box-shadow .15s;font-size:48px;line-height:1;padding:14px 18px;min-width:80px;animation:completeBtnIn .35s cubic-bezier(.34,1.56,.64,1) both}
.complete-option-btn:active{transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,0.14)}
.complete-option-btn.correct{background:#27ae60!important;animation:pulse .45s ease}
.complete-option-btn.wrong{animation:shake .4s ease both;opacity:.5}
.complete-blank-filled{color:#fff;background:rgba(254,202,87,.3);border-radius:8px;padding:2px 6px;animation:completeFillGlow .5s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 0 12px rgba(254,202,87,.4)}
@keyframes completeFillGlow{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
.complete-phrase-celebrate{animation:completeCelebrate .6s ease}
@keyframes completeCelebrate{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.complete-phrase-shake{animation:completeShake .4s ease!important}
@keyframes completeShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.complete-sparkle{position:absolute;pointer-events:none;font-size:16px;animation:completeSparkle .7s ease-out forwards}
@keyframes completeSparkle{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-25px) scale(.3)}}
@keyframes completeBtnIn{0%{opacity:0;transform:scale(.6) translateY(16px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ===== CATEGORIES GAME (Categorias) ===== */
#game-categories{background:linear-gradient(180deg,#0984e3 0%,#6c5ce7 50%,#a29bfe 100%)}
.categories-game-area{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px 10px;gap:10px;overflow:hidden}
.categories-groups{display:flex;flex-direction:row;gap:8px;width:100%;flex-shrink:0}
.categories-group{flex:1;display:flex;flex-direction:column;align-items:center;border-radius:20px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:2.5px dashed rgba(255,255,255,.4);overflow:hidden;min-height:100px;transition:border-color .25s,background .25s,transform .2s,box-shadow .25s;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.categories-group-hover{border-color:#FECA57!important;border-style:solid!important;background:rgba(254,202,87,.2)!important;transform:scale(1.04);box-shadow:0 0 0 4px rgba(254,202,87,.35),0 8px 24px rgba(0,0,0,.2)!important}
.categories-group-wrong{animation:catsGroupWrong .4s ease both}
.categories-group-success{animation:catsGroupSuccess .5s ease both}
.categories-group-complete{border-color:#2ed573!important;border-style:solid!important;background:rgba(46,213,115,.15)!important;box-shadow:0 0 0 3px rgba(46,213,115,.3),0 6px 20px rgba(0,0,0,.15)!important}
@keyframes catsGroupWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes catsGroupSuccess{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.categories-group-header{display:flex;flex-direction:column;align-items:center;padding:10px 6px 5px;gap:2px;background:rgba(255,255,255,.12);width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
.categories-group-icon{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.categories-group-name{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3);text-align:center;letter-spacing:.04em;text-transform:uppercase}
.categories-group-zone{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;justify-content:center;gap:4px;padding:6px 4px;width:100%;min-height:44px}
.categories-group-count{font-size:10px;font-weight:700;color:rgba(255,255,255,.6);padding:3px 0 6px;text-align:center;letter-spacing:.03em}
.categories-placed-emoji{font-size:26px;line-height:1;animation:catPlacedPop .35s cubic-bezier(.34,1.56,.64,1) both;display:inline-block}
@keyframes catPlacedPop{0%{transform:scale(0) rotate(-15deg);opacity:0}70%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.categories-items{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:10px;padding:10px 6px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.categories-item{width:64px;height:64px;border:none;border-radius:18px;background:rgba(255,255,255,.92);font-size:34px;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.08);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .35s;font-family:inherit;touch-action:none;user-select:none;-webkit-user-select:none;animation:catItemIn .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes catItemIn{0%{opacity:0;transform:scale(0) rotate(-10deg)}70%{transform:scale(1.12) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.categories-item:active{transform:scale(.92)}
.categories-item-dragging{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 3px rgba(254,202,87,.5)!important;transform:scale(1.15) rotate(-3deg)!important;opacity:.9!important;background:#fff!important}
.categories-item-placed{pointer-events:none}
.categories-item-wrong{animation:catItemWrong .4s ease both}
@keyframes catItemWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-5deg)}40%{transform:translateX(8px) rotate(5deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ─── LER CORES ──────────────────────────────────────────────────────────── */
.readcolors-game-area{flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:16px}
.readcolors-word{font-size:72px;font-weight:900;letter-spacing:2px;text-align:center;line-height:1;font-family:inherit;padding:16px 28px;background:rgba(255,255,255,0.18);border-radius:28px;backdrop-filter:blur(8px);box-shadow:0 6px 28px rgba(0,0,0,0.18);animation:readColorsWordIn .4s cubic-bezier(.34,1.56,.64,1) both;user-select:none;-webkit-user-select:none}
@keyframes readColorsWordIn{0%{opacity:0;transform:scale(0.6) translateY(-20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.readcolors-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px}
.readcolors-circle{width:100px;height:100px;border-radius:50%;border:none;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,0.28),inset 0 -5px 0 rgba(0,0,0,0.15);transition:transform .15s,box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:readColorsCircleIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.07s)}
.readcolors-circle:active{transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,.18)}
@keyframes readColorsCircleIn{0%{opacity:0;transform:scale(0) rotate(-15deg)}70%{transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.readcolors-circle-correct{animation:readColorsCorrect .5s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes readColorsCorrect{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.readcolors-circle-wrong{animation:readColorsWrong .45s ease both!important}
@keyframes readColorsWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ─── MONSTRINHO ─────────────────────────────────────────────────────────── */
#game-monster{background:linear-gradient(135deg,#2d1b69 0%,#6c5ce7 50%,#a29bfe 100%)}
.monster-area{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1;padding:12px 16px 20px;gap:10px;overflow:hidden}
.monster-stats{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px}
.monster-stat-row{display:flex;align-items:center;gap:8px}
.monster-stat-label{font-size:13px;font-weight:800;color:rgba(255,255,255,.9);width:80px;flex-shrink:0;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.monster-stat-bar-bg{flex:1;height:14px;background:rgba(0,0,0,.3);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.monster-stat-bar{height:100%;border-radius:10px;transition:width .6s cubic-bezier(.34,1.56,.64,1),background-color .4s ease;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.monster-stat-val{font-size:12px;font-weight:800;color:rgba(255,255,255,.8);width:30px;text-align:right;flex-shrink:0}
.monster-display{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
.monster-emoji{font-size:120px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));transition:transform .2s;display:block}
.monster-name-wrap{display:flex;align-items:center;gap:6px}
.monster-name{font-size:18px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;border-bottom:2px dashed rgba(255,255,255,.5);padding-bottom:2px}
.monster-name-edit-btn{font-size:14px;opacity:.7;cursor:pointer}
.monster-mood{font-size:15px;font-weight:700;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.3);text-align:center;min-height:22px}
.monster-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px}
.monster-action-btn{border:none;border-radius:18px;background:rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:800;padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .15s,box-shadow .15s,background .15s;touch-action:manipulation;font-family:inherit}
.monster-action-btn span.btn-icon{font-size:28px;line-height:1}
.monster-action-btn:active:not(:disabled){transform:scale(.93);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.monster-action-btn:disabled{opacity:.45;cursor:not-allowed}
.monster-action-btn.cooling{animation:monsterCooldown 3s linear both}
@keyframes monsterCooldown{0%{opacity:1}100%{opacity:.45}}
@keyframes monsterBounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-28px) scale(1.1)}60%{transform:translateY(-10px) scale(1.05)}80%{transform:translateY(-4px) scale(1.02)}}
@keyframes monsterSpin{0%{transform:rotate(0)}50%{transform:rotate(20deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}
@keyframes monsterWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-15deg) scale(1.1)}40%{transform:rotate(12deg) scale(1.12)}60%{transform:rotate(-10deg) scale(1.08)}80%{transform:rotate(8deg)}}
@keyframes monsterSleep{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-6px)}}
.monster-emoji.anim-bounce{animation:monsterBounce .7s cubic-bezier(.34,1.56,.64,1)}
.monster-emoji.anim-spin{animation:monsterSpin .6s ease}
.monster-emoji.anim-wiggle{animation:monsterWiggle .7s ease}
.monster-emoji.anim-sleep{animation:monsterSleep 1s ease infinite}

/* ===== COMPARE GAME (Maior/Menor) ===== */
#game-compare{background:linear-gradient(180deg,#00b894,#00cec9)}
.compare-game-area{flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:12px}
.compare-cards{display:flex;flex-direction:row;gap:14px;justify-content:center;align-items:stretch;width:100%;max-width:420px;flex-wrap:wrap}
.compare-cards-three{gap:10px}
.compare-card{flex:1;min-width:90px;max-width:160px;min-height:130px;border:none;border-radius:24px;background:rgba(255,255,255,.92);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 10px;box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 -4px 0 rgba(0,0,0,.1);transition:transform .15s,box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:compareCardIn .4s cubic-bezier(.34,1.56,.64,1) both}
.compare-cards-three .compare-card{min-width:80px;max-width:130px;min-height:110px}
@keyframes compareCardIn{0%{opacity:0;transform:scale(0.5) translateY(30px)}70%{transform:scale(1.06) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.compare-card:active{transform:scale(.93);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.compare-card-number{font-size:56px;font-weight:900;color:#2d3436;line-height:1;font-family:inherit}
.compare-cards-three .compare-card-number{font-size:44px}
.compare-card-emojis{font-size:18px;line-height:1.4;text-align:center;word-break:break-all;max-width:110px;min-height:20px}
.compare-card-correct{background:rgba(46,213,115,.35)!important;border:4px solid #2ed573!important;transform:scale(1.08)!important;box-shadow:0 8px 28px rgba(46,213,115,.5)!important;animation:compareCorrect .5s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes compareCorrect{0%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(1.1)}100%{transform:scale(1.08)}}
.compare-card-wrong{animation:compareWrong .45s ease both!important}
@keyframes compareWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.compare-cards-balance{position:relative;z-index:2}
.compare-balance{position:relative;width:100%;max-width:320px;height:80px;margin:-8px auto 0;display:flex;flex-direction:column;align-items:center;animation:compareCardIn .5s .3s cubic-bezier(.34,1.56,.64,1) both}
.compare-balance-post{width:8px;height:32px;background:linear-gradient(180deg,#b2bec3,#636e72);border-radius:4px;position:relative;z-index:1;margin-top:-4px}
.compare-balance-triangle{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:14px solid #636e72}
.compare-balance-beam{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:260px;height:8px;background:linear-gradient(180deg,#dfe6e9,#b2bec3);border-radius:4px;transition:transform .15s ease-out;transform-origin:center center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.compare-balance-plat{position:absolute;top:-2px;width:40px;height:6px;background:linear-gradient(180deg,#fdcb6e,#e17055);border-radius:3px;transition:transform .15s ease-out;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.compare-balance-plat-left{left:8px}
.compare-balance-plat-right{right:8px}
.compare-tilt-indicator{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:22px;font-weight:900;color:rgba(255,255,255,.7);transition:opacity .2s;text-shadow:0 1px 4px rgba(0,0,0,.2)}

/* ===== OPOSTOS GAME ===== */
#game-opposites{background:linear-gradient(180deg,#e17055,#d35400)}
.opposites-game-area{flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:8px 10px;position:relative;overflow:visible}
#opposites-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
.opposites-columns{display:flex;flex-direction:row;justify-content:space-between;width:100%;max-width:420px;gap:12px;position:relative;z-index:3}
.opposites-col{display:flex;flex-direction:column;gap:14px;flex:1;align-items:center}
.opposites-col-left{align-items:flex-start}
.opposites-col-right{align-items:flex-end}
.opposites-card{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:20px;padding:10px 14px;min-width:100px;cursor:default;transition:transform .2s,box-shadow .2s,background .3s;user-select:none;-webkit-user-select:none;touch-action:none;animation:oppositesCardIn .4s cubic-bezier(.34,1.56,.64,1) both}
.opposites-card-left{background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.08)}
.opposites-card-right{background:rgba(255,255,200,.92);box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.08);cursor:grab}
.opposites-card-right:active{cursor:grabbing}
.opposites-card-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.opposites-card-name{font-size:13px;font-weight:900;color:#2d3436;text-align:center;line-height:1.2}
@keyframes oppositesCardIn{0%{opacity:0;transform:scale(.5) translateY(20px)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.opposites-card-matched{background:rgba(46,213,115,.3)!important;box-shadow:0 4px 20px rgba(46,213,115,.4)!important;transform:scale(1.05)!important}
.opposites-card-hover{background:rgba(255,255,100,.6)!important;transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.opposites-card-wrong{animation:oppositesWrong .45s ease both}
.opposites-card-placed{opacity:.4;pointer-events:none;transform:scale(.9)}
.opposites-slot{width:60px;height:60px;border:3px dashed rgba(0,0,0,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;margin-top:4px;transition:border-color .3s,background .3s}
.opposites-slot-hint{font-size:24px;color:rgba(0,0,0,.2)}
.opposites-slot-filled{border-color:transparent;background:transparent}
.opposites-slot-filled .opposites-slot-hint{display:none}
@keyframes oppositesWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ─── VOGAIS ──────────────────────────────────────────────────────────────── */
#game-vowels{background:linear-gradient(180deg,#0984e3,#74b9ff)}
.vowels-game-area{flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:20px}
.vowels-letter{font-size:120px;font-weight:900;line-height:1;text-align:center;color:#fff;text-shadow:0 6px 32px rgba(0,0,0,0.25);background:rgba(255,255,255,0.18);border-radius:32px;padding:16px 40px;min-width:180px;backdrop-filter:blur(8px);box-shadow:0 8px 36px rgba(0,0,0,0.2);animation:vowelsLetterIn .45s cubic-bezier(.34,1.56,.64,1) both;user-select:none;-webkit-user-select:none}
@keyframes vowelsLetterIn{0%{opacity:0;transform:scale(0.4) rotate(-8deg)}70%{transform:scale(1.1) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.vowels-word{font-size:56px;font-weight:900;line-height:1;text-align:center;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,0.22);background:rgba(255,255,255,0.18);border-radius:24px;padding:14px 32px;backdrop-filter:blur(8px);box-shadow:0 6px 28px rgba(0,0,0,0.18);animation:vowelsLetterIn .45s cubic-bezier(.34,1.56,.64,1) both;user-select:none;-webkit-user-select:none}
.vowels-options{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;width:100%;max-width:440px}
.vowels-btn{flex:1;min-width:120px;max-width:190px;padding:22px 10px;border:none;border-radius:24px;font-size:26px;font-weight:900;color:#fff;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,0.22),inset 0 -5px 0 rgba(0,0,0,0.15);transition:transform .15s,box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:vowelsBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s);letter-spacing:1px}
.vowels-btn:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.18)}
@keyframes vowelsBtnIn{0%{opacity:0;transform:translateY(30px) scale(0.8)}70%{transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.vowels-btn-vowel{background:linear-gradient(145deg,#fd79a8,#e84393)}
.vowels-btn-consonant{background:linear-gradient(145deg,#00b894,#00cec9)}
.vowels-btn-yes{background:linear-gradient(145deg,#fd79a8,#e84393)}
.vowels-btn-no{background:linear-gradient(145deg,#636e72,#b2bec3)}
.vowels-btn-num{background:linear-gradient(145deg,#6c5ce7,#a29bfe)}
.vowels-btn-correct{transform:scale(1.12)!important;box-shadow:0 8px 30px rgba(46,213,115,.55)!important;background:linear-gradient(145deg,#2ed573,#7bed9f)!important;animation:vowelsCorrect .5s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes vowelsCorrect{0%{transform:scale(1)}40%{transform:scale(1.2)}70%{transform:scale(1.12)}100%{transform:scale(1.12)}}
.vowels-btn-wrong{animation:vowelsWrong .45s ease both!important}
.vowel-highlight{color:#FECA57;font-weight:900;display:inline-block;animation:vowelHighPop .4s cubic-bezier(.34,1.56,.64,1) both;text-shadow:0 0 12px rgba(254,202,87,.6)}
@keyframes vowelHighPop{0%{transform:scale(1);color:#fff}50%{transform:scale(1.3)}100%{transform:scale(1.15);color:#FECA57}}
.consonant-dim{color:rgba(255,255,255,.4);display:inline-block}
.vowels-letter-dance{animation:vowelsDance .8s ease!important}
@keyframes vowelsDance{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.1)}75%{transform:rotate(8deg) scale(1.1)}}
.vowels-shake{animation:vowelsShake .4s ease!important}
@keyframes vowelsShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@keyframes vowelsWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ─── RIMAS ──────────────────────────────────────────────────────────────── */
#game-rhymes{background:linear-gradient(180deg,#fd79a8 0%,#e84393 100%)}
.rhymes-game-area{flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:16px}
.rhymes-word{font-size:72px;font-weight:900;text-align:center;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.3);background:rgba(255,255,255,.22);border-radius:28px;padding:20px 36px;min-width:200px;backdrop-filter:blur(8px);box-shadow:0 8px 36px rgba(0,0,0,.2);animation:rhymesWordIn .5s cubic-bezier(.34,1.56,.64,1) both;user-select:none;-webkit-user-select:none;line-height:1.15}
@keyframes rhymesWordIn{0%{opacity:0;transform:scale(.5) rotate(-6deg)}70%{transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.rhymes-options{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%;max-width:460px}
.rhymes-option-btn{flex:1;min-width:110px;max-width:180px;padding:16px 10px;border:none;border-radius:22px;font-size:18px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.18));backdrop-filter:blur(4px);box-shadow:0 5px 18px rgba(0,0,0,.22),inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .13s,box-shadow .13s;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:rhymesBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s);display:flex;flex-direction:column;align-items:center;gap:4px}
.rhymes-option-btn:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.18)}
@keyframes rhymesBtnIn{0%{opacity:0;transform:translateY(28px) scale(.8)}70%{transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.rhymes-opt-emoji{font-size:36px;line-height:1}
.rhymes-opt-label{font-size:14px;font-weight:900;text-shadow:0 1px 4px rgba(0,0,0,.25);text-align:center;line-height:1.2}
.rhymes-correct{background:linear-gradient(145deg,#2ed573,#7bed9f)!important;transform:scale(1.12)!important;box-shadow:0 8px 28px rgba(46,213,115,.55)!important;animation:rhymesCorrect .5s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes rhymesCorrect{0%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(1.14)}100%{transform:scale(1.12)}}
.rhymes-wrong{animation:rhymesWrong .45s ease both!important}
.rhymes-sound-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;border:3px solid rgba(254,202,87,.6);pointer-events:none;animation:rhymesSoundWave .7s ease-out forwards}
@keyframes rhymesSoundWave{0%{width:60px;height:60px;opacity:.8}100%{width:200px;height:200px;opacity:0}}
.rhymes-suffix-highlight{color:#FECA57;text-decoration:underline;text-decoration-color:#FECA57;text-decoration-thickness:4px;text-underline-offset:4px;animation:rhymesSuffixPop .4s ease}
@keyframes rhymesSuffixPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1.05)}}
.rhymes-word-shake{animation:rhymesWordShake .4s ease!important}
@keyframes rhymesWordShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes rhymesWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ===== TELA MAGICA TOY ===== */
#game-magicscreen{background:linear-gradient(160deg,#c0392b 0%,#e74c3c 40%,#922b21 100%);flex-direction:column}
.magicscreen-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px 8px;gap:10px;width:100%;box-sizing:border-box}
#magicscreen-canvas{flex:1;width:100%;max-width:520px;min-height:180px;border-radius:18px;box-shadow:0 6px 32px rgba(0,0,0,.45),0 0 0 6px #7b241c,0 0 0 10px #922b21,inset 0 2px 8px rgba(0,0,0,.25);background:#c8c8c8;display:block;touch-action:none;cursor:crosshair}
.magicscreen-controls{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:520px}
.magicscreen-dir-row{display:flex;flex-direction:row;gap:8px;justify-content:center}
.magicscreen-dir{width:56px;height:56px;border:none;border-radius:50%;background:linear-gradient(145deg,#e74c3c,#c0392b);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.2);transition:transform .1s,box-shadow .1s;touch-action:manipulation;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center}
.magicscreen-dir:active{transform:scale(.9);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.magicscreen-color-palette{display:flex;flex-direction:row;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.magicscreen-color-btn{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.4);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .12s,border-color .12s;touch-action:manipulation}
.magicscreen-color-btn.active{border-color:#fff;transform:scale(1.2);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.magicscreen-color-btn:active{transform:scale(.9)}

/* ===== BANDEIRAS GAME ===== */
#game-flags{background:linear-gradient(180deg,#00b894,#00cec9)}
.flags-game-area{flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:16px 12px}
.flags-display{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:160px;background:rgba(255,255,255,.18);border-radius:32px;padding:16px 32px;box-shadow:0 8px 36px rgba(0,0,0,.2);backdrop-filter:blur(8px);animation:flagsDisplayIn .45s cubic-bezier(.34,1.56,.64,1) both;user-select:none;-webkit-user-select:none}
@keyframes flagsDisplayIn{0%{opacity:0;transform:scale(.4) rotate(-8deg)}70%{transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.flags-flag-emoji{font-size:120px;line-height:1;display:block;text-align:center}
.flags-display-name{min-height:100px}
.flags-country-name{font-size:38px;font-weight:900;color:#fff;text-align:center;line-height:1.2;text-shadow:0 4px 14px rgba(0,0,0,.25)}
.flags-options{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:460px}
.flags-options-3{max-width:360px}
.flags-options-4{max-width:460px}
.flags-option-btn{flex:1;min-width:120px;max-width:200px;padding:18px 12px;border:none;border-radius:22px;font-size:18px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.12));box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:flagsBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s);font-family:inherit;text-shadow:0 1px 4px rgba(0,0,0,.3);letter-spacing:.5px}
.flags-option-btn:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.flags-option-flag{font-size:52px;padding:14px 10px;min-width:100px;max-width:130px}
@keyframes flagsBtnIn{0%{opacity:0;transform:translateY(30px) scale(.8)}70%{transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.flags-option-correct{background:linear-gradient(145deg,#2ed573,#7bed9f)!important;transform:scale(1.12)!important;box-shadow:0 8px 28px rgba(46,213,115,.55)!important;animation:flagsCorrect .5s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes flagsCorrect{0%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(1.12)}100%{transform:scale(1.12)}}
.flags-option-wrong{animation:flagsWrong .45s ease both!important}
@keyframes flagsWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-2deg)}40%{transform:translateX(10px) rotate(2deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ===== GEOMETRIA GAME ===== */
#game-geometry{background:linear-gradient(180deg,#a29bfe 0%,#6c5ce7 100%)}
.geometry-game-area{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px 12px}
.geometry-shape{display:flex;align-items:center;justify-content:center;min-height:180px;width:100%}
.geometry-shape-display{width:150px;height:150px;background:var(--geo-color,#e74c3c);filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));animation:geoShapeIn .55s cubic-bezier(.34,1.56,.64,1) both,geoSpin 8s linear infinite}
@keyframes geoShapeIn{0%{opacity:0;transform:scale(.3) rotate(-30deg)}70%{transform:scale(1.1) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes geoSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/* CSS shapes */
.geometry-css-circulo{border-radius:50%}
.geometry-css-quadrado{border-radius:10px}
.geometry-css-triangulo{width:0;height:0;background:transparent!important;border-left:75px solid transparent;border-right:75px solid transparent;border-bottom:130px solid var(--geo-color,#e74c3c);filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
.geometry-css-retangulo{width:200px;height:110px;border-radius:10px}
.geometry-css-losango{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.geometry-css-estrela{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.geometry-css-pentagono{clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)}
.geometry-css-hexagono{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0% 50%)}
.geometry-css-oval{width:190px;height:120px;border-radius:50%}
.geometry-css-trapezio{clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%)}
/* Name display (inverted mode) */
.geometry-name-display{font-size:52px;font-weight:900;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.3);background:rgba(255,255,255,.22);border-radius:28px;padding:22px 40px;backdrop-filter:blur(8px);box-shadow:0 8px 36px rgba(0,0,0,.2);animation:geoNameIn .5s cubic-bezier(.34,1.56,.64,1) both;text-align:center;line-height:1.1}
@keyframes geoNameIn{0%{opacity:0;transform:scale(.5) rotate(-6deg)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
/* Text options (normal mode) */
.geometry-options{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:460px}
.geometry-options-text{max-width:380px}
.geometry-option-text{flex:1;min-width:100px;max-width:160px;padding:16px 10px;border:none;border-radius:20px;font-size:18px;font-weight:900;color:#fff;cursor:pointer;background:rgba(255,255,255,.25);box-shadow:0 6px 22px rgba(0,0,0,.2),inset 0 -3px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none;font-family:inherit;text-shadow:0 1px 4px rgba(0,0,0,.25);animation:geoBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s)}
.geometry-option-text:active{transform:scale(.92)}
@keyframes geoBtnIn{0%{opacity:0;transform:translateY(28px) scale(.8)}70%{transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* Shape options (inverted mode) */
.geometry-options-shapes{gap:14px}
.geometry-option-shape-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border:none;border-radius:22px;background:rgba(255,255,255,.22);box-shadow:0 6px 22px rgba(0,0,0,.2),inset 0 -3px 0 rgba(0,0,0,.1);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;min-width:90px;max-width:120px;animation:geoBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s);transition:transform .15s}
.geometry-option-shape-btn:active{transform:scale(.9)}
.geometry-shape-mini{width:54px;height:54px;background:var(--geo-color,#e74c3c);filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.geometry-css-triangulo.geometry-shape-mini{width:0;height:0;background:transparent!important;border-left:27px solid transparent;border-right:27px solid transparent;border-bottom:47px solid var(--geo-color,#e74c3c)}
.geometry-css-retangulo.geometry-shape-mini{width:76px;height:44px}
.geometry-css-oval.geometry-shape-mini{width:72px;height:44px;border-radius:50%}
.geometry-option-shape-label{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3);text-align:center;line-height:1.2}
/* Feedback states */
.geometry-option-correct,.geometry-option-shape-btn.geometry-option-correct{background:linear-gradient(145deg,#2ed573,#7bed9f)!important;transform:scale(1.12)!important;box-shadow:0 8px 28px rgba(46,213,115,.55)!important}
.geometry-option-wrong,.geometry-option-shape-btn.geometry-option-wrong{animation:geoWrong .45s ease both!important}
@keyframes geoWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-2deg)}40%{transform:translateX(10px) rotate(2deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
/* ─── JOGO: DIAS ─────────────────────────────────────────────── */
#game-days{background:linear-gradient(180deg,#81ecec 0%,#00cec9 100%)}
.days-game-area{flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:16px 12px}
/* Questao (dia/mes de referencia) */
.days-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.25);border-radius:28px;padding:22px 40px;box-shadow:0 8px 32px rgba(0,0,0,.18);backdrop-filter:blur(6px);min-width:200px}
.days-question-emoji{font-size:56px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.days-question-name{font-size:34px;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25);letter-spacing:.5px;text-align:center}
@keyframes daysQIn{0%{opacity:0;transform:scale(.5) rotate(-8deg)}70%{transform:scale(1.07) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.days-question-in{animation:daysQIn .5s cubic-bezier(.34,1.56,.64,1) both}
/* Opcoes */
.days-options{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:460px}
.days-option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-width:90px;max-width:130px;padding:14px 10px;border:none;border-radius:22px;background:rgba(255,255,255,.28);box-shadow:0 6px 22px rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.1);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;font-family:inherit;transition:transform .15s;animation:daysBtnIn .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.08s)}
.days-option-btn:active{transform:scale(.91)}
@keyframes daysBtnIn{0%{opacity:0;transform:translateY(26px) scale(.8)}70%{transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.days-opt-emoji{font-size:32px;line-height:1}
.days-opt-name{font-size:16px;font-weight:900;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25);text-align:center;line-height:1.2}
/* Estados de resposta */
.days-option-btn.days-option-correct{background:linear-gradient(145deg,#2ed573,#7bed9f)!important;transform:scale(1.1)!important;box-shadow:0 8px 28px rgba(46,213,115,.55)!important}
.days-option-btn.days-option-wrong{animation:daysWrong .45s ease both!important}
@keyframes daysWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-2deg)}40%{transform:translateX(9px) rotate(2deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ===== TUTORIAL / ONBOARDING ===== */
.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:none;opacity:0;transition:opacity .4s ease}
.tutorial-overlay.active{display:flex;align-items:flex-end;justify-content:center;opacity:1}
.tutorial-spotlight{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);transition:all .5s ease}
.tutorial-spotlight.has-target{
    -webkit-mask-image:radial-gradient(circle var(--spot-r,60px) at var(--spot-x,50%) var(--spot-y,50%),transparent 95%,black 100%);
    mask-image:radial-gradient(circle var(--spot-r,60px) at var(--spot-x,50%) var(--spot-y,50%),transparent 95%,black 100%);
}
.tutorial-dialog{position:relative;z-index:10001;width:92%;max-width:400px;margin-bottom:env(safe-area-inset-bottom,20px);margin-bottom:max(env(safe-area-inset-bottom),20px);padding-bottom:20px;display:flex;flex-direction:column;align-items:center;animation:tutorialDialogIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tutorialDialogIn{0%{opacity:0;transform:translateY(60px) scale(.8)}100%{opacity:1;transform:translateY(0) scale(1)}}
.tutorial-mascot{font-size:64px;line-height:1;animation:tutorialMascotBounce 1.5s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));display:flex;justify-content:center}
@keyframes tutorialMascotBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tutorial-bubble{background:linear-gradient(145deg,#fff,#f0f0ff);border-radius:24px;padding:24px 20px 16px;box-shadow:0 8px 32px rgba(0,0,0,.3);position:relative;width:100%;text-align:center}
.tutorial-bubble::before{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:14px solid #fff}
.tutorial-text{font-size:20px;font-weight:800;color:#2d3436;line-height:1.4;margin-bottom:12px;min-height:56px;display:flex;align-items:center;justify-content:center;white-space:pre-line}
.tutorial-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.tutorial-dot{width:10px;height:10px;border-radius:50%;background:#ddd;transition:all .3s ease}
.tutorial-dot.active{background:#6C63FF;transform:scale(1.3)}
.tutorial-dot.done{background:#4ECDC4}
.tutorial-buttons{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tutorial-skip-btn{background:none;border:none;font-family:inherit;font-size:15px;font-weight:700;color:#999;cursor:pointer;padding:8px 16px;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:color .2s}
.tutorial-skip-btn:active{color:#666}
.tutorial-next-btn{flex:1;background:linear-gradient(145deg,#6C63FF,#5a52e0);border:none;border-radius:16px;padding:14px 24px;font-family:inherit;font-size:18px;font-weight:900;color:#fff;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(108,99,255,.4);transition:transform .15s,box-shadow .15s}
.tutorial-next-btn:active{transform:scale(.95);box-shadow:0 2px 8px rgba(108,99,255,.3)}
.tutorial-tap-hint{animation:tutorialTapPulse 1.2s ease-in-out infinite}
@keyframes tutorialTapPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
/* Highlight ring animation for spotlighted elements */
.tutorial-highlight-ring{position:absolute;z-index:10000;border-radius:50%;pointer-events:none;border:3px solid #FECA57;box-shadow:0 0 20px rgba(254,202,87,.6),inset 0 0 20px rgba(254,202,87,.2);animation:tutorialRingPulse 1.5s ease-in-out infinite}
@keyframes tutorialRingPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}

/* ===== PARENT BUTTON ===== */
.parent-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:6px;border-radius:12px;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .15s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.parent-btn:active{transform:scale(.9)}

/* ===== PARENT GATE ===== */
.parent-gate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10002;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s ease}
.parent-gate-overlay.show{opacity:1;pointer-events:auto}
.parent-gate-content{background:linear-gradient(145deg,#2d3436,#636e72);padding:32px 28px;border-radius:28px;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,.5);min-width:280px;max-width:340px;animation:parentGateIn .4s cubic-bezier(.34,1.56,.64,1) both;position:relative}
@keyframes parentGateIn{0%{opacity:0;transform:scale(.8) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.parent-gate-close{position:absolute;top:12px;right:16px;font-size:22px;font-weight:900;color:rgba(255,255,255,.5);cursor:pointer;padding:4px 8px;line-height:1;font-family:inherit;transition:color .2s}
.parent-gate-close:hover,.parent-gate-close:active{color:#fff}
.parent-gate-icon{font-size:48px;margin-bottom:8px}
.parent-gate-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:4px}
.parent-gate-desc{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:16px}
.parent-gate-question{font-size:28px;font-weight:900;color:#FECA57;margin-bottom:20px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.parent-gate-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.parent-gate-btn{background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:14px;font-family:inherit;font-size:22px;font-weight:900;color:#fff;cursor:pointer;transition:all .2s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.parent-gate-btn:active{transform:scale(.95);background:rgba(255,255,255,.25)}
.parent-gate-btn.wrong{background:rgba(231,76,60,.4)!important;border-color:#e74c3c!important;animation:parentGateShake .4s ease}
@keyframes parentGateShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ===== PARENT DASHBOARD ===== */
#parent-screen.active{background:linear-gradient(180deg,#2d3436 0%,#636e72 50%,#b2bec3);display:flex;flex-direction:column}
.parent-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.parent-title{font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3);margin:0}
.parent-age-info{font-size:14px;font-weight:700;color:rgba(255,255,255,.7);background:rgba(255,255,255,.15);padding:4px 12px;border-radius:12px}
.parent-content{flex:1;overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}

/* Dashboard sections */
.pd-section{background:rgba(255,255,255,.12);border-radius:20px;padding:18px;margin-bottom:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pd-section-title{font-size:16px;font-weight:900;color:#FECA57;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;display:flex;align-items:center;gap:6px}

/* Summary cards */
.pd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pd-card{background:rgba(255,255,255,.1);border-radius:14px;padding:12px 8px;text-align:center}
.pd-card-num{font-size:22px;font-weight:900;color:#fff;line-height:1.2}
.pd-card-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);margin-top:2px}

/* Skill areas */
.pd-skill{margin-bottom:14px}
.pd-skill:last-child{margin-bottom:0}
.pd-skill-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pd-skill-icon{font-size:20px}
.pd-skill-name{flex:1;font-size:14px;font-weight:800;color:#fff}
.pd-skill-pct{font-size:16px;font-weight:900}
.pd-skill-bar{height:8px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden}
.pd-skill-fill{height:100%;border-radius:8px;transition:width .6s ease}
.pd-skill-detail{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;font-weight:700;color:rgba(255,255,255,.5)}

/* Favorites */
.pd-favorites{display:flex;flex-direction:column;gap:10px}
.pd-fav-item{display:flex;align-items:center;gap:12px}
.pd-fav-rank{width:28px;height:28px;border-radius:50%;background:rgba(254,202,87,.25);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#FECA57}
.pd-fav-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.pd-fav-info{flex:1}
.pd-fav-name{font-size:14px;font-weight:800;color:#fff}
.pd-fav-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.5)}

/* Week activity */
.pd-week{display:flex;justify-content:space-between;gap:6px}
.pd-day{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.06)}
.pd-day.active{background:rgba(46,213,115,.15)}
.pd-day.today{border:2px solid rgba(254,202,87,.4)}
.pd-day-name{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);margin-bottom:4px}
.pd-day-dot{font-size:16px;margin-bottom:2px}
.pd-day-time{font-size:10px;font-weight:700;color:rgba(255,255,255,.4)}

/* Detailed game progress */
.pd-games-detail{display:flex;flex-direction:column;gap:10px}
.pd-game-row{display:flex;align-items:center;gap:10px}
.pd-game-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pd-game-info{flex:1;min-width:0}
.pd-game-name{font-size:13px;font-weight:800;color:#fff;display:flex;align-items:center;gap:4px}
.pd-game-status-icon{font-size:12px}
.pd-game-stats{font-size:10px;font-weight:600;color:rgba(255,255,255,.45);margin-top:1px}
.pd-game-bar{height:5px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden;margin-top:4px}
.pd-game-fill{height:100%;border-radius:5px;transition:width .6s ease}

/* Album summary */
.pd-album-summary{display:flex;justify-content:space-around;text-align:center}
.pd-album-stat{display:flex;flex-direction:column;gap:2px}
.pd-album-num{font-size:24px;font-weight:900;color:#fff}
.pd-album-stat span:last-child{font-size:12px;font-weight:700;color:rgba(255,255,255,.5)}

/* Tips */
.pd-tips-list{display:flex;flex-direction:column;gap:10px}
.pd-tip{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);line-height:1.5;padding:10px 14px;background:rgba(255,255,255,.08);border-radius:12px;border-left:3px solid rgba(254,202,87,.6)}

/* Adaptive Difficulty Badge */
.adaptive-badge{display:none;margin:8px auto 4px;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:800;text-align:center;animation:adaptivePop .4s ease}
.adaptive-badge.visible{display:inline-block}
.adaptive-badge.mod-up{background:linear-gradient(135deg,#ff9f43,#ee5a24);color:#fff;box-shadow:0 2px 8px rgba(238,90,36,.3)}
.adaptive-badge.mod-down{background:linear-gradient(135deg,#48dbfb,#0abde3);color:#fff;box-shadow:0 2px 8px rgba(10,189,227,.3)}
.adaptive-badge .adaptive-icon{font-size:16px;margin-right:4px}
@keyframes adaptivePop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* Adaptive indicator in game header */
.adaptive-indicator{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:800;margin-left:6px;animation:adaptivePop .4s ease}
.adaptive-indicator.mod-up{background:rgba(238,90,36,.15);color:#ee5a24}
.adaptive-indicator.mod-down{background:rgba(10,189,227,.15);color:#0abde3}

/* ===== BEDTIME MODE ===== */
#bedtime-screen,#bedtime-activity-screen{background:linear-gradient(180deg,#0a0a28 0%,#0d1137 30%,#1a1a4e 60%,#2d1b69 100%)}

.bedtime-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:2}
.bedtime-stars-sky{position:absolute;top:0;left:0;width:100%;height:100%}
.bedtime-star{position:absolute;background:#fff;border-radius:50%;animation:bedtimeTwinkle 3s ease-in-out infinite}
@keyframes bedtimeTwinkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.bedtime-moon{position:absolute;top:8%;right:8%;font-size:64px;filter:drop-shadow(0 0 30px rgba(255,220,100,.4));animation:bedtimeMoonGlow 4s ease-in-out infinite}
.bedtime-moon-small{font-size:36px;top:5%;right:5%}
@keyframes bedtimeMoonGlow{0%,100%{filter:drop-shadow(0 0 30px rgba(255,220,100,.3))}50%{filter:drop-shadow(0 0 50px rgba(255,220,100,.6))}}

.bedtime-header{display:flex;align-items:center;padding:12px 16px;position:relative;z-index:10;gap:12px}
.bedtime-back{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);box-shadow:0 3px 10px rgba(0,0,0,.3)}.bedtime-back:active{background:rgba(255,255,255,.2)}.bedtime-back span{color:rgba(255,255,255,.85)}
.bedtime-title{flex:1;color:rgba(255,255,255,.9);font-size:18px;font-weight:800;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.bedtime-timer-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.1);border-radius:16px;padding:6px 12px;cursor:pointer;border:1px solid rgba(255,255,255,.15);transition:background .2s}
.bedtime-timer-badge:active{background:rgba(255,255,255,.2)}
.timer-icon{font-size:14px;color:rgba(255,255,255,.7)}
.timer-value{font-size:13px;font-weight:800;color:rgba(255,255,255,.9)}

.bedtime-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;z-index:5;gap:30px}

.bedtime-mascot{text-align:center}
.bedtime-mascot-emoji{font-size:72px;display:flex;justify-content:center;animation:bedtimeMascotFloat 3s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.bedtime-mascot-emoji:has(.nena-char){animation:bedtimeMascotFloat 3s ease-in-out infinite}
@keyframes bedtimeMascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bedtime-mascot-msg{color:rgba(255,255,255,.7);font-size:16px;font-weight:700;margin-top:12px;font-style:italic}

.bedtime-activities{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:340px}
.bedtime-activity-btn{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);border-radius:20px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font-family:inherit;transition:all .3s ease;backdrop-filter:blur(5px)}
.bedtime-activity-btn:active{transform:scale(.95);background:rgba(255,255,255,.15)}
.bedtime-act-icon{font-size:40px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.bedtime-act-label{color:rgba(255,255,255,.85);font-size:14px;font-weight:800}

/* Bedtime Activity Area */
.bedtime-activity-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:5;padding:10px;overflow:hidden}
.bedtime-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.bedtime-hint{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:14px;font-weight:700;z-index:10;transition:opacity 2s ease;text-align:center;white-space:nowrap}
.bedtime-instruction{color:rgba(255,255,255,.6);font-size:15px;font-weight:700;margin-bottom:20px;text-align:center}

/* Bedtime Sounds */
.bedtime-sounds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px;padding:0 10px}
.bedtime-sound-btn{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);border-radius:18px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-family:inherit;transition:all .3s ease}
.bedtime-sound-btn:active{transform:scale(.95)}
.bedtime-sound-btn.active{background:rgba(100,160,255,.2);border-color:rgba(100,160,255,.5);box-shadow:0 0 20px rgba(100,160,255,.15)}
.bedtime-snd-icon{font-size:32px;transition:transform .3s}
.bedtime-sound-btn.active .bedtime-snd-icon{animation:bedtimeSndPulse 2s ease-in-out infinite}
@keyframes bedtimeSndPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.bedtime-snd-label{color:rgba(255,255,255,.7);font-size:12px;font-weight:700}

.bedtime-visualizer{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:30px;justify-content:center}
.bedtime-viz-bar{width:6px;height:8px;background:rgba(100,160,255,.4);border-radius:3px;animation:bedtimeViz 2s ease-in-out infinite}
@keyframes bedtimeViz{0%,100%{height:8px;opacity:.3}50%{height:24px;opacity:.7}}

/* Bedtime Breathing */
.bedtime-breathe-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:100%;height:100%}
.bedtime-breathe-circle{width:160px;height:160px;border-radius:50%;background:rgba(100,160,255,.1);border:3px solid rgba(100,180,255,.3);display:flex;align-items:center;justify-content:center;transition:transform 4s ease-in-out;transform:scale(0.8);box-shadow:0 0 40px rgba(100,160,255,.15)}
.bedtime-breathe-inner{width:80%;height:80%;border-radius:50%;background:rgba(100,180,255,.2);transition:background 1s ease}
.bedtime-breathe-text{color:rgba(255,255,255,.85);font-size:22px;font-weight:800;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.bedtime-breathe-hint{color:rgba(255,255,255,.4);font-size:13px;font-weight:600;text-align:center;max-width:280px}

/* Bedtime Stories */
.bedtime-story-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;height:100%;max-width:380px;margin:0 auto;padding:0 20px}
.bedtime-story-title{color:rgba(255,255,255,.6);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:2px}
.bedtime-story-page{display:flex;flex-direction:column;align-items:center;gap:20px;background:rgba(255,255,255,.05);border-radius:24px;padding:30px 24px;width:100%;min-height:200px;border:1px solid rgba(255,255,255,.08)}
.bedtime-story-emoji{font-size:72px;animation:bedtimeStoryEmoji .8s ease both}
@keyframes bedtimeStoryEmoji{0%{opacity:0;transform:scale(.5) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.bedtime-story-text{color:rgba(255,255,255,.85);font-size:16px;font-weight:600;line-height:1.6;text-align:center;animation:bedtimeStoryText 1s ease .3s both}
@keyframes bedtimeStoryText{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.bedtime-story-dots{display:flex;gap:6px;justify-content:center}
.bedtime-story-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s}
.bedtime-story-dot.active{background:rgba(255,220,100,.7);transform:scale(1.3)}
.bedtime-story-nav{display:flex;gap:20px;justify-content:center}
.bedtime-story-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:20px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bedtime-story-btn:active{transform:scale(.9);background:rgba(255,255,255,.2)}

/* Story Picker */
.story-picker{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;padding:0 10px;height:100%;overflow:hidden}
.story-filter-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.story-filter-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px 12px;color:rgba(255,255,255,.7);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.story-filter-btn.active{background:rgba(100,160,255,.2);border-color:rgba(100,160,255,.5);color:rgba(255,255,255,.95)}
.story-random-btn{background:linear-gradient(135deg,rgba(255,220,100,.15),rgba(255,180,80,.15));border:1px solid rgba(255,220,100,.3);border-radius:16px;padding:10px 20px;color:rgba(255,255,255,.9);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s}
.story-random-btn:active{transform:scale(.96)}
.story-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;padding-bottom:20px;-webkit-overflow-scrolling:touch}
.story-list-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;transition:all .2s;text-align:left;width:100%}
.story-list-item:active{background:rgba(255,255,255,.12);transform:scale(.98)}
.story-item-emoji{font-size:28px;flex-shrink:0;width:40px;text-align:center}
.story-item-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.story-item-title{color:rgba(255,255,255,.9);font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-item-dur{font-size:11px;font-weight:600}
.story-dur-short{color:rgba(100,220,160,.7)}
.story-dur-medium{color:rgba(100,160,255,.7)}
.story-dur-long{color:rgba(200,140,255,.7)}

/* Bedtime bottom nav button highlight */
.bottom-nav-bedtime .bottom-nav-icon{filter:drop-shadow(0 0 6px rgba(255,220,100,.4))}

/* ===== ADVENTURE MODE ===== */
.bottom-nav-adventure{position:relative}
.bottom-nav-adventure .bottom-nav-icon{filter:drop-shadow(0 0 6px rgba(100,200,255,.5))}

/* Adventure Screen */
#adventure-screen{background:linear-gradient(180deg,#87CEEB 0%,#B0E0E6 40%,#90EE90 70%,#228B22 100%);overflow:hidden}
.adventure-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.adventure-sky{position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(180deg,#4DA6FF 0%,#87CEEB 100%)}
.adventure-clouds span{position:absolute;font-size:40px;opacity:.6}
.adv-cloud.ac1{top:8%;left:10%;animation:cloudDriftAdv 25s linear infinite}
.adv-cloud.ac2{top:15%;right:5%;animation:cloudDriftAdv 35s linear infinite reverse}
@keyframes cloudDriftAdv{0%{transform:translateX(0)}50%{transform:translateX(30px)}100%{transform:translateX(0)}}
.adventure-header{position:relative;z-index:10;display:flex;align-items:center;padding:12px 16px;gap:12px}
.adventure-title{flex:1;text-align:center;font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.adventure-stars-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.25);border-radius:20px;padding:4px 12px;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.2)}

/* Adventure Map */
.adventure-map{position:relative;z-index:5;flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 16px 100px;display:flex;flex-direction:column;align-items:center;gap:0;-webkit-overflow-scrolling:touch}
.adventure-zone{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;position:relative}
.adventure-zone-header{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:20px;margin-bottom:6px;width:fit-content}
.adventure-zone-icon{font-size:28px}
.adventure-zone-title{font-size:15px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.adventure-zone-status{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);margin-left:4px}

/* Adventure Path */
.adventure-path{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;position:relative}
.adventure-path::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:4px;background:rgba(255,255,255,.25);border-radius:4px;transform:translateX(-50%);z-index:0}
.adventure-path-done::before{background:rgba(255,220,50,.5)}

.adventure-node{position:relative;z-index:2;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;border:4px solid rgba(255,255,255,.4);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.adventure-node:active{transform:scale(.92)}
.adventure-node-locked{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.15);cursor:default;opacity:.5;filter:grayscale(.6)}
.adventure-node-locked:active{transform:none}
.adventure-node-current{animation:adventureNodePulse 1.5s ease-in-out infinite;border-color:#FFD700;box-shadow:0 0 20px rgba(255,215,0,.5)}
@keyframes adventureNodePulse{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(255,215,0,.5)}50%{transform:scale(1.08);box-shadow:0 0 30px rgba(255,215,0,.7)}}
.adventure-node-done{border-color:rgba(255,220,50,.8);position:relative}
.adventure-node-done::after{content:'';position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;background:#4CAF50 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}

.adventure-connector{width:4px;height:28px;position:relative;z-index:1}

/* Adventure node label */
.adventure-node-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:2}
.adventure-node-label{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);text-align:center;max-width:90px;line-height:1.2}
.adventure-node-stars{display:flex;gap:2px;font-size:10px}
.adventure-node-stars span{opacity:.3}
.adventure-node-stars span.earned{opacity:1}

/* Zone colors */
.adventure-zone[data-zone="forest"] .adventure-zone-header{background:rgba(34,139,34,.6)}
.adventure-zone[data-zone="forest"] .adventure-node:not(.adventure-node-locked){background:linear-gradient(145deg,#4CAF50,#2E7D32)}
.adventure-zone[data-zone="beach"] .adventure-zone-header{background:rgba(255,165,0,.6)}
.adventure-zone[data-zone="beach"] .adventure-node:not(.adventure-node-locked){background:linear-gradient(145deg,#FFB74D,#F57C00)}
.adventure-zone[data-zone="mountain"] .adventure-zone-header{background:rgba(121,85,72,.6)}
.adventure-zone[data-zone="mountain"] .adventure-node:not(.adventure-node-locked){background:linear-gradient(145deg,#8D6E63,#5D4037)}
.adventure-zone[data-zone="castle"] .adventure-zone-header{background:rgba(156,39,176,.6)}
.adventure-zone[data-zone="castle"] .adventure-node:not(.adventure-node-locked){background:linear-gradient(145deg,#AB47BC,#7B1FA2)}

/* Adventure Story Screen */
#adventure-story-screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.adventure-story-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;transition:background .5s}
.adventure-story-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:20px;padding:30px 24px;max-width:380px;width:100%}
.adventure-story-mascot{font-size:80px;animation:adventureMascotBounce 1s ease both;display:flex;justify-content:center}
@keyframes adventureMascotBounce{0%{opacity:0;transform:scale(.3) translateY(40px)}60%{transform:scale(1.1) translateY(-10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.adventure-story-bubble{background:rgba(255,255,255,.92);border-radius:24px;padding:20px 24px;font-size:17px;font-weight:700;color:#333;line-height:1.6;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.15);position:relative;animation:adventureBubbleIn .6s ease .3s both;max-width:100%}
@keyframes adventureBubbleIn{0%{opacity:0;transform:translateY(20px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
.adventure-story-bubble::before{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:14px solid rgba(255,255,255,.92)}
.adventure-story-btn{padding:14px 40px;border-radius:50px;border:none;font-size:18px;font-weight:900;font-family:inherit;cursor:pointer;color:#fff;background:linear-gradient(145deg,#FF6B6B,#ee5a24);box-shadow:0 6px 20px rgba(238,90,36,.4);transition:all .2s;animation:adventureBtnIn .5s ease .6s both}
@keyframes adventureBtnIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.adventure-story-btn:active{transform:scale(.93)}

/* Adventure complete celebration */
.adventure-zone-complete{position:relative}
.adventure-zone-complete .adventure-zone-header::after{content:'';display:inline-block;width:18px;height:18px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2398FB98'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;vertical-align:middle}

/* Adventure zone progress & unlock preview */
.adventure-zone-progress{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 14px;border-radius:14px;background:rgba(0,0,0,.2)}
.adventure-zone-progress-bar{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.adventure-zone-progress-fill{height:100%;border-radius:4px;transition:width .5s ease;background:linear-gradient(90deg,#FFD700,#FFA500)}
.adventure-zone-progress-text{font-size:11px;font-weight:800;color:rgba(255,255,255,.8);white-space:nowrap}
.adventure-zone-unlock{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:12px;background:rgba(255,215,0,.15);border:1px dashed rgba(255,215,0,.4);margin-bottom:6px;animation:unlockHintPulse 2s ease-in-out infinite}
.adventure-zone-unlock-icon{font-size:20px}
.adventure-zone-unlock-text{font-size:11px;font-weight:700;color:rgba(255,255,255,.85);line-height:1.2}
.adventure-zone-unlock-earned{background:rgba(76,175,80,.2);border-color:rgba(76,175,80,.5);animation:none}
.adventure-zone-unlock-earned .adventure-zone-unlock-text{color:rgba(255,255,255,.95)}
@keyframes unlockHintPulse{0%,100%{opacity:.8}50%{opacity:1}}

/* Adventure reward popup */
.adventure-reward-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
.adventure-reward-card{background:#fff;border-radius:28px;padding:30px;text-align:center;max-width:300px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:adventureRewardIn .5s ease both}
@keyframes adventureRewardIn{0%{opacity:0;transform:scale(.5) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.adventure-reward-icon{font-size:64px;margin-bottom:10px}
.adventure-reward-title{font-size:22px;font-weight:900;color:#333;margin-bottom:6px}
.adventure-reward-text{font-size:15px;font-weight:600;color:#666;margin-bottom:16px;line-height:1.4}
.adventure-reward-stars{font-size:20px;font-weight:900;color:#FF9800;margin-bottom:16px}
.adventure-reward-btn{padding:12px 32px;border-radius:50px;border:none;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;color:#fff;background:linear-gradient(145deg,#6C63FF,#5A52D5);box-shadow:0 4px 16px rgba(108,99,255,.4);transition:all .2s}
.adventure-reward-btn:active{transform:scale(.93)}
@keyframes aqMissionPulse{0%,100%{transform:scale(1);box-shadow:0 4px 15px rgba(0,0,0,0.3)}50%{transform:scale(1.1);box-shadow:0 4px 20px rgba(249,202,36,0.5)}}
.aq-mission-item{background:rgba(255,255,255,0.1);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .2s;border:2px solid transparent}
.aq-mission-item:active{transform:scale(.95)}
.aq-mission-item:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,211,42,0.4)}
.aq-mission-item.completed{opacity:0.5;pointer-events:none}
.aq-mission-icon{font-size:28px;flex-shrink:0}
.aq-mission-info{flex:1}
.aq-mission-title{color:#fff;font-size:13px;font-weight:700;margin-bottom:2px}
.aq-mission-desc{color:rgba(200,220,255,0.7);font-size:11px}
.aq-mission-star{color:#ffd32a;font-size:16px;flex-shrink:0}

/* ===== INTERACTIVE STORIES ===== */
.stories-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%);z-index:0}
.stories-bg::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 40% 70%,#ffd32a,transparent),radial-gradient(2px 2px at 60% 40%,#fff,transparent),radial-gradient(2px 2px at 80% 10%,#ffd32a,transparent),radial-gradient(1px 1px at 10% 80%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 50%,#ffd32a,transparent),radial-gradient(1px 1px at 30% 20%,#fff,transparent);animation:storiesStarsTwinkle 4s ease-in-out infinite alternate}
@keyframes storiesStarsTwinkle{0%{opacity:.6}100%{opacity:1}}
#stories-screen.active{display:flex!important;flex-direction:column;overflow:hidden}
.stories-header{display:flex;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));position:relative;z-index:2;gap:12px}
.stories-title{flex:1;color:#fff;font-size:20px;font-weight:900;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.stories-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.15);border-radius:20px;padding:6px 12px;font-size:14px;font-weight:800;color:#ffd32a}
.stories-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.story-card{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;padding:16px;cursor:pointer;transition:all .2s;border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:14px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.story-card:active{transform:scale(.96);background:rgba(255,255,255,.18)}
.story-card-icon{font-size:48px;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:storyCardFloat 3s ease-in-out infinite}
@keyframes storyCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.story-card-info{flex:1;min-width:0}
.story-card-title{color:#fff;font-size:16px;font-weight:900;margin-bottom:4px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.story-card-desc{color:rgba(255,255,255,.7);font-size:12px;font-weight:600;line-height:1.4;margin-bottom:6px}
.story-card-meta{display:flex;align-items:center;gap:8px}
.story-card-age{background:rgba(255,255,255,.15);border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700;color:rgba(255,255,255,.8)}
.story-card-endings{font-size:10px;font-weight:700;color:#ffd32a}
.story-card-check{font-size:24px;flex-shrink:0;opacity:.3}
.story-card.read .story-card-check{opacity:1}
.story-card-new{position:absolute;top:-4px;right:-4px;background:#FF6B6B;color:#fff;font-size:9px;font-weight:900;padding:2px 7px;border-radius:8px;animation:storyNewPulse 1.5s ease infinite}
@keyframes storyNewPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Story Reader */
#story-reader-screen.active{display:flex!important;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.story-reader-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;transition:background .8s ease,opacity .8s ease}
.story-reader-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 16px;max-width:420px;width:100%;flex:1;justify-content:center}
.story-reader-scene{font-size:100px;animation:storySceneIn .6s ease both;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));text-align:center;line-height:1.2}
@keyframes storySceneIn{0%{opacity:0;transform:scale(.5) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.story-reader-text-box{background:rgba(255,255,255,.92);border-radius:24px;padding:18px 22px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.2);animation:storyTextIn .5s ease .2s both}
@keyframes storyTextIn{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
.story-reader-narrator{font-size:16px;font-weight:700;color:#333;line-height:1.6;text-align:center}
.story-reader-choices{display:flex;flex-direction:column;gap:10px;width:100%;animation:storyChoicesIn .5s ease .4s both}
@keyframes storyChoicesIn{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
.story-choice-btn{padding:14px 20px;border-radius:18px;border:3px solid rgba(255,255,255,.3);font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;color:#fff;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.2);transition:all .2s;touch-action:manipulation;-webkit-user-select:none;user-select:none;text-align:left;display:flex;align-items:center;gap:10px}
.story-choice-btn:active{transform:scale(.95);background:rgba(255,255,255,.25)}
.story-choice-btn .choice-emoji{font-size:24px;flex-shrink:0}
.story-choice-btn .choice-text{flex:1}
.story-reader-exit{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;z-index:10;width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:all .2s}
.story-reader-exit:active{transform:scale(.9);background:rgba(0,0,0,.6)}
.story-ending-box{text-align:center;padding:20px}
.story-ending-icon{font-size:80px;margin-bottom:10px;animation:storyEndingBounce .8s ease both}
@keyframes storyEndingBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.story-ending-title{font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);margin-bottom:8px}
.story-ending-text{font-size:15px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.5;margin-bottom:16px}
.story-ending-reward{font-size:16px;font-weight:800;color:#ffd32a;margin-bottom:16px}
.story-ending-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.story-ending-btn{padding:12px 24px;border-radius:50px;border:none;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .2s;touch-action:manipulation}
.story-ending-btn.primary{color:#fff;background:linear-gradient(145deg,#6C63FF,#5A52D5);box-shadow:0 4px 16px rgba(108,99,255,.4)}
.story-ending-btn.secondary{color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.story-ending-btn:active{transform:scale(.93)}

/* ===== SEASONAL EVENTS ===== */
/* Event Banner on Menu */
.event-banner{position:relative;margin:0 12px 12px;padding:14px 16px;border-radius:16px;cursor:pointer;overflow:hidden;min-height:64px;align-items:center;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:eventBannerPulse 3s ease-in-out infinite;touch-action:manipulation}
.event-banner:active{transform:scale(.97)}
@keyframes eventBannerPulse{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.2)}50%{box-shadow:0 4px 30px rgba(255,255,255,.3)}}
.event-banner-decos{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}
.event-banner-deco{position:absolute;font-size:20px;opacity:.3;animation:eventDecoDrift 6s ease-in-out infinite}
.deco-0{top:5%;left:5%;animation-delay:0s}.deco-1{top:10%;right:10%;animation-delay:1s}.deco-2{bottom:10%;left:15%;animation-delay:2s}
.deco-3{bottom:5%;right:5%;animation-delay:3s}.deco-4{top:50%;left:50%;animation-delay:4s}.deco-5{top:30%;right:30%;animation-delay:5s}
@keyframes eventDecoDrift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(10deg)}}
.event-banner-text{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.event-banner-icon{font-size:36px;flex-shrink:0}
.event-banner-info{flex:1}
.event-banner-title{font-size:16px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.event-banner-sub{font-size:12px;font-weight:700;color:rgba(255,255,255,.9);margin-top:2px}
.event-banner-progress{font-size:14px;font-weight:900;color:#fff;background:rgba(0,0,0,.2);border-radius:20px;padding:4px 12px;flex-shrink:0}

/* Events Screen */
.events-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;transition:background .3s}
.events-header{position:relative;z-index:2;display:flex;align-items:center;padding:12px 16px;gap:12px}
.events-title{flex:1;font-size:20px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.events-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);border-radius:20px;padding:4px 12px;font-size:14px;font-weight:800;color:#fff}
.events-content{position:relative;z-index:1;padding:0 16px 120px;overflow-y:auto;max-height:calc(100vh - 60px);-webkit-overflow-scrolling:touch}

/* Events empty state */
.events-empty{text-align:center;padding:40px 20px}
.events-empty-icon{font-size:64px;margin-bottom:16px}
.events-empty-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:8px}
.events-empty-text{font-size:15px;color:rgba(255,255,255,.8);margin-bottom:24px}
.events-next-list{text-align:left;max-width:280px;margin:0 auto}
.events-next-item{font-size:14px;font-weight:700;color:rgba(255,255,255,.9);padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.1);margin-bottom:6px}

/* Events floating decorations */
.events-floating-decos{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;overflow:hidden}
.events-floating-deco{position:absolute;font-size:28px;opacity:.2;animation:eventFloat 8s ease-in-out infinite}
.fd-0{top:10%;left:5%;animation-delay:0s}.fd-1{top:20%;right:8%;animation-delay:1.3s}.fd-2{top:40%;left:10%;animation-delay:2.6s}
.fd-3{top:60%;right:15%;animation-delay:3.9s}.fd-4{top:75%;left:20%;animation-delay:5.2s}.fd-5{top:85%;right:10%;animation-delay:6.5s}
@keyframes eventFloat{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-20px) rotate(15deg) scale(1.1)}}

/* Events mascot area */
.events-mascot-area{display:flex;align-items:center;gap:12px;margin:16px 0;padding:16px;background:rgba(255,255,255,.15);border-radius:20px;backdrop-filter:blur(8px)}
.events-mascot-emoji{font-size:48px;animation:gentleBounce 2s ease-in-out infinite}
.events-mascot-bubble{flex:1;font-size:16px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.2);line-height:1.4}

/* Events activity cards */
.events-activities-grid{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.event-activity-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;border:3px solid rgba(255,255,255,.3);cursor:pointer;text-align:left;font-family:inherit;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:all .2s;touch-action:manipulation;overflow:hidden}
.event-activity-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.15);border-radius:15px}
.event-activity-card:active{transform:scale(.96)}
.event-act-icon{font-size:36px;position:relative;z-index:1;flex-shrink:0}
.event-act-title{font-size:16px;font-weight:900;position:relative;z-index:1}
.event-act-desc{font-size:12px;font-weight:600;opacity:.85;position:relative;z-index:1}
.event-act-stars{position:relative;z-index:1;margin-left:auto;display:flex;gap:2px;flex-shrink:0}
.event-act-star{font-size:16px}.event-act-star.empty{opacity:.4}

/* Events reward */
.events-reward-banner{text-align:center;padding:16px;background:rgba(255,215,0,.2);border-radius:16px;border:2px solid rgba(255,215,0,.4);margin:12px 0}
.events-reward-icon{font-size:32px;display:block;margin-bottom:6px}
.events-reward-text{font-size:14px;font-weight:800;color:#fff}
.events-reward-hint{text-align:center;padding:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}

/* Event Game Screen */
.event-game-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}
.event-game-title-badge{font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.event-game-instruction{position:relative;z-index:2;text-align:center;font-size:18px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);padding:8px 16px;margin-top:8px}
.event-game-area{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;flex:1}

/* Event Quiz */
.event-quiz-emoji{font-size:64px;text-align:center;margin-bottom:20px;animation:eventEmojiPop .5s ease both}
@keyframes eventEmojiPop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.event-quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px}
.event-quiz-option{padding:14px 10px;border-radius:14px;border:3px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);backdrop-filter:blur(6px);font-size:14px;font-weight:800;font-family:inherit;color:#fff;cursor:pointer;transition:all .3s;touch-action:manipulation;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.event-quiz-option:active{transform:scale(.95)}
.event-quiz-option.correct{background:rgba(46,213,115,.6)!important;border-color:#2ed573!important;transform:scale(1.05);animation:eventCorrectPulse .5s ease}
.event-quiz-option.wrong{background:rgba(255,71,87,.6)!important;border-color:#ff4757!important;animation:eventWrongShake .5s ease}
@keyframes eventCorrectPulse{0%{box-shadow:0 0 0 0 rgba(46,213,115,.7)}100%{box-shadow:0 0 0 20px rgba(46,213,115,0)}}
@keyframes eventWrongShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* Event Find Grid */
.event-find-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;width:100%;max-width:400px}
.event-find-cell{font-size:28px;width:52px;height:52px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;touch-action:manipulation}
.event-find-cell:active{transform:scale(.9)}
.event-find-cell.found{background:rgba(46,213,115,.5);border-color:#2ed573;animation:eventFoundPop .4s ease;pointer-events:none}
.event-find-cell.wrong-find{background:rgba(255,71,87,.4);border-color:#ff4757;animation:eventWrongShake .5s ease}
@keyframes eventFoundPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Event Sequence */
.event-seq-display{font-size:36px;text-align:center;padding:20px;min-height:80px;background:rgba(255,255,255,.1);border-radius:16px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;letter-spacing:8px;width:100%;max-width:360px;transition:all .3s}
.event-seq-display.seq-your-turn{background:rgba(108,99,255,.3);animation:seqYourTurnPulse 1s ease infinite}
.event-seq-display.seq-error{background:rgba(255,71,87,.3)}
@keyframes seqYourTurnPulse{0%,100%{box-shadow:0 0 0 0 rgba(108,99,255,.3)}50%{box-shadow:0 0 0 12px rgba(108,99,255,0)}}
.event-seq-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;transition:all .3s}
.event-seq-btn{font-size:32px;width:60px;height:60px;border-radius:16px;border:3px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);cursor:pointer;transition:all .2s;touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.event-seq-btn:active,.event-seq-btn.seq-pressed{transform:scale(.85);background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.6)}

/* Event Match */
.event-match-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px}
.event-match-option{padding:16px 10px;border-radius:14px;border:3px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);backdrop-filter:blur(6px);font-size:14px;font-weight:700;font-family:inherit;color:#fff;cursor:pointer;transition:all .3s;touch-action:manipulation;text-align:center}
.event-match-pattern{font-size:22px;letter-spacing:4px;display:block;margin-bottom:6px}
.event-match-name{font-size:12px;opacity:.8}
.event-match-option.correct{background:rgba(46,213,115,.6)!important;border-color:#2ed573!important}
.event-match-option.wrong{background:rgba(255,71,87,.6)!important;border-color:#ff4757!important}

/* Bottom nav event button pulse */
.bottom-nav-events{position:relative}
.bottom-nav-events::after{content:'';position:absolute;top:2px;right:2px;width:8px;height:8px;background:#ff4757;border-radius:50%;animation:eventDot 2s ease-in-out infinite}
@keyframes eventDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ===== VIRTUAL FRIENDS (NPCs) ===== */
.friends-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(145deg,#a8e6cf,#dcedc1,#ffd3b6);z-index:0}
.friends-header{position:relative;z-index:1;display:flex;align-items:center;padding:12px 16px;gap:10px}
.friends-title{flex:1;font-size:20px;font-weight:800;color:#2d3436;text-align:center;margin:0}
.friends-badge{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.7);border-radius:20px;padding:4px 12px;font-weight:700;font-size:14px;color:#e84393}
.friends-badge-icon{font-size:16px}
.friends-content{position:relative;z-index:1;padding:8px 16px;overflow-y:auto;max-height:calc(100vh - 70px);-webkit-overflow-scrolling:touch}

.friend-card{background:rgba(255,255,255,.92);border-radius:24px;padding:0;margin-bottom:16px;display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(0,0,0,.07);transition:all .3s;position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.friend-card.visiting{background:rgba(255,255,255,.97);border:3px solid #fdcb6e;box-shadow:0 6px 28px rgba(253,203,110,.35);animation:friendVisitGlow 2s ease-in-out infinite}
@keyframes friendVisitGlow{0%,100%{box-shadow:0 6px 28px rgba(253,203,110,.35)}50%{box-shadow:0 6px 36px rgba(253,203,110,.55)}}
.friend-card.locked{opacity:.45;filter:grayscale(.6)}

/* Pet card top: avatar + info side by side */
.friend-card-top{display:flex;align-items:center;gap:14px;padding:16px 16px 10px}
.friend-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;flex-shrink:0;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.friend-avatar-bg{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s;position:relative}
.friend-avatar-bg:active{transform:scale(.88)}
/* Ring around avatar */
.friend-avatar::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;transition:border-color .3s,transform .3s}
.friend-card.adopted .friend-avatar::before{border-color:rgba(85,239,196,.35)}
.friend-card.pet-needy .friend-avatar::before{border-color:rgba(231,76,60,.35);animation:avatarRingPulse 1.5s ease infinite}
@keyframes avatarRingPulse{0%,100%{border-color:rgba(231,76,60,.2);transform:scale(1)}50%{border-color:rgba(231,76,60,.5);transform:scale(1.05)}}

/* Mood-specific idle animations */
.pet-emoji-idle{display:inline-block;animation:petIdleBreath 3s ease-in-out infinite}
@keyframes petIdleBreath{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.05) translateY(-2px)}}
.friend-card.adopted:not(.sleeping):not(.ranaway):not(.pet-needy) .pet-emoji-idle{animation-name:petIdleHappy}
@keyframes petIdleHappy{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-4px) scale(1.06)}50%{transform:translateY(0) scale(1)}75%{transform:translateY(-2px) scale(1.03)}}
.friend-card.pet-needy .pet-emoji-idle{animation:petIdleHungry 1.2s ease-in-out infinite}
@keyframes petIdleHungry{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(0)}}
.friend-card.sleeping .pet-emoji-idle{animation:petIdleSleep 3s ease-in-out infinite;opacity:.7;filter:brightness(.85)}
@keyframes petIdleSleep{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(.96)}}
.friend-card.ranaway .pet-emoji-idle{opacity:.25;filter:grayscale(1);animation:none}

/* Floating particles container */
.pet-particles{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:5}
.pet-particle{position:absolute;pointer-events:none;font-size:18px;opacity:0;left:50%;top:50%;animation:petParticleFloat 1.1s ease-out forwards}
@keyframes petParticleFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(1.1)}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py) - 24px)) scale(.5)}}

.friend-visiting-badge{position:absolute;top:-4px;right:-4px;font-size:14px;animation:friendBadgeBounce 1s ease infinite}
@keyframes friendBadgeBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.friend-info{flex:1;min-width:0}
.friend-name{font-size:18px;font-weight:800;color:#2d3436;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.friend-personality{font-size:11px;color:#b2bec3;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.friend-mood{font-size:12px;color:#636e72;margin-bottom:6px}
.friend-hearts{display:flex;gap:3px;margin-bottom:4px}
.friend-heart{font-size:14px;transition:all .3s}
.friend-heart.filled{color:#e84393}
.friend-heart.empty{color:#dfe6e9;filter:grayscale(1)}

/* Card bottom: actions */
.friend-card-bottom{padding:0 16px 14px}
.friend-actions{display:flex;flex-wrap:wrap;gap:8px}
.friend-action-btn{padding:10px 14px;border-radius:14px;border:none;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;touch-action:manipulation;display:flex;align-items:center;gap:5px;flex:1;justify-content:center;min-width:0}
.friend-action-btn:active{transform:scale(.92)}
.friend-action-btn.gift-btn{background:linear-gradient(135deg,#fdcb6e,#f0932b);color:#fff}
.friend-action-btn.play-btn{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff}
.friend-action-btn.pet-btn{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff}
.friend-action-btn:disabled{opacity:.4;pointer-events:none}

.friend-visit-popup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.friend-visit-popup.show{display:flex}
.friend-visit-inner{background:#fff;border-radius:24px;padding:30px 24px;text-align:center;max-width:320px;width:100%;animation:friendPopIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes friendPopIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.friend-visit-emoji{font-size:64px;margin-bottom:12px;animation:friendWave 1s ease-in-out infinite alternate}
@keyframes friendWave{0%{transform:rotate(-10deg)}100%{transform:rotate(10deg)}}
.friend-visit-name{font-size:22px;font-weight:800;color:#2d3436;margin-bottom:6px}
.friend-visit-msg{font-size:15px;color:#636e72;margin-bottom:16px;line-height:1.4}
.friend-visit-gift{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fdcb6e,#f0932b);color:#fff;padding:8px 20px;border-radius:20px;font-size:16px;font-weight:700;margin-bottom:16px}
.friend-visit-btn{padding:12px 32px;border-radius:16px;border:none;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;color:#fff;background:linear-gradient(135deg,#6c5ce7,#a29bfe);transition:all .2s;touch-action:manipulation}
.friend-visit-btn:active{transform:scale(.92)}

/* Friend notification dot */
.bottom-nav-friends{position:relative}
.friend-notify-dot{position:absolute;top:2px;right:2px;width:10px;height:10px;background:#e84393;border-radius:50%;border:2px solid #fff;animation:friendDotPulse 1.5s ease infinite}
@keyframes friendDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* Friend on menu mascot area */
.menu-friend-visitor{display:none}
@keyframes friendSlideIn{0%{transform:translateX(80px);opacity:0}100%{transform:translateX(0);opacity:1}}
.menu-friend-emoji{font-size:32px}
.menu-friend-bubble{background:#fff;border-radius:10px;padding:4px 8px;font-size:11px;font-weight:700;color:#2d3436;box-shadow:0 2px 8px rgba(0,0,0,.1);white-space:nowrap;margin-bottom:4px;max-width:120px;text-align:center}

/* Lock overlay for friends */
.friend-lock-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.6);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;backdrop-filter:blur(2px)}
.lock-icon{font-size:24px}
.lock-requirement{font-size:11px;color:#666;text-align:center;padding:0 8px}

/* === PET CARE SYSTEM === */

/* Pet card states with mood-dependent gradient accents */
.friend-card.adopted{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(85,239,196,.08));border:2px solid rgba(85,239,196,.35);box-shadow:0 6px 24px rgba(85,239,196,.15)}
.friend-card.ranaway{background:linear-gradient(160deg,rgba(255,235,235,.95),rgba(231,76,60,.06));border:2px dashed #e74c3c;animation:petSadShake 2s ease-in-out infinite}
.friend-card.sleeping{background:linear-gradient(160deg,rgba(235,240,255,.95),rgba(116,185,255,.08));border:2px solid rgba(116,185,255,.4)}
.friend-card.active-pet{border-color:#feca57;box-shadow:0 6px 24px rgba(254,202,87,.3)}
.friend-card.pet-needy{background:linear-gradient(160deg,rgba(255,245,240,.95),rgba(231,76,60,.05));animation:petNeedyPulse 1.5s ease-in-out infinite}

@keyframes petSadShake{0%,100%{transform:translateX(0)}10%{transform:translateX(-2px)}20%{transform:translateX(2px)}30%{transform:translateX(0)}}
@keyframes petNeedyPulse{0%,100%{box-shadow:0 6px 20px rgba(231,76,60,.08)}50%{box-shadow:0 6px 30px rgba(231,76,60,.25)}}

/* Pet emoji states (legacy compat) */
.pet-emoji{display:inline-block;transition:all .3s}
.pet-sleeping{animation:petSleepBob 3s ease-in-out infinite;opacity:.7;filter:brightness(.8)}
@keyframes petSleepBob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* Pet mood overlays */
.pet-mood-face{position:absolute;bottom:-4px;right:-4px;font-size:18px;animation:petMoodBounce 1s ease infinite;z-index:3}
@keyframes petMoodBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.pet-mood-hungry{animation-name:petMoodShake}
@keyframes petMoodShake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-2px) scale(1.15)}75%{transform:translateX(2px) scale(1.15)}}
.pet-mood-zzz{animation:petZzz 2s ease-in-out infinite;bottom:auto;top:-10px;right:-6px;font-size:20px}
@keyframes petZzz{0%{opacity:.3;transform:translateY(0) scale(.8)}50%{opacity:1;transform:translateY(-8px) scale(1.1)}100%{opacity:.3;transform:translateY(-16px) scale(.8)}}

/* Pet active badge */
.pet-active-badge{position:absolute;top:-5px;left:-5px;font-size:16px;animation:petActiveSpin 3s linear infinite;z-index:3}
@keyframes petActiveSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.pet-active-label{font-size:10px;color:#f39c12;font-weight:700;background:rgba(254,202,87,.2);padding:1px 6px;border-radius:8px}

/* Pet status bars - enhanced */
.pet-status-bars{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.pet-stat-row{display:flex;align-items:center;gap:6px}
.pet-stat-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.pet-stat-bar{flex:1;height:10px;background:rgba(0,0,0,.06);border-radius:5px;overflow:hidden;min-width:60px;position:relative}
.pet-stat-fill{height:100%;border-radius:5px;transition:width .5s ease,background .3s ease;position:relative}
.pet-stat-fill::after{content:'';position:absolute;top:1px;left:4px;right:4px;height:3px;background:rgba(255,255,255,.35);border-radius:2px}
.pet-stat-low .pet-stat-bar{animation:statBarPulse 1s ease infinite}
@keyframes statBarPulse{0%,100%{box-shadow:0 0 0 rgba(231,76,60,0)}50%{box-shadow:0 0 8px rgba(231,76,60,.5)}}

/* Pet speech bubbles by mood */
.friend-speech{font-size:13px;color:#636e72;font-style:italic;margin-top:6px;line-height:1.4;padding:6px 10px;background:rgba(0,0,0,.03);border-radius:10px}
.pet-speech-happy{background:rgba(85,239,196,.12);color:#00b894}
.pet-speech-hungry{background:rgba(231,76,60,.1);color:#c0392b}
.pet-speech-sleepy{background:rgba(116,185,255,.1);color:#2980b9}
.pet-speech-sad{background:rgba(253,121,168,.1);color:#e84393}
.pet-speech-sleeping{background:rgba(116,185,255,.15);color:#2980b9}

/* Pet ranaway message */
.pet-ranaway-msg{color:#e74c3c;font-weight:700;font-size:14px}

/* Action buttons - enhanced types */
.friend-action-btn.feed-btn{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}
.friend-action-btn.sleep-btn{background:linear-gradient(135deg,#2980b9,#74b9ff);color:#fff}
.friend-action-btn.rescue-btn{background:linear-gradient(135deg,#e74c3c,#fd79a8);color:#fff;animation:rescueBtnPulse 1.5s ease infinite}
.friend-action-btn.active-btn{background:linear-gradient(135deg,#f39c12,#feca57);color:#fff}
@keyframes rescueBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Tap hint on avatar */
.pet-tap-hint{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(0,0,0,.3);white-space:nowrap;opacity:0;transition:opacity .3s}
.friend-avatar:hover .pet-tap-hint,.friend-card:not(.locked) .pet-tap-hint{opacity:1}
.friend-card.locked .pet-tap-hint{display:none}

/* Food menu - enhanced */
.pet-food-menu{padding:12px 16px;background:rgba(255,255,255,.5);border-top:1px solid rgba(0,0,0,.04);animation:foodMenuSlide .3s ease}
@keyframes foodMenuSlide{from{opacity:0;max-height:0;padding:0 16px}to{opacity:1;max-height:300px;padding:12px 16px}}
.pet-food-title{font-size:14px;font-weight:700;color:#2d3436;margin-bottom:10px;text-align:center}
.pet-food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pet-food-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;background:#fff;border-radius:14px;border:2px solid rgba(0,0,0,.05);cursor:pointer;transition:all .2s;font-family:inherit;position:relative}
.pet-food-item:active{transform:scale(.9);background:#f5f5f5}
.pet-food-fav{border-color:#fd79a8;background:rgba(253,121,168,.06);box-shadow:0 2px 8px rgba(253,121,168,.15)}
.pet-food-emoji{font-size:26px}
.pet-food-name{font-size:11px;font-weight:700;color:#2d3436;white-space:nowrap}
.pet-food-price{font-size:11px;color:#f39c12;font-weight:700}
.pet-food-fav-badge{position:absolute;top:-5px;right:-5px;font-size:12px}

/* Menu pet status widget */
.menu-pet-status{position:absolute;left:10px;bottom:0;display:flex;flex-direction:column;align-items:center;cursor:pointer;animation:friendSlideIn .6s cubic-bezier(.34,1.56,.64,1)}
.menu-pet-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.menu-pet-emoji{display:inline-block}
.menu-pet-alert{position:absolute;top:-8px;right:-8px;font-size:14px;animation:petMoodBounce 1s ease infinite}
.menu-pet-name{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);margin-top:2px}
.menu-pet-mood-hungry .menu-pet-avatar{box-shadow:0 2px 8px rgba(231,76,60,.4)}
.menu-pet-mood-ranaway .menu-pet-avatar{opacity:.5;filter:grayscale(1)}

/* Pet popup variations */
.pet-alert-popup{border:3px solid #e74c3c}
.rescue-popup-btn{background:linear-gradient(135deg,#e74c3c,#fd79a8)!important}
.friend-visit-btn-secondary{display:block;margin:8px auto 0;padding:8px 24px;border-radius:12px;border:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#636e72;background:rgba(0,0,0,.05);transition:all .2s}
.friend-visit-btn-secondary:active{transform:scale(.92)}
.pet-gone{opacity:.25;filter:grayscale(1)}

/* Progressive Disclosure - Journey Indicator */
.journey-indicator{margin:0 16px 12px;padding:10px 14px;background:rgba(255,255,255,.15);border-radius:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:journeyFadeIn .5s ease}
.journey-next-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.9);text-align:center;line-height:1.4;margin-bottom:6px}
.journey-next-label strong{color:#fff}
.journey-progress-bar{height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.journey-progress-fill{height:100%;background:linear-gradient(90deg,#feca57,#ff9f43);border-radius:3px;transition:width .6s ease;min-width:4px}
@keyframes journeyFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Unlock celebration badges */
.unlock-celebration{text-align:center}
.unlock-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.unlock-badge{background:rgba(255,255,255,.25);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:800;color:#fff;backdrop-filter:blur(4px);animation:badgePop .4s ease both}
.unlock-badge:nth-child(2){animation-delay:.1s}
.unlock-badge:nth-child(3){animation-delay:.2s}
@keyframes badgePop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}