html, body { margin: 0; height: 100%; background: #000; color: #ccc; font: 14px system-ui, sans-serif; }
canvas { display: block; margin: 0 auto; outline: none; max-width: 100%; height: auto; }
#estado { position: fixed; left: 8px; bottom: 4px; margin: 0; }
/* Por cima do jogo, sem pegar clique nem toque: o jogo segue respondendo enquanto baixa. */
#download { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); box-sizing: border-box; width: min(92vw, 520px); padding: 8px 12px;
  border-radius: 6px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 15px; text-align: center; pointer-events: none; }
#download[hidden] { display: none; }
#download progress { display: block; width: 100%; height: 8px; margin-bottom: 6px; }

/* Toque. Só aparece em tela de dedo, e o mouse do PC nunca vê nada disto. O contrato está em docs/web/toque.md. */
#manche, #acoes, #gire { display: none; }
#digitacao { position: fixed; z-index: 3; top: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 8px; background: rgba(0, 0, 0, 0.9); }
#digitacao[hidden] { display: none; }
#digitacao input { flex: 1; min-width: 0; padding: 8px; border: 1px solid #667; border-radius: 6px; background: #111; color: #fff; font-size: 16px; }
#digitacao button { min-width: 56px; border: 1px solid #667; border-radius: 6px; background: #233; color: #fff; font-size: 16px; }

@media (pointer: coarse) {
  html, body { overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100vw, calc(100dvh * 16 / 9)); max-width: none; height: auto; touch-action: none; }
  #estado { font-size: 11px; }
  /* No mundo, a barra de download segue na tela, mas sem cobrir a barra de atalhos do jogo. */
  body[data-fase="2"] #download { top: 2px; bottom: auto; width: min(52vw, 400px); padding: 2px 8px; font-size: 11px; }
  body[data-fase="2"] #download progress { height: 3px; margin-bottom: 1px; }
  body[data-fase="2"] #manche { display: block; }
  body[data-fase="2"] #acoes { display: flex; }
  #manche { position: fixed; z-index: 2; left: 8px; bottom: 8px; width: 112px; height: 112px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); touch-action: none; }
  #manche > div { position: absolute; inset: 28%; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
  #acoes { position: fixed; z-index: 2; right: 6px; bottom: 8px; flex-direction: column; gap: 6px; }
  #acoes button { width: 64px; height: 44px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; touch-action: none; }
}
@media (pointer: coarse) and (orientation: portrait) {
  #gire { position: fixed; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 20px; pointer-events: none; }
}