/* Byte sprites: rows right/left, up/down. Props: crate/tank, sensor/console. */
.robot-shell{position:absolute;inset:-13%;display:block;filter:drop-shadow(0 5px 3px #0009);transform-origin:50% 75%;transition:filter .15s}
.robot-sprite{display:block;width:100%;height:100%;background:url('byte-directions.png') 0 0/200% 200% no-repeat}
.robot[data-dir=L] .robot-sprite{background-position:100% 0}.robot[data-dir=U] .robot-sprite{background-position:0 100%}.robot[data-dir=D] .robot-sprite{background-position:100% 100%}
.robot.moving .robot-shell{animation:driving .16s linear infinite}.robot.thinking .robot-shell{animation:scan .6s ease-in-out infinite}.robot.bump .robot-shell{animation:bump .2s ease-in-out 2}.robot.happy .robot-shell{animation:happy-hop .6s ease-in-out 2}.robot.entering .robot-shell{animation:portal-entry .6s ease-in forwards}.robot.entering .direction-pointer{opacity:0}
.rolling-wheel{position:absolute;width:12%;height:12%;top:76%;border:2px dashed #a6c66d99;border-radius:50%;opacity:0;pointer-events:none}.wheel-a{left:25%}.wheel-b{left:66%}.robot.moving .rolling-wheel{opacity:.7;animation:wheel-roll .28s linear infinite}.robot[data-dir=U] .rolling-wheel{top:74%}.robot[data-dir=L] .wheel-a{left:24%}.robot[data-dir=L] .wheel-b{left:61%}
.prop-sprite{background-image:url('props.png');background-size:200% 200%;background-repeat:no-repeat;background-position:0 0}.prop-1{background-position:100% 0}.prop-2{background-position:0 100%}.prop-3{background-position:100% 100%}
.cell.wall,.arena .cell.wall{background:linear-gradient(145deg,#253b4d,#162839);border:1px solid #586c7d;overflow:visible;box-shadow:0 4px 0 #07111e}.cell .obstacle{display:block;position:absolute;inset:-7%;filter:drop-shadow(1px 5px 2px #0009);pointer-events:none}
.cell.goal{overflow:visible}.portal{position:relative;z-index:1;border-width:3px;transition:transform .25s,box-shadow .25s;background:radial-gradient(ellipse,#0d2338 15%,#62e4ff33 70%,#cafda999)}.portal:after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--accent);opacity:.5}.portal-opening .portal{transform:scale(1.13);box-shadow:0 0 30px var(--accent),inset 0 0 18px #fff;background:radial-gradient(ellipse,#edfff9,#7aedff88 55%,#0c2544)}.portal-opening .portal:after{animation:wheel-roll 1s linear infinite}.energized .cell.floor{border-color:#98f4b6;box-shadow:0 0 9px #9affb822,inset 0 0 12px #91ffa522}.energized .portal{background:#b8ffb9;color:#15334a}.energized{box-shadow:0 0 35px #baf36a44}.cell.sensed{outline:3px solid #97f2ff;z-index:3;box-shadow:0 0 18px #97f2ff}.cell.sense-no{outline-color:#ffba83}
.byte-cockpit{display:flex;align-items:center;gap:12px;border:1px solid #4b6882;background:linear-gradient(125deg,#0f2235,#1c3449);border-radius:16px;padding:10px 12px;margin-bottom:20px;min-height:76px}.byte-face{width:62px;height:62px;flex:0 0 62px;background:url('byte-faces.png') 0 0/200% 200%;filter:drop-shadow(0 3px 3px #0008);animation:blink-face 5s step-end infinite}.byte-face[data-mood=focused]{animation:blink-face 1.8s step-end infinite}.byte-face[data-mood=happy]{background-position:0 100%;animation:none}.byte-face[data-mood=puzzled]{background-position:100% 100%;animation:none}.cockpit-label{display:block;font:700 11px/1.5 ui-monospace,monospace;color:var(--accent);letter-spacing:1px}#byte-message{display:block;font-size:14px;line-height:1.4;color:#d5e8f4}.power-cells{display:flex;gap:3px;margin-left:auto;flex:0 0 24px;height:18px}.power-cells i{background:#385046;width:5px;border-radius:2px}.mission-success .power-cells i{background:#caff8e;box-shadow:0 0 7px #caff8e}
.sector-machinery{height:44px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid #49647b66;margin:6px 3px 4px}.machinery-prop{height:54px;width:54px;flex:0 0 54px;z-index:1;filter:drop-shadow(0 3px 3px #0009)}.machine-caption{font:10px/1 ui-monospace,monospace;color:#b9d4e4;letter-spacing:1px;margin-left:auto;margin-right:6px}.belt-track{height:11px;width:38%;border:2px solid #556579;background:repeating-linear-gradient(90deg,#172e42 0,#172e42 10px,#728792 11px,#728792 14px);border-radius:6px}.sensor-wave{display:none}main[data-world="1"] .machinery-prop{background-position:100% 0}main[data-world="1"] .belt-track{animation:conveyor .7s linear infinite}main[data-world="2"] .machinery-prop{background-position:0 100%}main[data-world="2"] .belt-track{display:none}main[data-world="2"] .sensor-wave{display:block;width:70px;height:24px;background:repeating-radial-gradient(ellipse at left,#ffc38d88 0 2px,transparent 3px 13px);animation:sensor-sweep 2s ease-in-out infinite}.terminal-hud{display:flex;gap:12px;align-items:center;border:1px solid #685d8d;border-radius:10px 10px 0 0;padding:10px;background:#232641;font:11px/1.4 ui-monospace,monospace;color:#d0c7f3}.terminal-lights{color:#bba2ff;white-space:nowrap}.terminal-signal{margin-left:auto;color:#acfabd;animation:signal 1.4s ease-in-out infinite}.code-view{margin-top:0;border-radius:0 0 16px 16px;border-top:0;position:relative}.code-view code{display:block}.mission-success .code-view{box-shadow:inset 0 0 40px #baf36a17;border-color:#a4e989}
.palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.palette button{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:8px 10px;min-height:59px;text-align:left;white-space:normal;min-width:0}.command-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:32px;font:800 27px/1 system-ui;border-radius:7px;background:#07182866;color:#dbfbaa}.command-copy{font-size:14px;line-height:1.3;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}.repeat-count{display:inline-block;color:#d4f5ff}.condition-icon{color:#ffd4a7}.program{gap:12px;padding:14px;align-items:flex-start}.program button{display:flex;align-items:center;gap:6px;position:relative;border-radius:8px;min-height:50px;padding:7px 10px 7px 6px}.program button:after{content:'';position:absolute;left:100%;top:50%;width:12px;height:5px;background:#6e9a7a;transform:translateY(-50%)}.program button:last-child:after{display:none}.program button .command-icon{font-size:23px;flex-basis:25px;width:25px;height:28px;margin:0;opacity:1}.program button .command-copy{font-size:13px;margin:0;opacity:1}.program button .command-number{font:11px ui-monospace,monospace;margin:0 3px 0 0;opacity:.65}.program button .remove-mark{font-size:16px;margin-left:2px;opacity:.7}.program button.active:before{content:'';position:absolute;inset:-3px;border-radius:11px;border:2px solid white;animation:command-flash .65s ease-in-out infinite;pointer-events:none}.program button.active .command-icon{color:#102a30;background:#ffffff77}
.mission-map{grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 20px;padding:36px 26px;background:linear-gradient(#081d3399,#081d33bb),url('environment.png') center/cover;overflow:hidden}.map-routes{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.route{fill:none;stroke:#58768e;stroke-width:5;stroke-linecap:round;stroke-dasharray:3 10}.route.powered{stroke:#baf36a;filter:drop-shadow(0 0 5px #baf36a88);stroke-dasharray:none}.map-node{z-index:1;min-height:158px;background:transparent;border:0;box-shadow:none;border-radius:24px;padding:15px 8px;gap:10px}.map-node:hover:not(:disabled){background:#233d5599;box-shadow:none}.node-orbit{width:72px;height:72px;box-shadow:0 0 0 8px #0a192c99,0 6px 0 #05101d;border-width:3px}.node-title{background:#0b2137e8;border:1px solid #40627c;border-radius:10px;padding:7px 9px;font-size:14px;min-height:46px;max-width:100%;color:#e8f3fc}.node-phase{background:#0b2137ee;border-radius:6px;padding:4px 6px;font-size:10px}.next-station .node-orbit{border-color:#fff6bc;box-shadow:0 0 0 8px #d8ff9622,0 0 22px #baf36a44}.map-byte{position:absolute;width:64px;height:64px;object-fit:contain;right:6%;top:0;z-index:2;filter:drop-shadow(0 3px 3px #0009);animation:byte-idle 3s ease-in-out infinite}.map-node.solved .node-orbit{box-shadow:0 0 0 7px #baf36a16,0 0 18px #baf36a44}.node-star{bottom:-8px;right:-7px;font-size:24px}
@keyframes driving{50%{transform:translateY(-1px)}}@keyframes wheel-roll{to{transform:rotate(360deg)}}@keyframes blink-face{0%,94%,100%{background-position:0 0}95%,98%{background-position:100% 0}}@keyframes portal-entry{0%{transform:scale(1);opacity:1}40%{transform:scale(.85);filter:drop-shadow(0 0 18px #d0ffef)}100%{transform:scale(.08) translateY(-10px);opacity:0}}@keyframes conveyor{to{background-position:28px 0}}@keyframes sensor-sweep{50%{opacity:.3;transform:scaleX(.8);transform-origin:left}}@keyframes signal{50%{opacity:.4}}@keyframes command-flash{50%{opacity:.25}}
@media(max-width:800px){.mission-map{grid-template-columns:repeat(3,minmax(0,1fr));padding:30px 16px;gap:20px 12px}.node-orbit{width:64px;height:64px}.map-byte{right:0;width:55px;height:55px}.byte-cockpit{gap:8px;padding:8px}.byte-face{flex-basis:48px;width:48px;height:48px}.cockpit-label{font-size:10px;letter-spacing:.5px}#byte-message{font-size:13px}.power-cells{display:none}.palette button{padding:7px;gap:5px}.command-copy{font-size:13px}.command-icon{flex-basis:26px;width:26px}.sector-machinery{height:35px}.machinery-prop{width:44px;height:44px;flex-basis:44px}.machine-caption{font-size:9px}.terminal-hud{font-size:10px;gap:6px}.terminal-lights{display:none}}
@media(max-width:480px){.mission-map{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 8px;gap:20px 8px}.node-title{font-size:13px}.node-phase{font-size:9px}.map-byte{width:45px;height:45px;right:0;top:0}.map-node{padding:15px 3px;min-height:158px}.node-orbit{width:58px;height:58px}.byte-cockpit{margin-bottom:14px}.command-copy{font-size:13px}.program button .command-copy{font-size:12px}.terminal-hud{flex-wrap:wrap}.robot-shell{inset:-16%}.cell .obstacle{inset:-3%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.robot.entering .robot-shell{opacity:0}.rolling-wheel{display:none}}

.console-prop{display:block;width:36px;height:36px;flex:0 0 36px;filter:drop-shadow(0 2px 2px #0008)}
/* Display masks isolate the supplied prop silhouettes without altering the atlas. */
.prop-sprite{--shape:polygon(46% 6%,54% 6%,62% 10%,63% 12%,81% 18%,86% 17%,93% 21%,96% 27%,94% 76%,65% 94%,59% 94%,10% 71%,9% 40%,8% 34%,9% 22%,17% 17%,21% 19%,42% 12%);clip-path:var(--shape)}
.prop-1,main[data-world="1"] .machinery-prop{--shape:polygon(32% 9%,43% 7%,57% 8%,68% 13%,78% 21%,82% 28%,82% 49%,88% 58%,90% 72%,88% 87%,79% 90%,70% 87%,29% 87%,20% 91%,11% 85%,10% 64%,13% 57%,16% 53%,17% 27%,22% 18%)}
.prop-2,main[data-world="2"] .machinery-prop{--shape:polygon(38% 4%,49% 3%,61% 7%,70% 15%,78% 28%,76% 40%,70% 50%,69% 56%,87% 64%,92% 80%,87% 91%,70% 96%,39% 93%,12% 86%,12% 76%,18% 64%,30% 57%,29% 52%,20% 45%,17% 31%,19% 21%,27% 12%)}
.prop-3{--shape:polygon(31% 7%,76% 15%,87% 24%,90% 40%,87% 51%,79% 57%,82% 60%,92% 67%,94% 80%,85% 85%,65% 91%,56% 89%,17% 71%,10% 63%,9% 51%,13% 40%,18% 25%,22% 13%)}

/* Sehr schmale Geräte (iPhone SE, iPad im schmalen Split View): die Befehle
   müssen in zwei Spalten passen, ohne dass "wiederholen" umbricht. */
@media(max-width:360px){.palette button{padding:6px;gap:4px}.palette .command-icon{flex-basis:22px;width:22px;height:26px;font-size:20px}.palette .command-copy{font-size:12px}}