*{box-sizing:border-box}
:root{
  --cyan:#66f4ff;
  --green:#6fffb7;
  --bg:#010507;
}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg)}
body{font-family:Arial,Helvetica,sans-serif;color:#d8ffff}
#app{
  position:relative;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,160,170,.055),transparent 35%),
    linear-gradient(180deg,#010304,#02090a);
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

.matrix-overlay{
  position:absolute;inset:0;pointer-events:none;opacity:.028;
  background-image:
    linear-gradient(90deg,transparent 49%,rgba(110,255,200,.14) 50%,transparent 51%),
    linear-gradient(rgba(100,255,220,.05) 1px,transparent 1px);
  background-size:9px 100%,100% 17px;
  mix-blend-mode:screen;
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:.075;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(100,245,255,.14) 3px,transparent 4px);
  mix-blend-mode:screen;
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(1,5,7,.22) 72%,rgba(1,5,7,.78) 100%);
}

.topbar{
  position:absolute;left:3vw;right:3vw;top:3vh;z-index:20;
  display:flex;align-items:center;justify-content:space-between;pointer-events:none;
}
.brand{display:flex;align-items:center;gap:8px;color:rgba(112,237,245,.40);font-size:8px;letter-spacing:.17em}
.brand b{color:rgba(220,255,255,.84);font-size:10px}
.dot{
  width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);
  animation:blink 2s infinite;
}
.actions{display:flex;gap:6px;pointer-events:auto}
.actions button,.info-card button{
  border:1px solid rgba(112,237,245,.13);background:rgba(1,16,19,.58);
  color:rgba(200,250,252,.55);padding:8px 11px;font-size:7px;letter-spacing:.13em;cursor:pointer;
}
.actions button.primary{color:rgba(220,255,255,.82);border-color:rgba(112,237,245,.24)}

.mission-nav{
  position:absolute;top:15vh;left:3vw;width:155px;z-index:20;display:flex;flex-direction:column;gap:4px;
}
.mission-nav button{
  display:grid;grid-template-columns:23px 1fr;grid-template-rows:auto auto;column-gap:7px;
  padding:8px;text-align:left;border:1px solid rgba(112,237,245,.06);
  background:rgba(1,13,16,.30);color:rgba(188,238,240,.35);cursor:pointer;
}
.mission-nav button>span{grid-row:1/3;align-self:center;font-size:7px;color:rgba(112,237,245,.24)}
.mission-nav b{font-size:8px;font-weight:500;letter-spacing:.06em}
.mission-nav small{margin-top:2px;font-size:6px;opacity:.55}
.mission-nav button:hover,.mission-nav button.active{
  color:rgba(220,255,255,.78);border-color:rgba(112,237,245,.20);background:rgba(0,65,72,.14);
}

.info-card{
  position:absolute;right:3vw;top:15vh;z-index:20;width:min(285px,28vw);padding:15px;
  border:1px solid rgba(112,237,245,.09);background:rgba(1,13,16,.50);backdrop-filter:blur(6px);
}
.info-head{display:flex;justify-content:space-between;color:rgba(112,237,245,.30);font-size:7px;letter-spacing:.14em}
.live{color:rgba(112,237,245,.48)}
.info-card h1{margin:10px 0 4px;font-size:17px;font-weight:500;color:rgba(220,255,255,.91)}
.sub{font-size:7px;letter-spacing:.11em;color:rgba(170,232,235,.37)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0 11px}
.stats div{border-left:1px solid rgba(112,237,245,.11);padding-left:8px}
.stats small{display:block;color:rgba(112,237,245,.27);font-size:6px;letter-spacing:.15em;margin-bottom:3px}
.stats b{display:block;font-size:8px;font-weight:500;color:rgba(200,248,250,.62)}
.info-card p{font-size:8px;line-height:1.55;color:rgba(185,235,238,.45);margin:0 0 13px}
.info-card button{width:100%}

.mentor-status{
  position:absolute;left:3vw;bottom:3vh;z-index:20;padding-left:8px;border-left:1px solid rgba(112,237,245,.10);
}
.mentor-status span{display:block;font-size:6px;letter-spacing:.14em;color:rgba(112,237,245,.27)}
.mentor-status b{display:block;margin-top:3px;font-size:8px;font-weight:500;color:rgba(205,250,252,.48)}

.interaction-hint{
  position:absolute;left:50%;bottom:2.5vh;transform:translateX(-50%);z-index:15;
  font-size:6px;letter-spacing:.15em;color:rgba(112,237,245,.18);white-space:nowrap;
}

