* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  color: #fff;
}

/* พื้นหลังต้องอยู่ที่ html เท่านั้น ถ้าใส่ที่ body จะบังภาพกล้อง */
html { background: #0f1a12; }
body { background: transparent; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(160deg, #1f4d2b, #0f1a12);
}

.overlay h1 { font-size: 2rem; color: #ffd84a; }
.overlay small { opacity: .7; }
#error-text { white-space: pre-line; }
.logo { width: 96px; height: auto; }

.btn {
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1b2e1f;
  background: #ffd84a;
  cursor: pointer;
}
.btn:active { transform: scale(.97); }

.hidden { display: none !important; }

.spinner {
  width: 44px; height: 44px;
  border: 5px solid rgba(255,255,255,.25);
  border-top-color: #ffd84a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hint {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}
.hint p {
  background: rgba(0,0,0,.55);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .95rem;
}
.frame {
  width: 60vmin;
  height: 60vmin;
  border: 3px dashed rgba(255,216,74,.9);
  border-radius: 16px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .4; } }

a-scene { position: fixed; inset: 0; }