/* Wheel of Fortune — the popup's styles.
   Every colour here is a custom property that inc/settings.php writes inline from the admin
   settings; the values below are only the fallbacks for when the popup is rendered without them.
   Everything is prefixed `fw-` and nothing touches a selector outside this file. */

:root {
  --fw-bg:      #120a1c;
  --fw-panel:   #1b1030;
  --fw-accent:  #ff7518;
  --fw-alt:     #7b2ff7;
  --fw-alt2:    #04acb4;
  --fw-panel-top: #2a1442;
  --fw-glow:        rgba(255, 117, 24, .35);
  --fw-glow-strong: rgba(255, 117, 24, .5);
  --fw-text:    #f4ecff;
  --fw-muted:   #a995c4;
  /* set from the admin screen as inline custom properties; these are only the fallbacks */
  --fw-accent2: #ff3d81;
  --fw-radius:  18px;
  --fw-wheel:   420px;
}

.fw-btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 14px 26px; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, var(--fw-accent), var(--fw-accent2, #ff3d81));
  box-shadow: 0 8px 26px var(--fw-glow, rgba(255,117,24,.35));
  transition: transform .15s ease, box-shadow .15s ease;
}
.fw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--fw-glow-strong, rgba(255,117,24,.45)); }
.fw-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* ------------------------------------------------------------------- modal */
.fw-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 2, 12, .82); backdrop-filter: blur(4px);
}
.fw-modal.is-open { display: flex; animation: fw-fade .25s ease; }
@keyframes fw-fade { from { opacity: 0 } to { opacity: 1 } }

.fw-card {
  position: relative; width: min(600px, 100%); max-height: 94vh; overflow: auto;
  background: radial-gradient(120% 90% at 50% 0%, var(--fw-panel-top, #2a1442) 0%, var(--fw-panel) 55%, var(--fw-bg) 100%);
  border: 1px solid var(--fw-glow, rgba(255,117,24,.35)); border-radius: var(--fw-radius, 18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(123, 47, 247, .25) inset;
  color: var(--fw-text); padding: 26px 24px 30px; text-align: center;
  animation: fw-rise .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fw-rise { from { transform: translateY(20px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }

.fw-card__close {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1;
  background: rgba(255, 255, 255, .08); color: var(--fw-text);
}
.fw-card__close:hover { background: rgba(255, 255, 255, .16); }

.fw-card__kicker { color: var(--fw-accent); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.fw-card__title  { font-size: 25px; font-weight: 800; margin: 6px 0 4px; line-height: 1.2; }
.fw-card__sub    { color: var(--fw-muted); font-size: 14px; margin: 0 0 16px; line-height: 1.5; }

/* floating decorations, pure CSS so the preview needs no image files */
.fw-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--fw-radius, 18px); }
.fw-decor span { position: absolute; font-size: 20px; opacity: .25; animation: fw-float 7s ease-in-out infinite; }
.fw-decor span:nth-child(1) { left: 8%;  top: 14%; animation-delay: 0s }
.fw-decor span:nth-child(2) { right: 10%; top: 22%; animation-delay: 1.4s; font-size: 26px }
.fw-decor span:nth-child(3) { left: 14%; bottom: 16%; animation-delay: 2.6s; font-size: 17px }
.fw-decor span:nth-child(4) { right: 12%; bottom: 12%; animation-delay: 3.8s }
@keyframes fw-float { 0%,100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-12px) rotate(5deg) } }

/* ------------------------------------------------------------------- email */
.fw-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 6px; }
.fw-form input {
  flex: 1 1 240px; min-width: 0; padding: 13px 15px; font: inherit;
  color: var(--fw-text); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
}
.fw-form input::placeholder { color: #8d7da6; }
.fw-form input:focus { outline: 2px solid var(--fw-accent); outline-offset: 1px; border-color: transparent; }
.fw-form input[aria-invalid="true"] { border-color: #ff5d5d; }
/* "choose what to spend it on" — the step winners were missing */
.fw-spend { margin: 18px 0 2px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.fw-spend__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--fw-text); }
.fw-spend__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fw-spend__btn {
  display: inline-block; padding: 12px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--fw-accent); box-shadow: 0 6px 18px var(--fw-glow, rgba(255,117,24,.35));
  transition: transform .15s ease, box-shadow .15s ease;
}
.fw-spend__btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px var(--fw-glow-strong, rgba(255,117,24,.5)); }
@media (max-width: 420px) { .fw-spend__links { flex-direction: column; } .fw-spend__btn { width: 100%; } }

.fw-error { color: #ff8d8d; font-size: 13px; min-height: 0; margin: 0; }
.fw-error:not(:empty) { margin: 10px 0 0; }
.fw-note  { color: var(--fw-muted); font-size: 12px; margin: 0; }

/* --------------------------------------------------------------- the wheel */
/* Sized against the viewport, not against a breakpoint. The admin value is the ceiling; `68vw`
   is what keeps it inside the card on any width. It used to be the admin value with one override
   below 420px, which left every phone between 421px and 991px — a Pro Max, or any in-app browser
   that reports a slightly wider viewport — asking for the full 420px and getting it squeezed to
   the card's exact inner width, filling it edge to edge. */
.fw-wheel-wrap { position: relative; width: min(var(--fw-wheel, 420px), 68vw);
  height: min(var(--fw-wheel, 420px), 68vw); max-width: 100%; margin: 14px auto 18px; }
.fw-wheel-wrap::after {               /* glow behind the wheel */
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, var(--fw-glow, rgba(255,117,24,.35)), transparent 65%); z-index: -1;
}
.fw-wheel {
  width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-panel-top, #2a1442), 0 14px 40px rgba(0,0,0,.6);
  transform: rotate(0deg);
}
.fw-wheel__label { font: 700 11px Inter, system-ui, sans-serif; }

.fw-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 26px solid var(--fw-accent);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.fw-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fw-panel-top, #2a1442); border: 3px solid var(--fw-accent); font-size: 24px; z-index: 2;
}

