:root {
  --bg: #03050a;
  --cyan: #27cfff;
  --violet: #9a3dff;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(39,207,255,0.10), transparent 28rem),
    #03050a;
  color: #d9ecff;
  overflow-x: auto;
}

.site-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 0;
}

.exact-frame {
  position: relative;
  width: min(100vw, 1190px);
  margin: 0 auto;
  line-height: 0;
  filter: drop-shadow(0 0 18px rgba(39, 207, 255, 0.12));
}

.gold-page {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 4px;
  text-decoration: none;
  outline-offset: 3px;
}
.hotspot:focus-visible {
  outline: 2px solid var(--cyan);
  box-shadow: 0 0 18px rgba(39,207,255,.65);
}

/* Coordinates are percentage-based against the locked 1536x1024 composition. */
.nav-news     { left: 31.0%; top:  3.8%; width: 6.0%; height: 4.0%; }
.nav-reviews  { left: 39.0%; top:  3.8%; width: 8.0%; height: 4.0%; }
.nav-guides   { left: 49.0%; top:  3.8%; width: 7.0%; height: 4.0%; }
.nav-opinions { left: 61.0%; top:  3.8%; width: 8.5%; height: 4.0%; }
.nav-links    { left: 72.0%; top:  3.8%; width: 6.0%; height: 4.0%; }
.network-top  { left: 80.0%; top:  1.3%; width: 18.0%; height: 8.0%; }
.network-card { left: 80.0%; top:  13.5%; width: 17.0%; height: 29.0%; }
.footer-network { left: 85.0%; top: 88.0%; width: 10.0%; height: 9.0%; }
.admin-link { left: 36.0%; top: 93.0%; width: 8%; height: 4%; }

.noscript {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(39,207,255,.35);
  background: rgba(3,5,10,.9);
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .exact-frame {
    width: 100vw;
  }
}

/* Mobile production crop: remove the locked desktop right rail from the viewport
   and scale the primary AetherInferno content larger without changing desktop. */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .site-shell { place-items: start start; }
  .exact-frame {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }
  .gold-page {
    width: 100vw;
    max-width: none;
    height: auto;
  }

  /* Disable overlays on mobile art until real article routing is wired. */
  .hotspot { display: none; }
}


/* HARD REMOVE footer text (mobile only) */
@media (max-width: 700px) {
    .footer *:not(img) {
        display: none !important;
    }

    .footer img {
        display: block !important;
        margin-left: auto;
        margin-right: auto;
        max-width: 120px;
    }
}