/* Zodaiya reveal gates + SFX mute control — the "scratch / spin / crack it open"
   layer. Uses the site tokens (--gold, --purple, --card…) so covers feel native.
   Everything degrades to an instant crossfade under prefers-reduced-motion. */

/* ---- the gate (a box whose reveal is gated) ------------------------------ */
.zr-gate { position: relative; }

/* Real content stays in the DOM (read by screen readers, announced by the
   existing aria-live regions) but is visually masked until revealed.
   color:transparent also hides direct TEXT NODES (e.g. a <p> gate whose body
   is a bare text node, not an element child) so nothing bleeds through a
   semi-transparent cover. */
.zr-gate--covered {
  color: transparent !important;
  text-shadow: none !important;
  min-height: 58px; /* short pills (meta/profile) get tappable room for the CTA */
}
.zr-gate--covered > :not(.zr-cover):not(.zr-spark-layer) {
  opacity: 0 !important;
  pointer-events: none;
}
.zr-gate--revealed {
  animation: zrContentIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zrContentIn {
  from { opacity: 0; transform: scale(0.95); filter: blur(4px); }
  to   { opacity: 1; transform: none;        filter: none; }
}

/* ---- the cover ----------------------------------------------------------- */
.zr-cover {
  --zr-glow: 236, 201, 126; /* per-card hover-halo tint (r,g,b); JS sets it per card */
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(var(--gold-rgb, 212, 175, 55), 0.45);
  border-radius: inherit;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-ui, "Mulish", system-ui, sans-serif);
  color: var(--accent-light, #f1c84a);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 77, 255, 0.30), transparent 70%),
    linear-gradient(135deg, #221a45 0%, #2c2358 45%, #1a1438 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04),
              inset 0 18px 40px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  /* min radius so square gates still look like cards */
  border-radius: clamp(8px, var(--radius, 12px), 16px);
}
.zr-cover:hover,
.zr-cover:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--zr-glow, 212, 175, 55), 0.85);
  box-shadow: 0 8px 26px rgba(var(--zr-glow, 124, 77, 255), 0.30),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  outline: none;
}
.zr-cover:focus-visible { box-shadow: 0 0 0 3px rgba(241, 200, 74, 0.55); }
.zr-cover:active { transform: translateY(0) scale(0.99); }

/* moving foil sheen */
.zr-sheen {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 233, 170, 0.34) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  transform: rotate(8deg);
  animation: zrSheen 3.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
