:root { color-scheme: dark; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* The background belongs on <html> ALONE.
   MindAR inserts the camera <video> into <body> at z-index: -2. Negative
   z-index descendants are painted before an in-flow block's own background, so
   an opaque background on <body> paints straight over the camera feed and you
   get a black screen with no error anywhere. On <html> it becomes the canvas
   background and is painted underneath everything, which is what we want. */
html { background: #000; }
body { background: transparent; }

a-scene { position: fixed; inset: 0; width: 100%; height: 100%; }
a-scene, .a-canvas { background: transparent !important; }

/* Both libraries inject their own chrome. The frame stays clean: no scan
   reticle, no VR/fullscreen button for a visitor to hit by accident.
   (vr-mode-ui="enabled: false" leaves the button in the DOM, so hide it here.) */
.mindar-ui-overlay,
.a-enter-vr, .a-enter-vr-button,
.a-enter-ar, .a-enter-ar-button,
.a-orientation-modal { display: none !important; }

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom));
  gap: 10px;
}

.panel {
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  color: #f2f0eb;
  max-width: 30rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.panel.hide { opacity: 0; transform: translateY(10px); }

.hint-title { font-size: 15px; letter-spacing: 0.04em; }
.hint-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin-top: 5px;
  text-transform: uppercase;
}

.badge {
  font-size: 11px;
  letter-spacing: 0.09em;
  color: rgba(242, 240, 235, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  transition: opacity 0.6s ease;
}
.badge[hidden] { display: none; }

.error {
  border-color: rgba(255, 120, 100, 0.45);
  color: #ffd9d2;
  font-size: 13px;
  line-height: 1.55;
}
.error code {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.09);
  padding: 1px 5px;
  border-radius: 4px;
}
