/* ═══════════════════════════════════════════════════════════════════════════
   NIGHT WINDOW — the signed-out view.

   Corner is a shop, so the login is a shop: a lit storefront on a wet street
   at night. Tonight's real Fortnite rotation sits in the window, the awning
   bulbs are on, and signing in means pushing the door open and walking in.
   Everything here is scoped to #view-login / body.view-login-active.
   ═══════════════════════════════════════════════════════════════════════════ */

body.view-login-active {
  /* Night */
  --ns-void: #04050e;
  --ns-night: #080b1c;
  --ns-night-lift: #0e1430;

  /* Masonry & metal */
  --ns-brick: #131320;
  --ns-brick-lit: #1b1b2c;
  --ns-metal: #23222f;
  --ns-metal-lit: #35333f;
  --ns-mortar: rgba(214, 228, 255, 0.07);

  /* Light */
  --ns-cyan: #62e6ff;
  --ns-cyan-deep: #1898c7;
  --ns-violet: #a887ff;
  --ns-magenta: #ff62c2;
  --ns-warm: #ffb85c;
  --ns-warm-hot: #ffe7c0;
  --ns-red: #ff4f63;
  --ns-green: #55e39b;

  /* Ink */
  --ns-ink: #f0f5ff;
  --ns-ink-soft: rgba(206, 218, 246, 0.74);
  --ns-ink-faint: rgba(178, 192, 226, 0.5);

  --ns-label: 0.062em;
  /* The sign sets the scale of the whole facade. */
  --ns-sign-size: clamp(2.6rem, 7.4vw, 5rem);
  /* Pointer parallax is written straight onto the handful of layers that move
     (see initParallax). It deliberately does not travel as a custom property:
     320 elements inherit from here, so a per-frame write would invalidate
     style for the whole subtree to move three things. */

  background: var(--ns-void);
  color: var(--ns-ink);
}

/* The scene supplies its own sky and signage, so the app chrome steps aside. */
body.view-login-active .header { display: none; }
body.view-login-active .bg-orbs { display: none; }

body.view-login-active #main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.view-login-active #view-login.view-active { animation: none; }

.ns-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Scene shell ─────────────────────────────────────────────────────────── */

.nightshop {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100dvh;
  /* Clip the weather sideways but let a short viewport scroll the shop. */
  overflow-x: clip;
  background: var(--ns-void);
  font-family: var(--font-body);
}

@supports not (overflow: clip) {
  .nightshop { overflow: hidden; }
}

/* Film grain so the flat CSS planes read as painted rather than vector. */
.nightshop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── The street: sky, skyline, weather ───────────────────────────────────── */

.ns-street {
  position: absolute;
  inset: -4% -4% 0;
  z-index: 0;
  pointer-events: none;
}

.ns-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 46% at 50% 96%, rgba(255, 184, 92, 0.16), transparent 62%),
    radial-gradient(ellipse 90% 60% at 22% 8%, rgba(98, 230, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 55% at 82% 4%, rgba(168, 135, 255, 0.13), transparent 58%),
    linear-gradient(180deg, #04050e 0%, #070a1d 34%, #0b1030 62%, #131a3f 84%, #1a1c33 100%);
}

.ns-stars {
  position: absolute;
  inset: 0 0 42%;
}

.ns-star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #dcefff;
  opacity: var(--o);
  animation: nsTwinkle var(--dur) ease-in-out var(--delay) infinite;
}

@keyframes nsTwinkle {
  0%, 100% { opacity: calc(var(--o) * 0.25); transform: scale(0.8); }
  50% { opacity: var(--o); transform: scale(1); }
}

.ns-moon {
  position: absolute;
  top: 11%;
  right: 17%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #f4f9ff 0%, #cbd9f5 46%, #8fa4cf 78%, #6d80ab 100%);
  box-shadow:
    0 0 30px rgba(196, 220, 255, 0.45),
    0 0 90px rgba(140, 176, 255, 0.3),
    0 0 200px rgba(98, 230, 255, 0.16);
}

.ns-moon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 60%, rgba(9, 12, 30, 0.55), transparent 58%);
}

/* Two silhouette bands: a far city and a nearer roofline. */
.ns-skyline {
  position: absolute;
  right: 0;
  bottom: 30%;
  left: 0;
  height: 190px;
  opacity: 0.75;
  background: linear-gradient(180deg, #0a0e22 0%, #070a19 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 190V96h38v-22h30v22h34V60h44v36h26v-52h22v52h40v22h48V72h36v46h30V88h52v30h34v-40h26v40h44v26h40V96h30v48h48v-26h38v26h34V62h24v82h46v-30h40v30h30V86h34v58h44v-24h30v24h40V70h26v74h44v-34h32v34h40v46z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 190V96h38v-22h30v22h34V60h44v36h26v-52h22v52h40v22h48V72h36v46h30V88h52v30h34v-40h26v40h44v26h40V96h30v48h48v-26h38v26h34V62h24v82h46v-30h40v30h30V86h34v58h44v-24h30v24h40V70h26v74h44v-34h32v34h40v46z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* A sparse grid of lit windows in the far city. */
.ns-skyline::after {
  content: '';
  position: absolute;
  inset: 12% 0 0;
  opacity: 0.5;
  background-image: radial-gradient(circle 1.4px, rgba(255, 205, 130, 0.9) 99%, transparent 100%);
  background-size: 27px 21px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 78%);
}

.ns-skyline--near {
  bottom: 27%;
  height: 120px;
  opacity: 1;
  background: linear-gradient(180deg, #05070f 0%, #03040a 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 120V52h96v-18h64v18h120V38h84v46h96V56h140v34h104V44h72v46h130V64h94v26h100v30z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 120V52h96v-18h64v18h120V38h84v46h96V56h140v34h104V44h72v46h130V64h94v26h100v30z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ns-skyline--near::after { display: none; }

.ns-haze {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255, 184, 92, 0.13), transparent 66%),
    linear-gradient(180deg, transparent 0%, rgba(12, 16, 40, 0.55) 55%, rgba(6, 8, 20, 0.9) 100%);
}

/* Rain — spans are generated by nightshop.js and skipped in lite mode. */
.ns-rain {
  position: absolute;
  inset: -10% 0 0;
  overflow: hidden;
}

.ns-drop {
  position: absolute;
  top: -12%;
  left: var(--x);
  width: 1px;
  height: var(--len);
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(178, 214, 255, var(--o)));
  transform: rotate(11deg);
  animation: nsRain var(--dur) linear var(--delay) infinite;
}

