*{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}.game-text-outline-sm{text-shadow:0 1px 0 var(--outline, #1f3b73),0 -1px 0 var(--outline, #1f3b73),1px 0 0 var(--outline, #1f3b73),-1px 0 0 var(--outline, #1f3b73)}.topbar{display:flex;align-items:center;gap:8px;padding:max(4px,env(safe-area-inset-top)) 2px 2px;margin:-12px -12px 12px;color:#1f3b73;border-style:solid;border-width:4px 12px 14px;border-image:url(/assets/olympia/hud-tray.webp) 12 36 40 fill / 1 / 0 stretch;position:sticky;top:0;z-index:50}.hdr-avatar-wrap{position:relative;margin-right:4px;flex-shrink:0}.hdr-avatar{display:block;width:48px;height:48px;box-sizing:border-box;overflow:hidden;border-radius:9999px;border:3px solid #f6c64b;background:linear-gradient(#bae6fd,#fef3c7);box-shadow:0 0 0 2px #8ab8e6,0 3px 6px 2px #1e508c33}.hdr-avatar img{display:block;width:100%;height:100%;object-fit:cover}.hdr-lvl{position:absolute;bottom:-10px;right:-10px;z-index:30;width:32px;height:32px;display:block}.hdr-lvl img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(rgba(31,59,115,.45) 0px 2px 0px)}.hdr-lvl-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding-top:3px;font-size:13px;color:#fff}.topmid{flex:1;min-width:0;padding-left:4px}.topname{display:flex;min-width:0;align-items:center;gap:4px;font-size:13px;line-height:1;font-weight:800}.topname .tier-ic{font-size:20px;line-height:1;flex-shrink:0}.topname-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.xpbar{position:relative;border-radius:9999px;border:2px solid #8ab8e6;padding:2px;background:#dbeafe;box-shadow:inset 0 2px 3px #1e508c2e,0 1px #ffffffe6;margin-top:4px;height:18px;box-sizing:border-box}.xpfill{position:relative;height:100%;overflow:hidden;border-radius:9999px;background:linear-gradient(#ffe98a,#ffc93d,#f08c0a)}.xpfill:before{content:"";position:absolute;left:1px;right:1px;top:1px;height:38%;border-radius:9999px;background:#fff9}.xpfill:after{content:"";position:absolute;top:0;bottom:0;left:0;width:33%;background:#ffffff4d}.xpnum{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:11px;line-height:1;color:#fff}.pill{position:relative;display:inline-flex;align-items:center;gap:4px;border-radius:9999px;border:2px solid #8ab8e6;padding:2px 12px 2px 24px;margin-left:12px;font-size:15px;font-weight:800;background:linear-gradient(180deg,#fff,#eaf5ff);color:#1f3b73;box-shadow:inset 0 -2px #8ab8e64d,0 2px #8ab8e6;flex-shrink:0;white-space:nowrap}.pill img{position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.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;cursor:pointer;overflow:hidden;padding:0}.hdr-btn.mail{width:36px;height:36px}.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 img,.hdr-btn svg{position:relative;filter:drop-shadow(0 1.5px 0 #1a5fb0)}.hdr-btn svg{width:20px;height:20px}.hdr-btn.mail img{width:22px;height:22px;object-fit:contain}.bottombar{position:fixed;left:50%;transform:translate(-50%);bottom:0;width:min(565px,100%);display:grid;grid-template-columns:repeat(5,1fr);border-style:solid;border-width:14px 12px 4px;border-image:url(/assets/olympia/tab-tray.webp) 40 36 12 fill / 1 / 0 stretch;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-frame{display:none;position:absolute;left:4px;right:4px;top:-12px;bottom:0;border-style:solid;border-width:12px 12px 14px;border-image:url(/assets/olympia/tab-active.webp) 130 130 150 fill / 1 / 0 stretch}.gtab.active .gtab-frame{display:block}.gtab-ic{position:relative;display:block}.gtab.active .gtab-ic{transform:translateY(-12px)}.gtab-ic img{display:block;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(30,80,140,.28))}.gtab.active .gtab-ic img{width:44px;height:44px}.gtab:not(.active) .gtab-ic img{width:32px;height:32px}.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}