/* Marker now sits on surface instead of floating above it */
.map-label{pointer-events:auto;transform:translate(-50%,-50%)}
.marker{
  position:relative;width:24px;height:24px;cursor:pointer;
}
.marker-dot{
  position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);
  border-radius:50%;background:#e7ffff;
  box-shadow:0 0 6px var(--cyan),0 0 15px rgba(0,185,200,.48);
}
.marker-ring{
  position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(112,237,245,.60);animation:ringSurface 2.2s infinite;
}
.marker-name{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  white-space:nowrap;padding:2px 5px;border:1px solid rgba(112,237,245,.11);
  background:rgba(1,12,15,.72);color:rgba(205,250,252,.60);font-size:6px;letter-spacing:.11em;
}
.map-label.selected .marker-name{color:#e7ffff;border-color:rgba(112,237,245,.30)}
.map-label.selected .marker-ring{border-color:rgba(220,255,255,.92)}

.loading{
  position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#010507;transition:opacity .45s ease;
}
.loading.hidden{opacity:0;pointer-events:none}
.loader{
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(112,237,245,.12);
  border-top-color:rgba(112,237,245,.72);animation:spin 1s linear infinite;
}
.loading span{color:rgba(112,237,245,.35);font-size:7px;letter-spacing:.20em}

@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ringSurface{
  0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.72)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}
}
@media(max-width:760px){
  .mission-nav{top:auto;bottom:3vh;right:3vw;width:auto;flex-direction:row}
  .mission-nav button{display:block;flex:1}
  .mission-nav button span,.mission-nav button small{display:none}
  .info-card{width:250px;top:11vh}
  .mentor-status{display:none}
  .interaction-hint{display:none}
}


.boot-gate{
  position:absolute;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 55%,rgba(0,150,165,.07),transparent 30%),
    rgba(1,5,7,.96);
  backdrop-filter:blur(6px);
  transition:opacity .45s ease,visibility .45s ease;
}
.boot-gate.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.boot-panel{
  width:min(330px,82vw);
  padding:24px;
  text-align:center;
  border:1px solid rgba(102,244,255,.14);
  background:rgba(1,12,15,.72);
  box-shadow:0 0 60px rgba(0,160,175,.08);
}
.boot-kicker{
  display:block;
  margin-bottom:16px;
  color:rgba(102,244,255,.38);
  font-size:7px;
  letter-spacing:.20em;
}
.boot-panel button{
  width:100%;
  padding:13px 14px;
  border:1px solid rgba(102,244,255,.24);
  background:rgba(0,82,92,.14);
  color:rgba(220,255,255,.85);
  font-size:9px;
  letter-spacing:.20em;
  cursor:pointer;
  transition:.2s ease;
}
.boot-panel button:hover{
  background:rgba(0,120,135,.20);
  box-shadow:0 0 22px rgba(0,205,220,.08);
}
.boot-panel small{
  display:block;
  margin-top:10px;
  color:rgba(170,235,238,.24);
  font-size:6px;
  letter-spacing:.14em;
}

/* ================= GROVE INTELLIGENCE / JARVIS HUD ================= */
.intel-panel{
  position:absolute;
  z-index:60;
  right:2.4vw;
  top:7vh;
  width:min(555px,43vw);
  min-height:335px;
  opacity:0;
  visibility:hidden;
  transform:translateX(55px) scale(.97);
  transform-origin:100% 20%;
  color:#bdfbff;
  border:1px solid rgba(94,238,255,.15);
  border-left:2px solid rgba(94,238,255,.45);
  background:
    linear-gradient(108deg,rgba(0,7,10,.91),rgba(0,19,24,.73) 64%,rgba(0,8,11,.52));
  box-shadow:
    -20px 0 60px rgba(0,0,0,.42),
    inset 0 0 70px rgba(0,195,210,.025),
    0 0 24px rgba(0,195,210,.035);
  backdrop-filter:blur(9px);
  clip-path:polygon(0 0,95% 0,100% 8%,100% 100%,5% 100%,0 91%);
  transition:
    opacity .28s ease,
    transform .48s cubic-bezier(.2,.8,.2,1),
    visibility .28s;
  pointer-events:none;
}
.intel-panel.open{
  opacity:1;
  visibility:visible;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}
