:root{--font-sans:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;--bg-from:#eef4ff;--bg-to:#f6ecff;--surface:#ffffffeb;--surface-strong:#fff;--surface-soft:#f8faff;--surface-muted:#edf2fb;--text-primary:#111827;--text-secondary:#374151;--text-muted:#64748b;--border:#d7e1f0;--border-strong:#bdcde4;--accent-blue:#3b82f6;--accent-blue-strong:#2563eb;--accent-purple:#8b5cf6;--accent-purple-strong:#7c3aed;--accent-green:#22c55e;--accent-green-strong:#16a34a;--accent-emerald:#10b981;--accent-emerald-strong:#059669;--accent-red:#dc2626;--accent-red-strong:#b91c1c;--shadow-md:0 8px 20px #0f172a1a;--shadow-lg:0 18px 42px #0f172a29;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--ease-out:cubic-bezier(.2,.72,.24,1);--board-cell-duration:.28s;--board-cell-ease:cubic-bezier(.22,.7,.26,1)}.dark{--bg-from:#0c1324;--bg-to:#192233;--surface:#18212fe6;--surface-strong:#1e293b;--surface-soft:#273449;--surface-muted:#314158;--text-primary:#f8fafc;--text-secondary:#d7e1ec;--text-muted:#9fb0c3;--border:#3b4a60;--border-strong:#51627a;--shadow-md:0 10px 24px #02061752;--shadow-lg:0 24px 50px #02061773}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{font-family:var(--font-sans);color:var(--text-primary);letter-spacing:.01em;background:linear-gradient(135deg,var(--bg-from),var(--bg-to));line-height:1.45}button,input,select,textarea{font:inherit}button{color:inherit;background:0 0;border:0}.app-screen{background:linear-gradient(135deg,var(--bg-from),var(--bg-to));transition:background-color .2s var(--ease-out),color .2s var(--ease-out);width:100%;min-height:100dvh}.app-screen--centered{display:grid;place-items: center;padding:1.5rem 1rem}.panel{border-radius:var(--radius-lg);border:1px solid var(--border);background:linear-gradient(160deg,color-mix(in srgb,var(--surface-strong)92%,#fff)0%,var(--surface-strong)100%);box-shadow:var(--shadow-lg);width:100%;max-width:32rem;margin:0 auto;padding:2rem}.panel--welcome{max-width:34rem;padding:1.25rem 1.3rem}.panel--custom{max-width:32rem}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.9rem}.mode-toggle__button{border:1px solid var(--border);background:var(--surface-muted);color:var(--text-secondary);cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out);border-radius:10px;padding:.52rem .75rem;font-size:.87rem;font-weight:700}.mode-toggle__button.is-active{color:#fff;border-color:color-mix(in srgb,var(--accent-blue)76%,#1f2937);background:linear-gradient(160deg,color-mix(in srgb,var(--accent-blue)76%,#fff)0%,color-mix(in srgb,var(--accent-purple)65%,#0f172a)100%)}.mode-toggle__button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.panel__title{text-align:center;margin:0 0 .9rem;font-size:clamp(1.8rem,4vw,2.3rem);font-weight:700}.panel__title--md{font-size:clamp(1.6rem,3vw,1.9rem)}.panel__section{margin-bottom:.9rem}.panel__section-title{color:var(--text-secondary);letter-spacing:.01em;margin:0 0 .75rem;font-size:1.03rem;font-weight:600}.panel__intro{text-align:center;color:var(--text-secondary);margin:0 0 .8rem}.panel__footer{text-align:center;margin-top:.9rem}.help-list,.shortcut-list,.difficulty-list{list-style:none;margin:0;padding:0}.help-list{color:var(--text-secondary);display:grid;gap:.35rem;font-size:.86rem}.welcome-mode-help{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 .55rem;font-size:.8rem;font-weight:700}.help-list__item{display:flex;align-items: flex-start}.help-list__marker{color:var(--accent-purple);display:inline-flex;justify-content:center;align-items: center;margin-right:.55rem;font-weight:700}.shortcut-list{color:var(--text-secondary);display:grid;gap:.4rem;font-size:.82rem}.shortcut-list__item{display:flex;justify-content:space-between;align-items: flex-start;gap:.75rem}.kbd{border:1px solid var(--border);background:var(--surface-muted);font-family:var(--font-mono);white-space:nowrap;border-radius:8px;padding:.18rem .52rem;font-size:.72rem;box-shadow:inset 0 -1px #0f172a0d}.difficulty-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.difficulty-list__button{width:100%}.welcome-tabs{margin-bottom:.1rem}.welcome-tabs__list{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.65rem}.welcome-tabs__button{border:1px solid var(--border);background:var(--surface-muted);color:var(--text-secondary);letter-spacing:.01em;cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out);border-radius:10px;padding:.58rem .75rem;font-size:.88rem;font-weight:700}.welcome-tabs__button:hover{transform:translateY(-1px)}.welcome-tabs__button.is-active{color:#fff;border-color:color-mix(in srgb,var(--accent-blue)76%,#1f2937);background:linear-gradient(160deg,color-mix(in srgb,var(--accent-blue)76%,#fff)0%,color-mix(in srgb,var(--accent-purple)65%,#0f172a)100%);box-shadow:var(--shadow-md)}.welcome-tabs__button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.welcome-tabs__note{text-align:center;color:var(--text-muted);margin:0 0 .55rem;font-size:.82rem}.welcome-info-grid{display:grid;grid-template-columns:1fr;gap:.4rem}@media (min-width:760px){.welcome-info-grid{grid-template-columns:1fr 1fr;column-gap:1rem}.welcome-info-grid .panel__section{margin-bottom:.6rem}}.link-button{color:var(--text-muted);cursor:pointer;text-decoration:none;transition:color .2s var(--ease-out);font-size:.92rem;font-weight:600}.link-button:hover{color:var(--accent-blue);text-decoration:none}.link-button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px;border-radius:8px}.app-screen--game{display:flex;flex-direction:column}.app-header-shell{position:sticky;z-index:20;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-strong)94%,transparent);backdrop-filter:blur(8px);flex-shrink:0;top:0;box-shadow:0 8px 26px #0f172a1f}.app-header-inner{max-width:92rem;margin:0 auto;padding:.2rem .5rem}.app-main{overflow:auto;flex:1;min-height:0;padding:.6rem}.app-content{display:flex;flex-direction:column;max-width:56rem;min-height:100%;margin:0 auto}.app-board-area{display:flex;flex:1;justify-content:center;align-items: center;min-height:0}.app-board-inner{width:100%;height:100%;min-height:0}.game-header{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md);padding:.45rem .6rem}.game-header__inner{max-width:56rem;margin:0 auto}.game-header__row{display:flex;flex-direction:column;gap:.55rem}.game-header__main{display:flex;flex:1;align-items: center;gap:.55rem;min-width:0}.game-header__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:1rem;font-weight:700}.game-header__steps-mobile{display:flex;align-items: center;gap:.25rem}.steps-count{font-size:.9rem;font-weight:700}.steps-label{color:var(--text-muted);font-size:.75rem}.steps-tone--good{color:#16a34a}.steps-tone--warn{color:#ca8a04}.steps-tone--danger{color:#dc2626}.dark .steps-tone--good{color:#4ade80}.dark .steps-tone--warn{color:#facc15}.dark .steps-tone--danger{color:#f87171}.game-header__progress-wrap{display:none}.progress{width:100%;max-width:22rem}.progress__meta{display:flex;color:var(--text-muted);justify-content:space-between;margin-bottom:.25rem;padding:0 .5rem;font-size:.74rem}.progress__track{overflow:hidden;background:var(--surface-muted);border-radius:999px;width:100%;height:.42rem}.progress__fill{background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));transition:width .3s var(--ease-out);height:100%}.game-header__actions{display:flex;flex-shrink:0;justify-content:flex-end;align-items: center;gap:.35rem}.btn{display:inline-flex;color:#fff;cursor:pointer;user-select:none;box-shadow:var(--shadow-md);transition:transform .14s var(--ease-out),filter .2s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out);border-radius:.75rem;justify-content:center;align-items: center;height:2.5rem;padding:0 .95rem;font-size:.92rem;font-weight:600}.btn:hover{filter:brightness(1.05);box-shadow:0 10px 24px #0f172a33}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.btn--block{width:100%}.btn--icon{width:2.5rem;padding:0}.ui-icon{display:inline-block;flex-shrink:0;width:1rem;height:1rem}.ui-icon--sm{width:.85rem;height:.85rem}.btn--primary{background:linear-gradient(95deg,var(--accent-blue),var(--accent-purple))}.btn--new{background:linear-gradient(95deg,var(--accent-green),var(--accent-emerald))}.btn--neutral{background:linear-gradient(90deg,#64748b,#475569)}.btn--danger{background:var(--accent-red);height:2.25rem}.btn--danger:hover{background:var(--accent-red-strong);filter:none}.btn--subtle{background:var(--surface-muted);border:1px solid var(--border);color:var(--text-secondary);box-shadow:none;height:2.25rem}.btn--subtle:hover{background:color-mix(in srgb,var(--surface-muted)72%,#fff);filter:none}.menu,.menu--newgame{position:relative}.menu__trigger{list-style:none;gap:.3rem}.menu__trigger::-webkit-details-marker{display:none}.menu__trigger::marker{content:""}.menu__trigger-icon{width:.9rem;height:.9rem}.menu__panel{position:absolute;z-index:10;overflow-y:auto;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-strong);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out);min-width:100%;max-height:min(66vh,24rem);top:calc(100% + .35rem);left:0;transform:translateY(-4px)}.menu[open] .menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.menu__list{padding:.2rem 0}.menu-item{color:var(--text-secondary);text-align:left;cursor:pointer;transition:background-color .15s var(--ease-out),color .15s var(--ease-out);background:0 0;border:0;width:100%;padding:.38rem .6rem}.menu-item:hover{background:var(--surface-muted);color:var(--text-primary)}.menu-item:focus-visible{outline:2px solid var(--accent-blue);outline-offset:-2px}.menu-item__title{font-size:.86rem;font-weight:600;line-height:1.2}.menu-item__meta{color:var(--text-muted);margin-top:.08rem;font-size:.72rem;line-height:1.15}.menu-section-title{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;padding:.28rem .6rem .18rem;font-size:.66rem;font-weight:700}.menu-divider{background:color-mix(in srgb,var(--border)80%,transparent);height:1px;margin:.2rem .5rem}.menu-recent-item .menu-item__title:after{content:"recent";background:color-mix(in srgb,var(--accent-blue)16%,transparent);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;border-radius:999px;margin-left:.4rem;padding:.08rem .3rem;font-size:.58rem;font-weight:700}.board-wrap{display:flex;justify-content:center;align-items: center;width:100%;height:100%;min-height:0;padding:.6rem}.board-wrap__stack{display:flex;flex-direction:column;align-items: center;gap:.5rem;width:100%}.board-grid{display:grid;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-muted);box-shadow:var(--shadow-lg);border:1px solid color-mix(in srgb,var(--border-strong)80%,transparent);width:100%;min-width:0;max-width:100%}.board-legend{display:inline-flex;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-strong);color:var(--text-secondary);box-shadow:var(--shadow-md);flex-direction:column;align-items: center;gap:.2rem;padding:.35rem .6rem;font-size:.74rem;font-weight:600}.board-legend__markers{display:inline-flex;align-items: center;gap:.8rem}.board-legend__item{display:inline-flex;align-items: center;gap:.32rem}.board-legend__marker{color:var(--text-primary);font-weight:800}.board-legend__target{color:var(--text-muted);text-align:center;font-size:.69rem}.board-cell{border:1px solid var(--border-strong);transition:background-color var(--board-cell-duration)var(--board-cell-ease),border-color var(--board-cell-duration)var(--board-cell-ease),transform var(--board-cell-duration)var(--board-cell-ease),opacity .22s var(--board-cell-ease);transform:scale(1)}.board-cell:hover{opacity:.88;transform:scale(.985)}.board-cell--wall{cursor:not-allowed;background:linear-gradient(135deg,#111827 25%,#1f2937 25% 50%,#111827 50% 75%,#1f2937 75%) 0 0/16px 16px;border-color:#0b1220}.board-cell--wall:hover{opacity:1;transform:none}.board-cell--goal,.board-cell--start{position:relative}.board-cell--start:before{content:"S";position:absolute;color:#fff;text-shadow:0 1px 1px #00000073;pointer-events:none;z-index:1;font-size:clamp(.52rem,1.3vw,.9rem);font-weight:800;line-height:1;top:50%;left:50%;transform:translate(-50%,-50%)}.board-cell--goal:after{content:"G";position:absolute;color:#fff;text-shadow:0 1px 1px #00000073;pointer-events:none;font-size:clamp(.52rem,1.3vw,.9rem);font-weight:800;line-height:1;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.board-cell{transition:background-color 1ms linear,border-color 1ms linear,transform 1ms linear,opacity 1ms linear}.board-cell:hover{opacity:1;transform:none}}.keyboard-wrap{display:flex;justify-content:center}.keyboard-wrap--large{padding:.85rem}.keyboard-wrap--medium{padding:.65rem}.keyboard-wrap--small{padding:.5rem}.keyboard-grid{display:flex;flex-wrap:wrap}.color-key{border-radius:var(--radius-sm);border:4px solid var(--border-strong);transition:transform .18s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),opacity .2s var(--ease-out);cursor:pointer}.color-key:hover{transform:scale(1.05)}.color-key:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}.color-key.is-selected{box-shadow:var(--shadow-lg);border-color:#1f2937;transform:scale(1.1)}.dark .color-key.is-selected{border-color:#f3f4f6}.color-key.is-disabled{opacity:.5;cursor:not-allowed}.color-key.is-disabled:hover{transform:none}.custom-form{display:grid;gap:1.5rem}.custom-form__nested{margin-top:.8rem}.form-row{display:flex;justify-content:space-between;align-items: center;gap:.75rem}.form-label{display:block;color:var(--text-secondary);margin-bottom:.55rem;font-size:.9rem;font-weight:600}.form-label--compact{margin-bottom:0}.range-slider{appearance:none;background:var(--surface-muted);cursor:pointer;accent-color:var(--accent-blue);border-radius:999px;width:100%;height:.45rem}.range-slider:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}.range-labels{display:flex;color:var(--text-muted);justify-content:space-between;margin-top:.35rem;font-size:.75rem}.switch{position:relative;cursor:pointer;transition:background-color .2s var(--ease-out);background:#94a3b8;border-radius:999px;width:2.8rem;height:1.55rem}.switch--on{background:var(--accent-blue)}.switch:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.switch__thumb{position:absolute;transition:transform .2s var(--ease-out);background:#fff;border-radius:50%;width:1.15rem;height:1.15rem;top:.2rem;left:.2rem}.switch__thumb--on{transform:translate(1.22rem)}.settings-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);padding:1rem}.settings-card__title{color:var(--text-secondary);margin:0 0 .45rem;font-size:.85rem}.settings-card__body{display:grid;color:var(--text-secondary);gap:.25rem;font-size:.9rem}.settings-card__note{color:var(--text-muted);margin-left:.35rem;font-size:.75rem}.action-row{display:flex;gap:.75rem;margin-top:2rem}.action-row--split>*{flex:1}.modal{position:fixed;z-index:9999;display:flex;transition:opacity .26s var(--ease-out);justify-content:center;align-items: center;padding:1rem;inset:0}.modal--confirm{z-index:9999}.modal--gameover{z-index:50}.modal.is-closed{opacity:0;pointer-events:none}.modal.is-open{opacity:1}.modal__backdrop{position:absolute;transition:opacity .26s var(--ease-out);background:#0206178c;inset:0}.modal__backdrop.is-closed{opacity:0}.modal__backdrop.is-open{opacity:1}.modal__panel{position:relative;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface-strong);box-shadow:var(--shadow-lg);transition:transform .26s var(--ease-out),opacity .26s var(--ease-out);width:100%;max-width:32rem}.modal__panel--confirm{padding:1.5rem}.modal__panel--gameover{padding:2rem}.modal__panel.is-closed{opacity:0;transform:scale(.95)}.modal__panel.is-open{opacity:1;transform:scale(1)}.modal__title{margin:0 0 .9rem;font-size:1.1rem}.modal__message{color:var(--text-secondary);margin:0 0 1.4rem}.modal__actions{display:flex;gap:.75rem}.modal__actions--right{justify-content:flex-end}.modal__actions--center{justify-content:center}.modal__close{position:absolute;display:grid;color:var(--text-muted);cursor:pointer;transition:color .2s var(--ease-out),background-color .2s var(--ease-out);border-radius:999px;place-items: center;width:2rem;height:2rem;top:.8rem;right:.8rem}.modal__close-icon{width:1rem;height:1rem}.modal__close:hover{color:var(--text-primary);background:var(--surface-muted)}.modal__close:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.modal__content{text-align:center}.modal__status{margin-bottom:.85rem;font-size:1.9rem;font-weight:700}.modal__status--success{color:#16a34a}.modal__status--danger{color:#dc2626}.dark .modal__status--success{color:#4ade80}.dark .modal__status--danger{color:#f87171}.modal__lead{color:var(--text-secondary);margin:0 0 1rem;font-size:1.05rem}.modal__score{margin-bottom:1.4rem}.modal__score-label{color:var(--text-muted);margin-bottom:.35rem;font-size:.85rem}.modal__score-value{color:var(--accent-blue);font-size:1.55rem;font-weight:700}.modal__score-meta{color:var(--text-muted);margin-top:.25rem;font-size:.76rem}@media (max-width:640px){.app-main{padding:.35rem}.app-header-inner{padding:.2rem .35rem}.game-header{border-radius:12px;padding:.38rem .42rem}.game-header__row,.game-header__main{gap:.45rem}.game-header__title{font-size:.94rem}.game-header__actions{gap:.3rem}.btn{border-radius:.66rem;height:2.32rem;padding:0 .72rem;font-size:.84rem}.btn--icon{width:2.32rem;padding:0}.menu__panel{min-width:10.5rem;left:auto;right:0}.menu-item{padding:.55rem .7rem}.menu-item__meta{margin-top:.12rem;font-size:.75rem}.board-wrap{padding:.22rem}.board-wrap__stack{gap:.24rem}.board-legend{gap:.08rem;max-width:min(100%,26rem);padding:.2rem .45rem;font-size:.64rem}.board-legend__markers{gap:.5rem}.board-legend__target{font-size:.58rem;line-height:1.25}.keyboard-wrap--large{padding:.45rem}.keyboard-wrap--medium{padding:.34rem}.keyboard-wrap--small{padding:.28rem}.modal{align-items: flex-end;padding:.65rem}.modal__panel{overflow:auto;width:100%;max-width:none;max-height:calc(100dvh - 1.3rem)}.modal__panel--confirm{padding:1.05rem}.modal__panel--gameover{padding:1.25rem 1.05rem}.modal__title{margin-bottom:.7rem;font-size:1.03rem}.modal__message{margin-bottom:1rem}.modal__actions{gap:.55rem}.modal__actions--right,.modal__actions--center{flex-direction:column;justify-content:stretch}.modal__actions .btn{width:100%;min-height:2.9rem;font-size:.95rem}.modal__close{width:2.2rem;height:2.2rem;font-size:1.08rem;top:.5rem;right:.5rem}.modal__lead{margin-bottom:.9rem;font-size:.97rem}}@media (max-width:380px){.game-header__row{gap:.4rem}.game-header__actions{flex-wrap:wrap;justify-content:flex-start;gap:.28rem;width:100%}.btn{height:2.2rem;padding:0 .62rem;font-size:.8rem}.btn--icon{width:2.2rem;min-width:2.2rem}.menu{min-width:0}.menu__trigger{min-width:3.35rem;padding-inline-start:.58rem;padding-inline-end:.58rem}.menu__panel{min-width:9.6rem;left:0;right:auto}}@media (min-width:640px){.app-main{padding:1rem}.panel{padding:2rem}.game-header{padding:.5rem .75rem}.game-header__row{flex-direction:row;justify-content:space-between;align-items: center;gap:1rem}.game-header__title{font-size:1.05rem}.game-header__steps-mobile{display:none}.game-header__progress-wrap{display:flex;flex:1;align-items: center;max-width:20rem}.game-header__actions{gap:.5rem}.btn{height:2.75rem;padding:0 1rem;font-size:.95rem}.btn--icon{width:2.75rem}.menu__panel{min-width:12.5rem;top:calc(100% + .45rem)}.menu-item{padding:.55rem .9rem}.menu-item__meta{font-size:.82rem}.board-wrap{padding:.5rem}.keyboard-wrap--large{padding:1rem}.keyboard-wrap--medium{padding:.75rem}.keyboard-wrap--small{padding:.6rem}}@media (min-width:1024px) and (max-height:860px){.app-header-inner{padding:.12rem .45rem}.game-header{padding:.34rem .55rem}.game-header__row{gap:.55rem}.app-main{padding:.5rem}.board-wrap{padding:.3rem}.board-wrap__stack{gap:.32rem}.board-legend{gap:.12rem;padding:.22rem .48rem;font-size:.67rem}.board-legend__markers{gap:.62rem}.board-legend__target{font-size:.62rem}.keyboard-wrap--large{padding:.62rem}.keyboard-wrap--medium{padding:.48rem}.keyboard-wrap--small{padding:.36rem}.btn{height:2.4rem;padding:0 .82rem;font-size:.88rem}.btn--icon{width:2.4rem}}.welcome-header-actions{display:flex;justify-content:center;gap:.45rem;margin-bottom:.85rem}.panel--help{max-width:46rem;padding:1.4rem}.help-header-row{display:flex;justify-content:space-between;align-items: center;gap:.75rem;margin-bottom:1rem}.help-sections{display:grid;gap:.65rem}@media (max-width:640px){.panel--help{padding:1rem}.help-header-row{flex-direction:column;align-items:stretch}}