@keyframes zrSheen {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* labels sit ABOVE the scratch foil + sheen so the card reads "Best Match ·
   Scratch to reveal" before you scratch it off */
.zr-icon, .zr-caption, .zr-cta, .zr-lock, .zr-reel {
  position: relative;
  z-index: 3;
}
.zr-icon {
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(241, 200, 74, 0.5));
}
.zr-caption {
  font-family: var(--font-head, "Cinzel", serif);
  font-size: clamp(0.62rem, 1.8vw, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #d4af37);
  opacity: 0.95;
  max-width: 95%;
}
.zr-cta {
  font-size: clamp(0.6rem, 1.6vw, 0.72rem);
  letter-spacing: 0.06em;
  color: rgba(244, 239, 227, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.zr-cta::before { content: "✦"; color: var(--accent-light, #f1c84a); opacity: 0.85; }
.zr-lock { display: none; flex-direction: column; align-items: center; gap: 0.25rem; }
.zr-locked-hint {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* locked link in a reveal-chain: clearly QUEUED (dimmed but alive, gold-edged
   with a lock) — never so dark it reads as a disabled/broken control */
.zr-cover.is-locked {
  cursor: not-allowed;
  border-color: rgba(var(--gold-rgb, 212, 175, 55), 0.28);
  color: rgba(244, 239, 227, 0.5);
  /* stays fully OPAQUE (no opacity) so covered content never bleeds through */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 77, 255, 0.10), transparent 70%),
    linear-gradient(135deg, #1a1530 0%, #241d48 45%, #15102e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02),
              inset 0 18px 40px rgba(0, 0, 0, 0.4);
}
.zr-cover.is-locked:hover { transform: none; box-shadow: inset 0 18px 40px rgba(0, 0, 0, 0.4); }
.zr-cover.is-locked .zr-caption { color: rgba(212, 175, 55, 0.55); }
.zr-cover.is-locked .zr-sheen { animation: none; opacity: 0; }
.zr-cover.is-locked .zr-cta,
.zr-cover.is-locked .zr-reel,
.zr-cover.is-locked .zr-roll { display: none; }
/* Hide the large glyph while locked so the padlock + "Reveal in order" hint
   always fit (short gates — e.g. forecast — clipped the hint otherwise). The
   padlock alone reads as locked; the icon returns when the chain unlocks it. */
.zr-cover.is-locked .zr-icon { display: none; }
/* muted cool violet-grey so "locked" reads as restricted, not gold-like-everything */
.zr-cover.is-locked .zr-lock { display: flex; color: #9a93c4; }
.zr-cover.zr-nudge { animation: zrNudge 0.4s ease; }
@keyframes zrNudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
/* the next box pulses gold when it unlocks */
.zr-cover.zr-pulse { animation: zrPulse 0.7s ease; }
@keyframes zrPulse {
  0%   { box-shadow: 0 0 0 0 rgba(241, 200, 74, 0.0); }
  30%  { box-shadow: 0 0 0 4px rgba(241, 200, 74, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(241, 200, 74, 0.0); }
}

/* flip / scratch reveal — cover drops away */
.zr-cover--gone {
  animation: zrFlipAway 0.5s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  pointer-events: none;
}
@keyframes zrFlipAway {
  0%   { transform: perspective(700px) rotateX(0) scale(1);   opacity: 1; }
  100% { transform: perspective(700px) rotateX(-92deg) scale(1.04); opacity: 0; transform-origin: top; }
}

/* scratch foil canvas */
.zr-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 1;
  touch-action: none;
}
.zr-cover--scratch .zr-cta::before { content: "✋"; }

/* slot reel — give the reel + caption + cta room to breathe */
.zr-cover--slot { gap: 0.6rem; }
.zr-reel {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  line-height: 1;
  margin: 0.15rem 0;
  color: var(--accent-light, #f1c84a);
  filter: drop-shadow(0 0 14px rgba(241, 200, 74, 0.6));
}
.zr-cover--spinning .zr-cta,
.zr-cover--spinning .zr-caption { opacity: 0.35; }
.zr-cover--spinning .zr-reel { animation: zrReelBlur 0.3s linear infinite; }
@keyframes zrReelBlur {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(241, 200, 74, 0.6)) blur(0); }
  50%      { filter: drop-shadow(0 0 18px rgba(241, 200, 74, 0.8)) blur(1.2px); }
}

/* drumroll — a numeric reel for scores / numbers */
.zr-cover--drumroll { gap: 0.35rem; }
.zr-cover--drumroll .zr-cta { white-space: nowrap; }
/* odometer / slot-reel WINDOW so the drumroll reads as kinetic/mechanical at a
   glance (distinct from the flip cover) — top+bottom rails + an inset cylinder
   shadow that fades the digit toward the edges like a spinning wheel. */
.zr-roll {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.08em 0.34em;
  font-family: "SFMono-Regular", "Menlo", "Consolas", var(--font-head, "Cinzel", serif);
  font-size: clamp(1.5rem, 4.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light, #f1c84a);
  border-top: 2px solid rgba(241, 200, 74, 0.4);
  border-bottom: 2px solid rgba(241, 200, 74, 0.4);
  border-radius: 5px;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 7px 9px rgba(0, 0, 0, 0.55), inset 0 -7px 9px rgba(0, 0, 0, 0.55),
              0 0 14px rgba(241, 200, 74, 0.35);
}

/* flip covers get a folded-corner so they read as a flippable CARD, not a button */
.zr-cover--flip::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(241, 200, 74, 0.7) transparent transparent;
  z-index: 4;
  filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.4));
  transition: border-width 0.18s ease;
}
.zr-cover--flip.zr-hover::after { border-width: 0 26px 26px 0; }
.zr-cover--flip.is-locked::after { border-color: transparent rgba(154, 147, 196, 0.45) transparent transparent; }
.zr-cover--rolling .zr-cta,
.zr-cover--rolling .zr-caption { opacity: 0.35; }
.zr-cover--rolling .zr-roll { animation: zrReelBlur 0.25s linear infinite; }

/* ---- HOVER beats (per-flavor tease; JS adds .zr-hover only when active) --- */
.zr-cover--flip.zr-hover {
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--zr-glow, 124, 77, 255), 0.40),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.zr-cover--flip.zr-hover .zr-sheen { animation-duration: 1.6s; }
.zr-cover--scratch.zr-hover { filter: brightness(1.09); }
.zr-cover--scratch.zr-hover .zr-sheen { animation-duration: 1.4s; }
.zr-cover--slot.zr-hover .zr-reel { animation: zrReelTease 0.6s ease-in-out infinite; }
@keyframes zrReelTease {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-5deg); }
}
.zr-cover--drumroll.zr-hover .zr-roll { animation: zrRollTease 0.5s ease-in-out infinite; }
@keyframes zrRollTease { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.zr-cover--lootbox.zr-hover { animation: zrRattle 0.45s ease-in-out infinite; }
@keyframes zrRattle {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-1.2px, 0) rotate(-0.5deg); }
  75%      { transform: translate(1.2px, 0) rotate(0.5deg); }
}

