:root{--bg:#090d24;--card:rgba(20,27,62,.88);--line:rgba(146,161,255,.19);--text:#eef0ff;--muted:#abb3d9;--cyan:#63daf7;--danger:#ff7190}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 12% 5%,#1e2f72 0,transparent 32%),radial-gradient(circle at 87% 24%,#49206c 0,transparent 28%),var(--bg)}button{font:inherit;color:inherit;cursor:pointer;border:0}.app-shell{max-width:1250px;margin:auto;padding:34px 20px 48px}.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:var(--cyan);margin:0 0 6px}.hero h1{margin:0;font-size:clamp(1.75rem,4vw,2.65rem);letter-spacing:-.04em}.hero h1 span{color:#b6abff;font-weight:600}.hero>div>p:not(.eyebrow){color:var(--muted);margin:9px 0 0}.hero-level-actions{display:flex;align-items:center;gap:10px}.level-pill,.level-picker{white-space:nowrap;padding:10px 14px;border:1px solid var(--line);background:#151c46;border-radius:999px;font-weight:750;color:#d7d3ff}.level-picker{background:#1b2454;color:#e7e8ff}.level-picker:hover{background:#2b3974}.card{background:linear-gradient(140deg,rgba(28,35,78,.88),rgba(13,18,48,.86));border:1px solid var(--line);box-shadow:0 16px 45px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05);border-radius:20px}.game-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}.board-card,.controls-card,.program-card{padding:22px}.board-card{min-width:0;overflow:visible}.board-heading,.card-title,.program-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.board-heading h2,.card-title h2,.program-top h2{font-size:1.08rem;margin:0}.board-heading p,.program-note{color:var(--muted);font-size:.9rem;line-height:1.4;margin:5px 0 0}.stats{display:flex;gap:10px;white-space:nowrap;font-size:.83rem;background:#0c1132;padding:8px 10px;border-radius:10px}.stats b{color:#fff}
.board {
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 720px);
  aspect-ratio: 1;
  margin: 20px auto 13px;
}
.board > .cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}
.cell-object { position: absolute; pointer-events: none; }
.door-marker { color: #ffe0f4; font-size: clamp(.9rem, 2vw, 1.5rem); }

.cell{border-radius:10px;background:linear-gradient(145deg,#26326e,#1b2559);box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 6px rgba(1,4,24,.22);overflow:visible}.cell.wall{background:repeating-linear-gradient(135deg,#4b507c 0 7px,#373b67 7px 14px);box-shadow:inset 0 0 0 2px #6f77b5}.cell.pit{background:radial-gradient(circle,#050716 17%,#10163b 20%,#10163b 45%,#202a5c 49%);box-shadow:inset 0 0 14px #000}.cell.door{background:linear-gradient(90deg,#712f6b 0 43%,#b7519c 44% 56%,#712f6b 57%);box-shadow:inset 0 0 0 2px #f18bd0}.cell.bridge{background:repeating-linear-gradient(90deg,#aa7141 0 8px,#6e3c25 8px 12px)}.cell.goal{box-shadow:inset 0 0 0 3px #ff9bd9,0 0 14px rgba(255,155,217,.55)}.goal-marker{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-size:clamp(1.25rem,3vw,2.3rem);font-weight:900;filter:drop-shadow(0 0 5px #ff9bd9);pointer-events:none}.star-marker{font-size:clamp(1.1rem,2.6vw,1.8rem);color:#ffe071;text-shadow:0 0 11px #ffca48;animation:twinkle 1.6s infinite alternate}.button-marker{width:48%;height:16%;background:#ff7c96;border:2px solid #ffb1c1;border-radius:50%;box-shadow:0 5px #7f354b}.button-active .button-marker{background:#8bf0bd;border-color:#d4ffe7;box-shadow:0 3px #37785a}.robot{z-index:2;display:grid;place-items:center;width:72%;aspect-ratio:1;border-radius:35% 35% 28% 28%;background:linear-gradient(145deg,#d7f6ff,#77c7e9);box-shadow:0 0 14px #64d8ff,inset -5px -5px #4f9ac1;transition:transform .28s ease;position:relative}.robot.dir-0{transform:rotate(0deg)}.robot.dir-1{transform:rotate(90deg)}.robot.dir-2{transform:rotate(180deg)}.robot.dir-3{transform:rotate(270deg)}.robot-face{position:absolute;top:22%;display:flex;gap:16%;justify-content:center;width:48%;height:18%;padding:4%;background:#152a59;border:2px solid #54cbec;border-radius:8px}.robot-face i{width:22%;aspect-ratio:1;border-radius:50%;background:#d7fbff;box-shadow:0 0 5px #fff}.robot-arrow{position:absolute;top:-25%;z-index:4;font-size:clamp(.75rem,2.4vw,1.1rem);line-height:1;color:#ffdd70;text-shadow:0 0 8px #ffca43;filter:drop-shadow(0 0 3px #7a5710)}.robot.wrong-direction{animation:robot-wrong .38s ease-in-out 2;box-shadow:0 0 0 3px #ff6381,0 0 19px #ff4167!important}.moving-block{z-index:1;display:grid;place-items:center;width:58%;aspect-ratio:1;border-radius:10px;background:linear-gradient(145deg,#ff9c62,#a9434e);color:#fff2cc;font-size:1.25rem;box-shadow:0 0 14px #ff8264;animation:block-pulse .7s ease-in-out infinite alternate}.status{min-height:24px;margin:0;font-size:.9rem;text-align:center}.status.success{color:#8bf0bd}.status.error{color:#ff9aac}.status.info{color:var(--muted)}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.command-btn{padding:11px 8px;background:#202959;border:1px solid #394681;border-radius:12px;text-align:left;transition:.18s}.command-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#7d91ee;background:#29366f}.command-btn:disabled,.actions button:disabled{opacity:.43;cursor:not-allowed}.command-btn .emoji{font-size:1.25rem;margin-right:6px}.command-btn .label{font-size:.83rem;font-weight:750}.command-btn.f1-palette{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-color:#e879ca;background:linear-gradient(135deg,#71376f,#5945ab)}.command-btn.f1-palette .emoji{font-size:1.65rem;margin:0}.sound-toggle{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:5px}.sound-toggle input{accent-color:var(--cyan)}.how{margin-top:18px;padding:14px;background:rgba(10,14,39,.65);border:1px solid var(--line);border-radius:14px}.how h3{font-size:.9rem;margin:0 0 6px;color:#d7d3ff}.how p{color:var(--muted);line-height:1.45;margin:0;font-size:.83rem}.program-card{margin-top:18px}.program-top{align-items:end}.program-top h2 span,.function-heading h2 span{font-size:.75rem;background:#37417a;border-radius:999px;padding:3px 7px;vertical-align:middle}.editor-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}.editor-tab{padding:10px 14px;border:1px solid #5364ba;border-radius:10px;background:#17204c;color:#c9d0fa;font-weight:800}.editor-tab.active{color:#fff;background:linear-gradient(135deg,#4b7fe8,#854bd3);border-color:#9fb7ff;box-shadow:0 0 0 3px rgba(113,150,255,.2)}.program{display:flex;gap:9px;min-height:80px;align-items:center;overflow:auto;margin:14px 0;padding:6px 2px}.empty-program{color:#828bb5;font-size:.9rem;margin:auto}.program-chip{position:relative;display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;padding:8px 27px 8px 12px;border:1px solid #5364ba;border-radius:12px;background:linear-gradient(135deg,#303e88,#57419a);font-weight:750;cursor:grab}.program-chip>.chip-symbol{font-size:2rem;line-height:1}.program-chip.repeat{min-width:86px;background:linear-gradient(135deg,#8a3776,#8d4a95);border-color:#e679c3}.program-chip.function-call{background:linear-gradient(135deg,#8e3c90,#674dcc);border-color:#ef84d4}.program-chip.active{outline:3px solid #f8de72;transform:translateY(-3px);box-shadow:0 0 18px #f4ce55}.program-chip.dragging{opacity:.38;cursor:grabbing}.program-chip.drop-before{box-shadow:-4px 0 0 #f8de72}.program-chip.drop-after{box-shadow:4px 0 0 #f8de72}.repeat-count{position:absolute;right:5px;bottom:4px;padding:1px 4px;border-radius:5px;background:#f8de72;color:#2a1640;font-size:.74rem;font-weight:900}.function-label{font-size:.9rem;color:#fff;letter-spacing:.04em}.chip-remove{position:absolute;top:4px;right:4px;width:28px;height:28px;border:1px solid #ff8196;border-radius:9px;background:#5d263f;color:#ffdce4;font-size:22px;font-weight:800;line-height:24px;display:grid;place-items:center}.function-panel{margin:18px 0;padding:16px;border:1px solid rgba(232,121,202,.45);border-radius:16px;background:linear-gradient(135deg,rgba(96,35,108,.28),rgba(27,32,79,.5))}.f2-panel{border-color:rgba(99,218,247,.48);background:linear-gradient(135deg,rgba(25,97,132,.28),rgba(27,32,79,.5))}.function-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.function-heading h2{margin:0;font-size:1rem}.function-heading button{padding:8px 10px;border:1px solid #c870b8;border-radius:9px;background:#512b68;font-size:.8rem;font-weight:750}.f1-program{background:rgba(8,10,35,.28);border-radius:12px;padding:4px}.actions{display:flex;flex-wrap:wrap;gap:9px}.actions button{padding:10px 13px;background:#202957;border:1px solid #3a477f;border-radius:10px;font-size:.85rem;font-weight:750}.actions .primary{background:linear-gradient(135deg,#4879e7,#7351d8);border-color:#759df7}.actions .next{margin-left:auto;background:linear-gradient(135deg,#aa4b9a,#7d54db);border-color:#e87aca}.modal-backdrop{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:rgba(2,4,17,.69);backdrop-filter:blur(5px)}.hidden{display:none}.modal{position:relative;width:min(720px,calc(100% - 36px));max-height:82vh;overflow:auto;text-align:center;padding:27px;background:#202957;border:1px solid #6475c6;border-radius:20px;box-shadow:0 22px 70px #000}.modal h2{margin:6px 0}.modal p{color:var(--muted)}.modal-close{position:absolute;right:12px;top:8px;background:transparent;font-size:1.5rem}.repeat-options{display:flex;gap:10px;justify-content:center}.repeat-options button,.level-choice{background:#384789;border:1px solid #7185d7;border-radius:9px;padding:10px 18px;font-weight:800}.level-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.level-choice{min-height:88px;text-align:left;background:#202957}.level-choice b,.level-choice span,.level-choice small{display:block}.level-choice span{color:#ffde72;margin:5px 0}.level-choice small{color:#b9c0e7;font-size:.72rem}.level-choice.selected{border-color:#f8de72;box-shadow:0 0 0 2px rgba(248,222,114,.24)}.dev-error{padding:18px;border:2px solid #ff7190;border-radius:12px;background:#4a2037;color:#ffe1e8;font-weight:800;line-height:1.45}@keyframes twinkle{to{transform:scale(1.17);filter:brightness(1.2)}}@keyframes block-pulse{to{transform:scale(1.08);filter:brightness(1.17)}}@keyframes robot-wrong{0%,100%{margin-left:0}25%{margin-left:-5px}75%{margin-left:5px}}@media(max-width:760px){.app-shell{padding:21px 12px 34px}.hero{align-items:flex-start}.hero h1 span{display:block}.game-layout{grid-template-columns:1fr}.board-card,.controls-card,.program-card{padding:16px}.controls-card{order:2}.board-heading{display:block}.stats{display:inline-flex;margin-top:10px}.actions button{flex:1 1 auto}.actions .next{margin-left:0}.program-note{display:none}}@media(max-width:560px){.hero-level-actions{flex-wrap:wrap}.level-list{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-tabs{gap:6px}.editor-tab{flex:1;padding:9px 6px;font-size:.78rem}}@media(max-width:420px){.hero{display:block}.level-pill{display:inline-block;margin-top:12px}.palette{grid-template-columns:1fr 1fr}.command-btn{padding:9px 6px}.command-btn .label{font-size:.75rem}}