@keyframes nsRain {
  from { transform: translate3d(0, -14vh, 0) rotate(11deg); }
  to { transform: translate3d(-8vh, 116vh, 0) rotate(11deg); }
}

/* ── Streetlamp ──────────────────────────────────────────────────────────── */

.ns-lamp {
  position: absolute;
  bottom: 0;
  left: clamp(-40px, 2vw, 60px);
  z-index: 1;
  width: 220px;
  height: 74%;
  pointer-events: none;
}

.ns-lamp-post,
.ns-lamp-arm,
.ns-lamp-head {
  position: absolute;
  background: linear-gradient(90deg, #0a0b16, #1c1e2e 45%, #08090f);
}

.ns-lamp-post {
  bottom: 0;
  left: 26px;
  width: 9px;
  height: 100%;
  border-radius: 4px 4px 0 0;
}

.ns-lamp-arm {
  top: 4px;
  left: 26px;
  width: 84px;
  height: 8px;
  border-radius: 4px;
}

.ns-lamp-head {
  top: 8px;
  left: 92px;
  width: 44px;
  height: 20px;
  border-radius: 4px 4px 12px 12px;
  background: linear-gradient(180deg, #23253a, #0c0d16);
  box-shadow: 0 10px 34px rgba(255, 190, 110, 0.4);
}

.ns-lamp-head::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: -3px;
  left: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd79a;
  box-shadow: 0 0 18px 5px rgba(255, 190, 110, 0.85);
}

/* Anchored to the bulb and run down to the ground, so the beam leaves the
   lamp it belongs to and lands on the pavement instead of stopping mid-air.
   The lamp head spans 92–136px, so 114px is the centre of the bulb. */
.ns-lamp-cone {
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 114px;
  width: 300px;
  margin-left: -150px;
  opacity: 0.5;
  background: linear-gradient(
    180deg,
    rgba(255, 200, 132, 0.34) 0%,
    rgba(255, 184, 106, 0.13) 44%,
    rgba(255, 172, 88, 0.05) 76%,
    rgba(255, 168, 84, 0.02) 100%
  );
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(3px);
  animation: nsLampBuzz 7s ease-in-out infinite;
}

/* The pool the beam throws where it meets the ground. */
.ns-lamp-cone::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: radial-gradient(ellipse 58% 100% at 50% 100%, rgba(255, 198, 128, 0.34), transparent 70%);
}

@keyframes nsLampBuzz {
  0%, 100% { opacity: 0.5; }
  47% { opacity: 0.44; }
  49% { opacity: 0.62; }
  51% { opacity: 0.42; }
}

/* ── Stage: the camera. Pushes through the door on sign-in. ──────────────── */

.ns-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.1rem, 3vh, 2.4rem) clamp(0.85rem, 3vw, 2.5rem) 0;
  transform-origin: var(--ns-door-x, 50%) var(--ns-door-y, 60%);
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.85, 0.25);
}

.ns-shop {
  position: relative;
  width: min(1140px, 100%);
}

/* ── Sign band: awning + neon ────────────────────────────────────────────── */

.ns-signband {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ns-sign {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(0.5rem, 2vh, 1.5rem);
}

/* The tube the sign hangs from. */
.ns-sign-rod {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(180px, 42%, 420px);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(98, 230, 255, 0.35), transparent);
}

.ns-sign-rod::before,
.ns-sign-rod::after {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: clamp(12px, 2vh, 22px);
  background: linear-gradient(180deg, rgba(98, 230, 255, 0.4), transparent);
}

.ns-sign-rod::before { left: 16%; }
.ns-sign-rod::after { right: 16%; }

.ns-sign-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--ns-sign-size);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.ns-sign-sub {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(0.15rem, 0.8vh, 0.55rem);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.9vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
}

/* Neon tube treatment: hot white core, coloured bloom, mains flicker. */
.ns-neon {
  color: #f6feff;
  text-shadow:
    0 0 1px #ffffff,
    0 0 7px rgba(246, 254, 255, 0.95),
    0 0 16px var(--ns-cyan),
    0 0 34px var(--ns-cyan),
    0 0 68px rgba(98, 230, 255, 0.6),
    0 0 120px rgba(24, 152, 199, 0.45);
  animation: nsFlicker 9s steps(1, end) infinite;
}

.ns-neon--violet {
  text-shadow:
    0 0 1px #ffffff,
    0 0 6px rgba(250, 244, 255, 0.9),
    0 0 14px var(--ns-violet),
    0 0 30px var(--ns-violet),
    0 0 58px rgba(168, 135, 255, 0.5);
  animation-delay: -3.4s;
}

@keyframes nsFlicker {
  0%, 3%, 5%, 34%, 36%, 100% { opacity: 1; }
  4% { opacity: 0.62; }
  35% { opacity: 0.45; }
  35.5% { opacity: 0.9; }
  71% { opacity: 1; }
  71.6% { opacity: 0.55; }
  72.2% { opacity: 1; }
}

/* Light bouncing off the awning canvas under the sign. */
.ns-sign-echo {
  position: absolute;
  bottom: -0.32em;
  left: 50%;
  font-family: var(--font-display);
  font-size: var(--ns-sign-size);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: rgba(98, 230, 255, 0.24);
  transform: translateX(-50%) scaleY(-0.42);
  transform-origin: bottom center;
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 42%, #000 100%);
  pointer-events: none;
}

