html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f1a; }
  body { display: flex; align-items: center; justify-content: center; }
  canvas { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
  body.ocioso { cursor: none; }
  #dica {
    position: fixed; right: 14px; bottom: 10px;
    font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #fff;
    text-shadow: 0 1px 2px #000; opacity: 0; transition: opacity 1.2s;
    pointer-events: none; user-select: none; z-index: 2;
  }
  #dica.visivel { opacity: .65; }
  html, body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
  #palco { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  canvas.cobrir { position: absolute; top: 0; left: 0; }
  #controles {
    position: fixed; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 2;
  }
  #controles.visivel { opacity: 1; pointer-events: auto; }
  #controles button {
    width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 12px;
    background: rgba(0, 0, 0, .38); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
  }
  #controles button:active { background: rgba(0, 0, 0, .55); }
  #controles svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }