/* ============================================================
   Splash Screen — Mission Select Landing Page
   Phase 5: Metallic coin-card dossiers with decoder-ring wheels,
   card-suit branding, brass/gold aesthetic.
   ============================================================ */

/* ---- Full-screen overlay ---- */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: default;
}

#splash-screen.splash-hidden {
  display: none;
}

/* ==============================================================
   ATMOSPHERIC BACKGROUND — Zero-network CSS fallback
   Renders instantly when video is unavailable or loading.
   Video layer composites on top when it arrives.
   ============================================================== */
.splash-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Base: dark teal-to-black gradient (Lake Pend Oreille palette) */
.splash-atmo-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 100% at 50% 40%,
    #0a1f1a 0%,
    #060e09 35%,
    #020504 70%,
    #000 100%
  );
}

/* Slow-moving fog banks (two offset layers) */
.splash-atmo-fog {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(28, 60, 50, 0.15), transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 55%, rgba(20, 50, 45, 0.12), transparent 65%);
  animation: atmo-fog-drift 30s ease-in-out infinite alternate;
}

@keyframes atmo-fog-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -3%) scale(1.05); }
}

/* Subtle noise texture (CSS-generated static grain) */
.splash-atmo-noise {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Faint moonlight/spotlight cone from upper right */
.splash-atmo-light {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 210, 220, 0.04) 0%,
    transparent 60%
  );
  animation: atmo-light-pulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes atmo-light-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* Slow horizontal treeline/mountain silhouette at bottom */
.splash-atmo-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(0deg, #000 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* Treeline polygon — dark jagged horizon */
.splash-atmo-horizon::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 60%;
  background: #000;
  clip-path: polygon(
    0% 100%, 0% 65%, 3% 58%, 6% 62%, 9% 50%, 12% 55%,
    16% 42%, 19% 48%, 22% 38%, 26% 44%, 29% 35%, 33% 40%,
    36% 30%, 40% 38%, 44% 28%, 47% 35%, 50% 25%, 53% 32%,
    56% 22%, 60% 30%, 63% 20%, 67% 28%, 70% 18%, 73% 25%,
    77% 32%, 80% 22%, 83% 30%, 86% 20%, 89% 28%, 92% 35%,
    95% 25%, 98% 38%, 100% 30%, 100% 100%
  );
  opacity: 0.85;
}

/* ---- Shared starfield master canvas (off-screen render target) ----
   Full-screen but hidden — each card's .starfield-window blits its
   screen-space region from this canvas every frame. */
.starfield-master {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;  /* invisible — only rendered through card portholes */
}

/* ---- Background video layer (composites OVER atmosphere) ---- */
.splash-video-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.splash-video-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.splash-video-layer video.splash-video-active {
  opacity: 1;
}

/* Subtle vignette on video — keeps depth without darkening the footage */
.splash-video-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: 2;
  pointer-events: none;
}


/* ==============================================================
   CSS-ONLY SPY SILHOUETTES — Fallback when PNG images unavailable
   clip-path silhouette shapes animate from bottom on card-select.
   The real PNG images composite over these when loaded.
   ============================================================== */
.splash-sil-css {
  position: absolute;
  bottom: -105%;
  width: 38vw;
  height: 110vh;
  z-index: 100;
  pointer-events: none;
  opacity: 0;            /* start invisible — revealed only if PNGs fail */
  transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
              opacity 0.15s ease;
}

/* CSS fallbacks activated (PNGs didn't load in time) */
.splash-sil-css.splash-sil-css-needed {
  opacity: 1;
}

/* Spy silhouette shape 1 — standing with hat brim */
.splash-sil-css-a {
  left: 8%;
  background: #000;
  clip-path: polygon(
    42% 0%, 58% 0%, 60% 2%, 62% 2%, 64% 4%, 64% 6%,
    62% 8%, 60% 8%, 58% 10%, 58% 12%, 56% 15%, 56% 20%,
    60% 22%, 62% 25%, 64% 30%, 65% 35%, 66% 50%,
    68% 55%, 70% 65%, 72% 80%, 70% 85%, 68% 100%,
    32% 100%, 30% 85%, 28% 80%, 30% 65%, 32% 55%,
    34% 50%, 35% 35%, 36% 30%, 38% 25%, 40% 22%,
    44% 20%, 44% 15%, 42% 12%, 42% 10%, 40% 8%,
    38% 8%, 36% 6%, 36% 4%, 38% 2%, 40% 2%
  );
  transition-delay: 0s, 0.25s;
}

/* Spy silhouette shape 2 — trench coat profile */
.splash-sil-css-b {
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  clip-path: polygon(
    45% 0%, 55% 0%, 57% 3%, 58% 8%, 57% 12%,
    56% 15%, 55% 18%, 58% 20%, 62% 24%, 64% 30%,
    65% 40%, 66% 50%, 74% 65%, 76% 80%, 74% 100%,
    26% 100%, 24% 80%, 26% 65%, 34% 50%, 35% 40%,
    36% 30%, 38% 24%, 42% 20%, 45% 18%, 44% 15%,
    43% 12%, 42% 8%, 43% 3%
  );
  transition-delay: 0.06s, 0.3s;
}

/* Spy silhouette shape 3 — gun drawn pose */
.splash-sil-css-c {
  right: 8%;
  background: #000;
  clip-path: polygon(
    44% 0%, 56% 0%, 58% 4%, 58% 10%, 56% 14%,
    55% 18%, 58% 20%, 60% 22%, 72% 28%, 78% 30%,
    80% 32%, 78% 34%, 68% 34%, 62% 32%, 60% 35%,
    62% 45%, 64% 55%, 66% 70%, 68% 85%, 66% 100%,
    34% 100%, 32% 85%, 34% 70%, 36% 55%, 38% 45%,
    40% 35%, 38% 28%, 42% 22%, 45% 20%, 44% 18%,
    42% 14%, 42% 10%, 42% 4%
  );
  transition-delay: 0.1s, 0.35s;
}

/* Active: CSS silhouettes rise + zoom (mirrors PNG animation) */
.splash-silhouettes.splash-sil-active .splash-sil-css {
  bottom: 0%;
  transform: scale(4.5);
}

.splash-silhouettes.splash-sil-active .splash-sil-css-b {
  bottom: 0%;
  transform: translateX(-50%) scale(4.5);
}

/* Hide CSS shapes once real PNG images have loaded */
.splash-sil-css.splash-sil-img-loaded {
  display: none;
}

/* ---- Atmospheric particles (subtle) ---- */
.splash-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.splash-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: splash-float linear infinite;
}

@keyframes splash-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(-10vh) translateX(30px);
    opacity: 0;
  }
}

/* ---- Close button (red terminal icon) ---- */
.splash-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 500;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid rgba(220, 40, 40, 0.6);
  background: rgba(180, 30, 30, 0.85);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 12px rgba(180, 30, 30, 0.4), 0 0 6px rgba(220, 40, 40, 0.2);
  backdrop-filter: blur(4px);
}

.splash-close-btn:hover {
  background: rgba(200, 35, 35, 0.95);
  border-color: rgba(255, 60, 60, 0.8);
  transform: scale(1.06);
  box-shadow: 0 2px 18px rgba(220, 40, 40, 0.5), 0 0 10px rgba(255, 60, 60, 0.3);
}

.splash-close-btn:active,
.splash-close-btn.splash-close-pressed {
  background: rgba(100, 15, 15, 0.95);
  border-color: rgba(140, 20, 20, 0.8);
  transform: scale(0.95);
  box-shadow: 0 1px 6px rgba(100, 15, 15, 0.4);
}

.splash-close-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255, 200, 200, 0.4));
}

/* ---- Title header ---- */
.splash-header {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  opacity: 0;
  animation: splash-header-in 1s ease-out 0.3s forwards;
  transition: opacity 0.35s ease;
}

.splash-header.splash-fan-exit,
.splash-prompt.splash-fan-exit {
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes splash-header-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.splash-title {
  font-family: 'Courier New', monospace;
  font-size: clamp(18px, 3.5vw, 36px);
  font-weight: bold;
  color: rgba(220, 200, 140, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-shadow:
    0 1px 0 rgba(60, 50, 25, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(180, 160, 80, 0.15);
  margin-bottom: 8px;
}

.splash-subtitle {
  font-family: 'Courier New', monospace;
  font-size: clamp(11px, 1.8vw, 16px);
  color: rgba(160, 160, 170, 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---- Card fan container (DESKTOP: horizontal overlap) ---- */
.splash-card-fan {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  /* No parent perspective — each card uses perspective() in its own transform
     so cards have independent vanishing points for the fan spread */
  margin-top: 4vh;
  opacity: 0;
  animation: splash-fan-in 1.8s ease-out 1.0s forwards;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

.splash-card-fan.splash-fan-exit {
  opacity: 0 !important;
  transform: scale(0.9) translateY(30px);
  pointer-events: none;
}

@keyframes splash-fan-in {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==============================================================
   COIN-CARD — Metallic Commemorative Coin Aesthetic
   Brass borders, embossed text, gold gradients, metallic sheen
   ============================================================== */

/* ---- 3D Card Foundation ----
   preserve-3d enables future Three.js canvas overlay
   and immediate CSS tilt/flip/parallax effects.
   The coin-border-outer is the "front face";
   .coin-card-back is the backface (added by JS when needed).
   ---------------------------------------------------------- */
.splash-dossier.coin-card {
  position: relative;
  width: clamp(210px, 22vw, 290px);
  height: clamp(340px, 38vw, 480px);
  border-radius: 16px;
  overflow: visible;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              filter 0.3s ease;
  transform-style: flat;
  will-change: transform;
  border: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}

/* Visible card edge — creates the 3D thickness when tilted.
   translateZ pushes it behind the front face by the "thickness" amount. */
.splash-dossier.coin-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--theme-face-gradient);
  transform: translateZ(-8px);
  /* z-index: -1 paints this BEHIND the card content.
     Without it, transform creates a stacking context at effective z-index 0
     which — being later in DOM order than the starfield canvas (also z-index 0) —
     covers the porthole with the opaque theme gradient. */
  z-index: -1;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Backface — hidden by default, revealed by rotateY(180deg) on select */
.coin-card-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  background: var(--theme-face-back);
  background-image:
    radial-gradient(circle at 50% 50%, var(--theme-primary-glow) 0%, transparent 60%),
    repeating-conic-gradient(from 0deg, var(--theme-ring-tint) 0deg, transparent 3deg, transparent 12deg);
  border: 3px solid var(--theme-btn-border);
  overflow: hidden;
}

/* (WebGL 3D mode removed — coin depth now achieved via CSS transform-style: preserve-3d) */

/* Desktop fan angles — 4-card spread with 3D tilt to show thickness */
.splash-dossier.coin-card:nth-child(1) {
  transform: perspective(800px) rotate(-16deg) rotateX(6deg) rotateY(8deg) translateY(25px);
  z-index: 1;
}
.splash-dossier.coin-card:nth-child(2) {
  transform: perspective(800px) rotate(-5deg) rotateX(5deg) rotateY(3deg) translateY(-5px);
  z-index: 2;
  margin: 0 -25px;
}
.splash-dossier.coin-card:nth-child(3) {
  transform: perspective(800px) rotate(5deg) rotateX(5deg) rotateY(-3deg) translateY(-5px);
  z-index: 2;
  margin: 0 -25px;
}
.splash-dossier.coin-card:nth-child(4) {
  transform: perspective(800px) rotate(16deg) rotateX(6deg) rotateY(-8deg) translateY(25px);
  z-index: 1;
}

/* Hover — unified JS-managed class for both desktop and mobile.
   CSS :hover is disabled to prevent flicker when transform moves card
   out from under the cursor. JS adds .coin-card-hovered on mouseenter
   with debounced mouseleave to keep the hit area stable. */
/* Hover: card rises + holographic tilt — shadows shift to imply light angle change,
   border keeps definition instead of flattening from brightness filter */
.splash-dossier.coin-card.coin-card-hovered {
  transform: perspective(800px) rotate(0deg) rotateX(4deg) rotateY(0deg) translateY(-30px) scale(1.08) !important;
  z-index: 10 !important;
}

/* Outer rim gains directional lighting — bright top-left highlight, deeper bottom-right shadow */
.splash-dossier.coin-card.coin-card-hovered .coin-border-outer {
  background: var(--theme-border-outer-hover);
  box-shadow:
    inset 0 2px 0 var(--theme-hover-highlight),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    inset 2px 0 0 var(--theme-hover-accent),
    inset -2px 0 0 rgba(0, 0, 0, 0.4),
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 2px 8px var(--theme-hover-glow);
}

/* Inner face: shifted sheen angle + deeper recess on one side for holographic tilt */
.splash-dossier.coin-card.coin-card-hovered .coin-border-inner {
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.95),
    inset 0 -1px 2px rgba(220, 200, 140, 0.06),
    inset 3px 0 4px rgba(0, 0, 0, 0.6),
    inset -1px 0 2px rgba(220, 200, 140, 0.04),
    inset 0 0 0 1px var(--theme-hover-ring);
}


/* ---- Outer border ring — brass coin rim with knurled edge feel ---- */
.coin-border-outer {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 5px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--theme-border-outer);
  box-shadow:
    inset 0 1px 0 var(--theme-hover-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 var(--theme-hover-accent),
    inset -1px 0 0 rgba(0, 0, 0, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.4);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ---- Inner face — recessed coin surface with grooved inset channel ---- */
.coin-border-inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--theme-border-inner);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Recessed groove between rim and face — the defining coin characteristic */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    inset 0 -1px 3px rgba(0, 0, 0, 0.7),
    inset 2px 0 3px rgba(0, 0, 0, 0.5),
    inset -2px 0 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px var(--theme-hover-ring);
  transition: box-shadow 0.4s ease;
}

/* Subtle metallic sheen sweep — polished coin surface */
.coin-border-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(220, 200, 140, 0.03) 44%,
    rgba(220, 200, 140, 0.06) 50%,
    rgba(220, 200, 140, 0.03) 56%,
    transparent 62%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: coin-sheen 6s ease-in-out infinite;
  z-index: 50;
  pointer-events: none;
}

@keyframes coin-sheen {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}


/* ---- Corner suit symbols (playing card style) ---- */
.coin-corner {
  position: absolute;
  z-index: 10;
  line-height: 1;
}

.coin-corner-tl {
  top: 8px;
  left: 10px;
}

.coin-corner-br {
  bottom: 8px;
  right: 10px;
  transform: rotate(180deg);
}

.coin-corner-suit {
  font-size: clamp(14px, 1.6vw, 20px);
  display: block;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 4px rgba(140, 140, 160, 0.15);
}

/* Suit colors — warm brass/gold engraved tones (commemorative coin palette) */
.suit-spade .coin-corner-suit,
.suit-spade.coin-corner-suit,
.suit-spade.coin-suit-large {
  color: var(--theme-suit-color);
}

.suit-club .coin-corner-suit,
.suit-club.coin-corner-suit,
.suit-club.coin-suit-large {
  color: var(--theme-suit-color);
}

.suit-heart .coin-corner-suit,
.suit-heart.coin-corner-suit,
.suit-heart.coin-suit-large {
  color: var(--theme-suit-color);
}

/* Suit color classes for corner children */
.coin-corner .suit-spade {
  color: var(--theme-suit-color);
}
.coin-corner .suit-club {
  color: var(--theme-suit-color);
}
.coin-corner .suit-heart {
  color: var(--theme-suit-color);
}
.coin-corner .suit-diamond {
  color: var(--theme-suit-color);
}

/* Diamond suit */
.suit-diamond .coin-corner-suit,
.suit-diamond.coin-corner-suit,
.suit-diamond.coin-suit-large {
  color: var(--theme-suit-color);
}

/* Diamond card PLAY button variant — brass */
.coin-book-btn.coin-book-diamond {
  border-color: var(--theme-btn-border);
}

.coin-book-diamond .coin-book-label {
  color: var(--theme-text-book-label);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 6px var(--theme-hover-glow);
}

.coin-book-diamond .coin-book-dot {
  color: var(--theme-text-book-dot);
}

.coin-book-diamond .coin-book-duration {
  color: var(--theme-text-book-dur);
}


/* ---- Coin header — classified stamp + mission label (engraved brass) ---- */
.coin-header {
  padding: 10px 14px 6px;
  text-align: center;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--theme-btn-border);
}

.coin-classified {
  font-family: var(--theme-font-display);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--theme-text-classified);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 3px rgba(180, 150, 60, 0.15);
  margin-bottom: 1px;
}

.coin-label {
  font-family: var(--theme-font-display);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-text-label);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}


/* ---- Coin artwork — large centered suit symbol with knurled dead-space ---- */
/* Artwork area: ~48% of card height — contains starfield portal + rings + suit icon
   Closer to 1:1 ratio (card-width : artwork-height) to eliminate dead space
   between porthole frame and action buttons below. */
.coin-artwork {
  flex: 0 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 0;
}


/* ---- Starfield window — circular canvas aperture into shared star volume ---- */
.starfield-window {
  position: absolute;
  /* Size: circular, centered, ~80% of artwork width for fuller porthole */
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  /* Soft glow around the aperture edge */
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(20, 10, 40, 0.3);
}


/* ---- Porthole viewport rings — concentric dark bands with theme glow accents ----
   Transparent center reveals the starfield canvas; dark bands frame the porthole;
   theme-colored glow lines accent between bands. */
.coin-rings {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Porthole viewport: transparent center, concentric dark bands, theme glow accents.
     Transparent zone at 62% matches the starfield-window diameter so bands frame
     the porthole edge cleanly without clipping the starfield canvas. */
  background:
    radial-gradient(circle at center,
      /* Porthole — clear center */
      transparent 0%,
      transparent 62%,

      /* Band 1 innermost — darkest */
      rgba(0,0,0,0.82) 62%,
      rgba(0,0,0,0.72) 64%,
      rgba(0,0,0,0.62) 64%,
      rgba(0,0,0,0.58) 66.5%,

      /* Band 2 */
      rgba(0,0,0,0.56) 66.5%,
      rgba(0,0,0,0.48) 68.5%,
      rgba(0,0,0,0.40) 68.5%,
      rgba(0,0,0,0.36) 71%,

      /* Band 3 */
      rgba(0,0,0,0.35) 71%,
      rgba(0,0,0,0.28) 73%,
      rgba(0,0,0,0.22) 73%,
      rgba(0,0,0,0.19) 75.5%,

      /* Band 4 */
      rgba(0,0,0,0.18) 75.5%,
      rgba(0,0,0,0.14) 77.5%,
      rgba(0,0,0,0.09) 77.5%,
      rgba(0,0,0,0.07) 80%,

      /* Band 5 */
      rgba(0,0,0,0.07) 80%,
      rgba(0,0,0,0.04) 82.5%,
      rgba(0,0,0,0.03) 82.5%,
      rgba(0,0,0,0.02) 84.5%,

      /* Band 6 */
      rgba(0,0,0,0.02) 84.5%,
      rgba(0,0,0,0.01) 86.5%,
      rgba(0,0,0,0.004) 86.5%,
      rgba(0,0,0,0.002) 89%,

      /* Band 7 */
      rgba(0,0,0,0.002) 89%,
      rgba(0,0,0,0.001) 91%,
      transparent 91%,
      transparent 93.5%,

      /* Band 8 outermost */
      transparent 93.5%,
      transparent 100%
    ),
    /* Theme glow accent lines between bands (+16% offset from original) */
    radial-gradient(circle at center,
      transparent 0%, transparent 63.5%,
      var(--theme-primary-glow) 64%, transparent 65%,
      transparent 68%,
      var(--theme-primary-glow) 68.5%, transparent 69.5%,
      transparent 72.5%,
      var(--theme-primary-glow) 73%, transparent 74%,
      transparent 77%,
      var(--theme-primary-glow) 77.5%, transparent 78.5%,
      transparent 81.5%,
      var(--theme-primary-glow) 82%, transparent 83%,
      transparent 86%,
      var(--theme-primary-glow) 86.5%, transparent 87.5%,
      transparent 90.5%,
      var(--theme-primary-glow) 91%, transparent 92%
    );
}

/* Fine radial hatching between the rings — machined metal lines */
.coin-rings::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    var(--theme-ring-tint) 0deg,
    transparent 1deg,
    transparent 4deg
  );
  pointer-events: none;
  /* Only show hatching in the ring zone, not over the starfield (+16% offset) */
  mask-image: radial-gradient(circle, transparent 0%, transparent 46%, black 56%, black 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0%, transparent 46%, black 56%, black 100%);
}



/* ---- Suit icon — floats above the portal with bob animation ---- */
.coin-suit-large {
  font-size: clamp(52px, 7vw, 90px);
  z-index: 5;
  line-height: 1;
  position: relative;
  /* Floating shadow: projects onto the card face / ring surface below */
  text-shadow:
    0 4px 8px rgba(0, 0, 0, 0.7),
    0 8px 16px rgba(0, 0, 0, 0.35),
    0 -1px 0 var(--theme-hover-accent),
    0 0 20px rgba(80, 60, 30, 0.15);
  /* Bob animation — gentle float above the portal */
  animation: suit-bob 4s ease-in-out infinite;
  transition: filter 0.3s ease;
  /* Subtle highlight rim on top edge */
  filter: drop-shadow(0 -2px 1px var(--theme-hover-accent));
}

@keyframes suit-bob {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}

/* On hover: icon lifts higher and brightens slightly */
.splash-dossier.coin-card.coin-card-hovered .coin-suit-large {
  animation: suit-bob-hover 3s ease-in-out infinite;
  filter: drop-shadow(0 -2px 2px var(--theme-hover-highlight))
          brightness(1.08);
}

@keyframes suit-bob-hover {
  0%, 100% { transform: translateY(0px) scale(1.04); }
  50%      { transform: translateY(-8px) scale(1.06); }
}


/* ============================================================
   COIN BOOK BUTTON — Portal Window + Star Particle Effect
   ============================================================
   On hover/touch:
     1. Button stays solid (keeps background, text, sheen, press feel)
     2. A starfield portal window appears BEHIND the text (z-index: -1)
     3. Star dot + suit symbol particles drift upward from the button
        across the card face, as if being pulled through the portal
     4. Particles are constrained to the card's overflow bounds
   ============================================================ */

/* ── Portal window: live starfield behind the button text ── */
.cbtn-star {
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Only star-1 is the portal window; others are floating particles */
.cbtn-star-1 {
  inset: 2px;
}

.cbtn-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
}

/* Stars 2-6: tiny dot particles that float upward from the button.
   Start as theme-colored specks, grow to bright white as they rise. */
.cbtn-star-2, .cbtn-star-3, .cbtn-star-4, .cbtn-star-5, .cbtn-star-6 {
  inset: auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--theme-hover-glow);
  overflow: visible;
  bottom: 40%;
  left: 50%;
  box-shadow: none;
  transition:
    bottom 1.2s cubic-bezier(0.05, 0.83, 0.43, 0.96),
    left   1.2s cubic-bezier(0.05, 0.83, 0.43, 0.96),
    width  1.2s cubic-bezier(0.05, 0.83, 0.43, 0.96),
    height 1.2s cubic-bezier(0.05, 0.83, 0.43, 0.96),
    background 0.8s ease,
    box-shadow 0.8s ease,
    opacity 0.5s ease;
}

/* Vary starting positions */
.cbtn-star-3 { bottom: 50%; left: 30%; width: 2px; height: 2px; }
.cbtn-star-4 { bottom: 35%; left: 70%; width: 4px; height: 4px; }
.cbtn-star-5 { bottom: 45%; left: 40%; width: 2px; height: 2px; }
.cbtn-star-6 { bottom: 55%; left: 60%; width: 3px; height: 3px; }

/* No canvas needed for dot particles */
.cbtn-star-2 .cbtn-canvas, .cbtn-star-3 .cbtn-canvas,
.cbtn-star-4 .cbtn-canvas, .cbtn-star-5 .cbtn-canvas,
.cbtn-star-6 .cbtn-canvas {
  display: none;
}

/* ── Hover / Touch: portal opens, particles drift upward ── */
.coin-book-btn:hover .cbtn-star-1,
.coin-book-btn.cbtn-active .cbtn-star-1 {
  opacity: 0.5;
}

.coin-book-btn:hover .cbtn-star-2,
.coin-book-btn:hover .cbtn-star-3,
.coin-book-btn:hover .cbtn-star-4,
.coin-book-btn:hover .cbtn-star-5,
.coin-book-btn:hover .cbtn-star-6,
.coin-book-btn.cbtn-active .cbtn-star-2,
.coin-book-btn.cbtn-active .cbtn-star-3,
.coin-book-btn.cbtn-active .cbtn-star-4,
.coin-book-btn.cbtn-active .cbtn-star-5,
.coin-book-btn.cbtn-active .cbtn-star-6 {
  opacity: 1;
  /* All particles transition to bright white with glow as they rise */
  background: #ffffff;
  box-shadow: 0 0 4px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.3);
}

/* Each particle drifts upward, doubles in size at destination */
.coin-book-btn:hover .cbtn-star-2,
.coin-book-btn.cbtn-active .cbtn-star-2 {
  bottom: 180%; left: 35%; width: 6px; height: 6px;
  transition: bottom 1.4s cubic-bezier(0.05,0.83,0.43,0.96), left 1.4s ease,
              width 1.4s ease, height 1.4s ease, background 0.6s ease, box-shadow 0.6s ease, opacity 0.4s ease;
}

.coin-book-btn:hover .cbtn-star-3,
.coin-book-btn.cbtn-active .cbtn-star-3 {
  bottom: 220%; left: 55%; width: 5px; height: 5px;
  transition: bottom 1.8s cubic-bezier(0.05,0.83,0.43,0.96), left 1.8s ease,
              width 1.8s ease, height 1.8s ease, background 0.8s ease, box-shadow 0.8s ease, opacity 0.5s ease;
}

.coin-book-btn:hover .cbtn-star-4,
.coin-book-btn.cbtn-active .cbtn-star-4 {
  bottom: 160%; left: 70%; width: 8px; height: 8px;
  transition: bottom 1.2s cubic-bezier(0.05,0.83,0.43,0.96), left 1.2s ease,
              width 1.2s ease, height 1.2s ease, background 0.5s ease, box-shadow 0.5s ease, opacity 0.4s ease;
}

.coin-book-btn:hover .cbtn-star-5,
.coin-book-btn.cbtn-active .cbtn-star-5 {
  bottom: 250%; left: 25%; width: 5px; height: 5px;
  transition: bottom 2s cubic-bezier(0.05,0.83,0.43,0.96), left 2s ease,
              width 2s ease, height 2s ease, background 1s ease, box-shadow 1s ease, opacity 0.6s ease;
}

.coin-book-btn:hover .cbtn-star-6,
.coin-book-btn.cbtn-active .cbtn-star-6 {
  bottom: 200%; left: 80%; width: 6px; height: 6px;
  transition: bottom 1.6s cubic-bezier(0.05,0.83,0.43,0.96), left 1.6s ease,
              width 1.6s ease, height 1.6s ease, background 0.7s ease, box-shadow 0.7s ease, opacity 0.5s ease;
}

/* ---- Coin info — title + description (stamped brass) ---- */
/* Info area grows to fill ~50% together with mid-row and wheel strip */
.coin-info {
  padding: 6px 14px 4px;
  text-align: center;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--theme-primary-glow);
  flex: 0 0 auto;
}

.coin-title {
  font-family: var(--theme-font-display);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--theme-text-title);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 -1px 0 var(--theme-hover-glow);
  margin-bottom: 2px;
}

.coin-desc {
  font-family: var(--theme-font-display);
  font-size: clamp(9px, 1vw, 12px);
  color: var(--theme-text-desc);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}


/* ---- Mid-row — BOOK.duration / JOIN.NOW button ---- */
/* Buttons shifted away from card bottom toward center.
   margin-top pulls mid-row downward; margin-bottom lifts it
   (and decoder wheels/tags below) away from the coin border. */
.coin-mid-row {
  padding: 6px 14px 2px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  margin-top: auto;
  margin-bottom: 2px;
}

.coin-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 24px;
  border: 1px solid var(--theme-btn-border);
  border-radius: 6px;
  background: var(--theme-btn-bg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;     /* particles drift above the button onto the card */
  isolation: isolate;    /* stacking context for z-index: -1 portal window */
  box-shadow:
    inset 0 1px 0 var(--theme-hover-accent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.4);
  /* Idle lens glow: animated ring that pulses to attract attention */
  animation: btn-idle-glow 2.5s ease-in-out infinite;
}

/* Sheen on the button */
.coin-book-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(220, 200, 140, 0.04) 48%,
    rgba(220, 200, 140, 0.08) 50%,
    rgba(220, 200, 140, 0.04) 52%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.coin-book-btn:hover::before {
  opacity: 1;
}

/* ── Idle lens glow: attracts new visitors to the action button ──
   Pulsing theme-colored glow ring. Disappears on hover/click. */
@keyframes btn-idle-glow {
  0%   { box-shadow: inset 0 1px 0 var(--theme-hover-accent), inset 0 -1px 0 rgba(0,0,0,0.4),
                     0 2px 8px rgba(0,0,0,0.4), 0 0 6px var(--theme-hover-glow); }
  50%  { box-shadow: inset 0 1px 0 var(--theme-hover-accent), inset 0 -1px 0 rgba(0,0,0,0.4),
                     0 2px 8px rgba(0,0,0,0.4), 0 0 18px var(--theme-hover-glow), 0 0 36px var(--theme-hover-glow); }
  100% { box-shadow: inset 0 1px 0 var(--theme-hover-accent), inset 0 -1px 0 rgba(0,0,0,0.4),
                     0 2px 8px rgba(0,0,0,0.4), 0 0 6px var(--theme-hover-glow); }
}

.coin-book-btn:hover {
  /* Kill the idle glow — burst particles take over */
  animation: none;
  background: var(--theme-btn-bg-hover);
  border-color: var(--theme-btn-border);
  box-shadow:
    0 0 12px var(--theme-hover-glow),
    inset 0 1px 0 var(--theme-hover-accent);
}

.coin-book-btn:active,
.coin-book-btn.cbtn-active {
  animation: none;
  transform: scale(0.97);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.coin-book-label {
  font-family: var(--theme-font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--theme-text-book-label);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 6px var(--theme-hover-glow);
}

.coin-book-dot {
  font-family: var(--theme-font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: bold;
  color: var(--theme-text-book-dot);
  margin: 0 1px;
}

/* Duration: classic console font for variable numbers */
.coin-book-duration {
  font-family: var(--theme-font-data);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--theme-text-book-dur);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.7);
}

/* Partner variant — warm brass accent */
.coin-book-btn.coin-book-partner {
  border-color: var(--theme-btn-border);
}

.coin-book-partner .coin-book-label {
  color: var(--theme-text-book-label);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 6px var(--theme-hover-glow);
}

.coin-book-partner .coin-book-dot {
  color: var(--theme-text-book-dot);
}

.coin-book-partner .coin-book-duration {
  color: var(--theme-text-book-dur);
}


/* ==============================================================
   DECODER-RING WHEELS — Brass viewport with scrolling values
   ============================================================== */

/* Wheel strip: shifted up from bottom edge */
.coin-wheel-strip {
  display: flex;
  gap: 6px;
  padding: 6px 12px 4px;
  justify-content: center;
  position: relative;
  z-index: 10;
  margin-bottom: 16px;
}

.coin-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* The viewport frame — small dark brass window */
.coin-wheel-frame {
  width: clamp(72px, 8vw, 100px);
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--theme-border-inner);
  border: 1px solid var(--theme-btn-border);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 -1px 3px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--theme-hover-glow);
}

/* Top/bottom fade masks on the wheel frame */
.coin-wheel-frame::before,
.coin-wheel-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 5;
  pointer-events: none;
}

.coin-wheel-frame::before {
  top: 0;
  background: linear-gradient(180deg, var(--theme-bg, #181408) 0%, transparent 100%);
}

.coin-wheel-frame::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--theme-bg, #181408) 0%, transparent 100%);
}

/* The wheel track — three values stacked vertically */
.coin-wheel-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform 0.12s ease-out;
}

/* Decoder ring values: classic console font for variable numbers */
.coin-wheel-val {
  font-family: var(--theme-font-data);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  height: 14px;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.coin-wheel-prev,
.coin-wheel-next {
  font-size: 9px;
  color: var(--theme-text-wheel-ctx);
}

.coin-wheel-current {
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--theme-text-wheel-val);
  text-shadow:
    0 0 6px var(--theme-hover-glow),
    0 1px 0 rgba(0, 0, 0, 0.7);
}

/* Context label below the wheel */
/* Wheel context labels: Palatino (it's a label, not a number) */
.coin-wheel-ctx {
  font-family: var(--theme-font-display);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--theme-text-wheel-ctx);
  text-transform: uppercase;
  text-align: center;
}

/* Hover feedback on the wheel */
.coin-wheel:hover .coin-wheel-frame {
  border-color: var(--theme-btn-border);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 -1px 3px rgba(0, 0, 0, 0.5),
    0 0 8px var(--theme-hover-glow),
    0 1px 0 var(--theme-hover-glow);
}

.coin-wheel:hover .coin-wheel-current {
  color: var(--theme-text-title);
  text-shadow:
    0 0 10px var(--theme-hover-highlight),
    0 1px 0 rgba(0, 0, 0, 0.7);
}


/* ---- Partner card tag strip (replaces wheels) ---- */
.coin-tag-strip {
  display: flex;
  gap: 4px;
  padding: 4px 10px 6px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  max-height: 50px;
  overflow: hidden;
  margin-bottom: 16px;
}

.coin-tag {
  font-family: var(--theme-font-display);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-tag);
  padding: 3px 8px;
  border: 1px solid var(--theme-btn-border);
  border-radius: 3px;
  background: var(--theme-primary-glow);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}


/* ---- Selected card glow pulse ---- */
.splash-dossier.coin-card.splash-selected {
  box-shadow:
    0 0 30px var(--theme-hover-highlight),
    0 0 60px var(--theme-hover-glow) !important;
  animation: splash-selected-pulse 0.6s ease-in-out;
}

.splash-dossier.coin-card.splash-selected .coin-border-outer {
  background: var(--theme-border-outer);
}

@keyframes splash-selected-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); }
  100% { transform: scale(1.02); }
}


/* ---- Card drag placeholder (dotted outline in fan slot) ---- */
.splash-card-placeholder {
  border: 2px dashed var(--theme-btn-border);
  border-radius: 16px;
  background: var(--theme-primary-glow);
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.splash-card-placeholder.placeholder-collapsing {
  animation: splash-placeholder-collapse 0.25s ease-in forwards;
}

@keyframes splash-placeholder-collapse {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* Card being dragged: removed from flow so placeholder alone holds the slot */
.splash-dossier.coin-card.coin-card-dragging {
  display: none !important;
}

/* Drag ghost — cloned card appended to body during drag.
   Provides hover-like visuals WITHOUT !important on transform/z-index
   so the inline drag positioning works.  The ghost's .starfield-window
   canvas gets RAF blit updates from the master starfield, creating a
   magnifying-glass porthole effect as it moves across the screen. */
.splash-dossier.coin-card.coin-card-ghost {
  /* Neutral — actual transform + z-index set via JS setProperty('...', '...', 'important')
     so they override coin-card-hovered's !important declarations. */
}

/* Ghost inherits hover glow from .coin-card-hovered but we also
   add a stronger drop-shadow to make it feel "plucked" from the fan */
.splash-dossier.coin-card.coin-card-ghost .coin-border-outer {
  background: var(--theme-border-outer-hover);
  box-shadow:
    inset 0 2px 0 var(--theme-hover-highlight),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    inset 2px 0 0 var(--theme-hover-accent),
    inset -2px 0 0 rgba(0, 0, 0, 0.4),
    0 16px 50px rgba(0, 0, 0, 0.6),
    0 4px 12px var(--theme-hover-glow);
}

/* Mobile ghost: full card (matches desktop) — the 3-column grid ghost
   already inherits all card styling, no special circular clipping needed. */

/* Drag pickup zones — artwork (porthole) and info (title/desc) columns */
.coin-artwork,
.coin-info {
  cursor: grab;
  /* Prevent browser scroll/zoom during card drag on touch devices */
  touch-action: none;
}
.coin-artwork:active,
.coin-info:active {
  cursor: grabbing;
}

/* Wheels keep ns-resize cursor to indicate vertical drag */
.coin-wheel {
  cursor: ns-resize;
}


/* ---- Scanline overlay on whole splash ---- */
.splash-scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* ---- Bottom prompt ---- */
.splash-prompt {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  opacity: 0;
  animation: splash-prompt-in 0.6s ease-out 1.4s forwards;
  transition: opacity 0.35s ease;
}

@keyframes splash-prompt-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.splash-prompt-text {
  font-family: 'Courier New', monospace;
  font-size: clamp(11px, 1.4vw, 14px);
  color: var(--theme-text-wheel-ctx);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: splash-prompt-blink 2.5s ease-in-out infinite;
}

@keyframes splash-prompt-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}


/* ==============================================================
   Spy noir silhouettes — ALL slide up from bottom
   ============================================================== */
.splash-silhouettes {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.splash-silhouettes.splash-sil-active {
  opacity: 1;
}

.splash-sil {
  position: absolute;
}

.splash-sil-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(0);           /* BLVCK silhouette overlay */
}

.splash-sil-bottom {
  bottom: -105%;
  width: 38vw;
  height: 110vh;
  transform: scale(1);
  z-index: 101;
  transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.splash-sil-slot-a {
  left: 5%;
  transition-delay: 0s, 0.25s;
}

.splash-sil-slot-b {
  left: 50%;
  transform: translateX(-50%) scale(1);
  transition-delay: 0.06s, 0.3s;
}

.splash-sil-slot-c {
  right: 5%;
  transition-delay: 0.1s, 0.35s;
}

.splash-silhouettes.splash-sil-active .splash-sil-bottom {
  bottom: 0%;
  transform: scale(4.5);
}

.splash-silhouettes.splash-sil-active .splash-sil-slot-b {
  bottom: 0%;
  transform: translateX(-50%) scale(4.5);
}

/* Fade-to-black overlay — composites over silhouettes */
.splash-fade-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease 0.15s;
}

.splash-fade-overlay.splash-fade-active {
  opacity: 1;
  pointer-events: all;
}


/* ==============================================================
   MOBILE PORTRAIT — Stacked coin cards
   ============================================================== */
@media (max-width: 768px) {
  /* ----- Fan: push down so card-1 clears the fixed close button ----- */
  .splash-card-fan {
    flex-direction: column;
    align-items: center;
    gap: 0;
    perspective: 900px;
    transform-style: preserve-3d;
    padding-top: 38px;
  }

  /* Card: height tuned so all 4 fit in viewport */
  .splash-dossier.coin-card {
    width: clamp(280px, 85vw, 380px);
    height: clamp(128px, 20vh, 172px);
  }

  /* Fan stacking transforms (unchanged) */
  .splash-dossier.coin-card:nth-child(1) { transform: perspective(800px) rotateY(0deg) rotateX(3deg) translateZ(0px); z-index: 4; margin: 0; }
  .splash-dossier.coin-card:nth-child(2) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-10px) translateX(8px); z-index: 3; margin: 0; }
  .splash-dossier.coin-card:nth-child(3) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-20px) translateX(14px); z-index: 2; margin: 0; }
  .splash-dossier.coin-card:nth-child(4) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-30px) translateX(20px); z-index: 1; margin: 0; }
  .splash-dossier.coin-card.coin-card-hovered { transform: perspective(800px) rotateY(0deg) rotateX(2deg) translateY(-20px) translateX(0px) scale(1.03) !important; z-index: 10 !important; }

  /* ----- 3-COLUMN GRID LAYOUT — balanced thirds ----- */
  /* Col 1: artwork porthole  |  Col 2: title+desc  |  Col 3: btn+wheels/tags */
  .coin-border-inner {
    display: grid !important;
    grid-template-columns: 30% 1fr 28%;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow: hidden;
  }

  .coin-corner-tl { grid-column: 1; grid-row: 1; z-index: 10; }
  .coin-corner-br { grid-column: 3; grid-row: 2; z-index: 10; }
  .coin-header    { display: none !important; }

  /* Col 1: porthole — full card height */
  .coin-artwork {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    min-width: unset !important;
    flex: unset !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
  }

  /* Col 2: title + description */
  .coin-info {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0;
    flex: unset !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: none;
    border-left: 1px solid var(--theme-primary-glow);
    padding: 5px 7px;
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
  }
  .coin-title { font-size: clamp(11px, 4vw, 14px); letter-spacing: 0.05em; margin-bottom: 2px; }
  .coin-desc  { font-size: clamp(8px, 2.6vw, 10px); letter-spacing: 0.02em; }

  /* Col 3 row 1: Book/Join/Play button */
  .coin-mid-row {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    flex: unset !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 5px 4px 3px;
    margin-top: 0;
    border-left: 1px solid var(--theme-primary-glow);
    box-sizing: border-box;
    overflow: hidden;
  }
  .coin-book-btn {
    padding: 5px 6px;
    min-height: 36px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    gap: 2px;
  }
  .coin-book-label    { font-size: 10px; letter-spacing: 0.05em; }
  .coin-book-dot      { font-size: 10px; margin: 0; }
  .coin-book-duration { font-size: 9px; letter-spacing: 0.03em; }

  /* Col 3 row 2: Decoder wheels — stacked vertically */
  .coin-wheel-strip {
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    flex: unset !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 4px 3px;
    margin-bottom: 0;
    overflow: hidden;
    border-left: 1px solid var(--theme-primary-glow);
    box-sizing: border-box;
  }
  .coin-wheel {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    touch-action: none;
    cursor: ns-resize;
    width: 100%;
  }
  .coin-wheel-frame {
    width: 100%;
    height: 24px;
    touch-action: none;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .coin-wheel-track {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .coin-wheel-track:focus { outline: none; }
  .coin-wheel-val     { height: 10px; line-height: 10px; }
  .coin-wheel-current { font-size: 11px; }
  .coin-wheel-prev, .coin-wheel-next { font-size: 7px; }
  .coin-wheel-ctx {
    font-size: 6.5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.2;
  }

  /* Col 3 row 2: Tag strip (partner/arcade) — mirrors wheel strip style */
  .coin-tag-strip {
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    flex: unset !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 4px;
    max-height: none;
    overflow: hidden;
    border-left: 1px solid var(--theme-primary-glow);
    box-sizing: border-box;
  }
  .coin-tag {
    font-size: 6.5px;
    padding: 3px 2px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.05em;
  }

  /* Porthole: suit icon scaled for ~30% column */
  .coin-suit-large  { font-size: clamp(44px, 12vw, 56px); animation: suit-bob 5s ease-in-out infinite; }
  .starfield-window { width: 90%; }

  /* Silhouettes — larger on mobile for full-screen takeover */
  .splash-sil-bottom,
  .splash-sil-css { width: 65vw; height: 100vh; }
  .splash-sil-slot-a,
  .splash-sil-css-a { left: -5%; }
  .splash-sil-slot-b,
  .splash-sil-css-b { left: 50%; }
  .splash-sil-slot-c,
  .splash-sil-css-c { right: -5%; }

  /* Close button */
  .splash-close-btn  { top: 10px; right: 10px; width: 40px; height: 40px; }
  .splash-close-icon { font-size: 20px; }

  /* Card edge — thinner on mobile */
  .splash-dossier.coin-card::after { transform: translateZ(-5px); }
}

@media (max-width: 480px) {
  /* +5% taller coin cards (145px → 152px), wider for bigger porthole */
  .splash-dossier.coin-card { width: min(97vw, 398px); height: 152px !important; }
  .splash-dossier.coin-card:nth-child(1) { transform: perspective(800px) rotateY(0deg) rotateX(3deg) translateZ(0px); }
  .splash-dossier.coin-card:nth-child(2) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-12px) translateX(6px); }
  .splash-dossier.coin-card:nth-child(3) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-24px) translateX(12px); }
  .splash-dossier.coin-card:nth-child(4) { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) translateY(-36px) translateX(18px); }

  /* Left col grows +2% for bigger porthole; right col compensates */
  .coin-border-inner { grid-template-columns: 33% 1fr 28% !important; }
  .coin-artwork { min-width: unset; }
  .coin-suit-large  { font-size: clamp(36px, 10vw, 46px); }

  /* Larger porthole (92% of the wider artwork cell) */
  .starfield-window { width: 92% !important; }

  /* BOOK.NOW / JOIN.NOW — larger font (~+15%), tighter padding */
  .coin-book-btn { padding: 3px 5px !important; min-height: 34px !important; }
  .coin-book-label { font-size: 11px !important; letter-spacing: 0.06em !important; }
  .coin-book-dot { font-size: 11px !important; }
  .coin-book-duration { font-size: 10px !important; }

  /* Wheels narrower than BOOK.NOW button (~82% of right col) */
  .coin-wheel-frame { width: 82% !important; height: 24px !important; }
  .coin-wheel-current { font-size: 10px; }

  /* Tags narrower than BOOK.NOW button (~82% of right col) */
  .coin-tag { width: 82% !important; }

  .splash-title { letter-spacing: 0.15em; }
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .splash-dossier,
  .splash-sil,
  .splash-sil-bottom,
  .splash-fade-overlay,
  .splash-video-layer video,
  .splash-card-fan {
    transition-duration: 0.01s !important;
    animation-duration: 0.01s !important;
  }

  .coin-border-inner::before {
    animation: none;
  }

  .coin-suit-large {
    animation: none !important;
  }

  .splash-particle {
    display: none;
  }
}