/* ------------------------------------------------------------ step switching */
.fw-step-wheel, .fw-result { display: none; }
.fw-modal.is-unlocked .fw-step-email { display: none; }
.fw-modal.is-unlocked .fw-step-wheel { display: block; }
.fw-modal.is-done     .fw-step-wheel { display: none; }
.fw-modal.is-done     .fw-result     { display: block; animation: fw-rise .35s ease; }

.fw-result__prize {
  font-size: 23px; font-weight: 800; color: var(--fw-accent); margin: 10px 0 4px;
}
.fw-result__code {
  display: inline-block; margin: 10px 0 8px; padding: 10px 18px;
  font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  color: #fff; background: rgba(4, 172, 180, .14);
  border: 1px dashed var(--fw-alt2); border-radius: 8px;
}

/* ------------------------------------------------------------------ desktop
   On a laptop the card was sitting at phone proportions in the middle of a wide
   screen and reading as an afterthought. The wheel itself is a setting, so what
   changes here is everything around it: a wider card, more air, larger type.
   Height is capped at 94vh with the card scrolling, so a short window still fits. */
@media (min-width: 992px) {
  .fw-card { width: min(720px, 100%); padding: 34px 40px 38px; }
  .fw-card__kicker { font-size: 13px; }
  .fw-card__title  { font-size: 32px; margin: 8px 0 6px; }
  .fw-card__sub    { font-size: 16px; margin: 0 0 20px; }
  .fw-form input   { font-size: 16px; padding: 15px 18px; }
  .fw-btn          { padding: 16px 32px; font-size: 16px; }
  .fw-wheel-wrap   { margin: 18px auto 22px; }
}

/* A tall wheel plus a tall card does not fit a short laptop window. What gives way is the wheel
   and the spacing around it, never the copy — that is what tells them what to do, and the spin
   button has to stay in view without scrolling. */
@media (min-width: 992px) and (max-height: 820px) {
  .fw-wheel-wrap { width: min(var(--fw-wheel, 420px), 50vh); height: min(var(--fw-wheel, 420px), 50vh); }
}
@media (min-width: 992px) and (max-height: 700px) {
  .fw-card        { padding: 22px 36px 24px; }
  .fw-card__title { font-size: 26px; margin: 4px 0 2px; }
  .fw-card__sub   { font-size: 15px; margin: 0 0 10px; }
  .fw-wheel-wrap  { width: min(var(--fw-wheel, 420px), 46vh); height: min(var(--fw-wheel, 420px), 46vh);
                    margin: 8px auto 12px; }
  .fw-btn         { padding: 13px 28px; }
}

@media (max-width: 420px) {
  .fw-card { padding: 22px 16px 26px; }
  .fw-card__title { font-size: 21px; }
  /* the close button sits top-right; without this the kicker runs underneath it on a phone */
  .fw-card__kicker { padding-inline: 38px; font-size: 11px; }
}

/* The opener. Bottom-left on purpose: the mobile player panel owns the bottom-right corner and the
   back-to-top button sits there too. */
.fw-fab {
  /* Under the audio bar, not over it. The theme pins Sonaar's sticky player at 1040 and the
     phone panel at 1035, so 1030 lets the bar slide up over this button when a track starts —
     which is what the player is for. The popup itself stays at 2000 and covers everything. */
  position: fixed; left: 16px; bottom: 18px; z-index: 1030;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border: 0; border-radius: 40px; cursor: pointer;
  font: 700 14px/1 Inter, system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, var(--fw-accent), var(--fw-accent2, #ff3d81));
  box-shadow: 0 10px 28px var(--fw-glow, rgba(255,117,24,.4));
  transition: transform .15s ease, box-shadow .15s ease;
}
.fw-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--fw-glow-strong, rgba(255,117,24,.5)); }
.fw-fab svg { flex: 0 0 auto; }
@media (max-width: 575px) {
  .fw-fab span { display: none; }                 /* icon only, so it never crowds a phone screen */
  .fw-fab { padding: 12px; border-radius: 50%; }
}

/* the odds panel is inside the modal here, so it needs its own spacing */

/* the honeypot: off-screen rather than display:none, which some bots skip */
#fw-website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* while the server is deciding */
.fw-modal.is-waiting .fw-btn { opacity: .6; cursor: progress; }