@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Outfit:wght@100..900&display=swap";:root{--primary:#ff6b6b;--secondary:#4ecdc4;--accent:#ffe66d;--bg:#f7fff7;--text:#2f3e46;--card-bg:#ffffffd9;--border-radius:20px;--font-kids:"Fredoka", sans-serif;--font-main:"Outfit", sans-serif}body{font-family:var(--font-main);background-color:var(--bg);color:var(--text);background-image:radial-gradient(circle at 10% 20%,#ff6b6b0d 0%,#0000 20%),radial-gradient(circle at 90% 80%,#4ecdc40d 0%,#0000 20%);justify-content:center;min-height:100vh;margin:0;padding:0;display:flex}#root{box-sizing:border-box;width:100%;max-width:600px;padding:20px}.title{font-family:var(--font-kids);color:var(--primary);text-align:center;text-shadow:2px 2px #0000000d;margin-bottom:5px;font-size:2.5rem}.subtitle{text-align:center;color:var(--text);opacity:.7;margin-bottom:25px;font-size:1rem}.board-container{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius);border:4px solid #fff;flex-direction:column;align-items:center;margin-bottom:25px;padding:20px;display:flex;position:relative;box-shadow:0 15px 35px #0000000d}.character-info{text-align:center;margin-bottom:15px}.character-pinyin{color:var(--secondary);font-size:1.2rem;font-weight:600}.character-meaning{color:var(--text);opacity:.8;font-size:.9rem}.hanzi-canvas{border:4px solid var(--accent);cursor:crosshair;touch-action:none;background:#fff;border-radius:12px}.controls{gap:15px;margin-top:20px;display:flex}.btn{font-family:var(--font-kids);cursor:pointer;border:none;border-radius:30px;align-items:center;gap:8px;padding:12px 24px;font-size:1.1rem;font-weight:600;transition:transform .2s,background .2s;display:flex}.btn:active{transform:scale(.95)}.btn-primary{background:var(--primary);color:#fff}.btn-secondary{background:var(--secondary);color:#fff}.btn-accent{background:var(--accent);color:var(--text)}.word-selector-container{margin-bottom:25px}.level-tabs{justify-content:center;gap:10px;margin-bottom:15px;display:flex}.level-tab{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;padding:8px 12px;transition:all .2s;display:flex;box-shadow:0 4px 10px #0000000d}.level-tab.active{background:var(--secondary);color:#fff;border-color:#ffffff80;transform:translateY(-2px)}.level-tab .level-label{font-family:var(--font-kids);font-size:1.1rem;font-weight:700}.level-tab .level-age{opacity:.8;font-size:.7rem}.word-list{scrollbar-width:thin;gap:10px;padding:10px 5px;display:flex;overflow-x:auto}.word-card{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:12px;justify-content:center;align-items:center;min-width:60px;height:60px;font-size:1.8rem;transition:all .2s;display:flex;box-shadow:0 4px 10px #0000000d}.word-card.active{border-color:var(--primary);background:var(--primary);color:#fff;transform:translateY(-5px)}.word-card:hover{transform:translateY(-3px)}.success-indicator{background:#fff;border-radius:50%;justify-content:center;align-items:center;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn;display:flex;position:absolute;bottom:15px;right:15px;box-shadow:0 4px 10px #0000001a}@keyframes popIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media (width<=480px){.title{font-size:2rem}.hanzi-canvas{width:280px!important;height:280px!important}}