/* Awning — caps the facade directly beneath the sign. */
.ns-awning {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: clamp(0.35rem, 1.2vh, 0.8rem);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.62));
}

.ns-awning-canvas,
.ns-awning-scallop {
  display: block;
  background:
    repeating-linear-gradient(
      90deg,
      #17415a 0 clamp(28px, 5vw, 54px),
      #0c1c2b clamp(28px, 5vw, 54px) clamp(56px, 10vw, 108px)
    );
}

.ns-awning-canvas {
  position: relative;
  height: clamp(22px, 4vh, 38px);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 12px 24px rgba(255, 210, 150, 0.06);
}

/* Warm underlight from the bulbs, plus the shading that fakes the fabric curve. */
.ns-awning-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 14, 0.62) 0%, transparent 46%, rgba(255, 184, 92, 0.16) 100%);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 100%, 0 100%);
}

.ns-awning-scallop {
  position: relative;
  height: clamp(11px, 1.8vh, 16px);
  -webkit-mask-image: radial-gradient(11px 16px at 11px 0, #000 99%, transparent 100%);
  mask-image: radial-gradient(11px 16px at 11px 0, #000 99%, transparent 100%);
  -webkit-mask-size: 22px 100%;
  mask-size: 22px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

.ns-awning-bulbs {
  position: absolute;
  right: 5%;
  bottom: -3px;
  left: 5%;
  display: flex;
  justify-content: space-between;
}

.ns-bulb {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd8a2;
  box-shadow: 0 0 8px 2px rgba(255, 190, 110, 0.85), 0 0 22px 6px rgba(255, 170, 80, 0.3);
  animation: nsBulb 3.6s ease-in-out var(--delay) infinite;
}

@keyframes nsBulb {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ── Storefront ──────────────────────────────────────────────────────────── */

.ns-front {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(268px, 0.62fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  align-items: stretch;
  padding: clamp(0.6rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(226, 236, 255, 0.07);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 184, 92, 0.05), transparent 34%),
    linear-gradient(180deg, var(--ns-brick-lit), var(--ns-brick) 62%, #0d0d17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 -30px 90px rgba(0, 0, 0, 0.5);
}

/* Brick coursing on the facade. */
.ns-front::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 0 0;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ns-mortar) 1px, transparent 1px),
    linear-gradient(90deg, var(--ns-mortar) 1px, transparent 1px);
  background-size: 56px 19px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

.ns-bay {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ── Window bay ──────────────────────────────────────────────────────────── */

.ns-window {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
  border: clamp(6px, 0.7vw, 10px) solid;
  border-image: linear-gradient(160deg, var(--ns-metal-lit), var(--ns-metal) 40%, #14131c) 1;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0d1e 0%, #0d1226 58%, #090b18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 160, 220, 0.1),
    inset 0 26px 70px rgba(255, 184, 92, 0.07),
    0 0 60px rgba(98, 230, 255, 0.07);
}

/* Interior lighting behind the goods. */
.ns-window-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 44% at 50% 22%, rgba(255, 205, 145, 0.2), transparent 70%),
    radial-gradient(ellipse 50% 34% at 16% 74%, rgba(98, 230, 255, 0.12), transparent 68%),
    radial-gradient(ellipse 46% 32% at 88% 66%, rgba(168, 135, 255, 0.1), transparent 66%);
}

.ns-window-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(0.55rem, 1.4vh, 0.95rem);
  padding: clamp(0.85rem, 1.9vw, 1.4rem);
  /* Room along the bottom edge for the stickers on the glass. */
  padding-bottom: clamp(2.5rem, 4vw, 3rem);
}

.ns-window-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: baseline;
  justify-content: space-between;
}

.ns-window-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.7vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ns-warm-hot);
}

.ns-window-meta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--ns-label);
  text-transform: uppercase;
  color: var(--ns-ink-faint);
}

/* Goods on display */
/* Grows into any spare height so the goods stay seated on the plank. */
.ns-shelf {
  /* The merchandise is the point of a shop window, so the art takes the
     space and each tile is only as wide as the piece it displays. */
  --ns-art: clamp(84px, 13vw, 180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1vw, 0.8rem);
  align-items: end;
  flex: 1 1 auto;
}

.ns-good {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: min(100%, var(--ns-art));
  margin-inline: auto;
  padding: clamp(0.5rem, 1.1vw, 0.85rem) 0.4rem 0.65rem;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255, 214, 160, 0.07), transparent 72%);
  transform: translateY(0);
  transition: transform 0.45s var(--ease-bounce);
  animation: nsGoodIn 0.65s var(--ease) both;
  animation-delay: calc(var(--g, 0) * 0.09s + 0.25s);
}

@keyframes nsGoodIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* A pool of light on the shelf under each piece. */
.ns-good::after {
  content: '';
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 205, 145, 0.4), transparent 72%);
  opacity: 0.6;
  transition: opacity 0.35s var(--ease);
}

.ns-good-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 224, 180, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(140, 180, 240, 0.12), rgba(10, 14, 30, 0.55));
  box-shadow: inset 0 0 0 1px rgba(200, 220, 255, 0.1);
  overflow: hidden;
}

.ns-good-art .icon {
  width: 32%;
  height: 32%;
  color: var(--ns-warm);
}

.ns-good-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

/* Two lines fit almost every shop name, so the label needs no tooltip. The
   fixed height keeps the artwork aligned across one- and two-line names. */
.ns-good-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
  min-height: 2.5em;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: var(--ns-ink-soft);
}

