:root{
  --bg:#020811;
  --text:#f7f9fd;
  --muted:#bdc9d8;
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;
  background:var(--bg);color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
}
body{overflow:hidden}

.portal{
  position:fixed;inset:0;
  display:grid;place-items:center;
  overflow:hidden;
  background:
    linear-gradient(rgba(2,8,17,.34),rgba(2,8,17,.72)),
    url("assets/backdrop.webp") center/cover no-repeat,
    #020811;
}
.backdrop{
  position:absolute;inset:-40px;
  background:
    linear-gradient(rgba(2,8,17,.25),rgba(2,8,17,.58)),
    url("assets/backdrop.webp") center/cover no-repeat;
  filter:blur(9px);
  transform:scale(1.06);
}
.stage{
  position:relative;z-index:2;
  width:min(100vw,calc(100vh * 1.625));
  aspect-ratio:1664/1024;
  overflow:hidden;
  box-shadow:0 0 70px rgba(0,0,0,.45);
}
.scene{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  display:block;user-select:none;pointer-events:none;
}
.hotspots{position:absolute;inset:0}

.tv{
  --accent:#2f80ed;
  position:absolute;
  display:block;
  border-radius:1.15vw;
  color:#fff;text-decoration:none;
  outline:none;
  border:1px solid transparent;
  background:transparent;
  overflow:hidden;
  transition:
    filter .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.tv::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--accent) 3%,transparent),
    transparent 48%,
    color-mix(in srgb,var(--accent) 8%,transparent)
  );
  opacity:0;transition:opacity .18s ease;
}
.tv::after{
  content:"";
  position:absolute;
  top:-45%;left:-30%;
  width:20%;height:190%;
  transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  opacity:0;
}
.tv:hover,
.tv:focus-visible{
  filter:brightness(1.065) saturate(1.035);
  border-color:color-mix(in srgb,var(--accent) 84%,white 7%);
  box-shadow:
    0 0 24px color-mix(in srgb,var(--accent) 30%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--accent) 8%,transparent);
  transform:translateY(-1px);
}
.tv:hover::before,
.tv:focus-visible::before{opacity:1}
.tv:hover::after,
.tv:focus-visible::after{
  opacity:1;
  animation:sweep .75s ease-out forwards;
}

.open-hint{
  position:absolute;
  right:4.2%;bottom:4.2%;
  display:flex;align-items:center;gap:6px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(2,10,23,.76);
  border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.08));
  backdrop-filter:blur(7px);
  font-size:clamp(8px,.58vw,11px);
  font-weight:700;
  opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.tv:hover .open-hint,
.tv:focus-visible .open-hint{
  opacity:1;transform:none;
}
.open-hint span:last-child{color:var(--accent);font-size:14px}

.tv[data-slot="perfis"]{left:8.35%;top:16.25%;width:21.15%;height:39.15%}
.tv[data-slot="legislativo"]{left:29.85%;top:16.65%;width:20.05%;height:38.75%}
.tv[data-slot="eleitoral"]{left:50.45%;top:16.75%;width:19.55%;height:38.60%}
.tv[data-slot="visitas"]{left:70.45%;top:16.35%;width:20.15%;height:39.05%}

.visits-tv{cursor:default}
.visits-actions{
  position:absolute;
  left:5%;right:5%;bottom:4.2%;
  display:flex;gap:7px;
  opacity:0;transform:translateY(5px);
  transition:opacity .16s ease,transform .16s ease;
}
.visits-tv:hover .visits-actions,
.visits-tv:focus-within .visits-actions{opacity:1;transform:none}
.visits-action{
  flex:1;min-height:34px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:5px 7px;border-radius:9px;
  color:#fff;text-decoration:none;
  background:rgba(2,10,23,.82);
  border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.10));
  backdrop-filter:blur(7px);
  font-size:clamp(7px,.5vw,10px);
  font-weight:750;
}
.visits-action:hover{filter:brightness(1.16)}

/* Arko integrado diretamente à cena: hotspot segue o mesmo padrão das plataformas superiores */
.tv[data-slot="arko"]{
  left:10.35%;top:60.35%;width:18.95%;height:20.85%;
  border-radius:.55vw;
  clip-path:polygon(1.8% 4.0%,98.8% 2.2%,97.8% 95.8%,1.2% 98.2%);
}
.tv[data-slot="arko"] .open-hint{
  right:4.2%;bottom:7.0%;
}


.signature{
  position:absolute;
  left:50%;bottom:1.0%;
  transform:translateX(-50%);
  padding:7px 13px;border-radius:10px;
  background:rgba(2,10,23,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(7px);
  color:#edf2f8;
  font-size:clamp(10px,.72vw,14px);
  font-weight:650;white-space:nowrap;
}

@keyframes sweep{from{left:-30%}to{left:125%}}

.mobile-view{display:none}
@media (max-width:900px), (orientation:portrait){
  body{overflow:auto}
  .portal{display:none}
  .mobile-view{
    display:block;min-height:100vh;
    background:
      linear-gradient(180deg,rgba(4,16,31,.94),rgba(4,16,31,.98)),
      url("assets/scene.webp") center/cover fixed;
  }
  .mobile-header{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;
    background:rgba(3,13,29,.94);
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
  }
  .mobile-header>span:last-child{display:flex;flex-direction:column;gap:2px}
  .mobile-header strong{font-size:17px}
  .mobile-header small{font-size:10px;color:#c4d0df}
  .a4{
    font-size:40px;font-weight:900;letter-spacing:-.08em;
    background:linear-gradient(180deg,#a3e5ff,#3396ff 65%,#0b5dca);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .mobile-grid{display:grid;grid-template-columns:1fr;gap:15px;padding:16px 13px 24px}
  .mobile-card{
    --accent:#2f80ed;
    overflow:hidden;border-radius:20px;
    border:1px solid color-mix(in srgb,var(--accent) 68%,rgba(255,255,255,.12));
    background:rgba(5,18,38,.91);
    box-shadow:0 18px 42px rgba(0,0,0,.34);
  }
  .mobile-body{padding:16px}
  .mobile-body h2{margin:0 0 7px;font-size:20px}
  .mobile-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
  .mobile-actions{display:flex;flex-direction:column;gap:9px;margin-top:13px}
  .mobile-actions a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:46px;padding:0 14px;border-radius:12px;
    color:#fff;text-decoration:none;font-weight:750;
    background:color-mix(in srgb,var(--accent) 78%,#071426);
    border:1px solid color-mix(in srgb,var(--accent) 82%,white 6%);
  }
  .mobile-view footer{
    padding:14px;text-align:center;
    background:#03101f;border-top:1px solid rgba(255,255,255,.10);
    color:#e0e7f0;font-size:13px;font-weight:600;
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v8: same size as the real built-in lower-left monitor, scene remains uncropped. */
/* Retain original top-panel shapes: no movement/out-of-frame highlight on hover. */