/* mallriot.com -- best viewed in netscape 4 at 800x600 */

* { box-sizing: border-box; }

html {
  background: #000;
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #c8c8c8;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='2,2 2,16 6,12 9,18 11,17 8,11 14,11' fill='white' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 2 2, auto;
}
body { background: transparent; }

body {
  position: relative;
  /* Single flowing centred column. The old "desktop stage" (absolute-
     positioned directory left / kiosk + remix-o-matic right, nostalgia
     bits pinned at top:700px) is gone — every section now just stacks
     in normal flow. Same layout at every width, only the column gets
     wider on desktop. */
  padding-bottom: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

/* ---- BACKGROUND VIDEO ---- */
#bg {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: -3;
  /* muted, washed-out, slightly sickly */
  filter: saturate(0.45) hue-rotate(8deg) contrast(1.35) brightness(1.25) blur(0.6px);
  opacity: 0.5;
}
#bg-fallback {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -4;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, #1a0a2e 0%, #000 70%);
}
/* extra distortion: chromatic shift + static noise on top of video */
#bg-distort {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  animation: noiseshift 0.4s steps(6) infinite;
}
@keyframes noiseshift {
  0%   { background-position: 0 0; }
  20%  { background-position: -40px 17px; }
  40%  { background-position: 27px -33px; }
  60%  { background-position: 11px 9px; }
  80%  { background-position: -19px 22px; }
  100% { background-position: 0 0; }
}
/* warm color wash to push it toward the mall's sickly palette */
#bg-tint {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(180, 30, 110, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(20, 120, 180, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
#scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  box-shadow: inset 0 0 200px 60px #000;
}

/* ---- TOP CRAWL ---- */
#topcrawl {
  position: relative;
  z-index: 5;
  background: #000080;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 2px ridge #ffff00;
  letter-spacing: 1px;
}

/* ---- LOGO ---- */
#logo-table {
  margin: 30px auto 0;
  position: relative;
  z-index: 4;
}
#logo {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 84px;
  margin: 0;
  padding: 0;
  text-align: center;
  letter-spacing: -2px;
  text-shadow:
    3px 3px 0 #ff00ff,
    -3px -3px 0 #00ffff,
    0 0 30px #fff;
  transform: rotate(-1.5deg);
}
#logo span { display: inline-block; }
#logo .l1 { color: #ff0000; transform: rotate(-4deg) translateY(-4px); }
#logo .l2 { color: #ff8800; transform: rotate(2deg); }
#logo .l3 { color: #ffff00; transform: rotate(-1deg) translateY(2px); }
#logo .l4 { color: #00ff00; transform: rotate(3deg) translateY(-2px); }
#logo .l5 { color: #00ffff; transform: rotate(-2deg); }
#logo .l6 { color: #0088ff; transform: rotate(4deg) translateY(3px); }
#logo .l7 { color: #ff00ff; transform: rotate(-3deg); }
#logo .l8 { color: #ffffff; transform: rotate(2deg) translateY(-1px); }
#logo sup {
  font-size: 18px;
  color: #aaa;
  font-family: "Courier New", monospace;
  letter-spacing: 0;
  text-shadow: none;
  vertical-align: super;
}
#tagline {
  text-align: center;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-size: 18px;
  color: #ff66ff;
  margin: 4px 0 0;
  text-shadow: 1px 1px 0 #000;
}
.dim { color: #666; }
.bright { color: #fff; text-shadow: 0 0 6px #ff00ff; }

/* ---- FRAMES (geocities-style) ---- */
.frame {
  background: #1a1a1a;
  border: 3px outset #888;
  padding: 10px;
  position: absolute;
  z-index: 6;
  box-shadow: 4px 4px 0 #000;
}
.frame-title {
  background: linear-gradient(to right, #000080, #4040c0);
  color: #fff;
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  margin: -10px -10px 8px;
  letter-spacing: 1px;
}

.tinytext { font-size: 10px; color: #888; font-family: "Courier New", monospace; margin: 6px 0 0; }

/* ---- NOSTALGIA ROW ---- */
/* The geocities-era flotsam — sticker, construction notice, foot-traffic
   counter, browser badges. Used to be absolute-positioned at top:700px on
   the old desktop stage; now a centred flex-wrap row below the card
   stack, so it reflows naturally at any height. */
.nostalgia-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 40px auto 10px;
  padding: 0 16px;
}

/* ---- STICKERS ---- */
.sticker { z-index: 7; }
#sticker1 {
  transform: rotate(8deg);
  animation: wiggle 4s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.04); }
}

/* ---- CONSTRUCTION ---- */
#construction {
  background: #ffff00;
  color: #000;
  border: 2px dashed #000;
  padding: 6px 10px;
  transform: rotate(3deg);
  font-family: "Courier New", monospace;
}
#construction .ascii {
  margin: 0;
  font-size: 11px;
  line-height: 1.1;
}

/* ---- COUNTER (foot traffic) ---- */
#counter-block {
  transform: rotate(0.8deg);
  background: #1a1a1a;
  border: 3px outset #888;
  padding: 10px;
  z-index: 6;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #ccc;
  text-align: center;
  box-shadow: 4px 4px 0 #000;
}
#counter-block .frame-title {
  background: linear-gradient(to right, #000080, #4040c0);
  color: #fff;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 12px;
  padding: 2px 6px;
  margin: -10px -10px 8px;
}
#counter-block p { margin: 4px 0; }
.prev { color: #ff66ff; font-style: italic; }

/* ---- SPLIT-FLAP HIT COUNTER ---- */
/* Old-school mechanical flip-card counter: each digit is its own cell
   with a top-lighter / bottom-darker face and a seam across the middle,
   like the split-flap boards in a 1990s mall. Digits filled in by
   script.js from the local visit count. */
.hit-counter {
  display: inline-flex;
  gap: 3px;
  padding: 6px;
  margin: 4px 0;
  background: #0a0a0a;
  border: 2px inset #444;
}
.hit-digit {
  position: relative;
  width: 24px;
  height: 36px;
  /* top half catches light, bottom half falls into shadow — the flap */
  background: linear-gradient(#3c3c3c 0%, #232323 49%, #050505 50%, #1c1c1c 100%);
  color: #f4efdd;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 27px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.85);
  text-shadow: 0 1px 2px #000;
}
/* the horizontal seam where the two flaps meet */
.hit-digit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ---- BADGES ---- */
/* Netscape / IE / webring — a single centred row along the very bottom
   of the page, just above the footer. */
#badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 30px auto 8px;
}
.badge {
  display: inline-block;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  padding: 6px 8px;
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}
.badge.n { background: #003366; color: #fff; }
.badge.ie { background: linear-gradient(135deg, #0066cc, #66ccff); color: #fff; }
.badge.ring a { color: #00008b; text-decoration: underline; }

/* ---- SIDEWAYS TEXT ---- */
#sideways {
  position: fixed;
  left: 4px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #444;
  letter-spacing: 4px;
  z-index: 5;
  user-select: none;
}

/* ---- BASEMENT ---- */
#basement-link {
  position: fixed;
  bottom: 6px;
  right: 6px;
  width: 4px; height: 4px;
  background: #2a2a2a;
  color: transparent;
  z-index: 8;
  text-decoration: none;
}
#basement-link:hover {
  background: #ff0000;
  box-shadow: 0 0 8px #ff0000;
}

/* ---- HIDDEN TEXT ---- */
#hidden-text {
  color: #050505;
  font-size: 11px;
  max-width: 600px;
  margin: 24px auto 0;
  padding: 0 20px;
  font-family: "Courier New", monospace;
  user-select: text;
  text-align: center;
}
#hidden-text::selection { background: #ff00ff; color: #000; }

/* ---- FOOTER ---- */
#footer {
  text-align: center;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 11px;
  color: #555;
  margin: 18px auto 12px;
}
#footer p { margin: 2px 0; }

/* ---- OVERLAY ---- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#overlay.hidden { display: none; }
#overlay-window {
  background: #c0c0c0;
  border: 2px outset #fff;
  width: min(440px, 90vw);
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  color: #000;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
}
#overlay-title {
  background: linear-gradient(to right, #000080, #4040c0);
  color: #fff;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#overlay-title a {
  color: #fff;
  text-decoration: none;
  background: #c0c0c0;
  color: #000;
  border: 1px outset #fff;
  padding: 0 4px;
  font-family: "Courier New", monospace;
}
#overlay-body {
  padding: 14px;
  font-size: 13px;
  line-height: 1.4;
  background: #c0c0c0;
  min-height: 80px;
  white-space: pre-wrap;
}
#overlay-body a { color: #00008b; }

/* ---- TRAIL ---- */
#trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* ---- TEARS REGISTRY KIOSK ---- */
/* Flashing block that links to /tears. Now a centred flow element sitting
   between the two collection cards and the feature-card grid. Obnoxious-
   90s palette: hot pink + yellow + cyan, rainbow letter colors, blinking
   CTA, animated shadow glow. The NEW! badge and the inner marquee were
   removed — the kiosk reads cleaner as a clean headline + CTA. */
#tears-kiosk {
  display: block;
  margin: 22px auto;
  width: 100%;
  max-width: 440px;
  padding: 4px;
  text-decoration: none;
  /* Animated rainbow gradient border via background */
  background: linear-gradient(135deg, #ff00ff, #ffff00, #00ffff, #ff00ff, #ffff00);
  background-size: 400% 400%;
  transform: rotate(-1deg);
  animation: tk-rainbow 4s linear infinite, tk-wiggle 5s ease-in-out infinite;
  box-shadow:
    0 0 14px rgba(255, 0, 255, 0.75),
    0 0 28px rgba(255, 255, 0, 0.5),
    6px 6px 0 #000;
}
#tears-kiosk:hover {
  transform: rotate(-2deg) scale(1.04);
  box-shadow:
    0 0 22px rgba(255, 0, 255, 1),
    0 0 44px rgba(0, 255, 255, 0.65),
    6px 6px 0 #000;
}
.tears-kiosk-inner {
  background: #000;
  padding: 12px 14px 10px;
  text-align: center;
  border: 2px ridge #ffff00;
}
.tears-kiosk-title {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #fff;
  line-height: 1;
}
.tears-kiosk-title span { display: inline-block; }
.tears-kiosk-title .tk0 { color: #ff0000; transform: translateY(-2px); }
.tears-kiosk-title .tk1 { color: #ff8800; transform: rotate(-4deg); }
.tears-kiosk-title .tk2 { color: #ffff00; transform: translateY(2px); }
.tears-kiosk-title .tk3 { color: #00ff00; transform: rotate(3deg); }
.tears-kiosk-title .tk4 { color: #00ffff; transform: translateY(-1px); }
.tears-kiosk-title .tk5 { color: #ff00ff; transform: rotate(-2deg); }
.tears-kiosk-title .tk6 { color: #ff66ff; transform: translateY(1px); }
.tears-kiosk-title .tk7 { color: #ffffff; transform: rotate(2deg); }
.tears-kiosk-title .tk8 { color: #00ff88; transform: translateY(-2px); }
.tears-kiosk-title .tk9 { color: #ffaa44; transform: rotate(-3deg); }
.tears-kiosk-cta {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 18px;
  color: #ffff00;
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 #ff00ff, 0 0 8px #ffff00;
  margin-top: 8px;
}
.tears-kiosk-click {
  display: inline-block;
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #ff00ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tk-rainbow-text 3s linear infinite;
  font-weight: 900;
}
.tears-kiosk-sub {
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-size: 10px;
  color: #ff66ff;
  letter-spacing: 1px;
  margin-top: 2px;
  text-shadow: 1px 1px 0 #000;
}
@keyframes tk-rainbow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes tk-rainbow-text {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes tk-wiggle {
  /* Right-column kiosk is no longer centered — just rotate in place. */
  0%, 100% { transform: rotate(-1deg); }
  25%      { transform: rotate(1deg); }
  50%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1.2deg); }
}



/* responsive-ish (90s sites were not, but) */
@media (max-width: 900px) {
  /* Soften the kiosk wiggle to a static tilt on small screens so the
     rotation + shadow don't clip the viewport edge. */
  #tears-kiosk {
    transform: rotate(-0.5deg);
    transform-origin: center;
    animation: tk-rainbow 4s linear infinite;  /* drop the wiggle on mobile */
  }
  #tears-kiosk:hover { transform: rotate(-0.5deg) scale(1.02); }

  /* Login chip — compact on phones (just "LOGIN", the "COLLECTORS "
     word is hidden) so it stays small in the corner with a gutter and
     doesn't crowd the centered logo. */
  #collector-login {
    top: 10px;
    right: 12px;
    padding: 4px 8px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  #collector-login .cl-word { display: none; }
  /* Logout chip — small corner square with the same gutter. */
  #logout-chip {
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
  }
  /* Badges — center as a row instead of a column on phones. */
  #badges {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  /* Tagline — tighten so it doesn't wrap weird under the logo */
  #tagline { font-size: 14px; padding: 0 12px; }
  #logo { font-size: 56px; }
  /* Sideways floating text only makes sense at desktop sizes */
  #sideways { display: none; }

  /* Drop the dark haze on mobile — vignette + multiply-blend tint + scanlines
     are atmospheric on a 27" desktop monitor, but on a 5" phone they swallow
     half the readable area. Keep just the bg video underneath. */
  #vignette { display: none; }
  #bg-tint { display: none; }
  #scanlines { display: none; }
  /* Boost the bg video's brightness too so it doesn't look murky */
  #bg { filter: saturate(0.6) brightness(1) blur(0.6px) !important; opacity: 0.35 !important; }
}
@media (max-width: 480px) {
  /* Really narrow — shrink the rainbow logo so it fits in one line */
  #logo { font-size: 38px; letter-spacing: -1px; transform: rotate(-1deg); }
  #logo sup { font-size: 14px; }
  #tagline { font-size: 12px; }
}

blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ===================================================================
   CARD STACK
   The homepage body. A centred column: two collection cards, the tears
   kiosk, a grid of mall-feature cards, a separator, then the green
   remix cards. Cards reuse the tears-kiosk visual language (animated
   rainbow border, ridge-y 90s chrome) at a smaller scale.
   =================================================================== */
.cardstack {
  max-width: 720px;
  margin: 8px auto 0;
  padding: 0 16px;
  position: relative;
  z-index: 6;
}

/* ---- shared card base ----------------------------------------------------
   The rainbow "border" is the standard two-layer background trick: a solid
   black `padding-box` layer for the content area, plus a rainbow
   `border-box` layer that only shows through the transparent border. Lets
   us animate the rainbow (background-position) with no inner wrapper. */
.kiosk-card {
  display: block;
  position: relative;   /* anchor for the .card-locked overlay */
  text-decoration: none;
  border: 3px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, #ff00ff, #ffff00, #00ffff, #ff00ff, #ffff00) border-box;
  background-size: 100% 100%, 320% 320%;
  animation: tk-rainbow 6s linear infinite;
  box-shadow: 4px 4px 0 #000, 0 0 10px rgba(255, 0, 255, 0.35);
  transition: transform 0.1s, box-shadow 0.1s;
}
.kiosk-card:hover {
  transform: scale(1.025);
  box-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 0, 255, 0.8);
}
/* Green variant — the remix floor. Same chrome, swamp-green palette. */
.kiosk-card.green {
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, #00ff88, #c8ffce, #00aa66, #00ff88, #006644) border-box;
  background-size: 100% 100%, 320% 320%;
  box-shadow: 4px 4px 0 #000, 0 0 10px rgba(0, 255, 136, 0.35);
}
.kiosk-card.green:hover {
  box-shadow: 4px 4px 0 #000, 0 0 18px rgba(0, 255, 136, 0.8);
}

/* Gold variant — the standout cards: TEARS REGISTRY leading the
   collectors' wing and THE COLLECTION leading the remix floor. Gold fill
   instead of the black inner so each one anchors its section, distinct
   from the cards around it. */
.kiosk-card.gold {
  background:
    linear-gradient(160deg, #ffe680, #d4a017) padding-box,
    linear-gradient(135deg, #ff00ff, #ffff00, #00ffff, #ff00ff, #ffff00) border-box;
  background-size: 100% 100%, 320% 320%;
  box-shadow: 4px 4px 0 #000, 0 0 16px rgba(255, 196, 0, 0.55);
}
.kiosk-card.gold:hover {
  box-shadow: 4px 4px 0 #000, 0 0 28px rgba(255, 210, 0, 0.95);
}
.gold .fc-name {
  color: #1a0d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.gold .fc-sub { color: #6b4a00; }

/* ---- LOCKED CARD ---- */
/* A PRIVATE card viewed by a logged-out visitor: stays visible but is
   darkened, not clickable, and overlaid with a tilted two-line
   "COLLECTORS / ONLY" plate in the MALLRIOT (Impact) typeface. The
   .card-lock overlay element + its per-letter random logo colours are
   injected by script.js (which adds .card-locked to the card). */
.kiosk-card.card-locked { pointer-events: none; }
.card-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* slight darken of the card underneath */
  background: rgba(0, 0, 0, 0.55);
}
.card-lock-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-8deg);
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 16px;
  line-height: 0.95;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}
.card-lock-line { display: block; }

/* ---- collection cards (AoP + Granny's Gifts) ----------------------------
   Wide cards, front and centre — a random token thumbnail on the left, the
   collection name + a "click here for more info" CTA on the right. */
/* The two collection cards sit side by side, each taking half the
   column width. They keep the default black .kiosk-card inner. */
.collection-cards {
  display: flex;
  gap: 14px;
}
.collection-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  transform: rotate(-0.5deg);
}
.collection-card:nth-child(2) { transform: rotate(0.5deg); }
.cc-thumb {
  flex-shrink: 0;
  width: 104px;
  background: #000;
  border-right: 2px ridge #ff66ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.cc-name {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(255, 102, 255, 0.7);
}
.cc-meta {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #00ffff;
  letter-spacing: 0.5px;
}
.cc-cta {
  margin-top: 4px;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #ffff00;
  text-shadow: 1px 1px 0 #ff00ff;
}

/* ---- feature + remix card grids -----------------------------------------
   Small cards, "a little smaller" than the tears kiosk. */
.feature-cards,
.remix-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.feature-card {
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 78px;
}
.feature-card:nth-child(odd)  { transform: rotate(-0.7deg); }
.feature-card:nth-child(even) { transform: rotate(0.7deg); }
.fc-name {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 102, 255, 0.6);
}
.kiosk-card.green .fc-name {
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0, 255, 136, 0.6);
}
.fc-sub {
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-size: 10px;
  color: #ff66ff;
}
.kiosk-card.green .fc-sub { color: #66ffaa; }

/* ---- separator between the mall directory and the remix floor ---- */
.stack-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 2px 8px;
}
.stack-sep::before,
.stack-sep::after {
  content: "";
  flex: 1;
  border-top: 2px ridge #006644;
}
.stack-sep span {
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #66ffaa;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}
/* Gold divider — the collectors' wing (the default green divider reads
   as remix-floor identity). */
.stack-sep.gold::before,
.stack-sep.gold::after { border-top-color: #b8860b; }
.stack-sep.gold span {
  color: #ffd24a;
  text-shadow: 0 0 8px rgba(255, 196, 0, 0.55);
}
.remix-loading {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #888;
  padding: 8px 0;
}

/* The two collection cards stop fitting side by side on narrow screens —
   stack them instead. */
@media (max-width: 560px) {
  .collection-cards { flex-direction: column; }
}
@media (max-width: 520px) {
  .cc-thumb { width: 84px; }
  .cc-name { font-size: 18px; }
  .feature-cards,
  .remix-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- WELCOME POPUP (gates wallet-less visitors) ---- */
#overlay-window.welcome {
  width: min(680px, 96vw);
}
#overlay-window.welcome #overlay-body {
  padding: 0;
  background: #c0c0c0;
  white-space: normal;
  min-height: 240px;
}
.welcome-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
}
.secretary {
  background: #1a0a26;
  padding: 10px;
  border-right: 4px ridge #888;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.secretary img {
  width: 100%;
  display: block;
  border: 3px inset #888;
  background: #000;
  image-rendering: pixelated;
}
.secretary-name {
  margin-top: 8px;
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #ff66ff;
  text-align: center;
  line-height: 1.2;
  text-shadow: 1px 1px 0 #000;
}
.secretary-name span {
  font-weight: normal;
  font-size: 9px;
  color: #aaa;
  font-style: italic;
}
.welcome-right {
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  background: #c0c0c0;
}
.npc-text {
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.55;
  color: #0a0a0a;
  white-space: pre-wrap;
  cursor: pointer;
  min-height: 180px;
  position: relative;
}
.npc-text::after {
  content: "▌";
  display: inline-block;
  margin-left: 2px;
  color: #000080;
  animation: typecursor 0.8s steps(2, start) infinite;
}
.npc-text.done::after {
  content: "▼";
  color: #000080;
  animation: bobble 1.2s ease-in-out infinite;
}
@keyframes typecursor { to { opacity: 0; } }
@keyframes bobble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.welcome-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: stretch;
}
.ugly-btn {
  flex: 1;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 4px;
  padding: 14px 0;
  border: 4px outset;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  transition: transform 0.08s;
}
.ugly-btn:active { border-style: inset; transform: translate(1px, 1px); }
.ugly-yes {
  background: linear-gradient(180deg, #00ff66 0%, #008833 100%);
  border-color: #00ff66 #003311 #003311 #00ff66;
  color: #001100;
}
.ugly-yes:hover { background: linear-gradient(180deg, #33ff88 0%, #00aa44 100%); }
.ugly-no {
  background: linear-gradient(180deg, #ff3366 0%, #880022 100%);
  border-color: #ff3366 #330011 #330011 #ff3366;
  color: #fff0f0;
}
.ugly-no:hover { background: linear-gradient(180deg, #ff5588 0%, #aa0033 100%); }

@media (max-width: 600px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .secretary { border-right: none; border-bottom: 4px ridge #888; flex-direction: row; gap: 12px; }
  .secretary img { width: 80px; }
  .secretary-name { margin-top: 0; text-align: left; align-self: center; flex: 1; }
  .welcome-right { min-height: auto; }
  .npc-text { min-height: 100px; }
}

/* ---- WIZARD INPUTS (in welcome modal) ---- */
.wiz-input {
  width: 100%;
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  color: #1a1a1a;
  border: 3px inset #888;
  letter-spacing: 1px;
  margin: 12px 0 6px;
  box-sizing: border-box;
}
.wiz-input:focus { outline: 3px solid #000080; outline-offset: -3px; }
.wiz-hint {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #555;
  margin-top: 4px;
  min-height: 14px;
}
.wiz-hint.error { color: #c00; font-weight: bold; }

/* ---- NFT CAROUSEL ---- */
.carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  background: #1a0a26;
  padding: 10px;
  border: 3px inset #888;
}
.carousel-arrow {
  background: linear-gradient(180deg, #ffff00 0%, #ccaa00 100%);
  border: 3px outset #ffff00;
  font-family: "Comic Sans MS", cursive;
  font-size: 22px;
  font-weight: bold;
  color: #000;
  width: 38px;
  height: 56px;
  cursor: pointer;
  flex-shrink: 0;
}
.carousel-arrow:active { border-style: inset; }
.carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-frame {
  flex: 1;
  min-width: 0;
  background: #000;
  border: 2px solid #ffff00;
  aspect-ratio: 1 / 1;
  max-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.carousel-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.carousel-frame .empty {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #888;
  text-align: center;
  padding: 12px;
}
.carousel-cap {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #1a1a1a;
  text-align: center;
  margin-top: 4px;
  font-weight: bold;
  min-height: 16px;
}
.carousel-counter {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #555;
  text-align: center;
  margin-top: 2px;
}

/* ---- LOGOUT CHIP (top-right, signed-in state) ---- */
/* Shown when signed in — a plain logout icon in a small square chip.
   Occupies the exact same corner slot + content-width anchor as the
   COLLECTORS LOGIN chip (the two are mutually exclusive). */
#logout-chip {
  position: fixed;
  top: 36px;
  right: max(0px, calc((100vw - 1000px) / 2));
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #000080, #4040c0);
  border: 2px outset #ffff00;
  color: #ffff00;
  text-decoration: none;
  box-shadow: 4px 4px 0 #000, 0 0 12px rgba(255, 255, 0, 0.4);
  transition: transform 0.12s, box-shadow 0.12s;
}
#logout-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000, 0 0 18px rgba(255, 255, 0, 0.75);
}
#logout-chip svg { display: block; }

/* ---- COLLECTORS LOGIN BUTTON (top-right, signed-out state) ---- */
/* Occupies the same top-right slot as the profile chip — the two are
   mutually exclusive (login button when signed out, chip when signed
   in). Clicking it opens Ms. Grove's welcome / connect flow. */
#collector-login {
  position: fixed;
  top: 36px;
  /* Right edge flush with the body/marquee right edge — the body is
     capped at 1000px and centred, so (100vw - 1000px) / 2 is the gap
     from the viewport edge to the content edge. Clamps to 0 once the
     viewport is narrower than the content. */
  right: max(0px, calc((100vw - 1000px) / 2));
  z-index: 8;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #000080, #4040c0);
  border: 2px outset #ffff00;
  padding: 8px 14px;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: #ffff00;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 4px 4px 0 #000, 0 0 12px rgba(255, 255, 0, 0.4);
  transition: transform 0.12s, box-shadow 0.12s;
}
#collector-login:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000, 0 0 18px rgba(255, 255, 0, 0.75);
}