:root{
  --bg:#080015;
  --bg2:#12002a;
  --ink:#eae6ff;
  --muted:#b7b0ea;
  --acid:#7cffe5;
  --hot:#ff4fd8;
  --vio:#a78bff;
  --stroke:#ffffff1a;
  --shadow: 0 20px 90px rgba(0,0,0,.65);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 65% 15%, #24004d 0%, var(--bg) 55%, #05000e 100%);
  overflow:hidden; /* no scroll on desktop */
}

/* Texture layers */
.noise{
  pointer-events:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.15;
}
.scanlines{
  pointer-events:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,0));
  background-size: 100% 3px;
  opacity:.10;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:22px 22px 10px;
}

.brand{max-width:820px}
.tagline{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.controls{display:flex; gap:10px; align-items:center}

.btn{
  appearance:none;
  border:1px solid var(--stroke);
  background:#0b0620;
  color:var(--ink);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); border-color:#ffffff33 }
.btn:active{ transform: translateY(0px) scale(.98) }
.btn.ghost{ background: transparent; box-shadow:none }

.stage{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  padding: 12px 22px 22px;
  height: calc(100vh - 90px);
  align-items:stretch;
}

.left, .right{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(18,0,42,.70), rgba(10,0,22,.55));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.left{
  padding:18px;
  overflow:hidden;
}

.microcopy .prompt{
  font-size:16px;
  margin:0 0 10px;
  color:var(--acid);
}
.microcopy p{ margin:10px 0; color: var(--muted); line-height:1.45 }
.microcopy .subtle{ opacity:.9; font-size:12px }

.widgetStack{
  margin-top:16px;
  display:grid;
  gap:14px;
}

.widget{
  border:1px solid #ffffff14;
  border-radius: 16px;
  background: rgba(7,0,20,.45);
  overflow:hidden;
}
.widgetTitle{
  padding:10px 12px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#d8d3ff;
  border-bottom:1px solid #ffffff10;
  background: rgba(167,139,255,.06);
}

.terminal{
  height: 220px;
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px;
  line-height:1.35;
  color:#dfe6ff;
  overflow:hidden;
  position:relative;
}
.termLine{ opacity:.95; white-space:nowrap; }
.termLine.dim{ opacity:.65; }
.termCaret{
  display:inline-block;
  width:8px;
  height:14px;
  background: var(--acid);
  box-shadow: 0 0 16px rgba(124,255,229,.45);
  margin-left:6px;
  transform: translateY(2px);
  animation: blink 1s infinite;
}
@keyframes blink{ 50%{ opacity:.15 } }

.globeWrap{
  padding:12px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:12px;
  align-items:center;
}
.globe{
  width:110px; height:110px;
  border-radius:50%;
  position:relative;
  border:1px solid #ffffff22;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,255,229,.14), rgba(255,79,216,.06) 45%, rgba(0,0,0,.18) 75%),
    radial-gradient(circle at 70% 65%, rgba(167,139,255,.20), rgba(0,0,0,.12) 60%);
  overflow:hidden;
  box-shadow: 0 0 40px rgba(167,139,255,.12);
}
.globeGrid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 14px);
  opacity:.22;
  transform: rotate(18deg);
  animation: drift 6s linear infinite;
}
@keyframes drift{
  from{ transform: translateX(-10px) rotate(18deg); }
  to{ transform: translateX(10px) rotate(18deg); }
}
.globeScan{
  position:absolute; inset:-20% -20%;
  background: linear-gradient(120deg, transparent 45%, rgba(124,255,229,.25) 50%, transparent 55%);
  opacity:.35;
  animation: sweep 2.8s ease-in-out infinite;
}
@keyframes sweep{
  0%{ transform: translateX(-40%) translateY(10%); }
  50%{ transform: translateX(40%) translateY(-10%); }
  100%{ transform: translateX(-40%) translateY(10%); }
}
.globeGlow{
  position:absolute; inset:0;
  box-shadow: inset 0 0 28px rgba(255,79,216,.08);
}
.globeMeta{
  font-size:12px;
  color: var(--muted);
  display:grid;
  gap:6px;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color:#e9e6ff;
  opacity:.9;
}