/* Swing tag */
.ns-tag {
  position: absolute;
  top: clamp(0.15rem, 0.6vw, 0.4rem);
  right: clamp(-0.1rem, 0.4vw, 0.35rem);
  display: inline-flex;
  gap: 0.24rem;
  align-items: center;
  padding: 0.16rem 0.42rem 0.16rem 0.34rem;
  border-radius: 3px 6px 6px 3px;
  background: linear-gradient(150deg, #fff4dd, #e7cfa6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2a2015;
  transform: rotate(-7deg);
  transform-origin: 6px -10px;
  animation: nsTagSway 5.5s ease-in-out calc(var(--g, 0) * 0.7s) infinite;
}

/* The V-Bucks emoji is a pure white silhouette, which is invisible against
   the cream tag. It's a flat alpha mask, so print it in the tag's own ink
   and the mark reads as part of the price rather than a sticker on it. */
.ns-tag img {
  display: block;
  width: 13px;
  height: 13px;
  opacity: 0.82;
  filter: brightness(0);
}

.ns-tag-string {
  position: absolute;
  top: -10px;
  left: 6px;
  width: 1px;
  height: 11px;
  background: rgba(255, 236, 205, 0.55);
}

@keyframes nsTagSway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(-3deg); }
}

.ns-good:hover { transform: translateY(-6px); }
.ns-good:hover::after { opacity: 1; }
.ns-good:hover .ns-tag { animation-duration: 1.1s; }

.ns-shelf-plank {
  display: block;
  height: 7px;
  margin: -0.35rem -0.3rem 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b2436, #150f1c);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 214, 160, 0.14);
}

/* Taped-up notice — a printed strip on the glass, not a poster. */
.ns-notice {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  margin-top: auto;
  padding: 0.5rem clamp(0.7rem, 1.4vw, 1rem);
  border-radius: 2px;
  background: linear-gradient(158deg, #e8e0cc, #d2c8b0);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  color: #241d14;
  transform: rotate(-0.5deg);
}

.ns-tape {
  position: absolute;
  top: -8px;
  width: 46px;
  height: 17px;
  background: rgba(255, 250, 230, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.ns-tape--l { left: 8%; transform: rotate(-6deg); }
.ns-tape--r { right: 8%; transform: rotate(5deg); }

.ns-notice-title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b4f28;
}

.ns-notice-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.3rem 1.05rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-notice-list li {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #3b3024;
}

.ns-notice-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2c2418;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: #f5ead4;
}

/* Glass in front of everything in the window */
.ns-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    rgba(214, 236, 255, 0.11) 0%,
    rgba(214, 236, 255, 0.02) 18%,
    transparent 42%,
    rgba(168, 135, 255, 0.05) 74%,
    rgba(98, 230, 255, 0.09) 100%
  );
}

.ns-glass-streak {
  position: absolute;
  top: -30%;
  left: -24%;
  z-index: 3;
  width: 34%;
  height: 170%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(226, 244, 255, 0.14), transparent);
  transform: rotate(17deg);
  filter: blur(4px);
  /* `left` relayouts and re-rasterises the blur on every pointer frame. */
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Stack stickers on the glass */
.ns-decals {
  position: absolute;
  bottom: clamp(0.4rem, 1vw, 0.7rem);
  left: clamp(0.7rem, 1.6vw, 1.2rem);
  z-index: 4;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.ns-decal {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 245, 255, 0.22);
  background: rgba(8, 11, 24, 0.6);
  color: var(--tech-color, var(--ns-cyan));
  cursor: default;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s var(--ease-bounce), border-color 0.3s, box-shadow 0.3s;
}

.ns-decal svg {
  width: 15px;
  height: 15px;
}

.ns-decal:hover {
  transform: rotate(0deg) scale(1.14);
  border-color: rgba(240, 245, 255, 0.42);
  box-shadow: 0 0 18px -4px var(--tech-color, var(--ns-cyan));
}

/* ── Door bay ────────────────────────────────────────────────────────────── */

.ns-bay--door {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hanging OPEN / CLOSED sign */
.ns-hanger {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: clamp(10px, 1.6vh, 18px);
  margin-bottom: clamp(-14px, -1.4vh, -8px);
}

.ns-hanger-chain {
  position: absolute;
  top: 0;
  width: 1px;
  height: clamp(12px, 1.8vh, 20px);
  background: linear-gradient(180deg, rgba(224, 234, 255, 0.45), rgba(224, 234, 255, 0.12));
}

.ns-hanger-chain--l { left: calc(50% - 46px); }
.ns-hanger-chain--r { left: calc(50% + 46px); }

.ns-openbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.34rem 1.1rem 0.4rem;
  border: 1px solid rgba(255, 98, 194, 0.35);
  border-radius: 4px;
  background: rgba(9, 6, 20, 0.82);
  transform-origin: top center;
  animation: nsSwing 6.5s ease-in-out infinite;
}

@keyframes nsSwing {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}

.ns-openbox-word {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #fff2fb;
  text-shadow:
    0 0 1px #fff,
    0 0 8px var(--ns-magenta),
    0 0 20px var(--ns-magenta),
    0 0 44px rgba(255, 98, 194, 0.5);
  animation: nsFlicker 7s steps(1, end) -1.5s infinite;
}

.ns-openbox-sub {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 190, 230, 0.7);
}

/* Frame, interior and door */
.ns-door-frame {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  min-height: clamp(280px, 38vh, 380px);
  /* Keeps the raised shutter out of sight above the doorway. */
  overflow: hidden;
  padding: clamp(7px, 0.8vw, 11px);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--ns-metal-lit), var(--ns-metal) 30%, #131220 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.06),
    0 -8px 40px rgba(255, 184, 92, 0.1);
  perspective: 1500px;
  perspective-origin: 82% 50%;
}

.ns-interior {
  position: absolute;
  inset: clamp(7px, 0.8vw, 11px);
  border-radius: 2px 2px 0 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 84%, rgba(255, 214, 160, 0.5), transparent 72%),
    linear-gradient(180deg, #2a1c10 0%, #6b3f18 42%, #b0762e 78%, #ffd79a 100%);
}

