/* Shared phone frame foundation and independent floating reward effects. */
.loyalty-art .story-phone-group{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;filter:none}
.story-phone-shell{position:relative;height:94%;aspect-ratio:.44;width:auto;flex:none;container-type:inline-size;isolation:isolate}
.story-device{position:absolute;inset:0;border:2px solid #252525;border-radius:17% / 7.5%;background:linear-gradient(120deg,#f3f1e9,#50514f 5%,#1a1a1a 9%,#131313 85%,#bcbab2 96%,#151515);box-shadow:inset 0 0 0 1px #d1d0c8,0 17px 25px #6e461f2b;overflow:hidden}
.story-device:before{content:'';position:absolute;inset:1.4%;border-radius:15% / 7%;background:#fff}
.story-status{position:absolute;z-index:3;top:2.6%;left:9%;right:8%;display:flex;justify-content:space-between;font:700 4.2cqw/1 var(--sans);color:#171717}
.story-island{position:absolute;z-index:4;left:34%;width:32%;top:2%;height:3.4%;border-radius:30px;background:#080808;box-shadow:inset -7px 0 5px #151515}
.story-island:after{content:'';position:absolute;right:10%;top:25%;height:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#203b50,#090e17 65%)}
.story-screen{position:absolute;left:3%;right:3%;top:7%;bottom:3%;overflow:hidden;border-radius:0 0 12% 12% / 0 0 6% 6%;background:#fff;isolation:isolate}
.story-home-bar{position:absolute;z-index:3;left:34%;width:32%;bottom:1.6%;height:.55%;border-radius:20px;background:#181818}

/* These are separate live elements, not text baked into the phone image. */
.story-points{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .3s;perspective:700px}
.story-pts{position:absolute;display:block;padding:4cqw 5.5cqw;border:1px solid #fff0b1;border-radius:3.5cqw;background:linear-gradient(130deg,#fff3bb 0%,#efd47a 23%,#c39736 69%,#f3d58c);box-shadow:inset 0 2px 2px #fff9,0 3px 0 #a87924,0 5px 0 #946a23,0 12px 15px #95672233;color:#fffdf0;font:800 clamp(11px,7cqw,21px)/1 var(--heading);text-shadow:0 1px 2px #8d661b88;white-space:nowrap;animation:story-points-float-v29 4.1s ease-in-out infinite;--pts-tilt:-9deg;--pts-rise:-14px}
.story-pts-one{top:11%;right:-24%;animation-delay:-1.3s}
.story-pts-two{top:36%;left:-31%;--pts-tilt:8deg;animation-duration:4.7s;animation-delay:-2.4s}
.story-pts-three{bottom:20%;right:-29%;--pts-tilt:-6deg;animation-duration:3.6s;animation-delay:-.6s}
.story-point-coin{position:absolute;display:grid;place-items:center;width:17cqw;aspect-ratio:1;border-radius:50%;border:2px solid #ffed9c;background:radial-gradient(circle at 35% 25%,#fff3aa,#ddb34d 47%,#a67924);box-shadow:inset 0 0 0 2px #bd8c33,inset 0 0 0 4px #edca6b,3px 4px 0 #a67b2b,0 10px 12px #8f5c2733;color:#b08732;font:800 11cqw/1 var(--sans);text-shadow:0 1px #fff3bb;animation:story-coin-float-v29 4.8s ease-in-out infinite}
.story-coin-one{left:-19%;top:8%;animation-delay:-1.7s}
.story-coin-two{left:-21%;bottom:12%;animation-duration:5.3s;animation-delay:-3s}
.story-point-spark{position:absolute;font:normal 9cqw/1 Georgia,serif;color:#d0a044;text-shadow:0 0 12px #e2b64755;animation:story-spark-v29 3.2s ease-in-out infinite}
.story-spark-one{top:26%;right:-17%}.story-spark-two{bottom:37%;left:-17%;animation-delay:-1.4s}
.is-enhanced .loyalty-panel:not([data-position=active]) .story-points{opacity:0}
.is-enhanced .loyalty-panel:not([data-position=active]) .story-points>*{animation-play-state:paused}
@keyframes story-points-float-v29{0%,100%{transform:translate3d(0,0,0) rotate(-2deg) rotateY(-13deg) rotateZ(var(--pts-tilt))}50%{transform:translate3d(3px,var(--pts-rise),18px) rotate(2deg) rotateY(12deg) rotateZ(var(--pts-tilt))}}
@keyframes story-coin-float-v29{0%,100%{transform:translateY(0) rotateY(-25deg) rotateZ(-16deg)}50%{transform:translateY(-13px) rotateY(30deg) rotateZ(12deg)}}
@keyframes story-spark-v29{0%,100%{opacity:.45;transform:translateY(0) scale(.8)}50%{opacity:1;transform:translateY(-7px) scale(1.15)}}
@media(max-width:700px){
  .loyalty-story .story-phone-shell{height:91%}
  .story-pts{--pts-rise:-7px;box-shadow:inset 0 1px 1px #fff9,0 2px 0 #a87924,0 3px 0 #946a23,0 7px 10px #9567222b}
  .story-pts-one{right:-27%}.story-pts-two{left:-32%}.story-pts-three{right:-30%}
}
@media(prefers-reduced-motion:reduce){.story-points>*{animation:none!important}.story-points{transition:none}}