@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:100svh;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 #546a7f55;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,#172a3dee,#142437f5);border-bottom:1px solid #8199b538;box-shadow:0 3px 10px #0003}.level-number{display:flex;align-items:center;gap:12px}.level-number>span{writing-mode:vertical-rl;font-size:.61cqw;font-weight:700;letter-spacing:.13cqw;color:#7e9bb0}.level-number strong{font-size:2.5cqw;font-weight:800;letter-spacing:-.1cqw;line-height:1}.level-number strong span{font-size:.9cqw;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:.65cqw;color:#859caa;letter-spacing:.15cqw;font-weight:700}.level-heading h1{margin:.25cqw 0 0;font-size:1.45cqw;letter-spacing:.01cqw;font-weight:700}.hud-actions{display:flex;gap:.55cqw}.icon-button{display:grid;place-items:center;width:2.8cqw;height:2.8cqw;border:1px solid #8296a328;border-radius:.7cqw;background:#0a17254d;color:#a6bbc9;transition:background .2s}.icon-button:hover{background:#3d536b}.icon-button svg{width:1.5cqw;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,#1b2b3af0,#0e1c2cfb);border-top:1px solid #7590a43d}.move-controls{display:flex;gap:1cqw;height:100%}.control{width:7.4cqw;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#35475c,#243447);border:2px solid #6a7f95;border-radius:1cqw;box-shadow:inset 0 0 0 2px #0e2034,0 3px 0 #06101d;transition:filter .15s,transform .1s}.control svg{width:3.5cqw;height:3.5cqw;fill:#d5e3ec;filter:drop-shadow(0 2px 1px #0005);margin-bottom:.6cqw}.control kbd{position:absolute;bottom:.3cqw;font:700 .55cqw Manrope,system-ui;letter-spacing:.1cqw;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:10cqw}.jump svg{fill:#f9c267}.computer{flex:1;min-width:0;padding:.3cqw 1.6cqw;border-left:1px solid #53687d55}.computer-label{display:flex;align-items:center;gap:.5cqw;color:#86a5b8;font-size:.58cqw;letter-spacing:.12cqw;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 #77eedd66}.computer-label span{margin-left:auto;color:#587282;font-size:.53cqw}.computer p{font-size:1.27cqw;color:#9fe5ed;letter-spacing:.02cqw;margin:.5cqw 0 .24cqw;font-weight:600}.objective{font-size:.71cqw;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:#0b1926e8;backdrop-filter:blur(7px)}.hidden{display:none!important}.loading-mark{font-size:4cqw;color:#ffc357;font-weight:800}.loading-mark span{color:#c9e0ed}.overlay>p{font-size:1.3cqw}.overlay>small{color:#748c9b}.modal{text-align:center;border:1px solid #637f944d;background:linear-gradient(150deg,#253c50,#132537);border-radius:1.6cqw;padding:3.2cqw 4.5cqw;box-shadow:0 20px 70px #0005;min-width:33cqw}.modal .eyebrow{display:block;color:#8facb9}.modal h2{font-size:2.65cqw;margin:1cqw 0;letter-spacing:-.08cqw}.modal p{font-size:1cqw;line-height:1.8;color:#a6bfcb}.primary{display:flex;gap:3cqw;justify-content:space-between;align-items:center;border:1px solid #ffe3a6;background:linear-gradient(150deg,#ffd078,#eeb146);color:#273344;border-radius:.7cqw;font-size:1.05cqw;font-weight:800;margin:1.5cqw auto 0;padding:1.1cqw 1.5cqw;min-width:23cqw;box-shadow:0 4px 0 #876423}.primary:hover{filter:brightness(1.07)}.success-icon{display:grid;place-items:center;margin:0 auto 1.4cqw;width:3.8cqw;height:3.8cqw;background:#4fb2a425;border:1px solid #6ad7c7;border-radius:50%;font-size:2cqw;color:#8bf1d9}.stats{display:flex;justify-content:center;gap:3cqw;margin:1.4cqw 0;font-size:.6cqw;letter-spacing:.12cqw;color:#8aa5b6}.stats strong{display:block;font-size:1.4cqw;margin-top:.4cqw;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((100svh - 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.5cqw;height:3.5cqw}.icon-button svg{width:1.9cqw}.objective{font-size:.9cqw}.computer-label{font-size:.7cqw}.computer p{font-size:1.4cqw}}@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:#112638dd;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.77778svh);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.7cqw}.objective{font-size:1.25cqw}.icon-button{width:4.5cqw;height:4.5cqw}.icon-button svg{width:2.4cqw}.hud-actions{gap:.8cqw}.control kbd{display:none}.control svg{margin:0}.level-heading h1{font-size:1.7cqw}.eyebrow{font-size:.8cqw}}