.intel-panel.flash{
  animation:intelBoot .38s steps(2,end);
}
@keyframes intelBoot{
  0%{filter:brightness(2.1);transform:translateX(28px) scaleY(.12)}
  28%{filter:brightness(.6);transform:translateX(-7px) scaleY(1.04)}
  60%{filter:brightness(1.35);transform:translateX(3px)}
  100%{filter:none;transform:none}
}
.intel-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(90,240,255,.022) 4px);
  mix-blend-mode:screen;
}
.intel-noise{
  position:absolute;
  inset:0;
  opacity:.10;
  pointer-events:none;
  background-image:radial-gradient(rgba(115,250,255,.55) .5px,transparent .7px);
  background-size:5px 5px;
  animation:intelNoise .16s steps(2) infinite;
}
@keyframes intelNoise{50%{transform:translate(1px,-1px)}}

.intel-topline{
  display:flex;
  justify-content:space-between;
  padding:11px 14px 9px;
  border-bottom:1px solid rgba(94,238,255,.09);
  color:rgba(177,248,252,.44);
  font-size:7px;
  letter-spacing:.18em;
}
.intel-topline b{
  font-weight:500;
  color:rgba(112,255,206,.76);
}

.intel-grid{
  display:grid;
  grid-template-columns:41% 59%;
  padding:13px;
}
.intel-portrait{
  position:relative;
  min-height:290px;
  overflow:hidden;
  border:1px solid rgba(94,238,255,.11);
  background:#01080b;
}
.intel-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 27%;
  opacity:.82;
  filter:grayscale(.25) saturate(.66) contrast(1.18) brightness(.70) hue-rotate(6deg);
}
.intel-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,245,225,.07),transparent 38%),
    linear-gradient(0deg,rgba(0,5,8,.72),transparent 46%);
  box-shadow:inset 0 0 52px rgba(0,0,0,.50);
}
.portrait-scan{
  position:absolute;
  z-index:3;
  left:0; right:0; top:0;
  height:1px;
  background:#b6ffff;
  box-shadow:0 0 10px #5ff5ff,0 0 22px rgba(80,245,255,.4);
  opacity:.62;
  animation:portraitScan 3.6s linear infinite;
}
@keyframes portraitScan{to{top:100%}}

.portrait-reticle{
  position:absolute;
  z-index:3;
  width:60px;height:60px;
  left:50%;top:29%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(139,253,255,.20);
  border-radius:50%;
  box-shadow:0 0 0 12px rgba(90,240,255,.018);
}
.portrait-reticle::before,.portrait-reticle::after{
  content:"";
  position:absolute;
  background:rgba(139,253,255,.23);
}
.portrait-reticle::before{height:1px;width:82px;left:-12px;top:29px}
.portrait-reticle::after{width:1px;height:82px;left:29px;top:-12px}

.portrait-id{
  position:absolute;
  z-index:4;
  left:9px;bottom:9px;
  color:rgba(198,254,255,.78);
  font-size:7px;
  letter-spacing:.18em;
}

.intel-data{padding:3px 0 0 16px}
.intel-eyebrow{
  color:rgba(112,255,206,.60);
  font-size:6px;
  letter-spacing:.22em;
}
.intel-data h2{
  margin:5px 0 11px;
  color:rgba(214,254,255,.94);
  font-size:17px;
  line-height:.96;
  letter-spacing:.04em;
  font-weight:500;
  text-shadow:0 0 18px rgba(70,225,255,.16);
}
.intel-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(94,238,255,.09);
  border-left:1px solid rgba(94,238,255,.09);
}
.intel-stats div{
  padding:7px;
  border-right:1px solid rgba(94,238,255,.09);
  border-bottom:1px solid rgba(94,238,255,.09);
}
.intel-stats small,.intel-entity>span{
  display:block;
  color:rgba(151,235,240,.36);
  font-size:5px;
  letter-spacing:.16em;
}
.intel-stats strong{
  display:block;
  margin-top:2px;
  color:rgba(164,252,255,.74);
  font-size:7px;
  letter-spacing:.08em;
  font-weight:500;
}
.intel-entity{
  margin-top:11px;
  padding-left:10px;
  border-left:1px solid rgba(95,255,213,.30);
}
.intel-entity h3{
  margin:2px 0 4px;
  color:rgba(119,255,213,.90);
  font-size:13px;
  letter-spacing:.16em;
  font-weight:500;
}
.intel-entity p{
  min-height:58px;
  margin:0;
  color:rgba(185,239,242,.54);
  font-size:7px;
  line-height:1.48;
}
.intel-records{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:8px;
  color:rgba(128,221,226,.40);
  font-size:5px;
  letter-spacing:.08em;
}
.intel-footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px 11px;
  color:rgba(126,225,230,.30);
  font-size:5px;
  letter-spacing:.17em;
}
.intel-footer i{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(88,238,255,.05),rgba(88,238,255,.30),rgba(88,238,255,.05));
}

