:root {
  --lens-top: 3.8vh;
  --lens-side: 2.2vw;
  --lens-bottom: 5.2vh;
  --lr-x: 3.6vw;
  --lr-y: 5.6vh;
  --lens-radius: var(--lr-x) / var(--lr-y);
}

/* ---------- Lente dos óculos ---------- */
.lens { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.lens__clip, .lens__window {
  position: absolute; inset: var(--lens-top) var(--lens-side) var(--lens-bottom);
  border-radius: var(--lens-radius);
}
.lens__clip { overflow: hidden; }
.lens__window {
  border: 1.5px solid rgb(66 214 208 / .7);
  box-shadow:
    0 0 0 120vmax rgb(2 5 18 / .97),
    0 0 26px rgb(66 214 208 / .4),
    inset 0 0 36px 4px rgb(66 214 208 / .14),
    inset 5px 0 14px rgb(255 70 130 / .10),
    inset -5px 0 14px rgb(66 214 208 / .16),
    inset 0 0 150px 24px rgb(0 0 0 / .6);
}
.lens__glass {
  position: absolute; inset: -20%;
  background: linear-gradient(112deg, transparent 38%, rgb(255 255 255 / .07) 44%, rgb(255 255 255 / .02) 48%, transparent 54%);
  animation: glass 16s ease-in-out infinite;
}
@keyframes glass { 0%, 100% { transform: translateX(-26%); } 50% { transform: translateX(26%); } }
.lens__scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgb(66 214 208 / .04) 0 1px, transparent 1px 3px),
    linear-gradient(transparent, rgb(66 214 208 / .08) 50%, transparent) 0 -30% / 100% 24% no-repeat;
  animation: scan 7s linear infinite;
}
@keyframes scan { to { background-position: 0 0, 0 140%; } }
.lens__grain {
  position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(4) infinite;
}
@keyframes grain { 25% { background-position: -30px 20px; } 50% { background-position: 25px -40px; } 75% { background-position: -50px -10px; } }
.lens__reticle { position: absolute; left: 50%; top: calc(var(--lens-top) + (100vh - var(--lens-top) - var(--lens-bottom)) / 2); width: 46px; height: 46px; translate: -50% -50%; opacity: .5; }
.lens__reticle i { position: absolute; inset: 0; border: 1px solid var(--cyan); border-radius: 50%; }
.lens__reticle i::before, .lens__reticle i::after { content: ''; position: absolute; background: var(--cyan); }
.lens__reticle i::before { left: 50%; top: -9px; bottom: -9px; width: 1px; opacity: .6; }
.lens__reticle i::after { top: 50%; left: -9px; right: -9px; height: 1px; opacity: .6; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; font-family: var(--font-hud);
  --pad-x: calc(var(--lens-side) + 46px); --pad-t: calc(var(--lens-top) + 42px); --gap: 9px;
}
.hud a, .hud button { pointer-events: auto; }

/* cantos acompanham a curva da lente */
.hud__corner {
  position: absolute; width: calc(var(--lr-x) + 1.2vw); height: calc(var(--lr-y) + 2vh);
  border: 2px solid var(--cyan); filter: drop-shadow(var(--glow-cyan));
}
.hud__corner--tl { top: calc(var(--lens-top) + var(--gap)); left: calc(var(--lens-side) + var(--gap)); border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--lr-x) - var(--gap)) calc(var(--lr-y) - var(--gap)); }
.hud__corner--tr { top: calc(var(--lens-top) + var(--gap)); right: calc(var(--lens-side) + var(--gap)); border-left: 0; border-bottom: 0; border-top-right-radius: calc(var(--lr-x) - var(--gap)) calc(var(--lr-y) - var(--gap)); }
.hud__corner--bl { bottom: calc(var(--lens-bottom) + var(--gap)); left: calc(var(--lens-side) + var(--gap)); border-right: 0; border-top: 0; border-bottom-left-radius: calc(var(--lr-x) - var(--gap)) calc(var(--lr-y) - var(--gap)); }
.hud__corner--br { bottom: calc(var(--lens-bottom) + var(--gap)); right: calc(var(--lens-side) + var(--gap)); border-left: 0; border-top: 0; border-bottom-right-radius: calc(var(--lr-x) - var(--gap)) calc(var(--lr-y) - var(--gap)); }

