@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('../public/fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url('../public/fonts/manrope-500.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url('../public/fonts/manrope-600.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url('../public/fonts/manrope-700.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url('../public/fonts/manrope-800.ttf') format('truetype')}
:root{font-family:Manrope,system-ui,sans-serif;color:#dce7ef;background:#09131e;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#1c3346 0%,#0b1723 62%,#07101a 100%);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}button:focus-visible{outline:2px solid #81e6ee;outline-offset:3px}.app{width:min(1480px,100vw);padding:18px 24px}.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:2.4px;color:#cddbe4;margin:0 0 14px 3px}.brand-mark{display:grid;place-items:center;position:relative;width:29px;height:29px;border:1px solid #66717a;border-radius:8px;color:#ffc357;font-size:19px;letter-spacing:-3px}.brand-mark span{font-size:13px}.prototype{margin-left:auto;font-size:9px;letter-spacing:1.8px;font-weight:600;color:#728696}.game{position:relative;width:100%;aspect-ratio:16/9;border-radius:15px;overflow:hidden;box-shadow:0 30px 70px #0007,0 0 0 1px rgba(84,106,127,0.333);isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;container-type:inline-size;background:#132537}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;inset:0 0 auto;height:10.6%;padding:0 2.3%;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(23,42,61,0.933),rgba(20,36,55,0.961));border-bottom:1px solid rgba(129,153,181,0.220);box-shadow:0 3px 10px #0003}.level-number{display:flex;align-items:center;gap:12px}.level-number>span{writing-mode:vertical-rl;font-size:.61vw;font-weight:700;letter-spacing:.13vw;color:#7e9bb0}.level-number strong{font-size:2.5vw;font-weight:800;letter-spacing:-.1vw;line-height:1}.level-number strong span{font-size:.9vw;color:#637a8c;letter-spacing:0;margin-left:5px}.level-heading{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}.eyebrow{font-size:.65vw;color:#859caa;letter-spacing:.15vw;font-weight:700}.level-heading h1{margin:.25vw 0 0;font-size:1.45vw;letter-spacing:.01vw;font-weight:700}.hud-actions{display:flex;gap:.55vw}.icon-button{display:grid;place-items:center;width:2.8vw;height:2.8vw;border:1px solid rgba(130,150,163,0.157);border-radius:.7vw;background:rgba(10,23,37,0.302);color:#a6bbc9;transition:background .2s}.icon-button:hover{background:#3d536b}.icon-button svg{width:1.5vw;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.bottom-panel{position:absolute;bottom:0;left:0;right:0;height:14.8%;padding:1.5% 2.1%;display:flex;align-items:center;gap:2%;background:linear-gradient(180deg,rgba(27,43,58,0.941),rgba(14,28,44,0.984));border-top:1px solid rgba(117,144,164,0.239)}.move-controls{display:flex;gap:1vw;height:100%}.control{width:7.4vw;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#35475c,#243447);border:2px solid #6a7f95;border-radius:1vw;box-shadow:inset 0 0 0 2px #0e2034,0 3px 0 #06101d;transition:filter .15s,transform .1s}.control svg{width:3.5vw;height:3.5vw;fill:#d5e3ec;filter:drop-shadow(0 2px 1px #0005);margin-bottom:.6vw}.control kbd{position:absolute;bottom:.3vw;font:700 .55vw Manrope,system-ui;letter-spacing:.1vw;color:#8ba3b8}.control.active,.control:active{background:linear-gradient(145deg,#426481,#263e56);transform:translateY(2px);box-shadow:inset 0 0 0 2px #0e2034}.jump{width:10vw}.jump svg{fill:#f9c267}.computer{flex:1;min-width:0;padding:.3vw 1.6vw;border-left:1px solid rgba(83,104,125,0.333)}.computer-label{display:flex;align-items:center;gap:.5vw;color:#86a5b8;font-size:.58vw;letter-spacing:.12vw;font-weight:800}.computer-label i,.page-footer i{display:inline-block;background:#6ce3d8;border-radius:50%;width:5px;height:5px;box-shadow:0 0 9px rgba(119,238,221,0.400)}.computer-label span{margin-left:auto;color:#587282;font-size:.53vw}.computer p{font-size:1.27vw;color:#9fe5ed;letter-spacing:.02vw;margin:.5vw 0 .24vw;font-weight:600}.objective{font-size:.71vw;color:#7c98ac}.page-footer{display:flex;justify-content:space-between;align-items:center;color:#667e90;font-size:10px;letter-spacing:.4px;padding:15px 3px 0;gap:15px}.page-footer>span:first-child{letter-spacing:1.6px;font-size:9px;display:flex;align-items:center;gap:8px}.page-footer button{border:0;background:none;font-size:10px;color:#a8b9c5;padding:3px}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:rgba(11,25,38,0.910);backdrop-filter:blur(7px)}.hidden{display:none!important}.loading-mark{font-size:4vw;color:#ffc357;font-weight:800}.loading-mark span{color:#c9e0ed}.overlay>p{font-size:1.3vw}.overlay>small{color:#748c9b}.modal{text-align:center;border:1px solid rgba(99,127,148,0.302);background:linear-gradient(150deg,#253c50,#132537);border-radius:1.6vw;padding:3.2vw 4.5vw;box-shadow:0 20px 70px #0005;min-width:33vw}.modal .eyebrow{display:block;color:#8facb9}.modal h2{font-size:2.65vw;margin:1vw 0;letter-spacing:-.08vw}.modal p{font-size:1vw;line-height:1.8;color:#a6bfcb}.primary{display:flex;gap:3vw;justify-content:space-between;align-items:center;border:1px solid #ffe3a6;background:linear-gradient(150deg,#ffd078,#eeb146);color:#273344;border-radius:.7vw;font-size:1.05vw;font-weight:800;margin:1.5vw auto 0;padding:1.1vw 1.5vw;min-width:23vw;box-shadow:0 4px 0 #876423}.primary:hover{filter:brightness(1.07)}.success-icon{display:grid;place-items:center;margin:0 auto 1.4vw;width:3.8vw;height:3.8vw;background:rgba(79,178,164,0.145);border:1px solid #6ad7c7;border-radius:50%;font-size:2vw;color:#8bf1d9}.stats{display:flex;justify-content:center;gap:3vw;margin:1.4vw 0;font-size:.6vw;letter-spacing:.12vw;color:#8aa5b6}.stats strong{display:block;font-size:1.4vw;margin-top:.4vw;letter-spacing:0;color:#e8f1f4}.game:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto;background:#081521}.game:fullscreen canvas{object-fit:contain}.game:fullscreen{width:min(100vw,177.7778vh);height:min(100vh,56.25vw);margin:auto}.game:fullscreen::backdrop{background:#07111b}@media(max-height:700px) and (min-aspect-ratio:16/10){.app{width:min(1480px,calc((100vh - 48px)*16/9));padding:0}.brand{margin:0 0 7px;font-size:9px;gap:8px}.brand-mark{width:22px;height:22px;font-size:14px;border-radius:5px}.prototype{font-size:8px}.page-footer{padding-top:7px;font-size:8px}.page-footer>span:nth-child(2){display:none}}@media(pointer:coarse){.control kbd{display:none}.control svg{margin-bottom:0}.icon-button{width:3.5vw;height:3.5vw}.icon-button svg{width:1.9vw}.objective{font-size:.9vw}.computer-label{font-size:.7vw}.computer p{font-size:1.4vw}}@media(max-width:600px) and (orientation:portrait){.app{padding:10px 7px}.brand{font-size:8px;letter-spacing:1px}.prototype{font-size:7px;letter-spacing:.5px}.page-footer>span:nth-child(2){display:none}.page-footer{font-size:8px}.game{border-radius:8px}.game::after{content:'Для удобства поверни телефон ↻';position:absolute;bottom:17%;left:50%;transform:translateX(-50%);background:rgba(17,38,56,0.867);color:#d2e1eb;font-size:10px;padding:6px 10px;border-radius:20px;white-space:nowrap;pointer-events:none;animation:fade-tip 1s 5s forwards}}@keyframes fade-tip{to{opacity:0}}

@media(max-height:500px) and (orientation:landscape){.app{width:min(100vw,177.77778vh);padding:0}.brand,.page-footer{display:none}.game{border-radius:0}.bottom-panel{padding:.8% 2.1%}.computer-label{display:none}.computer p{font-size:1.7vw}.objective{font-size:1.25vw}.icon-button{width:4.5vw;height:4.5vw}.icon-button svg{width:2.4vw}.hud-actions{gap:.8vw}.control kbd{display:none}.control svg{margin:0}.level-heading h1{font-size:1.7vw}.eyebrow{font-size:.8vw}}

.overlay{padding:2vw}.modal{max-height:94%;overflow:auto}.menu-modal{min-width:38vw}.wide-modal{width:min(82vw,980px);padding:2.2vw}.text-button{display:block;border:0;background:transparent;color:#a6dce7;font-size:1vw;font-weight:700;margin:1.3vw auto 0;padding:.5vw 1vw}.text-button:hover{color:#fff;text-decoration:underline}.level-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.65vw;max-height:29vw;overflow:auto;padding:.4vw;scrollbar-color:#7192a6 transparent}.level-tile{position:relative;min-height:4.4vw;border:1px solid rgba(102,131,151,0.533);border-radius:.6vw;background:#1a3145;color:#d7e7ef;font-size:1.3vw;font-weight:800}.level-tile small{display:block;font-size:.6vw;color:#88abba;margin-top:.2vw}.level-tile.complete{border-color:rgba(123,227,193,0.533);background:#1d473f}.level-tile.current{border-color:#f4c676;background:#674a24}.level-tile.skipped{border-color:#b6a57d;background:#454136}.level-tile:disabled{opacity:.35;cursor:not-allowed}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:2vw;margin:1.2vw 0;font-size:1vw}.chip{border:1px solid #6a93a0;background:#18394a;border-radius:.6vw;padding:.7vw 1vw;color:#c8e4e6;font-weight:700;font-size:.9vw}.chip:hover{background:#28556a}.wide-modal h2{margin:.5vw 0}.wide-modal p{margin:.4vw 0 1vw}.overlay:has(.wide-modal){background:rgba(8,23,37,0.949)}
@media(max-height:500px) and (orientation:landscape){.modal{padding:2vw 3vw}.modal h2{font-size:3vw;margin:.3vw 0}.modal p{font-size:1.3vw;margin:.2vw 0;line-height:1.5}.primary{font-size:1.4vw;padding:.7vw 1.2vw;margin:.8vw auto 0}.text-button{font-size:1.3vw;margin:.5vw auto 0}.level-grid{max-height:27vw}.level-tile{min-height:4vw}.wide-modal{padding:1vw 2vw}.setting-row{margin:.6vw 0}}
.room-action{position:absolute;z-index:5;top:17%;left:47%;border:1px solid #ffe3a6;border-radius:.5vw;background:#f1b955;color:#23394a;padding:.7vw 1.2vw;font-size:1vw;font-weight:800;box-shadow:0 4px 0 #6c522c}.title-controls{position:absolute;z-index:5;top:17%;left:50%;transform:translateX(-50%);display:flex;gap:1vw}.title-controls button{border:1px solid #93acb8;background:#243a50;color:#e0f1f2;border-radius:.5vw;padding:.65vw 1.2vw;font-size:1vw;font-weight:800}.title-controls button:active{background:#568393}
.game.spike-mode .move-controls,.game.spike-mode .jump{visibility:hidden}.game.spike-mode .computer{border-left:0}
#mini-window{position:absolute;inset:0;z-index:28;display:grid;place-items:center;background:rgba(6,18,29,0.800);backdrop-filter:blur(4px)}.mini-shell{width:49%;border:2px solid #86c4bd;border-radius:1vw;background:#1e3446;box-shadow:0 20px 70px #000b;padding:1vw}.mini-bar{font-size:1vw;font-weight:800;letter-spacing:.1vw;color:#d6f2e9;border-bottom:1px solid #83aba7;padding:.3vw .5vw .8vw}.mini-room{position:relative;height:20vw;margin-top:1vw;border:2px solid #587885;border-radius:.6vw;background:linear-gradient(#355166,#182e40)}.mini-room:after{content:'';position:absolute;left:0;right:0;bottom:1vw;border-top:5px solid #9cafb7}#mini-robot{position:absolute;left:7%;bottom:1.4vw;width:9%;height:8vw;object-fit:contain;touch-action:none;user-select:none;cursor:grab}#mini-switch{position:absolute;left:49%;bottom:1vw;width:10%;height:1.5vw;border:1px solid #ffd997;border-radius:.5vw;background:#f7bc55;z-index:1}#mini-switch.active{background:#7ce4b8}#mini-exit{position:absolute;right:5%;bottom:1.3vw;width:17%;height:9vw;border:2px solid #9cbdc3;border-radius:1vw;background:#223c4b;font-size:.8vw;font-weight:800}#mini-exit.active{background:#4c9987;color:#eaffed}.mini-shell p{font-size:.85vw;color:#b7d2d8;text-align:center;margin:.8vw 0 .2vw}
.orientation-tip{display:none}@media(max-width:600px) and (orientation:portrait){.game::after{content:none}.orientation-tip{position:absolute;inset:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(16,38,56,0.961);color:#e2f4f2;font-size:40px;font-weight:800}.orientation-tip span{font-size:14px;text-align:center;letter-spacing:.2px;padding:0 14px}}
@media(max-height:500px) and (orientation:landscape){.modal{min-width:min(76vw,590px);padding:15px 22px;border-radius:12px}.modal .eyebrow{font-size:9px;letter-spacing:1px}.modal h2{font-size:23px;letter-spacing:-.5px;margin:5px 0 9px}.modal p{font-size:12px;line-height:1.4;margin:4px 0 8px}.setting-row{font-size:12px;gap:18px;margin:7px 0}.chip{font-size:11px;padding:5px 10px;min-height:30px;border-radius:6px}.text-button{font-size:12px;margin:6px auto 0;padding:5px 9px}.primary{font-size:13px;min-width:190px;padding:8px 12px;margin:9px auto 0;border-radius:7px}.wide-modal{width:min(87vw,680px);padding:10px 16px}.level-grid{max-height:205px;gap:4px}.level-tile{min-height:31px;font-size:13px;border-radius:5px}.level-tile small{font-size:9px}.stats{gap:20px;font-size:9px}.stats strong{font-size:17px}}
@media(max-height:500px) and (orientation:landscape){.chip{min-height:36px;font-size:12px;padding:7px 12px}.text-button{min-height:32px}}
@media(max-height:500px) and (orientation:landscape){.level-grid{grid-template-columns:repeat(8,minmax(0,1fr));max-height:205px}.level-tile{min-height:36px}}
.level-grid,.level-tile{touch-action:pan-y}.level-grid{overscroll-behavior:contain}

/* Keep the complete play field inside short desktop and tablet viewports. */
.app{width:min(1480px,100vw,calc((100vh - 116px)*1.7777778 + 48px))}
@media(max-height:700px) and (min-aspect-ratio:16/10){
  .app{width:min(1480px,calc((100vh - 72px)*1.7777778));padding:0}
}
@media(max-height:500px) and (orientation:landscape){
  .app{width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc(100vh*1.7777778));padding:0;margin-inline-start:env(safe-area-inset-left);margin-inline-end:env(safe-area-inset-right)}
  .hud-actions{gap:max(3px,.5vw)}
  .icon-button{width:clamp(23px,5.3vw,35px);height:clamp(23px,5.3vw,35px)}
  .icon-button svg{width:clamp(15px,2.8vw,19px)}
  .control{width:clamp(38px,9vw,64px)}
  .control.jump{width:clamp(52px,12vw,80px)}
  .control svg{width:clamp(20px,4.5vw,29px);height:clamp(20px,4.5vw,29px)}
  .level-heading .eyebrow{display:none}
  .level-heading{left:49%;top:50%;transform:translate(-50%,-50%);max-width:32%;line-height:1.05}
  .level-heading h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;font-size:clamp(10px,1.7vw,14px);line-height:1.12;margin:0}
  .computer p{font-size:clamp(10px,1.8vw,13px);line-height:1.3;margin:.25vw 0 .1vw}
  .objective{font-size:clamp(9px,1.35vw,11px);line-height:1.25}
  .room-action,.title-controls button{font-size:clamp(11px,1.8vw,15px);min-height:30px;padding:5px 9px;border-radius:6px}
  .mini-shell{width:min(85%,420px);padding:10px;border-radius:8px}
  .mini-bar{font-size:clamp(10px,1.5vw,13px);line-height:1.25;padding:2px 4px 7px}
  .mini-room{height:clamp(105px,20vw,170px);margin-top:8px}
  #mini-robot{width:max(9%,36px);height:clamp(42px,8vw,70px)}
  #mini-exit{width:max(17%,60px);height:clamp(42px,9vw,65px);font-size:clamp(10px,1.4vw,13px)}
  .mini-shell p{font-size:clamp(10px,1.35vw,12px);line-height:1.2;margin:6px 0 2px}
  .wide-modal{display:flex;flex-direction:column;max-height:calc(100% - 8px);overflow:hidden}
  .level-grid{min-height:0;flex:1 1 auto;overflow-y:auto}
  #levels-back{flex:0 0 auto}
}
@media(orientation:portrait) and (pointer:coarse) and (min-width:601px){
  .orientation-tip{position:absolute;inset:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(16,38,56,0.961);color:#e2f4f2;font-size:40px;font-weight:800}
  .orientation-tip span{font-size:14px;text-align:center;letter-spacing:.2px;padding:0 14px}
}

.level-heading .eyebrow.gate-ready{color:#a5f4d2;text-shadow:0 0 12px rgba(87,230,173,0.600)}
.hint-status{color:#ffd089!important;font-size:clamp(10px,.9vw,15px)!important;line-height:1.4!important;max-width:35vw;margin:.7vw auto!important}
.hint-status:empty{display:none}
.yandex-hosted{height:100vh}
.yandex-hosted .app{width:min(100vw,177.77778vh);padding:0}
.yandex-hosted .brand,.yandex-hosted .page-footer{display:none}
.yandex-hosted .game{border-radius:0;box-shadow:none}
@media(pointer:coarse){.move-controls .control::after{content:'↑';position:absolute;right:5px;top:1px;color:#ffc865;font-size:clamp(9px,1.5vw,14px);font-weight:800;line-height:1}}

/* The room and its objects provide puzzle feedback; controls stay at the edges. */
.bottom-panel{justify-content:space-between;background:linear-gradient(180deg,rgba(23,42,61,0.600),rgba(14,28,44,0.867))}
.level-heading h1{margin:0}
.system-notice{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);background:rgba(17,38,56,0.933);padding:8px 14px;border-radius:8px;color:#d2e1eb;font-size:12px;pointer-events:none}

/* Applied only to the no-module build. The main stylesheet remains unchanged. */
html,body{height:100%}
body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-height:100vh}
.app,.yandex-hosted .app{width:100%;max-width:none;padding:0;margin:0 auto}
.brand,.page-footer{display:none}
.game{width:100%;border-radius:0;box-shadow:none}
.hud{top:0;right:0;left:0}
.overlay,#mini-window,.orientation-tip{top:0;right:0;bottom:0;left:0}
.level-grid{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.level-tile{width:10%;min-width:0}
.icon-button,.brand-mark,.success-icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
#mini-window{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
@media(max-width:600px) and (orientation:portrait){.orientation-tip{position:fixed}}
