:root { --bg: #111; --fg: #fff; --accent: #f5c542; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Background only on <html>: MindAR places the camera feed at a negative z-index,
   so any body background would be painted over it and hide the camera image. */
html { background: var(--bg); }
body { background: transparent; }

#arvideo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10, 10, 10, .92); text-align: center; }
.card { max-width: 360px; }
.card h1 { font-size: 1.6rem; font-weight: 650; margin: 0 0 24px; }
.card button { font: inherit; font-size: 1.1rem; font-weight: 600; padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--accent); color: #111; cursor: pointer; width: 100%; }
.small { opacity: .7; font-size: .85rem; line-height: 1.4; margin-top: 18px; }

.hint { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; }
.hint p { background: rgba(0, 0, 0, .55); padding: 10px 16px; border-radius: 12px; margin: 0 16px; text-align: center; }
.frame { width: min(70vw, 320px); aspect-ratio: var(--ratio, 16/9); max-height: 55vh;
  border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.04); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .frame { animation: none; } }

.sound { position: fixed; z-index: 15; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; border: 0; font-size: 1.4rem; background: rgba(0, 0, 0, .6); color: #fff; }

.hidden { display: none !important; }

/* Full-screen effects layer (fireworks, confetti…) – above the AR view, below the UI */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* Fallback mode – fullscreen video without AR */
.fallback-video { position: fixed; inset: 0; width: 100% !important; height: 100% !important; opacity: 1 !important;
  object-fit: contain; background: #000; z-index: 30; pointer-events: auto !important; }

/* MindAR injects the camera feed – stretch it to fill the screen */
a-scene { position: fixed !important; inset: 0; }