/* The original promo popup composition, with a self-contained local game. */
#promo-popup{position:fixed;inset:0;margin:0;border:0;padding:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;background-color:#000;background-size:cover;background-position:center top;color:#fff;overflow:hidden;font-family:'Space Grotesk',sans-serif;font-size:16px;line-height:1.2;isolation:isolate}
#promo-popup::backdrop{background:#000}
#promo-popup:focus{outline:none}
#promo-popup{overflow-anchor:none}
#promo-popup:not([open]){display:none}
#promo-popup[open]{display:flex;flex-direction:column;justify-content:center;animation:promo-appear .35s ease both}
#promo-popup .promo-shade{position:absolute;inset:0;background:#0003;z-index:-1;pointer-events:none}
#promo-popup .promo-art{position:absolute;pointer-events:none;user-select:none;height:auto;max-width:100%;z-index:0}
#promo-popup .promo-sachet{top:7%;left:5%;width:18%;transform:rotate(12deg)}
#promo-popup .promo-bear-right{right:4%;width:24%;bottom:5%}
#promo-popup .promo-bear-top{top:5%;right:-1%;width:13%;filter:blur(7px);transform:rotate(-61deg)}
#promo-popup .promo-bear-left{left:12%;width:13%;bottom:5%;filter:blur(2px);transform:rotate(33deg)}
#promo-popup .promo-mobile{display:none}
#promo-close{position:absolute;top:16px;right:16px;z-index:5;color:white;width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0}
#promo-close svg{width:100%;height:100%}
#promo-popup .promo-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:100%;height:100%;pointer-events:none}
#promo-popup .promo-content button{pointer-events:auto}
#promo-popup .promo-logo{width:160px;height:auto;margin:0 0 16px;flex-shrink:0}
#promo-popup .promo-copy{display:flex;flex-direction:column;gap:8px;text-align:center}
#promo-title{margin:0;font:700 45px/1.1 'Space Grotesk',sans-serif;letter-spacing:-1px;text-transform:capitalize;color:#fff}
#promo-subtitle{margin:0;font:500 18px/1.2 'Space Grotesk',sans-serif;color:white}
#promo-popup .promo-cards{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:12px;margin-top:16px;max-width:400px;perspective:1000px}
#promo-popup .promo-card{position:relative;width:72px;height:108px;min-width:48px;min-height:72px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;perspective:1000px;transition:transform .18s,filter .18s}
#promo-popup .promo-card-inner{display:block;position:relative;width:100%;height:100%;border-radius:inherit;transform-style:preserve-3d;transition:transform .5s}
#promo-popup .promo-card[aria-pressed=true] .promo-card-inner{transform:rotateY(180deg)}
#promo-popup .promo-card-back,#promo-popup .promo-card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;border:2px solid #0073f5}
#promo-popup .promo-card-back{background:#fff;color:#0073f5;font:700 32px/1.2 'Space Grotesk',sans-serif}
#promo-popup .promo-card-face{background:#0073f5;color:#000;transform:rotateY(180deg);font:700 17.6px/1.1 'Space Grotesk',sans-serif;text-align:center}
#promo-popup .promo-card:disabled{cursor:default}
#promo-popup .promo-reward{width:288px;display:flex;flex-direction:column;align-items:stretch;gap:22px;animation:promo-rise .45s both}
#promo-popup [hidden]{display:none!important}
#promo-claim{border:0;border-radius:50px;padding:16px;font:600 18px/1.2 'Space Grotesk',sans-serif;color:#000;background:#0073f5;box-shadow:3px 3px 0 1px #000;cursor:pointer}
#promo-no-thanks{border:0;background:none;font:400 16px/1.2 'Space Grotesk',sans-serif;text-decoration:underline;color:#ffffffd9;cursor:pointer}
#promo-popup .promo-demo-note{margin:0;text-align:center;color:#fff9;font:400 11px/1.3 'Space Grotesk',sans-serif}
#promo-launcher{position:fixed;left:16px;bottom:16px;z-index:900;display:flex;align-items:stretch;gap:8px;border-radius:50px;background:#0073f5;box-shadow:3px 3px 0 1px #000;color:#000;transition:background-color .2s,transform .2s;font:600 18px/1.2 'Space Grotesk',sans-serif}
#promo-launcher[hidden]{display:none}
#promo-reopen,#promo-dismiss{margin:0;border:0;color:inherit;background:transparent;cursor:pointer;font:inherit}
#promo-reopen{padding:16px 0 16px 16px;border-radius:50px 0 0 50px}
#promo-dismiss{padding:16px 16px 16px 0;display:flex;align-items:center;border-radius:0 50px 50px 0}
#promo-dismiss svg{width:18px;height:18px;display:block}
#promo-popup button:focus-visible,#promo-launcher button:focus-visible{outline:3px solid #faf78c;outline-offset:5px}
#promo-popup .promo-confetti{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
#promo-popup .promo-confetti i{position:absolute;left:var(--x);top:-20px;width:8px;height:14px;background:var(--color);animation:promo-fall 1.8s var(--delay) ease-in both}
@media(hover:hover){#promo-popup .promo-card:not(:disabled):hover{transform:translateY(-5px)}#promo-launcher:hover,#promo-claim:hover{background:#3391ff;box-shadow:0 0 18px rgba(0,115,245,.65)}}
@media(max-width:600px){
 #promo-popup{background-position:center center;padding:16px;align-items:center}
 #promo-popup .promo-desktop{display:none}
 #promo-popup .promo-mobile{display:block}
 #promo-popup .promo-product{left:50%;width:90%;bottom:-4%;max-height:256px;object-fit:contain;object-position:center bottom;transform:translateX(-50%)}
 #promo-popup .promo-bear-mobile{top:1%;left:-9%;width:39%;filter:blur(4px);transform:rotate(19deg)}
 #promo-popup .promo-content{height:auto;gap:16px;margin-bottom:15vw}
 #promo-popup .promo-logo{width:125px}
 #promo-title{font-size:40px}
 #promo-popup .promo-cards{gap:12px}
}
@media(max-width:359px){#promo-title{font-size:34px}#promo-subtitle{font-size:16px}#promo-popup .promo-cards{gap:8px}#promo-popup .promo-card{width:64px;height:96px}}
@media(max-height:540px){#promo-popup .promo-content{gap:12px;margin-bottom:0}#promo-popup .promo-logo{width:110px;margin-bottom:0}#promo-title{font-size:34px}#promo-popup .promo-cards{margin-top:4px}#promo-popup .promo-card{height:90px;width:60px}}
@keyframes promo-appear{from{opacity:0}to{opacity:1}}
@keyframes promo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes promo-fall{to{transform:translateY(105vh) rotate(560deg);opacity:0}}
@media(prefers-reduced-motion:reduce){#promo-popup,#promo-popup *{animation:none!important;transition:none!important}#promo-popup .promo-confetti{display:none}}
