/* Hamster Hustle — Vibe Jam exit portal (Meadow Haven).
 *
 * All selectors scoped under .hh-root to prevent cross-scene bleed
 * (Wave 1 risk #5). Portal sits in .hh-mh-portal-mount (100x140px,
 * defined in hh-scene-meadow-haven.css).
 */

/* ── Outer wrapper ─────────────────────────────────────────────────────── */
.hh-root .hh-portal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* label at bottom, glow above */
}

/* ── Portal glow ring ──────────────────────────────────────────────────── */
.hh-root .hh-portal__ring {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--hh-color-meadow, #2d7a4d);
  box-shadow:
    0 0 12px 4px rgba(45, 122, 77, 0.6),
    inset 0 0 18px 4px rgba(45, 122, 77, 0.35);
  background: radial-gradient(
    ellipse at center,
    rgba(45, 122, 77, 0.25) 0%,
    rgba(45, 122, 77, 0.08) 60%,
    transparent 100%
  );
  animation: hh-portal-pulse 2400ms ease-in-out infinite;
  pointer-events: none;
}

@keyframes hh-portal-pulse {
  0%, 100% {
    box-shadow:
      0 0 12px 4px rgba(45, 122, 77, 0.6),
      inset 0 0 18px 4px rgba(45, 122, 77, 0.35);
    border-color: var(--hh-color-meadow, #2d7a4d);
  }
  50% {
    box-shadow:
      0 0 28px 10px rgba(45, 122, 77, 0.85),
      inset 0 0 28px 8px rgba(45, 122, 77, 0.55);
    border-color: #5ab87a;
  }
}

/* Swirling inner particles — pure CSS, no canvas. */
.hh-root .hh-portal__swirl {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid rgba(45, 122, 77, 0.4);
  animation: hh-portal-swirl 1800ms linear infinite;
  pointer-events: none;
}

@keyframes hh-portal-swirl {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* ── Clickable anchor ──────────────────────────────────────────────────── */
.hh-root .hh-portal__link {
  position: relative; /* stacks above ring */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  cursor: pointer;
  /* Expand hit-target slightly — finger-friendly on mobile. */
  padding: 4px;
}

.hh-root .hh-portal__link:focus-visible .hh-portal__ring {
  outline: 2px solid var(--hh-color-meadow, #2d7a4d);
  outline-offset: 4px;
}

/* Hover / active: ring brightens. */
.hh-root .hh-portal__link:hover .hh-portal__ring,
.hh-root .hh-portal__link:active .hh-portal__ring {
  animation-play-state: paused;
  box-shadow:
    0 0 36px 14px rgba(45, 122, 77, 0.95),
    inset 0 0 32px 10px rgba(45, 122, 77, 0.7);
  border-color: #7de8a0;
}

/* ── Label ─────────────────────────────────────────────────────────────── */
.hh-root .hh-portal__label {
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #a8f0c0;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  margin-top: 4px;
  pointer-events: none;
  white-space: nowrap;
}