html, body {
        margin: 0; padding: 0; width: 100%; height: 100dvh;
        overflow: hidden; font-family: Arial, sans-serif;
        overscroll-behavior: none; touch-action: manipulation;
      }
      canvas, video {
        position: absolute; width: 100vw !important; height: 100vh !important;
        object-fit: cover; left: 0 !important;
      }

      /* Intro */
      #intro-logo{
        display:block;
        width:min(220px, 60%);
        height:auto;
        margin:0 auto 16px;
        object-fit:contain;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
        position:relative;
        top:-48px;
      }

      #intro-screen {
        position: absolute; inset: 0;
        /* background: linear-gradient(to bottom, #03a9f4, #0288d1);*/
        background: linear-gradient(to bottom, #0033A0, #002B8C);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        color: #fff; text-align: center; z-index: 9999; padding: 20px; box-sizing: border-box;
      }
      #intro-screen h1 { font-size: 22px; margin-bottom: 12px; }
      #intro-screen p  { font-size: 15px; max-width: 320px; margin-bottom: 24px; }
      .intro-icons { display: flex; justify-content: center; gap: 20px; margin-bottom: 24px; }
      .intro-icons img { width: 56px; height: 56px; object-fit: contain; }

      #intro-title{
        margin: -48px 0 8px;
        font-size: clamp(20px, 3.4vw, 24px);
        line-height: 1.2;
        text-align: center;
      }

      #intro-subtitle{
        margin: 0 0 18px;
        max-width: 340px;
        line-height: 1.35;
        opacity: .95;
        text-align: center;
        margin-left: auto; margin-right: auto;
      }
      #intro-screen{ gap: 12px; }

      #start-btn {
        background: #fff; color: #0288d1; font-size: 16px; border: none; padding: 12px 24px;
        border-radius: 6px; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,.3);
        display: flex; align-items: center; gap: 8px;
      }
      #start-btn img { width: 20px; height: 20px; }

      /* ===================== Scanner ===================== */
      :root{
        /* ajustes rápidos */
        --scan-size: 200px;        /* lado do quadrado (mantendo o seu valor) */
        --scan-border: 3px;

        /* linha + glow */
        --line-color:#ffffff;      /* cor da linha */
        --line-h:2px;              /* espessura */
        --scan-speed:2.0s;         /* velocidade da varredura */
        --glow-blur:28px;          /* intensidade do blur (pseudo-elemento) */
        --glow-opacity:.55;        /* opacidade do brilho do pseudo-elemento */
        --glow-shadow-1: rgba(255,255,255,.45); /* drop-shadow mais forte */
        --glow-shadow-2: rgba(255,255,255,.35); /* drop-shadow secundário */
      }

      #mindar-ui-scanning {
        position: absolute; top: 50%; left: 50%; width: var(--scan-size); height: var(--scan-size);
        transform: translate(-50%, -50%); z-index: 2000; display: none; pointer-events: none; /* z-index acima do vídeo */
      }
      .corner {
        position: absolute; width: 20px; height: 20px; border: var(--scan-border) solid rgba(255,255,255,.9); box-sizing: border-box;
      }
      .top-left{ top:0; left:0; border-right:none; border-bottom:none }
      .top-right{ top:0; right:0; border-left:none; border-bottom:none }
      .bottom-left{ bottom:0; left:0; border-right:none; border-top:none }
      .bottom-right{ bottom:0; right:0; border-left:none; border-top:none }

      /* ---- LINHA COM GLOW ROBUSTO ---- */
      .scanner-line{
        position:absolute; left:0; top:0;
        width:100%; height:var(--line-h);
        background: var(--line-color);
        border-radius: 999px;
        /* animação suave via transform (evita reflow) */
        animation: scanline-pingpong var(--scan-speed) ease-in-out infinite alternate;
        will-change: transform, filter, opacity;
        pointer-events:none;

        /* Glow compatível (Android/Chrome) via drop-shadow */
        filter:
          drop-shadow(0 0 10px var(--glow-shadow-1))
          drop-shadow(0 0 18px var(--glow-shadow-2));
        -webkit-filter:
          drop-shadow(0 0 10px var(--glow-shadow-1))
          drop-shadow(0 0 18px var(--glow-shadow-2));

        /* força camada própria (não “apaga” no vídeo) */
        transform: translateZ(0);
      }
      /* Aura adicional via pseudo-elemento (blur) */
      .scanner-line::before{
        content:"";
        position:absolute; inset:-10px -20px;
        background: var(--line-color);
        opacity: var(--glow-opacity);
        border-radius: 999px;
        filter: blur(var(--glow-blur));
        -webkit-filter: blur(var(--glow-blur));
        pointer-events:none;
      }

      @keyframes scanline-pingpong {
        0%   { transform: translateZ(0) translateY(0); }
        100% { transform: translateZ(0) translateY(calc(var(--scan-size) - var(--line-h))); }
      }
      @media (prefers-reduced-motion: reduce){
        .scanner-line{ animation: none; }
      }

      #ar-div{ position: fixed; inset: 0; width: 100svw; height: 100svh; visibility: hidden; pointer-events: none; }

      /* Rodapé */
      #footer-bar{
        position: fixed; left:0; right:0; bottom: max(0px, env(safe-area-inset-bottom));
        height: 60px; background:#0033A0; padding:0 16px; z-index:1000;

        display: grid;
        grid-template-columns: 1fr auto 1fr; /* esquerda | centro | direita */
        align-items: center;
      }

      /* Alinhamentos por célula */
        #unmuteBtn{ justify-self: start;  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }
        #homeBtn{ justify-self: center; margin:0; } /* remova o margin: 0 auto */
        #footer-logo{ justify-self: end; }

      #footer-logo{
        height: 50px;
        opacity: .9;
        margin-left: auto;
        order: 99;
        position: relative;
        top: 5px;   /* negativo = sobe | positivo = desce */
      }
      /* Botão central de “Home” */
      #homeBtn{
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
         /* centraliza na barra */
        filter: drop-shadow(0 0 3px rgba(141, 141, 141, 0.4));
      }
      #homeBtn img{
        width: 32px; height: 32px;
        object-fit: contain;
        transition: transform .2s ease;
      }
      #homeBtn:hover img{ transform: scale(1.1); }
      #unmuteBtn{
        padding: 6px 10px; background: transparent; border: none; cursor: pointer; color:#fff; font-size:14px;
         align-items: center; justify-content: center; gap: 8px; border-radius: 6px;
      }
      #unmuteBtn:hover{ background-color: rgba(255,255,255,.1); }
      #unmute-icon{ height:24px; width:24px; display:block; }

      /* Overlay fixo padrão (card 16:9) */
      #fixed-overlay-container{
        position: fixed; left: 50svw; top: 50svh; transform: translate(-50%, -50%);
        max-width: min(92svw, 640px); max-height: 92svh; aspect-ratio: 16 / 9;
        width: min(92svw, calc(92svh * (16/9))); height: auto; box-sizing: border-box;
        z-index: 999999; border: 2px solid #07d5ff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.55);
        background:#000; overflow:hidden; display:none; font-family: Arial, sans-serif;
      }
      #fixed-overlay-inner{ position: relative; width: 100%; height: 100%; }
      #player{ position:absolute; inset:0; width:100%; height:100%; background:#000; z-index:1; }
      #player iframe{ width:100%; height:100%; border:0; display:block; }

      /* Botões no topo do overlay */
      .overlay-toolbar{
        position:absolute;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        display:flex; gap:8px; z-index: 2;
      }
      .overlay-btn{
        width:44px; height:44px; display:flex; align-items:center; justify-content:center;
        border-radius:9999px; padding:0; background:rgba(0,0,0,.6);
        border:1px solid rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(0,0,0,.25);
        cursor:pointer;
      }
      .overlay-btn img{
        width:24px; height:24px; display:block; object-fit:contain;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
      }
      .overlay-btn:hover{ background:rgba(0,0,0,.65); }
      .overlay-btn:active{ transform:scale(.96); }
      .overlay-btn svg{ width:22px; height:22px; display:block; }

      /* Modo Rotacionado */
      #fixed-overlay-container.rotated {
        left: 50svw; top: 50svh; transform: translate(-50%, -50%);
        width: 100svw; height: 100svh; max-width: none; max-height: none;
        border: none; border-radius: 0;
      }
      #fixed-overlay-container.rotated #player{
        transform: rotate(90deg);
        transform-origin: center;
      }

      @supports (height: 100svh){ body{ min-height:100svh } }

      #version-badge{
        position: fixed; bottom: 6px; right: 10px; font-size: 08px; color:#fff;
        background: rgba(0,0,0,.5); padding: 4px 8px; border-radius: 6px; z-index: 999999;
        font-family: monospace; pointer-events: none;
      }
      /* opcional: estilo do botão “Fechar” como texto */
      #fixed-overlay-close{ padding:0 12px; width:auto; height:44px; border-radius:12px; color: #fff;   }

/* === Fantasma: ocupa espaço mas fica invisível === */
.ghost{
  visibility: hidden;
  pointer-events: none;
}


/* === Fixação de colunas no grid para estabilidade do centro === */
#unmuteBtn{ grid-column:1; justify-self:start; }
#homeBtn{ grid-column:2; justify-self:center; margin:0; }
#footer-logo{ grid-column:3; justify-self:end; }

#homeBtn img{ mix-blend-mode: normal; filter: none; }

/* Ícone do cliente (centro da barra) */
#clientBrand{
  display:flex;
  align-items:center;
  justify-content:center;
}
#clientBrand img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none; /* não clicável */
  user-select: none;
  -webkit-user-drag: none;
}