@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background-color:#f0f8ff;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;padding:0;font-family:Comic Sans MS,Comic Neue,sans-serif;display:flex;overflow:hidden}*{box-sizing:border-box}.app-container{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;padding:15px 0;display:flex;overflow:visible}.title{color:#333;margin-bottom:10px;font-size:2.5rem}.canvas-container{aspect-ratio:4/3;touch-action:none;background-color:#fff;border-radius:20px;flex:auto;width:100%;max-width:800px;min-height:200px;max-height:60vh;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000001a}.svg-guide{width:100%;height:100%;position:absolute;top:0;left:0}.letter-path-bg{fill:none;stroke:#e0e0e0;stroke-width:var(--stroke-width-bg,40px);stroke-linecap:round;stroke-linejoin:round}.letter-path-completed{fill:none;stroke:#4caf50;stroke-width:var(--stroke-width-active,35px);stroke-linecap:round;stroke-linejoin:round;transition:all .3s}.letter-path-active{fill:none;stroke:#8bc34a;stroke-width:var(--stroke-width-active,35px);stroke-linecap:round;stroke-linejoin:round}.start-indicator{fill:#ffeb3b;stroke:#fbc02d;stroke-width:5px;pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:1.5s infinite pulse}.hint-path{fill:none;stroke:#ff9800;stroke-width:var(--stroke-width-hint,15px);stroke-linecap:round;stroke-linejoin:round;pointer-events:none;stroke-dasharray:400;stroke-dashoffset:400px;opacity:.6;animation:2s ease-in-out infinite draw-hint}@keyframes draw-hint{0%{stroke-dashoffset:400px}to{stroke-dashoffset:0}}@keyframes pulse{0%{opacity:.8;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}to{opacity:.8;transform:scale(.8)}}.error-shake{animation:.4s shake}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-8px)}to{transform:translate(0)}}.success-pulse{animation:1s bg-pulse}@keyframes bg-pulse{0%{box-shadow:0 10px 30px #0000001a}50%{box-shadow:0 10px 50px #4caf5099}to{box-shadow:0 10px 30px #0000001a}}.success-text{color:#4caf50;height:40px;margin-top:10px;font-size:2rem;animation:1s bounce}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.controls{flex-wrap:wrap;justify-content:center;gap:15px;margin-top:15px;display:flex}button{color:#1b5e20;cursor:pointer;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(#a5d6a7,#81c784);border:none;border-radius:50px;padding:12px 30px;font-size:1.3rem;font-weight:700;transition:all .1s ease-in-out;box-shadow:0 6px #4caf50,0 10px 15px #00000026}button:active{transform:translateY(6px);box-shadow:0 0 #4caf50,0 4px 8px #00000026}button.secondary{color:#5d4037;background:linear-gradient(#ffca28,#ffb300);box-shadow:0 6px #ff8f00,0 10px 15px #00000026}button.secondary:active{transform:translateY(6px);box-shadow:0 0 #ff8f00,0 4px 8px #00000026}.difficulty-btn{color:#555;cursor:pointer;background-color:#e0e0e0;border:4px solid #0000;border-radius:20px;padding:15px 30px;font-size:1.5rem;font-weight:700;transition:all .2s;box-shadow:0 4px 6px #0000001a}.difficulty-btn:hover{transform:scale(1.05)}.difficulty-btn.active.facil{color:#fff;background-color:#8bc34a;border-color:#689f38}.difficulty-btn.active.medio{color:#fff;background-color:#ffb300;border-color:#fb8c00}.difficulty-btn.active.dificil{color:#fff;background-color:#f44336;border-color:#d32f2f}.sound-btn{color:#2196f3;cursor:pointer;background:#fff;border:4px solid #2196f3;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;padding:0;font-size:2rem;transition:all .2s;display:flex;box-shadow:0 4px 6px #0000001a}.sound-btn:hover{transform:scale(1.1)}.sound-btn.disabled{color:#9e9e9e;border-color:#9e9e9e}.category-container{gap:30px;margin-top:10px;display:flex}.category-btn{cursor:pointer;color:#555;text-transform:none;background:#fff;border:none;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;width:200px;height:200px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 10px 20px #00000026}.category-btn:hover{transform:translateY(-10px);box-shadow:0 15px 30px #0003}.category-btn .category-icon{margin-bottom:10px;font-size:5rem;font-weight:700}.category-btn.numbers .category-icon{color:#f44336}.category-btn.uppercase .category-icon{color:#2196f3}.category-btn.lowercase .category-icon{color:#4caf50}.category-btn .category-text{color:#555;font-size:1.5rem;font-weight:700}.back-btn{color:#333;background:#e0e0e0;font-weight:700;position:absolute;top:20px;left:20px;box-shadow:0 6px #bdbdbd,0 10px 15px #00000026}.back-btn:active{box-shadow:0 0 #bdbdbd,0 4px 8px #00000026}@media (width<=768px){.title{font-size:1.8rem}.controls button:not(.icon-btn){padding:8px 15px;font-size:1rem}.difficulty-btn{padding:10px 20px;font-size:1.2rem}}.start-banner{object-fit:contain;border-radius:20px;width:100%;max-width:700px;margin-bottom:20px;box-shadow:0 10px 20px #00000026}.nav-arrow{flex-shrink:0;justify-content:center;align-items:center;height:60px;padding:5px 25px;font-size:2rem;display:flex}@media (width<=768px){.nav-arrow{height:50px;padding:5px 15px;font-size:1.5rem}button.icon-btn{width:50px;height:50px;font-size:1.5rem}}button.icon-btn{border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;padding:0;font-size:2rem;line-height:1;display:flex}.canvas-and-controls-wrapper{flex-direction:column;flex:auto;align-items:center;width:100%;max-width:800px;display:flex;position:relative}.side-controls{flex-direction:row;justify-content:center;gap:15px;margin-top:15px;display:flex}@media (width>=950px){.side-controls{flex-direction:column;margin-top:0;position:absolute;top:50%;left:calc(100% + 20px);transform:translateY(-50%)}}.mascot-container{flex-flow:wrap;justify-content:center;align-items:center;gap:20px;margin-top:0;margin-bottom:10px;display:flex}.mr-garabato-img{object-fit:contain;mix-blend-mode:multiply;width:280px;height:280px}.speech-bubble{color:#444;text-align:center;filter:drop-shadow(0 8px 24px #0000001f);background:#fff;border-radius:35px;padding:20px 40px;font-family:Fredoka,Comic Sans MS,sans-serif;font-size:2.2rem;font-weight:500;position:relative}.speech-bubble:before{content:"";border:15px solid #0000;border-left-width:0;border-right:25px solid #fff;position:absolute;top:50%;left:-20px;transform:translateY(-50%)}@media (width<=600px){.mascot-container{flex-direction:column-reverse}.speech-bubble:before{border-width:25px 15px 0;border-color:#fff #0000 #0000;top:100%;left:50%;transform:translate(-50%)}}.peekaboo-garabato{object-fit:contain;mix-blend-mode:multiply;z-index:1;transform-origin:100%;opacity:0;pointer-events:none;width:280px;height:280px;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .4s ease-out;position:absolute;top:50%;left:0;transform:translateY(-50%)}.peekaboo-garabato.peek-out{opacity:1;transform:translate(-200px,-50%)rotate(-8deg)}