*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#eaf0f6;color:#172033;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.34;background-image:linear-gradient(#7e91a50b 1px,transparent 1px),linear-gradient(90deg,#7e91a50b 1px,transparent 1px);background-size:32px 32px;animation:gridDrift 18s linear infinite}.app{max-width:1120px;margin:auto;padding:28px;position:relative}.topbar{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px}.system-label{font-size:.78rem;font-weight:900;letter-spacing:.12em;color:#53647a}.sound-toggle{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 5px 15px #2030400d}.hero{display:flex;justify-content:space-between;gap:24px;align-items:center;background:#fff;border:1px solid #dde5ee;border-radius:26px;padding:28px;box-shadow:0 14px 40px #20304014;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:210px;height:210px;border:28px solid #edf2f7;border-radius:50%;right:-90px;top:-105px;opacity:.65}.hero>div{position:relative;z-index:1}h1{margin:.25rem 0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.045em}h2{font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.025em;margin-top:.25rem}p{line-height:1.58}.badge{font-weight:900;font-size:.8rem;letter-spacing:.09em}.student{font-weight:750;background:#f3f6f9;display:inline-block;padding:8px 12px;border-radius:12px}.system-panel{min-width:270px;background:#172033;color:#fff;border-radius:20px;padding:18px}.system-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.85rem;font-weight:800}.system-percent{font-size:2.15rem;font-weight:950;margin:6px 0}.meter{height:10px;border-radius:999px;background:#ffffff1f;overflow:hidden}.meter-fill{height:100%;width:0;background:#fff;border-radius:999px;transition:width .65s cubic-bezier(.2,.8,.2,1)}.modules{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:13px}.module{height:8px;border-radius:999px;background:#ffffff24;transition:.3s}.module.done{background:#fff;box-shadow:0 0 10px #ffffff80}.key{font-size:.85rem;margin-top:9px;color:#dbe6f1}.game-shell{margin-top:22px;background:#fff;border:1px solid #dde5ee;padding:30px;border-radius:26px;min-height:470px;box-shadow:0 14px 40px #20304010;animation:cardIn .35s ease both}.progress{display:flex;gap:7px;margin:12px 0 26px}.progress span{height:8px;flex:1;border-radius:10px;background:#e2e8f0;transition:.35s}.progress .on{background:#263a55}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:25px 0}.choice,.btn,.cmd{border:0;border-radius:16px;padding:18px;font:inherit;font-weight:800;cursor:pointer;background:#edf2f7;color:#172033;transition:transform .15s,box-shadow .15s,background .15s}.choice:hover,.cmd:hover{transform:translateY(-2px);background:#e3eaf2;box-shadow:0 8px 18px #20304012}.choice:active,.cmd:active,.btn:active{transform:scale(.98)}.choice.ok{outline:3px solid #25834b;background:#e9f8ef;animation:successPulse .45s}.choice.bad{outline:3px solid #b33a3a;background:#fff0f0;animation:shake .35s}.btn{background:#172033;color:#fff;padding:15px 24px;box-shadow:0 8px 20px #17203325}.btn:hover{transform:translateY(-1px);box-shadow:0 11px 24px #17203330}.msg{padding:14px 18px;border-radius:14px;background:#f4f6f8;margin:15px 0;animation:fadeUp .25s}.msg.good{background:#eaf8ef}.msg.warn{background:#fff6df}.grid{margin:22px 0;overflow-x:auto;padding:10px;border-radius:20px;background:#152235;background-image:radial-gradient(#ffffff13 1px,transparent 1px);background-size:16px 16px;width:max-content;max-width:100%}.grid-inner{display:grid;grid-template-columns:repeat(var(--grid-cols),64px);gap:7px;width:max-content}.cell{height:64px;border-radius:12px;background:#e8eef5;display:grid;place-items:center;font-size:2rem;border:1px solid #ffffff35;transition:transform .22s,background .22s,box-shadow .22s}.cell.wall{background:#4a5568}.cell.robot{background:#dfeaf6;box-shadow:inset 0 0 0 2px #9db2c9;animation:robotPop .25s}.cell.target{background:#edf7ee;box-shadow:inset 0 0 0 2px #a6c9ac}.cell.crash{outline:4px solid #b33a3a;background:#ffe6e6;animation:shake .35s}.commands{display:flex;gap:8px;flex-wrap:wrap}.program{min-height:62px;padding:12px;margin:15px 0;border:2px dashed #c8d1dc;border-radius:14px;font-size:1.5rem;background:#fafbfd}.program .instruction,.program .progcmd{display:inline-grid;place-items:center;min-width:42px;margin:3px;padding:9px;border-radius:10px;transition:.2s}.instruction.active,.progcmd.active{background:#172033;color:#fff;transform:translateY(-3px) scale(1.07);box-shadow:0 7px 15px #17203333}.instruction-bad{outline:3px solid #b33a3a;background:#ffe6e6}.progcmd.selected{outline:3px solid #172033;background:#dfe7f1}.tries{display:inline-flex;gap:6px;align-items:center;background:#f3f6f9;border-radius:999px;padding:8px 12px;font-weight:800}.try-dot{width:10px;height:10px;border-radius:50%;background:#9ba9b8}.try-dot.used{background:#172033}.result{display:grid;gap:8px;padding:22px;margin:18px 0;border-radius:18px;background:#f4f6f8}.result strong{font-size:1.8rem}.finish{text-align:center;padding:28px 10px}.finish-icon{font-size:4rem;animation:robotPop .5s}.finish-score{font-size:clamp(3rem,10vw,6rem);font-weight:950;letter-spacing:-.07em;line-height:1}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}.confetti i{position:absolute;top:-20px;width:9px;height:16px;background:#172033;opacity:.7;animation:fall 1.8s ease-in forwards}footer{text-align:center;padding:24px;color:#647084}.error{border:2px solid #b33a3a}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes successPulse{50%{transform:scale(1.025)}}@keyframes robotPop{0%{transform:scale(.75);opacity:.4}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes gridDrift{to{background-position:32px 32px}}@keyframes fall{to{transform:translateY(105vh) rotate(520deg);opacity:.1}}
@media(max-width:760px){.app{padding:12px}.hero{align-items:flex-start;flex-direction:column;padding:22px}.system-panel{width:100%;min-width:0}.game-shell{padding:20px}.grid-inner{grid-template-columns:repeat(var(--grid-cols),52px)}.cell{height:52px}.modules{gap:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}