:root {
  color-scheme: light;
  background: #dcecff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background: #dcecff;
}

.page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: clip;
}

.page__background {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: #dcecff;
  background-image: image-set(url("images/3.webp") type("image/webp"), url("images/3.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.page__content {
  position: relative;
  z-index: 0;
  display: flow-root;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.fortune {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: clamp(2.5rem, 10dvh, 7.5rem) minmax(0, 1fr);
  align-items: center;
  padding: 0 clamp(.75rem, 2vw, 2rem) clamp(1rem, 3dvh, 2rem);
}

.fortune__wheel-area {
  display: grid;
  place-items: center;
  min-height: 0;
  transform: translateY(clamp(.25rem, 1.5dvh, 1rem));
}

.fortune__wheel-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.875rem, 3.5dvh, 2.8rem);
}

.wheel {
  --wheel-size: min(52vw, 56dvh, 42.5rem);
  position: relative;
  width: var(--wheel-size);
  aspect-ratio: 1;
  filter: drop-shadow(0 1rem 1.45rem rgb(24 104 182 / .14));
}

.wheel__ambient {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: rgb(83 190 248 / .24);
  filter: blur(1.85rem);
  transform: scale(1.09);
}

.wheel__frame {
  position: absolute;
  inset: 0;
  padding: clamp(.28rem, .72vw, .58rem);
  overflow: hidden;
  border: clamp(.1rem, .2vw, .17rem) solid #e8c768;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 14%, #72d6ff 0, #1489df 34%, #0758bb 69%, #043a84 100%);
  box-shadow: inset 0 0 0 clamp(.11rem, .24vw, .2rem) rgb(255 255 255 / .6), inset 0 -.35rem .7rem rgb(0 49 134 / .25), 0 .65rem 1.35rem rgb(12 95 177 / .17), 0 0 1.25rem rgb(61 188 247 / .2);
}

.wheel__frame::after {
  content: "";
  position: absolute;
  inset: clamp(.22rem, .48vw, .4rem);
  border: 1px solid rgb(229 251 255 / .82);
  border-radius: inherit;
  pointer-events: none;
}

.wheel__assembly {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 5.6s cubic-bezier(.12, .83, .16, 1);
}

.wheel__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wheel__base { fill: #eaf8ff; }
.wheel-segment__shape { stroke: rgb(255 255 255 / .92); stroke-width: .27; vector-effect: non-scaling-stroke; }
.wheel-segment--light .wheel-segment__shape { fill: url(#segmentLight); }
.wheel-segment--blue .wheel-segment__shape { fill: url(#segmentBlue); }
.wheel__polish { fill: url(#wheelLight); opacity: .13; pointer-events: none; }
.wheel__inner-line { fill: none; stroke: rgb(103 205 247 / .84); stroke-width: .28; vector-effect: non-scaling-stroke; }

.wheel__hub {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 17%;
  aspect-ratio: 1;
  border: clamp(.1rem, .2vw, .17rem) solid #e9c968;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 24%, #d9f8ff 0 4%, #63c7f5 10%, #147ace 39%, #0756ad 68%, #043b85 100%);
  box-shadow: inset 0 0 0 clamp(.1rem, .22vw, .18rem) rgb(229 251 255 / .62), inset -.3rem -.4rem .5rem rgb(0 47 132 / .23), 0 .3rem .65rem rgb(4 75 161 / .22);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.wheel__hub span {
  position: absolute;
  inset: 15%;
  border: 1px solid rgb(255 255 255 / .78);
  border-radius: inherit;
  background: radial-gradient(circle at 35% 20%, rgb(255 255 255 / .8), transparent 35%);
}

.wheel__pointer {
  position: absolute;
  z-index: 4;
  top: -7%;
  left: 50%;
  width: 17%;
  filter: drop-shadow(0 .28rem .28rem rgb(7 77 171 / .24));
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transform-origin: 50% 8%;
}

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

.spin-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: clamp(11.8rem, 18vw, 14.5rem);
  min-height: clamp(3.3rem, 6.5dvh, 4rem);
  padding: .85rem 1.55rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .78);
  border-radius: 999px;
  color: #fff;
  font: 700 clamp(1rem, 1.6vw, 1.18rem)/1.1 system-ui, sans-serif;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #72d8ff 0%, #258fe4 38%, #0755b9 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .76), inset 0 -.26rem .42rem rgb(0 49 143 / .3), 0 .55rem 1.05rem rgb(12 105 197 / .24), 0 0 1rem rgb(73 195 255 / .22);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}

.spin-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .45) 49%, transparent 65%);
  transform: translateX(-130%);
  animation: button-shine 5.5s ease-in-out 2.2s infinite;
}

.spin-button > * { position: relative; }
.spin-button__icon { width: 1.25em; height: 1.25em; }
.spin-button:hover:not(:disabled) { transform: translateY(-.16rem); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -.25rem .45rem rgb(0 58 157 / .34), 0 .8rem 1.25rem rgb(12 105 197 / .32), 0 0 1.45rem rgb(73 195 255 / .4); }
.spin-button:hover:not(:disabled) .spin-button__icon { animation: icon-turn .65s ease; }
.spin-button:active:not(:disabled) { transform: translateY(.05rem) scale(.98); }
.spin-button:focus-visible { outline: 3px solid #f5cf6e; outline-offset: 4px; }
.spin-button:disabled { cursor: default; opacity: .72; }
.wheel.is-intro .wheel-segment__shape { animation: segment-in .5s cubic-bezier(.2, .8, .25, 1) var(--delay) both; transform-origin: 50px 50px; }
.wheel.is-intro .wheel-segment__prize { animation: prize-in .42s cubic-bezier(.22, 1, .36, 1) var(--prize-delay) both; transform-box: fill-box; transform-origin: center; }
.wheel.is-intro .wheel__hub { animation: hub-in .5s cubic-bezier(.2, .9, .25, 1) 1.12s both; }
.wheel.is-intro .wheel__pointer { animation: pointer-in .42s cubic-bezier(.2, .9, .25, 1) 1.3s both; }
.wheel.is-intro .wheel__frame { animation: frame-in .6s ease-out both; }

@keyframes frame-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes segment-in { from { opacity: 0; filter: blur(2px); transform: scale(.68); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes prize-in { from { opacity: 0; transform: translateY(1.35px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hub-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.78); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pointer-in { from { opacity: 0; transform: translateX(-50%) translateY(-.5rem) scale(.82); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes idle-glow { 50% { box-shadow: inset 0 0 0 clamp(.14rem, .35vw, .3rem) rgb(255 255 255 / .9), inset 0 0 1.2rem rgb(0 83 180 / .28), 0 0 0 clamp(.13rem, .3vw, .26rem) rgb(244 205 109 / .92), 0 .7rem 1.4rem rgb(16 92 167 / .24), 0 0 1rem rgb(77 205 255 / .35); } }
@keyframes button-shine { 15%, 100% { transform: translateX(130%); } }
@keyframes icon-turn { to { transform: rotate(180deg); } }

@media (max-aspect-ratio: 1 / 1) {
  .wheel { --wheel-size: min(88vw, 56dvh, 33.75rem); }
}

@media (max-width: 390px) {
  .fortune { grid-template-rows: clamp(1.35rem, 5dvh, 2.4rem) minmax(0, 1fr); padding-bottom: max(.65rem, env(safe-area-inset-bottom, 0px)); }
  .wheel { --wheel-size: min(88vw, 53dvh, 20rem); }
  .fortune__wheel-stack { gap: clamp(1.1rem, 2.5dvh, 1.35rem); }
}

@media (min-aspect-ratio: 1 / 1) and (max-height: 540px) {
  .fortune { grid-template-columns: 1fr; grid-template-rows: 1fr; padding-block: .75rem; }
  .fortune__header-space { display: none; }
  .wheel { --wheel-size: min(58vw, 62dvh, 23rem); }
  .fortune__wheel-stack { gap: .7rem; }
  .spin-button { min-width: 9.5rem; min-height: 2.75rem; padding-inline: 1rem; }
}

@media (max-width: 600px) {
  .wheel__ambient { filter: blur(1rem); }
  .attempt-badge, .prize-info { backdrop-filter: none; }
}

.modal-open { overflow: hidden; }
.winner-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)); opacity: 1; visibility: visible; transition: opacity .25s ease, visibility .25s ease; }
.winner-modal[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.winner-modal__backdrop { position: absolute; inset: 0; background: rgb(4 39 91 / .38); backdrop-filter: blur(7px); }
.winner-modal__card { position: relative; isolation: isolate; width: min(100%, 25rem); overflow: hidden; padding: clamp(1.5rem, 4vw, 2.3rem) clamp(1.35rem, 5vw, 2.7rem) clamp(1.35rem, 3vw, 2rem); border: 1px solid rgb(255 255 255 / .9); border-radius: 2rem; color: #0a346f; text-align: center; background: linear-gradient(145deg, rgb(255 255 255 / .98), rgb(231 248 255 / .96)); box-shadow: 0 1.5rem 4rem rgb(2 44 112 / .3), inset 0 1px 0 #fff; transform: translateY(0) scale(1); transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.winner-modal[aria-hidden="true"] .winner-modal__card { transform: translateY(1rem) scale(.94); }
.winner-modal__glow { position: absolute; z-index: -1; top: -25%; left: 50%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: rgb(78 198 255 / .36); filter: blur(2rem); transform: translateX(-50%); }
.winner-modal__badge { display: inline-block; margin-bottom: .5rem; padding: .4rem .7rem; border: 1px solid rgb(50 155 229 / .28); border-radius: 999px; color: #0878dc; background: rgb(255 255 255 / .72); font: 700 .82rem/1 system-ui; }
.winner-modal__prize { display: block; width: clamp(7.5rem, 35vw, 10rem); height: clamp(7.5rem, 35vw, 10rem); margin: 0 auto -.45rem; object-fit: contain; }
.winner-modal h2 { margin: 0; color: #082654; font: 800 clamp(1.55rem, 5vw, 2rem)/1.05 system-ui; letter-spacing: -.035em; }
.winner-modal p { margin: .8rem 0 .2rem; color: #557b9e; font: 500 .95rem/1.3 system-ui; }
.winner-modal strong { display: block; margin-bottom: .75rem; color: #087cf0; font: 800 clamp(1.65rem, 6vw, 2.2rem)/1 system-ui; letter-spacing: -.04em; }
.winner-modal__instruction { max-width: 20rem; margin: 0 auto 1.15rem; color: #557b9e; font: 500 clamp(.82rem, 2.8vw, .94rem)/1.42 system-ui; }
.winner-modal__button { display: grid; width: 100%; min-height: 3.15rem; place-items: center; border: 1px solid rgb(255 255 255 / .8); border-radius: 999px; color: #fff; text-decoration: none; background: linear-gradient(180deg, #6ed7ff, #197fd9 48%, #0750b4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 .5rem 1rem rgb(23 113 194 / .24); font: 700 1rem/1 system-ui; cursor: pointer; }
.winner-modal__button:focus-visible { outline: 3px solid #e8c768; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .wheel__assembly { transition-duration: .55s; }
}


@media (min-aspect-ratio: 13 / 20) and (max-aspect-ratio: 999 / 1000) {
  .page__background {
    background-image: image-set(url("images/2.webp") type("image/webp"), url("images/2.png") type("image/png"));
  }
}

@media (min-aspect-ratio: 1 / 1) {
  .page__background {
    background-image: image-set(url("images/1.webp") type("image/webp"), url("images/1.png") type("image/png"));
    background-position: center center;
  }
}


@media (min-aspect-ratio: 1 / 1) and (max-height: 500px) {
  .page__background {
    background-position: center 46%;
  }
}

@supports not (overflow: clip) {
  .page {
    overflow: hidden;
  }
}


.fortune { grid-template-rows: auto minmax(0, 1fr); padding-block: clamp(.7rem, 2dvh, 1.5rem); }
.hero-header { display: grid; justify-items: center; gap: clamp(.45rem, 1dvh, .75rem); max-width: 52rem; margin: 0 auto; text-align: center; animation: header-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.attempt-badge, .prize-info { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid rgb(81 174 239 / .35); border-radius: 999px; color: #0878dc; background: rgb(255 255 255 / .72); box-shadow: 0 .18rem .55rem rgb(61 144 205 / .08); backdrop-filter: blur(5px); font: 700 clamp(.78rem, 1.2vw, .92rem)/1 system-ui, sans-serif; }
.attempt-badge { padding: .48rem .78rem; }
.attempt-badge svg, .prize-info svg { width: 1.08em; height: 1.08em; flex: none; }
.hero-header h1 { margin: 0; color: #082654; font: 800 clamp(2.15rem, 4.1vw, 4rem)/.98 system-ui, sans-serif; letter-spacing: -.055em; }
.hero-header h1 strong { color: #087cf0; font: inherit; }
.hero-header__subtitle { max-width: 43rem; margin: 0; color: #476d94; font: 500 clamp(.88rem, 1.35vw, 1.08rem)/1.45 system-ui, sans-serif; }
.hero-header__support { margin: clamp(.28rem, 1dvh, .7rem) 0 0; padding: .52em .9em; border: 1px solid rgb(83 174 237 / .28); border-radius: 999px; color: #426f9b; background: rgb(255 255 255 / .58); box-shadow: inset 0 1px 0 rgb(255 255 255 / .86), 0 .35rem .9rem rgb(55 148 215 / .1); font: 700 clamp(1rem, 1.7vw, 1.3rem)/1 system-ui, sans-serif; letter-spacing: -.02em; text-shadow: 0 1px 0 rgb(255 255 255 / .75); }
.hero-header__support span { color: #087cf0; font-weight: 850; text-shadow: 0 .08em .3em rgb(20 148 244 / .22); }
.fortune__wheel-area { align-self: center; transform: translateY(clamp(0rem, .7dvh, .45rem)); }
.fortune__wheel-stack { gap: clamp(1rem, 2.3dvh, 1.45rem); }
.wheel { --wheel-size: min(43vw, 49dvh, 35rem); }
.fortune__action-area { display: flex; flex-direction: column; align-items: center; gap: clamp(.7rem, 1.7dvh, 1.1rem); }
.prize-info { padding: .48rem .82rem; color: #276da7; font-weight: 600; }
.wheel__pointer { top: -8%; width: 14%; }
.wheel__hub { width: 20%; border-color: #e8c768; background: radial-gradient(circle at 34% 21%, #c9f6ff 0 4%, #5cc7f4 14%, #147cd0 42%, #0755aa 70%, #043779 100%); box-shadow: inset 0 0 0 clamp(.1rem, .22vw, .19rem) rgb(235 253 255 / .72), inset -.3rem -.45rem .65rem rgb(0 43 125 / .28), 0 .34rem .7rem rgb(4 75 161 / .25); }
.wheel__hub span { display: grid; place-items: center; inset: 12%; border-color: rgb(221 249 255 / .9); background: radial-gradient(circle at 35% 18%, rgb(255 255 255 / .58), transparent 35%); color: #fff; }
.wheel__hub svg { width: 52%; height: 52%; filter: drop-shadow(0 .06rem .05rem rgb(0 63 160 / .2)); }
.spin-button { width: min(100%, clamp(17.5rem, 24vw, 22rem)); min-width: 0; min-height: clamp(3.45rem, 6.3dvh, 4.1rem); font-size: clamp(1rem, 1.45vw, 1.2rem); background: linear-gradient(180deg, #76dbff 0%, #278fe4 38%, #0752b6 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -.28rem .45rem rgb(0 44 132 / .32), 0 .35rem .45rem rgb(0 58 154 / .2), 0 .85rem 1.55rem rgb(50 176 245 / .2); }
.spin-button.is-spinning { opacity: 1; filter: saturate(.82) brightness(.96); cursor: progress; }
.spin-button.is-spinning .spin-button__icon { animation: button-spin .95s linear infinite; }
html.is-intro .hero-header { animation-delay: .05s; }
html.is-intro .prize-info { animation: info-in .4s cubic-bezier(.22, 1, .36, 1) 1.35s both; }
html.is-intro .spin-button { animation: cta-in .42s cubic-bezier(.22, 1, .36, 1) 1.53s both; }
@keyframes header-in { from { opacity: 0; transform: translateY(-.45rem); } to { opacity: 1; transform: none; } }
@keyframes info-in { from { opacity: 0; transform: translateY(.38rem); } to { opacity: 1; transform: none; } }
@keyframes cta-in { from { opacity: 0; transform: translateY(.55rem); } to { opacity: 1; transform: none; } }
@keyframes button-spin { to { transform: rotate(360deg); } }

@media (max-aspect-ratio: 1 / 1) {
  .wheel { --wheel-size: min(78vw, 40dvh, 28rem); }
  .hero-header { gap: clamp(.38rem, .9dvh, .65rem); }
  .hero-header h1 { font-size: clamp(2rem, 9.2vw, 2.75rem); }
}

@media (max-width: 390px) {
  .fortune { padding-block: max(.4rem, env(safe-area-inset-top, 0px)) max(.55rem, env(safe-area-inset-bottom, 0px)); }
  .wheel { --wheel-size: min(78vw, 35dvh, 20rem); }
  .attempt-badge, .prize-info { padding: .4rem .64rem; font-size: .72rem; }
  .hero-header h1 { font-size: clamp(1.85rem, 9.6vw, 2.25rem); }
  .hero-header__subtitle { font-size: .76rem; line-height: 1.32; }
  .hero-header__support { font-size: .86rem; }
  .fortune__wheel-stack { gap: .65rem; }
  .fortune__action-area { gap: .5rem; }
  .spin-button { min-height: 3rem; font-size: .93rem; }
}

@media (min-aspect-ratio: 1 / 1) and (max-height: 540px) {
  .fortune { grid-template-rows: auto minmax(0,1fr); }
  .hero-header { gap: .25rem; }
  .attempt-badge { padding: .3rem .55rem; font-size: .68rem; }
  .hero-header h1 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); }
  .hero-header__subtitle { font-size: .7rem; line-height: 1.2; }
  .wheel { --wheel-size: min(41vw, 48dvh, 18rem); }
  .fortune__wheel-stack { gap: .35rem; }
  .fortune__action-area { gap: .3rem; }
  .prize-info { padding: .3rem .55rem; font-size: .65rem; }
  .spin-button { min-height: 2.6rem; width: 14rem; font-size: .85rem; }
}