*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#eee;font-family:system-ui,sans-serif;touch-action:none}body{display:flex;flex-direction:column;align-items:center}header{height:70px;flex-shrink:0;width:100%;display:flex;align-items:center;justify-content:center;letter-spacing:.22em;font-size:13px}#menu{position:absolute;right:20px;top:12px}button{background:#202020;border:1px solid #555;border-radius:12px;color:#eee;min-width:48px;min-height:46px;font-size:26px;cursor:pointer}button:hover{background:#383838}button.active{background:#eee;color:#111;border-color:white}button:disabled{opacity:.3}canvas{display:block;min-height:0;flex:1;width:100%;touch-action:none}nav{height:90px;display:flex;gap:12px;align-items:center;padding-bottom:env(safe-area-inset-bottom)}dialog{background:#191919;color:#ddd;border:1px solid #777;border-radius:18px;max-width:360px;padding:28px;line-height:1.6}dialog::backdrop{background:#000a}dialog button{font-size:16px;margin:4px}#close{float:right;font-size:24px}h1{font-weight:400;letter-spacing:.15em}canvas.invalid{animation:shake .18s}@keyframes shake{50%{transform:translateX(4px)}}

button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

*{user-select:none;-webkit-user-select:none}
dialog{width:min(340px,calc(100vw - 32px));max-width:340px;padding:68px 20px 20px}
dialog button:not(#close){display:flex;align-items:center;gap:16px;width:100%;margin:0;padding:14px;text-align:left;font-size:16px;min-height:72px}
dialog button+button:not(#close){margin-top:10px}
dialog button span{display:flex;flex-direction:column;gap:4px}
dialog button b{font-weight:600}
dialog button small{font-size:12px;color:#aaa}
dialog button svg{flex-shrink:0;width:26px;height:26px}
#close{position:absolute;right:12px;top:12px;margin:0;min-width:44px;min-height:44px;font-size:28px}
html,body{background:#142e32;color:#e4dfc6}header{background:#122c30;border-bottom:1px solid #8d9e7955}button,dialog{background:#203b3d;color:#e4dfc6;border-color:#929b78}button:hover{background:#3a5752}dialog button small{color:#a5bcb3}

/* Keep chrome visible above the WebGL drawing surface at every viewport size. */
header{position:relative;z-index:2;height:64px;min-height:64px;background:#122c30;isolation:isolate}
#level{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
#menu{top:9px;right:max(12px,env(safe-area-inset-right));line-height:1}
#board{height:calc(100dvh - 64px);flex:1 1 0;width:100%;min-width:0}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus:not(:focus-visible){outline:none}button:focus-visible{outline:2px solid #dfd6a9;outline-offset:3px}

/* Floating status leaves the entire viewport available to the maze. */
html,body{background:#060b13}
header{position:absolute;inset:0 0 auto;height:64px;min-height:0;background:transparent;border:0;pointer-events:none;padding-top:env(safe-area-inset-top)}
#level{text-shadow:0 1px 5px #000;top:calc(24px + env(safe-area-inset-top))}
#menu{pointer-events:auto;top:calc(9px + env(safe-area-inset-top));background:transparent;border-color:transparent;text-shadow:0 1px 5px #000}
#menu:hover{background:#203b3d80}
#board{position:absolute;inset:0;height:100%;height:100dvh;width:100%;cursor:grab}
#board:active{cursor:grabbing}

#lesson{position:absolute;top:calc(52px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(80vw,480px);text-align:center;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#b9c7c3;text-shadow:0 1px 5px #000}

#loading{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#060b13}
#loading[hidden]{display:none}
#loading-board{flex:none;width:min(420px,94vw);height:280px;min-height:0}
.loading-label{font-size:12px;letter-spacing:.08em;color:#b9c7c3}

/* Shared menu headers remain interactive above the camera canvas. */
.standard-menu-header{pointer-events:auto}