*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;touch-action:none}body{background-color:#e0e0e0;display:flex;justify-content:center;align-items:center;font-family:Segoe UI,sans-serif;user-select:none;-webkit-user-select:none}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}canvas{background-color:#fff;border:2px solid #333;box-shadow:10px 10px #0000001a;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}.ui-layer{position:absolute;bottom:20px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;color:#555}#initAudio{pointer-events:auto;padding:10px 20px;font-size:16px;cursor:pointer;background:#ff4757;color:#fff;border:none;border-radius:4px;box-shadow:0 4px #c23616;margin-bottom:10px}#initAudio:active{transform:translateY(4px);box-shadow:none}#mobileOverlay{position:fixed;inset:0;background:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}#mobileStartBtn{padding:15px 30px;font-size:18px;font-weight:700;cursor:pointer;background:#ff4757;color:#fff;border:none;border-radius:8px;box-shadow:0 4px #c23616}#mobileStartBtn:active{transform:translateY(4px);box-shadow:none}#muteHint{display:block;margin-top:4px;font-size:11px;font-weight:400;opacity:.7}