:root {
  --travlite-blue: #2b6cb0;
  --travlite-blue-dark: #265e9a;
  --travlite-ink: #222222;
  --travlite-muted: #515151;
  --travlite-surface: #ffffff;
  --travlite-ground: #f7f7f7;
  --travlite-success: #13612e;
  --travlite-orange: #f5a524;
}

body.travlite-wheel-open { overflow: hidden; }
.travlite-wheel-modal[hidden] { display: none; }
.travlite-wheel-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.travlite-wheel-backdrop { position: absolute; inset: 0; background: rgba(34, 34, 34, .62); }
.travlite-wheel-panel { position: relative; width: min(92vw, 470px); max-height: 92vh; overflow: auto; padding: 28px; border: 1px solid var(--travlite-ground); border-radius: 14px; background: var(--travlite-surface); color: var(--travlite-ink); text-align: center; box-shadow: 0 24px 70px rgba(38, 94, 154, .22); }
.travlite-wheel-panel h2 { margin: 0 34px 8px; color: var(--travlite-ink); font-size: clamp(24px, 5vw, 32px); line-height: 1.1; }
.travlite-wheel-panel > p { max-width: 38ch; margin: 0 auto 18px; color: var(--travlite-muted); line-height: 1.55; }
.travlite-wheel-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: var(--travlite-ground); color: var(--travlite-ink); font-size: 27px; line-height: 1; cursor: pointer; }
.travlite-wheel-stage { position: relative; width: min(72vw, 320px); aspect-ratio: 1; margin: 10px auto 18px; }
.travlite-wheel { --travlite-spin: 0deg; position: absolute; inset: 0; overflow: hidden; border: 8px solid var(--travlite-surface); border-radius: 50%; background: conic-gradient(from -22.5deg, var(--travlite-wheel-win) 0 45deg, var(--travlite-wheel-try-one) 45deg 90deg, var(--travlite-wheel-try-two) 90deg 135deg, var(--travlite-wheel-try-one) 135deg 180deg, var(--travlite-wheel-win) 180deg 225deg, var(--travlite-wheel-try-one) 225deg 270deg, var(--travlite-wheel-try-two) 270deg 315deg, var(--travlite-wheel-try-one) 315deg 360deg); box-shadow: 0 0 0 2px var(--travlite-blue-dark), 0 12px 34px rgba(38, 94, 154, .2); transform: rotate(0deg); }
.travlite-wheel span { display: none; }
.travlite-wheel em { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 94px; overflow: hidden; color: #fff; font-size: clamp(10px, 2.7vw, 12px); font-style: normal; font-weight: 800; letter-spacing: .02em; line-height: 1; text-align: center; text-overflow: clip; text-shadow: 0 1px 2px rgba(34,34,34,.35); white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--a)); }
.travlite-wheel-hub { position: absolute; left: 50%; top: 50%; display: grid; width: 58px; height: 58px; place-items: center; transform: translate(-50%, -50%); border: 5px solid var(--travlite-surface); border-radius: 50%; background: var(--travlite-ink); color: var(--travlite-surface); font-size: 16px; letter-spacing: .08em; }
.travlite-wheel-pointer { position: absolute; z-index: 3; left: 50%; top: -8px; width: 0; height: 0; transform: translateX(-50%); border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 31px solid var(--travlite-pointer); filter: drop-shadow(0 3px 2px rgba(34,34,34,.2)); }
.travlite-wheel-spinning { transition: transform 4.2s cubic-bezier(.12,.68,.12,1); transform: rotate(var(--travlite-spin)); }
.travlite-wheel-instant { transform: rotate(var(--travlite-spin)); }
.travlite-wheel-spin, .travlite-wheel-close { min-height: 46px; padding: 11px 22px; border: 0; border-radius: 8px; background: var(--travlite-button); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.travlite-wheel-spin:hover, .travlite-wheel-close:hover { filter: brightness(.88); }
.travlite-wheel-spin:active, .travlite-wheel-close:active { transform: translateY(1px); }
.travlite-wheel-spin:focus-visible, .travlite-wheel-close:focus-visible, .travlite-wheel-x:focus-visible { outline: 3px solid var(--travlite-orange); outline-offset: 3px; }
.travlite-wheel-spin:disabled { opacity: .72; cursor: wait; }
.travlite-wheel-result { min-height: 26px; font-weight: 700; }
.travlite-wheel-result.is-win { color: var(--travlite-success); }
.travlite-wheel-result.is-lose { color: var(--travlite-muted); }

@media (max-width: 480px) {
  .travlite-wheel-panel { padding: 24px 16px 20px; }
  .travlite-wheel-stage { width: min(74vw, 285px); }
  .travlite-wheel em { width: 80px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .travlite-wheel, .travlite-wheel-spin, .travlite-wheel-close { transition: none !important; }
}