*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:"Baloo 2",Segoe UI,system-ui,sans-serif;background:#dbeafe;color:#33302a}button{font-family:inherit;cursor:pointer}.font-game-title{font-family:Paytone One,"Baloo 2",system-ui,sans-serif}.app{max-width:565px;margin:0 auto;background:linear-gradient(#e3f3fc,#d8ecfa);min-height:100vh;padding:12px 12px 86px;overflow-x:hidden}.ribbon{background:linear-gradient(#ffd866,#fbb729);border:3px solid #81572a;border-radius:999px;padding:8px 22px;font-size:20px;text-align:center;box-shadow:0 4px #81572a;margin:14px auto;width:fit-content}.card-parchment{background:radial-gradient(circle at 50% 0%,#fffdf5,#fdeec9);border:3px solid #9a6a33;border-radius:22px;padding:14px;box-shadow:0 4px #81572a;margin-top:14px}.card-parchment h3{margin:0 0 8px;font-size:19px;color:#3b2a1a}.card-parchment p{margin:6px 0;font-weight:600}.pbar{position:relative;height:18px;border:2px solid #e3cf9f;border-radius:999px;background:#fff;overflow:hidden;margin-top:6px}.pbar-fill{height:100%;border-radius:999px}.pbar-fill.done{background:linear-gradient(180deg,#8be89a,#2fbf71)}.pbar-fill.active{background:linear-gradient(180deg,#ffd866,#f08c0a)}.pbar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 0 #6f675a,0 -1px 0 #6f675a,1px 0 0 #6f675a,-1px 0 0 #6f675a}.reward-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reward-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800;border:2px solid #e3cf9f}.reward-chip.tone-blue{background:#dbeafe}.reward-chip.tone-sand{background:#fef3c7}.btn-gold{display:block;width:100%;border:2.5px solid #6e3a06;border-radius:18px;background:linear-gradient(#ffe98a,#ffcb3d);color:#5a3a12;font-weight:800;font-size:18px;padding:12px;margin-top:12px;box-shadow:0 4px #6e3a06}.btn-gold:active{transform:translateY(3px);box-shadow:0 1px #6e3a06}.q-stem{background:#e8f3ff;border:3px dashed #4dabf7;border-radius:18px;padding:14px 16px;font-size:20px;font-weight:800;margin-top:12px}.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.opt{border:3px solid;border-radius:16px;padding:12px 10px 12px 40px;font-size:18px;font-weight:800;color:#fff;text-align:left;position:relative}.opt:before{position:absolute;left:12px;top:50%;transform:translateY(-50%)}.opt-c0{background:#d22642;border-color:#a31b32}.opt-c0:before{content:"▲"}.opt-c1{background:#2f7de1;border-color:#1d5fb0}.opt-c1:before{content:"◆"}.opt-c2{background:#fbb729;border-color:#d1940a}.opt-c2:before{content:"●"}.opt-c3{background:#2fbf71;border-color:#238a52}.opt-c3:before{content:"■"}.player-bar{background:#fffdf5;border:3px solid #9a6a33;border-radius:16px;padding:10px 14px;font-weight:800;margin-top:12px;text-align:center}.lesson-card{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:2px dashed #e3cf9f;padding:10px 0}.lesson-card:first-of-type{border-top:none}.lesson-title{font-weight:800;font-size:18px}.lesson-meta{font-size:13px;font-weight:600;color:#6f675a}.btn-small{width:auto;padding:8px 16px;font-size:15px;margin-top:0;flex-shrink:0}.btn-small:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px #6e3a06}.btn-white{border:2.5px solid #9a6a33;border-radius:14px;background:#fff;color:#3b2a1a;font-weight:800;padding:8px 16px}.btn-block{display:block;width:100%;margin-top:10px}.error-banner{background:#fde8e8;border:3px solid #d22642;border-radius:16px;padding:12px;font-weight:700;margin-top:12px;text-align:center}.code-panel{background:#fffdf5;border:3px dashed #4dabf7;border-radius:18px;padding:14px;margin-top:12px;text-align:center}.code-value{font-size:24px;font-weight:800;letter-spacing:2px;margin:8px 0;color:#1d5fb0}.restore-box{background:#fffdf5;border:3px solid #9a6a33;border-radius:18px;padding:14px;margin-top:12px}.restore-row{display:flex;gap:8px;margin-top:8px}.restore-row input{flex:1;border:2px solid #e3cf9f;border-radius:12px;padding:8px 12px;font-family:inherit;font-weight:700;min-width:0}.q-expr{font-size:26px;margin-top:8px}.speak-btn{background:#fff;border:2px solid #4dabf7;border-radius:999px;font-size:22px;line-height:1;padding:6px 10px;margin-left:8px;vertical-align:middle}.visual-svg{text-align:center;margin-top:10px}.visual-svg svg{max-width:100%;height:auto}.count-visual{text-align:center;font-size:32px;letter-spacing:4px;margin-top:10px}.opt-svg{display:inline-flex}.opt-svg svg{width:56px;height:56px}.opt.picked{outline:4px solid #3b2a1a;outline-offset:2px}.opt.correct{outline:4px solid #2fbf71;outline-offset:2px}.opt.wrong{outline:4px solid #d22642;outline-offset:2px;opacity:.85}.opt.dim{opacity:.55}.tile-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}.tile{background:#fff;border:3px solid #e3cf9f;border-radius:18px;padding:12px 6px;text-align:center}.tile-num{font-size:22px;font-weight:800}.tile-label{font-size:13px;font-weight:700;color:#6f675a}.note{text-align:center;font-size:13px;font-weight:600;color:#6f675a;margin-top:16px}.toptitle{display:block;font-size:12px;font-weight:800;color:#7a4a06;margin-top:1px}.hdr-energy{flex-shrink:0;background:linear-gradient(#ffe98a,#ffcb3d);border:2px solid #6e3a06;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800;color:#5a3a12;box-shadow:0 2px #6e3a06}.btn-gold:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px #6e3a06}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;margin:-12px -12px 12px;padding:8px 10px;background:linear-gradient(180deg,#bfe3ff,#8ec6f2);border-bottom:4px solid #f6c64b;color:#1f3b73}.hdr-avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;border-radius:9999px;border:3px solid #f6c64b;background:linear-gradient(#bae6fd,#fef3c7);box-shadow:0 0 0 2px #8ab8e6,0 3px 6px 2px #1e508c33;font-size:28px;line-height:1}.topmid{flex:1;min-width:0;padding-left:4px}.topname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800}.xpbar{position:relative;border-radius:9999px;border:2px solid #8ab8e6;background:#dbeafe;box-shadow:inset 0 2px 3px #1e508c2e;margin-top:4px;height:18px;box-sizing:border-box}.xpnum{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#1f3b73}.hdr-btn{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;border-radius:9999px;border:2.5px solid #1a5fb0;background:linear-gradient(180deg,#9adcff,#4aa8f5,#1f7fe0);color:#fff;box-shadow:inset 0 2px #fff9,0 3px #1a5fb0;padding:0;overflow:hidden;font-size:20px;line-height:1}.hdr-btn.mail{width:36px;height:36px;font-size:18px}.hdr-btn.big{width:40px;height:40px}.hdr-btn .hl{position:absolute;left:3px;right:3px;top:2px;height:45%;border-radius:9999px;background:linear-gradient(#ffffff8c,#fff0);pointer-events:none}.hdr-btn .ic{position:relative}.bottombar{position:fixed;left:50%;transform:translate(-50%);bottom:0;width:min(565px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(180deg,#bfe3ff,#8ec6f2);border-top:3px solid #8ab8e6;box-sizing:border-box;padding-bottom:max(6px,env(safe-area-inset-bottom));z-index:60}.gtab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:58px;padding-bottom:4px;background:transparent;border:none;font-family:inherit;cursor:pointer}.gtab:not(:first-child):before{content:"";position:absolute;top:8px;bottom:8px;left:0;width:2px;background:linear-gradient(90deg,#8ab8e68c 50%,#fffffff2 50%)}.gtab.active{background:linear-gradient(#ffd866,#fbb729);border-radius:14px 14px 0 0}.gtab-ic{position:relative;font-size:26px;line-height:1}.gtab.active .gtab-ic{transform:translateY(-4px)}.gtab-label{position:relative;font-size:12px;line-height:1;font-weight:800}.gtab.active .gtab-label{color:#7a4a06}.gtab:not(.active) .gtab-label{color:#5a79a8}.marquee{margin:0 -12px 4px;padding:8px 12px;background:#fffaf0f2;border-bottom:2px solid #f6c64b;font-size:13px;font-weight:700;color:#1f3b73;text-align:center}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.section-head h3{margin:0}.empty-state{text-align:center;padding:8px 0 4px}.empty-state p{font-size:15px}.field-label{display:block;font-weight:800;margin:12px 0 6px}.text-input{width:100%;border:2px solid #e3cf9f;border-radius:12px;padding:10px 12px;font-family:inherit;font-weight:700;font-size:16px;box-sizing:border-box}.grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.grade-btn{border:2.5px solid #9a6a33;border-radius:12px;background:#fff;color:#3b2a1a;font-weight:800;padding:10px 4px}.grade-btn.selected{background:linear-gradient(#ffe98a,#ffcb3d);border-color:#6e3a06;color:#5a3a12}.form-error{background:#fde8e8;border:2px solid #d22642;border-radius:12px;padding:8px 12px;font-weight:700;color:#a31b32;text-align:center}