/*
 * Lindy Studio wrapper · the black + chartreuse layer that wraps every game in the
 * arcade so the flock feels like one studio. Splash on load, a back-to-arcade chip,
 * and a "one more?" cross-promo panel. Dependency-free, self-contained, prefixed
 * .lindy- so it never collides with a game's own styles. Pairs with lindy-unlock.
 *
 * Brand tokens mirror the arcade hub (arcade/index.html): near-black base, the
 * "still alive" chartreuse, off-white ink, Space Mono accents, ease-out-expo motion.
 */
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
  --lindy-bg: #0a0a0a;
  --lindy-surface: #101010;
  --lindy-surface-2: #161616;
  --lindy-ink: #f5f5f0;
  --lindy-ink-soft: rgba(245, 245, 240, 0.62);
  --lindy-ink-faint: rgba(245, 245, 240, 0.4);
  --lindy-line: rgba(245, 245, 240, 0.1);
  --lindy-line-strong: rgba(245, 245, 240, 0.18);
  --lindy-green: #c6f542;
  --lindy-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lindy-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lindy-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* semantic z-scale, never arbitrary 9999 */
  --lindy-z-chip: 2147483600;
  --lindy-z-backdrop: 2147483640;
  --lindy-z-panel: 2147483660;
  --lindy-z-splash: 2147483700;
}

/* ---------- the studio chip (top-left) ---------- */
.lindy-chip {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: var(--lindy-z-chip);
  display: inline-flex;
  align-items: stretch;
  font-family: var(--lindy-mono);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--lindy-line-strong);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.lindy-chip__back,
