/* feature-explorer.css — OSEG "Feature-Explorer" widget for slot-review pages.
   Tap a feature chip → a 3×3 mini-grid plays a short canned animation that
   demonstrates the mechanic. Educational, fun-only.

   Same dark warm cabinet + molten amber-gold identity as the aegypten demo
   (game-slots bundle) so both widgets read as one family on the page. All
   colours live in the .osfx token block; site tokens (--s-*, --fs-*, --radius)
   are used with fallbacks so the widget also renders standalone.

   Mobile-first, 44px touch targets, prefers-reduced-motion supported (the JS
   swaps animations for a static before/after diagram; this file additionally
   kills all motion). */

/* ---------- design tokens ---------- */

.osfx {
  /* cabinet surfaces (dark graphite, warm) */
  --fx-cab: #1c1610;
  --fx-cab-deep: #120f0c;
  --fx-panel: #241c13;
  --fx-line: #3c2f1e;

  /* cells */
  --fx-cell-bg: #241a0f;
  --fx-cell-edge: #4a3719;
  --fx-cell: clamp(46px, 10vw, 64px);
  --fx-cell-s: clamp(30px, 6vw, 38px);
  --fx-gap: var(--s-8, 0.5rem);

  /* molten amber-gold identity (site gold family) */
  --fx-gold-light: #f6ce6b;
  --fx-gold: #f1ba4b;
  --fx-amber: #d89529;
  --fx-amber-deep: #a66312;
  --fx-bronze: #6e3f0c;
  --fx-glow: #ffe9b8;

  /* site accents */
  --fx-green: #00945e;
  --fx-violet: #8a5fc9;
  --fx-red: #c4453a;

  /* text */
  --fx-ink: #f3ead9;
  --fx-muted: #b9a888;
  --fx-on-gold: #2a1c08;

  /* type */
  --fx-font-display: 'Sora', system-ui, sans-serif;
  --fx-font-body: 'Figtree', system-ui, sans-serif;

  --fx-radius: var(--radius, 1rem);
  --fx-radius-m: var(--radius-m, 0.75rem);
  --fx-radius-s: var(--radius-s, 0.5rem);
}

/* ---------- cabinet ---------- */

.osfx {
  font-family: var(--fx-font-body);
  color: var(--fx-ink);
  line-height: 1.5;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216, 149, 41, 0.10), transparent 55%),
    linear-gradient(180deg, var(--fx-cab), var(--fx-cab-deep));
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius);
  padding: var(--s-24, 1.5rem);
}

.osfx *,
.osfx *::before,
.osfx *::after {
  box-sizing: border-box;
}

.osfx .dh-sym {
  display: block;
  width: 100%;
  height: 100%;
}

.osfx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8, 0.5rem) var(--s-16, 1rem);
  margin-bottom: var(--s-12, 0.75rem);
}

.osfx-title {
  margin: 0;
  font-family: var(--fx-font-display);
  font-weight: 800;
  font-size: var(--fs-24, 1.5rem);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--fx-gold-light), var(--fx-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.osfx-note {
  margin: 0;
  padding: var(--s-4, 0.25rem) var(--s-12, 0.75rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 600;
  color: var(--fx-gold);
  background: rgba(241, 186, 75, 0.12);
  border: 1px solid rgba(241, 186, 75, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- feature chips ---------- */

.osfx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8, 0.5rem);
  margin-bottom: var(--s-12, 0.75rem);
}

.osfx-chip {
  min-height: 44px;
  padding: var(--s-8, 0.5rem) var(--s-16, 1rem);
  font-family: var(--fx-font-body);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 600;
  color: var(--fx-ink);
  background: var(--fx-panel);
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.osfx-chip:hover {
  border-color: var(--fx-amber);
  transform: translateY(-1px);
}

.osfx-chip:focus-visible {
  outline: 2px solid var(--fx-gold);
  outline-offset: 2px;
}

.osfx-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--fx-gold-light), var(--fx-amber));
  border-color: var(--fx-amber-deep);
  color: var(--fx-on-gold);
}

/* ---------- body layout: stage + info ---------- */

.osfx-body {
  display: grid;
  gap: var(--s-16, 1rem);
  align-items: start;
}

@media (min-width: 48rem) {
  .osfx-body {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-24, 1.5rem);
  }
}

/* Phone: single-column stage has roomy width to spare — grow the mini-grid cells to fill it
   instead of shrinking with 10vw (the base clamp caps at 64px only ≥640px). */
