:root{color-scheme:dark;--bg:#071b19;--ink:#fff6de;--gold:#ffd482;--muted:#d0c7ad;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100svh;background:radial-gradient(ellipse at 50% 20%,#245347 0,#102e29 38%,#061714 80%)}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #fff0be;outline-offset:5px}::selection{background:var(--gold);color:var(--bg)}[hidden]{display:none!important}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.direct-link{text-decoration:none}
.page{overflow-x:clip;max-width:560px;min-height:100svh;margin:auto;padding:18px 20px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;position:relative}
.header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid #d9b96c45}
.brand{display:flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;color:var(--gold);font-size:18px}.brand svg{width:25px;height:30px}.gift-note{font-size:12px;color:#f6dfa6}
main{flex:1}.hero{text-align:center}
h1{font-size:clamp(29px,7.6vw,42px);font-weight:700;line-height:1.45;margin:17px 0 4px;color:#ffe6a1;text-shadow:0 3px 1px #744615,0 6px 20px #0007;text-wrap:balance}
.intro{color:#eee2c7;font-size:15px;margin:0 0 2px;line-height:1.8}
.portal{position:relative;isolation:isolate;padding:0 17px 17px;margin-inline:-6px}
.temple-art{position:absolute;z-index:-3;inset:-2px -12px -10px;background:url("assets/temple.webp") center top / 100% 100% no-repeat;mask-image:linear-gradient(transparent,#000 5% 93%,transparent);pointer-events:none}
.portal-frame{position:absolute;z-index:-2;inset:28% 11% 4%;background:radial-gradient(ellipse,#092f2960,#051c1530 60%,transparent 75%);pointer-events:none}
.portal-inner{position:absolute;inset:10% -8%;background:radial-gradient(ellipse at 14% 43%,#ffda6f 0 1px,transparent 2px),radial-gradient(ellipse at 84% 12%,#ffda6f 0 1.5px,transparent 2.5px),radial-gradient(ellipse at 82% 65%,#ffda6f 0 1px,transparent 2px),radial-gradient(ellipse at 7% 79%,#ffda6f 0 1px,transparent 2px);animation:embers 5s ease-in-out infinite alternate}
.crest-link{display:block;width:100%;height:132px}.crest{display:none}
.prize{display:flex;flex-direction:column;align-items:center;position:relative;margin:0 auto;width:fit-content;padding-inline:18px}
.prize:before{content:"";position:absolute;z-index:-1;inset:-20px -24px -12px;background:radial-gradient(ellipse,#f6d48027,#071f18b0 48%,transparent 73%)}
.numeral{font-family:Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;direction:ltr;unicode-bidi:isolate;letter-spacing:0}
.amount{font-size:clamp(86px,25vw,112px);font-weight:800;line-height:1.08;color:#ffe3a0;letter-spacing:.01em;text-shadow:0 2px 0 #926328,0 6px 12px #0007}
.currency{font-size:20px;font-weight:700;color:#ffe5a6;margin-top:13px;text-shadow:0 2px 6px #000}
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:13px auto 11px}.ornament span{width:58px;height:1px;background:linear-gradient(90deg,transparent,#f2c66b,transparent)}.ornament svg{width:13px;height:13px}
h2{font-size:20px;margin:0 0 15px;font-weight:700}.selection{position:relative}.selection h2{font-size:19px;color:#fff5d3;margin-bottom:15px;text-shadow:0 2px 8px #000}
.gems{display:flex;justify-content:center;gap:8px;direction:ltr}
.gem-button{--gem:#4ac4ff;width:calc((100% - 16px)/3);min-height:152px;position:relative;border:0;background:transparent;padding:6px 0 0;color:var(--ink);border-radius:12px}
.red{--gem:#ff536e}.green{--gem:#36f3ad}
.gem-button:before{content:"";position:absolute;width:92%;height:88px;top:8px;left:4%;background:radial-gradient(ellipse,color-mix(in srgb,var(--gem) 26%,transparent),transparent 68%);transition:opacity .25s}
.gem-art{display:block;position:relative;margin:auto;width:clamp(65px,19vw,94px);height:108px;color:var(--gem)}
.gem-art:before{content:"";position:absolute;bottom:2px;left:-7%;width:114%;height:20px;border-radius:50%;border:1px solid #ffe0a2;background:radial-gradient(ellipse,#102e27 0 42%,#ffefb1 47%,#d99c38 56%,#ffe1a0 64%,#6d451e 76%);box-shadow:0 4px 0 #7e5826,0 7px 0 #342919,0 10px 12px #0008}
.gem-art:after{content:"";position:absolute;bottom:7px;left:8%;right:8%;height:10px;border-radius:50%;background:radial-gradient(ellipse,#fffce4 0 8%,var(--gem) 30%,transparent 75%);filter:blur(2px);opacity:.9}
.gem-art .gem-jewel{height:92px;width:100%;position:relative;z-index:1;filter:drop-shadow(0 5px 7px #0007) drop-shadow(0 0 8px color-mix(in srgb,var(--gem) 40%,transparent));animation:gem-float 3.6s ease-in-out infinite;transition:filter .2s}
.red .gem-art .gem-jewel{animation-delay:-.9s}.green .gem-art .gem-jewel{animation-delay:-1.8s}
.gem-button:hover:not(:disabled) .gem-art .gem-jewel{filter:brightness(1.22) drop-shadow(0 5px 14px var(--gem))}
.gem-name{display:inline-block;font-size:12px;margin-top:10px;padding:3px 6px;border-radius:4px;background:#07251ce6;direction:rtl;color:#fff0cc;text-shadow:0 2px 4px #000}.gem-status{display:block;min-height:16px;font-size:12px;color:var(--gold);margin-top:4px}
.gem-button:disabled{cursor:default}.gem-button.opened:before{opacity:0}.gem-button.opened .gem-art .gem-jewel{animation:none;transform:translateY(3px) scale(.78);opacity:.35;filter:grayscale(.7)}
.gem-button.opening .gem-art .gem-jewel{animation:reveal .66s cubic-bezier(.16,1,.3,1) both}
.instruction{width:fit-content;max-width:100%;font-size:13px;color:#ffe2a1;margin:7px auto 0;min-height:32px;padding:5px 16px;line-height:1.7;border:1px solid #c2974b66;border-radius:5px;background:#082219c9}
footer{padding-top:19px;position:relative}.payments{display:flex;align-items:center;justify-content:center;gap:13px;direction:ltr}.payments>span{width:43px;height:32px;display:grid;place-items:center;border-radius:5px;background:#f6f1e5;box-shadow:0 4px 8px #0004}.payments svg{width:35px;height:28px}
.legal{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:12px 0 0}.legal button{border:0;padding:5px 0;background:none;color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:4px}.legal>span{opacity:.5}
dialog{color:var(--ink);width:min(410px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;border:2px solid #f1ce7e;border-radius:18px;padding:0;background:radial-gradient(ellipse at 50% 0,#38553a,#193e2e 40%,#09231d 85%);box-shadow:0 28px 80px #000a,inset 0 0 0 5px #d8af5340}
dialog::backdrop{background:#020c0be8}.dialog-content{text-align:center;padding:28px 24px 26px;position:relative;isolation:isolate;overflow:hidden}
.dialog-content:before{content:"";position:absolute;z-index:-1;width:300px;height:260px;top:-95px;left:calc(50% - 150px);background:repeating-conic-gradient(from 0deg,#ffe5a820 0deg 9deg,transparent 9deg 24deg);mask-image:radial-gradient(ellipse,#000,transparent 68%)}
.reward-gem{width:73px;height:82px;color:#ffd981;margin:4px 0 16px;filter:drop-shadow(0 6px 12px #0008)}
.dialog-content h2{font-size:28px;margin:0 0 18px;color:#fff0bd;text-shadow:0 3px 8px #0005}
.spins{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:19px;color:#ffe2a1;margin:10px 0 20px;line-height:1.4}.spins strong{display:block;font-size:52px;font-weight:700;line-height:1.1}
.cash-reward{color:#ffe3a0;line-height:1.15;font-weight:700}.cash-reward bdi{display:block;font-size:72px;font-weight:800;line-height:1.08;text-shadow:0 2px #926328,0 5px 10px #0005}.cash-reward small{display:block;font-size:19px;margin-top:6px}.plus{display:block;font:400 22px/1 Arial,sans-serif;margin:14px 0 4px;color:#e9d39c}.age-label{font-weight:700;white-space:nowrap}
#reward-copy{color:#e9dcc0;margin:0 0 24px;font-size:16px;line-height:1.6}
.claim-button{display:block;width:100%;min-height:57px;border:1px solid #fff1b6;border-radius:9px;background:linear-gradient(105deg,transparent 30%,#fff8cd80 48%,transparent 66%) -250px 0 / 250px 100% no-repeat,linear-gradient(#ffeaaa,#efc468 50%,#d39a3b 51%,#edc56c);color:#3f2b11;padding:12px 16px;font-weight:700;font-size:19px;box-shadow:0 5px 12px #0006,inset 0 0 0 3px #b07b2940;transition:filter .2s,transform .2s}
dialog[open] .claim-button{animation:button-shine 3.2s ease-in-out 3}.claim-button:hover{filter:brightness(1.12)}.claim-button:active{transform:translateY(2px)}
#claim-again{margin:20px auto 0;max-width:330px}.terms-content{padding:28px}.terms-content h2{line-height:1.5}.terms-content p{font-size:14px;color:#e7dac1;line-height:1.9;margin:0 0 20px}
.noscript{text-align:center;padding:20px;line-height:1.8}.noscript a{color:var(--gold)}
.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}.celebration i{position:absolute;top:-12px;left:8%;width:5px;height:10px;background:#ffdc80;opacity:0}
.celebration i:nth-child(2n){background:#55e1b0;width:6px;height:6px}.celebration i:nth-child(3n){background:#fff0be;border-radius:50%}
.celebration i:nth-child(2){left:16%;animation-delay:.2s}.celebration i:nth-child(3){left:25%;animation-delay:.5s}.celebration i:nth-child(4){left:33%;animation-delay:.1s}.celebration i:nth-child(5){left:41%;animation-delay:.7s}.celebration i:nth-child(6){left:50%;animation-delay:.3s}.celebration i:nth-child(7){left:58%;animation-delay:.6s}.celebration i:nth-child(8){left:66%;animation-delay:.15s}.celebration i:nth-child(9){left:75%;animation-delay:.45s}.celebration i:nth-child(10){left:83%;animation-delay:.8s}.celebration i:nth-child(11){left:90%;animation-delay:.35s}.celebration i:nth-child(12){left:95%;animation-delay:.65s}
dialog[open][data-stage="final"] .celebration i{animation-name:confetti;animation-duration:2.5s;animation-timing-function:ease-out;animation-iteration-count:2}
@keyframes gem-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(-10px)}}
@keyframes embers{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(-9px)}}
@keyframes button-shine{0%,65%{background-position:-250px 0,0 0}100%{background-position:400px 0,0 0}}
@keyframes confetti{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(540px) rotate(400deg)}}

@media(min-width:768px){.page{padding-top:26px}.portal{max-width:470px;margin-inline:auto}.crest-link{height:158px}h1{margin-top:20px}.gem-art{width:95px;height:116px}.gem-art .gem-jewel{height:102px}.gem-button{min-height:162px}footer{padding-top:24px}}
@media(max-width:370px){.page{padding-inline:14px}.brand{font-size:16px}.gift-note{font-size:11px}.portal{padding-inline:13px}.temple-art{inset-inline:-8px}.gem-name{font-size:11px}.payments{gap:11px}.legal{font-size:11px}}
@media(max-height:740px) and (max-width:767px){.page{padding-top:10px}.header{padding-bottom:10px}h1{margin-top:12px;font-size:29px}.intro{font-size:14px}.crest-link{height:108px}.amount{font-size:89px}.currency{font-size:18px;margin-top:11px}.ornament{margin:11px auto 9px}.selection h2{font-size:17px;margin-bottom:8px}.gem-button{min-height:135px}.gem-art{height:93px}.gem-art .gem-jewel{height:81px}.gem-name{margin-top:8px}.instruction{margin-top:4px;padding-block:3px;min-height:29px}.portal{padding-bottom:13px}footer{padding-top:14px}.legal{margin-top:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}




/* One transparent atlas supplies all gems; opening effects run for 1.1s only. */
.gems{isolation:isolate}
.gem-jewel{display:block;background:url("assets/gems-crystal.webp") var(--jewel-position,0%) center / 300% 100% no-repeat}
.blue{--jewel-position:0%}.red{--jewel-position:50%}.green{--jewel-position:100%}
.gem-art .gem-jewel{height:102px;width:100%;filter:drop-shadow(0 5px 4px #0009);transform-origin:50% 65%}
.gem-art{width:clamp(82px,23.5vw,108px);height:108px}
.gem-art:before{bottom:-1px}
.gem-art:after{bottom:5px}
.gem-button:hover:not(:disabled) .gem-art .gem-jewel{filter:brightness(1.12) drop-shadow(0 5px 6px #0009)}
.gem-button:before{opacity:.65}
.gem-button.opened .gem-art .gem-jewel{opacity:.35;filter:saturate(.4) drop-shadow(0 4px 3px #0009)}
.gem-fx{position:absolute;inset:0;z-index:3;pointer-events:none;color:var(--gem)}
.gem-fx:before,.gem-fx:after{content:"";position:absolute;opacity:0;pointer-events:none}
.gem-fx:before{inset:-20%;background:radial-gradient(ellipse,#fffce7 0 3%,#ffdd9d 7%,color-mix(in srgb,var(--gem) 65%,transparent) 22%,transparent 65%);border-radius:50%}
.gem-fx:after{width:100%;height:72%;left:0;top:10%;border:2px solid #fff4c7;border-radius:50%;box-shadow:0 0 6px 2px var(--gem),inset 0 0 6px var(--gem)}
.gem-fx i{position:absolute;left:calc(50% - 2px);top:40%;height:11px;width:4px;background:linear-gradient(#fffce5,#f3c566);opacity:0;border-radius:1px;--angle:0deg;--reach:64px;box-shadow:0 0 4px #f7cf74}
.gem-fx i:nth-child(2){--angle:45deg;--reach:56px}.gem-fx i:nth-child(3){--angle:90deg;--reach:67px}.gem-fx i:nth-child(4){--angle:135deg;--reach:50px}.gem-fx i:nth-child(5){--angle:180deg;--reach:57px}.gem-fx i:nth-child(6){--angle:225deg;--reach:53px}.gem-fx i:nth-child(7){--angle:270deg;--reach:69px}.gem-fx i:nth-child(8){--angle:315deg;--reach:57px}
.is-opening .gem-button:not(.opening){opacity:.42;transition:opacity .18s}
.gem-button.opening{z-index:5}
.gem-button.opening .gem-art .gem-jewel{will-change:transform,opacity;animation:jewel-unlock 1.1s cubic-bezier(.16,1,.3,1) both}
.gem-button.opening .gem-art:after{animation:altar-charge 1.1s ease-out both}
.gem-button.opening .gem-fx:before{animation:jewel-flash 1.1s ease-out both}
.gem-button.opening .gem-fx:after{animation:jewel-ring 1.1s ease-out both}
.gem-button.opening .gem-fx i{animation:jewel-shard 1.1s cubic-bezier(.16,1,.3,1) both}
.reward-gem.gem-jewel{width:90px;height:105px;margin:0 auto 16px;background-position:var(--jewel-position,50%) center;filter:drop-shadow(0 5px 7px #0008)}
@keyframes jewel-unlock{0%{transform:translateY(-3px) scale(1);opacity:1}24%{transform:translateY(-12px) scale(1.12) rotate(-5deg)}36%{transform:translateY(-14px) scale(1.16) rotate(5deg)}46%{transform:translateY(-14px) scale(1.18) rotate(-4deg)}57%{transform:translateY(-17px) scale(1.28) rotate(0)}70%{transform:translateY(-20px) scale(1.4);opacity:1;filter:brightness(1.8) drop-shadow(0 5px 7px #0007)}85%,100%{transform:translateY(-25px) scale(.45);opacity:0}}
@keyframes altar-charge{0%{opacity:.5;transform:scale(1)}55%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.2)}}
@keyframes jewel-flash{0%,30%{opacity:0;transform:scale(.4)}55%{opacity:.7;transform:scale(.9)}67%{opacity:1;transform:scale(1.45)}100%{opacity:0;transform:scale(2)}}
@keyframes jewel-ring{0%,55%{opacity:0;transform:scale(.3) rotateX(35deg)}64%{opacity:1;transform:scale(.8) rotateX(35deg)}100%{opacity:0;transform:scale(2.3) rotateX(35deg)}}
@keyframes jewel-shard{0%,60%{opacity:0;transform:rotate(var(--angle)) translateY(-10px) scale(.2)}67%{opacity:1;transform:rotate(var(--angle)) translateY(-20px) scale(1)}100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(-1 * var(--reach))) scale(.3)}}
@media(min-width:768px){.gem-art{width:108px;height:116px}.gem-art .gem-jewel{height:112px}}
@media(max-width:370px){.gem-art{width:76px}}
@media(max-height:740px) and (max-width:767px){.gem-art{height:93px}.gem-art .gem-jewel{height:87px}}
@media(prefers-reduced-motion:reduce){.gem-art .gem-jewel,.gem-fx:before,.gem-fx:after,.gem-fx i{animation:none!important;will-change:auto}.is-opening .gem-button:not(.opening){opacity:1}}


/* Compact reward typography keeps the complete offer visible on short screens. */
@media(max-height:740px){.dialog-content{padding:20px}.reward-gem.gem-jewel{width:66px;height:76px;margin-bottom:10px}.dialog-content h2{font-size:24px;margin-bottom:12px}.cash-reward bdi{font-size:62px}.cash-reward small{font-size:18px;margin-top:4px}.plus{font-size:20px;margin:10px 0 2px}.spins{font-size:17px;gap:2px;margin:8px 0 12px}.spins strong{font-size:46px}#reward-copy{font-size:14px;margin-bottom:16px}.dialog-content .claim-button{min-height:52px;font-size:17px}}


/* Reference-style crystal highlights; no additional bitmap or animation runtime. */
.gem-jewel:after{content:"";position:absolute;left:22%;top:22%;width:14px;height:18px;background:#fffdf1;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);opacity:.8;animation:crystal-glint 3.8s ease-in-out 3;pointer-events:none}
.red .gem-jewel:after{animation-delay:.8s}.green .gem-jewel:after{animation-delay:1.6s}
.gem-button.opened .gem-jewel:after,.gem-button.opening .gem-jewel:after{display:none}
.reward-gem.gem-jewel:after{display:none}
@keyframes crystal-glint{0%,45%,100%{opacity:.2;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}75%{opacity:.55;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.gem-jewel:after{animation:none}}



/* Unified reward surfaces: restrained lighting, integrated type and live CSS motion. */
#reward-dialog{width:min(410px,calc(100% - 28px));border:1px solid #d8b86f;border-radius:18px;background:radial-gradient(ellipse at 50% 34%,#274033,#0c211b 68%);box-shadow:0 24px 70px #000a,inset 0 0 0 4px #c6a56216}
#reward-dialog::backdrop{background:#020b09d9;backdrop-filter:blur(3px)}
#reward-dialog .dialog-content{padding:24px 24px 26px}
#reward-dialog .dialog-content:before{top:65px;height:310px;width:340px;left:calc(50% - 170px);background:radial-gradient(ellipse,#f2ca7825,transparent 68%);mask-image:none;pointer-events:none}
.reward-close{position:absolute;left:12px;top:12px;z-index:5;display:grid;place-items:center;width:36px;height:36px;padding:8px;border:1px solid #d2b66a50;border-radius:50%;background:#10251e;color:#e6cf9a}
.reward-close svg{width:100%;height:100%}.reward-close:hover{background:#34402b}
.victory-mark{display:flex;align-items:center;justify-content:center;gap:12px;height:28px;margin-bottom:10px}
.victory-mark svg{width:34px;height:27px}.victory-mark span{width:36px;height:1px;background:linear-gradient(90deg,transparent,#c8a66b,transparent)}
#reward-dialog h2{font-size:29px;line-height:1.45;margin:0;color:#ffe7af;text-shadow:0 2px 6px #0005}
.reward-scene{position:relative;height:200px;margin:0}
.reward-art{position:absolute;inset:0;pointer-events:none}
.reward-values{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}
#reward-dialog[data-stage="first"] .reward-art{inset:24px -12px;background:radial-gradient(ellipse,#e9bd5b24,transparent 68%)}
#reward-dialog[data-stage="first"] .reward-values{inset:28px 0 24px;padding:12px 24px;color:#592c12;background:linear-gradient(120deg,#f2d79a,#ffeac0 42%,#e1b760 78%,#edcb86);border:1px solid #ffe9ac;border-radius:10px;box-shadow:0 9px 20px #0004,inset 0 0 0 4px #bd8c3430;overflow:hidden}
#reward-dialog[data-stage="first"] .reward-values:before{content:"";position:absolute;inset:8px;border:1px solid #9f742a66;border-radius:5px;pointer-events:none}
#reward-dialog[data-stage="first"] .reward-values:after{content:"";position:absolute;inset:-40% -50%;background:linear-gradient(110deg,transparent 42%,#fffbe980 49%,transparent 56%);opacity:0;pointer-events:none}
#reward-dialog .spins{margin:0;gap:4px;color:inherit;font-size:20px;line-height:1.3}
#reward-dialog .spins strong{font-size:66px;line-height:1.05;font-weight:700;text-shadow:0 1px #fff2ce}
.reward-plus{display:none}
#reward-dialog #reward-copy{font-size:16px;color:#e8dcc0;margin:0 0 22px;line-height:1.6}
#reward-dialog .claim-button{position:relative;border-radius:10px;min-height:55px;font-size:18px;background:linear-gradient(105deg,transparent 30%,#fff8cd70 48%,transparent 66%) -250px 0 / 250px 100% no-repeat,linear-gradient(#f7dda1,#e8bf6b);box-shadow:0 5px 12px #0004,inset 0 1px #fff1c8}
#reward-dialog[data-stage="final"]{background:radial-gradient(ellipse at 50% 33%,#493e24,#172c22 48%,#0b2019 80%)}
#reward-dialog[data-stage="final"] .reward-scene{height:350px;margin-top:2px;margin-bottom:14px}
#reward-dialog[data-stage="final"] .reward-art{inset:0 auto auto 50%;width:min(100%,290px);height:190px;transform:translateX(-50%);background:var(--reward-art,none) 100% center / 200% 100% no-repeat}
#reward-dialog[data-stage="final"] .reward-values{inset:auto 0 0;min-height:128px;padding:0;background:none;clip-path:none;color:#ffe3a0;gap:2px}
#reward-dialog[data-stage="final"] .reward-values:before{content:"";position:absolute;inset:-2px 20% auto;height:1px;background:linear-gradient(90deg,transparent,#d1ad65,transparent);border:0}
#reward-dialog .cash-reward{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#ffe3a0;line-height:1.1}
#reward-dialog .cash-reward bdi{font-size:62px;line-height:1.05;text-shadow:0 3px 10px #0004}
#reward-dialog .cash-reward small{font-size:17px;margin:0}
#reward-dialog[data-stage="final"] .reward-plus{display:block;font:400 17px/1 Arial,sans-serif;margin:4px 0;color:#c7af7b}
#reward-dialog[data-stage="final"] .spins{flex-direction:row;justify-content:center;align-items:center;gap:7px;font-size:17px;color:#f1ddb3}
#reward-dialog[data-stage="final"] .spins strong{font-size:28px;text-shadow:none}
#reward-dialog .celebration{z-index:2;pointer-events:none}
#reward-dialog .celebration i{top:auto;bottom:22%;width:3px;height:3px;background:#f5d68a;border-radius:50%;opacity:0}
#reward-dialog .celebration i:nth-child(3n){width:2px;height:2px}
#reward-dialog .celebration i:nth-child(n+9){display:none}
#reward-dialog[open]{animation:reward-arrive .38s cubic-bezier(.16,1,.3,1) both}
#reward-dialog[open] .reward-art,#reward-dialog[open] .reward-values{animation:none}
#reward-dialog[open][data-stage="first"] .reward-scene{animation:ticket-drift 4.6s ease-in-out infinite}
#reward-dialog[open][data-stage="first"] .reward-values:after{animation:ticket-light 5.4s ease-in-out infinite}
#reward-dialog[open] .dialog-content:before{animation:reward-light 4s ease-in-out infinite alternate}
#reward-dialog[open][data-stage="final"] .reward-art{animation:chest-settle .7s cubic-bezier(.16,1,.3,1) both}
#reward-dialog[open] .celebration i{animation-name:gold-drift;animation-duration:4.2s;animation-timing-function:linear;animation-iteration-count:infinite}
#reward-dialog[open] .claim-button{animation:button-shine 4.5s ease-in-out infinite}
@keyframes reward-arrive{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ticket-drift{0%,100%{transform:translateY(2px) rotate(-.3deg)}50%{transform:translateY(-3px) rotate(.3deg)}}
@keyframes ticket-light{0%,45%,100%{opacity:0;transform:translateX(-55%)}55%{opacity:.7}75%{opacity:0;transform:translateX(55%)}}
@keyframes reward-light{from{opacity:.45;scale:.95}to{opacity:.9;scale:1.04}}
@keyframes chest-settle{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes gold-drift{0%{opacity:0;transform:translate(0,12px) scale(.6)}20%{opacity:.75}80%{opacity:.45}100%{opacity:0;transform:translate(9px,-180px) scale(.3)}}
@media(max-width:370px){#reward-dialog .dialog-content{padding-inline:18px}#reward-dialog h2{font-size:25px}#reward-dialog .cash-reward bdi{font-size:56px}}
@media(max-height:740px){#reward-dialog .dialog-content{padding:18px}#reward-dialog h2{font-size:25px}.victory-mark{height:25px;margin-bottom:6px}.reward-scene{height:178px}#reward-dialog .spins strong{font-size:60px}#reward-dialog .spins{font-size:18px}#reward-dialog #reward-copy{font-size:15px;margin-bottom:16px}#reward-dialog[data-stage="final"] .reward-scene{height:308px;margin-bottom:10px}#reward-dialog[data-stage="final"] .reward-art{height:156px;width:min(100%,260px)}#reward-dialog[data-stage="final"] .reward-values{min-height:118px}#reward-dialog .cash-reward bdi{font-size:54px}#reward-dialog[data-stage="final"] .spins strong{font-size:27px}#reward-dialog .claim-button{font-size:17px;min-height:52px}}
@media(prefers-reduced-motion:reduce){#reward-dialog[open],#reward-dialog[open] *,#reward-dialog[open] *:before,#reward-dialog[open] *:after{animation:none!important;transition:none!important}}



/* Viewport-fitted stage: reserve room for controls instead of scrolling. */
html,body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
.page{height:100dvh;min-height:0;max-width:620px;padding:max(8px,env(safe-area-inset-top)) 18px max(8px,env(safe-area-inset-bottom));overflow:hidden}
.header{flex:none;padding-bottom:clamp(6px,1.3dvh,14px)}
.page main{flex:1;min-height:0}
.hero{height:100%;display:flex;flex-direction:column;min-height:0}
.hero h1{flex:none;font-size:clamp(25px,4.8dvh,42px);margin:clamp(6px,1.5dvh,16px) 0 2px}
.intro{flex:none;font-size:clamp(12px,1.9dvh,16px);margin:0 0 3px}
.portal{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 12px 6px;display:flex;flex-direction:column}
.crest-link{height:auto;min-height:0;flex:1}
.prize{flex:none}
.amount{font-size:clamp(60px,11.5dvh,106px)}
.currency{font-size:clamp(14px,2.3dvh,20px);margin-top:4px}
.ornament{flex:none;margin:clamp(5px,1.1dvh,11px) auto}
.selection{flex:none}
.selection h2{font-size:clamp(15px,2.3dvh,20px);margin:0 0 clamp(4px,1dvh,10px)}
.gem-button{min-height:0;padding-top:4px}
.gem-art{width:clamp(66px,22vw,108px);height:clamp(66px,12.4dvh,116px)}
.gem-art .gem-jewel{height:calc(100% - 6px)}
.gem-name{font-size:clamp(10px,1.55dvh,13px);margin-top:5px;padding:2px 5px}
.gem-status{min-height:13px;margin-top:2px;font-size:11px}
.instruction{font-size:clamp(11px,1.55dvh,13px);line-height:1.4;padding:4px 10px;min-height:0;margin-top:3px}
.page footer{flex:none;padding-top:clamp(6px,1.5dvh,16px)}
.payments{gap:12px}.payments>span{height:clamp(25px,3.8dvh,34px)}
.payments svg{height:clamp(22px,3.3dvh,29px)}
.legal{font-size:clamp(10px,1.4dvh,12px);margin-top:clamp(3px,.8dvh,8px);gap:7px}
#claim-again{flex:none;min-height:44px;margin:6px auto 0;padding:8px 12px;font-size:17px}
@media(max-height:500px) and (orientation:landscape){
 .page{max-width:760px;padding-top:5px;padding-bottom:5px}.header{padding-bottom:3px;min-height:25px}.brand{font-size:14px}.brand svg{height:23px}.gift-note{font-size:11px}
 .hero h1{font-size:23px;margin:3px 0 0}.intro{display:none}.amount{font-size:48px}.currency{font-size:12px;margin-top:0}.ornament{margin:3px auto}.ornament svg{height:9px}
 .selection h2{font-size:14px;margin-bottom:2px}.gem-art{height:55px;width:68px}.gem-name{font-size:10px;margin-top:2px}.gem-status{display:none}.instruction{font-size:10px;padding:2px 8px;margin-top:2px}.page footer{padding-top:4px}.payments>span{height:23px}.payments svg{height:20px}.legal{margin-top:2px;font-size:10px}
}

#terms-dialog{overflow:hidden;max-height:calc(100dvh - 24px)}
@media(max-height:500px){#terms-dialog .terms-content{padding:18px}#terms-dialog h2{font-size:20px;margin-bottom:8px}#terms-dialog .terms-content p{font-size:12px;line-height:1.6;margin-bottom:10px}#terms-dialog .claim-button{min-height:42px;padding:8px}}

/* Rewards remain centered cards; only the underlying page fills the viewport. */
#reward-dialog{inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 24px);overflow:hidden}
#reward-dialog .dialog-content:before{top:10%;height:65%;width:90%;max-width:520px;left:50%;transform:translateX(-50%)}
@media(max-height:500px) and (orientation:landscape){
 #reward-dialog{width:min(620px,calc(100% - 32px));height:calc(100dvh - 32px);max-height:358px}
 #reward-dialog .dialog-content{height:100%;display:flex;flex-direction:column;align-items:center;padding:12px 24px}
 #reward-dialog .victory-mark{height:20px;margin:0 0 3px}#reward-dialog .victory-mark svg{height:20px}#reward-dialog h2{font-size:23px}
 #reward-dialog .reward-scene,#reward-dialog[data-stage="final"] .reward-scene{display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:0;flex:1;margin:4px 0 8px}
 #reward-dialog[data-stage="first"] .reward-values{position:relative;inset:auto;height:115px;width:100%;max-width:400px}
 #reward-dialog .spins strong{font-size:48px}
 #reward-dialog[data-stage="final"] .reward-scene{flex-direction:row;gap:24px}
 #reward-dialog[data-stage="final"] .reward-art{position:relative;inset:auto;transform:none;width:50%;height:100%;max-height:160px}
 #reward-dialog[data-stage="final"] .reward-values{position:relative;inset:auto;width:45%;min-height:0}
 #reward-dialog .cash-reward bdi{font-size:46px}#reward-dialog .cash-reward small{font-size:14px}#reward-dialog[data-stage="final"] .spins{font-size:14px}
 #reward-dialog #reward-copy{margin-bottom:8px;font-size:13px}#reward-dialog .claim-button{min-height:44px;width:100%;font-size:16px;flex:none}
}