@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #F7F3F3;
  --muted: #C4BBBB;
  --faint: #8C8384;
  --red: #FF3B47;
  --red-mid: #D9142A;
  --red-deep: #7A0712;
  --bg: #060506;

  --bg-dim: 0.3;

  --bg-mobile-x: 35%;

  --wheel-size: min(calc(100cqh * 0.972), 100cqw, 980px);
}

* { box-sizing: border-box; }

button, input, select, textarea { font: inherit; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg) url("../images/background.jpg") center / cover no-repeat;
  touch-action: manipulation;
}

.scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 4, 5, .85) 0%, rgba(6, 4, 5, .7) 32%, rgba(6, 4, 5, .15) 58%, rgba(6, 4, 5, 0) 100%),
    linear-gradient(0deg, rgba(6, 4, 5, .5) 0%, rgba(6, 4, 5, 0) 25%),
    linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim)));
}

.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-rows: minmax(0, 1fr);
}

.copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  min-height: 0;
  padding: 44px 16px 140px clamp(24px, 5vw, 96px);
}

.logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}

.promo {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: left center;
}

.copy-body { display: flex; flex-direction: column; gap: 26px; max-width: 760px; min-height: 0; flex: 0 1 auto; margin: auto 0; }

.eyebrow {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 59, 71, .5);
  background: rgba(255, 59, 71, .1);
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: pulse 1.6s ease-in-out infinite;
}

h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, min(4.4vw, 8vh), 70px);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px 16px 118px;
  container-type: size;
}

.wheel {
  position: relative;
  width: var(--wheel-size);
  aspect-ratio: 520 / 535;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;
}

.wheel-shadow {
  position: absolute;
  left: 1.538%;
  top: 4.299%;
  width: 96.923%;
  height: 94.206%;
  border-radius: 50%;
  box-shadow: 0 40px 70px rgba(0, 0, 0, .75), 0 0 80px rgba(217, 20, 42, .28);
  pointer-events: none;
}
.wheel:focus-visible { outline: 3px solid var(--red); outline-offset: 8px; border-radius: 50%; }
.wheel.is-spinning { cursor: default; }

.layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.disc {
  transform-origin: 50% 51.402%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.overlay, .rim { pointer-events: none; }

.seg-label {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .08em;
}

.hub-text {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .1em;
  fill: #FFFFFF;
}

.floor-shadow {
  display: none;
  width: calc(var(--wheel-size) * .7);
  height: 28px;
  margin-top: 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
}

.pointer {
  position: absolute;
  left: 44.231%;
  top: -0.935%;
  width: 11.538%;
  height: 17.944%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 26.04%;
  will-change: transform;
}

.hub-wrap {
  position: absolute;
  left: 36.538%;
  top: 38.318%;
  width: 26.923%;
  height: 26.168%;
  pointer-events: none;
  will-change: transform;
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.hub-breathe {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.hub, .hub-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (hover: hover) {
  .wheel:hover:not(.is-spinning):not(.is-won) .hub-wrap { transform: scale(1.08); }
}
.wheel:active:not(.is-spinning):not(.is-won) .hub-wrap { transform: scale(.92); transition-duration: .08s; }

.hub-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 70, 85, 0) 170deg,
    rgba(255, 110, 120, .35) 290deg, rgba(255, 235, 238, .8) 352deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 75%, #000 87%, transparent 90%);
          mask: radial-gradient(closest-side, transparent 72%, #000 75%, #000 87%, transparent 90%);
  animation: orbit 3.4s linear infinite;
}
.hub-shine {
  position: absolute;
  inset: 12.857%;
  border-radius: 50%;
  overflow: hidden;
}
.hub-shine span {
  position: absolute;
  top: -30%;
  left: 0;
  width: 34%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  transform: translateX(-160%) rotate(20deg);
  animation: shine 4.8s ease-in-out infinite;
}

.wheel.is-spinning .hub-fx, .wheel.is-won .hub-fx { opacity: 0; transition: opacity .3s; }
.wheel.is-spinning .hub-fx *, .wheel.is-won .hub-fx * { animation: none; }
.wheel.is-spinning .hub-breathe, .wheel.is-won .hub-breathe { animation: none; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes shine { 0% { transform: translateX(-160%) rotate(20deg); } 45%, 100% { transform: translateX(340%) rotate(20deg); } }

.bulbs { position: absolute; inset: 0; pointer-events: none; }
.bulb-group { position: absolute; inset: 0; }
.bulb {
  position: absolute;
  width: 2.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #5A1218, #24060A);
}
.bulb.on {
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #FF8A90 40%, #E0182C);
  box-shadow: 0 0 8px 3px rgba(255, 60, 75, .9), 0 0 20px 7px rgba(217, 20, 42, .45);
}
.bulb-group.lit { will-change: opacity; animation: blink 1.2s steps(1) infinite; }
.bulb-group.lit.b { animation-delay: -.6s; }
.wheel.is-spinning .bulb-group.lit { animation-duration: .3s; }
.wheel.is-spinning .bulb-group.lit.b { animation-delay: -.15s; }
.wheel.is-won .bulb.on {
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFFFFF 40%, #FFC9CD);
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, .85), 0 0 22px 8px rgba(255, 59, 71, .5);
}
.wheel.is-won .bulb-group.lit { animation-duration: .36s; }
.wheel.is-won .bulb-group.lit.b { animation-delay: -.18s; }

.is-hidden *, .is-hidden *::before, .is-hidden *::after { animation-play-state: paused !important; }

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.timer {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 8, 11, .94), rgba(6, 4, 5, .94));
  border: 1px solid rgba(255, 59, 71, .5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 120, 130, .15);
}
.timer-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}
.timer-units { display: flex; align-items: flex-start; gap: 8px; }
.unit { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px; }
.num {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: linear-gradient(180deg, #2A0C10 0%, #13070A 50%, #090405 51%, #1A080B 100%);
  border: 1px solid rgba(255, 59, 71, .35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.lbl { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sep { font-weight: 700; font-size: 28px; color: var(--red); padding-top: 4px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 2, 3, .82);
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
.modal[hidden] { display: none; }
.modal.show { opacity: 1; }

.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vmin;
  height: 100vmin;
  margin: -50vmin 0 0 -50vmin;
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
}
.modal.show .burst { animation: burstIn .9s cubic-bezier(.2, .9, .3, 1) .1s forwards; }
@keyframes burstIn { to { opacity: 1; transform: scale(1); } }

.sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.spark {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
}
.spark.red   { background: radial-gradient(circle, #FFFFFF 0 12%, #FF6A73 22%, #FF2D3B 34%, rgba(255, 45, 59, .45) 50%, rgba(255, 45, 59, 0) 70%); }
.spark.white { background: radial-gradient(circle, #FFFFFF 0 20%, rgba(255, 255, 255, .85) 32%, rgba(255, 190, 196, .35) 50%, rgba(255, 255, 255, 0) 70%); }
.spark-flash {
  position: absolute;
  left: -160px;
  top: -160px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 10%, rgba(255, 59, 71, .55) 30%, rgba(255, 59, 71, 0) 68%);
  opacity: 0;
  animation: flash .7s ease-out forwards;
}
@keyframes flash { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.4); } }
.modal-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 32px 32px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, #250A0E, #0B0607);
  border: 1px solid rgba(255, 59, 71, .55);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 80px rgba(217, 20, 42, .3);
  z-index: 1;
  opacity: 0;
}
.modal.show .modal-card { animation: cardIn .8s cubic-bezier(.2, 1, .3, 1) .15s both; }
@keyframes cardIn {
  0%   { opacity: 0; transform: perspective(900px) translateY(40px) scale(.35) rotateX(60deg); }
  55%  { opacity: 1; transform: perspective(900px) translateY(-6px) scale(1.05) rotateX(-8deg); }
  78%  { transform: perspective(900px) translateY(2px) scale(.985) rotateX(3deg); }
  100% { opacity: 1; transform: perspective(900px) translateY(0) scale(1) rotateX(0deg); }
}
.modal-card > * { opacity: 0; }
.modal.show .popup-img { animation: imgPop .8s cubic-bezier(.2, 1.6, .4, 1) .45s both; }
.modal.show .modal-card h2 { animation: rise .55s cubic-bezier(.2, .9, .3, 1) .7s both; }
.modal.show .modal-card p { animation: rise .55s cubic-bezier(.2, .9, .3, 1) .82s both; }
.modal.show .claim-wrap { animation: btnPop .6s cubic-bezier(.2, 1.6, .4, 1) .98s both; }
.modal.show .claim { animation: btnBreathe 2.4s ease-in-out 1.8s infinite; }
@keyframes imgPop { 0% { opacity: 0; transform: scale(0) rotate(-25deg); } 70% { opacity: 1; transform: scale(1.12) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes btnPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes btnBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.popup-img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
}
.modal-card h2 { margin: 14px 0 8px; font-weight: 700; font-size: 32px; color: var(--ink); }
.modal-card p { margin: 0 0 28px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.claim {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  color: #FFFFFF;
  background: linear-gradient(180deg, #FF4A55, #D9142A 60%, #A00A1B);
  box-shadow: 0 10px 30px rgba(217, 20, 42, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.claim { position: relative; overflow: hidden; }
.claim-shine {
  position: absolute;
  top: -20%;
  left: 0;
  width: 30%;
  height: 140%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}
.modal.show .claim-shine { animation: claimShine 2.8s ease-in-out 1.6s infinite; }
@keyframes claimShine { 0% { transform: translateX(-150%) skewX(-20deg); } 40%, 100% { transform: translateX(420%) skewX(-20deg); } }
.claim:hover { filter: brightness(1.1); }

@media (max-height: 640px) {
  .copy { padding: 22px 12px 104px clamp(20px, 4vw, 64px); gap: 16px; }
  .logo { height: 38px; }
  .copy-body { gap: 14px; }
  .eyebrow { padding: 6px 12px; font-size: 11px; }
  .stage { padding: 6px 12px 96px; }
  .timer { bottom: 10px; padding: 8px 14px; gap: 4px; }
  .timer-label { font-size: 10px; }
  .unit { min-width: 46px; gap: 2px; }
  .num { font-size: 20px; padding: 4px 6px; }
  .sep { font-size: 18px; padding-top: 2px; }
}

@media (max-width: 900px) and (orientation: portrait) {
  body { background-position: var(--bg-mobile-x) center; }
  .page { display: flex; flex-direction: column; }
  .scrim {
    background:
      linear-gradient(180deg, rgba(6, 4, 5, .85) 0%, rgba(6, 4, 5, .45) 40%, rgba(6, 4, 5, .2) 100%),
      linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim)));
  }
  .copy {
    flex: none;
    padding: max(16px, env(safe-area-inset-top)) 20px 0;
    gap: 14px;
  }
  .logo { height: 36px; }
  .copy-body { gap: 10px; margin: 0; }
  .eyebrow { padding: 5px 12px; font-size: 11px; letter-spacing: .12em; }
  h1 { font-size: clamp(20px, min(6.4vw, 3.9vh), 40px); line-height: 1.12; }
  .stage {
    flex: 1 1 auto;
    padding: 4px 4px calc(100px + env(safe-area-inset-bottom));
  }
  :root { --wheel-size: min(100cqh * 0.972, 100cqw, 680px); }
  .timer { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 12px; gap: 4px; }
  .timer-label { font-size: 10px; letter-spacing: .18em; }
  .timer-units { gap: 5px; }
  .unit { min-width: 46px; gap: 2px; }
  .num { font-size: 20px; padding: 4px 6px; border-radius: 8px; }
  .lbl { font-size: 9px; }
  .sep { font-size: 18px; padding-top: 2px; }
  .modal-card { padding: 32px 22px 24px; }
  .modal-card h2 { font-size: 26px; }
  .popup-img { height: 96px; }
  .promo { width: auto; max-width: 100%; max-height: 19vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bulb-group.lit, .eyebrow .dot, .hub-orbit, .hub-shine span, .hub-breathe, .burst, .claim-shine { animation: none !important; }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  .copy { gap: 10px; }
  .logo { height: 30px; }
  .promo { max-height: 15vh; }
}

.popup-open .bulb-group.lit, .popup-open .eyebrow .dot { animation: none; }

[data-i18n] { white-space: pre-line; }