.wb-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}.wb-play{min-width:0;overflow:hidden;border:1px solid #53667577;border-radius:24px;background:#132631}.wb-heading{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;font-size:12px;color:#c6d4d4;background:#ffffff05}.wb-heading>span+span{font-size:9px;letter-spacing:.1em}.wb-stage{position:relative;display:flex;flex-direction:column;min-width:0;height:clamp(510px,calc(100dvh - 200px),1000px);background:radial-gradient(ellipse at 50% 20%,#30453d,#122b32 65%,#0b1c27);overflow:hidden}.wb-stage-top{display:flex;justify-content:space-between;gap:12px;flex-shrink:0;padding:16px 20px;font-size:9px;letter-spacing:.15em;color:#c4d3bd}.wb-view{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden}.wb-view>canvas,.wb-flat,.wb-labels{position:absolute;inset:0;width:100%;height:100%;display:block}.wb-labels{pointer-events:none}.wb-cell{position:absolute;transform:translate(-50%,-50%);padding:0;width:38px;height:38px;min-width:0;border:1px solid transparent;border-radius:9px;background:transparent;color:#e8eee0;pointer-events:auto;touch-action:none;cursor:pointer}.wb-cell:active:not(:disabled){transform:translate(-50%,-50%)}.wb-cell:focus-visible,.wb-cell[aria-pressed=true]{outline:2px solid #f0d293;outline-offset:1px;background:#ffe3a319}.wb-cell:disabled{opacity:1}.wb-cell span{font-size:10px;opacity:0;transition:opacity .12s}.wb-cell:focus-visible span,.wb-cell:hover span{opacity:1}.wb-tools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:8px 12px 16px;flex-shrink:0}.wb-tools .button{min-height:40px;padding:8px 11px;font-size:11px}.wb-stage-status{text-align:center;margin:0;padding:8px 16px;min-height:34px;line-height:1.5;font-size:11px;color:#bbd2cd;flex-shrink:0}.wb-console{border:1px solid #4b617288;background:#14242e;border-radius:22px;padding:22px;align-self:start;display:flex;flex-direction:column;gap:15px}.wb-console h2{margin:0;font-size:20px}.wb-goal{font-size:17px;line-height:1.5;color:#d5ead8;margin:0;padding:14px;border:1px solid #b5d4ac55;border-radius:14px;background:#b2cfa30b}.wb-rule,.wb-tip p{font-size:12px;line-height:1.7;color:#b9cdd0;margin:0}.wb-status{min-height:35px;font-size:12px;line-height:1.6;color:#d0e1cc;margin:0}.wb-history{display:flex;gap:6px}.wb-history .button{flex:1;padding:9px;font-size:11px}.wb-hint{padding:13px;border:1px solid #e8ca7655;border-radius:14px;background:#d2b16913;font-size:12px;line-height:1.6}.wb-tip{border-top:1px solid #839b9c33;padding-top:16px}.wb-tip>span{color:#d4bd87;font-size:10px;letter-spacing:.1em}.wb-tip p{margin-top:8px}.wb-win{text-align:center;padding:24px;background:linear-gradient(110deg,#304838,#263d46)}.wb-win h2{margin:7px 0}.wb-win p{font-size:12px}.wb-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.wb-level{justify-content:start;text-align:left}.wb-level.wb-done::after{content:' ✓';color:#bce0a9}.wb-gallery,.wb-options{margin-top:25px}.wb-options label{display:block;margin:14px 0}.wb-options p,.wb-gallery p{font-size:13px;line-height:1.7}.wb-help{width:min(780px,94vw)}.wb-help p{font-size:13px;line-height:1.7}.wb-demo{height:400px!important;min-height:0!important;border-radius:18px}.wb-stage [hidden],.wb-play [hidden],.wb-console [hidden]{display:none!important}.wb-help .dialog-actions{flex-wrap:wrap}.wb-stage.minimalist-stage{height:100dvh!important;min-height:0!important;padding-top:64px!important;padding-bottom:env(safe-area-inset-bottom)!important}.wb-flat{background:radial-gradient(ellipse at center,#3a584333,#14283100)}
@media(min-width:1700px){.wb-layout{grid-template-columns:minmax(0,1fr) 320px}.wb-stage{height:calc(100dvh - 195px)}}@media(max-width:1000px){.wb-layout{grid-template-columns:minmax(0,1fr)}.wb-console{display:grid;grid-template-columns:1fr 1fr}.wb-console>.wb-goal,.wb-console>.wb-rule,.wb-console>.wb-status,.wb-console>.wb-hint,.wb-console>.wb-tip{grid-column:1/-1}.wb-stage{height:clamp(470px,calc(100dvh - 185px),850px)}}@media(max-width:520px){.wb-heading{padding:12px;font-size:10px}.wb-heading>span+span{display:none}.wb-stage{height:calc(100dvh - 190px);min-height:465px}.wb-stage-top{padding:13px 12px;font-size:8px}.wb-tools{gap:5px;padding:6px 8px 14px}.wb-tools .button{font-size:10px;padding:6px 9px;min-height:38px}.wb-console{padding:16px}.wb-demo{height:355px!important}.wb-cell{width:33px;height:33px}.wb-stage-status{font-size:10px;padding:7px 10px}}@media(prefers-reduced-motion:reduce){.wb-stage *{transition:none!important}}

.wb-play{position:relative}.wb-play:has(>.wb-win:not([hidden]))>.wb-stage{padding-bottom:140px}.wb-win{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;z-index:3;border-top:1px solid #b9d6a644;box-shadow:0 -12px 30px #10232966}.wb-win h2{font-size:21px;margin:4px 0}.wb-win p{margin:6px 0 10px}@media(max-width:520px){.wb-stage{height:clamp(465px,calc(100dvh - 215px),650px)}.wb-win h2{font-size:18px}.wb-win{padding:13px}.wb-play:has(>.wb-win:not([hidden]))>.wb-stage{padding-bottom:140px}}
body.minimalist-mode .wb-stage.minimalist-stage{padding-top:64px!important;padding-bottom:env(safe-area-inset-bottom)!important}body.minimalist-mode .wb-stage-top{display:none!important}