/* Ambient + transition effects */
.fx-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s;
}

.fx-ambient.is-on {
  opacity: 1;
}

.fx-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe566, transparent 70%);
  animation: fxFloat 5s ease-in-out infinite;
  opacity: 0.55;
}

@keyframes fxFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.2; }
  50% { transform: translateY(-28px) scale(1.2); opacity: 0.7; }
}

.screen.is-active {
  animation: screenIn 0.45s var(--ease-out) both;
}

.screen.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: screenSheen 0.7s 0.05s ease-out both;
  z-index: 3;
}

.screen-ar.is-active::after,
.screen-explore.is-active::after {
  display: none;
}

@keyframes screenSheen {
  to { transform: translateX(120%); }
}

.fx-float-text {
  position: fixed;
  z-index: 210;
  pointer-events: none;
  font-weight: 800;
  font-size: 1.15rem;
  color: #ffe566;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: floatText 1.1s ease-out forwards;
}

@keyframes floatText {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

.gj-treasure.is-hot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  border: 2px solid rgba(232, 200, 90, 0.55);
  animation: radarRing 1.4s ease-out infinite;
  pointer-events: none;
}

@keyframes radarRing {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}

.btn-primary:active::after {
  animation: btnShine 0.5s ease-out;
}

@keyframes btnShine {
  to { transform: translateX(120%); }
}