*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#292a29;color:#efdfb8;font-family:system-ui,sans-serif}body{background:radial-gradient(ellipse at top,#544631,#272a2b)}main{width:min(520px,calc(100% - 20px));margin:auto}header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px}strong{font-size:24px;letter-spacing:3px;text-align:center}small{display:block;font-size:7px;letter-spacing:2px;margin-top:5px}a{font-size:11px;color:#c8ba97;text-decoration:none}button{min-height:44px;min-width:44px;border:1px solid #8a7658;border-radius:8px;padding:7px 12px;background:#514839;color:#f3dfb1;font:600 12px system-ui;box-shadow:0 3px #191f21;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45}.hud{display:flex;align-items:center;justify-content:space-between;height:34px;font-size:12px}.shaft{height:min(500px,calc(100svh - 233px));aspect-ratio:1;position:relative;max-width:100%;margin:auto;border:6px solid #756047;border-radius:12px;overflow:hidden;background:#322e2b;box-shadow:0 6px #1c2223}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#overlay{position:absolute;inset:0;background:#332f28f8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;text-align:center}h1{font-size:clamp(23px,5vw,35px);line-height:1.2;margin:10px 0}em{display:block;color:#e6ae56;font-style:normal}p{font-size:12px;line-height:1.7;margin:5px 0}#guide{font-size:10px;color:#c0b294}#primary{background:#b77b37;color:#fff4d6;min-width:170px;margin:10px 0 7px}#restart{margin-bottom:6px}.tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:11px}nav{display:flex;justify-content:center;gap:8px;margin:10px 0}nav button{min-width:52px;font-size:18px}nav #reset{font-size:11px}footer{text-align:center;font-size:10px;color:#a99d83;margin:8px 0}[hidden]{display:none!important}@media(max-width:350px){header{height:56px}strong{font-size:19px}header small{font-size:5px}header button{padding:5px 7px}.hud{font-size:11px;height:30px}.shaft{height:calc(100svh - 225px);aspect-ratio:auto;width:100%;max-height:345px}canvas{object-fit:contain}h1{font-size:25px}p{font-size:11px}#guide{font-size:9px}nav{gap:6px;margin:9px 0}nav button{min-width:44px}.tools{font-size:10px}footer{font-size:9px}}@media(max-height:500px) and (orientation:landscape){main{width:min(800px,calc(100% - 20px));height:100svh;display:grid;grid-template-columns:190px 1fr;gap:7px 16px}header{grid-column:1;height:auto;flex-wrap:wrap;justify-content:space-around}header strong{order:-1;width:100%;font-size:20px}.hud{grid-column:1;height:auto;flex-wrap:wrap;gap:10px}.shaft{grid-column:2;grid-row:1/6;height:calc(100svh - 16px);align-self:center;max-width:100%}.tools{grid-column:1;margin:0;flex-wrap:wrap}nav{grid-column:1;flex-wrap:wrap;margin:0;gap:7px}nav button{min-width:48px}footer{grid-column:1;margin:0}h1{font-size:25px}p{font-size:11px}#guide{font-size:9px}}