@media (max-width: 47.9375rem) {
  .osfx { --fx-cell: clamp(60px, 20vw, 84px); }
  .osfx-head { flex-direction: column; justify-content: center; gap: var(--s-12, 0.75rem) var(--s-16, 1rem); margin-bottom: var(--s-16, 1rem); }
  .osfx-chips { justify-content: center; }
  .osfx-ftitle { text-align: center; }
  .osfx-ftext { text-align: center; max-width: 100%; }
}

.osfx-stagewrap {
  display: grid;
  justify-items: center;
  gap: var(--s-12, 0.75rem);
}

.osfx-stage {
  position: relative;
  min-height: calc(3 * var(--fx-cell) + 2 * var(--fx-gap) + 2 * var(--s-12, 0.75rem));
  min-width: calc(3 * var(--fx-cell) + 2 * var(--fx-gap) + 2 * var(--s-12, 0.75rem));
  display: grid;
  place-items: center;
  padding: var(--s-12, 0.75rem);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius-m);
}

/* ---------- 3×3 mini-grid ---------- */

.osfx-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--fx-cell));
  gap: var(--fx-gap);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.osfx-grid.is-dim {
  opacity: 0.22;
  filter: saturate(0.4);
}

.osfx-cell {
  position: relative;
  width: var(--fx-cell);
  height: var(--fx-cell);
  padding: 6%;
  background: linear-gradient(180deg, #2b1f11, var(--fx-cell-bg));
  border: 1px solid var(--fx-cell-edge);
  border-radius: var(--fx-radius-s);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.osfx-symwrap {
  width: 100%;
  height: 100%;
}

/* win/feature highlight */
.osfx-cell.is-hl {
  border-color: var(--fx-gold);
  box-shadow:
    0 0 0 2px rgba(241, 186, 75, 0.55),
    0 0 18px rgba(241, 186, 75, 0.5),
    inset 0 0 10px rgba(255, 233, 184, 0.25);
  animation: osfxPulse 0.9s ease-in-out 2 alternate;
}

/* held reel (Re-Spins) */
.osfx-cell.is-locked {
  border-color: var(--fx-amber-deep);
  box-shadow: 0 0 0 2px rgba(166, 99, 18, 0.6);
}

.osfx-cell.is-locked::after {
  content: 'HALTEN';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--fx-on-gold);
  background: var(--fx-amber);
  border-radius: 999px;
  white-space: nowrap;
}

/* only the top cell of a held column wears the chip (avoid 3× repetition) */
.osfx-cell.is-locked:not(.is-locked-top)::after {
  content: none;
}

/* ---------- overlay: badge + gamble card ---------- */

.osfx-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.osfx-badge {
  display: none;
  max-width: 92%;
  padding: 0.4em 1em;
  font-family: var(--fx-font-display);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--fx-on-gold);
  background: linear-gradient(180deg, var(--fx-gold-light), var(--fx-amber));
  border: 1px solid var(--fx-amber-deep);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(241, 186, 75, 0.45);
}

.osfx-badge.is-on {
  display: inline-block;
}

.osfx-badge.is-big {
  font-size: var(--fs-17, 1.0625rem);
}

/* gamble card */
.osfx-cardwrap {
  perspective: 640px;
}