.lindy-chip__flock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--lindy-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 13px;
  transition: color 0.25s var(--lindy-ease), background 0.25s var(--lindy-ease);
}
.lindy-chip__flock {
  border-left: 1px solid var(--lindy-line-strong);
  padding: 8px 12px;
  letter-spacing: 0.12em;
}
.lindy-chip__back:hover,
.lindy-chip__flock:hover,
.lindy-chip__back:focus-visible,
.lindy-chip__flock:focus-visible {
  color: var(--lindy-green);
  outline: none;
}
.lindy-chip__arrow {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.25s var(--lindy-ease);
}
.lindy-chip__back:hover .lindy-chip__arrow {
  transform: translateX(-3px);
}
.lindy-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lindy-green);
  box-shadow: 0 0 8px rgba(198, 245, 66, 0.6);
}
.lindy-chip__grid {
  width: 13px;
  height: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.lindy-chip__grid i {
  background: currentColor;
  border-radius: 1px;
}
@media (max-width: 560px) {
  .lindy-chip__label,
  .lindy-chip__flock-label {
    display: none;
  }
  .lindy-chip__back,
  .lindy-chip__flock {
    padding: 9px 11px;
  }
}

/* ---------- the splash (on load) ---------- */
.lindy-splash {
  position: fixed;
  inset: 0;
  z-index: var(--lindy-z-splash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--lindy-bg);
  color: var(--lindy-ink);
  text-align: center;
  padding: 24px;
  opacity: 1;
  transition: opacity 0.5s var(--lindy-ease);
}
.lindy-splash[data-hide="true"] {
  opacity: 0;
  pointer-events: none;
}
/* faint CRT scanline, the brand's "still on" texture */
.lindy-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  mix-blend-mode: multiply;
}
.lindy-splash__mark {
  font-family: var(--lindy-sans);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.lindy-splash__the {
  color: var(--lindy-ink-soft);
}
.lindy-splash__dot {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: 999px;
  background: var(--lindy-green);
  margin-left: 0.06em;
  transform: translateY(-0.05em);
}
.lindy-splash__game {
  font-family: var(--lindy-mono);
  font-size: clamp(12px, 2.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--lindy-green);
  padding-top: 6px;
  border-top: 1px solid var(--lindy-line);
}
.lindy-splash__studio {
  font-family: var(--lindy-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lindy-ink-faint);
}
.lindy-splash__skip {
  position: absolute;
  bottom: 22px;
  font-family: var(--lindy-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lindy-ink-faint);
}

/* heartbeat: the dot that refuses to flatline (splash + chip) */
@media (prefers-reduced-motion: no-preference) {
  .lindy-splash__dot,
  .lindy-chip__dot {
    animation: lindy-beat 1.6s var(--lindy-ease) infinite;
  }
  .lindy-splash__mark {
    animation: lindy-rise 0.7s var(--lindy-ease) both;
  }
  .lindy-splash__game,
  .lindy-splash__studio {
    animation: lindy-rise 0.7s var(--lindy-ease) both;
    animation-delay: 0.12s;
  }
}
@keyframes lindy-beat {
  0%, 100% { transform: translateY(-0.05em) scale(1); box-shadow: 0 0 0 0 rgba(198, 245, 66, 0.5); }
  18% { transform: translateY(-0.05em) scale(1.35); box-shadow: 0 0 0 6px rgba(198, 245, 66, 0); }
  36% { transform: translateY(-0.05em) scale(1); }
}
.lindy-chip__dot {
  transform: none;
}
@keyframes lindy-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- the flock (cross-promo / "one more?") ---------- */
.lindy-flock {
  position: fixed;
  inset: 0;
  z-index: var(--lindy-z-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--lindy-ease);
}
.lindy-flock[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lindy-flock__panel {
  position: relative;
  z-index: var(--lindy-z-panel);
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--lindy-surface);
  border: 1px solid var(--lindy-line-strong);
  border-radius: 16px;
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s var(--lindy-ease);
}
.lindy-flock[data-open="true"] .lindy-flock__panel {
  transform: translateY(0) scale(1);
}
.lindy-flock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.lindy-flock__title {
  font-family: var(--lindy-sans);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--lindy-ink);
}
.lindy-flock__title b {
  color: var(--lindy-green);
}
.lindy-flock__sub {
  font-family: var(--lindy-mono);
  font-size: 12px;
  color: var(--lindy-ink-soft);
  margin: 6px 0 20px;
  line-height: 1.5;
}
.lindy-flock__close {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--lindy-line-strong);
  background: transparent;
  color: var(--lindy-ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--lindy-ease), border-color 0.25s var(--lindy-ease);
}
.lindy-flock__close:hover,
.lindy-flock__close:focus-visible {
  color: var(--lindy-green);
  border-color: var(--lindy-green);
  outline: none;
}
.lindy-flock__list {
  display: grid;
  gap: 10px;
}
.lindy-flock__game {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--lindy-surface-2);
  border: 1px solid var(--lindy-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--lindy-ease), transform 0.3s var(--lindy-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .lindy-flock__game:hover {
    transform: translateX(3px);
  }
}
.lindy-flock__game:hover,
.lindy-flock__game:focus-visible {
  border-color: var(--lindy-green);
  outline: none;
}
.lindy-flock__thumb {
  position: relative;
  background: #050505;
  overflow: hidden;
}
.lindy-flock__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lindy-flock__thumb--contain img {
  object-fit: contain;
  padding: 10px;
  background: radial-gradient(circle at 50% 40%, #1a1a16 0%, #0a0a0a 75%);
}
.lindy-flock__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.lindy-flock__name {
  font-family: var(--lindy-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lindy-ink);
}
.lindy-flock__hook {
  font-family: var(--lindy-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--lindy-ink-soft);
}
.lindy-flock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lindy-line);
  font-family: var(--lindy-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.lindy-flock__home,
.lindy-flock__unlock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--lindy-ease);
}
.lindy-flock__home {
  color: var(--lindy-ink-soft);
}
.lindy-flock__home:hover,
.lindy-flock__home:focus-visible {
  color: var(--lindy-ink);
  outline: none;
}
.lindy-flock__unlock {
  color: var(--lindy-ink-faint);
}
.lindy-flock__unlock:hover,
.lindy-flock__unlock:focus-visible {
  color: var(--lindy-green);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .lindy-splash,
  .lindy-flock,
  .lindy-flock__panel,
  .lindy-chip__arrow,
  .lindy-flock__game {
    transition: opacity 0.2s linear;
  }
  .lindy-flock__panel {
    transform: none;
  }
}