:root{--bg-color: #000000;--accent-color: #1ba1e2;--green-solved: #339933;--pantone-black6u: #51555e;--text-main: #ffffff;--text-dim: #cccccc;--font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-family);overflow:hidden;display:flex;justify-content:center;align-items:center}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:8px}#game-container{display:flex;flex-direction:row;width:800px;height:480px;max-width:100vw;max-height:100vh;aspect-ratio:5 / 3;background-color:#000;position:relative;box-shadow:0 0 20px #000c}#playfield-container{width:480px;height:480px;position:relative;flex-shrink:0;background-color:#000}#playfield-canvas{width:480px;height:480px;display:block;image-rendering:pixelated;image-rendering:crisp-edges}#tutorial-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:35}.tutorial-skip-btn{position:absolute;top:14px;left:14px;width:78px;height:27px;pointer-events:auto;background:url(/robonom/assets/tutorial-skip.png) no-repeat center;background-size:100% 100%;color:#fff;font-family:var(--font-family);font-weight:700;font-size:13px;letter-spacing:.5px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;padding-left:10px;padding-bottom:2px}.tutorial-skip-btn:hover{filter:brightness(1.15)}.tutorial-balloon{position:absolute;width:280px;min-height:120px;pointer-events:auto;background:url(/robonom/assets/tutorial-bg.png) no-repeat center;background-size:100% 100%;padding:16px 16px 10px;display:flex;flex-direction:column;justify-content:space-between;border-radius:8px;box-shadow:0 4px 12px #0009}.tutorial-text{color:#000;font-size:14px;font-weight:600;line-height:1.35}.tutorial-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.tutorial-tag{color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.tutorial-next-btn{width:32px;height:32px;border:none;background:url(/robonom/assets/appbar.transport.play.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%;cursor:pointer}.tutorial-next-btn:hover{filter:brightness(1.15)}.tutorial-arrow{position:absolute;width:47px;height:33px;background:url(/robonom/assets/tutorial-arrow.png) no-repeat center;background-size:contain;pointer-events:none;z-index:40}.animated-arrow{animation:arrow-bounce .7s ease-in-out infinite alternate}@keyframes arrow-bounce{0%{transform:translate(0)}to{transform:translate(6px)}}#message-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:50}.message-card{width:320px;background:var(--pantone-black6u);border:2px solid var(--accent-color);padding:20px;text-align:center;border-radius:4px;box-shadow:0 4px 16px #000c}.message-title{font-size:22px;font-weight:700;margin-bottom:10px;color:#fff}.message-body{font-size:14px;line-height:1.4;margin-bottom:18px;color:#eee}.message-action-btn{background-color:var(--accent-color);color:#fff;border:none;font-size:15px;font-weight:700;padding:8px 24px;cursor:pointer}.message-action-btn:hover{filter:brightness(1.15)}#control-area{width:320px;height:480px;padding:10px 14px;display:flex;flex-direction:column;justify-content:space-between;background-color:#000;flex-shrink:0}.input-panel{width:285px;height:200px;background:url(/robonom/assets/inputPanel.png) no-repeat center;background-size:100% 100%;padding:4px 6px 0 35px;display:flex;flex-direction:column;justify-content:flex-start}.input-row{display:flex;align-items:center;height:33px;cursor:pointer}.main-row{height:66px;align-items:stretch}.row-slots,.slots-subrow{display:flex;align-items:center;gap:0px;flex:1;height:33px}.main-slots-container{display:flex;flex-direction:column;justify-content:flex-start;flex:1;height:66px}.slots-subrow{height:33px}.slot{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.slot.active-cursor:after{content:"";position:absolute;width:2px;height:22px;background-color:#fff;left:0;animation:blink 1s step-start infinite}.slot.active-exec{outline:2px solid #ffffff;border-radius:4px;background-color:#ffffff59;box-shadow:0 0 6px #fffc}@keyframes blink{50%{opacity:0}}.glyph{width:24px;height:24px;display:block;border-radius:50%;background-size:100% 100%;background-repeat:no-repeat;background-position:center}.glyph-F{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%;transform:rotate(-90deg)}.glyph-B{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%;transform:rotate(90deg)}.glyph-L{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%;transform:rotate(180deg)}.glyph-R{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%}.glyph-X{background:url(/robonom/assets/xbutton.png) no-repeat center;background-size:100% 100%}.glyph-Y{background:url(/robonom/assets/ybutton.png) no-repeat center;background-size:100% 100%}.glyph-U,.glyph-A{background:url(/robonom/assets/abutton.png) no-repeat center;background-size:100% 100%}.glyph-V,.glyph-B-fn{background:url(/robonom/assets/bbutton.png) no-repeat center;background-size:100% 100%}.gamepad-area{display:flex;justify-content:space-between;align-items:center;padding:0 4px;min-height:110px}.dpad-container{display:flex;flex-direction:column;align-items:center}.dpad-middle{display:flex;align-items:center}.dpad-center{width:34px;height:34px}.gamepad-btn{width:38px;height:38px;border:none;cursor:pointer;background-color:transparent;transition:transform .05s ease}.gamepad-btn:active{transform:scale(.92)}.dpad-btn{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%}.dpad-btn:active{background:url(/robonom/assets/appbar.next.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.pressed.png) no-repeat center;background-size:100% 100%,100% 100%}.dpad-up{transform:rotate(-90deg)}.dpad-down{transform:rotate(90deg)}.dpad-left{transform:rotate(180deg)}.dpad-right{transform:rotate(0)}.face-buttons-cluster{position:relative;width:125px;height:100px}.face-btn{position:absolute;width:38px;height:38px;background-size:100% 100%;background-repeat:no-repeat;background-position:center}.face-x{left:0;top:36px;background-image:url(/robonom/assets/xbutton.png)}.face-y{left:34px;top:8px;background-image:url(/robonom/assets/ybutton.png)}.face-a{left:48px;top:54px;background-image:url(/robonom/assets/abutton.png)}.face-b{left:82px;top:26px;background-image:url(/robonom/assets/bbutton.png)}.level-display{text-align:center;font-size:13px;font-weight:700;letter-spacing:.5px;color:#fff;margin-top:-2px}.play-controls-row{display:flex;align-items:center;justify-content:space-between;padding:0 4px}.control-circle-btn{width:40px;height:40px;border:none;cursor:pointer;background-color:transparent}.control-circle-btn:active{transform:scale(.92)}.play-btn{background:url(/robonom/assets/appbar.transport.play.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%}.play-btn.playing{background:url(/robonom/assets/appbar.stop.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%}.speed-slider-container{width:180px;height:32px;position:relative;display:flex;align-items:center;background:url(/robonom/assets/speed-bg.png) no-repeat center;background-size:100% 100%}#speed-slider{width:100%;opacity:0;position:absolute;cursor:pointer;z-index:5;height:100%}.speed-thumb-visual{position:absolute;width:55px;height:32px;background:url(/robonom/assets/speed-thumb.png) no-repeat center;background-size:contain;pointer-events:none;left:0;transition:left .05s linear}.backspace-btn{width:38px;height:32px;border:none;background:url(/robonom/assets/backspace.png) no-repeat center;background-size:100% 100%;cursor:pointer}.backspace-btn:active{transform:scale(.92)}.action-bar-row{display:flex;align-items:center;padding:0 4px}.score-box{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;margin-right:8px;background-size:100% 100%;background-repeat:no-repeat;background-position:center}.score-box-size{background-image:url(/robonom/assets/yourScore.png)}.score-box-limit{background-image:url(/robonom/assets/bestScore.png)}.score-number{font-size:20px;font-weight:700;color:#fff;line-height:1}.action-bar-spacer{flex:1}.save-btn{background:url(/robonom/assets/appbar.save.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%;margin-right:8px}.settings-btn{background:url(/robonom/assets/appbar.feature.settings.rest.png) no-repeat center,url(/robonom/assets/appbar.basecircle.rest.png) no-repeat center;background-size:100% 100%,100% 100%}.metro-dialog{border:none;background:#51555ef5;color:#fff;max-width:760px;width:90%;max-height:440px;margin:auto;border-radius:0;box-shadow:0 0 30px #000000e6;padding:24px}.metro-dialog::backdrop{background:#000000b3}.menu-tiles-grid{display:grid;grid-template-columns:repeat(2,130px);gap:20px;justify-content:center;padding:20px 0}.metro-tile{width:130px;height:130px;background-color:var(--accent-color);border:none;color:#fff;cursor:pointer;display:flex;align-items:flex-end;padding:12px;transition:transform .1s ease,filter .1s ease}.metro-tile:hover{filter:brightness(1.15)}.metro-tile:active{transform:scale(.95)}.tile-label{font-size:16px;font-weight:700;text-align:left;line-height:1.2}.level-selector-layout{display:flex;gap:24px;align-items:center;justify-content:center}.chapters-view-container{display:flex;flex-direction:column;gap:16px}.all-chapters-grid{display:grid;grid-template-columns:repeat(4,110px);gap:14px;justify-content:center}.chapter-tile-item{width:110px;height:100px;background-color:var(--accent-color);border:2px solid transparent;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:10px;cursor:pointer;transition:transform .1s ease,filter .1s ease}.chapter-tile-item:hover{filter:brightness(1.15)}.chapter-tile-item.active-chapter{border-color:#fff}.chapter-tile-item.locked{background-color:#444;cursor:not-allowed;opacity:.6}.chapter-tile-title{font-size:16px;font-weight:700;line-height:1.2}.chapter-tile-status{font-size:12px;color:#eee;align-self:flex-end}.chapter-big-tile{width:180px;height:180px;background-color:var(--accent-color);border:none;display:flex;flex-direction:column;justify-content:space-between;padding:0;position:relative;cursor:pointer;color:#fff;overflow:hidden;transition:filter .1s ease}.chapter-big-tile:hover{filter:brightness(1.15)}.chapter-back-icon{position:absolute;top:0;left:0;width:70px;height:60px;background:url(/robonom/assets/BackArrowBig.png) no-repeat top left;background-size:contain;pointer-events:none}.chapter-big-title{font-size:24px;font-weight:700;position:absolute;bottom:12px;right:14px}.levels-8-grid{display:grid;grid-template-columns:repeat(4,80px);grid-template-rows:repeat(2,80px);gap:12px}.level-tile{width:80px;height:80px;background-color:var(--accent-color);border:2px solid transparent;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:8px;cursor:pointer;transition:filter .1s ease}.level-tile:hover{filter:brightness(1.15)}.level-tile.solved{background-color:var(--green-solved)}.level-tile.active-level{border-color:#fff}.level-tile.locked{background-color:#444;cursor:not-allowed;opacity:.6}.level-tile-check{width:18px;height:18px;background:url(/robonom/assets/checkMark.png) no-repeat center;background-size:contain}.level-tile-lock{width:18px;height:18px;background:url(/robonom/assets/levelLocked.png) no-repeat center;background-size:contain}.level-tile-num{font-size:18px;font-weight:700;align-self:flex-end}.dialog-bottom-bar{display:flex;justify-content:flex-end;margin-top:16px}.dialog-content-wrapper{display:flex;flex-direction:column;max-height:380px}.dialog-heading{font-size:24px;font-weight:700;margin-bottom:12px}.help-scroll-content,.about-scroll-content{overflow-y:auto;max-height:240px;padding-right:12px;line-height:1.45;font-size:14px}.about-scroll-content a{color:#60cdff;text-decoration:underline}.about-scroll-content a:hover{color:#a8e3ff}.help-list{margin:10px 0 10px 20px}.dialog-side-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.metro-action-btn{background-color:var(--accent-color);color:#fff;border:none;font-size:14px;font-weight:700;padding:8px 18px;cursor:pointer}.metro-action-btn:hover{filter:brightness(1.15)}.danger-btn{background-color:#b91d47}.reset-confirm{display:flex;align-items:center;gap:10px}.confirm-btns{display:flex;gap:6px}.mini-btn{padding:4px 12px;font-size:12px}.hidden{display:none!important}.mobile-nav-buffer{display:none}@media (max-aspect-ratio: 1/1),(max-width: 768px){html{overflow-y:auto;height:auto;min-height:100%}body{overflow-y:auto;height:auto;min-height:100%;align-items:flex-start}#app{padding:6px 0 24px;align-items:flex-start;height:auto;min-height:100%}#game-container{flex-direction:column;width:100vw;height:auto;max-width:440px;max-height:none;aspect-ratio:auto;align-items:center;box-shadow:none;padding-bottom:10px}#playfield-container{width:min(92vw,360px);height:min(92vw,360px);aspect-ratio:1 / 1;margin:4px auto 8px;flex-shrink:0}#playfield-canvas{width:100%;height:100%}#control-area{width:100%;max-width:320px;height:auto;flex-shrink:0;margin:0 auto;padding:4px 8px;gap:6px}.input-panel{width:285px;height:200px;flex-shrink:0;margin:0 auto;background-size:100% 100%}.gamepad-area{min-height:96px;padding:0}.speed-slider-container{width:180px}.mobile-nav-buffer{display:block;height:2.5em;width:100%;flex-shrink:0}}
