/* wheel-embed.css — minimal styling for the interactive wheel embed.
   Scoped under .wheel-embed so it is safe to drop into any page (e.g. Jimdo). */

.wheel-embed {
  --we-max: 720px;          /* max wheel size (desktop cap; mobile fills the screen below this) */
  --we-accent: #0c2646;     /* text / hint colour */
  --we-bg: #fbf6f0;         /* fullscreen backdrop */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--we-max);
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  font-family: Garamond, "Times New Roman", serif;
}

/* Fullscreen toggle button (top-right) */
.wheel-embed__fs {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--we-accent);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(12, 38, 70, 0.18);
  border-radius: 9px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.1s ease;
}
.wheel-embed__fs:hover { background: rgba(255, 255, 255, 0.95); }
.wheel-embed__fs:active { transform: scale(0.94); }
.wheel-embed__fs svg { width: 100%; height: 100%; display: block; }

.wheel-embed__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.wheel-embed__stage svg { display: block; width: 100%; height: auto; }

/* "Click to spin" hint — hidden once the wheel is spinning */
.wheel-embed__hint {
  margin-top: 0.6em;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--we-accent);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  text-align: center;
}
.wheel-embed.is-spinning .wheel-embed__hint { opacity: 0; }

/* Result readout ("Landed on …") */
.wheel-embed__result {
  margin-top: 0.4em;
  text-align: center;
  font-size: 1.05rem;
  color: var(--we-accent);
  min-height: 1.3em;
}

.wheel-embed:focus-visible { outline: 2px solid var(--we-accent); outline-offset: 6px; border-radius: 8px; }

/* In fullscreen, centre the whole stack (wheel + hint + result) on the backdrop */
.wheel-embed:fullscreen,
.wheel-embed.is-fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  background: var(--we-bg);
}
.wheel-embed:fullscreen .wheel-embed__stage,
.wheel-embed.is-fullscreen .wheel-embed__stage {
  width: 82vmin;
  flex: 0 0 auto;
}
.wheel-embed:fullscreen .wheel-embed__hint,
.wheel-embed:fullscreen .wheel-embed__result,
.wheel-embed.is-fullscreen .wheel-embed__hint,
.wheel-embed.is-fullscreen .wheel-embed__result { font-size: 1.2rem; }