/* slot-anatomie.css — OSEG "Anatomie eines Online-Slots" widget for guide pages.
   Tap a numbered hotspot pin → the matching region on the slot mockup lights
   up and the German explanation panel swaps. Educational, fun-only.

   The wrapper card inherits the site's light/dark theme via tokens.css
   (--surface, --line, --ink, --sub, --primary, --star, --radius*, --font-*);
   every token has a fallback so the widget also renders standalone. The
   machine mockup itself is a fixed dark warm cabinet — the same graphite +
   amber-gold family as the feature-explorer / game-slots bundle, so all OSEG
   widgets read as one family on the page.

   Mobile-first, 44px touch targets, prefers-reduced-motion supported (the JS
   skips animations and renders paylines fully drawn; this file additionally
   kills all motion). */

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

.osa {
  /* molten amber-gold identity (site gold family) */
  --sa-gold: var(--star, #D89529);
  --sa-gold-light: #F1BA4B;
  --sa-gold-soft: #F6CE6B;
  --sa-amber-deep: #A66312;
  --sa-on-gold: #2A1C08;

  /* site accents */
  --sa-green: var(--primary, #00945E);
  --sa-violet: var(--accent, #8A5FC9);

  /* card surfaces (theme-aware) */
  --sa-surface: var(--surface, #FFFDF9);
  --sa-line: var(--line, #E4DDD3);
  --sa-ink: var(--ink, #2E241D);
  --sa-muted: var(--sub, #6B6157);

  /* type + form */
  --sa-font-display: var(--font-display, 'Sora', system-ui, sans-serif);
  --sa-font-body: var(--font-body, 'Figtree', system-ui, sans-serif);
  --sa-radius: var(--radius, 1rem);
  --sa-radius-m: var(--radius-m, 0.75rem);
  --sa-radius-s: var(--radius-s, 0.5rem);
}

/* ---------- wrapper card ---------- */

.osa {
  font-family: var(--sa-font-body);
  color: var(--sa-ink);
  line-height: 1.5;
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: var(--s-20, 1.25rem);
  max-width: 100%;
  overflow: hidden;
}

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

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

.osa-title {
  margin: 0;
  font-family: var(--sa-font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  letter-spacing: 0.01em;
  color: var(--sa-ink);
}

.osa-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(--sa-amber-deep);
  background: rgba(216, 149, 41, 0.12);
  border: 1px solid rgba(216, 149, 41, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}

[data-theme="dark"] .osa-note {
  color: var(--sa-gold-light);
}

/* ---------- body layout: diagram + explanation panel ---------- */

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

@media (min-width: 48rem) { /* 768px — aligned with the site's tablet-up breakpoint (was 760px) */
  .osa-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
    gap: var(--s-24, 1.5rem);
  }
}

/* ---------- stage: the SVG mockup + hotspot pins ---------- */

.osa-stage {
  position: relative;
  min-width: 0;
}

.osa-svg {
  display: block;
  width: 100%;
  height: auto;
}

.osa-svg text {
  user-select: none;
}

.osa-svgt-disp,
.osa-symtx {
  font-family: var(--sa-font-display);
}

.osa-svgt-body {
  font-family: var(--sa-font-body);
}

/* ---------- hotspot pins (44px touch target, 30px visual dot) ---------- */

.osa-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}

/* The paytable overlay is drawn in the SVG, which sits UNDER the HTML pins, so the reel pins
   (esp. the centre Wild) cover its text. When it's active, hide the reel-area pins; the
   bet/spin/info pins stay interactive so you can still switch away. */
.osa-stage.is-paytable .osa-pin--reel { opacity: 0; pointer-events: none; }

.osa-pin span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--sa-font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--sa-on-gold);
  background: linear-gradient(180deg, var(--sa-gold-soft), var(--sa-gold));
  border: 2px solid var(--sa-amber-deep);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.osa-pin:hover span {
  transform: scale(1.12);
}

/* smaller visual dot on narrow screens (hit area stays 44px) */
@media (max-width: 480px) {
  .osa-pin span {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

.osa-pin:focus-visible {
  outline: none;
}

.osa-pin:focus-visible span {
  outline: 2px solid var(--sa-gold-light);
  outline-offset: 2px;
}

.osa-pin[aria-pressed="true"] span {
  background: var(--sa-green);
  color: var(--on-primary, #ffffff);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 4px rgba(0, 148, 94, 0.28), 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- SVG highlight regions ---------- */

.osa-region {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.osa-region.is-active {
  opacity: 1;
}

.osa-hl {
  fill: rgba(241, 186, 75, 0.10);
  stroke: var(--sa-gold-light);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(241, 186, 75, 0.65));
}

/* example paylines (drawn via stroke-dashoffset in the JS) */
.osa-payline {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osa-payline--1 {
  stroke: var(--sa-gold-light);
  filter: drop-shadow(0 0 5px rgba(241, 186, 75, 0.7));
}

.osa-payline--2 {
  stroke: #A97CF0;
  filter: drop-shadow(0 0 5px rgba(169, 124, 240, 0.6));
}

/* ---------- explanation panel ---------- */

.osa-panel {
  min-width: 0;
  display: grid;
  gap: var(--s-12, 0.75rem);
  align-content: start;
}

.osa-hint {
  margin: 0;
  font-size: var(--fs-12, 0.75rem);
  color: var(--sa-muted);
}

.osa-card {
  padding: var(--s-16, 1rem);
  background: var(--hero, rgba(216, 149, 41, 0.06));
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-m);
}

.osa-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-8, 0.5rem);
  margin-bottom: var(--s-8, 0.5rem);
}

.osa-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-family: var(--sa-font-display);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 800;
  line-height: 1;
  color: var(--sa-on-gold);
  background: linear-gradient(180deg, var(--sa-gold-soft), var(--sa-gold));
  border-radius: 50%;
}

.osa-ptitle {
  margin: 0;
  font-family: var(--sa-font-display);
  font-weight: 800;
  font-size: var(--fs-19, 1.1875rem);
  color: var(--sa-ink);
}

.osa-ptext {
  margin: 0;
  font-size: var(--fs-14, 0.875rem);
  color: var(--sa-muted);
  max-width: 50ch;
}

/* no-GSAP fallback for the panel swap */
@keyframes osaSwap {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.osa-swap {
  animation: osaSwap 0.28s ease;
}

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

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