*,:before,:after{box-sizing:border-box}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#f2f2f2;width:100%;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}#app{flex-direction:column;width:100%;height:100dvh;display:flex}.hud{padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));background:#e8e8e8;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;display:flex}@media (width>=768px){.hud{padding:6px 14px;padding-top:max(6px, env(safe-area-inset-top))}.hud span{font-size:15px}}.hud-left{flex-direction:column;align-items:flex-start;gap:8px;min-width:0;display:flex}.hud span{color:#333;font-size:14px}.modes{flex-wrap:wrap;gap:6px;display:flex}.mode-btn,#restart{color:#222;background:#fff;border:1px solid #999;border-radius:6px;min-height:36px;padding:6px 12px;font-size:14px}.mode-btn.active{color:#fff;background:#333;border-color:#333}.mode-btn:active,#restart:active{background:#ddd}.mode-btn.active:active{background:#222}#restart{flex-shrink:0;min-width:88px}#stage{flex:1;min-height:0;position:relative;overflow:hidden}#stage canvas{touch-action:none;width:100%;height:100%;display:block}