/* Sõnasõber — kolitud digiaed.ee staatiliselt saidilt (2026-10-01).
   GENEREERITUD: kõik reeglid on piiritletud .ss-app alla, et Bulma ja nav ei
   segaks; body külge lisatavad efektid (konfetti, tähed) jäävad piiritlemata.
   Rakenduse pind jääb heledaks ka tumedas teemas (laste mänguline disain). */
.ss-app,.ss-app *{margin:0;padding:0;box-sizing:border-box}
        :root{--pink:#FF6B9D;--blue:#4ECDC4;--yellow:#FFE66D;--purple:#A78BFA;--orange:#FB923C;--green:#34D399;--red:#F87171;--bg:#FFF7ED}
        .ss-app{font-family:'Nunito',sans-serif;background:var(--bg);min-height:calc(100vh - 3.25rem);position:relative;overflow-x:hidden;user-select:none;-webkit-user-select:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23FF6B9D' opacity='.7'/%3E%3Ccircle cx='16' cy='16' r='6' fill='white'/%3E%3C/svg%3E") 16 16, auto}

        .ss-app .floating-shapes{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
        .ss-app .floating-shapes span{position:absolute;font-size:2rem;opacity:0;animation:floatUp 20s linear infinite}
        @keyframes floatUp{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.1}70%{opacity:.1}100%{transform:translateY(10vh) rotate(360deg);opacity:0}}

        .ss-app .screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 3.25rem);padding:20px;position:relative;z-index:1}
        .ss-app .screen.active{display:flex}

        .ss-app .title{font-size:clamp(2.2rem,7vw,4rem);font-weight:900;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;line-height:1.35;margin-bottom:10px;animation:tp 2s ease-in-out infinite}
        /* line-height: Bulma .title 1.125 lõikas background-clip:text-iga suure Õ/Ä märgid ära */
        @keyframes tp{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
        .ss-app .subtitle{font-size:clamp(1rem,2.5vw,1.4rem);color:#9CA3AF;margin-bottom:16px;font-weight:700}

        .ss-app .menu-layout{display:flex;gap:24px;align-items:flex-start;justify-content:center;width:100%;max-width:850px;flex-wrap:wrap}
        .ss-app .menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px;flex:1;min-width:280px}
        .ss-app .menu-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;border:none;border-radius:18px;font-family:'Nunito',sans-serif;font-size:clamp(.95rem,2vw,1.15rem);font-weight:800;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 rgba(0,0,0,.15)}
        .ss-app .menu-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.15)}
        .ss-app .menu-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
        .ss-app .menu-btn .ss-ic{font-size:1.6rem}
        .ss-app .menu-btn.btn-listen{background:linear-gradient(135deg,#FF6B9D,#FF8A80)}
        .ss-app .menu-btn.btn-spell{background:linear-gradient(135deg,#4ECDC4,#45B7AA)}
        .ss-app .menu-btn.btn-read{background:linear-gradient(135deg,#A78BFA,#8B5CF6)}

        .ss-app .level-selector{width:100%;max-width:220px;flex-shrink:0;min-width:180px;background:#fff;border-radius:20px;padding:20px;box-shadow:0 2px 15px rgba(0,0,0,.06)}
        .ss-app .level-label{display:none}
        .ss-app .level-pills{display:flex;flex-direction:column;gap:8px}
        .ss-app .level-pill{padding:10px 16px;border-radius:14px;border:3px solid #E5E7EB;background:#fff;font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;color:#6B7280;cursor:pointer;transition:all .2s;text-align:left}
        .ss-app .level-pill:hover{border-color:var(--blue);color:var(--blue)}
        .ss-app .level-pill.active{border-color:var(--purple);background:var(--purple);color:#fff}

        .ss-app .game-header{width:100%;max-width:700px;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:0 10px}
        .ss-app .back-btn{background:linear-gradient(135deg,#FF6B9D,#FF8A80);border:none;border-radius:16px;width:50px;height:50px;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.15)}
        .ss-app .back-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.15)}
        .ss-app .back-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
        .ss-app .stars-display{display:flex;align-items:center;gap:8px;font-size:1.3rem;font-weight:900;color:var(--orange);background:#fff;padding:8px 20px;border-radius:50px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
        .ss-app .level-badge{background:var(--purple);color:#fff;padding:6px 16px;border-radius:50px;font-size:1rem;font-weight:800}

        .ss-app .progress-bar{width:100%;max-width:700px;height:14px;background:#E5E7EB;border-radius:10px;margin-bottom:25px;overflow:hidden}
        .ss-app .progress-fill{height:100%;border-radius:10px;transition:width .5s;background:linear-gradient(90deg,var(--yellow),var(--orange))}

        .ss-app /* GAME 1 */
        .listen-prompt{text-align:center;margin-bottom:25px}
        .ss-app .listen-prompt p{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700;color:#6B7280;margin-bottom:15px}
        .ss-app .play-sound-btn{width:90px;height:90px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--pink),#FF8A80);color:#fff;font-size:2.8rem;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:all .2s;animation:pulse 2s ease-in-out infinite}
        .ss-app .play-sound-btn:hover{transform:scale(1.1)}
        .ss-app .play-sound-btn:active{transform:scale(.95);box-shadow:0 2px 0 rgba(0,0,0,.15)}
        @keyframes pulse{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 0 0 rgba(255,107,157,.4)}50%{box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 0 15px rgba(255,107,157,0)}}

        .ss-app .word-options{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:100%;max-width:550px}
        .ss-app .word-option{padding:22px 12px;border:4px solid #E5E7EB;border-radius:20px;background:#fff;font-family:'Nunito',sans-serif;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:900;color:#374151;cursor:pointer;transition:all .2s;letter-spacing:2px;text-align:center;word-break:break-word}
        .ss-app .word-option:hover{border-color:var(--blue);transform:scale(1.03);background:#F0FDFA}
        .ss-app .word-option.correct{border-color:var(--green);background:#D1FAE5;color:#065F46;animation:cpop .5s ease}
        .ss-app .word-option.wrong{border-color:var(--red);background:#FEE2E2;color:#991B1B;animation:shake .4s ease}
        @keyframes cpop{0%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.96)}100%{transform:scale(1)}}
        @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}

        .ss-app /* GAME 2 */
        .spell-area{text-align:center;width:100%;max-width:650px}
        .ss-app .spell-prompt{font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:700;color:#6B7280;margin-bottom:8px}
        .ss-app .spell-word-display{min-height:80px;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:20px;flex-wrap:wrap;padding:10px}
        .ss-app .letter-slot{width:clamp(40px,9vw,58px);height:clamp(46px,10vw,63px);border:4px dashed #D1D5DB;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:900;color:var(--purple);background:#fff;transition:all .3s}
        .ss-app .letter-slot.filled{border-style:solid;border-color:var(--purple);background:#EDE9FE;animation:slotPop .3s ease}
        .ss-app .letter-slot.correct-slot{border-color:var(--green);background:#D1FAE5;color:#065F46}
        .ss-app .letter-slot.wrong-slot{border-color:var(--red);background:#FEE2E2;color:#991B1B;animation:shake .4s ease}
        @keyframes slotPop{0%{transform:scale(.8)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

        .ss-app .letter-choices{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
        .ss-app .letter-btn{width:clamp(40px,9vw,55px);height:clamp(46px,10vw,60px);border:3px solid #D1D5DB;border-radius:14px;background:#fff;font-family:'Nunito',sans-serif;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;color:#374151;cursor:pointer;transition:all .2s}
        .ss-app .letter-btn:hover{border-color:var(--blue);background:#F0FDFA;transform:scale(1.08)}
        .ss-app .letter-btn:active{transform:scale(.95)}
        .ss-app .letter-btn.used{opacity:.2;pointer-events:none;transform:scale(.9)}

        .ss-app .spell-controls{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:12px;margin-bottom:8px}
        .ss-app .spell-sound-btn{width:70px;height:70px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--pink),#FF8A80);color:#fff;font-size:2rem;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.15);transition:all .2s;animation:pulse 2s ease-in-out infinite}
        .ss-app .spell-sound-btn:hover{transform:scale(1.1)}
        .ss-app .spell-sound-btn:active{transform:scale(.95);box-shadow:0 2px 0 rgba(0,0,0,.15)}
        .ss-app .spell-undo-btn{width:50px;height:50px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--orange),#F59E0B);color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s;display:flex;align-items:center;justify-content:center}
        .ss-app .spell-undo-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.15)}
        .ss-app .spell-undo-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}

        .ss-app /* GAME 3 */
        .read-area{text-align:center;width:100%;max-width:650px}
        .ss-app .read-prompt{font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:700;color:#6B7280;margin-bottom:20px}
        .ss-app .read-word-display{font-size:clamp(2.5rem,9vw,4.5rem);font-weight:900;color:#374151;letter-spacing:6px;margin-bottom:25px;min-height:90px;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}
        .ss-app .read-letter{display:inline-block;opacity:0;transform:translateY(20px);transition:all .4s ease}
        .ss-app .read-letter.visible{opacity:1;transform:translateY(0)}
        .ss-app .read-letter.highlight{color:var(--pink);transform:translateY(0) scale(1.2)}

        .ss-app .read-controls{display:flex;flex-direction:column;align-items:center;gap:12px}
        .ss-app .big-btn{padding:18px 36px;border:none;border-radius:20px;color:#fff;font-family:'Nunito',sans-serif;font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:800;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.15);transition:all .2s;display:flex;align-items:center;gap:10px}
        .ss-app .big-btn:hover{transform:translateY(-2px)}
        .ss-app .big-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
        .ss-app .btn-purple{background:linear-gradient(135deg,var(--purple),#8B5CF6)}
        .ss-app .btn-green{background:linear-gradient(135deg,var(--green),#10B981)}

        .ss-app .read-rating{animation:slotPop .35s ease}
        .ss-app .read-rating-q{font-size:clamp(1.1rem,2.8vw,1.4rem);font-weight:800;color:#6B7280;margin-bottom:12px}
        .ss-app .read-rating-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
        .ss-app .rate-btn{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;padding:14px 18px;border:none;border-radius:18px;font-family:'Nunito',sans-serif;font-size:clamp(.95rem,2.2vw,1.1rem);font-weight:800;color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s}
        .ss-app .rate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.15)}
        .ss-app .rate-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
        .ss-app .rate-btn .rate-emoji{font-size:1.9rem}
        .ss-app .rate-good{background:linear-gradient(135deg,var(--green),#10B981)}
        .ss-app .rate-ok{background:linear-gradient(135deg,var(--blue),#45B7AA)}
        .ss-app .rate-hard{background:linear-gradient(135deg,var(--orange),#F59E0B)}

        .ss-app .level-up-banner{position:fixed;top:0;left:0;width:100%;padding:20px;text-align:center;z-index:50;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:1.5rem;font-weight:900;transform:translateY(-100%);transition:transform .5s ease}
        .ss-app .level-up-banner.show{transform:translateY(0)}

        .ss-app .celebration{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:100;background:rgba(0,0,0,.3)}
        .ss-app .celebration.active{display:flex}
        .ss-app .celebration-card{background:#fff;border-radius:30px;padding:35px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:celebPop .5s ease;max-width:420px;width:90%}
        @keyframes celebPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
        .ss-app .celeb-emoji{font-size:3.5rem;margin-bottom:10px}
        .ss-app .celeb-title{font-size:1.8rem;font-weight:900;color:var(--purple);margin-bottom:8px}
        .ss-app .celeb-stats{font-size:1.1rem;color:#6B7280;margin-bottom:20px;font-weight:700}
        .ss-app .celeb-stars{font-size:1.4rem;color:var(--orange);margin-bottom:15px}
        .ss-app .celeb-btn{padding:14px 30px;border:none;border-radius:18px;color:#fff;font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s;margin:4px}
        .ss-app .celeb-btn:hover{transform:translateY(-2px)}
        .ss-app .celeb-btn.primary{background:linear-gradient(135deg,var(--green),#10B981)}
        .ss-app .celeb-btn.secondary{background:linear-gradient(135deg,var(--pink),#FF8A80)}
        .ss-app .celeb-btn.tertiary{background:linear-gradient(135deg,#9CA3AF,#6B7280)}
        .ss-app .celeb-btn.favorite{background:linear-gradient(135deg,var(--purple),var(--pink));display:block;width:100%;margin:0 auto 14px}

        .ss-app /* FAVOURITE WORD */
        .fav-prompt{font-size:clamp(1.1rem,2.8vw,1.5rem);font-weight:800;color:#6B7280;margin-bottom:18px;text-align:center;padding:0 14px}
        .ss-app .fav-word{font-size:clamp(2rem,7vw,3rem);font-weight:900;letter-spacing:6px;color:var(--purple);margin-bottom:14px;text-align:center}
        .ss-app #favDrawCanvas{position:relative;cursor:crosshair}

        .confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;z-index:200;pointer-events:none;animation:cfall 2s ease-out forwards}
        @keyframes cfall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
        .star-burst{position:fixed;font-size:2rem;z-index:150;pointer-events:none;animation:sburst .8s ease-out forwards}
        @keyframes sburst{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(180deg);opacity:1}100%{transform:scale(0) rotate(360deg) translateY(-50px);opacity:0}}

        .fly-star{position:fixed;font-size:1.8rem;z-index:160;pointer-events:none}
        @keyframes flyToCounter{0%{transform:scale(1.5);opacity:1}100%{transform:scale(.5);opacity:0}}

        .ss-app /* GAME 4: TRACE */
        .menu-btn.btn-trace{background:linear-gradient(135deg,#FB923C,#F59E0B)}
        .ss-app .trace-area{text-align:center;width:100%;max-width:650px}
        .ss-app .trace-prompt{font-size:clamp(1rem,2.5vw,1.2rem);font-weight:700;color:#6B7280;margin-bottom:6px}
        .ss-app .trace-target{font-size:1.6rem;font-weight:900;color:var(--purple);margin-bottom:6px;letter-spacing:4px}
        .ss-app .trace-target .done{color:var(--green)}
        .ss-app .trace-target .current{color:var(--orange);text-decoration:underline;text-underline-offset:6px}
        .ss-app .trace-target .pending{color:#D1D5DB}
        .ss-app .canvas-wrap{position:relative;display:inline-block;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);background:#fff;touch-action:none}
        .ss-app .canvas-wrap canvas{display:block;position:absolute;top:0;left:0}
        .ss-app .canvas-wrap .guide-canvas{position:relative}
        .ss-app .canvas-wrap .draw-canvas{opacity:.55}
        .ss-app .trace-controls{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:8px}
        .ss-app .trace-clear-btn{width:50px;height:50px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--red),#EF4444);color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s;display:flex;align-items:center;justify-content:center}
        .ss-app .trace-clear-btn:hover{transform:translateY(-2px)}
        .ss-app .trace-clear-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
        .ss-app .trace-done-btn{padding:14px 32px;border:none;border-radius:18px;background:linear-gradient(135deg,var(--green),#10B981);color:#fff;font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s;display:flex;align-items:center;gap:8px}
        .ss-app .trace-done-btn:hover{transform:translateY(-2px)}
        .ss-app .trace-done-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
        .ss-app .trace-prompt.feedback-good{color:#10B981 !important;font-weight:900}
        .ss-app .trace-prompt.feedback-bad{color:#F87171 !important;font-weight:900}

        .ss-app /* GAME 5: MISSING LETTER */
        .menu-btn.btn-missing{background:linear-gradient(135deg,#F472B6,#EC4899)}
        .ss-app .missing-area{text-align:center;width:100%;max-width:550px}
        .ss-app .missing-word{font-size:clamp(2.2rem,7vw,3.5rem);font-weight:900;color:#374151;letter-spacing:6px;margin-bottom:20px;min-height:60px}
        .ss-app .missing-word .gap{color:var(--pink);padding:0 2px;min-width:30px;display:inline-block}
        .ss-app .missing-listen{margin-bottom:20px}
        .ss-app .letter-options{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
        .ss-app .letter-opt{width:clamp(55px,13vw,70px);height:clamp(60px,14vw,75px);border:4px solid #E5E7EB;border-radius:18px;background:#fff;font-family:'Nunito',sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;color:#374151;cursor:pointer;transition:all .2s}
        .ss-app .letter-opt:hover{border-color:var(--blue);transform:scale(1.08);background:#F0FDFA}
        .ss-app .letter-opt.correct{border-color:var(--green);background:#D1FAE5;color:#065F46;animation:cpop .5s ease}
        .ss-app .letter-opt.wrong{border-color:var(--red);background:#FEE2E2;color:#991B1B;animation:shake .4s ease}

        .ss-app /* GAME 6: SYLLABLES */
        .menu-btn.btn-syllable{background:linear-gradient(135deg,#06B6D4,#0891B2)}
        .ss-app .syllable-area{text-align:center;width:100%;max-width:600px}
        .ss-app .syllable-prompt{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:700;color:#6B7280;margin-bottom:12px}
        .ss-app .syllable-built{min-height:65px;display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:16px;flex-wrap:wrap}
        .ss-app .syllable-slot{padding:12px 18px;border:4px dashed #D1D5DB;border-radius:16px;font-family:'Nunito',sans-serif;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:900;color:var(--purple);background:#fff;min-width:50px;transition:all .3s}
        .ss-app .syllable-slot.filled{border-style:solid;border-color:var(--purple);background:#EDE9FE;animation:slotPop .3s ease}
        .ss-app .syllable-slot.correct-slot{border-color:var(--green);background:#D1FAE5;color:#065F46}
        .ss-app .syllable-slot.wrong-slot{border-color:var(--red);background:#FEE2E2;color:#991B1B;animation:shake .4s ease}
        .ss-app .syllable-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
        .ss-app .syllable-btn{padding:12px 20px;border:3px solid #D1D5DB;border-radius:16px;background:#fff;font-family:'Nunito',sans-serif;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;color:#374151;cursor:pointer;transition:all .2s}
        .ss-app .syllable-btn:hover{border-color:var(--blue);background:#F0FDFA;transform:scale(1.06)}
        .ss-app .syllable-btn:active{transform:scale(.95)}
        .ss-app .syllable-btn.used{opacity:.2;pointer-events:none;transform:scale(.9)}
        .ss-app .syllable-controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:12px}

        .ss-app /* MASCOT + COLLECTION */
        .menu-btn.btn-sound{background:linear-gradient(135deg,#6366F1,#8B5CF6)}
        .ss-app .mascot-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 18px;max-width:560px}
        .ss-app .mascot{font-size:2.6rem;cursor:pointer;animation:bob 2.5s ease-in-out infinite;user-select:none;line-height:1}
        @keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
        .ss-app .mascot-bubble{background:#fff;border:3px solid var(--purple);color:#5B21B6;font-weight:800;padding:8px 16px;border-radius:18px;font-size:clamp(.85rem,2.2vw,1rem);box-shadow:0 3px 10px rgba(0,0,0,.08);max-width:240px}
        .ss-app .collection-btn{background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#fff;border:none;border-radius:50px;padding:10px 18px;font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(.85rem,2.2vw,1rem);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:all .2s}
        .ss-app .collection-btn:hover{transform:translateY(-2px)}
        .ss-app .collection-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
        .ss-app .collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px;max-width:560px;margin:0 auto;padding:0 6px;width:100%}
        .ss-app .collect-item{background:#fff;border-radius:18px;padding:12px 6px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.07);transition:transform .2s}
        .ss-app .collect-item.has{animation:slotPop .4s ease}
        .ss-app .collect-item .ci-emoji{font-size:2.4rem;line-height:1.1;display:block}
        .ss-app .collect-item .ci-name{font-size:.8rem;font-weight:800;color:#6B7280;margin-top:4px}
        .ss-app .collect-item.locked{filter:grayscale(1);opacity:.45}
        .ss-app .collect-item.locked .ci-emoji{filter:blur(1px)}
        .ss-app .celeb-newfriend{font-weight:900;color:#B45309;background:#FEF3C7;border-radius:16px;padding:10px 14px;margin-bottom:14px;font-size:1.05rem;display:none}
        .ss-app .celeb-advice{font-weight:800;color:#5B21B6;background:#EDE9FE;border-radius:16px;padding:9px 14px;margin-bottom:12px;font-size:.98rem;display:none}

        .ss-app /* SOUND HUNT */
        .sound-area{width:100%;max-width:560px;margin:0 auto;text-align:center}
        .ss-app .sound-prompt{font-size:clamp(1rem,2.6vw,1.3rem);font-weight:800;color:#6B7280;margin-bottom:10px;padding:0 12px}
        .ss-app .sound-target{width:90px;height:90px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:3.2rem;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 rgba(0,0,0,.15);text-transform:uppercase}
        .ss-app .sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 6px}
        .ss-app .sound-card{background:#fff;border:4px solid #E5E7EB;border-radius:18px;padding:16px 8px;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:900;color:#374151;cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif}
        .ss-app .sound-card:hover{border-color:var(--blue);background:#F0FDFA}
        .ss-app .sound-card.found{border-color:var(--green);background:#D1FAE5;color:#065F46;cursor:default;animation:cpop .5s ease}
        .ss-app .sound-card.wrong{animation:shake .4s ease}
        @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

        .ss-app /* UPPERCASE MODE (trükitähed) */
        .case-toggle{position:fixed;right:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:2px;border:none;border-radius:50px;background:#fff;padding:8px 10px;font-family:'Nunito',sans-serif;font-weight:900;font-size:1rem;color:#9CA3AF;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.15);transition:all .2s}
        .ss-app .case-toggle:hover{transform:translateY(-2px)}
        .ss-app .case-toggle:active{transform:translateY(1px)}
        .ss-app .case-toggle span{padding:3px 9px;border-radius:50px;transition:all .2s}
        .ss-app .case-toggle span.on{background:var(--purple);color:#fff}
        .ss-app.uc,.ss-app.uc button{text-transform:uppercase}
        .ss-app.uc .case-toggle{text-transform:none}

        @media(max-width:500px){.ss-app .word-options{grid-template-columns:1fr}.ss-app .menu-btn{padding:15px 20px}.ss-app .case-toggle{right:8px;bottom:8px;font-size:.85rem;padding:6px 8px}}
.ss-app button.mascot{background:none;border:none;font-family:inherit;color:inherit}
.ss-app button.mascot:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:12px}

/* ---------- Häälega juhised: juhise kordusnupp lause ees ---------- */
.ss-app .ss-hint-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ss-app .ss-hint-row p{margin-bottom:0}
.ss-app .ss-hint-btn{flex:none;width:42px;height:42px;border:none;border-radius:50%;background:#fff;color:#5B21B6;font-size:1.25rem;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.ss-app .ss-hint-btn:hover{transform:scale(1.08)}
.ss-app .ss-hint-btn:focus-visible,.ss-app .profile-chip:focus-visible,.ss-app .pic-option:focus-visible,.ss-app .avatar-btn:focus-visible,.ss-app .profile-tile:focus-visible,.ss-app .sound-target:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

/* ---------- Häälikujaht: täht on nupp (kordab näidissõna), vale kaart jääb märgituks ---------- */
.ss-app button.sound-target{border:none;cursor:pointer;font-family:'Nunito',sans-serif}
.ss-app .sound-card.wrong{border-color:var(--red);background:#FEE2E2;color:#991B1B;cursor:default}

/* ---------- Loe ja leia pilt ---------- */
.ss-app .menu-btn.btn-picture{background:linear-gradient(135deg,#10B981,#059669)}
.ss-app .picture-area{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px}
.ss-app .picture-word{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:900;color:#374151;letter-spacing:3px;background:#fff;border-radius:22px;padding:10px 28px;margin:6px 0 18px;box-shadow:0 4px 14px rgba(0,0,0,.08);text-align:center;word-break:break-word;max-width:100%}
.ss-app .picture-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:440px}
.ss-app .pic-option{aspect-ratio:1/1;background:#fff;border:4px solid #E5E7EB;border-radius:22px;padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 4px 0 rgba(0,0,0,.08);-webkit-tap-highlight-color:transparent}
.ss-app .pic-option:hover{border-color:var(--blue);transform:scale(1.03)}
.ss-app .pic-option.correct{border-color:var(--green);background:#D1FAE5;animation:cpop .5s ease}
.ss-app .pic-option.wrong{border-color:var(--red);background:#FEE2E2;animation:shake .4s ease;opacity:.6}
.ss-app .pic-option .sv-pilt{width:100%;height:100%;pointer-events:none}
.ss-app .pic-option .sv-pilt img{max-width:100%;max-height:100%;object-fit:contain}
.ss-app .pic-option .sv-varv,.ss-app .pic-option .sv-muster{width:66%;height:66%;border:1px solid #D1D5DB}
/* Tuba = mitu sümbolit: read peavad olema kindla kõrgusega, muidu ei piira img
   protsentkõrgus midagi ja esemed voolavad ruudust välja. */
.ss-app .pic-option{overflow:hidden}
.ss-app .pic-option .sv-ruum{width:92%;height:92%;grid-template-rows:55% 45%;min-height:0}
.ss-app .pic-option .sv-ruum img,.ss-app .pic-option .sv-ruum img:first-child{max-height:100%;max-width:100%;min-height:0;object-fit:contain}
.ss-app .pic-option .sv-arv{font-size:clamp(3rem,14vw,5rem);color:#374151}
.ss-app .pic-option .sv-pliiatsid{width:55%;height:72%}

/* ---------- Laste profiilid ---------- */
.ss-app .profile-chip{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--purple);border-radius:50px;padding:4px 14px 4px 8px;font-family:'Nunito',sans-serif;font-weight:800;color:#5B21B6;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.08);max-width:200px}
.ss-app .profile-chip #profileChipAvatar{font-size:1.8rem;line-height:1}
.ss-app .profile-chip #profileChipName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.ss-app .profile-chip #profileChipName:empty{display:none}
.ss-app .profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;width:100%;max-width:720px;margin:10px 0 18px}
.ss-app .profile-tile-wrap{position:relative}
.ss-app .profile-tile{width:100%;background:#fff;border:4px solid #E5E7EB;border-radius:22px;padding:14px 6px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:'Nunito',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.08);transition:transform .2s,border-color .2s}
.ss-app .profile-tile:hover{transform:translateY(-2px);border-color:var(--blue)}
.ss-app .profile-tile.active{border-color:var(--purple)}
.ss-app .profile-avatar{font-size:3.2rem;line-height:1.1}
.ss-app .profile-name{font-weight:800;color:#374151;font-size:1rem;min-height:1.3em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.ss-app .profile-del{position:absolute;top:-8px;right:-8px;width:34px;height:34px;border-radius:50%;border:none;background:#DC2626;color:#fff;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ss-app .profile-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ss-app .profile-action-btn{border:none;border-radius:18px;padding:12px 22px;font-family:'Nunito',sans-serif;font-weight:800;font-size:1.05rem;cursor:pointer;color:#fff;background:linear-gradient(135deg,#6B7280,#4B5563);box-shadow:0 4px 0 rgba(0,0,0,.15);text-transform:none}
.ss-app .profile-action-btn.add{background:linear-gradient(135deg,#059669,#047857)}
.ss-app .profile-note{margin-top:16px;color:#6B7280;font-weight:700;font-size:.9rem;text-align:center;text-transform:none}
.ss-app .avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;width:100%;max-width:560px;margin-bottom:18px}
.ss-app .avatar-btn{aspect-ratio:1/1;font-size:2.2rem;background:#fff;color:#374151;border:4px solid #E5E7EB;border-radius:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s}
.ss-app .avatar-btn:hover:not(:disabled){transform:scale(1.08)}
.ss-app .avatar-btn.chosen{border-color:var(--purple);background:#EDE9FE;transform:scale(1.08)}
.ss-app .avatar-btn:disabled{opacity:.25;cursor:default;filter:grayscale(1)}
.ss-app .profile-name-label{font-weight:800;color:#4B5563;margin-bottom:6px;text-transform:none}
.ss-app .profile-name-input{width:100%;max-width:300px;padding:12px 16px;border:3px solid #E5E7EB;border-radius:16px;background:#fff;color:#374151;font-family:'Nunito',sans-serif;font-size:1.2rem;font-weight:800;text-align:center;margin-bottom:16px;user-select:text;-webkit-user-select:text}
.ss-app .profile-name-input:focus{outline:none;border-color:var(--purple)}
.ss-app #profileCreateBtn:disabled{opacity:.45;cursor:default;transform:none}
/* Kitsal ekraanil ikoon teksti kohale: suurtähtedes „HÄÄLIKUJAHT" ei mahtunud kõrvuti ikooniga
   poolde 360 px ekraani ja nupurida voolas paremalt üle. */
.ss-app .menu-btn{min-width:0}
@media(max-width:500px){.ss-app .menu-buttons{min-width:0;flex:1 1 100%}.ss-app .menu-btn{flex-direction:column;gap:4px;padding:12px 8px;text-align:center;justify-content:center;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}.ss-app .menu-btn .ss-ic{font-size:1.5rem}}
@media(max-width:500px){.ss-app .profile-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.ss-app .profile-avatar{font-size:2.6rem}.ss-app .picture-options{gap:10px}}
/* Uus sõber: otsetee lõpuekraanilt sõprade juurde; albumis tõuseb uus sõber esile. */
.ss-app .celeb-btn.friends{background:linear-gradient(135deg,#D97706,#C2410C);display:block;width:100%;margin:0 auto 10px}
.ss-app .collect-item.new{outline:4px solid var(--yellow);box-shadow:0 0 0 8px rgba(255,230,109,.35),0 3px 10px rgba(0,0,0,.07);animation:newFriend 1.2s ease 2}
@keyframes newFriend{0%,100%{transform:scale(1)}40%{transform:scale(1.15) rotate(-4deg)}70%{transform:scale(1.05) rotate(3deg)}}
/* Täht sõnas ütleb puudutusel oma hääliku. cursor:pointer on iOS-is vajalik, muidu
   ei jõua puudutus span-ilt delegeeritud click-käsitlejani. */
.ss-app [data-snd]{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.ss-app .collect-item.new{animation:none}}
/* Pildiallikate viide (CC BY-SA nõuab) — pildimängu all, märkamatult. */
.ss-app .ss-credit,.ss-app.uc .ss-credit{text-transform:none}
.ss-app .ss-credit{font-size:.7rem;color:#6B7280;text-align:center;margin-top:16px;padding:0 8px;line-height:1.4}
.ss-app .ss-credit a{color:inherit;text-decoration:underline}
/* Tähestik: täishäälikud punased, kaashäälikud sinised (aabitsa tava); valge tekst
   600-tooni peal on kontrastiga >= 4.5. Tähe puudutus = lühike põrge (snd-pop). */
.ss-app .collection-btn.abc-menu-btn{background:linear-gradient(135deg,#2563EB,#7C3AED)}
.ss-app .abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;width:100%;max-width:620px;margin-top:8px}
.ss-app .abc-btn{aspect-ratio:1;border:none;border-radius:18px;font-family:'Nunito',sans-serif;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:900;color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .15s}
.ss-app .abc-btn.vowel{background:#E11D48}
.ss-app .abc-btn.consonant{background:#2563EB}
.ss-app .abc-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.ss-app .abc-btn:disabled{opacity:.35;cursor:default}
.ss-app .abc-btn:focus-visible{outline:4px solid var(--yellow);outline-offset:2px}
.ss-app .snd-pop{animation:sndPop .35s ease}
@keyframes sndPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ss-app .snd-pop{animation:none}}
@media(max-width:500px){.ss-app .abc-grid{grid-template-columns:repeat(4,1fr);gap:8px}}
/* Rühmad: profiilivaliku kohal rühma vahetamise kiip; rühmapaanil laste arv. */
.ss-app .group-chip{background:#fff;border:3px solid var(--blue);border-radius:50px;padding:6px 16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;color:#0F766E;cursor:pointer;margin:2px 0 6px;text-transform:none;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.ss-app .group-chip:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.ss-app .group-count{font-size:.8rem;font-weight:700;color:#6B7280;text-transform:none}
.ss-app #groupGrid .profile-name{white-space:normal;line-height:1.15;overflow-wrap:anywhere}   /* „Mesimummid" ei lõiku */
/* Sõbrad: teenitud sõber on nupp; kaaslane märgitud kuldse äärise ja 🤝-ga. */
.ss-app button.collect-item{border:none;font-family:'Nunito',sans-serif;cursor:pointer;width:100%}
.ss-app button.collect-item:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.ss-app .collect-item.comp{box-shadow:0 0 0 4px #F59E0B,0 3px 10px rgba(0,0,0,.07);position:relative}
.ss-app .collect-item.comp::after{content:'🤝';position:absolute;top:-10px;right:-6px;font-size:1.2rem}
/* Kaaslane: menüüs öökulli asemel, mängudes vasakus alanurgas; rõõmustab tähe peale. */
.ss-app .menu-companion{font-size:2.4rem;line-height:1;background:none;border:none;cursor:pointer;padding:0;animation:bob 2.8s ease-in-out infinite}
.ss-app .companion-float{position:fixed;left:10px;bottom:10px;z-index:5;font-size:2.4rem;line-height:1;display:none;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.ss-app .companion-float.on{display:block}
.ss-app .companion-float.cheer{animation:compCheer .7s ease}
@keyframes compCheer{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-22px) rotate(-12deg) scale(1.2)}60%{transform:translateY(0) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}
/* Automaatne raskus: valikunupp + jooksev tase (punktiiriga) + märguanne tasememuutusel. */
.ss-app .level-pill.level-pill-auto{border-style:dashed}
.ss-app .level-pill.current{border-color:var(--purple);border-style:dashed;color:#5B21B6}
.ss-app .lvl-change{animation:lvlChange .9s ease}
@keyframes lvlChange{0%,100%{transform:scale(1)}30%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(167,139,250,.35)}}
@media (prefers-reduced-motion:reduce){.ss-app .companion-float.cheer,.ss-app .lvl-change,.ss-app .menu-companion{animation:none}}

/* Sõbra tuba (toida / pese / kammi / mängi / magama). Pind jääb heledaks ka tumedas
   teemas nagu muu rakendus — värvid on siin kõik selgesõnalised. Nuppude taust on
   700-toon, valge tekst >= 4.5 kontrastiga. */
.ss-app .menu-companion{position:relative}
.ss-app .menu-companion[data-need]:not([data-need=""]){margin-right:10px}
/* Menüü mull on nupp: puudutus loeb lause ette (öökulli või kaaslase oma). */
.ss-app button.mascot-bubble{font-family:'Nunito',sans-serif;cursor:pointer;line-height:1.3;text-align:center}
.ss-app button.mascot-bubble:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.ss-app .menu-companion[data-need]:not([data-need=""])::after{content:attr(data-need);position:absolute;top:-8px;right:-14px;font-size:1rem;line-height:1;background:#fff;border-radius:50%;padding:5px;box-shadow:0 2px 6px rgba(0,0,0,.18);animation:needPulse 1.6s ease-in-out infinite}
@keyframes needPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ss-app .pet-treats{min-width:50px;background:#fff;color:#92400E;border-radius:50px;padding:6px 12px;font-weight:900;font-size:1.05rem;box-shadow:0 2px 8px rgba(0,0,0,.1);white-space:nowrap;text-align:center}
.ss-app .pet-treats.shake{animation:shake .4s ease}
.ss-app #petScreen .ss-hint-row{width:100%;max-width:520px;flex-wrap:nowrap}
.ss-app .pet-meters{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ss-app .pet-meter{display:flex;align-items:center;gap:5px;background:#fff;border-radius:14px;padding:6px 8px;box-shadow:0 2px 8px rgba(0,0,0,.07);min-width:0}
.ss-app .pm-ic{font-size:1.15rem;line-height:1;flex:none}
.ss-app .pm-bar{flex:1;min-width:16px;height:10px;background:#E5E7EB;border-radius:6px;overflow:hidden}
.ss-app .pm-fill{display:block;height:100%;border-radius:6px;transition:width .6s ease}
.ss-app .pm-fill.hi{background:#10B981}.ss-app .pm-fill.mid{background:#FBBF24}.ss-app .pm-fill.lo{background:#F97316}
.ss-app .pet-stage{position:relative;width:100%;max-width:520px;height:clamp(230px,42vh,360px);margin:8px 0 14px;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(#E0F2FE 0 66%,#FDE7C7 66% 100%);box-shadow:0 4px 16px rgba(0,0,0,.08);transition:background .8s ease}
.ss-app .pet-stage.night{background:linear-gradient(#1E1B4B 0 66%,#312E81 66% 100%)}
.ss-app .pet-stage.night::before{content:'🌙 ✨';position:absolute;top:14px;right:20px;font-size:1.8rem}
.ss-app .pet-stage.night::after{content:'💤';position:absolute;left:60%;top:30%;font-size:2.4rem;animation:petZzz 2s ease-in-out infinite}
@keyframes petZzz{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-12px);opacity:1}}
.ss-app .pet-stage[data-mode="wash"],.ss-app .pet-stage[data-mode="comb"]{touch-action:none}
.ss-app .pet-stage[data-mode="wash"] .pet-animal,.ss-app .pet-stage[data-mode="comb"] .pet-animal{cursor:grab}
.ss-app .pet-animal{font-size:clamp(6rem,30vw,9.5rem);line-height:1.1;background:none;border:none;padding:0 12px;cursor:pointer;font-family:inherit;transform-origin:50% 90%;animation:petIdle 3.2s ease-in-out infinite;position:relative;z-index:2;filter:drop-shadow(0 8px 6px rgba(0,0,0,.15))}
.ss-app .pet-animal:focus-visible,.ss-app .pet-ball:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:20px}
@keyframes petIdle{0%,100%{transform:scale(1)}50%{transform:scale(1.04,.97)}}
.ss-app .pet-animal.wiggle{animation:petWiggle .5s ease}
@keyframes petWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.ss-app .pet-animal.jump{animation:petJump .5s ease}
@keyframes petJump{0%,100%{transform:translateY(0)}40%{transform:translateY(-22%)}}
.ss-app .pet-animal.chomp{animation:petChomp .25s ease 3}
@keyframes petChomp{50%{transform:scale(1.12,.9)}}
.ss-app .pet-animal.sleeping{animation:none;transform:rotate(-10deg) scale(.95);filter:brightness(.8) drop-shadow(0 8px 6px rgba(0,0,0,.25))}
.ss-app .pet-need{position:absolute;top:9%;left:64%;z-index:3;width:54px;height:54px;border-radius:50%;background:#fff;font-size:1.7rem;display:none;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.15);animation:needPulse 1.6s ease-in-out infinite}
.ss-app .pet-need.on{display:flex}
.ss-app .pet-stage.night .pet-need,.ss-app .pet-stage[data-mode]:not([data-mode=""]) .pet-need{display:none}
.ss-app .pet-ball{position:absolute;z-index:3;display:none;font-size:2.8rem;line-height:1;background:none;border:none;padding:6px;cursor:pointer;transition:left .4s ease,top .4s ease;animation:petBall 1s ease-in-out infinite}
.ss-app .pet-ball.on{display:block}
@keyframes petBall{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ss-app .pet-progress{position:absolute;left:20%;right:20%;bottom:12px;z-index:3;height:12px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.12);display:none}
.ss-app .pet-progress.on{display:block}
.ss-app .pet-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#4ECDC4,#10B981);transition:width .2s ease}
.ss-app .pet-fx{position:absolute;z-index:4;pointer-events:none;font-size:1.6rem;line-height:1;transform:translate(-50%,-50%);animation:petFx 1s ease-out forwards}
@keyframes petFx{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-170%) scale(1.25)}}
.ss-app .pet-fx.pet-bubble{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0 18%,rgba(186,230,253,.75) 45%,rgba(125,211,252,.45));border:2px solid rgba(255,255,255,.95);box-shadow:0 1px 3px rgba(2,132,199,.3)}
.ss-app .pet-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;max-width:520px}
.ss-app .pet-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:10px 4px;border:none;border-radius:18px;color:#fff;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .15s ease;overflow-wrap:anywhere}
.ss-app .pet-act .pet-ic{font-size:1.8rem;line-height:1;display:flex}
.ss-app .pet-act:hover{transform:translateY(-2px)}
.ss-app .pet-act:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.ss-app .pet-act:focus-visible{outline:3px solid #111827;outline-offset:2px}
.ss-app .pet-act.active{outline:4px solid #FACC15;outline-offset:2px;transform:translateY(-2px)}
.ss-app .act-feed{background:#B91C1C}.ss-app .act-wash{background:#0369A1}.ss-app .act-comb{background:#7E22CE}
.ss-app .act-play{background:#15803D}.ss-app .act-sleep{background:#4338CA}
.ss-app .act-comb .pet-ic{color:#FDE68A}
.ss-app #petScreen.busy .pet-act{opacity:.5;pointer-events:none}
.ss-app .pet-feed{display:none;flex-direction:column;align-items:center;width:100%;max-width:520px}
.ss-app #petScreen.feeding .pet-feed{display:flex}
.ss-app #petScreen.feeding .pet-actions{display:none}
.ss-app #petScreen.feeding .pet-stage{height:clamp(170px,28vh,250px)}
.ss-app #petScreen.feeding .pet-animal{font-size:clamp(5rem,22vw,7.5rem)}
.ss-app .pet-feed .spell-prompt{margin-bottom:0}
.ss-app .pet-feed .picture-word{margin:4px 0 12px;font-size:clamp(2rem,7vw,3rem)}
.ss-app .pet-feed-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-bottom:12px}
.ss-app .pet-feed-close{padding:10px 22px;font-size:1rem}
.ss-app .pet-fly{position:fixed;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),width .7s ease,height .7s ease,opacity .7s ease}
.ss-app .pet-fly .sv-pilt{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ss-app .pet-fly .sv-pilt img{max-width:100%;max-height:100%;object-fit:contain}
.ss-app .celeb-treats{font-weight:800;color:#92400E;margin:-4px 0 12px;font-size:1rem;text-transform:none}
.ss-app .celeb-btn.pet{background:linear-gradient(135deg,#0369A1,#4338CA);display:block;width:100%;margin:0 auto 10px}
/* Pikk kaart (uus sõber + maiuspalad + nupud) ei mahu telefoni kõrgusesse: ülekate
   keritav, kaart keskel ainult siis, kui ruumi on (margin:auto, mitte align-items:center —
   viimane lõikab ülevoolu korral kaardi ülaosa kättesaamatuks). */
.ss-app .celebration{align-items:flex-start;overflow-y:auto;padding:12px 0;overscroll-behavior:contain}
.ss-app .celebration-card{margin:auto}
@media(max-width:500px){.ss-app .celebration-card{padding:22px 18px}.ss-app .celeb-emoji{font-size:2.6rem;margin-bottom:4px}}
@media(max-width:500px){
  .ss-app .pet-meters{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ss-app .pet-meter{padding:5px 7px}
  .ss-app .pet-actions{gap:5px}
  .ss-app .pet-act{font-size:.7rem;padding:9px 1px;border-radius:14px;overflow-wrap:normal;letter-spacing:-.01em}
  .ss-app .pet-act .pet-ic{font-size:1.5rem}
  .ss-app .pet-feed-options{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .ss-app .pet-animal,.ss-app .pet-ball,.ss-app .pet-need,.ss-app .menu-companion[data-need]::after,.ss-app .pet-stage.night::after{animation:none}
  .ss-app .pet-animal.wiggle,.ss-app .pet-animal.jump,.ss-app .pet-animal.chomp,.ss-app .pet-fx{animation:none}
}