/* Silhouetted shelving inside the shop, visible once the door swings. */
.ns-interior-shelves {
  position: absolute;
  inset: clamp(7px, 0.8vw, 11px);
  border-radius: 2px 2px 0 0;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, rgba(20, 10, 4, 0.75) 0 8px, transparent 8px 100%),
    linear-gradient(270deg, rgba(20, 10, 4, 0.75) 0 8px, transparent 8px 100%),
    linear-gradient(180deg, transparent 0 26%, rgba(28, 14, 5, 0.6) 26% 30%, transparent 30% 54%, rgba(28, 14, 5, 0.6) 54% 58%, transparent 58% 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.ns-door {
  position: absolute;
  inset: clamp(7px, 0.8vw, 11px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vh, 0.9rem);
  padding: clamp(0.9rem, 2vh, 1.5rem) clamp(0.7rem, 1.6vw, 1.1rem);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(96deg, #1c1b28 0%, #16151f 12%, #101019 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.07),
    12px 0 42px rgba(0, 0, 0, 0.6);
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.62s cubic-bezier(0.32, 0.86, 0.4, 1), box-shadow 0.5s var(--ease);
  backface-visibility: hidden;
}

/* Warm light leaking around the door edges. */
.ns-door::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
  box-shadow: inset 0 0 26px rgba(255, 184, 92, 0.16);
}

.ns-door-glass {
  position: absolute;
  top: 7%;
  right: 12%;
  bottom: 38%;
  left: 12%;
  overflow: hidden;
  border-radius: 2px;
  /* Read as a room, not a panel: strip light on the ceiling, shelving
     uprights in silhouette, and the counter catching light at the back. */
  background:
    linear-gradient(180deg, rgba(255, 247, 226, 0.62) 0 5%, transparent 5%),
    linear-gradient(180deg, transparent 0 74%, rgba(255, 226, 176, 0.3) 74% 78%, transparent 78%),
    linear-gradient(
      90deg,
      transparent 0 15%,
      rgba(58, 30, 10, 0.4) 15% 18%,
      transparent 18% 40%,
      rgba(58, 30, 10, 0.32) 40% 43%,
      transparent 43% 72%,
      rgba(58, 30, 10, 0.36) 72% 75%,
      transparent 75%
    ),
    linear-gradient(
      180deg,
      rgba(255, 240, 208, 0.36) 0%,
      rgba(255, 186, 108, 0.14) 36%,
      rgba(120, 68, 26, 0.26) 64%,
      rgba(255, 206, 142, 0.34) 88%,
      rgba(255, 232, 190, 0.5) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.18), inset 0 0 34px rgba(255, 184, 92, 0.18);
}

/* Reflection sliding across the door pane. */
.ns-door-glass::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 228, 0.18), transparent);
  transform: rotate(16deg);
}

.ns-door-mullion {
  position: absolute;
  top: 7%;
  bottom: 38%;
  left: 50%;
  width: 2px;
  background: rgba(12, 11, 18, 0.65);
}

.ns-door-bar {
  position: absolute;
  top: 46%;
  right: clamp(9px, 1.4vw, 15px);
  width: 7px;
  height: clamp(58px, 9vh, 84px);
  border-radius: 4px;
  background: linear-gradient(90deg, #6e6a78, #cfcbd8 38%, #58555f);
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 214, 160, 0.2);
}

.ns-door-kick {
  position: absolute;
  right: 9%;
  bottom: 5%;
  left: 9%;
  padding: 0.35rem 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #1a1926, #0e0e16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-align: center;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.24);
}