/* ---- PRESS beat (anticipation wind-up; charge glow, no transform conflict) */
.zr-cover.zr-pressing {
  box-shadow: inset 0 0 34px rgba(241, 200, 74, 0.5), 0 0 20px rgba(124, 77, 255, 0.45);
  filter: brightness(1.14);
}
.zr-cover--lootbox.zr-pressing { animation: none; }

/* lootbox: charge then crack */
.zr-cover--lootbox {
  background:
    radial-gradient(110% 90% at 50% 30%, rgba(124, 77, 255, 0.45), transparent 70%),
    linear-gradient(135deg, #1c1340 0%, #3a2466 50%, #160f33 100%);
}
.zr-cover--charging { animation: zrCharge 0.7s ease-in forwards; }
@keyframes zrCharge {
  0%   { transform: scale(1)    rotate(0); box-shadow: inset 0 0 30px rgba(124, 77, 255, 0.2); }
  60%  { transform: scale(0.97) rotate(-0.6deg); }
  80%  { transform: scale(1.02) rotate(0.6deg); box-shadow: inset 0 0 60px rgba(241, 200, 74, 0.5), 0 0 30px rgba(241, 200, 74, 0.4); }
  100% { transform: scale(1.05); box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.6), 0 0 50px rgba(241, 200, 74, 0.7); }
}
.zr-cover--cracking { animation: zrCrack 0.5s cubic-bezier(0.36, 0, 0.2, 1) forwards; }
@keyframes zrCrack {
  0%   { transform: scale(1.05); opacity: 1; filter: brightness(2.2); }
  100% { transform: scale(1.5);  opacity: 0; filter: brightness(3); }
}

/* particle spark burst */
.zr-spark-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  z-index: 7;
  pointer-events: none;
}
.zr-spark-layer i {
  position: absolute;
  left: 0; top: 0;
  width: 6px; height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent-light, #f1c84a) 45%, transparent 75%);
  animation: zrSpark var(--d, 0.6s) cubic-bezier(0.12, 0.8, 0.3, 1) forwards;
}
@keyframes zrSpark {
  0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); opacity: 0; }
}

/* ---- SFX mute control (injected by sfx.js after first sound) ------------- */
/* Docked in the nav beside the ambient toggle: reuses .ambient-toggle styling,
   so it just needs a gentle fade-in + a muted-state tint. */
.ambient-toggle.zsfx-mute { opacity: 0; transition: opacity 0.4s ease, color 0.2s ease; }
.ambient-toggle.zsfx-mute.is-in { opacity: 1; }
.zsfx-mute.is-muted { color: rgba(244, 239, 227, 0.45); }

/* Fallback when there's no nav audio cluster: a discreet floating pill. */
.zsfx-mute--float {
  position: fixed;
  left: max(14px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb, 212, 175, 55), 0.4);
  background: rgba(20, 16, 48, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--accent-light, #f1c84a);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease;
}
.zsfx-mute--float.is-in { opacity: 0.6; transform: none; }
.zsfx-mute--float:hover,
.zsfx-mute--float:focus-visible { opacity: 1; background: rgba(40, 30, 80, 0.92); outline: none; }
.zsfx-mute--float:focus-visible { box-shadow: 0 0 0 3px rgba(241, 200, 74, 0.5); }

/* ---- reduced motion: still a tap-to-reveal, but no motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .zr-gate--revealed { animation: none; }
  .zr-sheen { animation: none; opacity: 0.25; }
  .zr-cover--gone,
  .zr-cover--charging,
  .zr-cover--cracking { animation: none; opacity: 0; transition: opacity 0.25s ease; }
  .zr-reel, .zr-roll { animation: none; }
  .zr-cover.zr-nudge,
  .zr-cover.zr-pulse { animation: none; }
  /* hover/press teases are motion → suppress; keep a static highlight instead */
  .zr-cover--flip.zr-hover { transform: none; }
  .zr-cover--slot.zr-hover .zr-reel,
  .zr-cover--drumroll.zr-hover .zr-roll,
  .zr-cover--lootbox.zr-hover { animation: none; }
  .zr-cover.zr-hover { box-shadow: 0 0 0 2px rgba(var(--zr-glow, 241, 200, 74), 0.50); }
}