html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #d8d4cf;
  font-family: Georgia, 'Times New Roman', serif;
}

#escena {
  display: block;
  width: 100vw;
  height: 100vh;
}

#estado {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b4a48;
  font-size: 20px;
  letter-spacing: 1px;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

#estado.oculto { opacity: 0; }
#estado.error { color: #8a1c24; font-family: monospace; white-space: pre-wrap; padding: 24px; }

#ayuda {
  position: fixed;
  left: 16px;
  bottom: 14px;
  color: #8c827c;
  font-size: 13px;
  pointer-events: none;
}

#sonido {
  position: fixed;
  right: 16px;
  bottom: 12px;
  padding: 8px 16px;
  font: 14px Georgia, 'Times New Roman', serif;
  color: #5a403e;
  background: rgba(255, 252, 248, 0.7);
  border: 1px solid #c9c2bc;
  border-radius: 999px;
  cursor: pointer;
}

#sonido[aria-pressed="true"] { background: rgba(158, 38, 50, 0.12); }