/* RA: tela da câmera, ações do momento, "Ajustar", faixa do mascote, ficha da peça e círculo de procura. */
.world-ar-canvas {
  position: absolute;
  inset: 0;
  /* O Three.js grava largura e altura em estilo inline; a tela da câmera ocupa sempre o diálogo. */
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
}

.ar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.ar-actions .button {
  min-width: 112px; min-height: 44px; padding: 8px 16px; white-space: nowrap;
}

.ar-link {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ar-adjust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px auto 0;
}

.ar-tool {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ffffff66;
  border-radius: 22px;
  background: #1e1726c8;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

.ar-tool[aria-pressed="true"] {
  background: #f1ecfa;
  border-color: #f1ecfa;
  color: #3d2c63;
}

.ar-sizes {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 25px;
  background: #00000040;
}

.ar-sizes .ar-tool {
  border-color: transparent;
}

/* Faixa do Pedro Vitor sobre a câmera: avatar e balão de mascot.css, à esquerda, logo acima do botão. */
.ar-mascot {
  max-width: 420px;
  margin: 4px auto 0;
  text-align: left;
}

.ar-mascot .mascot-avatar {
  display: block;
}

.ar-mascot .mascot-bubble {
  flex: 1;
  margin-bottom: 0;
  padding: 8px 12px 9px;
}

.ar-mascot .mascot-text {
  max-height: 5.6em;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--tinta);
  font-size: 0.95rem;
}

/* Ficha curta da peça tocada: nome e uma frase. */
.ar-piece {
  max-width: 420px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: #fff;
  color: var(--tinta);
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.4;
}

.ar-piece strong {
  display: block;
  color: var(--azul);
}

/* Círculo no centro: tracejado e pulsando enquanto procura; verde e firme num local válido. */
.ar-scan {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 3px dashed #ffffffb0;
  border-radius: 50%;
  pointer-events: none;
  animation: ar-scan 1.8s ease-in-out infinite;
}

.ar-scan.is-found {
  border: 4px solid #4ade80;
  box-shadow: 0 0 0 4px #4ade8040;
  animation: none;
}

@keyframes ar-scan {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1.1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-scan { animation: none; }
}

.ar-piece { position: relative; }
.ar-piece > strong { padding-right: 42px; line-height: 1.5; }
.ar-piece-close {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: transparent; color: var(--tinta); font-size: 23px;
}
.ar-piece-body { max-height: 26dvh; overflow: auto; overscroll-behavior: contain; padding-right: 12px; }
.ar-piece .deep-panel { margin: 6px 0; }
.ar-piece .deep-panel p { color: var(--tinta); font-size: .9rem; }
.ar-piece .deep-panel summary { min-height: 44px; align-content: center; color: var(--azul); }
.ar-dialog[data-phase='intro'] .ar-actions { flex-direction: column; gap: 2px; }
.ar-dialog[data-phase='intro'] .ar-actions .secondary {
  border: 0; background: transparent; color: #fff; min-height: 44px; text-decoration: underline;
}