.right{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.canvasWrap{
  position:relative;
  flex:1;
  min-height:0;
  padding:14px;
}

.mapWrap{
  position:relative;
  width:100%;
  height:100%;
  border-radius: calc(var(--radius) - 6px);
  border:1px solid #ffffff14;
  overflow:hidden;
  background: radial-gradient(900px 500px at 55% 25%, rgba(167,139,255,.20), rgba(8,0,20,.90) 60%, rgba(5,0,14,1) 100%);
}

.mapImg{
  width:100%;
  height:100%;
  object-fit:cover; /* keeps it full-screen without scroll */
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  filter: saturate(1.05) contrast(1.05);
  pointer-events:none;
}


/* Hotspots: invisible hit-area, no outline, with neon hover pulse */
.hotspot{
  -webkit-tap-highlight-color: transparent;
  position:absolute;
  border:0;
  background: transparent;
  cursor:pointer;
  border-radius: 16px;
  outline: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
}

/* Remove default focus ring, but keep accessibility for keyboard users */
.hotspot:focus-visible{
  outline: 2px solid rgba(124,255,229,.55) !important;
  outline-offset: 3px;
}

/* Hover pulse effect (per-node color) */
.hotspot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pulse, rgba(124,255,229,.85)) 26%, transparent), transparent 55%);
  opacity: 0;
  transform: scale(.92);
  filter: blur(2px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events:none;
}

/* Outer ring + pulse waves */
.hotspot::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.0);
  opacity: 0;
  pointer-events:none;
}

/* Animate on hover */
.hotspot:hover::after{
  opacity: 1;
  transform: scale(1);
  animation: pulseGlow 1.35s ease-in-out infinite;
}
.hotspot:hover::before{
  opacity: 1;
  border-color: color-mix(in srgb, var(--pulse, rgba(124,255,229,.85)) 42%, transparent);
  animation: pulseRing 1.35s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%   { opacity: .25; transform: scale(.96); }
  50%  { opacity: .75; transform: scale(1.02); }
  100% { opacity: .25; transform: scale(.96); }
}
@keyframes pulseRing{
  0%   { opacity: .20; transform: scale(.98); }
  50%  { opacity: .55; transform: scale(1.03); }
  100% { opacity: .20; transform: scale(.98); }
}
/* Per-node colors */
.hotspot[data-node="core"]{
  --pulse: rgba(124,255,229,.85); /* neon mint */
}
.hotspot[data-node="sandbox"]{
  --pulse: rgba(255,79,216,.85); /* neon pink */
}
.hotspot[data-node="signal"]{
  --pulse: rgba(180,120,255,.85); /* neon purple */
}
.hotspot[data-node="datavault"]{
  --pulse: rgba(140,180,255,.85); /* neon blue */
}
.hotspot[data-node="access"]{
  --pulse: rgba(255,90,90,.85); /* neon red */
}

/* Use --pulse in the hover visuals */
.hotspot::after{
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pulse) 30%, transparent), transparent 55%);
}
.hotspot:hover::before{
  border-color: color-mix(in srgb, var(--pulse) 45%, transparent);
}


.bottombar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid #ffffff14;
  background: rgba(7,0,20,.30);
}
.small{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rightAlign{ justify-content:flex-end; }
.pill{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #ffffff18;
  color:#d8d3ff;
  background: rgba(167,139,255,.06);
}

/* Glitch title */
.glitch{
  font-size:28px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  display:inline-block;
  text-shadow: 0 0 22px rgba(124,255,229,.14);
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  clip-path: inset(0 0 0 0);
  opacity:.75;
}
.glitch::before{
  transform: translate(1px, 0);
  color: var(--acid);
  animation: glitchA 2.6s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-1px, 0);
  color: var(--hot);
  animation: glitchB 2.1s infinite linear alternate-reverse;
}
@keyframes glitchA{
  0%{ clip-path: inset(0 0 88% 0) }
  20%{ clip-path: inset(14% 0 62% 0) }
  40%{ clip-path: inset(52% 0 25% 0) }
  60%{ clip-path: inset(8% 0 70% 0) }
  80%{ clip-path: inset(70% 0 12% 0) }
  100%{ clip-path: inset(30% 0 48% 0) }
}
@keyframes glitchB{
  0%{ clip-path: inset(78% 0 6% 0) }
  25%{ clip-path: inset(40% 0 40% 0) }
  50%{ clip-path: inset(10% 0 75% 0) }
  75%{ clip-path: inset(62% 0 20% 0) }
  100%{ clip-path: inset(22% 0 55% 0) }
}

