:root{--tile: 48px;--wall: #3c3f46;--floor: #e9ecef;--goal: #ffe08a;--box: #b07d33;--box2: #d39d52;--player: #2f7dd1;--accent: #15a362}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";width:100vw;height:100vh;height:100dvh;max-width:100vw;overflow:hidden}main{padding:16px;background:#121417;color:#f2f5f8;display:grid;grid-template-rows:auto 1fr;place-items:center center;gap:24px;width:100%;height:100%;overflow:hidden;background-image:url(./back-C8Cgj6jP.jpg);background-repeat:no-repeat;background-size:cover;-webkit-backdrop-filter:brightness(40%);backdrop-filter:brightness(40%)}@media screen and (orientation:landscape)and (max-height:500px){main{gap:12px;padding:8px}}@media(max-width:768px){main{gap:12px;padding:8px}}h1{font-size:20px;margin:8px 0;color:#e8eef5}#hud{display:flex;flex-direction:column;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;color:#cfd8e3;width:100%;max-width:500px}.pill{padding:4px 10px;border-radius:999px;background:#1b1f27;border:1px solid #262b36}.menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:#cfd8e3}.stats{display:grid;gap:2px}@media(max-width:768px){.stats{display:flex;height:fit-content;align-items:flex-end;align-self:flex-end}}.currentLevel{font-size:20px;line-height:24px;font-weight:700;min-width:112px}@media screen and (orientation:portrait)and (max-width:768px){.currentLevel{width:100%;text-align:center}}.game{display:grid;gap:16px;grid-template-columns:auto 1fr;align-self:start;max-height:calc(100vh - 80px);border-radius:6px;background:#121417cc}@media screen and (orientation:portrait)and (max-width:768px){.game{height:100%;grid-template-columns:unset;grid-template-rows:auto 1fr}}@media screen and (orientation:landscape)and (max-height:500px){.game{height:100%;width:100%}}.info{height:fit-content;display:grid;gap:16px;padding-left:6px}@media screen and (orientation:portrait)and (max-width:768px){.info{display:flex;justify-content:space-between;flex-wrap:wrap;padding:4px}}#root{position:relative;max-width:100%;width:100%;height:100%;touch-action:none;overflow:hidden;display:flex;gap:8px;flex-direction:column;align-items:center;justify-content:center}#grid{position:relative;display:grid;gap:0px;touch-action:none;-webkit-user-select:none;user-select:none;transform-origin:top left;max-height:100%;max-width:100%}.cell{width:var(--tile);height:var(--tile);position:relative;display:grid;place-items:center;transition:background-color 80ms linear}.wall{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%3e%3c!--%20Бесшовный%20тайл%2048×48:%20кирпичная%20кладка%20(шов%202px,%20кирпич%2022×10px,%20смещение%20ряда%20на%2012px)%20--%3e%3c!--%20Такой%20SVG%20можно%20повторять%20как%20фон%20(background-repeat)%20—%20узор%20стыкуется%20по%20всем%20краям.%20--%3e%3crect%20width='48'%20height='48'%20fill='%23d8d2c8'/%3e%3c!--%20раствор%20(фон)%20--%3e%3c!--%20Кирпичи:%20без%20обводок%20и%20скруглений,%20чтобы%20не%20было%20артефактов%20на%20швах%20--%3e%3cg%20fill='%23a65139'%20shape-rendering='crispEdges'%3e%3c!--%20Ряд%201%20(y=0):%20кирпичи%20по%2022px,%20шов%202px%20--%3e%3crect%20x='0'%20y='0'%20width='22'%20height='10'/%3e%3crect%20x='24'%20y='0'%20width='22'%20height='10'/%3e%3c!--%20Ряд%202%20(y=12):%20смещение%20на%2012px;%20крайние%20кирпичи%20«перетекают»%20через%20границы%20тайла%20--%3e%3crect%20x='0'%20y='12'%20width='10'%20height='10'/%3e%3c!--%20правая%20половина%20кирпича,%20левая%20половина%20в%20соседнем%20тайле%20слева%20--%3e%3crect%20x='12'%20y='12'%20width='22'%20height='10'/%3e%3crect%20x='36'%20y='12'%20width='12'%20height='10'/%3e%3c!--%20левая%20часть%20кирпича,%20правая%20часть%20в%20соседнем%20тайле%20справа%20--%3e%3c!--%20Ряд%203%20(y=24)%20--%3e%3crect%20x='0'%20y='24'%20width='22'%20height='10'/%3e%3crect%20x='24'%20y='24'%20width='22'%20height='10'/%3e%3c!--%20Ряд%204%20(y=36)%20--%3e%3crect%20x='0'%20y='36'%20width='10'%20height='10'/%3e%3crect%20x='12'%20y='36'%20width='22'%20height='10'/%3e%3crect%20x='36'%20y='36'%20width='12'%20height='10'/%3e%3c/g%3e%3c/svg%3e")}.floor{background:#1a1f28}.goal{background-color:#1a1f28;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20role='img'%20aria-label='Целевая%20клетка%20—%20прицел'%3e%3cdefs%3e%3c!--%20Маска%20вырезает%20пропуски%20по%20центру%20каждой%20стороны%20--%3e%3cmask%20id='gapMask'%3e%3c!--%20По%20умолчанию%20всё%20видно%20--%3e%3crect%20x='0'%20y='0'%20width='48'%20height='48'%20fill='%23fff'/%3e%3c!--%20Пропуски%20(чёрные%20области%20маски%20скрывают%20штрих)%20--%3e%3c!--%20Верх%20--%3e%3crect%20x='18'%20y='0'%20width='12'%20height='12'%20fill='%23000'/%3e%3c!--%20Низ%20--%3e%3crect%20x='18'%20y='36'%20width='12'%20height='12'%20fill='%23000'/%3e%3c!--%20Лево%20--%3e%3crect%20x='0'%20y='18'%20width='12'%20height='12'%20fill='%23000'/%3e%3c!--%20Право%20--%3e%3crect%20x='36'%20y='18'%20width='12'%20height='12'%20fill='%23000'/%3e%3c/mask%3e%3c/defs%3e%3c!--%20Контур%20прицела:%20скруглённый%20квадрат%20со%20штрихом%20серого%20цвета%20и%20пропусками%20--%3e%3crect%20x='4.5'%20y='4.5'%20width='39'%20height='39'%20rx='8'%20ry='8'%20fill='none'%20stroke='%238e99a7'%20stroke-width='3'%20stroke-linejoin='round'%20stroke-linecap='round'%20vector-effect='non-scaling-stroke'%20mask='url(%23gapMask)'%20/%3e%3c/svg%3e")}.box{width:72%;height:72%}.on-goal .box{outline:3px solid var(--accent);box-shadow:inset 0 0 0 2px #00000040,0 2px 10px #15a36299}#actors{position:absolute;inset:0;pointer-events:none}#player,.box-actor{position:absolute;width:var(--tile);height:var(--tile);transform:translate(0);transition:transform .18s ease-in-out;will-change:transform}.box-actor{width:48px;height:48px;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20role='img'%20aria-label='Деревянный%20ящик%2048×48%20из%20досок'%20shape-rendering='crispEdges'%3e%3cdefs%3e%3c!--%20Общая%20палитра%20--%3e%3clinearGradient%20id='woodBody'%20x1='0'%20y1='4'%20x2='0'%20y2='44'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23c7924b'/%3e%3cstop%20offset='1'%20stop-color='%23a8743d'/%3e%3c/linearGradient%3e%3clinearGradient%20id='woodFrame'%20x1='0'%20y1='0'%20x2='0'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%239a6a35'/%3e%3cstop%20offset='1'%20stop-color='%237f5329'/%3e%3c/linearGradient%3e%3clinearGradient%20id='braceGrad'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3e%3cstop%20offset='0'%20stop-color='%23b07a3d'/%3e%3cstop%20offset='1'%20stop-color='%238e6030'/%3e%3c/linearGradient%3e%3c!--%20Клип%20для%20внутренней%20области%20(чтобы%20диагонали%20и%20текстура%20не%20выходили%20за%20рамку)%20--%3e%3cclipPath%20id='innerClip'%3e%3crect%20x='4'%20y='4'%20width='40'%20height='40'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c!--%20РАМКА%20ЯЩИКА%20--%3e%3crect%20x='0'%20y='0'%20width='48'%20height='48'%20fill='%236e4a25'/%3e%3crect%20x='0'%20y='0'%20width='48'%20height='4'%20fill='url(%23woodFrame)'/%3e%3c!--%20верхняя%20доска%20--%3e%3crect%20x='0'%20y='44'%20width='48'%20height='4'%20fill='url(%23woodFrame)'/%3e%3c!--%20нижняя%20доска%20--%3e%3crect%20x='0'%20y='0'%20width='4'%20height='48'%20fill='url(%23woodFrame)'/%3e%3c!--%20левая%20доска%20--%3e%3crect%20x='44'%20y='0'%20width='4'%20height='48'%20fill='url(%23woodFrame)'/%3e%3c!--%20правая%20доска%20--%3e%3c!--%20ВНУТРЕННЕЕ%20ПОЛЕ%20И%20ВЕРТИКАЛЬНЫЕ%20ДОСКИ%20--%3e%3crect%20x='4'%20y='4'%20width='40'%20height='40'%20fill='url(%23woodBody)'/%3e%3c!--%20Швы%20между%20досками%20(делят%20на%205%20досок%20по%208px)%20--%3e%3cg%20fill='%238f6232'%20opacity='0.85'%3e%3crect%20x='12'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='20'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='28'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='36'%20y='4'%20width='1'%20height='40'/%3e%3c/g%3e%3c!--%20Лёгкие%20светлые%20кромки%20у%20швов%20--%3e%3cg%20fill='%23d7a969'%20opacity='0.35'%3e%3crect%20x='13'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='21'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='29'%20y='4'%20width='1'%20height='40'/%3e%3crect%20x='37'%20y='4'%20width='1'%20height='40'/%3e%3c/g%3e%3c!--%20ДИАГОНАЛЬНЫЕ%20РАСПОРКИ%20(косые%20доски)%20--%3e%3cg%20clip-path='url(%23innerClip)'%3e%3c!--%20Вправо-вверх%20/%20влево-вниз%20--%3e%3crect%20x='-4'%20y='21'%20width='56'%20height='6'%20transform='rotate(45%2024%2024)'%20fill='url(%23braceGrad)'/%3e%3c!--%20Влево-вверх%20/%20вправо-вниз%20--%3e%3crect%20x='-4'%20y='21'%20width='56'%20height='6'%20transform='rotate(-45%2024%2024)'%20fill='url(%23braceGrad)'/%3e%3c/g%3e%3c!--%20ТЕКСТУРА%20ДЕРЕВА%20(тонкие%20волокна)%20--%3e%3cg%20clip-path='url(%23innerClip)'%20fill='none'%20stroke='%236b4626'%20stroke-opacity='0.25'%20stroke-width='1'%3e%3cpath%20d='M6%2010%20q4%203%208%200%20t8%200%20t8%200%20t8%200'%20/%3e%3cpath%20d='M6%2018%20q5%203%2010%200%20t10%200%20t10%200'%20/%3e%3cpath%20d='M6%2026%20q3%202%206%200%20t6%200%20t6%200%20t6%200%20t6%200'%20/%3e%3cpath%20d='M6%2034%20q4%203%208%200%20t8%200%20t8%200%20t8%200'%20/%3e%3c/g%3e%3c!--%20ГВОЗДИ/ШАПОЧКИ%20на%20раме%20--%3e%3cg%20fill='%235a3e20'%3e%3ccircle%20cx='9'%20cy='9'%20r='1.5'/%3e%3ccircle%20cx='39'%20cy='9'%20r='1.5'/%3e%3ccircle%20cx='9'%20cy='39'%20r='1.5'/%3e%3ccircle%20cx='39'%20cy='39'%20r='1.5'/%3e%3c/g%3e%3c!--%20Лёгкая%20внутренняя%20тень%20у%20рамы%20для%20объёма%20--%3e%3crect%20x='4'%20y='4'%20width='40'%20height='40'%20fill='none'%20stroke='rgba(0,0,0,0.25)'%20stroke-width='1'/%3e%3c!--%20Внешний%20мягкий%20блик%20на%20раме%20--%3e%3cg%20opacity='0.15'%3e%3crect%20x='0'%20y='0'%20width='48'%20height='4'%20fill='%23fff'/%3e%3crect%20x='0'%20y='0'%20width='4'%20height='48'%20fill='%23fff'/%3e%3c/g%3e%3c/svg%3e");background-color:#1a1f28}#player .sprite{width:100%;height:100%;transform-origin:center}#player.flip-x .sprite{transform:scaleX(-1)}.box-actor.on-goal .box-shape{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 2px #0000001a,0 0 12px #7cfc00}#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#00000080;border-radius:8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#overlay.visible{display:flex}#overlay .panel{background:#0f1319;border:1px solid #1e2531;border-radius:10px;padding:16px;text-align:center;min-width:280px;box-shadow:0 6px 20px #00000073}button{background-color:#3a475a;color:#eaf2fb;border:1px solid #2a3442;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;outline:none}button:focus{outline:none}button:hover{border-color:#3a475a}button:active{transform:translateY(1px)}.modal{position:fixed;inset:0;display:none;z-index:1000}.modal.show{display:block}.modal-backdrop{position:absolute;inset:0;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,calc(100% - 32px));max-height:min(82vh,820px);background:#0f1319;border:1px solid #1e2531;border-radius:12px;box-shadow:0 10px 40px #0000008c;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1e2531}.modal-header h3{margin:0;font-size:16px;color:#eaf2fb}.modal-body{padding:10px 12px;overflow:auto}.icon-btn{background:#1c2430;color:#eaf2fb;border:1px solid #2a3442;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:700}.icon-btn:hover{border-color:#3a475a}.modal-controls{display:none;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1e2531;flex-wrap:wrap}.modal-controls .jump{display:flex;gap:8px;align-items:center}.modal-controls input[type=number]{width:88px;padding:6px 8px;border-radius:8px;border:1px solid #2a3442;background:#0c1015;color:#eaf2fb}.modal-controls #pageInfo{color:#cfd8e3;font-size:14px}.level-grid{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;overflow:auto}.level-grid .lvl-btn{display:grid;place-items:center;padding:10px 0;background-color:#3a475a;color:#eaf2fb;border:1px solid #243042;border-radius:10px;cursor:pointer;font-weight:700;font-size:14px;position:relative}.level-grid .lvl-btn:hover{border-color:#3a475a}.level-grid .lvl-btn.current{outline:2px solid #2f7dd1;background:#0f1b2a}.level-grid .lvl-btn.done{background-color:#757e8b}.level-grid .lvl-btn.done:after{content:"";position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-radius:50%;background-color:#15a362}.level-grid .lvl-btn:focus-visible{outline:2px solid #d1a300}@media(max-width:520px){.modal-panel{width:calc(100% - 16px)}.modal-controls{gap:8px}}.button-icon{width:48px;height:48px;border-radius:50%;background-repeat:no-repeat;background-size:contain;background-position:center;color:#cfd8e3}#btnMenu{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20role='img'%20aria-label='Home'%3e%3cpath%20d='M4%2011L12%204l8%207'%20/%3e%3cpath%20d='M6%2010v9h12v-9'%20/%3e%3cpath%20d='M9%2019v-5h6v5'%20/%3e%3c/svg%3e")}#btnLevelPicker{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20role='img'%20aria-label='Level%20select'%3e%3crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='2'%20/%3e%3crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='2'%20/%3e%3crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='2'%20/%3e%3crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='2'%20/%3e%3c/svg%3e");background-size:36px}#btnHelp{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20role='img'%20aria-label='How%20to%20play'%3e%3cpath%20d='M9%208c0-2%201.6-3.5%203.8-3.5S17%206%2017%208c0%201.3-.6%202.2-2%203l-1%20.6c-1%20.6-1.5%201.1-1.5%202.4v.5'%20/%3e%3cpath%20d='M12%2019h.01'%20/%3e%3c/svg%3e");background-position:-2px}#btnReset{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%20512%20512'%20fill='%23eaf2fb'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20role='img'%20aria-label='Reset%20level'%3e%3cpath%20xmlns='http://www.w3.org/2000/svg'%20d='M64,256H34A222,222,0,0,1,430,118.15V85h30V190H355V160h67.27A192.21,192.21,0,0,0,256,64C150.13,64,64,150.13,64,256Zm384,0c0,105.87-86.13,192-192,192A192.21,192.21,0,0,1,89.73,352H157V322H52V427H82V393.85A222,222,0,0,0,478,256Z'/%3e%3c/svg%3e")}#btnUndo{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20role='img'%20aria-label='Undo'%3e%3cpath%20d='M18%2013C17.4904%2011.9961%2016.6247%2011.1655%2015.5334%2010.6333C14.442%2010.1011%2013.1842%209.89624%2011.9494%2010.0495C9.93127%2010.3%208.52468%2011.6116%207%2012.8186M7%2010V13H10'%20stroke='%23eaf2fb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.start-loading{position:fixed;width:100vw;height:100vh;z-index:1010;display:flex;justify-content:center;align-items:center;background-image:url(./back-C8Cgj6jP.jpg);background-repeat:no-repeat;background-size:cover}.start-loading svg{z-index:2;animation:rotate 1s linear 0s normal none infinite running}.start-loading:after{content:"";z-index:1;position:absolute;top:0;left:0;width:100vw;height:100vh;background:#000c}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hidden{display:none}.menu-overlay{position:fixed;inset:0;background:#0c1016b3;display:grid;place-items:center;z-index:1000;background-image:url(./back-C8Cgj6jP.jpg);background-repeat:no-repeat;background-size:cover}.menu-overlay.hidden{display:none}.menu-card{width:100%;height:100%;max-height:100vh;background-color:#0f172ae6;color:#e5e7eb;padding:20px 20px 22px;display:grid;grid-template-rows:auto 1fr}.menu-content{display:grid;overflow:auto;align-items:start}.menu-top{display:grid;gap:6px;grid-template-columns:1fr 2fr;margin-bottom:12px}@media screen and (orientation:portrait)and (max-width:768px){.menu-top{grid-template-columns:unset}}.menu-left{display:grid;place-items:center}.menu-right{display:grid;gap:12px}.logo-svg{width:110px;height:110px}h1{text-align:center;font-size:28px;letter-spacing:.5px}.menu-row{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:center;margin:10px 0}select,.btn{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #334155;background-color:#3a475a;color:#e5e7eb;outline:none}.menu-buttons{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}.btn{cursor:pointer;height:fit-content;width:fit-content}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8);border:1px solid #1e40af}.btn.primary:hover{filter:brightness(1.05)}