:root { --teal: #00b9bf; --deep: #001e20; --mint: #affff2; --cream: #fff7b0; }
* { box-sizing: border-box; touch-action: manipulation; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { color: #fff; background: #001e20; font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.is-hidden { display: none !important; }

.campaign-shell { min-height: 100svh; position: relative; overflow: hidden; background: url("/wheel-assets/images/bg-large@2x.webp") center/cover no-repeat; padding: 110px 5vw 56px; }
.campaign-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(0,20,20,.16)); }
.site-header { position: absolute; z-index: 50; top: 38px; left: 5vw; right: 5vw; display: flex; justify-content: space-between; align-items: center; }
.askona-logo { width: 180px; }
.sound-button { width: 60px; height: 60px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 12px; color: #fff; background: transparent; }
.sound-button svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-button.is-off { opacity: .72; }
.screen-enter { animation: reveal .55s cubic-bezier(.3,0,.3,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: none; } }

.primary-button, .outline-button { min-width: 270px; min-height: 52px; display: inline-flex; justify-content: center; align-items: center; padding: 12px 24px; border: 0; border-radius: 16px; background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.primary-button:hover { background: #00ced5; transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button.full, .outline-button.full { width: 100%; min-width: 0; }
.outline-button { border: 1px solid var(--teal); background: #fff; color: var(--teal); }
.white-card { background: #fff; color: #222; border-radius: 36px; box-shadow: 0 24px 70px rgba(0,20,20,.28); }

.intro-screen { width: min(1488px, 100%); min-height: calc(100svh - 166px); margin: auto; position: relative; display: grid; grid-template-rows: 1fr auto; align-items: center; }
.intro-copy { z-index: 5; position: relative; width: 52%; padding: 10px 0 68px; }
.intro-copy h1 { max-width: 760px; margin: 0 0 26px; font-size: clamp(62px, 5.5vw, 92px); font-weight: 800; line-height: .83; letter-spacing: -.055em; }
.intro-copy p { max-width: 470px; margin: 0; font-size: clamp(19px, 1.4vw, 24px); line-height: 1.35; }
.intro-mobile-button { display: none; margin-top: 18px; }
.intro-art { position: absolute; z-index: 2; width: 1003px; height: 1064px; left: calc(50% - 230px); bottom: 18px; pointer-events: none; }
.intro-art img { position: absolute; }
.intro-wheel { width: 1003px; inset: 0 auto auto 0; animation: wheel-arrive 1.5s cubic-bezier(.3,0,.3,1) both .25s; }
.gift-one { width: 182px; top: 0; left: 96px; animation: float 8s ease-in-out infinite; }
.gift-two { width: 497px; right: -190px; bottom: -290px; animation: float 8s ease-in-out infinite -2s; }
.coin-one { width: 210px; right: -104px; bottom: 120px; animation: float 6.7s ease-in-out infinite -1s; }
.coin-two { width: 250px; left: -490px; bottom: 42px; animation: float 5.5s ease-in-out infinite -3s; }
@keyframes wheel-arrive { from { opacity: 0; transform: rotate(-4deg) translateY(4%); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(3%); } }
.prize-panel { z-index: 10; position: relative; padding: 34px 30px 44px; border: 3px solid var(--mint); border-bottom: 0; border-radius: 80px 80px 0 0; text-align: center; box-shadow: 0 13px 13px rgba(0,30,32,.5); backdrop-filter: blur(2px); }
.prize-panel > p { margin: 24px 0 20px; font-size: 16px; }
.prize-panel > a { display: block; margin-top: 16px; color: var(--teal); font-size: 14px; }
.prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 425px)); justify-content: center; gap: 12px; }
.prize-grid article { min-height: 106px; display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 16px; border-radius: 30px; background: var(--cream); color: #222; text-align: left; font-size: 21px; line-height: 1.22; }
.prize-grid img { width: 115px; height: 88px; object-fit: contain; }

.center-screen { min-height: calc(100svh - 166px); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 5; }
.registration-card { width: min(570px, 100%); padding: 32px 24px 24px; position: relative; text-align: center; }
.registration-card h1, .otp-card h1 { margin: 0 0 10px; font-size: 26px; font-weight: 700; line-height: 1.05; }
.registration-card > p, .otp-card > p { max-width: 420px; margin: 0 auto; color: #344044; font-size: 16px; font-weight: 500; line-height: 1.35; }
.registration-card form { margin-top: 24px; }
.registration-card form > input { width: 100%; height: 40px; display: block; margin-top: 20px; padding: 5px 12px; border: 1px solid rgba(46,60,76,.4); border-radius: 12px; background: #fff; color: #222; text-align: center; font-size: 16px; font-weight: 500; }
.registration-card form > input:first-child { margin-top: 0; }
.registration-card input:focus, .otp-grid input:focus { border-color: var(--teal); outline: 3px solid rgba(0,185,191,.16); }
.registration-card .primary-button { margin-top: 22px; }
.marketing-row { display: flex; justify-content: center; gap: 9px; align-items: center; margin: 18px 0 0; color: #647174; font-family: Arial, sans-serif; font-size: 12px; }
.marketing-row input { width: 17px; height: 17px; accent-color: var(--teal); }
.consent-note { width: min(590px, 100%); margin: 24px auto 0; color: #fff; text-align: center; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.45; }
.consent-note a { color: var(--teal); }
.form-error { margin: 14px 0 0 !important; padding: 9px 12px; border-radius: 10px; background: #fff0f3; color: #c0224b !important; font-family: Arial, sans-serif; font-size: 12px !important; line-height: 1.35 !important; }
.registration-card.is-loading > :not(.card-loader) { visibility: hidden; }
.card-loader { position: absolute; inset: 0; display: grid; place-items: center; }
.card-loader span { width: 72px; height: 72px; border: 5px solid rgba(0,185,191,.18); border-top-color: var(--teal); border-radius: 50%; animation: rotate 1s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

.otp-card { width: min(320px, 100%); padding: 32px 24px 24px; text-align: center; }
.otp-card > p { font-size: 15px; }
.otp-card form { margin-top: 20px; }
.otp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.otp-grid input { width: 100%; height: 64px; border: 0; border-radius: 8px; background: #cefafb; color: var(--teal); text-align: center; font-size: 38px; font-weight: 700; }
.verification-status { min-height: 18px; margin: 14px 0 0; color: #718083; font-family: Arial, sans-serif; font-size: 11px; }
.otp-card .primary-button { margin-top: 14px; }
.otp-card .outline-button { margin-top: 12px; }
.eligibility-card { width: min(430px, 100%); padding: 34px 30px 30px; text-align: center; }
.eligibility-card h1 { margin: 0 0 14px; color: #263638; font-size: 28px; line-height: 1.08; }
.eligibility-card p { margin: 0; color: #5a6668; font-size: 16px; line-height: 1.45; }
.eligibility-card .outline-button { margin-top: 24px; }

.game-ready { width: min(1020px, 100%); min-height: calc(100svh - 166px); margin: auto; position: relative; display: flex; align-items: center; z-index: 4; }
.game-card { z-index: 8; width: 470px; padding: 30px; text-align: center; transform: translateX(-4%); }
.game-card h1 { margin: 0 0 14px; font-size: 32px; font-weight: 700; line-height: 1.08; }
.game-card p { margin: 0; color: #5a6668; font-size: 16px; line-height: 1.4; }
.game-card .primary-button { margin-top: 20px; }
.game-note { z-index: 8; position: absolute; width: 470px; top: calc(50% + 185px); left: -20px; margin: 0; text-align: center; font-family: Arial, sans-serif; font-size: 13px; }
.game-note a { color: var(--teal); }

.wheel-mount .native-wheel { width: min(804px, 80svh); aspect-ratio: 1; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); transition: transform 1s ease-in-out; }
.wheel-mount.compact .native-wheel { right: -80px; transform: translate(0, -50%) scale(.64); filter: saturate(.72) brightness(.78); }
.wheel-rotor { position: absolute; inset: 0; transform: rotate(var(--wheel-target, 0deg)); transform-origin: center; }
.native-wheel.is-spinning .wheel-rotor { animation: wheel-spin 5s cubic-bezier(.08,.66,.08,1) both; }
@keyframes wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(var(--wheel-target, 0deg)); } }
.wheel-bg, .wheel-sections, .wheel-shadow, .wheel-labels, .wheel-lights { position: absolute; inset: 0; }
.wheel-bg { background: url("/wheel-assets/images/wheel-bg.svg") center/115.5% 112% no-repeat; }
.wheel-sections { z-index: 2; background: url("/wheel-assets/images/wheel-sections.svg") center/115.5% no-repeat; }
.wheel-sections::after { content: ""; position: absolute; inset: 0; background: url("/wheel-assets/images/wheel-lines.svg") center/87.5% 91.3% no-repeat; }
.wheel-shadow { z-index: 3; width: 91.3%; height: 91.3%; top: 4.35%; left: 4.35%; border-radius: 50%; box-shadow: inset 0 0 80px rgba(0,71,74,.55); pointer-events: none; }
.wheel-labels { z-index: 5; }
.wheel-sector { position: absolute; width: 50%; top: calc(50% - 13px); left: 50%; transform-origin: left center; color: #fff; text-align: center; white-space: nowrap; font-size: clamp(15px, 2.9vmin, 26px); font-weight: 700; line-height: 1; }
.wheel-sector:nth-child(odd) { color: var(--teal); }
.wheel-sector span { width: 70%; display: block; margin-left: 18%; }
.wheel-sector small { display: block; margin-top: 3px; font-size: .58em; font-weight: 600; }
.wheel-lights { z-index: 10; }
.wheel-lights i { position: absolute; width: 50%; top: 50%; left: 50%; transform-origin: left center; }
.wheel-lights i span { position: absolute; width: 18px; height: 18px; top: -9px; right: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #fff, 0 0 24px 10px rgba(255,255,255,.8); }
.native-wheel.is-spinning .wheel-lights i:nth-child(2n) span { animation: light-pulse .35s alternate infinite; }
@keyframes light-pulse { to { opacity: .35; transform: scale(.7); } }
.wheel-center { z-index: 12; width: 8.6%; height: 8.6%; position: absolute; top: 45.7%; left: 46.3%; background: url("/wheel-assets/images/wheel-center.svg") center/contain no-repeat; }
.wheel-pointer { z-index: 20; width: 15.7%; height: 8.7%; position: absolute; top: 45.65%; right: -2.3%; background: url("/wheel-assets/images/wheel-pointer.svg") center/contain no-repeat; }
.wheel-blue-light { width: 121%; height: 86%; position: absolute; left: -10.5%; bottom: -13.7%; background: url("/wheel-assets/images/wheel-light.svg") center/contain no-repeat; }
.wheel-clover { z-index: 18; width: 121%; height: 74%; position: absolute; left: -7.8%; bottom: -31%; background: url("/wheel-assets/images/wheel-clover.svg") center/contain no-repeat; pointer-events: none; }
.wheel-mount.compact .wheel-lights { opacity: 0; }
.spin-screen { min-height: calc(100svh - 166px); position: relative; z-index: 3; }
.spin-screen .native-wheel { width: min(980px, 88svh, 88vw); }

.result-screen { min-height: calc(100svh - 166px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5; padding: 10px 0 68px; }
.result-card { width: min(410px, 100%); padding: 25px 24px 22px; text-align: center; }
.result-card > img { width: 210px; height: 110px; margin: -8px auto 4px; object-fit: contain; }
.result-card h1 { margin: 0 0 8px; font-size: 26px; line-height: 1; }
.result-card h2 { margin: 0 0 10px; color: var(--teal); font-size: 24px; line-height: 1.05; }
.result-card > p { margin: 0; color: #566366; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.42; }
.promo-code { width: 100%; min-height: 52px; margin: 18px 0 0; padding: 7px 48px 5px 16px; border: 2px dashed var(--teal); border-radius: 13px; background: #fff; color: var(--teal); position: relative; }
.promo-code span { display: block; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.promo-code i { position: absolute; top: 13px; right: 16px; font-size: 23px; font-style: normal; }
.promo-code small { display: block; margin-top: 2px; color: #9aa1a2; font-size: 9px; }
.result-card .primary-button { margin-top: 16px; }
.result-rules { display: inline-block; margin-top: 14px; color: var(--teal); font-family: Arial, sans-serif; font-size: 12px; }
.share-card { width: min(410px, 100%); margin-top: 18px; padding: 17px; border: 1px solid #39f8ce; border-radius: 20px; background: rgba(3,37,31,.28); text-align: center; }
.share-card h3 { margin: 0 0 5px; font-size: 18px; }
.share-card p { margin: 0; font-family: Arial, sans-serif; font-size: 13px; }
.share-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.share-buttons a, .share-buttons button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #229ed9; color: #fff; font-weight: 800; text-decoration: none; }
.share-buttons a:nth-child(2) { background: #07f; }
.share-buttons button { background: linear-gradient(135deg,#4cf,#53e 65%,#93d); }
.share-buttons .more-share { width: auto; min-width: 68px; padding: 0 15px; border-radius: 22px; font-size: 13px; }

.sausage-snow { position: fixed; z-index: 90; inset: 0; overflow: hidden; pointer-events: none; }
.sausage-slice {
  width: var(--sausage-size); aspect-ratio: 1.08; position: absolute; top: -60px; left: var(--sausage-x);
  border: 1px solid rgba(78,17,14,.65); border-radius: 49% 51% 47% 53%;
  background:
    radial-gradient(circle at 27% 28%, #f8deba 0 5%, transparent 6%),
    radial-gradient(circle at 64% 22%, #efd1a5 0 4%, transparent 5%),
    radial-gradient(circle at 44% 50%, #ffe4bd 0 6%, transparent 7%),
    radial-gradient(circle at 72% 59%, #edcca0 0 5%, transparent 6%),
    radial-gradient(circle at 28% 72%, #f9dfb8 0 4.5%, transparent 5.5%),
    radial-gradient(circle at 55% 78%, #f2d5ad 0 3.5%, transparent 4.5%),
    radial-gradient(ellipse at 52% 48%, #c75a47 0 57%, #963329 59% 75%, #5b1a17 77% 100%);
  box-shadow: inset 0 0 5px rgba(70,12,10,.38), 0 4px 8px rgba(0,18,18,.28);
  animation: sausage-fall var(--sausage-duration) linear var(--sausage-delay) both;
  will-change: transform;
}
.sausage-slice:nth-child(3n) { aspect-ratio: .92; border-radius: 53% 47% 52% 48%; }
.sausage-slice:nth-child(4n) { filter: brightness(.88) saturate(1.12); }
@keyframes sausage-fall {
  0% { transform: translate3d(0,-12vh,0) rotate(var(--sausage-start-turn)); }
  52% { transform: translate3d(var(--sausage-sway),54vh,0) rotate(var(--sausage-mid-turn)); }
  100% { transform: translate3d(var(--sausage-drift),115vh,0) rotate(var(--sausage-end-turn)); }
}
@keyframes sausage-fall-reduced {
  0% { transform: translate3d(0,-12vh,0); }
  100% { transform: translate3d(var(--sausage-drift),115vh,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sausage-snow .sausage-slice {
    animation-name: sausage-fall-reduced;
    animation-duration: var(--sausage-duration) !important;
  }
}

footer { z-index: 40; position: absolute; bottom: 16px; left: 5vw; right: 5vw; color: rgba(255,255,255,.68); text-align: center; font-family: Arial, sans-serif; font-size: 11px; }
.rotate-device { display: none; }

.legal-page { min-height: 100svh; padding: 48px 20px; color: #263638; background: #eef7f5; }
.legal-page article { width: min(860px, 100%); margin: auto; padding: 50px; border-radius: 30px; background: #fff; box-shadow: 0 20px 60px rgba(0,50,45,.1); }
.legal-page h1 { margin: 0 0 24px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; }
.legal-page h2 { margin: 34px 0 10px; color: #007f83; }
.legal-page p { line-height: 1.65; }
.legal-back { display: inline-block; margin-bottom: 34px; color: #008f95; font-weight: 700; text-decoration: none; }
.legal-warning { padding: 18px 20px; border-left: 4px solid #e4bf23; border-radius: 10px; background: #fff8d6; }
.rules-table { border: 1px solid #dce9e7; border-radius: 16px; overflow: hidden; }
.rules-table div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 14px 18px; }
.rules-table div + div { border-top: 1px solid #dce9e7; }

@media (max-width: 1079px) {
  .campaign-shell { min-height: 100svh; padding: 74px 20px 42px; overflow-y: auto; }
  .site-header { top: 13px; left: 20px; right: 20px; }
  .askona-logo { width: 130px; }
  .sound-button { width: 38px; height: 38px; border-radius: 8px; }
  .sound-button svg { width: 20px; }
  .intro-screen { width: min(480px, 100%); min-height: auto; display: block; padding-top: 225px; }
  .intro-copy { width: 100%; padding: 0; text-align: center; }
  .intro-copy::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 370px; top: -30px; left: 50%; transform: translateX(-50%); background: linear-gradient(transparent, rgba(22,92,80,.94) 20% 78%, transparent); filter: blur(18px); }
  .intro-copy h1 { margin-bottom: 14px; font-size: clamp(40px, 11vw, 54px); line-height: .88; }
  .intro-copy p { margin: auto; font-size: 14px; }
  .intro-mobile-button { display: inline-flex; min-width: 220px; }
  .intro-art { width: 400px; height: 424px; top: -54px; bottom: auto; left: 50%; transform: translateX(-50%); }
  .intro-wheel { width: 400px; }
  .gift-one { width: 74px; top: 16px; left: 38px; }
  .gift-two { z-index: 12; width: 208px; right: -44px; bottom: -120px; }
  .coin-one { z-index: 12; width: 94px; right: -8px; bottom: 22px; }
  .coin-two { z-index: 12; width: 112px; left: -8px; bottom: -88px; }
  .prize-panel { margin-top: 24px; padding: 24px 20px 72px; border-radius: 22px 22px 0 0; }
  .prize-grid { grid-template-columns: 1fr; gap: 10px; }
  .prize-grid article { min-height: 70px; padding: 7px 24px 7px 90px; border-radius: 20px; position: relative; font-size: 16px; }
  .prize-grid img { width: 86px; height: 64px; position: absolute; left: 5px; }
  .prize-panel > p { margin: 18px 0 0; font-size: 12px; }
  .prize-panel > .primary-button { display: none; }
  .prize-panel > a { margin-top: 10px; }
  .center-screen { min-height: calc(100svh - 116px); justify-content: center; }
  .registration-card { width: min(360px, 100%); padding: 24px 16px 16px; border-radius: 20px; }
  .eligibility-card { width: min(360px, 100%); padding: 28px 20px 22px; border-radius: 20px; }
  .eligibility-card h1 { font-size: 24px; }
  .registration-card form > input { margin-top: 14px; }
  .consent-note { max-width: 360px; margin-top: 18px; font-size: 11px; }
  .game-ready { width: 310px; min-height: calc(100svh - 116px); align-items: flex-start; padding-top: max(24px, 8vh); }
  .game-card { width: 310px; padding: 20px 15px; border-radius: 20px; transform: none; }
  .game-card h1 { font-size: 24px; }
  .game-card p { font-size: 14px; }
  .game-note { width: 310px; top: 330px; left: 0; font-size: 11px; }
  .wheel-mount.compact .native-wheel { width: 540px; top: auto; right: 50%; bottom: -160px; transform: translateX(50%) scale(.82); }
  .spin-screen { min-height: calc(100svh - 116px); }
  .spin-screen .native-wheel { width: min(760px, 100vw); }
  .wheel-sector { font-size: clamp(11px, 3.2vw, 18px); }
  .wheel-lights i span { width: 12px; height: 12px; top: -6px; }
  .result-screen { min-height: calc(100svh - 116px); padding: 10px 0 42px; }
  footer { position: relative; left: auto; right: auto; bottom: auto; margin-top: 24px; }
}

@media (max-width: 560px) {
  .result-card, .share-card { width: min(360px, 100%); }
  .legal-page { padding: 20px 10px; }
  .legal-page article { padding: 30px 20px; border-radius: 22px; }
  .rules-table div { grid-template-columns: 1fr; gap: 5px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .campaign-shell { min-height: 100svh; }
  .campaign-shell > :not(.rotate-device) { visibility: hidden; }
  .rotate-device { visibility: visible; position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: #001e20; color: #fff; text-align: center; }
  .rotate-device img { width: 76px; filter: brightness(0) invert(1); }
  .rotate-device b { font-size: 23px; }
  .rotate-device span { color: rgba(255,255,255,.7); font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .native-wheel.is-spinning .wheel-rotor { animation-duration: 1.4s !important; }
}

/* The original campaign uses one 1920×900 stage and scales every element from
   the same unit. Keeping that model prevents the wheel, copy and rules card
   from drifting apart on 4K, Full HD and laptop displays. */
@media (min-width: 1080px) {
  .campaign-shell.phase-intro { height: 100svh; min-height: 0; display: flex; padding: 0; overflow: hidden; }
  .phase-intro .intro-screen { flex: 1 1 100%; width: 100%; max-width: 1920px; height: 100%; max-height: 900px; min-height: 0; margin: auto; display: flex; align-items: center; position: relative; font-size: min(1px, .11vh); }
  .phase-intro .intro-stage { flex: 0 1 94.8%; width: 94.8%; max-width: 1488px; margin: auto; position: relative; }
  .phase-intro .intro-copy { z-index: 5; width: auto; margin: 0 0 50em; padding: 0; position: relative; color: #fff; text-align: left; }
  .phase-intro .intro-copy h1 { max-width: 7.7em; margin: 0 0 .3em; font-size: 70em; font-weight: 700; line-height: .8; letter-spacing: normal; }
  .phase-intro .intro-copy p { max-width: 15em; margin: 0; font-size: 24em; line-height: 1.3; }
  .phase-intro .intro-art { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
  .phase-intro .intro-art img { position: absolute; }
  .phase-intro .intro-wheel { width: 1003em; max-width: none; height: 1064em; top: auto; right: auto; bottom: 40em; left: calc(50% - 234em); animation: wheel-arrive 1.5s cubic-bezier(.3,0,.3,1) both .25s; }
  .phase-intro .gift-one { width: 182em; max-width: none; top: -14em; left: calc(50% - 400em); }
  .phase-intro .coin-one { width: 210em; max-width: none; top: auto; right: auto; bottom: 115em; left: calc(50% + 693em); }
  .phase-intro .gift-two { width: 497em; max-width: none; top: auto; right: auto; bottom: -295em; left: calc(50% + 535em); }
  .phase-intro .coin-two { width: 250em; max-width: none; top: auto; right: auto; bottom: 40em; left: calc(50% - 920em); }
  .phase-intro .prize-panel { z-index: 10; position: relative; padding: 30em 30px 38em; border: 3px solid #affff2; border-radius: 80em; background: #fff; color: #222; text-align: center; box-shadow: 0 13em 13em rgba(0,30,32,.5); backdrop-filter: none; }
  .phase-intro .prize-panel h2 { margin: 0 0 .8em; font-size: 22em; line-height: 1.1; }
  .phase-intro .prize-grid { display: grid; grid-template-columns: repeat(3,min(33%,425em)); justify-content: center; gap: 10em; }
  .phase-intro .prize-grid article { min-height: 4.86em; gap: 0; padding: .5em 1em .5em 7.36em; border-radius: 1.36em; position: relative; background: #fff7b0; color: #222; font-size: 22em; font-weight: 600; line-height: 1.27; }
  .phase-intro .prize-grid img { width: 6em; height: 4.5em; position: absolute; left: 1.22em; object-fit: contain; }
  .phase-intro .prize-panel > p { margin: 1.56em 0 1.875em; font-size: 16em; }
  .phase-intro .prize-panel > .primary-button { min-width: 16.875em; min-height: 3.25em; padding: .5em 1em; border-radius: 1em; font-size: 16em; }
  .phase-intro .prize-panel > a { display: block; margin-top: 1em; color: #00b9bf; font-size: 14em; }
  .phase-intro .site-header { z-index: 50; width: 94.8%; max-width: 1488px; height: min(100%,900px); top: 50%; left: 50%; right: auto; display: block; font-size: min(1px,.11vh); transform: translate(-50%,-50%); pointer-events: none; }
  .phase-intro .site-header .askona-logo { width: 180em; position: absolute; top: 5.5%; left: 0; }
  .phase-intro .site-header .sound-button { width: 60em; height: 60em; position: absolute; top: 5.5%; right: 0; border-width: 2em; border-radius: 12em; pointer-events: auto; }
  .phase-intro footer { display: none; }
}

.mobile-id-waiting { min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: #718083; }
.mobile-id-waiting p { margin: 0; font-size: 12px; }
.waiting-spinner { width: 48px; height: 48px; border: 4px solid rgba(0,185,191,.18); border-top-color: var(--teal); border-radius: 50%; animation: rotate 1s linear infinite; }
.otp-card .otp-back { margin-top: 12px; }
.otp-card #otpForm { margin-top: 20px; }
.otp-card #otpForm .primary-button { margin-top: 14px; }

@media (max-width: 1079px) {
  .intro-stage { position: static; }
  .phase-intro .prize-panel h2 { margin: 0 0 16px; font-size: 20px; }
}