.osfx-card {
  position: relative;
  width: clamp(64px, 14vw, 80px);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.osfx-card.is-flipped {
  transform: rotateY(180deg);
}

.osfx-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  line-height: 1;
  border-radius: var(--fx-radius-s);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.osfx-card-back {
  color: var(--fx-gold);
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(241, 186, 75, 0.18), transparent 70%),
    linear-gradient(160deg, #3a2b16, #241a0f);
  border: 2px solid var(--fx-gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.osfx-card-front {
  transform: rotateY(180deg);
  color: var(--fx-red);
  background: linear-gradient(180deg, #fff6e8, #f3e2c8);
  border: 2px solid var(--fx-red);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 16px rgba(241, 186, 75, 0.35);
}

/* ---------- replay ---------- */

.osfx-replay {
  min-height: 44px;
  padding: var(--s-8, 0.5rem) var(--s-20, 1.25rem);
  font-family: var(--fx-font-body);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 700;
  color: var(--fx-gold);
  background: transparent;
  border: 1px solid var(--fx-amber-deep);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.osfx-replay:hover {
  background: rgba(241, 186, 75, 0.12);
  border-color: var(--fx-gold);
}

.osfx-replay:focus-visible {
  outline: 2px solid var(--fx-gold);
  outline-offset: 2px;
}

.osfx-replay[hidden] {
  display: none;
}

/* ---------- info panel ---------- */

.osfx-info {
  min-width: 0;
}

.osfx-ftitle {
  margin: 0 0 var(--s-8, 0.5rem);
  font-family: var(--fx-font-display);
  font-weight: 800;
  font-size: var(--fs-24, 1.5rem);
  background: linear-gradient(180deg, var(--fx-gold-light), var(--fx-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.osfx-ftext {
  margin: 0;
  font-size: var(--fs-16, 1rem);
  color: var(--fx-muted);
  max-width: 50ch;
}

/* ---------- static before/after diagram (reduced motion) ---------- */

.osfx-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-12, 0.75rem) var(--s-16, 1rem);
}

.osfx-static-col {
  display: grid;
  gap: var(--s-8, 0.5rem);
  justify-items: center;
}

.osfx-static-label {
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.osfx-static-arrow {
  font-size: var(--fs-24, 1.5rem);
  font-weight: 800;
  color: var(--fx-gold);
}

.osfx-minigrid {
  display: grid;
  grid-template-columns: repeat(3, var(--fx-cell-s));
  gap: calc(var(--fx-gap) * 0.6);
}

.osfx-minigrid .osfx-cell {
  width: var(--fx-cell-s);
  height: var(--fx-cell-s);
  border-radius: calc(var(--fx-radius-s) * 0.75);
}

.osfx-static-badge {
  padding: 0.25em 0.8em;
  font-size: var(--fs-12, 0.75rem);
  font-weight: 800;
  color: var(--fx-on-gold);
  background: linear-gradient(180deg, var(--fx-gold-light), var(--fx-amber));
  border-radius: 999px;
}

/* ---------- static diagrams: jackpot tiers + supermeter ---------- */

.osfx-diagram {
  display: grid;
  gap: var(--s-12, 0.75rem);
  width: 100%;
  max-width: 300px;
  justify-items: stretch;
}

.osfx-diagram-cap {
  margin: 0;
  font-size: var(--fs-12, 0.75rem);
  color: var(--fx-muted);
  text-align: center;
}

/* jackpot tier ladder */
.osfx-jack {
  display: grid;
  gap: var(--s-8, 0.5rem);
}

.osfx-jack-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12, 0.75rem);
  padding: var(--s-8, 0.5rem) var(--s-16, 1rem);
  font-weight: 700;
  font-size: var(--fs-14, 0.875rem);
  background: linear-gradient(180deg, #241c13, #1a130c);
  border: 1px solid var(--fx-bronze);
  border-radius: var(--fx-radius-s);
}

.osfx-jack-amount {
  font-family: var(--fx-font-display);
  color: var(--fx-gold);
}

.osfx-jack-tier.is-mega {
  border-color: var(--fx-gold);
  background: linear-gradient(180deg, #3a2b16, #241a0f);
  box-shadow: 0 0 16px rgba(241, 186, 75, 0.35);
}

.osfx-jack-tier.is-mega .osfx-jack-amount {
  color: var(--fx-glow);
}

/* supermeter bar */
.osfx-meter {
  position: relative;
  height: 22px;
  margin: var(--s-8, 0.5rem) 0 var(--s-24, 1.5rem);
  background: var(--fx-cab-deep);
  border: 1px solid var(--fx-line);
  border-radius: 999px;
}

.osfx-meter-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 58%;
  background: linear-gradient(90deg, var(--fx-amber-deep), var(--fx-gold));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(241, 186, 75, 0.5);
}

.osfx-meter-mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--fx-gold-light);
  border-radius: 1px;
}

.osfx-meter-lab {
  position: absolute;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  color: var(--fx-muted);
  white-space: nowrap;
}

.osfx-meter-lab strong {
  color: var(--fx-gold);
}

/* ---------- animation keyframes (no-GSAP fallback) ---------- */

@keyframes osfxLand {
  from {
    transform: translateY(-16px) scale(0.72);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.osfx-anim-land {
  animation: osfxLand 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes osfxPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.osfx-anim-pop {
  animation: osfxPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes osfxPulse {
  from {
    box-shadow:
      0 0 0 2px rgba(241, 186, 75, 0.55),
      0 0 10px rgba(241, 186, 75, 0.35),
      inset 0 0 8px rgba(255, 233, 184, 0.18);
  }
  to {
    box-shadow:
      0 0 0 2px rgba(241, 186, 75, 0.75),
      0 0 22px rgba(241, 186, 75, 0.6),
      inset 0 0 12px rgba(255, 233, 184, 0.3);
  }
}

/* ---------- reduced motion: kill everything that moves ---------- */

@media (prefers-reduced-motion: reduce) {
  .osfx *,
  .osfx *::before,
  .osfx *::after {
    animation: none !important;
    transition: none !important;
  }
}