:root {
  --bg:#0b0f14;
  --panel:#0a1118;
  --neon1:#00f0ff;
  --neon2:#ff3aad;
  --muted:#97a0b5;
  --glass: rgba(255,255,255,0.06);
  --radius:14px;
}

/* ===== Page ===== */
html, body {
  height:100%;
  margin:0;
  background: radial-gradient(circle at 10% 10%, rgba(0,240,255,0.05), transparent 8%),
              radial-gradient(circle at 90% 80%, rgba(255,58,173,0.05), transparent 10%),
              var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#e6f1ff;
}

#homePageLogin.nt-shell {
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
}

/* ===== Logo area ===== */
.nt-logo-wrap {
  position:relative;
  display:inline-block;
  filter: drop-shadow(0 0 18px rgba(0,240,255,.18));
  transition: filter .5s ease, transform .5s ease, opacity .5s ease;
}

.nt-logo-wrap .logo {
  width:min(340px, 80vw);
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
}

/* scanlines */
.nt-scanlines {
  pointer-events:none;
  position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom,
              rgba(255,255,255,0.06) 0px,
              rgba(255,255,255,0.06) 1px,
              transparent 2px, transparent 3px);
  opacity:.15;
  mix-blend-mode:overlay;
  animation: scanRoll 6s linear infinite;
  border-radius:12px;
  z-index:1;
}
@keyframes scanRoll { to { transform: translateY(3px); } }

/* ===== Hotspot ===== */
.nt-hotspot {
  position:absolute;
  width:20px; height:20px;
  border-radius:50%;
  /* ⬇️ Temporary test styling */
  /*border: 2px solid yellow !important;
  opacity: 1 !important;
  background: rgba(255,255,0,0.2) !important;*/

  /* — test border — */
  /*border: 0px solid yellow;  */        /* remove later */
  background: rgba(255,255,0,0.2);    /* remove later */
  opacity: 1;                        /* remove later */

  /* ⬇️ Always anchor to the center of the logo wrapper */
  left: 50%;
  top: 50%;

  /* ⬇️ First center it, then apply orbit offsets from CSS vars */
  transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0));

  /* Smooth animation now uses transform instead of left/top */
  transition: transform .6s cubic-bezier(.2,.7,.1,1), box-shadow .3s ease;

  outline:none;
  cursor:pointer;
  z-index: 5;

  
}
.nt-hotspot:hover { opacity:.28; }
.nt-hotspot:focus-visible { opacity:.5; box-shadow:0 0 14px rgba(0,240,255,.8); }

/* ===== Login Overlay ===== */
.nt-login-wrap {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%) scale(.98);
  z-index:3;
  width:min(520px, 92vw);
  padding:22px 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,240,255,.09), rgba(255,58,173,.08)), var(--panel);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 20px rgba(0,240,255,.15), 0 0 30px rgba(255,58,173,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#dbe8ff;

  opacity:0;
  filter: blur(2px) saturate(.9);
  pointer-events:none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.1,1), filter .5s ease;
}
.nt-login-wrap h1 {
  margin:6px 0 14px;
  letter-spacing:.5px;
  text-shadow:0 0 10px rgba(0,240,255,.35);
}

.nt-login-wrap .field {
  display:grid;
  gap:8px;
  margin:12px 0;
  text-align:left;
  color:#cfe3ff;
}
.nt-login-wrap input {
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#eaf3ff;
  box-shadow: inset 0 0 8px rgba(0,240,255,.12);
}
.nt-login-wrap .loginButton {
  margin-top:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background: linear-gradient(90deg, var(--neon1), var(--neon2));
  color:#0a0f14;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow: 0 6px 24px rgba(0,240,255,.35), 0 6px 24px rgba(255,58,173,.25);
  cursor:pointer;
}

/* ===== Active (login visible) ===== */
/* Wrapper: only transform/opacity (no filter) */
.nt-shell.is-login .nt-logo-wrap{
  transform: scale(.96);
  opacity:.6;
}

/* Blur/brighten the logo bits (children) */
.nt-shell.is-login .nt-logo-wrap .logo,
.nt-shell.is-login .nt-logo-wrap .nt-scanlines{
  filter: blur(2px) brightness(.7) drop-shadow(0 0 28px rgba(255,58,173,.16));
}

.nt-shell.is-login .nt-login-wrap {
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) saturate(1.2);
  pointer-events:auto;
  animation: neonSweep 700ms cubic-bezier(.2,.7,.1,1);      
}
@keyframes neonSweep {
  0% { box-shadow: 0 0 0 rgba(0,240,255,0); }
  100% { box-shadow: 0 0 20px rgba(0,240,255,.18), 0 0 34px rgba(255,58,173,.14); }
}

/* ===== Messages ===== */
.loginMessageError { color:#ff6b6b; margin:8px 0; }
.loginMessageSuccess { color:#3ee788; margin:8px 0; }