/* when intel opens, hide regular right card so the scene does not feel crowded */
body.intel-open .info-card{
  opacity:0;
  transform:translateX(18px);
  pointer-events:none;
  transition:.2s ease;
}

@media(max-width:850px){
  .intel-panel{right:2vw;top:5vh;width:56vw;min-height:290px}
  .intel-grid{grid-template-columns:39% 61%;padding:9px}
  .intel-portrait{min-height:235px}
  .intel-data{padding-left:10px}
  .intel-data h2{font-size:13px}
  .intel-entity p{font-size:6px;min-height:48px}
}

/* ================= TDJ / JAMIL INTELLIGENCE ================= */
.tdj-intel{
  border-left-color:rgba(107,255,179,.45);
  background:
    linear-gradient(108deg,rgba(0,8,9,.92),rgba(0,22,19,.73) 64%,rgba(0,9,10,.54));
}
.tdj-intel .intel-eyebrow,
.tdj-intel .intel-entity h3,
.tdj-intel .intel-topline b{
  color:rgba(112,255,190,.88);
}
.tdj-intel .intel-entity{
  border-left-color:rgba(112,255,190,.34);
}
.tdj-portrait img{
  object-position:50% 42%;
  filter:grayscale(.15) saturate(.72) contrast(1.18) brightness(.72) hue-rotate(20deg);
}

/* Keep only one intelligence panel visible at once. */
.intel-panel:not(.open){pointer-events:none}

/* TDJ territory beacon — stronger than ordinary mission points */
.tdj-map-label .marker{
  filter:drop-shadow(0 0 9px rgba(90,255,180,.55));
}
.tdj-map-label .marker-name{
  color:rgba(170,255,218,.96)!important;
  text-shadow:0 0 8px rgba(70,255,170,.72),0 0 20px rgba(70,255,170,.30);
}
.tdj-map-label .marker-dot{
  background:#79ffc0!important;
  box-shadow:0 0 7px #79ffc0,0 0 18px rgba(80,255,180,.75)!important;
}
.tdj-map-label .marker-ring{
  border-color:rgba(100,255,190,.68)!important;
  box-shadow:0 0 12px rgba(70,255,170,.30);
}
.tdj-map-label::after{
  content:"TDJ // TERRITÓRIO INDEXADO";
  position:absolute;
  left:50%;
  top:28px;
  transform:translateX(-50%);
  width:max-content;
  padding:3px 6px;
  border-left:1px solid rgba(110,255,195,.42);
  color:rgba(135,255,205,.64);
  background:rgba(0,12,10,.52);
  font-size:5px;
  letter-spacing:.14em;
}
.tdj-discovery{
  animation:tdjDiscovery .65s steps(2,end) 4;
}
@keyframes tdjDiscovery{
  0%,100%{opacity:1;filter:brightness(1)}
  45%{opacity:.25;filter:brightness(2.5)}
  55%{opacity:1;transform:translateX(2px)}
}

/* ================= V5.5.2 PORTRAIT MATCH ================= */
/* Grove and TDJ now share the same "Mentor scan" language. */
.intel-portrait{
  background:
    radial-gradient(circle at 50% 35%,rgba(44,222,255,.08),transparent 34%),
    #01080b;
}
.intel-portrait img{
  object-fit:cover;
  object-position:50% 34%;
  transform:scale(1.01);
  filter:
    grayscale(.18)
    saturate(.76)
    contrast(1.20)
    brightness(.73)
    hue-rotate(2deg);
}
.tdj-portrait img{
  object-fit:cover!important;
  object-position:50% 34%!important;
  transform:scale(1.015);
  filter:
    grayscale(.12)
    saturate(.82)
    contrast(1.18)
    brightness(.76)
    hue-rotate(1deg)!important;
}
.intel-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(108,242,255,.045) 4px,
      transparent 5px
    );
  mix-blend-mode:screen;
}
.intel-portrait .portrait-reticle{
  z-index:4;
}
.intel-portrait .portrait-id{
  z-index:5;
}

/* V5.5.3 — TDJ Setor Norte */
.tdj-map-label::after{
  content:"TDJ // TROPA DO JAMIL // SETOR NORTE";
  font-size:5px;
  letter-spacing:.11em;
  white-space:nowrap;
}