.overlay{padding:2cqw}.modal{max-height:94%;overflow:auto}.menu-modal{min-width:38cqw}.wide-modal{width:min(82cqw,980px);padding:2.2cqw}.text-button{display:block;border:0;background:transparent;color:#a6dce7;font-size:1cqw;font-weight:700;margin:1.3cqw auto 0;padding:.5cqw 1cqw}.text-button:hover{color:#fff;text-decoration:underline}.level-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.65cqw;max-height:29cqw;overflow:auto;padding:.4cqw;scrollbar-color:#7192a6 transparent}.level-tile{position:relative;min-height:4.4cqw;border:1px solid #66839788;border-radius:.6cqw;background:#1a3145;color:#d7e7ef;font-size:1.3cqw;font-weight:800}.level-tile small{display:block;font-size:.6cqw;color:#88abba;margin-top:.2cqw}.level-tile.complete{border-color:#7be3c188;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:2cqw;margin:1.2cqw 0;font-size:1cqw}.chip{border:1px solid #6a93a0;background:#18394a;border-radius:.6cqw;padding:.7cqw 1cqw;color:#c8e4e6;font-weight:700;font-size:.9cqw}.chip:hover{background:#28556a}.wide-modal h2{margin:.5cqw 0}.wide-modal p{margin:.4cqw 0 1cqw}.overlay:has(.wide-modal){background:#081725f2}
@media(max-height:500px) and (orientation:landscape){.modal{padding:2cqw 3cqw}.modal h2{font-size:3cqw;margin:.3cqw 0}.modal p{font-size:1.3cqw;margin:.2cqw 0;line-height:1.5}.primary{font-size:1.4cqw;padding:.7cqw 1.2cqw;margin:.8cqw auto 0}.text-button{font-size:1.3cqw;margin:.5cqw auto 0}.level-grid{max-height:27cqw}.level-tile{min-height:4cqw}.wide-modal{padding:1cqw 2cqw}.setting-row{margin:.6cqw 0}}
.room-action{position:absolute;z-index:5;top:17%;left:47%;border:1px solid #ffe3a6;border-radius:.5cqw;background:#f1b955;color:#23394a;padding:.7cqw 1.2cqw;font-size:1cqw;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:1cqw}.title-controls button{border:1px solid #93acb8;background:#243a50;color:#e0f1f2;border-radius:.5cqw;padding:.65cqw 1.2cqw;font-size:1cqw;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:#06121dcc;backdrop-filter:blur(4px)}.mini-shell{width:49%;border:2px solid #86c4bd;border-radius:1cqw;background:#1e3446;box-shadow:0 20px 70px #000b;padding:1cqw}.mini-bar{font-size:1cqw;font-weight:800;letter-spacing:.1cqw;color:#d6f2e9;border-bottom:1px solid #83aba7;padding:.3cqw .5cqw .8cqw}.mini-room{position:relative;height:20cqw;margin-top:1cqw;border:2px solid #587885;border-radius:.6cqw;background:linear-gradient(#355166,#182e40)}.mini-room:after{content:'';position:absolute;left:0;right:0;bottom:1cqw;border-top:5px solid #9cafb7}#mini-robot{position:absolute;left:7%;bottom:1.4cqw;width:9%;height:8cqw;object-fit:contain;touch-action:none;user-select:none;cursor:grab}#mini-switch{position:absolute;left:49%;bottom:1cqw;width:10%;height:1.5cqw;border:1px solid #ffd997;border-radius:.5cqw;background:#f7bc55;z-index:1}#mini-switch.active{background:#7ce4b8}#mini-exit{position:absolute;right:5%;bottom:1.3cqw;width:17%;height:9cqw;border:2px solid #9cbdc3;border-radius:1cqw;background:#223c4b;font-size:.8cqw;font-weight:800}#mini-exit.active{background:#4c9987;color:#eaffed}.mini-shell p{font-size:.85cqw;color:#b7d2d8;text-align:center;margin:.8cqw 0 .2cqw}
.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:#102638f5;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(76cqw,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(87cqw,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((100svh - 116px)*1.7777778 + 48px))}
@media(max-height:700px) and (min-aspect-ratio:16/10){
  .app{width:min(1480px,calc((100svh - 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(100svh*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,.5cqw)}
  .icon-button{width:clamp(23px,5.3cqw,35px);height:clamp(23px,5.3cqw,35px)}
  .icon-button svg{width:clamp(15px,2.8cqw,19px)}
  .control{width:clamp(38px,9cqw,64px)}
  .control.jump{width:clamp(52px,12cqw,80px)}
  .control svg{width:clamp(20px,4.5cqw,29px);height:clamp(20px,4.5cqw,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.7cqw,14px);line-height:1.12;margin:0}
  .computer p{font-size:clamp(10px,1.8cqw,13px);line-height:1.3;margin:.25cqw 0 .1cqw}
  .objective{font-size:clamp(9px,1.35cqw,11px);line-height:1.25}
  .room-action,.title-controls button{font-size:clamp(11px,1.8cqw,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.5cqw,13px);line-height:1.25;padding:2px 4px 7px}
  .mini-room{height:clamp(105px,20cqw,170px);margin-top:8px}
  #mini-robot{width:max(9%,36px);height:clamp(42px,8cqw,70px)}
  #mini-exit{width:max(17%,60px);height:clamp(42px,9cqw,65px);font-size:clamp(10px,1.4cqw,13px)}
  .mini-shell p{font-size:clamp(10px,1.35cqw,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:#102638f5;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 #57e6ad99}
.hint-status{color:#ffd089!important;font-size:clamp(10px,.9cqw,15px)!important;line-height:1.4!important;max-width:35cqw;margin:.7cqw auto!important}
.hint-status:empty{display:none}
.yandex-hosted{height:100svh}
.yandex-hosted .app{width:min(100vw,177.77778svh);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.5cqw,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,#172a3d99,#0e1c2cdd)}
.level-heading h1{margin:0}
.system-notice{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);background:#112638ee;padding:8px 14px;border-radius:8px;color:#d2e1eb;font-size:12px;pointer-events:none}