.hud__status { position: absolute; top: var(--pad-t); left: var(--pad-x); margin: 0; display: flex; gap: var(--space-4); color: var(--cyan); font: 700 1.05rem/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; text-shadow: var(--glow-cyan); }
.hud__area { font-family: var(--font-hud); }
.hud__compass { position: absolute; top: calc(var(--lens-top) + 22px); left: 50%; translate: -50% 0; width: min(44vw, 560px); height: 30px; text-align: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.hud__compass::before { content: ''; position: absolute; inset: 0 0 12px; background: repeating-linear-gradient(90deg, rgb(66 214 208 / .8) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--cyan) 0 2px, transparent 2px 50px); background-size: 100% 6px, 100% 12px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; animation: compass 30s ease-in-out infinite alternate; }
@keyframes compass { to { background-position: 120px 100%, 120px 100%; } }
.hud__heading { position: absolute; inset: auto 0 0; font: 600 .72rem/1 var(--font-hud); letter-spacing: .24em; color: var(--cyan); text-shadow: var(--glow-cyan); }
.hud__place { position: absolute; top: calc(var(--lens-top) + 60px); left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; font: 600 .68rem/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; text-align: center; color: var(--text-dim); opacity: .95; text-shadow: 0 0 6px rgb(2 5 18 / .95), 0 0 2px rgb(2 5 18 / .95); }
.hud__place strong { color: var(--cyan); font-weight: 600; }
.hud__brand { position: absolute; top: calc(var(--pad-t) - 10px); right: var(--pad-x); margin: 0; }
.hud__logo { display: block; width: 138px; aspect-ratio: 1484 / 1060; background: #fff; -webkit-mask: url(../assets/brand/logo-mono.svg) center / contain no-repeat; mask: url(../assets/brand/logo-mono.svg) center / contain no-repeat; filter: drop-shadow(0 0 10px rgb(255 255 255 / .4)); }

.hud__gauges { position: absolute; left: var(--pad-x); top: calc(var(--pad-t) + 34px); margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font: 600 .68rem/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); opacity: .9; }
.hud__gauges li { display: grid; grid-template-columns: 58px 74px auto; align-items: center; gap: 8px; }
.hud__gauges b { height: 4px; border-radius: 2px; background: rgb(66 214 208 / .18); position: relative; overflow: hidden; }
.hud__gauges b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--cyan); box-shadow: var(--glow-cyan); animation: gauge 5s ease-in-out infinite alternate; }
.hud__gauges li:nth-child(2) b::after { animation-duration: 7s; }
.hud__gauges li:nth-child(3) b::after { animation-duration: 9s; }
@keyframes gauge { to { width: calc(var(--v) * 1% - 6%); } }
.hud__gauges em { color: var(--cyan); font-style: normal; }
.hud__link { position: absolute; right: var(--pad-x); top: calc(var(--pad-t) + 108px); margin: 0; display: flex; align-items: center; gap: 8px; font: 600 .68rem/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); opacity: .95; }
.hud__link strong { color: var(--cyan); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hud__signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.hud__signal u { width: 3px; background: var(--cyan); }
.hud__signal u:nth-child(1) { height: 25%; }
.hud__signal u:nth-child(2) { height: 50%; }
.hud__signal u:nth-child(3) { height: 75%; }
.hud__signal u:nth-child(4) { height: 100%; animation: blink 3.1s infinite; }

/* mensagem recebida no HUD */
.hud__msg {
  position: absolute; right: var(--pad-x); top: calc(var(--pad-t) + 140px); width: min(340px, 26vw);
  border: 1px solid rgb(66 214 208 / .55);
  background: linear-gradient(180deg, rgb(8 13 43 / .88), rgb(8 13 43 / .72));
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px rgb(66 214 208 / .22), inset 0 0 0 1px rgb(66 214 208 / .08);
  pointer-events: auto;
}
.hud__msg::before, .hud__msg::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--cyan); filter: drop-shadow(var(--glow-cyan)); }
.hud__msg::before { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.hud__msg::after { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.hud__msg-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .85rem; border-bottom: 1px solid rgb(66 214 208 / .3); background: rgb(66 214 208 / .1); font: 700 .66rem/1 var(--font-hud); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.hud__msg-head b { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.hud__msg-head b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: blink 1.4s infinite; }
.hud__msg-head span { color: var(--text-dim); font-weight: 500; }
.hud__msg-body { padding: .8rem .95rem .4rem; min-height: 8em; }
.tx__src { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin: 0 0 .5rem; font: 700 .8rem/1.2 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; }
.tx__src b { color: var(--cyan); text-shadow: var(--glow-cyan); }
.tx__src span { color: var(--text-dim); font-weight: 600; }
.tx__src span::before { content: '· '; }
.tx__text { margin: 0; min-height: 5.6em; color: var(--text); font: 500 clamp(.88rem, 1vw, 1rem)/1.4 var(--font-hud); letter-spacing: .02em; }
.hud__msg[data-tipo="alerta"] .tx__src b { color: var(--gold); text-shadow: 0 0 10px rgb(216 180 90 / .5); }
.hud__msg[data-tipo="alerta"] .hud__msg-head b::before { background: #ff8a5c; box-shadow: 0 0 8px #ff8a5c; }
.hud__msg[data-tipo="comunidade"] .tx__src b { color: #D9C9FF; text-shadow: 0 0 10px rgb(104 70 171 / .8); }
.tx__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: .45rem .95rem .6rem; }
.tx__foot a { color: var(--gold); font: 700 .72rem/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.tx__foot a:hover, .tx__foot a:focus-visible { text-decoration: underline; }
.tx__dots { display: flex; gap: 5px; }
.tx__dots i { width: 14px; height: 3px; background: rgb(66 214 208 / .25); transition: background .3s; }
.tx__dots i.is-on { background: var(--cyan); box-shadow: var(--glow-cyan); }
.tx__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(0); opacity: .7; }
.btn-hud {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem;
  border: 1px solid var(--gold); background: rgb(216 180 90 / .14); color: var(--gold);
  font: 700 .82rem/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transform: skewX(-16deg); box-shadow: 0 0 14px rgb(216 180 90 / .25); transition: background .2s, color .2s;
}
.btn-hud > span { display: inline-flex; align-items: center; gap: .6rem; transform: skewX(16deg); }
.btn-hud:hover, .btn-hud:focus-visible { background: var(--gold); color: var(--abyss); }

/* log de inicialização */
.hud__bootlog { position: absolute; left: 50%; bottom: calc(var(--lens-bottom) + 76px); translate: -50% 0; margin: 0; min-height: 6.4em; color: var(--cyan); font: 600 .82rem/1.6 var(--font-hud); letter-spacing: .14em; text-transform: uppercase; text-align: center; white-space: pre; text-shadow: var(--glow-cyan); opacity: 0; pointer-events: none; }

/* menu dentro dos óculos */
.hud__menubtn { display: none; }
.hud__nav { position: absolute; left: 50%; bottom: calc(var(--lens-bottom) + 18px); translate: -50% 0; display: flex; gap: 6px; }
.hud__nav a {
  display: flex; align-items: baseline; gap: .55rem; padding: .62rem 1.2rem .56rem;
  border: 1px solid rgb(66 214 208 / .4); background: linear-gradient(180deg, rgb(8 13 43 / .6), rgb(8 13 43 / .85));
  color: var(--text); font: 600 .95rem/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transform: skewX(-16deg);
  backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s;
}
.hud__nav a > span { display: flex; align-items: baseline; gap: .55rem; transform: skewX(16deg); }
.hud__nav a i { font-style: normal; font-size: .62rem; color: var(--cyan); opacity: .85; letter-spacing: .1em; }
.hud__nav a:hover { border-color: var(--cyan); background: rgb(66 214 208 / .18); }
.hud__nav a[aria-current="page"] {
  border-color: var(--cyan); background: rgb(66 214 208 / .3); color: #fff;
  box-shadow: inset 0 -3px 0 var(--cyan), 0 0 16px rgb(66 214 208 / .45); text-shadow: var(--glow-cyan);
}

.is-panel-open .hotspots, .is-panel-open .hud__gauges, .is-panel-open .hud__link, .is-panel-open .hud__msg { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

/* ---------- Hotspots (marcações em realidade aumentada) ---------- */
.hotspot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); color: var(--cyan); text-decoration: none; pointer-events: auto; }
.hotspot__dot { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); animation: dot-pulse 3s ease-in-out infinite; }
.hotspot__dot::after { content: ''; position: absolute; inset: -8px; border: 1px solid var(--cyan); border-radius: 50%; opacity: .6; }
.hotspot__line { position: absolute; left: 0; top: 0; width: 80px; height: 1px; background: var(--cyan); transform-origin: 0 0; rotate: -35deg; }
.hotspot__label { position: absolute; left: 62px; top: -62px; padding: .3rem .6rem; background: rgb(8 13 43 / .6); font: 700 clamp(.8rem, 1.15vw, 1.05rem)/1 var(--font-hud); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: var(--glow-cyan); }
.hotspot--left .hotspot__line { rotate: -145deg; }
.hotspot--left .hotspot__label { left: auto; right: 62px; }
.hotspot__label::before, .hotspot__label::after { content: ''; position: absolute; top: -6px; bottom: -6px; width: 10px; border: 2px solid var(--cyan); opacity: 0; transition: .25s var(--ease-out); }
.hotspot__label::before { left: -16px; border-right: 0; }
.hotspot__label::after { right: -16px; border-left: 0; }
.hotspot:hover .hotspot__label::before, .hotspot:focus-visible .hotspot__label::before { left: -6px; opacity: 1; }
.hotspot:hover .hotspot__label::after, .hotspot:focus-visible .hotspot__label::after { right: -6px; opacity: 1; }
.hotspot:focus-visible { outline: none; }
@keyframes dot-pulse { 50% { scale: 1.35; opacity: .7; } }

/* ---------- Abertura (colocando os óculos) ---------- */
.boot { position: fixed; inset: 0; z-index: 50; display: none; pointer-events: none; }
.boot-on .boot { display: block; }
.will-boot .lens, .will-boot .hud, .will-boot .hotspots { visibility: hidden; }
.boot__black { position: absolute; inset: 0; background: #000; opacity: 0; }
.boot__static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; mix-blend-mode: screen; }
.boot__screen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: var(--space-3); opacity: 0; }
.boot__line { display: block; width: min(360px, 60vw); height: 2px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan), 0 0 40px rgb(66 214 208 / .6); }
.boot__log { margin: 0; min-height: 7.4em; color: var(--cyan); font: 600 .9rem/1.7 var(--font-hud); letter-spacing: .14em; text-transform: uppercase; white-space: pre; text-align: left; text-shadow: var(--glow-cyan); }
.boot__flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, rgb(223 255 253 / .9), rgb(66 214 208 / .5) 40%, transparent 75%); }
.boot__skip { pointer-events: auto; position: absolute; right: var(--space-4); bottom: var(--space-4); padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgb(0 0 0 / .4); color: var(--cyan); font: 600 .85rem var(--font-hud); letter-spacing: .1em; cursor: pointer; }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  :root { --lens-top: 2.4vh; --lens-side: 1.4vw; --lens-bottom: 2.6vh; --lr-x: 7vw; --lr-y: 3.2vh; }
  .hud { --pad-x: calc(var(--lens-side) + 26px); --pad-t: calc(var(--lens-top) + 24px); --gap: 6px; }
  .hud__corner { width: calc(var(--lr-x) + 8vw); height: calc(var(--lr-y) + 3vh); }
  .hud__gauges, .hud__link, .hud__compass { display: none; }
  .hud__place { top: calc(var(--pad-t) + 30px); font-size: .58rem; letter-spacing: .12em; }
  .hud__status { font-size: .8rem; gap: var(--space-2); }
  .hud__logo { width: 84px; }
  .hud__msg { left: calc(var(--lens-side) + 12px); right: calc(var(--lens-side) + 12px); width: auto; top: calc(var(--pad-t) + 56px); }
  .hud__msg-body { padding: .6rem .8rem .4rem; min-height: 7.6em; }
  .tx__text { min-height: 4.4em; font-size: .82rem; }
  .tx__src { font-size: .7rem; }
  .hud__menubtn {
    position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--lens-bottom) + 12px); z-index: 2;
    display: flex; align-items: center; gap: .7rem; padding: .62rem 1.1rem .56rem;
    border: 1px solid rgb(66 214 208 / .55); background: linear-gradient(180deg, rgb(8 13 43 / .7), rgb(8 13 43 / .9));
    color: var(--text); font: 600 .8rem/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    transform: skewX(-16deg); backdrop-filter: blur(6px);
  }
  .hud__menubtn > * { transform: skewX(16deg); }
  .hud__menubtn b { font-weight: 700; }
  .hud__menubtn em { font-style: normal; color: var(--cyan); letter-spacing: .1em; }
  .hud__menubtn-i { width: 14px; height: 10px; background: linear-gradient(var(--cyan) 0 2px, transparent 2px 4px, var(--cyan) 4px 6px, transparent 6px 8px, var(--cyan) 8px 10px); }
  .menu-open .hud__menubtn { border-color: var(--cyan); box-shadow: 0 0 16px rgb(66 214 208 / .45); }
  .menu-open .hud__menubtn-i { background: linear-gradient(45deg, transparent 4px, var(--cyan) 4px 6px, transparent 6px), linear-gradient(-45deg, transparent 4px, var(--cyan) 4px 6px, transparent 6px); }
  .hud__nav { display: none; left: 50%; right: auto; width: min(260px, calc(100% - 2 * var(--lens-side) - 20px)); translate: -50% 0; flex-direction: column; align-items: stretch; gap: 6px; overflow: visible; bottom: calc(var(--lens-bottom) + 62px); z-index: 2; }
  .menu-open .hud__nav { display: flex; }
  .hud__nav a { justify-content: center; padding: .7rem .9rem; font-size: .85rem; }
  .hud__nav a i { display: none; }
  .hotspot__line { width: 48px; }
  .hotspot__label { left: 36px; top: -40px; }
  .hotspot--left .hotspot__label { right: 36px; }
  .is-panel-open .hud__brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lens__glass, .lens__scan, .lens__grain, .hud__compass::before, .hud__gauges b::after { animation: none !important; }
}