/* Modals */
.modal{ position:fixed; top:0; left:0; right:0; bottom:0; inset:0; display:none; z-index:50; }
.modal.show{ display:block; }
.modalBackdrop{
  position:absolute; top:0; left:0; right:0; bottom:0; inset:0;
  background: rgba(0,0,0,.65);
}
.modalCard{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: min(70px, 8vh) auto;
  border-radius: 22px;
  border:1px solid #ffffff22;
  background: linear-gradient(180deg, rgba(30,0,66,.92), rgba(8,0,22,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modalHeader{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:16px 16px 10px;
  border-bottom:1px solid #ffffff14;
}
.modalTitle{ font-size:16px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.modalSubtitle{ font-size:12px; color: var(--muted); margin-top:6px; }

.modalBody{
  padding:16px;
  color:#e8e6ff;
  line-height:1.55;

  /* responsive content area */
  max-height: min(62vh, 620px);
  overflow:auto;
}
.modalBody img, .modalBody video, .modalBody iframe{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border:1px solid #ffffff18;
}
.modalBody a{ color: var(--acid); text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--pulse, rgba(124,255,229,.85)) 42%, transparent) }
.modalBody a:hover{ border-bottom-color: var(--acid) }

.modalFooter{
  padding:12px 16px 16px;
  border-top:1px solid #ffffff10;
  color: var(--muted);
}

.videoCard .videoBody{
  padding:16px;
}
.videoCard video{
  width:100%;
  max-height: 70vh;
  border-radius: 14px;
  border:1px solid #ffffff18;
  background:#000;
}
.panelGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}

@media (max-width: 980px){
  .panelGrid{ grid-template-columns: 1fr; }
}

.panelMedia img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid #ffffff14;
}

/* TikTok / media embeds inside panels */
.panelMedia { min-width: 0; } /* prevents weird overflow in grids */

.tiktokEmbed{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Responsive height: big on desktop, smaller on mobile */
.tiktokEmbed iframe{
  width: 100%;
  height: min(72vh, 620px);   /* <- controls “how big” it feels */
  border: 0;
  display: block;
  background: #000;
}

/* Mobile: give it more vertical room */
@media (max-width: 980px){
  .tiktokEmbed iframe{
    height: min(78vh, 720px);
  }
}
/* Give content modal more usable height */
.modalCard{
  max-height: 86vh;
}

.modalBody{
  overflow: auto;
  max-height: calc(86vh - 140px); /* header+footer allowance */
}


/* MOBILE */
@media (max-width: 980px){
  body{ overflow:auto; }

  .stage{
    display:flex;
    flex-direction:column;
    gap:18px;
    height:auto;
    padding-bottom:18px;
  }

  .right{
    order: 1;
    min-height: auto;
  }

  #desktopLeft{
    display:block;
    order: 2;
    padding:18px;
  }

  .canvasWrap{
    padding: 10px;
  }

  /* ✅ KEY: let the frame size itself to the image */
  .mapWrap{
    height: auto;            /* <-- remove the 56vh */
    aspect-ratio: auto;      /* just in case you set one elsewhere */
  }

  /* ✅ KEY: make image define the container height */
  .mapImg{
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;     /* <-- disables contain behavior */
    object-position: top;    /* harmless here, but keeps intent clear */
  }

  /* If you still see any “extra space”, it’s usually padding/border */
  .right{
    overflow: visible;
  }

  #renderStatus{ display:none; }
}