/* The push plate — this is the sign-in control. */
.ns-plate {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  padding: 0.72rem 0.8rem;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(158deg, #f4e6c4 0%, #d9c193 34%, #b99e6d 70%, #e8d6ae 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 240, 0.75),
    inset 0 -2px 4px rgba(88, 62, 24, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(70, 50, 20, 0.4);
  color: #22190c;
  text-decoration: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s var(--ease), filter 0.3s;
}

.ns-plate-shine {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 55%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(19deg);
  transition: left 0.7s var(--ease);
}

.ns-plate-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(150deg, #5865f2, #3c45b5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(30, 20, 6, 0.45);
  color: #fff;
}

.ns-plate-mark .icon { width: 19px; height: 19px; }

.ns-plate-copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.ns-plate-kicker {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(52, 38, 14, 0.72);
}

.ns-plate-main {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-plate:hover,
.ns-plate:focus-visible {
  transform: translateY(-1px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 240, 0.85),
    inset 0 -2px 4px rgba(88, 62, 24, 0.3),
    0 16px 38px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(70, 50, 20, 0.45),
    0 0 34px rgba(255, 205, 140, 0.35);
}

.ns-plate:hover .ns-plate-shine,
.ns-plate:focus-visible .ns-plate-shine { left: 130%; }

.ns-plate:focus-visible {
  outline: 2px solid var(--ns-cyan);
  outline-offset: 4px;
}

.ns-plate:active { transform: translateY(1px) scale(0.99); }

/* The door gives a little before you commit. */
.ns-bay--door:hover .ns-door { transform: rotateY(-3.5deg); }
/* Keep the centring translate — dropping it throws the spill off to one side. */
.ns-bay--door:hover .ns-spill { opacity: 1; transform: translateX(-50%) scaleX(1.06); }

/* Shop bell above the door */
.ns-bell {
  position: absolute;
  top: clamp(14px, 2.2vh, 22px);
  left: 50%;
  z-index: 5;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  pointer-events: none;
}

.ns-bell-body {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(160deg, #e7c98b, #9c7c3f);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 0;
}

.ns-bell-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px solid rgba(255, 214, 160, 0.75);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.ns-bell-ring--1 { width: 34px; height: 34px; }
.ns-bell-ring--2 { width: 34px; height: 34px; }

/* Light spilling onto the pavement */
.ns-spill {
  position: absolute;
  bottom: -6px;
  left: 50%;
  z-index: 0;
  width: 168%;
  height: clamp(70px, 11vh, 120px);
  opacity: 0.75;
  background: linear-gradient(180deg, rgba(255, 196, 118, 0.42), rgba(255, 170, 80, 0.08) 58%, transparent 88%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(4px);
  transform: translateX(-50%);
  transform-origin: top center;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.ns-mat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  max-width: 100%;
  margin-top: clamp(0.5rem, 1.2vh, 0.85rem);
  padding: 0.42rem 0.8rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #221f2c, #16141d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.5);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(214, 226, 255, 0.55);
}

.ns-mat .icon { width: 12px; height: 12px; color: var(--ns-cyan); }

/* ── Closed: the shutter comes down ──────────────────────────────────────── */

.ns-shutter {
  position: absolute;
  inset: clamp(7px, 0.8vw, 11px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  transform: translateY(-101%);
  transition: transform 1.05s cubic-bezier(0.5, 0, 0.2, 1);
  pointer-events: none;
}

.ns-shutter-slats {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      #2c2b38 0 7px,
      #191823 7px 9px,
      #23222e 9px 15px,
      #12111a 15px 17px
    );
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.05);
}

.ns-shutter-rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 9px;
  background: linear-gradient(180deg, #4a4857, #201f2a);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.6);
}

.ns-shutter-sign {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 250px;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  background: linear-gradient(158deg, #f6f0e0, #ddd3bd);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  text-align: center;
  transform: rotate(-1.6deg);
}

.ns-shutter-sign-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8231f;
}

.ns-shutter-sign-body {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  color: #453a2c;
}

.nightshop[data-shop='closed'] .ns-shutter { transform: translateY(0); }

.nightshop[data-shop='closed'] .ns-plate {
  filter: grayscale(0.85) brightness(0.6);
  pointer-events: none;
}

.nightshop[data-shop='closed'] .ns-openbox {
  border-color: rgba(255, 79, 99, 0.4);
  animation: none;
}

.nightshop[data-shop='closed'] .ns-openbox-word {
  color: #fff0f1;
  text-shadow:
    0 0 1px #fff,
    0 0 8px var(--ns-red),
    0 0 20px var(--ns-red),
    0 0 44px rgba(255, 79, 99, 0.45);
  animation: none;
}

.nightshop[data-shop='closed'] .ns-openbox-sub { color: rgba(255, 170, 178, 0.7); }
.nightshop[data-shop='closed'] .ns-spill { opacity: 0.14; }
.nightshop[data-shop='closed'] .ns-neon { animation: none; opacity: 0.6; }
.nightshop[data-shop='closed'] .ns-bay--door:hover .ns-door { transform: none; }

/* ── Sidewalk ────────────────────────────────────────────────────────────── */

.ns-sidewalk {
  position: relative;
  width: min(1140px, 100%);
  padding: clamp(0.8rem, 2vh, 1.35rem) clamp(0.6rem, 1.6vw, 1.2rem) clamp(1rem, 2.6vh, 1.9rem);
  background:
    linear-gradient(180deg, rgba(255, 184, 92, 0.07), transparent 46%),
    linear-gradient(180deg, #171827 0%, #101120 60%, #0a0a14 100%);
  box-shadow: inset 0 1px 0 rgba(226, 236, 255, 0.08);
}

/* Wet-pavement sheen catching the signage. */
.ns-sidewalk::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 90% at 50% 0%, rgba(255, 196, 118, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 80% at 16% 0%, rgba(98, 230, 255, 0.12), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(226, 236, 255, 0.02) 14px 15px);
}

.ns-kerb {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(180deg, rgba(226, 236, 255, 0.12), transparent);
}

.ns-street-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.8fr);
  gap: clamp(0.6rem, 1.6vw, 1.2rem);
  align-items: center;
}

/* Shopkeeper */
.ns-keeper {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
}

.ns-keeper-porthole {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(150deg, #33313f, #16151d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.ns-keeper-porthole img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.ns-keeper-lamp {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 2px solid #14131c;
  border-radius: 50%;
  background: #5c6070;
}

.ns-keeper-lamp[data-status='online'] { background: var(--ns-green); box-shadow: 0 0 12px var(--ns-green); }
.ns-keeper-lamp[data-status='idle'] { background: #f5b942; box-shadow: 0 0 12px rgba(245, 185, 66, 0.8); }
.ns-keeper-lamp[data-status='dnd'] { background: var(--ns-red); box-shadow: 0 0 12px rgba(255, 79, 99, 0.8); }

.ns-keeper-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.ns-keeper-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ns-keeper-role {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ns-ink-faint);
}

.ns-keeper-status {
  margin-top: 0.15rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ns-ink-soft);
}

/* Stapled flyer */
.ns-flyer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.7rem 0.95rem 0.9rem;
  border-radius: 1px;
  background: linear-gradient(162deg, #f5efdf, #ddd2b9);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
  color: #2b2317;
  text-decoration: none;
  transform: rotate(-1.4deg);
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease);
  /* Torn bottom edge */
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(6px 5px at 6px 0, transparent 98%, #000 100%);
  mask-image: linear-gradient(#000 0 0), radial-gradient(6px 5px at 6px 0, transparent 98%, #000 100%);
  -webkit-mask-size: 100% calc(100% - 5px), 12px 5px;
  mask-size: 100% calc(100% - 5px), 12px 5px;
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}

.ns-pin {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9aa8, #c4304a 68%, #7c1729);
  box-shadow: 0 2px 4px rgba(40, 20, 10, 0.5);
  transform: translateX(-50%);
}

.ns-flyer-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #857049;
}

.ns-flyer-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.ns-flyer-foot {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5b4a2e;
}

.ns-flyer-foot .icon { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }

.ns-flyer:hover,
.ns-flyer:focus-visible {
  transform: rotate(0.4deg) translateY(-3px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
}

.ns-flyer:hover .ns-flyer-foot .icon { transform: translateX(4px); }

.ns-flyer:focus-visible {
  outline: 2px solid var(--ns-cyan);
  outline-offset: 3px;
}

/* Wall plaque */
.ns-plaque {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid rgba(98, 230, 255, 0.25);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--ns-ink-faint);
}

.ns-plaque-line--fine { font-size: 0.62rem; opacity: 0.75; }

.ns-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.ns-legal a {
  color: var(--ns-ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.ns-legal a:hover,
.ns-legal a:focus-visible {
  color: var(--ns-cyan);
  border-bottom-color: rgba(98, 230, 255, 0.45);
  outline: none;
}

.ns-legal-sep {
  color: rgba(178, 192, 226, 0.35);
  user-select: none;
}

.ns-consent {
  margin: 0.55rem 0 0;
  max-width: 16rem;
  text-align: center;
  font-size: 0.64rem;
  line-height: 1.45;
  color: var(--ns-ink-faint);
}

.ns-consent a {
  color: rgba(206, 218, 246, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(98, 230, 255, 0.28);
}

.ns-consent a:hover,
.ns-consent a:focus-visible {
  color: var(--ns-cyan);
  outline: none;
}

/* ── Entering: the door opens and the camera walks in ────────────────────── */

.ns-flood {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--ns-flood-x, 72%) var(--ns-flood-y, 56%),
    #fff6e6 0%,
    #ffce8e 22%,
    rgba(255, 168, 74, 0.55) 46%,
    rgba(255, 140, 50, 0) 74%
  );
  transition: opacity 0.62s ease-in 0.26s;
}

.nightshop.is-entering .ns-door,
.nightshop.is-inside .ns-door {
  transform: rotateY(-86deg);
  box-shadow: 40px 0 90px rgba(0, 0, 0, 0.7);
}

.nightshop.is-entering .ns-stage,
.nightshop.is-inside .ns-stage { transform: scale(2.1); }

.nightshop.is-entering .ns-spill,
.nightshop.is-inside .ns-spill {
  opacity: 1;
  transform: translateX(-50%) scaleX(1.5) scaleY(1.4);
}

.nightshop.is-entering .ns-flood,
.nightshop.is-inside .ns-flood { opacity: 1; }

.nightshop.is-entering .ns-street,
.nightshop.is-inside .ns-street {
  opacity: 0.4;
  transition: opacity 0.9s ease;
}

.nightshop.is-entering .ns-bell-body { animation: nsBellRing 0.7s ease-out 2; }
.nightshop.is-entering .ns-bell-ring--1 { animation: nsBellWave 0.9s ease-out both; }
.nightshop.is-entering .ns-bell-ring--2 { animation: nsBellWave 0.9s ease-out 0.22s both; }

/* Pose the shop for the first paint of a walk-out without animating into it. */
.nightshop.no-motion .ns-stage,
.nightshop.no-motion .ns-door,
.nightshop.no-motion .ns-flood,
.nightshop.no-motion .ns-spill,
.nightshop.no-motion .ns-street {
  transition: none !important;
}

/* Sign-out: reverse of the walk-in. Camera pulls back first, door closes after. */
.nightshop.is-exiting .ns-stage {
  transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nightshop.is-exiting .ns-door {
  transition:
    transform 0.72s cubic-bezier(0.55, 0.05, 0.35, 1) 0.28s,
    box-shadow 0.7s var(--ease) 0.28s;
}

.nightshop.is-exiting .ns-flood {
  transition: opacity 0.55s ease-out;
}

.nightshop.is-exiting .ns-spill {
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}

.nightshop.is-exiting .ns-street {
  opacity: 1;
  transition: opacity 0.9s ease 0.15s;
}

@keyframes nsBellRing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  45% { transform: rotate(-12deg); }
  70% { transform: rotate(7deg); }
}

@keyframes nsBellWave {
  from { opacity: 0.8; transform: translate(-50%, -50%) scale(0.35); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ── Entrance reveals ────────────────────────────────────────────────────── */

.ns-reveal {
  animation: nsReveal 0.75s var(--motion-ease-out) both;
  animation-delay: calc(var(--r, 0) * 0.11s);
}

@keyframes nsReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ns-street-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 0.9rem;
  }

  .ns-plaque {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid rgba(226, 236, 255, 0.08);
    padding: 0.6rem 0 0;
  }
}

@media (max-width: 880px) {
  .nightshop { justify-content: flex-start; }

  .ns-front {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The way in comes first on small screens. */
  .ns-bay--door { order: -1; }

  .ns-door-frame { min-height: clamp(230px, 30vh, 300px); }
  .ns-lamp { display: none; }
  .ns-moon { top: 5%; right: 8%; width: 58px; height: 58px; }
  .ns-notice { margin-top: 0.4rem; }
}

@media (max-width: 620px) {
  body.view-login-active { --ns-sign-size: clamp(2.4rem, 15vw, 3.6rem); }

  .ns-sign-sub { font-size: 0.68rem; letter-spacing: 0.22em; text-indent: 0.22em; }

  .ns-shelf { gap: 0.35rem; }
  .ns-good { padding-inline: 0.15rem; }
  .ns-good-name { font-size: 0.64rem; }
  .ns-tag { font-size: 0.6rem; padding: 0.12rem 0.32rem; }

  .ns-plate { width: 100%; }
  .ns-decals { display: none; }

  .ns-street-row { grid-template-columns: minmax(0, 1fr); }
  .ns-flyer { transform: none; }
  .ns-flyer:hover, .ns-flyer:focus-visible { transform: translateY(-3px); }

  .ns-notice-list li { font-size: 0.73rem; }
  .ns-skyline { height: 130px; }
}

/* Touch devices never get the hover "give", so keep the door square on. */
@media (hover: none) {
  .ns-bay--door:hover .ns-door { transform: none; }
}

/* ── Reduced motion & lite mode ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ns-neon,
  .ns-openbox,
  .ns-openbox-word,
  .ns-tag,
  .ns-bulb,
  .ns-star,
  .ns-drop,
  .ns-lamp-cone,
  .ns-good,
  .ns-reveal {
    animation: none !important;
  }

  .ns-good,
  .ns-reveal {
    opacity: 1;
    transform: none;
  }

  .ns-street,
  .ns-shop,
  .ns-stage,
  .ns-door,
  .ns-glass-streak,
  .nightshop.is-exiting .ns-stage,
  .nightshop.is-exiting .ns-door,
  .nightshop.is-exiting .ns-flood,
  .nightshop.is-exiting .ns-spill,
  .nightshop.is-exiting .ns-street {
    transition: none !important;
  }

  .nightshop.is-entering .ns-door,
  .nightshop.is-inside .ns-door,
  .nightshop.is-entering .ns-stage,
  .nightshop.is-inside .ns-stage,
  .nightshop.is-entering .ns-flood,
  .nightshop.is-inside .ns-flood,
  .nightshop.is-entering .ns-spill,
  .nightshop.is-inside .ns-spill {
    transform: none;
    opacity: inherit;
  }
}

/* Pause ambient loops when the tab is in the background (set by perf.js). */
html.perf-paused .ns-star,
html.perf-paused .ns-drop,
html.perf-paused .ns-neon,
html.perf-paused .ns-openbox,
html.perf-paused .ns-openbox-word,
html.perf-paused .ns-tag,
html.perf-paused .ns-bulb,
html.perf-paused .ns-lamp-cone,
html.perf-paused .ns-good {
  animation-play-state: paused !important;
}

/* Balanced: keep weather + neon motion, strip expensive live blur filters. */
html.perf-balanced .ns-glass-streak {
  filter: none !important;
  will-change: auto !important;
  opacity: 0.55;
}

html.perf-balanced .ns-spill,
html.perf-balanced .ns-window,
html.perf-balanced .ns-awning,
html.perf-balanced .ns-good-art,
html.perf-balanced .ns-sign-echo,
html.perf-balanced .ns-lamp-cone {
  filter: none !important;
}

html.perf-balanced .ns-neon {
  text-shadow: 0 0 2px #fff, 0 0 14px var(--ns-cyan), 0 0 28px rgba(98, 230, 255, 0.45);
}

html.perf-balanced .ns-neon--violet {
  text-shadow: 0 0 2px #fff, 0 0 12px var(--ns-violet), 0 0 24px rgba(168, 135, 255, 0.4);
}

html.perf-balanced .ns-sign-echo,
html.perf-balanced .ns-interior-shelves,
html.perf-balanced .ns-bell-ring {
  display: none !important;
}

html.perf-balanced .nightshop::after { display: none; }

html.perf-lite .ns-rain,
html.perf-lite .ns-stars,
html.perf-lite .ns-glass-streak,
html.perf-lite .ns-sign-echo,
html.perf-lite .ns-lamp-cone,
html.perf-lite .ns-interior-shelves,
html.perf-lite .ns-bell-ring {
  display: none !important;
}

html.perf-lite .ns-neon,
html.perf-lite .ns-openbox,
html.perf-lite .ns-openbox-word,
html.perf-lite .ns-tag,
html.perf-lite .ns-bulb,
html.perf-lite .ns-good,
html.perf-lite .ns-reveal {
  animation: none !important;
}

html.perf-lite .ns-good,
html.perf-lite .ns-reveal {
  opacity: 1;
  transform: none;
}

html.perf-lite .ns-spill,
html.perf-lite .ns-window,
html.perf-lite .ns-awning,
html.perf-lite .ns-good-art,
html.perf-lite .ns-sign-echo {
  filter: none !important;
}

html.perf-lite .ns-glass-streak {
  will-change: auto !important;
}

/* The heaviest bloom is the sign; keep it readable but cheap to composite. */
html.perf-lite .ns-neon {
  text-shadow: 0 0 2px #fff, 0 0 12px var(--ns-cyan), 0 0 26px rgba(98, 230, 255, 0.5);
}

html.perf-lite .ns-neon--violet {
  text-shadow: 0 0 2px #fff, 0 0 10px var(--ns-violet), 0 0 22px rgba(168, 135, 255, 0.45);
}

html.perf-lite .ns-bulb {
  box-shadow: 0 0 6px 1px rgba(255, 190, 110, 0.55);
}

html.perf-lite .ns-awning {
  filter: none !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

html.perf-lite .ns-spill {
  opacity: 0.55;
  background: linear-gradient(180deg, rgba(255, 196, 118, 0.28), transparent 78%);
}

/* Skip the walk-in camera push on lite — same as reduced motion. */
html.perf-lite .ns-street,
html.perf-lite .ns-shop,
html.perf-lite .ns-stage,
html.perf-lite .ns-door,
html.perf-lite .ns-glass-streak,
html.perf-lite .nightshop.is-exiting .ns-stage,
html.perf-lite .nightshop.is-exiting .ns-door,
html.perf-lite .nightshop.is-exiting .ns-flood,
html.perf-lite .nightshop.is-exiting .ns-spill,
html.perf-lite .nightshop.is-exiting .ns-street {
  transition: none !important;
}

html.perf-lite .nightshop.is-entering .ns-door,
html.perf-lite .nightshop.is-inside .ns-door,
html.perf-lite .nightshop.is-entering .ns-stage,
html.perf-lite .nightshop.is-inside .ns-stage,
html.perf-lite .nightshop.is-entering .ns-flood,
html.perf-lite .nightshop.is-inside .ns-flood,
html.perf-lite .nightshop.is-entering .ns-spill,
html.perf-lite .nightshop.is-inside .ns-spill {
  transform: none;
  opacity: inherit;
}

html.perf-lite .nightshop::after { display: none; }