/* ============================================================
   MLESA — hide-and-seek game (all viewports) + mobile onboarding.
   Reuses the .pip-* art classes from styles.css so MLESA looks
   identical everywhere.
   ============================================================ */

/* the shared MLESA art */
.seek-mlesa-svg { display: block; height: auto; overflow: visible; }

/* ---------- hidden peekers ----------
   Each peeker is absolutely positioned INSIDE its section (made
   position:relative + overflow-x:clip at runtime), so it scrolls with the
   page content instead of sticking to the viewport. `top` is set inline. */
.mlesa-hide {
  position: absolute;
  z-index: 40;
  width: 66px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 12px rgba(28, 28, 26, 0.18));
  transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.5, 1), opacity 0.4s ease;
  will-change: transform;
}
.mlesa-hide .seek-mlesa-svg { width: 100%; }
/* tucked partly past the section's edge by default (pre-entrance) */
.mlesa-hide.left  { left: 0;  transform: translateX(-118%); }
.mlesa-hide.right { right: 0; transform: translateX(118%); }
/* one-time entrance: slide to its resting peek position and STAY there */
.mlesa-hide.left.peek  { transform: translateX(-46%) rotate(7deg); }
.mlesa-hide.right.peek { transform: translateX(46%) rotate(-7deg); }
.mlesa-hide.right .seek-mlesa-svg { transform: scaleX(-1); }
/* found — pops away */
.mlesa-hide.found { transform: scale(0) translateY(-24px) !important; opacity: 0; pointer-events: none; }

@media (min-width: 1024px) {
  .mlesa-hide { width: 80px; }
  .mlesa-hide.left.peek  { transform: translateX(-38%) rotate(7deg); }
  .mlesa-hide.right.peek { transform: translateX(38%) rotate(-7deg); }
  .mlesa-hide:hover.left.peek  { transform: translateX(-24%) rotate(4deg); }
  .mlesa-hide:hover.right.peek { transform: translateX(24%) rotate(-4deg); }
}

/* little "found" speech bubble */
.mlesa-found-bubble {
  position: fixed;
  z-index: 130;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(28, 28, 26, 0.16);
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.mlesa-found-bubble.show { opacity: 1; transform: none; }
.mlesa-found-bubble b { color: var(--accent); }

/* ---------- progress HUD (toast) ---------- */
@keyframes mlesa-hud-pulse {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  35%  { transform: translateX(-50%) translateY(0) scale(1.07); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}
#mlesa-hud {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(120%) scale(0.92);
  opacity: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.45rem 0.95rem 0.45rem 0.55rem;
  box-shadow: 0 8px 22px rgba(28, 28, 26, 0.14);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity  0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              color 0.3s ease;
}
#mlesa-hud.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
#mlesa-hud.pulse { animation: mlesa-hud-pulse 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#mlesa-hud .seek-mlesa-svg { width: 26px; }
#mlesa-hud b { color: var(--accent); font-weight: 700; transition: transform 0.2s ease; }
#mlesa-hud.done { background: var(--accent); color: #fff; border-color: var(--accent); }
#mlesa-hud.done b { color: #fff; }

@media (min-width: 1024px) {
  #mlesa-hud { left: auto; right: 20px; transform: translateY(120%) scale(0.92); }
  #mlesa-hud.show { transform: translateY(0) scale(1); }
  @keyframes mlesa-hud-pulse-d {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(0) scale(1.07); }
    100% { transform: translateY(0) scale(1); }
  }
  #mlesa-hud.pulse { animation-name: mlesa-hud-pulse-d; }
}

/* ---------- completion reward ---------- */
#mlesa-win {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%) translateY(20px);
  z-index: 121;
  width: calc(100% - 2.5rem);
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  text-align: center;
  box-shadow: 0 18px 44px rgba(28, 28, 26, 0.22);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
#mlesa-win.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#mlesa-win .seek-mlesa-svg { width: 70px; margin: 0 auto 0.5rem; }
#mlesa-win h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
#mlesa-win p { font-size: 0.86rem; color: var(--sub); line-height: 1.55; margin-bottom: 0.85rem; }
#mlesa-win .mlesa-win-dismiss {
  display: inline-block;
  margin: 0.2rem auto 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 9px;
  padding: 0.55rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
#mlesa-win .mlesa-win-dismiss:hover { background: #000; }

/* ============================================================
   Mobile-only onboarding overlay (blocking, on first visit)
   ============================================================ */
/* ---------- onboarding overlay (blocking, once per session, all widths) ---------- */
#mlesa-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(27, 26, 23, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#mlesa-intro.show { opacity: 1; }
#mlesa-intro.hide { opacity: 0; pointer-events: none; }

.mlesa-intro-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 28px 70px rgba(27, 26, 23, 0.3);
  transform: translateY(16px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#mlesa-intro.show .mlesa-intro-card { transform: none; }

.mlesa-intro-card .seek-mlesa-svg {
  width: 104px;
  margin: 0 auto 0.6rem;
  animation: seek-float 3.2s ease-in-out infinite;
}
@keyframes seek-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.mlesa-intro-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.mlesa-intro-card .mlesa-acro { color: var(--sub); font-size: 0.92rem; line-height: 1.6; margin-bottom: 0.5rem; }
.mlesa-intro-card .mlesa-acro b { color: var(--accent); font-weight: 700; }
.mlesa-intro-card .mlesa-rules { color: var(--sub); font-size: 0.88rem; line-height: 1.65; }
.mlesa-intro-start {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.7rem 1.7rem;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mlesa-intro-start:hover { background: #000; transform: translateY(-1px); }

/* keep the colour, drop the motion */
@media (prefers-reduced-motion: reduce) {
  #mlesa-intro, #mlesa-intro .mlesa-intro-card, .mlesa-hide,
  #mlesa-hud, #mlesa-win, .mlesa-intro-card .seek-mlesa-svg, .mlesa-found-bubble {
    transition: none !important;
    animation: none !important;
  }
}