/* The web viewer (viewAR-web.blade.php). Brand: red #CC0000, ink #0F133A, overlay #00000081. */
html, body.web-viewer { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff;
    font: 15px/1.4 'Roboto', sans-serif; touch-action: none; }
[hidden] { display: none !important; }

#web-camera, .web-viewer-media { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The camera's own size and proportions, scaled by viewer.js to cover the screen. */
/* Under the Unity page's buttons (viewar.css). */
#web-stage { position: fixed; z-index: 0; left: 50%; top: 50%; transform-origin: 50% 50%; }
#web-stage canvas, #web-stage .web-viewer-css { position: absolute; left: 0; top: 0; }
#web-stage canvas { width: 100%; height: 100%; display: block; }
/* YouTube pages (CSS3D) lie under the canvas and show through the transparent
   hole viewer.js leaves where each one is (youtubeHole). Taps go through the
   canvas: to a YouTube page where it is, else to the stage, as before. */
#web-stage .web-viewer-css { z-index: 0; }
#web-stage canvas { position: absolute; z-index: 1; pointer-events: none; }

.web-chip { position: fixed; z-index: 5; left: 14px; border: 0; border-radius: 999px; background: #00000081;
    color: #fff; font: 12px/1.3 monospace; padding: 6px 10px; }
.web-smoothing { top: calc(52px + env(safe-area-inset-top, 0px)); font-weight: 600; }
.web-stats { top: calc(88px + env(safe-area-inset-top, 0px)); right: 64px; pointer-events: none; white-space: normal; }


.web-start { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: #00000081; padding: 16px; }
.web-card { background: #fff; color: #0F133A; border-radius: 15px; padding: 24px; max-width: 340px; text-align: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; }
.web-card h2 { color: #CC0000; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.web-card p { font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.web-card button { border: 0; border-radius: 999px; background: #CC0000; color: #fff; font: inherit; font-weight: 700;
    padding: 12px 28px; }
.web-card button:disabled { opacity: 0.6; }

/* The loader after I'm Ready: the same card as the start screen (the shared
   loader's own box is sized for Studio, with a spinner half its width). */
.web-viewer .file-loading { padding: 16px; }
.web-viewer .file-loading .loading-content { width: 100%; max-width: 340px; padding: 28px 24px 24px; border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; }
.web-viewer .file-loading .loading-content img { width: 64px; height: 64px; }
.web-viewer .file-loading .web-loading-title { color: #CC0000; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 16px 0 6px; }
.web-viewer .file-loading #status2 { color: #0F133A; font-size: 15px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }

.web-status { position: fixed; z-index: 7; left: 16px; right: 16px; bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    margin: 0; background: #CC0000; color: #fff; border-radius: 12px; padding: 12px 14px; text-align: center; }

/* "Tap for sound": a YouTube that was refused its sound plays muted until a tap
   anywhere (viewer.js, soundFallback). It takes no taps itself. */
.web-sound-hint { position: fixed; z-index: 7; left: 50%; bottom: calc(170px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: #fff; color: #0F133A; padding: 14px 22px; border-radius: 28px; font: 600 16px/1 'Roboto', sans-serif; white-space: nowrap;
  pointer-events: none; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); animation: web-sound-pulse 1.6s ease-in-out infinite; }
.web-sound-hint[hidden] { display: none; }
@keyframes web-sound-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }