/* ============================================================
   NCH Overlay — Portable Capsule Styles (Phase 0)
   ============================================================
   Standalone styles for the draggable joker-stack capsule.
   Works on any page — no GoneRogue dependency.

   Class prefix: .nch-overlay-* (avoids collision with NCH's
   .nch-capsule-* classes which are game-mode-specific).
   ============================================================ */

/* ── 1. CAPSULE WRAPPER ─────────────────────────────────────
   Fixed-position pill, draggable. Default: bottom-right.
   JS overrides top/left via inline style when user drags.     */

.nch-overlay-wrapper {
  position: fixed;
  bottom: 48px;
  right: 14px;
  z-index: 1801;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 10px;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nch-overlay-wrapper.nch-overlay-dragging {
  cursor: grabbing;
  opacity: 0.85;
}

/* Transition animation when switching porthole → game */
.nch-overlay-wrapper.nch-overlay-transitioning {
  animation: nch-overlay-morph 0.3s ease-out forwards;
}

@keyframes nch-overlay-morph {
  0%   { transform: scale(1);   opacity: 1;   }
  50%  { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(0.8);  opacity: 0;   }
}

.nch-overlay-inner {
  display: flex;
  align-items: center;
}

/* ── 2. JOKER STACK ─────────────────────────────────────────
   Overlapping joker emojis. Same layout math as NCH capsule
   (20px base + 6px advance per card), but with its own class
   namespace so both can coexist in DOM.                       */

.nch-overlay-stack {
  position: relative;
  height: 28px;
  min-width: 20px;
}

.nch-overlay-joker {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  top: 0;
  transition: left 0.25s ease, top 0.25s ease, filter 0.3s ease;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
  /* Needed for ::after tint overlay positioning */
  display: inline-block;
}

/* Positional offsets — diagonal cascade, same as NCH */
.nch-overlay-joker.joker-0 { left: 0;    top: 0;   }
.nch-overlay-joker.joker-1 { left: 6px;  top: 2px; }
.nch-overlay-joker.joker-2 { left: 12px; top: 4px; }
.nch-overlay-joker.joker-3 { left: 18px; top: 2px; }
.nch-overlay-joker.joker-4 { left: 24px; top: 0;   }
.nch-overlay-joker.joker-5 { left: 30px; top: 2px; }
.nch-overlay-joker.joker-6 { left: 36px; top: 4px; }
.nch-overlay-joker.joker-7 { left: 42px; top: 2px; }

/* Hover: fan out slightly */
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-0 { left: 0;    top: 0;   }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-1 { left: 8px;  top: 2px; }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-2 { left: 16px; top: 4px; }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-3 { left: 24px; top: 2px; }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-4 { left: 32px; top: 0;   }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-5 { left: 40px; top: 2px; }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-6 { left: 48px; top: 4px; }
.nch-overlay-wrapper:hover .nch-overlay-joker.joker-7 { left: 56px; top: 2px; }

/* ── 3. PORTHOLE MODE — Theme Card Colorization ────────────
   Miniature coin-card layer stack on each joker emoji:
     1. Bright glow        — drop-shadow on .nch-overlay-joker
     2. Emoji               — .nch-joker-emoji (the 🃏 glyph)
     3. Dark tint overlay   — .nch-joker-tint (dark contrast of theme color, 25% opacity)
     4. Metallic sheen      — .nch-joker-sheen (sweeping coin highlight)

   Stack order (DOM order, left → right, bottom → top):
     joker-0 = silver  (bottommost)
     joker-1 = amber
     joker-2 = phosphor
     joker-3 = panther (topmost)
   This order is critical for Phase 4 drag-to-rearrange.       */

/* ---- Layer 1: Emoji glyph ---- */
.nch-joker-emoji {
  position: relative;
  z-index: 1;
}

/* ---- Layer 2: Dark tint overlay (on top of emoji) ---- */
.nch-joker-tint {
  position: absolute;
  /* ~10% narrower, ~9% taller (+3px higher on Y) */
  top: -3px;
  bottom: 0;
  left: 5%;
  right: 5%;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.20;
  transition: opacity 0.3s ease;
}

/* ---- Layer 3: Metallic sheen sweep (topmost) ---- */
.nch-joker-sheen {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.08) 56%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: nch-joker-sheen 8s ease-in-out infinite;
}

@keyframes nch-joker-sheen {
  0%, 100% { background-position: 250% 0; }
  50%      { background-position: -250% 0; }
}

/* ── Per-theme colors ─────────────────────────────────────
   Glow: bright theme color, drop-shadow at 2px spread (~50% tighter)
   Tint: deep dark shade of the same hue                     */

/* Silver: glow #b0c4de → tint dark steel #1a2535 */
.nch-overlay-joker[data-theme-id="silver"] {
  filter: drop-shadow(0 0 2px rgba(176, 196, 222, 0.5))
          drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}
.nch-overlay-joker[data-theme-id="silver"] .nch-joker-tint {
  background: #1a2535;
}
.nch-overlay-joker[data-theme-id="silver"] .nch-joker-sheen {
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(176, 196, 222, 0.06) 44%,
    rgba(176, 196, 222, 0.12) 50%,
    rgba(176, 196, 222, 0.06) 56%,
    transparent 65%, transparent 100%
  );
  background-size: 250% 100%;
}

/* Amber: glow #ffb000 → tint dark bronze #2a1a00 */
.nch-overlay-joker[data-theme-id="amber"] {
  filter: drop-shadow(0 0 2px rgba(255, 176, 0, 0.5))
          drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}
.nch-overlay-joker[data-theme-id="amber"] .nch-joker-tint {
  background: #2a1a00;
}
.nch-overlay-joker[data-theme-id="amber"] .nch-joker-sheen {
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(255, 200, 80, 0.06) 44%,
    rgba(255, 200, 80, 0.12) 50%,
    rgba(255, 200, 80, 0.06) 56%,
    transparent 65%, transparent 100%
  );
  background-size: 250% 100%;
}

/* Phosphor: glow #33ff33 → tint dark forest #0a2a0a */
.nch-overlay-joker[data-theme-id="phosphor"] {
  filter: drop-shadow(0 0 2px rgba(51, 255, 51, 0.5))
          drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}
.nch-overlay-joker[data-theme-id="phosphor"] .nch-joker-tint {
  background: #0a2a0a;
}
.nch-overlay-joker[data-theme-id="phosphor"] .nch-joker-sheen {
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(51, 255, 51, 0.06) 44%,
    rgba(51, 255, 51, 0.12) 50%,
    rgba(51, 255, 51, 0.06) 56%,
    transparent 65%, transparent 100%
  );
  background-size: 250% 100%;
}

/* Panther: glow #ff3090 → tint dark plum #2a0a18 */
.nch-overlay-joker[data-theme-id="panther"] {
  filter: drop-shadow(0 0 2px rgba(255, 48, 144, 0.5))
          drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}
.nch-overlay-joker[data-theme-id="panther"] .nch-joker-tint {
  background: #2a0a18;
}
.nch-overlay-joker[data-theme-id="panther"] .nch-joker-sheen {
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 35%,
    rgba(255, 48, 144, 0.06) 44%,
    rgba(255, 48, 144, 0.12) 50%,
    rgba(255, 48, 144, 0.06) 56%,
    transparent 65%, transparent 100%
  );
  background-size: 250% 100%;
}

/* Hover boost — tint darkens slightly more when fan expands */
.nch-overlay-wrapper:hover .nch-joker-tint {
  opacity: 0.30;
}

/* Greyed joker (reusable — matches NCH BLVCK treatment) */
.nch-overlay-joker.nch-overlay-greyed {
  filter: grayscale(1) brightness(0.5) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7)) !important;
  opacity: 0.55;
}
.nch-overlay-joker.nch-overlay-greyed .nch-joker-tint,
.nch-overlay-joker.nch-overlay-greyed .nch-joker-sheen {
  opacity: 0 !important;
}

/* ── 3b. CAPSULE ↔ FAN MORPH TRANSITION ───────────────────
   Fan opens:  capsule zooms toward screen center along a
               bezier, crossfading into the card fan.
   Fan closes: cards zoom out, crossfade back to capsule
               which curves home to its last-known position.
   Positions are dynamic (capsule is draggable) so the actual
   translate values are set via JS inline style — CSS only
   provides the transition timing + easing.                   */

/* Transition-ready state: JS sets transform + opacity inline,
   this class enables the smooth interpolation between them.  */
.nch-overlay-wrapper.nch-capsule-morphing {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.25s ease;
  pointer-events: none;
}

/* Fan panel also gets a morph-aware transition for crossfade */
.nch-porthole-fan.nch-fan-morphing {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Entry state: fan starts scaled down + transparent for the zoom-in */
.nch-porthole-fan.nch-fan-morph-enter {
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
}

/* Active state: fan fully visible at normal scale */
.nch-porthole-fan.nch-fan-morph-enter.nch-fan-active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Exit state: fan zooms out + fades */
.nch-porthole-fan.nch-fan-morph-exit {
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
}

/* ── 3c. CARD DRAG-TO-REORDER (Phase 4) ───────────────────
   Ghost floats above everything with live porthole.
   Placeholder holds the insertion gap with a dashed border.
   Dragging card is hidden in-flow while ghost tracks pointer.  */

/* Ghost uses .coin-card-ghost from splash-screen.css (same class,
   same visual treatment, same live-porthole starfield blit).
   Placeholder uses .splash-card-placeholder from splash-screen.css
   (dashed border, theme-colored fill, smooth collapse animation). */

/* Original card removed from flow while being dragged.
   display:none matches splash-screen's .coin-card-dragging —
   the splash-card-placeholder alone holds the slot. */
.nch-fan-card-dragging {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   4. PORTHOLE FAN PANEL
   Floating coin-card fan — NO backdrop, NO overlay.
   Page content stays fully visible and readable underneath.
   Only the cards and close button capture pointer events.
   Reuses .splash-dossier.coin-card + .splash-card-fan from
   splash-screen.css for card internals.
   ════════════════════════════════════════════════════════════ */

.nch-porthole-fan {
  position: fixed;
  /* Vertically center the fan, matching splash-screen alignment */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1900;
  /* Pass-through: page stays interactive everywhere
     except on the cards and close button themselves */
  pointer-events: none;
  /* Entrance animation */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nch-porthole-fan.nch-fan-active {
  opacity: 1;
}

/* Close button — floats above the card row */
.nch-fan-close-btn {
  position: absolute;
  top: -36px;
  right: 0;
  z-index: 3;
  appearance: none;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(28, 255, 155, 0.35);
  color: rgba(28, 255, 155, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s;
  pointer-events: auto;
}

.nch-fan-close-btn:hover {
  background: rgba(28, 255, 155, 0.12);
  border-color: rgba(28, 255, 155, 0.8);
  color: rgba(28, 255, 155, 0.95);
}

/* Card fan container — inherits flex layout from splash-screen.css.
   Re-enable pointer-events on the cards themselves.
   Override splash-screen.css's initial opacity:0 + delayed animation
   so the fan is visible immediately when the panel appears.
   ALL card dimensions, transforms, nth-child spreads, hover scales,
   and grid layouts are inherited from splash-screen.css (canon). */
.nch-porthole-fan .splash-card-fan,
.nch-porthole-fan .splash-card-fan.splash-fan-exit {
  pointer-events: auto;
  /* Override splash-screen.css defaults that fight the NCH fan on terminal page */
  opacity: 1 !important;
  animation: none !important;
  position: relative;
  z-index: auto;        /* neutralize splash's z-index:10 — nch-porthole-fan handles stacking */
  transform: none;      /* prevent splash exit transforms leaking */
  transition: none;     /* no delayed transitions from splash entrance/exit */
}

/* ── 5. RESPONSIVE ──────────────────────────────────────────
   Mobile: smaller capsule, safe-area aware, fan at bottom.    */

@media (max-width: 768px) {
  .nch-overlay-wrapper {
    bottom: calc(40px + env(safe-area-inset-bottom));
    right: 10px;
  }

  .nch-porthole-fan {
    /* Keep vertically centered on mobile too */
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  /* Match splash-screen fan layout properties that the NCH fan
     container needs (splash-screen.css applies these to .splash-card-fan
     which the NCH fan inherits, but perspective + preserve-3d need
     to be on the container for the stacked card transforms to work) */
  .nch-porthole-fan .splash-card-fan {
    padding-top: 38px;
  }

  .nch-fan-close-btn {
    top: -32px;
    right: -4px;
  }

  /* Card dimensions and grid layout inherited from splash-screen.css.
     Stacking transforms overridden here to fix 3D clipping: the
     rotateY(-8deg) from splash-screen causes z-fighting when cards
     are stacked vertically and the user interacts with them.
     NCH flattens the Y rotation while keeping the vertical cascade. */

  .nch-porthole-fan .splash-card-fan {
    perspective: 900px;
    transform-style: flat;  /* z-index takes priority over 3D depth */
  }

  .nch-porthole-fan .splash-dossier.coin-card:nth-child(1) {
    transform: perspective(800px) rotateX(2deg) translateZ(0px);
    z-index: 4;
  }
  .nch-porthole-fan .splash-dossier.coin-card:nth-child(2) {
    transform: perspective(800px) rotateX(2deg) translateY(-10px) translateX(6px);
    z-index: 3;
  }
  .nch-porthole-fan .splash-dossier.coin-card:nth-child(3) {
    transform: perspective(800px) rotateX(2deg) translateY(-20px) translateX(12px);
    z-index: 2;
  }
  .nch-porthole-fan .splash-dossier.coin-card:nth-child(4) {
    transform: perspective(800px) rotateX(2deg) translateY(-30px) translateX(18px);
    z-index: 1;
  }
  .nch-porthole-fan .splash-dossier.coin-card.coin-card-hovered {
    transform: perspective(800px) rotateX(1deg) translateY(-15px) translateX(0px) scale(1.03) !important;
    z-index: 10 !important;
  }
}

/* ── 8. PUZZLE BADGE (Phase 7) ─────────────────────────────
   Clue count badge on joker stack capsule.
   Shows number of found clues; checkmark when all solved.     */

.nch-puzzle-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--eo-primary, #33ff33);
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  z-index: 1810;
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.5);
  animation: nch-badge-pop 0.3s ease-out;
}

.nch-puzzle-badge-complete {
  background: #ffb000;
  color: #000;
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.6);
}

@keyframes nch-badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* ============================================================
   Phase 8 — Per-Theme Porthole Lens Effects
   ============================================================
   Each card uses a visually distinct lens technology to achieve
   its porthole effect, reinforcing the fiction that each card is
   a different piece of spy equipment.

   Card → Theme → Lens technology:
     silver  / ♠  → Fine glass aperture (clean lines, iris blades)
     amber   / ♣  → Warm neon glow ring (box-shadow tender-dolphin-38)
     phosphor/ ♥  → Vortex pull (concentric rings collapsing inward)
     panther / ♦  → Spinning gradient halo (conic-gradient rotation + hue cycle)

   All lenses share the same base positioning and keep the sky
   interior completely clear. The visual difference is in border,
   box-shadow, background (edge-only), and animation.
   ============================================================ */

/* ── Shared base ───────────────────────────────────────── */
.porthole-lens-overlay {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  background: transparent;
  border: 1.5px solid transparent;
  --ring-vel: 1;   /* JS-driven velocity brightness multiplier */
}

/* ---- Idle: very subdued hint of lens technology (no animation, minimal GPU) ---- */
.porthole-lens-overlay.lens-idle {
  opacity: 0.25;
}

/* ---- Active: full lens during drag ---- */
.porthole-lens-overlay.lens-active {
  opacity: 1;
}

/* Interaction pulse (JS toggles .ring-pulse on snap events) */
.porthole-lens-overlay.ring-pulse {
  animation: ring-flare 0.4s ease-out forwards !important;
}

@keyframes ring-flare {
  0%   { filter: brightness(calc(1.5 * var(--ring-vel))); transform: translate(-50%, -50%) scale(1.03); }
  100% { filter: brightness(calc(1.0 * var(--ring-vel))); transform: translate(-50%, -50%) scale(1.00); }
}


/* ════════════════════════════════════════════════════════
   SILVER / ♠ — Fine Glass Aperture Lens
   ════════════════════════════════════════════════════════
   Clean, precise, mechanical. Multiple fine concentric ring
   lines via stacked box-shadows — no pseudo-elements
   (clipped by overflow:hidden on .coin-artwork).
   Per PORTHOLE_PUZZLE_TOOLKIT §3: box-shadow only. */

.porthole-lens-overlay.lens-silver {
  border: 1px solid rgba(200, 215, 235, 0.45);
  box-shadow:
    /* Fine inner rings — like machined glass lines */
    inset 0 0 1px  rgba(220, 230, 245, 0.50),
    inset 0 0 4px  rgba(200, 215, 235, 0.25),
    inset 0 0 8px  rgba(176, 196, 222, 0.12),
    /* Outer crisp ring line */
    0 0 1px  rgba(220, 230, 245, 0.50),
    0 0 3px  rgba(200, 215, 235, 0.30),
    0 0 8px  rgba(176, 196, 222, 0.15);
}

.porthole-lens-overlay.lens-silver.lens-active {
  animation: silver-breathe 4s ease-in-out infinite;
}

@keyframes silver-breathe {
  0%   { opacity: 0.55;
         box-shadow: inset 0 0 1px rgba(220,230,245,0.50), inset 0 0 4px rgba(200,215,235,0.25),
                     inset 0 0 8px rgba(176,196,222,0.12), 0 0 1px rgba(220,230,245,0.50),
                     0 0 3px rgba(200,215,235,0.30), 0 0 8px rgba(176,196,222,0.15); }
  50%  { opacity: 0.9;
         box-shadow: inset 0 0 2px rgba(220,230,245,0.60), inset 0 0 6px rgba(200,215,235,0.35),
                     inset 0 0 12px rgba(176,196,222,0.18), 0 0 2px rgba(220,230,245,0.60),
                     0 0 5px rgba(200,215,235,0.40), 0 0 12px rgba(176,196,222,0.20); }
  100% { opacity: 0.55;
         box-shadow: inset 0 0 1px rgba(220,230,245,0.50), inset 0 0 4px rgba(200,215,235,0.25),
                     inset 0 0 8px rgba(176,196,222,0.12), 0 0 1px rgba(220,230,245,0.50),
                     0 0 3px rgba(200,215,235,0.30), 0 0 8px rgba(176,196,222,0.15); }
}

.porthole-lens-overlay.lens-silver.lens-active.lens-tracing {
  animation: silver-trace 2.5s ease-in-out infinite;
}

@keyframes silver-trace {
  0%   { opacity: 0.65;
         box-shadow: inset 0 0 2px rgba(220,230,245,0.55), inset 0 0 5px rgba(200,215,235,0.30),
                     inset 0 0 10px rgba(176,196,222,0.15), 0 0 2px rgba(220,230,245,0.55),
                     0 0 4px rgba(200,215,235,0.35), 0 0 10px rgba(176,196,222,0.18); }
  50%  { opacity: 1.0;
         box-shadow: inset 0 0 3px rgba(220,230,245,0.70), inset 0 0 8px rgba(200,215,235,0.40),
                     inset 0 0 14px rgba(176,196,222,0.22), 0 0 3px rgba(220,230,245,0.70),
                     0 0 7px rgba(200,215,235,0.48), 0 0 16px rgba(176,196,222,0.25); }
  100% { opacity: 0.65;
         box-shadow: inset 0 0 2px rgba(220,230,245,0.55), inset 0 0 5px rgba(200,215,235,0.30),
                     inset 0 0 10px rgba(176,196,222,0.15), 0 0 2px rgba(220,230,245,0.55),
                     0 0 4px rgba(200,215,235,0.35), 0 0 10px rgba(176,196,222,0.18); }
}


/* ════════════════════════════════════════════════════════
   AMBER / ♣ — Warm Neon Glow Ring (Gold Lens)
   ════════════════════════════════════════════════════════
   Warm complementary blue ring with multi-layer box-shadow.
   Larger pulse, more dramatic. Primary constellation lens. */

.porthole-lens-overlay.lens-blue {
  border-color: rgba(80, 140, 255, 0.4);
  box-shadow:
    inset 0 0 12px rgba(80, 140, 255, 0.28),
    inset 0 0 28px rgba(60, 120, 220, 0.12),
    0 0 10px  rgba(80, 140, 255, 0.35),
    0 0 24px  rgba(60, 120, 220, 0.18),
    0 0 50px  rgba(40, 80, 180, 0.08);
}

.porthole-lens-overlay.lens-blue.lens-active {
  animation: blue-breathe 3s ease-in-out infinite;
}

@keyframes blue-breathe {
  0%   { opacity: 0.7;
         box-shadow: inset 0 0 12px rgba(80,140,255,0.28), inset 0 0 28px rgba(60,120,220,0.12),
                     0 0 10px rgba(80,140,255,0.35), 0 0 24px rgba(60,120,220,0.18), 0 0 50px rgba(40,80,180,0.08); }
  50%  { opacity: 1.0;
         box-shadow: inset 0 0 16px rgba(80,140,255,0.35), inset 0 0 32px rgba(60,120,220,0.18),
                     0 0 14px rgba(80,140,255,0.42), 0 0 32px rgba(60,120,220,0.22), 0 0 60px rgba(40,80,180,0.12); }
  100% { opacity: 0.7;
         box-shadow: inset 0 0 12px rgba(80,140,255,0.28), inset 0 0 28px rgba(60,120,220,0.12),
                     0 0 10px rgba(80,140,255,0.35), 0 0 24px rgba(60,120,220,0.18), 0 0 50px rgba(40,80,180,0.08); }
}

.porthole-lens-overlay.lens-blue.lens-active.lens-tracing {
  animation: blue-trace 1.8s ease-in-out infinite;
}

@keyframes blue-trace {
  0%   { opacity: 0.75;
         box-shadow: inset 0 0 14px rgba(80,140,255,0.32), inset 0 0 30px rgba(60,120,220,0.15),
                     0 0 12px rgba(80,140,255,0.38), 0 0 28px rgba(60,120,220,0.20), 0 0 55px rgba(40,80,180,0.10); }
  50%  { opacity: 1.0;
         box-shadow: inset 0 0 20px rgba(80,140,255,0.42), inset 0 0 36px rgba(60,120,220,0.22),
                     0 0 18px rgba(80,140,255,0.50), 0 0 38px rgba(60,120,220,0.28), 0 0 70px rgba(40,80,180,0.15); }
  100% { opacity: 0.75;
         box-shadow: inset 0 0 14px rgba(80,140,255,0.32), inset 0 0 30px rgba(60,120,220,0.15),
                     0 0 12px rgba(80,140,255,0.38), 0 0 28px rgba(60,120,220,0.20), 0 0 55px rgba(40,80,180,0.10); }
}


/* ════════════════════════════════════════════════════════
   PHOSPHOR / ♥ — Vortex Pull (Black Hole)
   ════════════════════════════════════════════════════════
   Animated inset box-shadow that pulses inward, creating
   the illusion of concentric rings collapsing toward center.
   No pseudo-elements — pure box-shadow animation.
   Green phosphor (#33ff33) at moderate opacity. */

.porthole-lens-overlay.lens-amber {
  border: 1.5px solid rgba(51, 255, 51, 0.30);
  box-shadow:
    inset 0 0 6px  rgba(51, 255, 51, 0.20),
    inset 0 0 14px rgba(51, 255, 51, 0.10),
    0 0 6px  rgba(51, 255, 51, 0.25),
    0 0 14px rgba(51, 255, 51, 0.12);
}

.porthole-lens-overlay.lens-amber.lens-active {
  animation: vortex-pull 2.5s ease-in-out infinite;
}

@keyframes vortex-pull {
  0%   { opacity: 0.6;
         border-color: rgba(51, 255, 51, 0.30);
         box-shadow: inset 0 0 6px rgba(51,255,51,0.20), inset 0 0 14px rgba(51,255,51,0.10),
                     0 0 6px rgba(51,255,51,0.25), 0 0 14px rgba(51,255,51,0.12); }
  35%  { opacity: 1.0;
         border-color: rgba(51, 255, 51, 0.50);
         box-shadow: inset 0 0 12px rgba(51,255,51,0.35), inset 0 0 24px rgba(51,255,51,0.18),
                     inset 0 0 40px rgba(51,255,51,0.06),
                     0 0 8px rgba(51,255,51,0.35), 0 0 20px rgba(51,255,51,0.18); }
  70%  { opacity: 0.8;
         border-color: rgba(51, 255, 51, 0.20);
         box-shadow: inset 0 0 20px rgba(51,255,51,0.28), inset 0 0 36px rgba(51,255,51,0.12),
                     inset 0 0 50px rgba(51,255,51,0.04),
                     0 0 4px rgba(51,255,51,0.15), 0 0 10px rgba(51,255,51,0.08); }
  100% { opacity: 0.6;
         border-color: rgba(51, 255, 51, 0.30);
         box-shadow: inset 0 0 6px rgba(51,255,51,0.20), inset 0 0 14px rgba(51,255,51,0.10),
                     0 0 6px rgba(51,255,51,0.25), 0 0 14px rgba(51,255,51,0.12); }
}

.porthole-lens-overlay.lens-amber.lens-active.lens-tracing {
  animation: vortex-trace 1.6s ease-in-out infinite;
}

@keyframes vortex-trace {
  0%   { opacity: 0.7;
         box-shadow: inset 0 0 10px rgba(51,255,51,0.30), inset 0 0 20px rgba(51,255,51,0.15),
                     0 0 8px rgba(51,255,51,0.30), 0 0 18px rgba(51,255,51,0.15); }
  50%  { opacity: 1.0;
         box-shadow: inset 0 0 18px rgba(51,255,51,0.45), inset 0 0 32px rgba(51,255,51,0.22),
                     inset 0 0 48px rgba(51,255,51,0.08),
                     0 0 12px rgba(51,255,51,0.40), 0 0 28px rgba(51,255,51,0.22); }
  100% { opacity: 0.7;
         box-shadow: inset 0 0 10px rgba(51,255,51,0.30), inset 0 0 20px rgba(51,255,51,0.15),
                     0 0 8px rgba(51,255,51,0.30), 0 0 18px rgba(51,255,51,0.15); }
}


/* ════════════════════════════════════════════════════════
   PANTHER / ♦ — Spinning Neon Halo
   ════════════════════════════════════════════════════════
   Rotating border + multi-color box-shadow that cycles hues.
   No mask-image, no conic-gradient background (both cause
   stacking context issues inside overflow:hidden artwork).
   Uses border-color animation + box-shadow color shifts. */

.porthole-lens-overlay.lens-pink {
  border: 2px solid rgba(255, 48, 144, 0.50);
  box-shadow:
    inset 0 0 10px rgba(255, 48, 144, 0.25),
    inset 0 0 24px rgba(160, 32, 240, 0.10),
    0 0 8px  rgba(255, 48, 144, 0.35),
    0 0 20px rgba(160, 32, 240, 0.18),
    0 0 40px rgba(0, 200, 255, 0.06);
}

.porthole-lens-overlay.lens-pink.lens-active {
  animation: panther-cycle 3s linear infinite;
}

@keyframes panther-cycle {
  0%   { opacity: 0.8;
         border-color: rgba(255, 48, 144, 0.55);
         box-shadow: inset 0 0 10px rgba(255,48,144,0.28), inset 0 0 24px rgba(160,32,240,0.12),
                     0 0 8px rgba(255,48,144,0.38), 0 0 22px rgba(160,32,240,0.20), 0 0 44px rgba(0,200,255,0.08); }
  25%  { opacity: 1.0;
         border-color: rgba(160, 32, 240, 0.55);
         box-shadow: inset 0 0 10px rgba(160,32,240,0.28), inset 0 0 24px rgba(0,200,255,0.12),
                     0 0 8px rgba(160,32,240,0.38), 0 0 22px rgba(0,200,255,0.20), 0 0 44px rgba(51,255,51,0.08); }
  50%  { opacity: 0.85;
         border-color: rgba(0, 200, 255, 0.55);
         box-shadow: inset 0 0 10px rgba(0,200,255,0.28), inset 0 0 24px rgba(51,255,51,0.10),
                     0 0 8px rgba(0,200,255,0.38), 0 0 22px rgba(51,255,51,0.18), 0 0 44px rgba(255,176,0,0.08); }
  75%  { opacity: 1.0;
         border-color: rgba(255, 176, 0, 0.55);
         box-shadow: inset 0 0 10px rgba(255,176,0,0.28), inset 0 0 24px rgba(255,48,144,0.12),
                     0 0 8px rgba(255,176,0,0.38), 0 0 22px rgba(255,48,144,0.20), 0 0 44px rgba(160,32,240,0.08); }
  100% { opacity: 0.8;
         border-color: rgba(255, 48, 144, 0.55);
         box-shadow: inset 0 0 10px rgba(255,48,144,0.28), inset 0 0 24px rgba(160,32,240,0.12),
                     0 0 8px rgba(255,48,144,0.38), 0 0 22px rgba(160,32,240,0.20), 0 0 44px rgba(0,200,255,0.08); }
}

.porthole-lens-overlay.lens-pink.lens-active.lens-tracing {
  animation: panther-trace-cycle 1.8s linear infinite;
}

@keyframes panther-trace-cycle {
  0%   { opacity: 0.85;
         border-color: rgba(255, 48, 144, 0.65);
         box-shadow: inset 0 0 14px rgba(255,48,144,0.35), inset 0 0 28px rgba(160,32,240,0.16),
                     0 0 12px rgba(255,48,144,0.45), 0 0 28px rgba(160,32,240,0.25), 0 0 50px rgba(0,200,255,0.10); }
  33%  { opacity: 1.0;
         border-color: rgba(160, 32, 240, 0.65);
         box-shadow: inset 0 0 14px rgba(160,32,240,0.35), inset 0 0 28px rgba(0,200,255,0.16),
                     0 0 12px rgba(160,32,240,0.45), 0 0 28px rgba(0,200,255,0.25), 0 0 50px rgba(51,255,51,0.10); }
  66%  { opacity: 1.0;
         border-color: rgba(0, 200, 255, 0.65);
         box-shadow: inset 0 0 14px rgba(0,200,255,0.35), inset 0 0 28px rgba(255,48,144,0.16),
                     0 0 12px rgba(0,200,255,0.45), 0 0 28px rgba(255,48,144,0.25), 0 0 50px rgba(255,176,0,0.10); }
  100% { opacity: 0.85;
         border-color: rgba(255, 48, 144, 0.65);
         box-shadow: inset 0 0 14px rgba(255,48,144,0.35), inset 0 0 28px rgba(160,32,240,0.16),
                     0 0 12px rgba(255,48,144,0.45), 0 0 28px rgba(160,32,240,0.25), 0 0 50px rgba(0,200,255,0.10); }
}


/* ============================================================
   Porthole Size Boost During Drag
   ============================================================
   When any card is being dragged:
     - Ghost card's porthole renders 35% larger (magnifying glass feel)
     - All resting cards' portholes grow 15% (sky opens up)
   Controlled by .nch-drag-active on the fan container. */

/* Ghost porthole: 35% larger */
.coin-card-ghost .starfield-window,
.coin-card-ghost .porthole-lens-overlay {
  transition: transform 0.3s ease-out;
  transform-origin: center center;
}
.coin-card-ghost .starfield-window {
  transform: scale(1.35);
}
.coin-card-ghost .porthole-lens-overlay {
  transform: translate(-50%, -50%) scale(1.35);
}

/* Resting cards: portholes grow 15% when any drag is active */
.nch-drag-active .splash-dossier:not(.nch-fan-card-dragging) .starfield-window,
.nch-drag-active .splash-dossier:not(.coin-card-dragging) .starfield-window {
  transition: transform 0.35s ease-out;
  transform: scale(1.15);
}
.nch-drag-active .splash-dossier:not(.nch-fan-card-dragging) .porthole-lens-overlay,
.nch-drag-active .splash-dossier:not(.coin-card-dragging) .porthole-lens-overlay {
  transition: transform 0.35s ease-out;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Reset when drag ends (transition handles the shrink-back) */
.starfield-window {
  transition: transform 0.3s ease-out;
}
.porthole-lens-overlay {
  transition: opacity 0.35s ease-out, transform 0.3s ease-out;
}


/* ============================================================
   Phase 8 — Suit Symbol Flicker-Off During Drag
   ============================================================
   When a card is being dragged (constellation tracing active),
   the large suit symbol flickers then goes nearly invisible so
   the porthole sky is unobstructed. On drag end, it flickers
   back in. */

/* Flicker-out: rapid opacity stutter → settle at near-invisible */
.coin-suit-large.suit-flicker-off {
  animation: suit-flicker-out 0.25s steps(6) forwards;
  pointer-events: none;
}

@keyframes suit-flicker-out {
  0%   { opacity: 1;    }
  15%  { opacity: 0.1;  }
  30%  { opacity: 0.6;  }
  45%  { opacity: 0.05; }
  60%  { opacity: 0.35; }
  75%  { opacity: 0.02; }
  100% { opacity: 0.04; }
}

/* Hold state: nearly invisible while dragging */
.coin-suit-large.suit-dimmed {
  opacity: 0.04 !important;
  animation: none;
  transition: opacity 0.1s;
}

/* Flicker-in: reverse on drag end */
.coin-suit-large.suit-flicker-in {
  animation: suit-flicker-in 0.2s steps(5) forwards;
}

@keyframes suit-flicker-in {
  0%   { opacity: 0.04; }
  20%  { opacity: 0.5;  }
  40%  { opacity: 0.1;  }
  60%  { opacity: 0.7;  }
  80%  { opacity: 0.3;  }
  100% { opacity: 1;    }
}