*{box-sizing:border-box}body{margin:0;background:#111914;color:#eee8d4;font:14px system-ui;overflow:hidden}canvas{display:block;width:100vw;height:100dvh;touch-action:none}header{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid #887345;background:#111a19e8;border-radius:10px}header b{color:#dfc27f}header span{font-size:11px;color:#b3baa9;flex:1}button{border:1px solid #8e7848;background:#222c28;color:#e8d5a3;border-radius:8px;padding:10px;cursor:pointer}aside{position:absolute;top:90px;left:16px;background:#0f1716dc;padding:14px;border-radius:10px;width:265px;pointer-events:auto}aside p{font-size:12px;line-height:1.6;color:#bac4b9}output{font-size:12px;color:#ddc98c}#pad{position:absolute;bottom:65px;left:35px;width:116px;height:116px;border:1px solid #c3a66580;border-radius:50%;background:#16252080;touch-action:none}#stick{position:absolute;left:35px;top:35px;width:46px;height:46px;background:#d2ba7ab0;border:2px solid #eddaa6;border-radius:50%;pointer-events:none}nav{position:absolute;right:25px;bottom:70px;display:flex;align-items:center;gap:12px;background:#111a19dc;padding:10px;border-radius:12px}nav button{font-size:24px;width:46px}footer{position:absolute;bottom:14px;left:20px;right:20px;text-align:center;font-size:11px;color:#b6c5b7;pointer-events:none}@media(max-width:600px){header{gap:8px;font-size:12px}header span{display:none}header b{flex:1}aside{width:220px;top:80px}nav span{display:none}}