:root{--primary: #ff6faa;--secondary: #90caf9;--accent: #ffe8a9;--background: #fff9fd;--card: #ffffffd9;--text: #5a4f6d;--success: #a3e635;--warning: #fbbf24;--danger: #f87171;--font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;--card-radius: 28px;--btn-radius: 50px;--shadow-sm: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-md: 0 16px 24px -8px rgb(255 112 167 / .28);--kenny-blue: url(/assets/kenny/btn-blue.png);--kenny-yellow: url(/assets/kenny/btn-yellow.png);--kenny-green: url(/assets/kenny/btn-green.png);--kenny-red: url(/assets/kenny/btn-red.png)}@keyframes drawStroke{to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes popUp{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes sparkleBurst{0%{transform:translateY(8px) scale(.8);opacity:0}to{transform:translateY(-16px) scale(1.1);opacity:1}}@font-face{font-family:Zen Maru Gothic;src:url(https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Zen Maru Gothic,Nunito,"M PLUS Rounded 1c",sans-serif;background:radial-gradient(circle at 15% 20%,#fff1f8,#fff9fd 45%,#f7f4ff);color:var(--text);overflow:hidden;height:100vh;width:100vw;-webkit-user-select:none;user-select:none}#app{width:100%;height:100%;padding-bottom:env(safe-area-inset-bottom)}.screen{width:100%;height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:8px;padding:20px;transition:opacity .3s ease}.mascot{pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.275);font-size:78px}.mascot.bounce{animation:bounce 2s infinite ease-in-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.btn-cute{background-color:transparent;background-image:var(--kenny-blue);background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:none;border-radius:var(--btn-radius);padding:18px 28px;font-size:clamp(18px,2.6vw,24px);font-weight:700;color:#2e5f95;text-shadow:0 1px 0 #fff;box-shadow:0 8px 14px -8px #366ca555;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .2s ease;touch-action:manipulation}.btn-cute:hover{filter:brightness(1.04)}.btn-cute:active{transform:translateY(3px) scale(.98);box-shadow:0 3px 8px -6px #366ca555}.btn-cute.primary{background-image:var(--kenny-yellow);color:#8a4f0a;box-shadow:0 8px 14px -8px #a66d1f55}.btn-cute.primary:active{box-shadow:0 3px 8px -6px #a66d1f55}.btn-cute.kenny-next{background-image:var(--kenny-green);color:#2d6c30}.btn-cute:disabled{background-image:var(--kenny-red);color:#924646;filter:grayscale(.2);cursor:not-allowed;opacity:.75}.xp-badge{position:absolute;top:18px;right:20px;background:#fffdf3;border:3px solid var(--warning);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:var(--shadow-sm);z-index:100}.xp-badge .star{color:var(--warning)}.xp-pop{animation:popUp .45s ease}.sound-toggle{position:absolute;top:18px;right:160px;border:3px solid #8ac4ff;background:#f1f9ff;color:#366ca5;border-radius:999px;padding:8px 12px;font-size:15px;font-weight:700;z-index:101}.canvas-wrapper{background:#fff;border:8px solid var(--accent);border-radius:var(--card-radius);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.practice-header{display:flex;gap:20px;align-items:center;margin-bottom:18px;flex-wrap:wrap;justify-content:center}.mode-selector{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;justify-content:center}.select-grid{display:grid;grid-template-columns:repeat(5,minmax(64px,1fr));gap:14px;width:100%;padding:12px}.select-sections{width:min(820px,95vw);max-height:min(58vh,640px);overflow-y:auto;padding:14px;background:var(--card);border:3px solid #ffd2ea;border-radius:24px}.select-group{margin-bottom:10px}.select-group-title{font-size:20px;color:#9f4f7a;padding:4px 12px 2px}.char-card{position:relative;min-height:88px;display:flex;align-items:center;justify-content:center}.char-stars{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:14px;color:#f59f00;text-shadow:0 1px 0 #fff;min-height:16px}.title-mascots{display:flex;gap:18px;margin-bottom:10px}.floating-decor{position:absolute;font-size:32px;animation:float 3s ease-in-out infinite;opacity:.8;pointer-events:none}.decor-star{left:10%;top:16%;animation-delay:.2s}.decor-heart{right:14%;top:22%;animation-delay:.8s}.decor-balloon{left:18%;bottom:18%;animation-delay:1.1s}.character-buddy{position:absolute;right:14px;bottom:14px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;max-width:180px}.character-bubble{background:#fff;border:2px solid #ffd2ea;border-radius:16px;padding:8px 10px;margin-bottom:8px;font-size:13px;box-shadow:var(--shadow-sm)}.character-avatar{background:#fff3fb;border:3px solid #ffc5df;border-radius:18px;padding:8px 10px;display:flex;align-items:center;gap:8px;min-width:126px}.character-icon{font-size:30px;animation:float 1.7s ease-in-out infinite}.character-label{font-size:12px;font-weight:700;color:#9f4f7a}.mood-sparkle .character-icon,.mood-clap .character-icon{animation:wiggle .8s ease-in-out infinite}.feedback-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:92}.feedback-sparkles span{position:absolute;animation:sparkleBurst .8s ease forwards}.feedback-sparkles span:nth-child(1){left:28%;top:26%;animation-delay:0s}.feedback-sparkles span:nth-child(2){left:41%;top:21%;animation-delay:.08s}.feedback-sparkles span:nth-child(3){left:54%;top:24%;animation-delay:.12s}.feedback-sparkles span:nth-child(4){left:63%;top:28%;animation-delay:.05s}.feedback-sparkles span:nth-child(5){left:46%;top:35%;animation-delay:.16s}.result-mascot{font-size:132px;animation:bounce 1.6s ease-in-out infinite;line-height:1}.result-sub{font-size:20px;color:#8f7ca3;margin-bottom:4px}@media (max-width: 900px){.sound-toggle{right:14px;top:70px;font-size:13px}.xp-badge{top:18px;right:14px;font-size:14px}.character-buddy{max-width:120px;right:8px;bottom:8px}.character-avatar{min-width:82px;padding:6px 8px}.character-bubble{display:none}.canvas-wrapper{width:min(90vw,400px)!important;height:min(90vw,400px)!important}.screen{padding:14px}.select-grid{grid-template-columns:repeat(4,minmax(54px,1fr));gap:10px;padding:8px}.char-card{min-height:76px}.select-sections{width:min(95vw,820px);max-height:min(60vh,640px);padding:10px}.select-group-title{font-size:18px}}